fieldset {

min-width: 0;
padding: 0;
margin: 0;
border: 0;

}

.form {

.btn.btn-form {
  text-shadow: 0 1px 0 #fff;
  color: #333;
  background: linear-gradient(#ccd0d6, #adb2bb);
  border: 1px solid #ccc;
  box-shadow: none;
  font-size: 12px;
  font-weight: 400;
  padding: 0;
  overflow: hidden;
  > span {
    display: inline-block;
    padding: 2px 10px;
    background: linear-gradient(#f7f8fa, #eff1f4);
  }
  &:hover {
    transform: none;
  }
  &:focus {
    @include focus-outline;
  }
}
a {
  margin-top: 7px;
  display: block;
  font-size: 12px;
}
.form-header {
  padding: 16px 20px;
  box-shadow: inset 0 -1px #e3e8ee;
}
.form-content {
  padding: 16px 20px;
}
.form-heading {
  color: #1a1f36;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
}
.form-heading-desc {
  color: #3c4257;
  font-size: 14px;
  line-height: 30px;
}
.field {
  margin-bottom: 15px;
  .label {
    vertical-align: top;
    display: inline-block;
    font-size: 14px;
    width: 160px;
    text-shadow: 0 1px 0 #fff;
    color: #555;
  }
  .control {
    display: inline-block;
  }
}
.form-footer {
  text-align: right;
  padding: 16px 20px;
  box-shadow: inset 0 1px #e3e8ee;
}
.hint {
  margin: 7px 0;
}

}

.required {

&:after {
  display: inline-block;
  margin-left: 4px;
  content: '*';
  color: #6772e5;
  font-size: 16px;
  transform: translateY(-2px);
}

}

.form-inline {

display: flex;
align-items: center;
flex-flow: row wrap;
.form-group {
  margin-bottom: 0;
}

}

.hint {

font-size: 13px;
display: block;
color: #5469d4;

}

.hint.hint-danger {

color: #e03953;
&:before {
  font-family: $beyond-icon-font-name;
  margin-right: 4px;
  display: inline-block;
  transform: translateY(1px);
  color: #e03953;
  @extend .icon-exclamation-triangle:before
}

}

.form.form-vertical {

.field .label {
  color: #1a1f36;
  display: block;
}

}

.form-group {

margin-bottom: 1rem;

}

label {

display: inline-block;
margin-bottom: .5rem;

}

.col .form-control,

class*=col-

.form-control {

width: 100%;

}

.form-control {

@extend %form-control;
&::placeholder {
  color: #a9aebf;
}
padding: 5px 7px 6px;
background-color: #fff;
background-clip: padding-box;
border-radius: 4px;
box-shadow: 0 0 0 1px rgba(60, 66, 87, .16),
  0 1px 1px 0 rgba(0, 0, 0, .12);
transition: box-shadow .15s ease-in-out;

&:focus {
  @include focus-outline;
}

}

.form-control-plaintext {

@extend %form-control;
height: 100%;
padding: 6px 0;
background-color: transparent;

}

.col-form-label-lg {

padding-top: calc(.5rem + 1px);
padding-bottom: calc(.5rem + 1px);
font-size: 1.25rem;
line-height: 1.5;

} .col-form-label {

padding-top: calc(.375rem + 1px);
padding-bottom: calc(.375rem + 1px);
margin-bottom: 0;
font-size: inherit;
line-height: 1.5;

} .col-form-label-sm {

padding-top: calc(.25rem + 1px);
padding-bottom: calc(.25rem + 1px);
font-size: .875rem;
line-height: 1.5;

} .col-form-field {

display: flex;
align-items: center;
.form-check {
  transform: translateY(-2px);
  margin-bottom: 0;
}

}

.form-control-lg {

padding: .5rem 1rem;
font-size: 1.25rem;
line-height: 1.5;
border-radius: .3rem;

}

.form-control-sm {

padding: .25rem .5rem;
font-size: .875rem;
line-height: 1.5;
border-radius: .2rem;

}

.form-control, .form-control-lg, .form-control-sm, .form-control-plaintext {

&.is-valid {
  box-shadow: 0 0 0 1px $txt-color-success;
}
&.is-invalid {
  box-shadow: 0 0 0 1px $txt-color-danger;
}
&:disabled {
  cursor: not-allowed;
}
&:disabled,
&[readonly] {
  color: #111;
  background-color: #e9ecef;
}

} .form-control-plaintext {

&[readonly] {
  background: transparent;
}

}

.valid-feedback, .invalid-feedback {

font-size: 80%;
margin-top: .35rem;
&:before {
  font-family: $beyond-icon-font-name;
  display: inline-block;
  margin-right: 4px;
  transform: translateY(1px);
}

}

.valid-feedback {

color: $txt-color-success;
&:before {
  color: $txt-color-success;
  @extend .icon-check:before;
}

}

.invalid-feedback {

color: $txt-color-danger;
&:before {
  color: $txt-color-danger;
  @extend .icon-exclamation-triangle:before;
}

}

.form-txt {

display: block;
margin-top: .25rem;

}

.form-check-label {

margin-bottom: 0;

}

.form-check.form-check-inline {

display: inline-flex;
align-items: center;
padding-left: 0;
margin-right: .75rem;

.checkbox,
.radio {
  transform: translateY(0);
}
.checkbox + span,
.radio + span {
  position: relative;
  margin-left: 7px;
}

}

.form-check {

margin-bottom: 1rem;
display: block;
padding: 6px 0;
cursor: pointer;
margin-right: 25px;
vertical-align: middle;
color: #3c4257;
font-size: 14px;
.checkbox + span,
.radio + span {
  position: relative;
  margin-left: 4px;
}
.checkbox .icon-checkbox {
  transform: translateY(-1px);
}
&.disabled {
  color: #6c757d;
  cursor: not-allowed;
  .checkbox {
    @extend %checkbox-disabled;
  }
  .radio {
    @extend %radio-disabled;
  }
}
span.is-valid {
  color: $txt-color-success;
}
span.is-invalid {
  color: $txt-color-danger;
}

}

.form-row {

@extend %row;
margin-left: -5px;
margin-right: -5px;

} .form-row > .col, .form-row > [class*=col-] {

padding-left: 5px;
padding-right: 15px;

}

.form-control-file {

display: block;
width: 100%;

}

input {

line-height: 1;

}

.input-group {

position: relative;
display: flex;
flex-wrap: wrap;
align-items: stretch;
width: 100%;
> .form-control {
  flex: 1 1 0%;
}
.invalid-feedback {
  flex-basis: 100%;
}

}

.input-group-text {

display: flex;
align-items: center;
padding: .25rem .75rem;
margin-bottom: 0;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
text-align: center;
white-space: nowrap;
background-color: #e9ecef;
border: 0;
box-shadow: 0 0 0 1px rgba(60, 66, 87, .16),
  0 1px 1px 0 rgba(0, 0, 0, .12);
border-radius: .25rem;

}

.input-group-prepend {

margin-right: -1px;

} .input-group-append {

margin-left: -1px;

}

.input-group > .form-control:not(:last-child) {

border-top-right-radius: 0;
border-bottom-right-radius: 0;
z-index: 1;

} .input-group > .form-control:not(:first-child) {

border-top-left-radius: 0;
border-bottom-left-radius: 0;

}

@media (min-width: $screen-sm) {

.form-inline {
  .form-control {
    width: auto;
  }
  .input-group {
    width: auto;
  }
  .form-group {
    display: flex;
    flex: 0 0 auto;
    flex-flow: row wrap;
    align-items: center;
    margin-bottom: 0;
  }
  label {
    margin-bottom: 0;
  }
}

}