/* Hook CSS pour les formulaires Mautic */

html{
    scroll-behavior: smooth;
}

.mauticform_wrapper {
    max-width:none!important ;
    margin: 0px!important;
}

form {
    width: 100%;
    /*background-color: #FCBC19;
    border: 4px solid #000000 ;*/
    border-radius: 10px;
    padding: 0px;
}

form .mauticform-row {
    font-size: 16px;
    font-family: default;
    margin: 0 auto;
    padding: 10px 8px 10px 0px;
    overflow: hidden;
}

form .mauticform-row.hidden {
    display: none;
}

@media screen and (max-width: 768px) {
    form .mauticform-row {
        width: 100%!important;
    }
}

/* Style de tout les blocs (input, textarea et select) + la position de leur potentiels pictogrammes */

form .mauticform-row input.mauticform-input,
form .mauticform-row textarea.mauticform-textarea,
form .mauticform-row select.mauticform-selectbox {
    display: block;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: 34px;
    padding: 6px 12px;
    padding-right: 8px!important;
    line-height: 1.42857143;
    color: #333333;
    border: 1px solid #ccc;
    border-radius: 10px;
    transition: all 150ms ease-in;
    font: inherit;
    margin: 0;
    box-sizing: border-box;
    /*box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
    background-image: none;
    background-size: 17px;
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: center;
    background-origin: content-box; */
}

/************************************* Gestion de champs spécifiques ****************************************/

/* Champs de type fichier */
form .mauticform-row input.mauticform-input[type=file]{
    height: auto;
}

/* Champs de type checkbox */
.mauticform-checkboxgrp-row {
    display: flex;
    /*align-items: center;*/
    margin-top: 5px;
}

form .mauticform-row.mauticform-checkboxgrp label.mauticform-label{
    display: inherit;
    font-weight: 600;
    color: #000000;
}

form .mauticform-row input[type=checkbox]{
    -webkit-appearance: none;
    margin-right: 10px;
    margin-top: 6px;
    /*margin-left: 20px;*/
    width: 14px;
    height: 14px;
    padding: 0px;
    /*background: #FFFFFF;*/
    border: 1px solid #666;
    border-radius: 3px;
    /*box-shadow: 2px 2px 0px 0px #000000;*/
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
    cursor: pointer;
}

