ui-modal-header {
  display: table-row;
  &.ui-dark .ui-modal-header{
    background-color: $color-dark;
    border-color: $color-dark;
    color: #fff;
  }
  &.ui-primary .ui-modal-header{
    background-color: $color-primary;
    border-color: $color-primary;
    color: #fff;
  }
  &.ui-info .ui-modal-header{
    background-color: $color-info;
    border-color: $color-info;
    color: #fff;
  }
  &.ui-success .ui-modal-header{
    background-color: $color-success;
    border-color: $color-success;
    color: #fff;
  }
  &.ui-warning .ui-modal-header{
    background-color: $color-warning;
    border-color: $color-warning;
    color: #fff;
  }
  &.ui-danger .ui-modal-header {
    background-color: $color-danger;
    border-color: $color-danger;
    color: #fff;
  }
}

.ui-modal-header {
  display: table-cell;
  padding: $container-horizontal-padding + 5;
  min-height: 40px;
  border-bottom: 1px solid $color-light;
  font-size: 18px;
  background-color: #fff;
  color: $color-default;
  > .ui-close {
    transform: translateY(-5px);
  }
}