a2j-modal {
  display: block;

  #pageModal[aria-hidden="false"] {
    &::after {
      content: "";
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: #000;
      opacity: 0.5;
    }
    .modal-dialog {
      z-index: 2;
    }
  }

  #pageModal {
    position: absolute;
    top: 5vh;
    max-height: 90vh;
    width: 100%;

    &.maximized {
      top: 0;
      max-height: 100vh;
      bottom: 0;
      left: 0;
      right: 0;
      .modal-dialog {
        margin: 0;
        width: 100%;
        transform: translateY(0px);
        height: 100%;
        .modal-content {
          height: 100%;
        }
        .modal-body {
          max-width: 7.5in;
          margin: auto;
          padding: 0;
          max-height: ~"calc(100% - 50px)";
          &.has-iframe {
            height: ~"calc(100% - 50px)";
          }
        }
      }
    }

    .modal-body {
      .has-textarea {
        overflow-y: hidden;
      }
      max-height: 80vh;
      overflow-y: auto;

      &.has-iframe {
        // Unfortunately the height needs to be set, otherwise the
        // iframe will only be the min-height set above.
        height: 80vh;
        overflow-y: hidden;
      }
    }

    .modal-body a {
      text-decoration: underline;
    }

    .modal-content {
      .modal-iframe {
        border: 0;
        height: 100%;
        width: 100%;
      }

      .modal-image {
        width: 100%;
        height: auto;
      }

      .modal-video {
        display: block;
        max-height: 60vh;
        margin: 0 auto;
        width: 100%;
      }

      .modal-audio-wrapper, .modal-video-wrapper, .modal-image-wrapper {
        margin-top: 40px;
      }

      .modal-video {
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);
      }

      .video-transcript-wrapper {
        margin-top: 10px;
        .btn {
          padding: 10px 0;
        }
      }
    }

    .modal-header {
      .close,
      .fullscreen {
        color: #fff;
        opacity: 0.7;

        &:focus, &:hover, &:active {
          opacity: 1;
          outline-color: #fff;

          @supports (-webkit-hyphens:none) { /* safari only */
            /* Safari doesn't allow you to change the focus outline color, we have to do this instead for a11y. */
            outline: none;
            box-shadow: 0 0 2px #fff,  0 0 2px #fff,  0 0 2px #fff,  0 0 2px #fff;
          }
        }
      }
    }

    a.zoom-button {
      position: relative;
      margin-top: -30px;
      margin-right: -4px;
    }
  }

  .fullscreen {
    position: absolute;
    right: 2.5em;
    top: 11px;
    background: none;
    border: none;
    padding: 0;
  }
  .screen-restore {
    font-size: 1.2em;
    display: none;
  }
  .maximized {
    .screen-full { display: none; }
    .screen-restore { display: inline-block; }
  }

  textarea {
    resize: none;
  }

  .glyphicon-resize-full:before {
    margin-top: 5px;
    font-size: 120%;
  }

  .expanded-textarea {
    resize: none;
    min-height: 30vh;
  }
}