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

*{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;}


#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;border-bottom: 4px solid #fff;}

img#logo {
position: absolute;
height: 66px;
top: 4px;
left: 3%;;
}

menu{    display: flex;
    width: 100%;
    border-top: 1px solid #fff;
    text-align: center;
    background: #dde3ed;
    justify-content: center;
    height: 65px;
    border-bottom: 3px solid var(--couleur2);}
nav {overflow: hidden;}

.bt_nivo1,.bt_nivo2{text-decoration: none;text-align: center;color: var(--couleur1);text-transform: uppercase;font-size: 17px;position: relative;padding: 0 18px;line-height: 67px;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;}
section{font-size: 18px;line-height: 130%;position: relative;top: 63px;min-height: 800px;}
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: #7dadcc;font-weight: bold;border-bottom: 1px solid #7dadcc;display: inline-block;line-height: 26px;}
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;}


b{font-weight:bold}/*pour firefox*/



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;}
.zone{display: inline;
overflow: hidden;
transition: height 0s;
width: 100%;
padding: 0px;}

.pt {
font-size: 14px;
line-height: 19px;
}
	
.fa-toggle-on{color: var(--couleur1);
transform: rotateY(180deg);
font-size: 16px;
vertical-align: middle;
height: 21px;
filter: opacity(0.5)grayscale(0.7);}
.swi_checked{ filter: none; transform: none;}
.fa-lock-open, .fa-lock {
filter: opacity(0.8);
font-size: 13px;
margin-left: 3px;
}
b.coderatach{font-family: monospace;border: 1px solid #ccc;padding: 4px;border-radius: 4px;background: #fff;}

input#couleur {
color: transparent;
width: 16px;
}
.chkspc{margin: 12px 0 0 0;width: 10px!important;height: 11px;}
label[for=chkspc] {font-size: 14px!important;}


#btsommpied{display: block;margin: 0 0 30px 0;float: none;z-index: 0;}

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

.fieldsetsociete{text-align:left;}

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

center.menudate {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    font-size: 15px;
    line-height: 15px;
    padding: 2px;    margin: 20px auto;
}
dfn {
    min-width: 39px;
    text-align: center;
}
input#jourcal {
    font-size: 12px;
    text-align: center;
    border-radius: 3px;
    border: 1px solid #ccc;
    margin: 3px;
    color: #555;
}

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;
}
.svgf {
    color: #0000002e;
    font-size: 15px;
    margin: 0 12px;
}
#formcontact{padding: 0px 10px;border: 1px solid var(--couleur1);border-radius: 10px;text-align: center;background: var(--couleur3);border-top: 4px solid var(--couleur1);}
#formcontact input,#formcontact textarea,#formcontact select{background: #fff;border: 1px solid var(--couleur1);border-radius: 2px!important;padding: 5px!important;width: 95%;margin: 5px 0;}
#env{cursor: pointer;font-size: 16px;color: #fff;font-weight: normal;background: var(--couleur1)!important;padding: 5px 17px;border-radius: 4px;display: block;width: auto!important;text-align: center;margin: 0 auto!important;box-shadow: none;}


.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}



/* compte*/

label:hover {background: var(--couleurtransp);}

