html{
	min-height:100%;/* make sure it is at least as tall as the viewport */
	position:relative;
}
body{
	height:100%; /* force the BODY element to match the height of the HTML element */
}
.titre {
	padding: 0px;
	margin-top: 10px;
	text-align: center;
}

#titre-principal {
	font-size: 35px;
	color: #0022FF;
	text-align: center;
	font-weight: bold;
	width: 100%;
	font-family: 'Harring', Arial, sans-serif;
	font-weight:normal;
	font-style:normal;
}

#titre-logo {
	display: inline-block;
	height: 100px;
	width: 100px;
	margin-left: 20px;
	margin-right: 20px;
	margin-top: 0px;
	padding:0px;
	vertical-align: middle;
}

#titre-logo > img {
	width: 100%;
	height: 100%;
}

#sous-titre {
	display: inline-block;
	font-size: 25px;
	color: #0022ff;
	font-family:  Arial, sans-serif;
	text-align: center;
	text-shadow: 2px 2px 15px black;
	height: 100px;
	vertical-align: middle;
}

#titre-menu{
	font-size: 30px;
}

#utilisateur-connecte {
	font-weight: bold;
}

@media (min-width: 1024px) {
	.nav-item {
		font-size: 1.15vw;
		padding: 0.3vw;
	}
	.navbar {
		padding: 0px;
	}
	
}
@media (max-width: 1024px) {
	.nav-item {
		font-size: 14px;
	}
}

form[name="recherche_form"] {
	width: calc(100% - 50px);
  }
#recherche_txtbox {
	display: block;
	position: relative;
	left: 50px;
	top: 2px;
	width: calc(100% - 100px);
	height: 25px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: 30px;

	font-size: 14px;
	padding: .5rem 1rem;
	border: 0 solid black;
	
}
header {
	margin: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 50px;
	padding-bottom: 5px;
	background-color: #e3f2fd;
	width: 100%;
}


.titre-sous-paragraphe {
	color: #0022FF;
	margin: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #e3f2fd;
	margin-top: 5px;
	margin-bottom: 5px;
	width: 100%;
}

form {
	display: inline-block;
}
#validate-connexion-form {
	width: 100%;
}

section {
	text-align: center;
	margin-bottom: 100px;
}

.edit-btn, .del-btn, .sort-btn {
	font-size: 15px;
	padding: 0px;
}

.sort-btn {
	padding-left: 7px;
	padding-right: 7px;
}

.list-btn {
	width: 50px;
}

.titre-partie {
	font-size: 30px;
	font-weight: bold;
}

.date-pick {
	width: 150px;
	text-align:center;
	display: inline;
}

.cal {
	border: 3px #5555FF solid;
	display: inline-block;
}
.cal-mois {
	font-size: 25px;
	background-color: #5555FF;
	background: linear-gradient(to right, #5555FF,#6767ff);
	color: white;
	font-weight: bold;
}
.cal-batiment {
	font-size: 12px;
	border: 2px #8888FF solid;
	background-color: #9292fb;
	width: 20px;
}
.cal-etage {
	font-size: 12px;
	border: 2px #8888FF solid;
	background-color: #b1b1ff;
	width: 20px;
}
.cal-chambre {
	font-size: 12px;
	border: 2px #8888FF solid;
	background-color: #cbcbff;

	width: 20px;
}
.cal-jour {
	font-size: 10px;
	border: 2px #8888FF solid;
	background: linear-gradient(to right, #7272ff,#8686ff);
	color: white;
	width: 20px;
}
.cal-chambre {
	font-size: 11px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 0px;
	padding-bottom: 0px;
	border: 2px #8888FF solid;
}
.cal-none {
	background-color: #8888FF;
	border: 2px #8888FF solid;
}
.cal-occupation-actif {				
	border: 1px white solid;	
	/*background-color: #bbbbff;*/
	/*background: linear-gradient(rgb(67, 67, 255), rgb(124, 124, 255));*/
	height: 10px;
	cursor:pointer;
}
.cal-occupation{			
	border: 1px #AAAAFF solid;		
	background-color: #EEEEFF;
	height: 10px;
}
.cal-dernier-chambre {
	border-bottom-color: #000046;
	border-bottom-width: 3px;
}

.appel-check {
	font-size: 15px;
	color: green;
	font-weight: bold;
}
.appel-cross {
	font-size: 15px;
	color: red;
	font-weight: bold;
}
.appel-cross-justifie {
	font-size: 15px;
	color: purple;
	font-weight: bold;
}
.appel-check {
	font-size: 15px;
	color: green;
	font-weight: bold;
}
.appel-none {
	font-size: 15px;
	color: black;
}

.type_appel {
	font-size: 15px;
	width: 100px;
}

.appel-etage {
	font-size: 15px;
	border-top: black solid 2px;
	font-weight: bold;
}
.appel-etage-batiment {
	font-size: 17px;
	background-color: #8888ff;
	font-weight: bold;
}

.appel-etage-etage {
	font-size: 16px;
	background-color: #bdbdff;
	font-weight: bold;
}

footer {
	position: fixed;
	z-index: 1031;
	bottom: 0px;
	margin: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top:10px;
	padding-bottom: 10px;
	font-size: 1vw;
	background-color: #e3f2fd;
	margin-top: 20px;
	width: 100%;
	text-align: center;
}

@font-face {
	font-family: "Harring";
	src: url("../font/Harrington.woff2") format("woff2"),
		   url("../font/Harrington.woff") format("woff");
}


.statsArray td, .statsArray th {
	padding: 9px;
	border: #000046 1px solid;
	text-align: center;
}

.statsArray th {
	background-color: #0011AA;
	color: white;
}

.CONNEXIONIA {
	display: inline-block;
	width: 10px;
	height: 10px;
	border: 1px black solid;
	background-color: orange;
	border-radius: 10px;
}

.CONNEXIONIA-OK {
	display: inline-block;
	width: 10px;
	height: 10px;
	border: 1px black solid;
	background-color: lime;
	border-radius: 10px;
}

.CONNEXIONIA-KO {
	display: inline-block;
	width: 10px;
	height: 10px;
	border: 1px black solid;
	background-color: red;
	border-radius: 10px;
}


.synt-abs-details {
	font-size: 12px;
	color: rgb(30, 30, 30);
}

.synt-abs-infos {
	font-size: 12px;
	color: rgb(100, 100,100);
	font-style: italic;
}
        
input[type="checkbox"] + label {
	opacity: 0.3;
}                      
input[type="checkbox"]:checked + label {
	opacity: 1;
}      


#alphaSide_1 {
	right: 70px;
}
#alphaSide_2 {
	right: 10px;
}
#alphaSide_Menu {
	right: 10px;
	position: fixed;
	top: 20px;
	z-index: 1032;
	
	width: 110px;
}

