/*\_/ \_/ \_/ \_/ \_/ \_///         IsoData CSS 1.0 		\\\_/ \_/ \_/ \_/ \_/ \_/ \_/*\
\_/						\\\     Style for the SCREEN        ///							\_/
/																  						  \
\			COLORS                                                 		            	  /
/			BLUE :		#0092cf	-	R0 G147 B208 	- l:#b2dff1 -	d:#0065af 			  \
\			GREEN :		#8cc63f	-	R140 G198 B63 	- l:#d1e8b2 -	d:#46ab46 			  /
/			ORANGE :	#fbb034	-	R252 G176 B52 	- l:#fedfae -	d:#ff8800 			  \
\																						  /
/																						  \
\_											 Strasbourg - 18-03-2021				     _/
/ \_   _   _   _   _   _   _   _   _   _   _   _   _   _   _   _   _   _   _   _   _   _/ \
\_/ \_/ \_/ \_/ \_/ \_/ \_/ \_/ \_/ \_/ \_/ \_/ \_/ \_/ \_/ \_/ \_/ \_/ \_/ \_/ \_/ \_/ \_/ 

  
/* GLOBAL */
*, *::after,*::before {margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;font-size: 100%;vertical-align: baseline}
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{min-height:10vh;background-color:#f0f0f0;color:#555;font-family:Arial,Helvetica, sans-serif,Verdana;font-size:0.8rem;-webkit-font-smoothing: antialiased;font-variant: no-common-ligatures tabular-nums}
ol, ul  {list-style: none;} blockquote, q {quotes: none;} blockquote:before, blockquote:after, q:before, q:after {content: '';	content: none;} :focus{outline: 0;}
ins {text-decoration: none;} del{text-decoration: line-through;} table {border-collapse: collapse;border-spacing: 0;}
label {display: inline-block;margin:0.3rem 0;}

/* Flex Layout */
/* Page layout in column, full screen width */
.site-container{width:100%;display: flex; flex-flow: column nowrap; justify-content:space-between;	 align-items:stretch;}

.wrapper-h {display: flex; flex-flow: row wrap;  align-items:stretch; align-content:space-around;}
.wrapper-v {display: flex; flex-flow: column nowrap;justify-content: flex-start;align-items:center; align-content:space-around;}
.wrapper-i { display:inline-block; vertical-align:top; height:100%;}

.card { padding: 10px; background-color: #ffffff; min-width: 600px;}
.card label{width:9rem}
.row { padding:10px; }

.spacebetween { justify-content: space-between; }

header {z-index: 200;position: fixed;top:0px;left:0px;width: 100%;height:43px;align-items: top;padding-top:5px;
/* box-shadow: 0 0 11px 0 rgba(0,0,0,.15),0 0 40px 0 rgba(32,35,38,.2); */
	background-color:#2A2A35;transition: height .25s cubic-bezier(.64,.05,.5,1);}
header img {height:35px; margin-left: 2rem;transition: height 0.25s cubic-bezier(.64,.05,.5,1);}
header h3 {z-index:-1; position:absolute;top:0px; display:none; transition: top .25s cubic-bezier(.64,.05,.5,1);}

/* header:hover{height:80px}  */
/* header:hover img {height:70px} */
/* header:hover h3{top:40px; left:350px; padding:0px; position:absolute; width: 600px; color:#fff; display:inline-block;} */
/* .navigation{align-self:flex-start;width:100%;} */

#title{flex: 1 100%; margin-left: 1rem; margin-bottom:0px;}
main{padding-top:60px;padding-bottom:50px;}
.main-content {display: flex; flex-flow: row wrap; min-height: 100%; overflow: auto; justify-content:center; }

footer{flex: 1 100%; margin-top:15px; text-align:center;color:#FFF !important;background-color:#2A2A35; position:fixed;bottom:0;width:100%; z-index:100;}
footer div{height:35px;padding:5px;}

canvas{border: 1px solid #ddd;}

/* 12 Columns Display */
.col-1{width:8.33%}.col-2{width:16.66%}.col-3{width:25%}.col-4{width:33.33%}.col-5{width:41.66%}.col-6{width:50%}
.col-7{width:58.33%}.col-8{width:66.66%}.col-9{width:75%}.col-10{width:83.33%}.col-11{width:91.66%}.col-12{width:100%}

/* Width */
.col-24px { min-width:24px!important; }
.col-40px { min-width:40px!important; }
.col-70px { min-width:70px!important; }
.col-100px  { min-width:100px!important; }
.col-110px  { min-width:110px!important; }
.col-125px  { min-width:125px!important; }
.col-200px  { min-width:200px!important; }
.col-250px  { min-width:250px!important; }
.col-300px  { min-width:300px!important; }
.col-400px  { min-width:400px!important; }
.col-600px  { min-width:600px!important; }

.col-r{margin-left:auto; margin-right: 0;}

.line-h36px {height:36px!important;line-height:24px;}

/* BLOCK ALIGN */
.al-r{display:block; position:absolute; right:0px}  /* Right */
.al-l{display:block; position:absolute; left:0px}   /* Left */
.al-mh{display:block; position:absolute; left:50%;-webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%);}   /* Center */
.al-t{display:block; position:absolute; top:0px}   /* Top */
.al-b{display:block; position:absolute; bottom:0px}   /* Bottom */
.al-mv{display:block; position:absolute;top: 50%;-webkit-transform: translate(0%, -50%); transform: translate(0%, -50%);}   /* Middle */
.al-c{display:block; position:absolute; left:50%; top: 50%;-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}   /* Middle */
/* FLEX ALIGN */
.flex-start{justify-content: flex-start!important; align-content: flex-start!important}
.flex-end{justify-content: flex-end!important; align-content: flex-end!important;}
.flex-around{justify-content: space-around!important; align-content: space-around!important}
/* TEXT ALIGN */
.tal-center{width:100%; text-align:center}
.tal-l{width:100%; text-align:left}
.tal-r{width:100%; text-align:right}

/* BORDER */
.border-b{border-bottom:1px solid;margin-bottom:10px; padding-bottom:10px}
.border-r{border-right:1px solid;margin-right:10px; padding-right:10px}
.border-l{border-left:1px solid;margin-left:10px; padding-left:10px}
.border-t{border-top:1px solid;margin-top:10px; padding-top:10px}
.border-a{border:1px solid;margin:10px; padding:10px}

.pd-t{padding-top:10px;}

/* TABLE AREA */
.table-area {text-align:center;padding:15px;border-radius: 20px;background-color:#FFF;border:1px solid transparent;min-height: 40px;-webkit-transition: background-color 1s, border-color 1s, border-width 0.2s, margin 0.2s; -moz-transition: background-color 1s, border-color 1s, border-width 0.2s, margin 0.2s; -o-transition: background-color 1s, border-color 1s, border-width 0.2s, margin 0.2s;transition: background-color 1s, border-color 1s, border-width 0.2s, margin 0.2s;}

/* REPORT AREA */
.report-area{padding-left:10px}
.report-area input{border: 1px solid; min-width:14rem; max-width:15rem; height:1.4rem;cursor: default; margin-right:10px;}
.report-area select{border: 1px solid; min-width:14rem; max-width:14rem; height:1.4rem;cursor: default;}
.report-area label{padding-right:0.5rem;color:#707078;}



/* GENERIC BUTTON */
.button{display:inline-block; background-color: #f0f0f0; border: 1px solid #cccccc; border-radius: 3px; width: auto; min-width: 140px;min-height: 32px; margin-right: 5px; margin-bottom: 5px; padding:5px; text-align:center;-webkit-transition: all .15s;-moz-transition: all .15s;cursor:pointer; vertical-align:middle;}
/* button {transition: all .3s;background-color: #ff0000!important; border: 1px solid #000000;border-radius: 6px; */
    /* text-decoration: none !important;display: inline-block;font-size: .8rem;padding: 8px 16px;margin: 0 8px 8px 0; */
    /* cursor: pointer;-webkit-user-select: none;-moz-user-select: none;user-select: none;} */
.button:hover{color:#FFF!important;background-color:#3FC2BC!important}
.button img {width:24px; height:24px; vertical-align: middle;}
.button a { display:block; }

/* CROSS BUTTON */
.bn_cross {width: 20px;height: 20px;margin: 2px;border-radius: 30% 30%;}
.bn_cross::before {background: #888;position: absolute;display: block;content: '';width: 70%;height: 10%;top: 47%;left: 15%;transform: rotate(45deg);}
.bn_cross::after {background: #888;position: absolute;display: block;content: '';width: 10%;height: 70%;left: 47%;top: 15%;transform: rotate(45deg);}
.bn_cross:hover {box-shadow: inset 0 0 5px 1px #444;-webkit-transition: all .5s;-moz-transition: all .5s;cursor:pointer;}
.bn_cross:hover::before {background: #fff;box-shadow: 0px 0px 8px -1px #555;}
.bn_cross:hover::after {background: #fff;box-shadow: 0px 0px 8px -1px #555;}

/* Popup */
.bn_title {position: absolute; top: 0px; left: 0px; height:28px; width:100%; padding:4px; font-size:16px;}
.bn_popup {display:inline-block; margin-right:5px;}

/* Responsive for screen smaller than... */
body{width:100%; }

/* o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o */
/* TITLES */
h1, h2, h3, h4, h5, h6 { font-family: inherit; }
h1 {font-size: 2rem;font-variant: small-caps}
h2 {font-size: 1.7rem;margin: 0;text-transform: capitalize;}
h3 {font-size:1.4rem; margin-bottom:3px;text-transform: capitalize}
h4 {font-size:1.2rem;text-transform: capitalize;}
h5, h6 {display: inline}
h5 {font-size:1rem}
h6 {font-weight: bold}

/* o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o */
.hide{display:none}
[hidden],template {display:none}
.noselect {-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}

a, a:hover, a:focus { text-decoration: none; -webkit-transition: all 50ms ease-in; -moz-transition: all 50ms ease-in; -o-transition: all 50ms ease-in; transition: all 50ms ease-in; }
a:link { color: black; }
a:visited { color: black; }

.link a { margin-left: 4px; margin-right: 4px; color:#FFF}
.link a:hover { text-decoration: underline; color:#FFF}

select { height: 24px; font-size: inherit; font-family: inherit; border: 1px solid #bbb; border-radius:2px; padding: 2px 2px 2px 2px; background-color:#fff }
textarea { width:100%; font-size: inherit; font-family: inherit; margin-bottom: 5px; border: 1px solid #bbb; border-radius:2px; padding: 2px 6px 2px 6px;resize: none;}
option { -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size: inherit; font-family: inherit; }

input {	border: 1px solid #bbb; border-radius:2px; padding: 2px 6px 2px 6px; height: 24px; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size: inherit; font-family: inherit; }

input:not([type]) { border: 1px solid #bbb; line-height: 16px; padding: 2px 5px 2px 5px; }
input[type=tel] { border: 1px solid #bbb; line-height: 16px; padding: 2px 5px 2px 5px; }
input[type=email] { border: 1px solid #bbb; line-height: 16px; padding: 2px 5px 2px 5px; }
input[type=number] { border: 1px solid #bbb; line-height: 16px; padding: 2px 5px 2px 5px; width:80px; }
input[type=date] { border: 1px solid #bbb; line-height: 16px; padding: 2px 5px 2px 5px; width:155px; }
input[type=submit] { height: 36px; padding:5px 15px 5px 15px;  background:#eee; border: 1px solid #888888; cursor:pointer; border-radius: 5px; }
input[type=submit]:hover { background:#eee; }
input[type=radio] { -webkit-appearance: radio; vertical-align: sub; width:20px!important; }
input[type=file] { height:30px; border: 1px solid #bbb; background-color: #fff; border: 0px; }
input[type=checkbox] { border: 0px; line-height: 16px; padding: 0px; -webkit-appearance: checkbox; width: 20px; height: 20px; background: #fff; }
input[type=checkbox]:checked { background: #eee; border-color: #000000; }
input[type=checkbox]:after { content: " "; padding-left: 6px; }
input:not([readonly]):focus, textarea:not([readonly]):focus {border: 2px solid #666!important;}

input:read-only, textarea:read-only { color:#555555; background-color:#efefef !important; /*cursor: not-allowed;*/}
input:disabled, textarea:disabled { color:#555555; background-color:#efefef !important; /*cursor: not-allowed;*/}

button { height: 36px; padding:5px 15px 5px 15px;  background:#eee; border: 1px solid #888; cursor:pointer; border-radius: 2px; -webkit-user-select: none;-moz-user-select: none;user-select: none;}
button:hover { background:#efefef}; }

p { margin: 1px; }

table { border-width: 0px; border-spacing: 0px; border-padding: 0px; border-collapse: collapse; border-style: solid; color: #000000; text-decoration: none; padding: 0px; margin: 0px; }
tr, td { border-width: 0px; border-spacing: 0px; border-padding: 0px; padding: 0px; margin: 0px; }

img { color: #FFFFFF; border: 0px; }


.affDebugTime { border:1px solid #000000; padding:10px; margin: 0px; position:fixed; right:20px; bottom:30px; display: inline-block; font-size:10px;}

.checkbox { margin-left:10px!important; margin-right:0px!important; min-width:24px!important; width:24px!important; }


/* o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o */
/* **** Error message **** */
@-webkit-keyframes msgbox-std {
  0% {
    opacity: 1;
  }
  100% {
	opacity: 0;
	visibility: hidden;
	display: none;
  }
}
@keyframes msgbox-std {
  0% {
    opacity: 1;
  }
  100% {
	opacity: 0;
	visibility: hidden;
	display: none;
  }
}

.msgbox-std {
	border: 1px solid #000000;
	border-radius: 5px;
	padding-top: 10px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 10px;
	margin-bottom: 4px;
	-webkit-animation: msgbox-std 1.0s forwards;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-delay: 5s;
	animation: msgbox-std 1.0s forwards;
	animation-iteration-count: 1;
	animation-delay: 5s;
}

.msgbox-ok { background-color: #bbffaa; }
.msgbox-warning { background-color: #ffe49c; }
.msgbox-error { background-color: #ffbbaa; }

.note { width:100%; }
.note div {  width:100%; padding:4px; margin-bottom: 2px;}
.note div:hover { background-color:#eee;}


/* o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o-o */
/* **** Login Page **** */

.login {
	width: 500px;
	background: #fafafa;
}

.loginOther {
	width: 500px;
	background: #fafafa;
	margin-top:220px!important;
}

.loginAuthDesc { padding: 0px 0px 0px 0px; line-height:20px; text-align:center; color: red;}

.loginIdent { padding-top:10px; }
.loginIdent p { line-height:12px;  margin: 15px; }
.loginIdent label { display: inline-block; width: 120px; margin-right: 10px; text-align: right; }
.loginIdent input { height: 30px; width:400px; border-radius: 4px; border: 1px solid #888888; font-size:16px; line-height: 24px; padding: 25px 25px 25px 25px; }
.loginIdent input[type=checkbox] { border: 0px; line-height: 16px; padding: 0px; -webkit-appearance: checkbox; width: 20px; height: 20px; background: #fff; }

.margin-l-5 { margin-left: 5px; }
.margin-l-15 { margin-left: 15px; }
.margin-t-30 { margin-top: 30px; }

.buttonLarge { font-size:16px;font-weight:bold;}


.newaccount {
	position:fixed;
	top: 50%;
	left: 50%;
	margin-top: -100px; /*set to a negative number 1/2 of your height*/
	margin-left: -165px; /*set to a negative number 1/2 of your width*/
	width: 330px;
	height: 220px;
	border: 1px solid #000000;
	border-radius: 10px;
	padding-bottom: 15px;
	background-color: #fafafa;
}

.lostpwd {
	position:fixed;
	top: 50%;
	left: 50%;
	margin-top: -100px; /*set to a negative number 1/2 of your height*/
	margin-left: -165px; /*set to a negative number 1/2 of your width*/
	width: 330px;
	height: 220px;
	border: 1px solid #000000;
	border-radius: 10px;
	padding-bottom: 15px;
	background-color: #fafafa;
}

/* **** Form **** */
.showFields { border: 1px solid #eee; margin: 5px; margin-bottom:15px; padding: 5px;}
.showFields label { display: inline-block; width:150px; vertical-align: top; }
.showFields textarea { width: 300px; min-height: 96px; }

/* **** Table **** */
.tableAff { padding-top:4px; border-bottom: 1px solid #e8e8e8; }
.tableAff th { background-color: #e8e8e8; height: 30px; border-bottom: 1px solid #e8e8e8; text-align:left; }
.tableAff tr { border-bottom: 1px dashed #e8e8e8; height: 25px; }
.tableAff tr:nth-child(even) { background-color: #f8f8f8; }
.tableAff tr:hover { background-color: #ffe1e1!important; }


table.dataTable tbody td { padding-top:4px!important; padding-bottom:4px!important; }
.dataTables_wrapper label { width: inherit; }

/* **** Settings **** */
.titleSettings { height:48px; padding-left:15px; padding-top:5px; vertical-align:middle; }
.titleSettings label { padding-top: 6px; }
.titleSettings img { width:16px; height:16px; }
.listSettings { margin-top:10px; margin-bottom:15px; }
.listSettings label { width:200px; padding-right:10px; vertical-align:top;}
.listSettings span { display: inline-block; width:300px;}
.formSettings {display:none; position:fixed; top: 400px; left: 50%; -webkit-transform: translate(-50%, -80%); transform: translate(-50%, -80%); z-index:50;text-align:left;vertical-align:center;border: 2px solid; border-radius: 5px; padding:15px;padding-top:35px;}
.formWindow { position:fixed; z-index:50;text-align:left;vertical-align:center;border: 2px solid; border-radius: 5px; padding:15px;padding-top:35px;}

.formLarge p { text-align: left; margin-bottom:5px; }
.formLarge input:not([type]) { width:100%; padding:2px; margin-bottom:2px; height:24px; }
.formLarge select { width:100%; padding:2px; margin-bottom:2px; height:24px; }

@media only screen and (min-width: 64em) {
    body{width:100%;}
	.site_header img {width:80%; margin-left:10%; margin-bottom:5px}
}

/* @media screen and (max-width:800px) { */
    /* body{width:100%; border: 10px solid #0000ff;} */
    /* .site_header img {width:80%; margin-left:10%; margin-bottom:5px} */
/* } */

@media only screen and (min-width: 64em) and (any-pointer: coarse) {
    body{width:100%; }

}
@media only screen and (min-width: 100em) {
    body{width:100%; }
	.site_header img {width:80%; margin-left:10%; margin-bottom:5px}
}

@media only screen and (max-width: 1225px) {
    .card { min-width:500px; max-width:650px; }
}
@media only screen and (max-width: 1000px) {
    .card { min-width:500px; max-width:550px; }
}
@media only screen and (max-width: 800px) {
    .card { min-width:300px; max-width:600px; }
}
@media only screen and (max-width: 600px) {
	.main-content { justify-content: left};
    .card { min-width:300px; max-width:400px; }
	.col-400px { min-width:100px!important; }
	.col-40px { min-width:24px!important; }
}
@media only screen and (max-width: 400px) {
	.border-r{margin-right:1px; padding-right:1px}
	.border-l{margin-left:1px; padding-left:1px}
	
}


@media only screen and (-webkit-min-device-pixel-ratio: 3) {
	.main-content {
		justify-content: inherit;
	}
	.formSettings {
		top: 300px;
	}
	.login {
		width: 380px!important;
		font-size: 16px;
	}
	.loginOther {
		width: 380px!important;
		font-size: 16px;
	}
	.loginIdent p { margin-left:0px; margin-right:0px }
	.loginIdent input { width:340px!important; height:48px!important; font-size: 24px;}
	.loginSubmit input { height:64px!important; color: #000000; text-align: center; font-size: 24px;} 

	.margin-l-15 { margin-left: 0px; }

	.newaccount {
		margin-left: -350px!important; /*set to a negative number 1/2 of your width*/
		width: 700px!important;
		font-size: 16px;
	}

	.lostpwd {
		margin-left: -350px!important; /*set to a negative number 1/2 of your width*/
		width: 700px!important;
		font-size: 16px;
	}

    .titleSettings { width:inherit; }
    .listSettings { width:inherit; }
    .card { max-width:460px; }
	.listSettings span { width:100%;}
} 

@media print {
	body{background-color:#ffffff; }
	select { border: 0px!important; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size: inherit; font-family: inherit; }
	textarea { border: 0px!important; }
	input {	border: 0px!important; }
	.main-content { position:inherit; min-height:950px; }
	.button { display:none!important; }
	.navigation { display:none!important; }
	.table-area { padding: 0px; border: 0px; min-height: 0px; }
	.pagebreak { page-break-before: always; margin-top:50px;}
	.report-area input{ min-width:35mm!important; max-width:40mm!important; }
	.report-area select{ min-width:35mm!important; max-width:40mm!important;}
	.footer { display:none!important; }
	.affDebugTime { display:none!important; }
	.col-400px { min-width:90mm!important;}
	.col-250px { min-width:50mm!important;}
	.border-a { margin-left:0px; margin-right:0px;}
	.card { width:180mm; }
}