* {
	box-sizing: border-box;

	padding: 0;
}

/* GRID */
  
.wrapper {
	display: grid;
	/* width: 100vw;
	height: 100vh; */
	grid-template-columns: 1fr 180px 2fr 350px 0.5fr;
	grid-template-rows: 100px 1fr auto;
}

top {
	grid-column: 1 span;
	grid-row: 1;
}

top .fixed {
	position: fixed;
	width: 100%;
	height: 100px;
	background: rgba(13, 16, 20, 0.95);
    border-bottom: 1px solid black;
	z-index: 2;
}

logo {
	grid-column: 2;
	grid-row: 1;
}

logo .fixed {
	display: flex;
	justify-content: center;
	position: fixed;
	width: 180px;
	height: 100px;
	z-index: 2;
}

logo a img {
	width: 180px;
	height: 98px;
}

header {
	grid-column: 3/5;
}

header .fixed {
	display: flex;
	align-items: center;
	/* justify-content: space-between; */
	position: fixed;
	top: 0px;
	width: 60%;
	max-width: 950px;
	height: 100px;
	z-index: 2;
	padding: 0 0 0 16px;
}

menu {
	grid-column: 2;
	font-size: 14px;
	margin: 0px;
	z-index: 1;
}

menu .fixed {
	list-style: none;
	position: fixed;
	top: 100px;
	width: 180px;
}

menu li {
	border-bottom: 1px solid black;
}

content {
	grid-column: 3/5;
	max-width: 950px;
	min-height: 700px;
	/* overflow: auto; */
	padding: 16px;
}

aside {
	grid-column: 4
}

aside .fixed {
	padding: 1px 16px 0 0;
	margin-top: 2px;
	position: fixed;
	top: 100px;
	width: 250px;
}

aside .fold {
	font-size: 15px;
	text-align: end;
	padding: 0 4px 0 0;
}

footer {
	grid-row: 3; 
}

/* GLOBALS */

html, body {
	min-height:100%;
	min-width:100%;
    margin: 0;
    padding: 0;
}

body {
	line-height:14px;
	padding-bottom:21px;
}

body.popup {
	min-width:0;
}

:focus {
	outline:none
}

input.invalid {
	background-color:red;
	border:1px solid #FFF;
}

input[type="submit"],input[type="button"],button {
	cursor:pointer;
}

table {
	width: 100%;
	/* display: block; */
	overflow: auto;
	border-collapse: separate;
	border-spacing: 2px;
	empty-cells:show;
	margin:0 auto;
	align-self: center;
}

table.auto {
	width: unset;
}

/* hack to expand full width */
table.hack {
	table-layout: fixed;
}

table table,img {
	
    border-radius: 25%;
}

td {
	padding: 2px 3px;
	vertical-align: middle;
}

input,button {
	margin:2px;
}

th input {
	margin:0
}

th {
	height: 14px;
	padding:4px 6px;
}

/* CARD */

.card {
	padding-bottom: 16px;
}

.card .title {
	padding: 4px 6px;
	margin-bottom: 2px;
    overflow: hidden;
    white-space: nowrap;
}

.card .content {
	padding: 4px;
	margin-bottom: 2px;
}

.article .text {
	margin: 2px;
}

.article .payouts {
	display: flex;
	justify-content: space-between;
	margin: 2px;
	margin-bottom: 0px;
}

.article img {
	width: 100%;
}

textarea {
	width:97%
}

textarea.tinymce{
	width:100%
}

.textForBlind 
{
	position:absolute;
	left:-10000px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}

.centerContainer > .outer {
    float: right;
    right: 50%;
    position: relative;
}
.centerContainer > .outer > .inner {
    float: right;
    right: -50%;
    position: relative;
}

.res_max,.res_current,.res_current_max {
	min-width:90px
}

.res_name {
	float:none;
}

.table519{
	/* min-width:519px !important; */
	/* width:519px !important */
	max-width: 519px !important;
}

.table569{
	/* min-width:569px !important; */
	/* width:569px !important */
	max-width: 569px !important;
}

.build_submit {
    max-width: 100px;
	padding:0;
    word-wrap: break-word;
	white-space: normal;
}

.build_submit:hover {
	text-decoration:underline;
font-weight:bold;
}

.build_form {
	display:inline;
}

.onlist {
    max-width: 100%;
	margin:0;
	padding:0;
}

.onlist:hover {
	text-decoration:underline;
}

.shortcut-edit {
	display:none;
}

.clear {
	clear:both;
}

/** HEADER **/
#header {
	padding:5px 10px;
	margin-left:10px;
	margin-right:10px;
	height:90px;
	min-width:915px;
	overflow: hidden;
}

#headerTable {
	width:100%;
}

#planetSelectorWrapper {
	flex-grow: 1;
}

#planetSelector {
	position: absolute;
	top: 70px;
	/*width: 150px;*/
}

.planetImage{
	text-align: center;
	flex-grow: 1;
}

.planetImage > img{
	width:50px;
	height:50px;
	border-radius:50%;
	background-color:#DDD;
}

#resources_mobile { /* new */
	display: flex;
	justify-content: space-evenly;
	flex-grow: 10;
}

#resource, #resource_mobile { /* new */
	text-align: center;
	align-items: center;
}

.resource_name {
	color: red;
	font-weight: bold;
}

.planetSelectorWrapper { /* new */
	/* height: 48px; */
	/* width: 48px; */
	/* margin: 0px 6px; */
	width: 120px;
}

.planetSelectorName { /* new */
	text-align: center;
}

#resourceWrapper{
	height:90px;
	text-align:center;
	margin:0;
}

