/* Custom css for all games - DAB */
/* user registration form */
.browser-base-regform #btn_register {
	margin-top: 30px;
	margin-bottom: 30px;
}

.form-input-outer {
	position: relative;
}

.question-drop {
	margin: 2.5px 0px;
}

.user-field-placeholder {
	display: none !important;
}

.form-input-outer .user-field-placeholder {
	margin-top: 0 !important;
}

.form-input-outer {
	margin-bottom: 7px;
}

/* thank you page design */
.dummy-positioning {
	width: 100%;
	height: 100vh;
	align-items: center;
	justify-content: center;
}

.success-icon {
	display: inline-block;
	width: 8em;
	height: 8em;
	font-size: 20px;
	border-radius: 50%;
	border: 4px solid #96df8f;
	background-color: #fff;
	position: relative;
	overflow: hidden;
	transform-origin: center;
	animation: showSuccess 180ms ease-in-out;
	transform: scale(1);
}

.success-icon__tip,
.success-icon__long {
	display: block;
	position: absolute;
	height: 4px;
	background-color: #96df8f;
	border-radius: 10px;
}

.success-icon__tip {
	width: 2.4em;
	top: 4.3em;
	left: 1.4em;
	transform: rotate(45deg);
	animation: tipInPlace 300ms ease-in-out;
	animation-fill-mode: forwards;
	animation-delay: 180ms;
	visibility: hidden;
}

.success-icon__long {
	width: 4em;
	transform: rotate(-45deg);
	top: 3.7em;
	left: 2.75em;
	animation: longInPlace 140ms ease-in-out;
	animation-fill-mode: forwards;
	visibility: hidden;
	animation-delay: 440ms;
}

@keyframes showSuccess {
	from {
		transform: scale(0);
	}

	to {
		transform: scale(1);
	}
}

@keyframes tipInPlace {
	from {
		width: 0em;
		top: 0em;
		left: -1.6em;
	}

	to {
		width: 2.4em;
		top: 4.3em;
		left: 1.4em;
		visibility: visible;
	}
}

@keyframes longInPlace {
	from {
		width: 0em;
		top: 5.1em;
		left: 3.2em;
	}

	to {
		width: 4em;
		top: 3.7em;
		left: 2.75em;
		visibility: visible;
	}
}

.thankyou-page {
	width: 100%;
	/*max-width: 500px;*/
	margin: 0 auto;
	text-align: center;
	/* padding: 0 15px; */
	min-height: 60vh;
	/*display: flex;*/
	align-items: center;
	justify-content: center;
	/* margin-top: 30px; */
}

.thankyou-page .title {
	font-size: 52px;
	color: #ffffff;
}

.thankyou-page .desc {
	color: #bbb;
	font-size: 20px;
}

.test-countryCode-input {
	flex: 0 0 25%;
	max-width: 25%;
	width: 100% !important;
}

.test-mobile-input-select {
	width: 99% !important;
}

.test-mobile-input-select select {
	padding: 10px;
	flex: 0 0 25%;
	max-width: 25%;
}

.test-mobile-input-select input {
	padding: 10px;
	/* flex: 0 0 74%;
  max-width: 74%; */
	margin-left: 10px;
}

.custom-input-wrap {
	width: 100%;
}

.test-block {
	display: flex;
	align-items: center;
}

.test-block .user-field-placeholder {
	margin-top: 0 !important;
}

.test-mobile-input {
	width: 75% !important;
}

.winner-modal .winner-model-model .modal-header {
	position: relative;
}

.winner-modal .winner-model-model .modal-header .gradient {
	display: inline-block;
	vertical-align: middle;
}

.winner-modal .winner-model-model .modal-header button.close {
	top: 50% !important;
	transform: translateY(-50%);
}

.mb-30 {
	margin-bottom: 30px;
}

.db-has-eighteen-plus {
	text-align: center;
}

.timer {
	margin: 15px 0 25px 0;
}

.timer .clock {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	max-width: 270px;
	margin: 0 auto;
}

.timer .clock div:nth-child(1) {
	display: none;
}

.timer .clock .digit {
	width: 70px;
	height: 70px;
	line-height: 66px;
	text-align: center;
	font-size: 36px;
	margin: 0 10px;
	font-weight: 400;
	display: inline-block;
	vertical-align: middle;
}

.timer .clock .smalltext {
	text-align: center;
	font-size: 14px;
	text-transform: uppercase;
	margin-top: 5px;
}

.reg-container {
	position: relative;
	z-index: 1;
}

