html {
    display: flex;
    min-height: 100%;
    box-sizing: border-box;
    color: #222;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: .01em;
    line-height: 1.5;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    text-size-adjust: none
}

body {
    background-color: #fff
}

@media (min-width: 992px) {
    body {
        background-color:#f6f8fa
    }
}

body,html {
    overflow: hidden;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0
}
.message {
    margin: 10px 0;
    padding: 10px;
    border-radius: 5px;
    font-size: 14px;
}
.message.error {
    background-color: #f8d7da;
    color: #842029;
    border: 1px solid #f5c2c7;
}
.message.success {
    background-color: #d1e7dd;
    color: #0f5132;
    border: 1px solid #badbcc;
}
.notification1{
    width: 30px;
    margin-left: auto;  
    margin-right: 0;
    margin-top: -80px;
    margin-bottom: 50px;
    cursor: pointer;

}

*,::after,::before {
    box-sizing: inherit;
    outline: 0;
    -webkit-tap-highlight-color: transparent
}

    /* Yükleme ekranı stili */
    #loading {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #2c2c2c; /* Arka plan rengi */
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        transition: transform 1s ease-out, opacity 1s ease-out;
      }
  
      /* SaÄŸdan kaybolan animasyon */
      #loading.slide-out {
        transform: translateX(100%); /* Sağ tarafa kaydır */
        opacity: 0; /* Şeffaf hale getir */
      }
  
      /* Yükleme ikonu */
      #loading img {
        width: 100px; /* Ä°konun boyutu */
        animation: bounce 1.5s infinite;
      }
  
      /* Basit animasyon */
      @keyframes bounce {
        0%, 100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-20px);
        }
      }
  
      /* Sayfa içeriği gizli başlar */
      #content {
        display: none;
      }

      @media (max-width: 768px) { /* 768px genişlik altındaki ekranlar için */
        .create {
            max-height: 800px; /* Formun maksimum yüksekliği */
            overflow-y: auto; /* Dikey kaydırmayı etkinleştir */
            overflow-x: hidden; /* Yatay kaydırmayı kapat */
            padding: 10px; /* İç boşluk */
            box-sizing: border-box; /* Çerçeve ve padding dahil */
        }
    }
button,input,select {
    display: block;
    padding: 0;
    border: none;
    margin: 0;
    background: 0 0;
    color: inherit;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit
}

a {
    color: #01842e;
    cursor: pointer;
    text-decoration: none
}

@media (hover: hover) {
    a:hover {
        color:#017027
    }
}

a:active {
    color: #016323
}

img,svg {
    display: block
}

.error {
    height: 100%
}

.error__container {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    padding: 2.5rem 1.5rem;
    padding: 2.5rem max(1.5rem,env(safe-area-inset-right)) 2.5rem max(1.5rem,env(safe-area-inset-left));
    background-color: #2c3832;
    overflow-y: auto
}

.error__frame {
    display: flex;
    width: 100%;
    flex-direction: column;
    flex-grow: 1;
    align-items: center;
    margin-bottom: 4rem
}

@media (min-width: 992px) {
    .error__frame {
        justify-content:center
    }
}

.error__logo-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
    margin-bottom: 4rem
}

@media (min-width: 992px) {
    .error__logo-wrapper {
        flex-grow:0
    }
}

.error__logo {
    width: 10rem
}

.error__error {
    display: flex;
    width: 100%;
    flex-direction: column;
    text-align: center
}

@media (min-width: 992px) {
    .error__error {
        width:auto;
        width: 25rem
    }
}

.error__title {
    font-size: 1.5rem;
    letter-spacing: 0;
    line-height: 1.2;
    font-weight: 500;
    margin-bottom: 1rem;
    color: #fff
}

.error__message {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5;
    color: #fff
}

.error__copyright {
    font-size: .75rem;
    letter-spacing: .03em;
    line-height: 1.5;
    color: #fff
}

.noscript {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    text-align: center
}

.noscript__title {
    font-size: 1.5rem;
    letter-spacing: 0;
    line-height: 1.2;
    font-weight: 500
}

.noscript__message {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5
}
.slide-right-leave-active {
    overflow: hidden;
    transition-duration: .1s
}

.slide-right-enter-active {
    overflow: hidden;
    transition-duration: .2s
}

.slide-right-enter-from [data-transition] {
    opacity: 0;
    transform: translate(-2rem)
}

.slide-right-enter-active [data-transition] {
    transition: all .1s ease-in .1s
}

.slide-right-leave-active [data-transition] {
    transition: all .1s ease-out
}

.slide-right-leave-to [data-transition] {
    opacity: 0;
    transform: translate(2rem)
}

.slide-left-leave-active {
    overflow: hidden;
    transition-duration: .1s
}

.slide-left-enter-active {
    overflow: hidden;
    transition-duration: .2s
}

.slide-left-enter-from [data-transition] {
    opacity: 0;
    transform: translate(2rem)
}

.slide-left-enter-active [data-transition] {
    transition: all .1s ease-in .1s
}

.slide-left-leave-active [data-transition] {
    transition: all .1s ease-out
}

.slide-left-leave-to [data-transition] {
    opacity: 0;
    transform: translate(-2rem)
}

.modal-transition-enter-active {
    transition: all .2s ease-in
}

.modal-transition-enter-from,.modal-transition-leave-to {
    opacity: 0;
    transform: scale(1.1)
}

.modal-transition-leave-active {
    transition: all .1s ease-out
}

@keyframes scale-dot {
    50% {
        transform: scale(1.4)
    }
}

@keyframes pulse-3 {
    50%,to {
        opacity: .2
    }
}

@keyframes pulse-4 {
    33%,to {
        opacity: .2
    }
}

@keyframes shake-x {
    10%,30%,50%,70%,90% {
        transform: translate(-.625rem)
    }

    20%,40%,60%,80% {
        transform: translate(.625rem)
    }
}

@keyframes rotation180 {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(180deg)
    }
}

@keyframes mecto-icon {
    0% {
        opacity: 1;
        transform: scale(.5)
    }

    to {
        opacity: 0;
        transform: translateY(-4.5rem) scale(2)
    }
}

.cs-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem
}

.cs-loader__dot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background-color: #616763
}

.cs-loader__dot:nth-child(1) {
    animation: pulse-3 .4s ease-in-out alternate infinite
}

.cs-loader__dot:nth-child(2) {
    animation: pulse-3 .4s ease-in-out alternate .2s infinite
}

.cs-loader__dot:nth-child(3) {
    animation: pulse-3 .4s ease-in-out alternate .4s infinite
}

.cs-loader--primary .cs-loader__dot {
    background-color: #222
}

.cs-loader--primary-light .cs-loader__dot {
    background-color: #01842e
}

.cs-loader--danger-light .cs-loader__dot {
    background-color: #dd230e
}

