[ng-cloak], .ng-cloak {
    display: none !important;
}

body {
    font-family: 'Teachers', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.modal-custom {
    max-height: 84vh;
    height: auto;
    display: flex;
    flex-direction: column;
}

    .modal-custom .modal-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        max-height: 100%;
        overflow: hidden;
    }

    .modal-custom .modal-body {
        flex: 1;
        overflow-y: auto;
        max-height: calc(84vh - 3.5rem); /* header/footer offset */
    }

    .modal-custom .table-scroll {
        max-height: 55vh;
        overflow-y: auto;
    }

.hr-with-text {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
    color: white;
}

    .hr-with-text::before,
    .hr-with-text::after {
        content: "";
        flex: 1;
        border-bottom: 2px solid white;
    }

    .hr-with-text::before {
        margin-right: 10px;
    }

    .hr-with-text::after {
        margin-left: 10px;
    }

.hr-with-text-black {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 10px 0;
    color: black;
}

    .hr-with-text-black::before,
    .hr-with-text-black::after {
        content: "";
        flex: 1;
        border-bottom: 2px solid black;
    }

    .hr-with-text-black::before {
        margin-right: 10px;
    }

    .hr-with-text-black::after {
        margin-left: 10px;
    }

.form-label.tiny {
    font-size: 0.75rem; /* smaller than .small */
    font-weight: 400; /* normal */
    color: #6c757d; /* muted gray */
    margin-bottom: 0.2rem;
}

.btn-pink {
    background-color: deeppink !important;
    color: white !important;
}

.btn-preview {
    background-color: mediumpurple !important;
    color: white !important;
}

/* Client-specific classes */

.bg-upm {
    background-color: #c9234b !important;
}

/* Fractional columns for Core and runtime percentage widths; stack on mobile. */
@media (min-width: 768px) {
    .col-md-0\.6 { flex: 0 0 auto; width: 5%; }
    .col-md-1\.2 { flex: 0 0 auto; width: 10%; }
    .col-md-2\.4 { flex: 0 0 auto; width: 20%; }
    .col-md-2\.52 { flex: 0 0 auto; width: 21%; }
    .col-md-2\.64 { flex: 0 0 auto; width: 22%; }
    .col-md-2\.76 { flex: 0 0 auto; width: 23%; }
    .col-md-2\.88 { flex: 0 0 auto; width: 24%; }
    .col-md-3\.12 { flex: 0 0 auto; width: 26%; }
    .col-md-3\.24 { flex: 0 0 auto; width: 27%; }
    .col-md-3\.36 { flex: 0 0 auto; width: 28%; }
    .col-md-3\.48 { flex: 0 0 auto; width: 29%; }
    .col-md-3\.6 { flex: 0 0 auto; width: 30%; }
}
@media (min-width: 992px) {
    .col-lg-0\.6 { flex: 0 0 auto; width: 5%; }
    .col-lg-1\.2 { flex: 0 0 auto; width: 10%; }
    .col-lg-2\.4 { flex: 0 0 auto; width: 20%; }
    .col-lg-2\.52 { flex: 0 0 auto; width: 21%; }
    .col-lg-2\.64 { flex: 0 0 auto; width: 22%; }
    .col-lg-2\.76 { flex: 0 0 auto; width: 23%; }
    .col-lg-2\.88 { flex: 0 0 auto; width: 24%; }
    .col-lg-3\.12 { flex: 0 0 auto; width: 26%; }
    .col-lg-3\.24 { flex: 0 0 auto; width: 27%; }
    .col-lg-3\.36 { flex: 0 0 auto; width: 28%; }
    .col-lg-3\.48 { flex: 0 0 auto; width: 29%; }
    .col-lg-3\.6 { flex: 0 0 auto; width: 30%; }
}

/* Auto Parts fit their content and keep adjacent actions close, including on mobile. */
.row > .genesis-width-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
    padding-right: 0;
}