.c21-input-container {
  border-bottom: 1px solid rgba(211, 212, 213, .4);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  background-color: #ffffff;
  margin: 0 0 7px 0;
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
  height: 36px;
  display: inline-flex;
  input, 
  select {
      width: 100%;
      margin: 0;
      border: 0;
      padding: 12px 0;
      background-color: #ffffff;
      vertical-align: middle;
  }
  // input {
  //     display: block;
  //     padding: 11px 10px 8px 10px;
  //     color: #616161;
  //     font-size: 1.3em;
  //     font-weight: 300;
  //     line-height: 1.2em;
  //     -webkit-box-shadow: none;
  //     box-shadow: none;
  // }
  input::placeholder {
      color: rgb(179, 182, 184);
      font-weight: initial;
      opacity: 1; /* Firefox */
  }
  input:-ms-input-placeholder { /* Internet Explorer 10-11 */
      /* color: #cccccc; */
      color: rgb(179, 182, 184);
      font-weight: initial;
  }

  /* Remove input border colour */
  input:focus,
  input:active,
  input:hover,
  input:visited {
      box-shadow: none;
      background-color: #ffffff;
      outline: none;
  }
  
  /* Remove input background colour for Chrome autocomplete */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active {
      transition: background-color 5000s ease-in-out 0s;
  }
}

input[type='text'].errors{
  // border-bottom: 2px solid red;
  color: red;
}

.text-danger {
  color: red;
  font-size: 1em;
  min-height: 20px;
  background-color: #ffffff;
  margin: 0px 10px 0px 10px;
}
.form-group {
  position: relative;
  padding-bottom: 7px;
  margin: 27px 0 0;
}
.form-group label.control-label {
  font-size: 11px;
  line-height: 1.07142857;
  color: rgb(179, 182, 184);
  font-weight: 400;
  margin: 16px 0 0;
}
input {
  border: 0;
  background-image: linear-gradient(#3ea9f5,#3ea9f5),linear-gradient(#d2d2d2,#d2d2d2);
  background-size: 0 2px,100% 1px;
  background-repeat: no-repeat;
  background-position: center bottom,center calc(100% - 1px);
  background-color: rgba(0,0,0,0);
  transition: background 0s ease-out;
  float: none;
  box-shadow: none;
  border-radius: 0;
  font-weight: 400;
  height: 36px;
  padding: 7px 0;
  font-size: 14px;
  line-height: 1.42857143;
  display: block;
  width: 100%;
  color: #555;
}


.form-group.label-static label.control-label, .form-group.label-placeholder label.control-label, .form-group.label-floating label.control-label {
  position: absolute;
  pointer-events: none;
  transition: 0.3s ease all;
}
.form-group.label-floating label.control-label {
  will-change: left, top, contents;
}
.form-group.label-floating label.control-label, .form-group.label-placeholder label.control-label {
  top: -7px;
  font-size: 14px;
  line-height: 1.42857;
}
.form-group.label-static label.control-label, .form-group.label-floating.is-focused label.control-label, .form-group.label-floating:not(.is-empty) label.control-label {
  top: -28px;
  left: 0;
  font-size: 11px;
  line-height: 1.07143;
}
.form-group.label-floating input.form-control:-webkit-autofill ~ label.control-label label.control-label {
  top: -28px;
  left: 0;
  font-size: 11px;
  line-height: 1.07143;
}

.form-group.form-group-sm.label-floating label.control-label, .form-group.form-group-sm.label-placeholder label.control-label {
  top: -11px;
  font-size: 11px;
  line-height: 1.5;
}
.form-group.form-group-sm.label-static label.control-label, .form-group.form-group-sm.label-floating.is-focused label.control-label, .form-group.form-group-sm.label-floating:not(.is-empty) label.control-label {
  top: -25px;
  left: 0;
  font-size: 9px;
  line-height: 1.125;
}
.form-group.form-group-sm.label-floating input.form-control:-webkit-autofill ~ label.control-label label.control-label {
  top: -25px;
  left: 0;
  font-size: 9px;
  line-height: 1.125;
}

.form-group.form-group-lg.label-floating label.control-label, .form-group.form-group-lg.label-placeholder label.control-label {
  top: -5px;
  font-size: 18px;
  line-height: 1.33333;
}
.form-group.form-group-lg.label-static label.control-label, .form-group.form-group-lg.label-floating.is-focused label.control-label, .form-group.form-group-lg.label-floating:not(.is-empty) label.control-label {
  top: -32px;
  left: 0;
  font-size: 14px;
  line-height: 1.0;
}
.form-group.form-group-lg.label-floating input.form-control:-webkit-autofill ~ label.control-label label.control-label {
  top: -32px;
  left: 0;
  font-size: 14px;
  line-height: 1.0;
}

.form-group.is-focused .form-control {
  outline: none;
  background-image: linear-gradient(var(--themeColor), var(--themeColor)), linear-gradient(#D2D2D2, #D2D2D2);
  background-size: 100% 2px, 100% 1px;
  box-shadow: none;
  transition-duration: 0.3s;
}

.form-group.is-focused.form-info .form-control {
  background-image: linear-gradient(#00bcd4, #00bcd4), linear-gradient(#D2D2D2, #D2D2D2);
}
.form-group.is-focused.form-success .form-control {
  background-image: linear-gradient(#4caf50, #4caf50), linear-gradient(#D2D2D2, #D2D2D2);
}
.form-group.is-focused.form-warning .form-control {
  background-image: linear-gradient(#ff9800, #ff9800), linear-gradient(#D2D2D2, #D2D2D2);
}
.form-group.is-focused.form-danger .form-control {
  background-image: linear-gradient(#f44336, #f44336), linear-gradient(#D2D2D2, #D2D2D2);
}
.form-group.is-focused.form-rose .form-control {
  background-image: linear-gradient(#e91e63, #e91e63), linear-gradient(#D2D2D2, #D2D2D2);
}
.form-group.is-focused.form-white .form-control {
  background-image: linear-gradient(#FFFFFF, #FFFFFF), linear-gradient(#D2D2D2, #D2D2D2);
}
.form-group.is-focused.form-black .form-control {
  background-image: linear-gradient(#555555, #555555), linear-gradient(#D2D2D2, #D2D2D2);
}

.form-group.is-focused.label-placeholder label,
.form-group.is-focused.label-placeholder label.control-label {
  color: #AAAAAA;
}
.form-group.is-focused select.form-control {
  box-shadow: none;
  border-color: #D2D2D2;
}
select.form-control[multiple], .form-group.is-focused select.form-control[multiple] {
  height: 85px;
}

