:root {
    --odis-color-primary: #9D2235;
    --odis-color-secondary: #D7D2CB;
    --odis-color-tertiary: #332F21;
    --odis-color-quaternary: #3F6C7D;
    --odis-color-quinary: #000000;

    --odis-extra-color-lightgreen: #C4D6A4;
    --odis-extra-color-darkgreen: #1C4220;
    --odis-extra-color-red: #E04E39;
    --odis-extra-color-beige: #A47449;
    --odis-extra-color-purple: #5C4E63;
    --odis-extra-color-yellow: #F3D54E;
}

/*font-family*/
body {
    font-family: 'Roboto', sans-serif;
    @media (max-width: 767px) {
        background-color: #F2F2F2;
    }
}

a {
    color: var(--odis-color-primary);
}

/*TITLE BAR*/
.odis-title-bar {
    /*mb-md-4*/
    height: 72px;
    max-height: 72px;
    background-color: var(--odis-color-secondary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-shrink: 0;
    position: relative;

    & .btn {
        letter-spacing: 0.1rem;
    }

    & .btn-primary, .btn-primary:active, .btn-outline-primary:hover {
        background-color: var(--odis-color-primary);
        border-color: var(--odis-color-primary);
        color: #ffffff;
    }

    & .btn-outline-primary {
        color: var(--odis-color-primary);
        border-color: var(--odis-color-primary);
    }

    @media (max-width: 767px) {
        margin-bottom: 0;
        background-color: var(--odis-color-primary);
        color: #ffffff;
    }
}

.odis-title-bar__menu-button {
    /*    d-md-none me-auto*/
    display: none;
    @media (max-width: 767px) {
        display: block;
    }

    & button {
        color: #ffffff;
    }
}

.odis-title-bar__title {
    margin-left: 3rem;
    text-align: center;
    @media (max-width: 767px) {
        margin-left: 0;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

}

.odis-title-bar__filter {
    display: none;
    @media (max-width: 767px) {
        display: block;
        & button {
            color: #ffffff;
        }
    }
}

.odis-title-bar__main-buttons {
    a {
        display: none;
        @media (min-width: 768px) {
            display: block;
        }
    }

    display: none;
    @media (max-width: 767px) {
        position: absolute;
    }
}

.odis-title-bar__primary-action {
    @media (max-width: 767px) {
        display: block !important;
        position: fixed;
        z-index: 999;
        right: 10px;
        bottom: 10px;
    }
}

.odis-title-bar__primary-action-button {
    @media (max-width: 767px) {
        border-radius: 50%;
        font-size: 2rem;
        width: 4rem;
        aspect-ratio: 1 / 1;
    }
}

.grid-view {
    font-size: .875rem;

    & .dropdown-toggle::after {
        display: none;
    }

    & .dropdown-toggle {
        border: none;
    }

    & .dropdown-item {
        font-size: .875rem;

        &:active {
            background-color: var(--odis-color-primary);
            color: #ffffff;
        }
    }

    .dropstart .dropdown-toggle::before {
        display: none;
    }

    @media (max-width: 767px) {
        & table {
            & thead {
                display: none;
            }

            & tbody {
                display: flex;
                flex-direction: column;
                gap: 0.5rem;

                & th {
                    display: none;
                }

                & tr {
                    display: flex;
                    flex-direction: column;
                    position: relative;
                    background-color: #ffffff;
                    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
                    padding: 1rem;

                    & td {
                        border-bottom: 0;
                        display: none;
                        box-shadow: none;

                        &[colspan] {
                            display: flex;
                            flex-direction: column;
                            gap: 0.5rem;
                        }

                        &:nth-child(-n+3):not(:last-child) {
                            display: flex;

                            &::before {
                                content: attr(data-label) ": ";
                                padding-right: 1rem;
                                opacity: 30%;
                            }
                        }
                    }
                }
            }
        }
    }
}

.odis-table-action-cell {
    @media (max-width: 767px) {
        display: flex;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
    }
}

.filter-container {
    @media (max-width: 767px) {
        display: none;
        position: absolute;
        z-index: 10;
        width: 100%;
        background-color: #F2F2F2;
    }

    &.filter-container--open {
        @media (max-width: 767px) {
            display: flex;
            height: calc(100vh - 72px);
            transition: height 1s ease-in-out, visibility 2s ease-in-out;
        }
    }
}

.filter-container__form {
    display: flex;
    justify-content: end;
    align-items: start;

    & .btn {
        letter-spacing: 0.1rem;
    }

    & .btn-primary, .btn-primary:active, .btn-outline-primary:hover {
        background-color: var(--odis-color-primary);
        border-color: var(--odis-color-primary);
        color: #ffffff;
    }

    & .btn-outline-primary {
        color: var(--odis-color-primary);
        border-color: var(--odis-color-primary);
        @media (max-width: 767px) {
            background-color: var(--odis-color-primary);
            color: #ffffff;
        }
    }

    @media (min-width: 768px) {
        & .form-control {
            min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2));
            padding: 0.25rem 0.5rem;
            font-size: 0.875rem;
            border-radius: var(--bs-border-radius-sm);
        }

        & .form-select, .ts-control {
            padding-top: 0.25rem;
            padding-bottom: 0.25rem;
            padding-left: 0.5rem;
            font-size: 0.875rem;
            border-radius: var(--bs-border-radius-sm);
        }

        & button.btn {
            --bs-btn-padding-y: 0.25rem;
            --bs-btn-padding-x: 0.5rem;
            --bs-btn-font-size: 0.875rem;
            --bs-btn-border-radius: var(--bs-border-radius-sm);
        }
    }
}

