/* MAIN */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;500;600&display=swap');

:root {
	--site-color-text: #ffffff;
	--site-color-main: #7a9c1b;
	--site-color-main-light: #BBBBD2;
	--site-color-main-transparent: #9370db80;
    --site-color-bg-body: #161616;
    --site-color-bg-dark: #232325;
    --site-color-bg-light: #161617;
	--site-color-bg-active: #232325;
	--site-color-bg-dark-transparent: #01010780;
	--site-color-bg-light-transparent: #01010780;
	
	--site-color-success: #00e258;
    --site-color-warning: #ffe063;
    --site-color-danger: #ff5548;
    --site-color-info: #2F96B4;
	
	--site-color-success-transparent: #00e25880;
    --site-color-warning-transparent: #ffe06380;
    --site-color-danger-transparent: #ff554880;
	
	--site-color-blue: #639ad5;
    --site-color-indigo: #6610f2;
    --site-color-purple: #8857f7;
    --site-color-pink: #fd3173;
    --site-color-red: #de4c41;
    --site-color-crimson: #ed143d;
    --site-color-orange: #fd7e14;
    --site-color-yellow: #1E90FF;
    --site-color-green: #00c74d;
    --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;
}

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

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


/* Prevent double-tap zoom */
button, a, input, textarea, select, label {
  touch-action: manipulation;
}

/* Prevent long-tap selection and context menu */
* {
  -webkit-user-select: none;       /* Disable text selection on iOS Safari */
  -webkit-touch-callout: none;     /* Disable context menu on iOS Safari */
  user-select: none;               /* Disable selection on other browsers */
}

/* Optional: disable double-tap zoom globally */
html, body {
  touch-action: manipulation;
  -ms-touch-action: manipulation; /* For IE/Edge */
}

.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: 'Poppins', sans-serif;*/
	font-family: "Titillium Web",sans-serif;
}


::-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(171, 188, 204, 0.1);
}

::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(45.87deg, #8aba0385 6.6%, #CBFB45 102.94%);
}

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

body {
	/*font-family: Roboto,sans-serif;*/
	/*font-family: 'Poppins', sans-serif;*/
	font-family: "Titillium Web",sans-serif;
    color: var(--site-color-text);
    z-index: 50;
    background: 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;
}

.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}



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

.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 {
    outline: 1px solid hsla(0, 0%, 100%, .16);
}

.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: var(--site-color-main-transparent);
}

.bg-light {
	/*background: var(--site-color-bg-light);*/
}

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

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

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

.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% / 10) * 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-color-bg-light);*/
	background-color: #000000;
    -webkit-box-flex: 1;
    flex: 1 1 0%;
    overflow: hidden;
}

.pullout-left {
	width: 210px;
	left: -250px;
	/*box-shadow: 0 18px 22px -4px #00000069;*/
	/*width: var(--site-chat-width);*/
	/*left: calc(var(--site-chat-width) * (-1));*/
    /*border-right: solid 1px #434343;*/
    transition: none;
    border-right: 1px solid hsla(0, 0%, 100%, .04);
}


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


.main-panel {
    position: absolute;
    right: 0;
    left: 0;
    z-index: 0;
    height: 100%;
    overflow: auto;
    overflow-x: hidden;
    padding: 10px 19px;
    left: 250px;
    background: #000000;
    padding-right: 25px;
	    background-image: url(https://howl.gg/static/image/home-bg.098ef864.png);
}

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

	.wrapper-page {
		overflow: auto;

	}

	div.pullout[data-pullout="chat"] {
		display: none;
		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: #263039 !important;
	}

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

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

	.main-panel {
		overflow: auto;
	}

	.pullout {
		z-index: 2;
	}
}

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

.site-button.black {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    border-radius: 10px;
    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: transparent;
    /* background-color: #1d803a; */
    /* background-image: conic-gradient(from 1turn, #cbfb4563, #CBFB45); */
    /* box-shadow: rgb(51 193 108 / 15%) 0px 4px 4px; */
    margin-left: 10px;
    margin-right: -10px;
    outline: 1px solid hsla(0, 0%, 100%, .16);
}
.site-button.pink { 
	background-color: rgb(41 149 84); 
	max-width: 700px;
}

.site-button.purple {
    background: linear-gradient(92.76deg, #00E258 0.34%, #009F3E 79.24%);
    box-shadow: 0 3px 0px #00702c, 0px 0px 10px rgba(1, 176, 69, 0.5);
    animation: fallBounce 0.8s ease-out;
	max-width: 800px;
}

.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;*/
    /* Use linear gradient for gray color */
    color: gray;
    background: linear-gradient(to bottom, #cbfb45, #cbfb45);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 24px;
}


.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: rgb(25 38 43);
	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: #7a9c1b;
}

.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;
    background: #030507;
}

/* END FIRST */

/* HEADER */

.header {
	width: 100%;
	background-color: #030602;
	position: relative;
	top: 0;
	left: 0;
	z-index: 3;
    height: 60px;
    border-bottom: 1px solid hsla(0, 0%, 100%, .04);}

.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: 0px auto;
	/*grid-template-rows: 50px;*/
}

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

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

.header-min .header-logo {
	/*width: 100%;*/
}

@media (max-width: 768px) {
    .header-logo a, .header-logo img {
        width: unset;
        /* margin-top: 0px; */
        z-index: 4;
        margin-left: 35px;
        margin-top: 3;
    }
}


.header-logo a {
	width: 100%;
    transition: transform 0.2s ease;
}

.header-logo a:hover {
    transform: scale(1.05);
}  
    


.header-menu-bottom .header-menu-button {
    font-size: 10px;
    font-weight: 700;
    outline: 1px solid #bcff001a;
    border-radius: 10px;
	padding: 4 10 4;
}

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

.header-menu-center .header-menu-button {
    width: 190px;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 0;
    float: left;
    background-size: 200% 200%; /* Double the background size */
    overflow: hidden;
    transition: background-color 0.3s, transform 0.3s ease; /* Transition for smooth effect */
    margin-bottom: 1px;
    margin-top: 1px;
    transform-style: preserve-3d; /* Ensures proper 3D rendering */
    transform-origin: center; /* Set transform origin to center */
}

