/**************************************/
/**************************************/
/*Tablette max 600px de largeur*/
/**************************************/
/**************************************/

@media only screen and (max-width: 600px)
{
	/*ANIMATION CHARGEMENT*/
/* HTML: <div class="loader"></div> */
.loader {
  width: 50px;
  aspect-ratio: 1;
  display: grid;
  position: fixed;
  top: 48%;
  left: 43%;
  z-index: 10000;
}
.loader::before,
.loader::after {    
  content:"";
  grid-area: 1/1;
  --c:no-repeat radial-gradient(farthest-side,#25b09b 92%,#0000);
  background: 
    var(--c) 50%  0, 
    var(--c) 50%  100%, 
    var(--c) 100% 50%, 
    var(--c) 0    50%;
  background-size: 12px 12px;
  animation: l12 1s infinite;
}
.loader::before {
  margin: 4px;
  filter: hue-rotate(45deg);
  background-size: 8px 8px;
  animation-timing-function: linear
}

@keyframes l12 { 
  100%{transform: rotate(.5turn)}
}

/*ANIMATION BLOCS*/
@keyframes apparitionFondue
{
	from
	{
		opacity: 0;
	}
	to
	{
		opacity: 1;
	}
}

body
{
	background: #276E8C;
}

a
{
  color: whitesmoke;
}

a:link
{
  color: whitesmoke;
}

a:visited
{
  color: whitesmoke;
}

input
{
	margin-top: 5%;
	border-radius: 30px 30px 30px 30px;
	border: none;
	text-align: center;
	font-size: 20px;
	border: 1px solid #293C63;
}

button
{
	border: none;
	font-size: 25px;
	border-radius: 30px 30px 30px 30px;
}

select
{
	border: 1px solid #293C63;
	border-radius: 30px 30px 30px 30px;
	font-size: 20px;
}

option
 {
 	width: 100%;
 }

#debutService
{
	background-color: #27BA37;
	color: whitesmoke;
}

#debutService:active
{
	background-color: whitesmoke;
	color: #27BA37;
}

#finService
{
	background-color: #BA2729;
	color: whitesmoke;
}

#finService:active
{
	background-color: whitesmoke;
	color: #BA2729;
}

.submit
{
	background-color: #1F2566;
	color: whitesmoke;
}

.submit:active
{
	background-color: whitesmoke;
	color: #1F2566;
}

img
{
	height: 30%;
	width: 30%;
	border-radius: 100px 100px 100px 100px;
	margin-top: 10%;
}

.blocLogo
{
	text-align: center;
	animation: apparitionFondue 2s;
}

.blocChampsForm
{
	display: flex;
	flex-direction: column;
	text-align: center;
	margin-top: 5%;
}

#statutGps
{
	font-size: 20px;
}

.blockAdmin
{
	text-align: center;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	margin-top: 5%;
}

.boutonInscrire:active
{
	background-color: #293C63;
	color: whitesmoke;
}

.boutonExportPointages:active
{
	background-color: #293C63;
	color: whitesmoke;
}

.boutonGestionPlanning:active
{
	background-color: #293C63;
	color: whitesmoke;
}

.blocInscription
{
	margin-top: 10%;
}

/*************************MENU**************************************/
@keyframes glissementDroiteGauche
{
	from
	{
		left: 120%;
		position: fixed;
		opacity: 0;
	}
	to
	{
		left: 0%;
		position: fixed;
		opacity: 1;
	}
}

@keyframes glissementGaucheDroite
{
	from
	{
		left: 0%;
		position: fixed;
		opacity: 1;
	}
	to
	{
		left: 120%;
		position: fixed;
		opacity: 0;
	}
}

@keyframes glissementBasHaut
{
	from
	{
		top: 100%;
		position: fixed;
		z-index: 10;
	}
	to
	{
		top: 0%;
		position: fixed;
		z-index: 10;
	}
}

@keyframes glissementHautBas
{
	from
	{
		top: 0%;
		position: fixed;
		opacity: 1;
	}
	to
	{
		top: 1000px;
		position: fixed;
		opacity: 0;
	}
}

@keyframes deroulementHautBas
{
	from
	{
		height: 1%;
		position: relative;
		opacity: 0;
	}
	to
	{
		height: 100%;
		position: relative;
		opacity: 1;
	}
}

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

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

#boutonMenu
{
	font-size: 28px;
	transform: rotate(90deg);
	left: 2%;
	top: 1%;
	position: absolute;
  color: whitesmoke;
  width: 30px;
}

.blockMenu
 {
 	font-size: 28px;
 	position: fixed;
 	left: 120%;
  	top: 0%;
 	background-color: #293C63;
 	box-shadow: 0px 0px 0px 50px #293C63;
 	padding-bottom: 100%;
 	font-family: Georgia, serif;
 	color: whitesmoke;
 }

.croixfermerMenu
{
  font-size: 35px;
  margin-left: 2%;
}

li
{
	list-style: none;
	margin-top: 4%;
}

.blockSousMenu1
{
	font-size: 24px;
	margin-top: 10%;
	position: relative;
	animation: 1s deroulementHautBas;
	animation-fill-mode: forwards;
}

.blockSousMenu2
{
	font-size: 24px;
	margin-top: 10%;
	position: relative;
	animation: 1s deroulementHautBas;
	animation-fill-mode: forwards;
}

.lienCharteMenu
{
	color: whitesmoke;
	text-decoration: none;
}
.lienCharteMenu:link
{
	color: whitesmoke;
}
.lienCharteMenu:visited
{
	color: whitesmoke;
}
.lienCharteMenu
{
	color: whitesmoke;
}

#maFicheSalarieMenu
{
	position: fixed;
	top: 100%;
	font-size: 30px;
	color: whitesmoke;
	background-color: #293C63;
 	box-shadow: 0px 0px 0px 0px #293C63;
}

#mesPointagesMenu
{
	position: fixed;
	top: 100%;
	font-size: 30px;
	color: whitesmoke;
	background-color: #293C63;
 	box-shadow: 0px 0px 0px 0px #293C63;
}

#monPlanningMenu
{
	position: fixed;
	top: 100%;
	font-size: 30px;
	color: whitesmoke;
	background-color: #293C63;
 	box-shadow: 0px 0px 0px 0px #293C63;
}

#mesCongesMenu
{
	position: fixed;
	top: 100%;
	font-size: 30px;
	color: whitesmoke;
	background-color: #293C63;
 	box-shadow: 0px 0px 0px 0px #293C63;
}

#demandeAbsenceMenu
{
	position: fixed;
	top: 100%;
	font-size: 30px;
	color: whitesmoke;
	background-color: #293C63;
 	box-shadow: 0px 0px 0px 0px #293C63;
}

#decIncidentMenu
{
	position: fixed;
	top: 100%;
	font-size: 30px;
	color: whitesmoke;
	background-color: #293C63;
 	box-shadow: 0px 0px 0px 0px #293C63;
 	height: 100%;
 	width: 100%;
 	overflow-y: auto;
}

#decDemandeMenu
{
	position: fixed;
	top: 100%;
	font-size: 30px;
	color: whitesmoke;
	background-color: #293C63;
 	box-shadow: 0px 0px 0px 0px #293C63;
 	height: 100%;
 	width: 100%;
 	overflow-y: auto;
}

#decRondeMenu
{
	position: fixed;
	top: 100%;
	font-size: 30px;
	color: whitesmoke;
	background-color: #293C63;
 	box-shadow: 0px 0px 0px 0px #293C63;
}

#decMaterielMenu
{
	position: fixed;
	top: 100%;
	font-size: 30px;
	color: whitesmoke;
	background-color: #293C63;
 	box-shadow: 0px 0px 0px 0px #293C63;
 	height: 100%;
 	width: 100%;
 	overflow-y: auto;
}

#decFerOuvMenu
{
	position: fixed;
	top: 100%;
	font-size: 30px;
	color: whitesmoke;
	background-color: #293C63;
 	box-shadow: 0px 0px 0px 0px #293C63;
}

#mesRapportsMenu
{
	position: fixed;
	top: 100%;
	font-size: 30px;
	color: whitesmoke;
	background-color: #293C63;
 	box-shadow: 0px 0px 0px 0px #293C63;
 	height: 100%;
 	width: 100%;
 	overflow-y: auto;
}

thead, th
{
	
	border: white 1px solid;
	font-size: 10px;
}

thead, th
{
	border-collapse: collapse;
}

tbody
{
	text-align: center;
	font-size: 13px;
}
}

/*RAPPORTS*/
/*Déclarer un incident*/
#decIncidentMenu
{
	height: 100%;
	overflow-y: auto;
}
.blocContentFormIncident
{
	background-color: whitesmoke;
	box-shadow: 0px 0px 0px 10px whitesmoke;
	color: #293C63;
	text-align: center;
	font-size: 20px;
	width: 100%;
}

}
#sousCat1
{
	width: 50%;
	font-size: 20px;
}

