html,
body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
}
.form-control {
        display: block;
        width: 100%;
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #212529;
        background-color: transparent;
        background-clip: padding-box;
        border: 0px solid #ced4da;
        border-bottom: 1px solid #ced4da;

        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border-radius: 0;
      }
      .form-floating>.form-control, .form-floating>.form-control-plaintext {
        padding: 1rem 0;
      }
      .form-floating>label {
        padding: 1rem 0;
      }
      .form-floating>.form-control-plaintext:focus, .form-floating>.form-control-plaintext:not(:placeholder-shown), .form-floating>.form-control:focus, .form-floating>.form-control:not(:placeholder-shown) {
        padding-top: 1.925rem;
        padding-bottom: 0.25rem;
      }
      .form-control:focus {
        color: #212529;
        background-color: transparent;
        border-color: #428855;
        outline: 0;
        box-shadow: none;
      }
      .form-floating>.form-control-plaintext~label, .form-floating>.form-control:focus~label, .form-floating>.form-control:not(:placeholder-shown)~label, .form-floating>.form-select~label {
        opacity: .65;
        transform: scale(.85) translateY(-0.5rem) translateX(0rem);
      }