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

  &.show {
    opacity: 1;
  }
}

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

.modal-header-group {
  display: inline-flex;
  margin: 0 auto;
}

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

  path {
    fill: #F6F7F9;
  }
}

.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;

  .centered {
    margin: 0 auto;
  }
}

.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;
    }
  }
}

.modal-fullwidth-xs {
  @include media-breakpoint-down(xs) {
    padding-right: 0 !important;

    .modal-dialog {
      max-width: initial;
      min-width: initial;
      margin: 0.5rem 0;
    }

    .modal-content {
      border-radius: 0;

      > div {
        border-radius: 0;
      }
    }

    .close.close-modal {
      right: 10px;
      top: 5px;

      path {
        fill: #a3a9b5;
      }
    }

    .modal-bottom-disclaimer {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
  }
}

@media (min-width: 576px) {
  .modal-dialog {
    max-width: 530px !important;
  }
}