/*TODO: eventuell implementieren: https://css-tricks.com/snippets/css/complete-guide-grid/*/
:root {
    --font-size: 9pt;
    --font-size-tableheader: 11pt;
    --top-row-height: 3.5rem; /*height of top-row*/
    --column-count-1: 1;
    --column-count-2: 2;
    --column-count-3: 3;
    --column-count-4: 4;
    --column-count-5: 5;
    --column-count-6: 6;
    --column-count-7: 7;
    --column-count-8: 8;
    --height-02rem: 2rem;
    --height-03rem: 3rem;
    --height-04rem: 4rem;
    --height-05rem: 5rem;
    --grid-gap: 0.5rem;
    --grid-gap_05: calc(var(--grid-gap) / 2);
    --grid-gap_033: calc(var(--grid-gap) / 3);
    --btn-height: 100%;
    --btn-small: calc(1.5em + .75rem + 2px);
    --calendar-req-notapproved: yellow;
    --calendar-req-approved-superior: #28a7455f;
    --calendar-req-approved: #28a745;
    --calendar-req-declined: #ffa0a0;
    --calendar-req-cancelrequestemployee: lightblue;
    --calendar-noappr-of: #eaeaea;
    --calendar-noappr-ho: #d5d5d5;
    --calendar-noappr-ou: #c0c0c0;
    --calendar-noappr-trn: #ababab;
    --calendar-noappr-si: #ff9900;
    --holiday-ba: #28a745;
    --holiday-pu: #B8AEE6;
    --holiday-ww: #75CBD5;
    --year-calendar-cell-width: 9ch;
    --year-calendar-cell-height: 8ch;
    --month-calendar-cell-width: 7ch;
    --month-calendar-cell-height: 5ch;
    --z-index-default: 800;
    --z-index-tbody-sticky: calc(var(--z-index-default) + 1);
    --z-index-thead-th: calc(var(--z-index-tbody-sticky) + 1);
    --z-index-thead-th-rowspan: calc(var(--z-index-thead-th) + 1);
    --z-index-topmost: 1100;
}

@media screen and (max-width: 1399.98px) {
    :root {
        --column-count-6: 5;
        --column-count-7: 6;
        --column-count-8: 7;
    }
}

@media screen and (max-width: 1199.98px) {
    :root {
        --column-count-5: 4;
        --column-count-6: 4;
        --column-count-7: 5;
        --column-count-8: 6;
    }
}

@font-face {
    font-family: "bootstrap";
    src: url('../lib/bootstrap-icons/font/fonts/bootstrap-icons.woff2') format('woff2'), url('../lib/bootstrap-icons/font/fonts/bootstrap-icons.woff') format('woff');
}

@media screen and (max-width: 991.98px) {
    :root {
        --column-count-4: 3;
        --column-count-5: 3;
        --column-count-6: 3;
        --column-count-7: 4;
        --column-count-8: 5;
    }
}

@media screen and (max-width: 767.98px) {
    :root {
        --column-count-3: 2;
        --column-count-4: 2;
        --column-count-5: 2;
        --column-count-6: 2;
        --column-count-7: 3;
        --column-count-8: 4;
    }
}

@media screen and (max-width: 575.98px) {
    :root {
        --column-count-3: 2;
        --column-count-4: 2;
        --column-count-5: 2;
        --column-count-6: 2;
        --column-count-7: 3;
        --column-count-8: 4;
    }
}

html,
body {
    font-size: var(--font-size);
    overflow-y: hidden;
    scrollbar-color: var(--bs-primary) var(--bs-secondary);

    @media print {
        overflow-y: unset;
    }
}

@media print {
    table {
        page-break-after: auto;
    }

    tr {
        page-break-inside: avoid;
        page-break-after: auto;
    }

    td {
        page-break-inside: avoid;
        page-break-after: auto;
    }

    thead {
        display: table-header-group;
    }

    tfoot {
        display: table-footer-group;
    }
}

.markdown-body {
}

    .markdown-body .markdown-alert {
        padding: 0.5rem 1rem;
        margin-bottom: 1rem;
    }

        .markdown-body .markdown-alert .markdown-alert-title {
            text-transform: uppercase;
            font-weight: bold;
            font-size: 1.25rem;
        }

            .markdown-body .markdown-alert .markdown-alert-title svg {
                margin-right: 0.5rem;
                width: 0;
                height: 0;
            }

        .markdown-body .markdown-alert.markdown-alert-tip .markdown-alert-title::before {
            font-family: bootstrap;
            content: "\F431";
        }

        .markdown-body .markdown-alert.markdown-alert-note .markdown-alert-title::before {
            font-family: bootstrap;
            content: "\F431";
        }

        .markdown-body .markdown-alert.markdown-alert-important .markdown-alert-title::before {
            font-family: bootstrap;
            content: "\F623";
        }

        .markdown-body .markdown-alert.markdown-alert-caution .markdown-alert-title::before {
            font-family: bootstrap;
            content: "\F623";
        }

.not-finished {
    color: red;
    font-weight: bold;
    filter: blur(1px);
}

.overviewMasterData {
    width: 100%;
}

.card-employee {
    width: 13rem;
    height: 9rem;
    margin: var(--grid-gap_05);
}

.card-project {
    width: 13rem;
    height: 9rem;
    margin: var(--grid-gap_05);
}

    .card-employee .card-text,
    .card-project .card-title {
        margin-bottom: 0.5rem;
    }

    .card-employee .card-title,
    .card-project .card-text {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        display: box;
        height: 3rem;
        max-height: 3rem;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        box-orient: vertical;
        margin-bottom: 0;
    }

    .card-employee .btn-group,
    .card-project .btn-group {
        position: absolute;
        left: var(--grid-gap);
        bottom: var(--grid-gap);
    }

.in-office {
    font-size: 1rem;
}

