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;
	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,#9ab1de 0%,#50699c 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: black;
	}
	div#connect {
		position: fixed; 
		right: 20px;
		top: 20px;
		z-index: 204;
	}
	div#connect button {
	    height: 37px;
	    padding: .2em 1em .2em 1em;
	}
	div#quit {
		position: absolute;
		right: 20px;
		top: 20px;
	}
div#onglet {
	position: fixed;
	top: 80px;
	left: 0px;
	height: 35px;
	padding-left: 40px;
	white-space: nowrap;
	z-index: 202;
}
div#apps {
	position: fixed;
	top: 80px;
	left: 0px;
	width: 280px;
	padding: 10px;
	z-index: 500;
	background: linear-gradient(to bottom,#fff 0%,#ccc 100%);
	border: 2px solid #000;
	border-radius: 0px 0px 10px 10px;
	box-shadow: 8px 8px 30px #222;
	max-height: calc(100vh - 120px);
	overflow-y: auto;
}
	div#apps div{
		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#toolbar {
	position: absolute;
	left: 0px;
	top: 80px;
	bottom: 0px;
    width: 230px;
	margin: 0px 0px 0px 0px;
	padding: 10px 10px 10px 10px;
	overflow-x: hidden;
	overflow-y: auto;
	border: 0px;
	background-color: #50699c;
	box-shadow: 6px 4px 4px #555555;
	z-index: 300;
}
	#toolbar label {
	    font-size: 16px;
		color: #222222;
	}
	#toolbar #menup, #toolbar #Undo-Redo, #toolbar #mode {
		width: 230px;
		margin-bottom: 8px;
	}
	#toolbar #menup button {
		width: 50%;
		padding: .4em 0em;
	}
	#toolbar #Undo-Redo button {
		width: 25%;
		padding: .4em 0em;
	}
	#toolbar #mode button {
		width: 33.3%;
		padding: .4em 0em;
		height: 60px;
	}
	#toolbar #pls, #toolbar #bur, #toolbar #btnordre, #toolbar #btprint, #btmodele {
		width: 212px;
		margin-bottom: 8px;
	}
	#toolbar #btnordre button, #toolbar #btnordre button, #toolbar #bur button{
		width: 33.3%;
		padding: .4em 0em;
	}
	#toolbar #btprint button {
		width: 50%;
		height
		padding: .4em 0em;
	}
