/* Set proper color for all input field */
table.dataTable span.dtcc div.dtcc-search>div input {
    border: 1px solid #aaaaaa;
    background-color: var(--bs-table-bg);
}

/* Fix problem with dropdown menu in FixedHeader */
#bootstrap-datatable .dtfh-floatingparent .dropdown-menu.show {
    top: 100%% !important;
}

/* Fix problem with dropdown menu in normal view */
#bootstrap-datatable .dt-container>.dropdown-menu.show {
    top: 151px !important;
}

/* Fix problem with wrong color of icon in dark mode */
.dark table.dataTable span.dtcc div.dtcc-search>div div.dtcc-search-type-icon svg,
.dark table.dataTable span.dtcc span.dtcc-button-icon {
    color: var(--bs-body-color);
}

/* Fix problem with wrong color of selected column in dark mode */
.dark div.dtcc-dropdown div.dtcc-list div.dtcc-list-buttons,
div.dtcc-dropdown div.dtcc-search>div select,
div.dtcc-dropdown div.dtcc-search>div input {
    background: var(--bs-table-bg);
}

/* Fix problem with wrong place of clear button and select input */
table.dataTable span.dtcc div.dtcc-searchNumber>div div.dtcc-search-type-icon,
table.dataTable span.dtcc div.dtcc-searchDateTime>div div.dtcc-search-type-icon {
    left: auto;
    right: 0;
    z-index: 1
}

table.dataTable span.dtcc div.dtcc-searchNumber>div select,
table.dataTable span.dtcc div.dtcc-searchDateTime>div select {
    left: auto;
    right: 0;
    z-index: 2;
    padding: 0
}

table.dataTable span.dtcc div.dtcc-searchNumber>div span.dtcc-search-clear,
table.dataTable span.dtcc div.dtcc-searchDateTime>div span.dtcc-search-clear {
    left: auto;
    right: 28px;
    z-index: 1
}

table.dataTable span.dtcc div.dtcc-searchNumber>div input,
table.dataTable span.dtcc div.dtcc-searchDateTime>div input {
    padding: var(--dtcc-search-input_padding);
    padding-right: 46px;
    text-align: left;
}

/* Fix header text and icon for extra menu */
table.dataTable th.dt-type-numeric,
table.dataTable th.dt-type-date,
table.dataTable td.dt-type-numeric,
table.dataTable td.dt-type-date {
    text-align: left
}

table.dataTable th.dt-type-numeric div.dt-column-header,
table.dataTable th.dt-type-numeric div.dt-column-footer,
table.dataTable th.dt-type-date div.dt-column-header,
table.dataTable th.dt-type-date div.dt-column-footer,
table.dataTable td.dt-type-numeric div.dt-column-header,
table.dataTable td.dt-type-numeric div.dt-column-footer,
table.dataTable td.dt-type-date div.dt-column-header,
table.dataTable td.dt-type-date div.dt-column-footer {
    flex-direction: row;
}

table.table.dataTable>tbody>tr.selected a {
    color: rgb(255, 255, 255);
    color: rgb(var(--dt-row-selected-text));
    font-weight: 600;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 1.5;
    padding: 0;
    padding-left: 4px !important;
}

.select2-container .select2-selection--single .select2-selection__clear {
    position: absolute !important;
}

table.table-logbook tbody tr td {
    padding-top: 10px;
}

table.table-logbook tbody tr td.buttons {
    padding-top: 0;
}

table.table-files tbody tr td {
    padding: 10px 0;
}

@media only screen and (min-device-width: 481px) and (max-device-width: 835px) and (orientation:portrait) {
    table.formset thead tr th.col-order {
        min-width: 50px;
        width: 3%;
    }

    table.formset thead tr th.col-price {
        min-width: 100px;
        width: 10%;
    }

    table.formset thead tr th.col-quantity {
        min-width: 100px;
        width: 7%;
    }

    table.formset thead tr th.col-text {
        min-width: 100px;
    }

    table.formset thead tr th.col-min-select {
        min-width: 80px;
        width: 10%;
    }

    table.formset thead tr th.col-mid-select {
        min-width: 115px;
        width: 12%;
    }

    table.formset thead tr th.col-max-select {
        min-width: 150px;
        width: 15%;
    }

    table.formset thead tr th.col-date {
        min-width: 165px;
        width: 10%;
    }

    table.formset thead tr th.col-datetime {
        min-width: 190px;
        width: 10%;
    }
}

@media only screen and (min-device-width: 836px) and (max-device-width: 1195px) and (orientation:landscape) {
    table.formset thead tr th.col-order {
        min-width: 50px;
        width: 3%;
    }

    table.formset thead tr th.col-price {
        min-width: 100px;
        width: 10%;
    }

    table.formset thead tr th.col-text {
        min-width: 100px;
    }

    table.formset thead tr th.col-min-select {
        min-width: 80px;
        width: 10%;
    }

    table.formset thead tr th.col-mid-select {
        min-width: 115px;
        width: 13%;
    }

    table.formset thead tr th.col-max-select {
        min-width: 150px;
        width: 16%;
    }

    table.formset thead tr th.col-date {
        min-width: 165px;
        width: 10%;
    }

    table.formset thead tr th.col-datetime {
        min-width: 190px;
        width: 10%;
    }
}

@media only screen and (min-device-width: 1196px) {
    table.formset thead tr th.col-order {
        min-width: 100px;
        width: 3%;
    }

    table.formset thead tr th.col-price {
        min-width: 100px;
        width: 9%;
    }

    table.formset thead tr th.col-quantity {
        min-width: 100px;
        width: 7%;
    }

    table.formset thead tr th.col-text {
        min-width: 100px;
    }

    table.formset thead tr th.col-min-select {
        min-width: 80px;
        width: 10%;
    }

    table.formset thead tr th.col-mid-select {
        min-width: 115px;
        width: 16%;
    }

    table.formset thead tr th.col-max-select {
        min-width: 150px;
        width: 23%;
    }

    table.formset thead tr th.col-date {
        min-width: 165px;
        width: 10%;
    }

    table.formset thead tr th.col-datetime {
        min-width: 190px;
        width: 9%;
    }

    table.formset thead tr th.col-delete {
        width: 50px;
    }
}

/* FOR SELECT2 SET CUSTOM STYLES */

.select2-container {
    min-width: 50px !important;
    /* max-width: 400px !important; */
}

.form-switch .form-check-label {
    padding-left: 0.5rem;
    padding-top: 0.3rem;
}

/* DARK MODE STYLES FOR SELECT2 */

body.dark .select2-container--bootstrap-5 .select2-dropdown {
    color: #fff;
    background-color: #313443;
    border-color: #86b7fe;
}

body.dark .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
body.dark .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
    background-color: #5b73e8;
}

body.dark .select2-container--bootstrap-5.select2-container--focus .select2-selection,
body.dark .select2-container--bootstrap-5.select2-container--open .select2-selection {
    box-shadow: none;
}

body.dark .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus {
    border-color: #adb9f4;
}

body.dark .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
    background-color: var(--bs-input-bg);
    color: #fff;
}

body.dark .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
    background-color: rgb(34, 37, 47);
    color: #fff;
}

/* Set search result item styles */

.search-result-box .search-item {
    padding-bottom: 20px;
    border-bottom: 1px solid #e3eaef;
    margin-bottom: 20px
}

.search-result-box .search-item.first {
    padding-top: 20px;
    border-top: 1px solid #e3eaef;
}

#globalsearch .form-check {
    float: left;
    min-width: 20%;
    padding-top: 5px;
    padding-bottom: 5px;
}