.panel-selector-letra {
  display: flex;
  height: auto;
  width: 100%;
  margin-top: 20px;
  align-items: center;
  justify-content: center;
}

@media screen and (min-width: 768px) {

  .panel-selector-letra {
    background-color: var(--colorBackgroundPanelSelectorLetra);
    margin-top: 0;
  }
}

.contenedor-panel-selector-letra {
  width: 100%;
  padding: 20px 30px 20px 30px;
}

@media screen and (min-width: 768px) {

  .xcontenedor-panel-selector-letra {
    padding: 20px 30px 20px 30px;
  }
}

@media screen and (min-width: 996px) {

  .contenedor-panel-selector-letra {
    padding: 40px 30px 40px 30px;
  }
}

.grid-contenedor-panel-selector-letra {
  width: 100%;
  justify-content: center;
}

.box-letras {
  height: 40px;
  width: 40px;
  line-height: 40px;
  font-size: var(--letra16);
  font-weight: 600;
  border: 1px solid var(--colorBordeLetrasAbecedario);
  border-radius: 4px;
  color: var(--colorTextoLetrasAbecedario);
  background-color: var(--colorBackgroundLetrasAbecedario);
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}

@media screen and (min-width: 992px) {

  .box-letras {
    height: 50px;
    width: 50px; /* Este valor depende de grid-contenedor-panel-selector-letra en orden_alfabetico_grid.css */
                 /* repeat(auto-fill, 50px);                                                                */
    line-height: 50px;
    font-size: var(--letra18);
  }
}

.box-letras:hover {
  border: 1px solid var(--colorBordeLetrasAbecedarioHover);
  color: var(--colorTextoLetrasAbecedarioHover);
  background-color: var(--colorBackgroundLetrasAbecedarioHover);
  -webkit-transition: background-color 0.4s;
  transition: background-color 0.4s;
}

.panel-empresas-letra {
  height: auto;
  width: 100%;
}

@media screen and (min-width: 768px) { /* Hasta 20210609 768px, se cambió por la extensión de las migas de actividades */

  .panel-empresas-letra {
    border: 1px solid var(--colorGrisBordes);
    border-radius: 4px;
  }
}

.panel-materias-letra {
  height: auto;
  width: 100%;
}

@media screen and (min-width: 768px) {

  .panel-materias-letra {
    border: 1px solid var(--colorGrisBordes);
    border-radius: 4px;
  }
}

.titulo-letra {
  height: 62px;
  width: auto;
  border: 1px solid var(--colorBordeLetrasAbecedarioHover);
  border-radius: 4px;
  background-color: var(--colorBackgroundLetrasAbecedarioDesplegadas);
  margin: 20px 20px 0 20px;
}

@media screen and (min-width: 768px) { /* Hasta 20210609 768px, se cambió por la extensión de las migas de actividades */
  .titulo-letra {
    margin: 20px 30px 0 30px;
  }
}

@media screen and (min-width: 992px) {
  .titulo-letra {
    height: 82px;
  }
}

.titulo-letra img {
  width: 20px;
  height: 20px;
}

.contenedor-titulo-letra {
  display: flex;
  height: 100%;
  width: 100%; /*can be in percentage also.*/
  align-items: center;
  justify-content: center;
}

.texto-titulo-letra {
  color: var(--colorTextoTituloLetra);
  font-size: var(--letra18);
  font-weight: 600;
  letter-spacing: 0.4px;
  margin-left: 10px;
}

@media screen and (min-width: 992px) {
  .texto-titulo-letra {
    font-size: var(--letra20);
  }
}

#texto-titulo-letra {
  margin: 0px;
  padding: 0px 0px 0px 0px;
}

.panel-lista-empresas {
  margin: 20px 20px 30px 20px;
}

@media screen and (min-width: 768px) { /* Hasta 20210609 768px, se cambió por la extensión de las migas de actividades */

  .panel-lista-empresas {
    margin: 20px 30px 30px 30px;
  }
}

.contenedor-panel-lista-empresas,
.contenedor-panel-lista-materias {

}

.grid-contenedor-panel-lista-empresas,
.grid-contenedor-panel-lista-materias {

}

.id-empresa {
  display: flex;
  margin: 20px 0 20px 0;
  align-items: center;
  color: var(--colorTextoIdEmpresa);
  font-size: var(--letra18);
  font-weight: 600;
}

@media screen and (min-width: 768px) {

  .id-empresa {
    font-size: var(--letra20);
  }
}