body
{
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
font-family: Arial, sans-serif;
box-sizing: border-box;
margin: 0px;
--border: 3px solid red;
overflow:hidden;
}

canvas{
  position: absolute;
	top: 33;
	left: 0;
	z-index: 10;
	--pointer-events: none;
}
input,select
{
padding:3px;font-size:1em;
}

p
{
margin:0.5em 0;
}

form
{
padding:16px 8px;
}

input{width:100%;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;}
input[type=checkbox],input[type=radio]{width:1em;margin-right:6px;vertical-align:-1px;}
input[type=range]{width:99%;margin: 5px 2px 5px 2px;}
select{width:100%;}
textarea {
width: 100%;
min-width: 300px;
min-height: 250px;
height: auto;
padding: 5px;
border-radius: 3px;
overflow: auto;
box-sizing: border-box;
}

button,.bred,.bgr,.btn,.btn1
{
margin: 5px 2px 5px 2px;
border:0;
border-radius:0.3rem;
background:#f1f1f1;
color:#000;
line-height:2.4rem;
font-size:14px;
min-width:80px;
max-width:200px;
cursor:pointer;
}

button:hover{background:#d3d3d3;}
.bred, .bred:hover{
  background:#ef5350;
  color: #ffffff;
}
.bgr, .bgr:hover{
  background:#26a69a;
  color: #ffffff;
}
.btn{
  min-width:60px;
  line-height:1.8rem;
}
.btn1{
  min-width:140px;
}

.err{background:#d43535;border-radius:0.3rem;cursor:pointer;}

/* color_m */
.color_m{
	box-sizing: border-box;
  background-color: #f1f1f1;
  width: 100%;
  min-height: 47px;
	height: 47px;
  padding:2px 0px;
	overflow-x: auto;
	scrollbar-width: none;
	text-decoration: none;
}

.color_m .on 
{
background: #d3d3d3;
color: #ffffff !important;
border-radius:0.3rem;
}

/* Menu */
.menu
{
  display: flex;
  align-items: center;      /* függőleges középre */
  justify-content: space-between;  /* vízszintes középre */
	box-sizing: border-box;
  background-color: #f1f1f1;
  width: 100%;
  min-height: 47px;
	height: 47px;
  padding:2px 0px;
	--border: 3px solid yellow;
	overflow-x: auto;
	scrollbar-width: none;
}
.menu a, .color_m a{
  display: inline-block;
  color: #000;
  padding: 15px 15px 15px 15px;
  text-decoration: none;
  line-height: 1;
 }
.menu a:hover,.menu a:active, .color_m a:hover,.color_m a:active
{
  background-color: #d3d3d3;
  border-radius:0.3rem;
  padding: 15px 15px 15px 15px;
}
.menu .on, .color_m .on
{
background: #d3d3d3;
color: #ffffff;
border-radius:0.3rem;
}


#menu_top
{
  display: flex;
  align-items: center;      /* függőleges középre */
  justify-content: flex-start;  
}

/* menu right */
#o_mleft{
  position: absolute;
	top: 33px;
  z-index: 100;
  float: left;
  height: calc(98vh - 110px);
  margin:0px 0px 0px 1px;
  overflow: auto;
  scrollbar-width: none;
	background: #ffffff;
  opacity: 0;
	transition: opacity 0.4s ease;
}
#o_mleft:hover{
	background: #ffffff;
	opacity: 1;
}
#o_mleft a.ck_id{
  text-decoration: none;
  color: #222;
}

#m_inst{
  --background-color: #f1f1f1;
  list-style-type: none;
  padding: 0;
  --max-height: calc(100vh - 348px);
}
#m_inst a{
  display: block;
  color: #000;
  padding: 8px 8px;
  text-decoration: none;
}
#m_inst .on{
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}


/* One Line Menu Styles */
.m_r1{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 4px 0px 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}


