body {
	background-color: #10100d;
	color: black;
	margin: 0px;
	min-height: 100%;
	position: relative;
	padding: 0px 0px 10px 0px; /* make some space for panel resizing  */
}

HTML {
	scrollbar-width: none;
}

/* preload graphics */
body::after {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
	z-index: -1;
	content:
		url("/static/graph/icon-menu.png")
		url("/static/graph/battery.png")
		url("/static/graph/discovery_stopped.svg")
		url("/static/graph/discovery.svg")
		url("/static/graph/gamepad.png")
		url("/static/graph/graph.png")
		url("/static/graph/icon-check.png")
		url("/static/graph/icon-config-thicker.png")
		url("/static/graph/icon-edit.png")
		url("/static/graph/icon-fullscreen.png")
		url("/static/graph/icon-menu-thicker.png")
		url("/static/graph/icon-menu.png")
		url("/static/graph/icon-play-pause.png")
		url("/static/graph/icon-plus.png")
		url("/static/graph/icon-rotate.png")
		url("/static/graph/icon-settings.png")
		url("/static/graph/icon-trash.png")
		url("/static/graph/icon-video.png")
		url("/static/graph/keyboard.png")
		url("/static/graph/menu-arrow.png")
		url("/static/graph/remove.png") 
		url("/static/graph/touch-input-black.png")
		url("/static/graph/touch-input.png")
		url("/static/graph/user-input.png")
		url("/static/graph/wifi.png")
		url("/static/graph/warning.svg")
		url("/static/graph/spinner-params.svg")
		url("/static/graph/icon-unpin.svg")
		url("/static/graph/icon-info.svg")
		url("/static/graph/icon-focus.svg")
		url("/static/graph/icon-focus-on.svg")
		url("/static/graph/icon-isometric.svg")
		url("/static/graph/icon-perspective.svg")
		url("/static/graph/icon-label.svg")
		url("/static/graph/icon-label-on.svg")
		url("/static/graph/icon-view.svg")
		url("/static/graph/icon-external-link.svg")
		url("/static/graph/phantom-cybernetics-logo-white.svg")
		url("/static/graph/dead-robot.svg")
		url("/static/graph/bridge-logo.svg")
		url('/static/graph/robot-queued.svg')
		url('/static/graph/icon-lock.svg')
		;
}

BODY.desktop-ui {
	min-height: calc(100% - 70px);
}

BODY.no-scroll,
BODY.waiting,
BODY.touch-gamepad,
BODY.touch-ui.gamepad-editing {
	overflow: hidden;
	touch-action: none;
}

.msgTypes {
	color: gray;
}

.offline {
	color: red;
}

.connecting {
	color: yellow;
}

.online, .online-p2p {
	color: lime;
}

.online-relay{
	color: yellow;
}

h1 {
	margin: 0px;
	color: #9bc200;
	background: #013669;
	display: block;
	float: left;
	border-radius: 5px;
	padding: 3px 10px;
	margin: 5px 5px 5px 10px;
	position: relative;
}

body.hamburger h1 {
	padding-left: 45px;
}

h1 .label {
	display: block;
	overflow: hidden;
	text-overflow: clip;
	white-space: nowrap;
	height: 35px;
	line-height: 35px;
	font-size: 28px;
	/* min-width: 200px; */
}

h1 .label.opens-about-dialog {
	cursor: help;
}

h1 .label.smaller {
	/* text-overflow: unset; */
	/* white-space: unset; */
	/*  clip; */
	/* white-space: nowrap; */

	min-width: 60px;
	font-size: 17px;
	line-height: 35px;
}

h3 {
	margin: 0px;
	padding: 0px;
	display: inline;
}

#msg_type_filter {
	width: 300px;
	text-align: right;
	float: right;
	display: none;
}

.prevent-select,
.touch_buttons .btn,
#gamepad_settings .tab {
	user-select: none; /* Standard syntax */
	-webkit-user-select: none; /* Safari */
	-webkit-text-select: none;
	-ms-user-select: none; /* IE 10 and IE 11 */
	-moz-user-select: none;
	-webkit-tap-highlight-color: transparent; /* removes the highlight on overlays on mobile opera */
}

#fixed-header {
	position: fixed;
	z-index: 16; /* above hovered grid panel (15) */
	background: #000000d6;
	width: 100%;
	left: 0px;
	top: 0px;
	height: 55px;
	overscroll-behavior: contain;
}

BODY.desktop-ui.menu-cancels-scroll {
	overflow: hidden; /* no body scrolling when mouse is over fixed-header */
}

/* BODY.hamburger #fixed-header {
    height: 95px;
} */

#fixed-left {
	float: left;
	/* background-color: red; */
	height: 50px;
	position: relative;
	padding-right: 0px;
	/* z-index: 36; */
	z-index: 41; /* above gamepad config panel & notifications */
	display: none;
}

#fixed-center {
	/* background-color: green; */
	position: relative;
	height: 50px;

	margin-right: 0px; /* set to fixed-right width on resize */
	margin-left: 0px; /* set to fixed-left width on resize */
	z-index: 42; /* above notifications */
}

#fixed-right {
	float: right;
	/* background-color: blue; */
	/* height: 50px; */
	/* background-color: blue; */
	height: 50px;
}

#fixed-right.btns-4 {
	width: 256px;
}

#fixed-right.btns-3 {
	width: 192px;
}

#fixed-right.btns-2 {
	width: 128px;
	margin-right: 0px;
}

#fixed-right.btns-1 {
	width: 50px;
}

#menubar {
	position: relative;
	z-index: 35;
	top: 0px;
	display: none;
	height: 50px;
	text-align: center;
}

BODY.initiated #menubar,
BODY.initiated #fixed-left {
	display: block;
}

BODY.hamburger #fixed-center {
	position: static;
}

BODY.hamburger #menubar {
	top: 11px;
	left: 0px;
	position: absolute;
	margin-left: 0px;
	z-index: 81;
	width: 100%;
	height: auto;
	text-align: left;
}

BODY.hamburger #menubar_content {
	position: relative;
	margin-left: 16px;
}

BODY.hamburger #menubar_hamburger {
	top: 0px;
	left: 0px;
	position: absolute;
	width: 30px;
	height: 30px;
	margin-left: 0px;
	display: block;
	background-image: url("/static/graph/icon-menu.png");
	background-size: 69px;
	background-position: -36px 0px;
	background-repeat: no-repeat;
	cursor: pointer;
	/* background-color: red; */
}

/* BODY.hamburger.menu-overlay #menubar_content #menubar_hamburger, */
BODY.hamburger #menubar_content:hover #menubar_hamburger {
	/* background-position: -3px 0px; */
	/* background-color: white;
    border-radius: 5px 5px 0px 0px;
    height: 45px; */
}

BODY.hamburger #menubar_content.open #menubar_hamburger {
	background-position: -3px -38px !important;
	/* z-index: 2; */
}

#menubar_items #graph_display.narrow {
	/* width: auto; */
	/* min-width: 300px; */
}

#menubar_items #graph_display.narrow svg,
#menubar_items #graph_display.narrow #graph_nodes {
	display: none; /* no nodes or connections in narrow mode */
}
BODY.hamburger #menubar_scrollable {
	padding-bottom: 10px;
	/* background: red; */
	position: absolute;
	left: 0px;
	padding-left: 20px;
	overflow-y: scroll;
	overflow-x: hidden;
	width: 200vw; /* clipped by parent */
	/* height: calc(-160px + 100vh); */
}

BODY.hamburger #menubar_scrollable.open {
	overflow-y: hidden;
}

#menubar_items #graph_display.narrow #graph_topics {
	width: 100%;
	padding-left: 0px !important;
	float: right;
}

/* affect menu scaling */
BODY.hamburger #menubar_items #service_list {
	max-height: unset;
}
BODY.hamburger #menubar_items #cameras_list {
	max-height: unset;
	max-width: unset;
}
BODY.hamburger #menubar_items #docker_list {
	max-height: unset;
	border-top: 0px;
}
BODY.hamburger #menubar_items #widget_list {
	max-height: unset;
	max-width: unset;
}

BODY.hamburger #menubar_items #widget_list .widget LABEL,
BODY.hamburger #menubar_items #cameras_list .camera LABEL {
	line-height: 22px;
	padding: 15px 0px 15px 40px;
	display: block;
	/* background: red; */
	white-space: normal;
	word-wrap: break-word;
}

BODY.hamburger #menubar_items #widget_list .widget,
BODY.hamburger #menubar_items #cameras_list .camera {
	border-bottom: 1px solid #3d52c7;
	display: block;
	position: relative;
	height: 50px;
	line-height: 50px;
}

BODY.hamburger #menubar_items #cameras_list .camera {
	border-bottom: 1px solid #138408;
}

BODY.hamburger #menubar_items #widget_list .widget INPUT,
BODY.hamburger #menubar_items #cameras_list .camera INPUT {
	position: absolute;
	left: 10px;
	top: 18px;
}

/* #menubar_items #graph_display.narrow #graph_topics .graph_topic:last-of-type{
    padding-bottom: 50px;
} */

#modal-underlay,
#menu-underlay,
#input-underlay,
#input-manager-overlay,
#touch-ui-dialog-underlay,
#msg-type-dialog-underlay,
#dialog-modal-confirm-underlay,
#waiting-dialog-underlay {
	display: none;
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.457);
	z-index: 80;
	cursor: pointer;
}

#input-manager-overlay {
	z-index: 1; /* under profile-buttons */
}

#input-underlay {
	z-index: 2;
	top: 55px;
	height: calc(100% - 55px);
}

#touch-ui-dialog-underlay {
	z-index: 91; /* above menu */
}

#menu-underlay {
	z-index: 82;
	/* background-color: transparent; */
}

#msg-type-dialog-underlay {
	z-index: 220; /* above service input dialog */
}

#hamburger_menu_label {
	display: none;
	position: absolute;
	left: 0px;
	/* background: red; */
	top: 20px;
	height: 10px;
	color: #ffffff69;
	font-weight: bold;
	white-space: nowrap;
	width: 100%;
	text-align: center;
}

BODY.hamburger #graph_controls.active .hamburger_menu_label {
	display: block;
}

/* BODY.hamburger.menu-overlay #graph_display {
    border-radius: 0px 5px 5px 0px;
} */

/* BODY.hamburger.menu-overlay #graph_display .graph_node {
    margin-right: 10px;
} */

BODY.hamburger #graph_display.hamburger-open,
BODY.hamburger #service_list.hamburger-open,
BODY.hamburger #cameras_list.hamburger-open,
BODY.hamburger #docker_list.hamburger-open,
BODY.hamburger #widget_list.hamburger-open {
	display: block;
	border-radius: 5px;
}

BODY.hamburger #menubar_items {
	width: 245px;
	background-color: #131317;
	left: -16px;
	top: -10px;
	position: absolute;
	padding: 63px 20px 20px 20px;
	display: none;
	border-radius: 0px 5px 5px 0px;
	overflow: hidden;
	/* filter: drop-shadow(10px 0px 11px #000000); */
}

#menubar_hamburger_close {
	display: none;
}

BODY.hamburger #menubar_hamburger_close {
	display: block;
	color: #fff;
	position: absolute;
	left: 20px;
	top: 20px;
	z-index: 10;
	cursor: pointer;
	background-image: url(/static/graph/menu-arrow.png);
	background-repeat: no-repeat;
	padding-left: 16px;
	background-size: 9px;
	background-position: 0px 2px;
}

BODY.hamburger #menubar_content.open #menubar_items {
	display: block;
}

BODY.hamburger.menu-overlay #menubar_content:hover #menubar_items {
	display: none;
}

.full-w {
	display: none;
}
.narrow-w {
	display: none;
}
.narrower-w {
	display: none;
}
.hamburger-w {
	display: none;
}

BODY.hamburger .full-w,
BODY.hamburger .hamburger-w,
BODY.full-width .full-w {
	display: inline;
}

BODY.narrow .full-w,
BODY.narrow .narrower-w {
	display: none;
}
BODY.narrow .narrow-w {
	display: inline;
}
BODY.narrow .narrow-w {
	display: inline;
}
BODY.narrower .full-w,
BODY.narrower .narrow-w {
	display: none;
}
BODY.narrower .narrower-w {
	display: inline;
}

#graph_display {
	width: 785px;
	height: 600px;
	left: 0px;
	background-color: white;
	padding: 10px;
	border-radius: 0px 5px 5px 5px;
}

#graph_display .tooltip {
	position: absolute;
	z-index: 3;
	background-color: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 12px;
	padding: 5px;
	display: none;
	pointer-events: none;
	border-radius: 5px;
	max-width: 200px;
	white-space: unset;
}

#graph_display .tooltip .warn,
#graph_display .tooltip .err {
	white-space: unset;
	text-wrap: wrap;
}

#graph_display .graph_node .tooltip {
	pointer-events: unset;
}

#graph_display .tooltip.error {
	background-color: rgba(255, 0, 0, 0.6);
}

#graph_display svg {
	/* position: relative;
    margin-top: -10px; */
	position: relative;
	z-index: 1;
	overscroll-behavior: none;
}

#graph_nodes {
	width: 300px;
	height: 100%;
	float: left;
	overflow-y: scroll;
	overscroll-behavior: none;
	scrollbar-width: none;
}

#graph_topics_scrolling {
	width: auto;
	padding-left: 0px;
	/* z-index: 2; */
	position: relative;
	height: 100%;
	float: right;
	overflow-y: scroll;
	overscroll-behavior: none;
	scrollbar-width: none;
}

#menubar_items #graph_display.narrow #graph_topics_scrolling {
	width: 100%;
}

#graph_topics {
	width: 300px;
	position: relative;
	float: right;
}

#graph_topics input {
	margin-right: 5px;
}

#graph_topics .msg_type {
	color: #ffffff94;
	font-size: 10px;
	line-height: 10px;
	cursor: help;
	border-bottom: 1px dashed #ffffff94;
	text-decoration: none;
	position: relative;
	left: 18px; /* move away from the checkbox to prevent misclicks on touch*/
}

#graph_topics .msg_type .icon {
	display: none;
}

#graph_topics .msg_type.err {
	color: #cc0000b8;
	text-decoration: line-through;
	border-color: transparent;
}

#graph_topics .msg_type.video {
}

#graph_topics .msg_type.video .icon {
	width: 17px;
	height: 17px;
	display: block;
	position: absolute;
	right: -17px;
	top: -2px;
	background-image: url(/static/graph/icon-video.png);
	background-position: center right;
	background-repeat: no-repeat;
	background-size: auto 12px;
}

#graph_topics::-webkit-scrollbar,
#graph_nodes::-webkit-scrollbar {
	display: none;
}

.graph_node .box {
	padding: 8px 5px;
	text-overflow: ellipsis;
	/* max-width: 200px; */
	background: #5b5252;
	overflow: hidden;
	/* font-weight: bold; */
	border-radius: 5px;
	color: #fff;
	line-height: 20px;
	height: 20px;
	cursor: pointer;
	/* height: 27px; */
}

.graph_node .icons {
	position: absolute;
	right: 5px;
	top: 5px;
	background-color: #5b5252;
}

.graph_node .params-edit-icon {
	display: block;
	width: 35px;
	height: 28px;

	/* background-color: red; */
	background-image: url(/static/graph/icon-config.png);
	background-repeat: no-repeat;
	background-position: -37px center;
	background-size: 134px;
	cursor: pointer;
	max-height: calc(100% - 2px);
	border-radius: 5px;
	float: right;
	margin-left: 3px;
}

.graph_node .params-edit-icon:hover {
	background-color: black;
	/* background-position: -83px center; */
}

.graph_node .link-err-icon {
	display: block;
	width: 28px;
	height: 28px;
	background-color: red;
	background-image: url(/static/graph/warning.svg);
	background-repeat: no-repeat;
	background-position: 4px center;
	background-size: 20px;
	cursor: help;
	max-height: calc(100% - 2px);
	border-radius: 5px;
	float: right;
	margin-left: 3px;
	position: relative;
}

#graph_display .graph_node .link-err-icon .tooltip {
	right: -10px;
	top: 30px;
}

BODY.desktop-ui #graph_display .graph_node .link-err-icon:hover .tooltip,
BODY.touch-ui #graph_display .graph_node .link-err-icon.active .tooltip {
	display: block;
}

.graph_node.dimmed .box,
.graph_topic .box.dimmed {
	opacity: 50%;
}

.graph_node.dimmed .icons {
	background-color: #b1adad;
}

.narrow .graph_topic .box.dimmed {
	opacity: unset;
}

BODY.desktop-ui .narrow .graph_topic .box:hover {
	background-color: #ff8c00;
}

.graph_node.focused .box,
.graph_topic.focused .box {
	background-color: #ff8c00;
}

.graph_node.focused .icons {
	background-color: #ff8c00;
}

#graph_display svg {
	position: sticky;
	left: 0px;
	top: 0px;
	/* pointer-events: none; */
}

#graph_display svg .dimmed {
	opacity: 5%;
	cursor: default !important;
	z-index: 1 !important;
	pointer-events: none;
}

#graph_display svg .read-link {
	z-index: 3;
}

#graph_display svg .write-link {
	z-index: 2;
}

#graph_display svg .write-link:hover {
	color: lime;
}

.graph_topic,
.graph_node {
	padding-bottom: 2px;
	position: relative;
}

.graph_topic .box {
	padding: 8px 5px;
	text-overflow: ellipsis;
	/* max-width: 200px; */
	background: #6f98c4;
	overflow: hidden;
	/* font-weight: bold; */
	border-radius: 5px;
	color: #fff;
	position: relative;
	line-height: 20px;
	height: 40px;
	cursor: pointer;
}

#graph_display.narrow .graph_topic .box {
	height: auto !important; /* override extra spacing for connections */
}

.graph_topic .box label {
	cursor: pointer;
}

.graph_topic .box label {
	cursor: pointer;
}

BODY.top-menu #graph_controls.active:hover #graph_display,
BODY.top-menu #graph_controls.active.hover_waiting #graph_display {
	display: block;
}

#graph_controls,
#topic_controls,
#widget_controls,
#service_controls,
#camera_controls,
#docker_controls {
	margin-top: 0px;
	background: #6f98c4;
	padding: 10px;
	border-radius: 0px 0px 5px 5px;
	position: relative;
	display: inline-block;
	margin: 0px 0px 5px 0px;
	z-index: 1;
	white-space: nowrap;
	height: 20px;
}

BODY.hamburger #graph_controls,
BODY.hamburger #topic_controls,
BODY.hamburger #widget_controls,
BODY.hamburger #service_controls,
BODY.hamburger #camera_controls,
BODY.hamburger #docker_controls {
	border-radius: 5px 5px 5px 5px;
	font-size: 16px;
	padding: 0px 0px;
	clear: both;
	width: 245px;
	margin: 1px 0px 0px 0px;
	display: block;
	height: 50px;
	text-align: left;
}

#graph_controls:hover,
#graph_controls.hover_waiting,
#topic_controls:hover,
#widget_controls:hover,
#service_controls:hover,
#camera_controls:hover,
#docker_controls:hover {
	z-index: 2;
}

#graph_controls {
	background-image: url(/static/graph/graph.png);
	background-position: center 7px;
	background-repeat: no-repeat;
	background-size: 25px 25px;
}

BODY.hamburger #graph_controls {
	background-position: 102px 12px;
}

#topic_controls {
	/* width: 150px; */
}

#graph_controls {
	background-color: white;
}
#service_controls {
	background-color: #b311a3;
}
#camera_controls {
	background-color: #82b727;
}
#docker_controls {
	background-color: #de5a30;
}
#widget_controls {
	background-color: #112fb3;
}

/* BODY.narrow #service_controls { width: 65px;}
BODY.narrow #camera_controls { width: 60px;}
BODY.narrow #docker_controls { width: 65px;}

BODY.narrower #graph_controls { width: 170px; }
BODY.narrower #service_controls { width: 65px;}
BODY.narrower #camera_controls { width: 60px;}
BODY.narrower #docker_controls { width: 65px;} */

#topic_list {
	overflow-x: hidden;
	width: 400px;
	padding: 5px 10px 5px 10px;
	display: none;
	max-height: 520px;
	overflow: scroll;
	position: absolute;
	left: 1px;
	top: 46px;
	background: #deeeff;
}

#widget_list {
	overflow-x: hidden;
	max-width: 420px;
	padding: 0px;
	max-height: 520px;
	overflow: scroll;
	right: 0px;
	background: #deeeff;
	border-radius: 5px 0px 5px 5px;
	border-top: 3px solid #112eb3;
}

#graph_controls H3,
#service_controls H3,
#camera_controls H3,
#docker_controls H3,
#widget_controls H3,
#topic_controls H3 {
	color: #fff;
	cursor: default;
	line-height: 22px;
	height: 22px;
	display: block;
	position: absolute;
	text-align: center;
	width: 100%;
	margin: 0px;
	padding: 0px;
	left: 0px;
}

#graph_controls H3 {
	color: #000;
	/* margin-left: 25px */
	position: relative;

	/* height: 19px; */
}

#graph_controls #graph_nodes_label {
	position: absolute;
	left: 0px;
	top: 0px;
	text-align: center;
	width: 43%;
}

#graph_controls #graph_topics_label {
	position: absolute;
	left: 58%;
	top: 0px;
	text-align: center;
	width: 42%;
}

BODY.hamburger #graph_controls #graph_nodes_label {
	left: 10px;
	top: 15px;
	width: auto;
}

BODY.hamburger #graph_controls #graph_topics_label {
	left: 137px;
	top: 15px;
	width: auto;
}