.form-group {
    margin-bottom: 0;
}

.dd-3ch {
    min-width: calc(3ch + 50px);
    width: 100%;
}

.dd-6ch {
    min-width: calc(6ch + 50px);
    width: 100%;
}

.dd-8ch {
    min-width: calc(8ch + 50px);
    width: 100%;
}

.dd-20ch {
    min-width: calc(20ch + 50px);
    width: 100%;
}

.dd-30ch {
    min-width: calc(30ch + 50px);
    width: 100%;
}

.dd-cg {
    min-width: calc(3ch + 50px);
    width: 100%;
}

.dd-cg-w {
    min-width: calc(8ch + 50px);
    width: 100%;
}

.dd-currency {
    min-width: calc(4ch + 50px);
    width: 100%;
}

.dd-co,
.dd-prj,
.dd-del {
    min-width: calc(8ch + 50px);
    width: 100%;
}

.dd-cc,
.dd-site {
    min-width: calc(8ch + 50px);
    width: 100%;
}

.dd-co {
    min-width: calc(10ch + 50px);
    width: 100%;
}

.dd-rep-type {
    min-width: calc(15ch + 50px);
    width: 100%;
}

.dd-cc-w {
    min-width: calc(25ch + 50px);
    width: 100%;
}

.dd-emp {
    min-width: calc(30ch + 50px);
    width: 100%;
}

.inp-7ch {
    min-width: calc(7ch + 30px);
    width: 100%;
}

.inp-8ch {
    min-width: calc(8ch + 30px);
    width: 100%;
}

.num-4ch {
    min-width: calc(4ch + 50px);
    width: 100%;
}

.num-7ch {
    min-width: calc(7ch + 50px);
    width: 100%;
}

.grid-card-rights {
    grid-template-columns: repeat(5, 4ch);
    grid-template-rows: 4.5ch;
    grid-column-gap: var(--grid-gap_033);
}

    .grid-card-rights > div {
        border: none;
        color: white;
        width: 100%;
        height: 100%;
        text-align: center;
        cursor: pointer;
    }

        .grid-card-rights > div.inactive {
            /*note: same color as btn-dark*/
            background-color: #343a40;
        }

        .grid-card-rights > div.active {
            background-color: var(--bs-success);
        }

        .grid-card-rights > div.disabled {
            cursor: default;
            opacity: 0.5;
        }

.chevron-link {
    cursor: pointer;
}

.toast-message {
    font-size: 1rem;
}

.btn .zmdi,
.btn .far,
.btn .fas {
    font-size: 1.4rem;
    width: 2rem;
}

.btn-toolbar {
    margin-top: var(--grid-gap);
    grid-gap: var(--grid-gap) var(--grid-gap);
}

.btn-plus-minus {
    width: var(--btn-small);
    height: var(--btn-height);
    padding: 0;
}

.btn-collapse {
    width: var(--btn-small);
    height: var(--btn-height);
    padding: 0;
}

.btn-8 {
    min-width: 8ch;
}

.btn-12 {
    min-width: 12ch;
}

.btn-18 {
    min-width: 18ch;
}

.btn-24 {
    min-width: 24ch;
}

.btn-26 {
    min-width: 26ch;
}

.btn-30 {
    min-width: 30ch;
}

.btn-35 {
    min-width: 35ch;
}

