#modal-container {
  .modal-overlay {
    position: absolute;
    background: rgba($black, 0.3);
    width: 100%;
    top: 0;
    left: 0;
    bottom: 0;

    display: flex;
    align-items: center;

    .modal {
      position: relative;
      width: 90%;
      height: 90%;
      border: 1px solid $black;
      background-color: $white;
      margin-left: auto;
      margin-right: auto;

      .modal-header {
        position: relative;
        width: 100%;
        height: $popup-header-height;
        background: $neutral-400;
        border-bottom: 1px solid $neutral-600;
        display: flex;
        align-items: center;
        padding: 5px 5px 5px 15px;
      }

      .modal-content {
        position: absolute;
        top: $popup-header-height;
        right: 0;
        bottom: $popup-footer-height;
        left: 0;
        overflow-x: hidden;
        overflow-y: auto;
      }

      .modal-footer {
        position: absolute;
        width: 100%;
        height: $popup-footer-height;
        bottom: 0;
        background: $neutral-200;
        border-top: 1px solid $neutral-600;
        padding: 5px;
        display: flex;
        align-items: center;
      }
    }
  }
}
