.card-back {
       
    position: absolute;
    transform: rotateY(180deg);
    z-index: 1;
    top: 0;
    left: 0;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    margin: .25rem  20% .25rem 0;
    
    list-style: none;
  }


.back_detail {

width: 100%;
height: 100%;
margin: 0.3rem 0.1rem;
padding: 0.3rem;


display: grid;
grid-template-columns: repeat(1, 100%);
grid-auto-flow: column;
gap: 30px;
overflow: scroll;
text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 2px;
box-sizing: border-box;




background-image: url('../../assets/images/logoOpaco2.png');
background-position: center;
background-repeat: no-repeat;
background-size: contain; 

}  



.stats {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    width: 100%;
    height: 100%;
    
    
    text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 2px;
    box-sizing: border-box;

    font-size: .70rem;
    
}

.stats h3 { 
    margin:0px 0px 1px 0px;
    padding:0; 
    text-align: center; 
    align-self: center; 
    justify-self: center; }

.list_stats {

    width: 95%;
    margin:2px;
    padding:0;

    display: grid;
    grid-template-rows: repeat(6, 1fr);
    grid-auto-flow: row;
    
    overflow: scroll;
    -webkit-overflow-scrolling: touch;

}


















.meterBar {

    width: 100%;
    height: 10px;
    align-self: center;
    justify-self: center;
}

 /* Estilizando a barra interna no Chrome e Edge */
 .meterBar::-webkit-meter-bar {
    background: #ffffff; /* Cor do fundo da barra */
    border-radius: 5px;
  }

  .meterBar::-webkit-meter-optimum-value {
    background: #00ff08; /* Cor da barra quando está em nível bom */
  }

  .meterBar::-webkit-meter-suboptimum-value {
    background: #ff9800; /* Cor da barra quando está em nível médio */
  }

  .meterBar::-webkit-meter-even-less-good-value {
    background: #ff1100; /* Cor da barra quando está em nível ruim */
  }

  
 /* Estilizando para o Firefox */
.meterBar::-moz-meter-bar {
    background: #ffffff; /* Cor do fundo da barra */
    border-radius: 5px;
  }
  
  .meterBar::-moz-meter-optimum-value {
    background: #00ff08; /* Cor da barra quando está em nível bom */
  }
  
  .meterBar::-moz-meter-suboptimum-value {
    background: #ff9800; /* Cor da barra quando está em nível médio */
  }
  
  .meterBar::-moz-meter-even-less-good-value {
    background: #ff1100; /* Cor da barra quando está em nível ruim */
  }