*{
    box-sizing: border-box;
}

body{
    font: 100%/1 Verdana, Arial, Helvetica, sans-serif;
    margin: 0px;
    padding: 0;
    background-color: #0a0a0a;
    color: #ffffff;
    min-height: 100vh;
}

html{
    font: 100%/1 Verdana, Arial, Helvetica, sans-serif;
}

h1 {
    font-family:Arial, Helvetica, sans-serif;
    font-size:x-large;
    color: #ffd530;
}

h2 {
    font-family:Arial, Helvetica, sans-serif;
    color: #ffd530;
    margin-bottom: 5px;
    padding-left: 0;
}

h3 {
    font-family:Arial, Helvetica, sans-serif;
    font-size: medium;
    color: #ffd530;
}

a:link {
    /*color: #42413C;*/
    color: #EEC430;
    text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
    text-decoration: none;
}

input, select, option, textarea {
    color: #000;
    border-radius: 3px;
}

img{
    max-width:100%;
    height:auto;
}

/* ID's */
#logoutLink{
    float: right;
    margin-right: 5px;
    font-size: 10px;
    margin-bottom: 3px;
}

#logoutLink a{
    color: #ffd633;
}

#imgHeader{
    display: block;
    margin-left: 0px;
    margin-right: auto;
}


/* Classes */
.row::after {
    content: "";
    clear: both;
    display: table;
}

/*
[class*="col-"] {
    float: left;
    padding: 15px;
}
*/

/* Page Header and Navigation */
.header {
    background-color: #0c0c0c;
    color: #ffd633;
    border-bottom: 2px solid #ffd530;
    position: -webkit-sticky; /*Safari*/
    /*position: sticky;*/
    top: 0;
}

/* ----- Menu navigation ----- */

/* Add a black background color to the top navigation */
.topnav {
    background-color: #1E1E1E;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #ffd633;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #e6b800;
    color: black;
}

/* Add an active class to highlight the current page */
.topnav a:active{
    background-color: #e6b800;
    color: black;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}

/** Admin cadetReservationsManager CSS Section*/
.adminForm{
    margin: 25px 0 0 5px;
    max-width: 750px;
}

.adminForm input[type=submit]{
    background-color: #e6b800;
    border-radius: 3px;
    color: black;
    border: none;
    width: 50%;
    height: 25px;
    cursor: pointer;
}

.adminForm input[type=submit]:hover{
    color: #1E1E1E;
    background-color: #ffd530;
}

/* ----- Login and Enroll Landing Page CSS Section ----- */
#createAccountBtn{
    background-color: #e6b800;
    border-radius: 3px;
    color: black;
    padding: 3px 4px;
    text-decoration: none;
    text-transform: uppercase;
}

#createAccountBtn link{
    text-decoration: none;
}

#createAccountBtn :visited{
    text-decoration: none;
}

#createAccountBtn :hover{
    color: #1E1E1E;
    background-color: #ffd530;
}

.loginContent{
    margin-top: 10px;
    line-height: initial;
    min-height: calc(100vh - 130px);
}
.loginContainer{
    padding-left: 10px;
    background-color: transparent;
}

.spacing {
    margin-right: 100px;
}

#loginForm input[type=submit]{
    background-color: #e6b800;
    border-radius: 3px;
    color: black;
    border: none;
    width: 50%;
    height: 25px;
    cursor: pointer;
}

#loginForm input[type=submit]:hover{
    color: #1E1E1E;
    background-color: #ffd530;
}


/* ----- Create Account Form Page ----- */
.createAccountForm{
    margin: 5px;
    max-width: 550px;
}

.createAccountForm input[type=submit]{
    background-color: #e6b800;
    border-radius: 3px;
    color: black;
    border: none;
    width: 50%;
    height: 25px;
    cursor: pointer;
}

.createAccountForm input[type=submit]:hover{
    color: #1E1E1E;
    background-color: #ffd530;
}


.capLabel{
    color: #fff;
    font-size: 12px;
}

/* ----- UpdateProfile Form Page ----- */
.updateProfileForm{
    margin: 5px;
    max-width: 550px;
}


.updateProfileForm input[type=submit]{
    background-color: #e6b800;
    border-radius: 3px;
    color: black;
    border: none;
    width: 50%;
    height: 25px;
    cursor: pointer;
}

.updateProfileForm input[type=submit]:hover{
    color: #1E1E1E;
    background-color: #ffd530;
}


/* ----- View Cadet Reserved Jobs table ---- */
.cadetProfile{
    margin-top: 10px;
    margin-bottom: 3px;
}

.viewCadetDataTableWrapper{
    max-width: 980px;
    border: 1px solid #e6b800;
    margin-top: 25px;
    margin-bottom: 10px;
    padding: 5px;
}

.reservedJobs > tbody > tr {
    height: 50px;
}

.reservedJobs > tbody > td {
    padding: 0 5px 0 4px;
}

/*---- JobDetailsTable ----*/
.detailsImg {
    width: 75%;
}

.pocBx {
    font-size: medium;
}

.jobDetailsWrapper {
    margin-top: 30px;
    font-size: medium;
}


