:root
{
  --main-color : #7367f0;
  --weight: bold;
  --secondColor : #8bc34a;
  --color-black: hsl(0, 0%, 10%);
  --color-darks: hsl(0, 0%, 20%);
  --color-greys: hsl(0, 0%, 80%);
  --color-light: hsl(0, 0%, 96%);
  --color-white: hsl(0, 0%, 100%);
  --color-blues: hsl(217, 91%, 60%);
  --shadow-small: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
     0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
     0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
     0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.whole-page {margin:auto; padding:0; font-family: "Microsoft YaHei", arial; background: #f1f2f2}
.panel-page {margin:auto; padding:0; font-family: "Microsoft YaHei", arial; background: #f1f2f2}
.regpage-bg {background: #f1f2f2}

.padding-top0 {padding-top: 0}
.padding-top10 {padding-top: 0.8em}
.padding-top20 {padding-top: 1.5em}
.padding-bottom0 {padding-bottom: 0}
.padding-bottom10 {padding-bottom: 0.8em}
.padding-bottom20 {padding-bottom: 1.5em}
.padding-left0 {padding-left: 0}
.padding-left10 {padding-left: 0.8em}
.padding-left20 {padding-left: 1.5em}
.padding-left30 {padding-left: 2em}
.padding-left50 {padding-left: 4em}
.padding-right0 {padding-right: 0}
.padding-right10 {padding-right: 0.8em}
.padding-right20 {padding-right: 1.5em}
.padding-right30 {padding-right: 2em}
.padding-right50 {padding-right: 4em}
label {line-height:30px}

.margin-bottom10 {margin-bottom: 0.8em}

.bg-purple {background: var(--main-color)}
.bg-green {background: #9fc5b0}
.bg-grey {background: #f1f2f2}
.bg-dgrey {background: #e9ebea}

.txt-white {color: #fff}
.txt-light {color: #f1f2f2}
.txt-red {color: #FF0000}
.txt-yellow {color: #fbf182}
.txt-purple {color: #6c62b3}
.txt-dpurple {color: #3f3a46}
.txt-grey {color:#939598}

.txt-info {color: #756b81}

.font07 {font-size: 0.7em}
.font08 {font-size: 0.8em}
.font09 {font-size: 0.9em}
.font10 {font-size: 1em}
.font12 {font-size: 1.2em}
.font13 {font-size: 1.3em}
.font15 {font-size: 1.5em}
.smain-title {font-size: 2.3em}
.hbold {font-weight: 600}

.border0 {border: 0}
.border-radius0 {border-radius: 0}
.border-radius05 {border-radius: 0.5em}
.border-radius1 {border-radius: 1em}
.border-tl-1 {border-top-left-radius: 1em}
.border-bl-1 {border-bottom-left-radius: 1em}
.border-tr-1 {border-top-right-radius: 1em}
.border-br-1 {border-bottom-right-radius: 1em}
.border-bottom {border-bottom: #2D2D2D 0.2em solid}

.wrap {width: 800px; background: #f7f7f7}

.btn-purple {
	background: var(--main-color);
	color: #fff;
	font-size:1em;
	padding:10px;
	border-radius: 10px;
}
	.btn-purple:hover {
		background: #4f459c;
		
	}

.btn-copy {
	background: var(--main-color);/*#8ba4ca*/
	color: #fff;
	font-size:1em;
	padding:10px;
	border-radius: 0;
}
	.btn-copy:hover {
		background: #494378;/*#597baf*/
		color: #fff;
	}

.btn-checked {
	background: #d1d1d1;
	text-align: center;
	color: #fff;
	font-size:1em;
	padding:10px;
	border-radius: 0;
}
.btn-dfback {
	background: #8c82d4;
	color: #fff;
	font-size:1em;
	padding:10px;
	border-radius: 0;
}
	.btn-dfback:hover {
		background: #4f459c;
		color: #FFF888;
	}
/* ------ left panel -----*/
ul.dashboard-left > li{
    margin:0;
	padding:25px 0 0 0 ;
	list-style: none;
}

	ul.dashboard-left li:first-child {
		padding-top:10px;
	}

	ul.dashboard-left > li > a {
    position: relative;
    width: 100%;
    height: 33px;
    line-height: 33px;
    display: block;
	color:#808285;
    text-indent: 10px;
    background: url(../img/icon-dashboard.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    /*-webkit-transition: all .5s ease 0s;
    -moz-transition: all .5s ease 0s;
    -o-transition: all .5s ease 0s;
    transition: all .5s ease 0s;*/
    font-size: 15px;
	font-weight: 500;
}
.dashboard-left > li.account-home > a.menu-icon {background-position: 0 -198px;  }
.dashboard-left > li.account-profile > a.menu-icon {background-position: 0 0;  }
.dashboard-left > li.account-transfer > a.menu-icon {background-position: 0 -33px;  }
.dashboard-left > li.account-rebate > a.menu-icon {background-position: 0 -231px;  }
.dashboard-left > li.account-message > a.menu-icon {background-position: 0 -66px;  }
.dashboard-left > li.account-bet > a.menu-icon {background-position: 0 -99px;  }
.dashboard-left > li.account-security > a.menu-icon {background-position: 0 -132px;  }
.dashboard-left > li.account-help > a.menu-icon {background-position: 0 -165px;  }

.dashboard-left > li.account-home > a.menu-icon > span {margin-left:30px}
.dashboard-left > li.account-profile > a.menu-icon > span {margin-left:30px}
.dashboard-left > li.account-transfer > a.menu-icon > span {margin-left:30px}
.dashboard-left > li.account-rebate > a.menu-icon > span {margin-left:30px}
.dashboard-left > li.account-message > a.menu-icon > span {margin-left:30px}
.dashboard-left > li.account-bet > a.menu-icon > span {margin-left:30px}
.dashboard-left > li.account-security > a.menu-icon > span {margin-left:30px}
.dashboard-left > li.account-help > a.menu-icon > span {margin-left:30px}

ul.dashboard-left-sub > li{
    margin-left:-15px;
	padding:0;
	list-style: none;
}

	ul.dashboard-left-sub li:first-child {
		margin-top:0;
	}

	ul.dashboard-left-sub > li > a {
		position: relative;
		width: 100%;
		height: 27px;
		line-height: 27px;
		display: block;
		color:#939598;
		text-indent: 10px;
		background: url(../img/nav-li.jpg);
		background-position: 0 0;
		background-repeat: no-repeat;
		/*-webkit-transition: all .5s ease 0s;
		-moz-transition: all .5s ease 0s;
		-o-transition: all .5s ease 0s;
		transition: all .5s ease 0s;*/
		font-size: 13px;
		font-weight: 400;

}
ul.dashboard-left-sub > li > a.onclick  {color:aquamarine}
	ul.dashboard-left-sub > li > a.visited { 
		color:#77548a; 
		list-style-image: url('../img/nav-li.jpg');
		background-repeat: no-repeat;
    	background-position: 0 -27px;
}
	ul.dashboard-left > li > a.visited { 
		color:#77548a; 
		font-weight: 600;
}




/* tab navigation 1st */
.nav-tabs-style {
  border-bottom: 1px solid var(--main-color);
}
	.nav-tabs-style > li {
		margin:0 3px;
		padding: 10px 20px;
	    background:  #939598;
		border-top-left-radius: 0.5em;
		border-top-right-radius: 0.5em;
		text-align: center;
	}
	.nav-tabs-style > li.active {
		padding: 10px 20px;
	    background: var(--main-color);
	}
	.nav-tabs-style > li > a {
	    color: #ffffff;
		font-weight:500;
	}

.nav-tabs-style-2 > li {width: 25%}
.nav-tabs-style-3 > li {width: 25%}
.nav-tabs-style-4 > li {width: 20%}
.nav-tabs-style-5 > li {width: 18%}



/* tab navigation 2nd */
.nav-pills-style > li  {
	margin:3px;
	padding: 7px 11px;
	background: #f2f2f0;
	color: #818286;
	text-align: center;
	cursor: pointer;
} 	
	.nav-pills-style > li.active  {
		border: 1px solid #8d64aa;
	    color:  #8d64aa;
	}

.nav-pills-style-2 > li {width: 25%}
.nav-pills-style-3 > li {width: 25%}
.nav-pills-style-4 > li {width: 23%}
.nav-pills-style-5 > li {width: 18%}

.nav-pills-balance > li{
	margin:10px 3px;
	padding: 10px 20px;
	background: #fff;
	color: #818286;
	text-align: center;
}

button,input,select,textarea,optgroup{font:inherit;margin:0}optgroup{font-weight:bold}
button,input{overflow:visible}button,select{text-transform:none}
button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}
button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}
.w3-black,.w3-hover-black:hover{color:#fff!important;background-color:#000!important}
.w3-red,.w3-hover-red:hover{
border: 1px solid #8d64aa;
	    color:  #8d64aa;
}
.w3-bar{width:100%;overflow:hidden}.w3-center .w3-bar{display:inline-block;width:auto}
.w3-bar .w3-bar-item{padding:8px 16px;float:left;width:auto;border:none;display:block;outline:0}
.w3-bar .w3-dropdown-hover,.w3-bar .w3-dropdown-click{position:static;float:left}
.w3-bar .w3-button{white-space:normal}
.w3-container,.w3-panel{padding:0.01em 16px}.w3-panel{margin-top:16px;margin-bottom:16px}


.calendar-style {
	width:100%;
	border: 1px solid #ced4da;
	padding:5px;
}



/*----- account-notice ----*/
.account-notice {
	background: #f1f3f2;
	color: #818286;
	padding-top: 15px;
	padding-bottom: 15px;
	border-radius: 0.5em;
	font-size: 0.9em;
}
	.account-notice ul > li {
		list-style: none;
		line-height: 17px;
    	padding-bottom: 8px;
		
	}

.account-notice .en{font-size: 0.9em;padding-left: 15px;}
.account-notice .en li{line-height: 17px;padding-bottom: 8px;}
.account-notice .en li ol{list-style-type: lower-alpha}

/*----- transfer amount ----*/
.transfer-select {
	font-size: 12px;
	
}
.transfer-select > li > span.balance-amount {color: #8d64aa}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 400px) {

}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 320px) {
}

/*-------- table style ------*/
.account-record {
	width: 100%;
	font-size: 13px;
	text-align: center;
	color:#818286;
}
	.account-record td, .account-record th {
		border: 1px solid #e0d8e3;
		padding: 5px
	}
	.account-record th{
		background: var(--main-color);
		color: #fffffd;
		font-weight: 100;
	}
	.account-record tr:nth-child(odd) {background-color: #f2f2f2;}
	.account-record tr:nth-child(even) {background-color: #e6e7e9;}



.account-expand {
	width: 100%;
	font-size: 13px;
	text-align: center;
	color:#818286;
}
	.account-expand td, .account-expand th {
		border: 1px solid #e0d8e3;
		padding: 5px
	}
	.account-expand th{
		background: var(--main-color);
		color: #fffffd;
		font-weight: 100;
	}
	.account-expand .parent {background-color: #eaeaea;}
	.account-expand .stake p:first-child{ font-weight: bold}
	.account-expand .stake p:nth-child(2){font-size: 10px;}

	.account-expand .child-row {background-color: #f3f3f3;}


.history-status-claim {    
    padding: 0 10px;
	color: #fff;
    background: #6f3890;
    border-radius: 8px;
    font-size: 12px;
}
.history-status-pending {    
    padding: 0 10px;
	color: #fff;
    background: #ffbe26;
    border-radius: 8px;
    font-size: 12px;
}
.history-status-success {    
    padding: 0 10px;
	color: #fff;
    background: #399038;
    border-radius: 8px;
    font-size: 12px;
}

.icon-wallet {
	
}


/*----------- withdrawl radio button ------------------*/
.reveal-if-active {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}
input[type="radio"]:checked ~ .reveal-if-active,
input[type="checkbox"]:checked ~ .reveal-if-active {
  opacity: 1;
  max-height: 100px; /* little bit of a magic number :( */
  overflow: visible;
}
		.reveal-if-active {
	  opacity: 0;
	  max-height: 0;
	  overflow: hidden;
	  transform: scale(0.8);
	  transition: 0.5s;
	  input[type="radio"]:checked ~ &,
	  input[type="checkbox"]:checked ~ & {
		opacity: 1;
		max-height: 100px;
		overflow: visible;
		padding: 10px 20px;
		transform: scale(1);
	  }
	}

/*----------- Online Bank Transfer ------------------*/
.bank-tran-alert {
	font-size: 65px;
    justify-content: center;
    display: flex;
}
	.bank-tran-tick {
		color: #b17ed0;

	}	
	.bank-tran-special {
		color: #efa0a6;

	}

.bank-odd {
	background: #868686;
    color: white;
	font-size: 0.95em;
	padding:2px 0;
	margin-bottom: 3px;
}
	.bank-odd span:before {
		display: inline-block;
		padding-right: 3px;
		vertical-align: middle;
		font-weight: 500;
	}
		span.bank-odd-checked:before{
			/*content:'123';*/
			font-family: "Font Awesome\ 5 Pro";
	   		content: "\f14a";

		}
		span.bank-odd-unchecked:before{
			/*content:'456';*/
			font-family: "Font Awesome\ 5 Pro";
	   		content: "\f0c8";

		}

/*----------- bank-transfer-icon ------------------*/

span.bank-tran-icon  {
	zoom: 0.4;
    /*width: 160px;*/
    height: 93px;
    display: block;
    text-indent: -9999px;
    background-image: url(../img/bankicon/tran-icon.jpg);
    background-repeat: no-repeat;
	/*width: 337px;
	height: 93px;*/
}
	span.bank-tran-express {background-position: 0 0;} /*快捷存款*/
	span.bank-tran-wechat {background-position: 0 -93px;} /*微信支付*/
	span.bank-tran-alipay {background-position: 0 -186px;} /*支付宝*/
	span.bank-tran-unionh5 {background-position: 0 -279px;} /*>银联在线支付*/
	span.bank-tran-unionqr {background-position: 0 -372px;} /*银联二维码支付*/
	span.bank-tran-qq {background-position: 0 -465px;} /*>QQ钱包*/
	span.bank-tran-bibao {background-position: 0 -558px;} /*>币宝支付*/
	span.bank-tran-online {background-position: 0 -651px;} /*在线支付*/
	span.bank-tran-point {background-position: 0 -744px;} /*卡*/
/*----------- draw circle ------------------*/
#circle {
  position: relative;
  margin: 0 auto;
  width: 60px;
  height: 60px;
  border-radius: 30px;
}
#text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
	font-size: 18px;
}
.round-done {
	background: #ffa4a4;
}
	.txt-done {
		color: #ffa4a4;
		padding: 10px 0;
	}
.round-progress {
	background:#ff6f6f;
}
	.txt-progress {
		color: #ff6f6f;
		padding: 10px 0;
	}
.round-pending {
	background: #bdbdbd;
}
	.txt-pending {
		color: #bdbdbd;
		padding: 10px 0;
	}

 .line{
	 border-bottom: 1px solid #bdbdbd;
 	padding-bottom:20px;
	}


.tran-box {
	border: 1px solid #ff6f6f;
	box-sizing: border-box;
	padding: 10px;
}
	.tran-box p{
		text-align: center;
		color: #ff6f6f;
	}
.tran-code {
	background: #ff6f6f;
	color : #fff !important;
	font-weight: bold;
	padding: 5px;
}
.dept-box {
	border: 1px solid #939598;
	box-sizing: border-box;
	padding: 10px;
}
	.dept-box p{
		text-align: center;
		color: #ff6f6f;
	}


/* tab navigation 3rd */ /* 07042022*/
.nav-pills-style-banking > li  {
	margin:3px;
	padding: 7px 11px;
	background: #ece9ef;
	color: #818286;
	text-align: center;
	cursor: pointer;
	border-radius: 5px;
} 	
	.nav-pills-style-banking > li.active  {
		/*border: 1px solid #8d64aa;*/
	    color:  #6c62b3;
	}

span.banking-pay  {
    display: block;
	line-height: 15px;
}
.banking-logo{
	padding-bottom: 5px;
}
	.banking-pay-name {
		color: #453c8b;
		font-size: 0.85em;
	}
	.banking-pay-amount {
		color:#97909c;
		font-size: 0.8em;
	}
	.banking-ranking {
		display: block;
		color: #ff9a0e;
		font-size: 1em;
	}
.banking-recomment {
	position:absolute; 
	top: 3px;
	left: 0;
	width: 25px;
	height: 25px;
}
/*----------- bank transfer ------------------*/
span.bank-reg {
    zoom:0.8;
    width:160px;/* Original: 160px */
    height:50px;/* Original: 50px */
    display:block;
    text-indent:-9999px;
    background-image:url(../img/bank/banklogo.png);
    background-repeat:no-repeat;
    }
    span.bank-icbc {background-position:0 0}            /* 中国工商银行 */
    span.bank-comm {background-position:-160px 0}       /* 交通银行 */
    span.bank-njcb {background-position:-320px 0}       /* 南京银行 */
    span.bank-cib {background-position:-480px 0}        /* 兴业银行 */
    span.bank-hxb {background-position:-640px 0}        /* 华夏银行 */

    span.bank-cmb {background-position:0 -50px}         /* 招商银行 */
    span.bank-boc {background-position:-160px -50px}    /* 中国银行 */
    span.bank-ceb {background-position:-320px -50px}    /* 中国光大银行 */
    span.bank-ecitic {background-position:-480px -50px} /* 中信银行 */
    span.bank-cqc {background-position:-640px -50px}    /* 重庆银行 */

    span.bank-abc {background-position:0 -100px}        /* 中国农业银行 */
    span.bank-cgb {background-position:-160px -100px}   /* 广发银行 */
    span.bank-spdb {background-position:-320px -100px}  /* 浦发银行 */
    span.bank-hkbea {background-position:-480px -100px} /* BEA东亚银行 */

    span.bank-ccb {background-position:0 -150px}        /* 中国建设银行 */
    span.bank-cmbc {background-position:-160px -150px}  /* 中国民生银行 */
    span.bank-cbhb {background-position:-320px -150px}  /* 渤海银行 */
    span.bank-pingan {background-position:-480px -150px}/* 平安银行 */

    span.bank-mandiri {background-position:0 -250px}    /* mandiri */
    span.bank-bca {background-position:-160px -250px}   /* BCA */
    span.bank-bni {background-position:-320px -250px}   /* BNI */
    span.bank-bri {background-position:-480px -250px}   /* BANK BRI */

.selection-bank label {
    width:133px;
    /*height:40px;*/
	border: 1px solid #ccc;
	cursor: pointer;
    padding-right: 6px;
    padding-bottom: 1px;
    }
.overlay:hover {
top: 0;
bottom: 0;
left: 0;
right: 0;
/*height: 100%;
width: 100%;*/
opacity: 0.3;
transition: .5s ease;
background-color: rgba(0,0,0,0.23);
}
/*.selection-bank label:hover  {
	z-index:1;
	background: #DDD;
}*/

.ac-content .info-bank {
    margin-left:20px;
    margin-right:20px;
    margin-bottom:0;
    padding-bottom:25px;
    }
    .ac-content .info-bank label {
        font-weight:normal;
        }

.ac-content .info-bank .side-left,
.ac-content .info-bank .side-right {
    float:left
    }
.ac-content .info-bank .side-right {
    margin-left:50px;
    }



/*----- point card --------*/
.pc-box-message {
	border: 1px solid #d4d4d4;
    box-sizing: border-box;
    padding: 20px 30px;
    text-align: justify;
}

.pc-message li{
	list-style: none;

}



.content-txt {
    padding: 0.375rem 0.75rem;
}

.collapsible-txt {
	background: #e9ecef;
    border: 1px solid #ced4da;
    font-size: 0.8em;
    padding: 0.375rem 0.5rem;
}
	.collapsible-txt button{
		color: #888888;
		text-align: left;
		background: none;
}

/*----- point card --------*/
.rebate-casino-amount {
	font-size: 0.85em;
}

/*---- modal ------*/
.fade {
	opacity: 0;
	-webkit-transition: opacity .15s linear;
	-o-transition: opacity .15s linear;
	transition: opacity .15s linear
}
.fade.in {
	opacity: 1
}
.collapse {
	display: none
}
.collapse.in {
	display: block
}
tr.collapse.in {
	display: table-row
}
tbody.collapse.in {
	display: table-row-group
}
.collapsing {
	position: relative;
	height: 0;
	overflow: hidden;
	-webkit-transition-property: height, visibility;
	-o-transition-property: height, visibility;
	transition-property: height, visibility;
	-webkit-transition-duration: .35s;
	-o-transition-duration: .35s;
	transition-duration: .35s;
	-webkit-transition-timing-function: ease;
	-o-transition-timing-function: ease;
	transition-timing-function: ease
}


.modal.fade .modal-dialog {
	-webkit-transform: translate(0, -25%);
	-ms-transform: translate(0, -25%);
	-o-transform: translate(0, -25%);
	transform: translate(0, -25%);
	-webkit-transition: -webkit-transform .3s ease-out;
	-o-transition: -o-transform .3s ease-out;
	transition: -webkit-transform .3s ease-out;
	transition: transform .3s ease-out;
	transition: transform .3s ease-out, -webkit-transform .3s ease-out, -o-transform .3s ease-out
}
.modal.in .modal-dialog {
	-webkit-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	-o-transform: translate(0, 0);
	transform: translate(0, 0)
}
.modal-open .modal {
	overflow-x: hidden;
	overflow-y: auto
}
.modal-dialog {
	position: relative;
	width: auto;
	/*margin: 10px*/
}
.modal-content {
	position: relative;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #999;
	border: 1px solid rgba(0,0,0,.2);
	/*border-radius: 6px;*/
	-webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5);
	box-shadow: 0 3px 9px rgba(0,0,0,.5);
	outline: 0
}
.modal-content-fb {
	width: 800px
}
.modal-backdrop {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1040;
	background-color: #000
}
.modal-backdrop.fade {
	filter: alpha(opacity=0);
	opacity: 0
}
.modal-backdrop.in {
	filter: alpha(opacity=50);
	opacity: .5
}
.modal-header {
	padding: 30px;
	border-bottom: 1px solid #e5e5e5;
	color: #fff;
	background: #6c62b3;
	border-radius: 0;
	/* text-align: center; */
	display: block;
}
.modal-header .close {
	margin-top: -2px
}
.rebate-modal-title {
	margin: 0;
	line-height: 1.42857143;
	text-align: center;
	font-size: 1em; 
	text-shadow: none;
}
.rebate-modal-body {
	position: relative;
	padding: 15px 25px;
	color: #575757;
	/* text-align: center; */
}
.modal-footer {
	padding: 15px;
	text-align: right;
	border-top: 1px solid #e5e5e5
}
.modal-footer .btn+.btn {
	margin-bottom: 0;
	margin-left: 5px
}
.modal-footer .btn-group .btn+.btn {
	margin-left: -1px
}
.modal-footer .btn-block+.btn-block {
	margin-left: 0
}
.modal-scrollbar-measure {
	position: absolute;
	top: -9999px;
	width: 50px;
	height: 50px;
	overflow: scroll
}
.rebate-modal-tnc{
	font-size: 0.85em;
}

.btn-modal-purple {
	background: #6c62b3;
	color: #fff;
	font-size:1em;
	padding:10px;
	border-radius: 0;
}
	.btn-modal-purple:hover {
		background: #fff;
		color:#6c62b3;
		border: 1px solid #6c62b3;
	}
.btn-modal-linkcode {
	background: #6c62b3;
	color: #fff;
	font-size:1em;
	padding:10px;
	border-radius: 0;
}
	.btn-modal-linkcode:hover {
		background: #fff;
		color:#6c62b3;
		
	}
	.btn-modal-linkcode:active {
		background: #fff;
		color:#6c62b3;
		text-decoration: underline;
	}
.btn-modal-white {
	background: #ffffff;
	color: #6c62b3;
	border: 1px solid #6c62b3;
	font-size:1em;
	padding:10px;
	border-radius: 0;
}
	.btn-modal-white:hover {
		background: #6c62b3;
		color: #fff;
	}
.mobile-verify {
	color: #9fc5b0;
	border: 1px solid #9fc5b0;
	border-radius: 20px;
	padding: 5px 15px;
}
/*----- The rebate-check -----*/
.rebate-check {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
	font-size: 0.85em;
}

/* Hide the browser's default checkbox */
.rebate-check {
  display: block;
  position: relative;
  padding-left: 47px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-size: 0.85em;
}

/* Hide the browser's default checkbox */
.rebate-check input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 25px;
  height: 15px;
  width: 15px;
  background-color: #eee;
  border: solid 1px #ababab;
}

/* On mouse-over, add a grey background color */
.rebate-check:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.rebate-check input:checked ~ .checkmark {
  background-color: #ccccc;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.rebate-check input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.rebate-check .checkmark:after {
  left: 4px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #8d64aa;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.modal-btn {
	font-size: 0.75em;
	padding: 10px 20px;
	margin:5px;
}


.rebate-sport-display{
	position: relative;
    display: inline-block;
    border: 1px solid #ced4da;
    background: #e9ecef;
    line-height: 30px;
    margin-bottom: 0;
}
	label[for="sport-amount"] { position: absolute;left: 4px;}
	label[for="sport-percent"] {position: absolute; right: 4px;}	

/*---- hide div ----*/
#myDIV {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: lightblue;
  margin-top: 20px;
}


/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 20px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #8d64aa;
}

input:focus + .slider {
  box-shadow: 0 0 1px #8d64aa;
}

input:checked + .slider:before {
  -webkit-transform: translateX(40px);
  -ms-transform: translateX(40px);
  transform: translateX(40px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* rebate page */
		.sr-tnc {
			text-align: center;
		}
		.sr-tnc span {
			/* padding: 10px 30px; */
			/* background: #453c8b; */
			color: #6c62b3;
			/* border-radius: 5px; */
			font-size: 1.20em;
			font-weight: 600;
		}
        .p-bar { 
            background-color: rgb(192, 192, 192); 
            width: 90%; 
            border-radius: 15px; 
			
        } 
  
        .skill { 
            color: white; 
            padding: 1%; 
            text-align: right; 
            font-size: 15px; 
            border-radius: 15px; 
        } 
  
        .pp-soccer { 
			text-align: center;
            background: linear-gradient(90deg, rgba(0,174,255,1) 0%, rgba(16,215,160,1) 100%);
			text-shadow: 1px 1px 2px rgba(66, 68, 90, 0.5);
        } 
  
        .pp-basketball { 
			text-align: center;
            background: linear-gradient(90deg, rgba(0,174,255,1) 0%, rgba(16,215,160,1) 100%);
			text-shadow: 1px 1px 2px rgba(66, 68, 90, 0.5);
        } 
			.meter { 
				position: relative;
				background: #e9ecef;
				overflow: hidden;
			}

			.meter span {
				display: block;
				height: 100%;
			}
			.meter .no-bets{ 
				background: #e9ecef;
				color: #8a8a8a;
				text-shadow: none;
				width: 80px;
				line-height: 30px;
				
			}

			.progress {
				background-color: #e4c465;
				animation: progressBar 3s ease-in-out;
				animation-fill-mode:both; 
			}

			@keyframes progressBar {
			  0% { width: 0; }
			  10% { width: 10%; }
			  20% { width: 20%; }
			  30% { width: 30%; }
			  40% { width: 40%; }
			  50% { width: 50%; }
			  60% { width: 60%; }
			  70% { width: 70%; }
			  80% { width: 80%; }
			  90% { width: 90%; }
			  100% { width: 100%; }
			}
		.btn-tnc {
			background: #36a85e;
			color: #fff;
			font-size:1em;
			padding:10px; 
			border-radius: 0;
		}
			.btn-tnc:hover {
				background: #1d7103;
		
		}
		.p-figure span{
			display: block;
			color: #36a85e;
			
		}
		.p-figure {
			color: #ff0022;
			text-align: center;
			font-size:1em;
		}
		hr.solid {
		  border-top: 3px solid #bbb;
		}

.fb-mth {
	color: #ff0022;
	font-size: 1.2em;
	font-weight: bold;
}
.fb-totalfb::placeholder {
	color: #ff0022;
	font-weight: bold;
}
.del-trash {
    display: flex;
    font-size: 20px;
    justify-content: center;
    align-items: center;
    background: var(--main-color);
    color: var(--light);
}
/*---- modal tab ------*/

/* Style the tab */
.sr-tab {
  overflow: hidden;
  /*border: 1px solid #6c62b3;*/
  background-color: #fffffd;
  font-size: 15px;
  text-align: center;
  padding:20px 0 ;
}

/* Style the buttons that are used to open the tab content */
.sr-tab button {
  background-color: inherit;
  /* float: left; */
  outline: none;
  cursor: pointer;
  padding: 14px 25px;
  transition: 0.3s;
  color: #6c62b3;
  border:  1px solid #6c62b3;
}

/* Change background color of buttons on hover */
.sr-tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.sr-tab button.active {
  background-color: #ccc;
  color: #6c62b3;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

/*---- bankincard ------*/
.bankin-card-display {
  display: flex;
  flex-flow: row wrap;
  flex: 1;
}
.bankin-card {
  flex-flow: row wrap;
	background: linear-gradient(to bottom right, #9a80ff 0%, #b682fa 100%);
  background-clip: content-box;
  min-height: 130px;
  margin-bottom: 15px;
}
.bankin-card-grey {
  flex-flow: row wrap;
  background: #9c9c9c;
  background-clip: content-box;
  min-height: 130px;
  margin-bottom: 15px;
}
	.bankin-card-grey a {
	  flex: auto;
	}
.bankin-card > div {
   /*flex: 1;*/ 
}
.bankin-card > div {
   /*flex: 1;*/ 
}

.bankin-card-name{
  color:#fff;
  text-align: left;
	
}
	.bankin-card-name span{
	  font-size: 1.25em;
		display: block;
		font-weight: 900;
	}
.bankin-card-num{
  color:#fff;
  text-align: left;
	padding: 20px 0 0 0;
}
	.bankin-card-num span{
	  font-size: 1em;
		padding: 0 10px ;
	}
.bankin-card input[type="radio"] {
  display: none;
    cursor: pointer;
    color: hsla(150, 5%, 75%, 1);
    border-color: hsla(150, 5%, 75%, 1);
    box-shadow: none;

  }

.bankin-card label {
  display: block;
  /*background: linear-gradient(to bottom right, #9a80ff 0%, #b682fa 100%);
  border-radius: 5px;
	box-shadow: 0px 3px 10px -2px hsla(150, 5%, 65%, 0.5);*/
  padding: 1rem;
  margin-bottom: 1em;
  text-align: center;
  
  position: relative;
}
.bankin-card input[type="radio"]:checked + label {
  background: linear-gradient(to bottom right, #9a80ff 0%, #b682fa 100%);
  color: hsla(215, 0%, 100%, 1);
	}
  .bankin-card input[type="radio"]:checked + label::after {
	  background: url("../img/checked.svg");
    color: hsla(215, 5%, 25%, 1);
    content: "";
    font-size: 18px;
    position: absolute;
    top: -15px;
    left: 0;
    transform: translateX(-50%);
    height: 30px;
    width: 30px;
  }
input[type="radio"]#blank + label {
  /* background: #9c9c9c; */
  border-radius: 5px;
  padding: 1rem;
  text-align: center;
  /* box-shadow: 0px 3px 10px -2px hsla(150, 5%, 65%, 0.5); */
  position: relative;
  display: flex;
  flex: wrap;
}
.bankin-card-blank {
  color:#ebebeb;
  text-align: center;
  padding: 20px;
  /*line-height: 35px;*/
}
	.bankin-card-blank span {
	  font-size: 1.25em;
		font-weight: 500;
		display: block;
	}
	.bankin-card-blank:hover {
	  color:#fff;
	}
.bankin-card-edit {
  background: var(--main-color);
	color: #fff;
	border: 0;
	font-size: 0.85em;
	padding: 5px 15px;
}
	.bankin-card-edit:hover {
	  background: #4f459c;
	}
.bankin-card-data {
  background: #eee; 
	padding: 10px;
	margin-left: 30px;
}

@media only screen and (max-width: 700px) {
  .bankin-card {
    flex-direction: column;
  }
}
.sel-multi-tab {
	border: 0;
	overflow-y: hidden;
	padding: 0;
}
	.sel-multi-tab option{
		border: solid 1px #ccc;
		float:left;
		padding: 10px 25px;
		margin-right:10px;
	}
	select[multiple] {
		height:40px;
		max-height: auto; 
   }



	   .blink {
		animation: blinker 1.5s linear infinite;
	}
	@keyframes blinker {
		50% {
			opacity: 0;
		}
	}


	   .blink {
		animation: blinker 1.5s linear infinite;
	}
	@keyframes blinker {
		50% {
			opacity: 0;
		}
	}

	   .blink {
		animation: blinker 1.5s linear infinite;
	}
	@keyframes blinker {
		50% {
			opacity: 0;
		}
	}
        

.sp-bonus {
	
}
	.sp-bonus a{
		float: right;
		background: #fa2626;
		padding: 5px 10px;
		border-radius: 5px;
		color: #fff
	}
	 a.blink:hover{
		animation: none;
	}

/*-- bonus --*/

.btn-bhclaim,.btn-bhistory {
	background: var(--main-color);
	color: #fff;
	padding: 0 10px;
	border-radius: 10px;
}
	.btn-bhclaim:hover {
		background: #4f459c;
		color: #fff;
		
	}
.btn-bhprogress {
	background: #157922;
	color: #fff;
	padding: 0 10px;
	border-radius: 10px;
}
.btn-bhdisabled {
	background: #818286;
	color: #fff;
	padding: 0 10px;
	border-radius: 10px;
}
/* drop down search
// Forms */

.form-group {
  position: relative;
}
.form-arrow {
  position: absolute;
  top: 0.2rem;
  right: 0.5rem;
  z-index: 10;
  font-size: 1.15rem;
  line-height: inherit;
  color: #939598;
}
.form .dropdown {
  position: relative;
	width: 100%;
}
.form .dropdown-select {
  position: relative;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.5;
  cursor: pointer;
  user-select: none;
  width: 100%;
  height: auto;
  padding: 0.375rem 0.75rem;
  border: 1px solid #ced4da;
  outline: none;
  /* border-radius: 0.25rem; */
  color: #495057;
  background-clip: padding-box;
  background-color: var(--color-white);
  /* box-shadow: var(--shadow-medium); */
  transition: all 0.3s ease-in-out;
}
.form .dropdown-menu {
  position: absolute;
  display: none;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 10;
  border-radius: 0.25rem;
  background-color: var(--color-white);
  box-shadow: var(--shadow-large);
  transition: all 0.3s ease-in-out;
  margin: 0;
  padding: 0;
}
.form .dropdown-menu-inner {
  max-height: 16rem;
  overflow-y: scroll;
  overflow-x: hidden;
}
.form .dropdown-menu-inner::-webkit-scrollbar {
  width: 5px;
  height: auto;
}
.form .dropdown-menu-inner::-webkit-scrollbar-thumb {
  border-radius: 0.25rem;
  background-color: var(--color-greys);
  box-shadow: var(--shadow-small);
}
.form .dropdown-menu-item {
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: normal;
  line-height: inherit;
  cursor: pointer;
  user-select: none;
  padding: 0.65rem 1.25rem;
  background-color: var(--color-white);
  transition: all 0.2s ease-in-out;
}
.form .dropdown-menu-item:hover {
  color: var(--color-black);
  background-color: var(--color-greys);
}
.form .dropdown-menu-item.is-select, .form .dropdown-menu-item.is-select:hover {
  color: var(--color-white);
  background-color: var(--color-blues);
}
.form .dropdown-menu-search {
  display: block;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  width: 100%;
  height: auto;
  padding: 0.65rem 1.25rem;
  border: none;
  outline: none;
  color: var(--color-black);
  background-clip: padding-box;
  background-color: var(--color-light);
}