.header-menu-center .header-menu-button:hover {
    background: linear-gradient(90deg, #ffffff00, #CBFB45);
    border-radius: 20px;
    color: #fff;
}


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

}

.header-menu-center .header-menu-button .header-side-button:hover {
    animation: none; /* No additional animation for side buttons */
}


.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,#ffc34c47,rgba(115,112,244,0));
}

.header-side-button {
    cursor: pointer;
    color: rgb(255, 255, 255);
    font-weight: 600;
	text-transform: uppercase;
}

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

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

.header-side-button .ml-1 {
    float: left;
    line-height: 22px;
    margin-left: 10px;
    letter-spacing: 1px; /* Ensure the letter-spacing value is in px */
    font-weight: 600; /* Use 800 for extra bold */
    font-family: 'Inter', sans-serif; /* Apply the Inter font */
}

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

.header-side-button.active {
    border-left: 1px solid #ffffff59;
    border-radius: 0px 1px 1px 0px;
    opacity: 1;
    width: calc(100% + 42px);
    padding-left: 13px;
    /* margin: 0px 0px -4px -18px; */
    border-width: 10px;
    background: linear-gradient(to right, transparent 0%, rgb(45 63 70) 100%);
    /* padding-top: 1%; */
    /* padding: 7px 13px; */
    background: transparent;
    border-radius: 20px;
}

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

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

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

@media (max-width: 768px) {
    .header .header-panel {
        /* Styles for screens 768px and below */
        /*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: #3BC117;
  box-shadow: 0 0 0 0 rgb(0 255 8);
  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: #3BC117;
	font-weight: 600;
}

.header .balance-box {
    /* background: var(--site-color-bg-dark); */
    /* background: #111111; */
    padding: 0 15px;
    height: 40px;
    border-radius: 10px;
    font-weight: 600;
    outline: 1px solid hsla(0, 0%, 100%, .16);
}

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

@media (max-width: 1149px) {
    .wissman-gradient {
        display: none;
    }
}

.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, #080808 -20%, #CBFB45 100%);
}

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

.user-av .drp {
	position: absolute;
	right: 0;
	bottom: -110px;
	background: linear-gradient(180deg, rgb(0 0 0), #0d1200);
	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(180px);
	pointer-events: all;
}

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

.user-av .drp div:hover {
	cursor: pointer;
	background: #9dff0067;
	color: #fff;
}

.user-dropdown {
	line-height: 50px !important;
	color: #9DFF00;
	font-size: 30px;
	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%;
}

  @media (max-width: 971px) {
    .user-av .ml-2 {
      display: none;
    }
  }

.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: #CBFB45;
}

.header .balance-box div i {
	color: #ffc34c;
	margin: 4px 4px 0 0;
	float: left;
}

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

.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: 20px;
    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;
    border-color: transparent;
    outline: 1px solid hsla(0, 0%, 100%, .16);
}

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

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

.big-menu {
	background: #1c1e2200;
	margin-left: -10px;
    margin-top: 35px;
}

.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 0px;
}

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

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

.menu-section-title {
    /*margin: 0px 0 5px;*/
    float: left;
    width: 100%;
    font-size: 16.5px;
    display: flex;
    justify-content: space-between;
}

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

.menu-section-title i {
	margin-left: 5px;
	color: #CBFB45;
	transition: opacity 300ms, transform 300ms;
    font-size: x-large;
}

.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;
    background: #000000;
}

.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: #000000 !important;
	opacity: 1 !important;
	border-radius: 10px;
}

.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: 10px;
	-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);
    outline: 1px solid hsla(0, 0%, 100%, .16);
}

.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 {
    overflow-x: auto; /* Enables horizontal scrolling */
    white-space: nowrap; /* Prevents text from wrapping */
    width: 100%; /* Ensures it takes full width */
}

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

.table-header .table-row, .table-footer .table-row {
	background: #00000000;
	font-weight: 500;
}

.table-body .table-row {
	background: #cbfb4505;
	font-weight: 400;
}

.table-body .table-row:hover {
    background: #cafb4518;
    cursor: pointer;
	transition: background 0.3s ease;
}

.table-container.dice-table .table-row:nth-child(even):hover {
  background: #cafb451c;
  cursor: pointer;
  transition: background 0.3s ease;
}

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

.table-row {
    display: flex;
    gap: 5px;
    /*min-width: 1200px;*/ /* Adjust based on content */
    border-bottom: solid 2px var(--site-color-bg-dark);
    align-items: center;
}

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

/* END TABLE */

/* LOGIN */
.login-button {
	padding: 7px 40px !important;
	margin: 0 10px !important;
	text-transform: uppercase;
}
.signup-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: 4px;
	/*background: var(--site-color-bg-dark);*/
    background: #050608;
}

#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: #cbfb451a;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(15px);
}

.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-color: #1E1E1F; */
    /* -webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5); */
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
    background: linear-gradient(to bottom, #000000 0%, #191f09 50%, #000000 100%);
}

.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: var(--site-color-bg-light);
    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: #1a1806;
	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: linear-gradient(45.87deg, #8aba0385 6.6%, #CBFB45 102.94%);
    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: #000000;
    border: solid 1px #ffffff45;
    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;
}

.swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: #CBFB45 !important;
}

/* new chat */
.chat-message {
    border: 0;
    width: 100%;
    float: left;
    padding: 12px;
    margin: 5px 0px 5px;
    background-image: linear-gradient(180deg, rgb(0 0 0), #bcff0008);
    border-radius: 10px;
    /*outline: 1px solid hsla(0, 0%, 100%, .16);*/
}

span.balance {
    color: #CBFB45;
}

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

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

.chat-message .content .msg {
	color: #9DFF00;
	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: #528b44;
	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: #24262b00;
	box-shadow: -9px 1px 22px 0px #1d5a3996;
}

.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;
    outline: 1px solid #CBFB45;
}

