:root {
    --body-bg: #fcfcfc;
    --card-bg: #fdfdfd;
    --card-bg-contrast: #fafafa;
    --card-stack-bg: #00000003;
    --card-shadow: #0003;
    --nav-bg: #e9ecef;
    --nav-shadow: #0004;
    --nav-link: #212529bb;
    --nav-link-hover: #c17508;
    --nav-border: #0006;

    --text-light: #212529;
    --text: #212529;
    --inp-group-text: #e7e7e7;
    --btn-back: #999;
    --inp-bg: #fff;
    --inp-bg-dark: #fff;
    --inp-highlight: #00000010;
    --inp-border: #dee2e6;

    --color-primary: #3983ef;
    --color-primary-rgb: 57,131,239;
    --color-primary-hover: #3169bc;
    --color-secondary: #939ba1;
    --color-secondary-rgb: 147,155,161;
    --color-secondary-hover: #808389;
    --color-danger: #e15563;
    --color-danger-rgb: 225,85,99;
    --color-danger-hover: #b2434e;
    --color-success: #38a25c;
    --color-success-rgb: 56,162,92;
    --color-success-hover: #277842;

    --bs-link-color: #3983ef;
    --bs-link-color-rgb: 57,131,239;
    --bs-link-hover-color: #3169bc;
    --bs-link-hover-color-rgb: 49,105,188;

    --skip-to-content-color: #e6e6e6;
    --skip-to-content-bg: #c17508;
    --focus-outline-color: #f5a83c;
}
.dark {
    --body-bg: #2b2b31;
    --card-bg: #545458;
    --card-bg-contrast: #5f5f63;
    --card-stack-bg: #ffffff09;
    --card-shadow: #0006;
    --nav-bg: rgb(66, 66, 70);
    --nav-shadow: #0008;
    --nav-link: #f4f4f4cc;
    --nav-link-hover: #f5a83c;
    --nav-border: #fff4;

    --text-light: #f4f4f4;
    --text: #e6e6e6;
    --inp-group-text: #747474;
    --btn-back: #666;
    --inp-bg: #303033;
    --inp-bg-dark: #202022;
    --inp-highlight: #ffffff20;
    --inp-border: #939699;

    --color-secondary: #6e7479;
    --color-secondary-rgb: 110,116,121;
    --color-secondary-hover: #5a5c60;

    --bs-link-color: #6399eb;
    --bs-link-color-rgb: 99,153,235;
    --bs-link-hover-color: #4c7abe;
    --bs-link-hover-color-rgb: 76,122,190;

    --skip-to-content-color: #212529;
    --skip-to-content-bg: #f5a83c;
    --focus-outline-color: #f5a83c;
}
.alert.alert-warning {
    --focus-outline-color: #6399eb;
}

/* Accessibility styling */
#skip-to-main {
    position: absolute;
    left: -1000000px;
    top: 0;
    padding: 0.5em;
    background-color: var(--skip-to-content-bg);
    color: var(--skip-to-content-color);
}
#skip-to-main:focus-visible {
    left: 0;
}

*:focus {
    outline: unset;
}

:is(*:focus-visible, input.btn-check:focus-visible + label.btn) {
    outline: solid var(--focus-outline-color);
}

input.btn-check:focus-visible + label.btn::after {
    content: '\f6a2';
    font-family: bootstrap-icons !important;
    color: var(--nav-link-hover);
    position: absolute;
    top: 2rem;
    left: 0;
    font-size: 1.75rem;
}
ul.nav-cells a.nav-link:focus-visible::before {
    content: '\f698';
    font-family: bootstrap-icons !important;
    color: var(--nav-link-hover);
    position: absolute;
    line-height: 0.9;
    margin-left: 0;
    right: 1rem;
    font-size: 1.75rem;
}
@media (min-width: 768px) {
    ul.nav-cells a.nav-link:focus-visible::before {
        margin-left: -3rem;
        right: unset;
    }
}
ul.nav-cells.nav-cells-horz a.nav-link:focus-visible::before {
    content: '\f6a2';
    font-family: bootstrap-icons !important;
    color: var(--nav-link-hover);
    position: absolute;
    margin-top: -2rem;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.75rem;
}

