:root {
    --primary-color: rgb(49, 114, 243);
    --light-color: rgba(246, 247, 249, 1);
    --grey-color: #424953;
    --text-grey-color: #A1A4A7;
    --inner-grey: #242D39;
}

#menu {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    margin-bottom: 20px;
    color: var(--primary-color);
    gap: 13px;
}

.page {
    display: none;
}

#menu>a {
    font-weight: 600;
    font-size: 11px;
    text-align: center;
    width: calc(34% - 12px);
    height: 65px;
    background: #E7F3FF;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#menu img {
    display: block;
    margin-top: 1px;
    max-height: 25px;
}

.offer-box {
    border: 1.3px dashed var(--grey-color);
    border-radius: 15px;
    padding: 12px 27px 16px;
    text-align: center;
    color: var(--text-grey-color);
    margin-bottom: 20px;
    padding: 20px 0;

    font-size: 14px;
    font-weight: 400;
}

.offer-box>img {
    width: 24px;
    padding: 14px;
    border-radius: 50%;
    background: var(--light-color);
    box-sizing: content-box;
}

.offer-description {
    color: var(--light-color);
    font-size: 11px;
    font-weight: 300;
    margin: 8px 9px 23px;
}

.invited-count {
    margin: 0;
    color: #F1F1F1;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
}

.invited-by {
    margin: 0;
    margin-top: 10px;
    color: var(--on-surface-variant-2);
    font-weight: 400;
    font-size: 10px;
    line-height: 16px;
}

.profit-box {
    background: rgba(231, 243, 255, 1);
    color: var(--primary-color);
    border-radius: 15px;
    padding: 8px 0 4px;
    min-width: 173px;
    margin-bottom: 32px;
}

.info-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 18px 32px;
    border-radius: 15px;
    background-color: var(--bg-color-card);
}

.info-block__header {
    color: var(--on-surface);
    font-size: 10px;
    font-weight: 500;
    line-height: 16px;
    margin-bottom: 14px;
}

.info-block__header p {
    margin: 0;
}

.profit-box>.profit-title {
    font-size: 12px;
}

.profit-box>.profit {
    font-size: 18px;
    font-weight: 800;
    line-height: 32px;
}

.profit-box>img {
    width: 19px;
}

.coins_balance {
    background-color: var(--bg-color-card);
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    height: 80px;
    max-height: 56px;
    width: auto;

    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.coins_balance__text {
    font-size: 12px;
    font-weight: 500;
    color: var(--on-surface);
    margin-bottom: 4px;

    display: flex;
}

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

}

.coins_balance__moneys img {
    width: 20px;
    height: 20px;
}

.coins_balance__moneys_text {
    color: var(--bg-color-btn);
    font-weight: 500;
    line-height: 24px;
}

.coins_balance__moneys_text_transfer {
    font-weight: 600;
    font-size: 10px;
    color: var(--on-surface-variant);
    margin: 0;
}

.coins_balance__buttons button {
    background: var(--bg-color-btn);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;

    display: flex;
    padding: 4px;
}

.coins_balance__buttons button img {
    width: 24px;
    height: 24px;
}

/* NAVBAR */
.navbar_logo {
    display: flex;
    align-items: center;
    justify-content: space-between;

    color: #FFFFFF;
    font-weight: 600;
    font-size: 16px;
}

.navbar_logo__image {
    width: 45px;
    height: 45px;

    background-color: var(--on-surface);
    border: 2px solid #312F35;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-right: 7px;
}

.navbar_logo_user-image {
    background-color: transparent;
    border: none;
}

.navbar_logo__image img {
    width: 100%;

    user-select: none;
    pointer-events: none;
}

.navbar_logo_user-image img {
    width: 100%;
    height: 100%;
    border: 2px solid #312F35;
    border-radius: 50%;
}

.navbar_logo__name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50vw; /* Установите максимальную ширину по вашему усмотрению */
}

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

}

.navbar_buttons {
    display: flex;
    align-items: center;
    gap: 10px;
}

.navbar_leaderboard__button img {
    width: 32px;
    height: 32px;
}

