/* MAIN */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
	--site-color-text: #f6f8fa;
	--site-color-main: #2cd4c5;
	--site-color-main-light: #bdebe6;
	--site-color-main-transparent: rgba(44, 212, 197, 0.2);
    --site-color-bg-body: #0b1118;
    --site-color-bg-dark: #111826;
    --site-color-bg-light: #1a2332;
	--site-color-bg-active: #202b3c;
	--site-color-bg-dark-transparent: rgba(17, 24, 38, 0.72);
	--site-color-bg-light-transparent: rgba(26, 35, 50, 0.64);
	
	--site-color-success: #2ee36f;
    --site-color-warning: #f6c453;
    --site-color-danger: #ff5f56;
    --site-color-info: #4ba3d3;
	
	--site-color-success-transparent: rgba(46, 227, 111, 0.5);
    --site-color-warning-transparent: rgba(246, 196, 83, 0.5);
    --site-color-danger-transparent: rgba(255, 95, 86, 0.5);
	
	--site-color-blue: #5b8bd9;
    --site-color-indigo: #3f6dd6;
    --site-color-purple: #4d6bff;
    --site-color-pink: #ff6aa9;
    --site-color-red: #ff5f56;
    --site-color-crimson: #ed143d;
	--site-color-orange: #ff9b3d;
    --site-color-yellow: #f6c453;
    --site-color-green: #2ee36f;
    --site-color-teal: #20c997;
    --site-color-cyan: #17a2b8;
    --site-color-white: #fff;
    --site-color-gray: #6c757d;
    --site-color-gray-light: #b8b8b8;
    --site-color-gray-dark: #343a40;
    --site-color-dark: #252525;
	
	--site-color-google: #ffffff;
    --site-color-facebook: #3b5998;
    --site-color-steam: #171a21;
    --site-color-twitter: #009ded;
	
	--site-color-level-steel: #77726d;
	--site-color-level-bronze: #d19f69;
	--site-color-level-silver: #bdc5d1;
	--site-color-level-gold: #fad84e;
	--site-color-level-diamond: #4eb2fa;

	--site-font-body: "DM Sans", sans-serif;
	--site-font-display: "Space Grotesk", sans-serif;

	--site-glass-bg: rgba(17, 24, 38, 0.65);
	--site-glass-bg-strong: rgba(17, 24, 38, 0.78);
	--site-glass-border: rgba(255, 255, 255, 0.08);
	--site-glass-highlight: rgba(255, 255, 255, 0.2);
	--site-glass-shadow: 0 18px 60px rgba(4, 9, 16, 0.45);
}

:root {
	--site-chat-width: 275px; /* 275px */
	--site-header-row-top-height: 30px;
	--site-header-row-bottom-height: 50px;
}

* {
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.rb:hover {
	opacity: .6;
}

input, input.focus, input:focus, textarea, textarea.focus, textarea:focus, button, button.focus, button:focus {
    color: var(--site-color-text);
    border: none;
	outline: unset;
	-moz-box-shadow: unset;
	-webkit-box-shadow: unset;
	box-shadow: unset;
	font-family: var(--site-font-body);
}


::-webkit-scrollbar {
	width: 9px;
}

::-webkit-scrollbar-track {
	border-radius: 100px;
	background: rgba(93, 103, 112, 0.1);
}

::-webkit-scrollbar-thumb {
	border-radius: 100px;
	background: rgba(93, 103, 112, 0.3);
}

::-webkit-scrollbar-thumb:hover {
	background: rgba(93, 103, 112, 0.4);
}

::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(93, 103, 112, 0.1);
}

body {
	font-family: var(--site-font-body);
    color: var(--site-color-text);
    z-index: 50;
    background: radial-gradient(1200px circle at 10% -20%, rgba(44, 212, 197, 0.2), transparent 60%),
		radial-gradient(900px circle at 85% -10%, rgba(246, 196, 83, 0.18), transparent 55%),
		radial-gradient(1000px circle at 50% 120%, rgba(75, 163, 211, 0.18), transparent 65%),
		var(--site-color-bg-body);
    /*background: url(../img/bg.png) no-repeat 0 0 var(--site-color-bg-body);*/
    background-size: cover;
    background-attachment: fixed;
	font-size: 14px;
	width: 100%;
	padding: 0;
	margin: 0;
	position: relative;
	min-height: 100vh;
}

body::before,
body::after {
	content: "";
	position: fixed;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	filter: blur(55px);
	opacity: 0.6;
	pointer-events: none;
	z-index: 0;
}

body::before {
	top: -180px;
	left: -120px;
	background: radial-gradient(circle, rgba(44, 212, 197, 0.55), transparent 70%);
}

body::after {
	top: 20px;
	right: -200px;
	background: radial-gradient(circle, rgba(246, 196, 83, 0.45), transparent 70%);
}

body > div.flex.column.height-full.width-full {
	position: relative;
	z-index: 1;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--site-font-display);
	letter-spacing: -0.01em;
}

a {
	color: var(--site-color-text) !important;
	text-decoration: none !important;
}

a:hover {
	color: var(--site-color-main) !important;
}

.snowflake {
	color: #fff;
	font-size: 1em;
	font-family: Arial, sans-serif;
  }
  
  @-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}



.disabled {
	cursor: no-drop !important;
	opacity: 0.5;
}

.disabled:active {
    pointer-events: none !important;
}

.disabled > * {
	pointer-events: none !important;
}

.items-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.items-start {
    -webkit-box-align: flex-start;
    -ms-flex-align: flex-start;
    align-items: flex-start;
}

.items-end {
    -webkit-box-align: flex-end;
    -ms-flex-align: flex-end;
    align-items: flex-end;
}

.justify-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.justify-start {
    -webkit-box-pack: flex-start;
    -ms-flex-pack: flex-start;
    justify-content: flex-start;
}

.justify-end {
    -webkit-box-pack: flex-end;
    -ms-flex-pack: flex-end;
    justify-content: flex-end;
}

.justify-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.text-shadow {
	-webkit-text-shadow: -2px 2px 5px rgba(0,0,0,0.5);
	-moz-text-shadow: -2px 2px 5px rgba(0,0,0,0.5);
	text-shadow: -2px 2px 5px rgba(0,0,0,0.5);
}

.text-center {
    text-align: -webkit-center;
    text-align: -moz-center;
	text-align: center;
}

.text-left {
    text-align: -webkit-left;
    text-align: -moz-left;
	text-align: left;
}

.text-right {
    text-align: -webkit-right;
    text-align: -moz-right;
	text-align: right;
}

.text-upper {
	text-transform: uppercase;
}

.text-lower {
	text-transform: lowercase;
}

.text-bold {
	font-weight: bold;
}

.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.flex.row {
	-webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}