.cs-button--circle,.cs-button--danger-link,.cs-button--white-link,.cs-button--primary-link,.cs-button--danger-light,.cs-button--primary-light,.cs-button--secondary,.cs-button--primary,.cs-button--base {
    display: flex;
    overflow: hidden;
    height: 3.5rem;
    align-items: center;
    justify-content: center;
    padding: 0 1.25rem;
    border-radius: .625rem;
    gap: 1rem;
    line-height: 1.2;
    transition: background-color .15s ease-in-out,color .15s ease-in-out;
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5;
    font-weight: 500
}

.cs-button--circle:disabled,.cs-button--danger-link:disabled,.cs-button--white-link:disabled,.cs-button--primary-link:disabled,.cs-button--danger-light:disabled,.cs-button--primary-light:disabled,.cs-button--secondary:disabled,.cs-button--primary:disabled,.cs-button--base:disabled {
    opacity: .4
}

.cs-button--circle svg,.cs-button--danger-link svg,.cs-button--white-link svg,.cs-button--primary-link svg,.cs-button--danger-light svg,.cs-button--primary-light svg,.cs-button--secondary svg,.cs-button--primary svg,.cs-button--base svg {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0
}

.cs-button:disabled {
    pointer-events: none
}

.cs-button__circle {
    display: flex;
    width: 3.5rem;
    height: 3.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #f6f8fa
}

@media (hover: hover) {
    .cs-button__circle:hover {
        background-color:#e6ecf1
    }
}

.cs-button__circle:active {
    background-color: #d6dfe8
}

.cs-button--primary {
    background-color: #68c481
}

@media (hover: hover) {
    .cs-button--primary:hover {
        background-color:#52bc6f
    }
}

.cs-button--primary:active {
    background-color: #48b766
}

.cs-button--secondary {
    background-color: #f6f8fa
}

@media (hover: hover) {
    .cs-button--secondary:hover {
        background-color:#e6ecf1
    }
}

.cs-button--secondary:active {
    background-color: #e0e7ee
}

.cs-button--primary-light {
    background-color: #f0f9f2;
    color: #01842e
}

@media (hover: hover) {
    .cs-button--primary-light:hover {
        background-color:#dff2e3
    }
}

.cs-button--primary-light:active {
    background-color: #d8efdd
}

.cs-button--danger-light {
    background-color: #fcf5ef;
    color: #dd230e
}

@media (hover: hover) {
    .cs-button--danger-light:hover {
        background-color:#f8e8da
    }
}

.cs-button--danger-light:active {
    background-color: #f7e3d2
}

.cs-button--primary-link {
    background-color: transparent;
    color: #01842e
}

@media (hover: hover) {
    .cs-button--primary-link:hover {
        color:#017729
    }
}

.cs-button--primary-link:active {
    color: #017027
}

.cs-button--white-link {
    background-color: transparent;
    color: #fff
}

@media (hover: hover) {
    .cs-button--white-link:hover {
        color:#e6e6e6
    }
}

.cs-button--white-link:active {
    color: #d9d9d9
}

.cs-button--danger-link {
    background-color: transparent;
    color: #dd230e
}

@media (hover: hover) {
    .cs-button--danger-link:hover {
        color:#c7200d
    }
}

.cs-button--danger-link:active {
    color: #bc1e0c
}

.cs-button--circle {
    height: auto;
    flex: 1 0 4rem;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0;
    font-weight: 400;
    gap: .5rem;
    overflow-wrap: anywhere;
    font-size: .875rem;
    letter-spacing: .02em;
    line-height: 1.5
}

.cs-button--small {
    height: 2.75rem
}

.cs-button--loading {
    pointer-events: none
}

.cs-button-group {
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

.cs-button-group--horizontal {
    flex-direction: row
}

.cs-button-group--circle {
    flex-direction: row;
    justify-content: space-around;
    gap: .25rem
}

.cs-modal__overlay {
    position: fixed;
    z-index: 300;
    top: -1px;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    padding: 1.5rem;
    background-color: #0000004d;
    overflow-y: auto
}

.cs-modal__container {
    display: flex;
    width: 100%;
    flex: 0 1 25rem;
    flex-direction: column;
    padding: 1.5rem;
    border-radius: .625rem;
    margin: auto;
    background-color: #fff;
    gap: 1.5rem
}

.cs-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem
}

.cs-modal__title {
    font-size: 1.5rem;
    letter-spacing: 0;
    line-height: 1.2;
    font-weight: 500
}

.cs-modal__close {
    width: 1.5rem;
    height: 1.5rem;
    flex-grow: 0;
    flex-shrink: 0;
    cursor: pointer
}

.cs-modal__body {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.cs-modal-use-hardware-key__overlay {
    position: fixed;
    z-index: 300;
    top: -1px;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    padding: 1.5rem;
    background-color: #0000004d;
    overflow-y: auto
}

#app {
    width: 100%;
    height: 100%
}

.cs-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    box-shadow: 0 1rem 1.5rem #00000014
}

.cs-crypto-logo {
    position: relative;
    width: 100%;
    height: 100%
}

.cs-crypto-logo__crypto {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.cs-crypto-logo__platform {
    position: absolute;
    right: -12.5%;
    bottom: -12.5%;
    width: 50%;
    height: 50%;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #fff
}

.cs-crypto-list__header {
    font-size: .875rem;
    letter-spacing: .02em;
    line-height: 1.5;
    margin-bottom: .25rem;
    color: #616763
}

.cs-crypto-list__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 0;
    margin: 0 -.75rem;
    list-style: none
}

.cs-crypto-list__list--loading {
    opacity: .4;
    pointer-events: none
}

.cs-crypto-list__item {
    display: flex;
    flex: 0 0 100%;
    align-items: flex-start;
    padding: .75rem;
    border-radius: .625rem;
    cursor: pointer;
    gap: .75rem;
    overflow-x: hidden
}

@media (hover: hover) {
    .cs-crypto-list__item:hover {
        background-color:#f6f8fa
    }
}

.cs-crypto-list__item:active,.cs-crypto-list__item--selected {
    background-color: #f6f8fa
}

@media (min-width: 992px) {
    .cs-crypto-list__item--columns {
        flex-basis:50%
    }
}

@media (min-width: 1200px) {
    .cs-crypto-list__item--columns {
        flex-basis:33.3333333333%
    }
}

.cs-crypto-list__logo {
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    margin: .25rem 0
}

.cs-crypto-list__content {
    flex: 1 1 auto;
    overflow-x: hidden
}

.cs-crypto-list__title-container {
    display: flex;
    flex: 0 0 100%;
    justify-content: space-between;
    gap: 1rem
}

