/*------------------ font ---------------------*/
@font-face {
	font-family: 'dakota';
	src:
		url('../../resources/css/fonts/font-awesome-4.2.0/fonts/handwriting-dakota.eot');
	src:
		url('../../resources/css/fonts/font-awesome-4.2.0/fonts/handwriting-dakota.eot?#iefix')
		format('embedded-opentype'),
		url('../../resources/css/fonts/font-awesome-4.2.0/fonts/handwriting-dakota.woff')
		format('woff'),
		url('../../resources/css/fonts/font-awesome-4.2.0/fonts/handwriting-dakota.ttf')
		format('truetype'),
		url('../../resources/css/fonts/font-awesome-4.2.0/fonts/handwriting-dakota.svg')
		format('svg');
}

@font-face {
	font-family: 'gothic';
	src:
		url('../../resources/css/fonts/font-awesome-4.2.0/fonts/bradley.eot');
	src:
		url('../../resources/css/fonts/font-awesome-4.2.0/fonts/bradley.eot?#iefix')
		format('embedded-opentype'),
		url('../../resources/css/fonts/font-awesome-4.2.0/fonts/bradley.woff')
		format('woff'),
		url('../../resources/css/fonts/font-awesome-4.2.0/fonts/bradley.ttf')
		format('truetype'),
		url('../../resources/css/fonts/font-awesome-4.2.0/fonts/bradley.svg')
		format('svg');
}

@font-face {
	font-family: gothic;
	src: url(../../resources/css/fonts/font-awesome-4.2.0/fonts/gothic.woff);
}

/*------------------ reset ---------------------*/
html, body {
	margin: 0;
	padding: 0;
	font-family: 'gothic';
	min-height: 100%;
	width: 100%;
	background: -webkit-gradient(top left, white, #1A3755);
	background: -webkit-linear-gradient(top left, white, #1A3755);
	background: -moz-linear-gradient(top left, white, #1A3755);
	background: -o-linear-gradient(top left, white, #1A3755);
	background: -ms-linear-gradient(top left, white, #1A3755);
	background: linear-gradient(top left, white, #1A3755);
	background-repeat: no
}

::-webkit-input-placeholder   {
    color: gray !important;
}

:-ms-input-placeholder {
    color: gray !important;	
}

::-moz-placeholder {
    color: gray !important;		
}

:-moz-placeholder {
    color: gray !important;	
}

/*------------------ style de la page de login -----------------------------------*/

/*---------------     Titre    --------------*/
h1 {
	text-align: center;
	margin: auto;
	padding-top: 10vw;
	color: red;
	font-family: 'dakota';
	font-size: 5vw;
}

.login-title {
	letter-spacing: -50px;
}

.login-title span:nth-of-type(2) {
	font-family: 'gothic';
	color: #254061;
	letter-spacing: 2px;
}

.login-title span:nth-of-type(1), h1 span:nth-of-type(3) {
    letter-spacing: 10px;
}

a {
	text-decoration: none;
}


.login-title span:nth-of-type(2) {
	font-family: 'gothic';
	color: #254061;
	letter-spacing: 2px;
}

.login-title span:nth-of-type(1), h1 span:nth-of-type(3) {
    letter-spacing: 10px;
}


.globeTitre {
	background-image: url("../../resources/images/optemar-logo.png");
	background-repeat: no-repeat;
	background-size: cover;
	display: inline-block;
	width: 8%;
	margin: auto;
	vertical-align: middle;
	width: 6%;
    margin-top: -2%;
    background-size: contain;
    padding: 0;
}

@media screen and (max-width: 425px) {
	.login-title {
		letter-spacing: -5px;
	}
	
	.login-title span:nth-of-type(1), h1 span:nth-of-type(3) {
	    letter-spacing: 5px;
	}

}

.globeTitre {
	background-image: url("../../resources/images/optemar-logo.png");
	background-repeat: no-repeat;
	background-size: cover;
	display: inline-block;
	width: 8%;
	margin: auto;
	vertical-align: middle;
	width: 6%;
    margin-top: -2%;
    background-size: contain;
    padding: 0;
}

.globeTitre::before {
	content: "";
	display: block;
	padding-top: 100%;
}

.globeTitre1 {
	background-image: url("../../resources/images/optemar-logo.png");
	background-repeat: no-repeat;
	background-size: cover;
	display: inline-block;
	width: 16%;
	margin: auto;
	vertical-align: middle;
	width: 4vw;
    margin-top: -2.5vw;
    background-size: contain;
    padding: 0;
}

.globeTitre1::before {
	content: "";
	display: block;
	padding-top: 100%;
}




/*---------------     formulaire     --------------*/
.loginpage form {
	padding-top: 6vw;
	text-align: center;
	margin: auto;
	height: 30%;
}

.loginpage>form input[type=text],.loginpage>form input[type=password] {
	vertical-align: middle;
    margin: auto;
    display: inline-block;
    font-family: 'gothic';
    width: 20%;
    min-height: 2.5vw;
    height: 2.5vw;
    text-align: center;
    line-height: 2.5vw;
    margin-left: 5vw;
    font-size: 1.2vw;
}


input[type="checkbox"] {
    -ms-transform: scale(3);
    -moz-transform: scale(3);
    -webkit-transform: scale(3);
    -o-transform: scale(3);
    transform: scale(3);
}

.loginpage input::-webkit-input-placeholder {
	color: white;
	font-size: 1.2vw;
}


.loginpage input[placeholder=Passwor]::-webkit-input-placeholder:after {
	color: red;
	content: "d";
	opacity: 1
}

.loginpage input[placeholder=Logi]::-webkit-input-placeholder:after {
	color: red;
	content: "n";
	opacity: 1;
}

.loginpage input[type=button] {
	vertical-align: middle;
	margin: auto;
	display: inline-block;
	font-family: 'dakota';
	font-size: 1.8vw;
	color: #444;
	width: 12%;
	height: 35%;
	border-radius: 20%;
	border: 1px solid #254061;
	background-color: #EBEBEB;
	text-align: center;
	box-shadow: -5px -5px 2px rgba(0, 0, 0, 0.5) inset, 5px 5px 2px
		rgba(255, 255, 255, 0.6) inset;
	line-height: 2.5vw;
	margin-left: 5vw;
	float: none;
	padding: 1.5vw;
}


.loginpage input[type=submit] {
	vertical-align: middle;
	margin: auto;
	display: inline-block;
	font-family: 'dakota';
	font-size: 1.8vw;
	color: #444;
	width: 12%;
	height: 35%;
	border-radius: 20%;
	border: 1px solid #254061;
	background-color: #EBEBEB;
	text-align: center;
	box-shadow: -5px -5px 2px rgba(0, 0, 0, 0.5) inset, 5px 5px 2px
		rgba(255, 255, 255, 0.6) inset;
	line-height: 2.5vw;
	margin-left: 5vw;
	float: none;
	padding: 1.5vw;
}


.toCenter {
	position: absolute;
	bottom: 2%; /*30px;*/
	left: 0;
	width: 100%;
	text-align: center;
	vertical-align: middle;
	margin: auto;
}

.optemar {
	text-align: center;
	vertical-align: middle;
	margin: auto;
	display: inline-block;
	background-image: url("../../resources/images/optemar-logo-complet.png");
	width: 15%;
	background-repeat: no-repeat;
	background-size: cover;
	margin-right: 4vw;
}

.dreyfus {
	text-align: center;
	vertical-align: middle;
	margin: auto;
	display: inline-block;
	background-image: url("../../resources/images/dreyfus.png");
	width: 15%;
	background-repeat: no-repeat;
	background-size: cover;
}

.dreyfus::before {
	content: "";
	display: block;
	padding-top: 55%
}

.optemar::before {
	content: "";
	display: block;
	padding-top: 38%;
}

/*------------------ style des messages d'alerte ------------------*/

.alertmessage {
	font-family: 'dakota';
	font-size: 1.6vw;
	color: #FDEE00;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	background-color: black;
	padding-left: 1vw;
	padding-right: 1vw;
	border: 1px solid yellow;
	height: 4vw;
}

.alertmessage img {
	padding-right: 30px;
}


/*------------------ style des rectangles et des lettres rouges  ---------------------*/
.rectangle {
	width: 50%;
	height: 50%;
	float: left;
	background-color: #7A8C9D;
	box-sizing: border-box;
	border-bottom: 2px solid #3B526B;
	text-align: center;
	vertical-align: middle;
	margin: auto;
}

#rect2 {
	background-color: #455D75;
	vertical-align: middle;
	margin: auto;
}

#rect3 {
	background-image: url("../../resources/images/boat.jpg");
	background-size: cover;
	background-position: center;
}

#rect4 {
	padding-top: 8%;
	font-family: 'dakota';
}



.redLetter {
	color: red;
	font-family: 'dakota';
}

/*------------------ style du button   ---------------------*/
#rect1 .main_button {
	vertical-align: middle;
	margin: auto;
	width: 65%;
	height: 25%;
	background-color: #D5D5D5;
	margin-top: 20%;
	border-radius: 15px;
	padding-top: 3vw;
	box-shadow: -5px -5px 2px rgba(0, 0, 0, 0.5) inset, 5px 5px 2px
		rgba(255, 255, 255, 0.6) inset;
}

#rect1 .main_button:hover {
	cursor: pointer;
	box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5) inset, -5px -5px 2px
		rgba(255, 255, 255, 0.6) inset;
}

#rect1 .main_buton:active {
	box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5) inset, -5px -5px 2px
		rgba(255, 255, 255, 0.6) inset;
}

#rect1 a {
	vertical-align: middle;
	margin: auto;
	text-decoration: none;
	font-size: 3vw;
	color: #17375E;
}

#rect1 a:active {
	color: #17375E;
}

#rect1 .globe {
	background-image: url("../../resources/images/optemar-logo.png");
	background-repeat: no-repeat;
	background-size: cover;
	width: 15%;
	display: inline-block;
	vertical-align: middle;
	margin: auto;
	margin-right: 0;
}

#rect1 .globe::before {
	content: "";
	display: block;
	padding-top: 100%;
}

/*------------------ style du rectangle haut droit   ---------------------*/
#rect2 p {
	color: white;
	vertical-align: middle;
	font-size: 3vw;
	margin: auto;
	margin-top: 22%;
}

/*------------------ style du rectangle bas droit   ---------------------*/
#rect4 p {
	color: white;
	vertical-align: middle;
	font-size: 2vw;
	margin: auto;
	line-height: 6vw;
}

#rect4 .care {
	font-size: 2.5vw;
	font-family: 'gothic';
}

/* --------------------- Style du Header -------------------  */
header {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	background-color: #11314F;
	box-shadow: 1px 1px 3px 3px rgba(0, 0, 0, 0.5);
	vertical-align: middle;
	font-family: 'dakota';
	color: white;
	text-align: center;
	border: 1px solid #5B92C7;
	box-sizing: border-box;
}

header .logo_opt {
	background-image: url("../../resources/images/optemar-logo.png");
	background-repeat: no-repeat;
	background-size: cover;
	display: inline-block;
	width: 5%;
	margin: auto;
	vertical-align: middle;
	float: left;
	margin-top: 2vw;
	margin-left: 30px;
}

header .logo_opt::before {
	content: "";
	display: block;
	padding-top: 100%;
}

header p {
	display: inline-block;
	font-size: 2.5vw;
	margin-left: 30px;
	margin-right: 30px;
}

header .care {
	font-family: 'gothic';
	font-size: 3vw;
}

header .previous {
	display: inline-block;
	vertical-align: middle;
	margin: auto;
	box-shadow: 0 0px 0px #ccc, 0 -1px 1px #666, inset 0 -3px 2px
		rgba(0, 0, 0, 0.5), inset 0 3px 3px rgba(255, 255, 255, 0.8);
	background-color: #87739D;
	color: black;
	font-size: 1vw;
	font-family: 'gothic';
	font-weight: bold;
	line-height: 0.9vw;
	width: 6%;
	padding-top: 5px;
	padding-bottom: 5px;
	border-radius: 10%;
	text-shadow: center;
	float: right;
	margin-top: 4vw;
	margin-right: 30px;
}

header .previous:hover {
	background-color: #BBAAD2;
	cursor: pointer;
}

header .previous1 {
	display: inline-block;
	vertical-align: middle;
	width: 5vw;
	height: 5vw;
	padding-top: 0;
	padding-bottom: 0;
	border-radius: 50%;
	text-shadow: center;
	float: right;
	margin-top: 2vw;
	margin-right: 30px;
}

