* {
    box-sizing: border-box
}


:root {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #192f40;
    background: #f3f6f8;
    line-height: 1.55
}


body {
    margin: 0
}


a {
    color: #075c83;
    text-underline-offset: .2em
}


a:hover {
    color: #00334e
}


:focus-visible {
    outline: 3px solid #ab6500;
    outline-offset: 3px
}


header {
    background: #fff;
    border-top: 6px solid #123e56;
    border-bottom: 1px solid #d4dfe5
}


.masthead {
    max-width: 1240px;
    margin: auto;
    padding: 1.2rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap
}


.brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    text-decoration: none;
    color: #163e56;
    line-height: 1.25
}


.brand-mark {
    background: #163e56;
    color: white;
    padding: .7rem;
    border-radius: 50%;
    font-weight: 800
}


nav {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap
}


nav form {
    margin: 0
}


main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    min-height: 70vh
}


h1 {
    font-size: clamp(1.8rem, 4vw, 2.7rem);
    line-height: 1.2;
    margin: .3rem 0 1rem
}


h2 {
    font-size: 1.3rem;
    line-height: 1.3;
    margin-top: 0
}


.eyebrow {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .75rem;
    font-weight: 700;
    color: #466377
}


.lead {
    font-size: 1.15rem;
    max-width: 48rem
}


.hero {
    padding: 2rem;
    background: #e3eef3;
    border-left: 5px solid #af761c;
    margin: 1.5rem 0
}


.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 1.25rem
}


.card {
    background: #fff;
    border: 1px solid #d4dfe5;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem
}


.narrow {
    max-width: 620px
}


.filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    align-items: end
}


.field {
    margin-bottom: 1rem;
    min-width: 0
}


label {
    display: block;
    font-weight: 650;
    margin-bottom: .35rem
}


input,
select,
textarea {
    font: inherit;
    color: inherit;
    background: #fff;
    border: 1px solid #6b8495;
    border-radius: 4px;
    padding: .65rem;
    width: 100%;
    min-height: 44px
}


textarea {
    min-height: 120px;
    resize: vertical
}


button,
.button {
    font: inherit;
    font-weight: 650;
    display: inline-block;
    background: #125775;
    color: #fff;
    border: 1px solid #125775;
    border-radius: 4px;
    padding: .65rem 1rem;
    min-height: 44px;
    cursor: pointer;
    text-decoration: none
}


button:hover,
.button:hover {
    background: #0b3c53;
    color: white
}


button:disabled {
    opacity: .6;
    cursor: not-allowed
}


.secondary {
    background: white;
    color: #125775
}


.danger {
    background: #982e33;
    border-color: #982e33
}


.actions {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap
}


.filters .actions {
    grid-column: 1/-1
}


.notice {
    background: #e3f2ec;
    border-left: 4px solid #257250;
    padding: 1rem;
    border-radius: 3px
}


.error {
    background: #fff0ec;
    border-color: #aa3831;
    color: #74271f
}


.table-wrap {
    overflow-x: auto;
    border: 1px solid #d4dfe5;
    border-radius: 6px;
    margin: 1rem 0 1.5rem;
    background: white
}


table {
    border-collapse: collapse;
    width: 100%;
    text-align: left;
    font-size: .95rem
}


th,
td {
    padding: .9rem 1rem;
    border-bottom: 1px solid #e1e8ed;
    vertical-align: top
}


th {
    background: #e8eff3;
    font-size: .85rem;
    color: #29495e
}


td {
    overflow-wrap: anywhere
}


.badge {
    display: inline-block;
    background: #e8eff3;
    border: 1px solid #c8d8e0;
    border-radius: 4px;
    padding: .15rem .5rem;
    font-size: .8rem;
    font-weight: 750
}


.facts {
    display: grid;
    grid-template-columns: minmax(100px, 180px) 1fr;
    gap: .7rem 1rem
}


.facts dt {
    font-weight: 650
}


.facts dd {
    margin: 0;
    overflow-wrap: anywhere
}


.pagination {
    justify-content: center;
    margin: 1.5rem 0
}


.muted {
    color: #506879
}


.prewrap {
    white-space: pre-wrap;
    overflow-wrap: anywhere
}


footer {
    border-top: 1px solid #d4dfe5;
    max-width: 1200px;
    margin: auto;
    padding: 1.5rem 2rem;
    color: #506879;
    font-size: .85rem
}


.skip-link {
    position: absolute;
    left: 1rem;
    top: -100px;
    padding: 1rem;
    background: white;
    z-index: 10
}


.skip-link:focus {
    top: 1rem
}


fieldset {
    border: 1px solid #d4dfe5;
    margin: 1rem 0;
    padding: 1rem
}


legend {
    font-weight: 700;
    padding: 0 .5rem
}


@media(max-width:600px) {
    main {
        padding: 1.25rem 1rem
    }


    .masthead {
        padding: 1rem
    }


    nav {
        gap: .7rem;
        font-size: .9rem
    }


    .card,
    .hero {
        padding: 1rem
    }


    .facts {
        grid-template-columns: 1fr;
        gap: .2rem
    }


    .facts dd {
        margin-bottom: .6rem
    }


    th,
    td {
        padding: .7rem
    }


    .page-heading {
        margin-bottom: 1.5rem
    }

}


@media print {

    header,
    footer,
    form,
    .pagination {
        display: none
    }


    main {
        max-width: none;
        padding: 0
    }


    .card {
        break-inside: avoid
    }


    body {
        background: white
    }

}

.inline-checkbox{width:auto;min-height:0;margin-right:.5rem}