:root {
	--primaryYellow: #ffc400;
	--secondaryYellow: #ffbb4d;
	--greyDarkest: #000000;
	--greyDarker: #161616;
	--greyLighter: #888888;
	--greyLightest: #dadada;
	--dropdownBg: #292929;
	--footerBg: #000000;
	--sidebarBg: #161616;
	--sidebarWidth: 224px;
	--sidebarShrinkWidth: 72px;
	--panelBg: #222222;
	--navbarHeight: 80px;
	--hrLine: #474747;
	--sidebarLogoSize: 160px;
	--leftPanelWidth: 288px;
	--leftPanelHeight: 736px;
	--rightTopPanelHeight: 112px;
	--rightBottomPanelHeight: 567px;
	--containerMarginX: 32px;
	--gapSpace: 32px;
	--gapSpace2: 24px;
}

html {
	width: 100%;
	background: linear-gradient(to right, #000000, #1e1e1e, #282828);
}

body {
	min-height: 100%;
	font-size: 1rem;
	font-weight: 500;
	position: relative;
	z-index: 0;
}

/* * {
	outline: 1px solid red;
	outline-offset: -1px;
} */

input:focus-visible,
textarea:focus-visible {
	outline: var(--primaryYellow) auto 1px;
}

.noselect {
	user-drag: none;
	-webkit-user-drag: none;
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Old versions of Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.outer {
	display: flex;
	flex-direction: row;
	position: relative;
}

.outer__main {
	display: flex;
	flex-direction: column;
	width: calc(100% - var(--sidebarWidth));
	margin-left: 0;
	transition: all 0.2s ease-out;
}

.shrink .outer__main {
	width: calc(100% - var(--sidebarShrinkWidth));
}

.bodyWrap {
	display: flex;
	flex-direction: row;
}

.new-sidebar {
	position: relative;
	background: var(--sidebarBg);
	min-width: var(--sidebarWidth);
	width: var(--sidebarWidth);
	height: 100vh;
	transition: all 0.2s ease-out;
	overflow-y: auto;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	padding: 0.5rem;
	padding-top: 0;
	gap: 0.5rem;
	box-shadow: 3px 0 8px #00000055;
	z-index: 11;
}

.new-sidebar::-webkit-scrollbar {
	width: 0;
	height: 0;
}

.shrink .new-sidebar {
	min-width: var(--sidebarShrinkWidth);
	width: var(--sidebarShrinkWidth);
}

.overlay-spacing {
	position: absolute;
}

@media only screen and (max-width: 1000px) {
	.outer__main {
		margin-left: var(--sidebarShrinkWidth);
		width: calc(100% - var(--sidebarShrinkWidth));
	}

	.new-sidebar {
		position: absolute;
	}

	.overlay-spacing {
		position: absolute;
		width: 100vw;
		height: 100%;
		z-index: 10;
		background-color: #000;
		opacity: 0.8;
	}

	.icon-text {
		font-size: 0.875rem;
	}
}

.shrink .overlay-spacing {
	min-width: var(--sidebarShrinkWidth);
	width: var(--sidebarShrinkWidth);
}

.menu-spacer {
	height: 0;
	background-color: var(--sidebarBg);
	position: sticky;
	top: 0;
	width: 56px;
	transition: all 0.2s linear;
}

.shrink .menu-spacer {
	min-height: var(--navbarHeight);
}

.menu-toggle {
	text-align: center;
	color: #fff;
	width: 48px;
	height: 32px;
	position: absolute;
	top: calc(var(--navbarHeight) * 0.5);
	transform: translate(-50%, -50%);
	left: calc(var(--sidebarWidth));
	padding: 6px 16px;
	background: #292929;
	border-radius: 200px;
	transition: all 0.2s ease-in-out;
	cursor: pointer;
	z-index: 20;
}

.shrink .menu-toggle {
	left: calc(var(--sidebarShrinkWidth) * 0.5);
}

.hr-line {
	width: 100%;
	border-radius: 10px;
	background: var(--hrLine);
	margin: 1rem 0;
	border: 0.5px solid var(--hrLine);
}

.sidebar-logo {
	width: var(--sidebarLogoSize);
	margin: 0 auto 1rem;
	transition: all 0.2s linear;
	height: auto;
}

.sidebar-logo img {
	height: var(--sidebarLogoSize);
	padding-top: 24px;
}

.sidebar-label {
	color: #fff;
	font-weight: bold;
	font-size: 0.75rem;
	margin-bottom: 4px;
}

.sidebar-icon {
	display: flex;
	align-items: center;
	font-size: 1rem;
	white-space: pre;
	transition: all 0.2s ease-out;
}

.sidebar-icon:hover img {
	-webkit-filter: drop-shadow(0 0 0px #ffc400);
	filter: drop-shadow(0 0 0px #ffc400);
	transform: scale(1.2);
}

.sidebar-icon img {
	width: 36px;
	margin: 0.125rem 1.25rem 0.125rem 0.625rem;
	transition: all 0.2s ease-out;
}

.shrink .sidebar-label {
	display: none;
}

.shrink .sidebar-logo {
	/* display: none; */
	height: 0;
	margin: 0;
}

.shrink .sidebar-logo img {
	height: 0;
}

.icon-text {
	transition: all 0.2s ease-in;
	flex: 1;
	font-size: 1rem;
}

.icon-text.active,
.icon-text:hover {
	color: var(--primaryYellow);
}

.body-container {
	width: 100%;
	margin: 0 auto;
	height: calc(100vh - var(--navbarHeight));
	overflow-y: auto;
	background: var(--greyDarker);
}

.body-container::-webkit-scrollbar {
	width: 0;
	height: 0;
}

@media only screen and (max-width: 1000px) {
	.inner-container {
	}
}

.outer-container {
	background: var(--greyDarker);
	width: 100%;
}

.bg-black {
	background: var(--greyDarkest);
}

.inner-container {
	max-width: 1200px;
	width: calc(100% - var(--containerMarginX) * 2);
	margin: 0 auto;
	padding-top: var(--containerMarginX);
}

.inner-container::-webkit-scrollbar {
	width: 0;
	height: 0;
}

.page-bg-canvas {
	position: relative;
}

.page-title-container {
	padding-bottom: 1.5rem;
}

.register-container {
	/* background: url("../static/register-banner.jpg");
	 background-repeat: no-repeat;
	background-position: center right 15%;
	background-size: cover; */
	min-height: 240px;
	display: flex;
	flex-direction: row;
}

.register-container__left {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 1rem;
	align-items: center;
	justify-content: center;
	border-radius: 8px 0 0 8px;
	padding: 2rem 0.5rem 2rem;
}

.register-container__right {
	flex: 1;
	background: url("../static/register-banner.jpg");
	background-repeat: no-repeat;
	background-position: center right;
	background-size: cover;
	min-height: 500px;
}

@media only screen and (max-width: 900px) {
	.register-container {
		flex-direction: column;
	}
}

.register-divider {
	color: var(--greyLighter);
	font-weight: 400;
	position: relative;
}

.register-divider::before,
.register-divider::after {
	content: "";
	display: block;
	top: 52%;
	position: absolute;
	width: 80px;
	height: 1px;
	background: var(--greyLighter);
}

.register-divider::before {
	left: calc((12px + 80px) * -1);
}

.register-divider::after {
	left: calc(100% + 12px);
}

.external-link-container {
	display: flex;
	flex-direction: row;
	gap: calc(var(--gapSpace2) / 2);
}

.external-link {
	border-radius: 4px;
	background: var(--primaryYellow);
	width: 64px;
	height: 40px;
	cursor: pointer;
	transition: all 0.3s ease-out;
	display: flex;
	justify-content: center;
	align-items: center;
	filter: grayscale(20%) brightness(0.8);
}

.external-link img {
	filter: contrast(60%);
}

.external-link:hover,
.external-link:hover img {
	filter: none;
}

.external .outer-container .checkinDiv {
	padding-left: var(--containerMarginX);
}

.lotteryBal {
	display: block;
	margin: 0 auto;
	margin-top: 10px;
	font-size: 14px;
	width: max-content;
}

.whatsapp {
	position: fixed;
	width: 60px;
	height: 60px;
	bottom: 40px;
	right: 40px;
	background-color: #25d366;
	color: #fff;
	border-radius: 50px;
	text-align: center;
	font-size: 30px;
	box-shadow: 2px 2px 3px #999;
	z-index: 100;
}

.my-float {
	margin-top: 16px;
}

.modal-body {
	min-width: 100%;
	width: 100%;
	display: block;
	overflow-x: auto;
	text-align: center;
}

@media (min-width: 576px) {
	.modal-dialog.modal-large {
		max-width: 800px;
	}
}

a {
	text-decoration: none;
}

.tooltip {
	font-size: 0.875rem;
}

.inputAmount {
	max-width: 160px;
	width: 100%;
	height: 32px;
	border: none;
	font-size: 0.875rem;
	padding-left: 15px;
	border-radius: 12px;
	background: #fff;
	color: var(--greyDarkest);
}

.inputAmount.long {
	max-width: 320px;
}

.commonBtn.long {
	padding: 10px 80px;
}

.commonBtn.disabled {
	filter: brightness(0.5);
	cursor: not-allowed;
}

.inputAmount.disabled {
	background: var(--greyLightest);
	color: var(--greyLighter);
	cursor: not-allowed;
}

.dropShadow {
	width: 100%;
	height: 1px;
	display: block;
}

.noVoucher {
	top: 50%;
	left: 50%;
	width: max-content;
	position: absolute;
	transform: translate(-50%, -50%);
}

.voucher-container {
	display: flex;
	flex-flow: row wrap;
	gap: var(--gapSpace2);
}

.img-voucher {
	width: calc((100% - var(--gapSpace2) * 4) / 5);
	max-width: 160px;
	cursor: pointer;
	transform: scale(0.95);
	transition: all 0.2s linear;
}

@media only screen and (max-width: 1200px) {
	.img-voucher {
		width: calc((100% - var(--gapSpace2) * 3) / 4);
	}
}

@media only screen and (max-width: 900px) {
	.img-voucher {
		width: calc((100% - var(--gapSpace2) * 3) / 4);
	}
}

.img-voucher:hover {
	transform: scale(1);
	-webkit-filter: drop-shadow(0 0 7px #ffc400ad);
	filter: drop-shadow(0 0 7px #ffc400ad);
}

.swal2-select {
	color: #000 !important;
	background: #fff !important;
}

/**** Modal ****/
.new-modal {
	min-width: 80%;
	width: 400px;
}

.new-modal-info {
	display: flex;
	justify-content: center;
	gap: 1rem;
}

.new-modal-detail-text {
	text-align: left;
	font-size: 0.875rem;
}

.commonModal {
	font-size: 12px;
	border-radius: 25px;
	text-align: center;
	margin: 0 auto;
}

.commonModal .logo {
	width: 220px;
	margin-bottom: 15px;
}

.commonField {
	width: 200px;
	height: 28px;
	border-radius: 5px;
	border: none;
	text-align: center;
}

.commonBtn {
	font-size: 0.875rem;
	font-weight: 600;
	padding: 5px 24px;
	border-radius: 100px;
	min-width: 96px;
	transition: all 0.2s linear;
	cursor: pointer;
}

.commonBtn.disabled {
	opacity: 0.3;
}

.commonModalClose {
	border: none;
	display: block;
	font-size: 18px;
	margin-left: auto;
	background: transparent;
}

.title {
	color: var(--primaryYellow);
	display: block;
	font-family: "Ocean Rush", Arial, sans-serif;
	font-size: 2.5rem;
	font-weight: 700;
	margin: 2rem 0;
}

.title2 {
	display: block;
	color: #ffc400;
	font-size: 5vw;
	font-weight: 100;
	margin-bottom: 15px;
	font-family: "Ocean Rush", Arial, sans-serif;
}

.preloader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
}

.preloaderDiv {
	margin: auto;
	width: 50%;
	height: 100%;
	display: flex;
	position: relative;
}

.preloaderDiv .wrap {
	margin: auto;
}

.preloaderDiv img {
	margin: auto;
	margin-bottom: 15px;
	display: block;
	width: 100%;
}

/**** Sweet Alert Success ****/
.swal2-title {
	color: #fff;
	font-size: 20px;
}

/**** Sweet Alert Confirm Button ****/
.swal2-popup {
	width: 30vw;
	max-width: 480px;
	font-size: 13px;
	border-radius: 15px;
}

/**** Sweet Alert Confirm Button ****/
.swal2-styled.swal2-confirm {
	border: none;
}

/**** Header ****/

.headerContainer {
	z-index: 9;
	position: relative;
	width: 100%;
	box-shadow: 0 3px 8px #00000055;
	transition: all 0.2s ease-in-out;
}

.headerContainer .inner-container {
	height: var(--navbarHeight);
	padding: 0;
}

.headerContainer .sidebar .icon {
	top: 50%;
	left: 50%;
	width: 30px;
	margin: auto;
	display: block;
	font-size: 20px;
	position: absolute;
	transform: translate(-50%, -50%);
}

.headerContainer .member-login {
	margin-left: auto;
	display: flex;
	flex-direction: row;
	gap: 12px;
	align-items: center;
}

.headerContainer .logo {
	height: calc(var(--navbarHeight) - 5px);
}

@media only screen and (max-width: 768px) {
	.headerContainer .logo {
		height: 75px;
	}
}

.header-action-container {
	display: flex;
	align-items: center;
	gap: 16px;
	position: relative;
	height: 100%;
}

.header-action-container.logged {
	gap: 40px;
}

.btn-deposit {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 0.875rem;
	font-weight: 400;
	border-radius: 20px;
	border: 1px solid #c8e692;
	color: #fff;
	background: linear-gradient(to top, #84b839, #7daf35);
	box-shadow: 0 0 2px 3px #7fad41;
	padding: 6px 10px 6px;
	text-shadow: 0 0 2px white;
	text-transform: uppercase;
	transition: all 0.5s linear;
	animation: btn-deposit 1s linear alternate infinite;
}

.btn-deposit svg {
	height: 24px;
	filter: drop-shadow(0px 0px 2px #dff1ba);
	-webkit-filter: drop-shadow(0px 0px 2px #dff1ba);
}

.btn-deposit svg path {
	transition: all 0.5s linear;
	animation: btn-deposit-img 1s linear alternate infinite;
}

@keyframes btn-deposit {
	from {
		background: transparent;
		border-color: #7daf35;
		color: #7daf35;
		text-shadow: 0 0 2px #7fad41;
		box-shadow: 0 0 2px 3px #7fad41;
	}
	to {
		background: linear-gradient(to top, #84b839, #7daf35);
		border-color: #c8e692;
		color: #fff;
		text-shadow: 0 0 2px white;
		box-shadow: none;
	}
}

@keyframes btn-deposit-img {
	from {
		fill: #7daf35;
	}
	to {
		fill: #fff;
	}
}

.password-container {
	position: relative;
	width: 160px;
}

.btn-forget-password {
	position: absolute;
	bottom: -18px;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	text-align: center;
}

/* Display different login button in smaller screen */
.larger-view {
	display: block;
}
.smaller-view {
	display: none;
}

@media only screen and (max-width: 1200px) {
	.larger-view {
		display: none;
	}
	.smaller-view {
		display: block;
	}
}

.text-remark {
	color: #fff;
	font-weight: 400;
	text-shadow: 0 0 2px #000;
}

.header-action-menu-container:before {
	content: "";
	color: var(--primaryYellow);
	border-top: calc(var(--navbarHeight) / 2) solid transparent;
	border-right: 20px solid currentColor;
	border-bottom: calc(var(--navbarHeight) / 2) solid currentColor;
	border-left: 20px solid transparent;
	position: absolute;
	left: -40px;
	z-index: -1;
}

.header-action-menu-container {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	height: 100%;
	background: var(--primaryYellow);
	padding-right: 16px;
}

.header-action-wallet-container {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.header-action-wallet-container p {
	margin: 0;
	color: #000;
	font-size: 0.75rem;
}

.header-action-menu {
	height: auto;
	display: flex;
	flex-direction: column;
	font-weight: 400;
	background: var(--dropdownBg);
	position: absolute;
	top: var(--navbarHeight);
	right: 0;
	height: 0;
	padding: 0;
	opacity: 0;
	overflow: hidden;
	transition: all 0.2s ease-out;
}
.header-action-menu-container:hover .header-action-menu {
	height: auto;
	padding: 1rem 2rem 1rem 1.5rem;
	opacity: 1;
}

.header-action-menu__item {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: var(--gapSpace2);
	min-width: 150px;
	color: #fff;
	transition: all 0.2s ease-out;
	padding: 4px 0;
	opacity: 0.7;
}

@media screen and (max-width: 1200px) {
	.header-action-menu__item {
		font-size: 0.875rem;
	}
}

.header-action-menu__item:hover {
	cursor: pointer;
	opacity: 1;
}

.header-action-menu__icon {
	width: 20px;
}

.notification-text {
	display: flex;
	align-items: center;
}

.notiIcon {
	width: 40px;
}

.icon-profile {
	border: 1px solid var(--primaryYellow);
	border-radius: 50%;
}

.notiNum {
	color: #000;
	font-size: 8px;
	padding: 2px 6px;
	margin-left: 4px;
	border-radius: 20px;
}

.notiWrap {
	display: flex;
	margin-bottom: 20px;
	padding: 5px 20px;
	border-radius: 5px;
}

.noti-container {
	color: #fff;
	border: 2px solid var(--primaryYellow);
	border-radius: 2rem;
	background-color: var(--greyDarkest);
	padding: 1rem;
	display: flex;
	flex-direction: row;
	gap: 1rem;
	margin-bottom: 1rem;
}

.noti-date-container {
	background: var(--primaryYellow);
	color: #000;
	border-radius: 16px;
	height: 60px;
	width: 60px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.noti-day {
	width: 60px;
	font-size: 0.875rem;
	font-weight: 700;
}

.noti-date {
	width: 60px;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2rem;
}

.noti-content {
	display: flex;
	flex-direction: column;
}

.noti-title {
	font-size: 1.25rem;
	margin-bottom: 4px;
}

.noti-text {
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4rem;
	color: var(--greyLightest);
}

/**** Footer ****/
.footer-container {
	background: var(--footerBg);
	width: 100%;
	padding: 2.5rem 0 1.5rem;
}

footer ul {
	list-style-type: none;
	padding-left: 0;
	margin-bottom: 4px;
}

footer ul li,
footer ul li a {
	color: #d2d2d2;
	cursor: pointer;
	transition: all 0.2s linear;
}

footer ul li:hover,
footer ul li a:hover {
	color: white;
}

footer ul li:first-child {
	color: white;
	margin-bottom: 4px;
	cursor: default;
}

.support-messenger-container {
	display: flex;
	width: 100%;
	flex-flow: row wrap;
	max-width: 400px;
	margin: 2rem auto;
	gap: 1rem;
}

.support-messenger-container a {
	flex: 1;
}

@media screen and (max-width: 1200) {
}

.language-option {
	display: flex;
	width: 88px;
}

.footer-divider {
	width: 100%;
	height: 1px;
	background: var(--greyLighter);
	opacity: 0.3;
	margin: 2rem 0;
}

.footer-container__affiliate {
	display: flex;
	flex-direction: row;
	gap: calc(var(--gapSpace) * 2);
	justify-content: center;
}

.text-footer {
	font-size: 0.75rem;
	font-weight: 400;
	color: #fff;
	text-align: center;
}

.text-copyright {
	font-size: 0.875rem;
	color: #fff;
	margin: 2rem auto 0;
}

.footer-label {
	color: #fff;
	margin: 1.5rem auto 0.25rem;
	font-size: 0.875rem;
}

.img-footer {
	width: 160px;
	margin: 0 auto 0.5rem;
}

.footer {
	bottom: 0;
	width: 100%;
	z-index: 1000;
	position: fixed;
}

.footer ul {
	list-style-type: none;
	width: 100%;
	margin: 0;
	padding: 0;
	display: flex;
	font-size: 12px;
	font-weight: 500;
	background: linear-gradient(to top, var(--dropdownBg), #1e1e1e, #282828);
}

.footer ul li {
	padding: 0;
	margin: 0;
	width: 25%;
	height: 60px;
	list-style: none;
	text-align: center;
	display: inline-block;
	color: #d2d2d2;
}

.footer ul li a {
	width: 100%;
	height: 100%;
	display: block;
	font-weight: 600;
	position: relative;
	text-transform: uppercase;
}

.footerWrap {
	top: 50%;
	left: 50%;
	width: max-content;
	position: absolute;
	transform: translate(-50%, -50%);
}

.footerWrap img {
	height: 25px;
	display: block;
	margin: 0 auto;
}

.footer ul li svg {
	margin: 0 auto;
	display: block;
}

.footer .active a {
	color: #ffc400;
	font-weight: 700;
}

/**** SideBar Menu ****/
.menu .logo {
	width: 80%;
	display: block;
	margin: 0 auto;
	margin-top: 10px;
}

.menu {
	top: 0;
	left: 0;
	width: 220px;
	min-height: 100%;
	height: 100%;
	z-index: 10002;
	position: fixed;
	font-weight: 500;
	border-top-right-radius: 30px;
	border-bottom-right-radius: 30px;
	transition: transform 0.35s;
	transform: translate3d(-240px, 0, 0);
}

/* hide inputs */
.menu-checkbox {
	display: none;
}

.menu ul {
	margin: 0;
	padding: 0;
	height: 65%;
	list-style: none;
	padding-top: 5px;
	overflow-y: auto;
	margin-bottom: -8%;
}

.menu ul li {
	width: 100%;
	padding: 10px 12px;
	font-size: 13px;
	font-weight: 600;
}

.menu ul li:hover a {
	font-weight: bold;
}

.menu ul li .icon {
	width: 100%;
	display: block;
	position: relative;
}

.menu ul li .icon img {
	width: auto;
	max-width: 40px;
	margin-right: 10px;
	display: inline-block;
	vertical-align: middle;
}

.menu ul li .icon span {
	display: inline-block;
	vertical-align: middle;
}

.menu ul li .icon .active {
	color: #ffc400;
}

.menuFooter {
	bottom: 0;
	width: 100%;
	height: 8%;
	display: flex;
	font-size: 13px;
	position: fixed;
	text-align: center;
	font-weight: 600;
}

.menuFooter img {
	width: 15px;
	margin: 0 auto;
	margin-right: 5px;
	vertical-align: middle;
}

.menuFooter .left {
	width: 50%;
	line-height: 55px;
	vertical-align: middle;
}

.menuFooter .right {
	width: 50%;
	line-height: 55px;
	vertical-align: middle;
}

.overlay {
	/* background: #00000080; */
	cursor: pointer;
	width: 100%;
	height: 1000px;
	z-index: 10001;
	display: none;
	position: fixed;
	-webkit-animation: fadein 0.1s; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: fadein 0.1s; /* Firefox < 16 */
	-ms-animation: fadein 0.1s; /* Internet Explorer */
	-o-animation: fadein 0.1s; /* Opera < 12.1 */
	animation: fadein 0.1s;
}

.checkinDiv {
	display: flex;
	flex-direction: row;
	gap: 8px;
	overflow-x: auto;
	cursor: grab;
	margin-top: 2rem;
	position: relative;
	scrollbar-width: none;
	/* box-shadow: inset 0px 0px 16px 16px var(--greyDarker); */
	padding: 20px;
	z-index: 1;
}

.checkinDiv::-webkit-scrollbar {
	width: 0;
	height: 0;
}

.button-container {
	width: 100%;
	display: flex;
	justify-content: center;
	margin: 2rem 0;
}
.checkinBtn {
	border: 2px solid #ffffff;
	border-radius: 100px;
	background: #35341a33;
	cursor: pointer;
}

.checkinFrameDiv {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	width: 24ch;
	margin: 1.5rem 1rem;
	padding: 1rem 0.5rem;
	gap: 1rem;
}

.gradient-border-today,
.gradient-border-claimed,
.gradient-border {
	--border-width: 4px;
	background: #000000c9;
	color: #ffffffcc;
	border-radius: var(--border-width);
	transition: all 0.2s ease-out;
}
.gradient-border:hover {
	background: #131313;
}
.gradient-border-claimed:hover,
.gradient-border-today:hover {
	background: #000000c9;
}
.gradient-border::after {
	background: linear-gradient(60deg, hsl(0deg 0% 1%), hsl(0deg 0% 2%));
}
.gradient-border-today::after,
.gradient-border-claimed::after,
.gradient-border::after {
	position: absolute;
	content: "";
	top: calc(-1 * var(--border-width));
	left: calc(-1 * var(--border-width));
	z-index: -1;
	width: calc(100% + var(--border-width) * 2);
	height: calc(100% + var(--border-width) * 2);
	border-radius: calc(2 * var(--border-width));
}
.gradient-border-today::after,
.gradient-border-claimed::after {
	filter: drop-shadow(0 0 4px #cc1194);
	box-shadow: 0 0 20px -4px #d9114b;
	background: linear-gradient(
		60deg,
		hsl(15deg 68% 48%),
		hsl(16deg 82% 41%),
		hsl(290deg 79% 43%),
		hsl(24deg 72% 42%),
		hsl(27deg 79% 42%),
		hsl(6deg 74% 48%)
	);
	background-size: 200% 200%;
	background-position: 0 50%;
	animation: moveGradient 3s alternate infinite;
}

/* @keyframes moveGradient {
	50% {
		background-position: 100% 50%;
	}
} */
@keyframes moveGradient {
	0% {
		background-position: 10% 90%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 90% 10%;
	}
}

.checkinItem {
	height: 80px;
}

.checkinCircle {
	top: 5%;
	left: 20%;
	width: 20%;
	position: absolute;
	transform: translate(-50%, -50%);
}

.checkinWord {
	color: #fff;
	width: 24ch;
	font-size: 0.875rem;
	font-weight: 500;
	text-align: center;
	margin-top: auto;
	margin-bottom: auto;
}

.checkin-condition {
	background: var(--greyLightest);
	color: #000;
	border-radius: 2rem;
	font-size: 0.75rem;
	width: 16px;
	height: 16px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

.checkinTick {
	top: 50%;
	right: 0;
	width: 50%;
	position: absolute;
	transform: translate(-50%, -50%);
}

.checkinDay {
	font-size: 2.5rem;
	text-align: center;
}

.btn-checkin {
	text-align: center;
}

/**** Marquee ****/
.marqueeWrap {
	display: flex;
	height: 35px;
}

.soundCol {
	width: 25%;
	position: relative;
	-webkit-transform-origin: 100% 0;
	-ms-transform-origin: 100% 0;
	transform-origin: 100% 0;
	-webkit-transform: skew(-45deg);
	-ms-transform: skew(-45deg);
	transform: skew(-45deg);
	z-index: 10;
}

.soundCol2 {
	width: 100%;
	height: 100%;
	position: relative;
	transform: skew(45deg);
}

.soundCol img {
	width: 22px;
	display: block;
	top: 50%;
	left: 50%;
	position: absolute;
	transform: translate(-50%, -50%);
}

.marquee {
	width: 100%;
	overflow: hidden;
	font-weight: 600;
	font-size: 13px;
	margin-top: auto;
	margin-bottom: auto;
	margin-left: -20px;
}

.registerFrame {
	width: 100%;
	position: relative;
}

.loginFrame {
	width: 100%;
	position: relative;
}

.homeFrame .wording {
	top: 13px;
	left: 15px;
	font-size: 13px;
	line-height: 20px;
	position: absolute;
	text-transform: uppercase;
}

.homeFrame .primeText {
	font-size: 15px;
	font-weight: 700;
}

.homeFrame .secondaryText {
	font-size: 10px;
	font-weight: 500;
}

.homeGame {
	display: flex;
	gap: var(--gapSpace2);
	flex-wrap: wrap;
}

.game-category {
	width: calc((100% - var(--gapSpace2) * 3) / 4);
	transition: all 0.2s linear;
	padding: 0.25rem;
	border-radius: 0.5rem;
}

.game-category:hover {
	transform: translateY(-8px);
	border-radius: 1rem;
	-webkit-filter: drop-shadow(0 0 7px #ffc400ad);
	filter: drop-shadow(0 0 7px #ffc400ad);
}

.game-container {
	display: flex;
	gap: var(--gapSpace2);
	flex-wrap: wrap;
}

.game-item {
	width: calc((100% - var(--gapSpace2) * 4) / 5);
	transition: all 0.2s linear;
	padding: 1rem;
	border-radius: 0.5rem;
	cursor: pointer;
	text-align: center;
}

#pills-LOTTERY .game-item {
	width: 100%;
	text-align: left;
}

.game-item img {
	transition: all 0.3s ease-out;
}

.game-item:hover img {
	filter: drop-shadow(0 0 16px #ffc400ed);
	transform: translateY(-8px);
}

.game-item p {
	transition: all 0.2s linear;
	margin-bottom: -1rem;
}

.game-item:hover p {
	color: var(--primaryYellow);
	font-weight: 700;
}

@media only screen and (max-width: 1200px) {
	.homeGame {
		gap: var(--gapSpace) / 4;
	}
	.game-category {
		width: calc((100% - var(--gapSpace) / 4 * 3) / 4);
	}
	.game-item {
		width: calc((100% - var(--gapSpace) * 3) / 4);
	}
}

@media only screen and (max-width: 900px) {
	.game-item {
		width: calc((100% - var(--gapSpace) * 2) / 3);
	}
}

@media only screen and (max-width: 768px) {
	.game-item {
		width: calc((100% - var(--gapSpace)) / 2);
	}
}

.balanceBar {
	top: 0;
	left: 50%;
	width: 90%;
	height: 100%;
	display: table;
	position: absolute;
	transform: translate(-50%, 0%);
}

.balanceBar .icon {
	font-size: 10px;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
}

.balanceBar .icon img {
	width: 5.8vh;
	margin: 0 auto;
	display: block;
	min-width: 13vw;
}

.balanceBar .refresh {
	width: 30px;
	line-height: 2;
}

.balanceBar .balance {
	font-size: 3.8vw;
	vertical-align: bottom;
}

.balanceBar .walletBalanceSpan {
	font-size: 3vw;
	vertical-align: bottom;
}

.balanceBar .gameBalanceSpan {
	font-size: 2.5vw;
	vertical-align: bottom;
}

.balanceBar .walletBalance {
	font-size: 3.5vw;
	font-weight: bold;
}

.balanceBar .gameBalance {
	font-size: 3vw;
	font-weight: bold;
}

.balanceBar .currency {
	font-size: 3vw;
	font-weight: 500;
}

.slick-slide {
	transition: background-color 2s linear;
	opacity: 0.3;
	position: relative;
}

.slick-slide.slick-active:before {
	background-color: transparent;
}

.slick-slide:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #00000090;
	transition: all 0.8s linear;
	border-radius: 8px;
}

.slick-center {
	opacity: 1;
}

.slick-prev.slick-arrow {
	left: 10%;
	z-index: 100;
}

.slick-next.slick-arrow {
	right: 10%;
	z-index: 100;
}

.table-container {
	max-height: 480px;
	overflow-y: auto;
	scrollbar-width: none;
}

.table-container::-webkit-scrollbar {
	width: 0;
	height: 0;
}

.winner-table {
	font-size: 1rem;
	width: 100%;
	min-width: 240px;
	color: white;
}

@media screen and (max-width: 1200px) {
	.winner-table {
		font-size: 0.8rem;
	}
}

.winner-table-head {
	background: var(--primaryYellow);
	color: #000;
	height: 48px;
}

.winnersDiv2 {
	top: 0;
	width: 100%;
	height: 84%;
	font-size: 9px;
	overflow-y: auto;
	position: absolute;
	margin-top: 15%;
	padding-left: 8%;
	padding-right: 5%;
}

.winner-title {
	font-family: "Ocean Rush";
	color: var(--primaryYellow);
	text-align: center;
	font-size: 2.5rem;
}

.winnersRow {
	height: 64px;
}

.winnersRow td {
	background: var(--greyDarker);
	transition: all 0.2s linear;
}

.winnersRow:nth-child(2n) td {
	background: var(--greyDarkest);
}

.winnersRow td:first-child,
.winner-table-head td:first-child {
	border-top-left-radius: 0.25rem;
	border-bottom-left-radius: 0.25rem;
}

.winnersRow td:last-child,
.winner-table-head td:last-child {
	border-top-right-radius: 0.25rem;
	border-bottom-right-radius: 0.25rem;
}

.winner-icon {
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 40px;
}

.winner-icon__circle {
	position: absolute;
	z-index: 0;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	opacity: 0.8;
}

.winner-table__col-1 {
	width: 10%;
}

.winner-table__col-2,
.winner-table__col-3,
.winner-table__col-4,
.winner-table__col-5 {
	width: 15%;
}

.winner-table__col-2 {
	text-align: left;
}

.winner-table__game-log,
.winner-table__slip-cuci {
	cursor: pointer;
	transition: all 0.2s linear;
}

.winner-table__game-log:hover,
.winner-table__slip-cuci:hover {
	transform: translateY(-4px);
}

#winnersModal ul {
	bottom: 0;
	padding: 0;
	margin-bottom: 5px;
	text-align: left;
	position: absolute;
	list-style-type: none;
}

#winnersModal ul .naming {
	min-width: 80px;
	line-height: 4;
}

#winnersModal ul .content {
	margin: 10px;
	line-height: 2;
}

.bg-Color {
	background: #171a21;
}

/**** Register ****/
.registerSection {
	font-size: 14px;
	font-weight: 300;
	margin: 0px;
	padding: 0px;
	width: 100%;
	min-height: 100%;
	height: max-content;
	display: flex;
	position: relative;
}

.registerSection .logo {
	width: 70%;
}

.registerSection .field {
	width: 90%;
	height: 35px;
	border-radius: 5px;
	border: none;
	text-align: center;
}

.registerSection .notes {
	width: 80%;
	margin: 0 auto;
	font-weight: 400;
	font-size: 12px;
}

.registerSection .message {
	font-size: 12px;
	font-weight: 600;
}

.btnBack {
	top: 5%;
	left: 10%;
	position: absolute;
}

.btnBack a {
	max-width: 30px;
	display: block;
	width: max-content;
}

/*** Number Game ***/
.nbBackground {
	width: 100%;
	height: 100%;
	position: absolute;
}

.nbContentDiv {
	top: 50%;
	left: 50%;
	width: 80%;
	height: 65%;
	color: #fff;
	margin: 0 auto;
	overflow-y: auto;
	position: absolute;
	transform: translate(-50%, -50%);
}

.nbTitle {
	color: #ffc400;
	text-align: center;
	display: block;
	font-size: 7vw;
	font-weight: 100;
	font-family: "Ocean Rush";
}

.nbSubTitle {
	color: #fff;
	font-size: 4vw;
	font-weight: 400;
	margin-top: 10px;
	text-transform: uppercase;
}

.nbPool {
	color: #f5f1aa;
	font-size: 11vw;
	font-weight: bold;
}

.nbSubPool {
	font-size: 3vw;
}

.nbInfoTable,
tr,
td {
	border: none !important;
}

.nbCount {
	top: 50%;
	left: 50%;
	position: absolute;
	text-align: center;
	text-transform: uppercase;
	transform: translate(-50%, -50%);
}

.countdown {
	color: #fff;
	font-size: 3vw;
}

.ticker {
	color: #f5f1aa;
	font-size: 5.7vw;
	font-weight: bold;
	line-height: 1;
}

.ticketRemain {
	font-size: 4vw;
	text-align: center;
	text-transform: uppercase;
}

.ticket {
	color: #f5f1aa;
	text-align: center;
	font-size: 6vw;
	font-weight: bold;
}

.ticketImg {
	width: 30%;
	bottom: -30%;
	left: 50%;
	position: absolute;
	transform: translate(-50%, -50%);
}

.nbTableDiv {
	width: 95;
	margin: 0 auto;
	text-align: center;
}

.nbTable {
	width: 100%;
	table-layout: fixed;
}

.nbTable input {
	width: 100%;
	background: #000;
	border-radius: 5px;
	border: 1px solid #f5f1aa;
}

.nbSub2 {
	font-size: 3vw;
	font-weight: bold;
	margin-bottom: 10%;
}

.nbRounded {
	width: 50px;
	height: 50px;
	margin: 2% 5%;
	position: relative;
	border-radius: 50%;
	display: inline-block;
	border: 1px solid #f5f1aa;
}

.nbRounded span {
	top: 50%;
	left: 50%;
	font-size: 3vw;
	position: absolute;
	transform: translate(-50%, -50%);
}

.nbBtn {
	display: flex;
	margin: 3% auto;
	font-size: 11px;
}

/**** Dashboard ****/
.dashboard-panel {
	display: grid;
	grid-template-columns: var(--leftPanelWidth) minmax(500px, auto);
	grid-template-rows: var(--rightTopPanelHeight) 1fr;
	grid-template-areas:
		"sidebar header"
		"sidebar main";
	grid-gap: 20px;
	margin-bottom: 20px;
}

@media screen and (max-with: 768px) {
	.dashboard-panel {
		grid-template-areas:
			"sidebar"
			"header"
			"main";
	}
}

.left-panel {
	background: var(--panelBg);
	border-radius: 8px;
	grid-area: sidebar;
	padding: 24px;
}

.right-panel-top {
	background: var(--panelBg);
	border-radius: 8px;
	grid-area: header;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	color: #fff;
	padding: 24px;
}

.right-panel-top__child {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 1rem;
}

.right-panel-top__child:not(:last-child) {
	border-right: 1px solid var(--hrLine);
}

.icon-refresh {
	font-size: 14px;
	margin-left: 8px;
	cursor: pointer;
}

.right-panel-bottom {
	background: var(--panelBg);
	border-radius: 8px;
	min-height: var(--rightBottomPanelHeight);
	grid-area: main;
	display: flex;
	flex-direction: column;
	color: #fff;
	padding: 32px;
}

.right-panel-bottom__body {
	margin-top: 24px;
}

.user-container {
	display: flex;
	flex-direction: row;
	gap: 16px;
	margin-bottom: 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--hrLine);
}

.user-avatar {
	background: #ccc;
	border-radius: 100px;
	min-width: 64px;
	height: 64px;
	border: 1px solid var(--primaryYellow);
}

@media screen and (max-width: 1200px) {
	.user-avatar {
		min-width: 48px;
		width: 48px;
		height: 48px;
	}
}

.user-container__info {
	display: flex;
	flex-direction: column;
}

.user-vip {
	display: flex;
	align-items: center;
	gap: 4px;
}

.user-name,
.user-vip {
	color: #fff;
	font-size: 1rem;
}

.user-vip__level {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--primaryYellow);
}

.user-vip__label {
	padding-right: 4px;
}

@media screen and (max-width: 1200px) {
	.user-vip__level {
		font-size: 1.25rem;
	}
	.user-name,
	.user-vip {
		font-size: 0.875rem;
	}
}

.sub-sidebar {
	color: #d2d2d2;
	font-size: 14px;
}

.sub-sidebar__label {
	font-size: 0.75rem;
	text-transform: uppercase;
	margin-bottom: 16px;
}

.sub-sidebar__label:not(:first-of-type) {
	margin-top: 32px;
}

.sub-sidebar__icon {
	color: #d2d2d2;
	display: flex;
	align-items: center;
}

.sub-sidebar__icon img {
	width: 20px;
	height: 20px;
	margin-right: 1rem;
}

.sub-sidebar__text {
	margin-bottom: 16px;
}

.sub-sidebar__text:last-child {
	margin-bottom: 80px;
}

.vip-level,
.turnover-winover,
.member-info {
	font-size: 1.5rem;
	font-weight: 800;
	text-transform: uppercase;
}

@media only screen and (max-width: 1200px) {
	.vip-level,
	.turnover-winover,
	.member-info {
		font-size: 1.25rem;
	}
}

.panel-title {
	font-weight: 700;
}

.form-label {
	margin-bottom: 4px;
	font-weight: normal;
	color: #fff;
}

.nav-item {
	background: #414141;
	padding: 4px;
	font-size: 0.875rem;
}

.nav-item.bank,
.nav-item.nav-hollow {
	background: none;
}

.nav-item:first-of-type {
	border-top-left-radius: 200px;
	border-bottom-left-radius: 200px;
	padding: 4px;
}

.nav-item:last-of-type {
	border-top-right-radius: 200px;
	border-bottom-right-radius: 200px;
	padding: 4px;
}

.nav-link {
	color: #fff;
	font-weight: 600;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
	background-color: var(--primaryYellow);
	color: #000;
}

.nav-hollow .nav-link:hover {
	color: var(--primaryYellow);
}

.nav-hollow .nav-link:focus {
	color: #000;
}

.nav-link:focus,
.nav-link:hover {
	color: var(--primaryYellow);
}

.nav-pills .nav-link {
	border-radius: 200px;
}

.nav-pills .bank .nav-link {
	border: 1px solid var(--hrLine);
	display: flex;
	align-items: center;
	padding: 0.25rem 1rem;
}

.nav-pills .nav-hollow .nav-link {
	border: 1px solid var(--hrLine);
	display: flex;
	align-items: center;
	padding: 0.5rem 1rem;
}

.pill-bank-name {
	display: none;
	transition: all 0.2s ease-in-out;
}

.bank .nav-link:focus,
.bank .nav-link:hover {
	color: #000;
}

.nav-pills .nav-hollow .addBank,
.nav-pills .nav-hollow .deleteBank {
	border: 1px solid var(--hrLine);
	display: flex;
	align-items: center;
	padding: 0.8rem;
}

.nav-pills .nav-hollow .addBank:focus,
.nav-pills .nav-hollow .deleteBank:focus {
	color: #fff;
}

.nav-pills .nav-hollow .addBank:hover,
.nav-pills .nav-hollow .deleteBank:hover {
	color: var(--primaryYellow);
}

.active > .pill-bank-name {
	display: block;
}

.btn-submit__container {
	margin-top: 24px;
}

.btn-text {
	color: var(--primaryYellow);
	font-size: 0.75rem;
	font-weight: 400;
	cursor: pointer;
}

@media screen and (max-width: 1200px) {
	.btn-text {
		font-size: 0.75rem;
	}
}

.btn-text:hover {
	color: var(--primaryYellow);
	text-decoration: underline;
}

.reminder-container {
	border-top: 1px solid var(--hrLine);
	padding-top: 32px;
	margin-top: 40px;
	font-weight: 0.875rem;
	color: #ffffffcc;
}

.reminder-title {
	font-weight: 700;
}

.reminder-list {
	font-weight: 400;
}

.qrpay-container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 32px;
}

/*** Contact Us ****/
.contact-container {
	display: flex;
	flex-flow: row wrap;
	gap: var(--gapSpace);
}

.contact-inner-container {
	width: calc((100% - var(--gapSpace) * 2) / 3);
	background: var(--greyDarker);
	border-radius: 16px;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.contact-display {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 8px;
	padding: 3rem 0.5rem;
}

.contact-hover {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--primaryYellow);
	color: #000;
	width: 100%;
	border-radius: 16px;
	border: none;
	transition: top 0.2s linear;
	top: 180px;
	font-size: 1.125rem;
	cursor: pointer;
}

.contact-hover:hover {
	color: #000;
}

.contact-inner-container:hover .contact-hover {
	top: 0;
}

.registerSection .contactIcon img {
	width: 30px;
	margin-right: 5px;
	vertical-align: bottom;
}

.text-label {
	color: #fff;
	font-size: 1rem;
}

/**** Games ****/
.quickBar {
	width: 100%;
	padding: 5px;
	font-size: 10px;
	font-weight: 500;
	text-align: center;
	height: max-content;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}

.quickBar img {
	width: 40px;
}

.quickBar ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

.quickBar li {
	padding: 10px 0;
	position: relative;
}

.quickBar span {
	display: block;
	padding-top: 5px;
}

.quickBar .selected {
	width: 140%;
	z-index: 1;
	font-weight: 700;
	padding: 5px 0;
	font-size: 9px;
	transform: translate(-15%, 0);
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}

/**** Deposit ****/
.pinDesc {
	font-size: 12px;
	margin-top: 10px;
	line-height: 25px;
}

.mainBalance {
	display: block;
	margin: 0 auto;
	font-size: 13px;
	font-weight: 500;
	width: max-content;
}

.depositContainer .walletBalance {
	font-size: 35px;
	line-height: 1;
	margin-top: auto;
	margin-left: auto;
	margin-right: auto;
	vertical-align: middle;
}

.depositContainer .currency {
	margin-top: auto;
	margin-right: auto;
	padding-left: 10px;
	vertical-align: middle;
}

.depositContainer .refresh {
	margin-top: auto;
	margin-left: auto;
	padding-right: 10px;
	width: max-content;
	vertical-align: middle;
}

.depositContainer .refresh img {
	width: 40px;
}

.depositContainer .subTopic {
	font-size: 15px;
	font-weight: 400;
	margin-bottom: 5px;
}

.input-group > .custom-select:not(:last-child),
.input-group > .form-control:not(:last-child) {
	padding-left: 15px;
	font-size: 14px;
	height: 35px;
	margin-top: 0px;
	border: none;
}

.btn-choose {
	height: 100%;
	font-weight: 500;
	border-radius: 0px;
	border-top-right-radius: 0.25rem;
	border-bottom-right-radius: 0.25rem;
	font-size: 12px;
}

.input-file {
	height: 35px;
	vertical-align: middle;
	width: 220px;
}

.btnUpload {
	font-weight: bold;
	font-size: 14px;
}

.balanceBar2 {
	top: 0;
	left: 50%;
	width: 90%;
	height: 105%;
	display: flex;
	position: absolute;
	transform: translate(-50%, 0%);
}

.balanceBarIcon {
	font-size: 11px;
	text-align: center;
	width: max-content;
	display: inline-block;
	margin: auto;
	vertical-align: middle;
}

.balanceBarIcon .selected {
	width: 55px;
	height: 50px;
	margin: 0 auto;
	border-radius: 10px;
}

.balanceBarIcon img {
	width: 40px;
}

.bankSelection {
	width: 110px;
	height: 35px;
	font-size: 13px;
	font-weight: 400;
	text-align: center;
	border-radius: 8px;
	line-height: 35px;
	margin-right: 10px;
	display: inline-block;
}

.walletSelection {
	width: 110px;
	height: 35px;
	font-size: 13px;
	font-weight: 400;
	text-align: center;
	border-radius: 8px;
	line-height: 35px;
	margin-right: 10px;
	display: inline-block;
}

.selectedBank {
	font-weight: 500;
}

.depositOptionsImg {
	width: 100px;
	padding: 5px 10px;
	margin-right: 10px;
}

.depositOptionsLabel {
	width: 110px;
	height: 35px;
	font-weight: 600;
	margin-right: 5px;
	line-height: 35px;
	text-align: center;
	border-radius: 15px;
}

.depositOptionsLabel1 {
	width: auto;
	height: 35px;
	cursor: pointer;
	font-size: 10px;
	font-weight: 600;
	margin-right: 5px;
	line-height: 35px;
	text-align: center;
	border-radius: 15px;
	padding: 0 10px;
}

.depositForm label,
.withdrawForm {
	cursor: pointer;
}

.bankImgTable td {
	width: 75px;
	height: 70px;
	border: none;
	font-size: 13px;
	font-weight: 400;
	position: relative;
	vertical-align: baseline;
}

.bankName {
	display: block;
	font-size: 11px;
	font-weight: 400;
	margin-top: 5px;
	text-align: center;
}

.bankImg {
	width: auto;
	height: 40px;
	display: block;
	margin: 0 auto;
	text-align: center;
	box-shadow: 0px 0px 5px 0px rgb(199, 199, 199);
	-webkit-box-shadow: 0px 0px 5px 0px rgb(199, 199, 199);
	-moz-box-shadow: 0px 0px 5px 0px rgb(199, 199, 199);
}

.bankImgQR {
	width: 200px;
	height: auto;
	display: block;
	margin: 0 auto;
	text-align: center;
	box-shadow: 0px 0px 5px 0px rgb(199, 199, 199);
	-webkit-box-shadow: 0px 0px 5px 0px rgb(199, 199, 199);
	-moz-box-shadow: 0px 0px 5px 0px rgb(199, 199, 199);
}

.bankNameQR {
	font-size: 13px;
	font-weight: bold;
	margin-top: 10px;
	margin-bottom: 10px;
}

.bankImg2 {
	width: auto;
	height: 40px;
	display: block;
	margin: 0 auto;
	text-align: center;
}

.alterIcon {
	width: 40px;
	height: 40px;
	display: block;
	position: absolute;
}

.alterIcon svg {
	width: 35px !important;
	height: 35px;
	padding: 9px;
	border-radius: 5px;
	top: 50%;
	font-size: 1.5rem;
	position: relative;
	vertical-align: middle;
	transform: translate(0%, -50%);
}

.quickAmount {
	width: auto;
	height: 35px;
	min-width: 35px;
	margin-right: 15px;
	border-radius: 5px;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	vertical-align: middle;
}

.textField {
	width: 100%;
	height: 35px;
	font-size: 12px;
	font-weight: 500;
	text-align: left;
	padding-left: 15px;
	border-radius: 5px;
}

.bankImgTable {
	margin-bottom: 10px;
}

.copyButton {
	border: none;
	background: transparent;
}

.bankDesc {
	display: block;
	font-size: 12px;
	margin-bottom: 5px;
}

/* HIDE RADIO */
[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

/* IMAGE STYLES */
[type="radio"] + img + span {
	cursor: pointer;
}

[type="radio"]:checked + .bankselectionlabel {
	color: #ffc400;
	background-color: #000;
}

.depositContainer .mainTitle {
	font-size: 18px;
	font-weight: 600;
	margin-top: 15px;
	margin-bottom: 5px;
	display: block;
}

.depositContainer .subtitle {
	font-size: 15px;
}

/**** Transfer ****/
.promoDropDown {
	height: 40px;
	border-radius: 5px;
	width: 200px;
}

.promoDropDown:focus {
	outline: none;
}

.btnGameAcc {
	width: 110px;
	height: 40px;
	border-radius: 5px;
}

.btnEnterGame {
	width: 110px;
	height: 40px;
	border: none;
	font-weight: 600;
	margin-left: auto;
	border-radius: 5px;
	text-transform: uppercase;
}

/**** History ****/
.registerSection .subTopic {
	font-size: 15px;
	font-weight: 500;
}

.arrowRight {
	margin-left: 5px;
	margin-right: 5px;
	vertical-align: middle;
}

.historyBtn {
	width: 70px;
	height: 35px;
	font-size: 13px;
	font-weight: 400;
	text-align: center;
	border-radius: 8px;
	line-height: 35px;
	margin-right: 10px;
	display: inline-block;
}

.bankSelection {
	width: 110px;
	height: 35px;
	font-size: 13px;
	font-weight: 400;
	text-align: center;
	border-radius: 8px;
	line-height: 35px;
	margin-right: 10px;
	display: inline-block;
}

.selectedBank {
	font-weight: 500;
	color: #000 !important;
	background: #ffc400 !important;
}

.historySelection {
	width: 110px;
	height: 35px;
	margin: 0 auto;
	font-size: 13px;
	font-weight: 500;
	text-align: center;
	line-height: 35px;
	display: inline-block;
	border-top-right-radius: 8px;
	border-top-left-radius: 8px;
}

.historyTable {
	width: 90%;
	margin: 0 auto;
	border-spacing: 0;
	text-align: center;
	border-radius: 10px;
	border-collapse: separate;
}

.historyTable td,
.historyTable th {
	padding: 8px;
	border: 1px solid #ffc400;
}

/* top-left border-radius */
.historyTable tr:first-child th:first-child,
.historyTable.Info tr:first-child td:first-child {
	border-top-left-radius: 10px;
}

/* top-right border-radius */
.historyTable tr:first-child th:last-child,
.historyTable.Info tr:first-child td:last-child {
	border-top-right-radius: 10px;
}

/* bottom-left border-radius */
.historyTable tr:last-child td:first-child {
	border-bottom-left-radius: 10px;
}

/* bottom-right border-radius */
.historyTable tr:last-child td:last-child {
	border-bottom-right-radius: 10px;
}

.historyTable tr:nth-child(even) {
	background-color: #323232;
}

.historyTable tr:hover {
	font-weight: 500;
	background-color: #ffc400;
}

.historyTable thead {
	z-index: 100;
}

.historyTable th {
	padding-top: 12px;
	text-align: center;
	padding-bottom: 12px;
	position: sticky;
	top: 0;
}

.historyTable td {
	font-size: 12px;
	text-align: left;
	font-weight: 500;
}

.historyTable .padding {
	padding: 15px 20px;
}

.historyTable .details {
	font-size: 12px;
	font-weight: 400;
}

.historyTable .amount {
	font-size: 14px;
	font-weight: 500;
}

.historyTable .date {
	font-size: 9px;
	font-weight: 500;
}

/**** Game ****/
.gameImg {
	width: 80%;
	display: block;
}

.gameImg-1 {
	margin-left: auto;
}

.gameImg-0 {
	margin: 0 auto;
}

/**** Referral ****/
.agent-report-container {
	display: flex;
	flex-flow: row wrap;
	gap: var(--gapSpace);
}

.report-detail {
	width: calc((100% - var(--gapSpace) * 2) / 3);
	border-radius: 8px;
	padding: 24px 8px;
	font-size: 1rem;
	text-align: center;
	background: var(--greyDarker);
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.report-detail span:nth-child(2) {
	font-size: 1.625rem;
	word-wrap: break-word;
}

@media only screen and (max-width: 1200px) {
	.report-detail,
	.right-panel-top__child {
		font-size: 0.75rem;
	}
	.report-detail span:nth-child(2) {
		font-size: 1.25rem;
	}
}

.homeReferralCopy {
	margin: 0;
	padding: 0;
	border: none;
	background: transparent;
}

.referralLogo {
	width: 80%;
	height: 55px;
	display: block;
	margin: 0 auto;
	margin-top: 10px;
}

.referralPlayer {
	display: block;
	font-size: 1.8rem;
	font-weight: bold;
	text-align: center;
	margin-top: 5px;
	margin-bottom: 15px;
}

.referralInfo {
	top: 55%;
	left: 50%;
	width: 88%;
	height: 90%;
	display: grid;
	position: absolute;
	transform: translate(-50%, -50%);
}

.referralTitle {
	font-size: 12px;
	font-weight: 400;
}

.referralText {
	font-size: 18px;
	font-weight: 500;
}

.referralText2 {
	display: block;
	font-weight: 500;
	font-size: 1.5rem;
}

.btnReferral {
	width: 80px;
	height: 40px;
	margin: 0 auto;
	cursor: pointer;
	font-size: 12px;
	border-radius: 8px;
}

.btnDownline {
	font-size: 14px;
	font-weight: 600;
	padding: 5px 20px;
	border-radius: 5px;
}

.referralPopoutBg {
	width: 100%;
	height: 100%;
	padding: 20px;
	position: relative;
	border-radius: 10px;
}

.referralPopoutBgImg {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: absolute;
}

.referralPopoutBgImg2 {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: absolute;
}

.referralTnc {
	font-size: 13px;
}

.referralOL {
	font-size: 12px;
}

.dateField {
	width: 45%;
	height: 30px;
	display: block;
	margin: 0 auto;
	font-weight: 500;
	text-align: center;
	font-size: 12px;
}

.dateField2 {
	width: 90%;
	height: 35px;
	margin: 0 auto;
	font-size: 14px;
	text-align: center;
	border-radius: 5px;
}

.selectField {
	width: 90%;
	height: 35px;
	margin: 0 auto;
	font-size: 14px;
	border-radius: 5px;
	text-align: center;
	text-align: -webkit-center;
}

.referralHistoryTable {
	width: 100%;
	margin-top: 20px;
	border-collapse: collapse;
}

.referralHistoryTable,
td,
th {
	padding: 5px;
	text-align: center;
}

.emptyTable {
	margin-left: auto;
	border: none;
	margin-bottom: 20px;
	width: max-content;
}

.emptyTable th {
	font-weight: 500;
	border: none !important;
}

/**** Promotion ****/
.promotionUl {
	padding: 0;
	display: flex;
	margin: 0 auto;
	font-weight: 500;
	width: max-content;
	text-align: center;
	margin-bottom: 25px;
}

.promotionUl li {
	font-size: 10px;
	text-align: center;
	list-style: none;
	cursor: pointer;
	padding: 0 5px;
	transition: all 0.2s;
}

.promotionUl .active {
	font-size: 12px;
	font-weight: bold;
}

.promotionUl .icon {
	width: 35px;
	display: block;
	margin: 0 auto;
	padding: 10px 0 2px 0;
}

.promotionUl span {
	text-transform: uppercase;
}

.tncModalClose {
	margin: 0;
	padding: 0;
	width: 30px;
	height: 30px;
	z-index: 99;
	top: -10px;
	right: -10px;
	border: none;
	display: block;
	font-size: 18px;
	position: absolute;
	border-radius: 50%;
}

#tncModal .header {
	color: #ffc400;
	display: block;
	font-size: 25px;
	font-weight: bold;
	margin: 10px 0;
	font-family: "Ocean Rush";
}

.tncImg {
	border-top-left-radius: 24px;
	border-top-right-radius: 24px;
}

/**** Voucher ****/
#voucherModal .header {
	display: block;
	font-size: 20px;
	font-weight: bold;
	margin: 10px 0;
}

#popupModal .header {
	display: block;
	font-size: 20px;
	font-weight: bold;
	margin: 10px 0;
}

/**** Game Lobby ****/
.gameLobbyDiv {
	display: inline-flex;
	overflow-y: auto;
	max-height: 500px;
}

.gameSpan {
	display: block;
	margin: 0 auto;
	font-size: 30px;
	font-weight: 700;
	width: max-content;
}

.gamelobbyImg {
	width: 90%;
	margin: 0 auto;
	display: block;
}

/**** Free Spin ****/
.spin-container {
	display: flex;
	flex-direction: row;
	width: 800px;
	margin: 0 auto;
	border-radius: 16px;
	background: #ffffff1f;
	backdrop-filter: blur(8px);
}

.spin-selector {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 220px;
	gap: 16px;
	margin-bottom: 16px;
	position: relative;
}

.spin-selector__option {
	background: var(--greyDarker);
	color: #fff;
	border: 2px solid transparent;
	border-radius: 8px;
	padding: 24px 32px;
	margin-left: -16px;
	margin-right: 40px;
	transition: all 0.2s linear;
	cursor: pointer;
}

.spin-selector__option.selected,
.spin-selector__option:hover {
	border: 2px solid var(--primaryYellow);
	background: linear-gradient(
		146deg,
		rgb(218 144 15) 0%,
		rgb(217 151 16) 40%,
		rgb(255 236 107) 100%
	);
	color: #000;
	transform: translateX(16px);
}
.spin-selector__option img {
	width: 40%;
}

.spin-helper {
	position: absolute;
	top: 16px;
	left: -8px;
	cursor: pointer;
}

.spin-selector-token__container {
	background: #ffffff2f;
	padding: 16px;
	border-radius: 8px;
	backdrop-filter: blur(8px);
}

.spin-selector-token__label {
	font-weight: 700;
	margin-bottom: 2px;
	margin-left: 16px;
	color: #000;
}

.spin-selector-token__amount {
	font-size: 1.25rem;
	font-weight: 700;
	margin-left: 16px;
	margin-bottom: 2px;
	color: #000;
}

.spin-wheel {
	flex: 1;
	position: relative;
	min-height: 600px;
}

.spin-wheel-container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.spin-wheel__bg {
	width: 70%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.spin-wheel__ring {
	width: 88%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
}

.spin-wheel__middle {
	width: 10%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}

.spin-wheel__pointer {
	width: 10%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -418%);
	z-index: 3;
}

.spin-wheel-btn {
	width: 20%;
	cursor: pointer;
}

.spinContainer {
	top: 0;
	color: #fff;
	width: 100%;
	height: 100%;
	text-align: center;
	position: absolute;
}

.tokenDiv {
	display: flex;
	margin-top: 10px;
}

.tokenDiv img {
	width: 40px;
}

.tokenGif {
	left: 0;
	top: -15%;
	z-index: -2;
	width: 100%;
	position: relative;
	animation: 1.5s in-out forwards;
}

.scaling {
	animation: scaling 2s infinite alternate;
	-webkit-animation: scaling 2s infinite alternate;
}

@keyframes zoom-in-zoom-out {
	0% {
		transform: scale(0.8, 0.8);
	}
	50% {
		transform: scale(1, 1);
	}
	100% {
		transform: scale(0.8, 0.8);
	}
}

@keyframes in-out {
	from {
		transform: scale(0);
	}
	to {
		transform: scale(1);
	}
}

@keyframes scaling {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(0.9);
	}
}

.firstToken {
	margin-left: 20px;
	margin-top: auto;
	margin-right: auto;
	margin-bottom: auto;
}

.secondToken {
	margin: auto;
}

.secondToken .tokenRequired {
	font-size: 25px !important;
}

.secondToken img {
	width: 55px !important;
}

.thirdToken {
	margin-top: auto;
	margin-bottom: auto;
	margin-left: auto;
	margin-right: 20px;
}

.tokenRequired {
	font-size: 15px;
	vertical-align: middle;
}

.spinContainer .logo {
	width: 25%;
	margin-top: 15px;
}

.freespinFooter {
	bottom: 5%;
	width: 100%;
	text-align: center;
	position: absolute;
}

.freespinFooter img {
	width: 50%;
}

.howtoclaim {
	padding: 5px 10px;
	font-size: 11px;
	font-weight: bold;
	border-radius: 5px;
	vertical-align: middle;
	text-transform: uppercase;
}

.wonText {
	top: 55%;
	left: 50%;
	font-size: 23px;
	position: absolute;
	transform: translate(-50%, -50%);
}

.wonPrize {
	top: 69.5%;
	left: 50%;
	font-size: 33px;
	position: absolute;
	transform: translate(-50%, -50%);
}

.creditsText {
	top: 83%;
	left: 50%;
	font-size: 10px;
	text-align: center;
	position: absolute;
	transform: translate(-50%, -50%);
}

.details {
	font-size: 15px;
}

/**** Lottery ****/
.betnowAHref {
	margin: 0 auto;
	display: block;
	cursor: pointer;
	position: relative;
	width: max-content;
}

.betnowAHref img {
	width: 180px;
	transition: all 0.5s;
}

.betnowAHref:hover img {
	filter: brightness(1.5);
}

.betnowWording {
	top: 50%;
	left: 50%;
	font-size: 1.8rem;
	font-weight: bold;
	text-align: center;
	position: absolute;
	text-transform: uppercase;
	white-space: break-spaces;
	transform: translate(-50%, -50%);
}

.btnPayout {
	width: 180px;
	height: 45px;
	border: unset;
	margin: 0 auto;
	display: block;
	font-size: 1.5rem;
	font-weight: 500;
	margin-top: 15px;
	border-radius: 10px;
}

.payoutClose {
	border: none;
	font-size: 20px;
	background: transparent;
}

.btnDrawResult {
	width: 90px;
	height: 30px;
	display: block;
	margin: 20px auto;
	font-size: 13px;
	font-weight: 500;
	border-radius: 10px;
}

.payoutTable {
	width: 100%;
	margin: 0 auto;
	font-size: 11px;
	white-space: pre;
	text-align: center;
	table-layout: fixed;
	border-collapse: collapse;
}

.payoutTable tr {
	height: 25px;
}

.payoutTable tr:first-child {
	font-weight: bold;
	font-size: 12px;
	height: 35px;
}

.drawDate {
	font-size: 12px;
	border-radius: 5px;
	text-align: center;
}

.drawDateSpan {
	margin-right: 20px;
	font-size: 12px;
}

.drawResultDiv {
	width: 100%;
	padding: 20px;
	margin: 50px auto;
	text-align: center;
	border-radius: 10px;
}

#drawresult {
	clear: both;
}
#drawresult ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
#drawresult ul > li {
	display: -moz-inline-stack;
	display: inline-block;
	width: 230px;
	margin: 10px;
	padding: 10px;
	text-align: center;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
}
#drawresult table {
	width: 100%;
}
#drawresult table caption {
	font-size: 14px;
	text-transform: uppercase;
	padding: 5px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	text-align: left;
	caption-side: top;
	font-weight: bold;
}
#drawresult table caption div {
	font-size: 10px;
}

#drawresult table caption {
	padding-left: 60px;
	background-size: 16%;
}
#drawresult #M table caption {
	background: url("../static/magnum.png") #dddddd 10px 10px no-repeat;
}
#drawresult #P table caption {
	background: url("../static/damacai.png") #dddddd 10px 10px no-repeat;
}
#drawresult #T table caption {
	background: url("../static/toto.png") #dddddd 10px 5px no-repeat;
}
#drawresult #S table caption {
	background: url("../static/singaporepools.png") #dddddd 10px 5px no-repeat;
}
#drawresult #K table caption {
	background: url("../static/stc.png") #dddddd 10px 12px no-repeat;
}
#drawresult #W table caption {
	background: url("../static/cash.png") #dddddd 10px 5px no-repeat;
}
#drawresult #B table caption {
	background: url("../static/88.png") #dddddd 10px 6px no-repeat;
}
#drawresult #N table caption {
	background: url("../static/perdana.png") #dddddd 10px 5px no-repeat;
}
#drawresult #L table caption {
	background: url("../static/luckyhari2.png") #dddddd 10px 5px no-repeat;
}
#drawresult #H table caption {
	background: url("../static/gdlotto.png") #dddddd 10px 5px no-repeat;
}
#drawresult #G table caption {
	background: url("../static/good4d.png") #dddddd 10px 5px no-repeat;
}

