:root {
  --ev-show-type0: table-row;
  --ev-show-type1: table-row;
  --ev-show-type2: table-row;
  --ev-show-type3: table-row;
  --ev-show-type4: table-row;
  --ev-show-type5: table-row;
  --ev-show-type6: none;
  --ev-show-type7: table-row;
  --ev-show-type8: table-row;
  --ev-show-type-rpn-bearing: table-row;
  --ev-show-type-rpn-scan: table-row;
  --font-size: 0.7vw;
}

input[type="checkbox"] {
  width: calc(var(--font-size)*0.9);
  height: calc(var(--font-size)*0.9);
}

body
{
	margin: 0;
	padding: 0;
	overflow: hidden;
	font-size: 2vh;
	font-family: 'Roboto Condensed', Тahoma, sans-serif;
	color: #f3f0f0;
}

.loginform{	
	padding-top: 5vh;
	height: 100dvh;
	font-size: 2vh;
	text-align: center;
	background-color: #113743;
}

.banner{	
	padding-top: 10dvh;
	border: 1px solid;
	left: 10dvw;
	top: 10dvh;
	height: 70dvh;
	width: 80dvw;
	font-size: 5vh;
	text-align: center;
	background-color: #113743;
	position: absolute;
	z-index: 100;
}

.container_h {
	font-size: var(--font-size);
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0;
	background-color: #113743;
	position: relative; /* Makes this the reference point for absolute children */
}

.container_v {
	font-size: var(--font-size);
	display: grid;
	grid-template-rows: 70dvh 30dvh;
	gap: 0;
	background-color: #113743;
}

.container_v .rbr {
	display:none;
}
.container_v .rbrs {
}

.container_h .rbr {
}
.container_h .rbrs {
	display:none;
}

.box-list {
	order: 1;
	display: flex;
	flex-direction: column;
	height: 100dvh;
	position: relative; /* Makes this the reference point for absolute children */
}

.container_h .top-right-btn
{
	position: absolute;
	top: 50%;
	right: 0;
	z-index: 10;
	font-size: calc(var(--font-size)*1.1);
	margin: calc(var(--font-size)*0.2);
	padding: calc(var(--font-size)*1) 0;
	text-decoration: none;
	color: #f3f0f0;
	border-radius: calc(var(--font-size)*0.3);
	/*background: #113743;*/
	background: #287ac1;
	cursor: pointer;
	border: 1px solid #f3f6f9;
	overflow: hidden;


}

.top-right-btn:hover
{
	color: #f3f0f0;
	background: #a82a21;
}
.container_h .top-left-btn
{
	position: absolute;
	top: 50%;
	left: 0;
	z-index: 10;
	font-size: calc(var(--font-size)*1.1);
	margin: calc(var(--font-size)*0.2);
	padding: calc(var(--font-size)*1) 0;
	text-decoration: none;
	color: #f3f0f0;
	border-radius: calc(var(--font-size)*0.3);
	/*background: #113743;*/
	background: #287ac1;
	cursor: pointer;
	border: 1px solid #f3f6f9;
	overflow: hidden;
}
.top-left-btn:hover
{
	color: #f3f0f0;
	background: #a82a21;
}



.container_v .top-right-btn
{
	display: none;
}

.container2 {
	order: 2;
	display: grid;
	grid-template-rows: auto 1fr;
	gap: 0;
	background-color: #113743;
}

.box-system {
	display: grid;
	grid-template-columns: 1fr auto calc(var(--font-size)*6);
	gap: 0.5vw;
	background-color: #113743;
	padding: 4px;
}

.box-system1 {
}

.box-system2 {
}

.box-system3 {
  display: grid;
  place-items: center; /* Centers horizontally and vertically */
}


.box-list-scroller {
	flex-grow: 1;    /* Forces child to take up remaining height */
	height: 0;       /* Essential trick: forces the browser to calculate overflow based on flex basis */
	overflow-y: auto; /* Enables vertical scrolling when content overflows */
	overflow-x: hidden; /* Enables vertical scrolling when content overflows */
}

table, th, td {
	border: 1px solid #7F7F7F;
	border-collapse: collapse;
	border-radius: 0px;
	padding: calc(var(--font-size)*0.3);
}

thead {
	position: -webkit-sticky;
	position: sticky;
	top: -1px; // при нуле в chrome остаётся странный зазор
	z-index: 2;
	background-color: #113743;
	/*height: 5vh;*/
}
th {
  /* Remove default borders if any */
  border: none; 

  /* Simulate vertical and horizontal borders using box-shadow */
  /* Syntax: inset X-offset Y-offset blur spread color */
  box-shadow: inset -1px 0 0 #dee2e6,  /* Right vertical border */
              inset 0 -1px 0 #dee2e6;  /* Bottom horizontal border */
}

.log_tab_row {
} 

.log_tab_cell {
}


.target_cell {
/*  text-shadow:
    1px 1px 0 #000,
    -1px 1px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000;*/
  color: #FF0000;
  -webkit-text-stroke: 3px #000000; 
  paint-order: stroke fill;
  font-size: calc(var(--font-size)*1.4);
  padding: calc(var(--font-size)*0.5);
  padding-bottom: calc(var(--font-size)*1);
  position: relative;
}

.target_cell::after {
  content: attr(data-text);
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, -100%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid var(--xcolor);
}

select {
	font-size: calc(var(--font-size)*1);
	margin: calc(var(--font-size)*0.2);
	padding: calc(var(--font-size)*0.2);
	text-decoration: none;
	color: #f3f0f0;
	border-radius: calc(var(--font-size)*0.3);
	background: #287ac1;
	cursor: pointer;
	border: 1px solid #f3f6f9;
	overflow: hidden;
}


.zoom_btn {
	font-size: calc(var(--font-size)*1.1);
	margin: calc(var(--font-size)*0.2);
	padding: calc(var(--font-size)*0.2);
	text-decoration: none;
	color: #f3f0f0;
	border-radius: calc(var(--font-size)*0.3);
	background: #287ac1;
	cursor: pointer;
	border: 1px solid #f3f6f9;
	overflow: hidden;
}
.zoom_btn:hover/*,
.zoom_btn:active,
.zoom_btn:focus*/{
	color: #f3f0f0;
	background: #a82a21;
}
.zoom_btn:disabled {
	background: #7d8286;
}

/* width */
::-webkit-scrollbar {
	width: 0.3vw;
	height: 2vh;
}

/* Track */
::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px #c5beba; 
	background:#e4e3db;
	border-radius: 1px;
	
}
 
/* Handle */
::-webkit-scrollbar-thumb {
	background: #11374380; 
	border-radius: 5px;
	border-color: #113743;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: #25454e77; 
}

.box-system3 img {
	width: calc(var(--font-size)*3.5); /* Image won't be larger than its container */
	height: auto;    /* Maintains aspect ratio */
	object-fit: contain; /* or 'contain', 'fill', etc. */
}

.track-map {
	width: 100dvw;
	height: 100dvh;
}