.container {
  .action-button {
    margin-left: auto;
  }

  .search-button {
    min-width: 30px;
    margin: 4px;
  }

  .search-box {
    min-width: 320px;
  }

  .filter-box {
    min-width: 280px;
  }
}

table {
  tr.select-row:hover {
    cursor: pointer;
  }

  tr:nth-child(odd).td {
    color: black;
  }
}

$bar: 150px;
$foo: $bar * 8;
$color: #e2e4ec;

.sidenav {
  overflow-x: hidden;
}

@keyframes move {
  0% {
    left: 0;
  }

  16.7% {
    left: 0;
  }

  33.3% {
    left: calc($foo / 2);
  }

  50% {
    left: $foo - $bar;
  }

  66.7% {
    left: calc($foo / 2);
  }

  83.3% {
    left: 0;
  }

  100% {
    left: 0;
  }
}

@keyframes grow {
  0% {
    width: $bar;
  }

  16.7% {
    width: calc($foo / 2);
  }

  33.3% {
    width: calc($foo / 2);
  }

  50% {
    width: $bar;
  }

  66.7% {
    width: calc($foo / 2);
  }

  83.3% {
    width: calc($foo / 2);
  }

  100% {
    width: $bar;
  }
}

@media (max-width <= 768px) {
  .container {
    .search-box,
    .filter-box,
    .action-button {
      width: 100%;
      margin-bottom: 15px;
    }

    .search-box mat-form-field {
      width: 100%;
    }

    .action-button {
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: stretch;
    }

    .filter-box {
      display: flex;
      align-items: center;
    }
  }

  table {
    width: 100%;
    overflow-x: auto;
    display: block;

    thead,
    tbody,
    tr,
    th,
    td {
      white-space: nowrap;
    }
  }

  .mat-paginator {
    overflow-x: auto;
    display: block;
  }

  .alert {
    text-align: center;
    padding: 10px;
  }
}

@media screen and (max-width > 768px) {
  .action-button {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;

    button {
      width: 100%;
    }
  }
}