body {
	margin: 0px;
	font-family: system-ui;
}

:root {
	--top-height: 34px;
	--side-width: 37px;
	--bottom-height: 1px;
	--menu-bg-color: #333;
	--menu-fg-color: linen;

    --track-bg: #939393;
    --track-color-select: #F88;
    --track-color-selectframe: #00F;
    --track-border: #000;
	--track-color: #BBB;
	--track-color-locked: #FF0;
	--track-color-closed: #F00;
	--track-color-error: deeppink;
	--track-text: lightblue;
	--track-connector: #FFF;
	--track-element-fg: #FFF;
	--track-element-fgborder: #000;
	--block-bg: #DDD;
	--block-fg: #000;
	--block-bg-locked: #FF0;
	--block-fg-locked: #000;
    --block-bg-closed: #800;
    --block-fg-closed: #FFF;
    --turnout-this: var(--track-color);
    --turnout-other: #666;
    --sensor-active: #0F0;
    --sensor-inactive: #666;
}

.page_side {
	position: absolute;
	top: var(--top-height);
	left: 0px;
	width: var(--side-width);
	height: calc(100vh - var(--top-height) - var(--bottom-height));
	max-height: calc(100vh - var(--top-height) - var(--bottom-height));
	color: var(--menu-fg-color);
	background: var(--menu-bg-color);
}

.side_btn_mode {
  background-color: lightgray;
  padding: 0px 0px;
  margin: 0px 0px;
}

.side_btn_cmd {
  background-color: lightgray;
  padding: 0px 0px;
  margin: 0px 0px;
}

.side_btn {
  background-color: lightgray;
  padding: 0px 0px;
  margin: 0px 0px;
}


.side_btn_selected{
  background-color: gray;
  padding: 0px 0px;
  margin: 0px 0px;
}

.side_btn_poweron{
  background-color: lightgreen;
  padding: 0px 0px;
  margin: 0px 0px;
}

.side_btn_poweroff{
  background-color: lightgray;
  padding: 0px 0px;
  margin: 0px 0px;
}

.side_btn_shortcircuit{
  background-color: red;
  padding: 0px 0px;
  margin: 0px 0px;
}

.side_btn_stop{
  background-color: yellow;
  padding: 0px 0px;
  margin: 0px 0px;
}

.side_btn:hover {
  background-color: white;
}
.side_btn_mode:hover {
  background-color: white;
}


.page_main {
	position: absolute;
	top: var(--top-height);
	left: var(--side-width);
	width: calc(100vw - var(--side-width));
	height: calc(100vh - var(--top-height) - var(--bottom-height));
	background: lightgray;
	overflow: auto;
}

.page_bottom {
	position: absolute;
	top: calc(100vh - var(--bottom-height));
	left: 0px;
	height: var(--bottom-height);
	width: 100vw;
	background: var(--menu-bg-color);
	color: var(--menu-fg-color);
	overflow: auto;
}

.navbar {
  overflow: hidden;
  color: var(--menu-fg-color);
  background: var(--menu-bg-color);
}


.navbar a {
  float: left;
  font-size: 16px;
  color: var(--menu-fg-color);
  text-align: center;
  padding: 8px 8px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: var(--menu-fg-color);
  padding: 8px 8px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: blue;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 8px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}