:root {
	--global-back: #808080;
	--global-rcbord: #fff;
	--global-sigbord: #000;
	--global-bttext: #000;
	--global-text: #000;
	--global-platback: #b2b2b2;
	--global-platbord: #000;
	--global-rc-free: #000;
	--global-rc-route: #008000;
	--global-rc-occupied: #fff;
	--global-sw: #595959;
	--global-btback: #b2b2b2;
	--global-btbordlight: #eee;
	--global-btborddark: #808080;
	--global-arrow: #ddd;
	--global-izv: #9f9d9f;
	--global-blue: #0000ff;
	--global-lime: #00ff00;
	--global-lawngreen: lawngreen;
	--global-greenyellow: greenyellow;
	--global-yellow: #ffff00;
	--global-red: #ff0000;
	--global-black: #000;
	--global-white: #fff;
	--global-unstated: #b2b2b2;
	--global-axis-light: #fff;
	--global-axis-dark: #000;
	font-weight: bold;
	--signal-leg: 7px;
}
[data-theme="dark"] {
	--global-back: #262626;
	--global-rcbord: #808080;
	--global-sigbord: #808080;
	--global-text: #a0a0a0;
	--global-bttext: #c0c0c0;
	--global-platback: #121212;
	--global-platbord: #404040;
	--global-rc-free: #121212;
	--global-rc-route: #006000;
	--global-rc-occupied: #eee;
	--global-sw: #282828;
	--global-btback: #404040;
	--global-btbordlight: #808080;
	--global-btborddark: #202020;
	--global-arrow: #404040;
	--global-izv: #656565;
	--global-blue: #08f;
	--global-lime: rgb(0, 200, 0);
	--global-lawngreen: hsl(90, 100%, 45%);
	--global-greenyellow: hsl(80, 100%, 45%);
	--global-yellow: orange;
	--global-red: rgb(220, 0, 0);
	--global-black: #603030;
	--global-white: #eee;
	--global-unstated: #808080;
	--global-axis-light: #808080;
	--global-axis-dark: #121212;
	font-weight: normal;
}
[data-theme="spb"] {
	--global-back: rgb(117,117,117);
	--global-rcbord: #000;
	--global-sigbord: #fff;
	--global-platback: #646464;
	--global-platbord: #000;
	--global-rc-free: #afafb9;
	--global-rc-route: #fdfd47;
	--global-rc-occupied: #ff4646;
	--global-btback: #b2b2b2;
	--global-btbordlight: #eee;
	--global-btborddark: #808080;
	--global-arrow: #ddd;
	--global-blue: rgb(72,122,245);
	--global-lime: #00ff00;
	--global-yellow: #ffff00;
	--global-red: #ff0000;
	--global-black: #000;
}

[data-arm="station"] {
	font-weight: normal;
	--signal-leg: 12px;
}

body{
	margin: 0px;
	width: 100%;
	user-select: none;
	-webkit-user-select: none;
	font-family: Arial, Helvetica, sans-serif;
	/*font-family: 'Bahnschrift';*/
	background: var(--global-back);
	color:var(--global-text);
}

img{
	position: absolute;
}

