@import "{design}/app.styl"

.imageViewerViewport
  width: 100%
  height: 100%
  background-color: black

  // Prevent the blue outline in Chrome when a viewport is selected
  outline: 0 !important

  // Prevents the entire page from getting larger
  // when the magnify tool is near the sides/corners of the page
  overflow: hidden
  
.viewportInstructions
  display: none
  font-size: 13px
  theme('color', '$textSecondaryColor')
  line-height: 18px
  pointer-events: none // Necessary for drag/drop through to cornerstone element below
  text-align: center
  position: absolute
  top: 0
  bottom: 0
  right: 0
  left: 0
  margin: auto
  height: 20px
  
/* These are some good CSS settings for a circular magnifying glass 
   Try removing the border-radius to make a square magnifying glass */
.magnifyTool
  border: 4px white solid
  box-shadow: 2px 2px 10px #1e1e1e
  border-radius: 50%
  display: none
  cursor: none