html, body {
	background-color: #000000;
	overflow: hidden;
	padding: 0px;
	margin: 0px;
}

input, textarea {
	/* Fix user select in Safari */
	-webkit-user-select: text;
	-khtml-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
}

@font-face {
	font-family: 'GameFont';
	src: url("/css/fonts/font2.ttf");
}

@font-face {
	font-family: 'HeaderFont';
	src: url("/css/fonts/header.ttf");
}

#pre-content-container {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 100%;
	background: rgba(0, 0, 0, 0.8);
	z-index: 999999;
	pointer-events: all;
}

#pre-content-player {
	position: absolute;
	width: 640px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	pointer-events: all;
}

#uiBase {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;  /* For scaling */
    pointer-events: none;
}

input {
	pointer-events: all;
}

.g-recaptcha {
	display: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance:textfield;
}

#consentBlock {
	display: none;
	text-align: center;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 99999999999;
	background-color: rgba(0, 0, 0, 0.8);
	pointer-events: all;
}

#consentShake {
	height: 100%;
}

#consentWindow {
	top: 40%;
	transform: translateY(-60%);
	left: 50%;
	transform: translateX(-50%);
	position: absolute;
	background-color: #fff;
	padding: 10px;
}

.termsBtn {
	display: inline-block;
	margin-top: 10px;
	padding: 6px;
	padding-left: 30px;
	padding-right: 30px;
	margin-left: 5px;
	margin-right: 5px;
	font-size: 22px;
	color: #fff;
	cursor: pointer;
}
.termsBtn:hover {
	opacity: 0.7;
}

#streamContainer {
	z-index: 20;
	position: absolute;
	right: 14px;
	top: 76px;
	text-align: right;
	font-size: 16px;
	color: rgba(255, 255, 255, 0.4);
}
.streamItem {
	margin-top: 0px;
}
.streamName {
	color: #fff;
	font-size: 16px;
	display: inline-block
}
.strmIcn {
	display: inline-block;
	width: 42px;
	height: 42px;
	margin-left: 10px;
}
.strmViews {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.4);
}

.menuTab {
	font-size: 22px;
	padding: 5px;
	padding-left: 15px;
	padding-right: 14px;
	color: #ffffff;
	background-color: rgba(0, 0, 0, 0.45);
	cursor: pointer;
	display: inline-block;
	margin-right: 12px;
	border-radius: 10px;
}
.tabA {
	background-color: rgba(0, 0, 0, 0.7) !important;
	cursor: default !important;
}
.menuTab:hover {
	background-color: rgba(0, 0, 0, 0.35);
}
.menuLink {
	font-size: 22px;
	pointer-events: auto;
}
a {
	cursor: pointer;
	text-shadow: none;
	color: #2196F3;
	text-decoration: none;
    pointer-events: all;
}
a:active {
    color: #2196F3;
}
a:visited {
    color: #2196F3;
}
a:hover {
	text-decoration: underline;
}

.grey {
	color: rgba(0,0,0,0.5);
}
.grey:active {
    color: rgba(0,0,0,0.5);
}
.grey:visited {
    color: rgba(0,0,0,0.5);
}

.red {
	color: rgba(255,0,0,0.5);
}
.red:active {
    color: rgba(255,0,0,0.5);
}
.red:visited {
    color: rgba(255,0,0,0.5);
}

.error {
	color: #f22121;
}
.black {
	background-color :#000000;
}

* {
	outline: none;
	font-family: 'GameFont';
	color: #353535;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
	user-select: none;
}

#teamSelector {
	display: none;
	position: absolute;
	bottom: 210px;
	left: 50%;
	transform: translate(-50%, 0);
	color: #fff;
}
.centSwitch {
	float: none !important;
	vertical-align: top !important;
	margin-right: 10px;
	margin-top: 5px;
}
.teamNm {
	color: rgba(255, 255, 255, 0.5);
}
.sliderCent {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #a8a8a8;
	-webkit-transition: .2s;
	transition: .2s;
	border-radius: 34px;
	pointer-events: all;
}
.sliderCent:before {
	position: absolute;
	content: "";
	height: 13px;
	width: 13px;
	left: 2px;
	bottom: 2px;
	background-color: white;
	-webkit-transition: .2s;
	transition: .2s;
	border-radius: 50%;
}
input:checked + .sliderCent:before {
  	-webkit-transform: translateX(13px);
  	-ms-transform: translateX(13px);
  	transform: translateX(13px);
}

#purchaseHolder {
	display: none;
	z-index: 100000;
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	pointer-events: all;
}
#purchaseSelector {
	position: absolute;
	display: inline-block;
	padding: 10px;
	padding-left: 20px;
	padding-right: 20px;
	font-size: 28px;
	background-color: #fff;
	-webkit-box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.5);
	top: 30%;
	transform: translateY(-70%);
	left: 50%;
	transform: translateX(-50%);
}
#paypal-button {
	margin-top: 10px;
	display: inline-block;
	vertical-align: bottom;
	margin-bottom: -5px;
}

#errorNotification {
	position: absolute;
	z-index: 999;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	background: white;
	padding: 20px;
	box-shadow: 0px 9px 0px 0px #a6a6a6
}

.UIB {
	padding: 0px;
	padding-left: 10px;
	padding-right: 10px;
	background-color: rgba(0, 0, 0, 0.3);
}
.leftUIB {
	padding: 0px;
	padding-left: 10px;
	padding-right: 10px;
	background-color: rgba(0, 0, 0, 0.3);
	/* background: -moz-linear-gradient(left, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0) 100%);
	background: -webkit-linear-gradient(left, rgba(0,0,0,0.3) 60%,rgba(0,0,0,0) 100%);
	background: linear-gradient(to right, rgba(0,0,0,0.3) 60%,rgba(0,0,0,0) 100%); */
}
.rightUIB {
	padding: 0px;
	padding-left: 10px;
	padding-right: 10px;
	background-color: rgba(0, 0, 0, 0.3);
	background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 40%);
	background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 40%);
	background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 40%);
}
.centerUIB {
	padding: 0px;
	padding-left: 10px;
	padding-right: 10px;
	line-height: 100px;
	background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0) 100%);
	background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 40%,rgba(0,0,0,0.3) 60%,rgba(0,0,0,0) 100%);
	background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 40%,rgba(0,0,0,0.3) 60%,rgba(0,0,0,0) 100%);
}

#menuHolder {
	z-index: 10;
	pointer-events: none;
	position: absolute;
	width: 100%;
	height: 100%;
}

#overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
	background-color: rgba(200, 200, 255, 0.03);
}

#blocker {
	pointer-events: none;
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #000000;
}

#gameUI {
	pointer-events: none;
	position: absolute;
	width: 100%;
	height: 100%;
	text-align: center;
	z-index: 1;
}

#playerInfos {
	z-index: 2;
	transform: translateZ(0);
	overflow: hidden;
	position: absolute;
	width: 100%;
	height: 100%;
}
.playerInfo {
	white-space: nowrap;
	margin: 0;
	line-height: 0;
	text-align: center;
	position: absolute;
	vertical-align: top;
	color: #fff;

	-webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);
}
.playerInfo > * {
	transform: translateZ(0);  /* This enables GPU rendering to fix the the Safari rendering glitch */
}
.pInfoN {
	color: #fff;
	line-height: 0;
}
.pInfoH {
	text-align: left;
	color: #fff;
	display: inline-block;
}
.playerRank {
	display: inline-block;
	color: #fff;
}
.rnkIcon {
	width: 22px;
	height: 22px;
	margin-right: 10px;
}
.pLevel {
	line-height: 0;
	font-size: 30px;
	background-color: rgba(0, 0, 0, 0.2);
	padding: 5px;
}

.playerHealth {
	display: inline-block;
	margin: 0;
	text-align: left;
	background-color: rgba(0, 0, 0, 0.6);
}

