/*version 2*/
body {
	height: 100%;
	width: 100%;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12pt;
	background: #eeeeee;
    box-sizing: border-box;
	overflow-y: scroll;
}
p {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

div.div-table {
    display: table;
}
div.div-row {
    display: table-row;
}
div.div-cell {
    display: table-cell;
}

div#menu {
	position: fixed; 
	top: 0px;
	left: 0px;
	height: 80px;
	width: 100%;
    background: linear-gradient(to bottom, #4c4c4c, #1f2020);
	box-shadow: 0px 6px 4px #888;
	z-index: 201;
}
	div#logo {
        width: 80px;
	}
	div#logo-titre {
		padding: 0px 10px;
		font-size: 2em;
	    font-weight: bold;
	    vertical-align: middle;
	}
	div#connect {
	    position: absolute;
	    right: 0px;
	    top: 0px;
	    margin: 20px 10px;
        padding: 0px 10px;
    	z-index: 204;
	}
		#connect .ui-selectmenu-text {
		    /*margin-right: 0px;*/
		}
		#connect #combooptions-menu, 
		#connect #comborole-menu,
		#connect #comboquitter-menu{
			width: 250px;
		}
		#connect #comboexit-button {
			padding-left: 10px;
			padding-right: 10px;
		}
		#connect .ui-menu{
			text-align: left;
			z-index: 204;
		}
	div#quit {
        width: 160px;
		vertical-align: middle;
        text-align: right;
        padding: 0px 20px;
	}
	#menu-option {
	    position: absolute;
	    display: none;
	    z-index: 204;
	    width: 226px;
	    overflow: visible;
	}
	#menu-role {
	    position: absolute;
	    display: none;
	    z-index: 204;
	    width: 226px;
	    overflow: visible;
	}
	#menu-principal {
	    position: absolute;
	    display: none;
	    z-index: 204;
	    width: 342px;
	    max-height: 370px;
	    overflow: visible;
	}
	#red-dot {
	    background-color: #ff5050;
	    border-radius: 50Vh;
	    box-shadow: 3px 3px 8px 0 rgba(0, 0, 0, .2);
	    height: 11px;
	    position: absolute;
	    right: 40px;
	    top: 4px;
	    width: 11px;
	    display: none;
	}
	.image-flash {
	    animation: flashSec 1.0s infinite steps(1);
	}
		@keyframes flashSec {
			0% { visibility: hidden; }
		    50% { visibility: visible; }
		}
	
div#onglet {
	position: fixed; 
	/*top: 80px;*/
	/*left: 0px;*/
	/*height: 44px;*/
	max-width: 100%;
	padding: 0px 40px;
	white-space: nowrap;
    overflow-x: auto;
	z-index: 202;
}
div#apps {
	position: fixed; 
	top: 80px;
	left: 0px;
	width: 280px;
	padding: 10px;
	z-index: 500;
	background: #fff;
	border: 2px solid #000;
	box-shadow: 8px 8px 30px #222;
	max-height: calc(100vh - 120px);
	overflow-x: hidden;
	overflow-y: auto;
}
	div#apps > div{
		width: 100%;
		border: 1px solid #0000ff00;
	}
	div#apps > div:hover {
		background-color: #8f9aea50;
        border: 1px solid #0000ff;
	}
	div#apps > div p{
		display: inline-block;
    	vertical-align: bottom;
    	padding: 10px;
		font-weight: bold;
	}
	div#apps > div img{
	    height: 32px;
	}
div#message, div#alert {
	position: fixed; 
	top: 80px;
	left: 0px;
	right: 0px;
	padding: 10px 40px 10px 40px;
	box-shadow: 4px 4px 8px #aaa;
	min-height: 1em;
	z-index: 203;
}
div#centre {
	position: absolute;
	min-width: 500px;
	top: 0px;
	left: 0px;
	right: 0px;
	padding: 120px 60px 60px 60px;
}
@media screen and (max-width: 850px) {
    div#centre {
    	padding: 120px 30px 30px 30px;
    }
}
div#log {
	position: absolute; 
	top: 150px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	margin: auto;
	padding: 30px;
	text-align: center;
}
    div.div-left {
        width: 50%;
        height: 260px;
        float: left;
        border-right: 1px solid black;
		margin-bottom: 20px;
    }
	.div-etou {
		position: relative; 
		top: 125px; 
		margin-left: .3em; 
		padding: .6em; 
		background: #eeeeee;
	}
    div.div-right {
    	height: 260px;
		overflow: hidden;
    }
    @media screen and (max-width: 850px) {
	    div.div-left {
	        width: 100%;
    	    border-right: none;
	        border-bottom: 1px solid black;
	    }
		.div-etou {
			top: 270px; 
		}
	    div.div-right {
			overflow: inherit;
	    }
    }
