html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;

    &.unauth {
        background: #ffffff;
    }
}

#universal-nav {
    min-height: unset;
}

#maincontent {
    flex: 1 0 auto;
}

#footer {
    margin-top: 32px;
    flex-shrink: 0;

    FOOTER {
        padding: 35px 0;
    }

    IMG {
        width: 120px;
    }

}

.mfa-qr-code {
    background-color: #ffffff;
    border-radius: 4px;
}

.turasForm .form-group .form-control.mfa-input,
.mfa-input {
    font-size: 2em;
    font-family: monospace;
    text-align: center;
    padding: 12px 16px;
    letter-spacing: 4px;
    margin: 16px 0;

    &::placeholder {
        color: #cccccc;
    }
}

H2:first-of-type {
    margin-top: 4px;
}

form > H2:first-of-type,
div > H3:first-of-type {
    margin-top: 0;
}

.input-with-clear,
.select-wrapper {
    position: relative;
}

.select-wrapper::after {
    content: "\f078";
    font: var(--fa-font-regular);
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

/*
 */

.length-container select {
    display: inline-block;
    width: unset;
}

.btn:only-of-type {
    margin-right: 0;
}

.input-with-clear .form-control.has-value {
    padding-right: 32px;
    background: #FEE6B1
}

.input-with-clear input[type='date'].has-value {
    padding-right: 8px;
}

.input-with-clear .clear-button {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: none;
    border: 0;
    cursor: pointer;
}

.input-with-clear .clear-button {
    right: 0.75rem;
}

.input-with-clear.select-wrapper .clear-button {
    right: 40px;
}

.input-with-clear.date-wrapper .clear-button {
    right: 40px;
}

BODY.tabbed-page .turasSection:first-child {
    padding-top: 0;
}


.banner {
    font-size: 24pt;
    width: 100%;
    line-height: 1em;
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    color: #fff;
    padding: 1em;
    z-index: 1000000;
    transform: translateY(-100%);
    transition: transform 500ms ease-in-out;
    will-change: transform;

}

.banner.info {
    background: #007f3b;
}

.banner.error {
    background: #d5281b;
}

.banner.banner-visible {
    transform: translateY(0);
    opacity: 1;
}

.banner.banner-hidden {
    display: none;
}


/*table tbody tr:hover td,*/
/*table tbody tr:hover th,*/
.table-striped tbody tr:hover td,
.table-striped tbody tr:hover th {
    background: #E8EFFE;
}

.table-responsive table {

    td, th {
        white-space: nowrap;
    }
}

@media (max-width: 768px) {

    .table-responsive table {
        width: auto;
    }

    .table-linearize {
        display: block;
    }

    .table-linearize thead {
        display: none;
    }

    .table-linearize tbody,
    .table-linearize tr,
    .table-linearize td,
    .table-linearize th {
        display: block;
        width: auto;
    }

    .table-linearize tr {
        margin-bottom: 1rem;
        border: 1px solid #dee2e6;
    }

    .table-linearize td {
        text-align: right;
        padding-left: 50%;
        position: relative;
        background-color: #f1f3fa;
    }

    .table-linearize tr td:nth-of-type(odd) {
        background-color: var(--bs-table-bg);
    }

    .table-linearize td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        padding-left: 0.75rem;
        font-weight: bold;
        text-align: left;
    }
}


#searchContainer .tab-content.tab-components {
    padding-bottom: 0;
}


.dataTables_wrapper table.dataTable {
    margin-top: 0 !important;
}

.card-icon {
    font-size: 48px;
    line-height: 1;
    margin-bottom: 8px;
}


.inline-logout {
    BUTTON {
        color: #0556AD;
        text-decoration: underline;
        border: none;
        background: none;
        padding: 0;
        margin: 0;
    }
}


.print-only {
    display: none;
}


.recovery-codes-saved-container {
    margin-bottom: 32px;
}

.recovery-codes-list {
    list-style-type: none;
    display: grid;
    grid-template-columns: max-content max-content;
    gap: 32px;
    margin: 0 0 32px 0;
    padding: 0;

    LI {
        margin: 0;
        padding: 0;

        CODE {
            font-size: 2em;
            color: var(--body-text-color);
        }
    }
}

@media print {

    *,
    BODY {
        background: none;
    }

    .screen-only {
        display: none !important;
    }

    .print-only {
        display: block !important;
    }

    #mainbanner,
    #footer {
        display: none;
    }

    code {
        font-family: monospace !important;
        font-size: 14pt !important;
        letter-spacing: 0.15rem !important;
        color: #000 !important;
        background: none !important;
    }

    .recovery-codes-print-header {
        display: block !important;
        text-align: center;
        margin-bottom: 0.5rem;
        font-size: 12pt;
        font-weight: bold;
    }

}

TABLE TBODY TR TH {
    border: none;
}

table.dataTable THEAD TH.C,
TH.c,
.c {
    text-align: center !important;
}


/*
 * For centred sortable columns the design-system's absolutely-positioned
 * ::after icon ends up pinned to the left of the cell while the text
 * sits in the centre. Suppress it and render the icon inline as a
 * ::before on the link, so icon + text sit together just left of centre.
 */
table.dataTable > thead .sorting.c:after,
table.dataTable > thead .sorting_asc.c:after,
table.dataTable > thead .sorting_desc.c:after {
    display: none !important;
}

table.dataTable > thead .sorting.c .turas-link::before,
table.dataTable > thead .sorting_asc.c .turas-link::before,
table.dataTable > thead .sorting_desc.c .turas-link::before {
    font: var(--fa-font-regular);
    color: #7490aa;
    margin-right: 0.4em;
    content: "\f07d";
}

table.dataTable > thead .sorting_asc.c .turas-link::before {
    content: "\f176";
}

table.dataTable > thead .sorting_desc.c .turas-link::before {
    content: "\f175";
}


.turasSection p A.btn-primary,
A.btn-primary:link,
A.btn-primary:visited {
    color: white;
    text-decoration: none;
}


.turasSection p A.btn-outline,
A.btn-outline:link,
A.btn-outline:visited {
    text-decoration: none;
}


.input-group > .btn {
    padding: 0.375rem 0.75rem;
    border-width: 1px;
    margin: 0;
}


.modal .modal-dialog {
    margin: 0 auto;
}

.btn-sm, .btn-group-sm > .btn {
    --bs-btn-border-radius: 0;
}


.passkey-signin-container {
    margin-top: 32px;
}

.password-reset {
    margin-top: 8px;
}

.page-item .page-link {
    background: none;
    border: none;
}