@media (max-width: 991px) {

	.load-browser-regform .custom-input-wrap .form-input-label,
	.test-countryCode-input {
		flex: 0 0 30%;
		/* max-width: 30%; */
	}
}

@media (max-width: 768px) {
	.test-mobile-input-select input {
		/* flex: 0 0 95%;
    max-width: 95%; */
	}

	.form-input-outer .user-field-placeholder {
		margin: 0 !important;
	}

	.test-mobile-input-select {
		width: 100% !important;
	}
}

@media (max-width: 500px) {
	.thankyou-page img {
		width: 100% !important;
	}
}

@media (max-width: 480px) {

	.load-browser-regform .form-input-outer .custom-input-wrap,
	.load-browser-regform .test-block,
	.custom-input-wrap .autocomplete-container {
		display: block !important;
	}

	.test-mobile-input-select .custom-input-wrap {
		display: flex !important;
	}

	.load-browser-regform .custom-input-wrap .form-input-label {
		flex: 0 0 100%;
		max-width: 100% !important;
		width: 100%;
		margin-bottom: 0;
		text-align: left;
	}
}

/* user registration form */
#btn_register.disabled,
.btn_register.disabled {
	cursor: not-allowed;
}

@media (max-width: 1199px) {
	/* #wheelBGHeader span {
    font-size: 48px !important;
  } */
}

@media (max-width: 991px) {
	/* #wheelBGHeader span {
    font-size: 36px !important;
  } */
}

/* offer responsive : jackpot game */
@media (max-width: 991px) {
	.offer .brand-logo img {
		width: 100%;
		height: 100%;
	}

	.wheelofgenesis-bonuses-ul li.offer .offer-wrap:after {
		height: 110px !important;
	}

	.wheelofgenesis-bonuses-ul .offer .offer-wrap .offer-inner {
		min-height: 120px !important;
	}

	.genesis-wheel-circle-right-button button.btn {
		left: 50% !important;
		transform: translateX(-50%);
	}
}

@media (max-width: 767px) {
	.wheelofgenesis-bonuses-ul .free-spins {
		display: none !important;
	}

	.wheelofgenesis-bonuses-ul {
		width: 100%;
	}

	.offer .brand-logo img {
		max-width: 100px;
	}

	.wheelofgenesis-bonuses-ul {
		width: 100% !important;
	}

	.wheelofgenesis-bonuses-ul .offer .offer-wrap {
		width: 100%;
	}

	.vertical-bonus a {
		padding: 10px 15px !important;
	}

	.wheelofgenesis-bonuses-ul .casino {
		width: 50% !important;
		padding: 15px !important;
	}

	.wheelofgenesis-bonuses-ul .no {
		position: relative !important;
		top: 0 !important;
		left: 0 !important;
		padding: 10px !important;
	}
}

@media (max-width: 575px) {
	.wheelofgenesis-bonuses-ul li .top {
		display: block !important;
	}

	.wheelofgenesis-bonuses-ul .casino {
		margin: 0 auto !important;
	}

	.wheelofgenesis-bonuses-ul li.offer .offer-wrap:after {
		right: 0 !important;
	}
}

button.btn-effect {
	position: relative;
	overflow: hidden;
	transition: background 400ms;
	color: #fff;
	background-color: #6200ee;
	padding: 1rem 2rem;
	font-family: "Roboto", sans-serif;
	font-size: 1.5rem;
	outline: 0;
	border: 0;
	border-radius: 0.25rem;
	box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.3);
	/* black with 30% opacity */
	cursor: pointer;
}

span.ripple {
	position: absolute;
	border-radius: 50%;
	transform: scale(0);
	animation: ripple 600ms linear;
	background-color: rgba(255, 255, 255, 0.7);
}

@keyframes ripple {
	to {
		transform: scale(4);
		opacity: 0;
	}
}

/* Start Button Effect */
.heart_beat {
	animation: heartBeat 2s infinite;
	transform: scale(1);
}

@keyframes heartBeat {
	0% {
		transform: scale(1);
	}

	14% {
		transform: scale(1.3);
	}

	28% {
		transform: scale(1);
	}

	42% {
		transform: scale(1.3);
	}

	70% {
		transform: scale(1);
	}
}

.neumorphism1 {
	animation: neumor_phism1 1s infinite;
	box-shadow: inset 5px 5px 10px #cee3f2, inset -5px -5px 10px #faffff;
}