/** JobSearch Table */
.jobSearchFormWrapper{
    padding: 3px;
    font-style: normal;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

.custom-select-jobSearch {
    position: relative;
    font-family: Arial;
    display: block;
    margin-bottom: 5px;
    padding: 0.375rem 1.75rem 0.375rem 0.75rem;
    line-height: 1.5;
    width: auto;
    vertical-align: middle;
    background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
    background-size: 8px 10px;
    border-radius: 0.25rem;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.custom-select-jobSearch select {
    display: none; /*hide original SELECT element:*/
}

.keywordSearch {
    position: relative;
    font-family: Arial;
    display: block;
    margin-bottom: 5px;
    padding: 0.375rem 1.75rem 0.375rem 0.75rem;
    line-height: 1.5;
    min-width: 50px;
    background-size: 8px 10px;
    border-radius: 0.25rem;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* ----- Search Results Table ----- */
.searchCriteriaWrapper{
    font-family: Arial;
    padding: 3px;
}
.resultsTable > tbody > tr {
    height: 40px;
}

.resultsTable > tbody > td {
    padding: 0 5px 0 4px;
}

/* ----- Shared CSS for all components ----- */
.error {
    margin-top: 5px;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 13px;
    color: red;
}

.errorValidationTxt {
    margin-top: 3px;
    margin-bottom: 3px;
    font-weight: bold;
    font-size: 12px;
    color: red;
}

.mainContainer{
    padding-left: 10px;
    margin-top: 10px;
    /*margin-bottom: 20px;*/
    line-height: initial;
    min-height: calc(100vh - 130px);
}

.mainContent{
    padding-left: 10px;
    padding-bottom: 10px;
    border-radius: 25px;
}

.pageContentTitle{
    font-family:Arial, Helvetica, sans-serif;
    font-size:x-large;
    color: #ffd530;
}

.pageContent{
    padding: 5px;
    max-width: 750px;
}

.pageContent p {
    text-align: justify;
}

#aBtn {
    background-color: #ffd530;
    border-radius: 3px;
    color: black;
    padding: 3px 4px;
    text-decoration: none;
    text-transform: uppercase;
}

#aBtn link{
    text-decoration: none;
}

#aBtn :visited{
    text-decoration: none;
}

#aBtn :hover{
    background-color: #888;
    color: #FFC818;
}

.button1
{
    display: inline-block;
    background-color: #e6b800;
    border-radius: 4px;
    color: black;
    border: none;
    height: 25px;
    cursor: pointer;
    margin-top: 5px;
    width: 25%;
}

.button1 :hover {
    color: #1E1E1E;
    background-color: #ffd530;
}

.small_company_logo {
    width: 100px;
    height: 50px;
}

.formWrapperDiv {
    width: 1020px;
}

.grid {
    /* Forces equal cell heights */
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0 0 10px;
}
.grid-cell {
    /* Sets column count */
    width: calc(100% / 3); /* calc() method */
    width: 33.33%; /* percentage method */
    /* So that we can see the grid cells */
    height: 100px;
    border: 0 solid transparent;
}
.grid-radio{
    margin-left: 50px;
}
.grid-wrapper {
    /* Allows us to see the edges of the grid */
    background-color: white;
    padding: 10px;
    color:#333C33;
}

#formMsg{
    display: none;
}

/* ---- Footer CSS Section ---- */
.footer {
    position: sticky;
    background-color: #e6b800;
    color: black;
    text-align: center;
    font-size: 10px;
    font-style: italic;
    padding: 5px;
    height: 50px;
    width: 100%;
}

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}

@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 800px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%; margin-left: 25%;}
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
        float: right;
        display: block;
    }

    body{
        font: 75%/1 Verdana, Arial, Helvetica, sans-serif;
    }

    h2{
        font-family:Arial, Helvetica, sans-serif;
        font-size: medium;
        color: #ffd530;
        margin-bottom: 3px;
        word-wrap: break-word;
    }

    h3{
        font-family:Arial, Helvetica, sans-serif;
        font-size: small;
        color: #ffd530;
    }

    input, select, option, textarea {
        max-width: 50%;
    }

    .rotc_page_title{
        max-width: 330px;
    }

    .pageContent {
        max-width: 330px;
    }

    .loginContent{
        font-size: small;
    }

    .spacing {
        margin-right: 0px;
    }

    .createAccountBtn{
        display: block;
    }

    .updateProfileForm{
        max-width: 330px;
    }

    .updateProfileForm > .extraBreak {
        display: block;
    }

    .detailsImg{
        width: 75px;
    }

    .detailsBody {
        margin-left: 5px;
    }

    .pocBx {
        font-size: small;
    }

    .jobDetailsWrapper {
        font-size: small;
    }

    .custom-select-jobSearch {
        padding: 0.25rem 1.95rem 0.25rem 0.25rem;
        line-height: inherit;
    }

    .keywordSearch input[type=text]{
        display: block;
    }

    .viewCadetDataTableWrapper{
        max-width: 330px;
    }

    .formWrapperDiv{
        max-width: 330px;
    }

    .button1{
        display: block;
        width: 50%;
        padding: 3px;
    }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
}