/******************
    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
*/


/* ==================================================
   1. PALETTE DE COULEURS
   ================================================== */

:root {
    --org-blue: #005EA5;
    --org-blue-light: #D6EDFF;
    --org-blue-dark: #003259;
    --org-green: #0A8754;
    --org-pale: #E7F5FE;

    --org-focus: rgba(0, 94, 165, 0.4);
    --org-question-bg: #E7F5FE;
    --org-black: #000000;
    --org-white: #FFFFFF;
}


/* ==================================================
   2. TYPOGRAPHIES
   ================================================== */

body,
button,
input,
select,
textarea,
label,
p,
span,
div,
a,
.btn,
.form-control,
.form-select {
    font-family: Arial, Helvetica, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.question-title,
.group-title,
.survey-name {
    font-family: Georgia, "Times New Roman", serif;
    color: var(--org-blue);
}


/* ==================================================
   4. CONTENEURS DES QUESTIONS
   ================================================== */

.question-container,
.row.upload-files.mandatory.question-container,
.fruity_twentythree .question-container {
    background-color: var(--org-question-bg) !important;
    color: var(--org-blue-dark);
    border-radius: 5px;
    margin: 2% 0;
    padding: 15px;
}

/* Garder le fond du conteneur visible */
.question-container .ls-answers,
.question-container .answer-container {
    background-color: transparent;
}


/* ==================================================
   5. LIBELLÉS ET RÉPONSES
   ================================================== */

.ls-answers label,
.answer-item label,
.control-label,
.checkbox-item label,
.radio-item label {
    color: #6E748C);
    font-size :0.9em;
}

.ls-answers label:hover,
.answer-item label:hover,
.control-label:hover,
.checkbox-item label:hover,
.radio-item label:hover {
    color: var(--org-blue);
}


/* ==================================================
   6. LIENS
   ================================================== */

a,
a:visited {
    color: var(--org-blue);
}

a:hover,
a:focus {
    color: var(--org-blue-dark);
}

a:active {
    color: var(--org-blue);
}


/* ==================================================
   7. BOUTON PRINCIPAL
   ================================================== */

.btn-primary,
.btn-primary:visited {
    color: var(--org-white);
    background-color: var(--org-blue);
    border-color: var(--org-blue);
    box-shadow: none;
}

.btn-primary:hover {
    color: var(--org-blue-dark);
    background-color: var(--org-white);
    border-color: var(--org-blue-dark);
    box-shadow: 0 0 0 3px var(--org-focus);
}

.btn-primary:focus,
.btn-primary:focus-visible {
    color: var(--org-blue-dark);
    background-color: var(--org-white);
    border-color: var(--org-blue-dark);
    box-shadow: 0 0 0 3px var(--org-focus);
    outline: none;
}

.btn-primary:active,
.btn-primary:active:hover,
.btn-primary:active:focus,
.btn-primary.active,
.btn-primary.active:hover {
    color: var(--org-blue-dark);
    background-color: var(--org-blue-light);
    border-color: var(--org-blue-dark);
    box-shadow: 0 0 0 3px var(--org-focus);
}


/* ==================================================
   8. BOUTON OUTLINE SECONDARY
   ================================================== */

.btn-outline-secondary,
.btn-outline-secondary:visited {
    color: var(--org-blue);
    background-color: var(--org-white);
    border-color: var(--org-blue);
    box-shadow: none;
}

.btn-outline-secondary:hover {
    color: var(--org-white);
    background-color: var(--org-blue);
    border-color: var(--org-blue);
    box-shadow: 0 0 0 3px var(--org-focus);
}

.btn-outline-secondary:focus,
.btn-outline-secondary:focus-visible {
    color: var(--org-white);
    background-color: var(--org-blue);
    border-color: var(--org-blue);
    box-shadow: 0 0 0 3px var(--org-focus);
    outline: none;
}

.btn-outline-secondary:active,
.btn-outline-secondary:active:hover,
.btn-outline-secondary:active:focus,
.btn-outline-secondary.active,
.btn-outline-secondary.active:hover {
    color: var(--org-white);
    background-color: var(--org-blue-dark);
    border-color: var(--org-blue-dark);
    box-shadow: 0 0 0 3px var(--org-focus);
}


/* ==================================================
   9. AUTRES BOUTONS BOOTSTRAP
   ================================================== */

.btn-secondary,
.btn-default {
    color: var(--org-blue-dark);
    background-color: var(--org-pale);
    border-color: var(--org-blue-light);
    box-shadow: none;
}

.btn-secondary:hover,
.btn-default:hover {
    color: var(--org-white);
    background-color: var(--org-blue);
    border-color: var(--org-blue);
    box-shadow: 0 0 0 3px var(--org-focus);
}

.btn-secondary:focus,
.btn-secondary:focus-visible,
.btn-default:focus,
.btn-default:focus-visible {
    border-color: var(--org-blue-dark);
    box-shadow: 0 0 0 3px var(--org-focus);
    outline: none;
}

.btn-secondary:active,
.btn-default:active {
    color: var(--org-white);
    background-color: var(--org-blue-dark);
    border-color: var(--org-blue-dark);
}


/* ==================================================
   10. CHAMPS DE FORMULAIRE
   ================================================== */

.form-control,
.form-select,
select,
textarea,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="password"] {
    color: var(--org-blue-dark);
    background-color: var(--org-white);
    border-color: var(--org-blue-light);
}

.form-control:hover,
.form-select:hover,
select:hover,
textarea:hover {
    border-color: var(--org-blue);
}

