html {
  height: 100%;
  width: 100%;
  font-size: 10px;
}

body {
  height: 100%;
  width: 100%;
  background-color: #404040;
  background-image: url(/static/images/texture.png);
  user-select: none;
  margin: 0;
  overflow: hidden;
}

body,
input,
button,
select {
  outline: none;
}

#app {
  height: 100%;
}

/* .canvas-container,
.upper-canvas,
.lower-canvas {
  width: 100% !important;
  height: 100% !important;
} */

.viewer {
  width: 100% !important;
  height: 100% !important;
}

.viewer--teacher {
  display: flex;
  flex-direction: column;
  background-color: #404040;
  padding: 1em 0;
  overflow-y: auto;
}

.viewer--teacher img {
  margin: 1em auto;
  max-width: 20%;
  width: 100%;
  height: auto;
}

@page {
  margin: 0;
}

@media print {
  *, *::before, *::after {
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    border: none !important;
    outline: none !important;
    background-color: transparent !important;
    background-image: none !important;
  }

  body {
    position: relative !important;
    overflow: visible !important;
    display: block !important;
    background-color: white !important;
  }

  .MuiDialog-root {
    display: block !important;
  }

  .MuiDialog-container {
    height: 100% !important;
  }

  .MuiDialog-scrollPaper,
  .MuiDialog-paperScrollPaper {
    display: block !important;
  }

  .dialog-title,
  #modal,
  .header.header,
  .menu,
  .leftSidebar,
  .rightSidebar,
  .pager,
  .pagination,
  .bookmark-button,
  [class*="QuickDial-"] {
    display: none !important;
  }

  .annotationeer-wrapper,
  .annotationeer-content {
    display: block !important;
  }

  .viewer {
    display: none;
    position: fixed !important;
  }

  .print-mode--main .viewer--main,
  .print-mode--modal .viewer--modal,
  .print-mode--embedded .viewer--embedded,
  .print-mode--teacher .viewer--teacher {
    display: block !important;
    z-index: 99999;
  }

  .print-mode--main .viewer--main img,
  .print-mode--modal .viewer--modal img,
  .print-mode--embedded .viewer--embedded img,
  .print-mode--teacher .viewer--teacher img {
    display: block !important;

    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;

    border: 10px solid red !important;
  }

  /* .print-mode--embedded .viewer--embedded {
    overflow-y: visible;
  } */

  .print-mode--main .teacher-column-wrapper {
    display: none !important;
  }

  .print-mode--modal .teacher-column-wrapper {
    display: none !important;
  }

  .print-mode--embedded .teacher-column-wrapper {
    display: block !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .print-mode--embedded .teacher-column-wrapper .teacher-column-handle-wrapper {
    display: none !important;
  }

  .print-mode--embedded .__resizable_base__ {
    display: none !important;
  }

  .print-mode--main .viewer--main .page {
    display: none !important;
  }

  .print-mode--main .viewer--main .page.page--active {
    display: block !important;
    width: 100% !important;
  }

  .print-mode--teacher .viewer--teacher {
    overflow-y: visible;
    position: relative !important;
    page-break-inside: auto !important;
    padding: 0 !important;
  }

  .print-mode--teacher .viewer--teacher img {
    position: relative !important;
    display: block !important;
    page-break-after: always !important;
    page-break-inside: avoid !important;
    overflow: hidden !important;
    margin: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }

  .print-mode--modal .viewer-modal-wrapper,
  .print-mode--modal .viewer-modal-content {
    display: block !important;
  }
}