@font-face {
    font-family: __Inter_a64ecd;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/ec159349637c90ad-s.woff2) format("woff2");
    unicode-range: U+0460-052f, U+1c80-1c88, U+20b4, U+2de0-2dff, U+a640-a69f, U+fe2e-fe2f
}

@font-face {
    font-family: __Inter_a64ecd;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/513657b02c5c193f-s.woff2) format("woff2");
    unicode-range: U+0301, U+0400-045f, U+0490-0491, U+04b0-04b1, U+2116
}

@font-face {
    font-family: __Inter_a64ecd;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/fd4db3eb5472fc27-s.woff2) format("woff2");
    unicode-range: U+1f??
}

@font-face {
    font-family: __Inter_a64ecd;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/51ed15f9841b9f9d-s.woff2) format("woff2");
    unicode-range: U+0370-03ff
}

@font-face {
    font-family: __Inter_a64ecd;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/05a31a2ca4975f99-s.woff2) format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01a0-01a1, U+01af-01b0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1ea0-1ef9, U+20ab
}

@font-face {
    font-family: __Inter_a64ecd;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/d6b16ce4a6175f26-s.woff2) format("woff2");
    unicode-range: U+0100-02af, U+0304, U+0308, U+0329, U+1e00-1e9f, U+1ef2-1eff, U+2020, U+20a0-20ab, U+20ad-20cf, U+2113, U+2c60-2c7f, U+a720-a7ff
}

@font-face {
    font-family: __Inter_a64ecd;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/c9a5bc6a7c948fb0-s.p.woff2) format("woff2");
    unicode-range: U+00??, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc, U+0304, U+0308, U+0329, U+2000-206f, U+2074, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+feff, U+fffd
}

@font-face {
    font-family: __Inter_Fallback_a64ecd;
    src: local("Arial");
    ascent-override: 90.00%;
    descent-override: 22.43%;
    line-gap-override: 0.00%;
    size-adjust: 107.64%
}

.__className_a64ecd {
    font-family: __Inter_a64ecd, __Inter_Fallback_a64ecd;
    font-style: normal
}

* {
    font-family: __Inter_a64ecd, __Inter_Fallback_a64ecd !important;
    text-decoration: none !important;
    color: #36394A;
}

a {
    color: #0a0a0a;
}

#root,
body,
html {
    min-height: 100vh
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    --wcm-z-index: 100!important;
    color: #0a0a0a;
    font-family: InterMedium Helvetica Arial Tahoma;
    font-size: 14px;
    line-height: 1;
    background: #c5e3dd;
}

:root {
    --rt-color-white: #fff;
    --rt-color-dark: #222;
    --rt-color-success: #8dc572;
    --rt-color-error: #be6464;
    --rt-color-warning: #f0ad4e;
    --rt-color-info: #337ab7;
    --rt-opacity: 0.9
}

header {
    margin: 20px auto;
}


/* =========Menu======= */

.menu-tabs {
    display: flex;
    justify-content: center;
}

.menu-tabs a {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.14;
    color: #0a0a0a;
    cursor: pointer;
    padding-left: 12.5px;
    padding-right: 12.5px;
    text-decoration: none;
    position: relative;
    text-align: center;
}

.menu-tabs a .menu-border {
    width: 50px;
    margin: 10px auto;
    height: 3px;
}

.menu-tabs a.active {
    color: #239589;
}

.menu-tabs a.active .menu-border {
    background: hwb(174 14% 42%);
}

.menu-handle {
    margin-left: 35px !important;
}


/* =========Wallet Button======= */

.top-wallet-btn {
    background-color: rgb(255, 255, 255);
    padding-left: 15px;
    border-radius: 44px;
    height: 44px;
    box-sizing: border-box;
    cursor: pointer;
    border: 0.5px solid transparent;
    width: 140px;
}

.bottom-wallet-btn {
    background-color: #e5ebf7;
    padding-left: 15px;
    border-radius: 44px;
    height: 44px;
    box-sizing: border-box;
    cursor: pointer;
    border: 0.5px solid transparent;
    width: 250px;
}

.bottom-wallet-btn:hover {
    color: #fff !important;
    background-color: rgb(10, 10, 10);
    fill: #fff;
}

.top-theme-icon {
    width: 50px;
    background-color: rgb(255, 255, 255);
    padding-left: 15px;
    border-radius: 44px;
    height: 44px;
    box-sizing: border-box;
    cursor: pointer;
    border: 0.5px solid transparent;
    margin-left: 15px !important;
}

.top-wallet-btn:hover,
.top-theme-icon:hover {
    box-shadow: rgb(228, 231, 237) 3px 12px 30px 0px;
    border: 0.5px solid rgb(229, 235, 247);
}


/* =========Cards======= */

