.outer{
  width: 100vw;
  height: 100vh;
}
.container{
  background-color: #343a40;
  width: 90vmin;
  height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 2rem;
}
.title{
  color: #feffff;
}
.rooms-list{
  height: 90%;
  width: 100%;
  background-color: #212529;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.form-control{
  display: flex;
  flex-direction: column;
  width: 80%;
  color: white;
  margin: 1rem;
  user-select: none;

  &-radio{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    color: #feffff;
    gap: 1rem;
  }
}
.loading{
  color: #feffff;
}
.radio{
  &-input-green{
    margin-right: 4px;
    accent-color: #1a7431;
  }
  &-label-green{
    border-bottom: 3px solid #1a7431;
  }

  &-input-blue{
    margin-right: 4px;
    accent-color: #0466c8;
  }
  &-label-blue{
    border-bottom: 3px solid #0466c8;
  }

  &-input-red{
    margin-right: 4px;
    accent-color: #c1121f;
  }
  &-label-red{
    border-bottom: 3px solid #c1121f;
  }

  &-input-yellow{
    margin-right: 4px;
    accent-color: #ffea00;
  }
  &-label-yellow{
    border-bottom: 3px solid #ffea00;
  }

  &-input-gold{
    margin-right: 4px;
    accent-color: #ff7b00;
  }
  &-label-gold{
    border-bottom: 3px solid #ff7b00;
  }
}

.form-input{
  background-color: #6c757d;
  color: #feffff;
  padding: 5px;
  width: 100%;
  border: none;
  outline: none;
  &-textarea{
    resize: vertical;
    max-height: 200px;
  }

  &::placeholder{
    color: #feffff;
  }
  &:focus, &:active{
    outline: none;
  }
}
.btn{
  &-submit{
    color: #feffff;
    background-color: #1a7431;
    border: none;
    border-radius: 8px;
    padding: .5rem 1rem;
    transition: all .3s;
    cursor: pointer;

    &:hover{
      filter: brightness(85%);
    }
  }
}
.error-warning{
  color: red;
}