table {
      width: 100%;
      border-collapse: collapse;
      margin: 0;
      background-color: var(--basic-card);
      box-shadow: 0 0 10px rgba(0, 0 , 0, 0.1);
      overflow: hidden;
}

th, td {
      padding: 2%;
      text-align: left;
      border-bottom: 1px solid #ddd;
}

th {
      background-color: var(--table-head);
      color: #fff;
}

td {
      width: 20%;
}

tr:hover {
      background-color: #dce6f9;
}

.table-row:hover {
      background-color: var(--table-highlight);
      cursor: pointer;
}

.table-row .table-link {
      color: inherit;
      text-decoration: none;
}


.scrollable-table {
      max-height: 50vh;
      overflow-y: scroll;
}

.end-table-scroll {
      margin-bottom: 5em;
}

.crud-icon {
      cursor: pointer;
      padding: 3%;
      border-radius: 3%;

}

.crud-icon:hover {
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.topo-table-wrapper {
      background-color: var(--topo-table-bg);
      padding: 1%;
      border-radius: 10px;
}


.pagination {
      display: inline-block;
      background-color: var(--basic-card);
      align-self: center;
      overflow-y: auto;
}

.pagination a {
      color: black;
      cursor: pointer;
      float: left;
      padding: 8px 16px;
      text-decoration: none;
}

.pagination a.active {
      background-color: #4CAF50;
      color: white;
      border-radius: 5px;
}

.pagination a:hover:not(.active) {
      background-color: var(--table-highlight);
      border-radius: 5px;
}