#drawresult table tr td {
	padding: 15px 5px;
}
#drawresult table tr:first-child td {
	border: 0px;
}
#drawresult ol {
	margin: 0px;
	padding: 0px;
	list-style: none;
	text-align: center;
}
#drawresult ol li {
	display: inline;
}
#drawresult ol.abc li {
	padding: 0px 10px;
	font-weight: bold;
	font-size: 13px;
}
#drawresult ol.p li {
	padding: 0px 3px;
	font-size: 13px;
	display: inline-block;
	width: 35px;
}
#drawresult ol.c li {
	padding: 0px 3px;
	font-size: 13px;
}

/***4d***/
.f4d-date-selector {
	background-color: #ffffff;
	border: solid 4px #ffffff;
}

.r4dLimitorWord {
	color: #fff;
}

.result4dFrame {
	background: linear-gradient(#ec1c24, #811117);
	-webkit-box-shadow: 0px 0px 5px 4px rgba(51, 41, 51, 1);
	-moz-box-shadow: 0px 0px 5px 4px rgba(51, 41, 51, 1);
	box-shadow: 0px 0px 5px 4px rgba(51, 41, 51, 1);
}

.draw-container {
	display: flex;
	flex-flow: row wrap;
	gap: var(--gapSpace2);
	justify-content: center;
}

.draw-result {
	background: #efefef;
	border: 1px solid #b2b2b2;
	border-radius: 8px;
	max-width: 230px;
}

#drawresult ul > li {
	background: #efefef;
	border: 1px solid #b2b2b2;
}

