:root {
    --background-jour: white;
    --color-conge: mediumspringgreen;
    --color-conge-legal: #99CC99;
    --color-teletravail: #97F4F6;
    --color-suppression: #E96464;
    --repeat-gradient-congeV: repeating-linear-gradient(90deg, var(--color-conge), transparent 3px, var(--color-conge) 3px);
    --repeat-gradient-suppression: repeating-linear-gradient(to right, transparent, var(--color-suppression) 2px );
    --triangle-top-left: linear-gradient(to bottom right, rgba(255, 255, 255, 0.0) 50%, white 50%);
    --triangle-bottom-right: linear-gradient(to top left, rgba(255, 255, 255, 0.0) 50%, white 50%);
}
.planning {
	/*border: 1px solid #F00;*/
}

.planning ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

/** titre d'un mois */
.titreMois {
	display : block; 
	position: relative; 
	z-index:10; 
	background-color:cornsilk;
	font-variant:small-caps; 
	border-bottom: 1px solid #000;
}

.planning .mois li {
	display : inline;
	float: left;
	border: 1px solid #000;
	width: 79px;
	font-weight: bold;
}

.planning .mois .semaines li {
	/*display : block;*/
	float: none;
	border: none;
	border-bottom: 1px solid gray;
	font-weight: normal;
}

/* le span regroupant un jour entier */
.planning .mois .semaines .jours .jour {
	position: relative;
}

/* couleur horaire */
.planning .mois .semaines .jours .ch {
	width: 3px;
	display: block;
	float: left;
}

/* premiere lettre du nom du jour */
.planning .mois .semaines .jours .lj {
	width: 8px; 
	float: left;
}

/* numero du jour */
.planning .mois .semaines .jours .nj {
	width: 15px;
}

/* vacances scolaires */
.planning .mois .semaines .jours .vac, .planning .mois .semaines .jours .nvac {
	width: 3px;
  display: block;
	float: left;
}

.planning .mois .semaines .jours .vac {
	background-color: gold;
}

/* durée associée */
.planning .mois .semaines .jours .da {
	width: 30px;
	font-size: 9px;
	margin-left: 2px;
}

/* numero de semaine */
.planning .mois .semaines .jours .ns {
	position: absolute;
	//font-size: 36px;
	font-size: 12px;
	color: #555;
	text-align: right;
	font-weight: normal;
	border-bottom: 0px;
  position:absolute; 
  left:48px; 
  //top:-27px; 
  top:-2px; 
  z-index: 100;
  font-weight: bold;
}

/* tooltip horaire */
.planning .mois .semaines .jours .th {
	float: right;
  z-index:100;
  //background-color: red;
  position: absolute;
  left:51px; 
}

.planning .mois .semaines .jours li {
	display : block;
	float: none;
	border: none;
	border-bottom: 1px dotted grey;
	text-align: left;
	font-weight: normal;
	font-size: 10px;
	position: relative;
	z-index: 2;
}

.planning .mois .semaines .jours li:last-child {
	border-bottom: 1px solid #888;
}

.jour {
   overflow:hidden;
}

.horsPlanning {
	background-color: #BBBBBB;
}

.ferie {
	background-color: #BBBBBB;
}

.chome {
	background-color: #DDDDDD;
}

.conge {
	background-color: var(--color-conge);
}