/* PAGINATION */
.page-link, .page-link:not(.active):hover {
    color: var(--odis-color-primary);
}

.page-link.active, .active > .page-link {
    background-color: var(--odis-color-primary);
    border-color: var(--odis-color-primary);
}

/* CHECKBOX */
.form-check {
    display: flex;
    align-items: end;
    column-gap: 0.25rem;
    margin-bottom: 0;
    padding-left: 0;

    & .form-check-input {
        margin-left: 0;
        margin-top: 0;
    }

    & .form-check-label {
        line-height: 1;
    }
}

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

label.form-label {
    display: none;
    @media (min-width: 768px) {
        display: inline-block;
    }
}

/* HEADER */
.header__logo {
    height: 72px;
    padding: 0.7rem;
}

.header__nav, .offcanvas-container__nav {
    margin-top: 1rem;
}

.header__nav {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.header__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    flex-grow: 1;
}

.header__nav-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1;
}

.header__nav-list-item:last-of-type {
    margin-top: auto;
    position: relative;
}

.header__nav-badge {
    position: absolute;
    border-radius: 50%;
    background-color: var(--odis-color-primary);
    color: #ffffff;
    padding: 0.25rem;
    top: 0;
    left: 50%;
    transform: translateX(50%);
}

.header__nav-badge--white {
    position: absolute;
    border-radius: 50%;
    background-color: #ffffff;
    padding: 0.25rem;
    top: 0;
    left: 50%;
    transform: translateX(50%);
}

.header__nav--list-item-link {
    font-size: 1.5rem;
    color: var(--bs-secondary-color);

    &:hover {
        color: var(--odis-color-primary);
        transition: color .1s ease-in-out;
    }

    &.active {
        color: var(--odis-color-primary);
    }
}

.header__logout {
    /*margin-top: auto;*/
}

/* TABS */
.tab-nav__tab {
    color: var(--bs-secondary-color) !important;

    &:hover {
        color: var(--odis-color-primary) !important;
    }

    &.active {
        color: var(--odis-color-primary) !important;
    }
}

/* INPUT BOX SHADOW */
.form-control, .form-select, .form-check-input {
    &:focus {
        box-shadow: 0 0 0 0.25rem rgba(157, 34, 53, 0.25);
        border-color: var(--odis-color-primary);
    }
}