.xpBar {
	margin-top: 5px;
	margin-bottom: 5px;
	width: 97.5%;
	height: 12px;
	padding: 6px;
	background-color: rgba(0, 0, 0, 0.3);
	border-radius: 8px;
}
.xpBarB {
	height: 100%;
	background-color: #fff;
	border-radius: 4px;
}

.healthBar, .healthBarE {
	height: 100%;
	width: 100%;
	margin: 0;
	background-color: #9eeb56;
}
.healthBarE {
	background-color: #eb5656;
}

#nukeFlash {
	display: none;
	position: absolute;
	background-color: #fff;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

#flashOverlay {
	display: none;
	pointer-events: none;
	will-change: transform, opacity;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 160%;
	transform: translate(-50%, -50%);
}

#bloodDisplay {
	pointer-events: none;
	display: none;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
    height: 100%;
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;
	image-rendering: crisp-edges;
}

#hitHolder {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
	width: 500px;
	height: 500px;
}

.hitInd {
	position: absolute;
	width: 100%;
	height: 83px;
	top: 50%;
	background: -moz-linear-gradient(left, rgba(0,0,0,0) 85%, rgba(255,63,63,0.8) 85%, rgba(0,0,0,0) 100%);
	background: -webkit-linear-gradient(left, rgba(0,0,0,0) 85%,rgba(255,63,63,0.8) 85%, rgba(0,0,0,0) 100%);
	background: linear-gradient(to right, rgba(0,0,0,0) 85%,rgba(255,63,63,0.8) 85%, rgba(0,0,0,0) 100%);
	will-change: transform;
	transform: translateZ(0);
}

#aimDot {
	opacity: 0;
	width: 20px;
	height: 20px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#aimRecticle {
	opacity: 0;
	z-index: 1;
	pointer-events: none;
	position: absolute;
	width: 100%;
	height: 100%;
}
.topBox {
	position: absolute;
	top: calc(50% + 339px);
	bottom: 0;
	left: 0;
	right: 0;
}
.bottomBox {
	position: absolute;
	top: 0;
	bottom: calc(50% + 339px);
	left: 0;
	right: 0;
}
.leftBox {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: calc(50% + 339px);
}
.rightBox {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% + 339px);
	right: 0;
}

#hitmarker {
	z-index: 6;
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
	will-change: transform;
}

#recticleImg {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
	height: 680px;
	width: 680px;
}

#killCardHolder {
	position: absolute;
	bottom: 20px;
	width: 100%;
	text-align: center;
	color: #fff;
	font-size: 25px;
	line-height: 50px;
}

.isQueued #killCardHolder {
	bottom: 75px;
}

#killCard {
	display: inline-block;
	padding: 10px;
	width: 450px;
	background-color: rgba(0, 0, 0, 0.2);
}

#kCProfile {
	float: left;
	width: 70px;
	height: 70px;
	background-color: rgba(0, 0, 0, 0.1);
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;
	image-rendering: crisp-edges;
}

#kCName {
	float: left;
	margin-left: 10px;
	color: #fff;
	font-size: 23px;
	line-height: 36px;
}

#kCInfo {
	float: left;
	margin-left: 10px;
	color: rgba(255,255,255,0.7);
	line-height: 8px;
	font-size: 18px;
}

#kCInfoS {
	color: #ffea78;
}

#inGameUI {
	width: 100%;
	height: 100%;
	display: none;
}

#chalDisplay {
	z-index: 5;
	position: absolute;
	top: 40px;
	width: 100%;
	text-align: center;
}

#chalName {
	text-transform: uppercase;
	display: none;
	color: #fff;
	font-size: 80px;
	width: 400px;
	padding-left: 40px;
	padding-right: 40px;
	overflow: visible;
	white-space: nowrap;
	line-height: 120px;
	will-change: transform;
	transform: translateZ(0);
}

.cTxt {
	margin-left: -100%;
    margin-right: -100%;
    text-align: center;
	color: #fff;
	z-index: 6;
}

#chalScore {
	line-height: 20px;
	font-size: 34px;
	margin-top: 0px;
	padding-bottom: 26px;
	color: #ffea78;
}

#topRight {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 10;
	text-align: right;
}

#killStreakHolder {
	vertical-align: bottom;
	display: inline-block;
	margin-right: 20px;
	margin-bottom: -4px;
}

.killStreakItem {
	display: inline-block;
	background-size: contain;
	margin-left: 10px;
	width: 70px;
	height: 70px;
	background-color: rgba(0, 0, 0, 0.25);
}

.killStreakItem > span {
	vertical-align: bottom;
	float: left;
	padding-left: 10px;
	margin-top: 42px;
	color: #fff;
	font-size: 12px;
}

#leaderDisplay {
	text-align: left;
	float: right;
	width: 310px;
	z-index: 3;
	padding: 10px;
	padding-left: 20px;
	padding-right: 20px;
	color: rgba(255, 255, 255, 0.7);
	font-size: 23px;
	background-color: rgba(0, 0, 0, 0.2);
	border-radius: 10px;
}
#leaderContainer {
	text-align: left;
	color: #fff;
}

.leaderItem {
	display: flex;
	font-size: 18px;
}
.leaderCounter {
    margin-right: 8px;
    width: 20px;
	color: rgba(255, 255, 255, 0.7);
}
.leaderName, .leaderNameM, .leaderNameF {
	color: #eb5656;
	flex-grow: 1;
	padding-left: 5px;
	overflow: hidden;
    white-space: nowrap;
}
.leaderNameF {
	color: rgba(255, 255, 255, 0.6);
}
.leaderNameM {
	color: #fff;
}
.leaderScore {
    margin-left: 8px;
	text-align: right;
	color: rgba(255, 255, 255, 0.7);
}

.countIcon {
	color: rgba(255, 255, 255, 0.6);
	display: inline-block;
	margin-top: 20px;
	background-color: rgba(0, 0, 0, 0.2);
	padding: 10px;
	font-size: 26px;
	padding-right: 20px;
	padding-left: 14px;
	border-radius: 10px;
}
#killCount, #deathCount {
	margin-left: 10px;
	margin-top: 20px;
	background-color: rgba(0, 0, 0, 0.2);
	padding: 10px;
	display: inline-block;
	font-size: 26px;
	padding-right: 20px;
	padding-left: 14px;
	border-radius: 10px;
}
#killsVal, #deathsVal {
	color: rgba(255, 255, 255, 0.7);
}
#killsIcon, #deathsIcon {
	width: 38px;
	height: 38px;
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;
	image-rendering: crisp-edges;
}

.voiceSpeaker {
	font-size: 20px;
	color: #fff;
}
#recTimer {
	font-size: 20px;
	color: #fff;
	vertical-align: top;
}
#speakerDisplay {
	position: absolute;
	top: 20px;
	right: 400px;
	z-index: 0;
}
#voiceDisplay {
	opacity: 0.5;
	z-index: 2;
	position: absolute;
	bottom: 18px;
	left: 300px;
}
#uiBase.onMenu #voiceDisplay {
	left: 430px;
}
#chatHolder {
	position: absolute;
	z-index: 1000;
	width: 280px;
	bottom: 20px;
	left: 20px;
}
#uiBase.onMenu #chatHolder {
	left: 150px;
}
#chatInput {
	width: 100%;
    padding: 5px;
	padding-left: 10px;
	color: #fff;
	font-size: 18px;
    box-sizing: border-box;
	border: none;
	background-color: rgba(0, 0, 0, 0.4);
	border-radius: 6px;
	pointer-events: all;
}
#chatInput::placeholder {
    color: rgba(255, 255, 255, 0.7)
}
#chatList {

}
.chatItem {
	max-width: 280px;
	word-wrap: break-word;
	display: inline-block;
	margin-bottom: 10px;
	padding: 5px;
	padding-left: 10px;
	padding-right: 10px;
	border-radius: 4px;
	color: #fff;
	font-size: 14px;
	background-color: rgba(0, 0, 0, 0.2);
}
.chatMsg {
	color: rgba(255, 255, 255, 0.7);
}