header .previous1:hover {
	cursor: pointer;
}






header div .power_off {
	background-color: red;
	border-radius: 50%;
	display: inline-block;
	width: 3.3vw;
	padding: 0.5vw;
	box-shadow: 0 0px 0px #ccc, 0 -1px 1px #666, inset 0 -3px 2px
		rgba(0, 0, 0, 0.5), inset 0 3px 3px rgba(255, 255, 255, 0.8);
	float: right;
	margin-top: 3vw;
	margin-right: 30px;
}

header div .power_off:hover {
	background-color: #F05D44;
	cursor: pointer;
}

header a .fa {
	color: white;
	font-size: 3vw;
}



/* -------------------- Style des tableaux -------------------- */
.sectab {
	background: #11314F;
	max-width: 100%;
	overflow: auto;
	font-size: 1em;
	border-top: 1px solid #FFF;
	border-right: 1px solid #FFF;
}

.sectab1 {
	background: #11314F;
	max-width: 100%;
	overflow: auto;
	font-size: 1em;
	border-top: 1px solid #FFF;
	border-right: 1px solid #FFF;
}



#tablecrew {
	border-spacing: 0px;
	border-bottom:  1px solid #FFF;
}

#tablecrew th {
	border-left: 1px solid #FFF;
	border-bottom: 1px solid #FFF;
	color: #FFF;
	height: 40px;
	font-size: 1.2vw;
}

#tablecrew th:last-child {
	border-right: 1px solid #FFF;
}

#tablecrew tbody
{
	display: block;
	height: 522px;
	overflow-y: scroll;
}

#tablecrew tbody tr {
	height: 40px;
	display:table;
    width:100%;
    table-layout:fixed;
}

#tablecrew tbody td {
	border-left: 1px solid #FFF;
	border-right: 0px;
	border-bottom: 1px solid #FFF;
	font-size: 1vw;
}

#tablecrew thead {
	display:table;
	table-layout:fixed;
	width: calc( 100% - 12px );
}


/*****  TABLE CUSTOMER  ****/

#tablecustomer {
	border-spacing: 0px;
	border-bottom:  1px solid #FFF;
	font-size: 1.2vw;
}

#tablecustomer th {
	border-left: 1px solid #FFF;
	border-right: 0px;
	color: #FFF;
	font-size: 1.2vw;
	padding-top: 0.5vw;
	padding-bottom: 0.5vw;
}

#tablecustomer tbody
{
	display: block;
	height: 23vw;
	overflow-y: scroll;
	text-align: center;
	border: 1px solid #FFF;
}

#tablecustomer tbody tr {
	height: 3vw;
	display:table;
    width:100%;
    table-layout:fixed;
}

#tablecustomer tbody td {
	border-left: 1px solid #FFF;
	border-right: 0px;
	border-bottom: 1px solid #FFF;
	font-size: 1vw;
}

#tablecustomer thead {
	display:table;
	table-layout:fixed;
	width: calc( 100% - 13px );
}

#tablecustomer tr:nth-child(odd) td {
	background-color: #CCFFFF;
}

#tablecustomer tr:nth-child(even) td {
	background-color: #CC99FF;
}

#tablecustomer img:hover {
	cursor: pointer;
}




#tablefleet {
	border-spacing: 0px;
	border-bottom:  1px solid #FFF;
	font-size: 1.2vw;
}

#tablefleet th {
	border-left: 1px solid #FFF;
	border-right: 0px;
/*	border-bottom: 1px solid #FFF;*/
	color: #FFF;
	font-size: 1.2vw;
	padding-top: 0.5vw;
	padding-bottom: 0.5vw;
}

#tablefleet thead {
	display:table;
	table-layout:fixed;
	width: calc( 100% - 13px );
	overflow-y: scroll;
}

#tablefleet tbody
{
	display: block;
	height: 23vw;/*522px;*/
	overflow-y: scroll;
	text-align: center;
	border: 1px solid #FFF;
}

#tablefleet tbody tr {
	height: 3vw;/*40px;*/
	display:table;
    width:100%;
    table-layout:fixed;
}

#tablefleet tbody td {
	border-left: 0;
	border-bottom: 1px solid #FFF;
	font-size: 1.2vw;
}

#tablefleet tr:nth-child(odd) td {
	background-color: #CCFFFF;
}

#tablefleet tr:nth-child(even) td {
	background-color: #CC99FF;
}

#tdimg img:hover {
	cursor: pointer;
}



#tablefleet1 {
	border-spacing: 0px;
	border: 0px;
}

#tablefleet1 thead {
	border: 0px;
	border-bottom: 1px solid #FFF;
}

#tablefleet1 tr {
	border: 0px;
}

#tablefleet1 th {
	color: #FFF;
	height: 26px;
	font-size: 1vw;
	padding-top: 0.4vw;
	padding-bottom: 0.4vw;
	border: 0px;
	border-right: 1px solid #FFF;
}

#tablefleet1 th:last-child {

}



#tablefleet1 thead tr:nth-child(2) th {
	font-size: 0.8vw;
	padding-top: 0.3vw;
	padding-bottom: 0.3vw;
}


#tablefleet1 tbody
{
	display: block;
	background: #11314F;
	height: 23vw;
	overflow-y: scroll;
	border-bottom: 1px solid #FFF;
}

#tablefleet1 tbody tr {
	/*height: 5vh;*/
	border-bottom: 1px solid #FFF;
}

#tablefleet1 tbody td {
	/*font-size: 1vw;	*/
}

#tablefleet1 td {
	width: 100px;
	text-align: center;
	font-size: 1.1vw;
	border: 0px;
	border-right: 1px solid #FFF;
}


#tablefleet1 tbody tr:first-child {

}

#tablefleet1 tbody td:last-child {

}

#tablefleet1 tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;
}

#tablefleet1 thead {
	display:table;
	table-layout:fixed;
	width: calc( 100% - 12px );
}

#tablefleet1 tr:nth-child(odd) td {
	background-color: #CCFFFF;
}

#tablefleet1 tr:nth-child(even) td {
	background-color: #CC99FF;
}

#tablefleet1 th:nth-child(1) {
	width: 28%;
}

#tablefleet1 td:nth-child(1) {
	width: 28.1%;
}


#tablefleet1 th:nth-child(2) {
	width: 8%;
}

#tablefleet1 td:nth-child(2) {
	width: 8.1%;
	font-size: 1vw;
}

/* picture */
#tablefleet1 td:nth-child(7), #tablefleet1 thead tr:first-child th:nth-child(5) {
	width: 8%;
}

#tablefleet1 td:nth-child(3), #tablefleet1 td:nth-child(4),
#tablefleet1 td:nth-child(5), #tablefleet1 td:nth-child(6),
#tablefleet1 td:nth-child(8), #tablefleet1 td:nth-child(9) {
	width: 8%;
}

#tablefleet1 thead th:nth-child(3), #tablefleet1 thead th:nth-child(4), #tablefleet1 thead th:nth-child(6) {
	width: 16.2%;
}











#tableship {
	border-spacing: 0px;
	border-bottom:  1px solid #FFF;
}

#tableship th {
	border-left: 1px solid #FFF;
	border-right: 0px;
	border-bottom: 1px solid #FFF;
	color: #FFF;
	height: 40px;
	font-size: 1.2vw;
}

#tableship tbody
{
	display: block;
	height: 530px;
	overflow-y: scroll;
}

#tableship tbody tr {
	height: 40px;
	display:table;
    width:100%;
    table-layout:fixed;
}

#tableship tbody td {
	border-left: 1px solid #FFF;
	border-right: 0px;
	border-bottom: 1px solid #FFF;
	font-size: 1.2vw;
	width: 15%;
}

#tableship thead {
	display:table;
	table-layout:fixed;
	width: calc( 100% - 12px );
}

#tableship tr:nth-child(odd) td {
	background-color: #CCFFFF;
}

#tableship tr:nth-child(even) td {
	background-color: #CC99FF;
}




#tablevessel {
	border-spacing: 0px;
	border-bottom:  1px solid #FFF;
}

#tablevessel th {
	border-left: 1px solid #FFF;
	border-bottom: 1px solid #FFF;
	color: #FFF;
	height: 40px;
	font-size: 1.2vw;
}

#tablevessel th:nth-child(4) {
	border-right: 1px solid #FFF;
}

#tablevessel tbody
{
	display: block;
	height: 518px;
	overflow-y: scroll;
}

#tablevessel tbody tr {
	height: 40px;
	display:table;
    width:100%;
    table-layout:fixed;
}

#tablevessel tbody td {
	border-left: 1px solid #FFF;
	border-bottom: 1px solid #FFF;
	font-size: 1vw;
}

#tablevessel tbody tr:first-child {
	border-top: 1px solid #FFF;	
}

#tablevessel tbody td:last-child {
	border-right: 1px solid #FFF;
}

#tablevessel tbody td:nth-child(1), #tablevessel tbody td:nth-child(2) {
	width: 39.9%;
}

#tablevessel thead {
	display:table;
	table-layout:fixed;
	width: calc( 100% - 14px );
}







#tableevi {
	border-spacing: 0px;
	border-bottom:  1px solid #FFF;
}

#tableevi th {
	border-left: 1px solid #FFF;
	border-right: 0px;
	border-bottom: 1px solid #FFF;
	color: #FFF;
	height: 40px;
	font-size: 1.2vw;
}

#tableevi tbody
{
	display: block;
	height: 388px;
	overflow-y: scroll;
}

#tableevi tbody tr {
	height: 40px;
	display:table;
    width:100%;
    table-layout:fixed;
}

#tableevi tbody td {
	border-left: 1px solid #FFF;
	border-right: 0px;
	border-bottom: none;/*1px solid #FFF;*/
	border-top: 1px solid #FFF;
	font-size: 1.2vw;
	width: 15%;
}

#tableevi tbody img {
	margin-top: 1vh;
	margin-bottom: 1vh;
	width: 18%;
}

#tableevi thead {
	display:table;
	table-layout:fixed;
	width: calc( 100% - 12px );
	border-bottom: none;
}

#evizoom:hover {
	cursor: pointer;
}
/*
#tableevi tr:nth-child(odd) td {
	background-color: #CCFFFF;
}

#tableevi tr:nth-child(even) td {
	background-color: #CC99FF;
}
*/

#engineselect {
	font-size: 1.2vw;
	border: 1px solid #6495ED;
	margin-top: 1vh;
	height: 5vh;
	line-height: 5vh;
	padding-left: 2vw;
	padding-right: 1vw;
	background-color: #E6E6FA;
}
 #engineselect>label {
 	margin-right: 1vw;
 }


#tableparam {
	border-spacing: 0px;
	border-bottom:  1px solid #FFF;
}

#tableparam th {
	border-left: 1px solid #FFF;
	border-right: 0px;
	border-bottom: 1px solid #FFF;
	color: #FFF;
	height: 40px;
	font-size: 1.2vw;
}

#tableparam tbody
{
	display: block;
	height: 521px;
	overflow-y: scroll;
}

#tableparam tbody tr {
	height: 40px;
	display:table;
    width:100%;
    table-layout:fixed;
}

#tableparam tbody td {
	border-left: 1px solid #FFF;
	border-right: 0px;
	border-bottom: 1px solid #FFF;
	font-size: 1vw;
}

#tableparam thead {
	display:table;
	table-layout:fixed;
	width: calc( 100% - 12px );
}

#tableparam tr:nth-child(odd) td {
	background-color: #CCFFFF;
}

#tableparam tr:nth-child(even) td {
	background-color: #CC99FF;
}

#tableparam img:hover {
	cursor: pointer;
}


.mobconfig {
	border-spacing: 0px;
	border-bottom:  1px solid #FFF;
}

.mobconfig th {
	border-left: 1px solid #FFF;
	border-right: 0px;
	border-bottom: 1px solid #FFF;
	color: #FFF;
	height: 50px;
	font-size: 1vw;
}

.mobconfig tbody
{
	display: block;
	height: 526px;
	overflow-y: scroll;
	color: #FFF;
}

.mobconfig tbody tr {
	height: 50px;
	display:table;
    width:100%;
    table-layout:fixed;
    border: none;
    text-align: center;
}