/* Default styles */
body {
    background-color: var(--body-bg);
    color: var(--text-light);
    font-size: 15px;
}
.card, .card-body, .modal-content {
    background-color: var(--card-bg);
    color: var(--text);
}
.card .card, .card .card .card-body {
    background-color: var(--card-stack-bg);

    & [class^='btn-outline-'], & [class*=' btn-outline-'] {
        --bs-btn-bg: color-mix(in lab, transparent 75%, var(--inp-bg));
    }
}

.navbar.bg-body-secondary {
    background-color: var(--nav-bg) !important;
}

h1 {
    font-size: 2.4rem;
    margin-bottom: 1.5rem;
}

h4 {
    font-size: 1.4rem;
}

@media (min-width: 576px) {
    .container {
        width: 100%;
        max-width: 100%;
    }
    .container-sm {
        max-width: 840px;
    }
    .cu-form {
        max-width: 720px;
    }
}
@media (min-width: 992px) {
    .container {
        width: 95%;
    }
    .container-sm {
        max-width: 1280px;
    }
    .cu-form {
        max-width: 1080px;
    }
}

.row {
    padding-right: 0;
}

.navbar {
    box-shadow: 0 -1px 4px 2px var(--nav-shadow);
}

.form-control, .input-group-text, textarea {
    padding: 0.3rem 0.75rem;
}
.form-control, .form-check-input, textarea {
    box-shadow: inset 1px 1px 3px #0001;
    background-color: var(--inp-bg);
    border-color: var(--inp-border);
}
.form-control:focus, .form-check-input:focus {
    box-shadow: inset 1px 1px 3px #0001, 0 0 0 0.25rem rgba(13,110,253,.25);
}

textarea {
    border-radius: 6px;
    color: var(--text);
}

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

.dark .form-text {
    color: var(--nav-link);
}

.input-group > .input-group-text {
    background-color: var(--inp-group-text);
    color: var(--text);
    border-color: var(--inp-border);
}

.nav-link {
    color: var(--nav-link);
    padding-bottom: calc(inherit + 2px);
}
.navbar-nav .nav-link.show {
    color: var(--nav-link-hover);
}
.nav-link:hover, .nav-link:focus {
    color: var(--nav-link-hover);
}
.nav-link.active, .navbar-nav .nav-link.active {
    color: var(--text-light);
    cursor: default;
}
@media (max-width: 991.9px) {
    .nav-link.active, .navbar-nav .nav-link.active {
        border-left: 4px solid var(--nav-link-hover);
        padding-left: 8px;
    }
}
@media (min-width: 992px) {
    .nav-link.active, .navbar-nav .nav-link.active {
        border-bottom: 2px solid var(--nav-link-hover);
        padding-bottom: inherit;
    }
}