.serverPCount, .serverRegion {
	float: right;
	display: inline-block;
}

#serverSearch {
	float: right;
	width: 200px;
	text-align: right;
	font-size: 20px;
    box-sizing: border-box;
	border: none;
   	border-bottom: 3px solid rgba(0, 0, 0, 0.3);
}

#gameMessage {
	width: 100%;
	text-align: center;
	position: absolute;
	top: 15px;
	color: #fff;
	z-index: 10;
	font-size: 25px;
}

#timerDisplay {
	text-align: left;
	z-index: 3;
	padding: 10px;
	padding-right: 20px;
	margin-right: 10px;
	margin-bottom: 10px;
	will-change: transform;
	transform: translateZ(0);
	border-radius: 10px;
	vertical-align: top;
}
#timerVal {
	color: #ffffff;
	padding-left: 3px;
	font-size: 32px;
	will-change: transform;
	transform: translateZ(0);
}
#timerIcon {
	width: 45px;
	height: 45px;
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;
	image-rendering: crisp-edges;
}
#curGameInfo {
	z-index: 3;
	color: #fff;
	font-size: 15px;
	text-align: left;
	margin-bottom: 10px;
	display: inline-block;
}

#topLeftHolder {
	text-align: left;
	position: absolute;
	top: 20px;
	z-index: 10;
	left: 20px;
}
.debugInfo {
	display: inline-block;
	vertical-align: top;
}
#pingDisplay, #fpsDisplay {
	font-size: 18px;
	margin-bottom: 5px;
	vertical-align: top;
	color: rgba(255, 255, 255, 0.5);
}
#pingDisplay .material-icons {
	vertical-align: bottom;
	font-size: 30px;
}

#teamScores {
	padding: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-bottom: 10px;
	background-color: rgba(0, 0, 0, 0.3);
	border-radius: 8px;
}

.tScoreT {
	color: rgba(255, 255, 255, 0.6);
	font-size: 18px;
}
.tScoreC {
	width: 20px;
	height: 20px;
	display: inline-block;
	margin-right: 10px;
	background-color: #eb5656;
}
.tScoreC.you {
	background-color: #ffffff;
}

#hudClassImg {
	width: 100%;
	height: 100%;
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;
	image-rendering: crisp-edges;
	border-radius: 10px;
}
#hudClassIcon {
	width: 103px;
	height: 103px;
	border-radius: 10px;
	margin-right: 5px;
	display: inline-block;
	background-color: rgba(0, 0, 0, 0.4);
}
#healthHolder {
	z-index: 10;
	position: absolute;
	bottom: 20px;
	left: 20px;
	text-align: left;
}
#healthValueHolder {
	display: inline-block;
	background-color: rgba(0, 0, 0, 0.35);
	border-radius: 5px;
	padding: 3px;
	margin-bottom: 9px;
	padding-right: 7px;
	padding-left: 9px;
}
#healthValue {
	color: #fff;
	font-size: 21px;
	will-change: transform;
	display: inline-block;
}
#challIcon {
	width: 28px;
	height: 28px;
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;
	image-rendering: crisp-edges;
	display: inline-block;
}
#maxHP {
	color: rgba(255, 255, 255, 0.8);
}
#healthBar {
	display: inline-block;
	z-index: 3;
	height: 50px;
}
.healthBarSeg {
	width: 40px;
	display: inline-block;
	border-radius: 5px;
	margin-right: 5px;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4);
}
.hpBSeg {
	height: 100%;
	border-radius: 5px;
}

#weaponDisplay {
	position: absolute;
	z-index: 1;
	right: 20px;
	bottom: 80px;
}
.weaponItem {
	position: relative;
	text-align: right;
	margin-top: -12px;
}
.weapKey {
	right: -8px;
	top: 8px;
	color: #fff;
	font-size: 14px;
	position: absolute;
}
.weaponIcon {
	width: 140px;
	height: 70px;
}

#reloadMsg {
	position: absolute;
	margin-right: -50%;
	left: 50%;
	transform: translate(-50%, 0);
	bottom: 20px;
	font-size: 25px;
	line-height: 75px;
	padding-left: 45px;
	padding-right: 45px;
	color: #fff;
}
.isQueued #reloadMsg {
	bottom: 75px;
}

#interactMsg {
	position: absolute;
	margin-right: -50%;
	left: 50%;
	transform: translate(-50%, 0);
	bottom: 220px;
	font-size: 25px;
	line-height: 75px;
	padding-left: 45px;
	padding-right: 45px;
	color: #fff;
}

#bottomRight {
	position: absolute;
	bottom: 20px;
	right: 20px;
	z-index: 3;
}

#ammoDisplay {
	display: inline-block;
	padding: 7px;
	padding-top: 8px;
	padding-left: 20px;
	font-size: 35px;
	letter-spacing: -2px;
	border-radius: 10px;
}
#ammoMax {
	color: rgba(255, 255, 255, 0.7);
}
#ammoVal {
	color: #fff;
	display: inline-block;
}
#ammoIcon {
	margin-right: 10px;
	margin-left: 5px;
	vertical-align: middle;
	height: 55px;
}

#teamName {
	z-index: 2;
	text-transform: uppercase;
	font-size: 40px;
	position: absolute;
	bottom: 20px;
	right: 20px;
	color: #fff;
}

#scoreTextHolder {
	z-index: 10;
	width: 100%;
	text-align: center;
	position: absolute;
	top: 37%;
	transform: translateY(-63%);
	will-change: transform;
	transform: translateZ(0);
}

#scoreText {
	will-change: transform;
	transform: translateZ(0);
	display: none;
	color: #ffea78;
}

#checkTextHolder {
	z-index: 10;
	width: 100%;
	text-align: center;
	position: absolute;
	top: 20%;
	transform: translateY(-63%);
	will-change: transform;
	transform: translateZ(0);
}

#checkText {
	will-change: transform;
	transform: translateZ(0);
	display: none;
	color: #40C4FF;
}

#crosshair {
	position: absolute;
	margin: 0;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	z-index: 3;
	transform: translate(-50%, -50%);
	will-change: transform;
}
#crosshairDot {
	position: absolute;
	margin: 0;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	z-index: 3;
	transform: translate(-50%, -50%);
	will-change: transform;
	background-color: #fff;
	-webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
	width: 6px;
	height: 6px;
	border-radius: 50%;
}
#crosshairT {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	background-color: #fff;
	-webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
	width: 4px;
	height: 21px;
}
#crosshairB {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	background-color: #fff;
	-webkit-box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.75);
	width: 4px;
	height: 21px;
}
.crosshairLine {
	width: 21px;
	height: 4px;
	background-color: #fff;
	-webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
}
#crosshairL {
	display: table;
	height: 100%;
	float: left;
}
#crosshairR {
	display: table;
	height: 100%;
	float: right;
}
.crosshairHolder {
	display: table-cell;
    vertical-align: middle;
}

#instructionHolder {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
}
#spectButton {
    display: none;
}
#spectButton .switchsml {
	margin-top: 0;
}
#uiBase.onMenu #spectButton {
	display: flex;
	align-items: center;
	position: absolute;
	top: 80px;
	left: 210px;
	transform: translate(-50%, 0);
	z-index: 9;
	color: rgba(255, 255, 255, 0.5);
	font-size: 18px;
}

#queueStatus {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 20;
}
.onMenu #queueStatus {
	bottom: initial;
	top: 250px;
}
#queueStatusText {
	font-size: 22px;
	text-align: center;
	color: white;
	text-transform: uppercase;
}
#queueStatusButton {
	display: none;
	margin-top: 10px;
}
.onMenu #queueStatusButton {
	display: block;
}
.queueLabel {
	top: -30px;
	margin-left: 10px;
	vertical-align: top;
}
.rankedHeader {
	display: inline-block;
	font-size: 22px;
	margin-bottom: 10px;
}

@keyframes grow {
  	from {
		opacity: 0.3;
		font-size: 30px;
  	}
}
#instructions {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
	z-index: 9;
	color: rgba(255, 255, 255, 0.8);
	font-size: 32px;
	animation: grow 0.8s infinite alternate;
}

