/******************
 *    User custom CSS
 *    ---------------
 *
 *    In this file you can add your own custom CSS
 *    It will be loaded last, so you can override any other property.
 *    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
 */


/* Notes



 */


:root {
    /* progress-bar */
    --progress_bar_background_color: #004170;
    --progress_bar_background_color: #004170;
    --progress_bar_text_color: #FFFFFF;

    /* style taille */
    --text_large_width: 18pt; /* tailles titres principaux et description...*/
    --text_small_width: 12pt; /* tailles des aides et avertissements...*/

    /* aides et alertes */
    --text_color_help: #A94442;

    /* style par defaut (Sous titres et question...) */
    --text_color_default: #444444;
    --text_width_default: 16pt;
    --text_font_default: Calibri;
    --text_weight_default: bold;

    /* style des boutons, entrées, listes... */
    --buttom_background_color_normal: rgba(15, 62, 18, 0.1);
    --buttom_text_color_normal: #004170;
    --buttom_border_color_normal: 1px solid #004170;

    --buttom_background_color_checked: rgba(0, 65, 112, 0.8);
    --buttom_text_color_checked: #FFFFFF;
    --buttom_border_color_checked: 1px solid #004170;
}



/* Progress-bar */
.fruity .progress-bar {
    background-color: var(--progress_bar_background_color);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    color: var(--progress_bar_text_color);
}



/* Affichage texte */

/* Introduction */
.survey-welcome > .survey-name,
.survey-description > p {
    margin-top: 30px;
}

.survey-welcome > p > span > span > span,
.survey-description > p > span > span > span {
    font-size : var(--text_width_default) !important;
    color : var(--text_color_default) !important;
    font-family: var(--text_font_default) !important;
    font-weight: var(--text_weight_default) !important;
}

.fruity .text-info, .fruity .text-primary {
    font-size : var(--text_width_default) !important;
    color : var(--text_color_default) !important;
    font-family: var(--text_font_default) !important;
    font-weight: var(--text_weight_default) !important;
}



/* Entete principal */
.group-description {
    border: thick double #004170 !important;
}

.group-description > p > strong > span > span > span > span {
    font-size : var(--text_width_default) !important;
}



/* Titres et questions */
.group-title {
    font-size: var(--text_large_width) !important;
    color : var(--text_color_default) !important;
    font-family: var(--text_font_default) !important;
    font-weight: var(--text_weight_default) !important;
}

.group-description > p > strong > span > span > span > span,
.group-description > p > strong > span > span > span > span > span {
    font-size: var(--text_large_width) !important;
    color : var(--text_color_default) !important;
    font-family: var(--text_font_default) !important;
    font-weight: var(--text_weight_default) !important;
}

.question-text > .ls-label-question > b,
.question-text > .ls-label-question > b > span > span > span > span,
.ls-label-question > b > span > span > span > span {
    font-size: var(--text_width_default) !important;
    color : var(--text_color_default) !important;
    font-family: var(--text_font_default) !important;
    font-weight: var(--text_weight_default) !important;
}



/* Message d'aide */
.ls-questionhelp > span > i > span > span > span {
    font-size: var(--text_small_width) !important;
    color: var(--text_color_help)  !important;
    font-family: var(--text_font_default) !important;
    font-weight: var(--text_weight_default) !important;
}

#vmsg_16738_num_answers {
    font-size: var(--text_width_default) !important;
    color: var(--text_color_help)  !important;
    font-family: var(--text_font_default) !important;
    font-weight: var(--text_weight_default) !important;
    margin-left: -26px !important;
}


#vmsg_16738::before {
    display: none !important;
}


.ls-questionhelp > p > span > span > span {
    font-size: var(--text_small_width) !important;
    color: var(--text_color_help) !important;
    font-family: var(--text_font_default) !important;
    font-weight: var(--text_weight_default) !important;
}



/* styles des button */
button {
    background-color: var(--buttom_background_color_normal);
    border: var(--buttom_border_color_normal);
    color: var(--buttom_text_color_normal);
}

.fruity .btn-outline-secondary,
.fruity .btn-outline-secondary:hover {
    background-color: var(--buttom_background_color_normal);
    border: var(--buttom_border_color_normal);
    color: var(--buttom_text_color_normal);
}

#ls-button-previou, #ls-button-submit {
    background-color: var(--buttom_background_color_normal);
    border: var(--buttom_border_color_normal);
    color: var(--buttom_text_color_normal);
}



/* styles des input */
body .answer-item label:after {
    background-color: var(--buttom_background_color_checked);
}
.checkbox-item input[type=checkbox]:checked+label:after, .checkbox-item input[type=radio]:checked+label:after {
    background-color: var(--buttom_background_color_checked);
    color: var(--buttom_text_color_checked);
}

.text-item input[type=text]:focus {
    border: var(--buttom_border_color_checked);
    box-shadow: 2px 2px 2px 2px rgba(0, 65, 112, 0.8);
}

.form-control:focus {
    border-color: var(--buttom_border_color_checked);
    box-shadow: 2px 2px 2px 2px rgba(0, 65, 112, 0.8);
}



/* Styles des lists déroulantes */

.fruity .form-control:focus {
    border: var(--buttom_border_color_checked);
    box-shadow: 2px 2px 2px 2px rgba(0, 65, 112, 0.8);
}



/* Style des echelles de Likert */
.fruity .btn-primary {
    background-color: var(--buttom_background_color_normal);
    border: var(--buttom_border_color_normal);
    color: var(--buttom_text_color_normal);
}

.fruity .btn-primary:hover,
.fruity .btn-check:checked + .btn-primary {
    background-color: var(--buttom_background_color_checked);
    border: var(--buttom_border_color_checked);
    color: var(--buttom_text_color_checked);

}


/* Style des entré numérique à gauche */
[data-number="1"] {
    text-align: left;
}

/* Titre de la question */
.question-title,
.question-title-container,
.question-text {
    font-size: 16pt !important;
    font-weight: bold !important;
    font-family: Calibri, sans-serif !important;
    color: #444 !important;
}