#drawresult table caption {
	color: #333333;
}

#drawresult table tr td {
	color: #333333;
	border-top: 1px solid #888888;
}

.lotterySection {
	padding: 30px 0;
	min-height: max-content;
}

.lotteryTable {
	background-color: transparent;
}

.lotteryHeader {
	color: #fff;
	background: linear-gradient(#ec1c24, #811117);
}

.lotteryTable table tr td {
	color: #000000;
}

.lotteryTable td,
th {
	white-space: normal;
	border: 1px solid #794444;
}

/**** Promotion ****/

.delay-1 {
	animation-delay: 0.2s;
}
.delay-2 {
	animation-delay: 0.4s;
}
.delay-3 {
	animation-delay: 0.6s;
}
.delay-4 {
	animation-delay: 0.8s;
}
.delay-5 {
	animation-delay: 1s;
}
.delay-6 {
	animation-delay: 1.2s;
}
.delay-7 {
	animation-delay: 1.4s;
}
.delay-8 {
	animation-delay: 1.6s;
}
.delay-9 {
	animation-delay: 1.8s;
}
.delay-10 {
	animation-delay: 2s;
}
.delay-11 {
	animation-delay: 2.2s;
}
.delay-12 {
	animation-delay: 2.4s;
}

.promotionBox {
	border-radius: 10px;
}

.promotionBox img {
	border-radius: 10px;
}

.promo-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--gapSpace);
}

