@font-face {
	font-family: 'Almendra SC';
	font-style: normal;
	font-weight: 400;
	src: url(data:application/font-woff2;charset=utf-8;base64, ) format('woff2');
}

t {
	pointer-events: none;
}

input, select, button {
	font-size: 1em;
}

input, select, textarea {
	border: 0.5px solid #DBDFE6;
	border-radius: .5px;
	box-sizing: border-box;
}

select {
	height: 1.6em;
	border-top-color: #abadb3;
	padding: 0;
	text-indent: 0px;
}

input {
	border-top-color: #abadb3;
	padding: 2px;
	text-indent: 1px;
}

input:read-only {
	cursor: default;
}

textarea {
	padding: 2px;
	text-indent: 1px;
	box-sizing: border-box;
	width: 100%;
}

#map {
	background-color: #000000;
	mask-mode: alpha;
	mask-clip: no-clip;
	fill-rule: evenodd;
}

#canvas {
	position: absolute;
	pointer-events: none;
}

#preview {
	position: absolute;
	bottom: 1em;
	left: 1em;
	cursor: pointer;
}

#pickerContainer {
	position: absolute;
	z-index: 100;
}

input, button, select, a, textarea {
	outline: none;
}

button, select, a {
	cursor: pointer;
}

.pointer {
	cursor: pointer !important;
}

#prec text {
	font-size: 32px;
	stroke: none;
	text-shadow: 1px 1px 1px #9daac9;
	user-select: none;
}

#population, #cells, #compass {
	fill: none;
}

#biomes {
	stroke-width: .7;
	fill-rule: evenodd;
}

#landmass {
	mask: url(#land);
	fill-rule: evenodd;
}

#lakes, #coastline, #armies, #ice, #emblems {
	cursor: pointer;
}

#temperature {
	font-family: sans-serif;
	font-weight: 700;
	text-anchor: middle;
	dominant-baseline: central;
	text-shadow: 0px 0px 10px white;
	fill-rule: evenodd;
}

#oceanLayers, #terrs {
	fill-rule: evenodd;
}

#coastline {
	fill: none;
	stroke-linejoin: round;
}

#regions, #cults, #relig, #biomes, #provincesBody, #terrs, #biomes, #tooltip, #temperature, #texture, #landmass, #fogging {
	pointer-events: none;
}

#armies text {
	pointer-events: none;
	user-select: none;
	stroke: none;
	fill: #fff;
	text-shadow: 0 0 4px #000;
	dominant-baseline: central;
	text-anchor: middle;
	font-family: Helvetica;
	fill-opacity: 1;
}

#armies text.regimentIcon {
	font-size: .8em;
}

#statesBody, #provincesBody {
	stroke-width: 2;
	fill-rule: evenodd;
	mask: url(#land);
}

#relig, #biomes, #cults {
	stroke-width: .6;
	fill-rule: evenodd;
	mask: url(#land);
}

#statesHalo {
	fill: none;
	filter: url(#blur5);
}

#borders {
	stroke-linejoin: round;
	fill: none;
}

#rivers {
	stroke: none;
	mask: url(#land);
	cursor: pointer;
}

#anchors {
	pointer-events: none;
}

#terrain, #burgIcons {
	cursor: pointer;
}

.strokes {
	stroke-width: .08px;
	width: 2px;
	stroke: #5c5c70;
	stroke-dasharray: 0.5, 0.7;
	stroke-linecap: round;
}

#routes {
	fill: none;
	cursor: pointer;
}

#options .pressed {
	background-color: #896c77 !important;
	font-style: italic;
}

i.icon-lock {
	cursor: pointer;
}

#routeEditor > *,
#labelEditor div, 
#markerEditor div {
	display: inline-block;
}

#labels {
	text-anchor: start;
	dominant-baseline: central;
	text-shadow: 0 0 4px white;
	cursor: pointer;
}

.chartInfo {
	text-align: center;
	font-family: sans-serif;
	font-style: italic;
	font-size: 12px;
}

#hierarchy .selected {
	stroke: #c13119;
	stroke-width: 1;
	cursor: move;
}

#hierarchy text,
#statesTree text,
#provincesTree text {
	pointer-events: none;
	user-select: none;
	stroke: none;
	font-size: 11px;
}

#statesTree circle {
	filter: url(#dropShadow05);
	stroke: #666666;
	stroke-width: 1;
}

#statesTree circle.selected,
#provincesTree .selected {
	stroke: #c13119;
	stroke-width: 2;
}

.dragLine {
	marker-end: url(#end-arrow);
	stroke: #333333;
	stroke-dasharray: 5;
	stroke-dashoffset: 1000;
	animation: dash 80s linear backwards;
}

@keyframes dash {
	to {stroke-dashoffset: 0}
}

#provinceLabels,
#burgLabels {
	dominant-baseline: alphabetic;
	text-anchor: middle;
}

#routeLength,
#coastlineArea {
	background-color: #eeeeee;
	border: 1px solid #a5a5a5;
	line-height: 1.3em;
	cursor: default;
}

#brushCircle {
	stroke: #373737;
	stroke-width: 1.5px;
	stroke-dasharray: 7;
	stroke-linecap: butt;
	fill: none;
}

