wongjiahau/ttap-web

html {
  overflow-y: auto;
}

body {
  margin: 0;
  padding: 0;
  font-family: roboto;
}

div:focus {
  outline: 0;
}

.flatpickr-input {
  padding: 10px;
}

code {
  overflow-x: auto;
  padding: 0 4px;
  border: 1px solid rgba(192, 201, 200, 0.4);
  background-color: rgba(192, 201, 200, 0.2);
  border-radius: 2px;
  font-size: 0.875em;
  word-wrap: break-word;
}

.react-autosuggest__container {
  position: relative;
}

.react-autosuggest__input {
  width: 460px;
  height: 30px;
  padding: 10px 20px;
  font-family: roboto;
  font-weight: 300;
  font-size: 16px;
  border: 1px solid #aaa;
  border-radius: 4px;
}

.react-autosuggest__input--focused {
  outline: none;
}

.react-autosuggest__input--open {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.react-autosuggest__suggestions-container {
  display: none;
}

.react-autosuggest__suggestions-container--open {
  display: block;
  position: absolute;
  top: 51px;
  width: 500px;
  border: 1px solid #aaa;
  background-color: #fff;
  font-family: roboto;
  font-weight: 300;
  font-size: 16px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  z-index: 2;
}

.react-autosuggest__suggestions-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.react-autosuggest__suggestion {
  cursor: pointer;
  padding: 10px 20px;
}

.react-autosuggest__suggestion--highlighted {
  background-color: #ddd;
}

.maybeOccupiedBox :hover {
  background: darkseagreen;
  filter: brightness(80%);
}

/* Copied from https://github.com/IanLunn/Hover/blob/master/css/hover.css */
/* Glow */
.hvr-glow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
}
.hvr-glow:hover,
.hvr-glow:focus,
.hvr-glow:active {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

.get-user-attention {
  -webkit-animation: glowing 2s ease-in 0.5s infinite;
  -moz-animation: glowing 2s ease-in 0.5s infinite;
  -o-animation: glowing 2s ease-in 0.5s infinite;
  animation: glowing 2s ease-in 0.5s infinite;
  animation-delay: 1s;
}

@keyframes glowing {
  0% {
    box-shadow: 0 0 -10px black;
  }
  20% {
    box-shadow: 0 0 8px red;
  }
  40% {
    box-shadow: 0 0 8px yellow;
  }
  60% {
    box-shadow: 0 0 8px green;
  }
  80% {
    box-shadow: 0 0 8px blue;
  }
  100% {
    box-shadow: 0 0 -10px black;
  }
}

.slot-view {
  border: 1px;
  border-color: lightslategray;
  border-radius: 5px;
  border-style: solid;
  font-size: 13px;
  height: 100%;
  width: 100%;
  text-align: center;
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
}
.grid-item {
  text-align: center;
}