BODY.top-menu #graph_controls.active:hover,
BODY.top-menu #graph_controls.active.hover_waiting {
	border-color: white !important;
}
BODY.top-menu #topic_controls.active:hover {
	border-color: #6f98c4 !important;
}
BODY.top-menu #widget_controls.active:hover {
	border-color: #112eb3 !important;
}
BODY.top-menu #camera_controls.active:hover {
	border-color: #82b727 !important;
}
BODY.top-menu #docker_controls.active:hover {
	border-color: #de5a30 !important;
}
BODY.top-menu #service_controls.active:hover,
BODY.top-menu #service_controls.active.setting_shortcuts {
	border-color: #b311a3 !important;
}

BODY.top-menu #graph_controls.active:hover,
BODY.top-menu #graph_controls.active.hover_waiting,
BODY.top-menu #service_controls.active:hover,
BODY.top-menu #camera_controls.active:hover,
BODY.top-menu #docker_controls.active:hover,
BODY.top-menu #topic_controls.active:hover,
BODY.top-menu #widget_controls.active:hover,
BODY.top-menu #service_controls.active.setting_shortcuts {
	border-radius: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	border-bottom: 5px solid;
}

#cameras_list,
#docker_list,
#service_list,
#widget_list,
#graph_display {
	display: none;
	position: absolute;
	top: 44px;
	text-align: left;
	scrollbar-width: none;
}

#cameras_list {
	overflow-x: hidden;
	overflow: scroll;
	background: #9ec65a;
	right: 0px;
	/* width: 510px; */
	max-height: 520px;
	padding: 0px;
	border-radius: 5px 0px 5px 5px;
	border-top: 3px solid #82b727;
	max-width: 420px;
}

#docker_list {
	overflow-x: hidden;
	overflow: scroll;
	background: #000000e6;
	right: 0px;
	width: 500px;
	max-height: 520px;
	padding: 10px 5px 5px 10px;
	border-radius: 5px 0px 5px 5px;
	border-top: 3px solid #de5a30;
}

#docker_list.narrow {
}

#docker_list.narrow .docker_cont_status,
#docker_list.narrow .docker_io,
#docker_list.narrow .docker_pids {
	display: none;
}

#docker_list h4 {
	/* docker host */
	font-size: 12px;
	font-weight: bold;
	color: #fff;
	margin: 10px 0px 6px 0px;
	padding: 0px;
	border-bottom: 1px dashed #de5a30;
	display: block;
}

#docker_list .host-group:first-child h4 {
	margin-top: 0px;
	border-bottom: 0px;
}

#docker_list .docker_cont_status {
	margin-left: 5px;
	display: inline-block;
}

#cameras_list LABEL.camera,
#widget_list LABEL.widget {
	position: relative;
	display: block;
	display: block;
	height: 40px;
	margin-top: 1px;
	line-height: 40px;
	padding-left: 30px;
	text-overflow: ellipsis;
	max-width: calc(100% - 40px);
	padding-right: 10px;
	overflow: hidden;
	cursor: pointer;
}

#cameras_list LABEL.camera:first-of-type,
#widget_list LABEL.widget:first-of-type {
	margin-top: 0px;
}

BODY.desktop-ui #cameras_list .camera:hover {
	background-color: #82b727;
	color: #fff;
}

BODY.desktop-ui #widget_list .widget:hover {
	color: #fff;
	background: #112eb391;
}

#cameras_list .camera INPUT,
#widget_list .widget INPUT {
	position: absolute;
	left: 10px;
	top: 13px;
}

#docker_list .docker_cont {
	color: #fff;
	line-height: 30px;
	position: relative;
	clear: both;
	height: 30px;
}

BODY.hamburger #docker_list {
	padding: 10px;
}

BODY.hamburger #docker_list .docker_cont {
	line-height: 50px;
	height: 50px;
	padding-left: 10px;
}

#docker_list .docker_cont_name {
	font-weight: bold;
	text-overflow: ellipsis;
	display: block;
	float: left;
	overflow: hidden;
	max-width: calc(40% - 80px);
}

#docker_list.narrow .docker_cont_name {
	max-width: 40%;
}

#docker_controls.control-disabled #docker_list.narrow .docker_cont_name {
	max-width: 60%;
}

#docker_list .docker_cont_vars {
	position: absolute;
	height: 30px;
	left: 40%;
	right: 100px;
}

BODY.hamburger #docker_list .docker_cont_vars {
	right: 150px;
}

#docker_controls.control-disabled .docker_btns {
	display: none;
}

#docker_controls.control-disabled #docker_list .docker_cont_name {
	max-width: calc(60% - 150px);
}

#docker_controls.control-disabled #docker_list .docker_cont_vars {
	left: 60%;
	right: 0px;
}

BODY.hamburger #docker_controls.control-disabled #docker_list .docker_cont_vars {
	right: 20px;
}

#docker_list .docker_cpu,
#docker_list .docker_io,
#docker_list .docker_pids {
	position: absolute;
	font-size: 12px;
	opacity: 0.8;
	cursor: help;
}

#docker_list .docker_cpu {
	left: 0px;
	width: 50px;
	text-align: center;
}

#docker_list.narrow .docker_cpu {
	left: calc(50% - 25px);
}

#docker_list .docker_io {
	left: calc(50% - 40px);
	width: 100px;
	text-align: center;
}

#docker_list .docker_pids {
	right: 0px;
	width: 30px;
	text-align: center;
}

#docker_list .running .docker_cont_name {
	color: #00ff00;
}

#docker_list .exited .docker_cont_name {
	color: #ff0000;
}

.docker_btns {
	position: absolute;
	right: -5px;
	top: 5px;
	display: block;
	width: 80px;
	height: 100%;
}

BODY.hamburger .docker_btns {
	top: 8px;
	width: 135px;
	right: -10px;
}

.docker_btns button {
	display: block;
	width: 20px;
	height: 20px;
	float: left;
	margin: 0px 5px 0px 0px;
	padding: 0px;
	filter: grayscale(0) opacity(0.2);
	border-radius: 5px;
	border: 0px;
	cursor: pointer;
}

BODY.hamburger .docker_btns button {
	width: 30px;
	height: 30px;
	margin: 0px 15px 0px 0px;
}

.docker_btns button.working {
	background: #ff8c00 !important;
	filter: grayscale(0) opacity(1) !important;
	cursor: wait;
}

BODY.desktop-ui .docker_btns button:hover,
.running .docker_btns button.docker_run,
.exited .docker_btns button.docker_stop {
	filter: grayscale(0) opacity(1);
}

.docker_btns button.docker_run {
	background-color: lime;
}

.docker_btns button.docker_stop {
	background-color: red;
}

.docker_btns button.docker_restart {
	background-color: magenta;
}

#service_list {
	overflow-x: hidden;
	overflow: scroll;
	background: #ecafed;
	left: 0px;
	width: 510px;
	max-height: 520px;
	padding: 5px 10px 5px 10px;
	border-radius: 0px 5px 5px 5px;
	border-top: 3px solid #b311a3;
}

#service_list .node {
	font-size: 15px;
	font-weight: bold;
	display: block;
	margin-bottom: 3px;
	margin-top: 5px;
	padding: 5px 10px;
	border-radius: 5px;
	background: #5b5252;
	color: #fff;
	margin-left: 0px;
	width: unset;
}

#service_list DIV:first-child .node {
	/* margin-top: 5px;    */
}

#service_list .node.only-collapsed {
	/* float: left;
    overflow: hidden;
    margin-right: 5px; */
}

#service_list .collapsed-cont {
	display: none;
}

#service_list .collapsed-cont.open {
	display: block;
}

BODY.top-menu #service_controls.active:hover #service_list,
BODY.top-menu #topic_controls.active:hover #topic_list,
BODY.top-menu #widget_controls.active:hover #widget_list,
BODY.top-menu #camera_controls.active:hover #cameras_list,
BODY.top-menu #docker_controls.active:hover #docker_list,
BODY.top-menu #service_controls.active.setting_shortcuts #service_list {
	display: block;
}

BODY.hamburger #graph_controls H3,
BODY.hamburger #service_controls H3,
BODY.hamburger #topic_controls H3,
BODY.hamburger #widget_controls H3,
BODY.hamburger #camera_controls H3,
BODY.hamburger #docker_controls H3 {
	padding: 15px 10px;
}

BODY.hamburger #graph_controls H3,
BODY.hamburger #service_controls H3,
BODY.hamburger #topic_controls H3,
BODY.hamburger #widget_controls H3,
BODY.hamburger #camera_controls H3,
BODY.hamburger #docker_controls H3 {
	cursor: pointer;
	text-align: left;
	/* display: block; */
}

.expandable.collapsed .service {
	display: none;
}

.expandable button {
	display: block;
	text-align: center;
	border: 0px;
	background: transparent;
	width: 100%;
	font-size: 11px;
	color: #fff;
	border-radius: 5px;
}
.expandable button:hover {
	background: #bc61d06e;
}

.service {
	margin-top: 5px;
	margin-bottom: 5px;
	background: #ec9cef;
	padding: 10px;
	border-radius: 5px;
	position: relative;
	text-align: left;
}

#service_list .preferred-cont,
#service_list .collapsed-cont {
	margin-bottom: 20px;
}

#service_list .node-cont:last-child .preferred-cont,
#service_list .node-cont:last-child .collapsed-cont {
	margin-bottom: 0px;
}

#service_list .uncollapsed .preferred-cont {
	margin-bottom: 0px;
}

.service.nonhandled {
	font-size: 13px;
	padding: 5px 10px;
	/* background: #d68ee07e; */
}

#service_list .collapse-handle {
	margin-bottom: 5px;
	border-radius: 5px;
	position: relative;
	text-align: center;
	font-size: 13px;
	padding: 5px 10px;
	background: #ec9cef;
	color: #ffffffd4;
	text-decoration: none;
	cursor: pointer;
	display: block;
	margin-top: 0px;
	position: relative;
	top: -15px;
}

#service_list .node-cont:last-child .collapse-handle {
	top: 0px;
}

#service_list .collapse-compact-handle {
	position: relative;
	font-size: 13px;
	color: #ffffff69;
	text-decoration: none;
	cursor: pointer;
	float: right;
	font-weight: normal;
}

#service_list .collapse-compact-handle:hover {
	text-decoration: underline;
	color: #fff;
}

#service_list .node.open .collapse-compact-handle {
	display: none;
}

#service_list .collapse-handle {
}

#service_list .collapse-handle.open {
	display: block;
}

#service_list .collapse-handle.only-collapsed {
	display: none;
}

#service_list .collapse-handle:hover {
	text-decoration: underline;
	color: white;
}

.service_heading {
	font-weight: bold;
	overflow: hidden;
	text-overflow: ellipsis;
}

#mapping-confirmation #current-key {
	background-color: blue;
	display: block;
	width: 210px;
	height: 80px;
	margin: 0px auto;
	border-radius: 15px;
	color: yellow;
	font-size: 30px;
	line-height: 80px;
	text-align: center;
}

.service_input {
	position: absolute;
	top: 0px;
	right: 5px;
	background: #ec9cef;
	height: 100%;
	padding-left: 5px;
}

.service.nonhandled .service_input {
	display: none;
}
.service_input_type {
	color: white;
	font-size: 12px;
	border-bottom: 1px dashed white;
	display: inline;
	cursor: help;
}

#service_list .nonhandled .service_input_type {
	color: #cc0000b8;
	text-decoration: line-through;
	border-color: transparent;
}

.service_button {
	background: #0051ff;
	color: white;
	font-weight: bold;
	border: 0px;
	border-radius: 5px;
	padding: 0px 10px;
	margin: 9px 5px 0px 1px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	/* width: 60px; */
	height: 35px;
	line-height: 36px;
	position: relative;
}

.service-control {
	border: 0px;
	padding: 0px;
	margin: 9px 5px 0px 1px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	height: 35px;
	line-height: 36px;
	position: relative;
	display: inline-block;
}

.service_inp {
	background: white;
	color: black;
	/* font-weight: bold; */
	border: 0px;
	border-radius: 5px;
	padding: 0px 0px;
	margin: 0px 5px 0px 0px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	width: 65px;
	line-height: 35px;
	height: 35px;
	text-align: center;
	outline: none;
}

.setting_shortcuts .service_button {
	border: 1px dashed yellow;
	margin-right: 4px;
	margin-left: 0px;
	margin-top: 11px;
}

.service_button.mapped {
	border-top: 3px solid #eaff00;
	padding-top: 3px;
	margin-top: 9px;
	/* filter: drop-shadow(2px 0px 0px yellow); */
	/* border-spacing: revert; */
}

.service_button.data {
	background: transparent;
	color: white;
	font-weight: normal;
	width: 30px;
}
.service_button.data.has-data {
	width: 50px;
}
.service_button.data SPAN.data-set {
	color: green;
}

.service_button.data:hover {
	background: white;
	color: black;
}

#battery-info {
	display: none;
	/* background-color: #033669; */
	background-image: url(/static/graph/battery.png);
	width: 23px;
	height: 41px;
	margin-top: 7px;
	margin-right: 5px;
	position: relative;
	float: left;
	/* border-radius: 0px 5px 5px 0px; */
	background-size: 96px;
	/* border-radius: 0px 5px 5px 0px; */
	/* padding-top: 8px; */
	background-blend-mode: overlay;
	margin-left: 4px;
	cursor: help;
}

#battery-info #battery-bar {
	display: block;
	/* background: blue; */
	height: 24px;
	z-index: 0;
	margin: 0px 1px 1px 1px;
	width: 13px;
	overflow: hidden;
	position: absolute;
	left: 3px;
	/* bottom: 4px; */
	/* display: none; */
	top: 11px;
}

#battery-info #battery-bar SPAN {
	display: block;
	background: transparent;
	height: 4px;
	z-index: -1;
	margin: 0px 0px 2px 0px;
	/* width: 100px; */
	position: relative;
	/* bottom: 0px; */
	/* left: 0px; */
	/* rotate: 74deg; */
	border-radius: 2px;
}

#battery-info #battery-label {
	position: absolute;
	left: 1px;
	bottom: 11px;
	color: black;
	font-size: 11px;
	/* background: #000000a1; */
	display: block;
	width: 20px;
	padding: 1px 0px;
	text-align: center;
	border-radius: 2px;
	line-height: 10px;
	rotate: -90deg;
	white-space: nowrap;
	font-weight: bold;
	display: none;
}

#network-info {
	display: block;
	float: left;
	width: 65px;
	height: 50px;
	/* background: red; */
	position: absolute;
	right: -65px;
	top: 0px;
}

#network-info #signal-monitor {
	display: none;
	/* background-color: blue; */
	position: absolute;
	left: 0px;
	top: 9px;
	width: 25px;
	height: 25px;
	background-image: url(/static/graph/wifi.png);
	background-size: 125px;
	background-repeat: no-repeat;
	background-position: 0px 0px;
	opacity: 0.9;
	cursor: help;
}

#network-info #signal-monitor.q25 {
	background-position: -25px 0px;
}

#network-info #signal-monitor.q50 {
	background-position: -50px 0px;
}

#network-info #signal-monitor.q75 {
	background-position: -75px 0px;
}

#network-info #signal-monitor.q100 {
	background-position: -100px 0px;
}

#network-info #signal-monitor.working {
	/* display: block; */
	animation: wifi-anim-working 1s ease-in infinite;
}

@keyframes wifi-anim-working {
	0% {
		/* transform: scale(0); */
		opacity: 1;
	}
	100% {
		/* transform: scale(1); */
		opacity: 0;
	}
}

#network-info .network-info-dot {
	display: block;
	background-color: red;
	position: absolute;
	left: 0px;
	top: 41px;
	width: 5px;
	height: 5px;
	border-radius: 15px;
	cursor: help;
}

#network-info .network-info-dot.red {
	background-color: red;
}

#network-info .network-info-dot.yellow {
	background-color: yellow;
}

#network-info .network-info-dot.orange {
	background-color: orange;
}

#network-info .network-info-dot.green {
	background-color: lime;
}

#network-info-peers {
	color: black;
	position: absolute;
	right: 5px;
	top: 5px;
	font-size: 11px;
	background-color: white;
	border-radius: 3px;
	padding: 2px 4px;
	white-space: nowrap;
	font-weight: bold;
	cursor: help;
	display: none;
}

#network-info-rtt {
	position: absolute;
	color: #fff;
	left: 30px;
	font-size: 11px;
	top: 34px;
	padding: 2px 4px;
	background: black;
	border-radius: 5px;
	cursor: help;
}

#network-info #dot-0 {
	left: 1px;
}

#network-info #dot-1 {
	left: 11px;
}

#network-info #dot-2 {
	left: 21px;
}

#network-info-wrapper #network-details,
#battery-info #battery-details {
	position: absolute;
	display: none;
	left: auto;
	right: -300px;
	top: 50px;
	background-color: #000000c6;
	border-radius: 0px 5px 5px 5px;
	color: #fff;
	padding: 10px;
	width: 350px;
}

#battery-info #battery-details {
	width: 130px;
	right: -100px;
}

#webrtc_connection_uptime {
	color: #ffffff78;
	cursor: help;
	margin-left: 5px;
}

#network-info-wrapper #network-details.one-column,
#battery-info #battery-details.one-column {
	left: 0px; /* move to left edge */
	right: auto;
}

#network-info-wrapper:hover #network-details,
#battery-info:hover #battery-details {
	display: block;
}

#network-details .label,
#battery-details .label {
	color: #ffffff78;
	margin-right: 5px;
}

#network-details .section-label {
	margin-bottom: 2px;
	color: #ffffff78;
	font-weight: bold;
}

#robot_wifi_info {
	display: none;
}

#robot_wifi_info,
#robot_info {
	margin-top: 10px;
}

#robot_wifi_info,
#webrtc_info {
	margin-top: 10px;
}

#wifi_scan_roam_cont {
	position: absolute;
	right: 10px;
	bottom: 10px;
}

BUTTON#trigger_wifi_scan,
BUTTON#trigger_wifi_roam {
	margin-left: 5px;
	border: 0px;
	border-radius: 5px;
	color: #fff;
	background-color: #0051ff;
	display: none; /* hidden until iw_stats msg */
	padding: 5px 10px;
	position: relative;
	float: left;
}

BUTTON#trigger_wifi_scan.working,
BUTTON#trigger_wifi_roam.working {
	background: #ff8c00;
	cursor: wait;
}

/* #robot_stats {
    width: 440px;
} */

/* #monitors {
    margin-top: 50px;
} */

#topic_list A.topic {
}

.grid_panel {
	height: 100%;
	padding-bottom: 0px;
	position: relative;
	display: block;
	/* overflow: hidden; */
	border-radius: 5px;
}

.monitor_menu {
	position: absolute;
	display: block;
	width: 34px;
	height: 26px;
	right: 0px;
	top: -1px;
	z-index: 114;
	background-image: url(/static/graph/icon-menu.png);
	background-size: 59px;
	background-repeat: no-repeat;
	background-position: -26px 1px;
	cursor: pointer;
	border-radius: 5px;
	background-color: #525559;
}

.grid-stack-item.maximized .monitor_menu {
	background-color: transparent;
}

.grid-stack-item.maximized .panel_btns {
	right: 66px;
	top: 56px;
}

.grid-stack-item.maximized .panel_btns .panel-btns-gradient {
	display: none;
}

.grid-stack-item.maximized .panel_btns .panel-btns-content {
	background-color: transparent;
}

BODY.touch-gamepad .monitor_menu,
BODY.touch-gamepad .pause-panel-button,
BODY.touch-gamepad H3.panel-title,
BODY.touch-gamepad .panel-btn,
BODY.touch-gamepad .panel-select {
	opacity: 0.2 !important;
}

BODY.touch-ui .monitor_menu {
	width: 40px;
	height: 38px;
	top: -8px;
	right: -5px;
	background-image: url(/static/graph/icon-menu-thicker.png);
	background-size: 128px;
	background-position: -44px 12px;
}

BODY.touch-ui.touch-gamepad .monitor_menu {
	background-color: #252b33;
}

BODY.touch-ui .editing .monitor_menu {
	background-color: #005a00;
}

/* makes the hover area bigger for your conveninence */
/* .monitor_menu .hover_keeper { 
    display: none;
    position: absolute;
    left: -5%;
    top: -13%;
    width: 107%;
    height: 120%;
    background-color: transparent;
    z-index: -1;
    background-color: red;
}
.monitor_menu.right .hover_keeper {
    left: -10%;
}

BODY.touch-ui .monitor_menu .hover_keeper {
    display: none;
} */

BODY.touch-ui .monitor_menu_content .menu_content_underlay {
	/* makes the hover area bigger for your conveninence */
	display: none;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background-color: transparent;
	z-index: 100; /* active button must be above this */
}

BODY.touch-ui .monitor_menu_content .menu_content_underlay.open {
	display: block;
}

BODY.desktop-ui .monitor_menu:hover,
BODY.desktop-ui .monitor_menu.hover_waiting {
	border-radius: 5px 5px 0px 0px;
	width: 34px;
	background-position: -26px 1px;
}

BODY.desktop-ui .monitor_menu.right:hover {
	border-radius: 5px 5px 0px 0px;
}

BODY.touch-ui .monitor_menu.open {
	/* border-radius: 5px; */
	background-position: -95px 12px;
}

BODY.touch-ui .monitor_menu.open {
}

BODY.desktop-ui .monitor_menu:hover .hover_keeper,
BODY.desktop-ui .monitor_menu.hover_waiting .hover_keeper {
	display: block;
	/* background-color: red;; */
}

.monitor_menu_content {
	display: none;
	position: absolute;
	right: 0px;
	top: 26px;
	border-radius: 5px 0px 5px 5px;
	padding: 3px 5px 5px 5px;
	font-size: 13px;
	color: #fff;
	text-align: left;
	width: 320px;
	overscroll-behavior: none;
}

BODY.desktop-ui .monitor_menu_content {
	width: 220px;
}

BODY.desktop-ui .monitor_menu.wider .monitor_menu_content {
	width: 290px; /* more space for sources selectors */
}

BODY.desktop-ui .monitor_menu.right .monitor_menu_content {
	border-radius: 0px 5px 5px 5px;
}

