.dinnovate-karma-container {
    --karma-accent-bg: #e6d3ff;
    --karma-accent-purple: #9747ff;
    --karma-bg-gray: #f7f9fa;
    --karma-bg-comment: #fff;
    --karma-bg-hover: #eaf1f5;
    --karma-border-radius: 10px;
    color: white;
    padding: 20px !important;

    --karma-text-main: #333;
    --karma-text-muted: #868fa0;

    & .karma-badge {
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        background-color: var(--karma-accent-bg);
        border-radius: 16px;
        color: var(--karma-accent-purple);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        height: 32px;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        min-width: 43px;
        padding: 0 20px;

        & img {
            width: 18px;
            margin-right: 7px;
        }

        & .total-score, & .indicator-total-score {
            font-size: 17px;
            font-weight: 500;
            margin: 0;
        }
    }

    & .karma-badge_size_s {
        height: 24px;
        padding: 4px 20px;
        & img {
            margin-right: 8px;
            width: 16px;
        }
        & .indicator-total-score {
            font-size: 16px;
            font-weight: 600;
        }
    }

    & .karma-footer-card {
        background-color: var(--karma-bg-gray);
        border-radius: var(--karma-border-radius);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        padding: 0 14px;
    }

    & .karma-container-header {
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }

    & .logo-block img {
        width: 90px;
    }

    & .karma-container-header-info {
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 28px;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;

        & .total-score-block {
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            background-color: #e6d3ff;
            border-radius: 16px;
            color: #9747ff;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            gap: 8px;
            height: 32px;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            min-width: 43px;
            padding: 0 20px;

            & img {
                width: 18px;
            }

            & .total-score {
                font-size: 17px;
                font-weight: 500;
                margin: 0;
            }
        }
    }

    & .btn-nomination {
        border-radius: 20px;
        height: 32px;
        max-width: 232px;
        min-width: 135px;
        width: 232px;
    }

    & .btn-nomination:hover {
        opacity: 0.6 !important;
    }

    & .btn-nomination_size_s {
        height: 26px;
        margin: 0;
        width: 132px;
    }

    & .karma-container-header-total-score {
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        background-color: var(--ui-color-primary);
        border-radius: 6px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        font-weight: bold;
        height: 32px;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        margin: 0;
        width: 95px;
    }

    & .karma-container-main {
        margin-top: 24px;
    }

    & .karma-c-blocks {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    & .karma-c-block:not(.block-opened) {
        margin-bottom: 10px;
    }

    & .karma-c-block-item {
        background-color: white;
        border-radius: var(--karma-border-radius);
        color: var(--karma-text-main);
        cursor: pointer;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        padding: 12px 14px;
        -webkit-transition: background-color .5s ease-in-out;
        -o-transition: background-color .5s ease-in-out;
        transition: background-color .5s ease-in-out;

        &.have-items:hover {
            background-color: var(--karma-bg-gray);
        }

        & .block-item-l {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;

            & .block-item-name {
                font-size: 16px;
            }
        }

        & .block-item-r {
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            gap: 8px;
        }
    }

    & .karma-c-block.block-opened {
        background-color: var(--karma-bg-gray);
        border-radius: var(--karma-border-radius);
    }

    & .block-opened {
        margin: 0 0 20px;
        padding-bottom: 20px;

        & .karma-c-block-content {
            display: block;
        }

        & .karma-c-block-item {
            background-color: var(--karma-bg-gray);

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

    & .karma-item-comment-count {
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        background-color: var(--ui-color-palette-blue-25);
        border-radius: 12px;
        color: #31a5ca;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        font-size: 14px;
        font-weight: bold;
        height: 24px;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        margin: 0;
        max-width: 100px;
        padding-left: 12px;
        padding-right: 12px;
        pointer-events: none;
    }

    & .karma-item-comment-count_size_s {
        height: 26px;
        margin-right: 3px;
        width: 26px;
    }

    & .karma-item-comment-count_empty {
        background-color: #e5e7e9;
        color: #535c69;
    }

    & .block-item-name {
        margin: 0;
    }

    & .block-item-total-score {
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        background-color: var(--ui-color-primary);
        border-radius: 6px;
        color: white;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        font-weight: bold;
        height: 24px;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        margin: 0 1px 0 0;
        -webkit-user-select: none;
           -moz-user-select: none;
            -ms-user-select: none;
                user-select: none;
        width: 83px;
    }

    & .karma-c-block-content {
        display: none;
        padding: 10px 14px 0;
    }

    & .karma-c-block-nominations {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    & .karma-c-block-nomination:not(:first-child) {
        margin-top: 10px;
    }

    & .karma-c-block-nomination-item {
        background-color: white;
        border-radius: var(--karma-border-radius);
        color: var(--karma-text-main);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        padding: 14px;
        -webkit-transition: background-color .5s ease-in-out;
        -o-transition: background-color .5s ease-in-out;
        transition: background-color .5s ease-in-out;
    }

    & .karma-c-block-nomination-item.have-items:hover {
        background-color: var(--karma-bg-gray);
        cursor: pointer;
    }

    & .nomination-item-header {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    & .karma-c-block-nomination-item .nomination-item-l, .karma-c-block-nomination-item .nomination-item-r {
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    & .nomination-item-name {
        margin: 20px 0;
        max-width: 80%;
        -webkit-user-select: none;
           -moz-user-select: none;
            -ms-user-select: none;
                user-select: none;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
    }

    & .karma-c-block-nomination-content {
        display: none;
        margin: 7px 0 0 41px;
    }

    & .nomination-opened .karma-c-block-nomination-content {
        margin-top: 20px;
        display: block;
    }

    & .nomination-opened .karma-c-block-nomination-item {
        background-color: var(--karma-bg-gray);

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

    & .karma-c-block-nomination-comments {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    & .karma-c-block-nomination-comment {
        background-color: var(--karma-bg-comment);
        border-radius: 12px;
        color: #868d96;
        font-size: 13px;
        overflow-wrap: break-word;
        padding: 18px;
    }

    & .karma-c-block-nomination-comment:not(:first-child) {
        margin-top: 12px;
    }

    & .karma-container-footer {
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 16px;
        margin-top: 24px;
    }

    & .karma-c-footer-l {
        max-width: 179px;
        padding: 10px;
    }

    & .karma-wallet-info-title {
        color: var(--karma-text-muted);
        font-size: 14px;
        margin: 0 0 15px;
    }

    & .wallet-coins-block {
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;

        & .coins {
            color: #000;
            font-size: 52px;
            font-weight: 500;
            margin: 0 14px 0 0;
            overflow-x: hidden;
            -o-text-overflow: ellipsis;
               text-overflow: ellipsis;
        }

        & .coin-logo {
            width: 40px;
        }
    }

    & .karma-c-footer-r {
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
        height: 114px;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;

        & .karma-wallet-info-description {
            color: var(--karma-text-muted);
            font-size: 14px;
            font-weight: 400;
            line-height: 15px;
            margin: 0 0 14px;
        }

        & .karma-shop-link {
            background-color: #bbed21;
            border-radius: 5px;
            color: #525c69;
            font-size: 13px;
            font-weight: 600;
            padding: 11px 0;
            text-align: center;
            -webkit-transition: background-color .5s ease-in-out;
            -o-transition: background-color .5s ease-in-out;
            transition: background-color .5s ease-in-out;
            width: 374px;

            &:hover {
                background-color: var(--ui-color-palette-blue-25);
                cursor: pointer;
            }
        }
    }

    & .karma-admin-container {
        background-color: #000;
        border-radius: var(--karma-border-radius);
        color: #fff;
        margin-top: 24px;
        padding: 20px;
    }

    & .karma-admin-title {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 12px;
    }

    & .karma-admin-links {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    & .karma-admin-link {
        align-items: center;
        background-color: #fff;
        border-radius: 24px;
        color: #000;
        display: flex;
        font-size: 13px;
        font-weight: 500;
        height: 32px;
        justify-content: center;
        padding: 0 20px;
        text-decoration: none;
        transition: background-color .3s ease-in-out;

        &:hover {
            background-color: #e5e5e5;
            color: #000;
            text-decoration: none;
        }
    }
}