:root {
  --app-bar-height: var(--lumo-size-xl);

  --navi-drawer-width: calc(var(--lumo-size-m) * 7);
  --navi-drawer-rail-width: calc(var(--lumo-size-m) * 1.75);
  --navi-item-indentation: calc(var(--lumo-icon-size-s));

  --details-drawer-width: calc(var(--lumo-size-m) * 11);

  --transition-duration-s: 160ms;
  --transition-duration-m: 240ms;
  --transition-duration-l: 320ms;

  /* Responsive sizing and spacing */
  --lumo-space-r-m: var(--lumo-space-m);
  --lumo-space-r-l: var(--lumo-space-l);
  --lumo-space-r-x: var(--lumo-space-l);
  --lumo-space-wide-r-m: var(--lumo-space-wide-m);
  --lumo-space-wide-r-l: var(--lumo-space-wide-l);
}

@media (max-width: 630px) {
  .search-area {
    flex-direction: column;
  }
  .dates-and-status {
    flex-direction: column;
  }
  .buttons {
    margin-top: 15px;
  }
} 

@media (min-width: 630px) {
  .search-area {
    flex-direction: column;
  }
  .dates-and-status {
    flex-direction: row;
  }
  .buttons {
    margin-top: 15px;
  }
} 

@media (min-width: 768px) {
  .search-area {
    flex-direction: column;
  }
  .dates-and-status {
    flex-direction: row;
  }
  .buttons {
    margin-top: 15px;
  }
}

@media (min-width: 1024px) {
  .search-area {
    flex-direction: column;
  }
  .dates-and-status {
    flex-direction: row;
  }
  .buttons {
    margin-top: 15px;
  }
}

@media (min-width: 1250px) {
  .search-area {
    flex-direction: row;
  }
  .dates-and-status {
    flex-direction: row;
  }
  .buttons {
    margin-top: auto;
  }
}

@media (max-width: 1849px) {
  .search-area-with-download {
    flex-direction: column;
  }
  .vertical-buttons {
    margin-top: 15px;
  }
  .pre-capture-grid{
    height: 500px;
  }
}

@media (min-width: 1850px) {
  .search-area-with-download {
    flex-direction: row;
  }
  .vertical-buttons {
    margin-top: 0px;
  }
  .pre-capture-grid{
    height: 100%;
  }
}

@media (max-width: 479px) {
  :root {
    --lumo-space-r-x: 0;
  }
}

@media (min-width: 480px) and (max-width: 1023px) {
  :root {
    --lumo-space-r-x: var(--lumo-space-m);
  }
}

@media (max-width: 1023px) {
  :root {
    --lumo-space-r-m: var(--lumo-space-s);
    --lumo-space-r-l: var(--lumo-space-m);
    --lumo-space-wide-r-m: var(--lumo-space-wide-s);
    --lumo-space-wide-r-l: var(--lumo-space-wide-m);
  }
}

html,
body {
  height: 100%;
  overflow: hidden;
  width: 100%;
}

.root {
  background-color: var(--lumo-contrast-5pct);
}

.app-header-outer,
.app-footer-outer {
  z-index: 3;
}

vaadin-grid-cell-content {
  text-overflow: ellipsis;
}

vaadin-text-field {
  align-self: auto;
}

.align-center {
    align-self: flex-end;
}