body {
    font-size: 0.85em;
    font-family: Verdana, 'Trebuchet MS', sans-serif;
}
table, th, td {
    border: 1px solid;
    border-collapse: collapse;
}
.tarea {
    font-size: 0.95em;
    font-family: Verdana, 'Trebuchet MS', sans-serif;
}
th_jour {
    text-align: center;
    padding: 6px;
    border: darkgrey 1px solid;
    background: linear-gradient( 180deg, #eaeaea, #fcfcfc);
}
th_black {
    color: #cccccc;
    padding: 6px;
    border: #555555 1px solid;
    background: black;
}
td_jour {
    padding: 3px;
    border: darkgrey 1px solid;
    background: white;
}
td_black {
    padding: 3px;
    border: #666666 1px solid;
    background: #303030;
}

ul {
    list-style: none;
/*    font-family: Calibri, 'Trebuchet MS', sans-serif;
    font-size: 0.85em; */
/*    padding: 2px;
    cursor: pointer;
    border: gainsboro 1px solid; */
}

.texte {
    font-size: 0.85em;
    font-family: Verdana, 'Trebuchet MS', sans-serif;
    color: #2a2a2a;
}
.texte-big {
    font-size: 0.95em;
    font-family: Verdana, 'Trebuchet MS', sans-serif;
 }
.texte-small {
    font-size: 0.79em;
    font-family: Verdana, 'Trebuchet MS', sans-serif;
}
.texte-smaller {
    font-size: 6.5em;
    font-family: Verdana, 'Trebuchet MS', sans-serif;
    color: #5A5A5A;
}
.normal {
    font-weight: normal;
}
.word-wrap {
    word-wrap: break-word;
}
.big {
    font-family: Verdana, 'Trebuchet MS', sans-serif;
    font-size: 1em;
    font-weight: bold;
}
.bigger {
    font-family: Verdana, 'Trebuchet MS', sans-serif;
    font-size: 1.1em;
    font-weight: bold;
}
.most_bigger {
    font-family: Verdana, 'Trebuchet MS', sans-serif;
    font-size: 1.3em;
    font-weight: bold;
}
.boite {
	border: 1px solid #888;
    -moz-border-radius: 8px; -webkit-border-radius:4px; border-radius:4px; padding:4px;
	color:#444;
    padding: 10px;
    height: auto;
}
.boite-nopad {
    border: 1px solid #4e6542;
    color:#888;
    -moz-border-radius: 4px; -webkit-border-radius:4px; border-radius:4px; padding:4px;
    padding-bottom: 5px;
    height: auto;
    width: auto;
}
.boite_suivi {
    -moz-border-radius: 15px; -webkit-border-radius:15px; border-radius:15px;
    color:#444;
    background-color: #dce9e8;
    padding: 10px;
    height: auto;
}
.pointer {
    cursor:pointer;
}
.colresize {
    cursor:col-resize;
}
/* mises en page */
.left {
    text-align: left;
}
.center {
    text-align: center;
}
.right {
    text-align: right;
}
.fleft { float:left;}
.fright { float:right; }
.clear { clear:both; }
.cfleft { clear:left;}
.none { display:none; }
.bold {
    font-weight: bold;
}
.italic {
    font-style: italic;
}

.flex {
    display: flex; 
}
.flex-space {
    display: flex;
    justify-content: space-evenly;
}
.flex-centrage {
    display: flex;
    justify-content: center;
}

.flex-centrage-space {
    align-items: center;
    justify-content: space-evenly;
}
.flex-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
 /*   justify-content: center; */
}
.flex-row {
    display: flex;
    flex-direction: row;
/*    align-content: flex-start; */
}
.flex-wrap {
    flex-wrap: wrap;
}

.h15 {
    font-size: 0.98em;
}
.ml3 {
    margin-left: 3px;
}
.ml5 {
    margin-left: 5px;
}
.ml10 {
    margin-left: 10px;
}
.ml15 {
    margin-left: 15px;
}
.ml20 {
    margin-left: 20px;
}