text.drag {
	text-shadow: 0 0 1px red;
}

.draggable {
	cursor: move;
}

.ui-dialog, #optionsContainer {
	user-select: none;
}

#collapsible {
	margin: 11px;
	border: 0;
	position: absolute;
	z-index: 2;
}

div.tab > button#optionsHide {
	width: 7%;
	height: 100%;
	font-family: Times New Roman, Arial;
	padding: 7px 0px;
}

#options {
	margin: 10px;
	font-family: Consolas, monospace;
	position: absolute;
	border: solid 1px #5e4fa2;
	width: 300px;
	background-position: center;
	background-size: cover;
	background-blend-mode: color-dodge;
}

#options input, #options select, #options button {
	font-family: Consolas, monospace;
}

.tab {
	overflow: hidden;
	border-bottom: 1px solid #5d4651;
	height: 2.2em;
}

#options p {
	font-style: italic;
	font-weight: bold;
	margin: .8em 0 0 0;
}

#aboutContent {
	text-align: justify;
}

#aboutContent p {
	font-weight: normal;
}

#aboutContent a {
	color: #1d1b1c;
	font-weight: bold;
	text-decoration: underline;
}

#optionsContent span {
	font-size: .9em;
}

#options i {
	color: #31272c;
	font-size: .8em;
	cursor: pointer;
}

input[type="color"] {
	-webkit-appearance: none;
	cursor: pointer;
	border: 1px solid #a9a9a9;
}

input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
}

#options input[type="color"] {
	width: 4.5em;
	height: 1em;
	border: 0;
}

#convertImageDialog input[type="color"] {
	width: 38px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

#options select {
	height: 1.5em;
	border: 0;
	cursor: pointer;
	font-size: smaller;
}

#options input[type="range"] {
	height: 8px;
	background: 0;
	-moz-appearance: none;
	-webkit-appearance: none;
	margin-left: 0;
	border: 0;
	padding: 0;
}

#options input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	border-radius: 15%;
	width: .91em;
	height: .91em;
	background: #a58394;
	border: 1px solid #5d4651;
	cursor: pointer;
	margin-top: -.4em;
	box-shadow: .5px .5px 0px #5d4651;
}

#options input[type="range"]::-moz-range-thumb {
	-moz-appearance: none;
	border-radius: 15%;
	width: .73em;
	height: .73em;
	background: #a58394;
	border: 1px solid #5d4651;
	cursor: pointer;
	box-shadow: .5px .5px 0px #5d4651;
}

#options input[type=range]::-webkit-slider-runnable-track {
	height: 2px;
	background: #ffffff;
}

#options input[type=range]::-moz-range-track {
	-moz-appearance: none;
	background-color: #ffffff;
	height: 2px;
}

#options input[type="number"] {
	font-size: .8em;
}

#options input[type="text"] {
	border: 0px;
	width: 62%;
	font-size: smaller;
}

#optionsContent output {
	text-align: right;
	font-size: smaller;
}

#optionsContent input[type="number"] {
	border: 0;
	text-align: right;
	background-color: transparent;
	width: 3.3em;
	-moz-appearance: textfield;
}

#optionsContent input[type=number]::-webkit-inner-spin-button, 
#optionsContent input[type=number]::-webkit-outer-spin-button { 
	-webkit-appearance: none;
	margin: 0;
}

#optionsContent input[type="number"]:hover {
	outline: 1px solid #5d4651;
}

#optionsContent input.paired {
	text-align: center;
	background-color: white;
}

#optionsContent input.long {
	width: 100%;
  background-color: white;
  text-align: left;
}

#optionsContent input[type="range"] {
	width: 100%;
}

#optionsContent select {
	width: 100%;
}

#optionsSeedGenerate:before {
	content: '✓';
	margin-left: -2px;
	font-weight: bold;
}

#layersContent button.presetButton {
  position: absolute;
  height: 2em;
  border-radius: 15%;
  margin: 1.3em 0 0 .6em;
  font-size: .7em;
}

#styleContent button.styleButton {
	font-size: 70%;
	border-radius: 15%;
	margin: 0;
}

#layersContent button.active,
#styleContent button:active {
	transform: translate(0px, 1px);
}

#styleElements input[type="range"] {
	width: 64%;
}

#styleElements select {
	width: 64%;
}

#styleElements input[type="number"] {
	width: 52px;
	border: 0;
	padding-left: 2.5px;
}

#sticked button {
	background-color: #997c8900;
	padding: 0;
	margin-bottom: 2px;
	width: 22%;
	font-size: 1em;
	border: 0;
	font-weight: bold;
}

#sticked button:hover {
	color: white;
}

#exitCustomization {
	right: 10px;
	bottom: 10px;
	position: absolute;
	display: none;
}

#exitCustomization > div {
	width: 12em;
	background: #5d4651;
	cursor: move;
}

#finalizeHeightmap {
	width: 100%;
	border: none;
	padding: .45em .75em;
	margin: .4em 0;
	font-family: Consolas, monospace;
	animation: glowing 2s infinite;
}

.glow {
	animation: glowing 3s infinite;
}

