html{ width:100%; display:flex; flex-direction:column; min-height:100vh }
body{ padding: 0; margin: 0; font-family: 'Inter Tight', sans-serif; font-weight: 400; font-size: 18px; color: #fff; background: #000; display:flex; flex-direction:column; flex-grow:1 }
*{ box-sizing: border-box; overscroll-behavior-y:none }
a{ text-decoration: none; color: inherit }
form{ margin: 0; padding: 0 }
button, input, textarea{ outline: none; font-family: 'Inter Tight', sans-serif; letter-spacing:0.03em }




#app, .app-loader{ flex-grow: 1; width:100%; max-width:400px; margin-left:auto; margin-right:auto; display:none; flex-direction:column }
.app{ flex-grow: 1; width:100%; display:flex; flex-direction:column }
.app-loader{ display:flex; align-items:center; justify-content:center }



.logo{ display:flex; align-items:center }
.logo > div:nth-child(1){ width:48px; height:48px; background:url(img/x-circle-logo_green.svg) no-repeat center/ contain; margin-right:12px }




@keyframes rotate{
	from{ transform:rotate(0) }
	from{ transform:rotate(-360deg) }
}




.b16{ font-weight:600; font-size:16px; line-height:140% }
.m30{ font-weight:500; font-size:30px; line-height:120% }
.m28{ font-weight:500; font-size:28px; line-height:100% }
.m24{ font-weight:500; font-size:24px; line-height:100% }
.m20{ font-weight:500; font-size:20px; line-height:100% }
.m18{ font-weight:500; font-size:18px; line-height:100% }
.m16{ font-weight:500; font-size:16px; line-height:140% }
.m15{ font-weight:500; font-size:15px; line-height:140% }
.m14{ font-weight:500; font-size:14px; line-height:140% }
.m13{ font-weight:500; font-size:13px; line-height:140% }
.m12{ font-weight:500; font-size:12px; line-height:140% }
.m10{ font-weight:500; font-size:10px; line-height:140% }
.t14{ font-weight:400; font-size:14px; line-height:140% }
.t12{ font-weight:400; font-size:12px; line-height:140% }
.t10{ font-weight:400; font-size:10px; line-height:140% }


.center{ text-align:center }

.green{ color:#66CC88 }
.gray{ color:#808080 }
.red{ color:#FF3333 }


.form{ margin:-12px -4px 0; width:calc(100% + 8px); display:flex; justify-content: center; flex-wrap:wrap }
.form-section{ padding:12px 4px 0; width:100% }
.form__safety-keyboard{ padding-bottom:300px }
.form-error{ padding:16px 4px 0; width:100%; text-align:center; color:#FF3333; font-size:14px; font-weight:400; line-height:120% }

.field{ padding:12px 4px 0; width:100% }
.field label, .field-label{ display: block; font-size:12px; font-weight:400; line-height:140%; text-transform:uppercase; color:#808080; padding:0 8px 4px }
.field input{ display: flex; align-items: center; width:100%; height:46px; border-radius:12px; background:#191919; color: #fff; caret-color:#66CC88; border:0; padding:0 16px; font-size:14px; font-weight:400; line-height:150%; transition:color 0.3s }
.field input:placeholder{ color:#333333 }
.field.field-invalid input:not(:focus){ color:#FF3333 }
.field-error{ display: block; font-size:12px; font-weight:400; line-height:140%; color:#FF3333; padding-top:4px }



.btn{ cursor: pointer; height:48px; border-radius:12px; padding:0 16px; display:flex; align-items:center; justify-content: center; text-align: center; background:transparent; color:transparent; font-size:15px; font-weight:500; border: 1px solid transparent; transition:background 0.3s, color 0.3s, border-color 0.3s }
.btn > svg{ width:24px; min-width:24px; height:24px; fill:transparent; transition:fill .3s }
.btn-ico__left{ margin-right:8px }

.btn-sm{ height:36px; border-radius:10px; padding:0 12px; font-size:13px }

.btn.green-gray{ background:#191919; color:#66CC88; border-color:#191919 }
.btn.green-gray:hover{ background:#66CC88; color:#fff; border-color:#66CC88 }
.btn.green-gray > svg{ fill:#66CC88 }
.btn.green-gray:hover > svg{ fill:#fff }

.btn.white-green{ background:#66CC88; color:#fff; border-color:#66CC88 }
.btn.white-green:hover{ background:#40BF6A; color:#fff; border-color:#40BF6A }
.btn.white-green > svg{ fill:#fff }

.btn.white-green-outline{ background:transparent; color:#66CC88; border-color:#66CC88 }
.btn.white-green-outline:hover{ background:transparent; color:#40BF6A; border-color:#40BF6A }
.btn.white-green-outline > svg{ fill:#fff }

.btn.white-red-outline{ background:transparent; color:#FF3333; border-color:#FF3333 }
.btn.white-red-outline:hover{ background:transparent; color:#FF0F0F; border-color:#FF0F0F }
.btn.white-red-outline > svg{ fill:#fff }

.btn.white-gray{ background:#292929; color:#fff; border-color:#292929 }
.btn.white-gray:hover{ background:#393939; color:#fff; border-color:#393939 }
.btn.white-gray > svg{ fill:#fff }

.btn.gray-black{ background:#000; color:#808080; border-color:#000 }
.btn.gray-black > svg{ fill:#fff }

.btn:disabled, .btn:disabled:hover{ background:#151515; color:#4f4f4f; border-color:#151515; cursor:default }




.list{ flex-grow: 1; margin-left:-16px; margin-right:-16px; width: calc(100% + 32px); margin-top:24px; border-radius:24px; background:#1A1A1A; display:flex; flex-direction: column; padding:24px 16px }
.list-title{ text-transform:uppercase; color:#808080 }
.list-empty{ display:flex; align-items:center; justify-content:center; text-align:center; flex-grow:1; margin-top:24px; min-height:60px }
.list-body{ width:100%; margin-top:24px }

.list-loading{ width:100%; margin-top:24px }




.page{ width:100%; padding:40px 16px; display:flex; flex-direction:column; flex-grow:1 }
.page-title{ padding-bottom:16px; width:100%; text-align:center }




.modal{ display: none; position:fixed; z-index:10000; left:0; right:0; top:0; bottom:0; padding:40px 0; overflow-y:auto; background:rgba(0, 0, 0, .35); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px) }
.modal.active{ display:block }
.modal > div{ width:264px; margin-left:auto; margin-right:auto; padding: 70px 0 40px }
.modal-body{ width:100%; padding:24px; border-radius:16px; background:#191919; display:flex; flex-direction:column; align-items:center }

.modal-alert{ text-align:center }
.modal__title{ line-height:140% }
.alert__ico + .modal__title, .successful__ico + .modal__title, .confirm__ico + .modal__title, .shield-checkmark__ico + .modal__title{ margin-top:24px }
.modal__text{ margin-top:12px; color:#ccc; text-align:center }
.modal__close{ margin-top:24px; color:#FF3333 }
.modal__btn-ok{ margin-top:24px; min-width:120px }

.modal .alert__ico{ width:48px; height:48px; background:url(img/alert_red.svg) no-repeat center / contain }
.modal .successful__ico{ width:48px; height:48px; background:url(img/checkmark-circle_green.svg) no-repeat center / contain }
.modal .confirm__ico{ width:48px; height:48px; background:url(img/question-circle_blue.svg) no-repeat center / contain }
.modal .shield-checkmark__ico{ width:48px; height:48px; background:url(img/shield-checkmark_orange.svg) no-repeat center / contain }

.modal-loader, .modal-successful-min{ width:80px; height:80px; border-radius:25px; background:#191919; display:flex; align-items:center; justify-content:center; margin:45px auto 0 }
.modal-loader > div, .modal-successful-min > div{ width:36px; height:36px; animation:rotate 1s linear infinite; background:url(img/loader_green.webp) no-repeat center / contain }
.modal-successful-min > div{ animation:unset; background-image:url(img/checkmark-circle-filled_coloured.svg) }

.modal-card-ico{ display:flex; align-items:center; margin-top:24px }
.modal-card-ico > div:nth-child(1){ position: relative; width:48px; height:30px; background:#000; border:1px solid #000; border-radius:4px; overflow:hidden }
.modal-card-ico > div:nth-child(1) > div:nth-child(1){ width:32px; height:34px; position:absolute; z-index: 1; left:50%; top:50%; transform:translate(-50%, -50%); background:url(img/x-logo_gray.svg) no-repeat center / contain }
.modal-card-ico > div:nth-child(1) > div:nth-child(2){ width:21px; height:7px; position:absolute; z-index: 2; left:4px; top:6px; background:url(img/visa_white.svg) no-repeat center / contain }
.modal-card-ico > div:nth-child(2){ margin-left:8px }

.modal__field{ display:flex; align-items:center; margin-top:24px; width:100% }
.modal__field + .modal__field{ margin-top:12px }
.modal__field-line{ flex-direction:column; align-items:flex-start }
.modal__field label{ display:bock; padding:0 8px; font-size:10px; font-weight:400; line-height:140%; color:#808080; text-transform:uppercase; margin-bottom:4px }
.modal__field input{ width:calc(100% - 57px); height:36px; display:flex; align-items:center; border-radius:8px; background:#000; padding:0 12px; font-size:12px; font-weight:500; color:#fff; border:0 }
.modal__field-line.modal__field input{ width:100% }
.modal__field input:placeholder{ color:#333333 }
.modal__field button{ width:47px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:8px; background:#66CC88; border-radius:8px; font-size:12px; font-weight:500; text-align:center; border:0; margin-left:10px; color:#fff; cursor:pointer }
.modal__field button:disabled{ background:#3e3e3e; color:#161616; cursor:default }
.modal__field-error{ margin-top:4px; font-size:12px; font-weight:400; color:#FF3333; width:100% }

.modal__account-limit{ width:100%; padding:12px; border-radius:16px; display:flex; align-items:center; margin-top:24px; border:1px solid transparent }
.modal__account-limit + .modal__account-limit{ margin-top:8px }
.modal__account-limit.active{ border-color:#66CC88 }
.modal__account-limit-ico{ width:48px; min-width: 48px; height:48px; border-radius:99px; background:#333333; display:flex; align-items:center; justify-content:center }
.modal__account-limit-kyc2 .modal__account-limit-ico{ background:#306EE8; background:linear-gradient(to bottom, #306EE8, #1755CF) }
.modal__account-limit-priority .modal__account-limit-ico{ background:#66CC88; background:linear-gradient(to bottom, #66CC88, #40BF6A) }
.modal__account-limit-ico > svg{ width:24px; min-width:24px; height:24px; fill:#fff }
.modal__account-limit-data{ flex-grow:1; padding-left:12px }
.modal__account-limit-data > div:nth-child(2){ color:#808080; margin-top:2px }

.modal__copy-field{ position: relative; width:100%; margin-top:24px; display:flex; align-items:center; height:36px; border-radius:8px; background:#000; padding:0 12px; font-size:12px; font-weight:500; color:#fff }
.modal__copy-field-btn{ width:16px; height:16px; fill:#fff; position:absolute; top:50%; right:10px; transform:translateY(-50%) }

.modal-field{ width:100%; margin-top:16px; position:relative }
.modal__title + .modal-field{ margin-top:36px }
.modal-field input{ width:100%; height:48px; background:#000; display:flex; align-items:center; padding:0 16px; border-radius:12px; border:1px solid #000; font-size:14px; font-weight:500; color:#fff }
.modal-field input:placeholder{ color:#333333 }
.modal-field__amount label{ position:absolute; right:16px; top:50%; transform:translateY(-50%) }

.modal-btn{ width:100%; margin-top:36px }
.modal-btn + .modal-btn{ margin-top:10px }
.modal-actions .modal-body > .modal-btn:first-child{ margin-top:0 }
.modal-close-btn{ margin-top:24px; color:#FF3333 }
.modal-actions .modal-close-btn{ color:#808080 }

.modal-limit-card > div{ width:343px }
.modal-bank-card-block{ width:100%; display:flex; align-items:center; padding:24px 16px; border:1px solid #333; border-radius:12px; margin-top:36px }
.modal-bank-card-block .m14{ margin-left:16px }

.modal-btns{ width:calc(100% + 16px); margin-left:-8px; margin-right:-8px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; margin-top:36px }
.modal-btns > div{ width:100%; padding:0 8px }
.modal-btns .modal-btn{ width:100%; margin-top:0 }




.push-container{ position:fixed; z-index: 11000; left:0; right:0; bottom:46px; display:flex; justify-content:center }
.push-body{ width:100%; max-width:343px }
.push{ display:flex; align-items: flex-start; padding:12px 16px; border-radius:12px; background:#fff; color:#000; box-shadow:0 0 8px #000; transform:translateX(-100%); opacity:0 }
.push + .push{ margin-top:8px }
.push.show{ animation:push-show .4s ease-in-out forwards }
.push.hide{ animation:push-hide .4s ease-in-out forwards }
.push > svg{ width:24px; min-width: 24px; height:24px; fill:#000 }
.push-text{ padding-left:16px; padding-top:2px }
.push-data{ width: calc(100% - 24px); max-width:calc(100% - 24px); overflow:hidden; padding-left:16px }
.push-data > div:nth-child(2){ margin-top:2px; color:#808080; margin-top:2px; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis }

@keyframes push-show{
	from{ transform:translateX(-100%); opacity:0 }
	to{ transform:translateX(0); opacity:1 }
}
@keyframes push-hide{
	from{ transform:translateX(0); opacity:1 }
	to{ transform:translateX(100%); opacity:0 }
}




.select-container{ display:flex; align-items:center; justify-content: space-between; width:100%; position:relative; z-index:100 }
.select{ position:relative; width:180px; min-width:180px }
.select__body{ width:100%; height:48px; border-radius:12px; background:#191919; color:#66CC88; padding:0 44px 0 16px; display:flex; align-items:center; position:relative; border:1px solid #191919; transition:border-color .3s }
.select.active .select__body{ border-color:#66CC88 }
.select__body-arrow{ width:24px; height:24px; position:absolute; top:50%; transform:translateY(-50%); right:10px; fill:#66CC88; transition:transform .3s }
.select.active .select__body-arrow{ transform:translateY(-50%) rotate(180deg) }
.select__modal{ position:absolute; width:180px; top:52px; right:0; background:#191919; border:1px solid #000; border-radius:12px; display:none }
.select.active .select__modal{ display:block }
.select__option{ height:46px; padding:0 12px 0 44px; display:flex; align-items:center; position:relative }
.select__option > svg{ position:absolute; width: 24px; height: 24px; left:10px; top:50%; transform:translateY(-50%); fill:#fff; opacity:0; transition:opacity 0.3s }
.select__option.active > svg{ opacity:1 }




.card{ width:100%; padding:16px 24px; border-radius:16px; background:#191919 }
.card + .card{ margin-top:16px }

.card-error{ margin-top:16px; padding:12px 16px; border-radius:12px; background:#191919; display:flex; align-items:center; color:#FF3333 }
.card-error > div:nth-child(1){ background: url(img/alert_red.svg) no-repeat center / contain; width:24px; min-width:24px; height:24px; margin-right:16px }




.tariff-card-ico{ width:69px; height:43px; background:#000; border:2px solid #000; position:relative; overflow:hidden; border-radius:6px }
.tariff-card-ico > div:nth-child(1){ z-index: 1; width:45px; height:49px; background:url(img/x-logo_gray.svg) no-repeat center / contain; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%) }
.tariff-card-ico > div:nth-child(2){ z-index: 2; width:30px; height:10px; background:url(img/visa_white.svg) no-repeat center / contain; position:absolute; left:6px; top:8px }

.bank-card-ico{ width:48px; height:30px; background:#000; position:relative; overflow:hidden; border-radius:4px; border:1px solid #000 }
.bank-card-ico::before{ content: ''; display: block; position: absolute; z-index: 1; width:31px; height:34px; left:50%; top:50%; transform:translate(-50%, -50%); background:url(img/x-logo_gray.svg) no-repeat center / contain }
.bank-card-ico::after{ content: ''; display: block; position: absolute; z-index: 1; width:21px; height:7px; left:3px; top:5px; background:url(img/visa_white.svg) no-repeat center / contain }




/* LOADER */
.loader-container{ flex-grow: 1; width:100%; display:flex; align-items:center; justify-content:center }
.loader{ width:105px; height:48px; position:relative }
.loader__circle{ display: flex; align-items: center; justify-content: center; width:24px; height:24px; position:absolute; top:12px; left:48px; border-radius:50%; background:#66CC88; background:linear-gradient(to bottom, #66CC88, #40BF6A); transition:width 0.8s, height 0.8s, top 0.8s, left 0.8s; z-index:2 }
.loader__circle > svg{ width:12px; height:13px; transform:rotate(-180deg); transition:width 0.8s, height 0.8s, transform 0.8s }
.loader__text{ position:absolute; width:55px; top:0; bottom:0; right:0 }
.loader__text > div{ position:absolute; right:0; top:50%; transform:translateY(-50%); opacity:0; right:30px; transition:opacity 0.8s, right 0.8s }

.loading .loader > .loader__circle{ animation:loading-circle 1.4s linear infinite }

@keyframes loading-circle{
	0%{ opacity:1 }
	50%{ opacity:0 }
	100%{ opacity:1 }
}

.loader__step-1 .loader > .loader__circle{ width:48px; height:48px; top:0; left:36px }
.loader__step-1 .loader > .loader__circle > svg{ width:24px; height:26px; transform:rotate(0) }

.loader__step-2 .loader > .loader__circle{ left:0px }
.loader__step-2 .loader > .loader__text > div{ right:0; opacity:1 }

.loader__skip .loader > .loader__circle{ left:0px; width:48px; height:48px; top:0; transition:unset }
.loader__skip .loader > .loader__circle > svg{ width:24px; height:26px; transform:rotate(0); transition:unset }
.loader__skip .loader > .loader__text > div{ right:0; opacity:1; transition:unset }




/* PREFECT UI */
.prefect9-page-loader__bar{ background:#4db6f3!important }




/* NOTIFICATIONS */
.notifications-ico{ position:absolute; top:-100px; right:16px; width:48px; height:48px; border-radius:12px; background:#191919; display:flex; align-items:center; justify-content:center; border:1px solid #313131 }
.notifications-ico svg{ width:24px; height:24px; fill:#808080; transition:fill 0.3s }
.notifications-ico.active svg{ fill:#fff }
.notifications-ico__active{ position:absolute; top:12px; right:13px; width:10px; height:10px; background:#66CC88; border:2px solid #191919; border-radius:99px; opacity:0; transition:opacity 0.3s }
.notifications-ico.active .notifications-ico__active{ opacity:1 }

.notifications-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; flex-grow:1 }
.notifications-empty__text{ text-align:center; max-width:185px; margin-left:auto; margin-right:auto; margin-top:36px }
.notifications-empty .btn{ margin-top:36px }
.notifications-empty__smile{ width:96px; height:96px; background:#40BF6A; background:linear-gradient(to bottom, #66CC88, #40BF6A); position:relative; border-radius:50% }
.notifications-empty__smile > div:nth-child(1){ position: absolute; width:9px; height:18px; top:30px; left:30px; border-radius:99px; background:#fff; transition:width .4s, height .4s, top .4s, left .4s }
.notifications-empty__smile > div:nth-child(2){ position: absolute; width:9px; height:18px; top:30px; right:30px; border-radius:99px; background:#fff; transition:width .4s, height .4s, top .4s, right .4s }
.notifications-empty__smile > div:nth-child(3){ position: absolute; width:60px; height:60px; top:18px; left:18px; background:url(img/notifications-empty-el-1_white.svg) no-repeat center / contain; transform: rotate(0deg); transition:transform .4s }

.notifications-empty__step-1 > div:nth-child(1){ width:14px; height:14px; left:20px; top:44px }
.notifications-empty__step-1 > div:nth-child(2){ width:9px; height:4px; right:37px; top:49px }
.notifications-empty__step-1 > div:nth-child(3){ transform:rotate(-45deg) }

.notifications-empty__step-2 > div:nth-child(1){ width:9px; height:4px; left:38px; top:49px }
.notifications-empty__step-2 > div:nth-child(2){ width:14px; height:14px; right:20px; top:44px }
.notifications-empty__step-2 > div:nth-child(3){ transform:rotate(45deg) }

.notifications-container{ padding-top:24px }
.notification-line{ display: block; padding:12px 16px 12px 24px; border-radius:16px; background:#191919; color:#fff; position:relative }
.notification-line + .notification-line{ margin-top:8px }
.notification-line.active::before{ content:''; display:block; position:absolute; left:12px; top:18px; border-radius:99px; background:#44C06D; width:6px; height:6px }
.notification-line__title{ display:flex; align-items:flex-start }
.notification-line__title > div:nth-child(1){ flex-grow:1 }
.notification-line__date{ color:#808080; padding-left:16px; white-space:nowrap; padding-top:3px }
.notification-line__description{ color:#CCCCCC; margin-top:8px }




/* NOTIFICATION PAGE */
.page__notification-loader, .page__notification{ padding-top:64px }
.page__notification-loader .notification-title{ width:183px; height:22px; border-radius:4px; background:#292929 }
.page__notification-loader .notification-amount{ width:236px; height:35px; border-radius:8px; background:#292929; margin-top:16px }
.page__notification-loader .notification-date{ width:138px; height:20px; border-radius:4px; background:#292929; margin-top:16px }
.page__notification-loader .notification-field-name{ width:70px; height:17px; border-radius:4px; background:#292929 }
.page__notification-loader .notification-field-description{ width:100%; height:22px; border-radius:4px; background:#292929; margin-top:4px }

.notification-amount{ display:flex; align-items:flex-end; color:#fff; margin-top:16px }
.notification-amount > div:nth-child(1){ font-size:48px; font-weight:500; line-height:100% }
.notification-amount > div:nth-child(2){ font-size:36px; font-weight:500; line-height:100% }
.notification-amount > div:nth-child(3){ font-size:36px; font-weight:400; line-height:100%; color:#808080; padding-left:10px }
.notification-date{ margin-top:16px; color:#808080 }

.notification-amount__deposit > div:nth-child(1){ color:#66CC88 }
.notification-amount__deposit > div:nth-child(2){ color:#66CC88 }

.notification-amount__green > div:nth-child(1){ color:#66CC88 }
.notification-amount__green > div:nth-child(2){ color:#66CC88 }

.notification-amount__bank-card-transfer-plus > div:nth-child(1){ color:#66CC88 }
.notification-amount__bank-card-transfer-plus > div:nth-child(2){ color:#66CC88 }

.notification-amount__bank-card-transaction-payment > div:nth-child(1){ color:#FF3333 }
.notification-amount__bank-card-transaction-payment > div:nth-child(2){ color:#FF3333 }

.notification-container{ width:100%; padding:16px; border-radius:16px; background:#191919; margin-top:48px }
.notification-container__title{ text-transform:uppercase; color:#808080 }
.notification-field + .notification-field{ margin-top:12px }
.notification-container__title + .notification-field{ margin-top:16px }
.notification-field-name{ color:#808080 }
.notification-field-description{ margin-top:2px; word-break: break-word }
.notification-field-mono{ color:#fff; margin-top:2px; word-break: break-word; font-size:14px; font-weight:400; line-height:140%; font-family:'Roboto Mono',sans-serif }

.notification-btn{ margin-top:48px }
.notification-container + .notification-btn{ margin-top:16px }



/* MODAL OTP */
.modal-otp-code > div{ width:343px }
.modal-otp-code__container{ position: relative; width:100%; margin-top:36px; display:flex; align-items:center; justify-content:center; font-size:36px; font-weight:500; color:#fff; padding:0 54px 0 10px; height:74px; border:1px solid #333; border-radius:12px; letter-spacing:0.25em }
.modal-otp-code__container svg{ width:20px; height:20px; fill:#fff; position:absolute; top:50%; transform:translateY(-50%); right:24px }
.modal-otp-code__line{ display:flex; align-items:center; justify-content: space-between; color:#fff; margin-top:24px; width:100% }
.modal-otp-code__line + .modal-otp-code__line{ margin-top:12px }
.modal-otp-code__line > div:nth-child(1){ white-space:nowrap; color:#808080; padding-right:10px }
.modal-otp-code__line > div:nth-child(2){ text-align:right }




/* PAGE LOADER */
.page-with-loader{ flex-grow: 1; width:100%; display:flex; align-items:center; justify-content:center; flex-direction:column }
.page-with-loader.loader__start{ justify-content:flex-start }
.page-with-loader__container{ display:none; flex-direction: column; align-items: center; transition:padding-top 0.8s; width:100%; min-height:100vh; flex-grow:1 }
.page-with-loader__body{ padding:48px 16px 60px; opacity:0; display: flex; flex-direction: column; transition:opacity 0.8s; width:100%; flex-grow:1; position:relative }
.loader__step-3 .page-with-loader__body{ opacity:1 }

.page-with-loader.loader__skip{ justify-content: flex-start }
.loader__skip .page-with-loader__body{ opacity:1; transition:unset }




/* ERROR PAGE */
.error-container{ width:100%; flex-grow:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 10px }
.error__title{ margin-top:64px }
.error__text{ margin-top:12px; color:#808080 }




/* PAGE DOCUMENT */
.document-page{ padding:50px 24px; text-align:justify }
.document__title{ display:flex; align-items:center }
.document__title > div:nth-child(1){ width:24px; height:26px; background:url(./img/x-logo_green.svg) no-repeat center / contain; margin-right:12px }
.document-page .b16{ margin-top:36px }
.document-page .t12{ margin-top:12px }
.document-page a{ color:#40BF6A; text-decoration:underline }




/* PAGE ACTIVATION */
.page__activation .m30 + .m15{ margin-top:10px; color:#808080 }
.page__activation .field:nth-child(1), .page__activation .field:nth-child(2){ width:50% }
.page__activation .form{ padding-top:36px }
.page__activation-text{ margin-top:40px; color:#CCCCCC; max-width:300px; margin-left:30px; margin-right:30px }
.page__activation-text span{ color:#40BF6A }
.page__activation-btns{ margin-top:24px; display:flex; align-items:center; justify-content:center; width: 100% }
.page__activation-btns .btn{ min-width:130px }
.page__activation-btns .btn + .btn{ margin-left:15px }
.page__activation-submit{ width:100%; margin-top:60px }




/* ACCOUNT NAVBAR */
.account-navbar{ width:100%; display:flex; align-items:center; justify-content:space-between; padding-bottom:48px }
.account-navbar__user{ display:flex; align-items:center }
.account-navbar__user-avatar{ width:48px; min-width:48px; height:48px; border-radius:50%; background:#333; display:flex; align-items: center; justify-content:center }
.account-navbar__user-avatar svg{ width:24px; height:24px; fill:#fff }
.account-navbar__user-balance{ padding-left:14px; display:flex; align-items:flex-end; color:#fff }
.account-navbar__user-balance > div:nth-child(1){ font-size:24px; font-weight:500; line-height:100% }
.account-navbar__user-balance > div:nth-child(2){ font-size:18px; font-weight:500; line-height:100%; padding-bottom:2px; margin-left:2px }
.account-navbar__user-balance > div:nth-child(3){ font-size:18px; font-weight:400; line-height:100%; padding-bottom: 2px; margin-left:4px; color:#808080 }
.account-navbar .notifications-ico{ position:relative; top:unset; right:unset }




/* PAGE MAIN */
.page__main .page-with-loader__body{ padding-bottom:0 }

.main__balance-text{ width:100%; margin-bottom:12px; text-align:center; color:#808080 }
.main__balance{ display:flex; align-items:flex-end; justify-content: center; color:#fff; font-weight:500 }
.main__balance > div:nth-child(1){ font-size:48px; line-height:35px }
.main__balance > div:nth-child(2){ font-size:36px; line-height:26px; margin-left:4px }
.main__balance > div:nth-child(3){ font-size:36px; line-height:26px; margin-left:6px; color:#808080 }
.main__btns{ margin:48px -4px 0; width:calc(100% + 8px); display:flex; align-items:center }
.main__btns > *{ width:calc(100% / 3); padding:0 4px; display:block }
.main__btn{ width:100%; display:flex; flex-direction:column; align-items:center; background:#1A1A1A; border-radius:16px; padding:12px }
.main__btn svg{ fill:#66CC88; width:24px; height:24px }
.main__btn .m13{ color:#66CC88; margin-top: 8px; line-height: 10px; display:block }


.main__card{ width:100%; display:flex; align-items:center; padding:12px 16px; border-radius:16px; background:#1A1A1A; max-width:100%; overflow:hidden }
.main__card + .main__card{ margin-top:8px }
.main__card-ico{ width:48px; min-width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#333333 }
.main__card-ico > svg{ width:24px; height:24px; fill:#fff }
.main__card-content{ flex-grow:1; padding:0 14px; white-space:nowrap; overflow:hidden }
.main__card-content > div{ max-width:100%; overflow:hidden; text-overflow:ellipsis }
.main__card-content .t12, .main__card-subcontent .t12{ margin-top:4px; color:#808080 }
.main__card-arrow{ width:24px; height:24px; fill:#808080 }

.main__card-account{ margin-top:24px }
.main__card-account .main__card-content{ max-width:calc(100% - 48px - 24px) }

.main__card-staking .main__card-subcontent{ display:flex; flex-direction:column; align-items:flex-end }
.main__card-staking .main__card-subcontent .m15{ color:#66CC88 }
.main__card-staking .main__card-ico{ background:#40BF6A; background:linear-gradient(to bottom, #66CC88, #40BF6A); }

.main-transaction-loader{ width:100%; display:flex; align-items:center; padding:12px 16px; border-radius:16px; background:#1F1F1F }
.main-transaction-loader + .main-transaction-loader{ margin-top:5px }
.main-transaction-loader__ico{ width:48px; min-width:48px; height:48px; background:#292929; border-radius:50% }
.main-transaction-loader__data{ padding-left:14px; flex-grow:1 }
.main-transaction-loader__data > div{ background:#292929; border-radius:6px }
.main-transaction-loader__data > div:nth-child(1){ width:52px; height:20px }
.main-transaction-loader__data > div:nth-child(2){ width:127px; height:16px; margin-top:5px }
.main-transaction-loader__amount{ display:flex; flex-direction:column; align-items:flex-end }
.main-transaction-loader__amount > div{ background:#292929; border-radius:6px }
.main-transaction-loader__amount > div:nth-child(1){ width:93px; height:20px }
.main-transaction-loader__amount > div:nth-child(2){ width:46px; height:16px; margin-top:5px }

.account-transaction{ width:100%; display:flex; align-items:center; padding:12px 14px; border-radius:14px; background:#1F1F1F }
.account-transaction + .account-transaction{ margin-top:8px }
.account-transaction__ico{ width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center }
.account-transaction__ico svg{ width:24px; height:24px }
.account-transaction__data{ padding:0 12px; flex-grow:1 }
.account-transaction__data > div:nth-child(2){ margin-top:2px; color:#808080 }
.account-transaction__amount{ display:flex; flex-direction:column; align-items:flex-end }
.account-transaction__amount > div:nth-child(2){ margin-top:2px; color:#808080 }

.account-transaction__withdraw .account-transaction__ico{ background:rgba(48, 110, 232, .2) }
.account-transaction__withdraw .account-transaction__ico svg{ fill:#306EE8 }
.account-transaction__withdraw-wait .account-transaction__amount > div:nth-child(2){ color:#808080 }

.account-transaction__transfer .account-transaction__ico{ background:rgba(165, 10, 255, .2) }
.account-transaction__transfer .account-transaction__ico svg{ fill:#cd76ff }
.account-transaction__transfer-minus .account-transaction__amount > div:nth-child(2){ color:#fff }
.account-transaction__transfer-plus .account-transaction__amount > div:nth-child(1){ color:#66CC88 }
.account-transaction__transfer-plus .account-transaction__amount > div:nth-child(2){ color:#66CC88 }

.account-transaction__deposit .account-transaction__ico{ background:rgba(102, 204, 136, .2) }
.account-transaction__deposit .account-transaction__ico svg{ fill:#66CC88 }
.account-transaction__deposit .account-transaction__amount > div:nth-child(1){ color:#808080 }
.account-transaction__deposit-confirmation .account-transaction__amount > div:nth-child(2){ color:#fff }
.account-transaction__deposit-confirmed .account-transaction__amount > div:nth-child(1){ color:#66CC88 }
.account-transaction__deposit-confirmed .account-transaction__amount > div:nth-child(2){ color:#66CC88 }
.account-transaction__deposit-error .account-transaction__amount > div:nth-child(2){ color:#808080 }

.account-transaction__bank-card-issue .account-transaction__ico{ background:rgba(45, 195, 245, .2) }
.account-transaction__bank-card-issue .account-transaction__ico svg{ fill:#2DC3F5 }
.account-transaction__bank-card-issue-paid .account-transaction__amount > div:nth-child(2){ color:#fff }

.main__support-btn{ position: absolute; top: -100px; left: 16px; display:flex; align-items:center; border-radius:8px; height:36px; background:#30a2e6; padding:0 12px; color:#fff; font-size:12px; font-weight:500 }
.main__support-btn svg{ width:14px; min-width:14px; height:14px; fill:#fff; margin-right:8px }




/* PAGE WITHDRAW */
.page__withdraw{ padding-bottom:100px }
.withdraw-amount__top{ display:flex; align-items:center; justify-content: space-between; color:#808080; width:100%; max-width:100%; padding-top:48px }
.withdraw-amount__top-max{ display:flex; align-items:center }
.withdraw-amount__top-max > div:nth-child(1){ color:#66CC88; margin-right:8px }
.withdraw-amount__field{ display:flex; align-items:flex-end; width:100%; max-width:100% }
.withdraw-amount__field > input{ font-size:48px; font-weight:500; border:0; color:#fff; line-height:48px; padding:10px 0; background:transparent; height:72px; width:calc(100% - 75px); display:flex; align-items:center }
.withdraw-amount.invalid .withdraw-amount__field > input:not(:focus){ color:#FF3333 }
.withdraw-amount__field > label{ display: block; font-size:36px; font-weight:400; line-height:26px; color:#ccc; padding-bottom:18px }
.withdraw-amount__error{ display:flex; align-items:center; margin-top:24px; padding:12px 16px; border-radius:12px; background:#191919; margin-bottom:12px }
.withdraw-amount__error > div:nth-child(1){ width:24px; height:24px; background:url(img/alert_red.svg) no-repeat center / contain }
.withdraw-amount__error > div:nth-child(2){ padding-left:16px; color:#FF3333 }
.page__withdraw .select-container{ padding-top:24px }
.withdraw-wallet{ width:100%; display:flex; flex-direction: column; margin-top:24px }
.withdraw-wallet__container{ display:flex }
.withdraw-wallet textarea{ flex-grow:1; height: 72px; border-radius:16px; font-size:14px; font-weight:400; line-height: 140%; background:#191919; border-radius:16px; padding:12px 16px; font-family:'Roboto Mono',sans-serif; border:1px solid #191919; caret-color:#66CC88; transition:border-color .3s; color:#fff }
.withdraw-wallet textarea:placeholder{ color:#333333 }
.withdraw-wallet textarea:focus{ border-color:#66CC88 }
.withdraw-wallet.invalid textarea:not(:focus){ border-color:#FF3333 }
.withdraw-wallet__bar{ padding-left:16px; display:flex; flex-direction:column; align-items:center; justify-content: space-between; color:#66CC88 }
.withdraw-wallet__bar-scan{ width:24px; height:24px; fill:#66CC88 }
.withdraw-line{ display:flex; align-items:center; justify-content:space-between; margin-top:36px }
.withdraw-line > div:nth-child(2){ color:#66CC88 }
.withdraw-btn{ width:100%; margin-top:48px }




/* PAGE DEPOSIT */
.deposit-methods{ width:100%; padding:48px 16px }
.deposit-method{ width:100%; padding:12px 16px; border-radius:16px; background:#191919; border:1px solid #66CC88; display:flex; align-items:center; border:1px solid #191919; transition:border-color .3s }
.deposit-method + .deposit-method{ margin-top:8px }
.deposit-method.active{ border-color:#66CC88 }
.deposit-method__ico{ width:48px; height:48px; background:#292929; display:flex; align-items:center; justify-content:center; border-radius:50% }
.deposit-method__ico > svg{ width:24px; height:24px; fill:#808080 }
.deposit-method__data{ padding:0 16px; flex-grow:1 }
.deposit-method__data > div:nth-child(2){ margin-top:4px; color:#808080 }
.deposit-method__arrow{ width:24px; min-width: 24px; height:24px; fill:#66CC88; opacity:0; transition:opacity .3s }
.deposit-method.active .deposit-method__arrow{ opacity:1 }
.deposit-method-btn{ width:100%; margin-top:24px }

.deposit-method__usdt-trc20 .deposit-method__ico{ background:url(img/tether-circle_green.svg) no-repeat center / contain }

.page__deposit-usdt-trc20-loader{ padding-top:95px }
.deposit-usdt__container{ width:100%; display:flex; flex-direction:column; align-items:center; padding-top:48px }
.deposit-usdt__card{ width:264px; min-width:264px; padding:24px; border-radius:16px; background:#191919; display:flex; flex-direction:column; align-items:center; justify-content:center; align-items:center }
.page__deposit-usdt-trc20-loader .deposit-usdt__card{ height:264px }
.deposit-usdt__card-qr-loader{ width:88px; min-width:88px; height:88px; position:relative }
.deposit-usdt__card-qr-loader > div{ position:absolute; background:#66CC88; border-radius:99px; transition:width .5s, height .5s, top .5s, left .5s }
.deposit-usdt__card-qr-loader > div:nth-child(1),
.deposit-usdt__card-qr-loader > div:nth-child(3),
.deposit-usdt__card-qr-loader > div:nth-child(5){ width:28px; height:28px; left:8px; top:8px; border-radius:8px; border:4px solid #66CC88; background:transparent }
.deposit-usdt__card-qr-loader > div:nth-child(3){ left:auto; right:8px }
.deposit-usdt__card-qr-loader > div:nth-child(5){ top:auto; bottom:8px }
.deposit-usdt__card-qr-loader > div:nth-child(2),
.deposit-usdt__card-qr-loader > div:nth-child(4),
.deposit-usdt__card-qr-loader > div:nth-child(6){ width:8px; height:8px; left:18px; top:18px }
.deposit-usdt__card-qr-loader > div:nth-child(4){ left:auto; right:18px }
.deposit-usdt__card-qr-loader > div:nth-child(6){ top:auto; bottom:18px }
.deposit-usdt__card-qr-loader > div:nth-child(7){ width:4px; height:24px; top:10px; left:42px }
.deposit-usdt__card-qr-loader > div:nth-child(8){ width:10px; height:4px; top:30px; left:39px }
.deposit-usdt__card-qr-loader > div:nth-child(9){ width:24px; height:4px; top:40px; left:10px }
.deposit-usdt__card-qr-loader > div:nth-child(10){ width:4px; height:8px; top:40px; left:20px }
.deposit-usdt__card-qr-loader > div:nth-child(11){ width:4px; height:10px; top:40px; left:38px }
.deposit-usdt__card-qr-loader > div:nth-child(12){ width:24px; height:4px; top:46px; left:38px }
.deposit-usdt__card-qr-loader > div:nth-child(13){ width:4px; height:16px; top:46px; left:58px }
.deposit-usdt__card-qr-loader > div:nth-child(14){ width:4px; height:4px; top:38px; left:46px }
.deposit-usdt__card-qr-loader > div:nth-child(15){ width:12px; height:4px; top:40px; left:66px }
.deposit-usdt__card-qr-loader > div:nth-child(16){ width:4px; height:20px; top:40px; left:74px }
.deposit-usdt__card-qr-loader > div:nth-child(17){ width:4px; height:4px; top:56px; left:66px }
.deposit-usdt__card-qr-loader > div:nth-child(18){ width:14px; height:4px; top:54px; left:40px }
.deposit-usdt__card-qr-loader > div:nth-child(19){ width:4px; height:8px; top:54px; left:50px }
.deposit-usdt__card-qr-loader > div:nth-child(20){ width:4px; height:16px; top:62px; left:40px }
.deposit-usdt__card-qr-loader > div:nth-child(21){ width:14px; height:4px; top:66px; left:40px }
.deposit-usdt__card-qr-loader > div:nth-child(22){ width:26px; height:4px; top:74px; left:40px }
.deposit-usdt__card-qr-loader > div:nth-child(23){ width:12px; height:4px; top:66px; left:66px }
.deposit-usdt__card-qr-loader > div:nth-child(24){ width:4px; height:12px; top:66px; left:74px }

.qr-loader__step-1 > div:nth-child(7){ height:8px }
.qr-loader__step-1 > div:nth-child(8){ width:4px; top:22px; left:42px }
.qr-loader__step-1 > div:nth-child(9){ width:14px }
.qr-loader__step-1 > div:nth-child(11){ height:18px; top:32px }
.qr-loader__step-1 > div:nth-child(12){ width:16px }
.qr-loader__step-1 > div:nth-child(13){ height:12px }
.qr-loader__step-1 > div:nth-child(14){ width:18px; left:31px }
.qr-loader__step-1 > div:nth-child(15){ width:4px }
.qr-loader__step-1 > div:nth-child(16){ height:10px }
.qr-loader__step-1 > div:nth-child(17){ width:12px }
.qr-loader__step-1 > div:nth-child(18){ width:22px }
.qr-loader__step-1 > div:nth-child(19){ height:4px }
.qr-loader__step-1 > div:nth-child(20){ height:12px; top:66px }
.qr-loader__step-1 > div:nth-child(21){ width:22px }
.qr-loader__step-1 > div:nth-child(22){ width:11px }
.qr-loader__step-1 > div:nth-child(23){ width:4px }

.qr-loader__step-2 > div:nth-child(7){ height:24px }
.qr-loader__step-2 > div:nth-child(8){ width:10px; left:39px }
.qr-loader__step-2 > div:nth-child(10){ width:9px; height:4px }
.qr-loader__step-2 > div:nth-child(11){ height:12px; top:38px }
.qr-loader__step-2 > div:nth-child(12){ width:24px; left:30px }
.qr-loader__step-2 > div:nth-child(13){ height:4px; top:54px }
.qr-loader__step-2 > div:nth-child(14){ width:8px; left:45px }
.qr-loader__step-2 > div:nth-child(15){ width:13px; left:57px }
.qr-loader__step-2 > div:nth-child(16){ height:20px }
.qr-loader__step-2 > div:nth-child(18){ width:14px }
.qr-loader__step-2 > div:nth-child(20){ height:4px; top:74px }
.qr-loader__step-2 > div:nth-child(21){ width:18px }
.qr-loader__step-2 > div:nth-child(22){ width:23px; left:47px }
.qr-loader__step-2 > div:nth-child(23){ width:8px; left:62px }
.qr-loader__step-2 > div:nth-child(24){ height:14px; top:64px }

.deposit-usdt__commission{ width:264px; margin-top:16px; padding:16px; border-radius:16px; background:#191919; color:#CCCCCC; text-align:center }
.deposit-usdt__commission span{ color:#66CC88 }
.deposit-usdt__description{ width:264px; margin-top:24px; text-align:center }
.deposit-usdt__card-description{ margin-top:16px; color:#808080; display:flex; align-items:center }
.deposit-usdt__card-description svg{ width:16px; height:16px; margin-left:10px; fill:#808080 }
.deposit-usdt__card-wallet{ padding-top:8px; font-size:12px; font-weight:400; line-height:140%; color:#fff; max-width:195px; font-family:'Roboto Mono',sans-serif; word-break: break-word; text-align:center; letter-spacing: 0.08em }





/* CARDS PAGE */
.page__cards{ padding-top:16px }
.page__cards .page-title{ padding:0 }
.cards-main{ width:100%; padding:48px 0 36px; display:flex; flex-direction:column; align-items:center }

.cards-stat-container{ margin:0 -8px 0; width:calc(100% + 16px); display:flex }
.cards-stat{ width:50%; padding:0 8px; display:flex }
.cards-stat > div{ width:100%; background:#191919; border-radius:16px; padding:16px 24px; color:#fff; display:flex; flex-direction:column }
.cards-stat__amount span{ color:#808080 }
.cards-stat__name{ margin-top:4px }
.cards-stat__description{ display:flex; align-items:flex-end; flex-grow:1; color:#808080; padding-top:16px }

.cards-stat__cashback .cards-stat__amount{ color:#66CC88 }
.cards-stat__cashback .cards-stat__name{ color:#66CC88 }

.cards-stat-limit{ width:100%; margin-top:16px; border-radius:16px; padding:16px 24px; background:#191919; display:flex; align-items:center }
.cards-stat-limit__left{ flex-grow:1; display:flex; flex-direction:column; align-items:flex-start }
.cards-stat-limit__left > div:nth-child(2){ margin-top:4px; color:#808080 }
.cards-stat-limit__right{ display:flex; flex-direction:column; align-items:flex-end; color:#66CC88 }
.cards-stat-limit__bar-container{ height:14px; display:flex; align-items:center; width:96px; margin-top:4px }
.cards-stat-limit__bar{ height:4px; width:100%; border-radius:99px; background:#000; position:relative; overflow:hidden }
.cards-stat-limit__bar > div{ position:absolute; left:0; top:0; bottom:0; border-radius:99px; width:0; background:#66CC88 }

.cards-stat-limit__info{ width:24px; min-width:24px; height:24px; margin-left:16px; fill:#4D4D4D }

.cards-list{ width:100% }
.cards-list__title{ text-transform:uppercase; color:#808080 }
.cards-list__container{ padding-top:24px }

.cards-list__loader{ width:100%; padding:16px 20px; border-radius:16px; background:#191919 }
.cards-list__loader + .cards-list__loader{ margin-top:8px }
.cards-list__loader-top{ display:flex; align-items:center }
.cards-list__loader-top-ico{ width:77px; height:48px; border-radius:6px; background:#292929 }
.cards-list__loader-top-data{ padding-left:16px }
.cards-list__loader-top-data > div:nth-child(1){ width:120px; height:15px; border-radius:4px; background:#292929 }
.cards-list__loader-top-data > div:nth-child(2){ display:flex; align-items:center; margin-top:11px }
.cards-list__loader-top-data > div:nth-child(2) > div:nth-child(1){ width:90px; height:17px; border-radius:4px; background:#292929 }
.cards-list__loader-top-data > div:nth-child(2) > div:nth-child(2){ width:20px; height:20px; border-radius:4px; background:#292929; margin-left:8px }
.cards-list__loader-bottom{ display:flex; align-items:center; margin-top:12px }
.cards-list__loader-bottom > div:nth-child(1){ width:49px; height:20px; border-radius:4px; background:#292929 }
.cards-list__loader-bottom > div:nth-child(2){ width:28px; height:20px; border-radius:4px; background:#292929; margin-left:8px }

.cards-list__processing{ width:100%; padding:16px 20px; border-radius:16px; background:#191919; color:#fff }
.cards-list__processing-top{ display:flex; align-items:center }
.cards-list__processing-top-ico{ width:48px; height:30px; border:1px solid #000; background:#000; position:relative; overflow:hidden; border-radius:4px }
.cards-list__processing-top-ico > div:nth-child(1){ position:absolute; z-index:1; width:31px; height:34px; top:50%; left:40%; transform:translate(-50%, -50%); background:url(img/x-logo_gray.svg) no-repeat center / contain }
.cards-list__processing-top-ico > div:nth-child(2){ position:absolute; z-index:2; top:5px; left:3px; font-size:8px; font-weight:500; line-height:110% }
.cards-list__processing-top > div:nth-child(2){ padding-left:16px }
.cards-list__processing-bottom{ margin-top:12px; color:#808080 }

.cards-list__card{ width:100%; padding:16px; border-radius:16px; background:#191919; display:flex; align-items:center; color:#fff }
.cards-list__processing + .cards-list__card, .cards-list__card + .cards-list__card{ margin-top:8px }
.cards-list__card-body{ flex-grow:1; padding-right:10px; max-width:calc(100% - 24px) }
.cards-list__card-top{ display:flex; align-items:center }
.cards-list__card-ico{ width:77px; height:48px; border-radius:6px; background:#000; border:2px solid #000; position:relative; overflow:hidden }
.cards-list__card-ico > div:nth-child(1){ position:absolute; z-index:1; top: 50%; left: 50%; width:50px; height:54px; transform:translate(-50%, -50%); background:url(img/x-logo_gray.svg) no-repeat center / contain }
.cards-list__card-ico > div:nth-child(2){ position:absolute; z-index:2; top:8px; left:5px; font-size:12px; font-weight:500; line-height:110% }
.cards-list__card-data{ padding-left:16px }
.cards-list__card-title{ display:flex; align-items:center; margin-top:8px }
.cards-list__card-title > div:nth-child(2){ color:#808080 }
.cards-list__card-status{ display:flex; align-items:center; padding:0 6px; height:20px; border-radius:4px; font-size:10px; font-weight:500; margin-right:8px }
.cards-list__card-status-active{ color:#fff; background:#66CC88 }
.cards-list__card-status-locked{ color:#fff; background:#FF3333 }
.cards-list__card-status-archived{ color:#fff; background:#808080 }
.cards-list__card-tags{ display:flex; align-items:center; flex-wrap:wrap; padding:4px 0 0; width:calc(100% + 8px); margin-left:-4px; margin-right:-4px }
.cards-list__card-tags > div{ padding:8px 4px 0 }
.cards-list__card-tag, .cards-list__card-tag-new{ padding:0 8px; display:flex; align-items:center; height:24px; border-radius:4px; border:1px solid #808080; color:#808080; font-size:11px; font-weight:500 }
.cards-list__card-tag-new{ color:#66CC88; border-color:#66CC88 }
.cards-list__card-arrow{ width:24px; height:24px; fill:#808080 }

.cards-list__card-archived .cards-list__card-data > div:nth-child(1){ text-decoration: line-through; color: #808080 }

.cards-list__empty{ width:100%; height:60px; border-radius:16px; background:#191919; display:flex; align-items:center; justify-content:center; text-align:center; padding:16px; color:#fff }

.modal-new-card-tag > div{ width:343px }
.modal-edit-card-tag > div{ width:343px }
.modal-edit-card-tag .modal-btns > div{ width:50% }

.cards-issue-btn-block{ width:100%; padding:12px 16px; background:#1A1A1A; border-radius:16px; margin-bottom:16px; display:flex; align-items:center; justify-content:center }
.cards-issue-btn-block svg{ width:24px; min-width:24px; height:24px; fill:#66CC88; margin-right:16px }

.modal-limits > div{ width:343px }




/* CARDS ISSUE PAGE */
.page__cards-issue{ padding-top:16px }
.cards-count__container{ padding:48px 0 36px }
.cards-count{ padding:16px 24px 0; border-radius:16px; background:#191919 }
.cards-count__top{ display:flex; align-items:center; justify-content: space-between; color:#808080 }
.cards-count__top > div:nth-child(2){ display:flex; align-items:center; }
.cards-count__top > div:nth-child(2) > div:nth-child(1){ color:#66CC88; margin-right:4px }
.cards-count__bottom{ display:flex; align-items:center }
.cards-count__btn{ width:48px; height:48px; border:1px solid #66CC88; display:flex; align-items:center; justify-content:center; border-radius:12px; transition:border-color .3s }
.cards-count__btn svg{ width:24px; min-width:24px; height:24px; fill:#66CC88; transition:fill .3s }
.cards-count__btn-disabled{ border-color:#808080 }
.cards-count__btn-disabled svg{ fill:#808080 }
.cards-count__bottom input{ flex-grow:1; width: calc(100% - 48px - 48px); text-align:center; height:80px; display:flex; align-items:center; justify-content:center; background:transparent; border:0; font-size:48px; font-weight:500; color:#fff; transition:color .3s }
.cards-count.invalid .cards-count__bottom input{ color:#FF3333 }
.cards-count__error{ margin-top:16px; padding:12px 16px; border-radius:12px; background:#191919; display:flex; align-items:center; color:#FF3333 }
.cards-count__error > div:nth-child(1){ background: url(img/alert_red.svg) no-repeat center / contain; width:24px; min-width:24px; height:24px; margin-right:16px }
.cards-issue__tariff{ margin-top:16px; width:100%; padding:16px 24px; border-radius:16px; background:#191919; border:1px solid #191919; transition:border-color .3s }
.cards-issue__tariff.active{ border-color:#66CC88 }
.cards-issue__tariff-top{ display:flex; align-items:center; padding-bottom:12px; position:relative }
.cards-issue__tariff-top-text{ padding:0 34px 0 16px }
.cards-issue__tariff-top-text > div:nth-child(1){ color:#808080; margin-bottom:2px }
.cards-issue__tariff-top-arrow{ position:absolute; width:24px; height:24px; top:0; right:0; fill:#66CC88; opacity:0; transition:opacity .3s }
.cards-issue__tariff.active .cards-issue__tariff-top-arrow{ opacity:1 }
.cards-issue__tariff-bottom{ padding-top:12px; border-top:1px solid #333333 }
.cards-issue__tariff-line{ display:flex }
.cards-issue__tariff-line + .cards-issue__tariff-line{ margin-top:8px }
.cards-issue__tariff-line > div{ width:50% }
.cards-issue__tariff-line > div:nth-child(1){ color:#808080; padding-right:5px }
.cards-issue__tariff-line > div:nth-child(2){ padding-left:5px }

.cards-issue__price{ width:100%; margin-top:16px; padding:0 24px; background:#191919; border-radius:16px }
.cards-issue__price-line{ display:flex; align-items:center; justify-content:space-between; padding-bottom:16px; padding-top:16px }
.cards-issue__price-line + .cards-issue__price-line{ border-top:1px solid #262626 }

.cards-issue-btn{ width:100%; margin-top:32px }




/* PAGE CARD */
.page__card-loader{ padding-top:64px; align-items:center }

.page__card-loader2{ align-items:center; justify-content:center }
.card-loader2__ico{ width:48px; min-width:48px; height:48px; background:url('img/loader_green.webp') no-repeat center / contain; animation:rotate 1.5s linear infinite }

.bank-card, .bank-card-backside{ position:relative; width:300px; height:178px; border-radius:16px; border:2px solid #1A1A1A; background:#000; overflow:hidden; color:#fff }
.bank-card > div:nth-child(1){ z-index: 1; width:178px; height:192px; background:url(img/x-logo_green.svg) no-repeat center / contain; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%) }
.bank-card > div:nth-child(2){ z-index: 2; width:48px; height:16px; background:url(img/visa_white.svg) no-repeat center / contain; position:absolute; top:27px; right:24px }
.bank-card > div:nth-child(3){ z-index:2; position:absolute; left:24px; top:24px }
.bank-card > div:nth-child(4){ z-index:2; position:absolute; right:24px; bottom:24px; text-align:right; max-width:80px }

.bank-card.before-animation-reverse{ transform: rotateY(90deg) }
.bank-card.anim{ animation:bank-card-anim .4s linear forwards }
.bank-card.hidden{ display:none; }
@keyframes bank-card-anim{
	from{ transform: rotateY(0deg) }
	to{ transform: rotateY(90deg) }
}

.bank-card.anim-reverse{ animation:bank-card-anim-reverse .4s linear forwards }
@keyframes bank-card-anim-reverse{
	from{ transform: rotateY(90deg) }
	to{ transform: rotateY(0deg) }
}

.bank-card-backside{ display:none; flex-direction:column; justify-content:flex-end; padding:24px }
.bank-card-backside__fields{ display:flex; align-items:center; margin:16px -8px 0 }
.bank-card-backside__fields > div{ width:50%; padding:0 8px }
.bank-card-backside__field{ position: relative; height:36px; display:flex; align-items:center; padding:0 42px 0 16px; background:#191919; border-radius:8px }
.bank-card-backside__field svg{ position:absolute; width: 16px; height: 16px; top:50%; right:16px; transform:translateY(-50%); fill:#808080 }
.bank-card-backside__hide{ position: absolute; z-index: 10; padding:10px; top:14px; right:14px }
.bank-card-backside__show-3ds{ position: absolute; z-index: 10; padding:10px; top:14px; left:14px }

.bank-card-backside.before-animation{ display:flex; transform: rotateY(90deg) }
.bank-card-backside.anim{ animation:bank-card-backside-anim .4s linear forwards }
.bank-card-backside.showed{ display:flex }
@keyframes bank-card-backside-anim{
	from{ transform:rotateY(90deg) }
	to{ transform:rotateY(0deg) }
}

.bank-card-backside.anim-reverse{ animation:bank-card-backside-anim-reverse .4s linear forwards }
@keyframes bank-card-backside-anim-reverse{
	from{ transform:rotateY(0deg) }
	to{ transform:rotateY(90deg) }
}

.bank-card-backside__otp-bank1-notification{ position:absolute; left:0; top:0; right:0; bottom:0; z-index:15; background:#000; display:flex; flex-direction: column; align-items:center; justify-content:center }
.bank-card-backside__otp-bank1-notification > div{ width:100% }
.bank-card-backside__otp-bank1-notification > div:nth-child(1){ font-size:14px; text-transform:uppercase; font-weight:500; text-align:center }
.bank-card-backside__otp-bank1-notification > div:nth-child(2){ font-size:12px; font-weight:400; text-align:center; margin-top:10px; padding:0 16px }
.bank-card-backside__otp-bank1-notification > div:nth-child(3){ display:flex; align-items:center; justify-content:center; margin-top:15px }
.bank-card-backside__otp-bank1-notification > div:nth-child(3) > div:nth-child(1){ width:90px }
.bank-card-backside__otp-bank1-notification > div:nth-child(3) > div:nth-child(2){ font-size:12px; font-weight:500; margin-left:20px; white-space:nowrap }

.page__card{ padding-top:64px; align-items:center; }

.bank-card-btns{ margin:36px -8px 0; width: calc(100% + 16px); display:flex; align-items:center }
.bank-card-btn{ padding:0 8px; width:50% }
.bank-card-btn > div{ width:100% }

.bank-card-line{ width:calc(100% + 16px); display:flex; padding-bottom:16px }
.bank-card-line > div{ width:50%; padding:16px 8px 0; display:flex; flex-direction:column }

.bank-card-balance{ display:flex; flex-direction:column; flex-grow:1 }
.bank-card-balance .t12, .bank-card-limit .t12{ color:#808080 }
.bank-card-balance .m14, .bank-card-limit .m14{ margin-top:4px }
.bank-card-balance .btn-sm, .bank-card-limit .btn-sm{ width:100%; margin-top:16px }
.bank-card-balance .m14{ flex-grow:1 }
.bank-card-limit-bar{ width:100%; margin-top:6px; height:5px; border-radius:99px; overflow:hidden; background:#292929; position:relative }
.bank-card-limit-bar > div{ position:absolute; left:0; top:0; bottom:0; width:0; background:#66CC88 }

.bank-card-notification + .bank-card-tariff{ margin-top:16px }
.bank-card-tariff__top{ display:flex; align-items:center; padding-bottom:12px }
.bank-card-tariff__top-data{ flex-grow:1; padding-left:16px }
.bank-card-tariff__top-data > div:nth-child(1){ margin-bottom:2px }
.bank-card-tariff__middle{ padding:12px 0; border-top:1px solid #333333 }
.bank-card-tariff__line{ display:flex }
.bank-card-tariff__line + .bank-card-tariff__line{ margin-top:8px }
.bank-card-tariff__line > div{ width:50% }
.bank-card-tariff__line > div:nth-child(2){ text-align:right }
.bank-card-tariff__bottom{ padding-top:12px; border-top:1px solid #333333 }


.modal-transfer-card > div{ width:343px; padding-top:10px }
.transfer-card-container{ width:100%; border-radius:12px; border:1px solid #333333; padding:24px 16px; margin-top:36px }
.transfer-card-container-line{ display:flex; align-items:center }
.transfer-card-container-line > div:nth-child(1){ width:56px }
.transfer-card-container-line > svg{ width:20px; height:20px; fill:#fff; margin-right:16px }
.transfer-card-container-change{ width:100%; display:flex; align-items:center; justify-content:center; padding:16px 0; position:relative }
.transfer-card-container-change::before{ content:''; display:block; position:absolute; z-index:1; left:0; right:0; top:50%; transform:translateY(-50%); height:1px; background:#333333 }
.transfer-card-container-change-btn{ width:36px; height:36px; position:relative; z-index:2; border-radius:99px; border:1px solid #333333; background:#191919; display:flex; align-items:center; justify-content:center }
.transfer-card-container-change-btn svg{ width:20px; height:20px; fill:#fff }
.transfer-card-input{ position:relative; width:100%; margin-top:16px }
.transfer-card-input input{ height: 48px; width:100%; border:0; border-radius:12px; color:#fff; background:#000; padding:0 16px; font-size:14px; font-weight:500 }
.transfer-card-input input:placeholder{ color:#333333 }
.transfer-card-input label{ position:absolute; top:50%; transform:translateY(-50%); right:16px; z-index:2; display:block }
.transfer-card-btn{ width:100%; margin-top:36px }
.transfer-card-helper{ display:flex; padding-top:10px; width:100% }
.transfer-card-helper > div:nth-child(1){ flex-grow:1; padding-right:16px }
.transfer-card-helper > div:nth-child(2){ white-space:nowrap }

.bank-card-notification{ width:100%; margin-top:16px; display:flex; padding:16px 24px; background:#191919; border-radius:16px; color:#FF3333 }
.bank-card-backside + .bank-card-notification{ margin-top:48px }
.bank-card-notification > svg{ width:24px; min-width:24px; height:24px; fill:#FF3333 }
.bank-card-notification > div{ padding-left:16px }

.modal-3ds-card > div{ width:343px }
.modal-3ds-field{ position: relative; width:100%; margin-top:36px; background: #000; border-radius:12px; padding:16px; color:#fff; font-size:24px }
.modal-3ds-field svg{ width:20px; height:20px; position:absolute; top:50%; transform: translateY(-50%); right:16px; fill:#fff }
.modal-3ds-field + .modal-close-btn{ margin-top:36px }

.list-card-transactions-loader, .list-card-transactions{ margin-top:16px; color:#fff }
.list-card-transaction-loader, .list-card-transaction{ width:100%; padding:8px 0; display:flex; align-items:center }
.list-card-transaction-loader + .list-card-transaction-loader, .list-card-transaction + .list-card-transaction{ border-top:1px solid #333; margin-top:8px; padding-top:16px }
.list-card-transaction-loader__left{ flex-grow:1 }
.list-card-transaction-loader__left > div:nth-child(1){ width:141px; height:20px; background:#292929; border-radius:4px }
.list-card-transaction-loader__left > div:nth-child(2){ width:96px; height:14px; background:#292929; border-radius:4px; margin-top:4px }
.list-card-transaction-loader__right{ display:flex; flex-direction:column; align-items:flex-end }
.list-card-transaction-loader__right > div:nth-child(1){ width:71px; height:20px; background:#292929; border-radius:4px }
.list-card-transaction-loader__right > div:nth-child(2){ width:50px; height:14px; background:#292929; border-radius:4px; margin-top:4px }

.list-card-transaction{ display:flex; align-items:center }
.list-card-transaction__left{ flex-grow:1 }
.list-card-transaction__right{ display:flex; flex-direction:column; align-items:flex-end; text-align:right; white-space:nowrap }
.list-card-transaction__left > div:nth-child(2), .list-card-transaction__right > div:nth-child(2){ margin-top:4px }




/* PROFILE PAGE */
.page__profile{ padding-top:64px; align-items:center }

.profile-name{ display:flex; align-items:center; max-width:100%; overflow: hidden; border-radius:99px; padding:12px 24px 12px 16px; border-radius:99px; background:#1A1A1A; margin-top:12px }
.profile-name > div:nth-child(1){ width:48px; min-width:48px; height:48px; border-radius:99px; display:flex; align-items:center; justify-content: center; background:#333333 }
.profile-name > div:nth-child(1) svg{ width:24px; height:24px; fill:#fff }
.profile-name > div:nth-child(2){ padding-left:14px; padding-right:14px; width:calc(100% - 48px - 24px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.profile-name > svg{ width:24px; height:24px; fill:#808080 }

.profile-card{ width: 100%; padding:12px 16px; display:flex; align-items:center; border-radius:16px; background:#1A1A1A; position:relative }
.profile-name + .profile-card{ margin-top:56px }
.profile-card + .profile-card{ margin-top:16px }
.profile-card__ico{ width:48px; min-width:48px; height:48px; border-radius:99px; background:#333333; display:flex; align-items:center; justify-content:center }
.profile-card__ico svg{ width:24px; height:24px; fill:#fff }
.profile-card__data{ padding:0 16px 0 14px; flex-grow:1 }
.profile-card__title{ display:flex; align-items:center }
.profile-card__tag{ display:flex; align-items:center; padding:0 6px; height:18px; border-radius:4px; margin-left:6px; border:1px solid transparent; background:transparent }
.profile-card__tag-green{ background:#66CC88; border-color:#66CC88; color:#fff }
.profile-card__tag-red{ background:#FF3333; border-color:#FF3333; color:#fff }
.profile-card__tag-gray{ border-color:#808080; color:#808080 }
.profile-card__description{ margin-top:2px; color:#808080 }
.profile-card__ico-right, .profile-card__ico-right-green{ width:24px; min-width:24px; height:24px; fill:#808080 }
.profile-card__ico-right-green{ fill:#66CC88 }

.profile-card-kyc-1, .profile-card-email{ border-bottom-left-radius:0; border-bottom-right-radius:0 }
.profile-card-kyc-2, .profile-card-email-verification{ border-top-left-radius:0; border-top-right-radius:0; margin-top:0!important }
.profile-card-kyc-2::before, .profile-card-email-verification::before{ content:''; display:block; position:absolute; left:16px; right:16px; top:0; height:1px; background:#262626 }

.profile-close{ width:100%; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-top:16px; background:#1A1A1A }

.modal-activation > div{ width:343px }
.modal-activation .modal-btns > div{ width:50% }