$modal-overlay-color: rgba($primary, 0.9) !default;
$modal-horizontal-padding: 30px !default;
$modal-vertical-padding: 25px !default;
$modal-border-radius: 10px !default;
$modal-gray-background: #f6f7f9 !default;

.modal-backdrop {
  background-color: $modal-overlay-color;

  &.show {
    opacity: 1;
  }
}

.modal-header {
  border-bottom: none;
  padding: #{$modal-vertical-padding} #{$modal-horizontal-padding};
}

.close.close-modal{
  left: auto;
  opacity: 1;
  position: absolute;
  right: -35px;
  top: -35px;
  outline: none !important;
}

.close {
  outline: none !important;
}

.modal-body {
  padding: 0 #{$modal-horizontal-padding} #{$modal-vertical-padding};
}

.modal-title {
  color: #333;
  font-size: 18px;
  font-weight: normal;
  text-align: left;
  white-space: normal;
  word-break: break-word;
}

.modal-content {
  border-radius: $modal-border-radius;
  position: relative;
  .btn-primary {
    box-shadow: none !important;
    background-color: $btn-line-color;
    border: 1px solid $btn-line-color;
    &:hover {
      background-color: $btn-line-color;
      border-color: $btn-line-color;
    }
    &:focus,
    &:active {
      background-color: darken($btn-line-color, 10%) !important;
      border-color: darken($btn-line-color, 10%) !important;
    }
  }
}