.mobconfig tbody td {
	border-left: 1px solid #FFF;
	border-right: 0px;
	border-bottom: 1px solid #FFF;
	border-top: none;
	font-size: 1vw;
}

.mobconfig thead {
	display:table;
	table-layout:fixed;
	width: calc( 100% - 12px );
}

.mobconfig img:hover {
	cursor: pointer;
}

.mobconfig th:last-child, td:last-child {
	border-right: 1px solid #FFF;
}

.mobconfig td input {
	width: calc( 100% - 50px );
	text-align: center;
	font-size: 1.0vW;
	height: 30px;
}

.mobconfig input[type=date] {
	width: calc(100%-50px);
	height: 30px;
	min-width: 80px;
}


.mobconfig select {
	width: 86%;
	background-color: white;
	border-radius: 4px;
	border: 1px solid #254061;
	font-size: 1.0vw;
	padding: 0;
	text-align: center;
	height: 36px;
}

#configME {
	background-color: #4863A0;
}

#configAE {
	background-color: #848482;
}

.radioconfigME
{
	font-size: 1vw;
	font-weight: bold;
	border-width: 1px;
	width: 62%;
	display: inline-flex;
	background-color: #4863A0;
	align-items: center;
	justify-content: space-around;
}

.radioconfigAE
{
	font-size: 1vw;
	font-weight: bold;
	border-width: 1px;
	width: 62%;
	display: inline-flex;
	background-color: #848482;
	align-items: center;
	justify-content: space-around;
}


.divmobconfig {
	width: 10%;
}

.divmobconfig input {
	width: 100%;
	margin-top: 2vh;
	font-size: 1vw; 
}



#maindata {
	border-spacing: 0px;
	border-bottom:  1px solid #FFF;
}

#maindata th {
	border-left: 1px solid #FFF;
	border-bottom: 1px solid #FFF;
	color: #FFF;
	height: 26px;
	font-size: 0.8em;
}

#maindata th:last-child {
	border-right: 1px solid #FFF;
}


#maindata td {
	width: 100px;
}


#saisiedata input{
	width: 80%;
	height: 18px;
	text-align: center;
	font-size: 1em;
}


#maindata tbody
{
	display: block;
	background: #FFFFCC;
	height: 184px;
	overflow-y: scroll;
}

#maindata tbody tr {
	height: 26px;
}

#maindata tbody td {
	border-left: 1px solid #11314F;
	border-bottom: 1px solid #11314F;
	font-size: 1em;	
}

#maindata tbody tr:first-child {
	border-top: 1px solid #11314F;	
}

#maindata tbody td:last-child {
	border-right: 1px solid #11314F;
}

#maindata tbody tr, tfoot, tfoot tr {
    display:table;
    width:100%;
    table-layout:fixed;
}

#maindata thead {
	display:table;
	table-layout:fixed;
	width: calc( 100% - 12px );
}

#maindata tfoot {
	width: calc( 100% - 12px );
}	

#maindata tfoot td {
	border: none;
	border-left: 1px solid #FFF;
	height: 30px;
}

#maindata tfoot td:last-child {
	border-right: 1px solid #FFF;
}


table#dataselect
{
	color: #FFF;
	font-size: 1.2vw;
	width: 100%;
	border-spacing: 0px;
	height: 300px;
	display: block;
}

table#dataselect tbody
{
	/*width: 100%;*/
	display: block;
	height: 548px;
	overflow-y: scroll;
	font-size: 1vw;
	border-bottom: 1px solid #FFF;
}

#dataselect tr
{
	width: 100%;
}

#dataselect td
{
    padding-right: 10px;
    padding-left: 10px;
    height: 40px;
    background: #11314F;
    width: 20%;
}

#dataselect tbody td:nth-child(1), tbody td:nth-child(2)
{
	width:30%;
}

#dataselect input[type=checkbox] {
	-ms-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-webkit-transform: scale(1.5);
	-o-transform: scale(1.5);
	transform: scale(1.5);
}







#dataselect1
{
	color: #FFF;
	border-spacing: 0px;
	border-bottom: 1px solid #FFF;
	height: 450px;
}

#dataselect1 thead
{
	font-size: 1vw;
	display: table;
	table-layout: fixed;
	width: calc( 100% - 14px );
	border-right: 1px solid #FFF;
}

#dataselect1 th
{
	border-left: 1px solid #FFF;
	border-right: 0px;
	border-bottom: 1px solid #FFF;
	width: 100%;
	height: 28px;
}

#dataselect1 th:nth-child(7) 
{
	width: 70px;
}


#dataselect1 th:last-child 
{
	width: 70px;
}


#dataselect1 tbody
{
	width: 100%;
	display: block;
	height: 480px;
	overflow-y: scroll;
	overflow-x: hidden;
	font-size: 1vw;
	border-bottom: 1px solid #FFF;
}

#dataselect1 tbody tr
{
	width: 100%;
	height: 48px;
}

#dataselect1 tbody td:nth-child(8), tbody td:nth-child(7), tbody td:nth-child(6)
{
	min-width: 51px;
}

#dataselect1 tbody td
{
	border-left: 1px solid #FFF;
	border-right: 0px;
	border-bottom: 1px solid #FFF;
    padding-right: 10px;
    padding-left: 10px;
    /*height: 28px;*/
    background: #11314F;
    width: 20%;
}

#dataselect1 tbody td:nth-child(1), tbody td:nth-child(2)
{
	width:30%;
}

#dataselect1 input[type=checkbox] {
	-ms-transform: scale(1.4);
	-moz-transform: scale(1.4);
	-webkit-transform: scale(1.4);
	-o-transform: scale(1.4);
	transform: scale(1.4);
}





#tableperf {
	border-spacing: 0px;
	border-bottom:  1px solid #FFF;
}

#tableperf th {
	border-left: 1px solid #FFF;
	border-bottom: 1px solid #FFF;
	color: #FFF;
	height: 40px;
	font-size: 1.2vw;
}

#tableperf th:last-child {
	border-right: 1px solid #FFF;
}


#tableperf td {
	width: 100px;
}


#tableperf tbody
{
	display: block;
	height: 522px;
	overflow-y: scroll;
}

#tableperf tbody tr {
	height: 40px;
	display:table;
    width:100%;
    table-layout:fixed;
}

#tableperf tbody td {
	border-left: 1px solid #FFF;
	border-bottom: 1px solid #FFF;
	font-size: 1vw;
	width: 80%;
}

#tableperf tbody tr:first-child {
	border-top: 1px solid #FFF;	
}

#tableperf tbody td:last-child {
	border-right: 1px solid #FFF;
}


#tableperf thead th {
	width: 80%;
}

#tableperf thead th:first-child {
	width: 40%;
}

#tableperf tbody td:first-child {
	width: 40%;
}

#tableperf thead {
	display:table;
	table-layout:fixed;
	width: calc( 100% - 12px );
}

#tableperf tr:nth-child(odd) td {
	background-color: #CCFFFF;
}

#tableperf tr:nth-child(even) td {
	background-color: #CC99FF;
}



#selectedyear {
	padding: 0px;
	border-radius: 0px;
	width: 61%;
	font-size: 1.2vw; 
	text-align: center;
}


#myChart_1 {
	width: 95%;
	height: auto;
}


.graph_1 label {
	font-size: 1.0vw;
	margin: auto;
}

.graph_1 p{
	font-size: 1.0vw;
	margin: auto;	
}

.graph_1 section {
	width: 50%;
}

.graph_1 select {
	text-align: center;
	/*text-align-last: center; */
	border-radius: 5px;
	font-weight: bold; 
	font-size: 1.0vw;
	width: 100%; 
	margin-top: 5px; 
	margin-bottom: 0px
}

.graph_1_div_period {
	border-left: solid 1px red; 
	border-right: solid 1px red; 
	margin: 10px;
} 




/***** Personnalisation input type 'file' *****/
.label-file {
    cursor: pointer;
    /*color: #00b1ca;*/
    font-weight: bold;

	text-align: center;
	margin: auto;
	font-family: 'dakota';
	color: #444;
	font-size: 1.2vw;
	font-weight: bold;
	border-radius: 10px;
	padding-top: 0.8vw;
	padding-bottom: 0.8vw;
	width: 20%;
	border: 1px solid #778A9D;
	box-shadow: -5px -5px 2px rgba(0, 0, 0, 0.5) inset, 5px 5px 2px
		rgba(255, 255, 255, 0.6) inset;
	position: relative;
	display: inline-block;
}

.label-file:hover {
  	cursor: pointer;
	box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5) inset, -5px -5px 2px
		rgba(255, 255, 255, 0.6) inset;
}

.input-file {
    display: none;
}


.radiocrewpage
{
	font-size: 1.0vw;
	border-width: 1px;
	border-color: lightgrey; 
	border-style: solid;
	border-radius: 2px;
	width: 62%;
	display: inline-flex;
	background-color: white;
	height: 1.8vw;
	align-items: center;
	justify-content: space-around;
}

.h5crewpage
{
	margin-top: 0px;
	margin-bottom: 16px;
}

.crewpage input[type=password], input[type=text] {
	margin: auto;
	font-size: 1.2vw;
	text-align: left;
	height: 1.6vw;	
}



#rect_ok {
	width: 60%;
	height: 20%;
	background-color: transparent; /*#C4FFC6;*/
}

#rect_1 {
	width: 60%;
	height: 20%;
	background-color: transparent; /*#FFD500;*/
}

#rect_notok {
	width: 60%;
	height: 20%;
	background-color: transparent; /*red;*/
}


.bar { width: 97%; border: 1px solid black; margin: auto; display: inline-flex; text-align: left;}

.percentage1 { background: #B0F2B6;}

.percentage2 { background: #FAA401; border-left: 1px solid black;}

.percentage3 { background: #EB0000; border-left: 1px solid black}


input:disabled{
	color: grey;
	opacity: 0.7;
}




/* --------------------- Style des boutons rectangulaires -------------------  */
section .wrapper {
	width: 24,8%;
	height: 100%;
	float: left;
	text-align: center;
	padding-top: 10vw;
}

.main_dashboard {
	min-height: 45vh;
	padding-bottom: 5vw;
}

.button0 {
	text-align: center;
	margin: 0;
	font-family: 'dakota';
	color: #444;
	font-size: 0.8vw;
	font-weight: bold;
	border-radius: 4px;
	padding-top: 0;
	padding-bottom: 0;
	/*width: 20%;*/
	border: 1px solid #778A9D;
	box-shadow: -5px -5px 2px rgba(0, 0, 0, 0.5) inset, 5px 5px 2px
		rgba(255, 255, 255, 0.6) inset;
	position: relative;
	display: inline-block;
}

.button0:hover {
	cursor: pointer;
	box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5) inset, -5px -5px 2px
		rgba(255, 255, 255, 0.6) inset;
}


.button1 {
	text-align: center;
	margin: auto;
	font-family: 'dakota';
	color: #444;
	font-size: 1.2vw;
	font-weight: bold;
	border-radius: 10px;
	padding-top: 0.8vw;
	padding-bottom: 0.8vw;
	width: 20%;
	border: 1px solid #778A9D;
	box-shadow: -5px -5px 2px rgba(0, 0, 0, 0.5) inset, 5px 5px 2px
		rgba(255, 255, 255, 0.6) inset;
	position: relative;
	display: inline-block;
}

.button1:hover {
	cursor: pointer;
	box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5) inset, -5px -5px 2px
		rgba(255, 255, 255, 0.6) inset;
}

.button2 {
	text-align: center;
	margin: auto;
	font-family: 'gothic';
	color: #444;
	font-size: 1.0vw;
	font-weight: bold;
	border-radius: 10px;
	padding-top: 0.8vw;
	padding-bottom: 0.8vw;
	width: 80px;
	border: 1px solid #778A9D;
	box-shadow: -5px -5px 2px rgba(0, 0, 0, 0.5) inset, 5px 5px 2px
		rgba(255, 255, 255, 0.6) inset;
	position: relative;
	display: inline-block;
}


.button3 {
	text-align: center;
	margin: auto;
	margin-bottom: 10px;
	font-family: 'dakota';
	color: #444;
	font-size: 1.4vw;
	font-weight: bold;
	border-radius: 10px;
	padding-top: 1.5vw;
	padding-bottom: 1.5vw;
	width: 20%;
	border: 1px solid #778A9D;
	box-shadow: -5px -5px 2px rgba(0, 0, 0, 0.5) inset, 5px 5px 2px
		rgba(255, 255, 255, 0.6) inset;
	position: relative;
	display: inline-block;
	background-color: lightgrey;
}

.button3:hover {
	cursor: pointer;
	background-color: silver;
	box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5) inset, -5px -5px 2px
		rgba(255, 255, 255, 0.6) inset;
}