.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,
.slot-select {
	float: left;
	width: 100%;
	position: relative;
	padding: 0 0 10px;
	margin: 0 0 -10px;
}

.lang-select .selected,
.slot-select .selected {
	background: #000000;
	outline: 1px solid hsla(0, 0%, 100%, .16);
	border-radius: 8px;
	padding: 8px;
	position: relative;
	float: left;
	width: 100%;
	transition: opacity 300ms;
}

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

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

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

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

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

.lang-select .options, .slot-select .options {
    position: absolute;
    left: 0;
    right: 0;
    top: 51px;
    background: #000000;
    border: 1px solid #ffffff2e;
    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,
.slot-select[data-active="true"] .options {
	transform: translateY(0);
	opacity: 1;
	pointer-events: all;
}

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

.lang-select .options .opt i.check, 
.slot-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,
.slot-select .options .opt:hover {
	/*background: var(--site-color-bg-light);*/
	background: #cbfb4517;
	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;}

.slot-select .options[data-activeslot="0"] .opt i.check[data-slotid="0"] {opacity: 1;}
.slot-select .options[data-activeslot="1"] .opt i.check[data-slotid="1"] {opacity: 1;}
.slot-select .options[data-activeslot="2"] .opt i.check[data-slotid="2"] {opacity: 1;}
.slot-select .options[data-activeslot="3"] .opt i.check[data-slotid="3"] {opacity: 1;}
.slot-select .options[data-activeslot="4"] .opt i.check[data-slotid="4"] {opacity: 1;}

/* END CHAT */


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

.dice .box {
	    background: #cbfb450d;
	border-radius: 10px;
	float: left;
	text-align: left;
	padding: 15px;
	position: relative;
}

.dice .box h4 {
	margin: 0 0 8px;
	color: #7c8399;
	float: left;
	width: 100%;
}

.dice .left.box {
	width: 25%;
	float: left;
	padding-bottom: 113px;
	animation: slideSwing 0.7s ease-out;
}

.dice .right.box {
	width: calc(75% - 30px);
	float: left;
	margin: 0 0 0 30px;
	animation: slideSwing 0.7s ease-out;
	order: 1;
}

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

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

	.dice {
		flex-direction: column;
	}

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

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

	.slots {
		height: 60px !important;
	}

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

	#type_slow.is_fast .slots-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: #cbfb450d;
}

.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: #cbfb450d;
}

.dice .inputs {
	border: 2px solid #2A3547;
	border-radius: 10px;
	float: left;
	width: 100%;
	padding: 10px;
}

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

#dice_bet,
#minesweeper_bet,
#minesweeper_cashout {
    border-color: rgb(41, 149, 84);
    background: linear-gradient(92.76deg, #00E258 0.34%, #009F3E 79.24%);
    box-shadow: 0 3px 0px #00702c, 0px 0px 10px rgba(1, 176, 69, 0.5);
    border-radius: 10px;
    height: 40px;
    line-height: 40px;
    padding: 0;
    width: 100%;
    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);
    animation: fallBounce 0.8s ease-out;
}

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

#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 3px 0px #067a35, 0px 0px 15px rgb(62 215 60 / 40%);
	background: #0ac153;
}

#dice_bet.lose,
#minesweeper_bet.lose,
#minesweeper_cashout.lose {
	box-shadow: 0 3px 0px #af2a2a, 0px 0px 15px rgb(215 60 60 / 40%);
	background: #ff4343;
}

.dice .slider_field {
	background: #111111;
	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: 80px 0 0;
	/*text-align: center;*/
}

.table-container.dice-table .table-column {
	padding-left: 40px !important;
}
@media (max-width: 768px) {
  .table-container.dice-table .table-column {
    padding-left: 10px !important;
  }
}
.table-container.dice-table .table-row {
	border-bottom: 0;	
}

.table-container.dice-table .table-body .table-row {
	padding: 10px 0;
    margin-bottom: 6px;
    border-radius: 4px;
}

.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: #000000;
    margin-bottom: 6px;
}

/*.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: #24262b00;
	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: #cbfb450d;
	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 {
    text-align: left;
    margin: 0 auto;
    /*margin-left: 20px;*/
	max-width: 1150px;
}

@keyframes blurIn {
    from {
        filter: blur(10px);
        opacity: 0;
    }
    to {
        filter: blur(0);
        opacity: 1;
    }
}

.home img {
    max-width: 100%;
    height: auto;
    display: block;
    animation: blurIn 0.8s ease-out;
}


.home img.stretch-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover; /* or use object-fit: fill; if you want to stretch and potentially distort */
    transition: transform 0.3s ease-in-out;
}

.home img:hover {
  transform: translateY(-6px); /* Move image up */
  cursor: pointer;
  transition: transform 0.2s ease;
}

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

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

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

.home p {
	/*opacity: .7;*/
}

.home .grid2,
.home .grid3,
.home p,
.home h2 {
	width: 100%;
	float: left;
    font-size: 1.17em;
    font-weight: 600;
}

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

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

@media (max-width: 600px) {
    .home .slider2 {
        margin-top: 0px;
        height:230px;
        right: -10;
    }
}

/*.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);*/
}

@media (max-width: 600px) { /* Adjust the max-width as needed */
    .home .slider2 img.s {
        transform: scale(2.7); /* Increase the scale as needed */
        transform-origin: right center; /* Focus the zoom on the right side */
        top: 70;
    }
}

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

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