.navbar_leaderboard__button {
    padding: 8px;
    background-color: var(--bg-color-card);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.container__coins {
    padding-bottom: 12px;
    margin-top: 13px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
}

/* MENU */
.menu {
    background-color: #121212;
    border-top: 2px solid rgb(38, 38, 40);
    padding-bottom: 20px;
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;

    z-index: 9999;
}

.menu_nav button {
    background: transparent;
    border: none;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding-top: 10px;
    color: var(--on-surface-variant);

    font-size: 10px;
    font-weight: 500;
    line-height: 12px;

    gap: 4px;

    transition: all .3s ease-in-out;
}

.menu_nav button path,
.menu_nav button rect,
.menu_nav button circle {
    transition: all .3s ease-in-out;
}

.menu_nav button.active {
    color: var(--bg-color-btn);
}

.menu_nav button.active path[stroke] {
    stroke: var(--bg-color-btn);
}

.menu_nav button.active rect[fill],
.menu_nav button.active circle[fill] {
    fill: var(--bg-color-btn);
}

.menu_nav button.active path:not([stroke]) {
    fill: var(--bg-color-btn);
}

.menu_nav button.active svg {
    filter: drop-shadow(0px 0px 13px rgba(255, 157, 0, 1));
}

.menu_nav button svg {
    transition: all .3s ease-in-out;
}

nav a svg {
    width: 20px !important;
    margin-bottom: 6px;
    transition-timing-function: stroke .3s ease-in-out;
}

nav a.active svg path {
    stroke: rgba(71, 102, 249, 1);
}

nav a:last-child.active svg path {
    stroke: none;
    fill: rgba(71, 102, 249, 1);
}

#withdraw-nav-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: linear-gradient(0deg, #484848, #484848);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.history-item-info .history-item-name {
    font-weight: 500;
    color: #FFFFFF;
    font-size: 12px;
    line-height: 16px;
}

.history-item-info .history-item-date {
    color: var(--text-grey-color);
    font-weight: 400;
    line-height: 12px;
    font-size: 10px;
}

.history-item-user {
    display: flex;
    gap: 8px;
}

.page-faq {
    margin-top: 20px;
}

.page-faq>p {
    color: #ffffff;
    font-size: 11px;
    font-weight: 300;
    text-align: center;
    padding: 24px 28px 20px;
    border: 1.3px dashed var(--grey-color);
    border-radius: 15px;
    margin-bottom: 20px;
}

form {
    margin-top: 17px;
}

.form-title {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 14px;
    margin-bottom: 2px;
}

.form-title>svg {
    width: 20px;
}

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

.input-control>input {
    width: 100%;
    /*padding: 16px 19px;*/
    border-radius: 10px 0px 0px 10px;
    font-size: 13px;
    /*height: 38px;*/
}

.input-control>label {
    font-size: 14px;
    color: var(--primary-color);
    background: rgb(112, 160, 255);
    border-radius: 0px 10px 10px 0px;
    width: 88px;
    height: 40px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* .invest-info {
padding: 19px 80px;
font-weight: 500;
font-size: 11px;
border: 1.3px dashed var(--grey-color);
border-radius: 15px;
margin-bottom: 36px;
} */
label.invest-info {
    width: 150% !important;
    cursor: initial;
    font-size: 11px !important;
    color: #FFFFFF;
}

.invest-info>span {
    color: #1B2431;
}

.invest-warning {
    color: rgba(243, 123, 123, 1);
    padding: 6px 36px;
    font-weight: 500;
    font-size: 11px;
    border: 1.3px dashed rgba(243, 123, 123, 1);
    border-radius: 15px;
    margin-top: 0px;
    text-align: center;
    margin-bottom: 6px;
}

#bottom-sheet>.content>.body>section {
    display: none;
}

.label-text {
    margin: 0px 0 2px;
    display: block;
    font-size: 11px;
    font-weight: 500;
}

.input-group {
    display: flex;
    gap: 14px;
    justify-content: space-evenly;
}

.input-group>input {
    padding: 11px 18px;
    margin-bottom: 6px;
}

#topup-info {
    margin: 20px 0;
    border: 1.3px dashed var(--grey-color);
    border-radius: 15px;
    padding: 25px 16px;
    font-size: 11px;
    font-weight: 300;
    color: var(--light-color);
    text-align: center;
}

#topup-info>p:first-child {
    margin-bottom: 8px;
}

