/* input(76,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(90,12): run-time error CSS1035: Expected colon, found '{'
input(117,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(225,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(323,15): run-time error CSS1035: Expected colon, found '{'
input(385,9): run-time error CSS1035: Expected colon, found '{'
input(397,10): run-time error CSS1035: Expected colon, found '{'
input(414,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(433,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(543,19): run-time error CSS1035: Expected colon, found '{'
input(606,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(632,15): run-time error CSS1035: Expected colon, found '{'
input(666,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
input(672,13): run-time error CSS1035: Expected colon, found '{'
input(687,24): run-time error CSS1035: Expected colon, found '{'
input(696,6): run-time error CSS1035: Expected colon, found '.'
input(731,22): run-time error CSS1035: Expected colon, found '{'
input(774,16): run-time error CSS1035: Expected colon, found '{'
input(908,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(938,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(979,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(1143,12): run-time error CSS1035: Expected colon, found '{'
input(1191,11): run-time error CSS1035: Expected colon, found '{'
input(1232,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(1265,12): run-time error CSS1035: Expected colon, found '{'
input(1301,11): run-time error CSS1035: Expected colon, found '{'
input(1331,19): run-time error CSS1035: Expected colon, found '{'
input(1374,28): run-time error CSS1035: Expected colon, found '{'
input(1400,26): run-time error CSS1035: Expected colon, found '{'
input(1580,28): run-time error CSS1035: Expected colon, found '{'
input(1624,15): run-time error CSS1035: Expected colon, found '{'
input(1640,12): run-time error CSS1035: Expected colon, found '{'
input(1677,11): run-time error CSS1035: Expected colon, found '{'
input(1686,11): run-time error CSS1035: Expected colon, found '{'
input(1713,23): run-time error CSS1035: Expected colon, found '{'
input(1743,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(1775,18): run-time error CSS1035: Expected colon, found '{'
input(1807,22): run-time error CSS1035: Expected colon, found '{'
input(1916,34): run-time error CSS1035: Expected colon, found '{'
input(1940,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(1948,6): run-time error CSS1035: Expected colon, found '.'
input(1981,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(2001,23): run-time error CSS1035: Expected colon, found '{'
input(2020,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(2062,8): run-time error CSS1035: Expected colon, found '.'
input(2072,16): run-time error CSS1035: Expected colon, found '{'
input(2124,11): run-time error CSS1035: Expected colon, found '{'
input(2190,11): run-time error CSS1035: Expected colon, found '{'
input(2207,11): run-time error CSS1035: Expected colon, found '{'
input(2225,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '>'
input(2248,23): run-time error CSS1035: Expected colon, found '{'
input(2316,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
input(2383,7): run-time error CSS1035: Expected colon, found '{'
input(2472,22): run-time error CSS1035: Expected colon, found '{'
input(2502,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(2538,21): run-time error CSS1035: Expected colon, found '{'
input(2877,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(2895,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&' */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --outer-margin: 0px;
    --color-ui-card: var(--color-crmv3-card);
    --color-ui-stroke: var(--color-crmv3-stroke);
    --color-crm-typo-primary: var(--color-crmv3-typo-primary);
    --color-crm-typo-secondary: var(--color-crm3-typo-secondary);
    --content-padding: 8px;
    --nav-height: 64px;
    /**/

    --typo-primary: var(--color-crmv3-typo-primary);
    --typo-secondary: var(--color-crmv3-typo-secondary);
    --typo-secondary-alt: #998D84;
    --typo-muted: var(--color-crmv3-typo-secondary);
    --typo-danger: var(--color-crmv3-sell);
    --typo-success: var(--color-crmv3-buy);
    --wrapper-bg: #000;
    --nav-bg: var(--color-crmv3-panel);
    --sidebar-bg: var(--color-crmv3-panel);
    --sidebar-spacing: 0px;
    --page-outer-margin: 0px;
    --widget-card-bg: var(--color-crmv3-panel);
    --widget-card-border-radius: 2px;
    --widget-card-title-color: var(--typo-primary);
    --widget-card-title-font-size: 18px;
    --widget-card-title-font-weight: 700;
    --primary: #FF5A00;
    --primary-20: #FF5A0033;
    --primary-75: #FF5A00BF;
}

/* #region PAGE */

* {
    font-family: "Inter", sans-serif;
    scrollbar-color: var(--typo-secondary) transparent !important;
    scrollbar-width: thin !important;
}

body {
    height: 100dvh;
}

.main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.content {
    padding: var(--content-padding);
    transition: padding .1s;
}

hr {
    border-color: #EDEDED;
}

@media (min-width: 576px) {
    :root {
        --content-padding: 24px !important;
    }
}

/* #endregion */

/* #region ALERTS */

.alert {
    font-size: 16px;
    border-radius: 8px;
    padding: 8px;

    &.alert-danger {
        background-color: #311114;
        border-color: #6c161e;
        color: #d86778;
    }

    &.alert-warning {
        background-color: #302715;
        border-color: #7c6b3f;
        color: #D7C289;
    }
}

.home-alerts {
    .alert {
        padding: 12px;

        .alert-message {
            font-size: 16px;
            justify-content: center;
        }
    }
}


/* #endregion */

/* #region BACKGROUNDS */

.bg-panel, .bg-ui-panel {
    background-color: var(--color-crmv3-panel);
}
/* #endregion */

/* #region BADGES */

.badge {
    border-radius: 2px;
    font-weight: 500;
    padding: 6px 16px;

    &.badge-rounded {
        border-radius: 100vw;
    }

    &.bg-primary {
        background-color: var(--primary) !important;
        color: #fff !important;
    }

    &.badge-soft-primary {
        background-color: #CDD5FF !important;
        color: #18305E !important;
    }

    &.bg-secondary {
        background-color: #312E81 !important;
        color: var(--typo-primary) !important;
    }

    &.badge-soft-secondary {
        background-color: #ECECEC !important;
        color: #292D34 !important;
    }

    &.bg-success {
        background-color: #D0FFDC !important;
        color: #308F48 !important;
    }

    &.badge-soft-success {
        background-color: #0478574D !important;
        color: var(--typo-primary) !important;

        .bullet {
            color: #10B981;
            margin-right: 4px;
            font-weight: 700;
        }
    }

    &.bg-warning {
        background-color: #FFEBB5 !important;
        color: #645430 !important;
    }

    &.badge-soft-warning {
        background-color: #D99D0666 !important;
        color: var(--typo-primary) !important;
    }

    &.bg-danger, &.badge-soft-danger {
        background-color: #FFCACA !important;
        color: #623540 !important;
    }
    /**/

    &.badge-black {
        background-color: #000 !important;
        color: var(--typo-primary ) !important;
    }

    &.badge-dark {
        background-color: #333 !important;
        color: #fff !important;
    }
    /**/

    &.badge-live-now {
        background-color: #fff !important;
        color: #EF4444 !important;
    }

    &.badge-forex {
        background-color: #65A30D4D !important;
        color: var(--typo-primary) !important;
    }

    &.badge-crypto {
        background-color: #6D28D94D !important;
        color: var(--typo-primary) !important;
    }

    &.badge-futures {
        background-color: #1D4ED84D !important;
        color: var(--typo-primary) !important;
    }

    &.badge-duration-daily, &.badge-duration-weekly {
        background-color: #FFFFFF1A !important;
        color: var(--typo-primary) !important;
    }
}

/* #endregion */