.flex.column { 
	-webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.grid {
    display: -ms-grid;
    display: grid;
}

.grid.split-column-full { grid-template-columns: repeat( auto-fit, minmax(0px, 1fr)); }

.grid.split-column-2.gap-1 { grid-template-columns: calc((100% - 1 * 5px) / 2) calc((100% - 1 * 5px) / 2); }
.grid.split-column-3.gap-1 { grid-template-columns: calc((100% - 2 * 5px) / 3) calc((100% - 2 * 5px) / 3) calc((100% - 2 * 5px) / 3); }
.grid.split-column-4.gap-1 { grid-template-columns: calc((100% - 3 * 5px) / 4) calc((100% - 3 * 5px) / 4) calc((100% - 3 * 5px) / 4) calc((100% - 3 * 5px) / 4); }

.grid.split-column-2.gap-2 { grid-template-columns: calc((100% - 1 * 10px) / 2) calc((100% - 1 * 10px) / 2); }
.grid.split-column-3.gap-2 { grid-template-columns: calc((100% - 2 * 10px) / 3) calc((100% - 2 * 10px) / 3) calc((100% - 2 * 10px) / 3); }
.grid.split-column-4.gap-2 { grid-template-columns: calc((100% - 3 * 10px) / 4) calc((100% - 3 * 10px) / 4) calc((100% - 3 * 10px) / 4) calc((100% - 3 * 10px) / 4); }

.grid.split-column-2.gap-3 { grid-template-columns: calc((100% - 1 * 15px) / 2) calc((100% - 1 * 15px) / 2); }
.grid.split-column-3.gap-3 { grid-template-columns: calc((100% - 2 * 15px) / 3) calc((100% - 2 * 15px) / 3) calc((100% - 2 * 15px) / 3); }
.grid.split-column-4.gap-3 { grid-template-columns: calc((100% - 3 * 15px) / 4) calc((100% - 3 * 15px) / 4) calc((100% - 3 * 15px) / 4) calc((100% - 3 * 15px) / 4); }

.in-grid {
	grid-column-start: 1;
    grid-column-end: none;
	grid-row-start: 1;
    grid-row-end: none;
}

.inline-block {
    display: inline-block;
}

.inline-table {
    display: inline-table;
}

.inline-grid {
    display: inline-grid;
}

.overflow-a { overflow: auto; }
.overflow-h { overflow: hidden; }

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.top-0 { top: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }

.ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.float-left{
	float: left;
}

.float-right{
	float: right;
}

.m-1 { margin: 5px; } 
.m-2 { margin: 10px; }
.m-3 { margin: 15px; }
.m-4 { margin: 20px; }

.m-a { margin: auto; }

.mb-1 { margin-bottom: 5px; }
.mb-2 { margin-bottom: 10px; }
.mb-3 { margin-bottom: 15px; }
.mb-4 { margin-bottom: 20px; }

.mt-1 { margin-top: 5px; }
.mt-2 { margin-top: 10px; }
.mt-3 { margin-top: 15px; }
.mt-4 { margin-top: 20px; }

.ml-1 { margin-left: 5px; }
.ml-2 { margin-left: 10px; }
.ml-3 { margin-left: 15px; }

.mr-1 { margin-right: 5px; }
.mr-2 { margin-right: 10px; }
.mr-3 { margin-right: 15px; }
.mr-4 { margin-right: 20px; }

.p-0 { padding: 0px !important; }
.p-1 { padding: 5px; }
.p-2 { padding: 10px; }
.p-3 { padding: 15px; }
.p-4 { padding: 20px; }

.pb-0 { padding-bottom: 0px !important; }
.pb-1 { padding-bottom: 5px; }
.pb-2 { padding-bottom: 10px; }
.pb-3 { padding-bottom: 15px; }
.pb-4 { padding-bottom: 20px; }

.pt-0 { padding-top: 0px !important; }
.pt-1 { padding-top: 5px; }
.pt-2 { padding-top: 10px; }
.pt-3 { padding-top: 15px; }
.pt-4 { padding-top: 20px; }

.pl-0 { padding-left: 0px !important; }
.pl-1 { padding-left: 5px; }
.pl-2 { padding-left: 10px; }
.pl-3 { padding-left: 15px; }
.pl-4 { padding-left: 20px; }

.pr-0 { padding-right: 0px !important; }
.pr-1 { padding-right: 5px; }
.pr-2 { padding-right: 10px; }
.pr-3 { padding-right: 15px; }
.pr-4 { padding-right: 20px; }

.transition-1 {
	-webkit-transition: all 100ms;
	-moz-transition: all 100ms;
	transition: all 100ms;
}

.transition-2 {
	-webkit-transition: all 200ms;
	-moz-transition: all 200ms;
	transition: all 200ms;
}

.transition-5 {
	-webkit-transition: all 500ms;
	-moz-transition: all 500ms;
	transition: all 500ms;
}

.transition-10 {
	-webkit-transition: all 1000ms;
	-moz-transition: all 1000ms;
	transition: all 1000ms;
}

.transition-1.linear, .transition-5.linear, .transition-10.linear {
	-webkit-transition-timing-function: linear;
	-moz-transition-timing-function: linear;
	transition-timing-function: linear;
}

.rounded-full{ border-radius: 50%; }
.rounded-0{ border-radius: 0.25rem; }
.rounded-1{ border-radius: 0.5rem; }
.rounded-2{ border-radius: 1rem; }

.b-d1{ border: solid 1px var(--site-color-bg-dark); }
.b-d2{ border: solid 2px var(--site-color-bg-dark); }
.b-d4{ border: solid 4px var(--site-color-bg-dark); }

.b-l1{ border: solid 1px var(--site-color-bg-light); }
.b-l2{ border: solid 2px var(--site-color-bg-light); }
.b-l4{ border: solid 4px var(--site-color-bg-light); }

.b-m1{ border: solid 1px var(--site-color-main); }
.b-m2{ border: solid 2px var(--site-color-main); }
.b-m4{ border: solid 4px var(--site-color-main); }

.bl-d2{ border-left: solid 2px var(--site-color-bg-dark); }
.br-d2{ border-right: solid 2px var(--site-color-bg-dark); }
.bt-d2{ border-top: solid 2px var(--site-color-bg-dark); }
.bb-d2{ border-bottom: solid 2px var(--site-color-bg-dark); }

.bl-l2{ border-left: solid 2px var(--site-color-bg-light); }
.br-l2{ border-right: solid 2px var(--site-color-bg-light); }
.bt-l2{ border-top: solid 2px var(--site-color-bg-light); }
.bb-l2{ border-bottom: solid 2px var(--site-color-bg-light); }

.bl-d4{ border-left: solid 4px var(--site-color-bg-dark); }
.br-d4{ border-right: solid 4px var(--site-color-bg-dark); }
.bt-d4{ border-top: solid 4px var(--site-color-bg-dark); }
.bb-d4{ border-bottom: solid 4px var(--site-color-bg-dark); }

.bl-l4{ border-left: solid 4px var(--site-color-bg-light); }
.br-l4{ border-right: solid 4px var(--site-color-bg-light); }
.bt-l4{ border-top: solid 4px var(--site-color-bg-light); }
.bb-l4{ border-bottom: solid 4px var(--site-color-bg-light); }

.text-indent-0 { text-indent: 0px; }
.text-indent-1 { text-indent: 30px; }
.text-indent-2 { text-indent: 60px; }

.text-space-1 { letter-spacing: 5px; }
.text-space-2 { letter-spacing: 10px; }

.coins {
    height: 25px;
    width: 25px;
    display: inline-flex;
    vertical-align: middle;
    background: url(../img/coins.png) no-repeat 50% 50%;
    background-size: contain;
}

.bg-main-transparent {
	background: linear-gradient(135deg, rgba(44, 212, 197, 0.18), rgba(75, 163, 211, 0.12));
}

.bg-light {
	background: var(--site-glass-bg);
	border: 1px solid var(--site-glass-border);
	box-shadow: var(--site-glass-shadow);
	backdrop-filter: blur(16px) saturate(140%);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
}

.bg-light-transparent {
	background: var(--site-color-bg-light-transparent);
	border: 1px solid var(--site-glass-border);
	backdrop-filter: blur(14px) saturate(135%);
	-webkit-backdrop-filter: blur(14px) saturate(135%);
}

.bg-dark {
	background: var(--site-glass-bg-strong);
	border: 1px solid var(--site-glass-border);
	box-shadow: var(--site-glass-shadow);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
}

.bg-dark-transparent {
	background: var(--site-color-bg-dark-transparent);
	border: 1px solid var(--site-glass-border);
	backdrop-filter: blur(14px) saturate(135%);
	-webkit-backdrop-filter: blur(14px) saturate(135%);
}

.bg-danger {
	background: var(--site-color-danger);
}

.bg-success {
	background: var(--site-color-success);
}

.bg-info {
	background: var(--site-color-info);
}

.bg-warning {
	background: var(--site-color-warning);
}

.title-page{
	color: var(--site-color-main);
	font-size: 18px;
	width: 100%;
	text-transform: uppercase;
}

.title-page:before, .title-page:after {
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	content: "";
	width: 20px;
	height: 3px; 
	background: var(--site-color-main);
	margin-left: 10px;
	margin-right: 10px;
}



.title{
	color: var(--site-color-gray-light);
	font-size: 14px;
}

.title:before, .title:after {
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	content: "";
	width: 50%;
	height: 2px; 
	background: var(--site-color-gray-light);
	margin-left: 10px;
	margin-right: 10px;
}



.title-panel {
    text-transform: capitalize;
    font-size: 14px;
    font-weight: bold;
    background: var(--site-color-main-transparent);
}

.hidden {
	display: none !important;
}

img {
	vertical-align: middle;
}

.width-0 { width: calc((100% / 12) * 0); }
.width-1 { width: calc((100% / 12) * 1); }
.width-2 { width: calc((100% / 12) * 2); }
.width-3 { width: calc((100% / 12) * 3); }
.width-4 {width: calc((100% / 12) * 2);}
.width-5 { width: calc((100% / 12) * 5); }
.width-6 { width: calc((100% / 12) * 6); }
.width-7 { width: calc((100% / 12) * 7); }
.width-8 { width: calc((100% / 12) * 8); }
.width-9 { width: calc((100% / 12) * 9); }
.width-10 { width: calc((100% / 12) * 10); }
.width-11 { width: calc((100% / 12) * 11); }
.width-12 { width: calc((100% / 12) * 12); }

.font-1 { font-size: calc(1 * 2px); }
.font-2 { font-size: calc(2 * 2px); }
.font-3 { font-size: calc(3 * 2px); }
.font-4 { font-size: calc(4 * 2px); }
.font-5 { font-size: calc(5 * 2px); }
.font-6 { font-size: calc(6 * 2px); }
.font-7 { font-size: calc(7 * 2px); }
.font-8 { font-size: calc(8 * 2px); }
.font-9 { font-size: calc(9 * 2px); }
.font-10 { font-size: calc(10 * 2px); }
.font-11 { font-size: calc(11 * 2px); }
.font-12 { font-size: calc(12 * 2px); }
.font-13 { font-size: calc(13 * 2px); }
.font-14 { font-size: calc(14 * 2px); }
.font-15 { font-size: calc(15 * 2px); }
.font-20 { font-size: calc(20 * 2px); }
.font-25 { font-size: calc(25 * 2px); }
.font-35 { font-size: calc(30 * 2px); }

.font-weight-1 { font-weight: 400; }
.font-weight-2 { font-weight: 700; }
.font-weight-3 { font-weight: 900; }

.alerts-panel{
	background-color: var(--site-color-bg-dark);
	border-top: solid 1px var(--site-color-main);
	color: var(--site-color-text);
	font-size: 12px;
	text-align: center;
	font-weight: bold;
	position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
	z-index: 4;
}

.demiss-alert {
	right: 10px;
    position: absolute;
    cursor: pointer;
}

.demiss-alert:hover {
	color: var(--site-text-color-light) !important;
}

.pullout {
    position: absolute;
    z-index: 2;
    height: 100%;
    border-right: solid 1px var(--site-glass-border);
	background: var(--site-glass-bg-strong);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
    -webkit-box-flex: 1;
    flex: 1 1 0%;
    overflow: hidden;
}

.pullout-left {
	width: 210px;
	left: -210px;
	box-shadow: 0 18px 22px -4px #00000069;
	/*width: var(--site-chat-width);*/
	/*left: calc(var(--site-chat-width) * (-1));*/
}

.pullout-right {
	width: 310px !important;
	right: -310px;
	/*width: var(--site-chat-width);*/
    /*right: calc(var(--site-chat-width) * (-1));*/
}

@media (max-width: 768px) {
	.pullout-right {
		right: -310px !important; /* todo */
	}
}

.chat-link-player { color: var(--site-color-text); }
.chat-content-player { border-left: 2px solid transparent; }
.chat-rank-player { background-color: transparent; }

.chat-link-owner { color: var(--site-color-red); }
.chat-content-owner {
	border-left: 2px solid var(--site-color-red);
	/*background: linear-gradient(90deg,rgba(222,76,65,.2),rgba(222,76,65,0));*/
}
.chat-rank-owner {
	background: linear-gradient( 
	45deg,#be0068,#ff58b4 40%,#be0068);
		color: #fff;
		text-shadow: 1px 1px 3px #323135;
}

.chat-link-admin { color: var(--site-color-main); }
.chat-content-admin, .chat-content-system { border-left: 2px solid var(--site-color-main);}
.chat-rank-admin, .chat-rank-system { background: linear-gradient( 
45deg,#3ca1d7,#013956 40%,#004b72);
    color: #fff;
    text-shadow: 1px 1px 3px #323135;
    text-transform: uppercase !important; }
.chat-link-system { color: #fff; }

.chat-link-moderator { color: var(--site-color-cyan); }
.chat-content-moderator { border-left: 2px solid var(--site-color-cyan); }
.chat-rank-moderator { background: linear-gradient( 
	45deg,#17a2b8,#00505c 40%,#004e5a);
		color: #fff;
		text-shadow: 1px 1px 3px #323135;
		text-transform: uppercase !important; }

.chat-link-streamer { color: var(--site-color-pink); }
.chat-content-streamer { border-left: 2px solid var(--site-color-pink); }
.chat-rank-streamer { background: linear-gradient( 
	45deg,#be0068,#ff58b4 40%,#be0068);
		color: #fff;
		text-shadow: 1px 1px 3px #323135;
		text-transform: uppercase !important;
}

.chat-link-veteran { color: var(--site-color-green); }
.chat-content-veteran { border-left: 2px solid var(--site-color-green);}
.chat-rank-veteran { background: linear-gradient( 
	45deg,#00c74d,#04ff65 40%,#2ca35a);
		color: #fff;
		text-shadow: 1px 1px 3px #323135;
		text-transform: uppercase !important; }

.chat-link-pro { color: var(--site-color-yellow); } 
.chat-content-pro { border-left: 2px solid var(--site-color-yellow); } 
.chat-rank-pro { background: linear-gradient( 
	45deg,#ffe063,#ffcc00 40%,#a38b2c);
		color: #fff;
		text-shadow: 1px 1px 3px #323135;
		text-transform: uppercase !important; }

.chat-link-youtuber { color: var(--site-color-orange); } 
.chat-content-youtuber { border-left: 2px solid var(--site-color-orange); } 
.chat-rank-youtuber{ background: linear-gradient( 
	45deg,#be2300,#ff6f6f 40%,#be0068);
		color: #fff;
		text-shadow: 1px 1px 3px #323135;
		text-transform: uppercase !important;
}

.chat-link-helper { color: var(--site-color-crimson); } 
.chat-content-helper { border-left: 2px solid var(--site-color-crimson); } 
.chat-rank-helper { background: linear-gradient( 
	45deg,#29ddb4,#36ffd1 40%,#1b5447);
		color: #fff;
		text-shadow: 1px 1px 3px #323135;
		text-transform: uppercase !important; }

.chat-link-developer { color: var(--site-color-teal); } 
.chat-content-developer { border-left: 2px solid var(--site-color-teal); } 
.chat-rank-developer { background-color: var(--site-color-teal); }

.text-success { color: var(--site-color-success) !important; }
.text-warning { color: var(--site-color-warning) !important; }
.text-danger { color: var(--site-color-danger) !important; }
.text-info { color: var(--site-color-info) !important; }

.text-gray { color: var(--site-color-gray-light) !important; }
.text-color { color: var(--site-color-main) !important; }
.text-default { color: var(--site-color-main-light) !important; }

.gap-1 { gap: 5px; }
.gap-2 { gap: 10px; }
.gap-3 { gap: 15px; }
.gap-4 { gap: 20px; }

@keyframes page-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

#page_content2 {
	animation: page-in 480ms ease both;
}

.main-panel{
	position: absolute;
    right: 0;
	left: 0;
	z-index: 0;
	height: 100%;
	overflow: auto;
	overflow-x: hidden;
	padding: 40px 80px;
	left: 210px;
}

@media (max-width: 768px) {
	.main-panel {
		position: initial;
		padding: 20px;
		width: 100%;
		float: left;
		height: auto;
	}

	.wrapper-page {
		flex: none !important;
		display: block;
	}

	div.pullout[data-pullout="chat"] {
		display: block;
		position: initial;
		width: calc(100% - 40px) !important;
		flex: none !important;
		bottom: 0;
		left: 0;
		right: 0;
		margin: 20px;
		float: left;
		height: 600px;
		transition: none;
		/*transform: translateY(-373px); /* 373 is height of footer */
		margin-top: -1073px;
		border-radius: 8px;
	}

	.chat-input-field {
		background-color: #202f34 !important;
	}

	.chat-group {
		height: calc(600px - 61px);
	}

	.footer {
		/*transform: translateY(600px); /* 600 is height of the footer */
		margin-top: 660px !important;
	}

	.main-panel {
		overflow: auto;
	}

	.pullout {
		z-index: 36;
	}
}

.site-button {
	
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    /*-ms-touch-action: manipulation;*/
    /*touch-action: manipulation;*/
    cursor: pointer;
    /*-webkit-user-select: none;*/
    /*-moz-user-select: none;*/
    /*-ms-user-select: none;*/
    user-select: none;
    line-height: 1.5;
    border-radius: 5px;
    padding: 7px 15px;
	background-color: transparent;
	transition: transform 200ms ease, box-shadow 200ms ease, filter 200ms ease;
}

.site-button.black {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    border-radius: 8px;
    padding: 0px 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    font-weight: 700;
    color: #0b1118;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    background-image: linear-gradient(135deg, rgba(44, 212, 197, 0.95), rgba(246, 196, 83, 0.95));
    box-shadow: 0 12px 26px rgba(44, 212, 197, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.site-button.black:hover {
	transform: translateY(-1px);
	filter: brightness(1.05);
	box-shadow: 0 16px 30px rgba(44, 212, 197, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.site-button.pink { background-color: rgb(41 149 84); }
.site-button.purple { background-color: var(--site-color-main); }
.site-button.green { background-color: var(--site-color-success); }
.site-button.orange { background-color: var(--site-color-warning); }
.site-button.red { background-color: var(--site-color-danger); }

.site-button i {
	line-height: 1.5;
}

.icon-small {
	height: 30px !important;
	width: 30px !important;
}

.icon-medium {
	height: 40px !important;
	width: 40px !important;
}

.icon-medium-31 {
	height: 31px !important;
	width: 31px !important;
}

.icon-large {
	height: 60px !important;
	width: 60px !important;
}

.icon-huge {
	height: 120px !important;
	width: 120px !important;
}

.icon-small img, .icon-medium img, .icon-large img, .icon-huge img {
	width: 100%;
	height: 100%;
}

.width-full { width: 100% !important;}
.width-0 { width: 0% !important;}

.height-full { height: 100% !important;}
.height-0 { height: 0% !important;}

.progress-container {
    background: rgba(15, 22, 34, 0.7);
	border: 1px solid var(--site-glass-border);
	position: relative;
	overflow: hidden;
}

.progress-container.small { height: 20px; }
.progress-container.medium { height: 35px; }
.progress-container.large { height: 50px; }

.progress-content {
    position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	font-size: 14px;
}

.progress-bar {
	float: left;
    height: 100%;
    background: var(--site-color-main);
}

.progress-container.small.meter .progress-bar {
	animation: meter 500ms linear infinite;
    background-image: linear-gradient(-45deg, rgba(255,255,255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255, 0.15) 50%, rgba(255,255,255, 0.15) 75%, transparent 75%) !important;
    background-size: 20px;
    background-repeat: repeat-x;
}

@keyframes meter {
	0% {
		background-position: 0px 0px;
	}
	100% {
		background-position: 20px 0px;
	}
}

@-webkit-keyframes meter {
    0% {
		background-position: 0px 0px;
	}
	100% {
		background-position: 20px 0px;
	}
}

.avatar-field .level { 
	border: solid 2px var(--site-color-bg-light); 
	color: var(--site-color-bg-light); 
}

.avatar-field.tier-steel .level { background: var(--site-color-level-steel);}
.avatar-field.tier-bronze .level { background: var(--site-color-level-bronze);}
.avatar-field.tier-silver .level { background: var(--site-color-level-silver);}
.avatar-field.tier-gold .level { background: var(--site-color-level-gold);}
.avatar-field.tier-diamond .level { background: var(--site-color-level-diamond);}

.avatar-field.tier-steel .avatar { border: solid 4px var(--site-color-level-steel);}
.avatar-field.tier-bronze .avatar { border: solid 4px var(--site-color-level-bronze);}
.avatar-field.tier-silver .avatar { border: solid 4px var(--site-color-level-silver);}
.avatar-field.tier-gold .avatar { border: solid 4px var(--site-color-level-gold);}
.avatar-field.tier-diamond .avatar { border: solid 4px var(--site-color-level-diamond);}

.sop-small-left, .sop-small-right, .sup-small-left, .sup-small-right {
	height: 14px;
	width: 14px;
	position: absolute;
    font-size: 8px;
	overflow: hidden;
	font-weight: bold;
}

.sop-medium-left, .sop-medium-right, .sup-medium-left, .sup-medium-right {
	height: 20px;
	width: 20px;
	position: absolute;
    font-size: 10px;
	overflow: hidden;
	font-weight: bold;
}

.sop-large-left, .sop-large-right, .sup-large-left, .sup-large-right {
	height: 30px;
	width: 30px;
	position: absolute;
    font-size: 14px;
	overflow: hidden;
	font-weight: bold;
}

.sop-huge-left, .sop-huge-right, .sup-huge-left, .sup-huge-right {
	height: 50px;
	width: 50px;
	position: absolute;
    font-size: 20px;
	overflow: hidden;
	font-weight: bold;
}

.sop-small-left img, .sop-small-right img, .sup-small-left img, .sup-small-right img,
.sop-medium-left img, .sop-medium-right img, .sup-medium-left img, .sup-medium-right img,
.sop-large-left img, .sop-large-right img, .sup-large-left img, .sup-large-right img,
.sop-huge-left img, .sop-huge-right img, .sup-huge-left img, .sup-huge-right img {
	height: 100%;
	width: 100%;
}

.sop-small-left {
	top: -4px;
	left: -4px;
}

.sop-small-right {
	top: -4px;
	right: -4px;
}

.sup-small-left {
	bottom: -4px;
	left: -4px;
}

.sup-small-right {
	bottom: -4px;
	right: -4px;
}

.sop-medium-left {
	top: -6px;
	left: -6px;
}

.sop-medium-right {
	top: -6px;
	right: -6px;
}

.sup-medium-left {
	bottom: -6px;
	left: -6px;
}

.sup-medium-right {
	bottom: -6px;
	right: -6px;
}

.sop-large-left {
	top: -8px;
	left: -8px;
}

.sop-large-right {
	top: -8px;
	right: -8px;
}

.sup-large-left {
	bottom: -8px;
	left: -8px;
}

.sup-large-right {
	bottom: -8px;
	right: -8px;
}

.sop-huge-left {
	top: -12px;
	left: -12px;
}

.sop-huge-right {
	top: -12px;
	right: -12px;
}

.sup-huge-left {
	bottom: -12px;
	left: -12px;
}

.sup-huge-right {
	bottom: -12px;
	right: -12px;
}

.hover-message {
    margin: auto;
    font-size: 14px;
    z-index: 0;
}

.hover-message .pointer{
	padding: 2px 4px;
	font-size: 10px;
	background: var(--site-color-white);
	color: var(--site-color-bg-dark);
	border-radius: 2px;
	z-index: 1;
}

.hover-message:before {
	content: "";
    width: 8px;
    height: 8px;
    background: var(--site-color-white);
    position: absolute;
    bottom: -4px;
    transform: rotateZ(45deg);
    transition: all 300ms;
}


.panel-histories {
	width: 100%;
	overflow: hidden;
	background-color: var(--site-color-bg-dark);
}

.panel-histories.small {
	height: 100px;
}

.panel-histories.medium {
	height: 125px;
}

.history-container.small {
    width: 150px;
    min-width: 150px;
}

.history-container.medium {
    width: 200px;
    min-width: 200px;
}

.history-container.success {
	border: 2px solid var(--site-color-success-transparent);
	background: linear-gradient(to top, var(--site-color-success-transparent) 0%, var(--site-color-bg-dark-transparent) 100%);
}

.history-container.danger {
	border: 2px solid var(--site-color-danger-transparent);
	background: linear-gradient(to top, var(--site-color-danger-transparent) 0%, var(--site-color-bg-dark-transparent) 100%);
}

.history-content {
    position: relative;
    width: 100%;
    height: 100%;
}

.history-content .image {
    position: absolute;
	top: 0;
}

.history-content .name {
    position: absolute;
	bottom: 15;
	font-size: 12px;
    width: 100%;
}

.history-content .price {
	position: absolute;
	bottom: 0;
	font-size: 10px;
    width: 100%;
}

.coins-mini {
    height: 15px;
    width: 15px;
    display: inline-flex;
    vertical-align: middle;
    background: url(../img/coins.png) no-repeat 50% 50%;
    background-size: contain;
}

.switch_panel.site-button.active{
	background-color: var(--site-color-bg-active) !important;
}

.pointer {
	cursor: pointer;
}

/* END MAIN */

/* LOADER */

.loader {
	position: relative;
	width: 65px;
}

.loader-part {
	height: 15px;
	width: 40px;
	background: transparent;
	position: absolute;
  
}

.loader-part, .loader-dot {
	animation-duration: 0.8s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

.loader-part-1 {
	left: 0;
}

.loader-part-2 {
	left: 25px
}

.loader-dot {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #ffffff;
	position: absolute;
}

.loader-dot-1 {
	left: 0px;  
}

.loader-dot-2 {
	right: 0px;
}

@keyframes loader-spin {
	0% { transform: rotate(0deg) }
	50% { transform: rotate(180deg) }
	100% { transform: rotate(180deg) }
}

@keyframes loader-hide {
	0% { opacity: 0; }
	49% { opacity: 0; }
	50% { opacity: 1; }
	100% { opacity: 1; }
}

.loader-part-1 {
	animation-name: loader-spin;
}

.loader-part-2 {
	animation-name: loader-spin;
	animation-direction: reverse;
}

.loader-part-1 .loader-dot-1 {
	opacity: 0;
	animation-name: loader-hide;
	animation-direction: reverse;
}

.loader-part-2 .loader-dot-2 {
	animation-name: loader-hide;
}

/* END LOADER */

/* FIRST */

#first_wellcome {
	z-index: 6;
}

/* END FIRST */

/* HEADER */

.header {
	width: 100%;
	background: rgba(12, 18, 28, 0.8);
	border-bottom: 1px solid var(--site-glass-border);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	box-shadow: 0 18px 40px rgba(5, 9, 16, 0.35);
	position: relative;
	top: 0;
	left: 0;
	z-index: 3;
}

.header-max .header.layout {
    display: grid;
    grid-template-columns: var(--site-chat-width) auto;
    grid-template-rows: var(--site-header-row-top-height) var(--site-header-row-bottom-height);
}

.header-min .header.layout {
	display: grid;
    grid-template-columns: 150px auto;
	grid-template-rows: 50px;
}

.logobg {
	position: absolute;
	left: 0;
	right: 0;
	width: unset;
	z-index: 6;
	width: 18%;
}

.header-max .header-logo {
	width: 100%;
	padding: 5px 10px;
	grid-row-start: 1;
	grid-row-end: span 2;
	display:flex;
	justify-content:center;
	align-items:center;
	height:100px; /* was 80 */
	position: relative;
	z-index: 7;
	/*margin: 15px 0 0;*/
	/* background: var(--site-color-bg-light); */
}

.header-min .header-logo {
	/*width: 100%;*/
	padding: 5px 10px;
}

.header-logo a, .header-logo img {
	/*height: 100%;*/
	/*width: calc(100% - 40px);*/
	/*width: 100%;*/
	transform: translateX(-8px);
}

.header-logo a {
	width: 100%;
}

@media (max-width: 768px) {
	.header-logo a, .header-logo img {
		width: unset;
		height: 26px;
		margin: 4px 0;
	}
}

.header-menu-bottom .header-menu-button {
	font-size: 12px;
    font-weight: 700;
}

.header-menu-top .header-menu-button {
	font-size: 12px;
    font-weight: 500;
}

.header-menu-center .header-menu-button {
	font-size: 12px;
	font-weight: 500;
	padding: 7px 0;
	float: left;
	width: 100%;
	background: rgba(18, 26, 36, 0.7);
	border: 1px solid var(--site-glass-border);
	backdrop-filter: blur(12px) saturate(130%);
	-webkit-backdrop-filter: blur(12px) saturate(130%);
	overflow: hidden;
	border-radius: .125rem;
	-webkit-transition: background-color .3s;
	transition: background-color .3s;
	margin-bottom: 1px;
	margin-top: 1px;
}

.header-menu-center .header-menu-button .header-side-button {
	font-size: 14px;
	-webkit-align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	height: 30px;
	width: 100%;
	text-align: center;
	display: flex;
	justify-content: center;
}

.sidebar-footer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
}

.header-menu-button.rewards {
	transform: translateX(-20px);
	width: calc(100% + 40px);
	padding: 9px 20px;
	margin: 0 0 5px;
	background: linear-gradient(90deg, rgba(246, 196, 83, 0.35), rgba(44, 212, 197, 0));
}

.header-side-button {
    cursor: pointer;
    color: rgb(113, 142, 152);
    font-weight: 600;

	/*text-transform: uppercase;*/
}

.header-side-button img,
.header-side-button i {
  /*filter: brightness(0) invert(1);*/
  height: 18px;
  width: 18px;
  /*opacity: .6;*/
  float: left;
  margin: 1px 0;
  margin-top: 1%;
}

.header-side-button i {
	font-size: 18px;
	color: #667b95;
}

.header-side-button .ml-1 {
	float: left;
	line-height: 22px;
	margin-left: 10px;
	
}

.header-side-button.active img{
    filter: unset;
    opacity: 1;
}

.header-side-button.active{
	border-left: 3px solid var(--site-color-main);
	border-radius: 0px 1px 1px 0px;
	opacity: 1;
	width: calc(100% + 42px);
	padding-left: 13px;
	/* margin: 0px 0px -4px -18px; */
	border-width: thin 3px;
	background: linear-gradient(to right, rgba(12, 18, 28, 0), rgba(32, 43, 60, 0.7) 100%);
	/*padding-top: 1%;*/
	padding: 7px 13px;
	background: transparent;
}

.header-side-button:hover img {
    /*filter: unset;*/
}

.header-side-button:hover {
    /*color: var(--site-color-main);*/
    color: #fff;
}

.header .header-panel {
    /*height: calc(100% - 20px);*/
}

.header-panel img {
	height: calc(100% - 6px);
}

.header .online {
	display: flex;
	margin-left: auto;
	padding: 0 30px;
}

.header .online div {
  border-radius: 50%;
  height: 10px;
  width: 10px;
  transform: scale(1);
  background: var(--site-color-main);
  box-shadow: 0 0 0 0 rgba(44, 212, 197, 0.6);
  animation: pulse-green 2s infinite;
  margin: 9px 5px 0;
  float: left;
}

.header .online p {
	float: left;
	line-height: 30px;
	height: 30px;
	margin: 0;
	font-size: 12px;
	color: var(--site-color-main-light);
	font-weight: 600;
}

.header .balance-box {
	/*background: var(--site-color-bg-dark);*/
	background: rgba(15, 22, 34, 0.7);
	padding: 0 15px;
	height: 40px;
	border-radius: 6px;
	font-weight: 600;
	border: 1px solid var(--site-glass-border);
	backdrop-filter: blur(16px) saturate(140%);
	-webkit-backdrop-filter: blur(16px) saturate(140%);

}

.progress-circle {
  position: relative;
  padding: 0;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  line-height: var(--size);
}

/* Text inside the control */

.left-half-clipper {
  /* a round circle */
  border-radius: 50%;
  width: var(--size);
  height: var(--size);
  position: absolute;
  /* needed for clipping */
  clip: rect(0, var(--size), var(--size), calc( var(--size) / 2 ));
  /* clips the whole left half*/
}


/* when p>50, don't clip left half*/
.progress-circle[data-progress="0"] {
	display: none;
}

.progress-circle[data-isover50="true"] .left-half-clipper {
  clip: rect(auto, auto, auto, auto);
}

.value-bar {
  /*This is an overlayed square, that is made round with the border radius,
   then it is cut to display only the left half, then rotated clockwise
   to escape the outer clipping path.*/
  position: absolute;
  /*needed for clipping*/
  clip: rect(0, calc( var(--size) / 2 ), var(--size), 0);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  border: 2px solid var(--color);
  /*The border is 0.35 but making it larger removes visual artifacts */
  /*background-color: #4D642D;*/
  /* for debug */
  box-sizing: border-box;
}


/* Progress bar filling the whole right half for values above 50% */

.progress-circle[data-isover50="true"] .first50-bar {
  /*Progress bar for the first 50%, filling the whole right half*/
  position: absolute;
  /*needed for clipping*/
  clip: rect(0, var(--size), var(--size), calc( var(--size) / 2 ));
  background-color: var(--color);
  border-radius: 50%;
  width: var(--size);
  height: var(--size);
  display: none;
}

/*.progress-circle:not(.over50) .first50-bar {
  display: none;
}*/

/*.progress-circle.p0 .value-bar {
  display: none;
}*/

.progress-circle .value-bar {
  transform: rotate( calc(var(--progress) * 3.60deg) );
  display: none;
}

.wissman-gradient {
	float: left;
	position: relative;
	margin: 13px 60px 0 20px;
}

.wissman-gradient p {
	margin: 0;
	font-size: 12px;
	width: 100px;
	text-align: center;
	font-weight: 600;
}

.wissman-gradient .g {
	height: 7px;
	width: 100px;
	border-radius: 10px;
	border: 1px solid #2e4952;
}

.wissman-gradient .g div {
	float: left;
	height: 7px;
	border-radius: 10px;
	background: linear-gradient(90deg, #2c8c30 -20%, rgb(72 162 28) 100%);
}

.wissman-gradient img {
	/*display: none;*/
	height: 26px;
	position: absolute;
	top: 3px;
	right: -11px;
	width: 32%;
}

.user-av .drp {
	position: absolute;
	right: 0;
	bottom: -110px;
	background: var(--site-color-bg-body);
	box-shadow: rgb(0 0 0 / 24%) 0px 3px 8px;
	padding: 10px 0;
	border-radius: 8px;
	opacity: 0;
	transform: translateY(-10px);
	transition: opacity 300ms, transform 300ms;
	pointer-events: none;
}

.user-av .drp[data-active="true"] {
	opacity: 1;
	transform: translateY(0);
	pointer-events: all;
}

.user-av .drp div {
	padding: 5px 25px;
	color: #9ab0cd;
	font-size: 14px;
	text-align: center;
}

.user-av .drp div:hover {
	cursor: pointer;
	background: var(--site-color-bg-dark);
	color: #fff;
}

.user-dropdown {
	line-height: 50px !important;
	color: #5f7693;
	font-size: 16px;
	margin-left: -20px;
}

.user-dropdown:hover {
	opacity: .8;
	cursor: pointer;
}

.user-av .progress-circle {
	position: absolute;
	left: -2px;
	bottom: 6px;
	top: 6px;
}

.user-av {
	position: relative;
	margin: 0 20px;
}

/*.user-av:hover {
	cursor: pointer;
}*/

.user-av img.av {
	height: 34px;
	margin: 8px 0;
	float: left;
	border-radius: 50%;
	z-index: 5;
	position: relative;
	transition: opacity 200ms;
}

.user-av img.av:hover {
	opacity: .8;
	cursor: pointer;
}

.user-av .ml-2 {
	float: left;
	/*line-height: 50px;*/
	/*height: 50px;*/
	margin: 7px 0 0 10px;
}

.user-av .ml-2 p {
	margin: 0;
	float: left;
	width: 100%;
}

.user-av .ml-2 p.name {
	font-weight: 600;
	margin: 0 0 -4px;
}

.user-av .ml-2 p.level {
	font-size: 12px;
	font-weight: 600;
	color: var(--site-color-main);
}

.header .balance-box div i {
	color: var(--site-color-warning);
	margin: 4px 4px 0 0;
	float: left;
}

.header .balance-box .balance,
.header .balance-box .balance-hidden {
	float: left;
	line-height: 22px;
}

.header .balance-box a {
	float: left;
	/* background: var(--site-color-main); */
	width: 28px;
	height: 28px;
	text-align: center;
	border-radius: 4px;
	margin: 6px 0 0 12px;
	transition: transform 300ms, opacity 300ms;
	position: relative;
	display: flex;
	-webkit-box-align: center;
	/* align-items: center; */
	-webkit-box-pack: center;
	justify-content: center;
	border-radius: 3px;
	padding: 0px 14px;
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) 0s;
	border-width: 0px 0px 2px;
	border-top-style: initial;
	border-right-style: initial;
	border-left-style: initial;
	border-image: initial;
	border-bottom-style: solid;
	font-family: var(--site-font-body);
	font-weight: 700;
	color: #0b1118;
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
	/* background-color: rgb(51, 193, 108); */
	border-color: rgba(255, 255, 255, 0.14);
	background-image: linear-gradient(135deg, rgba(44, 212, 197, 0.95), rgba(246, 196, 83, 0.95));
	box-shadow: 0 12px 26px rgba(44, 212, 197, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.header .balance-box a:hover {
	transform: translateY(-2px);
}

.header .balance-box i.fa-plus {
	font-size: 12px;
	margin: 9px 0 0;
}

.big-menu {
	background: rgba(12, 18, 28, 0.75);
	border-top: 1px solid var(--site-glass-border);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	margin-left: -10px;
}

.big-menu a.big-link {
	display: inline-block;
	font-size: 16px;
	font-weight: 600;
	/*margin: 0 20px 0 0;*/
	padding: 0 10px;
	opacity: .6;
	position: relative;
	line-height: 50px;
	overflow: hidden;
}

.big-menu a.big-link.active {
	opacity: 1;
}

.big-menu a.big-link:hover {
	/*opacity: .6 !important;*/
	color: #a3bcdb !important;
}

.big-menu a.big-link.active:after {
	/*width: 100%;*/
	height: 2px;
	background: linear-gradient(
90deg, #2c8c30 0%, #4aa31a 49.26%, rgba(11, 104, 192, 0) 100%, #33c16c 100%);
	/*box-shadow: 0px 0px 20px #0B68C0;*/
	content: ' ';
	position: absolute;
	left: -10px;
	right: -10px;
	bottom: 0;
}

.small-menu,
.big-menu {
	padding: 0 0 0 100px;
}

.small-menu .header-menu-button {
	opacity: .7;
	line-height: 30px;
}

.small-menu .header-menu-button.active {
	opacity: 1;
}

.menu-section-title {
	margin: 30px 0 5px;
	float: left;
	width: 100%;
	font-size: 17px; /* #222d3e */
}

.menu-section-title:hover {
	cursor: pointer;
}

.menu-section-title i {
	margin-left: 5px;
	color: var(--site-color-main);
	transition: opacity 300ms, transform 300ms;
}

.menu-section-title i:hover {
	cursor: pointer;
	opacity: .8;
}

.section-menu[data-hidden="true"] .menu-section-title i {
	transform: rotate(180deg);
}

/*.header .online p span {
	color: rgba(60, 161, 215);
	font-weight: 600;
}*/

@keyframes pulse-green {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(60, 161, 215, 0.7);
  }
  
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(60, 161, 215, 0);
  }
  
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(60, 161, 215, 0);
  }
}

.wrapper-page {
    overflow: hidden;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: relative;
}

.login-icon {
	height: 100% !important;
	margin: 2px;
}

.level-bar {
	font-size: 10px;
}

.level-bar .progress-content {
	font-size: 8px;
}

.level-bar .progress-container {
	height: 10px;
	width: 150px;
}

/* END HEADER */

/* TOAST */
.toast {
	background-color: var(--site-color-bg-body) !important;
	opacity: 1 !important;
}

.toast-top-right {
    top: calc(var(--site-header-row-top-height) + var(--site-header-row-bottom-height) + 10px);
	right: 10px;
}

.toast-close-button {
	right: 0;
	top: 0;
}

.toast-progress{
	background-color: var(--main-text-color-light);
	opacity: 1;
}

#toast-container>div, #toast-container:hover>div{
	-webkit-border-radius: 0px;
    border-radius: 0px;
	-webkit-box-shadow: none;
    box-shadow: none;
	opacity: 0.9;
}

.toast-success {
    background-color: var(--site-color-bg-light);
    border-left: 5px solid var(--site-color-success);
}

.toast-error {
	background-color: var(--site-color-bg-light);
	border-left: 5px solid var(--site-color-danger);
}

.toast-info {
	background-color: var(--site-color-bg-light);
	border-left: 5px solid var(--site-color-info);
}

.toast-warning {
	background-color: var(--site-color-bg-light);
	border-left: 5px solid var(--site-color-warning);
}

@media (min-width: 241px) and (max-width: 768px) {
	#toast-container>div {
		width: 100%;
	}

	.toast-top-right {
		right: 20px !important;
		left: 20px !important;
		top: unset;
		bottom: 20px;
	}
}

/* END TOAST */

/* TABLE */

.table-container {
	display: block;
	border: solid 2px var(--site-color-bg-dark);
    border-radius: 0.5rem;
    overflow: hidden;
    /*padding: 0 20px;*/
}

.table-header, .table-body, .table-footer {
	display: block;
}

.table-header .table-row, .table-footer .table-row {
	background: var(--site-color-bg-dark);
	font-weight: 500;
}

.table-body .table-row {
	background: var(--site-color-bg-light);
	font-weight: 400;
}

.table-content {
	position: relative;
    width: 100%;
    height: 100%;
}

.table-row {
	gap: 5px;
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	align-items: center;
	border-bottom: solid 2px var(--site-color-bg-dark);
}

.table-column {
	display: inline-block;
	text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.table-body .table-row .table-column:first-child { padding: 10px 0px 10px 10px; }
.table-body .table-row .table-column:last-child { padding: 10px 10px 10px 0px; }

.table-header .table-row .table-column:first-child, .table-footer .table-row .table-column:first-child { padding: 18px 0px 18px 10px; }
.table-header .table-row .table-column:last-child, .table-footer .table-row .table-column:last-child { padding: 18px 10px 18px 0px; }

/* .table-column:after { content: "."; clear: both; display: block; visibility: hidden; height: 0; } */

.table-row .table-column:first-child:nth-last-child(1), .table-row .table-column:first-child:nth-last-child(1) ~ .table-column { width: calc(100% / 1); }
.table-row .table-column:first-child:nth-last-child(2), .table-row .table-column:first-child:nth-last-child(2) ~ .table-column { width: calc(100% / 2); }
.table-row .table-column:first-child:nth-last-child(3), .table-row .table-column:first-child:nth-last-child(3) ~ .table-column { width: calc(100% / 3); }
.table-row .table-column:first-child:nth-last-child(4), .table-row .table-column:first-child:nth-last-child(4) ~ .table-column { width: calc(100% / 4); }
.table-row .table-column:first-child:nth-last-child(5), .table-row .table-column:first-child:nth-last-child(5) ~ .table-column { width: calc(100% / 5); }
.table-row .table-column:first-child:nth-last-child(6), .table-row .table-column:first-child:nth-last-child(6) ~ .table-column { width: calc(100% / 6); }
.table-row .table-column:first-child:nth-last-child(7), .table-row .table-column:first-child:nth-last-child(7) ~ .table-column { width: calc(100% / 7); }
.table-row .table-column:first-child:nth-last-child(8), .table-row .table-column:first-child:nth-last-child(8) ~ .table-column { width: calc(100% / 8); }
.table-row .table-column:first-child:nth-last-child(9), .table-row .table-column:first-child:nth-last-child(9) ~ .table-column { width: calc(100% / 9); }
.table-row .table-column:first-child:nth-last-child(10), .table-row .table-column:first-child:nth-last-child(10) ~ .table-column { width: calc(100% / 10); }

body! a:hover{
   background: red !important;
}

/* END TABLE */

/* LOGIN */
.login-button {
	padding: 7px 40px !important;
	margin: 0 10px !important;
	text-transform: uppercase;
}

.social-login {
	height: 50px;
	width: 50px;
}

.social-login:after {
	display: block;
    content: "";
    height: 30px;
    width: 30px;
}

.social-login.google { background: var(--site-color-google); }
.social-login.google:after {
	background: url(../img/social/google_icon.png) no-repeat 50% 50%;
    background-size: contain;
}

.social-login.facebook { background: var(--site-color-facebook); }
.social-login.facebook:after {
	background: url(../img/social/facebook_icon.png) no-repeat 50% 50%;
    background-size: contain;
}

.social-login.steam { background: var(--site-color-steam); }
.social-login.steam:after {
	background: url(../img/social/steam_icon.png) no-repeat 50% 50%;
    background-size: contain;
}

.social-login.twitter { background: var(--site-color-twitter); }
.social-login.twitter:after {
	background: url(../img/social/twitter_icon.png) no-repeat 50% 50%;
    background-size: contain;
}

/* END LOGIN */

/* FIELDS */

.input_field, .dropdown_field, .switch_field, .slider_field {
	position: relative;
    background-color: var(--site-color-bg-light);
    padding: 4px 8px;
    border-radius: 0.5rem;
    border: 2px solid var(--site-color-bg-dark);
	/*min-width: 350px;*/
	margin: 10px 0px;
    display: inline-block;
}

.input_field, .dropdown_field, .slider_field {
	width: 100%;
}

.dropdown_field{
	cursor: pointer;
	text-align: -webkit-left;
    text-align: -moz-left;
	text-align: left;
	width: 300px;
}

.dropdown_field .field_element_input{
	display: none;
}

.switch_field .field_element_input{
	display: none;
}

.switch_field .field_switch_bar {
	height: 6px;
	width: 100%;
	background: var(--site-color-danger);
	position: relative;
    display: flex;
	align-items: center;
    border-radius: 1rem;
    transition: all 300ms;
	cursor: pointer;
}

.switch_field .field_switch_bar:before {
	content: "";
    width: 16px;
    height: 16px;
    background: var(--site-color-white);
    position: absolute;
    left: 0px;
    border-radius: 50%;
    transition: all 300ms;
}

.field_element_input:checked + .field_switch .field_switch_bar {
	background: var(--site-color-success);
}

.field_element_input:checked + .field_switch .field_switch_bar:before {
	left: calc(100% - 16px);
}

.field_element_dropdowns{
	left: 0;
    right: 0;
	width: 100%;
	position: absolute;
	border: 2px solid var(--site-color-bg-dark);
	border-radius: 5px;
    background: var(--site-color-bg-light);
    z-index: 3;
	display: none;
	text-align: -webkit-left;
    text-align: -moz-left;
	text-align: left;
}

textarea.field_element_input {
	resize: none;
}

.slider_field .field_element_input {
    height: 6px;
	margin: 10px 0;
    background-color: var(--site-color-danger);
    background-image: linear-gradient(var(--site-color-success), var(--site-color-success));
    background-size: 50% 100%;
    background-repeat: no-repeat;
    border-radius: 10px;
    cursor: pointer;
    -webkit-appearance: none;
}

.slider_field .field_element_input::-webkit-slider-runnable-track {
    box-shadow: none;
    border: none;
    background: transparent;
    -webkit-appearance: none;
}

.slider_field .field_element_input::-moz-range-track {
    box-shadow: none;
    border: none;
    background: transparent;
}

.slider_field .field_element_input::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    /*background: var(--site-color-white);*/
    background: #fff;
    width: 2px;
    border-radius: 50%;
    -webkit-appearance: none;
}

.slider_field .field_cursor_content {
	height: 0;
	position: relative;
	margin: 0 8px;
}

.slider_field .field_cursor {
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	-webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
	position: absolute;
    width: 0;
    z-index: 2;
    bottom: 0;
}

.slider_field .field_cursor_text {
	position: absolute;
	top: 0;
	background: var(--site-color-bg-light);
	padding: 5px;
	border-radius: 5px;
}

.field_element_dropdowns.active{
	display: unset !important;
}

.field_caret{
	font-size: 16px;
	padding: 0 10px;
	height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
}
	
.field_element_dropdown{
	font-size: 14px;
    letter-spacing: 1px;
	color: #ffffffb3;
	padding: 10px;

}

.field_element_dropdown.active, .field_element_dropdown:hover{
	background-color: #c0c0c41a;
}

.field_content{
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: column;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 100%;
    min-width: 100px;
	-webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.field_extra {
	display: inline-block;
    align-items: center;
    float: right;
}

.field_label {
	position: absolute;
	background-color: var(--site-color-bg-light);
    padding: 3px;
    border-radius: 5px;
	z-index: 0;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
	font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
	
	-webkit-transition: top 500ms, font-size 500ms;
	-moz-transition: top 500ms, font-size 500ms;
	transition: top 500ms, font-size 500ms;
}

.field_label.active {
    top: -5px;
    font-size: 10px;
}

.field_element_input, .field_dropdown, .field_switch {
	z-index: 1;
	position: relative;
	width: 100%;
	font-size: 14px;
    letter-spacing: 1px;
	color: #ffffffb3;
	text-align: -webkit-left;
    text-align: -moz-left;
	text-align: left;
}



.input_field .field_element_input, .field_dropdown, .field_switch {
	/*background: transparent !important;*/
	/*padding: 5px 10px;*/
	background: #00000073 !important;
    padding: 10px 10px;
    border-radius: 5px;
}

.transparent {
	background: transparent !important;
	padding: 10px 10px;
    border-radius: 5px;
}

.field_bottom{
	position: absolute;
    bottom: -5px;
    left: 0;
    right: 0;
    padding: 0px 4px;
    height: 0px;
    line-height: 1;
    word-break: break-all;
    z-index: 1;
    text-align: -webkit-left;
    text-align: -moz-left;
    text-align: left;
    font-size: 12px;
	color: var(--site-color-white);
}

.field_error:not(.active){
	display: none;
}

.field_error{
	word-break: break-word;
}

.field_container{
	width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.input_coins {
	-webkit-transition: 500ms all;
    -moz-transition: 500ms all;
    transition: 500ms all;
}

.field_label.active .input_coins {
	height: 10px;
    width: 10px;
}

/* END FIELDS */

/* MODAL */
#modal_auth .field_label,
#modal_auth .bet_input_field {
	background: var(--site-color-bg-light);
}

#modal_auth .bet_input_field {
	margin: 20px 0;
}

#modal_auth .field_bottom {
	padding: 0;
	bottom: -12px;
}

#modal_auth .switch_content {
	float: left;
}

#modal_auth .switch_content {
	/*width: calc(100% - 300px);*/
	width: 100%;
	padding: 25px;
	/*width: 100%;*/
	float: left;
	transform: translateY(-20px);
	border-radius: 15px;
	/*background: var(--site-color-bg-dark);*/
	background: #050e1a;
}

#modal_auth .modal-body {
	position: relative;
	padding: 0 !important;
}

#modal_auth .login_thing {
	/*width: 400px;*/
	/*float: left;*/
	position: absolute;
	top: -20px;
	bottom: 0;
	right: -80px;
	/*display: none;*/
}

#modal_auth .login_thing2 {
	width: 350px;
	float: left;
	visibility: hidden;
}

@media (max-width: 768px) {
	#modal_auth .login_thing {
		display: none;
	}

	#modal_auth .switch_content {
		width: 100%;
		padding: 10px;
	}

	#modal_auth .modal-body {
		/*width: calc(100% - 40px);*/
		/*margin: 0 20px;*/
	}

	.modal .modal-content {
		max-width: calc(100% - 40px);
		margin: 0 20px;
	}

	.sa-btns a,
	.cl-btns button {
		width: 100% !important;
		margin: 0 0 10px !important;
	}

	.form_auth {
		margin: 45px 0 0 !important;
	}
}

.width25 {
	width: 25% !important;
}

.lgn {
	width: 100%;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}

.sa-btns,
.cl-btns {
	width: 100%;
	float: left;
}

.sa-btns a {
	/*box-shadow: 0px 0px 15px rgba(0, 132, 255, 0.4);*/
	border-radius: 6px;
	height: 40px;
	line-height: 40px;
	/*padding: 0 25px;*/
	font-size: 14px;
	font-weight: 600;
	display: block;
	float: left;
	margin: 0 20px 0 0;
	transition: transform 300ms, opacity 300ms;
	text-align: center;
	width: calc(50% - 0px - 10px);
}

.sa-btns a:hover,
.cl-btns button:hover {
	cursor: pointer;
	opacity: .8;
	transform: translateY(-3px);
}

.sa-btns a i {
	margin: 0 4px 0 0;
}

.sa-btns a span {
	opacity: .9;
}

.sa-btns a[data-type="steam"] {
	background: linear-gradient(92.68deg, #0478E4 0.45%, #05187A 100%);
	box-shadow: 0px 0px 15px #0084ff4d;
}

.sa-btns a[data-type="google"] {
	background: linear-gradient(92.68deg, #B6304D 0.45%, #080831 100%);
	box-shadow: 0px 0px 15px #84265c40;
}

.cl-btns button {
	display: block;
	float: left;
	height: 40px;
	line-height: 40px;
	font-size: 14px;
	font-weight: 600;
	margin: 0 20px 0 0;
	transition: transform 300ms, opacity 300ms;
	text-align: center;
	width: calc(50% - 0px - 10px);
	border-radius: 6px;
}

.cl-btns button.login {
	display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    border-radius: 3px;
    padding: 0px 14px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) 0s;
    border-width: 0px 0px 2px;
    border-top-style: initial;
    border-right-style: initial;
    border-left-style: initial;
    border-image: initial;
    border-bottom-style: solid;
    /* font-family: "Proxima Nova", sans-serif; */
    font-weight: 200;
    color: rgb(255, 255, 255);
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    background-color: rgb(51, 193, 108);
    border-color: rgb(41, 149, 84);
    box-shadow: rgb(51 193 108 / 15%) 0px 4px 4px;
}

.cl-btns button.register {
	background: linear-gradient(92.68deg, #772046 0.45%, #B33BAB 100%);
}

.cl-btns {
	margin: 20px 0 0;
}

.form_auth .ftr {
	/*background: var(--site-color-bg-dark);*/
	background: #101924;
	float: left;
	width: calc(100% + 50px);
	text-align: center;
	margin: 30px -25px -40px;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	padding: 10px 0;
}

.form_auth .ftr a {
	width: 34px;
	height: 34px;
	line-height: 34px;
	border-radius: 50%;
	float: left;
	margin: 0 6px;
}

.form_auth .ftr a[data-type="google"] {
	background: #FA455E;
}

.form_auth .ftr a[data-type="steam"] {
	background: #26282D;
}

.form_auth .ftr a i,
.form_auth .ftr a svg {
	font-size: 16px;
	margin: 9px 0;
	height: 16px;
}

.form_auth .ftr p {
	margin: 0 0 8px;
	color: #8f9bad;
}

.form_auth {
	width: 100%;
	float: left;
	/*margin: 85px 0 0;*/
}

.form_auth label {
	width: 100%;
	float: left;
	color: #8f9bad;
	font-size: 14px;
	font-weight: 600;
}

.form_auth input {
	width: 100%;
	float: left;
	outline: 0;
	border: 0;
	/*background: var(--site-color-bg-light);*/
	background: #101924;
	border-radius: 6px;
	padding: 10px;
	margin: 7px 0;
}

.modal {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1051;
    transition: trasform 300ms, opacity 300ms;
}

.modal:not(.active) {
	/*opacity: 0;*/
	/*pointer-events: none;*/
	display: none;
	/*opacity: 0 !important;
	pointer-events: none;
  transform: translateY(-100px) !important;*/
}

#modal_auth {
	opacity: 0;
	transform: translateY(-100px);
}

#modal_auth.active {
	opacity: 1;
	transform: translateY(0);
}

.modal .modal-dialog {
	background: #00000082;
	width: 100%;
  height: 100%;
}

.modal .modal-content {
	overflow: hidden;
    display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
	max-height: 80%;
	min-width: 350px;
	max-width: 100%;
	background: var(--site-glass-bg-strong);
	border: 1px solid var(--site-glass-border);
	-webkit-box-shadow: 0 24px 60px rgba(4, 9, 16, 0.55);
    box-shadow: 0 24px 60px rgba(4, 9, 16, 0.55);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	border-radius: 16px;
}

.modal.small .modal-content {
	width: 350px;
}

.modal.medium .modal-content {
	width: 600px;
}

.modal.large .modal-content {
	width: 1000px;
}

.modal .modal-header {
    padding: 15px;
    padding-bottom: 0px;
	color: var(--main-text-color);
}

.modal .modal-title {
	font-size: 16px;
	font-weight: 500;
}

.modal .modal-close {
    padding: 1px;
    width: 22px;
    height: 22px;
    background: rgba(12, 18, 28, 0.7);
	border: 1px solid var(--site-glass-border);
    font-size: 16px;
    cursor: pointer !important;
}

.modal .modal-body {
	overflow: hidden;
    display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
	padding: 15px;
	height: 100%;
}

.modal .modal-footer {
	padding: 15px;
}

/* END MODAL */
@media (max-width: 768px) {
	.faqs,
	.faq-grid {
		width: 100% !important;
		margin: 0 0 20px !important;
	}
}
.faqs {
	float: left;
	display: block;
	width: 180px;
}

.faqs a {
	float: left;
	width: 100%;
	display: block;
	text-align: left;
	padding: 8px 10px;
	border-radius: 6px;
	font-weight: 600;
	color: #8f9bad !important;
}

.faqs a:hover {
	/*opacity: .8;*/
	color: #fff !important;
}

.faqs a.active {
	color: #fff !important;
	background: var(--site-color-bg-dark);
	border-left: 3px solid var(--site-color-main);
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.faq-grid {
	float: left;
	margin-left: 20px;
	width: calc(100% - 200px);
	text-align: left;
}

.faq-grid ol,
.faq-grid ul {
	padding: 0;
	margin: 0 0 0 14px;
}

.faq-grid li {
	color: #8f9bad;
	margin: 5px;
}

.title-page2 {
	text-align: left;
	font-weight: 600;
	font-size: 16px;
	color: var(--site-color-main);
}

.ff {
	line-height: 2em;
	color: #8f9bad;
}

.pf-container {
	width: 100%;
	float: left;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 40px;
}

.pf-container .cntner {
	width: 100%;
	float: left;
	background: var(--site-color-bg-light);
	border-radius: 6px;
	padding: 15px;
	/*text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;*/
}

.pf-container .cntner div {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	width: 100%;
}

.pf-container .cntner .title2 {
	background: var(--site-color-bg-dark);
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	padding: 10px 15px;
	font-weight: 600;
	float: left;
	width: calc(100% + 30px);
	transform: translate(-15px, -15px);
	color: #8f9bad;
}

.pf-container .cntner .title2 p {
	float: left;
	margin: 0;
}

.pf-container .cntner .title2 a {
	float: right;
	font-size: 12px;
	line-height: 21px;
	color: var(--site-color-main) !important;
}

.pf-container .cntner .title2 a i {
	margin-left: 5px;
}

@media (max-width: 768px) {
	.pf-container {
		display: block;
	}

	.pf-container .cntner {
		margin: 0 0 20px;
	}
}

/* CHAT */
.rain_panel {
	background: var(--site-color-bg-body);
	text-align: center;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	z-index: 30;
}

.rain_panel i.fa {
	font-size: 20px;
	float: left;
	color: var(--site-color-main);
	margin: 2px 0;
}

.rain_panel .rain-title {
	float: left;
	/*line-height: 20px;*/
	margin: 0 0 0 10px;
	font-weight: 600;
	font-size: 16px;
}

.rain_panel .font-8 {
	font-size: 14px;
	width: 100%;
	float: left;
	opacity: .8;
	margin: 5px 0 0;
}


.rain_panel .rainJoin #join_rain {
	width: 100%;
	margin: 15px 0 0;
	padding: 8px 0;
}

#chat_message_commands:hover {
	color: var(--site-color-main-light);
}