.monitor_menu_content.noscroll {
	touch-action: none;
}

.monitor_menu_content,
BODY.desktop-ui .monitor_menu:hover,
BODY.desktop-ui .monitor_menu.hover_waiting {
	background-color: #000000e6;
}

BODY.touch-ui .monitor_menu_content {
	/* top: 38px; */
	font-size: 16px;
	/* height: 400px; */
	overflow-y: scroll;
	border-radius: 5px;
}

.monitor_menu_content.floating {
	/* moved to BODY for z-index */
	display: block;
	z-index: 90;
}

BODY.desktop-ui .monitor_menu.right .monitor_menu_content {
	/* used when panel is thin and on the very left of the screen */
	right: auto;
	left: 0px;
}

.monitor_menu_content A {
	color: #fff;
}

BODY.desktop-ui .monitor_menu:hover .monitor_menu_content,
BODY.desktop-ui .monitor_menu.hover_waiting .monitor_menu_content {
	display: block;
}

.monitor_menu_content .menu_line INPUT {
	margin: 0px 1px 0px 0px;
	position: relative;
	top: 1px;
	float: right;
}

.monitor_menu_content.floating .menu_line INPUT {
	margin-right: 8px;
}

.monitor_menu_content .menu_line {
	clear: both;
}

.monitor_menu_content .menu_line A,
.monitor_menu_content .menu_line LABEL,
.monitor_menu_content .menu_line .label {
	text-decoration: none;
	display: block;
	padding: 5px 5px 5px 8px;
	white-space: nowrap;
	cursor: pointer;
}

BODY.touch-ui .monitor_menu_content .menu_line A,
BODY.touch-ui .monitor_menu_content .menu_line LABEL,
BODY.touch-ui .monitor_menu_content .menu_line .label {
	padding: 10px 5px 7px 10px;
	/* background: red; */
	line-height: 20px;
	font-size: 18px;
}

.monitor_menu_content .panel_msg_types_line SPAN.msg_types {
	display: block;
	padding: 5px 5px 5px 8px;
	white-space: nowrap;
}

BODY.touch-ui .monitor_menu_content .panel_msg_types_line SPAN.msg_types {
	padding-top: 8px;
}

BODY.touch-ui .monitor_menu_content .panel_msg_types_line {
	margin-bottom: 4px;
}

/* .grid_panel .menu_line:last-child A {
    padding-bottom: 7px;
} */

BODY.desktop-ui .monitor_menu_content .menu_line:hover,
.monitor_menu_content .menu_line.open {
	background-color: #001649;
}

BODY.desktop-ui .monitor_menu_content .panel_msg_types_line:hover,
BODY.desktop-ui .monitor_menu_content .menu_line.zoom_ctrl:hover,
BODY.desktop-ui .monitor_menu_content .menu_line.rot_ctrl:hover,
BODY.desktop-ui .monitor_menu_content .menu_line.plus_minus_ctrl {
	background-color: unset;
}

/* .monitor_menu_content .menu_line:first-of-type {
    padding-top: 5px;
    border-radius: 5px 0px 0px 0px;
} */

.monitor_menu_content > .menu_line {
	border-radius: 5px;
	position: relative;
	margin-top: 2px;
}

BODY.touch-ui .monitor_menu_content > .menu_line {
	border-radius: 0px;
	position: relative;
	margin-top: 1px;
	border-bottom: 1px solid #ffffff2b;
}
/* .monitor_menu_content.right > .menu_line { 
    border-radius: 0px 5px 5px 5px;
} */

/* .monitor_menu_content > .menu_line ~ .menu_line { 
    border-radius: 0px 0px 0px 0px;
}
*/

.monitor_menu_content .menu_line.solo {
	padding-top: 3px;
	border-radius: 5px 0px 5px 5px !important;
}
.monitor_menu_content.right .menu_line.solo {
	padding-top: 3px;
	border-radius: 0px 5px 5px 5px !important;
}

/* .grid_panel .menu_line:first-child {
    border-radius: 5px 0px 0px 0px;
    padding-top: 4px;
} */

.monitor_menu_content .panel_msg_types_line {
	padding-bottom: 4px;
	padding-top: 1px;
}

BODY.touch-ui .monitor_menu_content .menu_line:last-of-type,
BODY.touch-ui .monitor_menu_content .menu_line.panel_msg_types_line {
	border-bottom: 0px;
}

BODY.touch-ui .monitor_menu_content .menu_line.warn A {
	background: red;
	border-radius: 5px;
}

BODY.desktop-ui .monitor_menu_content .menu_line.close_panel:hover {
	background: red;
}
/* .monitor_menu_content  .panel_msg_types_line.nospace {
    padding-bottom: 0px;
} */

BODY.desktop-ui .monitor_menu_content .menu_line.src_ctrl {
	/* background-image: url(/static/graph/menu-arrow.png);
    background-repeat: no-repeat;
    background-size: 6px;
    background-position: 5px center; */
	/* border-top: 5px solid #383838;*/
}
/* 
BODY.desktop-ui .monitor_menu_content .menu_line.src_ctrl:hover {
    border-radius: 0px 5px 5px 0px;
} */

BODY.touch-ui .menu_line.src_ctrl {
	padding-bottom: 1px;
	border-radius: 5px;
}

BODY.touch-ui .menu_line.src_ctrl.open {
	border-bottom: 0px;
	-webkit-tap-highlight-color: transparent; /* removes the highlight on overlays on mobile opera */
}

.menu_line.src_ctrl > .icon {
	display: block;
	position: absolute;
	right: 0px;
	top: 0px;
	width: 30px;
	height: 30px;
	background-image: url(/static/graph/menu-arrow.png);
	background-repeat: no-repeat;
	background-size: 6px;
	background-position: 11px 12px;
	transform: rotate(180deg);
	pointer-events: none; /* don't steal clicks */
}

BODY.touch-ui .menu_line.src_ctrl > .icon {
	right: 5px;
	top: 8px;
}

.monitor_menu_content .menu_line.src_ctrl.open > .icon {
	transform: rotate(-90deg);
}

.monitor_menu_content .menu_line.src_ctrl:hover {
	/* border-radius: 0px; */
}

BODY.desktop-ui .src_ctrl_menu {
	position: relative;
	display: none;
	background: #001649;
	top: 0px;
	border-radius: 5px;
	padding: 0px 3px 5px 3px;
}

BODY.touch-ui .src_ctrl_menu {
	position: relative;
	/* right: 100%; */
	display: none;
	background: #001649;
	top: 0px;
	border-radius: 5px;
	padding: 0px 3px 5px 3px;
}

.menu_line.src_ctrl.open .src_ctrl_menu {
	display: block;
}

.monitor_menu_content .msg_types,
.src_ctrl_menu BUTTON {
	border: 1px dashed white;
	padding: 6px 10px;
	border-radius: 5px;
	background: #4c7fb0;
	margin: 0px 3px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.src_ctrl_menu BUTTON {
	margin-bottom: 2px;
	padding: 6px 10px 6px 10px;
	position: relative;
	min-width: 50px;
	text-align: left;
	max-width: calc(100% - 5px);
}

BODY.touch-ui .src_ctrl_menu BUTTON {
	padding-top: 10px;
	padding-bottom: 10px;
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
}

BODY.touch-ui .monitor_menu_content {
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
}

.src_ctrl_menu BUTTON .remove {
	position: absolute;
	display: none;
	width: 20px;
	height: 100%;
	right: 3px;
	top: 0px;
	background-color: #558ec3;
}

.src_ctrl_menu BUTTON .remove .icon {
	background: url(/static/graph/remove.png);
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 15px;
	opacity: 0.5;
	position: absolute;
	width: 100%;
	height: 100%;
	display: block;
}

BODY.touch-ui .src_ctrl_menu BUTTON.warn .remove,
BODY.desktop-ui .src_ctrl_menu BUTTON:hover .remove {
	display: block;
}

BODY.touch-ui .src_ctrl_menu BUTTON.notset:hover,
.src_ctrl_menu BUTTON.notset {
	border: 1px dashed white;
	background: transparent;
	padding-right: 10px;
}

.src_ctrl_menu BUTTON.notset.selecting,
BODY.desktop-ui .src_ctrl_menu BUTTON.notset:hover {
	background-color: #ff8c00;
}

BODY.desktop-ui .src_ctrl_menu BUTTON.warn:hover,
BODY.touch-ui .src_ctrl_menu BUTTON.warn,
.src_ctrl_menu BUTTON.warn .remove {
	background-color: red;
}

BODY.touch-ui .src_ctrl_menu BUTTON.warn {
	z-index: 101; /* above cancelling underlay */
}

.src_ctrl_menu BUTTON.warn .icon {
	opacity: 1;
}

.monitor_menu_content .msg_types.err,
.src_ctrl_menu BUTTON.err {
	background: red;
}

BODY.desktop-ui .monitor_menu_content A.msg_types:hover,
.src_ctrl_menu BUTTON:hover {
	background: #558ec3;
}

BODY.desktop-ui .monitor_menu_content A.msg_types.err:hover,
.src_ctrl_menu BUTTON.err:hover {
	background: #c20000;
}

.panel-title {
	z-index: 2;
	position: relative;
	padding-right: 10px;
	display: block;
	width: -webkit-fill-available;
	margin-right: 30px;
	overflow: hidden;
	/* text-overflow: ellipsis; */
	/* background-color: red; */
	color: #fff;
	position: relative;
	top: -7px;
	padding-top: 10px;
	margin-bottom: -20px;
	padding-bottom: 10px;
	cursor: grab;
	white-space: nowrap;
	padding-left: 25px; /* pause btn */
}

/* prevent select on touch - title used to trigger panel edit */
BODY.touch-ui .panel-title {
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
	padding-left: 26px;
}

BODY.touch-ui .grid-stack-item.editing .panel-title {
	margin-right: 80px;
}

.panel-title.no-pause {
	padding-left: 3px; /* no pause btn */
}

.grid-stack > .grid-stack-item > .grid-stack-item-content {
	overflow-x: visible !important;
	overflow-y: visible !important;
}

.grid-stack > .grid-stack-item {
	z-index: 1;
}

BODY.desktop-ui .grid-stack > .grid-stack-item:hover {
	z-index: 15;
}

.grid-stack-item.maximized {
	left: -4px !important;
	width: 100vw !important;
	/* height: calc(100vh - 85px) !important; */
	z-index: 15 !important;
	background: red;
	margin: 0px !important;
	padding: 0px !important;
}

.grid-stack-item.maximized .grid-stack-item-content {
	inset: 0px !important;
	border-radius: 0px !important;
	padding: 0px !important;
}

.grid-stack-item.maximized .panel-title {
	top: 47px;
	left: 8px;
	position: absolute;
	font-size: 16px;
	opacity: 0.5;
}

BODY.touch-ui .grid-stack-item.maximized .panel-title {
	top: 57px;
	left: 16px;
}

.grid-stack-item.maximized .panel_content_space {
	height: 100% !important;
	padding-top: 0px;
	padding-bottom: 0px;
}

.grid-stack-item.maximized .monitor_menu {
	top: 58px;
	right: 20px;
}

.grid-stack-item.maximized .panel_widget {
	border-radius: 0px !important;
}

.grid-stack-item.maximized .video_fps {
	top: 100px;
	right: 22px;
}

.grid-stack-item.maximized .pause-panel-button {
	top: 55px;
	left: 10px;
	z-index: 3;
}

SPAN.error {
	color: red;
}

#topic_list .topic {
	color: rgb(0, 89, 255);
}

#topic_list .topic.image {
	color: #ff00fa;
}

#topic_list .topic.unsupported_message_type {
	color: gray;
}

#topic_list .topic:hover,
#cameras_list .camera:hover {
	color: rgb(255, 0, 212);
}

#topic_list .topic label,
#cameras_list .camera label {
	cursor: pointer;
}

.grid_panel .panel_source {
	min-height: 1em;
	padding: 12px;
	word-wrap: break-word;
	white-space: pre;
	font-size: 12px;
	font-family: monospace;
	/* background: #073831; */
	background: #222222;
	color: #fff;
	border-radius: 5px;
	overflow: scroll;
	display: none;
	height: -moz-available;
	height: -webkit-fill-available;
	scrollbar-width: none;
	/* overflow: hidden; */
	/* margin-bottom: 5px; */
	/* margin-bottom: 15px; */
}

.grid_panel .panel_source.enabled {
	display: block;
}

.grid-stack-item.maximized .grid_panel .panel_source.enabled {
	padding-top: 90px;
}

.grid_panel .panel_source A {
	color: #fff;
}

.grid_panel .panel_source A:hover {
	color: #30f104;
}

.grid_panel .panel_update {
}

#msg-type-dialog {
	position: fixed;
	top: calc(10% - 20px);
	width: 90vw;
	max-width: 650px;
	left: calc(50% - Min(45vw, 325px) - 15px);
	border-radius: 10px;

	height: auto; /* content resizes */
	z-index: 221; /* above srv input dialog */
	padding: 33px 0px 50px 0px;
	overflow: visible;
	display: none;
	background: #000000e0;
}

BODY.touch-ui #msg-type-dialog {
	left: 0px;
	top: -10px;
	width: 100%;
	max-width: unset;
	height: auto; /* content resizes */
	padding: 60px 0px 0px 0px;
}

#touch-ui-dialog {
	position: fixed;
	left: 0px;
	top: -10px;
	width: 100%;
	height: auto; /* content resizes */
	z-index: 100;
	padding: 60px 0px 0px 0px;
	overflow: visible;
	display: none;
	background: #000000e0;
}

#touch-ui-selector {
	position: fixed;
	left: 50%;
	top: 50%;
	width: auto;
	height: auto;
	z-index: 100;
	padding: 20px;
	display: none;
	background: #000000e0;
	border-radius: 15px;
}

BODY.desktop-ui #touch-ui-selector {
	padding: 10px;
}

#touch-ui-selector .content {
	/* padding: 10px; */
	/* border-radius: 5px; */
	font-size: 15px;
	/* overscroll-behavior: none; */
}

#touch-ui-selector .content .empty {
	display: block;
	border-radius: 5px;
	background-color: #660000;
	color: #fff;
	font-weight: bold;
	line-height: 20px;
	padding: 20px 40px;
	width: 200px;
}

#touch-ui-selector .content .topic-option {
	display: block;
	border-radius: 5px;
	background-color: #0088ff;
	color: #fff;
	font-weight: bold;
	line-height: 30px;
	padding: 10px 10px 10px 10px;
	margin-bottom: 2px;
	min-width: 200px;
}

#msg-type-dialog .title {
	position: absolute;
	left: 10px;
	top: 10px;
	font-size: 18px;
	line-height: 24px;
	white-space: nowrap;
	right: 10px;
	overflow: hidden;
	color: #fff;
	cursor: move;
}

#msg-type-dialog .title SPAN {
	border-bottom: 1px dashed white;
	display: inline-block;
}

BODY.touch-ui #msg-type-dialog .title {
	left: 20px;
	top: 20px;
	font-size: 22px;
	line-height: 40px;
	right: 20px;
	cursor: default;
}

#msg-type-dialog .content {
	padding: 10px;
	border-radius: 5px;
	height: calc(90vh - 140px);
	margin: 10px 10px 10px 10px;
	overflow: scroll;
	margin-top: 10px;
	font-size: 15px;
	overscroll-behavior: none;
}

BODY.touch-ui #msg-type-dialog .content {
	margin-bottom: 80px;
	height: unset;
}

BODY.touch-ui.landscape #msg-type-dialog .content {
	margin-bottom: 10px;
}

#msg-type-dialog .content {
	background-color: #210077;
	font-family: monospace;
	white-space: pre;
	color: #00fff9;
	font-size: 16px;
}

#msg-type-dialog .content .type {
	color: #9bc200;
	font-style: italic;
}

#msg-type-dialog button.close {
	position: absolute;
	display: block;
	height: 40px;
	right: 10px;
	bottom: 10px;
	border-radius: 5px;
	background: #434343;
	border: 0px;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	padding-left: 20px;
	padding-right: 20px;
	line-height: 42px;
}

BODY.touch-ui #msg-type-dialog button.close {
	height: 60px;
	left: 10px;
	right: 10px;
	bottom: 10px;
	font-size: 26px;
	font-weight: normal;
}

/* right top */
BODY.touch-ui.landscape #msg-type-dialog button.close {
	left: auto;
	padding-left: 20px;
	padding-right: 20px;
	height: 40px;
	top: 20px;
	font-size: 20px;
}

#msg-type-dialog .err {
	background: rgb(215 3 35);
	font-weight: bold;
	display: block !important;
}

#topic-selector-dialog {
	background: #fff;
	margin-top: 10px;
	font-size: 12px;
	font-family: monospace;
	white-space: pre;
	padding: 0px;
	color: #00fff9;
	display: none;
	overflow: scroll;
	height: -webkit-fill-available;
}

#topic-selector-dialog A.topic-option,
#topic-selector-dialog .empty {
	display: block;
	font-size: 14px;
	text-decoration: none;
	font-weight: bold;
	padding: 15px 10px 15px 10px;
	color: #000;
	margin-bottom: 1px;
	background-color: lightgrey;
	border-radius: 5px;
}

#topic-selector-dialog .empty {
	background-color: white;
}

#topic-selector-dialog A.topic-option:hover {
	background-color: #ff8c00;
	color: #fff;
}

.display_panel_source_label {
	display: block;
	cursor: pointer;
}

.display_panel_source_label INPUT {
	margin-right: 4px;
	top: 2px;
	position: relative;
}

.display_panel_source_label.enabled {
}

.pause-panel-button,
BODY.desktop-ui .pause-panel-button.paused:hover {
	display: block;
	cursor: pointer;
	position: absolute;
	width: 20px;
	height: 20px;
	left: 0px;
	top: 2px;
	z-index: 2;
	background-image: url("/static/graph/icon-play-pause.png");
	background-repeat: no-repeat;
	background-position: -40px 0px;
	background-size: 60px;
}

BODY.desktop-ui .pause-panel-button:hover,
BODY.desktop-ui .pause-panel-button.paused {
	/* background-color: #139a80; */
	background-position: 6px 0px;
}

BODY.touch-ui .pause-panel-button {
	width: 30px;
	height: 40px;
	left: -5px;
	top: -8px;
	background-repeat: no-repeat;
	background-position: -54px 7px;
	background-size: 82px;
}

BODY.touch-ui .pause-panel-button.paused {
	background-position: 8px 7px;
}

.panel_btns {
	position: absolute;
	right: 30px;
	top: -9px;
	height: 39px;
	z-index: 114; /* same as menu, above 2d labels */
	max-width: calc(100% - 40px);
	pointer-events: none;
	/* background-color: red; */
}

/* .narrow-panel .pause-panel-button, */
/* .narrow-panel .panel-btns-gradient, */
.narrow-panel .panel-btn,
.narrow-panel .panel-select,
.buttons-hidden .panel-btn,
.buttons-hidden .panel-select {
	display: none;
}

BODY.touch-ui .narrow-panel .edit-panel-button {
	display: none !important;
}

.tiny-panel .panel-title {
	visibility: hidden !important;
}

.tiny-panel .panel_btns,
.tiny-panel .pause-panel-button {
	display: none !important;
}
.tiny-panel .monitor_menu {
	background-color: transparent;
	right: min(calc(50% - 20px), -5px) !important;
}

/* .narrow-panel .panel-title {
    padding-left: 2px !important;
} */

.panel-btns-content {
	background: #525559;
	display: block;
	position: relative;
	margin-left: 10px;
	height: 100%;
}

BODY.touch-ui .panel-btns-content {
	padding-right: 5px;
}

BODY.touch-ui .editing .panel-btns-content {
	padding-right: 0px;
}

BODY.touch-ui .panel_btns {
	/* right: min(40px, calc(100% - 20px)); */
	/* padding-left: 10px; */
}

BODY.touch-ui.touch-gamepad .panel-btns-content {
	background-color: #252b33;
}

BODY.touch-ui .editing .panel-btns-content {
	background-color: #005a00;
}