.cs-crypto-list__title {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.cs-crypto-list__title:first-child {
    flex: 0 0 auto
}

.cs-crypto-list__title:last-child {
    flex: 1 1 auto
}

.cs-crypto-list__title:nth-child(2) {
    text-align: right
}

.cs-crypto-list__subtitle-container {
    display: flex;
    flex: 0 0 100%;
    justify-content: space-between;
    gap: 1rem
}

.cs-crypto-list__subtitle {
    color: #616763;
    font-size: .75rem;
    letter-spacing: .03em;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.cs-crypto-list__subtitle:nth-child(1) {
    flex: 1 1 auto
}

.cs-crypto-list__subtitle:nth-child(2) {
    flex: 0 0 auto;
    text-align: right
}

.cs-crypto-list__change {
    padding-left: .5rem
}

.cs-crypto-list__change--positive {
    color: #01842e
}

.cs-crypto-list__change--negative {
    color: #dd230e
}

.cs-sidebar {
    display: none;
    width: 100%;
    height: 100%;
    flex-direction: column;
    background-color: #fff;
    overflow-y: auto
}

@media (min-width: 992px) {
    .cs-sidebar {
        display:flex;
        width: 22.5rem;
        flex-shrink: 0;
        border-radius: .625rem
    }
}

.cs-sidebar--active {
    display: flex
}

.cs-sidebar__navbar {
    padding: 2.5rem max(1.5rem,env(safe-area-inset-right)) 1.5rem max(1.5rem,env(safe-area-inset-left))
}

.cs-sidebar__avatar {
    width: 3rem;
    height: 3rem;
    margin-bottom: 2.5rem
}

.cs-sidebar__portfolio-amount {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: .25rem;
    cursor: pointer;
    text-align: center
}

.cs-sidebar__portfolio-amount--large {
    font-size: 1.5rem;
    letter-spacing: 0;
    line-height: 1.2
}

.cs-sidebar__portfolio-amount--normal {
    font-size: 2.625rem;
    letter-spacing: -.01em;
    line-height: 1.2
}

.cs-sidebar__portfolio-label {
    font-size: .875rem;
    letter-spacing: .02em;
    line-height: 1.5;
    margin-bottom: .25rem;
    color: #616763;
    text-align: center
}

.cs-sidebar__portfolio-change {
    font-size: .875rem;
    letter-spacing: .02em;
    line-height: 1.5;
    overflow-wrap: break-word;
    text-align: center
}

.cs-sidebar__portfolio-change--positive {
    color: #01842e
}

.cs-sidebar__portfolio-change--negative {
    color: #dd230e
}

.cs-sidebar__content {
    display: flex;
    flex: 1 1 100%;
    flex-direction: column;
    padding: 1.5rem max(1.5rem,env(safe-area-inset-right)) 2.5rem max(1.5rem,env(safe-area-inset-left));
    gap: .25rem
}

@media (min-width: 992px) {
    .cs-sidebar__content {
        overflow-y:auto
    }
}

.cs-sidebar__content-list {
    flex-grow: 1
}

.cs-sidebar__add-crypto {
    flex-shrink: 0
}

.app-layout {
    display: flex;
    height: 100%;
    padding-top: env(safe-area-inset-top);
    gap: 1rem
}

@media (min-width: 992px) {
    .app-layout {
        max-width:80rem;
        padding: max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) 1rem max(1rem,env(safe-area-inset-left));
        margin: 0 auto
    }
}

.app-layout__content {
    display: none;
    width: 100%;
    background-color: #fff
}

@media (min-width: 992px) {
    .app-layout__content {
        display:block;
        border-radius: .625rem
    }
}

.app-layout__content--active {
    display: block
}

.home-view {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    text-align: center;
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5
}

.cs-form-element {
    display: flex;
    flex-direction: column;
    gap: .25rem
}

.cs-form-element__container {
    display: flex;
    align-items: flex-end
}

.cs-form-element__control {
    min-width: 0;
    flex-grow: 1
}

.cs-form-element__label {
    font-size: .875rem;
    letter-spacing: .02em;
    line-height: 1.5;
    margin-bottom: .25rem;
    color: #616763
}

.cs-form-element__wrapper {
    display: flex;
    gap: .5rem
}

.cs-form-element__box {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5;
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 3.5rem;
    flex: 1 1 100%;
    align-items: center;
    padding: 0 .75rem;
    border: 1px solid #f6f8fa;
    border-radius: .625rem;
    background-color: #f6f8fa;
    gap: .625rem;
    transition: background-color .15s ease-in-out,border .15s ease-in-out
}

.cs-form-element__box--extra {
    flex: 1 0 auto
}

.cs-form-element__info {
    flex-shrink: 0;
    padding: 0 1rem
}

.cs-form-element__error {
    font-size: .875rem;
    letter-spacing: .02em;
    line-height: 1.5;
    color: #dd230e
}

.cs-form-element--has-error .cs-form-element__container div.cs-form-element__box {
    border: 1px solid #dd230e;
    background-color: #fcf5ef
}

.cs-form-element--small .cs-form-element__box {
    min-height: 2.5rem
}

.cs-form-element--writable .cs-form-element__label,.cs-form-element--writable .cs-form-element__box {
    cursor: pointer
}

.cs-form-element--writable .cs-form-element__box:focus-within,.cs-form-element--writable .cs-form-element__box:active {
    border: 1px solid #68c481;
    background-color: #fff
}

.cs-form-select__value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-grow: 1
}

.cs-form-select__select {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0
}

.cs-form-select__icon-before,.cs-form-select__icon-after {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0
}

.cs-provider-list {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 2.5rem
}

.cs-provider-list__item {
    display: flex;
    align-items: center;
    gap: .75rem;
    overflow-x: hidden
}

.cs-provider-list__logo {
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto
}

.cs-provider-list__content {
    flex: 1 1 auto;
    overflow-x: hidden
}

