/* =========================================================
   CONTENEDOR GENERAL
========================================================= */

.procedimientos{
  display:flex;
  gap:40px;
  padding:35px;
  background:#f2f2f2;
  border-radius:15px;
  border:1px solid #dcdcdc;
  align-items:flex-start;
  position:relative;
}


/* contextual drupal */

.procedimientos > .contextual{
  position:absolute;
  top:0;
  right:0;
}


/* =========================================================
   PANEL IZQUIERDO
========================================================= */

.procedimientos .view-filters{
  width:330px;
  min-width:330px;
  flex-shrink:0;
}


/* LABELS */

.procedimientos .view-filters label{
  font-weight:700;
  display:block;
  margin-bottom:8px;
  font-size:16px;
  color:#1f1f1f;
}


/* SELECTS */

.procedimientos .view-filters select{
  width:100%;
  height:52px;
  padding:0 20px;
  border-radius:30px;
  border:2px solid #2e5bd7;
  background:#f7f7f7;
  font-size:14px;
  margin-bottom:25px;
  outline:none;
  appearance:none;
}


/* OCULTAR BOTON */

.procedimientos .form-actions{
  display:none;
}



/* =========================================================
   PANEL DERECHO
========================================================= */

.procedimientos .view-content{
  flex:1;
  border:2px solid #2e5bd7;
  border-radius:25px;
  padding:30px 40px;
  background:#f7f7f7;
  min-width:0;
}



/* =========================================================
   TABLA
========================================================= */

.procedimientos table{
  width:100%;
  border:none !important;
  margin:0 !important;
  background:transparent !important;
}


/* quitar bootstrap */

.procedimientos table.table-striped tbody tr:nth-of-type(odd){
  background:transparent !important;
}

.procedimientos table.table{
  --bs-table-bg:transparent;
  --bs-table-striped-bg:transparent;
}


/* TITULO */

.procedimientos thead th{
  font-size:28px;
  text-align:center;
  font-weight:700;
  padding-bottom:20px;
  border:none !important;
  color:#3c4655;
}


/* =========================================================
   SCROLL
========================================================= */

.procedimientos tbody{
  display:block;
  width:100%;
  max-height:260px;
  overflow-y:auto;
  padding-right:10px;
}


.procedimientos thead,
.procedimientos tbody tr{
  display:table;
  width:100%;
  table-layout:fixed;
}


/* CELDAS */

.procedimientos td{
  border:none !important;
  padding:0 0 18px 0 !important;
}


/* =========================================================
   ITEMS
========================================================= */

.procedimiento-item{
  background:#d3d3d3;
  border-radius:40px;
  padding:18px 30px;
  text-align:center;
  transition:.2s;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}


/* LINKS */

.procedimiento-item a{
  text-decoration:none;
  color:#2c2c2c;
  font-weight:500;
  display:block;

  overflow:hidden;
  text-overflow:ellipsis;
}


/* HOVER */

.procedimiento-item:hover{
  background:#c8c8c8;
}


/* =========================================================
   SCROLLBAR
========================================================= */

.procedimientos tbody::-webkit-scrollbar{
  width:8px;
}

.procedimientos tbody::-webkit-scrollbar-track{
  background:#ececec;
  border-radius:20px;
}

.procedimientos tbody::-webkit-scrollbar-thumb{
  background:#999;
  border-radius:20px;
}



/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px){

  .procedimientos{
    flex-direction:column;
  }

  .procedimientos .view-filters{
    width:100%;
    min-width:100%;
  }

  .procedimientos .view-content{
    width:100%;
    padding:25px;
  }

}


@media (max-width: 576px){

  .procedimientos{
    padding:20px;
    gap:25px;
  }

  .procedimientos .view-content{
    padding:20px;
  }

  .procedimientos thead th{
    font-size:22px;
  }

  .procedimiento-item{
    padding:15px 20px;
  }

}