/*
    IMPORTANT NOTES: (PLEASE READ CAREFULLY!)
    1. DO NOT MODIFY the system styles section, it is generated by the system,
    your modifications will be overwritten. If you want to change the stylesheet
    template, modify the ew.scss in the "themes" subfolder under the installed
    directory. Only modify the ew.scss if you have the necessary knowledges in
    CSS.
    2. You MUST write your styles in User Styles editor. If you want to override
    the system styles, you can copy the styles to the User Styles editor, or you
    can use the separate user stylesheet.
*/

/*BEGIN_SYSTEM_STYLES*/
@import "bootstrap/functions";
@import "variables"; // Bootstrap + AdminLTE variables in temp folder
@import "bootstrap/variables-dark";
@import "adminlte/variables-alt";
@import "bootstrap/maps";
@import "bootstrap/mixins";
@import "bootstrap/close";
@import "adminlte/mixins";
@function is-color($value) {
    @return type-of($value) == color;
}
@function is-variable($value) {
    @return type-of($value) == string and str-index($value, "var(") == 1 and str-index($value, ")") == str-length($value);
}
@function is-color-or-variable($value) {
    @return is-color($value) or is-variable($value);
}
@mixin export-table-color($color, $bgcolor) {
    @if is-color($bgcolor) {
        background-color: $bgcolor;
    } @else {
        background-color: $body-bg;
    }
    @if is-color($color) {
        color: $color;
    } @else {
        color: $body-color;
    }
}
@mixin table-cell-color($color, $bgcolor) {
    @if is-color-or-variable($bgcolor) {
        --#{$prefix}table-bg-state: #{$bgcolor};
    }
    @if is-color-or-variable($color) {
        --#{$prefix}table-color-state: $color;
    }
}
$ThemePaceColor: #CB5D02;
$ThemeTableBodyBackgroundColor: $table-bg;
$ThemeTableBodyColor: $table-color;
$ThemeTableBodyStripedBackgroundColor: $table-striped-bg;
$ThemeTableBodyStripedColor: $table-striped-color;
$ThemeTableBodyHoverBackgroundColor: $table-hover-bg;
$ThemeTableBodyHoverColor: $table-hover-color;
$ThemeTableHeaderBackgroundColor: #EA7513;
$ThemeTableHeaderBorderColor: #D76B11;
$ThemeTableHeaderColor: null;
$ThemeTableFooterBackgroundColor: #FFECDC;
$ThemeTableFooterColor: null;
$ThemeTableActiveColor: $table-color;
$ThemeTableBodyActiveBackgroundColor: #FFE5D0;
$ThemeTableBodyActiveColor: null;
$ThemeGridBorderWidth: $table-border-width;
$ThemeGridBorderColor: #BE5F0F;
$ThemeGridLineColor: $table-border-color;
$ThemeGridPagerPanelBackgroundColor: $card-cap-bg;
$ThemeGridPagerPanelColor: null;
$ThemeBaseFontFamily: Verdana, var(--#{$prefix}font-sans-serif);
$ThemeSidebarPaddingX: .5rem;
$ThemeSidebarPaddingY: null;
$ThemeSidebarLightHoverColor: $gray-900;
$ThemeSidebarDarkHoverColor: $white;
$ThemeGrayLte: #D2D6DE;
$ThemeSidebarWidth: 250px;
$ThemeBodyBg: $white;
$UseResponsiveTable: true;
$ThemeTableStriped: true;

// Report
$ThemeReportGroupBackgroundColor1: #FFECDC;
$ThemeReportGroupColor1: null;
$ThemeReportGroupSummaryBackgroundColor1: #FFECDC;
$ThemeReportGroupSummaryColor1: null;
$ThemeReportGroupBackgroundColor2: null;
$ThemeReportGroupColor2: null;
$ThemeReportGroupSummaryBackgroundColor2: null;
$ThemeReportGroupSummaryColor2: null;
$ThemeReportGroupBackgroundColor3: #FFECDC;
$ThemeReportGroupColor3: null;
$ThemeReportGroupSummaryBackgroundColor3: #FFECDC;
$ThemeReportGroupSummaryColor3: null;
$ThemeReportGroupBackgroundColor4: null;
$ThemeReportGroupColor4: null;
$ThemeReportGroupSummaryBackgroundColor4: null;
$ThemeReportGroupSummaryColor4: null;
$ThemeReportGroupBackgroundColor5: #FFECDC;
$ThemeReportGroupColor5: null;
$ThemeReportGroupSummaryBackgroundColor5: #FFECDC;
$ThemeReportGroupSummaryColor5: null;
$ThemeReportGroupBackgroundColor6: null;
$ThemeReportGroupColor6: null;
$ThemeReportGroupSummaryBackgroundColor6: null;
$ThemeReportGroupSummaryColor6: null;
$ThemeReportPageSummaryBackgroundColor: #FFE8D6;
$ThemeReportPageSummaryColor: null;
$ThemeReportGrandSummaryBackgroundColor: #FFE5D0;
$ThemeReportGrandSummaryColor: null;
$screen-sm-min: map-get($grid-breakpoints, sm);
$screen-xs-max: ($screen-sm-min - 1);
$screen-md-min: map-get($grid-breakpoints, md);
$screen-sm-max: ($screen-md-min - 1);
$screen-lg-min: map-get($grid-breakpoints, lg);
$screen-md-max: ($screen-lg-min - 1);
$ew-min-icon-size: 1rem; // Min 1rem ~16px
$ew-icon-size: max(#{$font-size-base}, #{$ew-min-icon-size});
$ew-padding-y-xs: .125rem;
$ew-padding-x-xs: .25rem;
:root {
    --modal-options-limit: 10; // ~Number of rows in modal lookup
    --filter-options-limit: 6; // ~Number of rows in table header filter dropdown
    --select2-options-limit: 10; // ~Number of rows in Select2 dropdown
}
@font-face {
    font-family: 'ew';
    src:url('fonts/ew.eot?t39no9');
    src:url('fonts/ew.eot?#iefixt39no9') format('embedded-opentype'),
        url('fonts/ew.woff?t39no9') format('woff'),
        url('fonts/ew.ttf?t39no9') format('truetype'),
        url('fonts/ew.svg?t39no9#ew') format('svg');
    font-weight: normal;
    font-style: normal;
}
[class^="icon-"], [class*=" icon-"] { // Same as .fa except font-family
    display: inline-block;
    font: normal normal normal 14px/1 'ew';
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-advanced-search::before {
    content: "\e608";
}
.icon-grid-add::before {
    content: "\e60f";
}
.icon-grid-edit::before {
    content: "\e61c";
}
.icon-addedit::before {
    content: "\e609";
}
.icon-md-add::before {
    content: "\e61b";
}
.icon-md-edit::before {
    content: "\e600";
}
.icon-md-copy::before {
    content: "\e60c";
}
.icon-md-view::before {
    content: "\e614";
}
.icon-inline-add::before {
    content: "\e619";
}
.icon-inline-copy::before {
    content: "\e606";
}
.icon-inline-copy2::before {
    content: "\e61a";
}
.icon-inline-edit::before {
    content: "\e605";
}
.icon-reset-search::before {
    content: "\e60d";
}
.icon-view::before {
    content: "\e612";
}
.icon-advanced-search2::before {
    content: "\e60b";
}
.icon-highlight::before {
    content: "\e60a";
}
.icon-csv::before {
    content: "\e610";
}
.icon-xml::before {
    content: "\e60e";
}
.icon-email::before {
    content: "\f003";
}
.icon-user::before {
    content: "\f007";
}
.icon-print::before {
    content: "\f02f";
}
.icon-edit::before {
    content: "\f040";
}
.icon-export::before {
    content: "\f045";
}
.icon-selected::before {
    content: "\f046";
}
.icon-filter::before {
    content: "\f0b0";
}
.icon-copy::before {
    content: "\f0c5";
}
.icon-options::before {
    content: "\f0c9";
}
.icon-table::before {
    content: "\f0ce";
}
.icon-first::before {
    content: "\f100";
}
.icon-last::before {
    content: "\f101";
}
.icon-prev::before {
    content: "\f104";
}
.icon-next::before {
    content: "\f105";
}
.icon-collapse::before {
    content: "\f147";
}
.icon-expand::before {
    content: "\f196";
}
.icon-search::before {
    content: "\e611";
}
.icon-language::before {
    content: "\e613";
}
.icon-pdf::before {
    content: "\e601";
}
.icon-word::before {
    content: "\e602";
}
.icon-excel::before {
    content: "\e603";
}
.icon-html::before {
    content: "\e604";
}
.icon-master-detail::before {
    content: "\e607";
}
.icon-arrow-left::before {
    content: "\e615";
}
.icon-arrow-down::before {
    content: "\e616";
}
.icon-arrow-up::before {
    content: "\e617";
}
.icon-arrow-right::before {
    content: "\e618";
}
body {
    font-family: $ThemeBaseFontFamily, 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: $font-size-base;
    line-height: $line-height-base;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: $ThemeBaseFontFamily, 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.tippy-box {
    font-size: $tooltip-font-size;
    background-color: $tooltip-bg;
    color: $tooltip-color;
    border-radius: $tooltip-border-radius;
    opacity: $tooltip-opacity;
    .tippy-arrow {
        color: $tooltip-bg;
    }
    .tippy-content {
        padding: $tooltip-padding-y $tooltip-padding-x;
    }
}
.content-wrapper  {
    background-color: var(--#{$prefix}body-bg); // Override AdminLTE
}
a:not(.btn) {
    .icon-view,
    .icon-edit,
    .icon-inline-edit,
    .icon-copy,
    .icon-inline-copy,
    .fa-trash {
        display: inline-block;
    }
    &.ew-edit + &.ew-inline-edit,
    &.ew-copy + &.ew-inline-copy {
        padding-left: 4px;
    }
}

/* google map */
.gm-style-iw {
    color: $body-color;
}
.ew-single-map {
    margin-bottom: $spacer;
    max-width: 100%;
    height: auto;
}
.brand-link .ew-brand-image { // Override AdminLTE
    float: none;
}
.ew-icon {
    font-size: $ew-icon-size;
    width: $ew-icon-size;
    height: $ew-icon-size;
    text-align: center;
}
.input-group, .ew-dropdown-clear {
    .ew-icon {
        font-size: $font-size-base;
        width: $font-size-base;
        text-align: center;
    }
}
.dropdown-menu > li > a {
    &> .fa-solid,
    &> .fa-regular {
        margin-right: 0; // Override AdminLTE
    }
}

// Dropdown header // Override AdminLTE
.dropdown-header {
    text-align: left;
}
label.form-check-label {
    font-weight: 400 !important; // Override AdminLTE
}
[id^=el_] > .form-check {
    margin-top: $spacer * .5;
}
.ew-grid-add-edit .input-group .custom-select {
    width: auto; // Override AdminLTE
}
.content-header h1 small {
    font-size: 70%;
}
.ew-image {
    margin: 1px;
    max-width: none; // Override .img-thumbnail
}
.ew-images > * {
    margin-right: $spacer * .25;
}
.ew-toolbar {
    .ew-export-option, .ew-import-option, .ew-search-option, .ew-action-option, .ew-detail-option, .ew-filter-option {
        margin-bottom: $spacer;
        margin-right: $spacer * .5;
    }
    .ew-filter-option {
        display: none; // Init
    }
}
.ew-list-other-options {
    .ew-add-edit-option, .ew-acton-option {
        margin-right: $spacer * .5;
    }
}
.ew-user-priv-form .ew-grid {
    display: block;
}
.ew-view-form, .ew-delete-form {
    display: block;
    margin-bottom: $spacer;
}
.ew-edit-form {
    margin-bottom: $spacer;
}
.ew-desktop {
    .ew-desktop-buttons {
        text-align: center;
        margin-bottom: $spacer;
    }
    .ew-desktop-table {
        min-width: 300px;
        > thead > tr, > tbody > tr {
            > th:first-of-type {
                .checkbox { // Checkbox (update page)
                    margin-top: 0;
                    margin-bottom: 0;
                }
            }
            > td:first-of-type { // Caption
                //text-align: right;
                > span[id^=elh_] {
                    font-weight: bold;
                    display: inline-block;
                    margin-top: $table-cell-padding-y;
                }
                .checkbox { // Checkbox (update page)
                    margin-top: 0;
                    margin-bottom: 0;
                    label {
                        font-weight: bold;
                    }
                }
            }
            > td:nth-of-type(2):not(:last-of-type) {
                //text-align: right;
                .ew-search-operator { // Search operator (Search page)
                    margin-top: $table-cell-padding-y;
                }
            }
            > th:last-of-type, > td:last-of-type { // Input
                min-width: 150px;
            }
        }
    }
}
.ew-label { // Caption (update page)
    .checkbox {
        padding-top: 0;
    }
    label {
        font-weight: bold;
    }
}
.ew-grid {
    padding: 0;
    border: $ThemeGridBorderWidth solid;
    margin-bottom: $spacer;
    display: table;
    .ew-table {
        &.table-bordered > thead > tr:first-child { // First row in thead
            border-top-width: 0; // Override Bootstrap
        }
    }
    .ew-table, .ew-grid-middle-panel {
        border: 0;
        padding: 0;
        margin-bottom: 0;
    }
}
.rounded-top-left {
    border-top-left-radius: var(--bs-border-radius) !important;
}
.rounded-top-right {
    border-top-right-radius: var(--bs-border-radius) !important;
}
.rounded-bottom-left {
    border-bottom-left-radius: var(--bs-border-radius) !important;
}
.rounded-bottom-right {
    border-bottom-right-radius: var(--bs-border-radius) !important;
}
@include color-mode(light) {
    .ew-grid {
        border-color: $ThemeGridBorderColor;
        &.ew-loading {
            border-color: rgba($ThemeGridBorderColor, 0.25);
        }
        .ew-grid-upper-panel {
            border-bottom: $table-border-width solid $ThemeTableHeaderBorderColor;
        }
        .ew-table {
            tbody,
            tfoot,
            :not(thead) > tr,
            td,
            th {
                border-color: $border-color; // Override Bootstrap reboot
            }
            > thead > *,
            > thead > * > * {
                border-bottom-color: $ThemeTableHeaderBorderColor !important;
            }
            > :not(:last-child):not(thead) > :last-child > * {
                border-bottom-color: $border-color;
            }
        }
        .ew-grid-lower-panel {
            border-top: $table-border-width solid $ThemeGridLineColor;
        }
    }
}
.ew-form .row {
    margin-bottom: $spacer;
}
.ew-search-panel {
    > .card {
        //width: auto;
        display: table;
    }
    .row-cols-sm-1 > .col-sm-auto {
        width: 100%;
    }
}
.ew-actions.dropdown-toggle::after {
    display: none;
}

// Pager
.ew-pager {
    padding-right: $spacer;
    margin-bottom: $spacer;
    display: inline-flex;
    width: auto;
    align-items: center;
    /*rtl:ignore*/ direction: ltr;
    .input-group {
        flex-wrap: nowrap;
        > input.ew-page-number {
            width: 6em;
        }
    }
    .ew-prev-next, .ew-numeric-page {
        direction: ltr; // Allow flip
        .btn:not(:disabled) {
            cursor: pointer;
        }
    }
    .ew-numeric-page > ul.pagination {
        margin-bottom: 0;
    }
}
.ew-prev-next {
    display: flex;
}
.ew-list-other-options {
    margin-bottom: 2px;
    display: inline-flex;
}

// Grid pager panel
.ew-grid-upper-panel.card-header, .ew-grid-lower-panel.card-footer {
    padding: max(0.4rem, $table-cell-padding-y-sm) max(0.4rem, $table-cell-padding-x-sm);
    border-left: 0;
    border-right: 0;
    color: $ThemeGridPagerPanelColor;
    .ew-pager {
        margin-bottom: 0;
    }
    @if type-of($ThemeGridPagerPanelBackgroundColor) == color {
        background-color: $ThemeGridPagerPanelBackgroundColor;
    }
    @if type-of($ThemeGridPagerPanelColor) == color {
        color: $ThemeGridPagerPanelColor;
    }
}
button.ew-btn {
    min-width: 75px;
}
a.ew-btn {
    min-width: 49px;
}
.ew-btn-dropdown {
    min-width: calc(#{$ew-padding-x-xs} * 2 + #{$ew-icon-size} + #{$caret-width} * 2 + #{$input-height-border});
}
.ew-aggregate::after {
    content: ": ";
}
.ew-table-header .ew-table-header-btn {
    white-space: nowrap;
    display: flex;
    .ew-table-header-caption {
        flex-grow: 1;
    }
    .ew-filter-dropdown-btn, .ew-table-header-sort:not(:empty) {
        margin-left: $spacer * .5;
    }
}
.ew-summary-caption .ew-table-header-btn {
    white-space: nowrap;
    display: inline-flex;
    .ew-filter-dropdown-btn, .ew-table-header-sort:not(:empty) {
        margin-left: $spacer * .25;
    }
}

// Main table
.ew-grid .ew-table {
    border: 0;
    width: 100%;

    // Override Bootstrap 5.1.3
    &.table > tbody {
        border-top: 0;
    }

    // Main table last row cell
    > tbody:last-child > tr:last-child,
    > tbody:last-child > tr:last-child > td,
    > tfoot,
    > tfoot > tr:last-child,
    > tfoot > tr:last-child > td,
    td.ew-table-last-row {
        border-bottom: 0;
    }

    // Main table last row cell with border-bottom
    > tbody:last-child > tr:last-child > td.ew-table-border-bottom,
    > tfoot > tr:last-child > td.ew-table-border-bottom,
    td.ew-table-last-row.ew-table-border-bottom,
    .ew-table-border-bottom {
        border-bottom: $table-border-width solid; // Border width
    }
    > thead > tr > th,
    > thead > tr > td {
        vertical-align: top;
        label { // Checkboxes
            margin-bottom: 0;
        }
    }

    // Main table first column cell
    > thead > tr > td:first-child,
    > thead > tr > th:first-child,
    > tbody > tr > td:first-child,
    > tfoot > tr > td:first-child {
        border-left: 0;
    }

    // Main table last column cell
    > thead > tr > td:last-child,
    > thead > tr > th:last-child,
    > tbody > tr > td:last-child,
    > tfoot > tr > td:last-child,
    td.ew-table-last-col, th.ew-table-last-col {
        border-right: 0;
    }
}

// Main table
@include color-mode(light) {
    .ew-grid .ew-table {
        @if is-color-or-variable($ThemeTableBodyBackgroundColor) {
            --#{$prefix}table-bg: #{$ThemeTableBodyBackgroundColor};
        }
        @if is-color-or-variable($ThemeTableBodyColor) {
            --#{$prefix}table-color: #{$ThemeTableBodyColor}
        }
        @if is-color-or-variable($ThemeTableBodyHoverBackgroundColor) {
            --#{$prefix}table-hover-bg: #{$ThemeTableBodyHoverBackgroundColor};
        }
        @if is-color-or-variable($ThemeTableBodyHoverColor) {
            --#{$prefix}table-hover-color: #{$ThemeTableBodyHoverColor};
        }
        @if is-color-or-variable($ThemeTableBodyStripedBackgroundColor) {
            --#{$prefix}table-striped-bg: #{$ThemeTableBodyStripedBackgroundColor};
        }
        @if is-color-or-variable($ThemeTableBodyStripedColor) {
            --#{$prefix}table-striped-color: #{$ThemeTableBodyStripedColor};
        }
        @if is-color-or-variable($ThemeTableBodyActiveBackgroundColor) {
            --#{$prefix}table-active-bg: #{$ThemeTableBodyActiveBackgroundColor};
        }
        @if is-color-or-variable($ThemeTableBodyActiveColor) {
            --#{$prefix}table-active-color: #{$ThemeTableBodyActiveColor};
        }

        // Main table last row cell with border-bottom
        > tbody:last-child > tr:last-child > td.ew-table-border-bottom,
        > tfoot > tr:last-child > td.ew-table-border-bottom,
        td.ew-table-last-row.ew-table-border-bottom,
        .ew-table-border-bottom {
            border-color: $table-border-color; // Border color
        }

        // Main table header
        > thead > tr > th,
        > thead > tr > td {
            @if is-color($ThemeTableHeaderBackgroundColor) and $ThemeTableHeaderBackgroundColor != transparent {
                font-weight: normal;
            }
            @if is-color($ThemeTableHeaderBorderColor) {
                border-color: $ThemeTableHeaderBorderColor;
            }
        }
        @if is-color($ThemeTableHeaderBackgroundColor) {
            .ew-table-header > th,
            .ew-table-header > td,
            .ew-rpt-col-summary,
            .ew-rpt-col-header {
                --#{$prefix}table-bg: #{$ThemeTableHeaderBackgroundColor};
                --#{$prefix}table-color-state: #{color-contrast($ThemeTableHeaderBackgroundColor)};
            }
        }

        // Main table footer
        .ew-table-footer > td {
            @if is-color($ThemeTableFooterBackgroundColor) {
                --#{$prefix}table-bg: #{$ThemeTableFooterBackgroundColor};
            }
            @if is-color($ThemeTableFooterColor) {
                --#{$prefix}table-color-state: #{$ThemeTableFooterColor};
            }
        }

        // Striped table row
        @if ($ThemeTableStriped) {
            > tbody > .ew-table-alt-row > *,
            > tbody > * > .ew-table-alt-row {
                --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
                --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
            }
        }

        // Hover
        &.table-hover {
            > tbody > tr:not(.expandable-body):hover > * {
                --#{$prefix}table-color-state: var(--#{$prefix}table-hover-color);
                --#{$prefix}table-bg-state: var(--#{$prefix}table-hover-bg);
            }
        }
    }
}
.expandable-body .ew-table {
    margin: 0;
}

// Add/edit option
.ew-add-edit-option {
    display: inline-block;
}

// Detail option
.ew-detail-option {
    display: inline-block;
}

// Action option
.ew-action-option {
    padding-right: 10px;
    display: inline-block;
}
.ew-multi-column-form {
    > .ew-multi-column-row {
        margin-bottom: $spacer;
        position: relative; // For overlay
        .card .ew-table-header-btn {
            display: inline-flex;
            .ew-table-header-sort {
                margin-left: $spacer * 0.5;
            }
        }
        .card-header + * {
            .card-img-top {
                border-top-left-radius: 0;
                border-top-right-radius: 0;
            }
        }
        .card > *:not(:last-child) {
            .card-img-bottom {
                border-bottom-left-radius: 0;
                border-bottom-right-radius: 0;
            }
        }
        .card-body {
            .card-title {
                float: none; // Override AdminLTE
            }
            .card-subtitle {
                color: $body-secondary-color;
            }
            .card-title, .card-subtitle {
                margin-bottom: $spacer * 0.5;
                font-weight: 500;
            }
            .card-text {
                margin-bottom: $spacer;
            }
        }
        .card .ew-images > *:not(:first-child) {
            display: none; // Only show the first image in cards
        }
    }
    .ew-multi-column-list-option .ew-list-option-body[data-name=checkbox] label {
        margin-top: 0; // Override Bootstrap checkbox margin-top/bottom
        margin-bottom: 0;
    }
}

// List options
.ew-multi-column-list-option {
    padding-top: $ew-padding-y-xs;
    padding-bottom: $ew-padding-y-xs;
    display: flex;
    &.ew-top-end, &.ew-bottom-end {
        flex-direction: row-reverse;
    }
    .ew-list-option-body {
        float: left;
    }
    .dropdown-toggle::after {
        display: none;
    }
    [data-name=checkbox] .form-check {
        margin: $spacer * .25;
    }
}
.ew-layout-option {
    .btn-group .form-check {
        margin: $spacer * .25;
    }
}
.ew-list-option-header label.checkbox, .table th label.checkbox {
    margin-bottom: 0;
}
.ew-list-option-body {
    vertical-align: middle !important;
    .btn-group > .btn {
        float: none;
    }
    .ew-row-link, .ew-row-link:hover, .ew-row-link:focus {
        text-decoration: none;
    }
    &:not(td) {
        padding-right: $spacer * .5;
    }
}
.ew-row-link + .ew-row-link {
    padding-left: $spacer * .5;
}

// Table for view
.ew-view-table {
    min-width: 300px;
    > tbody > tr > td:first-child {
        font-weight: bold;
        //text-align: right;
    }
}
@include color-mode(light) {
    .ew-view-table, .ew-desktop-table {
        background-color: $body-bg;
    }
}
.icon-expand, .icon-collapse, .ew-group-toggle {
    cursor: pointer;
}

// Page breaks (for export)
.break-before-page {
    break-before: page;
}
.break-before-avoid {
    break-before: avoid;
}
.break-after-page {
    break-after: page;
}
.break-after-avoid {
    break-after: avoid;
}

// Table for export to HTML (Do not use CSS variables)
.ew-export-table {
    border: 0;
    border-collapse: collapse;
    td {
        border: $table-border-width solid;
        border-color: $table-border-color; // Border color
    }
    .ew-table-header, .ew-rpt-col-summary, .ew-rpt-col-header, .ew-export-table-header td {
        @include export-table-color($ThemeTableHeaderColor, $ThemeTableHeaderBackgroundColor);
    }
    .ew-export-table-row > td {
        @include export-table-color($ThemeTableBodyColor, $ThemeTableBodyBackgroundColor);
    }
    .ew-export-table-alt-row > td {
        @include export-table-color($ThemeTableBodyStripedColor, $ThemeTableBodyStripedBackgroundColor);
    }
    .ew-export-table-footer {
        @include export-table-color($ThemeTableFooterColor, $ThemeTableFooterBackgroundColor);
    }
}
.ew-list-export-options, .ew-view-export-options, .ew-view-other-options {
    margin-bottom: $spacer;
}
.ew-extended-search {
    [class^="col-"], [class*=" col-"] {
        padding-left: 0;
    }
}
.ew-extended-search .row {
    .date {
        white-space: normal;
    }
}
.ew-search-cond {
    .form-check + .form-check {
        margin-left: $spacer * .5;
    }
}
.ew-search-caption, .ew-search-operator, .ew-search-cond, .ew-search-and, .ew-search-operator2,
.ew-search-field, .ew-search-field2 {
    display: inline-flex;
    margin-right: $spacer * .5;
}
.ew-search-field-single {
    display: inline-flex;
}
@mixin modal-mobile-search { // Advanced Search
    .ew-search-cond, .ew-search-and {
        display: inline-flex;
        height: $input-height;
    }
    .ew-search-operator select { // User Select
        margin-bottom: $spacer * .5;
    }
    .ew-search-operator2 select { // User Select
        margin-top: $spacer * .5;
        margin-bottom: $spacer * .5;
    }
    .ew-search-cond .form-check, .ew-search-and label {
        margin-top: $spacer * .5;
    }
}
.modal {
    @include modal-mobile-search;
}
.ew-search-and label {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
}
.ew-search-operator, .ew-search-operator2 {
    color: $secondary;
    font-weight: normal;
}

// Email
#ew-email-form #subject, #ew-email-form #message {
    width: 100%;
}
#ew-email-form #message {
    max-width: 100%;
}
@mixin ew-rpt-grp($i, $color, $bgcolor, $summary-color, $summary-bgcolor) {
    .ew-rpt-grp-hide-#{$i} {
        display: none !important;
    }
    @include color-mode(light) {
        .ew-rpt-grp-field-#{$i} {
            @include table-cell-color($color, $bgcolor);
        }
        .ew-rpt-grp-summary-#{$i} {
            @include table-cell-color($summary-color, $summary-bgcolor);
        }
    }
    @include dark-mode () {
        $color: color-contrast(opaque($body-bg, $dark));
        $rpt-grp-base-bg-factor: .055 !default;
        $rpt-grp-bg-factor: .005 !default;
        $bg-color: mix($color, $dark, percentage($rpt-grp-base-bg-factor + $rpt-grp-bg-factor * $i));
        .ew-rpt-grp-field-#{$i} {
            --#{$prefix}table-bg: #{$bg-color};
        }
        .ew-rpt-grp-summary-#{$i} {
            --#{$prefix}table-bg: #{$bg-color};
        }
    }
}
@include ew-rpt-grp(1, $ThemeReportGroupColor1, $ThemeReportGroupBackgroundColor1, $ThemeReportGroupSummaryColor1, $ThemeReportGroupSummaryBackgroundColor1);
@include ew-rpt-grp(2, $ThemeReportGroupColor2, $ThemeReportGroupBackgroundColor2, $ThemeReportGroupSummaryColor2, $ThemeReportGroupSummaryBackgroundColor2);
@include ew-rpt-grp(3, $ThemeReportGroupColor3, $ThemeReportGroupBackgroundColor3, $ThemeReportGroupSummaryColor3, $ThemeReportGroupSummaryBackgroundColor3);
@include ew-rpt-grp(4, $ThemeReportGroupColor4, $ThemeReportGroupBackgroundColor4, $ThemeReportGroupSummaryColor4, $ThemeReportGroupSummaryBackgroundColor4);
@include ew-rpt-grp(5, $ThemeReportGroupColor5, $ThemeReportGroupBackgroundColor5, $ThemeReportGroupSummaryColor5, $ThemeReportGroupSummaryBackgroundColor5);
@include ew-rpt-grp(6, $ThemeReportGroupColor6, $ThemeReportGroupBackgroundColor6, $ThemeReportGroupSummaryColor6, $ThemeReportGroupSummaryBackgroundColor6);
tr[data-group] {
    .ew-rpt-grp-caret {
        border-right: 0 !important;
    }
    td[class^=ew-rpt-grp-field-]:empty {
        border-bottom: 0 !important;
    }
}
tr.ew-table-header,
tr[data-group] {
    .ew-group-toggle {
        transition: transform $transition-speed linear; // $lte-transition-speed
        &.ew-rpt-grp-hide {
            transform: rotate(-90deg);
        }
        :not(.ew-rpt-grp-hide) {
            transform: rotate(90deg);
        }
    }
}
.ew-rpt-grp-aggregate {
    font-weight: bold;
}
@include color-mode(light) {
    .ew-rpt-page-summary > td {
        @include table-cell-color($ThemeReportPageSummaryColor, $ThemeReportPageSummaryBackgroundColor);
    }
    .ew-rpt-grand-summary > td {
        @include table-cell-color($ThemeReportGrandSummaryColor, $ThemeReportGrandSummaryBackgroundColor);
    }
}

