.va-alert {
  background-size: 1.5em;
  background-position: 1.25rem 2.2rem;
  color: $color-gray-dark !important;
  position: relative;

  &-title, h5 {
    // Duplicating this rule  and abusing !important until 
    // #content .section h5 gets cleared up.
    color: $color-gray-dark !important;
    padding-bottom: 0 !important;
  }

  p {
    margin: 0 !important;
    font: inherit;
    color: inherit;
  }
}

.va-alert-body {
  padding-left: 2.5rem;
  padding-right: 3.5rem;
}

.va-alert-close {
  background: transparent;
  color: $color-base;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 2rem;
  top: 1.75rem;
  width: auto;

  &:hover {
    background: transparent !important;
    color: lighten($color-gray-dark, 30%);
  }

  .fa {
    // Override fa font-size.
    font-size: 1.45em !important;
  }
}

.va-alert {
  color: $color-gray-dark !important;
  position: relative;

  &-title, h5 {
    // Duplicating this rule  and abusing !important until
    // #content .section h5 gets cleared up.
    color: $color-gray-dark !important;
    padding-bottom: 0 !important;
  }

  p {
    margin: 0 !important;
    font: inherit;
    color: inherit;
  }
}

.va-alert-body {
  padding-left: 2.5rem;
  padding-right: 3.5rem;
}

.va-alert-close {
  background: transparent;
  color: $color-base;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 2rem;
  top: 1.75rem;
  width: auto;

  &:hover {
    background: transparent !important;
    color: lighten($color-gray-dark, 30%);
  }

  .fa {
    // Override fa font-size.
    font-size: 1.45em !important;
  }
}

Remove background overrides for alerts
Remove background overrides for alerts
