html, body {
	margin:0;
	padding:0;
}
*:not(.checkbox-wrapper-24 label span) {
  box-sizing: border-box;
}
body {
	background-color:#eee;
	color:#264653;
	font-family:arial, verdana, "sans serif";
	min-height:100vh;
	display:grid;
	grid-template-rows: auto 1fr auto;
    font-size:14px;
    font-weight:normal;
}
input {
    font-family:inherit;
}

/* ENTETE */
header {
	background-color:#264653;
	color:white;
	width:100%;
	height:60px;
	line-height:60px;
}
header #logo {
	height:60px;
	width:60px;
}
header a, .menu {
	color:white;
	text-decoration:none;
	margin-right:20px;
	float:left;
}
header a:not(.menu a), .menu {
    font-size:1.5em;
}
header a:hover {
	color:#e9c46a;
}
.menu {
    max-height:60px;
    overflow: hidden;
	transition:max-height 0.6s;

}
.menu.princ {
    position: absolute;
    z-index:100;
}
.menu.partager {
    text-align: center;
    position: relative;
    z-index: 20;
}
.menu:hover {
    background-color:#4b6f7e;
    cursor: pointer;
    max-height:30em;
}
.menu div:first-of-type {
    padding:0 1em;
}
.menu i {
    width:1em;
}
.menu a {
    width:100%;
    font-size: 0.8em;
}
.menu.princ a {
    padding:0 1em;
}
.menu a:hover {
    background-color: #264653;
}
.menu:not(:hover) a {
    text-indent: -9999px; 
}
.actions {
	float:right;
}
.menu:hover .rgb:not(:hover) {
    background-image: linear-gradient(to left, green,green,green, yellow, red, red, red);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
}
.fa-bug {
	color:#ffa68d;
}
.fa-bug:hover {
	color:#af000b;
}

/* FENETRES */
.full-height {
    height:100%;
}
main {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0 0 20px 0;
    top:60px;
}
.pan {
    background-color: white;
    border: 1px solid lightgrey;
    padding:15px;
    margin:10px;
}
.multi {
	float:left;
}

a, .a {
    color:#2a9d8f;
	cursor:pointer;
	text-decoration:none;
}
a:hover, .a:hover {
    color:#e9c46a;
}
.mini-a {
    font-weight:bold;
    color:#ccc;
    cursor:pointer
}
.mini-a:hover {
    color:#999;
}
h1 {
    padding:0 2em 1em 0;
    text-align: center;
    font-size:2em;
}
h1 a {
    text-decoration: none;
}
h2, h3 {
	font-size:1.6em;
}
h2 {
    text-align:center;
}
h4 {
	background-color: #7d9bc1;
	margin:0;
	padding:0.1em 1em;
	color:white;
}
ul.aeree li {
    margin-bottom: 1em;
}
.bold, .gras {
    font-weight: bold;
}
.chgt-profil-doc {
    position:absolute;
    right:50px;
}
#logout { background-image:url('/img/logout.png'); }
#logout:hover { background-image:url('/img/logout-h.png'); }
.chgt-profil-elv { background-image:url('/img/basc-elv.png'); }
.chgt-profil-elv:hover { background-image:url('/img/basc-elv-h.png'); }
.chgt-profil-doc { background-image:url('/img/basc-doc.png'); }
.chgt-profil-doc:hover { background-image:url('/img/basc-doc-h.png'); }