.slider {
    position: absolute;
    z-index: 1;
    font-size: 20px;
    width: 50px;
    background: var(--site-color-main-transparent);
    border-bottom: 2px solid var(--site-color-main);
    border-top: 2px solid var(--site-color-main);
    cursor: pointer;
    transition: right 300ms linear, width 300ms;
}

.slider.slider-top{
	top: 10px;
}

.slider.slider-bottom{
	bottom: 10px;
}

.slider.slider-left{
	border-right: 2px solid var(--site-color-main);
	border-radius: 0 25% 25% 0;
	left: 0;
}

.slider.slider-left i{
	margin-left: auto;
}

.slider.slider-right{
	border-left: 2px solid var(--site-color-main);
	border-radius: 25% 0 0 25%;
	right: 0;
	border: 0;
	/* background: #25363c; */
}

.slider.slider-right i{
	margin-right: auto;
}

.slider:hover{
	width: 60px;
}

.pullout_view[data-isvisible="false"] {
	right: 0;
}

.pullout_view[data-isvisible="true"] {
	right: 300px;
}

.emojis-panel {
    height: 200px;
    overflow-x: auto;
    position: absolute;
    bottom: 50px;
    background: var(--site-color-bg-body);
    /*border: solid 2px var(--site-color-main);*/
    z-index: 4;
    /*margin: 10px 20px;*/
    /*border-radius: 10px;*/
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 300ms, transform 300ms;
    pointer-events: none;
}