.btn-primary {
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-bg: var(--color-primary-hover);
    --bs-btn-hover-border-color: var(--color-primary-hover);
    --bs-btn-active-bg: var(--color-primary-hover);
    --bs-btn-active-border-color: var(--color-primary-hover);
    --bs-btn-disabled-bg: rgba(var(--color-primary-rgb), 0.67);
    --bs-btn-disabled-border-color: rgba(var(--color-primary-rgb), 0.4);
}
.btn-outline-primary {
    --bs-btn-color: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-bg: var(--color-primary);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-active-bg: var(--color-primary);
    --bs-btn-active-border-color: var(--color-primary);
    --bs-btn-disabled-color: rgba(var(--color-primary-rgb), 0.67);
    --bs-btn-disabled-border-color: rgba(var(--color-primary-rgb), 0.67);
}
.btn-outline-danger {
    --bs-btn-color: var(--color-danger);
    --bs-btn-border-color: var(--color-danger);
    --bs-btn-hover-bg: var(--color-danger-hover);
    --bs-btn-hover-border-color: var(--color-danger-hover);
    --bs-btn-active-bg: var(--color-danger-hover);
    --bs-btn-active-border-color: var(--color-danger-hover);
    --bs-btn-disabled-bg: rgba(var(--color-danger-rgb), 0.67);
    --bs-btn-disabled-border-color: rgba(var(--color-danger-rgb), 0.4);
}
.btn-danger {
    --bs-btn-bg: var(--color-danger);
    --bs-btn-border-color: var(--color-danger);
    --bs-btn-hover-bg: var(--color-danger-hover);
    --bs-btn-hover-border-color: var(--color-danger-hover);
    --bs-btn-active-bg: var(--color-danger-hover);
    --bs-btn-active-border-color: var(--color-danger-hover);
    --bs-btn-disabled-bg: rgba(var(--color-danger-rgb), 0.67);
    --bs-btn-disabled-border-color: rgba(var(--color-danger-rgb), 0.4);
}
.btn-success {
    --bs-btn-bg: var(--color-success);
    --bs-btn-border-color: var(--color-success);
    --bs-btn-hover-bg: var(--color-success-hover);
    --bs-btn-hover-border-color: var(--color-success-hover);
    --bs-btn-active-bg: var(--color-success-hover);
    --bs-btn-active-border-color: var(--color-success-hover);
    --bs-btn-disabled-bg: rgba(var(--color-success-rgb), 0.67);
    --bs-btn-disabled-border-color: rgba(var(--color-success-rgb), 0.4);
}
.btn-secondary {
    --bs-btn-bg: var(--color-secondary);
    --bs-btn-border-color: var(--color-secondary);
    --bs-btn-hover-bg: var(--color-secondary-hover);
    --bs-btn-hover-border-color: var(--color-secondary-hover);
    --bs-btn-active-bg: var(--color-secondary-hover);
    --bs-btn-active-border-color: var(--color-secondary-hover);
    --bs-btn-disabled-bg: rgba(var(--color-secondary-rgb), 0.8);
    --bs-btn-disabled-border-color: rgba(var(--color-secondary-rgb), 0.4);
}

.btn:not(.btn-link) {
    --bs-btn-padding-x: 0.65rem;
    --bs-btn-padding-y: 0.3rem;
    border-radius: 8px;
}
.btn:not(.btn-link):not(:disabled) {
    box-shadow: 1px 1px 3px #0002;
}
.input-group > .btn {
    box-shadow: none !important;
}

.card {
    box-shadow: 2px 2px 6px var(--card-shadow);
    padding: 1px;
    break-inside: avoid-column;
}

.card .card-header {
    margin: -1px -1px 0 -1px;
}
.dark .card-header {
    background-color: #0002;
}

.modal-content {
    box-shadow: 4px 4px 8px var(--card-shadow);
}

.popover {
    max-width: 480px !important;
    background-color: var(--inp-bg-dark);
}
.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::before, .bs-popover-end>.popover-arrow::before,
.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after, .bs-popover-end>.popover-arrow::after {
    border-right-color: var(--inp-bg-dark) !important;
}
.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::before, .bs-popover-end>.popover-arrow::before,
.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::after, .bs-popover-end>.popover-arrow::after {
    border-left-color: var(--inp-bg-dark) !important;
}
.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::before, .bs-popover-end>.popover-arrow::before,
.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after, .bs-popover-end>.popover-arrow::after {
    border-top-color: var(--inp-bg-dark) !important;
}
.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::before, .bs-popover-end>.popover-arrow::before,
.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::after, .bs-popover-end>.popover-arrow::after {
    border-bottom-color: var(--inp-bg-dark) !important;
}
.popover-body {
    color: var(--text);
}

.dropdown-menu {
    background-color: var(--inp-bg-dark);
}
.dropdown-menu .dropdown-item {
    color: var(--text);
}
.dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:active, .dropdown-menu .dropdown-item:focus {
    background-color: var(--inp-highlight);
}

.spinner-border-sm {
    --bs-spinner-border-width: 0.1em;
}

input[type=date] {
    max-width: 240px;
}