/* Mise en forme générale */
.ht100 { height:100%; }
.w100 { width:100%; }
.centre { text-align:center; }
.vert { color:lightgreen; }
.vert-fonce { color:#00ab5a; }
.clair { color:#7d9bc1; }
.rouge { color:red; }
.coul-suppr { color:lightcoral }
.blanc { color:white; }
.flt-dt { float:right; }
.flt-gch { float:left; }
.align-dt { text-align:right }
.cn-rnd { border-radius:4px; }
.ital { font-style: italic; }
.txt-normal {
    font-weight: normal;
    font-style: normal;
}
.chasse-fixe { font-family:'Courier New', Courier, monospace }
ul.liste-comp { display:inline-block }
.gros { font-size:1.5em }
.dbl-ln-h { line-height:2em }

.cache { display:none }
.absolu { position:absolute }

.blink_me {
    animation: blinker 1s linear infinite;
}
@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.bloc-dev {
	background-color:#eee;
}
.bloc-dev:hover {
	cursor:pointer;
	background-color:#d9ad7c;
}

#menu-note { background-image:url('/img/menu/postit.png'); }
#menu-note:hover { background-image:url('/img/menu/postit-h.png'); }
#menu-note.sect-active { background-image:url('/img/menu/postit-h.png'); }
#menu-plan { background-image:url('/img/menu/agenda.png'); }
#menu-plan:hover { background-image:url('/img/menu/agenda-h.png'); }
#menu-plan.sect-active { background-image:url('/img/menu/agenda-h.png'); }
#menu-app { background-image:url('/img/menu/appel.png'); }
#menu-app:hover { background-image:url('/img/menu/appel-h.png'); }
#menu-app.sect-active { background-image:url('/img/menu/appel-h.png'); }
#menu-cmd { background-image:url('/img/menu/commande.png'); }
#menu-cmd:hover  { background-image:url('/img/menu/commande-h.png'); }
#menu-cmd.sect-active { background-image:url('/img/menu/commande-h.png'); }
#menu-abo { background-image:url('/img/menu/abonnement.png'); }
#menu-abo:hover { background-image:url('/img/menu/abonnement-h.png'); }
#menu-abo.sect-active { background-image:url('/img/menu/abonnement-h.png'); }
#menu-budg { background-image:url('/img/menu/budget.png'); }
#menu-budg:hover { background-image:url('/img/menu/budget-h.png'); }
#menu-budg.sect-active { background-image:url('/img/menu/budget-h.png'); }
#menu-proj { background-image:url('/img/menu/projets.png'); }
#menu-proj:hover { background-image:url('/img/menu/projets-h.png'); }
#menu-proj.sect-active { background-image:url('/img/menu/projets-h.png'); }
#menu-pret { background-image:url('/img/menu/prets.png'); }
#menu-pret:hover { background-image:url('/img/menu/prets-h.png'); }
#menu-pret.sect-active { background-image:url('/img/menu/prets-h.png'); }
#menu-reco { background-image:url('/img/menu/recollement.png'); }
#menu-reco:hover { background-image:url('/img/menu/recollement-h.png'); }
#menu-reco.sect-active { background-image:url('/img/menu/recollement-h.png'); }
#menu-cont { background-image:url('/img/menu/esidoc.png'); }
#menu-cont:hover { background-image:url('/img/menu/esidoc-h.png'); }
#menu-cont.sect-active { background-image:url('/img/menu/esidoc-h.png'); }
#menu-stat { background-image:url('/img/menu/stats.png'); }
#menu-stat:hover { background-image:url('/img/menu/stats-h.png'); }
#menu-stat.sect-active { background-image:url('/img/menu/stats-h.png'); }
#menu-prm  { background-image:url('/img/menu/parametres.png'); }
#menu-prm:hover { background-image:url('/img/menu/parametres-h.png'); }
#menu-prm.sect-active { background-image:url('/img/menu/parametres-h.png'); }
#menu-rxp { background-image:url('/img/menu/bug.png'); }
#menu-rxp:hover { background-image:url('/img/menu/bug-h.png'); }
#menu-rxp.sect-active { background-image:url('/img/menu/bug-h.png'); }

.chp-date {
	width:10em;
}
.mini-txt {
    width:4em;
}
.inactif {
    color:lightgray;
}

.warn {
    display: none;
	color:#d9ad7c;
}
.liste-dyn label {
	font-weight:bold;
}
.liste-dyn span {
	margin-right:10px;
	background-color:#eee;
	padding:2px 6px;
	border-radius:6px;
}
.nv-elt {
	border: 2px solid lightgreen;
	border-radius: 10px;
	margin:1.5em 0;
	padding:0.5em;
}
.nv-elt h2 {
    color: lightgreen;
	margin:0.2em 0;
}
.form-act {
	border: 2px solid #7d9bc1;
	border-radius: 10px;
	margin:1.5em 0;
	padding:0.5em;
}
.form-act h2 {
    color:#2a9d8f;
	margin:0.2em 0;
}
textarea {
    font-family:inherit;
    font-size: inherit;
}
textarea.vide {
	color: LightGrey;
}
input.mini-txt {
    width:4em;
}
input.long-txt {
    width:20em;
}

/* boutons */
button, .button {
    margin: 2px
}
.grp-btn {
    margin:0 1em 1em 0;
}
button:not(.neutre, .petit-btn, .creation, .pers),
.button:not(.neutre, .petit-btn, .creation, .pers),
input[type=button]:not(.neutre, .petit-btn, .moyen-btn, .creation, .pers) {
    text-decoration: none;
    font-size: 1em;
    padding:1em 2em;
    white-space: nowrap;
}
button:not(.neutre, .petit-btn, .creation, .pers),
.button:not(.neutre, .petit-btn, .creation, .pers),
input[type=button]:not(.neutre, .petit-btn, .moyen-btn, .creation, .pers, .blanc) {
    background-color:#2a9d8f;
    color:white;
    border:none;
}
input[type=button].inactif {
    color:lightgrey;
    border:1px solid lightgrey;
    cursor:not-allowed;
    background-color:white;
}
input[type=button].blanc {
    background-color:white;
    color:#2a9d8f;
    border:1px solid #2a9d8f;
}
button:not(.neutre, .petit-btn, .creation, .pers):hover,
.button:hover:not(.neutre, .petit-btn, .creation, .pers),
input[type=button]:not(.neutre, .petit-btn, .moyen-btn, .creation, .pers, .inactif):hover {
    background-color:#e9c46a;
    color:white;
    cursor:pointer;
    border-color:white;
}

button.suppr, .button.suppr, input[type=button].suppr {
	background-color:lightpink;
	border-color:lightcoral;
	color:white;
}
button.suppr:hover, .button.suppr:hover, input[type=button].suppr:hover {
	color:white;
	border-color:lightcoral;
	background-color:lightcoral;
}

.petit-btn, .moyen-btn {
    display: inline-block;
    margin-left: 4px;
	padding:0;
    cursor: pointer;
    border:none;
    background-color: transparent;
}
.petit-btn {
    width:12px;
    height: 12px;
}
.moyen-btn {
    width:20px;
    height:20px;
}
.petit-btn.annule { background-image: url('/img/btn/close.png'); }
.petit-btn.edit { background-image: url('/img/btn/edit.png'); }
.petit-btn.valide { background-image: url('/img/btn/tick.png'); }
.petit-btn.copy { background-image: url('/img/btn/copy.png'); }
.petit-btn.trash { background-image: url('/img/btn/trash.png'); }
.petit-btn.up { background-image: url('/img/btn/up.png'); }
.petit-btn.down { background-image: url('/img/btn/down.png'); }
.petit-btn.sortie { background-image: url('/img/btn/sortie.png'); }
.petit-btn.calendrier { background-image: url('/img/btn/calendrier.png'); }
.petit-btn.add { background-image: url('/img/btn/add.png'); }
.petit-btn.interdit { background-image: url('/img/btn/interdit.png'); }
.petit-btn.no-pc { background-image: url('/img/btn/no-pc.png'); }
.petit-btn.bang { background-image: url('/img/btn/bang.png'); }
.petit-btn.msg { background-image: url('/img/btn/msg.gif'); }
.petit-btn.msg:hover { background-image: url('/img/btn/msg.png'); }
.petit-btn.plus { background-image: url('/img/btn/plus.png'); }
.petit-btn.moins { background-image: url('/img/btn/moins.png'); }
.petit-btn.multi-sel { background-image: url('/img/btn/multi-sel.png'); }
.petit-btn.multi-sel2 { background-image: url('/img/btn/multi-sel2.png'); }
.petit-btn.multi-sel-1-2 { background-image: url('/img/btn/multi-sel-1-2.png'); }
.petit-btn.multi-sel-2-2 { background-image: url('/img/btn/multi-sel-2-2.png'); }
.petit-btn.no-sel { background-image: url('/img/btn/no-sel.png'); }
.petit-btn.lock { background-image: url('/img/btn/lock.png'); cursor:default; }
.petit-btn.back { background-image: url('/img/btn/back.png'); }
.petit-btn.print-nb { background-image: url('/img/btn/print-nb.png'); }
.petit-btn.print-coul { background-image: url('/img/btn/print-coul.png'); }

.petit-btn.graph { background-image: url('/img/btn/graph.png'); }
.petit-btn.graph:hover { background-image: url('/img/btn/graph-h.png'); }

.moyen-btn.suite { background-image: url('/img/btn/suite.png'); }
.moyen-btn.suite:hover { background-image: url('/img/btn/suite2.png'); }

.petit-btn.up, .petit-btn.down {
	height:5px;
}
.gros-btn {
	width:100%;
	padding:1em 0;
	font-weight:bold;
}

.btn-rond {
	display:block;
	font-size:2em;
	border:none;
	width:1.4em;
	height:1.4em;
	border-radius:0.7em;
	text-align:center;
	line-height:1.4em;
	padding:0;
	float:left;
	cursor:pointer;
}
.annule-integre {
    padding-right:2em;
}
.annule-integre + input {
        position: relative;
    left:-2em;
}
.creation {
	background-color:#ebebeb;
	border:none;
	color:#2a9d8f;
	cursor:pointer;
}
.creation:hover {
	background-color:lightgreen;
	color:#0c2340;
}
.retour {
	border:1px solid #7d9bc1;
	color:#2a9d8f;
	position:absolute;
}
.retour:hover {
	background-color: #7d9bc1;
	color:white;
}

.gr-btn-tri {
	width:12px;
	height:12px;
	display:inline-block;
	vertical-align:middle;
	margin-right:2px;
}
.gr-btn-tri div {
	height:5px;
	opacity:30%;
}
.gr-btn-tri div:hover {
	opacity:100%;
}
.gr-btn-tri div:first-of-type {
	margin-bottom:1px;
}
.tab-liste.cols-2, .tab-liste.cols-3, .tab-liste.cols-4, .tab-liste.cols-5 { table-layout:fixed; }
.tab-liste.cols-2 td, .tab-liste.cols-2 th { width:50%; }
.tab-liste.cols-3 td, .tab-liste.cols-3 th { width:33%; }
.tab-liste.cols-4 td, .tab-liste.cols-4 th { width:25%; }
.tab-liste.cols-5 td, .tab-liste.cols-5 th { width:20%; }
.tab-liste.cols-6 td, .tab-liste.cols-6 th { width:16%; }
.tab-liste.cols-7 td, .tab-liste.cols-7 th { width:14%; }
.tab-liste.cols-8 td, .tab-liste.cols-8 th { width:12%; }
.tab-liste.cols-9 td, .tab-liste.cols-9 th { width:11%; }
.tab-liste.cols-10 td, .tab-liste.cols-10 th { width:10%; }
.tab-liste td:first-of-type {
	border-left:1px solid #ebf0f5;
}
.tab-liste th a {
    display:block;
    height:100%;
    width:100%;
    background-color:#2a9d8f;
    color:white;
}
.tab-liste th a:hover {
    color:#264653;
}
.tab-liste tr.ligne-sel td {
    font-weight: bold;
}

.w30pc { width:30%; }
.w70pc { width:70%; }
.tab { display: table-cell; }
.esp-g { margin-left:3em; }
.esp-d { margin-right:3em; }
.esp-h { margin-top:3em; }
.esp-b { margin-bottom:3em; }

.zone-w-2-pan {
    display: table;
    width: 100%;
}
.zone-w-2-pan > div {
    display: table-cell;
}
.zone-w-2-pan > div.moitie {
    width: 45%;
}
.zone-w-2-pan > div.tiers {
    width: 33%;
}
.pan-hl {
    background-color: #e2efed;
	padding:10px;
	border-radius:8px;
	margin:10px 0;
}


.clear-both {
    clear: both;
}
/* formulaires */
.form-saisie {
    padding:1em;
}
.form-saisie>div {
    margin-bottom:1em;
}
.form-saisie label {
    display:block;
    margin-bottom:4px;
}
.form-saisie label + div {
    margin-left:1em;
}
input[type=number] {
    width:5em;
}
.num {
	width:2em;
    text-align:center;
}
.heure {
	width:5em;
    text-align:center;
}

select {
    background-color: white;
    border: 1px solid lightgrey;
    border-radius: 6px;
    font-size: 1em;
    color:inherit;
}
select:hover {
    background-color: #eee;
}

/* tableaux */
.tab-liste {
    width:100%;
    text-align: center;
    border-right:1px solid #ebf0f5;
    border-bottom:1px solid #ebf0f5;
}
.tab-liste th:not(.vide, .sous-th), .entete-tab {
    background-color: #0c2340;
	text-align:center;
}
.tab-liste th.sous-th {
    background-color: #7d9bc1;
	text-align:center;
}
.tab-liste th:not(.vide, .sel, .a), .entete-tab {
    color:white;
}
.tab-liste tr {
    background-color:#fff;
}
.tab-liste tr:nth-child(even):not(.info-total):not(.sortis-visibles) {
    background-color: #ebf0f5;
}
.tab-liste th, .tab-liste td {
    padding:5px;
}
.tab-liste.cliquable td:not(.non-cliquable) {
    cursor: pointer;
}
.tab-liste.cliquable tr:hover td:not(.non-cliquable) {
    background-color:#e9c46a;
}
.tab-liste.cliquable a {
    color: inherit;
    text-decoration: inherit;
}

.tab-liste.cliquable a:not(.non-cliquable a) {
    display: block;
    width: 100%;
}
.tab-liste .total {
    font-weight: bold;
}

.tab-liste td.sel {
    background-color: #e9c46a;
}
.tab-liste th.sel {
    color: #e9c46a;
}

.grp-lg {
	background-color: white;
	font-weight: bold;
	font-size:1.2em;
    border-top: 5px solid white;
}
.tab-visible {
    border-collapse: collapse;
}
.tab-visible td {
    border:1px solid #ebebeb;
    padding:0.5em;
}
.case-rouge {
    font-weight:bold;
    background-color:red;
    color:white;
}

/* Liste d'élément supprimables */
#liste-elts-suppr {
    margin-bottom: 0.5em;
}
#liste-elts-suppr .elt span {
    border:1px solid #eee;
    cursor: pointer;
}
#liste-elts-suppr .elt span:first-of-type {
    border-radius: 8px 0 0 8px;
    border-right:1px dashed #eee;
    padding: 3px 10px;
}
#liste-elts-suppr .elt span:first-of-type + span {
    color:lightcoral;
    border-radius: 0 8px 8px 0;
    border-left:none;
    padding: 3px 5px;
}
#liste-elts-suppr .elt:hover span {
    background-color: #eee;
    border-color:white;
}
#liste-elts-suppr .elt span:first-of-type + span:hover {
    background-color: lightcoral;
    color: white;
}

