:root {
	--background : white;
	--background-complete : #EEFFEE;
	--background-starfield : #DDEEFF;
	--foreground : black;
	--lightframe : gray;
	--alertframe : red;
	--darkframe : black;
	--shade0  : #000000;
	--shade1  : #111111;
	--shade2  : #222222;
	--shade3  : #333333;
	--shade4  : #444444;
	--shade5  : #555555;
	--shade6  : #666666;
	--shade7  : #777777;
	--shade8  : #888888;
	--shade9  : #999999;
	--shade10 : #AAAAAA;
	--shade11 : #BBBBBB;
	--shade12 : #CCCCCC;
	--shade13 : #DDDDDD;
	--shade14 : #EEEEEE;
	--shade15 : #FFFFFF;
	--bg-none   : #EEEEEE;
	--bg-power  : #FFFF55;
	--bg-spirit : #ADFF2F;
	--bg-blood  : #DC143C;
	--bg-fire   : #FF8C00;
	--bg-ice    : #00FFFF;
	--bg-metal  : #BBBBBB;
	--bg-home   : #7F7F7F;
	--skill-owned : #EEFFEE;
	--skill-owned-text : #001100;
	--button-bg : #FFFFDD;
	--button-text : black;
	--button-active-bg : black;
	--button-active-text : white;
	--button-weak-bg : #FFFFDD;
	--button-weak-text : maroon;
	--button-active-weak-bg : #550000;
	--button-active-weak-text : white;
	--button-inactive-bg : #DDDDDD;
	--button-inactive-text : black;
	--button-hover-bg : #EEEE88;
	--button-hover-text : black;
	--hover-bg : white;
	--hover-text : black;
	--progress-fg : maroon;
	--progress-bg : #BBBBBB;
	--gui-slider-text : black;
	--sort-down-bg: maroon;
	--sort-up-bg: green;
	--sort-active : white;
	--enchantgold : #999955;
	--enchantgrowth : #559999;
	--enchantmana : #995599;
	--enchantdoom : #995555;
	--tablet-unknown : #DDDDDD;
	--tablet-present : #00AF00;
	--tablet-absent : #FFAAAA;
	--artifact-active : #3399FF;
	--cost-more : #7f0000;
	--core-cost-more : #FFDDDD;
}

body.dark {
	--background : #222222;
	--background-complete : #223322;
	--background-starfield : #223344;
	--foreground : #DDDDDD;
	--lightframe : #BBBBBB;
	--darkframe : #DDDDDD;
	--alertframe : #DD5555;
	--shade0  : #DDDDDD;
	--shade1  : #D0D0D0;
	--shade2  : #C4C4C4;
	--shade3  : #B7B7B7;
	--shade4  : #ABABAB;
	--shade5  : #9E9E9E;
	--shade6  : #929292;
	--shade7  : #858585;
	--shade8  : #797979;
	--shade9  : #6C6C6C;
	--shade10 : #606060;
	--shade11 : #535353;
	--shade12 : #474747;
	--shade13 : #3A3A3A;
	--shade14 : #2E2E2E;
	--shade15 : #222222;
	--bg-none   : #444444;
	--bg-power  : #AAAA00;
	--bg-spirit : #00AA00;
	--bg-blood  : #AA0000;
	--bg-fire   : #AA6600;
	--bg-ice    : #0066AA;
	--bg-metal  : #666666;
	--bg-home   : #777777;
	--skill-owned : #224422;
	--skill-owned-text : #DDEEDD;
	--button-bg : #444422;
	--button-text : #DDDDDD;
	--button-active-bg : #DDDDDD;
	--button-active-text : #222222;
	--button-weak-bg : #444422;
	--button-weak-text : #EEDD22;
	--button-active-weak-bg : #DDBBBB;
	--button-active-weak-text : #222222;
	--button-inactive-bg : #222222;
	--button-inactive-text : #DDDDDD;
	--button-hover-bg : #555533;
	--button-hover-text : #DDDDDD;
	--hover-bg : black;
	--hover-text : white;
	--progress-fg : maroon;
	--progress-bg : #BBBBBB;
	--gui-slider-text : white;
	--sort-down-bg: maroon;
	--sort-up-bg: green;
	--sort-active : white;
	--enchantgold : #AAAA66;
	--enchantgrowth : #66AAAA;
	--enchantmana : #AA66AA;
	--enchantdoom : #AA6666;
	--tablet-unknown : #333333;
	--tablet-present : #22FF22;
	--tablet-absent : #AF3333;
	--cost-more : #DD7F7F;
	--core-cost-more : #6F3F3F;
}

/*body.light.light-boss {
	--background : #000033;
	--background-complete : #003300;
}

body.dark.dark-boss {
	--background : #000000;
	--background-complete : #001100;
}*/