.button3  img {
	position: absolute;
	left: 4%;
	top: 15%;
}


.button4 {
	text-align: center;
	margin: auto;
	margin-top: 5px;
	font-family: 'dakota';
	color: #444;
	font-size: 1vw;
	font-weight: bold;
	border-radius: 10px;
	padding-top: 0.5vw;
	padding-bottom: 0.5vw;
	border: 1px solid #778A9D;
	box-shadow: -5px -5px 2px rgba(0, 0, 0, 0.5) inset, 5px 5px 2px
		rgba(255, 255, 255, 0.6) inset;
	position: relative;
	display: inline-block;
	background-color: #74D0F1;
	width: 100%;
}

.button4:hover {
	cursor: pointer;
	background-color: #58ACFA;
	box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5) inset, -5px -5px 2px
		rgba(255, 255, 255, 0.6) inset;
}


.button5 {
	vertical-align: middle;
	margin: auto;
	display: inline-block;
	font-family: 'dakota';
	font-size: 1.8vw;
	color: #444;
	width: 12%;
	height: 35%;
	border-radius: 20%;
	border: 1px solid #254061;
	background-color: lightgrey;
	text-align: center;
	box-shadow: -5px -5px 2px rgba(0, 0, 0, 0.5) inset, 5px 5px 2px
		rgba(255, 255, 255, 0.6) inset;
	line-height: 2.5vw;
	margin-left: 5vw;
	float: none;
	padding: 1.5vw;	
}

.button5:hover {
	cursor: pointer;
	background-color: silver;
	box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5) inset, -5px -5px 2px
		rgba(255, 255, 255, 0.6) inset;
}

.button6 {
	text-align: center;
	margin: auto;
	margin-left: 15%;
	font-family: 'gothic';
	color: #444;
	font-size: 1.0vw;
	font-weight: bold;
	border-radius: 10px;
	padding-top: 0.8vw;
	padding-bottom: 0.8vw;
	width: 12vw;
	border: 1px solid #778A9D;
	box-shadow: -5px -5px 2px rgba(0, 0, 0, 0.5) inset, 5px 5px 2px
		rgba(255, 255, 255, 0.6) inset;
	position: relative;
	display: inline-block;
	background-color: #74D0F1;
}

.button7 {
	text-align: center;
	margin-left: 4%;
	width: 12%;
	font-family: 'gothic';
	color: #FFF;
	background-color: #79018F;
	font-size: 1.0vw;
	font-weight: bold;
	border-radius: 10px;
	padding-top: 0.8vw;
	padding-bottom: 0.8vw;
	border: 1px solid #778A9D;
	box-shadow: -5px -5px 2px rgba(0, 0, 0, 0.5) inset, 5px 5px 2px
		rgba(255, 255, 255, 0.6) inset;
	position: relative;
	display: inline-block;
}

.button7:hover {
	cursor: pointer;
}

.button_main {
	text-align: center;
	font-family: 'dakota';
	color: #444;
	font-size: 1.6vw;
	font-weight: bold;
	background-color: lightgrey;
	border-radius: 10px;
	padding-top: 1vw;
	padding-bottom: 1vw;
	padding-right: 2vw;
	padding-left: 2vw;
	/*width: 100%;*/
	border: 1px solid #778A9D;
	box-shadow: -5px -5px 2px rgba(0, 0, 0, 0.5) inset, 5px 5px 2px
		rgba(255, 255, 255, 0.6) inset;
	/*position: relative;*/
	display: inline-flex;
	margin: 10px;
}

.button_main:hover {
	cursor: pointer;
	box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5) inset, -5px -5px 2px
		rgba(255, 255, 255, 0.6) inset;
}

.button_mainYellow {
	text-align: center;
	font-family: 'dakota';
	color: #444;
	font-size: 1.6vw;
	font-weight: bold;
	background-color: yellow;
	border-radius: 10px;
	padding-top: 1vw;
	padding-bottom: 1vw;
	padding-right: 2vw;
	padding-left: 2vw;
	/*width: 100%;*/
	border: 1px solid #778A9D;
	box-shadow: -5px -5px 2px rgba(0, 0, 0, 0.5) inset, 5px 5px 2px
		rgba(255, 255, 255, 0.6) inset;
	/*position: relative;*/
	display: inline-flex;
	margin: 10px;
	width: 30%;
}

.button_mainYellow:hover {
	cursor: pointer;
	box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5) inset, -5px -5px 2px
		rgba(255, 255, 255, 0.6) inset;
}

.button_small1 {
	margin: auto;
	margin-top: 2vh;
	font-family: 'gothic';
	font-size: 1vw;
	font-weight: bold;
	padding: 0.5vw;
	width: 50%;
	background-color: lightgrey;
	border-radius: 2px;
	border: 1px solid #778A9D;
	box-shadow: -5px -5px 2px rgba(0, 0, 0, 0.5) inset, 5px 5px 2px
		rgba(255, 255, 255, 0.6) inset;
}

.button_small1:hover {
	cursor: pointer;
	box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5) inset, -5px -5px 2px
		rgba(255, 255, 255, 0.6) inset;
}


.button_small {
	text-align: center;
	margin: auto;
	font-family: 'gothic';
	color: #444;
	font-size: 0.8em;
	padding: 5px 10px;
	font-weight: bold;
	background-color: yellow;
	border-radius: 2px;
	width: 82%;
	border: 1px solid #778A9D;
	box-shadow: -5px -5px 2px rgba(0, 0, 0, 0.5) inset, 5px 5px 2px
		rgba(255, 255, 255, 0.6) inset;
	display: block;
}


.button_blue {
	background-color: #A5C0DC;
	width: 86%;
}

.button {
	text-align: center;
	margin: auto;
	font-family: 'dakota';
	color: #444;
	font-size: 1.2vw;
	font-weight: bold;
	border-radius: 10px;
	padding-top: .6vw;
	padding-bottom: .6vw;
	width: 20%;
	border: 1px solid #778A9D;
	box-shadow: -5px -5px 2px rgba(0, 0, 0, 0.5) inset, 5px 5px 2px
		rgba(255, 255, 255, 0.6) inset;
	position: relative;
	display: inline-block;
}

.button:hover {
	cursor: pointer;
	box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5) inset, -5px -5px 2px
		rgba(255, 255, 255, 0.6) inset;
}
/*
.button a {
	text-decoration: none;
	color: #444;
}
*/
/*-------------------------  Style du texte     ------------------------------*/
section .wrapper p {
	width: 65%;
	text-align: center;
	margin: auto;
	margin-top: 4vw;
	font-size: 1.5vw;
}

.personal {
	color: red;
}

/* --------------------- Style du footer -------------------  */
footer {
	clear: both;
	position: relative;
	margin-top: -4vw;
	bottom: 0;
	border-top: solid 2px #09229F;
	-webkit-box-shadow: inset 0 5px 6px -5px rgba(0, 0, 0, 0.6);
	-moz-box-shadow: inset 0 5px 6px -5px rgba(0, 0, 0, 0.6);
	box-shadow: inset 0 5px 6px -5px rgba(0, 0, 0, 0.6);
	height: 15%;
	min-height: 125px;
	width: 100%;
	vertical-align: middle;
	text-align: center;
}

footer .button {
	display: inline-block;
	width: 60%;
	margin-right: 3%;
	margin-top: 3vw;
	margin-top: 30px;
}

footer .button_blue {
	width: 21%;
	background-color: #A5C0DC;
}

/*
* Section interne
*/
section {
	text-align: center; 
	padding-bottom: 10vw;
}

section p {
	font-size: 2vw;
	width: 70%;
	margin: auto;
	margin-top: 4vw;
}

/*-------------------------- STYLE DES BOUTONS PARTI MESSAGE ONE TO ONE--------*/
section[class=center] {
	min-height: 45vh;
	padding-bottom: 5vw;
	text-align: center;
}

.button_center a {
	color: #444;
	text-decoration: none;
}

.main_button8weeks {
	text-align: center;
	margin: auto;
	font-family: 'dakota';
	font-size: 2.6vw;
	font-weight: bold;
	background-color: #EBEBEB;
	border-radius: 15px;
	padding-top: 1.5vw;
	padding-bottom: 1.5vw;
	width: 25%;
	border: 1px solid #778A9D;
	box-shadow: -8px -8px 3px rgba(0, 0, 0, 0.5) inset, 10px 10px 4px
		rgba(255, 255, 255, 0.6) inset;
	margin-top: 2.5vw;
}

.main_buttonsub_left {
	float: left;
	margin: auto;
	font-family: 'dakota';
	font-size: 2.6vw;
	font-weight: bold;
	background-color: #EBEBEB;
	border-radius: 15px;
	padding-top: 1.5vw;
	padding-bottom: 1.5vw;
	width: 35%;
	border: 1px solid #778A9D;
	box-shadow: -8px -8px 3px rgba(0, 0, 0, 0.5) inset, 10px 10px 4px
		rgba(255, 255, 255, 0.6) inset;
	margin-top: 2.5vw;
	margin: auto;
}

.main_buttonsub_right {
	float: right;
	margin: auto;
	font-family: 'dakota';
	font-size: 2.6vw;
	font-weight: bold;
	background-color: #EBEBEB;
	border-radius: 15px;
	padding-top: 1.5vw;
	padding-bottom: 1.5vw;
	width: 35%;
	border: 1px solid #778A9D;
	box-shadow: -8px -8px 3px rgba(0, 0, 0, 0.5) inset, 10px 10px 4px
		rgba(255, 255, 255, 0.6) inset;
	margin-top: 2.5vw;
	margin: auto;
}

.main_buttonsub_right:hover {
	cursor: pointer;
	box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5) inset, -5px -5px 2px
		rgba(255, 255, 255, 0.6) inset;
}

.main_buttonsub_left:hover {
	cursor: pointer;
	box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5) inset, -5px -5px 2px
		rgba(255, 255, 255, 0.6) inset;
}

.main_button8weeks:hover {
	cursor: pointer;
	box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5) inset, -5px -5px 2px
		rgba(255, 255, 255, 0.6) inset;
}

.main_button8weeks a {
	color: #444;
	text-decoration: none;
}

.main_button8weeks .huit {
	font-family: 'goth';
	font-size: 3.5vw
}

.main_button8weeks .redLetter {
	font-size: 3.5vw
}

.main_button8weeks .redLetter_gothic {
	font-size: 3.5vw
}

/*----------------------création de messages -------------------*/
.list_message {
	border: none;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}

.list_message th, .list_message td {
	border: 2px white solid;
	height: 50px
}

table.list_message tr:nth-child(odd) td {
	background-color: #EDF1F6;
}

table.list_message tr:nth-child(even) td {
	background-color: #D9E0ED;
}

.list_message th {
	background-color: #6095C9;
	text-align: center;
	color: #fff;
}

.formBlockMessage {
	text-align: center;
	margin-bottom: 2vw;
	overflow: hidden;
	vertical-align: center;
	display: inline-block;
	text-align: left;
	width: 70%;
	font-size: 1vw;
	margin-left: auto;
	margin-right: auto;
}

.formBlockMessage h5, .comment h5 {
	text-align: center;
	font-size: 1.5vw;
}

.formBlockMessage input {
	font-size: 1.1vw;
	display: block;
	text-align: left;
	width: 100%;
	border-radius: 10%;
	line-height: 25px;
	padding-bottom: 15px;
	display: block;
}

.formBlockMessage textarea {
	font-size: 1.1vw;
	resize: none;
	min-height: 250px;
	min-width: 180px
}

.formBlockMessage button {
	margin-left: 20px;
}
.writeMsg.formBlockMessage {
	width: 100%;
}
.formHistory {
	width: 100%;
	text-align: center;
}

.formHistory>div {
	display: inline-block;
}

.formHistory>div>span {
	width: 15%;
}

.formHistory h5, .comment h5 {
	text-align: center;
	font-size: 1.5vw;
}

.formSelectReport {
	margin-bottom: 2vw;
	overflow: hidden;
	vertical-align: center;
	display: inline-block;
	text-align: left;
	width: 70%;
	font-size: 1.2vw;
	margin-left: auto;
	margin-right: auto;
}

