body {
    /* 100dvh recalculates as mobile browser chrome (address bar, nav) appears
       and disappears, preventing the page from being taller than the visible
       area. 100vh is the fallback for browsers that don't support dvh (pre-2022). */
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* header and footer hold their natural height and never get compressed by flex,
   regardless of how tall the page content is. */
body>header,
body>footer {
    flex-shrink: 0;
}

/* Centered, capped at 1200px, padded so content never runs to the viewport edge. */
body>main {
    max-width: 75rem;
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
}

body>footer {
    width: 100%;
    padding: 0 1rem 1rem;
}

/* main grows to fill all space between header and footer, keeping the footer
   pinned to the bottom on short pages without removing it from normal flow. */
body>main {
    flex: 1 0 auto;
    /* clip (not hidden) prevents horizontal scrollbars from content overflow
       without creating a new block formatting context. overflow:hidden would
       break position:sticky on any child elements. */
    overflow-x: clip;
}

.skip-to-main {
    position: absolute;
    left: -9999px;
    z-index: 9999;
}

.portal-page {
    margin: 0 auto;
}

.portal-page--default {
    max-width: 45.625rem;
}

.portal-page--wide {
    max-width: 75rem;
}

.guest-card {
    padding: 1.5rem;
}

.guest-card header {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    text-align: center;
}

@media screen and (min-width: 31.25rem) {
    .guest-card header {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        gap: 1rem;
    }
}

/* remove the bootstrap cheveron so we can manually render one */
.user-dd-link .dropdown-toggle::after {
    display: none;
}

.user-dd-link .fa-chevron-down {
    margin-left: 0.25rem;
}

.skip-to-main:focus {
    left: 1rem;
    transform: none;
    top: 1rem;
    padding: 0.5rem 1.5rem;
    background: #fff;
    color: #1E50BF;
    text-decoration: none;
    font-weight: 700;
    text-decoration: underline;
}

/* 
    The color override here is not enough to standardize the body.
    There are some overrides below due to specificity and Bootstrap 
    taking precedence. 
*/
body {
    font-family: 'Karla', sans-serif;
    background-color: #f8f8f8 !important;
    padding-top: 0;
    color: #212529;
}

header.page-header {
    margin-bottom: 1rem;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    column-gap: 0.5rem;
}

header.page-header h1 {
    flex: 1 1 auto;
    min-width: 0;
}

section {
    margin-bottom: 1rem;
}

section:last-child {
    margin-bottom: 0;
}

h1 {
    font-size: 1.75rem;
}

h2 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.switch-account .popup-menu-toggle,
.switch-account .popup-menu-item {
    color: #1E50BF;
}

h2.usage-report-header {
    font-size: 1.3125rem;
    display: inline;
}



.decor-image {
    background-position: 50%;
    background-size: cover;
}

.form-control {
    height: 2.25rem;
}

form.round-fields .form-control {
    /* 9999px is intentionally excessive — any value larger than half the
       element's height produces fully rounded ends (pill shape). A meaningful
       size like 10rem implies intent that isn't there. */
    border-radius: 9999px;
    padding: .5rem rem;
    height: 3rem;
}

form.round-fields .btn,
.btn.rounded-btn {
    font-size: .8rem;
    border-radius: 9999px;
    padding: .75rem 1rem;
}

.danger {
    color: #DF1642;
}

.quick-pay-btn.btn.rounded-btn {
    font-size: 1rem;
    padding: .5rem 1rem;
}

form .form-group .checkbox {
    font-size: 80%;
    font-weight: 400;
    padding-left: 1.5rem;
    position: relative;
}

form .form-group .checkbox input[type="checkbox"]::before {
    font-family: "Font Awesome 5 Free";
    content: "\f0c8";
    font-weight: 400;
    display: inline-block;
    position: absolute;
    background-color: #fff;
    width: 1rem;
}

form .form-group .checkbox input[type="checkbox"]:checked::before {
    content: "\f14a";
    font-weight: 900;
}

form .form-group .checkbox label {
    cursor: pointer;
}

/* 
    - override bootstrap so all text is consistent 
    - body does not take precedence 
*/
.alert {
    color: #212529;
}

.alert.form-errors>p {
    margin-bottom: 0.5rem;
}

.alert.form-errors ul {
    margin-bottom: 0;
}

.navbar.topbar {
    height: 4rem;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}

nav.navbar.sidebar {
    display: none;
    width: 16rem;
    min-height: 100%;
}

#nav-dropdown {
    margin-top: -1.25rem;
    width: 20ch;
    box-shadow: 0 16px 24px 0 #3031331A;
}

