.flex {
  display: flex;
}
.flex-row {
  display: flex;
  flex-direction: row;;
}
.flex-column {
  display: flex;
  flex-direction: column;
}
.flex-grow {
  flex-grow: 2;
  overflow: hidden;
}
.flex-wrap {
  display: flex;
  flex-wrap: wrap;
}
.flex-align-items-center {
  align-items: center;
}
.flex-center {
  justify-content: center;
}
.flex-gap {
  gap: 1rem;
}
.sticky {
  position: sticky;
  overflow: hidden;
}
.sticky-top {
  @media (min-height: 600px) {
    position: sticky;
    top: 0;
    overflow: hidden;
    min-height: 48px;
  }
}
body {
  color: #444;
  background-color: #ddd;
}
#root {
  height: 100vh;
  overflow: hidden;
  position: relative;
}
.h100 {
  height: 100%;
}
.scroll {
  overflow-y: auto;
  flex-shrink: 2;
}
.leftBar {
  min-width: 250px;
}
h1 {
  color: #444;
  @media (max-height: 600px) {
    margin: 0;
    font-size: 1.4rem;
  }
}
h2 {
  color: #555;
  @media (max-height: 600px) {
    margin: 8px 0;
    font-size: 1.2rem;
  }
}
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  padding: 8px 16px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
tr:nth-child(even) {
  background-color: #f2f2f2;
}
tr:nth-child(odd) {
  background-color: #fff;
}