:root {
    /* Header / global */
    --skn-header-background: #4099FF;
    --skn-bg-color: #F6F7FB;
    /* Brand colors */
    --skn-primary-color: #4099FF;
    --skn-primary-text-color: #FFFFFF;
    --skn-active-primary-color: #0B5ED7;
    --skn-secondary-color: #4099FF;
    --skn-secondary-text-color: #4099FF;
    --skn-active-secondary-color: #d9dcdf;
    --skn-third-color: #FFFFFF;
    --skn-third-text-color: #00503C;
    --skn-active-third-color: #F2F5F4;
    --skn-success-color: #2ED8B6;
    --skn-success-text-color: #212529;
    --skn-active-success-color: #26B89B;
    --skn-danger-color: #FF5370;
    --skn-danger-text-color: #FFFFFF;
    --skn-active-danger-color: #E64966;
    --skn-warning-color: #FFB64D;
    --skn-warning-text-color: #212529;
    --skn-active-warning-color: #E5A444;
    --skn-info-color: #00BCD4;
    --skn-info-text-color: #212529;
    --skn-active-info-color: #00A6BB;
    --skn-light-color: #F8F9FA;
    --skn-light-text-color: #212529;
    --skn-active-light-color: #E9ECEF;
    --skn-dark-color: #212529;
    --skn-dark-text-color: #FFFFFF;
    --skn-active-dark-color: #1B1F23;
    /* Tooltip */
    --skn-tooltip-bg: #212529;
    --skn-tooltip-color: #FFFFFF;
    /* Links */
    --skn-link-color: #4099FF;
    --skn-link-hover-color: #0B5ED7;
    /* better for SKN secondary */
    --skn-secondary-border-color: var(--skn-secondary-color);
    --skn-primary-color-dark: color-mix(in srgb, var(--skn-primary-color) 60%, black);
    --skn-bg-color-light: color-mix(in srgb, var(--skn-bg-color) 60%, white);
    --skn-header-background-dark: color-mix(in srgb, var(--skn-header-background) 60%, black);
    /* Bootstrap mapping */
    --bs-body-bg: var(--skn-bg-color);
    --bs-border-color: #dee2e6;
    --bs-primary: var(--skn-primary-color);
    --bs-secondary: var(--skn-secondary-color);
    --bs-success: var(--skn-success-color);
    --bs-danger: var(--skn-danger-color);
    --bs-warning: var(--skn-warning-color);
    --bs-info: var(--skn-info-color);
    --bs-light: var(--skn-light-color);
    --bs-dark: var(--skn-dark-color);
    --bs-link-color: var(--skn-link-color);
    --bs-link-hover-color: var(--skn-link-hover-color);
    --bs-primary-text-emphasis: var(--skn-primary-text-color);
    --bs-secondary-text-emphasis: var(--skn-secondary-text-color);
    --bs-success-text-emphasis: var(--skn-success-text-color);
    --bs-danger-text-emphasis: var(--skn-danger-text-color);
    --bs-warning-text-emphasis: var(--skn-warning-text-color);
    --bs-info-text-emphasis: var(--skn-info-text-color);
    --bs-light-text-emphasis: var(--skn-light-text-color);
    --bs-dark-text-emphasis: var(--skn-dark-text-color);
    /* Bootstrap subtle vars for alerts, list groups etc. */
    --bs-primary-bg-subtle: color-mix(in srgb, var(--skn-primary-color) 60%, white);
    --bs-primary-border-subtle: color-mix(in srgb, var(--skn-primary-color) 35%, white);
    --bs-secondary-bg-subtle: color-mix(in srgb, var(--skn-secondary-color) 70%, white);
    --bs-secondary-border-subtle: var(--skn-secondary-border-color);
    --bs-success-bg-subtle: color-mix(in srgb, var(--skn-success-color) 22%, white);
    --bs-success-border-subtle: color-mix(in srgb, var(--skn-success-color) 40%, white);
    --bs-danger-bg-subtle: color-mix(in srgb, var(--skn-danger-color) 60%, white);
    --bs-danger-border-subtle: color-mix(in srgb, var(--skn-danger-color) 36%, white);
    --bs-warning-bg-subtle: color-mix(in srgb, var(--skn-warning-color) 24%, white);
    --bs-warning-border-subtle: color-mix(in srgb, var(--skn-warning-color) 42%, white);
    --bs-info-bg-subtle: color-mix(in srgb, var(--skn-info-color) 24%, white);
    --bs-info-border-subtle: color-mix(in srgb, var(--skn-info-color) 42%, white);
    --bs-light-bg-subtle: color-mix(in srgb, var(--skn-light-color) 80%, white);
    --bs-light-border-subtle: color-mix(in srgb, var(--skn-light-color) 95%, #d5d5d5);
    --bs-dark-bg-subtle: color-mix(in srgb, var(--skn-dark-color) 16%, white);
    --bs-dark-border-subtle: color-mix(in srgb, var(--skn-dark-color) 34%, white);
    --bs-gray-300: #dee2e6;
    /* Layout/theme-specific vars from your template */
    --pc-header-background: var(--skn-header-background);
    --pc-header-color: #ffffff;
    --pc-sidebar-active-color: var(--skn-header-background);
    --pc-sidebar-background: #ffffff;
    --pc-sidebar-color: #39465F;
    --pc-sidebar-color-rgb: 57, 70, 95;
    --pc-sidebar-shadow: 2px 0 2.94px 0.06px rgba(4,26,55,.16);
    --pc-header-submenu-background: #ffffff;
    --pc-header-submenu-color: #39465F;
    --pc-sidebar-submenu-border-color: #DBE0E5;
    --pc-sidebar-border: none;
    --pc-card-box-shadow: 0 1px 2.94px 0.06px rgba(4,26,55,.16);
    --pc-card-box-hover-shadow: 0px 8px 24px rgba(27,46,94,0.12);
    --pc-active-background: #DBE0E5;
    --bs-font-sans-serif: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 0.875rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-text-align: left;
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

html[data-brand="smartselect"][data-env="prod"] {
    --skn-header-background: #00503C;
    --skn-primary-color: #258263;
    --skn-primary-text-color: #FFFFFF;
    --skn-active-primary-color: #1E6A51;
}

html[data-brand="smartselect"][data-env="beta"] {
    --skn-header-background: #7A5C00;
    --skn-primary-color: #C69200;
    --skn-primary-text-color: #FFFFFF;
    --skn-active-primary-color: #A97C00;
}

html[data-brand="smartselect"][data-env="test"] {
    --skn-header-background: #5A1E8A;
    --skn-primary-color: #8E44EC;
    --skn-primary-text-color: #FFFFFF;
    --skn-active-primary-color: #7336C2;
}

/* Links */
a {
    color: var(--skn-primary-color);
}

    a:hover,
    a:focus {
        color: var(--skn-primary-color-dark);
    }

    a.link-blue:hover, a.link-blue:focus {
        color: var(--skn-primary-color-dark);
    }

.page-link {
    color: var(--skn-primary-color);
}

    .page-link:hover {
        color: var(--skn-primary-color-dark);
    }

/* Buttons */
.btn-primary {
    --bs-btn-color: var(--skn-primary-text-color);
    --bs-btn-bg: var(--skn-primary-color);
    --bs-btn-border-color: var(--skn-primary-color);
    --bs-btn-hover-color: var(--skn-primary-text-color);
    --bs-btn-hover-bg: var(--skn-active-primary-color);
    --bs-btn-hover-border-color: var(--skn-active-primary-color);
    --bs-btn-active-color: var(--skn-primary-text-color);
    --bs-btn-active-bg: var(--skn-active-primary-color);
    --bs-btn-active-border-color: var(--skn-active-primary-color);
    --bs-btn-disabled-color: var(--skn-primary-text-color);
    --bs-btn-disabled-bg: var(--skn-primary-color);
    --bs-btn-disabled-border-color: var(--skn-primary-color);
    background-color: var(--skn-primary-color);
    border-color: var(--skn-primary-color);
    color: var(--skn-primary-text-color);
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active,
    .btn-primary.active,
    .show > .btn-primary.dropdown-toggle {
        background-color: var(--skn-active-primary-color);
        border-color: var(--skn-active-primary-color);
        color: var(--skn-primary-text-color);
    }

.btn-secondary {
    --bs-btn-color: var(--skn-secondary-color);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--skn-secondary-color);
    --bs-btn-hover-color: var(--skn-secondary-color);
    --bs-btn-hover-bg: #d9dcdf;
    --bs-btn-hover-border-color: var(--skn-secondary-color);
    --bs-btn-active-color: var(--skn-secondary-color);
    --bs-btn-active-bg: #d9dcdf;
    --bs-btn-active-border-color: var(--skn-secondary-color);
    --bs-btn-disabled-color: var(--skn-secondary-color);
    --bs-btn-disabled-bg: #fff;
    --bs-btn-disabled-border-color: var(--skn-secondary-color);
}

    .btn-check + .btn-secondary:hover,
    .btn-check:hover + .btn-secondary,
    .btn-check:checked + .btn-secondary,
    .btn-check:checked + .btn-secondary:hover,
    .btn-secondary:hover,
    .btn-secondary.active,
    .show > .btn-secondary.dropdown-toggle {
        color: var(--skn-secondary-color) !important;
        background-color: #d9dcdf !important;
        border-color: var(--skn-secondary-color) !important;
    }

.btn-success {
    --bs-btn-color: var(--skn-success-text-color);
    --bs-btn-bg: var(--skn-success-color);
    --bs-btn-border-color: var(--skn-success-color);
    --bs-btn-hover-color: var(--skn-success-text-color);
    --bs-btn-hover-bg: var(--skn-active-success-color);
    --bs-btn-hover-border-color: var(--skn-active-success-color);
    --bs-btn-active-color: var(--skn-success-text-color);
    --bs-btn-active-bg: var(--skn-active-success-color);
    --bs-btn-active-border-color: var(--skn-active-success-color);
    background-color: var(--skn-success-color);
    border-color: var(--skn-success-color);
    color: var(--skn-success-text-color);
}

    .btn-success:hover,
    .btn-success:focus,
    .btn-success:active,
    .btn-success.active,
    .show > .btn-success.dropdown-toggle {
        background-color: var(--skn-active-success-color);
        border-color: var(--skn-active-success-color);
        color: var(--skn-success-text-color);
    }

.btn-danger {
    --bs-btn-color: var(--skn-danger-text-color);
    --bs-btn-bg: var(--skn-danger-color);
    --bs-btn-border-color: var(--skn-danger-color);
    --bs-btn-hover-color: var(--skn-danger-text-color);
    --bs-btn-hover-bg: var(--skn-active-danger-color);
    --bs-btn-hover-border-color: var(--skn-active-danger-color);
    --bs-btn-active-color: var(--skn-danger-text-color);
    --bs-btn-active-bg: var(--skn-active-danger-color);
    --bs-btn-active-border-color: var(--skn-active-danger-color);
    background-color: var(--skn-danger-color);
    border-color: var(--skn-danger-color);
    color: var(--skn-danger-text-color);
}

    .btn-danger:hover,
    .btn-danger:focus,
    .btn-danger:active,
    .btn-danger.active,
    .show > .btn-danger.dropdown-toggle {
        background-color: var(--skn-active-danger-color);
        border-color: var(--skn-active-danger-color);
        color: var(--skn-danger-text-color);
    }

.btn-warning {
    --bs-btn-color: var(--skn-warning-text-color);
    --bs-btn-bg: var(--skn-warning-color);
    --bs-btn-border-color: var(--skn-warning-color);
    --bs-btn-hover-color: var(--skn-warning-text-color);
    --bs-btn-hover-bg: var(--skn-active-warning-color);
    --bs-btn-hover-border-color: var(--skn-active-warning-color);
    --bs-btn-active-color: var(--skn-warning-text-color);
    --bs-btn-active-bg: var(--skn-active-warning-color);
    --bs-btn-active-border-color: var(--skn-active-warning-color);
    background-color: var(--skn-warning-color);
    border-color: var(--skn-warning-color);
    color: var(--skn-warning-text-color);
}

    .btn-warning:hover,
    .btn-warning:focus,
    .btn-warning:active,
    .btn-warning.active,
    .show > .btn-warning.dropdown-toggle {
        background-color: var(--skn-active-warning-color);
        border-color: var(--skn-active-warning-color);
        color: var(--skn-warning-text-color);
    }

.btn-info {
    --bs-btn-color: var(--skn-info-text-color);
    --bs-btn-bg: var(--skn-info-color);
    --bs-btn-border-color: var(--skn-info-color);
    --bs-btn-hover-color: var(--skn-info-text-color);
    --bs-btn-hover-bg: var(--skn-active-info-color);
    --bs-btn-hover-border-color: var(--skn-active-info-color);
    --bs-btn-active-color: var(--skn-info-text-color);
    --bs-btn-active-bg: var(--skn-active-info-color);
    --bs-btn-active-border-color: var(--skn-active-info-color);
    background-color: var(--skn-info-color);
    border-color: var(--skn-info-color);
    color: var(--skn-info-text-color);
}

    .btn-info:hover,
    .btn-info:focus,
    .btn-info:active,
    .btn-info.active,
    .show > .btn-info.dropdown-toggle {
        background-color: var(--skn-active-info-color);
        border-color: var(--skn-active-info-color);
        color: var(--skn-info-text-color);
    }

.btn-light {
    --bs-btn-color: var(--skn-light-text-color);
    --bs-btn-bg: var(--skn-light-color);
    --bs-btn-border-color: var(--skn-light-color);
    --bs-btn-hover-color: var(--skn-light-text-color);
    --bs-btn-hover-bg: var(--skn-active-light-color);
    --bs-btn-hover-border-color: var(--skn-active-light-color);
    --bs-btn-active-color: var(--skn-light-text-color);
    --bs-btn-active-bg: var(--skn-active-light-color);
    --bs-btn-active-border-color: var(--skn-active-light-color);
    background-color: var(--skn-light-color);
    border-color: var(--skn-light-color);
    color: var(--skn-light-text-color);
}

    .btn-light:hover,
    .btn-light:focus,
    .btn-light:active,
    .btn-light.active,
    .show > .btn-light.dropdown-toggle {
        background-color: var(--skn-active-light-color);
        border-color: var(--skn-active-light-color);
        color: var(--skn-light-text-color);
    }

.btn-dark {
    --bs-btn-color: var(--skn-dark-text-color);
    --bs-btn-bg: var(--skn-dark-color);
    --bs-btn-border-color: var(--skn-dark-color);
    --bs-btn-hover-color: var(--skn-dark-text-color);
    --bs-btn-hover-bg: var(--skn-active-dark-color);
    --bs-btn-hover-border-color: var(--skn-active-dark-color);
    --bs-btn-active-color: var(--skn-dark-text-color);
    --bs-btn-active-bg: var(--skn-active-dark-color);
    --bs-btn-active-border-color: var(--skn-active-dark-color);
    background-color: var(--skn-dark-color);
    border-color: var(--skn-dark-color);
    color: var(--skn-dark-text-color);
}

    .btn-dark:hover,
    .btn-dark:focus,
    .btn-dark:active,
    .btn-dark.active,
    .show > .btn-dark.dropdown-toggle {
        background-color: var(--skn-active-dark-color);
        border-color: var(--skn-active-dark-color);
        color: var(--skn-dark-text-color);
    }
/* Badges */
.badge.text-bg-primary,
.bg-primary {
    background-color: var(--skn-primary-color) !important;
    color: var(--skn-primary-text-color) !important;
}

.badge.text-bg-secondary,
.bg-secondary {
    background-color: #ffffff !important;
    color: var(--skn-secondary-text-color) !important;
    border: 1px solid var(--skn-secondary-border-color) !important;
}

.badge.text-bg-success,
.bg-success {
    background-color: var(--skn-success-color) !important;
    color: var(--skn-success-text-color) !important;
}

.badge.text-bg-danger,
.bg-danger {
    background-color: var(--skn-danger-color) !important;
    color: var(--skn-danger-text-color) !important;
}

.badge.text-bg-warning,
.bg-warning {
    background-color: var(--skn-warning-color) !important;
    color: var(--skn-warning-text-color) !important;
}

.badge.text-bg-info,
.bg-info {
    background-color: var(--skn-info-color) !important;
    color: var(--skn-info-text-color) !important;
}

.badge.text-bg-light,
.bg-light {
    background-color: var(--skn-light-color) !important;
    color: var(--skn-light-text-color) !important;
}

.badge.text-bg-dark,
.bg-dark {
    background-color: var(--skn-dark-color) !important;
    color: var(--skn-dark-text-color) !important;
}
/* Alerts */
.alert-primary {
    --bs-alert-color: var(--bs-primary-text-emphasis);
    --bs-alert-bg: var(--bs-primary-bg-subtle);
    --bs-alert-border-color: var(--bs-primary-border-subtle);
}

.alert-secondary {
    --bs-alert-color: var(--bs-secondary-text-emphasis);
    --bs-alert-bg: var(--bs-secondary-bg-subtle);
    --bs-alert-border-color: var(--bs-secondary-border-subtle);
}

.alert-success {
    --bs-alert-color: var(--bs-success-text-emphasis);
    --bs-alert-bg: var(--bs-success-bg-subtle);
    --bs-alert-border-color: var(--bs-success-border-subtle);
}

.alert-danger {
    --bs-alert-color: var(--bs-danger-text-emphasis);
    --bs-alert-bg: var(--bs-danger-bg-subtle);
    --bs-alert-border-color: var(--bs-danger-border-subtle);
}

.alert-warning {
    --bs-alert-color: var(--bs-warning-text-emphasis);
    --bs-alert-bg: var(--bs-warning-bg-subtle);
    --bs-alert-border-color: var(--bs-warning-border-subtle);
}

.alert-info {
    --bs-alert-color: var(--bs-info-text-emphasis);
    --bs-alert-bg: var(--bs-info-bg-subtle);
    --bs-alert-border-color: var(--bs-info-border-subtle);
}

.alert-light {
    --bs-alert-color: var(--bs-light-text-emphasis);
    --bs-alert-bg: var(--bs-light-bg-subtle);
    --bs-alert-border-color: var(--bs-light-border-subtle);
}

.alert-dark {
    --bs-alert-color: var(--bs-dark-text-emphasis);
    --bs-alert-bg: var(--bs-dark-bg-subtle);
    --bs-alert-border-color: var(--bs-dark-border-subtle);
}
/* Tooltip */
.tooltip-inner {
    background-color: var(--skn-tooltip-bg) !important;
    color: var(--skn-tooltip-color) !important;
}

.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
    border-top-color: var(--skn-tooltip-bg) !important;
}

.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
    border-bottom-color: var(--skn-tooltip-bg) !important;
}

