@import url("sidebar.css");
@import url("footer.css");
@import url("table.css");

:root,
[data-bs-theme=light] {
    --bs-body-font-family: "henriette", sans-serif;
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #212529;
    --bs-body-color-rgb: 33, 37, 41;
    background-color: #E1E8ED;
    --bs-body-bg-rgb: 255, 255, 255;

    --bs-primary: #B79000;
    --bs-primary-rgb: 183, 144, 0;
    --bs-secondary: #014960;
    --bs-secondary-rgb: 1, 73, 96;

    --bs-tertiary: #DF3212;
    --bs-tertiary-dark: #BF2E13;

    --bs-primary-text: var(--bs-primary);
    --bs-primary-bg-subtle: rgba(var(--bs-secondary-rgb), 25%);
    --bs-primary-border-subtle: var(--bs-secondary);
    --bs-link-color: var(--bs-secondary);
    --bs-link-color-rgb: var(--bs-secondary-rgb);
    --bs-link-hover-color: var(--bs-primary);
    --bs-link-hover-color-rgb: var(--bs-primary-rgb);
    --bs-form-invalid-color: #dc3545;
}

/* Sidebar vars */
:root {
    --sidebar-width: 250px;
    --z-fixed: 100;
}

html,
body {
/*    height: 100%;*/
    min-height: 100vh;
    overflow-x: hidden;
}

body {
    background: transparent;
    transition: padding 0.5s;
    position: relative;
    display: flex;
    flex-direction: column;
    padding-right: 0!important;
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
    font-family: "oswald", oswald, sans-serif;
}

main[role="main"] {
    min-height: 300px;
}

.bg-green {
    background-color: #93C47D;
}
.bg-amber {
    background-color: #F8C57C;
}
.bg-red {
    background-color: #D9544D;
}


/* FORM */
div:not(.form-floating) > label {
    font-weight: 700;
}
.form-control,
.form-control:focus {
    background-color: #FFF;
}
    .form-control:focus {
        border-color: rgba(var(--bs-primary-rgb),.25);
        box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb),.25);
    }

.form-label.required::after,
.required-label::after {
    content: "*";
    font-weight: bold;
    color: red;
    padding-left: 5px;
}

.field-validation-error {
    color: red;
}

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

/* BUTTONS */
.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-secondary);
    --bs-btn-hover-border-color: var(--bs-secondary);
    --bs-btn-active-bg: var(--bs-secondary);
    --bs-btn-active-border-color: var(--bs-secondary);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

/*
*   STYLING FOR PageTitle
*/
.page-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    flex-wrap: wrap;
}

.page-title h1 {
    display: inline-block;
}

.page-title .header-icons > a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
}

.page-title .back-btn {
    padding: 10px;
    background-color: rgba(215, 215, 215, 1);
    border-radius: 5px;
    color: white;
}

.page-title .back-btn:hover {
    background-color: rgba(200, 200, 200, 1);
}

.page-title .back-btn i::before {
    font-weight: 600 !important;
    font-size: 1.3rem;
    vertical-align: -0.2em;
}
.page-title .select2 {
    margin-top: 5px;
    width: 100%;
    max-width: 500px;
}
.select2-results__group .row {
    margin: 0;
}
.select2-results__option .row {
    word-wrap: break-word;
}


/* 
 *   STYLING FOR Accordions & sorting
*/
.accordion-button {
    background-color: var(--bs-secondary) !important;
    color: white !important;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
}
    span.accordion-button:not(.collapsed)::after {
        display: none;
    }

    .accordion-button::after {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    }

    .accordion-button:focus {
        border-color: var(--bs-secondary);
        box-shadow: 0 0 0 0.25rem rgba(var(--bs-secondary-rgb), 25%)
    }

.tab-accordion .accordion-button {
    border-radius: 0 5px 0 0 !important;
}

.nav-tabs .nav-link {
    color: var(--bs-nav-tabs-link-active-color) !important;
    background-color: var(--bs-nav-tabs-link-active-bg) !important;
    border-color: var(--bs-nav-tabs-link-active-border-color) !important;
}

    .nav-tabs .nav-item.show .nav-link,
    .nav-tabs .nav-link.active {
        color: var(--bs-primary) !important;
    }

.nav-tabs .nav-item + .nav-item {
    margin-left: 3px;
}

/* HOVER ANIMATION */

.hvr-pulse {
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
}
.hvr-pulse:hover,
.hvr-pulse:focus,
.hvr-pulse:active {
    -webkit-animation-name: hvr-pulse;
    animation-name: hvr-pulse;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@keyframes hvr-pulse {
    25% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    75% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }
}


.datepicker-cell.today.focused:not(.selected) {
    background-color: var(--bs-secondary);
}


.spinner {
    width: 11.2px;
    height: 11.2px;
    border-radius: 11.2px;
    box-shadow: 28px 0px 0 0 rgba(1,73,96,0.2), 22.7px 16.5px 0 0 rgba(1,73,96,0.4), 8.68px 26.6px 0 0 rgba(1,73,96,0.6), -8.68px 26.6px 0 0 rgba(1,73,96,0.8), -22.7px 16.5px 0 0 #014960;
    animation: spinnerdiv 1s infinite linear;
    position: relative;
    margin: 50px auto;
}

    .spinner.hidden {
        display: none;
    }

    @keyframes spinnerdiv {
        to {
        transform: rotate(360deg);
    }
}