/* General small device tweaks */

@media screen and (max-width: 820px) {
    .menu-button {
        display: block;
    }

    .question-block {
        padding-top: 50px;
    }

    .menu-button:hover {
        cursor: pointer;
        background-color: #EEE;
        border: solid 1px black;
    }

    #popupMenu {
        left: 14%;
    }

    .main-content {
        border: solid 10px #EEE;
    }

    .side-menu ul {
        list-style-type: none;
        margin-bottom: 10px;
        padding: 0;
    }

    .side-menu li {
        text-align: left;
        clear: both;
    }

    .button-div {
        padding-left: 0;
        padding-top: 20px;
    }

    .side-menu li.selected {
        border-left: solid 5px white;
    }

        .side-menu li.selected A {
            font-weight: bold;
            text-decoration: underline;
            padding-left: 5px;
        }

            .side-menu li.selected A:hover {
                font-weight: bold;
                text-decoration: underline;
                padding-left: 5px;
            }

    .top-menu-selected {
        margin-right: 0;
        cursor: pointer;
    }

        .top-menu-selected:hover {
            background-color: #666;
        }

    .side-menu ul li a {
        padding: 15px 10px;
        border-left: 2px solid #3d3c3c;
        border-bottom: 1px solid #4c4848;
        color: #e1e1e1;
        background: #3d3c3c;
        display: inline-block;
        font-weight: bold;
        overflow-wrap: break-word;
    }

    .side-menu ul li img {
        float: left;
    }

    .side-menu ul li a div {
        float: left;
        padding-top: 7px;
        padding-left: 25px;
    }


    .side-menu {
        display: block;
        overflow: hidden;
    }


    .nav-main-wrapper {
        grid-template-columns: 1px 99%;
        display: grid;
    }

    .nav-main-wrapper-menu {
        grid-template-columns: 350px 99%;
        display: grid;
    }

    .Title {
        font-size: 1rem;
    }

    .banner_div_small {
        display: block;
    }

        .banner_div_small img {
            width: 100%;
        }

    .banner_div {
        display: none;
    }

    input[type=radio], input[type=checkbox] {
        width: 1.2rem;
        height: 1.2rem;
        padding-right: 20px;
        margin-right: 10px;
    }


    input[type=text], input[type=password], select {
        height: 2rem;
        width: 20rem;
        margin: 0 1rem 0.1rem 0;
        font-size: larger;
    }

        input[type=text].narrow, input[type=password].narrow, select.narrow {
            height: 2rem;
            width: 14rem;
            margin: 0 1rem 0.1rem 0;
            font-size: larger;
        }

    textarea {
        width: 20rem;
        margin: 0 1rem 1rem 0;
        font-size: larger;
    }

    .control-hint {
        clear: both;
        margin-bottom: 0;
        padding-top: 5px;
    }

    .control-field {
        width: 100%;
        padding-top: 10px;
    }

    .warning_div {
        width: 95%;
        margin-left: 0;
    }



    .photo-grid {
        grid-template-columns: 100%;
    }

    .photo-grid-header {
        grid-column: 1;
        grid-row: 1;
    }

    .photo-grid-image {
        grid-column: 1;
        grid-row: 2;
    }

    .photo-grid-text {
        grid-column: 1;
        grid-row: 3;
    }

    .summary-label-wide {
        width: 10rem;
    }

    .control-disclaimer, .control-padded, .control-checkbox {
        float: left;
        width: 21rem;
    }

    #popUp, #popUpComplete {
        top: 150px;
        left: 10%;
        width: 70%;
    }

    .company_option, .reason_option {
        width: 20rem;
        padding-bottom: 0;
    }

    .faq_heading {
        padding-bottom: 10px;
    }

        .faq_heading h2 {
            float: unset;
            font-size: 1.9rem;
        }

        .faq_heading LI {
            float: unset;
            text-align: right;
        }

        .faq_heading ul {
            float: unset;
            margin: 1rem 0 0 0;
        }

    .control-disclaimer, .control-padded, .control-checkbox {
        padding-left: 0;
    }

    .indent {
        padding-left: 2rem;
    }

    .link_block {
        height: 15rem;
        margin: 10px;
        width: 19rem;
    }
}

