/* ############## Root CSS Variables ############## */
:root {
		--big-font: 16px;
		--normal-font: 14px;
		--small-font: 12px;
}
@media screen and (min-width:800px){
	:root {
		--big-font: calc(1rem + ((1vw - 8px) * 2));
		--normal-font: calc(0.875rem + ((1vw - 8px) * 1.75));
		--small-font: calc(0.75rem + ((1vw - 8px) * 1.5));
	}
}
@media screen and (min-width:1200px){
	:root {
		--big-font: 24px;
		--normal-font: 21px;
		--small-font: 18px;
	}
}
/*::-webkit-scrollbar { 
    display: none; 
}*/
* {
	margin: 0;
	padding: 0;
	user-select: none;
	box-sizing: border-box;
}
/* ############## Column One Styles ############## */
[id|="restitle"] {
	background: #E0E0E0;
	font-size: var(--normal-font);
	text-align: center;
	font-weight: bold;
	border-radius: .1em;
	box-shadow: 1px 1px 1px;
	border: 1px solid;
	margin-top: .1em;
}
[id|="restitle"]:first-child {
	margin-top: 0;
}
#col1-res-cont {
	background: #3E2723;
	border-radius: .5em 0 0 .5em;
	border: 1px solid;
	height: 100%;
	padding: .15em;
	overflow-y: auto;
}
[id|="statis"] {
	width: 100%;
	background: white;
	border: 1px solid;
	border-radius: 0 0 .5em .5em;
	padding: .3em;
	box-shadow: 1px 1px 1px;
}
[id|="statisrow"] {
	width: 100%;
	height: 1.6em;
	padding-top: .2em;
	border-bottom: 1px solid;
	border-image: linear-gradient(to right, white, black, white);
	border-image-slice: 1;
	font-size: calc(var(--small-font)*.9);
}
[id|="statisrow"] span {
	height: 100%;
	display: block;
	float: left;
}
[id|="statisname"] {
	width: 40%;
}
[id|="statistotal"] {
	width: 45%;
	padding-right: .5em;
	text-align: right;
}
[id|="statisincome"] {
	width: 15%;
	text-align: left;
	font-size: calc(var(--small-font)*0.9);
}
.income-pos {
	color: #1B5E20;
}
.income-neg {
	color: #b71c1c;
}
/* ############## Column Two Styles ############## */
#manualbutton-row {
	width: 100%;
	text-align: center;
	clear:both;
}
#manualbutton-row button {
	display: inline-block;
	border: 1px outset;
	border-color: #EFEBE9;
	border-radius: .2em;
	margin: .4em .2em .4em .2em;
	padding: .2em;
	background: #D7CCC8;
	box-shadow: 1px 1px 4px;
	cursor: pointer;
	font-size: var(--small-font);
}
#manualbutton-row button:hover {
	background: #EFEBE9;
}
#manualbutton-row button:active {
	position: relative;
	top: 1px;
	left: 1px;
}
#col2-progress {
	width: 90%;
	height: .5em;
	background: #E0E0E0;
	box-shadow: 1px 1px 1px;
	border-radius: .2em;
	margin: 0 auto;
}
#col2-progress-bar {
	width: 0%;
	height: 100%;
	background: #9FA8DA;
	background: linear-gradient(#C5CAE9, #7986CB, #C5CAE9);
	border-radius: .2em;
}
#col2-menu {
	height: 2em;
	background: #E0E0E0;
	width: 100%;
	border-bottom: 2px;
	box-shadow: 1px 1px 1px;
	font-size: var(--small-font);
}
.menu-icon {
	float: right;
}
.menu-icon, .menutab-icon {
	display: inline-block;
	margin: 0 .25em;
}
.menu-icon:hover, .menutab-icon:hover {
	background: #BDBDBD;
	border-radius: .2em;
	cursor: pointer;
}
#res-warning {
	margin: .5em;
	padding: 0 .2em;
	background: #ffcdd2;
	border-left: .2em solid;
	border-color: #d32f2f;
	font-size: calc(var(--normal-font)*.8);
	text-align: center;
}
#res-warning hr {
	border-width: .05em;
	border-color: #f44336;
	width: 90%;
	margin: .2em auto;
}
#col2-kingdomstats {
	margin: .2em .2em;
	font-size: var(--small-font);
}
#col2-kingdomclass, #col2-kingdompop, #col2-kingdomland {
	font-weight: bold;
}
/* ############## Column Two Page Styles ############## */
#col2-home, #col2-upgrade, #col2-market{
	overflow-y: scroll;
	display: none;
	height: 100%;
	width: 100%;
}
/* ############## Column Three Detail Styles ############## */
[id|="build-info"] {
	display: none;
	font-size: calc(var(--small-font)*.9);
	border: 1px solid;
	box-shadow: 1px 1px 1px;
	border-radius: .5em;
	padding: .2em;
	background: radial-gradient(ellipse at center, #FAFAFA 0%, #FAFAFA 61%, #E0E0E0 100%);
	margin: .2em;
	transition: all .1s ease-in;
	max-height: 11em;
}
[id|="build-button"] {
	display: inline-block;
	border-radius: .2em;
	text-align: center;
	border: 1px outset;
	border-color: #C5E1A5;
	padding: .2em;
	margin: .05em;
	width: 28%;
	box-shadow: 1px 1px 1px;
	background: #AED581;
	cursor: pointer;
}
[id|="build-button"]:hover {
	background: #C5E1A5;
}
[id|="build-button"]:active {
	position: relative;
	top: 1px;
	left: 1px;
}
.hide-build-cost, .hide-build-desc {
	margin: 0;
	padding: 0;
	overflow: hidden;
	max-height: 8em;
	transition: all 0.1s ease-in;
	font-size: calc(var(--small-font)*.9);
}
[id|="build-cost"] {
	font-size: calc(var(--small-font)*.9);
}
[id|="build-info"]:hover {
	max-height: 11em;
}
[id|="build-info"]:hover .hide-build-cost{
	max-height: 8em;
}
[id|="build-info"]:hover .hide-build-desc{
	max-height: 8em;
}
.overprice, .overprice:hover, .overprice:active {
	background: #9E9E9E;
	position: relative;
	top: 0;
	left: 0;
	border-color: #E0E0E0;
	cursor: not-allowed;
}
.build-name {
	font-size: var(--small-font);
	font-weight: bold;
	display: inline-block;
	width: 65%;
}
.build-desc {
	display: inline-block;
	width: 71%;
	vertical-align: top;
}
.build-desc hr {
	border-image: linear-gradient(to right, #ffffff, #c7c7c7, #ffffff);
	border-image-slice: 1;
	margin: .25em 0;
}
.build-produce, .build-upkeep {
	display: inline-block;
	border-radius: .5em;
	padding: .1em .3em;
	box-shadow: 1px 1px 1px;
	margin: 0 .2em;
	font-size: calc(var(--small-font)*.8);
}
.build-produce {
	background: #C8E6C9;
}
.build-upkeep {
	background: #ffcdd2;
}
[id|="build-owned"] {
	font-size: var(--small-font);
	text-align: right;
	display: inline-block;
	width: 20%;
}
/* ############## Column Three Styles ############## */
#col3-tab-row {
	height: 1.5em;
	font-size: var(--normal-font);
}
[id|="tab"] {
	display: block;
	float: left;
	width: 33.3%;
	height: 100%;
	font-size: var(--normal-font);
	font-weight: bold;
	border: 1px solid;
	border-radius: .5em .5em 0 0;
	text-align: center;
	padding: .15em;
	cursor: pointer;
	transition: all 0.2s;
}
#tab-eco.active, #tab-ind.active, #tab-mil.active {
	border-bottom: 0;
}
.tab-word {
	background: white;
	border: 1px solid;
	border-radius: .3em;
	padding: 0 .8em;
	box-shadow: 1px 1px 1px;
}
#tab-eco, #tab-ind, #tab-mil {
	background: #757575;
}
#tab-eco.active, #tab-eco.active:hover, #page-eco, #tab-eco:hover {
	background: #388E3C;
}
#tab-ind.active, #tab-ind.active:hover, #page-ind, #tab-ind:hover {
	background: #FBC02D;
}
#tab-mil.active, #tab-mil.active:hover, #page-mil, #tab-mil:hover {
	background: #1976D2;
}
[id|="page"] {
	font-size: var(--normal-font);
	clear: both;
	display: none;
	width: 100%;
	height: calc(95vh - 1.9em);
	overflow-y: auto;
	border: 1px solid;
	border-top: 0px;
	border-radius: 0 0 0 .5em;
	box-shadow: 1px 1px 1px;
}
[id|="page"].active {
	display: block;
}
[id|="col3-subname"] {
	display: none;
	font-size: var(--normal-font);
	background: #E0E0E0;
	text-align: center;
	font-weight: bold;
	border-radius: .1em;
	box-shadow: 1px 1px 1px;
	border: 1px solid;
	margin: .1em .1em 0 .1em;
	padding: 0 1em;
	cursor: pointer;
}
[id|="sub-cont"] {
	border: 1px solid;
	border-top: 0;
	margin: -.1em .1em 0 .1em;
	width: calc(100% - .1em);
	border-radius: 0 0 .1em .1em;
	box-shadow: 1px 1px 1px;
	padding-top: .1em;
	max-height: 0;
	transition: all 1.5s cubic-bezier(0, 1, 0, 1);
	overflow: hidden;
}
[id|="sub-toggle"] {
	float: right;
	display: block;
	font-size: var(--big-font);
	height: 1em;
	width: 1em;
}
/* ############## Setting Menu Styles ############## */
#setting-menu-bg {
	display: none;
	background: #787878;
	background: rgba(120,120,120,0.5);
	position: absolute;
	top: 0;
	height: 100%;
	width: 100%;
	z-index: 99;
}
#setting-menu-anchor {
	height: 100%;
	width: 100%;
	display: none;
	z-index: 100;
	position: absolute;
	top: 0;
	pointer-events: none;
	overflow: visible;
}
#setting-menu-cont {
	font-size: var(--normal-font);
	position: relative;
	margin: 1em auto;
	background: white;
	z-index: 101;
	height: 20em;
	width: 20em;
	border: .1em outset;
	border-radius: 1em;
	box-shadow: 2px 2px 8px;
	overflow: auto;
	pointer-events: auto;
	overflow: visible;
	padding: .5em;
}
#setting-close {
	position: absolute;
	top: -.5em;
	right: -.5em;
	border-radius: 100%;
	border: .1em outset;
	background: white;
	cursor: pointer;
	padding: 0;
	box-shadow: 1px 1px 1px;
	height: 1.8em;
	width: 1.8em;
	padding-left: .05em;
}
#setting-close:hover {
	background: #BDBDBD;
}
[id|="setting-icon"] {
	cursor: pointer;
	display: inline-block;
	height: 2.2em;
	width: 3em;
	text-align: center;
	transition: all .2s;
	border-radius: .2em;
}
[id|="setting-icon"]:hover {
	border-bottom: .1em solid;
	border-color: #F57F17;
}
[id|="setting-icon"].current {
	border-bottom: .2em solid;
	border-radius: 0;
	border-color: #1B5E20;
}
#settingpage-0, #settingpage-1, #settingpage-2 {
	height: calc(100% - 4em);
}
#settingpage-1 input, #settingpage-2 input {
	border-radius: .5em;
	padding: .25em;
}
#setting-save-field, #setting-load-field {
	width: 100%;
	min-width: 100%;
	max-width: 100%;
	height: 18em;
	min-height: 18em;
	max-height: 18em;
	padding: .2em;
	font-size: calc(var(--small-font)*.8);
}
#setting-save-field {
	background: #EEEEEE;
	user-select: all;
}
.setting-title {
	display: block;
	font-size: var(--normal-font);
	border-bottom: .1em solid;
	border-color: #4DB6AC;
}
/* ############## Tooltip Styling ############## */
.tooltip {
	position: relative;
	padding: 0;
	margin: 0;
	width: 100%;
	height: auto;
}
.tooltip .tooltiptext {
	opacity: 0;
	visibility: hidden;
	width: 80%;
	background-color: white;
	color: black;
	text-align: center;
	margin: 0;
	padding: .2em;
	border: .1em outset;
	border-radius: .2em;
	position: absolute;
	z-index: 2;
	font-size: calc(var(--small-font)*0.8);
	transition: all .3s;
	box-shadow: 1px 1px 8px;
}
.tooltiptext {
	bottom: .5em;
	right: 0;
	pointer-events: none;
}
.tooltip:hover .tooltiptext {
	opacity: 1;
	visibility: visible;
}
/* ############## Fundamentals ############## */
#gameBox {
	display: block;
	width: 100%;
	min-width: 800px;
	max-width: 1200px;
	height: 95vh;
	border: 1px solid;
	border-radius: 0 0 .5em .5em;
	border-color: black;
	background: white;
	box-shadow: 1px 1px 1px;
	margin: 0 auto;
	padding: 0;
}
#webFoot {
	padding-top: 5px;
	text-align: center;
	font-size: var(--small-font);
	min-width: 775px;
}
#col1, #col2, #col3 {
	display: block;
	float:left;
	height: 100%;
	margin: 0;
	padding: .2em;
}
#col1 {
	width: 30%;
	background: #424242;
}
#col2 {
	width: 35%;
	padding: 0;
}
#col3 {
	width: 35%;
	background: #424242;
}
#loadMask {
	display: block;
	height: 100%;
	width: 100%;
	background: white;
	z-index: 2000;
	position: absolute;
	padding-top: 20%;
	text-align: center;
	transition: all 1s;
}