html,
body {
  height: 100%;
}

/**
 * header
 */
#header {
  left: 0;
  right: 0;
  position: fixed;
  top: 0;
  z-index: 2;
}

/**
 * card layout
 */
.card {
  max-width: 800px;
  margin: 20px auto;
  border-radius: 2px;
  padding: 0;
}

.card.wide {
  max-width: 1080px;
}

.card :first-child {
  overflow: hidden;
}

.card-content {
  padding-top: 20px;
  padding-bottom: 50px;
}

/**
 * tables
 */
.mui-table {
  border-spacing: 0;
}

.mui-table--alternating tr:nth-child(even) {
  background-color: #f2f2f2;
}

.mui-table--alternating .mui-table-tr:nth-child(even) {
  background-color: #f2f2f2;
}

/**
 * Footer CSS
 */
footer {
  box-sizing: border-box;
  max-width: 800px;
  margin: auto;
  padding: 20px 35px;
}

.header-space {
  height: 1.25rem;
}

.space-sm {
  height: 0.5rem;
}

.space-md {
  height: 1rem;
}

.space-lg {
  height: 1.5rem;
}

/**
 * Animating ellipsis
 */
.ellipsis:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  -webkit-animation: ellipsis steps(4, end) 900ms infinite;
  animation: ellipsis steps(4, end) 900ms infinite;
  content: "\2026"; /* ascii code for the ellipsis character */
  width: 0;
}

@keyframes ellipsis {
  to {
    width: 1.25em;
  }
}

@-webkit-keyframes ellipsis {
  to {
    width: 1.25em;
  }
}