/**
 * EC Map Renderer
 * Copyright 2023 by Rainer Kaufmann (DraconisMC)
 *
 * Main Styles
 */

body {
	background-color: #000;
	color: #fff;
	font-family: Verdana,Arial,sans-serif;
	margin: 0;
	padding: 0 0 20px 0;
	min-width: 880px;
}

#output {
	position: relative;
}

#header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 50px;
	background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,49,71,1) 50%);
	z-index: 500;
}

#version {
	margin-top: -25px;
	margin-left: 125px;
	width: 200px;
	text-align: right;
	line-height: 10px;
}
#version span {
	font-size: 0.7em !important;
	color: #fff;
	opacity: 0.25;
}
#version span.version {
	font-weight: bold;
	opacity: 0.75;
}

#title {
	position: absolute;
	top: 4px;
	left: 0;
	width: 100%;
	text-align: center;
	margin: 0 0 0;
	padding: 0;
	font-size: 1em;
	z-index: 400;
}

#title a {
	font-size: 1em;
	color: #666;
	text-decoration: none;
}

#title a:hover {
	color: #0b93d5;
}

#stats {
	position: absolute;
	bottom: -28px;
	left: 0;
	width: 100%;
	text-align: center;
	margin: 0 0 0;
	padding: 0;
	font-size: 0.7em;
	color: #666;
	z-index: 400;
}

#message {
	position: absolute;
	top: 250px;
	left: 0;
	width: 100%;
	text-align: center;
	color: #fff;
	text-shadow: 0 0 5px #000;
	z-index: 500;
}

#loader {
	position: absolute;
	border: 8px solid transparent;
	border-top: 8px solid #0b93d5;
	border-radius: 50%;
	width: 64px;
	height: 64px;
	z-index: 900;
	animation: spin 1s linear infinite;
	display: none;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#canvas {
	position: fixed;
	top: 50px;
	left: 8px;
	background-color: #222;
	border-radius: 6px;
	min-width: 365px;
	min-height: 365px;
	z-index: 1;
}

#viewport {
	position: fixed;
	top: 82px;
	left: 40px;
	background-color: #111;
	border: 0;
	min-width: 201px;
	min-height: 201px;
	overflow: hidden;
	z-index: 2;
}

#refresh {
	position: absolute;
	top: 6px;
	left: 4px;
	min-width: 16px;
	min-height: 14px;
	padding: 2px 3px;
	margin: 0;
	background-color: #222;
	border: 1px solid #444;
	border-radius: 6px;
	color: #666;
	text-align: center;
	font-size: 10px;
	z-index: 401;
}

#storage {
	position: absolute;
	top: 6px;
	left: 32px;
	min-width: 80px;
	min-height: 14px;
	padding: 2px 4px;
	margin: 0;
	border: 1px solid #222;
	border-radius: 6px;
	text-align: center;
	font-size: 10px;
	z-index: 401;
}

#storage span {
	font-size: 6px;
}

#storage.Server {
	background-color: #222;
	border-color: #444;
	color: #666;
	cursor: help;
}

#storage.Local, #refresh:hover {
	background-color: #0972a5;
	border-color: #0b93d5;
	color: #fff;
	cursor: pointer;
}

#map {
	position: absolute;
	background-color: #111;
	border: 0;
	z-index: 3;
}

#mapzoom {
	position: absolute;
	height: 150px;
	top: 32px;
	left: 8px;
	background: none;
}

#mapzoom-mark {
	position: absolute;
	width: 28px;
	height: 1px;
	top: 202px;
	left: 0px;
	background: none;
	border-top: 1px solid #444;
}

#mapheight {
	position: absolute;
	height: 130px;
	top: 220px;
	left: 8px;
	background: none;
}
#mapheight .ui-slider-range {
	background: #444;
}

#scroll-x {
	position: absolute;
	left: 32px;
	bottom: 8px;
	background: none;
}

#scroll-z {
	position: absolute;
	top: 32px;
	right: 8px;
	background: none;
}

