/****************************************************
*
* Survey Integrated Design (SID)
*
* Copyright © 2005-2025  Advanced Survey Design, LLC
*
* All rights reserved.
*
****************************************************/

u { text-decoration: none; font-weight:bold; border-bottom: 1px solid black; }

.trace-position {
    border:1px solid #ccc;
    padding: 2px 22px;
    margin-bottom: 2px;
    border-radius: 5px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19);
}

.invalid {
    background-color: #f8d7da !important;
    border-color: red !important;
}

.invalid .invalid-hint, .invalid.invalid-hint {
    color: red;
    border-bottom: 1px solid red;
}


h1 {font-size: 1.75rem !important;}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

.question input[type="radio"],
.question input[type="checkbox"] {
    font-size: 18px;
    height: 20px;
    width: 20px;
    margin-top: 0 !important;
    margin-right:5px;
    margin-bottom: 5px;
    vertical-align: middle;
}

.question .likert-option input[type='radio'],
.question .likert-option input[type='checkbox'] {
    margin-right: 0;
}

/* ADS */
#takeit {
    max-width: 760px;
}

ItemNr {
    padding-right: 10px;
}

.box {
    padding: 5px;
    background-color: #f4f4f4;
    border: 1px solid #ccc;
    border-radius: 5px;
    color: #333;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19);
}

.NavBtnClass {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.IdesHeader {
    background-color: lightblue;
    border-color: black;
    border-style: solid;
    border-width: 1px;
    font-weight: bold;
    padding: 5px 5px;
}

#QuestionProgressWrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 16px;
    background-color: black;
    border-bottom: #999;
    z-index: 100;
}

#QuestionProgress {
    display: inline-block;
    height: 16px;
    width: 0px;
    background-color: blue;
    position: absolute;
}
#QuestionProgressText {
    position: absolute;
    left: 3px;
    top:1px;
    color: white;
    z-index: 1;
    font-size:12px;
}

#ShowDualDemogRadios {
    margin: auto;
    width: 30%;
    text-align: center;
    font-size: 0.875rem;
    margin-bottom: 5px !important;
}
    #ShowDualDemogRadios label.option {
        float: left;
    }

#ShowDualDemogRadios,
.question {
    position: relative;
    color: #333;
    background-color: #f4f4f4;
    padding: 10px;
    margin-bottom: 15px;
    font-size: 18px;
    width: 100%;
}

fieldset.question > legend.q { float: left; width: 100%; }
fieldset.question > legend.q + div { clear:left; }
fieldset.question > legend.q + label { clear:left; }

.q { padding: 10px; }
.q-text { font-weight: bold; }
.q-response { padding-left:20px; padding-right: 20px; position: relative; }

    .option:hover {
        border-color: black !important;
        color: #000;
    }
    .option input[type='radio'],
    .option input[type='checkbox'] {
        cursor: pointer;
    }

    /*.option.selected {
        background-color: #D1DFF3;
        border-color: blue;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }*/

.unbold {
    font-weight: normal !important;
}

.option {
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 5px;
    margin-bottom: 5px;
    break-inside: avoid-column;
    /* fix for unbalanced top alignment safari */
    display: inline-block;
    width: 100%;
}


.q-response-cols-4 { column-count: 4; }
.q-response-cols-1 { column-count: 1; }

/* DEMOGRAGHICS */

.q-response-demog .option {
    word-break: break-word;
    padding-left: 30px;
}

    .q-response-demog .option input {
        float: left;
        margin-top: 3px;
        margin-left: -25px;
    }

    .q-response-demog input {
        display: inline-block;
    }

    .q-response-demog .option .specify {
        float: none;
        display: inline-block;
        width: 100%;
        margin: 0;
        cursor: text;
    }

    .q-response-demog .option .specify.numeric {
        width: 95px;
    }


/* Likert */
.question-likertTable { padding: 0 !important; overflow: hidden; }

.likertTable-row { padding:0; }
.likertTable-row > legend { float: left; width: 100%; }
.likertTable-row > legend + .option { clear:left; }
.likertTable-row > legend + .likert-options { clear:left; }
.likertTable-row .likert-options { display: block; }
div.likert-cell, .likert-cell.q-text { padding: 15px; }
.likert-cell { vertical-align: top !important; }
.likert-cell.option { margin: 0; padding:10px 5px; width: 70px; text-align: center; border-radius: 0; }
.likert-cell.option input { height: 20px; width: 20px; margin-top: 5px; }
.likert-cell.option span { display: block; font-size: 0.75rem; display: inline-block; width:60px; }
/* table-cell border-radius bug, only apply on hover/selected */
.likert-cell.option:hover,
.likert-cell.option.selected { border-radius: 10px; z-index: 1; }

