@import url('https://fonts.googleapis.com/css?family=Tajawal&display=swap');
:root{--couleur1:#4075a1}
:root{--couleur2:#c946e9}
:root{--couleur3:#f4edf5bd}
:root{--couleur4:#0946792e}

*{margin:0;padding:0;}

.hid{display:none}
.hidimportant{display:none!important}
li,ul{list-style:none;vertical-align: middle;margin: 0;padding: 0;text-decoration:none;}
ul{display: flex;justify-content: center;}

#cMd{border-radius: 30px;display: none;height: 25px;margin: 0;padding: 2px;position: absolute;width: 25px;z-index: 99999;background: #fff;color: #000;}

#body_ind{color:black;font-family:"Tajawal",Verdana,"Lucida Grande",Tahoma,Helvetica,Sans-Serif;font-size:15px;margin:0;padding:0;color:#304c63; 
background: #fff;height:100%;overflow-x: hidden;}

main{background: #fff;margin: 0px;z-index: 0;display: block;top: 0px;position: absolute; right: 0px;left: 0px;}

header{left: 0;right:0px;z-index: 3;top: 0px;position: fixed;}

.logo {
position: absolute;
top: 11px;
left: 3%;
font-size: 20px;
line-height: 18px;
text-align: right;
font-weight: bold;
}.logo b {
color: var(--couleur2);
font-size: 29px;
}


menu{display: flex;
width: 100%;
border-top: 1px solid #fff;
background: #dde3ed;
height: 40px;
border-bottom: 3px solid var(--couleur2);padding-left: 215px;}
nav {overflow: hidden;}

.bt_nivo1,.bt_nivo2{    text-decoration: none;
    text-align: center;
    color: var(--couleur1);
    text-transform: uppercase;
    font-size: 16px;
    position: relative;
    padding:10px;
    display: block;}

.bt_nivo1_active{color: var(--couleur2);text-decoration: none;}

.bt_nivo1:hover,.bt_nivo1_active:hover,.bt_nivo2:hover,.bt_nivo2_active:hover{text-decoration: none;color:#c946e9}


hr {color: #ccc;border: 1px solid #ccc;height: 0px;border-bottom: none;    margin: 10px;}
section{font-size: 18px;line-height: 130%;position: relative;top: 38px;min-height: 800px;}

span.lesfiltres{   position: fixed;
    background: #dde3ed;
    width: 90%;
    margin: -32px -3%;
    width: 100%;
    z-index: 100;
    text-align: center;
    display: block;
    border-bottom: 3px solid var(--couleur2);}

A, A:link , A:visited , A:active{text-decoration:none;color:var(--couleur1);outline:none;cursor:pointer}
A:hover{text-decoration:none;color:var(--couleur2);outline:none;}
legend a {color: #fff;}
.page_Accueil, .page_Page{font-size: 20px;color: #666;}
article {
margin: 60px 15%;
}
article.page_accueil {
margin: 30px 3%;
width: 93%;
}

h1{color: var(--couleur1);font-size: 30px;margin-bottom: 10px;;font-weight: lighter;letter-spacing: -0.03em;}
h2{color: var(--couleur1);font-size: 26px;width: 100%;font-weight: lighter;}
h3 {color: var(--couleur1);}
h4{color: var(--couleur1);font-weight: bold;line-height: 0px;}
h5{color: #7dadcc;font-weight: 100;border-bottom: 1px solid #7dadcc;display: inline-block;line-height: 20px;}
h6{color:#4d7291;font-size:17px;font-weight:bold;display:inline}
h7 {font-size: 14px;display: block;}



.fa-cog{font-size: 14px;}

.lien {cursor: pointer;}
.lien:hover{text-decoration:underline;}


/*pour organigramme gris en compte*/
u{text-decoration: none;border-bottom: 1px solid #888;display: inline-block;line-height: 18px;}
d {display: inline-block;width: 6px;}
o {line-height: 27px;color: #999;font-size: 22px;}


input#couleur {
color: transparent;
width: 16px;
}


fieldset {
border: 1px solid var(--couleur1);
border-radius: 10px;
padding: 10px;background:var(--couleur3);
line-height: 21px;
margin: 50px auto 10px;
text-align: center;}



legend {border: 1px solid var(--couleur1);
border-radius: 7px;
color: var(--couleur3);
padding: 2px 10px;
background: var(--couleur1);
font-size: 15px;}


span#colonnegauche {
float: left;
width: 23%;font-size: 15px;
}


span#colonnedroite {
float: right;
width: 73%;
border-left: 1px solid #ccc;
padding: 0 0 0 20px;min-height: 500px;
}
.bt_save {
background: var(--couleur1);
border-radius: 4px;
padding: 6px 11px;
color: #fff;
border: none;
font-size: 15px;cursor: pointer;
}.bt_save:hover {
background: var(--couleur2);
}
.bt_grand {width: 200px;}
.bt_petit {width: 85px;font-size:11px}
form#form_ajout {
min-width: 400px;line-height: 40px;max-width: 600px;width: 600px;user-select: none;text-align: left;
}



.textarea{width:99%;height:100px;border-radius: 5px;border: 1px solid var(--couleur1);padding:5px}
.red{color:#c54444!important}
.green{color:#61ad1c!important}
.orange{color:#e9a933!important}
.blue{color:#4793f1!important}
.gris{color:#888!important}.gris2{color:#b9b8b8!important}



.w50{width: 50px;}
.w60{width: 60px!important;}
.w70{width: 70px!important;}
.w100{ width: 110px!important;}
.w200{ width: 200px!important;}
.w300{ width: 300px!important;}
.w400{ width: 400px!important;}
.w1000{ width: 100%}
.w500{ width: 500px!important;}
.w800{ width: 800px!important;}
.w1200{ width: 1200px}
.right{float:right}
.gauche{text-align:left}
.droite{text-align:right}
.opa50 { opacity: 0.7;}
.bold,b{font-weight:bold}/*pour firefox*/


.color-picker-input{ line-height: 0;  font-size: 0;  cursor: pointer;  text-indent: -999em;  padding: 0;}

.color-picker-chooser {background: #fff;
padding: 1px;
list-style: none;
position: relative;
z-index: 1000;
border: 1px solid #666;
margin: 0;
height: 22px;
display: block;}

.color-picker-chooser li{ float: left;  cursor: pointer;  border: 1px solid #fff;}

.color-picker-chooser li.selected, .color-picker-chooser li:hover, .color-picker-chooser li:focus{ border-color: #000;  outline: none;  transform: scale(1.3);}

.disconn{cursor:pointer;text-align:right}




/************ calenrier */
.birdy {border: 1px solid var(--couleur1);
    border-radius: 4px;
    padding: 4px;
    color: var(--couleur1);
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    height: 27px;
    vertical-align: middle;
    line-height: 28px;}

.ptbt {color: var(--couleur1);   cursor: pointer;font-size: 16px;vertical-align: middle;z-index: 2;
    position: relative;}.ptbt :hover{ color: var(--couleur2);}
.ptmoins{margin: 0 -20px 0 0;}
.ptplus{margin: 0 0 0 -20px;}

#body_ind table {
width: 100%;
border-spacing: 0px;
border-collapse: collapse;
}
td{   padding: 3px;
    border: 1px solid #0000001a;
    line-height: 21px;}

.xJ td{    font-size: 15px;
    background: var(--couleur1);
    color: #fff;
    font-weight: bold;
    height: 25px;    padding-left: 10px;
  }

	td.CuH{    width: 35px;
    font-size: 13px!important;
    text-align: right;}

.tdheure td {
line-height: 15px;
font-size: 15px;font-weight: bold;
}

tr.xP:hover{   background: #ebffe5;}	

td.occup {cursor: pointer;text-align: left;padding: 0 0 0 5px;border: 1px solid transparent;box-shadow: inset 0px 1px 3px 1px #fff,inset 0px 0px 0px 1px #999;
border-radius: 4px;}.occup:hover{    box-shadow: inset 0px 0px 0px 2px #000000;   filter: brightness(1.05);}

td.occup.repos{  filter: grayscale(0.8) opacity(0.6)}
	
.occup i{position: absolute;
letter-spacing: -0.05em;
font-size: 14px;
margin-top: -9px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;}
.occup b {font-style: normal;}

.zeb{background(url/image/zeb.png) repeat;}

td.lignevide {border: none;height: 50px;}

#quelmsg{width: 200px;height:100px}
#val_quelheuredeb{width:30px}
#val_quelpersonnel{width:60px}
#val_quelmagasin{width:120px}
#val_quelmsg{width:500px}
#val_quelpersonnel,#val_quelmagasin{text-transform: uppercase;}

.col1{   font-weight: normal;
    text-wrap: nowrap;
    font-size: 15px;  
    width: 160px;}

tr.xP td.col1,input[type="number"]{text-align: right;}
tr.xM td.col1 {padding-left:25px;}
tr.xM td {
color: #000;
font-size: 15px;
border-top: 2px solid var(--couleur1);
background: var(--couleur4);
line-height: 25px;}
tr.xM td.tdheure {font-size: 11px;color: #4075a1a8;text-align: left;}

.cellhover i,.cellhover2 i{font-size: 13px;color:#fff;font-family: monospace;letter-spacing: -0.05em;width: 0px;
display: block;}

.pair {background: var(--couleur3);}
.heureok{color:#24aa24 !important;}

.cellhover{    background-color:#6f89ff; cursor: pointer;  vertical-align: middle;text-align:left;}
.cellhover2{    background-color:#5a76f4; cursor: col-resize;  vertical-align: middle;text-align:right}


.frisesem{    padding: 2px;
    border: 1px solid #ccc;
    text-align: center;
    font-size: 14px;background: #ffffff4a;}
.semactu {background: #ddede6;}
.semselect {background: #dadfe9;}

.leschampcalend{    opacity: 0.5;}     .leschampcalend:hover{opacity: 1;}



div#rideau {display:none;position: fixed;
background-color: var(--couleur1);
z-index: 1000;
filter: opacity(0.8);cursor: grab;
height: 100%;width: 100%; 
}
#TitrBulle {position: absolute;
left: 1px;
top: 1px;
font-size: 12px;
padding: 1px 7px;
border-radius: 0 0 10px 0;
background: #fff;}
#Bulle {display: none;
position: fixed;
cursor: default;
top: 25%;line-height: 17px;
left: 50%;
transform: translate(-50%, -50%);
min-width: 250px;
background-color: #ece8ec;
text-align: center;
padding: 30px 20px 20px 20px;
border-radius: 5px;
z-index: 1100;
box-shadow: 4px 4px 4px var(--couleur1);
}

#toTop{cursor: pointer;
color: #fff;
position: fixed;
bottom: 11%;
right: 5%;
z-index: 1000;
border-radius: 100%;
font-size: 43px;
display: none;
background: var(--couleur2);
aspect-ratio: 1;
width: 35px;
height: 35px; border: 1px solid var(--couleurbase); padding: 4px;}svg#toTop:hover {color: var(--couleur1);;}




.rg0{background-color: #fce3e0; } .rg0c{color: #fce3e0; }  /* pâle mais visible */
.rg1{background-color: #f8cbc7; } .rg1c{color: #f8cbc7; }
.rg2{background-color: #f4b3af; } .rg2c{color: #f4b3af; }
.rg3{background-color: #f09a96; } .rg3c{color: #f09a96; }
.rg4{background-color: #ec827e; } .rg4c{color: #ec827e; }  /* plus doux que #ec7062 */

.vi0 { background-color: #fde4ec; } .vi0c { color: #fde4ec; }
.vi1 { background-color: #f9c3d9; } .vi1c { color: #f9c3d9; }
.vi2 { background-color: #f49fc5; } .vi2c { color: #f49fc5; }
.vi3 { background-color: #ef7cb1; } .vi3c { color: #ef7cb1; }
.vi4 { background-color: #ea589d; } .vi4c { color: #ea589d; }


.rs0{background-color: #f0e6f5; } .rs0c{color: #f0e6f5; }
.rs1{background-color: #e2d2ee; } .rs1c{color: #e2d2ee; }
.rs2{background-color: #d4bde7; } .rs2c{color: #d4bde7; }
.rs3{background-color: #c6a9df; } .rs3c{color: #c6a9df; }
.rs4{background-color: #b993d8; } .rs4c{color: #b993d8; }

.bl0{background-color: #e4f1fb; } .bl0c{color: #e4f1fb; }
.bl1{background-color: #cce4f7; } .bl1c{color: #cce4f7; }
.bl2{background-color: #b3d7f3; } .bl2c{color: #b3d7f3; }
.bl3{background-color: #9ac9ef; } .bl3c{color: #9ac9ef; }
.bl4{background-color: #82bcec; } .bl4c{color: #82bcec; }


.ve0{background-color: #e6f8f0; } .ve0c{color: #e6f8f0; }
.ve1{background-color: #c9eedf; } .ve1c{color: #c9eedf; }
.ve2{background-color: #ade4cf; } .ve2c{color: #ade4cf; }
.ve3{background-color: #90dabf; } .ve3c{color: #90dabf; }
.ve4{background-color: #74d0af; } .ve4c{color: #74d0af; }


.ja0{background-color: #fffbe6; } .ja0c{color: #fffbe6; }
.ja1{background-color: #fff3bf; } .ja1c{color: #fff3bf; }
.ja2{background-color: #ffe999; } .ja2c{color: #ffe999; }
.ja3{background-color: #ffdf73; } .ja3c{color: #ffdf73; }
.ja4{background-color: #ffd54d; } .ja4c{color: #ffd54d; }


.gr0{background-color: #f5f6f7; } .gr0c{color: #f5f6f7; }
.gr1{background-color: #e2e5e7; } .gr1c{color: #e2e5e7; }
.gr2{background-color: #cfd4d8; } .gr2c{color: #cfd4d8; }
.gr3{background-color: #bcc3c9; } .gr3c{color: #bcc3c9; }
.gr4{background-color: #aab2b9; } .gr4c{color: #aab2b9; }


.or0{background-color: #fff4e6; } .or0c{color: #fff4e6; }
.or1{background-color: #ffe0bf; } .or1c{color: #ffe0bf; }
.or2{background-color: #ffcc99; } .or2c{color: #ffcc99; }
.or3{background-color: #ffb873; } .or3c{color: #ffb873; }
.or4{background-color: #f6aa63; } .or4c{color: #f6aa63; }

.br0{background-color: #f9f6f2; } .br0c{color: #f9f6f2; }
.br1{background-color: #ede3d9; } .br1c{color: #ede3d9; }
.br2{background-color: #e0d0c0; } .br2c{color: #e0d0c0; }
.br3{background-color: #d4bda7; } .br3c{color: #d4bda7; }
.br4{background-color: #c8aa8e; } .br4c{color: #c8aa8e; }





@media (max-width: 1025px){

}




@media (max-width: 800px){


}