div.tooltip-component {
    position: fixed;
    display: flex;
    top: 0;
    left: 0;
    font-size: 14px;
    transform: translateX(-1px);
    z-index: 1000;
    flex-direction: column;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 290px;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    padding: 15px;
    transition: 200ms ease opacity;
    transition-delay: 100ms;
    pointer-events: none;
    color: #fff;
    border: solid 1px rgba(255, 255, 255, .2);
    border-radius: 16px;
    background: rgba(255, 255, 255, .1);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px)
}

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
div.tooltip-component::after {
    position: absolute;
    display: block;
    bottom: -13px;
    left: var(--arrow-left);
    content: "";
    border: 6px solid rgba(0, 0, 0, 0);
    border-top: 6px solid rgba(255, 255, 255, .3)
}

div.tooltip-component-wrapper {
    position: relative;
    display: block;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content
}

footer.footer {
    position: relative;
    display: flex;
    margin-top: auto;
    width: 100%;
    justify-content: center;
    align-items: center;
    padding: 0 40px
}

footer.footer div.footer-content-wrapper {
    position: relative;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 50px;
    width: 1120px;
    max-width: 100%;
    padding-bottom: 90px;
    padding-top: 50px
}

footer.footer div.footer-content-wrapper div.right-block {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto
}

footer.footer div.footer-content-wrapper div.right-block a.social-icon {
    cursor: pointer;
    transition: 100ms ease all;
    opacity: .4
}

footer.footer div.footer-content-wrapper div.right-block a.social-icon:hover {
    opacity: .9
}

footer.footer div.footer-content-wrapper div.right-block div.audit-block {
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: right
}

footer.footer div.footer-content-wrapper div.right-block div.audit-block img {
    margin-top: -2px
}

footer.footer div.footer-content-wrapper div.left-block {
    filter: grayscale(100%);
    opacity: .4;
    display: flex;
    align-items: center;
    gap: 20px
}

footer.footer div.footer-content-wrapper div.left-block img {
    width: 180px;
    height: auto
}

@media screen and (max-width: 530px) {
    footer.footer div.footer-content-wrapper {
        padding-top: 90px;
        flex-direction: column-reverse;
        text-align: center;
        gap: 30px
    }

    footer.footer div.footer-content-wrapper div.right-block {
        margin-left: unset
    }
}

div.loader {
    width: 16px;
    height: 16px;
    border: 3px solid rgba(255, 255, 255, .9);
    border-radius: 100%;
    border-bottom-color: rgba(0, 0, 0, 0);
    animation: 600ms linear infinite rotate
}

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

    to {
        transform: rotate(360deg)
    }
}

button.button {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #e30f2e;
    border-radius: 12px;
    font-size: 28px;
    font-weight: 600;
    border: none;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    color: #fff;
    width: 100%;
    max-width: 560px;
    overflow: hidden;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: 100ms ease all
}

button.button::before,
button.button::after {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background: #da5353;
    opacity: 0;
    content: "";
    top: 0;
    left: 0;
    transition: 100ms ease all;
    z-index: 0
}

button.button::after {
    z-index: 1;
    background: linear-gradient(to bottom, #DA5353, #CE3939)
}

button.button:hover {
    color: #fff
}

button.button:hover::before {
    opacity: 1
}

button.button:active {
    color: #892727
}

button.button:active::after {
    opacity: 1
}

button.button:active::before {
    opacity: 0
}

button.button div.button-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    z-index: 2;
    padding: 14px 0;
    width: 100%;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    gap: 6px
}

button.button.small {
    font-size: 16px;
    font-weight: 700;
    padding: 0 12px
}

button.button.small div.button-wrapper {
    padding: 9px 0
}

button.button.loading {
    pointer-events: none;
    opacity: .5
}

button.button[disabled] {
    opacity: .5;
    pointer-events: none;
    cursor: not-allowed
}

div.icon {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px
}

div.icon svg,
div.icon img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%
}

div.wallet-connector-account {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    -webkit-user-select: none;
    user-select: none;
    font-family: "Gilroy", sans-serif
}

div.wallet-connector-account div {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: #fff
}

div.wallet-connector-account div.account-balance {
    gap: 8px;
    font-weight: 700;
    letter-spacing: .3px !important;
    font-size: 13px;
    font-family: "Gilroy", sans-serif
}

div.wallet-connector-account div.account-balance div.icon {
    width: 16px;
    height: 16px;
    min-height: 16px;
    min-width: 16px;
    transform: translateY(-1px)
}

div.wallet-connector-account div.account-address {
    font-family: "Gilroy", sans-serif;
    height: 32px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .1);
    font-size: 14px;
    font-weight: 400;
    -webkit-user-select: text;
    user-select: text;
    padding: 0 8px;
    gap: 30px;
    letter-spacing: .3px !important;
    transition: 100ms ease all;
    cursor: pointer
}

div.wallet-connector-account div.account-address:hover {
    background: rgba(255, 255, 255, .2)
}

div.wallet-connector-account div.account-address div.useless-ball {
    position: relative;
    display: block;
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    border-radius: 100%;
    background: linear-gradient(135deg, #E6E8FF -0.61%, #47B2FF 99.39%)
}

div.wallet-connector-account div.account-actions {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px
}

div.wallet-connector-account div.account-logout {
    cursor: pointer
}

div.wallet-connector-account div.account-logout svg {
    transition: 100ms ease all
}

div.wallet-connector-account div.account-logout svg:hover {
    color: #e30f2e !important
}

@media screen and (max-width: 400px) {
    div.wallet-connector-account {
        flex-direction: column
    }
}

div.wallet-connector-account {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    -webkit-user-select: none;
    user-select: none;
    font-family: "Gilroy", sans-serif;
    background-color: rgba(0, 0, 0, 0)
}

div.wallet-connector-account div {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: #fff
}

div.wallet-connector-account div.account-balance {
    gap: 8px;
    font-weight: 700;
    letter-spacing: .3px !important;
    font-size: 13px;
    font-family: "Gilroy", sans-serif
}

div.wallet-connector-account div.account-balance div.icon {
    width: 16px;
    height: 16px;
    min-height: 16px;
    min-width: 16px;
    transform: translateY(-1px)
}

div.wallet-connector-account div.account-address {
    font-family: "Gilroy", sans-serif;
    height: 32px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .25);
    font-size: 14px;
    font-weight: 400;
    -webkit-user-select: text;
    user-select: text;
    padding: 0 8px;
    gap: 30px;
    letter-spacing: .3px !important;
    transition: 100ms ease all;
    cursor: pointer
}

div.wallet-connector-account div.account-address:hover {
    background: rgba(255, 255, 255, .2)
}

div.wallet-connector-account div.account-address div.useless-ball {
    position: relative;
    display: block;
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    border-radius: 100%;
    background: linear-gradient(135deg, #e6e8ff -0.61%, #47b2ff 99.39%)
}

div.wallet-connector-account div.account-actions {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px
}

@media screen and (max-width: 400px) {
    div.wallet-connector-account {
        flex-direction: column
    }
}

div.account-logout,
div.account-profile,
div.account-menu {
    cursor: pointer;
    display: block
}

div.account-logout svg,
div.account-logout .link,
div.account-profile svg,
div.account-profile .link,
div.account-menu svg,
div.account-menu .link {
    opacity: 1
}

div.account-logout svg:hover path,
div.account-profile svg:hover path,
div.account-menu svg:hover path {
    fill: #e30f2e
}

div.wallet-connector {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    font-family: "Gilroy", sans-serif
}

div.wallet-connector.connected {
    border-radius: 12px;
    padding: 14px 20px 14px 24px;
    background: rgba(255, 255, 255, .15)
}

div.account-login {
    cursor: pointer
}

div.account-login img {
    display: block
}

div.account-login svg {
    transition: 100ms ease all
}

div.account-login svg:hover {
    color: #e30f2e !important
}

div.account-connected {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center
}

div.connector-item {
    margin: auto
}

div.connector-item svg {
    display: block;
    margin: auto
}

.nav {
    display: flex;
    gap: 18px
}

.nav.stake>.stake,
.nav.dashboard>.dashboard,
.nav.dashboard>.dashboard,
.nav.profile>.profile,
.nav.faq>.faq {
    color: #fff;
    opacity: .7
}

.link {
    color: #bebebe;
    cursor: pointer;
    font-size: 20px;
    font-weight: 400;
    transition: 100ms ease;
    -webkit-user-select: none;
    user-select: none
}

.link:hover {
    color: #fff
}

.mobile-nav-container {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #000
}

.mobile-nav-container .mobile-nav {
    margin: 20px 28px;
    padding-top: 48px;
    font-family: SF Pro Display;
    display: flex;
    font-size: 20px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    flex-direction: column;
    gap: 28px
}

.mobile-nav-container .mobile-nav .link {
    color: #9ba5b1;
    cursor: pointer;
    font-size: 20px;
    font-weight: 400;
    transition: 100ms ease;
    -webkit-user-select: none;
    user-select: none;
    width: 100%;
    border-bottom: 1px solid #9ba5b1;
    opacity: 1
}

.mobile-nav-container .mobile-nav .link:hover {
    color: #fff;
    border-bottom: 1px solid #fff
}

.jJW63ps2_AtetFBAmXVw {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 16px;
    background-color: rgba(255, 255, 255, .15);
    border-radius: 12px
}

.R2dpKcSPS407tgpUUNBD {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    color: #bebebe;
    font-size: 12px;
    line-height: 1.5
}

.cHFC3lf6DO8KPRByP0Mo {
    width: 14px;
    height: 14px
}

.MHDZW1AFy6eR8ZESD9Zp {
    color: #eaeaea;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    min-height: 22px
}

div.testnet-logo {
    display: grid;
    place-items: center;
    font-size: 14px;
    padding: 5px;
    border-radius: 5px;
    color: rgba(255, 255, 255, .5);
    border: 1px solid rgba(255, 255, 255, .2)
}

header.header {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
    overflow: hidden;
    z-index: 1
}

header.header div.navigation a {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    color: #9ba5b1;
    transition: 100ms ease all;
    font-weight: 400;
    font-size: 20px;
    line-height: 20px
}

header.header div.navigation a:hover {
    color: #fff
}

header.header div.header-content-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
    gap: 20px;
    width: 1120px;
    max-width: 100%;
    padding: 0 10px 0 20px;
    height: 84px
}