/* The Modal */
.modal{
  position: fixed;
  z-index: 1000;
  padding-top: 60px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal_content{
  position: relative;
  background-color: #fefefe;
  margin: auto;
  overflow: auto; /* Enable scroll if needed */
  padding: 0;
  width: 60%;
  height: 90%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  --border: 3px solid #f5f5f5;
  border-radius:0.3rem;
  padding: 2px;
}

.close{
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus{
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal_header,.modal_footer{
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.modal_body{padding: 10px 16px;}

#msg_toast{
		position: fixed;
		bottom: 2px;
		right: 2px;
		z-index: 9999;
		width: 360px;
		display: flex;
		flex-direction: column-reverse; /* key: newest at bottom */
}
.msg_box{
		padding: 12px 16px;
		margin-top: 2px;
		border-radius: 6px;
		color: #fff;
		cursor: pointer;
		opacity: 1;
		background: #e74c3c;
}
		
/* The Tooltip */
.tooltip{
  --width: 150px; 
  position: absolute;
  display: block; 
  box-sizing: border-box; 
  font-size: 12px; 
  text-align: left; 
  z-index: 1000;
  --top: 12px;
  --left: 12px; 
  pointer-events: none; 
  border-radius: 2px;
  font-family: sans-serif;
}
.tl0{
padding: 8px;
border: 2px solid #696969;
background:#ffffff;
}
.tl1{
color:#2e8b57;
padding: 8px;
border: 2px solid #2e8b57;
background:#ffffff;
}
.tl2{
color:#dc143c;
border: 2px solid #ef5350;
padding: 8px;
background:#ffffff;
}

/*  */
.r1{
  display: flex;
  align-items: flex-end;      /* függőleges középre */
  justify-content: flex-start;
  flex: 0 0 auto;
}

.r1 .ck{
margin:1px;
}

.r2{
  display: flex;
  align-items: flex-end;      /* függőleges középre */
  justify-content: flex-start;  
  flex: 1 1 auto;
}
.h_w{
	display: none;
}

.wr_m{
  display: flex;
  align-items: center;      /* függőleges középre */
  justify-content: space-between;  /* vízszintes középre */
  padding: 0px;
  overflow: auto;
  height: 100vh;
	width: 100vw;
}

.wr{ /* Need for porgram logic do not use */

}

.mm1{
	background:#f5f5f5;
}
.true::before{
  content: '\2611';
}
.false::before{
  content: '\2610';
}

#olegend, #o_playback, #o_colorp{
	position: absolute;
	
	--width: calc(100% - 80px);
	height: 24px;
	margin: 5px 2px 5px 2px;
	border-radius: 0.5rem 0.5rem;
	padding: 5px 0px 0px 10px;
	font-size: 14px;
	color: #20262E;
	text-align: left;
	z-index: 1000;
	overflow: auto;
	font-weight: bold;
	font-family: Courier;
	opacity: 1;
}

#olegend:hover{
	margin: 5px 2px 5px 2px;
	border: 0;
	border-radius: 0.3rem 0.3rem;
	background: #f1f1f1;
	color: #000;
	min-width: 80px;
	cursor: pointer;
	opacity: 1;
}

#o_playback, #o_colorp{
	left: 70px; 
  top: 33px;
  width: 300px;
  color: #20262E;
  padding: 0px 2px 0px 2px;
  height: 44px;
  border: 1px solid #696969;
}
#o_colorp{
  width: 200px;
  height: 84px;
}

#o_ai{
	top: 38px;
	width: 200px;           /* Final width */
	height: auto;           /* Let it expand to fit all links */
	border: 1px solid #696969;
	font-family: Courier;
	font-size: 14px;
	color: #20262E;
	padding: 5px 10px;      /* Some padding inside */
	font-weight: bold;
	position: absolute;
	
	z-index: 1000;
}

#o_ai .l_1 {
    display: block;         /* Make container stack children vertically */
}

#o_ai .l_1 a.ck_id {
    display: block;         /* Each link on its own line */
    padding: 4px 0;
    text-decoration: none;
    color: inherit;
}

#mcolor_1,#mcolor_2,#mcolor_3,#mcolor_4,#mcolor_5,#mwidth_1,#mwidth_2,#mwidth_3,#mwidth_4,#mwidth_5{
  border-radius:0.3rem;
  padding: 10px;
}
#mcolor_1.on,#mcolor_2.on,#mcolor_3.on,#mcolor_4.on,#mcolor_5.on{
  padding: 14px;
}
#mcolor_1{
  background-color: #FF8C00;
}
#mcolor_2{
  background-color: #87CEEB;
}
#mcolor_3{
  background-color: #808080;
}
#mcolor_4{
  background-color: #D2B48C;
}
#mcolor_5{
  background-color: #20B2AA;
}
.mi_1,.mi_2,.mi_3,.mi_4,.mi_5{
  border-radius:0.5rem;
  opacity: 0.1;
}
.mi_1{
  background-color: #26a69a;
}
.mi_2{
  background-color: #ef5350;
}
.mi_3{
  background-color: #0000FF;
}
.mi_4{
  background-color: #808000;
}
.mi_5{
  background-color: #FFA500;
}
.mi_1:hover,.mi_2:hover,.mi_3:hover,.mi_4:hover,.mi_5:hover,.mi_1.on,.mi_2.on,.mi_3.on,.mi_4.on,.mi_5.on{
  opacity: 1;
}

