@require '{ohif:design}/app'

html body
  theme('background-color', '$primaryBackgroundColor')
  font-family: 'Roboto', 'OpenSans', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif

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: 4px
    padding-right: 12px

  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', '$primaryBackgroundColor')
    theme('border-color', '$uiBorderColor')
    theme('color', '$textSecondaryColor')

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

  button.close
    theme('color', '$textSecondaryColor')
    opacity: 1
    overflow: hidden
    text-align: center
    text-shadow: none
    transition(color 0.3s ease)
    width: 20px

    span
      display: block
      line-height: 20px

    &:hover
      theme('color', '$textPrimaryColor')

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

.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