/* CSS Document */
body,html{margin:0; padding:0;}
body{background:#101211; color:#FFF;touch-action: pan-x pan-y;}
html {
	-webkit-text-size-adjust: none;
	touch-action: manipulation;
}

.error{ color:#F00;}
input.error,select.error{ border: 1px solid #F00 !important;}
label.error {display: none; font-weight:normal !important;}
label small{ font-weight:normal !important; color:#333; font-size:80%;}
.checkbox label, .radio label{ font-weight:bold;}

#termsTxt{padding:0; margin-top:15px;}
#termsTxt p{margin:0; padding:0; max-width:50%;}
#termsTxt p.l15{padding-left:15px;}

.classLoss{filter: grayscale(100%);-o-filter: grayscale(100%);-moz-filter: grayscale(100%);-webkit-filter: grayscale(100%);filter: gray; opacity:0.8;}
.classBeforeOpen{filter: grayscale(70%);-o-filter: grayscale(70%);-moz-filter: grayscale(70%);-webkit-filter: grayscale(70%);filter: gray;}
.ctrlBt a.disabled img{filter: grayscale(70%);-o-filter: grayscale(70%);-moz-filter: grayscale(70%);-webkit-filter: grayscale(70%);filter: gray;}

.winPopup{max-width:100%;width:70%;box-shadow: #fdd065 0px 5px 15px;}
.winPopup .modal-body{margin:0; padding:0;}
.winPopup .modal-content{background:transparent !important;}
.winPopup .modal-footer{border-top:none;}
#chkImgShare{max-width:100%; width:100%;}

#chkShowTxt{display:block; height:50px; margin:20px 0;}
.headText01{text-align:center;width:100%;max-width:380px;margin:0 auto;}
.bt01{text-align:center;width:100%;max-width:380px;margin:0 auto;}

/*
#showSelectText{position:fixed;z-index:999999;top:12px;right:12px;}
#showSelectText >div{position:relative;pointer-events:auto;overflow:hidden;margin:0 0 6px;padding:15px;width:auto;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-position:15px center;background-repeat:no-repeat;-moz-box-shadow:0 0 12px #999;-webkit-box-shadow:0 0 12px #999;box-shadow:0 0 12px #999;color:#FFF;opacity:.9;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);filter:alpha(opacity=80);background-color:#BD362F;}
*/
#showSelectText{margin:0; padding:0; text-align:left; margin-left:30px;}
#showSelectTextLogin{margin:0; padding:0; text-align:left;}
.posLogin{margin-left:240px;font-size:14px; height:80px; margin-top:30px;}
.chkSignout{display:inline-block; margin-left:10px;}

#showUserData{text-align:center; position:absolute; width:100%; bottom:-35px; left:0;}
#showUserData .dataUser{ display:inline-block; margin-right:20px;}
#showUserData .dataCode{ display:inline-block; margin-right:20px;}
@media (max-width: 576px) {
	.winPopup{max-width:100%;width:95%;}
	#userDateTime{display:block !important;}
	.modal-dialog {
		position: relative;
		width: 80%;
		margin: 30% auto;
	}
	#showUserData{bottom:-75px !important;}
	.posLogin{margin-left:0;font-size:12px; margin-top:0; height:auto !important; text-align:center;}
	.chkSignout{display:inline-block; margin-left:10px; margin-top:5px;}
}
@media only screen and (max-width: 575px) {
	.winPopup{max-width:100%;width:95%;}
	#showUserData{bottom:-50px !important;}
	.modal-dialog {
		position: relative;
		width: 80%;
		margin: 30% auto;
	}
}
@media only screen and (max-width: 696px) {
	.winPopup{max-width:100%;width:95%;}
	#showUserData{bottom:-50px !important;}
	.modal-dialog {
		position: relative;
		width: 80%;
		margin: 30% auto;
	}
}

.htolltip:hover{ cursor:help;}
.scrollbox{ height:400px; border:1px solid #CCCCCC;overflow-y:scroll; padding:5px;}

#wait{ background:url(../img/loading.gif) no-repeat bottom center; text-align:center; color:#CCC; height:60px;}
#wait2{ background:url(../img/loading2.gif) no-repeat center left; text-align:left; color:#CCC; height:20; padding-left:20px;}
.pagination{ margin-top:5px;}

/*header*/
header{background:#000000; padding:15px 0;}
header .headLogo{ height:54px;}
header .divCer{display:inline-block; margin-left:30px;}
header .headCer{ height:50px; margin-right:20px;}
.leftLogo{padding-left:10px; padding-right:0;}
.btRegister{font-family: "Roboto", Sans-serif;font-weight: 600;fill: #000000;color: #000000;background-color: transparent;background-image: linear-gradient(180deg, #F0B136 10%, #F8D187 95%);border-style: solid;border-width: 1px 1px 1px 1px;border-color: #707070;border-radius: 5px 5px 5px 5px; padding:10px 20px;}
.btRegisterMb{font-family: "Roboto", Sans-serif;font-size: 11px;font-weight: 600;fill: #000000;color: #000000;background-color: transparent;background-image: linear-gradient(180deg, #F0B136 10%, #F8D187 95%);border-style: solid;border-width: 1px 1px 1px 1px;border-color: #707070;border-radius: 5px 5px 5px 5px; padding:5px 9px 5px 9px; position:absolute; right:0;}
.btRegisterMb:hover{color:#000;}
.rightMenu{margin-top:10px; text-align:right;}
.rightMenu ul{ margin:0; padding:0;}
.rightMenu ul li{margin:0; padding:0; list-style:none; display:inline-block; margin-left:20px;}
.rightMenu ul li:first-child{margin-left:0;}
.btRegister:hover{color:#000;}

.modal-footer{border-top:none;}
.modal-header{ border-bottom:none;}

a.disabled {
  pointer-events: none;
  cursor: default;
}

/*custom column*/
#shuffle{display:table; width:100%; max-width:380px; margin:0 auto;}
.column5{ width:calc(100% / 5); padding:0 1%; display:inline-block; margin-bottom:25px; }
.column4{ width:calc(100% / 4); padding:0 1%; display:inline-block; margin-bottom:8px; }
.column3{ width:calc(100% / 3); padding:0 1%; display:inline-block; margin-bottom:15px; text-align:center; }
.column2{ width:calc(100% / 2); padding:0 1%; display:inline-block; margin-bottom:25px; }

.boxImgWrapper{ position:relative; width:100%; height:auto; display:block; cursor:pointer;}
.boxImgWrapper .img-thumbnail{padding:0; border:none;background-color:transparent;}
.boxImgWrapper img{width:200px; height:200px;}
.loading{width:100%; height:100%; position:absolute; background:#101211; display:none; text-align:center; border-radius:4px;}

.ctrlBt{width:auto; max-width:100%; margin:0 auto; padding-top:20px; text-align:left;}
.ctrlBt a{color:#000;}
audio {display: none;}

.btRealSpin01 {
    font-weight: 600;
    fill: #000000;
    color: #FFF;
    background-color: transparent;
    background-image: linear-gradient(180deg, #F0B136 10%, #2ab616 95%);
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #707070;
    border-radius: 5px 5px 5px 5px;
    padding: 10px 20px;
}
.btDemoSpin01 {
    font-weight: 600;
    fill: #000000;
    color: #000000;
    background-color: transparent;
    background-image: linear-gradient(180deg, #F0B136 10%, #e52323 95%);
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #707070;
    border-radius: 5px 5px 5px 5px;
    padding: 10px 20px;
}

/*menu*/
.headMenu{background-color: transparent;background-image: linear-gradient(180deg, #F0B136 0%, #F8D187 100%); height:44px;}
.headMenu ul{ margin:0; padding:0; margin-top:12px;}
.headMenu ul li{ display:inline-block;}
.headMenu ul li a{padding:0px 19px 0px 19px; color:#000; font-weight:600;}
.headMenu ul li:first-child a{ padding-left:5px;}
#mobileMenu{display:none;}
#showMbMenu{ background:#E0B156; width:70%; position:fixed; top:0; bottom:0; z-index:9999; margin-left:-70%;}
#showMbMenu ul{display:block; margin:0 15px 0px 15px; padding:0;}
#showMbMenu li{ margin:0; padding:0; list-style:none;}
#showMbMenu li a{font-size: 15px;border-width: 0px 0px 1px 0px;padding: 12px 0px 12px 7px; border-bottom:#000 solid 1px; display:block; color:#000;}


#winBox{height:600px;width:400px; margin:0 auto; max-width:100%;}
#winBox2{height:640px;width:400px; margin:0 auto; max-width:100%;}
#yourHistory{ background-color:#c39e4b; border:none; width:120px; height:40px; font-size:12px; border-radius:8px;}
#allHistory{ background-color:#c39e4b; border:none; width:120px; height:40px; font-size:12px; border-radius:8px; margin-left:5px;}
.activeHistory{color:#000 !important;}
.data-list {
	height: 460px;
	width: 86%;
	margin:0 auto;
	padding: 2rem;
	overflow-y: hidden;
	border-radius: 5px;
	font-size:14px;
}
.data-list li{list-style:none;width:100%; clear:both;}
.data-list li small.left{width:auto;}
.data-list li small.right{width:auto; right:45px; float:right; padding-bottom:5px;}
.data-list li small.right strong{color:#F00;}
.data-list{overflow-y:auto;}
.data-list::-webkit-scrollbar {width: 15px;}
.data-list::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px #730100;}
.data-list::-webkit-scrollbar-thumb {background-color: #c39e4b;outline: 1px solid #730100;}

.winner-detail-with-bg {
    position: relative;
    padding: 0.8rem 0.25rem 0;
    margin: 0.1rem 0 0;
    font-size: .16rem;
    min-height: 90%;
    background: transparent;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 0;
}
.winner-detail-with-bg::before {
    content: '';
    position: absolute;
    inset: -0.12rem -0.03rem 0;
    padding: 0.02rem;
    z-index: -1;
    background: url(../img/frame.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.winner-detail-with-bg1 {
    position: relative;
    padding: 0.8rem 0.25rem 0;
    margin: 0.1rem 0 0;
    font-size: .16rem;
    min-height: 90%;
    background: transparent;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 0;
}
.winner-detail-with-bg1::before {
    content: '';
    position: absolute;
    inset: -0.12rem -0.03rem 0;
    padding: 0.02rem;
    z-index: -1;
    background: url(../img/new-design/background-winner-list.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

/*footer*/
footer{border-top:#D4A24C solid 5px; transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}
footer .inner{padding:10px; background:#000000; padding-bottom:40px;}
footer .bottom{background:#1C1C1C; color:#D6D6D6; font-family:"Roboto", Sans-serif; text-align:center; padding:10px;}
footer p{ margin:0; padding:0;margin-bottom:5px;}
footer img{-webkit-filter: grayscale(100%);filter: grayscale(100%);}
footer img:hover{-webkit-filter: grayscale(0%);filter: grayscale(0%);}
.elementor-heading-title{color: #DCAC58;font-family: "Roboto", Sans-serif;font-size: 13px;font-weight: 600;}
footer .imgGame{ margin-top:20px; margin-bottom:5px;}
footer .imgGame img{height:60px; margin-bottom:15px;}

@media (min-width: 1200px) {
    .container {
        width: 96%;
		max-width:1300px;
    }
}

@media screen and (max-width: 992px) {
	/*body{ background:url(../img/new-design/Mobile/backgound.png) #101211;background-size:100% 100%; background-repeat:no-repeat;}*/
	.mb10{margin-bottom:10px;}
	#prizeListStyle ol{margin:0 auto; padding:0 15px; max-width:380px;}
	#prizeListStyle .topicImg{ text-align:center; margin-top:30px;}
	footer .imgGame img{height:auto !important; max-width:100%;}
	#desktopMenu{display:none;}
	#mobileMenu{display:block !important;}
	.boxImgWrapper img{ height:auto !important;}
}

@media only screen and (max-width: 480px) {
	/*body{ background:url(../img/new-design/Mobile/backgound.png) #101211;background-size:100% 100%; background-repeat:no-repeat;}*/
	#mainbox {position: relative;width: 330px;height: 330px;}
	#winBox{ max-width:95%;}
	#winBox2{ max-width:95%; height:auto !important;}
	.winner-detail-with-bg1 {padding:0.8rem 0.25rem 3rem;}
	#termsTxt{margin-top:25px;}
	#termsTxt p{max-width:100% !important;}
	.mb10{margin-bottom:10px;}
	#prizeListStyle ol{margin:0; padding:0 15px;}
	#prizeListStyle .topicImg{ text-align:center; margin-top:30px;}
	footer .imgGame img{height:auto !important; max-width:100%;}
	#desktopMenu{display:none;}
	#mobileMenu{display:block !important;}
	.boxImgWrapper img{ height:auto !important;}
	.mb100{width:100% !important; margin:10px 0;}
	.boxImgWrapper img{width:100% !important; height:auto !important;}
	#shuffle{margin-top:10px;}
	#showSelectText{display:block; margin-right:0; text-align:left; margin-left:0; position:absolute; bottom:-35px; font-size:12px; z-index:9999;}
	.ctrlBt{text-align:center; position:relative;}
	.swal2-container{z-index:999999 !important;}
	.small, small {font-size:70% !important;}
	.data-list {width:90% !important;}
	#chkShowTxt{margin:5px 0;}
	.column3{ width:calc(100% / 3); padding:0 1%; display:inline-block; margin-bottom:5px; text-align:center; }
}

.has-feedback label~.form-control-feedback{top:0 !important;}

.pagination {
	list-style-type: none;
	padding: 10px 0;
	display: inline-flex;
	justify-content: space-between;
	box-sizing: border-box;
}
.pagination li {
	box-sizing: border-box;
	padding-right: 10px;
}
.pagination li a {
	box-sizing: border-box;
	background-color: #e2e6e6;
	padding: 8px 12px;
	text-decoration: none;
	font-size: 12px;
	font-weight: bold;
	color: #616872;
	border-radius: 4px;
}
.pagination li a:hover {
	background-color: #d4dada;
}
.pagination .next a, .pagination .prev a {
	text-transform: uppercase;
	font-size: 12px;
}
.pagination .currentpage a {
	background-color: #518acb;
	color: #fff;
}
.pagination .currentpage a:hover {
	background-color: #518acb;
}