#risc, #speed{
  width: 140px;
  height: 1px;
  --background-color: #FF0000;
  color: #20262E;
  display: inline-block;
  vertical-align: middle;
}
#risc{
  width: 90px;
}
._bs{
	box-sizing: border-box;
  --border: 3px solid #f5f5f5;
  border-radius:0.3rem;
  padding: 2px;
  margin: 2px;
  --height:40%
}
._bs1{
  padding: 1px 0px 1px 1px;
  font-size: 14px;
}
.l1,.l2,.l3{
  font-size: 14px; 
  display: inline;
}
.l2{
  color: #26a69a;
}
.l3{
  color: #ef5350;
}

.l_1,.l_2,.l_4{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
align-content: center;
flex-basis:100%;
min-height: 40px;
}

.l_5{
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 5px 0px;
}

.l_2{
justify-content: center;
}
.l_3{
padding: 5px 3px 5px 3px;
min-width: 45px;
}
.txt{
  display: flex;
  align-items: center;   /* vertical */
  justify-content: center; /* horizontal (optional) */
  color:#000;
  min-width:40px;
  font-size:14px;
  margin: 0px 5px 0px 5px;
  text-align: center;
  height: 47px;
}
.l_4{
  --display: inline-block;
}

.txt1{
margin-top: 0;
margin-bottom: 2px;
-webkit-margin-start: 2px;
margin-inline-start: 2px;
-webkit-margin-end: 0;
margin-inline-end: 0;
display: flex;
align-items: center;
height: 20px;
font-size: 12px;
font-family: sans-serif;
}
.txt2{
display: flex;
align-items: center;
flex-wrap: nowrap;
white-space: nowrap;
-webkit-padding-start: 4px;
padding-inline-start: 4px;
font-size: 14px;
font-weight: bold;
font-family: sans-serif;
}
.txt3{
font-size: 12px;
font-weight: normal;
}
.txt4{
font-size: 12px;
font-weight: bold;
line-height:1.1rem;
}
.txtg{
color:#26a69a;
}
.txtr{
color:#ef5350;
}

.m_right1{
  width: 240px;
  margin:0px 0px 0px 0px;
  height: calc(100vh - 47px);
  overflow: auto;
	scrollbar-width: none;
	background:#ffffff;
	z-index: 100;
	box-sizing: border-box;
	--border: 3px solid green;
}

.w_main{
  display: flex;
  border: 1px solid #cbd5e0;
	height:100%;
	width:100%;
	--max-height: calc(100vh - 44px);
	box-sizing: border-box;
	--border: 3px solid blue;
	overflow: auto;
}

.w_mainf{
  display: flex;
		flex-direction: column;
  border: 1px solid #cbd5e0;
	height:100%;
	max-height: calc(100vh - 45px);
	box-sizing: border-box;
	--border: 3px solid blue;
	overflow: auto;
}

#w_left{
  /* Take the remaining width */
  flex: 1 1 auto;   /* can grow and shrink */
  min-width: 40px;     /* REQUIRED to allow shrinking */
  overflow: hidden;
  position: relative;
	box-sizing: border-box;
	--border: 3px solid purple;
}
#chart{
  width: 100%;
  height: 100%;
  min-width: 10px;
  align-items: center;
  display: flex;
  justify-content: center;
  overflow:hidden;
	position: absolute;
	inset: 0;
	z-index: 1;
	background: transparent !important;
}

#o_sessions{
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
/* Table */
.tbl1{
  margin: 15px 0;
  font-size: 0.9em;
  font-family: sans-serif;
  width: 100%;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  border-radius:0.4rem;
  --border-collapse: collapse;
}
.tbl1 th {
  background-color: #d3d3d3;
  color: #ffffff;
  text-align: left;
  --border-radius:0.3rem;
}
.tbl1 th,.tbl1 td {
  padding: 5px 5px;
}
.tbl1 tbody tr {
  border-bottom: 1px solid #dddddd;
}
.tbl1 tbody tr:nth-of-type(even) {
  background-color: #f3f3f3;
}
.tbl1 tbody tr:last-of-type {
  border-bottom: 2px solid #009879;
}
.tbl1 tbody tr.active-row {
  font-weight: bold;
  color: #009879;
}
.box1{
  position: absolute;
  bottom: 100%;
  left: 100%;
  margin-left: 10px;
  background-color: #ffffff;
  padding: 10px 6px;
  border-radius: 4px;
  color: #000000;
  font-size: 14px;
  border: 1px solid #696969;
  min-width: 110px;
  transform: none;
}

.s_w
{
  width: 100%;
	height: 100%;
}