@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;500&display=swap');

:root {
    --number-font: 'Roboto Condensed', Helvetica Neue, Arial, sans-serif;
    --gradient1: linear-gradient(to top right, #fdd138 8%, #fffe92 100%);
}
.number-font{
	font-family: var(--number-font);
}
.font-weight-600{	font-weight: 600; }
.font-size-1-5rem{	font-size: 1.5rem; }
.font-size-2rem{	font-size: 2rem; }
.text-gradient1{
	background: #fdd138;
    background: var(--gradient1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

html{  }
body{
	position: relative;
	color: #fff;
	max-width: 450px;
	margin: 0 auto;
	background: #000000;
}
/*body::before{
	content: ' ';
    position: fixed;
    z-index: -1;
    width: 450px;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../img/bg.png) top center no-repeat;
    background-size: cover;
    left: auto;
}*/
body.show{
	height: 100vh;
	overflow: hidden;
}

.bg{
    background: url(../img/bg.png) center bottom no-repeat;
    background-size: cover;
    width: 100%;
}
.logo{
    display: flex;
    justify-content: center;
    align-items: center;
}
.logo span{
    font-size: 50px;
    font-weight: 400;
    letter-spacing: 0.3rem;
    background: #B1962D;
    background: linear-gradient(to top right, #B1962D 8%, #F9F668 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.input-group>.input-group-append>.btn, .input-group>.input-group-append>.input-group-text, .input-group>.input-group-prepend:first-child>.btn:not(:first-child), .input-group>.input-group-prepend:first-child>.input-group-text:not(:first-child), .input-group>.input-group-prepend:not(:first-child)>.btn, .input-group>.input-group-prepend:not(:first-child)>.input-group-text{
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}

/*--- BOOTSTRAP ---*/
.sidebar-toggler{
	background: transparent;
	border: none;
	cursor: pointer;
	line-height: 34px;
    font-size: 1.3rem;
    padding: 1px 6px;
    margin-right: 10px;
    color: white;
}
.sidebar-toggler:focus{
	outline: transparent;
}
.sidebar-collapse{
    position: absolute;
    background: rgba(0,0,0,0.85);
    border-right: solid 1px #ffe800;
    width: 60%;
    height: 100vh;
    z-index: 99999;
    top: 0;
    left: -60%;
    transition: all 250ms ease;
    opacity: 0;
}
.sidebar-collapse.show{	left:0; opacity: 1;}
.sidebar-nav{
	margin:0;
	padding:0;
	list-style: none;
}
nav>div:first-child a, nav>div:first-child select{
    font-size: 0.9rem;
    height: 34px;
    line-height: 34px;
    padding-top: 0;
    padding-bottom: 0;
}
.nav-item{ 
	position: relative; 
	color: #b34eff; /*ori = 7030a0 (hard to view) */ 
	margin-bottom: 0.4rem;
}

.nav-item button:not(.sidebar-toggler){
    background: transparent;
    border: none;
    text-align: left;
    margin: 0;
    padding: 0.65rem 1.35rem;
}
.nav-item button:not(.sidebar-toggler){
	width: 100%;
}
.navbar-dark .sidebar-nav .nav-link{ 
	/*padding: 0.4rem 1.5rem;*/
    font-size: 0.8rem;
}
.navbar-dark .navbar-brand{
	background: rgb(66,65,57);
	background: linear-gradient(164deg, rgba(66,65,57,1) 0%, rgba(243,221,123,1) 73%, rgba(44,37,9,1) 100%);
	border: unset;
	color: #000000;
	font-size: 1.1rem;
}
.nav-link-subtitle{
	/*background: rgb(254,234,52);
	background: linear-gradient(90deg, rgba(254,234,52,1) 0%, rgba(253,190,41,1) 100%);*/
	background: #fdbe29;
	background: linear-gradient(90deg, #ffda8a 0%, #fdbe29 100%);
	color: #000000;
	text-align: center;
	border-top-left-radius: 8px;
	border-bottom-right-radius: 8px;
}
a.nav-link{	
	color: var(--white); 
	position: relative; 
	/*padding-left: 3rem !important;*/
	border: solid 1px #ffe800;
	border-top-left-radius: 8px;
	border-bottom-right-radius: 8px;

	/*background-image: radial-gradient(circle at 100% 100%, transparent 7px, #fedc59 7px, #fedc59 8px, transparent 8px), linear-gradient(to right, #fedc59, #fbd664), radial-gradient(circle at 0% 100%, transparent 7px, #fbd664 7px, #fbd664 8px, transparent 8px), linear-gradient(to bottom, #fbd664, #f7f5eb), radial-gradient(circle at 0% 0%, transparent 7px, #f7f5eb 7px, #f7f5eb 8px, transparent 8px), linear-gradient(to left, #f7f5eb, #fff98c), radial-gradient(circle at 100% 0%, transparent 7px, #fff98c 7px, #fff98c 8px, transparent 8px), linear-gradient(to top, #fff98c, #fedc59);
	background-size: 8px 8px, calc(100% - 16px) 1px, 8px 8px, 1px calc(100% - 16px);
	background-position: top left,top center,top right,center right, bottom right,bottom center,bottom left,center left;
	background-repeat: no-repeat;*/
}
a.nav-link.active::before, a.nav-link:focus::before{
	content: ' ';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	border-top-left-radius: 8px;
	border-bottom-right-radius: 8px;
	border: solid 4px #ffe800;
	border-style: inset;
	box-shadow: unset;
}
/*a.nav-link::before{
	content: ' ';
	position: absolute;
	top:50%;
	left:1.5rem;;
	background: var(--white);
	width: 6px;
	height: 6px;
	border-radius: 50%;
}*/
.badge{	opacity: 0.8; }
.modal-dialog{ margin-top: 40vh; }
.modal-content{ 
	background-color: rgba(0,0,0,0.5);
	font-size: 1rem;
	font-weight: 200;
	border: solid 2px #ffc000;
	border-radius: 0;
	border-top-left-radius: 30px;
    border-bottom-right-radius: 30px;
}
.modal-content .col-form-label, .modal-content .form-control{ font-size: 1rem; }
.modal-content .form-control{ background: transparent; }
.modal-content .form-control::placeholder{ color: white; }
.modal-footer{
	padding-top: 0;
	border: none;
	display: grid;
	column-gap: 10px;
	grid-template-columns: 1fr 1fr;
}
/*.modal-footer .btn{	font-size: 1.3rem; }*/
.flex-modal-footer{
	display: flex;
	justify-content: center;
}
.col-form-label{ font-size: 1.2rem; }
.blue-bordered{
	border-radius:0;
	border: solid 1px #4874cb;
	background: rgba(0,0,0,0.4);
	padding-top: calc(0.375rem + 1px);
    padding-bottom: calc(0.375rem + 1px);
}
.radius-8px{
	border-radius: 8px;
}
.gold-bordered, .red-bordered{
	border: solid 2px #ffc000; /*ffe800*/
	border-radius: 0;
	border-top-left-radius: 30px;
    border-bottom-right-radius: 30px;
}
.gold-bordered.radius-8px{
	border-top-left-radius: 8px;
	border-bottom-right-radius: 8px;
}
.gold-line{	border-color: #ffc000; }
.red-bordered{ border-color: #ff0000; }
.white-bg-20{ background: rgba(255,255,255,0.2); }
.black-bg-60{ background: rgba(0,0,0,0.6); }
.border-width-4{ border-width: 4px; }
.radius-5rem{ border-radius: 5rem; }
.nft-set-item{
	background: url('../img/nft.png') center center no-repeat;
	background-size: cover;
}
.nft-set-item-img{
	width: 100%;
	aspect-ratio: 1;
}
.btn-nft{
	padding-top: 0.15rem;
	padding-bottom: 0.15rem;
	border-style: inset;
	border-radius: 0;
	border-top-left-radius: 6px;
	border-bottom-right-radius: 6px;
	font-size: 0.7rem;
	color: white;
	background: rgb(109,214,222);
	background: linear-gradient(180deg, rgba(109,214,222,1) 0%, rgba(230,78,247,1) 100%);
	border: solid 2px #4874cb;
}

.form-control.bordered{
	border-color: var(--primary);
	background-color: transparent;
	border-color: #ffe800;
	border-radius: 0;
	border-top-left-radius: 8px;
	border-bottom-right-radius: 8px;
	color: var(--white);
	font-size: 1.2rem;
}
.form-control:focus{
	background-color:rgba(255, 255, 255, 0.1);
	color: var(--white);
}
.btn-outline-primary{
	color: var(--white);
}
.btn-black{
	background-color: #000000;
	color: #ffffff;
}
.font-weight-600{ font-weight: 600; }
.w-80-ml2-22{ width: calc(80% - 0.5rem - 22px); }


/*--- Carousel ---*/
.marquee {
	overflow: hidden; 
	border-top: solid 3px #c047c0;
	border-bottom: solid 3px #c047c0;
	box-shadow: 0 0 15px 15px rgba(192,71,192,0.5);
}
.marquee-content {
	margin-top: 3px;
	margin-bottom: 3px;
	display: flex;
	animation: scrolling 20s linear infinite;
}
.marquee-item {
	flex: 0 0 8vw;
}

.marquee-item img {
	display: block;
	width: 100%;
	/*   padding: 0 20px; */
}

@keyframes scrolling {
	0% { transform: translateX(0); }
	100% { 
	  transform: translateX(-101vw); /*144vw*/}
}

@media only screen and (max-width: 768px) {
	.marquee-content{
		animation: scrolling 5s linear infinite;
	}
	.marquee-item{
		flex: 0 0 25vw;
	}
}

/*--- General ---*/
.mt-3rem{ margin-top:3rem; }
.btcg-wrapper{
	background: url('../img/logo-black.png') center 2rem no-repeat;
	background-size: 80% auto;
	min-height: 350px;
}
.btcg-subtitle{
	background: url('../img/subtitle.png') left center no-repeat;
	background-size: cover;
	width: 100%;
	font-size: 1.5rem;
    font-weight: 200;
}
.btcg-subtitle a{
	color: white;
	text-decoration: none;
}

/*--- Dashboard ---*/
.dashboard {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-top-left-radius: 3rem;
	border-bottom-right-radius: 3rem;
	border: solid 1px #4874cb;
}
.dashboard-staking{	background-image: url('../img/staking.png'); }
.dashboard-nft{	background-image: url('../img/nft.png'); }
.dashboard-gamezone{ background-image: url('../img/gamezone.png'); }
.dashboard-btcg-transaction{ background-image: url('../img/btcg-transaction.png'); }
.dashboard-comingsoon{ background-color: #8b8b8b !important; }
.dashboard-subtitle{
	display: flex;
	justify-content: center;
	align-items: center;
}
.dashboard-btn{ width: 80% !important; }

/*--- Page ---*/
.page-title{
	padding-top: 2rem;
	padding-bottom: 2rem;
	background: url('../img/page-title-bg.png') center center no-repeat;
	display: flex;
	justify-content: center;
	align-items: center;
}
.nav-tabs-row{ border-bottom: unset !important; }
.nav-tabs-row .nav-item .nav-link{
	background: transparent;
	color: white;
	border-radius: 0.25rem;
	border: solid 1px #4874cb;
	padding-top: 0.35rem;
	padding-bottom: 0.35rem;
	font-size: 1.2rem;
}
.nav-tabs-row .nav-item .nav-link.active{
	background: var(--success);
	border-color: #C1A013;
}

.th-bordered, .td-bordered{
	border: solid 1px #4874cb;
	border-top-left-radius: 8px;
	border-bottom-right-radius: 8px;
	text-align: center;
	line-height: 30px;
}
.th-bordered{	font-size: 1.2rem; }
.row-highlight:hover .td-bordered{	background: var(--success); }

.grid-container{
    display: grid;
    grid-template-columns: calc(calc(100% - 10px)/3) calc(calc(100% - 10px)/3) calc(calc(100% - 10px)/3);
    grid-gap: 5px;
}
.grid-item{  }
.wrap-txt div{
	word-wrap:break-word; /*old browsers*/
 	overflow-wrap:break-word;
}
/*------------------*/
.current_time{
	font-weight: bold;
    /*letter-spacing: 1rem;*/
    font-size: 2rem;
    /*display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;*/
    margin: 0 2rem;
    display: flex;
}
.ct_data, .ct_icon{
	color: transparent;
    font-size: 2.4rem;
    font-weight: bold;
    -webkit-text-stroke: 1px var(--white);
    text-align: center;
}
.ct_data{ width: 60px; }
.ct_icon{ width: 20px; }
.outline-txt{
	color: transparent; 
	font-size: 2.2rem; 
	font-weight: bold;  
	-webkit-text-stroke: 1px var(--white);
}
.item-list{
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.item-block{
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
.item-block-inner{
	align-items: center;
}
.item-block .item-block-inner:first-child{
    justify-content: right;
    display: flex;
}
.item-block .item-block-inner:last-child{
	min-width: 150px;
}
.item-block-inner>img{	max-width: 80px; } 
.section-title{
	margin: 20px 0;
	font-size: 1.5rem;
	font-weight:200;
}
.section-title span{
	padding: 5px 10px;
	border: solid 1px var(--primary);
	border-radius: 0.25rem;
	display: inline;
}
input.form-control.gold-bordered, select.form-control.gold-bordered{
	border-top-left-radius: 8px;
	border-bottom-right-radius: 8px;
	text-align: center;
	line-height: 30px;
	font-size: 1.2rem;
	background: rgba(0,0,0,0.7) !important;
}
.btn-outline-warning.gold-bordered{
	color: white !important;
}
.btn-outline-warning.gold-bordered:hover, .btn-outline-warning.gold-bordered:focus, .btn-outline-warning.gold-bordered.active{
	color: white !important;
	background-color: #17bb13 !important;
}
.w-80{ width: 80%; }
.modal-sm-inline{ width: fit-content; }
.modal-sm-inline .modal-content{ border-radius: 8px; }
.share-bg{
	background: url('../img/share_bg.png') center center no-repeat;
	background-size: 100% 100%;
}


/*--- TIME ---*/
/*--- (2) Countdown ---*/
.time-countdown-wrapper{
	display: grid;
	column-gap: 10px;
	grid-template-columns: auto auto auto;
}
.time-countdown-item{
	display: flex; 
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	text-align: center;
}
.countdown-circle{
	width: 25px; height: 25px;
	border-radius: 50%;
	border: solid 1px var(--primary);
}
.countdown-green{ background-color: var(--success); }
.countdown-yellow{ background-color: var(--warning); }
.countdown-red{ background-color: var(--danger); }

/*--- (3) Product List ---*/
.product-list{
	display: grid;
	column-gap: 10px;
	/*grid-template-columns: auto auto auto;*/
	grid-template-columns: repeat(2, 1fr);
}
.product-img{ 
	border-radius:0.25rem; 
	border: solid 2px #bce2f5;
}
.product-title{
	font-size: 1.8rem;
	font-weight: bold;
	text-transform: uppercase;
}
.product-desc{
	font-size: 1.6rem;
	text-transform: uppercase;
}
.product-btn-list{
	display: grid;
	column-gap: 10px;
	grid-template-columns: 1fr 1fr;
}
.product-btn{
	font-size: 1.5rem;
}

/*--- (4) three-btn---*/
.three-btn-list{
	display: grid;
	column-gap: 10px;
	grid-template-columns: 1fr 1fr 1fr;
}
.three-btn-list .btn{
	margin-top: 10px;
	font-size: 1.3rem;
}
.three-btn-list .btn-outline-primary:hover,
.three-btn-list .btn-outline-primary:not(:disabled):not(.disabled).active, 
.three-btn-list .btn-outline-primary:not(:disabled):not(.disabled):active{
	background-color: #28a745;
    border-color: #28a745;
}

/*--- (5) Record ---*/
.record-list{
	display: flex;
    flex-direction: column;
    gap: 20px;
}
.record-item{
	padding: 10px;
	display: grid;
    column-gap: 10px;
    grid-template-columns: 100px auto 80px;
    border: solid 2px #bce2f5;
    border-radius: 0.25rem;
}
.record-img{
	display: flex;
	align-items: center;
}
.record-desc{
	overflow: auto;
}
.record-desc .outline-txt{
	font-size: 1.4rem;
}
.record-btn .btn{
	width: 100%;
	height: 100%;
	font-size: 1.3rem;
}

/*--- (7) Collection ---*/
.collection-img{ max-width: 250px; }

/*--- (8) Slot ---*/
.slot{	position: relative; margin-top: 5rem !important;}
.slot-badge{
	background: rgba(255,192,0,0.75);
	width: 100px;
	height: 100px;
	border-radius: 50%;
	color: var(--white);
	font-size: 1.3rem;
	position: absolute;
	z-index: 100;
	top:-25px;
	right:25px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.slot-img{
	position: relative;
	z-index: 99;
	margin:0 auto;
	padding: 10px;
	background: url('../img/slot.png') center center no-repeat;
	background-size: contain;
	width: calc(250px - 20px); height: calc(418px - 20px);
	display: flex;
	align-items: center;
}
.slot-img::before{
	content: '转入NFT';
	position: absolute; 
	z-index: 0;
	top: 50%; left: 25%;
	background: rgba(0,0,0,0.7);
	border-radius: 0.25rem;
	font-size: 1.3rem;
	text-align: center;
	width: 50%;
}
.slot-img img{
	position: relative;
	z-index: 999;
}
.slot-title{
	padding: 1rem 0;
	text-align: center;
	font-size: 1.5rem;
}
.slot-item-wrapper{
	margin-top: 10px;
	display: grid;
	grid-gap: 10px;
	grid-template-columns: 1fr 1fr;
}
.slot-item-txt{	text-align: left;}
.slot-btn-list{
	display: grid;
	grid-gap: 10px;
	grid-template-columns: 1fr 1fr;
}
.slot-cc{
	text-align: center;
	font-weight: bold;
	font-size: 1.8rem;
}
.slot-btn-list .btn{ font-size: 1.3rem; }

/*--- (9) Currency ---*/
.currency-item-header{
	margin-top: 1rem;
	display: flex;
	justify-content: space-between;
	font-size: 1.5rem;
}
.currency-item-btngroup{
	display: grid; 
	column-gap: 10px; 
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

.currency-main-btngroup{
	display: grid; 
	column-gap: 10px; 
	row-gap: 10px;
	grid-template-columns: 1fr 1fr 1fr;
}

/*--- (10) Payment Record  ---*/
.payment-record-item{
	font-size: 1.2rem;
	background: rgba(0,0,0,0.6);
	border-radius: 10px;
	padding: 15px;
	margin-bottom: 10px;
}
.payment-record-item.outline{ border: solid 1px var(--primary); }

/*--- (11) Team ---*/
.team-summary{
	display: grid;
	column-gap: 10px;
	grid-template-columns: 1fr 1fr;
	font-size: 1.5rem;
	text-align: center;
}
.team-amount-item{
	margin-bottom: 10px;
	display: grid;
	column-gap: 10px;
	grid-template-columns: 3fr 3fr 1fr;
	font-size: 1.5rem;
}
.team-size-item{
	margin-bottom: 10px;
	display: grid;
	column-gap: 10px;
	grid-template-columns: 1fr 1fr;
	font-size: 1.5rem;
}

/*--- (12) Fund ---*/
.form-amt{
	position: relative; z-index:10;
	padding-right: calc(.75rem + .2rem);
}
.form-amt::before{
    content: 'CC';
    position: absolute; z-index: 9;
    right: 0;
    top: 0;
    color: var(--white);
    width: 100%;
    height: 100%;
    background: yellow;
}


/*--------------*/
/*--- FOOTER ---*/
/*--------------*/
.footer-links{
	margin: 20px 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.footer-links>.btn{
	width: 50%;
	color: var(--white);
}
.footer-logos{
	background: #011128;
}

@media (min-width: 576px){
	.modal-dialog:not(.modal-sm) {
	    max-width: 400px;
	    margin: 1.75rem auto;
	}
}