.table {
    overflow: auto;
    table-layout: fixed;
    margin-bottom: unset;
    width: max-content;
    break-before: page;
    font-size: var(--font-size);

    @media screen {
        &.sticky-header,
        &.sticky-column-1,
        &.sticky-column-2,
        &.sticky-column-3 {
            /*
                Workaround for disappearing borders on sticky elements
                See also https://github.com/twbs/bootstrap/issues/31458#issuecomment-1454705894
                The workaround is only applied to tables having a sticky header or sticky column
            */
            border-collapse: separate;
            border-spacing: 0;
        }
    }
}

    .table.sticky-header > thead {
        top: 0;
        position: sticky;
        z-index: var(--z-index-thead-th);

        @media print {
            position: static;
        }
    }

    .table .headline th {
        background-color: var(--bs-secondary);
        font-size: var(--font-size-tableheader);
        text-align: left;
        vertical-align: middle;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .table .sum th:not(.no-background),
    .table .sum td:not(.no-background) {
        box-shadow: inset 0 0 0 9999px rgba(var(--bs-emphasis-color-rgb), 0.05);
    }

    .table.sticky-column-1 tr td:first-child,
    .table.sticky-column-1 tr th:first-child,
    .table.sticky-column-2 tr td:nth-child(2),
    .table.sticky-column-2 tr th:nth-child(2),
    .table.sticky-column-3 tr td:nth-child(3),
    .table.sticky-column-3 tr th:nth-child(3) {
        position: sticky;
        left: 0;

        @media print {
            position: static;
        }
    }

    .table.sticky-column-1 thead tr td[rowspan]:first-child,
    .table.sticky-column-1 thead tr th[rowspan]:first-child,
    .table.sticky-column-2 thead tr td[rowspan]:nth-child(2),
    .table.sticky-column-2 thead tr th[rowspan]:nth-child(2),
    .table.sticky-column-3 thead tr td[rowspan]:nth-child(3),
    .table.sticky-column-3 thead tr th[rowspan]:nth-child(3) {
        z-index: var(--z-index-thead-th-rowspan);
    }

    .table.sticky-column-1 tbody tr td:first-child,
    .table.sticky-column-1 tbody tr th:first-child,
    .table.sticky-column-1 tbody tr th:first-child,
    .table.sticky-column-2 tbody tr td:nth-child(2),
    .table.sticky-column-2 tbody tr th:nth-child(2),
    .table.sticky-column-3 tbody tr td:nth-child(3),
    .table.sticky-column-3 tbody tr th:nth-child(3) {
        z-index: var(--z-index-tbody-sticky);
    }

    .table .sticky-cell {
        position: sticky;
        left: var(--sticky-left);

        @media print {
            position: static;
        }
    }

    .table thead tr .sticky-cell {
        z-index: var(--z-index-thead-th);
    }

    .table tbody tr .sticky-cell {
        z-index: var(--z-index-tbody-sticky);
    }

    .table .no-background {
        background: var(--bs-body-bg) !important;
        box-shadow: unset !important;
    }

    .table.table-bordered-cells {
        border: 0px none transparent;
    }

        .table.table-bordered-cells th:not(.no-border),
        .table.table-bordered-cells td:not(.no-border) {
            border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
            /*
                Possible better solution for border which disappears on sticky elements
                @media screen {
                    outline: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
                    outline-offset: -1px;
                }

                @media print {
                    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
                }
            */
        }

    .table thead tr th {
        box-sizing: border-box;
        hyphens: auto;
        overflow-wrap: anywhere;
        padding-left: 5px;
        padding-right: 5px;
        text-align: center;
        vertical-align: bottom;
        white-space: normal;

        @media print {
            overflow-wrap: break-word;
        }
    }

    .table tr td,
    .table tr th {
        box-sizing: border-box;
        overflow-wrap: anywhere;
        padding-left: 5px;
        padding-right: 5px;
        vertical-align: middle;
        white-space: normal;

        @media print {
            overflow: hidden;
            overflow-wrap: break-word;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    .table.monthlyreport .approved th:not(.no-background),
    .table.monthlyreport .approved td:not(.no-background) {
        box-shadow: inset 0 0 0 9999px rgba(var(--bs-emphasis-color-rgb), 0.025);
    }

    .table.monthlyreport .notlogged {
        font-weight: bold;
    }

    .table.monthlyreport .workhoursMissing td:not(.no-background) {
        background-color: #e69f00;
    }

    .table.monthlyreport .incomplete td:not(.no-background) {
        background-color: indianred;
    }

    .table.monthlyreport .limitexceededholidaysweekend td:not(.no-background) {
        background-color: yellow;
    }

    .table.monthlyreport .unapprovedworking td:not(.no-background) {
        background-color: cyan;
    }

    .table.monthlyreport .closed-month-Come {
        color: green !important;
    }

    .table.monthlyreport .closed-month-Go {
        color: red !important;
    }

.calendar-month {
    --calendar-cell-width: var(--month-calendar-cell-width);
    --calendar-cell-height: var(--month-calendar-cell-height);
}

.calendar-year {
    --calendar-cell-width: var(--year-calendar-cell-width);
    --calendar-cell-height: var(--year-calendar-cell-height);
}

.calendar-month,
.calendar-year {
    --color-req: transparent;
    --color-noappr: transparent;
    --bs-border-color: white;
    -webkit-user-select: none;
    user-select: none;
}

    .calendar-month .day,
    .calendar-year .day {
        height: var(--calendar-cell-height);
        padding: 0;
    }

    .calendar-month .header,
    .calendar-year .header {
        font-size: var(--font-size-tableheader);
        text-align: center;
        position: sticky;
        height: auto;
        top: 0;

        @media print {
            position: static;
        }
    }

        .calendar-year .header > th {
            background-color: var(--bs-secondary);
        }

    .calendar-month .layered,
    .calendar-year .layered {
        position: relative;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }

        .calendar-month .layered > div,
        .calendar-year .layered > div {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

    .calendar-month .notapproved,
    .calendar-year .notapproved {
        --color-req: var(--calendar-req-notapproved);
    }

    .calendar-month .approvedsuperior,
    .calendar-year .approvedsuperior {
        --color-req: var(--calendar-req-approved-superior);
    }

    .calendar-month .approved,
    .calendar-year .approved {
        --color-req: var(--calendar-req-approved);
    }

    .calendar-month .declined,
    .calendar-year .declined {
        --color-req: var(--calendar-req-declined);
    }

    .calendar-month .cancelrequestemployee,
    .calendar-year .cancelrequestemployee {
        --color-req: var(--calendar-req-cancelrequestemployee);
    }

    .calendar-month .of,
    .calendar-year .of {
        --color-noappr: var(--calendar-noappr-of);
    }

    .calendar-month .ho,
    .calendar-year .ho {
        --color-noappr: var(--calendar-noappr-ho);
    }

    .calendar-month .ou,
    .calendar-year .ou {
        --color-noappr: var(--calendar-noappr-ou);
    }

    .calendar-month .trn,
    .calendar-year .trn {
        --color-noappr: var(--calendar-noappr-trn);
    }

    .calendar-month .si,
    .calendar-year .si {
        --color-noappr: var(--calendar-noappr-si);
    }

    .calendar-month .one-state,
    .calendar-year .one-state {
        background-color: var(--color-req);
        font-size: 0.9rem;
    }

    .calendar-month .two-states,
    .calendar-year .two-states {
        background-image: linear-gradient(to bottom left, var(--color-noappr) 50%, var(--color-req) 50%);
        font-size: 0.9rem;
    }

        .calendar-month .one-state > div,
        .calendar-year .one-state > div,
        .calendar-month .two-states > div,
        .calendar-year .two-states > div {
            height: calc(100% / var(--row-count));
        }

            .calendar-month .one-state > div .cal-left,
            .calendar-year .one-state > div .cal-left,
            .calendar-month .two-states > div .cal-left,
            .calendar-year .two-states > div .cal-left {
                text-align: left;
                padding-left: 0.3rem;
            }

            .calendar-month .one-state > div .cal-center,
            .calendar-year .one-state > div .cal-center,
            .calendar-month .two-states > div .cal-center,
            .calendar-year .two-states > div .cal-center {
                text-align: center;
            }

            .calendar-month .one-state > div .cal-right,
            .calendar-year .one-state > div .cal-right,
            .calendar-month .two-states > div .cal-right,
            .calendar-year .two-states > div .cal-right {
                text-align: right;
                padding-right: 0.3rem;
            }

    .calendar-month .triangle-req,
    .calendar-year .triangle-req {
        clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
    }

    .calendar-month .triangle-gen,
    .calendar-year .triangle-gen {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
    }

    .calendar-month .workday,
    .calendar-year .workday {
        background-color: #f0f0f0 !important;
    }

    .calendar-month .no-workday,
    .calendar-year .no-workday {
        background-color: #dae0e5 !important;
    }

    .calendar-month thead .workday:is(th),
    .calendar-year thead .workday:is(th),
    .calendar-month thead .no-workday:is(th),
    .calendar-year thead .no-workday:is(th) {
        padding: 0 !important;
    }

    .calendar-month .redletterday, .calendar-year .redletterday {
        color: red;
    }

    .calendar-year .holiday-ba {
        display: flex;
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: var(--holiday-ba);
    }

    .calendar-year .holiday-pu {
        display: flex;
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: var(--holiday-pu);
    }

    .calendar-year .holiday-ww {
        display: flex;
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: var(--holiday-ww);
    }

    .calendar-month .highlight {
        background-color: rgba(var(--bs-secondary-rgb), 0.5);
        border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-secondary);
        border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-secondary);
    }

        .calendar-month .highlight.first-row {
            border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-secondary);
        }

        .calendar-month .highlight.last-row {
            border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-secondary);
        }

    .calendar-year .highlight {
        background-color: rgba(var(--bs-secondary-rgb), 0.5);
        border: var(--bs-border-width) var(--bs-border-style) var(--bs-secondary);
    }

    .calendar-month .pointer,
    .calendar-year .pointer {
        cursor: pointer;
    }

