body {
    background-color: white !important;
    color: #2c2c2c;
    font-family: "Open Sans", sans-serif;
}

.navbar-header {
    background-color: #000 !important;
    /* black header bar */
    color: white;
    padding: 10px 20px;
}

.navbar {
    background-color: #274185 !important;
    /* deep blue bar */
    border-bottom: 2px solid #F28F0B;
}

/* App header: one horizontal row (grid); keep bar from stacking like a collapsed navbar */
.navbar.portal-header-navbar {
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    border-bottom: none !important;
}

.portal-header-inner.container-fluid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
}

.portal-header-main-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center;
    column-gap: 0.5rem;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.navbar a,
.navbar-brand,
.dropdown-item {
    color: white !important;
    font-weight: bold;
}

.card {
    background-color: white !important;
    border: 1px solid #ccc;
    border-radius: 8px;
}

.card-body {
    color: #2c2c2c;
}

.table th,
.table td {
    color: #2c2c2c !important;
}

/* Buttons */
.btn-primary {
    background-color: #274185;
    border-color: #274185;
}

.btn-secondary {
    background-color: #F28F0B;
    border-color: #F28F0B;
    color: black;
}

/* Notes and Percentile styling override if needed */
.badge-percentile {
    font-weight: bold;
    border-radius: 6px;
    padding: 2px 8px;
    color: black;
}