.home .slider2 .arrow.right {
	left: unset;
	right: 0;
	/*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: #005CF1;
}

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

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

.options-container .option {
	float: left;
	background: linear-gradient(to bottom, #111111 0%, /* Top: Black */ #cbfb4530 50%, /* Middle: Gradient transition */ #111111 100% /* Bottom: Black */);
	border-radius: 8px;
	padding: 10px 15px;
	width: 100%;
	/* margin: 0 15px 15px 0; */
	transition: opacity 300ms, transform 300ms;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.options-container .option:hover {
	/*transform: translateY(-3px);*/
	opacity: .8;
}

.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 */

/* CASES */
.cases {
	text-align: left;
}

.cases .drops-container {
	width: 100%;
	float: left;
	overflow-x: clip;
	position: relative;
}

.cases .drops-container .gradient {
	width: 300px;
	/*height: calc(100% + 2 * 3px); */
	top: 0;
	bottom: 0;
	position: absolute;
	right: 0;
	/*border-top-right-radius: 8px;*/
	/*border-bottom-right-radius: 8px;*/
	z-index: 6;
	background: linear-gradient(to left, var(--site-color-bg-body) 0%, transparent 100%);
}

.cases .drops {
	float: left;
	/*width: 100%;*/
	width: 9999px;
	margin: 0;
	height: 112px;
	overflow: hidden;
	/*display: grid;*/
	/*grid-gap: 15px;*/
	/*grid-template-columns: repeat(7, 1fr);*/
}

.cases .drops .item {
	border-radius: 10px;
	background: var(--site-color-bg-dark);
	float: left;
	padding: 15px 40px 10px;
	position: relative;
	transition: transform 300ms;
	text-align: center;
	height: 112px; /* 107 */
	width: 185px;
	margin: 0 15px 0 0;
	/*width: 15%; 441C26*/
	background: linear-gradient(180deg, #19191F 0%, var(--color) 200%);
}

#unboxing_list_cases{
	width: 100%;
	float: left;
    /*overflow: hidden;*/
    /*overflow-y: auto;*/
	display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.cases .container .case:hover {
	cursor: pointer;
	transform: translateY(-3px);
}

.cases .drops .item:hover {
	cursor: pointer;
}

.cases .drops .item .item-details,
.cases .drops .item .case-details {
	position: absolute;
	top: 15px;
	left: 0;
	right: 0;
	bottom: 0;
	transition: transform 300ms, opacity 300ms;
}

.cases .drops .item:hover .item-details,
.cases .drops .item .case-details {
	transform: scale(0);
	opacity: 0;
}

.cases .drops .item:hover .case-details {
	transform: scale(1);
	opacity: 1;
}

.cases .drops .item .case-details img {
	margin: 10px auto 0 !important;
}

.cases .drops .item .case-details p {
	margin: 1px 0 0;
}

.cases .drops .item .user {
	position: absolute;
	top: -34px;
	left: 50%;
	transform: translate(-50%, 15px);
	transition: transform 300ms, opacity 300ms;
	opacity: 0;
}

.cases .drops .item:hover .user {
	opacity: 1;
	transform: translate(-50%, 0);
}

.cases .drops .item .user img {
	height: 40px;
	border-radius: 50%;
	border: 2px solid var(--site-color-main);
}

.cases .drops .item .price {
	position: absolute;
	top: 5px;
	right: 10px;
	font-size: 12px;
	font-weight: 600;	
}

.cases .drops .item .price span {
	transition: opacity 300ms;
}

.cases .drops .item:hover .price-item span,
.cases .drops .item .price-case span {
	opacity: 0;
}

.cases .drops .item:hover .price-case span {
	opacity: 1;
}

.cases .drops .item img.skin {
	height: 50px;
	display: block;
	margin: 0 auto;
	filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.4));
}

.cases .drops .item img.logo {
	position: absolute;
	left: 0;
	bottom: 0;
	opacity: .1;
	user-select: none;
}

.cases .drops .item p {
	width: 100%;
	float: left;
	margin: 0 0 -3px;
	display: block;
	font-size: 16px;
	font-weight: 600;
	opacity: .7;
}

.cases .drops .item span {
	font-size: 12px;
}

.unbox-game-info {
	width: 100%;
	float: left;
	display: block !important;
	margin: 35px 0 0 !important;
}

.unbox-case {
	width: 100%;
	float: left;
	overflow: hidden;
}

.case-btns {
	width: 100%;
	float: left;
	margin: 15px 0;
}

.case-list {
	width: 100%;
	float: left;
	margin: 40px 0 0;
}

.case-list div.text-left {
	opacity: .7;
	/*margin: 0 0 8px;*/
}

.cases h2 {
	margin: 30px 0 5px;
	float: left;
	width: 100%;
}

.cases .container {
	width: 100%;
	float: left;
	display: grid;
	grid-gap: 15px;
	grid-template-columns: repeat(5, 1fr);
	grid-auto-rows: 1fr;
	transition: transform 300ms;
	/*padding: 0 20px;*/
}

.cases .container .case {
	border-radius: 10px;
	background: var(--site-color-bg-dark);
	float: left;
	padding: 10px 20px;
	position: relative;
	transition: transform 300ms;
	text-align: center;
	width: 100%;
}

.cases .container .case img {
	/*height: ;*/
	width: 80%;
	margin: 0 10%;
}

.cases .container .case p {
	margin: 0;
}

.cases .container .case p.name {
	font-size: 16px;
	font-weight: 600;
}

.cases .container .case p span {
	opacity: .8;
}

.cases .container .case p i {
	color: #ffc34c;
}

.case-btns .site-button {
	margin: 0 0 0 15px !important;
	padding: 10px 20px !important;
	float: right;
}