#details {
	position: absolute;
	top: 226px;
	left: 384px;
	min-width: 320px;
}

#options {
	position: fixed;
	top: 0;
	left: 0;
	margin: 10px 0 10px 8px;
	z-index: 502;
}

#options-right {
	position: fixed;
	top: 0;
	left: 527px;
	width: 300px;
	margin: 10px 0 10px 8px;
	z-index: 502;
}

#options .ui-checkboxradio-icon,
#options-right .ui-checkboxradio-icon {
	display: none !important;
}

#options-price {
	margin: 0 8px;
	width: 30px;
	color: #666;
}

#vpzoom-button {
	width: 60px;
}

#mcmaps-button {
	width: 100px;
}

#tabs {
	position: fixed;
	background-color: #000;
	top: 50px;
	width: 324px;
	z-index: 500;
	box-shadow: 0 0 10px 5px #000;
}

#tabs.ui-tabs .ui-tabs-panel {
	padding: 8px 2px 0 2px !important;
}

#propertylist,
#ownerlist,
#markerlist,
#markerfilterlist {
	display: block;
	width: 300px;
	height: 20px;
	margin-bottom: 8px;
	color: #fff;
}

#commands .ui-selectmenu-button {
	margin-bottom: 8px;
}

#io textarea {
	width: 300px;
	height: 64px;
	margin-bottom: 2px;
}

#io button {
	margin-bottom: 8px;
	margin-right: 8px;
}

#io #exports-button {
	margin-bottom: 8px;
	float: right;
}

#propertylist,
#markerlist {
	width: 210px;
	float: left;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

#propertyfilterlist-button,
#markerfilterlist-button {
	height: 18px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	margin-bottom: 8px;
}

#markerfilterlist-menu li:nth-child(6) div,
#propertyfilterlist-menu li:nth-child(3) div,
#propertyfilterlist-menu li:nth-child(10) div,
#propertyfilterlist-menu li:nth-child(12) div {
	border-bottom: 1px solid #444;
}

#markerfilterlist-menu li:nth-child(2),
#propertyfilterlist-menu li:nth-child(2),
#propertyfilterlist-menu li:nth-child(16) div {
	border-top: 1px solid #444;
}

#admin {
	position: fixed;
	background-color: #000;
	top: 50px;
	min-width: 320px;
	z-index: 500;
}

.input {
	font-size: 1em;
	padding: 4px 8px;
	background-color: #222;
	border: 1px solid #444;
	border-radius: 6px;
	color: #fff;
}

.ui-autocomplete {
	max-height: 500px;
	overflow-y: auto;
	overflow-x: hidden;
}

.ui-front {
    z-index: 600;
}

.tooltip {
	box-shadow: 5px 5px 10px #000;
}

/**
 * Commands
 */

#copycommand {
	position: absolute;
	top: 0;
	left: -5000px;
}

.commands {
	position: absolute;
	top: 0;
	right: 32px;
}

.editcommands {
	position: absolute;
	bottom: 0;
	left: 0;
}

a.command, a.editcommand, a.close, a.task {
	display: inline-block;
	min-width: 16px;
	padding: 1px 4px;
	margin: 4px 0 0 0;
	border-radius: 3px;
	font-size: 11px;
	background-color: #444;
	color: #ccc;
	text-align: center;
	text-decoration: none !important;
}

a.command {
	margin: 0 4px 0 0;
}

a.command.inline {
	margin: 0 2px 0 0;
}

.details .changed a.command.inline {
	color: #ffff00 !important;
}

a.editcommand {
	margin: 8px 2px 2px 8px;
}

a.textcommand {
	color: #ccc;
	text-decoration: none !important;
}

.details.unhovered.active a.textcommand {
	color: #999;
}

a.textcommand:hover {
	color: #0b93d5;
}

a.close {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	padding: 3px 4px;
	border-radius: 0 6px 0 3px;
}

a.task {
	position: absolute;
	bottom: 0;
	margin: 0;
	padding: 3px 4px;
	border-radius: 3px 3px 0 0;
}

