.widget-icon {
    --size: var(--icon-size-18);
}

.iframe {
    width: 100%;
    height: var(--iframe-height);
    min-height: var(--iframe-min-height);
}

.red {
    background: linear-gradient(0deg,
            rgb(from var(--Text-Traffic-lights-Negative) r g b / 0) 10.87%,
            rgb(from var(--Text-Traffic-lights-Negative) r g b / 0.4) 100%) !important;
}

.yellow {
    background: linear-gradient(0deg,
            rgb(from var(--Text-Traffic-lights-Medium) r g b / 0) 10.87%,
            rgb(from var(--Text-Traffic-lights-Medium) r g b / 0.4) 100%) !important;
}

.green {
    background: linear-gradient(0deg,
            rgb(from var(--Text-Traffic-lights-Positive) r g b / 0) 10.87%,
            rgb(from var(--Text-Traffic-lights-Positive) r g b / 0.4) 100%) !important;
}

.gray {
    background: linear-gradient(0deg,
            rgb(from var(--Background-Brand-colors-Brand_color4) r g b / 0) 10.87%,
            rgb(from var(--Background-Brand-colors-Brand_color4) r g b / 0.4) 100%) !important;
}

.chart__container,
.chart__container * {
    @media (max-width: 1024px) and (min-width: 511px) {
        -webkit-tap-highlight-color: transparent;
        -webkit-focus-ring-color: rgba(0, 0, 0, 0);
        outline: none;
        user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        -webkit-touch-callout: none;
        touch-action: manipulation;
    }

    @media (max-width: 510px) {
        -webkit-tap-highlight-color: transparent;
        -webkit-focus-ring-color: rgba(0, 0, 0, 0);
        outline: none;
        user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        -webkit-touch-callout: none;
        touch-action: manipulation;
    }
}

.scroll-wrapper {
    position: relative;

    /* width: max-content;
    height: max-content; */

    &::after {
        --_scroll-elemenet-height: var(--scroll-elemenet-height, 100%);
        --_scroll-elemenet-percent: var(--scroll-elemenet-percent, 0);
        --_scroll-elemenet-right-offset: var(--scroll-elemenet-right-offset, -8px);

        content: "";

        position: absolute;
        top: var(--_scroll-elemenet-percent);
        right: var(--_scroll-elemenet-right-offset);

        width: 4px;
        height: var(--_scroll-elemenet-height);

        background-color: #3e3e3e;
        border-radius: 12px;

        transition: top 0.05s;
    }

    &.full-height::after {
        display: none;
    }
}

.custom-scroll {
    position: relative;
    overflow: auto;

    &::-webkit-scrollbar {
        display: none;
    }
}