body {
		  background-color : #B8CBD0;
		  font-family: Arial, Helvetica, sans-serif;
		  padding-Left:.5vw;
		  padding-right:.5vw
		}
		
		Block {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center
		} 
		
		.img_motiv 
		{
			max-width:70%;
			height:auto;
			max-height: 350px
			
		}
		
		
		
		.accordion {
		  background-color: #eee;
		  color: black;
		  cursor: pointer;
		  padding: 5px;
		  width: 100%;
		  border: none;
		  text-align: left;
		  outline: none;
		  font-size: 2vw;
		  transition: 0.8s;
		}

		.active, .accordion:hover {
		  opacity:.25
		}

		.panel {
		  padding: 0 18px;
		  display: none;
		  background-color: Lightgrey;
		  overflow: hidden;
		  width:95%
		}
		
		.Module {
		  display: flex;
		  flex-direction: column;
		  justify-content: center;
		  align-items: center
		}
		
		.Module > div {
		  width:100%;
		  flex-direction: column;
		  flex-wrap: wrap;
		  align-items: center;
		  margin:.5vw
		}
		
		.container {

		display: flex;
		  flex-wrap:wrap;
		  justify-content : space-around;
		  align-content:stretch;
		  gap :10px 10px;
		  width: 100%;		  
		  text-align: center;
		  line-height: 1vw;
		  font-size: 1vw;
		  padding :10px
		}
		
		.containerV {

		display: flex;
		  flex-direction: column;
		  justify-content : center;
		  width: 100%;		  
		  text-align: center;
		  line-height: 1vw;
		  font-size: 1vw;
		  padding :.5vw
		}
		
		.containerV > div { padding :.5vw }
		
		
		
		.index {
			display: flex;
			width:100%; 
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
		}
		.index > div {
		  background-color: #f1f1f1;
		  width: 80%;
		  padding:2vw;
		  margin: 2vw;
		  text-align: center;
		  font-size: 2vw;
			} 

							
		.icones {
			padding:5px;
			width :2vw;
			height:2vw;
			border-radius: 50%;
		}
		
		.notification {
		  color: white;
		  text-decoration: none;
		  padding: 1px 1px;
		  position: relative;
		  display: inline-block;
		  border-radius: 2px;
		  
		}


		.notification .badge {
		  position: absolute;
		  top: -4px;
		  right: -5px;
		  padding: 5px 6px;
		  border-radius: 50%;
		  background-color: red;
		  color: white;
		  font-size:1vw
		}
		
		.notification .badge0 {
		  position: absolute;
		  top: -4px;
		  right: -5px;
		  padding: 5px 6px;
		  border-radius: 50%;
		  background-color: lightgreen;
		  color: white;
		  font-size:1vw
		}
		
		.avatar {
			  width: 3vw;
			  height: 3vw;
			  border-radius: 25%;
			  padding :5px;
			}
		.avatar2 {
		  width: 3vw;
		  height: 3vw;
		  border-radius: 25%;
		  padding :5px;		  
		}
		
		.emo {
			font-size :2vw;
		}

		button {
			  background-color: Dodgerblue;
			  font-size: 2vw;
			  color: black;
			  padding: 5px 5px;
			  margin: 4px 0;
			  border: none;
			  cursor: pointer;	
			  border-radius: 1vw;
			  opacity: 1;			  
			}
			
		button:hover {
			background-color: darkOrange;
			opacity: .5;
		}
		
		.btn_std { font-size: 1vw; color:Black; background-color:yellow;} 
		
		.btn_Select {
			  background-color: darkOrange;
			  font-size: 1vw;
			  color: black;
			  padding: 5px 5px;
			  margin: 4px 0;
			  border: none;
			  cursor: pointer;	
			  border-radius: 1vw;
			  opacity: 1;			  
			}
		
		.btn_grise {
			  background-color: Lightgrey;
			  font-size: 1.5vw;
			  color: grey;
			  padding: 5px 5px;
			  margin: 4px 0;
			  border: none;
			  cursor: pointer;	
			  border-radius: 25px;
			  opacity: .75;			  
			}
		.btn_grise:hover {
			background-color: Lightgrey;
			opacity: .75;
		}
		
		.btn_Presence {
			font-size: 1.25vw;
			padding: 10px 10px;
			border: none;
			 cursor: pointer;
		}
		.btn_Presence:hover {
			opacity: .5;
		}
		
		.btn_grp_LstGym {
			  background-color: blue;
			  font-size: 1.5vw;
			  color: white;
			  padding: 5px 5px;
			  margin: 4px 0;
			  border: 1px;
			  cursor: pointer;	
			  border-radius: 25% }
		
		
		.button1 {
			  background-color: Dodgerblue;
			  font-size: 3vw;
			  color: white;
			  padding: 5px 5px;
			  margin: 4px 0;
			  border: none;
			  cursor: pointer;	
			  border-radius: 20vw;	  
			}
			
		.button1:hover {
			background-color: darkOrange;
			opacity: .5;
		}
			
		.button2 {
			  background-color: Lightblue;
			  font-size: 3vw;
			  color: black; 
			  padding: 5px 5px;
			  margin: 4px 0;
			  border-style: solid;
			  border-color: grey;
			  cursor: pointer;	
			  border-radius: 25vw;		  
			}
		.btn_petit { font-size: 1.5vw; padding: 5px 5px;  margin: 4px 0;}
		.btn_petit_r { font-size: 1.5vw; color:white; background-color:red;padding: 5px 5px; margin: 4px 0;}	

			/* Extra styles for the cancel button */
			.cancelbtn {
			  width: auto;
			  padding: 10px 18px;
			  background-color: #f44336;
			}

			/* Center the image and position the close button */
			.imgcontainer {
			  text-align: center;
			  margin: 24px 0 12px 0;
			  position: relative;
			}

			
			span.psw {
			  float: right;
			  padding-top: 5px;
			}
			
	.Annexes {
		  background-color: #eee;
		  color: #444;
		  cursor: pointer;
		  padding: 18px;
		  width: 100%;
		  border: none;
		  text-align: left;
		  outline: none;
		  font-size: 15px;
		  transition: 0.4s;
		}

		.active, .Annexes:hover {
		  background-color: #ccc; 
		}

			/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: sticky; /* Stay in place */
  z-index: 100; /* Sit on top */
  padding-top: 1vw; /* Location of the box */
  top: 5%;
  width: 98%; /* Full width */
  bottom:5%;
  height: 60%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  border-radius: .5vw 1.5vw;
  background-color: #B8CBD0; /* Black w/ opacity */
  opacity:1;
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: .5vw;
  border: 1px solid #888;
  width: 95%;
  height: 50%; /* Full height */
  border-radius: .5vw 1.5vw;
  
}

