/* 	99Lime.com HTML KickStart by Joshua Gatcke	style.css */
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
* { box-sizing: border-box; }

h1,h2,h3,h4,h5,h6 { font-family: "Raleway", sans-serif, arial, verdana; font-weight:500; }
h1 { font-size:2.25em; font-variant:small-caps; }
h2 { font-size:2em; font-variant:small-caps; font-weight:600; border-left:0.5em solid #053D5F; border-bottom:1px solid #053D5F; padding-left:0.25em; display:inline-block; text-shadow:2px 2px 3px #CCC; }
h3 { font-size:1.75em; font-variant:small-caps; font-weight:600; margin:0 0 0.25em 0; color:#053D5F; }
h4 { font-size:1.25em; font-weight:600; margin:1.5em 0 0.25em 0; color:rgb(49, 151, 42); }
h5 { font-size:0.9em; font-weight:600; }
h6 { font-size:0.8em; font-weight:600; }

hr{border: 0; border-bottom: solid 1px #053D5F; margin:2em 0 1em 0; }

a:link, a:visited {color : rgb(5,61,95); }
a:hover { color: rgba(5,61,95,0.75); }

blockquote{ font-family: "Raleway", sans-serif, arial, verdana; font-size:1em; line-height:1.5em; font-style: italic; margin:30px; padding:0 0 0 10px; border-left:3px solid #ccc; }
html{ min-height:100%; background:#053D5F; color:#414141; font-family: "Raleway", sans-serif, arial, verdana; }
body{ width: 100%; background: #b5d4b3; background: linear-gradient(216deg, rgba(49,151,42,1) 0%, rgba(181,212,179,1) 46%);
; margin:0; padding:0; color:#414141; font-weight:300; font-size:12pt; font-family: "Raleway", arial, verdana, sans-serif; text-shadow: 0px 0px 1px transparent; }
.grid{ width: calc(100% - 2em); background: #FFFFFF; padding: 5em 2em 2em 2em; margin: 0 auto; max-width: 1680px; border-bottom-left-radius: 1em; border-bottom-right-radius: 1em; 
	box-shadow: 2px 2px 5px #666; }
.Logo { display: block; margin: 0 auto; margin-top: 4em; width: 200px; max-width: 50%; background: white; border-radius:5px; padding:0.5em; }
#identification { background: #053D5F; display: flex; justify-content: center; align-items: flex-start; padding-top: 3em; }
form { width:100%; margin: 1em 0; border:none; }
form.formidentif { width:600px; max-width: 95%; background: #F4F4F4; padding:1em 3em 2em; border:1px solid #000; border-radius:5px; }
form.formidentif input { display:block; width: 100%; margin:0.5em 0; padding:0.5em; }
#formulaire { max-width: 100% ; border: 1px solid #ccc; padding:1em; margin: 0 auto; background: #F4F4F4; }
#listing { max-width: 100%; margin: 0 auto; background: #FFF; }
#entete { max-width: 100%; margin: 0 auto; background: #F4F4F4; position: sticky; top:3.3em; z-index: 10000; }

form.recherche { width : 100%; background: #ebdbc7; padding:1em 2em; border:1px solid #000; border-radius:5px; margin-bottom: 2em; }

table.list { border:1px solid #666; border-collapse: collapse; margin: 1em auto; width:100%; max-width: 100%; }
table.list tr { border-bottom: 1px solid #AAA; background: #FFF; }
table.list tr:nth-child(odd){ background: #b1daea; }
table.list td { padding: 0.25em 0.25em; }
table.list thead tr td { font-variant: small-caps; font-weight: 600; color: #053D5F; background: #E0E0E0; }

table.TabTR { border:1px solid #666; border-collapse: collapse; margin: 3em auto; width:100%; max-width: 100%; }
table.TabTR th { font-size: 1.2em; padding: 0.25em 0.25em; border: 1px solid #666; font-weight: 600; color: #053D5F; background: #F0F0F0; }
table.TabTR td { font-size: 1.2em; padding: 0.25em 0.25em; border: 1px solid #666; }

table.TabNdF { border:1px solid #666; border-collapse: collapse; margin: 3em auto; width:100%; max-width: 100%; }
table.TabNdF thead th { font-size: 1.2em; padding: 0.25em 0.25em; border: 1px solid #666; font-weight: 600; color: #053D5F; background: #F0F0F0; }
table.TabNdF tbody tr td { font-size: 1em; padding: 0.25em 0.25em; border: 1px solid #666; }

table.echanges { border-collapse: collapse; border:none; margin:0; width:100%; max-width: 100%; }
table.echanges tr { border-bottom: 1px dotted #ccc; background: #FFF;  }
table.echanges td { font-size: 1.1em; padding: 0.5em; border: none; padding-bottom: 1.5em;} 
table.echanges td strong { display: block; color: rgb(49, 151, 42); font-weight: 500; margin: 5px 0; } 
table.echanges td p { display: block; font-size: 0.9em; margin: 0 0 5px 0;  }
table.echanges td em { display: block; font-size: 0.9em; }
#discusslide { height:450px; overflow: auto; border:1px solid #666; }

.largeurplanning { width:100%; overflow: auto; margin: 2em 0; }
.colsemaine { width:100%; min-width: 1480px; display: flex; flex-wrap: nowrap; align-content: stretch; justify-content: space-between; padding: 0; margin: 0; }
.coljour1,.coljour2, .coljour3, .coljour4, .coljour5  { width:19%; padding:0;  }
.coljour6,.coljour7  { width:2%; padding:0; border:1px solid #B0200F; }
.coljour1 h3, .coljour2 h3, .coljour3 h3, .coljour4 h3, .coljour5 h3, .coljour6 h3, .coljour7 h3 { border: 1px solid #ccc; padding:5px; text-align: center; background: #D7D6D6; margin-bottom: 10px; margin-top: 0;}
.colmatin { display: flex; flex-wrap: wrap; justify-content:flex-start; align-content: flex-start; align-items:flex-start; width : 100%; border: 1px solid #ccc; padding:5px; min-height:30vh; background: #F4F4F4; margin: 0; }
.colapm { display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; align-items: flex-start; width : 100%; border: 1px solid #ccc; padding:5px; min-height:30vh; background: #F4F4F4; margin: 0; }
.coljour1 > .total, .coljour2 > .total, .coljour3 > .total, .coljour4 > .total, .coljour5 > .total, .coljour6 > .total, .coljour7 > .total { 
	border: 1px solid #ccc; padding:5px; text-align: center; background: #F0F0F0; margin: 0; margin-top: -1px; }
.coljour1 > .entete, .coljour2 > .entete, .coljour3 > .entete, .coljour4 > .entete, .coljour5 > .entete, .coljour6 > .entete, .coljour7 > .entete { 
	border: 1px solid #ccc; padding:5px; text-align: center; background: #F0F0F0; margin-bottom: -1px; font-weight: 600; }
.colrepas { width:100%; border:1px solid #ccc; padding:5px; background:#F4F4F4; margin: 5px 0; text-align: center; font-size:12px; }
.infocalendar { display: block; font-size: 14px; border:1px dotted #666; padding:3px; width:100%; }
.infocalendar p { margin:0; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.infocalendarTT { display: block; font-size: 15px; border:1px solid #333; padding:4px; width:100%; }
.infocalendarTT p { margin:0; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.total { font-size: 18px; font-weight: 500; }
.creneaucongesjour { position: relative; border: 1px solid #333; background: #666; color: white; width: 100%; text-align: center; min-height: calc(60vh + 6em); display: flex;
 align-items: center; }
.creneaucongesjourNS { position: relative; border: 1px solid #FF0000; background: #9d0018; color: white; width: 100%; text-align: center; min-height: calc(60vh + 6em); display: flex;
 align-items: center; }
.creneaucongesjour .item { width: 100%; text-align: center; }
.creneaucongesjourNS .item { width: 100%; text-align: center; }

.largplannatt { width:100%; overflow: auto; margin: 2em 0; }
.colsematt { width: 1610px; display: flex; flex-wrap: nowrap; align-content: stretch; justify-content: space-between; padding: 0; margin: 0; }
.colnom { width:170px; height: 120px; padding:5px; text-align: right; }
.coljatt{ width:144px; height: 120px; padding:0; margin: 0; text-align: center; }
.colweatt { background: #ccc; padding:0; margin: 0; text-align: center; }
.jouratt { position: relative; padding: 0; margin: 0; width:144px; height:120px; }
.dropzone { position: relative; top:0; left:0; width:72px; min-height: 120px; border: 1px solid #D5D5D5; float: left; }
.dropzone.matin { border-left-color: #666; border-bottom-color: #666; }
.dropzone.apmidi { border-right-color: #666; border-bottom-color: #666;  }
.task{ position: absolute; height: 20px; overflow: hidden; border:1px solid #CCC; z-index: 9999; text-align: left; opacity: 1; }
.highlight { background: rgba(240,192,193, 0.70); }
.dragging { opacity: 0.70; } 
.ui-draggable-helper { width: 80px !important; border:1px solid #666; background: #ccc; font-size: 12px; }

/*--------------------------------- TABS -----------------------------------*/
ul.tabs{ margin:10px 0 -1px 0; padding:0; width:100%; border-bottom:1px solid #e5e5e5; float:left; font-size:0; }
ul.tabs.left{text-align:left;}
ul.tabs.center{text-align:center;}
ul.tabs.right{text-align:right;}
ul.tabs.right li{margin:0 0 0 -2px;}
ul.tabs li{font-size:14px; list-style-type:none; margin:0 -2px 0 0; padding:0; display:inline-block; position:relative; top:0; left:0; zoom:1; }
ul.tabs li a{ text-decoration:none;	color:#666;	display:inline-block; padding:9px 15px; position: relative;	top:0; left:0; line-height:100%; background:#f5f5f5; box-shadow: inset 0 -3px 3px rgba(0,0,0,0.03); border:1px solid #e5e5e5; border-bottom:0; font-size:0.9em; zoom:1; }
ul.tabs li a:hover{ background:#fff; }
ul.tabs li.current a{ position:relative; top:1px; left:0; background:#fff; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; color:#222; }
.tab-content{border:1px solid #efefef; border:1px solid #e5e5e5; background:#fff; clear:both; padding:20px; margin:0 0 40px 0; }

#footer{position: relative; margin:3em 0 0 0; padding:0px; padding-top:1em; color:#fff; background:#053D5F; border-top:solid 1px black; }
#footer a:link{color:#fff; text-decoration:none;}	
#footer a:visited{color:#fff; text-decoration:none;}	
#footer a:hover{color:#F4F4F4; text-decoration:none; border-bottom:1px dotted #F4F4F4;}	
#footer > .grid { background:#053D5F; box-shadow: none; border-radius: none; }

nav { margin: 0 auto; padding: 0; width: 100%; }
.conteneur-nav { position: fixed; top:0; width: 100%; background: #F4F4F4; border-bottom: 1px solid #ccc; z-index: 10000; }
nav input[type=checkbox] { display: none; }
nav label { display: inline-block; width: auto; padding: 0.35em 15px; text-align: center; float: right; }
nav ul { display: none; list-style-type: none; background-color: #F4F4F4; margin: 0; }
nav input[type=checkbox]:checked + ul { display: flex; flex-flow: column wrap; margin-top: 2em; }
nav .titresite { float: left; position: absolute; margin: 0.25em 0px 0.25em 0.5em; }
nav ul li { display: flex; text-align: left; }
nav ul li.deroulant { flex-direction: column; }
nav > div > ul > li > a { color: #333; padding: 0.5em 1em; }
nav a { display: block; text-decoration: none; color: black; padding: 0.5em 0px 0.25em; font-weight: 600; }
.sous { display: flex; flex-flow: column wrap; z-index: 1000; padding-left: 1em; }
.sous li { text-align: left; }
.sous a { padding: 0.25em 0 0 1em; background-color: #F4F4F4; font-weight: 300; }

/* FLEX */
.row { display: flex; justify-content: space-around; flex-wrap: wrap; }
.col60 { width: 58%; padding: 0.25em 0.5em; }
.col70 { width: 68%; padding: 0.25em 0.5em; }
.col40 { width: 38%; padding: 0.25em 0.5em; }
.col50 { width: 48%; padding: 0.25em 0.5em; }
.col45 { width: 43%; padding: 0.25em 0.5em; }
.col55 { width: 53%; padding: 0.25em 0.5em; }
.col30 { width: 31%; padding: 0.25em 0.5em; }
.col25 { width: 23%; padding: 0.25em 0.5em; }
.col20 { width: 18%; padding: 0.25em 0.5em; }
.col100 { width: 100%; padding: 0.25em 0.5em; }

.rowsmall { display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: flex-end; }
.col08 { width: 8%; padding: 5px; margin-bottom: 1em; }
.col16 { width: 16,6%; padding: 5px; margin-bottom: 1em; }
.col24 { width: 24.9%; padding: 5px; margin-bottom: 1em; }
.col100 { width: 100%; padding: 5px; margin-bottom: 1em; }

.card { border:1px solid #aaa; border-radius: 10px; padding:10px; box-shadow: 2px 2px 2px #F4F4F4; background: #ebdbc7; margin: 1em; }
.enmodif { background:#ffdede; padding:0.5em 1em; border-radius: 5px; border: 1px solid #750000; }
.encrea { background:#ebdbc7; padding:0.5em 1em; border-radius: 5px; border: 1px solid #827564; }

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

.clear { clear: both; }

input, select, button, textarea { font-family: "Raleway", sans-serif, arial, verdana; margin: 5px; font-size: 1em; border:1px solid rgb(118,118,118); padding:2px; }
label { font-weight:600; display: inline-block; width: 35%; }
input[type="text"], select, textarea { display: inline-block; width: calc(65% - 20px); }
textarea { height:5em; vertical-align: text-top; }
input[type="date"] { display: inline-block; width:auto; }
fieldset { display: block; width: 100%; margin-bottom: 1em; border-radius: 5px; border: 1px solid #000; }
legend { background-color: #000; color: #fff; padding: 3px 6px;}
progress { height: 1.75em; width: 8em; margin: 0; padding: 0; }

.button, input[type="submit"], input[type="reset"], input[type="button"]{ border:none; padding: 5px 10px; background: #C8C8C8; color: #FFFFFF; text-decoration: none; margin: 5px; }
.green { background:rgb(49, 151, 42) !important; color:white !important; }
.green:hover { background:rgba(49, 151, 42, 0.75) !important; color:white !important; }
.red { background: rgb(167, 48, 50) !important; color:white !important; }
.red:hover { background:rgba(167, 48, 50, 0.75) !important; color:white !important; }
.blue { background: rgb(5,61,95) !important; color:white !important; }
.blue:hover { background:rgba(5,61,95,0.75) !important; color:white !important; }
.large { font-size: 1.3em; padding: 10px 20px;}
.small { font-size: 0.9em; }


@media screen and (min-width: 980px) { 
	nav { padding:0; width: 100%; }
	.conteneur-nav { position: fixed; width:100%; border: 0; background: #f4f4f4; border-bottom: 1px solid #ccc; font-size: 1.4em; }
	nav label, nav input { display: none; }
	nav input[type=checkbox]:checked + ul, nav ul { display: flex; flex-flow: row wrap; background-color: white; justify-content: flex-start; }
	nav > div > ul { padding-left: 0; }
	nav > div > ul > li > a { color: inherit; padding-top: 0.65em; }
	nav > div > ul > li.current { background: #ccc; color:rgb(49, 151, 42) !important; }
	nav a:hover { color: #000 !important; background: #ccc; }
	.sous { display: none; border: 1px solid #CCC; background-color: #F4F4F4; position: absolute; width: auto; margin-top: 2em; border-radius: 5px; padding: 0.2em 1em; }
	nav > div > ul li:hover .sous { display: flex; flex-flow: column wrap; }
	.sous li { padding: 0.25em 0; }
	.sous a { padding: 0; }
	.sous a:hover {}
	.deroulant > a::after { content: " ▼"; font-size: 12px; }
	nav .titresite { display: none; }
}

@media screen and (max-width: 980px) { 
	.col20, .col25, .col30, .col40, .col50, .col45, .col55, .col60, .col70 { width:100%; }
	.col08, .col16, .col24 { width:49%; }
	.left, .right, .center { text-align:center; } 
	body > .grid { padding:3em 5px; box-shadow: none; }
	body { background: white; width:100%; font-size:11pt; }
	label { font-weight:600; display: inline-block; width: 100%; text-align: left !important; }
	input[type="text"], select, textarea { display: inline-block; width: 100%; }
}
@media (max-width: 768px) { 
	body { background: white; width:100%; }
	body > .grid { padding:3em 5px; box-shadow: none; }
	.col08, .col16, .col24 { width:100%; }
	}
@media print { 
	#footer { display:none; }
	body,html { background: white; padding:0; }
	.navbar { display:none; }
	.colsemaine { width:100%; min-width:100%; }
	.noprint { display:none; }
	.tabs { display: none; }
	.avataractions { display: none; }
	.avatardetail{line-height:1; }
	.tab-content { border:0; padding: 0; }
	.coljour1 h3, .coljour2 h3, .coljour3 h3, .coljour4 h3, .coljour5 h3, .coljour6 h3, .coljour7 h3 { font-size:0.8em;}
	.largeurplanning { overflow: hidden; margin: 0;}
	.coljour7 { border:none; }
}

.heartbeat {
	-webkit-animation: heartbeat 1.5s ease-in-out 1.5s infinite both;
	        animation: heartbeat 1.5s ease-in-out 1.5s infinite both;
}
@-webkit-keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}