.mainTable * th, .mainTable > th, .mainTable * th > .controlButton, .mainTable > th > .controlButton, .mainTable > caption, .mainTable > caption > .controlButton, .mainTable > caption * .controlButton, #header, #searchBar, #selectSearchBar {
  color: white;
  background-color: #1976d2; }

.mainTable > caption > .controlButtons, #sidebar * li, .searchTerm {
  display: inline-flex;
  vertical-align: middle; }
  .mainTable > caption > .controlButtons > .material-icons, #sidebar * li > .material-icons, .searchTerm > .material-icons {
    padding-right: 1em; }

body {
  font-family: Roboto, sans-serif;
  margin: 0 auto;
  background-color: #eceff1; }

.mainTable {
  border: none;
  border-collapse: collapse;
  box-shadow: 0 0 10px 0 grey;
  margin: 2em;
  width: calc(100% - 4em); }
  .mainTable * th, .mainTable > th {
    padding: 1em;
    cursor: pointer;
    white-space: nowrap; }
  .mainTable > caption {
    padding: 1em;
    white-space: nowrap;
    text-align: left;
    box-shadow: 0 0 10px 0 grey; }
    .mainTable > caption > .tableTitle {
      float: left; }
    .mainTable > caption * h2 {
      width: fit-content;
      padding: 0; }
    .mainTable > caption > .controlButtons {
      float: right; }
  .mainTable * td, .mainTable > td {
    padding: 1em; }
  .mainTable * tr:first-child, .mainTable > tr:first-child {
    z-index: 2; }
  .mainTable * tr:not(:first-child), .mainTable > tr:not(:first-child) {
    z-index: 1; }
    .mainTable * tr:not(:first-child) :hover, .mainTable > tr:not(:first-child) :hover {
      box-shadow: 0 0 5px 0 grey;
      transform: scale(1.01, 1.01);
      transition-duration: 0.4s; }
  .mainTable * tr:nth-child(odd), .mainTable > tr:nth-child(odd) {
    background-color: #eceff1; }
  .mainTable * tr:nth-child(even), .mainTable > tr:nth-child(even) {
    background-color: #fff; }

.controlButtons {
  white-space: nowrap;
  text-align: right; }

.controlButton {
  font-size: 24px;
  width: 1.5em;
  height: 1.5em;
  font-weight: bold;
  background-color: transparent;
  border: none;
  border-radius: 50%;
  transition-duration: 0.4s;
  -moz-appearance: none; }
  .controlButton:hover {
    box-shadow: 0 0 3px 0 grey;
    cursor: pointer;
    transform: scale(1.03, 1.03); }
  .controlButton:focus {
    outline: none; }
  .controlButton:active {
    outline: none;
    background: rgba(0, 0, 0, 0.1); }

#main {
  display: grid;
  grid-template-columns: 170px 1fr;
  grid-template-rows: 4em 1fr;
  height: 100vh;
  width: 100vw; }

#header {
  grid-column: span 2;
  grid-row: 1;
  padding: 1em;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  z-index: 3; }

#sidebar {
  background: #fff;
  grid-column: 1;
  grid-row: 2;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  z-index: 2; }
  #sidebar * li {
    color: #4c4c4c; }
    #sidebar * li:hover:not(.sidebarSection) {
      color: #262626;
      background-color: #f4f4f4;
      cursor: pointer; }
    #sidebar * li:not(.sidebarSection) {
      padding: 1em;
      width: calc(100% - 2em); }

.sidebarSection {
  padding: 0;
  width: 170px;
  overflow-y: hidden;
  overflow-x: visible; }
  .sidebarSection * ul {
    background-color: #f8f8f8; }

.sidebarSection.hide {
  height: 0; }

.sidebarSection.show {
  height: auto; }

.overflow-x-trick {
  width: 170px;
  height: auto; }

#content {
  background-color: #eceff1;
  grid-column: 2;
  grid-row: 2;
  overflow-y: scroll; }

h1, h2, h3 {
  font-weight: normal;
  margin: 0 auto; }

ul {
  list-style-type: none;
  padding: 0;
  margin: 0; }

#loginWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%; }

#login {
  width: auto;
  height: auto;
  background-color: white;
  box-shadow: 0 0 8px 0 grey;
  display: flex;
  justify-content: center;
  align-items: center; }
  #login > table {
    margin: 1em; }