@font-face {
    font-family: 'Structure';
    src: url('structure.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: 'Open Sans';
  src: url('open-sans-300.woff') format('woff');
  font-style: normal;
  font-weight: 300;
}

@font-face {
  font-family: 'Open Sans';
  src: url('open-sans-400.woff') format('woff');
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: 'Share Tech Mono';
  src: url('share-tech-400.woff') format('woff');
  font-style: normal;
  font-weight: 400;
}

html, body {
	width : 100%;
	height : 100%;
	overflow : hidden;
	background-color : var(--background);
	color : var(--foreground);
	padding : 0;
	margin : 0;
	font-family : 'Structure', 'Open Sans', 'Arial Unicode MS', 'Segoe UI Symbol', sans-serif;
	font-size : 15px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

body.invert {
	-webkit-filter : invert(0.8) hue-rotate(180deg);
	        filter : invert(0.8) hue-rotate(180deg);
	font-weight : bold;
}

.utility-measure {
	font-size : 10px;
	position : absolute;
	white-space : nowrap;
	left : 0;
	top : 0;
	margin : 0;
	padding : 0;
}

.bg-none   { background-color : var(--bg-none   );}
.bg-power  { background-color : var(--bg-power  );}
.bg-spirit { background-color : var(--bg-spirit );}
.bg-blood  { background-color : var(--bg-blood  );}
.bg-fire   { background-color : var(--bg-fire   );}
.bg-ice    { background-color : var(--bg-ice    );}
.bg-metal  { background-color : var(--bg-metal  );}
.bg-home   { background-color : var(--bg-home   );}

.titles.main {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	height : 30px;
	overflow-y : hidden;
	background-color : var(--shade10);
}

.titles.main .title{
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	background-color : var(--shade12);
	height : 28px;
	padding : 0 20px;
	margin : 0 0 0 0;
	border : 1px solid var(--darkframe);
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
	white-space : nowrap;
	cursor : pointer;
	-webkit-transition : background-color 0.3s;
	-o-transition : background-color 0.3s;
	transition : background-color 0.3s;
}

.titles.main .title:hover{
	background-color : var(--shade14);
}

.titles.main .title.active{
	margin : 1px 0 0 0;
	background-color : var(--shade15);
	border-bottom : none;
	cursor : default;
}

.titles.main .filler {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-flex : 999;
	-webkit-flex-grow : 999;
	    -ms-flex-positive : 999;
	        flex-grow : 999;
	margin : -1px 0 0 0;
	width : 100%;
	height : 30px;
	border-bottom : 1px solid var(--darkframe);
}

.tabs.main > .tab {
	position : absolute;
	width : 100vw;
	top : 30px;
	height : calc(100vh - 30px);
}

.tab.map {
	-webkit-transition : background-color 2s, color 2s;
	-o-transition : background-color 2s, color 2s;
	transition : background-color 2s, color 2s;
}

.tab.map.complete {
	background-color : var(--background-complete);
}

.tab.map.complete.starfield {
	background-color : var(--background-starfield);
}

canvas {
	position : absolute;
	left : 0;
	width : 100%;
	height : 100%;
}

canvas.background : {
	z-index : 1;
}

canvas.foreground : {
	z-index : 2;
}

.dev {
	z-index : 4;
	position : absolute;
	pointer-events : none;
	font-family: 'Share Tech Mono';
}

.ascend {
	z-index : 4;
	position : absolute;
	right : 0;
	bottom : 0;
	background-color : var(--shade0);
	color : var(--shade15);
	padding : 20px;
	width : 150px;
	text-align : center;
	cursor : pointer;
}

.ascend.disabled {
	background-color : var(--shade13);
	color : var(--shade7);
	cursor : default;
}

.target {
	position : absolute;
	z-index : 5;	
	display : -webkit-box;	
	display : -webkit-flex;	
	display : -ms-flexbox;	
	display : flex;
	-webkit-box-orient : vertical;
	-webkit-box-direction : normal;
	-webkit-flex-direction : column;
	    -ms-flex-direction : column;
	        flex-direction : column;
	font-size : 13.3px;
	color : var(--foreground);
}

.target .point-info {
	width : 416px;
}

.target .sliders, .upgrades .buildings {
	margin : 0;
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-flex-wrap : wrap;
	    -ms-flex-wrap : wrap;
	        flex-wrap : wrap;
	-webkit-box-align : start;
	-webkit-align-items : start;
	    -ms-flex-align : start;
	        align-items : start;
	-webkit-align-content : start;
	    -ms-flex-line-pack : start;
	        align-content : start;
	width : 418px;
}

.target .target-hint {
	margin : -1px;
	border : 2px solid var(--darkframe);
	background-color : var(--darkframe);
	color : var(--shade15);
	width : 416px;
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
}

.target .target-all {
	display : inline-block;
	padding : 0 10px;
	margin-left : auto;
	border : 2px solid var(--lightframe);
	cursor : pointer;
	-webkit-transition : background-color 0.2s;
	-o-transition : background-color 0.2s;
	transition : background-color 0.2s;
}

.target .buttons {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;
	max-width : 624px;
	min-width : 416px;
}

.target .spells {
	z-index : 1;
}

.target .spells:before {
	display : -webkit-inline-box;
	display : -webkit-inline-flex;
	display : -ms-inline-flexbox;
	display : inline-flex;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	content : "点击转换:";
	background-color : var(--darkframe);
	color : var(--shade15);
	height : 21px;
	margin : -2px 0 0 0;
	border : 2px solid var(--darkframe);
	width : 206px;
}

.target .target-all:hover {
	background-color : var(--shade2);
}
.target .slider {
	width : 207px;
	height : 40px;
	border : 2px solid var(--darkframe);
	margin : -1px;
	background-color : var(--button-bg);
	color : var(--button-text);
	cursor : pointer;
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	white-space: nowrap;
	overflow : hidden;
	-webkit-transition : color 0.2s, background-color 0.2s, -webkit-transform 0.2s;
	transition : color 0.2s, background-color 0.2s, -webkit-transform 0.2s;
	-o-transition : color 0.2s, background-color 0.2s, transform 0.2s;
	transition : color 0.2s, background-color 0.2s, transform 0.2s;
	transition : color 0.2s, background-color 0.2s, transform 0.2s, -webkit-transform 0.2s;
/*	border-radius : 10px;*/
	z-index : 1;
	-webkit-box-ordinal-group : 2;
	-webkit-order : 1;
	    -ms-flex-order : 1;
	        order : 1
}

.clone {
	-webkit-box-ordinal-group : 4 !important;
	-webkit-order : 3 !important;
	    -ms-flex-order : 3 !important;
	        order : 3 !important;
}

.target .slider:hover {
	background-color : var(--button-hover-bg);
	color : var(--button-hover-text);
	-webkit-transform : scale(1.1);
	    -ms-transform : scale(1.1);
	        transform : scale(1.1);
	z-index : 2;
}

.target .slider.active {
	background-color : var(--button-active-bg);
	color : var(--button-active-text);
/*	transform : scale(1); */
}

.target .slider.active.weak {
	background-color : var(--button-active-weak-bg);
	color : var(--button-active-weak-text);
}

.target .slider .slider-color {
	width : 40px;
	height : 40px;
	background-color : maroon;
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	color : #FFFFFF;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
	font-size : 20px;
}

.target .slider .slider-stat {
	padding : 5px 0;
}

.target .slider .slider-info {
	padding : 0 4px;
}

.target .slider .slider-charge {
	width : 5px;
	background : -webkit-gradient(linear, left top, left bottom, from(green), to(lime)) no-repeat;
	background : -webkit-linear-gradient(top, green, lime) no-repeat;
	background : -o-linear-gradient(top, green, lime) no-repeat;
	background : linear-gradient(to bottom, green, lime) no-repeat;
	background-position : 0 40px;
	margin-left : auto;
}

.target .slider.weak .slider-info {
	color : var(--button-weak-text);
}

.target .slider.active.weak .slider-info {
	color : var(--button-active-weak-text);
}

.icon-button {
	width : 207px;
	height : 40px;
	border : 2px solid var(--darkframe);
	margin : -1px;
	background-color : var(--button-inactive-bg);
	color : var(--button-inactive-text);
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	white-space: nowrap;
	overflow : hidden;
	-webkit-transition : color 0.2s, background-color 0.2s, -webkit-transform 0.2s;
	transition : color 0.2s, background-color 0.2s, -webkit-transform 0.2s;
	-o-transition : color 0.2s, background-color 0.2s, transform 0.2s;
	transition : color 0.2s, background-color 0.2s, transform 0.2s;
	transition : color 0.2s, background-color 0.2s, transform 0.2s, -webkit-transform 0.2s;
	cursor : default;
	/*border-radius : 10px;*/
	-webkit-transform : scale(1);
	    -ms-transform : scale(1);
	        transform : scale(1);
	z-index : 1;
}

.icon-button.available {
	background-color : var(--button-bg);
	color : var(--button-text);
	cursor : pointer;
}

.icon-button.available:hover {
	-webkit-transform : scale(1.1);
	    -ms-transform : scale(1.1);
	        transform : scale(1.1);
	z-index : 3;
}

.icon-button.owned {
	background-color : var(--button-active-bg);
	color : var(--button-active-text);
}

.icon-button .icon, .icon-button .icon-image {
	width : 40px;
	height : 40px;
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	color : #FFFFFF;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
	white-space : nowrap;
	font-size : 35px;
}

.icon-button .text {
	padding : 0 0 0 5px;
}

.hover {
	position : absolute;
	z-index : 5;	
	pointer-events : none;	
}

.hover .icons {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
}

.hover .icon {
	width : 40px;
	height : 40px;
	border : 2px solid var(--darkframe);
	font-size : 35px;
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	color : #FFFFFF;
	white-space : nowrap;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
	margin : -1px;
}

.hover .icon.unbought {
	-webkit-transform : scale(0.8);
	    -ms-transform : scale(0.8);
	        transform : scale(0.8);
	opacity : 0.5;
}

.point-info {
	margin : -1px;
	background-color : var(--hover-bg);
	border : 2px solid var(--darkframe);
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-pack : start;
	-webkit-justify-content : start;
	    -ms-flex-pack : start;
	        justify-content : start;
	-webkit-box-flex : 0;
	-webkit-flex-grow : 0;
	    -ms-flex-positive : 0;
	        flex-grow : 0;
	-webkit-box-align : stretch;
	-webkit-align-items : stretch;
	    -ms-flex-align : stretch;
	        align-items : stretch;
	color : var(--hover-fg);
}

.target .point-info {
	position : static;
}

.point-info .point-type {
	width : 60px;
	height : 60px;
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	font-size : 25px;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
}

.point-info .info {
	margin-left : auto;
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-align : stretch;
	-webkit-align-items : stretch;
	    -ms-flex-align : stretch;
	        align-items : stretch;
	-webkit-align-content : stretch;
	    -ms-flex-line-pack : stretch;
	        align-content : stretch;
	font-size : 13.3px;
	padding : 1px 0 1px 5px;
	width : 126px;
	white-space: nowrap;
	overflow : hidden;
}

.point-info .info.progress {
	background: -webkit-gradient(linear, left top, right bottom, from(var(--hover-bg)), color-stop(75%, var(--hover-bg)), color-stop(75%, transparent), to(transparent)),
				-webkit-gradient(linear, left top, right top, from(var(--progress-fg)), color-stop(100%, var(--progress-fg)), to(transparent)) no-repeat;
	background: -webkit-linear-gradient(top left, var(--hover-bg), var(--hover-bg) 75%, transparent 75%, transparent),
				-webkit-linear-gradient(left, var(--progress-fg), var(--progress-fg) 100%, transparent 100%) no-repeat;
	background: -o-linear-gradient(top left, var(--hover-bg), var(--hover-bg) 75%, transparent 75%, transparent),
				-o-linear-gradient(left, var(--progress-fg), var(--progress-fg) 100%, transparent 100%) no-repeat;
	background: linear-gradient(to bottom right, var(--hover-bg), var(--hover-bg) 75%, transparent 75%, transparent),
				linear-gradient(to right, var(--progress-fg), var(--progress-fg) 100%, transparent 100%) no-repeat;	
	background-color : var(--progress-bg);
	width : 220px;
}

.point-info .point-border {
	pointer-events : none;
	position : relative;
	left : -30px;
	top : 30px;
	width : 60px;
	height : 60px;
	margin : -30px;
}

.slider-target-border {
	pointer-events : none;
	position : relative;
	left : -20px;
	top : 20px;
	width : 60px;
	height : 60px;
	margin : -30px;
}

.management-border {
	position : relative;
	left : -25px;
	width : 60px;
	height : 60px;
	margin : -30px;
}

.world > div.bonus, .map > div.growth, .stardust div.growth {
	position : absolute;
	bottom : 3px;
	left : 3px;
	z-index : 3;
	cursor : default;
}

.growth-title {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
}

.growth-subtitle {
	margin-right : 3px;
}

.map .growth .growth-type, .stardust .growth .growth-type  {
	display : inline-block;
	width : 10px;
	height : 10px;
	text-align : center;
	line-height : 10px;
	font-size : 9.5px;
	border : 1px solid var(--darkframe);
}

.map .growth .growth-value, .stardust .growth .growth-value {
	display : inline-block;
	padding : 0 0 0 3px;
	width : 0;
	overflow : visible;
	pointer-events : none;
	white-space: nowrap;
	text-shadow:
		-1px -1px 0 var(--background),
		1px -1px 0 var(--background),
		-1px 1px 0 var(--background),
		1px 1px 0 var(--background);
}

.map.complete .growth .growth-value, .map.complete .harvest .harvest-line, .map.complete .resources{
	text-shadow:
		-1px -1px 0 var(--background-complete),
		1px -1px 0 var(--background-complete),
		-1px 1px 0 var(--background-complete),
		1px 1px 0 var(--background-complete);
}

.map.complete.starfield .growth .growth-value, .map.complete.starfield .harvest .harvest-line, .map.complete.starfield .resources{
	text-shadow:
		-1px -1px 0 var(--background-starfield),
		1px -1px 0 var(--background-starfield),
		-1px 1px 0 var(--background-starfield),
		1px 1px 0 var(--background-starfield);
}

.map > .sliders {
	display : -webkit-inline-box;
	display : -webkit-inline-flex;
	display : -ms-inline-flexbox;
	display : inline-flex;
	position : absolute;
	z-index : 4;
}

.map > .sliders .slider {
	position : absolute;
	background-color : var(--background);
	z-index : 5;
	-webkit-box-ordinal-group : 2;
	-webkit-order : 1;
	    -ms-flex-order : 1;
	        order : 1;
}

.map > .sliders .sliders-space {
	width : 10px;
	-webkit-box-ordinal-group : 3;
	-webkit-order : 2;
	    -ms-flex-order : 2;
	        order : 2;
}

.map > .sliders .slider-icon {
	width : 25px;
	height : 25px;
	border : 2px solid var(--lightframe);
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
	margin : 3px 0 3px 3px;
	white-space: nowrap;
	overflow : hidden;
	color : #FFFFFF;
	-webkit-box-ordinal-group : 2;
	-webkit-order : 1;
	    -ms-flex-order : 1;
	        order : 1;
	cursor : pointer;
}

.map .resources {
	position : absolute;
	top : 31px;
	left : 3px;
	width : 24px;
	overflow : visible;
	z-index : 4;
	white-space: nowrap;
}

.resource-line {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;
	white-space : nowrap;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
}

.resource-icon {
	-webkit-flex-shrink : 0;
	    -ms-flex-negative : 0;
	        flex-shrink : 0;
}

.resource-value {
	margin-left : 3px;
	pointer-events : none;
	text-shadow:
		-1px -1px 0 var(--background),
		1px -1px 0 var(--background),
		-1px 1px 0 var(--background),
		1px 1px 0 var(--background);
}

.map .harvest, .world .harvest {
	position : absolute;
	top : 31px;
	right : 3px;
	z-index : 4;
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : vertical;
	-webkit-box-direction : normal;
	-webkit-flex-direction : column;
	    -ms-flex-direction : column;
	        flex-direction : column;
	-webkit-box-align : right;
	-webkit-align-items : right;
	    -ms-flex-align : right;
	        align-items : right;
	pointer-events : none;
}

.harvest-line {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;
	-webkit-box-pack : right;
	-webkit-justify-content : right;
	    -ms-flex-pack : right;
	        justify-content : right;
	-webkit-align-self : right;
	    -ms-flex-item-align : right;
	        align-self : right;
	margin : 2px 0 2px auto;
	text-shadow:
		-1px -1px 0 var(--background),
		1px -1px 0 var(--background),
		-1px 1px 0 var(--background),
		1px 1px 0 var(--background);
}

.harvest-icon {
	width : 20px;
	height : 20px;
	border-radius : 10px;
	margin-left : 5px;
}

.map .low-load {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;
	-webkit-flex-wrap : wrap;
	    -ms-flex-wrap : wrap;
	        flex-wrap : wrap;
	overflow-y : auto;
	z-index : 4;
}

.map > .low-load > .point-info {
	width : 420px;
	margin : 5px 0 0 5px;
	pointer-events : auto;
	z-index : 3;
	-webkit-box-ordinal-group : 2;
	-webkit-order : 1;
	    -ms-flex-order : 1;
	        order : 1;
}

.map > .low-load > .point-info.locked {
	width : 420px;
	margin : 5px 0 0 5px;
	pointer-events : auto;
	z-index : 3;
	-webkit-box-ordinal-group : 3;
	-webkit-order : 2;
	    -ms-flex-order : 2;
	        order : 2;
}

.map .low-load-checkbox {
	position : absolute;
	right : 28px;
	top : 4px;
	z-index : 4;
	padding : 0 5px;
	border-radius : 5px;
	background-color : var(--background);
}

.map.complete .low-load-checkbox {
	background-color : var(--background-complete);
}

.map.complete.starfield .low-load-checkbox {
	background-color : var(--background-starfield);
}

.tab.sliders, .tab.story, .tab.skills, .tab.management, .tab.artifacts, .tab.map {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : vertical;
	-webkit-box-direction : normal;
	-webkit-flex-direction : column;
	    -ms-flex-direction : column;
	        flex-direction : column;
	overflow : hidden;
}

.tab.story .records, .tab.sliders .sliders, .tab.skills .skills, .tab.stardust .stardusts, .tab.artifacts .artifacts {
	overflow : auto;
	overflow-x : hidden;
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
	-webkit-flex-wrap : wrap;
	    -ms-flex-wrap : wrap;
	        flex-wrap : wrap;
	padding: 10px 0 10px 0;
	-webkit-box-flex : 999;
	-webkit-flex-grow : 999;
	    -ms-flex-positive : 999;
	        flex-grow : 999;
}

.tab.artifacts .artifacts {
	padding-top : 0;
}

.tab.sliders .sliders {
	-webkit-box-align : start;
	-webkit-align-items : start;
	    -ms-flex-align : start;
	        align-items : start;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;
}

.tab.sliders .sliders-clones, .tab.sliders .sliders-real {
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-flex-wrap : wrap;
	    -ms-flex-wrap : wrap;
	        flex-wrap : wrap;
}

.header {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;
	padding : 5px;
	width : calc(100vw - 34px);
	border : 2px solid var(--lightframe);
	margin : 10px 10px 0 10px;
	-webkit-flex-shrink : 0;
	    -ms-flex-negative : 0;
	        flex-shrink : 0;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
}

.header > div {
	width : 250px;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
}

.header > .exp-mult {
	display : none;
}

.tab.skills .header > .exp-mult {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
}

.skills .skill {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : vertical;
	-webkit-box-direction : normal;
	-webkit-flex-direction : column;
	    -ms-flex-direction : column;
	        flex-direction : column;
	width : 290px;
	height : 150px;
	border : 2px solid var(--shade12);
	color : var(--shade8);
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
	margin : 10px;
	cursor : default;
	-webkit-box-ordinal-group : 2;
	-webkit-order : 1;
	    -ms-flex-order : 1;
	        order : 1;
}

.skill .title {
	font-size : larger;
	padding : 10px;
	text-align : center;
}

.skill .desc {
	padding : 0 10px;
	-webkit-box-flex : 999;
	-webkit-flex-grow : 999;
	    -ms-flex-positive : 999;
	        flex-grow : 999;
	text-align : center;
}

.skill .cost {
	font-size : larger;
	text-align : right;
	width : 100%;
	padding : 5px;
	margin : 0 15px 0 0;
}

.skill.available {
	cursor : pointer;
	border : 2px solid var(--lightframe);
	color : var(--foreground);
	-webkit-box-ordinal-group : 1;
	-webkit-order : 0;
	    -ms-flex-order : 0;
	        order : 0;
}

.skill.owned {
	background-color : var(--skill-owned);
	border : 2px solid var(--lightframe);
	color : var(--skill-owned-text);
	-webkit-box-ordinal-group : 3;
	-webkit-order : 2;
	    -ms-flex-order : 2;
	        order : 2;
}

.tab.sliders .slider, .tab.map > .sliders .slider {
	display : inline-block;
	width : 350px;
	font-size : 13px;
	text-align : center;
	-webkit-align-self : flex-start;
	    -ms-flex-item-align : start;
	        align-self : flex-start;
	border : 2px solid var(--lightframe);
	padding : 10px;
	margin : 10px;
	cursor : default;
	vertical-align : top;
	overflow : visible;
	-webkit-box-ordinal-group : 2;
	-webkit-order : 1;
	    -ms-flex-order : 1;
	        order : 1;
}

.tab.sliders .slider .slider-header, .tab.map > .sliders .slider .slider-header {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;
}

.tab.sliders .slider .slider-level, .tab.map > .sliders .slider .slider-level {
	width : 40px;
	height : 40px;
	border : 2px solid var(--darkframe);
	font-size : 30px;
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	color : var(--shade0);
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
	margin : -2px 8px -2px -2px;
	cursor : pointer;
	-webkit-transition : background-color 0.2s;
	-o-transition : background-color 0.2s;
	transition : background-color 0.2s;
}

.tab.sliders .slider .slider-level.available, .tab.map > .sliders .slider .slider-level.available {
	background-color : var(--bg-spirit);
}

.tab.sliders .slider .slider-level:hover, .tab.map > .sliders .slider .slider-level:hover {
	background-color : var(--shade12);
}

.tab.sliders .slider .slider-color, .tab.map > .sliders .slider .slider-color {
	background-color : maroon;
	-webkit-box-flex : 999;
	-webkit-flex-grow : 999;
	    -ms-flex-positive : 999;
	        flex-grow : 999;
	height : 40px;
	margin : 0 10px 10px 0;
	cursor : pointer;
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
	font-size : 30px;
	color : rgba(255,255,255,0.7);
}

.tab.sliders .slider .slider-target, .tab.map > .sliders .slider .slider-target {
	width : 40px;
	height : 40px;
	border : 2px solid var(--darkframe);
	font-size : 18px;
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	color : var(--shade0);
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
	margin : -2px;
	white-space : nowrap;
}

.tab.sliders .slider .alert, .tab.map > .sliders .slider .alert {
	border : 3px solid var(--alertframe);
	width : 16px;
	height : 16px;
}

.autotarget-switches {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;
	-webkit-box-pack : space-evenly;
	-webkit-justify-content : space-evenly;
	    -ms-flex-pack : space-evenly;
	        justify-content : space-evenly;
}

.imbuement .gui-checkbox {
	margin-left : 20px;
}

.selector {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
}

.selector .title {
	display : none;
}

.selector .choices {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : vertical;
	-webkit-box-direction : normal;
	-webkit-flex-direction : column;
	    -ms-flex-direction : column;
	        flex-direction : column;
	background-color : var(--background);
	position : relative;
	width : 180px;
	height : 25px;
}

.selector .choice {
	padding : 5px;
	margin : 0 0 0 5px;
	width : 180px;
	white-space : nowrap;
	overflow : hidden;
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
	position : absolute;
	-webkit-transition : background-color 0.2s, color 0.2s, height 0.2s, margin 0.2s, top 0.2s;
	-o-transition : background-color 0.2s, color 0.2s, height 0.2s, margin 0.2s, top 0.2s;
	transition : background-color 0.2s, color 0.2s, height 0.2s, margin 0.2s, top 0.2s;
	z-index : 1;
	background-color : var(--shade14);
	cursor : pointer;
	height : 0;
	top : 0;
}

.selector .choice:hover {
	background-color : var(--shade12);
}

.selector .choice.active:before {
	content : "目标: ";
	padding : 0 5px;
}

.virtual-create .selector .choice.active:before {
	content : "焦点: ";
	padding : 0 5px;
}

.selector .choice.active {
	height : 15px;
	background-color : var(--background);
	z-index : 2;
}

.selector .choice.active:hover {
	background-color : var(--shade12);
}

.apply, .unsummon {
	border : 2px solid var(--lightframe);
	padding : 5px;
	cursor : pointer;
	-webkit-transition : background-color 0.2s;
	-o-transition : background-color 0.2s;
	transition : background-color 0.2s;
	background-color : var(--shade15);
}	

.apply:hover , .unsummon:hover{
	background-color : var(--shade12);
}

.slider .slider-name, .slider .slider-value {
	display : inline;
	padding : 4px 0 2px;
}

.gui-picker {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	padding : 3px 0 5px 0;
	width : 100%;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
}

.gui-picker .name {
}

.gui-picker .attributes {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
}

.gui-picker .attribute {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	width : 20px;
	height : 20px;
	margin : 0 2px;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
	border : 1px solid var(--darkframe);
	cursor : pointer;
}

.gui-picker .special {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	width : 20px;
	height : 20px;
	margin : 0 2px;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
	cursor : pointer;
	background-size:cover;
}

.gui-picker .special:first-child {
	border : 1px dotted var(--darkframe);
}

.gui-picker .all {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	width : 40px;
	height : 20px;
	margin : 0 2px;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
	border : 1px solid var(--darkframe);
	cursor : pointer;
	-webkit-transition : background-color 0.2s;
	-o-transition : background-color 0.2s;
	transition : background-color 0.2s;
}

.gui-picker .all:hover {
	background-color : var(--shade12);
}

.gui-checkbox {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
}

.gui-checkbox .checkbox {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	width : 20px;
	height : 20px;
	margin : 0 2px;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
	border : 1px solid var(--darkframe);
	cursor : pointer;
}

.gui-slider {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	width : 350px;
	height : 20px;
	cursor : pointer;
	padding : 2px 0 5px;
	color : var(--gui-slider-text);
}

.gui-slider.disabled {
	opacity : 0.5;
}

.gui-slider .gui-slider-left, .gui-slider .gui-slider-left {
	width : 40px;
}

.gui-slider .gui-slider-step{
	border : 1px solid var(--darkframe);
	padding : 0 5px;
	margin : 0 5px;
}

.gui-slider .gui-slider-left{
	text-align : right;
}

.gui-slider .gui-slider-line {
	width : 250px;
	position : relative;
	border : 1px solid var(--darkframe);
	margin : 5px;
}

.gui-slider .gui-slider-runner {
	position : absolute;
	margin : -6px -1px;
	pointer-events : none;
	border : 1px solid var(--darkframe);
	padding : 0 2px;
	border-radius : 3px;
}

.gui-slider.growth.boost .gui-slider-line, .gui-slider.growth.channel .gui-slider-line{
	opacity : 0.6;
}

.gui-slider.automation .gui-slider-runner, .gui-slider.automation .gui-slider-line {
	background-color : var(--shade14);
}

.tab.menu {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
}

.tab.menu > .titles {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : vertical;
	-webkit-box-direction : normal;
	-webkit-flex-direction : column;
	    -ms-flex-direction : column;
	        flex-direction : column;
	-webkit-box-align : stretch;
	-webkit-align-items : stretch;
	    -ms-flex-align : stretch;
	        align-items : stretch;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
	width : 200px;
	background-color : var(--shade10);
	border-right : 2px solid var(--lightframe);
}

.tab.menu > .titles .title {
	padding : 20px 20px 20px 0;
	text-align : right;
	cursor : pointer;
	-webkit-transition : background-color 0.3s;
	-o-transition : background-color 0.3s;
	transition : background-color 0.3s;
	z-index : 0;
	background-color : var(--shade12);
}

.tab.menu > .titles .title:hover {
	background-color : var(--shade14);
}

.tab.menu > .titles .title.active {
	background-color : var(--background);
	cursor : default;
	margin : -2px;
	padding-right : 22px;
	border-top : 2px solid var(--lightframe);
	border-bottom : 2px solid var(--lightframe);
	z-index : 1;
}

.tab.menu > .tabs {
	-webkit-box-flex : 999;
	-webkit-flex-grow : 999;
	    -ms-flex-positive : 999;
	        flex-grow : 999;
}

.tab.menu > .tabs .tab {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	    -ms-flex-direction: column;
	        flex-direction: column;
	width : 100%;
	height : 100%;
	-webkit-box-align : stretch;
	-webkit-align-items : stretch;
	    -ms-flex-align : stretch;
	        align-items : stretch;
}
	
.savelist {
	margin : 20px;
	border : 2px solid var(--lightframe);
	overflow : hidden;
	overflow-y : auto;
	height : 50%;
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : vertical;
	-webkit-box-direction : normal;
	-webkit-flex-direction : column;
	    -ms-flex-direction : column;
	        flex-direction : column;
}

.savelist .save {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	white-space : nowrap;
	-webkit-flex-shrink : 0;
	    -ms-flex-negative : 0;
	        flex-shrink : 0;
	padding : 3px 5px;
}

.save:nth-child(even) {
	background-color : var(--shade14);
}

.savelist .save.active {
	background-color : var(--shade4);
	color : var(--shade15);
}

.savelist .save .date {
	width : 200px;
}

.savelist .save .name {
	font-weight : bolder;
}

.savelist .save .progress {
	padding : 0 5px;
	font-weight : normal;
}

.cloud {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;
	margin : 5px 15px -15px 15px;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
}

.cloud .button.cloud-login {
	padding : 5px 10px;
}

.cloud-username {
	padding : 0 5px;
	font-weight : bold;
}

.cloud-update {
	margin-left : auto;
	padding : 0 5px;
}

.saves .buttons {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-flex-wrap : wrap;
	    -ms-flex-wrap : wrap;
	        flex-wrap : wrap;
	padding : 0 15px;
	margin : -15px 0;
}

.saves .button, .login-form .button, .artifacts .button, .color-picker .button {
	display : inline-block;
	border : 2px solid var(--lightframe);
	padding : 10px;
	margin : 5px;
	cursor : pointer;
	-webkit-transition : background-color 0.2s;
	-o-transition : background-color 0.2s;
	transition : background-color 0.2s;
	text-align : center;
}

.saves .button:hover, .login-form .button:hover, .artifact .button:hover, .color-picker .button:hover{
	background-color : var(--shade12);
}

.button.reset {
	margin-left : auto;
	color : maroon;
}

.saves .export {
	margin : 20px;
	color : var(--foreground);
	-webkit-box-flex : 999;
	-webkit-flex-grow : 999;
	    -ms-flex-positive : 999;
	        flex-grow : 999;
	border : 2px solid var(--lightframe);
	background-color : var(--shade14);
	font-family : Courier;
	min-height : 50px;
}

.management > .automation, .management > .sort {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	padding : 5px 10px 5px 10px;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	margin : 10px 10px 0 10px;
	border : 2px solid var(--lightframe);
	overflow-x : auto;
	overflow-y : hidden;
	white-space: nowrap;
	-webkit-flex-shrink : 0;
	    -ms-flex-negative : 0;
	        flex-shrink : 0;
}

.automation .gui-picker {
	width : auto;
}

.automation .text {
	width : 150px;
	text-align : right;
	margin : -1px -28px 1px 20px;
}

.automation-eta {
	text-align : right;
	margin : -1px 10px 1px auto;
}

.management .filter {
	width : auto;
}

.management .filter .name {
	padding : 0 20px 0 0;
}

.management .sort .gui-checkbox, .management .automation .gui-checkbox {
	margin-left : 20px;
}

.management .sorter {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;
	padding : 0 20px;
}
.management .sorter .choices {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;
	padding : 0 5px;
}

.management .sorter .choice, .slider .role .choice {
	padding : 5px 10px;
	margin : -5px 0;
	-webkit-transition : background-color 0.2s, color 0.2s;
	-o-transition : background-color 0.2s, color 0.2s;
	transition : background-color 0.2s, color 0.2s;
	cursor : pointer;
}

.management .sorter .choice:hover, .slider .role .choice:hover {
	background-color : var(--shade13);	
}

.management .sorter .choice.active {
	background-color : var(--sort-down-bg);
	color : var(--sort-active);
}

.management .sorter.reverse .choice.active {
	background-color : var(--sort-up-bg);	
}

.slider .role {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;
	padding : 10px 20px 15px 20px;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
}
.slider .role .choices {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;
	padding : 0 5px;
	-webkit-box-pack : stretch;
	-webkit-justify-content : stretch;
	    -ms-flex-pack : stretch;
	        justify-content : stretch;
}
.slider .role.team-blood .choice.active {background-color : var(--bg-blood);}
.slider .role.team-fire  .choice.active {background-color : var(--bg-fire );}
.slider .role.team-ice   .choice.active {background-color : var(--bg-ice  );}
.slider .role.team-metal .choice.active {background-color : var(--bg-metal);}

.management .list {
	overflow-y : auto;
	-webkit-box-flex : 999;
	-webkit-flex-grow : 999;
	    -ms-flex-positive : 999;
	        flex-grow : 999;
	padding : 0 10px;
}

.management .point {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	padding : 5px;
	border : 2px solid var(--lightframe);
	margin : 10px 5px;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
}

.management .point .level {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
	width : 40px;
	height : 40px;
	-webkit-flex-shrink : 0;
	    -ms-flex-negative : 0;
	        flex-shrink : 0;
	font-size : 25px;
	border-radius : 20px;
	border : 1px solid var(--darkframe);
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	margin : 5px 5px 5px 7px;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
}

.management .point .level.enchant-gold {
	border-radius : 23px;
	border : 5px solid var(--enchantgold);
}

.management .point .level.enchant-growth {
	border-radius : 23px;
	border : 5px solid var(--enchantgrowth);
}

.management .point .level.enchant-mana {
	border-radius : 23px;
	border : 5px solid var(--enchantmana);
}

.management .point .level.enchant-doom {
	border-radius : 23px;
	border : 5px solid var(--enchantdoom);
}


.management .point .info {
	width : 160px;
	font-size : 13px;
	padding-left : 5px;
}

.management .point .icons {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
}

.management .point .icons .icon, .management .automation .icon {
	width : 40px;
	height : 40px;
	border : 2px solid var(--darkframe);
	font-size : 35px;
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	color : #FFFFFF;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
	margin : -1px;
	opacity : 0;
	pointer-events : none;
}

.management .point .icons .icon.visible, .management .automation .icon.visible {
	pointer-events : auto;
	opacity : 0.25;
	-webkit-transform : scale(0.8);
	    -ms-transform : scale(0.8);
	        transform : scale(0.8);
	-webkit-transition : opacity 0.2s, -webkit-transform 0.2s;
	transition : opacity 0.2s, -webkit-transform 0.2s;
	-o-transition : transform 0.2s, opacity 0.2s;
	transition : transform 0.2s, opacity 0.2s;
	transition : transform 0.2s, opacity 0.2s, -webkit-transform 0.2s;
}

.management .point .icons .divider {
	width : 50px;
}

.management .point .icons .icon.visible.available, .management .automation .icon.visible {
	opacity : 0.75;
	cursor : pointer;
}

.management .point .icons .icon.visible.bought, .management .automation .icon.visible.active {
	opacity : 1;
	-webkit-transform : none;
	    -ms-transform : none;
	        transform : none;
}

.management .automation .icon.visible.crossed {
	opacity : 0.5;
	-webkit-transform : none;
	    -ms-transform : none;
	        transform : none;
}

.management .list-hover {
	position : absolute;
	background-color : var(--shade13);
	border : 2px solid var(--darkframe);
	pointer-events : none;
	padding : 3px;
}

.management .list-hover.available {
	background-color : var(--button-bg);
}

.management .list-hover.bought {
	background-color : var(--button-active-bg);
	color : var(--button-active-text);
}

.management .automation-text {
	padding : 0 5px 0 0;
}

.management .automation-enchantment-text {
	padding : 0 5px 0 20px;
}

.tab.story .records {
	-webkit-align-content : flex-start;
	    -ms-flex-line-pack : start;
	        align-content : flex-start;
}

.records .record {
	width : 100%;
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : vertical;
	-webkit-box-direction : normal;
	-webkit-flex-direction : column;
	    -ms-flex-direction : column;
	        flex-direction : column;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
	padding-top : 10px;
	margin-top : -10px;
}

.records .record .title:not(:empty) {
	text-align : left;
	padding : 20px;
	font-size : larger;
	width : 700px;
	background-color : var(--shade12)
}

.records .record .text:not(:empty) {
	text-align : left;
	padding : 10px;
	margin : 0 50px 0 10px;
	background-color : var(--shade14);
	width : 600px;
	text-indent : 30px;
}

.records .record .guide:not(:empty) {
	text-align : left;
	padding : 0 10px;
	margin : 0 50px 0 10px;
	background-color : var(--shade14);
	font-size : smaller;
	color : var(--shade5);
	width : 600px;
	text-indent : 30px;
}

.records .record .time:not(:empty) {
	padding : 10px;
	margin : 0 50px 10px 10px;
	background-color : var(--shade13);
	width : 600px;
	text-align : right;
}

.records .record.unread {
	background-color : var(--shade11);
}

.popup {
	z-index : 10;
	position : absolute;
	width : 100%;
	height : 100%;
	background-color : rgba(0,0,0,0.3);
}

.popup .frame {
	position : absolute;
	left : calc(50% - 385px);
	width : 770px;
	top : calc(10% - 10px);
	max-height : 80%;
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : vertical;
	-webkit-box-direction : normal;
	-webkit-flex-direction : column;
	    -ms-flex-direction : column;
	        flex-direction : column;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	-webkit-align-content : flex-start;
	    -ms-flex-line-pack : start;
	        align-content : flex-start;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
	overflow-y : hidden;
	background-color : var(--background);
	text-align : center;
	border : 2px solid var(--darkframe);
}

.popup .frame .title {
	color : var(--shade2);
	font-size : 30px;
}

.popup .frame .button {
	display : inline-block;
	color : var(--shade2);
	font-size : 20px;
	padding : 10px;
	margin : 10px;
	border : 2px solid var(--lightframe);
	cursor : pointer;
	-webkit-transition : background-color 0.2s;
	-o-transition : background-color 0.2s;
	transition : background-color 0.2s;
}

.popup .frame .button:hover {
	background-color : var(--shade12);
}

.popup .frame .hint {
	color : var (--shade8);
	font-size : smaller;
}

.popup .records {
	-webkit-box-flex : 999;
	-webkit-flex-grow : 999;
	    -ms-flex-positive : 999;
	        flex-grow : 999;
	margin : 20px;
	overflow-y : auto;
	overflow-x : hidden;
	height : calc(80% - 300px);
	background-color : var(--background);
}

.popup .records .record {
	display : none;
}

.popup .records .record.unread {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	background-color : inherit;
}

.tab.about {
	overflow : hidden
}

.about-holder {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : vertical;
	-webkit-box-direction : normal;
	-webkit-flex-direction : column;
	    -ms-flex-direction : column;
	        flex-direction : column;
	padding : 30px;
	overflow-y : auto;
}

.about .title {
	color : var(--tablet-present);
	font-size : 100px;
	margin : -40px 0 0 0;
}

.about .subtitle {
	margin : -30px 0 0 320px;
}

.about .links {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	padding : 20px 0;
	margin : 0 0 20px 0;
}

.about .links .link {
	padding : 0 20px 0 0;
}

.about .links .link a {
	text-decoration : none;
	color : var(--enchantgrowth);
}

.about .changelog {
	padding : 20px 0 0 0;
	font-family : Courier New;
}

.settings {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : vertical;
	-webkit-box-direction : normal;
	-webkit-flex-direction : column;
	    -ms-flex-direction : column;
	        flex-direction : column;
}

.settings > .titles {
	-webkit-flex-shrink : 0;
	    -ms-flex-negative : 0;
	        flex-shrink : 0;
	margin : 20px 20px 0 20px;
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;
	z-index : 2;
}

.settings > .titles .title {
	background-color : var(--shade12);
	border : 2px solid var(--lightframe);
	padding : 5px;
	border-bottom : none ;
	cursor : pointer;
	-webkit-transition : background-color 0.2s, color 0.2s, margin 0.2s;
	-o-transition : background-color 0.2s, color 0.2s, margin 0.2s;
	transition : background-color 0.2s, color 0.2s, margin 0.2s;
}

.settings > .titles .title:hover {
	background-color : var(--shade14);
}

.settings > .titles .title.active {
	background-color : var(--shade15);
	margin : 2px 0 -2px 0;
	cursor : default;
}

.settings > .tabs {
	-webkit-box-flex : 999;
	-webkit-flex-grow : 999;
	    -ms-flex-positive : 999;
	        flex-grow : 999;
	margin : 0 20px 20px 20px;
	border : 2px solid var(--lightframe);
	overflow-y : auto;
	z-index : 1;
}

.settings .setting {
	padding : 15px;
	margin : 20px 20px 0 20px;
	background-color : var(--shade14);
}

.settings .choices {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;
	padding : 5px 0 0 50px;
}

.settings .choice {
	padding : 10px;	
	margin : 0 10px 0 0;
	cursor : pointer;
	-webkit-transition : background-color 0.2s, color 0.2s;
	-o-transition : background-color 0.2s, color 0.2s;
	transition : background-color 0.2s, color 0.2s;
}

.settings .choice:hover {
	background-color : var(--shade12);
}

.settings .choice.active {
	background-color : var(--shade4);
	color : var(--shade15);
}

.tab.statistics .statistics {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : vertical;
	-webkit-box-direction : normal;
	-webkit-flex-direction : column;
	    -ms-flex-direction : column;
	        flex-direction : column;
}

.statistics .stat {
	padding : 10px;
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;
	white-space : nowrap;
}

.statistics .stat .name {
	width : 200px;
	text-align : right;
}

.statistics .stat .value {
	width : 200px;
	text-align : left;
	padding-left : 10px;
}

.tab.stardust {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : vertical;
	-webkit-box-direction : normal;
	-webkit-flex-direction : column;
	    -ms-flex-direction : column;
	        flex-direction : column;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
	overflow : auto;
}

.tab.stardust .stardust-growth {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : vertical;
	-webkit-box-direction : normal;
	-webkit-flex-direction : column;
	    -ms-flex-direction : column;
	        flex-direction : column;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
	width : 400px;
	padding : 10px;	
	border : 2px solid var(--lightframe);
}

.tab.stardust .stardust-title {
	font-size : 20px;
	padding: 0 0 10px 0;
}

.tab.stardust .gui-slider {
	padding : 10px 0;
	width : 400px;
}

.tab.stardust .gui-slider-left, .tab.stardust .gui-slider-right {
	width : 65px;
}

.tab.stardust .buttons {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;
	width : 100%;
	-webkit-box-pack : space-evenly;
	-webkit-justify-content : space-evenly;
	    -ms-flex-pack : space-evenly;
	        justify-content : space-evenly;
}

.tab.stardust .button.equal {
	padding : 10px;
	margin : 10px 0 0 0;
	border : 2px solid var(--lightframe);
	cursor : pointer;
	-webkit-transition : background-color 0.2s;
	-o-transition : background-color 0.2s;
	transition : background-color 0.2s;
}

.tab.stardust .button.equal:hover {
	background-color : var(--shade12);
}

.tab.stardust .virtual {
	margin : 10px;
	border : 2px solid var(--lightframe);
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : vertical;
	-webkit-box-direction : normal;
	-webkit-flex-direction : column;
	    -ms-flex-direction : column;
	        flex-direction : column;
}

.tab.stardust .virtual .gui-slider-runner{
	background-color : var(--background);
}

.virtual .gui-slider .gui-slider-left, .virtual .gui-slider .gui-slider-right {
	width : 20px;
}

.tab.stardust .gui-slider.newMapLevel {
	width : 320px;
}

.tab.stardust .virtual-title {
	text-align : center;
	font-size : 20px;
}

.tab.stardust .virtual-create {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;	
	-webkit-box-align : center;	
	-webkit-align-items : center;	
	    -ms-flex-align : center;	
	        align-items : center;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
	margin : 5px 10px;
}

.tab.stardust .virtual-create-cost {
	width : 150px;
	text-align : center;
}

.tab.stardust .virtual-maps {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : vertical;
	-webkit-box-direction : normal;
	-webkit-flex-direction : column;
	    -ms-flex-direction : column;
	        flex-direction : column;
}

.tab.stardust .virtual-map {
	padding : 5px;
	border : 2px solid var(--lightframe);
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;	
	-webkit-box-align : center;	
	-webkit-align-items : center;	
	    -ms-flex-align : center;	
	        align-items : center;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
	margin : 0 10px 10px 10px;
}

.tab.stardust .virtual-map.active {
	background-color : var(--shade13);
}

.tab.stardust .virtual-map-title {
	width : 150px;
}
.tab.stardust .virtual-map-level {
	width : 150px;
}
.tab.stardust .virtual-map-focus {
	width : 150px;
	text-align : center;
}
.tab.stardust .virtual-map-charge {
	position : relative;
	left : -75px;
	margin : 0 -75px;
	width : 150px;
	height : 30px;
	background-color : var(--lightframe);
	opacity : 0.3;
	pointer-events : none;
	-webkit-transform-origin : center left;
	    -ms-transform-origin : center left;
	        transform-origin : center left;
	-webkit-transform : scale(0,1);
	    -ms-transform : scale(0,1);
	        transform : scale(0,1);
}
.tab.stardust .virtual .button {
	padding : 5px;
	border : 2px solid var(--shade10);
	color : var(--shade10);
	margin-left : auto;
}

.tab.stardust .virtual .button.enabled {
	border : 2px solid var(--lightframe);
	color : var(--foreground);
	-webkit-transition : background-color 0.2s;
	-o-transition : background-color 0.2s;
	transition : background-color 0.2s;
	cursor : pointer;
}

.tab.stardust .virtual .button.enabled:hover {
	background-color : var(--shade12)
}

.tab.stardust .special-core-info {
	position : absolute;
	right : 3px;
	bottom : 3px;
	text-align : right;
}

.hidden {
	display : none !important;
}

.faded {
	opacity : 0.5 !important;
}

.notransition {
	-webkit-transition: none !important;
	-o-transition: none !important;
	transition: none !important;
}

.login-holder, .tablet-holder {
	z-index : 10;
	background-color : rgba(0,0,0,0.5);
	position : absolute;
	width : 100%;
	height : 100%;
	left : 0;
	top : 0;
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
}

.login-form {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	width : 400px;
	padding : 20px;
	-webkit-box-orient : vertical;
	-webkit-box-direction : normal;
	-webkit-flex-direction : column;
	    -ms-flex-direction : column;
	        flex-direction : column;
	border : 2px solid var(--lightframe);
	background-color : var(--background);
}

.login-input {
	border : 2px solid var(--lightframe);
	background-color : var(--background);	
	color : var(--foreground);	
	margin : 0 0 20px;
	padding : 8px;
}

.login-buttons {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	-webkit-box-pack : justify;
	-webkit-justify-content : space-between;
	    -ms-flex-pack : justify;
	        justify-content : space-between;
}

.tablet {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : vertical;
	-webkit-box-direction : normal;
	-webkit-flex-direction : column;
	    -ms-flex-direction : column;
	        flex-direction : column;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	position : absolute;
	width : 740px;
	height : 570px;
	background-color : var(--background);
	border : 2px solid var(--lightframe);
}

.tablet-title {
	font-size : 25px;
	font-weight : bolder;
	padding : 10px;
}

.tablet-glyphs {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : vertical;
	-webkit-box-direction : normal;
	-webkit-flex-direction : column;
	    -ms-flex-direction : column;
	        flex-direction : column;
	width : 700px;
}

.tablet-row {
	height : 17px;
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;
	-webkit-box-pack : justify;
	-webkit-justify-content : space-between;
	    -ms-flex-pack : justify;
	        justify-content : space-between;
}

.tablet-cell {
	color : var(--tablet-unknown);
	width : 25px;
	font-size : 13px;
	font-weight : bold;
	text-align : center;
}

.tablet-cell.present {
	color : var(--tablet-present);
}

.tablet-cell.absent {
	color : var(--tablet-absent);
}

.tablet-cell.used {
	opacity : 0.5;
	cursor : pointer;
}

.tablet-cell.possible {
	background-color : var(--shade10);
	cursor : pointer;
}

.tablet-cell.possible:hover {
	background-color : var(--shade12);
}

.tablet-controls {
	margin-top : 10px;
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;	
}

.tablet-input {
	padding : 0 5px;
	margin : 5px 0;
	background-color : var(--background);
	color : var(--foreground);
	border : 2px solid var(--lightframe);
	font-size : 20px;
	width : 400px;
	text-transform : uppercase;
}

.tablet-checkbox {
	width : 100px;
}

.artifact {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : vertical;
	-webkit-box-direction : normal;
	-webkit-flex-direction : column;
	    -ms-flex-direction : column;
	        flex-direction : column;
	width : 300px;
	min-height : 200px;
	padding : 10px;
	margin : 20px 0 0 20px;
	border : 2px solid var(--lightframe);
	-webkit-box-ordinal-group : 3;
	-webkit-order : 2;
	    -ms-flex-order : 2;
	        order : 2;
	-webkit-box-align : stretch;
	-webkit-align-items : stretch;
	    -ms-flex-align : stretch;
	        align-items : stretch;
}

.artifact-research {
	margin-top : auto;
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : vertical;
	-webkit-box-direction : normal;
	-webkit-flex-direction : column;
	    -ms-flex-direction : column;
	        flex-direction : column;
	-webkit-box-align : stretch;
	-webkit-align-items : stretch;
	    -ms-flex-align : stretch;
	        align-items : stretch;
}

.artifact-this  {
	margin : 5px 0;
	-webkit-align-self : left;
	    -ms-flex-item-align : left;
	        align-self : left;
}

.artifact.researched {
	-webkit-box-ordinal-group : 4;
	-webkit-order : 3;
	    -ms-flex-order : 3;
	        order : 3;
}

.artifact-header {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;
	height : 40px;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
}

.artifact-icon-holder {
	width : 40px;
	height : 20px;
	background-color : var(--shade12);
	border-radius : 50%;
	position : relative;
	top : 10px;
	text-align : center;
}

.artifact-icon {
	position : relative;
	top : -25px;
	font-size : 30px;
}

.artifact-icon-image {
	position : relative;
	top : -29px;
	left : -4px;
}

.artifact-title {
	text-align : center;
	font-weight : bold;
	font-size : 20px;
	-webkit-box-flex : 999;
	-webkit-flex-grow : 999;
	    -ms-flex-positive : 999;
	        flex-grow : 999;
}

.artifact-effect {
	-webkit-box-flex : 999;
	-webkit-flex-grow : 999;
	    -ms-flex-positive : 999;
	        flex-grow : 999;
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
	text-align : center;
}

.equip-holder, .holder {
	position : absolute;
	top : 0;
	left : 0;
	width : 100%;
	height : 100%;
	z-index : 10;
}

.equip-menu {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : vertical;
	-webkit-box-direction : normal;
	-webkit-flex-direction : column;
	    -ms-flex-direction : column;
	        flex-direction : column;
	position : absolute;
	background-color : var(--background);
	border : 2px solid var(--lightframe);
	max-height : 400px;
	overflow-y : auto;
	overflow-x : hidden;
}

.equip-item {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-flex-shrink : 0;
	    -ms-flex-negative : 0;
	        flex-shrink : 0;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;
	width : 250px;
	height : 20px;
	-webkit-transition : background-color 0.2s;
	-o-transition : background-color 0.2s;
	transition : background-color 0.2s;
	padding : 2px;
	white-space : nowrap;
}

.equip-item:hover {
	background-color : var(--shade12);
}

.equip-icon {
	-webkit-flex-shrink : 0;
	    -ms-flex-negative : 0;
	        flex-shrink : 0;
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	width : 20px;
	height : 20px;
	font-size :20px;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
	-webkit-box-ordinal-group : 1;
	-webkit-order : 0;
	    -ms-flex-order : 0;
	        order : 0;
}

.equip-icon-image {
	width : 20px;
	height : 20px;
	-webkit-flex-shrink : 0;
	    -ms-flex-negative : 0;
	        flex-shrink : 0;
	-webkit-box-ordinal-group : 1;
	-webkit-order : 0;
	    -ms-flex-order : 0;
	        order : 0;
}

.equip-title {
	-webkit-box-ordinal-group : 2;
	-webkit-order : 1;
	    -ms-flex-order : 1;
	        order : 1;
}

.equipment {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;
	margin : 5px 0 15px 0;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
}

.equipment-slot {
	margin : 0 auto;
	height : 20px;
	width : 30px;
	background-color : var(--shade12);
	border-radius : 50%;
	position : relative;
	top : 10px;
	text-align : center;
	cursor : pointer;
}

.equipment-icon {
	position : relative;
	top : -25px;
	font-size : 30px;
	width : 30px;
	height : 30px;
}

.equipment-icon-image {
	position : absolute;
	margin : -25px;
	top : -5px;
	pointer-events : none;
}

.equipment-slot.active > .equipment-icon-image {
	-webkit-filter : drop-shadow(0 0 5px var(--artifact-active)) drop-shadow(0px 0px 5px var(--artifact-active));
	        filter : drop-shadow(0 0 5px var(--artifact-active)) drop-shadow(0px 0px 5px var(--artifact-active));
}

.equipment-slot.active > .equipment-icon {
	text-shadow: 2px 2px 10px var(--artifact-active),
				2px -2px 10px var(--artifact-active),
				-2px 2px 10px var(--artifact-active),
				-2px -2px 10px var(--artifact-active);
}

.sliders .master {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : vertical;
	-webkit-box-direction : normal;
	-webkit-flex-direction : column;
	    -ms-flex-direction : column;
	        flex-direction : column;
	padding : 10px;
	border : 2px solid var(--lightframe);
	-webkit-box-align : start;
	-webkit-align-items : start;
	    -ms-flex-align : start;
	        align-items : start;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
	margin : 10px 10px 0 10px;
	-webkit-flex-shrink : 0;
	    -ms-flex-negative : 0;
	        flex-shrink : 0;
}

.sliders .master-row {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	-webkit-box-pack : space-evenly;
	-webkit-justify-content : space-evenly;
	    -ms-flex-pack : space-evenly;
	        justify-content : space-evenly;
	width : 100%;
	margin : 0 10px 0 10px;
	-webkit-flex-shrink : 0;
	    -ms-flex-negative : 0;
	        flex-shrink : 0;
}

.sliders .master-pair, .sliders .master-autotarget {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : vertical;
	-webkit-box-direction : normal;
	-webkit-flex-direction : column;
	    -ms-flex-direction : column;
	        flex-direction : column;
	-webkit-box-align : middle;
	-webkit-align-items : middle;
	    -ms-flex-align : middle;
	        align-items : middle;
	width : 250px;
}

.sliders .button.master-apply{
	width : 200px;
	-webkit-align-self : center;
	    -ms-flex-item-align : center;
	        align-self : center;
	text-align : center;
	height : auto;
}

.color-picker {
	position : absolute;
	background-color : var(--background);
	border : 2px solid var(--lightframe);
	padding : 10px;
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : vertical;
	-webkit-box-direction : normal;
	-webkit-flex-direction : column;
	    -ms-flex-direction : column;
	        flex-direction : column;
}

.color.gui-slider {
	padding: 10px 0;
}
.color .gui-slider-right {
	display : none;
}

.color .gui-slider-line {
	width : 300px;
}

.color-picker .buttons {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;
	-webkit-box-pack : justify;
	-webkit-justify-content : space-between;
	    -ms-flex-pack : justify;
	        justify-content : space-between;
	margin : 10px 0 0 0;
}

.color-picker .button {
	width : 100px;
}

.fullscreen-holder {
	z-index : 100;
	background-color : rgba(0,0,0,0.5);
	position : absolute;
	width : 100%;
	height : 100%;
	left : 0;
	top : 0;
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
}

.dialog {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : vertical;
	-webkit-box-direction : normal;
	-webkit-flex-direction : column;
	    -ms-flex-direction : column;
	        flex-direction : column;
	background-color : var(--background);
	border : 2px solid var(--lightframe);
	padding : 10px;
}

.sliderlv-info{
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
	-webkit-box-flex : 999;
	-webkit-flex-grow : 999;
	    -ms-flex-positive : 999;
	        flex-grow : 999;
	margin : 10px;
	text-align : center;
}

.sliderlv-line {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;
	-webkit-box-align : stretch;
	-webkit-align-items : stretch;
	    -ms-flex-align : stretch;
	        align-items : stretch;
}

.sliderlv-mult {
	width : 120px;
	text-align : center;
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
}

.sliderlv-line div:nth-child(even) {
	background-color : var(--shade14);
}

.sliderlv-mult-double {
	width : 240px;
	text-align : center;
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
}

.sliderlv-mult-name {
	width : 150px;
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
}

.dialog-title {
	font-size : 25px;
	font-weight : bolder;
	padding : 0 10px 10px;
	text-align : center;
}

.line-end {
	margin-left : auto !important;
}

.dialog .button {
	display : -webkit-inline-box;
	display : -webkit-inline-flex;
	display : -ms-inline-flexbox;
	display : inline-flex;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
	border : 2px solid var(--shade9);
	color : var(--shade9);
	padding : 10px;
	margin : 5px;
	-webkit-transition : background-color 0.2s, color 0.2s;
	-o-transition : background-color 0.2s, color 0.2s;
	transition : background-color 0.2s, color 0.2s;
	text-align : center;
}

.dialog .button.available {
	color : var(--foreground);
	cursor : pointer;
	border : 2px solid var(--lightframe);
}

.dialog .button.available:hover {
	background-color : var(--shade12);
}

.dialog .button.transparent {
	opacity : 0;
	max-width : 0;
	padding : 10px 0;
	margin : 5px 0;
}

.dialog .buttons {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
}

.heavy {
	font-weight : bold !important;
}

.imprint.button {
	padding : 5px;
	border : 2px solid var(--lightframe);
	-webkit-transition : opacity 0.2s, background-color 0.2s;
	-o-transition : opacity 0.2s, background-color 0.2s;
	transition : opacity 0.2s, background-color 0.2s;
	opacity : 0.5;
	width : 200px;
	text-align : center;
	margin-left : 20px;
}

.imprint.button.active {
	opacity : 1;
	cursor : pointer;
}

.imprint.button.active:hover {
	background-color : var(--shade12);
}

.dialog .stats {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;
	width : 600px;
	-webkit-box-pack : space-evenly;
	-webkit-justify-content : space-evenly;
	    -ms-flex-pack : space-evenly;
	        justify-content : space-evenly;
	-webkit-box-align : start;
	-webkit-align-items : start;
	    -ms-flex-align : start;
	        align-items : start;
}

.dialog .stats-info {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	margin : 10px 5px;
	min-width : 190px;
}

.stats > .stats-info {
	-webkit-box-pack : start;
	-webkit-justify-content : start;
	    -ms-flex-pack : start;
	        justify-content : start;
}

.build-button, .worlds-button, .feats-button, .cancel-button, .approve-button, .core-button {
	padding : 5px;
	border : 2px solid var(--lightframe);
	-webkit-transition : opacity 0.2s, background-color 0.2s;
	-o-transition : opacity 0.2s, background-color 0.2s;
	transition : opacity 0.2s, background-color 0.2s;
	text-align : center;
	cursor : pointer;
	position : absolute;
	left : 10px;
	top : 10px;
	width : 80px;
	z-index : 5;
}

.build-button:hover, .worlds-button:hover, .feats-button:hover, .approve-button:hover, .cancel-button:hover, .core-button:hover {
	background-color : var(--shade12);
}

.worlds-button {
	left : 115px;
}

.feats-button {
	left : 220px;
}

.core-button {
	left : 325px;
}

.approve-button {
	top : 55px;
}

.cancel-button {
	top : 100px;
}

.build {
	position : absolute;
	background-color : var(--background);
	border : 2px solid var(--lightframe);
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	max-width : 1100px;
	-webkit-flex-wrap : wrap;
	    -ms-flex-wrap : wrap;
	        flex-wrap : wrap;
	padding : 5px;
}

.build .building {
	width : 200px;
	height : 160px;
	margin : 5px;
	background-color : var(--background);
	border : 2px solid var(--lightframe);
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : vertical;
	-webkit-box-direction : normal;
	-webkit-flex-direction : column;
	    -ms-flex-direction : column;
	        flex-direction : column;
	opacity : 0.5;
}

.build .building.active {
	opacity : 1;
	cursor : pointer;
}

.build .building.active:hover {
	background-color : var(--shade12);
}

.building-header {
	height : 40px;
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
}

.building-icon {
	width : 30px;
	height : 30px;
	border-radius : 15px;
	margin : 5px;
	border : 1px solid var(--lightframe);
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
}

.building-desc {
	-webkit-box-flex : 999;
	-webkit-flex-grow : 999;
	    -ms-flex-positive : 999;
	        flex-grow : 999;
	text-align : center;
	padding : 5px;
}

.building-stored {
	text-align : right;
	padding : 2px;
	font-size : smaller;
}

.building-title {
	text-align : center;
	-webkit-box-flex : 999;
	-webkit-flex-grow : 999;
	    -ms-flex-positive : 999;
	        flex-grow : 999;
}

.building-cost {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;
	-webkit-flex-wrap : wrap;
	    -ms-flex-wrap : wrap;
	        flex-wrap : wrap;
	height : 48px;
	border-top : 1px solid var(--lightframe);
	padding : 2px 5px;
}

.building-cost-holder {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;
	width : 50px;
	height : 20px;
	padding : 2px;
}

.building-cost-icon {
	width : 20px;
	height : 20px;
	border-radius : 10px;
}

.building-cost-value {
	padding : 0 0 0 5px;
	color : var(--cost-more);
}

.building-cost-value.enough {
	color : var(--foreground);
}

.workers {
	position : absolute;
	top : 5px;
	right : 30px;
	white-space : nowrap;
	pointer-events : none;
}

.world-point {
	position : absolute;
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;
	border : 2px solid var(--lightframe);
	width : 360px;
	height : 60px;
	background-color : var(--background);
	pointer-events : none;
}

.world-point-icon {
	width : 60px;
	height : 60px;
	font-size : 35px;
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
}

.world-point-info {
	font-size : 13.3px;
	width : 300px;
	padding : 1px 0 1px 5px;
	white-space : nowrap;
}

.world-target .world-point {
	position : static;
	margin : -2px;
}

.world-target {
	position : absolute;
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : vertical;
	-webkit-box-direction : normal;
	-webkit-flex-direction : column;
	    -ms-flex-direction : column;
	        flex-direction : column;
	border : 2px solid var(--lightframe);
	width : 360px;
	height : 110px;
	background-color : var(--background);
}

.world-target-buttons {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;
	-webkit-box-pack : space-evenly;
	-webkit-justify-content : space-evenly;
	    -ms-flex-pack : space-evenly;
	        justify-content : space-evenly;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	-webkit-box-flex : 999;
	-webkit-flex-grow : 999;
	    -ms-flex-positive : 999;
	        flex-grow : 999;
}

.world-target-button {
	padding : 5px;
	border : 2px solid var(--lightframe);
	-webkit-transition : opacity 0.2s, background-color 0.2s;
	-o-transition : opacity 0.2s, background-color 0.2s;
	transition : opacity 0.2s, background-color 0.2s;
	text-align : center;
	width : 80px;
	left : 10px;
	top : 10px;
	opacity : 0.5;
}

.world-target-button.active {
	opacity : 1;
	cursor : pointer;
}

.world-target-button.active:hover {
	background-color : var(--shade12);
}

.presets {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : vertical;
	-webkit-box-direction : normal;
	-webkit-flex-direction : column;
	    -ms-flex-direction : column;
	        flex-direction : column;
	position : absolute;
	width : 400px;
	height : 400px;
	border : 2px solid var(--lightframe);
	background : var(--background);
}

.presets-list {
	margin : 20px;
	border : 2px solid var(--lightframe);	
	display : -webkit-box;	
	display : -webkit-flex;	
	display : -ms-flexbox;	
	display : flex;
	-webkit-box-orient : vertical;
	-webkit-box-direction : normal;
	-webkit-flex-direction : column;
	    -ms-flex-direction : column;
	        flex-direction : column;
	height : 300px;
}

.presets-item.active {
	background : var(--foreground);
	color : var(--background);
}

.presets-buttons {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;
	-webkit-box-pack : space-evenly;
	-webkit-justify-content : space-evenly;
	    -ms-flex-pack : space-evenly;
	        justify-content : space-evenly;
	margin : auto 20px 20px;
}

.presets .button {
	padding : 5px;
	border : 2px solid var(--lightframe);
	-webkit-transition : background-color 0.2s;
	-o-transition : background-color 0.2s;
	transition : background-color 0.2s;
	text-align : center;
	width : 60px;
}

.presets .button:hover {
	background-color : var(--shade12);
}

.feats {
	max-height : 80vh;
	overflow-y : auto;
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : vertical;
	-webkit-box-direction : normal;
	-webkit-flex-direction : column;
	    -ms-flex-direction : column;
	        flex-direction : column;
	margin : -5px 0;
}

.feat {
	padding : 10px;
	border : 2px solid var(--lightframe);
	margin : 5px 0;
	-webkit-box-ordinal-group : 2;
	-webkit-order : 1;
	    -ms-flex-order : 1;
	        order : 1
}

.feat.done {
	background-color : var(--skill-owned);
	border : 2px solid var(--lightframe);
	color : var(--skill-owned-text);
	-webkit-box-ordinal-group : 4;
	-webkit-order : 3;
	    -ms-flex-order : 3;
	        order : 3
}

.feat.failed {
	opacity : 0.5;
	-webkit-box-ordinal-group : 3;
	-webkit-order : 2;
	    -ms-flex-order : 2;
	        order : 2;
}

.offline {
	position : absolute;
	z-index : 100;
	left : 0;
	top : 0;
	width : 100%;
	height : 100%;
	background-color : var(--background);
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : vertical;
	-webkit-box-direction : normal;
	-webkit-flex-direction : column;
	    -ms-flex-direction : column;
	        flex-direction : column;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
}

.offline-time {
	font-size : 10vw;
	padding : 1vw;
	white-space : nowrap;
}
.offline-title {
	font-size : 4vw;
}
.offline-stop {
	font-size : 5vw;
	border : 2px solid var(--lightframe);
	padding : 10px;
	cursor : pointer;
}


.world-list {
	max-height : 70vh;
	overflow-y : auto;
}
.world-info {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;
	width : 500px;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	padding : 5px;
	margin : 5px;
	border : 2px solid var(--lightframe);
	-webkit-transition : background-color 0.2s;
	-o-transition : background-color 0.2s;
	transition : background-color 0.2s;
}

.world-info:hover {
	background-color : var(--shade13);
	cursor : pointer;
}

.world-info.active {
	background-color : var(--shade12);
	cursor : default;
}

.world-info .button {
	padding : 5px 20px;
	margin : 0 5px;
}

.world-title {
	width : 300px;
	white-space : nowrap;
}

.world-hint {
	position : absolute;
	right : 3px;
	bottom : 3px;
	text-align : right;
}

.core-board {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
}

.core-column {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : vertical;
	-webkit-box-direction : normal;
	-webkit-flex-direction : column;
	    -ms-flex-direction : column;
	        flex-direction : column;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
}

.core-element-holder {
	width : 6.5vmin;
	height : 7.5vmin;
	position : relative;
	-webkit-transform : scale(0.7,0.7);
	    -ms-transform : scale(0.7,0.7);
	        transform : scale(0.7,0.7);
	-webkit-transition : opacity 0.2s, -webkit-transform 0.5s;
	transition : opacity 0.2s, -webkit-transform 0.5s;
	-o-transition : transform 0.5s, opacity 0.2s;
	transition : transform 0.5s, opacity 0.2s;
	transition : transform 0.5s, opacity 0.2s, -webkit-transform 0.5s;
	opacity : 0.5;
}


.core-element-holder.available {
	cursor : pointer;
	opacity : 1;
}

.core-element-holder.expensive {
	cursor : default;
}

.core-element-holder.expensive > .core-element-bg::after, .core-element-holder.expensive > .core-element-bg::before {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	border-top : 5px solid var(--core-cost-more);
	border-bottom : 5px solid var(--core-cost-more);
}

.core-element-holder.blocked {
	opacity : 0.1;
}

.core-element-holder.active {
	-webkit-transform : scale(1,1);
	    -ms-transform : scale(1,1);
	        transform : scale(1,1);
	opacity : 1;	
}

.core-element-holder.available:hover {
	-webkit-transform : scale(0.8,0.8);
	    -ms-transform : scale(0.8,0.8);
	        transform : scale(0.8,0.8);
}

.core-element-holder.active:hover {
	-webkit-transform : scale(1,1);
	    -ms-transform : scale(1,1);
	        transform : scale(1,1);
	cursor : default;
}

.core-element {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
	position : absolute;
	width : 100%;
	height : 100%;
	text-align : center;
	font-family : 'Share Tech Mono';
	font-size : 4vmin;
	line-height : 3.7vmin;
}

.core-element-holder.locked > .core-element {
	font-size : 4vmin;
}

.core-element-holder.active > .core-element-bg {
	-webkit-transform : rotate(60deg);
	    -ms-transform : rotate(60deg);
	        transform : rotate(60deg);
}

.core-element-bg, .core-element-bg::before, .core-element-bg::after {
	position : absolute;
	left : 1.08vmin;
	width : 4.33vmin;
	height : 7.5vmin;
	-webkit-transition : -webkit-transform 0.5s;
	transition : -webkit-transform 0.5s;
	-o-transition : transform 0.5s;
	transition : transform 0.5s;
	transition : transform 0.5s, -webkit-transform 0.5s;
}

.core-element-bg::before, .core-element-bg::after {
	content : "";
	left : 0;
	background-color : inherit;
}

.core-element-bg::before {
	-webkit-transform : rotate(60deg);
	    -ms-transform : rotate(60deg);
	        transform : rotate(60deg);
}

.core-element-bg::after {
	-webkit-transform : rotate(120deg);
	    -ms-transform : rotate(120deg);
	        transform : rotate(120deg);
}

.cell-hover {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : vertical;
	-webkit-box-direction : normal;
	-webkit-flex-direction : column;
	    -ms-flex-direction : column;
	        flex-direction : column;
	padding : 2px;
	border : 2px solid var(--lightframe);
	background-color : var(--background);
	position : absolute;
	z-index : 5;
	pointer-events : none;
	width : 280px;
}

.cell-hover-title {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
}

.cell-hover-icon-holder {
	width : 32.5px;
	height : 37.5px;
	margin : 0 10px;
	position : relative;
}

.cell-hover-icon {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
	position : absolute;
	width : 100%;
	height : 100%;
	text-align : center;
	font-family : 'Share Tech Mono';
	font-size : 20px;
	line-height : 18.5px;
}

.cell-hover-icon-holder.locked > .cell-hover-icon {
	font-size : 20px;
}

.cell-hover-icon-bg, .cell-hover-icon-bg::before, .cell-hover-icon-bg::after {
	position : absolute;
	left : 5.4px;
	width : 21.65px;
	height : 37.5px;
	-webkit-transition : -webkit-transform 0.5s;
	transition : -webkit-transform 0.5s;
	-o-transition : transform 0.5s;
	transition : transform 0.5s;
	transition : transform 0.5s, -webkit-transform 0.5s;
}

.cell-hover-icon-bg::before, .cell-hover-icon-bg::after {
	content : "";
	left : 0;
	background-color : inherit;
}

.cell-hover-icon-bg::before {
	-webkit-transform : rotate(60deg);
	    -ms-transform : rotate(60deg);
	        transform : rotate(60deg);
}

.cell-hover-icon-bg::after {
	-webkit-transform : rotate(120deg);
	    -ms-transform : rotate(120deg);
	        transform : rotate(120deg);
}

.cell-hover-desc {
	width : 210px;
}

.cell-hover-costs, .cell-hover-enablers {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;
	-webkit-flex-wrap : wrap;
	    -ms-flex-wrap : wrap;
	        flex-wrap : wrap;
	border-top : 1px solid var(--lightframe);
	padding : 2px;
	margin : 2px;
}

.cell-hover-enablers-header, .cell-hover-costs-header {
	width : 100%;
}

.cell-hover-cost, .cell-hover-cost-paid, .cell-hover-enabler {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;
	margin : 2px;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
}

.cell-hover-cost-paid {
	width : 60px;
}

.cell-hover-cost-value {
	margin-left : 2px;
}

.cell-hover-cost-value.missing, .cell-hover-enabler-value.missing{
	color : var(--cost-more);
}

.tablet-numbers {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : vertical;
	-webkit-box-direction : normal;
	-webkit-flex-direction : column;
	    -ms-flex-direction : column;
	        flex-direction : column;
	height : 450px;
	width : 700px;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
}

.tablet-numbers-letters {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	font-size : 15px;
	-webkit-box-orient : vertical;
	-webkit-box-direction : normal;
	-webkit-flex-direction : column;
	    -ms-flex-direction : column;
	        flex-direction : column;
	-webkit-flex-wrap : wrap;
	    -ms-flex-wrap : wrap;
	        flex-wrap : wrap;
	height : 350px;
	width : 700px;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
}

.tablet-numbers-letter {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;
	width : 145px;
	margin : 8px 15px;
}

.tablet-numbers-letter-letter {
	width : 20px;
	text-align : right;
}

.tablet-numbers-letter-numbers {
	width : 130px;
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
	-webkit-box-align : center;
	-webkit-align-items : center;
	    -ms-flex-align : center;
	        align-items : center;
}

.tablet-numbers-letter-number {
	color : var(--tablet-unknown);
	width : 15px;
	text-align : center;
}

.tablet-numbers-letter-number.known {
	color : var(--tablet-present);
}

.tablet-numbers-odd, .tablet-numbers-even {
	font-size : 15px;
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;
}

.tablet-numbers-odd {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;
	margin-left : 50px;
	margin-right : -50px;
}

.tablet-numbers-hint {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : horizontal;
	-webkit-box-direction : normal;
	-webkit-flex-direction : row;
	    -ms-flex-direction : row;
	        flex-direction : row;
	-webkit-box-pack : center;
	-webkit-justify-content : center;
	    -ms-flex-pack : center;
	        justify-content : center;
	width : 100px;
	margin-right : -1px;
	border-left : solid 1px var(--shade8);
	border-right : solid 1px var(--shade8);
}

.map-hover {
	position : absolute;
	z-index : 5;
	padding : 2px 4px;
	border : 1px solid var(--lightframe);
	background-color : var(--background);
	pointer-events : none;
}

.guide-content {
	display : -webkit-box;
	display : -webkit-flex;
	display : -ms-flexbox;
	display : flex;
	-webkit-box-orient : vertical;
	-webkit-box-direction : normal;
	-webkit-flex-direction : column;
	    -ms-flex-direction : column;
	        flex-direction : column;
	width : 600px;
	height : 80vh;
	overflow : auto;
	padding : 20px;
}

.guide-subtitle {
	font-size : larger;
	font-weight : bold;
	padding : 20px 0 0 0;
}

.guide-text {
	padding : 10px 0 0 20px;
	text-align : justify;
	text-indent : 20px;
}

.help-button {
	width : 20px;
	max-width : 20px;
	height : 20px;
	max-height : 20px;
	border : 2px solid var(--lightframe);
	background-color : var(--background);
	text-align : center;
	z-index : 99;
}

.help-button:hover {
	background-color : var(--shade12);
	cursor : pointer;
}

.float-top-right {
	position : absolute;
	top : 3px;
	right : 3px;
}

.float-header {
	position : absolute;
	right : 18px;
}