// Crosstab report
.ew-crosstab-values {
    margin-bottom: 0;
}

// Option separator
.ew-filter-caption::after {
    content: ": ";
}

// Drilldown
.ew-drill-link:hover {
    text-decoration: none;
}
#ew-drilldown-panel {
    .popover {
        font-size: $font-size-base;
        max-width: $modal-xl;
        &.bottom {
            margin-top: $table-cell-padding-y-sm;
        }
        .popover-body {
            max-height: 800px;
            overflow-y: auto;
        }
    }
}

// Summary View detail count
.ew-detail-count {
    display: none;
}

// Summary View summary value
.ew-summary-value {
    display: none;
}
.ew-message-dialog {
    display: table;
    min-width: 300px;
}

// Required field indicator
.ew-required {
    color: $danger;
    margin-left: .5em;
    font-size: 50%;
    vertical-align: super;
}

// Template
.ew-template {
    display: none;
}
.ew-item-container .d-sm-table-cell {
    padding: $ew-padding-y-xs $ew-padding-x-xs;
    white-space: nowrap;
    .form-check-label {
        justify-content: left;
    }
}
.ew-upload-table {
    margin-bottom: 0;
    &.ew-has-rows {
        margin-top: $spacer * .75;
    }
    .progress {
        min-width: 75px;
    }
    tbody.files tr:first-child td {
        border-top: 0;
    }
    tbody.files tr:last-child td {
        border-bottom: 0;
    }
}