.ml60 {
    margin-left: 60px;
}
.ml80 {
    margin-left: 80px;
}
.mt3 {
    margin-top: 3px;
}
.mt5 {
    margin-top: 5px;
}
.mt7 {
    margin-top: 7px;
}
.mt4 {
    margin-top: 4px;
}
.mt10 {
    margin-top: 10px;
}
.mt15 {
    margin-top: 15px;
}
.mt20 {
    margin-top: 20px;
}
.mt40 {
    margin-top: 40px;
}
.mt60 {
    margin-top: 60px;
}
.mb5 {
    margin-bottom: 5px;
}
.mb10 {
    margin-bottom: 10px;
}
.mb15 {
    margin-bottom: 15px;
}
.mb20 {
    margin-bottom: 20px;
}
.mb40 {
    margin-bottom: 40px;
}
.mr10 {
    margin-right: 10px;
}
.mr5 {
    margin-right: 5px;
}
.w40 {
    width: 40px;
}
.w80 {
    width: 80px;
}
.w100 {
    width: 100px;
}
.w120 {
    width: 120px;
}
.w140 {
    width: 140px;
}
.w150 {
    width: 150px;
}
.w160 {
    width: 160px;
}
.w190 {
    width: 190px;
}
.w200 {
    width: 240px;
}
.w310 {
    width: 310px;
}
.w500 {
    width: 500px;
}
.w700 {
    width: 700px;
}
.w750 {
    width: 750px;
}
.w800 {
    width: 800px;
}
.padt10{
    padding-top: 10px;
}
.padt2{
    padding-top: 2px;
}
.padt5{
    padding-top: 5px;
}
.pad5 {
    padding: 5px;
}
.pad10 {
    padding: 10px;
}
.padb10 {
    padding-bottom: 10px;
}
.padb5 {
    padding-bottom: 5px;
}
.padl5 {
     padding-left: 5px;
 }