@keyframes glowing {
	0% {box-shadow: 0 0 -4px #ded2d8;}
	50% {box-shadow: 0 0 8px #F44336;}
	100% {box-shadow: 0 0 -4px #ded2d8;}
}

.tab > button.options {
	width: 18.6%;
	height: 100%;
	padding: 6px 0px;
}

button.options {
	background-color: #997b89;
	font-weight: bold;
	float: left;
	border: none;
	border-radius: 0;
	padding: 8px 10px;
	transition: 0.2s;
}

button.options:hover {
	background-color: #806070 !important;
	color: white !important;
}

button.active {
	background-color: #916e7f;
	color: white;
}

.tabcontent {
	display: none;
	padding: 0 12px 2px 12px;
	opacity: 0.9;
}

.tabcontent button {
	background-color: #916e7f;
	border: none;
	padding: .45em .75em;
	margin: .35em 0;
	transition: 0.1s;
	font-size: 1em;
}

.tabcontent button:hover {
	background-color: #a8879d !important;
}

#mapLayers {
	display: inline-block;
	padding: 0;
	margin: 0;
}

#mapFilters > button {
	width: 23%;
	padding: 4px 0;
}

#viewMode > button {
	padding: .35em;
	margin: .2em .3em .6em .3em;
	float: left;
	width: 30.7%;
}

fieldset {
	border: 1px solid #5d4651;
}

.tabcontent li {
	list-style-type: none;
	background-color: #997b89;
	cursor: pointer;
	padding: .35em;
	margin: .2em .3em;
	float: left;
	width: 28%;
	text-align: center;
}

#options .buttonoff {
	background-color: #b6b4b440 !important;
	color: grey;
}

.tabcontent li:hover,
.tabcontent button:hover {
	box-shadow: 0 0 2px 2px #5d465117;
}

#optionsContainer span {
	cursor: default;
}

#cellInfo {
	user-select: text;
}

#tooltip {
	position: fixed;
	text-align: center;
	bottom: 0.5vw;
	width: 70%;
	left: 15%;
	cursor: default;
	text-shadow: 1px 1px 2px #1d0e0f;
	color: #ffffff;
	font-size: calc(12px + 0.5vw);
	white-space: pre-line;
	z-index: 99999;
	background: linear-gradient(0.1turn, #ffffff00, #c71d1d66, #ffffff00);
}

#optionsContent table {
	border-spacing: 0;
	line-height: 1.2em;
}

#optionsContent table td:nth-of-type(1) {
	width: 3%;
}

#optionsContent table td:nth-of-type(2) {
	width: 40%;
}

#optionsContent table td:nth-of-type(4) {
	text-align: right;
	width: 6%;
}

.emblemShapePreview {
	width: 1.5em;
	height: 1.5em;
	margin: -.4em .1em;
	fill: #fff;
	stroke: #000;
	stroke-width: 5px;
}

#styleContent table {
	border-spacing: 0;
	margin-left: .2em;
	width: 100%;
}

#styleContent table tr {
	width: 100%;
	display: table;
}

#styleContent table td:nth-of-type(1) {
	width: 34.2%;
}

#styleElements tbody, #styleElements caption {
	display: none;
}

#styleIsOff {
	color: darkred;
	font-weight: 700;
	text-align: left;
}

#styleElements .whiteButton {
	padding: 0 .8em;
	border: 0;
	background-color: #ffffff !important;
}

.overflow-table {
	width: 100%;
	text-align: center;
}

.matrix-table {
	width: 100%;
	font-size: smaller;
	text-align: center;
	border-collapse: collapse;
}

table.matrix-table th, table.matrix-table td {
	border: 1px solid #5d4651;
	height: 2em;
	padding: .2em;
	position: relative;
}

table.matrix-table th {
	background-color: #302a2a;
	color: #ffffff;
}

table.matrix-table tr:hover th {
	background: #3e3636;
}

table.matrix-table td:hover {
	outline: 2px solid #5d4651;
	outline-offset: -1px;
	z-index: 1;
}

table.matrix-table td.Ally {
	background-color: #73ec73;
	color: #000000;
}

table.matrix-table td.Friendly {
	background-color:#d4f8aa;
}

table.matrix-table td.Neutral {
	background-color:#d8d9d3;
}

table.matrix-table td.Suspicion {
	background-color:#eeafaa;
}

table.matrix-table td.Enemy {
	background-color:#ffa39c;
	color: #af0d23;
}

table.matrix-table td.Unknown {
	background-color:#c1bfbf;
}

table.matrix-table td.Rival {
	background-color:#bd845c;
}

table.matrix-table td.Vassal {
	background-color:#87CEFA;
}

table.matrix-table td.Suzerain {
	background-color:#8f8fe1;
}

table.matrix-table td.x {
	background-color:#d4ca94;
}

#sizeOutput {
	color: green;
}

.setColors {
	display: inline-block;
}

body button.noicon {
	width: 1.8em;
  height: 1.6em;
  margin: 1px;
  padding: .1em .5em;
  float: left;
  font-size: 1.2em;
	font-family: Copperplate, monospace;
}

#brushesButtons > button {
	padding: .3em;
}

#brushesButtons svg {
	pointer-events: none;
}

#brushesPanel > div {
	margin: 2px 0;
}

#templateEditor > div {
	margin: 1px 0;
}

