@font-face {
    font-family: 'Lexend';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/lexend.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
  font-family: "Lexend", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
*/

:root {
    /* Colours */
    --black: #000;
    --white: #fff;
    --gray: #424242;
    --blue: #13B8E6;
    --green: #99CB58;
    --red: #E14664;
    --light: #fff;
    --light-blue: #E7F8FC;
    --light-gray: #F9FAFD;
    --light-gray-alt: #eee;
    --light-red: #eba0a6;
    --medium-gray: #c1c1c3;
    --dark-blue: #3F70B7;
    --dark-blue-rbg: 63, 112, 183;
    --dark-gray: #424242;
    --dark-gray-rgb: 66, 66, 66;
    --dark-red: #67000b;
    --red-error: #E14664;
    --red-error-rgb: 225, 70, 100;
    /* Structual */
    --logo-height: 29px;
    --header-padding-y: 1.14rem;
    --header-height: calc(2 * var(--header-padding-y) + var(--logo-height));
    --footer-height: calc(2 * 1rem + var(--logo-height));
    /* Typography */
    --bs-body-font-family: 'Lexend', sans-serif;
    --bs-link-color-rgb: var(--dark-blue-rbg);
    /* Overrides */
    --bs-body-color: var(--gray);
    --bs-body-color-rgb: var(--dark-gray-rgb);
    --bs-link-color: var(--dark-blue);
    --bs-form-valid-border-color: var(--green);
    --bs-form-valid-color: var(--green);
    --bs-success-rgb: 153, 203, 88;
    --bs-form-invalid-border-color: var(--red-error);
    --bs-form-invalid-color: var(--red-error);
    --bs-danger-rgb: var(--red-error-rgb);
}

html {
    position: relative;
    min-height: 100%;
    font-size: 14px;
}

body {
    min-height: 100vh;
    font-optical-sizing: auto;
}

main {
    min-height: calc(100vh - var(--header-height) - var(--footer-height));
}

h1 {
    font-size: 2.3rem;
    font-weight: 800;
    line-height: 160%;
    margin: 0;
}

h2 {
    font-size: 1.72rem;
    font-weight: 400;
    margin: 0;
}

h3 {
    font-size: 1.43rem;
    font-weight: 400;
    margin: 0;
}

h4 {
    font-size: 1.15rem;
    font-weight: 400;
    margin: 0;
}

p.explanation {
    font-size: 1.43rem;
}

a {
    text-decoration: none;
    font-weight: 700;
}

header .row {
    padding: var(--header-padding-y) 0;
}

.logo img {
    height: var(--logo-height, 40px);
}

.navbar {
    --bs-navbar-padding-y: 0;
}

.footer {
    padding: 1rem 0;
    font-size: 0.86rem;
    line-height: 1rem;
    background: var(--white);
    position: relative;
    z-index: 10;
}

    .footer .row {
        align-items: center;
    }

    .footer a {
        display: inline-block;
    }

        .footer a + a {
            border-left: solid 1px var(--dark-gray);
            padding-left: 0.5rem;
            margin-left: 0.5rem;
        }

/* General elements */
.btn:not(.btn-link) {
    --bs-btn-border-radius: 12px 0px 12px 12px;
    --bs-btn-border-width: 0;
    --bs-btn-box-shadow: none;
    --bs-btn-focus-box-shadow: none;
    --bs-btn-font-size: 1.15rem;
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-padding-y: 0.7rem;
    background: transparent url('../images/btn-bg.svg') no-repeat center left;
    background-size: auto 120%;
    -webkit-transition: background-position 1s, border-radius 1.2s, color 0.5s;
    transition: background-position 1s, border-radius 1.2s, color 0.1s;
    transition-delay: 0s, 0s, 0.25s;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
}

.btn.btn-invert-corners {
    --bs-btn-border-radius: 12px 12px 12px 0px;
}

.btn-primary {
    --bs-btn-bg: var(--green);
    --bs-btn-border-color: var(--green);
    --bs-btn-active-shadow: none;
}

.btn-danger:not(.btn-link) {
    --bs-btn-bg: var(--red);
    --bs-btn-border-color: var(--red);
    --bs-btn-active-shadow: none;
    background-image: url('../images/btn-bg-danger.svg');
}

.btn-secondary:not(.btn-link) {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-hover-color: var(--white);
    --bs-btn-bg: var(--light-gray);
    --bs-btn-border-color: var(--light-gray);
    --bs-btn-active-shadow: none;
    background-image: url('../images/btn-bg-secondary.svg');
}


.btn-outline:not(.btn-link) {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--green);
    --bs-btn-hover-border-color: var(--blue);
    --bs-btn-border-width: 2px;
    --bs-btn-active-shadow: none;
    -webkit-transition: border-color 1s, border-radius 1.2s, color 0.5s;
    transition: border-color 1s, border-radius 1.2s, color 0.5s;
    background-image: none;
}

