body {
  font-family: 'Varela Round', sans-serif;
}

input, label, textarea {
  padding-top: 5px;
  border: none;
  font-family: 'Varela Round', sans-serif;
  width: 100%;
  line-height: 1.3;
}

input[type=checkbox], input[type=radio] {
  width: initial;
}

label {
  line-height: normal;
}

  textarea:focus, input:focus {
    outline: 0;
  }

  /* in */

  input.in, textarea.in {
    font-size: 24px;
    font-weight: 300;
    border-radius: 2px;
    margin: 0;
    border: none;
    background: rgba(0, 0, 0, 0);
    transition: padding-top 0.2s ease, margin-top 0.2s ease;
    overflow-x: hidden; /* Hack to make "rows" attribute apply in Firefox. */
  }

textarea.in {
  height: 65px;
}

textarea.in-bg {
  height: 125px;
  border-right: 1px solid #999;
  height:250px;
  border-bottom: 2px solid #97C7FC;
}

    /* Underline and Placeholder */
    input.in + div, textarea.in + div {
      display: block;
      position: relative;
      white-space: nowrap;
      padding: 0;
      margin: 0;
      /*border-top: 2px solid #FE5D54;*/
      border-top: 2px solid #FC9D97;
      -webkit-transition: width 0.4s ease;
      transition: width 0.4s ease;
      height: 0px;
    }

    input.in:focus, input.in:valid, input.in:disabled {
      padding-top: 18px;
    }

    textarea.in:valid, textarea.in:focus, textarea.in:disabled {
      margin-top: 18px;
    }

    input.in:focus + div > label, input.in:valid + div > label, input.in:disabled + div > label {
      top: -50px;
      font-size: 13px;
      color: #333;
    }

    textarea.in:focus + div > label, textarea.in:valid + div > label, textarea.in:disabled + div > label {
      top: -90px;
      font-size: 13px;
      color: #333;
    }

    textarea.in-bg:focus + div > label, textarea.in-bg:valid + div > label, textarea.in-bg:disabled + div > label {
      top: -150px;
    }


    /*textarea.in:valid + div > label {
  top: -85px;
} */

    input.in:valid + div, textarea.in:valid + div {
      /*border-color: #5FA8FE;*/
      border-color: #97C7FC;
    }

    input.in:disabled + div, textarea.in:disabled + div {
      /*border-color: #5FA8FE;*/
      border-color: #C9C9C9;
    }

    input.in:invalid, textarea.in:invalid {
      box-shadow: none;
    }

    input.in + div > label, textarea.in + div > label {
      font-weight: 300;
      margin: 0;
      position: absolute;
      color: #ccc9c9;
      font-size: 20px;
      top: -30px;
      left: 0px;
      z-index: -1;
      -webkit-transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
      transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
    }

    input.in:valid ~ input[type="submit"], textarea.in:valid ~ input[type="submit"] {
      -webkit-animation: appear 1s forwards;
      animation: appear 1s forwards;
    }

    input.in:invalid ~ input[type="submit"], textarea.in:invalid ~ input[type="submit"] {
      display: none;
    }


input.in-nl, input.in-nl:focus, input.in-nl:valid {
  padding-top: 4px;
}

label.inline {
  font-size: 13px;
  width: unset;
  padding-right: 5px;
}


span.value {
  color: #060C66;
  font-size: 1.2rem;
}

div.label {
  font-size: 13px;
  color: #333;
}

div.label label {
  margin-bottom: 0px;
}

td.btn-bottom {
  vertical-align: bottom;
  padding-bottom: 6px;
}

select.form-control, select.form-control-sm {
  border: none;
  border-bottom: 2px solid #97C7FC;
  font-size: 22px;
  padding: 2px 5px 0px 5px;
  color: #000;
  background: #F9FCFF;
}

  select.form-control option, select.form-control-sm option {
    font-size: 18px;
    color: #495057;
  }

select.form-control-sm {
  font-size: 15px;
  height: 25px!important;
}

@-webkit-keyframes appear {
  100% {
    opacity: 1;
  }
}

@keyframes appear {
  100% {
    opacity: 1;
  }
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: #060C66;
  transition: background-color 5000s ease-in-out 0s;
}

span.field-validation-error {
  color: #FE5D54;
}

div.validation-summary-errors > ul {
  list-style: none;
  color: #FE5D54;
}


input[type=checkbox] + label {
  display: inline;
}

input[type=checkbox] + input[type=hidden] + label {
  display: inline;
  padding-left: 5px;
}