body {
	height: 100%;
	width: 100%;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12pt;
	cursor: default;
	background: #eeeeee;
	overflow-y: scroll;
}
p {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}
div#menu {
	position: fixed; 
	top: 0px;
	left: 0px;
	right: 0px;
	height: 80px;
	box-shadow: 0px 6px 4px #555555;
	white-space: nowrap;
	z-index: 201;
	background: linear-gradient(to bottom,#4c4c4c 0%,#1f2020 100%);
}
	div#logo {
		position: absolute; 
		left: 0px;
		top: 0px;
	}
	div#logo-titre {
		position: absolute; 
		top: 0px;
		left: 80px;
		padding: 20px 10px 20px 10px;
		font-size: 2em;
	    font-weight: bold;
	    color: white;
	}
	div#connect {
		position: fixed; 
		right: 20px;
		top: 20px;
		z-index: 204;
	}
	div#quit {
		position: absolute; 
		right: 20px;
		top: 20px;
	}
div#onglet {
	position: fixed; 
	top: 80px;
	left: 0px;
	height: 35px;
	padding-left: 0px;
	white-space: nowrap;
	z-index: 202;
	width: 100%;
}
div#message {
	position: fixed; 
	top: 80px;
	left: 0px;
	right: 0px;
	padding: 10px 40px 10px 40px;
	box-shadow: 8px 8px 8px #aaa;
	min-height: 1em;
	z-index: 203;
}
div#centre {
	position: absolute; 
	top: 0px;
	left: 0px;
	right: 0px;
	min-height: calc(100vh - 220px);
	padding: 120px 60px 100px 60px;
}
div#log {
	position: absolute; 
	top: 150px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	margin: auto;
	padding: 50px;
	overflow-x: auto;
	overflow-y: 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: 250px;
    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 {
	display: inline-block;
	padding: 10px 20px 10px 20px;
	white-space: nowrap;
}
	div.fonction.sticky{
		position: sticky;
		top: 120px;
	}
div#pied {
	position: absolute; 
	bottom: 0px;
	left: 0px;
	right: 0px;
    height: 32px;
    padding: 20px 20px 20px 20px;
	background: #1f2020;
}
	div#pied a:link {
	  color: white;
	}
	div#pied a:visited {
	  color: white;
	}
	div#pied a:hover {
	  color: white;
	}
	div#pied a:active {
	  color: white;
	}

table.tableau {
	width: 100%;
	margin: 10px auto 20px auto;
	border: 2px solid #888;
	border-collapse: collapse;
	box-shadow: 6px 6px 8px #555555;
}
	table.tableau th {
		font-size: 1.2em;
		padding: 8px 10px 8px 10px;
		border: 2px solid #888;
		color: #ffffff;
		background: linear-gradient(to bottom,#4c4c4c 0%,#1f2020 100%);
	}
	table.tableau td {
		padding: 2px 10px 2px 10px;
		border: 2px 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;
		background: linear-gradient(to bottom, #dddddd, #aaaaaa); 
	}
	table.tableau .info {
		background: linear-gradient(to bottom, #dddddd, #aaaaaa);
	}
	table.tableau .past {color: grey; background:linear-gradient(to bottom, #C0D8E6, #96BED6);}
	table.tableau .nowrap {white-space: nowrap;}
	table.tableau .check {box-shadow: 3px 3px 4px #888;}
	table.tableau .radio {margin: 2px 15px 2px 15px;}
	table.tableau .down {float: right; cursor: pointer;}
	table.tableau tr.odd td{background: #eeeeee;}
	table.tableau tr.select td{background: #ffffcc;}
	table.tableau tr.over td{color: blue;}
	table.tableau td.petit {background:linear-gradient(to bottom, #dddddd, #bbbbbb); height: 20px; color: #000000}
	table.tableau td.ctrl {width: 60px}
	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.tableaufiche {
	width: 100%;
	margin: 10px auto 20px 60px;
	border: 2px solid #888;
	border-collapse: collapse;
	box-shadow: 6px 6px 8px #555555;
}
	table.tableaufiche th {
		padding: 8px 10px 8px 10px;
		color: #ffffff;
		background: linear-gradient(to bottom, #003868, #001b33);
	}
	table.tableaufiche td {
		padding: 2px 10px 2px 10px;
		border: 2px 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 #555555;
	  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: 60px; /* 40 cos(45) = 28 with an additional 2px margin*/
	  left: -70px; /*Because it looked good, but there is probably a mathematical link here as well*/
	  display: inline-block;
	  width: 200px; /* 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;
	}


	table.tableaufiche .groupe {font-size:1.2em; background: linear-gradient(to bottom, #003868, #001b33); color: #ffffff}
	table.tableaufiche .past {color: grey; background:linear-gradient(to bottom, #C0D8E6, #96BED6);}
	table.tableaufiche .nowrap {white-space: nowrap;}
	table.tableaufiche .check {box-shadow: 3px 3px 4px #555555;}
	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.tableaufiche td.noborder {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;
}

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;
}
table button, table .ui-button {
	margin: 10px 0px 10px 0px;
}

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



.custom-combobox {
position: relative;
display: inline-block;
}
.custom-combobox-toggle {
position: absolute;
top: 0;
bottom: 0;
margin-left: -1px;
padding: 0;
}
.custom-combobox-input {
margin: 0;
padding: 0.3em;
background: white;
width: 220px;
}

.ui-button.onglet {
	border: 1px solid #666;
	border-radius: 0px 0px 0px 0px;
	margin-right: -5px;
	padding: 10px 0px;
	width: 25%;
}
.ui-button, .ui-radio, .custom-combobox-input{
	box-shadow: 3px 3px 4px rgba(0, 0, 0, .4);
}
.ui-selectmenu-icon.ui-icon, #comborole.ui-button .ui-icon, .choixequipe.ui-button .ui-icon {
	float: right;
	margin-top: 3px;
}
.ui-widget-overlay {background: black;}

.ui-menu, .ui-selectmenu-menu {
	box-shadow: 3px 3px 16px rgba(0, 0, 0, .5);
	max-height: 240px; 
	overflow-y: auto;
}
.ui-menu-item .ui-state-active{
	font-weight: normal;
	background: linear-gradient(to bottom, #f8f8f8, #eeeeee);
}
.ui-dialog {
	z-index: 300;
}
.stop-scrolling {
  overflow: hidden;
}
.overflow {
	height: 400px;
}

#menu .ui-selectmenu-menu{
	z-index: 300;
}

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

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

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

.edit, .merge, .unmerge, .pointer {cursor: pointer;}

li.select {color: blue;}

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