:root {
    --primary: #EEBD27;
    --primary-light: #f4d67b;
    --primary-dark: #e2ae12;
    --primary-disabled: #f9e8b4;

    --secondary: #888aa5;
    --secondary-light: #afafc8;
    --secondary-dark: #454656;
    --secondary-disabled: #dce1f4;

    --info: #6d92b2;
    --info-light: #94afc7;
    --info-dark: #2F546A;
    --info-disabled: #cad7e3;

    --danger: #da613f;
    --danger-light: #e58e76;
    --danger-dark: #bc4524;
    --danger-disabled: #f5d7dc;

    --warning: #d4b99b;
    --warning-light: #e7d7c6;
    --warning-dark: #b68854;
    --warning-disabled: #f5dcc3;

    --success: #68a68a;
    --success-light: #98c3b0;
    --success-dark: #4b8169;
    --success-disabled: #d7fae6;

    --purple: #313A72;
    --purple-light: #4956ab;
    --purple-dark: #1f2447;
    --purple-disabled: #7e88c8;

    --petrol: #456882;
    --petrol-light: #5f8aab;
    --petrol-dark: #314a5e;
    --petrol-disabled: #94b1c7;

    --noir: #373741;
    --noir-light: #6e6e7d;
    --noir-dark: #23232d;
    --noir-disabled: #aaaabe;

    --grey: #d2d2d2;
}

/* TEXT */
.text-primary {
    color: var(--primary) !important;
}

.text-secondary {
    color: var(--secondary) !important;
}

.text-success {
    color: var(--success) !important;
}

.text-danger {
    color: var(--danger) !important;
}

.text-info {
    color: var(--info) !important;
}

.text-warning {
    color: var(--warning) !important;
}

.text-purple {
    color: var(--purple) !important;
}

.text-petrol {
    color: var(--petrol) !important;
}

.text-noir {
    color: var(--noir) !important;
}

.text-grey {
    color: var(--grey) !important;
}

.text-secondary-light {
    color: var(--secondary-light) !important;
}

.text-bg-badge {
    color: var(--purple) !important;
    background-color: #f7f7f7;
}

.text-bg-noir {
    color: #f7f7f7;
    background-color: var(--noir) !important;
}

.text-bg-badge-light {
    color: var(--purple) !important;
    background-color: #fff;
}

.text-bg-info {
    color: #efefef !important;
    background-color: var(--info) !important;
}

.text-bg-success {
    color: #efefef !important;
    background-color: var(--success) !important;
}

.text-bg-warning {
    color: #efefef !important;
    background-color: var(--warning) !important;
}

.text-bg-danger {
    color: #efefef !important;
    background-color: var(--danger) !important;
}

.text-bg-primary {
    color: #efefef !important;
    background-color: var(--primary) !important;
}

.text-bg-petrol {
    color: #efefef !important;
    background-color: var(--petrol) !important;
}

.text-primary-bg-white {
    color: var(--primary) !important;
    background-color: #efefef !important;
}

.text-petrol-bg-white {
    color: var(--petrol) !important;
    background-color: #efefef !important;
}

.text-info-bg-white {
    color: var(--info) !important;
    background-color: #efefef !important;
}

.text-warning-bg-white {
    color: var(--warning) !important;
    background-color: #efefef !important;
}

.text-danger-bg-white {
    color: var(--danger) !important;
    background-color: #efefef !important;
}

.text-success-bg-white {
    color: var(--success) !important;
    background-color: #efefef !important;
}

.text-bg-outline {
    color: var(--purple) !important;
    background-color: #e2e5e8 !important;
}

.text-bg-dark .text-purple {
    color: white !important;
}

.text-bg-light .text-purple {
    color: var(--purple) !important;
}

/* BUTTON */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--primary-dark);
    --bs-btn-hover-border-color: var(--primary-dark);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--primary-light);
    --bs-btn-active-border-color: var(--primary-light);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--primary-disabled);
    --bs-btn-disabled-border-color: var(--primary-disabled);
}

