/* defns */
:root {
    --bs-border-radius: 0.75rem;
    --bs-border-radius-sm: 0.5rem;
    --bs-link-color-rgb: 19, 92, 53;
    --bs-link-hover-color-rgb: 5, 23, 13;
    --table-cell-padding: 10px;
    --table-sm-cell-padding: 5px;
    --header-height: 3rem;
    --footer-height: 3rem;
    --nav-width: 68px;
    --nav-width-expanded: 200px;
    /* dark theme */
    --bs-dark: #3f2a56;
    --bs-dark-rgb: 63,42,86;
    --bs-darker: #251932;
    --bs-darker-rgb: 37, 25, 50;
    --bs-primary: #F6BE00;
    --bs-primary-rgb: 246,190,0;
}

@media screen and (max-width: 576px) {
    :root {
        --header-height: 4rem;
    }
}

body {
    /*--bs-body-bg: #eff3fc;*/
    --bs-body-bg: #ebf2f3;
}

.body-pd {
    padding-left: calc(var(--nav-width) + 0rem)
}

header.body-pd {
    padding-left: calc(var(--nav-width) + 1rem)
}

body.headerless {
    margin-top: 0;
    padding-left: 0;
}

.bg-darker {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-darker-rgb),var(--bs-bg-opacity)) !important;
}

.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: #e6b100;
    --bs-btn-hover-border-color: #e6b100;
    --bs-btn-active-bg: #e6b100;
    --bs-btn-active-border-color: #e6b100;
    --bs-btn-color: var(--bs-dark);
    --bs-btn-hover-color: var(--bs-dark);
    --bs-btn-active-color: var(--bs-dark);
}

.btn-dark {
    --bs-btn-bg: var(--bs-dark);
    --bs-btn-border-color: var(--bs-dark);
    --bs-btn-hover-bg: var(--bs-darker);
    --bs-btn-hover-border-color: var(--bs-darker);
    --bs-btn-active-bg: var(--bs-darker);
    --bs-btn-active-border-color: var(--bs-darker);
    --bs-btn-color: var(--bs-white);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-active-color: var(--bs-white);
}

.card {
    --bs-card-bg: #ffffff;
}

.dropdown-menu {
    --bs-dropdown-bg: #ffffff;
    --bs-dropdown-link-active-bg: var(--bs-dark);
}

.form-select, .form-input, .form-control, .form-control:focus, .form-check-input {
    --form-bg: #ffffff;
    --card-form-bg: #f9f9f9;
}

.nav {
    --bs-nav-link-color: #000000;
}

.navbar {
    --bs-navbar-brand-padding-y: 0;
}

.nav-tabs {
    --bs-nav-tabs-link-active-bg: #ffffff;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--bs-dark);
}

.text-bg-dark > .nav-pills, .bg-dark > .nav-pills {
    --bs-nav-pills-link-active-bg: var(--bs-primary);
}

.offcanvas {
    --bg-offcanvas-bg: #ffffff;
}

.table {
    --bs-table-bg: #ffffff;
    --bs-table-striped-bg: rgba(var(--bs-emphasis-color-rgb), 0.03);
}
/* defns */

html {
    font-size: 14px;
}

@media (min-width: 576px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
    transition: .5s;
}

body:not(.headerless) > .container.main {
    margin: var(--header-height) 0 10px 0;
}

@media screen and (min-width: 576px) {
    body {
        padding-left: var(--nav-width);
    }

    body:not(.headerless) > .container.main {
        margin: calc(var(--header-height) + 1rem) 0 0 0;
        padding-bottom: calc(var(--footer-height) + 0.5rem);
    }
}

.container.main > .row {
    margin-left: 0;
    margin-right: 0;
}

a {
    text-decoration: none;
}

*::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0);
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: rgba(200,200,200, 0);
}

*::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgba(133,145,155, 0.3);
    width: 5px;
    height: 5px;
}

@media screen and (max-width: 576px) {
    *::-webkit-scrollbar {
        width: 0px;
        height: 0px;
        background-color: rgba(200,200,200, 0);
    }

    *::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-color: rgba(133,145,155, 0);
        width: 0px;
        height: 0px;
    }
}

.l-navbar {
    position: fixed;
    top: 0;
    left: -30%;
    width: var(--nav-width);
    height: 100vh;
    background-color: var(--first-color);
    padding: .5rem 0 0 0;
    transition: .5s;
    z-index: 100;
}

    .l-navbar.show {
        left: 0;
    }

/* Form Validation
-------------------------------------------------- */
input.input-validation-error, select.input-validation-error, textarea.input-validation-error {
    border-color: #FF0000;
}

