@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-light.ttf') format('truetype');
}

body, html, font, label, select, span, p, div, [type='text'], [type='password'], [type='date'], [type='datetime'], [type='datetime-local'], [type='month'], [type='week'], [type='email'], [type='number'], [type='search'], [type='tel'], [type='time'], [type='url'], [type='color'], textarea {
    font-size: 1em;
    font-family: Poppins, Arial, sans-serif !important;
    color: #3e3e3e !important;
}

fieldset legend {
    font-size: 1em !important;
}

#div-main-form {
    background-color: #FFFFFF !important;
}

[type="text"], [type="password"], [type="date"], [type="datetime"], [type="datetime-local"], [type="month"], [type="week"], [type="email"], [type="number"], [type="search"], [type="tel"], [type="time"], [type="url"], [type="color"], textarea {
    font-family: Poppins, sans-serif !important;
    box-shadow: none !important;
}

#div-header img {
    display: none !important;
}

#changementLangue {
    display: none !important;
}

.jour {
    color: #3e3e3e !important;
    text-align: center !important;
}

.duree {
    color: #f31b2e !important;
    font-weight: bold !important;
}


.actif {
    background-color: #e30420 !important;
    border-color: #e30420 !important;
    border-style: solid !important;
    border-radius: 0px !important;
    border-width: 1px !important;
    padding: 5px 20px 5px 20px !important;
    color: #FFFFFF !important;
    font-size: 1.31em !important;
    font-weight: bold !important;
}

.nonactif {
    background-color: #FFFFFF !important;
    border-color: #e30420 !important;
    border-style: solid !important;
    border-radius: 0px !important;
    border-width: 1px !important;
    padding: 5px 20px 5px 20px !important;
    color: #e30420 !important;
    font-size: 1.31em !important;
    font-weight: normal !important;
}

.heure {
    color: #e30420 !important;
    font-size: 1.2em !important;
    font-weight: bold !important;
    border-bottom: 1px solid #e30420 !important;
    margin-left: 23px !important;
}

.titre_atelier {
    font-size: 1.1em !important;
}

.nom_atelier {
    font-size: 1.4em !important;
}


/* Show the tooltip text when you mouse over the tooltip container */
.bulle:hover .bulletext {
    visibility: visible;
}

 /* Show the tooltip text when you mouse over the tooltip container */
.bulle:hover .bulletext3 {
    visibility: visible;
}

/* Show the tooltip text when you mouse over the tooltip container */
.bulle:hover .bulletext_centre {
    visibility: visible;
}

/* Show the tooltip text when you mouse over the tooltip container */
.bulle:hover .bulletext_centre3 {
    visibility: visible;
}    

/* Show the tooltip text when you mouse over the tooltip container */
.bulle:hover .bulletext_droite {
    visibility: visible;
}

/* Show the tooltip text when you mouse over the tooltip container */
.bulle:hover .bulletext_droite3 {
    visibility: visible;
}    

/* Show the tooltip text when you mouse over the tooltip container */
.bulle:hover .bulletext_bas {
    visibility: visible;
}   

/* Show the tooltip text when you mouse over the tooltip container */
.bulle:hover .bulletext_bas2 {
    visibility: visible;
}   

/* Show the tooltip text when you mouse over the tooltip container */
.bulle:hover .bulletext_bas3 {
    visibility: visible;
}  

/* Show the tooltip text when you mouse over the tooltip container */
.bulle:hover .bulletext_bas4 {
    visibility: visible;
} 

/* Show the tooltip text when you mouse over the tooltip container */
.bulle:hover .bulletext_bas5 {
    visibility: visible;
} 

/* Show the tooltip text when you mouse over the tooltip container */
.bulle:hover .bulletext_bas6 {
    visibility: visible;
} 

/* Show the tooltip text when you mouse over the tooltip container */
.bulle:hover .bulletext_bas7 {
    visibility: visible;
} 

/* Show the tooltip text when you mouse over the tooltip container */
.bulle:hover .bulletext_bas8 {
    visibility: visible;
}            
    
/* Show the tooltip text when you mouse over the tooltip container */
.bulle:hover .bulletext_bas_droite {
    visibility: visible;
}   

.Complet {
  display: none !important;
}

.Choisir {
     display: none !important;
}