/* #region BUTTONS */

.btn {
    border-radius: 4px;
    padding: 8px 16px;
}

.btn-primary {
    --bg-color: var(--primary);
    --border-color: var(--primary);
    --text-color: #fff;
    --icon-color: #fff;

    &.btn-primary-glow {
        box-shadow: 0 0 32px 0 rgba(255, 90, 0, 0.30);
    }
}

.btn-outline-primary {
    --border-color: var(--primary);
    --bg-active-color: var(--primary);
    --text-color: var(--primary);
    --icon-color: var(--primary);
    --text-active-color: #fff;
    --icon-active-color: #fff;
}

.btn-outline-primary-fade {
    --border-color: #5700C0;
    --bg-active-color: linear-gradient(90deg, #5700C0 0%, #3194E6 100%) !important;
    --text-color: #5700C0;
    --icon-color: #5700C0;
    --text-active-color: var(--color-crmv3-white);
    --icon-active-color: var(--color-crmv3-white);
}

.btn-secondary {
    --bg-color: #312E81;
    --border-color: #312E81;
    --text-color: var(--typo-primary);
    --icon-color: var(--typo-primary);
}

.btn-outline-secondary {
    --border-color: #504adf;
    --border-active-color: #312E81;
    --bg-active-color: #312E81;
    --text-color: #504adf;
    --icon-color: #504adf;
    --text-active-color: var(--typo-primary);
    --icon-active-color: var(--typo-primary);
}

.btn-success {
    --bg-color: var(--color-btn-success);
    --border-color: var(--color-btn-success);
    --text-color: var(--color-crmv3-white);
    --icon-color: var(--color-crmv3-white);
}

.btn-outline-success {
    --border-color: var(--color-btn-success);
    --bg-active-color: var(--color-btn-success);
    --text-color: var(--color-btn-success);
    --icon-color: var(--color-btn-success);
    --text-active-color: var(--color-crmv3-white);
    --icon-active-color: var(--color-crmv3-white);
}

.btn-danger {
    --bg-color: var(--color-crmv3-badge-red);
    --border-color: var(--color-crmv3-badge-red);
    --text-color: var(--typo-primary);
    --icon-color: var(--typo-primary);
}

.btn-outline-danger {
    --border-color: var(--color-crmv3-badge-red);
    --bg-active-color: var(--color-crmv3-badge-red);
    --text-color: var(--color-crmv3-badge-red);
    --icon-color: var(--color-crmv3-badge-red);
    --text-active-color: var(--color-crmv3-white);
    --icon-active-color: var(--color-crmv3-white);
}

.btn-outline-action {
    --border-color: var(--color-crmv3-power-action);
    --bg-active-color: var(--color-crmv3-power-action);
    --text-color: var(--color-crmv3-power-action);
    --icon-color: var(--color-crmv3-power-action);
    --text-active-color: var(--color-crmv3-white);
    --icon-active-color: var(--color-crmv3-white);
}

.btn-outline-power {
    --border-color: var(--color-crmv3-power-action);
    --bg-active-color: var(--color-crmv3-power-action);
    --text-color: var(--color-crmv3-power-action);
    --icon-color: var(--color-crmv3-power-action);
    --text-active-color: #000;
    --icon-active-color: #000;
}

/* #endregion */

/* #region LINK */

.link-primary, .link {
    color: var(--primary) !important;
    text-decoration-color: var(--primary) !important;

    .icon-svg {
        background-color: var(--primary) !important;
    }

    &:hover {
        color: var(--primary) !important;
        text-decoration-color: var(--primary) !important;

        .icon-svg {
            background-color: var(--primary) !important;
        }
    }
}
/* #endregion */

/* #region TYPOGRAPHY */

.text-primary-75 {
    color: var(--primary-75);
}

.text-danger {
    color: #EF4444 !important;
}

.text-success {
    color: #10B981 !important;
}

/* #endregion */

/* #region OTHER */

.border-primary {
    border-color: var(--primary) !important;
}

/* #endregion */

/**/

/* #region AVATAR SELECTOR */

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

.avatar-selector-preview {
    --size: 64px;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background-color: #111;
    border: 2px solid var(--color-ui-stroke);
    display: flex;
    align-items: center;
    justify-content: center;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.avatar-style-switcher {
    display: flex;
    align-items: center;
    gap: 10px;

    .btn {
        padding: 8px;
    }
}

.avatar-style-name {
    min-width: 140px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid var(--color-ui-stroke);
    border-radius: 4px;
    padding: 4px 12px;
    color: var(--typo-primary);
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;

    &:hover {
        border-color: var(--primary);
        background-color: color-mix(in srgb, var(--primary) 50%, transparent) !important;
        color: var(--typo-primary);
    }
}

.avatar-style-item {
    border-radius: 10px;
    border: 2px solid var(--color-ui-stroke);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 8px 8px;
    gap: 6px;
    background-color: color-mix(in srgb, var(--typo-primary) 3%, transparent);
    transition: border-color 0.15s, transform 0.1s;

    &:hover {
        border-color: color-mix(in srgb, var(--primary) 60%, transparent);
        transform: scale(1.03);
    }

    &.selected {
        border-color: var(--primary);
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent);

        .name {
            color: var(--primary);
        }
    }

    img {
        width: 64px;
        height: 64px;
        object-fit: contain;
    }

    .name {
        font-size: 11px;
        font-weight: 500;
        color: var(--typo-secondary);
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
}


.avatar-grid-wrapper {
    position: relative;
}

.avatar-grid-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.avatar-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    overflow-x: hidden;
}

.avatar-grid-item {
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid var(--color-ui-stroke);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: color-mix(in srgb, var(--typo-primary) 5%, transparent);
    transition: border-color 0.15s, transform 0.1s;
}

    .avatar-grid-item:hover {
        border-color: color-mix(in srgb, var(--primary) 60%, transparent);
        transform: scale(1.04);
    }

    .avatar-grid-item.selected {
        border-color: var(--primary);
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent);
    }

    .avatar-grid-item img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 8px;
    }

/* #endregion */

/* #region SIDEBAR */

.sidebar {
    border-radius: 0px !important;
    padding: 12px 0px;
}

.sidebar-brand {
    max-width: 90%;
    place-self: center;
    margin-bottom: 0px;
    padding-bottom: 24px;
}

.sidebar-list {
    scrollbar-width: thin !important;
}

.sidebar-header {
    font-weight: 400;
}

.sidebar-item {
    margin-top: 4px;

    .sidebar-link {
        border-left: 4px solid transparent;
        border-radius: 2px;
        color: var(--typo-secondary);
        font-size: 16px;
        font-weight: 400;
        padding: 12px 8px 12px 24px;

        .icon-svg {
            background-color: var(--primary);
        }

        &:hover {
            background-color: color-mix(in srgb, var(--primary) 10%, transparent);
        }
    }

    .sidebar-wallet-badge {
        align-items: center;
        background-color: #000;
        border: 1px solid #000;
        border-radius: 100px;
        color: var(--typo-secondary);
        display: inline-flex;
        font-size: 12px;
        gap: 8px;
        line-height: 1.4;
        padding: 2px 12px;
        text-decoration: none;
        transition: all .1s;
        white-space: nowrap;
        margin-left: auto !important;
    }

    &.active {
        > .sidebar-link {
            background-color: color-mix(in srgb, var(--primary) 20%, transparent);
            border-left-color: var(--primary);
            color: var(--typo-primary);
            font-weight: 400;

            .icon-svg {
                background-color: var(--primary);
            }
        }

        .sidebar-wallet-badge {
            background-color: color-mix(in srgb, var(--primary) 30%, transparent);
            border: 1px solid var(--primary);
            color: var(--typo-primary);
        }
    }
}