.panel-btns-gradient {
	background-image: linear-gradient(to right, transparent, #525559);
	position: absolute;
	left: 0px;
	top: 0px;
	width: 10px;
	height: 100%;
	pointer-events: none;
}

BODY.touch-ui.touch-gamepad .panel-btns-gradient {
	background-image: linear-gradient(to right, transparent, #252b33);
}

BODY.touch-ui .editing .panel-btns-gradient {
	background-image: linear-gradient(to right, transparent, #005a00);
}

.panel-btn {
	width: 30px;
	height: 27px;
	/* background-color: black; */
	display: block;
	cursor: pointer;
	background-repeat: no-repeat;
	background-size: 20px 20px;
	border-radius: 5px;
	background-position: center;
	margin-top: 8px;
	background-repeat: no-repeat;
	float: left;
	pointer-events: all;
}

BODY.desktop-ui .panel-btn:hover,
.panel-select:hover {
	background-color: black;
}

/* BODY.touch-ui .panel-btn:last-of-type {
    margin-right: 10px;
} */

.panel-select {
	position: relative;
	width: 30px;
	height: 27px;
	/* background-color: black; */
	display: block;
	cursor: pointer;
	float: left;
	margin-top: 8px;
	background-repeat: no-repeat;
	background-size: 20px 20px;
	border-radius: 5px;
	background-position: center;
	pointer-events: all;
}

.panel-select .panel-btn {
	margin-top: 0px;
}

.panel-select:hover {
	border-radius: 5px 5px 0px 0px;
}

.panel-select-content {
	display: none;
	position: absolute;
	right: 0px;
	top: 27px;
	border-radius: 5px 0px 5px 5px;
	background-color: #000000e6;
	font-size: 13px;
	padding: 3px 5px 5px 5px;
}

.panel-select:hover .panel-select-content {
	display: block;
}

.panel-select-content SPAN {
	display: block;
	cursor: pointer;
	color: #fff;
	padding: 5px 5px 5px 5px;
	text-align: left;
	margin-top: 2px;
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
}

.panel-select-content SPAN:hover {
	background-color: #001649;
	border-radius: 5px;
}

.panel-select {
	background-image: url("/static/graph/icon-view.svg");
	background-size: 20px 20px;
}

.panel-btn.focus-btn {
	background-image: url("/static/graph/icon-focus.svg");
	background-size: 20px 20px;
}
.panel-btn.focus-btn.on {
	background-image: url("/static/graph/icon-focus-on.svg");
}

.panel-btn.labels-btn {
	background-image: url("/static/graph/icon-label.svg");
	background-size: 20px 20px;
}
.panel-btn.labels-btn.on {
	background-image: url("/static/graph/icon-label-on.svg");
}

.panel-btn.perspective-btn,
BODY.desktop-ui .panel-btn.perspective-btn.on:hover {
	background-image: url("/static/graph/icon-isometric.svg");
	background-size: 20px 20px;
}

.panel-btn.perspective-btn.on,
BODY.desktop-ui .panel-btn.perspective-btn:hover {
	background-image: url("/static/graph/icon-perspective.svg");
}

.edit-panel-button {
	display: none;
	cursor: pointer;
	position: relative;
	width: 40px;
	height: 40px;
	right: 0px;
	top: 0px;
	z-index: 2;
	background-image: url(/static/graph/icon-edit.png);
	background-repeat: no-repeat;
	background-position: -44px 8px;
	background-size: 100px;
	display: none;
	margin-right: 5px;
	pointer-events: all;
}

BODY.touch-ui .edit-panel-button {
	display: none;
}

BODY.touch-ui .editing .edit-panel-button {
	background-color: #008700;
	display: block;
}

BODY.touch-ui .editing .panel-btn,
BODY.touch-ui .editing .panel-select {
	display: none;
}

BODY.touch-ui .editing .grid-stack-item-content {
	background-color: #005a00;
}

.panel_widget {
	background: black;
	min-height: 40px;
	clear: right;
	border-radius: 5px;
	display: none;
	overflow: hidden;
}

.panel_widget.source_visible {
	width: 50%;
	float: right;
	margin-left: 5px;
}

.panel_widget.laser-scan, .panel_widget.zoomable-2d-tiles {
	background-color: #072038;
	position: relative;
	height: 100%;
}

.panel_widget.laser-scan .arrow, .panel_widget.zoomable-2d-tiles .arrow {
	position: absolute;
	z-index: 3;
	display: none; /* show on 1st render */
	width: 20px;
	height: 20px;
	cursor: pointer;
}

.scrollable {
	cursor: all-scroll;
}

/* .panel_widget.laser-scan CANVAS {
    width: 100%;
    height: 100%;
} */

.panel_widget.log {
	background: black;
	color: #fff;
	font-size: 14px;
	height: 100%;
	overflow: scroll;
	scrollbar-width: none;
}

.panel_widget.log .log_line {
	padding: 2px 5px;
}

.panel_widget.log .log_line:hover {
	background: rgb(49, 49, 49);
}

.panel_widget.log .log_line .name {
	color: #fece00;
}

.panel_widget.log .log_line .time {
	color: #ffffff85;
}

.panel_widget.log .log_line .debug {
	color: #6bcd08;
}

.panel_widget.log .log_line .error {
	color: #ff3f3f;
}

.panel_widget.video {
	background: #000;
	position: relative;
	height: 100%;
}

.panel_widget video {
	/* margin: auto auto; */
	/* vertical-align: middle; */
	margin: 0;
	position: absolute;
	top: 50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%) translateX(-50%);
	left: 50%;
	width: 100%;
	/* border-radius: 5px; */
}

.video_overlay {
	position: absolute;
	z-index: 2;
	left: 0px;
	top: 0px;
	/* background: rgba(255, 0, 0, 0.315); */
	width: 100%;
	height: 100%;
	pointer-events: none;
	background: transparent;
}

.video_overlay_cont {
	position: absolute;
	z-index: 10;
	left: 0px;
	top: 0px;
	/* background: rgba(0, 255, 0, 0.315); */
	width: 100%;
	height: 100%;
	background: transparent;
}

.panel_widget .video_overlay svg {
	position: absolute;
	top: 50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
.panel_widget .video_overlay_cont.display_crop svg {
	border-style: dashed;
	border-color: rgb(162, 255, 0);
	border-width: 2px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

.video_stats,
.panel_fps {
	color: #ffffffa3;
	position: absolute;
	z-index: 3;
	left: 10px;
	top: 10px;
	font-size: 11px;
	font-weight: normal;
	display: block;
	background: #0000009c;
	padding: 5px;
	border-radius: 3px;
	display: none;
}
.panel_fps.rendering_stats {
	text-align: right;
}
.panel_fps.error {
	background: #ff0000ce;
}
.video_stats {
	bottom: 20px;
	overflow: scroll;
	scrollbar-width: none;
	max-width: 80%;
	color: white;
}
.grid-stack-item.maximized .video_stats {
	top: 90px;
}
.video_stats .change {
	color: #fff;
	background-color: red;
}
.panel_fps {
	left: auto;
	right: 10px;
	top: 20px;
}
.video_stats.enabled,
.panel_fps.enabled {
	display: block;
}

.panel_widget.enabled {
	display: block;
	height: 100%;
	position: relative;
	container-type: inline-size;
}

.panel_content_space {
	height: -webkit-fill-available;
	padding-top: 10px;
	padding-bottom: 12px;
	position: relative;
}

/* TODO OpenSource license? */
/* .canvasjs-chart-credit {
	display: none !important; 
} */

.panel_widget.battery {
	height: 100%;
}

.panel_widget.range {
	height: 100%;
	background-color: #fff;
	container-type: inline-size;
}

.panel_widget.range .label {
	color: #fff;
	font-size: 20cqw;
	top: 50%;
	position: absolute;
	text-align: center;
	width: 100%;
	vertical-align: bottom;
	display: inline-block;
	line-height: 1em;
	margin-top: -0.5em;
}

.panel_widget.range.source_visible .label {
	width: 50%;
}

.panel_widget.range .label SPAN {
	position: absolute;
	line-height: 1em;
	width: 100%;
	text-align: center;
	left: 0px;
}

.panel_widget.laser-scan,
.panel_widget.zoomable-2d-tiles,
.panel_widget.imu {
	height: -webkit-fill-available;
}
.panel_widget canvas {
	border-radius: 5px;
}

.panel_widget .canvas_container {
	position: absolute;
}

.panel_widget canvas.canvas_tile {
	position: absolute;
	background-color: rgba(0, 0, 0, 0.1);
	border-radius: 0px;
}

.panel_widget .map_info {
	position: absolute;
	color: #fff;
	left: 9px;
	top: 5px;
	font-size: 10px;
}

.cleaner {
	clear: both;
	position: relative;
	display: block;
	height: 0px;
}

#gamepad,
#touch_ui,
#keyboard,
#introspection_state {
	position: relative;
	top: 0;
	display: none;
	z-index: 35;
	float: right;
	width: 64px;
	height: 55px;
}

BODY.desktop-ui #gamepad.open {
	z-index: 36; /* above top menu */
}

BODY.touch-ui #gamepad {
	position: static;
}

#introspection_state {
	/* background: #4a4a4a; */
	background-image: url(/static/graph/discovery_stopped.svg);
	-webkit-animation-play-state: paused;
	-moz-animation-play-state: paused;
	animation-play-state: paused;
	background-size: 37px;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
	width: 50px;
	/* background-color: magenta; */
}

@media screen and (orientation: portrait) {
	/* BODY.hamburger #introspection_state {
        right: 60px;
    } */
}

BODY.desktop-ui #introspection_state:hover,
#introspection_state.active {
	/* background: #82b727; */
	filter: opacity(1) !important;
}

#introspection_state.inactive {
	filter: opacity(0.2);
}

#introspection_state.active {
	background-image: url(/static/graph/discovery.svg);
}

#touch_ui_status,
#input-status-icon {
	background-repeat: no-repeat;
	cursor: pointer;
	filter: grayscale(1) opacity(0.2);
}

#keyboard_status {
	background-size: 126px;
	background-image: url(/static/graph/keyboard.png);
	background-position: 8px 17px;
	height: 55px;
	margin-top: 0;
	margin-left: 0;
}

#input-status-icon {
	height: 55px;
	background-image: url(/static/graph/user-input.png);
	background-size: 261px;
	background-position: 0px 0px;
	filter: unset;
	position: relative;
}
#input-status-icon.enabled {
	background-position: -68px 0px !important;
}
#input-status-icon.transmitting {
	background-position: -136px 0px !important;
}
@keyframes error_flash {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0.8;
	}
}
#input-status-icon.error {
	background-position: -201px 0px !important;
	animation-name: error_flash;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}

#touch_ui_status {
	height: 55px;
	background-image: url(/static/graph/touch-input-black.png);
	background-size: 105px;
	background-position: 10px 9px;
}
#touch_ui.enabled #touch_ui_status {
	background-position: -46px 9px;
	filter: grayscale(0) opacity(1);
}

#touch_ui.active_disabled #touch_ui_status {
	background-position: 10px 9px;
	filter: grayscale(0) opacity(1);
}

#gamepad.open,
#keyboard.open {
	background-color: #5d53b0e3;
	/* border-radius: 5px 5px 0px 0px; */
}

#gamepad #gamepad_settings {
	position: fixed;
	right: 10px;
	font-size: 12px;
	color: white;
	font-weight: normal;
	top: 55px;
	display: none;
	z-index: 2;
	overscroll-behavior: none;
	max-height: calc(100dvh - 80px);
	width: 40%;
	min-width: 350px;
	max-width: 480px;
}

BODY.touch-ui.touch-gamepad #gamepad #gamepad_settings {
	max-width: unset;
}

BODY.desktop-ui #gamepad #gamepad_settings {
	right: 0px;
}

#gamepad #gamepad_settings #gamepad-settings-container {
	overflow-x: hidden;
	overflow-y: hidden;
	padding: 10px 10px 10px 10px;
	border-radius: 5px 5px 5px 5px;
	background: #5d53b0;
	position: relative;
}

BODY.desktop-ui #gamepad #gamepad_settings #gamepad-settings-container {
	border-radius: 5px 0px 5px 5px;
}

BODY.gamepad-editing.touch-gamepad
	#gamepad
	#gamepad_settings
	#gamepad-settings-container {
	width: 40%;
	min-width: 300px;
	height: calc(100% - 20px);
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	top: 0px;
	border-radius: 0px;
}

BODY.gamepad-editing.touch-gamepad.touch-bottom-buttons
	#gamepad
	#gamepad_settings
	#gamepad-settings-container {
	height: calc(100% - 70px); /* room for bottom touch buttons */
}

BODY.gamepad-editing.touch-gamepad #gamepad_settings {
	right: unset !important;
	left: 0px;
	/* margin-left: calc(-20% - 40px); */
	/* transform: translateX(-50%); */
	height: calc(100dvh - 55px);
	top: 55px !important;
	width: 100% !important;
	max-height: unset !important;
}

/* #gamepad #gamepad_settings.touch-gamepad #gamepad-settings-container {
    border-radius: 5px !important;
} */

BODY.touch-gamepad #gamepad #gamepad_settings .touch-zone {
	display: block;
	height: calc(100% - 8px);
	background: #352f5d;
	border: 4px dashed #5d53b0;
	border-radius: 10px 0px 0px 10px;
	width: calc((100% - max(40%, 300px)) / 2 - 16px);
	position: absolute;
	top: 0px;
	z-index: 3; /* above central panel so that we can see the joysticks at all time */
}

BODY.touch-gamepad.touch-bottom-buttons #gamepad #gamepad_settings .touch-zone {
	height: calc(100% - 58px);
}

BODY.touch-gamepad #gamepad #gamepad_settings #gamepad-touch-left-zone {
	left: 0px;
}

BODY.touch-gamepad #gamepad #gamepad_settings #gamepad-touch-right-zone {
	right: 0px;
	border-radius: 0px 10px 10px 0px;
}

#gamepad #gamepad_settings #input-profile-select {
	position: relative;
	width: calc(100% - 47px);
	border: 5px solid #423a81;
	height: 40px;
	border-radius: 10px 0px 0px 10px;
	/* border: 0px; */
	color: #ffffff;
	font-size: 18px;
	font-weight: bold;
	padding-left: 5px;
	background-color: #4a4290;
}

#gamepad #gamepad_settings #input-profile-select.loading {
	color: #ffffff5e;
}

BODY.desktop-ui #gamepad #gamepad_settings #input-profile-select {
	font-size: 15px;
}

#gamepad #gamepad_settings #input-profile-select OPTION:disabled {
}

#profile-buttons {
	background: #423a81;
	width: 47px;
	height: 40px;
	float: right;
	border-radius: 0px 10px 10px 0px;
	position: relative;
	z-index: 2;
}

#profile-buttons .icon {
	display: block;
	position: absolute;
	width: 46px;
	height: 40px;
	background-image: url(/static/graph/icon-settings.png);
	background-size: 21px;
	background-repeat: no-repeat;
	background-position: center 9px;
	/* background-color: red; */
	left: 0px;
	cursor: pointer;
}

#profile-buttons #profile-menu {
	position: absolute;
	right: 0px;
	top: 45px;
	background: black;
	width: auto;
	z-index: 1;
	border-radius: 5px;
	white-space: nowrap;
	display: none;
	padding: 3px 5px 5px 5px;
}

#profile-buttons.open #profile-menu {
	display: block;
}

#profile-buttons #profile-menu .arrow {
	position: absolute;
	width: 30px;
	height: 30px;
	display: block;
	background: black;
	rotate: 45deg;
	right: 8px;
	top: -5px;
	z-index: 1;
}

#profile-unsaved-warn,
#input-unsaved-warn,
#input-locked-warn {
	position: absolute;
	background: magenta;
	color: #ffffff;
	border-radius: 3px;
	padding: 0px;
	font-size: 12px;
	line-height: 12px;
	right: -5px;
	top: -4px;
	font-weight: bold;
	width: 19px;
	height: 17px;
	text-align: center;
	vertical-align: middle;
	line-height: 26px;
	display: none;
	font-size: 25px;
	padding-top: 3px;
	cursor: pointer;
}

#input-unsaved-warn {
	right: 5px;
	top: 5px;
}

#gamepad #gamepad_settings.unsaved #profile-unsaved-warn {
	display: block;
}

#gamepad #input-unsaved-warn.unsaved {
	display: block;
}

#input-locked-warn {
	left: 2px;
    right: auto;
    top: 5px;
    background-image: url(/static/graph/icon-lock.svg);
    background-repeat: no-repeat;
    background-size: 13px;
    display: none;
    background-position: 3px 3px;
   
    background-color: yellow;
}

#input-locked-warn.locked {
	display: block;
}

#profile-buttons BUTTON {
	text-align: left;
	line-height: 23px;
	padding: 5px 10px;
	border-radius: 5px;
	border: 0px;
	background-color: #05234c;
	font-size: 13px;
	margin: 2px 0px 0px 0px;
	/* float: right; */
	/* height: 40px; */
	/* font-weight: bold; */
	display: block;
	width: 100%;
	z-index: 2;
	position: relative;
}

BODY.desktop-ui #profile-buttons BUTTON:hover {
	background-color: #083471;
}
BODY.desktop-ui #profile-buttons BUTTON:active {
	background-color: #58bbf2;
}

#profile-buttons BUTTON.save_btn {
	background-color: green;
	display: none;
}
BODY.desktop-ui #profile-buttons BUTTON.save_btn:hover {
	background-color: rgb(6, 160, 6);
}
BODY.desktop-ui #profile-buttons BUTTON.save_btn:active {
	background-color: rgb(12, 186, 12);
}
#gamepad #gamepad_settings.unsaved #profile-buttons BUTTON#save-input-profile {
	display: block;
}

BUTTON#delete-input-profile.warn,
BODY.desktop-ui BUTTON#delete-input-profile:hover,
BODY.desktop-ui BUTTON#delete-input-profile:active {
	background-color: rgb(173, 0, 0);
}

BUTTON#delete-input-profile .icon {
	display: none;
}

@keyframes delete_wobble {
	0% {
		rotate: 3deg;
	}
	/* 25%  {rotate: -5deg} */
	50% {
		rotate: -3deg;
	}
	/* 75%  {rotate: -5deg} */
	100% {
		rotate: 3deg;
	}
}

.monitor_menu_content .menu_line.warn A .icon,
#service-input-dialog .btn-menu BUTTON.rem.warn .icon,
BUTTON#delete-input-profile.warn .icon {
	display: block;
	width: 17px;
	height: 21px;
	right: 7px;
	top: 5px;
	position: absolute;
	background-image: url(/static/graph/icon-trash.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	background-size: 17px;
	left: unset;
	animation-name: delete_wobble;
	animation-duration: 0.2s;
	animation-iteration-count: infinite;
}
.monitor_menu_content .menu_line.warn A .icon {
	width: 20px;
	height: 24px;
	background-size: 20px;
	top: 7px;
}

#gamepad_settings .tab {
	display: block;
	float: left;
	line-height: 29px;
	padding: 2px 10px;
	font-weight: bold;
	color: #fff;
	background-color: #4a4290;
	cursor: pointer;
	border-radius: 5px 5px 0px 0px;
	font-size: 18px;
	margin-left: 5px;
	height: 29px;
}

BODY.desktop-ui #gamepad_settings .tab {
	font-size: 15px;
}

#gamepad_settings .tab#gamepad-settings-tab {
	float: right;
	width: 25px;
	margin-right: 5px;
	background-image: url(/static/graph/icon-settings.png);
	background-size: 21px;
	background-repeat: no-repeat;
	background-position: center 6px;
	position: relative;
}

#gamepad_settings .tab.active {
	background-color: rgb(233 15 233);
	cursor: default;
}

#gamepad_settings .panel {
	display: none;
	padding: 10px 5px 5px 5px;
	border-top: 3px solid rgb(233 15 233);
	/* border-radius: 0px 0px 5px 5px; */
	/* background-color: rgb(233 15 233); */
	clear: left;
	max-height: calc(100dvh - 230px);
	overflow-x: hidden;
	overflow-y: scroll;
	scrollbar-width: none;
}

BODY.touch-gamepad.touch-bottom-buttons #gamepad_settings .panel {
	max-height: calc(100dvh - 270px);
}

#gamepad_settings .panel.active {
	display: block;
}

#gamepad_settings .axis-row,
#gamepad_settings .button-row {
	/* background-color: red; */
	/* height: 30px; */
	position: relative;
	margin-bottom: 5px;
}

#gamepad_settings .axis-row:last-of-type,
#gamepad_settings .button-row:last-of-type {
	margin-bottom: 0px;
}

BODY.touch-gamepad #gamepad_settings .axis-row:last-of-type {
	/* margin-bottom: 20px; */
}

#gamepad_settings .axis-val,
#gamepad_settings .btn-val {
	display: block;
	width: 60px;
	height: 30px;
	background: white;
	border-radius: 5px;
	text-align: center;
	color: black;
	font-size: 16px;
	line-height: 30px;
	float: left;
	overflow: hidden;
}

#gamepad_settings .btn-val.touched {
	background: cyan;
}

#gamepad_settings .btn-val.pressed {
	background: yellow !important;
}

#gamepad #gamepad_settings .axis-row.switch-target .axis-val {
	background: orange;
	border: 1px dashed white;
	color: #fff;
	width: 58px;
	height: 28px;
	cursor: pointer;
}

#gamepad #gamepad_settings .axis-row.switch-target .axis-val:hover {
	background: rgb(254, 172, 20);
}

#gamepad #gamepad_settings .axis-row.unused.switch-source SElECT,
#gamepad #gamepad_settings .axis-row.unused.switch-source .axis-val {
	background-color: magenta;
	color: white;
}

#gamepad #gamepad_settings .axis-row.unused.switch-source .axis-config-details {
	display: none !important;
}

#gamepad_settings .axis-config,
#gamepad_settings .btn-config {
	display: block;
	margin-left: 65px;
	display: block;
}

#gamepad_settings .conf-toggle {
	display: block;
	width: 60px;
	height: 30px;
	background: white;
	border-radius: 5px;
	/* text-align: center; */
	/* color: black; */
	/* font-size: 16px; */
	/* line-height: 30px; */
	float: right;
	margin-right: 5px;
	background-image: url(/static/graph/icon-config-thicker.png);
	background-repeat: no-repeat;
	background-position: 17px 5px;
	background-size: 128px;
	cursor: pointer;
}

#gamepad_settings .conf-toggle.open {
	background-color: #5d53b0ba;
	background-position: -34px 5px;
	height: 33px;
	border-radius: 5px 5px 0px 0px;
	border-top: 3px solid #5d53b0ba;
	margin-top: -3px;
}

#gamepad_settings .axis-output-val,
#gamepad_settings .btn-output-val {
	display: block;
	width: 60px;
	height: 30px;
	background: white;
	border-radius: 5px;
	text-align: center;
	color: black;
	font-size: 16px;
	line-height: 30px;
	float: right;
}

#gamepad_settings .axis-output-val.live,
#gamepad_settings .btn-output-val.live {
	background: yellow;
	color: black;
}

#gamepad_settings .label.sublabel {
	padding-left: 10px;
}

#gamepad_settings .axis-config-details,
#gamepad_settings .btn-config-details {
	display: none;
	background-color: #5d53b0ba;
	border-radius: 5px;
	margin-top: 3px;
	padding: 5px 0px 5px 10px;
}

#gamepad_settings .axis-config-details.open,
#gamepad_settings .btn-config-details.open {
	display: block;
	margin-bottom: 7px;
}

#gamepad_settings .axis-row:last-of-type .axis-config-details.open,
#gamepad_settings .button-row:last-of-type .btn-config-details.open {
	margin-bottom: 0px;
}

/* #gamepad_settings .axis-val.active {
    background: yellow;
    color: black;
} */

