.modal{
  transition: all 300ms;
  
  &:not(.alert){
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: auto;
    max-height: 90%;
    border: 2px solid var(--light-gray);
    border-radius: var(--bd-radius);
    background: #FFF;
    width: 90%;
    max-width: 767px;
    opacity: 0;
  }
  
  &.open{
    opacity: 1;
    z-index: 10;
  }

  &.alert{
    margin: var(--spacing) 0;
  }

  .modal-header{
    background: var(--light-gray);
    padding: var(--spacing);
    text-align: center;
    border-bottom: 2px solid var(--light-gray);
  }

  .modal-title{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0;
    margin: 0;

    span.alert-icon{
      background: url(../images/icons/exclamation-triangle-black.svg) no-repeat top center / auto 36px;
      height: 36px;
      margin-right: var(--spacing);
      width: 55px;
      display: inline-block;
      flex-shrink: 0;

      @media screen and (max-width: 767px) {
        display: none;
      }
    }
  }

  .modal-body{
    padding: var(--spacing);
    
    .alert &{
      padding: 0;
    }

    .generated-content{
      > p{
        padding-bottom: 0;
      }

      .alert &{
        border-color: #000;
        padding-bottom: var(--spacing-sm);
        text-align: left;

        p{
          padding-top: 0;
        }
      }
    }
  }

  .modal-footer{
    border-top: 2px solid var(--light-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing);

    .btn{
      border: 1px solid transparent;
      border-radius: var(--bd-radius);
      line-height: normal;
      padding: var(--spacing) var(--spacing-lg)!important;
      text-align: center;
      transition: all 300ms;

      &:hover,
      &:focus{
        background-color: var(--light-gray);
        border-color: #000;
        color: #000;
      }
    }
  }
}

.js-webform-states-hidden{
  transform: all 300ms;

  &:has(> .modal.open){
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(0,0,0,.7);
    z-index: 600;
  }
}

body,html{
  &:has(.js-webform-states-hidden > .modal.open){
    overflow: hidden;
  }
}

#page-content{
  &:has(.js-webform-states-hidden > .modal.open){
    z-index: 1;
  }
}