<style>
body {
  background-color: black;
  color: white;
  background-image: url('/background.jpg');
  background-size: cover;
  font-family: sans-serif;
}
.body {
  background-color: black;
  color: white;
  background-image: url('background.jpg');
  background-size: cover;
  font-family: sans-serif;
}

a { color: #e0e0ff; }
a:active { color: #e0e0ff; }
a:visited { color: #e0e0ff; }

input[type=file] {

  -webkit-appearance: textfield;
  -webkit-box-sizing: border-box;

	box-sizing: 13pt;
	color: #c0ffc0;
	padding: 0px;
	font-size: 8px;
	max-width: 120px;
	size: 26;


}

input {
	background-color:#003000;
	border: 4px solid #003000;
	border-radius: 4px;
	box-sizing: 13pt;
	color: #c0ffc0;
	padding: 0px;
	font-size: 10px;
}


input[type=text] {
	background-color:#003000;
	border: 4px solid #003000;
	border-radius: 4px;
	box-sizing: 13pt;
	color: #c0ffc0;
	padding: 0px;
	font-size: 10px;
}
input[type=password] {
	background-color:#003000;
	border: 4px solid #003000;
	border-radius: 4px;
	box-sizing: 13pt;
	color: #c0ffc0;
	padding: 0px;
	font-size: 10px;
}
input[type=submit] {
	background-color:#003000;
	border: 4px solid #003000;
	border-radius: 4px;
	box-sizing: 13pt;
	color: #c0ffc0;
	padding: 0px;
	font-size: 10px;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #003000 inset!important;

    background-color:#003000;
	color: #c0ffc0;
	padding: 0px;
	font-size: 10px;

}

form {
	padding: 0px;
	margin: 0px;
	display: inline;
	}

.bg-dark1 {
  background-color: #003800;
}

.bg-dark2 {
  background-color: #002000;
}

.bg-dark3 {
  background-color: #001000;
}

.bg-med1 {
  background-color: #006800;
}

.bg-med2 {
  background-color: #005000;
}

.bg-med3 {
  background-color: #004000;
}

.bg-light1 {
  background-color: #00a800;
}

.bg-light2 {
  background-color: #00c000;
}

.bg-light3 {
  background-color: #00d000;
}

#loginpest {
  position: absolute;
  left: 16px;
  top: 3px;
  padding-left: 9px;
  padding-right: 9px;
  padding-bottom: 3px;
  padding-top: 3px;
  width: 95%;
  margin: 0px;
  align-content: left;
  text-align: left;
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: 5px 5px 5px black;
  float: right;
  border-bottom-left-radius: 8pt;
  border-top-left-radius: 8pt;
  border-bottom-right-radius: 8pt;
  border-top-right-radius: 8pt;
  color: white;
  font-size: 10pt;
  z-index: 99;
}

#logo {
  position: absolute;
  top: 40px;
  right: 40px;
}

#newPasswordWidget{

	left: 0px;
	top: 0px;
	padding-left: 9px;
	padding-right: 9px;
	padding-bottom: 3px;
	padding-top: 3px;
	font-size: 1em;
	text-shadow: 1px 1px 4px #000000;
  overflow-x:auto;
	color: white;
	font-size: 12pt;
	margin: 0px;
}

#gridstats {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 18vw;
  height: auto;
  font-size: 1.1vw;
  padding: 10px;
  border-radius: 16px;
  background-color: rgba(0,0,0,0.75);
  color: #ffd0ff;
  width:

}
#destguide {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 195px;
  padding: 0px;
  border-radius: 2px;
  background-color: rgba(0,0,0,1.0);
  color: #ffd0ff;

}

#middleContent {
	position: absolute;
	left: 40px;
	top: 200px;
	color: white;
	font-size: 14pt;
  padding: 10px;
  border-radius: 16px;
  background-color: rgba(0,0,0,0.5);
}

#bottomRight{
  position: absolute;
  right: 10px;
  top: 10px;
  width: 24vw;
  min-width: 24vw;
  max-width: 24vw;
  height: auto;
  margin: 0px;
  padding: 10px;
  border-radius: 16px;
  background-color: rgba(0,0,0,0.5);
  color: #ffd0ff;

}
#bottomLeft{
  position: absolute;
  left: 0px;
  bottom: 40px;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  max-height: 170px;
  margin: 0px;
  padding: 0px;

  color: #ffd0ff;

}

