@import 'https://fonts.googleapis.com/css?family=Press+Start+2P';
html {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
body{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	font-family: 'Press Start 2P', cursive;
}
/*::-webkit-scrollbar {*/
/*    width: 12px;*/
/*}*/
 
/*::-webkit-scrollbar-track {*/
/*    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); */
/*    border-radius: 10px;*/
/*}*/
 
/*::-webkit-scrollbar-thumb {*/
/*    border-radius: 10px;*/
/*    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); */
/*}*/
ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
.canvasBG {
	background-color: #339933;
}
.opac {
	background-color: rgba(0,0,0,.4);
}
.opac2 {
	background-color: rgba(0,0,0,.5);
}
.opac3 {
	background-color: rgba(0,0,0,.6);
}
.opacHov:hover {
	background-color: rgba(0,0,0,.5);
}
.smooth {
	border-radius: 10px;
}
.smooth-tr-bl {
	border-top-right-radius: 10px;
	border-bottom-left-radius: 10px;
}
.hidden {
	display: none;
}
.w50 {
	width: 50%;
}
.hrLeft {
	border-left: 1px solid #e3e3e3;
}
.hrRight {
	border-right: 1px solid #e3e3e3;
}
.center {
	text-align: center;
	margin: 0 auto;
}
.bottom-ui {
	position: absolute;
	bottom: 20px;
	right: 20px;
	left: 20px;
	border-radius: 10px;
}
.bottom-ui-row {
	position: absolute;
	top: calc(100% - 30px);
	left: 50%;
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.top-ui {
	position: absolute;
	top: 20px;
	right: 20px;
	left: 20px;
	border-radius: 10px;
}
.top-ui-row {
	position: absolute;
	bottom: calc(100% - 75px);
	left: 50%;
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.mid-ui {
	position: absolute;
	top: 50%;
	left: 50%;
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	border-radius: 10px;
}
.left-side {
	float: left;
}
.right-side {
	float: right;
}
.ui-select-item {
	display: inline-block;
	width: 40px;
	height: 40px;
	padding: 10px;
	margin: 0 5px;
	cursor: pointer;
}
.block-preview {
	width: 38px;
	height: 38px;
	border: 1px solid #000;
}
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
.rm {
	color: lightgrey;
	padding: 10px;
	min-width: 220px;
	cursor: default;
}
.rm-heading {
	color: #fff;
	font-size: 16px;
	text-decoration: underline;
}
.resource-item {
	font-size: 16px;
	width: 100%;
	margin: 0 auto;
	margin-top: 10px;
}
.resource-count {
	float: right;
	color: #fff;
}
.inv {
	margin: 20px;
	width: 600px;
	height: 450px;
	text-align: center;
}
.crafting-preview {
	border: 6px solid #111;
	margin-left: 10px;
	margin-top: 10px;
}
.inv-heading {
	font-size: 22px;
	color: #fff;
	display: block;
	text-decoration: underline;
}
.inv-content {
	padding: 10px;
}
.craft-list {
	padding: 10px 0;
	margin-right: 10px;
	max-height: 400px;
	overflow: auto;
}
.craft-item {
	color: #33de66;
	font-size: 14px;
	background: #333;
	padding: 10px;
	margin-bottom: 5px;
	cursor: pointer;
}
.craft-item:hover {
	background: #222;
}
.inv-items-wrap {
	margin-top: 20px;
}
.inv-item {
	position: relative;
	display: inline-block;
	width: 110px;
	height: 110px;
	margin: 5px;
	text-align: center;
	cursor: pointer;
}
.inv-item-img {
	width: 80%;
	height: 80%;
}
.inv-item-name {
	font-size: 12px;
}
.inv-item-count {
	position: absolute;
	top: 0;
	right: 0;
	padding: 5px;
	font-size: 14px;
	z-index: 10;
	color: #fff;
}
.up-btn {
	font-size: 14px;
	cursor: pointer;
	border-radius: 10px;
	background-color: rgba(0,0,0,0.2);
	text-align: center;
	padding: 5px;
}
.up-btn:hover {
	background-color: rgba(0,0,0,0.4);
}
.up-heading {
	margin-bottom: 5px;
}
.up-cost {
	font-size: 12px;
}
.progress-bar {
	width: 600px;
	height: 25px;
	border-radius: 5px;
	overflow: hidden;
	border: 2px solid #333;
}
.pb-inside {
	width: 3%;
	height: 25px;
	background-color: brown;
	transition: width 0.5s ease;
}
.pb-text {
	margin-top: 5px;
}
#homePage {
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: url("/img/drillgame-ss-2.png");
	background-color: #607D8B;
}
.mat-shadow {
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.home-main-module {
	position: absolute;
	top: 45%;
	left: 50%;
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center;
}
.home-sub-module {
	border: 3px solid #000;
	border-radius: 4px;
	width: 1000px;
	padding: 30px 20px;
	background-color: rgba(0,0,0,0.4);
}
.home-title {
	margin: 10px auto;
	text-align: center;
	color: #fff;
	font-size: 37px;
	margin-top: 15px;
	text-shadow: 1px 1px 3px #000;
}
.home-sub-title {
	color: #fff;
	text-shadow: 1px 1px 3px #000;
	font-size: 15px;
}
.home-panel {
	background-color: rgba(0,0,0,0.5);
	margin: 0 auto;
	margin-top: 30px;
	width: 300px;
	height: 250px;
	padding: 10px;
	border-radius: 5px;
	display: inline-block;
	vertical-align: top;
}
.leaderboard-panel {
	margin-top: 15px;
	margin-bottom: 20px;
	width: 970px;
	height: 90px;
}
.nickname-box {
	margin-top: 10px;
	border: none;
	padding: 0 10px;
	border-radius: 4px;
	width: 200px;
	height: 50px;
}
.server-select {
	border: none;
	margin-top: 15px;
	width: 220px;
	height: 50px;
	border-radius: 4px;
	text-indent: 10px;
}
.play-button {
	border: none;
	margin-top: 15px;
	width: 220px;
	height: 50px;
	border-radius: 4px;
	color: #fff;
	background-color: #558B2F;
	cursor: pointer;
	transition: all ease 0.3s;
	font-size: 16px;
	text-shadow: 1px 1px 3px #333;
}
.play-button:hover {
	background-color: #8BC34A;
	text-shadow: 1px 1px 2px #000;
}
.home-half-btn {
	display:block;
	margin-top: 13px;
	border-radius: 4px;
	color: #fff;
	cursor: pointer;
	transition: all ease 0.3s;
	font-size: 16px;
	text-shadow: 1px 1px 3px #333;
	font-family: sans-serif;
	font-size: 16px;
	text-decoration: none;
	display: inline-block;
	margin-left: 5px;
	margin-right: 5px;
	vertical-align: top;
}
.iogames-btn {
	width: 80px;
	padding: 10px 20px;
	border: 1px solid #00caff;
	background-color: #21242C;
	font-size: 14px;
}
.discord-btn {
	border: 2px solid #7289DA;
	background-color: #fff;
	height: 36px;
	overflow: hidden;
}
.discord-img {
	width: 110px;
}
.flow-border {
	border: 3px solid transparent;
	animation: colorchange 5s; /* animation-name followed by duration in seconds*/
	 /* you could also use milliseconds (ms) or something like 2.5s */
	-webkit-animation: colorchange 5s; /* Chrome and Safari */
	-moz-animation: colorchange 5s; /* Chrome and Safari */
	animation-name: colorchange;
	animation-delay: 0;
	animation-iteration-count: infinite;
	animation-direction: normal;
	-webkit-animation-name: colorchange;
	-webkit-animation-delay: 0;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: normal;
	-moz-animation-name: colorchange;
	-moz-animation-delay: 0;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: normal;
}
@keyframes colorchange {
	0%   {border-color: #FB8C00;}
	20%  {border-color: #FFEB3B;}
	40%  {border-color: #4CAF50;}
	60%  {border-color: #3F51B5;}
	80% {border-color: #AB47BC;}
	100%   {border-color: #FB8C00;}
}
@-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */{
	0%   {border-color: #FB8C00;}
	20%  {border-color: #FFEB3B;}
	40%  {border-color: #4CAF50;}
	60%  {border-color: #3F51B5;}
	80% {border-color: #AB47BC;}
	100%   {border-color: #FB8C00;}
}
.home-message {
	width: 100%;
	height: 100px;
	text-align: center;
	font-size: 40px;
	color: orange;
}
.GOtry-again {
	font-size: 13px;
	color: white;
	margin-bottom: 0;
	text-shadow: 1px 1px 3px #000;
}
.GOtry-again-2 {
	color: white;
	font-size: 16px;
}
#respawnBTN {
	margin-top: 20px;
}
.final-score-box {
	padding: 10px;
	background-color: rgba(0,0,0,0.3);
	border-radius: 5px;
	margin: 5px auto;
	width: 180px;
	margin-top: 15px;
}
.final-score-box .GOtry-again {
	margin: 5px auto;
}
.fake-rect-ad {
	width: 298px;
	height: 248px;
	border: 1px solid #fff;
	background-color: rgba(255,255,255,0.3);
}
.fake-leaderboard-ad {
	width: 726px;
	height: 88px;
	border: 1px solid #fff;
	background-color: rgba(255,255,255,0.3);
	margin: 0 auto;
}
.home-info-panel {
	color: #fff;
}
.home-info-panel h3 {
	text-decoration: underline;
}
.home-info-panel p {
	font-family: sans-serif;
	text-align: left;
	margin: 15px 5px;
	border-left: 3px solid #00caff;
	padding-left: 10px;
	border-radius: 3px;
}
.info-highlight {
	/*text-decoration: underline;*/
	color: #00caff;
}
.pulse-button {
  position: relative;
  box-shadow: 0 0 0 0 #8BC34A;
  -webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
}
.pulse-button:hover {
  -webkit-animation: none;-moz-animation: none;-ms-animation: none;animation: none;
}
@-webkit-keyframes pulse {to {box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);}}
@-moz-keyframes pulse {to {box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);}}
@-ms-keyframes pulse {to {box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);}}
@keyframes pulse {to {box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);}}

#chatBox {
	display: none;
	position: absolute;
	top: calc(100% - 200px);
	left: 50%;
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	padding: 10px 30px;
	border-radius: 10px;
	background-color: rgba(0,0,0,0.4);
	font-size: 25px;
	width: 300px;
	color: #fff;
	pointer-events: none;
	outline: none;
}
#chatBox:focus {
	outline: none;
}