body {
    padding-top: 0;
    padding-bottom: 0;
    font-size: 14pt;
    font-family: Calibri,Arial,sans-serif;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 400px;
}

    input[type="radio"] {
        margin-right: 10px;
    }

.col-centered {
    float: none;
    margin-right: auto;
    margin-left: auto;
}


.header_container {
    position: relative;
}

.header_title {
    padding-top: 10px;
    font-size: 14pt;
    font-weight: bold;
}



.addbottompadding {
    padding-bottom: 20px;
}

.subtitle {
    font-size: 12pt;
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 10px;
}

.errortext {
    font-weight: bold;
    color: red;
}

.maxwidth {
    max-width: 800px;
}

.selectbutton {
    width: 100%;
    background-color: #1E3547;
    color: #fff;
    padding: 0;
    margin: 0;
}

    .selectbutton :hover {
        color: #fff;
    }

.selectedbutton {
    width: 100%;
    background-color: #6E1300;
    color: #fff;
    padding: 0;
}

.button_wrapper {
    text-align: center;
    padding-top: 10px;
}

.button_padding {
    padding: 2px 2px 2px 2px;
}

.questioncount {
    float: left;
}

.single_image {
    max-width: 640px;
}

.footer_logo {
    float: right;
}

.centerels {
    text-align: center;
}


.timer_warning {
    font-size: 14pt;
    font-weight: 600;
    color: Red;
    padding-bottom: 10px;
}


#spanEl {
    position: fixed;
    top: 0;
    right: 0;
    width: 400px;
    font-size: 14pt;
    font-weight: 600;
    color: Red;
}


.pleasescroll {
    position: fixed;
    top: 0;
    right: 0;
    width: 400px;
    font-size: 14pt;
    font-weight: 600;
    color: Red;
}


.formtb {
    padding-bottom: 20px;
    font-size: 18px;
    font-weight: bold;
}

.numberentry {
    width: 60px;
}

.psatable, .psatable td, th {
    border: 1px solid black;
    padding: 4px 2px 2px 2px;
    vertical-align: middle;
    text-align: center;
}

.sectiontable, .sectiontable td, th {
    border: 1px solid black;
    padding: 4px 2px 2px 2px;
    vertical-align: middle;
    text-align: left;
}

hr.assessmentdivider {
    border-top: 2px solid black;
}

.assessmenterror {
    padding-top: 10px;
    font-size: 14pt;
    font-weight: bold;
    color: red;
}

/*customized radiobuttons*/
.response-button {
    width: 100%;
    list-style-type: none;
    margin: 0 0 0 0;
    padding: 0;
}

    .response-button li {
        float: left;
        margin: 0 5px 0 0;
        width: 22%;
        height: 30px;
        position: relative;
        text-align: center;
    }

    .response-button label, .response-button input {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #1E3547;
        color: white;
    }




        .response-button input[type="radio"] {
            opacity: 0.01;
            z-index: 100;
            background: #1E3547;
        }

            .response-button input[type="radio"]:checked + label,
            .Checked + label {
                color: white;
                background: #6E1300;
            }

    .response-button label {
        padding: 3px;
        cursor: pointer;
        z-index: 90;
    }

        .response-button label:hover {
            background: #DDD;
        }


/*Radio buttons for 5 options*/
.response-button-5 {
    width: 100%;
    list-style-type: none;
    margin: 0 0 0 0;
    padding: 0;
}

    .response-button-5 li {
        float: left;
        margin: 0 5px 0 0;
        width: 18%;
        height: 50px;
        position: relative;
        text-align: center;
    }

    .response-button-5 label, .response-button-5 input {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #1E3547;
        color: white;
    }


        .response-button-5 input[type='checkbox'] {
            opacity: 0.01;
            z-index: 100;
            background: #1E3547;
        }

            .response-button-5 input[type='checkbox']:checked ~ label,
            .Checked ~ label {
                color: white;
                background: #6E1300;
            }


        .response-button-5 input[type="radio"] {
            opacity: 0.01;
            z-index: 100;
            background: #1E3547;
        }

            .response-button-5 input[type="radio"]:checked + label,
            .Checked + label {
                color: white;
                background: #6E1300;
            }

    .response-button-5 label {
        padding: 3px;
        cursor: pointer;
        z-index: 90;
    }

        .response-button-5 label:hover {
            background: #DDD;
        }


/*Radio buttons for 6 options*/
.response-button-6 {
    width: 100%;
    list-style-type: none;
    margin: 0 0 0 0;
    padding: 0;
}

    .response-button-6 li {
        float: left;
        margin: 0 5px 0 0;
        width: 15%;
        height: 50px;
        position: relative;
        text-align: center;
    }

    .response-button-6 label, .response-button-6 input {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #1E3547;
        color: white;
    }

        .response-button-6 input[type="radio"] {
            opacity: 0.01;
            z-index: 100;
            background: #1E3547;
        }

            .response-button-6 input[type="radio"]:checked + label,
            .Checked + label {
                color: white;
                background: #6E1300;
            }

    .response-button-6 label {
        padding: 3px;
        cursor: pointer;
        z-index: 90;
    }

        .response-button-6 label:hover {
            background: #DDD;
        }




