@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

.full-content-container {
	margin-top: 188px;
}

.page-title-container {
	margin-bottom: 32px;
}

.page-title-container h2.page-title {
    display: block;
    width: 100%;
	margin: 0 0 8px;
	padding: 0;
    text-transform: uppercase;
	text-align: center;
}

.page-title-container p {
	display: block;
	text-align: center;
}

/* Page: Missions */

ul.tab-twopill {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-bottom: 24px;
}

ul.tab-twopill li {
}

button.btn-tab-twopill {
	display: block;
	color: #fff;
	line-height: 32px;
	padding: 0 24px;
    background: rgb(59, 59, 59);
    background: -moz-linear-gradient(0deg, rgba(59, 59, 59, 1) 0%, rgba(25, 25, 25, 1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(59, 59, 59, 1) 0%, rgba(25, 25, 25, 1) 100%);
    background: linear-gradient(0deg, rgba(59, 59, 59, 1) 0%, rgba(25, 25, 25, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3b3b3b",endColorstr="#191919",GradientType=1);
	border-radius: 32px;
}

button.btn-tab-twopill.active {
	font-weight: 700;
    background: rgb(193, 0, 0);
    background: -moz-linear-gradient(0deg, rgba(193, 0, 0, 1) 0%, rgba(255, 101, 41, 1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(193, 0, 0, 1) 0%, rgba(255, 101, 41, 1) 100%);
    background: linear-gradient(0deg, rgba(193, 0, 0, 1) 0%, rgba(255, 101, 41, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c10000",endColorstr="#ff6529",GradientType=1);
}

ul.mission-list {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	gap: 16px;
	margin: 0 auto 64px;
	padding: 0 6px;
	min-width: 1200px;
    max-width: 1440px;
}

ul.mission-list li {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	gap: 12px;
	justify-content: center;
	padding: 12px;
	width: 24%;
	font-size: 0.75em;
	text-align: center;
	border: 1px solid rgba(17, 17, 17, 0.1);
	border-radius: 8px;
}

ul.mission-list li .progress {
	height: 3px;
}

ul.mission-list li img {
	display: block;
	max-width: 48px;
	margin: 0 auto;
}

.mission-reward-desc {
	display: flex;
	flex-direction: column;
}

.mission-reward-desc span:first-child {
}

.mission-reward-desc span:last-child {
	font-weight: 700;
}

.btn-mission-claimed {
	color: green;
	font-size: 1.5em;
	line-height: 32px;
	cursor: default !important;
}

.btn-mission-locked {
	color: #0c0c0c;
	font-size: 1.5em;
	line-height: 32px;
	cursor: default !important;
}

.btn-mission-ongoing a {
	display: block;
	margin: 0 auto;
	max-width: 200px;
	color: #fff;
	font-weight: 700;
	text-shadow: 0 0 10px #fff;
	line-height: 32px;
    background: rgb(59, 59, 59);
    background: -moz-linear-gradient(0deg, rgba(59, 59, 59, 1) 0%, rgba(25, 25, 25, 1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(59, 59, 59, 1) 0%, rgba(25, 25, 25, 1) 100%);
    background: linear-gradient(0deg, rgba(59, 59, 59, 1) 0%, rgba(25, 25, 25, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3b3b3b",endColorstr="#191919",GradientType=1);
	border-radius: 32px;
}

.btn-mission-claim a {
	display: block;
	margin: 0 auto;
	max-width: 200px;
	color: #fff;
	font-weight: 700;
	text-shadow: 0 0 10px #fff;
	line-height: 32px;
    background: rgb(193, 0, 0);
    background: -moz-linear-gradient(0deg, rgba(193, 0, 0, 1) 0%, rgba(255, 101, 41, 1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(193, 0, 0, 1) 0%, rgba(255, 101, 41, 1) 100%);
    background: linear-gradient(0deg, rgba(193, 0, 0, 1) 0%, rgba(255, 101, 41, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c10000",endColorstr="#ff6529",GradientType=1);
	border-radius: 32px;
}

/* Page: Level */

.current-level {
	position: sticky;
    top: 18px;
	z-index: 2;
	width: calc( 100% - 12px);
	max-width: 600px;
	margin: 0 auto 24px;
	border-radius: 8px;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

ul.level-list {
	margin: 0 auto;
	width: calc( 100% - 12px);
	max-width: 600px;
}
ul.level-list li {
	margin-bottom: 24px;
}

.lvl-list-item {
	display: flex;
	gap: 6px;
	padding: 18px 24px 18px 6px;
	border: 1px solid rgba(17, 17, 17, 0.1);
	border-radius: 8px;
}

.lvl-locked {
	opacity: .3;
}

.lvl-rewards-container {
	display: flex;
	align-items: center;
	width: 65%;
}

.lvl-rewards-details {
	display: flex;
	flex-direction: column;
	width: calc( 100% - 88px );
	font-size: 0.75em;
	line-height: 20px;
}

.lvl-rewards-details span:first-child {
	
}

.lvl-rewards-details span:last-child {
	font-weight: 700;
}
.lvl-rewards-container button {
	width: 88px;
}

.lvl-summary {
	display: flex;
	gap: 6px;
	padding: 18px 24px 18px 6px;
	color: #fff;
	background: rgb(59, 59, 59);
    background: -moz-linear-gradient(0deg, rgba(59, 59, 59, 1) 0%, rgba(25, 25, 25, 1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(59, 59, 59, 1) 0%, rgba(25, 25, 25, 1) 100%);
    background: linear-gradient(0deg, rgba(59, 59, 59, 1) 0%, rgba(25, 25, 25, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3b3b3b",endColorstr="#191919",GradientType=1);
	border-radius: 8px;
}

.lvl-badge-container {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 30%;
    text-align: center;
}

.lvl-badge-container .lvl-summary-badge {
	margin: 0 auto;
}

.lvl-badge-container .lvl-badge-title {
	display: block;
	margin-bottom: 6px;
	font-size: 0.75em;
}

.lvl-progress-container {
	width: 70%;
}

.lvl-progress-container .progress {
	margin: 6px 0;
	height: 6px;
}

.progress-bar {
	background: #ff6529;
}

.lvl-progress-upper,
.lvl-progress-bottom {
	display: flex;
	justify-content: space-between;
	width: 100%;
	font-size: 0.75em;
}

.lvl-progress-upper span:first-child {
	display: block;
	font-weight: 700;
}

/* Page: Refer */

.refer-page-container {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin: 0 auto 64px;
	width: calc( 100% - 12px );
	max-width: 1000px;
}

.refer-col-left {
	width: 48%;
}

.refer-col-right {
	width: 48%;
}

h3.refer-title {
	display: block;
	line-height: 120%;
	text-align: center;
}

span.title-desc {
	display: block;
	text-align: center;
}

.refer-rewards-container {
	display: flex;
	gap: 2px;
	margin: 0 auto;
	width: 100%;
	max-width: 600px;
	border-radius: 8px;
	overflow: hidden;
}

.refer-rewards-details {
	display: flex;
	flex-direction: column;
	padding: 12px 6px;
	width: 50%;
	text-align: center;
	background: rgba(0, 0, 0, 0.05);
	justify-content: space-around;
}

.refer-rewards-details span:first-child {
	font-size: 1.5em;
	font-weight: 700;
	display: block;
	margin-bottom: 10px;
}

.refer-rewards-details span:last-child {
	font-size: 0.75em;
	display: block;
}

.refer-share-container {
	margin: 0 auto;
	padding: 12px;
	border: 1px solid rgba(17, 17, 17, 0.1);
	border-radius: 8px;
}

.refer-share-menu {
	display: flex;
	gap: 12px;
	justify-content: space-between;
	margin: 0 auto;
}

.refer-share-menu > .btn-tab-twopill {
	width: 33%;
}

.refer-share-tab {
	margin: 24px auto 0;
}

.refer-qr-container {
	display: flex;
	flex-direction: column;
}

div.refer-qr {
	display: block;
	margin: 0 auto 24px;
	max-width: 400px;
}

div.refer-qr {
	display: block;
	margin: 0 auto 24px;
	max-width: 400px;
}

.btn-download-qr {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	width: 100%;
	max-width: 400px;
	line-height: 32px;
	background: rgba(0, 0, 0, 0.05);
	border-radius: 50px;
}

.refer-statistic-container {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	margin: 0 auto;
	padding: 12px;
	width: calc(100% - 12px);
	max-width: 600px;
	border: 1px solid rgba(17, 17, 17, 0.1);
	border-radius: 8px;
}

h4.refer-section-title {
	display: block;
	margin-bottom: 12px;
	width: 100%;
	font-size: 1em;
	font-weight: 700;
}

.refer-statistic {
	display: flex;
	gap: 2px;
	margin-bottom: 24px;
	width: 100%;
	border-radius: 8px;
	overflow: hidden;
}

.refer-statistic-report {
	display: flex;
	flex-direction: column;
	padding: 12px 6px;
	width: 50%;
	text-align: center;
	background: rgba(0, 0, 0, 0.05);
}

.refer-statistic-report span:first-child {
	display: block;
	margin-bottom: 5px;
}

.refer-statistic-report span:last-child {
	display: block;
	font-weight: 700;
}

.btn-refer-report {
	width: 100%;
}

.btn-refer-report a {
	display: block;
	width: 100%;
	line-height: 32px;
	background: rgba(0, 0, 0, 0.05);
	border-radius: 32px;
}