:root {
	--zoe-color:#aaaaaa;
	--zoe-bkgnd:#222222;
	--zoe-seperator:#333333;
	--zoe-btn-color:#ffffff;
	--zoe-btn-bkgnd:#375a7f;
	--zoe-btn-border:#375a7f;
	--zoe-hover-color:#cccccc;
	--zoe-hover-bkgnd:#2C4159;
	--zoe-hover-border:#2c4866;
	--zoe-focus-color:#ffffff;
	--zoe-focus-bkgnd:#375a7f;
	--zoe-focus-border:#D39E3D;
	--zoe-active-color:#aaaaaa;
	--zoe-active-bkgnd:#333333;
	--zoe-active-border:#A28144;
	--zoe-disabled-color:#aaaaaa;
	--zoe-disabled-bkgnd:#293B4D;
	--zoe-disabled-border:#293B4D;
}
* {
	box-sizing:border-box;
}
::-webkit-scrollbar {
	width:10px;
}
::-webkit-scrollbar-track {
	background:var(--zoe-seperator);
}
::-webkit-scrollbar-thumb {
	background:var(--zoe-btn-bkgnd);
}
::-webkit-scrollbar-thumb:hover {
	background:var(--zoe-hover-bkgnd);
}
html {
	scrollbar-width:thin;
	scrollbar-color:var(--zoe-btn-bkgnd) var(--zoe-seperator);
}
body {
	font-family:'Open Sans', sans-serif;
	font-size:14px;
	font-weight:400;
	margin:0;
	padding:0;
	background:var(--zoe-bkgnd);
	color:var(--zoe-color);
}
/* controls */
.btn {
	font-size:14px;
	font-weight:400;
	padding:6px;
	color:var(--zoe-btn-color);
	background:var(--zoe-btn-bkgnd);
	border:1px solid var(--zoe-btn-border);
	cursor:pointer;
	text-align:center;
	transition:background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear;
	text-decoration:none;
	display:inline-block;
}
.btn:disabled {
	pointer-events:none;
	cursor:initial;
	color:var(--zoe-disabled-color);
	background-color:var(--zoe-disabled-bkgnd);
	border-color:var(--zoe-disabled-border);
}
.btn:focus {
	color:var(--zoe-focus-color);
	background-color:var(--zoe-focus-bkgnd);
	border-color:var(--zoe-focus-border);
	outline:0;
}
.btn:hover {
	color:var(--zoe-hover-color);
	background-color:var(--zoe-hover-bkgnd);
	border-color:var(--zoe-hover-border);
}
.btn:active {
	color:var(--zoe-active-color);
	background-color:var(--zoe-active-bkgnd);
	border-color:var(--zoe-active-border);
}
.link {
	color:var(--zoe-btn-color);
	transition:color 0.2s linear;
	text-decoration:none;
	cursor:pointer;
}
.link:focus {
	color:var(--zoe-focus-color);
	outline:0;
}
.link:hover {
	color:var(--zoe-hover-color);
}
.table {
	border-collapse:collapse;
}
.table th {
	background:#422;
	padding:4px;
	text-align:left;
}
.table td {
	padding:4px;
}
.table tr {
	border:1px solid var(--zoe-seperator);
}
.table.sticky th {
	position:sticky;
	top:0;
}
.table.alt_rows tr:nth-child(odd) {
    background-color:var(--zoe-seperator);
}
.table tr.selected {
	border-color:var(--zoe-focus-border) !important;
	background-color:var(--zoe-focus-bkgnd) !important;
}
.textarea {
	font-size:14px;
	font-weight:400;
	padding:6px 8px;
	color:var(--zoe-btn-color);
	transition:border-color 0.2s linear;
	background:var(--zoe-bkgnd);
	border:1px solid var(--zoe-btn-border);
}
.textarea:focus {
	border-color:var(--zoe-focus-border);
	outline:0;
}
.floating_input,
.floating_select {
	position:relative;
	padding-top:8px;
	padding-bottom:2px;
}
.floating_input > input {
	font-size:14px;
	font-weight:400;
	padding:6px 8px;
	color:var(--zoe-btn-color);
	transition:border-color 0.2s linear, color 0.2s linear;
	background:var(--zoe-bkgnd);
	border:1px solid var(--zoe-btn-border);
	width:100%;
}
.floating_input > input:focus {
	border-color:var(--zoe-focus-border) !important;
	outline:0;
}
.floating_input > input:hover {
	color:var(--zoe-hover-color);
	border-color:var(--zoe-hover-border);
}
.floating_input > label,
.floating_select > label {
	position:absolute;
	font-size:10px;
	top:0px;
	left:6px;
	padding:0px 4px;
	pointer-events:none;
	transition:font-size 0.2s linear, top 0.2s linear;
	background:var(--zoe-bkgnd);
	color:var(--zoe-color);
	overflow:hidden;
	white-space:nowrap;
}
.floating_input > input:placeholder-shown + label {
	font-size:14px;
	top:13px;
}
.floating_input > input:focus + label,
.floating_input > input:autofill + label {
	font-size:10px;
	top:0px;
}
.floating_select > select {
	font-size:14px;
	font-weight:400;
	color:var(--zoe-btn-color);
	transition:border-color 0.2s linear, color 0.2s linear;
	background:var(--zoe-bkgnd);
	border:1px solid var(--zoe-btn-border);
	height:30px;
	width:100%;
	padding-left:4px;
}
.floating_select > select:focus {
	border-color:var(--zoe-focus-border) !important;
	outline:0;
}
.floating_select > select:hover {
	color:var(--zoe-hover-color);
	border-color:var(--zoe-hover-border);
}
.checkbox {
	color:var(--zoe-btn-color);
}
.checkbox input:focus {
	outline:var(--zoe-focus-border) solid 1px;
}
.radio_group {
	display:inline-block;
	position:relative;
	padding:6px 2px 2px 2px;
	border:1px solid var(--zoe-seperator);
	margin-top:4px;
}
.radio_group > label {
	position:absolute;
	font-size:10px;
	top:-9px;
	left:6px;
	padding:0px 4px;
	pointer-events:none;
	background:var(--zoe-bkgnd);
	color:var(--zoe-color);	
}
.radio_group > .btn {
	padding:3px;
	margin:1px;
}
.radio_group .selected {
	pointer-events:none;
	color:var(--zoe-disabled-color);
	background-color:var(--zoe-disabled-bkgnd);
	border-color:var(--zoe-focus-border);
}
.accordion {
	display:flex;
	flex-direction:column;
	gap:2px;
	width:100%;
}
.accordion .panel {
	border:1px solid var(--zoe-seperator);
}
.accordion .title {
	color:var(--zoe-btn-color);
	background:var(--zoe-btn-bkgnd);
	font-size:16px;
	text-align:center;
	cursor:pointer;
	padding:4px 8px;
}
.accordion .panel.selected .title {
	pointer-events:none;
	color:var(--zoe-disabled-color);
	background:var(--zoe-disabled-bkgnd);
}
.accordion .contents {
	max-height:0;
	overflow:hidden;
	transition:max-height 0.4s ease-in-out;
}
.accordion .contents > * {
	padding:4px;
}
.full_accordion {
	height:100%;
}
.full_accordion .panel {
	flex:0 0 32px;
	overflow:hidden;
	transition:all 0.4s ease-in-out;
}
.full_accordion .panel.selected {
	flex:1 1 100%;
}
.full_accordion .contents {
	max-height:calc(100% - 32px) !important;
	overflow-y:auto;
	transition:none;
}
.tiled_group {
	display:flex;
	flex-wrap:wrap;
	gap:4px;
	font-size:12px;
	width:100%;
}
.tiled_group > div {
	border:1px solid var(--zoe-seperator);
	padding:1px;
	cursor:pointer;
	background-color:transparent;
	color:var(--zoe-btn-color);
	transition:background-color 0.2s linear, color 0.2s linear;
}
.tiled_group > div:hover {
	background-color:var(--zoe-hover-bkgnd);
}
.tiled_group > .selected {
	color:var(--zoe-disabled-color);
	border-color:var(--zoe-focus-border);
}
.group_box {
	position:relative;
	padding:6px 4px 4px 4px;
	border:1px solid var(--zoe-seperator);
	background:#272727;
}
.group_box.adjust {
	margin-top:8px;
}
.group_box > .title {
	position:absolute;
	font-size:10px;
	top:-9px;
	left:6px;
	padding:0px 4px;
	pointer-events:none;
	background:var(--zoe-bkgnd);
	color:var(--zoe-color);
}
.autocomplete input {
	padding-right:32px;
}
.autocomplete .list {
	position:absolute;
	border:1px solid var(--zoe-seperator);
	z-index:99;
	top:100%;
	left:0;
	right:0;
	display:none;
}
.autocomplete .list > div {
	padding:8px;
	cursor:pointer;
	color:var(--zoe-btn-color);
	background-color:var(--zoe-btn-bkgnd);
}
.autocomplete .list > div:hover {
	color:var(--zoe-hover-color);
	background-color:var(--zoe-hover-bkgnd);
}
.autocomplete .active {
	color:var(--zoe-hover-color) !important;
	background-color:var(--zoe-hover-bkgnd) !important;
}
.autocomplete .btn {
	position:absolute;
	right:1px;
	bottom:3px;
	padding:5px;
}
/* UI layout */
.status_box {
    position:fixed;
    top:0px;
    width:100vw;
    z-index:2000;
   	text-align:center;
	font-size:18px;
	color:#fff;
}
.status_box > div {
	padding:4px;
}
.status_error {
	background-color:#e74c3c;
}
.status_info {
	background-color:#00bc8c;
}
.sidebar_overlay {
	position:fixed;
	top:0px;
	left:0px;
	width:100vw;
	height:100vh;
	background:rgba(0,0,0,0.3);
	z-index:900;
	display:none;
}
.sidebar_close {
	position:absolute;
	left:250px;
	top:10px;
	font-size:32px;
}
.busy_overlay {
	position:fixed;
	top:0px;
	left:0px;
	width:100vw;
	height:100vh;
	z-index:3000;
	cursor:progress;
}
.layout {
	display:flex;
	flex-direction:column;
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
}
.layout > div {
	margin:4px;
	box-shadow:0 0 4px #000000;
	background:var(--zoe-bkgnd);
	padding:4px;
	position:relative;
	width:calc(100% - 8px);
}
#header_compact {
	display:none;
	background:#111;
}
#header_compact .fa {
	font-size:32px;
	margin-right:16px;
	color:#fff;
}
#header_compact span {
	vertical-align:middle;
}
#header {
	display:flex;
	background:#111;
}
#header a {
	text-decoration:none;
	color:var(--zoe-btn-color);
	padding:0 8px;
	transition:color 0.2s linear;
}
#header a:focus {
	color:var(--zoe-focus-color);
	outline:1px solid var(--zoe-focus-border);
}
#header a:hover {
	color:var(--zoe-hover-color);
}
#header a:active {
	color:var(--zoe-active-color);
}
#header a.selected {
	color:var(--zoe-active-color);
	outline:1px solid var(--zoe-focus-border);
	pointer-events:none;
}
#header .header_info {
	flex-grow:1;
	text-align:center;
}
#contents {
	flex-grow:1;
	overflow:auto;
}
@media (min-width:1024px) {
	.sidebar {
		left:0 !important;
	}
	#options > * {
		display:inline-block;
		margin-right:4px;
	}
	.extra_options {
		margin-left:10px;
		display:inline-block;
	}
}
@media (max-width:576px) {
	#header_compact .fa {
		font-size:26px;
		margin-right:10px;
	}
}
@media (max-width:1023px) {
	#header_compact {
		display:block;
	}
	#header {
		background:var(--zoe-bkgnd);
	}
	#contents {
		left:0;
		top:0;
		transition:left 0.4s linear;
	}
	.layout {
		overflow:hidden;
	}
	.sidebar {
		position:absolute !important;
		left:-240px;
		width:240px !important;
		top:0px;
		height:100%;
		transition:left 0.4s linear;
		z-index:1000;
		padding-top:32px !important;
		margin:0 !important;
		display:block !important;
		box-shadow:none !important;
	}
	#header .header_info {
		display:none;
	}
	#header a {
		display:block;
		width:100%;
		padding:8px;
	}
	#options > * {
		width:100%;
		margin-bottom:4px;
	}
	#options .radio_group .btn {
		width:100%;
		height:32px;
	}
	.extra_options {
		margin-top:10px;
	}
	.extra_options > * {
		width:100%;
	}
}
/* panels */
.panel_container {
	width:100%;
	height:100%;
	overflow:hidden;
	position:relative;
}
.panel_scroll {
	position:absolute;
	left:0;
	top:0;
	display:flex;
	height:100%;
	transition:left 0.3s ease-in-out;
}
.panel_view {
	height:100%;
	overflow:auto;
	position:relative;
	padding:4px;
	display:none;
}
@media (min-width:1024px) {
	.panel_view:nth-child(n+2) {
		border-left:1px solid var(--zoe-seperator);
		padding-left:4px;
		padding-right:4px;
	}
}
/* misc */
img {
    vertical-align:middle;
}
.progress_bar {
	width:202px;
	height:22px;
	background-color:var(--zoe-bkgnd);
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-101px;
	border:1px solid #0f0;
}
.progress_bar > div {
	display:inline-block;
	width:0;
	height:20px;
	background-color:#0a0;
}
.context_menu {
	position:fixed;
	top:0px;
	left:0px;
	width:100vw;
	height:100vh;
	z-index:1000;
}
.context_menu > ul {
	position:absolute;
	list-style-type:none;
	padding:0px;
	margin:0px;
	overflow:auto;
	background:var(--zoe-bkgnd);
	box-shadow:0 0 4px #000000;
}
.context_menu li {
	color:var(--zoe-btn-color);
	background-color:var(--zoe-btn-bkgnd);
	transition:background-color 0.2s linear, color 0.2s linear;
	margin:2px;
	cursor:pointer;
	padding:0 2px;
}
.context_menu li:hover {
	color:var(--zoe-hover-color);
	background-color:var(--zoe-hover-bkgnd);
}
@media (max-width:1023px) {
	.context_menu li {
		padding:8px 2px;
	}
}
.title {
	font-size:16px;
	font-weight:600;
	text-align:left;
	padding:8px;
	margin:4px 0;
	color:#aaa;
	background:#333;
}
.title:first-child {
	margin-top:0;
}
.title span {
	font-size:14px;
}
.grid_dual {
	display:flex;
	gap:4px;
	align-items:center;
	width:100%;
}
.grid_dual.vertical {
	flex-direction:column;
	align-items:initial;
	max-height:100%;
}
.grid_dual > div:first-child {
	flex:0 0 auto;
}
.grid_dual > div:last-child {
	flex:1 1 auto;
}
.grid_half {
	display:flex;
	gap:4px;
	align-items:center;
}
.grid_half > * {
	width:50%;
}
.color_box {
    width:24px;
    height:24px;
    border:1px solid var(--zoe-seperator);
    display:inline-block;
    vertical-align:middle;
    margin-right:4px;
}
.upload_img {
    border:1px solid var(--zoe-seperator);
}
.search_hide {
	display:none !important;
}
.flex_middle {
	display:flex;
	align-items:center;
	gap:4px;
}
.flex_float {
	display:flex;
	flex-wrap:wrap;
	gap:4px;
}
.flex_float > div {
	flex-shrink:0;
}
.remove_button {
	position:absolute;
	top:0px;
	right:0px;
	color:#ffffff;
	background-color:#e74c3c;
	cursor:pointer;
}
.relative {
	position:relative;
}
.flex {
	display:flex !important;
	gap:4px;
}
.popup {
	position:fixed;
	top:0px;
	left:0px;
	width:100vw;
	height:100vh;
	background:rgba(0,0,0,0.8);
	z-index:900;
	display:none;
	padding:80px 20px;
}
.popup > div {
	display:flex;
	justify-content:center;
	align-items:center;
	width:100%;
	height:100%;
}
.popup > div > div {
	max-width:fit-content;
	max-height:100%;
	overflow:auto;
}
.keypad {
	display:none;
}
.keypad > div {
	margin:auto;
	max-width:400px;
	display:grid;
	grid-template-columns: auto auto auto 64px;
	grid-gap:4px;
}
.keypad .label {
	grid-column: 1 / span 4;
	text-align:center;
	font-size:18px;
}
.keypad button {
	font-size:18px;
	padding:8px;
}
.keypad_hook {
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	display:none;
}
.info_head {
	display:flex;
	justify-content:space-between;
	font-size:16px;
	font-weight:700;
	padding:4px;
	gap:8px;
}
.dlg_frame {
	background:#fff;
	min-width:240px;
	display:flex;
	flex-direction:column;
    max-height:100%;
}
.dlg_head {
	border-bottom:1px solid #000;
	background:#eee;
	flex:0 0 auto;
}
.dlg_contents {
	padding:4px;
	flex:1 1 auto;
	overflow-y:auto;
	background:var(--zoe-bkgnd);
}
.dlg_contents > * {
	display:block;
	width:100%;
}
@media print {
	.layout {
		display:block;
		height:auto;
		position:initial;
	}
	#header {
		display:none;
	}
	#header_compact {
		display:none;
	}
	#contents {
		height:auto;
		margin:0;
		box-shadow:none;
		padding:0;
	}
	.panel_container {
		height:auto;
		overflow:initial;
	}
	.panel_scroll {
		position:initial;
		display:block;
		height:auto;
	}
	.panel_view {
		display:none !important;
		height:auto;
	}
	.panel_view:last-child {
		display:block !important;
	}
}