.div-centralizada {
  max-width: 500px;
  margin: 0 auto;
}

.iti__flag {background-image: url("../img/flags.png");}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .iti__flag {background-image: url("../img/flags@2x.png");}
  }


.classic-header {
    padding: 5px 5px 5px 0px;
    background-color: lightyellow;
    font-weight: bold;

}

.classic-foto {

  max-height: 40px;
  border-radius: 50%;
}

.avatar {
    /* Tamanho do avatar */
    width: 40px;
    height: 40px;
    
    /* Fundo e texto */
    background-color: #099bdd; /* Cor de fundo personalizável */
    color: white;
    
    /* Formato circular */
    border-radius: 50%;
    
    /* Centralização das iniciais */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Estilo do texto */
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
}


.circle-char{
width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #adb8ef;
    color: #ffffff;
    line-height: 1;
    user-select: none;
}

.ret-1 {
  display: inline-block;
  padding: 4px;
  border-radius: 4px;       /* arredondamento */
  background: rgb(67, 124, 148);      /* cor de fundo */
  color: #ffffff;           /* cor do texto */

  /*font-size: 13px;
  font-weight: 600;
  line-height: 1.2;*/
  white-space: nowrap;
}

.ret-2 {
  display: inline-block;
  padding: 4px;

  border-radius: 4px;       /* arredondamento */
  background: #ebe125;      /* cor de fundo */
  color: #ffffff;           /* cor do texto */
  /*font-size: 13px;
  font-weight: 600;
  line-height: 1.2;*/
  white-space: nowrap;
}

.ret-3 {
  display: inline-block;
  padding: 4px;

  border-radius: 4px;       /* arredondamento */
  background: #25bdeb;      /* cor de fundo */
  color: #ffffff;           /* cor do texto */

  /*font-size: 13px;
  font-weight: 600;
  line-height: 1.2;*/
  white-space: nowrap;
}