<div class="equipment-details-container" (window:resize)="onResize()" 
[ngClass]="{ equipment_details_container_row: screenWidth > 840, equipment_details_container_column: screenWidth <= 840 }">
  <div class="equipment-images-container animated fadeIn" *ngIf="equipmentImagesGalleryEnabled">
    <button mat-icon-button class="backward-button" [disabled]="images.length < 2" (click)="backward()">
      <mat-icon>chevron_left</mat-icon>
    </button>
    <button mat-icon-button class="forward-button" [disabled]="images.length < 2" (click)="forward()">
      <mat-icon>chevron_right</mat-icon>
    </button>
    <img *ngIf="images.length > 0" [src]="images[imageIndex]" [alt]="'IMG' + imageIndex">
    <div *ngIf="images.length < 1">
      <b>Sin imágenes.</b>
    </div>
  </div>
  <div class="equipment-images-container animated fadeIn" *ngIf="!equipmentImagesGalleryEnabled">
    <h3 class="m-16"><b>Su perfil no cuenta con los permisos necesarios para visualizar la información de esta sección.</b></h3>
  </div>
  <div class="equipment-details-column border_left" [ngClass]="{ border_left: screenWidth > 840 }">
    <div class="form-row animated fadeIn" *ngIf="!equipmentDetailsEnabled">
      <h3 class="m-16"><b>Su perfil no cuenta con los permisos necesarios para visualizar la información de esta sección.</b></h3>
    </div>
    <div class="form-row animated fadeIn" *ngIf="equipmentDetailsEnabled">
      <div class="form-cell C12 center_text border_bottom overflow-ellipsis obscure-text break_code" [matTooltip]="equipment!.CODIGO">
        {{ equipment!.CODIGO }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis obscure-text" [matTooltip]="equipment!.TIPO_EQUIPAMIENTO" 
      [ngClass]="{ C04: screenWidth > 1200, C06: screenWidth <= 1200 && screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 980 }">
        <span class="bold">Tipo: </span>{{ equipment!.TIPO_EQUIPAMIENTO }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis obscure-text" [matTooltip]="equipment!.MODELO" 
      [ngClass]="{ C04: screenWidth > 1200, C06: screenWidth <= 1200 && screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 1200 }">
        <span class="bold">Modelo: </span>{{ equipment!.MODELO }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis obscure-text" [matTooltip]="equipment!.ID_EQUIPAMIENTO" 
      [ngClass]="{ C04: screenWidth > 1200, C06: screenWidth <= 1200 && screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth <= 1200 && screenWidth > 980 }">
        <span class="bold">ID: </span>{{ equipment!.ID_EQUIPAMIENTO }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis obscure-text" [matTooltip]="equipment!.FAMILIA" 
      [ngClass]="{ C04: screenWidth > 1200, C06: screenWidth <= 1200 && screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 1200 }">
        <span class="bold">Familia: </span>{{ equipment!.FAMILIA }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis obscure-text" [matTooltip]="equipment!.SUBFAMILIA" 
      [ngClass]="{ C04: screenWidth > 1200, C06: screenWidth <= 1200 && screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 980 }">
        <span class="bold">Subfamilia: </span>{{ equipment!.SUBFAMILIA }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis obscure-text" [matTooltip]="equipment!.ESTADO" 
      [ngClass]="{ C04: screenWidth > 1200, C06: screenWidth <= 1200 && screenWidth > 980, C12: screenWidth <= 980 }">
        <span class="bold">Estado: </span>{{ equipment!.ESTADO }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis obscure-text" [matTooltip]="equipment!.JERARQUIA" 
      [ngClass]="{ C04: screenWidth > 1200, C12: screenWidth <= 1200, border_right: screenWidth > 1200 }">
        <span class="bold">Jerarquía: </span>{{ equipment!.JERARQUIA }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis obscure-text" [matTooltip]="equipment!.EQUIPO_PADRE == null ? '-' : equipment!.EQUIPO_PADRE" 
      [ngClass]="{ C08: screenWidth > 1200, C12: screenWidth <= 1200 }">
        <span class="bold">Equipo padre: </span>{{ equipment!.EQUIPO_PADRE == null ? '-' : equipment!.EQUIPO_PADRE }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis obscure-text" [matTooltip]="equipment!.TIPO_CODIGO" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 980 }">
        <span class="bold">Tipo de codificación: </span>{{ equipment!.TIPO_CODIGO }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis obscure-text" [matTooltip]="equipment!.UBICACION_ORIGEN" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 1540 }">
        <span class="bold">Ubicación de origen: </span>{{ equipment!.UBICACION_ORIGEN }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis obscure-text" [matTooltip]="equipment!.NIVEL_ORIGEN" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 980 }">
        <span class="bold">Nivel de origen: </span>{{ equipment!.NIVEL_ORIGEN }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis obscure-text" [matTooltip]="equipment!.OCUPACION_ORIGEN" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980 }">
        <span class="bold">Ocupación de origen: </span>{{ equipment!.OCUPACION_ORIGEN }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis obscure-text" [matTooltip]="equipment!.ELEMENTO_ORIGEN" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 980 }">
        <span class="bold">Elemento de origen: </span>{{ equipment!.ELEMENTO_ORIGEN }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis obscure-text" [matTooltip]="equipment!.INTERSECCION_PCC == null ? 'No aplica' : equipment!.INTERSECCION_PCC" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 1540 }">
        <span class="bold">Coordenadas de origen: </span>{{ equipment!.INTERSECCION_PCC == null ? 'No aplica' : equipment!.INTERSECCION_PCC }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis obscure-text" [matTooltip]="equipment!.INTERSECCION_PCC == null ? 'No aplica' : equipment!.INTERSECCION_PCC" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 980 }">
        <span class="bold">Intersección en PCC: </span>{{ equipment!.INTERSECCION_PCC == null ? 'No aplica' : equipment!.INTERSECCION_PCC }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis obscure-text" [matTooltip]="equipment!.POSICION_PCC == null ? 'No aplica' : equipment!.POSICION_PCC" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980 }">
        <span class="bold">Posición en PCC: </span>{{ equipment!.POSICION_PCC == null ? 'No aplica' : equipment!.POSICION_PCC }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis obscure-text" [matTooltip]="equipment!.KILOMETRO_ORIGEN == null ? 'No aplica' : '' + equipment!.KILOMETRO_ORIGEN + ''" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 980 }">
        <span class="bold">Kilómetro de origen: </span>{{ equipment!.KILOMETRO_ORIGEN == null ? 'No aplica' : equipment!.KILOMETRO_ORIGEN }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis obscure-text" [matTooltip]="equipment!.AREA_TREN == null ? 'No aplica' : equipment!.AREA_TREN" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 1540 }">
        <span class="bold">Área del tren: </span>{{ equipment!.AREA_TREN == null ? 'No aplica' : equipment!.AREA_TREN }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis obscure-text" [matTooltip]="equipment!.SECUENCIA_ELEMENTO_ORIGEN == null ? 'No aplica' : equipment!.SECUENCIA_ELEMENTO_ORIGEN" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 980 }">
        <span class="bold">Secuencia del elemento de origen: </span>{{ equipment!.SECUENCIA_ELEMENTO_ORIGEN == null ? 'No aplica' : equipment!.SECUENCIA_ELEMENTO_ORIGEN }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis obscure-text" [matTooltip]="equipment!.TIPO_CODIFICACION_ORIGEN == null ? 'No aplica' : equipment!.TIPO_CODIFICACION_ORIGEN" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980 }">
        <span class="bold">Tipo de codificación de origen: </span>{{ equipment!.TIPO_CODIFICACION_ORIGEN == null ? 'No aplica' : equipment!.TIPO_CODIFICACION_ORIGEN }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis obscure-text" [matTooltip]="equipment!.CODIGO_ELEMENTO_ORIGEN == null ? 'No aplica' : '' + equipment!.CODIGO_ELEMENTO_ORIGEN + ''" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 980 }">
        <span class="bold">Código del elemento de origen: </span>{{ equipment!.CODIGO_ELEMENTO_ORIGEN == null ? 'No aplica' : equipment!.CODIGO_ELEMENTO_ORIGEN }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis obscure-text" [matTooltip]="equipment!.UBICACION_DESTINO == null ? 'No aplica' : equipment!.UBICACION_DESTINO" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 1540 }">
        <span class="bold">Ubicación de destino: </span>{{ equipment!.UBICACION_DESTINO == null ? 'No aplica' : equipment!.UBICACION_DESTINO }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis obscure-text" [matTooltip]="equipment!.NIVEL_DESTINO == null ? 'No aplica' : equipment!.NIVEL_DESTINO" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 980 }">
        <span class="bold">Nivel de destino: </span>{{ equipment!.NIVEL_DESTINO == null ? 'No aplica' : equipment!.NIVEL_DESTINO }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis obscure-text" [matTooltip]="equipment!.OCUPACION_DESTINO == null ? 'No aplica' : equipment!.OCUPACION_DESTINO" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980 }">
        <span class="bold">Ocupación de destino: </span>{{ equipment!.OCUPACION_DESTINO == null ? 'No aplica' : equipment!.OCUPACION_DESTINO }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis obscure-text" [matTooltip]="equipment!.ELEMENTO_DESTINO == null ? 'No aplica' : equipment!.ELEMENTO_DESTINO" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 980 }">
        <span class="bold">Elemento de destino: </span>{{ equipment!.ELEMENTO_DESTINO == null ? 'No aplica' : equipment!.ELEMENTO_DESTINO }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis obscure-text" [matTooltip]="equipment!.KILOMETRO_DESTINO == null ? 'No aplica' : '' + equipment!.KILOMETRO_DESTINO + ''" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 1540 }">
        <span class="bold">Coordenadas de destino: </span>{{ equipment!.KILOMETRO_DESTINO == null ? 'No aplica' : equipment!.KILOMETRO_DESTINO }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis obscure-text" [matTooltip]="equipment!.KILOMETRO_DESTINO == null ? 'No aplica' : '' + equipment!.KILOMETRO_DESTINO + ''" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 980 }">
        <span class="bold">Kilómetro de destino: </span>{{ equipment!.KILOMETRO_DESTINO == null ? 'No aplica' : equipment!.KILOMETRO_DESTINO }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis obscure-text" [matTooltip]="equipment!.SECUENCIA_ELEMENTO_DESTINO == null ? 'No aplica' : equipment!.SECUENCIA_ELEMENTO_DESTINO" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980 }">
        <span class="bold">Secuencia del elemento de destino: </span>{{ equipment!.SECUENCIA_ELEMENTO_DESTINO == null ? 'No aplica' : equipment!.SECUENCIA_ELEMENTO_DESTINO }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis obscure-text" [matTooltip]="equipment!.TIPO_CODIFICACION_DESTINO == null ? 'No aplica' : equipment!.TIPO_CODIFICACION_DESTINO" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 980 }">
        <span class="bold">Tipo de codificación de destino: </span>{{ equipment!.TIPO_CODIFICACION_DESTINO == null ? 'No aplica' : equipment!.TIPO_CODIFICACION_DESTINO }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis obscure-text" [matTooltip]="equipment!.CODIGO_ELEMENTO_DESTINO == null ? 'No aplica' : equipment!.CODIGO_ELEMENTO_DESTINO" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 1540 }">
        <span class="bold">Código del elemento de destino: </span>{{ equipment!.CODIGO_ELEMENTO_DESTINO == null ? 'No aplica' : equipment!.CODIGO_ELEMENTO_DESTINO }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis obscure-text" [matTooltip]="equipment!.NIVEL_CRITICIDAD == null || equipment!.NIVEL_CRITICIDAD_OBJ == undefined ? 'No configurado' : equipment!.NIVEL_CRITICIDAD_OBJ.label" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 980 }">
        <span class="bold">Nivel de criticidad de seguridad: </span><span *ngIf="equipment!.NIVEL_CRITICIDAD != null && equipment!.NIVEL_CRITICIDAD_OBJ != undefined" style="font-weight: 500;" [style.color]="equipment!.NIVEL_CRITICIDAD_OBJ.color">
          {{ equipment!.NIVEL_CRITICIDAD_OBJ.label }}
        </span><span *ngIf="equipment!.NIVEL_CRITICIDAD == null || equipment!.NIVEL_CRITICIDAD_OBJ == undefined">No configurado</span>
      </div>
      <div class="form-cell border_bottom overflow-ellipsis obscure-text" [matTooltip]="equipment!.FECHA_ADQUISICION" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980 }">
        <span class="bold">Fecha de adquisición: </span>{{ equipment!.FECHA_ADQUISICION }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis obscure-text" [matTooltip]="equipment!.FECHA_INICIO_GARANTIA" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 980 }">
        <span class="bold">Fecha de inicio de la garantía: </span>{{ equipment!.FECHA_INICIO_GARANTIA }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis obscure-text" [matTooltip]="equipment!.FECHA_TERMINO_GARANTIA" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 1540 }">
        <span class="bold">Fecha de término de la garantía: </span>{{ equipment!.FECHA_TERMINO_GARANTIA }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis obscure-text" [matTooltip]="equipment!.PROVEEDOR" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 980 }">
        <span class="bold">Proveedor: </span>{{ equipment!.PROVEEDOR }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis obscure-text" [matTooltip]="equipment!.ESTADO_FUNCIONAMIENTO" 
      [ngClass]="{ C03: screenWidth > 1540, C06: screenWidth <= 1540 && screenWidth > 980, C12: screenWidth <= 980 }">
        <span class="bold">Estado de funcionamiento: </span>{{ equipment!.ESTADO_FUNCIONAMIENTO }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis obscure-text" [matTooltip]="equipment!.DENOMINACION_SOFTWARE == null ? 'No aplica' : equipment!.DENOMINACION_SOFTWARE" 
      [ngClass]="{ C06: screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 980 }">
        <span class="bold">Software requerido: </span>{{ equipment!.DENOMINACION_SOFTWARE == null ? 'No aplica' : equipment!.DENOMINACION_SOFTWARE }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis obscure-text" [matTooltip]="equipment!.VERSION_SOFTWARE == null ? 'No aplica' : equipment!.VERSION_SOFTWARE" 
      [ngClass]="{ C06: screenWidth > 980, C12: screenWidth <= 980 }">
        <span class="bold">Versión del software: </span>{{ equipment!.VERSION_SOFTWARE == null ? 'No aplica' : equipment!.VERSION_SOFTWARE }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis obscure-text" [matTooltip]="equipment!.USUARIO_REGISTRO" 
      [ngClass]="{ C06: screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 980 }">
        <span class="bold">Usuario que registró: </span>{{ equipment!.USUARIO_REGISTRO }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis obscure-text" [matTooltip]="equipment!.FECHA_REGISTRO" 
      [ngClass]="{ C06: screenWidth > 980, C12: screenWidth <= 980 }">
        <span class="bold">Fecha de registro: </span>{{ equipment!.FECHA_REGISTRO }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis obscure-text" [matTooltip]="equipment!.USUARIO_MODIFICACION == null ? '-' : equipment!.USUARIO_MODIFICACION" 
      [ngClass]="{ C06: screenWidth > 980, C12: screenWidth <= 980, border_right: screenWidth > 980 }">
        <span class="bold">Usuario que modificó: </span>{{ equipment!.USUARIO_MODIFICACION == null ? '-' : equipment!.USUARIO_MODIFICACION }}
      </div>
      <div class="form-cell border_bottom overflow-ellipsis obscure-text" [matTooltip]="equipment!.FECHA_MODIFICACION == null ? '-' : equipment!.FECHA_MODIFICACION" 
      [ngClass]="{ C06: screenWidth > 980, C12: screenWidth <= 980 }">
        <span class="bold">Fecha última modificación: </span>{{ equipment!.FECHA_MODIFICACION == null ? '-' : equipment!.FECHA_MODIFICACION }}
      </div>
      <div class="form-cell C12 center_text">
        <button mat-mini-fab class="override_no_shadow white_font pink_primary_background mr-10" color="primary" matTooltip="Historial de códigos" 
        (click)="openCodesHistory()">
          <mat-icon>history</mat-icon>
        </button>
        <button mat-mini-fab class="override_no_shadow mr-10 white_font pink_primary_background" color="primary" matTooltip="Documentos relacionados" (click)="openDocumentsList()" 
        [disabled]="!relatedDocumentsTableEnabled">
          <mat-icon>description</mat-icon>
        </button>
        <button mat-mini-fab class="override_no_shadow white_font blue_send_background mr-10" matTooltip="Administrar planes de mantenimiento" 
        (click)="openMaintenancePlans()">
          <mat-icon>menu_book</mat-icon>
        </button>
        <button mat-mini-fab class="override_no_shadow white_font orange_primary_background mr-10" matTooltip="Gestionar criticidad de seguridad" 
        (click)="openCriticalityManagement()" [disabled]="!securityCriticalityEnabled">
          <mat-icon>report</mat-icon>
        </button>
        <button mat-mini-fab class="override_no_shadow mr-10 green_primary_background white_font" color="warn" matTooltip="Exportar a PDF" (click)="exportEquipmentDetails('PDF')">
          <mat-icon>picture_as_pdf</mat-icon>
        </button>
        <button mat-mini-fab class="override_no_shadow white_font green_primary_background mr-10" matTooltip="Exportar a Excel" 
        (click)="exportEquipmentDetails('XLS')">
          <mat-icon svgIcon="xls"></mat-icon>
        </button>
      </div>
    </div>
  </div>
</div>