.padr5 {
    padding-right: 5px;
}
.h20 {
    height: 20px;
}
/* couleurs */
.fond_degrade {
    background: linear-gradient( 200deg, #d7e998, #ffffff);
}
.fond_degrade_leger {
    background: linear-gradient( 200deg, #cde2ee, #f9fbfc);
}

.collapse {
    border-collapse: collapse;
}
.border {
    border: #666666 1px solid;
}
.border_black {
    border: #666666 1px solid;
    border-radius: 3px;
}
.border-bas {
    border-bottom: #2191c0 2px groove;
}
.border-bas-fin {
    border-bottom: rgba(235,235,235,0.86) 1px solid;
}
.carre {
    border-radius: 4px;
    border: rgba(180,180,180,0.86) 1px solid;
    box-shadow: 2px 2px 2px 2px rgba(66,66,66,0.90);
}
.shadow {
    padding: 7px;
    width: auto;
    height: auto;
    background-color: #fefefe;
    border-radius: 10px;
    border: #777777 1px solid;
    box-shadow: 4px 4px 5px 2px rgba(200,200,200,0.90);
 }
.shadow_noauto {
    padding: 7px;
    background-color: #fefefe;
    border-radius: 10px;
    border: #777777 1px solid;
    box-shadow: 4px 4px 5px 2px rgba(200,200,200,0.90);
}

.shadow_black {
    background: #404040;
    border: rgba(180,180,180,0.4) 1px solid;
    border-radius: 10px;
    box-shadow: 3px 3px 4px 2px rgba(20,20,20,0.86);
}
.fond_ligne {
    background: linear-gradient( 180deg, #eaeaea, #fcfcfc);
}
.fond_ligne_black {
    background: #404040;
}
.fond_total {
    background: #cef4f3;
    font-size: 1em;
}
.fond_total_black {
    background: #406e60;
    color: white;
    font-size: 1em;
}
.fond_soustotal {
    background: #cef4f3;
    font-size: 1em;
    font-style: italic;
}
.fond_semaine {
    background: #37bebb;
    color: white;
    font-size: 1em;
}
.fond_semaine_black {
    background: #345249;
    color: white;
    font-size: 1em;
}
.fond_message {
    background-color: #3a8104;
    color: white;
    font-size: 1em;
    padding: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    width: auto;
}
.blanc {
    background: #ffffff;
    color: black;
}
.selection {
    background: lightsalmon;
    color: white;
}
.teal {
    color: #008080;
}
.red {
    color: darkorange;
}
.bordeaux {
    color: #900000;
}
.color_white {
    color: #ffffff;
}
.green {
    color: lightseagreen;
}
.white {
    color: white;
}
.orange_bold {
    background-color: darkorange;
    color: white
}
.green_bold {
    background-color: #3f7506;
    color: white
}
.red_bold {
    background-color: #902e00;
    color: white
}
.lightgray {
    background-color: #b1cfd1;
    color:white;
}
.validation_chef {
/*    background: mediumseagreen !important;*/
    background: #acc333 !important;
    color: white !important;
}
.validation_user {
    background: gold !important;
    color: black !important;
}
.no_validation_user {
    background: #feeebd !important;
    color: #999999 !important;
}
.ferie {
    background: #fafafa !important;
    color: red !important;
}
/*
.conge {
    background: #a012b0 ; !important
    color: white; !important;
} */
.conge-wait {
    background: #21ee22 !important;
    color: black !important;
}
.case {
    width:25px;
    margin-right: 2px;
    margin-bottom: 2px;
    text-align: center;
    background: #f9f9f9;
}
.case-small {
    width: 25px;
    min-width: 25px;
    height:10px;
    max-height: 10px;
    margin-right: 2px;
    margin-bottom: 1px;
    background: #fcfcfc;
    font-size: 0.2em;
}
.case-small_black {
    width: 25px;
    min-width: 25px;
    height:10px;
    max-height: 10px;
    margin-right: 2px;
    margin-bottom: 1px;
    background: #303030;
    font-size: 0.2em;
}
.case-smaller {
    width: 25px;
    min-width: 25px;
    height:1px;
    max-height: 1px;
    margin-right: 2px;
    margin-bottom: 1px;
    background: gainsboro;
    font-size: 0.2em;
}
.case-conge {
    background: #a012b0 !important;
    color: white !important;
}
.case-conge-pose {
/*    background: linear-gradient(to right, #d994e1 4%, #d994e1, #a012b0, #d994e1) !important;*/
    background: #c886e6 !important;
    color: black !important;
}
.case-conge-sansolde {
/*    background: linear-gradient(to right, #ffaf0f 6%, #a012b0) !important;*/
    background: #27e1c2 !important;
    color: white !important;
}
.case-conge-avalider {
    background: #d9ccfE !important;
}
.case-titre {
    background: #e0e9f5;
    color:#000000;
}
.case-titre_black {
    background: #111111;
    color:#cccccc;
}
.maladie {
    background: #FF0000 !important;
    color: white !important;
}
.recup {
    background: #00aae7 !important;
    color: white !important;
}

#message {
/*    position: relative;
    top: 30%; */
}

#theMap {
    position: fixed;
    background-color: #008080;
    width: 500px;
    height: 400px;
    top: 15%;
    left: 20%;
    z-index: 99;
    padding: 4px;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 45%;
    top: 10%;
    width: 400px; /* Full width */
    height: 300px; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: #eeeeee;
}
.modal_titre {
    color: #008080;
    padding: 10px;
}
#modal_contenu {
    background-color: #eeeeee;
    color: black;
    text-align: left;
    padding: 10px
}
.deroulement {
    display: none;
    position: fixed;
    z-index: 1;
    left: 45%;
    top: 10%;
    width: auto; /* Full width */
    min-width: 300px;
    height: 600px; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: #eeeeee;
}
.deroulement_titre {
    color: #008080;
    padding: 15px;
/*    padding-bottom: 20px; */
}
#theDeroulement {
    background-color: #efefef;
    color: black;
    text-align: left;
    padding: 10px
}
.historique {
    display: none;
    position: fixed;
    z-index: 2;
    left: 25%;
    top: 7%;
    width: auto; /* Full width */
    min-width: 350px;
    height: 450px; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    padding: 10px;
/*   background-color: #eeeeee; */
}
.historique_titre {
    background-color: #77a3b1;
    border-radius: 10px;
    color: white;
    padding: 10px;
    padding-bottom: 16px;
}
.graphe {
    background-color: #fefefe;
    display: none;
    position: fixed;
    z-index: 3;
    left: 25%;
    top: 58%;
    width: 600px; /* Full width */
    height: 320px; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    padding: 10px;
/*    background-color: white; */
}
.fond_ligne1 {
    background-color: #f5f6e4;
}
.fond_ligne1 {
    background-color: #cef4f3;
}
.centrage {
    margin-left: auto;
    margin-right:auto
}
.explication {
    font-size: 0.85em;
    font-family: Verdana, Arial, sans-serif;
    color: royalblue;
}
.explication_obligatoire {
    font-size: 0.9em;
    font-family: Verdana, 'Arial', sans-serif;
    color: #761c19;
    font-weight: bold;
}