.formSelectReport h5, .comment h5 {
	margin-bottom: 1vw;
	text-align: left;
	font-size: 1.5vw;
}

.formSelectReport input {
	margin-top: 0.5vw;
	margin-bottom: 0.5vw;
	display: block;
	text-align: left;
	font-family: 'gothic';
}

.formSelectReport input[type="date"] {
	cursor: pointer;
}

.formSelectReport>select {
	margin-top: 0.5vw;
	margin-bottom: 0.5vw;
	display: block;
	text-align: left;
	width: 50%;
	height: 20px;
	border-radius: 0%;
	line-height: normal;
	padding-left: 1px;
	font-family: 'gothic';
}

/*------------------------table message---------------------------*/
.edit_message {
	width: 70%;
	margin-left: auto;
	margin-right: auto;
}

.edit_message th, .list_message td {
	border: 2px white solid;
	height: 50px
}

table.edit_message tr:nth-child(odd) td {
	background-color: #EDF1F6;
}

table.edit_message tr:nth-child(even) td {
	background-color: #D9E0ED;
}

.edit_message th {
	background-color: #6095C9;
	text-align: left;
	color: #fff;
}

.button_message {
	text-align: center;
	margin: auto;
	font-family: 'dakota';
	color: #444;
	font-size: 1.6vw;
	font-weight: bold;
	background-color: #EBEBEB;
	border-radius: 10px;
	padding-top: 0.7vw;
	padding-bottom: 0.7vw;
	padding-left: 0.7vw;
	padding-right: 0.7vw;
	width: 82%;
	border: 1px solid #778A9D;
	box-shadow: -5px -5px 2px rgba(0, 0, 0, 0.5) inset, 5px 5px 2px
		rgba(255, 255, 255, 0.6) inset;
}

.button_message_chat {
	background-color: yellow;
}

.button_message_sentfiles {
	background-color: #DFFEE0;
}

.button_message_receivedfiles {
	background-color: #A5C0DC;
}

.chat_message {
	display: inline-block;
}

/*-------------------------- Style du button ME--------*/
.button_purple {
	font-family: 'dakota';
	font-size: 1.5vw;
	text-align: center;
	color: black;
	/* 	display: inline-block; */
	background-color: #87739D;
	padding-top: 2.5vw;
	padding-bottom: 2.5vw;
	padding-left: 2.2vw;
	padding-right: 2.5vw;
	border-radius: 10px;
	box-shadow: -5px -5px 2px rgba(0, 0, 0, 0.5) inset, 5px 5px 2px
		rgba(255, 255, 255, 0.6) inset;
	font-weight: bold;
}

.button_purple a {
	text-decoration: none;
}

.button_purple:hover {
	cursor: pointer;
	box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5) inset, -5px -5px 2px
		rgba(255, 255, 255, 0.6) inset;
}

.button_green {
	text-align: center;
	margin-top: 10vw;
	margin-left: 0.7vw;
	font-family: 'dakota';
	color: #444;
	font-size: 1.6vw;
	font-weight: bold;
	border-radius: 10px;
	padding-top: 0.9vw;
	padding-bottom: 0.7vw;
	padding-left: 1vw;
	padding-right: 1.8vw;
	width: 82%;
	border: 1px solid #778A9D;
	box-shadow: -5px -5px 2px rgba(0, 0, 0, 0.5) inset, 5px 5px 2px
		rgba(255, 255, 255, 0.6) inset;
	padding-bottom: 1.2vw;
	background-color: #DFFEE0;
	padding: 1.5vw;
}

/* -------------- Style spécifique au bouton de cette page ------------------- */
.top_button {
	text-align: center;
	margin: auto;
}

.button_step {
	text-align: center;
	width: auto;
	display: inline-block;
	font-family: 'gothic';
	line-height: 0.3vw;
	margin: 2vw;
	padding-left: 1.2vw;
	padding-right: 1.2vw;
}

.button_step a {
	text-decoration: none;
	color: #444;
}

.button_off p {
	color: #999;
}

.button_off .redLetter {
	color: pink;
}


.boutonJaune{	
  position: absolute;
  top: 40px;
  left: 80%;
  border-radius: 50%;
  width: 1.6vw;
  height: 1.6vw;
  background-color: red;
  border: 1px solid #5b92C7;
  text-align: center;
  vertical-align: middle;
  box-shadow: 1px 1px 4px black;
  font-family: gothic;
  font-size: 1.4vw; 
}

.boutonJaune p {
  padding: auto;
  margin: -0.1vw;
 }


/* -------------- Style du formulaire ------------------- */
.formulaire>div {
	/*display: block;*/
	text-align: left;
	padding-right: 1vw;
}

.formulaire label {
	font-size: 1.2vw;
	font-weight: bold;
}

.formulaire input[type=text], input[type=password], input[type=email] {
	height: 1.8vw;
	font-size: 1.0vw;
	width: 94%;
	text-align: center;
	margin: auto;
}

#imagediv {
	border: 1px solid white;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	background-color: black;
	height: 100%
}


.divAction {
	margin-left: 0.7vw;
}

textarea {
	width: 100%;
	height: 200px;
	margin: 0;
	border: 1px solid #ccc;
	padding: 5px;
	vertical-align: middle;
	font-family: inherit;
	font-size: 0.9em;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: inset 0 0 6px #ccc;
	-webkit-box-shadow: inset 0 1px 6px #ccc;
	box-shadow: inset 0 1px 6px #ccc;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

td {
	border: 1px solid white;
}






.buttonold {
	text-align: center;
	margin-left: 0.7vw;
	font-family: 'dakota';
	color: #444;
	font-size: 1.6vw;
	font-weight: bold;
	background-color: #EBEBEB;
	border-radius: 10px;
	padding-top: 0.9vw;
	padding-bottom: 1.2vw;
	padding-left: 1vw;
	padding-right: 1.8vw;
	border: 1px solid #778A9D;
	box-shadow: -5px -5px 2px rgba(0, 0, 0, 0.5) inset, 5px 5px 2px
		rgba(255, 255, 255, 0.6) inset;
	border: 1px solid #778A9D;
	width: 82%;
	padding-right: 1.8vw;
	padding-left: 1vw;
}

.buttonLongLabel {
	text-align: center;
	margin-left: 0.5vw;
	font-family: 'dakota';
	color: #444;
	font-size: 1vw;
	font-weight: bold;
	background-color: #EBEBEB;
	border-radius: 10px;
	padding-top: 0.9vw;
	padding-bottom: 0.6vw;
	padding-left: 0.4vw;
	padding-right: 1vw;
	width: 100%;
	border: 1px solid #778A9D;
	box-shadow: -5px -5px 2px rgba(0, 0, 0, 0.5) inset, 5px 5px 2px
		rgba(255, 255, 255, 0.6) inset;
}

.button_history {
	width : 25%;
	display : inline-block;
}


.history {
	width: 100%;
	padding-right: 2.7vw;
}

.formVertical>.smallLabel {
	width: 25%;
	padding: 0.2vw;
}

.formVertical>.H5History {
	margin-top: 1vw;
	margin-bottom: 1vw;
	text-align: left;
	font-size: 1.5vw;
	margin-left: 20px;
}

.formVertical>.H5Evidence {
	margin-top: 1vw;
	margin-bottom: 1vw;
	margin-left: 0vw;
	text-align: center;
	font-size: 1.5vw;
}

.evidence {
	font-size: 1vw;
}

.formVertical>.longLabel {
	width: 50%;
	padding: 0.2vw;
}

.outputHistory {
	display: inline-block;
	background-color: #E6F7F7;
	text-align: center;
	min-width: 40%;
	min-height: 1.05vw;
	border-radius: 10%;
	border: 1px solid #778A9D;
	padding-left: 0.2vw;
	padding-right: 0.2vw;
	padding-bottom: 0.2vw;
	padding-top: 0.1vw;
	margin-top: 0.3vw;
}

.outputFactoHistory {
	min-width: 15%;
}

.titleMeasure {
	font-size: 2vw;
	text-align: left;
	padding-top: 0vw;
}

.button_reset {
	background-color: #E35757;
	font-family: 'gothic';
	padding-top: 1.2vw;
	padding-bottom: 1.2vw;
	padding-left: 2.2vw;
	padding-right: 2.5vw;
	margin-left: 0.3vw;
}

#table_action {
	margin-top: 50px;
	width: 90%;
	text-align: center;
}

#table_previous_measures {
	width: 90%;
	text-align: center;
}

#table_one {
	table-layout: fixed;
	width: 100%;
	margin-top: 1vw;
	text-align: center;
}

/*grid*/
.grid {
	max-width: 1220px;
	margin: 0 auto;
	padding: 0 2em;
}

.grid.flex {
	width: 100%;
	max-width: 100%;
	padding: 0 2%;
	padding: 2em;
}

.row {
	display: block;
	overflow: hidden;
	clear: both;
}

*[class*="col_"].alpha {
	margin-left: 0;
}

*[class*="col_"].omega {
	margin-right: 0;
}

.col_1 {
	width: 6.6666666666667%;
}

.col_2 {
	width: 15%;
}

.col_3 {
	width: 23.333333333333%;
}

.col_3_1 {
	width: 28.333333333333%;
}

.col_4 {
	width: 31.666666666667%;
}

.col_5 {
	width: 40%;
}

.col_6 {
	width: 48.333333333333%;
}

.col_7 {
	width: 56.666666666667%;
}

.col_8 {
	width: 65%;
}

.col_9 {
	width: 73.333333333333%;
}

.col_10 {
	width: 81.666666666667%;
}

.col_11 {
	width: 90%;
}

.col_12 {
	width: 98.333333333333%;
}

*[class*="col_"] {
	margin-left: 0.83333333333333%;
	margin-right: 0.83333333333333%;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	float: left;
	display: block;
}

.grid img {
	max-width: 100%;
	height: auto;
}

.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0
}

.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0
}

* html .clearfix, *:first-child+html .clearfix {
	zoom: 1
}

/* Viewable Grids 
	To view your grids, add the class .visible to any grid container.
	This will add a background color so you can see the layout of your grids. 
*/
*[class*="col_"].visible {
	background: #eee;
	border: 1px dotted #ccc;
}

/*---------------------------------
	Responsive Grid Media Queries - 1280, 1024, 768, 480
	1280-1024 	- desktop (default grid)
	1024-768 	- tablet landscape
	768-480 	- tablet 
	480-less 	- phone landscape & smaller
-----------------------------------*/
@media all and (min-width: 1024px) and (max-width: 1280px) {
	.grid *[class*="col_"] {
		
	}
	.grid {
		max-width: 1024px;
	}
	.show-desktop {
		display: block;
	}
	.hide-desktop {
		display: none;
	}
	.show-tablet {
		display: none;
	}
	.hide-tablet {
		display: block;
	}
	.show-phone {
		display: none;
	}
	.hide-phone {
		display: block;
	}
}

@media all and (min-width: 768px) and (max-width: 1024px) {
	.grid *[class*="col_"] {
		
	}
	.grid {
		max-width: 768px;
	}
	.show-desktop {
		display: none;
	}
	.hide-desktop {
		display: block;
	}
	.show-tablet {
		display: block;
	}
	.hide-tablet {
		display: none;
	}
	.show-phone {
		display: none;
	}
	.hide-phone {
		display: block;
	}
}

@media all and (min-width: 480px) and (max-width: 768px) {
	.grid *[class*="col_"] {
		float: none;
		width: auto;
		clear: both;
		display: block;
	}

	/* columns inside of columns */
	.grid *[class*="col_"] [class*="col_"] {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
	}
	.grid {
		max-width: 480px;
	}
	.show-desktop {
		display: none;
	}
	.hide-desktop {
		display: block;
	}
	.show-tablet {
		display: block;
	}
	.hide-tablet {
		display: none;
	}
	.show-phone {
		display: none;
	}
	.hide-phone {
		display: block;
	}
}

#everyone {
    display: inline-block;
    width: 20%;
}

@media all and (max-width: 480px) {
	.grid *[class*="col_"] {
		float: none;
		width: auto;
		clear: both;
		display: block;
	}

	/* columns inside of columns */
	.grid *[class*="col_"] [class*="col_"] {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
	}
	.grid {
		max-width: 100%; /*320*/
	}
	.show-desktop {
		display: none;
	}
	.hide-desktop {
		display: block;
	}
	.show-tablet {
		display: none;
	}
	.hide-tablet {
		display: block;
	}
	.show-phone {
		display: block;
	}
	.hide-phone {
		display: none;
	}
}

