html,
body {
    width: 100%;
    height: 100%;
}

html {
  font-size: 16px;
}

pre {
    overflow: unset;
}

.body-container {
    display: flex;
    flex-direction: column;
    min-height: 100dvh; /* dvh handles mobile browser toolbars beautifully */
    margin: 0;
}

    .body-container header {
        height: 60px;
    }

    .body-container main {
        flex-grow: 1;
        display: grid;
    }

.nav-underline .nav-link {
    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
    color: var(--bs-secondary-color);
}

    .nav-underline .nav-link.active, .nav-underline .show > .nav-link {
        color: var(--bs-body-color);
        font-weight: normal;
    }

    .nav-underline .nav-link:hover {
        color: var(--bs-nav-link-hover-color);
    }

.avatar {
    position: relative;
    display: inline-block;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: .5rem
}

    .avatar .avatar-initials {
        width: 2.7rem;
        height: 2.7rem
    }

.avatar-circle .avatar-img {
    border-radius: 50%
}

.avatar-sm {
    width: 32px;
    height: 32px
}

    .avatar-sm .avatar-img {
        width: 32px;
        height: 32px;
        object-fit: cover
    }

.hover-primary:hover {
    color: var(--bs-primary)!important;
}

.btn.hover-primary:hover {
    border-color: var(--bs-primary) !important;
}

.btn.disabled, .btn:disabled, fieldset:disabled .btn {
    opacity: .25;
}

.btn-icon {
    width: 2rem;
    height: 2rem;
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding-left: 2px;
    padding-right: 2px;
    flex-shrink: 0;
    font-weight: 600;
}

.ag-skeleton-container {
    margin-top: 13px;
}

.ag-header-cell.text-center .ag-header-cell-label {
    justify-content: center;
}

.ag-header-cell.text-end .ag-header-cell-label {
    justify-content: flex-end;
}

.ts-wrapper .ts-control {
    flex-wrap: nowrap !important;
}

    .ts-wrapper .ts-control > div {
        white-space: nowrap;
        overflow: hidden;
    }
    .ts-wrapper .ts-control > input {
        width: 5px;
    }

.ts-wrapper .ts-dropdown {
    flex-wrap: nowrap !important;
    overflow-x: auto;
}

    .ts-wrapper .ts-dropdown > div {
        white-space: nowrap;
    }

i.overlay {
    position: absolute;
    left: 12px;
}

.mt-n20 {
    margin-top: -20px;
}

.form-control.is-valid,
.was-validated .form-control:valid
{
    background-image: none !important;
    border-color: var(--bs-border-color);
}

.form-select.is-valid,
.was-validated .form-select:valid:not([multiple]):not([size]) {
    --bs-form-select-bg-icon: none;
    background-size: 16px 12px;
    border-color: var(--bs-border-color);
}

.form-check-input.is-valid,
.was-validated .form-check-input:valid {
    border-color: var(--bs-border-color);
}

    .form-check-input.is-valid:checked,
    .was-validated .form-check-input:valid:checked {
        background-color: var(--bs-primary);
    }

    .form-check-input.is-valid ~ .form-check-label,
    .was-validated .form-check-input:valid ~ .form-check-label {
        color: var(--bs-modal-color);
    }

    .form-control.is-valid:focus,
    .form-check-input.is-valid:focus,
    .was-validated .form-control:valid:focus,
    .was-validated .form-check-input:valid:focus,
    .was-validated .form-select:valid:focus {
        border-color: var(--bs-border-color);
        box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb),.25);
    }