.btn-link.btn-danger {
    color: var(--red);
    text-decoration: none;
    font-weight: bold;
}

    .btn-link.btn-danger:hover {
        color: var(--dark-red);
        background: transparent;
    }

.btn:not(.btn-link):hover {
    background-position: center right;
    --bs-btn-border-radius: 12px 12px 12px 0px;
}

.btn.btn-invert-corners:not(.btn-link):hover {
    --bs-btn-border-radius: 12px 0px 12px 12px;
}

.form-check-input:checked {
    background-color: var(--dark-blue);
    border-color: var(--dark-blue);
}

.form-check-input.is-valid:checked {
    border-color: var(--bs-form-valid-color);
}

.form-control,
.form-select {
    --bs-border-color: var(--light-gray-alt);
}

    .form-control,
    .form-control:focus,
    .form-select,
    .form-select:focus {
        background-color: var(--light-gray);
    }

        .form-control:focus {
            border-color: var(--dark-blue);
            box-shadow: 0 0 0 .25rem rgba(var(--dark-blue-rbg), 0.25);
        }

        .form-select.is-valid:not([multiple]):not([size]),
        .form-control.is-valid {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2399CB58' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
            background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
        }

        .form-select.is-invalid:not([multiple]):not([size]),
        .form-control.is-invalid {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23E14664'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23E14664' stroke='none'/%3e%3c/svg%3e");
            background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
        }

.form-floating > .form-select ~ label {
    opacity: 1;
    transform: none;
    color: rgb(var(--bs-body-color-rgb));
}

.form-floating.active > .form-select ~ label {
    transform: scale(.85) translateY(-0.62rem) translateX(0.18rem);
    color: rgba(var(--bs-body-color-rgb),.65);
}

.is-invalid ~ .invalid-feedback,
.is-invalid ~ .invalid-tooltip,
.was-validated :invalid ~ .invalid-feedback,
.was-validated :invalid ~ .invalid-tooltip {
}

.form-check:has(> .is-invalid) ~ .invalid-feedback {
    display: block;
}

.form-floating > .form-control-plaintext ~ label::after,
.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating > .form-select ~ label::after {
    background: transparent;
}

.form-floating > textarea.form-control {
    height: 6rem;
    transition: height 0.5s;
}

    .form-floating > textarea.form-control:focus,
    .form-floating > textarea.form-control:active {
        height: 12rem;
    }

.grid-form {
    display: grid;
    grid-auto-columns: 1fr;
    grid-gap: 25px;
}

    .grid-form > *:not(div) {
        margin-bottom: 0;
        line-height: 1em;
    }

