body {
    /* Remove gaps in image panel and border of window */
    margin: 0;
    /* assign a font to the entire page */
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

.container-fluid {
    /* assigning the container to be 100% of the viewport height */
    height: 100vh;
}

.row {
    /* making the div a flexbox to allow for stacking items in a particular fashion, in this case horizontally */
    display: flex;
    flex-direction: row;
    height: 100vh;
}


#image-panel {
    /* same methodology here, but with the flow being vertical */
    display: flex;
    flex-direction: column;
    /* assigning some inner padding to give internal items so space to work with */
    padding: 5%;
    /* approx. assigning this background color panel to be 35% of the viewport at all times */
    width: 35vw;
}

#header-container {
    display: flex;
    flex-direction: column;
    /* centering the elements within this div to allow for cleaner presentation */
    align-items: center;
}

#header-container img {
    /* styling the size of the image so that it fits well within the composition */
    width: 65%;
}

        #enrolment-form-container {
            margin-top: 7.5em;
        }

        #enrolment-result-container {
            margin-top: 7.5em;
        }



#header-container h2 {
    /* reducing the size of the font, changing the color, allowing for some padding to seperate the image and text, changing the weight of the text and centering the text */
    font-size: 1.65vw;
    color: white;
    padding-top: .25rem;
    font-weight: 500;
    margin-top: 0px;
    text-align: center;
}


/* ----------------------------------------------------------------------------------------- */

#header-container hr {
    width: 100%;
    margin: 0px;
}

#footer-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* this makes the footer be at the bottom of the parent element */
    position: absolute;
    bottom: 0;
    margin-bottom: 2%;
}

#footer-container img {
    width: 22%;
    margin: 2%;
}

#footer-container span {
    font-weight: 400;
    color: white;
}

#enrolment-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    width: 100vw;
    padding 5%;
}

#enrolment-form-container .mw-100 {
    margin-bottom: 8px;
    text-align: center;
}

#enrolment-form-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5%;
}

#enrolment-result-container .mw-100 {
    margin-bottom: 8px;
}

#enrolment-result-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5%;
}

.d-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.form-group {
    padding: 2%;
}

.form-group label, .form-group input {
    margin-top: 5%;
    margin-bottom: 5%;
}

.form-control {
    /* this is essentially exactly what bootstrap does */
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    /* there was an annoying black outline when the input was selected */
    outline: none;
}

/* when the input control is focused, the above code eases in a box-shadow and border outlined here */
.form-control:focus {
    border-color: #0096FF;
    box-shadow: 0px 0px 1px 4px rgba(0, 150, 255, 0.05),
                0px 0px 1px 4px rgba(0, 150, 255, 0.05),
                0px 0px 1px 4px rgba(0, 150, 255, 0.05),
                0px 0px 1px 4px rgba(0, 150, 255, 0.05);
}

.btn {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    width: 12em;
}
        .bg-primary {
            background-color: #005485 !important;
        }

        .btn-primary {
            color: #fff;
            background-color: #005485;
            border-color: #005485;
        }

        .btn-primary:hover {
            color: #fff;
            background-color: #003c5f;
            border-color: #003452;
        }

        .btn-primary:focus, .btn-primary.focus {
            box-shadow: 0 0 0 0.2rem rgba(38, 110, 151, 0.5);
        }

        .btn-primary.disabled, .btn-primary:disabled {
            color: #fff;
            background-color: #005485;
            border-color: #005485;
        }

        .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
        .show > .btn-primary.dropdown-toggle {
            color: #fff;
            background-color: #003452;
            border-color: #002c45;
        }

        .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
        .show > .btn-primary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(38, 110, 151, 0.5);
        }

        #footer-container {
            height: 10vh;
        }

        .footer-image {
            min-width: 40px;
        }

        .header-image {
            max-width: 248px;
        }



/* basic responsiveness to allow the text to change font-size upon the screen being resized */
@media screen and (min-width: 1001px) {
    #header-container h2 {
        font-size: 1.65vw;
    }
    #footer-container span {
        font-size: 0.7vw;
    }
}

@media screen and (max-width: 1000px) {
    #header-container h2 {
        font-size: 3vw;
    }
    #footer-container span {
        font-size: 1.2vw;
    }
}

@media (max-width: 800px) {
    .row {
        flex-direction: column;
    }
    #image-panel {
        width:90vw;
        padding: 5%;
    }
    #enrolment-form-container {
        margin-top: 1em;
    }
    #enrolment-result-container {
        margin-top: 1em;
    }
    #footer-container {
        display: none;
    }
}

/* -----------------------------Loading Box-------------------------------------------- */
.overlay {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background: #222;
    display: none;
}

.overlay__inner {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

.overlay__content {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.spinner {
    width: 75px;
    height: 75px;
    display: inline-block;
    border-width: 2px;
    border-color: rgba(255, 255, 255, 0.05);
    border-top-color: #fff;
    animation: spin 1s infinite linear;
    border-radius: 100%;
    border-style: solid;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}