.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--secondary);
    --bs-btn-border-color: var(--secondary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--secondary-dark);
    --bs-btn-hover-border-color: var(--secondary-dark);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--secondary-light);
    --bs-btn-active-border-color: var(--secondary-light);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--secondary-disabled);
    --bs-btn-disabled-border-color: var(--secondary-disabled);
}

.btn-warning {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--warning);
    --bs-btn-border-color: var(--warning);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--warning-dark);
    --bs-btn-hover-border-color: var(--warning-dark);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--warning);
    --bs-btn-active-border-color: var(--warning);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--warning-disabled);
    --bs-btn-disabled-border-color: var(--warning-disabled);
}

.btn-purple {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--purple);
    --bs-btn-border-color: var(--purple);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--purple-dark);
    --bs-btn-hover-border-color: var(--purple-dark);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--purple-light);
    --bs-btn-active-border-color: var(--purple-light);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--purple-disabled);
    --bs-btn-disabled-border-color: var(--purple-disabled);
}

.btn-petrol {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--petrol);
    --bs-btn-border-color: var(--petrol);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--petrol-dark);
    --bs-btn-hover-border-color: var(--petrol-dark);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--petrol-light);
    --bs-btn-active-border-color: var(--petrol-light);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--petrol-disabled);
    --bs-btn-disabled-border-color: var(--petrol-disabled);
}

.btn-outline-primary {
    --bs-btn-color: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--primary-dark);
    --bs-btn-hover-border-color: var(--primary-dark);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--primary);
    --bs-btn-active-border-color: var(--primary);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--primary-disabled);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--primary-disabled);
    --bs-gradient: none;
}

.btn-outline-warning {
    --bs-btn-color: var(--warning);
    --bs-btn-border-color: var(--warning);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--warning-dark);
    --bs-btn-hover-border-color: var(--warning-dark);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--warning);
    --bs-btn-active-border-color: var(--warning);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--warning-disabled);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--warning-disabled);
    --bs-gradient: none;
}

.btn-outline-success {
    --bs-btn-color: var(--success);
    --bs-btn-border-color: var(--success);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--success-dark);
    --bs-btn-hover-border-color: var(--success-dark);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--success);
    --bs-btn-active-border-color: var(--success);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--success-disabled);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--success-disabled);
    --bs-gradient: none;
}

.btn-outline-info {
    --bs-btn-color: var(--info);
    --bs-btn-border-color: var(--info);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--info-dark);
    --bs-btn-hover-border-color: var(--info-dark);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--info);
    --bs-btn-active-border-color: var(--info);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--info-disabled);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--info-disabled);
    --bs-gradient: none;
}

.btn-outline-danger {
    --bs-btn-color: var(--danger);
    --bs-btn-border-color: var(--danger);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--danger-dark);
    --bs-btn-hover-border-color: var(--danger-dark);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--danger);
    --bs-btn-active-border-color: var(--danger);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--danger-disabled);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--danger-disabled);
    --bs-gradient: none;
}

.btn-outline-purple {
    --bs-btn-color: var(--purple);
    --bs-btn-border-color: var(--purple);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--purple-dark);
    --bs-btn-hover-border-color: var(--purple-dark);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--purple);
    --bs-btn-active-border-color: var(--purple);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--purple-disabled);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--purple-disabled);
    --bs-gradient: none;
}

.btn-outline-petrol {
    --bs-btn-color: var(--petrol);
    --bs-btn-border-color: var(--petrol);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--petrol-dark);
    --bs-btn-hover-border-color: var(--petrol-dark);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--petrol);
    --bs-btn-active-border-color: var(--petrol);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--petrol-disabled);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--petrol-disabled);
    --bs-gradient: none;
}

/* BACKGROUND */
.bg-primary {
    background-color: var(--primary) !important;
}

.bg-secondary {
    background-color: var(--secondary) !important;
}

.bg-success {
    background-color: var(--success) !important;
}

.bg-danger {
    background-color: var(--danger) !important;
}