#nameSub {
	width: 1200px;
}
#starSub {
	width: 535px;
}
#victorySub {
	width: 1050px;
}
#endUI {
	position: absolute;
	width: 100%;
	height: 100%;
	text-align: center;
	pointer-events: all;
}
#endInfo {
	position: absolute;
	width: 100%;
	top: 0;
	text-align: center;
	margin-top: -35px;
}
.voteObj {
	cursor: pointer;
	display: inline-block;
	margin-right: 5px;
	margin-left: 5px;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.5);
	height: 45px;
	line-height: 45px;
	padding-left: 25px;
	padding-right: 25px;
	font-size: 20px;
	border-radius: 5px;
}
.voteObj:hover {
	background-color: rgba(0, 0, 0, 0.3);
}
#voteHolder {
	display: none;
	height: 40px;
	position: absolute;
	left: 50%;
	top: 225px;
	transform: translateX(-50%);
}
#endTable {
	position: absolute;
	left: 50%;
	bottom: 150px;
	transform: translateX(-50%);
	margin-top: 20px;
	padding: 10px;
	background-color: rgba(0, 0, 0, 0.5);
	border-collapse: collapse;
	text-align: left;
	border-radius: 12px;
	overflow-y: auto;
	max-height: calc(100% - 390px);
	height: min-content;
}
th {
	padding-left: 10px;
	padding-right: 10px;
    height: 50px;
	color: #fff;
	font-size: 22px;
}
td {
	padding-left: 10px;
	padding-right: 10px;
	height: 50px;
	color: rgba(255, 255, 255, 0.7);
	font-size: 20px;
}
th, tr {
	border-bottom: 3px solid rgba(255, 255, 255, 0.1);
}

.followBut {
	color: #fff;
	background-color: #2196F3;
	font-size: 14px;
	padding: 4px;
	padding-left: 16px;
	padding-right: 16px;
	border-radius: 5px;
	cursor: pointer;
}
.followBut:hover {
	background-color: #29a0ff;
}

#victoryText {
	margin-top: 30px;
	font-size: 165px;
	text-shadow:
		0 1px 0 #a6a6a6,
		0 2px 0 #a6a6a6,
		0 3px 0 #a6a6a6,
		0 4px 0 #a6a6a6,
		0 5px 0 #a6a6a6,
		0 6px 0 #a6a6a6,
		0 7px 0 #a6a6a6,
		0 8px 0 #a6a6a6,
		0 9px 0 #a6a6a6,
		0 10px 0 #a6a6a6;
	color: #fff;
	font-family: 'HeaderFont';
}

#endTimer {
	line-height: 15px;
	margin-top: 10px;
	font-size: 30px;
	z-index: 10000;
	color: rgba(255, 255, 255, 0.7);
}

.midHolder {
	width: 100%;
	display: none;
	position: absolute;
	bottom: 230px;
	z-index: 10;
	text-align: center;
}

#purchaseLoad {
	pointer-events: all;
	position: absolute;
	width: 100%;
	height: 100%;
	display: none;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.2);
	z-index: 2;
}
#purchaseLabel {
	color: rgba(255, 255, 255, 0.5);
	font-size: 25px;
	margin-top: 20px;
}
.lds-ring {
	display: inline-block;
	transform: scale(1.6);
  	width: 64px;
  	height: 64px;
}
.lds-ring div {
  	box-sizing: border-box;
  	display: block;
  	position: absolute;
  	width: 51px;
  	height: 51px;
  	margin: 6px;
  	border: 6px solid #fff;
  	border-radius: 50%;
  	animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  	border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  	animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  	animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  	animation-delay: -0.15s;
}
@keyframes lds-ring {
  	0% {
    	transform: rotate(0deg);
  	}
  	100% {
    	transform: rotate(360deg);
  	}
}

.centerV {
	top: 40%;
	transform: translateY(-60%);
	left: 50%;
	transform: translateX(-50%);
	position: absolute;
	display: inline-block;
}

#spinItem {
	width: 100%;
	display: none;
	z-index: 11;
	position: absolute;
	text-align: center;
	top: 50%;
	transform: translateY(-50%);
}
#spinItemCanvas {
	display: inline-block;
}
#spinItemName {
	z-index: 12;
	position: absolute;
	display: none;
	top: 50%;
	left: 50%;
    transform: translateX(-50%) translateY(-50%);
	color: #fff;
	background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(40,40,40,0.7) 40%, rgba(40,40,40,0.7) 60%, rgba(0,0,0,0) 100%);
	background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(40,40,40,0.7) 40%,rgba(40,40,40,0.7) 60%,rgba(0,0,0,0) 100%);
	background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(40,40,40,0.7) 40%,rgba(40,40,40,0.7) 60%,rgba(0,0,0,0) 100%);
}
#spinUI {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
}
#spinHolder {
	display: block;
	pointer-events: auto;
	text-align: center;
}
#spinKR {
	font-size: 36px;
	color: #fff;
	position: absolute;
	top: 6px;
	left: 48px;
}
#spinInfo {
	position: absolute;
	top: 5px;
	right: 20px;
	text-align: right;
	color: #fff;
	font-size: 25px;
}
.colCub {
	width: 30px;
	height: 30px;
	margin-left: 10px;
	display: inline-block;
}
#spinWindow {
	display: inline-block;
	height: 620px;
	width: 620px;
}
#spinText {
	text-align: center;
	color: #fff;
	font-size: 0;
	display: table-cell;
	vertical-align: middle;
}
#spinHeader {
	color: #fff;
}
#spinCost {
	color: rgba(255, 255, 255, 0.5);
	font-size: 0px;
}
#spinUI {
	position: absolute;
	top: 20px;
	right: 20px;
	font-size: 18px;
}
#spinButton {
	z-index: 13;
	display: table;
	border-collapse: collapse;
	pointer-events: auto;
	cursor: pointer;
	border-radius: 50%;
	background-color: #F44336;
	position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
	-webkit-transition: -moz-transform .1s ease-out;
	-moz-transition: -webkit-transform .1s ease-out;
	transition: transform .1s ease-out;
}
#spinButton:hover {
	transform: scale(1.1);
}
#spinButton:active {
	transform: scale(0.9);
}

.smlInput {
	display: inline-block;
	width: 82%;
    padding: 5px;
	padding-left: 10px;
	margin-top: 10px;
	font-size: 16px;
    box-sizing: border-box;
	border: none;
	background-color: rgba(0, 0, 0, 0.1);
	color: rgba(0, 0, 0, 0.6);
}

.accountInput {
    width: 100%;
    padding: 5px;
	padding-left: 10px;
	margin-top: 20px;
	font-size: 22px;
    box-sizing: border-box;
	border: none;
   	border-bottom: 3px solid rgba(0, 0, 0, 0.3);
}

.accountButton {
	color: rgba(255, 255, 255, 0.7);
	text-align: center;
	margin-top: 10px;
	display: inline-block;
	width: 330px;
	cursor: pointer;
	background-color: #2196F3;
	font-size: 22px;
	padding-top: 8px;
	padding-bottom: 8px;
}
.accountButton:hover {
	color: #fff;
}

.mapListThumb {
	width: 220px;
	height: 100px;
	cursor: pointer;
	background-color: rgba(0, 0, 0, 0.3);
   	object-fit: cover;
   	overflow: hidden;
}
.mapListItem {
	color: rgba(0, 0, 0, 0.4);
	font-size: 17px;
	display: inline-block;
	margin-bottom: 12px;
	width: 220px;
	margin-right: 8px;
}

.mapInput {
	margin-top: 10px;
	width: 95.5% !important;
	width: 476px;
	font-size: 18px;
	padding: 5px;
	padding-left: 10px;
}
.mapLoadButton {
	color: rgba(255, 255, 255, 0.7);
	text-align: center;
	margin-top: 18px;
	display: inline-block;
	width: 675px;
	cursor: pointer;
	background-color: #2196F3;
	font-size: 22px;
	padding-top: 8px;
	padding-bottom: 8px;
}
.mapLoadButton:hover {
	color: #fff;
}

