* {
	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;
}

/* SPYTHINGS */

.spyRaportContainerRow.doubleSizeCells .spyRaportContainerCell {
	width: 50% !important;
}

/* 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 {
	font-weight: bold;
}

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

.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;
}

.alliance-image {
	max-width: 1024px;
}

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

.unavailable {
	opacity: 0.5;
}

#repairlist {
  display: flex;
  align-items: center;
  justify-content: center;
}
.repaira {
  float: left;
  width: 35%;
  line-height: 1.4;
  padding: 8px;
}
.repairb {
  float: left;
  width: 65%;
  line-height: 1.4;
  padding: 8px;
}
.repairShipHeader {
  border-radius: 15px 15px 0px 0px;
  padding: 6px;
  overflow: auto;
  background: #256b99;
  /* background: #9acd32; */
}
.repairShipHeader a:hover {
  color: #e62cf7;
  font-weight: bold;
}
.repairShipContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #212121;
}
.repairShipContainerContent {
  float: left;
  width: 50%;
  line-height: 1.4;
  padding: 10px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tutorial {
  background-color: #0e754281;
  text-align: center;
  border-radius: 0px 0px 15px 15px;
  padding: 5px 20px 5px 20px;
  overflow: auto;
  height: auto;
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-template-rows: auto auto;
}
.tutorial-header {
  background-color: #032514;
  text-align: center;
  border-radius: 15px 15px 0px 0px;
  margin-top: 10px;
  padding: 5px;
  cursor: pointer;
}
.tutorial-text {
  text-align: left;
  grid-column-start: 1;
  grid-column-end: auto;
  grid-row-start: 1;
  grid-row-end: 1;
}
.tutorial-text a,.tutorial-goals a {
	text-decoration: underline;
}
.tutorial-goals, .tutorial-goals ul {
  text-align: left;
  grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 1;
  padding: 0px 0px 0px 20px;
}
.tutorial-buttons {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 2;
  padding: 10px 0px 0px 0px;
}

/** MESSAGE PAGE */
.message-category-container {
display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); /* Flexible number of columns based on the minimum width of the cells */
	gap: 5px; /* Distance between the elements */
	padding: 10px;
	margin: 0 -5px; /* Negative margin to equalise the distance between the elements */
}
.message-category-header {
	grid-column: 1 / -1; /* Across the entire width */
	text-align: center;
	font-size: 1.2em;
	font-weight: bold;
	margin-bottom: 20px;
}
.message-category-item {
	padding: 10px;
	text-align: center;
	cursor: pointer;
	overflow: hidden;
	word-wrap: break-word;
	background-color: var(--item-bg-color);
	transition: background-color 0.2s;
}
.message-category-item a {
	text-decoration: none;
}
.message-category-item:hover,
.message-category-item.active {
	background-color: var(--item-hover-color); /* Better transparency on hover */
}
.messages-container {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 5px;
}
.message-group {
	display: flex;
	flex-direction: column;
	gap: 0px;
	margin-bottom: 15px;
	padding: 4px;
	border: 1px solid #ccc;
}
.message-item {
	display: flex;
	flex-direction: column;
	border: 1px solid #ccc;
	padding: 10px;
}
.message-item.message-unread {
	background-color: var(--item-bg-color);
}
.message-unread-icon {
	color: red;
	font-weight: bold;
	font-size: larger;
	margin-left: 5px;
}
.message-actions {
	display: flex;
	align-items: center;
	gap: 5px;
}
.message-details {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 5px 0;
}
.message-details>div {
	margin-right: 10px;
}
.message-break {
	flex-basis: 100%;
	height: 0;
	margin-right: 0px;
}
.message-content {
	padding-top: 10px;
}
.message-action-container {
	display: grid;
	grid-template-columns: 1fr;
}
.message-action-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.message-action-bottom {
	display: grid;
	margin-bottom: 10px;
	grid-template-columns: 1fr 1fr 1fr;
}
.message-action-title {
	justify-self: center;
}
.message-action-search {
	margin-bottom:10px;
}
.message-action-select {
	justify-self: end;
	margin-bottom:10px;
}
.message-action-group {
	justify-self: center;
}
.message-action-pages {
	justify-self: end;
}

.search-receiver {
	display: inline-block;
	position: relative;
}
.select-box {
	display: none;
	position: absolute;
	width: 100%;
	background-color: #383838;
	z-index: 1000;
	max-height: 200px;
	overflow: auto;
	top: 25px;
	left: 50px;
	border: 1px solid #0c0c0c;
}
.select-box-option {
	padding: 5px;
	cursor: pointer;
	background-color: #383838;
	transition: background-color 0.2s;
	border-bottom: 1px solid #0c0c0c;
}
.select-box-option:hover {
	background-color: #4d4d4d;
}
.receiver {
	display: inline-block;
	background-color: #383838;
	color: white;
	padding: 5px;
	margin: 3px;
}
#receiver-list {
	margin-left: -3px;
	margin-right: -3px;
}
.receiver span {
	cursor: pointer;
}