.menubar{
	height: 24px;
	width:  auto;
	background: var(--global-arrow);
	position: absolute;
	padding: 2px;
}
.menuitem{
	display: inline-block;
	margin-top: 2px;
	font-weight: normal;
}
.menuitem > button{
	display: inline-block;
	margin-top: 1px;
	border-radius: 0px;
	height: 20px;
	background: #fff7ef;
}
.logform{
	/*display: none;*/
	width: 154px;
	background: #d0c9c3;
}
.elbox{
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	/*overflow:auto;*/
}
.axiscircle{
	border-radius: 50%;
	position: absolute;
	background : linear-gradient(to right, var(--global-axis-dark) 50%, var(--global-axis-light) 50%);
}
.outeraxiscircle{
	border:1px solid var(--global-sigbord);
}
.arrow-back{
	background:black;
	position:absolute;
}
.arrow{
	background:var(--global-arrow);
	position:absolute;
}
.arrow-box{
	background:var(--global-arrow);
	border:1px solid var(--global-platbord);
	position:absolute;
	z-index:-1;
}
.arrow-text{
	justify-content:center;
	align-content:center;
	position:absolute;
	z-index:1;
	font-size:10px;
	font-style:italic;
	line-height:10px;
	white-space:nowrap;
}
.arrow-text-left{
	margin-left:2px;
}
.arrow-text-right{
	margin-right:10px;
}
a:visited,a {

	color: var(--global-text);
	text-decoration: none;
}
.platformback{
	position: absolute;
	border: 2px solid var(--global-platbord);
	background-color: var(--global-platback);
}
.namestrip {
	padding: 0 50px 0;
	height: 40px;
	background: var(--global-arrow);
	font-size: 24px;
	font-weight: bold;
	min-width: max-content;
}
.namestrip-small {
	padding: 0 28px 0;
	height: 22px;
	font-size: 12px;
	font-weight: normal;
}
.interval {
	font-weight: normal;
}

.intervalback{
	position: absolute;
	background-color: #595959;
	border: 1px var(--global-rcbord) solid;
	width: 44px;
	height: 20px;
}

[data-theme="dark"] .intervalback {
	background-color: var(--global-back);
	border: 1px black solid;
}

.intervaltext{
	position: absolute;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: rgb(0, 255, 0);
	z-index: 1;
	font-size: 16px;
	margin-top: 1px;
}
.controlbox{
	position: absolute;
	background-color: #000000;
	border: 1px var(--global-rcbord) solid;
	cursor: pointer;
}
[data-theme="dark"] .controlbox {
	border: 1px black solid;
}
.controlbox::after{
	color: red;
	content: "У";
	position: absolute;
	display: inline-block;
	top: 50%;
	left: 0;
	right: 0;
	bottom: 50%;
	margin: auto;
	width: 100%;
	height: 50%;
	font-weight: bold;
	font-size: 10px;
}
.DU{
	background-color: var(--global-lime);
}
.DU::after{
	color: black;
	content: "ДУ";

}
.MU{
	background-color: var(--global-white);
	border: 1px solid rgb(255, 199, 199);
}

.MU::after{
	color: #f00;
	content: "MУ";
}
.MUT{
	background-color: var(--global-white);
	border: 1px solid rgb(255, 199, 199);
}

.MUT::after{
	color: #f00;
	content: "MУ-Т";
	top: 62%;
	font-size: 8px;
}
.DMU{
	background: linear-gradient(135deg, var(--global-lime) 50%, var(--global-white) 50%);
	border: 1px solid rgb(255, 199, 199);
}

.DMU::after{
	color: rgb(0, 0, 0);
	content: "ДMУ";
	font-size: 9px;
}
.controlboxbig::after{
	color: red;
	content: "У";
	font-size: 16px;
	position: absolute;
	display: inline-block;
	top: 60%;
	left: 0;
	right: 0;
	bottom: 40%;
	margin: auto;
	width: 100%;
	height: 60%;

}
.DUbig{
	background-color: var(--global-lime);
}
.DUbig::after{
	color: black;
	content: "ДУ";
	font-size: 16px;

}
.MUbig{
	background-color: var(--global-white);
	border: 1px solid rgb(255, 199, 199);
}

.MUbig::after{
	color: #f00;
	content: "MУ";
}
.MUTbig{
	background-color: var(--global-white);
	border: 1px solid rgb(255, 199, 199);
}

.MUTbig::after{
	color: #f00;
	content: "MУ-Т";
	font-size: 15px;
}
.DMUbig{
	background: linear-gradient(135deg, var(--global-lime) 50%, var(--global-white) 50%);
	border: 1px solid rgb(255, 199, 199);
}