.errorMessage {
  color: red; }

#pageNumber {
  font-size: 20px;
  padding: 0.25em;
  width: 2em;
  height: 2em;
  font-weight: normal; }

#searchBar, #selectSearchBar {
  font-size: 24px;
  width: calc(100% - 72px);
  border: none; }
  #searchBar:focus, #selectSearchBar:focus {
    outline: none; }
  #searchBar::placeholder, #selectSearchBar::placeholder {
    color: rgba(255, 255, 255, 0.75); }

.searchTerm {
  float: left;
  padding-left: 2em; }
  .searchTerm > .material-icons:hover {
    cursor: pointer; }

#editWrapper {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0; }

#editDialog {
  z-index: 5;
  background-color: white;
  display: flex;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  padding: 3em; }

#shadowCover {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  background-color: #222;
  opacity: 0.5; }

input[type=text], input[type=password], select:not(.controlButton), textarea {
  border: none;
  border-bottom: 2px solid lightgrey;
  background-color: #fff;
  width: 20em;
  padding: 8px;
  margin: 8px 0;
  box-sizing: border-box;
  font-size: 20px;
  outline: none;
  transition-duration: 0.4s;
  font-family: Roboto, sans-serif; }
  input[type=text]:hover, input[type=password]:hover, select:not(.controlButton):hover, textarea:hover {
    cursor: pointer;
    border-width: 2px;
    outline: none; }
  input[type=text]:focus, input[type=password]:focus, select:not(.controlButton):focus, textarea:focus {
    border-bottom: 2px solid #1976d2;
    outline: none; }
  input[type=text]:disabled, input[type=password]:disabled, select:not(.controlButton):disabled, textarea:disabled {
    background-color: lightgrey; }

textarea {
  resize: none; }

.inputWithLabel {
  white-space: nowrap; }

.formLabel {
  text-align: left;
  width: 15em;
  color: grey;
  position: relative;
  height: 24px;
  top: 48px;
  background-color: white;
  font-size: 16px;
  z-index: 2; }

.formLabel:hover {
  cursor: pointer; }

.formLabel.big {
  font-size: 16px;
  top: 48px;
  color: grey;
  animation: 0.4s formLabelGrow; }

.formLabel.small {
  font-size: 10px;
  top: 20px;
  color: black;
  animation: 0.4s formLabelShrink; }

@keyframes formLabelShrink {
  0% {
    font-size: 16px;
    top: 48px;
    color: grey; }
  100% {
    font-size: 10px;
    top: 20px;
    color: black; } }
@keyframes formLabelGrow {
  0% {
    font-size: 10px;
    top: 20px;
    color: black; }
  100% {
    font-size: 16px;
    top: 48px;
    color: grey; } }
.dialogButton {
  float: right;
  background-color: #1976d2;
  color: white;
  padding: 0.5em;
  border: none;
  border-radius: 2px;
  font-size: 20px;
  transition-duration: 0.4s;
  margin: 0.5em; }
  .dialogButton:hover {
    box-shadow: 0 0 4px 0 grey;
    cursor: pointer; }

.cancelButton {
  background-color: white;
  color: #1976d2; }

#selectWrapper {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0; }

#selectTable {
  z-index: 6; }
  #selectTable * tr:hover {
    cursor: pointer;
    background-color: grey; }

#plusTr {
  background-color: #eceff1;
  margin-top: 0.5em;
  border: dashed 4px grey;
  border-radius: 5px;
  text-align: center;
  color: grey;
  transition-duration: 0.4s;
  border-collapse: collapse; }
  #plusTr > td {
    text-align: center; }
  #plusTr:hover {
    box-shadow: 0 0 3px 0 grey;
    cursor: pointer;
    background-color: lightgrey; }

.resetField {
  position: relative;
  top: 10px;
  z-index: 1; }
  .resetField:hover {
    cursor: pointer; }

.slydial {
  padding-top: 15px;
  width: 20em;
  font-size: 18px; }
  .slydial * td {
    vertical-align: top; }

.centerAlign {
  text-align: center; }

#memberTable * td {
  padding: 0.5em; }
#memberTable > .mainTable {
  margin: 0 0 0 2em; }

#pageNumber:hover, #memberPageNumber:hover, #selectPageNumber:hover {
  transform: none; }

/*# sourceMappingURL=style.css.map */