#nav-dropdown>.dropdown-header,
.dropdown-item {
    padding: 0.25rem 1rem;
    line-height: normal;
}

#nav-dropdown>.dropdown-item {
    padding-block: 0.75rem;
    white-space: pre-line;
}

#nav-dropdown>.dropdown-item.active {
    background-color: #FFFFFF;
}

#nav-dropdown>.dropdown-item.active i {
    color: #1E50BF;
}

/* must specify color to override bootstrap */
.dropdown-header {
    font-weight: 700;
    background-color: #EEEEEE;
    color: #212529;
}

/* 
    color - have to override so it does not use the color 
        from .navbar .nav-item .nav-link 
*/
.portal-title {
    font-family: 'Lora', serif;
    font-style: normal;
    font-weight: bold;
    font-size: 1.125rem;
    line-height: normal;
    color: #212529;
}

.topbar .navbar-brand {
    display: inline-flex;
    margin-right: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.navbar .nav-item .nav-link {
    color: #6c757d;
}

.navbar.topbar .nav-item .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

/*
    - override the color above when user interacts with link
    - body does not take precedence
*/
.navbar .nav-item .nav-link:hover,
.navbar .nav-item .nav-link:focus-visible,
.navbar .nav-item .nav-link.active,
.navbar .nav-item .nav-link:active,
.navbar .show>.nav-link {
    color: #212529;
}

/* reset browser button defaults when a <button> is used as a nav-link */
.navbar .nav-item button.nav-link,
.navbar .nav-item button.nav-link:hover,
.navbar .nav-item button.nav-link:focus,
.navbar .nav-item button.nav-link:active {
    background: transparent;
    border: none;
}

.sidebar .navbar-brand {
    margin-right: 0;
    white-space: normal;
    display: block;
    text-align: left;
}

.sidebar .navbar-brand .customer-logo {
    display: block;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.sidebar .navbar-brand .portal-title {
    display: block;
}

nav.navbar.sidebar>.container-fluid {
    align-items: flex-start;
}

.sidebar.navbar-expand ul.navbar-nav {
    flex-direction: column;
}

.sidebar .nav-item .nav-link {
    display: block;
    text-align: left;
}

.topbar .nav-link.active:not(.dropdown-toggle) {
    height: 100%;
    /* box-shadow instead of border-bottom — border would add to the box height and
       shift the text upward. inset box-shadow is painted outside the layout so it
       has no effect on size or alignment. */
    box-shadow: inset 0 -0.25rem 0 #1E50BF;
}

/* hide the active indicator icon for non active sidebar links*/
.sidebar .nav-link:not(.active) .fa-check-circle {
    display: none;
}

/* hide nav items that spill over the closed sidebar*/
.sidebar:not(.swipedopen) .nav-item {
    display: none;
}

.customer-logo {
    height: 4rem;
}

.card-header>.btn-group,
.card-header>button {
    margin: -0.25rem;
}

.text-blue {
    color: #1E50BF;
}

.login-title {
    font-family: 'Lora', serif;
    font-size: 2rem;
}

.ff-lora {
    font-family: 'Lora', serif;
}

.fs-14 {
    font-size: 0.875rem !important;
}

.fs-16 {
    font-size: 1rem !important;
}

.fs-18 {
    font-size: 1.125rem !important;
}

.fs-21 {
    font-size: 1.25rem !important;
}

.default-card {
    border-radius: 0.5rem;
}

.default-card a {
    text-decoration: underline;
    color: #1E50BF;
}

.default-card .title {
    font-size: 1.3125rem;
    font-weight: 700;
}

.default-card.no-padding .card-body {
    padding: 0;
}

.gray-container {
    background-color: #FCFCFC;
    border: 1px solid #BDBDBD;
    border-radius: 1rem;
}

.total-border {
    border-top: 2px solid #C4C4C4;
}

.gray-container p {
    font-size: 1rem;
}

.login-section,
.quick-pay-section {
    max-width: 26.125rem;
}

.pay-your-bill-grid:not(.has-quick-pay) .login-section {
    margin: 0 auto;
}


#login-form a {
    display: block;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.btn-ml-primary {
    background-color: #1E50BF;
    color: #FFFFFF;
}

.btn-ml-primary:hover {
    color: #FFFFFF;
}

a.btn-ml-primary {
    color: #FFFFFF;
    text-decoration: none;
}

/* override bootstrap so green check icon matches btn green below */
/* Bootstrap's .text-success uses !important, so we must match to override it. */
.text-success {
    color: #1a7d33 !important;
}

.btn-success {
    background-color: #1a7d33;
    border-color: #1a7d33;
}

.btn-success:hover,
.btn-success:focus {
    background-color: #1c8738;
    border-color: #1c8738;
}

.btn-success:active,
.btn-success.active,
.btn.btn-success:disabled,
.btn.btn-success.disabled {
    background-color: #19692c;
    border-color: #155724;
}

.border-left-primary {
    border-left: .25rem solid #12559F !important;
}

.border-left-primary .text-primary {
    color: #12559F !important;
}

.border-left-success {
    border-left: .25rem solid #0C7F40 !important;
}

.border-left-warning {
    border-left: .25rem solid #F49709 !important;
}

.border-top-dashed {
    border-top: 1px dashed #BDBDBD;
}

.default-border {
    border-top: 1px solid #EEEEEE !important;
}

.default-shadow {
    box-shadow: 0 1px 3px 0 #3031331A;
}

.text-decoration-none {
    text-decoration: none !important;
}

.current-balance {
    background-color: #EEEEEE;
    border-radius: 0.5rem;
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    padding: 0.5rem 0.3rem;
}

.date {
    font-weight: 400;
    font-size: 1.5rem !important;
    text-align: center;
}

.col-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}

/* 
    - override bootstrap mixin that sets the active color to white
    - body does not take precedence 
 */
.dropdown-item.active,
.dropdown-item:active {
    color: #212529;
    background-color: #ccc;
}

.dropdown-item .fa-check-circle {
    display: none;
}

.dropdown-item.active .fa-check-circle {
    display: inline-block;
}

.icon-list .img-thumbnail {
    margin-bottom: 0.75rem;
    padding: 1rem;
}

td.action-column {
    padding: 1rem;
}

/* body is not specific enough */
#site-footer a {
    color: #212529;
    text-decoration: underline;
}