.punishButton {
	color: rgba(255, 255, 255, 0.7);
	text-align: center;
	display: inline-block;
	width: 85px;
	cursor: pointer;
	background-color: #ed4242;
	font-size: 16px;
	margin-right:5px;
	border-radius: 12px;
} .punishButton.kick {
	background-color: #fab640;
	width: 65px;
} .punishButton.ban {
	width: 60px;
} .punishButton.kill {
	background-color: #E040FB;
	width: 55px;
} .punishButton.tp2 {
	background-color: #0000FF;
	width: 60px;
} .punishButton.tpme {
	background-color: #0000FF;
	width: 80px;
} .punishButton.tpall {
	background-color: #0000FF;
	width: 75px;
}

.presetsButton {
	color: rgba(255, 255, 255, 0.7);
	text-align: center;
	display: inline-block;
	width: 85px;
	cursor: pointer;
	background-color: #ed4242;
	font-size: 18px;
	margin-right:5px;
	border-radius: 12px;
	padding: 3px;
}

.punishButton:hover, .presetsButton:hover {
	color: #fff;
}

.presetInput {
	margin-top: 10px;
	width: 95.5% !important;
	width: 476px;
	font-size: 18px;
	padding: 5px;
	padding-left: 10px;
	box-shadow: none;
    outline: none;
    border: none;
	background: #eee;
	pointer-events: auto;
}

.hostPresetBtn {
	color: rgba(255, 255, 255, 0.7);
	text-align: center;
	display: inline-block;
	width: 75px;
	cursor: pointer;
	background-color: #2196F3;
	font-size: 15px;
	padding: 4px;
	margin-left: 10px;
	margin-top: 5px;
	float: right;
	border-radius: 8px;
}
.hostPresetBtn:hover {
	color: #fff;
}

#serverFilters {
	margin-top: 5px;
	margin-bottom: 25px;
	font-size:15px;
}

#windowHeader {
	display: none;
	text-transform: uppercase;
	font-size: 25px;
	margin-bottom: 10px;
	color: rgba(255, 255, 255, 0.6);
}

.setHed {
	margin-top: 15px;
	font-size: 22px;
}

#menuWindow {
	position: absolute;
	left: 50%;
	bottom: 220px;
	border-radius: 6px;
	max-height: calc(100% - 480px);
	transform: translateX(-50%);
	z-index: 2;
	overflow-y: auto;
	display: inline-block;
	text-align: left;
	pointer-events: auto;
	padding: 20px;
	width: 705px;
	font-size: 20px;
	background-color: #fff;
	-webkit-box-shadow: 0px 9px 0px 0px #a6a6a6;
	-moz-box-shadow: 0px 9px 0px 0px #a6a6a6;
	box-shadow: 0px 9px 0px 0px #a6a6a6;
}

.menuSelectorHeader {
	margin-bottom: 5px;
	font-size: 22px;
}

.menuSelectorHolder {
	opacity: 0.75;
}
.menuSelector {
	padding: 4px 4px 4px 30px;
	cursor: pointer;
	font-size: 20px;
}
.menuSelector:hover {
	background: rgba(0, 0, 0, 0.2);
}

.privateMenuSelector, .privateMenuSelector:hover {
	cursor: default;
    color: black;
	background: url("/img/lock-icon-black.svg") no-repeat right 8px center;
	opacity: 0.5;
	background-size: 18px auto;
}
.selectedMenuSelector, .selectedMenuSelector:hover {
	cursor: default;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.5);
}

.privateMenuSelector.selectedMenuSelector {
	opacity: 1.0;
	background-image: url("/img/lock-icon-white.svg");
}

#gameNameInput {
	font-size: 16px;
}
.formInput {
    pointer-events: auto;
	font-size: 12px;
    padding: 10px;
    box-shadow: none;
    outline: none;
    border: none;
    background: #eee;
    float: right;
	border-radius: 12px;
}

.floatR {
	float: right;
	clear: both;
}
.settText {
	cursor: pointer;
	color: #2196F3;
	font-size: 22px;
	pointer-events: auto;
}
.settText:hover {
	text-decoration: underline;
}
.b {
	color: rgba(0, 0, 0, 0.8) !important;
}
.settName, .settNameSmall {
	clear: both;
	margin-top: 3px;
	font-size: 22px;
	color: rgba(0, 0, 0, 0.5);
}
.settNameSmall {
    font-size: 18px;
    margin: 10px;
}
.settLabel {
	clear: both;
	float: right;
	font-size: 22px;
	color: rgba(0, 0, 0, 0.3);
}

.wepLink {
	cursor: pointer;
}
.wepLink:hover {
	text-decoration: underline;
}
.equipBtn {
	color: #fff;
	height: 70px;
	width: 70px;
	float: right;
	background-color: #2196F3;
	line-height: 100px;
	text-align: center;
	cursor: pointer;
	-webkit-transition: line-height .2s;
	transition: line-height .2s;
}
.equipBtn.gr {
	background-color: rgba(0,0,0,0.3);
}
.equipBtn > i {
	font-size: 50px;
	color: rgba(255, 255, 255, 0.7);
	-webkit-transition: font-size .2s;
	transition: font-size .2s;
}
.equipBtn:hover {
	line-height: 120px;
}.equipBtn:hover > i {
	font-size: 70px;
	color: #fff;
}
.selItem {
	clear: both;
	width: 100%;
	height: 70px;
}
.itemIcon {
	display: inline-block;
	width: 70px;
	height: 70px;
	background-color: rgba(0, 0, 0, 0.25);
	border-radius: 12px;
}
.itemIconImg {
	width: 70px;
	height: 70px;
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;
	image-rendering: crisp-edges;
	border-radius: 12px;
}
.itemInfo {
	display: inline-block;
	vertical-align: top;
	padding-left: 10px;
	margin-top: -5px;
}
.itemName {
	color: rgba(0, 0, 0, 0.4);
	font-size: 25px;
}
.itemCat {
	margin-top: 0px;
	color: rgba(0, 0, 0, 0.2);
	font-size: 19px;
}

#inputContainer {
	text-align: center;
	position: absolute;
	width: 100%;
	bottom: 155px;
}

#nameInput {
	text-align: center;
	pointer-events: auto;
	padding: 5px;
	padding-left: 10px;
	font-size: 22px;
	-webkit-box-shadow: 0px 9px 0px 0px #a6a6a6;
	-moz-box-shadow: 0px 9px 0px 0px #a6a6a6;
	box-shadow: 0px 9px 0px 0px #a6a6a6;
	outline: none;
	border: none;
}
#nameInput:disabled {
	color: rgba(0, 0, 0, 0.5);
}

#infoHolder {
	color: #fff;
	font-size: 30px;
}

#infoHolder > * {
    z-index: 20;
}

#claimTimer {
	color: rgba(255, 255, 255, 0.6);
	font-size: 18px;
	margin-top: -3px;
}
#merchHolder {
	display: none;
}
#uiBase.onMenu #merchHolder {
	display: block;
	cursor: pointer;
	text-align: center;
	position: absolute;
	left: 131px;
	top: 110px;
	pointer-events: all;
}
#merchImg {
	height: 130px;
	animation: scaleBob 0.4s ease-in-out infinite alternate;
    -webkit-animation: scaleBob 0.4s ease-in-out infinite alternate;
}
#merchImg:active {
	transform: scale(0.85);
	-webkit-transform: scale(0.85);
	animation: none;
}
#claimHolder {
    display: none;
}
#uiBase.onMenu #claimHolder {
	cursor: pointer;
	text-align: center;
	position: absolute;
	left: 140px;
	top: 110px;
	pointer-events: all;
}
@keyframes scaleBob {
	0% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
    100% {
        transform: scale(0.9);
        -webkit-transform: scale(0.9);
    }
}
#claimImg {
	height: 95px;
	animation: scaleBob 0.4s ease-in-out infinite alternate;
    -webkit-animation: scaleBob 0.4s ease-in-out infinite alternate;
}
#claimImg:active {
	transform: scale(0.85);
	-webkit-transform: scale(0.85);
	animation: none;
}

