#filters_box .filters_button {
    background            : #796E66;
    border                : 1px solid #796E66;
    border-radius         : 5px;
    -webkit-border-radius : 5px;
    -moz-border-radius    : 5px;
    box-shadow            : 0 0 10px #999999;
    color                 : #E8E3DF;
    cursor                : pointer;
    padding               : 5px;
}

#filters_box.open .filters_button {
    box-shadow                         : none;
    border-bottom-left-radius          : 0;
    border-bottom-right-radius         : 0;
    -webkit-border-bottom-left-radius  : 0;
    -webkit-border-bottom-right-radius : 0;
    -moz-border-radius-bottomleft      : 0;
    -moz-border-radius-bottomright     : 0;
}

#filters_box .filtered_column_num {
    background            : #B8860B;
    border-radius         : 50%;
    -webkit-border-radius : 50%;
    -moz-border-radius    : 50%;
    display               : none;
    height                : 20px;
    line-height           : 18px;
    position              : absolute;
    right                 : -10px;
    text-align            : center;
    top                   : -10px;
    width                 : 20px;
}

#filters_box .outer_box {
    display         : flex;
    flex-direction  : row;
    flex-wrap       : nowrap;
    gap             : 5px;
    justify-content : center;
    margin-bottom   : 15px;
}

#filters_box .outer_box > div {
    max-width : 400px;
    width     : 100%;
}

#filters_box .outer_box > i {
    display : none;
}

.filters:not(.outer) {
    border                : 1px solid transparent;
    border-radius         : 0 5px 5px 5px;
    -webkit-border-radius : 0 5px 5px 5px;
    -moz-border-radius    : 0 5px 5px 5px;
    display               : flex;
    flex-direction        : row;
    flex-wrap             : wrap;
    height                : 0;
    margin-bottom         : 20px;
    overflow              : hidden;
    padding               : 0;
    gap                   : 5px;
}

#filters_box.open .filters:not(.outer) {
    border  : 1px solid #796E66;
    height  : auto;
    padding : 5px;
}

.filters.outer > div,
.filters > div:not(:last-child):not(.quick_filters) {
    background            : #C6B9AE;
    border                : 1px solid #796E66;
    border-radius         : 5px;
    -webkit-border-radius : 5px;
    -moz-border-radius    : 5px;
    box-shadow            : 0 0 10px #999999;
    -webkit-box-shadow    : 0 0 10px #999999;
    -moz-box-shadow       : 0 0 10px #999999;
    overflow              : hidden;
}

.filters:not(.outer) > div {
    width : calc(100% / 5 - 4px);
}

.quick_filters {
    align-items    : center;
    border-bottom  : 1px solid #796E66;
    display        : flex;
    flex-basis     : 100%;
    flex-direction : row;
    flex-wrap      : nowrap;
    gap            : 5px;
    min-height     : 42px;
}

#quick_filter_buttons {
    flex : 1;
}

.quick_filters button {
    margin : 3px;
}

.filters .filter_box.filtered {
    border-color : #B8860B;
}

.filters .title {
    background    : #9A8E84;
    border-bottom : #EBEBEB;
}

.filters .filter_box.filtered .title {
    background : #B8860B;
}

.filters .title,
.filters .input {
    padding : 5px 7px;
}

.filters .input {
    display         : flex;
    flex-direction  : row;
    flex-wrap       : nowrap;
    justify-content : space-between;
}

.filters .input button,
#mobile_filters .input button {
    border                             : 1px solid #796E66;
    border-bottom-right-radius         : 5px;
    -webkit-border-bottom-right-radius : 5px;
    -moz-border-radius-bottomright     : 5px;
    border-top-right-radius            : 5px;
    -webkit-border-top-right-radius    : 5px;
    -moz-border-radius-topright        : 5px;
    cursor                             : pointer;
    font-weight                        : bold;
    height                             : 22px;
    width                              : 30px;
}

.filters .input button:focus,
#mobile_filters .input button:focus {
    border-color : #FD7401;
}

.filters .input button:hover,
#mobile_filters .input button:hover {
    box-shadow : 0 0 10px #999999;
}

.filters .input button:active,
#mobile_filters .input button:active {
    box-shadow : inset 0 0 10px #999999;
}

.filters select,
.filters input,
#mobile_filters .mf_filters input {
    border                            : 1px solid #9A8E84;
    border-right                      : none;
    border-bottom-left-radius         : 5px;
    -webkit-border-bottom-left-radius : 5px;
    -moz-border-radius-bottomleft     : 5px;
    border-top-left-radius            : 5px;
    -webkit-border-top-left-radius    : 5px;
    -moz-border-radius-topleft        : 5px;
    padding                           : 0 3px;
}

.filters .select2,
/* .filters select, /* CARD STICKY */
.filters input:not([type="checkbox"]) {
    width : calc(100% - 30px) !important;
}

.filters .multi_input .select2,
/* .filters .multi_input select, /* CARD STICKY */
.filters .multi_input input {
    width : calc(50% - 15px) !important;
}