#gamepad #gamepad_settings SElECT,
#keyboard #keyboard_settings SElECT {
	color: black;
	/* margin-top: 5px; */
	height: 30px;
	width: calc(100% - 130px);
	border: 0px;
	border-radius: 5px;
	outline: none;
	font-size: 16px;
}

#gamepad #gamepad_settings .axis-row.unused SElECT,
#gamepad #gamepad_settings .button-row.unused SElECT {
	width: 100%;
	background-color: #423a81;
	color: #8c80ec;
}

#gamepad #gamepad_settings .axis-row .config-row,
#gamepad #gamepad_settings .button-row .config-row {
	/* height: 30px; */
	margin-top: 2px;
	line-height: 30px;
}

#gamepad #gamepad_settings .button-row .separator {
	display: block;
	height: 1px;
	margin: 5px 5px 5px -5px;
	border-top: 1px solid #7166cf;
}

#gamepad #gamepad_settings .axis-row .config-row2,
#gamepad #gamepad_settings .button-row .config-row2 {
	width: 50%;
	position: relative;
	float: right;
	margin-right: 5px;
}

#gamepad #gamepad_settings .axis-row .config-row2 .inp-val,
#gamepad #gamepad_settings .button-row .config-row2 .inp-val {
	margin-right: 0px;
	border-radius: 0px 5px 5px 0px;
}

#gamepad #gamepad_settings .axis-row .config-row .label2,
#gamepad #gamepad_settings .button-row .config-row .label2 {
	display: block;
	float: left;
	width: calc(100% - 110px);
	text-align: center;
	background-color: #26214b7d;
}

#gamepad #gamepad_settings .axis-row .config-row .inp-val2,
#gamepad #gamepad_settings .button-row .config-row .inp-val2 {
	float: left;
	border-radius: 5px 0px 0px 5px;
}

#gamepad #gamepad_settings .axis-row.unused .conf-toggle,
#gamepad #gamepad_settings .button-row.unused .conf-toggle,
#gamepad #gamepad_settings .axis-row.unused .axis-output-val,
#gamepad #gamepad_settings .button-row.unused .btn-output-val,
#gamepad #gamepad_settings .axis-row.unused .config-row,
#gamepad #gamepad_settings .button-row.unused .config-row {
	display: none;
}

#gamepad #gamepad_settings .config-row INPUT {
	width: 55px;
	float: right;
	line-height: 30px;
	height: 30px;
	border-radius: 5px;
	border: 0px;
	outline: 0px;
	margin: 0px 5px 0px 0px;
	padding: 0px;
	background-color: #26214b;
	text-align: center;
	font-size: 16px;
}

#gamepad #gamepad_settings .config-row INPUT.half {
	width: 65%;
}

#gamepad #gamepad_settings .config-row SELECT {
	float: right;
	width: 65%;
	background-color: #26214b;
	color: white;
	margin-right: 5px;
	text-align: center;
}
#gamepad #gamepad_settings .config-row SELECT.wide {
	width: 75%;
}

#gamepad #gamepad_settings .config-row TEXTAREA {
	width: calc(50% - 20px);
	float: right;
	background: #26214b;
	color: #fff;
	font-size: 16px;
	border: 0px;
	border-radius: 5px;
	margin-right: 5px;
	padding: 5px 10px;
	resize: vertical;
	outline: none;
}

#gamepad #gamepad_settings .config-row TEXTAREA.wide {
	width: calc(75% - 20px);
}

#gamepad #gamepad_settings .btn-val {
	/* border: 2px dashed #e90fe9; */
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	cursor: pointer;
	position: relative;
	padding: 0px 2px;
}

#gamepad #gamepad_settings .btn-val.listening {
	z-index: 3;
	border: 2px dashed #e90fe9;
	height: 30px;
	line-height: 28px;
}

#gamepad #gamepad_settings .btn-val.assigned {
	/* color: #fff; */
	border: 0px;
	/* background-color: #e90fe9; */
}

#gamepad_settings h3 {
	white-space: nowrap;
	overflow: hidden;
	width: 360px;
	display: block;
}

#gamepad_settings h3 {
	white-space: nowrap;
	overflow: hidden;
	width: 360px;
	display: block;
}

#gamepad_settings h3.config {
	width: 670px;
}
#gamepad_settings h3.shortcuts {
	width: 490px;
}

#gamepad #gamepad_id {
	font-size: 10px;
	font-weight: normal;
}

#gamepad #gamepad_debug,
#keyboard #keyboard_debug {
	padding: 5px;
	border-radius: 5px;
	margin-top: 10px;
	margin-left: -5px;
	margin-right: -5px;
	margin-bottom: -5px;
	width: max-content;
	overflow-x: hidden;
}

#gamepad_settings_controls,
#keyboard_settings_controls {
	position: absolute;
	right: 10px;
	top: 10px;
}

#gamepad_settings_controls button,
#gamepad_config_controls button,
#gamepad_shortcuts_controls button,
#keyboard_settings_controls button,
#keyboard_config_controls button,
#keyboard_shortcuts_controls button {
	background: #101089;
	border: 0px;
	padding: 2px 5px;
	border-radius: 3px;
	position: relative;
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
}

#keyboard_settings_controls button.close,
#gamepad_settings_controls button.close {
	background-color: #e200ff;
}

/* #keyboard_settings_controls button.close::before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    top: 5px;
    left: 2px;
    background-image: url(/static/graph/menu-arrow.png);
    background-position: 3px center;
    background-repeat: no-repeat;
    background-size: auto 12px;
    transform: rotate(-90deg);
    display: block;
}

#keyboard_settings_controls button.close:hover::before {
    background-image: url(/static/graph/remove.png);
} */

#gamepad_config_controls button#gamepad_config_save,
#gamepad_shortcuts_controls button#gamepad_shortcuts_save,
#keyboard_shortcuts_controls button#kb_shortcuts_save,
#keyboard_config_controls button#kb_config_save {
	background-color: #008700;
	/* display: none; */
}

#gamepad_shortcuts_controls button.listening,
#keyboard_config_controls button.listening,
#keyboard_shortcuts_controls button.listening {
	background-color: #0869f9;
	color: black;
}

#gamepad_config,
#gamepad_shortcuts,
#keyboard_config,
#keyboard_shortcuts {
	display: none;
}

#controller-enabled-cb {
	top: -40px;
	position: absolute;
	/* float: left; */
	margin-right: 3px;
	right: 5px;
	width: 30px;
	height: 30px;
	border: 0px;
	border-radius: 5px;
}

#gamepad_config TEXTAREA,
#gamepad_shortcuts TEXTAREA,
#keyboard_config TEXTAREA,
#keyboard_shortcuts TEXTAREA {
	width: 295px;
	height: 460px;
	grid-auto-columns: 0px;
	background: transparent;
	outline: none;
	color: #fff;
	border: none;
	white-space: pre;
	resize: vertical;
	word-wrap: break-word;
	white-space: pre;
	font-size: 12px;
	font-family: monospace;
	background-color: #072867;
	border: 2px dotted white;
	padding: 5px;
	margin-top: 5px;
	border-radius: 5px;
	color: #4eff20;
}

#gamepad_shortcuts TEXTAREA,
#keyboard_shortcuts TEXTAREA {
	width: 375px;
}

#gamepad_config TEXTAREA.err,
#gamepad_shortcuts TEXTAREA.err,
#keyboard_config TEXTAREA.err,
#keyboard_shortcuts TEXTAREA.err {
	border-color: red;
}

#gamepad_debug.config #gamepad_config,
#keyboard_debug.config #keyboard_config {
	display: block;
	width: 308px;
}

#gamepad_debug.shortcuts #gamepad_shortcuts,
#keyboard_debug.shortcuts #keyboard_shortcuts {
	display: block;
	width: 377px;
}

#gamepad_debug .col,
#keyboard_debug .col {
	float: left;
	width: 250px;
	margin-right: 10px;
}

#gamepad_debug .col .p,
#keyboard_debug .col .p {
	white-space: pre;
	padding: 5px;
	border-radius: 5px;
	background: #400042;
	margin: 5px 0px 10px 0px;
}

#gamepad_debug .col:last-child,
#keuboard_debug .col:last-child {
	float: left;
	width: 250px;
	margin-right: 0px;
}

#gamepad.open #gamepad_settings,
#keyboard.open #keyboard_settings {
	display: block;
}

/* Optional styles for demos */
.btn-primary {
	color: #fff;
	background-color: #007bff;
}

.btn {
	display: inline-block;
	padding: 0.375rem 0.75rem;
	line-height: 1.5;
	border-radius: 0.25rem;
}

#grid-stack-container {
	position: relative;
	margin-bottom: 50px;
	margin-top: 60px;
	/* padding: 0px 10px; */
}

.grid-stack {
	margin: 10px 5px 5px 5px;
}

/* BODY.hamburger .grid-stack {
    margin-top: 100px;
} */

.grid-stack-item-content {
	/* background-color: #18bc9c; */
	background: #525559;
	border-radius: 5px;
	padding: 9px 5px 5px 5px;
}

BODY.touch-gamepad .grid-stack-item-content {
	background: #52555954;
}

.grid-stack-item-removing {
	opacity: 0.5;
}
.trash {
	height: 100px;
	background: rgba(255, 0, 0, 0.1) center center
		url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDQzOC41MjkgNDM4LjUyOSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDM4LjUyOSA0MzguNTI5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTQxNy42ODksNzUuNjU0Yy0xLjcxMS0xLjcwOS0zLjkwMS0yLjU2OC02LjU2My0yLjU2OGgtODguMjI0TDMwMi45MTcsMjUuNDFjLTIuODU0LTcuMDQ0LTcuOTk0LTEzLjA0LTE1LjQxMy0xNy45ODkgICAgQzI4MC4wNzgsMi40NzMsMjcyLjU1NiwwLDI2NC45NDUsMGgtOTEuMzYzYy03LjYxMSwwLTE1LjEzMSwyLjQ3My0yMi41NTQsNy40MjFjLTcuNDI0LDQuOTQ5LTEyLjU2MywxMC45NDQtMTUuNDE5LDE3Ljk4OSAgICBsLTE5Ljk4NSw0Ny42NzZoLTg4LjIyYy0yLjY2NywwLTQuODUzLDAuODU5LTYuNTY3LDIuNTY4Yy0xLjcwOSwxLjcxMy0yLjU2OCwzLjkwMy0yLjU2OCw2LjU2N3YxOC4yNzQgICAgYzAsMi42NjQsMC44NTUsNC44NTQsMi41NjgsNi41NjRjMS43MTQsMS43MTIsMy45MDQsMi41NjgsNi41NjcsMi41NjhoMjcuNDA2djI3MS44YzAsMTUuODAzLDQuNDczLDI5LjI2NiwxMy40MTgsNDAuMzk4ICAgIGM4Ljk0NywxMS4xMzksMTkuNzAxLDE2LjcwMywzMi4yNjQsMTYuNzAzaDIzNy41NDJjMTIuNTY2LDAsMjMuMzE5LTUuNzU2LDMyLjI2NS0xNy4yNjhjOC45NDUtMTEuNTIsMTMuNDE1LTI1LjE3NCwxMy40MTUtNDAuOTcxICAgIFYxMDkuNjI3aDI3LjQxMWMyLjY2MiwwLDQuODUzLTAuODU2LDYuNTYzLTIuNTY4YzEuNzA4LTEuNzA5LDIuNTctMy45LDIuNTctNi41NjRWODIuMjIxICAgIEM0MjAuMjYsNzkuNTU3LDQxOS4zOTcsNzcuMzY3LDQxNy42ODksNzUuNjU0eiBNMTY5LjMwMSwzOS42NzhjMS4zMzEtMS43MTIsMi45NS0yLjc2Miw0Ljg1My0zLjE0aDkwLjUwNCAgICBjMS45MDMsMC4zODEsMy41MjUsMS40Myw0Ljg1NCwzLjE0bDEzLjcwOSwzMy40MDRIMTU1LjMxMUwxNjkuMzAxLDM5LjY3OHogTTM0Ny4xNzMsMzgwLjI5MWMwLDQuMTg2LTAuNjY0LDguMDQyLTEuOTk5LDExLjU2MSAgICBjLTEuMzM0LDMuNTE4LTIuNzE3LDYuMDg4LTQuMTQxLDcuNzA2Yy0xLjQzMSwxLjYyMi0yLjQyMywyLjQyNy0yLjk5OCwyLjQyN0gxMDAuNDkzYy0wLjU3MSwwLTEuNTY1LTAuODA1LTIuOTk2LTIuNDI3ICAgIGMtMS40MjktMS42MTgtMi44MS00LjE4OC00LjE0My03LjcwNmMtMS4zMzEtMy41MTktMS45OTctNy4zNzktMS45OTctMTEuNTYxVjEwOS42MjdoMjU1LjgxNVYzODAuMjkxeiIgZmlsbD0iI2ZmOWNhZSIvPgoJCTxwYXRoIGQ9Ik0xMzcuMDQsMzQ3LjE3MmgxOC4yNzFjMi42NjcsMCw0Ljg1OC0wLjg1NSw2LjU2Ny0yLjU2N2MxLjcwOS0xLjcxOCwyLjU2OC0zLjkwMSwyLjU2OC02LjU3VjE3My41ODEgICAgYzAtMi42NjMtMC44NTktNC44NTMtMi41NjgtNi41NjdjLTEuNzE0LTEuNzA5LTMuODk5LTIuNTY1LTYuNTY3LTIuNTY1SDEzNy4wNGMtMi42NjcsMC00Ljg1NCwwLjg1NS02LjU2NywyLjU2NSAgICBjLTEuNzExLDEuNzE0LTIuNTY4LDMuOTA0LTIuNTY4LDYuNTY3djE2NC40NTRjMCwyLjY2OSwwLjg1NCw0Ljg1MywyLjU2OCw2LjU3QzEzMi4xODYsMzQ2LjMxNiwxMzQuMzczLDM0Ny4xNzIsMTM3LjA0LDM0Ny4xNzJ6IiBmaWxsPSIjZmY5Y2FlIi8+CgkJPHBhdGggZD0iTTIxMC4xMjksMzQ3LjE3MmgxOC4yNzFjMi42NjYsMCw0Ljg1Ni0wLjg1NSw2LjU2NC0yLjU2N2MxLjcxOC0xLjcxOCwyLjU2OS0zLjkwMSwyLjU2OS02LjU3VjE3My41ODEgICAgYzAtMi42NjMtMC44NTItNC44NTMtMi41NjktNi41NjdjLTEuNzA4LTEuNzA5LTMuODk4LTIuNTY1LTYuNTY0LTIuNTY1aC0xOC4yNzFjLTIuNjY0LDAtNC44NTQsMC44NTUtNi41NjcsMi41NjUgICAgYy0xLjcxNCwxLjcxNC0yLjU2OCwzLjkwNC0yLjU2OCw2LjU2N3YxNjQuNDU0YzAsMi42NjksMC44NTQsNC44NTMsMi41NjgsNi41N0MyMDUuMjc0LDM0Ni4zMTYsMjA3LjQ2NSwzNDcuMTcyLDIxMC4xMjksMzQ3LjE3MnogICAgIiBmaWxsPSIjZmY5Y2FlIi8+CgkJPHBhdGggZD0iTTI4My4yMiwzNDcuMTcyaDE4LjI2OGMyLjY2OSwwLDQuODU5LTAuODU1LDYuNTctMi41NjdjMS43MTEtMS43MTgsMi41NjItMy45MDEsMi41NjItNi41N1YxNzMuNTgxICAgIGMwLTIuNjYzLTAuODUyLTQuODUzLTIuNTYyLTYuNTY3Yy0xLjcxMS0xLjcwOS0zLjkwMS0yLjU2NS02LjU3LTIuNTY1SDI4My4yMmMtMi42NywwLTQuODUzLDAuODU1LTYuNTcxLDIuNTY1ICAgIGMtMS43MTEsMS43MTQtMi41NjYsMy45MDQtMi41NjYsNi41Njd2MTY0LjQ1NGMwLDIuNjY5LDAuODU1LDQuODUzLDIuNTY2LDYuNTdDMjc4LjM2NywzNDYuMzE2LDI4MC41NSwzNDcuMTcyLDI4My4yMiwzNDcuMTcyeiIgZmlsbD0iI2ZmOWNhZSIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=)
		no-repeat;
}
.sidebar {
	background: rgba(0, 255, 0, 0.1);
	padding: 25px 0;
	height: 100px;
	text-align: center;
}
.sidebar .grid-stack-item {
	width: 120px;
	height: 50px;
	border: 2px dashed green;
	text-align: center;
	line-height: 35px;
	background: rgba(0, 255, 0, 0.1);
	cursor: default;
	display: inline-block;
}
.sidebar .grid-stack-item .grid-stack-item-content {
	background: none;
}

.grid-stack-item > .grid-stack-item-content {
	inset: 5px !important;
}

/* make nested grid have slightly darker bg take almost all space (need some to tell them apart) so items inside can have similar to external size+margin */
.grid-stack > .grid-stack-item.grid-stack-sub-grid > .grid-stack-item-content {
	background: rgba(0, 0, 0, 0.1);
	inset: 0 2px;
}
.grid-stack.grid-stack-nested {
	background: none;
	/* background-color: red; */
	/* take entire space */
	position: absolute;
	inset: 0; /* TODO change top: if you have content in nested grid */
}

.menu_line.zoom_ctrl,
.menu_line.plus_minus_ctrl,
.menu_line.rot_ctrl {
	line-height: 30px;
	height: 35px;
	text-align: center;
	position: relative;
	min-width: 180px;
}

BODY.touch-ui .menu_line.zoom_ctrl,
BODY.touch-ui .menu_line.plus_minus_ctrl,
BODY.touch-ui .menu_line.rot_ctrl {
	margin-top: 2px !important;
}

.menu_line.zoom_ctrl .minus,
.menu_line.plus_minus_ctrl .minus,
.menu_line.rot_ctrl .rot-left {
	left: 5px;
}

.menu_line.zoom_ctrl .val,
.menu_line.plus_minus_ctrl .val,
.menu_line.rot_ctrl .val {
	display: block;
	margin: 0px 0px 0px 0px;
	float: none;
	padding: 0px;
	background: transparent;
	border: 0px;
	width: auto;
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0px);
	width: calc(100% - 100px);
	top: 4px;
}

.menu_line.zoom_ctrl .plus,
.menu_line.plus_minus_ctrl .plus,
.menu_line.rot_ctrl .rot-right {
	right: 5px;
}

.menu_line.zoom_ctrl .minus,
.menu_line.zoom_ctrl .plus,
.menu_line.buttons_right .left,
.menu_line.buttons_right .right,
.menu_line.plus_minus_ctrl .minus,
.menu_line.plus_minus_ctrl .plus,
.menu_line.rot_ctrl .rot-left,
.menu_line.rot_ctrl .rot-right {
	position: absolute;
	bottom: 5px;
	display: block;
	width: 40px;
	height: 30px;
	cursor: pointer;
	font-weight: bold;
	font-size: 20px;
	border-radius: 5px;
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
	top: 2px;
}

.menu_line.zoom_ctrl .minus,
.menu_line.zoom_ctrl .plus,
.menu_line.buttons_right .left,
.menu_line.buttons_right .right,
.menu_line.plus_minus_ctrl .minus,
.menu_line.plus_minus_ctrl .plus,
.menu_line.rot_ctrl .rot-left,
.menu_line.rot_ctrl .rot-right,
.menu_line.buttons_right .left,
.menu_line.buttons_right .right {
	background-color: #383838;
}

.menu_line.zoom_ctrl .minus:hover,
.menu_line.zoom_ctrl .plus:hover,
.menu_line.buttons_right .left:hover,
.menu_line.buttons_right .right:hover,
.menu_line.plus_minus_ctrl .minus:hover,
.menu_line.plus_minus_ctrl .plus:hover,
.menu_line.rot_ctrl .rot-left:hover,
.menu_line.rot_ctrl .rot-right:hover,
.menu_line.buttons_right .left:hover,
.menu_line.buttons_right .right:hover {
	background-color: #0051ff;
}

.menu_line.buttons_right .left,
.menu_line.buttons_right .right {
	position: relative;
    float: right;
    top: -3px;
    height: 21px;
    border: 0px;
    line-height: 10px;
    margin-left: 4px;
    margin: 0px 0px 0px 5px;
    padding: 0px;
}

.menu_line.rot_ctrl .rot-left .icon,
.menu_line.rot_ctrl .rot-right .icon {
	background-image: url(/static/graph//icon-rotate.png);
	background-size: 40px;
	background-repeat: no-repeat;
	position: absolute;
	width: 20px;
	height: 20px;
	left: 10px;
	top: 7px;
	background-position: 0px 0px;
}

.menu_line.rot_ctrl .rot-right .icon {
	background-position: -20px 0px;
}

.menu_line.zoom_ctrl .minus:hover,
.menu_line.zoom_ctrl .plus:hover,
.menu_line.plus_minus_ctrl .minus:hover,
.menu_line.plus_minus_ctrl .plus:hover,
.menu_line.rot_ctrl .rot-left:hover,
.menu_line.rot_ctrl .rot-right:hover {
	background-color: #006dff;
}

#page_message {
	font-size: 16px;
	padding: 15px;
	margin: 0px;
	text-align: center;
	display: none;
	position: fixed;
	width: 100%;
	top: 0px;
	height: 20px;
	z-index: 16; /* above hovered grid panel (15) */
}

#page_message.error {
	background-color: #cc0000;
	color: #fff;
	display: block;
}

BODY.has-page-message {
	padding-top: 50px;
}

BODY.has-page-message #fixed-header {
	margin-top: 50px;
}

#page_message.error A {
	color: #fff;
}

BODY.desktop-ui #bottom-links {
	text-align: right;
	/* margin-top: 20px; */
	padding: 30px 10px 10px 10px;
	color: #ffffff23;
	font-size: 13px;
}

