/* ===================================================================================================================== MAIN ITEMS  */
button,
select {
    color : #1E1E1E;
}

.upload_file_box button,
button.s1 {
    background-color      : #A56734;
    border                : 2px solid transparent;
    border-radius         : 5px;
    -webkit-border-radius : 5px;
    -moz-border-radius    : 5px;
    box-shadow            : none;
    -webkit-box-shadow    : none;
    -moz-box-shadow       : none;
    color                 : #FFFFFF;
    cursor                : pointer;
    padding               : 8px 16px;
}

.upload_file_box button:focus,
button.s1:focus {
    box-shadow : 0 0 0 5px rgba(165, 103, 52, .3);
}

.upload_file_box button:hover,
button.s1:not(:disabled):hover {
    border-color : #FFFFFF;
}

.upload_file_box button:disabled,
button.s1:disabled {
    cursor  : auto;
    opacity : 0.5;
}

input {
    border-radius         : 0;
    -webkit-border-radius : 0;
    -moz-border-radius    : 0;
}

textarea {
    min-height : 100px;
    resize     : none;
}

/* ===================================================================================================================== COUNTER BUTTON */
.counter_button .next_send {
    display : none;
}

.counter_button.sent .first_send {
    display : none;
}

.counter_button.sent .next_send {
    display : block;
}

/* ===================================================================================================================== BUTTON LOADER */
button .button_loader {
    align-items     : center;
    background      : #A56734;
    bottom          : 0;
    display         : flex;
    justify-content : center;
    left            : 0;
    position        : absolute;
    right           : 0;
    top             : 0;
}

/* ===================================================================================================================== PASSWORD SHOW/HIDE */
.password_eye {
    text-align : center;
    width      : 35px;
}

.password_eye i {
    font-size   : 20px;
    margin-left : 5px;
}

.password_eye .fa-eye-slash,
.password_eye.show .fa-eye {
    display : none;
}

.password_eye.show .fa-eye-slash {
    display : block;
}

/* ===================================================================================================================== INPUT NUMBER PM */
.pm_box {
    border                : 1px solid #1E1E1E;
    border-radius         : 5px;
    -webkit-border-radius : 5px;
    -moz-border-radius    : 5px;
    display               : flex;
    flex-wrap             : nowrap;
    flex-direction        : row;
    height                : 30px;
    margin                : 0 auto 10px auto;
    overflow              : hidden;
    position              : relative;
    width                 : 108px;
}

.pm_box button {
    aspect-ratio : 1 / 1;
    border       : none;
    background   : #A56734;
    color        : #E8E3DF;
    cursor       : pointer;
}

.pm_box button:hover i {
    transform : scale(1.3);
}

.pm_box button:active i {
    transform : scale(1);
}

.pm_box input,
.pm_box input:disabled {
    background  : #E8E3DF;
    border      : 0;
    color       : #1E1E1E;
    font-size   : 16px;
    font-weight : 900;
    text-align  : center;
    width       : 50px;
}

.pm_box .pm_loader {
    align-items     : center;
    background      : #FFFFFFBB;
    bottom          : 0;
    color           : #A56734;
    display         : none;
    font-size       : 20px;
    justify-content : center;
    left            : 0;
    position        : absolute;
    right           : 0;
    top             : 0;
}

.pm_box.loading .pm_loader {
    display : flex;
}

/* ===================================================================================================================== FORM_1 */
.form_1 {
    border-left        : 1px solid #A56734;
    box-shadow         : -5px 0 0 0 rgba(92, 86, 80, 0.8);
    -webkit-box-shadow : -5px 0 0 0 rgba(92, 86, 80, 0.8);
    -moz-box-shadow    : -5px 0 0 0 rgba(92, 86, 80, 0.8);
    margin             : -15px 0 15px 50px;
    padding            : 25px 0 0 15px;
}

.form_1 label {
    color     : #E8E3DF;
    font-size : 16px;
    width     : 150px;
}

.form_1 table input,
.form_1 table textarea {
    margin  : 5px;
    padding : 5px;
    width   : 314px;
}

.form_1 table input:focus,
.form_1 table input:hover,
.form_1 table textarea:focus,
.form_1 table textarea:hover {
    border-color : #FD7401;
}

.form_1 input[type=button],
.form_1 button {
    background : url('../../pictures/button_bg.png') #5C5650 no-repeat;
    border     : 1px solid #A56734;
    color      : #E8E3DF;
    margin-top : 15px;
    padding    : 3px 3px 3px 100px;
}

