@import url("https://rsms.me/inter/inter.css");
.font-inter {
  font-family: Inter;
  font-size: 14px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.43;
  letter-spacing: normal;
}
.inputArea {
  composes: font-inter;
  width: 100px;
  height: 36px;
  padding-top: 1px;
  padding-left: 10px;
  background-color: #ededed;
  border: 1px solid #e4e4e4;
  border-radius: 4px;
  color: #666666;
  outline: none;
  -webkit-appearance: none;
}
.inputArea:hover {
  background-color: #ffffff;
  border: solid 1px #005397;
}
.inputArea:focus {
  background-color: #ffffff;
  border: solid 2px #005397;
}
.inputArea-icon {
  composes: inputArea;
  padding-left: 40px;
}

.inputArea-icon:hover {
  background-color: #ffffff;
  border: solid 1px #005397;
}
.inputArea-icon:focus {
  background-color: #ffffff;
  border: solid 2px #005397;
}
.input-icons{
  position: relative;
}
.input-icons i {
  position: absolute;
}

.input-icons {
  width: auto;
  margin-bottom: 10px;
}

.icon {
  padding-left: 8px;
  padding-top: 8px;
  text-align: left;
  width: 14px;
  height: 14px;
}

.helper {
  composes: font-inter;
  font-size: 12px;
  margin-top: 8px;
  color: #666666;
}

.header {
  composes: font-inter;
  margin-bottom: 8px;
  color: #333333;
}
.display-none {
  display: none;
}

.mandatory,
.mandatory:focus {
  border: solid 2px #db7064;
}