BODY.desktop-ui #bottom-links,
BODY.simple #bottom-links  {
	text-align: right;
	padding: 7px 10px 7px 10px;
	color: #ffffff23;
	font-size: 13px;
	/* background: #000000d1; */
	/* float: right; */
	border-radius: 5px 0px 0px 0px;
	position: absolute;
	right: 0px;
	top: calc(100% - 40px);
}

#bottom-links.hidden {
	display: none;
}

BODY.desktop-ui #bottom-links I,
BODY.simple #bottom-links I {
	margin-right: 4px;
}

BODY.hamburger #bottom-links I {
	margin-right: 2px;
}

BODY.hamburger #bottom-links I.bm-hide {
	display: none;
}

BODY.hamburger #bottom-links SPAN {
	display: inline-block;
	margin-top: 5px;
}

BODY.hamburger SPAN#bridge-docs-link {
	display: block;
}

BODY.hamburger.touch-ui #bottom-links SPAN#fullscreen-toggle {
	display: block;
	position: absolute;
	width: 35px;
	height: 40px;
	right: 10px;
	bottom: 8px;
	margin: 0px;
	padding: 0px;
	background-image: url(/static/graph/icon-fullscreen.png);
	background-size: 70px;
	background-repeat: no-repeat;
	background-position: 0px 0px;
}

@supports (-webkit-touch-callout: none) {
	BODY.hamburger.touch-ui #bottom-links SPAN#fullscreen-toggle {
		display: none; /* use "hide toolbar" on ios */
	}
}

BODY.hamburger.touch-ui #bottom-links SPAN#fullscreen-toggle:active {
	background-color: #013669;
}

BODY.hamburger.touch-ui #bottom-links SPAN#fullscreen-toggle.enabled {
	background-position: -35px 0px;
}

BODY.hamburger #bottom-links {
	text-align: left;
	position: absolute;
	left: 20px;
	width: 245px;
	bottom: 10px;
	padding: 7px 10px 7px 0px;
	color: #ffffff23;
	font-size: 12px;
	line-height: 15px;
	top: unset !important;
}

BODY.hamburger #bottom-links.inline {
	display: block;
	position: relative;
	left: 0px;
	/* top: 0px !important; */
	bottom: unset;
	/* background: lime; */
	clear: both;
	margin-top: 10px;
	float: left;
}

#bottom-links A, #bottom-links A:hover {
	color: #ffffff4a;
	margin: 0px 4px 0px 0px;
	line-height: 20px;
	display: inline-block;
	text-decoration: underline;
}

#bridge-version-info A,
#bridge-ui-version-info A {
	color: #ffffff23;
	text-decoration: none;
	font-size: 12px !important;
}

BODY.hamburger #bottom-links A {
	color: #ffffff4a;
	margin: 0px 4px 0px 0px;
	/* line-height: 20px; */
	display: inline-block;
	font-size: 16px;
}

#bottom-links A.credits {
	background-image: url(/static/favicons/favicon-farhand-16x16.png);
	background-repeat: no-repeat;
	padding-left: 19px;
	background-size: 16px;
	/* filter: opacity(-0.5); */
	background-position: 0px 2px;
}

BODY.touch-ui .grid-stack-item > .ui-resizable-se {
	width: 30px;
	height: 30px;
}

BODY.touch-ui .grid-stack-item > .ui-resizable-ne,
BODY.touch-ui .grid-stack-item > .ui-resizable-nw,
BODY.touch-ui .grid-stack-item > .ui-resizable-se,
BODY.touch-ui .grid-stack-item > .ui-resizable-sw {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 20 20"><path d="m10 3 2 2H8l2-2v14l-2-2h4l-2 2"/></svg>') !important;
}

#touch-gamepad-left,
#touch-gamepad-right {
	display: none;
}

BODY.touch-gamepad #touch-gamepad-left,
BODY.touch-gamepad #touch-gamepad-right {
	position: fixed;
	/* background-color: cyan; */
	width: 50%;
	height: auto;
	left: 0px;
	bottom: 0px;
	top: 55px;
	display: block;
	z-index: 15; /* above gridstack, below fixed-top */
	/* border: 3px solid lime; */
}

BODY.touch-gamepad #touch-gamepad-right {
	/* background-color: magenta; */
	left: unset;
	right: 0px;
}

BODY.touch-gamepad.gamepad-editing #touch-gamepad-left,
BODY.touch-gamepad.gamepad-editing #touch-gamepad-right {
	position: absolute;
	width: 100%; /* small inactive gap to avoid gamepads in the other ui */
	height: 100%;
	top: 0px;
	z-index: 1 !important; /* under the gamepad editing central panel */
}

#gamepad-settings-panel {
	font-size: 16px;
	/* background: magenta; */
	/* max-height: calc(100dvh - 220px); */
	/* overflow-y: scroll; */
}

BODY.desktop-ui #gamepad-settings-panel {
	font-size: 14px;
}

#gamepad-settings-panel .line {
	position: relative;
	margin-bottom: 5px;
	clear: both;
	display: block;
	height: 30px;
}

#gamepad-settings-panel .line .label {
	height: 30px;
	width: 40%;
	float: left;
	line-height: 30px;
	display: block;
	opacity: 0.5;
	padding-left: 5px;
	/* background: lime; */
}

#gamepad-settings-panel .line INPUT,
#gamepad-settings-panel .line SELECT {
	width: calc(60% - 20px) !important;
	float: left;
	margin: 0px;
	border: 0px;
	height: 30px;
	padding: 0px 0px 0px 10px !important;
	background-color: #423a81 !important;
	color: #fff !important;
	border-radius: 5px;
	outline: none;
	font-size: 16px;
}
#gamepad-settings-panel .line SELECT {
	width: calc(60% - 10px) !important;
	padding-left: 5px !important;
}

#gamepad-settings-panel .line INPUT.error,
#gamepad-settings-container TEXTAREA.error {
	background-color: #be1e1e !important;
	color: #fff;
}

#gamepad_settings .line .static_val,
#gamepad_settings .config-row .static_val {
	line-height: 30px;
	white-space: nowrap;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-left: 10px;
	font-size: 16px;
	color: #a3a0bd;
}

#gamepad_settings .config-row .static_val.msg_type {
	font-size: 12px;
	text-decoration: underline;
	text-decoration-style: dashed;
	cursor: help;
}

#gamepad_settings .config-row .static_val {
	float: right;
	width: 50%;
}

#gamepad_settings .config-row .static_val.wide {
	width: 75%;
}

BODY.desktop-ui #gamepad-settings-panel .bottom-buttons BUTTON {
	line-height: 20px;
	font-size: 12px;
	height: 30px;
}
BODY.desktop-ui #gamepad-settings-panel .bottom-buttons {
	height: 40px;
}

BODY.desktop-ui #gamepad-settings-panel.has-buttons {
	padding-bottom: 40px !important;
}

#gamepad-settings-panel .bottom-buttons BUTTON:last-of-type {
	margin-right: 0px;
}

#gamepad-settings-panel .bottom-buttons BUTTON#save-input-profile {
	background-color: #e90fe9;
	color: white;
}

#gamepad-settings-panel .line .comment {
	margin-left: 40%;
	margin-top: 5px;
	margin-bottom: 5px;
	font-size: 12px;
	padding-left: 10px;
	display: block;
	/* background: lime; */
	width: calc(60% - 10px);
	float: left;
	opacity: 0.5;
	text-decoration: underline;
	text-decoration-style: dashed;
	cursor: help;
}

#gamepad-settings-panel .line .type-hint {
	cursor: help;
}

#gamepad-settings-panel .driver-error {
	background: #be1e1e;
    display: block;
    border-radius: 5px;
    padding: 5px;
    font-size: 14px;
    text-align: left;
    clear: both;
    margin-top: 5px;
    float: left;
	width: calc(100% - 10px);
}

#gamepad-buttons-panel BUTTON {
	line-height: 30px;
	padding: 5px 20px;
	border-radius: 5px;
	border: 0px;
	background-color: #f000d0;
	font-size: 15px;
	margin: 0px 0px 0px 5px;
	float: right;
	height: 40px;
	font-weight: bold;
}

#gamepad-buttons-panel BUTTON#add-button-btn {
	width: auto;
	margin-top: 5px;
	position: relative;
	padding-left: 19px;
	background: transparent;
	font-size: 12px;
	font-weight: normal;
	text-decoration: underline;
	height: auto;
	float: right;
	padding-right: 6px;
	line-height: 18px !important;
	margin-left: 0px !important;
}

#gamepad-buttons-panel BUTTON#add-button-btn .icon {
	display: block;
	position: absolute;
	left: 0px;
	top: 7px;
	width: 15px;
	height: 15px;
	background-image: url(/static/graph/icon-plus.png);
	background-size: 16px;
	background-repeat: no-repeat;
}

#gamepad-buttons-panel .error,
#gamepad-axes-panel .error {
	background: red;
	display: block;
	padding: 10px;
	border-radius: 2px;
	text-align: center;
	color: white;
	font-size: 15px;
	margin-top: -5px;
}

#gamepad-axes-panel .waiting-for-controller,
#gamepad-buttons-panel .waiting-for-controller {
	padding: 10px 5px 11px 5px;
	font-size: 14px;
	line-height: 14px;
	display: block;
}

#gamepad_settings #gamepad-output-panel {
	white-space: pre;
	font-size: 12px;
	line-height: 12px;
	font-family: monospace;
	padding: 21px 10px 17px 10px;
}

#input-controller-selection {
	height: 40px;
	margin-bottom: 5px;
	margin-top: 5px;
	width: calc(100% - 45px);
}

#input-controller-selection span {
	display: block;
	height: 45px;
	width: 60px;
	float: left;
	margin-right: 5px;
	background-repeat: no-repeat;
	cursor: pointer;
	background-color: #7166cf;
	border-radius: 5px 5px 0px 0px;
}

#input-controller-selection span.disabled {
	opacity: 0.25;
	background-color: transparent;
	filter: blur(1.5px);
	cursor: default;
}

#input-controller-selection span.editing {
	background-color: #3a3376;
	height: 50px;
	border-radius: 5px 5px 0px 0px;
	cursor: default;
}

#input-controller-config {
	background-color: #3a3376;
	padding: 5px 0px 0px 0px;
	border-radius: 0px 0px 5px 5px;
	position: relative;
}

#input-controller-selection span.touch {
	background-image: url(/static/graph/touch-input.png);
	background-size: 200px;
	background-position: 10px 6px;
}
#input-controller-selection span.touch.enabled {
	background-position: -41px 6px; /* green */
}
#input-controller-selection span.touch.transmitting {
	background-position: -92px 6px !important; /* yelow */
}
#input-controller-selection span.touch.error {
	background-position: -142px 6px !important; /* red */
}

#input-controller-selection span.keyboard {
	background-image: url(/static/graph/keyboard.png);
	background-size: 255px;
	background-position: 7px 12px;
}
#input-controller-selection span.keyboard.enabled {
	background-position: -67px 12px;
}
#input-controller-selection span.keyboard.transmitting {
	background-position: -136px 12px !important;
}
#input-controller-selection span.keyboard.error {
	background-position: -203px 12px !important;
}

#input-controller-selection span.gamepad {
	background-image: url(/static/graph/gamepad.png);
	background-size: 246px;
	background-position: 5px 5px;
}

#input-controller-selection span.gamepad.enabled {
	background-position: -59px 5px;
}
#input-controller-selection span.gamepad.transmitting {
	background-position: -123px 5px !important;
}
#input-controller-selection span.gamepad.error {
	background-position: -188px 5px !important;
}

#profile-edit-panel {
	display: none;
	background-color: #7166cf;
	height: 65px;
	padding: 5px;
	border-radius: 0px 0px 5px 5px;
}

.editing_profile_basics #profile-edit-panel {
	display: block;
}

.editing_profile_basics #profile-buttons > .icon {
	background-color: #e90fe9;
	border-radius: 0px 5px 0px 0px;
	background-image: url(/static/graph/icon-check.png);
	background-size: 32px;
	background-position: 7px 6px;
	cursor: pointer;
}
BODY.desktop-ui .editing_profile_basics #profile-buttons > .icon {
	background-size: 25px;
	background-position: 10px 9px;
}
BODY.desktop-ui .editing_profile_basics #profile-buttons > .icon:hover {
	background-color: #fb1ffb;
}

.editing_profile_basics #input-profile-select {
	border-radius: 10px 0px 0px 0px !important;
}

#profile-edit-panel .row .label {
	height: 30px;
	width: calc(25% - 5px);
	float: left;
	line-height: 30px;
	display: block;
	opacity: 0.5;
	padding-left: 5px;
	font-size: 15px;
}

#profile-edit-panel .row INPUT {
	width: calc(75% - 10px) !important;
	float: left;
	margin: 0px 0px 5px 0px;
	border: 0px;
	height: 30px;
	padding: 0px 0px 0px 10px !important;
	background-color: #423a81 !important;
	color: #fff !important;
	border-radius: 5px;
	outline: none;
	font-size: 16px;
}

.touch_buttons {
	text-align: center;
	overflow: hidden;
	white-space: nowrap;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}
.touch_buttons.ui-sortable {
	/* background-color: darkmagenta;
    border-radius: 5px; */
}
.touch_buttons LI {
	list-style-type: none;
	margin: 0px;
	padding: 6px 0px 5px 0px;
	display: inline-block;
	/* background-color: blue;; */
}

.touch_buttons#touch-ui-top-buttons {
}

.touch_buttons#touch-ui-bottom-buttons {
	display: none;
	position: absolute;
	left: 0px;
	bottom: 5px;
	width: 100%;
	overflow: unset;
	height: 50px;
	z-index: 17; /* above touch gamepad */
	overflow: unset;
	overflow-x: clip;
}

.touch_buttons#touch-ui-bottom-buttons LI {
	padding: 0px;
}

/* BODY.touch-bottom-buttons.touch-gamepad.gamepad-editing .touch_buttons#touch-ui-bottom-buttons {
    z-index: 16;
} */

BODY.touch-bottom-buttons.touch-gamepad #touch-ui-bottom-buttons.touch_buttons {
	display: block;
	position: fixed;
	bottom: -50px;
}

BODY.touch-bottom-buttons.touch-gamepad
	#touch-ui-bottom-buttons.touch_buttons.ui-sortable {
	background-color: #00000099;
	height: 70px;
	bottom: 0px;
}

BODY.touch-bottom-buttons.touch-gamepad.gamepad-editing
	#touch-ui-bottom-buttons.touch_buttons {
	background-color: #00000099;
	height: 50px;
	bottom: 0px;
}

.touch_buttons .btn {
	height: 40px;
	border: 0px;
	outline: 0px;
	border-radius: 10px;
	margin: 0px 2px 0px 2px;
	padding: 0px 10px;
	background-color: #000000bf;
	color: #fff;
	border: 2px solid #033669;
	font-size: 14px;
	line-height: 40px;
	position: relative;
}

.touch_buttons .btn.disabled {
	opacity: 0.2;
}

@keyframes sorting_wobble {
	0% {
		rotate: 3deg;
	}
	/* 25%  {rotate: -5deg} */
	50% {
		rotate: -3deg;
	}
	/* 75%  {rotate: -5deg} */
	100% {
		rotate: 3deg;
	}
}

.touch_buttons.ui-sortable .btn {
	border-style: dotted;
	/* animation-name: sorting_wobble;
    animation-duration: .2s;
    animation-iteration-count: infinite; */
	/* color: yellow; */
}

.touch_buttons .btn:active,
.touch_buttons .btn.working {
	background-color: #033669;
}

.ui-sortable-helper {
	/* background:red; */
}

.ui-sortable-placeholder {
	/* background:blue; */
	display: inline-block !important;
	padding: 0px;
	margin: 0px;
	height: 20px !important;
	/* visibility: visible !important; */
}

BODY.touch-bottom-buttons.touch-gamepad .touch_buttons#touch-ui-bottom-buttons .btn {
	top: -65px;
	margin-top: 0px;
	line-height: 50px;
	height: 50px;
	padding-left: 20px;
	padding-right: 20px;
	font-size: 20px;
}

BODY.touch-bottom-buttons.touch-gamepad
	.touch_buttons#touch-ui-bottom-buttons.ui-sortable
	.btn {
	top: 5px;
}

BODY.touch-bottom-buttons.touch-gamepad.gamepad-editing
	.touch_buttons#touch-ui-bottom-buttons
	.btn {
	top: 4px;
	height: 38px;
	font-size: 14px;
	line-height: 38px;
}

.touch_buttons .btn.red {
	border-color: red;
}
.touch_buttons .btn.red:active,
.touch_buttons .btn.red.working {
	background-color: red;
}

.touch_buttons .btn.green {
	border-color: lime;
}
.touch_buttons .btn.green:active,
.touch_buttons .btn.green.working {
	background-color: lime;
	color: black;
}

.touch_buttons .btn.blue {
	border-color: blue;
}
.touch_buttons .btn.blue:active,
.touch_buttons .btn.blue.working {
	background-color: blue;
}

.touch_buttons .btn.yellow {
	border-color: yellow;
}
.touch_buttons .btn.yellow:active,
.touch_buttons .btn.yellow.working {
	background-color: yellow;
	color: black;
}

.touch_buttons .btn.orange {
	border-color: orange;
}
.touch_buttons .btn.orange:active,
.touch_buttons .btn.orange.working {
	background-color: orange;
	color: black;
}

.touch_buttons .btn.magenta {
	border-color: magenta;
}
.touch_buttons .btn.magenta:active,
.touch_buttons .btn.magenta.working {
	background-color: magenta;
	color: black;
}

.touch_buttons .btn.cyan {
	border-color: cyan;
}

.touch_buttons .btn.cyan:active,
.touch_buttons .btn.cyan.working {
	background-color: cyan;
	color: black;
}

#gamepad #gamepad_settings .config-row .small-settings-cb {
	padding: 0px;
	margin: 6px 6px 0px 0px;
	float: left;
	margin-left: calc(35% + 5px);
	height: 20px;
	width: 20px;
}

#gamepad #gamepad_settings .config-row .small-settings-cb-label {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	position: relative;
	top: 1px;
}

#gamepad #gamepad_settings .srv-settings .config-row {
	margin-left: 67px;
}

#gamepad #gamepad_settings BUTTON.srv-val {
	position: absolute;
	background: #26214b;
	color: white;
	font-weight: normal;
	width: 45px;
	font-weight: bold;
	border: 0px;
	border-radius: 5px;
	padding: 0px 10px;
	margin: 4px 5px 0px 1px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	/* width: 60px; */
	height: 55px;
	line-height: 55px;
	left: 35%;
}

#gamepad #gamepad_settings BUTTON.srv-val:hover {
	background-color: white;
	color: black;
}

#notifications {
	display: block;
	position: fixed;
	z-index: 220;
	width: calc(100% - 20px);
	left: 10px;
	top: 60px;
	pointer-events: none;
}

@keyframes msg_err_shake {
	0% {
		left: 0px;
	}
	25% {
		left: 3px;
	}
	75% {
		left: -3px;
	}
	100% {
		left: 0px;
	}
}

.btn_err {
	animation-name: msg_err_shake;
	animation-duration: 0.2s;
	animation-iteration-count: 3;
}

@keyframes msg_fade_in_out {
	0% {
		opacity: 0;
	}
	0.06% {
		opacity: 1;
	}
	95% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

#notifications .msg {
	display: block;
	position: relative;
	padding: 10px;
	background-color: yellow;
	color: black;
	border-radius: 5px;
	overflow: hidden;
	max-width: 80%;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-bottom: 2px;
	width: max-content;

	animation-name: msg_fade_in_out; /* fades out msg before js removes it */
	animation-duration: 4s;
	animation-iteration-count: 1;

	pointer-events: auto;
	filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.2));

	cursor: pointer;
}

#notifications .msg A {
	color: black;
}

#notifications .msg .title {
	display: block;
	margin-right: 60px;
	white-space: nowrap;
	overflow: hidden;
	/* background-color: blue; */
}

#notifications .msg.unpinned {
	position: absolute;
	z-index: 1; /* above pinned */
}

#notifications .msg.unpinned .title {
	cursor: move;
	margin-right: 25px;
}

#notifications .msg .detail {
	display: block;
	margin-top: 10px;
	font-size: 12px;
	overflow: scroll;
	scrollbar-width: none;
	max-height: 300px;
	overflow: scroll;
	overscroll-behavior: none;
	scrollbar-width: none;
}

#notifications .msg.unpinned .detail {
	height: calc(100% - 30px);
	max-height: 90vh;
}

#notifications .msg .detail PRE {
	font-family: monospace;
}

#notifications .msg.success {
	padding-left: 30px;
}

#notifications .msg.success .icon {
	display: block;
	width: 30px;
	height: 30px;
	/* background-color: blue; */
	position: absolute;
	left: 3px;
	top: 4px;
	background-image: url(/static/graph/icon-check.png);
	background-size: 20px;
	background-repeat: no-repeat;
	background-position: 5px 5px;
	filter: invert(1);
}

#notifications .msg.open {
	cursor: unset;
	white-space: unset;

	/* padding-right: 40px; */

	max-width: 80%;
	animation-name: unset;
	animation-duration: unset;
	animation-iteration-count: unset;
}

#notifications .msg.error {
	background-color: red;
	color: white;
}

#notifications .msg.error A {
	color: white;
}

#notifications .msg.open .close,
#notifications .msg.open .pin {
	display: block;
	width: 30px;
	height: 30px;
	/* background-color: blue; */
	position: absolute;
	right: 5px;
	top: 4px;
	background-image: url(/static/graph/remove.png);
	background-size: 20px;
	background-repeat: no-repeat;
	background-position: 5px 5px;
	filter: invert(1); /* black on yellow */
	cursor: pointer;
}

#notifications .msg.open .close:hover,
#notifications .msg.open .pin:hover {
	background-color: black;
	filter: unset; /* white on black */
	border-radius: 5px;
}