.form_1 input[type=button]:hover,
.form_1 button:hover {
    color  : #A56734;
    cursor : pointer;
}

.form_1 td.td_hr {
    height : 50px;
}

.form_1 .error_text {
    color      : #FFFFFF;
    background : #FD7401;
    margin     : -5px 20px 0 20px;
}

/* ===================================================================================================================== FORM_2 */
div.input_style_2 {
    background            : #E8E3DF;
    border                : 1px solid #A56734;
    border-radius         : 5px;
    -webkit-border-radius : 5px;
    -moz-border-radius    : 5px;
    cursor                : text;
    margin-bottom         : 10px;
    padding               : 5px 5px 0 5px;
    text-align            : left;
}

div.input_style_2:focus-within,
div.input_style_2.focus {
    box-shadow : 0 0 0 5px rgba(165, 103, 52, .3);
}

div.input_style_2 .label_div {
    overflow      : hidden;
    text-overflow : ellipsis;
    white-space   : nowrap;
}

div.input_style_2 input:not([type=checkbox]),
div.input_style_2 textarea {
    background : none;
    border     : none;
    padding    : 5px;
    width      : 100%;
}

/* ===================================================================================================================== INPUT IMG */
div.input_style_2 .drag-area {
    display  : inline-block;
    margin   : 5px;
    position : relative;
    width    : calc(100% - 10px);
}

div.input_style_2 .drag-area .dummy {
    margin-top : 100%;
}

div.input_style_2 .drag-area .box {
    align-items           : center;
    background-position   : center;
    background-repeat     : no-repeat;
    background-size       : contain;
    border                : 2px dashed #FFFFFF;
    border-radius         : 5px;
    -webkit-border-radius : 5px;
    -moz-border-radius    : 5px;
    bottom                : 0;
    display               : flex;
    flex-direction        : column;
    justify-content       : center;
    left                  : 0;
    position              : absolute;
    right                 : 0;
    top                   : 0;
}

div.input_style_2 .drag-area .box i {
    display  : none;
    position : absolute;
    top      : 5px;
    right    : 5px;
}

div.input_style_2 .drag-area .box span {
    font-size  : 20px;
    text-align : center;
}

div.input_style_2 .drag-area .box span span {
    line-height : 100px;
}

div.input_style_2 .drag-area .box button {
    cursor  : pointer;
    margin  : 0;
    padding : 5px;
    z-index : 1;
}

div.input_style_2 .drag-area .box input {
    height   : 100%;
    left     : 0;
    margin   : 0;
    opacity  : 0;
    position : absolute;
    top      : 0;
    width    : 100%;
}

div.input_style_2 .drag-area .box.draging {
    border-color : #A56734;
    border-style : solid;
}

div.input_style_2 .drag-area .box.draging * {
    transform : scale(1.1);
}

div.input_style_2 .drag-area .box.added {
    border-color : #A56734;
    border-style : solid;
}

div.input_style_2 .drag-area .box.added * {
    opacity : 0;
}

div.input_style_2 .drag-area .box.added i {
    display : block;
    opacity : 1;
}

div.input_style_2 img.input_picture {
    margin-bottom : 5px;
}

/* ===================================================================================================================== SELECT TAG LIST ====== KATMOVIES CAST LIST */
.select_tag_list {
    line-height : 30px;
    padding     : 0 10px;
}

.select_tag_list img {
    cursor         : pointer;
    height         : 17px;
    margin-right   : 5px;
    vertical-align : middle;
}

.select_tag_list input {
    margin : 0 !important;
    width  : 30% !important;
}

/* ===================================================================================================================== LEFT MENU SEARCH INPUT */
.search_input_box {
    position : relative;
}

.search_input_box:before {
    font-family : "Font Awesome 6 Free";
    font-size   : 19px;
    font-weight : 900;
    content     : "\f002";
    position    : absolute;
    right       : 5px;
    top         : 5px;
}

.search_input {
    border      : 2px solid black;
    border-left : 5px solid black;
    box-sizing  : border-box;
    padding     : 5px 25px 5px 5px;
    width       : 100%;
}

#mobile_menu .search_input {
    border        : 2px solid #A56734;
    margin-bottom : 10px;
}

/* ===================================================================================================================== FORM FLEX ===== MORE INPUT ONE ROW */
.form_flex_line {
    align-items     : stretch;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : nowrap;
    gap             : 10px;
    justify-content : space-between;
}

.form_flex_line > * {
    flex : 1 1 0;
}

