:root {
	--FONDSPECIAL: #00449e;
	--BLEULOGO: #00aa9e;
	--BLEULOGOCLAIR: #80ddd0;
	--BLEU: #00548D;
	--NOIR: #1D1D1B;
	--VERT: #60B885;
	--SAUMON: #EE8670;
	--BLEUCLAIR: #3287AF;
	--GRIS: #3C3C3B;
	--ORANGE: #f08b57;
	--GRIS2: #7c7c7c;
	--GRIS3: #4e4d4d;
	--GRIS4: #7f7f7f;
	--BRUN: rgb(216, 138, 98);
	--RED: #a90202;
	--TURQUOISE: #1c9b95;
	--NOIR2: #333333
}

@media (max-width: 1100px) {

	html,
	body {
		font-size: 1.515vw;
	}
}

@media screen and (min-aspect-ratio: 4/1) {

	html,
	body {
		font-size: 1.515vw;
	}
}

html {
	padding:0;
	margin:0;
	height:100%;
}

body {
	padding:0;
	margin:0;
	height:100%;
	display: flex;
	flex-direction: row;
}

a {
	text-decoration:none;
}


#navview nav {
	padding:0; 
	border:0;
	text-align: left;
	overflow-x: hidden;
	overflow-y: auto;
	direction:rtl;
}

#navview ul {
	direction:ltr;
}

#navview {
	padding:0;
	border:0;
	width:255px;
	height:100%;
	background-color: white;
	text-align: center;
	border-right: var(--BLEUCLAIR) 3px solid;
	border-radius: 25px;
	display: flex;
	flex-direction: column;
}

#navview img {
	padding-top: 20px;
	width:200px;
	height:auto;
	top:25px;
}

#navview>nav>ul>li {
 font-family: Arial, sans-serif;
 font-size: 24px;
 display : list-item;
 color:var(--SAUMON);
 list-style-image : url(../images/logofeelofood28t.png);
 margin-top: 15px;
 line-height:35px;
} 
.navcollapsed ul {
	display: none;
}
.navcollapsed>span {
	cursor : pointer;
}
.navexpanded>span{
	cursor : pointer;
}
#navview ul li ul li {
 font-family: Arial, sans-serif;
 font-size: 20px;
 display : list-item;
 color:var(--SAUMON);
 list-style-image : url(../images/logofoodhea16.png);
 line-height:25px;
}
#navview a {
	color:var(--BLEU);
}
#navview a:visited {
	color:var(--BLEUCLAIR);
}
#rightscreen {
	display: flex;
	flex-direction: column;
	height:100%;
	flex:1;
	overflow: auto;
}

.actionbar {
	background-color: var(--SAUMON);
	color:white;
	font-weight: bold;
	display:flex;
	flex-wrap: wrap;
	align-items: center;
	padding-top:8px;
	padding-bottom:10px;
	padding-left: 10px;
}

.actionbar input, .actionbar button {
	background-color: var(--SAUMON);
	color:white;
	font-weight: bold;
	border-radius: 10px;
	border: white 3px solid;
	font-size:20px;
	margin:0 5px;
	box-shadow: 6px 4px 4px #785040;
}

.actionbar input:hover, .actionbar button:hover {
	color: var(--SAUMON);
	background-color:white;
	margin:3p 2px;
	box-shadow: 3px 2px 2px #806040;
}

#innerview {
	flex:1;
	overflow: auto;
	width: 100%;
	font-size:18px;
}
#innerview table{
	width: 100%;
	border-spacing: 0;
	border-collapse: collapse;
	padding: 0;
	background-color: #654321;
}
#innerview th {
	border-spacing: 0;
	border-collapse: collapse;
}
#innerview thead{
	background-color: #BBBBBB;
	color:black;
	font-weight: bold;
	justify-content: center;
	font-size:24px;
}

.alternate tr:nth-child(odd){
  background-color:#FFE080;
}
.alternate tr:nth-child(even){
  background-color:#A0E060;
}
.flatview>*:nth-child(odd){
  background-color:#FFF;
}
.flatview>*:nth-child(even){
  background-color:#EEEAFF;
}

