.App {
  text-align: center;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 80px;
}

.App-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
}

.App-intro {
  font-size: large;
}

.capitalize {
  text-transform: capitalize;
}

.MuiTableCell-head {
  text-transform: uppercase;
  white-space: nowrap;
}

.showCard {
  display: flex;
  flex-direction: column;
  position: relative;
}

.button-container button {
  transition: none;
}

.button-container--green button:hover,
.button-container--green button .MuiIconButton-label:hover {
  background-color: #b4ebb2!important;
}

.button-container--red button:hover,
.button-container--red button .MuiIconButton-label:hover {
  background-color: #fcc0c4!important;
}

.button-container--grey button:hover,
.button-container--grey button .MuiIconButton-label:hover{
  background-color: #f0f0f0!important;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/** Layout **/
.column-layout {
  display: flex;
  flex-direction: column;
}

.column-full {
  width: 100%;
}

@media screen and (min-width: 600px) {
  /* Desktop */
  .column-layout {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .column-left,
  .column-right {
    padding: 0 1em 1em 1em;
    width: calc(50% - 2em);
  }

  .column-left--small {
    width: calc(25% - 2em);
  }
}