#resourceTable{
	height:80px;
	padding-right: 215px;
}

#resourceTable td{
	margin:0 5px;
	min-width:130px;
}

#resourceTable img {
    display: block;
    height: 22px;
    margin: 0 auto;
    width: 42px;
}

/** MENU **/

/* #leftmenu {
	width:200px;
	float:left;
} */

#menu {
	list-style:none;
	margin:0;
	padding:0;
}

#menu a {
	display:block;
	margin:0;
	padding:4px 24px;
}

div#disclamer {
	text-align: center;
	font-size: 11px;
	margin-top: 4px;
	margin-bottom: 16px;
}

.menu-separator {
	min-height: 8px;
}

#options select {
	max-width:170px;
}
/* CONTENT */

#page {
	margin-left:200px;
	padding:0;
}

#content, .infobox {
	margin:10px 10px 0 ;
	padding:10px 10px 5px 10px;
}

/* unused? */
/* .full #content > table, .full form > table {
	max-width:95%;
	width:80%;
} */

.left{
	text-align:left
}

.right{
	text-align:right
}

.center{
	text-align:center
}

.top{
	vertical-align:top
}


.tooltip, .tooltip_sticky {
	cursor: pointer;
}

.hoverinfo {
    min-width: 150px;
    max-width: 250px;
    min-height: 20px;
    max-height: 40px;
}

.hoverinfo img {
    width: 84px;
    height: 84px;
}

.trader_col {
	margin:0 5px;
	float:left;
	width:100px;
}

.globalWarning {
	/* position: fixed; */
	z-index: 1;
	background-color: #FFFFDD;
	border: 1px solid #F7DF92;
	color: #000000;
	margin: 3px;
	padding: 5px;
	text-align: center;	
}

.globalWarning a:hover {
	text-decoration:underline;
}

.globalWarning a{
	cursor:pointer;
	color:#D20000;
}

.trader_col label:hover{
	cursor:pointer;
}

.tip {
	display:none;
	padding:7px;
	position:absolute;
	z-index:1000;
	max-width: 500px;
}

.tip.notify {
	position:fixed;
	top:200px;
	padding:20px;
}

.ui-progressbar {
	height: 10px !important;
}

.ui-progressbar-value {
	margin:0;
}

#traderContainer {
	margin-top:5px;
}

.infobox {
    border: 2px solid red;
    padding: 2px 5px;
    text-align: center;
}

.shortcut-colum{
	position:relative;
}

.shortcut-delete {
	position:absolute;
	z-index:1;
	top:3px;
	display:none;
	right:3px;
	width:16px;
	height:16px;
	cursor:pointer;
	background:url(../images/false.png) scroll no-repeat 0 0 transparent;
}

.shortcut-colum:hover .shortcut-delete{
	display:block;
}

.spyRaportFooter,
.spyRaportContainer {
	clear:both;
}

.spyRaportContainerRow.first {
	clear:both;
}

.spyRaportContainerHead {
	font-weight:700;
	padding-top:8px;
}
.spyRaportContainerCell {
	float:left;
	width:25%;
}

.spyRaportFooter{
	text-align:center;
	padding-top:8px;
}

table.tablesorter thead {
	position:relative;
}

table.tablesorter thead tr .header {
	cursor: pointer;
}

table.tablesorter thead tr .headerSortUp {
	color:lime;
}

table.tablesorter thead tr .headerSortDown {
	color:red;
} 

.defaultSkin table.mceLayout {
	border-spacing: 0;
	width:100% !important;
}
	
.ui-autocomplete-category {
	font-weight: bold;
	padding: .2em .4em;
	line-height: 1.5;
}

.ui-autocomplete-item {
	cursor:pointer;
}

#overview #planetList td {
    vertical-align: top;
    white-space: nowrap;
}

@media screen and (max-width: 1165px) {
	body {
		min-width: 0;
	}
	
	#resourceTable td{
		min-width: 100px;
	}
}


/* HELPERS */

.mobile{
	display: none;
}

.hamburger {
	cursor: pointer;
	font-size: 48px;
	padding: 0px 8px;
	display: none;
}

/*Hide checkbox*/
#toggle-menu input[type=checkbox]{
	display: none;
}

/* MEDIA */

@media screen and (min-width: 700px) and (max-width: 969px) {
	.planetImage{
		display: none;
	}
	#planetSelector{
		max-width: 120px;
	}

}

@media screen and (max-width: 699px) {
	.wrapper {
		grid-template-columns: 200px 1fr;
		grid-template-rows: 67px 1fr auto;
	}
	top {
		display: none
	}
	logo {
		display: none;
	}
	header {
		grid-column: 1/2;
	}
	header .fixed {
		height: 45px;
		width: 100vw;
		padding: 0;
	}
	content{
		grid-column: 1 / 2;
		grid-row: 2;
		width: 100vw;
		padding: 0;
	}
	.mobile{
		display: initial;
	}
	aside {
		display: none;
	}
	#planetSelector {
		top: 44px;
	}
	menu {
		grid-column: 1;
		grid-row: 2;
	}
	menu .fixed {
		position: unset;
		width: 200px;
	}
	menu li {
		margin: initial;
		border-right: 1px solid black;
	}
	#menu a {
		padding: 16px;
	}
	.planetSelectorWrapper{
		width: initial;
	}
	.planetSelectorWrapper > img{
		width: 42px;
		height: 42px;
	}
	.no-mobile{
		display: none;
	}

	/*Show menu when invisible checkbox is checked*/
	input[type=checkbox]:not(:checked) ~ menu{
		display: none;
	}
	.hamburger{
		display: unset;
	}
	 .buildl img{
		display: none;}
	
	
}