.s-Input-Group {
  position: relative;
}
.s-Input-Group.valid input, .s-Input-Group.valid > div, .s-Input-Group.valid select {
  outline: 1px solid green !important;
}
.s-Input-Group.valid label {
  color: green;
}
.s-Input-Group.not-valid input, .s-Input-Group.not-valid > div, .s-Input-Group.not-valid select, .s-Input-Group.not-valid textarea {
  outline: 1px solid red !important;
}
.s-Input-Group.not-valid label {
  color: red;
}
.s-Input-Group input, .s-Input-Group > div, .s-Input-Group select, .s-Input-Group textarea {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  border: none;
  outline: 1px solid lightgray;
}
.s-Input-Group input:focus, .s-Input-Group > div:focus, .s-Input-Group select:focus, .s-Input-Group textarea:focus {
  border: none !important;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: 1px solid darkgray;
}
.s-Input-Group input:placeholder-shown + label, .s-Input-Group textarea:placeholder-shown + label {
  font-size: 16px;
  top: 7.5px;
  left: 7.5px;
}
.s-Input-Group input:focus + label, .s-Input-Group label, .s-Input-Group textarea:focus + label {
  top: -20px;
  left: 7.5px;
  font-size: 12px;
  padding: 0px 5px;
}
.s-Input-Group input:required + label:after {
  content: "*";
  color: red;
}
.s-Input-Group input:disabled + label {
  background-color: transparent;
}
.s-Input-Group label {
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  margin: 0;
  padding: 0px 5px;
  position: absolute;
  color: darkgray;
  background-color: transparent;
  display: block;
  pointer-events: none;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}
.s-Input-Group > div .s-MultiComboBox-Tag {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.s-Input-Group:before {
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
  content: attr(data-error);
  padding: 0px 5px;
  font-size: 12px;
  background-color: transparent;
  color: red;
  position: absolute;
  right: 5px;
  bottom: -10px;
  opacity: 0.1;
}
.s-Input-Group[data-error]:before {
  opacity: 1;
  -moz-animation: hightlightred 0.2s;
  -o-animation: hightlightred 0.2s;
  -webkit-animation: hightlightred 0.2s;
  animation: hightlightred 0.2s;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}
.s-Input-Group input:-webkit-autofill,
.s-Input-Group input:-webkit-autofill:hover,
.s-Input-Group input:-webkit-autofill:focus,
.s-Input-Group input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px white inset !important;
}
.s-Input-Group input:placeholder-shown ~ i {
  color: white;
}
.s-Input-Group i {
  position: absolute;
  right: 0;
  top: 0;
  color: lightgray;
  font-size: 20px;
  top: calc(50% - 10px);
  right: 5px;
  display: block;
  background-color: white;
  -moz-transition: color 0.2s;
  -o-transition: color 0.2s;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
}
.s-Input-Group i:hover {
  color: lightcoral;
}

@keyframes hightlightred {
  0% {
    background-color: red;
    color: white;
  }
  100% {
    background-color: white;
    color: red;
  }
}
@-moz-keyframes hightlightred {
  0% {
    background-color: red;
    color: white;
  }
  100% {
    background-color: white;
    color: red;
  }
}
@-webkit-keyframes hightlightred {
  0% {
    background-color: red;
    color: white;
  }
  100% {
    background-color: white;
    color: red;
  }
}