body{
    
    font-family: Georgia, 'Times New Roman', Times, serif;
    background-image: url('tan23.jpg');
    background-size: 100%;
    background-attachment: fixed;
    /* cursor: url('dash.gif'), auto; */
}


input[type="checkbox"] {
    /* Ajoutez ici les styles de base que vous souhaitez pour la case à cocher */
    /* Par exemple : */
    width: 20px;
    height: 20px;
}

#info_ven {
    width: 800px;
    height: 600px;
}

#horaire_div {
    display: flex;
    height: fit-content;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
#hor_dro,#hor_gau {
    font-size: 50px;
    /* background-color: rgb(0, 89, 89); */
    color: #ffffff;
    background-color: rgb(6, 15, 69);
    border-color: aqua;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px; 
    /* border: 1px solid rgb(245, 4, 4); */
}
#hor_droi,#hor_gauc {
    font-size: 50px;
    /* background-color: rgb(0, 89, 89); */
    color: #ffffff;
    background-color: rgb(6, 15, 69);
    border-color: aqua;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px; 
    /* border: 1px solid rgb(245, 4, 4); */
}
#horaire_l_div {
    display: flex;
    height: fit-content;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
#horaire_leader {

    width: 1050px;
    transition: all 1s;
}
#heure_lunch1 {
    width: 350px;
    border: 1px solid black;
    text-align: center;
    background-color: #ececec;
    margin: 20px;
    margin-top: 10px;
    padding: 10px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    box-shadow: 1px 1px 10px black ;
}

#div_watcher {

    width: 375px;
    height: 30px;
    background-image: repeating-linear-gradient(to bottom right ,#3c8697,rgb(0, 0, 0));
    text-align: center;
    color: rgb(255, 255, 255);
    text-shadow: 5px 5px 4px rgb(0, 0, 0);
    font-size: 30px;
    padding: 20px;
    margin: 20px;
    /* margin: 1px 1px; */
    /* margin: 10px; */
    border: 1px solid black;
    font-style: normal ;
    font-weight: bold;
    /* line-height: 1px; */
    justify-content: center;
    border-radius: 20%;
    box-shadow: 0px 0px 17px #000000;
    /* margin-top: 20px; */
}
#span_watcher {
    padding: 1px;
    margin: 1px;
    display: flex;
    justify-content: center;
}
#div_next {
    /* position: absolute;
    top: 130px;
    left: 10px; */
    width: 375px;
    margin: 20px;
    /* height: 30px; */
    border: 1px solid black;
    box-shadow: 3px 3px 7px rgb(86, 86, 86);
    text-align: center;
    font-size: 30px;
    /* background-color: #B1B3B2; */
    /* margin: 10px; */
    /* margin-top: 50px; */
    padding: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;


    background-image: linear-gradient(to bottom right ,#88b5bb,rgb(127, 127, 127));

    color: rgb(255, 255, 255);
    text-shadow: 2px 2px 2px black;
    
    font-style: normal;
    font-weight: bold;


    /* line-height: 1px; */

}
p {
    margin: 0px;
    padding: 0px;
    font-style: normal ;
    /* font-weight: bold; */
}
#span_next {
    height: 70px;
    padding: 1px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#rappel{
    /* position: absolute;
    top: 900px;
    right: 10px; */
    width: 375px;
    border: 1px solid black;
    text-align: left;
    font-size: 20px;
    background-color: #ececec;
    margin: 20px;
    margin-top: 20px;
    padding: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    box-shadow: 1px 1px 10px black ;
}
#stakilltour{
    /* position: absolute;
    top: 900px;
    right: 10px; */
    width: 435px;
    border: 1px solid black;
    text-align: left;
    font-size: 25px;
    background-color: #ececec;
    margin: 20px;
    margin-top: 1px;
    /* padding: 20px; */
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    box-shadow: 1px 1px 10px black ;
}
#anniverssaire{
    /* position: absolute;
    top: 85px;
    right: 10px; */
    width: 375px;
    border: 1px solid black;
    text-align: left;
    font-size: 25px;
    background-color: #D4D0C5;
    margin: 20px;
    margin-top: 50px;
    padding: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    box-shadow: 1px 1px 10px black ;
}
#formation_html{
    /* position: absolute;
    top: 85px;
    right: 10px; */
    height: 200px;
    width: 375px;
    border: 1px solid black;
    text-align: left;
    font-size: 25px;
    background-color: #ececec;
    margin: 20px;
    padding: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    box-shadow: 1px 1px 10px black ;
}
#venactif1{
    /* position: absolute;
    top: 200px;
    right: 10px; */
    width: 375px;
    border: 1px solid black;
    text-align: center;
    font-size: 20px;
    background-color: #B1B3B2;
    margin: 20px;
    margin-top: 0px;
    padding: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    box-shadow: 1px 1px 10px black ;
}

