/********************************************************* {COPYRIGHT-TOP} ***
* Licensed Materials - Property of IBM
* 5725-Z22, 5725-Z63, 5725-U33, 5725-Z63
*
* (C) Copyright IBM Corporation 2017
*
* All Rights Reserved.
* US Government Users Restricted Rights - Use, duplication or disclosure
* restricted by GSA ADP Schedule Contract with IBM Corp.
********************************************************** {COPYRIGHT-END} **/
.apim table.scrollableTable
  border: solid 1px #e0e0e0

  thead
  .thead
    display: table
    table-layout: fixed
    width: 100%

  tbody
    display: block
    max-height: 120px
    overflow-x: hidden
    overflow-y: scroll
    position: relative
    table-layout: fixed
    width: 100%

    tr
      &.selected
      &:hover
        background-color: #ECEFFF

  tr
    &
    &:hover
      border-color: #e0e0e0
      border-left: 0
      border-right: 0
      box-shadow: .0 .0 rgba(0, 0, 0, 0)
      display: table
      table-layout: fixed
      width: 100%

      td
        background-color: inherit

    td
      &
      &:hover
        background-color: inherit
        border-color: #e0e0e0
        box-shadow: .0 .0 rgba(0, 0, 0, 0)
        overflow: hidden

    th
      padding: 5px 10px

.tooltipContainer .tooltip
  display: inline-block
  font-size: 14px
  width: 300px

  // common bullseye styles
  .tooltip-arrow::after
    content: ' '
    display: block
    font-size: xx-large
    position: relative
    size: 75px

  .tooltip-inner
    max-width: none
    text-align: inherit

  // left-right specific styles for bullseye
  &.left .tooltip-arrow::after
    left: -30px
    top: -37px

  &.right
    margin-left: 20px

    .tooltip-arrow::after
      left: -45px
      top: -38px

  &.bottom
    margin-top: 40px

    .tooltip-arrow
      left: 42%

      &::after
        left: -40px
        top: -59px

    .tooltip-inner
      margin-left: 36px
      width: 200px

  &.bottomGentooltip
    margin-left: 36px
    margin-top: -31px !important // @stylint ignore important

.exploreMenu
  .exploreMenuItem
    cursor: pointer
    padding-bottom: 10px
    padding-left: 20px
    padding-top: 10px
    width: 400px

    li
      color: black
      cursor: pointer

    .dropdown-header
      padding-left: 20px

    :hover
      background-color: #f2f2f2
  hr
    margin-bottom: 7px
    margin-top: 0

// Getting started panel
.gettingStarted
  absolute: right 15px bottom 130px
  transition: all 1s ease
  width: calc(100% - 80%)

  &.ng-hide
    size: 0

  a
    &:hover
    &:focus
      text-decoration: underline

  .wraplist
    width: 100%

  md-bottom-sheet.md-list
    border: 1px solid #d8d8d8
    padding: 0
    transition: all 1s linear

    .md-subheader
      border-bottom: 1px solid #d8d8d8
      line-height: 20px

      .md-subheader-inner
        padding: 16px 15px

        .md-subheader-content
          align-items: center
          display: flex
          flex-direction: row

    md-list-item
      padding-left: 15px
      padding-right: 15px

      .material-icons
        font-size: 14px
        margin-right: 4px
        margin-top: 0
        vertical-align: middle

      .md-list-item-content
      .material-icons
        &:hover
          text-decoration: underline

      &.disabled
        cursor: not-allowed
        pointer-events: none

        .md-list-item-content
        .material-icons
          color: #888 !important // @stylint ignore important
          cursor: not-allowed

        > div
          cursor: not-allowed
          pointer-events: none

      &.completed
        // background-color: #ECEFFF

        .md-list-item-content
          color: #444 !important // @stylint ignore important

        .material-icons
          color: green !important // @stylint ignore important

      &:last-child
        border-bottom: none

  md-icon
    min-height: 0
    min-width: 0
    size: 14px

.gettingStartedMinimized
  absolute: right 50px bottom 75px
  opacity: 1
  size: 25px
  transition: all 1s linear

.gettingStartedMinimized.ng-hide
  opacity: 0

.noOverflow
  overflow: hidden

#sgTechPreviewTT
  vertical-align:baseline

.sg-copy-icon
  margin-top: 18px

.sg-gateways-column
  absolute: top 100px bottom 0 right 0 left 0
  background-color: white
  border-color: #e5e5e5
  border-style: solid
  border-width: 0 1px 0 0
  display: inline-block
  margin-left: 60px
  margin-top: -25px
  min-height: calc(100vh - 170px)
  overflow: auto
  vertical-align: top
  width: 280px

.sg-details-page
  background-color: white
  display: inline-block
  margin-left: 280px
  min-height: calc(100vh - 170px)
  vertical-align: top
  width: calc(100% - 280px)

.sg-hint
  cursor: pointer
  position: relative
  z-index: 2

  .sg-hint-text
    absolute: top 20px right 20px
    background-color: #f2f2f2
    border-radius: 3px
    box-shadow: 5px 5px 10px 0 #d8d8d8
    color: #000
    font-size: 15px
    line-height: 1.2
    min-height: 100px
    padding: 25px
    width: calc(100% - 500px)

  .sg-hint-text:after
    absolute: right 90px bottom 100px
    border-bottom: 15px solid #f2f2f2
    border-left: 15px solid transparent
    border-right: 15px solid transparent
    content: ' '
    size: 0

  p
    margin-top: 6px

  .sg-hint-subtext
    font-size: 14px

.sg-step-section
  overflow: auto
  padding: 20px 40px

ol.sg-steps
  list-style-type: decimal
  width: 100%

  li
    color: #4b68fa
    float: left
    font-size: x-large
    padding: 2px 0
    width: 33.33%

    span
      color: black
      display: block
      font-size: medium
      width: 90%
      word-wrap: break-word

.sg-docker-command-layout
  display: block
  padding-bottom: 20px

.sg-docker-install-command
  width: 90%

.sg-docker-update-command
  width: 40%

.sg-installer-table
  width: 80%

.sg-installer-platform-column
  width: 30%

.sg-installer-download-column
  width: 30%

.sg-installer-md5-column
  width: 20%

.sg-installer-size-column
  width: 10%

.sg-publish-api-column
  width: 30%

.sg-publish-url-column
  width: 40%

.sg-publish-securegateway-column
  width: 30%

  select
    width: 80%

.gettingStarted.secureGatewayTour
  width: calc(100% - 78%)

  md-list-item
    min-height: 0

    &:before
      min-height: 0

  .helpLink
    margin: 0
    padding: 0

    .material-icons
      font-size: 18px
      margin: 0
      text-align: right

  .wraplist
    display: flex

    .number
      text-align: center
      width: 5%

    .number.currentStep
      border-bottom: black solid 2px

    .step
      width: 90%

    .md-list-item-content
      color: inherit !important // @stylint ignore important
      width: 90%

      div
        float: left

    .helpLink
      width: 10%

  md-bottom-sheet.md-list md-list-item
    height: auto
    padding: 10px

  .sgTourDiagram img
    display: block
    margin-left: auto
    margin-right: auto
    width: 95%