body{
    margin:0;
    padding:0;
    font-family:arial;
    background-color:#eee;
}
header{
    width:94%;
    height:8vh;
 
    margin:auto;
    margin-top:15px;
    margin-bottom:5px;
    display:flex;
    justify-content: space-between;
    align-items: center;
}
nav{
    width:15%;
    height:100%;
    display:flex;
    align-items: center;
    justify-content: center;

}
nav > img{
    width:35px;
    height:35px;
}
.logo{
    width:50%;
    height:100%;
    display:flex;
    justify-content: center;
    align-items: center;
 

}
.logo > img{
    width:125px;
    height:auto;
}
.alerta{
    width:15%;
    height:100%;
    display:flex;
    justify-content: center;
    align-items: center;
}

.alerta > img{
    width:25px;
    height:auto;
}
.configuracoes{
    width:94%;
    height:310px;
    background-color:#fff;
    margin:0px auto;
    display:flex;
    justify-content: space-between;
}
.textoSaldo, .informacoesTaxa{
    width:100%;
    height:45px;
    display:flex;
    align-items: center;
    justify-content: center;
    font-family:arial;
    font-size:0.75em;
    color:#666;
    
}
.saldo{
    width:100%;
    height:50px;
    display:flex;
    align-items: center;
    justify-content: center;
}
.saldo > input{
    width:200px;
    height:90%;
    border:0;
    outline: 0;
    background:none;
    font-size:2em;
    font-weight: 700;
    text-align:center;
}
.informacoesTaxa{
    width:100%;
    height:30px;
    margin-top:10px;
}
.taxas{
    width:100%;
    height:75px;
    display:flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top:5px;
}
.precoMarket{
    width:200px;
    height:25px;
    font-size:0.85em;
    display:flex;
    justify-content: center;
    align-items: center;
}

.precoPersonalizado{
    width:200px;
    height:25px;
    font-size:0.85em;
    display:flex;
    justify-content: center;
    align-items: center;
}
.precoPersonalizado > input{
    width:30px;
    height:auto;
    border:0;
    outline:0;
    background:none;
}
.precoMarket > b, .precoPersonalizado > b{
    margin-right:5px;
}
.botao{
    width:100%;
    height:30px;
    display:flex;
    justify-content: center;
    align-items: center;
    margin-top:40px;
}
.atualizaSaldo{
    width:75%;
    height:40px;
    background-color:lightseagreen;
    bordeR:0;
    font-size:1em;
    color:#fff;
}
.circle_tempo{
    width:35px;
    height:35px;
    border-radius:100% 100%;
    background-color:#ddd;
    border:1px solid tomato;
    position:absolute;
    z-index:999;
    bottom:240px;
    right:25px;
    display:flex;
    justify-content: center;
    align-items: center;
    color:tomato;

}





/* card
aberto: 150px;
fechado: 40px;

*/
.destaques{
    width:94%;
    height:20px;
    padding-left:5px;
    padding-top:15px;
    padding-bottom:15px;
    margin:2px auto;
    font-weight: normal;
    text-align:center;
}
.card{
    width:94%;
    height:40px;
    background-color:#fff;
    margin:2px auto;
}
.f_rows{
    width:96%;
    height:40px;
    margin:0 auto;
    display:flex;
    justify-content: space-between;
    border-bottom:1px solid #eee;


}
.imagem_ativo{
    width:10%;
    height:100%;
    display:flex;
    align-items: center;

}
.imagem_ativo > img{
    width:22px;
    height:auto;
}
.titulo_ativo{
    width:65%;
    height:100%;
    display:flex;
    align-items: center;
    font-family:arial;
    color:#222;
    
}
.Botao_alerta{
    width:25%;
    height:100%;
    display:flex;
    justify-content: flex-end;
    align-items: center;

}
.Botao_alerta > img{
    width:50px;
    height:auto;

}
.s_rows{
    width:100%;
    height:50px;
    /*background-color:blue;*/
    display:flex;
    justify-content: center;
    align-items: center;
}
.reais{
    width:20%;
    height:90%;
    /*background-color:yellow;*/
    display:flex;
    justify-content: center;
    align-items: center;
    color:#666

}
.valor{
    width:60%;
    height:100%;
    /*background-color:green;*/
    display:flex;
    justify-content: flex-start;
    align-items: center;
    font-size:2em;
    font-weight: bolder;
    margin-left:50px;
    padding-top:15px;

}
.t_rows{
    width:96%;
    height:40px;
    margin:0 auto;
    display:flex;
    justify-content: space-between;
    align-items: center;
    margin-top:10px;

}
.min_valor_Ativo, .max_valor_Ativo, .variation{
    width:22%;
    height:100%;
    font-size:0.70em;
    display:flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    
}
.titulo_min, .titulo_max, .titulo_variacao{
    font-size:0.85em;
    margin-bottom:5px;
    display:flex;
    justify-content: center;
    align-items: center;
}

.menorPreco, .variacao_value{
    font-size:1.5em;
    font-weight: bold;
    color:#222;
    display:flex;
    justify-content: center;
    align-items: center;
    
}
.maiorPreco{
    font-size:1.5em;
    font-weight: bold;
    color:#222;
    display:flex;
    justify-content: center;
    align-items: center;
}

.espacamento{
    width:100%;
    height:50px;
}