:root {
    --light-blue: #97C4C9;
    --dark-blue: #2A4D4f;
    --light-green: #BFDDBB;
    --dark-green: #104925;
    --light-sand: #E7CF8C;
    --dark-sand: #4C402A;
    --signal: #D03D0C;
}

/* Background color classes */
.bg-light-blue {
    background-color: var(--light-blue) !important;
}

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

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

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

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

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

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

/* Background color classes with gradient */
.bg-gradient-light-blue {
    background: linear-gradient(90deg, var(--light-blue) 50%, hsla(186, 33%, 50%, 1) 100%) !important;
}

.bg-gradient-light-green {
    background: linear-gradient(90deg, var(--light-green) 50%, hsla(115, 35%, 71%, 1) 100%) !important;
}

.bg-gradient-light-sand {
    background: linear-gradient(90deg, var(--light-sand) 50%, hsla(45, 68%, 64%, 1) 100%) !important;
}

.bg-gradient-dark-blue {
    background: linear-gradient(90deg, var(--dark-blue) 50%, hsla(182, 32%, 34%, 1) 100%) !important;
}

.bg-gradient-dark-green {
    background: linear-gradient(90deg, var(--dark-green) 50%, hsla(143, 68%, 27%, 1) 100%) !important;
}

.bg-gradient-dark-sand {
    background: linear-gradient(90deg, var(--dark-sand) 50%, hsla(38, 29%, 33%, 1) 100%) !important;
}

/* Text color classes */
.text-light-blue {
    color: var(--light-blue) !important;
}

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

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

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

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

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

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


/* Additional text color utility classes */
.light-blue {
    color: var(--light-blue) !important;
}

.dark-blue {
    color: var(--dark-blue) !important;
}

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

.dark-green {
    color: var(--dark-green) !important;
}

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

.dark-sand {
    color: var(--dark-sand) !important;
}

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


/* BUTTONS */
.hk-btn-outline-primary {
    box-shadow: none;
}

.hk-btn-outline-primary:hover:not(.active) {
    background-color: transparent;
    opacity: .75;
    box-shadow: none;
    color: var(--dark-blue);
}

.hk-btn-outline-primary {
    color: var(--dark-blue);
    border-color: var(--dark-blue);
}

.hk-btn-sandy-primary {
    background-color: var(--light-sand);
    color: var(--dark-sand);
}

.hk-btn-sandy-primary:focus,
.hk-btn-sandy-primary:active {
    background-color: var(--light-sand) !important;
    color: var(--dark-sand) !important;
    opacity: 0.75;
}

.hk-btn-sandy-primary:hover:not(.active) {
    background-color: var(--light-sand);
    opacity: .75;
    box-shadow: none;
    color: var(--dark-sand);
}

.hk-btn-sandy-primary:disabled {
    background-color: var(--light-sand);
    color: var(--dark-sand);
    opacity: 0.5;
    cursor: not-allowed;
}

.hk-btn-sandy-secondary {
    background-color: var(--dark-sand);
    color: var(--light-sand);
}

.hk-btn-sandy-secondary:focus,
.hk-btn-sandy-secondary:active {
    background-color: var(--dark-sand) !important;
    color: var(--light-sand) !important;
    opacity: 0.75;
}

.hk-btn-sandy-secondary:hover:not(.active) {
    background-color: var(--dark-sand);
    opacity: .75;
    box-shadow: none;
    color: var(--light-sand);
}

.hk-btn-sandy-secondary:disabled {
    background-color: var(--dark-sand);
    color: var(--light-sand);
    opacity: 0.5;
    cursor: not-allowed;
}

.hk-btn-blue-primary {
    background-color: var(--light-blue);
    color: var(--dark-blue);
}

.hk-btn-blue-primary:focus,
.hk-btn-blue-primary:active {
    background-color: var(--light-blue) !important;
    color: var(--dark-blue) !important;
    opacity: 0.75;
}

.hk-btn-blue-primary:hover:not(.active) {
    background-color: var(--light-blue);
    opacity: .75;
    box-shadow: none;
    color: var(--dark-blue);
}

.hk-btn-blue-primary:disabled {
    background-color: var(--light-blue);
    color: var(--dark-blue);
    opacity: 0.5;
    cursor: not-allowed;
}

.hk-btn-blue-secondary {
    background-color: var(--dark-blue);
    color: var(--light-blue);
}

.hk-btn-blue-secondary:focus,
.hk-btn-blue-secondary:active {
    background-color: var(--dark-blue) !important;
    color: var(--light-blue) !important;
    opacity: 0.75;
}

.hk-btn-blue-secondary:hover:not(.active) {
    background-color: var(--dark-blue);
    opacity: .75;
    box-shadow: none;
    color: var(--light-blue);
}

.hk-btn-blue-secondary:disabled {
    background-color: var(--dark-blue);
    color: var(--light-blue);
    opacity: 0.5;
    cursor: not-allowed;
}

/* BUTTONS END */

.show-page-info-header {
    margin-top: 16px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #344767;
    margin-left: 4px;
}

.modal-dialog.modal-dialog-medium {
    max-width: 33vw;
}

@media screen and (max-width: 767px) {
    .modal-dialog.modal-dialog-medium {
        max-width: 100vw;
    }
}

.modal-dialog.modal-dialog-large {
    max-width: 70vw;
}

@media screen and (max-width: 767px) {
    .modal-dialog.modal-dialog-large {
        max-width: 100vw;
    }
}

/* FlatPicker theme */
.flatpickr-calendar .flatpickr-day.today {
    background: var(--dark-sand) !important;
    color: var(--light-sand) !important;
}

.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.startRange,
.flatpickr-calendar .flatpickr-day.endRange {
    background: var(--light-sand) !important;
    color: var(--dark-sand) !important;
}

.flatpickr-calendar .flatpickr-day.inRange {
    background: var(--light-sand) !important;
    color: var(--dark-sand) !important;
    border-radius: 0;
    -webkit-box-shadow: -5px 0 0 var(--light-sand), 5px 0 0 var(--light-sand);
    box-shadow: -5px 0 0 var(--light-sand), 5px 0 0 var(--light-sand);
}

.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)) {
    -webkit-box-shadow: -5px 0 0 var(--light-sand), 5px 0 0 var(--light-sand);
    box-shadow: -5px 0 0 var(--light-sand), 5px 0 0 var(--light-sand);
}