div.colgauche {
	margin-bottom: 20px;
    float:left;
    width:370px;
}
div.coldroite {
    padding-right: 14px;
	overflow: hidden;
}
@media screen and (max-width: 850px) {
	div.colgauche {
		float: none;
		width: auto;
		text-align: center;
	}
}
#log table {width: 100%;}
#log table td{padding: 2px 2px 2px 2px;}
div#log td input{
	font-size: 120%;
	font-weight: bold;
	width: 350px;
    margin: 4px 0px 4px 0px !important;
    padding: 6px 6px 6px 6px !important;
}

div.titre {
	font-size: 1.7em;
    font-weight: bold;
    text-shadow: 2px 2px 2px #aaa;
	padding: 20px 0px 10px 0px;
}
div.titre2 {
	font-size: 1.5em;
    font-weight: bold;
    text-shadow: 2px 2px 2px #aaa;
	padding: 10px 0px 10px 0px;
}
div.fonction {
    width: fit-content;
    max-width: 100%;
	padding: 10px 10px 10px 20px;
    /*display: inline-block;*/
    white-space: nowrap;
	overflow-x: auto;
}
	div.fonction.sticky{
		position: sticky;
		top: 120px;
		z-index: 1;
	}
div.scroll-table {
    padding-right: 14px;
    padding-bottom: 10px;
    overflow-x: auto;
}
div#cookiesConsent {
	position: fixed; 
	bottom: 0px;
	left: 0px;
	right: 0px;
	padding: 10px 40px 10px 40px;
    background-color: #f7c46c;
    font-size: 90%;
	text-align:center;
	min-height: 1em;
	z-index: 203;
}

