/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
.stock-price-container {
    display: flex;
    background-color: #0C4C8E;
}
.stock-carroussel {
    flex-grow: 1;
    overflow-x: scroll;
}
.stock-carroussel::-webkit-scrollbar {
    width: 0!important;
    height: 0!important
}
.stock-content {
    white-space: nowrap;
    animation: marquee 20s linear 8s infinite;
    display: inline-block;
}
.stock-content span {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    padding-right: 6px;
}
.stock {
    display: inline-flex;
    flex-grow: 1;
    padding: 0 12px;
    height: 40px;
    align-items: center;
    border-right: 1px solid rgba(255,255,255,.2);
}
.stocks-dublicate {
    float: right;
    position: absolute;
    display: inline-block
}
.stock-values {display: flex;}
.stock-content .serf-positive {color: #61af2f;}
.stock-content .serf-negative {color: #ff2929;}
.stock-content:hover { animation-play-state: paused; }

@keyframes marquee {
    0% {transform: translate(0,0)}
    100% {transform: translate(-100%,0)}
}