.sidebar-admin .sidebar-link {
    padding: 6px;
}

.sidebar-collapse {
    background-color: var(--color-crmv3-panel);
    top: 35%;
    transition: all 0.2s ease-in-out;

    &:hover {
        background-color: var(--primary);

        .icon-svg {
            background-color: var(--color-crmv3-panel);
        }
    }

    .icon-svg {
        background-color: var(--primary);
    }
}

.sidebar-actions-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0px 16px;
}


/* #endregion */

/* #region TOOLTIP */

.custom-tooltip {
    .icon-svg {
        mask-image: url(/icons/crm_v10/info-cirlce.svg);
    }

    .custom-tooltip-text {
        background-color: var(--color-crmv3-panel) !important;
        box-shadow: 0px 8px 24px 8px rgba(0, 0, 0, 0.20) !important;
        color: var(--typo-primary) !important;
        font-size: 16px;
        bottom: unset !important;
        top: 125%;
        margin-left: -50% !important;
    }

        .custom-tooltip-text::after {
            border-color: var(--color-crmv3-panel) transparent transparent transparent !important;
            rotate: 180deg;
            top: unset !important;
            left: unset !important;
            margin-left: -3px !important;
        }
}


/* #endregion */

/* #region WIDGET CARD */

.widget-card {
    border: 2px solid var(--color-ui-stroke);
    border-radius: 16px;
    transition: padding .1s;
    padding: 24px;

    @media (max-width: 575.98px) {
        padding: 12px;
    }
}

.widget-card-title-with-action {
    .action {
        color: var(--typo-primary);
        font-size: 14px;

        .icon-svg {
            background-color: var(--typo-primary);
        }
    }
}

.widget-card-title-container {
    display: flex;
    flex-direction: column;
    gap: 8px;

    .widget-card-title {
        margin-bottom: 0px;
    }
}

.widget-card-title {
    font-size: 26px;
    font-weight: 700;

    a.back-button {
        --svg-size: 55px;
        margin-right: -12px;
        transition: all .1s;

        &:hover {
            background-color: var(--primary);
            filter: brightness(90%);
        }
    }
}

.widget-card-subtitle {
    color: var(--typo-secondary);
    font-size: 16px;
    font-weight: 400;
}

/* #endregion */

/* #region DASHBOARD */

.widget-card:has(>.dashboard-value-card) {
    align-items: center;
    display: flex;
    flex-direction: row;
    padding-right: 0px;
    position: relative;
}

.dashboard-value-card {
    display: flex;
    flex-direction: column;
    gap: 16px;

    .title-container {
        align-items: center;
        display: flex;
        flex-direction: row;
        gap: 8px;

        .title {
            color: var(--typo-primary);
            font-size: 16px;
            font-weight: 400;
            order: 1;
        }

        .custom-tooltip {
            order: 2;
        }
    }

    .value-container {
        align-items: center;
        display: flex;
        flex-direction: row;
        gap: 12px;
    }

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

        span {
            letter-spacing: 3%;
            font-size: 22px;
            font-weight: 700;
        }
    }
}

.dashboard-progress-card {
    display: flex;
    flex-direction: column;
    gap: 12px;

    .title-row {
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        .label-container {
            align-items: center;
            background-color: #000;
            border-radius: 100vw;
            display: flex;
            justify-content: center;
            min-width: 35px;
            padding: 4px 12px;

            .label {
                color: var(--typo-primary);
                font-size: 14px;
                font-weight: 400;
                line-height: 14px;
            }
        }
    }

    .challenge-progress-bar {
        --progress-bar-bg: #000;
        --progress-bar-fg: var(--color-ui-scroll-fill);
        background-color: var(--progress-bar-bg);
        height: 12px;


        div {
            background-color: var(--progress-bar-fg);
        }

        &.neutral {
            --progress-bar-bg: #132E56;
            --progress-bar-fg: #3A64A3;
        }

        &.positive, &.success {
            --progress-bar-bg: #283816;
            --progress-bar-fg: #88D62C;
        }

        &.warning {
            --progress-bar-bg: var(--color-toast-warning-fill);
            --progress-bar-fg: var(--color-toast-warning-icon-fill);
        }

        &.negative, &.failed {
            --progress-bar-bg: #6F4646;
            --progress-bar-fg: #FF5B5B;
        }

        span.position-absolute {
            font-size: 14px;
        }
    }

    .challenge-progress-bar-value {
        font-size: 14px;
        position: absolute;
    }
}

.prg-title {
    font-size: 16px;
}

/* #endregion */

/* #region PERCENTUAL BADGES */

.perc-badge {
    border-radius: 100vw;
    color: #000;
    background-color: #B5B5B5;
    font-size: 16px;
    line-height: 16px;
    font-weight: 400;
    min-width: 32px;
    padding: 4px 8px;
    text-align: center;
}

.perc-badge-success {
    background-color: var(--color-crmv3-buy);
}

.perc-badge-danger {
    background-color: var(--color-crmv3-sell);
    color: var(--typo-primary);
}

/* #endregion */

/* #region PIE CONTAINER */

.half-pie-container-clip {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    border-radius: inherit;
}

.half-pie-container {
    --pie-size: 75px;
    display: block;
    height: var(--pie-size);
    overflow: visible;
    margin-right: 0px;
    width: var(--pie-size);
    position: absolute;
    right: 0;
    transform: translate(50%, 25%);
}

