.bmi-btn-container {
  max-width: 300px;
  display: flex;
}

#bmiStandard,
#bmiMetric {
  border-radius: 8px 8px 0 0;
  padding: 3px 15px;
  margin-right: 5px;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  height: 40px;
  transition: background-color 300ms ease;
}

.activeBtn {
  color: #fff;
  padding: 6px 9px;
  background-color: var(--blue-color);
}

.bmi-main {
  max-width: 480px;
  width: 100%;
  background-color: var(--blue-color);
  border-radius: 0 10px 10px 10px;
  padding: 15px;
  font-size: 1.3rem;
}

.bmi-header {
  white-space: nowrap;
}

.bmi-input {
  font-size: 1.2rem;

  padding: 5px 10px;
  max-width: 150px;

  border: none;
  border-radius: 5px;
}
.bmi-input:focus {
  background-color: rgb(228, 228, 228);
  outline: none;
}

.bmi-input-submit {
  appearance: none;
  border: none;

  margin-bottom: 8px;
  padding: 5px 18px;

  color: #fff;
  font-size: 1.3rem;

  background-color: var(--success-color);
  border-radius: 5px;

  transition: background-color 250ms ease-in;
}
.bmi-input-submit:hover {
  background-color: var(--success-hover-color);
}

.bmi-ans {
  background-color: aliceblue;
  border-radius: 5px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #000;
}

.bmi-ans > input {
  cursor: pointer;
}

.bmi-inputContainer-label {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;

  margin-bottom: 10px;
}

.bmi-inputContainer {
  display: flex;
  align-items: center;
  gap: 5px;

  width: fit-content;
  transition: flex 250ms ease-in-out;
}

.error-bmi {
  background-color: rgb(155, 37, 37);
  width: 100%;
  border-radius: 4px;
  text-align: center;
  color: #fff;
  margin: 2px auto auto auto;
  padding: 2px;
  display: none;
}

.display-show {
  display: block;
}

.display-invi {
  display: none;
}

.bmi-info-container {
  margin: -30px 30px 0 40px;
  text-indent: 6%;
  line-height: 1.9rem;
}

@media screen and (max-width: 900px) {
  .bmi-info-container {
    margin: -30px 0 0 0;
  }
}

@media screen and (max-width: 500px) {
  .bmi-main {
    padding: 15px;
  }
  .bmi-inputContainer {
    flex: 3;
    flex-direction: column;
  }
  .bmi-container {
    width: 100%;
  }
  .bmiinput {
    max-width: none;
    width: 100%;
  }
}

@media screen and (max-width: 380px) {
  .bmi-inputContainer-label {
    flex-direction: column;
  }
  .bmiinput {
    margin-left: 0;
  }
}