@import 'https://fonts.googleapis.com/css?family=Prompt:400,700';

:root {
    --main-blue: #54546D;
    --main-orange: #9A5DC6;
  }

.modal {
  display: flex;
  flex-flow: column wrap;
  width: 45em;
  height: 21em;
  position: fixed;
  z-index: 100;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: white;
  box-shadow: 0 0 4em 0.6em rgba(23, 44, 65, 0.9);
  border-radius: 1em;
}

.closed {
  display: none;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
  background: rgba(23, 44, 65, 0.6);
}

.time-form {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
}

.time-form div {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
}

.modal .close-button {
  border: none;
  background: #9A5DC6;
  color: white;
  padding: 0.3em 0.6em;
  margin: 0.3em;
  font-size: 1.3em;
  border-radius: 0.5em;
  align-self: flex-end;
}

form.time-form button {
  border: none;
  background: #9A5DC6;
  color: white;
  padding: 0.3em 3em;
  font-size: 1.3em;
  border-radius: 0.5em;
  margin: 0.8em 0;
}

.modal .close-button:hover, form.time-form button:hover {
    cursor: pointer;
}

form.time-form input {
    border: none;
    border-bottom: 3px solid var(--main-blue);
    padding: 2%;
    font-size: 4em;
    width: 48%;
    margin: 1%;
    color: var(--main-blue);
    text-align: center;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number]:focus {
    border: none;
    outline: 3px solid var(--main-blue);
}

div.suggestions {
    display: flex;
    justify-content: space-evenly;
    margin-top: 1em;
}

div.suggestions div {
    padding: 1em;
    font-weight: 600;
    line-height: 1;
    border: 3px solid var(--main-blue);
    border-radius: 1em;
}

div.suggestions div:hover {
    background: var(--main-blue);
    color: white;
    cursor: pointer;
}