.congeMinute, .congeAM, .congePM, .congeLegalAM, .congeLegalPM {
	background-repeat: no-repeat;
	background-position: right;
	z-index: 0;
}
.congeMinute {
    position: relative;
}
.congeMinute:before {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(to top left, rgba(255,255,255,0) calc(50% - 1px), #1F602F, rgba(255,255,255,0) calc(50% + 1px) );
    content: '';
}

.congeAM {
	background-image: 	 -webkit-linear-gradient(right bottom, white 50%, var(--color-conge) 70%);
	background-image:    -moz-linear-gradient(left top, white 50%, var(--color-conge) 70%);
  background-image:      -o-linear-gradient(left top, white 50%, var(--color-conge) 70%);
	background-image:					linear-gradient(to left top, white 50%, var(--color-conge) 70%);
}

.congePM {
	background-image: -webkit-linear-gradient(left bottom, white 50%, var(--color-conge) 70%);
  background-image:    -moz-linear-gradient(right bottom, white 50%, var(--color-conge) 70%);
  background-image:      -o-linear-gradient(right bottom, white 50%, var(--color-conge) 70%);
	background-image:					linear-gradient(to right bottom, white 50%, var(--color-conge) 70%);
}

.congeLegal {
	background-color: var(--color-conge-legal);
}

.congeLegalAM {
	background-image: -webkit-linear-gradient(right top, white 50%, var(--color-conge-legal) 60%);
  background-image:    -moz-linear-gradient(left top, white 50%, var(--color-conge-legal) 60%);
  background-image:      -o-linear-gradient(left top, white 50%, var(--color-conge-legal) 60%);
	background-image:					linear-gradient(to left top, white 50%, var(--color-conge-legal) 60%);
}

.congeLegalPM {
	background-image: -webkit-linear-gradient(left bottom, white 50%, var(--color-conge-legal) 60%);
  background-image:    -moz-linear-gradient(right bottom, white 50%, var(--color-conge-legal) 60%);
  background-image:      -o-linear-gradient(right bottom, white 50%, var(--color-conge-legal) 60%);
	background-image:					linear-gradient(to right bottom, white 50%, var(--color-conge-legal) 60%);
}

.ferme {
	background-color: #00F600;
}

.horaireForce {
	color: red;
}	

.congeV {	 /* jour conge toute la journee en cours de validation */
 	background: var(--repeat-gradient-congeV); 
}
.congeS {	 /* jour conge toute la journee en cours de suppression */
	background: var(--repeat-gradient-suppression)
}
.congeAMV {	 /* jour conges le matin en cours de validation */
	 background: var(--triangle-top-left), var(--repeat-gradient-congeV);
}
.congeAMS {	 /* jour conges le matin en cours de suppression */
	background: var(--triangle-top-left), var(--repeat-gradient-suppression);
}
.congePMV {	/* jour conges l'apres midi en cours de validation */
	background: var(--triangle-bottom-right), var(--repeat-gradient-congeV);
}
.congePMS {	 /* jour conges l'apres midi en cours de suppression */
	background: var(--triangle-bottom-right), var(--repeat-gradient-suppression);
}
	
.teletravailV, .teletravailJour, .teletravailS {
	position:absolute;
	width:100%;
	height:100%;
	right:0px;
	top:0px;
	z-index: -1000;
	overflow:hidden;
}
.teletravailAMV, .teletravailPMV, .teletravailAM, .teletravailPM, .teletravailAMS, .teletravailPMS {
	position:absolute;
	width:100%;
	height:100%;
	right:0px;
	top:0px;
	z-index: -1000;
	-webkit-transform:rotate(-8deg);
	-webkit-transform-origin:var(--triangle-position);
	transform:rotate(-8deg);
	transform-origin: var(--triangle-position);
	overflow:hidden;
}

.teletravailAMV, .teletravailAM, .teletravailAMS {
	--triangle-position: bottom left
}
.teletravailPMV, .teletravailPM, .teletravailPMS {
	--triangle-position: top right
}

.teletravailV:before, .teletravailAMV:before, .teletravailPMV:before {
	content:"";
   position:absolute;
   left:3px;
   top:0px;
   right:0px;
   bottom:0px;
   background:repeating-linear-gradient(52deg, var(--color-teletravail), transparent 3px, var(--color-teletravail) 3px);
}
	
.teletravailS:before, .teletravailAMS:before, .teletravailPMS:before {
	content:"";
   position:absolute;
   left:3px;
   top:0px;
   right:0px;
   bottom:0px;
   background: var(--repeat-gradient-suppression);
}	
.teletravailJour, .teletravailAM, .teletravailPM {
	background: var(--color-teletravail);
}

/**
 * Highlight des jours speciaux
 */
.occToday, .occFirstDay, .occMiddleDay, .occLastDay, .occOnlyDay {
	background-position: center;
}

li.occToday { /* aujourd'hui */ 
	//background-image:url(images/planning/today.gif);
	color: red;
	border-bottom: 5px solid red;
}
.occFirstDay { /* validation d'absence : premier jour */ 
	background-image:url(images/planning/firstday.png);
}
.occMiddleDay { /* validation d'absence : ni premier ni dernier jour */ 
	background-image:url(images/planning/middleday.png);
}
.occLastDay { /* validation d'absence : dernier jour */ 
	background-image:url(images/planning/lastday.png);
}
.occOnlyDay { /* validation d'absence : un seul jour */ 
	background-image:url(images/planning/onlyday.png);
}
	

/**
 * valeurs au dessus du planning
 */
 
#planningValeurs {
    padding: 0; 
    margin: 15px 0 15px 0;
}

#planningValeurs li {
    display: inline;  
    list-style: none; /* nécessaire pour IE7 */ 
    padding: 4px;
}

#planningValeurs li:before {
  content: " | ";
}

#planningValeurs li:first-child:before {
  content: normal;
  content: ""; /* pour Safari */
}

#planning-legend {
    display: inline-block;
}
#planning-legend li {
	display: inline;  
    list-style: none; /* nécessaire pour IE7 */ 
    padding: 4px;
}