.label_profil{border: 1px solid var(--couleur1);border-radius: 8px;font-weight: bold;font-size: 17px;padding: 5px;cursor: pointer;margin: 4px;min-width: 12%;display: inline-block;text-align: left;}
label.label_profil:hover { background: var(--couleur1);}
label.label_profil:hover * { color: #fff; }

.label_on,.label_off{font-size: 18px;cursor: pointer;width: 5%;display: inline-block;color: #fff;text-align: center;filter: opacity(0.8);padding: 0 9px;letter-spacing: 0.02em;}

label.label_on{filter: none;background: #fff;color: var(--couleur1);border-radius: 10px 10px 0 0;margin-bottom: -5px;margin-top: 2px;font-weight: bold;}

 .label_off:hover:not(.label_off.label_on){filter: none; font-weight: bold;background:transparent;}


	
img.logosecure {width: 270px;}


.w50{width: 28px;min-width: 28px!important;text-align: center;font-weight: bold;padding: 2px!important;vertical-align: middle;}
.w60{width: 60px!important;}

.w70{width: 64px!important;min-width: 50px!important;}

.w100{ width: 110px!important;}
.w200{ width: 200px!important;}
.w300{ width: 300px!important;}
.w1000{ width: 100%}
.w500{ width: 500px!important;}
.w800{ width: 800px!important;}
.w1200{ width: 1200px}
.right{float:right}

aside {text-align: center;font-size: 15px;line-height: 15px;filter: opacity(0.9);}

gre{padding-right: 2px;text-align: right;}
ora{text-align: center;}
ver{padding-left: 3px;text-align: left;}

span.lesdates {
    display: inline-block;
    margin: 12px 0px;
}span.lesdates input {    padding: 3px;
    height: 15px;
    margin: 2px -1px;
    border-radius: 0;}span.lesdates input[type="text"] { border-radius: 4px 0 0 4px;}span.lesdates input[type="date"] { border-radius: 0 4px 4px 0;}

.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;
width: 530px;
    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 */
#form_ajout .select, #form_ajout .input,.select {
    border: 1px solid var(--couleur1);
    border-radius: 4px;
    padding: 4px;
    color: var(--couleur1);
    font-weight: bold;    min-width: 90px;text-align: center;

}
.input {
    width: 70px;
    min-width: 10px;
}
.ptbt {    color: var(--couleur1);   cursor: pointer;    font-size: 14px;}.ptbt :hover{ color: var(--couleur2);}

#body_ind table {
    width: 100%;
    border-spacing: 0px;
    border-collapse: collapse;
}
th.jouractu,a.jouractu{ color: var(--couleur2);}
th {padding: 3px 0 3px 0;
    font-size: 16px;
    background: var(--couleur3);
    border-top: 5px solid var(--couleur1);}
td {padding: 5px ;border: 1px solid #00000026;   text-align: center;}
td.occup {
    cursor: help;
    text-align: left;
    contain: layout;    filter: opacity(0.9);
    vertical-align: baseline;}.occup:hover {    filter: opacity(1);
    box-shadow: inset 0px 0px 0px 1px #00000059;}
.trentete td {font-weight: bold;width: 2%;font-size: 12px;}

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

#quelmsg{width: 200px;height:100px}
#val_quelheuredeb{width:30px}
#val_quelpersonnel{width:60px}
#val_quelmateriel{width:120px}
#val_quelmsg{width:500px}
#val_quelpersonnel,#val_quelmateriel { text-transform: uppercase;}
.colonne1 {font-weight: bold;
cursor: help;text-wrap: nowrap;
font-size: 14px;
letter-spacing: -0.05em;}

.cellhover i{
position: absolute;
margin-left: -15px;
font-size: 11px;    line-height: 100%;

}
.occup b{    position: absolute;
    margin-left: -2px;
    letter-spacing: -0.05em;
    max-width: 84%;
    overflow-x: hidden;
    white-space: nowrap;
    font-size: 13px;}
.occup i {
    filter: opacity(0.9);
    font-weight: normal;
}
td.pair {
background: var(--couleur3);;
}

.cellhover{ background-color: var(--couleur1)!important;color:#fff;cursor:pointer;vertical-align:middle}
.celldeb{ background-color: var(--couleur1)!important;color:#fff;}










/********************pour colorbox*/
#cMd{border-radius: 30px;display: none;height: 25px;margin: 0;padding: 2px;position: absolute;width: 25px;z-index: 99999;background: #fff;color: #000;}
#cboxBottomRight,#cboxBottomCenter,#cboxTopRight,#cboxTopCenter,#cboxTopLeft,#cboxMiddleRight,#cboxMiddleLeft,#cboxTitle{display: none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;border-radius: 9px;cursor: e-resize!important;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;font-size: 17px;overflow: visible!important;letter-spacing: -0.03em;}
#cboxOverlay {   top: 0px;  background: #cccccc78}
#cboxCurrent{position:absolute; left:53px; color:#999;}
#cboxContent{position:relative; border-radius: 4px;padding: 20px;text-align: center;background:#d6d6e5;padding:15px;  border: 3px solid var(--couleur1);;box-shadow: 5px 5px 5px #00000047;}
#cboxLoadedContent{letter-spacing: normal;line-height: 27px;}

button#cboxClose {    top: -12px;
    cursor: pointer;
    right: -12px;
    position: absolute;
    width: 23px;
    height: 23px;
    font-weight: normal;
    color: #555;
    border-radius: 100%;
    line-height: 23px;
    background: var(--couleur1);
    color: #fff;
    border: none;
    font-size: 10px;}

obj {position: absolute;
    top: -15px;
    background: var(--couleur1);
    padding: 1px 8px 1px;
    border-radius: 22px;
    color: #fff;
    font-weight: normal;
    left: 6px;
    font-size: 14px;
    letter-spacing: normal;
    line-height: 24px;}

#toTop{cursor: pointer;color: var(--couleur1);position: fixed;bottom: 4%;right: 5%;z-index: 1000;border-radius: 100%;font-size: 43px;}
footer {margin: 100px 15%;border-top: 1px solid var(--couleurtransp);padding-top: 10px;text-align: center;display: block;font-size: 15px;color: #666;}footer a { text-decoration: none; font-size: 12px;}

input#imp {background: var(--couleur1);border: 4px double #fff;border-radius: 4px;padding: 3px;color: #fff;cursor: pointer;}
.btimpcours {float: right;margin-top: -55px;}












@media (max-width: 1650px){
article{margin:40px 8%;}
footer{margin:90px 8%;}
h9 {padding: 10px 0 10px 11%;}
}



@media (max-width: 1450px){

article{margin:40px 2%;}
footer{margin:10px 2%;font-size: 12px;}
.bt_nivo1, .bt_nivo2{ padding: 0px 12px;font-size: 15px;}


}


@media (max-width: 1025px){


article{font-size:16px;top:110px }
h2{font-size: 21px;}
.bt_nivo1{font-size: 14px;padding:0 7px;}
h1{font-size: 30px;}
h9 { padding: 10px 0 10px 3%;}
span#colonnegauche {  width: 26%;}
span#colonnedroite {   width: 70%;}


}




@media (max-width: 800px){
	img#logo {
position: absolute;
height: 20px;
top: 0px;
left: 50%;
width: 100px;
margin-left: -50px;
}


.label_profil{display:block;border: 1px solid var(--couleurtransp);font-size: 15px;margin-bottom: 9px; }

.bt_nivo1{font-size: 21px;width: 32px;padding-top: 4px;overflow: hidden;display: inline-block;}
h1 {font-size: 29px;letter-spacing: -0.05em!important;}

.bt_save{margin:10px 0}

}



@media (max-width: 530px){
img.logosecure {width: 70%;margin: 22px;}
.w200,.w300{ width: 82%!important;}


}



@media print {
article{margin:0px;}
}