.alert-icon {
  display: flex;
  align-items: center;
  color: $alert-icon-color;
  padding: 15px 15px 15px 17px;
  width: 50px;
  min-height: 50px;
  font-size: 14px;
  text-align: center;
  align-self: stretch;
  flex-shrink: 0;
}

.alert-row {
  display: block;
  width: auto;
}

.alert-box {
  padding: 0px;
  display: inline-block;
}

.alert.alert-info,
.alert.alert-danger {
  padding: 0.5rem;
}

.success-icon {
  background: $color-success;
}

.error-icon {
  background: $color-danger;
}

.info-icon {
  background: $color-primary;
}

.alert-text {
  display: inline-block;
  padding: 0 12px 0 10px;
  align-self: center;
  // To make sure IE picks up the correct font
  font-family: $font-family-primary;
}

.alert-info {
  border-color: $color-primary;
  background-color: $color-primary-light;
  color : $color-fg;
  background-image: none;
}

.alert-danger {
  background-image: none;
}

.grid-error, .graph-error {
  .alert-row {
    align-items: center;
    height: 100%;
    display: flex;
    justify-content: center;
  }
}

.ajs-message {
  .media {
    display: block;
  }
}

.alert, .ajs-message {
  .media {
    .media-body {
      display: inline-block;
      width: auto;
      .alert-icon {
        display: inline-block;
      }
      .alert-text {
        display: inline-block;
      }
    }
  }
}

.pg-prop-status-bar {
  padding: 5px;

  .media-body {
    display: flex;
    width: auto;
  }

  .alert-icon {
    padding: 8px 8px 8px 10.5px;
    width: 35px;
    height: 35px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    min-height: auto;
  }

  .alert-text {
    -moz-user-select: text;
    -khtml-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
  }

  .error-in-footer {
    border-radius: $border-radius;
    border: 1px solid $color-danger-light;
    background: $color-danger-lighter;
  }

  .success-in-footer {
    border-radius: 5px;
    border: 1px solid transparent;

    .alert-text {
      border-color: $color-success-light;
    }
  }

  .info-in-footer {
    border: 1px solid $color-primary;
    border-radius: 4px;
    height: 35px;

    .alert-text {
      border: none;
    }
  }
}

//Internet Explorer specific CSS
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .styleguide {
    .alert-danger {
      width: auto;
    }

    .alert-info {
      width: auto;
    }
  }

  .alert-danger {
    width: 90%;
  }

  .alert-info {
    width: 90%;
  }
}

/* To align 'X' in alert on login page */
.alert-dismissable, .alert-dismissible {
  padding-right: 35px !important;
}

.alert-info-panel {
  border: 2px solid $color-gray-light;
  margin-top: 2em;
  padding: 5px 5px;
  background: $color-gray-lighter;
  border-radius: 5px;
  height: 8em;
  overflow: scroll;
}