#copyLeft{
  position: absolute;
  left: 10px;
  bottom: 0px;
  width: 97%;
  min-width: 97%;
  max-width: 97%;
  height: auto;
  margin: 0px;
  padding: 5px;
  border-radius: 16px;
  background-color: rgba(40,0,40,0.75);
  color: white;
}



input {
  width: 64px;
  font-size: 8pt;
  border-radius: 4px;
  background-color: black;
  color: green;
}

hr {
  border: 0;
   height: 1px;
   background-image: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
   margin-top: 6px;
   margin-bottom: 6px;
  }
.hrcool {
  border: 0;
   height: 1px;
   background-image: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
   margin-top: 6px;
   margin-bottom: 6px;

    }
form {
  display:inline;
  margin:0px;
  padding:0px;
}

button {
  border-radius: 8px;
  background-color: #006000;
  color: white;
  text-shadow: 1px 1px 3px black;
  margin: 4px;
  padding: 3px;
  padding-left: 6px;
  padding-right: 6px;
  font-size: 14pt;
}

.button-smaller {
  border-radius: 8px;
  background-color: #006000;
  color: white;
  text-shadow: 1px 1px 3px black;
  margin: 3px;
  padding: 2px;
  padding-left: 3px;
  padding-right: 3px;
  font-size: 11pt;
}



#topspacer { min-height: 30px; }

.regionMapThumb {
  float: left;
  width: 90px;
  height: 90px;
  max-width: 90px;
  max-height: 90px;
  min-width: 90px;
  min-height: 90px;
  font-size: 10pt;
  text-shadow: 1px 1px 3px black;
  overflow: none;
  padding: 4px;
  margin: 4px;
  border-radius: 8px;
}

#regions {
  background-color: rgba(0,0,0,0.75);
  border-radius: 12px;
  padding: 6px;
  color: white;
  font-size: 9pt;
  margin-top: 20px;
  height: 340px;
  max-height: 340px;
  overflow-x: none;
  overflow-y: scroll;
}

#bigScaryOld {
	position: absolute;
	width: 880px;
	height: 550px;
	width: 880px;
	min-height: 550px;
	min-width: 880px;
	max-height: 550px;
	max:width: 880px;
	padding: 6px;
	border-radius: 12px;
	background-color: #003000;
	box-shadow: 5px 5px 5px black;
	color: white;
	z-index: 90;
	display: none;
	top: calc(50% - 225px);
	left: calc(50% - 440px);

}
#bigScary {
	position: absolute;
	width: 100%;
	height: 100%;
	width: 100%;
	min-height: 100%;
	min-width: 100%;
	max-height: 100%;
	max:width: 100%;
	padding: 6px;
	border-radius: 12px;
	background-color: #003000;
	box-shadow: 5px 5px 5px black;
	color: white;
	z-index: 90;
	display: none;
	top: calc(50% - 225px);
	left: calc(50% - 440px);

}

#bigScary iframe {
	width: 100%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	max-width: 100%;
	max-height: 100%;
	border-style: none;
	padding: 3px;
	margin: 0px;
}
#leftBlock {
		float: left;
		width: 210px;
		min-width: 210px;
		background-color: rgba(40,0,40,0.5);
		border-radius: 16px;
		padding: 8px;
    margin: 8px;
		color: white;
		font-size: 12pt;
	}
  #leftBlock img {
  	width: 200px;
  	height: 120px;
  	float: left;
  	margin: 10px;
  	border-radius: 8px;

  }

#rightBlock{
	float: left;
	width: available;


}

.genericContent {
	color: white;
	font-size: 14pt;
  padding: 10px;
  border-radius: 16px;
  background-color: rgba(0,0,0,0.75);
  width: auto;
  height: auto;
}

#needtologin {
  position: absolute;
  right: calc(50% - 300px);
  top: calc(50% - 150px);
  min-width: 600px;
  min-height: 300px;
  max-width: 600px;

  max-height: 200px;
  padding: 9px;
  background-color: #002000;
  background-opacity: 0.3;
  border-bottom-left-radius: 18pt;
  border-top-left-radius: 18pt;
  border-bottom-right-radius: 18pt;
  border-top-right-radius: 18pt;
  color: white;
  font-size: 18pt;
  text-shadow: 2px 2px 5px #000000;
  box-shadow: 3px 3px 8px #000000;
  overflow: hidden;
}

