.header-image-bg {
    /* Combined background logic */
    background-image: url('../../images/HeaderLeft.jpg'), url('../../images/HeaderMiddle.jpg');
    background-position: left top, left top;
    background-repeat: no-repeat, repeat-x;
    background-size: auto, auto;
    min-height: 100px;
    background-color: #f8f9fa; 
}


.footer-image-bg {
    /* Combined background logic */
    background-image: url('../../images/FooterMiddle.jpg'), url('../../images/FooterRight.jpg');
    background-position: left bottom, left left;
    background-repeat: repeat-x, no-repeat;
    background-size: auto, auto;
    min-height: 100px;
    background-color: #94a4ca; 
}


.text-black {
    color: #000 !important;
}

.margin-15 {
    margin:15px;
}

.padding-10 {
    padding: 10px
}

.sub-script {
    color: #940000;
    font-weight: bold;
    font-size: medium;
}

a {
    color: #003166
}

.ActionButton,
.ActionButtonLong,
.ActionButtonSuperLong {
    font-weight: bold;
    font-size: 12px;
    color: white;
    font-family: Verdana, sans-serif;
    background-color: #005980;
    border: 1px solid #005980;
    border-radius: 5px;
    cursor: pointer;
    min-height: 44px;
    padding: 5px 10px;
    display: inline-block;
    text-align: center;
}


.ActionButton {
    width: 85px;
}

.ActionButtonLong {
    width: 125px;
}

.ActionButtonSuperLong {
    width: 200px;
}


    .ActionButton:focus,
    .ActionButtonLong:focus,
    .ActionButtonSuperLong:focus {
        color: blue;
        background-color: white;
        outline: 3px solid black;
        outline-offset: 2px;
        border-color: black;
    }


    .ActionButton:hover,
    .ActionButtonLong:hover,
    .ActionButtonSuperLong:hover {
        background-color: #00405d;
        color: white;
    }


/* This targets the <ul> inside your fieldset */
.radiobuttonlist-grid-layout {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
}

    /* This makes 5 columns (100 / 5 = 20%) */
    .radiobuttonlist-grid-layout li {
        flex: 0 0 20%;
        max-width: 20%;
        margin-bottom: 10px;
    }


/* Targets the <ul> generated by the CheckBoxList */
.teacher-grid-2-col {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
}

    /* Targets each <li> checkbox item */
    .teacher-grid-2-col li {
        flex: 0 0 50%; /* This creates the 2-column effect (50% width) */
        list-style: none;
        margin-bottom: 5px;
    }