#templateEditor #templateTools {
	display: inline-block;
	margin-bottom: -.3em;
}

#templateBody > div {
  border: 1px solid #a3a3a3;
  border-radius: 1px;
  background-image: linear-gradient(to right, #ffffff 0%, #fafafa 51%, #ebebeb 100%);
  margin: 1px 1px;
  padding: .1em .2em;
  height: 1.2em;
}

#templateBody > div:hover {
	border-color: #808080;
	background-image: linear-gradient(to right, #fcfcfc 0%, #ededed 51%, #dedede 100%);
}

#templateBody > div > div {
	display: inline-block;
}

#templateBody > div > span {
	float: right;
	margin: 0 1px 0 .5px;
}

#templateBody > div > i {
	float: right; 
}

#templateBody input,
#templateBody select {
	width: 4em;
	height: 1em;
	border: 0;
	font-size: .95em;
	background-color: #ffffff95;
	color: #05044d;
	font-style: italic;
	font-family: monospace;
}

#templateBody select {
	width: 8em;
	height: 1.4em;
	cursor: pointer;
	font-size: .9em;
}

#templateBody .icon-resize-vertical {
	cursor: row-resize;
	font-size: .9em;
	color: #555555;
	margin: 1px 1px;
}

#templateBody .icon-check-empty,
#templateBody .icon-check {
	width: 1.1em;
	cursor: pointer;
	color: #575957;
	font-size: .9em;
}

#controlPoints {
	fill: #ff0000;
	stroke: #841f1f;
	stroke-width: .25;
	cursor: move;
	opacity: .8;
}

#controlPoints > path {
	fill: none;
	stroke: #000000;
	stroke-width: 2;
	opacity: .4;
	cursor: pointer;
}

#vertices > circle {
	fill: #ff0000;
	stroke: #841f1f;
	stroke-width: .1;
	cursor: move;
	opacity: .8;
}

#vertices > polygon {
	fill: none;
	stroke: #808080;
	stroke-width: .1;
}

#controlPoints > circle:hover,
#vertices> circle:hover {
	stroke: #2c0808;
}

#battleBody > table {
	padding: .2em .6em .2em .6em;
	border: 1px solid #ccc;
	margin: .2em 0 .4em 0;
	display: block;
	overflow: auto;
	max-height: 34vh;
	width: 100%;
}

#battleBody > table .regiment {
	width: 13em;
	font-weight: bold;
}

tr.battleCasualties, tr.battleSurvivors {
	font-style: italic;
	font-size: .9em;
}

#battleBody div.battlePhases,
#battleBottom div.battleTypes {
	position: fixed;
	background-color: #ffffff30;
}

#battleBody div.battlePhases > button,
#battleBottom div.battleTypes > button {
	width: 3.2em;
	display: block;
	margin: .2em 0;
}

div#regimentSelectorBody {
	max-height: 50vh;
	font-size: .9em;
}

div#regimentSelectorBody > div {
	padding: .1em;
	border: 1px solid #fff;
}

div#regimentSelectorBody > div:hover {
	border: 1px solid #ccc;
}

div#regimentSelectorBody > div.selected {
	border: 1px solid #b28585;
}

div#regimentSelectorBody > div.inactive {
	background-color: #eee;
	color: #aaa;
}

div#regimentSelectorBody > div > div {
	display: inline-block;
	pointer-events: none;
}

.drag-trigger {
	border-left: 1em solid transparent;
	border-right: 1em solid #000;
	border-top: 1em solid transparent;
	position: absolute;
	right: -1px;
	bottom: -1px;
	opacity: .3;
}

.drag-trigger:hover {
	cursor: move;
	opacity: .6;
}

.tint {
	filter: sepia(1) hue-rotate(200deg);
}

.color-div {
	width: 3em;
	height: 1em;
	display: inline-block;
	margin: 0 .16em;
	border: 1px #c5c5c5 groove;
	cursor: pointer;
}

#colorsSelect div {
	height: 1.7em;
	display: inline-block;
	cursor: pointer;
}

.color-div:hover {
	border-color: red;
}

.hoveredColor {
	box-shadow: 0 0 1px 1px #717171;
}

.selectedColor {
	outline: 2px solid #f87b66;
}

#colorScheme {
	margin: 6px 1px 4px 1px;
}

#debug path.selected {
	stroke-width: .8;
	stroke: #da3126;
	fill: none;
}

.selectedCell {
	stroke-width: 1;
	stroke: #da3126;
}

i.resetButton {
	float: left;
	padding-right: .4em;
	font-size: .8em;
	margin-top: .25em;
	color: #ffffff;
	cursor: pointer;
}

i.resetButton:active {
	color: #5d4651;
}

.ui-dialog button.pressed {
	box-shadow: inset 1px 1px 0 0 #ccc;
	border-color: #a6a6da;
	background-color: #ecd8d8;
	border-radius: 10%;
}

.ui-dialog input[type="range"] {
	padding: 0;
	height: 2px;
	background: #d4d4d4;
	top: -.35em;
	position: relative;
	appearance: none;
	-webkit-appearance: none;
}

.ui-dialog input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	border-radius: 15%;
  width: 1em;
  height: 1em;
	background: #e9e9e9;
	border: 1px solid #9b9b9b;
	cursor: pointer;
}