#sousCat2
{
	width: 50%;
	font-size: 20px;
}

#sousCat3
{
	width: 50%;
	font-size: 20px;
}

#sousCat4
{
	width: 50%;
	font-size: 20px;
}

#sousCat5
{
	width: 50%;
	font-size: 20px;
}

#sousCat6
{
	width: 50%;
	font-size: 20px;
}

/*Déclarer une ronde*/
.blocContentFormRonde
{
	background-color: whitesmoke;
	box-shadow: 0px 0px 0px 1000px whitesmoke;
	color: #293C63;
	text-align: center;
	font-size: 20px;
	width: 100%;
}

#decRondeMenu
{
	height: 100%;
	overflow-y: auto;
	width: 100%;
}

/*Déclarer un matériel*/
.blocContentFormDecMateriel
{
	background-color: whitesmoke;
	box-shadow: 0px 0px 0px 1000px whitesmoke;
	color: #293C63;
	text-align: center;
	font-size: 20px;
	width: 100%;
}


/*Signatures rapport incident*/


/*****************************************************************************************************************************************************************************************/
/*****************************************************************************************************************************************************************************************/
/*Tablette min 601px de largeur*/
/*****************************************************************************************************************************************************************************************/
/*****************************************************************************************************************************************************************************************/
@media only screen and (min-width: 601px)
{
	/*ANIMATION CHARGEMENT*/
/* HTML: <div class="loader"></div> */
.loader {
  width: 50px;
  aspect-ratio: 1;
  display: grid;
  position: fixed;
  left: 48%;
  top: 48%;
  z-index: 20;
}
.loader::before,
.loader::after {    
  content:"";
  grid-area: 1/1;
  --c:no-repeat radial-gradient(farthest-side,#25b09b 92%,#0000);
  background: 
    var(--c) 50%  0, 
    var(--c) 50%  100%, 
    var(--c) 100% 50%, 
    var(--c) 0    50%;
  background-size: 12px 12px;
  animation: l12 1s infinite;
}
.loader::before {
  margin: 4px;
  filter: hue-rotate(45deg);
  background-size: 8px 8px;
  animation-timing-function: linear
}

@keyframes l12 { 
  100%{transform: rotate(.5turn)}
}

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

body
{
	background: #276E8C;
}

a
{
  color: whitesmoke;
}

a:link
{
  color: whitesmoke;
}

a:visited
{
  color: whitesmoke;
}

ul:hover
{
	cursor: pointer;
}

input
{
	margin-top: 2%;
	border-radius: 30px 30px 30px 30px;
	border: none;
	text-align: center;
	font-size: 15px;
	border: 1px solid #293C63;
}

button
{
	border: none;
	font-size: 15px;
	border-radius: 30px 30px 30px 30px;
}

select
{
	border: none;
	border-radius: 30px 30px 30px 30px;
	font-size: 15px;
}

#debutService
{
	background-color: #27BA37;
	color: whitesmoke;
	display: none;
	position: absolute;
	z-index: 0;
}

#debutService:active
{
	background-color: whitesmoke;
	color: #27BA37;
	position: absolute;
	z-index: 0;
}

#finService
{
	background-color: #BA2729;
	color: whitesmoke;
	display: none;
	position: absolute;
	z-index: 0;
}

#finService:active
{
	background-color: whitesmoke;
	color: #BA2729;
	position: absolute;
	z-index: 0;
}

.submit
{
	background-color: #1F2566;
	color: whitesmoke;
}

.submit:hover
{
	background-color: whitesmoke;
	color: #1F2566;
	cursor: pointer;
}

img
{	
	height: 5%;
	width: 5%;
	border-radius: 100px 100px 100px 100px;
	margin-top: 1%;
}

.blocLogo
{
	text-align: center;
	animation: apparitionFondue 2s;
}

.blocChampsForm
{
	display: flex;
	flex-direction: column;
	text-align: center;
	margin-top: 2%;
}

#statutGps
{
	font-size: 20px;
	display: none;
}

.blockAdmin
{
	top: 40%;
	left: 32%;
	text-align: center;
	background-color: #FCFFFF;
	padding-left: 5%;
	padding-right: 5%;
	border-radius: 30px;
	position: absolute;
	display: flex;
	justify-content: space-between;
}

.boutonInscrire:hover
{
	cursor: pointer;
	background-color: #293C63;
	color: whitesmoke;
}

.boutonExportPointages:hover
{
	cursor: pointer;
	background-color: #293C63;
	color: whitesmoke;
}

.boutonGestionPlanning:hover
{
	cursor: pointer;
	background-color: #293C63;
	color: whitesmoke;
}

.blocInscription
{
	position: absolute;
	top: 50%;
	left: 42%;
	text-align: center;
}

.blocExportPointages
{
  position: absolute;
	top: 15%;
	left: 42%;
}

.blocGestionPlanning
{
	position: absolute;
	top: 15%;
	left: 42%;
}
  
.boutonFermerForm:hover
{
	background-color: whitesmoke;
	color: #1F2566;
	cursor: pointer;
}

/*************************MENU**************************************/
@keyframes glissementDroiteGauche
{
	from
	{
		left: 120%;
		position: fixed;
		opacity: 0;
	}
	to
	{
		left: 0%;
		position: fixed;
		opacity: 1;
	}
}

@keyframes glissementGaucheDroite
{
	from
	{
		left: 0%;
		position: fixed;
		opacity: 1;
	}
	to
	{
		left: 120%;
		position: fixed;
		opacity: 0;
	}
}

@keyframes glissementBasHaut
{
	from
	{
		top: 100%;
		position: fixed;
		z-index: 10;
	}
	to
	{
		top: 0%;
		position: fixed;
		z-index: 10;
	}
}

@keyframes glissementHautBas
{
	from
	{
		top: 0%;
		position: fixed;
		opacity: 1;
	}
	to
	{
		top: 1000px;
		position: fixed;
		opacity: 0;
	}
}

@keyframes deroulementHautBas
{
	from
	{
		height: 1%;
		position: relative;
		opacity: 0;
	}
	to
	{
		height: 100%;
		position: relative;
		opacity: 1;
	}
}

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

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

#boutonMenu
{
	font-size: 30px;
	transform: rotate(90deg);
	margin-left: 1%;
	position: absolute;
	top: 1%;
  color: whitesmoke;
  transition: 1s;
}

#boutonMenu:hover
{
	font-size: 30px;
	transform: rotate(90deg);
	margin-left: 1%;
	position: absolute;
	top: 1%;
  color: #293C63;
  cursor: pointer;
  transition: 1s;
}

.blockMenu
 {
 	font-size: 28px;
 	position: fixed;
 	left: 120%;
  	top: 0%;
 	background-color: #293C63;
 	box-shadow: 0px 0px 0px 50px #293C63;
 	padding-bottom: 100%;
 	font-family: Georgia, serif;
 	color: whitesmoke;
	z-index: 10;
 }

.croixfermerMenu
{
  font-size: 35px;
  margin-left: 30%;
  opacity: 0.5;
  transition: 1s;
}

.croixfermerMenu:hover
{
  font-size: 35px;
  margin-left: 30%;
  cursor: pointer;
  opacity: 1;
  transition: 1s;
}

li
{
	list-style: none;
	margin-top: 4%;
}

.blockSousMenu1
{
	font-size: 20px;
	margin-top: 10%;
	position: relative;
	animation: 1s deroulementHautBas;
	animation-fill-mode: forwards;
}

.blockSousMenu2
{
	font-size: 20px;
	margin-top: 10%;
	position: relative;
	animation: 1s deroulementHautBas;
	animation-fill-mode: forwards;
}

.lienCharteMenu
{
	color: whitesmoke;
	text-decoration: none;
}
.lienCharteMenu:link
{
	color: whitesmoke;
}
.lienCharteMenu:visited
{
	color: whitesmoke;
}
.lienCharteMenu
{
	color: whitesmoke;
}

#maFicheSalarieMenu
{
	position: fixed;
	top: 100%;
	margin-left: 40%;
	margin-top: 5%;
	font-size: 20px;
	color: whitesmoke;
	background-color: #293C63;
 	box-shadow: 0px 0px 0px 0px #293C63;
}

#mesPointagesMenu
{
	position: fixed;
	top: 100%;
	margin-top: 2%;
	margin-left: 30%;
	font-size: 3rem;
	color: whitesmoke;
	background-color: #293C63;
 	box-shadow: 0px 0px 0px 0px #293C63;
}

#monPlanningMenu
{
	position: fixed;
	top: 100%;
	left: 35%;
	font-size: 30px;
	color: whitesmoke;
	background-color: #293C63;
 	box-shadow: 0px 0px 0px 0px #293C63;
}

#mesCongesMenu
{
	position: fixed;
	top: 100%;
	font-size: 30px;
	color: whitesmoke;
	background-color: #293C63;
 	box-shadow: 0px 0px 0px 0px #293C63;
}

#demandeAbsenceMenu
{
	position: fixed;
	top: 100%;
	font-size: 30px;
	color: whitesmoke;
	background-color: #293C63;
 	box-shadow: 0px 0px 0px 0px #293C63;
}

#decIncidentMenu
{
	position: fixed;
	top: 100%;
	font-size: 30px;
	color: whitesmoke;
	background-color: #293C63;
 	box-shadow: 0px 0px 0px 0px #293C63;
 	height: 100%;
 	width: 100%;
 	overflow-y: auto;
}

#decDemandeMenu
{
	position: fixed;
	top: 100%;
	font-size: 30px;
	color: whitesmoke;
	background-color: #293C63;
 	box-shadow: 0px 0px 0px 0px #293C63;
 	height: 100%;
 	width: 100%;
 	overflow-y: auto;

}

#decRondeMenu
{
	position: fixed;
	top: 100%;
	font-size: 30px;
	color: whitesmoke;
	background-color: #293C63;
 	box-shadow: 0px 0px 0px 0px #293C63;
 	height: 100%;
 	width: 100%;
 	overflow-y: auto;
}

#decMaterielMenu
{
	position: fixed;
	top: 100%;
	font-size: 30px;
	color: whitesmoke;
	background-color: #293C63;
 	box-shadow: 0px 0px 0px 0px #293C63;
 	height: 100%;
 	width: 100%;
 	overflow-y: auto;
}

#decFerOuvMenu
{
	position: fixed;
	top: 100%;
	font-size: 30px;
	color: whitesmoke;
	background-color: #293C63;
 	box-shadow: 0px 0px 0px 0px #293C63;
}

#mesRapportsMenu
{
	position: fixed;
	top: 100%;
	font-size: 30px;
	color: whitesmoke;
	background-color: #293C63;
 	box-shadow: 0px 0px 0px 0px #293C63;
 	height: 100%;
 	width: 100%;
 	overflow-y: auto;
}

table
{
	border-collapse: collapse;
	margin-top: 2%;
}

thead, th
{
	border: white 1px solid;
	font-size: 20px;
	border-top: none;
}

tr
{
	
}

tbody
{
	text-align: center;
	font-size: 23px;
}
}

/*RAPPORTS*/
/*Déclarer un incident*/
.blocContentFormIncident
{
	background-color: whitesmoke;
	box-shadow: 0px 0px 0px 10px whitesmoke;
	color: #293C63;
	text-align: center;
	font-size: 20px;
	width: 100%;
}

}
#sousCat1
{
	width: 100%;
	font-size: 20px;
}

#sousCat2
{
	width: 100%;
	font-size: 20px;
}

#sousCat3
{
	width: 100%;
	font-size: 20px;
}

#sousCat4
{
	width: 100%;
	font-size: 20px;
}

#sousCat5
{
	width: 100%;
	font-size: 20px;
}

#sousCat6
{
	width: 100%;
	font-size: 20px;
}

/*Déclarer une ronde*/
.blocContentFormRonde
{
	background-color: whitesmoke;
	box-shadow: 0px 0px 0px 30px whitesmoke;
	color: #293C63;
	text-align: center;
	font-size: 20px;
	width: 100%;
}

/*Déclarer un matériel*/
.blocContentFormDecMateriel
{
	background-color: whitesmoke;
	box-shadow: 0px 0px 0px 30px whitesmoke;
	color: #293C63;
	text-align: center;
	font-size: 20px;
	width: 100%;
}