html{  }
body{
	position: relative;
	color: #fff;
	max-width: 450px;
	margin: 0 auto;
	background: #000000;
}
body::before{
	/*content: ' ';
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: url('../img/bg.png') center center no-repeat;
	background-size: cover;
	background-attachment: fixed;*/
	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;
    /* background-attachment: fixed; */
    left: auto;
}
body.show{
	height: 100vh;
	overflow: hidden;
}
/*--- BOOTSTRAP ---*/
.sidebar-toggler{
	background: transparent;
	border: none;
	cursor: pointer;
	line-height: 34px;
    font-size: 1.3rem;
    margin-right: 10px;
    color: white;
}
.sidebar-toggler:focus{
	outline: transparent;
}
.sidebar-collapse{
    position: absolute;
    background: rgba(0,0,0,0.7);
    width: 50%;
    height: 100vh;
    z-index: 99999;
    top: 0;
    left: -50%;
    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) */ 
}

.nav-item button{
	width: 100%;
    background: transparent;
    border: none;
    text-align: left;
    margin: 0;
    padding: 0.65rem 1.35rem;
}
.navbar-dark .sidebar-nav .nav-link{ 
	padding: 0.4rem 1.5rem;
    font-size: 0.9rem;
}
a.nav-link{	
	color: var(--white); 
	position: relative; 
	padding-left: 3rem !important;
}
a.nav-link.active{	background: #7030a0; }
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: 1.5rem;
	font-weight: 200;
	border: solid 1px var(--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; }
.form-control{
	border-color: var(--primary);
	background-color: transparent;
	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;
}

/*--- 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;
	}
}

/*------------------*/
.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;
}

/*--- 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;
}
.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);
}

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