.ui-dialog input[type="range"]::-moz-range-thumb {
	appearance: none;
	border-radius: 15%;
  width: 1em;
  height: 1em;
	background: #e9e9e9;
	border: 1px solid #9b9b9b;
	cursor: pointer;
}

.ui-dialog input[type="number"] {
	width: 3.5em;
}

.ui-dialog .disabled {
	opacity: 0.2;
}

.ui-dialog .disabled::slider-thumb {
	opacity: 0.2;
}

.ui-dialog .disabled::-moz-range-thumb {
	opacity: 0.2;
}

.ui-dialog:disabled {
	cursor: default;
}

div.slider {
	width: 40em;
	margin-top: 0.2em;
}

div.slider .ui-slider-handle {
	width: 3em;
	height: 1.6em;
	top: 50%;
	margin-top: -.8em;
	text-align: center;
	line-height: 1.6em;
}

#saveDropdown {
	display: none;
	position: absolute;
	left: 29%;
	top: 100%;
	border: 1px solid #5e4fa2;
	background-color: #a4879b;
	width: 5em;
}

#loadDropdown {
	display: none;
	position: absolute;
	left: 53%;
	top: 100%;
	border: 1px solid #5e4fa2;
	background-color: #a4879b;
	width: 9em;
}

#loadDropdown>div,
#saveDropdown>div {
	padding: 2px 4px;
	cursor: pointer;
}

#loadDropdown>div:hover,
#saveDropdown>div:hover {
	color: white;
}

#brushPower,
#brushRadius {
	width: 12em;
}

#rescaleHigher,
#rescaleLower,
#rescaleModifier {
	width: 3.7em;
}

.italic {
	font-style: italic;
}

.hidden {
	display: none !important;
}

.burgs-table {
	max-height: 75vh;
	overflow-x: hidden;
	overflow-y: scroll;
}

.table {
	max-height: 75vh;
	max-width: 75vw;
	overflow-x: hidden;
	overflow-y: auto;
}

.overflow {
	max-width: 93vw;
	overflow: auto;
	max-height: 75vh;
}

.overflow > div {
	width: max-content;
}

div.header > div {
	font-weight: bold;
	font-size: .9em;
	display: inline-block;
	position: sticky;
	white-space: nowrap;
	overflow-x: hidden;
	vertical-align: bottom;
}

.sortable {
	cursor: pointer;
}

.totalLine {
	color: #666666;
	font-style: italic;
	font-size: .9em;
	margin-bottom: 3px;
}

.totalLine>div {
	display: inline-block;
}

div.states {
	border: 1px solid #d4d4d4;
	background-image: linear-gradient(to right, #fafafa80 0%, #f0f0f080 50%, #c8c8c880 100%);
	margin: .1em 0;
	padding: 0 .2em;
	font-size: .9em;
	line-height: 1.5em;
}

div.states:hover, div.states.hovered {
	border: 1px solid #c4c4c4;
	background-image: linear-gradient(to right, #dedede 100%, #f2f2f2 50%, #fcfcfc 0%);
}

div.states > *,
div.states sup,
div.totalLine > div {
	display: inline-block;
}

div.states>input {
	width: 6em;
	background: none;
	border: 0;
}

div.states div {
	width: 3.2em;
}

div.states .statePower, div.states .biomeHabitability {
	width: 4em;
	-moz-appearance: textfield;
}

div.states .stateBurgs {
	width: 2.4em;
}

div.states>.stateArea {
	width: 5em;
}

div.states>.statePopulation {
	width: 3em;
}

div.states .icon-pencil,
div.states .icon-trash-empty,
div.states .icon-eye,
div.states .icon-pin,
div.states .icon-flag-empty {
	cursor: pointer;
}

div.states .icon-resize-vertical {
	cursor: row-resize;
	font-size: .9em;
}

div.states>[class^="icon-"] {
	color: #6e5e66;
	padding: 0;
}

div.states > .icon-arrows-cw {
	color: #67575c;
	font-size: .9em;
	cursor: pointer;
}

div.states>.before {
	color: #6e5e66;
	padding: 0 1px 0 0;
}

div.states>.small {
	font-size: .9em;
}

div.states>.cultureName {
	width: 7em;
}

div.states>.culturePopulation {
	width: 4em;
	cursor: pointer;
}

div.states > select {
	width: 4.6em;
	cursor: pointer;
	border: 0;
	background-color: transparent;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

div.states > .cultureBase,
div.states > .burgName,
div.states > .burgState,
div.states > .burgCulture {
	width: 6em;
}

div.states .burgPopulation {
	width: 4.8em;
}

div.states .burgType {
	width: 3em;
}

div.states .burgType > span {
	padding: 0 1px;
	color: #6e5e66;
	transition: 0.2s;
}

div.states span.inactive {
	color: #c6c2c2;
}

div.states span.inactive:hover {
	color: #abaaaa;
}

div.states > .riverName {
	width: 7em;
}

div.states > .riverType {
	width: 5em;
}

div.states > .coaIcon {
	stroke-width: 3;
	width: 1.4em;
	height: 1.4em;
	margin: -.3em 0;
	cursor: pointer;
}

div.states > .coaIcon > use {
	pointer-events: none;
}

#diplomacyBodySection > div {
	cursor: pointer;
}

#diplomacySelect {
	width: 5em;
	margin: .1em 0 0 -.3em;
	position: fixed;
	background-color: #ffffff;
	border: 1px solid #1891ff;
}

#diplomacySelect > div {
	width: 100%;
	padding-left: .3em;
}

