:root {
    --agrupador: #C9D5E7;
    --riscoBarra: #C9D5E7;
    --riscoFundo: #00559A;
    --textoNomeFundo: #0071CE;
    --subscreverBtn: #0071CE;
    --textoDownloads: #0071CE;
    --textoCabecalho: #00559A;
    --textoValoresCabecalho: #0A243E;
    --textoAgrupadoresCabecalho: #0A243E;
    --backgroundCabecalhos: #F2F4F8;
    --borderCabecalho: #9DB1C9;
    --textoValoresFundo: #3F5B78;
}

#header {
    display: grid;
    text-align: center;
    grid-template-columns: repeat(8, 1fr);
    max-width: 1260px;
    width: 100%;
}

.headerBackground,
.titleBackground {
    display: flex;
    justify-content: center;
    background-color: var(--backgroundCabecalhos);
}

.headerBackground {
    padding-top: 10px;
}

#header div:nth-child(1) {
    grid-column-start: 2;
    grid-column-end: 4;
}

#header div:nth-child(2) {
    grid-column-start: 4;
    grid-column-end: 8;
}

#header div:nth-child(3) {
    grid-column-start: 1;
    grid-column-end: 2;
}

#header > div,
.headerCompact {
    background-color: var(--agrupador);
    padding: 8px;
    border: solid var(--borderCabecalho);
    border-width: 2px 0 0 2px;
    color: var(--textoAgrupadoresCabecalho);
    font-size: 16px;
    font-family: 'Spartan', sans-serif;
    font-weight: bold;
}

    #header > div:nth-child(2),
    #header > div:nth-child(9),
    #header > div:last-child,
    .headerCompact.last {
        border-right-width: 2px;
    }

    .headerCompact.last {
        flex-flow: row;
    }


    #header > div:nth-child(4),
    #header > div:nth-child(5),
    #header > div:nth-child(6),
    #header > div:nth-child(7),
    #header > div:nth-child(8),
    #header > div:nth-child(9) {
        background-color: var(--backgroundCabecalhos);
    }

#header .header-lbl {
    color: var(--textoCabecalho);
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
}

#header .header-val {
    color: var(--textoValoresCabecalho);
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
}


#header > div:nth-child(3),
#header > div:nth-child(4),
#header > div:nth-child(5),
#header > div:nth-child(6),
#header > div:nth-child(7),
#header > div:nth-child(8),
#header > div:nth-child(9),
#header > div:last-child {
    border-bottom-width: 2px;
}

#header > div:last-child {
    border-left-width: 0;
}

#toolbar {
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
}

#downloads {
    display: flex;
    justify-content: space-evenly;
    width: 150px;
    align-items: center;
    font-size: 16px;
    font-family: 'Spartan', sans-serif;
    font-weight: 600;
}

    #downloads:before {
        content: '\e933';
        font-family: 'icomoon';
        font-size: 24px;
    }

#downloads {
    color: var(--textoDownloads);
}

.fundosCotacao a:link {
    text-decoration: none;
}

.fundosCotacao #downloads a:visited {
    color: var(--textoDownloads);
}

.fundosCotacao #downloads a:hover {
    color: var(--riscoFundo);
    font-weight: bold;
}

.fundosCotacao {
    padding-bottom: 50px;
}

.agregadorAgrupamento {
    margin-top: 10px;
}

.agrupamento {
    text-align: center;
    background-color: var(--agrupador);
    columns: var(--textoValoresCabecalho);
    padding: 8px;
    font-size: 16px;
    font-family: 'Spartan', sans-serif;
    font-weight: bold;
}

.detalhesFundo {
    display: grid;
    height: 70px;
    text-align: center;
    grid-template-columns: repeat(8, 1fr);
}

    .detalhesFundo > div,
    .detalhesFundo > a,
    .detalhesFundoCompact {
        padding: 8px;
        border: solid var(--agrupador);
        border-width: 0 0 2px 2px;
        color: var(--textoValoresFundo);
        font-size: 17px;
        font-family: 'Roboto', sans-serif;
    }

        .detalhesFundo > div:last-child,
        .detalhesFundoCompact.last {
            border-right-width: 2px;
        }

    .detalhesFundo .nomeFundo {
        background-color: var(--backgroundCabecalhos);
        color: var(--textoNomeFundo);
        font-size: 16px;
        font-family: 'Spartan', sans-serif;
        font-weight: bold;
    }

    .detalhesFundo .cotacaoDiaLbl,
    .detalhesFundo .rendibilidade1AnoLbl,
    .detalhesFundo .rendibilidade5AnosLbl,
    .detalhesFundo .riscoISRRLbl {
        display: none;
    }

    