div#print {
	position: absolute;
	left: 0px;
	top: 0px;
	bottom: 0px;
	right: 0px;
	overflow-x: hidden;
	overflow-y: hidden;
}
div#centre {
	position: absolute;
	left: 250px;
	top: 90px;
	bottom: 0px;
	right: 0px;
	overflow-x: hidden;
	overflow-y: hidden;
	background: #eeeeee;
	min-width: 600px;
}
div#groupe-intro {
	position: absolute; 
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	width: 80%;
	height: 400px;
	margin: auto;
	text-align: center;
	/*border: solid;border-color:black;*/
}
div#groupe-setting {
	position: absolute; 
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	width: 100%;
	margin: 0px auto;
	overflow-x: auto;
	overflow-y: auto;
	/*border: solid;border-color:black;*/
}
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#groupe-aide {
	position: absolute; 
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	width: 100%;
	margin: 0px auto;
	overflow-x: hidden;
	overflow-y: hidden;
	background: rgba(225, 225, 225, 100);
	z-index:199;
	/*border: solid;border-color:black*/;
}
div#quit {
	position: absolute; 
	right: 20px;
	top: 20px;
}
div#groupe-groupe {
	position: absolute; 
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	width: 100%;
	margin: 0px auto;
	overflow-x: auto;
	overflow-y: auto;
	/*border: solid;border-color:black;*/
}
div#groupe-scroll {
	position: absolute; 
	top: 0px;
	left: 80px;
	right: 80px;
	margin-bottom: 60px;
	/*border: solid;border-color:red;*/
}
div#marge {
	position: absolute; 
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	width: 100%;
	margin: auto auto;
	/*border: solid;border-color:green;*/
}
div#PrintArea {
	position: absolute; 
	top: 0px;
	left: 0px;
	width: 10in;
	height: 7.5in;
	margin: auto auto;
	/*border: solid;border-color:green;*/
}
div#groupe-bureau {
	position: absolute; 
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	width: 100%;
	margin: 0px auto;
	/*background: #ffffff;*/
	/*border: solid;border-color:#eeeeee;*/
}
div#aucun-groupe{
	position: absolute; 
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	width: 250px;
	height: 100px;
	margin: auto;
	text-align: center;
	color: #bbbbbb;
	/*background: #ffffff;*/
	/*border: solid;border-color:black;*/
}
div#groupe-eleve-over {
	position: absolute; 
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	width: 450px;
	height: 150px;
	margin: auto;
	padding: 20px;
	text-align: center;
	color: red;
	background: #ffffff;
	border: solid;
	border-color: #888888;
	border-radius: 25px;
	box-shadow: 8px 8px 18px #555555;
}
div#groupe-eleve {
	position: absolute; 
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	width: 100%;
	margin: 0px auto;
	/*border: solid;border-color:black;*/
}
div#titre,#Ptitre{
    font-size: 1.17em;
    font-weight: bold;
	position: absolute; 
	width: 100%;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left:0px;
	padding-right:0px;
	text-align: center;
	/*border: solid;border-color:black;*/
}
#grid{
	position: absolute;
	overflow: hidden;
	top: 0px;
	left: 0px;
	width:100%;
	height: 100%;
	background: white;
	/*border: solid;border-color:black;*/
}
div#log {
	position: absolute; 
	top: 150px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	margin: auto;
	padding: 50px;
	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: 400px;
    margin: 4px 0px 4px 0px !important;
    padding: 6px 6px 6px 6px !important;
}
div.validateTips {
	border: 1px solid transparent;
	padding: 0.3em;
}

div#noir{
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: black;
	opacity: 0.60;
	z-index: 1000;
}

/*Bureau et Photo*/
.bureaux {
	position: absolute;
}
.bureau {
	position: absolute;
	z-index: 0;
	cursor: move;
}
.no{
	position: absolute;
	text-align: center;
	color: #888888;
	font-weight:bold;
	cursor: move;
}
.square {
	position: absolute;
	border: none;
	border-radius: 2px 2px 2px 2px;
	background-color: #eeeeee;
	opacity: .8;
}
.maskphoto {
	position: absolute;
	left: 0px;
	top: 0px;
	overflow: hidden;
}
.photos {
	position: absolute;
}
.prenom {
	cursor: move;
}
.nom {
	cursor: move;
}
.eleve {
	position: absolute;
	z-index: 50;
	cursor: move;
}



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;
	}

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: black;
		background: linear-gradient(to bottom,#9ab1de 0%,#50699c 100%);
	}
	table.tableau td {
		padding: 4px 10px 4px 10px;
		border: 2px solid #888;
		background: #ffffff;
	}
	table.tableau img{
		vertical-align: middle;
		margin: 2px 2px 2px 2px;
	}
	table.option td {
		padding: 8px 10px 8px 10px;
		height: 36px;
	}
	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: #ffffb0;}
	table.tableau tr.over td{color: blue}
	table.tableau tr.disabled td{background: #ddd; color: #888888}
	table.tableau tr.connect {font-weight: bold;}
	table.tableau tr.noconnect {color: #555;}
	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: 6px 0px 6px 0px;
	padding: 4px 4px 4px 4px;
	box-sizing: border-box
}
textarea {
	resize: vertical;
}
input:read-only {
	background-color: #ddd;
}

table button, table .ui-button {
	margin: 10px 0px 10px 0px;
}

#dialog-photo {
	position: fixed; 
	bottom: 20px;
	left: 30px;
	z-index: 300;
}
#dialog-photo img{
	box-shadow: 8px 8px 8px #333
}


.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;
}



input[type=text], textarea {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
}

