#cookieBanner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
  z-index:20;
}
.openPopup {cursor:pointer}
.hovericon {opacity:0.5}
.hovericon:hover {opacity:1}

	.tab {width:100%; text-align:left; margin-top:10px;}
	.tab .tab_title {
		display:inline-block;
		background:#EEE;
		border-radius:10px 10px 0px 0px;
		padding:5px 10px;	
		margin-right:10px;
		cursor:pointer;
	}
	.tab .tab_content {
		border:2px solid #ccc; padding:10px; width:100%; display:none;
		 border-radius: 0px 10px 10px 10px;
		 position: relative;
		  min-height: 98px;
		}
	}
	.tab .tab_content .fill {
		background: linear-gradient(180deg, rgb(204, 204, 204) 0%, rgb(245, 245, 245) 100%);
		border:0px;		
	}
	

	.tab .tab_title.selected {background-color:#CCC}
	.tab .tab_content.selected {display:block; }

.dbobjecttable textarea {resize:vertical;min-height:100px;}

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  min-width: 180px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 105%;
  left: 50%;
  margin-left: -90px;
  opacity: 0;
  transition: opacity 0.3s;
  white-space: break-spaces;
  font-weight:100;
  font-size: medium ;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
		table.RS {margin-left: auto;  margin-right: auto;}
		table.RS td {text-align:center}
		table.RS img {height:30px;}
		table.RS img:hover {filter: contrast(4);}
		
		div.popup {position:fixed;width:100vw; max-width:100vw; height:100%; top:0px; left:0px; z-index:20; background:rgba(0,0,0,0.7);}
		div.popupWindow {position:relative; width:800px; max-width:100vw; max-height: calc(100% - 100px); margin:auto; background:#FFF; min-height:200px;margin-top:50px; border-radius:10px; padding:5px;	}
		div.popup div.title {background:#ddd; border-radius:5px; padding:5px;font-weight:bold;}
		div.popup div.content { padding-left:10px;padding-right:10px; width:100%;}
  div.popup div.scroll { overflow: auto;
  position: absolute;
  bottom: 45px;
  top: 40px;
  left: 0px;
  width:100%;
  
}
		div.news {border-bottom:1px solid black; padding-top:5px; padding-bottom:5px;}
		div.news:hover {background:rgba(255,255,0,0.2)}
		.error {background-image:url(/images/poo.png); background-position:top center; background-size:300px; background-repeat:no-repeat; padding-top:300px; font-size:300%; text-align:center;}
		.smallerror {background:#FFAAAA; padding:3px; text-align:center;}
		.footer {text-align:center; font-size:smaller; color:rgba(0,0,0,0.5); margin-top:5px;}
		.centerzone { top:10px;z-index:10;position:relative; max-width:700px; margin:auto; background:#FFFFFF; border-radius:10px;padding:10px; box-shadow: 10px 5px 5px rgba(0,0,0,0.3);}
		.centerzone th {text-align:left; vertical-align:top;}
		html, body {margin:0px; padding:0px;width:100vw; height:100%}
		body { 
		background: linear-gradient(90deg, #4A8CFF, #8362FF);
		min-height: 100vh;
         font-family: Arial, Helvetica, sans-serif;
		background-attachment:fixed;
 
  }
   body:before {
		content: "";
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
    right: 0;
		mask-image: linear-gradient(to bottom, transparent, black);
		background: linear-gradient(90deg, #8362FF, #BD37FF);	
  }		
		
		
		 

 
		
		a {text-decoration:none; font-weight:bold; color:#4a8cff}
		a:hover {text-decoration:underline}
		* {box-sizing:border-box;}
		div.main {position:fixed; left:0px; top:0px; pointer-events: none; opacity:0.3;width:100vw; height:100%; background:url(/images/bkg_potty.jpg); mix-blend-mode:screen; background-size:25%}
		#img_photo { width:200px !important; height:200px !important}


		.centerzone h1 {margin: 0px;

padding: 0px;

margin-bottom: -8px;
margin-top:10px;
font-family: arial;
font-weight: bold;
color: #ccc;
padding-left: 20px;}
		div.bloc { background: linear-gradient(180deg, rgb(204, 204, 204) 0%, rgb(245, 245, 245) 100%);
padding: 10px;
border-radius: 10px; }
.bloc input, .bloc button {font-size:20px;}
.bloc input[type='text'] {
	padding:5px 15px;
	border-radius:5px; border:1px solid black;
	max-width:100%;
}
a.button, input[type='submit'], input[type='button'], button {
	padding:5px 15px; background: linear-gradient(to bottom right, #4a8cff, #bd37ff); border-radius:5px; border:2px solid black;
	color:#FFFFFF; font-weight:bold; cursor:pointer;
	text-decoration:none; white-space: nowrap;
	display: inline-block;
	margin: 2px;
}
a.button:hover, input[type='submit']:hover, input[type='button']:hover, button:hover {
	background: linear-gradient(to bottom right, #A8C8FF, #D786FF); color:#000000;
}
a.button:disabled, a.button.disabled, input[type='submit']:disabled, input[type='button']:disabled, button:disabled {
	background: linear-gradient(to bottom right, #aaaaaa, #dddddd); color:#ffffff; border-color:#aaaaaa; 
}
a.button:disabled, a.button.disabled {pointer-events:none;}
.field_help {margin-left:5px;border-radius:5px; min-width:15px; text-align:center; display:inline-block;background:rgba(0,0,0,0.1)}
.field_help:hover {background:rgba(255,255,0.4)}
.char_count {font-size:60%; color:rgba(0,0,0,0.5)}

		.zoom img{
		  transition: transform .2s; /* Animation */
		}
		.zoom img:hover {
		  transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
		}


/* (A) SPEECH BOX */
.speech {
  /* (A1) FONT */
   font-size: 1.1em;
 
  /* (A2) COLORS */
  color: #000;
  background: #fff;
 
  /* (A3) DIMENSIONS + POSITION */
  padding: 2px;
  border-radius: 10px;
  border:2px solid black;
   transition: transform .2s; 
}
.speech.bottom {transform-origin: bottom center;}
.speech.top {transform-origin: top center;}
.speech:hover {transform: scale(1.5);}
/* (B) ADD SPEECH "CALLOUT TAIL" */
/* (B1) USE ::AFTER TO CREATE THE "TAIL" */
.speech::after {
  /* (B1-1) ATTACH TRANSPARENT BORDERS */
  content: "";
  border: 10px solid transparent;
 
  /* (B1-2) NECESSARY TO POSITION THE "TAIL" */
  position: absolute;
}
 
/* (B2) BOTTOM "CALLOUT TAIL" */
.bottom.speech::after {
  /* (B2-1) DOWN TRIANGLE */
  border-top-color: #000;
  border-bottom: 0;
 
  /* (B2-2) POSITION AT BOTTOM */
  bottom: -10px; left: 50%;
  margin-left: -10px;
}

/* (C) DIFFERENT TAIL POSITIONS */
/* (C1) TOP */
.top.speech::after {
  /* (C1-1) UP TRIANGLE */
  border-bottom-color: #000;
  border-top: 0;
 
  /* (C1-2) POSITION AT TOP */
  top: -10px; left: 50%;
  margin-left: -10px;
}
 
/* (C2) LEFT */
.left.speech::after {
  /* (C2-1) LEFT TRIANGLE */
  border-right-color: #a53d38;
  border-left: 0;
 
  /* (C2-2) POSITION AT LEFT */
  left: -20px; top: 50%;
  margin-top: -20px;
}
 
/* (C3) RIGHT */
.right.speech::after {
  /* (C3-1) RIGHT TRIANGLE */
  border-left-color: #a53d38;
  border-right: 0;
 
  /* (C3-2) POSITION AT RIGHT */
  right: -20px; top: 50%;
  margin-top: -20px;
}
@media only screen and (min-width: 1200px) {
	div.stat {position:fixed; width:250px; right:0px; top:20px; background:rgba(255,255,255,0.7);border-radius:10px 0px 0px 10px; min-height:300px;padding:5px;max-height: calc(100% - 40px);overflow: auto;scrollbar-width: thin;}
	div.newslist h1, div.stat h1 {color:#000;}
	div.newslist {position:fixed; width:240px; left:0px; top:20px; background:rgba(255,255,255,0.7);border-radius:0px 10px 10px 0px; min-height:300px;padding:5px;max-height: calc(100% - 40px);overflow: auto;scrollbar-width: thin;}
div.stat::-webkit-scrollbar, div.newslist::-webkit-scrollbar {
  width: 9px;
}
div.newslist::-webkit-scrollbar-track, div.stat::-webkit-scrollbar-track {
  background: transparent;
}
div.newslist::-webkit-scrollbar-thumb, div.stat::-webkit-scrollbar-thumb {
  background-color: rgba(155, 155, 155, 0.5);
  border-radius: 20px;
  border: transparent;
}
	div.newslist div.bloc, div.stat div.bloc {background:none}
	
}
	.message { padding:10px; border-radius:10px; text-align:center;width: 60%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;background-color:rgba(0,0,0,0.1)}
  
	.message.yellow {background-color:#FFFF00}
@media only screen and (max-width: 1200px) {

 .news img {max-width:200px}
    

}
@media only screen and (max-width: 700px) {

	div.popupWindow {position:fixed;top:5px; bottom:5px; left:5px; right:5px; max-height:inherit;  margin:0px; width: calc(100vw - 10px); height: calc(100% - 10px) !important}
	div.popup div.content { padding-left:20px;padding-right:30px;}
	form {font-size:80%}
	
	.dbobjecttable td {display:block;}
	.dbobjecttable th {display:block; text-align:left;}
	

 
}

div.parameters {
	display:inline-block; width:25%; padding-bottom:25%; position:relative
}
div.parameters a{
	 position:absolute; left:5px; top:5px; right:5px; bottom:5px; padding: 12px 12px;
}
@media screen and (max-width: 600px) {
	div.parameters {width:33.33%; padding-bottom:33.33%; }
	div.parameters a{left:3px; top:3px; right:3px; bottom:3px; }
}
@media screen and (max-width: 350px) {
	div.parameters {width:50%; padding-bottom:50%; }
	div.parameters a{left:3px; top:3px; right:3px; bottom:3px; }
}
div.parameters a:hover img {filter: invert(1);}