@charset "UTF-8";

	:root{
	  		--couleur-principale: #efefef;
	  		--couleur-secondaire: #295f8e;
	  		--couleur-secondaire: #545252;
	  		--couleur-secondaire-transparent: #54525270;
	  		--couleur-blanc: #FFFFFF;
	  		--couleur-blanc-fonce: #FAFAFA;
	  		--couleur-gris: #ededed;
	  		--couleur-gris-fonce: #999999;
	  		--couleur-gris-clair: #efefef;
	  		--couleur-noir-transparent: rgba(0,0,0,0.5);
	  		
	  		--couleur-bleu-transparent: rgba(19,130,197,0.03);
	  		
	  		--couleur-violet: #4e385c;
	  		--couleur-jaune: #fce47a;
	  		--couleur-rouge: #FF1111;
	  		--couleur-vert: #5CD754;
	  		--couleur-vert-clair: #A3E8C7;
	  		--couleur-orange: #f6a619;
	  		
	  		--couleur-bleu-fonce: #295f8e;
	  		--couleur-bleu-clair: #1382c5;
	  		
	  		--couleur-texte-clair: #FFFFFF;
	  		--couleur-texte-fonce: #3a3a3a;
		}

* {box-sizing: border-box;}	

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="w_"] {
  float: left;
}

body {
	border:0px;
	padding:0px;
	margin:0px;
	font-family:"Arial", "Open Sans";
	color: var(--couleur-secondaire);
}

body, html {
	height: 100%;
}

main{
	padding: 0;
}

div{
	padding: 5px;
}

a, a:visited{
	text-decoration: none;
	color:var(--couleur-texte-fonce);
}

ul, li{
	list-style:none;
}

li{
	padding: 5px;
}


input{
	border: 1px solid var(--couleur-gris-fonce);
}

select{
	color:var(--couleur-secondaire);
}

option{
	color:var(--couleur-secondaire);
}

footer{
	background-color: var(--couleur-bleu-fonce);
	color: var(--couleur-blanc);
  	position: absolute;
  	bottom: 0;
  	width: 50%;
}

.width_100{width: 100%;}
.width_50{width: 50%;}
.width_70{width: 70%;}
.width_30{width: 30%;}

.input_width_100{width: 100%;}
.input_width_90{width: 90%;}
.input_width_80{width: 80%;}
.input_width_70{width: 70%;}
.input_width_20{width: 20%;}
.input_width_30{width: 30%;}

.button_yellow{
	background-color: #ffd754;
	border: none;
	padding: 10px 24px;
	border-radius: 4px;
	color:var(--couleur-texte-fonce);
	cursor: pointer; 
}

.button_etat_light{
	border: none;
	margin: 0px 5px;
	border-radius: 4px;
	color:var(--couleur-texte-fonce);
	cursor: pointer; 
}

.button_yellow:active{
	transform: translate(2px, 2px);
}

.mdp_valide{
	border: 2px solid var(--couleur-vert);
}

.mdp_invalide{
  border: 2px solid var(--couleur-rouge);
}

.fond {
	background: no-repeat center url("../images/fond_test2.jpg");
	background-size: cover;
}

.max_width{
	max-width: 330px;
}

.border_bottom{
	border-bottom: 1px solid var(--couleur-secondaire-transparent); 
}

.popover_content {
  visibility: hidden;
  position: absolute;
  transform: translate(0, 10px);
  background-color: #bfbfbf;
  padding: 1.5rem;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  width: 30%;
}

.popover_wrapper:active .popover_content {
  z-index: 10;
  visibility: visible;
  transform: translate(250px, -10px);
}

.encadre_entete {
	padding: 0;
	position: sticky;
	position: -webkit-sticky;
	top: 0;
	z-index: 1;
	background-color: white;
	box-shadow: 0px 2px 3px var(--couleur-secondaire-transparent);
}

.overflow_hidden{
	overflow: hidden;
}

.erreur_connexion{
	/* background-color: #FFF2F2;
	border: 1px solid #F2DADA; */
	color: #A82A30; 
	font-weight: bold; 
}

