/* Shamat II */
/* Shadekeep Mapping Tool ©2018-present Howard A. Kistler */
/* Updated from Shamat I */

/* Webfonts */
@font-face {
	font-family: 'OpenSans';
	src: url("../font/OpenSansRegular.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'OpenSans';
	src: url("../font/OpenSansBold.woff") format("woff");
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'OpenSans';
	src: url("../font/OpenSansItalic.woff") format("woff");
	font-weight: normal;
	font-style: italic;
}
@font-face {
	font-family: 'OpenSans';
	src: url("../font/OpenSansBoldItalic.woff") format("woff");
	font-weight: bold;
	font-style: italic;
}
@font-face {
	font-family: 'RobotoMono';
	src: url("../font/RobotoMono300.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'RobotoMono';
	src: url("../font/RobotoMono500.woff") format("woff");
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'RobotoMono';
	src: url("../font/RobotoMono300italic.woff") format("woff");
	font-weight: normal;
	font-style: italic;
}
@font-face {
	font-family: 'RobotoMono';
	src: url("../font/RobotoMono500italic.woff") format("woff");
	font-weight: bold;
	font-style: italic;
}
@font-face {
	font-family: 'Titillium';
	src: url("../font/titilliumregular.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Titillium';
	src: url("../font/titillium600.woff") format("woff");
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'Titillium';
	src: url("../font/titilliumitalic.woff") format("woff");
	font-weight: normal;
	font-style: italic;
}
@font-face {
	font-family: 'Titillium';
	src: url("../font/titillium600italic.woff") format("woff");
	font-weight: bold;
	font-style: italic;
}

/* Global Variables */
:root {
	--page-color: #ffffff;
	--font-family: 'OpenSans', sans-serif;
	--font-family-menu: 'Titillium', sans-serif;
	--foreground-color: #282828;
	--foreground-head-color: #202020;
	--background-head-color: #b8b8b8;
	--background-head-gradient: linear-gradient(90deg, #d8d8d8 0%, #b8b8b8 10%, #b8b8b8 90%, #d8d8d8 100%);
	--border-style: 1px solid #404040;
	--tool-background: #808080;
	--tool-fill: none;
	--tool-outline: #ffffff;
	--tool-outline-thickness: 2pt;
	--tool-hover-fill: #c0c0c0;
	--tool-hover-outline: #000000;
	--tool-hover-outline-thickness: 3px;
	--tool-active-corners: 0px 8px 8px 0px;
	--tool-active-background: linear-gradient(90deg, #d8d8d8 0%, #e8e8e8 100%);
	--tool-active-fill: #c0c0c0;
	--tool-active-outline: #404040;
	--tool-active-outline-thickness: 3px;
	--tool-active-hover-fill: #c0c0c0;
	--tool-active-hover-outline: #404040;
	--tool-active-hover-outline-thickness: 3px;
	--tool-button-fill-1: #376ca6;
	--tool-button-fill-2: #6793c2;
	--tool-button-fill-3: #9abfe6;
	--palette-background-color: #d8d8d8;
	--info-background-color: #c8c8c8;
	--palette-button-background: #efefef;
	--palette-button-active-background: #ffaf5f;
	--palette-button-disabled-background: #9f9f9f;
	--palette-button-border: none;
	--palette-button-border-draw: 1px solid #404040;
	--palette-button-fill: #376ca6;
	--layer-toggle-fill: none;
	--layer-toggle-outline: #404040;
	--layer-toggle-outline-thickness: 3px;
	--layer-toggle-color: #404040;
	--layer-toggle-background: #7f8f9f;
	--layer-toggle-active-fill: none;
	--layer-toggle-active-outline: #ffffff;
	--layer-toggle-active-outline-thickness: 3px;
	--layer-toggle-active-color: #ffffff;
	--layer-toggle-active-background: #9fafbf;
	--toolbar-background-color: #808080;
	--toolbar-background: linear-gradient(90deg, #808080 0%, #606060 100%);
	--toolbar-separator: linear-gradient(90deg, #404040 0%, #000000 100%);
	--header-height: 36px;
	--header-background-color: #cfdfff;
	--header-background: linear-gradient(#d8dfef 0%, #c8cfdf 10%, #c8cfdf 90%, #a8afbf 100%);
	--header-border: linear-gradient(#7f8faf 0%, #9fafcf 10%, #9fafcf 90%, #cfdfef 100%);
	--menubutton-background: #6f7f9f;
	--menubutton-svg-fill: #cfcfcf;
	--footer-background: #cfefef;
	--canvas-background: #ffffff;
	--sidebar-border-width: 0px 0px 0px 1px;
	--sidebar-border-style: solid;
	--sidebar-border-color: #404040;
	--modal-background: #bfcfdf;
	--modal-border: 2px outset #90a0b0;
	--modal-header-background: #a8b8c8;
	--about-background: #dfdfdf;
	--about-border: 2px outset #a0a0a0;
	--about-header-background: #9f9f9f;
	--about-notice-background: #bfbfbf;
	--form-button-foreground: #282828;
	--form-button-background: #cfcfcf;
	--message-color: #404040;
	--warning-color: #8f3f3f;
	--success-color: #3f8f3f;
	--input-text-background: #efefef;
	--mouse-tracker-foreground: #282828;
	--mouse-tracker-background: #dfdfdf;
	--range-track-color: #ffffff;
	--range-thumb-color: #376ca6;
	--range-prog-color: #679cd6;
	--anchor-color: #4f7faf;
}
/* Themes */
html[data-theme='light'] {
	--foreground-color: #282828;
	--foreground-head-color: #202020;
	--background-head-color: #b8b8b8;
	--background-head-gradient: linear-gradient(90deg, #d8d8d8 0%, #b8b8b8 10%, #b8b8b8 90%, #d8d8d8 100%);
	--border-style: 1px solid #404040;
	--tool-background: #808080;
	--tool-fill: none;
	--tool-outline: #ffffff;
	--tool-hover-fill: #c0c0c0;
	--tool-hover-outline: #000000;
	--palette-background-color: #d8d8d8;
	--palette-button-background: #efefef;
	--palette-button-active-background: #ffaf5f;
	--palette-button-disabled-background: #9f9f9f;
	--palette-button-border: none;
	--palette-button-border-draw: 1px solid #404040;
	--palette-button-fill: #376ca6;
	--layer-toggle-fill: none;
	--layer-toggle-outline: #404040;
	--layer-toggle-outline-thickness: 3px;
	--layer-toggle-color: #404040;
	--layer-toggle-background: #7f8f9f;
	--layer-toggle-active-fill: none;
	--layer-toggle-active-outline: #ffffff;
	--layer-toggle-active-outline-thickness: 3px;
	--layer-toggle-active-color: #ffffff;
	--layer-toggle-active-background: #9fafbf;
	--header-background-color: #cfdfff;
	--header-background: linear-gradient(#d8dfef 0%, #c8cfdf 10%, #c8cfdf 90%, #a8afbf 100%);
	--header-border: linear-gradient(#6f6f7f 0%, #8f8f9f 10%, #8f8f9f 90%, #9f9faf 100%);
	--menubutton-background: #686f7f;
	--menubutton-svg-fill: #dfdfdf;
	--footer-background: #cfefef;
	--canvas-background: #ffffff;
	--sidebar-border-color: #404040;
	--modal-background: #bfcfdf;
	--modal-border: 2px outset #90a0b0;
	--modal-header-background: #a8b8c8;
	--about-background: #dfdfdf;
	--about-border: 2px outset #a0a0a0;
	--about-header-background: #afafaf;
	--about-notice-background: #cfcfcf;
	--form-button-foreground: #282828;
	--form-button-background: #cfcfcf;
	--message-color: #404040;
	--warning-color: #8f3f3f;
	--success-color: #3f8f3f;
	--input-text-background: #efefef;
	--mouse-tracker-foreground: #282828;
	--mouse-tracker-background: #dfdfdf;
	--range-track-color: #ffffff;
	--range-thumb-color: #376ca6;
	--range-prog-color: #679cd6;
	--anchor-color: #4f7faf;
}
html[data-theme='dark'] {
	--foreground-color: #efefef;
	--foreground-head-color: #dfdfdf;
	--background-head-color: #989898;
	--background-head-gradient: linear-gradient(90deg, #afafaf 0%, #989898 10%, #989898 90%, #afafaf 100%);
	--border-style: 1px solid #afafaf;
	--tool-background: #3f3f3f;
	--tool-fill: none;
	--tool-outline: #afafaf;
	--tool-hover-fill: #808080;
	--tool-hover-outline: #ffffff;
	--palette-background-color: #afafaf;
	--info-background-color: #9f9f9f;
	--palette-button-background: #7f7f7f;
	--palette-button-active-background: #bf6f1f;
	--palette-button-disabled-background: #6f6f6f;
	--palette-button-border: none;
	--palette-button-border-draw: 1px solid #c0c0c0;
	--palette-button-fill: #87bcf6;
	--layer-toggle-fill: none;
	--layer-toggle-outline: #000000;
	--layer-toggle-outline-thickness: 3px;
	--layer-toggle-color: #000000;
	--layer-toggle-background: #5f6f7f;
	--layer-toggle-active-fill: none;
	--layer-toggle-active-outline: #dfdfdf;
	--layer-toggle-active-outline-thickness: 3px;
	--layer-toggle-active-color: #dfdfdf;
	--layer-toggle-active-background: #7f8f9f;
	--header-background-color: #4f6f8f;
	--header-background: linear-gradient(#888f9f 0%, #787f8f 10%, #787f8f 90%, #484f5f 100%);
	--header-border: linear-gradient(#6f7f9f 0%, #8f9fbf 10%, #8f9fbf 90%, #afbfdf 100%);
	--menubutton-background: #a8afbf;
	--menubutton-svg-fill: #2f2f2f;
	--footer-background: #4f8f8f;
	--canvas-background: #ffffff;
	--sidebar-border-color: #c0c0c0;
	--modal-background: #7f8f9f;
	--modal-border: 2px outset #506070;
	--modal-header-background: #687888;
	--about-background: #7f7f7f;
	--about-border: 2px outset #585858;
	--about-header-background: #5f5f5f;
	--about-notice-background: #6f6f6f;
	--form-button-foreground: #efefef;
	--form-button-background: #6f6f6f;
	--message-color: #c0c0c0;
	--warning-color: #ffbfbf;
	--success-color: #bfffbf;
	--input-text-background: #cfcfcf;
	--mouse-tracker-foreground: #b8b8b8;
	--mouse-tracker-background: #404040;
	--range-track-color: #d0d0d0;
	--range-thumb-color: #578cc6;
	--range-prog-color: #87bcf6;
	--anchor-color: #9fcfff;
}
html[handedness='left'] {
	--sidebar-order: 1;
	--toolbar-order: 1;
	--sidebar-border-width: 0px 1px 0px 0px;
	--tool-active-corners: 8px 0px 0px 8px;
	--palette-border-left: none;
	--palette-border-right: 1px solid #404040;
}
html[handedness='right'] {
	--sidebar-order: 9;
	--toolbar-order: 9;
	--sidebar-border-width: 0px 0px 0px 1px;
	--tool-active-corners: 0px 8px 8px 0px;
	--palette-border-left: 1px solid #404040;
	--palette-border-right: none;
}
html[data-theme='light'][handedness='left'] {
	--toolbar-background: linear-gradient(90deg, #808080 0%, #606060 100%);
	--tool-active-background: linear-gradient(90deg, #e8e8e8 0%, #d8d8d8 100%);
	--palette-background: linear-gradient(90deg, #d8d8d8 0%, #c8c8c8 100%);
	--info-background: linear-gradient(90deg, #a8a8a8 0%, #989898 100%);
	--background-head-gradient: linear-gradient(90deg, #d8d8d8 0%, #b8b8b8 10%, #b0b0b0 90%, #c8c8c8 100%);
}
html[data-theme='light'][handedness='right'] {
	--toolbar-background: linear-gradient(90deg, #606060 0%, #808080 100%);
	--tool-active-background: linear-gradient(90deg, #d8d8d8 0%, #e8e8e8 100%);
	--palette-background: linear-gradient(90deg, #c8c8c8 0%, #d8d8d8 100%);
	--info-background: linear-gradient(90deg, #989898 0%, #a8a8a8 100%);
	--background-head-gradient: linear-gradient(90deg, #c8c8c8 0%, #b0b0b0 10%, #b8b8b8 90%, #d8d8d8 100%);
}
html[data-theme='dark'][handedness='left'] {
	--toolbar-background: linear-gradient(90deg, #505050 0%, #303030 100%);
	--tool-active-background: linear-gradient(90deg, #bfbfbf 0%, #afafaf 100%);
	--palette-background: linear-gradient(90deg, #afafaf 0%, #9f9f9f 100%);
	--info-background: linear-gradient(90deg, #5f5f5f 0%, #4f4f4f 100%);
	--background-head-gradient: linear-gradient(90deg, #afafaf 0%, #989898 10%, #909090 90%, #9f9f9f 100%);
}
html[data-theme='dark'][handedness='right'] {
	--toolbar-background: linear-gradient(90deg, #303030 0%, #505050 100%);
	--tool-active-background: linear-gradient(90deg, #afafaf 0%, #bfbfbf 100%);
	--palette-background: linear-gradient(90deg, #9f9f9f 0%, #afafaf 100%);
	--info-background: linear-gradient(90deg, #4f4f4f 0%, #5f5f5f 100%);
	--background-head-gradient: linear-gradient(90deg, #9f9f9f 0%, #909090 10%, #989898 90%, #afafaf 100%);
}

/* Page Styles */

* {
	box-sizing: border-box;
}
html {
	height: 100%;
}
body {
	margin: 0;
	padding: 0;
	height: 100%;
	color: var(--foreground-color, #000000);
	font-family: var(--font-family, sans-serif);
}

/* Element Identity Styles */

#container {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	margin: 0;
}
#header {
	display: flex;
	flex-direction: row;
	height: var(--header-height, 36px);
	text-align: left;
	vertical-align: middle;
	white-space: nowrap;
	margin: 0px;
	padding: 0px;
	background: var(--header-background, none);
	background-color: var(--header-background-color, #efefcf);
	border: none;
}
#header-logo {
	display: flex;
	order: 1;
	align-items: center;
	padding: 4px 16px;
	font-variant: small-caps;
	border-width: 0px 2px 0px 0px;
	border-style: solid;
	border-image: var(--header-border, linear-gradient(#6f8faf 0%, #8fafcf 10%, #8fafcf 90%, #9fbfcf 100%)) 1;
}
#header-gadgets {
	display: flex;
	flex: 1;
	order: 9;
	align-items: center;
	justify-content: right;
	padding: 4px;
}
#framework {
	flex: 1;
	display: flex;
	flex-direction: row;
	overflow: hidden;
}
#canvas-panel {
	display: flex;
	flex-direction: column;
	flex: 1;
	order: 5;
	height: 100%;
	overflow: auto;
}
#canvas-frame {
	padding: 0;
	height: 100%;
	width: auto;
	background-color: var(--canvas-background, #ffffff);
	white-space: nowrap;
	overflow: auto;
}
#sidebar {
	display: flex;
	flex-direction: row;
	order: var(--sidebar-order, 9);
	width: 317px;
	height: 100%;
}
#toolbar {
	order: var(--toolbar-order, 9);
	width: 36px;
	height: 100%;
	background: var(--toolbar-background, linear-gradient(90deg, #808080 0%, #606060 100%));
	background-color: var(--toolbar-background-color, #808080);
	overflow-y: auto;
}
#palette {
	display: flex;
	flex-direction: column;
	flex: 1;
	order: 5;
	background: var(--palette-background, none);
	background-color: var(--palette-background-color, #efefef);
	border-left: var(--palette-border-left, none);
	border-right: var(--palette-border-right, none);
	width: 281px;
	padding: 0px;
	margin: 0px;
}
#item-panel {
	display: flex;
	flex-direction: column;
	flex: 1;
	order: 5;
	width: 281px;
	overflow: auto;
	text-align: center;
}
#info-panel {
	order: 9;
	text-align: left;
	vertical-align: bottom;
	border-top: var(--border-style, 1px solid #404040);
	background: var(--info-background, none);
	background-color: var(--info-background-color, #efefef);
	line-height: 0;
}
#load-file-selector {
	display: none;
	width: 300px;
	height: 240px;
	margin-left: -150px;
	margin-top: -120px;
}
#load-file-div {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	width: 260px;
	margin: 4px 0px 16px 0px;
}
#save-file-selector {
	display: none;
	width: 300px;
	height: 240px;
	margin-left: -150px;
	margin-top: -120px;
}
#save-file-form {
	text-align: center;
	padding: 6px 0px;
}
#export-file-selector {
	display: none;
	width: 300px;
	height: 240px;
	margin-left: -150px;
	margin-top: -120px;
}
#export-file-form {
	text-align: center;
	padding: 6px 0px;
}
#image-save-gadget {
	display: none;
	width: 300px;
	height: 200px;
	margin-left: -150px;
	margin-top: -100px;
}
#save-scale-gadget {
	margin: 8px;
}
#load-backdrop-selector {
	display: none;
	width: 300px;
	height: 200px;
	margin-left: -150px;
	margin-top: -100px;
}
#material-editor {
	display: none;
	width: 300px;
	height: 200px;
	margin-left: -150px;
	margin-top: -100px;
}
#material-editor label {
	font-size: 12px;
	font-weight: bold;
}
#material-editor-label {
	font-family: monospace;
	font-size: 16px;
}
#material-editor-name {
	font-family: monospace;
	font-size: 12px;
}
#shader {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: fixed;
	background: #000000;
	display: none;
	opacity: 0.5;
}
#overlay {
	display: none;
}
#zoomlevel {
}
#hexshade {
}
#random-map-terrain {
	display: none;
}
#random-map-rooms {
	display: none;
}
#random-map-tunnels {
	display: none;
}
#about-modal {
	display: none;
}
#mouse-widgets {
	display: flex;
	flex-direction: row;
	height: 26px;
	margin: 0;
	padding: 0;
	vertical-align: middle;
}
#mouse-tracker {
	display: flex;
	flex: 1;
	order: 5;
	height: 24px;
	color:  var(--mouse-tracker-foreground, #303030);
	background-color: var(--mouse-tracker-background, #dfdfdf);
	font-size: 16px;
	text-align: left;
	border: var(--border-style, 1px solid #404040);
	border-radius: 8px;
	margin: 0px 4px 0px 0px;
	padding: 0px 8px;
	line-height: normal;
}
#mouse-tracker-label {
	display: flex;
	order: 1;
	height: 24px;
	padding: 0px 4px;
	font-weight: bold;
	vertical-align: middle;
}
#mouse-tracker-zoom {
	display: flex;
	order: 9;
	text-align: right;
}

/* Common Interface Styles */

div.modal {
	text-align: center;
	background-color: var(--modal-background, #bfcfdf);
	position: fixed;
	top: 50%;
	left: 50%;
	padding: 16px;
	border: var(--modal-border, 2px outset #90a0b0);
	border-radius: 8px;
}
div.modalheader {
	display: block;
	font-size: 80%;
	font-weight: bold;
	text-align: center;
	color: var(--foreground-head-color, #000000);
	background-color: var(--modal-header-background, #808080);
	padding: 1px 4px;
	margin: 0px 1px 4px 1px;
	border-radius: 6px;
}
div.modalnote {
	display: block;
	font-size: 70%;
	text-align: left;
	width: 100%;
	margin-top: 16px;
}
input[type=button].modalbutton {
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	font-size: 12px;
	margin: 2px;
	padding: 3px 6px;
	color: var(--form-button-foreground, #ffffff);
	background-color: var(--form-button-background, #cfcfcf);
	border: var(--border-style, 1px solid #404040);
	border-radius: 4px;
	cursor: pointer;
}
div.dialog {
	width: 400px;
	height: 360px;
	margin-left: -200px;
	margin-top: -180px;
}
div.dialogbody {
	display: block;
	font-size: 90%;
}
div.about {
	width: 400px;
	min-height: 460px;
	margin-left: -200px;
	margin-top: -230px;
	background-color: var(--about-background, #cfcfcf);
	border: var(--about-border, 2px outset #a0a0a0);
}
div.aboutheader {
	display: block;
	font-size: 80%;
	font-weight: bold;
	text-align: center;
	color: var(--foreground-head-color, #000000);
	background-color: var(--about-header-background, #808080);
	padding: 1px 4px;
	margin: 0px 1px 4px 1px;
	border-radius: 6px;
}
div.headersep {
	display: inline-block;
	width: 2px;
	height: var(--header-height, 36px);
	margin: 0px 4px;
	padding: 0px;
	vertical-align: middle;
	border-width: 0px 2px 0px 0px;
	border-style: solid;
	border-image: var(--header-border, linear-gradient(#6f8faf 0%, #8fafcf 10%, #8fafcf 90%, #9fbfcf 100%)) 1;
}
div.messagebox {
	display: block;
	font-size: 12px;
	color: var(--message-color, #404040);
	margin: 2px;
	padding: 0px;
	text-align: center;
}
div.aboutblock {
	display: block;
}
div.abouttext {
	font-size: 70%;
	text-align: left;
}
div.updateblock {
	display: block;
	margin: 8px auto;
	padding: 2px;
	font-size: 75%;
	text-align: center;
	background-color: var(--about-notice-background, #cfcfcf);
	border-radius: 6px;
}
div.footnotes {
	display: block;
	font-size: 50%;
	text-align: center;
}
div.aboutlinks {
	display: block;
	text-align: center;
	margin-top: 8px;
}
div.linkblock {
	font-size: 80%;
}
div.licenseblock {
	display: block;
	text-align: left;
	margin-top: 8px;
	padding-top: 4px;
	border-top: 1px solid #404040;
}
div.licenseheader {
	display: block;
	font-size: 70%;
	font-weight: bold;
	text-align: center;
}
div.licenseimage {
	text-align: center;
	font-size: 60%;
	margin-bottom: 4px;
}
div.licenseitem {
	display: block;
	font-size: 70%;
}
a[href] {
	color:  var(--anchor-color, #4f7faf);
	text-decoration: none;
}

/* Javascript Utilised Styles */

div.toolicon {
	display: inline-block;
	width: 36px;
	height: 36px;
	margin: 0px;
	padding: 2px;
	text-align: center;
}
div.toolicon-active {
	background: var(--tool-active-background, linear-gradient(90deg, #d8d8d8 0%, #e8e8e8 100%));
	background-color: var(--palette-background-color, #efefef);
	border-radius: var(--tool-active-corners, 0px 8px 8px 0px);
}
div.palettetool {
	display: inline-block;
	width: 66px;
	height: 66px;
	margin: 2px;
	padding: 2px;
	text-align: center;
	color: var(--foreground-color, #000000);
	background-color: var(--palette-button-background, #efefef);
	border: var(--palette-button-border, none);
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	line-height: normal;
}
div.palettetool-active {
	font-style: normal;
	color: var(--foreground-color, #ffffff);
	background-color: var(--palette-button-active-background, #ffaf5f);
	cursor: pointer;
}
div.palettetool-disabled {
	font-weight: normal;
	font-style: italic;
	background-color: var(--palette-button-disabled-background, #9f9f9f);
	cursor: default;
}
div.annotatetool {
	display: inline-block;
	width: 26px;
	height: 26px;
	margin: 2px;
	padding: 4px;
	text-align: center;
	vertical-align: middle;
	border: var(--palette-button-border, none);
	border-radius: 4px;
	background-color: #efefef;
	font-size: 12px;
	line-height: normal;
}
div.annotatetool-active {
	font-weight: bold;
	font-style: normal;
	background-color: #ffaf5f;
	cursor: pointer;
}
div.layerbutton {
	display: inline-block;
	width: 48px;
	height: 48px;
	margin: 1px;
	padding: 6px 2px 2px 2px;
	font-size: 10px;
	color: var(--layer-toggle-color, #404040);
	background-color: var(--layer-toggle-background, #8f9faf);
	border: none;
	border-radius: 6px;
	cursor: pointer;
	overflow: hidden;
}
div.layerbutton-active {
	color: var(--layer-toggle-active-color, #ffffff);
	background-color: var(--layer-toggle-active-background, #9fafbf);
}
div.buttonlabel {
	display: block;
	text-align: center;
	font-size: 10px;
	margin: 0px;
	padding: 0px;
}
div.menubutton {
	display: inline-block;
	width: 28px;
	height: 28px;
	margin: 0px 2px;
	padding: 2px;
	text-align: center;
	vertical-align: middle;
	background-color: var(--menubutton-background, #6f8faf);
	border-radius: 4px;
	cursor: pointer;
}
div.menulabelbutton {
	display: inline-block;
	width: auto;
	height: 28px;
	margin: 0px 2px;
	padding: 0px 4px;
	text-align: center;
	vertical-align: middle;
	font-family: var(--font-family-menu, sans-serif);
	font-size: 16px;
	color: var(--menubutton-svg-fill, #cfcfcf);
	background-color: var(--menubutton-background, #6f8faf);
	border-radius: 4px;
	cursor: pointer;
}
span.menulabel {
	padding: 2px;
	vertical-align: middle;
	font-variant: small-caps;
}
div.toolsep {
	display: block;
	width: 36px;
	height: 2px;
	margin: 2px 0px 4px 0px;
	padding: 0px;
	border-width: 2px 0px 0px 0px;
	border-style: solid;
	border-image: var(--toolbar-separator, linear-gradient(90deg, #404040 0%, #000000 100%)) 1;
}
div.notclickable {
	cursor: default !important;
}
div.warning {
	display: inline-block;
	color: var(--warning-color, #8f3f3f);
}
div.success {
	display: inline-block;
	color: var(--success-color, #3f8f3f);
}

/* Input Elements */

input {
	font-family: var(--font-family, sans-serif);
	font-size: 12px;
}
input[type=color] {
	width: 64px;
	height: 64px;
}
input[type=text] {
	border: none;
	border-radius: 4px;
	padding: 2px;
	background-color: var(--input-text-background, #ffffff);
}
input[type=range] {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	background-color: transparent;
	cursor: pointer;
	height: 4px;
}
input[type=range]::-webkit-slider-runnable-track {
	height: 4px;
	background-color: var(--range-track-color, #ffffff);
	border: none;
}
input[type=range]::-moz-range-track {
	height: 4px;
	background-color: var(--range-track-color, #ffffff);
	padding: 0px;
	border: none;
}
input[type=range]::-ms-track {
	height: 4px;
	background-color: var(--range-track-color, #ffffff);
	border: none;
}
input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	height: 12px;
	width: 12px;
	background-color: var(--range-thumb-color, #376ca6);
	margin-top: -4px;
	border: none;
	border-radius: 6px;
}
input[type=range]::-moz-range-thumb {
	-webkit-appearance: none;
	appearance: none;
	height: 12px;
	width: 12px;
	background-color: var(--range-thumb-color, #376ca6);
	border: none;
}
input[type=range]::-ms-thumb {
	-webkit-appearance: none;
	appearance: none;
	height: 12px;
	width: 12px;
	background-color: var(--range-thumb-color, #376ca6);
	border: none;
}
input[type=range]::-moz-range-progress {
	height: 4px;
	background-color: var(--range-prog-color, #679cd6);
	border: none;
}
input[type=range]::-ms-fill-lower {
	height: 4px;
	background-color: var(--range-prog-color, #679cd6);
	border: none;
}
select {
	font-family: var(--font-family, sans-serif);
	font-size: 11px;
	border: none;
}

/* SVG Classes */

div.toolicon svg {
	fill: var(--tool-fill, none);
	stroke: var(--tool-outline, #ffffff);
	stroke-width: var(--tool-outline-thickness, 3px);
}
div.toolicon:hover svg {
	fill: var(--tool-hover-fill, #376ca6);
	stroke: var(--tool-hover-outline, #000000);
	stroke-width: var(--tool-hover-outline-thickness, 3px);
}
div.toolicon-active svg {
	fill: var(--tool-active-fill, #c0c0c0);
	stroke: var(--tool-active-outline, #404040);
	stroke-width: var(--tool-active-outline-thickness, 3px);
}
div.toolicon-active:hover svg {
	fill: var(--tool-active-hover-fill, #c0c0c0);
	stroke: var(--tool-active-hover-outline, #404040);
	stroke-width: var(--tool-active-hover-outline-thickness, 3px);
}
div.palettetool svg {
	margin: 0px;
	padding: 0px;
	fill: var(--palette-button-fill, #376ca6);
	stroke: var(--palette-button-fill, #376ca6);
}
div.palettetool-custom svg {
	fill: none;
}
div.menubutton svg {
	fill: var(--menubutton-svg-fill, #cfcfcf);
	stroke: none;
	stroke-width: 0;
}
div.menulabelbutton svg {
	fill: var(--menubutton-svg-fill, #cfcfcf);
	stroke: none;
	stroke-width: 0;
	vertical-align: middle;
}
div.layerbutton svg {
	fill: var(--layer-toggle-fill, none);
	stroke: var(--layer-toggle-outline, #404040);
	stroke-width: var(--layer-toggle-outline-thickness, 3px);
}
div.layerbutton-active svg {
	fill: var(--layer-toggle-active-fill, none);
	stroke: var(--layer-toggle-active-outline, #ffffff);
	stroke-width: var(--layer-toggle-active-outline-thickness, 3px);
}
div.toolicon-active .svgfclr1 {
	fill: var(--tool-button-fill-1, #808080);
}
div.toolicon-active .svgfclr2 {
	fill: var(--tool-button-fill-2, #808080);
}
div.toolicon-active .svgfclr3 {
	fill: var(--tool-button-fill-3, #808080);
}
div.toolicon-active .svglclr1 {
	stroke: var(--tool-button-fill-1, #808080);
}
div.toolicon-active .svglclr2 {
	stroke: var(--tool-button-fill-2, #808080);
}
div.toolicon-active .svglclr3 {
	stroke: var(--tool-button-fill-3, #808080);
}

/* Palettes */

div.paletteblock {
	display: block;
	width: 100%;
	text-align: center;
	vertical-align: top;
}
div.paletteheader {
	display: block;
	font-size: 80%;
	font-weight: bold;
	text-align: center;
	color: var(--foreground-head-color, #000000);
	background: var(--background-head-gradient, none);
	padding: 1px 4px;
	margin: 0px 1px;
}
div.palettesubheader {
	display: block;
	font-size: 80%;
	font-weight: normal;
	font-style: italic;
	text-align: center;
	color: var(--foreground-head-color, #000000);
	padding: 1px 4px;
}
div.palettebuttons {
	text-align: left;
	line-height: 0;
}
#pblockMapSettings {
	display: block;
}
#pblockLayers {
	display: none;
}
#pblockTools {
	display: none;
}
#pblockMaterialStandard {
	display: none;
}
#pblockMaterialCustom {
	display: none;
}
#pblockBaseElements {
	display: block;
}
#pblockTerrain {
	display: none;
}
#pblockOverlayElements {
	display: none;
}
#pblockFeature {
	display: none;
}
#pblockDecor {
	display: none;
}
#pblockSymbol {
	display: none;
}
#pblockAnnotate {
	display: none;
}
#pblockMegahex {
	display: none;
}
#pblockCompose {
	display: none;
}
#showOpacity {
	font-weight: bold;
}
#mhexThick {
	width: 120px;
}
#mhexDotWt {
	width: 120px;
}

/* Legacy Styles */

div.paletteForm {
	margin-bottom: 8px;
	padding: 2px;
	font-size: 12px;
	text-align: left;
}
div.paletteForm label {
	font-weight: bold;
	padding-right: 0.25em;
}
div.paletteFormItem {
	display: inline-block;
	padding: 2px;
	line-height: normal;
}
div.paletteWidget {
	display: inline-block;
	margin: 2px;
	padding: 4px;
	height: 64px;
	text-align: center;
	vertical-align: top;
	color: var(--foreground-color, #000000);
	background-color: var(--palette-button-background, #efefef);
	border: var(--palette-button-border, none);
	border-radius: 8px;
	font-size: 10px;
}
div.paletteBreak {
	display: block;
	height: 0px;
}
div.widgetBlock {
	display: flex;
	width: 100%;
	height: 24px;
	margin: 10px 0px;
	padding: 0px;
	white-space: nowrap;
	justify-content: center;
}
input[type=text].embedInput {
	display: inline-block;
	margin: 1px 8px;
	padding: 0;
	width: 36px;
	text-align: center;
	vertical-align: middle;
	font-size: 10px;
	border: var(--border-style, 1px solid #404040);
	background-color: var(--input-text-background, white);
}
div.widgetWidth {
	width: 200px;
}
div.widgetPad {
	padding: 8px;
}
img.widgetButton {
	height: 20px;
	width: 20px;
	border: none;
	margin: 1px;
	cursor: pointer;
}
div.formTitle {
	font-size: 90%;
	font-weight: bold;
	margin: 8px 0;
	text-align: left;
}
div.formTools {
	display: block;
	margin: 8px 0;
	font-size: 90%;
}
div.formBlock {
	display: inline-block;
	font-size: 90%;
	text-align: left;
	vertical-align: top;
}
div.formColumn {
	display: inline-block;
	width: 40%;
	font-size: 90%;
	text-align: left;
	vertical-align: top;
}
span.formCheck {
	display: block;
}
span.formElem {
	display: block;
	padding-bottom: 2px;
}
div.formFoot {
	display: block;
	margin: 8px 0;
}
div.formButton {
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	font-size: 12px;
	margin: 0 0 0 4px;
	padding: 3px 6px;
	color: var(--form-button-foreground, #ffffff);
	background-color: var(--form-button-background, #cfcfcf);
	border: var(--border-style, 1px solid #404040);
	border-radius: 4px;
	cursor: pointer;
	float: right;
}
div.formNote {
	display: block;
	width: 60%;
	text-align: left;
	font-size: 80%;
}