.dark .table {
    color: var(--text);
}
.dark tbody {
    background-color: #ffffff08;
}
.dark .table-striped>tbody>tr:nth-of-type(odd)>* {
    background-color: #ffffff0c;
    color: var(--text-light);
}
.dark .table-hover>tbody>tr:hover>* {
    color: var(--text-light);
    background-color: #ffffff18;
}

.dark .form-control {
    background-color: var(--inp-bg);
    color: var(--text-light);
}
.dark ::placeholder {
    color: var(--text);
    opacity: 0.6;
}
.dark ::-webkit-calendar-picker-indicator {
    filter: invert(0.6);
}

.dark .navbar-toggler {
    border-color: var(--inp-border);
}
.dark .navbar-toggler-icon {
    filter: invert(1);
}

.toast {
    color: #212529;
}

.breadcrumb-item.active, .breadcrumb-item + .breadcrumb-item::before {
    color: var(--text);
}

/* Custom classes */
tr[data-href] {
    cursor: pointer;
}

.linkExempt {
    cursor: auto;
}

.fs-7 {
    font-size: 0.8rem !important;
}

.fc-logo {
    height: 20px;
    margin-bottom: 2px;
}

.btn-back {
    padding: 0.5rem;
    background-color: var(--btn-back);
    border-radius: 50%;
    display: inline-block;
    width: 32px;
    height: 32px;
    text-decoration: none;
    font-size: 1.0rem;
    color: #fff;
    text-shadow: 1px 0 #fff, -1px 0 #fff, 0 1px #fff, 0 -1px #fff, 0.5px -0.5px #fff, 0.5px 0.5px #fff;
    line-height: 30px;
}
.btn-back:hover {
    background-color: #666;
    cursor: pointer;
}
.btn-back > i:before {
    vertical-align: top;
}

@media (max-width: 760px) {
    .tableWrapper-lg {
        overflow-x: scroll;
        margin-bottom: 8px;
    }
    .tableWrapper-lg > table {
        min-width: 760px;
    }
}

@media (max-width: 640px) {
    .tableWrapper {
        overflow-x: scroll;
        margin-bottom: 8px;
    }
    .tableWrapper > table {
        min-width: 640px;
    }

    .table-sm:not(.subtable) > :not(caption) > * > * {
        padding: 0.5rem 0.5rem;
    }
}
@media (max-width: 480px) {
    .tableWrapper-sm {
        overflow-x: scroll;
        margin-bottom: 8px;
    }
    .tableWrapper-sm > table {
        min-width: 480px;
    }
}

.cu-form {
    justify-content: center;
}

.nav-cells {
    flex-direction: column;
    border-color: var(--inp-border);
}
.nav-cells > .nav-item > .nav-link {
    border: 1px solid var(--nav-border);
    border-bottom: none;
    padding: 0.375rem 1rem;
    min-width: 210px;
}
.nav-cells > .nav-item:first-child > .nav-link {
    border-radius: 4px 4px 0 0;
}
.nav-cells > .nav-item:last-child > .nav-link {
    border-bottom: 1px solid var(--nav-border);
    border-radius: 0 0 4px 4px;
}

.nav-cells > .nav-item > .nav-link.active {
    background-color: #ebebeb;
    border-left: 4px solid #e9941d;
    padding-left: calc(1rem - 3.4px);
}
.nav-cells > .nav-item > .nav-link:hover {
    background-color: #ebebeb;
    color: #000;
}

.dark .nav-cells > .nav-item > .nav-link.active, .dark .nav-cells > .nav-item > .nav-link:hover {
    background-color: #ffffff28;
    color: var(--text-light);
}

.nav-cells.nav-cells-horz {
    flex-direction: row;
}
.nav-cells.nav-cells-horz > .nav-item > .nav-link {
    border-bottom: 1px solid var(--nav-border);
    border-right: none;
    min-width: 80px;
    padding: 0.265rem 1rem;
    text-align: center;
}
.nav-cells.nav-cells-horz > .nav-item:first-child > .nav-link {
    border-radius: 4px 0 0 4px;
}
.nav-cells.nav-cells-horz > .nav-item:last-child > .nav-link {
    border-right: 1px solid var(--nav-border);
    border-radius: 0 4px 4px 0;
}