.case-btns .site-button.pink {
	background: linear-gradient(92.76deg, #fd3173 0.34%, #af1949 100%);
	box-shadow: 0px 0px 10px #fd317380;
}

.case-btns div {
	float: left;
	line-height: 38px;
	font-weight: 600;
	font-size: 16px;
}

@media (max-width: 768px) {
	.cases .container {
		grid-template-columns: repeat(2, 1fr);
	}
}
/* END CASES */

/* FOOTER */
.footer {
    /* width: calc(100% + 160px); */
    /* margin: 50px -80px -40px; */
    display: flex;
    /*background: #050708;*/
	background: linear-gradient(to bottom, #000000 0%, /* Top: Black */ #cbfb4508 50%, /* Middle: Gradient transition */ #000000 100% /* Bottom: Black */);
    padding: 20px 50px;
    text-align: left;
    /* border-top: 1px solid #ffffff21; */
    flex-direction: row;
    flex-wrap: wrap;
    border: 1px solid hsla(0, 0%, 100%, .04);
	
}

.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: #CBFB45 !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: 770px){
	.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 .parameters .slot-select {
	width: 25%;
}

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

.deposit .c {
    margin: 0 25%;
    background: linear-gradient(to bottom, #111111 0%, #cbfb450d 50%, #000000 100%);
    float: left;
    width: 50%;
    border-radius: 8px;
}

.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: 6px;
	background: var(--site-color-bg-body);
	outline: 0;
	color: #8f9bad;
	text-align: center;
}

.deposit .input button {
	margin: 10px 0 0;
	border-radius: 6px;
	height: 40px;
	line-height: 40px;
	background: var(--site-color-main);
	color: #fff;
	font-weight: 600;
}

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

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

.deposit .converter .i {
    float: left;
    width: calc(50% - 15px);
    background: #19262b00;
    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: #000000;
}

.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 .parameters .slot-select,
	.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: 768px) {
	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;
}

.header-max .header.layout .header-menu-top {
    display: none; /* This will hide the header-menu-top element */
}


.referandearnbutton {
    width: 209px;
    height: 45px;
    background: #005CF1;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    outline: none;
    display: flex;
    align-items: center; /* Align items vertically */
    justify-content: center;
    margin-bottom: 35px;
    gap: 10px;
}

.loginbutton-button {
    border: 1px solid #FFF;
    color: #FFF;
    opacity: 0.4;
    background: transparent;
    border-radius: 100px;
    width: 74.42px;
    height: 38px;
    margin-top:  10px;
}

.custom-hr {
    margin: 10px 0;
    height: 0.1px;
    background: #ffffff0f;
    border: none;
}

/*SLIEDERMC START*/


.center {
    width: 50%;
	height: 50%;
}

.title {
	color: #45f882;
	font-size: 70px;
	font-family: GreatSejagad;
}

section.slider {
    padding: 10px 0;
    background: #1A1F40;
    height: 100vh;
}

section.slider .title {
    font-size: 42px;
    position: relative;
    top: 24px;
}

.slider-title {
    display: flex;
    justify-content: space-between;
    align-items: end;
	margin-bottom: 50px;
}

button.slider__button {
	background: #22307A;
    /*border: 3px solid #45f882;*/
    width: 50px;
    height: 50px;
    font-size: 25px;
    cursor: pointer;
    color: #74767A;
    opacity: 1 !important;
    border-radius: 10px;
}

button.slider__button:hover {
    border: 3px solid #3656FF;
    background: transparent;
    color: #ffffff;
}

.slider .btns {
    text-align: center;
    margin-top: 50px;
}

.slider .btns button {
    height: 48px;
    width: 150px;
    border-radius: 50px;
    font-size: 18px;
    padding: 0 10px;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
    background: none;
    font-family: charlieUltra;
    border: 3px solid #45f882;
    color: #45f882;
	letter-spacing: 1px;
}

.slider .btns button:hover {
    background: #45f882;
    border: 3px solid #45f882;
    color: #0e0e16;
}



.slider__track {
  display: flex;
  overflow-x: auto;
  -ms-scroll-snap-type: x mandatory;
      scroll-snap-type: x mandatory;
  padding-inline: var(--slider-padding);
  scroll-behavior: smooth;
  list-style-type: none;
  padding: 0;
  margin-right: calc(--var(slider-column-gap) * -1);
  scrollbar-width: none;
}

.slider__track > * {
  flex: 0 0 var(--slide-width);
  min-width: var(--slide-min-width);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  padding-right: var(--slider-column-gap);
}

.slider__track::-webkit-scrollbar {
  display: none;
}

.slider__buttons {
  margin-top: 1rem;
}

.slider__buttons [disabled] {
  opacity: 0.5;
}

.slide {
	display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1/1;
    position: relative;
    border: 3px solid #383c4e;
    border-radius: 10px;
    padding: 3px;
}

.slideimg {
	 width: 100%;
	 border-radius: 10px;
}


* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins',sans-serif;
}

html, body {
    height: 100%;
}

@font-face {
	font-family: charlieUltra;
	src: url(fonts/charlie-display-ultra.ttf);
}

@font-face {
	font-family: GreatSejagad;
	src: url(fonts/Great_Sejagad.ttf);
}


.center {
    width: 50%;
	height: 50%;
}

.title {
	color: #45f882;
	font-size: 70px;
	font-family: GreatSejagad;
}

section.slidermc {
    /*background: #1A1F40;*/

    /*height: 100vh;*/
}

/* Media query for screens with a maximum width of 768px */
@media (max-width: 768px) {
    section.slidermc {
        margin-top: 7px; /* Example: Reduce top margin for smaller screens */
        padding-right: 1px;
        padding-left: 1px;
    }
}

section.slidermc .title {
    font-size: 42px;
    position: relative;
    top: 24px;
}

/*.slidermc-title {
    display: flex;
    justify-content: space-between;
    align-items: end;
	margin-bottom: 10px;
}lookdown!!!slidermc-titleyouchangedit*/

.slidermc-title {
    display: flex;
    justify-content: space-between;
    align-items: end;
    /*margin-bottom: 10px;*/
    color: #f0f0f0 !important;
    text-decoration: none;
    font-size: 12px;
    cursor: pointer;
    background-color: transparent;
    /*border: 1px solid #9090901f;*/
    outline: none;
    /*background: #161736;*/
}

.slidemc_content {
    position: absolute;
    bottom: 20px;
    width: 100%;
    padding: 0 30px 0 30px;
    text-align: center;
}

button.slidermc__button {
	background: #22307A;
    /*border: 3px solid #45f882;*/
    width: 35px;
    height: 35px;
    font-size: 15px;
    cursor: pointer;
    color: #ffffff;
    opacity: 1 !important;
    border-radius: 10px;
    /*border: 2px solid #ffffff1f;*/
    box-shadow: rgba(0, 0, 0, 0.41) 0px 18px 22px -4px;
    background: #9090901f;
}