.docheader {
  background-color:WHITE;
  display: flex;
  flex-direction: column;
  border-bottom: RED solid 2px;
  padding:3px; 
}
.radioline {
	display: flex;
	flex-direction:row;
	justify-content: start;
	margin:4px;
}
.docline {
  flex-direction:row;
  display: flex;
  justify-content: space-between;
}
.docmultiline {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.fieldblock > div.errmsg:first-of-type {
	background-color: red;
	padding:20px;
}
.fieldblock {
	border-color: var(--BLEULOGO);
	background-color: var(--BLEULOGO);
	color: white;
	border-style: solid;
	border-width: 2px;
	border-radius: 7px;
  display: flex;
  margin: 3px;
  padding: 0;
}
.fieldblock_special {
	border-color: var(--FONDSPECIAL);
	background-color: var(--FONDSPECIAL);
}
.fieldblock h1{
	padding: 0px;
	line-height: 1em;
	padding-left: 50px;
	margin: 15px;
}
td.fieldblock {
  width: 100%;
  height:100%;
}
div.fieldblock {
	flex:1;
}
.fieldblockmulti {
  flex-wrap: wrap;
}
.fieldblockmulti div {
	width: 50%;
}
.fullline {
	width: 100%;
	style="flex:2;
}
.fieldblock>div {
	font-size: 20px;
	font-family: "arial";
	flex: 2;
}
.hlist {
	display: flex;
	flex-direction: row;
}.hlist input {
	display: inline!important;
}
.fieldblock > div:first-of-type {
	min-width:150px;
	font-weight: bold;
	flex: 1;
	color: white;
	background-color: initial;
}
.fieldblock>div {
	padding:3px;
	margin:0;
	border: 0;
	background-color: #f0f7f9;
	color: var(--NOIR);
}
.fieldblock input[type=checkbox] {
	width: 25px !important;
	display:inline;

}

.blocktitle {
	background-color: var(--BLEU);
	color: white;
	font-size: 28px;
	font-weight: 600;
	font-family: arial;
	width: 100%;
	padding: 5px;
	padding-left: 25px;
	margin: 0;
	margin-top: 15px;
}
tr:first-child .blocktitle {
	margin-top: 0;
}

.fieldblock input, .fieldblock textarea {
	padding:3px;
	display:block;
	border:none;
	border-bottom:2px solid lightgrey;
  width: calc(100% - 10px) !important;
  max-height: calc(100% - 10px) !important;
  margin: auto;
}
.radioline input {
	width:15px !important;
	margin:10px;
	margin-top: 0;
	margin-bottom: 0;
}
.datablock {
  flex-direction:row;
  display: flex;
  justify-content: space-around;
	width:100%;
	align-items: flex-start;
}
.datablock label {
	padding-left: 4px;
}

.separator {
	display: block;
	width: 100% !important;
	height: 20px;
	background: linear-gradient(white ,black);
}
#refsel {
	color: black;
}
footer {
	flex: 2rem;
	max-height: auto;
	border-top: inset black 4px;
	background-color: rgb(255, 255, 255);
	border-top: grey solid 2px;
	font-size: 1.2rem;
	color: white;
	text-align: center;
	vertical-align: middle;
	max-width: 65rem;
}

footer a {
	color: var(--GRIS)
}

.footer_text {
	font-family: "Roboto";
	font-size: 0.7rem;
	color: var(--GRIS)
}

#footer_element {
	display: flex;
	padding: 1rem 0;
	justify-content: space-evenly;
	width: 64rem;
	align-items: center;
}

#footer_logo img {
	max-width: 8.5rem;
	height: auto;
}

.expand_collapse{
	width: 25px;
	height: 25px;
}
.selector {
	background-color: #FFFFD0;
	border-style: inset;
	border-color: grey;
	border-width: 3px;
	max-height: 400px;
	min-width: 250px;
	overflow: auto;
}
.selector div{
	font-size: 18px;

}
.line {
  flex-direction:row;
  display: flex;
}
.children_lines {
	align-items: left !important;
	flex-direction: column !important;
	display: flex;
}
.view {
	flex-direction: column;
	/*display: flex;*/
}
.categs {
	flex-direction: column !important;
	align-items: left !important;
	display: flex;
}
.parent_line {
	align-items: left !important;
	flex-direction: row;
	min-width: 200px;
	display: flex;
}
.parent_line>div {
	display: flex;
}
.collapsed>.children_lines {
	display: none;
}
.expanded>.children_lines {
	flex-direction: column;
	display: flex;
}
.expanded {
	align-items: left !important;
	flex-direction: column;
	display: flex;
}
.splitterV {
	overflow: auto;
	height:100%;
	display: flex;
	flex-direction: column;
}
.splitterH {
	overflow: auto;
	height:100%;
	width:100%;
	display: flex;
	flex-direction: row;
	flex:1;
}
.splitterH>* {
	flex:1;
	border: 1px solid black;
}
.inlineSplitterH {
	overflow: auto;
	width:100%;
	display: flex;
	flex-direction: row;
	flex:1;
}
.inlineSplitterH>* {
	flex:1;
	border: 1px solid black;
	padding: 2px;
	margin: 2px;
}
.document {
	overflow: auto;
	height:100%;
	display: flex;
	flex-direction: column;
}


.viewline {
  font-size: 22px;
  flex-direction:row;
  display: flex;
}
.viewline a {
  color:darkgrey;
  font-weight: bold;
  text-decoration: underline;
}
.viewline a:hover {
  color:darkgrey;
}
.viewid {
  width:75px;
  font-weight: bold;
}
.viewmainfield {
  min-width:250px;
  flex:1;
}
.view8digits {
  text-align: right;
  width:75px;
}
.viewunit {
  width:75px;
}



.docline td {
	height: auto;
}
.docline>div {
	align-items: center;
	height: auto;
  font-size: 22px;
  flex-direction:row;
  display: flex;
}




#loginform {
	margin: auto;
    width:400px;
    padding: 30px;
    border: 1px solid #e0e0E0;
    background-color: #fff;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
#loginform  h1{
    width: 38%;
    margin: 0 auto;
    padding-bottom: 10px;
}

/* Full-width inputs */
#loginform input[type=password], #loginform input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}
input[type="text"]:disabled {
	font-weight: bold;
	background-color: #CCCCCC;
}
/* Set a style for all buttons */
#loginform input[type=submit] {
    background-color: #0000A0;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: 2px solid #0000A0;
    cursor: pointer;
    width: 100%;
}
#loginform input[type=submit]:hover {
    background-color: white;
    color: #0000A0;
    border: 2px solid #0000A0;
}


.view {
	  width: 100%;
	  font-size: 25px;
	  border: 1px black solid;
}

.view thead
	{background: var(--BLEU);
		color: white;
	display: table-header-group; }
.view tbody tr:nth-child(odd)
	{background: white}
.view tr:nth-child(even)
	{background: var(--BLEULOGOCLAIR)}
img.reseaux {
	height: 30px;
	width: auto;
	border-radius: 5px;
	vertical-align: bottom;
}

#title {
    /*background-color: var(--GRIS);*/
    color: var(--BLEU);
    text-align: center;
    font-size: 50px;
    font-weight: 600;
    font-family: roboto;
}