/* In Qualtrics Survey, in the Look and Feel section, use the following settings:
Font: Helvetica
Foreground Contrast: High
Question Spacing: Comfortable
Question Text (px): 16
Answer Text (px): 14
External CSS: https://jmg3024.github.io/qualtrics/qualtrics.css
*/

/* increase distance btwn progress bar and header bar*/
.Skin #ProgressBar {
    margin-top: -25px;
    margin-bottom: 0;
}
/* format language selection dropdown */
.Skin select {
    border: 1px solid #d2d2d2;
    padding: 10px;
}
.Skin .LanguageSelectorContainer {
    margin: 0 20px 20px 0;
}
/* decrease space between CGIR logo and start of consent copy */
#QID531 {
    padding-bottom: 0;
}
#QID531 .QuestionBody {
    padding-top: 10px;
}
/* increase line height for matrix response options */
.Skin .LabelWrapper{
    line-height:1.3em;
}
/* reduce space beneath each Q */
.Skin .QuestionOuter {
    padding-bottom: 1vh;
}
.Skin .QuestionBody {
    font-size: 14px;
    padding-bottom:10px !important;
}
/* control copy line-height
 * reduce space between each Q and its response options
 *  */
.Skin .QuestionText {
    line-height: 1.5em;
    padding-bottom: 7px;
}
/* increase height and roundness of progress bar */
.Skin #ProgressBarFillContainer,
.Skin .ProgressBarFill,
.Skin .ProgressBarFillContainer {
    height: 15px;
    border-radius: 10px;
}
/* format text input boxes */
.Skin .MC .TextEntryBox,
.Skin .TE .ESTB .InputText,
.Skin .TE .FORM .InputText,
.Skin .TE .FollowUp .InputText,
.Skin .TE .ML .InputText,
.Skin .TE .PW .InputText,
.Skin .TE .SL .InputText,
.Skin .TE textarea,
.Skin input.TextEntryBox,
.Skin input[type="password"],
.Skin input[type="search"],
.Skin input[type="text"],
.Skin textarea {
    border: 2px solid #999;
}
.Skin .MC .TextEntryBox,
.Skin .TE .ESTB .InputText,
.Skin .TE .FORM .InputText,
.Skin .TE .FollowUp .InputText,
.Skin .TE .ML .InputText,
.Skin .TE .PW .InputText,
.Skin .TE .SL .InputText,
.Skin input.TextEntryBox {
    min-height: 42px;
}
/* even out multiple choice rectangle padding */
.Skin label.MultipleAnswer,
.Skin label.SingleAnswer {
    padding: 16px 15px 13px 15px;
}
/* increase size of copy in matrix Qs */
.Skin .Matrix .QuestionBody,
.Skin .SBS .QuestionBody {
    font-size: 14px !important;
}
.JFEScope .Skin .q-matrix .table-cell{
    font-size:14px;
    line-height:1.3em;
}
/* decrease space between fields in form field Qs */
.Skin .TE .FORM table td {
    padding-top:5px;
    padding-bottom:5px;
}
/* format next button */
.Skin #Buttons #NextButton {
    border: none;
    color: #fff;
    font-size: 16px;
    padding: 20px 30px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
    margin: 2px;
    text-align: center;
    text-decoration: none;
    -webkit-appearance: none;
    transition: background 0.3s;
    background-color: #004968;
}
/* format back button */
.Skin #Buttons #PreviousButton {
    border: none;
    color: #fff;
    font-size: 14px;
    padding: 10px 20px;
    margin-top:15px !important;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
    margin: 2px;
    text-align: center;
    text-decoration: none;
    -webkit-appearance: none;
    transition: background 0.3s;
    background-color: #719aab;
}
/* increase space between next button and Qualtrics tag */
.Skin #PushStickyFooter{
    margin-top:50px;
}
/* ------MOBILE STYLES------*/

@media (max-width: 770px) {
   /* set font size to 16px so iOS doesn't auto-zoom into inputs */
    input, select, textarea {
        font-size: 16px !important;
    }
    /* reduce space beneath blue header */
    .Skin #LogoContainer{
        margin-bottom:18px;
    }
    /* increase space between progress bar and header bar */
    .Skin #ProgressBar {
        margin-top: 0 !important;
    }
    /* create 20px left/right margin */
    .Skin .MC .QuestionBody ul.ChoiceStructure {
        margin: 0 20px;
    }
    /* reduce space between Qs */
    .Skin .QuestionText {
        padding: 0 20px 5px 20px !important;
    }
    /* increase font size of Q text and reduce space between Qs */
    .Skin .QuestionBody {
        font-size: 14px;
        padding-bottom:10px !important;
    }
    .Skin #Buttons {
        padding:10px 20px !important;
    }
    /* increase size of combobox dropdown */
    .select2-container .select2-selection--single{
        height:45px;
    }
}

@media (max-width: 480px) {
    /* set font size to 16px for mobile */
    .Skin .DB .QuestionText,
    .Skin .QuestionText {
        font-size:16px !important;
    }
    /* increase padding for logo */
    .Skin #LogoContainer {
        padding-left:15px;
    }
    /* increase font size for statements in matrix Qs */
    .JFEScope .Skin .q-matrix .table-cell{
        font-size:15px !important;
    }
}