#diplomacySelect > div:hover {
	background-color: #1891ff;
	color: #ffffff;
	width: calc(100% - .3em);
}

#burgsFooterPopulation {
	border: 0;
	width: 50px;
	color: #666666;
	font-style: italic;
	line-height: 1.4em;
}

#burgBody div.label {
	display: inline-block;
  width: 6em;
}

#burgBody > div > div,
#riverBody > div,
#lakeBody > div {
	padding: .1em;
}

#riverBody div.label,
#riverBody input,
#riverBody select,
#lakeBody div.label,
#lakeBody input,
#lakeBody select {
	display: inline-block;
  width: 7em;
}

#stateNameEditor div.label,
#provinceNameEditor div.label,
#regimentBody div.label {
	display: inline-block;
  width: 5.5em;
}

#regimentBody div {
	margin: .1em 0;
}

#regimentBody input[type="number"] {
	width: 5em;
}

.burgFeature {
  padding: 1px;
	cursor: pointer;
}

.burgFeature.inactive {
	color: #ddd;
}

.burgFeature.inactive:hover {
  color: #abaaaa;
}

div.states>.religionName {
	width: 11em;
}

div.states>.religionType {
	width: 5em;
	cursor: pointer;
	border: 0;
	background-color: transparent;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

div.states>.religionForm {
	width: 6em;
}

div.states>.religionDeity {
	width: 15em;
}

.placeholder {
	opacity: 0;
	cursor: default;
	pointer-events: none;
}

div.states.selected {
	border-color: #b28585;
	background-image: linear-gradient(to right, #f2f2f2 0%, #ebe7e7 50%, #E5DADB 100%);
}

div.states.active {
  border: 1px solid #c4c4c4;
  background-image: linear-gradient(to right, #dedede 100%, #f2f2f2 50%, #fcfcfc 0%);
}

div.states.Self {
	margin-bottom: .2em;
	cursor: default !important;
	padding: .2em 0 0 .5em;
	font-weight: bold;
}

div.states button.selectCapital {
	margin: -1px 21px 0 7px;
	padding: 0px 3px;
}

div.states > input.biomeName {
	width: 12em;
}

div.states > div.biomeArea {
	width: 5em;
}

rect.fillRect {
	stroke: #666666;
	stroke-width: 2;
}

#militaryHeader > div,
#regimentsHeader > div {
	width: 5.2em;
}

#militaryBody div.states > input {
	-moz-appearance: textfield;
}

#militaryBody div.states > input,
#militaryBody div.states > div,
#regimentsBody div.states > div {
	width: 5em;
}

#emblemBody > div {
	padding: 1px 3px;
	transition: all .3s ease-out;
}

#emblemBody > div.active {
	background-color: #54ca7728;
}

#emblemArmiger {
	text-align: center;
	display: block;
}

#emblemBody .label {
	width: 6em;
	display: inline-block;
}

#emblemBody select {
	width: 9em;
}

#emblemsBottom {
	margin-top: 4px;
	text-align: center;
}

#emblemUploadControl,
#emblemDownloadControl {
	margin-top: .3em;
	text-align: center;
}

#emblemDownloadControl > input {
	width: 4.1em;
}

#picker text {
	cursor: default;
}

#pickerHeader {
	fill: #916e7f;
	stroke: #5d4651;
	cursor: move;
}

#pickerLabel {
	fill: #f8ffff;
	font-size: 12px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	cursor: move !important;
}

#pickerCloseRect {
	cursor: pointer;
	fill: #916e7f;
	stroke: #f8ffff;
}

#pickerCloseText {
	fill: #f8ffff;
	font-size: 10px;
	font-family: Arial, Helvetica, sans-serif;
	pointer-events: none;
}

#pickerControls line {
	stroke: #999999;
	stroke-width: 2;
}

#pickerControls circle {
	fill: #ffeb3b;
	stroke: #666666;
	cursor: ew-resize;
}

#pickerControls circle:hover {
	fill: #eca116;
	stroke: #000000;
}

#pickerControls,
#pickerSpaces {
	font-size: 11px;
}

#pickerSpaces input {
	width: 22px;
	font-size: 9px;
	-moz-appearance: textfield;
}

#pickerSpaces input::-webkit-inner-spin-button,
#pickerSpaces input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

#pickerColors rect, #pickerHatches rect {
	cursor: pointer;
}

#picker rect.selected {
	outline: 2px dashed #b90c0c;
	stroke-width: 0;
}

.hoverButton {
	position: sticky;
	margin-left: -1.8em;
	margin-top: 1px;
	background-color: #dedede;
	font-size: 8px;
	cursor: pointer;
	padding: 0px 3px !important;
}

#unitsBody>div>* {
	display: inline-block;
	margin-bottom: .2em;
}

.unitsHeader {
	margin: .8em 0 0 -1.1em;
	font-weight: bold;
	font-style: italic;
}