#div_top {
    display: flex;
    align-items: center;
    height: 100px;
    
}
#heure {    /* Heure */
    position: absolute;
    width: 275px;
    height: 60px;
    padding:20px;
    text-shadow: 1px 1px 10px black;
    right: 95px;
    /* border: 1px solid black; */
    text-align: center;
    font-size: 60px;
    /* background-color: #efe1d6; */
    /* border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    box-shadow: 1px 1px 10px black ; */
}
#date_auj {    /* Date */
    position: absolute;
    min-width: max-content;
    height: 60px;
    color: #ffffff;
    padding:20px;
    text-shadow: 1px 1px 10px black;
    right: 50%;
    border: 1px solid black;
    text-align: center;
    font-size: 50px;
    background-color: #B1B3B2;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    box-shadow: 1px 1px 10px black ;
    transform: translateX(50%);
}

#div_center{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

#horaire {

    width: 1050px;
    transition: all 1s;
}
/* #horaire:hover {

    width: 1300px;
    
} */
#menage {

    width: 1050px;
    transition: all 1s;
}
/* #menage:hover {
    width: 1400px;
    
} */

#div_02 {   /* Calc */
    
    text-align: center;
    background-color: #ffffff;
    max-width: 900px;
    min-width: 725px;
    height: 625px;
    border: 5px solid rgb(36, 36, 36);
    
    overflow: visible;
    color: rgb(72, 115, 145);
    text-shadow: 1px 1px 1px black;
    font-size: 25px;
    margin: auto;
    /* position: absolute;
    left: 275px;
    top: 130px; */
    box-shadow: 0px 0px 17px #000000;
    border-top-left-radius: 10%;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20%;    
}
#div_info {
    overflow: scroll;
    overflow-x: hidden;
    text-align: left;
    background-color: #ffffff;
    max-width: 900px;
    min-width: 725px;
    height: 625px;
    border: 5px solid rgb(36, 36, 36);
    padding-left: 40px;
    color: rgb(0, 0, 0);
    font-style: normal;
    /* text-shadow: 1px 1px 1px black; */
    font-size: 20px;
    margin: auto;
    /* position: absolute;
    left: 275px;
    top: 130px; */
    line-height: 1.5;
    box-shadow: 0px 0px 17px #000000;
    border-top-left-radius: 10%;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20%;    
}

#div_prora {   /* Prorata */
    
    text-align: center;
    background-color: #ffffff;
    width: 725px;
    height: 625px;
    border: 5px solid rgb(36, 36, 36);
    overflow: auto;
    color: rgb(72, 115, 145);
    text-shadow: 1px 1px 1px black;
    font-size: 25px;
    margin: auto;
    /* position: absolute;
    left: 275px;
    top: 130px; */
    box-shadow: 0px 0px 17px #000000;
    border-top-left-radius: 10%;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20%;    
}

#div_autre {   /* Autre */
    
    text-align: center;
    background-color: #ffffff;
    width: 725px;
    height: 625px;
    border: 5px solid rgb(36, 36, 36);
    overflow: auto;
    color: rgb(72, 115, 145);
    text-shadow: 1px 1px 1px black;
    font-size: 25px;
    margin: auto;
    /* position: absolute;
    left: 275px;
    top: 130px; */
    box-shadow: 0px 0px 17px #000000;
    border-top-left-radius: 10%;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20%;    
}
#div_autre0 {   /* Autre0 */
    
    text-align: center;
    background-color: #ffffff;
    width: 725px;
    height: 625px;
    border: 5px solid rgb(36, 36, 36);
    overflow: visible;
    color: rgb(72, 115, 145);
    text-shadow: 1px 1px 1px black;
    font-size: 25px;
    margin: auto;
    /* position: absolute;
    left: 275px;
    top: 130px; */
    box-shadow: 0px 0px 17px #000000;
    border-top-left-radius: 10%;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20%;    
}
[id^="prora"] {
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
    font-size: 20px;
    width: 125px;
}

[id^="text_"] {
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
    font-size: 20px;
    width: 125px;
}
[id^="autre"] {
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
    font-size: 20px;
    width: 125px;
}
/* #text_01 {
    position: absolute;
    top: 20px;
    left: 20px;
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
    font-size: 20px;
    width: 150px;
} */


#autre00_30,#text_01, #autre00_002, #text_08, #text_15,#text_17,#prora_inp_rab {
    
    background-color: rgb(255, 255, 0);
}