.bg-warning {
    background-color: var(--warning) !important;
}

.bg-info {
    background-color: var(--info) !important;
}

.bg-petrol {
    background-color: var(--petrol) !important;
}

/* SHADOW */
.shadow-primary {
    box-shadow: 0 0 1em 0.1em var(--primary);
}

.shadow-secondary {
    box-shadow: 0 0 1em 0.1em var(--secondary);
}

.shadow-success {
    box-shadow: 0 0 1em 0.1em var(--success);
}

.shadow-danger {
    box-shadow: 0 0 1em 0.1em var(--danger);
}

.shadow-warning {
    box-shadow: 0 0 1em 0.1em var(--warning);
}

.shadow-info {
    box-shadow: 0 0 1em 0.1em var(--info);
}

/* DOT */
.dot-primary {
    border-color: var(--primary);
    background: var(--primary-light) !important;
}

.dot-secondary {
    border-color: var(--secondary);
    background: var(--secondary-light) !important;
}

.dot-success {
    border-color: var(--success);
    background: var(--success-light) !important;
}

.dot-danger {
    border-color: var(--danger);
    background: var(--danger-light) !important;
}

.dot-warning {
    border-color: var(--warning);
    background: var(--warning-light) !important;
}

.dot-info {
    border-color: var(--info);
    background: var(--info-light) !important;
}

.dot-muted {
    border-color: #6c757d;
    background: #7B6E63 !important;
}
/* Circle */
.circle-primary {
    border-color: var(--primary);
}

.circle-secondary {
    border-color: var(--secondary);
}

.circle-success {
    border-color: var(--success);
}

.circle-danger {
    border-color: var(--danger);
}

.circle-warning {
    border-color: var(--warning);
}

.circle-info {
    border-color: var(--info);
}

.circle-muted {
    border-color: #6c757d;
}
/********************* PAGE LINK *********************/
.page-link.active, .active > .page-link {
    background-color: var(--primary);
    border-color: var(--primary);
}

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

.page-link:hover {
    color: var(--petrol);
    background-color: var(--primary-light);
    border-color: var(--primary-light);
}

/********************* DATEPICKER *********************/
.datepicker table tr td.day:hover, .datepicker table tr td.focused {
    background: #2b3035;
}

.datepicker table tr td.today {
    color: var(--petrol);
    background-color: var(--primary-light);
    border-color: var(--primary-light);

}

.datepicker table tr td.active,
.datepicker table tr td.active.active
{
    color: var(--primary-light);
    background-color: var(--petrol);
    border-color: var(--petrol);

}

.datepicker table tr td.active:hover,
.datepicker table tr td.active.active:hover
{
    color: var(--primary);
    background-color: var(--petrol-dark);
    border-color: var(--petrol-dark);

}

.datepicker table tr td.today:hover {
    color: var(--petrol);
    background-color: var(--primary);
    border-color: var(--primary);
}

/********************* DROPDOWN *********************/
.dropdown-item.active, .dropdown-item:active {
    color: var(--petrol);
    text-decoration: none;
    background-color: var(--primary);
}

.dropdown-menu {
    color: #d2d2d2;
    border-color: #d2d2d2;
    background-color: #212529;
}

.dropdown-item:hover, .dropdown-item:focus {
    color: #2b3035;
    background-color: #d2d2d2;
}
.dropdown-menu > li:hover {
    background-color: #2b3035;
}

.dropdown-item {
    color: #d2d2d2;
}

/********************* SELECT2 *********************/
.select2-container--krajee-bs5 .select2-results__option--highlighted[aria-selected] {
    background-color: var(--primary);
    color: var(--petrol);
}

li.select2-results__option[aria-selected]:has(> span.root):hover,
li.select2-results__option[aria-selected]:has(> span.level1):hover,
li.select2-results__option[aria-selected]:has(> span.level2):hover,
li.select2-results__option[aria-selected]:has(> span.level3):hover,
li.select2-results__option[aria-selected]:has(> span.level4):hover,
li.select2-results__option[aria-selected]:has(> span.level5):hover {
    color: var(--petrol);
    background-color: var(--primary);
    border-color: var(--primary);
}