.container {width:40%; margin: auto;}
.container_50 {width:50%; margin: auto;}
.container_70 {width:70%; margin: auto;}
.container_90 {width:490%; margin: auto;}
.position_relative {position:relative;}
.position_absolute {position:absolute;}
.position_fixe {position:fixed;}
.largeur_100{width:100%;}
.flex_container{display :flex;}
.flex_container_center{display :flex; justify-content:center;}
.flex_container_center_item{display:flex;align-items:center;}
.texte_fonce{color:var(--couleur-texte-fonce);}

.display_none{display:none;}
.float_left{float: left;}
.float_right{float: right;}
.clear_right{clear: right;}
.clear_both{clear: both;}

.flex_grow{flex-grow: 1;}

.texte_0_7_em{font-size:0.7em;}
.texte_0_8_em{font-size:0.8em;}		
.texte_0_9_em{font-size:0.9em;}
.texte_1_0_em{font-size:1em;}
.texte_1_05_em{font-size:1.05em;}
.texte_1_1_em{font-size:1.1em;}
.texte_1_2_em{font-size:1.2em;}
.texte_1_3_em{font-size:1.3em;}
.texte_1_5_em{font-size:1.5em;}
.texte_1_6_em{font-size:1.6em;}
.texte_1_7_em{font-size:1.7em;}
.texte_2_em{font-size:2em;}
.texte_3_em{font-size:3em;}

.text_align_center{text-align:center;}
.text_align_right{text-align:right;}
.text_align_end{text-align:end;}

.word_break{word-break:break-all;}

.font_family_date_heure{
	font-family:"Arial", "Open Sans";
	color: var(--couleur-secondaire);
}

.font_style_italic{font-style:italic;}