@media (hover: hover) {

    .detalhesFundo:hover > div {
        background-color: var(--backgroundCabecalhos);
        color: var(--textoNomeFundo);
    }

    .detalhesFundo:hover .nomeFundo {
        background-color: var(--textoCabecalho);
        color: white;
    }
}

.subscreverFundoBtn {
    height: 32px;
    width: 100%;
    border: 1px solid var(--subscreverBtn);
    background-color: var(--subscreverBtn);
    color: white;
    border-radius: 4px;
    font-size: 16px;
    font-family: 'Spartan', sans-serif;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .subscreverFundoBtn:hover {
        background-color: var(--riscoFundo);
        color: var(--riscoBarra);
    }


.subscreverFundoLink {
    width: 100%;
}


.riscoEscala {
    height: 20px;
    width: 58px;
    display: flex;
    justify-content: space-evenly;
}

.riscoBarra {
    height: 100%;
    width: 6px;
    background-color: var(--riscoBarra);
}

    .riscoBarra.ativo {
        background-color: var(--riscoFundo);
    }



.nomeFundo,
.cotacaoDia,
.cotacaoDiaAnterior,
.rendibilidade1Ano,
.rendibildiade3Anos,
.rendibilidade5Anos,
.riscoISRR,
.subscreverFundo,
.riscoISRRLbl--risco,
.headerCompact,
.detalhesFundoCompact {
    display: flex;
    justify-content: center;
    align-items: center;
}

.headerCompact,
.detalhesFundoCompact {
    line-height: 20px;
}

#header > div,
.headerCompact {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

    #header > div:nth-child(2) {
        flex-flow: row;
    }


.riscoISRRLbl--risco {
    margin-left: 5px;
}

.riscoNumerico {
    margin-left: 5px;
    font-weight: 600;
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
}

.riscoNumericoEscala {
    color: var(--riscoBarra);
}


.riscoNumericoValor {
    color: var(--riscoFundo);
}

.tooltipIcon {
    display: inline-flex;
}

    .tooltipIcon:before {
        content: '\E957';
        font-family: 'icomoon';
        font-size: 16px;
        margin-left: 5px;
        color: var(--textoCabecalho);
    }

.tooltip {
    background-color: var(--backgroundCabecalhos);
    border: 1px solid var(--borderCabecalho);
}

.tooltipTitle,
.tooltipBody {
    font-size: 12px;
    font-family: 'Roboto', sans-serif;
}

.tooltipTitle {
    font-weight: bold;
}

#filtroFamilia {
    border-radius: 8px;
    border: 1px solid var(--textoNomeFundo);
    color: var(--textoNomeFundo);
    line-height: 23px;
    font-size: 15px;
    font-family: 'Spartan', sans-serif;
    font-weight: 600;
    height: 48px;
    background-color: white;
    padding: 8px;
}

option {
    min-height: 1.5rem !important;
    padding: 14px !important;
}

.hidden {
    display: none;
}

.fundosHeaderFixed {
    position: sticky;
    top: 59px;
}

.fundoCompact {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}