header.header div.header-content-wrapper div.logo {
    position: relative;
    display: flex;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    gap: 10px;
    overflow: hidden;
    width: 160px;
    margin-top: 3px
}

header.header div.header-content-wrapper div.logo img {
    position: relative;
    display: block;
    width: 160px;
    height: auto;
    transform: translateY(-1px)
}

header.header div.header-content-wrapper div.right-panel {
    min-width: 200px;
    margin-left: auto;
    display: flex;
    gap: 8px
}

@media screen and (max-width: 600px) {
    header.header div.header-content-wrapper div.right-panel {
        flex-direction: column
    }
}

header.header div.header-content-wrapper div.left-panel {
    display: flex;
    align-items: center;
    gap: 72px
}

header.header div.header-content-wrapper div.left-panel[data-testnet=true] {
    gap: 40px
}

@media screen and (max-width: 440px) {
    header.header div.header-content-wrapper div.left-panel {
        gap: 40px
    }

    header.header div.header-content-wrapper div.left-panel[data-testnet=true] {
        gap: 10px
    }
}

@media screen and (max-width: 400px) {
    header.header div.header-content-wrapper div.left-panel {
        flex-direction: column
    }

    header.header div.header-content-wrapper div.left-panel,
    header.header div.header-content-wrapper div.left-panel[data-testnet=true] {
        gap: 30px
    }
}

@media screen and (max-width: 1024px) {
    header.header div.header-content-wrapper div.logo {
        width: 32.5px
    }
}

@media screen and (max-width: 950px) {
    header.header div.header-content-wrapper {
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
        padding: 32px 20px;
        flex-direction: column;
        gap: 28px
    }

    header.header div.header-content-wrapper div.right-panel {
        margin-left: unset
    }
}

@media screen and (max-width: 400px) {
    header.header div.header-content-wrapper div.left-panel {
        flex-direction: column
    }

    header.header div.header-content-wrapper div.left-panel,
    header.header div.header-content-wrapper div.left-panel[data-testnet=true] {
        gap: 30px
    }
}

@media screen and (max-width: 780px) {
    header.header div.header-content-wrapper {
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
        padding: 32px 20px;
        flex-direction: column;
        gap: 28px
    }

    header.header div.header-content-wrapper div.right-panel {
        margin-left: unset
    }
}

header.header-mobile {
    display: flex;
    height: 72px;
    justify-content: center;
    align-items: center;
    background: #000;
    overflow: hidden;
    z-index: 1
}

header.header-mobile div.navigation a {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    color: #9ba5b1;
    transition: 100ms ease all;
    font-weight: 400;
    font-size: 20px;
    line-height: 20px
}

header.header-mobile div.navigation a:hover {
    color: #fff
}

header.header-mobile div.header-content-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-direction: row;
    justify-content: space-between;
    width: 100%
}

header.header-mobile div.header-content-wrapper div.logo {
    position: relative;
    display: flex;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    gap: 10px;
    overflow: hidden;
    width: 160px;
    margin-top: 3px
}

header.header-mobile div.header-content-wrapper div.logo img {
    position: relative;
    display: block;
    width: 160px;
    height: auto;
    transform: translateY(-1px)
}

header.header-mobile div.header-content-wrapper div.right-panel {
    margin-left: auto;
    display: flex;
    gap: 20px
}

header.header-mobile div.header-content-wrapper div.right-panel .account-connected {
    gap: 20px
}

header.header-mobile div.header-content-wrapper div.left-panel {
    display: flex;
    align-items: center;
    gap: 72px
}

header.header-mobile div.header-content-wrapper div.left-panel[data-testnet=true] {
    gap: 40px
}

@media screen and (max-width: 440px) {
    header.header-mobile div.header-content-wrapper div.left-panel {
        gap: 40px
    }

    header.header-mobile div.header-content-wrapper div.left-panel[data-testnet=true] {
        gap: 10px
    }
}

@media screen and (max-width: 400px) {

    header.header-mobile div.header-content-wrapper div.left-panel,
    header.header-mobile div.header-content-wrapper div.left-panel[data-testnet=true] {
        gap: 30px
    }
}

@media screen and (max-width: 1024px) {
    header.header-mobile div.header-content-wrapper div.logo {
        width: 32.5px
    }
}

@media screen and (max-width: 920px) {
    header.header-mobile div.header-content-wrapper {
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
        padding: 32px 20px;
        gap: 28px
    }

    header.header-mobile div.header-content-wrapper div.right-panel {
        margin-left: unset
    }
}

@media screen and (max-width: 400px) {

    header.header-mobile div.header-content-wrapper div.left-panel,
    header.header-mobile div.header-content-wrapper div.left-panel[data-testnet=true] {
        gap: 30px
    }
}

@media screen and (max-width: 780px) {
    header.header-mobile div.header-content-wrapper {
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
        padding: 32px 20px;
        gap: 28px
    }

    header.header-mobile div.header-content-wrapper div.right-panel {
        margin-left: unset
    }
}

div.notification {
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 17px;
    padding: 17px;
    color: #fff;
    background: rgba(62, 62, 62, .4);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(110, 124, 140, .5);
    box-sizing: content-box;
    border-radius: 16px;
    overflow: hidden;
    transition: 300ms ease all;
    opacity: 1;
    transform: translateX(calc(100% + 17px + 40px));
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none
}

div.notification.open {
    transform: translateX(0);
    pointer-events: all
}

div.notification.closing {
    transform: translateX(10);
    pointer-events: none
}

div.notification-icon {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px
}

div.notification-icon svg {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px
}

div.notification-data {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%
}

div.notification-data div.status-text {
    font-weight: 500
}

div.notification-data div.amount-block {
    position: relative;
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: flex-start;
    align-items: center
}

div.notification-data div.amount-block span.amount {
    font-weight: 500
}

div.notification-data div.amount-block div {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    word-break: break-word;
    overflow: hidden;
    font-size: 14px
}

div.notification-data div.amount-block div.right-amount {
    text-align: left;
    padding-left: 15px;
    padding-right: 10px;
    min-width: 80px
}

div.notification-data div.amount-block div.left-amount {
    padding-right: 15px;
    min-width: 80px
}

div.notification-data div.amount-block div.arrow-icon {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    min-width: 20px
}

div.notification::before {
    position: absolute;
    display: block;
    bottom: -20%;
    left: -10%;
    width: 120%;
    height: 25%;
    filter: blur(15px);
    content: ""
}

div.notification div.progress-bar {
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6px;
    border-radius: 10px;
    background: #f2c94c;
    animation: 9800ms linear forwards fade
}

@keyframes fade {
    from {
        width: 100%
    }

    to {
        width: 0
    }
}

div.notification.sent div.notification-data div.status-text {
    color: #f2c94c
}

div.notification.sent::before,
div.notification.sent div.progress-bar {
    background: #f2c94c
}

div.notification.successful div.notification-data div.status-text {
    color: #57a8ff
}

div.notification.successful::before,
div.notification.successful div.progress-bar {
    background: #57a8ff
}

div.notification.error div.notification-data div.status-text {
    color: #dd8181
}

div.notification.error::before,
div.notification.error div.progress-bar {
    background: #dd8181
}

div.notifications-wrapper {
    position: fixed;
    display: flex;
    justify-content: flex-end;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    pointer-events: none
}

div.notifications-wrapper div.notifications-content-wrapper {
    position: relative;
    display: flex;
    width: 310px;
    height: 100%;
    margin-right: 60px;
    padding-top: 60px;
    justify-content: center;
    align-items: flex-start;
    pointer-events: none
}

div.notifications-wrapper div.notifications-content-wrapper div.notifications-list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    width: 100%
}

@media screen and (max-width: 1370px) {
    div.notifications-wrapper {
        justify-content: center;
        align-items: flex-end;
        z-index: 1000
    }

    div.notifications-wrapper div.notifications-content-wrapper {
        align-items: flex-end;
        padding-bottom: 20px;
        margin-right: 0
    }
}

div.testnet-banner {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to right, #3A73B6, #315083)
}

div.testnet-banner a {
    text-decoration: none;
    color: #fff;
    font-size: 16px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 10px;
    gap: 5px;
    transition: 100ms ease all;
    opacity: .9
}

div.testnet-banner a svg * {
    transition: 100ms ease all
}

div.testnet-banner a:hover {
    color: #cdddef;
    opacity: 1
}

div.testnet-banner a:hover svg * {
    stroke: #cdddef
}

div.testnet-banner a div.icon {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px
}

div.testnet-banner div.close-icon {
    position: absolute;
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    right: 40px;
    top: calc(50% - 12px);
    cursor: pointer;
    transition: 100ms ease all
}

div.testnet-banner div.close-icon svg * {
    transition: 100ms ease all
}

div.testnet-banner div.close-icon:hover svg * {
    stroke: #cdddef
}

@media screen and (max-width: 680px) {
    div.testnet-banner div.close-icon {
        right: 20px
    }
}

@media screen and (max-width: 610px) {
    div.testnet-banner {
        padding-right: 40px
    }

    div.testnet-banner div.close-icon {
        right: 20px
    }
}

div.content-wrapper-external {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content ;
    padding: 20px;
}