.wrap-content {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

.grid {
}

    .grid.cols-1 {
        grid-template-columns: var(--col-1, auto);
    }

    .grid.cols-2 {
        grid-template-columns: var(--col-1, auto) var(--col-2, auto);
    }

    .grid.cols-3 {
        grid-template-columns: var(--col-1, auto) var(--col-2, auto) var(--col-3, auto);
    }

    .grid.cols-4 {
        grid-template-columns: var(--col-1, auto) var(--col-2, auto) var(--col-3, auto) var(--col-4, auto);
    }

    .grid.cols-5 {
        grid-template-columns: var(--col-1, auto) var(--col-2, auto) var(--col-3, auto) var(--col-4, auto) var(--col-5, auto);
    }

    .grid.cols-6 {
        grid-template-columns: var(--col-1, auto) var(--col-2, auto) var(--col-3, auto) var(--col-4, auto) var(--col-5, auto) var(--col-6, auto);
    }

    .grid.cols-7 {
        grid-template-columns: var(--col-1, auto) var(--col-2, auto) var(--col-3, auto) var(--col-4, auto) var(--col-5, auto) var(--col-6, auto) var(--col-7, auto);
    }

    .grid.cols-8 {
        grid-template-columns: var(--col-1, auto) var(--col-2, auto) var(--col-3, auto) var(--col-4, auto) var(--col-5, auto) var(--col-6, auto) var(--col-7, auto) var(--col-8, auto);
    }

    .grid.cols-9 {
        grid-template-columns: var(--col-1, auto) var(--col-2, auto) var(--col-3, auto) var(--col-4, auto) var(--col-5, auto) var(--col-6, auto) var(--col-7, auto) var(--col-8, auto) var(--col-9, auto);
    }

    .grid.cols-10 {
        grid-template-columns: var(--col-1, auto) var(--col-2, auto) var(--col-3, auto) var(--col-4, auto) var(--col-5, auto) var(--col-6, auto) var(--col-7, auto) var(--col-8, auto) var(--col-9, auto) var(--col-10, auto);
    }

    .grid.cols-11 {
        grid-template-columns: var(--col-1, auto) var(--col-2, auto) var(--col-3, auto) var(--col-4, auto) var(--col-5, auto) var(--col-6, auto) var(--col-7, auto) var(--col-8, auto) var(--col-9, auto) var(--col-10, auto) var(--col-11, auto);
    }

    .grid.cols-12 {
        grid-template-columns: var(--col-1, auto) var(--col-2, auto) var(--col-3, auto) var(--col-4, auto) var(--col-5, auto) var(--col-6, auto) var(--col-7, auto) var(--col-8, auto) var(--col-9, auto) var(--col-10, auto) var(--col-11, auto) var(--col-12, auto);
    }

    .grid.grid-left {
        justify-content: start;
    }

    .grid.grid-right {
        text-align: right;
        justify-content: end;
    }

    .grid .colspan-2 {
        grid-column-end: span 2;
    }

    .grid .colspan-3 {
        grid-column-end: span 3;
    }

    .grid .colspan-4 {
        grid-column-end: span 4;
    }

    .grid .colspan-5 {
        grid-column-end: span 5;
    }

    .grid .colspan-6 {
        grid-column-end: span 6;
    }

    .grid .colspan-7 {
        grid-column-end: span 7;
    }

    .grid .colspan-8 {
        grid-column-end: span 8;
    }

    .grid.sticky-rows {
        grid-template-columns: auto;
        height: 100%;
        width: 100%;
    }

        .grid.sticky-rows.sticky-3 {
            grid-template-columns: auto;
            grid-template-rows: auto auto 1fr;
            overflow: auto;
        }

        .grid.sticky-rows.sticky-3-2 {
            grid-template-columns: auto;
            grid-template-rows: auto 1fr auto;
        }

            .grid.sticky-rows.sticky-3-2 > *:nth-child(2) {
                overflow: auto;
            }

        .grid.sticky-rows.sticky-2-1 {
            grid-template-columns: auto;
            grid-template-rows: 1fr auto;
        }

            .grid.sticky-rows.sticky-2-1 > *:first-child {
                overflow: auto;
            }

        .grid.sticky-rows.sticky-2-2 {
            grid-template-columns: auto;
            grid-template-rows: auto 1fr;
        }

            .grid.sticky-rows.sticky-2-2 > *:nth-child(2) {
                overflow: auto;
            }

        .grid.sticky-rows.sticky-1-1 {
            grid-template-columns: auto;
            grid-template-rows: 1fr;
        }

            .grid.sticky-rows.sticky-1-1 > *:first-child {
                overflow: auto;

                @media print {
                    overflow: unset;
                }
            }

.grid-col-3-mid-auto {
    grid-template-columns: 1fr auto 1fr;
}

.border-frame {
    padding: 0.5rem;
    height: 100%;
    width: 100%;
    overflow: hidden;

    @media print {
        overflow: unset;

        > .card {
            border: none;
        }

        padding: unset;
    }
}

.align-left {
    text-align: left !important;
}

.align-center {
    text-align: center !important;
}

.align-right {
    text-align: right !important;
}

.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100dvw;
    height: 100dvh;
}