/* HELPERS */

.mobile {
	display: none;
}

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

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

/* Galaxy view */
.galaxy-grid-container {
	display: grid;
	grid-template-columns: 35px 1fr 53px 0.8fr 1fr 0.5fr;
}

.galaxy-grid-row {
	display: grid;
	grid-template-columns: subgrid;
	gap: 2px;
	margin-bottom: 2px;
	grid-column: span 8;
}

.galaxy-grid-row.legende {
	grid-template-columns: 1fr auto;
}

.galaxy-grid-row.info {
	grid-template-columns: 1fr 1fr;
}

.galaxy-grid-row.sync {
	grid-template-columns: 1fr 1fr 1fr 3fr;
}

.galaxy-grid-header {
	display: flex;
	align-items: center;
	font-weight: bold;
	text-align: center;
	background: linear-gradient(180deg, rgba(20, 30, 38, 1) 43%, rgb(6 7 8) 100%);
	color: #fff;
	padding: 5px;
}

.galaxy-grid-item {
	display: flex;
	column-gap: 5px;
	align-items: center;
	text-align: center;
	background-color: #0d1014;
	padding: 5px;
}

.galaxy-grid-row.even .galaxy-grid-item {
	background-color: #1e2530;
}

.galaxy-grid-item a {
	display: flex;
	column-gap: 5px;
	align-items: center;
	text-align: center;
}

.galaxy-grid-item img {
	max-width: 100%;
	height: auto;
}

.galaxy-grid-item.centered {
	justify-content: center;
}

.galaxy-grid-item.galaxy-actions {
	display: flex;
	justify-content: flex-start;
	gap: 0.3rem;
	flex-wrap: wrap;
}

.galaxy-grid-item.span2 {
	grid-column: span 2;
}

.galaxy-grid-item.span3 {
	grid-column: span 3;
}

.galaxy-grid-item.span4 {
	grid-column: span 4;
}

.galaxy-grid-item.span5 {
	grid-column: span 5;
}

.galaxy-grid-item.span6 {
	grid-column: span 6;
}

.action-icon {
	width: 20px;
	height: 20px;
	cursor: pointer;
}

/* MEDIA */
@media (max-width: 600px) {
	.message-details {
		flex-direction: column;
	}
}

@media (max-width: 1200px){
  .message-action-inner {
    display: grid;
    grid-template-columns: 1fr;
  }
  .message-action-search {
    justify-self: center;
  }
  .message-action-select {
    justify-self: center;
  }
}

@media screen and (max-width: 1070px) {
	.galaxy-grid-row {
		grid-template-columns: 40px 1fr 40px 40px;
		grid-auto-flow: row;
	}

	.galaxy-grid-row.sync {
		grid-template-columns: 1fr 1fr 1fr;
		grid-auto-flow: row;
	}

	.galaxy-grid-row.sync .upload {
		grid-column: span 3;
	}

	.galaxy-grid-item {
		text-align: left;
	}

	.galaxy-grid-row.header .galaxy-grid-header {
		position: relative;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: transparent;
	}
	
	.galaxy-grid-row.header .galaxy-grid-header::before {
		content: attr(data-small-text);
		visibility: visible;
		position: absolute;
		left: 0;
		right: 0;
		text-align: center;
		color: #fff;
	}

	.galaxy-grid-header.position,
	.galaxy-grid-item.position {
		grid-row: span 2;
	}

	.galaxy-grid-row.empty .position {
		grid-row: span 1;
	}

	.galaxy-planet a img,
	.galaxy-debris a img {
		width: 20px;
		height: 20px;
	}

	.galaxy-player {
		grid-column: span 3;
	}

	.galaxy-grid-row.empty .galaxy-debris {
		grid-column: span 1;
	}

	.galaxy-grid-item.span5 {
		grid-column: span 3;
	}

	.galaxy-grid-header.galaxy-actions,
	.galaxy-grid-item.galaxy-actions {
		display: none;
	}

	.galaxy-debris-text {
		display: none;
	}
}

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

	#planetSelector {
		top: 99px;
	}

	.tutorial {
		display: block;
	}
	.tutorial-goals {
		padding: 10px 0px 0px 0px;
	}
}

@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;
	}

	.alliance-image {
		max-width: 100vw;
	}

	.tutorial {
		display: block;
	}
	.tutorial-goals {
		padding: 10px 0px 0px 0px;
	}
}

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

	#resourceTable td {
		min-width: 100px;
	}
}

.danger {background-color: red; font-weight: bold;}
.lowRess { background-color: indianred;}
.midRess { background-color: chocolate;}
.highRess { background-color: seagreen;}
.realHighRess { background-color: royalblue;}
/* .nonedanger {background-color: green;} */