/* The Close Button */
.close {
	height:.5 vw;
	width: .5 vw;
  float: right;
  border-radius: 50%;
}


pre { font-size: 1.5vw;}

.slidermotiv {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  background: grey;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slidermotiv:hover {
  opacity: 1;
}

.slidermotiv::-webkit-slidermotiv-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}

.slidermotiv::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}


.small { font: bold 12px sans-serif; }
.jours { font: bold 18px sans-serif ; }
			
			.grise {
			
			rx : 5px;
			ry : 5px;
			width : 30px;
			height :30px; 
			rx : 5px;
			ry : 5px;
			opacity : 0.25;
			fill: red			
		}
		.vide {
			rx : 5px;
			ry : 5px;
			opacity : 1;
			fill : lightGrey ; 
			stroke:black;
			stroke-width:1;
			
		}
		.petitvide {
			width : 30px;
			height :30px; 
			rx : 5px;
			ry : 5px;
			opacity : 1;
			fill : white ; 
			stroke:Grey;
			stroke-width:1
		}
		.Pre {
			width : 30px;
			height :30px;
			rx : 5px;
			ry : 5px;
			opacity : 1;
			fill : blue;
			stroke:black;
			stroke-width:1;

			}
		.Abs {
			width : 30px;
			height :30px;
			rx : 5px;
			ry : 5px;
			opacity : 1;
			fill : Black;
			stroke:black;
			stroke-width:1;
		}
		.Abs_J {
			width : 30px;
			height :30px;
			rx : 5px;
			ry : 5px;
			opacity : 1;
			fill : white;
			stroke:black;
			stroke-width:2;
		}
		.Act {
			width : 30px;
			height :30px;
			rx : 5px;
			ry : 5px;
			opacity : 1;
			fill : green;
			stroke:black;
			stroke-width:1;
		}
		.Eff {
			width : 30px;
			height :30px;
			rx : 5px;
			ry : 5px;
			opacity : 1;
			fill : orange;
			stroke:black;
			stroke-width:1;
		}
		.Coll {
			width : 30px;
			height :30px;
			rx : 5px;
			ry : 5px;
			opacity : 1;
			fill : pink;
			stroke:black;
			stroke-width:1;
		}
		.Expl {
			width : 30px;
			height :30px;
			rx : 5px;
			ry : 5px;
			opacity : 1;
			fill : gold;
			stroke:black;
			stroke-width:1;
		}
		.Anll {
			width : 30px;
			height :30px;
			rx : 5px;
			ry : 5px;
			opacity : 1;
			fill : indianred;
			stroke:black;
			stroke-width:1;
		}
		
		.Blessure {
			width : 30px;
			height :30px;
			rx : 5px;
			ry : 5px;
			opacity : 1;
			fill : red;
			stroke:White;
			stroke-width:4;
		}
		
		.Stage {
			width : 30px;
			height :30px;
			rx : 5px;
			ry : 5px;
			opacity : 1;
			fill : #6495ED;
			stroke:black;
			stroke-width:1;
		}

		


/* Chat containers */
.containerchat {
  border: 2px solid #dedede;
  background-color: #f1f1f1;
  border-radius: 20px;
  padding: 5px;
  margin: 5px 0;
  width:80%;
  font-size:.75vw;
  align-content:left;
}

/* Darker chat container */
.darker {
  border-color: #ccc;
  background-color: #ddd;
}

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

/* Style images */
.containerchat .ava_msg {
  float: left;
  max-width: 30px;
  width: 50%;
  margin-right: 20px;
  border-radius: 50%;
}

/* Style the right image */
 .containerchat .ava_msg.right {
  float: right;
  margin-left: 20px;
  margin-right:0;
}

/* Style time text */
.time-right {
  float: right;
  color: #aaa;
}

/* Style time text */
.time-left {
  float: left;
  color: #999;
}		
					
		
		

			/* Add Zoom Animation */
			.animate {
			  -webkit-animation: animatezoom 1.6s;
			  animation: animatezoom 1.6s
			}

			@-webkit-keyframes animatezoom {
			  from {-webkit-transform: scale(0)} 
			  to {-webkit-transform: scale(1)}
			}
	  
			@keyframes animatezoom {
			  from {transform: scale(0)} 
			  to {transform: scale(1)}
			}
			
			object {height: 900px}	
			
@import "Page_Tablette.css";
@import "Page_Smartphone.css";