/* MODAL STYLES
-------------------------------*/
modal {
  /* modals are hidden by default */
  display: none;

  .modal-load {
    /* modal container fixed across whole screen */

    padding: 17%;

    margin: 1;
    text-align: center;
    vertical-align: middle;

    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    /* z-index must be higher than .modal-background */
    z-index: 1000;

    /* enables scrolling for tall modals */
    overflow: auto;

    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 1s ease-in;
    transition: opacity 1ms ease-in;
    pointer-events: none;

    .modal-body {
      padding: 20px;
      background: #fff;

      /* margin exposes part of the modal background */
      margin: 40px;
    }
  }

  .modal-background {
    /* modal background fixed across whole screen */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    /* semi-transparent black  */
    background-color: #000;
    opacity: 0.75;

    /* z-index must be below .modal and above everything else  */
    z-index: 900;
  }
  .modal-background-error {
    /* modal background fixed across whole screen */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    /* semi-transparent black  */
    background-color: #000;
    opacity: 0.75;

    /* z-index must be below .modal and above everything else  */
    z-index: 900;
  }
}

body.modal-open {
  /* body overflow is hidden to hide main scrollbar when modal window is open */
  overflow: hidden;
}