.modal-content {
  
  @include box-shadow($modal-box-shadow);

  border: 0;
  
  .modal-header {

    padding: $margin-m;

    .close {
      opacity: 1;
      margin-top: -1px;
      margin-bottom: -2px;

      svg {
        fill: rgba($text-heading-color, 0.4);
      }

      &:active {
        svg {
          fill: $color-white;
        }
      }
    }

    .modal-title {
      line-height: $line-height-h4;
    }
  }

  .modal-body {
    padding: $margin-m;
    min-height: 178px; //300px total

    p:last-child {
      margin-bottom: 0;
    }
  }

  .modal-footer {
    padding: $margin-m;
    text-align: right;
  }
}

.modal-message {
  .modal-content {

    .modal-body {
      min-height: 0;
      font-size: 18px;
      text-align: center;
      padding-top: $margin-xl;
    }

    .modal-footer {
      text-align: center;
      padding: $margin-m $margin-m $margin-l;
      border-top: 0;
    }
  }
}

.modal-backdrop {
  background-color: $color-gray-85;

  &.in {
    opacity: .4;
  }
}

@media (min-width: 1100px) {
  .modal-xl {
    width: $modal-xl;
  }
}


// Remove sliding in from the fade animation
.modal.in .modal-dialog { 
  @include translate(0,0);
}

.modal-backdrop {
  background-color: transparent;
}

.modal:not(.modal-original):not(.modal-message) {
  
  &.fade {
    opacity: 1;
  }

  .modal-content {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .modal-body {
    overflow-y: auto;
  }

  .modal-footer {
    margin-top: auto;
  }

  //Slide in
  .modal-dialog {
    position: fixed;
    margin: auto;
    height: 100%;
    transform: translate3d(0%, 0, 0);
    transition: opacity .3s linear, right .3s ease-out;
    max-width: 95%;

    right: -1 * $modal-md;
    width: $modal-md;

    &.modal-xl {
      right: -1 * $modal-xl;
      width: $modal-xl;
    }

    &.modal-lg {
      right: -1 * $modal-lg;
      width: $modal-lg;
    }

    &.modal-sm {
      right: -1 * $modal-sm;
      width: $modal-sm;
    }
	}

  &.in {
    .modal-dialog {
      right: 0;

      &.modal-xl,
      &.modal-lg,
      &.modal-sm {
        right: 0;
      }
    }
  }

  .modal-dialog {
    

    
  }
}