@keyframes neumor_phism1 {
	0% {
		box-shadow: inset 5px 5px 10px #cee3f2, inset -5px -5px 10px #faffff;
	}

	25% {
		box-shadow: inset 4px 4px 8px #cee3f2, inset -4px -4px 8px #faffff;
	}

	50% {
		box-shadow: inset 3px 3px 6px #cee3f2, inset -3px -3px 6px #faffff;
	}

	75% {
		box-shadow: inset 4px 4px 8px #cee3f2, inset -4px -4px 8px #faffff;
	}

	100% {
		box-shadow: inset 5px 5px 10px #cee3f2, inset -5px -5px 10px #faffff;
	}
}

.neumorphism2 {
	animation: neumor_phism2 1s infinite;
	text-shadow: 2px 2px 2px #d6e1ef99, 0 0 0 #000, 2px 2px 2px #d6e1ef00;
	box-shadow: 4px 2px 16px rgba(136, 165, 191, 0.48), -4px -2px 16px #fff;
}

@keyframes neumor_phism2 {
	0% {
		box-shadow: inset 3px 3px 7px rgba(136, 165, 191, 0.48), inset -3px -3px 7px #fff;
		color: #000;
		text-shadow: 1px 1px 1px #d6e1ef99, 0 0 0 #000, 1px 1px 1px #d6e1ef00;
	}

	to {
		text-shadow: 2px 2px 2px #d6e1ef99, 0 0 0 #000, 2px 2px 2px #d6e1ef00;
		box-shadow: 4px 2px 16px rgba(136, 165, 191, 0.48), -4px -2px 16px #fff;
	}
}

