
// Color Variables (define these before your styles)
    $color-background: #f8f8f8;
    $color-border: #eaeaea;
    $color-primary: #ff0000;
    $color-white: #ffffff;
    $color-text: #333333;
/* Main Ticker Container */
.multi-source-ticker {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    background: $color-background;
    border: 1px solid $color-border;
    border-radius: 3px;

    /* Header containing title and content */
    .mst-header {
        display: flex;
        align-items: center;
        width: 100%;
    }

    /* Ticker Title */
    .mst-title {
        padding: 8px 15px;
        font-weight: bold;
        text-transform: uppercase;
        white-space: nowrap;
        background: $color-primary;
        color: $color-white;
        z-index: 1;
    }

    /* Ticker Content */
    .mst-content {
        flex-grow: 1;
        overflow: hidden;
        position: relative;
        background: $color-background;

        /* Individual Ticker Items */
        .mst-item {
            padding: 8px 15px;
            white-space: nowrap;
            color: $color-text;

            a {
                color: inherit;
                text-decoration: none !important;

                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        flex-direction: column;

        .mst-header {
            flex-direction: column !important;
        }

        .mst-title {
            width: 100%;
            text-align: center;
        }

        .mst-content {
            width: 100%;
        }
    }
}