.titre {
    font-family: Verdana, Arial, sans-serif;
    font-size:1em;
    font-weight: bold;
    color: #008080;
}
.titre1 {
    color: #008080;
}
.menu {
/*    background-color: teal; */
    font-family: Verdana, Arial, sans-serif;
    font-size: 0.9em;
    color: white;
    background-color: #008080;
    padding:  6px 12px 6px 12px;
    border: none;
    cursor:pointer;
}
.menu:hover {
    font-size: 0.92em;
    opacity: 0.5;
}
.menu:not(:hover) {
   opacity: 0.9;
}
.menu:active {
    background-color: #4bc46f;
    opacity: 1;
}
.menu_selected {
    background-color: #4bc46f;
    opacity: 1;
}
.fond_menu {
    height: 35px;
    padding-top: 6px;
    padding-bottom: 6px;
    width: 100%;
    background-color: #008080;
    /* #a5c9c7; */
}
.lcontroles {
    height: 31px;
    margin-top: 5px;
    margin-right: 20px;
    margin-left: 10px;
    padding:10px;
    background-color: #FFBB00;
    color: black;
}
.lcontroles:hover {
    font-size: 0.92em;
    opacity: 0.5;
    background-color: #fdd02e;

}
.parametres {
    z-index: 99;
    position: absolute;
    top: 10%;
    left: 1px;
    text-align: center;
    width: 30px;
    height:455px;
    background-color: #008080;
    font-size: 20px;
    color: white;
}
.parametres1 {
    z-index: 99;
    position: absolute;
    top: 10%; left: 30px;
    background-color: #efefef;
    height: 441px;
    border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;
    padding: 8px;
    width: 300px;
}
.border {
    border-color: #0a73a7;
    border-width: 1px;
    border-style: solid;
    border-left-width: 0px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
}
.encadre {
    border-color: #0a73a7;
    border-style: solid;
    border-width: 1px;
    padding: 3px;
}
.border_bas {
    border-bottom-width: 1px;
}
.border_right {
    border-right-width: 1px;
}
.border_dashed {
    border-style: dashed;
    border-color: red;
}
.helpt {
    width:200px;
    height:25px;
    text-align: center;
    align-content: center;
    background-color: teal;
    color: white;
    font-size: 0.9em;
    border-style: solid;
    border-width: 1px;
}
.help {
    width:200px;
    height: auto;
    text-align: center;
    align-content: center;
    background-color: #fef0ce;
    color: black;
    font-size: 0.9em;
    border-style: solid;
    border-left-width: 1px;
    border-bottom-width: 1px;
    border-right-width: 1px;
    border-top-width: 0px;
    padding-top: 2px;
    padding-bottom: 2px;
}
.fond_mirage {
    background-image:
            radial-gradient(circle at 55% 40%, #003355 0, transparent 40%),
            radial-gradient(circle at 95% 60%, #48d1cc 0, transparent 25%),
            radial-gradient(circle at 50% 10%, #008080 0, transparent 20%),
            radial-gradient(circle at 15% 85%, #48d1cc 0, transparent 25%),
            radial-gradient(circle at 80% 20%, #20c997 0, transparent 35%),
            radial-gradient(circle at 25% 25%, #008080 0, transparent 45%),
            radial-gradient(circle at 70% 75%, #004d4d 0, #002244 90%);
    background-attachment: fixed;
    background-size: cover;
}
#wModal {
    position: absolute;
    z-index:99999;
    padding: 10px;
    top: 25%;
    left: 30%;
    width: auto;
    height: auto;
}