/* ------ Client Side Form ------ */
.user-form {
    max-width: 800px;
    margin: 0 auto;
}
.user-form h1 {
    font-size: 2em;
    font-weight: bold;
}
.user-form p {
    font-size: 1.2em;
}
.user-form label {
    font-size: 1.2em;
}
.user-form .btn {
    font-size: 1.2em;
    font-weight: 500;
    line-height: 2.3em;
    width: 100%;
  }
.user-form .input-user {
    font-size: 1.2em;
    font-weight: 500;
    line-height: 1.5em;
    width: 100%;
}
.user-form .form-page {
    margin: 2em auto;
    border:#ddd 1px solid;
    padding: 1.1em;
    border-radius: 5px;
    position: relative;
}
/* Custom radio buttons */
.user-form .radio {
    margin: 0.5rem;
  }
.user-form .radio input[type=radio] {
position: absolute;
opacity: 0;
}
.user-form .radio input[type=radio] + .radio-label:before {
content: "";
background: #f4f4f4;
border-radius: 100%;
border: 1px solid #b4b4b4;
display: inline-block;
width: 1.4em;
height: 1.4em;
position: relative;
top: -0.2em;
margin-right: 1em;
vertical-align: top;
cursor: pointer;
text-align: center;
transition: all 250ms ease;
}
.user-form .radio input[type=radio]:checked + .radio-label:before {
background-color: #3197EE;
box-shadow: inset 0 0 0 4px #f4f4f4;
}
.user-form .radio input[type=radio]:focus + .radio-label:before {
outline: none;
border-color: #3197EE;
}
.user-form .radio input[type=radio]:disabled + .radio-label:before {
box-shadow: inset 0 0 0 4px #f4f4f4;
border-color: #b4b4b4;
background: #b4b4b4;
}
.user-form .radio input[type=radio] + .radio-label:empty:before {
margin-right: 0;
}

/* Custom checkbox */
.user-form input[type=checkbox].form-check-input {
    position: relative;
    width: 1.5em;
    height: 1.5em;
    color: #363839;
    border: 1px solid #bdc1c6;
    border-radius: 4px;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    outline: 0;
    cursor: pointer;
    transition: background 175ms cubic-bezier(0.1, 0.1, 0.25, 1);
    top: 4px;
  }
.user-form input[type=checkbox].form-check-input::before {
  position: absolute;
  content: "";
  display: block;
  top: 2px;
  left: 7px;
  width: 8px;
  height: 14px;
  border-style: solid;
  border-color: #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
}
.user-form input[type=checkbox].form-check-input:checked {
  color: #fff;
  border-color: #06842c;
  background: #06842c;
}
.user-form input[type=checkbox]:checked.form-check-input::before {
  opacity: 1;
}
.user-form input[type=checkbox]:checked.form-check-input ~ label::before {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.user-form label.form-check-label {
  position: relative;
  cursor: pointer;
  padding: 0 0.5em 0;
  line-height: 1em;
  -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

/* Form colors */
.user-form .form-page {
    background-color: #fff;
    color:#333;
    border-color:#ddd;
}
.btn-primary {
    background-color: rgba(19, 59, 93, 1);
    color: #eee;
}
.btn-primary:hover {
    background-color: rgba(19, 59, 93, 0.8);
    color: #eee;
}
/* textarea */
.text-area label {
  display: block;
}
.text-area textarea {
  max-width: 100%;
  height: 150px;
  padding: 8px;
  /* outline: 1px #6c757d solid; */
  border-radius: 5px;
  border: none;
  border: 1px rgb(208, 208, 208) solid;    
}