.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
    border-left-color: var(--skn-tooltip-bg) !important;
}

.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
    border-right-color: var(--skn-tooltip-bg) !important;
}

.nav-link {
    color: var(--skn-primary-color);
}

    .nav-link:hover,
    .nav-link:focus {
        color: var(--skn-primary-color-dark);
    }

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--skn-primary-color-dark);
}

.nav-pills .nav-link {
    color: var(--skn-primary-color);
}

    .nav-pills .nav-link.active,
    .nav-pills .show > .nav-link {
        color: var(--skn-primary-color-dark);
    }

.nav-link-white{
    color: white;
}

    .nav-link-white:hover,
    .nav-link-white:focus {
        color: white;
    }

css.select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid var(--skn-primary-color);
    border-radius: var(--bs-border-radius);
    height: 38px;
}

.select2-container .select2-selection--single {
    height: 38px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--skn-primary-color);
    line-height: 38px;
    padding-left: 12px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--skn-primary-color) transparent transparent transparent;
    line-height: 38px;
}

.select2-dropdown {
    background-color: #fff;
    border: 1px solid var(--skn-primary-color);
}

.select2-container--default .select2-results__option {
    color: #212529;
    padding: 8px 12px;
}

.select2-container--default .select2-results__option--highlighted {
    background-color: var(--skn-primary-color) !important;
    color: var(--skn-primary-text-color) !important;
}