.DMUbig::after{
	color: rgb(0, 0, 0);
	content: "ДMУ";
}
.gmodStatus{
	width: 62px;
	background-color: #08f;
	text-align: center;
	font-weight: bold;
	color: white;
}
.gmodStatus > p{
	margin: 0;
}
.controltext{
	position: absolute;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: red;
	z-index: 1;
}
.shapeoutside{

	clip-path: polygon(0% 0%, 30% 0%, 30% 10%, 50% -10%, 30% -20%, 0% -20%);

}
.cursorblock{
	cursor: not-allowed;
}
.sect{
	background: var(--global-rc-free);
	border: 1px solid var(--global-rcbord);
	z-index: 1;
	display: flex;
    justify-content: center;
	align-items: center;
}
.rcg{
	z-index: 2;
	background-color: var(--global-rc-route);
	/*box-shadow: 0px 0px 0px 1px #808080;*/
}
.rcy{
	z-index: 2;
	background-color: #00AA72;
	/*box-shadow: 0px 0px 0px 1px #808080;*/
}
.rco{
	z-index: 2;
	background-color: var(--global-rc-occupied);
	border-left:1px solid #808080;
	border-right:1px solid #808080;
}
[data-arm="station"] .rco {
	border: 1px solid var(--global-rcbord);
}
.rcur {
	font-size: 10px;
	height: 100%;
	font-weight: normal;
	position: absolute;
}

[data-arm="station"] .rcur {
	font-size: 12px;
}

.rctext {
	position: absolute;
	top: 8px;
	font-size: 8px;
	font-style: italic;
}
[data-arm="station"] .rctext {
	top: 16px;
	font-size: 14px;
}
.swt{
	background: var(--global-sw);
	border: 1px solid var(--global-rcbord);
	cursor: pointer;
}
.sig{
	height: 100%;
	position: absolute;
}
.sigleg{
	position: absolute;
	background: var(--global-sigbord);
	right: 0px;
	height: 1px;
	width: var(--signal-leg);
}
.siglev{
	position: absolute;
	background: var(--global-sigbord);
	right: 0px;
	bottom: 0px;
	width: 1px;
}
.siglen{
	position: absolute;
	bottom: 0px;
	border: 1px solid var(--global-sigbord);
	border-radius: 50%;
}
.pointer {
	position: absolute;
	color: var(--global-yellow);
	text-align: center;
	vertical-align: middle;
	width: 100%;
	top: 0.1em;
}
.pointer-ps {
	color: black;
}
.cellwrap{
	display: table-cell;
	position: relative;
}
.linewrap{
	width: max-content;
	position: absolute;
}
.fr{
	box-shadow: 0px 0px 0px 3px var(--global-red);
	animation-name: fr;
	animation-duration: 0.5s;
	animation-iteration-count: infinite;
	animation-timing-function: step-end
}
.frps{
	border: 2px solid var(--global-red);
	animation-name: frps;
	animation-duration: 0.5s;
	animation-iteration-count: infinite;
	animation-timing-function: step-end
}
.bt{
	width: 22px;
	height: 22px;
	background-color: var(--global-btback);
	position: absolute;
	border: 3px solid;
	border-left-color: var(--global-btbordlight);
	border-top-color: var(--global-btbordlight);
	border-right-color: var(--global-btborddark);
	border-bottom-color: var(--global-btborddark);
	box-shadow: 0px 0px 1px 0px rgba(0,0,0,1), 1px 1px 0px 1px rgba(0,0,0,1);
	font-size: 18px;
	text-align: center;
	cursor: pointer;
	color: var(--global-bttext);
	/* line-height: 100%; */
}
.btmin{
	border-width: 2px;
	box-shadow: 0px 0px 1px 0px rgb(0 0 0), 1px 1px 1px 0px rgb(0 0 0);
	font-size: 10px;
	line-height: 1.2em;
}
.btvs{
	border-width: 3px;
	font-size: 13px;
	line-height: unset;
}
.btps{
	border-radius: 50%;
    background-color: #929292;
}
[data-theme="dark"] .btps {
	background-color: #595959;
}
.btpson{
    background-color: white;
}
.cell {
	border: 1px solid;
	border-left-color: black !important;
	border-top-color: black !important;
	border-right-color: var(--global-btbordlight) !important;
	border-bottom-color: var(--global-btbordlight) !important;
	background-color: var(--global-back);
	box-shadow: none;
	font-size: 12px;
	height: 16px;
	width: 73px;
	line-height: 16px;
	text-align: left;
	padding-left: 2px;
}

