@keyframes ticker {
    0% {
        transform: translateX(0);
        visibility: visible;
    }

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

.ticker-container {
    font-family: 'Poppins', sans-serif;
    display: flex;
    flex-wrap: nowrap;
    background-color: #f0f1f3;
}

.ticker-container__left {
    white-space: nowrap; /* Do not wrap*/
    background-color: #0068a9;
    color: white;
    padding: 1rem;
    display: flex;
    align-items: center;
}

.ticker-container__left-icon {
    margin-left: 0.8rem;
}

.ticker-container__right {
    color: #000;
    flex-grow: 1;
    overflow: hidden;
}

.ticker-wrapper {
    box-sizing: content-box;
    width: 100%;
    padding-left: 100%;
}

.ticker {
    display: inline-block;
    white-space: nowrap;
    /* display items in a line */
    padding-right: 100%;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-name: ticker;
    animation-duration: 30s;
}

.ticker:hover {
    animation-play-state: paused;
}

.ticker__item {
    display: inline-block;
    padding: 1rem 2rem;
}

.ticker__item-rate {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.ticker__item-rate__fluctuation {
    padding-left: 5px;
}

.ticker__item-rate__fluctuation.--drop {
    color: #0f9d58;
}

.ticker__item-rate__fluctuation.--rise {
    color: #d23f31;
}

.ticker__item-rate__fluctuation-icon {
    font-size: 16px;
    transform: translateY(1px);
}

.ticker__error-msg {
    color: #d23f31;
    margin: 0;
}