.app-modal {
  /* modal container fixed across whole screen */
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

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

  &.higher-order {
    z-index: 1000;
  }

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

  .app-modal-body {
    background-color: white;
    z-index: 999;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 3px;

    &.higher-order {
      z-index: 1000;
    }
  }
}

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

  /* semi-transparent black */
  background-color: #0f2942;
  opacity: 0.9;

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

  &.branch {
    background-color: #262b31;
  }
}

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

/* 
  ##Device = Big Desktops
*/
@media (min-width: 1281px) {
  .app-modal-body {
    width: 917px;
  }
}

/* 
  ##Device = Laptops, Desktops, Ipad pro
*/
@media (min-width: 1025px) and (max-width: 1280px) {
  .app-modal-body {
    width: 917px;
  }
}

/* 
  ##Device = Tablets, Ipads
*/
@media (min-width: 768px) and (max-width: 1024px) {
  .app-modal-body {
    width: 738px;
  }
}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
*/
@media (min-width: 481px) and (max-width: 767px) {
  .app-modal-body {
    width: 94%;
  }
}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
*/
@media (min-width: 320px) and (max-width: 480px) {
  .app-modal-body {
    width: 94%;
  }
}
