html, body  {
    height: 100%;
	margin: 0;
  	padding: 0;
  	min-height: 100vh;
	overflow-x: hidden; 
    -webkit-overflow-scrolling: touch; /* Pour un scroll fluide sur iOS */
    touch-action: manipulation;
}
body  {
    position: relative; /* important */
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-weight: medium;
    font-size: clamp(10px, 2vw, 16px);
    background-color: #0f172a;
    background-image:  linear-gradient(130deg, #797f94,#d6bdda, #7f8ac8, #7ab3f4,#eaa4d1, #5b82c0);
    background-repeat: no-repeat;
    background-position: 0% 50%;
    background-attachment:scroll;
    background-size: 400% 400%;

    animation: gradientFlow 20s ease infinite;
    color: rgb(47, 47, 47);
}

/* Animation de fond */
@keyframes gradientFlow {
    0% { background-position: center bottom, 0% 50%; }
    50% { background-position: center bottom, 100% 50%; }
    100% { background-position: center bottom, 0% 50%; }
}

/* body {
	font-family:'Segoe UI', Verdana, Geneva, Arial, Helvetica, sans-serif ;
  	color: #1f2937; 
	font-weight: normal;
	font-size: 14px;
	background-color: rgb(210,210,210);
	background-image: url(/web/metalic.png);
	background-repeat: repeat;
	background-attachment: scroll;
	background-size: auto;

} */


button.slidingdoors {
width:auto;
overflow:visible;
border:0;
cursor:pointer;
font-weight:bold;
text-align:center;
background:none;
padding:0px;
}
button.slidingdoors span{
position:relative;
display:block;
white-space:nowrap;
}
button.slidingdoors em{
display:block;
font-family:Lucida Grande, Arial;
font-weight:bold;
font-size:12px;
line-height:28px;
padding:0px 18px;
height:28px;
color:#444;
}
/*Right Image*/
button.slidingdoors span.rt {
background:url(/web/but_right.png) right no-repeat;
}
/*Middle Image*/
button.slidingdoors span.md{
background:url(/web/but_span.png) repeat-x center;
}
/*Left Image*/
button.slidingdoors em{
background:url(/web/but_left.png) left no-repeat;
} 
button.slidingdoors:hover{
    border: none;
    background: url(/web/gradient-dark.jpg) repeat-x center left;
	/* for IE */
	filter:alpha(opacity=75);
	/* CSS3 standard */
	opacity:.75;
}
button.slidingdoors:active {
	border-style: inset;
}



a.button em{
display: block;
float: left;
background: url(em_bg.png) no-repeat;
width: 20px;
height: 25px;
}
a.button span{
display: block;
float: left;
background: url(span_bg.png) repeat-x;
height: 25px;
}
a.button b{
display: block;
float: left;
background: url(b_bg.png) no-repeat;
width: 20px;
height: 25px;
} 
a.button {
line-height:25px; /*equal to the height of the button*/
cursor:pointer;
}
a.button:hover {
    border: none;
    background: url(/web/gradient-dark.jpg) repeat-x center left;
	/* for IE */
	filter:alpha(opacity=75);
	/* CSS3 standard */
	opacity:.75;
}


#blanket {
	background-color:#111;
	opacity: 0.50;
	filter:alpha(opacity=50);
	position:absolute;
	z-index: 9001;
	top:0px;
	left:0px;
	width:110%;
	height: 100%;
}
#popUpDiv {
	position:absolute;
	border: 4px #444 solid;
	background-image: url(metalic.png);
	width:500px;
	height:300px;
	z-index: 9002;
}


div.logs {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif ;
	font-weight: normal;
	font-size: 9px;
}

div.loading-invisible {
	display:none;
}

div.loading-visible {
	display:block;
	position:absolute;
	top:50%;
	left:40%;
	width:240px;
	text-align:center;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif ;
	font-weight: normal;
	font-size: 15px;
	background:#fff;
	/* for IE */
	filter:alpha(opacity=40);
	/* CSS3 standard */
	opacity:.40;
	border-top:2px solid #444;
	border-bottom:2px solid #444;
	border-left:2px solid #444;
	border-right:2px solid #444;
}

table.logstable th {
	background-color: #666;
	background-image:url(/web/gradient.jpg);
	background-position:center;
	background-repeat:repeat-x;
	height: 25px;
	color: #fff;
	padding: 4px;
	text-align: center;
	border: 1px #666 solid;
	font-size: 12px;
	font-weight: bold;
}