a.edit, a.save, a.restore {
	right: 0;
	width: 60px;
	border-radius: 3px 0 6px 0;
}

a.reset {
	right: 0;
	width: 80px;
	right: 140px;
}

.town-details a.reset {
	right: 70px;
}

a.restore {
	right: 0;
	width: 100px;
	border-radius: 3px 0 6px 0;
}

a.cancel, a.delete {
	right: 70px;
	width: 60px;
}

a.rename {
	right: 140px;
	width: 80px;
}

a.create-property,
a.duplicate-property,
a.create-marker,
a.create-maptile {
	width: 40px;
}

a.create-property,
a.duplicate-property,
a.duplicate-marker {
	left: 0;
	border-radius: 0 3px 0 6px;
}

a.create-marker {
	left: 50px;
}

a.create-maptile {
	left: 100px;
}

a.command:hover,
a.editcommand:hover {
	background-color: #0b93d5;
}

a.reset:hover,
a.close:hover,
a.delete:hover,
a.cancel:hover {
	background-color: #600;
}

a.create-property:hover,
a.duplicate-property:hover,
a.create-marker:hover,
a.duplicate-marker:hover,
a.create-maptile:hover,
a.edit:hover,
a.restore:hover,
a.rename:hover,
a.save:hover {
	background-color: #060;
}

/**
 * Details
 */

#summary,
.details {
	position: relative;
	width: 312px;
	border: 1px solid #444;
	border-radius: 6px;
	padding: 8px 8px 8px 8px;
	margin: 0 0 8px 0;
	font-family: Arial, sans-serif;
}

.admin .details {
	padding: 20px 8px 24px 8px;
}

#summary h2,
.details h2 {
	margin-top: 0;
	margin-bottom: 0.5em;
	padding: 0;
	font-size: 1.0em;
	font-weight: bold;
}

.details h2 {
	color: #0b93d5;
}

.details.modified h2::after {
	content: '*';
	color: #fc0;
}

.details.created h2::after {
	content: '*';
	color: #0c0;
}

.details.deleted h2::after {
	content: '*';
	color: #c00;
}
#summary table,
.details table {
	border-spacing: 0;
}

#summary td,
.details p,
.details td {
	margin-top: 0;
	margin-bottom: 0.25em;
	font-size: 0.8em;
	vertical-align: top;
	padding: 0 8px 2px 0;
}

#summary td:first-child,
.details td:first-child {
	min-width: 80px;
}

.details .desc {
	font-weight: bold;
	font-style: italic;
	font-size: 0.9em;
}

#summary,
.details.unhovered.active {
	color: #999;
}

.details .changed,
.details.unhovered.active .changed a.textcommand,
.details.hovered.active .changed a.textcommand {
	color: #ffff00 !important;
}

/**
 * Forms
 */
.data-form div {
	margin: 0 0 2px 0;
}

.data-form label {
	font-size: 0.8em;
	display: inline-block;
	width: 100px;
	color: #999 !important;
}

.data-form .input,
.data-form select {
	font-size: 0.8em;
}

.data-form input:disabled,
.data-form select:disabled {
	color: #666	!important;
}

.data-form .fullwidth {
	width: 154px;
}

.data-form .coordwidth {
	width: 38px;
	margin-right: 2px;
}

.data-form .coordx {
	background: #333;
	background: linear-gradient(90deg,rgba(34,34,34,1) 0%,rgba(34,34,34,1) 80%,rgba(255,0,0,1) 100%);
}

.data-form .coordy {
	background: #333;
	background: linear-gradient(90deg,rgba(34,34,34,1) 0%,rgba(34,34,34,1) 80%,rgba(0,255,0,1) 100%);
}

.data-form .coordz {
	background: #333;
	background: linear-gradient(90deg,rgba(34,34,34,1) 0%,rgba(34,34,34,1) 80%,rgba(0,0,255,1) 100%);
}

.data-form .ui-selectmenu-button {
	padding: 4px 8px;
}