/* ---------------------------------------------------------------- */
/* Page frame                                                        */
/* ---------------------------------------------------------------- */

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

body > main {
    flex: 1 0 auto;
}

.container-narrow {
    max-width: 720px;
}

.page-title {
    font-size: 1.75rem;
    margin-bottom: 0.25rem;
}

.page-lead {
    margin-bottom: 1.5rem;
}

.page-section + .page-section {
    margin-top: 3rem;
}

.page-section > h2,
.section-heading {
    font-size: 1.25rem;
    border-bottom: 2px solid #94c0dc;
    padding-bottom: 0.4rem;
    margin-bottom: 1rem;
}

.action-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.field-list {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) 1fr;
    column-gap: 1rem;
    row-gap: 0.25rem;
    margin-bottom: 0;
}

.field-list dt {
    font-weight: 500;
    color: #555;
}

.field-list dd {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------- */
/* Site header                                                       */
/* ---------------------------------------------------------------- */

.header-top {
    background: #151922;

    /* This bar is dark, so every link on it is white.  Bootstrap colors the
       active nav link from these variables with a selector that outranks
       `.header-top a`, which would otherwise leave it black on black. */
    --bs-navbar-color: #fff;
    --bs-navbar-hover-color: #fff;
    --bs-navbar-active-color: #fff;
}

.header-top a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.header-top .nav-link.active {
    text-decoration: underline;
}

.text-content #homelink {
    color: white;
    text-decoration: none;
    font-size: 180%;
}

.text-content #previewlink {
    color: #ec4e4e;
    font-size: 40%;
}

#logout-form {
    display: inline;
}

#logout-form button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    font-weight: bold;
    color: white;
}

/* The nav bar and the banner are painted inside `.container`, not on it, so
   their edges line up with the page content in `main`, which sits inside the
   container's gutter. */
.site-banner {
    position: relative;
    overflow: hidden;
    font-weight: bold;
    color: white;
}

.site-banner .left-image {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    background: linear-gradient(to bottom, #305e7f, #94c0dc);
    padding: 30px 0;
}

.site-banner .left-image img {
    width: 150px;
    height: 100%;
    object-fit: cover;
}

/* Margin, not padding: this element paints its own gradient, and padding would
   put that gradient over the globe sitting underneath it. */
.site-banner .text-content {
    padding: 30px 0;
    margin-left: 150px;
    z-index: 2;
    position: relative;
    background: linear-gradient(to bottom, #305e7f, #94c0dc);
}

.navbar-toggler {
    color: white;
    border-color: white;
}

.navbar-toggler-icon {
    background: url("../img/navbar-toggler.eac1a23ea3d2.svg") no-repeat center;
    background-size: 1.5em 1.5em;
}

/* ---------------------------------------------------------------- */
/* Brand colors                                                      */
/* ---------------------------------------------------------------- */

.blue-background {
    background-color: #94c0dc;
}

.light-blue-background,
.light-blue-background td,
.light-blue-background th,
td.light-blue-background,
th.light-blue-background {
    background-color: #eff6fe;
}

.alert-background, .alert-background td, .alert-background th {
    background-color: var(--bs-danger-bg-subtle);
}

.blue-border {
    border: 3px #b0d9f3;
}

.yellow-background {
    background-color: #f8bb51;
}

.home-left-column-rounded {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.home-right-column-rounded {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

#ui-datepicker-div, #ui-datepicker-div select {
    z-index: 9999 !important;
}