[root] {
}

main {
    padding: 0;
    padding-bottom: 4rem;
    margin: auto;
    display: block;
    max-width: 80vw;
}

.hnt-page-title {
    text-align: center;
    font-weight: 800;
    font-size: 2.5em;
}

.hnt-sect-row {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}

.hnt-input-grid {
    /**
   * User input values.
   */
    --grid-layout-gap: 1rem;
    --grid-column-count: 3;
    --grid-item--min-width: 200px;
    /**
   * Calculated values.
   */
    --gap-count: calc(var(--grid-column-count) - 1);
    --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
    --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
    align-items: stretch;
    grid-gap: 1rem;
    gap: 1rem;
    justify-content: stretch;
    width: 100%;
}

.hnt-grid-all, .hnt-custom-full-button {
    grid-column: 1/4;
}

.hnt-grid-2x2-left {
    grid-column: 1/3;
}

.hnt-grid-2x2-right {
    grid-column: 2/4;
}

.hnt-button, .hnt-input-group input[type="button"], .hnt-input-group input[type="submit"], .hnt-input-group button, .lockView a {
    margin: 0;
    padding: 1rem;
    border: none;
    background-color: #9261c6;
    color: #fff;
    display: inline-block;
}

    .hnt-button:hover, .hnt-input-group input[type="button"]:hover, .hnt-input-group input[type="submit"]:hover, .hnt-input-group button:hover, .lockView a:hover {
        margin: 0;
        padding: 1rem;
        border: none;
        background-color: #ceadf1;
        color: black;
        cursor: pointer;
        text-decoration: none;
    }

.hnt-custom-full-button {
    width: 100%;
}

.hnt-button-submit {
    display: block;
    margin: 0;
    padding: 1rem;
    border: none;
    text-align: left;
    font-size: 1.25rem;
    color: white;
    background-color: #1e17ba;
    width: 50%;
}

    .hnt-button-submit:hover {
        background-color: #a0b5fa;
        color: black;
    }

.school-qual-table tbody, .lockView table {
    background-color: #114cc6;
    color: white;
}

.lockView tr {
    height: 4rem;
}

.lockView table tr.dg_item td {
    background-color: white;
    color: black;
}

    .lockView table tr.dg_item td > table {
        background: none;
        border: none;
    }

.hnt-upload-widget a {
    margin: 0;
    display: inline-block;
    padding: 1rem;
    border: none;
    background-color: #9261c6;
    color: #fff
}

.hnt-upload-widget > div {
    display: flex;
    flex-flow: column nowrap;
    align-items: normal;
    justify-content: center;
}

.hnt-card, .hnt-card-alt {
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
}

.hnt-card {
    background-color: #f0f0f0;
}

.hnt-card-alt {
    background-color: #f9f9f9;
}

.hnt-card-header {
    padding: 1rem 2.7rem;
    font-weight: 800;
    background-color: #1742ba;
    color: white;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
}

.green-btn {
    background-color: green;
}

@media screen and (max-width: 824px) {
    .hnt-input-grid {
        display: block;
    }

    .hnt-card-header {
        justify-content: center;
        text-align: center;
    }
}

.hnt-padding {
    padding: 2rem;
}

.hnt-card-body {
    display: flex;
    flex-flow: column nowrap;
    padding: 2rem 2.7rem;
}

.hnt-input-group {
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
    justify-content: stretch;
    width: 100%;
    border: 0 0 1px;
    border-color: red;
}

    .hnt-input-group input, .hnt-input-group select, .lockView input, .lockView Select, .hnt-input-field {
        padding: 0.75rem;
        border-top: none;
        border-left: none;
        border-right: none;
        background-color: white;
        color: black;
    }

input[disabled="disabled"] {
    background-color: #f9f9f9;
    color: black;
    font-weight: 700;
}

.hnt-input-text {
    padding: 1rem 1rem;
    margin: 0;
    /* border: none;*/
    border-width: 0 0 1px;
    background-color: #ffffff;
    color: #000;
}

.hnt-sig, .hnt-sig-alt {
    display: flex;
    gap: 1rem;
    align-items: center;
    align-content: space-between;
    text-align: justify;
    background-color: #f0f0f0;
    padding: 1rem;
}