a.couleur_blanc{color:#ffffff;}

.titre_graph{
	text-align:center;
	padding: 5px;
}

.content_version{
	position: absolute;
	bottom : 5px;
	color: white;
	width: 100%;
}

.version{
	text-align:center;
	font-size:0.9em;
}

.expire{
	font-style: italic;
	color: #b1b1b1;
}


.password-toggle-icon{
  	position: relative;
  	left: -22px;
  	top: 2px;
  	width: 0%;
}

.login{
	padding: 10px 0 0 5px;
}

.menu {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size:0.9em;
	
}

.menu .item {
	padding: 10px 15px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.menu .item a {
	text-decoration: none;
	color: white;
	display: block;
}


.menu .item:hover{
	background-color : #1382c5;
}

.menu .item.actif{
	background-color : #1382c5;
}

.pointer{
	cursor: pointer;
}

/* Grille en douze colonnes */
	.w_1_12 {width:8.33%;}
	.w_2_12 {width:16.66%;}
	.w_3_12 {width:25%;}
	.w_3_12_100 {width:25%;}
	.w_4_12 {width:33.33%;}
	.w_4_12_100 {width:33.33%;}
	.w_5_12 {width:41.66%;}
	.w_6_12 {width:50%;}
	.w_7_12 {width:58.33%;}
	.w_8_12 {width:66.66%;}
	.w_9_12 {width:75%;}
	.w_9_12_100 {width:100%;}
	.w_10_12 {width:83.33%;}
	.w_11_12 {width:91.66%;}
	.w_12_12 {width:100%;}
		
	/* Grille en 16 colonnes */	
	.w_1_16 {width:6.25%;}
	.w_2_16 {width:12.5%;}
	.w_3_16 {width:18.75%;}
	.w_4_16 {width:25%;}
	.w_5_16 {width:31.25%;}
	.w_8_16 {width:50%;}
	.w_16_16 {width:100%;}
	
	.w_0_5_24  {width:2.8%;}
	.w_1_24 {width:4.16%;}
	.w_2_24 {width:8.32%;}
	.w_3_24 {width:12.5%;}
	.w_4_24 {width:16.66%;}
	.w_5_24 {width:20.83%;}
	.w_6_24 {width:25%;}
	.w_7_24 {width:29.16%;}
	.w_8_24 {width:33.33%;}
	.w_12_24 {width:50%;}
	.w_16_24 {width:66.66%;}
	.w_20_24 {width:83.33%;}
	.w_24_24 {width:100%;}
	
	.pos_1_12 {left:8.33%;}
	.pos_2_12 {left:16.66%;}
	.pos_3_12 {left:25%;}
	.pos_4_12 {left:33.33%;}
	.pos_5_12 {left:41.66%;}
	.pos_6_12 {left:50%;}
	.pos_7_12 {left:58.33%;}
	.pos_8_12 {left:66.66%;}
	.pos_9_12 {left:75%;}
	.pos_10_12 {left:83.33%;}
	.pos_11_12 {left:91.66%;}
	.pos_12_12 {left:100%;}
		

/* Ecran entre moyen et grand : portable*/
@media screen and (max-width: 1500px) and (min-width: 1024px) {
	
	.wm_0{display:none;}
	
	.wm_0_5_16 {width:3.12%;}
	.wm_1_16 {width:6.25%;}
	.wm_2_16 {width:12.5%;}
	.wm_3_16 {width:18.75%;}
	.wm_4_16 {width:25%;}
	.wm_5_16 {width:31.25%;}
	.wm_8_16 {width:50%;}
	.wm_16_16 {width:100%;}
	
	.wm_1_12 {width:8.33%;}
	.wm_2_12 {width:16.66%;}
	.wm_3_12 {width:25%;}
	.wm_3_12_100 {width:25%;}
	.wm_4_12 {width:33.33%;}
	.wm_4_12_100 {width:33.33%;}
	.wm_5_12 {width:41.66%;}
	.wm_6_12 {width:50%;}
	.wm_7_12 {width:58.33%;}
	.wm_8_12 {width:66.66%;}
	.wm_9_12 {width:75%;}
	.wm_9_12_100 {width:100%;}
	.wm_10_12 {width:83.33%;}
	.wm_11_12 {width:91.66%;}
	.wm_12_12 {width:100%;}

}

/* Ecran moyen : portable, tablette*/
@media screen and (max-width: 1024px) and (min-width: 768px) {
	
	.m_0{display:none;}
	
	.m_3_12{width:25%;}
	.m_4_12{width:33.33%;}
	.m_6_12{width:50%;}
	.m_8_12{width:66.66%;}
	.m_9_12{width:75%;}
	.m_12_12{width:100%;}
	
	/* Grille en 16 colonnes */	
	.m_1_16{width:6.25%;}
	.m_2_16{width:12.5%;}
	.m_3_16{width:18.75%;}
	.m_4_16{width:25%;}
	.m_5_16{width:31.25%;}

	
	.container_echange{width:90%;}		
	.only_mobile{display:none;}
	
	.container_graph{
		width: 200px;
	}	
}

/* Téléphone et tablettes verticales */
@media screen and (max-width: 768px) {
	
	/* Directive responsive pour adapter à la lecture sur portable */
	
	.s_0{display:none;}
	
	.s_3_12{width:25%;}
	.s_4_12{width:33.33%;}
	.s_6_12{width:50%;}
	.s_8_12{width:66.66%;}
	.s_12_12{width:100%;}
	
	.s_3_16{width:18.75%;}
	.s_4_16{width:25%;}
	.s_5_16{width:31.25;}
	
	.container_echange{width:90%;}
	
	.container_graph{
		display: none;
	}
	
	.content_table{
		width:100%;
	}
	
	footer{
		bottom:auto;
	}
				
	.mobile_nodisplay {display:none;}
	.only_mobile{display:block;}
		
}

/* Impression */
@media print {
	nav {display:none;}
	main {width: 100%;margin-left:0;}
	
	.encadre_entete {
	padding: 0;
	position: static;
	position: -webkit-static;
	top: 0;
	z-index: 1;
	background-color: white;
	box-shadow: 0px 2px 3px var(--couleur-secondaire-transparent);
}
	
	.p_12_12{width:100%;}
}