/* 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;
    font-family: 'Plus Jakarta Sans',Helvetica,Arial,Lucida,sans-serif;
}

form .mauticform-row {
    font-size: 16px;
    font-family: default;
    margin: 0 auto;
    padding: 10px;
    /* 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: 8px;
    transition: all 150ms ease-in;
    font: inherit;
    margin: 0;
    box-sizing: border-box;
    font-weight: 300!important;
}

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

/* Champs de type fichier */
form .mauticform-row input.mauticform-input[type=file]{
    height: auto;
    font-weight: 300;
}
form .mauticform-row input.mauticform-input[type=file]::-webkit-file-upload-button{
    background-color: #c2461b;
    transition: opacity 0.4s ease-in-out, background-color 0.4s ease-in-out;
    color: #FFF;
    border: none;
    padding: 5px 15px;
    margin-right: 15px;
    border-radius: 99px;
    cursor: pointer;
}

form .mauticform-row input.mauticform-input[type=file]::-webkit-file-upload-button:hover{
background-color: #8E2517;
}

/* 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: 0px;
    /*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: #FF8300;
    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.25em solid #000000;
    border-radius: 30px;
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
    background: #FFFFFF;
    box-shadow: 2px 2px 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);
}

form .mauticform-row[data-validate="rgpd_consent"] label {
    font-size: 14px;
    color: #4e4e4e;
}

/****** 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: #f48b2e;
}

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

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 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.mauticform-button-wrapper {
    text-align: left;
}

/* Bouton "envoyer" changer l'apparence */
form .mauticform-row button.mauticform-button {
    padding: 8px 15px;
    white-space: normal;
    margin-bottom: 5px;
    margin-top: 8px;
    background: #c2461b;
    border: 1px solid transparent;
    color: #ffffff!important;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 20px;
    border: 0px transparent solid;
    transition: all 150ms ease-in;
    font-family: 'Plus Jakarta Sans',Helvetica,Arial,Lucida,sans-serif;
    font-size: 16px;
    font-weight: 500!important;

}

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

form .mauticform-row button.mauticform-button:hover {
    background-color: #8E2517;
}


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

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

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-75 {
    width: 75%;
    float: left;
}

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

form .mauticform-row.mauticform-radiogrp.oaka-col-50 {
    width: 50%;
    float: left;
    display: flex;
    justify-content: center;
}

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

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

form .mauticform-row.oaka-col-20 {
    width: 20%;
    float: left;
}
form .mauticform-row.oaka-col-25 {
    width: 25%;
    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 OAKA.ALSACE */

form #mauticform_formulairededemandecontact_consenttext,
form #mauticform_formulairepackphotographe_consenttext,
form #mauticform_formulairepacklancementweb_consenttext,
form #mauticform_formulairelocalwifi_consent_text,
form #mauticform_formulaireapprentissageweb_consent_text,
form #mauticform_formulaireticketingoaka_consenttext,
form #mauticform_formulairedecandidaturespontanee_consenttext,
form #mauticform_impactwebcreationfichecontact_consenttext {
    padding-bottom: 0px;
}

form #mauticform_input_formulairedecontact_consenttext span p,
form #mauticform_formulairepackphotographe_consenttext span p,
form #mauticform_formulairepacklancementweb_consenttext span p,
form #mauticform_formulairebonsplans_consenttext span p,
form #mauticform_input_formulairelocalwifi_consent_text span p,
form #mauticform_input_formulaireapprentissageweb_consent_text span p,
form #mauticform_formulaireticketingoaka_consenttext span p,
form #mauticform_input_formulairedecandidaturespontanee_consenttext span p, 
form #mauticform_input_impactwebcreationfichecontact_consenttext span p {
    margin-bottom: 20px;
    margin-top: 10px;
    padding: 10px !important;
    padding-left: 15px !important;
    background-color: #fff;
    border-left: #FF8300 2px solid;
    color: #333333;
    font-size: 14px;
    font-weight: 300;
}

form #mauticform_formulaireticketingoaka_consenttext span p a {
    color: #c2461b;
}

form #mauticform_formulairedecontact_message {
    padding: 10px 0px 0px 0px!important;
}

.mauticform_wrapper.mauticform-post-success {
    padding: 20px 0px 20px 0px!important;
    font-size: 16px!important;
    text-align: center;
}

form #mauticform_formulairedecontact_provenance,
form #mauticform_formulairepackphotographe_provenance,
form #mauticform_formulairepackrestaurateur_provenance,
form #mauticform_formulairepacklancementweb_provenance,
form #mauticform_formulairebonsplans_provenance,
form #mauticform_input_formulairelocalwifi_provenance1,
form #mauticform_formulairedecandidaturespontanee_provenance1,
form #mauticform_formulaireapprentissageweb_provenance {
    display: none;
}

form #mauticform_formulairepackphotographe_interets,
form #mauticform_formulairepackrestaurateur_interets,
form #mauticform_formulairepacklancementweb_interets {
    display: none;
}