.alphaMenuBouton {
	margin: 2px;
	padding: 3px;
	width: 100%;
	height: 35px;
	
	border-radius: 20px;

	background-color: #0011aa88;
	color: white;
	font-weight: bold;
	display: flex;
    align-items: center;
	left: 50%;
}
.alphaMenuBouton:hover {
	cursor: pointer;
	background-color: #0011aab0;
}

.alphaSide {
	position: fixed;
	top: 60px;
	z-index: 1032;
	
	width: 50px;
}
.alphaBouton {
	margin: 2px;
	padding: 3px;
	width: 100%;
	height: calc((100vh - 190px) / 13);
	
	border-radius: 20px;

	background-color: #0011aa88;
	color: white;
	font-weight: bold;
	display: flex;
    align-items: center;
	left: 50%;
}
.alphaBoutonSelec {
	background-color: white;
	color:  #0011aa88;
	border: #0011aa88 solid 1px;
}
.alphaBouton:hover {
	cursor: pointer;
	background-color: #0011aab0;
}

.alphaLettre {
	text-align:center; 
	width:100%;
}

#cacher-titre {
	margin: 0px;
}

#cacher-titre-bouton {
	display: inline-block;
	position: relative;
	left: 30px;
	
	background-color: #e3f2fd;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	text-align: center;

	width: 30px;
	height: 30px;

	color:#0022ff7b;
}



#cacher-titre-bouton:hover {
	cursor: pointer;
}

#cacher-titre-bouton.cacher-titre-defile::before {
    content: '▼';
}
#cacher-titre-bouton.cacher-titre-defile:hover::before {
    content: '▽';
}

#cacher-titre-bouton.cacher-titre-enfile::before {
    content: '▲';
}
#cacher-titre-bouton.cacher-titre-enfile:hover::before {
    content: '△';
}
.appels-td-adm {
	font-size: 0.8em;
	color: rgb(100, 100,100);
}
.appels-td-check {
	min-width: 130px;
}
.appels-td-etab {
	font-size: 0.8em;
}
.appels-td-etab > a {
	color: black;
}
.appels-td-classe {
	font-size: 0.9em;
	overflow-x: hidden;
}
.appels-td-classe > a  {
	color: black;
}
.appels-td-chambre {
	font-size: 0.9em;
	font-weight: 100;
	white-space: nowrap;	
}
.appels-td-nom {
	font-weight: 500;
	text-align: left;
	white-space: nowrap;
}
.appels-td-nom > a  {
	color: black;
}

.txt-right {
	text-align: right;
}
.txt-left {
	text-align: left;
}

.type-contact {
	font-size: 24px;
	background-color: #e3f2fd;
	border-radius: 10px;
	margin: 5px;
	border: #bddff7 outset 2px;
}