.emojis-panel[data-active="true"] {
	transform: translateY(0);
	opacity: 1;
	pointer-events: all;
}

.emojis-content img {
	height: 20px;
	margin: 3px;
	cursor: pointer;
}

.emojis-content div {
	background: transparent;
}

.emojis-chat-icon {
	height: 16px;
}

.chat-message .av-c {
	height: 40px;
	width: 40px;
	overflow: hidden;
	float: left;
	position: relative;
}

.chat-message .av-c img.badge {
	width: 40px;
	/*margin: 1px;*/
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	z-index: 3;
}

.chat-message .av-c img.avatar {
	position: relative;
	z-index: 4;
	height: 30px;
	width: 30px;
	margin: 5px;
}

.chat-message .av-c span {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	line-height: 22px;
	text-align: center;
	font-weight: 600;
}

.chat-message-content {
	font-size: 12px;
	width: calc(100% - 70px);
	transform: translate(50px, -23px);
	border-radius: 5px;
	padding: 6px 10px;
}

.chat-message i.dropdown {
	/*margin: 4px 5px 0 0;*/
	float: right;
	color: #8f9bad;
	opacity: 0;
	transition: opacity 200ms;
	position: absolute;
	right: 5px;
	top: 4px;
	z-index: 5;
}

.chat-message:hover i.dropdown {
	opacity: 1;
}