#topup-info>#topup-min {
    font-size: 18px;
    font-weight: 700;
    background: #E7F3FF;
    color: rgb(49, 115, 243);
    padding: 16px 18px;
    width: fit-content;
    margin: 0 auto 10px;
    border-radius: 10px;
    margin-top: 22px;
    margin-bottom: 20px;
}

.id {
    font-weight: 600;
}

#tabbar {
    box-sizing: border-box;
    padding: 0 6px;
    display: flex;
    justify-content: space-evenly;
    gap: 1;
    align-items: center;
    font-size: 13px;
    color: rgba(138, 138, 138, 1);
    background: var(--light-color);
    height: 50px;
    border-radius: 15px;
}

#tabbar>div {
    width: 100%;
    box-sizing: border-box;
    max-width: 100%;
    text-align: center;
    cursor: pointer;
    padding: 13px 13px;
}

#tabbar .active-tab {
    color: rgb(255, 255, 255);
    border-radius: 10px;
    background: rgb(138, 138, 138);
}

#tab-contents {
    margin-top: 16px;
}

#tab-contents>div:not(:first-child) {
    display: none;
}

.minus {
    color: rgba(243, 123, 123, 1) !important;
}

#invest-content form {
    display: flex !important;
    flex-direction: column;
    gap: 15px;
}

.page-withdrawal {
    color: var(--light-color);
}

.page-investment {
    color: var(--light-color);
}

form {
    /*display: flex !important;*/
    /*flex-direction: column;*/
    /*gap: 20px;*/
}

/* .fixing-test {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: white;
padding-top:10px ;
}
.fixing-test button {
border-radius: 25px 25px 0px 0px;
} */
#withdrawal-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#withdrawal-form input::placeholder {
    color: rgb(138, 138, 138);
    font-family: Inter;
    font-size: 13px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0%;
    text-align: left;
}

/* Для Chrome, Edge и Safari */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Для Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

label {
    cursor: pointer;
}

h2 {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #E1E1E1;

    margin-top: 24px;
    margin-bottom: 16px;
}


.invite-friend-btn {
    background-color: var(--bg-color-btn);
    border-radius: 10px;
    padding: 8px 18px;
    text-align: center;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;

    font-weight: 600;
    font-size: 14px;
    line-height: 20px;

    justify-content: center;
}

/* FRIENDS MENU */
.friends_menu {
    display: none;

    margin: 14px 0;
}

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

    color: #2A2E31;
    background-color: var(--bg-color-btn);

    font-size: 14px;
    font-weight: 600;
    line-height: 20px;

    padding: 12px 12px;

    border-radius: 22px;
}

.friends .container_center_block__header p:last-child {
    color: var(--on-surface-variant);
    font-weight: 400;
}

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

    margin-bottom: 20px;

    background-color: #2A2E31;
    border-radius: 22px;
}

.friends_menu__info p {
    color: var(--on-surface-variant);

    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin-left: 12px;
}

.friends_menu button path,
.friends_menu button rect,
.friends_menu button circle {
    transition: all .3s ease-in-out;
}

.friends_menu__buttons .send_referal_link {
    color: var(--on-primary);
}

.friends_menu__buttons .send_referal_link path[stroke] {
    stroke: var(--on-primary);
}

.friends_menu__buttons .send_referal_link rect[fill],
.friends_menu__buttons .send_referal_link circle[fill] {
    fill: var(--on-primary);
}

.friends_menu__buttons .send_referal_link path:not([stroke]) {
    fill: var(--on-primary);
}

.friends_menu__buttons .copy_this {
    min-width: 43px;
    min-height: 43px;

    margin: 0;
    padding: 0;

    background-color: var(--container-high) !important;
}

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

.friends_trx {
    color: var(--bg-color-btn);
    font-size: 12px;
    line-height: 16px;

    display: flex;
    flex-direction: column;

    gap: 4px;
}

.transaction_item__course {
    font-size: 10px;
    line-height: 12px;
    font-weight: 600;

    color: var(--on-surface-variant);
}

.transaction_count {
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    color: var(--on-surface-variant);
    display: flex;
    flex-direction: column;

    gap: 4px
}

.transaction_minus {
    color: #E44D43 !important;
}

.transaction_plus {
    color: #24A576 !important;
}

.tag {
    color: var(--on-primary);

    font-size: 10px;
    font-weight: 400;
    line-height: 12px;
    /* 100% */

    flex-shrink: 0;
    padding: 2px 6px;

    border-radius: 10px;
    background: #FEBF56;

}