.Annuler {
    display: none !important;
}

.Inactif {
    display: none !important;
}

a {
    color: #3e3e3e !important;
}

.titre_1 {
    font-size: 1em !important;
    font-weight: medium !important;
    color: #000000 !important;
    font-family: Poppins, Arial, sans-serif !important;
}

.detail {
    font-size: 1em !important;
    font-family: Poppins, Arial, sans-serif !important;
}

.salle {
    font-family: Poppins, Arial, sans-serif !important;
    font-size: 1em !important;
    color: #000000 !important;
    font-weight: bold !important;
}

.theme {
    font-size: 1.1em !important;
    font-family: Poppins, Arial, sans-serif !important;
    color: #000000 !important;
}


.boite_grise_conf {
    font-family: Poppins, Arial, sans-serif !important;
    border-color: #d8d8d7 !important;
    background-color: #d8d8d7 !important;
    padding: 10px 10px 10px 10px !important;
    height: 180px !important;
    line-height: 1.2em !important;
}

    .boite_grise_conf:hover {
        outline-color: #ffbe2e !important;
        outline-width: 2px !important;
        outline-style: solid !important;
    }

.boite_orange_conf {
    font-family: Poppins, Arial, sans-serif !important;
    border-color: #d8d8d7 !important;
    background-color: #d8d8d7 !important;
    padding: 10px 10px 10px 10px !important;
    height: 180px !important;
    line-height: 1.2em !important;
}

    .boite_orange_conf:hover {
        outline-color: #ff7f27 !important;
        outline-width: 2px !important;
        outline-style: solid !important;
    }       
    
.boite_rouge {
    font-family: Poppins, Arial, sans-serif !important;
    border-color: #636969 !important;
    background-color: #636969 !important;
    border-width: 2px !important;
    border-style: solid;
    padding: 5px 5px 5px 5px !important;
    color: #FFFFFF !important;
    margin-top: 5px !important;
    font-size: 1em !important;
    text-align: center !important;
    font-weight: bold !important;
    line-height: 1.4em !important;
    margin-bottom: 5px !important;
}

    .boite_rouge:hover {
        outline-color: #ffbe2e !important;
        outline-width: 1px !important;
        outline-style: solid !important;
    }

.boite_orange {
    font-family: Poppins, Arial, sans-serif !important;
    border-color: #636969 !important;
    background-color: #636969 !important;
    border-width: 2px !important;
    border-style: solid;
    padding: 5px 5px 5px 5px !important;
    color: #FFFFFF !important;
    margin-top: 5px !important;
    font-size: 1em !important;
    text-align: center !important;
    font-weight: bold !important;
    line-height: 1.4em !important;
    margin-bottom: 5px !important;
}

    .boite_orange:hover {
        outline-color: #ff7f27 !important;
        outline-width: 1px !important;
        outline-style: solid !important;
    }   

p, th, td {
    font-size: 1em !important;
}