.pie {
    --perc: calc(50 + var(--percent) / 2);
    --ring-size: 4px;
    background-blend-mode: overlay;
    background-position: 50% 50%;
    background-size: 150%;
    border-radius: 50%;
    display: inline-block;
    min-width: var(--pie-size);
    max-width: var(--pie-size);
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    box-shadow: 0 0 0 8px #000;
    background-image: conic-gradient( from calc(180deg - 3.6deg * var(--perc)), var(--ring-fill-color) calc(3.6deg * var(--perc)), #363636 calc(3.6deg * var(--perc)));

    &::before {
        content: '';
        position: absolute;
        inset: var(--ring-size);
        border-radius: 50%;
        background: #212121;
    }

    &.pie-red {
        --ring-fill-color: var(--color-crmv3-sell);
    }

    &.pie-green {
        --ring-fill-color: var(--color-crmv3-buy);
    }
}

/* #endregion */

/* #region DASHBOARD NAVIGATION */

.dashboard-section-btn {
    align-items: center;
    background-color: #222222;
    border-radius: 8px;
    color: var(--typo-primary);
    font-size: 20px;
    height: 100%;
    padding: 16px;

    &.active {
        background-color: var(--primary);
        color: #fff;

        .go-to-container {
            display: none;
        }
    }

    &:not(.active):hover {
        background-color: color-mix(in srgb, var(--primary) 20%, transparent);
    }

    .go-to-container {
        align-items: center;
        color: var(--primary);
        display: flex;
        font-size: 16px;
        gap: 8px;
        padding-left: 16px;
        text-transform: lowercase;

        .icon-svg {
            --svg-size: 35px;
            mask-image: url(/icons/crm_v10/arrow-right.svg?v=3tYyY8saYJAke9FTG_qR5jL9LaY);
        }
    }
}

/* #endregion */

/* #region TOURNAMENT */

.tournament-details-card {
    background: #111;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    position: relative;

    &.tournament-details-room-card {
        background: var(--widget-card-bg);

        .title-container {
            align-items: center;
            display: flex;
            flex-direction: row;
            gap: 8px;
            justify-content: space-between;
            margin-bottom: 8px;


            .title {
                margin-bottom: 0px;
            }

            .link-primary {
                text-decoration: none;

                .icon-svg {
                    --svg-size: 30px;
                    margin-left: 0px;
                }
            }
        }
    }

    .partecipation-badge {
        color: #000;
        background-color: var(--primary);
        border-radius: 100vw;
        font-size: 14px;
        font-weight: 400;
        left: 50%;
        padding: 2px 12px;
        position: absolute;
        top: 0;
        transform: translate(-50%, -50%);
    }

    .title {
        color: var(--typo-primary);
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 8px;
    }

    .section {
        align-items: center;
        display: flex;
        flex-direction: row;
        gap: 16px;
        justify-content: space-between;

        .property-name {
            color: var(--typo-secondary);
            font-size: 14px;
            font-weight: 400;
            white-space: nowrap;
        }

        .property-value {
            align-items: center;
            color: var(--typo-primary);
            display: flex;
            font-size: 14px;
            font-weight: 400;
            gap: 8px;
            white-space: nowrap;
        }
    }

    .button-section {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        justify-content: end;
        gap: 8px;
        margin-top: 16px;

        .btn {
            /*width: 100%;*/
            font-size: 14px;
            padding: 2px 16px;
        }
    }

    .current-winner-container {
        align-items: center;
        background-color: var(--primary-20);
        border-radius: 8px;
        display: flex;
        flex-direction: row;
        gap: 16px;
        margin-top: 16px;
        padding: 8px;
        position: relative;

        .user-avatar {
            --size: 40px;
            height: var(--size);
            width: var(--size);
            flex-shrink: 0;
        }

        .current-winner {
            align-self: end;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex: 1 1 auto;
            min-width: 0;

            .subtitle {
                color: var(--typo-secondary);
                font-size: 12px;
                line-height: 12px;
                font-weight: 500;
            }

            .title {
                color: var(--typo-primary);
                font-size: 16px;
                font-weight: 500;
                margin-bottom: unset;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                min-width: 0;
                /*flex: 1 1 auto;*/
                display: inline-block;
            }

            .badge {
                border-radius: 100vw;
                font-size: 10px;
                line-height: unset;
                padding: 2px 12px;
                flex-shrink: 0;
            }
        }

        .value {
            align-self: end;
            color: var(--typo-primary);
            font-size: 18px;
            line-height: 24px;
            font-weight: 700;
            text-align: end;
            flex-shrink: 0;
            white-space: nowrap;
        }
    }
}

.tournament-cost-card {
    background-color: #111;
    border-radius: 8px;
    border: 2px solid var(--color-ui-stroke);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;

    .title {
        color: var(--typo-primary);
        font-size: 16px;
        font-weight: 500;
    }

    .section {
        align-items: center;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 8px;

        .property-name {
            color: var(--typo-secondary);
            font-size: 12px;
            font-weight: 400;
        }

        .property-value {
            color: var(--typo-primary);
            display: flex;
            font-size: 14px;
            font-weight: 600;
            gap: 8px;

            .icon-svg {
                background-color: var(--primary);
            }
        }

        &.total-section {
            margin-top: 8px;

            .property-name {
                color: var(--typo-primary);
                font-size: 16px;
            }

            .property-value {
                font-size: 18px;
                font-weight: 700;
            }
        }
    }
}

.tournament-room-leaderboard-table {
    tbody {
        tr.current-user {
            td {
                background-color: color-mix(in srgb, var(--primary) 20%, transparent) !important;
            }
        }
    }

    .ranking {
        background-color: #333;
        border-radius: 100vw;
        color: var(--typo-secondary);
        font-size: 14px;
        font-weight: 400;
        padding: 2px 16px;

        &:nth-child(1) {
            background-color: #F59E0B;
            color: #000;
        }

        &:nth-child(2) {
            background-color: #D4D4D8;
            color: #000;
        }

        &:nth-child(3) {
            background-color: #9A3412;
            color: #fff;
        }
    }
}

.tournament-ranking {
    background-color: #333;
    border-radius: 100vw;
    color: var(--typo-secondary);
    font-size: 14px;
    font-weight: 400;
    padding: 2px 16px;

    &.tournament-ranking-1 {
        background-color: #F59E0B;
        color: #000;
    }

    &.tournament-ranking-2 {
        background-color: #D4D4D8;
        color: #000;
    }

    &.tournament-ranking-3 {
        background-color: #9A3412;
        color: #fff;
    }
}

/* #endregion */


/* #region REPORT EMPTY CARD */

.report-empty-card {
    align-items: center;
    background-color: var(--color-crmv3-panel);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
    margin: auto;
    padding: 32px;
    width: fit-content;

    .title {
        color: var(--typo-primary);
        font-size: 18px;
        font-weight: 600
    }

    .subtitle {
        color: var(--typo-secondary);
        font-size: 16px;
        font-weight: 500;
    }
}

.report-date-box-container {
    margin-bottom: 8px;
    overflow-x: auto;
}

.report-date-box {
    align-items: center;
    background-color: var(--color-crmv3-panel);
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    margin-bottom: 8px;
    margin-left: auto;
    margin-right: auto;
    padding: 12px;
    width: fit-content;
}

/* #endregion */

/* #region REPORT */

.report-table {
    tbody {
        tr {
            td {
                &:first-child, &:nth-child(2) {
                    text-align: center;
                }

                &:nth-child(3), &:nth-child(4) {
                    text-align: end;
                }
            }
        }
    }
}


.report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.report-card {
    background-color: #222;
    border-radius: 12px;
    border: 2px solid var(--color-ui-stroke);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;

    .text-success {
        color: #04C571;
    }

    .text-danger {
        color: #F64E34;
    }

    .report-card-title {
        color: var(--typo-primary);
        font-size: 20px;
        font-weight: 700;
        text-align: center;
        text-wrap: auto;
        margin-bottom: auto;
    }

    .report-card-subtitle {
        color: var(--typo-secondary);
        font-size: 14px;
        font-weight: 600;
    }

    .report-card-primary-value {
        align-self: center;
        color: var(--typo-primary);
        font-size: 20px;
        font-weight: 700;
    }

    .report-card-secondary-value {
        color: var(--typo-primary);
        font-size: 16px;
        font-weight: 400;
    }

    .total-value {
        margin-bottom: 8px;
        text-align: center;
    }
}

#divEquity, #divDrawdown, #divSymbEquity {
    .highcharts-background {
        fill: transparent;
    }
}

/* #endregion */

/* #region SUBSCRIPTION CARD */

.subscription-card-container {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}