.container_center_block {
    overflow-y: auto;

    padding: 16px;
    border-radius: 10px;
    background: var(--bg-color-card);
}

.container_center_block__header {
    color: var(--on-surface);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;

    margin-bottom: 12px;
    margin-top: 0;

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

.container_center_block__text {
    font-size: 10px;
    font-weight: 400;
    line-height: 12px;
    color: var(--on-surface);
}

.container_center_block__important_text {
    padding: 12px 16px;
    background-color: rgba(220, 66, 77, 0.1);
    display: flex;
    gap: 12px;
    border-radius: 10px;
}

.container_center_block__important_text img {
    width: 24px;
    height: 24px;
    filter: drop-shadow(0px 0px 15px #DC424D);
}

.container_center_block__important_text p {
    color: var(--on-surface);
    font-size: 10px;
    line-height: 16px;
    font-weight: 400;

    margin: 0;
}

.container_center_block__image img {
    width: 100%;
}

.btn-primary {
    height: 40px;
    min-width: 216px;
    background-color: var(--bg-color-btn);
    color: var(--on-primary);

    font-size: 16px;
    font-weight: 600;
    letter-spacing: -5%;

    display: flex;
    align-items: center;
    justify-content: center;

    line-height: 0px;

    gap: 8px;

    border-radius: 10px;

    outline: none;
}

.btn-primary__light {
    background-color: #FEBF56;
}

.alert {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);

    border: 1px solid #48464B;
    border-radius: 20px;
    background: #383640;
    color: var(--on-surface);

    bottom: -200px;

    width: 100%;
    max-width: 292px;
    height: 40px;
    display: flex;
    align-items: center;

    text-stroke: 1px #48464B;

    transition: all .3s ease-in-out;

    z-index: 798;
}

.alert.active {
    bottom: 90px;
}

.alert_ico {
    margin-right: 12px;
    padding-left: 8px;

    width: 24px;
    height: 24px;
}

.alert_ico img {
    width: 100%;
    height: 100%;
}

.alert_text {
    font-size: 12px;
    font-weight: 600;
    line-height: 12px;
    letter-spacing: -0.6px;
}

@keyframes riseAndBounce {
    0% {
        bottom: -200px;
        /* Начальная позиция ниже экрана */
    }

    95% {
        bottom: 93px;
        /* Блок поднимается до конца экрана */
    }

    100% {
        bottom: 90px;
        /* Блок плавно опускается на 5 пикселей */
    }
}

@keyframes outAndBounce {

    0% {
        bottom: 90px;
    }

    5% {
        bottom: 95px;
    }

    100% {
        bottom: -200px;
    }

}

/* История друзей */
.history {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
}

.history-item {
    background-color: var(--container) !important;
    border-radius: 10px;
    padding: 8px 12px;

    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    margin-bottom: 10px;
}

.history-item-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.history-item-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.history-item-user img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

.history-item-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.history-item-name {
    color: var(--on-surface-variant-2);
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
}

.history-item-date {
    color: var(--on-surface-variant-2);
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
}

.history-item-profit {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.profit-amount {
    color: var(--bg-color-btn);
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
}

.profit-usd {
    color: var(--on-surface-variant);
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
}

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

.card_coins {
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    color: var(--on-surface);
}

.card_coins__trx {
    margin-right: 55px;
}

.card_coins__balance {
    display: flex;
    align-items: center;
    gap: 5px;

    color: #FEBF56;
    font-size: 16px;

    margin: 0;
    margin-top: 8px;
}

.card_coins__balance_trx {
    margin-top: 6px;
}

.card_coins__balance img {
    width: 20px;
    height: 20px;
}

/* CARD */
.friends_card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    height: 96px;
    border-radius: 10px;
    background-color: var(--bg-color-card);

    background-size: auto 150%;

    padding: 16px;

    position: relative;

    margin-bottom: 12px;
}

.transaction-reason {
    background-color: #f37b7b;
    color: #fff;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 400;
    border-radius: 0 0 10px 10px;
    margin-top: -8px;
    text-align: center;
}

.history-item-profit img {
    width: 20px;
    height: 20px;
    margin-left: 8px;
}

.minus {
    color: #F37B7B;
}

.plus {
    color: #7BF3AB;
}

.page-history .history-item-info .history-item-name {
    color: var(--on-surface-variant-2);
}

.page-history .history-item-info .history-item-date {
    color: var(--on-surface-variant-2);
}

.page-history .profit-amount {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}

.page-history .grid .grid-full p {
    color: var(--on-surface-variant);
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;

    text-align: center;
}


.withdraw__info {
    display: none;

    width: 100%;
    height: 100%;

    background-color: #0D0D0F;
}

.withdraw_info__container {
    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    margin: 0 14px;
}

.withdraw__info .info__elem {
    margin-top: 36px;
    margin-bottom: 16px;


    width: calc(100% - 16px);
}

.withdraw__info .withdraw_info__header {
    font-size: 18px;
    line-height: 28px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 16px;
    color: var(--bg-color-btn);
}

.withdraw__info .withdraw_info__header span {
    color: var(--bg-color-btn);
    font-weight: 700;
    display: inline-block;
    text-transform: uppercase;
}

.withdraw__info .withdraw_info__text {
    font-size: 12px;
    font-weight: 400;
    line-height: 163%;
    margin: 0;
    color: var(--on-surface-variant);
}

.time-remaining-time {
    font-size: 10px;
    line-height: 16px;
    font-weight: 600;
    color: var(--on-surface-variant-2);

    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}

.time-remaining-time p {
    margin-top: 4px;
}

/* Стили для формы кошелька */
.wallet-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wallet-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wallet-form label {
    color: var(--on-surface-variant);
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}

.wallet-form input {
    background-color: transparent;
    border: 1px solid var(--bg-color-btn);
    border-radius: 8px;
    padding: 12px 17px;
    color: var(--on-surface-variant);
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    width: 100%;
    box-sizing: border-box;
}

.wallet-form input::placeholder {
    color: #848E9C;
    font-size: 12px;
    font-weight: 400;
}

.wallet-form button[type="submit"] {
    margin-top: 8px;
    height: 40px;
    background-color: var(--bg-color-btn);
    color: var(--on-primary);
    font-size: 16px;
    font-weight: 600;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.investment_card_select_invest_amount .input-control {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 0;
}

.investment_card_select_invest_amount .investment-select {
    background-color: var(--container-low);
    border: 1px solid var(--outline);
    border-radius: 10px;
    padding: 11px 12px;
    color: var(--on-surface-variant);
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    width: 100%;
    height: 40px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23B2B2B2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.investment_card_select_invest_amount .next-btn {
    min-width: 80px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    height: 40px;
}

.investment_card_select_invest_amount {
    height: auto !important;
    padding-bottom: 16px;
}

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

    height: 48px;
    background-color: var(--container);
    border-radius: 8px;

    padding: 0 8px;
}

.transaction_item img {
    width: 32px;
}

.transaction_item p {
    color: var(--on-surface-variant);

    font-size: 12px;
    font-weight: 400;

    line-height: 16px;
}

.transaction_item a {
    font-size: 10px;
    font-weight: 400;

    line-height: 12px;

    color: var(--bg-color-btn);
    text-decoration: none;
}

.transaction_info {
    display: flex;
    gap: 11px;
}

.leaderboard .profit-amount {
    font-size: 10px;
    line-height: 12px;
    font-weight: 400;

    width: 40px;
    text-align: center;
}

.leaderboard .history-item-details p {
    margin: 0;
}

.leaderboard .history-item-profit {
    display: flex;
    margin-right:   ;
    align-items: center;
    flex-direction: row;
}

.leaderboard_types {
    display: flex;
    align-items: center;
    background-color: var(--container);
    border-radius: 8px;
}

.leaderboard_type {
    font-size: 10px;
    line-height: 12px;
    font-weight: 400;
    color: var(--bg-color-btn);
    padding: 3px 8px;
}

.leaderboard_type:nth-child(2) {
    border-left: 1px solid var(--container-high);
    border-right: 1px solid var(--container-high);
}

.leaderboard .history-item-user img {
    width: 24px;
    height: 24px;
}

.leaderboard .profit-amount:nth-child(2) {
    width: 51.25px;
    border-left: 1px solid var(--container-high);
    border-right: 1px solid var(--container-high);
}

.leaderboard .history-item-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 85px;
}