:root {
    --upload-img-url: url('/wp-content/plugins/labflow-wp/include/uploader/fancy-file-uploader/fancy_upload.png');
    --remove-img-url: url('/wp-content/plugins/labflow-wp/include/uploader/fancy-file-uploader/fancy_remove.png');
    --labflow-wp-button-background-color: #ff3233;
    --labflow-wp-button-background-hover-color: #ff6060;
    --labflow-wp-button-color: #ffffff;
    --labflow-wp-button-hover-color: #ffd6d6;
    --labflow-wp-button-border-color: #ff3233;
    --labflow-wp-button-hover-border-color: #ff6060;
    --labflow-wp-input-border-color: #ff3233;
    --labflow-wp-input-hover-border-color: #ff6060;
    --labflow-wp-input-color: #333333;
    --labflow-wp-text-color: #333333;
    --labflow-wp-font-family: inherit;
    --labflow-wp-font-size: 18px;
    --labflow-wp-dropzone-border-color: #ffd6d6;
    --labflow-wp-dropzone-background-color: #FCFCFC;
    --labflow-wp-input-hover-background-color: #fff5f5;

}

/* 1. Rejtsük el az eredeti radio gombot */
.input-radio input,
.custom-radio input,
.input-checkbox input,
#minden_kep {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* 2. Készítsük el az egyedi "üres" kört */

.custom-radio .checkmark,
.input-radio .checkmark {
    display: inline-block;
    height: 20px;
    width: 20px;
    border: 2px solid var(--labflow-wp-input-border-color);
    /* Itt a piros üres kör! */
    border-radius: 50%;
    margin-right: 10px;
    vertical-align: middle;
    position: relative;
}

.input-checkbox .checkmark,
#minden_kep~.checkmark {
    display: inline-block;
    height: 20px;
    width: 20px;
    border: 2px solid var(--labflow-wp-input-border-color);
    /* Itt a piros üres négyzet! */
    border-radius: 0px;
    /* Négyzet alakú jelölőnégyzet */
    margin-right: 10px;
    vertical-align: middle;
    position: relative;
}

.input-radio .checkmark {
    display: inline-block;
    height: 20px;
    width: 20px;
    border: 2px solid var(--labflow-wp-input-border-color);
    /* Itt a piros üres kör! */
    border-radius: 50%;
    margin-right: 10px;
    vertical-align: middle;
    position: relative;
}

/* 3. Mi történjen, ha rámutatunk (opcionális) */
.input-checkbox:hover input~.checkmark,
#minden_kep:hover~.checkmark,
.custom-radio:hover input~.checkmark,
.input-radio:hover input~.checkmark {
    background-color: var(--labflow-wp-input-hover-background-color);
}

/* 4. Mi történjen, ha ki van választva? */
.input-checkbox input:checked~.checkmark,
#minden_kep:checked~.checkmark,
.custom-radio input:checked~.checkmark,
.input-radio input:checked~.checkmark {
    background-color: var(--labflow-wp-input-hover-background-color);
    border-color: var(--labflow-wp-input-border-color);
    /* Maradjon piros a széle */
}

/* 5. A belső pont (ami csak akkor látszik, ha be van jelölve) */
.input-checkbox .checkmark:after,
#minden_kep~.checkmark:after {
    content: "";
    position: absolute;
    display: none;
    top: 4px;
    left: 4px;
    width: 12px;
    height: 12px;
    border-radius: 0%;
    /* Négyzet alakú belső jelölőnégyzet */
    background: var(--labflow-wp-input-border-color);
    /* A belső pötty színe */
}

.custom-radio .checkmark:after,
.input-radio .checkmark:after {
    content: "";
    position: absolute;
    display: none;
    top: 4px;
    left: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--labflow-wp-input-border-color);
    /* A belső pötty színe */
}

/* Mutassuk meg a belső pontot, ha be van jelölve */
.input-checkbox input:checked~.checkmark:after,
#minden_kep:checked~.checkmark:after,
.custom-radio input:checked~.checkmark:after,
.input-radio input:checked~.checkmark:after {
    display: block;
}

.ff_fileupload_wrap_takaro,
.ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_summary,
.ff_fileupload_queued_own,
.minden_kep_checkbox {
    font-family: var(--labflow-wp-font-family);
    font-size: var(--labflow-wp-font-size) !important;
    color: var(--labflow-wp-text-color);
}

.ff_fileupload_wrap_takaro {
    text-align: center;
}

.feltolt_figyelmezteto {
    height: auto;
    text-align: center;
}

#summa_kepek {
    display: none;
    margin-left: auto;
    margin-right: auto;
    width: 100% !important;
}

.kep_kidolgozas {
    width: 100% !important;
    display: inline-flex;
    justify-content: space-evenly;
}

.ff_fileupload_wrap table.ff_fileupload_uploads button.ff_fileupload_remove_file {
    background-image: var(--remove-img-url);
    background-size: cover;
}