.nav-cells.nav-cells-horz > .nav-item > .nav-link.active {
    border-left: 1px solid var(--nav-border);
    border-bottom: 3px solid #e9941d;
    padding-left: 1rem;
    padding-bottom: calc(0.265rem - 2px);
}

.nav-cells > * > .nav-link.active {
    text-decoration: none;
}

.time-selector > button:disabled {
    color: var(--body-bg);
}

.min-h0 {
    min-height: 0;
}

.ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: inherit;
    text-decoration-line: none;
}

.flag {
    width: 20px;
    margin-top: -3px;
}

.cursor-pointer {
    cursor: pointer;
}

@media (min-width: 992px) {
    .balance-col {
        column-fill: balance;
        column-count: 2;
    }
}

.input-time {
    max-width: 112px;
}

table.table-compact-display > thead {
    background-color: rgba(0, 0, 0, 0.1);
}

table.table-compact-display > thead th,
table.table-compact-display > tbody td {
    padding: 2px 8px 2px 6px;
    font-size: 0.9rem;
}

table tr:target {
    outline: solid var(--focus-outline-color);
}

/* Selectize styling */
.selectize-control .selectize-input:focus-within {
    outline: solid var(--focus-outline-color);
}

.selectize-control > a.clear {
    color: var(--text) !important;
    font-size: 1.4rem !important;
    padding-bottom: 2px;
    padding-right: 4px;
}

.selectize-control.single .selectize-input {
    padding-top: 7px;
    padding-bottom: 3px !important;
    min-height: 36px;
    border-radius: 6px;
    border-color: var(--inp-border);
    font-size: inherit;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    box-shadow: inset 1px 1px 3px #0001;
}
.form-select-sm.selectize-control.single .selectize-input {
    min-height: 29px;
}

.form-select.selectize-control.single > .selectize-input {
    padding-top: 5px !important;
}
.form-select-sm.selectize-control.single > .selectize-input {
    padding-top: 3px !important;
}

.is-invalid.selectize-control.single .selectize-input {
    border-color: var(--bs-form-invalid-border-color);
}

.selectize-control.single .selectize-input::after {
    filter: invert(0.6);
}

.selectize-control.single .selectize-input, .selectize-control.single .selectize-input.input-active, .selectize-input > input {
    background-color: var(--inp-bg);
    color: var(--text-light);
}

.selectize-dropdown {
    background-color: var(--inp-bg-dark);
    color: var(--text);
}

.selectize-dropdown .active:not(.selected), .selectize-dropdown .selected {
    background-color: var(--inp-highlight);
    color: var(--text-light);
}

/* Styling for nested tables */
table.table-nested > tbody > tr.tr-main > td {
    border-bottom-width: 0;
}
table.table-nested > tbody > tr.tr-collapse > td {
    padding: 0;
}
table.table-nested table.subtable {
    font-size: 0.85em;
}

/* This overrides the default behaviour of .invalid-feedback,
   allowing for display state control using .d-block */
.is-invalid~.password-feedback {
    display: none !important;
}
.is-invalid~.password-feedback.d-block {
    display: block !important;
}

/* Chevron go "yippeeeeeee" */
button[data-bs-toggle=collapse] i.bi-chevron-down::before {
    transition: rotate 350ms;
}
button[data-bs-toggle=collapse][aria-expanded=true] i.bi-chevron-down::before {
    rotate: -180deg;
}

/* Carets for datatable sorting */
th.sortAsc::after, th.sortDesc::after {
    display: inline-block;
    margin-left: .5em;
    margin-bottom: .1em;
    content: "";
    border: .3em solid transparent;
}
th.sortAsc::after {
    border-top: .3em solid;
    border-bottom: 0;
}
th.sortDesc::after {
    border-top: 0;
    border-bottom: .3em solid;
}