.form-row {
  margin-top: 12px;
  margin-bottom: 12px;
}
.form-row:before,
.form-row:after {
  content: '';
  display: table;
}
.form-row:after {
  clear: both;
}
.form-row .form-col-1,
.form-row .form-col-2,
.form-row .form-col-3,
.form-row .form-col-4,
.form-row .form-col-5,
.form-row .form-col-6,
.form-row .form-col-7,
.form-row .form-col-8,
.form-row .form-col-9,
.form-row .form-col-10 {
  float: left;
  min-height: 1px;
  box-sizing: border-box;
}
.form-row .form-col-1 {
  width: 10%;
}
.form-row .form-col-2 {
  width: 20%;
}
.form-row .form-col-3 {
  width: 30%;
}
.form-row .form-col-4 {
  width: 40%;
}
.form-row .form-col-5 {
  width: 50%;
}
.form-row .form-col-6 {
  width: 60%;
}
.form-row .form-col-7 {
  width: 70%;
}
.form-row .form-col-8 {
  width: 80%;
}
.form-row .form-col-9 {
  width: 90%;
}
.form-row .form-col-10 {
  width: 100%;
}
form {
  display: block;
}
input[type=tel],
input[type=url],
input[type=text],
input[type=date],
input[type=week],
input[type=color],
input[type=email],
input[type=month],
input[type=search],
input[type=number],
input[type=password],
input[type=datetime-local],
select,
textarea {
  width: 200px;
  height: 34px;
  font-size: 14px;
  color: #333;
  line-height: 34px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  outline: none;
  vertical-align: middle;
  background-color: transparent;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0 0 0 8px transparent;
  -moz-box-shadow: 0 0 0 8px transparent;
  -ms-box-shadow: 0 0 0 8px transparent;
  box-shadow: 0 0 0 8px transparent;
}
input[type=tel]:focus,
input[type=url]:focus,
input[type=text]:focus,
input[type=date]:focus,
input[type=week]:focus,
input[type=color]:focus,
input[type=email]:focus,
input[type=month]:focus,
input[type=search]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=datetime-local]:focus,
select:focus,
textarea:focus {
  border-color: #4fc08d;
  -webkit-transition: border-color .2s, box-shadow .5s;
  -moz-transition: border-color .2s, box-shadow .5s;
  -ms-transition: border-color .2s, box-shadow .5s;
  transition: border-color .2s, box-shadow .5s;
  -webkit-box-shadow: 0 0 0 2px rgba(79, 192, 141, 0.4);
  -moz-box-shadow: 0 0 0 2px rgba(79, 192, 141, 0.4);
  -ms-box-shadow: 0 0 0 2px rgba(79, 192, 141, 0.4);
  box-shadow: 0 0 0 2px rgba(79, 192, 141, 0.4);
}
input[type=tel][disabled],
input[type=url][disabled],
input[type=text][disabled],
input[type=date][disabled],
input[type=week][disabled],
input[type=color][disabled],
input[type=email][disabled],
input[type=month][disabled],
input[type=search][disabled],
input[type=number][disabled],
input[type=password][disabled],
input[type=datetime-local][disabled],
select[disabled],
textarea[disabled],
input[type=tel][readonly],
input[type=url][readonly],
input[type=text][readonly],
input[type=date][readonly],
input[type=week][readonly],
input[type=color][readonly],
input[type=email][readonly],
input[type=month][readonly],
input[type=search][readonly],
input[type=number][readonly],
input[type=password][readonly],
input[type=datetime-local][readonly],
select[readonly],
textarea[readonly] {
  background-color: #fafafa;
}
input[type=tel][disabled],
input[type=url][disabled],
input[type=text][disabled],
input[type=date][disabled],
input[type=week][disabled],
input[type=color][disabled],
input[type=email][disabled],
input[type=month][disabled],
input[type=search][disabled],
input[type=number][disabled],
input[type=password][disabled],
input[type=datetime-local][disabled],
select[disabled],
textarea[disabled] {
  cursor: not-allowed;
}
input[type=tel],
input[type=url],
input[type=text],
input[type=date],
input[type=week],
input[type=color],
input[type=email],
input[type=month],
input[type=search],
input[type=number],
input[type=password],
input[type=datetime-local] {
  padding: 0 5px;
  -webkit-box-shadow: 0 0 0 8px transparent, 0 1px 3px rgba(0,0,0,.1) inset;
  -moz-box-shadow: 0 0 0 8px transparent, 0 1px 3px rgba(0,0,0,.1) inset;
  -ms-box-shadow: 0 0 0 8px transparent, 0 1px 3px rgba(0,0,0,.1) inset;
  box-shadow: 0 0 0 8px transparent, 0 1px 3px rgba(0,0,0,.1) inset;
}
select[multiple] {
  padding: 1px;
  height: 68px;
}
.radio {
  position: relative;
  display: inline-block;
  height: 34px;
  line-height: 34px;
  padding-right: 10px;
  color: #666;
  vertical-align: middle;
}
.radio input[type=radio] {
  position: absolute;
  top: 2px;
  left: 2px;
  margin: 0;
  filter: alpha(opacity=0);
  opacity: 0;
  cursor: pointer;
}
.radio input[type=radio]:checked ~ .radio-circle {
  border-width: 6px;
  border-color: #4fc08d;
}
.radio input[type=radio]:focus ~ .radio-circle {
  -webkit-transition: border-width .2s, box-shadow .5s;
  -moz-transition: border-width .2s, box-shadow .5s;
  -ms-transition: border-width .2s, box-shadow .5s;
  transition: border-width .2s, box-shadow .5s;
  -webkit-box-shadow: 0 0 0 2px rgba(79, 192, 141, 0.4);
  -moz-box-shadow: 0 0 0 2px rgba(79, 192, 141, 0.4);
  -ms-box-shadow: 0 0 0 2px rgba(79, 192, 141, 0.4);
  box-shadow: 0 0 0 2px rgba(79, 192, 141, 0.4);
}
.radio input[type=radio][disabled] ~ .radio-circle,
.radio input[type=radio][readonly] ~ .radio-circle {
  filter: alpha(opacity=50);
  opacity: 0.5;
  cursor: not-allowed;
}
.radio .radio-circle {
  display: inline-block;
  margin-top: -2px;
  width: 18px;
  height: 18px;
  vertical-align: middle;
  border: 2px solid #ccc;
  box-sizing: border-box;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-shadow: 0 0 0 8px transparent;
  -moz-box-shadow: 0 0 0 8px transparent;
  -ms-box-shadow: 0 0 0 8px transparent;
  box-shadow: 0 0 0 8px transparent;
  -webkit-transition: border-width cubic-bezier(0.215, 0.61, 0.355, 1) .1s, border-color .3s;
  -moz-transition: border-width cubic-bezier(0.215, 0.61, 0.355, 1) .1s, border-color .3s;
  -ms-transition: border-width cubic-bezier(0.215, 0.61, 0.355, 1) .1s, border-color .3s;
  transition: border-width cubic-bezier(0.215, 0.61, 0.355, 1) .1s, border-color .3s;
}
.radio:hover input[type=radio][disabled] ~ .radio-circle,
.radio:hover input[type=radio][readonly] ~ .radio-circle {
  border-color: #ccc;
}
.radio:hover input[type=radio] ~ .radio-circle {
  border-color: #4fc08d;
}
.form-label {
  display: inline-block;
  height: 34px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: right;
  line-height: 34px;
  vertical-align: middle;
  box-sizing: border-box;
  cursor: pointer;
}
.form-row .form-label {
  width: 100%;
}