#unitsBottom, #reliefBottom {
	margin: 6px 0 0 6px;
}

#unitsBody>div>div {
	width: 9em;
}

#unitsBody>div>input[type="range"] {
	width: 7em;
}

#unitsBody>div>input[type="text"] {
	width: 11.2em;
}

#unitsBody>div>select {
	width: 11.32em;
}

#unitsBody>div>input[type="number"] {
	width: 3.4em;
}

#unitsBody>div>input,
#unitsBody>div>select {
	border: 1px solid #e9e9e9;
}

#unitsEditor i.icon-lock-open,
#unitsEditor i.icon-lock {
	color: #626573;
	font-size: .8em;
	cursor: pointer;
	position: fixed;
	margin: .4em 0 0 -.9em;
}

#barBackColor {
	width: 3.5em;
	padding: 0px;
	height: 1.2em;
}

#ruler {
	cursor: move;
	fill: none;
}

#ruler circle {
	stroke: #4e5a69;
	fill: yellow;
	cursor: grab;
}

#ruler rect {
	stroke: #3d3d3d;
	fill: yellow;
	cursor: col-resize;
}

#ruler .white {
	stroke: white;
}

#ruler .gray {
	stroke: #3d3d3d;
}

#ruler text {
	font-family: 'Times New Roman';
	fill: #3d3d3d;
	stroke: none;
	text-anchor: middle;
	text-shadow: 0 0 4px white;
	cursor: pointer;
}

#ruler .planimeter {
	fill: lightblue;
	fill-rule: evenodd;
	fill-opacity: 0.5;
	stroke: #737373;
}

#scaleBar {
	stroke: none;
	fill: none;
	cursor: pointer;
}

#scaleBar text {
	fill: #353540;
	text-anchor: middle;
	font-family: Georgia;
}

#militaryOptionsTable select {
	border: 1px solid #d4d4d4;
}

#militaryOptionsTable input {
	width: 9em;
	border: 1px solid #d4d4d4;
}

#militaryOptionsTable input[type="number"] {
	width: 4em;
}

#militaryOptionsTable button {
	width: 100%;
}

#gridOverlay {
	fill: none;
}

#coordinateLabels {
	fill: #333333;
	font-family: monospace;
	text-shadow: 0 0 4px white;
	stroke-width: 0;
	dominant-baseline: central;
	text-anchor: middle;
}

ul.share-buttons {
	margin: 4px 0 0 0;
	padding-left: 8%;
}

ul.share-buttons li {
	padding: 0;
	background: none !important;
	width: 16%;
	margin: 0;
}

ul.share-buttons img {
	width: 2em;
}

input[type="checkbox"] {
	display: none;
}

.checkbox,
.checkbox-label {
	cursor: pointer;
}

.checkbox+.checkbox-label:before {
	content: '';
	display: inline-block;
	vertical-align: text-top;
  width: .6em;
  height: .6em;
  padding: .2em;
  margin-right: .2em;
	border: 1px solid darkgrey;
	border-radius: 15%;
	background: white;
}

.checkbox:checked+.checkbox-label:before {
	line-height: .8em;
	font-weight: bold;
	content: '✓';
	color: #333333;
}

div.textual select,
div.textual textarea {
	font-family: Copperplate, monospace;
}

div.textual input {
	font-family: Copperplate, monospace;
}

div.textual fieldset {
	margin: 3px 3px 5px 0;
	border-style: dashed;
}

div.textual span, .textual legend {
	font-size: .8em;
	font-weight: bold;
}

#namesbaseExamples {
	font-family: Copperplate, monospace;
	cursor: pointer;
}

#markers {
	cursor: pointer;
	font-family: monospace;
	-moz-user-select: none;
	user-select: none;
	text-anchor: middle;
}

#markerEditor > button {
	vertical-align: top;
}

.highlighted {
	outline-width: 2px;
	outline-style: dashed;
	outline-color: #0da6ff;
	outline-offset: 100px;
	fill: none;
}

div#notes {
	display: none;
	position: fixed;
	width: 28vw;
	right: 1vw;
	top: 1vw;
	font-size: 1.2em;
	border: 1px solid #5e4fa2;
	background: rgba(255, 250, 228, 0.7);
	box-shadow: 2px 2px 5px -3px #3a2804;
	white-space: pre-line;
}

div#notesHeader {
	font-weight: bold;
	font-size: 1.3em;
	padding: 0 0 4px 14px;
	border-bottom: 1px solid #5e4fa2;
}

div#notesBody {
	padding: 0 1em;
	max-height: 80vh;
	overflow: auto;
}

svg.button {
	position: relative;
	background-color: transparent;
	margin: -5px;
	padding: 0;
}

#reliefEditor > div > div {
	font-style: italic;
	display: inline-block;
}

#reliefEditor div.reliefEditorLabel {
	width: 4em;
}

#reliefEditor input[type="range"] {
	width: 16em;
}

#reliefEditor input[type="number"] {
	width: 3em;
}

#reliefIconsDiv {
	margin-top: 2px;
	padding: 2px;
}

#reliefIconsDiv svg {
	width: 40px;
	height: 40px;
	background-color: #e7e6e4;
	border: 1px solid #a9a9a9;
	cursor: pointer;
}

