@font-face {
    font-family: 'Nexa';
    src: url(http://void.idle.host/font/nexa_bold-webfont.woff2) format('woff2'),
    url(http://void.idle.host/font/nexa_bold-webfont.woff) format('woff');
         unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

:root {
	/* Purple (Default) */
	/* --base-hue: 266 */

	/* Yellow */
	/* --base-hue: 43 */

	/* Blue */
	 --base-hue: 200 

	/* Green */
	/* --base-hue: 115 */

	/* Pink */
	/* --base-hue: 333 */
}

#pingDisplay .material-icons {
    font-size: 1vw
}

#livesCount .material-icons {
    font-size: 2vw !important
}

#spectCount .material-icons {
    font-size: 2vw !important
}

.material-icons {
    font-family: 'Material Icons' !important;
    font-size: 24px;
    font-style: normal !important;
    font-weight: 400 !important
}

* {
	color: #fff;
	font-family: Nexa !important;
}

element.style {
	color: hsl(var(--base-hue), 100%, 70%);
}

.redVouchBtn {
	background-color: hsl(var(--base-hue), 100%, 70%);
}

.customUtility {
	color: hsl(var(--base-hue), 100%, 70%);
}

.slider {
	background-color: hsl(var(--base-hue), 50%, 20%);
}

input:checked+.slider {
	background-color: hsl(var(--base-hue), 1000%, 70%);
}

.sliderVal {
	background-color: hsl(var(--base-hue), 100%, 70%);
}

.sliderM {
	background-color: hsla(var(--base-hue), 10%, 10%, .5);
}

#chatInput {
	background-color: hsla(var(--base-hue), 10%, 15%, .4)
}

#chatInput::placeholder {
	color: hsl(var(--base-hue), 10%, 60%)
}

#menuItemContainer {
	background-color: hsla(var(--base-hue), 10%, 15%, .75)
}

#menuWindow b {
	color: hsla(var(--base-hue), 40%, 80%, .6) !important
}

#menuWindow, .stickyHeader>div {
	background-color: hsl(var(--base-hue), 10%, 15%)
}

#menuWindow>div,
#menuWindow span:not([class]),
#menuKRCount {
	color: #fff !important
}

#watermark {
	color: hsl(var(--base-hue), 0%, 0%) !important
}

.button {
	background-color: hsl(var(--base-hue), 100%, 70%);
	box-shadow: 0 3px hsl(var(--base-hue), 50%, 20%), 0 4px 3px rgba(0, 0, 0, .25)
}

.button:active {
	transform: translateY(2px);
	box-shadow: 0 1px hsl(var(--base-hue), 50%, 20%), 0 2px 3px rgba(0, 0, 0, .25) !important
}

.button:focus {
	background-color: hsl(var(--base-hue), 50%, 20%)
}

.button:hover {
	background-color: hsl(var(--base-hue), 50%, 20%);
	box-shadow: 0 1px 0 0 hsl(var(--base-hue), 50%, 20%), 0 2px 3px rgba(0, 0, 0, .25) !important
}

.buttonP {
	background-color: hsl(var(--base-hue), 100%, 70%) !important;
	box-shadow: 0 3px hsl(var(--base-hue), 50%, 20%), 0 4px 3px rgba(0, 0, 0, .25) !important
}

.buttonP:active {
	transform: translateY(2px);
	box-shadow: 0 1px hsl(var(--base-hue), 50%, 20%), 0 2px 3px rgba(0, 0, 0, .25) !important
}

.buttonP:focus {
	background-color: hsl(var(--base-hue), 100%, 70%) !important
}

.buttonP:hover {
	background-color: hsl(var(--base-hue), 50%, 20%) !important
}

.buttonR {
	background-color: hsl(var(--base-hue), 100%, 70%) !important;
	box-shadow: 0 3px hsl(var(--base-hue), 50%, 20%), 0 4px 3px rgba(0, 0, 0, .25) !important
}

.buttonR:active {
	transform: translateY(2px);
	box-shadow: 0 1px hsl(var(--base-hue), 50%, 20%), 0 2px 3px rgba(0, 0, 0, .25) !important
}

.buttonR:focus {
	background-color: hsl(var(--base-hue), 50%, 20%) !important
}

.buttonR:hover {
	background-color: hsl(var(--base-hue), 50%, 20%) !important
}

.buttonG {
	background-color: hsl(var(--base-hue), 100%, 70%) !important;
	box-shadow: 0 3px hsl(var(--base-hue), 50%, 20%), 0 4px 3px rgba(0, 0, 0, .25) !important
}

.buttonG:active {
	transform: translateY(2px);
	box-shadow: 0 1px hsl(var(--base-hue), 50%, 20%), 0 2px 3px rgba(0, 0, 0, .25) !important
}

.buttonG:focus {
	background-color: hsl(var(--base-hue), 50%, 20%) !important
}

.buttonG:hover {
	background-color: hsl(var(--base-hue), 50%, 20%) !important
}

.chatItem {
	background-color: hsla(var(--base-hue), 10%, 15%, .2)
}

.clsXPBarC {
	background-color: hsl(var(--base-hue), 100%, 70%)
}

.headerBar {
	background-image: linear-gradient(hsla(var(--base-hue), 50%, 45%, .48), hsla(var(--base-hue), 50%, 45%, .5) 37.5%, hsla(var(--base-hue), 50%, 45%, .5) 50%, hsla(var(--base-hue), 50%, 45%, .5) 0, hsla(var(--base-hue), 50%, 45%, .5))
}

.joinQueue {
	background-color: hsl(var(--base-hue), 50%, 45%);
	color: #fff;
	box-shadow: none
}

.joinQueue:active,
.joinQueue:focus,
.joinQueue:hover {
	background-color: hsl(var(--base-hue), 100%, 70%);
	box-shadow: none
}

.menuItem:hover {
	border-right: 5px solid hsl(var(--base-hue), 100%, 70%)
}

.progressBar,
.clsXPBar {
	background-color: hsl(var(--base-hue), 10%, 10%)
}

.progressBarInner,
.xpBarB {
	background-color: hsl(var(--base-hue), 100%, 70%)
}

.purBtn {
	background-color: hsla(var(--base-hue), 100%, 70%, .5)
}

.selctBtn,
.selctInfoBtn {
	background-color: hsl(var(--base-hue), 50%, 45%)
}

.selctBtn:active,
.selctBtn:focus,
.selctBtn:hover,
.selctInfoBtn:active,
.selctInfoBtn:focus,
.selctInfoBtn:active {
	background-color: hsl(var(--base-hue), 100%, 70%)
}

.settName.b {
	color: #fff !important
}

.shopSale {
	color: hsl(var(--base-hue), 100%, 70%)
}

.terms:hover,
.rankedParty,
.strmLink,
.strmViews {
	color: hsl(var(--base-hue), 40%, 80%)
}

.xpBar {
	background-color: hsla(var(--base-hue), 10%, 10%, .75)
}

a, .terms {
	color: hsl(var(--base-hue),40%,80%);
}

input,
.inputGrey,
.inputGrey2:not(.menuLink),
.smlInput {
	color: #fff;
	background-color: hsla(var(--base-hue), 10%, 10%, .5)
}

input::placeholder,
.settName:not(.b),
.settNameSmall {
	color: hsl(var(--base-hue), 10%, 60%)
}