form .mauticform-row input[type="checkbox"]::before {
    content: "";
    width: 14px;
    height: 14px;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    background-color: #e03076;
    transform-origin: bottom left;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

form .mauticform-row input[type="checkbox"]:checked::before {
    transform: scale(1);
}

/* Champs de type bouton radio */

form .mauticform-row .mauticform-radiogrp-row {
    display: flex;
    align-items: center;
    margin-top: 5px;
}

form .mauticform-row.mauticform-radiogrp label.mauticform-label{
    display: inherit;
    font-weight: 600;
    color: #000000;
}

form .mauticform-row input[type=radio]{
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 0.15em solid #000000;
    border-radius: 30px;
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
    background: #FFFFFF;
    box-shadow: 1px 1px 0px 0px #000000;
    cursor: pointer;
    margin-right: 10px;
    margin-left: 20px;
}

form .mauticform-row input[type="radio"]::before {
    content: "";
    width: 10px;
    height: 10px;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    background-color: #000000;
    transform-origin: bottom left;
    clip-path: circle(50% at 50% 50%);
}

form .mauticform-row input[type="radio"]:checked::before {
    transform: scale(1);
}

/****** Gestion des icones des champs : oaka-icon-xx à mettre dans Mautic input (Attributs d'entée, ex: class="oaka-icon-xxxx") ********/

form .mauticform-row input.mauticform-input.oaka-icon-email{
    background-image: url("img-icons/email.svg");   
}
form .mauticform-row input.mauticform-input.oaka-icon-folder{
    background-image: url("img-icons/folder-open.svg");
}
form .mauticform-row input.mauticform-input.oaka-icon-url{
    background-image: url("img-icons/url.svg");
}
form .mauticform-row input.mauticform-input.oaka-icon-tel{
    background-size: 14px;
    background-image: url("img-icons/tel.svg");
}
form .mauticform-row input.mauticform-input.oaka-icon-address{
    background-size: 14px;
    background-image: url("img-icons/address.svg");
}
form .mauticform-row input.mauticform-input.oaka-icon-city{
    background-size: 19px;
    background-image: url("img-icons/city.svg");
}
form .mauticform-row input.mauticform-input.oaka-icon-timbre{
    background-image: url("img-icons/timbre.png");
}


/********************************** Effets de hover, focus, etc..., sur les champs ***********************/

form .mauticform-row input.mauticform-input:focus,
form .mauticform-row textarea.mauticform-textarea:focus,
form .mauticform-row select.mauticform-input:focus {
    padding-left: 15px;
}

form .mauticform-row input.mauticform-input:focus-visible,
form .mauticform-row textarea.mauticform-textarea:focus-visible,
form .mauticform-row select.mauticform-input:focus-visible {
    outline-color: #e93073;
}

form .mauticform-row input.mauticform-input:hover,
form .mauticform-row textarea.mauticform-textarea:hover,
form .mauticform-row select.mauticform-input:hover {
    border : 1px solid #e93073;
}

form .mauticform-row textarea.mauticform-textarea {
    height: 68px;
}

form .mauticform-row textarea.mauticform-textarea:focus {
    height: 150px;
}

form .mauticform-row span.mauticform-helpmessage {
    display: flex;
    font-size: 0.8em;
    font-weight: 500;
    background-image: url("img-icons/interrogation.png");
    background-size: 17px;
    background-position-x: left;
    background-position-y: center;
    background-repeat: no-repeat;
    padding-left: 20px;
    align-items: center;
    color: #716767;
}

form .mauticform-row.mauticform-date span.mauticform-helpmessage {
    background-image: unset;
    padding-left: 2px;
}

form .mauticform-row label.mauticform-label {
    display: none;
}

form .mauticform-row label.mauticform-label span {
    font-size: 14px;
    color: #ffffff !important;
    font-family: 'Open Sans',Arial,sans-serif;
}

/* Message d'erreur lors d'un champ requis non-rempli */
form .mauticform-row .jsonform-errortext {
    margin-top: 5px;
    display: block;
    color: red;
}

form .mauticform-row .mauticform-errormsg {
    display: block;
    color: red;
    margin-top: 2px;
}

form .mauticform-row .control-label {
    margin-bottom: 5px;
    display: block;
    font-weight: bold;
    font-family: 'Open Sans',Arial,sans-serif ;
    font-size: 14px;
    color: #ffffff;
}

/* Couleur de l'astérisque */

form .mauticform-row .control-label span {
    color:#e93073!important;
}

/* Bouton "envoyer" Disposition */
form .mauticform-row input[type=submit] {
    text-align: right;
}

/* Bouton "envoyer" changer l'apparence */
form .mauticform-row button.mauticform-button {
    /*float: right;*/
    width: 100%;
    padding: 8px 14px 10px;
    white-space: normal;
    margin-top: 8px;
    background: #e93073!important;
    border: 1px solid transparent;
    /*border-radius: 10px;*/
    color: #ffffff!important;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    transition: all 150ms ease-in;
    text-transform: uppercase;
    /*letter-spacing: 2px;*/
    font-size: 14px;
    font-weight: 700!important;
    padding-top: 6px!important;
    padding-right: 15px!important;
    padding-bottom: 6px!important;
    padding-left: 15px!important;
    /* box-shadow: 0px 14px 30px -10px rgb(22 41 68 / 40%); */
    font-size: 16px;
    font-weight: bold!important;
    text-transform: uppercase!important;

}

@media screen and (max-width: 768px) {
    form .mauticform-row button.mauticform-button {
        width: 100%;
    }
}

form .mauticform-row button.mauticform-button:hover {
    /*padding-right: 25px!important;
    padding-left: 25px!important; */
    background: #293c4b!important;
    cursor: pointer;
}


/* Gestion du multicolonnes : oaka-col-xx à mettre dans Mautic wrapper (Attributs de conteneur de champs, ex: class="oaka-col-xx")*/

form .mauticform-row.mauticform-row.oaka-col-100 {
    width: 100%;
}

form .mauticform-row.oaka-col-80 {
    width: 80%;
    float: left;
}

form .mauticform-row.oaka-col-70 {
    width: 70%;
    float: left;
}

form .mauticform-row.oaka-col-50 {
    width: 50%;
    float: left;
}

form .mauticform-row.oaka-col-40 {
    width: 40%;
    float: left;
}

form .mauticform-row.oaka-col-33 {
    width: calc(100% / 3);
    float: left;
}

form .mauticform-row.oaka-col-20 {
    width: 20%;
    float: left;
}

form .mauticform-row.oaka-col-10 {
    width: 10%;
    float: left;
}

/* Affichage du formulaire après soumission de ce dernier */

.mauticform_wrapper.mauticform-post-success .mauticform-innerform {
    /* visibility: hidden;
    opacity: 0;
    transition: visibility 0s 1s, opacity 1s linear; */
    display: none;
}




/* CSS SPECIFIQUE A IMEDICA */

form .mauticform-row #mauticform_formulairedragonmedical_rgpd_consent,
form .mauticform-row #mauticform_formulaireprerequismedistory4_rgpd_consent,
form .mauticform-row #mauticform_formulairesesamvitale_rgpd_consent,
form .mauticform-row #mauticform_formulaireabonnementms4step1_rgpd_consent,
form .mauticform-row #mauticform_formulairedivomedstep1_rgpd_consent,
form .mauticform-row #mauticform_formulaireticketing_rgpd_consent,
form .mauticform-row #mauticform_formulairestellair_rgpd_consent,
form .mauticform-row #mauticform_formulaireimprimante_rgpd_consent,
form .mauticform-row #mauticform_formulairedoctolib_rgpd_consent {
    padding-top: 0px;
    font-size: 14px;
}
/****************************************************************************************************/
/* A TERME A REMPLACER PAR UNE CLASSE GENERIQUE DANS LE MAUTIC MEME LORS DE LEDITION DUN FORMULAIRE */
form #mauticform_formulairedragonmedical_consenttext,
form #mauticform_formulaireprerequismedistory4_consenttext,
form #mauticform_materielapple_consenttext,
form #mauticform_formulaireobjetsmedicauxconnectes_consenttext,
form #mauticform_formulairesimulateurdefinancement_consent_text,
form #mauticform_formulairededemandededemo_consenttext,
form #mauticform_formulaireformationmedistory4_consent_text,
form #mauticform_formulairesesamvitale_consenttext,
form #mauticform_formulaireabonnementms4step1_consent_text, 
form #mauticform_formulairedivomedstep1_consent_text,
form #mauticform_mauticform_formulaireticketing_consenttext,
form #mauticform_mauticform_formulairestellair_consent_text,
form #mauticform_formulaireimprimante_consenttext, 
form #mauticform_formulairedoctolib_consenttext {
    padding-bottom: 0px;
}