.cs-provider-list__title {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.cs-provider-list__subtitle {
    font-size: .75rem;
    letter-spacing: .03em;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #616763
}

.cs-navbar-button {
    width: 4rem;
    height: 100%;
    flex-shrink: 0;
    padding: 1.25rem
}

.cs-navbar {
    display: flex;
    width: 100%;
    height: 4rem;
    flex-direction: row;
    align-items: center
}

.cs-navbar__action {
    display: flex;
    height: 100%;
    flex-basis: 4rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center
}

.cs-navbar__content {
    min-width: 20%;
    flex-grow: 1;
    text-align: center
}

@media (min-width: 992px) {
    .cs-navbar__content {
        text-align:left
    }
}

@media (min-width: 992px) {
    .cs-navbar__content--centered {
        text-align:center
    }
}

.cs-navbar__title {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.cs-navbar__description {
    font-size: .875rem;
    letter-spacing: .02em;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.main-layout {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column
}

.main-layout__container {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    overflow-y: auto
}

.main-layout__content {
    display: flex;
    width: 100%;
    flex-basis: 100%;
    flex-direction: column;
    padding: 2.5rem max(1.5rem,env(safe-area-inset-right)) 2.5rem max(1.5rem,env(safe-area-inset-left));
    gap: 2.5rem
}

@media (min-width: 992px) {
    .main-layout__content {
        flex-basis:45rem;
        padding: 2.5rem 1.5rem
    }
}

@media (min-width: 992px) {
    .main-layout__content--narrow {
        width:25rem
    }
}

@media (min-width: 992px) {
    .main-layout__navbar {
        border-bottom:1px solid #f0f0f0
    }
}

.main-layout__error,.crypto-view-buy__empty {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5
}

.cs-form-group {
    display: flex;
    flex-direction: column;
    gap: 1.25rem
}

.cs-form-textarea-readonly__textarea {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5;
    overflow: hidden;
    flex-grow: 1;
    padding: .75rem 0;
    border: none;
    background-color: transparent;
    color: #222;
    cursor: auto;
    font-family: inherit;
    line-height: inherit;
    overflow-wrap: break-word
}

.cs-form-textarea-readonly__icon-before,.cs-form-textarea-readonly__icon-after {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0
}

.cs-token-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    text-align: center
}

.cs-token-info__icon {
    width: 4rem;
    height: 4rem;
    margin-bottom: .75rem
}

.cs-token-info__title {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5;
    font-weight: 500;
    overflow-wrap: anywhere
}

.cs-token-info__subtitle {
    font-size: .875rem;
    letter-spacing: .02em;
    line-height: 1.5;
    overflow-wrap: anywhere
}

.crypto-view-info__token-info {
    flex-grow: 1
}

.crypto-view-sell__empty {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5
}

.auth-step-layout {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    padding-top: env(safe-area-inset-top)
}

@media (min-width: 992px) {
    .auth-step-layout {
        padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) 1rem max(1rem,env(safe-area-inset-left));
        overflow-y: auto
    }
}

.auth-step-layout__frame {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    flex-grow: 1;
    align-items: center;
    background-color: #fff
}

@media (min-width: 992px) {
    .auth-step-layout__frame {
        max-width:80rem;
        height: auto;
        padding-top: 1rem;
        padding-bottom: 36rem;
        border-radius: .625rem
    }
}

.auth-step-layout__container {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column
}

@media (min-width: 992px) {
    .auth-step-layout__container {
        width:25rem;
        max-height: 45rem
    }
}

.auth-step-layout__content {
    display: flex;
    width: 100%;
    height: 89%;
    flex-direction: column;
    padding: 2.5rem max(1.5rem,env(safe-area-inset-right)) 2.5rem max(1.5rem,env(safe-area-inset-left));
    gap: 2.5rem;
    overflow-y: auto
}

@media (min-width: 992px) {
    .auth-step-layout__content {
        padding:2.5rem 1.5rem;
    }
}
@media (max-width: 768px) {
    .auth-step-layout__content {
        height: 140%;
    }
}

.cs-pin__dots {
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    gap: 1.25rem
}

.cs-pin__dots--wrong {
    animation: shake-x .7s
}

.cs-pin__dots--loading .cs-pin__dot {
    background-color: #68c481
}

.cs-pin__dots--loading .cs-pin__dot:nth-child(1) {
    animation: pulse-4 .6s ease-in-out alternate infinite
}

.cs-pin__dots--loading .cs-pin__dot:nth-child(2) {
    animation: pulse-4 .6s ease-in-out alternate .2s infinite
}

.cs-pin__dots--loading .cs-pin__dot:nth-child(3) {
    animation: pulse-4 .6s ease-in-out alternate .4s infinite
}

.cs-pin__dots--loading .cs-pin__dot:nth-child(4) {
    animation: pulse-4 .6s ease-in-out alternate .6s infinite
}

.cs-pin__dot {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: #d3d3d3
}

.cs-pin__dot--active {
    animation: scale-dot .2s;
    background-color: #68c481;
    opacity: 1
}

.cs-pin__keyboard {
    display: flex;
    flex-direction: column;
    gap: .75rem
}

.cs-pin__row {
    display: flex;
    justify-content: center;
    gap: 1.25rem
}

.cs-pin__key {
    font-size: 1.75rem;
    letter-spacing: 0;
    line-height: 1.2;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    font-weight: 400
}

.cs-pin__key--disabled {
    background-color: transparent;
    pointer-events: none
}

.cs-pin__key--named {
    font-size: .875rem;
    letter-spacing: .02em;
    line-height: 1.5
}

.cs-pin__biometry {
    height: 2rem;
    margin: 0 auto
}

.cs-pin__error {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5
}

.cs-steps {
    height: 100%
}

.cs-form-dropdown__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-grow: 1
}

.cs-form-dropdown__input {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0
}

.cs-form-dropdown__icon-before,.cs-form-dropdown__icon-after {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0
}

.cs-form-input__input {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    flex-grow: 1
}

.cs-form-input__input::-moz-placeholder {
    color: #616763
}

.cs-form-input__input::placeholder {
    color: #616763
}

.cs-form-input__icon-before,.cs-form-input__icon-after {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0
}

.crypto-add-step-custom-token__container {
    flex-grow: 1
}

.crypto-add-step-index__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center
}

@media (min-width: 992px) {
    .crypto-add-step-index__actions {
        flex-wrap:nowrap
    }
}

.crypto-add-step-index__action-search {
    flex-basis: 100%;
    margin-bottom: 2.5rem
}

@media (min-width: 992px) {
    .crypto-add-step-index__action-search {
        flex-basis:50%;
        margin-bottom: 0
    }
}

.crypto-add-step-index__action-add-custom {
    display: flex;
    flex-basis: 100%;
    justify-content: center
}

@media (min-width: 992px) {
    .crypto-add-step-index__action-add-custom {
        flex-basis:50%
    }
}

.crypto-derivation-step-index__note {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5
}

.crypto-derivation-step-index__form,.crypto-eos-setup-step-confirm__content {
    flex-grow: 1
}

.crypto-eos-setup-step-confirm__note {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5
}

.crypto-eos-setup-step-confirm__error {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5;
    color: #dd230e
}

.crypto-eos-setup-step-index__content {
    flex-grow: 1
}

.crypto-eos-setup-step-index__note {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5
}

.cs-powered-by {
    font-size: .75rem;
    letter-spacing: .03em;
    line-height: 1.5;
    color: #616763;
    cursor: pointer;
    text-align: center
}

.cs-powered-by svg {
    display: inline-block;
    width: 1.25rem;
    vertical-align: middle
}

.crypto-exchange-step-address__container {
    flex-grow: 1
}

.crypto-exchange-step-address__switch {
    cursor: pointer
}

.crypto-exchange-step-address__actions {
    width: 100%;
    max-width: 25rem;
    align-self: center
}

.cs-transaction-confirm__info {
    cursor: pointer
}

.cs-transaction-confirm__content {
    flex-grow: 1
}

.cs-transaction-confirm__arrow {
    width: 1.5rem;
    height: 1.5rem;
    align-self: center
}

.cs-amount-input {
    width: 100%;
    border: none
}

.cs-form-amount-input__amount,.cs-form-amount-input__value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-grow: 1
}

.cs-form-amount-input__select {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0
}

.cs-form-amount-input__icon-after {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0
}

.cs-form-amount-input__info {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5
}

.crypto-exchange-step-index__growing-group {
    flex-grow: 1
}

.crypto-exchange-step-index__info {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5
}

.cs-mecto__results {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5;
    flex-grow: 1
}