#reliefIconsDiv svg:hover {
	border-color: #5c5c5c;
	background-color: #eef6fb;
	transition: all .3s ease-out 3s;
	transform: scale(2);
}

#reliefIconsDiv svg.pressed {
	border: 1px solid #b3352c;
	background-color: #f2f2f2;
}

#reliefIconsSeletionAny {
	display: none;
	text-anchor: middle;
	dominant-baseline: central;
}

#alertMessage {
	-moz-user-select: text;
	user-select: text;
	max-height: 70vh;
	max-width: 75vw;
	overflow: auto;
}

#alertMessage ul {
	padding-left: 1.2em;
	margin: 1em 0;
}

.pseudoLink {
	cursor: pointer;
  text-decoration: underline;
}

#info-line {
	font-size: .9em;
	color: gray;
	user-select: none;
}

.optionsSeedRestore {
	font-size: 12px;
	cursor: pointer;
	margin-right: 2px;
}

.optionsSeedRestore:hover {
	color: blue;
}

#worldControls {
	width: 16em;
	display: inline-block;
	vertical-align: top;
}

#worldControls > div {
	display: block;
	margin: 1px 0;
	padding: 2px 0;
}

#worldControls input[type="number"] {
	border: 1px solid #e5e5e5;
	padding: 0px;
	width: 3.2em;
}

#worldControls i.icon-lock-open,
#worldControls i.icon-lock {
	color: #626573;
	font-size: .8em;
	cursor: pointer;
}

#globe {
	stroke: black;
	stroke-width: 1;
}

#globeNoteLines {
	stroke-dasharray: 5;
	stroke: #bbb;
}

#globaAxisLabels {
		font-style: italic;
		font-size: 9px;
		font-family: monospace;
		stroke: none;
		fill: #001754;
}

#globeLatLabels {
	font-size: 12px;
	font-family: monospace;
	stroke: none;
	fill: #001754;
}

#globeWindArrows {
	fill: none;
	stroke: #6072a3;
	cursor: pointer;
}

#globeWindArrows path {
	stroke-width: 1.7px;
	fill: none;
	stroke: #6072a3;
	pointer-events: none;
}

#globeWindArrows circle {
	fill: #fff;
	fill-opacity: 0;
	stroke-opacity: .05;
}

#globaAxisLabels #restoreWind:hover {
	cursor: pointer;
	fill: blue;
}

#globeOutline {
	fill: url(#temperatureGradient);
}

#globeArea {
	fill: white;
	fill-opacity: .3;
}

#globeGraticule {
	fill: none;
	stroke-width: .2;
}

#globeEquator {
	stroke: red;
	stroke-width: 1.4;
}

#legend {
	cursor: move;
	-moz-user-select: none;
	user-select: none;
}

.dontAsk {
	display: inline-block;
	margin: .9em 0 0 .6em;
}

#errorBox {
	font-size: .9em;
	font-family: Consolas, monospace;
	color: #920303;
	background-color: #dabdbd91;
	padding: 2px;
	border: 1px solid #916e7f;
}

.announcement {
	background-color: #a18888;
	color: white;
	padding: .4em .5em;
	border: dashed 1px #5d4651;
}

.speaker {
	font-size: .9em;
	cursor: pointer;
}

#prompt {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	max-width: 22em;
	background-color: #fff;
	padding: 1.2em;
	border: solid 1px #000;
	font-size: 1.2em;
	z-index: 1000;
}

#promptText {
	padding: 0 0 .6em 0;
	font-weight: bold;
	font-family: sans-serif;
}

#mapOverlay {
	position: absolute;
	display: flex;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	align-items: center;
	justify-content: center;
	z-index: 10;
	pointer-events: none;
	text-align: center;
	background: rgba(0, 0, 0, .5);
	font-size: 2.4em;
	color: #fff5da;
	text-shadow: 0px 1px 4px #4c3a35;
}

.epgrid line {
  stroke: lightgrey;
  stroke-opacity: .7;
  shape-rendering: crispEdges;
}

.epgrid path {
  stroke-width: 0;
}

.pell {
	border: 1px solid hsla(0,0%,4%,.1)
}

.pell,.pell-content {
	box-sizing: border-box
}

.pell-content {
	height: 14em;
	outline: 0;
	overflow-y: auto;
	padding: .6em;
	font-family: Copperplate, monospace;
	background-color: #fff;
	border: 1px solid #dedede;
}

.pell-actionbar {
	background-color: #fff;
	border: 1px solid #dedede;
	border-bottom: 0;
}

.pell-button {
	background-color: transparent;
	border: none;
	cursor: pointer;
	height: 30px;
	outline: 0;
	width: 30px;
	vertical-align: bottom
}

.pell-button-selected {
	background-color: #f0f0f0
}

#debug {
	font-size: 1px;
	opacity: .8;
}

@media print {
	div, canvas {display: none;}
}

@media only screen and (max-width: 420px) {
	#collapsible, #options {
		margin: 0;
		border: 0;
	}
	
	#options {
		height: 100vh;
		width: 100vw;
	}

	table {
		width: 100%;
	}
	
	.tabcontent {
		max-width: 100%;
	}

	.drag-trigger {
		display: none;
	}
}