table#table_previous_measures tr:nth-child(odd) td {
	background-color: #CCFFFF;
}

table#table_previous_measures tr:nth-child(even) td {
	background-color: #CC99FF;
}

table#table_action tr:nth-child(odd) td {
	background-color: #CCFFFF;
}

table#table_action tr:nth-child(even) td {
	background-color: #CC99FF;
}

select {
	height: 30px;
	border-radius: 10%;
	line-height: 25px;
	padding-left: 20px;
	font-family: 'gothic';
}

.marge {
	padding: 20px;
}

/*----------------------Les class en plus a mettre en dessous des class de base -------------------*/
.wrapperButtonTwelve {
	width: 15%;
	display: inline-block;
}

.buttonTwelve {
	font-family: 'gothic';
	padding: 1vw;
	margin: 20px;
}

.wrapperChart {
	background-color: white;
	height: 40vw;
	width: 60%;
	display: inline-block;
	vertical-align: middle;
	margin-left: 20px;
	margin-top: 30px;
}

/*---------------------- pagination ----------------------*/
.pagination {
	text-align: center;
	display: block;
	margin-left: 27px;
	padding: 0;
	padding-top: 10px;
	display: block;
}

.pagination li {
	color: #666;
	display: inline;
	font-size: 1vw;
	padding: 7px 16px 7px 19px;
	/* 	position: relative; */
	text-decoration: none;
	border: 1px solid #d9d9d9;
	border-right-width: 0px;
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.45, rgb(241
		, 241, 241)), color-stop(0.73, rgb(245, 245, 245)));
	background-image: -moz-linear-gradient(center bottom, rgb(241, 241, 241)
		45%, rgb(245, 245, 245) 73%);
	/* For Internet Explorer 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f1f1f1,
		endColorstr=#f5f5f5);
	/* For Internet Explorer 8 */
	-ms-filter:
		"progid:DXImageTransform.Microsoft.gradient(startColorstr=#f1f1f1, endColorstr=#f5f5f5)";
}
 

.pagination li a, .pagination li a:link, .pagination li a:visited {
	color: #666;
	display: inline;
	font-size: 1vw;
	padding: 7px 16px 7px 19px;
	position: relative;
	border: 1px solid #d9d9d9;
	border-right-width: 0px;
}

.pagination li a span, .pagination li a:link span, .pagination li a:visited span
	{
	text-decoration: underline;
}

/*---------------------- breadcrumbs----------------------*/
.crumbs {
	display: block;
	margin-left: 27px;
	padding: 0;
	padding-top: 10px;
}

.crumbs li {
	display: inline;
	color: #666;
	font-size: 1vw;
	/* 	padding: 7px 16px 7px 19px; */
	position: relative;
	text-decoration: none;
}

.crumbs li a, .crumbs li a:link, .crumbs li a:visited {
	color: #666;
	display: inline;
	font-size: 1vw;
	padding: 7px 16px 7px 19px;
	position: relative;
	text-decoration: none;
	border: 1px solid #d9d9d9;
}

.crumbs li a {
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.45, rgb(241
		, 241, 241)), color-stop(0.73, rgb(245, 245, 245)));
	background-image: -moz-linear-gradient(center bottom, rgb(241, 241, 241)
		45%, rgb(245, 245, 245) 73%);
	/* For Internet Explorer 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f1f1f1,
		endColorstr=#f5f5f5);
	/* For Internet Explorer 8 */
	-ms-filter:
		"progid:DXImageTransform.Microsoft.gradient(startColorstr=#f1f1f1, endColorstr=#f5f5f5)";
}

.crumbs li.first a {
	border-top-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-webkit-border-top-left-radius: 5px;
}

.crumbs li.last a {
	border-right-width: 1px;
	border-bottom-right-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
}

/*---------------------- POP-UP-------------------*/
#dialogConfirm {
	background: #E6F7F7;
	margin: 30px auto 0;
	position: fixed;
	top: 50%;
	left: 50%;
	width: 20vw;
	height: 12vw;
	margin-left: -15vw;
	margin-top: -10vw;
	border: 1px solid #000;
}

#dialogConfirm p {
	font-size: 1.0vw;
	font-weight: bold;
	text-align: center;
	margin: 0.7vw;
}

#dialogImage {
	background: #E6F7F7;
	margin: 30px auto 0;
	position: fixed;
	top: 50%;
	left: 50%;
	width: 25vw;
	height: 20vw;
	margin-left: -15vw;
	margin-top: -10vw;
	border: 1px solid #000;
}

#dialogImage p {
	font-size: 1.5vw;
	font-weight: bold;
	margin: 0.7vw;
	text-align: center;
}

#dialogUpdateTime {
	text-align: center;
	background: #E6F7F7;
	margin: 30px auto 0;
	position: fixed;
	top: 50%;
	left: 50%;
	width: 25vw;
	height: 10vw;
	margin-left: -15vw;
	margin-top: -10vw;
	border: 1px solid #000;
}

#dialogUpdateTime p {
	font-size: 1.5vw;
	font-weight: bold;
	margin: 0.7vw;
	text-align: center;
}



.button_send {
	background-color: yellow;
	font-size: 0.8vw;
	font-weight: bold;
	font-family: 'dakota';
	text-align: center;
	width: 82%;
	border-radius: 10px;
	border: 1px solid #778A9D;
	box-shadow: -5px -5px 2px rgba(0, 0, 0, 0.5) inset, 5px 5px 2px
		rgba(255, 255, 255, 0.6) inset;
	padding-top: 0.9vw;
	padding-bottom: 0.7vw;
	padding-left: 1vw;
	padding-right: 1.8vw;
	padding-bottom: 1.2vw;
	margin-left: 0.7vw;
	text-align: center;
}

.popup-header {
	max-height: 2vw;
	width: 100%;
	background: #479BF5;
	text-align: center;
	display: inline;
	margin: 0vw;
	width: 100%;
}

.button_cancel {
	background-color: #A5C0DC;
	color: black;
	font-size: 0.8vw;
	font-weight: bold;
	font-family: 'dakota';
	text-align: center;
	width: 82%;
	border-radius: 10px;
	border: 1px solid #778A9D;
	box-shadow: -5px -5px 2px rgba(0, 0, 0, 0.5) inset, 5px 5px 2px
		rgba(255, 255, 255, 0.6) inset;
	padding-bottom: 1.2vw;
	padding-top: 0.9vw;
	padding-bottom: 0.7vw;
	padding-left: 1.0vw;
	padding-right: 1.0vw;
	padding-bottom: 1.2vw;
	margin-top: 1vw;
	margin-left: 0.7vw;
	text-align: center;
}

.centrage_button {
	width: 55%;
	display: inline-block;
	vertical-align: middle;
	margin: auto;
}

.button_confirm {
	background-color: yellow;
	font-size: 0.8vw;
	font-weight: bold;
	font-family: 'dakota';
	text-align: center;
	width: 82%;
	border-radius: 10px;
	border: 1px solid #778A9D;
	box-shadow: -5px -5px 2px rgba(0, 0, 0, 0.5) inset, 5px 5px 2px
		rgba(255, 255, 255, 0.6) inset;
	padding-bottom: 1.2vw;
	padding-top: 0.9vw;
	padding-bottom: 0.7vw;
	padding-left: 1vw;
	padding-right: 1.8vw;
	padding-bottom: 1.2vw;
	margin-top: 1vw;
	margin-left: 0.7vw;
	text-align: center;
}

.closeButton {
	background-color: #A5C0DC;
}

.iconWarning{
	width: 25px;
}

#environment, #mechanical{
	cursor: pointer;
}






.title1 {
	text-align: center;
	font-family: 'dakota';
	color: red;
	font-size: 3vw;
	font-weight: bold;
	margin-top: 0.5vw;
	padding-left: 3%;
	padding-right: 3%;
}

.title1 span:nth-of-type(2) {
	font-family: 'gothic';
	color: #254061;
}

.fleetboard {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	justify-content: space-around;
	width: 100%;
	height: 65%;
}

.title_buttons {
	display: inline-flex;
	justify-content: space-around;
	width: 100%;
}



.ship0 {
	height: 80%;
	width:30%;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}


.main_button25 {
	text-align: center;
	margin: auto;
	font-family: 'dakota';
	font-size: 1.6vw;
	font-weight: bold;
	background-color: #EBEBEB;
	border-radius: 10px;
	padding-top: 1vw;
	padding-bottom: 1vw;
	width: 25%;
	border: 1px solid #778A9D;
	box-shadow: -8px -8px 3px rgba(0, 0, 0, 0.5) inset, 10px 10px 4px
		rgba(255, 255, 255, 0.6) inset;
	margin-top: 0.5vw;
}

.main_button25:hover {
	cursor: pointer;
	box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5) inset, -5px -5px 2px
		rgba(255, 255, 255, 0.6) inset;
}

.main_button25 a {
	color: #444;
	text-decoration: none;
}

.main_button100 {
	text-align: center;
	margin: auto;
	font-family: 'dakota';
	font-size: 1.6vw;
	font-weight: bold;
	background-color: #EBEBEB;
	border-radius: 10px;
	padding-top: 1vw;
	padding-bottom: 1vw;
	width: 100%;
	border: 1px solid #778A9D;
	box-shadow: -8px -8px 3px rgba(0, 0, 0, 0.5) inset, 10px 10px 4px
		rgba(255, 255, 255, 0.6) inset;
	margin-top: 0.5vw;
	color: #444;
}

.main_button100:hover {
	cursor: pointer;
	box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5) inset, -5px -5px 2px
		rgba(255, 255, 255, 0.6) inset;
}

.main_button100 a {
	color: #444;
	text-decoration: none;
}

.accesMOB_MOL {
	font-size: 1vw;
	font-weight: bold;
	margin-right: .5vw;
}

.accesMOB_MOL input[type=checkbox] {
	-ms-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-webkit-transform: scale(1.5);
	-o-transform: scale(1.5);
	transform: scale(1.5);
}

.buttonMOLMOB {
	width: 85%;
	height: 30vh;
	padding-top: auto; 
	padding-bottom: auto; 
	box-shadow: -8px -8px 3px rgba(0, 0, 0, 0.5) inset, 10px 10px 4px 
		rgba(255, 255, 255, 0.6) inset;
	background-color: #EBEBEB;
	border: 1px solid #778A9D;
	border-radius: 15px; 

}

.buttonMOLMOB:hover {
	cursor: pointer;
	box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5) inset, -5px -5px 2px
		rgba(255, 255, 255, 0.6) inset;
}

.divbuttonMOLMOB {
	width: 50%;
	display: inline-block;
	text-align: center;
	padding-top: 5vh;
	padding-bottom: 5vh;
}

.companyprofil input[type=password], input[type=text] {
	margin: auto;
	/*font-size: 1.2vw;*/
	width: 60%;
	text-align: center;
	height: 2.0vw;	
}

#engines {
	display: inline-flex;
	justify-content: space-around;
}

#engines div {
	text-align: center;
	font-size: 1.5vw;
	font-weight: bold;
	font-family: 'dakota';
}

#engines span {
	display: block;
	margin: 20px;
}

#engines input {
	padding-top: 3vh;
	padding-bottom: 3vh;
}

.subtitle {
 	font-size: 2vw; 
 	font-weight: bold; 
 	font-family: 'dakota'; 
 	text-align: center;
 }

 .enginesec1 {
  	 display: inline-block;
  	 padding-top: 5vh;
  	 padding-bottom: 5vh;
 	 align-items: center;
 	 justify-content: center;
 	 width: 100%;
 }

 .enginesec1 label {
 	font-weight: bold;
 	font-size: 1.5vw;
 	margin-left: 5%;
 	margin-right: 1%;
 	width: 20%;
 }

 .enginesec1 input {
 	font-size: 1.5vw;
 	text-align: center;
 	border: 1px solid grey;
 	opacity: 1;
 	width: 10%;
 	border-radius: 5px;
 	margin-right: 5%;
 }

 .enginesec1 input:disabled {
 	background-color: white;
 	color: black;
 	width: 20%;
 }

.enginediv {
 	width: 98.333333333333%;
 	margin: auto;
 	display: inline-flex;
 	justify-content: center;
 	text-align: center;
}

.enginediv div {
	width: 5%;
}


