/* Définition des polices personnalisées */

@font-face 
{
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('polices//MaterialIcons-Regular.eot'); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url('polices/MaterialIcons-Regular.woff2') format('woff2'),
       url('polices/MaterialIcons-Regular.woff') format('woff'),
       url('polices/MaterialIcons-Regular.ttf') format('truetype');
}



/* Eléments principaux de la page */

html {
  height: 100%;
}

body
{
	font-family:'Segoe UI','Roboto',sans-serif;
    color: #181818;
	margin: 0;
	padding: 0;
	background-color:#B1C3D3;
	 
	display: flex;
	flex-direction: column;
	min-height: 100%;/*
	display: grid;
	grid-template-rows: 1fr auto;*/
}

*
{
	box-sizing: border-box; 
}



.CONTENT {
  /* flex: 1 0 auto; */
  flex: 1 0 auto;
}


.titlegdi {
	float: left;
	display: block;
	color: #f2f2f2;
	text-align: center;
	padding: 8px 16px;
	text-decoration: none;
	font-size: 0.9em;	
	background-color: #0078d7;
	border-right:1px solid #000000;	
}


/* ------------------------------------------------------------------------------------------------------------------------------- */
/* 						                                      PANEL 100%   		  	 			  		                           */
/* ------------------------------------------------------------------------------------------------------------------------------- */
/*
.WSwindow, .WSwindow50, .WSwindow75
{
	margin: auto;
	width: 95%; 
	margin-top : 16px;
    margin-bottom: 100px;	
	vertical-align: top;
	
    background-color: #F5F5F7;
	border-radius:15px;
	box-shadow: 0px 10px 10px #565656;
	
}

.WSwindow75
{
	width:75%;
}

.WSwindow50
{
	width:50%;
}

.WSwindow_titlebar, .WSwindow_titlebar_blue	
{
	text-align: left;
    background-color: #60204B;
	color:#F7F9FA;
	border-top-left-radius:15px;
	border-top-right-radius:15px;
}

.WSwindow_titlebar_blue	
{
    background-color: #FF00FF;
	
	background-color: #80BDF3;
	background-image: linear-gradient(#6688C1, #5983A8);
}



*/


.wintext01 {
	display:inline-block;
	text-decoration:none;
	font-size:1.2em;
	font-weight:bold;
	color:#FF0000;
	padding:18px;
	
	padding-bottom:8px;
}

.wintext02 {
	display:inline-block;

	text-decoration:none;
	font-size:1.2em;
	color:#000000;
	padding:18px;
	padding-top:8px;
}


/*
.container 
	border-radius: 5px;
	background-color: #F5F5F7;

	padding: 20px;
	box-sizing: border-box; 
	
	margin-top:8px;
	margin-bottom:16px;
	padding-top:0px;
}
*/

.uscol-80,.uscol-20 /*HOY*/
{
	float: left;
	margin-top: 0px;
	box-sizing: border-box; 
}
.uscol-80 {/*HOY*/
	width: 80%;
}
.uscol-20 {/*HOY*/
	width: 20%;
}
		
.col-2, .col-3, .col-4, .col-5, .col-10, .col-13, .col-15, .col-22, .col-23,.col-25, .col-30, .col-32, .col-34, .col-41,.col-45, .col-49, .col-51,  .col-53, .col-60, .col-64, .col-70, .col-73, .col-85, .col-81 
{
	float: left;
	margin-top: 6px;
	box-sizing: border-box; 
}
	
.col-2 {
	width: 2%;
}
.col-3 {
	width: 3%; 
}

.col-4 {
	width: 4%;
}
.col-5 {
	width: 5%;
}
.col-10 {
	width: 10%;
}
.col-13 {
	width: 13%;
}
.col-15 {
	width: 15%;
}

.col-22 {
	width: 22%;
}
.col-23 {
	width: 23%;
}
.col-25 {
	width: 25%;
}
.col-30 { /*panel*/
	width: 30%;
}
.col-32 { /*panel*/
	width: 32%;
}
.col-34 { 
	width: 34%;
}
.col-41 {
	width: 41%;
}
.col-45 {
	width: 45%;
}
.col-49 {
	width: 49%;
}
.col-51 {/*panel*/
	width: 51%;
}
.col-53 {
	width: 53%;
}
.col-60 {
	width: 60%;
}
.col-64 {
	width: 64%;
}
.col-70 {
	width: 70%;
}
.col-73 {
	width: 73%;
}
.col-85 {
	width: 85%;
}
.col-81 {
	width: 81%;
}
/* Clear floats after the columns */
.row:after {
	content: "";
	display: table;
	clear: both;
}

.redtext {
	display:block;
	width : 100%;
	text-align:center;
	margin-top:8px;
	color:red;
	font-weight:bold;
}
@media screen and (max-width: 1000px)
{
	.col-2, .col-3, .col-4, .col-5, .col-13, .col-15, .col-22,.col-23, .col-25,  .col-30, .col-41,.col-49, .col-51,.col-53, .col-60, .col-64, .col-70, .col-85, label /* , input[type=submit] */
	{
		width: 100%;
		margin-top: 4px;
	}
	
	label
	{
		margin-top:8px;
	}
}