/*LOGIN PAGE*/
.login-form-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;
    font-family: 'Inter', sans-serif;
    gap: 2rem;
    padding: 0 4rem;
    @media (max-width: 767px) {
        background-color: var(--odis-color-primary);
        width: 100%;
        gap: 3rem;
        padding: 0 1rem;
        & .form-control {
            &:focus {
                box-shadow: 0 0 0 0.25rem rgba(215, 210, 203, 0.50);
                border-color: var(--odis-color-secondary);
            }

            &.is-invalid {
                border-color: #ffffff;
            }
        }

        & .invalid-feedback {
            color: #ffffff;
        }
    }
}

.login-form-container__logo {
    @media (max-width: 767px) {
        width: 100%;
    }
}

.login-form-container__form {
    display: flex;
    width: 100%;
    flex-direction: column;
    @media (max-width: 767px) {
        & label {
            color: #ffffff;
        }
    }
}

.login-form-container__form-submit-button {
    background-color: var(--odis-color-primary);
    color: #ffffff;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.1rem;
    display: block;
    width: 100%;

    &:hover {
        background-color: var(--odis-color-primary);
        color: #ffffff;
    }

    @media (max-width: 767px) {
        background-color: #ffffff;
        color: var(--odis-color-primary);
        &:hover {
            border-color: #FFFFFF;
        }
    }
}

.login-image-container {
    display: block;
    overflow: hidden;
    width: 50%;
    height: 100%;
    @media (max-width: 767px) {
        display: none;
    }
}

.login-image-container__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/*OFFCANVAS*/
#offcanvasSidebar {
    @media (max-width: 767px) {
        width: 100vw;
    }
}

.offcanvas-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    font-family: 'Poppins', sans-serif;
    height: 100%;
}

.offcanvas-container__logo {
    height: 72px;
    border-bottom: 1px solid var(--odis-color-secondary);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    @media (max-width: 767px) {
        padding: 1rem 0 1rem 1rem;
        border-bottom: none;
        justify-content: space-between;
        & i {
            font-size: 3rem;
            color: var(--odis-color-primary);
        }
    }
}

.offcanvas-container__logo-close {
    display: none;
    @media (max-width: 767px) {
        display: block;
    }
}

.offcanvas-container__nav {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
}

.offcanvas-container__nav-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-grow: 1;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;

    :last-child {
        margin-top: auto;
    }
}

.offcanvas-container__nav-list-item {
    @media (max-width: 767px) {
        padding-top: 1rem;
        padding-bottom: 1rem;
        width: 100%;
        border-bottom: 1px solid var(--odis-color-secondary);
    }
}