.needtologin2 {
  color: white;
  font-size: 18pt;

}

.needtologin2 table {
  color: white;
  font-size: 18pt;

}

.needtologin2 input {
  color: white;
  font-size: 18pt;
  width: auto;

}

.needtologin2 button {
  color: white;
  font-size: 16pt;

}

::-webkit-file-upload-button {
	background-color:#003000;
	border: 4px solid #003000;
	border-radius: 4px;
	box-sizing: 13pt;
	color: #c0ffc0;
	padding: 0px;
	font-size: 10px;
	display: inline;
}

#usersonline {
	width: 100%;
	overflow-x: none;
	color: white;

}
#usersonlineEntry {
	display: inline-block;
	width: 120px;
	height: 100px;
	min-width: 120px;
	min-height: 100px;
	color: #d0d040;
	border-radius: 16px;
	background-color: rgba(0,30,0,0.6);
  background-image: url('/img/noprofile.jpg');
	padding-left: 5px;
	padding-right: 5px;
	margin-top: 4px;
	text-shadow: 3px 3px 3px black;

}
#usersonlineProfieName {
	color: white;
	text-shadow: 3px 3px 3px black;
	background-color: rgba(0,30,0,0.6);
	border-radius: 8px;
	padding: 3px;
	margin: -6px;
	font-size: 9pt;
}
#usersonlineRegionName {
	float: right;
	color: white;
	text-shadow: 3px 3px 3px black;
	background-color: rgba(0,30,0,0.6);
	border-radius: 8px;
	padding: 3px;
	margin: -6px;
	margin-top: 2px;
	font-size: 9pt;

}

#friendsOnline {
	float: right;
	border-radius: 16px;
	box-shadow: 5px 5px 5px black;
	width: 100%;
	height: 110px;
	overflow-y: none;
	overflow-x: scroll;
}

a { cursor: pointer; }
button {
  cursor: pointer;


border: 1px solid #ffffff;
border-radius: 1vw;
box-shadow: 5px 5px 5px black;b8cac5e1-9a8c-4f42-b3eb-e63c57f7a166
text-shadow: 1px 1px 5px black;
background: rgb(2,0,36);
background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);

color: #c0ffc0;
padding: 0.5vw;

font-size: 1.4vw;
}

a {cursor: pointer; color: #e0e0c0; text-decoration: none;}
a:visited {cursor: pointer; color: #e0e0c0; text-decoration: none;}
a:active {cursor: pointer; color: #ffffff; text-decoration: none;}

a {cursor: pointer; color: #e0e0c0; text-decoration: none;}
a:visited {cursor: pointer; color: #e0e0c0; text-decoration: none;}
a:active {cursor: pointer; color: #ffffff; text-decoration: none;}
input {
  cursor: pointer;


border: 1px solid #ffffff;
border-radius: 1vw;
box-shadow: 5px 5px 5px black;
text-shadow: 1px 1px 5px black;
background: rgb(2,0,36);
background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);


color: #c0ffc0;
padding: 0.5vw;
padding-top: 2px;
padding-bottom: 2px;


font-size: 1em;
width: max-content;
min-width: max-content;
}

a {cursor: pointer; color: #e0e0c0; text-decoration: none;}
a:visited {cursor: pointer; color: #e0e0c0; text-decoration: none;}
a:active {cursor: pointer; color: #ffffff; text-decoration: none;}


select {
  cursor: pointer;


border: 1px solid #ffffff;
border-radius: 1vw;
box-shadow: 5px 5px 5px black;
text-shadow: 1px 1px 5px black;
background-color: #000020;
color: #c0ffc0;
padding: 0.5vw;
padding-top: 2px;
padding-bottom: 2px;


font-size: 1em;
width: max-content;
min-width: max-content;
}

input[type=submit] {
  cursor: pointer;


border: 1px solid #ffffff;
border-radius: 1vw;
box-shadow: 5px 5px 5px black;
text-shadow: 1px 1px 5px black;
background: rgb(2,0,36);
background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);


color: #c0ffc0;
padding: 0.5vw;
padding-top: 2px;
padding-bottom: 2px;


font-size: 1em;
width: max-content;
min-width: max-content;
}


</style>