/* div avec affichage sous forme de tableau */
.tab-div {
    display: table;
    width:100%;
}
.tab-div > div {
    display: table-row;
}
.tab-div > div > div {
    display: table-cell;
    padding: 0 20px;
}
.saisie-large {
    padding:0 20px;
}

/* Code */

.code {
    background-color: #444;
    color:white;
    font-family: 'Courier New', Courier, monospace;
    font-size:1.5em;
    border:3px dotted white;
    border-radius:10px;
    padding:10px;
    margin:10px;
}
.copy-code {
    margin-left:10px;
    padding-top: 10px;
    height: 24px;
    background-image: url('/img/btn/copy2.png');
    background-repeat: no-repeat;
    background-position: 0;
}
.copy-code .a {
    padding-left:26px;
}

/* Choix par étape */

.choix-etapes {
    margin:15px 0;
}
.choix-etapes span {
    padding:5px;
    background-color: #eee;
    cursor: pointer;
    border:2px solid transparent;
    border-radius: 5px;
    margin: 5px;
    color:#999;
}
.choix-etapes span:not(.sel):hover {
    border-color: #ddd;
    color:#2a9d8f;
}
.choix-etapes span.sel {
    border-color:#2a9d8f;
    color:#2a9d8f;
}


.checkbox-wrapper-24 {
    height:2.5em;
}
.checkbox-wrapper-24 .checkbox {
    display: table-cell;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    text-align: center;
}

