body {
	background-image: url('../img/galaxy.webp');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	/* margin:30px 40px; */
	/* horizontally centered */
	/* display: flex; */
	/* justify-content: center; */
	/* vertically centering */
	/* align-items: center; */
}
input{
	background-color:  rgb(255, 202, 103) !important;
	color:black!important;
}
/* links */
button{
	cursor:pointer;
}
input{background-color:#ffac59;}
a:link {
  color: orange;
  text-decoration: underline;
}
a:visited {
  color: orange;
  text-decoration: underline;
}
a:hover {
  color: yellow;
  text-decoration: underline;
}
a:active {
  color: red;
  text-decoration: underline;
}

.discord_icon{
  color: #FFF8E7;
}
.discord_icon:hover{
  color: #5865F2;
}

#backdrop{
	background:#003f5c;
	padding:5px;
}
@media only screen and (min-width: 1118px) {
.layout{
	display:flex;
	flex-direction: row;
}
}
@media only screen and (min-width:908px) {
.layout2{
	display:flex;
	flex-direction: row;
}
}
@media only screen and (max-width: 1117px){
.layout{
	display:flex;
	flex-direction: column;
}
}
@media only screen and (max-width: 907px){
.layout2{
	display:flex;
	flex-direction: column;
}
}
@media only screen and (max-width: 1207px){
.layout3{
	display:flex;
	flex-direction: column;
}
}
@media only screen and (min-width: 1208px){
.layout3{
	display:flex;
	flex-direction: row;
}
}
@media only screen and (min-width: 893px){
.layout4{
	display:flex;
	flex-direction: row;
}
}
@media only screen and (max-width: 892px){
.layout4{
	display:flex;
	flex-direction: column;
}
}
@media only screen and (min-width: 1170px) {
	.layout5{
	float:right;
	}
}
@media only screen and (max-width: 1169px){
.layout5{
	display:flex;
	flex-direction: column;
}
}
@media only screen and (min-width: 1130px) {
	.layout6{
		display:flex;
	flex-direction: row;
	}
}
@media only screen and (max-width: 1129px){
.layout6{
	display:flex;
	flex-direction: column;
}
}
iframe{
	border: none;
	height: 51px;
	width: 100%;
	display:block;
}
.padded_buttons {
  margin-top: 30px;
}
/* TABLE */
table{
	padding-bottom: 10px;
}
td {
	padding: 0px 2px;
}
th {
	padding: 3px 3px;
}
th{
	text-align: center;
	background-color:#aa4241;
	color: #fff8e7;
	min-width: 20px;
}
table input{
	margin:2px;
	min-width:50px;
	background-color:inherit; /*maybe this should be something that works only on tables*/
	color:black;
}
tr:nth-child(odd) {
	background-color: #ff8531;
}
tr:nth-child(even) {
	background-color: #ffac59;
}
td:nth-child(odd) {
	background-color: #ffb03e;
}
tr:nth-child(odd) input{
	background-color: #FF9855;
	border-color:#ff8531;
}
tr:nth-child(even) input {
	background-color: #FCBB79;
	border-color:#ffac59;
}
/*Breaks input colors in dock*/
/*td:nth-child(odd) input{
	background-color: #FAB653;
	border-color:#ffb03e;
}*/
.modal{
	display: none;
	position: fixed;
	z-index: 1;
	left: 10%;
	top: 10%;
	width: 80%;
	height: 80%;
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
	color: #fff8e7;
}
.horizontal {
	display:flex;
	flex-direction: row;
}
.vertical {
	display:flex;
	flex-direction: column;
}
.align_center {
	text-align: center;
}
.align_left {
	text-align: left;
}
.centered {
	display: flex;
	justify-content: center;
	align-items: center;
}
.centered_ img{
	margin: auto;
	display: block;
}
.no_select {
	user-select: none;
	user-drag: none;
}
.height24 {
	height: 24px;
}
.cursor_pointer {
	cursor: pointer;
}
.mouseover_underline:hover {
	text-decoration: underline;
}
.tt_parent {
	position: relative;
}
.tt_parent:hover .tooltiptext{
	visibility: visible;
	pointer-events:none;
}
.tight {
	width: fit-content;
	box-sizing: border-box;
}
.hidden:not(:focus):not(:active) {
	border-width: 0 !important;
	clip: rect(1px,1px,1px,1px) !important;
	height: 1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	white-space: nowrap !important;
	width: 1px !important;
}
#options button {
	background-color: #ffa31a;
	border: none;
	float: left;
	cursor: pointer;
	padding: 15px 15px;
	font-size: 17px;
	color:#fff8e7;
}
#options label {
	background-color: #ffa31a;
	border: none;
	float: left;
	text-align:center;
	padding: 5px 5px;
	font-size: 17px;
	color:black;
}
#options button:hover{
	background-color: #ffc266;
	border: none;
	float: left;
	cursor: pointer;
	padding: 15px 15px;
	font-size: 17px;
	color:black;
}
#options{
	display:flex;
	flex-direction:column;
}
.tabcontent { 
  padding: 6px 12px;
  border:none;
  background: #00202e; /*rgba(252, 241, 220,0.6)*/
  color:#fff8e7;
}
.dotted{
	text-decoration-line: underline;
	text-decoration-style: dotted; 
}
.dotted:hover{
	text-decoration-color: #aa4241; 
}