.cs-mecto__users-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    -moz-column-gap: .5rem;
    column-gap: .5rem;
    row-gap: 2.5rem
}

.cs-mecto__user {
    display: flex;
    min-width: 5rem;
    flex: 0 0 calc(50% - .25rem);
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    gap: 1.25rem
}

.cs-mecto__avatar {
    width: 5rem;
    height: 5rem
}

.cs-mecto__username {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%
}

.crypto-exchange-step-meta__container,.cs-poor__content {
    flex-grow: 1
}

html.qr-scanning,html.qr-scanning body {
    background-color: transparent
}

html.qr-scanning #app {
    display: none
}

.cs-qr-scan-phonegap {
    display: flex;
    overflow: hidden;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    padding: 2.5rem 1.5rem;
    gap: 2.5rem
}

.cs-qr-scan-phonegap__box-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center
}

.cs-qr-scan-phonegap__box {
    width: 100%;
    max-width: 20rem;
    height: 100%;
    max-height: 20rem;
    border-radius: .625rem;
    margin: 0 auto;
    box-shadow: 0 0 0 3000px #0009
}

.cs-qr-scan-web__video {
    display: block;
    width: 100%;
    max-width: 20rem;
    height: 100%;
    max-height: 20rem;
    border: 1px solid #d3d3d3;
    border-radius: .625rem;
    margin: 0 auto
}

.cs-transaction-status__icon {
    width: 8rem;
    height: 8rem;
    align-self: center;
    border-radius: 50%
}

.cs-transaction-status__icon--success {
    background-color: #f0f9f2
}

.cs-transaction-status__icon--success svg * {
    stroke: #01842e
}

.cs-transaction-status__icon--failed {
    background-color: #fcf5ef
}

.cs-transaction-status__icon--failed svg * {
    stroke: #dd230e
}

.cs-transaction-status__info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 1rem
}

.cs-transaction-status__info-header {
    font-size: 1.5rem;
    letter-spacing: 0;
    line-height: 1.2;
    font-weight: 500
}

.cs-transaction-status__info-message {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5
}

.crypto-exchange-step-target__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center
}

@media (min-width: 992px) {
    .crypto-exchange-step-target__actions {
        flex-wrap:nowrap
    }
}

.crypto-exchange-step-target__action-search {
    flex-basis: 100%;
    margin-bottom: 2.5rem
}

@media (min-width: 992px) {
    .crypto-exchange-step-target__action-search {
        flex-basis:50%;
        margin-bottom: 0
    }
}

.crypto-export-step-index__container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 2.5rem
}

.crypto-export-step-index__group:last-of-type {
    flex-grow: 1
}

.crypto-export-step-index__warning {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.crypto-export-step-index__warning-title {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5;
    font-weight: 500;
    display: flex;
    align-items: flex-start;
    color: #dd230e;
    gap: .5rem
}

.crypto-export-step-index__danger_triangle {
    width: 1.5rem;
    flex-shrink: 0
}

.crypto-export-step-index__warning-info {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5;
    color: #dd230e
}

.crypto-export-step-show__container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 2.5rem
}

.crypto-export-step-show__group:last-of-type {
    flex-grow: 1
}

.crypto-export-step-show__empty {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5
}

.crypto-export-step-show__keys {
    display: flex;
    flex-direction: column;
    gap: 2.5rem
}

.crypto-export-step-show__data {
    display: flex;
    flex-direction: column;
    gap: 1.25rem
}

.crypto-export-step-show__item {
    display: flex;
    flex-direction: column;
    gap: .25rem
}

.crypto-export-step-show__item-title {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5;
    font-weight: 500
}

.crypto-export-step-show__item-subtitle {
    font-size: .875rem;
    letter-spacing: .02em;
    line-height: 1.5;
    word-break: break-all
}

.crypto-export-step-show__copy-icon * {
    stroke: #01842e
}

.crypto-history-step-accelerate__container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    align-items: center;
    justify-content: center
}

.crypto-history-step-accelerate__icon {
    width: 10rem;
    height: 10rem
}

.crypto-history-step-accelerate__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem
}

.crypto-history-step-accelerate__title {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5;
    font-weight: 500
}

.crypto-history-step-accelerate__subtitle {
    font-size: .875rem;
    letter-spacing: .02em;
    line-height: 1.5
}

.cs-refresh-button {
    display: none
}

@media (min-width: 768px) {
    .cs-refresh-button {
        display:flex
    }
}

@media (any-hover: hover) {
    .cs-refresh-button {
        display:flex
    }
}

.cs-refresh-button__spinner {
    animation: rotation180 .5s infinite linear
}

.crypto-history-row {
    padding: 1rem .75rem;
    border-radius: .625rem;
    cursor: pointer
}

@media (hover: hover) {
    .crypto-history-row:hover {
        background-color:#f6f8fa
    }
}

.crypto-history-row:active {
    background-color: #f6f8fa
}

.crypto-history-row__title {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5;
    display: flex;
    justify-content: space-between;
    gap: .75rem
}

.crypto-history-row__subtitle {
    font-size: .875rem;
    letter-spacing: .02em;
    line-height: 1.5;
    display: flex;
    justify-content: space-between;
    color: #616763;
    gap: .75rem
}

.crypto-history-row__description {
    flex-shrink: 0
}

.crypto-history-row__amount-crypto {
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.crypto-history-row__amount-crypto--positive {
    color: #01842e
}

.crypto-history-row__amount-crypto--negative {
    color: #dd230e
}

.crypto-history-row__status {
    flex-shrink: 0
}

.crypto-history-row__amount-fiat {
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.smart-layout {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column
}

.smart-layout__container {
    position: relative;
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    overflow-y: auto
}

.smart-layout__container--pulling {
    overflow-y: hidden
}

.smart-layout__content {
    display: flex;
    width: 100%;
    flex-basis: 100%;
    flex-direction: column;
    padding: 2.5rem max(1.5rem,env(safe-area-inset-right)) 2.5rem max(1.5rem,env(safe-area-inset-left));
    gap: 2.5rem
}

@media (min-width: 992px) {
    .smart-layout__content {
        flex-basis:45rem;
        padding: 2.5rem 1.5rem
    }
}

@media (min-width: 992px) {
    .smart-layout__content--narrow {
        width:25rem
    }
}

.smart-layout__content--transition {
    transition: transform .3s ease-out
}

@media (min-width: 992px) {
    .smart-layout__navbar {
        border-bottom:1px solid #f0f0f0
    }
}

.smart-layout__pull {
    position: absolute;
    display: flex;
    width: 100%;
    justify-content: center
}

.smart-layout__pull--transition {
    transition: transform .3s ease-out,opacity .3s ease-out
}

.smart-layout__pull svg {
    width: 1.5rem;
    height: 1.5rem
}

.smart-layout__arrow {
    transition: transform .2s
}

.smart-layout__arrow--up {
    transform: rotate(180deg)
}

.crypto-history-step-list {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.crypto-history-step-list__empty,.crypto-history-step-list__error {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5
}

.crypto-history-step-list__transactions {
    margin-right: -.75rem;
    margin-left: -.75rem
}

.crypto-history-step-monero-accept__container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    align-items: center;
    justify-content: center
}

.crypto-history-step-monero-accept__icon {
    width: 10rem;
    height: 10rem
}

.crypto-history-step-monero-accept__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem
}

.crypto-history-step-monero-accept__title {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5;
    font-weight: 500
}

.crypto-history-step-monero-accept__subtitle {
    font-size: .875rem;
    letter-spacing: .02em;
    line-height: 1.5
}

.crypto-history-step-transaction__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    text-align: center
}