div.content-wrapper-external div.content-wrapper-internal {
    position: relative;
    display: flex;
    flex-direction: column;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    max-width: 100%
}

div.under-maintenance-text {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 36px;
    max-width: 500px;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    padding-top: 72px;
    padding-bottom: 62px;
    text-align: center
}

div.under-maintenance-text h1 {
    font-weight: 700;
    font-size: 48px;
    line-height: 57px;
    margin: 0;
    padding: 0
}

div.under-maintenance-text h2 {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    margin: 0;
    padding: 0
}

div.under-maintenance-text a {
    color: inherit
}

div.under-maintenance-text a:hover {
    text-decoration: underline
}

div.switch-item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    /* padding: 0 26px; */
    height: 48px;
    min-width: 165px;
    font-size: 14px;
    color: #fff;
    font-weight: 400;
    z-index: 1;
    cursor: pointer
}

div.switch-item.selected {
    pointer-events: none;
    font-weight: 700
}

div.switch {
    position: relative;
    display: flex;
    flex-direction: row;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    height: 48px;
    background: rgba(1, 1, 1, .2);
    border-radius: 24px;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none
}

div.switch div.selector {
    position: absolute;
    height: 100%;
    background: #e30f2e;
    border-radius: 24px;
    transition: 300ms ease all
}

div.switch.disabled {
    pointer-events: none
}

.rate-change {
    position: relative;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
    color: #fff
}

.rate-change.with-arrow {
    padding-left: 20px
}

.rate-change.with-arrow::before {
    border: 5px solid rgba(0, 0, 0, 0);
    content: "";
    display: block;
    left: 5px;
    position: absolute
}

.rate-change-positive {
    color: #7bff78;
    opacity: 1
}

.rate-change-positive::before {
    border-bottom-color: #7bff78 !important;
    top: 2px
}

.rate-change-negative {
    color: #ff3737;
    opacity: 1
}

.rate-change-negative::before {
    border-top-color: #ff3737 !important;
    top: 7.5px
}

.uk-chart {
    align-items: center;
    display: flex;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    width: 100%
}

.uk-chart .uk-chart-placeholder {
    position: absolute;
    width: 100%
}

.uk-chart table,
.uk-chart th,
.uk-chart td {
    border-spacing: 0 !important
}

.chart-button {
    width: 100%;
    max-width: 300px;
    min-width: 180px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .05);
    cursor: pointer;
    transition: 100ms ease all
}

.chart-button:hover {
    box-shadow: 0px 2px 10px 0px rgba(255, 120, 120, .2)
}

.chart-button.active {
    border: 1px solid var(--opacity-pink-20, rgba(255, 120, 120, 0.2));
    background: var(--opacity-pink-10, rgba(255, 120, 120, 0.1))
}

.dashboard-charts-wrapper {
    display: flex;
    flex-direction: column;
    padding: 24px;
    gap: 24px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .05);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px)
}

.dashboard-charts-wrapper div.dashboard-charts-buttons {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px
}

.dashboard-charts-wrapper div.dashboard-charts-buttons .dashboard-charts-button-titles {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%
}

.dashboard-charts-wrapper div.dashboard-charts-buttons .dashboard-charts-button-titles .dashboard-charts-button-title {
    margin: 0;
    color: #fff;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px
}

.dashboard-charts-wrapper div.dashboard-charts-buttons .dashboard-charts-button-description {
    margin: 0;
    color: #fff;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px
}

.dashboard-charts-wrapper div.dashboard-charts-buttons .dashboard-charts-button-usdt-price {
    color: #eaeaea;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px
}

.dashboard-charts-wrapper .dashboard-charts-titles {
    display: flex;
    justify-content: space-between
}

.dashboard-charts-wrapper .dashboard-charts-titles .dashboard-charts-title {
    margin: 0;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px
}

.dashboard-charts-wrapper .dashboard-charts-titles .dashboard-period-switcher {
    padding: 4px;
    height: 38px;
    border-radius: 40px;
    border: 1px solid var(--opacity-white-10, rgba(255, 255, 255, 0.1));
    background: rgba(255, 255, 255, .1)
}

.dashboard-charts-wrapper .dashboard-charts-titles .dashboard-period-switcher .dashboard-period-switcher-item {
    padding: 2px 14px;
    height: 28px;
    min-width: 40px;
    width: 40px
}

.dashboard-charts-wrapper .dashboard-charts-titles .dashboard-period-switcher .selector {
    top: 3px;
    width: 40px !important;
    height: 30px !important
}

.cnR2oWq8Tet4iqOUcBWK {
    position: absolute;
    width: 100%;
    height: 610px;
    top: 0;
    z-index: -1
}

.S8VVUxPfp71cXqOWff5l {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1200px;
    padding: 48px clamp(16px, 3.25vw, 40px);
    margin-inline: auto
}

.gUlHL0dGpaQHXWoYmc8e {
    margin-block: 0;
    color: #fff;
    font-size: 40px;
    line-height: 1.2
}

.column-sort-button {
    padding: 0;
    background: rgba(0, 0, 0, 0);
    display: flex;
    justify-content: center;
    gap: 6px;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    font-style: normal;
    font-weight: 500
}

.column-sort-button .column-sort-button-icon.top-active path:nth-child(1) {
    fill: #e30f2e
}

.column-sort-button .column-sort-button-icon.bottom-active path:nth-child(2) {
    fill: #e30f2e
}

.k_1KArBWcFVxkOGy7JNO {
    padding: 5px 10px;
    background-color: rgb(var(--color)/10%);
    border: 1px solid rgb(var(--color)/10%);
    border-radius: 100px;
    color: rgb(var(--color)/100%);
    font-size: 14px;
    line-height: 1;
    text-transform: capitalize
}

.k_1KArBWcFVxkOGy7JNO[data-status=error] {
    --color: 255 55 55
}

.k_1KArBWcFVxkOGy7JNO[data-status=info] {
    --color: 255 255 255
}

.k_1KArBWcFVxkOGy7JNO[data-status=success] {
    --color: 103 243 159
}

.k_1KArBWcFVxkOGy7JNO[data-status=warning] {
    --color: 242 201 76
}

.table-pagination {
    display: flex;
    gap: 12px;
    align-items: center
}

.table-pagination .table-pagination-input {
    width: 50px;
    padding: 6px 10px;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    border-radius: 10px;
    border: 1px solid var(--opacity-white-10, rgba(255, 255, 255, 0.1));
    background: var(--opacity-white-10, rgba(255, 255, 255, 0.1));
    color: #fff
}

.table-pagination .table-pagination-text {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px
}

.table-pagination .table-pagination-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    width: 32px;
    height: 32px;
    border: 1px solid var(--opacity-white-10, rgba(255, 255, 255, 0.1));
    background: var(--opacity-white-10, rgba(255, 255, 255, 0.1));
    cursor: pointer
}

.table-pagination .table-pagination-btn svg {
    stroke: #fff
}

.table-pagination .table-pagination-btn:disabled {
    border-radius: 100px;
    border: 1px solid var(--opacity-white-5, rgba(255, 255, 255, 0.05));
    background: var(--opacity-white-5, rgba(255, 255, 255, 0.05))
}

.table-pagination .table-pagination-btn:disabled svg {
    stroke: #7d7d7d
}

.BQizmkqs9dIsgmjXGBzJ {
    border-spacing: 0;
    color: #fff;
    width: 100%
}

.bmBqnrytc3cKddjepQQ_,
.RyYxFb7TuEVq7FaqNesr {
    padding: 12px 24px;
    text-align: left;
    font-size: 14px;
    line-height: 30px
}

.bmBqnrytc3cKddjepQQ_:last-of-type,
.RyYxFb7TuEVq7FaqNesr:last-of-type {
    text-align: right
}

.bmBqnrytc3cKddjepQQ_ {
    background-color: rgba(255, 255, 255, .0509803922);
    font-weight: 500
}

.RyYxFb7TuEVq7FaqNesr {
    position: relative
}

.AnWLcZHKh5Lc7E35vtgt:first-of-type .RyYxFb7TuEVq7FaqNesr {
    border-top: 8px solid rgba(0, 0, 0, 0)
}

.AnWLcZHKh5Lc7E35vtgt:last-of-type .RyYxFb7TuEVq7FaqNesr {
    border-bottom: 8px solid rgba(0, 0, 0, 0)
}

.AnWLcZHKh5Lc7E35vtgt:not(:first-of-type) .RyYxFb7TuEVq7FaqNesr {
    border-top: 1px solid rgba(0, 0, 0, 0)
}

.AnWLcZHKh5Lc7E35vtgt:not(:first-of-type) .RyYxFb7TuEVq7FaqNesr::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    border-top: 1px solid rgba(255, 255, 255, .1019607843)
}

.AnWLcZHKh5Lc7E35vtgt:not(:first-of-type) .RyYxFb7TuEVq7FaqNesr:first-of-type::after {
    left: 24px
}

.AnWLcZHKh5Lc7E35vtgt:not(:first-of-type) .RyYxFb7TuEVq7FaqNesr:last-of-type::after {
    right: 24px
}

.FNlDrCsKZomA66XIvTAI {
    padding: 24px;
    text-align: center
}

.FNlDrCsKZomA66XIvTAI>div {
    margin: auto
}

.RcUs3EezwKWU5om49phK {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: rgba(255, 255, 255, .1019607843);
    border: 1px solid rgba(255, 255, 255, .1019607843);
    border-radius: 10px;
    color: #fff;
    font-size: var(--font-size);
    font-weight: 500;
    line-height: 1;
    padding-inline: 10px;
    cursor: pointer
}

.RcUs3EezwKWU5om49phK:hover {
    background-color: rgba(255, 255, 255, .1490196078)
}

