/********************************************************* {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
  .apiEditor
  .policyEditor
    top: 120px

  .productEditor .contentArea
  .apiEditor .contentArea
    top: 28px

  .detailsEditor
    .productSettingsExpander
    .productSettingsTitle
    .productSettingsApproval
    .productSettingsRateLimit
    .productSettingsDelete
      display: inline-block
      vertical-align: top

    .productSettingsRateLimit
      width: 100%

    .productSettingsExpander
      width: 32px

    .planApiDetails
      padding-right: 20px

    .productPlanEditor
      -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1)
      -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1)
      border-radius: 3px
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1)

      .rateLimitTitle
        display: none

      .apiOperation
        .rateLimitTitle
          display: inline-block

        .productAPIExpanderColumn
          width: 44px

    .productAPIActionsColumn
      display: inline-block
      padding-right: 46px
      width: 25px

    .productAPITitleColumn
      display: inline-block
      flex: 1
      line-height: 32px

    .productAPIExpanderColumn
      display: inline-block
      width: 22px

  apim-burst-limit
    min-width: 500px

    .rateLimitInterval
      flex: .6

  apim-rate-limit
    min-width: 500px

    .rateLimitInterval
      flex: .4

    .rateLimitHardLimit
      flex: .4
      line-height: 44px
      margin-left: 5px

  .apiOperation
    apim-rate-limit
    .rateLimitHardLimit
      line-height: 24px

  .productNameColumn
    float: left

  .card .productNameColumn
    max-width: 70%
    padding-left: 18px

  .productView
    padding: 0 20px

    .rateLimit
      width: 40%

  .productPlanEditor md-checkbox
    margin-bottom: 0

  .apiOperation
    border-bottom: 0
    display: flex
    padding: 5px 0

    .operationName
      flex: .6
      white-space: nowrap

    .rateLimit
      flex: .4

  .productPlans .operationName:before
    padding-left: 15px
    padding-right: 5px

  li:last-child apim-product-plan-api-editor .productApi
    border-bottom: 1px solid #E5E5E5

  .operationName
    width: 50%

  .showRateLimit
    .operationName
      display: inline-block
      overflow: hidden
      text-overflow: ellipsis
      vertical-align: middle
      white-space: nowrap
      width: 200px

    .productAPIRateLimitColumn
      flex: 2

  .productEditPane
    background-color: white
    padding: 20px

    select
      width: 100%

    label
      color: #BEBEBE
      display: block
      font-size: small
      font-weight: 500
      margin-bottom: 0
      margin-top: 10px

    .rateLimitHard
      flex: .4

    .productApi .headline
      display: flex

  h3 label // @stylint ignore colons
    font-size: 24px
    font-weight: 500
    line-height: 1.1

  .productTitle
    flex: .4
    padding-right: 5px

    input
      font-size: large

  .apisHeader
    display: flex

  .apisSection
    .apiTitleColumn
      flex: .3

    .apiVersionColumn
      flex: .15

    .apiOperationsColumn
      flex: .15

    .apiRateLimitColumn
      flex: .4

  .deployedApi
    &.running .deployedIndicator
      background-color: rgb(141, 201, 53)
      border: 0
      size: 10px

    &.stopped .deployedIndicator
      background-color: rgb(220, 220, 220)
      border: 0
      size: 10px

    &.suspended .deployedIndicator
      border: 3px solid rgb(220, 220, 220)
      size: 10px

  apim-burst-limit
  apim-rate-limit
    display: flex

    .rateLimitRequests
    .rateLimitCount
      flex: .2

  .detailsEditor
    .rateLimitRequests
    .rateLimitCount
    .rateLimitInterval
      display: inline-block
      margin: 0 5px 0 0

  .productLastModifiedColumn
  .productActionsColumn
    float: right
    margin-right: 18px

  .productContactEmail
  .productContactURL
  .productLicenseLink
    display: block

  .productApi
  .productPlan
    border-top: 1px solid #E5E5E5

    .headline
      padding: 5px 0

  .productPlans
    .productApi.apiNotIncluded .operationName:before
    .apiOperation.operationNotIncluded .operationName:before
    .productApi.apiNotIncluded .headline:before
      color: #BEBEBE
      content: ' \2717'

    .operationName:before
    .productApi .headline:before
      color: green
      content: ' \2713'

  .productApi.apiNotIncluded
    &
    a
      color: #BEBEBE

  li:first-child
    apim-product-api-editor .productApi
    .productPlan
      border-top: 0

  .operationName
  .rateLimit
    display: inline-block

  .productHeadline
    display: flex

  .productEditPane
    .rateLimit
    .productSubVis
      display: flex

  .productHeadline
  .productEditPane .productSubVis
    align-items: flex-end

  .productEditPane
    .visibility
    .subscribability
      flex: .5

    .rateLimitCalls
    .rateLimitInterval
      flex: .3

  .productName
  .productVersion
    flex: .3
    padding-left: 10px
    padding-right: 5px

  .deployedPlan .deployedIndicator
  .deployedProduct .deployedIndicator
  .environment .deployedIndicator
  .environmentDropdown .deployedIndicator
    background-color: rgb(240, 240, 240)
    border: 0
    border-radius: 50%
    size: 10px

  .deployedPlan.published .deployedIndicator
  .deployedPlan.running .deployedIndicator
  .deployedProduct.published .deployedIndicator
  .deployedProduct.running .deployedIndicator
  .environment.published .deployedIndicator
  .environment.running .deployedIndicator
  .environmentDropdown.published .deployedIndicator
    background-color: rgb(141, 201, 53)
    border: 0
    size: 10px

  .deployedPlan.deprecated .deployedIndicator
  .deployedProduct.deprecated .deployedIndicator
  .environment.deprecated .deployedIndicator
  .environment.stopped .deployedIndicator
  .environmentDropdown.deprecated .deployedIndicator
    background-color: inherit
    border: 3px solid rgb(141, 201, 53)
    size: 10px

  .deployedPlan.deployed .deployedIndicator
  .deployedPlan.staged .deployedIndicator
  .deployedProduct.deployed .deployedIndicator
  .deployedProduct.staged .deployedIndicator
  .environment.deployed .deployedIndicator
  .environment.staged .deployedIndicator
  .environmentDropdown.deployed .deployedIndicator
  .environmentDropdown.staged .deployedIndicator
    background-color: rgb(141, 201, 53)
    border: 1px solid rgb(141, 201, 53)
    size: 10px

  .deployedPlan.retired .deployedIndicator
  .deployedProduct.retired .deployedIndicator
  .environment.retired .deployedIndicator
  .environmentDropdown.retired .deployedIndicator
    background-color: inherit
    border: 3px solid rgb(220, 220, 220)
    size: 10px

  .deployedPlan.archived .deployedIndicator
  .deployedProduct.archived .deployedIndicator
  .environment.archived .deployedIndicator
  .environmentDropdown.archived .deployedIndicator
    background-color: inherit
    border: 3px solid rgb(240, 240, 240)
    size: 10px