/* ===================================================================================================================== CHECKBOX */
.checkbox_box_1,
.checkbox_box_2 {
    align-items    : center;
    display        : flex;
    flex-direction : row;
    flex-wrap      : nowrap;
}

/* STYLE 1 */
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
    .checkbox_box_1 input[type=checkbox] {
        --active           : #A56734;
        --active-inner     : #FFFFFF;
        --background       : #E8E3DF;
        --border           : #A56734;
        --border-hover     : #A56734;
        --disabled         : #F6F8FF;
        --disabled-inner   : #E1E6F9;
        -webkit-appearance : none;
        -moz-appearance    : none;
        background         : var(--b, var(--background));
        border             : 1px solid var(--bc, var(--border));
        cursor             : pointer;
        display            : inline-block;
        height             : 21px;
        margin             : 0;
        outline            : none;
        position           : relative;
        vertical-align     : top;
        transition         : background 0.3s, border-color 0.3s, box-shadow 0.2s;
    }

    .checkbox_box_1 input[type=checkbox]:after {
        content    : "";
        display    : block;
        left       : 0;
        top        : 0;
        position   : absolute;
        transition : transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
    }

    .checkbox_box_1 input[type=checkbox]:checked {
        --b     : var(--active);
        --bc    : var(--active);
        --d-o   : .3s;
        --d-t   : .6s;
        --d-t-e : cubic-bezier(.2, .85, .32, 1.2);
    }

    .checkbox_box_1 input[type=checkbox]:disabled {
        --b     : var(--disabled);
        cursor  : not-allowed;
        opacity : 0.9;
    }

    .checkbox_box_1 input[type=checkbox]:disabled:checked {
        --b  : var(--disabled-inner);
        --bc : var(--border);
    }

    .checkbox_box_1 input[type=checkbox]:disabled + label {
        cursor : not-allowed;
    }

    .checkbox_box_1 input[type=checkbox]:hover:not(:checked):not(:disabled) {
        --bc : var(--border-hover);
    }

    .checkbox_box_1 input[type=checkbox]:focus {
        box-shadow : 0 0 0 5px rgba(165, 103, 52, .3);
    }

    .checkbox_box_1 input[type=checkbox]:not(.switch) {
        width : 21px;
    }

    .checkbox_box_1 input[type=checkbox]:not(.switch):after {
        opacity : var(--o, 0);
    }

    .checkbox_box_1 input[type=checkbox]:not(.switch):checked {
        --o : 1;
    }

    .checkbox_box_1 input[type=checkbox] + label {
        display        : inline-block;
        vertical-align : middle;
        cursor         : pointer;
        margin-left    : 4px;
    }

    .checkbox_box_1 input[type=checkbox]:not(.switch) {
        border-radius : 7px;
    }

    .checkbox_box_1 input[type=checkbox]:not(.switch):after {
        width       : 5px;
        height      : 9px;
        border      : 2px solid var(--active-inner);
        border-top  : 0;
        border-left : 0;
        left        : 7px;
        top         : 4px;
        transform   : rotate(var(--r, 20deg));
    }

    .checkbox_box_1 input[type=checkbox]:not(.switch):checked {
        --r : 43deg;
    }
}

.checkbox_box_1 * {
    box-sizing : inherit;
}

.checkbox_box_1 *:before,
.checkbox_box_1 *:after {
    box-sizing : inherit;
}

/* STYLE 2 */

.checkbox_box_2 * {
    cursor : pointer;
}

