/*******************************************************************************************************************/
/*//////////////////////////                         INSCRIPTION                      /////////////////////////////*/
/*******************************************************************************************************************/
#formProfil{
    z-index: 200;
    /* COULEUR BACKGROUND IN FRONT */
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 1%;
    box-shadow: 1px 1px 12px #555;

    /*
    box-shadow: #3b3f48 0.1em 0.1em 0.2em;
    */
    border-radius: 20px;

    border-width : 3px;
    border-style: solid;
    /* COULEUR BORDER IN FRONT */
    /*grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 2;*/

    max-width : 500px;
    min-width : 50%;
    width : 92%;
    margin-left : auto;
    margin-right : auto;

    /*position: relative;*/
    position : absolute;
    top : 50%; left : 50%;
    transform : translate(-50%, -50%);
}

#div_checkbox_qr_code{
    display : grid;
    grid-template-columns: 50% 50%;
}
#input_ou_checkbox{
    grid-column: 2;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
/** RAJOUT POUR NOUVEAU BOUTON **/
.bouton_animation{
    font-size : 1.1em;
    padding : 5px;
    border-width : 0;
    border-radius: 25px;
}
/* RAJOUT CHAMPS PERSO */
[id^=client] div, #div_accepte_reglement{
    width: 96%;
   /* margin-bottom: 5px;*/
    display: grid;
    grid-template-columns: 25% 11% 1fr 5%;
}
#div_accepte_reglement input{
    grid-column: 1 / 2;
}
#div_accepte_reglement div{
    grid-column: 2 / 5;
}
#div_accepte_reglement{
    margin-top : 10px;
}
[id^=client] div label{
    margin : 1%;
}

/*** SPÉCIALE AJOUT LABEL PERSONNALISÉ  ***/
#client_special_checkbox div{
    width : 96%;
    display: grid;
   /* grid-template-columns: 1fr 5%;    */
    grid-template-columns: 25% 11% 1fr 5%;
}
.classLabelRajoutCheckbox{
    grid-column: 1 / 2;
    display: block;
    line-height: 150%;
}
.classInputRajoutCheckBox{
    grid-column: 2 / 3;
}
[id^=client] div select{
    /*grid-column: 3 span ;*/
    grid-column: 2 / 5;
}
[id^=client] input, [id^=client] select{
    max-height: 32px;
}
[id^=client] input[type=text], [id^=client] input[type=select], [id^=client] input[type=number]{
    /*border-radius: 5px;*/
    /*border-style: solid;*/
    /*border-color: #3b3f48;*/
    /*box-shadow: 1px 1px 12px #555;*/
}

/*** SPÉCIALE SHOPPING REMBOURSE ***/
.labelMontantTicket{
    grid-column: 1 / 3;
}
.classLabelRajout{
    grid-column: 1 / 2;
    grid-row:  1 /2 ;
}
#clients_slot_machine_montant_ticket{
    grid-column: 3 / 5;
    text-align: center;
}
.classInputRajout, #formProfil input[type=text],#formProfil input[type=email], .choice{
    /*border-radius: 5px;*/
    /*border-style: solid;*/
    /*border-color: #3b3f48;*/
    /*border-width: 2px;*/
    /*box-shadow: 1px 1px 12px #555;*/
    grid-column: 2 / 5;
}
#client div input{
    grid-row: 1 / 2;
    max-height: 32px;
}

[type="checkbox"] {
    vertical-align:middle;
    margin-left: 0;
    margin-top: 5px;
    grid-column: 4 / 5;
}
.labelCheckbox{
    padding-top: 0.5%;
    grid-column: 1 / 4;
}

#formProfil>h2{
    text-align: center;
    margin-bottom: 5%;
    margin-top: 5%;
    grid-column : span 2;
}