#mapInfoHolder {
    position: absolute;
    bottom: 20px;
    right: 20px;
	pointer-events: all;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

#advertiseButton {
	display: none;
}
#uiBase.onMenu #advertiseButton {
	display: block;
	position: absolute;
	right: 15px;
	top: 80px;
}

#mapInfo {
	color: #fff;
	font-size: 22px;
}

#modVote {
	color: #fff;
	font-size: 22px;
	margin-bottom: 10px;
	text-align: right;
}

#objectiveIcon {
	position: absolute;
	display: inline-block;
}

.material-icons.vote {
	font-size: 35px;
	margin-left: 20px;
	margin-bottom: 5px;
	vertical-align: middle;
	cursor: pointer;
	color: rgba(150, 150, 150);
}
.material-icons.vote.a {
	color: #fff;
}
.material-icons.vote:hover {
	opacity: 0.8;
}
.material-icons.h {
	cursor: pointer;
}
.material-icons.h:hover {
	opacity: 0.8;
}

#followHolder {
	pointer-events: auto;
	position: absolute;
	top: 20px;
	left: 20px;
}

.whiteShad {
	text-shadow:
		0 1px 0 #a6a6a6,
		0 2px 0 #a6a6a6,
		0 3px 0 #a6a6a6,
		0 4px 0 #a6a6a6,
		0 5px 0 #a6a6a6;
}

#linksHolder {
	font-size: 28px;
	position: absolute;
	top: 170px;
	width: 100%;
	text-align: center;
	color: #fff;
}
.gButton {
	text-transform: uppercase;
	font-size: 30px;
	color: #F8C55C !important;
	text-shadow:
		0 1px 0 #AE853B,
		0 2px 0 #AE853B,
		0 3px 0 #AE853B,
		0 4px 0 #AE853B,
		0 5px 0 #AE853B,
		0 6px 0 #AE853B !important;
}
.gButton:hover {
	text-decoration: none;
	color: #fff !important;
	text-shadow:
		0 1px 0 #a6a6a6,
		0 2px 0 #a6a6a6,
		0 3px 0 #a6a6a6,
		0 4px 0 #a6a6a6,
		0 5px 0 #a6a6a6,
		0 6px 0 #a6a6a6 !important;
}

#rightHolder {
	text-align: right;
	color: #fff;
	font-size: 22px;
	position: absolute;
	top: 20px;
	right: 25px;
}

#aHolder {
	position: absolute;
	bottom: 15px;
	left: 0;
	right: 0;
	text-align: center;
	z-index: 30;
	pointer-events: none;
}

#aMerger {
	text-align: left;
	display: inline-block !important;
	min-width: 728px;
	min-height: 90px;
	pointer-events: auto;
}

#aContainer {
	cursor: pointer;
	padding: 10px;
	background-color: rgba(0, 0, 0, 0.5);
}

#baseLinksContainer {
	width: 100%;

	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

#spectateUI {
	display: none;
	text-align: center;
	color: #fff;
}
#spectateHUD {
	position: absolute;
	margin-right: -50%;
	left: 50%;
	transform: translate(-50%, 0);
	top: 20px;
	font-size: 25px;
	line-height: 50px;
	padding-left: 45px;
	padding-right: 45px;
	color: #fff;
}
#specNames {
	border-radius: 7px;
	position: absolute;
	left: 20px;
	top: 20px;
	font-size: 25px;
	padding: 8px;
	padding-bottom: 12px;
	padding-left: 20px;
	padding-right: 20px;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.2);
}
#specStats {
	border-radius: 7px;
	position: absolute;
	left: 20px;
	top: 100px;
	font-size: 14px;
	text-align: left;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	width: 175px;
	padding: 8px;
	padding-bottom: 12px;
	padding-left: 20px;
	padding-right: 20px;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.2);
}
#specContr {
	background-color: rgba(0, 0, 0, 0.2);
	position: absolute;
	right: 20px;
	bottom: 20px;
	padding: 10px;
	padding-left: 22px;
	padding-right: 20px;
	font-size: 20px;
	border-radius: 5px;
}
.specContrI {
	font-size: 18px;
	color: #fbc02d;
	display: inline-block;
	margin-left: 14px;
}

.switchsml {
	float: right;
  	position: relative;
  	display: inline-block;
	margin-left: 10px;
	vertical-align: bottom;
	margin-bottom: -5px;
  	width: 30px;
  	height: 17px;
	pointer-events: all;
}
.switchsml input {display:none;}
.sliderSml {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #a8a8a8;
	-webkit-transition: .4s;
	transition: .4s;
	border-radius: 34px;
	pointer-events: all;
}
.sliderSml:before {
	position: absolute;
	content: "";
	height: 13px;
	width: 13px;
	left: 2px;
	bottom: 2px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
	border-radius: 50%;
}
input:checked + .sliderSml {
  	background-color: #2196F3;
}
input:focus + .sliderSml {
  	box-shadow: 0 0 1px #2196F3;
}
input:checked + .sliderSml:before {
  	-webkit-transform: translateX(13px);
  	-ms-transform: translateX(13px);
  	transform: translateX(13px);
}

.switch {
	float: right;
  	position: relative;
  	display: inline-block;
	margin-bottom: 5px;
  	width: 60px;
  	height: 34px;
}
.switch input {display:none;}
.slider {
	  position: absolute;
	  cursor: pointer;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background-color: #a8a8a8;
	  -webkit-transition: .4s;
	  transition: .4s;
	  border-radius: 34px;
}
.slider:before {
	  position: absolute;
	  content: "";
	  height: 26px;
	  width: 26px;
	  left: 4px;
	  bottom: 4px;
	  background-color: white;
	  -webkit-transition: .4s;
	  transition: .4s;
	  border-radius: 50%;
}
input:checked + .slider {
  	background-color: #2196F3;
}
input:focus + .slider {
  	box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
  	-webkit-transform: translateX(26px);
  	-ms-transform: translateX(26px);
  	transform: translateX(26px);
}

.slidecontainer {
	margin-top: -8px;
	margin-right: 10px;
    width: 250px;
	float: right;
}
.sliderM {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 15px;
    background-color: #a8a8a8;
    outline: none;
		border-radius: 12px;
}
.sliderM::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #2196F3;
    cursor: pointer;
}
.sliderM::-moz-range-thumb {
    width: 25px;
    height: 25px;
	border-radius: 50%;
    background: #2196F3;
    cursor: pointer;
}
.sliderVal {
	float: right;
	display: inline-block;
	position: relative;
 	width: 50px;
	color: #fff;
	line-height: 24px;
	font-size: 18px;
	text-align: center;
	background: #2196F3;
	padding: 5px 10px;
	margin-left: 8px;
	border-radius: 12px;
}

#queueRegionSelect {
	display: inline-block;
}
.inputGrey {
	border: none;
	background: #eee;
	padding: 6px;
	padding-bottom: 6px;
	padding-right: 10px;
	float: right;
	margin-left: 10px;
	border-radius: 12px;
	font-size: 18px;
}

.inputGrey2 {
	border: none;
	background: #eee;
	padding: 6px;
	padding-bottom: 6px;
	float: right;
	margin-left: 10px;
	border-radius: 12px;
	font-size: 12px;
}