.tooltiptext {
  visibility: hidden;
  width: 250px;
  background-color: black;
  color: #fff;
  text-align:left;
  border-radius: 6px;
  padding: 5px 5px;
  /* Position the tooltip */
  position: absolute;
  z-index: 100;
  border:1px dashed #FFF8E7;
}
.tooltiptext::after {
  content: " ";
  position: absolute;
  bottom: 100%; /* At the bottom of the tooltip */
  left: 60%;
  margin-left: -65px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;/*arrow up*/
}

.tabcontent button{
	background-color:#8ecae6;
	font-size: 14px;
	background-image: linear-gradient(#FCBB79,#ffb03e,#ffac59,#ffa31a,#aa4241);
	border-radius: 3px;
	border-top: 2px solid #FBC58A;
	border-left: 3px solid #FBC58A;
	border-bottom: 3px solid #00141D;
	border-right: 2px solid #00141D;
	color:#00141D;
	padding:3px;
}
.tabcontent button:active {
  transform: translateY(3px);
}
::selection {
  background: rgb(0, 191, 255);
}
.nav_help_button{
	background-color:#003f5c !important;
	background-image:none !important;
	border:2px solid rgb(0, 191, 255) !important;
	color:#fff8e7 !important;
	border-radius:30px !important;
	width:20px!important;
	margin-right:10px!important;
	margin-bottom:5px;
}
.inverted_nav_help_button{
	background-color: rgb(0, 191, 255)important;
	background-image:none !important;
	border:2px solid #003f5c!important;
	color:blue!important;
	border-radius:30px !important;
	width:20px!important;
	margin-right:10px!important;
	margin-bottom:5px;
}
.dock_help_button{
	background-color:#bc5090 !important;
	background-image:none !important;
	border:2px solid #8a508f !important;
	color:#fff8e7 !important;
	border-radius:30px !important;
	width:20px!important;
	margin-right:10px!important;
	margin-bottom:5px;
}
.inverted_dock_help_button{
	background-color:#8a508f !important;
	background-image:none !important;
	border:2px solid #bc5090 !important;
	color:#fff8e7 !important;
	border-radius:30px !important;
	width:20px!important;
	margin-right:10px!important;
	margin-bottom:5px;
}
.dock_help_button2{
	background-color:#ffac59 !important;
	background-image:none !important;
	border:2px solid #ff8531 !important;
	color:#fff8e7 !important;
	border-radius:30px !important;
	width:20px!important;
	margin-left:10px!important;
	margin-top:5px;
}
.inverted_dock_help_button2{
	background-color:#ff8531!important;
	background-image:none !important;
	border:2px solid #ffac59 !important;
	color:#fff8e7 !important;
	border-radius:30px !important;
	width:20px!important;
	margin-left:10px!important;
	margin-top:5px;
}
.info{
	color:lightsalmon;
	padding-top:5px;
	padding-bottom:5px;
}
.info_dock{
	color:maroon;
	padding-top:5px;
	padding-bottom:5px;
}
.credit_input{
	width:100px !important;
	max-width:100px !important;
}
.collapse_button{
	background-color: #00202e!important;
	border:2px solid #003f5c !important;

	margin-left:10px;
	margin-top:none;
}
.inverted_collapse_button{
	background-color: #003f5c!important;
	color:#fff8e7 !important;
	border:2px solid #00202e !important;

	margin-left:10px;
	margin-top:none;
}
.tooltip_box{
	border: 1px solid darkblue;
	padding: 5px;
}