.file-select {
    position: relative;
    display: inline-block;
    content: 'Foto seleccionada'; /* texto por defecto */
    width: 100%;
  }
  
  .file-select::before {
    background-color: #5678EF;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    height: 80px;
    content: attr(texto); /* texto por defecto */
    position: absolute;
    margin-bottom: 5px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;

  }

  .file-select-CROQUIS {
    position: relative;
    display: inline-block;
    content: 'Croquis seleccionado'; /* texto por defecto */
    width: 100%;
  }

  .file-select-MANUAL {
    position: relative;
    display: inline-block;
    content: 'Parte Manual Cargado'; /* texto por defecto */
    width: 100%;
  }

  .file-select-ANOMALIAS {
    position: relative;
    display: inline-block;
    content: 'Foto de anomalía Cargada'; /* texto por defecto */
    width: 50px;
    font-size: 8px;
  }
  
  .file-select-CROQUIS::before {
    background-color: green;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    height: 60px;
    content: attr(texto); /* texto por defecto */
    position: absolute;
    margin-bottom: 5px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
  

  }

  .file-select-MANUAL::before {
    background-color: green;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    height: 30px;
    content: attr(texto); /* texto por defecto */
    position: absolute;
    /* margin-bottom: 5px; */
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    font-size: 12px;
    text-align:center;

  }

  .file-select-ANOMALIAS::before {
    background-color: red;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    height: 30px;
    content: attr(texto); /* texto por defecto */
    position: absolute;
    margin-bottom: 5px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    /* width: 100%; */
    font-size: 20px;
    text-align:center;

  }
  
  .file-select input[type="file"] {
    opacity: 0;
    width: 100%;
    height: 85px;
    display: inline-block;
    content: 'foto recibida'; /* texto por defecto */
  }

  .file-select-CROQUIS input[type="file"] {
    opacity: 0;
    width: 100%;
    height: 85px;
    display: inline-block;
    content: 'foto recibida'; /* texto por defecto */
  }

  .file-select-MANUAL input[type="file"] {
    opacity: 0;
    width: 100%;
    height: 85px;
    display: inline-block;
    content: 'foto recibida'; /* texto por defecto */
  }

  .file-select-ANOMALIAS input[type="file"] {
    opacity: 0;
    font-size: 8px;
    display: inline-block;
    content: 'foto recibida'; /* texto por defecto */
  }


  #aviso{
    width: 100%; 
    height: 100%; 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    opacity: 0.6;
    background:#000; 
    z-index: 10000;
 }
 
 #mensaje{
     display: block;
     top: 10%; 
     left: 30%;
     margin-left: -20%;
     width: 80%;
     max-height: 90%;
     font-size: 20px;
     padding: 12px; 
     position: fixed;
     border-radius: 3px;
     text-align: center;
     background-color: #E5E5F7;
     opacity: 0.9;
     scroll-behavior: auto;
     z-index: 10001;
 }