.ff_fileupload_wrap_takaro button,
button.kep_kidolgozas_button {
    appearance: auto;
    background-color: var(--labflow-wp-button-background-color);
    background-position-x: 50%;
    background-position-y: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    border-color: var(--labflow-wp-button-border-color);
    border-radius: 3px;
    border-bottom-right-radius: 3px;
    border-style: solid;
    border-width: 1.77778px;
    box-sizing: border-box;
    color: var(--labflow-wp-button-color);
    cursor: default;
    display: inline-block;
    font-family: "Open Sans", Arial, sans-serif;
    font-feature-settings: normal;
    font-kerning: auto;
    font-language-override: normal;
    font-optical-sizing: auto;
    font-size: 20px;
    font-size-adjust: none;
    font-stretch: 100%;
    font-style: normal;
    font-variant-alternates: normal;
    font-variant-caps: normal;
    font-variant-east-asian: normal;
    line-height: 1.7em;
    width: 40%;
}

button.kep_kidolgozas_button:hover {
    color: var(--labflow-wp-button-hover-color);
    background-color: var(--labflow-wp-button-background-hover-color);
    border-color: var(--labflow-wp-button-hover-border-color);
}

.ff_fileupload_wap {
    display: inline-flex;
    justify-content: space-around;
    width: 100%;
}

.ff_fileupload_queued_own input,
.ff_fileupload_queued_own select,
.ff_fileupload_summary input,
.ff_fileupload_summary select {
    border-color: var(--labflow-wp-input-border-color) !important;
    color: var(--labflow-wp-input-color) !important;
    border-width: 2px;
}

.ff_fileupload_wrap .ff_fileupload_dropzone {
    /*display: block; */
    width: 100%;
    max-width: 1080px;
    height: 25em;
    box-sizing: border-box;
    border: 2px dashed var(--labflow-wp-dropzone-border-color);
    border-radius: 3px;
    padding: 0;
    background-color: var(--labflow-wp-dropzone-background-color);
    background-image: var(--upload-img-url);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    opacity: 0.85;
    cursor: pointer;
    outline: none;
}

.ff_fileupload_wrap .ff_fileupload_dropzone::-moz-focus-inner {
    border: 0;
}

.ff_fileupload_wrap .ff_fileupload_dropzone:hover,
.ff_fileupload_wrap .ff_fileupload_dropzone:focus,
.ff_fileupload_wrap .ff_fileupload_dropzone:active {
    opacity: 1;
    background-color: var(--labflow-wp-input-hover-background-color);
    border-color: var(--labflow-wp-button-background-hover-color);
}

.ff_fileupload_wrap .ff_fileupload_dropzone_tools {
    position: absolute;
    right: 10px;
    top: 0;
}

.ff_fileupload_wrap .ff_fileupload_dropzone_tool {
    display: block;
    margin-top: 10px;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    border: 1px solid var(--labflow-wp-dropzone-border-color);
    border-radius: 3px;
    padding: 0;
    background-color: var(--labflow-wp-input-hover-background-color);
    background-repeat: no-repeat;
    background-position: center center;
    opacity: 0.85;
    cursor: pointer;
    outline: none;
}

.ff_fileupload_wrap .ff_fileupload_dropzone_tool::-moz-focus-inner {
    border: 0;
}

.ff_fileupload_wrap .ff_fileupload_dropzone_tool:hover,
.ff_fileupload_wrap .ff_fileupload_dropzone_tool:focus,
.ff_fileupload_wrap .ff_fileupload_dropzone_tool:active {
    opacity: 1;
    background-color: var(--labflow-wp-input-hover-background-color);
    border-color: var(--labflow-wp-button-background-color);
}

.ff_fileupload_queued_own {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}

td.ff_fileupload_summary {
    min-width: 50% !important;
    max-width: 80% !important;
}
td.fileupload_summary .ff_fileupload_preview {
    height: 0px;
}

    .ff_fileupload_preview.own,
    td .ff_fileupload_preview.own button.ff_fileupload_preview_image {
        display: none;
        }
@media (max-width: 400px) {
    
    td .ff_fileupload_preview.own /*,
    td .ff_fileupload_preview.own button.ff_fileupload_preview_image*/ {
        width: 100%;
        min-height: 70px;
        margin: 0;
        padding: 0;
        display:block;
    }
    .ff_fileupload_preview.own button.ff_fileupload_preview_image {
        display: none;
    }
    td .ff_fileupload_preview.own button.ff_fileupload_preview_image {
        display: block;
        width: 100%;
        min-height: 65px;
        margin: 0;
        padding: 0;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        
    }
    .input_en{
        max-width: 100%;
    }
    td.ff_fileupload_summary {
        display: flex;
        flex-direction: column;
        
    }
    td.ff_fileupload_preview,
    td.ff_fileupload_preview button {
        display: none;
        max-width: 0;
    }
    .ff_fileupload_queued_own {
        flex-direction: row;
    }
    td.ff_fileupload_summary {
        width: 100%;
    }
    td .feltoltes {
        width: 100%;
    }

}