﻿.ticker-container {
    display: flex;
    background-color: #21417c;
    height: 48px
}

    .ticker-container .ticker-carroussel {
        flex-grow: 1;
        overflow-x: scroll
    }

        .ticker-container .ticker-carroussel #ticker-content {
            white-space: nowrap;
            animation: marquee 300s linear 8s infinite;
            display: inline-block
        }

            .ticker-container .ticker-carroussel #ticker-content a {
                padding: 0 16px;
                display: inline-flex;
                align-items: center;
                height: 40px;
                border-right: 1px solid rgba(255,255,255,.2);
                flex-grow: 1
            }

                .ticker-container .ticker-carroussel #ticker-content a div.points, .ticker-container .ticker-carroussel #ticker-content a div.title {
                    font-size: 11px;
                    line-height: 16px;
                    color: #fff
                }

                .ticker-container .ticker-carroussel #ticker-content a div.title {
                    font-weight: 700;
                    text-transform: uppercase
                }

                .ticker-container .ticker-carroussel #ticker-content a div.points {
                    display: flex
                }

                    .ticker-container .ticker-carroussel #ticker-content a div.points .value {
                        margin: 0 8px;
                        font-weight: 700
                    }

                    .ticker-container .ticker-carroussel #ticker-content a div.points i.material-icons {
                        font-size: 16px;
                        margin-right: 4px
                    }

                    .ticker-container .ticker-carroussel #ticker-content a div.points .spread {
                        font-weight: 600
                    }

                .ticker-container .ticker-carroussel #ticker-content a.positivo div.points .spread, .ticker-container .ticker-carroussel #ticker-content a.positivo div.points i.material-icons {
                    color: #1eb980
                }

                .ticker-container .ticker-carroussel #ticker-content a.negativo div.points .spread, .ticker-container .ticker-carroussel #ticker-content a.negativo div.points i.material-icons {
                    color: #ff5252
                }

            .ticker-container .ticker-carroussel #ticker-content div.aditional {
                float: right;
                position: absolute;
                display: inline-block
            }

            .ticker-container .ticker-carroussel #ticker-content:hover {
                animation-play-state: paused
            }

        .ticker-container .ticker-carroussel::-webkit-scrollbar {
            width: 0 !important;
            height: 0 !important
        }

    .ticker-container .ticker-open-account {
        display: flex;
        align-items: center
    }

        .ticker-container .ticker-open-account a {
            align-items: center;
            background: #f6f9f8;
            color: #000;
            display: flex;
            height: 100%;
            padding: 0 5px 0 2px;
            white-space: nowrap
        }

        .ticker-container .ticker-open-account-c6 a {
            align-items: center;
            background: #000;
            color: #fff;
            display: flex;
            height: 100%;
            padding: 0 5px 0 2px;
            white-space: nowrap
        }

    .ticker-container .ticker-open-account-cred a {
        align-items: center;
        background: #000b5a;
        color: #fff;
        display: flex;
        height: 100%;
        padding: 0 5px 0 2px;
        white-space: nowrap
    }


.ticker-container .ticker-open-account-pag a {
    align-items: center;
    background: #50ca51;
    color: #fff;
    display: flex;
    height: 100%;
    padding: 0 5px 0 2px;
    white-space: nowrap
}

    .ticker-container .ticker-open-account-busca a {
        align-items: center;
        background: #0B67E6;
        color: #fff;
        display: flex;
        height: 100%;
        padding: 0 5px 0 2px;
        white-space: nowrap
    }


.ticker-container .ticker-open-account img {
    margin: 0 0 0 5px
}

.category .widget-ticker-highlow {
    padding: 0 16px
}

div.widget-ticker-highlow {
    background-color: #fff;
    min-width: 100%
}

    div.widget-ticker-highlow div.items {
        display: flex;
        justify-content: space-between
    }

        div.widget-ticker-highlow div.items div.table-quote h3 {
            font-weight: 600;
            font-size: 14px;
            line-height: 20px;
            color: #212121;
            letter-spacing: -.5px;
            text-transform: uppercase;
            margin: 0
        }

        div.widget-ticker-highlow div.items div.table-quote table {
            margin: 16px 0 0 0;
            width: 100%
        }

            div.widget-ticker-highlow div.items div.table-quote table thead tr th {
                font-weight: 400;
                font-size: 12px;
                line-height: 16px;
                color: #6c757d
            }

                div.widget-ticker-highlow div.items div.table-quote table tbody tr td:nth-child(2), div.widget-ticker-highlow div.items div.table-quote table thead tr th:nth-child(2) {
                    text-align: center;
                    font-weight: 400
                }

                div.widget-ticker-highlow div.items div.table-quote table tbody tr td:nth-child(3), div.widget-ticker-highlow div.items div.table-quote table thead tr th:nth-child(3) {
                    text-align: right
                }

            div.widget-ticker-highlow div.items div.table-quote table td {
                font-weight: 600;
                font-size: 13px;
                line-height: 22px;
                letter-spacing: -.3px;
                padding: 4px 0 4px 0
            }

            div.widget-ticker-highlow div.items div.table-quote table tr {
                border-bottom: 1px solid rgba(0,0,0,.12)
            }

            div.widget-ticker-highlow div.items div.table-quote table#high tr td:nth-child(2) {
                color: #1eb980
            }

            div.widget-ticker-highlow div.items div.table-quote table#low tr td:nth-child(2) {
                color: #ff5252
            }

        div.widget-ticker-highlow div.items div.table-quote:nth-child(1) {
            margin: 0 21.33px 0 0;
            flex-basis: calc(33.33% - 21.33px)
        }

        div.widget-ticker-highlow div.items div.table-quote:nth-child(2) {
            margin: 0 10.66px 0 10.66px;
            flex-basis: calc(33.33% - 21.33px)
        }

        div.widget-ticker-highlow div.items div.table-quote:nth-child(3) {
            margin: 0 0 0 21.33px;
            flex-basis: calc(33.33% - 21.33px)
        }

@media screen and (max-width:991px) {
    .ticker-container .ticker-open-account a {
        padding: 0 2px 0 0
    }

    div.widget-ticker-highlow div.items {
        flex-direction: column
    }

        div.widget-ticker-highlow div.items div.table-quote:nth-child(1) {
            margin: 0
        }

        div.widget-ticker-highlow div.items div.table-quote:nth-child(2), div.widget-ticker-highlow div.items div.table-quote:nth-child(3) {
            margin: 24px 0 0 0
        }
}

@keyframes marqueeTicker {
    0% {
        transform: translate(0,0)
    }

    100% {
        transform: translate(-100%,0)
    }
}