li.select2-results__option[aria-selected="true"]:has(> span.root) {
    background-color: var(--primary-dark);
    color: var(--petrol);
}

li.select2-results__option[aria-selected]:has(> span.root) {

}

li.select2-results__option[aria-selected]:has(> span.level1) {
    background-color: #f5f5f5;
    padding-left: 20px;
}

li.select2-results__option[aria-selected]:has(> span.level2) {
    background-color: #ebebeb;
    padding-left: 40px;
}

li.select2-results__option[aria-selected]:has(> span.level3) {
    background-color: #e0e0e0;
    padding-left: 60px;
}

li.select2-results__option[aria-selected]:has(> span.level4) {
    background-color: #d6d6d6;
    padding-left: 80px;
}

li.select2-results__option[aria-selected]:has(> span.level5) {
    background-color: #cccccc;
    padding-left: 100px;
}

.select2-container--krajee-bs5 .select2-results__option.select2-results__option--selected,
.select2-container--krajee-bs5 .select2-results__option[aria-selected="true"],
li.select2-results__option[aria-selected="true"]:has(> span.level1),
li.select2-results__option[aria-selected="true"]:has(> span.level2),
li.select2-results__option[aria-selected="true"]:has(> span.level3),
li.select2-results__option[aria-selected="true"]:has(> span.level4),
li.select2-results__option[aria-selected="true"]:has(> span.level5)
{
    background-color: var(--primary-light);
    color: var(--petrol);
}


.select2-container--krajee-bs5 .select2-results__option.select2-results__option--selected:hover,
.select2-container--krajee-bs5 .select2-results__option[aria-selected="true"]:hover,
li.select2-results__option[aria-selected="true"]:hover:has(> span.level1),
li.select2-results__option[aria-selected="true"]:hover:has(> span.level2),
li.select2-results__option[aria-selected="true"]:hover:has(> span.level3),
li.select2-results__option[aria-selected="true"]:hover:has(> span.level4),
li.select2-results__option[aria-selected="true"]:hover:has(> span.level5)
{
    background-color: var(--primary);
    color: var(--petrol);
}

.select2-container--krajee-bs5 .select2-results__group {
    background-color: var(--info);
    color: #dee2e6;
    text-shadow: none;
}

/********************* RadioList *********************/

.bs5-form-check.form-check-input:checked + label.btn-outline-petrol,
.bs5-form-check.form-check-input:focus + label.btn-outline-petrol {
    color: #dee2e6;
    background-color: var(--petrol);
    border-color: var(--petrol);
}

.bs5-form-check.form-check-input:checked + label.btn-outline-primary,
.bs5-form-check.form-check-input:focus + label.btn-outline-primary {
    color: #dee2e6;
    background-color: var(--primary);
    border-color: var(--primary);
}

/********************* Card *********************/
.card-project:hover {
    background-color: var(--primary);
}

.card-header-tabs .nav-link.active {
    background-color: var(--primary);
    border-bottom-color: var(--primary);
    color: white;
}

.card-header-tabs .nav-link {
    color: var(--petrol);
}

.card-header-tabs .nav-link:hover {
    background-color: var(--primary-light);
    color: var(--petrol);
}

/********************* Nav-pills *********************/
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: var(--petrol);
    background-color: var(--primary);
}

.nav-pills > .nav-item > .nav-link {
    color: var(--petrol);
}

.nav-pills > .nav-item > .nav-link:hover {
    background-color: var(--primary-light);
}

/********************* Nav-bar *********************/
.navbar-toggler {
    color: #d2d2d2;
    border-color: #d2d2d2;
}

.navbar-toggler:hover, .navbar-toggler:focus {
    color: #363643;
    border-color: #363643;
    background-color: #d2d2d2;
    text-decoration: none;
    outline: 0;
    box-shadow: none;
}