/*https://coolors.co/fde8f9-d53225-425b54-ad6f9e-ffde28-2a1515-56a041-425b54-8cc5e6-2a1515*/

/*Base color: 00C851 ; hue: 189*/
/*Base color: 659933 ; hue: 163*/

.required-field {
	color: #FB5A90;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-color:#FFFFFF;
	padding: 0px;
}

.required-field::before {
	content: '* ';
    color: red;
	font-family: 'trebuchet ms', geneva;
	font-size: 18px;
}

.alertmessage {
	color: #FB5A90;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
    border: 2px solid red;
    padding: 10px;
    border-radius: 50px 20px;
}

.oblifeild {
	color: #FB5A90;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	vertical-align: 1%;/*super;*/
    padding: 3px;
}

#page {
	text-align:left;
	background-color:#808080 /*E6F3E2 D9EDD4 CCE7C5 C0E1B7 bfd8bd a3f7b5 CCFFE5 */;
	/*height:100px;*/
}

#container {
    display: table;
	width:100%;
	background-color:#FFFFFF;
}

#page_head {
    display: table-cell;
    /*border: 20px solid #CCFFE5;*/
    padding: 10px;
	width:100%;
	height:100px;
	text-align: center;
	/*background-color:#FFFFFF;*/
}

#page_foot {
    display: table-cell;
    /*border: 20px solid #CCFFE5;*/
    padding: 10px;
	clear:both;
	width:100%;
	height:100px;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	vertical-align: bottom;
	font-size: 20px;
	font-weight: bold;
	/*background-color:#FFFFFF;*/
}

#container_left {
    display: table-cell;
    /*border: 20px solid #CCFFE5;*/
    padding: 10px;
	width:20%;
	height:100%;
	background-color:#CCFFCC;
}

#container_middel {
    display: table-cell;
    /*border: 20px solid #CCFFE5;*/
    padding: 10px 10px 10px 30px;
	width:70%;
	height:100%;
	/*background-color:#FFFFFF;*/
}

