input::placeholder,
textarea::placeholder {
  color: #bbb;
  font-size: 1rem;
}

input[type='text'],
input[type='email'],
input[type='number'],
input[type='tel'],
input[type='password'] {
  height: 48px;
  border: 0;
  border-bottom: 1px solid #000;
  color: #000;
  background-color: #f7f7f7;
  padding-left: 12px;
}

input[type='text']:focus,
input[type='email']:focus,
input[type='number']:focus,
input[type='tel']:focus,
input[type='password']:focus {
  border-bottom: 2px solid #000;
  outline: none;
}

textarea {
  border: 0;
  border-bottom: 1px solid #000;
  color: #000;
  background-color: #f7f7f7;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 100%;
  font-size: 1rem;
  min-height: 6rem;
  resize: none;
}

textarea:focus {
  border-bottom: 2px solid #000;
  outline: none;
}

select {
  height: 48px;
  border: 0;
  border-bottom: 1px solid #000;
  background-color: #f7f7f7;
  padding-left: 12px;
}

select.placeholder,
select option[value=''] {
  color: #bbb;
}

select:not(.placeholder):focus {
  color: #000;
  border-bottom: 2px solid #000;
  outline: none;
}

select option:not([value='']) {
  color: #000;
}

.es-checkbox,
.es-radio {
  display: flex;
  align-items: center;
}

.es-checkbox > input[type='checkbox'],
.es-radio > input[type='radio'] {
  visibility: hidden;
  display: inline-block;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.es-checkbox > input[type='checkbox'] + label,
.es-radio > input[type='radio'] + label {
  display: inline-block;
  position: relative;
}

.es-checkbox > input[type='checkbox'] + label::before,
.es-radio > input[type='radio'] + label::before {
  font-family: 'Font Awesome 5 Free';
  position: absolute;
  font-size: 1.4rem;
  color: #000;
  left: -26px;
}

.es-checkbox > input[type='checkbox'] + label::before {
  content: '\f0c8';
}

.es-radio > input[type='radio'] + label::before {
  content: '\f111';
}

.es-checkbox > input[type='checkbox']:checked + label::before {
  content: '\f14a';
  font-weight: 900;
}

.es-radio > input[type='radio']:checked + label::before {
  content: '\f192';
  font-weight: 900;
}

.grid-x .cell.form-section-content .form.input:not([type='hidden']),
.grid-x .cell.form-section-content .form.select {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
}

.grid-x .cell.form-section-content .form.input:not([type='hidden']) > label:not(.error),
.grid-x .cell.form-section-content .form.select > label:not(.error) {
  display: flex;
  width: 100%;
  align-items: center;
}

.grid-x .cell.form-section-content label + select,
.grid-x .cell.form-section-content label + input[type='text'],
.grid-x .cell.form-section-content label + input[type='email'],
.grid-x .cell.form-section-content label + input[type='number'],
.grid-x .cell.form-section-content label + input[type='tel'],
.grid-x .cell.form-section-content label + input[type='password'],
.grid-x .cell.form-section-content label + div.input-group {
  width: 100%;
}

label.required-star::after {
  padding-left: 3px;
  content: '*';
}

label.error {
  display: block;
  margin-top: 5px;
  color: rgb(141, 8, 8);
}

.o.form small {
  display: block;
  margin-top: 5px;
  line-height: 1.5;
}

.input-group .medium-flex-child-auto:not(:first-child),
.input-group input[type='text']:not(:first-child) {
  margin-top: 0.5rem;
}

@media print, screen and (min-width: 40em) {
  .grid-x .cell.form-section-content .form.input:not([type='hidden']) > label:not(.error),
  .grid-x .cell.form-section-content .form.select > label:not(.error) {
    display: flex;
    width: 200px;
    align-items: center;
  }

  .grid-x .cell.form-section-content .o.form > label + select,
  .grid-x .cell.form-section-content .o.form > label + input[type='text'],
  .grid-x .cell.form-section-content .o.form > label + input[type='email'],
  .grid-x .cell.form-section-content .o.form > label + input[type='number'],
  .grid-x .cell.form-section-content .o.form > label + input[type='tel'],
  .grid-x .cell.form-section-content .o.form > label + input[type='password'],
  .grid-x .cell.form-section-content .o.form > label + div.input-group {
    width: calc(100% - 200px);
  }

  label.error,
  .o.form small {
    margin-left: 200px;
    width: calc(100% - 200px);
  }

  .medium-flex-child-auto label.error,
  .large-flex-child-auto label.error {
    width: 100%;
  }

  .form-group > .cell > label.error {
    margin-left: 0;
  }

  .input-group label.error {
    margin-left: 0px;
  }

  .input-group .medium-flex-child-auto:not(:first-child) {
    margin-top: 0;
    margin-left: 0.5rem;
  }

  .padding-200 {
    padding-left: 200px;
  }
}

@media print, screen and (min-width: 64em) {
}

form .form-group {
  margin-bottom: 0.6rem;
}

form .form-group label:not(.error) {
  line-height: 48px;
  vertical-align: middle;
}

form .form-group input:not([type='checkbox']):not([type='radio']),
form .form-group select {
  width: 100%;
}

.form-group .input-group + label.error {
  margin-left: 0;
}

.upload-files {
  display: flex;
  flex-wrap: wrap;
  height: auto;
}

.upload-files .quote-attachment {
  margin: 10px;
}

.upload-files .quote-attachment > img {
  display: block;
  width: 100px;
  height: 100px;
}

span.password-validation {
  color: #888;
  margin-right: 10px;
}

span.password-validation i.fa-check {
  color: #888;
}

span.password-validation.active {
  color: #000;
}

span.password-validation.active i.fa-check {
  color: #2a972a;
}