#divBtnProfil{
    grid-column : span 2;
    margin-top: 2%;
    margin-bottom: 2%;
    display: grid;
    grid-template-columns: 1fr 1% 1fr;
}
#divBtnProfil2{
    grid-column : span 2;
    margin-top: 2%;
    display: grid;
    grid-template-columns: 1fr 5% 40% 5% 1fr;
}
#submitJouer{
    grid-column: 2 / 5;
    line-height: 1em ;
    margin-bottom: 2%;
}
#submitJouer2{
    grid-column: 3 / 4;
    margin-bottom: 2%;
}
/*
#submitJouer{
    border-radius: 15px;
    grid-column: 2 / 5;
    line-height: 1em ;
    margin-bottom: 1%;
}
#submitJouer2{
    border-radius: 15px;
    font-size : 0.6em;
    grid-column: 3 / 4;
    margin-bottom: 2%;
}
.spanBoutonRgpd{
    font-size : 0.7em;
}*/
/*#submit, #reset{
    !* COULEURS DANS LE FRONT *!
    border-radius: 5px;
}*/
#submit{
    grid-column: 1 / 2;
}
#reset{
    grid-column: 3/ 4;
}

/* ***************   Toggle Button   ****************** */
.cm-toggle {
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    border: 0;
    outline: 0;
    cursor: pointer;
}
/* To create surface of toggle button */
.cm-toggle:after {
    content: '';
    width: 54px;
    height: 25px;
    display: inline-block;
    background: rgba(196, 195, 195, 0.55);
    border-radius: 18px;
    clear: both;
}
/* Contents before checkbox to create toggle handle */
.cm-toggle:before {
    content: '';
    width: 29px;
    height: 29px;
    display: block;
    position: absolute;
    left: 0;
    top: -3px;
    border-radius: 50%;
}
/* Shift the handle to left on check event */
.cm-toggle:checked:before {
    left: 29px;
}

/* MESSAGE ERREUR FORMULAIRES */
#idMessageErreurCreFormulaire{
    text-align: center;
}

/*** CODE CARTE FIDÉLITÉ  ***/
#carte_fidelite div{
    display : grid;
    width: 96%;
    grid-template-columns: 60% 40%;
    margin-bottom: 1%;
}

/** RAJOUT LOGO DANS TITRE FORMULAIRE **/
#div_titre_logo{
    display: grid;
    grid-template-columns: 30% 70%;
    margin-bottom: 10px;
}
#logo{
    width: 70px !important;
    max-width: 70px !important;
    min-width: 20px !important;
    position: relative !important;
    margin-top: auto;
    margin-bottom: auto;
}


/* ***************   Toggle Button  FIN ****************** */
@media only screen and (max-width:700px){
    [id^=client] input[type=text], [id^=client] input[type=select], [id^=client] input[type=number], [id^=client] input[type=email]{
        max-height: 8px !important;
        font-size : 0.5em;
    }
    [id^=client] select {
        font-size : 0.6em;
        max-height: 14px !important;
    }
    #divBtnProfil2{
        grid-template-columns: 1fr 5% 60% 5% 1fr;
    }
    #logo {
        width: 30px !important;
        max-width: 30px !important;
        min-width: 20px !important;
        top : 0;
    }
    #formProfil>h2{
        text-align: center;
        margin-bottom: 1%;
        margin-top: 1%;
        grid-column : span 2;
        font-size : 0.8em;
    }
    #formProfil{
        width: 100% !important;
/*        position : static;*/
    }
    [id^=client] div, #div_accepte_reglement{
        grid-template-columns: 1fr !important;
        width : 100%;
    }
    [id^=client] input, [id^=client] select {
        grid-column: auto;
    }
    #h2Inscription{
        font-size: 1em !important;
        margin-bottom: 5px;
    }
}
@media only screen and (max-width:700px) and (orientation: portrait ){
    main{
        grid-template-columns:  10px 1fr 10px !important;
    }
    .labelClient{
        grid-column: 1 / 4;
        grid-row : 1 / 2;
    }
    #formProfil input[type=text],#formProfil input[type=email], .choice{
        grid-column: 1 / 4;
        grid-row : 2 / 3;
    }
    [type="checkbox"] {
        grid-column: 3 / 4;
    }
    .labelCheckbox{
        grid-column: 1 / 3;
    }
    [id^=clients_] div{
        grid-template-columns: 5% 7.5% 1fr 2.5%;
    }
}
@media only screen and (max-width:700px) and (orientation: landscape ){
    main{
        /*grid-template-columns:  1fr 75% 1fr !important;*/
    }
    main{
        font-size : 0.5em;
    }
}