// CKEditor
input.cke_dialog_ui_input_text {
    min-height: 1.5rem;
}

// Map
.ew-map label {
    width: auto;
    display: inline;
}

// Spacing under tab
.nav-tabs,
.nav-pills,
.nav-underline {
    margin-bottom: $spacer;
}

// AutoSuggest (twitter typeahead)
.ew-auto-suggest {
    .twitter-typeahead input[name^=sv_] {
        vertical-align: baseline !important;
    }
    .tt-hint {
        color: $gray-600;
    }
    .tt-suggestion {
        cursor: pointer;
    }
    .tt-dataset {
        overflow-y: auto;
    }
    .tt-footer {
        pointer-events: none;
    }
    .tt-menu {
        z-index: $zindex-tooltip + 1 !important; // Higher than tooltip and main header ($lte-zindex-main-header)
    }
}
.modal-body .ew-auto-suggest {
    .tt-menu {
        z-index: $zindex-tooltip + 1 !important; // Higher than tooltip and modal
    }
}
.ew-detail-pages {
    margin-bottom: $spacer;
}
.ew-custom-template, .ew-custom-template-page, .ew-custom-template-search {
    margin-bottom: $spacer;
}
.ew-grid .ew-custom-template {
    margin-bottom: 0;
}
.ew-debug {
    margin-bottom: $spacer;
}
.ew-page-header,
.ew-page-footer {
    margin-bottom: $spacer;
}
.ew-chart-top {
    margin-bottom: $spacer;
}
.ew-middle {
    .ew-chart-top {
        margin-right: $spacer;
    }
    .ew-chart-bottom {
        margin-left: $spacer;
    }
}
.ew-chart-top, .ew-chart-bottom {
    &~ .ew-debug {
        margin-top: $spacer;
    }
}

