@font-face {
    font-family: "TitilliumWeb";
    src: url("/assets/fonts/TitilliumWeb-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: italic;
}

:root {
    --primary-color: rgb(3, 100, 87);
    --secondary-color: rgb(11, 56, 50);
    --bg-primary: rgb(255, 255, 255);
    --bg-active: white;
    --bg-hover: rgb(255, 255, 255);
    --bg-focus: rgb(255, 255, 255);
    --gray-primary: rgb(221, 218, 218);
    --gray-secondary: rgb(222, 222, 222);

    --dark-primary: rgb(3, 100, 87);
    --dark-secondary: rgb(11, 56, 50);
    --bg-dark-500: rgb(25 26 27);;

    --accent-primary: rgb(3, 199, 173);
    --accent-secondary: rgb(14, 224, 196);

    --expanded: 16.875rem;
    --collapsed: 3.25rem;
    --svg: 1.125rem;
    --item: 2.25rem;
    --brad-outer: 4px;
    --frame-space: 0.5rem;
    --brad-inner: 4px;
    --font-size: 9pt;
    --font-size-sm: 7pt;
    --font-size-lg: 18pt;
    --font-size-xl: 32pt;
    --line-height: 1;
    --line-height-sm: .5;
    --line-height-lg: 1.5;
    --line-height-xl: 2.5;
    --font-weight-normal: 300;
    --font-weight-light: 200;
    --font-weight-bold: 400;

    /* JS Datatable CSS props  */
    --bs-pagination-border-radius: 4px;
    --bs-pagination-active-bg: var(--primary-color);
    --bs-pagination-active-border-color: var(--dark-primary);

    --bs-modal-header-border-width: 1px;
    --bs-modal-header-border-color: var(--gray-primary);
    --bs-modal-header-border-radius: 4px;
    --bs-modal-header-padding-y: 16px;
    --bs-modal-header-padding-x: 16px;
    --bs-modal-header-bg: var(--bg-primary);
    --bs-modal-header-color: var(--gray-primary);
    --bs-modal-header-padding: 16px;
    --bs-modal-inner-border-radius: 4px;
    --bs-modal-inner-bg: var(--bg-active);
    --bs-modal-inner-color: var(--gray-primary);
    --bs-modal-inner-padding: 16px;
    --bs-modal-footer-border-width: 1px;
    --bs-modal-footer-border-color: var(--gray-primary);
    --bs-modal-footer-border-radius: 4px;
    --bs-modal-padding: 16px;
    --bs-modal-footer-padding-x: 16px;
    --bs-modal-footer-color: var(--primary-color);
    --bs-modal-footer-padding: 16px;
    --padding: 8px;
    --margin: 4px;
}

* {
    font-family: 'TitilliumWeb';
}

body.auth {
    background-image: url("/assets/images/bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-clip: border-box;
    background-position: center;
    background-attachment: fixed;
}

.fs-sm {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
}

.fs-nm {
    font-size: var(--font-size);
    line-height: var(--line-height);
}

.fs-lg {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-lg);
}

.fs-xl {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-xl);
}

label,
button {
    cursor: pointer;
}

figure {
    margin-inline: 0;
    margin-block: 0.25rem;
}

h6,
h5,
h4,
h3,
h2,
h1,
p,
input,
span.icon svg {
    color: var(--secondary-color)
}

input {
    border-bottom: 1px solid var(--primary-color);
}

input:focus {
    color: var(--primary-color);
    outline: none;
    border-bottom: 1px solid var(--accent-primary);
    box-shadow: unset;
}

input:focus ~ div > span.icon svg,
.menu-item:hover > span.icon svg,
.menu-item:hover p.text,
.btn-contained:hover {
    color: var(--accent-primary);
}

a {
    text-decoration: none;
    color: var(--primary-color);
}

