/* General theme independent control css. */
.TcHmi_Controls_Beckhoff_TcHmiEventLine {
    overflow: hidden;
}

.TcHmi_Controls_Beckhoff_TcHmiEventLine-Template {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
}
.TcHmi_Controls_Beckhoff_TcHmiEventLine-Icon {
    height: 100%;
    flex-grow: 0;
    flex-shrink: 0;
}
.TcHmi_Controls_Beckhoff_TcHmiEventLine-Message-Container {
    height: auto;
    flex-grow: 1;
    flex-shrink: 1;
    overflow: hidden;
    white-space: nowrap;
}
.TcHmi_Controls_Beckhoff_TcHmiEventLine-Message-Container span {
    white-space: pre;
    height: 100%;
}
.TcHmi_Controls_Beckhoff_TcHmiEventLine-Message-Container.ellipsis span {
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
}
.TcHmi_Controls_Beckhoff_TcHmiEventLine-Message-Container.marquee-left-to-right,
.TcHmi_Controls_Beckhoff_TcHmiEventLine-Message-Container.marquee-right-to-left {
    max-width: 100vw; /* for iOS */
    overflow: hidden;
}
.TcHmi_Controls_Beckhoff_TcHmiEventLine-Message-Container.marquee-left-to-right span,
.TcHmi_Controls_Beckhoff_TcHmiEventLine-Message-Container.marquee-right-to-left span {
    display: inline-block;
}
.TcHmi_Controls_Beckhoff_TcHmiEventLine-Message-Container.marquee-left-to-right span {
    animation: TcHmi_Controls_Beckhoff_TcHmiEventLine-marquee-left-to-right linear infinite;
}
.TcHmi_Controls_Beckhoff_TcHmiEventLine-Message-Container.marquee-right-to-left span {
    animation: TcHmi_Controls_Beckhoff_TcHmiEventLine-marquee-right-to-left linear infinite;
    float: right;
}
.TcHmi_Controls_Beckhoff_TcHmiEventLine-Template:hover
    .TcHmi_Controls_Beckhoff_TcHmiEventLine-Message-Container.marquee-left-to-right
    span,
.TcHmi_Controls_Beckhoff_TcHmiEventLine-Template:hover
    .TcHmi_Controls_Beckhoff_TcHmiEventLine-Message-Container.marquee-right-to-left
    span {
    animation-play-state: paused;
}
@keyframes TcHmi_Controls_Beckhoff_TcHmiEventLine-marquee-left-to-right {
    0%,
    20% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(calc(-50% + 3px), 0, 0);
    }
}
@keyframes TcHmi_Controls_Beckhoff_TcHmiEventLine-marquee-right-to-left {
    0%,
    20% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(calc(50% - 3px), 0, 0);
    }
}
.TcHmi_Controls_Beckhoff_TcHmiEventLine-Button {
    height: 100%;
    right: 0;
    flex-grow: 0;
    flex-shrink: 0;
}