.loginform {
    background-attachment: fixed;
    background-image: url('../env/prod/graphics/login_background.png');
    background-repeat: no-repeat;
    background-size: auto;
    background-position: right center;
}

    .loginform.test-environment {
        background-image: url('../env/test/graphics/login_background.png');
    }

.loginpage {
    --login-padding: 30px;
    border: 1px solid var(--bs-border-color-translucent);
    width: 350px;
    max-width: 350px;
    min-width: 300px;
    padding: var(--login-padding);
    background-color: var(--bs-body-bg);
    display: flex;
    flex-direction: column;
}

    .loginpage .brand {
        padding-bottom: 10px;
        background-color: var(--bs-body-bg);
    }

.fullscreen .init-spinner {
    font-size: 2rem;
    background-color: var(--bs-body-bg);
    padding: 1em;
    border: 1px solid var(--bs-border-color-translucent);
}

.bottom-sticky {
    bottom: 0;
    position: sticky;
}

.not-authorized {
    color: red;
    vertical-align: middle;
    text-align: center;
}

.page-not-found {
    color: red;
    vertical-align: middle;
    text-align: center;
}

.valign-middle {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.approval-status {
    font-size: 1.5rem;
    font-weight: bold;
}

.text-text {
    text-align: left;
}

td[data-xl-datatype='Bit'],
th[data-xl-datatype='Bit'] {
    text-align: center;
}

td[data-xl-datatype='Currency'],
td[data-xl-datatype='Date'],
td[data-xl-datatype='DateTimeLong'],
td[data-xl-datatype='DateTimeShort'],
td[data-xl-datatype='DateWeekday'],
td[data-xl-datatype='Number'],
td[data-xl-datatype='Number01'],
td[data-xl-datatype='Number02'],
td[data-xl-datatype='NumberShort'],
td[data-xl-datatype='TimeLong'],
td[data-xl-datatype='TimeShort'],
td[data-xl-datatype='WorkTime'],
td[data-xl-datatype='WorkTimeDecimal'],
th[data-xl-datatype='Currency'],
th[data-xl-datatype='Date'],
th[data-xl-datatype='DateTimeLong'],
th[data-xl-datatype='DateTimeShort'],
th[data-xl-datatype='DateWeekday'],
th[data-xl-datatype='Number'],
th[data-xl-datatype='Number01'],
th[data-xl-datatype='Number02'],
th[data-xl-datatype='NumberShort'],
th[data-xl-datatype='TimeLong'],
th[data-xl-datatype='TimeShort'],
th[data-xl-datatype='WorkTime'],
th[data-xl-datatype='WorkTimeDecimal'] {
    text-align: right;
}

.text-30 {
    min-width: 30ch;
    width: 100%;
}

.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    grid-gap: var(--grid-gap);
}

.flex-item {
    display: flex;
    flex-wrap: nowrap;
    column-gap: var(--grid-gap);
}

.flex-fill,
.flex-fill > div:has(input),
.flex-fill > div:has(select) {
    flex: 1 1 auto !important;
}

.offcanvas-bottom.centered {
    width: 400px;
    height: unset;
    margin: auto;
    margin-bottom: 0.5rem;
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
    border: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    border-radius: 6px;
}

.no-margin {
    margin: 0;
}

.no-padding-left {
    padding-left: 0 !important;
}

.no-padding-right {
    padding-right: 0 !important;
}

.z-index-topmost {
    z-index: var(--z-index-topmost);
}

.flex-cols-auto > div {
    width: auto;
}

.flex-cols-1 > div {
    width: 100%;
}

    .flex-cols-1 > div > div:has(input),
    .flex-cols-1 > div > div:has(select) {
        width: 100%;
    }

.flex-cols-2 > div {
    width: calc(100% / 2 - var(--grid-gap) / 2);
}

    .flex-cols-2 > div > div:has(input),
    .flex-cols-2 > div > div:has(select) {
        width: 100%;
    }

@media screen and (max-width: 575.98px) {
    .flex-cols-2 > div {
        width: 100%;
    }
}

.flex-cols-2-static > div {
    width: calc(100% / 2 - var(--grid-gap) / 2);
}

.flex-cols-3 > div {
    width: calc(100% / 3 - var(--grid-gap) * 2 / 3);
}

    .flex-cols-3 > div > div:has(input),
    .flex-cols-3 > div > div:has(select) {
        width: 100%;
    }

@media screen and (max-width: 991.98px) {
    .flex-cols-3 > div {
        width: calc(100% / 2 - var(--grid-gap) / 2);
    }
}

@media screen and (max-width: 575.98px) {
    .flex-cols-3 > div {
        width: 100%;
    }
}