.select2-search--dropdown .select2-search__field {
    background-color: #fff;
    color: #212529;
    border: 1px solid var(--skn-primary-color);
}

.jstree-default .jstree-clicked {
    background: var(--skn-bg-color) !important;
}

.jstree-default .jstree-hovered {
    background: var(--skn-bg-color-light) !important;
}

.form-check-input:checked {
    background-color: var(--skn-primary-color);
    border-color: var(--skn-primary-color);
}

.form-check-input:focus {
    border-color: var(--skn-primary-color);
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--skn-primary-color) 25%, transparent);
}

.form-check-input:checked[type="checkbox"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.dropdown-item-marker input[type="checkbox"] {
    accent-color: var(--skn-primary-color);
}

.select2-sm .select2-container--default .select2-selection--single,
.select2-container--default.select2-sm .select2-selection--single {
    height: 31px;
}

    .select2-sm .select2-container--default .select2-selection--single .select2-selection__rendered,
    .select2-container--default.select2-sm .select2-selection__rendered {
        line-height: 31px;
        font-size: 0.875rem;
        padding-left: 8px;
    }

    .select2-sm .select2-container--default .select2-selection--single .select2-selection__arrow,
    .select2-container--default.select2-sm .select2-selection__arrow {
        height: 31px;
    }

.fixed-table-toolbar {
    display: flex;
    align-items: flex-end;
}

    .fixed-table-toolbar .bs-bars {
        flex: 1;
    }

    .fixed-table-toolbar .columns.float-right {
        float: none !important;
        align-self: flex-end;
    }

.not-filled {
    background-color: #ff7878 !important;
    box-shadow: none !important;
}
    .not-filled.hightlighted {
        background-color: #ff7878 !important;
        box-shadow: none !important;
    }

.fixed-table-toolbar .search input {
    height: 31px;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.cEmailSpan {
    color: var(--skn-primary-color);
}

    .cEmailSpan:hover {
        color: var(--skn-primary-color-dark);
    }

.blue-form {
    background-color: var(--skn-bg-color-light);
    padding: 20px;
}

/*input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px var(--skn-bg-color-light) inset !important;
    box-shadow: 0 0 0px 1000px var(--skn-bg-color-light) inset !important;
    -webkit-text-fill-color: black !important;
}
*/