#site-footer ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.5rem;
    padding: 0;
    margin: 0;
}

#site-footer li+li::before {
    content: "\00B7";
    margin-right: 0.5rem;
}

.jumbotron {
    text-align: center;
    background-color: transparent;
}

.jumbotron .btn {
    font-size: 1.25rem;
    padding: 1rem 1.5rem;
}

.not-set {
    color: #c55;
    font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after,
a.desc:after {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    padding-left: 0.25rem;
}

a.asc:after {
    content: "\e151";
}

a.desc:after {
    content: "\e152";
}

.sort-numerical a.asc:after {
    content: "\e153";
}

.sort-numerical a.desc:after {
    content: "\e154";
}

.sort-ordinal a.asc:after {
    content: "\e155";
}

.sort-ordinal a.desc:after {
    content: "\e156";
}

.grid-view td {
    white-space: nowrap;
}

.grid-view .filters input,
.grid-view .filters select {
    min-width: 3.125rem;
}

.hint-block {
    display: block;
    margin-top: 0.25rem;
    color: #999;
}

#paymentform-paydate:not([readonly]) {
    background-image: url("/css/fontawesome-free-5.11.2-web/svgs/regular/calendar-alt.svg");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 1.2rem;
}

button#side-nav-toggle {
    display: none;
    color: #212529;
    padding: 0;
    font-size: 2rem;
    height: auto;
}

#side-nav-toggle button:focus-visible {
    outline: 2px solid;
}

.chart-container {
    height: 17.25rem;
    width: 31.25rem;
}

/* 
    color must be specified and important 
    otherwise .default-card a (anchor) will make it blue 
*/
.report-title {
    color: #212529 !important;
    text-decoration: none !important;
}

.usage-graph {
    border: none;
}