.subscription-card {
    background-color: var(--widget-card-bg);
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 12px;
    min-width: unset;
    max-width: unset;
    position: relative;
    scroll-snap-align: start;

    .partecipation-badge {
        color: #000;
        background-color: var(--primary);
        border-radius: 100vw;
        font-size: 14px;
        font-weight: 400;
        left: 50%;
        padding: 2px 12px;
        position: absolute;
        top: 0;
        transform: translate(-50%, -50%);
    }

    .subscription-card-title {
        color: var(--typo-primary);
        font-size: 20px;
        font-weight: 700;
        text-align: center;
    }

    .divider {
        background-color: var(--color-ui-stroke);
        height: 2px;
        width: 100%;
    }

    .section-container {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .button-section {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 12px;

        .btn {
            width: 100%;
        }
    }

    .section {
        align-items: center;
        display: flex;
        flex-direction: row;
        gap: 16px;
        justify-content: space-between;

        .property-name {
            color: var(--typo-secondary-alt);
            font-size: 14px;
            font-weight: 400;
            white-space: nowrap;
        }

        .property-value {
            align-items: center;
            color: var(--typo-primary);
            display: flex;
            font-size: 14px;
            font-weight: 400;
            gap: 8px;
            white-space: nowrap;
        }

        &.section-starting, &.section-ending {
            border-radius: 4px;
            margin: 0px -8px;
            padding: 4px 8px;
        }

        &.section-starting {
            background-color: #FFFFFF1A;
        }

        &.section-ending {
            background-color: #FF000033;

            .property-name, .property-value {
                color: #EF4444;
            }
        }
    }

    .overview-container {
        margin-bottom: 12px;

        .capital-container, .fee-container {
            border: 1px solid #000;
            border-radius: 8px;
            display: flex;
            flex: 1 1 auto;
            flex-direction: column;
            gap: 8px;
            padding: 12px;

            .title {
                font-size: 12px;
                font-weight: 400;
                text-transform: uppercase;
            }

            .value {
                font-size: 24px;
                font-weight: 700;
                line-height: 20px;
            }
        }

        .capital-container {
            background-color: color-mix(in srgb, var(--primary) 15%, transparent);
            border-color: color-mix(in srgb, var(--primary) 50%, transparent);

            .title {
                color: #d09668;
            }

            .value {
                color: var(--primary);

                .symbol {
                    color: color-mix(in srgb, var(--primary) 75%, transparent);
                    font-size: 14px;
                }
            }
        }

        .fee-container {
            background-color: #111;
            border-color: var(--color-ui-stroke);

            .title {
                color: var(--typo-secondary);
            }

            .value {
                align-items: end;
                gap: 6px;
                display: flex;
                color: var(--typo-primary);

                .icon-svg {
                }
            }
        }
    }

    .overview-section {
        background-color: #FFFFFF1A;
        border-radius: 8px;
        margin: 0px -12px;
        padding: 12px;
    }

    &.subscription-card-participating {
        background: linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.4)), linear-gradient(180deg, rgba(46, 46, 46, 0.00) 19.6%, #2F2F2F 41.7%), url(/img/crm_v10/tournament-card-bg.png?v=Aax2HgENo13Tbxrqm7FCt3v3f0A) -16.271px -29.342px / 118.243% 47.938% no-repeat, lightgray;

        .overview-section {
            background-color: #4040404D;
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);

            .property-name {
                color: #fff;
            }
        }
    }
}

/* #endregion */

/* #region HELP PAGE */

.crm-help-section-container {
    display: flex;
    flex-direction: column;
    gap: 16px;

    .crm-help-section-item {
        background-color: #141414;
        border-radius: 8px;
        color: var(--typo-primary);
        font-size: 16px;
        font-weight: 400;
        padding: 8px 12px;
        text-decoration: none;
        transition: all .1s, font-weight 0s;

        .icon-svg {
            background-color: var(--typo-primary);
        }

        &.selected {
            background-color: color-mix(in srgb, var(--primary) 20%, transparent);
            color: var(--typo-primary);
            font-weight: 500;
            outline: 2px solid var(--primary);

            .icon-svg {
                background-color: #fff;
            }
        }

        &:not(.selected):hover {
            background-color: color-mix(in srgb, var(--primary) 10%, transparent);
        }
    }
}

.crm-help-subsection-header {
    color: var(--typo-secondary);
    font-size: 12px;
    font-weight: 400;
}

.crm-help-subsection-item {
    align-items: center;
    color: var(--typo-primary);
    display: flex;
    flex-direction: row;
    gap: 8px;

    .icon-svg {
        background-color: var(--primary-75);
    }
}

/* #endregion */

/* #region PLATFORMS */

.platform-card {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;

    .title {
        color: var(--typo-primary);
        font-size: 32px;
        font-weight: 700;
    }

    .subtitle {
        color: var(--typo-secondary);
        font-size: 18px;
        font-weight: 400;
    }
}

/* #endregion */

/* #region IDENTITY */

.wrapper:has(form.identity-form) {
    background-color: #000;
    /*background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1)), url(/img/crm_v10/identity-bg.png?v=3tYyY8saYJAke9FTG_qR5jL9LaY);*/
    background-image: url(/img/crm_v10/identity-bg.png?v=3tYyY8saYJAke9FTG_qR5jL9LaY);
    background-repeat: no-repeat;
    background-position: 100% 0%;
}

.identity-logo-container {
    background: #222;
    border-radius: 8px;
    left: 0;
    margin: 8px;
    text-align: center;
    width: stretch;
    padding: 12px;
    position: sticky;
    top: 0;
    z-index: 10;

    .logo {
    }
}

.identity-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;

    .logo {
        margin: 16px auto;
        max-height: unset !important;
    }

    .big-title {
        color: var(--typo-primary);
        font-size: 40px;
        font-weight: 700;
        margin: 48px 0px;
        text-align: center;
    }
}

.identity-card {
    background-color: #222;
    border: 2px solid var(--color-ui-stroke);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 32px;
    padding: 24px;
    width: min(100%, 500px);

    .header-container {
        display: flex;
        flex-direction: column;
        gap: 8px;

        .title {
            color: var(--typo-primary);
            font-size: 20px;
            font-weight: 700;
        }

        .subtitle {
            color: var(--typo-secondary);
            font-size: 14px;
            font-weight: 400;
        }
    }

    .or-text {
        color: var(--typo-primary);
        font-size: 16px;
        font-weight: 400;
        text-align: center;
        margin: -8px 0px
    }
}

.identity-manage-nav {
    gap: 16px;

    & .nav-item {
        & .nav-link {
            background-color: #141414;
            border-radius: 8px;
            padding: 8px 12px;
            text-decoration: none;
            transition: all .1s, font-weight 0s;

            &:not(.active):hover {
                background-color: color-mix(in srgb, var(--primary) 10%, transparent);
            }

            &.active {
                background-color: color-mix(in srgb, var(--primary) 20%, transparent);
                color: var(--typo-primary);
                font-weight: 500;
                outline: 2px solid var(--primary);
            }
        }
    }
}

/* #endregion */

/* #region NAVBAR */

.navbar {
    border-radius: 12px;
    margin: 16px 16px 0px 16px;
    padding: 12px 16px;
    position: relative;

    .wallet-pill {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

        @media (max-width: 767.98px) {
            left: 16px;
            transform: translate(0, -50%);
        }
    }

    .navbar-nav {
        align-items: center;
        display: flex;
        flex-direction: row;
        margin-left: auto;

        .nav-item {
            padding: 0;
        }
    }

    @media (max-width: 767.98px) {
        border-radius: 0px;
        margin: 0px;
    }
}