button.slidermc__button:hover {
    border: 2px solid #69696926;
    color: #ffffff;
    box-shadow: rgba(0, 0, 0, 0.41) 0px 18px 22px -4px;
    background: linear-gradient(rgb(0 138 255), rgba(21, 26, 60, 0.76), rgba(0, 131, 255, 0.31));
    background: url(../img/noisebackground.png) no-repeat 0 0 var(--site-color-bg-body);
    border: 2px solid #69696940;
}

.slidemc_content p {
    color: #fff;
    font-family: charlieUltra;
    font-size: 22px;
	letter-spacing: 1px;
}
.slidermc .btns {
    text-align: center;
    margin-top: 50px;
}

.slidermc .btns button {
    height: 48px;
    width: 150px;
    border-radius: 50px;
    font-size: 18px;
    padding: 0 10px;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
    background: none;
    font-family: charlieUltra;
    border: 3px solid #45f882;
    color: #45f882;
	letter-spacing: 1px;
}

.slidermc .btns button:hover {
    background: #45f882;
    border: 3px solid #45f882;
    color: #0e0e16;
}

/*.slidemc:hover {
    border: 3px solid #ffffff40;
    border-radius: 29px;
}*/

.slidermc {
    --slidermc-padding: 1rem;
    --slidermc-column-gap: 1rem;
    /* --slide-width: 13.96%; */
    --slide-min-width: 5.3rem;
    position: relative;
    overflow: hidden;
    padding-right: 1px;
    padding-left: 1px;
}

@media (max-width: 768px) {
    .slidermc {
        padding-right: 1px; /* Adjust padding for smaller screens */
        padding-left: 1px; /* Adjust padding for smaller screens */
    }
}

.slidermc__track {
  display: flex;
  overflow-x: auto;
  -ms-scroll-snap-type: x mandatory;
      scroll-snap-type: x mandatory;
  padding-inline: var(--slidermc-padding);
  scroll-behavior: smooth;
  list-style-type: none;
  padding: 0;
  margin-right: calc(--var(slidermc-column-gap) * -1);
  scrollbar-width: none;
  overflow-y: hidden;
  padding-top: 10;

}

.slidermc__track > * {
  flex: 0 0 var(--slide-width);
  min-width: var(--slide-min-width);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  /*padding-right: var(--slidermc-column-gap);*/
}

.slidermc__track::-webkit-scrollbar {
  display: none;
}

.slidermc__buttons {
  margin-top: 0rem;
  margin-right: 22px;
}

@media (max-width: 768px) {
    .slidermc__buttons {
        margin-right: 0px; /* Adjust as needed */
    }
}

.slidermc__buttons [disabled] {
  opacity: 0.5;
}



.slidemc:hover img {
  transform: translateY(-8px); /* Move image up by 8px */
  filter: contrast(120%) brightness(105%) saturate(110%);
  transition: transform 0.3s ease, filter 0.3s ease;
}

.slidemc {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    position: relative;
    border-radius: 5px;
    transition: transform 0.3s ease; /* Added transition for smooth animation */
    /*background: #9090901f;*/
    backdrop-filter: blur(7px);
    width: calc(95% - 5px);
    margin-bottom: 15;
}


.slidemc img {
    transition: filter 0.3s ease; /* Smooth transition for blur effect */
    border-radius: 10px; /* Match border radius of the container */
  
}



// ends here  //

@media (max-width: 768px) {
    .slidemc {
        margin-left: 0;
        padding: 3;
    }
}

.slidemcimg {
	 width: 100%;
	 border-radius: 28px;
 	 /*box-shadow: 4px 0px 6px 0px #00000094;*/
	 z-index: 55;
}

/* Responsive Media Query */
@media (max-width: 1400px){
	.container {
		width: 100%;
	}
}

@media (min-width: 1200px){
	.menu ul {
		display: flex;
		justify-content: center;
	}
	.mob-icons {
		display: none;
	}
}

@media (max-width: 768px) {
	.main_title {
		font-size: 60px;
		line-height: 60px;
	}
	.title {
		font-size: 60px;
	}
}

@media (max-width: 600px) {
	.title {
		font-size: 40px;
	}
	.main_title {
		font-size: 15px;
		line-height: 30px;
 	    padding-left: 20px;
        padding-right: 20px;
	}
	section.slidermc .title {
		font-size: 40px;
	}
	button.slidermc__button {
		width: 40px;
		height: 40px;
		font-size: 20px;
	}
    .slidermc .btns button {
        font-size: 16px;
    }
}

@media (max-width: 426px) {
	.main_title {
		font-size: 15px;
		line-height: 27px;
 	    padding-left: 20px; /* Add left padding */
        padding-right: 20px; /* Add right padding */
	}
	section.slidermc .title {
		font-size: 30px;
		top: 10px;
	}
}
/* Responsive Media Query End */

@media (max-width: 1400px){
	.container {
		width: 100%;
	}
}

@media (min-width: 1200px){
	.menu ul {
		display: flex;
		justify-content: center;
	}
	.mob-icons {
		display: none;
	}
}

@media (max-width: 768px) {
	.main_title {
		font-size: 60px;
		line-height: 60px;
	}
	.title {
		font-size: 60px;
	}
}

@media (max-width: 600px) {
	.title {
		font-size: 40px;
	}
	.main_title {
		font-size: 15px;
		line-height: 30px;
 	    padding-left: 20px;
        padding-right: 20px;
	}
	section.slidermc .title {
		font-size: 40px;
	}
	button.slidermc__button {
		width: 40px;
		height: 40px;
		font-size: 20px;
	}
    .slidermc .btns button {
        font-size: 16px;
    }
}

@media (max-width: 426px) {
	.main_title {
		font-size: 15px;
		line-height: 27px;
 	    padding-left: 20px; /* Add left padding */
        padding-right: 20px; /* Add right padding */
	}
	section.slidermc .title {
		font-size: 30px;
		top: 10px;
	}
}



/* PLAY BUTTON HOME */