.RcUs3EezwKWU5om49phK:active {
    background-color: rgba(255, 255, 255, .0509803922);
    border-color: rgba(255, 255, 255, .0509803922)
}

.LbLW6OC1OxWZShqqp6Xo {
    height: 30px;
    --font-size: 14px
}

.BOoHUsqHcU3BQlQr8YJk {
    height: 36px;
    --font-size: 16px
}

.JlAMR6cNLPeLVFtUexhK {
    width: var(--font-size);
    height: var(--font-size)
}

.drop {
    box-sizing: border-box;
    position: absolute;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    z-index: 1020
}

.drop-hidden {
    display: none
}

[class*=drop-placement-bottom].slide-up-enter.slide-up-enter-active,
[class*=drop-placement-bottom].slide-up-appear.slide-up-appear-active {
    animation-name: slide-up-in
}

[class*=drop-placement-bottom].slide-up-leave.slide-up-leave-active {
    animation-name: slide-up-out
}

[class*=drop-placement-top].slide-up-enter.slide-up-enter-active,
[class*=drop-placement-top].slide-up-appear.slide-up-appear-active {
    animation-name: slide-down-in
}

[class*=drop-placement-top].slide-up-leave.slide-up-leave-active {
    animation-name: slide-down-out
}

.drop-stack .drop-grid>* {
    width: 100% !important
}

.priority-drop-overlay {
    margin-left: 5px;
    padding: 6px 12px;
    border-radius: 8px 8px 8px 0px;
    border: 1px solid var(--opacity-white-10, rgba(255, 255, 255, 0.1));
    background: var(--opacity-white-10, rgba(255, 255, 255, 0.1))
}

.priority-drop-overlay .priority-drop-overlay-description {
    max-width: 300px;
    margin: 0;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    color: #fff
}

.participation-depools-wrapper {
    margin-top: 80px;
    display: flex;
    flex-direction: column;
    gap: 20px
}

.participation-depools-wrapper .participation-depools-title-wrapper {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px
}

.participation-depools-wrapper .participation-depools-title-wrapper .participation-depools-title {
    margin: 0;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    color: var(--common-white, #fff)
}

.participation-depools-wrapper .participation-depool-table-wrapper {
    display: flex;
    flex-direction: column;
    background-color: rgba(255, 255, 255, .0509803922);
    border: 1px solid rgba(255, 255, 255, .1019607843);
    border-radius: 20px;
    overflow: hidden
}

.participation-depools-wrapper .participating-depools-strategy-link {
    color: #fff
}

.participation-depools-wrapper .participating-depools-tvl-delta-next-round {
    height: 38px;
    line-height: 20px;
    display: flex;
    flex-direction: column;
    gap: 5px
}

.participation-depools-wrapper .participating-depools-tvl-delta-next-round-rate-change {
    font-size: 10px
}

.participation-depools-wrapper .participating-depools-footer {
    padding: 0 24px 24px 24px;
    display: flex;
    justify-content: space-between
}

.RjiyQAS4KmAc29Cch1ev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 100px;
    border: 1px solid var(--opacity-white-10, rgba(255, 255, 255, 0.1));
    background: var(--opacity-white-10, rgba(255, 255, 255, 0.1));
    color: #fff;
    font-size: var(--font-size);
    font-weight: 500;
    line-height: 1;
    padding-inline: 10px;
    cursor: pointer
}

.RjiyQAS4KmAc29Cch1ev:hover {
    background-color: rgba(255, 255, 255, .1490196078)
}

.RjiyQAS4KmAc29Cch1ev:active {
    background-color: rgba(255, 255, 255, .0509803922);
    border-color: rgba(255, 255, 255, .0509803922)
}

.ig41lncHi7TfhplNzl85 {
    height: 30px;
    --font-size: 14px
}

.PcF9SQF3ZZNFkFOQU2_B {
    height: 36px;
    --font-size: 16px
}

.vxhUEULJcvqHxc7XXWgW {
    width: var(--font-size);
    height: var(--font-size)
}