.offcanvas-container__nav-list-item-link {
    display: flex;
    align-items: center;
    color: var(--bs-secondary-color);
    text-decoration: none;

    & i {
        font-size: 1.5rem;
    }

    &:hover {
        color: var(--odis-color-primary);
        transition: color .1s ease-in-out;
    }

    &.active {
        color: var(--odis-color-primary);
        font-weight: 500;
    }

    @media (max-width: 767px) {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

.offcanvas-container__nav-list-item-arrow {
    display: none;
    @media (max-width: 767px) {
        display: block;
        margin-left: auto;
    }
}

.offcanvas-container__logout {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 2rem;
    padding-right: 1rem;
    @media (max-width: 767px) {
        background-color: var(--odis-color-primary);
        color: #FFFFFF;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    & .header__nav--list-item-link {
        @media (max-width: 767px) {
            color: #FFFFFF;
        }
    }
}

.offcanvas-container__logout-user {
    display: flex;
    align-items: center;
    color: var(--bs-secondary-color);

    & span {
        margin-left: 1rem;
    }
}

.offcanvas-container__logout-user-icon {
    font-size: 1.5rem;
    @media (max-width: 767px) {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 3rem;
        width: 3rem;
        border-radius: 50%;
        font-size: 2rem;
        background-color: #FFFFFF;
        color: var(--odis-color-primary);
        box-shadow: 0.1rem 0.15rem 0.25rem black;
    }
}

.offcanvas-container__logout-user-info {
    & span:nth-child(2) {
        display: none;
        @media (max-width: 767px) {
            display: block;
            font-weight: 200;
            font-size: 0.875rem;
        }
    }

    @media (max-width: 767px) {
        color: #FFFFFF;
    }
}

.offcanvas-container__collapse {
    display: none;
    @media (min-width: 768px) {
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: center;
        padding-left: 2rem;
        padding-right: 1rem;
    }
}

/*FLATPICKR overrides*/
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange {
    background: var(--odis-color-primary);
    border-color: var(--odis-color-primary);

    &:hover {
        background: var(--odis-color-primary);
        border-color: var(--odis-color-primary);
    }

    &:focus {
        background: var(--odis-color-primary);
        border-color: var(--odis-color-primary);
    }
}

.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
    box-shadow: -10px 0 0 var(--odis-color-primary);
}

#modal {
    font-family: 'Inter', sans-serif;

    & .btn-primary, .btn-primary:active, .btn-outline-primary:hover {
        background-color: var(--odis-color-primary);
        border-color: var(--odis-color-primary);
        color: #ffffff;
        text-transform: uppercase;
        font-weight: bold;
        letter-spacing: 0.1rem;
        display: block;
        width: 100%;
    }

    & .modal-header {
        justify-content: center;
        align-items: center;
    }

    & .modal-body {
        padding: 1.5rem;
    }
}

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

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

#main {
    @media (min-width: 768px) {
        width: calc(100% - 64px);
    }
}

.btn-brand-primary {
    background-color: var(--odis-color-primary) !important;
    border-color: var(--odis-color-primary) !important;
    color: #ffffff !important;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    font-weight: bold;

    &:hover {
        background-color: var(--odis-color-primary) !important;
    }
}

/* BADGES */
.badge-brand-lightgreen {
    background-color: var(--odis-extra-color-lightgreen) !important;
}

.badge-brand-darkgreen {
    background-color: var(--odis-extra-color-darkgreen) !important;
    color: #FFFFFF !important;
}

.badge-brand-red {
    background-color: var(--odis-extra-color-red) !important;
}

.badge-brand-beige {
    background-color: var(--odis-extra-color-beige) !important;
}

.badge-brand-purple {
    background-color: var(--odis-extra-color-purple) !important;
    color: #FFFFFF !important;
}

.badge-brand-yellow {
    background-color: var(--odis-extra-color-yellow) !important;
}

fieldset:disabled .ts-wrapper {
    background-color: var(--bs-secondary-bg);
}


/*TOM SELECT overrides*/
.ts-control {
    /*!* Prevent the content (selected items) from wrapping to the next line *!*/
    /*white-space: nowrap;*/

    /*!* Hide any content (selected tags/text) that overflows the single line *!*/
    /*overflow: hidden;*/

    /*!* Show an ellipsis (...) to indicate that content is truncated *!*/
    /*text-overflow: ellipsis;*/
}

.focus .ts-control {
    box-shadow: 0 0 0 0.25rem rgba(157, 34, 53, 0.25);
}

.odis-form-container {
    background-color: #fff;
    @media (min-width: 768px) {
        border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
        border-radius: var(--bs-border-radius-lg) !important;
    }
}

.accordion-button {
    background-color: var(--odis-color-secondary);

    &:focus {
        box-shadow: none;
    }

    &:not(.collapsed) {
        background-color: var(--odis-color-secondary);
        color: #000;

        &::after {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
        }
    }
}

.odis-template {
    display: none;
}

.odis-dragndrop-handle {
    cursor: move;
}

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

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

.odis-field-required {
    .form-label:after {
        content: "*";
        color: var(--odis-color-primary);
    }
}