.in_and_out {
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.in_and_out::after {
	background: #fff;
	content: "";
	height: 100%;
	left: -100%;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
	will-change: transform;
	animation: inandout 1s infinite;
}

@keyframes inandout {
	0% {
		transform: translateX(0);
	}

	to {
		transform: translateX(200%);
	}
}

.click_to_fill {
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.click_to_fill::after {
	background: #fff;
	content: "";
	display: block;
	height: var(--height, 1em);
	left: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%) translateX(var(--progress, -100%));
	transition: transform 0.2s ease, height 0.2s ease;
	width: 100%;
	z-index: -1;
	animation: clicktofill 1s infinite;
}

@keyframes clicktofill {
	0% {
		--progress: 0;
	}

	to {
		height: 100%;
	}
}

.rubberband {
	animation: rubber_band 0.8s infinite;
}

@keyframes rubber_band {
	0% {
		transform: scaleX(1);
	}

	30% {
		transform: scale3d(1.25, 0.75, 1);
	}

	40% {
		transform: scale3d(0.75, 1.25, 1);
	}

	50% {
		transform: scale3d(1.15, 0.85, 1);
	}

	65% {
		transform: scale3d(0.95, 1.05, 1);
	}

	75% {
		transform: scale3d(1.05, 0.95, 1);
	}

	to {
		transform: scaleX(1);
	}
}

.text_slide {
	--height: 40px;
	--progress: 0px;
	animation: textslide 0.8s infinite;
	text-shadow: 0 calc(var(--progress) * -1) #fff, 0 calc(var(--height) - var(--progress)) wheat;
	position: relative;
	overflow: hidden;
	line-height: var(--height);
}

@keyframes textslide {
	0% {
		--progress: var(--height);
		text-shadow: 0 calc(var(--height) - var(--progress)) wheat;
	}

	to {
		--progress: 0px;
		text-shadow: 0 calc(var(--progress) * -1) #fff;
	}
}

.slicer {
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.slicer::after,
.slicer::before {
	z-index: -1;

	--skew: 0.2;
	content: "";
	display: block;
	background: #fff;
	height: 102%;
	left: calc(-50% - 25% * var(--skew));
	pointer-events: none;
	position: absolute;
	top: -104%;
	transform: skew(calc(150deg * var(--skew))) translateY(var(--progress, 0));
	width: 100%;
}

.slicer::after {
	--progress: 0%;
	left: calc(50% + 25% * var(--skew));
	top: 102%;
	animation: slicer_btn 0.7s infinite;
}

.slicer::before {
	animation: slicer_btn_before 0.7s infinite;
}

@keyframes slicer_btn {
	0% {
		--progress: 100%;
	}

	30% {
		--progress: 80%;
	}

	40% {
		--progress: 40%;
	}

	50% {
		--progress: 0%;
	}

	65% {
		--progress: -40%;
	}

	75% {
		--progress: -80%;
	}

	to {
		--progress: -102%;
	}
}

@keyframes slicer_btn_before {
	0% {
		--progress: -102%;
	}

	30% {
		--progress: -80%;
	}

	40% {
		--progress: -40%;
	}

	50% {
		--progress: 0%;
	}

	65% {
		--progress: 40%;
	}

	75% {
		--progress: 80%;
	}

	to {
		--progress: 100%;
	}
}

.double_triangle {
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.double_triangle::after,
.double_triangle::before {
	--tilt: 1.2rem;
	background: #fff;
	-webkit-clip-path: polygon(0 0, calc(100% - var(--tilt)) 0, 100% 50%, calc(100% - var(--tilt)) 100%, 0 100%);
	clip-path: polygon(0 0, calc(100% - var(--tilt)) 0, 100% 50%, calc(100% - var(--tilt)) 100%, 0 100%);
	content: "";
	display: block;
	height: 100%;
	left: calc(-100% - var(--tilt));
	position: absolute;
	top: 0;
	transform: translateX(var(--progress, 0));
	transition: transform 0.2s ease;
	width: calc(100% + var(--tilt));
	z-index: -1;
}

.double_triangle:after {
	left: 100%;
	transform: translateX(var(--progress, 0)) rotate(180deg);

	animation: doubleTriangle 0.8s infinite;
}

.double_triangle:before {
	animation: doubleTriangle_before 0.8s infinite;
}

@keyframes doubleTriangle {
	0% {
		--progress: 100%;
	}

	30% {
		--progress: 80%;
	}

	40% {
		--progress: 40%;
	}

	50% {
		--progress: 0%;
	}

	65% {
		--progress: -40%;
	}

	75% {
		--progress: -80%;
	}

	to {
		--progress: -102%;
	}
}

@keyframes doubleTriangle_before {
	0% {
		--progress: -102%;
	}

	30% {
		--progress: -80%;
	}

	40% {
		--progress: -40%;
	}

	50% {
		--progress: 0%;
	}

	65% {
		--progress: 40%;
	}

	75% {
		--progress: 80%;
	}

	to {
		--progress: 100%;
	}
}

.seizure_glitch {
	animation: glitch-text 0.2s infinite reverse;
	inset: -2px;
}

@keyframes glitch-text {
	0% {
		text-shadow: 0 0 0 red, 0 0 0 blue;
		transform: translate(2px, -1px);
	}

	to {
		text-shadow: -2px 1px 0 red, 2px -1px 0 blue;
		transform: translate(-2px, -1px);
	}
}

/* End Button Effect */
.main-bottom {
	margin-top: 10px;
}

.santa {
	position: fixed;
	right: 0;
	bottom: 0;
	height: 220px;
	/* z-index: 1; */
}

.christams_tree {
	position: fixed;
	left: 0;
	bottom: 0;
	height: 220px;
	/* z-index: 1; */
}

@media (max-width: 991px) {

	.santa,
	.christams_tree {
		height: 90px;
	}
}

.custom-input-wrap input::placeholder {
	color: #000 !important;
}

.balloon {
	position: fixed;
	animation: balloon 8s ease-in-out infinite;
	/* z-index: -1; */
	bottom: -110%;
	width: 100%;
	text-align: center;
	transform: translate(30%);
}

.balloon:nth-child(2) {
	position: fixed;
	animation: balloon 7s ease-in-out infinite;
	/* z-index: -1; */
	bottom: -110%;
	width: 100%;

	text-align: center;
	transform: translateX(0%);
}

.balloon:nth-child(3) {
	position: fixed;
	animation: balloon 9s ease-in-out infinite;
	bottom: -110%;
	transform: translateX(-40%);
	width: 100%;
	text-align: center;
}

.balloon:nth-child(4) {
	position: fixed;
	animation: balloon 10s ease-in-out infinite;
	bottom: -110%;
	transform: translateX(-15%);
	width: 100%;
	text-align: center;
}

.balloon:nth-child(5) {
	position: fixed;
	animation: balloon 11s ease-in-out infinite;
	bottom: -110%;
	transform: translateX(45%);
	width: 100%;
	text-align: center;
}

.balloon:nth-child(6) {
	position: fixed;
	animation: balloon 13s ease-in-out infinite;
	bottom: -110%;
	transform: translateX(18%);
	width: 100%;
	text-align: center;
}

.balloon .balloon-img {
	width: 7%;
	height: 7%;
}

@media (max-width: 480px) {
	.balloon .balloon-img {
		width: 20%;
		height: 20%;
	}
}

@keyframes balloon {
	from {
		bottom: -110%;
	}

	to {
		bottom: 110%;
	}
}