#text_06, #text_13, #text_14, #text_15 {   /*{ TOTAUX*/
    
    font-weight: bold;
    
}
#text_21 {
    margin-left: 30px;
}
#text_25 {
    margin-left: 7px;
}
#prora_text {
    margin-left: 50px;
}
#prora_textpour {
    margin-left: 25px;
}
#prora_text_rab {
    margin-left: 25px;
}
#prora_text_itm {
    margin-left: 15px;
}
#text_12_vers,#text_15_vers,#text_21_vers {
    margin-left: 155px;
}
#text_24_vers,#text_36_vers {
    margin-left: 152px;
}
#text_18_vers {
    margin-left: 154px;
}

#boutton_pres2,#boutton_pres1,#bouttonautre,#bouttonload,#bouttonsave,#bouttonpresence4,#bouttonpresence3,#bouttonpresence1,#bouttonpresence2,#bouttonpresence,#bouttonsigma,#bouttonkronos,#bouttonpowerbi,#boutton01,#boutton02,#boutton03,#boutton04,#boutton05,#boutton06,#boutton07,#boutton08,#boutton09,#boutton10,#boutton11,#boutton12,#boutton13 {
    /* background-color: #71959a;
    border-color: rgb(0, 0, 0);
    border-radius: 20%;
    color: rgb(255, 255, 255);
    font: normal;
    padding: 15px 15px;
    text-align: center;
    margin-left: 20px;
    display: inline-block;
    font-size: 21px;
    margin-top: 10px;
    width: 150px;
    height: 50px;
    box-shadow: 2px 2px 3px rgba(71, 71, 71, 0.754); */

    background-color: #88b5bb;
    border-color: aqua;
    border-bottom-left-radius: 20px;
    border-top-right-radius: 20px;
    color: white;
    /* font: bold; */
    padding: 15px 15px;
    margin-top: 3px;
    margin-bottom: 3px;
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
    font-size: 20px;
    text-shadow: 1px 1px 12px black;
    cursor: pointer;
    box-shadow: 1px 1px 10px black;
    transition: all .25s;
    width: 150px;

}

#boutton_pres2:hover,#boutton_pres1:hover,#bouttonautre:hover,#bouttonload:hover,#bouttonsave:hover,#bouttonpresence4:hover,#bouttonpresence3:hover,#bouttonpresence1:hover,#bouttonpresence2:hover,#bouttonpresence:hover,#bouttonsigma:hover,#bouttonkronos:hover,#bouttonpowerbi:hover,#boutton01:hover,#boutton02:hover,#boutton03:hover,#boutton04:hover,#boutton05:hover,#boutton06:hover,#boutton07:hover,#boutton08:hover,#boutton09:hover,#boutton10:hover,#boutton11,#boutton12,#boutton13:hover {
    /* background-color: #71959a;
    border-color: rgb(0, 0, 0);
    border-radius: 20%;
    color: rgb(255, 255, 255);
    font: bold;
    padding: 15px 15px;
    text-align: center;
    margin-left: 20px;
    display: inline-block;
    font-size: 22px;
    margin-top: 10px;
    width: 150px;
    height: 50px;
    box-shadow: 2px 2px 3px rgba(71, 71, 71, 0.754);
    cursor: grab; */

    background-color: #71959a;
    border-color: rgb(1, 85, 85);
    border-radius: 20%;
    color: white;
    font: bold;
    padding: 15px 15px;
    margin-top: 1px;
    margin-bottom: 1px;
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
    font-size: 21px;
    width: 150px;
  
}

@media screen and (max-width:1050px) {

    #div_boutton{
        display: flex;
        flex-direction:row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }
}

@media screen and (max-width:765px) {

    #div_center{

        justify-content: left;
    }

}

@media screen and (max-width:900px) {

    #date_auj{
        position: absolute;
        left: 10px;
        transform: translateX(0%);
    }

}

@media screen and (max-width:1265px) {

    #date_auj{
        position: absolute;
        right: 625px;
    }

}
/* .div_contenent {
    grid-template-columns: 50% 50%;
 ou
    grid-template-columns: 20% 30% 15% 15% 20%;
 ou
    grid-template-columns: 1fr 1fr 1fr 1fr;
} */
    


/* 

form {
    display: grid;
    grid-template-areas: 
        "ee ee aa aa"   
        "ee ee ii uu"
        "ww ww ww ww"
        "ww ww ww ww"
        "pp gg rr tt";
    gap: 8px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
} */

/* #logo {
    grid-area: ee;
}
#nom {
    grid-area: aa;
}
#age {
    grid-area: ii;
}
#sex {
    grid-area: uu;
} */







/* .button {
    background-color: rgb(255, 183, 0);
    border-color: aqua;
    border-radius: 20%;
    color: white;
    font: bold;
    padding: 15px 15px;
    text-align: center;
    margin-left: 20px;
    display: inline-block;
    font-size: 16px;
    margin-top: 10px;
} */