html {
    font-size: x-large;
    background-color: #F2F2F2;
    color: black;
}

.main {
  max-width: 1920px;
  border-radius: 15px;
  background-color: #FFFFFF;
  box-shadow: rgba(50, 50, 50, 0.1) 0px 2px 5px 3px, rgba(0, 0, 0, 0.2) 0px 1px 3px 1px;
}

.quick {
  color: #F2F2F2;
  transition: color 0.5s;
}

.quick:hover {
  color: #CCCCCC;
}

th {
  padding: 5px;
  color: #000000;
  background: #F2F2F2;
}

.semivisible {
  opacity: 0.6;
  background-color: #FFFFFF;
  border-radius: 15px;
  box-shadow: rgba(50, 50, 50, 0.1) 0px 2px 5px 3px, rgba(0, 0, 0, 0.2) 0px 1px 3px 1px;
}

td.gray, tr.gray td {
  color: #CCCCCC;
}

td.halfgray, tr.halfgray td {
  color: #999999;
}

.light, tr.light td {
  color: #848484;
}

.elevate, table.elevate, table.elevate th, table.elevate td {
  background: #F2F2F2;
  border-radius: 15px;
}

table.data {
  background: #F2F2F2;
}

table.data tr:nth-of-type(2n) {
  background: #FAFAFA;
}

.info:hover + .tooltip {
  position: absolute;
  margin: .5em;
  display: block;
  color: black;
  padding: .5em;
  top: auto;
  right: auto;
  left: 50%;
  background-color: #CCCCCC;
  border: 1px solid #CCCCCC;
  z-index: 2;
}

input,select,button {
  font-size: x-large;
  background-color: #FAFAFA;
  border: 1px solid #CCCCCC;
  color: #424242;
  border-radius: 5px;
}

.dark {
  color: #848484;
}

button:hover {
  background-color: #CCCCCC;
  box-shadow: rgba(0, 0, 0, 0.1) 0 15px 20px;
  transform: translateY(-1px);
  transition-duration: 0.2s;
}