.runningLineWidget {
    position: relative;
    width: 100%;
    overflow: hidden
}

.runningLineWidgetTitle {
    max-width: 80%;
    padding: 0 5px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(var(--b-sc), 1);
    background: rgba(var(--b), 1);
    z-index: 1
}

[class*=is-web] .runningLineWidgetTitle {
    font-size: 14px;
    line-height: 18px
}

[class*=is-mobile] .runningLineWidgetTitle {
    font-size: 12px;
    line-height: 14px
}

.layout-header-holder-bc .runningLineWidgetTitle {
    display: none
}

.layout-header-holder-bc .runningLineWrapper {
    border-bottom: 1px solid rgba(var(--hero), 1)
}

.layout-content-holder-bc .harmonyWidgetRunningLine {
    padding: 8px 0
}

.layout-content-holder-bc .hm-row-bc.has-Ortak-Widget .runningLineWrapper {
    border-top: 1px solid rgba(var(--hero), .5);
    border-bottom: 1px solid rgba(var(--hero), .5)
}

.runningLineWrapper {
    width: 100%;
    overflow: hidden
}

.runningLineWrapper.withShadows:before,
.runningLineWrapper.withShadows:after {
    content: "";
    height: 100%;
    position: absolute;
    bottom: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1
}

[class*=is-web] .runningLineWrapper.withShadows:before,
[class*=is-web] .runningLineWrapper.withShadows:after {
    width: 100px
}

[class*=is-mobile] .runningLineWrapper.withShadows:before,
[class*=is-mobile] .runningLineWrapper.withShadows:after {
    width: 50px
}

.runningLineWrapper.withShadows:before {
    left: 0;
    background: linear-gradient(to right, rgba(var(--b), 1), rgba(var(--b), 0))
}

.runningLineWrapper.withShadows:after {
    right: 0;
    background: linear-gradient(to left, rgba(var(--b), 1), rgba(var(--b), 0))
}

.runningLine {
    display: flex;
    align-items: center
}

.runningLine.frozen {
    justify-content: center
}

.runningLine:not(.frozen) {
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-delay: .7s
}

[class*=is-web] .runningLine:not(.frozen) {
    animation-duration: 80s
}

[class*=is-mobile] .runningLine:not(.frozen) {
    animation-duration: 120s
}

[dir=ltr] .runningLine:not(.frozen) {
    animation-name: running-line-LTR
}

[dir=rtl] .runningLine:not(.frozen) {
    animation-name: running-line-RTL
}

@keyframes running-line-LTR {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(-50%)
    }
}

@keyframes running-line-RTL {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(50%)
    }
}

.runningLineItem {
    width: 280px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative
}

.runningLineItem:not(.isLoading) {
    padding: 14px 20px
}

.runningLineItem.isLoading {
    width: 100%;
    padding: 10px
}

[class*=is-web] .runningLineItem:hover {
    cursor: pointer
}

.runningLineItem+.runningLineItem:before {
    content: "";
    font-family: BetConstruct-Icons, sans-serif;
    font-size: 14px;
    line-height: 18px;
    color: rgba(var(--hero), 1);
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

[dir=ltr] .runningLineItem+.runningLineItem:before {
    left: -7px
}

[dir=rtl] .runningLineItem+.runningLineItem:before {
    right: -7px
}

.running-line-item-label {
    font-size: 13px;
    white-space: nowrap;
    color: rgba(var(--b-sc), .8);
    letter-spacing: 1px
}

.running-line-item-value {
    font-size: 13px;
    white-space: nowrap;
    color: rgba(var(--b-sc), 1);
    margin-inline-start: 5px
}