.image-container {
  position: relative;
  display: inline-block;
}

.play-button {
  box-shadow: 1px 1px 10px rgba(0 0 0 / 50%);
  background-color: #CBFB45;
  position: absolute;
  top: 43%;
  left: 34%;
  transform: translate(-50%, -50%);
  display: none;
  padding: 3px 15px;
  font-size: 15px;
  color: rgb(0, 0, 0);
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.image-container:hover .play-button {
  display: block;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.5s ease-out forwards;
  /* For better browser compatibility */
  -webkit-animation: fadeInUp 0.5s ease-out forwards;
  -moz-animation: fadeInUp 0.5s ease-out forwards;
  -o-animation: fadeInUp 0.5s ease-out forwards;
  -ms-animation: fadeInUp 0.5s ease-out forwards;
}

/* END PLAY BUTTON HOME */



<style>
.custom-table-container {
    position: relative;
    width: 100%;
    /* Other styles you already have */
}

.custom-table-container::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px; /* Adjust the height to your needs */
    background-image: url('template/img/livefade.png');
    background-size: cover; /* Stretch the image to cover the entire area */
    background-repeat: no-repeat;
    z-index: 1000; /* Ensure it overlays properly */
    pointer-events: none; /* Makes sure it doesn’t interfere with interactions */
}
</style>

/* SLOTS */

h2.bb {
  float: left;
  margin: 0;
  text-align: left;
}

h2.bb a {
  background: #1f2e34;
  border-radius: 6px;
  padding: 0 15px;
  font-size: 14px;
  float: left;
  line-height: 32px;
  height: 32px;
  color: #8f9bad;
  margin-left: 20px;
}

h2.bb a:hover {
  cursor: pointer;
  opacity: .8;
}

h2.bb a i {
  margin-right: 4px;
}

h2.bb span {
  /*float: left;*/
}

.hide_if_not_battle {
  display: none;
}

#game_wrapper {
  padding-bottom: 56.25%;
  background: #24262b4f;
  float: left;
  width: 100%;
  height: 83%;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  position: relative;
}

#game_wrapper[data-fs="true"] {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  height:100%;
  z-index: 39;
}

#game_wrapper iframe {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
  z-index: 5;
}

#game_wrapper .error {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
}

#game_wrapper .error p {
  color: #8f9bad;
}

#game_wrapper .btns {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 7;
}

#game_wrapper .btns div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#game_wrapper .btns button {
  /*background: var(--site-color-bg-body);*/
  background: #3d5564;
  color: #8f9bad;
  border-radius: 6px;
  padding: 8px 30px;
  margin: 0 8px;
  float: left;
}

#game_wrapper .btns button:hover {
  cursor: pointer;
  /*background: var(--site-color-bg-dark);*/
  opacity: .8;
}

#game_wrapper .btns button.theme {
  background: #00e701;
}

#game_wrapper .btns button i,
#game_wrapper .btns button span {
  line-height: 21px;
  font-weight: 600;
  float: left;
  color: #ffffff;
}

#game_wrapper .btns button.theme i,
#game_wrapper .btns button.theme span {
  color: rgb(0, 0, 0);
}

#game_wrapper .btns button i {
  margin: 0 5px 0 0;
  font-size: 12px;
  /*transform: translateY(1px);*/
}

#game_wrapper .btns button span {
  transform: translateY(-1px);
}

.controls {
  width: 100%;
  float: left;
  background: var(--site-color-bg-dark);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  padding: 5px 10px;
}

.controls .btns,
.controls .btns div {
  float: left;
}

.controls .btns svg {
  float: left;
  text-align: center;
  color: #8f9bad;
  /*padding: 2px;*/
  margin: 11px 5px;
  height: 18px;
  width: 18px;
}

.controls .btns svg:hover {
  color: #fff;
  cursor: pointer;
}

.controls .switch {
  float: right;
}

.controls .switch p {
  float: left;
  line-height: 40px;
  margin: 0 14px;
  font-weight: 600;
  color: #8f9bad;
}

.controls .switch .s {
  float: left;
  height: 26px;
  border-radius: 15px;
  width: 52px;
  background: #13181a;
  margin: 7px 0;
}

.controls .switch .s div {
  background: var(--site-color-main);
  height: 18px;
  width: 18px;
  margin: 4px;
  border-radius: 13px;
  float: left;
  /*transition: transform 300ms;*/
}

.controls .switch .s[data-side="1"] div {
  transform: translateX(26px);
}

.controls .switch .s:hover {
  cursor: pointer;
}

.controls .switch .s:hover div {
  opacity: .8;
}

h3.sss {
  float: left;
  width: 100%;
  text-align: left;
  color: #8f9bad;
  margin: 50px 0 15px;
}

h3.sss i.fa {
  margin: 0 5px 0 0;
}

h3.sss .arrows {
  float: right;
  height: 35px;
  border-radius: 50px;
  background: var(--site-color-bg-dark);
  border: 1px solid #222d3e;
  transform: translateY(-5px);
}

h3.sss .arrows div {
  float: left;
  padding: 0 15px;
}

h3.sss .arrows div[data-action="left"] {
  border-right: 1px solid #222d3e;
  /*color: #40555c;*/
}

h3.sss .arrows div:hover {
  cursor: pointer;
  opacity: .8;
}

h3.sss .arrows div i {
  line-height: 35px;
  margin: 0;
}

.slotsgames {
  width: 100%;
  float: left;
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* repeat(auto-fill, 180px) */
  grid-gap: 10px;
  overflow: hidden;
}

.slotsgames-scroll {
  display: block;
  width: 9999px;
  transition: transform 300ms;
}

.slotsgames-scroll .slots-game {
    width: 200px;
    margin-right: 30px;
    display: block;
    float: left;
}

.slotsgames2 {
  display: block;
  grid-template-columns: none;
  grid-gap: 0;
  margin-top: -10px;
}

.slotsgames .game {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.slotsgames .game,
.slotsgames .game img,
.slotsgames .game .overlay {
  border-radius: 4px !important;
}

.slotsgames .game img {
  width: 100%;
}

.slotsgames .game .overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 300ms;
}