.water-reports-grid thead {
    background-color: #F5F5F5;
}

.water-reports-grid thead th {
    border-bottom: none;
}

.water-reports-grid thead th:first-of-type {
    width: 15.625rem;
}

.water-reports-grid thead th:last-of-type {
    width: 15.625rem;
}

#attachments tbody tr:nth-of-type(odd),
#payment-methods tbody tr:nth-of-type(odd),
.water-reports-grid tbody tr:nth-of-type(odd) {
    background-color: #FFFFFF;
}

#attachments tbody tr:nth-of-type(even),
#payment-methods tbody tr:nth-of-type(even),
.water-reports-grid tbody tr:nth-of-type(even) {
    background-color: #F5F5F5;
}

@media only screen and (max-width: 48rem) {

    /* lock body scroll while the sidebar is open */
    body:has(nav.sidebar.navbar.swipedopen) {
        overflow: hidden;
    }

    /* dither the main content when the sidebar is open */
    body:has(nav.sidebar.navbar.swipedopen)::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1039;
    }

    nav.navbar.sidebar {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 1040;
        background-color: #f8f8f8;
        overflow-y: auto;
    }

    .topbar .navbar-brand {
        display: none;
    }

    nav.navbar.sidebar:not(.swipedopen) {
        width: 0;
        padding: 0;
        margin: 0;
    }

    button#side-nav-toggle {
        display: block;
        z-index: 1041;
    }

    .sidebar .navbar-brand {
        padding-top: 4rem;
    }

    .nav-item-hide {
        display: none;
    }
}

/* External Payment Provider Iframe layout */
.thirdPartyPaymentIframe {
    height: 34.375rem;
    width: 100%;
    border-style: none;
}

/* Cookie Notification layout */
#cookieNotificationToast {
    visibility: hidden;
    background-color: #333E;
    color: #fff;
    padding: 1rem;
    position: fixed;
    z-index: 100;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    flex-flow: column nowrap;
    gap: 1rem;
}

#cookieNotificationButtonArea {
    flex-shrink: 0;
    width: 100%;
}

#cookieNotificationAcceptBtn {
    width: 100%;
}

@media (min-width: 33.75rem) {
    #cookieNotificationToast {
        flex-flow: row nowrap;
        align-items: center;
        width: auto;
    }

    #cookieNotificationTextArea {
        flex: 1 1 auto;
    }

    #cookieNotificationButtonArea {
        width: auto;
    }

    #cookieNotificationAcceptBtn {
        width: auto;
    }
}

#cookieNotificationTextArea a:link,
#cookieNotificationTextArea a:visited {
    background-color: #1E50BF;
    color: #fff;
    border-radius: 0.5rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

/* Payment Method Validation Screen */
#adverse-action .print-btn {
    padding-block: 0.5rem;
    width: 100%;
    border: 1px solid;
    border-radius: 0.5rem 0.5rem 0 0;
    cursor: pointer;
}

#adverse-message {
    padding-block: 1rem;
    border: solid 1px;
    border-top: 0;
    border-radius: 0 0 0.5rem 0.5rem;
    background-color: white;
}

#adverse-message {
    padding: 1rem;
}

#adverse-message p:last-child {
    margin-bottom: 0;
}

#adverse-message address {
    margin-bottom: 2rem;
}

/* Not sure why this needs to be capitalized, but context feels regulatory, so we'll leave it */
#adverse-message address p {
    margin: 0;
    text-transform: uppercase;
}

/* Not sure why this spacing is needed, but context feels regulatory, so we'll leave it */
#adverse-message p.certegy-ref {
    margin-bottom: 2rem;
}

@media print {
    #adverse-message .print-btn {
        display: none !important;
    }
}

/* Card headers can be any level of heading but always show the same */
.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6 {
    color: #304487;
    font-weight: 700;
    font-size: 1rem;
    margin: 0;
}

.card-body .card-header h3 {
    color: #fff !important;
}

.visibility-hidden {
    border: 0;
    clip: rect(0, 0, 0, 0);
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    /* still needs 1px of width and height at least, else hidden from screen readers*/
    height: 1px;
    width: 1px;
}

.btn:not(.icon-only) i:first-child,
.nav-link i:first-child,
.dropdown-item i:first-child {
    margin-right: 0.5em;
}