.container-title {
    background: var(--white);
    border: 1px solid var(--dark-gray);
    border-width: 1px 0;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

    .container-title a + a:not(:has(.bi)) {
        margin-left: 2rem;
    }

.container-content {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 1rem;
}

    table td,
    table th {
        height: 60px;
        vertical-align: middle;
        padding: 15px 20px
    }

        table td:first-child,
        table th:first-child {
            padding-left: 50px;
        }

        table td:last-child,
        table th:last-child {
            padding-right: 50px;
        }

    table th {
        font-weight: bold;
    }

    table td {
        background: var(--white);
    }

    table tr:hover td {
        background: var(--light-blue);
    }

    table tr.has-warnings td {
        border: solid 2px var(--red-error);
        border-left: 0;
        border-right: 0;
    }


        table tr.has-warnings td:first-child {
            border-left: solid 2px var(--red-error);
        }

        table tr.has-warnings td:last-child {
            border-right: solid 2px var(--red-error);
        }

.table-form,
.table-form .data-rows {
    display: grid;
    gap: 1rem;
}

    .table-form .header-row {
        font-weight: bold;
    }

    .table-form .data-row {
        background: var(--white);
    }

    .table-form .header-row,
    .table-form .data-row {
        padding: 16px 50px;
        min-height: 60px;
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 2fr 2fr 2fr;
        gap: 16px;
        align-items: center;
    }

        .table-form .data-row:hover {
            background: var(--light-blue);
        }

.actions {
    display: flex;
    align-items: center;
    gap: 32px;
}

dt, dd {
    min-height: 60px;
    display: flex;
    align-items: center;
}

dt {
}

dd {
    background: var(--white);
}

header .nav-link .textify {
    font-weight: 400;
    color: var(--bs-body-color)
}

header .dropdown-menu {
    --bs-dropdown-bg: var(--light-gray-alt);
    --bs-dropdown-link-active-bg: var(--green);
    --bs-dropdown-spacer: 1.225rem;
    --bs-dropdown-border-width: 0px;
    --bs-dropdown-border-radius: 0 0 12px 0;
    --bs-dropdown-padding-y: 0;
    overflow: hidden;
}


    header .dropdown-menu .nav-item {
        border-top: 1px solid var(--bs-body-color);
    }

        header .dropdown-menu .nav-item:first-child {
            border-top: 0;
        }

    header .dropdown-menu .nav-link {
        --bs-nav-link-padding-y: 0.9rem;
        --bs-navbar-nav-link-padding-x: 0.75rem;
        --bs-nav-link-color: var(--bs-body-color);
        font-weight: 400;
    }

        header .dropdown-menu .nav-link:hover {
            background: var(--green);
            --bs-nav-link-hover-color: var(--white);
        }

.sidebar-nav {
    background: var(--white);
    border-radius: 12px 0 12px 12px;
}

    .sidebar-nav .nav-link {
        color: var(--dark-gray);
        font-weight: 400;
    }

        .sidebar-nav .nav-link.active {
            color: var(--dark-blue);
            font-weight: 700;
        }

            .sidebar-nav .nav-link.active .bi {
                font-weight: 400;
                color: var(--green);
            }

.landing-boxes {
    gap: 32px;
}

.landing-box {
    background: var(--white);
    border-radius: 12px 0 12px 12px;
    padding: 32px;
    display: flex;
    width: 384px;
    padding: 32px;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

    .landing-box:nth-child(2n+1) {
        border-radius: 12px 12px 12px 0;
    }

    .landing-box p {
        margin: 0;
    }

.icon-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

    .icon-container p {
        font-weight: bold;
    }

.blue-icon {
    display: flex;
    width: 64px;
    height: 64px;
    padding: 12.8px;
    justify-content: center;
    align-items: center;
    border-radius: 38.4px;
    background: var(--light-blue);
}

    .blue-icon .bi {
        min-width: 38px;
        min-height: 38px;
        font-size: 2rem;
    }

.list-lower-alpha > li {
    list-style: lower-alpha;
}

.list-lower-roman > li {
    list-style: lower-roman;
}

.modal-body li {
    margin-bottom: 0.8rem;
}

.popover {
    --bs-popover-border-color: var(--dark-blue);
    --bs-popover-header-bg: var(--dark-blue);
    --bs-popover-header-color: var(--white);
}

.pagination {
    --bs-pagination-active-bg: var(--dark-blue);
    --bs-pagination-active-color: var(--white);
    --bs-pagination-color: var(--bs-body-color);
    --bs-pagination-border-width: 0;
    --bs-pagination-padding-y: 0.75rem;
    --bs-pagination-padding-x: 1rem;
    --bs-pagination-border-radius: 12px;
}

.page-item:first-child .page-link {
    border-bottom-left-radius: 0;
}

.page-item:last-child .page-link {
    border-top-right-radius: 0;
}