/**
 * question.css
 *
 * Styling for the questionnaire and forms
 *
 * Table of Contents:
 * 1. General                       - ???
 * 2. Left Side                     - The progress bar/title side
 * 3. Right Side                    - The side with the questions
 * 4. Phone                         - Phone screen adjustments
 *
 * @author Sarah Stensland
 * @version 2/2/22
*/


/* -----------------------------------------------------SECTION 1: GENERAL----------------------------------------------------- */


/* The left/right boxes on the questionnaire */

.inner-page-container {
    background-color: white;
    border-radius: 15px;
    width: 40%;
    box-shadow: 0px 3px 6px rgba(24, 34, 88, .5);
    min-width: 350px;
}


/* The left box on the questionnaire */

.left-page-container {
    margin-left: 2%;
}


/* -----------------------------------------------------SECTION 2: LEFT----------------------------------------------------- */


/* The progress bar image */

.progressBar {
    margin-left: 50%;
    transform: translateX(-50%);
    height: 35px;
    width: 75%;
}


/* The icon for THIS section, above the title */

.questionnaireIcon {
    margin-top: 30px;
    margin-left: 50%;
    transform: translateX(-50%);
    width: 30%;
}


/* The page title */

.questionnaireStatus {
    text-align: center;
    text-transform: uppercase;
    padding: 15px 0;
}


/* form insturction and title styling */

.formInstructions {
    margin: 0 auto;
    width: 90%;
    font-size: large;
}

.formHeadline {
    margin: 15px auto;
    padding: 15px 0 0 0;
}

#largeInstructionsDiv .formInstructions {
    color: #8b0368;
}


/* -----------------------------------------------------SECTION 3: RIGHT----------------------------------------------------- */


/* The submit/back button div */

#buttons {
    margin-left: 51%;
    transform: translateX(-50%);
    width: 95%;
    padding-left: 15px;
}


/* radioImage text/number box */

.radioBox {
    border-color: #706d96;
    border-width: 1px;
    border-radius: 4px;
    height: 34px;
    text-align: center;
    width: 99.5%;
    margin-left: 1px;
}

.radioBox[placeholder] {
    font-size: 18px;
    color: black;
}


/*radioPicture classes */

.radioInput.radioPicture {
    position: absolute;
    visibility: hidden;
}

input[class='radioInput radioPicture']:checked+img {
    opacity: 1;
    filter: grayscale(0);
}

input[class='radioInput radioPicture']:hover+img {
    opacity: 1;
    filter: grayscale(0);
}

.radioPictureLabel {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
}

.radioPic {
    opacity: .35;
    filter: grayscale(10);
}

.radioPictureFlex {
    flex-direction: row !important;
    flex-wrap: nowrap;
}


/*RadioImage Classes*/

input[class='radioInput']:checked~.radioSvg .radioRect {
    fill: #706d96;
    stroke-width: 1.25;
    stroke: #706d96;
}

input[class='radioInput']:checked~.radioSvg .radioText {
    fill: #FFFFFF;
}

input[class='radioInput']:active~.radioSvg .radioRect {
    fill: #706d96;
    stroke-width: 1.25;
    stroke: #706d96;
}

input[class='radioInput']:active~.radioSvg .radioText {
    fill: #FFFFFF;
}

input[class='radioInput']:hover~.radioSvg .radioRect {
    fill: #706d96;
    stroke-width: 1.25;
    stroke: #706d96;
}

input[class='radioInput']:hover~.radioSvg .radioText {
    fill: #FFFFFF;
}

.radioInput {
    width: 1px;
    height: 1px;
    border: none;
    padding: 0px;
    margin: 0px;
    opacity: 0;
    position: absolute;
}

.radioRect {
    border-radius: 4px;
    fill: #FFFFFF;
    stroke-width: 1.25;
    stroke: #706d96;
}

.radioText {
    fill: #706d96;
    font-size: 18px;
}

.radioDiv {
    margin-top: -8px;
    margin-left: 15px;
}


/* Question text format */

.question {
    font-family: Helvetica;
    font-weight: bold;
    font-size: 14pt;
    text-align: left;
    color: #8b0368;
}


/* The zipcode question */

#zipcode {
    text-align: center;
}

.questionDiv {
    margin-bottom: 15px;
    display: block;
    padding-left: 15px;
}

.radioLabel {
    width: 95%;
    height: 34px;
    margin-bottom: 10px;
}


/* Textbox */

.questText {
    width: 98%;
    height: 34px;
    background: #ffffff;
    border: 1.25px solid #706d96;
    margin: 10px 0;
    max-width: 100% !important;
}


/* Number box */

.questNumber {
    width: 97%;
    height: 34px;
    background: #ffffff;
    border: 1.25px solid #706d96;
    margin: 10px 0;
}


/* -----------------------------------------------------SECTION 4: PHONE----------------------------------------------------- */


/* Phone styling for outer most columns */

@media screen and (max-width: 750px) {
    /* 1. General */
    .inner-page-container {
        box-shadow: none;
        width: 85%;
        min-width: none;
        min-height: none;
        margin: auto;
    }
    /* 3. Right */
    #buttons {
        margin-left: 50%;
    }
}

@media screen and (max-width: 1000px) {
    /* 2. Left */
    .formInstructions {
        padding-left: 15px;
    }
    #largeInstructionsDiv {
        display: none;
    }
    /* 3. Right */
    .radioPictureFlex.flex-container {
        flex-direction: row;
        flex-wrap: nowrap;
    }
    .radioPic {
        width: 100%;
        height: fit-content;
    }
    .questionDiv {
        display: block;
    }
    input[name=backBtn] {
        min-width: 95%;
        height: 48px;
        background: #fff;
        border: 1.25px solid #192359;
        color: #192359;
    }
    /* COMMENTED OUT ON 2/2/22
    .register.btn-danger {
        margin-left: -20%;
    } */
}

@media screen and (min-width: 1000px) {
    /* 1. General */
    .inner-page-container {
        min-height: 500px;
    }
    input[name=backBtn] {
        width: 95%;
        height: 48px;
        background: #fff;
        border: 1.25px solid #706d96;
        color: #706d96;
        font: Helvetica;
        font-size: 15pt;
    }
    /* 2. Left */
    .formInstructions {
        margin-bottom: 20px;
    }
    #smallInstructionsDiv {
        display: none;
    }
    /* 3. Right */
    .radioPic {
        width: 100%;
        height: 50px;
    }
    /* COMMENTED OUT ON 2/2/22
    .register.btn-danger {
        margin-left: -5%;
    } 
    .makeTreeBox {
        justify-content: center;
        margin-top: 10px
    }*/
}


/* COMMENTED OUT ON 1/20/22
.signup-container {
    box-shadow: none;
    margin-top: 50px;
} */


/* COMMENTED OUT ON 1/20/22
.desc-welcome {
    height: auto;
    width: 100%;
    max-width: 95%;
} */


/* COMMENTED OUT ON 1/20/22
label[for='groupCheck'] {
    margin: 0 15px;
} 

.flex-container.signup {
    justify-content: start;
    align-items: center;
    flex-direction: row !important;
} */