.marquee-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    background-color: #f4f6f9;
    overflow: hidden;
    height: 50px;
}

.top-stories-bar {
    background-color: #ffffff;
    position: relative;
    overflow: hidden;
    font-weight: 700;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.07);
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.07);
    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.07);
}

.top-stories-bar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 50%;
    background-color: #dee2e6;
}

.top-stories-bar .top-stories-lists {
    display: block;
    margin-bottom: 0;
    position: relative;
    overflow: hidden;
    padding-left: 0;
    background-color: #ffffff;
    height: 50px;
}

.top-stories-bar .top-stories-lists::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 80px;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
}

.fixed-label {
    display: flex;
    align-items: center;
    background-color: #dee2e6;
    padding: 14px 10px 14px 35px;
    transform-origin: right;
    position: relative;
    z-index: 1;
    white-space: nowrap;
}

.fixed-label::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: -19%;
    width: 39%;
    background-color: #dee2e6;
    transform: skew(20deg);
    -webkit-transform: skew(20deg);
    -moz-transform: skew(20deg);
    -ms-transform: skew(20deg);
    z-index: -1;
}

.fixed-label .dotd {
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 50%;
    margin-right: 8px;
    animation: blink 1s infinite;
}

.fixed-label .dot {
    position: absolute;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    background-color: #c80000;
    top: 50%;
    margin-top: -5px;
    left: 10px;
    z-index: 2;
}

.fixed-label .dot::before {
    content: "";
    position: absolute;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border: 1px solid #c80000;
    top: 50%;
    margin-top: -5px;
    left: 50%;
    margin-left: -5px;
    animation-name: blink-a;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

@keyframes blink-a {
    0% {
        transform: scale(1, 1);
    }

    100% {
        transform: scale(3, 3);
        opacity: 0;
    }
}

.fixed-label .dot::after {
    content: "";
    position: absolute;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border: 1px solid #c80000;
    top: 50%;
    margin-top: -5px;
    left: 50%;
    margin-left: -5px;
    animation-name: blink-b;
    animation-duration: 2s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
}


@keyframes blink-b {
    0% {
        transform: scale(1, 1);
    }

    100% {
        transform: scale(3, 3);
        opacity: 0;
    }
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.1;
    }
}

.marquee-container {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    padding: 10px;
}

.marquee-container::after {
    content: "";
    position: absolute;
    top: 0;
    right: 15px;
    bottom: 0;
    width: 80px;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #eaeaea);
}

.marquee-content {
    display: inline-block;
    padding-left: 100%;
    animation: scroll-left 50s linear infinite;
}

@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

.marquee-item {
    display: inline-flex;
    align-items: center;
    margin-right: 60px;
    font-weight: 600;
    color: #007bff;
}

.dot-wrapper {
    position: relative;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    transform: rotate(20deg);
    animation: rotate-bg 2s linear infinite;
}

.dot-bg {
    background-color: #dee2e6;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
}

.marquee-item .dot {
    width: 8px;
    height: 8px;
    background-color: red;
    border-radius: 50%;
    animation: blink 1s infinite;
}

@keyframes rotate-bg {
    0% {
        transform: rotate(20deg);
    }

    100% {
        transform: rotate(380deg);
    }
}

.marquee-container:hover .marquee-content {
    animation-play-state: paused;
}