.ui-dialog { z-index: 1004 !important ;}
.ui-widget-overlay {z-index: 1003 !important; background: black}
#menuprofil ,#menuprint, #menusetup, #menugroupe, #menueleve, #menuuser, #menudata, #menuphoto, #menuecole, #logbook
 {font-size:20px; width: 100%; text-align: left;}
#tache {font-size:20px; width: 430px; text-align: left;}
#groupes, #locaux, #modele {font-size:18px; width: 205px; text-align: left; padding: 0px}
#level, #email, #lastname, #firstname {margin: 0px 0px 6px 0px;}
#localtext{font-size:18px; width: 190px; text-align: left}
#spinner {font-size:18px; }
#renum, #grille, #align {width: 33.33%; height:50px;}

.ui-accordion-header  {padding: 20px 0px 20px 0px;}  
.ui-accordion .ui-accordion-content {padding: 10px 10px;}  
.ui-accordion b{vertical-align: super;}

.zoom {opacity: .5; left: 400px; width: 500px}

tr.select{background: #CECEF2;}
tr.over{color: red !important;}
td.nowrap{white-space: nowrap;}
tr.copy{color: Blue;}

#gr .ui-button-text-only .ui-button-text {padding: 10px 14px 8px 14px;}
#gr2 .ui-button-text-only .ui-button-text {padding: 10px 14px 8px 14px;}

.prenom {position: absolute; left: 0px; top: 0px; width: 300px; text-align: center; color: black; font-family:Oswald;white-space: nowrap;overflow: hidden;}
.nom {position: absolute; left: 0px; top: 0px; width: 300px; text-align: center; color: black; font-family:Oswald;white-space: nowrap;overflow: hidden;}

@page { size:11in 8.5in; margin: 1cm }


.ui-widget-header {
	background: linear-gradient(to bottom,#9ab1de 0%,#50699c 100%);
	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, .ui-spinner, .custom-combobox-input {
	box-shadow: 3px 3px 4px rgba(0, 0, 0, .4);
}
.ui-icon-background, .ui-state-active .ui-icon-background {
    border: #2222ff;
    background-color: lightgrey;
}
.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 {
	box-shadow: 3px 3px 16px rgba(0, 0, 0, .5);
	max-height: 300px; 
	max-width: 740px;
	overflow-y: auto;
	overflow-x: hidden;
}
.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;
}
.selected-option {background: #fff3c0;}

#toolbar .ui-state-active, #connect .ui-state-active{
	background: #dcdff8;
	border: 1px solid blue;
}
.selected-option {background: #fff3c0;}

.ui-state-disabled img {
    opacity: .35;
}

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

#connect .hidden{
	display: none;
}
#connect .ui-selectmenu-text {
    margin-right: 0px;
}
#connect #comborole-menu{
	width: 228px;
}
#connect #comboexit-menu{
	width: 248px;
}
#connect #comboexit-button {
	padding-left: 10px;
	padding-right: 10px;
}
#connect .ui-menu{
	width: 196px;
	z-index: 1;
}

#menu .ui-selectmenu-menu{
	z-index: 300;
}
#toolbar .ui-selectmenu-menu{
	max-width: 212px;
}

.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, .pointer {cursor: pointer;}

li.select {color: blue;}

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

.file_drop {
  position: relative;
  height: 80px;
  background: white;
  margin: 20px 10px 20px 10px;
  padding: 30px 30px;
  border: 3px dashed #888;
  cursor: pointer;
}
.dragover {
	border: 3px dashed green;
	background: #e6ffe6;
}
.dz-message{
    text-align: center;
    font-size: 20px;
    font-style: italic;
    color: #aaa;
	margin: 30px; 
	pointer-events: none;
}
.dz-image{
	position: absolute;
    top: 15px;
    left: 200px;
	margin: 30px; 
}

#details{
	margin: 10px;

}
#progresszip, #progressupload, #progresstreat {
	height: 24px;
	margin: 10px;
}   
.ui-progressbar .ui-progressbar-value {
	background: yellowgreen;
}