table.tableau {
	width: 100%;
	margin: 10px auto 20px auto;
	border: 2px solid #888;
	border-collapse: collapse;
	box-shadow: 4px 4px 6px #888;
}
    table.tableau tr.pair:nth-child(even) td {
        background: #eee;
    }
    table.tableau tr.impair:nth-child(odd) td {
        background: #eee;
    }
	table.tableau th {
		font-size: 1.2em;
		padding: 8px 10px 8px 10px;
		border: 2px solid #888;
		color: black;
		background: linear-gradient(to bottom, #4c4c4c, #1f2020);
	}
	table.tableau td {
		padding: 2px 10px 2px 10px;
		border: 1px solid #888;
		background: #ffffff;
	}
	table.tableau img{
		vertical-align: middle;
		margin: 2px 0px 2px 0px;
	}
	table.option td {
		padding: 6px 10px 6px 10px;
	}
	table.envoi td {
		border: 1px solid #888;
	}
	table.tableau .categorie {
		margin: 2px; 
		font-size:1.1em; 
		font-weight: bold; 
		text-align:center;
		color: black;
		background: linear-gradient(to bottom, #dddddd, #aaaaaa); 
	}
	table.tableau .info {
		background: #ccc;
		padding: 2px 10px 2px 10px;
	}
	table.tableau .legende {
		background: #ccc;
		bottom: -2px;
		padding: 6px;
		line-height: 28px;
	}
	table.tableau tr.over:hover td {
	    color: blue;
	    cursor: pointer;
	    background: #dcdff8;
	}
	table.tableau td.over:hover{
	    color: blue;
	    cursor: pointer;
	    background: #dcdff8 !important;
	}
		table.tableau tr.overcell td:hover {
			color: blue;
			cursor: pointer;
			background-color: #c8cdff;
		}
		table.tableau tr.oversection:has(td:nth-child(1):hover) td:nth-child(1) {
			color: blue;
			cursor: pointer;
			background-color: #c8cdff;
		}
		table.tableau tr.oversection:has(td:nth-child(n+2):nth-child(-n+5):hover) td:nth-child(n+2):nth-child(-n+5) {
			color: blue;
			cursor: pointer;
			background-color: #c8cdff;
		}
		table.tableau tr.oversection td:nth-child(n+6):hover {
			color: blue;
			cursor: pointer;
			background-color: #c8cdff;
		}
	table.tableau tr.miniover:hover td {
	    color: blue;
	    cursor: pointer;
	}
	table.tableau .past {color: grey; background:linear-gradient(to bottom, #C0D8E6, #96BED6);}
	table.tableau .nowrap {white-space: nowrap;}
	table.tableau .radio {margin: 2px 5px 2px 5px;}
	table.tableau .down {float: right; cursor: pointer;}
	table.tableau tr.odd td{background: #eeeeee;}
	table.tableau tr.inactive td{background: #ddd;}
	table.tableau tr.disabled td,
		table.tableau td.disabled{background: #bbb !important}
	table.tableau tr.bold td{font-weight: bold}
	table.tableau tr.select2 td{background:#a9d6b5}
	table.tableau tr td.select2{background:#a9d6b5}
	table.tableau tr.select2bold td{background:#a9d6b5; font-weight: bold}
	table.tableau tr.select td{background: #fff3c0}
	table.tableau tr td.select{background: #fff3c0}
	table.tableau tr.selectbold td{background: #fff3c0; font-weight: bold}
	table.tableau tr.waiting td{background: #ffcccc; font-weight: bold}
	table.tableau tr.new td{background: #ffcccc; font-weight: bold;}
	table.tableau td.petit {background:linear-gradient(to bottom, #dddddd, #bbbbbb); height: 20px; color: #000000}
	table.tableau td.inpass {background:repeating-linear-gradient(-45deg,#fff,#fff 10px,#f0f0f0 10px,#f0f0f0 20px)}
	table.tableau td.ctrl {width: 60px}
	table.tableau tr.todo td{background: #ffff60;}
	table.tableau tr.last td{background: #b6e2de;}
	table.tableau tr.alert td{background: #FFA07A;}
	table.tableau tr.done td{background: #ccc;}
	table.tableau td.sticky, table.tableau th.sticky {position: sticky}
	table.tableau td.brw {border-right-width: 3px}
	table.tableau tr.hide, table.tableau.hide {display: none;}
	table.tableau tr.connect {font-weight: normal;}
	table.tableau tr.noconnect {color: #808080;}
	table.tableau .left {text-align: left;}
	table.tableau .center {text-align: center;}
	table.tableau .top {vertical-align: top;}
	table.tableau .noborder {border-style: none;}
    table.tableau .noborder td {padding: 0px;vertical-align: top;}
        table.noborder .center {text-align: center;}
	table.tableau img.presence {position: relative; float: right; right: -8px; height: 14px;}

table.tableaufiche {
	width: 100%;
	margin: 10px auto 20px 60px;
	border: 2px solid #888;
	border-collapse: collapse;
	box-shadow: 4px 4px 6px #888;
}
	table.tableaufiche th {
		padding: 8px 10px 8px 10px;
		color: #ffffff;
		background: linear-gradient(to bottom, #4c4c4c, #1f2020);
	}
	table.tableaufiche td {
		padding: 2px 10px 2px 10px;
		border: 1px solid #888;
		background: #ffffff;
	}
	table.tableaufiche .categorie {
		margin: 2px; 
		font-size:1.1em; 
		font-weight: bold; 
		text-align:center;
		background: linear-gradient(to bottom, #dddddd, #aaaaaa); 
	}
	.tableaufiche td{
	  width: 60px;
	  border: 1px solid;
	  vertical-align: middle;
	}
	.tableaufiche th.rotate-45{
	  height: 200px;
	  padding: 0;
	  line-height: 1em;
	  font-weight: normal;
	}
	.tableaufiche th.rotate-45 > div{
	  background: #FFFFFF;
	  box-shadow: 10px 0px 4px #888;
	  position: relative;
	  top: 0px;
	  left: 100px; /* 80 * tan(45) / 2 = 40 where 80 is the height on the cell and 45 is the transform angle*/
	  height: 100%;
	  transform: skew(-45deg,0deg);
	  overflow: hidden;
	  border: 1px solid black;
	}
	.tableaufiche th.rotate-45 span {
	  transform: skew(45deg,0deg) rotate(315deg);
	  position: absolute;
	  bottom: 82px; /* 40 cos(45) = 28 with an additional 2px margin*/
	  left: -100px; /*Because it looked good, but there is probably a mathematical link here as well*/
	  display: inline-block;
	  width: 260px; /* 80 / cos(45) - 40 cos (45) = 85 where 80 is the height of the cell, 40 the width of the cell and 45 the transform angle*/
	  text-align: left;
	  color: black;
	  white-space:nowrap;
	}
	.tableaufiche th.rotate-45 span.icon {
	    text-align: right;
	}
	.tableaufiche th.rotate-45 span.icon img {
	    transform: rotate(45deg);
	    height: 20px;
	}
    
	table.tableaufiche .groupe {font-size:1.2em; background: linear-gradient(to bottom, #4c4c4c, #1f2020); color: #ffffff}
	table.tableaufiche .past {color: grey; background:linear-gradient(to bottom, #C0D8E6, #96BED6);}
	table.tableaufiche .nowrap {white-space: nowrap;}
	table.tableaufiche .radio {margin: 0px 15px 2px 15px; cursor: pointer;}
	table.tableaufiche .down {float: right; cursor: pointer;}
	table.tableaufiche th.left {text-align: left;}
	table.tableaufiche tr.odd td{background: #eeeeee;}
	table.tableaufiche tr.select td{background: #ffffcc;}
	table.tableaufiche tr.over td{color: blue;}
	table.tableaufiche td.center {text-align: center;}
	table.tableaufiche td.top {vertical-align: top;}
	table.tableaufiche td.petit {background:linear-gradient(to bottom, #dddddd, #bbbbbb); height: 20px; color: #000000}
	table.tableaufiche td.ctrl {width: 60px}

	table.absence {border-collapse: collapse;}
	table.absence tr.odd td{background: #eeeeee;}

table.inside {
	width: 100%;
    border-style: none;
	border-collapse: collapse;
}
table.inside td {
	border: 1px solid #888;
	border-collapse: collapse;
	padding: 2px 10px 2px 10px;
}
table.tableau .noborder, table.tableau .noborder td {
	border-style: none;
}

.desactive {
	display: block;
	padding: 8px 10px 8px 10px;
	font-size: 1.5em;
	font-weight: bold;
	text-align: center;
    color: red;
    text-shadow: 2px 2px 2px #aaa;
}
.active {
	display: block;
	padding: 8px 10px 8px 10px;
	font-size: 1.5em;
	font-weight: bold;
	text-align: center;
    color: green;
    text-shadow: 2px 2px 2px #aaa;
}
.readonly {
    display: block;
    padding: 8px 10px 8px 10px;
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    color: darkorange;
    text-shadow: 1px 1px 2px #aaa;
}
.role {
    color:black;
    padding: 1px 5px 0px 5px;
    border: 1px solid;
    font-family: monospace;
    font-weight: bold;
}

input, textarea {
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 16px;
	margin: 10px 0px 10px 0px;
	padding: 4px 4px 4px 4px;
	box-sizing: border-box
}
textarea {
	resize: vertical;
	min-height: 4em;
}
input.disabled, textarea.disabled{
    pointer-events: none;
    background: #f8f8f8;
}
img.disabled {
    opacity: .5;
}
div.input-erase .ui-icon{
    position: absolute;
    top: 1.1em;
    right: .5em;
}
.input-icon{
    position: absolute;
    margin-left: -20px;
    margin-top: 20px;
    pointer-events: none;
}

table button, table .ui-button {
	margin: 10px 0px 10px 0px;
}
.ui-spinner {
	margin: 10px 0px 10px 0px;
}
.ui-spinner .ui-button {
	margin: 0px 0px 0px 0px;
}
.check {
    box-shadow: 3px 3px 4px #888;
}

#dialog-photo {
	position: fixed; 
	bottom: 20px;
	right: 40px
}
#dialog-photo img{
	box-shadow: 8px 8px 8px #555;
}

.custom-combobox {
	position: relative;
	display: inline-block;
	top: -1px;
	margin-right: 38px;
}
.ui-widget.custom-combobox-input {
    height: 36px ;
	width: 220px;
	margin: 0em 0em .3em 0em;
	padding: 0.3em;
	background: white;
    white-space: normal;
	box-shadow: 1px 1px 4px rgba(0, 0, 0, .4);
}
.ui-widget.custom-combobox-toggle {
	position: absolute;
    height: 36px;
	width: 36px;
	top: 0;
	bottom: 0;
	padding: 0;
}

.ui-widget-header {
	background: linear-gradient(to bottom, #4c4c4c, #1f2020);
	border: 1px solid #1f2020;
	color: black;
}
.ui-button.onglet {
	border: 1px solid #666;
	border-radius: 0px 0px 18px 18px;
	margin-right: -15px;
}
.ui-button, .ui-radio, .custom-combobox-input{
    white-space: nowrap;
	box-shadow: 1px 1px 4px rgba(0, 0, 0, .4);
}
.ui-selectmenu-button:not(.flat) .ui-selectmenu-icon.ui-icon, #comborole.ui-button .ui-icon, .choixequipe.ui-button .ui-icon {
    /*
	float: right;
	margin-top: 3px;
	*/
    margin-right: -8px;
}

.ui-state-disabled.ui-button {
    color: #999;
    /*background: #ccc;*/
}

.ui-icon-background, .ui-state-active .ui-icon-background {
    border: #2222ff;
    background-color: lightgrey;
}

.ui-widget-overlay {background: black;}

.ui-menu {
    padding: 2px;
    max-height: 340px;
	max-width: 800px;
	overflow-y: auto;
	overflow-x: hidden;
	z-index: 100;
	box-shadow: 6px 6px 12px rgba(0, 0, 0, .5);
}
.ui-selectmenu-menu {
	/*box-shadow: 3px 3px 16px rgba(0, 0, 0, .5);*/
	max-height: 240px; 
	max-width: 740px;
}
.ui-menu-item .ui-state-active{
	/*font-weight: normal;*/
	background: #dcdff8;
	border: 1px solid blue;
}
.ui-front {
	z-index: 250;
}
.selected-option {background: #fff3c0;}
.red-option {color: #800000;}
.bold-option {font-weight: bold;}
.italic-option {font-style: italic;}
.hidden-option {display:none;}

.ui-dialog {
	z-index: 300;
}
.stop-scrolling {
  overflow: hidden;
}
.overflow {
	height: 400px;
}
.hidden{
	display: none;
}

.ui-controlgroup {
    min-width: max-content;
}

.ui-controlgroup > .ui-controlgroup-item:focus,
.ui-controlgroup > .ui-controlgroup-item.ui-visual-focus {
	z-index: 0;
}

.ui-tooltip {
    font-size: 11pt !important;
    background: #dcdff8;
    width: auto;
    min-width: 400px;
    max-width: 600px;
}

.ui-autocomplete-loading {
    background: url('images/loading.gif') no-repeat right center;
    background-color: white;
    background-size: 28px 28px;
}

#nbemail {margin: 0px 0px 0px 8px;}

.affiche table {width: 100%; margin: 1em 0; border-collapse: collapse; box-shadow: 4px 4px 6px #888;}
.affiche table th {border: 2px solid #999999; padding: 2px 10px 2px 10px; text-align: center;}
.affiche table td {border: 1px solid #999999; padding: 2px 10px 2px 10px; text-align: center;}

.edit, .edit2, .merge, .unmerge, .pointer {cursor: pointer;}
.reorder {cursor: ns-resize;}
.link {font-size:12pt; cursor: pointer;}
.link:hover {font-size:12pt; color:blue}
.link2 {font-size:12pt; color:blue !important; cursor:pointer; text-decoration:none} 
.link2:hover {font-size:12pt; color:blue !important; text-decoration:underline}
.novisible, tr.novisible td, tr.novisible th {color:#777777}
.noactive {color:#cc2020}
.noactive.novisible {color:#cc7777}
.noactive.novisible:hover {color:blue}
.label {margin-bottom:-8px;font-size:85%;}

li.select {color: blue;}

.travail img, .comportement img, .recommandation img, .legendre img {vertical-align: middle}