@import "{ohif:design}/app"

#viewer
  height: "calc(100% - %s)" % $topBarHeight

  &>.loadingTextDiv
    theme('color', '$textSecondaryColor')
    font-size: 30px
    height: 100%
    line-height: "calc(100% - %s)" % $topBarHeight

.viewerMain
  width: 100%
  height: 100%

  #layoutManagerTarget
    width: 100%
    height: 100%
    transition(all 0.3s ease)

    #imageViewerViewports
      .viewportContainer
        theme('border', '%s solid $uiBorderColorDark' % $viewportBorderThickness)
        float: left

        outline: 0 // Prevent blue outline in Chrome

        &:hover
        &.active
        &:hover.active
          outline: 0 // Prevent blue outline in Chrome

        &:hover
          theme('border', '%s solid $uiBorderColor' % $viewportBorderThickness)

        &.active, &:hover.active
          theme('border', '%s solid $uiBorderColorActive' % $viewportBorderThickness)

        .removable
          width: 100%
          height: 100%
          position: relative // Necessary so that the viewportOverlay is on top of the viewports