@charset "UTF-8";
/*!
 * King Spinner  v1.0.0
 * Copyright 2025 Bee Games. All Rights Reserved. */

@media (max-width: 932px), (max-height: 430px) {

	.login-card {
		max-width: 300px;
		margin-top: 45px;
	}

	.login-box-padding {
		padding: 27px 15px 0px;
	}

	.logo_login {
		height: 58px;
		left: 62px;
		top: -30px;
	}

	.btn-login {
		margin-top: 15px;
		padding: 5px 0px 10px;
	}

	.login-card .mb-3 {
		margin-bottom: 5px !important;
	}

	.md-disabled {
		display: block;
	}

	.game-scan img {
		opacity: 0;
	}

	.game-scan input {
		font-size: 0px;
		right: 0px;
		top: 0px;
		width: 0px;
		cursor: not-allowed;
	}

	.md-txt-left {
		text-align: left !important;
	}

	.game-balance {
		margin-left: -5px;
	}

	.vheight {
		height: calc(100vh - 27px);
	}

	.main-header {
		padding:0px;
	}

	.game-time-container {
		top:5px;
		padding-left: 72px;
	}

	#topCountdown { 
		font-size: 22px; 
		left: 26px; 
		bottom: 25px;
	}

	.game-time-container img {
		height: 110px;
	}

	.vheight .col-md-3 { 
		width: 27%;
	}

	.vheight .col-md-6 {
		width: 46%;
	}

	.btn-img {
		height: 36px;
	}

	.btn-profile {
		padding: 5px;
	}

	.ttl-header {
		font-size: 14px;
		padding: 14px 0px 0px 10px;
	}
	 
	.game-balance span {
		font-size: 12px;
		left: 54px;
		top: 15px;
	}

	.page-content {
		padding-top: 15px;
	}

	.infoTxt {
		font-size: 11px;
		padding: 2px;
		margin-bottom: 5px;
		margin-top: 20px;
	}

	.wheel-wrap {
		position: relative;
		margin: 0px auto;
		width: 100%;
		max-width: 270px;
		height: 270px;
	}

	.bgBackWheel {  
		width: 330px;
		height: 282px; 
		left: -31px;
		top: -7px; 
		background-size: cover;
	}

	.pointer { 
		top: 20px; 
		width: 36px;
		height: 46px;
		background-size: cover;
	}

	#spinResult {
		width: 100px;
		height: 100px;
		left: 32%;
		top: 30%; 
		background-size: cover;
		font-size: 27px;
		text-shadow: 1px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff, 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
	}

	.logoOnWheel { 
		width: 400px;
		height: 86px; 
		left: -68px; 
		background-size: cover;
	}

	.dynamic-btn {
		width: 63px;
		height: 63px;
		margin: 5px;
		font-size: 13px;
		padding: 18px 0px 15px;
	}

	.bet-info li {
		width: 105px;
		padding: 4px 2px 2px;
		font-size: 10px;
		margin: 5px 0px 0px 5px;
		height: 27px;
	}

	#gameNumbersContainer .dynamic-btn {
		width: 54px;
		height: 54px; 
		font-size: 27px;
		padding: 11px 15px 15px;
	}

	.number-wrap { 
		height: 58px; 
	}

	.amount-label { 
		left: 5px; 
		font-size: 12px; 
		width: 80px;
	}

	#historyTable {
		width: 122px;
		height: 219px;
		max-height: 220px;
		margin-left: -10px;
	}

	#historyTable.table > :not(caption) > * > * {
		padding: 5px;
	}

	#historyTable.table th { 
		height: 30px;
		font-size: 11px;
	}

	#historyTable.table td {
		background: #acbcff;
		font-size: 12px;
	}

	#historyTable {
		height: 160px;
		max-height: 160px;
	}

	#historyTable, .drawTimeTtl, .drawTime {
		margin-left: -30px;
		width: 118px;
	}

	.drawTimeTtl { 
		font-size: 12px;
		padding: 0px 10px; 
	}

	.drawTime {
		padding: 0px 5px;
		text-align: center;
		font-size: 15px;
		margin: 2px 0px 2px -30px;
	}

	.game-actions button {
		background: url(../images/btn_game-action.png) no-repeat 0 0;
		background-size: cover;
		color: #fff;
		cursor: pointer;
		font-weight: 700;
		transition: all 0.12s;
		margin: 0px 0px 7px;
		font-size: 14px;
		padding: 3px 5px 5px 15px;
		width: 130px;
		height: 45px;
		float: right;
	}

	#spinResult strong {
		margin-left: -16px;
	}

		#spinResult strong span {
			font-size: 12px;
			top: 43%;
			padding-left: 2px;
		}

	.modal-title {
		font-size: 22px;
	}
		 
}


	#historyTable, .drawTimeTtl, .drawTime {
	z-index: 1;
	position: relative;
}