.checkbox-wrapper-24 label {
    display: inline-block;
    color: #333;
    cursor: pointer;
    position: relative;
}
.checkbox-wrapper-24 label span {
    display: inline-block;
    position: relative;
    background-color: transparent;
    width: 25px;
    height: 25px;
    transform-origin: center;
    border: 2px solid #333;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 10px;
    transition: background-color 150ms 200ms, transform 350ms cubic-bezier(0.78, -1.22, 0.17, 1.89);
}
.checkbox-wrapper-24 label span:before {
    content: "";
    width: 0px;
    height: 2px;
    border-radius: 2px;
    background: #2a9d8f;
    position: absolute;
    transform: rotate(45deg);
    top: 13px;
    left: 9px;
    transition: width 50ms ease 50ms;
    transform-origin: 0% 0%;
}
.checkbox-wrapper-24 label span:after {
    content: "";
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: #2a9d8f;
    position: absolute;
    transform: rotate(305deg);
    top: 16px;
    left: 10px;
    transition: width 50ms ease;
    transform-origin: 0% 0%;
}
.checkbox-wrapper-24 label:hover span:before {
    width: 5px;
    transition: width 100ms ease;
}
.checkbox-wrapper-24 label:hover span:after {
    width: 10px;
    transition: width 150ms ease 100ms;
}

