.em-select > select{
  display: block;
  height: 100%;
}

a.em-carousel-arrow:hover {
  text-decoration: none;
}

a.em-button-default:hover {
  color: white;
}

hr {
  opacity: 1;
  border: 0;
  border-top: 1px solid #D1D3D4;
  height: 0;
}

/* Didn't want to universally override Materialize so use form-field-override on em-form-field */
.form-field-override input:not([type]):not(.browser-default),
.form-field-override input[type=text]:not(.browser-default),
.form-field-override input[type=password]:not(.browser-default),
.form-field-override input[type=email]:not(.browser-default),
.form-field-override input[type=tel]:not(.browser-default),
.form-field-override textarea:not(.browser-default) {
  height: auto;
  margin-bottom: 0;
}

.form-field-override .em-input-append > button.em-icon-eye-slash,
.form-field-override .em-input-append > button.em-icon-eye {
  background: transparent !important;
}

.form-field-override .em-field-label label {
  color: black;
}

.em-input-c input {
  height: auto !important;
}

.em-select select, option {
  color: var(--em-color-gray-700) !important;
}

/* Start of Ember Form Field Overrides */
.em-input-c > div > label {
    color: var(--color-gray-800) !important;
}
.em-field label {
  color: var(--color-gray-800) !important;
}

.em-input-c > div > input {
    font-size: inherit !important;
    margin: 0 !important;
    height:auto !important;
}

[type="checkbox"] + span:not(.lever) {
    font-size: inherit !important;
    color: inherit !important;
}

[type="tel"].invalid,[type="email"].invalid {
    border: 1px solid var(--color-error-100) !important;
}
/* End of Ember Form Field Overrides */