.filters .second_input .select2-selection--single,
/* .filters select.second_input, /* CARD STICKY */
.filters input.second_input {
    border-radius         : 0;
    -webkit-border-radius : 0;
    -moz-border-radius    : 0;
}

#filters_box .buttons {
    align-items     : end;
    display         : flex;
    flex-direction  : row;
    flex-wrap       : nowrap;
    gap             : 20px;
    justify-content : right;
    padding-top     : 10px;
    width           : 100%;
}

#filters_box .buttons button {
    box-shadow         : 0 0 10px #A56734;
    -webkit-box-shadow : 0 0 10px #A56734;
    -moz-box-shadow    : 0 0 10px #A56734;
    padding            : 5px;
}

#filters_box .buttons button.searching .fa-magnifying-glass {
    display : none;
}

#filters_box .buttons button .fa-gear {
    display : none;
}

#filters_box .buttons button.searching .fa-gear {
    display : inline-block;
}

.filters .extra_filter_box {
    display  : none;
    height   : 0;
    opacity  : 0;
    overflow : hidden;
    width    : 0;
}

/* ===================================================================================================================== MOBILE FILTERS */
#mobile_filters {
    display    : none;
    flex-wrap  : nowrap;
    flex-basis : 100%;
    overflow-x : auto;
}

#mobile_filters > div {
    border        : 1px solid #9A8E84;
    border-radius : 5px;
    cursor        : pointer;
    margin        : 3px;
    padding       : 7px;
    white-space   : nowrap;
}

#mobile_filters > div:first-child {
    background : #C6B9AE;
    left       : 3px;
    position   : sticky;
    z-index    : 1;
}

#mobile_filters > div:hover {
    background : #9A8E84;
}

#mobile_filters .filtered {
    background : #A56734 !important;
    color      : #FFFFFF;
}

#mobile_filters .dt_filter_extra_filter_mf {
    display  : none;
    height   : 0;
    opacity  : 0;
    overflow : hidden;
    width    : 0;
}

#mobile_filters .filtered_column_num {
    position : relative !important;
}

/* ===================================================================================================================== DIALOG FILTER */
#dialog_filter {
    display        : flex;
    flex-direction : column;
    height         : 100%;
    max-height     : 100%;
    position       : relative;
}

#dialog_filter .dialog_filter_header {
    align-items     : center;
    display         : flex;
    font-size       : 18px;
    font-weight     : bold;
    justify-content : space-between;
    margin-bottom   : 20px;
    position        : relative;
}

#dialog_filter .dialog_filter_header .dialog_filter_title {
    font-size      : 22px;
    font-weight    : bold;
    letter-spacing : -0.02em;
    line-height    : 1.2;
    margin         : 0;
}

#dialog_filter .dialog_filter_header i {
    color  : #A56734;
    cursor : pointer;
}

#dialog_filter .dialog_filter_input_box {
    margin-bottom : 16px;
    position      : relative;
}

#dialog_filter .dialog_filter_input_box::before {
    content        : "\f002";
    font-family    : "Font Awesome 6 Free", serif;
    font-weight    : 900;
    left           : 16px;
    pointer-events : none;
    position       : absolute;
    top            : 50%;
    transform      : translateY(-50%);
}

#dialog_filter .dialog_filter_input_box .dialog_filter_search_input {
    background    : #FFFFFF;
    border        : 1px solid #C6B9AE;
    border-radius : 14px;
    box-shadow    : 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 1px 2px rgba(55, 35, 22, 0.04);
    font-size     : 17px;
    font-weight   : 500;
    height        : 58px;
    outline       : none;
    padding-left  : 30px;
    width         : 100%;
}

#dialog_filter .dialog_filter_input_box .dialog_filter_search_input::placeholder {
    color       : #9A8F87;
    font-weight : 400;
}

#dialog_filter .dialog_filter_input_box .dialog_filter_search_input:focus {
    border-color : #A56734;
    box-shadow   : 0 0 0 3px rgba(199, 96, 28, 0.14), inset 0 1px 2px rgba(55, 35, 22, 0.04);
}

#dialog_filter .dialog_filter_options {
    display                    : flex;
    flex                       : 1 1 auto;
    flex-direction             : column;
    gap                        : 1px;
    height                     : 55vh;
    min-height                 : 0;
    overflow-y                 : auto;
    overscroll-behavior        : contain;
    -webkit-overflow-scrolling : touch;
    padding                    : 0 0 14px;
}

#dialog_filter .dialog_filter_options::-webkit-scrollbar {
    width : 5px;
}

#dialog_filter .dialog_filter_options::-webkit-scrollbar-thumb {
    background    : rgba(128, 98, 77, 0.28);
    border-radius : 999px;
}

#dialog_filter .dialog_filter_options .option {
    align-items           : center;
    background            : #FFFFFF;
    border                : 1px solid #C6B9AE;
    border-radius         : 14px;
    column-gap            : 14px;
    cursor                : pointer;
    display               : grid;
    grid-template-columns : 44px 1fr;
    padding               : 12px 14px;
    min-height            : 74px;
    text-align            : left;
    width                 : 100%;
}