@media (max-width: 915px), (max-height: 412px) {

	.infoTxt {
		margin-top: 30px;
	}
	 
	.bet-info li {
		width: 102px; 
	}

	.wheel-wrap {
		margin-top: 12px;
	}

	.drawTimeTtl { 
		margin-top: 5px;
	}
}

@media (max-width: 896px), (max-height: 414px) {

	.dynamic-btn { 
		margin: 3px; 
	}

	.bet-info li {
		width: 100px;
	}

}

@media (max-width: 854px), (max-height: 384px) {

	.btn-img {
		height: 30px;
	}

	.game-time-container img {
		height: 99px;
	}

	#topCountdown {
		font-size: 20px;
		left: 23px;
		bottom: 23px;
	}

	.ttl-header {
		font-size: 14px;
		padding: 12px 10px 10px 5px;
	}

	.md-txt-left {
		text-align: left !important;
	}

	.game-balance {
		margin-left: 0px;
	}

	.game-balance span {
		font-size: 12px;
		left: 47px;
		top: 12px;
	}

	.infoTxt {
		font-size: 10px; 
	}

	.dynamic-btn {
		margin: 2px;
	}

	.bet-info li {
		width: 95px;
	}

	.game-actions button {
		width: 126px;
		height: 45px;
	}

	.wheel-wrap { 
		max-width: 254px;
		height: 254px;
	}

	.bgBackWheel {
		width: 315px;
		height: 269px;
		left: -32px;
		top: -7px;
		background-size: cover;
	}

	.drawTimeTtl { 
		font-size: 10px; 
	}

	.drawTime { 
		font-size: 12px; 
	}

	#historyTable.table th {
		height: 25px;
		font-size: 11px;
	}

	#historyTable.table > :not(caption) > * > * {
		padding: 4px 5px; 
	}

	.number-wrap {
		height: 50px;
	}

	#gameNumbersContainer .dynamic-btn {
		width: 45px;
		height: 45px;
		font-size: 25px;
		padding: 3px 10px 8px 5px;
	}

	.amount-label {
		left: 4px;
		font-size: 10px;
		width: 72px;
		top: -17px;
	}
 
}

@media (max-width: 844px), (max-height: 390px) {

	.bet-info li {
		width: 92px;
	}

	.logoOnWheel {
		width: 380px;
		height: 82px;
		left: -64px;
		background-size: cover;
	}

	#historyTable { 
		height: 160px;
		max-height: 160px; 
	}

	#historyTable, .drawTimeTtl, .drawTime {
		margin-left: -30px;
		width: 118px;
	}

}

@media (max-width: 812px), (max-height: 375px) {

	.vheight {
		height: calc(100vh - 27px) !important;
	}

	.md-txt-left {
		text-align: left !important;
	}

	.game-balance {
		margin-left: -5px;
	}

	.dynamic-btn {
		width: 58px !important;
		height: 58px !important;
		margin: 2px;
		font-size: 12px;
		padding: 16px 0px 15px !important;
	}

	.bet-info li {
		width: 90px !important;
		margin: 5px 0px 0px 2px;
		padding: 3px 0px 2px !important;
	}

	.wheel-wrap {
		max-width: 245px;
		height: 245px;
	}

	.logoOnWheel {
		width: 360px;
		height: 78px;
		left: -61px;
		background-size: cover;
	}

	.bgBackWheel {
		width: 305px;
		height: 261px;
		left: -31px;
		top: -7px;
		background-size: cover;
	}

	.drawTimeTtl {
		margin-top: 10px !important;
	}

	#historyTable, .drawTimeTtl, .drawTime {
		margin-left: -45px !important;
		width: 110px !important;
	}

	.game-actions {
		top: 25% !important;
	}

		.game-actions button {
			width: 130px !important;
			height: 45px !important;
			font-size: 12px;
		}

	#spinResult {
		width: 100px;
		height: 100px;
		left: 29%;
		top: 29%;
		background-size: cover;
	}

	#gameNumbersContainer .dynamic-btn {
		width: 47px !important;
		height: 47px !important;
		font-size: 22px;
		padding: 2px 8px 5px 5px !important;
	}

	.fix-bottom {
		bottom: 5px;
	}
}