form #mauticform_input_formulairedragonmedical_consenttext span p,
form #mauticform_input_formulaireprerequismedistory4_consenttext span p,
form #mauticform_input_formulairedecontact_consenttext span p,
form #mauticform_input_materielapple_consenttext span p,
form #mauticform_input_formulaireobjetsmedicauxconnectes_consenttext span p,
form #mauticform_input_formulairesimulateurdefinancement_consent_text span p,
form #mauticform_input_formulairededemandededemo_consenttext span p,
form #mauticform_input_formulaireformationmedistory4_consent_text span p,
form #mauticform_input_formulairesesamvitale_consenttext span p,
form #mauticform_input_formulaireabonnementms4step1_consent_text span p,
form #mauticform_input_formulairedivomedstep1_consent_text span p,
form #mauticform_input_formulaireticketing_consenttext span p,
form #mauticform_input_formulairestellair_consent_text span p, 
form #mauticform_input_formulaireimprimante_consenttext span p, 
form #mauticform_input_formulairedoctolib_consenttext span p {
    margin-top: 10px;
    padding: 10px !important;
    padding-left: 15px !important;
    background-color: #fbfbfb;
    border-left: #afafaf 2px solid;
    color: #afafaf;
    font-size: 14px;
    font-family: 'Jura',Helvetica,Arial,Lucida,sans-serif;
}