.sIYrruogjUM3h1w8L8yM {
    border-radius: 100px;
    background: var(--primary-pink-01, #e30f2e);
    color: #fff
}

.sIYrruogjUM3h1w8L8yM:hover {
    background-color: #e30f2e
}

.rBjB49Ys7wwiAcNVEonv {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 14px
}

.zp0pYQsoGOYsOi35otmO {
    width: 10px;
    height: 10px;
    color: #bebebe
}

.empty-data-wrapper {
    display: flex;
    width: 100%;
    height: 400px;
    padding: 40px 24px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    flex-shrink: 0;
    border-radius: 16px;
    border: 1px solid var(--opacity-white-5, rgba(255, 255, 255, 0.05));
    background: var(--opacity-white-5, rgba(255, 255, 255, 0.05));
    -webkit-backdrop-filter: blur(2.5px);
    backdrop-filter: blur(2.5px)
}

.empty-data-wrapper .empty-data-text {
    margin: 0;
    color: var(--common-white, #fff);
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px
}

.transactions-table-wrapper {
    margin-top: 80px;
    display: flex;
    flex-direction: column;
    gap: 20px
}

.transactions-table-wrapper .transactions-table-title-wrapper {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px
}

.transactions-table-wrapper .transactions-table-title-wrapper .transactions-table-title {
    margin: 0;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    color: var(--common-white, #fff)
}

.transactions-table-wrapper .transactions-table-table-wrapper {
    display: flex;
    flex-direction: column;
    background-color: rgba(255, 255, 255, .0509803922);
    border: 1px solid rgba(255, 255, 255, .1019607843);
    border-radius: 20px;
    overflow: hidden
}

.transactions-table-wrapper .transactions-tables-footer {
    padding: 0 24px 24px 24px;
    display: flex;
    justify-content: space-between
}

.transactions-table-wrapper .transactions-table-switchers {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.transactions-table-wrapper .transactions-table-switcher {
    padding: 4px;
    height: 38px;
    border-radius: 40px;
    border: 1px solid var(--opacity-white-10, rgba(255, 255, 255, 0.1));
    background: rgba(255, 255, 255, .1)
}

.transactions-table-wrapper .transactions-table-switcher .transactions-table-switcher-item {
    padding: 2px 14px;
    height: 28px;
    min-width: 100px;
    width: 100px
}

.transactions-table-wrapper .transactions-table-switcher .selector {
    top: 3px;
    width: 100px !important;
    height: 30px !important
}

.transactions-table-wrapper .strategies-transactions-strategy-link {
    color: #fff
}

.transactions-table-wrapper .transactions-transaction-link {
    justify-content: flex-end
}

.transactions-table-wrapper .transactions-filter-buttons {
    display: flex;
    align-items: center;
    gap: 8px
}

.withdrawals-table-wrapper {
    margin-top: 80px;
    display: flex;
    flex-direction: column;
    gap: 20px
}

.withdrawals-table-wrapper .withdrawals-table-title-wrapper {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px
}

.withdrawals-table-wrapper .withdrawals-table-title-wrapper .withdrawals-table-title {
    margin: 0;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    color: var(--common-white, #fff)
}

.withdrawals-table-wrapper .withdrawals-table-table-wrapper {
    display: flex;
    flex-direction: column;
    background-color: rgba(255, 255, 255, .0509803922);
    border: 1px solid rgba(255, 255, 255, .1019607843);
    border-radius: 20px;
    overflow: hidden
}

.withdrawals-table-wrapper .withdrawals-tables-footer {
    padding: 0 24px 24px 24px;
    display: flex;
    justify-content: space-between
}

.withdrawals-table-wrapper .withdrawals-table-switchers {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.withdrawals-table-wrapper .withdrawals-table-switcher {
    padding: 4px;
    height: 38px;
    border-radius: 40px;
    border: 1px solid var(--opacity-white-10, rgba(255, 255, 255, 0.1));
    background: rgba(255, 255, 255, .1)
}

.withdrawals-table-wrapper .withdrawals-table-switcher .withdrawals-table-switcher-item {
    padding: 2px 14px;
    height: 28px;
    min-width: 100px;
    width: 100px
}

.withdrawals-table-wrapper .withdrawals-table-switcher .selector {
    top: 3px;
    width: 100px !important;
    height: 30px !important
}

.withdrawals-table-wrapper .strategies-withdrawals-strategy-link {
    color: #fff
}

.withdrawals-table-wrapper .withdrawals-transaction-link {
    justify-content: flex-end
}

.withdrawals-table-wrapper .withdrawals-filter-buttons {
    display: flex;
    align-items: center;
    gap: 8px
}

.withdrawals-date-time-header {
    margin-left: auto
}

.Rs3KHB6U7E8rgOwq3s3U {
    margin-block-end: 40px
}

.profile-connect-wallet-container {
    margin-top: 40px;
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    border-radius: 16px;
    border: 1px solid var(--opacity-white-5, rgba(255, 255, 255, 0.05));
    background: var(--opacity-white-5, rgba(255, 255, 255, 0.05));
    -webkit-backdrop-filter: blur(2.5px);
    backdrop-filter: blur(2.5px)
}

.profile-connect-wallet-container .profile-connect-wallet-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px
}

.profile-connect-wallet-container .profile-connect-wallet-text {
    margin: 0;
    color: var(--common-white, #fff);
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px
}

.profile-connect-wallet-container .profile-connect-wallet-button {
    max-width: 175px
}

.profile-deposits-wrapper {
    margin-top: 80px;
    display: flex;
    flex-direction: column;
    gap: 20px
}

.profile-deposits-wrapper .profile-deposits-table-title-wrapper {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px
}

.profile-deposits-wrapper .profile-deposits-table-title-wrapper .profile-deposits-table-title {
    margin: 0;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    color: var(--common-white, #fff)
}

.profile-deposits-wrapper .profile-deposits-table-wrapper {
    display: flex;
    flex-direction: column;
    background-color: rgba(255, 255, 255, .0509803922);
    border: 1px solid rgba(255, 255, 255, .1019607843);
    border-radius: 20px;
    overflow: hidden
}

.profile-deposits-wrapper .profile-deposits-tables-footer {
    padding: 0 24px 24px 24px;
    display: flex;
    justify-content: space-between
}

.profile-deposits-wrapper .profile-deposits-transaction-link {
    justify-content: flex-end
}

.profile-withdrawal-notification-container {
    display: flex;
    padding: 18px 26px 18px 18px;
    align-items: center;
    gap: 12px;
    border-radius: 16px;
    border: 1px solid var(--opacity-white-5, rgba(255, 255, 255, 0.05));
    background: var(--primary-pink-01, #e30f2e);
    -webkit-backdrop-filter: blur(2.5px);
    backdrop-filter: blur(2.5px)
}

.profile-withdrawal-notification-container .profile-withdrawal-notification-texts {
    display: flex;
    flex-direction: column
}

.profile-withdrawal-notification-container .profile-withdrawal-notification-title {
    margin: 0;
    color: var(--common-white, #fff);
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 26px
}

.profile-withdrawal-notification-container .profile-withdrawal-notification-subtitle {
    margin: 0;
    color: var(--common-white, #fff);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px
}

.MHxHK_PKAMbXzSWmhFPw {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.qXopjvdHwB8bySSFeC9w {
    margin-top: 24px !important
}

div.mobile-menu-content {
    margin: 0;
    padding: 0
}

div.mobile-menu-content .NextDistribution {
    padding: 28px 0;
    margin: 0 28px;
    font-size: 20px;
    background-color: rgba(0, 0, 0, 0)
}

div.mobile-menu-content .NextDistribution .NextDistributionTitle {
    margin: 0;
    font-size: 20px;
    color: #9ba5b1
}

div.mobile-menu-content .NextDistribution .NextDistributionIcon {
    width: 24px;
    height: 24px
}

#app-wrapper.mobileMenuOpened {
    background-color: #000
}

.popup {
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 900
}

.popup__wrap {
    background: #ba6463;
    left: 50%;
    max-width: 480px;
    padding: 20px 20px 28px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: 2;
    border-radius: 20px
}

.popup .amount {
    margin: 20px 0
}

@media only screen and (max-width: 500px) {
    .popup__wrap {
        width: 90%
    }
}

.popup_scrollable {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: 0;
    position: static
}

@media only screen and (min-width: 768px) {
    .popup_scrollable {
        align-items: flex-start;
        padding: 128px 0 60px 0
    }
}

.popup_scrollable .popup-overlay {
    position: fixed
}

.popup_scrollable .popup__wrap {
    left: auto;
    position: static;
    transform: none;
    width: 100%
}

.popup-overlay {
    background-color: rgba(0, 0, 0, .5);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

button.popup-close {
    color: #fff;
    height: 40px;
    opacity: .5;
    position: absolute;
    right: 10px;
    top: 12px;
    width: 40px;
    z-index: 2
}

button.popup-close:hover {
    opacity: 1
}

.popup-title {
    font-size: 24px;
    font-weight: 500;
    line-height: 24px;
    margin-bottom: 20px;
    color: #fff
}

@media only screen and (max-width: 767px) {
    .popup-title {
        font-size: 20px
    }
}

.popup-title.center {
    text-align: center
}

.popup-subtitle {
    color: #87a19f
}

.popup-main {
    position: relative;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    justify-content: flex-start;
    padding: 16px;
    width: 100%
}

.popup-main.warning {
    border-color: #e6ac00
}

.popup-main.nb {
    border: 0 none
}

.popup-main.np {
    padding: 0
}

.popup-main.fc {
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, .3);
    flex-direction: column;
    gap: 10px
}

.popup-main__ava {
    border-radius: 50%;
    flex-shrink: 0;
    height: 45px;
    width: 45px
}

.popup-main__ava.success {
    background-color: rgba(41, 114, 41, .5)
}

.popup-main__ava img {
    width: 45px;
    height: 45px
}

.popup-main__ava.error {
    background-color: #951f1f
}

.popup-main_ava {
    margin-right: 10px
}

.popup-main_ava svg {
    width: 32px;
    height: 32px
}

.popup-main__name {
    font-size: 24px;
    font-weight: 500;
    letter-spacing: .5px;
    line-height: 24px;
    max-width: 70vw;
    white-space: normal;
    word-break: break-word;
    text-align: center;
    color: #fff;
    margin-left: 0 !important
}

.popup-main__loader {
    align-items: center;
    display: flex;
    height: 32px;
    justify-content: center;
    margin-right: 16px;
    width: 32px
}

.popup-main__loader svg {
    animation: rotate 1s linear infinite;
    fill: #fff
}

.popup-wallet-main {
    padding: 16px 12px;
    display: flex;
    align-items: center;
    background: rgba(6, 48, 44, .5);
    border-radius: 16px
}

.popup-wallet-main svg path {
    fill: #fff
}

.popup-wallet-txt {
    margin-top: 24px;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: rgba(255, 255, 255, .5)
}

.popup-wallet-txt a {
    color: #09c790
}

.popup-txt {
    color: rgba(255, 255, 255, .8);
    font-size: 14px;
    letter-spacing: .4px;
    line-height: 20px;
    margin: 20px 0
}

.popup-txt.lg {
    color: #fff;
    font-size: 18px;
    letter-spacing: .75px;
    line-height: 24px
}

.popup-txt.center {
    text-align: center
}

.popup-txt p {
    margin: .8em 0
}

.popup-txt p:last-child {
    margin-bottom: 0
}

.popup-txt a {
    color: rgba(255, 255, 255, .8);
    text-decoration: underline
}

.popup-txt a:hover {
    color: #c5e4f3
}

.popup-txt strong {
    color: #fff;
    display: block;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .25px;
    line-height: 20px
}

.popup-txt:last-child {
    margin-bottom: 0
}

.popup-sfr-txt {
    color: #fff;
    font-size: 18px;
    letter-spacing: .75px;
    line-height: 24px;
    margin-top: 30px
}

.popup-sfr-wallet-txt {
    margin-top: 10px;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: rgba(255, 255, 255, .5)
}

.popup-actions {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-top: 48px
}

.popup-actions .btn {
    margin: 0
}

.popup-vl {
    float: left;
    background-color: #fff;
    margin-right: 10px;
    width: 4px;
    height: 75px;
    border-radius: 2px
}

.terms {
    max-height: 60vh;
    overflow: auto;
    padding: 0 16px 0 0
}

.terms::-webkit-scrollbar {
    width: 4px
}

.terms::-webkit-scrollbar-track {
    background: #e07877;
    border-radius: 8px
}

.terms::-webkit-scrollbar-thumb {
    background: #9e5556;
    border-radius: 8px
}

.terms h1 {
    margin-bottom: 10px;
    margin-top: 25px;
    font-weight: 600;
    color: #fff
}

.terms h2 {
    color: #e2e2e2;
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 22px
}

.terms p {
    color: #fff;
    line-height: 1.2;
    letter-spacing: 1px;
    margin-bottom: 15px;
    font-weight: normal
}

.terms p strong {
    color: #fff;
    font-weight: bold
}

.terms ol li {
    margin-bottom: 15px;
    color: #e2e2e2;
    list-style: decimal inside
}

.terms ol.alpha li {
    margin-left: 25px;
    margin-bottom: 15px;
    color: #acacac;
    list-style: upper-alpha
}

.terms ul li {
    margin-bottom: 15px;
    color: #e2e2e2;
    list-style: circle
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
    line-height: 1.15;
    /* 1 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
    margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
    display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
    box-sizing: content-box;
    /* 1 */
    height: 0;
    /* 1 */
    overflow: visible;
    /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
    background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
    border-bottom: none;
    /* 1 */
    text-decoration: underline;
    /* 2 */
    text-decoration: underline dotted;
    /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
    font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
    border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    /* 1 */
    font-size: 100%;
    /* 1 */
    line-height: 1.15;
    /* 1 */
    margin: 0;
    /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input {
    /* 1 */
    overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select {
    /* 1 */
    text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
    padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
    box-sizing: border-box;
    /* 1 */
    color: inherit;
    /* 2 */
    display: table;
    /* 1 */
    max-width: 100%;
    /* 1 */
    padding: 0;
    /* 3 */
    white-space: normal;
    /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
    vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
    overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    /* 1 */
    padding: 0;
    /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
    -webkit-appearance: textfield;
    /* 1 */
    outline-offset: -2px;
    /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
    -webkit-appearance: button;
    /* 1 */
    font: inherit;
    /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
    display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
    display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
    display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
    display: none;
}

@font-face {
    font-family: sf pro display;
    font-style: normal;
    font-weight: 400;
    src: local('SF Pro Display'), url(data:font/woff;base64,ZXhwb3J0IGRlZmF1bHQgX193ZWJwYWNrX3B1YmxpY19wYXRoX18gKyAiZm9udHMvU0ZQUk9ESVNQTEFZUkVHVUxBUi53b2ZmIjs=) format('woff'),
        url(d1f5e6e16dd4f75c3950.OTF) format("opentype");
}

@font-face {
    font-family: sf pro display;
    font-style: italic;
    font-weight: 100;
    src: local('SF Pro Display'), url(data:font/woff;base64,ZXhwb3J0IGRlZmF1bHQgX193ZWJwYWNrX3B1YmxpY19wYXRoX18gKyAiZm9udHMvU0ZQUk9ESVNQTEFZVUxUUkFMSUdIVElUQUxJQy53b2ZmIjs=) format('woff'),
        url(b90d5d0f41170f11b87e.OTF) format("opentype");
}

@font-face {
    font-family: sf pro display;
    font-style: italic;
    font-weight: 200;
    src: local('SF Pro Display'), url(data:font/woff;base64,ZXhwb3J0IGRlZmF1bHQgX193ZWJwYWNrX3B1YmxpY19wYXRoX18gKyAiZm9udHMvU0ZQUk9ESVNQTEFZVEhJTklUQUxJQy53b2ZmIjs=) format('woff'),
        url(3d2597acea660678af19.OTF) format("opentype");
}

@font-face {
    font-family: sf pro display;
    font-style: italic;
    font-weight: 300;
    src: local('SF Pro Display'), url(data:font/woff;base64,ZXhwb3J0IGRlZmF1bHQgX193ZWJwYWNrX3B1YmxpY19wYXRoX18gKyAiZm9udHMvU0ZQUk9ESVNQTEFZTElHSFRJVEFMSUMud29mZiI7) format('woff'),
        url(8dbfd26d5a831ca710e0.OTF) format("opentype");
}

@font-face {
    font-family: sf pro display;
    font-style: normal;
    font-weight: 500;
    src: local('SF Pro Display'), url(data:font/woff;base64,ZXhwb3J0IGRlZmF1bHQgX193ZWJwYWNrX3B1YmxpY19wYXRoX18gKyAiZm9udHMvU0ZQUk9ESVNQTEFZTUVESVVNLndvZmYiOw==) format('woff'),
        url(b85d841dacb040b84951.OTF) format("opentype");
}

@font-face {
    font-family: sf pro display;
    font-style: italic;
    font-weight: 600;
    src: local('SF Pro Display'), url(data:font/woff;base64,ZXhwb3J0IGRlZmF1bHQgX193ZWJwYWNrX3B1YmxpY19wYXRoX18gKyAiZm9udHMvU0ZQUk9ESVNQTEFZU0VNSUJPTERJVEFMSUMud29mZiI7) format('woff'),
        url(83c857f3c60b41485937.OTF) format("opentype");
}

@font-face {
    font-family: sf pro display;
    font-style: normal;
    font-weight: 700;
    src: local('SF Pro Display'), url(data:font/woff;base64,ZXhwb3J0IGRlZmF1bHQgX193ZWJwYWNrX3B1YmxpY19wYXRoX18gKyAiZm9udHMvU0ZQUk9ESVNQTEFZQk9MRC53b2ZmIjs=) format('woff'),
        url(b1f4d2c69fa808ebca12.OTF) format("opentype");
}

@font-face {
    font-family: sf pro display;
    font-style: italic;
    font-weight: 800;
    src: local('SF Pro Display'), url(data:font/woff;base64,ZXhwb3J0IGRlZmF1bHQgX193ZWJwYWNrX3B1YmxpY19wYXRoX18gKyAiZm9udHMvU0ZQUk9ESVNQTEFZSEVBVllJVEFMSUMud29mZiI7) format('woff'),
        url(4e2238d8a1afd9136259.OTF) format("opentype");
}

@font-face {
    font-family: sf pro display;
    font-style: italic;
    font-weight: 900;
    src: local('SF Pro Display'), url(data:font/woff;base64,ZXhwb3J0IGRlZmF1bHQgX193ZWJwYWNrX3B1YmxpY19wYXRoX18gKyAiZm9udHMvU0ZQUk9ESVNQTEFZQkxBQ0tJVEFMSUMud29mZiI7) format('woff'),
        url(bf4f55c98ce6b6478da6.OTF) format("opentype");
}

@font-face {
    font-family: 'Gilroy';
    src: url(data:application/vnd.ms-fontobject;base64,ZXhwb3J0IGRlZmF1bHQgX193ZWJwYWNrX3B1YmxpY19wYXRoX18gKyAiZm9udHMvR2lscm95LVNlbWlCb2xkLmVvdCI7);
    src: local('Gilroy SemiBold'), local('Gilroy-SemiBold'),
        url(data:application/vnd.ms-fontobject;base64,ZXhwb3J0IGRlZmF1bHQgX193ZWJwYWNrX3B1YmxpY19wYXRoX18gKyAiZm9udHMvR2lscm95LVNlbWlCb2xkLmVvdCI7?#iefix) format('embedded-opentype'),
        url(data:font/woff;base64,ZXhwb3J0IGRlZmF1bHQgX193ZWJwYWNrX3B1YmxpY19wYXRoX18gKyAiZm9udHMvR2lscm95LVNlbWlCb2xkLndvZmYiOw==) format('woff'),
        url(data:font/ttf;base64,ZXhwb3J0IGRlZmF1bHQgX193ZWJwYWNrX3B1YmxpY19wYXRoX18gKyAiZm9udHMvR2lscm95LVNlbWlCb2xkLnR0ZiI7) format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Gilroy';
    src: url(data:application/vnd.ms-fontobject;base64,ZXhwb3J0IGRlZmF1bHQgX193ZWJwYWNrX3B1YmxpY19wYXRoX18gKyAiZm9udHMvR2lscm95LUxpZ2h0LmVvdCI7);
    src: local('Gilroy Light'), local('Gilroy-Light'),
        url(data:application/vnd.ms-fontobject;base64,ZXhwb3J0IGRlZmF1bHQgX193ZWJwYWNrX3B1YmxpY19wYXRoX18gKyAiZm9udHMvR2lscm95LUxpZ2h0LmVvdCI7?#iefix) format('embedded-opentype'),
        url(data:font/woff;base64,ZXhwb3J0IGRlZmF1bHQgX193ZWJwYWNrX3B1YmxpY19wYXRoX18gKyAiZm9udHMvR2lscm95LUxpZ2h0LndvZmYiOw==) format('woff'),
        url(data:font/ttf;base64,ZXhwb3J0IGRlZmF1bHQgX193ZWJwYWNrX3B1YmxpY19wYXRoX18gKyAiZm9udHMvR2lscm95LUxpZ2h0LnR0ZiI7) format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Gilroy';
    src: url(data:application/vnd.ms-fontobject;base64,ZXhwb3J0IGRlZmF1bHQgX193ZWJwYWNrX3B1YmxpY19wYXRoX18gKyAiZm9udHMvR2lscm95LVJlZ3VsYXIuZW90Ijs=);
    src: local('Gilroy Regular'), local('Gilroy-Regular'),
        url(data:application/vnd.ms-fontobject;base64,ZXhwb3J0IGRlZmF1bHQgX193ZWJwYWNrX3B1YmxpY19wYXRoX18gKyAiZm9udHMvR2lscm95LVJlZ3VsYXIuZW90Ijs=?#iefix) format('embedded-opentype'),
        url(data:font/woff;base64,ZXhwb3J0IGRlZmF1bHQgX193ZWJwYWNrX3B1YmxpY19wYXRoX18gKyAiZm9udHMvR2lscm95LVJlZ3VsYXIud29mZiI7) format('woff'),
        url(data:font/ttf;base64,ZXhwb3J0IGRlZmF1bHQgX193ZWJwYWNrX3B1YmxpY19wYXRoX18gKyAiZm9udHMvR2lscm95LVJlZ3VsYXIudHRmIjs=) format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gilroy';
    src: local('Gilroy Bold'), local('Gilroy-Bold'),
        url(data:application/vnd.ms-fontobject;base64,ZXhwb3J0IGRlZmF1bHQgX193ZWJwYWNrX3B1YmxpY19wYXRoX18gKyAiZm9udHMvR2lscm95LUJvbGQuZW90Ijs=?#iefix) format('embedded-opentype'),
        url(data:font/woff;base64,ZXhwb3J0IGRlZmF1bHQgX193ZWJwYWNrX3B1YmxpY19wYXRoX18gKyAiZm9udHMvR2lscm95LUJvbGQud29mZiI7) format('woff'),
        url(data:font/ttf;base64,ZXhwb3J0IGRlZmF1bHQgX193ZWJwYWNrX3B1YmxpY19wYXRoX18gKyAiZm9udHMvR2lscm95LUJvbGQudHRmIjs=) format('truetype');
    font-weight: bold;
    font-style: normal;
}

body,
html {
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    overflow: hidden;
    overflow-y: auto;
    width: 100%;
    height: 100%;
    background-color: #252525
}

* {
    font-family: "SF Pro Display", sans-serif;
    box-sizing: border-box;
    letter-spacing: .5px;
    outline: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: none
}

*::selection {
    background-color: #e30f2e
}

*::-moz-selection {
    background: #e30f2e
}

#root {
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: "SF Pro Display", sans-serif;
    font-weight: 400;
    overflow: hidden;
    width: 100%;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content
}

div.background-drawer {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh
}

div.background-drawer img {
    position: absolute;
    display: block
}

div.background-drawer img.gradient {
    top: 60px;
    left: -20px;
    object-fit: cover;
    width: calc(100% + 40px);
    height: 80vh;
    filter: blur(25px)
}

div.background-drawer img.right-object,
div.background-drawer img.left-object {
    top: 200px;
    opacity: .65;
    filter: brightness(200%);
    transform: scale(1.3, 1.3)
}

div.background-drawer img.right-object {
    right: 0;
    transform-origin: right;
    top: 400px
}

div.background-drawer img.left-object {
    left: 0;
    transform-origin: left
}

@media screen and (max-width: 1500px) {
    div.background-drawer img.gradient {
        min-height: 80vh
    }

    div.background-drawer img.right-object {
        top: 250px;
        transform: scale(1, 1)
    }

    div.background-drawer img.left-object {
        top: 100px;
        transform: scale(1, 1)
    }
}

@media screen and (max-width: 1000px) {
    div.background-drawer img.gradient {
        min-height: 125vh
    }

    div.background-drawer img.right-object {
        transform: scale(1.1, 1.1)
    }

    div.background-drawer img.left-object {
        transform: scale(1.1, 1.1)
    }
}

@media screen and (max-width: 920px) {
    div.background-drawer img.right-object {
        right: -20px;
        transform: scale(1.2, 1.2)
    }

    div.background-drawer img.left-object {
        left: -20px;
        transform: scale(1.2, 1.2)
    }
}

@media screen and (max-width: 800px) {
    div.background-drawer img.right-object {
        right: -20px;
        transform: scale(1, 1)
    }

    div.background-drawer img.left-object {
        left: -20px;
        transform: scale(1, 1)
    }
}

@media screen and (max-width: 670px) {

    div.background-drawer img.right-object,
    div.background-drawer img.left-object {
        top: 180px
    }

    div.background-drawer img.right-object {
        right: -30px;
        transform: scale(1, 1);
        top: 280px
    }

    div.background-drawer img.left-object {
        left: -30px;
        transform: scale(1, 1)
    }

    div.background-drawer img.gradient {
        min-height: 145vh
    }
}

@media screen and (max-width: 580px) {

    div.background-drawer img.right-object,
    div.background-drawer img.left-object {
        transform: scale(1.2, 1.2);
        top: 180px
    }

    div.background-drawer img.right-object {
        right: -100px;
        top: 280px
    }

    div.background-drawer img.left-object {
        left: -200px
    }

    div.background-drawer img.gradient {
        min-height: 155vh
    }
}

@media screen and (max-width: 420px) {

    div.background-drawer img.right-object,
    div.background-drawer img.left-object {
        transform: scale(1.2, 1.2);
        top: 180px
    }

    div.background-drawer img.right-object {
        right: -120px;
        top: 280px
    }

    div.background-drawer img.left-object {
        left: -260px
    }

    div.background-drawer img.gradient {
        min-height: 170vh
    }
}

div.background-drawer-mobile {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh
}

div.background-drawer-mobile img {
    position: absolute;
    display: block
}

div.background-drawer-mobile img.gradient {
    top: 60px;
    left: -20px;
    object-fit: cover;
    width: calc(100% + 40px);
    height: 80vh;
    filter: blur(25px)
}

div.background-drawer-mobile img.right-object,
div.background-drawer-mobile img.left-object {
    top: 200px;
    opacity: .65;
    filter: brightness(200%);
    transform: scale(1.3, 1.3)
}

div.background-drawer-mobile img.right-object {
    right: 0;
    transform-origin: right;
    top: 400px
}

div.background-drawer-mobile img.left-object {
    left: 0;
    transform-origin: left
}

@media screen and (max-width: 1500px) {
    div.background-drawer-mobile img.gradient {
        min-height: 80vh
    }

    div.background-drawer-mobile img.right-object {
        top: 250px;
        transform: scale(1, 1)
    }

    div.background-drawer-mobile img.left-object {
        top: 100px;
        transform: scale(1, 1)
    }
}

@media screen and (max-width: 1000px) {
    div.background-drawer-mobile img.gradient {
        min-height: 125vh
    }

    div.background-drawer-mobile img.right-object {
        transform: scale(1.1, 1.1)
    }

    div.background-drawer-mobile img.left-object {
        transform: scale(1.1, 1.1)
    }
}

@media screen and (max-width: 920px) {
    div.background-drawer-mobile img.right-object {
        right: -20px;
        transform: scale(1.2, 1.2)
    }

    div.background-drawer-mobile img.left-object {
        left: -20px;
        transform: scale(1.2, 1.2)
    }
}

@media screen and (max-width: 800px) {
    div.background-drawer-mobile img.right-object {
        right: -20px;
        transform: scale(1, 1)
    }

    div.background-drawer-mobile img.left-object {
        left: -20px;
        transform: scale(1, 1)
    }
}

@media screen and (max-width: 670px) {

    div.background-drawer-mobile img.right-object,
    div.background-drawer-mobile img.left-object {
        top: 180px
    }

    div.background-drawer-mobile img.right-object {
        right: -30px;
        transform: scale(1, 1);
        top: 280px
    }

    div.background-drawer-mobile img.left-object {
        left: -30px;
        transform: scale(1, 1)
    }

    div.background-drawer-mobile img.gradient {
        min-height: 145vh
    }
}

@media screen and (max-width: 580px) {

    div.background-drawer-mobile img.right-object,
    div.background-drawer-mobile img.left-object {
        transform: scale(1.2, 1.2);
        top: 180px
    }

    div.background-drawer-mobile img.right-object {
        right: -100px;
        top: 280px
    }

    div.background-drawer-mobile img.left-object {
        left: -200px
    }

    div.background-drawer-mobile img.gradient {
        min-height: 155vh
    }
}

@media screen and (max-width: 420px) {

    div.background-drawer-mobile img.right-object,
    div.background-drawer-mobile img.left-object {
        transform: scale(1.2, 1.2);
        top: 180px
    }

    div.background-drawer-mobile img.right-object {
        right: -120px;
        top: 280px
    }

    div.background-drawer-mobile img.left-object {
        left: -260px
    }

    div.background-drawer-mobile img.gradient {
        min-height: 170vh
    }
}

#app-wrapper {
    display: flex;
    overflow-x: hidden;
    flex-direction: column;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    min-height: 100vh;
    color: #fff
}

#app-wrapper div.page-content {
    padding: 0 20px
}

div.faq-block {
    padding-bottom: 50px
}

a {
    text-decoration: none;
    color: #fff;
    opacity: .5
}

a:hover {
    opacity: .9
}

@media screen and (max-width: 800px) {
    div.stat-blocks {
        flex-direction: column;
        justify-content: center;
        align-items: center
    }
}

@media screen and (max-width: 380px) {
    #app-wrapper div.page-content {
        padding: 0 10px
    }
}

.strategy-rounds-wrapper {
    margin-top: 80px;
    display: flex;
    flex-direction: column;
    gap: 20px
}

.strategy-rounds-wrapper .strategy-rounds-title {
    margin: 0;
    color: var(--common-white, #fff);
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    text-align: left
}

.strategy-rounds-wrapper .strategy-rounds-blocks {
    display: flex;
    gap: 12px
}

.strategy-rounds-wrapper .strategy-rounds-block {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    flex: 1 0 0;
    border-radius: 14px;
    border: 1px solid var(--opacity-white-10, rgba(255, 255, 255, 0.1));
    background: var(--opacity-white-5, rgba(255, 255, 255, 0.05))
}

.strategy-rounds-wrapper .strategy-rounds-block-label {
    color: var(--grey-40, #bebebe);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px
}

.strategy-rounds-wrapper .strategy-rounds-block-amount {
    color: var(--common-white, #fff);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px
}

.strategy-transactions-wrapper {
    margin-top: 80px;
    display: flex;
    flex-direction: column;
    gap: 20px
}

.strategy-transactions-wrapper .strategy-transactions-table-title-wrapper {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px
}

.strategy-transactions-wrapper .strategy-transactions-table-title-wrapper .strategy-transactions-table-title {
    margin: 0;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    color: var(--common-white, #fff)
}

.strategy-transactions-wrapper .strategy-transactions-table-wrapper {
    display: flex;
    flex-direction: column;
    background-color: rgba(255, 255, 255, .0509803922);
    border: 1px solid rgba(255, 255, 255, .1019607843);
    border-radius: 20px;
    overflow: hidden
}

.strategy-transactions-wrapper .strategy-transactions-tables-footer {
    padding: 0 24px 24px 24px;
    display: flex;
    justify-content: space-between
}

.strategy-transactions-wrapper .strategy-transactions-transaction-link {
    justify-content: flex-end
}

.uMfE3TFfSBnhyOnJyMBA {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    padding: 24px;
    gap: 24px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .05);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px)
}

.ZPLfsbuRp9AJ0X0_NrLa {
    display: flex;
    justify-content: space-between
}

.B8MMRyttFx7vmz4GiYFw {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.vBrQ71LVcTNHXHkLYzwm {
    display: flex;
    align-items: center;
    gap: 12px
}

.sMFHdTx5gBCxj0VZoGWB {
    margin: 0;
    color: var(--common-white, #fff);
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 22px
}

.F2AvW8pfqm5HkSU7d2f7 {
    display: flex;
    align-items: center;
    gap: 8px
}

.ASh0lEA4ymstitWRRV8L {
    color: var(--common-white, #fff);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px
}

.MNxKxYQhz4hQHQtwKDKz {
    color: var(--grey-20, #eaeaea);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px
}

.RAUmRC0SYVQYHzQAQ0tA {
    padding: 4px;
    height: 38px !important;
    border-radius: 40px !important;
    border: 1px solid var(--opacity-white-10, rgba(255, 255, 255, 0.1));
    background: rgba(255, 255, 255, .1) !important
}

.RAUmRC0SYVQYHzQAQ0tA div:last-child {
    top: 3px !important;
    width: 40px !important;
    height: 30px !important
}

.iTAorXRbBPa9gT7Z0iko {
    padding: 2px 14px !important;
    height: 28px !important;
    min-width: 40px !important;
    width: 40px !important
}

.strategy-withdrawals-wrapper {
    margin-top: 80px;
    display: flex;
    flex-direction: column;
    gap: 20px
}

.strategy-withdrawals-wrapper .strategy-withdrawals-header {
    display: flex;
    justify-content: space-between
}

.strategy-withdrawals-wrapper .strategy-withdrawals-filter-buttons {
    display: flex;
    align-items: center;
    gap: 8px
}

.strategy-withdrawals-wrapper .strategy-withdrawals-table-title-wrapper {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px
}

.strategy-withdrawals-wrapper .strategy-withdrawals-table-title-wrapper .strategy-withdrawals-table-title {
    margin: 0;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    color: var(--common-white, #fff)
}

.strategy-withdrawals-wrapper .strategy-withdrawals-table-wrapper {
    display: flex;
    flex-direction: column;
    background-color: rgba(255, 255, 255, .0509803922);
    border: 1px solid rgba(255, 255, 255, .1019607843);
    border-radius: 20px;
    overflow: hidden
}

.strategy-withdrawals-wrapper .strategy-withdrawals-tables-footer {
    padding: 0 24px 24px 24px;
    display: flex;
    justify-content: space-between
}

.strategy-withdrawals-wrapper .strategy-withdrawals-transaction-link {
    justify-content: flex-end
}

.Q1p8u2MsUHKt9LATRUcA {
    display: flex;
    align-items: center;
    gap: 16px
}

.BZWmj7orHzytzUUxPkFu {
    padding: 5px 12px;
    line-height: 22px;
    text-transform: none
}

.BZWmj7orHzytzUUxPkFu::first-letter {
    text-transform: uppercase
}

.yo6fhXeKCuN4JAlnE6U_ {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 16px
}

.sfsld4H8afA9o8ZoUXWg {
    color: var(--common-white, #fff);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px
}

.cgD03dRPtbEF1fpDZ1gc {
    width: 1px;
    height: 22px;
    background: rgba(255, 255, 255, .1)
}

.accordion-item .arrow-icon img {
  transition: transform 0.3s ease; /* smooth rotation */
}

.accordion-item.active .arrow-icon img {
  transform: rotate(180deg); /* flip arrow */
}

/* .hidden {
  display: none;
}

.switch-item {
  cursor: pointer;
  transition: 0.3s;
}

.switch-item.selected {
  font-weight: bold;
  color: #fff;
  background: #ff0b0b;
} */

/* Container and typography */
.container {
    max-width: 1200px;
    margin: 0 auto 40px auto;
    padding: 0 20px;
    color: #ffffff;
}

.heading-center {
    text-align: center;
    margin-bottom: 36px;
}

.heading-center h1 {
    font-weight: 700;
    font-size: 2.15rem;
    color: #fff;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

.heading-center p {
    font-size: 1.15rem;
    color: #ffffff;
    margin: 0;
}

/* Grid layout for cards */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
}

/* Individual card styling */
.pool-card {
    background-color: #212325;
    border-radius: 12px;
    padding: 42px 26px 32px 26px;
    box-shadow: 0 2px 10px rgba(233, 2, 2, 0.582);
    border: 1.5px solid transparent;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.16s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Hover and focus effect */
.pool-card:hover,
.pool-card:focus-within {
    border-color: #e30f2e;
    box-shadow: 0 6px 26px rgba(255, 50, 50, 0.09);
    transform: translateY(-4px) scale(1.032);
    cursor: pointer;
}

/* Icon styling */
.card-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 22px;
}

.pool-icon {
    font-size: 2.3rem;
    line-height: 1;
    margin-bottom: 18px;
}

/* Title styling */
.pool-title {
    font-weight: 600;
    font-size: 1.22rem;
    color: #fff;
}

/* Description container */
.stats-grid {
    width: 100%;
}

.stat-row {
    display: flex;
    flex-direction: column;
}

.stat-label {
    display: none; /* Hidden but kept for semantic markup */
}

.stat-value {
    font-size: 1rem;
    font-weight: 400;
    color: #fdfeff;
    line-height: 1.5;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }
    .pool-card {
        padding: 28px 18px 22px 18px;
    }
}

@media (max-width: 600px) {
    .cards-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .pool-card {
        padding: 24px 16px 20px 16px;
    }
}


input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* For Firefox */
input[type=number] {
  -moz-appearance: textfield;
}




/* stack month  */


body {
  background: #222829;
  color: #fff;
  font-family: 'Segoe UI', Arial, sans-serif;
}

/* Container */
.lock-duration-container {
  /* background: #232625; */
  border-radius: 8px;
  /* max-width: 500px; */
  margin: 40px auto;
  /* padding: 32px 24px 28px 24px; */
  box-sizing: border-box;
}

/* Header Row */
.header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.lock-duration-title {
  font-weight: bold;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}

.lock-duration-value {
  color: #62ff00a5;
  font-size: 1.08rem;
  font-weight: bold;
}

/* Slider */
.slider-row {
  width: 100%;
  margin-bottom: 10px;
}
.lock-slider {
  width: 100%;
  appearance: none;
  background: #393e40;
  height: 8px;
  border-radius: 5px;
  outline: none;
  margin: 0;
}

.lock-slider::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  background: #e30f2e;
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid #232625;
  margin-top: -6px;
}
.lock-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #e30f2e;
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid #232625;
}
.lock-slider::-ms-thumb {
  width: 20px;
  height: 20px;
  background: #e30f2e;
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid #232625;
}
.lock-slider:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 2px #e30f2e;
}
.lock-slider::-ms-fill-lower {
  background: #393e40;
}
.lock-slider::-ms-fill-upper {
  background: #393e40;
}

.labels-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.95rem;
  color: #aaa;
  margin-bottom: 28px;
}
.labels-row span:nth-child(2) {
  text-align: center;
}

/* Buttons Row */
.buttons-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.buttons-row button {
  background: transparent;
  border: 1.5px solid #454748;
  color: #fff;
  border-radius: 3px;
  padding: 10px 22px;
  font-size: 1.03rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s, border 0.2s;
}
.buttons-row button.active,
.buttons-row button:hover {
  background: #e30f2e;
  color: #ffffff;
  border-color: #e30f2e;
}

/* Responsive */
@media (max-width: 700px) {
  /* .lock-duration-container {
    padding: 18px 4vw;
  } */
  .header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .buttons-row button {
    flex: 1 1 45%;
    padding: 10px 0;
    min-width: 70px;
  }
  .buttons-row {
    gap: 6px;
  }
  div.title-text h1 {
    font-size: 34px !important;
    line-height: 39px !important;
}
div.title-text {

    padding-top: 50px !important;
    padding-bottom: 20px !important;
}
}

    .stake-btn {
      display: block;
      margin:30px auto  0px auto; /* centers horizontally */
      background-color: #e30f2e;
      color: #fff;
      padding: 15px 30px;
      font-size: 18px;
      font-weight: bold;
      border: none;
      border-radius: 12px;
      cursor: pointer;
      transition: background-color 0.3s ease, transform 0.2s ease;
      width: auto; /* desktop default */
      text-align: center;
    }

    .stake-btn:hover {
      background-color: #ff4c5f; /* lighter hover */
      transform: translateY(-2px);
    }

    /* Mobile view → full width button */
    @media (max-width: 768px) {
      .stake-btn {
        width: 90%;
        padding: 18px;
        font-size: 20px;
      }
    }

    /* Responsive: when screen ≤ 430px */
    @media (max-width: 430px) {
      .vertical-list.stat-blocks {
        /* flex-direction: row !important;   
        justify-content: center !important;
        flex-wrap: nowrap !important; */
        gap: 8px !important;
        max-width: 365 !important;      /* row total width */
      }

      .stats-block {
        flex: 1;               /* equal size */
        max-width: 130px !important;      /* ensures 3 fit in 430px */
        padding: 10px 8px !important;
      }

      .stats-block .amount {
        font-size: 18px !important;
        line-height: 22px !important;
      }

      .stats-block .description {
        font-size: 8px !important;
      }
    }
/* 
    .highlights{
        color: #ef0e24;
    } */

/*  privacy olicy design */
.nw-wrapper {
  max-width: 950px;
  margin: 2rem auto;
  padding: 1.5rem;
}

.nw-section h2 {
  text-align: center;
  color: #fff;   /* white heading */
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-size: 1.6rem;
  position: relative;
}

.nw-section h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: #e30f2e;
  margin: 0.6rem auto 0 auto;
  border-radius: 2px;
}

.nw-meta {
  font-size: 0.9rem;
  color: #ccc;
  margin-bottom: 1rem;
  text-align: center;
}

.nw-section p {
  margin: 0.5rem 0;
  color: #eee;
  line-height: 1.6;
}

.nw-link {
  color: #ffffff;
  text-decoration: none;
  font-weight: 800;
}

.nw-link:hover {
  text-decoration: underline;
  color: #e30f2e;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .nw-wrapper {
    margin: 1rem;
    padding: 1rem;
  }

  .nw-section h2 {
    font-size: 1.3rem;
  }

  .nw-section p {
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  .nw-section h2 {
    font-size: 1.1rem;
  }

  .nw-section p {
    font-size: 0.9rem;
    line-height: 1.5;
  }

  .nw-meta {
    font-size: 0.8rem;
  }

}


 /* Checkbox + label wrapper */
    .nw-consent {
      color: #fff;
      font-size: 0.95rem;
    }

    .nw-consent input[type="checkbox"] {
      margin-right: 8px;
      transform: scale(1.1);
      vertical-align: middle;
    }

    .nw-link {
      color: #e30f2e;
      text-decoration: underline;
      cursor: pointer;
    }

    /* Modal setup */
    .nw-modal {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0,0,0,0.75);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      padding: 1rem;
    }

    .nw-modal-content {
      max-width: 600px;
      background: #222;
      color: #eee;
      padding: 1.5rem;
      border-radius: 10px;
      position: relative;
      max-height: 80vh;
      overflow-y: auto;
    }

    .nw-modal-content h2 {
      text-align: center;
      color: #e30f2e;
      margin-bottom: 1rem;
    }

    /* Close button */
    .nw-close {
      position: absolute;
      top: 10px; right: 15px;
      font-size: 1.5rem;
      color: #e30f2e;
      text-decoration: none;
      cursor: pointer;
    }

    /* Use :target to open modal */
    #tos:target,
    #privacy:target {
      display: flex;
    }

    @media (max-width: 480px) {
      .nw-modal-content {
        padding: 1rem;
        font-size: 0.9rem;
      }
    }