.crypto-history-step-transaction__amount-crypto {
    font-size: 1.5rem;
    letter-spacing: 0;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.crypto-history-step-transaction__amount-crypto--positive {
    color: #01842e
}

.crypto-history-step-transaction__amount-crypto--negative {
    color: #dd230e
}

.crypto-history-step-transaction__amount-fiat {
    font-size: .875rem;
    letter-spacing: .02em;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    color: #616763
}

.crypto-history-step-transaction__status {
    font-size: .875rem;
    letter-spacing: .02em;
    line-height: 1.5;
    color: #616763
}

.crypto-history-step-transaction__status--danger {
    color: #dd230e
}

.crypto-history-step-transaction__arrow {
    width: 1.5rem;
    height: 1.5rem
}

.crypto-history-step-transaction__arrow--up {
    transform: rotate(180deg)
}

.crypto-history-step-transaction__accept {
    display: flex;
    justify-content: center
}

.crypto-history-step-transaction__info,.cs-miner-fee {
    flex-grow: 1
}

.cs-miner-fee__info,.crypto-import-step-private-key__info {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5
}

.crypto-import-step-private-key__container {
    flex-grow: 1
}

.cs-price-chart-axis-y {
    position: absolute;
    z-index: 1;
    top: 0;
    right: max(1.5rem,env(safe-area-inset-right));
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #616763;
    text-align: right;
    font-size: .75rem;
    letter-spacing: .03em;
    line-height: 1.5
}

.cs-price-chart-canvas {
    display: block;
    width: 100%;
    height: 10rem
}

.cs-price-chart-periods {
    position: relative;
    display: flex;
    padding: 0 1.5rem
}

@media (min-width: 992px) {
    .cs-price-chart-periods {
        max-width:30rem
    }
}

.cs-price-chart-periods__period {
    position: relative;
    flex-grow: 1
}

.cs-price-chart-periods__input {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    pointer-events: none
}

.cs-price-chart-periods__input:checked~.cs-price-chart-periods__button {
    background-color: #f6f8fa
}

.cs-price-chart-periods__button {
    font-size: .875rem;
    letter-spacing: .02em;
    line-height: 1.5;
    display: flex;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
    cursor: pointer
}

.cs-price-chart__wrapper {
    position: relative;
    padding: 1rem 0;
    margin-bottom: 1rem
}

@media (min-width: 992px) {
    .cs-price-chart__wrapper {
        padding:1.25rem 0
    }
}

.cs-price-chart__loader,.cs-price-chart__error {
    height: 13rem
}

@media (min-width: 992px) {
    .cs-price-chart__loader,.cs-price-chart__error {
        height:13.5rem
    }
}

.cs-price-chart__error {
    font-size: .875rem;
    letter-spacing: .02em;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: center
}

.crypto-index-actions {
    width: 100%;
    max-width: 25rem
}

@media (min-width: 992px) {
    .crypto-index-actions {
        align-self:flex-start
    }
}

.crypto-index-balance {
    display: flex;
    flex-direction: column;
    gap: .25rem
}

.crypto-index-balance__header {
    font-size: .875rem;
    letter-spacing: .02em;
    line-height: 1.5;
    color: #616763
}

.crypto-index-balance__balance {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    -moz-column-gap: 1rem;
    column-gap: 1rem;
    cursor: pointer
}

.crypto-index-balance__amount {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.crypto-index-balance__fiat {
    font-size: .875rem;
    letter-spacing: .02em;
    line-height: 1.5;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.cs-dropdown-menu {
    position: relative;
    z-index: 100;
    width: 4rem;
    height: 100%
}

.cs-dropdown-menu:focus-within .cs-dropdown-menu__mask,.cs-dropdown-menu:focus-within .cs-dropdown-menu__wrapper {
    display: block
}

.cs-dropdown-menu__button {
    width: 100%;
    height: 100%
}

.cs-dropdown-menu__mask {
    position: absolute;
    top: 0;
    display: none;
    width: 100%;
    height: 100%;
    cursor: pointer
}

.cs-dropdown-menu__wrapper {
    display: none;
    margin-top: -1rem;
    filter: drop-shadow(0 0 2.5rem rgba(0,0,0,.1))
}

.cs-dropdown-menu__wrapper .cs-dropdown-menu__triangle {
    display: block;
    width: 1.5rem;
    height: .625rem;
    margin: 0 auto
}

.cs-dropdown-menu__content {
    width: 22.5rem;
    border-radius: .625rem;
    margin-left: calc(100% - 23rem);
    background-color: #fff
}

.cs-list-item {
    display: flex;
    min-height: 3.5rem;
    flex-direction: row;
    align-items: center;
    padding-right: max(1.5rem,env(safe-area-inset-right));
    padding-left: max(1.5rem,env(safe-area-inset-left));
    gap: .5rem
}

@media (min-width: 992px) {
    .cs-list-item {
        padding-right:0;
        padding-left: 0
    }
}

.cs-list-item__content {
    min-width: 20%;
    flex-grow: 1;
    padding-top: .75rem;
    padding-bottom: .75rem
}

.cs-list-item__title {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.cs-list-item__description {
    font-size: .875rem;
    letter-spacing: .02em;
    line-height: 1.5;
    color: #616763
}

.cs-list-item__before button,.cs-list-item__after button {
    width: 1.5rem;
    height: 1.5rem
}

.cs-list-item__before svg,.cs-list-item__after svg {
    width: 1.5rem;
    height: 1.5rem
}

.cs-list-item--clickable {
    cursor: pointer
}

.cs-list-item--disabled {
    opacity: .4;
    pointer-events: none
}

.cs-list-item--danger {
    color: #dd230e
}

.cs-list-items {
    margin-right: calc(-1*max(1.5rem,env(safe-area-inset-right)));
    margin-left: calc(-1*max(1.5rem,env(safe-area-inset-left)))
}

@media (min-width: 992px) {
    .cs-list-items {
        margin-right:0;
        margin-left: 0
    }
}

.cs-list-items__title-wrapper {
    padding: 0 max(1.5rem,env(safe-area-inset-right)) 0 max(1.5rem,env(safe-area-inset-left));
    color: #616763
}

@media (min-width: 992px) {
    .cs-list-items__title-wrapper {
        padding:0
    }
}

.cs-list-items__title {
    font-size: .875rem;
    letter-spacing: .02em;
    line-height: 1.5;
    padding: .25rem 0;
    border-bottom: 1px solid #f0f0f0
}

.cs-list-items__list {
    padding: 0;
    margin: 0;
    list-style: none
}

.crypto-index-dropdown-menu {
    display: none
}

@media (min-width: 992px) {
    .crypto-index-dropdown-menu {
        display:block
    }
}

.crypto-index-dropdown-menu__list {
    padding: 1.5rem
}

.crypto-index-price {
    display: flex;
    flex-basis: 50%;
    gap: 1rem
}

.crypto-index-price__crypto-logo {
    width: 2.5rem;
    height: 2.5rem
}

.crypto-index-price__price {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.crypto-index-price__change {
    font-size: .875rem;
    letter-spacing: .02em;
    line-height: 1.5;
    display: flex;
    align-items: center;
    gap: .25rem
}

.crypto-index-price__change--positive {
    color: #01842e
}

.crypto-index-price__change--negative {
    color: #dd230e
}

.crypto-index-price__change_arrow {
    width: .75rem;
    height: .75rem
}

.crypto-index-setup-eos {
    width: 100%;
    max-width: 25rem;
    align-self: center
}

@media (min-width: 992px) {
    .crypto-index-setup-eos {
        align-self:flex-start
    }
}

@media (min-width: 992px) {
    .crypto-index-tools {
        display:none
    }
}

.crypto-index-view__header-container {
    display: flex;
    flex-direction: column;
    gap: 1.25rem
}

.crypto-index-view__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem
}

.crypto-index-view__price-chart {
    margin-right: calc(-1*max(1.5rem,env(safe-area-inset-right)));
    margin-left: calc(-1*max(1.5rem,env(safe-area-inset-left)))
}

.crypto-index-view__error,.crypto-receive-step-account__info {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5
}

.crypto-receive-step-account__container {
    flex-grow: 1
}

.crypto-receive-step-index__qr-wrapper {
    display: flex;
    align-items: center;
    justify-content: center
}

.crypto-receive-step-index__location {
    position: absolute;
    animation: mecto-icon 2s ease-out infinite
}

.crypto-receive-step-index__qr {
    width: 12rem;
    height: 12rem;
    flex-shrink: 0;
    padding: 1rem;
    border: 1px solid #d3d3d3;
    border-radius: .625rem
}

.crypto-receive-step-index__address-type-button {
    width: 3.5rem;
    height: 3.5rem
}

.crypto-receive-step-index__address-type-button--disabled {
    opacity: .4;
    pointer-events: none
}

.crypto-receive-step-index__address-type-button svg {
    width: 1.5rem;
    height: 1.5rem;
    margin: 0 auto
}

.crypto-receive-step-index__input-wrapper {
    flex-grow: 1
}

.crypto-receive-step-index__actions {
    position: relative;
    width: 100%;
    max-width: 25rem;
    align-self: center
}

.crypto-receive-step-index__mecto .cs-button__circle {
    background-color: #68c481
}

@media (hover: hover) {
    .crypto-receive-step-index__mecto .cs-button__circle:hover {
        background-color:#5dc078
    }
}

.crypto-receive-step-index__mecto .cs-button__circle:active {
    background-color: #52bc6f
}

.crypto-receive-step-monero-accept__container,.crypto-send-step-address__container {
    flex-grow: 1
}

.crypto-send-step-address__actions {
    width: 100%;
    max-width: 25rem;
    align-self: center
}

.crypto-send-step-amount__content {
    flex-grow: 1
}

.cs-big-int-input {
    width: 100%;
    border: none
}

.cs-form-big-int-input__amount {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-grow: 1
}

.crypto-send-step-gas__gas,.crypto-send-step-meta__container,.crypto-staking-step-index__content {
    flex-grow: 1
}

.crypto-staking-step-index__actions {
    position: relative;
    width: 100%;
    max-width: 25rem;
    align-self: center
}

.crypto-staking-step-index__error {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5
}

.crypto-staking-step-pending-requests__content {
    flex-grow: 1
}

.crypto-staking-step-pending-requests__error {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5
}

.crypto-staking-step-stake__content,.crypto-staking-step-unstake__content,.settings-account-step-index__content {
    flex-grow: 1
}

.settings-account-step-index__note {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5
}

.settings-account-step-remove__container {
    flex-grow: 1
}

.settings-account-step-remove__note {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5
}

.cs-form-textarea__textarea {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5;
    flex-grow: 1;
    padding: .75rem 0;
    border: none;
    background-color: transparent;
    color: #222;
    font-family: inherit;
    line-height: inherit;
    resize: none
}

.cs-passphrase__container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 1.5rem
}

.cs-passphrase__suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem
}

.cs-passphrase__suggestion {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5;
    padding: .5rem 1.25rem;
    border-radius: .75rem;
    box-shadow: 0 .75rem 2.5rem #00000012
}

.cs-passphrase__buttons {
    flex-shrink: 0
}

.cs-switch {
    position: relative;
    display: block;
    width: 2rem;
    height: 1.25rem;
    cursor: pointer
}

.cs-switch__slider {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 1.25rem;
    margin: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #d3d3d3;
    transition: all .1s ease-out
}

.cs-switch__slider:before {
    position: absolute;
    bottom: .125rem;
    left: .125rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: #fff;
    content: "";
    transition: all .1s ease-out
}

.cs-switch__slider:checked {
    background-color: #68c481
}

.cs-switch__slider:checked:before {
    transform: translate(.75rem)
}

.cs-list-item-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem
}

.cs-list-item-dropdown__label {
    font-size: .875rem;
    letter-spacing: .02em;
    line-height: 1.5;
    color: #616763
}

.cs-list-item-dropdown__select {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0
}

.cs-list-item-dropdown svg {
    width: 1.5rem;
    height: 1.5rem
}

.settings-view__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem
}