/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
/*@media screen and (max-width: 600px)
{
	.col-2, .col-3, .col-4,.col-5, .col-15, .col-22,.col-23, .col-25, .col-30, .col-41,.col-49, .col-51, .col-60, .col-70, .col-85, label, input[type=submit] 
	{
		width: 100%;
		margin-top: 4px;
	}
	
	label
	{
		margin-top:8px;
	}
	
		
	.mainpanel_100
	{	
		display:block;
		width: 100%;
	}
	
	.WSwindow
	{
		width: 100%;
	}
	.WSwindow50
	{
		width: 100%;		
	}
	.WSwindow75
	{
		width: 100%;		
	}
	
	.WSwindow_titlebar
	{
		height:auto;
		margin:0;
		width: 100%;
		background-color:#FFF000;
	}	
	.WSwindow_titlebarbtn
	{
		margin:0;
		width: 100%;
		background-color:#000FFF;
	}
	
	.WSwindow_menubar
	{
		height:auto;
		margin:0;
		width: 100%;
		background-color:#FFF00F;
	}	
	.WSwindow_label {
		margin:0;
		width: 100%;
		color: #FFFFFF;
		background-color:#000000;
	}

	.container {
		width:100%;
		display:block;
		padding: 10px;
	}
	
	.WSwindow_bottombar
	{
		border-bottom-left-radius:0px;
		border-bottom-right-radius:0px;
	}

}

*/
/* ------------------------------------------------------------------------------------------------------------------------------- */
/* 						                                         PANEL  		   	 			  		                           */
/* ------------------------------------------------------------------------------------------------------------------------------- */
/*

.WSpanel 
{
	margin: auto;
	width: 100%;
	margin-top : 2px;
    margin-bottom: 16px;	
	vertical-align: top;
	
    background-color: #FFFF00;
	border-radius:4px;
}


.WSpanel_titlebar, .WSpanel_titlebar_red, .WSpanel_titlebar_purple
{
	height : 34px;
    background-color: #A3C2F8;
	color:#000A2A;
	border-top-left-radius:4px;
	border-top-right-radius:4px;
}
.WSpanel_titlebar_red
{
    background-color: #F97465;
}
.WSpanel_titlebar_purple
{
    background-color: #CB97D5;
}


.WSpanel_label {
	display:inline-block;
	margin-top:8px;
	margin-left:8px;

	text-decoration:none;
	font-size:1em;
	font-weight:bold;
	color:#000000;
}

.WSpanel_container, .WSpanel_container_red, .WSpanel_container_purple
{
	background-color: #CDDDFF;

	padding: 8px;
	box-sizing: border-box; 
	
	margin-top:0px;
	margin-bottom:16px;
}
.WSpanel_container_red
{
	background-color: #F9CFCA;	
}
.WSpanel_container_purple
{
	background-color: #CFC4D1;	
}

*/


/* ------------------------------------------------------------------------------------------------------------------------------- */
/* 						                                   TITRE PRINCIPAL   					  		                           */
/* ------------------------------------------------------------------------------------------------------------------------------- */

































/* ------------------------------------------------------------------------------------------------------------------------------- */
/* 						                                      FLEXBOX  		  	 			    		                           */
/* ------------------------------------------------------------------------------------------------------------------------------- */




/* ------------------------------------------------------------------------------------------------------------------------------- */
/* 						                                      HEADER  		  	 			    		                           */
/* ------------------------------------------------------------------------------------------------------------------------------- */

.FXheader {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index:1000;
}	

.FXheader_menu {
  overflow: hidden;
  background-color: #333;
}

.FXheader_menu a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 8px 16px;
  text-decoration: none;
  font-size: 0.9em;
}

.FXheader_menu a:hover {
  background-color: #ddd;
  color: black;
}

.FXheader_menu a.active {
  background-color: #4CAF50;
  color: white;
}

.FXheader_menu .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .FXheader_menu a:not(:first-child) {display: none;}
  .FXheader_menu a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
	.FXheader_menu.responsive {position: relative;}
	.FXheader_menu.responsive .icon {
		position: absolute;
		right: 0;
		top: 0;
	}
	
	.FXheader_menu.responsive a {
		float: none;
		display: block;
		text-align: left;
	}
	
	.topnav02 {
		display: none;
	}

}

