:root{
	--yellow: #fbc02d;
	--blue: #2196F3;
	--green: #b2f252;
	--red: #ed4242;
	--div-grey: rgba(108, 108, 108,  .40);
	--div-black: rgba(20, 20, 20, .75);
	--div-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.75);
	--mm-scale: 1;
}

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

input, textarea {
	-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("./fonts/FrVrKrunkerBold2.ttf");
}

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

.forceHidden {
	display: none !important;
}

#uiBase {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform-origin: 0 0;
	pointer-events: none;
	z-index: 1;
}

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

.newsItem {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 10px;
}
#newsHolder {
	display: none;
	pointer-events: all;
	padding: 10px;
	z-index: 20;
	position: absolute;
	right: 14px;
	top: 86px;
	text-align: left;
	font-size: 16px;
	border-radius: 4px;
	background-color: rgba(0, 0, 0, 0.5);
}
#newsHed {
	position: absolute;
	left: 0px;
	bottom: 0px;
	color: #fff;
	font-size: 18px;
	line-height: 23px;
	text-align: center;
	background-image: linear-gradient(to right, #cf81de, #af30c7);
	z-index: 10;
	padding: 6px;
	padding-right: 10px;
	border-top-right-radius: 6px;
}
#newsStat {
	position: absolute;
	right: 20px;
	bottom: 0px;
	background: rgba(0, 0, 0, 0.9);
	font-size: 18px;
	line-height: 23px;
	z-index: 10;
	padding: 6px;
	padding-right: 10px;
	padding-left: 10px;
	border-top-left-radius: 6px;
	color: rgba(255,255,255,0.5);
}
#newsStatV {
	color: #fff;
}
#newsBody {
	overflow-y: scroll;
	overflow-x: hidden;
	height: 200px;
	min-width: 360px;
}
.newsIMG {
	width: 360px;
	max-width: 400px;
	height: 200px;
	margin-right: 10px;
	margin-bottom: 7px;
	object-fit: fill;
	cursor: pointer;
	border-radius: 6px;
}
.newsIMG:hover {
	opacity: 0.9;
}

#tlInfHold {
}

#newUserGuide {
	display: none !important;
	border: none;
	animation: none;
}

.helpGuidOpn {
	font-size: 15px;
	color: rgba(251,192,45, 1);
}
#helpPIcon {
	width: 130px;
	height: 130px;
	margin-top: -5px;
	margin-left: -5px;
	margin-bottom: -10px;
	background-color: rgba(0,0,0,0.5);
	border-radius: 5px;
}
#helpPText {
  font-size: 30px;
}
#helpPText2{
  font-size: 25px;
}
.helpTxtHol {
	display: inline-block;
	vertical-align: top;
	color: #fff;
	margin-left: 4px !important;
	cursor: pointer;
	pointer-events: all;
}
.helpTxtHol:hover {
	opacity: 0.8;
}
.youNewDiv {
	margin-top: 10px;
	color: #fff;
	background-color: rgba(0,0,0,0.5);
	padding: 10px;
	border-radius: 4px;
	min-width: 240px;
	cursor: pointer;
	pointer-events: all;
  display: none;
}
#homeStoreAd {
	background: rgba(0, 0, 0, 0.5);
    width: 300px;
    height: 250px;
	pointer-events: all;
	cursor: pointer;
	border-radius: 4px;
	box-sizing: border-box;
}
#homeStoreAdC {
	position: relative;
	background-position-y: top;
	width: 100%;
	height: 100%;
	animation: backMov 18s infinite;
}
@keyframes backMov {
 	50% {background-position-y: bottom;}
}
#bundleQuickBuyB {
	position: absolute;
    right: 11px;
    bottom: 10px;
    color: #fff;
    background: #cc51f8;
    padding: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 5px;
}
.bundleHomeDiscountLabel {
	position: absolute;
	right: 11px;
	bottom: 50px;
	background: #ff4444;
	color: #fff;
	padding: 6px 12px;
	border-radius: 5px;
	font-size: 16px;
	font-weight: bold;
	filter: drop-shadow(0px 0px 4px black);
	z-index: 10;
}
#bundleQuickBuyB.bundleHomePrice--discount {
	background: linear-gradient(135deg, #ff6b6b 0%, #ff4444 100%);
	box-shadow: 0 4px 12px rgba(255, 68, 68, 0.4);
	animation: bundleHomePriceGlow 2s ease-in-out infinite;
}
@keyframes bundleHomePriceGlow {
	0%, 100% {
		box-shadow: 0 4px 12px rgba(255, 68, 68, 0.4);
	}
	50% {
		box-shadow: 0 4px 20px rgba(255, 68, 68, 0.7), 0 0 30px rgba(255, 68, 68, 0.3);
	}
}
#bundleQuickBuyB.bundleHomePrice--discount:hover {
	filter: brightness(1.1);
	animation: none;
}
#homeStoreAdTx {
	color: #fff;
	font-size: 17px;
	width: 210px;
	position: absolute;
	left: 16px;
	top: 12px;
	filter: drop-shadow(0px 0px 8px black);
}
#homeStoreAd:hover {
	opacity: 0.8;
}
#guidePopupH {
	text-align: center;
	pointer-events: all;
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	z-index: 9999;
}
#guidePopup {
	pointer-events: all;
	display: inline-block;
	position: absolute;
	width: 1200px;
	height: 600px;
	z-index: 99999;
	background-color: #3b3b3b;
	border-radius: 6px;
	overflow-y: scroll;
	top: 260px;
	left: 50%;
	transform: translateX(-50%);
}
.guideHeader {
	color: #fff;
	font-size: 35px;
	text-align: center;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.3);
	padding-top: 15px;
	border-bottom: 4px solid rgba(255, 255, 255, 0.2);
	padding-bottom: 15px;
	margin-bottom: 20px;
}
.guideSubH {
	padding-bottom: 20px;
	text-align: left;
	border-bottom: 4px solid rgba(255, 255, 255, 0.2);
}
#moveGuidSlid {
	vertical-align: top;
	display: inline-block;
	margin-left: 20px;
	margin-right: 20px;
	height: 370px;
	width: auto;
}
.guideInfoT {
	position: absolute;
	right: 20px;
	top: 120px;
	width: 690px;
	display: inline-block;
	color: rgba(255, 255, 255, 0.65);
	font-size: 20px;
}
.guideStep {
	overflow: hidden;
	color: #fff;
	font-size: 22px;
	padding: 10px;
	padding-bottom: 20px;
	margin-left: 20px;
	margin-right: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.guStepS {
	margin-bottom: 10px;
}
.guStepS:not(:last-child) {
	border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}
.guideStepV {
	font-size: 20px;
	float: right;
	display: inline-block;
	color: rgba(255, 255, 255, 0.7);
	width: 500px;
}
.guideFullTx {
	margin-bottom: 18px;
	color: #fff;
	margin-left: 20px;
	margin-right: 20px;
	font-size: 22px;
	text-align: center;
}
.guideSIcon {
	margin-right: 10px;
	width: 50px;
	height: 50px;
}

#streamContainer {
	pointer-events: all;
	padding: 10px;
	text-align: left;
	font-size: 16px;
	border-radius: 4px;
	background-color: rgba(0, 0, 0, 0.5);
	color: rgba(255, 255, 255, 0.4);
	display: flex;
    gap: 8px;
}
.streamItem {
	margin-top: 0px;
	cursor: pointer;
	pointer-events: all;
}
.streamName {
	color: #fff;
	font-size: 16px;
	display: inline-block;
	opacity: 1;
}
.streamPartner {
	color: #6034b2;
	font-size: 24px;
	text-shadow: none;
	position: relative;
	margin-left: 5px;
	top: 4px;
}
.streamName:hover {
	opacity: 0.7;
}

.strmCat {
	color: #fff;
	font-size: 20px;
	display: inline-block;
	margin-bottom: 5px;
	opacity: 1;
}
.twitch {
	text-shadow:
		-1px -1px 0 #6441A4,
		1px -1px 0 #6441A4,
		-1px 1px 0 #6441A4,
		1px 1px 0 #6441A4,
		-2px -2px 0 #6441A4,
		2px -2px 0 #6441A4,
		-2px 2px 0 #6441A4,
		2px 2px 0 #6441A4;
}
.youtube {
	text-shadow:
		-1px -1px 0 #cc0000,
		1px -1px 0 #cc0000,
		-1px 1px 0 #cc0000,
		1px 1px 0 #cc0000,
		-2px -2px 0 #cc0000,
		2px -2px 0 #cc0000,
		-2px 2px 0 #cc0000,
		2px 2px 0 #cc0000;
}
.friendHeader {
	text-shadow:
		-1px -1px 0 #424242,
		1px -1px 0 #424242,
		-1px 1px 0 #424242,
		1px 1px 0 #424242,
		-2px -2px 0 #424242,
		2px -2px 0 #424242,
		-2px 2px 0 #424242,
		2px 2px 0 #424242;
}
.esports {
	text-shadow:
		-1px -1px 0 #2196F3,
		1px -1px 0 #2196F3,
		-1px 1px 0 #2196F3,
		1px 1px 0 #2196F3,
		-2px -2px 0 #2196F3,
		2px -2px 0 #2196F3,
		-2px 2px 0 #2196F3,
		2px 2px 0 #2196F3;
}
.strmIcn {
	display: inline-block;
	width: 42px;
	height: 42px;
	margin-right: 4px;
	border-radius: 50%;
	margin-bottom: -3px;
	background-color: rgba(0,0,0,0.5);
}
.strmLink {
	color: white;
	font-size: 14px;
	display: inline-block;
}
.strmPartner {
	margin-left:4px;
	margin-top:-5px
}
.strmViews {
	font-size: 11px;
	color: #fbc02d;
	max-width: 200px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.tabA {
	background-color: rgba(0, 0, 0, 0.7) !important;
	cursor: default !important;
}
.menuLink {
	font-size: 22px;
	pointer-events: auto;
}
.terms {
	font-size: 14px;
	vertical-align: middle;
	cursor: pointer;
	margin-top: 0;
	margin-left: 10px;
	color: rgba(255, 255, 255, 0.35);
	text-decoration: none;
	pointer-events: all;
	display:inline-block;
}
.terms:hover {
	text-decoration: underline;
}
.standout {
	color: #fff;
}

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';
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#teamSelector {
	position: absolute;
	bottom: 225px;
	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);
}

#purchaseResponse {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	pointer-events: all;
	z-index: 99999999999;
}
#purchaseRespH {
	position: absolute;
	display: inline-block;
	padding: 15px;
	padding-left: 25px;
	padding-right: 25px;
	width: 600px;
	font-size: 23px;
	background-color: #fff;
	top: 40%;
	left: 50%;
	transform: translateX(-50%);
}
#purchaseHolder {
	display: none;
	z-index: 999999999999999999999999999999999;
	position: absolute;
	width: 100%;
	height: 100%;
}
#purchaseBack {
	pointer-events: all;
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: rgba(0, 0, 0, 0.75);
}
#purchaseSelector {
	width: 715px;
	position: absolute;
	display: inline-block;
	border-radius: 6px;
	padding: 25px;
	font-size: 28px;
	background-color: #242424;
	top: 30%;
	left: 50%;
	transform: translateX(-50%);
	pointer-events: all;
}

#paypal-button {
	margin-top: 10px;
	height: 50px;
	display: inline-block;
	vertical-align: bottom;
}
#paypal-button:hover {
	transform: scale(1.02);
	filter: brightness(1.1);
}
.pay-button {
	width: 332px;
	margin-top: 6px;
	display: inline-block;
	cursor: pointer;
	text-align: center;
	padding: 10px;
	background-color: rgba(0,0,0,0.8);
	color: #fff;
	font-size: 15px;
	vertical-align: super;
	border-radius: 6px;
}
.pay-button:hover {
	transform: scale(1.02);
	filter: brightness(1.1);
}
#xsollaPayB {
	width: 333px;
	display: inline-block;
	cursor: pointer;
	text-align: center;
	padding: 10px;
	background-color: #7a38aa;
	color: #fff;
	font-size: 15px;
	vertical-align: super;
	border-radius: 6px;
}
#xsollaPayB:hover {
	transform: scale(1.02);
	filter: brightness(1.1);
}

#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);
}
.centerUIB {
	padding: 0px;
	padding-left: 10px;
	padding-right: 10px;
	line-height: 100px;
	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%;
}

#game-overlay {
	image-rendering: optimizeSpeed;
	image-rendering: -moz-crisp-edges;
	image-rendering: -webkit-crisp-edges;
	image-rendering: -o-crisp-edges;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	image-rendering: -webkit-optimize-contrast;
}
#overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
#vignette {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
	box-shadow: black 0px 0px 1000px inset;
}

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

#gameUI {
	pointer-events: none;
	width: 100%;
	height: 100%;
	text-align: center;
	z-index: 1;
}
.rnkIcon {
	width: 22px;
	height: 22px;
	margin-right: 10px;
}
.xpBar {
	margin-top: 5px;
	margin-bottom: 5px;
	width: calc(100% - 10px);
	height:31px;
	padding: 6px;
	background-color: rgba(0, 0, 0, 0.6);
	border-radius: 4px;
	position: relative;
}
.xpBarB {
	height: 100%;
	background-image: linear-gradient(to right, #FF6A0B, #fbc02d);
}
.xpBarV {
	color: #fff;
	position: absolute;
	height: 100%;
	text-align: center;
	top: 5px;
	left: 0;
	right: 0;
	font-size: 16px;
	line-height: 33px;
}

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

#imgFlash {
	display: none;
	position: absolute;
	background-color: #fff;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
#bloodDisplay {
	pointer-events: none;
	display: none;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	image-rendering: pixelated;
	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;
}

#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);
}

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

#perkHolder {
	position: absolute;
	z-index: 1;
	right: 15px;
	bottom: 345px;
	width: 70px;
}
.perkItem {
	position: relative;
	display: inline-block;
	background-size: contain;
	width: 70px;
	height: 70px;
	margin: 3px 0px;
	background-color: var(--div-black);
	border-radius: 4px;
}
.perkItemInner {
	background-color: var(--div-grey);
	margin: 3px;
	padding: 2px 4px;
	display: inline-block;
}
.perkCnt {
	position: absolute;
	text-align: right;
	right: 5px;
	bottom: 0px;
	color: #fff;
	font-size: 18px;
}

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

#powerUpHolder {
	vertical-align: bottom;
	display: inline-block;
	margin-right: 20px;
	margin-bottom: -4px;
}
#krTagHolder {
	vertical-align: bottom;
	display: inline-block;
	margin-right: 20px;
}
#giftTagHolder {
	vertical-align: bottom;
	display: inline-block;
	margin-right: 20px;
	margin-bottom: -4px;
}
#bhHolder {
	display: none;
	vertical-align: bottom;
	display: inline-block;
	margin-right: 20px;
	margin-bottom: -4px;
}
.bhHead {
	background: #a77860;
	height: 40px;
	width: 40px;
	margin: 0px auto;
}
.bhBody {
	background: #3d3d3d;
	height: 70px;
	width: 40px;
	display: table-cell;
}
.bhArm {
	background: #3d3d3d;
	height: 70px;
	width: 20px;
	display: table-cell;
}
.bhLeg {
	background: #232323;
	height: 70px;
	width: 20px;
	display: table-cell;
}
.killStreakItem {
	position: relative;
	display: inline-block;
	width: 70px;
	height: 70px;
	margin: 0px 3px;
	background-color: var(--div-black);
	border-radius: 4px;
}

.killStreakItemInner {
	background-color: var(--div-grey);
	margin: 3px;
	padding: 2px 4px;
	display: inline-block;
}
.killStreakKey {
	left: 2px;
	top: 2px;
	color: #fff;
	font-size: 12px;
	position: absolute;
	background-color: rgba(0, 0, 0, 0.5);
	padding: 2px 8px;
	text-align: center;
	border-bottom-right-radius: 4px;
}
.killStreakCnt {
	position: absolute;
	text-align: right;
	right: 4px;
	bottom: 4px;
	color: #fff;
	font-size: 12px;
}

#centerLeaderDisplay {
	display: none;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	overflow-y: auto;
	pointer-events: auto;
	font-size: 20px;
	text-align: left;
	color: rgba(255, 255, 255, 0.7);
	row-gap: 10px;
}
.centerLeaderContainer {
	text-align: left;
	color: #fff;
	border-radius: 4px;
	background-color: var(--div-black);
}
.centerLeaderContainerInner {
	margin: 3px;
	background-color: var(--div-grey);
	padding: 10px;
}

.newLeaderItem {
	display: flex;
	font-size: 15px;
}
.newLeaderCounter {
	margin-right: 8px;
	width: 20px;
	color: rgba(255, 255, 255, 0.7);
}
.newLeaderName, .newLeaderNameM, .newLeaderNameF {
	color: #eb5656;
	flex-grow: 1;
	padding-left: 5px;
	overflow: hidden;
	white-space: nowrap;
}
.newLeaderNameF {
	color: rgba(255, 255, 255, 0.6);
}
.newLeaderNameM {
	color: #fff;
}
.newLeaderScore {
	margin-left: 8px;
	text-align: right;
	color: rgba(255, 255, 255, 0.7);
}
.newLeaderRanked > img {
	width: 22px;
	height: 22px;
	margin-left: 2px;
}

.statIcon {
	color: rgba(255, 255, 255, .6);
	display: inline-block;
	margin-bottom: 10px;
	font-size: 17px;
	border-radius: 4px;
	background-color: var(--div-black);
}

#killsVal, #deathsVal, #streakVal, #myScoreVal, #kdVal {
	color: rgba(255, 255, 255, 0.7);
}
#killsIcon, #deathsIcon, #streakIcon, #kdIcon {
	width: 24px;
	height: 24px;
	image-rendering: pixelated;
}

.topRightCounters {
	width: auto;
}
#recTimer {
	display: inline-block;
	font-size: 18px;
	margin-top: 3px;
	color: #fff;
	vertical-align: top;
	max-width: 38px;
	overflow: hidden;
}
#speakerDisplay {
	text-align: left;
	z-index: 0;
}
.voiceOn:after {
	content: "mic";
	color: #76FF03;
}
.voiceOff:after {
	content: "mic_off";
}
#chatHolder {
	position: absolute;
	z-index: 1;
	max-width: 413px;
	left: 20px;
	bottom: 20px;
}

#uiBase.onMenu #chatHolder {
	left: 20px;
	bottom: 20px;
}

#uiBase.onCompMenu #chatHolder {
	left: 20px;
	bottom: 150px;
}

#uiBase.onGame #chatHolder {
	left: 15px;
	bottom: 130px;
}

#uiBase.onSpect #chatHolder {
	left: 20px;
	bottom: 20px;
}

#uiBase.onEndScrn #chatHolder {
	left: 20px;
	bottom: 20px;
}

#uiBase.onGameM #chatHolder {
	display: none;
}

#emojiPanelHolder {
	position: relative;
}

#chatInputHolder {
	width: 413px;
	font-size: 9px;
	box-sizing: border-box;
	background-color: var(--div-black);
	pointer-events: all;
	text-align: center;
	color: #fff;
	border-radius: 4px;
	display: inline-grid;
	grid-template-columns: auto 270px auto;
	padding-top: 0px!important;
	box-shadow: unset!important;
}

#chatInput {
	width: 255px;
	padding: 6px!important;
	padding-left: 10px!important;
	color: #fff;
	font-size: 14px;
	box-sizing: border-box;
	background-color: rgba(0, 0, 0, .4);
	border: 2px solid rgba(0, 0, 0, .1);
	pointer-events: all;
	border-radius: 4px;
}
#chatInput::placeholder {
	color: rgba(255, 255, 255, 0.7);
}

#chatSwitch {
	font-size: 33px;
	pointer-events: all;
	color: #fff;
	vertical-align: middle;
	margin-bottom: 3px;
	cursor: pointer;
}
#chatSwitch:after {
	content: attr(data-tab);
}
#chatSwitchHolder {
	display: inline-block;
	vertical-align: bottom;
	margin-top: 3px;
	transform: none !important;
}
#chatSwitchHolder:hover > #chatSwitch:after {
	content: "autorenew";
}

#chatList {
	overflow-y: hidden;
	overflow-y: auto;
	overflow-x: hidden;
	z-index: 999999;
	border-radius: 5px 5px 0 0;
	background-color: rgba(0,0,0,.4);
	pointer-events: all;
	position: relative;
	direction: rtl;
	text-align: left;
	box-shadow: unset!important;
}

#chatList::-webkit-scrollbar-track {
	border-radius: unset;
	background-color: rgba(0, 0, 0, 0.25);
}

#chatList::-webkit-scrollbar {
	width: 6px
}

#chatList::-webkit-scrollbar-thumb {
	border-radius: 2px;
	border-color: #36393f
}

.chatItem {
	word-wrap: break-word;
	overflow-wrap: anywhere;
	display: inline-block;
	margin-bottom: 10px;
	margin-top: 10px;
	margin-left: 12px;
	color: #fff;
	font-size: 14px;
	max-width: 100%;
}
.chatMsg {
	color: rgba(255,255,255,0.7)
}
.tradeMsg {
	cursor: pointer;
	color: rgba(255, 255, 255, 0.7);
}
.tradeMsg:hover {
	text-decoration: underline;
}
.chatMsgAction {
	cursor: pointer;
}
.chatMsgAction:hover {
	text-decoration: underline;
}

.serverPCount, .serverRegion {
	float: right;
	display: inline-block;
}
.serverPing {
	font-size: 37px!important;
	float: right;
	margin-right: 5px;
	display: inline-block;
}

#settSearch {
	width: 100%;
	text-align: left;
	font-size: 16px;
	box-sizing: border-box;
	border: none;
	background-color: #e3e3e3;
	border-radius: 4px;
	padding: 6px 10px 5px;
}

#topMidHold {
	transform: scale(0.8);
	width: 100%;
	text-align: center;
	position: absolute;
	top: -5px;
}

#gameMessage {
	color: #fff;
	z-index: 10;
	font-size: 22px;
}
#roundsDisplay {
	text-align: center;
	z-index: 3;
	margin-top: 10px;
	color: #fff;
	margin-bottom: 10px;
	will-change: transform;
	transform: translateZ(0);
	border-radius: 6px;
	vertical-align: top;
	background-color: rgba(0, 0, 0, 0.4);
}
#roundsVal {
	color: #ffffff;
	font-size: 29px;
	will-change: transform;
	transform: translateZ(0);
}
#roundSub {
	font-size: 19px;
	color: rgba(255, 255, 255, 0.8);
}
.roundScrV {
	vertical-align: top;
	background: rgba(0, 0, 0, 0.4);
	display: inline-block;
	font-size: 42px;
	padding-left: 30px;
	padding-right: 30px;
	height: 96px;
	line-height: 96px;
	color: rgba(255, 255, 255, 0.6);
	border-bottom: 6px solid white;
}

#timerHolder {
	text-align: center;
	z-index: 3;
	will-change: transform;
	transform: translateZ(0);
	margin-bottom: 5px;
}
#timerHolder.topLeftOld {
	text-align: left !important;
	margin-right: 10px;
	margin-bottom: 10px!important;
	border-radius: 4px;
	vertical-align: top!important;
	width: unset!important;
	background-color: var(--div-black);
}
#timerInner.topLeftOld {
	padding: 10px;
	padding-left: 10px;
	padding-right: 10px;
	margin: 3px;
	background-color: var(--div-grey);
	display: inline-block;
}
#timerVal {
	color: #ffffff;
	font-size: 15px;
	will-change: transform;
	transform: translateZ(0);
}
#timerVal.topLeftOld {
	padding-left: 3px;
	font-size: 32px!important;
	text-shadow: unset!important;
}
#timerIcon {
	display: none;
}
#timerIcon.topLeftOld {
	display: inline-block;
	width: 45px;
	height: 45px;
	image-rendering: pixelated;
}
#matchInfo {
	z-index: 3;
	color: #fff;
	font-size: 12px;
	text-align: center;
	margin-top: 5px;
	margin-bottom: 10px;
	display: block;
}
#matchInfo.topLeftOld {
	text-align: left!important;
	font-size: 15px!important;
	margin-top: 0!important;
	margin-bottom: 0!important;
	display: inline-block!important;
	width: unset !important;
	text-shadow: unset!important;
}

#topLeftHolder {
	text-align: left;
	position: absolute;
	top: 15px;
	z-index: 10;
	left: 15px;
}
.debugInfo {
	display: inline-block;
	vertical-align: top;
	text-align: right;
}
.packetInfo {
	display: inline-block;
	vertical-align: top;
	margin-left: 10px;
}
#pingDisplay {
	margin-bottom: 5px;
}
#pingDisplay, #fpsDisplay, #ingressDisplay, #egressDisplay, #tickDisplay {
	font-size: 14px;
	vertical-align: top;
	color: rgba(255, 255, 255, 0.5);
}
#pingText, #ingressPacketCount, #ingressDataSize, #egressPacketCount, #egressDataSize, #tickPacketCount {
	font-size: 14px;
	vertical-align: top;
	color: rgba(255, 255, 255, 0.5);
}
#ingressDisplay .material-icons, #egressDisplay .material-icons, #tickDisplay .material-icons {
	vertical-align: top;
	font-size: 32px;
	margin-right: -5px;
	margin-top: -5px;
	color: rgba(255, 255, 255, 0.5);
}
#ingressPacketCount, #ingressDataSize, #egressPacketCount, #egressDataSize, #tickPacketCount {
	display: inline-block;
	text-align: right;
	width: 110px;
	font-size: 14px;
}
#ingressPacketCount, #egressPacketCount, #tickPacketCount {
	width: 75px;
}

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

.tScoreT {
	color: rgba(255, 255, 255, 0.6);
	font-size: 18px;
}
.tScoreM {
	color: rgba(255, 255, 255, 0.6);
	font-size: 14px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	max-width: 175px;
	display: inline-block;
	line-height: 28px;
	vertical-align: sub;
}
.tScoreF {
	vertical-align: sub;
	font-size: 30px !important;
	color: #eb5656;
	padding-left: 5px;
	padding-right: 5px;
}
.tScoreF.you {
	color: #5699EB;
}
.tScoreC {
	width: 20px;
	height: 20px;
	display: inline-block;
	margin-right: 10px;
	background-color: #eb5656;
}
.tScoreC.you {
	background-color: #ffffff;
}

#bottomLeftClassImg {
	width: 100%;
	height: 100%;
	image-rendering: pixelated;
}
#bottomLeftHolder {
	z-index: 10;
	position: absolute;
	bottom: 15px;
	left: 15px;
	text-align: left;
}
#bottomLeftHealth {
	color: #fff;
	font-size: 20px;
	will-change: transform;
}
#bottomLeftChallIcon {
	width: 28px;
	height: 28px;
	image-rendering: pixelated;
	display: inline-block;
}
#maxHP {
	color: rgba(255, 255, 255, 0.8);
}
#bottomLeftHealthBar {
	display: flex;
	padding: 9px;
	column-gap: 3px;
	background-color: var(--div-grey);
}
.nHealthBarSeg {
	display: inline-block;
	width: 100%;
	height: 30px;
	background-color: rgba(0, 0, 0, 0.4);
}
.nHpBSeg {
	height: 100%;
	border-radius: 3px;
}

#weapHolder {
	position: absolute;
	z-index: 1;
	right: 15px;
	bottom: 90px;
	row-gap: 5px;
}
.weapItem {
	position: relative;
	text-align: right;
	color: #fff;
	font-size: 17px;
	word-break: break-all;
	overflow-wrap: break-word;
	border-radius: 4px;
	background-color: var(--div-black);
}
.weapItemInner {
	color: rgba(255, 255, 255, 0.7);
	background-color: var(--div-grey);
	margin: 3px;
	padding: 2px 10px;
	display: inline-block;
}
.weapKey {
	left: 2px;
	top: 2px;
	color: #fff;
	font-size: 14px;
	position: absolute;
	background-color: rgba(0, 0, 0, 0.5);
	padding: 2px 8px;
	text-align: center;
	border-bottom-right-radius: 4px;
}
.weapSkin {
	left: 2px;
	z-index: 2;
	bottom: 2px;
	background-color: var(--div-black);
	font-size: 10px;
	color: #fff;
	position: absolute;
	text-align: left;
	padding: 2px 5px;
	max-width: 122px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.weapNametag {
	left: 2px;
	z-index: 2;
	bottom: 2px;
	background-color: var(--div-black);
	font-size: 10px;
	color: #ffdd57;
	font-style: italic;
	position: absolute;
	text-align: left;
	padding: 2px 5px;
	max-width: 122px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.weapStreakHolder {
	right: 140px;
	z-index: 2;
	top: 0px;
	background-color: var(--div-black);
	border-radius: 3px;
	font-size: 14px;
	color: #fff;
	position: absolute;
	text-align: right;
	width: max-content;
}
.weapStreakInner {
	color: rgba(255, 255, 255, 0.7);
	background-color: var(--div-grey);
	margin: 3px;
	padding: 2px 5px;
	display: inline-block;
	font-size: 12px;
}
.weapStreak {
	font-size: 12px;
	color: #fff;
	margin-right: 4px;
}
.weapIcon {
	width: 110px;
	height: 55px;
}
.weaponChatIcon {
	width: 58px;
	height: 28px;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: -5px;
	transform: scaleX(-1);
}
.meleeChatIcon {
	width: 58px;
	height: 28px;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom:-12px;
	transform: scaleX(-1);
}
.thrownChatIcon {
	width: 58px;
	height: 28px;
	margin-right: -22px;
	margin-bottom: -8px;
	margin-left: 11px;
	opacity: 0.9;
	transform: scaleX(-1);
}
.fistChatIcon {
	width: 58px;
	height: 28px;
	opacity: 0.7;
	margin-right: -27px;
	margin-left: 5px;
	margin-bottom: -11px;
	transform: scaleX(-1);
}
.headShotChatIcon {
	width: 28px;
	height: 28px;
	margin-right: 8px;
	margin-bottom: -4px;
	margin-left: -5px;
}
.streakChatIcon {
	margin-right: 5px;
	width: 30px;
	height: 30px;
	margin-left: 5px;
	margin-bottom: -6px;
}

#reloadMsg {
	display: none;
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);
	bottom: 35px;
	font-size: 25px;
	line-height: 75px;
	padding-left: 60px;
	padding-right: 60px;
	color: #f1f1f1;
	border: 2px solid #fff;
	border-radius: 4px;
	background: none;
	background-color: rgba(0,0,0,0.2);
}

#hiddenMsg {
	display: none;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	margin-top: 280px;
	font-size: 27px;
	line-height: 75px;
	color: #fff;
}

#interactMsg {
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);
	font-size: 25px;
	line-height: 75px;
	padding-left: 45px;
	padding-right: 45px;
	color: #f1f1f1;
	border: 2px solid #fff;
	border-radius: 4px;
	background: none;
	background-color: rgba(0,0,0,0.2);
}
#mobileUI #interactMsg {
	pointer-events: all;
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);
	font-size: 9px;
	line-height: 25px;
	padding-left: 15px;
	padding-right: 15px;
	color: #f1f1f1;
	border: 2px solid #fff;
	border-radius: 4px;
	background: none;
	background-color: rgba(0,0,0,0.2);
	z-index: 99999999999999;
}

#propControlHolder {
	position: absolute;
	right: 20px;
	bottom: 20px;
	font-size: 20px;
	border-radius: 4px;
	text-align: left;
	min-width: 270px;
	max-width: 330px;
	display: inline-block;
	background-color: var(--div-black);
}

#stalkerControlHolder {
	position: absolute;
	right: 20px;
	bottom: 180px;
	font-size: 20px;
	border-radius: 4px;
	text-align: left;
	min-width: 270px;
	max-width: 330px;
	display: inline-block;
	background-color: var(--div-black);
}

#stalkerLivingInfoHolder {
	position: absolute;
	right: 20px;
	bottom: 340px;
	font-size: 20px;
	border-radius: 4px;
	text-align: left;
	min-width: 270px;
	max-width: 400px;
	display: inline-block;
	background-color: var(--div-black);
}

#stalkerLivingInfoText {
	color: #fff;
	line-height: 1.5;
	font-size: 16px;
	padding: 10px;
}

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

#ammoHolder {
	border-radius: 4px;
	background-color: var(--div-black);
	display: inline-block;
	font-size: 29px;
	letter-spacing: -2px;
	background-repeat: no-repeat;
	background-size: 0% 100%;
	background-image: url('../img/blank_2.png');
	transform: translateZ(0);
}
#ammoMax {
	color: rgba(255, 255, 255, 0.7);
	display: inline-block;
}
#ammoVal {
	color: #fff;
	display: inline-block;
	margin-left: 10px;
}
#ammoIcon {
	margin-right: 10px;
	margin-left: 5px;
	vertical-align: bottom;
	height: 43px;
}

#crosshair {
	position: absolute;
	margin: 0;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	z-index: 3;
	transform: translate(-50%, -50%);
	will-change: transform;
}

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

@keyframes grow {
	from {
		opacity: 0.3;
		font-size: 44px;
	}
}
#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: 36px;
	animation: grow 0.8s infinite alternate;
}
.c2pBtn {
	background-color: var(--yellow);
	color: #000000!important;
	padding: 14px 0px;
	font-size: 38px !important;
	border-radius: 4px;
	animation: unset !important;
	top: unset !important;
	bottom: 109px !important;
	width: 700px;
}
.c2pBtnMid {
	background-color: var(--yellow);
	color: #000000!important;
	padding: 45px 0px;
	font-size: 38px !important;
	border-radius: 4px;
	animation: unset !important;
	width: 700px;
}
#instructionsSubtitle {
	margin-top: 5px;
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.5em;
}
#instructions i, #instructionsSubtitle i {
	color: rgba(255, 255, 255, 0.8);
}
.instructionsButton {
	pointer-events: all;
}
#instructionsFadeBG {
	transition: opacity 0.7s ease-in-out;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: #222222;
	opacity: 1;
	background-repeat:no-repeat;
	background-size: cover;
}
#instructionsUpdateBG {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	background-repeat:no-repeat;
	background-size: cover;
}
#instructionsUpdateCredit {
	position: absolute;
	bottom: 5px;
	left: 5px;
	color: rgb(255 255 255);
	display: none;
	pointer-events: all;
	cursor: pointer;
	font-size: 23px;
}
#instructionsUpdate {
	display: none;
	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;
	padding: 5px;
	width: 600px;
	border-radius: 4px;
	box-shadow: 2px 2px 8px rgb(0 0 0 / 50%);
	background-color: #353535;
}
.instructionsHeader {
	width: calc(100% + 5px) !important;
	z-index: 9999;
	position: sticky;
	top: -20px;
	font-size: 30px;
	color: #fff;
	border-bottom: 4px solid #989898;
	background-color: #111111;
	box-shadow: 0px 10px 10px #00000052, 0px 0px 0px #000;
	margin: -5px 0px 10px -5px !important;
	padding: 10px 0px 10px 5px;
	border-radius: 4px 4px 0px 0px;
}
.instructionsTabs {
	margin-top: 15px !important;
	width: calc(100% + 10px);
	margin-left: -5px;
	margin-bottom: -5px;
	position: relative;
	display: table;
	table-layout: fixed;
	background-color: #111111;
	box-shadow: 0px -10px 10px #00000052, 0px 0px 0px #000;
	border-radius: 0px 0px 4px 4px;
}
.instructionsTab {
	text-align: center;
	display: table-cell;
	color: rgba(255, 255, 255, 0.7);
	cursor: pointer;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 10px;
	padding-bottom: 10px;
	line-height: 35px;
	font-size: 16px;
	border-top: 4px solid #989898;
}
.instructionsTab:hover {
	border-color: rgba(0,0,0,1);
	cursor: pointer;
}
#victorySubHolder {
	position:absolute;
	width:100%;
	text-align:center;
	top: -160px;
}
#victorySub {
	width: 800px;
	user-select: none;
}
#endUI {
	position: absolute;
	width: 100%;
	height: 100%;
	text-align: center;
	pointer-events: all;
}
#endInfo {
	display: none;
	position: absolute;
	width: 100%;
	top: 0;
	text-align: center;
	margin-top: -35px;
}

