<div class="VisualizarR" [ngClass]="{DivMateria1: auxMateria.length == 1, DivMateria2: auxMateria.length == 2}">
    <div style="width: 100%; display: flex; justify-content: end; margin-top: 10px;">
        <button style="background-color: white; border: none; cursor: pointer;" mat-dialog-close><mat-icon>close</mat-icon></button>
    </div>
    <div class="TMateria" [ngClass]="{TMateria1: auxMateria.length > 2}">
        <span class="tituloEditar"> Relaciones</span>
    </div>
    <div class="divContainerMateria" style="height: 25%;"  [ngClass]="{DivMateria1F: auxMateria.length == 1, DivMateria2F: auxMateria.length == 2, divContainerMateria1: auxMateria.length >2}">
          <div class="FMateria" [ngClass]="{FMateria1: auxMateria.length > 2}"  *ngFor="let materias of auxMateria">
            <div class="FolderMateria" [ngClass]="{FolderMateria1: auxMateria.length >2}">
              <div class="folder">{{materias.grupos.join(',  ')}}</div>
              <div class="folder2"[style.background-color]="materias.color">{{materias.materia}}</div>
            </div>
          </div>
    </div>
    <div class="btnCerrarMateria" [ngClass]="{btnCerrarRes: auxMateria.length > 1, btnCerrarRes1: auxMateria.length > 2}">
        <button mat-button style="background-color: red; color: white; cursor: pointer;" mat-dialog-close>Cerrar</button>
    </div>
</div>