#modLinks {
	width: 100%;
	text-align: center;
	font-size: 22px;
	color: rgba(0, 0, 0, 0.3);
	margin-bottom: 10px;
}
#modDropper {
  	width: 685px;
  	height: 120px;
  	border: 4px dashed rgba(0, 0, 0, 0.3);
}
#modDropper p {
  	width: 100%;
  	height: 100%;
	margin-top: 18px;
  	text-align: center;
	font-size: 22px;
	color: rgba(0, 0, 0, 0.3);
  	line-height: 73px;
}
#modDropper input {
	cursor: pointer;
	overflow: hidden;
	position: absolute;
	width: 480px;
	height: 90px;
	margin: 0;
	padding: 0;
	outline: none;
	opacity: 0;
}
#modDropper:hover {
	background-color: rgba(0, 0, 0, 0.05);
}

/*** MAIN MENU ***/
/*
Colors:
Yellow: #F8C55C
Yellow shadow: #AE853B
White: #FFFFFF
White shadow: #A6A6A6
 */

/* Title */
#gameNameHolder {
	z-index: 9999999;
	position: absolute;
	top: -35px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
}

#mainLogo {
	margin-top: 50px;
	margin-bottom: -40px;
	height: 225px;
}

#gameNameHorizontalFlex {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#gameName {
	font-family: 'HeaderFont';
	font-size: 116px;
	color: #fff;
	text-shadow:
		0 1px 0 #a6a6a6,
		0 2px 0 #a6a6a6,
		0 3px 0 #a6a6a6,
		0 4px 0 #a6a6a6,
		0 5px 0 #a6a6a6,
		0 6px 0 #a6a6a6,
		0 7px 0 #a6a6a6,
		0 8px 0 #a6a6a6;
}

#gameNameSub {
	position: absolute;
	top: 140px;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 675px;
}

#subLogoButtons {
	position: absolute;
	bottom: 132px;
	left: 50%;
	transform: translate(-50%, 0);
}

#subLogoButtons > .button {
	padding-left: 22px;
	padding-right: 22px;
}

.fin {
	width: auto;
	height: 62px;
	margin: 0 12px;
	margin-top: 10px;
}

/* Header bar */
.headerBar {
	position: absolute;
	top: 0;
	height: 70px;
	padding: 0 12px;

	display: flex;
	flex-direction: row;
	align-items: center;

	background-color: rgba(0, 0, 0, 0.5);
	pointer-events: auto;
}

.headerBar div {
	color: white;
}

.headerBarLeft {
	left: 0;
	padding-right: 15px;
	border-radius: 0px 0px 8px 0px;
}

.headerBarRight {
	right: 0;
	padding-left: 20px;
	border-radius: 0px 0px 0px 8px;
}

.verticalSeparator {
	background: rgba(255, 255, 255, 0.5);
	width: 4px;
	height: 34px;
	margin: 0 10px;
}

/* Account Info */
#menuUsernameContainer {
	display: flex;
	flex-direction: row;
	align-items: center;

	cursor: pointer !important;
}

#menuMiniProfilePic {
	width: 40px;
	height: 40px;
	image-rendering: pixelated;
	margin-right: 10px;
}

#levelContainer {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#levelContainer > div:first-child {
	display: flex;
	flex-direction: row;
	align-items: center;
}

#menuLevelIcon {
	width: 28px;
	height: 28px;
	background-size: contain;
	background-repeat: no-repeat;
	margin-right: 5px;
    margin-bottom: -1px;
}

#menuLevelText {
	font-size: 14px;
}

#levelContainer .progressBar {
	width: 88px;
	margin-left: 5px;
	margin-top: 5px;
}

.progressBar {
	height: 7px;
	padding: 2px;
	background: rgba(0, 0, 0, 0.75);
}

.progressBarInner {
	height: 100%;
	background: #F8C55C;
}

#menuRegionLabel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#menuServerInfoContainer {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

#menuRegionLabel {
    cursor: pointer;
}

.menuDebugInfo {
	display: flex;
	justify-content: center;
	align-items: center;
}

#menuPingDisplay, #menuFPSDisplay {
	margin-right: 5px;
	font-size: 12px;
	font-color: rgba(255, 255, 255, 0.75);
}

#menuPingDisplay .material-icons {
	vertical-align: bottom;
	font-size: 20px;
}

/* KR Info */
.krInfo {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.krInfo::before {
	content: "";
	background-image: url("/img/kr-icon.png");
	background-size: contain;
	margin-right: 10px;
	width: 1.5em;
	height: 1.5em;
    margin-bottom: 5px;
}

/* Menu items */
#menuItemContainer {
	position: absolute;
	left: 0;
	top: 70px;
	bottom: 0;
	width: 130px;
	display: flex;
	flex-direction: column;
}

.menuItem {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	background: rgba(0, 0, 0, 0.75);
	text-align: center;
	pointer-events: all;
	cursor: pointer;
}
.menuItem .menuItemIcon {
	width: 100%;
	height: 45%;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
.menuItem .menuItemTitle {
	margin-top: -20%;
	color: white;
}
.menuItem:hover {
	background: #F8C55C;
}
.menuItem:active {
	background: #AE853B;
}

/* Class */
#menuClassContainer {
	position: absolute;
	right: -130px;
	top: 60px;
	bottom: 130px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

#menuClassName {
	color: white;
	font-size: 30px;
	margin-bottom: 10px;
	z-index: 101;
	text-shadow:
		-1px -1px 0 #202020,
		1px -1px 0 #202020,
		-1px 1px 0 #202020,
		1px 1px 0 #202020,
		-2px -2px 0 #202020,
		2px -2px 0 #202020,
		-2px 2px 0 #202020,
		2px 2px 0 #202020,
		-3px -3px 0 #202020,
		3px -3px 0 #202020,
		-3px 3px 0 #202020,
		3px 3px 0 #202020,
		-4px -4px 0 #202020,
		4px -4px 0 #202020,
		-4px 4px 0 #202020,
		4px 4px 0 #202020;
}

#menuClassSubtext {
	z-index: 100;
	color: rgba(255, 255, 255, 0.5);
	font-size: 17px;
	margin-bottom: -3px;
	text-shadow:
		-1px -1px 0 #202020,
		1px -1px 0 #202020,
		-1px 1px 0 #202020,
		1px 1px 0 #202020,
		-2px -2px 0 #202020,
		2px -2px 0 #202020,
		-2px 2px 0 #202020,
		2px 2px 0 #202020,
		-3px -3px 0 #202020,
		3px -3px 0 #202020,
		-3px 3px 0 #202020,
		3px 3px 0 #202020;
}

#classPreviewCanvas {
	margin-bottom: -100px;
}

#classInfoContainer {
	width: 300px;
}

#classInfoContainer > div {
	width: 100%;

	display: flex;
	flex-direction: row;
}

#classInfoContainer > div > div {
	margin-bottom: 10px;

	width: 50%;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.classInfoLabel {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.5);
	margin-bottom: 4px;
}

.classInfoContents {
	color: white;
	text-align: center;
}

#customizeButton {
    width: 300px;
    text-align: center;
    padding: 15px;
    font-size: 23px;
	pointer-events: all;
}

/* Menu item icons */
.iconProfile { background-image: url("/img/menu-icons/profile.png"); }
.menuItem:hover .iconProfile { background-image: url("/img/menu-icons/profile-white.png"); }
.iconRanked { background-image: url("/img/menu-icons/ranked.png"); }
.menuItem:hover .iconRanked { background-image: url("/img/menu-icons/ranked-white.png"); }
.iconShop { background-image: url("/img/menu-icons/shop.png"); }
.menuItem:hover .iconShop { background-image: url("/img/menu-icons/shop-white.png"); }
.iconSocial { background-image: url("/img/menu-icons/social.png"); }
.menuItem:hover .iconSocial { background-image: url("/img/menu-icons/social-white.png"); }
.iconMaps { background-image: url("/img/menu-icons/maps.png"); }
.menuItem:hover .iconMaps { background-image: url("/img/menu-icons/maps-white.png"); }
.iconMods { background-image: url("/img/menu-icons/mods.png"); }
.menuItem:hover .iconMods { background-image: url("/img/menu-icons/mods-white.png"); }
.iconSettings { background-image: url("/img/menu-icons/settings.png"); }
.menuItem:hover .iconSettings { background-image: url("/img/menu-icons/settings-white.png"); }

