.label {
  padding: 5px;
  position: absolute;
  display: inline-block;
}

.input {
  display: block;
  width: calc(100% - 20px);
  padding: 6px 0px;
  font-weight: 300;
  background-color: inherit;
  background-clip: padding-box;
  border: none;
  text-align: left
  @media (max-width: 800px) {
    text-align center;
    width 100%;
  }
}

.input-container {
  position: relative
}
.input:focus + span {
  display: none;
}
.guest-label {
  position: absolute;
  bottom: 1px;
  font-size: 24px;
  font-weight: 300;
  left: 50px;
  @media (max-width: 800px) {
    right: 0%;
    bottom: 2px;
  }
}

.guest {
  @media (max-width: 800px) {
    text-align center;
    width 85%;
  }
  @media (max-width: 500px) {
    text-align center;
    width 70%;
  }
  @media (max-width: 400px) {
    text-align center;
    width 65%;
  }
}

.input-container:hover {
  border-bottom: 1px solid rgba(0,0,0,0.12);
}

.input-container:focus-within {
  .input {
    outline: none;
  }
  border-bottom: 2px solid brand-primary;
}

.input::placeholder {
  color: brand-secondary;
}

.input[type=date]::before {
	content: attr(data-placeholder);
	width: 100%;
}

.input[type=date]:focus::before,
.input[type=date]:valid::before { display: none }

.input[type=time]::before {
	content: attr(data-placeholder);
	width: 100%;
}

.input[type=time]:focus::before,
.input[type=time]:valid::before { display: none }

.input[type=date], .input[type=time] {
  padding-left: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
}