@media (max-width: 800px), (max-height: 360px) {

	.game-time-container {
		top: 5px;
		padding-left: 36px !important;
	}
	 
	.ttl-header {
		font-size: 14px;
		padding: 13px 10px 10px 10px;
	}

	.dynamic-btn {
		width: 54px !important;
		height: 54px !important;
		margin: 2px;
		font-size: 11px;
		padding: 16px 0px 15px !important;
	}

	.bet-info li {
		width: 84px;
		margin: 5px 0px 0px 2px;
	}

	.wheel-wrap {
		max-width: 230px;
		height: 230px;
		margin-left: auto;
	}
 
	.bgBackWheel {
		width: 288px;
		height: 246px;
		left: -31px;
		top: -7px;
		background-size: cover;
	}

	.logoOnWheel {
		width: 330px;
		height: 71px;
		left: -61px;
		background-size: cover;
	}

	#historyTable {
		width: 120px;
		height: 219px;
		max-height: 220px; 
	}

	#historyTable, .drawTimeTtl, .drawTime {
		margin-left: -26px;
	}

	.drawTimeTtl {
		font-size: 9px;
		margin-top: 14px;
	}

	.drawTime {
		font-size: 11px;
	}
	 
}

@media (max-width: 760px), (max-height: 360px) {

	.main-header .row > * {
		width: auto;
		max-width: 100%;
	}

	.main-header .row .col-md-8 {
		width: 70%;
	}

	.main-header .row .col-md-4 {
		width: 30%;
	}

	.main-header .row .col-md-4 .row .col-md-4 {
		width: 50%;
	}

	.md-disabled {
		display: none;
	}

	.dynamic-btn {
		width: 54px !important;
		height: 54px !important;
		margin: 2px;
		font-size: 12px;
		padding: 16px 0px 15px !important;
	}

	.bet-info li {
		width: 85px !important;
		margin: 5px 0px 0px 2px;
		padding: 3px 0px 2px !important;
	}

	.wheel-wrap { 
		margin-left: auto;
	}

	.game-actions button {
		width: 119px !important;
		height: 45px !important;
		font-size: 12px;
	}

	#gameNumbersContainer .dynamic-btn {
		width: 45px !important;
		height: 45px !important;
		font-size: 22px;
		padding: 2px 10px 5px 5px !important;
	}

}

	@media (max-width: 740px), (max-height: 360px) {

		.vheight {
			height: calc(100vh - 27px) !important;
		}

		.wheel-wrap {
			max-width: 220px;
			height: 220px;
			margin-top: 10px;
			margin-left: auto;
		}

		.bet-info li {
			width: 82px;
			margin: 5px 0px 0px 0px;
			padding: 2px 2px 2px;
		}

		#historyTable, .drawTimeTtl, .drawTime {
			margin-left: -16px;
			width: 105px;
		}
	}

	@media (max-width: 667px), (max-height: 360px) {

		.login-card {
			max-width: 300px;
			margin-top: 27px;
		}

		.game-time-container {
			top: 5px;
			padding-left: 5px !important;
		}

		.ttl-header {
			font-size: 10px; 
		}

		.dynamic-btn {
			width: 47px !important;
			height: 47px !important;
			margin: 2px;
			font-size: 10px;
			padding: 13px 0px 10px !important;
		}

		.bet-info li {
			width: 74px !important; 
			padding: 1px 0px 3px !important; 
		}

		.wheel-wrap {
			max-width: 220px;
			height: 220px;
			margin-top: 0px; 
		}

		.bgBackWheel {
			width: 278px;
			height: 238px;
			left: -31px;
			top: -7px;
			background-size: cover;
		}

		.logoOnWheel {
			width: 300px;
			height: 65px;
			left: -44px;
			background-size: cover;
		}

		#spinResult {
			width: 100px;
			height: 100px;
			left: 27%;
			top: 28%;
			background-size: cover;
		}

		.drawTimeTtl {
			font-size: 9px;
			margin-top: -15px;
		}

		.number-wrap {
			height: 45px;
		}

		#gameNumbersContainer .dynamic-btn {
			width: 40px;
			height: 40px;
			font-size: 18px;
			padding: 3px 9px 8px 0px;
		}

		#historyTable {
			width: 120px;
			height: 160px;
			max-height: 160px;
		}

		#historyTable, .drawTimeTtl, .drawTime {
			margin-left: -40px ;
			width: 96px !important;
			position: relative;
			z-index: 1;
		}

		#historyTable.table th {
			height: 25px;
			font-size: 9px;
		}

		.game-actions button {
			width: 110px !important;
			height: 40px !important;
			font-size: 12px;
		}

		.game-actions {
			top: 10%;
		}

		.amount-label {
			left: 0px;
			font-size: 9px;
			width: 54px;
			top: -15px;
		}
	}

	/*end*/