.checkbox-wrapper-24 input[type=radio] {
    display: none;
}
.checkbox-wrapper-24 input[type=radio]:checked + label span {
    background-color: #2a9d8f;
    border-color:#2a9d8f;
    transform: scale(1.25);
}
.checkbox-wrapper-24 input[type=radio]:checked + label span:after {
    width: 10px;
    background: #fff;
    transition: width 150ms ease 100ms;
}
.checkbox-wrapper-24 input[type=radio]:checked + label span:before {
    width: 5px;
    background: #fff;
    transition: width 150ms ease 100ms;
}
.checkbox-wrapper-24 input[type=radio]:checked + label:hover span {
    background-color: #2a9d8f;
    transform: scale(1.25);
}
.checkbox-wrapper-24 input[type=radio]:checked + label:hover span:after {
    width: 10px;
    background: #fff;
    transition: width 150ms ease 100ms;
}
.checkbox-wrapper-24 input[type=radio]:checked + label:hover span:before {
    width: 5px;
    background: #fff;
    transition: width 150ms ease 100ms;
}
.checkbox-wrapper-24 input[type=radio] + label:hover {
    color:#2a9d8f;
}
.checkbox-wrapper-24 input[type=radio]:checked + label {
    color:#2a9d8f;
    font-weight: bold;
}