#app {
  height: 680px;
}

.widgets-container {
  display: grid;
  grid-template-areas:
    'title title title title'
    'name name birthDate birthDate '
    'address address state phone'
    'hireDate hireDate range range'
    'notes notes notes notes';
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 20px;
  padding-left: 20px;
  padding-right: 20px;
}

.title {
  grid-area: title;
  font-size: 18px;
  font-weight: 500;
}

#name {
  grid-area: name;
}

#address {
  grid-area: address;
}

#birth-date {
  grid-area: birthDate;
}

#state {
  grid-area: state;
}

#phone {
  grid-area: phone;
}

#hire-date {
  grid-area: hireDate;
}

#notes {
  grid-area: notes;
}

#vacation-dates {
  grid-area: range;
}

#validate {
  float: right;
  margin-top: 20px;
  margin-right: 20px;
  width: 100px;
}

.options {
  grid-area: options;
  padding: 20px;
  margin-bottom: 40px;
  background-color: rgba(191, 191, 191, 0.15);
}

.caption {
  font-size: 18px;
  font-weight: 500;
}

.editors-modes {
  display: flex;
}

.option {
  padding-right: 20px;
  margin-top: 20px;
}