.checkbox_box_2 input[type="checkbox"] {
    background-image    : -webkit-linear-gradient(hsla(0, 0%, 0%, .1), hsla(0, 0%, 100%, .1)),
    -webkit-linear-gradient(left, #FF6666 50%, #66FFCC 50%);
    background-size     : 100% 100%, 200% 100%;
    background-position : 0 0, 15px 0;
    border-radius       : 25px;
    box-shadow          : inset 0 1px 4px hsla(0, 0%, 0%, .5),
    inset 0 0 10px hsla(0, 0%, 0%, .5),
    0 0 0 1px hsla(0, 0%, 0%, .1),
    0 -1px 2px 2px hsla(0, 0%, 0%, .25),
    0 2px 2px 2px hsla(0, 0%, 100%, .75);
    cursor              : pointer;
    height              : 25px;
    padding-right       : 25px;
    width               : 75px;
    -webkit-appearance  : none;
    -webkit-transition  : .25s;
}

.checkbox_box_2 input[type="checkbox"]:after {
    background-color : #A56734;
    background-image : -webkit-linear-gradient(hsla(0, 0%, 100%, .1), hsla(0, 0%, 0%, .1));
    border-radius    : 25px;
    box-shadow       : inset 0 1px 1px 1px hsla(27, 52%, 43%, 1),
    inset 0 -1px 1px 1px hsla(0, 0%, 0%, .25),
    0 1px 3px 1px hsla(0, 0%, 0%, .5),
    0 0 2px hsla(0, 0%, 0%, .25);
    content          : '';
    display          : block;
    height           : 25px;
    width            : 50px;
}

.checkbox_box_2 input[type="checkbox"]:checked {
    background-position : 0 0, 35px 0;
    padding-left        : 25px;
    padding-right       : 0;
}

/* ===================================================================================================================== RADIO */
.radio_box input {
    display : none;
}

.radio_box {
    --container_width     : 100%;
    align-items           : center;
    background-color      : #E8E3DF;
    border                : 1px solid #A56734;
    border-radius         : 9999px;
    -webkit-border-radius : 9999px;
    -moz-border-radius    : 9999px;
    color                 : #000000;
    display               : flex;
    overflow              : hidden;
    position              : relative;
    width                 : var(--container_width);
}

.radio_box.num_1 {--input_number : 1;}

.radio_box.num_2 {--input_number : 2;}

.radio_box.num_3 {--input_number : 3;}

.radio_box.num_4 {--input_number : 4;}

.radio_box.num_5 {--input_number : 5;}

.radio_box.num_6 {--input_number : 6;}

.radio_box.num_7 {--input_number : 7;}

.radio_box.num_8 {--input_number : 8;}

.radio_box.num_9 {--input_number : 9;}

.radio_box label {
    align-items     : center;
    cursor          : pointer;
    display         : flex;
    justify-content : center;
    letter-spacing  : -1px;
    padding         : 10px;
    width           : 100%;
    z-index         : 1;
}

.radio_box .selection {
    display    : none;
    height     : 100%;
    left       : 0;
    position   : absolute;
    top        : 0;
    transition : 300ms ease;
    width      : calc(var(--container_width) / var(--input_number));
    z-index    : 0;
}

.radio_box label:has(input:checked) {
    color : #E8E3DF;
}

.radio_box label:has(input:checked) ~ .selection {
    background-color : #A56734;
    display          : inline-block;
}

.radio_box label:nth-child(1):has(input:checked) ~ .selection {
    transform : translateX(calc(var(--container_width) * 0));
}

.radio_box label:nth-child(2):has(input:checked) ~ .selection {
    transform : translateX(calc(var(--container_width) * 1));
}

.radio_box label:nth-child(3):has(input:checked) ~ .selection {
    transform : translateX(calc(var(--container_width) * 2));
}

.radio_box label:nth-child(4):has(input:checked) ~ .selection {
    transform : translateX(calc(var(--container_width) * 3));
}

/* ===================================================================================================================== Upload File */
.upload_file_box .drag-area {
    align-items           : center;
    border                : 1px dashed #A56734;
    border-radius         : 5px;
    -webkit-border-radius : 5px;
    -moz-border-radius    : 5px;
    display               : flex;
    flex-direction        : column;
    margin-bottom         : 5px;
}

.upload_file_box .drag-area > * {
    align-items     : center;
    display         : flex;
    gap             : 10px;
    justify-content : center;
    min-height      : 50px;
    padding         : 5px;
    position        : relative;
    width           : 100%;
}

.upload_file_box .drag-area .input input {
    cursor   : pointer;
    height   : 100%;
    left     : 0;
    margin   : 0;
    opacity  : 0;
    position : absolute;
    right    : 0;
    top      : 0;
}

.upload_file_box .drag-area .selected {
    display : none;
}

.upload_file_box .drag-area .selected .filenames {
    text-align : left;
}

.upload_file_box .drag-area .selected i {
    color     : #A56734;
    cursor    : pointer;
    font-size : 24px;
}

.upload_file_box .drag-area .selected i:hover {
    transform : scale(1.3);
}

.upload_file_box .drag-area.draging {
    border-style : solid;
}

.upload_file_box .drag-area.draging * {
    transform : scale(1.1);
}

.upload_file_box .drag-area.added {
    border-style : solid;
}

.upload_file_box .drag-area.added .input {
    display : none;
}

.upload_file_box .drag-area.added .selected {
    display         : flex;
    justify-content : space-between;
}