.nav-item-dropdown {
    padding: 0 4px;

    .dropdown-toggle {
        i#arrow {
            background-color: var(--color-crmv3-icon-light) !important;
            mask-image: url(/icons/default/chevron-down.svg?v=sliXUu5NcXJ3D0RmpQr5KfPvgnQ);
        }

        &.show {
            i#arrow {
                mask-image: url(/icons/default/chevron-up.svg?v=zQAzCyMYVuBKgnfxPTc8KG4vyHY);
            }
        }

        &::after {
            content: none;
        }
    }

    .dropdown-menu {
        background-color: #111;
        border: 2px solid var(--color-ui-stroke);
        border-radius: 12px;
        flex-direction: column;
        gap: 8px;
        margin-top: 0;
        padding: 12px;

        &.show {
            display: flex;
        }

        .dropdown-item {
            align-items: center;
            background-color: #222;
            color: var(--typo-primary);
            display: flex;
            gap: 8px;
            padding: 4px 12px;
            transition: all .1s;

            .icon-svg {
                margin-left: auto;

                &:hover {
                    background-color: var(--primary);
                }
            }

            &:not(.selected) {
                &:hover {
                    background-color: color-mix(in srgb, var(--primary) 10%, transparent);
                    color: var(--primary);
                }

                .icon-svg {
                    visibility: hidden;
                }
            }

            &.selected {
                background-color: color-mix(in srgb, var(--primary) 20%, transparent);
                color: var(--primary);
            }
        }
    }


    .nav-item-dropdown-title {
        color: var(--color-crmv3-icon-light);
        font-size: 16px;
        font-weight: 700;

        &.icon-svg {
            background-color: var(--color-crmv3-icon-light) !important;
        }
    }
}

.user-avatar {
    height: 40px;
    background-color: #111;
    border: 2px solid var(--color-ui-stroke);
    border-radius: 100vw;
}


/* #endregion */

/* #region NOTIFICATIONS */

.notification-badge {
    position: absolute;
    top: -6px;
    right: -10px;
    font-size: 11px;
    font-weight: 600;
    background-color: #ff0000;
    color: #fff;
    line-height: 16px;
    border-radius: 16px;
    height: 14px;
    min-width: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.notification-dropdown {
    background-color: var(--color-crmv3-panel) !important;

    .notification-dropdown-inner {
        .notification {
            background-color: transparent;
            border-radius: 0px;
            transition: all .1s;

            &:hover {
                background-color: #F5F5F5;
            }
        }

        .empty-notification-text {
            text-align: center;
        }
    }
}

/* #endregion */

/* #region NOTIFICATIONS PAGE */

.notification-page-item {
    background-color: var(--color-crmv3-panel);

    &:hover {
        background-color: #F5F5F5;
    }
}

.notification-page-item-details-link {
    color: var(--primary);

    i.icon-svg {
        background-color: var(--primary) !important;
    }

    &:hover {
        color: var(--primary);

        i.icon-svg {
            background-color: var(--primary) !important;
        }
    }
}

/* #endregion */

/* #region FORM */

.form-label {
    color: var(--typo-secondary);
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.form-control, .form-select, .dt-input, select, select.dt-input, select.form-select, .select2-container--default .select2-selection--multiple, .select2-selection, input.crm-datatable-search {
    background-color: #111 !important;
    border-radius: 4px !important;
    border: 1px solid var(--color-ui-stroke) !important;
    color: var(--typo-primary) !important;
    padding: 8px 12px !important;
    transition: all .1s;

    &.focus, &:focus, &:focus-visible, &:focus-within {
        background-color: #000 !important;
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent) !important;
    }

    &::placeholder {
        color: var(--typo-secondary);
    }

    &.disabled, &:disabled {
        opacity: .5 !important;
        cursor: not-allowed;
    }
}

.form-check-container {
    align-items: center;
    display: flex;
    gap: 8px;

    .form-check-input {
        margin-top: 0px;
        margin-bottom: 0px;
    }

    .form-check-label {
        line-height: 14px;
    }
}

.form-check-label {
    font-size: 14px;
    color: var(--typo-secondary);
}

input[type="checkbox"] {
    background-color: #000 !important;
    border: 2px solid var(--color-ui-stroke) !important;

    &:focus {
        border-color: var(--primary) !important;
        box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--primary) 25%, transparent);
    }

    &:checked {
        background-color: var(--primary) !important;
        border-color: var(--primary) !important;
    }

    &[disabled] {
        filter: opacity(50%);
    }
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--typo-primary);
    -webkit-box-shadow: 0 0 0px 1000px #111 inset;
    transition: background-color 9999s;
}