#notifications .msg.open .pin {
	right: 32px;
	background-image: url(/static/graph/icon-unpin.svg);
	background-size: 20px;
	background-repeat: no-repeat;
	background-position: 5px 5px;
}

#notifications .msg.unpinned .pin {
	display: none;
}

#notifications .msg.error.open .close,
#notifications .msg.error.open .pin {
	filter: unset; /* white on red */
}

#dialog-modal-confirm {
	display: none;
	position: fixed;
	background-color: #210077;
	z-index: 200;
	min-width: 400px;
	padding: 20px;
	width: 30%;
	font-size: 17px;
	color: #fff;
	border-radius: 10px;
	left: calc(50% - max(440px, calc(30% + 40px)) / 2);
	top: 20%;
}

#dialog-modal-confirm A {
	color: #fff;
}

#dialog-modal-confirm .warn-icon {
	display: block;
	width: 50px;
	height: 50px;
	float: left;
	margin-right: 18px;
	text-align: center;
	line-height: 40px;
	font-size: 50px;
	font-weight: bold;
	font-family: emoji;
	margin-top: 10px;
	height: 65px;
	background-image: url("/static/graph/warning.svg");
	background-size: 50px;
	background-repeat: no-repeat;
}

#dialog-modal-confirm.warn {
	background: #980303;
	color: #fff;
}

#dialog-modal-confirm-underlay {
	z-index: 199;
}

#dialog-modal-confirm-buttons {
	margin-top: 20px;
	text-align: center;
}

#dialog-modal-confirm-buttons BUTTON {
	display: block;
	background: black;
	color: white;
	line-height: 40px;
	border: 0px;
	outline: 0px;
	padding: 0px 15px;
	margin: 0px 0px 0px 5px;
	border-radius: 5px;
	font-weight: bold;
	float: right;
}

BODY.desktop-ui #dialog-modal-confirm-buttons BUTTON:hover {
	background-color: rgb(25, 25, 25);
}

#dialog-modal-confirm-buttons BUTTON:active {
	background-color: yellow;
	color: black;
}

#dialog-modal-confirm-buttons LABEL {
	display: block;
	float: left;
	line-height: 40px;
	font-size: 15px;
}

#dialog-modal-confirm-buttons LABEL INPUT {
	margin: 0px 5px 0px 0px;
	position: relative;
	top: 1px;
	outline: none;
}

#about-dialog {
    display: none;
    position: fixed;
    background-color: #021d61de;
    z-index: 200;
    /* min-width: 520px; */
    padding: 20px;
    min-width: min(970px, calc(100% - 100px));
    max-width: min(500px, calc(100% - 100px));
    /* max-height: calc(100% - 100px); */
    font-size: 17px;
    color: #fff;
    border-radius: 10px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 22px;
    text-align: left;
    overflow: hidden;
}

#about-dialog #about-dialog-header {
    margin-bottom: 10px;
}

#about-dialog #about-dialog-content {
    overflow: scroll;
    background-color: #031139;
    margin-bottom: 40px;
    max-height: calc(100vh - 300px);
    padding: 10px;
    border-radius: 10px;
    text-align: left;
	scrollbar-width: none;
}

BODY.portrait #about-dialog #about-dialog-content {
	max-height: calc(100vh - 400px);
}

#about-dialog-buttons {
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
}

#about-dialog H2 {
	font-size: 30px;
	padding: 9px 0px 0px 0px;
	display: block;
	margin: 0px;
}

#about-dialog-buttons {
    margin-top: 20px;
    text-align: center;
}

#about-dialog-buttons BUTTON {
	display: block;
	background: black;
	color: white;
	line-height: 40px;
	border: 0px;
	outline: 0px;
	padding: 0px 15px;
	margin: 0px auto;
	border-radius: 5px;
	font-weight: bold;
	position: relative;
}

#about-dialog A {
	color: #fff;
}

#about-dialog A.external {
	padding-right: 17px;
	background-image: url("/static/graph/icon-external-link.svg");
	background-position: right;
	background-size: 15px;
	background-repeat: no-repeat;
}

.marker_label,
.detection_label {
	padding: 5px;
	border-radius: 3px;
	white-space: pre;
	background-color: rgba(0, 0, 0, 0.5);
	/* border: 1px solid rgba(0,0,0,0.5); */
	color: #ffffff;
	font-size: 12px;
	text-align: center;
	cursor: pointer;
}

.marker_label:hover,
.detection_label:hover {
	background-color: rgba(255, 255, 0, 0.932);
	color: black;
	color: black;
}

.marker_label.focused {
	border: 1px solid rgba(255, 255, 0, 0.932);
	color: rgba(255, 255, 0, 0.932);
	padding: 4px;
}
.marker_label.focused:hover {
	color: black;
}

.marker_label.joint {
	text-align: right;
	margin-left: -5px;
}

.marker_label.link {
	text-align: left;
	margin-left: 5px;
}

.panel_widget.system-load {
	height: 100%;
	background-color: black;
}

.panel_widget.system-load .cpu-line,
.panel_widget.system-load .mem-line,
.panel_widget.system-load .swp-line,
.panel_widget.system-load .disk-line {
	position: relative;
	overflow: hidden;
	white-space: nowrap;
}

.panel_widget.system-load .cpu-line {
	padding-left: 25px;
}

.panel_widget.system-load .mem-line,
.panel_widget.system-load .swp-line {
	padding-left: 2px;
}

.panel_widget.system-load .disk-line {
	padding-left: 2px;
}

.panel_widget.system-load.thin .cpu-line,
.panel_widget.system-load.thin .mem-line,
.panel_widget.system-load.thin .swp-line,
.panel_widget.system-load.thin .disk-line {
	padding-left: 2px;
}

.panel_widget.system-load .label,
.panel_widget.system-load .cpu-label,
.panel_widget.system-load .disk-label,
.panel_widget.system-load .total-label {
	font-size: 12px;
	position: absolute;
	left: 5px;
	top: calc(50% - 8px);
	background: black;
	display: block;
	height: 16px;
	line-height: 16px;
	padding: 0px 6px;
	border-radius: 5px;
	z-index: 2;
	color: #fff;
	pointer-events: none;
}

.panel_widget.system-load.thin .label,
.panel_widget.system-load.thin .cpu-label,
.panel_widget.system-load.thin .disk-label,
.panel_widget.system-load.thin .total-label {
	display: none;
}

.panel_widget.system-load.narrow .disk-line .total-label,
.panel_widget.system-load.narrow .mem-line .total-label,
.panel_widget.system-load.narrow .swp-line .total-label {
	display: none;
}

.panel_widget.system-load.narrower .cpu-label {
	display: none;
}

.panel_widget.system-load.narrower .cpu-line .total-label {
	left: 7px;
	right: unset;
}

.panel_widget.system-load.narrower .cpu-line {
	padding-left: 2px;
}

.panel_widget.system-load .disk-label {
	left: 7px;
	background: black;
	max-width: 70%;
	overflow: hidden;
	text-overflow: ellipsis;
}

.panel_widget.system-load .mem-line .label,
.panel_widget.system-load .swp-line .label {
	left: 7px;
	background: black;
}

.panel_widget.system-load .total-label {
	left: unset;
	right: 4px;
}

.panel_widget.system-load .total-label.warn {
	background-color: rgb(255, 0, 0);
	color: #fff;
}

.panel_widget.system-load .bar {
	display: inline-block;
	height: 80%;
	top: 10%;
	position: relative;
	z-index: 1;
	cursor: help;
	background-image: repeating-linear-gradient(
		to right,
		transparent 0px 4px,
		#fff 5px 6px
	);
	background-position: -3px 0px;
}

.panel_widget.system-load.thin .bar {
	height: 100% !important;
	top: -3px !important;
	min-height: 2px !important;
}

.panel_widget.system-load .bar.cpu-nice,
.panel_widget.system-load .bar.mem-buffers {
	background-image: repeating-linear-gradient(
		to right,
		transparent 0px 4px,
		#676cfa 5px 6px
	);
}

.panel_widget.system-load .bar.disk-used {
	background-image: repeating-linear-gradient(
		to right,
		transparent 0px 4px,
		#00c6c7 5px 6px
	);
}

.panel_widget.system-load .bar.cpu-user,
.panel_widget.system-load .bar.mem-used {
	background-image: repeating-linear-gradient(
		to right,
		transparent 0px 4px,
		#00c52c 5px 6px
	);
}

.panel_widget.system-load .bar.cpu-system,
.panel_widget.system-load .bar.swp-used {
	background-image: repeating-linear-gradient(
		to right,
		transparent 0px 4px,
		#c71702 5px 6px
	);
}

.panel_widget.system-load .bar.cpu-idle {
	background-image: repeating-linear-gradient(
		to right,
		transparent 0px 4px,
		rgba(128, 128, 128) 5px 6px
	);
}

.panel_widget.system-load .bar.mem-shared {
	background-image: repeating-linear-gradient(
		to right,
		transparent 0px 4px,
		#c722bf 5px 6px
	);
}

.panel_widget.system-load .bar.mem-cached,
.panel_widget.system-load .bar.swp-cache {
	background-image: repeating-linear-gradient(
		to right,
		transparent 0px 4px,
		#c7c62d 5px 6px
	);
}

#service-input-dialog,
#node-params-dialog {
	display: none;
	z-index: 200;
	position: fixed;
	top: calc(10% - 10px);
	width: 80vw;
	max-width: 550px;
	left: calc(50% - Min(40vw, 275px) - 15px);
	border-radius: 10px;
}

#service-input-dialog H3,
#node-params-dialog H3 {
	cursor: move;
}

#service-input-dialog {
	background-color: #ecafed;
	padding: 10px 10px 55px 10px;
}

#node-params-dialog {
	background-color: #b1adad;
	padding: 10px 10px 10px 10px;
}

#service-input-dialog.narrow,
#service-input-dialog.thin,
#node-params-dialog.narrow,
#node-params-dialog.thin {
	width: calc(100% - 40px);
	left: 10px;
	top: -40px;
	max-width: unset; /* expand to full w*/
}

#service-input-dialog H3 {
	font-size: 20px;
	display: block;
	margin: 0px 0px 3px 0px;
	padding: 0px;
	overflow: hidden;
	text-overflow: ellipsis;
}

#service-input-dialog .msg_type {
	font-size: 12px;
	display: inline-block;
	color: #fff;
	margin-bottom: 5px;
	overflow: hidden;
	text-overflow: ellipsis;
	border-bottom: 1px dashed #fff;
	cursor: help;
}

#service-input-dialog .buttons {
	position: absolute;
	bottom: 10px;
	left: 10px;
	right: 5px;
}

#service-input-dialog .buttons BUTTON {
	background: #b311a3;
	color: white;
	font-weight: bold;
	border: 0px;
	border-radius: 5px;
	padding: 0px 10px;
	margin: 0px 5px 0px 0px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	/* width: 65px; */
	height: 40px;
	line-height: 42px;
	position: relative;
	cursor: pointer;
	float: right;
}

#service-input-dialog BUTTON:hover,
#service-input-dialog BUTTON.open {
	background-color: #dc31cb;
}

#service-input-dialog BUTTON.btn-close,
#service-input-dialog BUTTON.btn-rem {
	float: left;
}

#service-input-dialog BUTTON.btn-save {
	padding-left: 20px;
	padding-right: 20px;
	background-color: green;
}

#node-params-dialog BUTTON.btn-save.read-only {
	opacity: 0.5;
	cursor: not-allowed;
}

.service_button.working,
.service_button.working:hover,
#service-input-dialog BUTTON.btn-save.working,
#service-input-dialog BUTTON.btn-call.working,
#node-params-dialog BUTTON.working {
	cursor: wait;
	background: #ff8c00 !important;
}

#service-input-dialog BUTTON.btn-save:hover,
#node-params-dialog BUTTON.btn-save:not(.read-only):hover {
	background-color: rgb(7, 157, 7);
}

#service-input-dialog.narrow .wide,
#service-input-dialog .narrow {
	display: none;
}

#service-input-dialog.narrow BUTTON .narrow {
	display: inline;
}

#service-input-dialog .btns-line {
	/* width: 100%; */
	/* margin-bottom: 5px; */
	/* background: red; */
	clear: both;
	height: 55px;
	/* left: -5px; */
	position: relative;
	white-space: nowrap;
	overflow-x: scroll;
	overflow-y: visible;
	scrollbar-width: none;
	/* height: 60px; */
	position: absolute;
	width: calc(100% - 20px);
	height: 300px;
	overscroll-behavior: contain;
}

#service-input-dialog.narrow .btns-line {
	/* float: left;
    margin-right: 5px; */
}

#service-input-dialog .btn-tabs-sortable {
	/* background-color: lime; */
	float: left;
}

#service-input-dialog .btn-tab {
	display: inline-block;
	padding: 5px 5px 0px 5px;
	border-radius: 10px 10px 0px 0px;
	position: relative;
	height: 60px;
}

#service-input-dialog .btn-tab.selected {
	background: #d78ee0;
	/* padding-right: 5px; */
	/* margin-left: 5px; */
}

#service-input-dialog .btn-tab .label {
	border-radius: 10px;
	height: 40px;
	display: block;
	color: #ffffff;
	font-size: 18px;
	font-weight: bold;
	line-height: 40px;
	padding: 0px 10px 0px 10px;
	cursor: pointer;

	user-select: none; /* Standard syntax */
	-webkit-user-select: none; /* Safari */
	-webkit-text-select: none;
	-ms-user-select: none; /* IE 10 and IE 11 */
	-moz-user-select: none;
}

#service-input-dialog .btn-tab.selected .label {
	/* border-radius: 10px 0px 0px 10px; */
	padding-right: 40px;
	position: relative;
}

#service-input-dialog .btn-tab.selected.menu-open .label {
	z-index: 2;
}

#service-input-dialog .btn-tab .btn-menu-btn,
#service-input-dialog .btn-tab .btn-edit-confirm {
	background-image: url(/static/graph/icon-settings.png);
	background-size: 21px;
	background-repeat: no-repeat;
	background-position: 3px 9px;
	cursor: pointer;
	background-repeat: no-repeat;
	width: 30px;
	position: absolute;
	height: 40px;
	width: 32px;
	display: block;
	/* background-color: lime; */
	display: none;
	right: 4px;
	top: 5px;
}

#service-input-dialog .btn-tab.menu-open .btn-menu-btn {
	z-index: 3;
}

#service-input-dialog .btn-tab .btn-edit-confirm {
	background-image: url(/static/graph/icon-check.png);
	background-size: 24px;
	background-position: 4px 9px;
	border-radius: 0px 10px 10px 0px;
}

#service-input-dialog .btn-tab.editing .btn-edit-confirm {
	display: block;
}

#service-input-dialog .btns-line .selected .btn-menu-btn {
	display: block;
}

#service-input-dialog .btns-line .btn-menu,
#service-input-dialog .btn-json .json-menu {
	position: absolute;
	left: -27px;
	top: 49px;
	background: #fec2ff;
	width: auto;
	z-index: 4;
	border-radius: 5px;
	white-space: nowrap;
	display: none;
	padding: 3px 5px 5px 5px;
	cursor: default;
}

#service-input-dialog .btn-json.open {
	z-index: 2; /* above underlay */
}

#service-input-dialog .btn-json.open .json-menu {
	display: block;
	display: block;
	top: unset;
	bottom: 60px;
	left: 50%;
	translate: -50% 0px;
}

#service-input-dialog #service-input-dialog-menu-underlay {
	display: none;
	background-color: rgba(0, 0, 0, 0.457);
	width: 100vw;
	height: 100vh;
	position: absolute;
	z-index: 1;
	left: calc(-50vw + Min(40vw, 275px) + 15px);
	top: calc(-10vh - 50px);
	cursor: pointer;
}

#service-input-dialog.narrow #service-input-dialog-menu-underlay,
#service-input-dialog.thin #service-input-dialog-menu-underlay {
	left: -10px;
	top: -20px;
}

#service-input-dialog .btns-line .btn-menu .arrow {
	position: absolute;
	width: 30px;
	height: 30px;
	display: block;
	background: #fec2ff;
	rotate: 45deg;
	left: 25px;
	top: -5px;
	z-index: 1;
}

#service-input-dialog .json-menu .arrow {
	position: absolute;
	width: 30px;
	height: 30px;
	display: block;
	background: #fec2ff;
	rotate: 45deg;
	left: calc(50% - 15px);
	bottom: -5px;
	z-index: 1;
}

#service-input-dialog .btns-line .btn-menu BUTTON,
#service-input-dialog .btns-line .btn-menu LABEL,
#service-input-dialog .json-menu BUTTON {
	text-align: left;
	line-height: 23px;
	padding: 5px 10px;
	border-radius: 5px;
	border: 0px;
	background-color: #bb61d07a;
	font-size: 13px;
	margin: 2px 0px 0px 0px;
	display: block;
	width: 100%;
	z-index: 2;
	position: relative;
	height: auto;

	user-select: none; /* Standard syntax */
	-webkit-user-select: none; /* Safari */
	-webkit-text-select: none;
	-ms-user-select: none; /* IE 10 and IE 11 */
	-moz-user-select: none;

	box-sizing: border-box;
	color: #fff;
	cursor: pointer;
}
#service-input-dialog .btns-line .btn-menu LABEL {
	padding-right: 30px;
}

#service-input-dialog .btns-line .btn-menu LABEL INPUT[type="checkbox"] {
	position: absolute;
	right: 10px;
	top: 10px;
}

#service-input-dialog .btns-line .btn-menu BUTTON:hover,
#service-input-dialog .btns-line .btn-menu LABEL:hover,
#service-input-dialog .json-menu BUTTON:hover {
	background-color: #c879da;
}

#service-input-dialog .btns-line .btn-menu BUTTON.rem.warn,
#service-input-dialog .btns-line .btn-menu BUTTON.rem:hover {
	background-color: rgb(173, 0, 0);
}

#service-input-dialog .btns-line .btn-menu.open {
	display: block;
}

#service-input-dialog .btns-line .btn-menu .arrow {
	display: block;
}

#service-input-dialog .btns-line .btn-menu .colors {
	width: 160px;
	margin-right: -3px;
	padding: 3px 0px 0px 0px;
}

#service-input-dialog .btns-line .btn-menu BUTTON.color-btn {
	float: left;
	width: 37px;
	height: 37px;
	margin-right: 3px;
	border-radius: 5px;
	margin-bottom: 3px;
}

#service-input-dialog .btns-line .btn-menu BUTTON.color-btn.selected {
	border: 3px solid white;
}

#service-input-dialog .btn-tab.blue INPUT.btn-inp {
	background-color: #2c6fff;
	border-color: #0051ff;
}
#service-input-dialog .btn-opts label.blue,
#service-input-dialog .btn-tab.blue .label,
#service-input-dialog .btn-opts .btn-menu.blue,
#service-input-dialog .btn-tab.blue .btn-edit-confirm,
#service-input-dialog .btns-line .btn-menu BUTTON.color-btn.blue,
.service_button.blue {
	background-color: #0051ff;
}
.service_button.blue:hover {
	background-color: #2468f9;
}

#service-input-dialog .btn-tab.green INPUT.btn-inp {
	background-color: #019801;
	border-color: #008700;
}
#service-input-dialog .btn-opts label.green,
#service-input-dialog .btn-tab.green .label,
#service-input-dialog .btn-opts .btn-menu.green,
#service-input-dialog .btn-tab.green .btn-edit-confirm,
#service-input-dialog .btns-line .btn-menu BUTTON.color-btn.green,
.service_button.green {
	background-color: #008700;
}
.service_button.green:hover {
	background-color: #01a601;
}

#service-input-dialog .btn-tab.red .btn-inp {
	background-color: #d10303;
	border-color: #a20101;
}
#service-input-dialog .btn-opts label.red,
#service-input-dialog .btn-tab.red .label,
#service-input-dialog .btn-opts .btn-menu.red,
#service-input-dialog .btn-tab.red .btn-edit-confirm,
#service-input-dialog .btns-line .btn-menu BUTTON.color-btn.red,
.service_button.red {
	background-color: #a20101;
}
.service_button.red:hover {
	background-color: #b70505;
}

#service-input-dialog .btn-tab.orange INPUT.btn-inp {
	background-color: #fc9c35;
	border-color: #ff8400;
}
#service-input-dialog .btn-opts label.orange,
#service-input-dialog .btn-tab.orange .label,
#service-input-dialog .btn-opts .btn-menu.orange,
#service-input-dialog .btn-tab.orange .btn-edit-confirm,
#service-input-dialog .btns-line .btn-menu BUTTON.color-btn.orange,
.service_button.orange {
	background-color: #ff8400;
}
.service_button.orange:hover {
	background-color: #fa9c37;
}

#service-input-dialog .btn-tab.magenta .btn-inp {
	background-color: #d210bf;
	border-color: #b311a3;
}
#service-input-dialog .btn-opts label.magenta,
#service-input-dialog .btn-tab.magenta .label,
#service-input-dialog .btn-opts .btn-menu.magenta,
#service-input-dialog .btn-tab.magenta .btn-edit-confirm,
#service-input-dialog .btns-line .btn-menu BUTTON.color-btn.magenta,
.service_button.magenta {
	background-color: #b311a3;
}
.service_button.magenta:hover {
	background-color: #cb14b8;
}

#service-input-dialog .btn-tab.black INPUT.btn-inp {
	background-color: #252525;
	border-color: #000000;
}
#service-input-dialog .btn-opts label.black,
#service-input-dialog .btn-tab.black .label,
#service-input-dialog .btn-opts .btn-menu.black,
#service-input-dialog .btn-tab.black .btn-edit-confirm,
#service-input-dialog .btns-line .btn-menu BUTTON.color-btn.black,
.service_button.black {
	background-color: #000000;
}
.service_button.black:hover {
	background-color: #171717;
}