#container_right {
    display: table-cell;
    /*border: 20px solid #CCFFE5;*/
    padding: 10px;
	width:10%;
	height:100%;
	/*background-color:#FFFFFF;*/
}
.displayelement table {
    /*border: 3px solid #FFFFFF;
    border-spacing: 15px;
    border-collapse: collapse;*/
}
.displayelement table td, .displayelement table th {
    /*border: 1px solid black;*/
	font-family: Arial, Helvetica, sans-serif;
	vertical-align: baseline;
	text-align: left;
	display: inline-block;
	font-size: 25px;
}
.displayelement table th {
	width: 300px;
	font-size: 10px;
}
.displayelement h2 {
	font-size: 30px;
	font-family: Arial, Helvetica, sans-serif;
}
.displayelement label, .displayelement span {
    /*border: 1px solid black;*/
	font-family: Arial, Helvetica, sans-serif;
	vertical-align: baseline;
	font-size: 20px;
	font-weight: normal;
	text-align: left;
	display: inline-block;
    margin-right: 15px;

}
.displayelement span {
	font-size: 25px;
	font-weight: bold;
}
.displayelement .footer {
	width: 100%;
	heigh: 50px;
	display: table;
	text-align: right;
}
.displayelement .footer a {
    border-radius: 5px;
    box-shadow: -3px 3px 5px rgba(0, 0, 0, 0.5);
    padding: 5px 20px;
    border: 1px solid #ccc;
    color: #ffffff;
	margin-left: 10px;
    font-family: 'trebuchet ms', geneva;
	font-size: 18pt;
    font-weight: bold;
    cursor: pointer;
    background-color: #8CC5E6;
    background-image: -webkit-linear-gradient(top, #8CC5E6 0%, #2883B8 100%);
    background-image: linear-gradient(to bottom, #8CC5E6 0%, #2883B8 100%);
}
.form input, .form textarea {
    /*width: 400px;*/
    font-size: 25px;
}
.form table {
    /*border: 3px solid #FFFFFF;
    border-spacing: 15px;
    border-collapse: collapse;*/
}
.form table td, .form table th {
    /*border: 1px solid black;*/
	font-family: Arial, Helvetica, sans-serif;
	/*font-size: 10px;*/
	vertical-align: baseline;
	font-size: 25px;
	text-align: left;
}
.form table th {
	font-size: 20px;
	color: #1D6086;
}
.form table td {
	/*font-size: 30px;*/
}
.form input, .form textarea, .form select {
    /*width: 400px;*/
    font-size: 30px;
}
.list {
	background-color:#FF6699;
    border: 3px solid #FFFFFF;
	width: 100%;
	/*color: #00ff00;*/
	font-family: Arial, Helvetica, sans-serif;
	font-size: 30px;
	background-color:#CCFFCC;
}
.list tr {
	/*border-bottom: 1px solid red;*/
}
.list td, .list th {
    /*border: 1px solid black;*/
	font-family: Arial, Helvetica, sans-serif;
	/*font-size: 10px;*/
	vertical-align: middle;
	text-align: left;
	border-bottom: 2px solid #FFFFFF;
}
.list a {
	color: #000000;
}
.list span {
    /*padding-right: 50px;
	display: inline-block;*/
    margin-right: 15px;
}
.list .update, .list .delete {
	width: 50px;
	text-align: right;
}
.list .title {
	text-align: left;
}
.list .num {
	width: 50px;
	text-align: center;
}

.mapsite {
    font-family: 'trebuchet ms', geneva;
	font-size: 14px/*16pt*/;
    font-weight: normal;
	padding: 3px 3px 3px 25px;
	background-color: #5DFF9F;/*95E04D 74FF7D 5DFF9F 74FF7D*/
	border-top: 0px solid #E8F5E9/*ffffff*/;
	border-bottom: 10px solid #00C851;/*43A047 629833 00C851 43A047*/
}
.mapsite a {
    /*padding-right: 10px;*/
    color: #0075ff/*FB5A90 8CC5E6*/;
    cursor: pointer;
    text-decoration: none;
}
.mapsite font {
    /*padding-right: 10px;*/
    color: #963254;
}
.mapsite img {
    /*margin-top: 15px;*/
    margin: 0px 10px 0px 10px;
	width: 11px;
	height: 10px;
}

.img-gray {
	filter: grayscale(100%); /* Standard */
	-webkit-filter: grayscale(100%); /* Webkit */
	filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale"); /* Firefox4-34*/
	filter: gray;  /* IE6-9 */
	-webkit-filter: grayscale(1); /* Old WebKit */
}

.img-red {
	-webkit-filter:hue-rotate(-250deg);
	filter:hue-rotate(-250deg);
}

.error-box {
	/*content: attr(data-value);*/
	border: 1px solid #000000/*ffeb3b FB5A90 ff0800*/;
    border-radius: 3px;
    padding: 3px;
    background-color: #ffffcc/*ffffcc FBFF53 FFFEC4*/; /*#ffff00;*/ /*rgba(0,0,0,0.4);*/
    color: #FB5A90/*ff0800 FB5A90 FF1E1E*/; /*#ff0800;*/
	font-family: 'trebuchet ms', geneva;/*'trebuchet ms', geneva; Arial, Helvetica, sans-serif;*/
	font-size: 11px;
}
.error-box::after {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 5px;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent transparent #000000 transparent;
}

label[required]::after, th[required]::after {
	content: '* ';
    color: red;
	font-family: 'trebuchet ms', geneva;
	font-size: 18px;
}

[info-bulle]::after {
	content: "NOTE: Le mot de passe doit être de 8 caractères minimum et contenir au moins une lettre majuscule, une lettre minuscule, un chiffre et un caractère special: @-+#...";
	position: absolute;
	bottom: 0px;
	left: 0px;
	visibility: hidden;
	z-index: 1000;
	background-color: #5DFF9F;/*A9FC5A*/
	box-shadow: 5px 5px 2px #aaa;
	border: 1px solid grey;
    border-radius: 5px;
	padding: 8px;
	width: 220px;
	height: 75px;
	font-size: 12px;
	color: #030805/*34511A 0E4B66 4F1A2C*/;
	font-weight: Normal;
	text-align: justify;
	text-justify: inter-character/*inter-word*/;
	/*
	opacity: 0;
	z-index: 99999;
	visibility: hidden;*/
}
[info-bulle]:hover:after {
	opacity: 1;
	transition: all 0.1s ease 0.5s;
	visibility: visible;
}
[info-bulle] {
	position: relative;
}
font[info-bulle] {
	font-size: 20px;
	color: #000000;
	cursor: help;
	font-weight: bold;
	margin-left: 5px;
}