/*Radio buttons for 7 options*/
.response-button-7 {
    width: 100%;
    list-style-type: none;
    margin: 0 0 0 0;
    padding: 0;
}

    .response-button-7 li {
        float: left;
        margin: 0 5px 0 0;
        width: 15%;
        height: 65px;
        position: relative;
        text-align: center;
    }





    .response-button-7 label, .response-button-7 input {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #1E3547;
        color: white;
        font-size: 9pt;
        line-height: 9pt;
    }

        .response-button-7 input[type="radio"] {
            opacity: 0.01;
            z-index: 100;
            background: #1E3547;
        }

            .response-button-7 input[type="radio"]:checked + label,
            .Checked + label {
                color: white;
                background: #6E1300;
            }

    .response-button-7 label {
        padding: 3px;
        cursor: pointer;
        z-index: 90;
    }

        .response-button-7 label:hover {
            background: #DDD;
        }



/*Vertical Radio buttons*/
.response-button-v {
    list-style-type: none;
    margin: 0 0 0 0;
    padding: 0;
    padding-top: 15px;
}

    .response-button-v li {
        margin: 0 5px 0 0;
        min-width: 200px;
        max-width: 500px;
        min-height: 40px;
        /*height: 30px;*/
        position: relative;
        text-align: left;
    }

    .response-button-v label, .response-button-v input {
        display: block;
        /*position: absolute;*/
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #1E3547;
        color: white;
    }

        .response-button-v input[type="radio"] {
            opacity: 0.01;
            z-index: 100;
            background: #1E3547;
        }

            .response-button-v input[type="radio"]:checked + label,
            .Checked + label {
                color: white;
                background: #6E1300;
            }

    .response-button-v label {
        padding: 3px;
        cursor: pointer;
        z-index: 90;
    }

        .response-button-v label:hover {
            background: #DDD;
        }


/*PSA Radio Buttons*/
.response-button-psa {
    width: 100%;
    list-style-type: none;
    margin: 0 0 0 0;
    padding: 0;
}

    .response-button-psa li {
        float: left;
        margin: 0 5px 0 0;
        width: 80px;
        height: 30px;
        position: relative;
        text-align: center;
    }

    .response-button-psa label, .response-button-psa input {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #1E3547;
        color: white;
    }

        .response-button-psa input[type="radio"] {
            opacity: 0.01;
            z-index: 100;
            background: #1E3547;
        }

            .response-button-psa input[type="radio"]:checked + label,
            .Checked + label {
                color: white;
                background: #6E1300;
            }

    .response-button-psa label {
        padding: 3px;
        cursor: pointer;
        z-index: 90;
    }

        .response-button-psa label:hover {
            background: #DDD;
        }


/*MEDIA QUERIES*/

/***************************************************/
/* iPhone 6,7,8 and larger */
/***************************************************/
@media only screen and (min-width : 375px) {
    .button_padding {
        padding: 2px 2px 2px 2px;
    }

    .selectbutton, .selectedbutton {
        height: 20px;
    }



    h2 {
        font-size: 16pt;
    }
}


/***************************************************/
/* Small Devices, Tablets */
/***************************************************/
@media only screen and (min-width : 400px) {
    .button_padding {
        padding: 2px 2px 2px 2px;
    }

    .selectbutton, .selectedbutton {
        height: 20px;
    }

    .response-button-7 label, .response-button-7 input {
        font-size: 10pt;
        line-height: 10pt;
    }
}

/***************************************************/
/* Small Devices, Tablets */
/***************************************************/
@media only screen and (min-width : 576px) {
    .button_padding {
        padding: 6px 6px 6px 6px;
    }

    .selectbutton, .selectedbutton {
        height: 20px;
    }

    h2 {
        font-size: 20pt;
    }

    .header_title {
        padding-top: 14px;
        font-size: 18pt;
        font-weight: bold;
    }

    .response-button-7 label, .response-button-7 input {
        font-size: 12pt;
        line-height: 12pt;
    }
}

/***************************************************/
/* Small Devices, Tablets */
/***************************************************/
@media only screen and (min-width : 768px) {

    .button_padding {
        padding: 10px 10px 10px 10px;
    }

    .selectbutton, .selectedbutton {
        height: 25px;
    }





    h2 {
        font-size: 26pt;
    }

    .header_title {
        padding-top: 20px;
        font-size: 26pt;
        font-weight: bold;
    }

    .response-button-7 label, .response-button-7 input {
        font-size: 14pt;
        line-height: 14pt;
    }
}


/***************************************************/
/* Medium Devices, Desktops */
/***************************************************/
@media only screen and (min-width : 992px) {
    .selectbutton, .selectedbutton {
        height: 30px;
    }

    .response-button li {
        width: 24%;
        height: 40px;
    }

    .response-button label {
        padding: 6px;
    }

    .response-button-5 li {
        width: 19%;
        height: 65px;
    }

    .response-button-5 label {
        padding: 6px;
    }

    .response-button-6 li {
        width: 19%;
        height: 40px;
    }

    .response-button-6 label {
        padding: 6px;
    }
}

/***************************************************/
/* Large Devices, Desktops */
/***************************************************/
@media only screen and (min-width : 1024px) {
    .selectbutton, .selectedbutton {
        height: 30px;
    }
}


/***************************************************/
/* Large Devices, Desktops */
/***************************************************/
@media only screen and (min-width : 1200px) {
    .selectbutton, .selectedbutton {
        height: 30px;
    }
}
/***************************************************/
/* X-Large Devices, Wide Screens */
/***************************************************/
@media only screen and (min-width : 1900px) {
}



.addborder {
    border: 1px solid red;
}


.vertical-center .row {
    display: flex;
    align-items: center;
}