#service-input-dialog INPUT.btn-inp,
#service-input-dialog .btn-inp-wh {
	position: relative;
	/* width: calc(100% - 40px); */
	border: 5px solid black;
	height: 28px;
	line-height: 28px;
	border-radius: 10px 0px 0px 10px;
	/* border: 0px; */
	color: #ffffff;
	font-size: 18px;
	font-weight: bold;
	padding-left: 5px;
	outline: none;
	display: none;
	margin-right: 23px;
}

#service-input-dialog .btn-tab.editing INPUT.btn-inp {
	display: inline-block;
}

#service-input-dialog .btn-tab.editing .btn-inp-wh {
	position: absolute;
	visibility: hidden;
	display: inline-block;
	white-space: pre;
}

#service-input-dialog .btn-tab.editing .label,
#service-input-dialog .btn-tab.editing .btn-menu-btn {
	display: none;
}

#service-input-dialog .add-btn {
	display: inline-block;
	height: 51px;
	line-height: 50px;
	padding: 0px 10px 0px 19px;
	background-image: url(/static/graph/icon-plus.png);
	background-repeat: no-repeat;
	background-size: 16px;
	background-position: 0px 17px;
	font-size: 14px;
	color: white;
	text-decoration: underline;
	cursor: pointer;
	margin-left: 5px;
}

#service-input-dialog .json-editor,
#node-params-dialog .json-editor {
	height: calc(60vh - 100px);
	background-color: #d78ee0;
	color: #fff;
	padding: 5px;
	font-size: 15px;
	border-radius: 5px;
	overflow: scroll;
	overscroll-behavior: none;
	scrollbar-width: none;
	top: 50px;
	margin-bottom: 55px;
	position: relative;
	border-top: 5px solid #d78ee0;
	border-bottom: 5px solid #d78ee0;
}

#service-input-dialog.input-manager {
	background-color: #5d53b0;
}

#service-input-dialog.input-manager H3 {
	color: #fff;
}

#service-input-dialog.input-manager .json-editor {
	top: 0px;
	margin-bottom: 5px;
	background-color: #3a3376;
	border-color: #3a3376;
}

#service-input-dialog.input-manager .buttons BUTTON {
	background-color: #26214b;
	color: white;
}

#service-input-dialog.input-manager .buttons BUTTON:hover {
	background-color: white;
	color: black;
}

#service-input-dialog.input-manager .buttons BUTTON.btn-save {
	background-color: rgb(233 15 233);
}

#service-input-dialog.input-manager .buttons BUTTON.btn-save:hover {
	background-color: rgb(246, 15, 246);
	color: white;
}

#service-input-dialog.narrow .json-editor,
#service-input-dialog.thin .json-editor {
	height: calc(100vh - 225px);
}

.json-editor I {
	display: block;
	font-size: 28px;
	font-style: normal;
	font-family: serif;
	line-height: 30px;
	/* background: red; */
	/* vertical-align: top; */
	height: 30px;
	opacity: 0.6;
}

.json-editor I B {
	font-weight: normal;
	/* display: none; */
	font-size: 20px;
}

.json-editor .inline {
	display: inline-block;
}

.json-editor .end-line {
	position: absolute;
	right: 14px;
	top: 0px;
}

.json-editor .last-in-block .end-line,
.json-editor .last-in-block > B {
	display: none;
}

.json-editor .line {
	position: relative;
	height: 34px;
}

.json-editor .hint-line {
	display: block;
	line-height: 34px;
	white-space: nowrap;
	overflow: hidden;
	background-image: url(/static/graph/icon-info.svg);
	background-size: 20px;
	background-repeat: no-repeat;
	background-position: 1px 7px;
	padding-left: 32px;
	color: #ffffff80;
}

.json-editor .label {
	line-height: 30px;
	height: 30px;
	margin: 2px 10px 2px 0px;
	float: left;
	clear: left;
	max-width: 60%;
	text-overflow: ellipsis;
	overflow: hidden;
	/* font-weight: bold; */
}

.json-editor .block {
	border-left: 1px dashed #ffffff3b;
	padding-left: 25px;
	margin-bottom: 5px;
	margin-left: 5px;
}

#service-input-dialog.narrow .json-editor .block,
#node-params-dialog .narrow .json-editor .block {
	padding-left: 15px;
}

.json-editor .add,
.json-editor .remove {
	background-color: #bb61d066;
	color: white;
	font-weight: bold;
	display: inline-block;
	line-height: 26px;
	height: 24px;
	padding: 0px 13px 0px 0px;
	text-decoration: none;
	/* margin: 0px 0px 0px 5px; */
	border-radius: 8px;
	position: relative;
	top: 5px;
	font-size: 12px;
}

#service-input-dialog.input-manager .json-editor .add,
#service-input-dialog.input-manager .json-editor .remove {
	background-color: #26214b;
}

.json-editor .remove.hidden {
	display: none;
}

.json-editor .add:hover {
	background-color: #2f8b63 !important;
}

.json-editor .remove:hover {
	background-color: #c10303 !important;
}

.json-editor .remove {
	margin-left: 5px;
}

.json-editor .add SPAN,
.json-editor .remove SPAN {
	display: block;
	background-image: url(/static/graph/icon-plus.png);
	width: 20px;
	height: 24px;
	/* background-color: red; */
	float: left;
	background-size: 12px;
	background-repeat: no-repeat;
	background-position: 2px 6px;
	margin-left: 6px;
}

.json-editor .remove SPAN {
	background-image: url(/static/graph/remove.png);
}

.json-editor .val_wrap {
	height: 34px;
	margin-right: 20px;
	position: relative;
	margin-left: 0px;
	overflow: hidden;
}

.json-editor INPUT,
.json-editor TEXTAREA,
.json-editor SELECT {
	color: white;
	background-color: #bb61d0;
	font-weight: normal;
	border-radius: 3px;
	border: 0px;
	display: block;
	/* float: left; */
	height: 30px;
	line-height: 20px;
	padding: 0px 10px 0px 10px;
	margin: 2px 1px 2px 0px;
	border: 0px;
	border-radius: 5px;
	outline: none;
	font-size: 16px;
	position: absolute;
	left: 0px;
	right: 0px;
}

#service-input-dialog.input-manager .json-editor INPUT,
#service-input-dialog.input-manager .json-editor TEXTAREA,
#service-input-dialog.input-manager .json-editor SELECT {
	background-color: #26214b;
}

.json-editor SELECT {
	margin-right: 0px;
}

.json-editor.one-line .val_wrap.long_text {
	height: 136px;
}

.json-editor.one-line TEXTAREA {
	/* height: 120px; */
	resize: none;
	padding-top: 5px;
	padding-bottom: 5px;
	height: 122px;
	margin-right: 0px;
}

#service-input-dialog .json-editor INPUT.err,
#service-input-dialog .json-editor TEXTAREA.err,
#node-params-dialog .json-editor INPUT.err {
	color: white;
	background: red;
}

.json-editor .val_wrap .hint {
	color: rgba(255, 255, 255, 0.3);
	font-size: 14px;
	font-weight: normal;
	position: absolute;
	right: 0px;
	top: 2px;
	padding: 0px 13px 0px 5px;
	line-height: 30px;
	border-radius: 0px 5px 5px 0px;
	background-color: #bb61d0;
}

#service-input-dialog.input-manager .json-editor .val_wrap .hint {
	background-color: #26214b;
}

.json-editor .val_wrap .hint.err {
	color: white !important;
	background: red !important;
	opacity: 1;
}

#node-params-dialog H3 {
	font-size: 20px;
	display: block;
	margin: 0px 0px 3px 0px;
	padding: 0px;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #fff;
}

#node-params-dialog .title {
	font-size: 12px;
	display: inline-block;
	color: #fff;
	margin-bottom: 5px;
	overflow: hidden;
	text-overflow: ellipsis;
}

#node-params-dialog .buttons {
	position: absolute;
	bottom: 10px;
	left: 10px;
	right: 5px;
}

#node-params-dialog .pram-buttons {
	position: absolute;
	top: -5px;
	right: 5px;
	display: none;
	border-radius: 0px 0px 5px 5px;
	background-color: #332f2f;
	padding: 0px 2px 8px 7px;
	border-radius: 0px 0px 10px 10px;
}

#node-params-dialog .pram-buttons.editor-open {
	display: block;
}

#node-params-dialog .buttons BUTTON {
	background: #332f2f;
	color: white;
	font-weight: bold;
	border: 0px;
	border-radius: 5px;
	padding: 0px 10px;
	margin: 0px 5px 0px 0px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	/* width: 65px; */
	height: 40px;
	line-height: 42px;
	position: relative;
	cursor: pointer;
	float: right;
}

#node-params-dialog BUTTON:hover {
	background-color: #433e3e;
}

#node-params-dialog BUTTON.btn-close {
	float: left;
}

#node-params-dialog BUTTON.btn-save {
	padding-left: 20px;
	padding-right: 20px;
	background-color: green;
}

#node-params-dialog BUTTON.btn-reload {
	background-color: #525151;
}

#node-params-dialog BUTTON.btn-reload:hover {
	background-color: #626161;
}

#node-params-dialog .params-list {
	height: calc(60vh - 60px);
	background-color: #5b5252;
	color: #fff;
	padding: 5px;
	font-size: 15px;
	border-radius: 5px;
	overflow: scroll;
	overscroll-behavior: none;
	scrollbar-width: none;
	top: 0px;
	margin-bottom: 45px;
	position: relative;
	border-top: 5px solid #5b5252;
	border-bottom: 5px solid #5b5252;
}

#node-params-dialog .json-editor {
	/* half split editor */
	display: none;
	background-color: #332f2f;
	color: #fff;
	top: unset;
	border-top: 6px solid #332f2f;
	border-bottom: 6px solid #332f2f;
	height: calc(30vh - 30px - 20px - 12px);
	margin-bottom: 45px;
	border-radius: 5px 5px 0px 5px;
	padding: 10px 10px 10px 20px;
	margin-top: -5px;
}

#node-params-dialog .params-list.editor-open {
	/* half split list */
	height: calc(30vh - 30px + 5px);
	margin-bottom: 0px;
	border-radius: 5px 5px 0px 0px;
}

#node-params-dialog .params-list.editor-open.one-line-editor {
	/* one line editor list */
	height: calc(60vh - 60px + 5px - 34px - 20px);
}

#node-params-dialog .json-editor.open {
	display: block;
}

#node-params-dialog .json-editor.one-line {
	/* one line editor */
	height: 34px;
	padding: 10px;
	border-top: unset;
	border-bottom: unset;
}

#node-params-dialog.narrow .params-list,
#node-params-dialog.thin .params-list {
	height: calc(100vh - 175px);
}

#node-params-dialog.narrow .params-list.editor-open,
#node-params-dialog.thin .params-list.editor-open {
	height: calc(50vh - 88px - 0px);
}

#node-params-dialog.narrow .json-editor.open,
#node-params-dialog.thin .json-editor.open {
	height: calc(50vh - 87px);
}

#node-params-dialog .param-name {
	font-weight: bold;
	line-height: 30px;
	padding: 0px 4px;
	cursor: pointer;
	position: relative;
}

#node-params-dialog .param-name:hover {
	background-color: #ffffff3b !important;
}

#node-params-dialog .param-name.selected,
#node-params-dialog .param-name.selected:hover {
	background-color: #ff8c00 !important;
}

#node-params-dialog .param-name:first-child {
	margin-top: -5px;
}

#node-params-dialog .param-name:last-child {
	margin-bottom: -5px;
}

#node-params-dialog .param-name:nth-child(even) {
	background-color: rgba(255, 255, 255, 0.064);
}

#node-params-dialog .param-type {
	font-weight: normal;
	float: right;
	opacity: 0.5;
}

#node-params-dialog .load-err {
	background-color: red;
	position: absolute;
	left: 50%;
	top: calc(50% - 15px);
	line-height: 20px;
	text-align: center;
	display: inline-block;
	transform: translate(-50%, 0px);
	padding: 5px;
	border-radius: 5px;
}

#node-params-dialog .loader {
	background-image: url(/static/graph/spinner-params.svg);
	width: 50px;
	height: 50px;
	display: block;
	position: absolute;
	left: calc(50% - 25px);
	top: calc(50% - 25px);
	background-size: 50px;
}

#node-params-dialog .json-editor INPUT,
#node-params-dialog .json-editor TEXTAREA,
#node-params-dialog .json-editor SELECT {
	background-color: white;
	color: black;
}

#node-params-dialog .json-editor.one-line .val_wrap {
	margin-right: unset;
}

#node-params-dialog .json-editor .val_wrap .hint {
	color: rgba(0, 0, 0, 0.3);
	background: #ffffff;
}

#node-params-dialog .json-editor .add,
#node-params-dialog .json-editor .remove {
	background-color: #675d5d7a;
}


.video_overlay_cont SVG .detection-res {
	background-color: #000;
}

BODY.simple {
	margin: 0px;
	padding: 0px;
}

BODY.simple #bottom-links {
	display: block;
}

#error-page,
#waiting-dialog {
	color: #fff;
    font-size: 30px;
    position: absolute;
    left: 50%;
    top: max(50vh, 270px);
    background: #9e0000;
    transform: translate(-50%, -50%);
    padding: 20px;
    border-radius: 10px;
}

#waiting-dialog {
	font-size: 20px;
	background: #00366a;
	display: none;
}

BODY.waiting #waiting-dialog {
	display: block;
	z-index: 201;
}
BODY.waiting #waiting-dialog-underlay {
	display: block;
	z-index: 200;
	cursor: default;
	background-color: rgb(0 0 0 / 86%);
}

#waiting-dialog #waiting-dialog-queue-info {
	display: block;
	margin-top: 20px;
	/* text-align: center; */
	
}

#waiting-dialog #waiting-dialog-num-connected {
	background-color: #fff;
    padding: 0px 3px;
    font-weight: bold;
    color: #00366a;
    border-radius: 5px;
}
#waiting-dialog #num-waiting B {
	font-size: 30px;
}

#error-page .icon {
	position: absolute;
    left: 50%;
    bottom: -150px;
    width: 100px;
    height: 100px;
    background-image: url(/static/graph/dead-robot.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transform: translate(-50%, 0px);
}

#waiting-dialog .icon {
	background-image: url(/static/graph/robot-queued.svg);
	width: 160px;
	height: 160px;
	display: block;
    position: absolute;
	left: 50%;
    top: -180px;
    transform: translate(-50%, 0px);
}

/* animiated dots */
#waiting-dialog .icon SVG {
	position: absolute;
    top: 36px;
    left: 23px;
}
#waiting-dialog .icon SVG .dot1 { animation: bounce 1.4s infinite 0s; }
#waiting-dialog .icon SVG .dot2 { animation: bounce 1.4s infinite 0.2s; }
#waiting-dialog .icon SVG .dot3 { animation: bounce 1.4s infinite 0.4s; }
@keyframes bounce {
	0%, 100% { transform: translateY(0); opacity: 1; }
	50% { transform: translateY(-5px); opacity: 0.3; }
}

@media (max-width: 600px) {
	#error-page,
	#waiting-dialog {
		width: 80%;
	}
}
@media (min-width: 600px) {
	#error-page,
	#queue-page {
		left: calc(50% + 60px);
	}
	#error-page .icon,
	#queue-page .icon {
		left: -120px;
		top: 30px;
		transform: translate(0px, -42%);
	}
	#queue-page .icon {
		left: -180px;
		top: 80px;
	}
}

#error-page .detail {
	display: block;
    font-size: 20px;
    margin-top: 10px;
}

#error-page-logo {
	position: absolute;
    left: 50%;
    top: -180px;
    width: min(350px, 80vw);
    height: 120px;
    background-image: url(/static/graph/bridge-logo.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: 0px 0px;
    transform: translate(-50%, 0px);
}


#login-page {
	color: #fff;
    font-size: 16px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
	width: min(380px, 85%);
}

#login-page FORM {
	margin: 0px;
	padding: 0px;
}

#login-page .form-content {
	padding: 0px;
    border-radius: 10px;
	background: transparent;
	width: 100%;
	position: relative;
}


#login-page .form-content.error {
	animation-name: login-err-shake;
	animation-duration: 0.2s;
	animation-iteration-count: 3;
}

@keyframes login-err-shake {
	0% {
		left: 0px;
	}
	25% {
		left: 3px;
	}
	75% {
		left: -3px;
	}
	100% {
		left: 0px;
	}
}


#login-page .hero,
#register-page .hero {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 48px;
}

#login-page .hero-logo,
#register-page .hero-logo {
	height: 48px;
	width: auto;
	object-fit: contain;
}

#login-page INPUT::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

#login-page DIV.line {
	position: relative;
	margin-bottom: 24px;
}

#login-page LABEL {
	display: block;
	margin-bottom: 8px;
	color: #ffffff99;
	font-size: 14px;
}

#login-page INPUT {
    display: block;
    width: 100%;
    box-sizing: border-box;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    line-height: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin: 0px;
    padding: 12px 16px;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
}

#login-page INPUT:focus {
    outline: none;
    border-color: #33ee69;
    background: rgba(255, 255, 255, 0.15);
}

#login-page BUTTON {
	display: block;
	width: 100%;
	background-color: #33ee69;
    color: #10100d;
    border-radius: 8px;
    line-height: 24px;
    padding: 12px 20px;
    border: 0px;
	font-family: 'DM Sans', sans-serif;
	font-weight: 500;
	font-size: 16px;
	cursor: pointer;
	margin-top: 32px;
}

#login-page BUTTON:hover {
	background-color: #4df97d;
}

#login-page .divider {
	display: flex;
	align-items: center;
	margin: 32px 0;
	color: rgba(255, 255, 255, 0.4);
	font-size: 14px;
}

#login-page .divider::before,
#login-page .divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: rgba(255, 255, 255, 0.15);
}

#login-page .divider span {
	padding: 0 16px;
}

#login-page .register-btn {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	background: transparent;
	color: #33ee69;
	border: 1px solid #33ee69;
	border-radius: 8px;
	padding: 12px 20px;
	font-family: 'DM Sans', sans-serif;
	font-weight: 500;
	font-size: 16px;
	text-decoration: none;
	cursor: pointer;
}

#login-page .register-btn:hover {
	background: rgba(51, 238, 105, 0.1);
}

/* Register Page */
#register-page {
	color: #fff;
	font-size: 16px;
	font-family: 'DM Sans', sans-serif;
	font-weight: 400;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(450px, 90%);
}

#register-page h2 {
	margin: 0 0 8px 0;
	font-weight: 500;
	font-size: 24px;
	text-align: center;
}

#register-page .subtitle {
	color: rgba(255, 255, 255, 0.6);
	text-align: center;
	margin: 0 0 32px 0;
	font-size: 14px;
}

#register-page .field {
	margin-bottom: 24px;
}

#register-page label {
	display: block;
	margin-bottom: 8px;
	color: rgba(255, 255, 255, 0.6);
	font-size: 14px;
}

#register-page input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	color: #fff;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	line-height: 24px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	padding: 12px 16px;
	font-family: 'DM Sans', sans-serif;
	font-size: 16px;
}

#register-page input:focus {
	outline: none;
	border-color: #33ee69;
	background: rgba(255, 255, 255, 0.15);
}

#register-page input::placeholder {
	color: rgba(255, 255, 255, 0.3);
}

#register-page #register-btn {
	display: block;
	width: 100%;
	background-color: #33ee69;
	color: #10100d;
	border-radius: 8px;
	padding: 12px 20px;
	border: 0;
	font-family: 'DM Sans', sans-serif;
	font-weight: 500;
	font-size: 16px;
	cursor: pointer;
}

#register-page #register-btn:hover {
	background-color: #4df97d;
}

#register-page #register-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

#register-page .hidden {
	display: none;
}

#register-page .success-header {
	background: rgba(51, 238, 105, 0.15);
	border: 1px solid rgba(51, 238, 105, 0.3);
	border-radius: 8px;
	padding: 16px;
	text-align: center;
	margin-bottom: 24px;
	color: #33ee69;
	font-weight: 500;
}

#register-page .check-icon {
	margin-right: 8px;
}

#register-page .credential-group {
	margin-bottom: 16px;
}

#register-page .credential-value {
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	padding: 12px;
}

#register-page .credential-value code {
	flex: 1;
	font-family: monospace;
	font-size: 14px;
	word-break: break-all;
	color: #fff;
}

#register-page .copy-btn {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 4px;
	padding: 6px 12px;
	color: #fff;
	font-size: 12px;
	cursor: pointer;
	font-family: 'DM Sans', sans-serif;
}

#register-page .copy-btn:hover {
	background: rgba(255, 255, 255, 0.15);
}

#register-page .warning {
	background: rgba(255, 200, 0, 0.1);
	border: 1px solid rgba(255, 200, 0, 0.3);
	border-radius: 8px;
	padding: 12px 16px;
	margin: 24px 0;
	font-size: 14px;
	color: rgba(255, 200, 0, 0.9);
}

#register-page .actions {
	display: flex;
	gap: 12px;
	margin-top: 24px;
}

#register-page .btn-secondary {
	flex: 1;
	display: block;
	text-align: center;
	background: transparent;
	color: rgba(255, 255, 255, 0.7);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 8px;
	padding: 12px 20px;
	font-family: 'DM Sans', sans-serif;
	font-weight: 500;
	font-size: 14px;
	text-decoration: none;
	cursor: pointer;
}

#register-page .btn-secondary:hover {
	background: rgba(255, 255, 255, 0.05);
	color: #fff;
}

#register-page .btn-primary {
	flex: 1;
	background: transparent;
	color: #33ee69;
	border: 1px solid #33ee69;
	border-radius: 8px;
	padding: 12px 20px;
	font-family: 'DM Sans', sans-serif;
	font-weight: 500;
	font-size: 14px;
	cursor: pointer;
}

#register-page .btn-primary:hover {
	background: rgba(51, 238, 105, 0.1);
}