font{font-family :Verdana;font-size: 11px;}
a{font-family :Verdana;font-size: 12px; FONT-WEIGHT: bold; COLOR: #0000FF; TEXT-DECORATION: none;}
a:hover {FONT-WEIGHT: bold;TEXT-DECORATION: underline;COLOR: #FF0000;}
.a_petit{font-family :Verdana;font-size: 9px; FONT-WEIGHT: bold; COLOR: #0000FF; TEXT-DECORATION: none;}
h4{font-family :Verdana;font-size: 16px;TEXT-DECORATION:underline; color: #0000FF; font-weight: bold;}
p {font-family :Verdana;font-size: 12px; text-align: justify;}
fieldset{font-family :Verdana;font-size: 12px; border:#0000FF 1px solid; ; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; width: auto; margin-left: auto; margin-right: auto;}
legend{FONT-WEIGHT: bold;}
td{font-family :Verdana;font-size: 12px;text-align: justify;}
ul,li {font-family :Verdana;font-size: 12px; text-align: justify;}

.table_creer{border-collapse: collapse; width: 100%;}
.table_normal{border-collapse: collapse; width: 100%; page-break-inside: avoid;}
.table_normal_eleve{border-collapse: collapse; width: 100%; position: relative; top:-100px;}
.td_normal{border: 1px solid black;font-family :Verdana;font-size: 12px; height: 35px; text-align: center;padding: 3px; }
.td_normal_impr_ss_h{border-left: 1px solid black;border-top: 1px solid black;border-right: 1px solid black;font-family :Verdana;font-size: 12px; height: 35px; text-align: center;padding: 3px;}
.td_normal_align_left{border: 1px solid black;font-family :Verdana;font-size: 12px; height: 35px;padding: 3px;}
.td_normal_align_left_small{border: 1px solid black;font-family :Verdana;font-size: 12px; height: 30px; padding: 5px;}
.td_normal_align_left_small_g{border-top: 1px solid black; border-bottom:1px solid black; border-right: 1px solid #cacaca; font-family :Verdana;font-size: 12px; height: 30px;}
.td_normal_align_left_small_g_d{border-top: 1px solid black; border-bottom:1px solid black; border-right: 1px solid black; font-family :Verdana;font-size: 12px; height: 30px;}
.td_normal_ss_h{border: 1px solid black;font-family :Verdana;font-size: 12px; text-align: right; padding-right: 3px;}
.td_fi{border: 1px solid black;font-family :Verdana;font-size: 12px; text-align: center; padding:2px;}
.td_fi_align_left{border: 1px solid black;font-family :Verdana;font-size: 12px; padding:2px;}
.td_comptence{border: 1px solid black;font-family :Verdana;font-size: 12px; height: 30px; text-align: center;}
.td_fond_vert{border: 1px solid black;font-family :Verdana;font-size: 11px; height: 20px; text-align: center; background-color:#339900;}
.td_fond_blanc{border: 1px solid black;font-family :Verdana;font-size: 11px; height: 20px; text-align: center; background-color:#FFFFFF;}
.td_fond_blanc_align_left{border: 1px solid black;font-family :Verdana;font-size: 11px; height: 20px; background-color:#FFFFFF; padding: 5px;}
.td_fond_bleu{border: 1px solid black;font-family :Verdana;font-size: 11px; height: 20px; text-align: center; background-color:#33CCFF;}
.td_fond_noir{border: 1px solid black;font-family :Verdana;font-size: 11px; height: 20px; text-align: center; background-color:#000000;}
.td_fond_rouge{border: 1px solid black;font-family :Verdana;font-size: 11px; height: 20px; text-align: center; background-color:#FF0000;}
.td_fond_violet{border: 1px solid black;font-family :Verdana;font-size: 11px; height: 20px; text-align: center; background-color:#551A8B;}

.pil_acvl{padding: 5px;margin: 3px;line-height: 1;font-family :Verdana;font-size: 11px;FONT-WEIGHT: bold;text-align: center;color: #ffffff;background-color: #3336FF;-moz-border-radius: 30px;-webkit-border-radius: 30px;border-radius: 30px;}
.pil_ffa{padding: 5px;margin: 3px;line-height: 1;font-family :Verdana;font-size: 11px;FONT-WEIGHT: bold;text-align: center;color: #ffffff;background-color: #FF7733;-moz-border-radius: 30px;-webkit-border-radius: 30px;border-radius: 30px;}
.pil_ml{padding: 5px;margin: 3px;line-height: 1;font-family :Verdana;font-size: 11px;FONT-WEIGHT: bold;text-align: center;color: #ffffff;background-color: #0D8412;-moz-border-radius: 30px;-webkit-border-radius: 30px;border-radius: 30px;}
.pil_voltige{padding: 5px;margin: 3px;line-height: 1;font-family :Verdana;font-size: 11px;FONT-WEIGHT: bold;text-align: center;color: #ffffff;background-color: #AC33FF;-moz-border-radius: 30px;-webkit-border-radius: 30px;border-radius: 30px;}
.ml_cd{padding: 5px;margin: 3px;line-height: 1;font-family :Verdana;font-size: 11px;FONT-WEIGHT: bold;text-align: center;color: #ffffff;background-color: #840D0D;-moz-border-radius: 30px;-webkit-border-radius: 30px;border-radius: 30px;}
.ml_test{padding: 5px;margin: 3px;line-height: 1;font-family :Verdana;font-size: 11px;FONT-WEIGHT: bold;text-align: center;color: #ffffff;background-color: #000000;-moz-border-radius: 30px;-webkit-border-radius: 30px;border-radius: 30px;}
.pil_fi{padding: 5px;margin: 3px;line-height: 1;font-family :Verdana;font-size: 11px;FONT-WEIGHT: bold;text-align: center;color: #ffffff;background-color: #3E3E3E;-moz-border-radius: 30px;-webkit-border-radius: 30px;border-radius: 30px;}
.pil_eleve{padding: 5px;margin: 3px;line-height: 1;font-family :Verdana;font-size: 11px;FONT-WEIGHT: bold;text-align: center;color: #ffffff;background-color: #00ABC6;-moz-border-radius: 30px;-webkit-border-radius: 30px;border-radius: 30px;}
.pil_ml_m{padding: 5px;margin: 3px;line-height: 1;font-family :Verdana;font-size: 11px;FONT-WEIGHT: bold;color: #ffffff;background-color: #0D8412;-moz-border-radius: 30px;-webkit-border-radius: 30px;border-radius: 30px;}
.pil_voltige_m{padding: 5px;margin: 3px;line-height: 1;font-family :Verdana;font-size: 11px;FONT-WEIGHT: bold;color: #ffffff;background-color: #AC33FF;-moz-border-radius: 30px;-webkit-border-radius: 30px;border-radius: 30px;}
.ml_cd_m{padding: 5px;margin: 3px;line-height: 1;font-family :Verdana;font-size: 11px;FONT-WEIGHT: bold;color: #ffffff;background-color: #840D0D;-moz-border-radius: 30px;-webkit-border-radius: 30px;border-radius: 30px;}
.ml_test_m{padding: 5px;margin: 3px;line-height: 1;font-family :Verdana;font-size: 11px;FONT-WEIGHT: bold;color: #ffffff;background-color: #000000;-moz-border-radius: 30px;-webkit-border-radius: 30px;border-radius: 30px;}

.message{paddding-left: 5px;padding-right: 5px;padding-bottom: 5px;padding-top: 5px;border-spacing: 0px;width: 500px;float:center;}
td.message_titre{FONT-SIZE: 9pt; FONT-FAMILY: Verdana; FONT-WEIGHT: bold;text-align: center; color: #ffffff;BORDER: #000000 1px solid;height: 35px;vertical-align: middle;}
td.message_corp{FONT-SIZE: 9pt; FONT-FAMILY: Verdana; BORDER-right: #000000 1px solid;BORDER-left: #000000 1px solid;BORDER-bottom: #000000 1px solid;height: 35px;vertical-align: middle;}

.hr_detail_form{border-top: 1px dashed #8c8b8b; width: 95%;}

.add_textarea{font-family :Verdana;font-size: 12px; width:98%; height:100px;}
.input_task{font-family :Verdana;font-size: 12px; width:100%; height:25px;}
.td_formation_left{border-left: 1px solid #808080;}
.td_mvt{border: 1px dashed #808080; text-align: center;}
.td_mvt_bas{border-left: 1px dashed #808080; border-top: 1px dashed #808080; border-right: 1px dashed #808080;border-bottom: 1px solid black; text-align: center;}

.fieldset_500{width: 500px; font-family :Verdana;font-size: 12px; border:#0000FF 1px solid; ; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; width: 95%;margin-left: auto; margin-right: auto;}
.div_menu{position: relative; top: -100px; border:#0000FF 1px solid; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;}
.div_fi{position: relative; top: -100px; left:20px; border:#0000FF 1px solid; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; width: 100%;}
.div_ct{position: relative; top: -100px; border:#0000FF 1px solid; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; width: 100%;}
/* Si besoin de ralonger : augmenter le width et bouger les margin*/
div.vertical{ margin-left: -47px; margin-top: -51px; position: absolute; width: 200px; transform: rotate(-65deg);}
th.vertical{ width: 20px; height: 35px; line-height: 14px; padding-bottom: 30px; text-align: left; font-family :Verdana; font-size: 11px;}

[data-tip] {position: relative; cursor: help; border-bottom: 1px dotted #aaa;}
[data-tip]:hover:after,
[data-tip]:focus:after { content: attr(data-tip); position: absolute; top: 1.5em;left: -10px;white-space: nowrap;padding: 5px 10px;background: maroon; color: #fff;	border-radius: 10px; z-index: 1; -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, .2);}
[data-tip]:focus {outline: none;}
[data-tip]:hover:before,
[data-tip]:focus:before {content: "▲";position: absolute; top: .4em; left: 22px; font-size: 30px; color: maroon;}

[data-tip-eleve] {position: relative; cursor: help; border-bottom: 1px dotted #aaa;}
[data-tip-eleve]:hover:after,
[data-tip-eleve]:focus:after { content: attr(data-tip-eleve); position: absolute; top: 1.5em;left: -550px;white-space: nowrap;padding: 5px 10px;background: maroon; color: #fff;	border-radius: 10px; z-index: 1; -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, .2);}
[data-tip-eleve]:focus {outline: none;}
[data-tip-eleve]:hover:before,
[data-tip-eleve]:focus:before {content: "▲";position: absolute; top: .4em; left: 22px; font-size: 30px; color: maroon;}

.box { position: relative; top: -4px;}
.box select {background-color: #0000ff; color: white; padding: 6px; width: 80px; border: none; font-size: 20px; -webkit-appearance: button; appearance: button; outline: none;}
.box::before { content: "\f13a"; font-family: Verdana; position: absolute; top: 0; right: 0; width: 20%; height: 100%; text-align: center;  font-size: 24px; line-height: 35px; color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.1); pointer-events: none;}
.box:hover::before { color: rgba(255, 255, 255, 0.6); background-color: rgba(255, 255, 255, 0.2);}
.box select option {  padding: 30px;}

.select-items div:hover, .same-as-selected { background-color: rgba(0, 0, 0, 0.1);}

#progress {width: 100px; border: 1px solid black; position: relative; padding: 2px; margin-left: auto; margin-right: auto;}

.conteneur {position: relative; /* Pour que l'aperçu se positionne correctement par rapport à son contenur */display: inline-block; /* Pour que le conteneur fasse bien la taille de son contenu et pas plus */}
.div_hover {display: none;position: absolute;width: 700px;height: auto;border: #FF0000 3px solid;background-color: #FCFCFC;z-index: 1;border-radius: 20px;}

.a_hover:hover + .div_hover {display: block;}
.img_annuaire, .img_annuaire_note {max-width: 30px; height: auto; }
.img_annuaire_note {float: left;top: 10px; margin-right: 5px;}

.point_vert {width: 20px;height: 20px;border-radius: 10px;background: green;}
.point_rouge {width: 20px;height: 20px;border-radius: 10px;background: red;}

.overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 10ms; visibility: hidden; opacity: 0; z-index: 1;}
.overlay:target { visibility: visible; opacity: 1;}
.popup { margin: 70px auto; padding: 20px; background: #fff; border-radius: 5px; width: 850px; position: relative; transition: all 5s ease-in-out;}
.popup h2 { margin-top: 0; color: #333; font-family: Tahoma, Arial, sans-serif;}
.popup .close { position: absolute; top: 20px; right: 30px; transition: all 200ms; font-size: 30px; font-weight: bold; text-decoration: none; color: #333;}
.popup .close:hover { color: #06D85F;}
.popup .content { max-height: 30%;}