#dialog_filter .dialog_filter_options .option:active {
    transform : scale(0.8);
}

#dialog_filter .dialog_filter_options .option .option_icon {
    align-items     : center;
    background      : #FFFFFF;
    border-radius   : 50%;
    color           : #A56734;
    display         : inline-flex;
    font-size       : 18px;
    font-weight     : 700;
    height          : 38px;
    justify-content : center;
    width           : 38px;
}

#dialog_filter .dialog_filter_options .option .option_title {
    display     : block;
    font-size   : 17px;
    font-weight : 750;
    line-height : 1.25;
    overflow    : hidden;
    /*white-space: nowrap;
    text-overflow: ellipsis;*/
}

/* META TEXT */
.mobile-option-meta {
    color:       #A56734;
    display     : block;
    font-size   : 15px;
    font-weight : 500;
    line-height : 1.2;
    margin-top  : 5px;
}

/* ===== IS-SELECTED ===== */
#dialog_filter .dialog_filter_options .option.is_selected {
    background   : linear-gradient(180deg, #FFF3E7 0%, #FFF8F1 100%);
    border-color : #A56734;
    box-shadow   : 0 0 0 1px rgba(230, 129, 61, 0.1), 0 8px 20px rgba(199, 96, 28, 0.12);
}

#dialog_filter .dialog_filter_options .option.is_selected .option_icon {
    background : #A56734;
    color      : #FFFFFF;
}

#dialog_filter .dialog_filter_options .option.is_selected .option_icon:before {
    content       : "\f00c";
    font-family   : "Font Awesome 6 Free";
    font-weight   : 900;
    padding-right : 2px;
}

#dialog_filter .dialog_filter_options .option.is_selected .option_title {
    color : #A56734;
}

/* ===== IS-SELECTED ===== */

/* ===== ACTION BUTTONS ===== */
#dialog_filter .dialog_field_actions {
    border-top            : 1px solid rgba(220, 204, 190, 0.7);
    display               : grid;
    gap                   : 14px;
    grid-template-columns : 1fr 1fr;
    padding-top           : 14px;
}

#dialog_filter .dialog_field_actions .action_btn {
    border-radius : 12px;
    cursor        : pointer;
    font-size     : 17px;
    font-weight   : 750;
    height        : 56px;
}

#dialog_filter .dialog_field_actions .action_btn.select_btn {
    background : #A56734;
    border     : 1px solid #A56734;
    box-shadow : 0 8px 18px rgba(199, 96, 28, 0.24);
    color      : #FFFFFF;
}

#dialog_filter .dialog_field_actions .action_btn.cancel_btn {
    background : #FFFFFF;
    border     : 1px solid #A56734;
    color      : #A56734;
}

#dialog_filter .dialog_field_actions .action_btn:active {
    transform : scale(0.8);
}

#dialog_filter .dialog_filter_checkbox_wrapper {
    padding     : 20px;
    display     : flex;
    align-items : center;
    gap         : 10px;
    font-size   : 1.1rem;
}

#dialog_filter .dialog_filter_checkbox {
    width  : 20px;
    height : 20px;
    cursor : pointer;
}

#dialog_filter .checkbox_label {
    cursor : pointer;
}

/* ===================================================================================================================== MEDIA */
@media screen and (max-width : 900px) {
    .filters:not(.outer) > div {
        width : calc(100% / 4 - 4px);
    }
}

@media screen and (max-width : 700px) {
    .filters:not(.outer) > div {
        width : calc(100% / 3 - 4px);
    }
}

@media screen and (max-width : 576px) {
    .filters:not(.outer) > div {
        width : calc(100% / 2 - 4px);
    }

    #content_box {
        margin : 125px 0 0 0 !important;
    }

    .outer_box {
        background    : #C6B9AE;
        border-bottom : 2px solid #A56734;
        flex-wrap     : wrap !important;
        gap           : 0 !important;
        position      : fixed;
        top           : 50px;
        left          : 0;
        padding       : 5px;
        width         : 100%;
        z-index       : 11;
    }

    .outer_box .filters {
        flex : 1;
    }

    .outer_box > i {
        display         : block !important;
        flex-grow       : 0;
        font-size       : 25px;
        line-height     : 50px;
        text-decoration : none !important;
    }

    .outer_box .filter_box {
        border     : none !important;
        box-shadow : none !important;
    }

    .outer_box .title {
        display : none;
    }

    .outer_box .filters .input button,
    .outer_box .filters .input .select2-container--bs3 .select2-selection--single {
        height : 40px; !important;
    }

    .outer_box .filters .input .select2-container--bs3 .select2-selection--single .select2-selection__rendered {
        line-height : 40px !important;
    }

    .outer_box .filters .input .select2-container--bs3 .select2-selection--single .select2-selection__arrow {
        top : 9px;
    }

    #mobile_filters {
        display   : flex;
        max-width : 100% !important;
    }

    #main_filter_box {
        height   : 0 !important;
        overflow : hidden !important;
        opacity  : 0 !important;
    }
}