.form-control:focus,
.form-select:focus,
select:focus,
textarea:focus,
input:focus {
    color: var(--org-blue-dark);
    background-color: var(--org-white);
    border-color: var(--org-blue);
    box-shadow: 0 0 0 3px var(--org-focus);
    outline: none;
}


/* ==================================================
   11. LISTES DÉROULANTES
   ================================================== */

.form-select,
select {
    color: var(--org-blue-dark);
    background-color: var(--org-blue-light);
}

.form-select:hover,
select:hover {
    border-color: var(--org-blue);
}

.form-select:focus,
select:focus {
    background-color: var(--org-blue-light);
    border-color: var(--org-blue);
    box-shadow: 0 0 0 3px var(--org-focus);
}


/* ==================================================
   12. BARRE DE PROGRESSION
   ================================================== */

.progress {
    background-color: var(--org-pale);
}

.progress-bar {
    background-color: var(--org-green) !important;
}


/* ==================================================
   13. CASES À COCHER
   Case bleue, coche blanche, texte noir
   ================================================== */

.checkbox-item label,{
    color: #6E748C);
    font-size :0.9em;
}

.checkbox-item label:hover, 
.checkbox-item input[type="checkbox"]:checked + label {
    color: var(--org-blue);
     border-color: var(--org-blue);
}

.checkbox-item input[type="checkbox"]:checked + label::before {
    background-color: var(--org-blue);
    border-color: var(--org-blue);
}

.checkbox-item input[type="checkbox"]:checked + label::after {
    background-color: transparent;
    border-color: var(--org-white);
    color: var(--org-white);
}


/* ==================================================
   14. BOUTONS RADIO
   Indicateur bleu, texte noir
   ================================================== */

.radio-item label {
    color: #6E748C;
    font-size :0.9em;
}
.radio-item label:hover, .radio-item input[type="radio"]:checked + label{
    color: var(--org-blue);
}

.radio-item input[type="radio"]:checked + label::before {
    border-color: var(--org-blue);
}

.radio-item input[type="radio"]:checked + label::after {
    background-color: var(--org-blue);
}


/* ==================================================
   15. BOUTON DU CALENDRIER
   Remplace le vert du thème par le bleu du logo
   ================================================== */

.fruity_twentythree .input-group-addon {
    color: var(--org-white);
    background-color: var(--org-blue);
    border-color: var(--org-blue);
}

.fruity_twentythree .input-group-addon.btn-primary,
.fruity_twentythree .input-group-addon.btn.btn-primary,
.input-group-addon.btn.btn-primary,
.input-group-addon.btn-primary,
.input-group .btn-primary {
    color: var(--org-white);
    background-color: var(--org-blue);
    border-color: var(--org-blue);
    box-shadow: none;
}

.fruity_twentythree .input-group-addon:hover,
.fruity_twentythree .input-group-addon.btn-primary:hover,
.input-group-addon.btn.btn-primary:hover,
.input-group-addon.btn-primary:hover,
.input-group .btn-primary:hover {
    color: var(--org-blue-dark);
    background-color: var(--org-white);
    border-color: var(--org-blue-dark);
    box-shadow: 0 0 0 3px var(--org-focus);
}

.fruity_twentythree .input-group-addon:focus,
.fruity_twentythree .input-group-addon:focus-visible,
.fruity_twentythree .input-group-addon:active,
.input-group-addon.btn-primary:focus,
.input-group-addon.btn-primary:active {
    color: var(--org-blue-dark);
    background-color: var(--org-white);
    border-color: var(--org-blue-dark);
    box-shadow: 0 0 0 3px var(--org-focus);
    outline: none;
}


/* ==================================================
   16. COMPTEUR / MESSAGE D'ERREUR
   ================================================== */

.em_num_answers.emtip.error {
    color: var(--org-blue-dark);
}


/* ==================================================
   17. AIDE ET MESSAGES INFORMATIFS
   ================================================== */

.text-muted,
.help-block {
    color: var(--org-blue-dark);
}

.alert-info {
    color: var(--org-blue-dark);
    background-color: var(--org-pale);
    border-color: var(--org-blue-light);
}


/* ==================================================
   18. SÉLECTION DE TEXTE
   ================================================== */

::selection {
    color: var(--org-blue-dark);
    background-color: var(--org-blue-light);
}

/* Disposition des deux questions de date uniquement */
@media (min-width: 750px) {
  .group-container.space-col {
    display: flow-root;
  }

  .group-container.space-col .col1-question {
    float: left !important;
    width: calc(50% - 12px) !important;
    margin: 0 24px 2% 0 !important;
    box-sizing: border-box;
  }

  .group-container.space-col .col2-question {
    float: left !important;
    width: calc(50% - 12px) !important;
    margin: 0 0 2% 0 !important;
    box-sizing: border-box;
  }
}

/* Sur mobile */
@media (max-width: 749px) {
  .group-container.space-col .col1-question,
  .group-container.space-col .col2-question {
    float: none !important;
    width: 100% !important;
    margin: 2% 0 !important;
  }
}

.quotamessage {
    font-size: 1em;
    font-weight: normal;
    text-align: left;
    background-color: var(--org-question-bg);
    padding: 20px;
    border-radius: 6px;
    margin: 20px auto;
}

#welcome-container {
  max-width: 100%;
  width: 100%;
}
.privacy .checkbox-item label::before {
  border: 3px solid var(--org-blue);
}

.survey-name,
.survey-description,
.survey-welcome,
.number-of-questions,
.privacy {
    margin: 2% 0
}

.btn.btn-primary.mb-3.answer-item.ls-button-label:hover,
.btn.btn-primary.mb-3.answer-item.ls-button-label.active {
    background-color: var(--org-blue);
    border-color: var(--org-blue);
}