/* qualtrics surveys */


@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
/* 
  font-family: "Source Sans 3", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200 - 900;
  font-style: normal;
*/

.Skin {
  font-family: "Source Sans 3", sans-serif;
  font-optical-sizing: auto;
  font-weight: 40;
  font-style: normal;
}
.Skin .QuestionOuter {
    padding: 0 .5em 3vh;
}
.Skin .QuestionText {
    padding-left: 5px;
    padding-bottom: 0;
}
.Skin #Buttons, 
.Skin #Buttons #NextButton, 
.Skin #Buttons #PreviousButton {
    text-align: center;
    border-radius: .5em;
    padding: .75em 2.5em;
}

/* remove some padding below h1; fix letter cropping */
h1 {
    line-height: 1.25;
    margin-bottom: -.5em;
}


.Skin .QuestionBody b {
/*    font-weight: normal;*/
}

/* increase text size on mobile */
@media(max-width: 480px) {
    .Skin .QuestionBody, 
    .Skin .Matrix .QuestionBody, 
    .Skin .SBS .QuestionBody, 
    .JFEScope .Skin .q-matrix .table-cell, 
    .Skin button, .Skin input, 
    .Skin select, .Skin textarea, 
    .Skin #Buttons #NextButton, 
    .Skin #Buttons #PreviousButton {
        font-size: unset;
    }
}



@media(min-width: 980px) {
    .Skin #SkinContent {
        min-width: 980px; 
    }
    .Skin .QuestionOuter.Matrix {
        max-width: 980px;
    }
    .JFEScope .Skin .q-matrix .table-cell, 
    .Skin .Matrix .QuestionBody, 
    .Skin .SBS .QuestionBody {
        font-size: 18px;
    }
    .Skin .QuestionBody {
/*        font-size: 24px;*/
    }
}


/* force input boxes to have their own line */
input.RankInput.InputText {
    display: block;
}



/* accessibility overrides */


/* inside focus */
label.MultipleAnswer:focus-visible {
    box-shadow: rgb(0, 0, 0) 0px 0px 0px 4px inset;
    outline: rgb(255, 255, 255) solid 2px !important;
    outline-offset: -4px;
}

/* outside focus */
label.q-radio:focus-visible, 
textarea.InputText:focus-visible, 
input.InputText:focus-visible, 
.Skin label.q-radio.q-checked, 
.Skin label.q-radio.q-focused, 
.Skin label.q-radio.q-checked.q-focused, 
.Skin label.q-checkbox.q-checked, 
.Skin label.q-checkbox.q-focused, 
.Skin label.q-checkbox.q-checked.q-focused, 
.Skin label.SingleAnswer.q-focused, 
.Skin label.MultipleAnswer.q-focused {
    outline: 2px white solid !important;
    outline-offset: 0;
    box-shadow: 0 0 0 4px black;
}
    .Skin label.SingleAnswer.q-focused, 
    .Skin label.MultipleAnswer.q-focused {
        background-color: #ddd;
    }
    /* radios and checkboxes use box-shadow so my style gets overridden */
    .Skin label.q-radio.q-checked.q-focused,
    .Skin label.q-checkbox.q-checked.q-focused {
        outline: 2px #084c8d solid !important;
        border: 1px solid #fff;
    }


/* add padding so focus states don't get cropped */
.Skin .QuestionBody,
.Skin .MC .QuestionBody, 
.Skin .Matrix .QuestionBody {
    padding-left: 5px !important;
    padding-right: 5px !important;
    padding-top: 5px !important;
}