@import '{ohif:viewerbase}/app'

html body
  theme('background-color', '$primaryBackgroundColor')
  font-family: 'Roboto', 'OpenSans', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif
  -webkit-backface-visibility: hidden // Prevent Chrome from shifting parent elements on transform
  font-family: Roboto

html body.stretch
  height: 100%
  min-width: 0
  overflow: hidden
  position: fixed
  width: 100%

html hr
  theme('border-top', '1px solid $uiBorderColor')

body .table > thead > tr > th
  theme('border-color', '$uiBorderColor')

body ol
  margin: 0
  padding-left: 1em

// This is needed for IE11 because svgxuse doesn't allow the browser to capture mouse events on SVG
svg, use
  pointer-events: none

input::-ms-clear
  display: none

label.form-group
  width: 100%

  &>span.select2
    display: block
    width: 100% !important

    span.select2-selection
      min-height: 34px

      span.select2-selection__rendered
          height: 34px
          line-height: 34px

      span.select2-selection__arrow
          height: 34px

.select-small+span.select2.select2-container span.select2-selection
  height: 20px

  span.select2-selection__rendered
    height: 20px
    line-height: 20px
    padding-left: 5px
    padding-right: 17px

  span.select2-selection__arrow
    height: 20px
    width: 12px

    &:after
      font-size: 12px
      height: 20px
      line-height: 20px
      width: 12px

.select2-container-nowrap

  .select2-dropdown
    display: table

    .select2-results__options li
      white-space: nowrap

body .select2-container--default .select2-results>.select2-results__options
  max-height: 320px

.center-table
  display: table
  margin-left: auto
  margin-right: auto

.height-auto
  height: auto !important

.caret-down
  display: inline-block
  width: 0
  height: 0
  margin-top: .5rem
  border-top: 5px solid
  border-right: 5px solid transparent
  border-left: 5px solid transparent

.noselect
  -webkit-touch-callout: none
  -webkit-user-select: none
  -khtml-user-select: none
  -moz-user-select: none
  -ms-user-select: none
  user-select: none

.btn
  transition(background-color 0.3s ease)

.modal-dialog
  .modal-content
    theme('background-color', '$uiGrayDarker')
    theme('border-color', '$uiBorderColor')
    theme('color', '$textSecondaryColor')
    border-radius(6px)
    border: 0

    .modal-header, .modal-footer
      theme('border-color', '$uiBorderColor')

    .dialog-separator,
    .dialog-separator-before,
    .dialog-separator-after
      position: relative

    .dialog-separator:before,
    .dialog-separator:after,
    .dialog-separator-before:before,
    .dialog-separator-after:after
      background-color: #000000
      box-shadow(-50px 0 0 #000000\, 50px 0 0 #000000)
      content: ' '
      display: block
      height: 3px
      left: 0
      position: absolute
      width: 100%

    .dialog-separator:before,
    .dialog-separator-before:before
      top: -3px

    .dialog-separator:after,
    .dialog-separator-after:after
      bottom: -3px

    .modal-body
      theme('color', '$textPrimaryColor')
      padding: 16px 22px 25px
      position: relative

    .modal-header
      border-bottom-width: 3px
      border-bottom-style: solid
      border-bottom-color: #000000
      padding: 19px 22px 17px
      position: relative

      h4
        theme('color', '$textSecondaryColor')
        font-size: 20px
        font-weight: 500
        line-height: 24px
        padding-right: 24px

    .modal-footer
      border-top: 0

  .card-round
    theme('background-color', '$uiGrayDark')
    border-radius(5px)
    padding: 10px

  .modal-header
    position: relative

  button.close
    position: absolute
    right: 21px
    top: 50%
    transform(translateY(-50%))
    transition(color 0.3s ease)

.button-close, .modal-dialog button.close
  theme('color', '$textSecondaryColor')
  height: 20px
  opacity: 1
  overflow: hidden
  padding: 2px
  text-align: center
  text-shadow: none
  width: 20px

  &:hover span
    &:before, &:after
      theme('background-color', '$textPrimaryColor')

  &:active span
    &:before, &:after
      theme('background-color', '$activeColor')

  span
    color: transparent
    display: block
    font-size: 0
    height: 100%
    line-height: 0
    overflow: hidden
    position: relative
    width: 100%

    &:before, &:after
      theme('background-color', '$textSecondaryColor')
      content: ' '
      display: block
      height: 2px
      transition(background-color 0.3s ease)
      width: 19px

    &:before
      left: 1px
      position: absolute
      top: 1px
      transform(rotate(45deg))
      transform-origin(1px 50%)

    &:after
      right: 1px
      position: absolute
      top: 1px
      transform(rotate(-45deg))
      transform-origin(calc(100% - 1px) 50%)

.full-width
  width: 100%

.full-height
  height: 100%

.flex-h
  display: flex
  flex-direction: row

.flex-v
  display: flex
  flex-direction: column

.flex-grow
  flex-grow: 1

.nowrap
  white-space: nowrap

.themed
  table
    theme('color', '$textPrimaryColor')

    th, td
      font-size: 15px
      font-weight: normal

    th
      line-height: 60px

    td
      line-height: 18px

  .btn
    border: 0
    border-radius(4px)
    font-size: 15px
    font-weight: normal
    height: 37px
    line-height: 37px
    padding: 0 12px

    &.btn-primary, &.btn-secondary
      color: #000000

      &:hover, &:active, &:focus, &:focus:active
        color: #000000

    &.btn-primary, &.btn-secondary, &.btn-danger
      transition(background-color 0.3s ease)

    &.btn-primary
      theme('background-color', '$activeColor')

      &:hover, &:active, &:focus, &:focus:active
        theme('background-color', '$activeColor', 0.8)

    &.btn-secondary
      theme('background-color', '$textSecondaryColor')

      &:hover, &:active, &:focus, &:focus:active
        theme('background-color', '$textSecondaryColor', 0.8)

    &.btn-danger
      theme('background-color', '$destructiveColor')
      theme('color', '$textPrimaryColor')

      &:hover, &:active, &:focus, &:focus:active
        theme('color', '$textPrimaryColor')
        theme('background-color', '$destructiveColor', 0.8)

    &.active
      box-shadow(inset 1px 1px 2px rgba(0, 0, 0, 0.5))

  .wrapperLabel .wrapperText
    theme('color', '$textPrimaryColor')
    font-size: 14px
    font-weight: bold
    line-height: 16px

    &:not(:empty)
      margin-bottom: 13px

  .nav-tabs
    border-bottom: 0
    margin-bottom: 3px
    position: relative
    z-index: 1

    &>li
      font-size: 14px
      font-weight: normal
      height: 40px
      line-height: 40px
      margin-bottom: 0

      &>a
        display: block
        width: 100%
        line-height: inherit
        margin: 0
        height: inherit
        padding: 0 10px 0 10px

        &:after
          background-color: transparent
          bottom: -3px
          content: ' '
          display: block
          height: 3px
          transition(background-color 0.3s ease)
          width: 100%

      &>a, &.active>a
        &, &:hover, &:active, &:focus
          theme('color', '$activeColor')
          background-color: transparent
          border: 0

      &.active>a
        font-weight: bold

        &:after
          theme('background-color', '$activeColor')