label.required {
    /*font-weight: bold;*/
}

label.required::after {
    content: " *";
    color: #FF0000;
}




/* custom */

.active {
    color: var(#FFFFFF)
}

    .active::before {
        content: '';
        position: absolute;
        left: 0;
        width: 2px;
        height: 32px;
        background-color: var(#FFFFFF)
    }

.container {
    max-width: 100%;
}

footer {
    position: fixed !important;
    bottom: 0;
    width: 100%;
    height: var(--footer-height);
    line-height: var(--footer-height);
}

@media only screen and (max-width: 576px) {
    .footer {
        position: relative !important;
    }
}

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

.navbar-brand img {
    max-height: 40px;
}

.breadcrumb {
    display: block;
    background-color: transparent;
    color: rgb(200,200,200);
    padding-bottom: 10px;
    font-size: 20px;
}

.breadcrumb .breadcrumb-menu {
    margin-top: -4px;
}

.breadcrumb .d-flex {
    /*white-space: pre-wrap;*/
    gap: 10px;
}

.breadcrumb .btn {
    /*display: inline;
    -webkit-appearance: none;*/
}


.btn-light {
    border-color: rgb(235,235,235);
    color: rgb(133,145,155);
}

.alert-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: 10px;
    z-index: 10000;
}

.form-select, .form-input, .form-control, .form-control:focus, .form-check-input:not(:checked),
    .bg-light .form-select, .bg-light .form-input, .bg-light .form-control, .bg-light .form-control:focus, .bg-light .form-check-input {
    background-color: var(--form-bg);
}

.card .form-select, .card .form-input, .card .form-control, .card .form-control:focus, .card .form-check-input:not(:checked) {
    background-color: var(--card-form-bg);
}

.form-control:disabled {
    background-color: var(--bs-secondary-bg) !important;
    opacity: 1;
}

.form-floating > .form-control-plaintext ~ label::after, .form-floating > .form-control:focus ~ label::after, .form-floating > .form-control:not(:placeholder-shown) ~ label::after, .form-floating > .form-select ~ label::after {
    background-color: transparent;
}

header {
    width: 100%;
    height: var(--header-height);
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    background-color: var(#FFFFFF);
    z-index: 100;
    transition: .5s;
}

.header_toggle {
    color: var(--first-color);
    font-size: 1.5rem;
    cursor: pointer
}

.header_img {
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden
}

    .header_img img {
        width: 40px
    }

.l-navbar .nav {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.nav_logo, .nav_link {
    display: grid;
    grid-template-columns: max-content max-content;
    align-items: center;
    column-gap: 1rem;
    padding: .75rem 0 .75rem 1.8rem
}

.nav_logo-icon {
    width: 40px;
    margin-left: -10px;
}

.nav_logo-name {
    color: #FFFFFF;
    font-weight: 500;
}

.nav_link {
    position: relative;
    color: var(--bs-dark-bg-subtle);
    margin-bottom: 0.5rem;
    transition: .3s
}

    .nav_link:hover {
        color: var(--bs-dark);
        background-color: var(--bs-primary);
    }

    .nav_link span {
        margin-left: 0.5rem;
    }

.nav_icon {
    font-size: 1.5rem
}

.nav-tabs.nav-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
}

.nav-tabs.nav-pills .nav-link {
    color: rgba(var(--bs-dark-rgb),var(--bs-text-opacity)) !important;
    border: none;
    border-bottom: 2px solid transparent;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
    border-radius: 0;
    margin-right: 0.5rem;
}

.nav-tabs.nav-pills .nav-link.active, .nav-tabs.nav-pills .nav-link:hover {
    border-bottom: 2px solid var(--bs-nav-pills-link-active-bg);
    color: rgba(var(--bs-dark-rgb),var(--bs-text-opacity)) !important;
    background: none;
    border-radius: 0;
}

/* tables */
table.table {
    border-spacing: 0 0.25em;
    border-collapse: separate;
}

table.table-sticky-header thead th {
    position: sticky;
    top: -1px;
}

table.table tbody tr td:not(.table-warning, .table-danger, .table-success, .table-dark, table.info) {
    background-color: #f9f9f9;
}

table.table tr th:first-child, table.table tr td:first-child {
    border-top-left-radius: var(--bs-border-radius);
    border-bottom-left-radius: var(--bs-border-radius);
}

table.table tr th:last-child, table.table tr td:last-child {
    border-top-right-radius: var(--bs-border-radius);
    border-bottom-right-radius: var(--bs-border-radius);
}

table.table th, table.table td {
    padding: var(--table-cell-padding);
    /*padding-top: var(--table-cell-padding);
padding-bottom: var(--table-cell-padding);*/
}

table.table.table-sm th, table.table.table-sm td {
    padding: var(--table-sm-cell-padding);
    /*padding-top: var(--table-cell-padding);
padding-bottom: var(--table-cell-padding);*/
}

table.table.table-sticky-header thead th {
    border-radius: 0 !important;
}


img.news-item-img {
    max-height: 150px;
    object-fit: cover;
    object-position: top;
}

.validation-summary-errors ul {
    list-style: none;
    padding: 0;
}

/* dashboard elements */
.dashboard-info-item .icon {
    height: 80px;
    line-height: 80px;
    width: 80px;
}

@media screen and (max-width: 576px) {
    .dashboard-info-item .icon {
        height: 70px;
        line-height: 70px;
        width: 70px;
    }
}




@media screen and (min-width: 576px) {
    header {
        height: calc(var(--header-height) + 1rem);
        padding: 0 1rem 0 var(--nav-width);
    }

    .header_img {
        width: 40px;
        height: 40px
    }

    .header_img img {
        width: 45px
    }

    .l-navbar {
        left: 0;
        /*padding: 1rem 0 0 0;*/
    }

    .l-navbar.show {
        width: var(--nav-width-expanded)
    }

    .body-pd, header.body-pd {
        padding-left: var(--nav-width-expanded)
    }

    .nav_icon {
        font-size: 1.25em;
    }

    .nav_logo, .nav_link {
        padding-left: 1.5rem;
    }

    .container.main > .row {
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .position-sm-relative {
        position: relative !important;
    }
}

/* DataTables */

.dataTables_wrapper{
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

div.dataTables_scrollBody {
    border: none !important;
}

table.dataTable thead > tr > th.sorting:before, table.dataTable thead > tr > th.sorting:after, table.dataTable thead > tr > th.sorting_asc:before, table.dataTable thead > tr > th.sorting_asc:after, table.dataTable thead > tr > th.sorting_desc:before, table.dataTable thead > tr > th.sorting_desc:after, table.dataTable thead > tr > th.sorting_asc_disabled:before, table.dataTable thead > tr > th.sorting_asc_disabled:after, table.dataTable thead > tr > th.sorting_desc_disabled:before, table.dataTable thead > tr > th.sorting_desc_disabled:after, table.dataTable thead > tr > td.sorting:before, table.dataTable thead > tr > td.sorting:after, table.dataTable thead > tr > td.sorting_asc:before, table.dataTable thead > tr > td.sorting_asc:after, table.dataTable thead > tr > td.sorting_desc:before, table.dataTable thead > tr > td.sorting_desc:after, table.dataTable thead > tr > td.sorting_asc_disabled:before, table.dataTable thead > tr > td.sorting_asc_disabled:after, table.dataTable thead > tr > td.sorting_desc_disabled:before, table.dataTable thead > tr > td.sorting_desc_disabled:after {
    line-height: 10px;
}

.pagination {
    --bs-pagination-color: var(--bs-dark);
    --bs-pagination-bg: var(--bs-body-bg);
    --bs-pagination-border-color: var(--bs-border-color);
    --bs-pagination-border-radius: var(--bs-border-radius);
    --bs-pagination-hover-color: var(--bs-darker);
    --bs-pagination-hover-bg: var(--bs-tertiary-bg);
    --bs-pagination-hover-border-color: var(--bs-border-color);
    --bs-pagination-focus-color: var(--bs-darker);
    --bs-pagination-focus-bg: var(--bs-light);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--bs-dark);
    --bs-pagination-active-border-color: var(--bs-dark);
    --bs-pagination-disabled-color: var(--bs-secondary-color);
    --bs-pagination-disabled-bg: var(--bs-light);
    --bs-pagination-disabled-border-color: var(--bs-border-color);
}

@media screen and (max-width: 576px) {
    .dataTables_wrapper .dataTables_length {
        margin-bottom: 0.5rem;
    }

    div.dataTables_wrapper div.dataTables_info {
        padding-top: 0;
    }
}

/* background */
body:before {
    content: "";
    position: fixed;
    background: rgba(var(--bs-dark-rgb), 5%);
    width: 70vh;
    height: 270vh;
    z-index: -1;
    transform: rotate(64deg);
    right: 40vh;
    top: -30vh;
    border-radius: 35px;
}

body:after {
    content: "";
    position: fixed;
    background: rgb(85 108 214 / 5%);
    width: 120vh;
    height: 270vh;
    z-index: -1;
    transform: rotate(-38deg);
    left: -10vw;
    top: -30vh;
    border-radius: 35px;
}