.likert-cell > .specify { width: 100%; display: inline-block; }

/* Ranking */
.ranking.option,
.numbers.option {
    display: block;
    padding-top: 5px;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 5px;
    margin-block: 5px;
}

    .ranking.option:hover,
    .numbers.option:hover {
        border-color: transparent !important;
        cursor: default;
    }


input.ranking,
input.numbers {
    width: 35px;
    text-align: center;
    margin-left: 25px;
    float: right;
    margin-top: -2px;
}

#takeit input:focus,
#takeit textarea:focus { outline: 2px solid blue; }

.numbers.option input.numbers { width: 45px; text-align:center; }
.numbers.option .specify { width: calc(100% - 70px); display: inline-block; margin-top: -2px; }

textarea.specify { height: 25px; display: inline-block; resize: none; overflow: hidden; }
span.specify-char-count { position: absolute; color: #666; font-size: 12px; margin-left:-143px; margin-top:-14px; }

.numeric {
    margin-left:10px;
    text-align: right;
    width: 95px;
}
input.numeric.comma.decimal {
    width: 115px;
}

.numbers-header {
    margin-bottom: 10px;
    display: table;
    width: 100%;
}

.numbers-header-left {
    display: table-cell;
    width: 90%;
    font-weight: bold;
    text-align: left;
    padding-left: 5px;
    vertical-align: bottom;
}

.numbers-header-right {
    display: table-cell;
    width: 10%;
    font-weight: bold;
    text-align: center;
    vertical-align: bottom;
}

.q-number {
    padding-right: 5px;
    font-weight: bold;
}

/* Comments */
.q-comment {
    position: relative;
    padding-left: 20px;
    padding-right: 20px;
}

.q-comment .option {
    display: block;
    padding: 0 0 3px 5px;
}

.q-comment .text-count {
    float: right;
    font-size: 12px;
    color: #666;
    /*display: none;*/
    visibility: hidden;
    margin-top:5px;
}

.q-comment textarea {
    width: 100%;
    min-height: 70px;
    font-size: 14px;
    padding: 5px;
    overflow-y: hidden;
    border: 1px solid #999;
    border-radius: 5px;
    margin-bottom: 15px;
    font-size: 1rem;
}

.q-comment textarea.freeText {
/*    min-height: 120px;*/
}
    .q-comment textarea:focus {
        outline-color: blue;
    }

    .q-comment-validate .text-count {
        position: absolute;
        bottom: -9px;
        right: 40%;
    }

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

.warning,
span[style*='color: red'] {
    padding: 20px;
    color: #ab0000 !important; 
    background-color: #FFF4F2;
    border: 1px solid #f5c6cb;
    border-radius: 15px;
    border-color: #721c24;
    display: block;
}

.SubmitBtnClass { text-align: center; }
.DefinitionClass { color: purple; cursor: help; border-bottom: 1px solid purple; }
.ItemPrompt { display: block; margin-top: 30px; margin-bottom: 20px; }
.SpecPreambleClass { font-size: large; }
#SurveyIdSpan { text-align: center; display: none; }
#SurvInstructions * { max-width: unset !important; }

@media print {
    .question { margin-bottom: 0 !important; }

    .option,
    textarea,
    div.q-comment {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    #SurveyIdSpan { display: block !important; }
}

@media only screen {
    .question {
        border: 1px solid #ccc;
        border-radius: 5px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19);
        margin-top: 15px;
    }

    .option.selected {
        border: 1px solid blue !important;
        border-radius: 10px !important;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19) !important;
        background-color: #D1DFF3 !important;
    }

    .framed .safari .option.selected {
        /* shifts multi-column content */
        box-shadow: none;
    }
}