#mauticform_input_formulairesesamvitale_interet,
#mauticform_formulaireabonnementms4step1_interet,
#mauticform_formulaireabonnementms4step1_provenance1,
#mauticform_formulaireabonnementms4step1_mensualite,
#mauticform_formulaireabonnementms4step2_interets,
#mauticform_formulaireabonnementms4step2_nombre_dappareils,
#mauticform_formulaireabonnementms4step2_nombre_de_situations,
#mauticform_formulaireabonnementms4step2_mensualite,
#mauticform_formulaireabonnementms4step1_frais_prokov,
#mauticform_formulaireabonnementms4step2_nombre_de_praticiens,
#mauticform_formulaireabonnementms4step2_nombre_demployes,
#mauticform_formulairedivomedstep1_interet,
#mauticform_formulairedivomedstep1_provenance1,
#mauticform_formulairedivomedstep1_frais_imedica1,
#mauticform_formulairedivomedstep1_cout_divomed {
    display: none;
}


/*******************************************************/
/****** SECTION DES LABEL/INPUT SUR LA MEME LIGNE ******/
/*******************************************************/
#mauticform_formulaireabonnementms4step1_nombre_de_situations,
#mauticform_formulaireabonnementms4step1_nombre_dappareils,
#mauticform_formulaireabonnementms4step1_nombre_de_praticiens,
#mauticform_formulaireabonnementms4step1_nombre_demployes,
#mauticform_formulairedivomedstep1_nombre_de_praticiens,
#mauticform_formulairedivomedstep1_nb_agenda,
#mauticform_formulaireimprimante_nb_pages_imprimes_par_jou,
#mauticform_formulaireimprimante_nombre_dimprimantes {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    align-items: center;
    justify-content: left;
}

#mauticform_formulaireabonnementms4step1_nombre_de_situations input,
#mauticform_formulaireabonnementms4step1_nombre_dappareils input,
#mauticform_formulaireabonnementms4step1_nombre_de_praticiens input,
#mauticform_formulaireabonnementms4step1_nombre_demployes input,
#mauticform_formulairedivomedstep1_nombre_de_praticiens input,
#mauticform_formulairedivomedstep1_nb_agenda input,
#mauticform_formulaireimprimante_nb_pages_imprimes_par_jou input,
#mauticform_formulaireimprimante_nombre_dimprimantes input {
    float: left;
    min-width: 30%;
    max-width: 30%;
}

#mauticform_label_formulaireabonnementms4step1_nombre_dappareils,
#mauticform_label_formulaireabonnementms4step1_nombre_de_situations,
#mauticform_label_formulaireabonnementms4step1_nombre_de_praticiens,
#mauticform_label_formulaireabonnementms4step1_nombre_demployes,
#mauticform_label_formulairedivomedstep1_nombre_de_praticiens,
#mauticform_label_formulairedivomedstep1_nb_agenda,
#mauticform_label_formulaireimprimante_nb_pages_imprimes_par_jou,
#mauticform_label_formulaireimprimante_nombre_dimprimantes {
    display: inherit;
    width: 70%!important;
    float: right;
    width: -webkit-fill-available;
    margin-bottom: 0px;
    padding-left: 10px;
    font-size: 14px;
}

#mauticform_formulaireimprimante_nb_pages_imprimes_par_jou span.mauticform-errormsg {
    
}

/* Message de remerciement/redirection quand le formulaire Mautic est soumis */

#mauticform_wrapper_formulaireabonnementms4step1.mauticform-post-success {
    margin-top: 27vh!important;
}

#mauticform_formulaireabonnementms4step1 .mauticform-message {
    color: #e93073;
    font-size: 24px;
    text-align: center;
}

#mauticform_formulaireabonnementms4step2 .mauticform-message {
    font-size: 24px;
    text-align: center;
}