@import '2-col-50-50.css';
@import '2-col-70-30.css';
@import 'accordion.css';
@import 'buttons.css';
@import 'cards.css';
@import 'footer.css';
@import 'header.css';
@import 'list-links.css';
@import 'table.css';
@import 'typography.css';

:root {
    --blue: #0B7599;
    --blue-hover: #035e7c;
    --red: #D82237;
    --red-hover: #87212d;
    --yellow: #F99F1B;
    --purple: #261631;
    --light-blue: #189CCB;
    --dark-blue: #0F172A;
    --grey-100: #F5F5F5;
    --grey-200: #cbcfd5;
    --green-10: #b7f7c1;
    --green-20: #007e82;
    --green-30: #00647b;
    --black: #222;
    --white: #fff;
    --grey: #555;
    --link: #025EE8;
}

.text-white {
    color: #fff;
}

.text-grey {
    color: var(--grey);
}

.text-red {
    color: var(--red);
}

.text-blue {
    color: var(--blue);
}

.text-purple {
    color: var(--purple);
}

.grey-bg {
    background-color: var(--grey-100);
}

.bg-red {
    background-color: var(--red);
}

.bg-blue {
    background-color: var(--blue);
}

.bg-purple {
    background-color: var(--purple);
}

.bg-yellow {
    background-color: var(--yellow);
}

html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
    font-size: 100%;
}

a {
    color: var(--link);
}

main .bg-red a:not(.btn),
main .bg-blue a:not(.btn),
main .bg-purple a:not(.btn),
main .bg-yellow a:not(.btn) {
    text-decoration: underline;
    background-color: #fff;
    padding: .25rem .5rem;
    border-radius: 4px;
}

a[href$=".pdf"]:before {
    font-family: 'bootstrap-icons';
    display: inline-block;
    content: "\F63E";
    margin-right: 4px;
}

a.skip-to-content-link {
    background: var(--blue);
    color: var(--white);
    height: 36px;
    left: 50%;
    padding: 8px;
    position: absolute;
    transform: translateY(-100%);
    transition: transform 0.3s;
}

    a.skip-to-content-link:visited {
        color: var(--white) !important;
    }

    a.skip-to-content-link:focus {
        transform: translateY(0%);
        z-index: 5500;
        outline: 2px solid darkorange;
        outline-offset: 2px;
    }

@supports selector(:focus-visible) {
    :is(a, button, input, .dropdown-toggle):focus-visible {
        outline-offset: 2px;
    }
}

main {
    flex: 1 0 auto;
    margin-top: 105px;
}

@media (max-width:499px) {
    main {
        margin-top: 9rem;
    }
}

hr.blue {
    margin: 2rem 0;
    color: inherit;
    border: 0;
    border-top: 3px solid var(--light-blue);
    opacity: 1;
}

.component-spacer-4 {
    display: block;
    padding: 2rem 0;
}

hr {
    margin: 3rem 0;
}
/* table styles */
.table > thead {
    vertical-align: bottom;
    border-bottom: 3px solid var(--grey);
}

.badge {
    color: var(--black);
    border-radius: 12px;
    padding: 6px 12px;
}

    .badge.complete {
        background-color: var(--green-10);
    }

    .badge.in-progress {
        background-color: var(--yellow);
    }

table ul.list-group .list-group-item {
    border: none;
    padding: 0 1rem;
}

.form-control {
    margin-bottom: 1rem;
}

label {
    font-weight: 600;
}