.input-validation-error {
    box-shadow: 0 0 0 2px color-mix(in srgb, #ff0000 25%, transparent) !important;
}

.field-validation-error {
    margin-top: 4px !important;
}

/* #endregion */

/* #region DATATABLE */

.widget-card {
    div.dt-container {
        --dt-pg-button-bg: #000;
        --dt-pg-button-bg-hover: #515151;
    }
}

div.dt-container {
    --dt-pg-button-bg: #222;
    --dt-pg-button-bg-hover: #515151;

    .dt-paging {
        .dt-paging-button {
            border: unset !important;
            border-radius: 4px !important;
            color: var(--typo-prim) !important;
            margin-left: 8px;
            transition: all .1s;

            &:first-child {
                margin-left: 0px;
            }

            &:not(.disabled, .current) {
                &:hover {
                    background: var(--dt-pg-button-bg-hover) !important;
                    color: var(--typo-primary) !important;
                }
            }

            &.current {
                background: var(--dt-pg-button-bg) !important;
                color: var(--typo-primary) !important;
            }

            &.disabled {
                border: unset !important;
                color: var(--typo-secondary) !important;
                cursor: not-allowed;
                filter: opacity(.75);

                &:hover {
                    border: unset !important;
                    color: var(--typo-secondary) !important;
                }
            }
        }
    }
}

div.dt-info, div.dt-length label {
    color: var(--typo-secondary) !important;
}

/* #endregion */

/* #region TABLE */

.table {
    margin-bottom: 0px;
    border-spacing: 0;
    border-collapse: separate;

    thead {
        tr {
            th {
                background-color: #333333;
                border-bottom: unset;
                color: var(--typo-primary);
                font-size: 14px;
                font-weight: 400;
                padding: 8px;

                &:first-child {
                    border-top-left-radius: 12px;
                }

                &:last-child {
                    border-top-right-radius: 12px;
                }
            }
        }
    }

    tbody {
        tr {
            td {
                background-color: #000;
                border: 2px solid #333333;
                border-top: unset;
                color: var(--typo-primary);
                font-size: 14px;
                font-weight: 400;
                padding: 12px 8px;
            }

            &:last-child {
                td {

                    &:first-child {
                        border-bottom-left-radius: 12px;
                    }

                    &:last-child {
                        border-bottom-right-radius: 12px;
                    }
                }
            }

            &:nth-of-type(even) {
                td {
                    background-color: #111111;
                }
            }
        }
    }

    th, td {
        &:first-of-type {
            padding-left: 16px;
        }

        &:last-of-type {
            padding-right: 16px;
        }
    }
}

.table-alt {
    thead {
        tr {
            th {
            }
        }
    }

    tbody {
        tr {
            td {
                background-color: #222;
            }
        }
    }
}

.table-no-border, .table.no-border {
    tbody {
        tr {
            td {

                &:not(:first-child) {
                    border-left: unset;
                }

                &:not(:last-child) {
                    border-right: unset;
                }
            }
        }
    }
}


table.dataTable {
    > thead {
        > tr {
            > th, > td {
                padding: 10px;
                border-bottom: unset;
            }
        }
    }
}

div.dt-container.dt-empty-footer tbody > tr:last-child > * {
    border-bottom: 1px solid var(--color-ui-stroke);
}

/* #endregion */

/* #region COMPETITION */

.competitions-container {
    display: flex;
    flex-direction: column;
    gap: 8px;

    .competition-item {
        border: 2px solid var(--color-ui-stroke);
        border-radius: 8px;
        background-color: #222;
        max-width: unset;
        min-width: unset;
        padding: 24px;


        .competition-item-section {
            display: flex;
            flex-direction: column;

            .title {
                color: #998D84;
                font-size: 14px;
                font-weight: 400;
            }

            .value {
                color: var(--typo-primary);
                font-size: 16px;
                font-weight: 400;
            }
        }

        .leaderboard-button {
            align-items: center;
            border: 2px solid var(--color-ui-stroke);
            border-radius: 2px;
            padding: 10px;
            display: flex;
            flex-direction: row;
            justify-content: center;



            .icon-svg {
                background-color: var(--typo-primary);
            }

            &:hover {
                /*border-color: var(--primary);*/

                .icon-svg {
                    background-color: var(--primary);
                }
            }
        }
    }
}

/* #endregion */

/* #region SWITCH BUTTONS */

.switch-button-container, .table-mode-button-group {
    --text-color: var(--color-crmv3-icon-light);
    --icon-color: var(--color-crmv3-icon-light);
    --text-active-color: var(--color-crmv3-icon-light);
    --icon-active-color: var(--color-crmv3-icon-light);
    --font-size: 16px;
    background-color: var(--color-crmv3-panel);
    border-radius: 12px;
    display: flex;
    gap: 8px;
    padding: 8px;

    @media (max-width: 767.98px) {
        --font-size: 14px;
    }

    &.lg {
        --font-size: 18px;

        @media (max-width: 767.98px) {
            --font-size: 16px;
        }
    }

    .switch-button, button, .tab-selector {
        align-items: center;
        background-color: transparent;
        border-radius: 4px;
        display: flex;
        font-size: var(--font-size);
        gap: 8px;
        padding: 8px 24px;
        transition: all .1s;
        cursor: pointer;

        .switch-button-counter {
            display: none;
            background-color: #000;
            padding: 0px 4px;
            border-radius: 4px;
            font-size: 12px;
        }

        &.switch-button-empty {
            .switch-button-counter {
                opacity: .5;
            }
        }

        &:not(.selected):hover {
            background-color: color-mix(in srgb, var(--primary) 10%, transparent);
        }

        &.selected {
            background-color: var(--primary);
            color: var(--color-crmv3-icon-light) !important;
            font-weight: 400;

            i {
                color: var(--color-crmv3-icon-light) !important;
            }

            .icon-svg {
                background-color: var(--color-crmv3-icon-light) !important;
            }
        }
    }
}

.filter-switch-container {
    align-items: center;
    background-color: var(--color-crmv3-panel);
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    gap: 4px;
    padding: 4px;
    width: fit-content;

    i {
        color: var(--typo-primary);
        font-size: 16px;
        padding: 0px 8px;
    }

    .switch-button {
        align-items: center;
        border-radius: 4px;
        background-color: #000;
        color: var(--typo-primary);
        cursor: pointer;
        display: flex;
        flex-direction: row;
        font-size: 16px;
        font-weight: 400;
        gap: 8px;
        justify-content: center;
        padding: 6px 16px;
        transition: all .1s;

        &:is(button) {
            appearance: none;
            border: none;
            font-family: inherit;
            line-height: normal;
            outline: none;
            -moz-osx-font-smoothing: inherit;
            -webkit-font-smoothing: inherit;
        }

        .switch-button-counter {
            display: none;
            background-color: #fff;
            color: #000;
            padding: 0px 4px;
            border-radius: 4px;
            font-size: 12px;
        }

        &.switch-button-empty {
            .switch-button-counter {
                opacity: .5;
            }
        }

        &:not(.selected):hover {
            color: var(--primary);
        }

        &.selected {
            color: var(--primary);
            outline: 2px solid var(--primary);

            .switch-button-counter {
                background-color: var(--primary);
                color: #000;
            }
        }
    }
}

/* #endregion */

/* #region MODALS */

html:not([data-theme='light']) .btn-close {
    /*filter: brightness(0) invert(0);*/
}

.modal-content {
    background-color: var(--color-crmv3-panel);
    border-radius: 12px;
    border: 2px solid var(--color-ui-stroke);
}

.modal-title {
    align-self: start;
    line-height: unset;
}

.modal-subtitle {
    line-height: unset;
}

.modal-body {
    background-color: transparent;
    padding: 0px;

    .modal-body-text {
        font-size: 16px;
        color: var(--typo-secondary);
        font-weight: 400;
    }
}

#mdlAccountWidgets .modal-body {
    background-color: #141414;
}

/* #endregion */

/* #region WALLET */

.wallet-pill {
    align-items: center;
    background-color: #000;
    border: 1px solid #000;
    border-radius: 100px;
    color: var(--typo-secondary);
    display: inline-flex;
    font-size: 12px;
    gap: 8px;
    line-height: 1.4;
    padding: 4px 12px;
    text-decoration: none;
    transition: all .1s;
    white-space: nowrap;

    &:hover, &.active {
        background-color: color-mix(in srgb, var(--primary) 30%, transparent);
        border: 1px solid var(--primary);
        color: var(--typo-primary);
    }

    .wallet-pill-amount {
        color: var(--typo-primary);
        align-items: center;
        display: inline-flex;
        font-weight: 500;
        gap: 4px;
    }

    .wallet-pill-icon {
        --svg-size: 16px !important;
        background-color: var(--primary);
        flex-shrink: 0;
        margin: 0;
        transform: scale(1.1) !important;
    }

    @media (max-width: 991.98px) {
        display: none;
    }
}

.coin-recap {
    background-color: var(--color-crmv3-card);
    border: 2px solid var(--color-ui-stroke);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;

    .coin-recap-row {
        align-items: center;
        display: flex;
        font-size: 14px;
        justify-content: space-between;
        line-height: 1.3;

        .label {
            color: var(--typo-secondary);
        }

        .value {
            color: var(--typo-primary);
            text-align: right;
        }

        &.total {
            font-size: 18px;
            line-height: 1.2;

            .label {
                color: var(--typo-primary);
            }

            .value {
                font-weight: 700;
            }
        }
    }

    .btn {
        font-size: 14px;
        padding: 2px 16px;
    }
}

.tournament-promo-card {
    background-color: var(--color-crmv3-card);
    background-position: center;
    background-size: cover;
    border: 2px solid var(--color-ui-stroke);
    border-radius: 12px;
    color: var(--typo-primary);
    display: flex;
    flex-direction: column;
    height: 107px;
    justify-content: space-between;
    overflow: hidden;
    padding: 12px;
    position: relative;
    width: 100%;
    background-image: url(/img/crm_v10/add_coin.jpg?v=3tYyY8saYJAke9FTG_qR5jL9LaY);
}

    .tournament-promo-card::before {
        background: rgba(0, 0, 0, 0.2);
        content: "";
        inset: 0;
        position: absolute;
    }

    .tournament-promo-card .promo-title,
    .tournament-promo-card .promo-cta {
        position: relative;
        z-index: 1;
    }

    .tournament-promo-card .promo-title {
        font-size: 14px;
        font-weight: 700;
        line-height: 1.3;
    }

    .tournament-promo-card .promo-cta {
        align-self: start;
        background-color: var(--primary);
        border: none;
        border-radius: 4px;
        color: var(--typo-primary);
        font-size: 12px;
        line-height: 1.3;
        padding: 4px 16px;
        text-decoration: none;
    }