table.logstable td {
/*	text-align: center;*/
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif ;
	font-weight: normal;
	font-size: 11px;
	background-color: #CCC;
	color: #000;
/*	padding: 4px;*/
/*	text-align: left;*/
	border: 1px #666 solid;
	white-space: nowrap;
}

textarea.logs {
	width: 100%;
	height: 30em;
	font-size: 9px;
	text-align: left;
	color: black;
	font-family: arial, helvetica, sans-serif;
	overflow-y: scroll;
}

textarea.journal {
/*	width: 120em;
	height: 24em;*/
	height: 80%;
	font-size: 14px;
	text-align: left;
	color: black;
	font-family: arial, helvetica, sans-serif;
	overflow-y: visible;
	resize:none;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(57, 140, 255, 0.8);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 74, 184, 0.8);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(101, 138, 194, 0.71) transparent;
}

table.logshistory {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif ;
	font-weight: normal;
	font-size: 11px;
	color: #fff;
	width: 280px;
	background-color: #666;
	border: 0px;
	border-collapse: collapse;
	border-spacing: 0px;
}
table.logshistory th {
	text-align: center;
	background-image:url(/web/gradient.jpg);
	background-position:center;
	background-repeat:repeat-x;
	height: 20px;
}
table.logshistory td {
	background-color: #CCC;
	color: #000;
	padding: 4px;
/*	text-align: left;*/
	border: 1px #666 solid;
	white-space: nowrap;
}
table.logshistory img:hover {
	color:#000;
	background-color: #444;
    border: none;
	/* for IE */
	filter:alpha(opacity=40);
	/* CSS3 standard */
	opacity:.40;
}


table.admin {
	text-align: center;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif ;
	font-weight: normal;
	font-size: 11px;
	color: #fff;
	width: 280px;
	background-color: #666;
	border: 0px;
	border-collapse: collapse;
	border-spacing: 0px;
}

table.admin td {
	background-color: #CCC;
	color: #000;
	padding: 4px;
	text-align: left;
	border: 1px #666 solid;
	white-space: nowrap;
}

table.admin td.inside {
	background-color: #CCC;
	color: #000;
	padding: 0px;
	text-align: left;
	border: none;
	white-space: nowrap;
}

table.admin th {
	background-color: #666;
	background-image:url(/web/gradient.jpg);
	background-position:center;
	background-repeat:repeat-x;
	height: 25px;
	color: #fff;
	padding: 4px;
	text-align: center;
	border: 1px #666 solid;
	font-size: 12px;
	font-weight: bold;
	white-space: nowrap;
}



p.titlebar {
	background-color: #666;
	background-image:url(/web/gradient.jpg);
	background-position:center;
	background-repeat:repeat-x;
	height: 16px;
	width: 1024px;
	color: #fff;
	padding: 4px;
	text-align: left;
	border: 1px #666 solid;
	font: bold 13px arial;
	vertical-align: middle;
}


.hovermenu ul{
	font: bold 13px arial;
	padding-left: 0;
	margin-left: 0;
	height: 24px;
}

.hovermenu ul li{
	list-style: none;
	display: inline;
}

.hovermenu ul dt{
	padding: 4px;
	text-decoration: none;
	float: left;
	color: white;
	width: 500px;
	border: 1px #666 solid;
	background-image:url(/web/gradient.jpg);
	background-position:center;
	background-repeat:repeat-x;
}

.hovermenu ul li a {
	padding: 4px;
	text-decoration: none;
	float: left;
	color: #444;
	border: 1px #666 solid;
	background-image:url(/web/gradient.jpg);
	background-position:center;
	background-repeat:repeat-x;
}

.hovermenu ul li a:hover{
	background-image:url(/web/gradient-dark.jpg);
	border-style: outset;
}

html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */
	border-style: inset;
}

a.iconref img {border: none; } 
a.iconref:link {color:black; text-decoration: none}
a.iconref:visited {color:black; text-decoration: none}
a.iconref:active {color:black; text-decoration: none}
a.iconref:hover {color:black; text-decoration: underline overline; color: gray;}

img {
  box-shadow: none !important;
}
x-cloak{ 
	display: none; 
}

#sections {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start; 
}

section.draggable {
  flex: none; 
  display: block;
}