body {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	color: #254C5A;
	background-color: #F7F9FA;
}

/* width */
::-webkit-scrollbar {
	width: 4px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
	background: #f1f1f1; 
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
	background: #888; 
	border-radius: 10px;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
	background: #555; 
  }


/**==========<Animations>==================*/

@keyframes shake {
	0% {
		transform: translate(1px, 1px) rotate(0deg);
	}

	10% {
		transform: translate(-1px, -2px) rotate(-1deg);
	}

	20% {
		transform: translate(-3px, 0px) rotate(1deg);
	}

	30% {
		transform: translate(3px, 2px) rotate(0deg);
	}

	40% {
		transform: translate(1px, -1px) rotate(1deg);
	}

	50% {
		transform: translate(-1px, 2px) rotate(-1deg);
	}

	60% {
		transform: translate(-3px, 1px) rotate(0deg);
	}

	70% {
		transform: translate(3px, 1px) rotate(-1deg);
	}

	80% {
		transform: translate(-1px, -1px) rotate(1deg);
	}

	90% {
		transform: translate(1px, 2px) rotate(0deg);
	}

	100% {
		transform: translate(1px, -2px) rotate(-1deg);
	}
}


.shake:hover {
	animation: shake 0.5s;
	animation-iteration-count: 3;
}

.shake {
	display: inline-block
}

.shake-active {
	animation: shake 0.5s;
	animation-iteration-count: infinite;
}


@keyframes turn {
	0% {
		transform: rotateY(-180deg);
	}

	10% {
		transform: rotateY(-144deg);
	}

	20% {
		transform: rotateY(-108deg);
	}

	30% {
		transform: rotateY(-72deg);
	}

	40% {
		transform: rotateY(-36deg);
	}

	50% {
		transform: rotateY(0deg);
	}

	60% {
		transform: rotateY(36deg);
	}

	70% {
		transform: rotateY(72deg);
	}

	80% {
		transform: rotateY(108deg);
	}

	90% {
		transform: rotateY(144deg);
	}

	100% {
		transform: rotateY(180deg);
	}
}

.spin-active {
	animation: turn 0.3s;
	animation-iteration-count: infinite;
}


/*============<Components>======================*/



/* Tooltip text */
.tooltiptext-right {
	visibility: hidden;
	width: 120px;
	background-color: black;
	color: #fff;
	text-align: center;
	padding: 5px 0;
	margin-left: -120px;
	border-radius: 6px;
	position: absolute;
	z-index: 1;
}


.tooltiptext-left {
	visibility: hidden;
	width: 120px;
	background-color: black;
	color: #fff;
	text-align: center;
	padding: 5px 0;
	margin-left: -60px;
	border-radius: 6px;
	position: absolute;
	z-index: 1;
}

.texttip-trigger .tooltiptext-right::after {
	content: " ";
	position: absolute;
	top: 100%;
	/* At the bottom of the tooltip */
	left: 60%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: black transparent transparent transparent;
}

.texttip-trigger .tooltiptext-left::after {
	content: " ";
	position: absolute;
	top: 100%;
	/* At the bottom of the tooltip */
	left: 10%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: black transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.texttip-trigger:hover .tooltiptext-right,
.texttip-trigger:hover .tooltiptext-left {
	visibility: visible;
}


.card-float {
	background-color: transparent;
	border-radius: 12px;
	box-shadow: 4px 2px 15px -9px;
}

.card-start-game {
	min-height: 140px;
	background: url('../images/card_qr_bg.png');
	background-size: 70% 100%;
	background-repeat: no-repeat;
}

.card-info {
	border-radius: 4px;
	padding: 16px;
	box-shadow: 3px 6px 19px -15px;
}

.my-btn {
	background-color: #00A0AF !important;
	border: 1px solid #00A0AF !important;
}


.form-border {
	border: 1px solid #00A0AF;
}


.page-bottom-red-gradient {
	background: linear-gradient(180deg, #F7F9FA 60.91%, #ED1A3B 110.55%);
	background-size: 100% 50%;
	background-repeat: no-repeat;
	background-position: bottom;

	-webkit-transition: background-size 500ms linear;
	-ms-transition: background-size 500ms linear;
	transition: background-size 500ms linear;
}

.page-bottom-green-gradient {
	background: linear-gradient(180deg, #F7F9FA 80.91%, #A6CE39 110.55%) fixed;
	background-size: 100% 60%;
	background-repeat: no-repeat;
	background-position: bottom;
}

.page-bottom-multicolor-gradient {
	background: url('../images/game/page_bottom_multicolor.png') fixed;
	background-size: 100% 40% !important;
	background-position: bottom;
	background-repeat: no-repeat;

	-webkit-transition: background-size 500ms linear;
	-ms-transition: background-size 500ms linear;
	transition: background-size 500ms linear;
}

.page-animate-background {
	background-size: 100% 0%;

	-webkit-transition: background-size 500ms linear;
	-ms-transition: background-size 500ms linear;
	transition: background-size 500ms linear;
}


.coupon-mask {
	-webkit-mask-image: url(../images/game/coupon_mask.png);
	mask-image: url(../images/game/coupon_mask.png);
	mask-repeat: no-repeat;
	mask-size: 100% 98%;
}



.coupon-mask-vertical {
	-webkit-mask-image: url(../images/game/coupon_mask_vertical.png);
	mask-image: url(../images/game/coupon_mask_vertical.png);
	mask-repeat: no-repeat;
	mask-size: 100% 95%;
}



/**===========<Game>============*/

.game-slot {
	width: 92px;
	height: 92px;
}

/*==================<Font style>**/

.text-aj-secondary {
	color: #849DAA;
	font-size: 14px;
	font-weight: 400;
}


.text-aj-sub-title {
	color: #849DAA;
	font-size: 14px;
	font-weight: 600;
}

.text-title {
	font-size: 20px;
	font-weight: 500;
	line-height: 24px;
	color: rgba(37, 76, 90, 1);

}