/* Make what to do next boxes stacked upto this size */
@media (max-width:1023px) {
    .start-here-grid {
        grid-template-columns: 100%;
        row-gap: 15px;
    }

    legend {
        font-size: 1.7rem;
    }

    .start-here-whatnext {
        grid-row: 1;
        grid-column: 1;
    }

    .start-here-summary {
        grid-row: 2;
        grid-column: 1;
    }

    .start-here-infoview {
        grid-row: 3;
        grid-column: 1;
    }

    .start-here-email {
        grid-row: 4;
        grid-column: 1;
    }

    .start-here-checklist {
        grid-row: 5;
        grid-column: 1;
    }

    .header {
        grid-template-columns: 6rem auto 100px;
    }

    .photo-grid-display {
        grid-template-columns: 1.7rem auto 1.7rem;
    }
}

/* Remove the dynamic menu 
   stack radio options 
   Stack photo page
   for browsers up to 1400px
*/

@media (max-width: 1275px) {
    .top-menu uL {
        clear: both;
        padding: 0;
        float: unset;
 /*        display: none; */
    }

    .display-menu { 
        display:block;
    }

    .hide-menu {
        display:none;
    }

    .top-menu li {
        float: unset;
        background-color: #3d3c3c;
        color: white;
        padding: 10px;
    }

        .top-menu li > a {
            color: white;
        }

            .top-menu li > a.active, .top-menu li > a:hover {
                font-weight: bold;
                background: unset;
                border-bottom: none;
            }

    .top-menu-selected {
        float: right;
        background-color: #3d3c3c;
        color: white;
        padding: 10px;
        display: block;
    }

        .top-menu-selected span {
            text-transform: uppercase;
        }
}

@media (max-width: 1400px) {

    .offender_option .radio-inline {
        padding-right: 0;
        display: block;
        width: 100%;
        padding-bottom: 10px;
    }

    .offender_option {
        display: block;
        padding: 20px 20px 20px 20px;
    }

    .photo-grid {
        grid-template-rows: auto auto auto;
        grid-template-columns: 100%;
        column-gap: 0;
    }

    .photo-grid-header {
        grid-row: 1;
        grid-column: 1;
    }

    .photo-grid-image {
        grid-row: 2;
        grid-column: 1;
    }

    .photo-grid-text {
        grid-row: 3;
        grid-column: 1;
    }
}

@media (min-width: 821px) and (max-width: 1023px) {
    input[type=text], input[type=password], select {
        width: 20rem;
        margin-bottom: 0.1rem;
    }

        input[type=text].narrow, input[type=password].narrow, select.narrow {
            width: 10rem;
            margin-right: 11rem;
            margin-bottom: 0.1rem;
        }

    textarea {
        width: 20rem;
        margin-bottom: 0.1rem;
    }

    .control-disclaimer, .control-padded, .control-checkbox {
        width: 21rem;
    }

    .control-hint {
        padding-left: 250px;
        padding-bottom: 20px;
        padding-top: 5px;
        padding-right: 10rem;
    }

    .company_option, .reason_option {
        width: 19.5rem;
    }

    .warning_div {
        width: 95%;
        margin-left: 0;
    }

    .indent {
        padding-left: 2.5rem;
    }
}

/* Testbox resizing for slightly larger screens*/
@media (min-width: 1024px) and (max-width: 1400px) {
    input[type=text], input[type=password], select {
        width: 30rem;
        margin-bottom: 0.1rem;
    }

        input[type=text].narrow, input[type=password].narrow, select.narrow {
            width: 18rem;
            margin-right: 12rem;
            margin-bottom: 0.1rem;
        }

    textarea {
        width: 30rem;
    }

    .control-disclaimer, .control-padded, control-checkbox {
        width: 31rem;
    }

    .company_option, .reason_option {
        width: 29.5rem;
    }

    .control-hint {
        padding-left: 250px;
        padding-bottom: 20px;
        padding-top: 5px;
        padding-right: 10rem;
    }

    .warning_div {
        width: 30rem;
        margin-left: 250px;
    }
}