.FXheader_ribbon
{
	display: flex;
	justify-content:center;
	align-items: stretch;
	
	text-align: left;
    background-color: #60204B;
	color:#F7F9FA;
	
		background-color: #C3D8EC;
	background-image: linear-gradient(#EDF4F7, #C3D8EC);
	border-bottom:1px solid #5D7191;  
}

.FXheader_ribbon_left 
{
	flex-grow: 1;
}

.FXheader_ribbon_left a {
	display:inline-block;
	width : 72px;
	height : 64px;

	margin-left:6px;
	margin-top:12px;
	margin-bottom:12px;

	text-decoration:none;
	font-family:'Segoe UI','Roboto',sans-serif;
	font-size: 0.8em;
	color:#000000;
	
	border:1px solid #ADADAD;
	box-sizing: border-box;	

	background-color:#E1E1E1;
	border-color:#ADADAD;
	text-align:center;

	vertical-align: bottom;
	-webkit-transition-duration: 0.2s;
	-moz-transition-duration: 0.2s;
	transition-duration: 0.2s;	
}

.FXheader_ribbon_left a:hover
{
	background-color:#E5F1FB;
	border:1px solid #ADADAD;
	box-sizing: border-box;	
	border-color:#0078D7;
	color:#000000;
}



.FXheader_ribbon_right 
{
	flex-basis : content;
	flex-grow: 0;
	text-align:right;
	
	
 	padding:6px;

	margin-top: 8px;
    margin-right: 8px;	
	margin : 8px;
	border:1px solid #ADADAD;

	/* background-color: #DCDCDC; */
	text-decoration:none;
	text-indent:0px;	
	
	background-color: #DCDCDC;
	border-radius: 8px;
    color: black;		
}

.FXheader_ribbon_right h1 {
	font-size: 1em;
	text-indent:0px;
	margin:0;
	font-weight:400;

}
.FXheader_ribbon_right h2 {
	font-size: 1em;
	text-indent:0px;
	margin:0;	
	font-weight:200;
}
.FXheader_ribbon_right h3 {
	font-size: 0.8em;
	margin:0;
	font-weight:200;
	font-style:italic;
	text-align:right;
}

@media screen and (max-width: 1000px)
{
  .FXheader_ribbon_right
  {display: none;}

}

/* ------------------------------------------------------------------------------------------------------------------------------- */
/* 						                                MAIN PAGE - PAGE PRINCIPALE 		    		                           */
/* ------------------------------------------------------------------------------------------------------------------------------- */


.FXmainpage
{
	width: 100%;/*900px;*/
    margin: auto;
    display: inline-block;
    vertical-align: top;
	font-size: 0.8em;
	/* min-height: calc(100vh - 70px); */
}


/* ------------------------------------------------------------------------------------------------------------------------------- */
/* 						                            MAIN PAGE - WINDOW TITRE ET BOUTONS		    		                           */
/* ------------------------------------------------------------------------------------------------------------------------------- */

.FXwindow, .FXwindow50, .FXwindow75
{
	margin: auto;
	width: 95%; 
	margin-top : 16px;
    margin-bottom: 32px;	
	vertical-align: top;
	
    background-color: #F5F5F7;
	border-radius:15px;
	box-shadow: 0px 10px 10px #565656;	
}

.FXwindow75
{
	width:75%;
}

.FXwindow50
{
	width:50%;
}

.FXwindow_titlebar 
{
	display: flex;
	background-color: #333;
	justify-content:center;
	align-items: stretch;
		
	text-align: left;
    background-color: #60204B;
	color:#F7F9FA;
	border-top-left-radius:15px;
	border-top-right-radius:15px;
	
}

.FXwindow_titlebar_caption 
{
	flex-grow: 1;
		
	text-decoration: none;
    font-size: 1.1em;
    font-weight: bold;
    color: #FFFFFF;
    padding: 16px;
    padding-left: 14px;	
}

.FXwindow_titlebar_buttons 
{
	flex-basis : content;
	flex-grow: 0;
	text-align:right;
}

.FXwindow_titlebar_buttons a.FXwindow_titlebar_button
{
	display:inline-block;
	padding:9px;
	margin:9px;
	padding-top:6px;
	margin-left:2px;

	text-decoration:none;
	font-family:'Segoe UI','Roboto',sans-serif;
	font-weight:400;
	color:#FFFFFF;

	background-color:#AC8BA1;
	border-color:#63AABC;
	text-align:center;
	position:relative;
	border-radius:8px;

	-webkit-transition-duration: 0.4s;
	-moz-transition-duration: 0.4s;
	transition-duration: 0.4s;
}

.FXwindow_titlebar_buttons a.FXwindow_titlebar_button:hover
{
	background-color:#63AABC;
}

/* ------------------------------------------------------------------------------------------------------------------------------- */
/* 						                             MAIN PAGE - WINDOW CONTENU		    		                                   */
/* ------------------------------------------------------------------------------------------------------------------------------- */


/* Contenu de la fenêtre */

.FXwindow_container {  
  display: flex;
  flex-wrap: wrap;
}

.FXwindow_bigcontainer {
	width:100%;
	display:block;
	padding: 10px;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.FXwindow_side {
  flex: 15%;
  background-color: #D8D8D2;
  padding: 0px;
  overflow: hidden; /* Empêche le dépassement des flottants. */
  border-right: 1px solid #A5A1AA;
}

.FXwindow_side_buttons a {
	display:block;
	overflow: hidden; /* Empêche le dépassement des flottants. */
	padding : 8px;
	margin : 8px;
	text-decoration:none;
	font-family:'Segoe UI','Roboto',sans-serif;
	font-size: 1em;
	color:#000000;
	
	border:1px solid #ADADAD;
	box-sizing: border-box;	

	background-color:#E1E1E1;
	border-color:#ADADAD;
	text-align:center;

	vertical-align: bottom;
	-webkit-transition-duration: 0.2s;
	-moz-transition-duration: 0.2s;
	transition-duration: 0.2s;	
}

.FXwindow_side_buttons a:hover
{
	background-color:#E5F1FB;
	border:1px solid #ADADAD;
	box-sizing: border-box;	
	border-color:#0078D7;
	color:#000000;
}

.FXphotousager 
{
	width: 100%;
	padding: 12px;
	border-radius:50%;	
}

.FXbutton
{
	display:block;
	overflow: hidden; /* Empêche le dépassement des flottants. */
	padding : 8px;
	/* margin : 8px; */
	text-decoration:none;
	font-family:'Segoe UI','Roboto',sans-serif;
	font-size: 1em;
	color:#000000;
	
	border:1px solid #ADADAD;
	box-sizing: border-box;	

	background-color:#E1E1E1;
	border-color:#ADADAD;
	text-align:center;

	vertical-align: bottom;
	-webkit-transition-duration: 0.2s;
	-moz-transition-duration: 0.2s;
	transition-duration: 0.2s;	
		width : 100%;
}
.FXbutton:hover
{
	background-color:#E5F1FB;
	border:1px solid #ADADAD;
	box-sizing: border-box;	
	border-color:#0078D7;
	color:#000000;
}


/* Contenu principal de la fenêtre */

.FXwindow_main100 {
  flex: 100%;
  background-color: #F5F5F7;
  padding: 20px;
}

.FXwindow_main {
  flex: 85%;
  background-color: #F5F5F7;
  padding: 0px;
}

.FXwindow_maintoplabel 
{
	display: flex;
	background-color: #333;
	justify-content:left;
	align-items: stretch;	
	text-align: left;
	padding:0px;
	margin:0px;
	
}
.FXwindow_maintoplabel_left 
{
	flex-grow: 1;

	text-decoration: none;
    font-size: 1.1em;
    font-weight: bold;
    color: #FFFFFF;	
}

.FXwindow_maintoplabel_title {
	display: block;
    font-size: 2em;
    font-weight: bold;
	font-style:italic;
	margin:0px;
	background-color:white;
	color : #4DA8C1;
	padding:20px;
	padding-top:0.10em;
	padding-bottom:0.10em;	
}

.FXwindow_maintoplabel_subtitle {
	display: block;
    font-size: 0.83em;
    font-weight: bold;
	color : #244F5B;	
	
	margin:0px;
	background-color:white;
	padding:20px;
	padding-top:0.10em;
	padding-bottom:0.70em;	
}

.FXwindow_maintoplabel_right {
	flex-basis : content;
	flex-grow: 0;
	text-align:right;
	background-color:white;
}

.FXwindow_maintoplabel_right a.FXbutton_Left, a.FXbutton_Right
{
	display:inline-block;
	margin-top:4px;
	margin-right:4px;
	width : 40px;
	height : 40px;

	background:url(../WSimg/FXus_exit.png) no-repeat 0px 2px;
	background-color:#AC8BA1;

	border-color:#63AABC;
	text-align:center;
	/* position:relative; */
	border-radius:20px;

	-webkit-transition-duration: 0.4s;
	-moz-transition-duration: 0.4s;
	transition-duration: 0.4s;
}

.FXwindow_maintoplabel_right a.FXbutton_Left {
	background:url(../WSimg/FXus_navleft.png) no-repeat 8px 8px;	
}
.FXwindow_maintoplabel_right a.FXbutton_Right {
	background:url(../WSimg/FXus_navright.png) no-repeat 8px 8px;	
}
.FXwindow_maintoplabel_right a.FXbutton_Left:hover, a.FXbutton_Right:hover
{
	background-color:#CFE8FC;
}



/* ------------------------------------------------------------------------------------------------------------------------------- */
/* 						                        MAIN PAGE - WINDOW BARRE DE NAVIGATION		    		                           */
/* ------------------------------------------------------------------------------------------------------------------------------- */

.FXminnav {
	overflow: hidden;
	background-color: #6091BA;	/*6091BA;*/
	margin-bottom:10px;
	border-top:1px solid #436582;
	border-bottom:1px solid #436582;
}

.FXminnav a {
	float: left;
	display: block;
	color: #f2f2f2;
	text-align: center;
	padding: 8px 16px;
	text-decoration: none;
	font-size: 0.9em;
    font-size:1em;
}

.FXminnav .icon {
	display: none;
}

.FXminnav a:hover {
	background-color: #ddd;
	color: black;
}

.FXminnav a.active {
	background-color: #0078d7; /*#4CAF50;*/
	color: white;
}


@media screen and (max-width: 600px)
{
  .FXminnav a:not(:first-child) {display: none;}
  .FXminnav a.icon {
	float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) 
{
	.FXminnav.responsive {position: relative;}
	.FXminnav.responsive .icon {
		position: absolute;
		right: 0;
		top: 0;
	}
	
	.FXminnav.responsive a {
		float: none;
		display: block;
		text-align: left;
	}
}



/* ------------------------------------------------------------------------------------------------------------------------------- */
/* 						                            MAIN PAGE - WINDOW CONTAINER PANELS		    		                           */
/* ------------------------------------------------------------------------------------------------------------------------------- */


.FXwindow_container_row {  
	display: flex;
	flex-wrap: wrap;
}

.FXpanel {
	flex: 100%;
	padding:20px;
	padding-bottom : 10px;
	padding-top : 10px;
	flex-grow: 1;
}
.FXpanel_Lside, .FXpanel_Lside60 {
	flex: 50%;
	padding:10px;
	padding-left : 20px;
	flex-grow: 1;
}
.FXpanel_Rside, .FXpanel_Rside40 {
	flex: 50%;
	padding:10px;
	padding-right : 20px;
	flex-grow: 1;
}

.FXpanel_Lside60 {
	flex: 60%;
}
.FXpanel_Rside40 {
	flex: 40%;
}
.FXpanel_56 {
	flex: 56%;
	padding:10px;
	padding-right : 20px;
	flex-grow: 1;
}
.FXpanel_22 {
	flex: 22%;
	padding:10px;
	padding-right : 20px;
	flex-grow: 1;
}


.FXpanel_titlebar, .FXpanel_titlebar_red, .FXpanel_titlebar_lpurple, .FXpanel_titlebar_purple, .FXpanel_titlebar_green, .FXpanel_titlebar_yellow
{
    background-color: #A3C2F8;
	color:#000A2A;
	border-top-left-radius:4px;
	border-top-right-radius:4px;
	padding:8px;
	text-decoration:none;
	font-size:1em;
	font-weight:bold;
	color:#000000;	
	text-align:center;
}
.FXpanel_titlebar_red
{
    background-color: #F97465;
}
.FXpanel_titlebar_lpurple
{
    background-color: #CB97D5;
}
.FXpanel_titlebar_purple
{
    background-color: #F765F7;
}
.FXpanel_titlebar_green
{
    background-color: #63D858;
}
.FXpanel_titlebar_yellow
{
    background-color: #E8F765;
}

.FXpanel_container, .FXpanel_container_red, .FXpanel_container_lpurple, .FXpanel_container_purple, .FXpanel_container_green, .FXpanel_container_yellow
{
	background-color: #CDDDFF;

	padding: 8px;
	margin-top:0px;

	border-bottom-left-radius:4px;
	border-bottom-right-radius:4px;
}
.FXpanel_container_red
{
	background-color: #F9CFCA;	
}
.FXpanel_container_lpurple
{
	background-color: #CFC4D1;	
}
.FXpanel_container_purple
{
	background-color: #F7CAF7;	
}
.FXpanel_container_green
{
	background-color: #CEF7CA;	
}
.FXpanel_container_yellow
{
	background-color: #F0F4C8;	
}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 300px) {
	.FXwindow_container_row, .FXpanel, .FXwindowtop, .FXpanel_Lside, .FXpanel_Rside,  .FXpanel_Lside60, .FXpanel_Rside40 {   
		flex-direction: column;
	}
	.FXpanel {
		flex:100%;
	}
	.FXpanel_Lside, .FXpanel_Rside, .FXpanel_Lside60, .FXpanel_Rside40 { 
		flex:100%;  
		padding:20px;
	}
}



 
/* ------------------------------------------------------------------------------------------------------------------------------- */
/* 						                           MAIN PAGE - WINDOW : PIED DE PAGE		    		                           */
/* ------------------------------------------------------------------------------------------------------------------------------- */


.FXwindow_footer {
	padding : 12px;
	padding-left: 20px;
	padding-right: 20px;

	text-align: right;

	background-color: #CCCCCC;
    color: #F7F9FA;
    border-top: 1px solid #A5A1AA;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.FXwindow_formbtn
{
	display:inline-block;
	background-color: #4CADAD;
	color: white;
	padding: 12px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	/* float: right; */
	box-sizing: border-box;  
	margin-left:8px;	
	text-decoration:none;
	-webkit-transition-duration: 0.4s;
	-moz-transition-duration: 0.4s;
	transition-duration: 0.4s;	
}

.FXwindow_formbtn:hover {
	background-color: #429696;
	box-sizing: border-box;  
}

.FXwindow_minibtn
{
	display:inline-block;
	background-color: #4CADAD;
	color: white;
	padding: 6px 10px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	box-sizing: border-box;  
	margin-left:8px;	
	text-decoration:none;
	-webkit-transition-duration: 0.4s;
	-moz-transition-duration: 0.4s;
	transition-duration: 0.4s;	
}

.FXwindow_minibtn:hover {
	background-color: #429696;
	box-sizing: border-box;  
}



/* ------------------------------------------------------------------------------------------------------------------------------- */
/* 						                                       TABLEAU  		    		                                       */
/* ------------------------------------------------------------------------------------------------------------------------------- */



table.table_green, table.table_blue, table.table_red
{
	border-collapse: collapse;
	width: 100%;
	border: 1px solid #727272;
	margin-top:16px;
}



table.table_green th, table.table_green td, table.table_blue th, table.table_blue td, table.table_red th, table.table_red td 
{
	text-align: left;
	padding: 8px;

}
table.table_green td, table.table_blue td, table.table_red td
{
	cursor: pointer;
	/*background-color: #F6F6F6;*/
}

table.table_green th
{
	background-color: #27AF60;
	color: white;
}
table.table_blue th
{
	background-color: #2980B9;
	color: white;
}
table.table_red th
{
	background-color: #EA6153;
	color: white;
}

table.table_green tr, table.table_blue tr, table.table_red tr
{
	background-color: #F6F6F6;
}


table.table_green tr:nth-child(even), table.table_blue tr:nth-child(even), table.table_red tr:nth-child(even)  {background-color: #E6E6E6;}

table.table_green tr:hover {background-color: #BBE5B3;/* #98BC91*/}
table.table_blue tr:hover {background-color: #ADCADB; /*#BBB3E5;*/}
table.table_red tr:hover {background-color: #F2D5D2; /*#BBE5B3;*/}

.table_btn_update, .table_btn_delete, .table_btn_view, .table_btn_update_dsb, .table_btn_delete_dsb, .table_btn_view_dsb
{
	display:block;
	float: left;	
	width : 24px;
	height : 24px;
	background:url(../WSimg/WSupdate.png) no-repeat 3px 3px;
	/*background-color: #4CADAD;*/
	
	padding: 0px 0px;
	border: none;
	border-radius: 12px;
	cursor: pointer;

	box-sizing: border-box;  
	margin-left:2px;
	margin-right:8px;	
	text-decoration:none;
	-webkit-transition-duration: 0.4s;
	-moz-transition-duration: 0.4s;
	transition-duration: 0.4s;	
}

.table_btn_delete
{
	background:url(../WSimg/WScross.png) no-repeat 3px 3px;	
}

.table_btn_view
{
	background:url(../WSimg/WSview.png) no-repeat 3px 3px;
}

.table_btn_update_dsb
{
	background:url(../WSimg/WSgupdate.png) no-repeat 3px 3px;
	cursor: not-allowed;	
}

.table_btn_delete_dsb
{
	background:url(../WSimg/WSgcross.png) no-repeat 3px 3px;
	cursor: not-allowed;	
}

.table_btn_view_dsb
{
	background:url(../WSimg/WSgview.png) no-repeat 3px 3px;
	cursor: not-allowed;	
}

.table_btn_update:hover, .table_btn_delete:hover, .table_btn_view:hover {
	background-color: #FFFFFF;
	box-sizing: border-box;  
}


/* ------------------------------------------------------------------------------------------------------------------------------- */
/* 						                                      FORM ELEMENTS		    		                                       */
/* ------------------------------------------------------------------------------------------------------------------------------- */

input[type=text], input[type=password], input[type=date], select, textarea 
{
	width: 100%;
	padding: 6px;

	border: 1px solid #ccc;
	border-radius: 4px;
	resize: vertical;
	box-sizing: border-box;
}
/*select {
	border: 1px solid #ccc;
	border-radius: 0px;
	border-bottom-left-radius:4px;
	border-top-left-radius:4px;

}*/
select:invalid { color: gray; }



label {
	padding: 6px 6px 12px 0;
	display: inline-block;
	box-sizing: border-box;
	font-weight:bold;
	text-transform: uppercase;
}

input[type=submit] {
		/* display:inline-block; */
	background-color: #4CAF50;
	
	padding: 12px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	/* float: right; */
	box-sizing: border-box; 
	
	font-family:'Segoe UI','Roboto',sans-serif;
	font-weight:400;
	color: white;
	font-size:1em;
	
	-webkit-transition-duration: 0.4s;
	-moz-transition-duration: 0.4s;
	transition-duration: 0.4s;	
}

input[type=submit]:hover {
	background-color: #45a049;
	box-sizing: border-box;  
}



/* Style the search field */
form.frmsearch input[type=text] {
	/*padding: 10px;
  font-size: 17px;
  border: 1px solid grey;
  float: left;
  width: 80%;
  background: #f1f1f1;*/
    width: 80%;
	float: left;	
  	padding: 6px;

	border: 1px solid #ccc;
	border-radius: 4px;
	border-top-right-radius:0px;
	border-bottom-right-radius:0px;
	resize: vertical;
	box-sizing: border-box;
}

/* Style the submit button */
form.frmsearch button {
  float: left;
  width: 20%;
  padding: 6px;
  background: #2196F3;
  color: white;

  border: 1px solid grey;
  border-left: none; /* Prevent double borders */
  cursor: pointer;
}

form.frmsearch button:hover {
  background: #0b7dda;
}

/* Clear floats */
form.frmsearch::after {
  content: "";
  clear: both;
  display: table;
}


/* ------------------------------------------------------------------------------------------------------------------------------- */
/* 						                                      PIED DE PAGE		    		                                       */
/* ------------------------------------------------------------------------------------------------------------------------------- */
/*
.FXfooter
{
	display: block;

	background-color:#818FAB;
	text-align:center;	
	color:#FFFFFF;
    vertical-align: top;
	font-size: 0.9em;
	padding-top: 4px;
    padding-bottom: 10px;
	border-top:1px solid #404e65;
}

.FXfooter {
	/* flex-shrink: 0; */
    /*grid-row-start: 2;
	grid-row-end: 3; 
	
	background-color:#818FAB;
	text-align:center;	
	color:#FFFFFF;
    vertical-align: top;
	font-size: 0.9em;
	padding-top: 4px;
    padding-bottom: 10px;
	border-top:1px solid #404e65;  
	
	*/
	 /*  position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: red;
   color: white;
   text-align: center;*/
      /* background-color: red;
}
 */

.FXfooter 
{
	/* grid-row-start: 2; */
	/* grid-row-end: 3;   */
	
	flex-shrink: 0;

	background-color:#818FAB;
	text-align:center;	
	color:#FFFFFF;
    vertical-align: top;
	font-size: 0.9em;
	padding-top: 4px;
    padding-bottom: 10px;
	border-top:1px solid #404e65;  
}














/* ------------------------------------------------------------------------------------------------------------------------------- */
/* 						                                         ICONES             		    		                           */
/* ------------------------------------------------------------------------------------------------------------------------------- */


/* Icone Header */

.FXicon_menu {
	background:url(../WSimg/WSmenu02.png) no-repeat 0px 0px;
	display:block;
	width : 20px;
	height : 18px;
}



/* Icone Menu principal */

.gdimenu_logout, .gdimenu_user, .gdimenu_group, .gdimenu_actes, .gdimenu_listes, .gdimenu_documents,
.gdimenu_rapports,.gdimenu_outils,.gdimenu_useradd,.gdimenu_psante,.gdimenu_agenda,
.gdimenu_absences,.gdimenu_activite,.gdimenu_actes,
.gdimenu_cpam, .gdimenu_effectif, .gdimenu_trombi, .gdimenu_echeance, .gdimenu_stage, .gdimenu_partenaire, .gdimenu_soin, .gdimenu_extraction,
.gdimenu_explorer,.gdimenu_table,.gdimenu_reunion,.gdimenu_nuit,.gdimenu_suivi,.gdimenu_suivippa,.gdimenu_historique,.gdimenu_historiquegen,
.gdimenu_personnel, .gdimenu_personnelnew, .gdimenu_vehiculegest, .gdimenu_vehiculeent, .gdimenu_travaux, .gdimenu_listeprev, .gdimenu_listeatt, .gdimenu_dcommun 
{
	display:block;
	height:64px;
	width:100%;

}
.gdimenu_logout_dsb, .gdimenu_user_dsb, .gdimenu_group_dsb, .gdimenu_actes_dsb, .gdimenu_listes_dsb, .gdimenu_documents_dsb,
.gdimenu_rapports_dsb,.gdimenu_outils_dsb,.gdimenu_useradd_dsb,.gdimenu_psante_dsb,.gdimenu_agenda_dsb,
.gdimenu_absences_dsb,.gdimenu_activite_dsb,.gdimenu_actes_dsb,
.gdimenu_cpam_dsb, .gdimenu_effectif_dsb, .gdimenu_trombi_dsb, .gdimenu_echeance_dsb, .gdimenu_stage_dsb, .gdimenu_partenaire_dsb, .gdimenu_soin_dsb, .gdimenu_extraction_dsb,
.gdimenu_explorer_dsb,.gdimenu_table_dsb,.gdimenu_reunion_dsb,.gdimenu_nuit_dsb,.gdimenu_suivi_dsb,.gdimenu_suivippa_dsb,.gdimenu_historique_dsb,.gdimenu_historiquegen_dsb,
.gdimenu_personnel_dsb, .gdimenu_personnelnew_dsb, .gdimenu_vehiculegest_dsb, .gdimenu_vehiculeent_dsb, .gdimenu_travaux_dsb, .gdimenu_listeprev_dsb, .gdimenu_listeatt_dsb, .gdimenu_dcommun_dsb 
{	
	filter: grayscale(100%);
}


.gdimenu_logout{
	background:url(../WSimg/gdi_key_go.png) no-repeat 20px 22px;
}
.gdimenu_user{
	background:url(../WSimg/gdi_user.png) no-repeat 20px 22px;
}
.gdimenu_group{
	background:url(../WSimg/gdi_group.png) no-repeat 20px 22px;
}
.gdimenu_actes{
	background:url(../WSimg/gdi_table_heatmap.png) no-repeat 20px 22px;
}
.gdimenu_listes{
	background:url(../WSimg/gdi_list_box.png) no-repeat 20px 22px;
}
.gdimenu_documents{
	background:url(../WSimg/gdi_document_green.png) no-repeat 20px 22px;
}

.gdimenu_rapports{
	background:url(../WSimg/gdi_report.png) no-repeat 20px 22px;
}
.gdimenu_outils{
	background:url(../WSimg/gdi_statistics.png) no-repeat 20px 22px;
}
.gdimenu_useradd{
	background:url(../WSimg/gdi_user_add.png) no-repeat 20px 22px;
}
.gdimenu_psante{
	background:url(../WSimg/gdi_health.png) no-repeat 20px 22px;
}
.gdimenu_agenda{
	background:url(../WSimg/gdi_calendar.png) no-repeat 20px 22px;
}

.gdimenu_absences{
	background:url(../WSimg/gdi_date_add.png) no-repeat 20px 22px;
}
.gdimenu_activite{
	background:url(../WSimg/gdi_chart_bar.png) no-repeat 20px 22px;
}
.gdimenu_actes{
	background:url(../WSimg/gdi_receipt_stamp.png) no-repeat 20px 22px;
}

.gdimenu_cpam{
	background:url(../WSimg/gdi_magic_wand_2.png) no-repeat 20px 22px;
}
.gdimenu_effectif{
	background:url(../WSimg/gdi_chart_pie.png) no-repeat 20px 22px;
}
.gdimenu_trombi{
	background:url(../WSimg/gdi_theater.png) no-repeat 20px 22px;
}
.gdimenu_echeance{
	background:url(../WSimg/gdi_clock_error.png) no-repeat 20px 22px;
}
.gdimenu_stage{
	background:url(../WSimg/gdi_direction.png) no-repeat 20px 22px;
}
.gdimenu_partenaire{
	background:url(../WSimg/gdi_reseller_account_template.png) no-repeat 20px 22px;
}
.gdimenu_soin{
	background:url(../WSimg/gdi_pill.png) no-repeat 20px 22px;
}
.gdimenu_extraction{
	background:url(../WSimg/gdi_quota_modification.png) no-repeat 20px 22px;
}

.gdimenu_explorer{
	background:url(../WSimg/gdi_folder.png) no-repeat 20px 22px;
}
.gdimenu_table{
	background:url(../WSimg/gdi_table_analysis.png) no-repeat 20px 22px;
}
.gdimenu_reunion{
	background:url(../WSimg/gdi_reseller_programm.png) no-repeat 20px 22px;
}
.gdimenu_nuit{
	background:url(../WSimg/gdi_moon.png) no-repeat 20px 22px;
}
.gdimenu_suivi{
	background:url(../WSimg/gdi_eye.png) no-repeat 20px 22px;
}
.gdimenu_suivippa{
	background:url(../WSimg/gdi_bricks.png) no-repeat 20px 22px;
}
.gdimenu_historique{
	background:url(../WSimg/gdi_server_information.png) no-repeat 20px 22px;
}
.gdimenu_historiquegen{
	background:url(../WSimg/gdi_server_chart.png) no-repeat 20px 22px;
}

.gdimenu_personnel{
	background:url(../WSimg/gdi_reseller_account.png) no-repeat 20px 22px;
}
.gdimenu_personnelnew{
	background:url(../WSimg/gdi_reseller_account_add.png) no-repeat 20px 22px;
}
.gdimenu_vehiculegest{
	background:url(../WSimg/gdi_car.png) no-repeat 20px 22px;
}
.gdimenu_vehiculeent{
	background:url(../WSimg/gdi_bucket_truck3.png) no-repeat 20px 22px;
}
.gdimenu_travaux{
	background:url(../WSimg/gdi_server_chart.png) no-repeat 20px 22px;
}
.gdimenu_listeprev{
	background:url(../WSimg/gdi_list.png) no-repeat 20px 22px;
}
.gdimenu_listeatt{
	background:url(../WSimg/gdi_hourglass.png) no-repeat 20px 22px;
}
.gdimenu_dcommun{
	background:url(../WSimg/gdi_server_lightning.png) no-repeat 20px 22px;
}


/* Icones FXwindow_titlebar */

.FXicon_add{
	background:url(../WSimg/WSwadd.png) no-repeat 0px 2px;
	text-indent:28px;
	display:block;
}

.FXicon_cross{
	background:url(../WSimg/WSwcross.png) no-repeat 0px 2px;
	text-indent:28px;
	display:block;
}

.FXicon_update{
	background:url(../WSimg/WSwupdate.png) no-repeat 0px 2px;
	text-indent:28px;
	display:block;
}

.FXicon_return{
	background:url(../WSimg/WSreturn.png) no-repeat 0px 0px;
	text-indent:28px;
	display:block;
}

.FXicon_cantine{
	background:url(../WSimg/FXbtn_menu.png) no-repeat 0px 2px;
	text-indent:28px;
	display:block;
}

.FXicon_absence{
	background:url(../WSimg/FXbtn_abs.png) no-repeat 0px 2px;
	text-indent:28px;
	display:block;
}

/* Icones FXwindow_maintoplabel_right */

.FXicon_Edit
{
	display:inline-block;
	width : 40px;
	height : 40px;
	background:url(../WSimg/FXus_edit.png) no-repeat 8px 8px;
}

.FXicon_Exit
{
	display:inline-block;
	width : 40px;
	height : 40px;
	background:url(../WSimg/FXus_exit.png) no-repeat 8px 8px;	
}

@media screen and (max-width: 700px) 
{
	.FXheader_ribbon_left {
		text-align:center;
	}
	.FXheader_ribbon_left a {
		display:inline-block;
		width : auto;
		height:auto;
		padding:6px;
		padding-left:12px;
		padding-right:12px;		
		margin : 6px;
		border-radius: 12px;	
	}	
  
	.gdimenu_logout, .gdimenu_user, .gdimenu_group, .gdimenu_actes, .gdimenu_listes, .gdimenu_documents,
	.gdimenu_rapports,.gdimenu_outils,.gdimenu_useradd,.gdimenu_psante,.gdimenu_agenda,
	.gdimenu_absences,.gdimenu_activite,.gdimenu_actes,
	.gdimenu_cpam, .gdimenu_effectif, .gdimenu_trombi, .gdimenu_echeance, .gdimenu_stage, .gdimenu_partenaire, .gdimenu_soin, .gdimenu_extraction,
	.gdimenu_explorer,.gdimenu_table,.gdimenu_reunion,.gdimenu_nuit,.gdimenu_suivi,.gdimenu_suivippa,.gdimenu_historique,.gdimenu_historiquegen,
	.gdimenu_personnel, .gdimenu_personnelnew, .gdimenu_vehiculegest, .gdimenu_vehiculeent, .gdimenu_travaux, .gdimenu_listeprev, .gdimenu_listeatt, .gdimenu_dcommun 
	{
		background-image:none;
		height:auto;
	} 	
}



@media screen and (max-width: 700px) 
{
	.FXwindow_titlebar {   
		flex-direction: column;
		border-top-left-radius:0px;
		border-top-right-radius:0px;
	}
	.FXwindow_titlebar_buttons {
		text-align:center;
	}
	.FXwindow_titlebar_caption {
		text-align:center;
	}
	
	.FXwindow, .FXwindow50, .FXwindow75 {
		width : 100%;
		margin-top:0px;
		border-radius:0px;
		box-shadow: 0px 10px 10px #565656;	
	}
	
	.FXwindow_footer {
		border-bottom-left-radius: 0px;
		border-bottom-right-radius: 0px;
	}
	.FXwindow_side {
		flex: 100%;
		margin: auto;
		text-align: center;
	}
	.FXwindow_main {
		flex: 100%;
	}	
	.FXphotousager {
		display:inline-block;
		width: 30%;
		padding: 12px;
		border-radius: 50%;
		text-align: center;
	}
	.FXwindow_side_buttons {
		text-align:center;
	}
	.FXwindow_side_buttons a {
		display:inline-block;
		width : auto;
		height:auto;
		padding:6px;
		padding-left:12px;
		padding-right:12px;		
		margin : 6px;
		border-radius: 12px;	
	}
	
	.FXwindow_container_row {
		flex-direction: column;
	}
	.FXpanel_Lside {
		margin : 8px;
		padding: 0px;
		
	}
	.FXpanel_Rside {
		margin : 8px;
		padding: 0px;
	}
	.FXpanel {
		margin : 8px;
		padding: 0px;
	}
	
	
}

@media screen and (max-width: 500px) 
{
	.FXwindow_maintoplabel 
	{
		flex-direction: column;
	
	}
/*
	.FXwindow_maintoplabel_left 
	{
			flex: 100%;
	}
	.FXwindow_maintoplabel_right {
				flex: 100%;
	}*/
}

/* Popup container - can be anything you want */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  
  

	text-decoration:none;
	font-family:'Segoe UI','Roboto',sans-serif;
	font-size: 1em;
	color:#000000;
	
	border:1px solid #ADADAD;
	box-sizing: border-box;	

	background-color:#E1E1E1;
	border-color:#ADADAD;
	text-align:center;

	vertical-align: bottom;
	-webkit-transition-duration: 0.2s;
	-moz-transition-duration: 0.2s;
	transition-duration: 0.2s;	
		width : 100%;  
  
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}


/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 200px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 50%;
}


.hidden_panel  {
  /* visibility: hidden; */
  display :none;
    /* display :block; */
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}


.test .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}







[id^=modal] {
  display: none;
  border: 1px solid red;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  min-height: 3em;
  min-width: 5em;
  max-width: 10em;
  
  background-color: #fefefe;

  padding: 20px;
  border: 1px solid #888;
  
  
  }
/*
input[type=checkbox] {
  position: absolute;
  clip: rect(0 0 0 0);
  }*/
#modal1:target {
  display: block;
  }
#modal2:target {
  display: block;
  }

#modal3:target {
  display: block;
  }
  
[id^=modal] a {
  float: right;
}
  
 /* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  text-decoration: none;
}

.close:hover, .close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
} 
  

/* A VIRER */

/* ------------------------------------------------------------------------------------------------------------------------------- */
/* 						                        MAIN PAGE - WINDOW BARRE DE NAVIGATION		    		                           */
/* ------------------------------------------------------------------------------------------------------------------------------- */

/* Style the top navigation bar */
.FXnavbar {
  display: flex;
  background-color: #333;
}

/* Style the navigation bar links */
.FXnavbar a {
  color: white;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
}

/* Change color on hover */
.FXnavbar a:hover {
  background-color: #ddd;
  color: black;
}