// Submenu
.dropdown-submenu > a::after { // Note: .3em border-width by AdminLTE
    position: absolute;
    right: .5em; // Larger than border-width
    top: calc((#{$font-size-base * $line-height-base} + #{$dropdown-item-padding-y} * 2 - .3em) / 2);
}

// Left aligned submenus
.dropdown-submenu.float-start {
    // Undo the float
    float: none;

    // Positioning the submenu
    > .dropdown-menu {
        left: -100%;
        margin-left: 10px;
        border-radius: $border-radius 0 $border-radius $border-radius;
    }
}
@mixin media-desktop {
    // Column widths
    $cols: () !default;
    $cols: map-merge((
        1: 8.33333%,
        2: 16.66667%,
        3: 25%,
        4: 33.33333%,
        5: 41.66667%,
        6: 50%,
        7: 58.33333%,
        8: 66.66667%,
        9: 75%,
        10: 83.33333%,
        11: 91.66667%,
        12: 100%
    ), $cols);
    @each $col, $width in $cols {
        .w-col-#{$col} {
            width: $width !important;
        }
    }
    .ew-grid {
        min-width: 550px;
    }
    .form-control:not(.form-control-color) {
        display: inline;
        max-width: none;
    }
    .form-control:not(.form-control-color):not(textarea), .form-select {
        width: auto;
    }
    .form-range {
        width: 18rem;
    }
    .input-group {
        > .form-control:not(.form-control-navbar),
        > .form-select {
            width: auto;
            flex: initial;
        }
    }

    // Custom file input
    [id^=fd_] > .input-group {
        width: 50%;
    }
    .ew-grid-add-edit {
        .input-group {
            flex-wrap: nowrap; // Override bootstrap
        }

        // Custom file input
        [id^=fd_] > .input-group {
            width: 100%;
            min-width: 200px;
        }
    }
    .ew-search-operator .form-control-plaintext {
        width: auto;
    }
    input[type=text]:not([size]):not(.ew-page-number):not(.cke_dialog_ui_input_text):not(.tox-textfield):not(.form-control-plaintext),
    input[type=password]:not([size]) {
        min-width: 250px;
    }
    .ew-custom-select, .ew-custom-file {
        max-width: 20em;
    }

    // Optional
    // Ul.nav li.dropdown:hover > ul.dropdown-menu {
    //     display: block;
    // }
    .ew-auto-suggest {
        display: inline-block;
    }
    .ew-upload-table {
        width: auto;
    }
    .ew-editor, .mce-tinymce {
        width: auto !important;
    }
    .modal-body {
        .ew-editor, .mce-tinymce {
            width: auto !important;
        }
    }

    // Automatically set form's width for larger viewports
    @media (min-width: $screen-md-min) { // >= 768
        .ew-form:not(.ew-list-form):not(.ew-user-priv-form),
        table.ew-master-table.ew-vertical,
        .query-builder {
            max-width: $modal-lg; // 800
        }
    }
    @media (min-width: $screen-lg-min) { // >= 992
        .ew-form:not(.ew-list-form):not(.ew-user-priv-form),
        table.ew-master-table.ew-vertical,
        .query-builder {
            max-width: $modal-xl; // 1140
        }
    }
    .ew-detail-pages {
        display: table;
    }
    .modal-dialog .ew-form {
        width: 100% !important;
    }

    // Login and password pages
    .ew-login-box, .ew-reset-pwd-box, .ew-change-pwd-box {
        width: 360px;
    }
    .modal-md {
        max-width: $modal-md; // Same width as login box
    }
    .select2 {
        width: auto !important;
        display: inline-block;
    }
    .input-group .select2-container--bootstrap5 {
        flex-grow: 0;
    }
    .ew-file-drop-zone {
        width: 30rem;
    }
}
@mixin media-mobile {
    @include modal-mobile-search;
    .ew-search-field, .ew-search-field2 {
        display: block;
    }
    .ew-grid {
        display: block;
    }
    .ew-grid .ew-grid-middle-panel {
        overflow-x: auto;
        overflow-y: visible;
    }
    .ew-multicolumn-form > .ew-multi-column-row > div[class^=col-]:not(:last-child) {
        margin-bottom: 15px; // Add margin-bottom if stacked
    }

    // .ew-add-opt-btn {
    //     margin-top: $btn-padding-y;
    // }
    .ew-auto-suggest {
        display: block;
    }
    #ew-map {
        width: 100% !important;
    }
    .ew-desktop {
        display: block;
        .ew-desktop-table {
            border: 0;
            > tbody > tr {
                > td {
                    border: 0;
                    display: inline-block;
                }
                > td:first-of-type {
                    text-align: inherit;
                    padding-right: $table-cell-padding-x;
                }
                > td:last-of-type {
                    display: block;
                }
            }
        }
    }
    .table-striped > tbody > tr:nth-child(odd),
    .table-striped > tbody > tr:nth-child(even),
    .table-striped > tbody > tr:nth-child(odd) > td,
    .table-striped > tbody > tr:nth-child(even) > td {
        background-color: transparent;
    }

    // Login and password pages
    .ew-login-box, .ew-reset-pwd-box, .ew-change-pwd-box {
        .ew-recaptcha-normal {
            margin-left: calc((100% - 300px)/2);
        }
    }
    .select2 {
        width: 100%;
    }

    // Custom Select2 dropdown
    .select2-container--bootstrap5 .ew-select-dropdown.ew-select-multiple div.select2-results__option[role=option] {
        border-radius: 0 !important;
    }
}
@if $UseResponsiveTable {
    /* desktop */
    @media (min-width: $screen-sm-min) {
        @include media-desktop;
    }

    /* mobile */
    @media (max-width: $screen-xs-max) {
        @include media-mobile;
    }
} @else {
    @include media-desktop;
}

