/*///////////////////////////////
        Balises Générales
///////////////////////////////*/
h2 {
    text-align: center;
    font-size: 26pt;
}

h3 {
    margin: 0;
}

h4 {
    margin-bottom: 16pt;
}

p,
label,
input,
select,
textarea {
    font-size: 14pt;
    font-family: "Amaranth", sans-serif;
}

p {
    margin: 0;
}

input {
    flex-shrink: 0;
}

/*///////////////////////////////
            Formulaire
///////////////////////////////*/
form {
    width: 95%;
    margin: 30px auto 70px auto;
    border: solid #0096c7 5px;
    border-radius: 20px;
    overflow: hidden;
}

label,
input,
select,
textarea {
    display: inline-block;
}

input[type="submit"]:hover,
input[type="button"]:hover,
select:hover {
    cursor: pointer;
}

/*///////////////////////////////
        Annonce clignotante
///////////////////////////////*/
.annonce-form {
    text-align: center;
}

/*///////////////////////////////
    Questions du formulaire
///////////////////////////////*/
.questionnaire {
    width: 100%;
}

.questionnaire:not(:last-child) {
    border-bottom: solid #404040 3px;
}

.questionnaire:nth-child(2n) {
    background-color: #f4f4f4;
}

.questionnaire:nth-child(2n + 1) {
    background-color: white;
}

.questionnaire > *:first-child {
    padding-top: 14px;
}

.questionnaire > div:not(:first-child) input[type="checkbox"] {
    width: 19px;
    height: 19px;
    margin: 0px 10px;
}

@media screen and (max-width: 800px) {
    .questionnaire > div:not(:first-child) input[type="checkbox"] {
        margin: 0px 5px;
    }
}

/*////////////////////////////////////////////////////
    Informations supplémentaires sur une question
////////////////////////////////////////////////////*/
.description {
    padding-top: 8px;
}

.description p:not(:first-child) {
    padding-top: 5px;
}

/* Concernant les questions en général */
.questionnaire > .description {
    padding-left: 38px;
    padding-right: 38px;
    margin-bottom: 15px;
}

/* Concernant la question sur si un donateur est un artisan ou un commerçant
    sur l'habillement et le matériel de survie,
    sur les kits hygiéniques et paramédical,
    sur les équipements pour les bénévoles
    et sur la livraison des dons */
.arti-comm > .cacher > .description,
.habit-materiel > .cacher > .description,
.hygien-medi > .cacher > .description,
.equipement > .cacher > .description,
.livraison > .cacher > .description,
.envoyer > .description {
    padding-left: 75px;
    padding-right: 75px;
    margin-bottom: 10px;
}

@media screen and (max-width: 800px) {
    .questionnaire > .description {
        padding-left: 15px;
        padding-right: 15px;
    }

    .arti-comm > .cacher > .description,
    .habit-materiel > .cacher > .description,
    .hygien-medi > .cacher > .description,
    .equipement > .cacher > .description,
    .livraison > .cacher > .description,
    .envoyer > .description {
        padding-left: 50px;
        padding-right: 50px;
    }
}

/*///////////////////////////////
    Case principale à cocher
///////////////////////////////*/
.questionnaire > .selection {
    display: inline-flex;
    align-items: center;
    margin-bottom: 14px;
}

.selection > input {
    width: 30px;
    height: 30px;
    margin: 0px 38px;
}

@media screen and (max-width: 800px) {
    .selection > input {
        margin: 0px 6px;
    }
}

/*////////////////////////////////////////////////////////////
    Titre des questions s'il n'y a pas de case à cocher
////////////////////////////////////////////////////////////*/
.titre {
    text-indent: 38px;
    padding-bottom: 14px;
}

@media screen and (max-width: 800px) {
    .titre {
        text-indent: 8px;
    }
}

/*///////////////////////////////
        Cacher des éléments
///////////////////////////////*/
.cacher {
    display: none;
}

/*///////////////////////////////
       Centrer un élément
///////////////////////////////*/
.centre {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 15px;
}