.flex-cols-4 > div {
    width: calc(100% / 4 - var(--grid-gap) * 3 / 4);
}

    .flex-cols-4 > div > div:has(input),
    .flex-cols-4 > div > div:has(select) {
        width: 100%;
    }

@media screen and (max-width: 1399.98px) {
    .flex-cols-4 > div {
        width: calc(100% / 3 - var(--grid-gap) * 2 / 3);
    }
}

@media screen and (max-width: 1199.98px) {
    .flex-cols-4 > div {
        width: calc(100% / 2 - var(--grid-gap) / 2);
    }
}

@media screen and (max-width: 575.98px) {
    .flex-cols-4 > div {
        width: 100%;
    }
}

.flex-cols-5 > div {
    width: calc(100% / 5 - var(--grid-gap) * 4 / 5);
}

    .flex-cols-5 > div > div:has(input),
    .flex-cols-5 > div > div:has(select) {
        width: 100%;
    }

@media screen and (max-width: 1399.98px) {
    .flex-cols-5 > div {
        width: calc(100% / 4 - var(--grid-gap) * 3 / 4);
    }
}

@media screen and (max-width: 1199.98px) {
    .flex-cols-5 > div {
        width: calc(100% / 3 - var(--grid-gap) * 2 / 3);
    }
}

@media screen and (max-width: 991.98px) {
    .flex-cols-5 > div {
        width: calc(100% / 2 - var(--grid-gap) / 2);
    }
}

@media screen and (max-width: 575.98px) {
    .flex-cols-5 > div {
        width: 100%;
    }
}

.flex-cols-6 > div {
    width: calc(100% / 6 - var(--grid-gap) * 5 / 6);
}

    .flex-cols-6 > div > div:has(input),
    .flex-cols-6 > div > div:has(select) {
        width: 100%;
    }

@media screen and (max-width: 1399.98px) {
    .flex-cols-6 > div {
        width: calc(100% / 5 - var(--grid-gap) * 4 / 5);
    }
}

@media screen and (max-width: 1199.98px) {
    .flex-cols-6 > div {
        width: calc(100% / 3 - var(--grid-gap) * 2 / 3);
    }
}

@media screen and (max-width: 991.98px) {
    .flex-cols-6 > div {
        width: calc(100% / 2 - var(--grid-gap) / 2);
    }
}

@media screen and (max-width: 575.98px) {
    .flex-cols-6 > div {
        width: 100%;
    }
}

.flex-cols-7 > div {
    width: calc(100% / 7 - var(--grid-gap) * 6 / 7);
}

    .flex-cols-7 > div > div:has(input),
    .flex-cols-7 > div > div:has(select) {
        width: 100%;
    }

@media screen and (max-width: 1399.98px) {
    .flex-cols-7 > div {
        width: calc(100% / 5 - var(--grid-gap) * 4 / 5);
    }
}

@media screen and (max-width: 1199.98px) {
    .flex-cols-7 > div {
        width: calc(100% / 3 - var(--grid-gap) * 2 / 3);
    }
}

@media screen and (max-width: 991.98px) {
    .flex-cols-7 > div {
        width: calc(100% / 2 - var(--grid-gap) / 2);
    }
}

@media screen and (max-width: 575.98px) {
    .flex-cols-7 > div {
        width: 100%;
    }
}

.flex-cols-8 > div {
    width: calc(100% / 8 - var(--grid-gap) * 7 / 8);
}

    .flex-cols-8 > div > div:has(input),
    .flex-cols-8 > div > div:has(select) {
        width: 100%;
    }

@media screen and (max-width: 1399.98px) {
    .flex-cols-8 > div {
        width: calc(100% / 5 - var(--grid-gap) * 5 / 6);
    }
}

@media screen and (max-width: 1199.98px) {
    .flex-cols-8 > div {
        width: calc(100% / 3 - var(--grid-gap) * 3 / 4);
    }
}

@media screen and (max-width: 991.98px) {
    .flex-cols-8 > div {
        width: calc(100% / 2 - var(--grid-gap) / 2);
    }
}

@media screen and (max-width: 575.98px) {
    .flex-cols-8 > div {
        width: 100%;
    }
}

@media screen and (max-width: 991.98px) {
    .flex-fill-lg,
    .flex-fill-lg > div:has(input),
    .flex-fill-lg > div:has(select) {
        flex: 1 1 auto !important;
    }
}

.hr-delimiter1 {
    border-top: 2px solid var(--bs-secondary);
    margin: 0.5rem 0;
    opacity: 1;
}

.hr-delimiter2 {
    border-top: 2px dotted var(--bs-secondary);
    margin: 0.5rem 0;
    opacity: 1;
}

@media screen and (max-width: 767.98px) {
    .timerecording-entry {
        border: 2px solid var(--bs-secondary);
        border-radius: var(--bs-border-radius);
        padding: 0.2rem;
        margin: 0.5rem 0;
    }

        .timerecording-entry.hr-delimiter1 {
            display: none;
        }
}

.avatar {
    position: relative;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 14px;
    border-radius: 50%;
    object-fit: cover;
    -webkit-user-select: none;
    user-select: none;
}

.unsupported-browser {
    font-size: 32px;
}

.acked:before {
    content: "✔";
}

.unacked:before {
    content: "✖";
}

.mirror-vertical {
    transform: scaleY(-1);
}

.mirror-horizontal {
    transform: scaleX(-1);
}

.docviewer {
    position: fixed;
    top: var(--top-row-height);
    bottom: 0;
    right: 0;
    left: 250px;
    width: 100%;
    border: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100%;
}

.title-balance-employee {
    height: 30px;
}

.btn-come, .btn-go, .btn-sick {
    width: 100%;
    font-size: 2rem;
}

    .btn-come .font-symbol,
    .btn-go .font-symbol,
    .btn-sick .font-symbol {
        font-size: 5rem;
    }

.btn-come, .btn-go {
    height: 200px;
}