/* Button */
.buttonR {
	background-color: #ff4747 !important;
	box-shadow: inset 0px -7px 0px 0px #992b2b !important;
}
.buttonR:hover {
	background-color: #fff !important;
	box-shadow: inset 0px -7px 0px 0px #b3b3b3 !important;
}
.buttonP {
	background-color: #b447ff !important;
	box-shadow: inset 0px -7px 0px 0px #672992 !important;
}
.buttonP:hover {
	background-color: #fff !important;
	box-shadow: inset 0px -7px 0px 0px #b3b3b3 !important;
}
.button.lgn {
	font-size: 18px;
	padding-top: 5px;
	margin-top: 2px;
}
.button {
    position: relative;
	display: inline-block;
	box-sizing: border-box;
	border-radius: 4px;
	padding: 12px 18px;
	padding-top: 14px; /* Since this font is messed up, align center */
	margin-bottom: 6px;
	background-color: #ffc147;
	box-shadow: inset 0px -7px 0px 0px #b08531;
	text-align: center;
	color: white;
	text-shadow:
		-1px -1px 0 #202020,
		1px -1px 0 #202020,
		-1px 1px 0 #202020,
		1px 1px 0 #202020,
		-2px -2px 0 #202020,
		2px -2px 0 #202020,
		-2px 2px 0 #202020,
		2px 2px 0 #202020;
	pointer-events: all;
	cursor: pointer;
	-webkit-transition: all 0.2s;
    transition: all 0.2s;
}
.button:hover {
	background-color: #fff;
	box-shadow: inset 0px -7px 0px 0px #b3b3b3;
	-webkit-transform: scale(0.95);
    transform: scale(0.95);
}
.bigShadowT {
	text-shadow:
		-1px -1px 0 #202020,
		1px -1px 0 #202020,
		-1px 1px 0 #202020,
		1px 1px 0 #202020,
		-2px -2px 0 #202020,
		2px -2px 0 #202020,
		-2px 2px 0 #202020,
		2px 2px 0 #202020,
		-3px -3px 0 #202020,
		3px -3px 0 #202020,
		-3px 3px 0 #202020,
		3px 3px 0 #202020 !important;
}
.button.small {
	padding-top: 5px !important;
	padding-bottom: 13px !important;
	padding-left: 22px !important;
	padding-right: 22px !important;
	font-size: 22px !important;
	margin-left: 3px;
	margin-right: 3px;
	text-shadow:
		-1px -1px 0 #202020,
		1px -1px 0 #202020,
		-1px 1px 0 #202020,
		1px 1px 0 #202020,
		-2px -2px 0 #202020,
		2px -2px 0 #202020,
		-2px 2px 0 #202020,
		2px 2px 0 #202020,
		-3px -3px 0 #202020,
		3px -3px 0 #202020,
		-3px 3px 0 #202020,
		3px 3px 0 #202020 !important;
}

/* Social buttons */
.imageButton {
	display: inline-block;
	width: 50px;
	height: 56px;
	background-size: contain;
	background-repeat: no-repeat;
	margin-left: 4px;

	pointer-events: all;
	cursor: pointer;
	-webkit-transition: all 0.2s;
    transition: all 0.2s;
}

.imageButton:hover {
	-webkit-transform: scale(0.95);
    transform: scale(0.95);
}

.discordSocial { background-image: url("/img/social-buttons/discord-normal.png"); }
.discordSocial:hover { background-image: url("/img/social-buttons/discord-hover.png"); }
.discordSocial:active { background-image: url("/img/social-buttons/discord-pressed.png"); }

.downloadClient { background-image: url("/img/social-buttons/down_normal.png"); }
.downloadClient:hover { background-image: url("/img/social-buttons/down_hover.png"); }
.downloadClient:active { background-image: url("/img/social-buttons/down_pressed.png"); }

.redditSocial { background-image: url("/img/social-buttons/reddit-normal.png"); }
.redditSocial:hover { background-image: url("/img/social-buttons/reddit-hover.png"); }
.redditSocial:active { background-image: url("/img/social-buttons/reddit-pressed.png"); }

.twitterSocial { background-image: url("/img/social-buttons/twitter-normal.png"); }
.twitterSocial:hover { background-image: url("/img/social-buttons/twitter-hover.png"); }
.twitterSocial:active { background-image: url("/img/social-buttons/twitter-pressed.png"); }

.fandomSocial { background-image: url("/img/social-buttons/fandom-normal.png"); }
.fandomSocial:hover { background-image: url("/img/social-buttons/fandom-hover.png"); }
.fandomSocial:active { background-image: url("/img/social-buttons/fandom-pressed.png"); }

.krSocial {
	width: 32px;
	height: 32px;
    margin-left: 10px;
    margin-bottom: 6px;
}
.krSocial { background-image: url("/img/social-buttons/kr-normal.png"); }
.krSocial:hover { background-image: url("/img/social-buttons/kr-hover.png"); }
.krSocial:active { background-image: url("/img/social-buttons/kr-pressed.png"); }

::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

::-webkit-scrollbar {
	width: 12px;
	background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb {
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: grey;
}

#skinList {
	margin-top: 15px;
}
.skinCard {
	pointer-events: none;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	text-align: center;
	color: #fff;
	margin-bottom: 15px;
	margin-left: 5px;
	margin-right: 5px;
	padding: 5px;
	padding-top: 2px;
	width: 153px;
	height: 210px;
	vertical-align: top;
	background-color: rgba(0, 0, 0, 0.3);
	border-radius: 5px;
	display: inline-block;
	font-size: 20px;
}
.skinCreator {
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    margin-top: -60px;
	font-size: 14px;
}
.skinImg {
	margin-top: -20px;
	margin-bottom: 10px;
	width: 140px;
}
.skinImgC {
	margin-top: 5px;
	margin-bottom: 25px;
	width: 100px;
}

.itemOwn {
	text-align: center;
	color: rgba(255, 255, 255, 0.7);
	font-size: 12px;
	margin-top: -3px;
}
.itemCnt {
   position:relative;
}
.itemCnt[data-badge]:after {
	content:attr(data-badge);
	position:absolute;
	top: 115px;
	left: 8px;
	font-size: 16px;
	background-color: rgba(0,0,0,0.6);
	color: white;
	width: 35px;
	height: 35px;
	text-align: center;
	line-height: 35px;
	border-radius: 50%;
}

.selctBtn {
	font-size: 16px;
	color: #fff;
	background-color: #faa332;
	padding: 8px;
	margin-top: -30px;
	width: 127px;
	margin-left: 5px;
	text-align: center;
	border-radius: 4px;
	cursor: pointer;
	pointer-events: auto;
}
.selctBtn:hover {
    background-color: #f2af57;
}

#bubbleContainer {
	z-index: 99999;
	position: absolute;
	top: calc(50% - 130px);
	right: 420px;
	-webkit-transition: .2s;
	transition: .2s;
	transform: scale(0);
}
.speechBox {
  	width: 180px;
  	margin: 50px auto;
  	background: #ffffff;
  	padding: 20px;
  	text-align: center;
  	font-weight: 900;
  	color: rgba(0, 0, 0, 0.6);
	border-radius: 12px;
  	position: relative;
}
.sb1:before {
  	content: "";
  	width: 0px;
  	height: 0px;
  	position: absolute;
  	border-left: 10px solid #ffffff;
  	border-right: 10px solid transparent;
  	border-top: 10px solid #ffffff;
  	border-bottom: 10px solid transparent;
  	right: -19px;
  	top: 16px;
}

.activeSkin {
	-webkit-border-radius: 8px !important;
	-moz-border-radius: 8px !important;
	border-radius: 8px !important;
}

.skinColorItem {
	text-align: center;
	vertical-align:text-top;
	float: right;
	cursor: pointer;
	display: inline-block;
	margin-left: 10px;
	width: 30px;
	height: 30px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	border: 3px solid #525252;
}
.skinColorItem:hover {
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}