@require '{ohif:design}/app'

#cineDialog
  theme('background', '$uiGrayDarkest', 0.85)
  theme('color', '$textSecondaryColor')
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.85))
  border: none
  border-radius: 8px
  cursor: move
  padding: 0
  position: absolute
  z-index: 1000

  .button-close-container
    theme('background', '$uiGrayDarkest')
    border-radius(16px)
    cursor: pointer
    height: 32px
    position: absolute
    right: -8px
    top: -10px
    width: 32px

    .button-close
      left: 50%
      position: absolute
      top: 50%
      transform(translateX(-50%) translateY(-50%))

  h5
    font-size: 20px
    line-height: 35px
    margin: 0

  h5, label
    font-weight: 400

  .btn
    theme('color', '$textSecondaryColor')
    background-color: transparent

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

    &:active, &.active
      theme('color', '$activeColor')

    &[disabled]
      &:hover
        color: inherit
      &:active
        theme('color', '$textSecondaryColor')

  .cine-navigation, .cine-controls, .cine-options
    cursor: default

  .fps-section
    input[type="range"]
      background-color: transparent
      border: 0 none
      outline: 0 none

      &::-ms-tooltip
        display: none

  .double-row-style
    box-sizing: border-box
    width: 290px
    height: 80px
    padding: 10px
    top: 2%
    left: 35%

    .cine-navigation
      position: absolute
      right: 16px
      top: 10px

      .btn
        padding: 0 4px

        i
          font-size: 32px
          line-height: 32px

    .cine-controls
      left: 0px

    .cine-options
      padding: 0px 0

      .fps-section
        width: 175px
        float: left

      #fps
        float: right
        margin: 5px 20px 0 0


  .single-row-style
    box-sizing: content-box
    width: 425px
    height: 45px
    padding: 4px 8px
    top: 2%
    left: 35%

    .cine-navigation
      float: right
      overflow: hidden
      padding-right: 12px
      position: relative

      .btn
        padding: 0 2px
        margin: 0 0 0 2px
        border: 0 none
        &:first-of-type
          margin-left: 0

        i
          font-size: 32px
          line-height: 45px

    .cine-controls
      position: relative
      float: left
      overflow: hidden
      .btn
        font-size: 22px
        line-height: 45px
        min-width: 28px
        padding: 0 0px
        margin: 0 4px
        border: 0 none

    .cine-options
      display: block
      position: relative
      width: 150px
      float: left
      overflow: hidden
      padding: 0
      margin: 0 0 0 10px

      .fps-section
        display: block
        float: left
        width: 80px
        input[type="range"]
          line-height: 45px
          height: 45px

      #fps
        display: block
        width: 68px
        float: left
        padding: 0
        margin: 0 0 0 2px
        text-align: center
        line-height: 45px