.btn-sick {
    height: 50px;
}

@media print {
    a {
        color: inherit;
        text-decoration-line: none !important;
        pointer-events: none;
    }

        a[href]:after {
            display: none !important;
        }

    @page {
        size: unset;
    }
}

@media screen and (max-width: 575.98px) {
    .top-header > div:nth-child(2) {
        visibility: hidden;
        width: 0;
    }
}

@media screen and (max-width: 767.98px) {
    .hdr-timerecording > div:first-child,
    .hdr-timerecording > div:nth-child(2) {
        visibility: hidden;
        width: 0;
    }
}

@media screen and (max-width: 1199.98px) {
    .grid-col-3-mid-auto {
        grid-template-columns: auto auto auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

app {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "top top"
        "left content";
    /*See https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser*/
    height: 100dvh;

    @media print {
        grid-template-columns: 1fr;
        grid-template-rows: 100dvh;
        grid-template-areas: "content";
    }
}

.top-area {
    height: var(--top-row-height);
    grid-area: top;
}

    .top-area.not-authenticated {
        height: 0px;
    }

.left-area {
    grid-area: left;
    overflow-y: auto;
}

    .left-area .zmdi,
    .left-area .far,
    .left-area .fas {
        width: 2.5rem;
        font-size: 2rem;
        vertical-align: text-top;
        top: -2px;
    }

    .left-area.not-authenticated {
        width: 0px;
    }

.content-area {
    border-top: 1px solid var(--bs-border-color-translucent);
    border-left: 1px solid var(--bs-border-color-translucent);
    grid-area: content;
    overflow-y: auto;

    @media print {
        border: none;
        overflow-y: unset;
    }
}

    .content-area.not-authenticated {
        border: none;
    }

.btn-entire-width {
    flex: 1;
    align-items: center;
    position: relative;
}

    .btn-entire-width img {
        position: absolute;
        left: 0.5rem;
    }

.navbar {
    padding: 0;
    min-height: calc(100dvh - var(--top-row-height));
}

    .navbar img {
        height: 24px;
    }

    .navbar .active img {
        /*see https://angel-rs.github.io/css-color-filter-generator/*/
        filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(279deg) brightness(102%) contrast(104%);
    }

    .navbar.collapsed {
        max-width: 40px;
        min-width: 40px;
    }

        .navbar.collapsed .nav-item-desc {
            display: none;
        }

    .navbar:not(.collapsed) {
        max-width: 250px;
        min-width: 250px;
    }

        .navbar:not(.collapsed) .nav-item-desc {
            display: flex;
            text-align: left;
        }

@media screen and (min-width: 1199.98px) {
    .navbar.collapsed {
        max-width: 250px;
        min-width: 250px;
    }

        .navbar.collapsed .nav-item-desc {
            display: flex;
            text-align: left;
        }
}

.navbar > .container {
    flex-direction: column;
}

@media screen and (min-width: 1199.98px) {
    .navbar-toggle {
        display: none !important;
    }
}

.nav-link {
    font-size: 1rem;
}

    .nav-link.active {
        font-weight: bold;
    }

.tt-left.tooltip > .tooltip-inner {
    text-align: left;
}

@media screen and (min-width: 991.98px) {
    .reportfilter .card {
        border: none;
    }

    .reportfilter .card-header {
        display: none;
    }

    .reportfilter .card-body {
        padding: unset;
    }

    .reportfilter .collapse:not(.show) {
        display: initial;
    }
}

@media screen and (max-width: 992px) {
    .reportfilter .card {
        --margin-x: calc(var(--bs-card-spacer-x) * -1 - var(--bs-border-width));
        --margin-y: calc(var(--bs-card-spacer-y) * -1 - var(--bs-border-width));
        margin: var(--margin-y) var(--margin-x) 0 var(--margin-x);
    }
}

/*@media only screen and (orientation:portrait) and (max-width: 767.98px) {
    body {
        height: 100dvw;
        width: 100dvh;
        transform: rotate(90deg);
    }
}*/

.business-card {
    border-radius: 0.75rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
    aspect-ratio: 1.6 / 1;
    margin-top: 1rem;
    margin-bottom: 1rem;
    width: 100%;
}

    .business-card .name {
        color: var(--bs-secondary);
    }

    .business-card .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin-top: 1rem;
    }

        .business-card .top > :first-child {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .business-card .top > :last-child {
            display: flex;
            align-items: center;
        }

    .business-card .bottom {
        margin-top: auto;
        margin-bottom: 1rem;
    }

    .business-card .qr-image {
        height: 100%;
        width: auto;
        max-height: 100%;
    }

.modal.backdrop-blur {
    backdrop-filter: blur(5px);
    background-color: rgba(0, 0, 0, 0.5);
}

.min-height-500 {
    min-height: 500px;
}

@media screen and (max-height: 499.98px) {
    .min-height-500 {
        min-height: calc(100dvh);
    }
}

.cursor-pointer {
    cursor: pointer;
}

.table-hover > tbody {
    cursor: pointer;
}

.drop-zone {
    width: 100%;
    height: 100px;
    border: 2px dashed var(--bs-secondary);
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .drop-zone.drop-zone-invalid {
        border: 2px dashed var(--bs-danger);
        background: var(--bs-danger-border-subtle);
    }

    .drop-zone.dragover {
        border: 2px dashed var(--bs-secondary);
        background: var(--bs-secondary-border-subtle);
    }

/* Styles for release notes - when updating use the configuration of the default bootstrap CSS variables */
.release-notes {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-black: #000;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-primary-rgb: 13, 110, 253;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-success-rgb: 25, 135, 84;
    --bs-info-rgb: 13, 202, 240;
    --bs-warning-rgb: 255, 193, 7;
    --bs-danger-rgb: 220, 53, 69;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark-rgb: 33, 37, 41;
    --bs-primary-text-emphasis: #052c65;
    --bs-secondary-text-emphasis: #2b2f32;
    --bs-success-text-emphasis: #0a3622;
    --bs-info-text-emphasis: #055160;
    --bs-warning-text-emphasis: #664d03;
    --bs-danger-text-emphasis: #58151c;
    --bs-light-text-emphasis: #495057;
    --bs-dark-text-emphasis: #495057;
    --bs-primary-bg-subtle: #cfe2ff;
    --bs-secondary-bg-subtle: #e2e3e5;
    --bs-success-bg-subtle: #d1e7dd;
    --bs-info-bg-subtle: #cff4fc;
    --bs-warning-bg-subtle: #fff3cd;
    --bs-danger-bg-subtle: #f8d7da;
    --bs-light-bg-subtle: #fcfcfd;
    --bs-dark-bg-subtle: #ced4da;
    --bs-primary-border-subtle: #9ec5fe;
    --bs-secondary-border-subtle: #c4c8cb;
    --bs-success-border-subtle: #a3cfbb;
    --bs-info-border-subtle: #9eeaf9;
    --bs-warning-border-subtle: #ffe69c;
    --bs-danger-border-subtle: #f1aeb5;
    --bs-light-border-subtle: #e9ecef;
    --bs-dark-border-subtle: #adb5bd;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-family: var(--bs-font-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;
    --bs-body-bg: #fff;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-emphasis-color: #000;
    --bs-emphasis-color-rgb: 0, 0, 0;
    --bs-secondary-color: rgba(33, 37, 41, 0.75);
    --bs-secondary-color-rgb: 33, 37, 41;
    --bs-secondary-bg: #e9ecef;
    --bs-secondary-bg-rgb: 233, 236, 239;
    --bs-tertiary-color: rgba(33, 37, 41, 0.5);
    --bs-tertiary-color-rgb: 33, 37, 41;
    --bs-tertiary-bg: #f8f9fa;
    --bs-tertiary-bg-rgb: 248, 249, 250;
    --bs-heading-color: inherit;
    --bs-link-color: #0d6efd;
    --bs-link-color-rgb: 13, 110, 253;
    --bs-link-decoration: underline;
    --bs-link-hover-color: #0a58ca;
    --bs-link-hover-color-rgb: 10, 88, 202;
    --bs-code-color: #d63384;
    --bs-highlight-color: #212529;
    --bs-highlight-bg: #fff3cd;
    --bs-border-width: 1px;
    --bs-border-style: solid;
    --bs-border-color: #dee2e6;
    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
    --bs-border-radius: 0.375rem;
    --bs-border-radius-sm: 0.25rem;
    --bs-border-radius-lg: 0.5rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-xxl: 2rem;
    --bs-border-radius-2xl: var(--bs-border-radius-xxl);
    --bs-border-radius-pill: 50rem;
    --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
    --bs-focus-ring-width: 0.25rem;
    --bs-focus-ring-opacity: 0.25;
    --bs-focus-ring-color: rgba(13, 110, 253, 0.25);
    --bs-form-valid-color: #198754;
    --bs-form-valid-border-color: #198754;
    --bs-form-invalid-color: #dc3545;
    --bs-form-invalid-border-color: #dc3545;
}

[data-bs-theme=dark] .release-notes {
    color-scheme: dark;
    --bs-body-color: #dee2e6;
    --bs-body-color-rgb: 222, 226, 230;
    --bs-body-bg: #212529;
    --bs-body-bg-rgb: 33, 37, 41;
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: rgba(222, 226, 230, 0.75);
    --bs-secondary-color-rgb: 222, 226, 230;
    --bs-secondary-bg: #343a40;
    --bs-secondary-bg-rgb: 52, 58, 64;
    --bs-tertiary-color: rgba(222, 226, 230, 0.5);
    --bs-tertiary-color-rgb: 222, 226, 230;
    --bs-tertiary-bg: #2b3035;
    --bs-tertiary-bg-rgb: 43, 48, 53;
    --bs-primary-text-emphasis: #6ea8fe;
    --bs-secondary-text-emphasis: #a7acb1;
    --bs-success-text-emphasis: #75b798;
    --bs-info-text-emphasis: #6edff6;
    --bs-warning-text-emphasis: #ffda6a;
    --bs-danger-text-emphasis: #ea868f;
    --bs-light-text-emphasis: #f8f9fa;
    --bs-dark-text-emphasis: #dee2e6;
    --bs-primary-bg-subtle: #031633;
    --bs-secondary-bg-subtle: #161719;
    --bs-success-bg-subtle: #051b11;
    --bs-info-bg-subtle: #032830;
    --bs-warning-bg-subtle: #332701;
    --bs-danger-bg-subtle: #2c0b0e;
    --bs-light-bg-subtle: #343a40;
    --bs-dark-bg-subtle: #1a1d20;
    --bs-primary-border-subtle: #084298;
    --bs-secondary-border-subtle: #41464b;
    --bs-success-border-subtle: #0f5132;
    --bs-info-border-subtle: #087990;
    --bs-warning-border-subtle: #997404;
    --bs-danger-border-subtle: #842029;
    --bs-light-border-subtle: #495057;
    --bs-dark-border-subtle: #343a40;
    --bs-heading-color: inherit;
    --bs-link-color: #6ea8fe;
    --bs-link-hover-color: #8bb9fe;
    --bs-link-color-rgb: 110, 168, 254;
    --bs-link-hover-color-rgb: 139, 185, 254;
    --bs-code-color: #e685b5;
    --bs-highlight-color: #dee2e6;
    --bs-highlight-bg: #664d03;
    --bs-border-color: #495057;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
    --bs-form-valid-color: #75b798;
    --bs-form-valid-border-color: #75b798;
    --bs-form-invalid-color: #ea868f;
    --bs-form-invalid-border-color: #ea868f;
}