#endTable {
	width: 100%;
	padding: 10px;
	text-align: left;
	border-radius: 6px;
	overflow-y: auto;
	height: min-content;
	vertical-align: top;
	max-height: 100%;
	background-color: rgba(0,0,0,.2);
	display: table;
	border-spacing: 0px;
}
.endTableN {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	margin-left: 3px;
	margin-right: 5px;
} .endTableN:hover {
	color: rgba(255, 255, 255, 1);
	text-decoration: underline;
} .endTableN:visited {}
.endTablePfp {
	width: 35px;
	height: 35px;
	vertical-align: middle;
	margin-right: 10px;
	margin-top: -5px;
	border-radius: 50px;
	background: rgba(0,0,0,0.7);
	border: 3px solid #818181;
}

.endTableRanked {
	display: inline-block;
	margin-left: 2px;
}
.endTableRankedIcon {
	width: 28px;
	height: 28px;
	margin-top: 2px;
}

#endMidHolder {
	position: absolute;
	left: 50%;
	bottom: 150px;
	transform: translateX(-50%);
	margin-top: 20px;
	width: 100%;
	max-height: calc(100% - 390px);
}
#endTable td {
	white-space: nowrap;
	padding-bottom: 5px;
	padding-top: 5px;
}
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);
}

.reportBut {
	text-align: center;
	color: #eb5656;
	font-size: 40px!important;
	padding-top: 4px;
	padding-bottom: 4px;
	cursor: pointer;
	transition: transform .1s ease-out;
}
.reportBut:hover {
	color: #fff;
	transform: scale(0.95);
}
.shareBut {
	color: #fff !important;
}

#friendList {
	text-align: center;
	width: 100%;
	margin-top: 10px;
}
.frndQickJoin {
	position: absolute;
	right: 0px;
	top: 0px;
}
.frndQickJoin:hover {
	transform: scale(1.15);
	opacity: 0.9;
}
.frndQickJoin:active {
	transform: scale(0.9);
}
.onStatus {
	width: 18px;
	height: 18px;
	border-radius: 20px;
	margin-right: 10px;
	display: inline-block;
}
.folPfp {
	width: 70px;
	height: 70px;
	border-radius: 70px;
	background-color: rgba(255,255,255,0.4);
	margin-right: 10px;
	image-rendering: pixelated;
	border: 4px solid #8a8a8a;
}
.folInfHldr {
	margin-top: 4px;
	display: inline-block;
	vertical-align: top;
}
.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;
}

#endTimer {
	line-height: 15px;
	margin-top: 188px;
	font-size: 30px;
	z-index: 10000;
	color: #d9d9d9;
	font-style: italic;
	display: inline-block;
}

.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.sm {
	transform: unset;
}
.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%;
	left: 50%;
	transform: translateX(-50%);
	position: absolute;
	display: inline-block;
}

#vouchRes {
	display: inline-block;
	margin-top: 10px;
	color: rgba(255, 255, 255, 0.3);
}

#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: linear-gradient(to right, rgba(0,0,0,0) 0%,
		rgba(20,20,20,0.7) 40%,rgba(20,20,20,0.9) 60%,rgba(0,0,0,0) 100%);
}
#spinUIBtns {
	display: none;
	z-index: 99999999999;
	position: absolute;
	bottom: 142px;
	left: 50%;
	transform: translate(-50%, 0);
}
#spinAgainBtn > i {
	animation-name: spin;
	animation-duration: 2000ms;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
#spinAgainBtn {
	display: inline-block;
	padding-left: 22px;
	padding-right: 22px;
}
#spinInfoBtn {
	display: inline-block;
	padding-left: 10px;
	padding-right: 10px;
}
#spinEquipBtn {
	display: inline-block;
	padding-left: 10px;
	padding-right: 10px;
}
#spinNextBtn {
	display: inline-block;
	padding-left: 10px;
	padding-right: 10px;
}
@keyframes spin {
	from {
		transform:rotate(0deg);
	}
	to {
		transform:rotate(360deg);
	}
}
#spinUI {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
}
#spinHolder {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: block;
	pointer-events: auto;
	text-align: center;
}
#spinKR {
	vertical-align: top;
	display: inline-block;
	font-size: 36px;
	color: #fff;
	background-color: rgba(0,0,0,0.8);
	padding: 10px;
	padding-left: 20px;
	padding-right: 20px;
	border-radius: 4px;
}
#spinItems {
	z-index: 999999;
	pointer-events: all;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 10px;
}
.spinPrevIcon {
	margin-left: 10px;
	margin-right: 10px;
	vertical-align: top;
	display: inline-block;
	width: 90px;
	height: 90px;
	background-color: rgba(0, 0, 0, 0.8);
	border-radius: 6px;
	cursor: pointer;
	border: 3px solid #ffffff;
	pointer-events: all;
}
.spinPrevIcon:hover {
	opacity: 0.8;
}
.spinSprayIcon {
	color: #fff;
	z-index: 1;
	background-size: cover !important;
	width: 90px;
	height: 90px;
	border-radius: 6px;
	cursor: pointer;
	pointer-events: all;
}
.spinSprayDiv {
	display: inline-block;
	vertical-align: top;
	background-color: rgba(0, 0, 0, 0.8);
	margin-left: 10px;
	margin-right: 10px;
	border: 3px solid #ffffff;
	border-radius: 6px;
}
.spinSprayIcon:hover {
	opacity: 0.8;
}
#spinTHold {
	position: absolute;
	top: 6px;
	left: 28px;
}
#spinPromo {
	display: none;
	position: absolute;
	top: 80px;
	left: 28px;
	padding: 8px 20px;
	font-size: 26px;
	color: #fff;
	background-color: #ff8f00;
	border: 4px solid #fff;
	border-radius: 6px;
	transform: rotate(-5deg);
	z-index: 10;
	pointer-events: none;
	white-space: nowrap;
}
#spinInfo {
	position: absolute;
	top: 5px;
	right: 20px;
	text-align: left;
	color: #fff;
	font-size: 25px;
	background-color: rgba(0, 0, 0, 0.8);
	padding: 10px;
	padding-left: 20px;
	padding-right: 20px;
	border-radius: 4px;
}
.colCub {
	width: 30px;
	height: 30px;
	margin-right: 10px;
	display: inline-block;
}
#spinWindow {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: inline-block;
	height: 1240px;
	width: 1240px;
}
#spinText {
	text-align: center;
	color: #fff;
	font-size: 0;
	vertical-align: middle;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
#spinHeader {
	color: #fff;
}
#spinCost {
	color: rgba(255, 255, 255, 0.5);
	font-size: 0px;
}
#spinUI {
	position: absolute;
	top: 20px;
	font-size: 18px;
}
#spinButton {
	z-index: 13;
	display: inline-block;
	border-collapse: collapse;
	pointer-events: auto;
	cursor: pointer;
	border-radius: 50%;
	background-color: #F44336;
	position: absolute;
	right: 0;
	bottom: 0;
	transform: translate(-50%, -50%);
	left: 50%;
	top: 50%;
	transition: transform .1s ease-out;
}
#spinButton:hover {
	transform: translate(-50%, -50%) scale(1.1);
}
#spinButton:active {
	transform: translate(-50%, -50%) scale(0.9);
}

.smlInput {
	display: inline-block;
	width: 82%;
	padding: 10px;
	padding-left: 15px;
	margin-top: 10px;
	font-size: 18px;
	box-sizing: border-box;
	border: none;
	background-color: rgba(255, 255, 255, 0.25);
	color: rgba(255, 255, 255, 0.8);
	border-radius: 4px;
}
.smlInput::placeholder {
	color: rgba(255, 255, 255, 0.6);
	opacity: 1;
}

.accountInput {
	width: 100%;
	padding: 10px;
	padding-left: 10px;
	font-size: 22px;
	box-sizing: border-box;
	border: none;
	border-radius: 4px;
	margin-top: 20px;
	background-color: rgba(255, 255, 255, 0.25);
	color: rgba(255, 255, 255, 0.8);
}
.accountInput::placeholder {
	color: rgba(255, 255, 255, 0.6);
	opacity: 1;
}

.mapActionHol {
	display: inline-block;
	margin-top: 2px;
	transform: scale(1.3);
}
.mapActionB {
	display: inline-block;
	color: #fff;
	font-size: 25px;
	vertical-align: top;
	cursor: pointer;
	transition: transform .1s ease;
} .mapActionB:hover {
	transform: scale(0.9);
}
.mapActionSep {
	display: inline-block;
	height: 30px;
	margin-left: 5px;
	margin-right: 5px;
}
.mapActionOvrl {
	z-index: 12;
	text-align: center;
	position: absolute;
	opacity: 0;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 40px;
	background: rgba(0,0,0,0.8);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: rgba(255,255,255,0.5);
	font-size: 12px;
}
#compClassPHolder {
	padding-top: 20px;
	padding-bottom: 20px;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: 5;
	pointer-events: all;
	position: absolute;
	width: 100%;
	text-align: center;
	top: 0px;
}
#compBtnLst {
	bottom: 0px;
	padding-bottom: 30px;
	padding-top: 10px;
	background-color: rgba(0, 0, 0, 0.6);
	pointer-events: all;
	position: absolute;
	width: 100%;
	text-align: center;
}
#compTimBox {
	position: absolute;
	width: 100%;
	bottom: 150px;
	text-align: center;
	color: rgba(255, 255, 255, 0.7);
	font-size: 27px;
}
#compTScrsB {
	position: absolute;
	width: 100%;
	top: 133px;
	text-align: center;
	transform: scale(0.7);
}
.compTScrB {
	width: 250px;
	height: 100px;
	line-height: 100px;
	display: inline-block;
	background: rgba(0, 0, 0, 0.6);
	font-size: 50px;
	vertical-align: top;
	color: #fff;
	text-shadow:
		-1px -1px 0 #fff,
		1px -1px 0 #fff,
		-1px 1px 0 #fff,
		1px 1px 0 #fff;
}
.cmpFlagIc {
	position: absolute !important;
	right: 56px;
	margin-top: 55px;
	width: 36px !important;
}
.cmpFlagIcL {
	position: absolute !important;
	left: 56px;
	margin-top: 55px;
	width: 36px !important;
}
.compPLstCl {
	color: rgba(255, 255, 255, 0.5);
}
#cmpDatBox {
	border-radius: 6px;
	border-left: 20px solid #fd5d00;
	position: absolute;
	padding-left: 20px;
	left: 20px;
	bottom: 20px;
	height: 100px;
	font-size: 30px;
	color: #fff;
	z-index: 99;
}
#cmpDatSub {
	color: rgba(255, 255, 255, 0.7);
	font-size: 26px;
}
#vsHolder {
	position: absolute;
	width: 450px;
	height: 450px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.compClassPIcn {
	width: 100%;
	height: 100%;
	image-rendering: pixelated;
	user-select: none;
}
.cmpClassGr {
	filter: grayscale(1.0)!important;
}
.cmpClassLck {
	font-size: 100px;
	color: #ff0000;
	width: 100px;
	text-align: center;
	z-index: 9;
	display: inline-block;
	position: absolute;
	top: 40px;
	margin-left: 10px;
	pointer-events: none;
}
.compClassPItm {
	position: relative;
	vertical-align: top;
	cursor: pointer;
	width: 100px;
	height: 100px;
	border: 4px solid white;
	border-radius: 8px;
	margin-left: 5px;
	margin-right: 5px;
	display: inline-block;
	background-color: rgba(0, 0, 0, 0.6);
	transition: transform .1s ease-out;
}
.compClassPItm:hover {
	transform: scale(1.1);
}
.compClassPItm:active {
	transform: scale(0.95);
}
.compClassPCnt {
	position: absolute;
	bottom: 1px;
	right: 6px;
	font-size: 18px;
	color: #ffd300;
}
.compPLstIcn {
	width: 88px;
	height: 88px;
	border-radius: 6px;
	border: 3px solid white;
	display: inline-block;
	background-color: rgba(0, 0, 0, 0.5);
	margin-left: 10px;
	margin-right: 10px;
	image-rendering: pixelated;
}
.compPLstSt {
	border-radius: 6px;
	width: 270px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: top;
	font-size: 24px;
	color: #fff;
	display: inline-block;
	padding: 5px;
	margin-left: 5px;
	margin-right: 10px;
}
.compPLstStR {
	margin-left: 10px;
	margin-right: 5px;
}
#compPlListL {
	width: 1200px;
	text-align: left;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) scale(0.9);
}
.compPlLitL {
	margin-top: 20px;
}
#compPlListR {
	width: 1200px;
	text-align: right;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) scale(0.9);
}
.compPlLitR {
	margin-top: 20px;
}
.cmpTmHed {
	font-size: 52px;
	color: #fff;
	margin-bottom: 20px;
}
.compSwpTmB {
	pointer-events: all;
	display: inline-block;
	cursor: pointer;
	margin-top: 20px;
	text-align: center;
	color: #fff;
	font-size: 26px;
	width: 240px;
	padding: 10px;
	padding-bottom: 12px;
	border: 3px solid white;
	background-color: #FF5500;
	border-radius: 6px;
	transition: transform .1s ease-out;
}
.compSwpTmB:hover {
	transform: scale(0.95);
}
.compSwpTmB:active {
	transform: scale(0.8);
}
.compMenBtnS {
	margin-top: 20px;
	margin-left: 5px;
	margin-right: 5px;
	display: inline-block;
	color: #fff;
	width: 46px;
	height: 46px;
	cursor: pointer;
	font-size: 26px;
	padding: 10px;
	border-radius: 6px;
	border: 4px solid white;
	transition: transform .1s ease-out;
}
.compMenBtnS:hover {
	transform: scale(0.9);
}
.compMenBtnS:active {
	transform: scale(0.8);
}
.compPlWepsL {
	text-align: right;
	float: left;
	width: 300px;
	height: 85px;
	margin-left: -315px;
}
.compPlWepsR {
	text-align: right;
	float: right;
	width: 300px;
	height: 85px;
	margin-right: -315px;
	transform: scaleX(-1);
}
.compPlWpIcn {
	background-color: rgba(0, 0, 0, 0.4);
	padding-left: 10px;
	padding-right: 10px;
	border: 3px solid white;
	border-radius: 12px;
	margin-top: 4px;
	vertical-align: middle;
	height: 80px;
	width: auto;
}

.hostHeader {
	width: calc(100% + 25px) !important;
	z-index: 9999;
	position: sticky;
	top: -20px;
	font-size: 30px;
	color: #fff;
	margin-top: -20px !important;
	margin-left: -20px;
	border-bottom: 4px solid #989898;
	background-color: #111111;
	box-shadow: 0px 10px 10px #00000052, 0px 0px 0px #000;
	padding-top: 10px;
	padding-bottom: 10px;
}
#hostCMapPickr {
	position: relative;
	background: black;
	height: 140px;
	border-radius: 6px;
	cursor: pointer;
	margin-top: 25px;
	margin-bottom: 20px;
	background-size: cover;
	background-position: 50% 20%;
	transition: all 0.5s;
}
#hostCMapPickr:hover {
	background-position: 50% 10%;
}
#hostCMapPickT {
	position: absolute;
	font-size: 30px;
	left: 20px;
	right: 25px;
	bottom: 15px;
	text-shadow: 0 0 10px black;
}
#hostCMapInd {
	position: absolute;
	color: #fff;
	font-size: 50px;
	right: 20px;
	bottom: 10px;
	text-shadow: 0 0 10px black;
}
#bigMFeatHBtn {
	color: rgba(255, 255, 255, 0.6) !important;
	border: 3px solid rgba(255, 255, 255, 0.8);
	position: absolute;
	right: 320px;
	bottom: 30px;
	font-size: 21px;
	background-color: rgba(0, 0, 0, 0.6);
	border-radius: 6px;
	padding: 6px;
	padding-top: 5px;
	width: 240px;
	text-align: center;
	cursor: pointer;
	transition: all 0.08s;
}
#bigMFeatHBtn:hover {
	border: 3px solid white !important;
	transform: scale(0.95);
}
#bigMFeatHBtn:active {
	border: 3px solid white !important;
	transform: scale(0.9);
}
#bigMFeatPBtn {
	border: 3px solid #9eeb56;
	position: absolute;
	right: 30px;
	bottom: 30px;
	font-size: 21px;
	background-color: rgba(0, 0, 0, 0.6);
	border-radius: 6px;
	padding: 6px;
	padding-top: 5px;
	width: 240px;
	text-align: center;
	cursor: pointer;
	transition: all 0.08s;
}
#bigMFeatPBtn:hover {
	border: 3px solid white !important;
	transform: scale(0.95);
}
#bigMFeatPBtn:active {
	border: 3px solid white !important;
	transform: scale(0.9);
}
#bigMFeatVid {
	width: 550px;
	height: 200px;
	position: absolute;
	right: 30px;
	top: 30px;
	border-radius: 8px;
}
.bigMFeatHold {
	position: relative;
	width: 100%;
	height: 340px;
	border-radius: 5px;
	margin-bottom: 10px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position-y: 50%;
}
.biMFeatInfH {
	background: #ffffff1a;
	width: calc(100% - 65px);
	margin-left: 20px;
	font-size: 17px;
	margin-top: 20px;
	color: #adadad !important;
	padding: 10px;
	padding-left: 15px;
}
.biMFeatInfB {
	color: rgba(255, 255, 255, 0.6) !important;
	border: 3px solid rgba(255, 255, 255, 0.8);
	font-size: 21px;
	background-color: rgba(0, 0, 0, 0.6);
	border-radius: 6px;
	padding: 6px;
	padding-top: 5px;
	width: calc(100% - 55px);
	margin-left: 20px;
	margin-top: 20px;
	text-align: center;
	cursor: pointer;
	transition: all 0.08s;
}
.biMFeatInfB:hover {
	border: 3px solid white !important;
	color: white !important;
	transform: scale(0.95);
}
#bigMFeatName {
	font-size: 39px;
	position: absolute;
	left: 40px;
	top: 30px
}
#bigMFeatVbar {
	position: absolute;
	left: 40px;
	top: 110px;
	color: rgba(255, 255, 255, 0.5);
}
#bigMFeatDesc {
	width: 640px;
	color: rgba(255, 255, 255, 0.6) !important;
	font-size: 20px;
	position: absolute;
	margin-top: -10px;
	left: 40px;
	top: 165px;
	bottom: 40px;
	overflow-y: auto;
}
#mapList {
	color: rgba(255, 255, 255, 0.3) !important;
	font-size: 25px !important;
}
.mapListCat {
	text-align: left;
	width: 97%;
	color: #fff;
	font-size: 25px;
	margin-bottom: 20px;
	background-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0.2));
	padding: 15px;
	padding-top: 12px;
	padding-bottom: 12px;
	margin-top: 20px;
}
.mapListItem .mapActionOvrl {
	opacity: 0;
	transition: opacity .15s ease;
}
.mapListItem:active .mapActionOvrl, .mapListItem:hover .mapActionOvrl {
	z-index: 9999999999;
	opacity: 1;
}
.mapListThumb {
	cursor: pointer;
	height: 100%;
	width: 100%;
	transition: all 0.2s;
	display: inline-block;
	background-color: rgba(0, 0, 0, 0.3);
	object-fit: fill;
} .mapListThumb:hover {
	opacity: 0.9;
	transform: scale(1.1);
}
.mapListItem {
	padding: 2px;
	position: relative;
	color: rgba(0, 0, 0, 0.4);
	font-size: 17px;
	display: inline-block;
	margin-bottom: 12px;
	width: 462px;
	margin: 5px;
	background-color: rgba(0,0,0,0.7);
	border-radius: 4px;
}
.mapLICat {
	vertical-align: top;
	color: #fff;
	text-align: center;
	height: 100%;
	line-height: 130px;
	font-size: 30px;
	background-color: #333232;
	background-size: cover !important;
	background-position: center !important;
	transition: 0.1s;
	cursor: pointer;
}
.mapLICat:hover {
	opacity: 0.7;
}
.likdByFrnd {
	color: rgba(255,255,255,0.3) !important;
	font-size: 16px;
	margin-left: 8px;
	margin-top: 2px;
	margin-bottom: 20px;
}
.mapAgeD {
	position: absolute;
	top: 0px;
	right: 0px;
	font-size: 13px;
	padding: 3px;
	padding-left: 8px;
	padding-right: 8px;
	border-bottom-left-radius: 6px;
	color: #fff;
	z-index: 2;
}
.mapEdit {
	position: absolute;
	top: 5px;
	right: 5px;
	font-size: 12px;
	padding: 3px;
	padding-left: 6px;
	padding-right: 6px;
	border-radius: 3px;
	color: #fff;
	z-index: 2;
	cursor: pointer;
	background-color: #ed4242;
}
.loadMoreD {
	color: #fff;
	width: 100%;
	font-size: 25px;
	padding-top: 12px;
	padding-bottom: 12px;
	text-align: center;
	margin-top: 15px;
	border-radius: 6px;
	background-color: rgba(0, 0, 0, 0.4);
	cursor: pointer;
}
.loadMoreD:hover {
	background-color: rgba(0, 0, 0, 0.7);
}
.loadMoreW {
	color: rgba(255, 255, 255, 0.8);
	width: 100%;
	font-size: 25px;
	text-align: center;
	margin-top: 15px;
	padding-top: 12px;
	padding-bottom: 12px;
	border-radius: 6px;
	background-color: rgba(0, 0, 0, 0.4);
}

.punishButton:hover {
	opacity: 0.7 !important;
}
.punishButton {
	color: #fff;
	text-align: center;
	display: inline-block;
	margin-top: -6px;
	cursor: pointer;
	background-color: #ed4242;
	font-size: 15px;
	margin-right: 6px;
	border-radius: 5px;
	padding: 2px;
	padding-left: 7px;
	padding-right: 7px;
	vertical-align: middle;
}
.punishButton.kick {
	background-color: #fab640;
} .punishButton.ban {
} .punishButton.kill {
	background-color: #E040FB;
} .punishButton.tp2 {
	background-color: #0000FF;
} .punishButton.tpme {
	background-color: #0000FF;
} .punishButton.tpall {
	background-color: #0000FF;
} .punishButton.vote {
	background-color: #b447ff;
} .punishButton.kdf {
	background-color: #414A6D;
}

.krIconHost {
	position: absolute;
	right: 130px;
	border-radius: 4px;
	border: 3px solid #f0cb26;
	margin-top: -36px;
	padding: 3px;
	padding-left: 10px;
	background-color: rgba(0,0,0,0.35);
	padding-right: 10px;
	font-size: 13px;
}
.krIcon {
	display: inline-block;
	border-radius: 4px;
	color: #f0cb26;
	padding: 3px;
	padding-left: 10px;
	background-color: rgba(0,0,0,0.35);
	padding-right: 10px;
	font-size: 15px;
}
.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: 6px;
}
.hostPresetBtn:hover {
	color: #fff;
}
#hostMenuBtn {
	width: 40px;
	height: 40px;
	cursor: pointer;
	background-color: #2196F3;
	text-align: center;
	border-radius: 4px;
	transition: all 0.01s;
}
#hostMenuBtn:hover {
	transform: scale(1.1);
}
.serverHostOpH {
	width: 100%;
	text-align: center;
	font-size: 30px;
	margin-top: 0px;
	margin-bottom: 20px;
}
.serverHostOp {
	display: inline-block;
	text-align: center;
	width: 300px;
	height: 300px;
	cursor: pointer;
	font-size: 34px;
	color: #fff;
	background-repeat: no-repeat;
	background-size: auto 300px;
	line-height: 300px;
	background-color: rgba(0, 0, 0, 0.2);
	border-radius: 6px;
	border: 6px solid rgba(0, 0, 0, 0.2);
}
.serverHostCommunity {
	margin-right:20px;
	line-height: 60px;
    vertical-align: top;
    display: inline-flex;
    align-items: center;
}
.serverHostOp:hover {
	opacity: 0.8;
}
.hostCBtn {
	cursor: pointer;
	margin-top: 15px;
	border-radius: 6px;
	border: 4px solid white;
	background-color: #4582d1;
	text-align: center;
	width: calc(100% - 10px);
	color: #fff;
	font-size: 30px;
	line-height: 60px;
	height: 60px;
	transition: all 0.1s;
}
.hostCBtn:hover {
	transform: scale(0.98);
}
.hostCBtn:active {
	transform: scale(0.93);
}
#hostActionH {
	padding-top: 10px;
	margin-top: 10px;
	border-top: 4px solid rgba(255, 255, 255, 0.5);
}
#hostGameMsg {
	margin-right: 15px;
	line-height: 48px;
}
#hostGameNameHolder {
	display: inline-block;
	width: 374px;
	text-align: center;
	margin-top: 14px;
	background-color: rgba(0,0,0,.4);
	padding: 5px 0;
	border-radius: 6px;
	margin-left: -5px;
}
#stickyHostH {
	display: block;
	width: 100%;
	position: sticky;
	bottom: -20px;
	z-index: 999999999;
	background-color: #111111;
	padding: 0 20px 10px 20px;
	margin-left: -20px;
	border-top: 4px solid #989898;
	height: 38px;
	padding-top: 15px;
	box-shadow: 0px 0px 0px #000, 0px -10px 10px #00000052;
	margin-bottom: -40px;
}
.serverCard {
	vertical-align: top;
	border-radius: 6px;
	cursor: pointer;
	margin: 8px;
	display: inline-block;
	width: 380px;
	height: 240px;
	background: url(../img/server_i.png), linear-gradient(#212121, #0069e24d);
	background-size: cover;
	position: relative;
	transition: all 0.3s;
}
.serverCard:hover {
	background-position-y: -10px;
}
.serverCardI {
	position: absolute;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
}
#rentServBtn {
	display: inline-block;
	background: #4582d1 !important;
	width: calc(100% - 20px);
	height: 60px;
	color: #fff;
	line-height: 60px;
	text-align: center;
	cursor: pointer;
	margin-top: 25px;
	margin-left: 7px;
	border-radius: 6px;
}
#rentServBtn:hover {
	filter: brightness(1.05);
}
#updDediServBtn {
	display: inline-block;
	height: 60px;
	color: #fff;
	line-height: 60px;
	text-align: center;
	cursor: pointer;
	margin-top: 25px;
	border-radius: 6px;
	background:#da6b2f !important;
	width:calc(50% - 20px);
	margin-left:20px;
}
#updDediServBtn:hover {
	filter: brightness(1.05);
}
.servCrdAv {
	float: right;
	color: rgba(255, 255, 255, 0.7);
	padding-right: 10px;
}
.serverFlag {
	width: 60px;
	position: absolute;
	border-radius: 8px;
	top: 10px;
	left: 10px;
}
.serverCardInfo {
	font-size: 20px;
	width: 100%;
	position: absolute;
	bottom: 0px;
	left: 0px;
	background: #000000db;
	height: 45px;
	line-height: 45px;
}

.loadoutBtn {
	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: 6px;
}
.loadoutBtn:hover {
	color: #fff;
}

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

#requiresRestart {
	margin-right: 10px;
	float: right;
	color: rgba(255, 255, 255, 0.5);
	font-size: 18px;
}

#registerBackImg {
	left: 0px;
	top: 0px;
	z-index: 0;
	position: absolute;
	width: 100%;
	height: 100%;
}

#windowHolder {
	position: relative;
}
#windowHolder.popupWin {
	background-color: rgba(0, 0, 0, 0.75);
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 21474836;
}
#windowCloser {
	pointer-events: auto;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 99998;
}
#windowCHolder {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 99999;
	text-align: center;
}
.menuWindowF * {
	font-family: 'Play', sans-serif;
}
#menuWindow {
	border-radius: 6px;
	overflow-y: auto;
	overflow-x: hidden;
	text-align: left;
	pointer-events: auto;
	padding: 20px;
	width: 705px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-height: calc(100% - 250px);
	font-size: 20px;
	background-color: #fff;
	box-shadow: 0px 9px 0px 0px #a6a6a6;
}
#menuWindow.forceFill {
	height: 100%;
	height: fill-available;
}
#menuWindow.dark {
	background-color: #353535;
	box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}
#menuWindow.dark div {
	color: #fff;
}

#menuWindow.eterno {
	background-color: #070707;
	box-shadow: 0 0 8px 2px #e6e6ff, 2px 0 12px 0 #ffb3f6;
	position: relative;
	overflow: hidden;
	border: 2px solid #e6e6ff;
	border-radius: 6px;
	animation: glitch-border-color 1.3s infinite linear alternate, glitch-box-shadow 2.3s infinite linear alternate;
}