.rh{
	width: 36px;
	height: 21px;
}
.rv{
	width: 22px;
	height: 37px;
}
.blk{
	background-color: #000000;
	color: #fff;
}
.wht{
	background-color: #fff;
	color: #f00;
}

[data-theme="dark"] .wht {
	font-weight: bold;
	background-color: #eee;
	border-left-color: #eee;
	border-top-color: #eee;
	border-right-color: #808080;
	border-bottom-color: #808080;
}

.red{
	background-color: var(--global-red);
	border-left-color: #f88;
	border-top-color: #f88;
	border-right-color: #800000;
	border-bottom-color: #800000;
	color: black;
}

[data-theme="dark"] .red{
	background-color: var(--global-red);
	border-left-color: hsl(0, 100%, 67%);
	border-top-color: hsl(0, 100%, 67%);
	border-right-color: hsl(0, 100%, 20%);
	border-bottom-color: hsl(0, 100%, 20%);
	color: black;
	font-weight: bold;
}

[data-arm="station"] .red {
	font-weight: normal;
}
/*.yel{
	background-color: #ffff00;
	border-left-color: #ffffdd;
	border-top-color: #ffffdd;
	border-right-color: #cccc00;
	border-bottom-color: #cccc00;
}*/
.yel{
	background-color: #ff0;
	border-left-color: #ffffdd;
	border-top-color: #ffffdd;
	border-right-color: #cccc00;
	border-bottom-color: #cccc00;
	color: black;
}
[data-theme="dark"] .yel,
[data-theme="dark"] .wht.ao,
[data-theme="dark"] .wht.az,
[data-theme="dark"] .wht.ak
 {
	background-color: hsl(39, 100%, 50%);
	border-left-color: hsl(39, 100%, 80%);
	border-top-color: hsl(39, 100%, 80%);
	border-right-color: hsl(39, 100%, 30%);
	border-bottom-color: hsl(39, 100%, 30%);
	color: black;
	font-weight: normal;
}

.grn{
	background-color: #66ff33;
	border-left-color: #c9ffc9;
	border-top-color: #c9ffc9;
	border-right-color: #009900;
	border-bottom-color: #009900;
	color: black;
}
[data-theme="dark"] .grn,
[data-theme="dark"] .wht.ad {
	background-color: var(--global-lime);
	border-left-color: hsl(120, 100%, 70%);
	border-top-color: hsl(120, 100%, 70%);
	border-right-color: hsl(120, 100%, 20%);
	border-bottom-color: hsl(120, 100%, 20%);
	color: black;
	font-weight: normal;
}
.blu{
	background-color: #0000ff;
	border-left-color: #08f;
	border-top-color: #08f;
	border-right-color: #000080;
	border-bottom-color: #000080;
	color: white;
}
[data-theme="dark"] .blu {
	background-color: var(--global-blue);
	border-left-color: #00acff;
	border-top-color: #00acff;
	border-right-color: #003e9f;
	border-bottom-color: #003e9f;
}