.settings-view__header-avatar {
    width: 5rem;
    height: 5rem
}

.settings-view__header-username {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%
}

.settings-view__version {
    font-size: .875rem;
    letter-spacing: .02em;
    line-height: 1.5;
    color: #616763;
    text-align: center
}

.wallet-connect-step-index__container {
    flex-grow: 1
}

.wallet-connect-step-index__actions {
    width: 100%;
    max-width: 25rem;
    align-self: center
}

.wallet-connect-step-index__buttons {
    flex-shrink: 0
}

.wallet-connect-step-main__container {
    flex-grow: 1
}

.wallet-connect-step-main__error {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5;
    color: #dd230e
}

.wallet-connect-step-sign__container {
    flex-grow: 1
}

.not-found {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    padding-top: env(safe-area-inset-top)
}

@media (min-width: 992px) {
    .not-found {
        padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) 1rem max(1rem,env(safe-area-inset-left));
        overflow-y: auto
    }
}

.not-found__frame {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    flex-grow: 1;
    align-items: center;
    background-color: #fff
}

@media (min-width: 992px) {
    .not-found__frame {
        max-width:80rem;
        height: auto;
        padding-top: 5rem;
        border-radius: .625rem
    }
}

.not-found__container {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column
}

@media (min-width: 992px) {
    .not-found__container {
        width:25rem;
        max-height: 45rem
    }
}

