@import url('https://fonts.googleapis.com/css2?family=Play&family=Roboto:wght@300;400;500;700&display=swap');
::root{
	--default-font: 'Roboto', '微軟正黑體', Helvetica Neue, Arial, sans-serif;
	--primary: #2972DE;
	--primarydark: #0A5AD3;
	--success: #00C566;
	--danger: #ED2D81;
}
body{
	margin:0 auto;
	background: url('../img/header_bg.svg') top left no-repeat;
	font-family: var(--default-font);
	font-size: 13px;
	color: #333333;
	background: #F3F2F3;
}
main{
	position: relative;
    margin: 0 auto;
    max-width: 450px !important;
    overflow: hidden;
    padding: 0 0.5rem;
}
.login-bg{
	position: absolute;
	top:150px; right: 0;
	max-width: 600px;
}
.fakeSelect{ z-index: 999; }
.opacity-50{ opacity:50%; }
.opacity-75{ opacity:75%; }
.text-numeric{	font-family: 'Play', sans-serif; }
.text-small{ font-size: 10px; }
.text-medium{ font-size: 14px; }
.text-medium-large{ font-size:16px; }
.text-large{ font-size: large; }
.text-xlarge{ font-size: x-large; }
.text-xxlarge{ font-size: xx-large; }
.text-xxxlarge{ font-size: xxx-large; }
.text-success{ color: var(--success) !important; }
.text-success2{ color: #4DFFBF !important; }
.text-danger{ color: #d0186a !important; }
.bg-danger{ background-color: #ED2D81 !important; }
.bg-light2{ background-color: #eeeeee; }
.border-bottom-white{
	border-bottom: 1px solid transparent;
    border-image: linear-gradient(0.1turn, rgba(225, 225, 225, 0.00) 0%, #ffffff 50%, rgba(225, 225, 225, 0.00) 100%);
    border-image-slice: 1;
}
.btn-nav{
	padding: unset;
	width: 43px; height: 43px;
	background: linear-gradient(0deg, rgba(20, 120, 209, 0.20) 5.81%, rgba(20, 120, 209, 0.00) 94.19%);
	border:none;
	align-items: center;
	justify-content: center;
}
.btn-blue{
	background: rgba(0, 102, 255, 0.15);
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 70px;
	min-width: 70px;
}
.rounded-more{ border-radius: 1.25rem; }

.navbar-light .navbar-nav .nav-link{ font-weight: bold; }
.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link{
	color: var(--primary);
	background: #E1E1F2;
	border-radius: 0.5rem;
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover{
	color: var(--primary);
}
.nav-pills-sm{
	font-size: 0.7rem;
	background:#eee;
}
.nav-pills-sm .nav-link.active, .nav-pills-sm .show>.nav-link{
	font-weight: bold;
	color: #000;
	background-color: transparent;
}
.card.card-design{	border: none;	border-radius: 1.5rem; }
.card.card-design.bg-white{	background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%) !important; }
.member-design{
	background: url('../img/user-bg.svg') top center no-repeat;
	background-size: 100% auto;
}
.member-design2{
	background: url('../img/user-bg2.svg') top center no-repeat;
	background-size: 100% auto;
}
.modal-header{
	border-top-left-radius: 1.25rem;
	border-top-right-radius: 1.25rem;
	background: rgba(0,105,217,0.1);
	color: #0b62be;
}
.modal-header.warning{
	background: rgba(255, 193, 7, 0.1);
	color: #dba400;
}
.modal-title{
	font-weight: bold;
	font-size: 16px;
}
.modal-content{ border-radius: 1.25rem; }
.modal-tab-link{ 
	cursor: pointer; 
	color: var(--dark); font-weight: bold; 
	text-decoration: none !important;
    padding-top: 0.25rem; padding-bottom: 0.25rem;
}
.modal-tab-link.active{ color: var(--primary); border-bottom: solid 2px var(--primary);	}
.modal-footer{
	background:#eeeeee;
	border-bottom-left-radius: 1.25rem;
	border-bottom-right-radius: 1.25rem;
}
.card-design .card-header{
	padding: 1.75rem 1.25rem 0 1.25rem;
	background: white;
	border-bottom: unset;
	background: none;
	display: flex;
	align-items: center;
}
.card-design .card-header h2{
	margin: 0;
	font-size: 18px;
	font-weight: 600;
} 

.card-design .card-header h2 .badge{ 
	font-size: 0.6em;
	color: rgba(255, 255, 255,0.8);
	background: linear-gradient(180deg, #390095 0%, #502FD4 100%);
}
.card-design .card-header a{ color: #434BCC; }
.card-design .card-body{ background: none; }
.card-design .card-body.border-top{ padding-top: 1.25rem; }
.card-design .card-footer{
	border-radius: 0 0 1.5rem 1.5rem;
	background-color: white;
}
.btn-primary {
    background-color: #2972DE;
    border-color: #2972DE;
}
.btn-danger{
    background-color: #ED2D81;
    border-color: #ED2D81;
}
.btn-danger:not(:disabled):not(.disabled).active, .btn-danger:not(:disabled):not(.disabled):active, .show>.btn-danger.dropdown-toggle,
.btn-danger.focus, .btn-danger:focus,
.btn-danger:hover{
	background-color: #cc256e;
	border-color: #cc256e;
}
.btn-primary.btn-design, .btn-warning.btn-design, .btn-danger.btn-design{
	position: relative;
	font-weight: 500;
	color: #fff;
	background-blend-mode: overlay, normal;
	filter: drop-shadow(0px 7px 10px rgba(0, 0, 0, 0.25));
	min-height: 50px; border-radius: 25px;
}
.btn-primary.btn-design{
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.50) 0%, rgba(255, 255, 255, 0.00) 100%), linear-gradient(270deg, #8A0CC5 0%, #0E7AD1 100%);
}
.btn-warning.btn-design{
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.50) 0%, rgba(255, 255, 255, 0.00) 100%), linear-gradient(270deg, #F1785D 0%, #F5B13D 100%);
}
.btn-danger.btn-design{
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.50) 0%, rgba(255, 255, 255, 0.00) 100%), linear-gradient(270deg, #B80AA6 0%, #FF32AD 100%);
}
.btn-design-text{ 
	position: absolute;
	text-align: center;
	width: calc(100% - 60px); 
	height: 100%;
	font-size: 14px;
}
.btn-danger-block, .btn-warning-block{
	padding: 0 30px;
	height: 80px;
	border-radius: 30px;
	border: none;
}
.btn-danger-block{
	color: white;
	background: linear-gradient(270deg, #EA3A7A 0%, #5F79E5 100%);
}
.btn-warning-block{
	color: #58260B;
	background: linear-gradient(270deg, #F1785D 0%, #F5B13D 100%);
}
.btn-light-primary{
	background: rgba(0,105,217,0.1);
    color: rgb(0,105,217) !important;
    font-weight: bold;
}
.btn-light-secondary{
	background: rgba(0, 0, 0, 0.1);
	color: #666666;
	font-weight: bold;
}
.btn-light-danger{
	background: rgba(237,45,129, 0.1);
	color: #ED2D81;
	font-weight: bold;
}
.btn-block-bg{
	position: absolute;
	right: -15px;
	top: 0;
}
.level{
	position: relative;
	/*background: url('../img/level-bg.svg') center center no-repeat;*/
	width: 119px; height: 71px;
	font-size: 30px; font-weight:bold; color:#CADFFF;
	text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.level img{
	filter: drop-shadow(0px 17px 13px rgba(0, 0, 0, 0.20));
}
.level-txt{
	position: absolute !important;
    top: calc((100% - 45px)/2) !important;
    right: calc((100% - 21.68px)/2) !important;
    height: 45px;
    width: 22px;
    line-height: 45px;position: absolute;
	top: 0;
	right: 0;
}
.level-desc{
	text-align: center;
	border-radius: 8px;
	font-size: 0.6rem;
	background: rgba(255, 255, 255, 0.5);
}
.level-path{
	background: url('../img/level-path.svg') center center no-repeat;
	width: 155px;
	height: 83px;
	position: relative;
}
.level-path-item{
	position: absolute;
}
.level-path-item:nth-child(1){ bottom: 8.5px; left: -8.5px; }
.level-path-item:nth-child(2){ bottom: 22px; left: 28px; }
.level-path-item:nth-child(3){ bottom: 40px; left: 51px; }
.level-path-item:nth-child(4){ bottom: 65px; left: 75px; }
.level-path-item:nth-child(5){ bottom: 82px; left: 105px; }
.level-path-item:nth-child(6){ bottom: 87px; left: 145px; }
.level-path-item span{
	position: absolute;
	top: -20px;
	font-weight: bold;
	color: rgba(0,0,0,0.1);
}
.level-path-item::after{
	content: ' ';
	position: absolute;
	top: 0;
	left: 0;
	background: #AABEDD;
	width:12px;
	height:12px;
	border-radius: 6px;
}
.level-path-item.active::after, .level-path-item:not(.active):hover::after{
	background: linear-gradient(0deg, #0071D8 0%, #41D1FF 100%);
	filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.level-path-item.active span, .level-path-item:not(.active):hover span{ color: #22A9D4; }

.level-info{
	position: absolute;
	width: 45px; height: 45px;
	border-radius: 50%;
	filter: drop-shadow(0px 6px 7.2px rgba(0, 0, 0, 0.15));
	color: #ffffff;
	padding: 0.5rem;
	display: inline-flex; flex-direction: column;
	justify-content: center;
	align-items: center;
}
/*.level-info::before{
	content: ' ';
	position: absolute;
	width:46px;
	height:46px;
	background: url('../img/level-info-light.svg') -23px center no-repeat;
}*/
.level-info.level-success{	background: linear-gradient(0deg, #14BA6A 0%, #73F247 100%); top: 50%; right: 30%; }
.level-info.level-danger{	background: linear-gradient(0deg, #EE4590 0%, #FBA0C8 100%); top: 20%; right: 0; }
.level-info .val{ font-weight:bold; font-size: 0.7rem;}
.level-info .desc{	font-size: 0.5rem; }
.task{
	background: rgba(255, 255, 255, 0.20);
	border: solid 1px #fff;
	margin-left: -1.25rem;
	margin-right: -1.25rem;
	padding: 0 1.25rem;
	border-radius: 1.5rem;
}
.task h3{
	padding: 13px 0 0 0;
	color: #197BDC;
	font-weight: bold;
	font-size: 13px;
}

.task-item{
	padding: 0.75rem 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.task .task-item:not(:last-child){
	border-bottom: 1px solid transparent;
    border-image: linear-gradient(0.1turn, rgba(225, 225, 225, 0.00) -1.83%, #D2DBE5 51.84%, rgba(225, 225, 225, 0.00) 100%);
    /*background: linear-gradient(270deg, rgba(225, 225, 225, 0.00) -1.83%, #D2DBE5 51.84%, rgba(225, 225, 225, 0.00) 100%);*/
    border-image-slice: 1;
}
.task-img{
	background:#2972DE;
	border-radius: 10px;
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.task-item .btn{
	font-size:11px;
	border-radius:10px;
	padding-top: 0.15rem; padding-bottom: 0.15rem;
}
.task-item .btn{ border: transparent; width: 75px;}
.task-item .btn-warning{ background:#F39007 ; color:#fff; }
.task-item .btn-primary{ background:#BEDFFF ; color:#0A4BC2; }

.statistic-item{
	width: 50%;
	padding: 0.75rem;
	background: #ffffff;
	border-radius: 28px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.statistic-info .val{ font-weight: bold; font-size: 16px; }

.subtitle-icon{
	background: linear-gradient(0deg, #000 19.05%, rgba(0, 0, 0, 0.50) 92.86%);
	color:#ffffff;
	width: 20px; height: 20px;
	font-size: 12px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 10px;
}

/*--- product ---*/
.product-item{ margin-bottom: 0.75rem; }
.product-item .card-header{
	color: var(--white);
	padding-bottom: 1.75rem;
	border-radius: 1.75rem;
	background: var(--primary);
	background-image: linear-gradient(to right, var(--primary) , #0A5AD3);
	position: relative;
	z-index: 10;
}
.bg-light-img .card-header{
	background-image: url('../img/light.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right center;
}
.bg-light-img .card-header .custom-control-input:checked~.custom-control-label::before {
    background-color: var(--warning);
}
.product-item .card-header h2{ font-size: 16px; }
.product-item-ico{
	background: var(--light);
	border-radius: 15px;
	/*box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);*/
	width:50px;
	height:50px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.product-item-progress{ 
	border-bottom-left-radius: 1.75rem;
	border-bottom-right-radius: 1.75rem;
	height: 50px;
	position: relative;
	margin-top: -40px;
	z-index: 1;
}
.card-design.product-item .card-header h2 .badge{
	background: #ED2D81;
}
.product-countdown{
	display: inline-flex;
	justify-content: start;
	align-items: center;
	padding: 0.2rem 0.5rem;
	background: rgba(255,193,7,0.5);
	border-radius: 0.5rem;
	font-size: 0.65rem;
}
.dashboard-product-subtitle{
	font-weight: bold;
	font-size: 1.1rem;
}
.product-desc-list{
	display: grid;
  	grid-template-columns: 33.33% 33.33% 33.34%;
}
.product-desc-item{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	grid-gap: 5px;
}
.product-desc-item-ico{
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	font-size: 20px;
	font-weight: bold;
}
.product-desc-item-content{
	display: flex;
	flex-direction: column;
}
.product-desc-item-caption{
	font-size: 0.7rem;
	font-weight: bold;
	color: var(--secondary);
}
.product-desc-item-value{
	font-size: 1.1rem;
	font-weight: bold;
}
.product-desc-item-value-secondary{
	color: var(--secondary);
	font-size: 0.7rem;
	font-weight: normal;
}
.product-item-btn{
	border-radius: 15px;
}

/*--- Profile ---*/
.profile-highlight {
    margin-top: -50px;
    padding: calc(50px + 0.5rem) 1.25rem 0.5rem 1.25rem;
    background: #ED2D81;
    border-radius: 1.75rem;
    color: white;
    background-image: url('../img/light.svg');
    background-repeat: no-repeat;
    background-position: 70px -80px;
    background-size: 100%;
}
.profile-header-info{
	padding: 0.5rem 0 0 0;
	font-size: 12px;
	font-weight: normal;
	opacity: 0.8;
}
.profile-picture{
	border-radius: 50%;
	background: linear-gradient(#ddd, #eee);
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50px;
	height: 50px;
	font-size: 30px;
}
.profile-picture>i{
	background: -webkit-linear-gradient(-90deg, rgba(255,255,255,1), rgba(255,255,255,0));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/*--- wallet ---*/
.wallet-pending-value{
	background: #FFDD85;
	color: #000000;
	padding: 0.3rem 0.75rem;
	border-radius: 0.5rem;
	font-size: 12px;
}

/*--- package ---*/
.package-item{ cursor: pointer; }
.package-item.active{
      border-color: var(--primary) !important;
      background: rgba(0,123,255,0.1);
}
.package-item:not(.active):hover{ border-color: var(--primary) !important; }
.package-item:not(.active, .completed) .package-item-nft{
	mix-blend-mode: luminosity;
	opacity: 0.5;
}
.package-item.active .package-item-price{ color: var(--primary); }
.package-history-nav a{ text-decoration: none; }
.package-history-nav a:not(.active){ color: var(--dark); }
.package-history-nav a.active{
	background: #ECEBEB;
	border-radius: 0.25rem;
}
.package-item.non-active.completed{ border-color: var(--success) !important; background: rgba(40,167,69,0.08); }
.package-table td, .package-table th{ padding: 0.2rem 0.5rem; border-top: none; }


@property --num {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
@property --perval{
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
#quota_figure_wrapper{
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: xx-large;
      font-weight: bold;
      font-family: 'Play', sans-serif;
      color: #d0186a;
      animation: blink 0.5s ease-in-out;
      animation-iteration-count: 13;
}
#quota_figure_wrapper
#quota_figure {
  animation: counter 5s forwards;
  counter-reset: num var(--num);
}
#quota_figure::after {
  content: counter(num);
}

@keyframes counter {
  from {
    --num: 0;
  }
  to {
    --num: var(--percentval);
  }
}
@keyframes blink{
      0%{
            opacity: 0;
      }
      100%{
            opacity: 1;
      }
}
.quota_percentage .col{
	height: 5px;
	position: relative;
}
.quota_percentage .col::after{
	content: ' ';
	position: absolute;
	top: 0; left: 10%;
	width: 80%;
	height: 100%;
	background: #dddddd;
	border-radius: 5px;
	border: solid 1px transparent;
	border-style: inset;
}
.quota_percentage .col:nth-child(1)::after{
      transition: all 2s ease-in-out;
}
.quota_percentage .col:nth-child(2)::after{
      transition: all 4s ease-in-out;
}
.quota_percentage .col:nth-child(3)::after{
      transition: all 6s ease-in-out;
}
.quota_percentage .col:nth-child(4)::after{
      transition: all 8s ease-in-out;
}
.quota_percentage .col:nth-child(5)::after{
      transition: all 10s ease-in-out;
}
.quota_percentage .col.active::after{
      border-color: rgba(0,0,0,0.5);
}
.quota_percentage .col:nth-child(1).active::after{
      background: #0dc5a5;
}
.quota_percentage .col:nth-child(2).active::after{
      background: #0da5c5;
}
.quota_percentage .col:nth-child(3).active::after{
      background: #0f78d1;
}
.quota_percentage .col:nth-child(4).active::after{
      background: #880dc5;
}
.quota_percentage .col:nth-child(5).active::after{
      background: #c50db6;
}
.btn-design.animate::after {
  content: '';
  width: 100%; height: 100%;
  border-radius: 25px; /*100%*/
  border: 6px solid #00FFCB;
  position: absolute;
  z-index: -99;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: ring 1.5s infinite;
}
.btn-design.btn-primary.animate::after{
      border-color: #0E7AD1;
}
@keyframes ring {
  0% {
    width: 100%; /*30px*/
    height: 100%;
    opacity: 0.5;
  }
  100% {
      border-radius: 50px;
    width: 110%;
    height: 170%;
    opacity: 0;
  }
}

@media (min-width: 992px){
	.navbar-expand-lg .navbar-nav .nav-link {
	    padding-right: 0.75rem;
	    padding-left: 0.75rem;
	}
}
#navbar-btn{ display: flex;}
.navbar-btn-item:not(:last-child){ margin-right: 0.5rem;}
@media only screen and (max-width: 600px) {
	#navbarheader.show, #navbarheader.collapsing{ display: flex; }
	#navbarheader{
		flex-direction: column-reverse;
		align-items: start;
		position: absolute;
	    top: 0px;
	    left: 0px;
	    margin-top: 3.5rem;
	    width: 100vw;
	    z-index: 999;
	    background: linear-gradient(rgb(243, 242, 243) 0%, rgba(155, 204, 255, 0.75) 100%);
	    backdrop-filter: blur(10px);
	}
	.navbar-nav .nav-link, #navbar-btn{
		padding-left: 15px;
		padding-right: 15px;
	}
	.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link{
		background: unset;
	}
	#navbar-btn{
		display: flex;
		flex-direction: column;
		width: 100vw;
	}
	#navbar-btn .navbar-btn-item:not(:last-child){
		margin-bottom: 0.5rem;
	}
}