button.btn-primary {
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

button.btn-secondary {
    color: var(--primary-color);
    border: unset;
}

button.btn-primary:hover {
    background-color: var(--primary-color);
    color: var(--bg-primary);
}

button.btn-secondary:hover {
    background-color: var(--gray-primary);
}

.text-success {
    color: var(--accent-primary);
}

.cursor-pointer {
    cursor: pointer;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

div.dt-container {
    font-size: var(--font-size);
}

div.dt-container div.dt-search input {
    min-width: 160px;
    margin: 0;
    font-size: var(--font-size);
    color: var(--primary-color);
    border-radius: 0;
    border: unset;
    border-bottom: 1px solid var(--primary-color);
    outline: none;
}

div.dt-container div.dt-search input:focus {
    border-bottom: 1px solid var(--accent-primary);
}

/*.forbidden {*/
/*    height: 90vh;*/
/*    place-content: center;*/

/*    .title {*/
/*        text-align: center;*/
/*        font-size: var(--font-size-xl);*/
/*        line-height: var(--line-height-xl);*/
/*    }*/

/*    .message {*/
/*        text-align: center;*/
/*        font-weight: var(--font-weight-light);*/
/*        font-size: var(--font-size-lg);*/
/*    }*/
/*}*/

/*h6, .h6,*/
/*h5, .h5,*/
/*h4, .h4,*/
/*h3, .h3,*/
/*h2, .h2,*/
/*h1, .h1,*/
/*p {*/
/*    margin: 0;*/
/*    font-weight: var(--font-weight-normal);*/
/*    line-height: var(--line-height);*/
/*}*/

/*.title {*/
/*    font-size: var(--font-size-lg);*/
/*}*/

/*input.toggle[type="checkbox"] {*/
/*    display: none;*/
/*}*/

/*.custom_check {*/
/*    display: block;*/
/*    width: 24px;*/
/*    height: 24px;*/
/*    cursor: pointer;*/
/*    -webkit-user-select: none;*/
/*    -moz-user-select: none;*/
/*    -ms-user-select: none;*/
/*    user-select: none;*/
/*}*/

/*.custom_check input[type="checkbox"] {*/
/*    opacity: 0;*/
/*    cursor: pointer;*/
/*    height: 0;*/
/*    width: 0 !important;*/
/*}*/

/*.checkmark {*/
/*    position: absolute;*/
/*    height: 20px;*/
/*    width: 20px;*/
/*    background-color: var(--gray--secondary);*/
/*    border-radius: var(--brad-inner);*/
/*}*/

/*.custom_check input[type="checkbox"]:checked ~ .checkmark {*/
/*    background-color: var(--primary-color);*/
/*}*/

/*.checkmark:after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    display: none;*/
/*}*/

/*.custom_check input[type="checkbox"]:checked ~ .checkmark:after {*/
/*    display: block;*/
/*}*/

/*.custom_check .checkmark:after {*/
/*    left: 9px;*/
/*    top: 5px;*/
/*    width: 5px;*/
/*    height: 10px;*/
/*    border: solid white;*/
/*    border-width: 0 3px 3px 0;*/
/*    -webkit-transform: rotate(45deg);*/
/*    -ms-transform: rotate(45deg);*/
/*    transform: rotate(45deg);*/
/*}*/

/*body {*/
/*    box-sizing: border-box;*/
/*    margin: 0;*/
/*    min-block-size: 100vh;*/
/*}*/

/*.auth-container {*/
/*    height: 100vh;*/
/*    padding: calc(var(--padding) * 2);*/
/*}*/

/*.auth-container__form .form {*/
/*    max-width: 400px;*/
/*}*/

/*.vertical-sidebar {*/
/*    position: fixed;*/
/*    display: flex;*/
/*    height: fit-content;*/
/*    margin-block: 5vmin;*/
/*    z-index: 9;*/
/*}*/

/*nav {*/
/*    background: var(--bg--primary);*/
/*    display: flex;*/
/*    flex-flow: column;*/
/*    min-width: var(--collapsed);*/
/*    border-radius: var(--brad-outer);*/
/*    flex: 0 0 auto;*/
/*    transition: flex-basis 300ms ease-out;*/
/*    will-change: flex-basis;*/
/*    padding: var(--frame-space);*/
/*    box-shadow: 0 3px 5px #1233, 0 5px 17px #0003;*/
/*}*/

/*.vertical-sidebar :checked ~ nav {*/
/*    flex-basis: var(--expanded);*/
/*}*/

/*.vertical-sidebar :not(:checked) ~ nav {*/
/*    flex-basis: var(--collapsed);*/
/*}*/

/*header {*/
/*    display: flex;*/
/*    flex-flow: column;*/
/*    justify-content: center;*/
/*    gap: 0.5rem;*/
/*}*/

/*.sidebar__toggle-container {*/
/*    block-size: var(--item);*/
/*    display: flex;*/
/*    justify-content: end;*/
/*}*/

/*.nav__toggle {*/
/*    block-size: 100%;*/
/*    background: none;*/
/*    transition: all 233ms ease-in;*/
/*    border-radius: var(--brad-inner);*/
/*    outline: 2px solid transparent;*/
/*    outline-offset: -2px;*/
/*    overflow: hidden;*/
/*}*/

/*.toggle--icons {*/
/*    block-size: inherit;*/
/*    aspect-ratio: 1;*/
/*    display: inline-grid;*/
/*    place-content: center;*/
/*    grid-template-areas: "svg";*/
/*    z-index: 9;*/
/*}*/

/*.toggle-svg-icon {*/
/*    grid-area: svg;*/
/*    fill: var(--gray--primary);*/
/*    transition: fill 233ms ease-in;*/
/*}*/

/*figure {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    justify-content: center;*/
/*    container-type: inline-size;*/
/*    gap: 0.375rem;*/
/*}*/

/*.codepen-logo {*/
/*    margin-inline: auto;*/
/*    display: block;*/
/*    min-inline-size: 2.25rem;*/
/*    max-inline-size: 45cqi;*/
/*    aspect-ratio: 1;*/
/*    block-size: 100%;*/
/*    object-fit: cover;*/
/*    transition: width 100ms linear;*/
/*}*/

/*figcaption {*/
/*    text-align: center;*/
/*}*/

/*.user-id {*/
/*    font-size: 1.0625rem;*/
/*    font-weight: 500;*/
/*    margin-block-end: 0.25rem;*/
/*    color: var(--gray--secondary);*/
/*}*/

/*.user-role {*/
/*    font-size: 0.875rem;*/
/*    font-weight: 500;*/
/*    color: var(--gray--primary);*/
/*}*/

/*.sidebar__wrapper {*/
/*    --list-gap: 0.5rem;*/
/*    display: flex;*/
/*    height: 100%;*/
/*    flex-flow: column;*/
/*    justify-content: space-between;*/
/*    gap: var(--list-gap);*/
/*}*/

/*.sidebar__list {*/
/*    margin: 0;*/
/*    padding: 0;*/
/*    list-style: none;*/
/*    display: flex;*/
/*    flex-flow: column;*/
/*    gap: 0.125rem;*/
/*    overflow: hidden;*/
/*}*/

/*.sidebar__item {*/
/*    block-size: var(--item);*/
/*    border-radius: var(--brad-inner);*/
/*}*/

/*.item--heading {*/
/*    display: flex;*/
/*    align-items: end;*/
/*}*/

/*.sidebar__item--heading {*/
/*    margin-block-end: 0.4rem;*/
/*    font-size: 0.75rem;*/
/*    text-transform: uppercase;*/
/*    letter-spacing: 0.35px;*/
/*    font-weight: 500;*/
/*    color: var(--gray--primary);*/
/*    transition: color 200ms ease-in;*/
/*}*/

/*.sidebar__link {*/
/*    display: flex;*/
/*    text-decoration: none;*/
/*    block-size: 100%;*/
/*    align-items: center;*/
/*    gap: 0.5rem;*/
/*    outline: 2px solid transparent;*/
/*    border-radius: inherit;*/
/*}*/

/*.icon {*/
/*    aspect-ratio: 1;*/
/*    block-size: 100%;*/
/*    display: inline-grid;*/
/*    color: var(--gray--primary);*/
/*    svg {*/
/*        place-self: center;*/
/*        inline-size: var(--svg);*/
/*        block-size: var(--svg);*/
/*        fill: var(--gray--primary);*/
/*        color: inherit;*/
/*    }*/
/*}*/

/*.text {*/
/*    pointer-events: none;*/
/*    color: var(--gray--secondary);*/
/*    transition: color 266ms ease-out;*/
/*}*/

/*.sidebar__link:focus {*/
/*    outline: 2px solid var(--accent--secondary);*/
/*    outline-offset: -2px;*/
/*    background: var(--bg--focus);*/
/*    .icon svg {*/
/*        fill: var(--accent--primary);*/
/*    }*/
/*}*/

/*.sidebar__link:active {*/
/*    background-color: var(--bg--active);*/
/*}*/

/*aside:not(:has(:checked)) .toggle--open,*/
/*aside:has(:checked) .toggle--close {*/
/*    opacity: 0;*/
/*}*/

/*aside:not(:has(:checked)) :where(figcaption, .item--heading) {*/
/*    opacity: 0;*/
/*}*/

/*aside:has(:checked) :where(figcaption, .item--heading) {*/
/*    transition: opacity 300ms ease-in 200ms;*/
/*}*/

/*[data-tooltip]::before {*/
/*    content: attr(data-tooltip);*/
/*    position: fixed;*/
/*    translate: calc(var(--item) * 1.5) calc(var(--item) * 0.125);*/
/*    border-radius: var(--brad-inner);*/
/*    padding: 0.125rem 0.5rem;*/
/*    color: white;*/
/*    background-color: var(--bg--primary);*/
/*    box-shadow: 0 6px 12px -6px #0003;*/
/*    opacity: 0;*/
/*    pointer-events: none;*/
/*    scale: 0 0;*/
/*    z-index: 9;*/
/*    font-size: 0.75rem;*/
/*    font-weight: 500;*/
/*    transition: all 350ms ease-out;*/
/*}*/

/*.sidebar {*/
/*    width: 10vw;*/
/*    max-width: 200px;*/
/*    min-width: 200px;*/
/*    color: white;*/
/*    background-color: var(--primary-color);*/
/*    box-shadow: 0 0 3px gray;*/
/*}*/

/*.w-400 {*/
/*    width: 400px;*/
/*}*/

/*.form {*/
/*    margin: 16px;*/
/*    padding: 16px;*/
/*    border-radius: 4px;*/
/*    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(0, 0, 0, 0.1);*/
/*    background-color: white;*/
/*}*/

/*.error {*/
/*    color: maroon;*/
/*}*/

/*.success {*/
/*    color: var(--accent--primary);*/
/*}*/

/*.form-input,*/
/*input {*/
/*    margin-bottom: 16px !important;*/
/*}*/

/*input[type='password'] {*/
/*    margin-right: 0px;*/
/*}*/

/*.form-input input,*/
/*input:not([type='checkbox']) {*/
/*    width: 100% !important;*/
/*    padding: 8px !important;*/
/*    border: none !important;*/
/*    border-bottom: 1px solid black !important;*/
/*    background: transparent;*/
/*    transition: all 0.25s ease !important;*/
/*    border-radius: 0 !important;*/

/*    &:focus {*/
/*        color: var(--primary-color) !important;*/
/*        outline: none !important;*/
/*        border-bottom: 1px solid var(--primary-color) !important;*/
/*        box-shadow: unset;*/
/*    }*/
/*}*/

/*input[type='search'] {*/
/*    outline-offset: unset !important;*/
/*}*/

/*.form-input span.password-visibility {*/
/*    position: absolute;*/
/*    cursor: pointer;*/
/*    padding: 4px;*/
/*    right: 0;*/
/*    bottom: 8px;*/
/*}*/

/*a.link {*/
/*    display: block;*/
/*    text-decoration: none;*/
/*    color: var(--primary-color);*/
/*    cursor: pointer;*/
/*}*/

/*.btn {*/
/*    width: 100%;*/
/*    min-width: 220px;*/
/*    padding: var(--padding);*/
/*    border-radius: 3px;*/
/*    border: none;*/
/*    cursor: pointer;*/
/*}*/

/*.btn-contained {*/
/*    width: fit-content;*/
/*    padding: var(--padding);*/
/*    border-radius: 3px;*/
/*    border: none;*/
/*    cursor: pointer;*/
/*}*/

/*.btn-secondary {*/
/*    color: var(--dark--secondary);*/
/*    background-color: var(--gray--secondary);*/
/*    border: 1px solid var(--gray--secondary);*/
/*}*/

/*.form .btn-submit,*/
/*.btn-primary {*/
/*    border: 1px solid var(--primary-color);*/
/*    background-color: var(--bg--active);*/
/*    color: var(--primary-color);*/
/*}*/

/*.primary-color {*/
/*    color: var(--primary-color);*/
/*}*/

/*.cursor-pointer {*/
/*    cursor: pointer;*/
/*}*/

/*.toast-container {*/
/*    overflow-y: auto;*/
/*    max-height: 100vh;*/
/*}*/

/*.toast {*/
/*    border-radius: var(--brad-outer) !important;*/
/*}*/

/*.toast-header {*/
/*    border-top-left-radius: var(--brad-inner) !important;*/
/*    border-top-right-radius: var(--brad-inner) !important;*/
/*}*/

/*table thead th {*/
/*    color: var(--bg--active);*/
/*    background-color: var(--bg--primary) !important;*/
/*}*/

/*table thead th:first-child {*/
/*    border-top-left-radius: var(--brad-inner);*/
/*}*/

/*table thead th:last-child {*/
/*    border-top-right-radius: var(--brad-inner);*/
/*}*/

/*table tbody tr:last-child td:first-child {*/
/*    border-bottom-left-radius: var(--brad-inner);*/
/*}*/

/*table tbody tr:last-child td:last-child {*/
/*    border-bottom-right-radius: var(--brad-inner);*/
/*}*/

/*table thead th .dt-column-title {*/
/*    font-weight: var(--font-weight-bold) !important;*/
/*}*/

/*.dt-paging nav {*/
/*    background-color: var(--bg--active) !important;*/
/*    box-shadow: unset;*/
/*}*/

/*.page-link.active, .active > .page-link  {*/
/*    color: var(--bg--active);*/
/*    background-color: var(--primary-color);*/
/*}*/

/*div.dt-container {*/
/*    padding: 8px;*/
/*}*/

/*div.dt-container div.dt-search label {*/
/*    display: none;*/
/*}*/

/*div.dt-container div.dt-search input {*/
/*    margin-left: unset !important;*/
/*}*/

/*.modal-container {*/
/*    border-radius: var(--brad-inner);*/
/*    vertical-align: top;*/
/*    padding: 4px;*/
/*}*/

/*.modal-footer {*/
/*    padding: var(--bs-modal-padding) !important;*/
/*}*/

/*.bg-gray-500 {*/
/*    background-color: var(--bg-dark-500) !important;*/
/*}*/

/*@media (hover: hover) {*/
/*    .custom_check:hover input[type="checkbox"] ~ .checkmark {*/
/*        background-color: var(--gray--primary);*/
/*    }*/

/*    .nav__toggle:hover {*/
/*        outline: 2px solid var(--accent--primary);*/
/*    }*/

/*    .toggle--icons:hover .toggle-svg-icon {*/
/*        fill: var(--dark--primary);*/
/*    }*/

/*    .sidebar__list:has(.sidebar__link):hover .sidebar__item--heading {*/
/*        color: var(--gray--secondary);*/
/*    }*/

/*    .sidebar__link:hover {*/
/*        background: var(--bg--hover);*/
/*        .icon svg {*/
/*            fill: var(--accent--primary);*/
/*            color: var(--dark--primary);*/
/*        }*/
/*        .text {*/
/*            color: var(--dark--primary);*/
/*        }*/
/*    }*/

/*    aside:not(:has(:checked))*/
/*    .sidebar__link:where(:hover, :focus-visible)[data-tooltip]::before {*/
/*        opacity: 1;*/
/*        scale: 1;*/
/*    }*/

/*    .btn-contained:hover {*/
/*        color: var(--primary-color);*/
/*    }*/

/*    .btn-secondary:hover {*/
/*        color: var(--dark--secondary);*/
/*        border: 1px solid var(--primary-color) !important;*/
/*        background-color: var(--gray--secondary);*/
/*    }*/

/*    .form .btn-submit,*/
/*    .btn-primary {*/
/*        &:hover {*/
/*            color: var(--bg--active);*/
/*            background-color: var(--primary-color);*/
/*        }*/
/*    }*/
/*}*/