.wallet-table-wrapper {
    background-color: var(--color-crmv3-card);
    border: 2px solid var(--table-row-border);
    border-radius: 12px;
    overflow: hidden;
}

table.wallet-quickgrid {
    border-collapse: collapse;
    color: var(--typo-primary);
    margin: 0;
    width: 100%;
}

    table.wallet-quickgrid > thead > tr {
        background-color: var(--table-header-bg);
    }

        table.wallet-quickgrid > thead > tr > th {
            border-bottom: 1px solid var(--color-ui-stroke);
            color: var(--typo-primary) !important;
            font-size: 12px;
            font-weight: 400 !important;
            line-height: 14px;
            padding: 8px 16px !important;
            text-align: left;
            vertical-align: middle;
        }

            table.wallet-quickgrid > thead > tr > th .col-title {
                color: var(--typo-primary);
                font-weight: 400 !important;
                padding: 0 !important;
            }

            table.wallet-quickgrid > thead > tr > th button.col-title {
                color: var(--typo-primary);
                background: none;
                border: none;
            }

                table.wallet-quickgrid > thead > tr > th button.col-title:hover {
                    background-color: color-mix(in srgb, var(--primary) 10%, transparent) !important;
                }

    table.wallet-quickgrid > tbody > tr > td {
        background-color: transparent;
        border-bottom: 1px solid var(--table-row-border);
        color: var(--typo-primary);
        font-size: 12px;
        height: auto !important;
        line-height: 14px;
        padding: 12px 16px !important;
        vertical-align: middle;
    }

    table.wallet-quickgrid > tbody > tr:last-child > td {
        border-bottom: none;
    }

    table.wallet-quickgrid > tbody > tr:hover > td {
        background-color: color-mix(in srgb, var(--primary) 5%, transparent);
    }

    table.wallet-quickgrid .col-id {
        color: var(--typo-secondary);
    }

    table.wallet-quickgrid .col-coins {
        font-weight: 500;
    }

        table.wallet-quickgrid .col-coins .coins-positive {
            color: var(--color-crmv3-buy);
        }

        table.wallet-quickgrid .col-coins .coins-negative {
            color: var(--color-crmv3-sell);
        }

    table.wallet-quickgrid .col-status .status-badge {
        background-color: color-mix(in srgb, var(--primary) 20%, transparent);
        border-radius: 100px;
        color: var(--primary);
        display: inline-block;
        font-size: 11px;
        font-weight: 500;
        line-height: 1.4;
        padding: 2px 10px;
    }

        table.wallet-quickgrid .col-status .status-badge.processed {
            background-color: color-mix(in srgb, var(--color-crmv3-buy) 20%, transparent);
            color: var(--color-crmv3-buy);
        }

        table.wallet-quickgrid .col-status .status-badge.refunded {
            background-color: color-mix(in srgb, var(--color-crmv3-sell) 20%, transparent);
            color: var(--color-crmv3-sell);
        }

.wallet-paginator-row {
    align-items: center;
    display: flex;
    gap: 12px;
    margin-top: 16px;
    padding: 0 4px;
    width: 100%;
}

    .wallet-paginator-row .items-count {
        color: var(--typo-secondary);
        font-size: 14px;
        line-height: 1.3;
        margin-right: auto;
        white-space: nowrap;
    }

.wallet-paginator {
    flex: 1 1 auto;
}

    .wallet-paginator .paginator {
        flex: 1 1 auto;
        align-items: center !important;
        color: var(--typo-secondary);
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between;
        font-size: 14px;
        gap: 12px;
    }

    .wallet-paginator .pagination-text {
        color: var(--typo-secondary);
        font-size: 14px;
        line-height: 1.3;
        margin: 0 !important;
        white-space: nowrap;
    }

    .wallet-paginator .paginator nav {
        align-items: center;
        display: flex !important;
        flex-direction: row !important;
        gap: 4px;
        margin-left: 0 !important;
    }

        .wallet-paginator .paginator nav button {
            align-items: center;
            background-color: transparent !important;
            background-image: none !important;
            border: 1px solid var(--color-ui-stroke) !important;
            border-radius: 4px;
            color: var(--typo-primary);
            cursor: pointer;
            display: inline-flex;
            font-size: 12px;
            height: 32px !important;
            justify-content: center;
            line-height: 1;
            padding: 0;
            text-indent: 0;
            width: 32px !important;
        }

            .wallet-paginator .paginator nav button::before {
                color: var(--typo-primary);
                font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro" !important;
                font-size: 12px;
                font-weight: 900;
                line-height: 1;
            }

            .wallet-paginator .paginator nav button.go-first::before {
                content: "\f100";
            }

            .wallet-paginator .paginator nav button.go-previous::before {
                content: "\f104";
            }

            .wallet-paginator .paginator nav button.go-next {
                transform: none !important;
            }

                .wallet-paginator .paginator nav button.go-next::before {
                    content: "\f105";
                    transform: none !important;
                }

            .wallet-paginator .paginator nav button.go-last {
                transform: none !important;
            }

                .wallet-paginator .paginator nav button.go-last::before {
                    content: "\f101";
                    transform: none !important;
                }

            .wallet-paginator .paginator nav button:not([disabled]):hover {
                background-color: color-mix(in srgb, var(--primary) 15%, transparent) !important;
                border-color: var(--primary) !important;
            }

                .wallet-paginator .paginator nav button:not([disabled]):hover::before {
                    color: var(--primary);
                }

            .wallet-paginator .paginator nav button[disabled] {
                cursor: not-allowed;
                opacity: 0.4;
            }

/* #endregion */


.min-50vh-calc {
    min-height: calc((100dvh - var(--nav-height) - 16px - 12px) / 2)
}

/* #region AVATAR SELECTOR */


/* #endregion */

/* #region SNAPSHOTS CALENDAR */

.snapshots-calendar {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.snapshots-calendar-header {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(7, 1fr);
}

.snapshots-calendar-col-name {
    color: var(--typo-secondary);
    font-size: 14px;
    font-weight: 400;
    text-align: center;
}

.snapshots-calendar-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;

    &:not(:last-child) {
        margin-bottom: 8px;
    }

}

.snapshots-calendar-cell {
    background-color: var(--color-ui-stroke);
    border: 2px solid var(--color-ui-stroke);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 95px;
    padding: 8px;
    position: relative;
    transition: border-color 0.1s;

    &:hover {
        border-color: color-mix(in srgb, var(--primary) 50%, transparent);
    }

    .day-number {
        color: var(--typo-secondary);
        font-size: 14px;
        font-weight: 400;
    }

    .value-container {
        display: flex;
        flex-direction: column;
        gap: 4px;

        .value {
            font-size: 20px;
            font-weight: 700;
            line-height: 120%;
        }

        .subtitle {
            color: var(--typo-secondary-alt);
            font-size: 14px;
            font-weight: 400;
            line-height: 130%;
        }
    }

    &.snapshots-calendar-cell-empty {
        background-color: #222;
    }

    &.snapshots-calendar-cell-today {
        border-color: var(--primary) !important;
    }
}

/* #endregion */