.tippy-box[data-theme~=light] {
    color: #26323d;
    box-shadow: 0 0 20px 4px rgba(154, 161, 177, .15), 0 4px 80px -8px rgba(36, 40, 47, .25), 0 4px 4px -2px rgba(91, 94, 105, .15);
    background-color: var(--backgroundCabecalhos);
    border: 1px solid var(--borderCabecalho);
}

    .tippy-box[data-theme~=light][data-placement^=top] > .tippy-arrow:before {
        border-top-color: var(--backgroundCabecalhos);
    }

    .tippy-box[data-theme~=light][data-placement^=bottom] > .tippy-arrow:before {
        border-bottom-color: var(--backgroundCabecalhos);
    }

    .tippy-box[data-theme~=light][data-placement^=left] > .tippy-arrow:before {
        border-left-color: var(--backgroundCabecalhos);
    }

    .tippy-box[data-theme~=light][data-placement^=right] > .tippy-arrow:before {
        border-right-color: var(--backgroundCabecalhos);
    }

    .tippy-box[data-theme~=light] > .tippy-backdrop {
        background-color: #fff;
    }

    .tippy-box[data-theme~=light] > .tippy-svg-arrow {
        fill: #fff;
    }

    .tippy-box[data-theme~=light][data-placement^=right] > .tippy-arrow {
        background-color: var(--backgroundCabecalhos);
    }






@media only screen and (max-width: 768px) {
    .wrapper {
        width: 90%;
    }


    .titleBackground {
        background-color: unset;
    }

    .headerBackground {
        display: none;
    }

    #toolbar select:nth-child(1) {
        width: 100%;
    }

    #toolbar div:nth-child(2) {
        display: none;
    }

    .agrupamento {
        text-align: left;
    }

    .detalhesFundo {
        grid-template-columns: 65% 35%;
        height: 226px;
    }

        .detalhesFundo .cotacaoDiaAnterior,
        .detalhesFundo .rendibildiade3Anos,
        .detalhesFundo .riscoISRR {
            display: none;
        }

        .detalhesFundo .cotacaoDiaLbl,
        .detalhesFundo .rendibilidade1AnoLbl,
        .detalhesFundo .rendibilidade5AnosLbl,
        .detalhesFundo .riscoISRRLbl {
            display: block;
        }

        .detalhesFundo .nomeFundo {
            grid-column: 1 / 3;
            border-width: 0;
            justify-content: left;
        }

        .detalhesFundo .riscoISRRLbl {
            grid-column: 1;
        }

        .detalhesFundo .riscoISRR {
            grid-column: 1;
        }


        .detalhesFundo .nomeFundo,
        .detalhesFundo .cotacaoDiaLbl,
        .detalhesFundo .rendibilidade1AnoLbl,
        .detalhesFundo .rendibilidade5AnosLbl,
        .detalhesFundo .riscoISRRLbl {
            text-align: left;
        }

        .detalhesFundo .riscoISRRLbl {
            display: flex;
            align-items: center;
        }

        .detalhesFundo .subscreverFundo {
            padding-left: 8px;
            padding-right: 8px;
        }

        .detalhesFundo .cotacaoDia,
        .detalhesFundo .rendibilidade1Ano,
        .detalhesFundo .rendibilidade5Anos {
            text-align: right;
        }

    #header > div {
        border: unset;
    }

    .detalhesFundo > div {
        border: unset;
        display: block;
    }

    .tooltipIcon:before {
        margin-left: unset;
    }


    /* Compact View */
    .fundoCompact {
        grid-template-columns: 1fr;
    }

        /*.headerCompact {
        border-width: 2px;
    }

    .detalhesFundoCompact*/
        .fundoCompact div:nth-child(1) {
            grid-row: 1;
        }

        .fundoCompact div:nth-child(2) {
            grid-row: 3;
        }

        .fundoCompact div:nth-child(3) {
            grid-row: 5;
        }

        .fundoCompact div:nth-child(4) {
            grid-row: 7;
        }

        .fundoCompact div:nth-child(5) {
            grid-row: 2;
        }

        .fundoCompact div:nth-child(6) {
            grid-row: 4;
        }

        .fundoCompact div:nth-child(7) {
            grid-row: 6;
        }

        .fundoCompact div:nth-child(8) {
            grid-row: 8;
        }

    .headerCompact,
    .detalhesFundoCompact {
        border-width: 2px 2px 0 2px;
        border-left-color: var(--borderCabecalho);
        border-right-color: var(--borderCabecalho);
        border-top-color: var(--borderCabecalho);
    }

        .detalhesFundoCompact.last {
            border-width: 2px 2px 2px 2px;
            border-bottom-color: var(--borderCabecalho);
        }
}