.all-card {
    box-shadow: rgb(228, 231, 237) 3px 12px 30px 0px;
    background-color: rgb(255, 255, 255);
    padding: 30px 25px;
    border-radius: 12px;
    border: none;
}


/* =========body======= */

.card-handler {
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    margin: 0px auto;
}

.card-1 {
    display: flex;
    color: rgb(10, 10, 10);
    width: 100%;
    flex: 1.16 1 0%;
    transition: all 0.2s linear 0s;
}

.card-2 {
    display: absolute;
    color: rgb(10, 10, 10);
    width: 45%;
    transition: all 0.2s linear 0s;
    margin-left: -30px;
}


/* =========drop======= */

.drop-button {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-bottom: 5px;
    color: rgb(10, 10, 10);
    transition: all 0.2s linear 0s;
}

.drop {
    width: 100%;
    height: 44px;
    padding: 12px 15px 12px 12px;
    background-color: rgb(240, 243, 249);
    border-radius: 9px;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    align-items: center;
    cursor: pointer;
    box-sizing: border-box;
    flex: 1 1 0%;
    margin: 5px 0;
}

.drop:hover {
    background-color: rgb(229, 232, 238);
}

.drop .network {
    font-size: 12px;
    line-height: 1;
    font-weight: 500;
    width: 55px;
    margin-right: 20px;
    color: rgb(149, 163, 190);
}

.drop img {
    width: 22px;
    border-radius: 50%;
    margin-right: 10px;
}

.drop .title-holder {
    font-weight: 500;
    display: flex;
    /* flex-direction: column; */
    -webkit-box-pack: center;
    justify-content: space-between;
    color: rgb(10, 10, 10);
    transition: all 0.2s linear 0s;
    width: 250px;
}

.drop .title-holder .title {
    font-size: 14px;
    color: rgb(10, 10, 10);
    transition: all 0.2s linear 0s;
}

.drop .title-holder .sub-title {
    font-size: 12px;
    margin-right: 10px;
    color: rgb(10, 10, 10);
    transition: all 0.2s linear 0s;
}

.drop .rotate {
    transform: rotate(180deg);
}

.drop2 {
    width: 100%;
    height: 44px;
    padding: 12px 15px 12px 12px;
    background-color: rgb(240, 243, 249);
    border-radius: 9px;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    align-items: center;
    box-sizing: border-box;
    flex: 1 1 0%;
    margin: 5px 0;
}

.drop2 .title-holder {
    font-weight: 500;
    display: flex;
    /* flex-direction: column; */
    -webkit-box-pack: center;
    justify-content: space-between;
    color: rgb(10, 10, 10);
    transition: all 0.2s linear 0s;
    width: 250px;
}

.drop2 .title-holder .title {
    font-size: 12px;
    color: rgb(10, 10, 10);
    transition: all 0.2s linear 0s;
}

.rotate-90 {
    transform: rotate(-90deg);
}


/* =========down-menu======= */

.down-menu {
    background: white;
    display: none;
    padding: 5px 0px;
}

.down-menu .tb {
    padding: 10px 25px;
    text-align: center;
}

.down-menu .tb svg {
    margin-bottom: 10px;
    fill: #ccc;
}

.down-menu .tb.active {
    border-radius: 5px;
    background-color: rgb(236, 241, 250);
    fill: #000;
}

.down-menu .tb.active svg {
    fill: #000;
}

@media screen and (max-width:460px) {
    header {
        position: fixed;
        top: 0;
        z-index: 999999999;
        background: #f0f3f9;
        margin: 0 auto;
        width: 100%;
        padding: 10px;
    }
    .card-handler {
        display: block;
        -webkit-box-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        align-items: center;
        margin: 70px auto;
    }
    .card-1 {
        position: relative;
        z-index: 9999;
    }
    .card-2 {
        display: block;
        width: 100%;
        margin-left: 0px;
        margin-top: -10px;
        z-index: -1;
    }
    .drop {
        width: 48%;
        margin: 0px 5px;
    }
    .drop .title-holder {
        display: block;
        /* flex-direction: column; */
        width: 100px;
    }
    .drop .title-holder .sub-title {
        display: none;
    }
    .down-menu {
        display: flex;
        justify-content: space-between;
        width: 100%;
        position: fixed;
        bottom: 0;
        box-shadow: rgb(228, 231, 237) 3px 12px 30px 0px;
    }
    footer {
        display: none;
    }
}

footer {}

.btn-outline-primary {
    width: 100%;
    border-radius: 20px;
    font-weight: 700;
    font-size: 15px;
    line-height: 22px;
    padding: 10px 20px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    outline: none;
    border: 1px solid #5142FC;
    margin-bottom: 10px
}

.order-btn {
    cursor: pointer;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    align-items: center;
    border-radius: 6px;
    padding: 17px 15px;
    background-color: rgb(255, 221, 51);
}