.box{
  padding: 0!important;
}
h1.action.white{
  color: white;
}
table{
  display:flex;
  flex-direction: column;
  width: 100%;
  border-collapse: collapse;
  /* animation: 1s ease-out 0s 1 accordion; */
}
.box{
  flex-shrink: 1;
  overflow-x: auto;
  max-width: 1120px !important;
}
table.historyTable.hidden{
  display: none;
}

/* Este fue un intento de que la altura cambiara de forma gradual */
/* @keyframes accordion {
  0% {
    min-height: 572px;
  }
  100% {
    min-height:143px;
  }
} */

thead *{
  color: var(--purple-font);
  text-transform: uppercase;
  font-family: nexaBlack;
  letter-spacing:0.1em;
  font-size: 1.5vw;
  font-weight: 900;
}

tbody{
  font-size: 1.2vw;
}

tr {
  display: flex;
  flex-direction: row;
}

thead ,tbody {
  border-bottom: 1px solid var(--grid-table-color);
}

th, td {
  display: flex;
  height:  4.375em;
}

th {
  display: flex;
  align-items: center;
  justify-content: center;
}

.info-link {
  height: 1rem;
  text-decoration: none;
  cursor: pointer;
  margin-left: 0.3rem;
  margin-bottom: -0.1rem;
}

td {
  padding: 0 3% 0 3%;
  display: flex;
  align-items: center;
  justify-content: center;
}

td.experiment, td.operador {
  text-transform: uppercase;
  justify-content: left!important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

th.experiment, td.experiment{
  /* display: flex; */
  width: 30%;
  border-right: 1px solid var(--grid-table-color);

}
th.operador, td.operador{
  /* display: flex; */
  width: 20%;
  border-right: 1px solid var(--grid-table-color);
  
}
th.date, td.date{
  width: 18%;
  border-right: 1px solid var(--grid-table-color);
}
th.time, td.time{
  width: 12%;
  border-right: 1px solid var(--grid-table-color);
}
th.download, td.download{
  width: 20%;
  /* display: flex; */
  gap: 20px;
}

.downloadIcon{
  height: 30px;
  user-select: none;
}

.pagination{
  height: 8vh;
  display: flex;
  flex-direction: row;
  justify-content: end;
  width: 100%;
  padding-right: 5%;
  align-items: center;
  gap: 0.8em;
  
}

li.page-item.disabled{
  visibility: hidden;
}

li.page-item {
  list-style-type: none; 
  cursor: pointer;
  color: #6d6788;
  user-select: none;
  font-size: 1.2vw;
}

li a.number {
  display: flex;
  width: 32px;
  align-items: center;
  justify-content: center;
}

li.page-item.active *{
  color: black;
}
#anterior{
  height: 13px;
  width: 6px;
  background-image: url('../../img/historic/prev_arrow.svg');
}
#siguiente{
  height: 13px;
  width: 6px;
  transform: scaleX(-1);
  background-image: url('../../img/historic/prev_arrow.svg');
}

#primero{
  height: 13px;
  width: 14px;
  background-image: url('../../img/historic/first_arrow.svg');
  cursor: pointer;
}
#ultimo{
  height: 13px;
  width: 14px;
  background-image: url('../../img/historic/first_arrow.svg');
  transform: scaleX(-1);
  cursor: pointer;
}

#primero:hover{
  background-image: url('../../img/historic/first_arrow_hover.svg');
}
#ultimo:hover{
  background-image: url('../../img/historic/first_arrow_hover.svg');
}

#anterior:hover{
  background-image: url('../../img/historic/prev_arrow_hover.svg');
}

#siguiente:hover{
  background-image: url('../../img/historic/prev_arrow_hover.svg');
}

.page-ends{
  visibility: visible;
  margin-right: 1vw;
  margin-left: 1vw;
}
.page-ends.disabled{
  visibility: hidden;
}
/* Quizás más adelante debería agregar esto al main */
.mainContent {
  height: min-content;
  width: min-content;
  overflow-y: hidden;
}

.hidden {
  display: none!important;
}


.iconContent{
  height: 20px !important;
  width: 22px !important;
}
/* @media all and (max-width: 1140px) {

  table {
    width: 850px;
  }

} */

.filterContainer{
  display:none;
}

summary.filtersummary {
  list-style: none; /* Oculta el marcador predeterminado */
  position: relative;
}

summary.filtersummary::after {
  content: "Abrir filtros";
  position: absolute;
  top: 0;
  left: 0;
  width: 203px;
  height: 36px;
  background: linear-gradient(180deg, #8A33FF 0%, rgba(138, 51, 255, 0) 394.23%);
  border-radius: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 700;
  font-size: 12px;
  line-height: 15px;
  z-index: 1;
}

#container{
  width: 97%;
  flex-shrink: 1;
}
#container[open] #summarydiv{
  display:none;
}
#container[open] summary.filtersummary::after{
  content: "Cerrar filtros";
  background: linear-gradient(180deg, #1F1D28 0%, rgba(138, 51, 255, 0) 394.23%);
}
#summarydiv{
  display:none;
  margin-bottom: 10px;
  width: 203px;
  height: 36px;
}

#container[open] .filterbox{
  margin-top: 40px;
  display: flex;
  align-items: center;
}


@media all and (max-width: 500px){
  .pagination{
    gap: 1px;
  }
  .boxDays{
    width: 80%;
  }
  .box{
    flex-grow: 0.8;
    height: 100%;
    overflow: visible;
    overflow-wrap: break-word;
  }
  .info-link {
    height: 0.4rem;
  }

  #primero, #ultimo,#siguiente, #anterior{
    scale: 0.5;
  }
  .historytable{
    border-radius: 10px !important;
  }
  .pagination{
    height: auto;
  }
}

@media all and (min-width: 1500px){
  tbody{
    font-size: 16px;
  }
  td.download{
    font-size: 16px;
  }
  li a.number{
    font-size: 16px !important;
  }
  .pagination{
    gap: 10px;
  }
  .boxDays{
    width: 100%;
  }
  th{
    font-size: 20px;
  }
}

.contenedorFiltro{
  display: flex;
  align-items: center;
}