@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-Bold.eot');
    src: url('../fonts/MyriadPro-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/MyriadPro-Bold.woff2') format('woff2'),
        url('../fonts/MyriadPro-Bold.woff') format('woff'),
        url('../fonts/MyriadPro-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-Semibold.eot');
    src: url('../fonts/MyriadPro-Semibold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/MyriadPro-Semibold.woff2') format('woff2'),
        url('../fonts/MyriadPro-Semibold.woff') format('woff'),
        url('../fonts/MyriadPro-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Myriad Pro';
    src: url('../fonts/MyriadPro-Regular.eot');
    src: url('../fonts/MyriadPro-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/MyriadPro-Regular.woff2') format('woff2'),
        url('../fonts/MyriadPro-Regular.woff') format('woff'),
        url('../fonts/MyriadPro-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/************************* reset *************************/
html{
	height: 100%;
	margin: 0;
	padding: 0;width: 100%;
	font-size: 0.052vw;
}
body{
	height: 100%;
	width: 100%;
	position: relative;
	margin: 0;
	padding: 0;
	color: #fff;
	font-size: 18px;
	font-weight: 400;
	font-family: 'Myriad Pro', Arial, Helvetica, sans-serif;
	line-height: 110%;
	min-width: 320px;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
h1, h2, h3, h4, p, ul, li, a, span, div, input, textarea, select, form, fieldset, button, dl, dd, dt, figure, figcaption, blockquote, caption, aside, section {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	box-sizing: border-box;
}
img {
	margin: 0;
	padding: 0;
	border-style: none;
	vertical-align: bottom;
}
input, textarea, select, button {
	font-weight: 400;
	font-family: 'Lato', Arial, Helvetica, sans-serif;
	vertical-align:middle;
	border: 0;
	outline: 0;
	background: none;
}
a:hover {text-decoration: none;}
ul li {list-style: none;}
/************************* common styles *************************/
.holder {
	padding: 0 18px;
	max-width: 576px;
	margin: 0 auto;
}
a {transition: all .3s linear;}
/************************* wrapper *************************/
#wrapper {
	position: relative;
	overflow: hidden;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	background: linear-gradient(180deg, #395077 0%, #C4D9EA 47.5%, #192438 91.87%);
}
/************************* header *************************/
.header {
	padding: 10px 0;
}
.header-block {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.header-links {
	display: flex;
	gap: 5px;
}
.header-link {
	width: 46px;
	min-width: 46px;
	height: 46px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #273653;
	text-align: center;
	font-size: 15px;
	font-weight: 600;
	line-height: 120%;
	text-decoration: none;
	text-transform: uppercase;
	border-radius: 50%;
	background: radial-gradient(50% 50% at 50% 50%, #849BB7 0%, #8198B4 20.25%, #788EA9 37.89%, #697D97 54.56%, #54657E 70.63%, #39475E 86.12%, #1B253A 100%);
}
.header-user {
	display: flex;
	align-items: center;
	gap: 15px;
	width: calc(100% - 107px);
}
.header-user-ava {
	width: 46px;
	min-width: 46px;
	height: 46px;
	overflow: hidden;
	border-radius: 50%;
}
.header-user-ava img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.header-user-name {
	font-size: 24px;
	font-weight: 400;
	line-height: 120%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
}
/************************* main *************************/
.main {
	padding: 35px 0 20px;
}
.coin {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 11px;
}
.coin-icon {
	width: 58px;
	min-width: 58px;
	height: 58px;
}
.coin-icon img {
	width: 100%;
}
.coin-number {
	font-size: 42px;
	font-weight: 400;
	line-height: 120%;
}
.coin-name {
	margin: 0 0 25px;
	color: #343D5A;
	text-align: center;
	font-size: 40px;
	line-height: 120%; 
}
.main-select {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 0 25px;
}
.main-select-text {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 10px;
	color: #343D5A;
	text-align: center;
	font-size: 24px;
	font-weight: 400;
	line-height: 120%; 
	width: calc(100% - 35px);
	height: 49px;
	border-radius: 8px;
	border: 1px solid #575756;
	background: linear-gradient(90deg, #6B7F98 0%, #C4D9EA 50%, #6B7F98 100%);
}
.main-select-buttons {
	width: 25px;
	min-width: 25px;
}
.main-select-buttons img {
	width: 100%;
}
.main-text {
	margin: 0 0 25px;
	color: #343D5A;
	text-align: center;
	font-size: 19px;
	font-weight: 400;
	line-height: 110%;
}
.main-img {
	margin: 0 0 35px;
	text-align: center;
}
.main-img img {
	max-width: 100%;
}
.main-button {
	display: flex;
	justify-content: center;
	text-align: center;
}
.button {
	display: flex;
	width: 172px;
	height: 172px;
	padding: 20px;
	justify-content: center;
	align-items: center;
	color: #FFF;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 36px;
	font-weight: 700;
	line-height: 120%;
	border-radius: 37px;
	border: 1px solid #575756;
	background: radial-gradient(86.26% 63.37% at 50% 0%, #F5931E 31.5%, rgba(245, 147, 30, 0.00) 100%), radial-gradient(78.35% 57.56% at 50% 100%, #F5931E 31%, rgba(245, 147, 30, 0.00) 100%), #FF0600;
}
.button-dark {
	color: #292F42;
	border-radius: 37px;
	border: 1px solid #575756;
	background: radial-gradient(103.28% 75.87% at 55.23% -4.94%, #193149 17%, rgba(60, 76, 92, 0.00) 100%), radial-gradient(78.35% 57.56% at 50% 100%, #3C4C5C 0%, rgba(60, 76, 92, 0.00) 100%), #C4D9EA;
}
.user-list {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.user-item {
	display: flex;
	align-items: center;
	gap: 20px;
	height: 60px;
	padding: 0 10px;
	border-radius: 8px;
	border: 1px solid #575756;
	background: linear-gradient(90deg, #6B7F98 0%, #C4D9EA 50%, #6B7F98 100%);
}
.user-item-ava {
	width: 46px;
	min-width: 46px;
	height: 46px;
	overflow: hidden;
	border-radius: 50%;
}
.user-item-ava img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.user-item-name {
	color: #343D5A;
	font-size: 30px;
	font-weight: 400;
	line-height: 120%;
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.faq {
	position: fixed;
	top: 66px;
	left: 18px;
	right: 18px;
	bottom: 18px;
	z-index: 500;
	padding: 40px 30px;
	overflow-y: auto;
	border-radius: 40px;
	border: 1px solid #575756;
	background: linear-gradient(180deg, rgba(63, 86, 124, 0.90) 0%, rgba(137, 154, 172, 0.90) 50%, rgba(25, 36, 56, 0.90) 100%);
}
.faq-title {
	margin: 0 0 10px;
	color: #FFF;
	text-align: center;
	text-transform: uppercase;
	font-size: 32px;
	font-weight: 600;
	line-height: 120%;
}
.faq-close {
	position: absolute;
	top: 25px;
	right: 25px;
}
.faq-close img {display: block;}



/************************* footer *************************/
.footer {
	margin: auto 0 0;
	padding: 19px 0;
}
.footer-block {
	display: flex;
	gap: 8px;
}
.footer-button {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	height: 79px;
	color: #515665;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 22px;
	font-weight: 600;
	line-height: 120%;
	border-radius: 12px;
	border: 1px solid #575756;
	background: radial-gradient(79.14% 58.14% at 50% 0%, #3C4C5C 0%, rgba(60, 76, 92, 0.00) 100%), radial-gradient(78.35% 57.56% at 50% 100%, #3C4C5C 0%, rgba(60, 76, 92, 0.00) 100%), #A7B9CC;
}
.footer-button.active {
	color: #292F42;
}