/* Définition de règle */
@charset "iso-8859-1";	

/* ---------------- Paramètres divers -------------------- */ 

/* Toutes les pages */ 
body {margin:0; padding:0;font-family: Arial; font-size: 12px ; color: black ; background-color: #eee; color: #444444;}

.btnMenuConnect {background-color:transparent; border:none;}
.btnMenuConnect:hover {background-color: #eee; border: 1px #eee; border-radius: 10px;}

span.basdepage {font-size: 11px ; color: #444444 ;}

/*----------------------------------------------------*/
/*Menu déroulant des Statuts de Connect*/
.divlistelmt
{
	background-color: #fff; border: 1px #eee; border-radius: 5px;
}
.divlistelmt:hover
{
	background-color: #aaa; border: 1px #eee; border-radius: 5px;
}
.inputderoulantStatuts{display:none;}
.inputderoulantStatuts:checked ~ .divderoulanteStatuts {height:12em;}
.divderoulanteStatuts
		{  			
			height:1.7em;
 			transition:1s; 			
  			overflow:hidden;
  			padding:4px;
		}
/*Fin Menu déroulant*/
/*----------------------------------------------------*/

/*----------------------------------------------------*/
/*Menu déroulant des entités du menu droit*/
.divlistelmtEnt
{
	background-color: #fff; border: 1px #eee; border-radius: 5px;
}
.divlistelmtEnt:hover
{
	background-color: #aaa; border: 1px #eee; border-radius: 5px;
}
.inputderoulantEnt{display:none;}
.inputderoulantEnt:checked ~ .divderoulanteEnt {height:9em;} 
.divderoulanteEnt
		{  			
			height:1em;
 			transition:1s; 			
  			overflow-y: scroll;
  			padding:4px;
		}
/*Fin Menu déroulant*/
/*----------------------------------------------------*/

/*----------------------------------------------------*/
/*Liste déroulante pour les qrcodes*/
.divlistelmtQR
{
	  text-align:center; background-color: #aaa; border: 1px #eee; border-radius: 5px;
}
.divlistelmtQR:hover
{
	  text-align:center; background-color: #a00; border: 1px #eee; border-radius: 5px;
}
.inputderoulantQR{display:none;}
.inputderoulantQR:checked ~ .divderoulanteQR {height:140px;}
.divderoulanteQR
		{  	
			margin:auto;		
		 	width:80%; 
			height:32px;
 			transition:1s; 			
  			overflow:hidden;
  			padding:4px;
		}
/*Fin Liste déroulante pour les qrcodes*/
/*----------------------------------------------------*/

.wrapper 
{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  column-gap: 10px;
  row-gap: 1em;
}

.wrapperMenuOp
{
  display: grid;
  grid-template-columns: 30px 175px 50px;
  column-gap:0px;
}

.row {
        display: flex;
      }
.col {
        flex: auto; 
        padding: 2px;
        border: 0;
      }
      

A {font-size: 14px ;color:#444444;text-decoration: none;}
A:hover {font-size: 14px; color: #af123d;}

.A2 {cursor: pointer; font-size: 14px; color:#1862AE;text-decoration: none;}
.A2:hover {cursor: pointer; color: #af123d;}

.A22 {cursor: pointer; font-size: 12px; color:#1862AE;text-decoration: none;}
.A22:hover {cursor: pointer; color: #af123d;}

.A3 {cursor: pointer; width:180px; font-size: 16px; color: #2e5fcf; text-decoration: none; text-shadow: #002176 0.05em 0.05em 0.01em; margin:4px;padding:10px;border-radius:10px; }
.A3:hover { cursor: pointer; background-color: #6b7262; color: #5f001e;}

.A4 {cursor: pointer; width:180px; font-size: 16px; color: #d4c1ff; background-color: #a9af9d ; text-decoration: none; text-shadow: #002176 0.05em 0.05em 0.01em; margin:4px;padding:10px;border-radius:10px; }
.A4:hover { cursor: pointer; background-color: #93a766; color: #5f001e;}

.A5 {cursor: pointer; width:180px; font-size: 16px; color: #2e5fcf; text-decoration: none; background-color: #a9af9d ;opacity: 0.6;  text-shadow: #002176 0.05em 0.05em 0.01em; margin:4px;padding:0;border-radius:50px; }
.A5:hover { cursor: pointer; background-color: #6b7262; color: #5f001e; opacity: 1; }


.formConnect
{
	width:90vw; margin: 0 auto;  background-color:#FAFAFA; border-radius:25px;  box-shadow:2px 2px 4px #777777 inset; text-align: center;
}
.divformConnect
{
	width:90vw; height:92vh; margin: 0 auto;  background-color:#FAFAFA; border-radius:25px;  box-shadow:2px 2px 4px #777777 inset; text-align: center;
}

.inputgros 
{
	font-size: 18px ;
	color:#4444AA;
	text-decoration: none;
	background-color:white;
   border-radius: 30px;
	width:300px;
	height:100px;
	margin-top: 2%;
	margin-bottom: 2%;
	margin-left:20%;
	margin-right:20%;
	border: 4px solid black;
}

.inputgros:hover
{
	background-color:grey;
}

.inputnormalB 
{
	font-size: 14px ;
	color:#4444AA;
	text-decoration: none;
	background-color:#DDDDDD;
   border-radius: 5px;
	border: 2px solid green;
}

.inputnormalB:hover
{
	background-color:grey;
}

.inputgrosB 
{
	font-size: 25px ;
	color:#4444AA;
	text-decoration: none;
	background-color:#DDDDDD;
   border-radius: 5px;
   width:200px;
	height:40px;
	border: 2px solid blue;
}

.inputgrosB:hover
{
	background-color:grey;
}

.inputnormalR
{
	font-size: 14px ;
	color:#AA4444;
	text-decoration: none;
	background-color:#FFAAAA;
   border-radius: 5px;
	border: 2px solid red;
}

.inputnormalR:hover
{
	background-color:grey;
}

/********/
.alert-box {
	 padding: 10px;
    margin-bottom: 10px;
    border: 1px solid transparent;
    border-radius: 4px;  
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
	 opacity: 0;
	 animation: fadeOut 5s linear;
	 pointer-events: none; /* pour laisser passer les clics souris */
}

@keyframes fadeOut {
  0% { opacity: 1; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

/* Styles pour mobile */
@media screen and (max-width: 1280px), screen and (max-height: 900px)
{
  .formConnect
	{
		width:100vw; height:100vh; margin: 0 auto;  background-color:#FAFAFA; border-radius:5px;  box-shadow:2px 2px 4px #777777 inset; text-align: center;
	}
	.divformConnect
	{
		width:100vw; height:100vh; margin: 0 auto;  background-color:#FAFAFA; border-radius:5px;  box-shadow:2px 2px 4px #777777 inset; text-align: center;
	}
}