html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline
}

html {
    line-height: 1
}

ol, ul {
    list-style: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

caption, th, td {
    text-align: left;
    font-weight: 400;
    vertical-align: middle
}

q, blockquote {
    quotes: none
}

    q:before, q:after {
        content: ""
    }

    blockquote:before, blockquote:after {
        content: ""
    }

a img {
    border: none
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

button {
    border: none;
    background-color: transparent;
    cursor: pointer;
    padding: 0;
    margin: 0
}

a {
    text-decoration: none;
    color: inherit
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

input {
    border: none
}

@font-face {
    font-family: Satoshi;
    src: url("./media/Satoshi-Medium-QIL3OLQH.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Satoshi;
    src: url("./media/Satoshi-Bold-YYHPZD7E.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: icomoon;
    src: url("./media/icomoon-I2DYSU4O.eot?cj2lez");
    src: url("./media/icomoon-I2DYSU4O.eot?cj2lez#iefix") format("embedded-opentype"),url("./media/icomoon-4PP35VG5.ttf?cj2lez") format("truetype"),url("./media/icomoon-GTIAQQC4.woff?cj2lez") format("woff"),url("./media/icomoon-MBQWRMU2.svg?cj2lez#icomoon") format("svg");
    font-weight: 400;
    font-style: normal;
    font-display: block
}

[class^=icon-]:not(.icon-state), [class*=" icon-"]:not(.icon-state) {
    font-family: icomoon,sans-serif !important;
    speak: never;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-approve:before {
    content: "\e94a"
}

.icon-send:before {
    content: "\e94b"
}

.icon-calendar:before {
    content: "\e949"
}

.icon-sui:before {
    content: "\e948"
}

.icon-history-claim:before {
    content: "\e945"
}

.icon-history-deposit:before {
    content: "\e946"
}

.icon-history-withdraw:before {
    content: "\e947"
}

.icon-reddit:before {
    content: "\e941"
}

.icon-facebook:before {
    content: "\e942"
}

.icon-link:before {
    content: "\e943"
}

.icon-share:before {
    content: "\e944"
}

.icon-hand:before {
    content: "\e940"
}

.icon-pool-apr:before {
    content: "\e93b"
}

.icon-pool-rewards:before {
    content: "\e93c"
}

.icon-pool-tvl:before {
    content: "\e93d"
}

.icon-pool-volume:before {
    content: "\e93f"
}

.icon-explorer-arrow:before {
    content: "\e933"
}

.icon-check:before {
    content: "\e934"
}

.icon-deselect:before {
    content: "\e935"
}

.icon-filter:before {
    content: "\e936"
}

.icon-pagination-end:before {
    content: "\e937"
}

.icon-pagination-left:before {
    content: "\e938"
}

.icon-pagination-right:before {
    content: "\e939"
}

.icon-pagination-start:before {
    content: "\e93a"
}

.icon-ranks-info:before {
    content: "\e93e"
}

.icon-deposit:before {
    content: "\e905"
}

.icon-avax:before {
    content: "\e907"
}

.icon-bnb:before {
    content: "\e90d"
}

.icon-celo:before {
    content: "\e910"
}

.icon-eth:before {
    content: "\e919"
}

.icon-matic:before {
    content: "\e921"
}

.icon-sol:before {
    content: "\e927"
}

.icon-tron:before {
    content: "\e92b"
}

.icon-withdraw:before {
    content: "\e92c"
}

.icon-xlm:before {
    content: "\e932"
}

.icon-footer-allbridge:before {
    content: "\e90a"
}

.icon-footer-github:before {
    content: "\e91c"
}

.icon-footer-guides:before {
    content: "\e92d"
}

.icon-footer-support:before {
    content: "\e92e"
}

.icon-footer-twitter:before {
    content: "\e92f"
}

.icon-more-mob:before {
    content: "\e930"
}

.icon-pool-performance:before {
    content: "\e931"
}

.icon-arrow-right:before {
    content: "\e900"
}

.icon-arrow:before {
    content: "\e901"
}

.icon-attention:before {
    content: "\e902"
}

.icon-auto-compound:before {
    content: "\e903"
}

.icon-best-pairs:before {
    content: "\e904"
}

.icon-cards:before {
    content: "\e906"
}

.icon-change:before {
    content: "\e908"
}

.icon-copy:before {
    content: "\e909"
}

.icon-dark:before {
    content: "\e90b"
}

.icon-delete:before {
    content: "\e90c"
}

.icon-details:before {
    content: "\e90e"
}

.icon-discord:before {
    content: "\e90f"
}

.icon-exit:before {
    content: "\e911"
}

.icon-explorer:before {
    content: "\e912"
}

.icon-fee:before {
    content: "\e913"
}

.icon-gas:before {
    content: "\e914"
}

.icon-history:before {
    content: "\e915"
}

.icon-light:before {
    content: "\e916"
}

.icon-lines:before {
    content: "\e917"
}

.icon-logo:before {
    content: "\e918"
}

.icon-more:before {
    content: "\e91a"
}

.icon-open:before {
    content: "\e91b"
}

.icon-pools:before {
    content: "\e91d"
}

.icon-ranks:before {
    content: "\e91e"
}

.icon-refresh:before {
    content: "\e91f"
}

.icon-search:before {
    content: "\e920"
}

.icon-success:before {
    content: "\e922"
}

.icon-swap:before {
    content: "\e923"
}

.icon-tg:before {
    content: "\e924"
}

.icon-time:before {
    content: "\e925"
}

.icon-tooltip:before {
    content: "\e926"
}

.icon-usdc:before {
    content: "\e928"
}

.icon-usdt:before {
    content: "\e929"
}

.icon-wallet:before {
    content: "\e92a"
}

body {
    --Spacing-s1: 2px;
    --Spacing-s2: 4px;
    --Spacing-s3: 8px;
    --Spacing-s4: 12px;
    --Spacing-s5: 16px;
    --Spacing-s6: 20px;
    --Spacing-s7: 24px;
    --Spacing-s8: 32px;
    --Spacing-s9: 48px;
    --Spacing-s10: 64px;
    --Spacing-s11: 96px;
    --Spacing-s12: 128px
}

body {
    --bg-accent-color: #D3F0F0;
    --bg-sec-color: #F1F2EC;
    --bg: linear-gradient(360deg, var(--bg-accent-color) 0%, var(--bg-sec-color) 100%);
    --card-backdrop-filter: blur(50px);
    --main: #5B978E;
    --main-rgb: 91, 151, 142;
    --main-sec: rgba(var(--main-rgb), .1);
    --skeleton-color: rgba(var(--main-rgb), .2);
    --skeleton-animation-color: rgba(var(--main-rgb), .08);
    --text-main: #17564E;
    --text-main-rgb: 23, 86, 78;
    --text-sec: #6E9993;
    --text-sec-rgb: 110, 153, 147;
    --text-white: #EFF2ED;
    --text-white-rgb: 239, 242, 237;
    --label-main: #F9FCFB;
    --label-main-rgb: 249, 252, 251;
    --label-sec: rgba(var(--label-main-rgb), .4);
    --lines-main: #E9F2F0;
    --lines-main-rgb: 233, 242, 240;
    --lines-sec: rgba(var(--lines-main-rgb), .4);
    --success-main: #26A07B;
    --success-main-rgb: 38, 160, 123;
    --success-text: #114D3B;
    --success-text-rgb: 17, 77, 59;
    --attention-main: #E8CB70;
    --attention-main-rgb: 232, 203, 112;
    --attention-text: #71591D;
    --attention-text-rgb: 113, 89, 29;
    --error-main: #DD6161;
    --error-main-rgb: 221, 97, 97;
    --shadow-color-1: rgba(var(--text-main-rgb), .1);
    --shadow-color-2: rgba(var(--text-main-rgb), .04);
    --shadow-color-3: rgba(var(--main-rgb), .4);
    --shadow-color-4: rgba(var(--text-main-rgb), .08);
    --shadow-color-4-chart-tooltip: var(--shadow-color-4);
    --backdrop-color: rgba(var(--text-main-rgb), .5);
    --allbridge: rgba(var(--main-rgb), .1);
    --wormhole: rgba(97, 69, 156, .1);
    --cctp: rgba(85, 225, 177, .1);
    --bsc-color: #F3BB30;
    --bsc-color--rgb: 243, 187, 48;
    --eth-color: #7a80ff;
    --eth-color--rgb: 122, 128, 255;
    --pol-color: #8247E5;
    --pol-color--rgb: 130, 71, 229;
    --sol-color: #A478DA;
    --sol-color--rgb: 164, 120, 218;
    --trx-color: #E5494C;
    --trx-color--rgb: 229, 73, 76;
    --arb-color: #28A0F0;
    --arb-color--rgb: 40, 160, 240;
    --ava-color: #E84142;
    --ava-color--rgb: 232, 65, 66;
    --opt-color: #FF0420;
    --opt-color--rgb: 255, 4, 32;
    --srb-color: #3829D2;
    --srb-color--rgb: 56, 41, 210;
    --bas-color: #0052FF;
    --bas-color--rgb: 0, 82, 255;
    --sui-color: #4DA2FF;
    --sui-color--rgb: 77, 162, 255;
    --cel-color: #CBA783;
    --cel-color--rgb: 203, 167, 131;
    --cel-icon-color: #000000;
    --cel-selected-bgc-color: #FCFF52;
    --cel-selected-icon-color: #000000;
    --usdc-color: #2775CA;
    --assets-gradient-color-top: 235, 241, 238;
    --assets-gradient-color-bottom: 230, 245, 244;
    --leaderboard-bg: #FEFEFE;
    --leaderboard-sec: #F9FCFB
}

    body[theme=dark-theme] {
        --bg-accent-color: #060E09;
        --bg-sec-color: #06190D;
        --main: #5AAC8F;
        --main-rgb: 90, 172, 143;
        --skeleton-color: #273A33;
        --skeleton-animation-color: #1C2F28;
        --text-main: #E9F6EF;
        --text-main-rgb: 233, 246, 239;
        --text-sec: #C2D1CB;
        --text-sec-rgb: 194, 209, 203;
        --label-main: #152821;
        --label-main-rgb: 21, 40, 33;
        --lines-main: #0E1E16;
        --lines-main-rgb: 14, 30, 22;
        --success-main: #26A07B;
        --success-main-rgb: 38, 160, 123;
        --success-text: #114D3B;
        --success-text-rgb: 17, 77, 59;
        --attention-main: #E8CB70;
        --attention-main-rgb: 232, 203, 112;
        --attention-text: #E8CB70;
        --attention-text-rgb: 232, 203, 112;
        --error-main: #DD6161;
        --error-main-rgb: 221, 97, 97;
        --shadow-color-1: rgba(0, 0, 0, .1);
        --shadow-color-2: rgba(0, 0, 0, .04);
        --shadow-color-3: rgba(var(--main-rgb), .4);
        --shadow-color-4: rgba(0, 0, 0, .12);
        --shadow-color-4-chart-tooltip: rgba(0, 0, 0, .18);
        --backdrop-color: rgba(0, 0, 0, .5);
        --cel-icon-color: #FCFF52;
        --srb-color: #6764FF;
        --srb-color--rgb: 103,100,255;
        --assets-gradient-color-top: 15, 32, 24;
        --assets-gradient-color-bottom: 14, 28, 21;
        --leaderboard-bg: #1D1D1D;
        --leaderboard-sec: rgba(146, 146, 146, .1)
    }

*[data-color=eth-color] {
    --color: var(--eth-color) !important;
    --color-rgb: var(--eth-color--rgb) !important
}

*[data-color=bsc-color] {
    --color: var(--bsc-color) !important;
    --color-rgb: var(--bsc-color--rgb) !important
}

*[data-color=pol-color] {
    --color: var(--pol-color) !important;
    --color-rgb: var(--pol-color--rgb) !important
}

*[data-color=sol-color] {
    --color: var(--sol-color) !important;
    --color-rgb: var(--sol-color--rgb) !important
}

*[data-color=trx-color] {
    --color: var(--trx-color) !important;
    --color-rgb: var(--trx-color--rgb) !important
}

*[data-color=arb-color] {
    --color: var(--arb-color) !important;
    --color-rgb: var(--arb-color--rgb) !important
}

*[data-color=opt-color] {
    --color: var(--opt-color) !important;
    --color-rgb: var(--opt-color--rgb) !important
}

*[data-color=ava-color] {
    --color: var(--ava-color) !important;
    --color-rgb: var(--ava-color--rgb) !important
}

*[data-color=srb-color] {
    --color: var(--srb-color) !important;
    --color-rgb: var(--srb-color--rgb) !important
}

*[data-color=bas-color] {
    --color: var(--bas-color) !important;
    --color-rgb: var(--bas-color--rgb) !important
}

*[data-color=cel-color] {
    --color: var(--cel-color) !important;
    --color-rgb: var(--cel-color--rgb) !important
}

*[data-color=sui-color] {
    --color: var(--sui-color) !important;
    --color-rgb: var(--sui-color--rgb) !important
}

*[data-color=level-1] {
    --color: #B4B650;
    --color-rgb: 180, 182, 80
}

*[data-color=level-2] {
    --color: #85B259;
    --color-rgb: 133, 178, 89
}

*[data-color=level-3] {
    --color: #4DB17F;
    --color-rgb: 77, 177, 127
}

*[data-color=level-4] {
    --color: #6A90D9;
    --color-rgb: 106, 144, 217
}

*[data-color=level-5] {
    --color: #7F71D1;
    --color-rgb: 127, 113, 209
}

*[data-color=level-6] {
    --color: #B874BF;
    --color-rgb: 184, 116, 191
}

*[data-color=level-7] {
    --color: #E17373;
    --color-rgb: 225, 115, 115
}

*[data-color=level-8] {
    --color: #4C9EA8;
    --color-rgb: 76, 158, 168
}

*[data-color=level-9] {
    --color: #C17554;
    --color-rgb: 193, 117, 84
}

*[data-color=level-10] {
    --color: #B28839;
    --color-rgb: 178, 136, 57
}

.mdc-dialog__surface {
    border-radius: 36px !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-color: transparent !important;
    background-color: transparent !important
}

.mdc-dialog .mdc-dialog__content {
    padding: 0 !important
}

.mdc-dialog__content::-webkit-scrollbar {
    display: none
}

.cdk-overlay-dark-backdrop {
    background: var(--backdrop-color) !important
}

.cdk-overlay-pane {
    max-width: 85vw !important
}

.mat-paginator-container {
    justify-content: center !important;
    min-height: auto !important
}

.mat-paginator-container, .mat-paginator-range-actions, .mat-paginator-range-label, .mat-icon-button {
    display: none !important
}

.mat-snack-bar-container {
    box-shadow: none;
    border-radius: 24px !important;
    border: none !important;
    color: initial;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important
}

.mdc-snackbar__label {
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border-radius: 24px !important
}

.mdc-snackbar__surface {
    border-radius: 24px !important;
    padding: 0 !important;
    margin: 0 0 14px 16px !important;
    box-shadow: none !important;
    border-color: transparent !important;
    background-color: transparent !important
}

.mat-mdc-snack-bar-container .mdc-snackbar__surface {
    min-width: 245px !important
}

.mdc-slider__thumb {
    --mdc-slider-handle-width: var(--Spacing-s4);
    --mdc-slider-handle-height: var(--Spacing-s4);
    --mdc-slider-handle-color: var(--main)
}

.mdc-slider__thumb--focused .mdc-slider__thumb-knob {
    background-color: var(--main) !important
}

.mdc-slider__thumb-knob {
    background-color: var(--main) !important;
    border: none !important;
    box-shadow: none !important
}

.mdc-slider__thumb--with-indicator {
    transition: box-shadow .25s !important;
    box-shadow: 0 0 0 3px rgba(var(--main-color--rgb),.35) !important
}

.mdc-slider__thumb .mat-mdc-focus-indicator {
    display: none !important
}

.mdc-slider__track--inactive {
    background-color: var(--main-sec) !important;
    opacity: 1 !important
}

.mdc-slider__track--active_fill {
    border-color: var(--main) !important
}

@media screen and (max-width: 576px) {
    .cdk-overlay-pane {
        max-width: 340px !important;
        width: 100%
    }
}

.mat-datepicker-close-button {
    display: none !important
}

.mat-datepicker-content {
    background-color: var(--label-main) !important;
    box-shadow: 6px 16px 50px 0 var(--shadow-color-1) !important;
    border-radius: 24px !important;
    padding: var(--Spacing-s6) var(--Spacing-s7)
}

    .mat-datepicker-content .mat-calendar {
        font: 400 16px/1.5 var(--main-font) !important
    }

    .mat-datepicker-content .mat-calendar-content {
        padding: 0
    }

    .mat-datepicker-content .mat-calendar-table-header th {
        font-size: 12px;
        color: var(--text-main);
        padding: 0;
        height: 32px
    }

    .mat-datepicker-content .mat-calendar-table-header-divider {
        display: none
    }

    .mat-datepicker-content .mat-calendar-body-label {
        visibility: hidden;
        height: 0;
        padding: 0 !important
    }

    .mat-datepicker-content .mat-calendar-body-today {
        background-color: transparent !important;
        border: none
    }

    .mat-datepicker-content .mat-calendar-body-cell:hover .mat-calendar-body-cell-content {
        background-color: rgba(var(--main-rgb),.08) !important
    }

    .mat-datepicker-content .mat-calendar-body-cell-content {
        font-size: 12px;
        color: var(--text-main);
        transition: box-shadow .25s,color .25s,background-color .25s
    }

    .mat-datepicker-content .mat-calendar-body-selected {
        background-color: var(--main);
        box-shadow: none;
        color: #fff
    }

        .mat-datepicker-content .mat-calendar-body-selected.mat-calendar-body-today {
            box-shadow: none
        }

        .mat-datepicker-content .mat-calendar-body-selected .mat-calendar-body-cell-content {
            background-color: var(--main) !important;
            box-shadow: none !important;
            color: #fff !important
        }

    .mat-datepicker-content .mat-calendar-body-in-range:before {
        background: rgba(var(--main-rgb),.2)
    }

    .mat-datepicker-content .mat-calendar-body-in-range .mat-calendar-body-selected {
        background-color: transparent !important
    }

    .mat-datepicker-content .mat-calendar-body-in-range .mat-calendar-body-cell-content {
        color: #fff;
        border: none
    }

    .mat-datepicker-content .mat-calendar-body-in-range.mat-calendar-body-range-start .mat-calendar-body-cell-content, .mat-datepicker-content .mat-calendar-body-in-range.mat-calendar-body-range-end .mat-calendar-body-cell-content {
        background-color: var(--main) !important;
        border-radius: 50%
    }

    .mat-datepicker-content .mat-calendar-body-in-preview {
        color: var(--main)
    }

    .mat-datepicker-content .mat-calendar-body-disabled {
        opacity: .3
    }

        .mat-datepicker-content .mat-calendar-body-disabled .mat-calendar-body-cell-content {
            color: var(--text-main) !important
        }

    .mat-datepicker-content .cdk-keyboard-focused .mat-calendar-body-active .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {
        background-color: transparent !important;
        box-shadow: 0 0 0 1px var(--attention-main);
        color: var(--text-main) !important
    }

    .mat-datepicker-content .cdk-keyboard-focused .mat-calendar-body-active .mat-calendar-body-cell-content.mat-calendar-body-selected {
        box-shadow: none !important;
        background-color: var(--main) !important;
        color: #fff !important
    }

.mat-date-range-input-separator {
    color: #fff !important
}

.basic-state {
    color: var(--text-main);
    border: 1px solid transparent;
    transition: background-color .25s,opacity .25s,border-color .25s
}

    .basic-state:hover {
        background-color: rgba(var(--main-rgb),.08)
    }

    .basic-state:active {
        background-color: rgba(var(--main-rgb),.12)
    }

    .basic-state:focus {
        outline: none
    }

    .basic-state:focus-visible {
        border-color: var(--attention-main)
    }

    .basic-state:disabled {
        cursor: default;
        pointer-events: none;
        opacity: .3
    }

    .basic-state.selected {
        background-color: rgba(var(--main-rgb),.1) !important
    }

.stroked-state {
    color: var(--text-main);
    border: 1px solid rgba(var(--main-rgb),.1);
    transition: background-color .25s,opacity .25s,border-color .25s
}

    .stroked-state:hover {
        background-color: rgba(var(--main-rgb),.05)
    }

    .stroked-state:active {
        background-color: rgba(var(--main-rgb),.1)
    }

    .stroked-state:focus {
        outline: none
    }

    .stroked-state:focus-visible {
        border-color: var(--attention-main)
    }

    .stroked-state:disabled {
        cursor: default;
        pointer-events: none;
        opacity: .3
    }

    .stroked-state.selected {
        background-color: rgba(var(--main-rgb),.09) !important;
        pointer-events: none
    }

.icon-state {
    color: var(--main);
    transition: opacity .25s
}

    .icon-state:hover {
        opacity: .7
    }

    .icon-state:active {
        opacity: .9
    }

    .icon-state:focus {
        outline: none
    }

    .icon-state:focus-visible {
        color: var(--attention-main)
    }

    .icon-state:disabled {
        cursor: default;
        pointer-events: none;
        opacity: .3
    }

.control-state {
    border: 1px solid transparent;
    background-color: var(--label-main);
    color: var(--main);
    transition: background-color .25s,opacity .25s,border-color .25s
}

    .control-state:hover {
        background-color: rgba(var(--label-main-rgb),.7)
    }

    .control-state:active {
        background-color: rgba(var(--label-main-rgb),.5)
    }

    .control-state:focus {
        outline: none
    }

    .control-state:focus-visible {
        border-color: var(--attention-main)
    }

    .control-state:disabled {
        cursor: default;
        pointer-events: none;
        opacity: .3 !important
    }

.flat-state, .main-btn {
    background: var(--main);
    border: 1px solid var(--main);
    color: var(--text-white);
    transition: filter .25s,opacity .25s,border-color .25s
}

    .flat-state:hover, .main-btn:hover {
        filter: brightness(94%)
    }

    .flat-state:active, .main-btn:active {
        filter: brightness(90%)
    }

    .flat-state:focus, .main-btn:focus {
        outline: none
    }

    .flat-state:focus-visible, .main-btn:focus-visible {
        border-color: var(--attention-main)
    }

    .flat-state:disabled, .main-btn:disabled {
        cursor: default;
        pointer-events: none;
        opacity: .3
    }

.main-btn {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--Spacing-s3);
    padding: var(--Spacing-s4) var(--Spacing-s5);
    border-radius: 24px;
    font: var(--text-body-2-bold)
}

.main-btn--small {
    padding: var(--Spacing-s3) var(--Spacing-s4);
    font: var(--text-body-4)
}

.main-btn.main-btn--processed {
    background-color: rgba(var(--main-rgb),.7);
    border-color: transparent
}

.main-btn .main-btn__processed-icon-circle {
    fill: rgba(var(--text-white-rgb),.1)
}

.main-btn .main-btn__processed-icon-accent {
    fill: var(--text-white)
}

.main-btn--auto {
    width: auto;
    padding: 7px 8px;
    border-radius: 28px;
    font: var(--text-body-3)
}

.main-btn--light.main-btn--processed {
    background-color: rgba(var(--main-rgb),.1)
}

.main-btn--light .main-btn__processed-icon-circle {
    fill: rgba(var(--main-rgb),.1)
}

.main-btn--light .main-btn__processed-icon-accent {
    fill: var(--main)
}

.main-btn--processed {
    cursor: default;
    pointer-events: none
}

.main-btn__processed-icon-wrap {
    width: var(--Spacing-s6);
    height: var(--Spacing-s6)
}

.main-btn__processed-icon-wrap--absolute {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

.main-btn__processed-icon {
    width: 100%;
    height: 100%;
    animation: processed-icon 1.2s infinite linear
}

.main-btn.selected {
    pointer-events: none
}

@keyframes processed-icon {
    to {
        transform: rotate(360deg)
    }
}

.secondary-state, .icon-btn, .main-btn--light {
    background-color: rgba(var(--main-rgb),.1);
    border: 1px solid transparent;
    color: var(--main);
    transition: background-color .25s,opacity .25s,border-color .25s
}

    .secondary-state:hover, .icon-btn:hover, .main-btn--light:hover {
        background-color: rgba(var(--main-rgb),.15)
    }

    .secondary-state:active, .icon-btn:active, .main-btn--light:active {
        background-color: rgba(var(--main-rgb),.2)
    }

    .secondary-state:focus, .icon-btn:focus, .main-btn--light:focus {
        outline: none
    }

    .secondary-state:focus-visible, .icon-btn:focus-visible, .main-btn--light:focus-visible {
        border-color: var(--attention-main)
    }

    .secondary-state:disabled, .icon-btn:disabled, .main-btn--light:disabled {
        cursor: default;
        pointer-events: none;
        opacity: .3
    }

    .secondary-state.selected, .selected.icon-btn, .selected.main-btn--light {
        background-color: var(--main) !important;
        color: var(--text-white) !important
    }

.icon-btn {
    --size: 44px;
    width: var(--size);
    height: var(--size);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%
}

.icon-btn--l {
    --size: 40px;
    font-size: 20px
}

.icon-btn--m {
    --size: 32px;
    font-size: 12px
}

.icon-btn--s {
    --size: 26px;
    font-size: 12px
}

.icon-btn--xs {
    --size: 22px;
    font-size: 10px
}

.radio {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    transition: background-color .25s;
    position: relative;
    font-weight: 300;
    pointer-events: all;
    background-color: var(--label-main)
}

    .radio.disabled {
        pointer-events: none;
        color: rgba(var(--main-rgb),.3)
    }

        .radio.disabled .radio__text {
            background-color: transparent
        }

        .radio.disabled .radio__box {
            pointer-events: none;
            opacity: .3
        }

.radio__text {
    border-radius: 34px;
    cursor: pointer;
    width: 100%;
    min-width: 100%;
    height: 100%;
    padding: var(--Spacing-s3) var(--Spacing-s5) var(--Spacing-s3) 36px;
    transition: background-color .25s,box-shadow .25s
}

    .radio__text:hover {
        background-color: rgba(var(--main-rgb),.05)
    }

.radio__box {
    width: 12px;
    min-width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(var(--main-rgb),.3);
    position: absolute;
    right: auto;
    left: var(--Spacing-s5);
    margin: 0;
    cursor: pointer;
    transition: background-color .25s,border-color .25s
}

.radio__box--check {
    font-family: icomoon,sans-serif;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    min-width: 14px;
    height: 14px
}

    .radio__box--check:before {
        content: "\e934";
        font-size: 8px;
        color: var(--main);
        opacity: 0;
        background: none !important;
        transition: color .25s,opacity .25s
    }

.radio__input:checked + .radio__text {
    background-color: rgba(var(--main-rgb),.05);
    box-shadow: 0 0 0 1px rgba(var(--main-rgb),.2)
}

    .radio__input:checked + .radio__text + .radio__box {
        background-color: var(--main);
        border-color: var(--main)
    }

    .radio__input:checked + .radio__text + .radio__box--check {
        background-color: var(--main-sec);
        border-color: rgba(var(--main-rgb),.3)
    }

.radio__input:checked + .radio__text--checkbox {
    display: none
}

.radio__input:checked + .radio__text + .radio__box--check:before {
    opacity: 1
}

.radio__input:active + .radio__text {
    background-color: rgba(var(--main-rgb),.1)
}

.radio__input:focus-visible + .radio__text {
    box-shadow: 0 0 0 1px rgba(var(--main-rgb),.35)
}

.input {
    border: none;
    background-color: transparent;
    color: var(--text-main);
    padding: 0;
    margin: 0;
    width: 100%;
    transition: color .25s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    appearance: textfield
}

    .input:focus {
        outline: none
    }

    .input.ng-invalid.ng-dirty {
        color: var(--error)
    }

    .input::-webkit-input-placeholder {
        color: var(--text-main);
        opacity: .3
    }

    .input:-moz-placeholder {
        color: var(--text-main);
        opacity: .3
    }

    .input::-moz-placeholder {
        color: var(--text-main);
        opacity: .3
    }

    .input:-ms-input-placeholder {
        color: var(--text-main);
        opacity: .3
    }

.input--disabled {
    pointer-events: none;
    cursor: pointer
}

:root {
    --main-font: "Satoshi", sans-serif;
    --main-line-height: 1.35;
    --text-h1: 500 48px/var(--main-line-height) var(--main-font);
    --text-h2: 500 40px/var(--main-line-height) var(--main-font);
    --text-h3: 500 32px/var(--main-line-height) var(--main-font);
    --text-h4: 500 24px/var(--main-line-height) var(--main-font);
    --text-h5: 500 20px/var(--main-line-height) var(--main-font);
    --text-body-1: 500 18px/var(--main-line-height) var(--main-font);
    --text-body-2: 500 16px/var(--main-line-height) var(--main-font);
    --text-body-2-bold: 700 16px/var(--main-line-height) var(--main-font);
    --text-body-3: 500 14px/var(--main-line-height) var(--main-font);
    --text-body-4: 500 12px/var(--main-line-height) var(--main-font);
    --text-body-5: 500 11px/var(--main-line-height) var(--main-font)
}

.text-h1 {
    font: var(--text-h1)
}

.text-h2 {
    font: var(--text-h2)
}

.text-h3, .input {
    font: var(--text-h3)
}

.text-h4 {
    font: var(--text-h4)
}

.text-h5 {
    font: var(--text-h5)
}

.text-body-1 {
    font: var(--text-body-1)
}

.text-body-2, .stroked-input {
    font: var(--text-body-2)
}

.text-body-2-bold {
    font: var(--text-body-2-bold)
}

.text-body-3 {
    font: var(--text-body-3)
}

.text-body-4 {
    font: var(--text-body-4)
}

.text-body-5 {
    font: var(--text-body-5)
}

.stroked-input {
    border: 1px solid red;
    border-radius: 24px;
    background-color: transparent;
    color: var(--text-main);
    padding: 5px 10px 4px;
    margin: 0;
    transition: color .25s,border-color .25s
}

    .stroked-input:focus {
        outline: none
    }

    .stroked-input.ng-invalid.ng-dirty, .stroked-input.invalid {
        color: var(--error);
        border-color: rgba(var(--error-color--rgb),.5)
    }

    .stroked-input::-webkit-input-placeholder {
        color: var(--text-main);
        opacity: .3
    }

    .stroked-input:-moz-placeholder {
        color: var(--text-main);
        opacity: .3
    }

    .stroked-input::-moz-placeholder {
        color: var(--text-main);
        opacity: .3
    }

    .stroked-input:-ms-input-placeholder {
        color: var(--text-main);
        opacity: .3
    }

.empty-state__title {
    margin-bottom: 327px
}

    .empty-state__title span {
        color: var(--main)
    }

.check {
    --size: 22px;
    position: relative;
    display: flex;
    align-items: center;
    padding: 8px;
    cursor: pointer;
    outline: none
}

    .check .checked-state, .check .check__input:checked + .check__box {
        background-color: rgba(var(--main-rgb),.09)
    }

        .check .checked-state:before, .check .check__input:checked + .check__box:before {
            font-family: icomoon;
            content: "\e934";
            font-size: 16px;
            color: var(--main)
        }

.check__input {
    width: 1px;
    min-width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    position: absolute;
    border: 0;
    padding: 0
}

.check__box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--size);
    min-width: var(--size);
    height: var(--size);
    border-radius: 6px;
    border: 1px solid rgba(var(--main-rgb),.3);
    transition: border-color .25s,background-color .25s
}

.check__input:hover + .check__box {
    background-color: rgba(var(--main-rgb),.05)
}

.check__input:active + .check__box {
    background-color: rgba(var(--main-rgb),.1)
}

.check__input:focus-visible + .check__box, .check__input:checked:focus-visible + .check__box {
    border-color: var(--attention-main)
}

.check--partial-check .check__box:before {
    font-family: icomoon;
    content: "\e935";
    font-size: 16px;
    color: var(--main)
}

.slider {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--Spacing-s5)
}

.slider__group {
    display: flex;
    gap: var(--Spacing-s5);
    width: 100%;
    overflow-x: scroll;
    scroll-snap-type: x mandatory
}

    .slider__group::-webkit-scrollbar {
        display: none
    }

.slider__item {
    min-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    scroll-snap-align: center;
    scroll-snap-stop: always
}

.slider__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--Spacing-s3)
}

.slider__pagination-item {
    position: relative;
    width: 6px;
    min-width: 6px;
    height: 6px;
    border-radius: 50%
}

    .slider__pagination-item:after {
        content: "";
        position: absolute;
        inset: -5px 0 0 -5px;
        width: 14px;
        min-width: 14px;
        height: 14px;
        border-radius: 50%
    }

.shadow-1, .card {
    box-shadow: 6px 46px 50px 0 var(--shadow-color-1)
}

.shadow-2, .card--secondary {
    box-shadow: 6px 46px 50px 0 var(--shadow-color-2)
}

.shadow-3, .main-tooltip {
    box-shadow: 0 10px 28px 0 var(--shadow-color-3)
}

.shadow-4, .radio__text {
    box-shadow: 0 8px 24px 0 var(--shadow-color-4)
}

html, body, #root {
    width: 100%;
    min-height: 100vh;
    font: var(--text-body-1);
    color: var(--text-main);
    -webkit-font-smoothing: antialiased
}