.promo-container img {
	width: calc(33% - var(--gapSpace));
	border-radius: 15px;
	box-shadow: var(--secondaryYellow) 0px 0px 14px -6px;
	cursor: pointer;
}

@media only screen and (max-width: 1200px) {
	.promo-container img {
		width: calc(50% - var(--gapSpace) / 2);
	}
}

@media only screen and (max-width: 768px) {
	.promo-container img {
		width: calc(100%);
	}
}

/**** Suggestion ****/
.suggestWord {
	color: #fff;
	width: 100%;
	font-size: 1rem;
	font-weight: 400;
}

.suggestInput {
	padding: 8px;
	color: #000;
	width: 320px;
	height: 40px;
	font-size: 0.875rem;
	margin-bottom: 2rem;
	border-radius: 12px;
	background: #fff;
}

.suggestInput.long {
	width: 100%;
}

.textArea {
	/* overflow: auto; */
	/* display: block; */
	/* font-size: 13px; */
	/* line-height: 1.5; */
	/* resize: vertical; */
	/* margin-bottom: 8%; */
	min-height: 150px;
	/* padding: 12px 30px; */
	/* border-radius: 25px; */
	/* border: 1px solid #ffc400; */
	/* background: linear-gradient(#000000, #1e1e1e, #282828); */
}

.suggestCommon::placeholder {
	color: #e6e6e6;
	opacity: 1; /* Firefox */
}

.suggestCommon:-ms-input-placeholder {
	/* Internet Explorer 10-11 */
	color: #e6e6e6;
}

.suggestCommon::-ms-input-placeholder {
	/* Microsoft Edge */
	color: #e6e6e6;
}

/**** Fade In ****/

@keyframes fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Firefox < 16 */
@-moz-keyframes fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Internet Explorer */
@-ms-keyframes fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Opera < 12.1 */
@-o-keyframes fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}