.chat-message i.dropdown:hover {
	cursor: pointer;
	opacity: .8;
}

.chat-message-time {
	font-size: 8px;
	/*display: none;*/
}

.chat-message-name {
	font-size: 12px;
	font-weight: bold;
}

.chat-message-header {
	width: calc(100% - 50px);
	display: block;
	margin: 4px 0 0;
}

.chat-message {
	position: relative;
	border-top: solid 1px var(--site-color-bg-light);
	border-bottom: solid 1px var(--site-color-bg-light);
}

.chat-message .dropdown-box {
	position: absolute;
	top: 22px;
	right: 5px;
	background: var(--site-color-bg-body);
	padding: 5px 0;
	border-radius: 5px;
	transition: opacity 300ms, transform 300ms, visibility 0s;
	opacity: 0;
	transform: translateY(-15px);
	pointer-events: none;
	z-index: 6;
	height: 0;
	overflow: hidden;
	/*visibility: hidden;*/
}

.chat-message[data-activebox="true"] .dropdown-box {
	transition: opacity 300ms, transform 300ms, visibility 300ms;
	opacity: 1;
	transform: translateY(0);
	pointer-events: all;
	height: auto;
	/*visibility: visible;*/
}

.chat-message .dropdown-box .cmd {
	padding: 8px 15px;
}