td label {
    font-size: 1em !important;
}

    /*MODE TÉLÉPHONE*/
    @media screen and (min-width: 0px) and (max-width: 800px) {
    .jour {
        font-size: 0.9em !important;
    }
    /* Tooltip container */
    .bulle {
        position: relative !important;
        display: inline-block !important;
        color: #fff !important
    }

    /* Tooltip text */
    .bulletext {
        visibility: hidden;
        width: 250px;
        background-color: #636969;
        color: #FFFFFF !important;
        text-align: left;
        padding: 5px 5px 5px 5px;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
        margin-top: 20px;
        margin-left: -260px;
    }

    /* Tooltip text */
    .bulletext3 {
        visibility: hidden;
        width: 610px;
        background-color: #636969;
        color: #FFFFFF !important;
        text-align: left;
        padding: 10px 10px 10px 10px;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
        margin-top: 70px;
        margin-left: -194px;        
    }     
    
    /* Tooltip text */
    .bulletext_centre {
        visibility: hidden;
        width: 370px;
        background-color: #636969;
        color: #FFFFFF !important;
        text-align: left;
        padding: 10px 10px 10px 10px;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
        margin-top: 20px;
        margin-left: -260px;
    }

    /* Tooltip text */
    .bulletext_centre3 {
        visibility: hidden;
        width: 600px;
        background-color: #636969;
        color: #FFFFFF !important;
        text-align: left;
        padding: 10px 10px 10px 10px;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
        margin-top: 70px;
        margin-left: -194px;
    }      

    /* Tooltip text */
    .bulletext_droite {
        visibility: hidden;
        width: 370px;
        background-color: #636969;
        color: #FFFFFF !important;
        text-align: left;
        padding: 10px 10px 10px 10px;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
        margin-top: 20px;
        margin-left: -260px;
    }

    /* Tooltip text */
    .bulletext_droite3 {
        visibility: hidden;
        width: 800px;
        background-color: #636969;
        color: #FFFFFF !important;
        text-align: left;
        padding: 10px 10px 10px 10px;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
        margin-top: 70px;
        margin-left: -510px;
    } 

    /* Tooltip text */
    .bulletext_bas {
        visibility: hidden;
        width: 370px;
        background-color: #636969;
        color: #FFFFFF !important;
        text-align: left;
        padding: 5px 5px 5px 5px;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
        margin-top: 20px;
        margin-left: -260px;
    }   
    
    /* Tooltip text */
    .bulletext_bas_droite {
        visibility: hidden;
        width: 370px;
        background-color: #636969;
        color: #FFFFFF !important;
        text-align: left;
        padding: 10px 10px 10px 10px;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
        margin-top: 20px;
        margin-left: -260px;
    }       
}
/*Mode tablette*/
@media screen and (min-width: 801px) and (max-width: 1200px) {
    .jour {
        font-size: 1.4em !important;
    }
    /* Tooltip container */
    .bulle {
        position: relative !important;
        display: inline-block !important;
        color: #FFFFFF !important;
    }

    /* Tooltip text */
    .bulletext {
        visibility: hidden;
        width: 640px;
        background-color: #636969;
        color: #FFFFFF !important;
        text-align: left;
        padding: 10px 10px 10px 10px;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
        margin-top: 20px;
        margin-left: -150px;        
    }

    /* Tooltip text */
    .bulletext3 {
        visibility: hidden;
        width: 610px;
        background-color: #636969;
        color: #FFFFFF !important;
        text-align: left;
        padding: 10px 10px 10px 10px;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
        margin-top: 70px;
        margin-left: -194px;        
    }     

    /* Tooltip text */
    .bulletext_centre {
        visibility: hidden;
        width: 640px;
        background-color: #636969;
        color: #FFFFFF !important;
        text-align: left;
        padding: 10px 10px 10px 10px;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
        margin-top: 20px;
        margin-left: -380px;
    }

    /* Tooltip text */
    .bulletext_centre3 {
        visibility: hidden;
        width: 600px;
        background-color: #636969;
        color: #FFFFFF !important;
        text-align: left;
        padding: 10px 10px 10px 10px;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
        margin-top: 70px;
        margin-left: -194px;
    }      

    /* Tooltip text */
    .bulletext_droite {
        visibility: hidden;
        width: 640px;
        background-color: #636969;
        color: #FFFFFF !important;
        text-align: left;
        padding: 10px 10px 10px 10px;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
        margin-top: 20px;
        margin-left: -650px;
    }

    /* Tooltip text */
    .bulletext_droite3 {
        visibility: hidden;
        width: 800px;
        background-color: #636969;
        color: #FFFFFF !important;
        text-align: left;
        padding: 10px 10px 10px 10px;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
        margin-top: 70px;
        margin-left: -510px;
    }     

    /* Tooltip text */
    .bulletext_bas {
        visibility: hidden;
        width: 640px;
        background-color: #636969;
        color: #FFFFFF !important;
        text-align: left;
        padding: 10px 10px 10px 10px;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
        margin-top: -30px;  
        margin-left: -80px;     
    }   

    /* Tooltip text */
    .bulletext_bas_droite {
        visibility: hidden;
        width: 640px;
        background-color: #636969;
        color: #FFFFFF !important;
        text-align: left;
        padding: 10px 10px 10px 10px;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
        margin-top: 20px;
        margin-left: -650px;
    }
}
/*Mode ordinateur*/
@media screen and (min-width: 1201px) {
    .jour {
        font-size: 1.4em !important;
    }
    
    /* Tooltip container */
    .bulle {
        position: relative !important;
        display: inline-block !important;
        color: #FFFFFF !important;    
    }

    /* Tooltip text */
    .bulletext {
        visibility: hidden;
        width: 610px;
        background-color: #636969;
        color: #FFFFFF !important;
        text-align: left;
        padding: 10px 10px 10px 10px;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
        margin-top: 70px;
        margin-left: -194px;        
    }

    /* Tooltip text */
    .bulletext3 {
        visibility: hidden;
        width: 610px;
        background-color: #636969;
        color: #FFFFFF !important;
        text-align: left;
        padding: 10px 10px 10px 10px;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
        margin-top: 70px;
        margin-left: -240px;        
    }    

    /* Tooltip text */
    .bulletext_centre {
        visibility: hidden;
        width: 600px;
        background-color: #636969;
        color: #FFFFFF !important;
        text-align: left;
        padding: 10px 10px 10px 10px;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
        margin-top: 70px;
        margin-left: -194px;
    }

    /* Tooltip text */
    .bulletext_centre3 {
        visibility: hidden;
        width: 600px;
        background-color: #636969;
        color: #FFFFFF !important;
        text-align: left;
        padding: 10px 10px 10px 10px;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
        margin-top: 70px;
        margin-left: -243px;
    }    

    /* Tooltip text */
    .bulletext_droite {
        visibility: hidden;
        width: 600px;
        background-color: #636969;
        color: #FFFFFF !important;
        text-align: left;
        padding: 10px 10px 10px 10px;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
        margin-top: 70px;
        margin-left: -523px;
    }

    /* Tooltip text */
    .bulletext_droite3 {
        visibility: hidden;
        width: 800px;
        background-color: #636969;
        color: #FFFFFF !important;
        text-align: left;
        padding: 10px 10px 10px 10px;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
        margin-top: 70px;
        margin-left: -678px;
    }    


    /* Tooltip text */
    .bulletext_bas {
        visibility: hidden;
        width: 610px;
        background-color: #636969;
        color: #FFFFFF !important;
        text-align: left;
        padding: 10px 10px 10px 10px;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
        margin-top: -470px;
        margin-left: -194px;        
    }   

     /* Tooltip text */
    .bulletext_bas2 {
        visibility: hidden;
        width: 610px;
        background-color: #636969;
        color: #FFFFFF !important;
        text-align: left;
        padding: 10px 10px 10px 10px;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
        margin-top: -420px;
        margin-left: -194px;        
    } 

     /* Tooltip text */
    .bulletext_bas3 {
        visibility: hidden;
        width: 610px;
        background-color: #636969;
        color: #FFFFFF !important;
        text-align: left;
        padding: 10px 10px 10px 10px;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
        margin-top: -80px;
        margin-left: -194px;        
    }    

     /* Tooltip text */
    .bulletext_bas4 {
        visibility: hidden;
        width: 610px;
        background-color: #636969;
        color: #FFFFFF !important;
        text-align: left;
        padding: 10px 10px 10px 10px;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
        margin-top: -120px;
        margin-left: -232px;        
    }       

     /* Tooltip text */
    .bulletext_bas5 {
        visibility: hidden;
        width: 610px;
        background-color: #636969;
        color: #FFFFFF !important;
        text-align: left;
        padding: 10px 10px 10px 10px;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
        margin-top: -100px;
        margin-left: -194px;        
    }     

     /* Tooltip text */
    .bulletext_bas6 {
        visibility: hidden;
        width: 610px;
        background-color: #636969;
        color: #FFFFFF !important;
        text-align: left;
        padding: 10px 10px 10px 10px;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
        margin-top: -170px;
        margin-left: -194px;        
    }  

     /* Tooltip text */
    .bulletext_bas7 {
        visibility: hidden;
        width: 600px;
        background-color: #636969;
        color: #FFFFFF !important;
        text-align: left;
        padding: 10px 10px 10px 10px;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
        margin-top: -105px;
        margin-left: -194px;        
    }  

     /* Tooltip text */
    .bulletext_bas8 {
        visibility: hidden;
        width: 610px;
        background-color: #636969;
        color: #FFFFFF !important;
        text-align: left;
        padding: 10px 10px 10px 10px;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
        margin-top: -172px;
        margin-left: -532px;        
    }                

}