.chart-portlet {
    & .visible {
        display: block;
    }

    & .hidden {
        display: none;
    }

    & .portlet-title {
        color: var(--jl-text);
        font-size: var(--jl-font-xxs);
        padding-top: var(--jl-padding-xs);
        padding-bottom: var(--jl-padding-xxxs);
        text-align: left;
        padding-left: var(--jl-padding-m);
        padding-right: var(--jl-padding-m);
        max-block-size: 32px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    & .legend {
        padding: 3px;
        display: inline-block;
        margin-inline: 3px;
        vertical-align: middle;
    }

    & .bar {
        height: 10px;
        margin-bottom: 2px;
    }

    & .line {
        padding-block: 1px;
    }

    & .portlet-is-empty {
        color: #a9a9a921;
        font-size: calc(3 * var(--jl-base-font-size));;
        margin: 20% 31%;
        font-weight: bold;
    }

    & .canvas-wrapper {
        padding-inline: var(--jl-padding-m);
        height: 100%;
    }

    & .radar {
        padding-inline: 0 !important;
    }

    & .portlet-total-score {
        float: right;
        margin-right: 9px;
        font-size: var(--jl-font-l);
        padding: var(--jl-padding-xs);
        border: var(--jl-border-card);
        color: var(--jl-primary);
        position: relative;
        top: -224px;
        box-shadow: var(--jl-table-box-shadow2);
        border-radius: 5px;
        font-weight: bold;
    }
}