.modal {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1;

  .modal-header {
    background-color: #F1F4F9;
    flex-shrink: 0;
    margin: 3px 3px 0 0;
    padding: 8px;

    h2 {
      margin-bottom: 0;
    }
  }

  .modal-wrapper {
    margin: 50px auto;
    width: calc( 100% - 100px );
    max-height: calc( 100% - 100px );
    overflow: hidden;
    padding: 6px;
    background-color: $background-color;
    border: 1px solid #aaa;
    border-radius: 3px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column; //vertical
    align-items: stretch;
  }

  .modal-wrapper .scroll-y::-webkit-scrollbar-thumb{
    border: 2px solid $background-color;
  }

  .modal-main {
    background-color: white;
  }

  .modal-close {
    position: absolute;
    top: 58px;
    right: 58px;
  }
}