/*///////////////////////////////
    Formulaire de contact
///////////////////////////////*/
.infos-perso {
    width: 30%;
}

.infos-perso input:not(:last-child) {
    margin-bottom: 5px;
}

.infos-perso input[type="checkbox"] {
    margin-left: 0 !important;
}

.infos-perso label,
input[type="submit"],
.g-recaptcha {
    margin-top: 10px;
}

.infos-perso input[type="submit"] {
    padding: 5px 0;
}

.g-recaptcha > div {
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 1100px) {
    .infos-perso {
        width: 300px;
    }
}

/*/////////////////////////////////////////////////////////////
    Avoir plusieurs blocs de même taille dans un élément
/////////////////////////////////////////////////////////////*/
.divise {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 15px;
}

.divise .bloc {
    flex: 1 1 0;
}

.divise .bloc label {
    padding-left: 110px;
    padding-right: 38px;
}

.divise .bloc label:not(:last-child) {
    margin-bottom: 10px;
}

@media screen and (max-width: 800px) {
    .divise {
        flex-direction: column;
    }

    .divise .bloc:not(:last-child) {
        margin-bottom: 10px;
    }

    .divise .bloc label {
        padding-left: 75px;
    }
}

/*///////////////////////////////
    Artisan -> Disponibilités
///////////////////////////////*/
.dispo-flex {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 10px;
}

.dispo-flex select {
    font-size: 12pt;
}

.dispo-flex h4 {
    text-align: center;
    margin: 0;
    margin-bottom: 20px;
    font-size: 14pt;
}

.dispo-flex > div {
    width: 50%;
}

.dispo-semaine > div,
.dispo-weekend > div {
    display: inline-flex;
    align-items: center;
    margin-bottom: 10px;
}

.jour {
    display: inline-block;
    width: 110px;
    text-align: right;
    margin-right: 10px;
}

@media screen and (max-width: 900px) {
    .dispo-flex {
        flex-direction: column;
    }

    .dispo-flex > div {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .dispo-flex > div:not(:first-child) {
        margin-top: 10px;
    }

    .dispo-semaine > div,
    .dispo-weekend > div {
        flex-wrap: wrap;
        justify-content: flex-end;
        margin-right: 5px;
    }
}

/*////////////////////////////////////////////////
    Question Kits hygiéniques et paramédical
////////////////////////////////////////////////*/
.hygien-medi > .cacher .divise .bloc:not(:last-child) {
    height: max-content;
    border-right: solid #404040 2px;
    padding-right: 5px;
}

@media screen and (max-width: 800px) {
    .hygien-medi > .cacher .divise .bloc:not(:last-child) {
        border: none;
    }
}

/*///////////////////////////////
    Coordonnées personnelles
///////////////////////////////*/
.images {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 10px;
}

.images > div {
    display: flex;
    justify-content: center;
    align-items: center;

    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5px;
}

.images > div > *:not(:last-child) {
    margin-right: 5px;
}

.images > div > .charger-image {
    display: none;
}

.charger-image-trigger {
    width: 195px;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;

    background-color: #0096c7;
    color: white;
    border: solid #0096c7 3px;
    padding: 5px 5px;
}

.charger-image-trigger:hover {
    background-color: white;
    color: #0096c7;
    cursor: pointer;
}

.images .action {
    background-color: #0096c7;
    color: white;
    border: solid #0096c7 3px;
    border-radius: 50%;
    padding: 4px 7px;
}

.images .action:hover {
    background-color: white;
    color: #0096c7;
    cursor: pointer;
}

/*//////////////////////////
        Autocomplete
//////////////////////////*/
.ui-autocomplete {
    font-size: 14pt !important;
    list-style: none !important;
}

.ui-menu {
    width: max-content;
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
    outline: none;
}

.ui-menu .ui-menu {
    position: absolute;
}

.ui-menu .ui-menu-item {
    position: relative;
    margin: 0;
    padding: 3px 1em 3px 0.4em;
    cursor: pointer;
    min-height: 0;
}