form {
    width: 100%;
  }
  
  .form-field {
    position: relative;
    border: 0;
    padding: 0;
  }
  
  .container {
    padding: 80px;
    display: flex;
    justify-content: space-around;
  }
  @media(max-width: 500px) {
    .container {
      padding: 0;
    }
  }
  .title {
    font-size: 1.7rem;
    color: #5f6988;
    font-weight: 300;
    border-bottom: 1px solid #dbe3ec;
    padding-bottom: 5px;
    margin: 0 0 40px 0;
  }
  
  .form-wrapper {
    width: 400px;
    box-shadow: 0 0 5px rgba(65, 67, 144, 0.1);
    padding: 40px;
    background: #d5e7ec;
  }  
  label {
    font-size: .9em;
    color: #5f6988;
    margin-bottom: 3px;
    display: block;
    font-weight: 300;
  }
  input[type="text"],  input[type="submit"],  input[type="password"], textarea, select {
    padding: 10px 13px;
    margin-bottom: 15px;
    width: -webkit-fill-available;
    width: -moz-available;
    border-radius: 2px;
    border: 1px solid #d4d9e3;
    font-weight: 200;
    color: #4d5060;
    font-family: 'Poppins', sans-serif;
    transition: all .3s ease-out;
    font-size: .9em;
    outline-color: transparent;
    outline-style: none;
  }
  input[type="ceckbox"] {
    border-radius: 2px;
    border: 1px solid #d4d9e3;
    font-weight: 200;
    color: #4d5060;
    font-family: 'Poppins', sans-serif;
    font-size: .9em;
    outline-color: transparent;
    outline-style: none;
  }
  
  select {
    -webkit-appearance: none;
  }
  
  select::after {
    content: "hello";
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    display: block;
    border-top: 20px solid #f00;
  }
  
  input[type="text"]::placeholder {
    color: #d4d9e3;
  }
  
  input[type="text"]:hover,
  input[type="password"]:hover,
  textarea:hover,
  select:hover {
    border-color: #5eb9d7;
    background: #d9f6ff;
  }
  
  input[type="text"]:focus,
  input[type="password"]:focus,
  textarea:focus {
    background: white;
    border-color: #5eb9d7;
    box-shadow: unset;
  }
  
  input[type="submit"],
  button {
    background: #5eb9d7;
    color: white;
    border-radius: 2px;
    margin-top: 15px;
    font-weight: 400;
    border: 1px solid #5eb9d7;
    line-height: 1;
    transition: all .3s ease-out;
  }
  
  input[type="submit"]:hover,
  button:hover {
    cursor: pointer;
    background: white;
    color: #5eb9d7;
  }
  input[type=checkbox] {
    vertical-align: middle;
    position: relative;
    bottom: 1px;
}
  .success-wrapper {
    background: white;
    width: 350px;
    box-shadow: 0 0 5px rgba(65, 67, 144, 0.1);
    padding: 50px;
  }
  
  .errors {
      list-style: none;
      margin: -15px 0 20px;
      font-size: .8em;
      text-align: left;
      width: -webkit-fill-available;
      width: -moz-available;
      background: #fae7ea;
      padding: 9px 15px;
      border-radius: 0 0 3px 3px;
      border-top: 0;
      border: 1px solid #e1c5c5;
      color: #8d7575;
      height: fit-content;
  }
  
  .error {
    margin-bottom: 5px;
  }
  
  .error:last-of-type {
    margin-bottom: 0;
  }
  
  i {
    height: 15px;
    color: #8d7575;
    margin-right: 5px;
    font-size: .9em;
  }
  
  .g-recaptcha div {
    margin: auto;
  }