/* Hook CSS pour les formulaires Mautic */

.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;
    overflow: hidden;
}

@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: 4px;
    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-left: 20px;
    width: 20px;
    height: 20px;
    padding: 5px;
    background: #FFFFFF;
    border: 0.25em solid #000000;
    border-radius: 6px;
    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: 10px;
    height: 10px;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    background-color: #000000;
    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);
}

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

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

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:#fcbc19!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;
    padding: 8px 14px 10px;
    white-space: normal;
    margin-top: 8px;
    background: #ffffff!important;
    border: 1px solid transparent;
    color: #ffffff;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    transition: all 150ms ease-in;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'Open Sans',Arial,sans-serif!important;
    font-size: 14px;
    font-weight: 700!important;
    padding-top: 10px!important;
    padding-right: 20px!important;
    padding-bottom: 10px!important;
    padding-left: 20px!important;
    /* box-shadow: 0px 14px 30px -10px rgb(22 41 68 / 40%); */
    color: #000000!important;
    border-width: 4px!important;
    border-color: #000000;
    border-radius: 10px;
    font-size: 16px;
    font-family: 'Archivo',Helvetica,Arial,Lucida,sans-serif!important;
    font-weight: 800!important;
    text-transform: uppercase!important;
    background-color: #FFFFFF;
    box-shadow: 6px 6px 0px 0px #000000;

}

@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: #fcbc19!important;
    cursor: pointer;
}

form span.plz-consent p {
    margin-bottom: 20px;
    margin-top: 10px;
    padding: 10px !important;
    padding-left: 15px !important;
    background-color: #f2f2f2;
    border-left: #fcbc19 2px solid;
    color: #333333;
    font-size: 14px;
    font-family: 'Open Sans',Arial,sans-serif;
}


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

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

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