// Login and password pages
.ew-login-box, .ew-reset-pwd-box, .ew-change-pwd-box {
    margin-left: auto;
    margin-right: auto;
    .ew-form-control {
        width: 100% !important;
    }
    .input-group {
        flex-wrap: nowrap;
        &> .form-control {
            flex-grow: 1; // Use full width
        }
    }
    #password {
        width: calc(100% - #{$font-size-base} * 1.25 - #{$input-btn-padding-x} * 2 - #{$input-btn-border-width});
    }
}
.ew-change-pwd-box {
    #opwd, #npwd, #cpwd {
        width: calc(100% - #{$font-size-base}  * 1.25 - #{$input-btn-padding-x} * 2 - #{$input-btn-border-width});
    }
    #npwd.ew-password-strength {
        width: calc(100% - #{$font-size-base}  * 1.25 * 2 - #{$input-btn-padding-x} * 4 - #{$input-btn-border-width} * 2);
    }
    #pst_npwd {
        margin-top: 5px;
        margin-bottom: 0px;
    }
}
.ew-login-form, .ew-forgot-pwd-form, .ew-change-pwd-form {
    width: 100% !important;
}
.modal-body {
    .ew-login-box, .ew-reset-pwd-box, .ew-change-pwd-box {
        .card {
            border: 0;
        }
    }
}

// Colorbox overlay
#cboxOverlay{
    background: #000 none;
}

// Breadcrumb
.ew-home, .ew-user-permission { // For Chrome
    display: inline-block;
}
.breadcrumb-item .ew-icon {
    margin-top: $spacer * .4;
}

// Hidden element
.ew-hidden {
    display: none !important;
}

// Disabled element
.ew-disabled {
    cursor: not-allowed !important;
    pointer-events: none !important;
    &.btn {
        opacity: $btn-disabled-opacity !important;
    }
}

// Option separator
.ew-option:not(:last-of-type)::after {
    content: ", ";
}

// AutoSuggest
.is-invalid .tt-input {
    border-color: $danger;
    &:focus {
        border-color: $danger;
        box-shadow: 0 0 0 $input-focus-width rgba($danger, .25);
    }
}
.input-group .tt-input {
    border-bottom-right-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

// Tabulator
.tabulator {
    font-size: $font-size-base !important;
    .tabulator-header .tabulator-col .tabulator-col-content {
        padding: 0 !important;
        .tabulator-col-title {
            padding: $table-cell-padding-y-sm $table-cell-padding-x !important;
        }
    }
    .tabulator-row .tabulator-cell {
        padding: $table-cell-padding-y-sm $table-cell-padding-x !important;
    }
}
#ew-import-dialog {
    .tabulator {
        font-size: $font-size-sm !important;
    }
    .tooltip-inner {
        max-width: 500px;
        background-color: $danger;
    }
    .tooltip-arrow {
        &::before {
          border-bottom-color: $danger;
        }
    }
    .progress-bar {
        transition-duration: .4s; // Override Bootstrap
    }
}

// Cookie consent
#cookie-consent {
    @include media-breakpoint-up(md) {
        @include transition(margin-left $transition-speed $transition-fn); // $lte-transition-speed $lte-transition-fn
        margin-left: $sidebar-width; // $lte-sidebar-width
        .layout-top-nav & {
            margin-left: 0;
        }
    }
    @include media-breakpoint-down(md) {
        &,
        &:before {
            margin-left: 0;
        }
    }
    z-index: $zindex-main-header; // $lte-zindex-main-header
    padding: 0;
    border-radius: 0;
}
#cookie-consent > .alert.alert-dismissible {
    border-radius: 0;
    margin-bottom: 0;
}

// Navbar dropdown button color
@each $color, $value in $theme-colors {
    .navbar.bg-#{$color} .nav-item.dropdown {
        .btn-default {
            color: #444 !important;
        }
    }
}

// Dropdown menu moved to body
body > .dropdown-menu {
    z-index: $zindex-popover + 1;
}

// Override AdminLTE
.dropdown-menu-lg {
    max-width: none;
}
.dropdown-menu {
    .dropdown-divider + .dropdown-divider,
    .dropdown-divider + .d-none + .dropdown-divider,
    .dropdown-divider + .d-none + .d-none + .dropdown-divider,
    .dropdown-divider + .d-none + .d-none + .d-none + .dropdown-divider,
    .dropdown-divider + .d-none + .d-none + .d-none + .d-none + .dropdown-divider,
    .dropdown-divider:only-child {
        display: none;
    }
}
.navbar-badge {
    font-size: .5rem;
}

// Accordion
.ew-accordion {
    margin-bottom: $spacer;
}

// Sidebar
.sidebar, .control-sidebar-content {
    overflow: hidden;
}

// Sidebar search
.input-group[data-widget=sidebar-search] {
    flex-wrap: nowrap;
}

// Cursor
.ew-wait {
    cursor: wait;
    input,
    select,
    .input-group button,
    .btn-group button,
    .select2-selection {
        cursor: wait;
    }
}

// Toast
.toast-container {
    z-index: 1060; // Larger the modal
}
.ew-toast {
    min-width: 350px;
    z-index: 1070; // Higher than swal backdrop
}

// RTL (Bootstrap)
html[dir=rtl] {
    .ew-prev-next .ew-icon {
        transform: rotate(180deg);
    }

    // Counts
    .ew-summary-count,
    .ew-detail-count,
    .ew-crosstab-values {
        /*rtl:ignore*/ direction: ltr;
        unicode-bidi: bidi-override;
    }
}

// Override AdminLTE for top navigation
body.ew-layout-top-nav {
    .content-wrapper,
    .main-footer,
    .main-header {
        @include media-breakpoint-up(md) {
            margin-left: 0 !important;
        }
    }
    .main-sidebar {
        @include media-breakpoint-up(md) {
            margin-left: -$sidebar-width; // -$lte-sidebar-width
        }
    }
}

// Main sidebar border
@if not $enable-shadows {
    [class*="sidebar-light-"] {
        border-right: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
    }
    @include dark-mode () {
        [class*="sidebar-dark-"] {
            border-right: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
        }
    }
}

// Fixed table head
@include color-mode(light) {
    .table.ew-table {
        &.table-head-fixed {
            thead tr:nth-child(1) th {
                background-color: $ThemeTableHeaderBackgroundColor; // Header bgcolor
                color: $ThemeTableHeaderColor; // Header font color
                box-shadow: none;
                outline: $table-border-width solid $ThemeTableHeaderBorderColor;
                outline-offset: $border-width * -1;
            }
        }
    }
}
.overflow-y-auto > .table.ew-table.table-head-fixed {
    position: relative;
}

// Error page
.error-page {
    margin: 20px 0 0;
    width: auto;
    &> .headline {
        float: none;
        font-size: 75px;
    }
    &> .error-content {
        margin-left: 0;
        &> h3 {
            text-align: inherit;
        }
    }
}

// Prompt
.swal2-input.ew-swal2-input {
    font-size: $font-size-base;

    // Customize the `:focus` state to imitate native WebKit styles // From Bootstrap 5
    &:focus {
        color: $input-focus-color;
        background-color: $input-focus-bg;
        border-color: $input-focus-border-color;
        outline: 0;
        @if $enable-shadows {
            @include box-shadow($input-box-shadow, $input-focus-box-shadow);
        } @else {
            // Avoid using mixin so we can pass custom focus shadow properly
            box-shadow: $input-focus-box-shadow;
        }
    }
    &.swal2-inputerror {
        // Customize the `:focus` state to imitate native WebKit styles // From Bootstrap 5
        &:focus {
            border-color: $form-feedback-invalid-color !important;
            $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($form-feedback-invalid-color, $input-btn-focus-color-opacity);
            @if $enable-shadows {
                @include box-shadow($input-box-shadow, $focus-box-shadow);
            } @else {
                // Avoid using mixin so we can pass custom focus shadow properly
                box-shadow: $focus-box-shadow !important;
            }
        }
    }
}