@keyframes glitch-border-color {
	0% { border-color: #e6e6ff; }
	10% { border-color: #ffb3f6; }
	20% { border-color: #aafffa; }
	30% { border-color: #e6e6ff; }
	40% { border-color: #ffb3f6; }
	50% { border-color: #aafffa; }
	60% { border-color: #e6e6ff; }
	70% { border-color: #ffb3f6; }
	80% { border-color: #aafffa; }
	90% { border-color: #e6e6ff; }
	100% { border-color: #ffb3f6; }
}

@keyframes glitch-box-shadow {
	0% { box-shadow: 0 0 8px 2px #e6e6ff, 2px 0 12px 0 #ffb3f6; }
	10% { box-shadow: 0 0 8px 2px #aafffa, -2px 0 12px 0 #e6e6ff; }
	20% { box-shadow: 0 0 8px 2px #ffb3f6, 2px 0 12px 0 #aafffa; }
	30% { box-shadow: 0 0 8px 2px #aafffa, -2px 0 12px 0 #ffb3f6; }
	40% { box-shadow: 0 0 8px 2px #ffb3f6, 2px 0 12px 0 #e6e6ff; }
	50% { box-shadow: 0 0 8px 2px #aafffa, -2px 0 12px 0 #ffb3f6; }
	60% { box-shadow: 0 0 8px 2px #e6e6ff, 2px 0 12px 0 #aafffa; }
	70% { box-shadow: 0 0 8px 2px #ffb3f6, -2px 0 12px 0 #e6e6ff; }
	80% { box-shadow: 0 0 8px 2px #aafffa, 2px 0 12px 0 #ffb3f6; }
	90% { box-shadow: 0 0 8px 2px #e6e6ff, -2px 0 12px 0 #aafffa; }
	100% { box-shadow: 0 0 8px 2px #ffb3f6, 2px 0 12px 0 #e6e6ff; }
}

#menuWindow.eterno .bigMenTabs {
	background-color: rgba(38, 38, 38, 0.68);
}

.stickyHeader {
	padding-top: 0px !important;
}
.quickJoin {
	float: right;
	border-radius: 5px;
	border: 4px solid #2196f3;
	font-size: 14px;
	padding: 6px;
	cursor: pointer;
	pointer-events: all;
	z-index: 99999;
	display: inline-block;
	margin-right: 15px;
	color: #fff;
	margin-top: -3px;
	vertical-align: top;
	transition: all 0.08s;
}
.quickJoin:hover {
	transform: scale(0.95);
}

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

#rawMapData {
	pointer-events: auto;
	font-size: 18px;
	padding: 3px;
	padding-left: 8px;
	margin-top: 2px;
	box-shadow: none;
	outline: none;
	border: none;
	background: #eee;
	float: right;
	border-radius: 6px;
}

.floatR {
	color: rgba(255, 255, 255, 0.5);
	float: right;
	clear: both;
}
.floatRNoC {
	float: right;
}
.settText {
	cursor: pointer;
	color: #2196F3;
	font-size: 22px;
	pointer-events: auto;
}
.settText:hover {
	text-decoration: underline;
}
b {
	color: rgba(255, 255, 255, 0.8) !important;
	font-weight: normal;
}
.setBodH {
	margin-left: 5px;
	width: calc(100% - 55px);
	margin-top: 15px;
	margin-bottom: 15px;
	padding: 20px;
	padding-bottom: 5px;
	padding-top: 5px;
	border-radius: 6px;
	background-color: rgba(0, 0, 0, 0.4);
}
.setBodH .settName:last-child {
	padding-bottom: 10px;
	border-bottom: none !important;
}
.setBodH .settNameSmall:last-child {
	padding-bottom: 10px;
	border-bottom: none !important;
}

.contactsHeader {
	border: 4px solid rgba(255, 255, 255, 0.3);
	padding-right: 10px;
	padding-left: 10px;
	padding-top: 10px;
	padding-bottom: 5px;
	background-color: rgb(80 80 80);
	margin-top: 40px;
	font-size: 22px;
	color: #fff;
	margin-bottom: 20px;
}

.setHed {
	border: 4px solid rgba(255, 255, 255, 0.3);
	padding-right: 10px;
	padding-left: 10px;
	padding-top: 10px;
	padding-bottom: 5px;
	background-color: rgb(80 80 80);
	margin-top: 40px;
	font-size: 22px;
	cursor: pointer;
	color: #fff;
	margin-bottom: 20px;
}
.setHed:hover {
	background-color: rgb(70 70 70);
}
.setHedS {
	border: 4px solid rgba(255, 255, 255, 0.3);
	padding-right: 10px;
	padding-left: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: rgb(80 80 80);
	margin-top: 35px;
	margin-bottom: 20px;
	font-size: 22px;
	cursor: pointer;
	color: #fff;
}
.settName, .settNameSmall {
	clear: both;
	margin-top: 10px;
	font-size: 22px;
	color: rgba(255, 255, 255, 0.6) !important;
	padding-bottom: 10px;
	border-bottom: 3px solid rgba(255, 255, 255, 0.2);
}

.settNameIn {
	cursor: pointer;
}
.settNameIn:hover {
	background-color: rgba(0, 0, 0, 0.3) !important;
	color: rgba(255, 255, 255, 0.8) !important;
	margin-left: -10px;
	padding-left: 10px;
	margin-right: -10px;
	padding-right: 10px;
	border-radius: 4px;
}

#settHolder > .setHed:first-child {
	margin-top: 10px !important;
}

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

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

@keyframes scaleBob {
	0% { transform: scale(1.0); }
	100% { transform: scale(0.9); }
}

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

#mapInfo {
	color: #fff;
	font-size: 20px;
	display: inline-block;
	margin-left: 4px;
}

#modVoteHold {
	margin-top: 5px;
	display: block;
}
#modVoteIcon {
	display: inline-block;
	color: #fff;
	width: 80px;
	height: 80px;
	text-align: center;
	margin-left: -5px;
	margin-top: -5px;
	margin-bottom: -5px;
	margin-right: -4px;
	border-radius: 3px;
	background-size: contain;
	background-color: #0000005e;
	background-repeat: no-repeat;
}
#modVoteIcon > .material-icons-outlined {
	color: #f5479b !Important;
	font-size: 75px !important;
	line-height: 80px !important;
	vertical-align: middle;
}
#mapVote {
	vertical-align: top;
    color: #fff;
    font-size: 16px;
    display: inline-block;
    float: right;
	margin-top: -4px;
	pointer-events: all;
}

#matchInfoHolder {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
	margin-bottom: 20px;
	font-size: 20px;
	border-bottom: 5px solid #585858;
	padding-bottom: 12px;
}

#mapInfoHld {
	pointer-events: all;
	text-align: left;
	padding-left: 7px;
	color: #fff;
}

.vHR {
	border: 4px solid #ff4747 !important;
}
.voteHint {
	color: #fff;
	font-size: 12px;
	border: 4px solid #b447ff;
	padding: 5px;
	padding-left: 10px;
	padding-right: 10px;
	border-radius: 4px;
	vertical-align: middle;
	display: inline-block;
	cursor: pointer;
	background-color: rgba(0, 0, 0, 0.3);
	transition: all 0.08s;
}
.voteHint:hover {
	transform: scale(0.95);
}
.material-icons.vote {
	font-size: 40px;
	margin-left: 12px;
	margin-bottom: 5px;
	vertical-align: middle;
	cursor: pointer;
	color: rgba(150, 150, 150);
	transition: .1s;
}
.material-icons.vote.a {
	color: #fff;
}
.material-icons.vote:hover {
	color: rgba(220, 220, 220);
	transform: scale(1.2);
}
#modVoteD.material-icons.vote, #modVoteU.material-icons.vote{
	font-size: 34px !important;
	margin-bottom: 0px !important;
}
.material-icons.h {
	cursor: pointer;
}
.material-icons.h:hover {
	opacity: 0.8;
}

.whiteShad { text-shadow: -1px -1px 0 #ffffff,1px -1px 0 #ffffff,-1px 1px 0 #ffffff,1px 1px 0 #ffffff; }
.blackShad { text-shadow: -1px -1px 0 #1c1c1c,1px -1px 0 #1c1c1c,-1px 1px 0 #1c1c1c,1px 1px 0 #1c1c1c,-2px -2px 0 #1c1c1c,2px -2px 0 #1c1c1c,-2px 2px 0 #1c1c1c,2px 2px 0 #1c1c1c; }
.greyShad { text-shadow: -1px -1px 0 #636363,1px -1px 0 #636363,-1px 1px 0 #636363,1px 1px 0 #636363; }
#aHolder { position: absolute; top: calc(100% - 145px); left: 0; right: 0; text-align: center; z-index: 999999; pointer-events: none; }
#aMerger { text-align: left; display: inline-block !important; min-width: 728px; min-height: 90px; pointer-events: auto; }
#aContainer { cursor: pointer; pointer-events: auto; padding: 10px; background-color: rgba(0,0,0,.6); max-height: 120px; max-width: 810px; min-width: 765px; min-height: 100px; overflow: hidden; display: inline-block!important; border-radius: 6px; }
.endAHolder { display: inline-block; text-align: center; z-index: 30; pointer-events: none; margin-left: 10px; }
#endAMerger { text-align: left; display: inline-block !important; min-width: 300px; min-height: 250px; pointer-events: auto; }
#endAContainer { cursor: pointer; pointer-events: auto; padding: 10px; background-color: rgba(0, 0, 0, 0.5); max-height: 680px; max-width: 382px; overflow: hidden; border-radius: 6px; }
#spectateUI { display: none; text-align: center; color: #fff; }
#specNames { border-radius: 7px; position: absolute; left: 20px; top: calc(300px * var(--mm-scale) + 30px); font-size: 25px; padding: 8px; padding-bottom: 12px; padding-left: 20px; padding-right: 20px; color: #fff; background-color: rgba(0, 0, 0, 0.3); }
#specNames.topLeftOld { top: 20px !important; }
#specStats { border-radius: 4px; position: absolute; color: #fff; background-color: var(--div-black); left: 15px; top: calc(300px * var(--mm-scale) + 30px); }
#specStats.topLeftOld { top: 20px !important; }
#specStatsInner { padding: 10px; padding-bottom: 8px; font-size: 15px; text-align: left; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 350px; margin: 3px; background-color: var(--div-grey); }
#specSUS { top: 422px; left: 13px; color: red; border-radius: 7px; position: absolute; font-size: 23px; text-align: left; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 350px; padding: 10px; padding-bottom: 8px; }
#specSUS.topLeftOld { top: 112px!important; }
#spectHPB { width: 255px; height: 33px; margin-top: 8px; margin-left: 12px; background-color: rgba(0, 0, 0, 0.75); }
#spectHPBI { height: 33px; }
#spectHPV { position: absolute; left: 105px; top: 52px; color: #fff; font-size: 16px; }
.spectPIcon { width: 75px; height: 75px; image-rendering: pixelated; background-color: rgba(0,0,0,0.4); display: inline-block; }
.specPHead { color: #fff; font-size: 18px; margin-right: 5px; }
#specControlHolder { position: absolute; right: 20px; bottom: 20px; font-size: 20px; text-align: left; width: auto; max-width: 330px; min-width: 230px; border-radius: 4px; display: inline-block; background-color: var(--div-black); }
.specControl { font-size: 16px; color: rgba(255,255,255,0.7); }
.specControlKey { color: #fbc02d; float: right; margin-left: 10px; }
#trustProg { margin-left: 5px; margin-top: 10px; margin-bottom: 5px; width: 97.5%; height: 30px; padding: 4px; border-radius: 4px; background-color: rgba(0, 0, 0, 0.85); }
#trustPrgHD { height: 100%; }
#trustProgHD { text-align: center; line-height: 29px; position: absolute; left: 40%; color: #fff; font-size: 13px; }
#specKPDContr { z-index: 9999999; bottom: 20px; width: 500px; background-color: rgba(0, 0, 0, 0.4); position: absolute; left: 50%; transform: translateX(-50%); padding: 20px; padding-left: 20px; padding-right: 20px; font-size: 30px; border-radius: 5px; color: #fff; }
.specKPDContrI { font-size: 22px; color: #fbc02d; display: inline-block; margin-left: 14px; }

.onMenu #spectateUI > div:not(#replayControls) { display: none !important; }

#replayControls { display: none; position: absolute; bottom: 30%; left: 50%; transform: translateX(-50%); width: 56%; min-width: 680px; max-width: 1000px; background-color: rgba(0, 0, 0, 0.55); padding: 10px 18px; border-radius: 5px; color: #fff; align-items: center; gap: 12px; line-height: 1.8; text-align: left; z-index: 9999999; pointer-events: all; }
.replayCtrlBtn { cursor: pointer; font-size: 24px; }
#replaySlider { flex: 1; min-width: 260px; -webkit-appearance: none; appearance: none; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.25); outline: none; cursor: pointer; }
#replaySlider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; cursor: pointer; }
#replayTime { font-size: 15px; min-width: 96px; text-align: center; color: rgba(255, 255, 255, 0.9); line-height: 1.8; }
#replaySpeed { cursor: pointer; font-size: 14px; border: 1px solid #999; border-radius: 4px; padding: 0 7px; line-height: 1.8; }
#replaySusBtn { cursor: pointer; font-size: 14px; color: #ff5252; white-space: nowrap; line-height: 1.8; }
#replayResolve { font-size: 14px; white-space: nowrap; line-height: 1.8; }
.replayResolveB { cursor: pointer; color: #fbc02d; border: 1px solid #999; border-radius: 4px; padding: 0 7px; margin-left: 4px; line-height: 1.8; display: inline-block; }

.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; transition: .4s; border-radius: 34px; pointer-events: all; }
.sliderSml:before { position: absolute; content: ""; height: 13px; width: 13px; left: 2px; bottom: 2px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .sliderSml { background-color: #2196F3; }
input:focus + .sliderSml { box-shadow: 0 0 1px #2196F3; }
input:checked + .sliderSml:before { transform: translateX(13px); }

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

.slidecontainer { margin-right: 10px; margin-left: 10px; width: 320px; float: right; }
.sliderM { vertical-align: middle; margin-bottom: -5px; -webkit-appearance: none; appearance: none; width: 100%; height: 15px; background-color: #a8a8a8; outline: none; border-radius: 4px; }
.sliderM::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 36px; border-radius: 2px; background: #fff; cursor: pointer; }
.sliderM::-moz-range-thumb { width: 15px; height: 36px; border-radius: 2px; background: #fff; cursor: pointer; }
.sliderVal { float: right; display: inline-block; position: relative; width: 70px; color: #fff; line-height: 24px; font-size: 18px; text-align: center; border: 3px solid white !important; border-style: inset; background-color: rgba(0, 0, 0, 0.5); padding: 3px 5px; margin-left: 8px; vertical-align: bottom; margin-top: 2px; border-radius: 6px; }

.inputGrey { border: none; background: #eee; padding: 6px; padding-bottom: 6px; padding-right: 16px; padding-left: 8px; float: right; margin-left: 10px; border-radius: 6px; font-size: 18px; }
.inputGrey2 { border: none; background: #e3e3e3; padding: 6px; padding-bottom: 6px; float: right; margin-left: 10px; font-size: 15px; border-radius: 4px; }

#modLinks { width: 100%; text-align: center; font-size: 22px; color: rgba(0, 0, 0, 0.3); margin-bottom: 10px; }
#modDropper { width: 690px; height: 120px; background-color: rgba(255, 255, 255, 0.1); border: 4px dashed rgba(255, 255, 255, 0.3); }
#modDropper p { width: 100%; height: 100%; margin-top: 18px; text-align: center; font-size: 22px; color: rgba(255, 255, 255, 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); }

#playerHeaderEl { position: absolute; top: 0; left: 0; right: 0; height: 70px; display: flex; align-items: center; justify-content: space-between; background-color: rgba(0, 0, 0, 0.5); pointer-events: auto; z-index: 100; overflow: visible; }
#gameNameHolder { z-index: 9999999; position: absolute; top: 0px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
#mainLogo { margin-top: 10px; margin-bottom: -40px; height: 200px; }
#mainLogoFace { width: 81px; position: absolute; top: 208px; left: 50%; transform: translateX(-50%); margin-left: 6px; }
#seasonLabel { font-size: 23px; color: #fff; height: 34px; position: absolute; z-index: 999999999; top: 172px; left: 50%; margin-left: 314px; border-radius: 4px; padding: 3px; padding-bottom: 6px; padding-left: 12px; padding-right: 12px; transform: translateX(-50%) rotate(5.5deg); }
#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: 139px; left: 50%; transform: translate(-50%, 0) scale(0.95); }
#subLogoButtons > .button { padding-left: 22px; padding-right: 22px; }
.fin { width: auto; height: 62px; margin: 0 12px; margin-top: 10px; }

.headerBar { position: absolute; top: 0; height: 70px; padding: 0 12px; display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; background-color: rgba(0, 0, 0, 0.5); pointer-events: auto; }
.headerBar div { color: white; }
.headerBarLeft { padding-right: 15px; }
#signedInHeaderBar { display: flex; align-items: center; height: 100%; padding: 0 8px; }
#signedOutHeaderBar { display: flex; align-items: center; height: 100%; padding-left: 6px; padding-right: 6px; }
#signupRewardsButton { margin-left: 0px; background: transparent; border: none !important; }
.sOHBCenter { top: calc(46% - 236px)!important; left: calc(50% - 190px) !important; margin-right: -50% !important; transform: translate(-50%, -50%) !important; border-radius: 6px !important; background-color: unset!important; }
.sOHBMid { top: calc(46% - 91px) !important; left: calc(50% - 190px) !important; margin-right: -50% !important; transform: translate(-50%, -50%) !important; border-radius: 6px !important; background-color: unset !important; }
.headerBarRight { display: flex; align-items: center; padding-left: 20px; padding-right: 12px; height: 100%; }
.verticalSeparator { display: inline-block; background: rgba(255, 255, 255, 0.12); width: 4px; height: 55px; margin: 0 6px; }

#menuUsernameContainer { vertical-align: top; display: inline-block; cursor: pointer !important; }
#profilePicM { border: 4px solid #9a9a9a; margin-left: 20px; width: 181px; height: 181px; cursor: pointer; border-radius: 175px; display: inline-block; background-color: #6d6d6d; background-size: cover; position: relative; }
#profilePicM:hover { opacity: 0.9; }
.blurred { filter: grayscale(1) opacity(0.5); image-rendering:pixelated; }
#menuMiniProfilePic { vertical-align: top; display: inline-block; width: 32px; height: 32px; image-rendering: pixelated; margin-right: 10px; border-radius: 32px; }
#menuAccountUsername { vertical-align: bottom; display: inline-block; border: 2px solid #74c8ac; padding: 6px 12px; border-radius: 5px; animation: borderPulse 5s ease-in-out infinite; }
#menuAccountUsername:hover { transform: scale(1.1); }
@keyframes borderPulse { 0% { border-color: #74c8ac; } 25% { border-color: #ff4444; } 50% { border-color: #4444ff; } 75% { border-color: #ffff44; } 100% { border-color: #74c8ac; } }

#mailList { margin-top: 10px; color: rgba(0, 0, 0, 0.5); }
.mailObj { border-radius: 6px; padding: 15px; background-color: rgba(0, 0, 0, 0.4) !important; margin-top: 10px; color: rgba(0, 0, 0, 0.5); font-size: 15px; cursor: pointer; }
.mailObj:hover { background-color: rgba(0, 0, 0, 0.3); }
.mailUnread { background-color: rgba(0, 0, 0, 0.2); }
.mailUnread:hover { background-color: rgba(0, 0, 0, 0.25); }
.unreadBtnM { margin-top: -5px; margin-left: 5px; color: #fff; background-color: #eb2f2f; border-radius: 20px; height: 26px; width: 26px; font-size: 12px; line-height: 24px; text-align: center; display: inline-block; vertical-align: middle; }
.mailFrom { font-size: 18px; color: #2196F3; padding-bottom: 5px; border-bottom: 4px solid rgba(255, 255, 255, 0.5); }
.followFrom { font-size: 18px; color: #2196F3; }
.mailSubj { font-size: 16px; color: rgba(255, 255, 255, 0.5); }
.mailText { display: none; margin-top: 10px; padding: 20px; background-color: rgba(0, 0, 0, 0.6); color: rgba(255, 255, 255, 0.8) !important; }
.mailDate { position: absolute; right: 0px; font-size: 15px; color: rgba(255, 255, 255, 0.3); }
#mailContainer { position: relative; display: inline-block; }
#mailIcon { display: inline-block; cursor: pointer; transition: all 0.2s; pointer-events: all; }
#mailIcon:hover { opacity: 0.9; transform: scale(0.9); }
#mailCount { pointer-events: none; z-index: 2; color: #fff; top: -1px; right: -10px; font-size: 10px; background-color: #eb2f2f; border: 3px solid #474747; width: 21px; height: 21px; line-height: 21px; text-align: center; position: absolute; border-radius: 20px; }

#mLevelCont { display: inline-block; background-color: rgba(0, 0, 0, 0.8); border-bottom-right-radius: 10px; padding-left: 15px; padding-right: 15px; height: 70px; margin-left: 20px; }
#mLevelContV { display: inline-block; vertical-align: top; font-size: 30px; line-height: 70px; color: #fff; text-align: left; }
.progressBar { width: 100%; margin-top: 0px; height: 10px; padding: 2px; background: rgba(0, 0, 0, 0.9); border-radius: 3px; }
.progressBarInner { height: 100%; background-image: linear-gradient(to right, #FF6A0B, #fbc02d, 94%, white); transition: width 1s ease-in-out; border-radius: 3px; }

#menuRegionLabel { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 3px; color: white; }
#menuServerInfoContainer { display: flex; flex-direction: column; align-items: flex-end; }
.menuDebugInfo { display: flex; justify-content: center; align-items: center; }
#menuFPSDisplay { margin-right: 5px; }
#menuPingDisplay, #menuFPSDisplay { font-size: 16px; color: rgba(255, 255, 255, 0.85); }
#menuPingText { margin-left: 5px; font-size: 16px; color: rgba(255, 255, 255, 0.85); }
#menuPingDisplay .material-icons { vertical-align: bottom; font-size: 24px; }

.krInfo { vertical-align: middle; display: inline-block; cursor: pointer; margin-top: -21px; }
.krInfo:hover #menuKRCount { text-decoration: underline !important; }
#menuKRCount { display: inline-block; color: rgba(255, 255, 255, 0.6); vertical-align: super; }

.junkInfo { vertical-align: middle; display: inline-block; margin-top: -25px; cursor: pointer; }
.junkInfo:hover #menuJNKCount { text-decoration: underline !important; }
#menuJNKCount { display: inline-block; color: rgba(255, 255, 255, 0.6); }
#shopJnkDsp { position: absolute; display: inline-block; background: black; padding: 10px; padding-left: 20px; padding-right: 20px; top: 35px; left: 40px; z-index: 9; border-radius: 8px; font-size: 23px; }

.mIH { display: none !important; }
.clanRolD { display: inline-block; vertical-align: middle; border: none; background: #e3e3e3; padding: 6px; padding-bottom: 6px; float: right; margin-left: 10px; font-size: 15px; border-radius: 4px; }

#menuClassContainer { position: absolute; right: 21px; bottom: 80px; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; transform: scale(0.7); transform-origin: bottom right; z-index: 99999; text-align: right; }
#menuClassName { z-index: 100; color: rgba(255, 255, 255, 0.5); font-size: 17px; margin-bottom: -3px; }
#menuClassSubtext { color: white; font-size: 30px; z-index: 101; }
#menuClassIcn { margin-left: 10px; background-color: rgba(0, 0, 0, 0.4); border-radius: 4px; border: 4px solid #353534; width: 85px; height: 85px; vertical-align: bottom; position: relative; }
#menuClassContainerInner { display: inline-flex; position: relative; width: 449px; height: 85px; justify-content: flex-end; align-items: center; }
#menuClassContainerInfo { display: inline-flex; height: 85px; flex-direction: column; text-align: right; justify-content: space-between; }
#menuClassNameTag { display: none; margin-top: -350px; position: absolute; text-shadow: none; color: #fff; z-index: 100; font-size: 19px; }
.menuClassLevelBox { display: inline-block; background-color: rgba(0,0,0,0.7); padding: 10px; color: #fff; padding-top: 1px; padding-bottom: 1px; margin-right: 5px; font-size: 18px; vertical-align: middle; }
.menuClassPlayerName { vertical-align: middle; color: #fff; margin-right: 5px; }
.menuClassPlayerClan { color: #fff53d; margin-top: -120px; text-shadow: none; vertical-align: middle; margin-right: 3px; }
.menuClassPlayerVerified { color: #40C4FF; font-size: 28px!important; vertical-align: middle; margin-right: 3px; }
.menuClassPlayerPartner { color: #993299; font-size: 28px!important; vertical-align: middle; margin-right: 3px; margin-bottom: -2px; }
.menuClassPlayerPremium { color: #FBC02D; font-size: 28px!important; vertical-align: middle; margin-right: 3px; margin-bottom: -2px; }
.menuClassPlayerCustom { image-rendering: auto; width: 24px; height: 24px; margin-bottom: 0; vertical-align: middle; }
#classPreviewCanvas { transition: opacity 0.2s ease-in; margin-bottom: -100px; margin-right: -113px; opacity: 0; }
#customizeButton { display: inline-flex; width: 449px; text-align: center; padding: 15px; font-size: 27px !important; pointer-events: all; line-height: 1; justify-content: center; align-items: center; transition: filter 0.15s, border-color 0.15s; }
#customizeButton:hover { transform: none !important; filter: brightness(1.3); }
#customizeButton:active { transform: none !important; filter: brightness(0.9); }
#phonePop { position: absolute; left: 50%; transform: translateX(-50%); bottom: -33px; }
#phoneImg { margin-bottom: -700px; transition: all 0.1s ease-out; margin-left: 998px; width: 340px; height: 680px; }
#policeButton { padding-left: 15px !important; padding-right: 15px !important; color: #fff; display: inline-block; border-radius: 6px; border: 4px solid #414A6D !important; }
.kpdRepLvl { border-radius: 2px; color: #fff; padding: 2px; padding-left: 6px; padding-right: 6px; background-color: rgba(0, 0, 0, 0.75); font-size: 14px; margin-right: 6px; }
.kpdRank { color: #fff; position: absolute; top: 9px; left: 9px; background-color: #414A6D; padding: 5px; padding-left: 10px; padding-right: 10px; border-radius: 4px; border: 2px solid rgba(0, 0, 0, 0.5); }
.policeJoinB { padding: 3px; padding-left: 12px; padding-right: 12px; color: #fff; font-size: 13px; pointer-events: all; cursor: pointer; background-color: #414A6D; border-radius: 5px; }
.policeJoinB:hover { opacity: 0.8; }
#policePop { width: 100%; height: 100%; position: absolute; z-index: 9999; }
#policePopC { pointer-events: all; width: 900px; height: fit-content; border-radius: 6px; background-color: #353535; padding: 10px; padding-left: 20px; padding-right: 20px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.kpdGuideImg { width: 700px; margin-top: 15px; border-radius: 2px; }
#clientExit { display: none; }

.buttonB { border: 4px solid #414A6D !important; }
.buttonPI { border: 4px solid #fa50ae !important; }
.buttonR { border: 4px solid #ff4747 !important; }
.buttonP { border: 4px solid #b447ff !important; }
.buttonO { border: 4px solid #FF6A0B !important; }
.buttonG { border: 4px solid #31caec !important; }
.buttonCL { padding-top: 6px!important; width: 95%; font-size: 20px; }
.button.lgn { font-size: 18px; padding-top: 5px; margin-top: 7px; }
.button { position: relative; display: inline-block; border-radius: 4px; margin-bottom: 6px; border: 4px solid white; text-align: center; color: white; pointer-events: all; cursor: pointer; transition: all 0.08s; height: 30px; vertical-align: bottom; font-size: 20px !important; line-height: 35px; background-color: rgba(0, 0, 0, 0.3); }
.button:hover { border: 4px solid white !important; color: white !important; transform: scale(0.95); }
.button:active { border: 4px solid white !important; transform: scale(0.9); }
.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 !important; }
.button.small { height: 40px; line-height: 45px; padding-top: 5px !important; padding-bottom: 13px !important; padding-left: 22px !important; padding-right: 22px !important; font-size: 20.5px !important; margin-left: 3px; margin-right: 3px; }
.buttonD { filter: grayscale(1); pointer-events: none; }
.button.smallNoS { 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; }
#spinInfoBtn.button { padding-top: 5px !important; padding-bottom: 13px !important; font-size: 22px !important; margin-left: 3px; margin-right: 3px; background-color: #00B800 !important; box-shadow: inset 0px -7px 0px 0px #008400 !important; }
.menuSocialB { cursor: pointer; }
.menuSocialB:hover { transform: scale(0.92); opacity: 0.9; }
.menuSocialB:active { transform: scale(0.88); opacity: 0.9; }

::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0,0,0,.3); border-radius: 10px; background-color: #F5F5F5; }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-thumb { border-radius: 10px; background: #868686; box-shadow: inset 0 0 2px rgba(0,0,0,.6); }

.noBtnCard { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; text-align: center; color: #fff; margin-bottom: 12px; margin-left: 5px; margin-right: 5px; padding: 10px; vertical-align: top; background-color: rgba(255, 255, 255, 0.45); border-radius: 5px; display: inline-block; z-index: 1; cursor: pointer; position: relative; width: 133px; font-size: 20px; height: 170px; } .noBtnCard:hover { background-color: rgba(255, 255, 255, 0.35); }
.noBtnCard:hover img { opacity: 0.9; transform: scale(1.1); }
.noBtnImgC { position: relative; z-index: 0 !important; border-radius: 8px; image-rendering: pixelated; width: 140px; transition: all .15s ease-in-out; }
.noBtnImgA { position: relative; z-index: 0 !important; margin-top: -34px; border-radius: 8px; width: 133px; transition: all .15s ease-in-out; }
.noBtnImgR { position: relative; z-index: 0 !important; border-radius: 8px; margin-top: 15px; width: 60px; transition: all .15s ease-in-out; }

.classList { display: inline-block; width: 175px; height: 415px; overflow-y: scroll; direction: rtl; }
.classCard { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; text-align: center; color: #fff; margin-bottom: 12px; margin-left: 6px; margin-right: 7px; padding: 10px; width: 246px; height: 95px; vertical-align: top; border-radius: 5px; display: inline-block; font-size: 24px; z-index: 1; cursor: pointer; position: relative; box-shadow: 0 0 0.5rem #000000; background-color: #b5b5b5; }
.classCard:hover img { opacity: 0.9; transform: scale(1.03); }
.className { color: #fff; font-size: 18px; position: absolute; left: 88px; top: 5px; }
.classWeap { color: #fff; font-size: 13px; position: absolute; left: 88px; top: 40px; text-shadow: none; }
.classImgC { width: 70px; }
.classImgH { float: left; position: relative; }
.skinClass { position: relative; z-index: -1 !important; border-radius: 8px; margin-top: 5px; width: 70px; }
.classXPBar { position: absolute; left: 0px; right: 0px; bottom: 0px; height: 26px; background-color: #242424; }
.classLvl { position: absolute; color: var(--yellow)!important; bottom: 0px; left: 0px; font-size: 12px; padding: 3px; }
.clsXPBarC { margin: 4px; background-color: #2196F3; height: 18px; }
.clsXPBarV { color: #fff; position: absolute; height: 100%; text-align: center; top: 0px; left: 0; right: 0; font-size: 10px; line-height: 26px; }
.classHP { position: absolute; color: #fff!important; bottom: 5px; right: 0px; left: 0px; font-size: 12px; }

#skinList { margin-top: 15px; margin-bottom: -4px; }
.skinCard { pointer-events: auto; cursor: pointer; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; text-align: center; color: #fff; margin-bottom: 10px; margin-left: 5px; margin-right: 5px; padding: 5px; padding-top: 2px; width: 143px; height: 170px; vertical-align: top; background-color: rgba(255, 255, 255, 0.45); border-radius: 5px; display: inline-block; font-size: 20px; position: relative; z-index: 1; } .skinCard:hover { background-color: rgba(255, 255, 255, 0.35); } .skinCard:hover img { opacity: 0.9; transform: scale(1.1); }
.skinNametag { position: absolute; left: 5px; right: 5px; bottom: 38px; margin: 0; font-size: 11px; color: #ffdd57; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 4; }
.skinNametag + .skinNametag { bottom: 51px; }
.serialTag { margin-left: 6px; color: rgba(255, 215, 130, 0.9); font-weight: 600; }
.skinCreator { color: rgba(255, 255, 255, 0.7); text-align: center; margin-top: -60px; font-size: 14px; }
.skinImg { margin-top: -22px; margin-bottom: 10px; width: 140px; transition: all .15s ease-in-out; }
.skinImgC { margin-top: -5px; margin-bottom: 25px; width: 100px; transition: all .15s ease-in-out; }
.skinImgP { margin-top: 14px; width: 140px; transition: all .15s ease-in-out; }
.skinImgD { margin-top: 10px; margin-bottom: 40px; width: 100px; transition: all .15s ease-in-out; }
.secImg { margin-top: 10px; image-rendering: pixelated; margin-bottom: 25px; width: 100px; cursor: pointer; pointer-events: auto; transition: all .15s ease-in-out; }.secImg:hover { opacity: 0.9; transform: scale(1.2); }
.skinSil { filter: grayscale(100%) brightness(0); opacity: 0.6; }
.skinSil2 { filter: grayscale(100%) brightness(0); opacity: 0.4; }
.skinRandom { font-size: 50px; vertical-align: top; color: #eee; position: absolute; top: 78px; left: 60px; }
.itemOwn { text-align: center; color: rgba(255, 255, 255, 0.7); font-size: 12px; margin-top: -3px; text-shadow: none; }
.itemSea { color: rgba(255, 255, 255, 0.4); margin-top: -1px; font-size: 12px; text-align: center; text-shadow: none; z-index: 1; position: relative; }
.itemCnt { position:relative; text-shadow: none; }
.itemCnt[data-badge]:after { content: attr(data-badge); position: absolute; top: 146px; left: 0px; font-size: 12px; background-color: rgba(0,0,0,0.6); color: white; text-align: center; border-radius: 4px; text-shadow: none; padding: 5px; padding-bottom: 2px; padding-top: 2px; }
.selctInfoBtn { font-size: 12px; color: #fff; background-color: #00B800; padding: 5px; padding-bottom: 2px; padding-top: 2px; cursor: pointer; pointer-events: auto; z-index: 9999999; position: absolute; text-align: center; border-radius: 4px; text-shadow: none; top: 147px; right: 5px; }
.selctInfoBtn:hover { background-color: #00a500; }
.selctDelBtn { font-size: 12px; color: #fff; background-color: #ed4242; padding: 5px; padding-bottom: 2px; padding-top: 2px; cursor: pointer; pointer-events: auto; z-index: 9999999; position: absolute; text-align: center; border-radius: 4px; text-shadow: none; top: 129px; right: 5px; }
.selctDelBtn:hover { background-color: #bb5858; }

#bubbleContainer { z-index: 99999; position: absolute; top: calc(50% - 130px); right: 420px; 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; }
.skinColorItem { text-align: center; vertical-align:text-top; float: right; cursor: pointer; display: inline-block; margin-left: 10px; width: 30px; height: 30px; border-radius: 20px; border: 3px solid #525252; }
.skinColorItem:hover { border-radius: 8px; }

.grecaptcha-badge { visibility: hidden !important; }

#returnButton { border-radius: 4px; border-collapse: collapse; width: 400px; font-size: 25px; cursor: pointer; pointer-events: all; border: solid 2px #252525; background-color: rgba(0, 0, 0, 0.5); }
#returnButton:hover { background-color: rgba(0, 0, 0, 0.75); }
#returnText { display: inline-block; color: #f8f9fa; padding: 10px; vertical-align: top; }
#endButtonsHolder { display: flex; position: absolute; margin-top: 10px; left: 50%; transform: translateX(-50%); gap: 10px; justify-content: center; align-items: center; flex-direction: row; }
#matchVoteHolder { display: none; height: 100px; position: absolute; top: 220px; left: 50%; transform: translateX(-50%); border-radius: 4px; border-collapse: collapse; min-width: 1000px; }
.matchVote { background-color: rgba(0, 0, 0, 0.5); position: relative; margin-bottom: 10px; height: 94px; width: 220px; border: 4px solid #525252; overflow: hidden; margin-left: 8px; margin-right: 8px; display: inline-block; border-radius: 4px; }
.matchVoteThumb { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; height: 100%; width: 100%; transition: all 0.2s; object-fit: cover; }
.matchVoteThumb:hover { opacity: 0.9; transform: scale(1.2); }
.matchVoteMap { position: absolute; top: 5px; left: 5px; font-size: 14px; color: white; padding-left: 5px; line-height: 28px; padding-right: 4px; z-index: 1; pointer-events: none; }
.matchVoteMode { position: absolute; top: 30px; left: 5px; font-size: 12px; height: 26px; padding-right: 4px; z-index: 1; padding-left: 5px; color: rgba(255, 255, 255, 0.7); pointer-events: none; }
.matchVoteModifier { pointer-events: none; position: absolute; bottom: -1px; left: 0px; font-size: 15px !important; padding: 3px; padding-bottom: 0px; padding-left: 8px; padding-right: 9px; border-top-right-radius: 6px; color: #fff; z-index: 2; text-shadow: none; background: linear-gradient(to right,#E040FB,#6240fb); }
.matchVoteTotal { position: absolute; bottom: 8px; right: 5px; font-size: 18px; height: 26px; padding-right: 4px; z-index: 1; padding-left: 8px; color: rgba(255, 255, 255, 0.7); pointer-events: none; }
#matchEndSignupIncentives { display: none; position: absolute; left: 50%; top: 850px; z-index: 9999999999; }

.shopCard { cursor: pointer; pointer-events: auto; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; text-align: center; color: #FFC147; margin-bottom: 10px; margin-left: 5px; margin-right: 5px; padding-top: 0px; padding: 5px; width: 210px; height: 170px; vertical-align: top; border-radius: 5px; display: inline-block; font-size: 22px; position: relative; z-index: 1; background-position: center; background-size: 101%; transition: opacity .1s ease, background-size .1s ease, background-position .1s ease; }
.shopCard:hover { background-size: 110%; background-position: center; }
.shopSale { position: absolute; top: 105px; left: 7px; font-size: 12px; color: white; width: auto; padding-left: 5px; padding-right: 5px; height: 26px; text-align: center; line-height: 26px; border-radius: 4px; opacity: 0.95; text-shadow: none; }

@keyframes beyondBelief { 0% { color: #ffce14; } 50% { color: #f30ad6; } 100% { color: #ffce14; } }
@keyframes goldenKr { 0% { color: #4444ff; } 50% { color: #ffc130; } 100% { color: #4444ff; } }

.hostMap { position: relative; height: 120px; width: 276px; overflow: hidden; display: inline-block; border-radius: 4px; border: 3px solid #ffffffc9; margin: 7px; }
.hostMap input {display:none;}
.hostMapName { position: absolute; bottom: 0px; left: 0px; font-size: 14px; color: white; padding-left: 10px; height: 36px; line-height: 36px; padding-right: 10px; z-index: 1; pointer-events: none; background: rgba(0,0,0,0.8); border-top-right-radius: 6px; }
.hostMapImg { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; height: 100%; width: 100%; filter: grayscale(100%); transition: all 0.1s; }
input:checked + .hostMapImg { filter: grayscale(10%); }
input:hover + .hostMapImg { opacity: 0.9; transform: scale(1.1); }
.silhouette { filter: grayscale(100%) brightness(0); opacity: 0.6; }

#spectateHUD { left: 50%; transform: translate(-50%, 0); top: 20px; font-size: 25px; line-height: 40px; color: #fff; position: relative; }
.spectateInfo { margin-left: 5px; margin-right: 5px; display: inline-block; vertical-align: top; }
#specTimer { color: #fff; font-size: 30px; padding-bottom: 5px; background-color: rgba(0,0,0,0.4); padding-top: 5px; padding-right: 10px; padding-left: 10px; min-width: 150px; text-shadow: none; }
#specGameInfo { color: #fbc02d; font-size: 17px; }
#specTeam0, #specTeam1 { display: inline-block; width: 300px; vertical-align: top; }
#specTeam0 { padding-right: 10px; }
#specTeam1 { padding-left: 10px; }
.specPlayerHolder0 { width: 50px; display: inline-block; padding-left: 10px; float: right; position: relative; }
.specPlayerHolder1 { width: 50px; display: inline-block; padding-right: 10px; float: left; position: relative; }
.specPlayerIcon { width: 50px; image-rendering: auto; image-rendering: crisp-edges; image-rendering: pixelated; }
.specPlayerName { font-size: 10px; color: #fff; margin-top: -10px; overflow: hidden; width: 50px; white-space: nowrap; text-overflow: ellipsis; }
#spec0 { display: inline-block; text-align: right; vertical-align: top; }
#spec1 { display: inline-block; text-align: left; vertical-align: top; }
#specHeaderTm0 { font-size: 27px; color: #fff; padding-right: 10px; background-color: #5699EB; padding-top: 5px; padding-bottom: 5px; text-shadow: none; width: 350px; clip-path: polygon(0 0, 100% 0, 100% 100%, 16px 100%); margin-bottom: 10px; }
#specScoreTm0 { font-size: 27px; color: #fff; text-shadow: none; }
#specNameTm0 { font-size: 17px; vertical-align: top; float: left; margin-left: 20px; color: #353535; text-align: left; overflow: hidden; width: 200px; white-space: nowrap; text-overflow: ellipsis; }
#specHeaderTm1 { font-size: 27px; color: #fff; padding-left: 10px; background-color: #eb5656; padding-top: 5px; padding-bottom: 5px; text-shadow: none; width: 350px; clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%); margin-bottom: 10px; }
#specScoreTm1 { font-size: 27px; color: #fff; text-shadow: none; }
#specNameTm1 { font-size: 17px; vertical-align: top; float: right; margin-right: 20px; color: #353535; text-align: right; overflow: hidden; width: 200px; white-space: nowrap; text-overflow: ellipsis; }
#specGMessage { color: rgba(255,255,255,0.8); font-size: 12px; line-height: 25px; vertical-align: top; top: 85px; position: absolute; left: 50%; transform: translate(-50%, 0); }
.teamTotals { background-color: rgba(0, 0, 0, 0.5); border-radius: 6px; display: none; vertical-align: super; font-size: 20px; padding-top: 5px; padding-bottom: 5px; }
.teamWin0 { color: var(--yellow)!important; margin-left: 10px!important; font-size: 32px!important; position: relative!important; margin-top: 2px!important; vertical-align: top!important; }
.teamWin1 { color: var(--yellow)!important; margin-right: 10px!important; font-size: 32px!important; position: relative!important; margin-top: 2px!important; vertical-align: top!important; }
.teamTotalScore { color: #fff; font-size: 20px; padding-left: 10px; padding-right: 10px; }
.teamTotalN0 { color: #5699EB; font-size: 19px; padding-left: 10px; }
.teamTotalN1 { color:#eb5656; font-size: 19px; padding-right: 10px; }

#loadingBg { position: fixed; left: -16px; right: -16px; top: -16px; bottom: -16px; background-size: cover; background-position: center; pointer-events: none; }
.unbind { float: right; cursor: pointer; pointer-events: auto; padding-left: 5px; }
.reset { float: right; cursor: pointer; pointer-events: auto; padding-left: 0px; }

#mobileUI { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999999; }
#mobileJoystick { display: block; position: absolute; z-index: 9999999; }
#mobileJoystick .back { border: 2px solid white; }
#mobileJoystick .front { background: rgba(255, 255, 255, 0.8) !important; border: 2px solid white; }
#mobileJump { display: block; position: absolute; width: 40px; height: 40px; pointer-events: all; cursor: pointer; padding: 5px; z-index: 9999999; background-size: cover; background-image: url(/img/mobile/icon_5.png); }
#mobileCrouch { display: block; position: absolute; width: 40px; height: 40px; pointer-events: all; cursor: pointer; padding: 5px; z-index: 9999999; background-size: cover; background-image: url(/img/mobile/icon_3.png); }
#mobileEsc { display: block; position: absolute; width: 40px; height: 40px; pointer-events: all; cursor: pointer; padding: 2px; z-index: 9999999; background-size: cover; background-image: url(/img/mobile/icon_6.png); }
#mobileAimShoot { display: block; position: absolute; width: 70px; height: 70px; pointer-events: all; cursor: pointer; padding: 2px; z-index: 9999999; background-size: cover; background-image: url(/img/mobile/icon_1.png); }
#mobileShoot { display: block; position: absolute; width: 60px; height: 60px; pointer-events: all; cursor: pointer; padding: 2px; z-index: 9999999; background-size: cover; background-image: url(/img/mobile/icon_1.png); }
#mobileScope { display: block; position: absolute; width: 40px; height: 40px; pointer-events: all; cursor: pointer; padding: 2px; z-index: 9999999; background-size: cover; background-image: url(/img/mobile/icon_2.png); }
#mobileReload { display: block; position: absolute; width: 40px; height: 40px; pointer-events: all; cursor: pointer; padding: 2px; z-index: 9999999; background-size: cover; background-image: url(/img/mobile/icon_0.png); }
#mobileSwap { display: block; position: absolute; width: 40px; height: 40px; pointer-events: all; cursor: pointer; padding: 2px; z-index: 9999999; background-size: cover; background-image: url(/img/mobile/icon_4.png); }
#mobileKSwap { display: block; position: absolute; width: 40px; height: 40px; pointer-events: all; cursor: pointer; padding: 2px; z-index: 9999999; background-size: cover; background-image: url(/img/mobile/icon_7.png); }

#networkLag { display: none; color: rgba(255,255,255,0.7); background-color: rgba(0, 0, 0, 0.3); z-index: 3; padding: 10px; margin-bottom: 10px; will-change: transform; transform: translateZ(0); border-radius: 6px; width: 180px; font-size: 12px; text-align: center; }
#networkLag > div { color: rgba(255,255,255,0.7); }
#networkLagHed { color: #FBC02D!important; }
#skinRewardHolder { display: none; z-index: 3; margin-top: 5px; margin-bottom: 10px; border-radius: 4px; font-size: 12px; background-color: rgba(0, 0, 0, 0.3); min-width: 200px; padding: 10px; max-width: 250px; }
#voteToKick { display: none; color: rgba(255,255,255,0.7); background-color: rgba(0, 0, 0, 0.3); text-align: left; z-index: 3; padding: 10px; margin-bottom: 10px; will-change: transform; transform: translateZ(0); border-radius: 6px; width: 200px; font-size: 12px; }
#voteToForfeit { display: none; color: rgba(255,255,255,0.7); background-color: rgba(0, 0, 0, 0.3); text-align: left; z-index: 3; padding: 10px; margin-bottom: 10px; will-change: transform; transform: translateZ(0); border-radius: 6px; width: 225px; font-size: 12px; }
#voteKickName, #voteKickInfo, #voteKickKeys, #voteKickNum, #voteForfeitInfo, #voteForfeitKeys, #voteForfeitNum { color: rgba(255,255,255,0.7); }
#voteHeader { color: #FBC02D; background-color: rgba(255,255,255,0.3); padding: 5px; width: calc(100% + 10px); text-align: center; margin-top: -10px; margin-left: -10px; border-top-left-radius: 4px; border-top-right-radius: 4px; margin-bottom: 5px; text-transform: uppercase; }

.settingsHeader { width: 100%; padding-top: 19px; padding-bottom: 10px; position: sticky; top: -1px; z-index: 999999999; background-color: #333; padding-left: 20px; margin-left: -20px; }
.serverHeader { width: 100%; padding-top: 19px; position: sticky; top: 0; z-index: 999999999; background-color: #333; }
.chatTextOutline { text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5),1px -1px 0 rgba(0, 0, 0, 0.5),-1px 1px 0 rgba(0, 0, 0, 0.5),1px 1px 0 rgba(0, 0, 0, 0.5); }
.sprayImg { position: relative; z-index: 0 !important; border-radius: 8px; image-rendering: pixelated; width: 108px; background-size: cover !important; height: 110px; margin-left: 11px; transition: all .15s ease-in-out; }
.sprayImg:hover { opacity: 0.9; transform: scale(1.06); }
.sprayImgAnm { animation: sprayAnm 1.4s steps(2) infinite; }

#settingsTabLayout { font-size: 16px; display: table; width: 100%; margin-top: 18px; text-align: center; background-color:rgba(0, 0, 0, 0.12); border-radius: 6px }
.setSugBox2 { border: 4px solid rgba(255,255,255,0.5); vertical-align: top; position: relative; display: inline-block; background-color: rgba(0, 0, 0, 0.4); text-align: center; height: 165px; width: 279px; line-height: 165px; cursor: pointer; border-radius: 6px; font-size: 23px; color: #fff; margin-right: 10px; margin-top: 20px; }
.setSugBox2:hover { opacity: 0.8; border: 4px solid #fff; }
.setSugBox2:hover .segSugIH { display: block; }
.setSugBox { border: 4px solid rgba(255,255,255,0.5); vertical-align: top; position: relative; display: inline-block; background-color: rgba(0, 0, 0, 0.4); text-align: center; height: 165px; line-height: 200px; cursor: pointer; border-radius: 6px; font-size: 23px; color: #fff; }
.setSugBox:hover { opacity: 0.8; border: 4px solid #fff; }
.setSugBox:hover .segSugIH { display: block; }
.segSugIH { display: none; background-color: rgba(0,0,0,0.85); position: absolute; height: 100%; top: 0px; width: 100%; }
.setSugInf { position: absolute; top: 50%; transform: translate(-50%, -50%); left: 50%; line-height: initial; font-size: 27px; }
.sugBoxSelCus { border: 4px solid #bbbbbb; width: 100%; line-height: 165px; background-size: cover!important; background-position: center!important; }
.settingsBtn { color: rgba(255, 255, 255, 0.7); text-align: center; display: inline-block; width: 75px; cursor: pointer; background-color: #2196F3; font-size: 17px; padding: 4px 8px; margin-left: 8px; float: right; border-radius: 4px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.settingsBtn:hover { color: #fff; }
.settingTab { font-size: 20px; background-color: rgba(0, 0, 0, 0.68); cursor: pointer; display: table-cell; padding: 15px 0px 10px; }
.settingTab:hover { border-bottom: 5px solid rgba(255, 255, 255, 0.3); }
.creatorCodeBtn { display: inline-block; padding: 5px; padding-top: 10px; padding-bottom: 10px; margin-top: 10px; font-size: 18px; border-radius: 4px; width: 90px; text-align: center; margin-left: 10px; color: #fff; cursor: pointer; } .creatorCodeBtn:hover { opacity: 0.9; }
#creatorCodeI { width: 360px; margin-bottom: 8px; border-radius: 4px; }
#redVouch { width: 379px; margin-bottom: 8px; border-radius: 4px; }
.redVouchBtn { background-color: #2196F3; display: inline-block; padding-top: 10px; padding-bottom: 10px; font-size: 16px; border-radius: 4px; width: 100%; text-align: center; color: #fff; cursor: pointer; }
.redVouchBtn:hover { opacity: 0.9; }
#mdSrch { color: #fff; font-size: 18px; padding: 20px; padding-left: 25px; background-color: rgba(0, 0, 0, 0.4); width: calc(100% - 90px); margin-right: 10px; border-radius: 4px; margin-top: 10px; }
#mpSrch { color: #fff; font-size: 18px; padding: 20px; padding-left: 25px; background-color: rgba(0, 0, 0, 0.4); width: 79%; border-radius: 4px; margin-top: 10px; }
#mpCat { color: #fff; padding: 3px; padding-left: 20px; font-size: 18px; height: 75px; font-family: inherit; display: inline-block; width: 280px; margin-left: 20px; margin-right: 15px; border-radius: 4px; background-color: rgba(0, 0, 0, 0.2); border: none; cursor: pointer; }
.searchBtn { background-color: #2196F3; display: inline-block; margin-top: 10px; vertical-align: top; font-size: 16px; border-radius: 4px; height: 70px; width: 70px; text-align: center; margin-left: 10px; color: #fff; cursor: pointer; } .searchBtn:hover { opacity: 0.9; }

.newLeaderTeam { margin-bottom: 5px; color: #fff; background-color: rgba(0, 0, 0, 0.2); margin-left: -10px; margin-top: -10px; padding-left: 10px; padding-right: 10px; padding-top: 5px; padding-bottom: 5px; width: 100% !important; }
.newLeaderTeamScore { display: inline-block; float: right; color: rgba(255, 255, 255, 0.7); }
.newLeaderNoPlayers { margin-bottom: 5px; color: rgba(255,255,255,0.4); font-size: 14px; }

#killFeed { row-gap: 5px; }
.killfeedItem { word-wrap: break-word; display: inline-block; color: #fff; font-size: 17px; word-break: break-all; overflow-wrap: break-word; border-radius: 4px; background-color: var(--div-black); }
.killfeedMsg { color: rgba(255, 255, 255, 0.7); background-color: var(--div-grey); margin: 3px; padding: 5px 10px; display: inline-block; }

.challRotImg { width: 100%; height: 100%; transform: scale(1.4) rotate(20deg); background-position-x: center; filter: saturate(0.8); opacity: 0.7; }
.challMapCrd { cursor: pointer; position: relative; height: 147px; width: 218px; overflow: hidden; display: inline-block; border-radius: 5px; margin: 6px; background-position: center; background-size: cover; border: 3px solid #c8c8c8; }
.challMapCrd:hover { transform: scale(1.05); filter: brightness(1.3); z-index: 99; }
.challMapCrd:active { transform: scale(0.95); }
.challMapImg { position: absolute; cursor: pointer; top: 0; left: -50%; right: 0; bottom: 0; height: 100%; filter: grayscale(100%); transition: all 0.1s; background-size: cover; }
.challMapCvr { position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); }
.challMapName { text-shadow: 0 0 30px #000000; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 22px; color: white; z-index: 1; pointer-events: none; text-align: center; }
.challMapPrg { position: absolute; background: rgba(0, 0, 0, 0.7); font-size: 16px; margin-top: 10px; padding: 5px; padding-left: 20px; padding-right: 20px; bottom: 0px; right: 0px; border-top-left-radius: 4px; }
.challHeadrI { position: relative; width: calc(100% - 10px); height: 200px; background: #000; margin-bottom: 30px; border-radius: 14px; border: 4px solid white; background-size: cover; background-position-y: center; }
.challHeadrT { color: #fff !important; text-shadow: 0 0 20px black; font-size: 40px; position: absolute; bottom: 20px; left: 25px; }
.challHeadrS { color: #a7a7a7 !important; text-shadow: 0 0 10px black; font-size: 50px; position: absolute; bottom: 0px; right: 0px; padding-left: 40px; padding-right: 40px; height: 100px; background: rgba(0, 0, 0, 0.7); text-align: center; line-height: 100px; border-bottom-right-radius: 14px; border-top-left-radius: 14px; }
.challHeadrBck { position: absolute; left: 0px; top: 0px; padding: 10px; padding-left: 20px; padding-right: 20px; background: #00000082; border-bottom-right-radius: 14px; border-top-left-radius: 14px; }
.challBackArr { color: #fff !important; font-size: 60px !important; vertical-align: middle !important; cursor: pointer; }
.challBackArr:hover { transform: scale(1.15); }
.challCrdMsg { color: #fff; font-size: 30px; text-align: center; background: #0000008c; padding: 20px; border-radius: 8px; }
.chalCard { overflow: hidden; color: #fff; padding: 14px; padding-bottom: 10px; width: calc(100% - 40px); vertical-align: top; background-color: rgb(50 50 50); border-radius: 14px; display: inline-block; font-size: 26px; position: relative; background: rgba(0, 0, 0, 0.4); border: 4px solid #868686; }
.chalCardH { box-shadow: 0 0 14px #ffa000; background: rgb(79 50 0 / 40%); border-color: #ff9c00; }
.challComplB { position: absolute; width: 110px; height: 110px; background: #000000b0; top: 18px; border-radius: 12px; left: 18px; }
.chalImgC { position: relative; border-radius: 14px; width: 110px; height: 110px; display: inline-block; background-color: rgba(0, 0, 0, 1); border: 4px solid #8b8b8b; outline: none; }
.chalXPBar { position: relative; height: 35px; border-radius: 8px; background-color: rgb(0 0 0); margin-top: 25px; padding: 3px; }
.chalXPBarC { background-image: linear-gradient(to right, #FF6A0B, #fbc02d, 94%, white); height: 100%; font-size: 16px; border-radius: 8px; }
.chalXPVal { color: #fff; position: absolute; height: 100%; text-align: center; left: 0; right: 0; font-size: 16px; line-height: 35px; }
.chalRight { font-size: 25px; width: 770px; position: relative; display: inline-block; color: #fff; vertical-align: top; margin-left: 20px; margin-top: 4px; }
.chalExpr { float: right; color: rgba(255, 255, 255, 0.5) !important; font-size: 22px; }
.chalRews { margin-top: -14px; margin-bottom: -100%; margin-right: -14px; padding: 10px; padding-right: 17px; padding-left: 3px; width: 200px; height: 130px; float: right; text-align: right; background: #00000057; border-left: 3px solid #7c7c7c; }
.chalRewV { font-size: 18px; color: #b0b0b0 !important; }
.chalRewSkn { display: inline-block; width: 50px; height: 50px; background: black; border-radius: 6px; margin: 6px; margin-left: 12px; margin-right: 0px; border: 2px solid dimgrey; cursor: pointer; transition: all 0.1s; background-size: cover; }
.chalRewSkn:hover { transform: scale(1.1); filter: brightness(1.1); }
.chalRewSkn:active { transform: scale(0.9); }
.changeText { font-size: 18px; margin-top: 3px; margin-bottom: 3px; color: rgba(0, 0, 0, 0.5); padding-bottom: 10px; padding-top: 10px; border-bottom: 4px solid rgba(255, 255, 255, 0.1); }

#endChals { text-align: left; position: absolute; top: 10px; z-index: 10; left: 10px; }
.endChalCard { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color: #fff; margin-bottom: 6px; padding: 10px; padding-left: 15px; padding-right: 18px; padding-bottom: 5px; vertical-align: top; background-color: rgba(0, 0, 0, 0.3); border-radius: 5px; display: block; font-size: 24px; z-index: 1; position: relative; cursor: pointer; pointer-events: auto; }
.endChalImg { position: relative; z-index: -1 !important; border-radius: 8px; width: 80px; height: 80px; display: inline-block; background-color: rgba(0,0,0,0.8); }
.endChalRight { display: inline-block; color: #fff; vertical-align: top; margin-left: 10px; margin-top: -2px; z-index: 0 !important; }
.endChalDesc { position: relative; text-shadow: none; z-index: -1 !important; color: #FBC02D; font-size: 16px; margin-top: -2px; }

.skinRewCard { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color: #fff; display: inline-flex; font-size: 24px; z-index: 1; position: relative; cursor: pointer; pointer-events: auto; justify-content: flex-start; }
.skinRewImg { position: relative; z-index: -1 !important; border-radius: 4px; width: 36px; display: inline-block; background-color: rgba(0, 0, 0, 0.8); }
.skinRewRight { display: inline-grid; color: #fff; margin-left: 10px; z-index: 0 !important; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 200px; font-size: 15px; align-content: center; }
#skinRewList{ display: grid; grid-row-gap: 4px; }
.skinRewDesc { position: relative; text-shadow: none; color: #FBC02D; font-size: 16px; margin-bottom: 6px; text-decoration: underline; text-align: center; }

.crftRcpeCrd { position: relative; width: 282px; background: #151515; margin: 5px; border-radius: 8px; padding: 15px; padding-bottom: 12px; display: inline-block; }
.crftNewRc { padding-right: 10px; padding-left: 10px; position: absolute; bottom: -3px; font-size: 18px; left: -2px; color: #fff; background-image: linear-gradient(to right, #fb9c40, #fb4040); border-top-right-radius: 6px; border-bottom-left-radius: 5px; }
.craftRcIcn { display: inline-block; height: 138px; width: calc(100% - 45px); padding: 20px; background: #000; border-radius: 8px; border: 3px solid #6d6d6d; cursor: pointer; text-align: center; position: relative; }
.craftRiHl { position: relative; color: #fff; display: inline-block; }
.crftItmJnk { color: #ffffff99 !important; font-size: 18px; position: absolute; bottom: 2%; right: 2%; text-align: right; }
.crftItmNm { font-size: 18px; cursor: pointer; width: 230px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; position: absolute; top: 2%; left: 4%; text-align: left; }
.crftItmNm:hover { text-decoration: underline; }
.crftRecSml { position: relative; vertical-align: top; background: #000; display: inline-block; border: 2px solid dimgrey; cursor: pointer; background-size: 95%; background-position: center; background-repeat: no-repeat; margin-top: 3px; margin-left: 5px; width: 25px; height: 25px; border-radius: 4px; }
.crftRecSml:hover { filter: brightness(1.05); transform: scale(1.1); }
.crftRecSml:active { transform: scale(0.96); }
.crftReqCnt { position: absolute; bottom: 2px; left: 5px; font-size: 13px; }
.crftItmReq { position: relative; vertical-align: top; margin-top: 10px; margin-left: 2px; margin-right: 2px; width: 48px; height: 48px; background: #000; display: inline-block; border: 2px solid dimgrey; border-radius: 4px; cursor: pointer; background-size: 95%; background-position: center; background-repeat: no-repeat; }
.crftItmReq:hover { filter: brightness(1.05); transform: scale(1.1); }
.crftItmReq:active { transform: scale(0.96); }
.crftItmBtn { text-align: center; background: #98459b; margin-top: 10px; height: 36px; border-radius: 4px; width: 100%; line-height: 36px; font-size: 16px; cursor: pointer; }
.crftItmBtn:hover { filter: brightness(1.05); transform: scale(0.95); }
.crftItmBtn:active { transform: scale(0.92); }
.crftTim { text-align: center; color: #ffffffad !important; background: #343434; margin-top: 10px; height: 36px; border-radius: 4px; width: 100%; line-height: 36px; font-size: 16px; }
.crftHmmrAnm { position: absolute; top: 0px; left: 0px; width: 100%; background: #000000a8; height: 100%; border-radius: 6px; text-align: center; }
.crftLimAmnt { color: #fff; position: absolute; right: 10px; font-size: 26px; top: 4px; }
.crftHammrIcn { font-size: 110px !important; color: #e0e0e0; line-height: 175px !important; animation: rotBouncing 1s infinite; animation-timing-function: ease-out; }
.donCrftIcn { text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: #000000a8; }
@keyframes rotBouncing { 0% { transform: rotateZ(0deg); } 50% { transform: rotateZ(30deg); } 100% { transform: rotateZ(0deg); } }
#crftHeaderImg { position: relative; height: 250px; border-radius: 5px; margin-bottom: 10px; background-size: cover; background-repeat: no-repeat; background-position-y: 50%; width: calc(100% - 5px); }
#crftHeaderName { font-size: 38px; position: absolute; left: 40px; top: 30px; text-shadow: 0 0 10px black; }
#crftHeaderDesc { backdrop-filter: blur(7px); background: #00000094; width: 600px; color: rgb(226 226 226) !important; font-size: 14px; position: absolute; margin-top: -10px; left: 40px; bottom: 30px; overflow-y: auto; padding: 16px; padding-left: 20px; border-radius: 8px; padding-right: 20px; top: 120px; }
.hostToggle { color: #fff; text-align: center; display: inline-block; width: 75px; cursor: pointer; background-color: #2196F3; font-size: 15px; padding: 4px; float: right; border-radius: 4px; } .hostToggle:hover { background-color: #c3c3c3; }

#leaderboardHolder { text-align: left; float: right; width: 350px; z-index: 3; color: rgba(255, 255, 255, 0.7); font-size: 23px; margin-bottom: 10px; border-radius: 4px; background-color: var(--div-black); }
#leaderContainer { text-align: left; color: #fff; padding: 10px; padding-left: 15px; padding-right: 15px; margin: 3px; background-color: var(--div-grey); }
.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); }

.reqW { height: 217px; width: 100%; display: inline-block; left: 50%; text-align: center; transform: translateX(-50%); position: relative; background-color: rgba(0,0,0,0.3); border-radius: 6px; } .reqWLvl { font-size: 16px; padding-bottom: 5px; color: #000; margin-top: -15px; } .reqWIcon { color: lightgrey!important; font-size: 150px!important; vertical-align: bottom!important; font-weight: 999!important; } .reqWTxt { font-size: 14px; color: rgba(0,0,0,0.5); }
.reqW.login { cursor: pointer; pointer-events: all; }.reqW.login:hover { background-color: rgba(0,0,0,0.5); }

#referralHeader { background-color: rgba(0, 0, 0, 0.7); padding: 10px; color: #fff; width: calc(100% - 20px); text-align: center; font-size: 30px; }

.rainbow { animation: rainbow 0.5s linear infinite; }
.rainbowText { animation: rainbowT 0.5s linear infinite; }
.rainbowBG { animation: rainbowBG 0.5s linear infinite; }
.rainbowBorder { animation: rainbowB 0.5s linear infinite; }
.rainbowSpin { animation: rainbowS 0.5s linear infinite; }
@keyframes rainbow{ 0%, 100%{color: Crimson;border-color: Crimson;} 20%{color: orange;border-color: orange;} 40%{color: yellow;border-color: yellow} 60%{color: lime;border-color: lime;} 80%{color: MediumBlue;border-color: MediumBlue;} }
@keyframes rainbowT{ 0%, 100%{color: Crimson;} 20%{color: orange;} 40%{color: yellow;} 60%{color: lime;} 80%{color: MediumBlue;} }
@keyframes rainbowB{ 0%, 100%{border-color: Crimson;} 20%{border-color: orange;} 40%{border-color: yellow;} 60%{border-color: lime;} 80%{border-color: MediumBlue;} }
@keyframes rainbowBG{ 0%, 100%{background-color: Crimson;} 20%{background-color: orange;} 40%{background-color: yellow;} 60%{background-color: lime;} 80%{background-color: MediumBlue;} }
@keyframes rainbowS{ 0%, 100%{filter: drop-shadow(0 0 20px Crimson);} 20%{filter: drop-shadow(0 0 20px orange);} 40%{filter: drop-shadow(0 0 20px yellow);} 60%{filter: drop-shadow(0 0 20px lime);} 80%{filter: drop-shadow(0 0 20px MediumBlue);} }
.rgbHue { animation: rgbHue .8s steps(36) infinite; }
@keyframes rgbHue { from { filter:hue-rotate(10deg) brightness(2); } to { filter:hue-rotate(360deg) brightness(2); } }
.poText { animation: poT 0.7s linear infinite; }
@keyframes poT{ 0%, 100%{color: #e0050f} 25%{color: #e0050f} 50%{color:#1a46e3} 75%{color:#1a46e3} }

.spinVal { font-size: 18px; color: #FFC147; background-color: rgba(0, 0, 0, 0.7); width: 230px; height: 120px; line-height: 42px; text-align: center; pointer-events: none; margin-top: 94px; margin-left: -10px; position: relative; z-index: 6; }
.makeGray { filter: grayscale(100%); }
.shakeEffect { animation: shake 0.5s; }
@keyframes shake { 20% { transform: translate(6px, 0); } 30% { transform: translate(-6px, 0); } 40% { transform: translate(8px, 0); } 50% { transform: translate(-8px, 0); } 60% { transform: translate(10px, 0); } 70% { transform: translate(-10px, 0); } 80% { transform: translate(8px, 0); } 90% { transform: translate(-8px, 0); } 100% { transform: translate(0px, 0); } }

.specLevelBox { display: inline-block; background-color: #000; padding: 10px; color: #fff; padding-top: 1px; padding-bottom: 1px; margin-right: 5px; margin-left: 12px; vertical-align: middle; margin-top: -7px; }
.specVerified { color: #40C4FF; font-size: 28px!important; vertical-align: middle; margin-right: 3px; margin-top: -7px; }
.specFlag { position: absolute!important; top: 55px; left: 50px; }
.specPlayerHolder0 .specPlayerFlag { position: absolute; top: 24px; left: 30px; transform: scale(0.7); }
.specPlayerHolder1 .specPlayerFlag { position: absolute; top: 24px; left: 20px; transform: scale(0.7); }
.specNum { font-size: 12px; color: #fff; margin-top: -10px; position: absolute; top: 30px; width: 15px; }

.hostOpt { position: relative; display: inline-block; border: 2px solid #000000; border-radius: 4px; padding: 10px; width: 203px; font-size: 14px; margin-left: 2px; margin-right: 2px; margin-bottom: 2px; margin-top: 2px; background-color: #868686; } .hostOpt input {display:none;}
.optCheck { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; border-radius: 4px; padding: 10px; width: auto; height: auto; background-color: #868686; }
.optImg { position: absolute; z-index: 1; top: 5px; width: 35px; right: 5px; pointer-events: none; image-rendering: pixelated; }
.optName { color: #fff; z-index: 1; font-size: 14px; position: relative; pointer-events: none; }
input:checked + .optCheck { background-color: #2196f3; }
input:hover + .optCheck { background-color: #c3c3c3; }

.subPassChg { background-color: #2196F3; display: inline-block; padding: 5px; margin-top: 10px; font-size: 18px; border-radius: 4px; width: 135px; text-align: center; margin-left: 15px; color: #fff; cursor: pointer; padding-top: 10px; padding-bottom: 10px; } .subPassChg:hover { background-color: #1a78c2; transform: scale(0.95); }
#displayN { float: right; width: 200px; font-size: 14px; margin-top: -4px; }
.updDisN { background-color: #2196F3; vertical-align: bottom; cursor: pointer; display: inline-block; padding: 6px; font-size: 15px; border-radius: 4px; width: 80px; text-align: center; margin-left: 10px; color: #fff; float: right; margin-top: 0px; }
.updDisN:hover { background-color: #1a78c2; transform: scale(0.95); }
.lnkTw { background-color:#6441a5; margin-top:2px; vertical-align: bottom; cursor: pointer; display: inline-block; padding: 5px; font-size: 14px; border-radius: 4px; width: 80px; text-align: center; margin-left: 10px; color: #fff; float: right; }
.lnkTw:hover { background-color: #1a78c2; transform: scale(0.95); }

.twoFAGrid { display: none; margin-top: 10px; margin-bottom: 5px; width: 100%; height: 315px; background-color: rgba(0, 0, 0, 0.1); text-align: center; }
.twoFAkeyg { background-color: rgba(0, 0, 0, 0.9) !important; }
table.twoFATable { margin: 0 auto; width: 100px; height: 190px; text-align: center; border-spacing: 10px; border-collapse: separate; }
table.twoFATable td { cursor: pointer; border-radius: 10px; border: none; background-color: rgba(0, 0, 0, 0.2); color: #fff; }
table.twoFATable td:hover { background-color: rgba(0, 0, 0, 0.3); }
table.twoFATable th { border: none; }

#premiumRes { margin-bottom: 10px; color: rgba(255, 255, 255, 0.3); }
#aliasRes { margin-top: 8px; float: right; font-size: 14px; margin-right: 10px; color: #eb5656; }
.premiumSkinCol { color: #FBC02D !important; font-size: 42px !important; vertical-align: middle; text-align: center; float: right; cursor: pointer; display: inline-block; margin-left: 5px; margin-top: -3px; }
.registerToUnlockSkinColor { color: white !important; font-size: 20px !important; vertical-align: middle; text-align: center; float: right; display: inline-block; margin-left: 5px; margin-top: -3px; }
#premTime { float: right; color: rgba(255, 255, 255, 0.5); font-size: 20px; }

#popupBack { pointer-events: all; width: 100%; height: 100%; position: absolute; background-color: rgba(0, 0, 0, 0.75); }
#popupHolder { display: none; text-align: center; width: 100%; height: 100%; position: absolute; z-index: 2147483647; }
#popupContent { pointer-events: all; border-radius: 10px; padding: 15px; text-align: left; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; box-shadow: 2px 2px 8px rgb(0 0 0 / 50%); background-color: #353535; }
.twitchPop, .nftPop, .confPop, .clientExitPop, #confPurchItemPop { pointer-events: auto; border-radius: 10px; background-color: rgba(0, 0, 0, 0.75); padding: 15px; text-align: left; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; width: 400px; border: 2px solid rgba(255, 255, 255, 0.4); }
#bundlePop, #premiumPop { pointer-events: all; border-radius: 10px; padding: 15px; text-align: left; position: absolute; top: 50%; left: 50%; width: 1035px; transform: translate(-50%, -50%); color: #fff; box-shadow: 2px 2px 8px rgb(0 0 0 / 50%); background-color: #353535; }
.metaPop { pointer-events: auto; border-radius: 10px; background-color: rgba(0, 0, 0, 0.75); padding: 15px; text-align: left; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; width: 417px; border: 2px solid rgba(255, 255, 255, 0.4); }
.confPremiumPop { pointer-events: auto; border-radius: 10px; padding: 15px; text-align: left; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; width: 400px; box-shadow: 2px 2px 8px rgb(0 0 0 / 50%); background-color: #353535; }
.vouchPop { pointer-events: auto; border-radius: 10px; padding: 15px; text-align: left; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; width: 379px; box-shadow: 2px 2px 8px rgb(0 0 0 / 50%); background-color: #353535; }
.polConfPop { pointer-events: auto; border-radius: 10px; background-color: rgba(0, 0, 0, 0.75); padding: 15px; text-align: left; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; width: 350px; border: 2px solid rgba(255, 255, 255, 0.4); }
.rankedPop { pointer-events: all; border-radius: 10px; padding: 15px; text-align: left; position: absolute; top: 50%; left: 50%; width: 887px; transform: translate(-50%, -50%); color: #fff; box-shadow: 2px 2px 8px rgb(0 0 0 / 50%); background-color: #353535; }
.promoPop { pointer-events: auto; border-radius: 10px; padding: 15px; text-align: left; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; width: 632px; border: solid 2px #000000; box-shadow: 2px 2px 8px rgb(0 0 0 / 50%); background-color: #353535; }
.clientPop { pointer-events: all; border-radius: 10px; background-color: rgba(255, 255, 255, 0.3); padding: 15px; text-align: left; position: absolute; top: 50%; left: 50%; width: 700px; transform: translate(-50%, -50%); color: #fff; }
#confirmBtn { margin-top: 5px; color: #fff; width: 44%; background-color: #5ce05a; font-size: 18px; text-align: center; padding: 10px; cursor: pointer; padding-bottom: 12px; display: inline-block; border-radius: 4px; } #confirmBtn:hover { background-color: #409c3e; }
#declineBtn { margin-top: 5px; color: #fff; width: 44%; font-size: 18px; text-align: center; padding: 10px; cursor: pointer; padding-bottom: 12px; display: inline-block; background-color: #eb5656; float: right; border-radius: 4px; } #declineBtn:hover { background-color: #BC4444; }
.acceptRequest { color: #5ce05a; border: none; border-radius: 3px }

#tradePop { pointer-events: auto; border-radius: 10px; background-color: rgba(0, 0, 0, 0.75); padding: 15px; text-align: left; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -51%); color: #fff; width: 679px; }
.tHolderL { width: 38%; float: left; overflow: hidden; padding-right: 10px; }
.tHolderM { width: 100%; overflow: hidden; }
.tHolderR { width: 38%; float: left; overflow: hidden; }
.tList { margin-top: 10px; margin-bottom: 10px; height: 250px; overflow-y: scroll; min-height: 70px; text-align: center; }
.tListN { font-size: 15px; color: rgba(255,255,255,0.8); text-align: center; padding: 5px; border-radius: 4px; } .tListN.inv { background-color: #2196F3; } .tListN.trade { background-color: #ed4242; text-align: left; padding-left: 10px; }
.tReady { padding-right: 5px; float: right; text-align: right; color: rgba(0,0,0,0.5); }
.tTotal { color: rgba(0,0,0,0.5); padding-left: 5px; }
.tItemHolder { cursor: pointer; pointer-events: auto; color: #fff; margin-bottom: 4px; margin-left: 2px; margin-right: 2px; padding: 5px; padding-top: 2px; width: 65px; height: 65px; vertical-align: top; background-color: rgba(0, 0, 0, 0.5); border-radius: 5px; display: inline-block; position: relative; z-index: 1; border: 1px solid white; } .tItemHolder:hover { opacity: 0.75; }
.dItemHolder { cursor: pointer; pointer-events: auto; color: #fff; margin-bottom: 4px; margin-left: 2px; margin-right: 2px; padding: 5px; padding-top: 2px; width: 68px; height: 68px; vertical-align: top; background-color: rgba(0, 0, 0, 0.5); border-radius: 5px; display: inline-block; position: relative; z-index: 1; border: 1px solid white; } .dItemHolder:hover { opacity: 0.75; }
.tItemImg { width: 55px; image-rendering: auto; }
.dItemImg { width: 68px; image-rendering: auto; }
.tItemSprayImg { cursor: pointer; pointer-events: auto; color: #fff; width: 54px; height: 55px; z-index: 1; background-size: cover !important; image-rendering: auto; }
.dItemSprayImg { cursor: pointer; pointer-events: auto; color: #fff; width: 67px; height: 68px; z-index: 1; background-size: cover !important; image-rendering: auto; }
.tItemN { position: absolute; bottom: 5px; font-size: 8px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: inherit; color: #fff; text-align: left; }
.tItemCnt { position: absolute; top: 5px; right: 6px; font-size: 8px; color: #fff; }
.tItemInf { text-align: center; position: absolute; top: 4px; left: 3px; font-size: 8px; background-color: green; color: #fff; padding: 2px; border-radius: 4px; padding-left: 4px; padding-right: 4px; cursor: pointer; pointer-events: all; }
.tKRInput { width: 332px; padding-left: 10px; text-align: left; padding-right: 10px; padding-top: 6px; padding-bottom: 5px; border-radius: 4px; margin-bottom: 5px; box-sizing: border-box; border: none; color: rgba(0, 0, 0, 0.6); }
.tSubHolder { position: relative; display: inline-block; border-radius: 4px; padding: 5px; padding-top: 10px; padding-bottom: 10px; font-size: 14px; width: calc(100% - 10px); margin-left: 0px; margin-right: 0px; margin-bottom: 2px; margin-top: 2px; text-align: center; } .tSubHolder input {display:none;}
.tSubCheck { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; border-radius: 4px; padding: 10px; width: auto; height: auto; background-color: #5ce05a; }
#tSubName { color: #fff; z-index: 1; font-size: 14px; position: relative; pointer-events: none; }
input:hover + .tSubCheck { background-color: #c3c3c3; }
input:disabled + .tSubCheck { background-color: #868686; pointer-events: none; cursor: none; }
.tDecCheck { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; border-radius: 4px; padding: 10px; width: auto; height: auto; background-color: #ed4242; }
#tDecName { color: #fff; z-index: 1; font-size: 14px; position: relative; pointer-events: none; }
input:hover + .tDecCheck { background-color: #c3c3c3; }
input:disabled + .tDecCheck { background-color: #868686; pointer-events: none; cursor: none; }
.tCurrencyControls { display: flex; align-items: center; margin-bottom: 10px; gap: 8px; }
.tCurrencyControls > span { color: #fff; line-height: 20px; margin-top: 8px; }
.tCurrencyControls > input { height: 40px; box-sizing: border-box; flex: 1; }
.tCurrencyBtn { padding: 10px 20px; border: 0; background: #5ce05a; color: #fff; cursor: pointer; }
.tCurrencyItem{ cursor: pointer; pointer-events: auto; color: #fff; margin-bottom: 4px; margin-left: 2px; margin-right: 2px; padding: 5px; padding-top: 2px; width: 65px; height: 65px; vertical-align: top; background-color: rgba(0, 0, 0, 0.5); border-radius: 5px; display: inline-flex; position: relative; z-index: 1; border: 1px solid white; flex-direction: column; justify-content: center; gap: 8px; }
.tCurrencyName { font-size: 8px; color: #fff; }
.tCurrencyAmount { font-size: 7px; color: #fff; }
.estOfferVal { font-size: 15px; color: rgba(0,0,0,0.5); text-align: center; padding: 2px; }

#androidDB { margin-left: 20px; margin-right: 0px; display: inline-block; width: 280px; height: auto; cursor: pointer; }
#androidDB:hover { transform: scale(0.98); }
#androidDB:active { transform: scale(0.95); }
#iosDB { margin-bottom: 16px; margin-right: 20px; display: inline-block; width: 216px; height: auto; cursor: pointer; }
#iosDB:hover { transform: scale(0.98); }
#iosDB:active { transform: scale(0.95); }
.plusOrMinus { color: #fff !important; font-size: 47px!important; vertical-align: middle!important; margin-top: -5px!important; }
.refAnot { display: inline-block; font-size: 18px; color: #fff; background-color: #f005d1; vertical-align: top; padding: 10px; padding-top: 3px; border-radius: 6px; margin-right: 10px; padding-bottom: 5px; line-height: 33px; }

.bigMenTabs { margin-top: -15px !important; background-color: rgba(0, 0, 0, 0.68); width: 100%; border-radius: 5px; margin-bottom: 20px; position: relative; display: table; }
.bigMenTab { text-align: center; display: table-cell; padding-left: 10px; padding-right: 10px; padding-top: 15px; padding-bottom: 10px; line-height: 45px; color: rgba(255, 255, 255, 0.7); font-size: 20px; cursor: pointer; }
.bigMenTab.flex { display: inline-block; width: 200px; }
.bigMenTab:hover { border-bottom: 5px solid rgba(255, 255, 255, 0.4); cursor: pointer; }
.bigMenTabDis { color: #787878 !important; pointer-events: none !important; }
.bigMenTabA { cursor: default; border-bottom: 5px solid rgba(255, 255, 255, 0.9); }
.bigMenTabA:hover { border-bottom: 5px solid rgba(255, 255, 255, 1); }

.menuTabsNew { margin-top: 5px; background-color: rgba(0, 0, 0, 0.3); width: 100%; border-radius: 5px; margin-bottom: 15px; position: relative; display: table; }
.menuTabNew { text-align: center; display: table-cell; padding: 7px 0px 5px; color: #858585; font-size: 15px; cursor: pointer; }
.menuTabNew:hover { border-bottom: 5px solid rgba(0, 0, 0, 0.2); cursor: pointer; }
.tabANew { cursor: default; border-bottom: 5px solid rgba(0, 0, 0, 0.7); }
.tabANew:hover { border-bottom: 5px solid rgba(0, 0, 0, 0.7); }
.dark .menuTabNew { color: rgba(255, 255, 255, 0.8) !important; }
.dark .menuTabNew:hover { border-bottom: 5px solid rgba(255, 255, 255, 0.2) !important; }
.dark .tabANew { border-bottom: 5px solid rgba(255, 255, 255, 0.7) !important; }
.dark .tabANew:hover { border-bottom: 5px solid rgba(255, 255, 255, 0.7) !important; }

.click { pointer-events: all; cursor: pointer; }.click:hover { text-decoration: underline; }
.gameCodePop { pointer-events: auto; border-radius: 10px; background-color: rgba(255, 255, 255, 0.3); padding: 15px; text-align: left; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; width: 400px; }
#codeInput { margin-bottom: 5px; font-size: 16px; padding: 10px; padding-left: 10px; padding-right: 10px; margin-top: 5px; width: 380px; border-radius: 4px; border: none; }

.creationActions { top: 9px; right: 9px; position: absolute; z-index: 2; }
.creationAction { z-index: 2; text-shadow: unset; cursor: pointer; font-size: 24px; border-radius: 20px; color: #fff; margin-left: 3px; } .creationAction:hover { transform: scale(1.2); }
.creationAction.sel { color: #FBC02D!important; }
.creationAction.del { color: #ff4747!important; }

.setToggle { width: 275px; font-size: 18px; margin-right: 0px; border-width: 0px; padding: 2px; border-radius: 4px; margin-top: 3px; background-color: #bbb; border: none; }
.sideTabs { text-align: center; display: table-cell; width: 25%; }
.centerTab { padding-right: 10px; padding-left: 10px; text-align: center; display: table-cell; }
#serverSearch { padding: 5px; padding-left: 10px; padding-right: 10px; border: none; color: #fff; background-color: rgba(0,0,0,0.5); border-radius: 4px; font-size: 18px; }
#serverSearch::placeholder { color: rgba(255, 255, 255, 0.5) }

.purejscarousel { overflow: hidden; }
.purejscarousel-slides-container:before, .purejscarousel-slides-container:after { content: ""; display: table; }
.purejscarousel-slides-container:after { clear: both; }
.purejscarousel-slide { float: left; }
.purejscarousel-btn { box-shadow: none; outline: none; cursor: pointer; margin-top: -25px; position: absolute; top: 25px; width: 50px; color: #fff !important; height: 100%; background-color: rgb(0 0 0 / 90%) !important; text-align: center; }.purejscarousel-btn:hover { color: rgba(255, 255, 255, 0.8) !important; }
.purejscarousel-btn-next { right: 0px; }
.purejscarousel-btn-prev { left: 0px; }
.plusOrMinus2 { font-size: 47px!important; margin-left: -14px!important; margin-top: -9px!important; margin-right: -11px!important; color: rgba(255,255,255,0.9); top: 38%; left: 2px; position: relative; }
.purejscarousel-dots-container { float: left; margin-top: 15px; text-align: center; width: 100%; }
.purejscarousel-dot { background: #aaa; border: 0; border-radius: 50%; box-shadow: none; cursor: pointer; height: 15px; outline: none; margin: 0 5px; width: 15px; }
.active.purejscarousel-dot { cursor: default; opacity: .5; }
.carousel { margin: 0px auto; overflow: hidden; position: relative; width: 100%; }
.carousel:before, .carousel:after { content: ""; display: table; }
.carousel:after { clear: both; }
.slide { border: 15px solid #252525; position: relative; color: #fff; float: left; font-size: 20px; height: 140px; text-align: center; width: 265px; transition: all 0.1s; cursor: pointer; }.slide:hover { transform: scale(1.08); }
.slideImg { width: 100%; height: 100%; transition: all 0.2s; border-radius: 6px; }
.slideName { position: absolute; top: 25%; left: 50%; font-size: 23px; color: rgba(255, 255, 255, 0.9); pointer-events: none; transform: translate(-50%, -50%); width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.slidePlayers { position: absolute; bottom: 4px; left: 6px; font-size: 15px; color: #fff; pointer-events: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.slidePlayers > span { margin-right: 5px; color: #fff; vertical-align: bottom; margin-top: -5px; font-size: 30px!important; }
.slideTag { position: absolute; bottom: 4px; right: 6px; display: inline-block; border-radius: 4px; color: #f0cb26; padding: 3px; padding-left: 10px; padding-right: 10px; vertical-align: middle; background-color: var(--blue); font-size: 12px; }

.switch2 { float: right; position: relative; display: inline-block; margin-bottom: 5px; width: 50px; height: 28px; }
.switch2 input {display:none;}
.slider2 { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #a8a8a8; transition: .4s; border-radius: 6px; }
.slider2:before { position: absolute; content: ""; height: 20px; width: 22px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 4px; }
input:checked + .slider2 { background-color: #2196F3; }
input:focus + .slider2 { box-shadow: 0 0 1px #2196F3; }
input:checked + .slider2:before { transform: translateX(20px); }

#endTabbedView { min-width: 1000px; display: inline-block; vertical-align: top; }
.endCard { padding: 10px; background-color: rgba(0,0,0,.5); border-collapse: collapse; box-sizing: border-box; text-align: left; border-radius: 6px; height: min-content; display: inline-block; vertical-align: top; max-height: 100%; min-width: 100%; }
#tabHolder { display: grid; grid-template-columns: repeat(4, calc(100% / 4)); background-color: rgba(0, 0, 0, 0.3); margin-bottom: 10px; border-radius: 4px; }
.tabHeader { text-align: center; padding: 10px 10px 6px; color: rgba(255,255,255,.75); cursor: pointer; }
.tabHeader:hover { color: #fff; border-bottom: 4px solid #fff; }
.tabHeader.selected { color: var(--yellow); border-bottom: 4px solid var(--yellow); }
.tabBody { max-height: 670px; overflow-y: auto; }
#endLayout { display: grid; grid-template-columns: calc(40% - 5px) calc(60% - 5px); column-gap: 10px; row-gap: 10px; margin-top: 16px; }
.endSection { background-color: rgba(0, 0, 0, 0.3); padding: 16px 20px; border-radius: 6px; position: relative; }
.endTitle { color: #fff; margin-bottom: 10px; }
#gameFundsLayout { display: grid; row-gap: 10px; height: 100%; }
.gfSection { background-color: rgba(0, 0, 0, 0.3); padding: 16px 20px; border-radius: 6px; }
#modeLayout { text-align: center; }
.modeIcon { width: 70px; }
.unknownModeIcon { color: var(--yellow); font-size: 35px; padding: 5px; }
.modeStatus { color: var(--green); }
#fundsLayout { text-align: center; }
.fundsCoin { width: 50px; margin-left: auto; }
.fundsVal { color: rgba(255,255,255,.6); margin-top: 2px; font-size: 25px; }
#combatRecordLayout { display: grid; grid-template-columns: auto auto; column-gap: 10px; row-gap: 10px; }
#kdLayout { display: grid; grid-template-columns: auto auto; background-color: rgba(255, 255, 255, 0.05); border-radius: 6px; border: 4px solid rgba(255, 255, 255, 0.05); }
#kdLayout .crStat { text-align: center; color: rgba(255,255,255,.5); padding: 5px 15px; background-color: transparent; border: none; }
.crStat { text-align: center; color: rgba(255,255,255,.5); background-color: rgba(255, 255, 255, 0.05); padding: 5px 15px; border-radius: 6px; border: 4px solid rgba(255, 255, 255, 0.05); }
.crLabel { font-size: 14px; color: rgba(255,255,255,.5); margin-bottom: 5px; }
.crVal { color: #fff; font-size: 20px; }
#lvlLayout { display: grid; grid-template-columns: 40px 50px auto 50px 40px; }
.xpRnk { width: 40px; margin-top: 3px; }
.xpLvl { color: rgba(255,255,255,.6); margin-top: 4px; font-size: 20px; }
.xpEndBar { margin-top: 5px; margin-bottom: 5px; width: 98.5%; height: 25px; padding: 6px; background-color: rgba(0, 0, 0, 0.6); border-radius: 4px; position: relative; }
.xpEndBarB { display: inline-block; height: 100%; background-image: linear-gradient(to right, #FF6A0B, #fbc02d, 94%, white); transition: width 1s ease-in-out; }
.xpEndBarV { color: #fff; position: absolute; height: 100%; text-align: center; top: 6px; left: 0; right: 0; font-size: 14px; }
#medalTable { display: grid; grid-template-columns: auto auto auto auto auto auto auto auto; row-gap: 10px; background-color: rgba(0, 0, 0, 0.2); padding: 10px; border-radius: 6px; }
.medalCard { width: 100px; height: 100%; margin: auto; }
.medalImg { background-image: url(../img/medals/medal_0.png), url(../img/medals/badge_0.svg); background-size: 60%, contain; background-position: center; background-position-x: calc(50%), center; background-repeat: no-repeat, no-repeat; width: 100%; height: 100px; }
.medalTxt { text-align: center; color: white; font-size: 14px; margin-top: 5px; }
.keyIcon { background-color: rgba(0, 0, 0, 0.5); padding: 3px 8px; border-radius: 4px; color: #fff; font-size: 14px; border-left: 5px solid rgba(255, 255, 255, 0.3); border-right: 5px solid rgba(255, 255, 255, 0.3); border-top: 4px solid rgba(255, 255, 255, 0.5); border-bottom: 7px solid rgba(255, 255, 255, 0.1); margin: 2px 0px; transform: scale(1); transition: transform .1s ease; }
.keyIcon:hover { transform: scale(0.9); text-decoration: none !important; }

input[type=color] { -webkit-appearance: none; border: 4px solid var(--blue); padding: 0px; width: 66px; height: 30px; margin-top: 4px; border-radius: 5px; }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0px; border: none; border-radius: 0px; }
input[type="color"]::-webkit-color-swatch { padding: 0px; border: none; border-radius: 0px; }
input[type=color]:hover { cursor: pointer; }

.pfpPop { pointer-events: auto; border-radius: 10px; padding: 15px; text-align: left; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -51%); color: #fff; width: 500px; box-shadow: 2px 2px 8px rgb(0 0 0 / 50%); background-color: #353535; } .dropsPop { pointer-events: auto; border-radius: 10px; background-color: #353535; padding: 20px; text-align: left; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -51%); color: #fff; width: 675px; box-shadow: 2px 2px 8px rgb(0 0 0 / 50%); }
.claimPop { background-image: url('https://assets.krunker.io/img/backgrounds/free_kr.png?v=2'); background-repeat: no-repeat; background-size: cover; pointer-events: auto; border-radius: 10px; background-color: rgb(213, 213, 213); padding: 15px; text-align: left; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -51%); color: #fff; height: 300px; width: 636px; }
.claimSubTxt { color: #fff; font-size: 18px; }

.accountCreatePop { padding: 15px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -51%); color: #fff; height: 580px; width: 1000px; background: #353535; border: 1px solid #FFFFFF; box-shadow: 0px 0px 30px rgba(255, 199, 0, 0.5), inset 0px 0px 4px rgba(255, 199, 0, 0.3); border-radius: 4px; }
#acpImgBack { position: absolute; height: 320px; width: calc(100% - 32px); background-image: url(../img/acp_2.png); background-size: cover; background-position: center; background-repeat: no-repeat; }
#acpImgFront { position: absolute; height: 445px; top: -110px; width: 80%; left: 0; right: 0; margin: 0 auto; background-image: url(../img/acp_1.png); background-size: cover; background-position: center; background-repeat: no-repeat; }
#acpImgGrad { position: absolute; height: 320px; width: calc(100% - 32px); background-image: url(../img/acp_0.png); background-size: cover; background-position: center; background-repeat: no-repeat; }
#acpHeader { color: white; font-size: 40px; margin-top: -30px; margin-bottom: 50px; }
#acpText { position: absolute; left: 0; right: 0; top: 320px; }
#acpInfo { color: white; font-size: 20px; margin-bottom: 50px; }
#acpButtonHolder { position: absolute; left: 0; right: 0; top: 500px; display: flex; gap: 20px; width: 80%; margin: 0 auto; }
.acpButton { width: 100%; border: 2px solid rgba(0, 0, 0, 0.5) !important; padding: 20px; font-size: 25px !important; }
.acpButton:hover { border: 2px solid rgba(0, 0, 0, 0.5) !important; }
#pubPfp { text-align: center; padding: 5px; background-color: #2196F3; color: #ffffff; border-radius: 4px; width: 490px; margin-top: 6px; padding-top: 7px; padding-bottom: 7px; cursor: pointer; pointer-events: all; } #pubPfp:hover { background-color: rgb(109, 175, 228); }
.pfpAction { position: absolute; opacity: 0; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0,0,0,.85); display: flex; flex-direction: column; justify-content: center; align-items: center; color: rgba(255, 255, 255, 0.85); font-size: 25px; transition: .2s opacity; text-align: center; border-radius: 175px; }.pfpAction:hover { color: rgba(255, 255, 255); text-decoration: underline; }
#profilePicM:active .pfpAction, #profilePicM:hover .pfpAction { z-index: 9999999999; opacity: 1; }

#tradeChatHolder { float: left; border-radius: 6px; height: 585px; overflow-y: auto; text-align: left; pointer-events: auto; margin-left: 10px; font-size: 20px; width: 255px; position: relative; }
#tradeChatInner { position: absolute; bottom: 0; left: 0; right: 0; }
#tradeChatList { overflow-y: hidden; overflow-x: hidden; pointer-events: all; text-align: left; max-height: 545px; }
#tradeChatInput { width: 100%; padding: 5px; padding-left: 10px; color: #fff; font-size: 13px; box-sizing: border-box; border: none; background-color: #232222; pointer-events: all; border-radius: 4px; }
.tradeChatItem { word-wrap: break-word; display: inline-block; margin-bottom: 5px; padding: 5px; padding-left: 10px; padding-right: 10px; border-radius: 4px; color: #fff; font-size: 11px; background-color: #232222; max-width: 235px; }
.readAll { float: right; font-size: 16px !important; padding-left: 10px; padding-right: 10px; line-height: 27px; }
#clanFundsIn { font-size: 18px; margin-top: 20px; width: 675px; border-radius: 4px; padding: 10px; padding-left: 10px; }
.clanFndB { margin-top: 22px; text-align: center; background-color: #ff0000; font-size: 20px; color: #fff; padding: 10px; width: 320px; border-radius: 4px; cursor: pointer; display: inline-block; }
.clanFndB:hover { opacity: 0.8; }
.premText { margin: 0; margin-bottom: 5px; color: var(--yellow); }
.premText i { color: var(--yellow) }
#termsInfo { background-color: transparent; padding: 0; border-top-left-radius: 0; margin-right: 0; }
#specKPD { color: #c00000!important; font-size: 49px!important; vertical-align: middle; position: absolute; top: 1px; left: 12px; }
.specPlayerHolder0 #specKPD { top: 1px; left: 12px; } .specPlayerHolder1 #specKPD { top: 1px; left: 2px; }
.gameplBonB { vertical-align: top; height: 40px; border-right: 4px solid #a5a5a5; background: black; margin-bottom: 10px; margin-top: 10px; }
.gameplBonBP { height: 100%; background: rgba(255, 255, 255, 0.2); }
.bonBAmnt { vertical-align: top; font-size: 15px; display: inline-block; color: #46b84d !important; }

.partnerItem { font-size: 18px; color: rgba(0, 0, 0, 0.4); }
.partnerStatHead { padding: 10px; padding-top: 5px; padding-bottom: 5px; margin-bottom: 5px; background-color: rgba(0,0,0,0.2); }
#partnerProg { width: 99%; margin-top: 10px; margin-bottom: 5px; font-size: 16px; text-align: center; color: #fff; height: 30px; border-radius: 4px; padding: 5px; background-color: rgba(0, 0, 0, 0.75); }
#partnerProgB { height: 100%; border-radius: 4px; background-color: #2196F3; }
#partnrUpBtn { width: 99%; color: #fff; margin-top: 10px; border-radius: 4px; background-color: #2196F3; cursor: pointer; margin-bottom: 15px; text-align: center; padding: 5px; border-bottom: 5px solid #1d79c2; }
#partnrUpBtn:hover { margin-top: 12px; border-bottom: 3px solid #1d79c2; }
#partnrUpBtn:active { margin-top: 14px; opacity: 0.9; border-bottom: 1px solid #1d79c2; }
#partnrUpBtnD { width: 99%; color: #fff; margin-top: 10px; border-radius: 4px; background-color: #a6a6a6; cursor: pointer; margin-bottom: 15px; text-align: center; padding: 5px; border-bottom: 5px solid #808080; }
#partnrUpBtnD:hover { margin-top: 12px; border-bottom: 3px solid #808080; }
#partnrUpBtnD:active { margin-top: 14px; opacity: 0.9; border-bottom: 1px solid #808080; }
#partnerPrTx { width: 100%; text-align: center; margin-bottom: -45px; color: #ffffff; font-size: 17px; }
#ctrtRes { font-size: 17px; }
#jumpSIMG { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 99999999999999999999; }
#jumpSVIDHolder { width: 100%; height: 100%; position: absolute; z-index: 99999999999999999999; text-align: center; background-color: black; }
#jumpSVID { display: inline-block; height: 100%; width: auto; }
#itemInfoBtn { font-size: 21px; color: #fff; text-align: center; border-radius: 4px; background-color: rgba(0,0,0,0.5); padding-top: 5px; padding-bottom: 5px; margin-top: 10px; cursor: pointer; pointer-events: all; } #itemInfoBtn:hover { background-color: rgba(255,255,255,0.4); }
#itemViewPop, #itemPurcPop { pointer-events: auto; border-radius: 5px; background-color: rgba(156, 156, 156, 0.7); background-image: url(https://assets.krunker.io/img/shop/filter/vignette.png); background-size: cover; padding: 15px; text-align: left; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; width: 500px; }
#itemViewPop { width: 800px!important; }
.itemViewName { font-size: 21px; color: #fff; position: absolute; pointer-events: none; padding: 5px; background-color: rgba(0,0,0,0.5); border-radius: 4px; padding-left: 10px; padding-right: 10px; }
.itemViewWear { font-size: 17px; color: rgba(255, 255, 255, 0.5); position: absolute; pointer-events: none; top: 64px; }
.itemViewDesc { font-size: 17px; color: #fff; position: absolute; pointer-events: none; top: 64px; }
.itemViewDescWear { font-size: 17px; color: #fff; position: absolute; pointer-events: none; top: 96px; }
.itemViewSea { font-size: 21px; color: #fff; position: absolute; pointer-events: none; right: -6px; top: -6px; background-color: #c12dfb; text-align: center; line-height: 45px; padding-left: 25px; padding-right: 10px; clip-path: polygon(0 0, 100% 0, 100% 100%, 16px 100%); }
.itemViewCnt { position: absolute; background: #0000007d; color: white; padding: 10px; padding-left: 15px; padding-right: 15px; bottom: 80px; }
#mapFundsInp { width: 580px; padding: 5px; padding-left: 10px; padding-right: 10px; margin-top: 10px; font-size: 16px; border: none; }
.mapFndB { margin-top: 22px; text-align: center; background-color: #ff0000; font-size: 20px; color: #fff; padding: 10px; width: 272px; border-radius: 4px; cursor: pointer; display: inline-block; }
.mapFndB:hover { opacity: 0.8; }
.editLink { display: inline-block; pointer-events: all; cursor: pointer; color: #2196F3; }
.editLink:hover { text-decoration: underline; }
#ot-sdk-btn-floating { display: none!important; }
.mapsVotes { position: absolute; bottom: 50px; font-size: 15px; right: 12px; color: #ffffff; pointer-events: all; padding: 5px; padding-left: 10px; padding-right: 10px; background: black; border-radius: 6px; }

.premCard { cursor: pointer; pointer-events: auto; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; text-align: center; color: #FFC147; margin-bottom: 10px; margin-left: 5px; margin-right: 5px; padding-top: 0px; padding: 5px; width: 156px; height: 125px; vertical-align: top; border-radius: 5px; display: inline-block; font-size: 20px; position: relative; z-index: 1; background-size: contain; }
.premCard:hover { opacity: 0.9; }
.premSale { position: absolute; top: 73px; left: 4px; font-size: 10px; color: white; width: auto; padding-left: 5px; padding-right: 5px; height: 26px; text-align: center; line-height: 26px; border-radius: 4px; opacity: 0.95; text-shadow: none; }
.premVal { font-size: 14px; color: #FFC147; margin-left: -5px; background-color: rgba(0, 0, 0, 0.4); width: 169px; height: 116px; line-height: 36px; text-align: center; pointer-events: none; margin-top: 62px; }
.vis-timeline { border-radius: 4px; }
#editorBtnM { margin-left: -5px; margin-right: -10px; margin-top: -3px; height: 76px; cursor: pointer; image-rendering: crisp-edges; }
#editorBtnM:hover { transform: scale(0.95); }
#editorBtnM:active { transform: scale(0.9); }

#speedRunReset { display: inline-block; vertical-align: bottom; text-align: left; color: #fff; font-size: 20px; border-radius: 4px; background-color: var(--div-black); }
#speedRunBox { display: inline-block; width: 360px; border-radius: 4px; background-color: var(--div-black); }
#speedRunHolder { position: absolute; bottom: 35px; right: 10px; }
#speedRunTimer { margin-top: 10px; font-size: 50px; color: #00ff1a; text-align: right; }
.speedRunItem { text-align: left; font-size: 20px; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; color: rgba(255, 255, 255, 0.8); border-bottom: 2px solid rgba(255, 255, 255, 0.3); }
.speedRunITim { float: right; text-align: right; color: #fff; font-size: 20px; }
.speedRunMs { color: #00ff1a; font-size: 30px; }
.speedRunChn { font-size: 20px; margin-right: 10px; color: #00ff1a; }
#speedRunInfo { width: 100%; border-bottom: 2px solid rgba(255, 255, 255, 0.7); color: #fff; font-size: 22px; margin-bottom: 10px; margin-top: 10px; padding-bottom: 5px; text-align: left; }
#speedRunRstKey { color: #FBC02D; }
#speedRunRstLKey { color: #FBC02D; }
.sriAct { background-color: rgba(82, 249, 255, 0.5); color: #fff !important; }

#shopMainSellB { cursor: pointer; vertical-align: top; width: 760px; height: 360px; position: relative; display: inline-block; background: rgba(0, 0, 0, 0.5); border-radius: 6px; transition: all 0.1s; text-align: left; border: 4px solid white; }
#shopMainSellB:hover { transform: scale(0.98); }
.shopMainSellTbs { position: absolute; right: 30px; bottom: 40px; }
.shpMTbsI { pointer-events: all; cursor: pointer; width: 30px; height: 30px; border-radius: 50px; display: inline-block; margin: 10px; }
.shpMTbsI:hover { transform: scale(1.2); }
#shopSideSellB { cursor: pointer; vertical-align: top; display: inline-block; position: relative; background: rgba(0, 0, 0, 0.5); margin-left: 10px; border: 3px solid #9bf3ff; width: 504px; height: 363px; border-radius: 6px; }
#shopSideSellB:hover .shopMainBGs { transform: translate(-50%, -50%) scale(1.05); }
.shopSideSpnNm { width: 100%; text-align: center; bottom: 35px; position: absolute; font-size: 40px; z-index: 11; text-shadow: 0px 0px 30px rgb(0 0 0); }
.shopSideSpnKR { color: #10e2ff!important; font-size: 28px; margin-top: 10px; }
#shopMainNav { position: absolute; right: 40px; top: 30px; z-index: 6; font-size: 23px; text-shadow: 0px 0px 10px rgb(0 0 0 / 79%); }
.shopGradBG { position: absolute; bottom: 0px; width: 100%; height: 220px; background-image: linear-gradient(transparent, #b000ff30); z-index: 5; }
.gradOrng { background-image: linear-gradient(transparent, #fc980330); }
.gradBlu { background-image: linear-gradient(transparent, #9bf3ff2b); }
#shopMainSubT { font-size: 27px; color: #dd90f9 !important; }
#shopMainHedr { text-shadow: 0px 0px 10px rgb(0 0 0 / 79%); position: absolute; font-size: 50px; left: 40px; color: #fff; bottom: 40px; z-index: 10; }
.purchKRInfoH { vertical-align: top; display: inline-block; width: 430px; height: 148px; border-radius: 6px; padding: 20px; background-color: rgba(0, 0, 0, 0.4); margin-right: 5px; }
#shopPremBar { filter: saturate(0.9); cursor: pointer; vertical-align: top; position: relative; display: inline-block; margin-top: 20px; width: 550px; height: 250px; background: rgba(0, 0, 0, 0.5); border-radius: 6px 0px 0px 6px; background-image: linear-gradient(0, transparent, #00000042), url(../img/prem_bg.png); background-size: cover; background-position-x: center; transition: all 0.1s; }
#shopPremBar:hover { transform: scale(0.98); }
#shopPremHed { position: absolute; left: 25px; top: 20px; font-size: 30px; text-shadow: 0px 0px 10px rgb(0 0 0 / 79%); }
#shopPremSub { color: #ffc300 !important; font-size: 20px; text-shadow: 0px 0px 10px rgb(0 0 0 / 79%); }
#shopPremTim { position: absolute; right: 25px; bottom: 20px; background: black; padding: 10px; padding-left: 20px; padding-right: 20px; border-radius: 8px; }
#shopPremBen { display: inline-block; width: 300px; background: rgba(0, 0, 0, 0.8); height: 210px; border-radius: 0px 6px 6px 0px; margin-top: 20px; padding: 20px; }
.shopMainBG { width: 680px; filter: drop-shadow(0 0 40px rgba(0,0,0,0.4)); pointer-events: none; position: absolute; left: 30px; top: -150px; transition: all .5s; }
.shopMainBGs { height: inherit; pointer-events: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: all .5s; }
.bundlItmCnt { position: absolute; bottom: 0px; left: 4px; color: #fbc02d; }
.bundlItmC { display: inline-block; width: 80px; height: 80px; margin: 10px; background: black; border-radius: 8px; transition: all 0.1s; cursor: pointer; position: relative; }
.bundlItmC:hover { transform: scale(1.1); }
.bundlItmC:active { transform: scale(0.95); }
.walltHldV { color: #898989; text-align: left; padding-left: 10px; padding-right: 10px; margin-top: 10px; }
.walltHldN { float: right; color: #fff; }
#shopBundlB { position: relative; display: inline-block; background: black; vertical-align: top; width: 390px; margin-left: 20px; margin-top: 20px; height: 250px; border-radius: 6px; cursor: pointer; transition: all 0.1s; }
#shopBundlB:hover { transform: scale(0.98); }
.bundlPopImg { background: #00000096; height: 624px; width: 335px; margin-right: 20px; display: inline-block; border-radius: 8px; }
.bundlPopSidH { position: relative; display: inline-block; vertical-align: top; padding: 20px; padding-top: 10px; height: 597px; width: 640px; background: #00000066; border-radius: 8px; }
.bundlPopNam { color: #fff; font-size: 36px; margin-top: 10px; }
.bundlPopInfo { color: #bcbcbc; font-size: 28px; margin-top: 10px; }
.bundlPopInfo>li { color: #bcbcbc; font-size: 15px; }
.bundlPopSec { color: #bcbcbc; font-size: 26px; margin-top: 10px; }
.bundlPopCurncs { padding: 15px; position: absolute; background: black; color: #fff; bottom: 18px; left: 15px; border-bottom-left-radius: 8px; border-top-right-radius: 8px; font-size: 22px; }
.bundlStrTxt { position: absolute; color: #fff; font-size: 22px; width: 200px; top: 20px; left: 20px; text-align: left; text-shadow: 0px 0px 10px rgb(0 0 0 / 79%); }
.bundlStrSub { position: absolute; bottom: 20px; left: 20px; color: #96ff50 !important; font-size: 21px; text-shadow: 0px 0px 10px rgb(0 0 0 / 79%); }
.shopBunSellTbs { position: absolute; bottom: 10px; right: 20px; }
.shpBnTbsI { pointer-events: all; cursor: pointer; width: 22px; height: 22px; border-radius: 22px; display: inline-block; margin: 10px; }
.shpBnTbsI:hover { transform: scale(1.2); }

#storeList { margin-top: 20px; overflow-x: auto; white-space: nowrap; }
#storeList::-webkit-scrollbar-track { box-shadow: none; border-radius: 0px; }
#storeList::-webkit-scrollbar { width: 12px; }
#storeList::-webkit-scrollbar-thumb { border-radius: 0px; box-shadow: none; }
.storeHeader { margin: 50px 0px 10px; font-size: 25px; }
.prizeWheelTable { text-align: center; margin-top: 20px; margin-left: -5px; zoom: 1.3; }
#purchaseInfoTable { text-align: center; margin: 25px 0px 0px; zoom: 1.35; }
#plySearch { padding: 4px; width: 100%; text-align: left; font-size: 17px; box-sizing: border-box; background-color: rgba(255,255,255,.7); border-radius: 4px; padding-right: 10px; padding-left: 10px; pointer-events: all; display: inline-block; border: none; }
#plySearchH { width: 300px; z-index: 999999999; float: right; margin-top: -5px; }
#playerSearchH { margin-top: 0px; width: 100%; padding-top: 13px; padding-bottom: 10px; position: sticky; top: -1px; z-index: 999999999; padding-left: 20px; margin-left: -20px; }
#itemSearch { padding: 4px; width: calc(100% - 75px - 64px); text-align: left; font-size: 23.5px; box-sizing: border-box; background-color: rgba(255,255,255,.7); border-radius: 4px; padding-right: 10px; padding-left: 10px; pointer-events: all; margin-bottom: 10px; display: inline-block; vertical-align: top; }
.custBack { display: inline-block; padding: 4px; padding-left: 10px; padding-right: 10px; background: #b7b7b782; border-radius: 4px; margin-right: 10px; }.custBack:hover { background: #76767685; }
.custBackArr { color: #fff !important; font-size: 40px !important; vertical-align: middle !important; cursor: pointer; }
#itemSearchH { width: 100%; padding-top: 19px; z-index: 999999999; background-color: #333; }

.pListTable { padding: 10px; margin-top: 20px; width: 100%; text-align: left; border-radius: 6px; height: min-content; vertical-align: top; background-color: rgba(0,0,0,.4); display: table; border-spacing: 0px; border-collapse: collapse; }
.pListName { padding: 10px; width: 354px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: inline-block; height: unset; }
.pListActions { padding: 10px; float: right; height: unset; }
.takeAction { height: 25px!important; vertical-align: middle; color: #ffffff!important; text-shadow: none; }
.takeActionTable { display: table; table-layout: fixed; width: 100%; border-spacing: 7px; border-collapse: separate; }
.takeActionBtn { color: #fff; text-align: center; margin-top: -6px; cursor: pointer; background-color: #ed4242; font-size: 15px; margin-right: 6px; border-radius: 5px; padding: 2px; padding-left: 7px; padding-right: 7px; vertical-align: middle; width: 100%; display: table-cell; }
.takeActionBtn:hover { opacity: 0.7 !important; }
.takeActionBtn.kick { background-color: #fab640; }
.takeActionBtn.tag { background-color: #E040FB; }
.takeActionBtn.enabled { background-color: var(--green); }
.takeActionBtn.disabled { background-color: var(--red); }
.tItemBound { position: absolute; top: -2px; left: -2px; border-radius: 5px; background-color: rgba(0,0,0,0.5); padding: 25px; padding-bottom: 20px; padding-top: 21px; }
.tSearch { padding: 4px; width: 100%; text-align: left; font-size: 17px; box-sizing: border-box; border: none; background-color: rgba(255,255,255,.6); border-radius: 4px; padding-right: 10px; padding-left: 10px; pointer-events: all; margin-bottom: 10px; }
.skinReward { cursor: pointer; pointer-events: auto; color: #fff; margin-right: 6px; width: 32px; height: 32px; vertical-align: top; background-color: rgba(0, 0, 0, 0.5); border-radius: 5px; display: inline-block; z-index: 1; border: 1px solid white; }
.hide { display: none; }
.spinObject { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline-block; height: 620px; width: 620px; }
.pixelated { -ms-interpolation-mode: nearest-neighbor; image-rendering: pixelated; }
.crisp-edges { image-rendering: crisp-edges; }

#customizeContainer { display: block; width: 100%; }
#selectorContainer { position: sticky; display: table; width: calc(100% + 40px); background-color: #5c5c5c; margin: -20px; top: -20px; margin-bottom: 20px; text-align: center; table-layout: fixed; z-index: 6; }
.selectorItem { position: relative; height: 120px; width: 206px; transition: .1s; cursor: pointer; display: table-cell; }
.selectorItem:hover { background-color: #9e9e9e }
.selectedItem { border: 3px solid rgba(255, 255, 255, 1) !important; border-radius: 6px; }
.selectorLabel { position: absolute; bottom: 5px; font-size: 20px; color: #fff; text-align: center; z-index: 1; width: 100%; }
.selectorItem .selectorIcon { margin-top: -10px; width: 135px; height: 135px; filter: drop-shadow(0 0 0.3rem rgba(0, 0, 0, 0.5)); pointer-events: none; }
.selRandom { font-size: 50px; vertical-align: top; color: #eee; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -40%); }
.otherContainer { width: 100%; display:block; text-align:start; margin-top: 32px; }
.custContainer { position: relative; display: inline-block; background-color: rgb(0,0,0, 25%); padding: 5px; border: 3px solid rgb(255 255 255 / 40%); border-radius: 5px; box-shadow: inset 0 0 50px 0px rgb(0,0,0, 10%); margin-top: 5px; width: 46.9%; height: 150px; opacity: 0.7; }
.custSubContainer { position: absolute; display: inline-block; padding: 5px; background-color: rgb(0,0,0, 25%); border-left: 3px solid rgb(255 255 255 / 40%); border-bottom: 3px solid rgb(255 255 255 / 40%); box-shadow: inset 0 0 50px 0px rgb(0 0 0 / 10%); width: 75px; height: 75px; opacity: 1; top: 0px; right: 0px; }
.custSubContainer.bottom { top:unset; bottom: 0px; border-bottom: unset; }
.custItNm { left: 8px; top: 5px; position: absolute; z-index: 2; font-size: 16px; color: rgba(255, 255, 255, 0.6); }
.contCanSelect { opacity: 1; cursor: pointer }
.contCanSelect:hover { background-color: rgb(0,0,0, 20%) }
.custIcon { display: block; width: auto; height: 100%; margin: auto; margin-top: 12px; image-rendering: crisp-edges; }
.custIconCard { display: block; width: auto; height: 50px; margin: auto; image-rendering: crisp-edges; top: 50%; position: relative; transform: translateY(-50%); }
.custIconScope { display: block; width: 125px; height: 125px; margin: auto; margin-top: 17px; border-radius: 4px; image-rendering: crisp-edges; filter: drop-shadow(0 0 0.2rem rgb(0,0,0, 0.25)) } .custIconSpray { display: block; position: relative; z-index: 0 !important; border-radius: 8px; image-rendering: pixelated; width: 143px; margin: auto; margin-top: 0px; background-size: cover !important; height: 144px; transition: all .15s ease-in-out; filter: drop-shadow(0 0 0.2rem rgb(0,0,0, 0.25)) }
.custSil { filter: grayscale(100%) brightness(0) drop-shadow(0 0 0.2rem rgb(0,0,0, 0.25)); opacity: 0.6; }
.settSmall { font-size: 17px; margin-top: -2px!important; position: absolute; z-index: 2; }
.settLabel { right: 8px; bottom: 5px; position: absolute; font-size: 13px; z-index: 2; color: rgba(0, 0, 0, 0.3); }
.custLabel { right: 8px; bottom: 6px; position: absolute; font-size: 14px; z-index: 2; color: rgba(0, 0, 0, 0.3); }

@keyframes scroll-right { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.specKPDSuspect > .specPlayerIcon { outline: solid 4px #c00000; }
.specKPDSuspect > .specPlayerName { color: #c00000; text-shadow: none; }
.specKPDCaller > .specPlayerIcon { outline: solid 4px #135DD8; }
.specKPDCaller > .specPlayerName { color: #135DD8; text-shadow: none; }
.specKPDCaller > #specKPD:after { color: #135DD8; content: "call"; }
.specKPDSuspect > #specKPD:after { color: #c00000; content: "search"; }
.callRegion { margin-right: 12px; font-size: 16px; color: #858585; }
#findGameBtn { width: 100%; cursor: pointer; background-color: #2196F3; text-align: center; border-radius: 4px; color: #fff; padding-top: 10px; padding-bottom: 10px; margin-top: 10px; }

.lockedCard { position: absolute; top: -2px; left: -1px; border-radius: 4px; background-color: rgba(0,0,0,.5); padding: 44px; padding-top: 75px; }
.lockedClass { position: absolute; top: -2px; left: -1px; border-radius: 4px; background-color: rgba(0,0,0,.5); padding: 22px 99px; display: flex; align-items: center; }
.lockedClassText { font-size: 12px; color: white; text-wrap: auto; line-height: 23px; width: 80px; }
.lockedSkin { position: absolute; top: -1px; left: -1px; border-radius: 4px; background-color: rgba(0,0,0,.5); padding: 50px; padding-top: 71px; z-index: 2; }
.selctFavBtn { font-size: 28px!important; color: #fff; pointer-events: auto; z-index: 9999999; position: absolute; border-radius: 4px; top: 146px; right: 29px; text-shadow: none; cursor: pointer; transition: transform .1s ease-out; }.selctFavBtn:after { content: attr(data-icon); }.selctFavBtn:hover { transform: scale(1.2); }
[data-col=red] {color:#c00000 !important;}
[data-col=yellow] {color:var(--yellow)!important;}
[data-col=white] {color:#fff !important;}

.krSaleIcon { height: 65px; margin-top: -5px; margin-left: -5px; margin-bottom: -22px; border-radius: 4px; background-color: rgba(0,0,0,0.5); }
#krDiscountAd { cursor: pointer; pointer-events: all; box-shadow: unset; animation-name: krDiscountPulse; animation-duration: 2s; animation-iteration-count: infinite; }
.adIcon { width: 93px; height: 79px; margin-top: -12px; margin-bottom: -22px; border-radius: 4px; }
#raidReleaseTimer { font-size: 15px; color: rgba(251, 192, 45, 1); }
.eventTimer { color: rgba(0,0,0,0.5); font-size: 14px; margin-bottom: -5px; text-align: center; }
.viewDrops { padding: 10px; background-color: #9661f7; border-radius: 4px; color: #eaf5ff; transition: all .2s ease; cursor: pointer; pointer-events: all; display: inline-block; margin: 10px 2.5px; width: 29% !important; } .viewDrops:hover { box-shadow: 0 0px 10px #180f259e; transform: scale(0.98); }
.dropsSpray { background-size: cover !important; height: 350px; transition: all .15s ease-in-out; filter: drop-shadow(0 0 0.2rem rgb(0,0,0, 0.25)); width: 348px; }
.dropImgSpray { background-size: cover !important; height: 140px; transition: all .15s ease-in-out; width: 140px; }
#clanDeclineAll { border-radius: 4px; background-color: rgb(228 41 41); display: inline-block; float: right; margin-left: 10px; margin-top: -2px; position: relative; padding: 2px; padding-left: 10px; padding-right: 10px; font-size: 19px; } #clanDeclineAll:hover { margin-top: -4px; border: 2px solid rgba(255, 255, 255, 0.6); background-color: rgb(247 6 6); }

.logHed { margin-bottom: 5px; font-size: 1.5em; color: #fff; font-weight: bold; margin-top: 30px; }
@keyframes panBackground { from { background-position: 0px 0px; } to { background-position: 0px -120px; } }
.logVersionHed { color: #fff; text-align: center; border: 6px solid white; margin-top: 10px; margin-bottom: 20px; font-size: 2em; height: 160px; background: url(https://assets.krunker.io/img/backgrounds/whatsnew.png?build=LHCtx); line-height: 160px !important; background-size: cover !important; animation: panBackground 10s infinite; animation-direction: alternate; }
#updateAdVersion { font-size: inherit; color: rgba(255, 255, 255, 0.5); }
.adIconSq { display: inline-block; color: #fff; line-height: 65px; width: 65px; height: 65px; text-align: center; margin-top: -5px; margin-left: -5px; margin-bottom: -10px; border-radius: 3px; background-image: url(../img/news.png); background-size: cover; }
#updateAdIcon { display: inline-block; color: #fff; line-height: 65px; width: 65px; height: 65px; text-align: center; margin-top: -5px; margin-left: -5px; margin-bottom: -10px; border-radius: 3px; background-image: url(../img/news.png); background-size: cover; }
.adIconL { display: inline-block; color: #fff; line-height: 85px; width: 65px; height: 65px; text-align: center; margin-left: -5px; margin-top: -5px; margin-bottom: -10px; margin-right: -4px; border-radius: 3px; background-size: contain; background-color: #0000005e; background-repeat: no-repeat; }
#bpAdIcon { background-image: url(../img/battlepass/logo_0.png); }
.viewAllUpdates { color: #fff; text-align: center; font-size: 24px; border-radius: 4px; background-color: rgba(255,255,255,0.15); border: 4px solid rgba(255,255,255,0.4); padding: 10px; margin-top: 40px; pointer-events: all; cursor: pointer; } .viewAllUpdates:hover { border: 4px solid #fff; transform: scale(0.95); }

#initLoader { pointer-events: all; background-color: #1c1c1c; z-index: 2147483646 !important; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; }
#loadHeader { position: absolute; left: 50%; transform: translate(-50%, 0); top: 100px; height: 250px; width: auto; }
#loadTipsHolder { position: absolute; text-align: center; bottom: 200px; width: 700px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 23px; }
#loadGamNm { position: absolute; left: 50%; top: calc(50% + 80px); transform: translate(-50%, 0); color: rgba(255, 255, 255, 0.6); font-size: 23px; text-align: center; }
.menuMGLink { margin-bottom: 5px; }
#loadEditrBtn { position: absolute; right: -3px; bottom: 50px; width: 320px; cursor: pointer; }
#loadEditrBtn:hover { transform: scale(0.95); }
#loadEditrBtn:active { transform: scale(0.9); }
#loadInfoRHolder { position: absolute; right: 20px; bottom: 20px; font-size: 20px; text-align: right; color: rgba(255, 255, 255, 0.7); }
#loadInfoLHolder { position: absolute; left: 20px; bottom: 20px; font-size: 20px; text-align: left; color: rgba(255, 255, 255, 0.7); }
:root { --lCSize: 64px; --lCTiming: ease; --lCDuration: 3s; --lCDelay: 400ms; --lCF: rotateY(0deg); --lCB: rotateY(-180deg); --lCL: rotateY(-90deg); --lCBT: rotateX(-90deg); --lCR: rotateY(90deg); --lCT: rotateX(90deg); --lCZ0: translateZ(calc(var(--lCSize) * 0.8)); --lCZ1: translateZ(var(--lCSize)); --lCZ2: translateZ(calc(var(--lCSize) / 2)); }
#lC-cont { width: 100%; text-align: center; font-size: 30px; position: relative; box-sizing: border-box; display: block; }
.lC-cube { transform: translate(-50%, -50%); }
.lC-cube, .lC-cube * { width: var(--lCSize); height: var(--lCSize); position: absolute; }
#lC-img { z-index: 0; position: absolute; width: 55px; height: 55px; animation: none !important; transform: rotateY(-45deg) rotateX(30deg) translateX(-24px) translateZ(0) translateY(10px) !important; }
#lC-ico { animation: brighten 3s 1.2s ease infinite; width: 100%; height: 100%; }
.lC-sides { animation: rotate var(--lCDuration) 1.2s var(--lCTiming) infinite; transform-style: preserve-3d; transform: rotateX(-37.5deg) rotateY(45deg); }
.lC-sides * { transform-origin: 50% 50%; animation-fill-mode: forwards; }
.lC-bt { background: #ab6f2c; animation: lC-bt var(--lCDuration) 0ms var(--lCTiming) infinite; }
.lC-l { background: #ffe669; animation: lC-l var(--lCDuration) var(--lCDelay) var(--lCTiming) infinite; }
.lC-f { background: #ffc130; animation: lC-f var(--lCDuration) var(--lCDelay) var(--lCTiming) infinite; }
.lC-b { background: #ad7531; animation: lC-b var(--lCDuration) var(--lCDelay) var(--lCTiming) infinite; }
.lC-r { background: #ab6f2c; animation: lC-r var(--lCDuration) var(--lCDelay) var(--lCTiming) infinite; }
.lC-t { background: #fff3b7; animation: lC-t var(--lCDuration) 0ms var(--lCTiming) infinite; }
@keyframes lC-b { 0% { transform: var(--lCB) var(--lCZ1); } 20% { transform: var(--lCB) var(--lCZ2); } 70% { transform: var(--lCB) var(--lCZ2); } 90% { transform: var(--lCB) var(--lCZ1); } 100% { transform: var(--lCB) var(--lCZ1); } }
@keyframes lC-f { 0% { transform: var(--lCF) var(--lCZ1); } 20% { transform: var(--lCF) var(--lCZ2); } 70% { transform: var(--lCF) var(--lCZ2); } 90% { transform: var(--lCF) var(--lCZ1); } 100% { transform: var(--lCF) var(--lCZ1); } }
@keyframes lC-l { 0% { transform: var(--lCL) var(--lCZ1); } 20% { transform: var(--lCL) var(--lCZ2); } 70% { transform: var(--lCL) var(--lCZ2); } 90% { transform: var(--lCL) var(--lCZ1); } 100% { transform: var(--lCL) var(--lCZ1); } }
@keyframes lC-bt { 0% { transform: var(--lCBT) var(--lCZ0); } 20% { transform: var(--lCBT) var(--lCZ2); } 70% { transform: var(--lCBT) var(--lCZ2); } 90% { transform: var(--lCBT) var(--lCZ0); } 100% { transform: var(--lCBT) var(--lCZ0); } }
@keyframes lC-r { 0% { transform: var(--lCR) var(--lCZ1); } 20% { transform: var(--lCR) var(--lCZ2); } 70% { transform: var(--lCR) var(--lCZ2); } 90% { transform: var(--lCR) var(--lCZ1); } 100% { transform: var(--lCR) var(--lCZ1); } }
@keyframes lC-t { 0% { transform: var(--lCT) var(--lCZ0); } 20% { transform: var(--lCT) var(--lCZ2); } 70% { transform: var(--lCT) var(--lCZ2); } 90% { transform: var(--lCT) var(--lCZ0); } 100% { transform: var(--lCT) var(--lCZ0); } }
@keyframes brighten { 0% { filter: brightness(0%); } 20% { filter: brightness(0%); } 75% { filter: brightness(80%); } 100% { filter: brightness(20%); } }
@keyframes rotate { 0% { transform: rotateX(-37.5deg) rotateY(45deg); } 50% { transform: rotateX(-37.5deg) rotateY(405deg); } 100% { transform: rotateX(-37.5deg) rotateY(405deg); } }

.followBack { font-size: 15px!important; padding: 5px!important; padding-left: 10px; padding-right: 10px; position: relative; display: inline-block; border-radius: 4px; color: #fff; pointer-events: all; margin-top: -7px; margin-bottom: -7px; cursor: pointer; transition: all .08s; text-align: center; background-color: rgba(0,0,0,.3); border: 4px solid #2196f3!important; margin-left: 10px; vertical-align: middle; } .followBack:hover { border: 3px solid #fff!important; color: #fff!important; transform: scale(.95); }
.pStTitle { margin-bottom: 4px; }
.pSt { font-size: 12px; color: #fff; text-align: center; display: inline-block; margin-top: 5px; padding: 10px; padding-top: 5px; padding-bottom: 5px; margin-bottom: 0px; margin-left: 2px; margin-right: 2px; text-transform: uppercase; border: 2px solid rgba(0,0,0,0.2); border-radius: 4px; width: 154px; background-color: rgba(0,0,0,0.3); }
.pSt strong { color: rgba(255, 255, 255, 0.5); display: block; font-size: 12px; font-weight: unset; text-transform: none; text-shadow: none; }
#statHolder { margin-top: 5px; border: none; list-style: none; color: #676767; margin-left: 0px; display: block; text-align: center; margin-bottom: 10px; }
.sprayCnt { position: absolute; font-size: 12px; background-color: rgba(0,0,0,0.6); color: white; text-align: center; border-radius: 4px; text-shadow: none; padding: 5px; padding-bottom: 2px; padding-top: 2px; top: 147px; left: 5px; z-index: 9999999; }
.shopImg { position: absolute; background-size: cover; top: 10px; left: 60px; width: 190px; height: 190px; filter: drop-shadow(0 0 40px rgba(0,0,0,0.4)); transition: all .2s; }
.shopCard:hover .shopImg { transform: scale(1.1); }
.shopImgGrad { position: absolute; bottom: 0px; width: 100%; height: 110px; background-image: linear-gradient(transparent, #6eff0030); z-index: 5; margin-left: -5px; }
.spinValL { font-size: 18px; color: #FFC147; width: 314px; text-align: center; pointer-events: none; position: relative; text-shadow: 0px 0px 30px rgb(0 0 0); }
.spinValH { position: absolute; top: 129px; z-index: 6; margin-left: -10px; text-shadow: 0px 0px 30px #000, 0px 0px 3px #000, 0px 0px 6px #000; }
.joinBtn { color: rgba(255, 255, 255, 0.7); text-align: center; display: inline-block; width: 100%; cursor: pointer; background-color: #2196F3; font-size: 22px; padding-top: 8px; padding-bottom: 8px; border-radius: 4px; }
.mouseBtn { float: right; background-image: url(../img/mouse/left.png); background-size: cover; width: 46px; height: 46px; }
.bindSep { float: right; height: 43px; width: 5px; margin-left: 20px; margin-right: 25px; background-color: rgba(255,255,255,0.5); }
.endTableFlag { position: absolute!important; top: 26px; left: 28px; transform: scale(0.7); }

.imagePop { pointer-events: auto; border-radius: 4px; background-color: #353535; padding: 20px; text-align: left; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%); color: #fff; width: 972px; max-height: 560px; overflow-y: auto; overflow-x: hidden; box-shadow: 2px 2px 8px rgb(0 0 0 / 50%); font-size: 20px; }
.badgePop { pointer-events: auto; border-radius: 4px; background-color: #353535; padding: 20px; text-align: left; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%); color: #fff; width: 912px; max-height: 560px; overflow-y: auto; overflow-x: hidden; box-shadow: 2px 2px 8px rgb(0 0 0 / 50%); font-size: 20px; }
.imageNewPop { pointer-events: auto; border-radius: 4px; background-color: #353535; padding: 15px; text-align: left; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%); color: #fff; width: 400px; max-height: 600px; overflow-y: auto; overflow-x: hidden; box-shadow: 2px 2px 8px rgb(0 0 0 / 50%); font-size: 20px; }
.openCollection { float: right!important; margin-left: 10px!important; background-color: #2196F3!important; padding: 5px!important; font-size: 28px!important; padding-left: 10px!important; padding-right: 10px!important; border-radius: 4px!important; color: #fff!important; transition: all 0.1s; cursor: pointer; } .openCollection:hover { transform: scale(0.9); opacity: 0.9; }
.imageListItem { padding: 2px; position: relative; color: rgba(0, 0, 0, 0.4); font-size: 17px; display: inline-block; margin-bottom: 12px; width: 306px; margin: 5px; background-color: rgba(0,0,0,0.7); border-radius: 4px; }
.imageListThumbH { position: relative; height: 140px; width: 100%; overflow: hidden; }
.imageListThumb { cursor: pointer; height: 140px; width: 100%; transition: all 0.2s; display: inline-block; background-color: rgba(0, 0, 0, 0.3); object-fit: fill; }
.imageListName { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin-top: 5px; padding-left: 5px; padding-right: 5px; margin-bottom: 5px; color: #fff; }
.imageActionHol { display: inline-block; margin-top: 2px; transform: scale(1.3); }
.imageActionB { display: inline-block; color: #fff; font-size: 25px; vertical-align: top; cursor: pointer; transition: transform .1s ease; } .imageActionB:hover { transform: scale(0.9); }
.imageActionE { position: absolute; right: 2px; top: 2px; color: #5699EB!important; z-index: 2; text-shadow: unset; cursor: pointer; font-size: 24px!important; border-radius: 20px; margin-left: 3px; vertical-align: top; } .imageActionE:hover { transform: scale(1.1); }
.imageActionSep { display: inline-block; height: 30px; margin-left: 5px; margin-right: 5px; }
.imageActionOvrl { z-index: 12; text-align: center; position: absolute; opacity: 0; left: 0px; right: 0px; top: 0px; bottom: 35px; background: rgba(0,0,0,0.8); display: flex; flex-direction: column; justify-content: center; align-items: center; color: rgba(255,255,255,0.5); font-size: 12px; }
.imageListItem .imageActionOvrl { opacity: 0; transition: opacity .15s ease; }
.imageListItem:active .imageActionOvrl, .imageListItem:hover .imageActionOvrl { z-index: 9999999999; opacity: 1; }
.imageListHeader { width: calc(100% + 25px) !important; z-index: 9999; position: sticky; top: -20px; font-size: 30px; color: #fff; margin-top: -20px !important; margin-left: -20px; border-bottom: 4px solid #989898; background-color: #111111; box-shadow: 0px 10px 10px #00000052, 0px 0px 0px #000; padding-top: 10px; padding-bottom: 10px; margin-bottom: 15px; padding-left: 15px; }
.imageListFooter { display: block; width: 100%; position: sticky; bottom: -20px; z-index: 999999999; background-color: #111111; padding: 0 20px 10px 20px; margin-left: -20px; border-top: 4px solid #989898; height: 38px; padding-top: 15px; box-shadow: 0px 0px 0px #000, 0px -10px 10px #00000052; margin-bottom: -40px; }
.imageListType { float: right; color: rgba(255,255,255,0.5); }
.imageListAdd { display: inline-block; padding: 5px; padding-left: 10px; padding-right: 10px; border-radius: 4px; background-color: #4582d1!important; font-size: 18px; margin-top: 6px; vertical-align: top; position: relative; color: rgba(255, 255, 255, 0.7); float: right; margin-right: 15px; transition: all 0.1s; } .imageListAdd:hover { transform: scale(0.9); opacity: 0.9; }
.pubHed { background: rgba(0, 0, 0, 0.5); color: #fff !important; margin-left: -15px; margin-top: -15px; width: calc(100% + -10px); line-height: 60px; padding-right: 20px; padding-left: 20px; font-size: 22px; margin-bottom: 10px; text-align: center; }
#importTxt { width: 379px; padding-left: 10px; text-align: left; padding-right: 10px; padding-top: 5px; padding-bottom: 5px; border-radius: 4px; margin-right: 4px; margin-bottom: -5px; border: none; }
.importPop { pointer-events: all; border-radius: 10px; padding: 15px; text-align: left; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -60%); color: #fff; box-shadow: 2px 2px 8px rgb(0 0 0 / 50%); background-color: #353535; width: 400px; }
#loadingStreams { color: rgba(244, 60, 60, 0.5); }
#bindsHolder > .setHed:first-child { margin-top: 10px !important; }
#bindsHeader { width: 100%; padding-top: 19px; padding-bottom: 10px; position: sticky; top: -1px; z-index: 999999999; background-color: #333; padding-left: 20px; margin-left: -20px; }
.propControl { font-size: 16px; color: rgba(255,255,255,0.7); }
.propControlKey { color: #fbc02d; float: right; margin-left: 10px; }
.freeKRIcon { height: 65px; margin-top: -5px; margin-left: -5px; margin-bottom: -7px; border-radius: 4px; background-color: rgba(0,0,0,0.5); }
#freeKRAd { box-shadow: unset; animation-name: freeKRPulse; animation-duration: 2s; animation-iteration-count: infinite; }
@keyframes freeKRPulse { 0% { box-shadow: unset; } 50% { box-shadow: inset 0 0 12px 2px #2df1fbc7; } 100% { box-shadow: unset; } }
@keyframes krDiscountPulse { 0% { box-shadow: unset; } 50% { box-shadow: inset 0 0 12px 2px #fbc02dc7; } 100% { box-shadow: unset; } }
#promoCode { width: 100%; padding: 5px; padding-left: 10px; font-size: 22px; box-sizing: border-box; border-radius: 4px; margin-top: 20px; border: solid 2px #5f269f; text-align: center; margin-bottom: 10px; }.promoCode:hover { border: solid 2px #0147bb; }
.codeBtn { padding: 5px; background-color: #5f269f; color: #f8f9fa; text-align: center; border-radius: 4px; width: 296px; display: inline-block; cursor: pointer; pointer-events: all; margin-left: 5px; margin-right: 5px; font-size: 20px; padding-top: 10px; padding-bottom: 10px; }.codeBtn:hover { background-color: #0147bb; }
.promoIcon { width: 150px; display: inline-block; margin-left: -12px; margin-right: -12px; cursor: pointer; pointer-events: all; }.promoIcon:hover { filter: drop-shadow(#5f269f 0px 0px 20px); transform: scale(1.2); }
.promoLink { color:rgba(255,255,255,0.8); cursor: pointer; pointer-events: all; }.promoLink:hover { text-decoration: underline; }
.promoCodesH { margin-top: 20px; margin-left: -5px; }
.promoCard { cursor: pointer; pointer-events: auto; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; text-align: center; color: #FFC147; margin-bottom: 10px; margin-left: 5px; margin-right: 5px; padding-top: 0px; padding: 5px; width: 157px; height: 158px; vertical-align: top; border-radius: 5px; display: inline-block; font-size: 22px; position: relative; z-index: 1; background-position: center; background-size: 101%; transition: opacity .1s ease, background-size .1s ease, background-position .1s ease; background-repeat: no-repeat; text-shadow: 0px 0px 30px rgb(0 0 0); }
.promoValH { position: absolute; top: 115px; z-index: 6; margin-left: -10px; text-shadow: 0px 0px 30px #000, 0px 0px 3px #000, 0px 0px 6px #000; font-size: 24px; }
.promoValL { font-size: 21px; color: #FFC147; width: 314px; text-align: center; pointer-events: none; position: relative; text-shadow: 0px 0px 30px rgb(0 0 0); }
.promoImgGrad { position: absolute; bottom: 0px; width: 100%; height: 110px; background-image: linear-gradient(transparent, #6eff0030); z-index: 5; margin-left: -5px; }
.reportDC { display: inline-block; padding: 5px; padding-left: 10px; padding-right: 10px; border-radius: 4px; background-color: var(--red)!important; font-size: 18px; margin-top: 6px; vertical-align: top; position: relative; color: #f8f9fa; float: right; margin-right: 15px; transition: all 0.1s; }

.disconnectPop { pointer-events: auto; border-radius: 4px; background-color: #353535; padding: 15px; text-align: left; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%); color: #fff; width: 400px; max-height: 600px; overflow-y: auto; overflow-x: hidden; box-shadow: 2px 2px 8px rgb(0 0 0 / 50%); font-size: 20px; }
.plusOrMinus3 { color: #fff !important; font-size: 47px!important; vertical-align: middle!important; margin-top: -21px!important; }
.tooltip { transition: top 5.5s ease; position: absolute; background: #818181; border-radius: 3px; padding: 4px 12px; font-family: arial; font-size: 12px; color: #ffc64a; z-index: 10; border: 2px solid #000000; }
.tooltip:before { content : " "; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid black; position:absolute; bottom: -7px; left: 10px; }
.tooltip2 { margin-top: 12px; margin-left: -5px; position: absolute; background: #121212; border-radius:4px; padding: 6px 12px; font-size: 17px; color: #ffffff; z-index: 99999999; }
.tooltipSub { color: #fff; }
.tooltipSubS { color: rgba(255, 255, 255, 0.35); }
#rankedSoonTm { position: absolute; top: -67px; left: 4px; border: 2px solid black; border-radius: 4px; width: auto; background-color: rgba(0,0,0,0.5); color: #fff; padding-left: 10px; padding-right: 10px; font-size: 16px; }
#rankedSoonTm:before { content: " "; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 9px solid black; position: absolute; bottom: -11px; left: 50%; transform: translateX(-50%); }
.metaLoginBtn { padding-top: 5px; margin-top: 15px; padding-bottom: 5px; background-color: #f5841f; color: #f8f9fa; text-align: center; border-radius: 4px; width: 100%; display: inline-block; cursor: pointer; pointer-events: all; }

.badgeCard { color: #fff; margin: 5px; padding: 5px; width: 280px; height: 70px; vertical-align: top; background-color: rgba(0, 0, 0, 0.3); border-radius: 5px; display: inline-block; font-size: 26px; z-index: 1; cursor: pointer; position: relative; } .badgeCard:hover { transform: scale(0.95); filter: brightness(1.3); }
.badgeImg { float: left; width: 70px; height: 70px; position: relative; border-radius: 4px; z-index: -1 !important; background-color: rgba(255,255,255,0.1); }
.badgeName { color: #fff; font-size: 13px; position: absolute; left: 81px; top: 5px; }
.badgeDesc { color: #8b8b8b; font-size: 10px; position: absolute; left: 81px; top: 29px; text-shadow: none; }
.badgeBound { position: absolute; top: 0px; left: 0px; bottom: 0px; padding: 17px; background-color: rgba(0,0,0,0.8); border-radius: 4px; padding-left: 130px; padding-right: 130px; }
.customBadge { margin-right: 5px; image-rendering: auto; width: 31px; margin-top: 3px; float: right; }
#igPop { position: absolute; top: 50%; left: 50%; background: rgba(0, 0, 0, 0.6); transform: translate(-50%, -50%); }
.logImg { width: 100%; height: auto; border-radius: 6px; margin-top: 15px; margin-bottom: 10px; }
#ingameTable { width: 100%; }
#ingameTable th { font-size: 16px!important; height: unset; padding-top: 0px; padding-bottom: 5px; }
#ingameTable td { font-size: 15px; height: unset; }
#ingameTable tr { border-bottom: unset!important; }
td > .newLeaderItem { width: unset; max-width: 450px; min-width: 350px; }
.closeRanked { position: absolute; color: #fff; padding-top: 7px; padding-left: 8px; padding-right: 8px; padding-bottom: 3px; background-color: var(--red); border-radius: 6px; top: 0; right: 0; pointer-events: all; cursor: pointer; transition: transform .1s ease-out; }
.closeRanked:hover { transform: scale(1.2); }
.lvlPopHed { color: white; text-align: center; font-size: 40px; }
.lvlPopInfo { text-align: center; color: #aaaaaa; margin-top: 15px; font-size: 25px; }
.lvlPopAct { width: 100%; color: #fff; background: #ff6e1e; text-align: center; margin-top: 20px; border-radius: 10px; padding-top: 15px; padding-bottom: 15px; font-size: 30px; cursor: pointer; }
.lvlPopAct:hover { transform: scale(0.95); }
#mobileUI .killStreakItem { background-color: rgba(0, 0, 0, 0.55); border-radius: 50%; border: 2px solid #9b9b9b; width: 40px; height: 40px; }
#mobileUI #killStreakHolder { vertical-align: bottom; display: inline-block; position: absolute; right: 5px; bottom: 0px; pointer-events: all; margin-right: unset; margin-bottom: unset; z-index: 99999999999999; }
#mobileUI .killStreakCnt { margin-top: -2px; margin-right: -3px; font-size: 9px; }
#imagesTabLayout { table-layout: fixed; font-size: 16px; display: table; width: 100%; margin-top: 18px; margin-bottom: 10px; text-align: center; background-color: rgba(0, 0, 0, 0.12); border-radius: 6px; }
.imageTab { font-size: 20px; background-color: rgba(0, 0, 0, 0.68); cursor: pointer; display: table-cell; padding: 15px 0px 10px; color: #fff; }
.imageTab:hover { border-bottom: 5px solid rgba(255, 255, 255, 0.3); }
.tabAIMG { cursor: default; border-bottom: 5px solid rgba(255, 255, 255, 0.7); }
.tabAIMG:hover { border-bottom: 5px solid rgba(255, 255, 255, 0.7); }
.advancedSwitch { position: relative; display: inline-block; width: 175px; height: 40px; vertical-align: top; margin-left: 10px; }
.advancedSwitch input {display:none;}
.advancedSlider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #a8a8a8; transition: .4s; border-radius: 4px; }
.advancedSlider:before { position: absolute; content: ""; height: 32px; width: 32px; left: 6px; bottom: 4px; background-color: white; transition: .4s; border-radius: 4px; }
input:checked + .advancedSlider { background-color: #2196F3; }
input:focus + .advancedSlider { box-shadow: 0 0 1px #2196F3; }
input:checked + .advancedSlider:before { transform: translateX(130px); }
.advancedSlider:after { content:'Basic'; color: white; display: block; position: absolute; transform: translate(-50%,-50%); top: 50%; left: 50%; font-size: 14px; }
.advSlidBig:after { font-size: 19px; }
input:checked + .advancedSlider:after { content:'Advanced'; }
.quickPlayMM { width: 1000px!important; }
.quickPlayMap { position: relative; height: 92px; width: 186px; overflow: hidden; display: inline-block; border-radius: 4px; border: 3px solid #ffffffc9; margin: 4px; }
.quickPlayMap input {display:none;}
.quickPlayMapName { position: absolute; bottom: 0px; left: 0px; font-size: 14px; color: white; padding-left: 10px; height: 36px; line-height: 36px; padding-right: 10px; z-index: 1; pointer-events: none; background: rgba(0,0,0,0.8); border-top-right-radius: 6px; }
.quickPlayMapImg { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; height: 100%; width: 100%; filter: grayscale(100%); transition: all 0.1s; }
input:checked + .quickPlayMapImg { filter: grayscale(10%); }
input:hover + .quickPlayMapImg { opacity: 0.9; transform: scale(1.1); }
input[type=search]::-ms-clear { display: none; width : 0; height: 0; }
input[type=search]::-ms-reveal { display: none; width : 0; height: 0; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { display: none; }

.custStreakIcon { display: inline-block; width: 65px; height: 65px; image-rendering: crisp-edges; }
.custStreakIconH { width: 200px; position: absolute; transform: translate(-50%, -50%); top: 60%; left: 50%; text-align: center; }
#custStreakListH { margin-top: 15px; margin-bottom: -4px; }
#custStreakSelH { margin-bottom: -4px; text-align: center; border-top: 2px solid rgb(255,255,255,0.2); padding-top: 13px; margin-top: 13px; pointer-events: none; cursor: unset; }
.streakImg { margin-top: 10px; image-rendering: crisp-edges; margin-bottom: 25px; width: 100px; cursor: pointer; pointer-events: auto; transition: all .15s ease-in-out; }.streakImg:hover { opacity: 0.9; transform: scale(1.2); }
.streakSelH { padding: 6px; width: calc(100% - 75px); text-align: left; font-size: 22px; box-sizing: border-box; padding-right: 10px; padding-left: 10px; pointer-events: all; display: inline-block; vertical-align: bottom; }
.streakBackH { width: 100%; padding-top: 0px; z-index: 999999999; background: #b7b7b782; border-radius: 4px; }
.streakCard { pointer-events: auto; cursor: pointer; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; text-align: center; color: #fff; margin-bottom: 10px; margin-left: 5px; margin-right: 5px; padding: 5px; padding-top: 2px; width: 143px; height: 170px; vertical-align: top; background-color: rgba(255, 255, 255, 0.45); border-radius: 5px; display: inline-block; font-size: 20px; position: relative; z-index: 1; } .streakCard:hover { background-color: rgba(255, 255, 255, 0.35); } .streakCard:hover img { opacity: 0.9; transform: scale(1.1); }
.streakActionOvrl { z-index: 12; text-align: center; position: absolute; opacity: 0; left: 0px; right: 0px; top: 0px; bottom: 0px; background: rgba(0,0,0,0.8); display: flex; flex-direction: column; justify-content: center; align-items: center; color: rgba(255,255,255,0.5); font-size: 12px; }
.streakCard .streakActionOvrl { opacity: 0; transition: opacity .15s ease; }
.streakCard:active .streakActionOvrl, .streakCard:hover .streakActionOvrl { z-index: 9999999999; opacity: 1; }
.streakActionB { display: inline-block; color: #fff; font-size: 25px; vertical-align: top; cursor: pointer; transition: transform .1s ease; } .streakActionB:hover { transform: scale(0.9); }
.winSelH { padding: 6px; width: calc(100% - 75px - 64px); text-align: left; font-size: 23.5px; box-sizing: border-box; padding-right: 10px; padding-left: 10px; pointer-events: all; display: inline-block; vertical-align: bottom; background: #767676; border-radius: 4px; }
.winClose { display: inline-block; padding: 2px; padding-left: 7px; padding-right: 7px; background: var(--red); border-radius: 4px; margin-left: 10px; }.winClose:hover { background: #ed424285; }
.winCloseArr { color: #fff !important; vertical-align: middle !important; cursor: pointer; font-size: 45px !important; }
#onetrust-consent-sdk { z-index: 10000000000; position: relative; }

#spinHistoryBtn { position: absolute; width: calc(100% - 10px); padding-top: 5px !important; padding-bottom: 13px !important; font-size: 22px !important; background-color: #00B800 !important; box-shadow: inset 0px -7px 0px 0px #008400 !important; display: inline-block; top: calc(100% + 8px); margin-left: -20px; border-radius: 4px; margin-bottom: 6px; border: 4px solid white; text-align: center; color: white; transition: all 0.08s; height: 30px; vertical-align: bottom; line-height: 35px; z-index: 999999; pointer-events: all; cursor: pointer; }#spinHistoryBtn:hover { border: 4px solid white !important; color: white !important; transform: scale(0.95); }
#spinMultiToggleBtn { position: absolute; width: calc(100% - 10px); padding-top: 5px !important; padding-bottom: 13px !important; font-size: 22px !important; background-color: #2196F3 !important; box-shadow: inset 0px -7px 0px 0px #1769aa !important; display: inline-block; top: calc(100% + 72px); margin-left: -20px; border-radius: 4px; margin-bottom: 6px; border: 4px solid white; text-align: center; color: white; transition: all 0.08s; height: 30px; vertical-align: bottom; line-height: 35px; z-index: 999999; pointer-events: all; cursor: pointer; }#spinMultiToggleBtn:hover { border: 4px solid white !important; color: white !important; transform: scale(0.95); }
#spinHistoryPop { 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; padding: 5px; width: 755px; border-radius: 4px; box-shadow: 2px 2px 8px rgb(0 0 0 / 50%); background-color: #353535; }
.spinHistoryHeader { width: calc(100% + 5px) !important; z-index: 9999; position: sticky; top: -20px; font-size: 30px; color: #fff; border-bottom: 4px solid #989898; background-color: #111111; box-shadow: 0px 10px 10px #00000052, 0px 0px 0px #000; margin: -5px 0px 10px -5px !important; padding: 10px 0px 10px 5px; border-radius: 4px 4px 0px 0px; }
#spinHistoryList { max-height: 500px; overflow-y: auto; pointer-events: all; text-align: center; }
.spinHistoryClear { display: inline-block; padding: 5px; padding-left: 10px; padding-right: 10px; border-radius: 4px; background-color: var(--blue)!important; font-size: 18px; margin-top: 6px; vertical-align: top; position: relative; color: #f8f9fa; float: right; margin-right: 15px; transition: all 0.1s; cursor: pointer; margin-left: -155px; pointer-events: all; }.spinHistoryClear:hover { transform: scale(0.95); }
.spinHistoryClear.disabled { background-color: var(--red)!important; }
.spinHistoryWarning { text-align: center; color: var(--yellow); font-size: 14px; margin-top: 10px; margin-bottom: 10px; }
.spinInfoText { position: absolute; top: calc(100% + 65px); right: 5px; width: calc(100% - 10px); font-size: 16px; color: var(--white); text-shadow: 0 0 10px #000; text-align: justify; margin-top: 8px; display: flex; flex-direction: column; }
.spinInfoText span { font-size: 16px; color: var(--white); text-shadow: 0 0 10px #000; margin-bottom: 2px; }
.spinInfoText li { font-size: 12px; color: var(--white); text-shadow: 0 0 10px #000; }
.spinInfoText #spinEndTime { font-size: 12px; text-align: left; }

.clsStatCard { color: #fff; margin: 5px; padding: 5px; width: 233px; height: 70px; vertical-align: top; background-color: rgba(0, 0, 0, 0.3); border-radius: 5px; display: inline-block; font-size: 26px; z-index: 1; cursor: pointer; position: relative; }
.clsStatWeap { color: #fff; font-size: 10px; position: absolute; left: 81px; top: 29px; text-shadow: none; }
.clsStatName { color: #fff; font-size: 13px; position: absolute; left: 81px; top: 5px; }
.clsStatImg { image-rendering: pixelated; float: left; width: 70px; position: relative; border-radius: 4px; z-index: -1 !important; background-color: rgba(255,255,255,0.3); }
.clsStatXPBar { position: absolute; top: 51px; left: 81px; width: 156px; height: 24px; border-radius: 3px; background-color: #181818; }
.clsStatLvl { position: absolute; color: #fff; top: 53px; left: 40px; font-size: 12px; transform: translateX(-50%); }
.clsStatXPBarC { margin: 3px; background-image: linear-gradient(to right, #FF6A0B, #fbc02d); height: 17px; }
.clsStatXPBarV { text-shadow: none; color: #fff; position: absolute; height: 100%; text-align: center; top: 4px; left: 0; right: 0; font-size: 9px; }
.pListPing { margin-right: 2px!important; font-size: 37px!important; vertical-align: top!important; }
.pListVoice { margin-left: 2px!important; font-size: 37px!important; vertical-align: top!important; color: var(--green); }
#eventAd { box-shadow: unset; animation-name: freeKRPulse; animation-duration: 2s; animation-iteration-count: infinite; }
.eventPop { pointer-events: all; border-radius: 10px; padding: 15px; text-align: left; position: absolute; top: 50%; left: 50%; width: 679px; transform: translate(-50%, -50%); color: #fff; box-shadow: 2px 2px 8px rgb(0 0 0 / 50%); background-color: #353535; }
.eventPopHeader { position: relative; width: calc(100% - 10px); height: 110px; background: #000; margin-bottom: 10px; border-radius: 14px; border: 4px solid white; background-size: cover; background-position-y: center; }
.eventPopName { color: #fff !important; text-shadow: 0 0 20px black; font-size: 40px; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); text-align: center; width: 100%; }
.eventPopChallBtn { font-size: 20px; text-align: center; width: calc(100%); background: var(--red); padding-top: 12px; padding-bottom: 12px; border-radius: 8px; color: #fff; cursor: pointer; margin-top: 10px; transition: all 0.1s }
.eventPopChallBtn:hover { transform: scale(0.98); }
.eventPopInfo { color: #fff; font-size: 20px; margin-top: 10px; }
.eventPopInfo > li { color: #bcbcbc; font-size: 15px; }
.eventPopInfoH { position: relative; display: inline-block; vertical-align: top; padding: 20px; padding-top: 10px; width: 640px; background: #00000066; border-radius: 8px; }
.eventPopSkinsH { color: #fff; text-align: center; font-size: 20px; margin-top: 10px; }
.eventPopEnd { color: var(--green); text-align: center; font-size: 20px; }
.grooves { display: none; }
.challIconSkull { content:url("../img/skull_0.png"); }
.challIconHP { content:url("../img/hp_0.png"); }
.serverTimeLeft { font-size: 12px; float: right; margin-right: 5px; line-height: 44px; }

.bpCol { width: 130px; padding: 2.5px; display: inline-block; }
.bpCols { display: inline-block; scroll-behavior: smooth; width: auto; white-space: nowrap; overflow-x: scroll; position: relative; scrollbar-width: none; -ms-overflow-style: none; max-width: 1380px; }
.bpCols::-webkit-scrollbar { width: 0; height: 0; }
.bSliderH { width: 46px; padding: 2.5px; padding-top: 45px; vertical-align: top; display: inline-block; }
.bSliderH.right { margin-left: 12px; }
.bSliderH.left { margin-right: 12px; }
.bSliderBtn { box-sizing: border-box; height: 400px; padding: 2px; border: 2px solid rgba(255, 255, 255, 0.5); background: rgba(0, 0, 0, 0.25); position: relative; cursor: pointer; }
.bSliderBtn:hover { border: 2px solid rgba(255, 255, 255, 0.5); background: rgba(0, 0, 0, 0.5); }
.bSliderBtn:active { background: rgba(0, 0, 0, 0.75); border: 2px solid rgba(255, 255, 255, 0.5); }
.bSliderBtn.disabled { background: rgba(0, 0, 0, 0.25); border: 2px solid rgba(255, 255, 255, 0.25); opacity: 0.5; cursor: default; }
.bpRowTitles { width: 57px; padding: 2.5px; padding-top: 45px; vertical-align: top; display: inline-block; margin-right: 12px; }
.bpRowTitleText { font-size: 17.265px; font-style: normal; font-weight: 400; line-height: 120%; letter-spacing: 0.863px; color: #FFFFFF; transform: rotate(-90deg); top: 45%; left: 10%; position: absolute; }
.bpLevelNum { display: flex; align-items: center; justify-content: center; padding: 2px; margin-bottom: 6px; background: rgba(0, 0, 0, 0.25); height: 30px; box-sizing: border-box; }
.bpLevelNum span { color: #fff; padding-top: 8px; text-align: center; font-size: 16px; font-style: normal; font-weight: 400; line-height: 120%; letter-spacing: 0.8px; }
.bpLevelNum.completed { background: #686868; }
.bpLevelNum.active { border: 1.867px solid rgba(255, 255, 255, 0.50); background: #9B9C9C; }
.bpCard { box-sizing: border-box; text-align: center; height: 200px; padding: 2px; margin-bottom: 5px; background: rgba(0, 0, 0, 0.25); border: 2px solid rgba(255, 255, 255, 0.25); position: relative; }
.bpCard.free { border: 2px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.20); }
.bpCard.free.completed { border: 2px solid rgba(255, 255, 255, 0.50); background: rgba(255, 255, 255, 0.50); box-shadow: 0px 0px 28px 0px rgba(255, 255, 255, 0.50); }
.bpCard.free.completed.claimed { border: 2px solid rgba(255, 255, 255, 0.50); background: rgba(255, 255, 255, 0.50); box-shadow: unset; }
.bpCard.vip { border: 2px solid rgba(255, 229, 64, 0.50); background: rgba(255, 229, 64, 0.50); }
.bpCard.vip.completed { border: 2px solid rgba(255, 229, 64, 0.50); background: rgba(255, 229, 64, 0.50); }
.bpCard.vip.completed.unlocked { border: 2px solid rgba(255, 229, 64, 0.50); background: rgba(255, 229, 64, 0.70); box-shadow: 0px 0px 22.4px 0px rgba(255, 229, 64, 0.50); }
.bpRowTitles > .bpCard.vip { background: linear-gradient(180deg, rgba(255, 229, 64, 0.25) 0%, rgba(255, 229, 64, 0.35) 66.67%, rgba(255, 229, 64, 0.65) 100%); border: 2px solid rgba(255, 229, 64, 0.5); box-shadow: 0px 0px 8px rgb(255 229 64 / 50%); }
.bpCardSlot { position: absolute; height: 56%; left: 50%; top: 50%; width: 65%; transform: translate(-50%,-50%); background: rgba(0, 0, 0, 0.5); border: 2px solid rgba(255, 255, 255, 0.25); cursor: pointer; pointer-events: all; }
.bpCardSlot.freeCanClaim { top: 35%; }
.bpCardRarityLabel { width: 100%; height: 24px; background: var(--rarity-color); position: absolute; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; }
.bpCardRarityLabel span { padding-top: 4px; color: #fff; text-align: center; font-size: 12px; font-style: normal; font-weight: 400; line-height: 100%; letter-spacing: 0.3px; }
.bpSliderArrow { width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-right: 20px solid white; top: 50%; position: absolute; left: 50%; transform: translate(-50%, -50%); }
.bpSliderArrow.right { transform: translate(-50%, -50%) matrix(-1, 0, 0, 1, 0, 0); }
.bpCardLock { background-image: url(../img/battlepass/lock.png); background-size: cover; position: absolute; width: 42px; height: 42px; left: calc(50%); transform: translate(-50%, -50%); z-index: 1; }
.bpCardImgH { position: relative; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.bpCardImg { width: 73%; }
.bpBtn { display: flex; border-radius: 3px; text-align: center; cursor: pointer; z-index: 10; height: 40px; padding: 4px 40px 0px 40px; flex-direction: column; justify-content: center; align-items: center; }
.bpBtn span { font-size: 14px; font-style: normal; font-weight: 400; line-height: 120%; letter-spacing: 0.7px; }
.bpBtn.claim { border: 2px solid #FFE540; }
.bpBtn.skip { border: 2px solid #00B1FF; }
.bpBtn:hover { transform: scale(0.95); }
.bpTopH { margin-bottom: 20px; display: flex; align-items: flex-end; justify-content: space-between; }
.bpSeasonH { padding: 5px; font-size: 32px; font-style: normal; font-weight: 400; line-height: 120%; letter-spacing: 1.6px; display: flex; flex-direction: column; gap: 8px; }
.bpSeasonTime { display: flex; align-items: center; justify-content: flex-start; white-space: pre; }
.bpSeasonTime span { font-size: 12px; font-style: normal; font-weight: 400; line-height: 120%; color: #A8A8A8!important; text-align: center; }
.bpSeasonTimeIcon { background-image: url(../img/battlepass/clock.png); background-size: cover; width: 15px; height: 17px; z-index: 1; vertical-align: top; margin-right: 8px; display: inline-block; }
.bpLevelH { display: flex; align-items: flex-end; justify-content: center; gap: 20px; }
.bpLevelText { display: flex; align-items: center; justify-content: center; }
.bpLevelText span { color: #fff; font-size: 22px; font-style: normal; font-weight: 400; line-height: 120%; letter-spacing: 1.1px; }
.bpXPText { font-size: 12px; font-style: normal; font-weight: 400; line-height: 120%; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; text-align: right; color: #A8A8A8!important; white-space: pre; }
.bpXPIcon { height: 22px; padding: 14px; margin: -14px; color: #A8A8A8!important; }
.bpXPBarH { width: 140px; background-color: rgba(255, 255, 255, 0.25); height: 8px; position: relative; }
.bpXPBar { background-color: #00B1FF; height: 8px; position: absolute; top: 0; left: 0; }
.bpInfoBalloon { display: none; position: absolute; width: 445px; right: 49px; text-align: left; top: -62px; background: #353535; padding: 36px; z-index: 1; }
.bpInfoBalloon::after { content: ""; display: block; background: #353535; width: 40px; height: 40px; position: absolute; right: -10px; top: 84px; transform: rotate(45deg); }
.bpMidH { margin-bottom: 20px; }
.bpBotH { display: flex; align-items: center; justify-content: center; gap: 35px; margin-bottom: 12px; }
.bpMenuBtn { font-size: 20px; color: #fff; text-align: center; margin-top: 50px; position: relative; cursor: pointer; pointer-events: all; transition: all .15s ease-in-out; }
.bpMenuBtn:hover { transform: scale(1.1); }
.bpClaimLabel { position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%); font-size: 15px; width: 114px; cursor: pointer; }
.bpClaimB { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); width: 100px; padding-top: 4px; padding-bottom: 4px; cursor: pointer; border: 2px solid #686868; background: #353535; border-radius: 2.191px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.bpClaimB span { padding-top: 2px; color: #fff; font-size: 12px; font-style: normal; font-weight: 400; letter-spacing: 0.6px; }
.bpClaimB:hover { opacity: 0.9; }
.bpMenuShape { width: 200px; height: 140px; background: #00B1FF; clip-path: polygon(5% 0, 93% 4%, 100% 84%, 95% 94%, 10% 100%, 0 85%); left: 50%; position: relative; transform: translateX(-50%); }
.bpMenuImg { height: 157px; position: absolute; z-index: 1; top: -29px; left: 50%; transform: translateX(-50%); }
.bpRightH { display: inline-block; position: absolute; clip-path: polygon(20% 20%, 100% 0, 100% 100%, 2% 96%, 0 86%); background-color: #00B1FF; width: 1200px; height: 100%; right: 0; transform: translateX(84%); top: -20px; }
.bpUnlockBtn { border: 3px solid #FFE540; display: inline-block; border-radius: 3px; text-align: center; width: 358px; font-size: 30px; padding: 10px; margin: 0 10px 0 10px; cursor: pointer; z-index: 10; position: absolute; bottom: 0px; right: 0; transform: translateX(156%); background-color: rgba(0,0,0,0.5); }
.bpUnlockBtn:hover { transform: translateX(156%) scale(1.1); }
.bpBG { background: linear-gradient(0deg, rgb(0 0 0 / 50%), rgb(0 0 0 / 50%)), url(../img/battlepass/bg_window_4.png); width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; background-size: cover; background-repeat: no-repeat; background-position-y: center; filter: blur(3px); opacity: 0.3; }

.bp-unlock-pop { padding: 15px; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); color: #fff; height: 500px; width: 1500px; }
.bp-unlock-header { background: #353535; border-radius: 4px; height: 62px; width: 85%; color: #fff; text-align: left; line-height: 58px; font-size: 20px; margin: auto; padding-left: 20px; }
.bp-unlock-ticket { transform: translateX(-50%); background: url(../img/battlepass/ticket.svg); width: 380px; height: 705px; background-repeat: no-repeat; background-size: cover; position: absolute; left: 50%; top: 40px; }
.bp-unlock-logo { background: url(../img/battlepass/icon.svg); width: 850px; height: 900px; background-repeat: no-repeat; background-size: contain; position: absolute; left: 50%; transform: translateX(-50%); top: -40px; }
.bp-unlock-panel { width: 350px; height: 350px; top: 75px; position: absolute; font-size: 30px; color: #fff; }
.bp-unlock-plus { background: var(--blue); clip-path: polygon(0 0, 97% 0, 100% 100%, 3% 100%); padding: 5px 20px; font-size: 18px; color: #fff; top: -7px; position: relative; margin-left: 10px; }
.bp-unlock-dots-holder { position: absolute; left: 0; right: 0; top: 46px; }
.bp-unlock-dots { background: #fff; height: 8px; width: 8px; border-radius: 8px; margin: 0 -5px; display: inline-block; }
.bp-unlock-text { position: absolute; left: 0; right: 0; top: 125px; color: #fff; font-size: 15px; }
.bp-unlock-plus-text { position: absolute; left: 0; right: 0; top: 150px; color: #FAFF00; font-size: 17px; }
.bp-unlock-btn-holder { position: absolute; left: 0; right: 0; bottom: 0px; }
.bp-unlock-btn { width: 300px; margin: auto; border: 2px solid #FFE540 !important; padding: 20px; font-size: 25px !important; background: rgba(0, 0, 0, 0.5); }
.bp-unlock-btn:hover { border: 2px solid #FFE540 !important; }
.bp-unlock-container-bg { background: url(../img/battlepass/unlock_traced.svg); width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; filter: blur(2px); opacity: 0.3; }
.bp-unlock-container-wrapper { width: 100%; height: 100%; filter: drop-shadow(0px 0px 20px #B556FF); }
.bp-unlock-container { clip-path: polygon(2% 0, 98% 0, 100% 100%, 0% 100%); height: 100%; width: 100%; margin-top: 60px; backdrop-filter: blur(2px); background: linear-gradient(90deg, rgba(158, 112, 193, 0.21) 47.55%, rgba(130, 22, 213, 0.52) 50.33%); }
.bp-unlock-container:before { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; clip-path: polygon(calc(2% + 5px) 5px, calc(98% - 5px) 5px, calc(100% - 5px) calc(100% - 5px), 5px calc(100% - 5px)); }
.bp-unlock-container:after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; clip-path: polygon(2% 0%, 0% 100%, 5px 100%, calc(2% + 5px) 5px, calc(98% - 5px) 5px, calc(100% - 5px) calc(100% - 5px), 5px calc(100% - 5px), 5px 100%, 100% 100%, 98% 0%); background: #B556FF; }

.bp-generic-pop, .bp-purchase-pop { padding: 15px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -51%); color: #fff; height: 580px; width: 986px; background: #353535; border: 1px solid #FFFFFF; box-shadow: 0px 0px 30px #0085ff, inset 0px 0px 4px rgb(0 133 255 / 50%); border-radius: 12px; }
.bp-purchase-pop { height: 650px!important; }
.no-box-shadow { box-shadow: unset; }
.bp-generic-img-back { position: absolute; height: 320px; width: calc(100% - 32px); background-image: url(../img/battlepass/unlocked_back.svg); background-size: cover; background-position: center; background-repeat: no-repeat; }
.bp-generic-img-splash { position: absolute; height: 610px; width: 610px; top: -246px; left: 245px; background-image: url(../img/battlepass/unlocked_front.svg); background-size: cover; background-repeat: no-repeat; }
.bp-generic-img { position: absolute; height: 353px; width: 800px; top: -60px; left: 106px; background-image: url(../img/battlepass/ticket_9.svg); background-size: contain; background-position: center; background-repeat: no-repeat; }
.bp-generic-img-skip { height: 527px; width: 577px; top: -177px; left: 211px; background-image: url(../img/battlepass/skip_tier.svg); }
.bp-generic-header { color: white; font-size: 40px; margin-top: -30px; margin-bottom: 50px; }
.bp-generic-text { position: absolute; left: 0; right: 0; top: 320px; }
.bp-generic-info { color: white; font-size: 20px; margin-bottom: 50px; }
.bp-generic-btn-holder { position: absolute; left: 0; right: 0; bottom: 20px; display: flex; gap: 20px; width: 80%; margin: 0 auto; }
.bp-generic-btn { width: 300px; margin: auto; border: 2px solid #FFE540 !important; padding: 20px; font-size: 25px !important; background: rgba(0, 0, 0, 0.5); }
.bp-generic-btn:hover { border: 2px solid #FFE540 !important; }
.bp-generic-btn-small { width: 32px; padding: 8px; line-height: 25px; margin: auto; border: 2px solid #FFE540 !important; font-size: 25px !important; background: rgba(0, 0, 0, 0.5); }
.bp-generic-btn-small:hover { border: 2px solid #FFE540 !important; }
#bp-skip-num { margin: auto 0px; text-align: center; color: white; height: 30px; vertical-align: bottom; width: 32px; line-height: 25px; font-size: 25px !important; }

.clanSubmitBtn { background-color: #2196F3; display: inline-block; padding: 5px; margin-top: 10px; font-size: 18px; border-radius: 4px; width: 135px; text-align: center; margin-left: 15px; color: #fff; cursor: pointer; padding-top: 10px; padding-bottom: 10px; }
.clanSubmitBtn:hover { background-color: #1a78c2; transform: scale(0.95); }
.shopAction { display: table-cell; color: #fff; font-size: 21px; cursor: pointer; transition: transform .1s ease; width: 49%; vertical-align: middle; }
.shopAction:hover { transform: scale(0.9); }
.shopActionSep { height: calc(100% - 20px); background: #FFF; opacity: 0.8; margin: 10px 0px; border-radius: 4px; width: 5px; }
.shopActionOvrl { z-index: 12; text-align: center; position: absolute; opacity: 0; left: 0px; right: 0px; top: 0px; bottom: 0px; background: rgba(0,0,0,0.8); color: rgba(255,255,255,0.5); font-size: 12px; display: inline-table; width: 100%; height: 100%; }
.shopCard .mapActionOvrl { opacity: 0; transition: opacity .15s ease; }
.shopCard:active .shopActionOvrl, .shopCard:hover .shopActionOvrl, #shopSideSellB:active .shopActionOvrl, #shopSideSellB:hover .shopActionOvrl { z-index: 9999999999; opacity: 1; }
.shopActions { display: table-cell; color: #fff; font-size: 21px; cursor: pointer; transition: transform .2s ease; width: 49%; vertical-align: middle; }
.shopSubAction { transition: transform .2s ease; }
.shopSubAction:hover { transform: scale(0.9); }
.shopSubActionSep { background: #fc9803; width: calc(100% - 20px); opacity: 0.8; margin: 10px 10px; border-radius: 4px; height: 5px; }
.spinErrorPop { pointer-events: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; width: 379px; overflow-y: auto; overflow-x: hidden; background-color: #353535; box-shadow: 2px 2px 8px rgb(0 0 0 / 50%); border-radius: 6px; padding: 20px; font-size: 20px; }
.popHeader, .dropsPopHeader { width: calc(100% + 25px) !important; z-index: 9999; position: sticky; top: -20px; font-size: 30px; color: #fff; margin-top: -20px !important; margin-left: -20px; border-bottom: 4px solid #989898; background-color: #111111; box-shadow: 0px 10px 10px #00000052, 0px 0px 0px #000; padding-top: 15px; padding-bottom: 15px; margin-bottom: 15px; padding-left: 15px; text-align: center; }
.charmErrorPop { pointer-events: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; width: 379px; overflow-y: auto; overflow-x: hidden; background-color: #353535; box-shadow: 2px 2px 8px rgb(0 0 0 / 50%); border-radius: 6px; padding: 20px; font-size: 20px; }
.charmBtn { color: #fff; padding: 5px 0; background: var(--red); display: inline-block; border-radius: 3px; width: calc(50% - 10px); cursor: pointer; margin: 0 5px; transition: transform .1s ease-out; }
.charmBtn:hover { transform: scale(0.95); }
.ticketImgSep { display: inline-block; margin: 0 5px 0 7px; }
.ticketImg { width: 34px; vertical-align: text-top; display: inline-block; }
.ticketCount { color: #2196F3; font-size: 12px; position: absolute; bottom: 10px; text-align: center; width: 50%; right: 0px; }
.blockClick { filter: grayscale(1); cursor: none; pointer-events: none; }
.bpClaimed { text-align: center; position: absolute; width: 100%; height: 100%; transform: translate(-50%, -50%); left: 50%; top: 50%; background: rgba(0, 0, 0, 0.5); border: 2px solid rgba(0,0,0, 0.25); z-index: 2; }
.serverHostOpGroup { margin-right: 20px; display: inline-block; vertical-align: top; }
.serverHostOp-small { height: 81px !important; background-size: 100% !important; background-position: center !important; line-height: 81px !important; display: block !important; }
.serverHostOp-mid { height: 135px !important; background-size: 100% !important; background-position: center !important; line-height: 135px !important; display: block !important; }
#zPerksHolder { display: inline-block; vertical-align: bottom; }
.zPerkItem, .powerupItem { position: relative; display: inline-block; background-size: contain; width: 55px; height: 55px; padding: 10px; margin-right: 10px; filter: drop-shadow(0 0 5px #000); }
.powerupItem { margin-right: -15px!important; }
.powerupTime { color: #ffffff; margin-top: -35px; }
#roundMessage { color: #fff; z-index: 10; font-size: 22px; margin-top: 20px; }

#endBPLvl { font-size: 23px; color: rgba(255, 255, 255, .6); }
#endBPProgText { color: #fff; position: absolute; text-align: right; bottom: 68px; left: 0; right: 18px; font-size: 19px; }
#endBPGained { color: #00B1FF; position: absolute; text-align: center; bottom: 68px; left: 0; right: 24px; font-size: 19px; }
#endBPLayout { display: grid; grid-template-columns: calc(80% - 5px) calc(20% - 5px); column-gap: 10px; row-gap: 10px; }
.xpEndBPBarB { display: inline-block; height: 100%; background-image: linear-gradient(to right, var(--blue), #00ffff, 94%, white); transition: width 1s ease-in-out; }
#endBPNextText { text-align: center; font-size: 12px; margin-bottom: 0px; margin-top: -5px; color: #fff; }
.endBPNext { padding: 16px 20px; position: relative; margin-bottom: 10px; border-radius: 6px; background-color: rgba(0, 0, 0, 0.3); }
#endBPUnlock { box-sizing: border-box; padding: 5px; width: 160px; background: rgba(0, 0, 0, 0.5); border: 2px solid #00B1FF; border-radius: 2px; color: #fff; font-size: 12px; pointer-events: all; cursor: pointer; text-align: center; position: absolute; right: 10px; top: 10px; }
#endBPLogo { width: 118px; padding: 0px 16px; }
#endBPReward { display: none; width: 118px; position: absolute; top: 25px; left: 35px; }
#endBPRewardImg { width: 100%; }
#endBPRewardLock { width: 35%; position: relative; top: -77px; left: 40px; }
.spinHistoryStats { display: inline-block; padding: 5px; padding-left: 10px; padding-right: 10px; border-radius: 4px; background-color: var(--blue) !important; font-size: 18px; margin-top: 6px; vertical-align: top; position: relative; color: #f8f9fa; float: left; margin-left: 15px; transition: all 0.1s; cursor: pointer; margin-right: -155px; pointer-events: all; }
.spinHistoryStats:hover { transform: scale(0.95); }
.spinHistoryStats.disabled { background-color: var(--red) !important; }
.spinHistoryStatsPop { pointer-events: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; width: 500px; overflow-y: auto; overflow-x: hidden; background-color: #353535; box-shadow: 2px 2px 8px rgb(0 0 0 / 50%); border-radius: 6px; padding: 20px; font-size: 20px; }
.spinHistoryTime { color: var(--yellow); font-size: 12px; margin-bottom: 5px; }
#debugStats { display: none; z-index: 3; margin-bottom: 10px; will-change: transform; transform: translateZ(0); }
.muteUserBtn { margin-right: 6px!important; font-size: 34px!important; margin-top: -12px!important; height: 25px !important; vertical-align: middle; color: #ffffff !important; text-shadow: none; }
.muteUserBtn:hover { opacity: 0.7 !important; }
.doubleXPIcon { display: inline-block; color: #fff; line-height: 65px; height: 37px; width: 45px; text-align: center; margin-top: -5px; margin-left: -5px; margin-bottom: -8px; border-radius: 3px; background-image: url(../img/doublexp.png); background-size: cover; }
#kpdCalls > * td, #kpdCalls > * th { font-size: 16px!important; border-bottom: 3px solid rgba(255, 255, 255, 0.1); height: 40px; color: #858585; }
#kpdCalls { margin-top: 15px; background-color: rgba(0, 0, 0, 0.2); padding:10px; margin-bottom:10px; max-height:400px; overflow-y:scroll; overflow-x:hidden; text-align: left; height: 400px; }
.scrimHeader { font-size: 28px; text-align: center; }
.scrimSub { font-size: 14px; color: #ffffff87 !important; text-align: center; padding: 19px; padding-left: 60px; padding-right: 60px; }
.scrimHolder { display: flex; align-items: center; flex-direction: row; flex-wrap: wrap; justify-content: center; }
.scrimImage { width: 150px; height: 150px; background: #1d1d1d; border-radius: 6px; margin-bottom: 16px; margin-right: 18px; box-shadow: 2px 3px 4px 0px black; }
.scrimDesc { font-size: 13px; width: 70%; }
.scrimLink { padding-top: 17px; }
#specKPDTxt { color: #fff; font-size: 30px; margin-bottom: 16px; }
#specKPDTxt > div { margin-top: 10px; font-size: 15px; color: rgba(255, 255, 255, 0.7); }

.loadingPop { pointer-events: all; border-radius: 10px; padding: 15px; text-align: left; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; box-shadow: 2px 2px 8px rgb(0 0 0 / 50%); background-color: #353535; width: 300px; }
.autoLoadPop { pointer-events: all; border-radius: 10px; padding: 15px; text-align: left; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; box-shadow: 2px 2px 8px rgb(0 0 0 / 50%); background-color: #353535; width: 600px; }
.editMapPop { pointer-events: all; border-radius: 10px; padding: 15px; text-align: left; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; box-shadow: 2px 2px 8px rgb(0 0 0 / 50%); background-color: #353535; width: 600px; }
.responsePop { pointer-events: all; border-radius: 10px; padding: 15px; text-align: left; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; box-shadow: 2px 2px 8px rgb(0 0 0 / 50%); background-color: #353535; width: 300px; }
.infoPop { pointer-events: all; border-radius: 10px; padding: 15px; text-align: left; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; box-shadow: 2px 2px 8px rgb(0 0 0 / 50%); background-color: #595959; width: 600px; }
.contPop { pointer-events: all; border-radius: 10px; padding: 15px; text-align: left; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; box-shadow: 2px 2px 8px rgb(0 0 0 / 50%); background-color: #595959; width: 700px; }
.bundlCreatorH, .battlepassCreatorH { display: inline-block; width: calc(100% - 40px); border-radius: 6px; padding: 10px 20px; background-color: rgba(0, 0, 0, 0.4); margin-top: 15px; }
.bundlCreatorText, .battlepassCreatorText { color: rgba(255, 255, 255, 0.5); font-size: 14px; margin-top: 5px; margin-bottom: 5px; }
#bundlCreatorCode, #premiumCreatorCode, #battlepassCreatorCode { display: inline-block; width: 473px; padding: 10px; padding-left: 15px; margin-top: 10px; font-size: 18px; box-sizing: border-box; border: none; background-color: rgba(255, 255, 255, 0.25); color: rgba(255, 255, 255, 0.8); margin-bottom: 8px; border-radius: 4px; }
#bundlCreatorCodeBtn, #premiumCreatorCodeBtn, #battlepassCreatorCodeBtn { display: inline-block; padding-top: 10px; padding-bottom: 10px; margin-top: 10px; font-size: 18px; border-radius: 4px; width: 117px; text-align: center; margin-left: 10px; color: #fff; pointer-events: all; cursor: pointer; }
#miniMapOverlay { font-size: 25px; color: #fff; display: inline-block; }
#miniMapCanvas { image-rendering: optimizeSpeed; image-rendering: crisp-edges; image-rendering: pixelated; border-radius: inherit; }
.roundMap { border-radius: 50%; }

.ticketPop { pointer-events: auto; border-radius: 10px; padding: 20px; text-align: left; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; width: 730px; box-shadow: 2px 2px 8px rgb(0 0 0 / 50%); background-color: #353535; }
.ticketCard { cursor: pointer; pointer-events: auto; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; text-align: center; margin-bottom: 10px; margin-left: 5px; margin-right: 5px; padding: 5px; vertical-align: top; border-radius: 5px; display: inline-block; font-size: 22px; position: relative; z-index: 1; transition: opacity .1s ease, background-size .1s ease, background-position .1s ease; border: 4px solid #b2f252 !important; text-shadow: 0px 0px 30px rgb(0 0 0); width: 118px; height: 118px; background-color: rgba(0, 0, 0, 0.4); background-size: contain; }.ticketCard:hover { background-origin: content-box; }
.ticketText { position: absolute; bottom: 5px; left: 0px; right: 0; z-index: 6; text-align: center; color: #b2f252 !important; pointer-events: none; text-shadow: 0px 0px 30px rgb(0 0 0); font-size: 15px; }
#loadoutSelect { max-width: 324px; border-radius: 6px; margin-left: 10px; border: none; background: #eee; padding: 6px; padding-bottom: 6px; margin-top: 5px; margin-bottom: 5px; }

.bundlPopBuyH { text-align: center; width: 640px; color: #fff; position: absolute; bottom: 20px; }
.bundlPopDiscountLabel { position: absolute; top: -15px; right: -60px; background: #ff4444; color: #fff; padding: 12px 24px; border-radius: 6px; font-size: 24px; font-weight: bold; box-shadow: 0 4px 12px rgba(255, 68, 68, 0.5); transform: rotate(20deg); z-index: 1000; animation: bundlePopDiscountGlow 2s ease-in-out infinite; white-space: nowrap; }
@keyframes bundlePopDiscountGlow { 0%, 100% { box-shadow: 0 2px 8px rgba(255, 68, 68, 0.4); } 50% { box-shadow: 0 2px 16px rgba(255, 68, 68, 0.7), 0 0 20px rgba(255, 68, 68, 0.3); } }
.bundlPopOriginalPrice { color: rgba(255, 255, 255, 0.9); font-size: 18px; margin-bottom: 8px; position: relative; float: left; }
.bundlPopOriginalPrice::after { content: ''; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; background: #ff4444; transform: translateY(-50%); }
.bundlPopBuyB, .bundlPopBuyS, .bundlPopBuyC { display: inline-block; width: 257px; background: var(--red); font-size: 24px; text-align: center; margin: 0 2px; padding-top: 12px; padding-bottom: 12px; border-radius: 8px; color: #fff; cursor: pointer; transition: all 0.1s; }
.bundlPopBuyS { font-size: 24px !important; width: 375px !important; background: #3ed747 !important; }
.bundlPopBuyC { font-size: 30px !important; background: #3ed747 !important; width: 440px !important; }
.bundlPopBuyGift { display: inline-block; width: 170px; background: #7851a9; font-size: 30px; text-align: center; margin: 0 2px; padding-top: 12px; padding-bottom: 12px; border-radius: 8px; color: #fff; cursor: pointer; transition: all 0.1s; }
.bundlPopBuyGift--owned { width: 640px; }
.bundlPopBuyB:hover, .bundlPopBuyS:hover, .bundlPopBuyC:hover, .bundlPopBuyGift:hover { transform: scale(0.98); }
.bundlPopBuyB:active, .bundlPopBuyS:active, .bundlPopBuyC:active, .bundlPopBuyGift:active { transform: scale(0.96); }
.bundlPopBuy--discount { background: linear-gradient(135deg, #ff6b6b 0%, #ff4444 100%) !important; box-shadow: 0 4px 12px rgba(255, 68, 68, 0.4); animation: bundlePopBuyGlow 2s ease-in-out infinite; }
@keyframes bundlePopBuyGlow { 0%, 100% { box-shadow: 0 4px 12px rgba(255, 68, 68, 0.4); } 50% { box-shadow: 0 4px 20px rgba(255, 68, 68, 0.7), 0 0 30px rgba(255, 68, 68, 0.3); } }
.bundlPopBuy--discount:hover { filter: brightness(1.1); animation: none; }
.custClear { right: -2.5px; top: -2.5px; position: absolute; font-size: 14px; z-index: 2; background-color: var(--red); padding: 4px 7px; border-radius: 4px; }
.custClear:hover { transform: scale(0.95); }
.custClear>.material-icons { color: #efefef !important; font-size: 25px !important; line-height: 30px !important; }

.death-ui-bottom { position: absolute; left: 0; right: 0; bottom: 40px; height: 300px; display: grid; background: rgb(0 0 0 / 30%); grid-template-columns: calc(25% - 50px) calc(25% - 50px) 60px calc(25% - 50px) calc(25% - 50px); column-gap: 20px; align-content: space-evenly; backdrop-filter: blur(10px); animation: death-ui-moveup 1.5s ease; }
.death-ui-bottom-empty { position: absolute; left: 0; right: 0; bottom: 40px; height: 300px; display: grid; background: rgb(0 0 0 / 30%); grid-template-columns: calc(50% - 120px) 200px calc(50% - 120px); column-gap: 20px; align-content: space-evenly; backdrop-filter: blur(10px); animation: death-ui-moveup 1.5s ease; }
@keyframes death-ui-moveup { 0% { bottom: -300px; } 100% { bottom: 40px; } }
.death-column { color: #fff; justify-content: end; text-align: center; display: grid; grid-template-rows: 50% 50%; align-items: center; }
.death-row-center, .death-row-center-bottom, .death-row-center-self { display: flex; font-size: 35px; color: #fff; height: 120px; align-items: center; justify-content: center; filter: drop-shadow(0px 0px 4px black); }
.death-row-center-bottom { font-size: 25px!important; }
.death-row-center-self { font-size: 50px!important; }
.death-row-left, .death-row-right, .death-row-bottom { display: grid; grid-template-columns: auto 120px; height: 114px; justify-content: end; }
.death-row-right { justify-content: start; grid-template-columns: 120px auto !important; }
.death-row-bottom { display: grid; height: 114px; background-color: rgba(0, 0, 0, 0.25)!important; width: 400px; outline: 2px solid rgba(0, 0, 0, 0.3); filter: drop-shadow(0px 0px 6px black); border-radius: 2px; justify-content: start; grid-template-columns: 120px auto !important; }
.death-row-bottom-bg { position: absolute; height: 113px; width: inherit; }
.death-row-weapon { display: grid; grid-template-rows: auto auto; height: 114px; justify-content: center; }
.death-row-weapon-text { transform: inherit!important; filter: drop-shadow(0px 0px 4px black); }
.death-row-weapon-img, .death-row-weapon-img-right { background-image: url(https://assets.krunker.io/textures/weapons/icon_1.png); width: 200px; height: 100px; background-size: contain; background-repeat: no-repeat; transform: scaleX(-1); margin-top: -20px; }
.death-row-weapon-img-right { transform: unset !important; }
.death-row-kills { display: flex; justify-content: space-around; text-align: center; align-items: center; font-size: 35px; color: #fff; filter: drop-shadow(0px 0px 4px black); }
.death-row-user { align-items: center; font-size: 20px; display: grid; grid-template-rows: auto auto; align-content: center; text-align: start; }
.death-row-user-text, .death-row-user-stat { color: #fff; overflow: hidden; white-space: nowrap; max-width: 270px; text-overflow: ellipsis; filter: drop-shadow(0px 0px 4px black); }
.death-row-user-stat { font-size: 12px; color: rgba(255, 255, 255, 0.7)!important; }
.death-row-class { color: #ffff; display: inline-block; image-rendering: pixelated; height: 80px; width: 80px; margin: 20px; position: relative; }
.death-row-class-level { position: absolute; bottom: 0px; font-size: 12px; color: #fff; text-align: center; width: 80px; }
.death-row-class-img { position: absolute; height: 100%; width: 100%; left: 0; }
.death-report { width: 100%; position: absolute; top: 8px; color: rgba(255, 255, 255, 0.7); }
.death-report-text { color: #FBC02D; }
.death-stats { color: #fff; align-items: center; border-radius: 6px; display: grid; grid-template-rows: auto auto auto auto auto; height: 120px; justify-content: start; row-gap: 17px; text-align: left; }
.death-stats-row { color: #fff; font-size: 20px; filter: drop-shadow(0px 0px 4px black); }
@keyframes chat-moveup { 0% { bottom: -300px; } 100% { bottom: 75px; } }
#uiBase.onDeathScrn #chatHolder { left: 64px; bottom: 75px; animation: chat-moveup 1.5s ease; }
#uiBase.onDeathScrn #chatList { max-height: 165px!important; }

.viewItemCard { width: 100%; height: 230px; border: none; margin: 55px 0 74px 0; background-repeat: no-repeat; background-size: contain; }
.viewItemEmoji { width: 100%; height: 512px; border: none; margin-top: 55px; background-repeat: no-repeat; background-size: contain; background-position: center; }
.viewItemPaint { width: 100%; height: 360px; border: none; margin-top: 55px; background-repeat: no-repeat; background-size: contain; background-position: center; }

.bundleCrd { position: relative; width: 268px; background: #151515; margin: 5px; border-radius: 8px; padding: 10px; padding-bottom: 12px; display: inline-block; }
.bundleIcn { display: inline-block; height: 242px; width: 204px; background: #000; border-radius: 4px; cursor: pointer; text-align: center; position: relative; background-repeat: no-repeat; background-size: cover; transition: 0.2s; }
.bundleIcn:hover { transform: scale(0.99); }
.bundleItmNm { font-size: 15px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: initial; position: absolute; top: 6px; left: 8px; text-align: left; width: 145px; filter: drop-shadow(0px 0px 4px black); transition: 0.2s; }
@keyframes pulseRotatedAnimation { 0%, 100% { transform: rotate(15deg) scale(1); } 5% { transform: rotate(15deg) scale(1.15); } 10% { transform: rotate(15deg) scale(1); } 15% { transform: rotate(15deg) scale(1.15); } 20% { transform: rotate(15deg) scale(1); } }
.menuItemRankedLabel { position: absolute; top: -15px; height: 14px; line-height: 1.5; right: -2px; background: #ff4444; color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; z-index: 10; pointer-events: none; transform: rotate(15deg); animation: pulseRotatedAnimation 3s ease-in-out infinite; }
.bundleDiscountLabel { position: absolute; bottom: 40px; right: 8px; background: #ff4444; color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 14px; font-weight: bold; filter: drop-shadow(0px 0px 4px black); z-index: 10; }
.bundleOriginalPrice { position: absolute; bottom: 6px; right: 8px; color: rgba(255, 255, 255, 0.9); font-size: 14px; filter: drop-shadow(0px 0px 4px black); z-index: 10; }
.bundleOriginalPrice::after { content: ''; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; background: #ff4444; transform: translateY(-50%); }
.bundleItmMore { font-size: 15px; position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; color: rgba(255, 255, 255, 0.75) !important; }
.bundleItmReq { position: relative; vertical-align: top; margin-bottom: 10px; width: 50px; height: 50px; background: #000; display: block; border: 2px solid dimgrey; border-radius: 4px; cursor: pointer; background-size: 95%; background-position: center; background-repeat: no-repeat; }
.bundleItmReq:hover { filter: brightness(1.05); transform: scale(1.1); }
.bundleItmReq:active { transform: scale(0.96); }
.bundleItmBtn { text-align: center; background: #cc51f8; margin-top: 10px; height: 36px; border-radius: 4px; width: 100%; line-height: 36px; font-size: 16px; cursor: pointer; }
.bundleItmBtn:hover { filter: brightness(1.05); transform: scale(0.95); }
.bundleItmBtn:active { transform: scale(0.92); }
.bundleItmBtnT { font-size: 16px; }
.bundleItmBtn--discount { background: linear-gradient(135deg, #ff6b6b 0%, #ff4444 100%); box-shadow: 0 4px 12px rgba(255, 68, 68, 0.4); animation: bundleDiscountGlow 2s ease-in-out infinite; }
@keyframes bundleDiscountGlow { 0%, 100% { box-shadow: 0 4px 12px rgba(255, 68, 68, 0.4); } 50% { box-shadow: 0 4px 20px rgba(255, 68, 68, 0.7), 0 0 30px rgba(255, 68, 68, 0.3); } }
.bundleItmBtn--discount:hover { filter: brightness(1.1); box-shadow: 0 6px 16px rgba(255, 68, 68, 0.5); animation: none; }
.bundleItmBtn--discount .bundleItmBtnT { color: #fff; font-weight: bold; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.bundleHl { position: relative; color: #fff; display: inline-block; margin-left: 7px; margin-bottom: -10px; vertical-align: top; }
.bundleCols { display: inline-block; scroll-behavior: smooth; width: auto; white-space: nowrap; overflow-x: scroll; position: relative; scrollbar-width: none; -ms-overflow-style: none; max-width: 1198px; width: 1198px; }
.bundleCols::-webkit-scrollbar { width: 0; height: 0; }
.bundleSliderH { width: 40px; padding: 2.5px; vertical-align: top; display: inline-block; }
.bundleSliderBtn { box-sizing: border-box; height: 315px; padding: 2px; border: 2px solid rgba(255, 255, 255, 0.5); background: rgba(0, 0, 0, 0.5); border-radius: 4px; position: relative; margin-top: 2px; cursor: pointer; }
.bundleSliderBtn:hover { border: 2px solid rgba(255, 255, 255, 0.6); background: rgba(0, 0, 0, 0.6); }
.bundleSliderBtn:active { background: rgba(0, 0, 0, 0.75); border: 2px solid rgba(255, 255, 255, 0.75); }
.bundleSliderBtn.disabled { background: rgba(0, 0, 0, 0.5); border: 2px solid rgba(255, 255, 255, 0.5); opacity: 0.5; cursor: default; }
.bundleSliderArrow { width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-right: 20px solid white; top: 50%; position: absolute; left: 50%; transform: translate(-50%, -50%); }
.bundleSliderArrow.right { transform: translate(-50%, -50%) matrix(-1, 0, 0, 1, 0, 0); }
#shopBundleHolder { position: relative; display: inline-block; vertical-align: top; cursor: pointer; transition: all 0.1s; margin-top: 10px; }

#doubleXPButton { display: block; border-radius: 4px; border-collapse: collapse; width: 400px; font-size: 25px; cursor: pointer; pointer-events: all; border: solid 2px #252525; background-color: rgba(0, 0, 0, 0.5); border: 6px solid #FFE540; padding: 6px; }
#doubleXPButton:hover { background-color: rgba(0, 0, 0, 0.75); }
.dxp-pop { padding: 15px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -51%); color: #fff; height: 506px; width: 986px; background: #353535; border: 1px solid #FFFFFF; border-radius: 12px; box-shadow: 0px 0px 30px #C569D8, inset 0px 0px 4px #C569D8; }
.dxp-img { position: absolute; height: 353px; width: 696px; top: -97px; left: 50%; transform: translateX(-50%); background-image: url("../../img/frvr-ui/doublexp.svg"); background-size: contain; background-position: center; background-repeat: no-repeat; }
.dxp-img-anim { position: absolute; height: 320px; width: calc(100% - 32px); background: black; }
.dxp-img-anim::before { content: ''; width: 100%; height: 100%; display: block; background-image: url(../../img/frvr-ui/lights.svg); background-size: cover; background-position: center; background-repeat: no-repeat; filter: invert(52%) sepia(50%) saturate(2331%) hue-rotate(244deg) brightness(94%) contrast(78%); }
.dxp-btn-holder { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; gap: 20px; width: 80%; margin: 0 auto; }
.dxp-btn { width: 450px; margin: auto; border: 2px solid #C569D8 !important; padding: 20px; font-size: 25px !important; background: rgba(0, 0, 0, 0.5); }
.dxp-text { position: absolute; left: 0; right: 0; top: 320px; }
.dxp-header { color: white; font-size: 40px; margin-top: -30px; }
.dxp-info { color: white; font-size: 16px; margin-top: 33px; }

.dropsHl { position: relative; color: #fff; display: inline-block; margin-left: 7px; margin-bottom: -10px; vertical-align: top; }
.dropsCols { display: inline-block; scroll-behavior: smooth; width: auto; white-space: nowrap; overflow-x: scroll; position: relative; scrollbar-width: none; -ms-overflow-style: none; max-width: 585px; width: 585px; }
.dropsCols::-webkit-scrollbar { width: 0; height: 0; }
.dropsSliderH { width: 40px; padding: 2.5px; vertical-align: top; display: inline-block; }
.dropsSliderBtn { box-sizing: border-box; height: 190px; padding: 2px; border: 2px solid rgba(255, 255, 255, 0.5); background: rgba(0, 0, 0, 0.5); border-radius: 4px; position: relative; cursor: pointer; }
.dropsSliderBtn:hover { border: 2px solid rgba(255, 255, 255, 0.6); background: rgba(0, 0, 0, 0.6); }
.dropsSliderBtn:active { background: rgba(0, 0, 0, 0.75); border: 2px solid rgba(255, 255, 255, 0.75); }
.dropsSliderBtn.disabled { background: rgba(0, 0, 0, 0.5); border: 2px solid rgba(255, 255, 255, 0.5); opacity: 0.5; cursor: default; }
.dropsSliderArrow { width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-right: 20px solid white; top: 50%; position: absolute; left: 50%; transform: translate(-50%, -50%); }
.dropsSliderArrow.right { transform: translate(-50%, -50%) matrix(-1, 0, 0, 1, 0, 0); }
.dropsPopHeader { border-color: #9661f7!important; margin-bottom: 30px!important; border-top-left-radius: 10px; border-top-right-radius: 10px; }
.dropImg { height: 150px; position: absolute; image-rendering: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all .15s ease-in-out; z-index: -1; }
.dropImgP { height: 50px; position: absolute; image-rendering: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; transition: all .15s ease-in-out; z-index: -1; }
.dropsCol { width: 190px; padding: 2.5px; display: inline-block; }
.dropCard { pointer-events: auto; cursor: pointer; padding: 10px; height: calc(215px * .75); vertical-align: top; background-color: rgba(0, 0, 0, 0.6); border-radius: 4px; position: relative; z-index: 1; }
.dropTxt { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color: #fff; }
.dropsActive { font-size: 26px; color: #9661f7; }
.custPremReq { font-size: 12px; width: 100%; text-align: center; vertical-align: top; color: #eee; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -40%); }
.classLimitIcon { position: relative; z-index: 1; top: 2px; width: 35px; margin-right: 10px; pointer-events: none; image-rendering: pixelated; }
.endBpInfo { cursor: pointer; pointer-events: all; height: 25px; padding: 14px; margin: -17px -9px; }
.endBpInfo:hover { transform: scale(0.95); }
.shopSpinValL { font-size: 30px; color: #FFC147; width: 514px; text-align: center; pointer-events: none; position: relative; text-shadow: 0px 0px 30px rgb(0 0 0); }
.shopSpinValH { font-size: 38px; position: absolute; bottom: 16px; z-index: 6; margin-left: -5px; text-shadow: 0px 0px 30px #000, 0px 0px 3px #000, 0px 0px 6px #000; }
.shopSpinImg { position: absolute; background-size: cover; top: 10px; left: 50%; width: 345px; height: 345px; transform: translateX(-50%); filter: drop-shadow(0 0 40px rgba(0, 0, 0, 0.4)); transition: all .2s; }
.shopSideSellB:hover .shopImg { transform: translateX(-50%) scale(1.1); }

.rewItemHolder { cursor: pointer; pointer-events: auto; color: #fff; margin-bottom: 4px; margin-left: 2px; margin-right: 2px; padding: 5px; padding-top: 2px; width: 120px; height: 120px; vertical-align: top; background-color: rgba(0, 0, 0, 0.5); border-radius: 5px; display: inline-block; position: relative; z-index: 1; border: 1px solid white; }
.rewItemHolder:hover { opacity: 0.75; }
.rewItemImg, .rewCardImg, .rewJunkImg { width: 120px; position: relative; image-rendering: auto; }
.rewJunkImg { height: 120px; }
.rewCardImg { transform: translateY(-50%); top: 50%; }
.rewItemSprayImg { cursor: pointer; pointer-events: auto; color: #fff; width: 119px; height: 120px; z-index: 1; background-size: cover !important; image-rendering: auto; }
.rewItemN { position: absolute; bottom: 5px; font-size: 10px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: inherit; color: #fff; text-align: left; }
.rewItemCnt { position: absolute; top: 5px; right: 6px; font-size: 10px; color: #fff; }
#rewardTable { display: grid; text-align: center; grid-template-columns: repeat(7, 137px); background-color: rgba(0, 0, 0, 0.2); padding: 10px; border-radius: 6px; }

#bottomLeftPlayer { border-radius: 4px; background-color: var(--div-black); display: inline-grid; grid-template-columns: auto 250px auto; }
#bottomLeftPlayerLeft { width: 90px; height: 90px; display: inline-block; background-color: var(--div-grey); margin: 3px; }
#bottomLeftPlayerMid { display: grid; align-content: center; grid-template-rows: auto auto; grid-gap: 3px; }
#bottomLeftPlayerRight { padding: 3px; padding-right: 7px; padding-left: 9px; background-color: var(--div-grey); margin: 3px; display: grid; align-content: space-evenly; justify-content: center; align-items: center; justify-items: center; }
#bottomLeftTeamHolder { display: grid; grid-auto-flow: column; grid-template-columns: 66px 181px; grid-gap: 3px; justify-content: center; }
#bottomLeftTeamType { z-index: 2; font-size: 12px; color: #fff; display: inline-block; padding: 9px; padding-left: 10px; padding-right: 10px; background-color: var(--div-grey); text-align: center; }
#bottomLeftTeamName { z-index: 2; font-size: 16px; color: #fff; display: inline-block; padding: 6px; padding-left: 10px; background-color: var(--div-grey); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.greyInner, .greyInlineInner, .greyInlineInnerMid { margin: 3px; background-color: var(--div-grey); padding: 5px; }
.greyInlineInner { display: inline-block; }
.greyInlineInnerMid { margin: 3px 0px; }
#voiceIcon { color: #fff; font-size: 36px; display: inline-block; }
.divDisabled { display: none !important; }
#topLeftData { vertical-align: top; display: inline-block; width: 400px; }
#topLeftAdHolder { display: flex; flex-direction: row; gap: 8px; pointer-events: all; }
#topRightAdHolder { pointer-events: all; }
.abTestsPop { pointer-events: auto; border-radius: 4px; background-color: #353535; padding: 15px; text-align: left; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%); color: #fff; width: 900px; max-height: 600px; overflow-y: auto; overflow-x: hidden; box-shadow: 2px 2px 8px rgb(0 0 0 / 50%); font-size: 20px; }
.abTestsPop > table { padding: 10px; margin-top: 20px; width: 100%; text-align: left; border-radius: 4px; height: min-content; vertical-align: top; background-color: rgba(0, 0, 0, .4); display: table; border-spacing: 0px; border-collapse: collapse; }
.registerGiftPop { padding: 15px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -51%); color: #fff; height: 580px; width: 1000px; background: #353535; border: 1px solid #FFFFFF; box-shadow: 0px 0px 30px rgba(255, 199, 0, 0.5), inset 0px 0px 4px rgba(255, 199, 0, 0.3); border-radius: 4px; }
.ftueUnlockClasses { font-size: 24px; cursor: pointer; background-color: rgba(0, 0, 0, 0.3); padding: 10px; border-radius: 4px; margin-top: 10px; }
.ftueUnlockClasses:hover { transform: scale(1.02); background-color: rgba(0, 0, 0, 0.5); }
.pHoldNotif { width: calc(100% - 43px); background: #9d28289c; color: #fff1f1 !important; font-size: 25px; margin-top: 10px; margin-bottom: 10px; margin-left: 10px; padding: 10px; padding-top: 30px; padding-bottom: 30px; border-radius: 5px; text-align: center; }

.rankedQueueModal { pointer-events: auto; border-radius: 6px; background-color: #353535; text-align: left; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; width: 985px; height: 400px; border: 4px solid #5ce05a; box-shadow: 0 0 160px #5ce05a75; }
.rankedMenuModal { pointer-events: auto; border-radius: 6px; background-color: #353535; text-align: left; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; width: 1100px; height: 840px; }
#menuBtnRanked { border: 4px solid #7ce87a !important; }
#menuBtnRanked:hover { border: 4px solid #ffffff !important; }
.registerRewardsPop { pointer-events: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.communityPopup { pointer-events: auto; border-radius: 6px; background-color: #353535; text-align: left; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; width: 1200px; }
.tutorialPopup { position: absolute; width: 90%; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: auto; border-radius: 6px; background-color: #353535; }
.defaultModal { pointer-events: auto; border-radius: 6px; background-color: #353535; text-align: left; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; width: 1300px; height: 840px; }
.krunkCupJoinModal { pointer-events: auto; border-radius: 6px; background-color: #353535; text-align: left; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; width: 620px; }
.krunkCupViewModal { pointer-events: auto; border-radius: 6px; background-color: #353535; text-align: left; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; width: 560px; max-height: 88vh; overflow-y: auto; }
.exchangeModal { pointer-events: auto; border-radius: 6px; background-color: #353535; text-align: left; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; width: 1580px; height: 860px; overflow: visible; }
.itemsModal { pointer-events: auto; border-radius: 6px; background-color: #353535; text-align: left; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; width: 1100px; height: 820px; overflow: visible; }
.socialModal { pointer-events: auto; border-radius: 6px; background-color: #353535; text-align: left; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; width: 980px; height: 820px; overflow: visible; }
.lotteryModal { border-radius: 0; }

.twitchConPop { pointer-events: auto; border-radius: 10px; background-color: rgba(0, 0, 0, 0.75); padding: 15px; text-align: left; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1.2); color: #fff; width: 500px; border: solid 2px; }
.twitchLinkPop { pointer-events: auto; border-radius: 10px; background-color: rgba(0, 0, 0, 0.75); padding: 15px; text-align: left; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1.5); color: #fff; width: 250px; border: solid 2px; }
.twitchLoginBtn { padding: 5px; background-color: #6441a5; color: #f8f9fa; text-align: center; border-radius: 4px; width: 230px; display: inline-block; cursor: pointer; pointer-events: all; margin-left: 5px; margin-right: 5px; }
.twitchLoginBtn:hover { background-color: #483371; }
.accountTwitchInput { width: 100%; padding: 5px; padding-left: 10px; font-size: 22px; box-sizing: border-box; border-radius: 4px; margin-top: 20px; border: solid 2px #6441a5; }
.twitchSuccess { color: #f8f9fa; text-align: center; width: 100%; padding-top: 5px; padding-bottom: 5px; display: inline-block; }

.moreKrunkerPopup { pointer-events: auto; border-radius: 6px; background-color: #353535; text-align: left; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; width: 1112px; height: 512px; }