.campaignsec0 {
	width:25%;
	padding-bottom: 0.5vh;
}

.campaignsec0 input[type=text] {
	margin-bottom: 1vh;
	border: 1px solid grey;
 	opacity: 1;
 	border-radius: 5px;
	width: 80%;
}

.campaignsec0 input[type=text]:disabled {
	background-color: white;
 	color: black;
}

.campaignsec0 label {
	font-size: 1.2vw;
	font-weight: bold;
	margin-right: 0.6vw;
}

.campaignsec0 input[type=radio] {
	-ms-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
    margin-left: 0.6vw;
}

.campaignsec0 p {
	font-weight: bold;
	font-size: 1.2vw;
	margin: auto;
	margin-top: 0.5vh;
	margin-bottom: 0.5vh;

}

.campaignsec0 textarea {
	max-width: 80%;
	min-width: 80%;
	max-height: 20vh;
	margin-bottom: 1.2vh;
}

#campaign0buttons input[type=button] {
	width: 27%;
	margin-top: 3vh;
	margin-right: 0.5vw;
	margin-left: 0.5vw;
}

.campaignsec1 {
	width: 75%;
	padding-bottom: 1vh;
	padding-top: 5vh;
	display: none;
}

.campaignsec1 img {
	width: 15%;
	margin-left: 15%;
	margin-right: 1%
}

.campaignsec1 span {
	font-size: 2vw;
	margin-right: 15%;
}

.campaignsec1 div {
	display: flex;
	justify-content: center;
	align-items: center;
}


.campaignsec2 {
	width: 75%;
	padding-bottom: 1vh;
	padding-top: 5vh;
}

.campaignsec2 img {
	width: 12%;
	margin-left: 15%;
	margin-right: 1%
}

.campaignsec2 span {
	font-size: 2vw;
	margin-right: 15%;
}

.campaignsec2 div {
	display: flex;
	justify-content: center;
	align-items: center;
}


.campaignsec3 {
	width: 75%;
	padding-bottom: 1vh;
	display: none;
}

.campaignsec3 form {
	width: 100%;
	display: flex;
}


.enginesec2 {
	display: block;
	width: 27%;
	font-weight: bold;
	padding: 2vh;
}

.enginesec2 p {
	margin-top: 0;
	margin-bottom: 2vh;
}

.enginesec2 input[type=button] {
	width: 80%;
	padding: 2vh;
}



.campaignsec3 div:first-child {
	width: 55%;
}


.campaignsec3 div:last-child {
	width: 45%;
}

.campaignsec3 textarea {
	min-width: 80%;
	max-width: 80%;
	font-size: 1vw;
	margin: 0;
	margin-top: 4px;
	border: 2px solid #FFF;
	min-height: 10vh;
	max-height: 40vh;
}

.campaignsec3 table {
	margin: auto;
	width: 100%;
}

.campaignsec3 p {
	margin: auto;
	padding: 0;
	padding-top: 1vh;
	padding-bottom: 1vh;
	width: 80%;
	border: 2px solid #FFF;
	font-size: 1.2vw;
	font-weight: bold;
	background-color: blue;
	color: #FFF;
}


#tabcampsec3 th, #tabcampsec3 td {
	border: 2px solid #FFF;
	font-size: 1.2vw;
	padding: 0;
}


#tabcampsec3 th {
	background-color: blue;
	color: #FFF;
	font-size: 1.2vw;
	padding: 0;
	padding-top: 1vh;
	padding-bottom: 1vh;
}

#tabcampsec3 td {
	padding-top: 0.8vh;
	padding-bottom: 0.8vh;
	font-weight: bold;
	font-size: 1.0vw;
}

#tabcampsec3 input[type="checkbox"] {
    -ms-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
}

#divadjust {
	width: 80%; 
	margin: auto; 
	height: 62vh; 
	overflow-y: auto;
}

.campaignsec4 {
	display: none;
	width: 75%;
	padding: 0;
	/*border: 1px solid #FFF;*/
	height: 62vh;
	max-height: 62vh;
}

.campaignsec4 input[type=text] {
	margin-bottom: 1vh;
	border: 1px solid grey;
 	opacity: 1;
 	border-radius: 5px;
}


.campaignsec4 input[type=text]:disabled {
 	color: black;
 	background-color: white;
}


.campaignsec4 div {
	margin: auto;
	padding: auto;
}

.campaignheader {
	display: flex;
	justify-content: center;
	border: 1px solid #FFF;
	background-color: #11314F;
	padding: 1vh;
	font-size: 1.2vw;
	font-weight: bold;
	color: #FFF;
	align-items: center;
	margin: 0;
	height:9%;
}

.campaignheader img {
	display: none;
	width: 7%;
	vertical-align: middle;
}

.campaignheader div {
	margin: 0;
}

.campaignheader div:first-child {
	text-align: right;
	width: 25%;
}

.campaignheader div:nth-child(2) {
	width: 40%;
	text-align: left;
	padding-left: 1vw;
}

.campaignheaderdiv:last-child {
	text-align: left;
	width: 25%;
}

.campaignheader div:first-child>input {
	width: 17%;
}

.campaignheader div:last-child>input {
	width: 30%;
}

#campaignbody {
	display: inline-flex;
	width: 100%;
}

.vcampaign1 {
	width: 30%;
	border: 1px solid #FFF;
	max-height: 62vh;
}

.vcampaign1 p {
	font-size: 1.2vw;
	font-weight: bold;
	margin: auto;
	padding-top: 1vh;
	padding-bottom: 1vh;
}

.vcampaign1>div {
	overflow-y: scroll;
	background-color: lightgrey;
	font-size: 1.2vw;
	max-height: 62vh;
}

.vcampaign1 input {
	width: 28%;
}

.vcampline {
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding: auto;
}

.vcampline label {
	display: flex;
	margin: auto 0;
	margin-left: 1vw;
	margin-bottom: 1.8vh;
}

.vcampline input {
	display: flex;
	margin-bottom: 0;
	margin-right: 1vw;
}

.vcampline select {
	margin-bottom: 0;
	margin-right: 1vw;
	width: 29%;
	background-color: #FFF;
	border-style: groove;
	border-radius: 5px;
	height: 2vw;
	padding: 0;
	font-size: 1vw;
	font-weight: bold;
	text-align: center;
}

.vcampline input[type="radio"] {
    margin: auto 0;
    margin-right: 0.3vw;
    margin-bottom: 0.8vh;
    width: 5%;
	-ms-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -webkit-transform: scale(1.3);
    -o-transform: scale(1.3);
    transform: scale(1.3);
}

.imgplusright {
	width: 8%;
	float: right;
	margin-right: 1.2vw;
	margin-top: 0.6vh;
}

.imgplusright:hover {
	cursor: pointer;
}

.separationline {
	margin: auto;
	width: 94%;
	border-bottom: 1px solid #FFF;
	border-top: 1px solid #FFF;
	margin-top: 0.6vh;
	height: 3px;
}

.separationline1 {
	margin: auto;
	width: 80%;
	border-bottom: 1px solid #FFF;
	margin-top: 0.6vh;
}

.separationline2 {
	color: #FFF;
	margin: 1vh;
}

.vcampaign2 {
	width: 70%;
	border: 1px solid #FFF;
	height: 62vh;
	max-height: 62vh;

}

.vcampaign2 table {
	width: 100%;
	max-height: 62vh;
}

.vcampaign2 th {
	border: 1px solid #FFF;
	background-color: blue;
	color: #FFF;
	word-wrap: normal;
	height: 50px;
	max-height: 50px;
}

.vcampaign2 tr {
	height: 20px;
}

.vcampaign2 input {
	font-size: 1vw;
	margin: auto;
	/*height: 30px;*/
}

.vcampaign2 thead {
	display: block;
	overflow-y: scroll;
	font-size: 1vw;
}

.vcampaign2 tbody {
	display: block;
	overflow-y: scroll;
	max-height: calc(62vh - 62px);
}

.vcampaign2 p {
	font-size: 1.2vw;
	font-weight: bold;
	margin-top: 0;
}

#filetable {
	margin: auto;
	width: 90%;
	border: 1px solid grey;
	background-color: #FFF;
	margin-bottom: 3vh;
}

#filetable tr {
	height: 3vh;
	text-align: left;
}

#filetable td:first-child {
	font-size: 1vw;
	width: 92%;
}

.comparisonsec0 {
	width: 48%;
	padding: 0;
	margin-left: 1%;
}

.comparisonsec1 {
	width: 48%;
	margin-right: 1%;
	padding: 0;
}

.compsecheader {
	display: flex;
	justify-content: space-around;
	border: 1px solid #FFF;
	background-color: #11314F;
	padding-top: 1vh;
	padding-bottom: 1vh;
	font-size: 1vw;
	font-weight: bold;
	color: #FFF;
	align-items: center;
	margin: 0;
	height:5vh;
}

.compsecheader select {
	padding-left: 0.3vw;
	padding-right: 0.3vw;
	font-weight: bold;
	font-size: 1vw;
	height: 2vw;
	text-align: center;
}

.compsecheader img {
	width: 8%;
	float: right;
}

.compsecheader div {
	width: 22%;
}

.compsecheader div:nth-child(2) {
	width: 50%;
}

.compsecheader div:nth-child(2)>select {
	width: 40%;
	border-radius: 5px;
}

.compsecheader input:disabled {
	border: 1px solid grey;
 	opacity: 1;
 	border-radius: 5px;
	width: 30%;
	background-color: #FFF;
	color: #000;
	height: 1.8vw;
	font-size: 1vw;
}

.vdatadivmain {
	display: flex;
	border: 1px solid #FFF;
	border-top: none;
	height: 62vh;
	max-height: 62vh;
	margin: 0;
}

.vdatadiv0 {
	width: 20%;
	overflow-y: scroll;
	background-color: lightgrey;
	border-right: 1px solid #FFF;
	font-size: 1vw;
	max-height: 62vh;
	margin: 0;
}

.vdatadiv0 p {
	font-size: 0.8vw;
	font-weight: bold;
	margin: auto;
	text-align: center;
	padding-top: 0.5vh;
	padding-bottom: 0.2vh;
}

.vdatadiv0 label {
	font-size: 0.8vw;
	margin: auto;
}

.vdatadiv0 input:disabled {
	border: 1px solid grey;
 	opacity: 1;
 	border-radius: 5px;
	width: 80%;
	background-color: #FFF;
	color: #000;
	height: 1.2vw;
	font-size: 0.8vw;
}

.vdatadiv0 input:last-child {
	margin-bottom: 0.5vh;
}

.vdatadiv0 span {
	font-size: 0.8vw;
}

.vdatadiv1 {
	width: 80%;
	overflow-y: scroll;
	max-height: 62vh;
}

.vdatadiv1 table {
	width: 100%;
	font-size: 0.8vw;
}

.vdatadiv1 th {
	border: 1px solid #FFF;
	background-color: blue;
	color: #FFF;
	font-size: 0.8vw;
}

.vdatadiv1 td {
	width: 15%;
	border: 1px solid #FFF;
	padding-top: 0.5vh;
	padding-bottom: 0.5vh;
	background-color: silver;
}

.vdatadiv1 td:first-child {
	width: 10%;
}

.vdatadiv1 p {
	margin: 0;
	padding: 0;
	font-size: 0.8vw;
	width: 100%;
}

.divtable0 {
	min-width: 45%;
	max-width: 45%;
	text-align: center;
}

.divtable0 textarea {
	min-width: 100%;
	max-width: 100%;
	min-height: 15vh;
	max-height: 30vh;
	border: 1px solid #FFF;
	margin-top: 2px;
	opacity: 1;
	color: black;
}

.divtable0 p {
	border: 1px solid #FFF;
	background-color: blue;
	color: #FFF;
	font-size: 0.8vw;
	font-weight: bold;
	padding: 0.1vh;
	margin-top: 2px;
	width: 98.8%;
}

.tbodytab0 td:first-child {
	width: 20%;
}

.tbodytab0 td:nth-child(2), .tbodytab0 td:last-child {
	width: 40%;
}

.tbodytab0 img {
   	width:20%;
}

.divtargetresult {
	display: flex;
	justify-content: space-around;
	margin-top: 0.8vh;
}

.divtargetresult table {
	width: 40%;
}

#tablefile0 {
	width: 60%;
	margin: auto;
	margin-top: 0.8vh;
	margin-bottom: 1.6vh;
}