// SweetAlert2
.ew-swal2-validation-message {
    border: 0 !important;
    border-radius: 0 !important;
}
.ew-swal2-actions {
    .btn { // Copied from Bootstrap 5.2, override SweetAlert2
        display: inline-block;
        padding: var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x);
        font-family: var(--#{$prefix}btn-font-family);
        @include font-size(var(--#{$prefix}btn-font-size));
        font-weight: var(--#{$prefix}btn-font-weight);
        line-height: var(--#{$prefix}btn-line-height);
        color: var(--#{$prefix}btn-color);
        text-align: center;
        text-decoration: if($link-decoration == none, null, none);
        white-space: $btn-white-space;
        vertical-align: middle;
        cursor: if($enable-button-pointers, pointer, null);
        user-select: none;
        border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color);
        @include border-radius(var(--#{$prefix}btn-border-radius));
        @include gradient-bg(var(--#{$prefix}btn-bg));
        @include box-shadow(var(--#{$prefix}btn-box-shadow));
        @include transition($btn-transition);
        &:hover {
            color: var(--#{$prefix}btn-hover-color);
            text-decoration: if($link-hover-decoration == underline, none, null);
            background-color: var(--#{$prefix}btn-hover-bg);
            border-color: var(--#{$prefix}btn-hover-border-color);
        }
        .btn-check:focus + &,
        &:focus {
            color: var(--#{$prefix}btn-hover-color);
            @include gradient-bg(var(--#{$prefix}btn-hover-bg));
            border-color: var(--#{$prefix}btn-hover-border-color);
            outline: 0;
            // Avoid using mixin so we can pass custom focus shadow properly
            @if $enable-shadows {
                box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
            } @else {
                box-shadow: var(--#{$prefix}btn-focus-box-shadow);
            }
        }
        .btn-check:checked + &,
        .btn-check:active + &,
        &:active,
        &.active,
        &.show {
            color: var(--#{$prefix}btn-active-color);
            background-color: var(--#{$prefix}btn-active-bg);
            // Remove CSS gradients if they're enabled
            background-image: if($enable-gradients, none, null);
            border-color: var(--#{$prefix}btn-active-border-color);
            @include box-shadow(var(--#{$prefix}btn-active-shadow));
            &:focus {
                // Avoid using mixin so we can pass custom focus shadow properly
                @if $enable-shadows {
                    box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);
                } @else {
                    box-shadow: var(--#{$prefix}btn-focus-box-shadow);
                }
            }
        }
        &:disabled,
        &.disabled,
        fieldset:disabled & {
            color: var(--#{$prefix}btn-disabled-color);
            pointer-events: none;
            background-color: var(--#{$prefix}btn-disabled-bg);
            background-image: if($enable-gradients, none, null);
            border-color: var(--#{$prefix}btn-disabled-border-color);
            opacity: var(--#{$prefix}btn-disabled-opacity);
            @include box-shadow(none);
        }
    }
}
.ew-swal2-title {
    font-size: $font-size-base * 1.5;
}
.swal2-html-container {
    font-size: $font-size-base;
}

// Named colors
$named-colors: map-merge($colors, $theme-colors);

// Border and popover colors
@each $name, $color in $named-colors {
    .popover-#{$name} {
        --#{$prefix}popover-border-color: #{$color};
        --#{$prefix}popover-arrow-border: #{$color};
        --#{$prefix}popover-header-bg: #{$color};
        $header-color: color-contrast($color);
        --#{$prefix}popover-header-color: #{$header-color};
        @if ($header-color == $color-contrast-light) {
            .btn-close {
              @include btn-close-white();
            }
        } @else {
            .btn-close {
                filter: none;
            }
        }
    }
}

// Table cell
@each $name, $color in $named-colors {
    .table-bg-#{$name} {
        --#{$prefix}table-bg: #{$color};
        $text-color: color-contrast($color);
        --#{$prefix}table-color-state: #{$text-color};
        --#{$prefix}table-hover-color: #{$text-color};
    }
}

// Full calender default popover
.popover-default {
    $color: #{var(--fc-event-border-color, #3788d8)}; // Use FullCalendar color
    --#{$prefix}popover-arrow-border: #{$color};
    --#{$prefix}popover-border-color:  #{$color};
    --#{$prefix}popover-header-bg: #{$color};
    --#{$prefix}popover-header-color: #{var(--fc-event-text-color, #fff)};
    .btn-close {
        @include btn-close-white();
    }
}

// Utilities
$ew-utilities: () !default;
$ew-utilities: map-merge(
    (
        "overflow-x": (
            responsive: true,
            property: overflow-x,
            values: auto hidden visible scroll,
        ),
        "overflow-y": (
            responsive: true,
            property: overflow-y,
            values: auto hidden visible scroll,
        )
    ),
    $ew-utilities
);

// Loop over each utility property
@each $key, $utility in $ew-utilities {
    @if type-of($utility) == "map" {
        @include generate-utility($utility, "");
    }
}

// Full calender event colors
@each $name, $color in $named-colors {
    .event-#{$name} {
        --fc-event-bg-color: #{$color};
        --fc-event-border-color: #{$color};
        --fc-event-text-color: #{color-contrast($color)};
    }
}

// Toasts containers
.toasts-top-right,
.toasts-top-left,
.toasts-bottom-right,
.toasts-bottom-right {
    margin: .5rem;
    z-index: 1050;
}

// Select2 (from AdminLTE)
.select2-container--bootstrap5 {
    .select2-results > .select2-results__options {
        $results-options-height: calc((#{$font-size-base * $line-height-base} + #{$dropdown-item-padding-y} * 2) * var(--select2-options-limit));
        max-height: $results-options-height;
    }
    .select2-selection {
        color: $input-color;
        border-radius: $border-radius;
    }
    .select2-results__group { // Use Bootstrap dropdown header styles
        --#{$prefix}dropdown-header-color: #{$dropdown-header-color};
        @include font-size($font-size-sm);
        color: var(--#{$prefix}dropdown-header-color);
        white-space: nowrap; // as with > li > a
    }
    &.select2-container--focus.select2-container--open .select2-selection {
        border-bottom-width: $input-border-width;
        border-bottom-style: solid;
        border-bottom-color: $input-focus-border-color;
    }
    &.select2-container--focus.select2-container--open.select2-container--above .select2-selection {
        border-top-left-radius: 0;
        border-bottom-left-radius: $border-radius;
    }

    // Multiple select
    & {
        .select2-selection--multiple {
            border: $input-border-width solid $input-border-color;
            min-height: $input-height;
            display: inline-block;
            &:focus {
                border-color: $input-focus-border-color;
            }
            .select2-selection__rendered {
                li:first-child.select2-search.select2-search--inline {
                    width: 100%;
                    margin-left: $input-padding-x * .5;
                    .select2-search__field {
                        width: 100% !important;
                    }
                }
                .select2-selection__choice {
                    background-color: $primary;
                    border-color: darken($primary, 5%);
                    border-radius: $border-radius;
                    color: color-contrast($primary);
                    display: inline-block;
                    margin-left: 0 #{'/*rtl:ignore*/'};
                    margin-top: 5px;
                    padding: 0;
                    .select2-selection__choice__display {
                        display: inline-block;
                        cursor: default;
                        padding-left: $spacer * .5;
                        padding-right: $spacer * 1.5;
                    }
                    .select2-selection__choice__remove {
                        background-color: transparent;
                        border: none;
                        border-top-left-radius: $border-radius;
                        border-bottom-left-radius: $border-radius;
                        color: rgba(255, 255, 255, 0.7);
                        cursor: pointer;
                        font-size: 1em;
                        font-weight: bold;
                        padding: 0 4px;
                        left: auto;
                        right: 0;
                        &:hover {
                            color: $white;
                            outline: none;
                        }
                    }
                }
            }
            .select2-search.select2-search--inline {
                width: auto;
                display: inline-block;
                .select2-search__field {
                    border: 0;
                }
            }
            .text-sm &,
            &.text-sm {
                .select2-search.select2-search--inline {
                    .select2-search__field {
                        margin-top: 8px;
                    }
                }
                .select2-selection__choice {
                    margin-top: $spacer * .4;
                }
            }
        }
        &.select2-container--focus {
            .select2-selection--single,
            .select2-selection--multiple {
                border-color: $input-focus-border-color;
            }
            .select2-search__field {
                border: 0;
            }
        }
    }

    // Custom Select2 dropdown and table header filter
    .ew-select-dropdown, .ew-filter-dropdown {
        &.select2-dropdown.select2-dropdown--below {
            border-top: $input-border-width solid $input-border-color;
        }
        .select2-results__options[role=listbox] {
            width: 100%;
        }
        .select2-results__option[role=option] {
            white-space: nowrap !important;
        }
        &.ew-select-multiple {
            &.ew-repeat-column .select2-results__options[role=listbox] {
                border-collapse: separate;
                border-spacing: 2px;
            }
        }
        div.select2-results__option[role=option] {
            &:not(:only-child) {
                border-radius: $border-radius;
            }
        }
        div.select2-results__option[role=option].loading-results {
            padding-left: $form-check-padding-start;
        }
        &.ew-select-one .select2-results__option[role=option] {
            padding: $dropdown-item-padding-y $dropdown-item-padding-x;
        }
        .ew-dropdown-check-input {
            display: inline-block;
            margin-right: $spacer * .5;
            background-color: $form-check-input-bg;
            border: $form-check-input-border;
            @include border-radius($form-check-input-border-radius);
        }
        .select2-results__option--selected {
            .ew-dropdown-check-input {
                background-color: $form-check-input-checked-bg-color;
                border-color: $form-check-input-checked-border-color;
                @if $enable-gradients {
                    background-image: escape-svg($form-check-input-checked-bg-image), var(--#{$prefix}gradient);
                } @else {
                    background-image: escape-svg($form-check-input-checked-bg-image);
                }
            }
        }
    }

    // Table header filter
    .ew-filter-dropdown {
        --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
        --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
        border-bottom-right-radius: $border-radius !important;
        border-bottom-left-radius: $border-radius !important;
        .select2-search--dropdown {
            padding: 6px;
        }
        .select2-search__field {
            width: 100% !important;
        }
        .select2-results > .select2-results__options {
            $results-options-height: calc((#{$font-size-base * $line-height-base} + #{$dropdown-item-padding-y} * 2) * var(--filter-options-limit));
            min-height: $results-options-height;
            max-height: $results-options-height;
        }
    }
    .ew-modal-dropdown {
        .select2-search--dropdown {
            padding: 6px;
        }
        .select2-search__field {
            width: 100% !important;
        }
    }

    // Override select2-bootstrap5
    .select2-dropdown  {
        .select2-results__option--selected,
        .select2-results__option[aria-selected="true"] {
            color: $dropdown-link-hover-color;
            text-decoration: none;
            @include gradient-bg($dropdown-link-hover-bg);
            &.select2-results__option--highlighted {
                color: $dropdown-link-active-color;
                text-decoration: none;
                @include gradient-bg($dropdown-link-active-bg);
            }
        }
    }
}

// Column Visibility
.ew-column-dropdown {
    .dropdown-item {
        padding-left: $spacer;
        padding-right: $spacer;
    }
    .dropdown-item.active, .dropdown-item:active {
        color: $dropdown-link-hover-color;
        @include gradient-bg($dropdown-link-hover-bg);
    }
    .form-check.ew-dropdown-checkbox .form-check-input {
        // Unchecked
        background-color: $form-check-input-bg;
        border: $form-check-input-border;
        @include border-radius($form-check-input-border-radius);

        // Checked
        &.ew-checked {
            background-color: $form-check-input-checked-bg-color;
            border-color: $form-check-input-checked-border-color;
            @if $enable-gradients {
                background-image: escape-svg($form-check-input-checked-bg-image), var(--#{$prefix}gradient);
            } @else {
                background-image: escape-svg($form-check-input-checked-bg-image);
            }
        }
    }
}

// Modal header
.modal-header {
    > .modal-tools {
        float: right;
        margin-right: -$spacer * .5;
        .input,
        .input-group {
            margin: 0;
        }
        [data-bs-toggle="tooltip"] {
            position: relative;
        }
    }
}

// File upload
.template-download .error,
.template-upload .error {
    font-size: $form-feedback-font-size;
    color: var(--#{$prefix}form-invalid-color);
}

// Search field invalid feedback
.ew-search-field > .invalid-feedback,
.ew-search-field2 > .invalid-feedback {
    margin-left: 1em;
}

// Navbar search
.form-control-navbar, .btn-navbar {
    &:focus {
        box-shadow: none;
    }
}

// Single extended search button
.ew-col-break + .col-auto {
    margin-bottom: $spacer;
}

// Search highlight
mark.ew-mark:not(.mark) {
    padding: 0;
    background: transparent;
}

// Modal lookup and Filter
.modal-body {
    .select2-container {
        width: 100%;
    }
    .select2-dropdown {
        border: 0;
        border-radius: 0;
        left: auto !important;
        position: static !important;
    }
}

// Modal lookup
.modal-body .select2-container--bootstrap5 .select2-results > .select2-results__options { // Override select-bootstrap5
    $results-options-height: calc((#{$font-size-base * $line-height-base} + 0.375rem + 0.375rem) * var(--modal-options-limit)); // Match padding-y from select-bootstrap5
    min-height: $results-options-height;
    max-height: $results-options-height;
}

// Table header filter
.ew-filter-field {
    display: none !important; // Hide element in Extended Search form
}

// Override select2 bootstrap5 theme
.ew-select, .select2-container {
    min-width: 20em !important;
}
.select2-container--open {
    z-index: $zindex-main-header + 1 !important; // Higher than main header // $lte-zindex-main-header
}
.modal-body .select2-container--open {
    z-index: $zindex-modal + 1 !important; // Higher than modal
}

// Width
.w-1 {
    width: 1%;
}

// Pace
.pace {
    -webkit-pointer-events: none;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    $pace-color: $primary;
    @if is-color($ThemePaceColor) {
        $pace-color: $ThemePaceColor;
    }
    .pace-progress {
        background-color: $pace-color;
        position: fixed;
        z-index: 2000;
        top: 0;
        right: 100%;
        width: 100%;
        height: 4px;
    }

    // Note: Uncomment to show spinner
    // .pace-activity {
    //     position: absolute;
    //     left: 50%;
    //     top: 20%;
    //     z-index: 2000;
    //     opacity: 75%;
    //     // Bootstrap .spinner-border
    //     color: $pace-color;
    //     display: inline-block;
    //     width: 3rem;
    //     height: 3rem;
    //     vertical-align: -0.125em;
    //     border: 0.25em solid currentColor;
    //     border-right-color: transparent;
    //     border-radius: 50%;
    //     -webkit-animation: 0.75s linear infinite spinner-border;
    //     animation: 0.75s linear infinite spinner-border;
    // }
}
.pace-inactive {
    display: none;
}

// Bootstrap
.dropdown-divider {
    height: 0 !important;
}

// File input
.ew-file-input, .ew-file-input:focus {
    color: transparent; // Hide "no file chosen"
}
.ew-file-drop-zone {
    display: block !important;
    border: 2px dashed $input-border-color;
    // width: 30rem;
    vertical-align: middle;
    text-align: center;
    margin-bottom: $spacer * .5;
    @include border-radius($input-border-radius, 0);
    .ew-file-text {
        line-height: 4;
    }
}

// Actions
a[data-ew-action]:not([data-ew-action='']) {
    cursor: pointer;
}

// Backup codes
.ew-backup-codes {
    height: $font-size-base * $line-height-base * 10 + $input-padding-y-lg * 2;
}

// Barcode
img.ew-barcode {
    margin: $spacer * .5;
}

// No record
.ew-no-record {
    .ew-grid {
        display: none;
    }
}

// Heights
@for $i from 1 through 19 {
    $h: $i * 5;
    .vh-#{$h} {
        height: #{$h}vh;
    }
}
@for $i from 1 through 20 {
    $h: $i * 50;
    .h-#{$h}px {
        height: #{$h}px;
    }
    .mh-#{$h}px {
        max-height: #{$h}px;
    }
}

// Overlay
.card {
    .overlay { // Override AdminLTE
        border-radius: 0;
    }
}
.overlay-wrapper {
    position: relative;
    min-height: 3rem; // For overlay
}

// Selection list
div[id^=dsl_] .ew-loading {
    --#{$prefix}spinner-width: #{$spinner-width-sm};
    --#{$prefix}spinner-height: #{$spinner-height-sm};
    --#{$prefix}spinner-border-width: #{$spinner-border-width-sm};
    margin: 0.5rem !important;
}

// Overlays for Card, InfoBox and SmallBox
.card,
.overlay-wrapper,
.info-box,
.small-box {
    .overlay { // Override AdminLTE
        background-color: rgba($white, .5);
    }
}
.ew-calendar-wrapper {
    min-height: 6rem; // For overlay
}

// Box Tools Buttons (for AdminLTE)
.btn-tool {
    --#{$prefix}btn-font-weight: #{$font-weight-normal};
    --#{$prefix}btn-color: #{$gray-500};
    --#{$prefix}btn-bg: transparent;
    --#{$prefix}btn-border-color: transparent;
    --#{$prefix}btn-hover-color: #{$gray-700};
    --#{$prefix}btn-hover-bg: transparent;
    --#{$prefix}btn-hover-border-color: transparent;
    --#{$prefix}btn-active-color: #{$gray-700};
    --#{$prefix}btn-active-bg: transparent;
    --#{$prefix}btn-active-border-color: transparent;
    --#{$prefix}btn-disabled-color: #{$gray-300};
    --#{$prefix}btn-disabled-bg: transparent;
    --#{$prefix}btn-disabled-border-color: transparent;
    --#{$prefix}btn-box-shadow: none;
    --#{$prefix}btn-focus-box-shadow: none;
}
.btn:not([class*="btn-"]) {
    --#{$prefix}btn-border-color: transparent;
    --#{$prefix}btn-hover-border-color: transparent;
    --#{$prefix}btn-active-border-color: transparent;
    --#{$prefix}btn-disabled-border-color: transparent;
    --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($gray-300)};
}

// Calendar
.ew-calendar {
    .fc-toolbar {
        flex-direction: row;
    }
    .table-bordered {
        border: $table-border-width solid $table-border-color;
    }
    .table-bordered td, .table-bordered th {
        border: $table-border-width solid $table-border-color;
    }
}
.ew-event-popover {
    min-width: 150px;
}

// Calendar (dark mode)
@include dark-mode () {
    --fc-page-bg-color: var(--#{$prefix}body-bg);
    $color: color-contrast(opaque($body-bg, $dark));
    $hover-bg: mix($color, $dark, percentage($table-hover-bg-factor));
    $active-bg: mix($color, $dark, percentage($table-active-bg-factor));
    $table-border-color: mix($color, $dark, percentage($table-border-factor * 2.5));
    .fc-theme-bootstrap5 {
        & .fc-list,
        & .fc-scrollgrid,
        & td,
        & th {
            border-color: $table-border-color;
        }
    }
    .fc-theme-bootstrap5-shaded {
        background-color: $active-bg;
        color: color-contrast($active-bg);
        a:not(.btn):hover {
            background-color: $hover-bg;
            color: color-contrast($hover-bg);
        }
    }
    .fc-daygrid-more-link {
        &:hover {
            background-color: $hover-bg;
            color: color-contrast($hover-bg) !important;
        }
    }
    .fc-list-event:hover td {
        background-color: $hover-bg;
        color: color-contrast($hover-bg);
    }
}

// Query builder
.ew-view-rules {
    max-height: 300px;
}

// Navbar dropdown
@if not $enable-dark-mode {
    .main-header {
        .dropdown-item {
            color: $dropdown-link-color !important;
            &:hover,
            &:focus {
                color: $dropdown-link-hover-color !important;
                text-decoration: none;
                @include gradient-bg($dropdown-link-hover-bg);
            }
            &.active,
            &:active {
                color: $dropdown-link-active-color !important;
                @include gradient-bg($dropdown-link-active-bg);
            }
            &.disabled,
            &:disabled {
                color: $dropdown-link-disabled-color !important;
            }
        }
    }
}

// Chat button
.chat-wrapper {
    // z-index: 1040; /* optional, higher than navbar, but dropdown menus from navbar will be behind chat card  */
    .chat-btn {
        position: absolute;
        right: 14px;
        bottom: 20px;
        cursor: pointer;
        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50px;
        font-size: 22px;
        border: none;
        opacity: 0;
        --#{$prefix}bg-opacity: .8;
        &.show {
            opacity: 1;
            transition: opacity 2s;
        }
        .close {
            display: none;
        }
    }
    .card {
        position: absolute;
        right: 80px;
        bottom: 10px;
        transition: all 0.4s;
        display: none;
    }
    .card-body iframe {
        min-width: 400px;
        min-height: 500px;
    }
}

// Dark mode
@include dark-mode () {
    $background: $dark;
    $color: color-contrast(opaque($body-bg, $background));
    // $table-border-color: mix($color, $background, percentage($table-border-factor)); // Bootstrap setting
    $table-border-color: $gray-600; // Use AdminLTE setting instead of Bootstrap setting
    .content-wrapper  {
        background-color: var(--#{$prefix}body-bg); // Override AdminLTE
    }

    // siderbar
    [class*="sidebar-dark-"] {
        // Sidebar Menu. First level links
        .nav-sidebar > .nav-item {
            --#{$prefix}nav-link-hover-color: $sidebar-dark-hover-color;
            > .nav-link.active {
                color: $sidebar-dark-hover-color !important;
            }
        }

        // All submenus
        .nav-treeview {
            > .nav-item {
                --#{$prefix}nav-link-hover-color: $sidebar-dark-submenu-hover-color;
                > .nav-link.active {
                    &,
                    &:hover,
                    &:focus {
                        color: $sidebar-dark-submenu-active-color !important;
                    }
                }
            }
        }
    }
    .ew-search-operator, .ew-search-operator2 {
        color: #{color-contrast(opaque($body-bg, $background))};
    }

    // Grid
    .ew-grid {
        border-color: $table-border-color;
        &.ew-loading {
            // border-color: rgba($table-border-color, 0.25); // No need to change in dark mode
        }
        .ew-grid-upper-panel {
            border-bottom-color: $table-border-color;
        }
        .ew-grid-lower-panel {
            border-top-color: $table-border-color;
        }
    }

    // Table
    .table {
         // From Bootstrap (begin)
        $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
        $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
        $active-bg: mix($color, $background, percentage($table-active-bg-factor));
        $table-footer-bg-factor: .09 !default;
        $footer-bg: mix($color, $background, percentage($table-footer-bg-factor));
        --#{$prefix}table-color: #{$color};
        --#{$prefix}table-bg: #{$background};
        --#{$prefix}table-border-color: #{$table-border-color};
        --#{$prefix}table-striped-bg: #{$striped-bg};
        --#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
        --#{$prefix}table-active-bg: #{$active-bg};
        --#{$prefix}table-active-color: #{color-contrast($active-bg)};
        --#{$prefix}table-hover-bg: #{$hover-bg};
        --#{$prefix}table-hover-color: #{color-contrast($hover-bg)};
        // From Bootstrap (end)
        color: var(--#{$prefix}table-color);
        border-color: var(--#{$prefix}table-border-color);
        tbody,
        tfoot,
        :not(thead) > tr,
        td,
        th {
            border-color: var(--#{$prefix}table-border-color); // Override Bootstrap reboot
        }
        > thead > *,
        > thead > * > * {
            border-bottom-color: var(--#{$prefix}table-border-color) !important;
        }
        > :not(:last-child):not(thead) > :last-child > * {
            border-bottom-color: var(--#{$prefix}table-border-color);
        }

        // Main table last row cell with border-bottom
        > tbody:last-child > tr:last-child > td.ew-table-border-bottom,
        > tfoot > tr:last-child > td.ew-table-border-bottom,
        td.ew-table-last-row.ew-table-border-bottom,
        .ew-table-border-bottom {
            border-color: var(--#{$prefix}table-border-color); // Border color
        }
        > thead > tr > th,
        > thead > tr > td {
            // font-weight: normal;
            border-color: var(--#{$prefix}table-border-color);
        }

        // Main table header
        .ew-table-header > th,
        .ew-table-header > td,
        .ew-rpt-col-summary,
        .ew-rpt-col-header {
            font-weight: bold;
        }

        // Main table footer
        .ew-table-footer > td {
            --#{$prefix}table-bg: #{$footer-bg};
        }

        // Main table active
        // .table-active {
        //     --#{$prefix}table-color-state: var(--#{$prefix}table-active-color) !important; // Override
        //     --#{$prefix}table-bg-state: var(--#{$prefix}table-active-bg) !important;
        // }

        // Striped table row
        @if ($ThemeTableStriped) {
            > tbody > .ew-table-alt-row > *,
            > tbody > * > .ew-table-alt-row {
                --#{$prefix}table-color-state: var(--#{$prefix}table-striped-color);
                --#{$prefix}table-bg-state: var(--#{$prefix}table-striped-bg);
            }
        }

        // Hover
        &.table-hover {
            > tbody > tr:not(.expandable-body):hover > * {
                --#{$prefix}table-color-state: var(--#{$prefix}table-hover-color);
                --#{$prefix}table-bg-state: var(--#{$prefix}table-hover-bg);
            }
        }
        .ew-rpt-page-summary > td,
        .ew-rpt-grand-summary > td {
            --#{$prefix}table-bg: #{$footer-bg};
        }
    }

    // Select2
    .select2-container--bootstrap5 .select2-selection--single {
        background-image: escape-svg($form-select-indicator-dark);
    }
    select.is-valid~.select2-container--bootstrap5 .select2-selection--single,
    form.was-validated select:valid~.select2-container--bootstrap5 .select2-selection--single {
        background-image: escape-svg($form-select-indicator-dark), escape-svg($form-feedback-icon-valid);
    }
    select.is-invalid~.select2-container--bootstrap5 .select2-selection--single,
    form.was-validated select:invalid~.select2-container--bootstrap5 .select2-selection--single {
        background-image: escape-svg($form-select-indicator-dark), escape-svg($form-feedback-icon-invalid);
    }
    .select2-container--bootstrap5.select2-container--disabled .select2-selection,
    .select2-container--bootstrap5.select2-container--disabled .select2-search__field {
        background-color: rgba(#e9ecef, .2);
    }

    // Dark dropdowns (Copied from Bootstrap .dropdown-menu-dark)
    .dropdown-menu {
        --#{$prefix}dropdown-color: #{$dropdown-dark-color};
        --#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
        --#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
        --#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
        --#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
        --#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
        --#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
        --#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
        --#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
        --#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
        --#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
        --#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};
    }

    // AdminLTE dark dropdowns (overridden by Boostrap 5 dark dropdowns variables)
    .dropdown-menu {
        background-color: var(--#{$prefix}dropdown-bg) !important;
        color: var(--#{$prefix}dropdown-color) !important;
    }
    .dropdown-item {
        color: var(--#{$prefix}dropdown-link-color) !important;
        &:hover,
        &:focus {
            color: var(--#{$prefix}dropdown-link-hover-color) !important;
            background-color: var(--#{$prefix}dropdown-link-hover-bg) !important;
        }
        &.active,
        &:active {
            color: var(--#{$prefix}dropdown-link-active-color);
            background-color: var(--#{$prefix}dropdown-link-active-bg) !important;
        }
        &.disabled,
        &:disabled {
            color: var(--#{$prefix}dropdown-link-disabled-color) !important;
        }
    }
    .dropdown-divider {
        border-color: var(--#{$prefix}dropdown-divider-bg) !important;
    }

    // Override AdminLTE
    a.nav-link:not(.btn):hover {
        color: var(--bs-nav-link-hover-color) !important;
    }

    // Overlays for Card, InfoBox & SmallBox
    .card,
    .overlay-wrapper,
    .info-box,
    .small-box {
        .overlay {
            background-color: rgba($white, .1);
            > .fa-solid,
            > .fa-regular,
            > .fa-light,
            > .fa-thin,
            > .fa-duotone,
            > .fa-brands,
            > .svg-inline--fa {
                color: $gray-400;
            }
        }
    }

    // Box overlay for LOADING STATE effect on Tab Panels
    .tab-pane {
        > .overlay-wrapper {
            color: $white;
        }
    }

     // Dark popovers
    .popover {
        --#{$prefix}popover-bg: #{$dropdown-dark-bg} !important;
        --#{$prefix}popover-body-color: #{$dropdown-dark-color} !important;
        @if (color-contrast($dropdown-dark-bg) == $color-contrast-light) {
            .btn-close {
                @include btn-close-white();
            }
        }
    }
    $named-colors: map-merge($colors-alt, $theme-colors-alt);
    @each $name, $color in $named-colors {
        .popover-#{$name} {
            --#{$prefix}popover-border-color: #{$color};
            --#{$prefix}popover-arrow-border: #{$color};
            --#{$prefix}popover-header-bg: #{$color};
            $header-color: color-contrast($color, $min-contrast-ratio: $adminlte-min-contrast-ratio);
            --#{$prefix}popover-header-color: #{$header-color};
            @if ($header-color == $color-contrast-light) {
                .btn-close {
                  @include btn-close-white();
                }
            } @else {
                .btn-close {
                    filter: none;
                }
            }
        }
    }

    // Table cell
    @each $name, $color in $named-colors {
        .table-bg-#{$name} {
            $text-color: color-contrast($color);
            --#{$prefix}table-color-state: #{$text-color} !important;
            --#{$prefix}table-bg-state: #{$color} !important;
            &> * {
                $text-color: color-contrast($color);
                --#{$prefix}table-color-state: #{$text-color} !important;
                --#{$prefix}table-bg-state: #{$color} !important;
            }
        }
    }

    // Required field indicator
    .ew-required {
        color: $danger-alt;
    }

    // AutoSuggest
    .is-invalid .tt-input {
        border-color: $form-invalid-color-dark;
        &:focus {
            border-color: $form-invalid-color-dark;
            box-shadow: 0 0 0 $input-focus-width rgba($form-invalid-color-dark, .25);
        }
    }

    // Dark modal
    .modal {
        // Text colors
        @each $color in map-keys($theme-colors-text-dark) {
            .text-#{$color} {
                color: var(--#{$prefix}#{$color}-text-emphasis) !important;
            }
        }
    }

    // Tooltip
    #ew-import-dialog {
        .tooltip-inner {
            background-color: $danger-alt;
            color: color-contrast($danger-alt, $min-contrast-ratio: $adminlte-min-contrast-ratio);
        }
        .tooltip-arrow {
            &::before {
              border-bottom-color: $danger-alt;
            }
        }
    }

    // Google Gantt chart
    .ew-gantt svg {
        // Horizontal Labels
        g:nth-child(3) {
            text {
                fill: $white;
            }
        }

        // Tooltips
        g:nth-child(10) {
            rect {
                fill: $dropdown-dark-bg;
            }
            text {
                fill: $white;
            }
            text:nth-child(2) { // Title
                font-weight: 500;
            }
        }
    }
}
/*END_SYSTEM_STYLES*/

/*BEGIN_USER_STYLES*/

/*END_USER_STYLES*/