Banda-Media/lunchMemo

.form-footer {
  margin: 1rem auto 0;
  text-align: center;
  button {
    margin-right: 13px;
  }
  a {
    &:link,
    &:visited {
      color: #d60000;
    }
    &:hover,
    &:active {
      color: #481e1e;
    }
  }
}

.container {
  &.register-login {
    width: 850px;
    top: 25vh;
    background-color: #fff;
    box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.4);
  }

  &.app-host-lunch {
    padding-top: 190px;
    background-color: unset;
    text-align: center;

    input {
      height: 3rem;
      position: relative;

      &#group-name {
        width: 240px;
      }

      &.timeSelect {
        width: 120px;

        &:after {
          content: '\f0d7';
          color: #000;
          padding: 12px 8px;
          position: absolute;
          right: 0;
          top: 0;
          background: red;
          z-index: 1;
          text-align: center;
          width: 10%;
          height: 100%;
          pointer-events: none;
          box-sizing: border-box;
        }
      }
    }

    select {
      height: 3rem;
      border: none;
      padding: 0px 11px;

      &:required:invalid {
        color: gray;
      }

      option[value=''][disabled] {
        display: none;
      }

      option {
        color: black;
      }
    }

    h2 {
      font-size: 2.4rem;
      font-weight: 300;
      color: #fff;
      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
      margin-bottom: 1rem;
      letter-spacing: 3px;
      text-transform: uppercase;
    }
  }

  &.groups-wrapper {
    width: 93%;
    margin-top: 3rem;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.4);
  }
}

.group-container {
  .attendees {
    width: 10%;
  }

  .group-time-range {
    div {
      margin-right: 14px;
      span {
        margin-right: 5px;
      }
    }
  }

  .btn-join,
  .btn-leave {
    width: 100px;
  }

  .btn-join {
    background-color: $yellow;
    &:hover {
      background-color: $yellow;
    }
  }

  .btn-leave {
    background-color: $red;
    &:hover {
      background-color: $red;
    }
  }
  .attendee-list {
    li {
      margin-right: 7px;
      color: $lightgray;

      &.host {
        color: $red;
      }

      &.occupied {
        color: $red;
      }
    }
  }
}

.register {
  display: flex;
  flex-wrap: wrap;

  p {
    font-family: $header-font;
    font-size: 1rem;
    font-weight: 300;
    font-style: italic;
    line-height: 2.2rem;
    clear: both;
  }

  h3 {
    margin-bottom: 1.4rem;
    font-weight: 300;
    font-size: 1rem;

    span {
      font-size: 1.4rem;
      font-style: italic;
      color: #ca1818;
      width: 100%;
      display: block;
      font-weight: 700;
    }
  }

  .notice {
    margin-top: 1rem;
    text-align: center;
    font-size: 0.8rem;
    color: #999;

    &.error {
      color: red;
    }
  }
}

.left,
.right {
  width: 50%;
  height: 100%;
  padding: 4rem 3.2rem 2.2rem;
}

.right {
  background-color: #f7f7f7;
}

.mobile-menu {
  display: none;
}

@media (max-width: 975px) {
  .container {
    position: relative;
    margin: 0 auto;

    &.register-login {
      width: 80%;
      top: 0;
      margin-top: 10%;
      background-color: #fff;
      box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.4);
    }

    &.app-host-lunch {
      padding-top: 125px;

      h2 {
        line-height: 2rem;
      }

      input {
        width: 95%;

        &#group-name {
          width: 93%;
        }
      }
    }

    &.groups-wrapper {
      .group-container {
        display: block;
        position: relative;

        .join-leave {
          float: right;
          position: absolute;
          right: 1.6rem;
          top: 1.6rem;
        }
      }
    }
  }

  .logo {
    width: 230px;
  }

  .register {
    .left,
    .right {
      width: 100%;
    }
  }
}

@media (max-width: 468px) {
  .mobile-menu {
    display: block;
  }

  .nav {
    display: none;
  }

  .container {
    &.register-login {
      width: 94%;
      margin: 3%;
    }
  }

  .register {
    .left,
    .right {
      padding: 2rem;
    }
    p {
      font-size: 0.9rem;
      line-height: 1.6rem;
    }
  }
}

.large-title {
  font-size: 2.4rem;
  font-weight: 300;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  margin-bottom: 1rem;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.attendee-list {
  img {
    border-radius: 50%;
  }
  i:hover:after,
  img:hover:after {
    content: attr(title);
  }
}