#tablefile0 tr {
	height: 3vh;
	text-align: left;
}

#tablefile0 td {
	padding-right: 0.3vw;
	padding-left: 0.3vw;
	background-color: #FFF;
}

#tablefile0 img {
	width: 5%;
	float: right;
}

#tablefile1 {
	width: 60%;
	margin: auto;
	margin-top: 0.8vh;
	margin-bottom: 1.6vh;
}

#tablefile1 tr {
	height: 3vh;
	text-align: left;
}

#tablefile1 td {
	padding-right: 0.3vw;
	padding-left: 0.3vw;
	background-color: #FFF;
}

#tablefile1 img {
	width: 5%;
	float: right;
}

#comment0 {
	min-width: 60%;
	max-width: 60%;
	min-height: 15vh;
	max-height: 30vh;
	border: 1px solid #FFF;
	margin-top: 0.8vh;
	opacity: 1;
	color: black;
}

#comment1 {
	min-width: 60%;
	max-width: 60%;
	min-height: 15vh;
	max-height: 30vh;
	border: 1px solid #FFF;
	margin-top: 0.8vh;
	opacity: 1;
	color: black;
}

#divdata {
	display: flex;
	width: 70%;
}

#divdata input {
	margin-left: 5%;
}

#divdata div {
	display: flex;
	align-items: center;
	margin-left: 5%;
	font-size: 1vw;
	font-weight: bold;
}

#divdata select {
	font-size: 1vw;
	border-radius: 5px;
	padding: 0;
	padding-right:1%;
	height: 4.4vh;
	margin-left: 5%;
	text-align: center;	
}

#divselectdata {
	width: 55%;
}

#divselectfuel {
	width: 28%;
}

#fueltype {
	width: 50%;
}


#divdata input:nth-child(2), #divdata input:nth-child(3) {
	padding-left: 1vw;
	padding-right: 1vw;
}

#divdata input:nth-child(2), #divdata input:nth-child(3) {
	padding-left: 1vw;
	padding-right: 1vw;
}

#divdata input:nth-child(3):hover {
	cursor: pointer;
}

#div0modifmeasure {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	width: 80%;
}

#div0modifmeasure span {
	font-size: 1.2vw;
	font-weight: bold;
}

#div0modifmeasure select {
	width: 50%;
	border-radius: 5px;
	padding: 2px;
	font-size: 1vw;
	margin: 0;
	margin-left: 1%;
	height: 4vh;
	text-align: center;
}

#div0modifmeasure div {
	display: inline-flex;
	justify-content: flex-end;
	width: 38%;
	align-items: center;
	margin-left: 5%;
}

#div0modifmeasure input {
	margin: 0;
	margin-left: 5%;
}

#div1modifmeasure {
	display: flex;
	justify-content: space-around;
	width: 100%;
}

#div1modifmeasure div {
	width: 50%;
	margin: 0;
	text-align: center;
}

#div1modifmeasure div>div {
	width: 100%;
	border: 1px solid #FFF;
	background-color: #79018F;
	text-align: center;
	font-size: 1.2vw;
	font-weight: bold;
	color: #FFF;
	margin-top: 2px;
	padding-top: 1vh;
	padding-bottom: 1vh;
}

#div1modifmeasure textarea {
	min-width: 100%;
	max-width: 100%;
	font-size: 1vw;
	margin: 0;
	margin-top: 4px;
	border: 2px solid #FFF;
	min-height: 10vh;
	max-height: 40vh;
}


#div1modifmeasure input[type=checkbox] {
	-ms-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -webkit-transform: scale(1.3);
    -o-transform: scale(1.3);
    transform: scale(1.3);
    margin-top: 1vh;
    margin-bottom: 1vh;
}

#div1modifmeasure table {
	width: 20%;

	background-color: silver;
	margin-bottom: 4px;
} 

#div1modifmeasure thead {
	overflow-y: hidden;
}

#div1modifmeasure tbody{
	overflow-y: hidden;
	width: 100%;
	display: table;
}

#div1modifmeasure tr {
	height: 3.5vh;
}

#div1modifmeasure th {
	background-color: #79018F;
}

#div1modifmeasure th, #div1modifmeasure td {
	width: 35%;
	font-size: 0.8vw;
}

#div1modifmeasure th:first-child, #div1modifmeasure td:first-child {
	width: 30%;
}

#tabledataref {
	width: 100%;
	border-spacing: 0;
}

#tabledataref thead {
	color: #FFF;
	border: 1px solid #FFF;
	background-color: #11314F;
 
}

#tabledataref th {
	border: 1px solid #FFF;
	padding-top: 5px;
	padding-bottom: 5px;
}
 
#tabledataref td {
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
}

#tabledataref td {
	background-color: silver;
}

#tabledataref td:first-child {
	background-color: #11314F;
	color: #FFF;
}

#tabledataref td:nth-child(2) {
	font-weight: bold;
	background-color: #A1A8AE;
}

#tabledata {
	width: 100%;
	border-spacing: 0;
}

#tabledata thead {
	color: #FFF;
	border: 1px solid #FFF;
	background-color: #11314F;
 
}
#tabledata th {
	border: 1px solid #FFF;
	padding-top: 5px;
	padding-bottom: 5px;	
}

#tabledata td {
	width: 6.67%;
	padding-top: 5px;
	padding-bottom: 5px;	
	text-align: center;
	background-color: #A9BCF5;
}

#tabledata td:nth-child(4), #tabledata td:nth-child(5), #tabledata td:nth-child(6),
#tabledata td:nth-child(10), #tabledata td:nth-child(11), #tabledata td:nth-child(12) {
	background-color: silver;
}

#tabledata td:nth-child(4), #tabledata td:nth-child(10) {
	font-weight: bold;
	background-color: #A1A8AE;
}

#tabledata td:nth-child(1), #tabledata td:nth-child(7), #tabledata td:nth-child(13) {
	font-weight: bold;
	background-color: #81B7E9;
}

.tabledataload {
	text-align: right;
}

.tabledataloadmeas {
	text-align: left;
	padding-left: 5px;
}

#imgdatarefleft {
	float: left;
	width: 6%;
	margin-left: 4%;
}

#imgdatarefright {
	float: right;
	width: 6%;
	margin-right: 4%;
}

#imgdatarefleft:hover, #imgdatarefright:hover {
	cursor: pointer;
}

#imgdatameasleft {
	float: left;
	width: 1.22%;
	margin-left: 0.8%;
}

#imgdatameasright {
	float: right;
	width: 1.22%;
	margin-right: 0.8%;
}

#imgdatameasleft:hover, #imgdatameasright:hover {
	cursor: pointer;
}

#fleetpagetable th {
	font-size: 1vw;
	border-top: 1px solid #FFF;
}

#fleetpagetable th:nth-child(6) {
	border-right: 1px solid #FFF;
}


/********** Message graph_1 ************/
#modalContainer {
	background-color:rgba(0, 0, 0, 0.3);
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	z-index:10000;
	background-image:url(tp.png); /* required by MSIE to prevent actions on lower z-index elements */
}

#alertBox {
	position:relative;
	width:350px;
	min-height:100px;
	margin-top:100px;
	border:2px solid #188BD0;
	border-radius: 10px;
	background-color:#FFF;
	background-repeat:no-repeat;
	background-position:12px 68px;
	background-image: url('../images/info.png');
}

#modalContainer > #alertBox {
	position:fixed;
}

#alertBox h1 {
	margin:0px;
	/*font:bold 1.2em verdana,arial;*/
	font-family: dakota, verdana, sans-serif;
	font-size: 1.2em;
	background-color: #188BD0;
	color:#FFF;
	border-bottom:1px solid #000;
	border-radius: 10px 10px 0 0;
	padding:5px 0 5px 5px;
}

#alertBox p {
	font:1.2em gothic, verdana, arial;
	height:50px;
	padding-top: 18px;
	padding-left:6px;
	padding-right: 6px;
	margin-left:78px;
	text-align: center;
}

#alertBox #closeBtn {
	display:block;
	position:relative;
	margin:5px auto;
	padding:7px;
	border:1px solid #003399;
	width:70px;
	font-family: dakota, sans-serif;
	font-size: 1em;
	font-weight: bold;
	text-transform:uppercase;
	text-align:center;
	color:#FFF;
	background-color:#188BD0;
	border-radius: 3px;
	text-decoration:none;
}


#alertBox1 {
	position:relative;
	width:350px;
	min-height:100px;
	margin-top:100px;
	border:2px solid #F9B40E;
	border-radius: 10px;
	background-color:#FFF;
	background-repeat:no-repeat;
	background-position:12px 56px;
	background-image: url('../images/warning_64.png');
}

#modalContainer > #alertBox1 {
	position:fixed;
}

#alertBox1 h1 {
	margin:0px;
	/*font:bold 1.2em verdana,arial;*/
	font-family: dakota, verdana, sans-serif;
	font-size: 1.2em;
	background-color: #F9B40E;
	color:#FFF;
	border-bottom:1px solid #000;
	border-radius: 10px 10px 0 0;
	padding:5px 0 5px 5px;
}

#alertBox1 p {
	font:1.2em gothic, verdana, arial;
	height:50px;
	padding-top: 18px;
	padding-left:6px;
	padding-right: 6px;
	margin-left:78px;
	text-align: center;
}

#alertBox1 #closeBtn {
	display:block;
	position:relative;
	margin:5px auto;
	padding:7px;
	border:1px solid #7D3F07;
	width:70px;
	/*font:0.7em verdana,arial;*/
	font-family: dakota, sans-serif;
	font-size: 1em;
	font-weight: bold;
	text-transform:uppercase;
	text-align:center;
	color:#FFF;
	background-color: #F9B40E; /*#74D0F1;*/
	border-radius: 3px;
	text-decoration:none;
}

#msgbtnok {
	border-radius: 7px;
	width: 70px;
	margin-right: 7px;
	margin-bottom: 10px;
}

#msgbtnok:hover {
	cursor: pointer;
	background: silver;
}
/********** Message graph_1 (fin) ************/



#evichart {
	background-color: #EFF2FB;
	border: 1px solid grey;
	max-width: 60%;
	margin-right: 6%;
	margin-left: 6%;
}

.imgEvi {
	width: 4%;
	margin-left: 0.5%;
	margin-right: 0.5%;
}

.imgEvi:hover {
	cursor: pointer;
}


#legende {
	text-align: center; 
	font-size: 0.8vw; 
	font-weight: bold;
	visibility: hidden;
}

#legende>span {
	border: 1px solid grey; 
	padding-top: 5px; 
	padding-bottom: 5px; 
	padding-left: 20px; 
	padding-right: 20px; 
	background-color: #EFF2FB;
	display: inline-flex; 
	align-items: center;
}

#legende img {
	width: 1vw;
}


#carvariables {
	display: flex;
	justify-content: center;
}

#carvariables>div {
	width:570px;
	border: 2px solid blue;
	padding: 10px;
	background-color: silver;
}

#carvariables>div div {
	display: inline-flex;
}

#carvariables input {
	width: 15%;
}
#carvariables p {
	width: 500px;
	font-size: 1.2em;
}

#carvariables>div>p {
	font-weight: bold;
	font-size: 1.4em;
	margin: 0px;
}

#carvariables>div div:last-child {
	width: 100%;
	justify-content: center;
	margin-top: 10px;
}

#mobshiplegenddiv {
	width: 18%;
	margin-left: 8vw
}

.mobshiplegend {
	background-color: #EFF2FB;
	border-spacing: 0;
	margin-bottom: 1vw;
	width: 100%;
	font-size: 1vw;
}

.mobshiplegend img {
	width: 8%;
}

.mobshiplegend td {
	border: 1px solid grey;
	padding-top: 2px;
	padding-bottom: 2px;
}

.mobshiplegend tr td {
	width: 50%;
}

.mobshiplegend tr:first-child td {
	background-color: #EFF2FB;
	padding-top: 5px;
}


#mobevishipslegend {
	background-color: #EFF2FB;
	border-spacing: 0;
	width: 50%;
	font-size: 0.8vw;
}

#mobevishipslegend tr td {
	border: 1px solid grey;
	width: 15%;
	padding-top: 4px;
	padding-bottom: 4px;
}

#mobevishipslegend tr td:first-child {
	width: 25%;
}

#mobevishipslegend img {
	margin-top: 2px;
	margin-bottom: -2px;
	width: 10%;

}