.chat-message .dropdown-box[data-big="true"] .cmd {
	width: 50%;
	float: left;
}

.chat-message .dropdown-box[data-big="true"] .cmd i {
	float: left;
	margin: 5px 0;
}

.chat-message .dropdown-box[data-big="true"] span {
	float: left;
	display: block;
	max-height: 22px;
	line-height: 22px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.chat-message .dropdown-box .cmd:hover {
	cursor: pointer;
	background: var(--site-color-bg-light);
}

.chat-message .dropdown-box .cmd i {
	font-size: 12px;
	opacity: .7;
}

.chat-message .dropdown-box .cmd span {
	font-weight: 600;
	margin: 0 0 0 5px;
}

.chat-message-rank {
	display: inline-block;
    color: var(--site-color-text);
    padding: 0 5px;
    border: 2px solid var(--site-color-bg-light);
    text-transform: uppercase;
    font-size: 10px;
    transform: translateY(-1px);
}

.chat-message .avatar {
	border-width: 2px !important;
	transition: opacity 200ms;
}

/* new chat */
.chat-message {
	/*padding: 10px;*/
	border: 0;
	width: 100%;
	float: left;
	padding: 0 5px;
	margin: 0 0 20px;
}

.chat-message .avatar {
	float: left;
}

.chat-message .content {
	float: left;
	width: calc(100% - 50px);
	margin: 0 0 0 10px;
}

.chat-message .content .msg {
	color: #8f9bad;
	font-size: 14px;
}

.avatar-field .level {
	display: none;
}

.chat-message.user .avatar {
	/*border: 2px solid #222d3e !important;*/
}

.chat-message .avatar:hover {
	cursor: pointer;
	opacity: .8;
}

.chat-message .name {
	font-weight: 600;
	width: 100%;
	float: left;
	margin: 0 0 1px;
}

.chat-message .time {
	font-size: 14px;
	color: #586578;
	width: 100%;
	float: left;
}

.chat-message .name span {
	float: left;
}

.chat-message .name .badge {
	font-size: 11px;
	/*background: var(--site-color-main);*/
	/*color: var(--site-color-main);*/
	
	border-radius: 4px;
	/*height: 21px;*/
	/*line-height: 21px;*/
	/*min-width: 21px;*/
	text-align: center;
	padding: 1px 4px;
	/*margin-right: 5px;*/
	margin: 2px 5px 0 0;
	text-transform: capitalize;
}

.chat-message .name .badge.level {
	/* background: linear-gradient(
45deg,#4ed880,#37b163 40%,#19262b) !important; */
	background-color: rgb(255, 195, 41);
	color: #fff;
}

.chat-message .name .badge.chat-rank-owner {
	background: linear-gradient(45deg,#ff3030,#9b0505 40%,#ea2331) !important;
	color: #fff !important;
	text-transform: uppercase !important;
	/*font-size: 14px;*/
	/*line-height: 22px;*/
	/*margin: 0 5px 0 0;*/
}

#chat-message-settings {
	display: none;
}
/* end new chat */

#chat-message-settings {
	cursor: pointer;
    position: absolute;
    width: 100%;
    height: 100%;
    right: 0;
    bottom: 0;
    top: 0;
    background: var(--site-color-bg-light-transparent);
    opacity: 0;
    color: var(--site-color-text);
}

#chat-message-commands {
	position: absolute;
	top: calc(100% - 5px);
	left: -10px;
    right: -10px;
	margin: 0 auto;
    z-index: -1000;
    color: var(--site-color-text);
	background: var(--site-color-bg-light);
    border: solid 2px var(--site-color-main);
}

.chat-message-setting {
	border: 2px solid var(--site-color-main);
    background: var(--site-color-main-transparent);
	width: 35px;
	height: 35px;
	font-size: 16px;
}

#chat-message-commands #chat-message-setting-content {
	cursor: pointer;
	color: var(--site-color-main-light);
	font-size: 12px;
}

#chat-message-commands #chat-message-setting-content:hover {
	color: var(--site-color-danger);
}

.flag {
	height: 30px;
    cursor: pointer;
    border: 2px solid transparent;
}

.flag img {
	height: calc(100% - 10px);
}

.flag.active, .flag:hover {
	border-color: var(--site-color-bg-light);
    background: var(--site-color-main-transparent);
}

.chat-group {
	overflow: hidden;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: relative;
}

.chat-input-field {
    width: 100%;
    min-width: 0;
    /*height: 45px;*/
    padding: 15px;
    color: var(--site-color-text);
    border: none;
    font-size: 12px;
    z-index: 2;
    background-color: rgba(12, 18, 28, 0.7);
	border: 1px solid var(--site-glass-border);
	backdrop-filter: blur(14px) saturate(135%);
	-webkit-backdrop-filter: blur(14px) saturate(135%);
	box-shadow: 0 16px 30px rgba(4, 9, 16, 0.45);
}

.emojis-smile-icon {
	color: var(--site-color-main);
    font-size: 18px;
    position: absolute;
    bottom: 0;
    top: -2px;
    right: 15px;
    z-index: 3;
    cursor: pointer;
}

.emojis-smile-icon i {
    margin: auto;
}

#chat-input-form {
    margin: 0px;
    position: relative;
    z-index: 2;
}

.chat-input {
    margin-bottom: 0px;
}

.chat-input-scroll {
	position: absolute;
	bottom: 49px;
    width: 100%;
    height: 35px;
    background-color: var(--site-color-bg-light-transparent);
    color: var(--site-color-main);
    font-size: 14px;
    cursor: pointer;
    font-weight: 600;
}

.chat-input-scroll:hover {
	text-decoration: underline;
}

#chat-area {
	-webkit-mask-image: -webkit-gradient(linear, left 20%, left top, from(var(--site-bg-color-dark)), to(transparent));
	height: 100%;
	resize: none;
	overflow-y: auto;
	overflow-x: hidden;
	word-wrap: break-word;
	padding: 5px;
	border-bottom: solid 1px var(--site-color-bg-light);
	border-right: solid 1px var(--site-color-bg-light);
}

.chat-mention {
	background: #3cd74a70 !important;
	color: #ffffff !important;
	font-size: 12px;
	font-weight: 600;
}

.lang-select {
	float: left;
	width: 100%;
	position: relative;
	padding: 0 0 10px;
	margin: 0 0 -10px;
}

.lang-select .selected {
	background: var(--site-color-bg-dark);
	border: 2px solid #222d3e;
	border-radius: 8px;
	padding: 8px;
	position: relative;
	float: left;
	width: 100%;
	transition: opacity 300ms;
}

.lang-select .selected:hover {
	cursor: pointer;
	opacity: .8;
}

.lang-select img {
	height: 15px;
	float: left;
	margin: 3px 7px 3px 0;
}

.lang-select p {
	float: left;
	/*line-height: 14px;*/
	margin: 0;
	line-height: 21px;
	font-size: 13px;
}

.lang-select i.drop {
	position: absolute;
	top: 12px;
	right: 15px;
	opacity: .65;
	transition: transform 300ms;
}