.not-found__content {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    padding: 2.5rem max(1.5rem,env(safe-area-inset-right)) 2.5rem max(1.5rem,env(safe-area-inset-left));
    gap: 2.5rem;
    overflow-y: auto
}

@media (min-width: 992px) {
    .not-found__content {
        padding:2.5rem 1.5rem
    }
}

.not-found__text {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5;
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: center
}

.auth-step-biometry__icon-wrapper {
    display: flex;
    flex-grow: 1;
    justify-content: center
}

.auth-step-biometry__icon {
    width: 8rem
}

.auth-step-biometry__text {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5
}

.auth-step-index {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    padding: 2.5rem max(1.5rem,env(safe-area-inset-right)) 2.5rem max(1.5rem,env(safe-area-inset-left));
    background-color: #2c3832;
    gap: 4rem;
    overflow-y: auto
}

.auth-step-index.slide-left-leave-active {
    transition: opacity .1s ease-out
}

.auth-step-index.slide-right-enter-active {
    transition: opacity .1s ease-in .1s
}

.auth-step-index.slide-left-leave-to,.auth-step-index.slide-right-enter-from {
    opacity: 0
}

.auth-step-index__frame {
    display: flex;
    width: 100%;
    flex-direction: column;
    flex-grow: 1;
    align-items: center;
    gap: 4rem
}

@media (min-width: 992px) {
    .auth-step-index__frame {
        justify-content:center
    }
}

.auth-step-index__logo-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center
}

@media (min-width: 992px) {
    .auth-step-index__logo-wrapper {
        flex-grow:0
    }
}

.auth-step-index__logo {
    width: 10rem
}

.auth-step-index__button-group {
    width: 100%
}

@media (min-width: 992px) {
    .auth-step-index__button-group {
        width:auto
    }
}

.auth-step-index__copyright {
    font-size: .75rem;
    letter-spacing: .03em;
    line-height: 1.5;
    color: #fff
}

.auth-step-passphrase__passphrase_wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: .5rem
}

.auth-step-passphrase__passphrase {
    font-weight: 500
}

.auth-step-passphrase__copy {
    font-size: .75rem;
    letter-spacing: .03em;
    line-height: 1.5;
    justify-content: center;
    color: #616763
}

.auth-step-passphrase__container {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.auth-step-passphrase__warning {
    font-size: .875rem;
    letter-spacing: .02em;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    color: #dd230e;
    gap: .5rem
}

.auth-step-passphrase__danger_triangle {
    width: 1.5rem;
    flex-shrink: 0
}

.auth-step-passphrase__agreement {
    font-size: .875rem;
    letter-spacing: .02em;
    line-height: 1.5;
    position: relative;
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    gap: 1rem
}

.auth-step-passphrase__default-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none
}

.auth-step-passphrase__default-checkbox:checked~.auth-step-passphrase__checkbox {
    border: none;
    background-color: #68c481
}

.auth-step-passphrase__default-checkbox:checked~.auth-step-passphrase__checkbox .auth-step-passphrase__check {
    display: block
}

.auth-step-passphrase__checkbox {
    display: flex;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid #d3d3d3;
    border-radius: .25rem;
    margin-top: .25rem
}

.auth-step-passphrase__check {
    display: none;
    width: 1rem;
    height: 1rem
}

.auth-step-passphrase-confirmation__description {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5
}

.auth-step-passphrase-confirmation__words {
    flex-grow: 1
}

.auth-step-passphrase-generation__wallet {
    display: flex;
    flex-grow: 1;
    justify-content: center
}

@media (min-width: 992px) {
    .auth-step-passphrase-generation__wallet {
        flex-grow:0;
        justify-content: flex-start
    }
}

.auth-step-passphrase-generation__wallet-icon {
    width: 8rem
}

@media (min-width: 992px) {
    .auth-step-passphrase-generation__wallet-icon {
        width:3rem
    }
}

.auth-step-passphrase-generation__container {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

@media (min-width: 992px) {
    .auth-step-passphrase-generation__container {
        flex-grow:1
    }
}

.auth-step-passphrase-generation__header {
    font-size: 1.5rem;
    letter-spacing: 0;
    line-height: 1.2;
    font-weight: 500
}

.auth-step-passphrase-generation__text {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5
}

.auth-step-passphrase-generation__generate {
    flex-shrink: 0
}

.unlock-step-derivation__description {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 1rem
}

.design-layout {
    height: 100%;
    padding: 1.5rem;
    background-color: #fff;
    overflow-y: auto
}

.design-layout__back {
    display: block;
    margin-bottom: 1.25rem
}

.design-view {
    display: flex;
    flex-direction: column;
    gap: .5rem
}

.design-view-buttons .cs-button {
    margin-bottom: 1.5rem
}

.design-view-buttons__custom-button svg {
    width: 1.5rem;
    height: 1.5rem
}

.design-view-buttons__multiline {
    width: 300px
}

.design-view-crypto-logo {
    display: flex;
    flex-direction: column;
    gap: 1.5rem
}

.design-view-crypto-logo__medium {
    width: 2rem;
    height: 2rem
}

.design-view-crypto-logo__custom {
    width: 4rem;
    height: 4rem
}

.design-view-inputs {
    display: flex;
    flex-direction: column;
    gap: 3rem
}

.design-view-inputs__group {
    display: flex;
    flex-direction: column;
    gap: 1.5rem
}

.design-view-list-items {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.5rem
}

.design-view-list-items .cs-list-items {
    width: 100%;
    max-width: 35rem
}

.design-view-numbers__header {
    font-size: 2rem;
    letter-spacing: -.01em;
    line-height: 1.2;
    margin-bottom: 1.5rem
}

.design-view-numbers__inputs {
    margin-bottom: 2rem
}

.design-view-numbers__currency {
    margin-bottom: 1rem
}

.design-view-numbers hr {
    margin-bottom: 2rem
}

.design-view-pull-list {
    width: 100%;
    height: 500px;
    background-color: #faebd7
}

.design-view-typography__text-xs {
    font-size: .75rem;
    letter-spacing: .03em;
    line-height: 1.5
}

.design-view-typography__text-sm {
    font-size: .875rem;
    letter-spacing: .02em;
    line-height: 1.5
}

.design-view-typography__text-md {
    font-size: 1.125rem;
    letter-spacing: .01em;
    line-height: 1.5
}

.design-view-typography__text-lg {
    font-size: 1.5rem;
    letter-spacing: 0;
    line-height: 1.2
}

.design-view-typography__text-xl {
    font-size: 1.75rem;
    letter-spacing: 0;
    line-height: 1.2
}

.design-view-typography__text-2xl {
    font-size: 2rem;
    letter-spacing: -.01em;
    line-height: 1.2
}

.design-view-typography__text-3xl {
    font-size: 2.625rem;
    letter-spacing: -.01em;
    line-height: 1.2
}