.horloge-box {
	display: none;
}

.retour {
	font-size: 16px;
	color: #0011aa;
	background-color: lime;
	padding-left: 5px;
	padding-right: 5px;
}
.retour::before {
	content: '✓   ';
	color: green;
	font-weight: bold;
}

.annule {
	font-size: 16px;
	color: #0011aa;
	background-color: rgb(255,200,200);
	padding-left: 5px;
	padding-right: 5px;
}

.annule::before {
	content: '✗   ';
	color: red;
	font-weight: bold;
}

.retour-parent {
	background-color: rgba(0, 31, 99, 0.178);
	border: 1px groove rgb(0, 31, 99);
	display: none;
	width: 300px;
}

.mentions-enumeration-titre {
	margin-left: 20px;
	font-weight: bold;
}
.mentions-enumeration {
	margin-left: 20px;
	font-weight: lighter;
}

.vertical-text {
	writing-mode: sideways-lr; /* Spécifie l'orientation verticale de droite à gauche */
	text-orientation: mixed; /* Permet de gérer la disposition du texte */
	white-space: nowrap; /* Empêche le texte de passer à la ligne automatiquement */
	width: 25px;
  }

  /* Appliquer une bordure à droite toutes les 3 cellules en commençant par la droite */
td.synthese-semaine {
	border-right: 2px solid #5555ff37; /* Bordure à droite pour chaque 3ème cellule */
  }


  table.synthese-semaine {
	display: inline-block;
	height: 35em;
	overflow-y: scroll;
  }
  
  table.synthese-semaine thead {
	position: sticky;
	top: 0;
  }

  table.synthese-semaine tbody {
	max-height: 400px;
	overflow-y: scroll;
  }

  .tableau-info{
	width: 500px;
  }

  .tableau-info tr td, .tableau-info thead th {
	padding: 8px;

  }
  .tableau-info tr td:first-child, .tableau-info thead th:first-child {
	text-align: right;
  }

  
  #tableau-absences {
	display: inline-block;
	overflow-y: scroll;
	height: 200px;
	resize: vertical;
  }
  
  #tableau-absences thead {
	position: sticky;
	top: 0;
	background-color: white;
  }  

    
  #tableau-appels {
	display: inline-block;
	overflow-y: scroll;
	height: 200px;
	resize: vertical;
	width: auto;
  }
  
  #tableau-appels thead {
	position: sticky;
	top: 0;
	background-color: white;
  }  

  .surligner {
	background-color: rgb(255, 255, 181);
  }

  

    
  #tableau-destinataires {
	display: inline-block;
	overflow-y: scroll;
	height: 400px;
	resize: vertical;
	width: auto;
  }
  
  #tableau-destinataires thead {
	position: sticky;
	top: 0;
	background-color: white;
  }  

  #hebergement-bloc-gauche {
	position: fixed;
	height: calc(100vh - 350px);
	overflow-y: scroll;
	resize: vertical;
	width: 350px;

	scrollbar-color: #004576 white;
	scrollbar-width: auto;
	scrollbar-gutter: stable both-edges;
  }

  #hebergement-bloc-droit {
	position: relative;
	left: 370px;
	width: 66%;
  }

  #hebergement-bloc-gauche > .eleve {
	border: #004576 solid 1px;
	background-color: white;
	border-radius: 5px;
	margin-bottom: 2px;
	margin-left: 0px;
  }

  #hebergement-bloc-gauche > .eleve:hover {
	background-color: #e3f2fd;
  }

  #hebergement-bloc-gauche > .eleve > .nom-prenom {
	display: inline-block;
	user-select: none;
	color: blue;
  }
 
  #hebergement-bloc-gauche > .eleve > .provenance {
	display: inline-block;
	font-size: small;
	user-select: none;
  }
  #hebergement-bloc-gauche > .eleve > .provenance::before {
	content: '- ';
  }
  #hebergement-bloc-gauche > .eleve , #hebergement-bloc-gauche-titre {
	margin-right: 20px;
  }
  #hebergement-bloc-droit > div > .batiment-etage, #hebergement-bloc-gauche-titre {
	background-color: #004576;
	color: white;
	border-radius: 5px;
	text-align: center;
	font-size: large;
	margin-top: 2px;
	margin-bottom: 2px;
  }

  #hebergement-bloc-droit > div > .chambre {
	display: inline-block;
	width: 24%;
	background-color: #32a6f9;
	border-radius: 2;
	margin: 2px;	
  }
  
  #hebergement-bloc-droit > div > .chambre > .designation {
	color: white;
  }
  #hebergement-bloc-droit > div > .chambre > .lit {
	background-color: white;
	margin: 2px;
	min-height: 30px;
	border: #004576 solid 1px;
	border-radius: 5px;
  }
  
  #hebergement-bloc-droit > div > .chambre > .lit:nth-of-type(2) > .nom-prenom::before {
	content: '① ';
  }
  #hebergement-bloc-droit > div > .chambre > .lit:nth-of-type(3) > .nom-prenom::before {
	content: '② ';
  }
  #hebergement-bloc-droit > div > .chambre > .lit:nth-of-type(4) > .nom-prenom::before {
	content: '③ ';
  }
  #hebergement-bloc-droit > div > .chambre > .lit:nth-of-type(5) > .nom-prenom::before {
	content: '④ ';
  }
  #hebergement-bloc-droit > div > .chambre > .lit:nth-of-type(6) > .nom-prenom::before {
	content: '⑤ ';
  }
  #hebergement-bloc-droit > div > .chambre > .lit:nth-of-type(7) > .nom-prenom::before {
	content: '⑥ ';
  }

  #hebergement-bloc-droit > div > .chambre > .lit-vide {
	color: #A0A0A0;
	background-color: #32a6f9;
  }
  #hebergement-bloc-droit > div > .chambre > .lit-vide > .provenance::before {
	content: "(Vide)";
	color: white;
  }
  #hebergement-bloc-droit > div > .chambre > .lit > .nom-prenom {
	color: blue;
  }
  #hebergement-bloc-droit > div > .chambre > .lit > .nom-prenom > input {
	font-size: 10px;
  }
  #hebergement-bloc-droit > div > .chambre > .lit > .provenance {
	color: #A0A0A0;
	font-size: smaller;
  }
  
  .chargement {
	position: fixed; /* Positionne le div par rapport à la fenêtre du navigateur */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8); /* Couleur de fond avec une opacité */
	z-index: 1000; /* Assure que le div est en premier plan */
	text-align: center;            
	display: flex; /* Utilise Flexbox pour aligner le contenu */
	justify-content: center; /* Centre horizontalement */
	align-items: center; /* Centre verticalement */
	color: white; /* Couleur du texte */
	text-align: center; /* Centre le texte horizontalement */
	font-size: larger;
	display: none;
  }

  .loader {
	border: 10px solid #f3f3f3; /* Couleur de fond du cercle */
	border-top: 10px solid #004576; /* Couleur de la partie tournante */
	border-radius: 50%;
	width: 60px;
	height: 60px;
	animation: spin 2s linear infinite; /* Animation de rotation */
	margin-right: 50px;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

tr.filtre-absence-annule [id^="infos-"] {
    text-decoration: line-through;
}

tr:not(.filtre-retour) [id^="annule-"], tr.filtre-absence-notifie [id^="annule-"] ,
tr:not(.filtre-retour) [id^="notifie-"], tr.filtre-absence-annule [id^="notifie-"], 
tr.filtre-retour [id^="signaler-notif-"], 
tr:not(.filtre-retour) [id^="supprimer-notif-"], tr.filtre-absence-annule [id^="supprimer-notif-"],
tr.filtre-retour [id^="signaler-annul-"], tr.filtre-absence-annule [id^="signaler-annul-"], 
tr:not(.filtre-absence-annule) [id^="supprimer-annul-"]
{
	display: none;
}

tr.filtre-absence-nuit-annule [id^="absnuit_infos-"] {
    text-decoration: line-through;
}

tr:not(tr.filtre-absence-nuit-annule) [id^="absnuit_annule-"],
tr.filtre-absence-nuit-annule [id^="absnuit_annuler_bouton-"], 
tr:not(.filtre-absence-nuit-annule) [id^="absnuit_retablir_bouton-"]
{
	display: none;
}

.inscription-checkbox {
	width: 24px; /* Largeur du checkbox */
	height: 24px; /* Hauteur du checkbox */
	cursor: pointer;
}

body {
    background-color: #f8f9fa;
}

.week-list {
    border: 1px solid #ced4da;
    border-radius: 4px;
    overflow-y: auto;
	height: 350px;
	min-height: 100px;
	resize: vertical;
    padding: 10px;
    background-color: #fff;
}

.week-item {
    display: flex;
    align-items: center;
    padding: 5px 0;
    padding-top: 0px;
    padding-bottom: 0px;
}

.week-item input {
    margin-right: 10px;
}

.week-span {
    margin: 0px;
    width: 100%;
}

.week-span > label {
    width: calc(100% - 35px);
}

.week-span:hover {
    color: #0022ff;
}

input[type="checkbox"]:checked + label {
    font-weight: bold; /* Exemple : rend le texte en gras */
}

.week-item:nth-of-type(odd) > .week-span {
    background-color: #e3f2fd; /* Exemple : change le fond en gris clair */
    color: #333; /* Exemple : change la couleur du texte */
    margin: 0px;
}

.elt_transparent {
	background: transparent; 
	border: none;
}