.lang-select[data-active="true"] i.drop {
	transform: rotate(180deg);
}

.lang-select .options {
	position: absolute;
	left: 0;
	right: 0;
	top: 51px;
	background: var(--site-color-bg-dark);
	border: 2px solid #222d3e;
	border-radius: 8px;
	z-index: 100;
	padding: 3px 0;
	transform: translateY(-10px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 300ms, transform 300ms;
}

.lang-select[data-active="true"] .options {
	transform: translateY(0);
	opacity: 1;
	pointer-events: all;
}

.lang-select .options .opt {
	width: 100%;
	float: left;
	padding: 7px 15px;
	transition: background 300ms;
	position: relative;
}

.lang-select .options .opt i.check { 
	position: absolute;
	top: 11px;
	right: 15px;
	font-size: 12px;
	color: var(--site-color-main);
	opacity: 0;
	transition: opacity 250ms;
}

.lang-select .options .opt:hover {
	/*background: var(--site-color-bg-light);*/
	background: #222d3e;
	cursor: pointer;
}

.lang-select .options[data-activeroom="0"] .opt i.check[data-roomid="0"] {opacity: 1;}
.lang-select .options[data-activeroom="1"] .opt i.check[data-roomid="1"] {opacity: 1;}
.lang-select .options[data-activeroom="2"] .opt i.check[data-roomid="2"] {opacity: 1;}
.lang-select .options[data-activeroom="3"] .opt i.check[data-roomid="3"] {opacity: 1;}
.lang-select .options[data-activeroom="4"] .opt i.check[data-roomid="4"] {opacity: 1;}

/* END CHAT */


/* START DICE */
.dice {
	display: flex;
	/*flex-direction: column;*/
	gap: 30px;
}

.dice .box {
	background: var(--site-glass-bg);
	border-radius: 18px;
	border: 1px solid var(--site-glass-border);
	box-shadow: var(--site-glass-shadow);
	backdrop-filter: blur(16px) saturate(140%);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	float: left;
	text-align: left;
	padding: 15px;
	position: relative;
}

.dice .box h4 {
	margin: 0 0 8px;
	color: var(--site-color-main-light);
	font-family: var(--site-font-display);
	letter-spacing: 0.02em;
	float: left;
	width: 100%;
}

.dice .left.box {
	width: 28%;
	float: left;
	padding-bottom: 113px;
}

.dice .right.box {
	width: calc(72% - 30px);
	float: left;
	margin: 0 0 0 30px;
}

#type_slow.is_fast .dice-reel-column {
	/*background: red;*/
	transform: translateY(-380px) !important;
}

@media (max-width: 768px) {
	.dice .box {
		width: 100% !important;
		margin: 20px 0 0 !important;
		display: block;
	}

	.dice {
		flex-direction: column;
	}

	.dice-game-info {
		margin: 0 !important;
	}

	.dice-reel-row {
		width: 50px !important;
		height: 40px !important;
		font-size: 20px !important;
	}

	.dice-reel {
		height: 60px !important;
	}

	.dice .inputs3 {
		display: block !important;
	}

	#type_slow.is_fast .dice-reel-column {
		transform: translateY(-190px) !important;
	}
}

.dice .box .field_container {
	width: 100%;
	display: block;
}

.dice .box .inputs .field_content,
.dice .box .inputs .field_extra {
	display: block;
	float: left;
	width: 100%;
	text-align: center;
}

.dice .box input[type="number"] {
	text-align: center;
	padding: 10px 0;
	border-radius: 10px;
	margin: 0 0 7px;
	width: 100%;
	background: rgba(12, 18, 28, 0.7);
	border: 1px solid var(--site-glass-border);
	color: var(--site-color-text);
}

.dice .box .inputs .field_extra {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 10px;
}

.dice .box .field_extra button {
	/*width: 33.33%;*/
	float: left;
	background: rgba(12, 18, 28, 0.7);
	border: 1px solid var(--site-glass-border);
	border-radius: 10px;
	color: var(--site-color-text);
	transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.dice .box .field_extra button:hover {
	transform: translateY(-2px);
	border-color: rgba(44, 212, 197, 0.45);
	box-shadow: 0 12px 26px rgba(4, 9, 16, 0.35);
}

.dice .inputs {
	border: 1px solid var(--site-glass-border);
	border-radius: 10px;
	float: left;
	width: 100%;
	padding: 10px;
	background: rgba(12, 18, 28, 0.5);
}

.dice .box input.border {
	border: 1px solid #2A3547;
}

#dice_bet,
#minesweeper_bet,
#minesweeper_cashout {
	background-image: linear-gradient(135deg, rgba(44, 212, 197, 0.95), rgba(246, 196, 83, 0.95));
    border-color: rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    height: 40px;
    line-height: 40px;
    padding: 0;
    width: 100%;
    box-shadow: 0 18px 40px rgba(44, 212, 197, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    margin: 10px 0 0;
    transition: opacity 300ms, transform 300ms, background 300ms, box-shadow 300ms;
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 15px;
    top: unset !important;
    width: calc(100% - 30px);
	/*box-shadow: 0px 0px 15px rgba(60, 161, 215, 0.4);*/
}

#dice_bet:hover,
#minesweeper_bet:hover,
#minesweeper_cashout:hover {
	transform: translateY(-3px);
	opacity: 1;
}

#dice_bet.disabled,
#minesweeper_bet.disabled,
#minesweeper_cashout.disabled {
	pointer-events: none;
	opacity: .5;
}

#dice_bet.win,
#minesweeper_bet.win,
#minesweeper_cashout.win {
	box-shadow: 0 18px 40px rgba(46, 227, 111, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
	background-image: linear-gradient(135deg, rgba(46, 227, 111, 0.95), rgba(34, 180, 111, 0.95));
}

#dice_bet.lose,
#minesweeper_bet.lose,
#minesweeper_cashout.lose {
	box-shadow: 0 18px 40px rgba(255, 95, 86, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
	background-image: linear-gradient(135deg, rgba(255, 95, 86, 0.95), rgba(214, 54, 71, 0.95));
}

.dice .slider_field {
	background: var(--site-color-bg-dark);
	margin: 20px;
	width: calc(100% - 40px);
}

.dice .field_bottom {
	bottom: -7px;
}

.dice .inputs3 {
	margin: 20px 20px 0;
	width: calc(100% - 40px);
	grid-column-start: 1; grid-column-end: 4;
	display: grid;
	grid-gap: 15px;
}

.table-container.dice-table {
	margin: 40px 0 0;
	/*text-align: center;*/
}

.table-container.dice-table .table-column {
	padding-left: 40px !important;
}

.table-container.dice-table .table-row {
	border-bottom: 0;	
}

.table-container.dice-table .table-body .table-row {
	padding: 10px 0;
}

.table-container.dice-table .table-row i {
	color: #ffc34c;
	margin-left: 3px;
}

.table-container.dice-table .table-row:nth-child(even) {
	/*border-bottom: 0;*/
	background: var(--site-color-bg-dark);
}

/*.table-container.dice-table * {*/
	/*text-align: center;*/
/*}*/
.lb-table * {
	text-align: center;
}

.lb-table .table-body .table-row img {
	margin-right: 5px;
}

.lb-table .table-body .table-row {
	font-weight: 600;
}

.lb-table .table-body .table-row .rank div {
	width: 60px;
	height: 30px;
	transform: skew(-20deg);
	border: 3px solid var(--site-color-bg-active);
    border-radius: 5px;
    position: relative;
    display: inline-block;
}

.lb-table .table-body .table-row .rank[data-rank="1"] div {
	background: #303029;
	border-color: #C99A17;
}

.lb-table .table-body .table-row .rank[data-rank="2"] div {
	background: #1C202F;
	border-color: #ABC2E3;
}

.lb-table .table-body .table-row .rank[data-rank="3"] div {
	background: #272630;
	border-color: #654E40;
}

.lb-table .table-body .table-row .rank div span {
	transform: skew(20deg);
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	line-height: 24px;
	margin: 0;
	font-weight: 600;
	text-align: center;
}


.lb-table .table-body .table-row .winn div {
	/*margin-top: -10px;*/
	/*font-size: 18px;*/
}

.lb-table .table-body .table-row .winn p {
	font-size: 12px;
	color: #8f9bad;
	margin: -2px 0 0;
}

.lb-table .table-body .table-row .winn p i.fa {
	color: #8f9bad;
}

.lb-table .table-body .table-row .winn i.fa {
	font-size: 14px;
}

.table-container.lb-table .table-body .table-row {
	padding: 5px 0 !important;
}

.table-container.dice-table .table-header {
	background: var(--site-color-bg-light);
	border: 0;
	color: #596076;
}

.table-container.dice-table .table-body {
	/*x*/
}

.table-container.dice-table .avatar {
	border-width: 2px;
	margin-right: 5px;
}

.dice_historyitem,
.minesweeper_historyitem,
.plinko_historyitem,
.tower_historyitem {
	color: #c2cceb;
	/*font-weight: 600 !important;*/
}

.dice_historyitem .profit,
.minesweeper_historyitem .profit,
.plinko_historyitem .profit,
.tower_historyitem .profit {
	font-weight: 600;
}

.dice_historyitem.isWin .profit,
.minesweeper_historyitem.isWin .profit,
.plinko_historyitem.isWin .profit,
.tower_historyitem.isWin .profit {
	color: #00cf51;
}

.dice_historyitem.isLose .profit,
.minesweeper_historyitem.isLose .profit,
.plinko_historyitem.isLose .profit,
.tower_historyitem.isLose .profit {
	color: #ff3030;
}

#dice_winnings {
	padding: 10px 0;
}

.dice .check {
	width: 100%;
	float: left;
	--size: 28px;
	position: absolute;
	bottom: 65px;
	left: 15px;
	right: 15px;
}

.dice .check div {
	border-radius: 5px;
	/*border: 2px solid var(--site-color-bg-light);*/
	background: var(--site-color-bg-dark);
	height: var(--size);
	width: var(--size);
	line-height: var(--size);
	text-align: center;
	float: left;
}

.dice .check div:hover {
	cursor: pointer;
}

.dice .check div i {
	margin: calc((var(--size) - 14px) / 2) 0;
	transition: opacity 200ms;
	opacity: 0;
	color: #00cf51;
}

.dice .check[data-check="true"] div i {
	opacity: 1;
}

.dice .check p {
	float: left;
	line-height: var(--size);
	margin: 0 0 0 10px;
	color: #7c8399;
}
/* END DICE */


/* HOME */
.home {
	padding: 0 50px;
	text-align: left;
}

.home img {
	width: 100%;
	transition: transform 300ms;
}

.home img:hover {
	transform: scale(1.01);
	cursor: pointer;
}

.home .grid3 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 20px;
}

/*.home h2,
.home p {
	margin: 0;
}*/

.home h2 {
	margin: 20px 0 0;
}

.home p {
	opacity: .7;
	margin: 0 0 10px;
}

.home .grid2,
.home .grid3,
.home p,
.home h2 {
	width: 100%;
	float: left;
}

.home .grid2 {
	display: grid;
	grid-gap: 20px;
	grid-template-columns: repeat(2, 1fr);
}

.home .slider2 {
	width: 100%;
	float: left;
	border-radius: 15px;
	position: relative;
	overflow: hidden;
}

/*.home .slider2 img.bg {
	visibility: hidden;
}*/

.home .slider2 .container {
	width: 400%;
	position: absolute;
	left: 0;
	bottom: 0;
	top: 0;
	transition: transform 500ms;
}

.home .slider2 img.s {
	width: 100%;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	/*transform: scale(1.015);*/
}

.home .slider2 img.s[data-active="false"] {
	display: none;
}

.home .slider2 .arrow {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 130px;
	z-index: 5;
	background: linear-gradient(to right, rgba(0,0,0,.35), transparent);
}

.home .slider2 .arrow:hover {
	opacity: .8;
	cursor: pointer;
}

.home .slider2 .arrow.right {
	left: unset;
	right: 0;
	background: linear-gradient(to right, transparent, rgba(0,0,0,.35));
	/*transform: rotate(180deg);*/
}

.home .slider2 .arrow i {
	position: absolute;
	left: 30px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 24px;
}

.home .slider2 .arrow.right i {
	left: unset;
	right: 30px;
}

.home .slider-controls {
	width: 100%;
	float: left;
	text-align: center;
	margin: 10px 0;
}

.home .slider-controls div[data-active] {
	width: 10px;
	height: 10px;
	float: left;
	margin: 0 4px;
	border-radius: 50%;
	background: #4b5b72;
	transition: background 500ms;
}

.home .slider-controls div[data-active]:hover {
	cursor: pointer;
	opacity: .8;
}

.home .slider-controls div[data-active="true"] {
	background: var(--site-color-main);
}

@media (max-width: 768px) {
	.home {
		padding: 0;
	}

	.home .grid3,
	.home .grid2 {
		grid-template-columns: 1fr;
	}

	.home .grid7 {
		grid-template-columns: 1fr 1fr;
	}
}
/* END HOME */

/* DEPOSIT / WITHDRAW */
.dp-title {
	width: 100%;
	float: left;
	margin: 20px 0 10px;
	/*opacity: .8;*/
}

