aside {
  position: sticky;
  top: 0;
  z-index: 2000;
  height: 100vh;
  overflow-y: auto;
  padding: 40px 40px 40px 0;
  background: var(--color-neutral-100);
  border-right: 1px solid var(--color-neutral-200);

  form {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .search-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 4px;
    padding-right: 4px;

    select { width: 100%; }
    .bloom-time { max-width: 50px; }

    [type="text"],
    select {
      height: 32px;
      border-radius: var(--border-radius);
      border: 1px solid var(--color-neutral-200);
      padding: 0 8px;
    }

    [type="checkbox"] {
      margin: 0;
      width: 18px;
      height: 18px;
      cursor: pointer;
    }

    &.weather section {
      display: flex;
      gap: 14px;

      span {
        display: flex;
        align-items: center;
        gap: 6px;

        i { color: var(--color-green); }
      }
    }
  }
}

@media (max-width: 640px) {
  .container {
    display: block !important;
    .scrollable-content { padding: 20px 0 !important; }
  }

  aside {
    display: none;

    &.opened {
      display: block;
      position: absolute;
      top: 110px;
      left: 0;
      height: 75vh;
      width: 100%;
      padding-right: 0;
      border-right: none;
    }
  }
}