@media only screen and (min-width: 480px) {
    .likertTable-row { display:flex; flex-direction: row; }
    .likertTable-row .option:nth-child(even) { background-color: #fff; }
    .likertTable-row legend { display: inline-block; }
    .likert-cell.q-text { width:100%; }

    .safari .likertTable-row { display:block; flex-direction: unset; }
    .safari .likertTable-row .option:nth-child(even) { background-color: unset; }
    .safari .likertTable-row div.likert-options .option:nth-child(odd) { background-color: #fff; }
    .safari .question-likertTable-header div.likert-options { display: inline; }
    .safari .question-likertTable-header .option { float:left; min-height: 50px; width: 40px; padding-bottom: 12px; height:100%; }
    .safari .question-likertTable-2 legend { width:calc(100% -  90px) !important; }
    .safari .question-likertTable-3 legend { width:calc(100% - 130px) !important; }
    .safari .question-likertTable-4 legend { width:calc(100% - 170px) !important; }
    .safari .question-likertTable-5 legend { width:calc(100% - 210px) !important; }
    .safari .question-likertTable-6 legend { width:calc(100% - 250px) !important; }
    .safari .question-likertTable-7 legend { width:calc(100% - 290px) !important; }
    .safari .question-likertTable-8 legend { width:calc(100% - 330px) !important; }


    .likert-option {
        display: inline-block;
        text-align: center;
        vertical-align: top;
        padding: 5px;
        width: 70px;
        height: 106px;
        padding: 15px 5px;
        margin: 10px 0px;
        font-size: 14px;
    }

    .likert-option span {
        display: block;
    }

    .q-response-likert .option-bar {
        display: inline-block;
        height: 100px;
        width: 1px;
        border-left: 1px inset;
        margin: 10px 5px 5px -1px;
    }

    .likert-7 .likert-option {
        width: 13%;
    }
    .likert-6 .likert-option,
    .likert-6.likert-extra-1 .likert-option,
    .likert-7.likert-extra-2 .likert-option {
        width: 15.2%;
    }
    .likert-choices-5 .likert-option {
        width: 19%;
    }



    .likert-extra-2 .likert-option-extra input {
        height: 15px;
        margin: 0 !important;
    }

    .likert-extra-2 .likert-option-extra {
        height: 48px;
        position: absolute;
        padding-top: 10px;
        padding-bottom: 5px;
        font-size: 12px;
    }

    .likert-extra-2 .likert-option-extra:last-child {
        top: 45%;
    }

    .likert-option-extra.selected {
        background-color: #ccc !important;
        border: 1px solid blue !important;
    }

    .likert-cell.q-text {
        font-weight: normal;
    }

    fieldset.likertTable-row {
        border-width:1px 0 0 0;
    }
    fieldset.likertTable-row:first-child {
        border-width:0;
    }



    /* likert headers */
    div.question-likertTable-header .likert-cell {
        min-width: 40px;
        width: 40px;
        text-align: center !important;
        vertical-align: middle !important;
        padding: 12px 0 0 0;
    }

    div.question-likertTable-header .likert-legend-cell {
        text-align: left !important;
        vertical-align: middle !important;
        margin: 0 5px;
    }
    div.question-likertTable-header .likertTable-row {
        margin: 0;
        background-color: transparent;
        border-width: 0;
    }
    div.question-likertTable-header .likertTable-row:hover {
        outline: 1px solid black;
    }
    div.question-likertTable-header .likert-cell { border-left: 1px solid #ccc; }
    div.question-likertTable-header .likert-cell input { margin: 0; }
    div.question-likertTable-header .likert-cell span { display: none; }

    div.likertTable-header {
        border-bottom: 1px solid #ccc;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        overflow: hidden;
    }
    div.likertTable-header > div:nth-child(odd) > div { background-color:#fff; }
    div.likertTable-header > div:last-child > div { border-top: 1px solid #ccc; }
    div.likertTable-header > div {
        width: 40px;
        height: 100%;
        position: relative;
        white-space: nowrap;
        width: 40px;
        height: 100%;
    }
    div.likertTable-header > div > div {
        position: absolute;
        bottom: 0;
        right: 0;
        text-align: right;
        transform: rotate(45deg) translate(0, 29px);
        transform-origin: right bottom;
        height: 30px;
        line-height: 30px;
        width: 550px;
        border-bottom: 1px solid #ccc;
        padding-right: 25px;
    }
}


@media only screen and (max-width: 480px) {
    body { padding: 10px; }
    .question { padding: 5px; }

    .q-response-cols-4 {
        column-count: 2;
    }

    .q-response-likert .option-bar {
        display: block;
        height: 1px;
        width: 100%;
        border-top: 1px inset;
        margin: 0 5px 10px 0;
    }

    .text-remaining { display: none; }
    /*.q-comment-validate .text-count { visibility: hidden !important; }*/

    .question input[type='radio'],
    .question input[type='checkbox'] {
        margin-top:5px !important;
        height: 15px;
    }

    .numbers-header-left { width: 70%;}
    .numbers-header-right { width: 30%;}

    .question-likertTable { display: block; border: 0; box-shadow: unset; background-color: unset; }
    .likertTable-row {
        display: block;
        position: relative;
        color: #333;
        background-color: #f4f4f4;
        border: 1px solid #ccc;
        border-radius: 10px;
        padding: 10px;
        margin-bottom: 15px;
        font-size: 18px;
    }

    div.likert-cell, .likert-cell.q-text { font-weight: bold; padding: 5px; }
    .likertTable-row-odd { background-color: unset; }

    .likert-cell { display: block !important;  }
    .likert-cell.option { width: auto; text-align: left; margin: 0 10px; }
    .likert-cell.option span { display: inline;  font-size: unset;}
    .likertTable-header { display: none; }

    .likert-option br {
        content: " ";
        margin-left: .4em;
    }

}