body {
    height: 100%;
    background-size: cover;
    --wrapper-max-width: 1440px;
    --wrapper-side-padding: 73px;
    background: var(--bg)
}

@media screen and (max-width: 1096px) {
    body {
        --wrapper-side-padding: 32px
    }
}

@media screen and (max-width: 576px) {
    body {
        --wrapper-side-padding: 20px
    }
}

.wrapper {
    width: 100%;
    max-width: var(--wrapper-max-width);
    padding: 0 var(--wrapper-side-padding);
    margin: 0 auto
}

.wrapper--page {
    --wrapper-max-width: calc(1048px + (var(--wrapper-side-padding) * 2))
}

@media screen and (max-width: 576px) {
    .wrapper--page {
        padding: 0
    }
}

.page {
    padding-top: var(--Spacing-s10);
    padding-bottom: var(--Spacing-s10)
}

@media screen and (max-width: 576px) {
    .page {
        padding-top: var(--Spacing-s8)
    }
}

.card {
    position: relative;
    width: 424px;
    max-width: 100%;
    background-color: var(--label-main);
    padding: var(--Spacing-s7);
    border-radius: 36px;
    overflow: hidden;
    z-index: 2
}

.card--secondary {
    background-color: var(--label-sec);
    -webkit-backdrop-filter: var(--card-backdrop-filter);
    backdrop-filter: var(--card-backdrop-filter)
}

.card--rounded {
    border-radius: 24px;
    width: 100%
}

.card--quiz {
    box-shadow: none
}

@media screen and (max-width: 576px) {
    .card {
        width: auto;
        min-width: 100%;
        padding: var(--Spacing-s7) var(--Spacing-s5);
        border-radius: 0
    }
}

@media screen and (max-width: 576px) {
    .card--dialog {
        width: 340px;
        padding: var(--Spacing-s7)
    }
}

input[type=radio], input[type=checkbox], .visually-hidden {
    width: 1px;
    min-width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    position: absolute;
    border: 0;
    padding: 0
}

.main-tooltip {
    background-color: var(--main);
    padding: var(--Spacing-s4) var(--Spacing-s6) !important;
    border-radius: 11px !important
}

    .main-tooltip .mat-mdc-tooltip-surface {
        background-color: transparent !important;
        font: var(--text-body-4);
        padding: 0 !important;
        min-height: auto !important
    }

@media screen and (max-width: 768px) {
    #cmpboxrecall {
        display: none
    }
}