.slotsgames .game:hover .overlay {
    opacity: 1; /* Show the overlay on hover */
}

.slotsgames .game .name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-weight: 600;
  padding: 0 10px 15px;
  font-size: 16px;
  transform: translateY(10px);
}

.slotsgames .game .provider {
  /*display: none;*/
  position: absolute;
  top: 0;
  right: 0;
  font-size: 12px;
  font-weight: 600;
  opacity: .8;
  padding: 10px;
  text-transform: capitalize;
  transform: translateY(-10px);
}

.slotsgames .game .name,
.slotsgames .game .provider {
  transition: transform 300ms, opacity 300ms;
  opacity: 0;
}

.slotsgames .game:hover .overlay {
  opacity: .75;
}

.slotsgames .game:hover .name,
.slotsgames .game:hover .provider {
  transform: none;
  opacity: 1;
}

.slotsgames .game:hover .p i {
  opacity: 1;
}

.slotsgames .game .p {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.slotsgames .game .p i {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 32px;
  transition: opacity 300ms;
  opacity: 0;
}

.sl-options {
  width: 100%;
  float: left;
  display: flex;
  justify-content: space-between;
  z-index: 2;
}

.sl-options .search {
  background: #161F28;
  border-radius: 100px;
  height: 40px;
  width: calc(75% - 20px - 155px);
  float: left;
  border: 1px solid #ffffff3d;
}

.search {
  background: #161F28;
  border-radius: 100px;
  height: 40px;
  width: 0;
  min-width: 300px;
  float: left;
  border: 1px solid #ffffff3d;
}

.search i {
  font-size: 14px;
  margin: 11px;
  float: left;
  color: #91959C;
}

.search input {
  float: left;
  height: 36px;
  line-height: 36px;
  /*padding: 0 10px;*/
  background: transparent;
  border: 0;
  outline: 0;
  width: calc(100% - 40px);
}

.sl-options .search i {
  font-size: 14px;
  margin: 11px;
  float: left;
  color: #91959C;
}

.sl-options .search input {
  float: left;
  height: 36px;
  line-height: 36px;
  /*padding: 0 10px;*/
  background: transparent;
  border: 0;
  outline: 0;
  width: calc(100% - 40px);
}

.slot-select {
  width: 25%;
  float: left;
}

.slot-select .options {
  max-height: 500px;
  overflow: auto;
}

.slot-select .selected {
  border-radius: 100px;
  display:none;
}

.slot-select .opt div {
  position: absolute;
  top: 8px;
  /*line-height: 16px;*/
  padding: 0 8px;
  right: 10px;
  /*background: var(--site-color-main);*/
  background: #0b0d0e; /* 687e8b */
  border-radius: 100px;
  font-weight: 600;
  font-size: 12px;
}

.sl-options .cl {
  float: left;
  height: 40px;
  border-radius: 100px;
  margin: 0 20px 0 0;
  background: var(--site-color-bg-dark);
  border: 1px solid #222d3e;
}

.sl-options .cl button {
  background: transparent;
  outline: 0;
  border: 0;
  line-height: 40px;
  height: 40px;
  float: left;
  padding: 0 20px;
  font-weight: 600;
  color: #8f9bad;
}

.sl-options .cl button:hover {
  cursor: pointer;
  opacity: .8;
}

.sl-options .cl button[data-type="slots"] {
  border-right: 1px solid #222d3e;
}

.sl-options .cl button[data-active="true"] {
  color: var(--site-color-main);
}

.load {
  text-align: center;
}

.load p {
  color: #8f9bad;
  font-size: 14px;
  margin: 0;
}

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

.load div.progress {
  position: relative;
  height: 6px;
  width: 120px;
  border-radius: 10px;
  background: #3e4e64;
  float: left;
  margin: 10px 20px;
}

.load div.progress:before {
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
  border-radius: 10px;
  right: 100%;
  content: '';
  width: var(--progress);
  background: var(--site-color-main);
}

.load button {
  background: #005CF1;
  color: #fff;
  padding: 6px 20px;
  border-radius: 62px;
  float: left;
  font-weight: 600;
  font-size: 12px;
  width: 100%;
}

.load button:hover {
  opacity: .8;
  cursor: pointer;
}

@media (max-width: 768px) {
  .slotsgames {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .sl-options .search,
  .sl-options .slot-select {
    width: 100%;
  }

  .sl-options .slot-select,
  .sl-options .cl {
    margin: 10px 0 0;
  }

  .sl-options .cl {
    width: 100%;
  }

  .sl-options .cl button {
    width: 50%;
  }
}

/*navbuttonquerystart*/

.button-container-nav {
    display: flex;
    flex-wrap: wrap;
    flex-wrap: nowrap; /* Prevents wrapping to the next line */
    overflow-x: scroll; /* Enables horizontal scrolling */
    overflow-y: hidden; /* Hides vertical scrollbar */
    margin-top: 10px;
    background: #090d11;
    border-radius: 100px;
    padding: 5px; /* Adds some padding to the container */
    z-index: 1;
    margin-bottom: 30px
}

.button-container-nav::-webkit-scrollbar {
    display: none; /* Hides the scrollbar in Webkit browsers */
}

.producers-buttons {
    display: flex;
    flex-wrap: nowrap; /* Prevents wrapping to the next line */
    gap: 10px; /* Adds space between buttons */
    flex-shrink: 0; /* Prevents the buttons from shrinking */
}

.producers-buttons button {
    margin: 0; /* Remove margin */
    padding: 5px 14px;
    cursor: pointer;
    transition: background-color 0.3s;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 100px;
    white-space: nowrap; /* Prevent text from wrapping */
}


.producers-buttons button:hover {
    background-color: var(--button-hover-bg-color, #ccc);
}

.producers-buttons button.active {
    background-color: var(--site-color-main);
    color: #fff;
}

/*navbuttonqueryend*/

.header-min {
    position: sticky;
    top: 0;
    z-index: 1000;
}