.rc{
	z-index: 2;
	position: absolute;
	height: 12px;
	background-color: #000;
	border: 1px solid #fff;
	/*box-shadow: 0px 0px 0px 1px #808080;*/
}
.sw{
	z-index: 3;
	position: absolute;
	height: 12px;
	background-color: #595959;
	border: 1px solid #fff;
}
.swp{
	/*background-color: #33cc33;*/
	background-color: var(--global-lime);
}
.swm{
	background-color: var(--global-yellow);
}
.swc{
	background-color: var(--global-red);
}
.dir{
	color: #0f0;
}
.hide{
	display: none;
}
@keyframes fr{
  0% {box-shadow: 0px 0px 1px 0px black, 1px 1px 0px 1px black, 0px 0px 0px 4px var(--global-back), 0px 0px 0px 7px var(--global-red);}
  50% {box-shadow: 0px 0px 1px 0px black, 1px 1px 0px 1px black;}
}
@keyframes frps{
  0% {border: 2px solid var(--global-red);}
  50% {border: 2px solid transparent;}
}
@keyframes frpp{
  0% {box-shadow: 0px 0px 1px 0px black, 1px 1px 0px 1px black, 0px 0px 0px 4px var(--global-back), 0px 0px 0px 7px rgb(255, 174, 0);}
  50% {box-shadow: 0px 0px 1px 0px black, 1px 1px 0px 1px black;}
}
.rn{
	color: lime;
	font-size: 20px;
	font-weight: normal;
	position: absolute;
	bottom: 12px;
	display: flex;
	transform: translateX(-50%);
    left: 50%;
	padding: 0 2px;
}
[data-arm="station"] .rn {
	font-size: 28px;
}
.frend {
	box-shadow: 0px 0px 0px 1px var(--global-lime);
}
.frpp{
	box-shadow: 0px 0px 0px 1px rgb(255, 136, 0);
	animation-iteration-count: initial;
}
.frgok {
	box-shadow: 0px 0px 0px 1px var(--global-red);
}

/* .lamp_bord:before{
	border: 1px solid white;
	border-radius: 50%;
	background: linear-gradient(135deg, rgb(95,95,95), var(--global-rcbord));
	width:18px;
	height:18px;
	position: absolute;
	z-index: 1;
	content: '';
    left: 3px;
    top: 3px;
} */
.lamp{
	border: 1px solid black;
	border-radius: 50%;
	background: var(--global-back);
	width:18px;
	height:18px;
	position: absolute;
    left: 4px;
    top: 4px;
    font-size: 18px;
    text-align: center;
}

.lamp:before {
	border: 1px solid black;
	border-radius: 50%;
	background: linear-gradient(-45deg, rgb(95, 95, 95), var(--global-rcbord));
	width: 26px;
	height: 26px;
	position: absolute;
	left: -5px;
	top: -5px;
	z-index: -1;
	content: '';
}

.lamp_bord {
	width: 28px;
	height: 28px;
	position: absolute;
	top: -2px;
	left: -2px;
	border: 2px solid transparent;
}

[data-theme="dark"] .lamp:before {
/* [data-theme="dark"] .lamp_bord { */
	background: linear-gradient(-45deg, rgb(29, 29, 29), var(--global-text));
}

.lamp_min{
	width:12px;
	height:12px;
}
.lampKV{
	background: rgb(178,178,178);
	cursor: pointer;
}
.lampKV_act{
	background: rgb(255,0,0);
}
.lamp_act{
	background: rgb(208,208,0);
}
.lime {
	background: var(--global-lime);
	color: black;
}
.lim {
	background-color: rgb(0, 200, 0);
	border-left-color: hsl(120, 100%, 70%);
	border-top-color: hsl(120, 100%, 70%);
	border-right-color: hsl(120, 100%, 20%);
	border-bottom-color: hsl(120, 100%, 20%);
}

.white {
	background: var(--global-white);
	color: black;
}
.yellow {
	background: var(--global-yellow);
	color: black;
}

.clickable {
	cursor: pointer;
}

.stLine {
	position: absolute;
	padding: 0;
}
.stLineStation {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	border: 1px solid gray;
	display: inline-block;
	/* width: 2px; */
	height: 25px;
	font-weight: bold;
	text-align: center;
	padding-left: 5px;
	padding-right: 5px;
}
.stLineStation > a {
	width: 100%;
	display: block;
	height: 100%;
	line-height: 150%;
	margin: auto;
}