.options-container-grid {
	width: 100%;
	float: left;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 20px;
}

.options-container {
	text-align: left;
	float: left;
	width: 100%;
	display: inline-flex;
}

@keyframes card-in {
	from { opacity: 0; transform: translateY(10px) scale(0.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

.options-container .option {
	float: left;
	background: var(--site-glass-bg);
	border-radius: 14px;
	padding: 10px 15px;
	width: 100%;
	/* margin: 0 15px 15px 0; */
	transition: opacity 300ms, transform 300ms, box-shadow 300ms;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	border: 1px solid var(--site-glass-border);
	box-shadow: var(--site-glass-shadow);
	backdrop-filter: blur(16px) saturate(140%);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	animation: card-in 520ms ease both;
}

.options-container .option:nth-child(1) { animation-delay: 80ms; }
.options-container .option:nth-child(2) { animation-delay: 140ms; }
.options-container .option:nth-child(3) { animation-delay: 200ms; }
.options-container .option:nth-child(4) { animation-delay: 260ms; }

.options-container .option:hover {
	transform: translateY(-4px);
	opacity: .95;
	box-shadow: 0 18px 40px rgba(4, 9, 16, 0.55);
}

.options-container .option .img,
.options-container .option .text {
	float: left;
}

.options-container .option .img {
	height: 50px;
	width: 120px;
	border-radius: 5px;
	text-align: center;
	margin: 0 10px 0 0;
}

.options-container .option .img img {
	height: 30px;
	margin: 10px auto;
}

.options-container .option .text p {
	margin: 4px 0 -3px;
	font-weight: 600;
	font-size: 16px;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.options-container .option .text span {
	opacity: .75;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* END DEPOSIT / WITHDRAW */



/* FOOTER */
.footer {
	width: calc(100% + 160px);
	margin: 50px -80px -40px;
	float: left;
	background: rgba(12, 18, 28, 0.78);
	border-top: 1px solid var(--site-glass-border);
	box-shadow: 0 -20px 40px rgba(4, 9, 16, 0.4);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	padding: 20px 50px;
	text-align: left;
}

.footer .stats,
.footer .social,
.footer .links {
	/*width: 100%;*/
	/*float: left;*/
	/*display: inline-block;*/
	/*margin: 0 0 15px;*/
	/*float: left;*/
	display: flex;
	flex-direction: column;
	float: left;
	margin: 0 100px 0 0;
}

.footer .stats .c,
.footer .social a {
	/*display: inline-block;*/
	width: 100%;
	float: left;
	/*text-align: left;*/
	margin: 0 0 10px;
	transition: opacity 300ms;
}

.footer .social a {
	margin: 0 0 10px;
}

.footer .stats .val {
	font-weight: 600;
	font-size: 18px;
}

.footer .stats .desc {
	color: #8C92A8;
	font-weight: 600;
	text-transform: uppercase;
	margin: -3px 0 0;
	font-size: 12px;
}

.footer .social a:hover span {
	/*opacity: .8;*/
	color: #fff;
}

.footer .social i,
.footer .social svg {
	font-size: 18px;
	float: left;
	margin: 2px 0;
	height: 18px;
	width: 18px;
	color: var(--site-color-main) !important;
	fill: var(--site-color-main) !important;
}

.footer .social div {
	height: 22px;
	width: 22px;
	float: left;
	text-align: left !important;
	margin: 0 6px 0 0;
}

.footer .social span {
	float: left;
	line-height: 22px;
	color: #8C92A8;
}

.footer .links {
	list-style-type: none;
}

.footer .links li {
	margin: 0 0 10px;
}

.footer .links a {
	color: #8C92A8 !important;
	font-weight: 600;
	/*margin: 0 10px;*/
	transition: opacity 300ms;
}

.footer .links a:hover {
	/*opacity: .8;*/
	color: #fff !important;
}

.footer .crypto p {
	margin: 0 0 12px;
	font-weight: 600;
	color: #8C92A8 !important;
}

.footer .crypto img {
	height: 29px;
	margin: 0 7px 0 0;
	transition: transform 300ms;
}

.footer .crypto img:hover {
	cursor: pointer;
	transform: translateY(-3px);
}

.footer .license img {
	height: 40px;
	margin: 30px 0 0;
	float: left;
	filter: invert(42%);
	-webkit-filter: invert(42%);
}

.footer .license .r {
	float: left;
	margin: 30px 0 0 20px;
	/*height: 40px;*/
}

.footer .license .r p {
	font-size: 12px;
	margin: 0;
	color: #8f9bad;

}

@media (max-width: 768px) {
	.footer {
		width: calc(100% + 40px);
		margin: 50px -20px -20px;
		padding: 20px;
	}

	.footer .stats, .footer .social, .footer .links, .footer .crypto {
		display: block;
		float: left;
		width: 100%;
		margin: 0;
	}

	.footer .stats, .footer .social {
		width: 50%;
	}

	.footer .links {
		list-style-type: none;
		text-align: center;
		margin: 0;
		padding: 0;
	}

	.footer .links li {
		display: inline-block;
		margin: 0 10px;
	}

	.footer .crypto {
		text-align: center;
		margin: 20px 0 0;
	}

	.footer .social div,
	.footer .social span {
		float: right;
	}

	.footer .social div {
		margin: 0 0 0 6px;
	}

	.footer .license {
		text-align: center;
	}

	.footer .license a {
		display: inline-block;
	}
}
/* END FOOTER */

@media (max-width: 768px){
	.width-1.responsive, .width-2.responsive, .width-3.responsive, .width-4.responsive, .width-5.responsive, .width-6.responsive, 
	.width-7.responsive, .width-8.responsive, .width-9.responsive, .width-10.responsive, .width-11.responsive, .width-12.responsive {
		width: 100% !important;
	}
	
	.grid.split-column-full.responsive { grid-template-columns: repeat( auto-fit, minmax(200px, 1fr)) !important; }
	
	.grid.split-column-2.responsive, .grid.split-column-3.responsive, .grid.split-column-4.responsive { grid-template-columns: 100% !important; }
	
	.flex.responsive, .dice-grid.responsive, .fair-grid.responsive {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;

		-webkit-box-orient: vertical !important;
		-webkit-box-direction: normal !important;
		-ms-flex-direction: column !important;
		flex-direction: column !important;
	}
	
	.header-max { display: none; }
}

@media (min-width: 768px){
	.header-min { display: none; }
	
	.pullout[data-pullout="menu"] { left: 0; }
}

/* deposit */
.deposit,
.deposit .btns,
.deposit .parameters {
	width: 100%;
	float: left;
}

.deposit .btns button {
	background: var(--site-color-bg-light);
	padding: 0 20px;
	border-radius: 6px;
	outline: 0;
	line-height: 34px;
	height: 34px;
	float: left;
	font-size: 14px;
	font-weight: 600;
	color: #8f9bad;
}

.deposit .btns button:hover {
	opacity: .8;
	cursor: pointer;
}

.deposit .btns button i {
	font-size: 12px;
	margin: 0 4px 0 0;
}

.deposit .btns .right {
	float: right;
}

.deposit .btns button.rf {
	margin: 0 15px 0 0;
	/*padding: 0;*/
	text-align: center;
	/*width: 34px;*/
}

.deposit .btns button.rf i {
	margin: 0;
}

.deposit .btns button.dp {
	background: var(--site-color-main);
	color: #fff;
	padding: 0 50px;
}

.deposit .parameters {
	margin: 15px 0;
}

.deposit .parameters input {
	width: calc(75% - 20px);
	float: left;
	background: var(--site-color-bg-light);
	border: 0;
	border-radius: 6px;
	line-height: 40px;
	height: 40px;
	padding: 0 10px;
	margin: 0 20px 0 0;
}

.deposit h3 {
	margin: 20px 0 10px;
	/*text-align: left;*/
	color: #8f9bad;
	/*float: left;*/
}

.deposit .c {
	margin: 0 25%;
	background: var(--site-glass-bg);
	float: left;
	width: 50%;
	border-radius: 16px;
	border: 1px solid var(--site-glass-border);
	box-shadow: var(--site-glass-shadow);
	backdrop-filter: blur(16px) saturate(140%);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
}

.deposit p.desc {
	margin: 0 0 10px;
}

.deposit .input {
	width: 50%;
	float: left;
	margin: 20px 25% 20px;
}

.deposit .input input,
.deposit .input button {
	width: 100%;
}

.deposit .input input {
	padding: 0 15px;
}

.deposit .input input,
.deposit .converter input {
	height: 40px;
	line-height: 40px;
	border-radius: 10px;
	background: rgba(12, 18, 28, 0.7);
	border: 1px solid var(--site-glass-border);
	outline: 0;
	color: var(--site-color-text);
	text-align: center;
}

.deposit .input input::placeholder,
.deposit .converter input::placeholder {
	color: rgba(246, 248, 250, 0.6);
}

.deposit .input button {
	margin: 10px 0 0;
	border-radius: 10px;
	height: 40px;
	line-height: 40px;
	background-image: linear-gradient(135deg, rgba(44, 212, 197, 0.95), rgba(246, 196, 83, 0.95));
	color: #0b1118;
	font-weight: 700;
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: 0 12px 26px rgba(44, 212, 197, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.deposit .input button:hover {
	cursor: pointer;
	opacity: 1;
	transform: translateY(-1px);
	filter: brightness(1.05);
}

.deposit .converter {
	width: calc(100% - 40px);
	float: left;
	margin: 20px;
}

.deposit .converter .i {
	float: left;
	width: calc(50% - 15px);
	background: rgb(25 38 43);
	border-radius: 6px;
}

.deposit .converter i.m {
	height: 16px;
	width: 12px;
	float: left;
	margin: 12px 9px;
	color: #8f9bad;
}

.deposit .converter .i i {
	float: left;
	margin: 13px;
}

.deposit .converter.c2 .i i {
	margin: 13px 17px;
}

.deposit .converter .i img {
	height: 22px;
	float: left;
	margin: 9px 13px;
}

.deposit .converter input {
	text-align: center;
	float: left;
	background: #131b1e;
}

.deposit .converter.c2 .i {
	width: 100%;
	float: left;
	margin: 0 0 10px;
}

.deposit .converter .i.r i,
.deposit .converter .i.r input,
.deposit .converter .i.r img {
	float: right;
	text-align: center;
}

#modal_rake {
	text-align: center;
}

#modal_rake button {
	width: 100%;
	float: left;
	margin: 10px 0;
	border-radius: 6px;
	text-align: center;
	padding: 10px 0;
	font-weight: 600;
	color: #fff;
	background: #00b549 !important
}

#modal_rake button:hover {
	cursor: pointer;
	opacity: .8;
}

#modal_rake p {
	text-align: center;
	color: #8f9bad;
}

#modal_rake .rakeback {
	font-size: 18px;
	font-weight: 600;
	/*margin: 12px 0;*/
	display: inline-block;
}

#modal_rake .fff {
	margin: 15px 0 0;
	color: #8f9bad;
	float: left;
	width: 100%;
	text-align: center;
}

#modal_rake .cn {
	width: 100%;
	float: left;
	text-align: center;
	margin: 0 0 1em;
}

#modal_rake #rb_error {
	width: 100%;
	float: left;
	text-align: center;
	font-size: 14px;
	color: #ff4141;
}

.hideAnim {
	transition: transform 300ms, opacity 300ms;
	transform: translateY(200px);
	opacity: 0;
}

#bb_info_container {
	position: fixed;
	bottom: 100px;
	left: 30%;
	right: 30%;
}

.bb_info {
	background: var(--site-color-bg-dark);
	border-radius: 8px;
	padding: 15px;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	float: left;
	width: 100%;
}

.bb_info.hidden {
	pointer-events: none;
}

.bb_info h3 {
	margin: 0 0 5px;
}

.bb_info p {
	margin: 0;
	color: #8f9bad;
}

.bb_info p span {
	font-weight: 600;
}

.bb_info p i {
	margin: 0 5px 0 2px;
}

.bb_info .left {
	width: calc(100% - 120px);
	float: left;
}

.bb_info a {
	float: right;
	background: var(--site-color-main);
	border-radius: 200px;
	padding: 5px 25px;
	font-weight: 600;
	margin: 10px 0;
}

.bb_info a:hover {
	cursor: pointer;
	opacity: .8;
}

@media (max-width: 768px) {
	.deposit .btns button,
	.deposit .parameters input,
	.deposit .converter .i,
	.deposit .c {
		width: 100%;
		margin: 0 0 15px !important;	
	}

	.deposit .btns .right {
		width: 100%;
		margin: 0;
	}

	#list_items {
		grid-template-columns: 1fr 1fr;
		grid-gap: 20px;
	}
}

@media (max-width: 767px) {
	body > div.flex.column.height-full.width-full > div.wrapper-page.flex.row > div.slider.slider-right.text-left.slider-top.flex.justify-content.show_chat.p-2.pullout_view.\.transition-5 {
	  display: none;
	}
}

#rake {
	background-image: conic-gradient(from 1turn,#f19511,#f6c722);
	border-color: transparent!important;
}

select {
	height: 40px;
    line-height: 40px;
    border-radius: 6px;
    background: var(--site-color-bg-body);
    outline: 0;
    color: #8f9bad;
    text-align: center;
    border-color: transparent;
}