/********************************************************* {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
  .detailsEditor
  .bx--modal
    .tagContainer
      background-color: rgba(61, 112, 178, .1)
      display: flex
      flex-wrap: wrap

      .tagContainer
        background-color: transparent

  .tagContainer
    > input
      flex: 1

    .tag.communityTag
      font-size: 12px
      height: 20px
      line-height: 20px

      button
        font-size: 12px
        margin-top: -4px
        vertical-align: top

      .tagLabel
        display: inline-block
        line-height: 20px
        vertical-align: top

    .communityTag
      margin-right: 10px

    .tag
      border-radius: 2px
      color: white
      font-size: small
      line-height: 15px
      padding: 5px 0 5px 10px

      &.favouriteTag
        background-color: rgb(252, 245, 202)
        color: black

      button.iconOnlyButton
        color: inherit

      img.deleteTag
        background-image: embedurl('../images/delete_tag.png')

    .tagChooser
      background: none
      border: 0 !important // @stylint ignore important
      box-shadow: none
      height: 31px
      margin: 0
      padding: 0
      width: 200px

    &.undeletable .deleteTagButton
      display: none

    .tagNode
      margin: 3px 6px 3px 0

      .iconNode
        display: none

      .deleteTagButton .iconOnlyButton .closeIcon
        background-image: none
        font-weight: bold
        height: auto
        width: auto

        &:before
          content: '\2715'

    &.tagDropdown
      padding: 10px

      .tagNode
        margin: 3px 0

      .deleteTagButton
        display: none

      .fixedWidthTag
        width: 150px

    .smallTag
      padding: 0 8px 0 5px

    .fixedTag
      height: 15px
      line-height: 15px
      padding: 5px

    .orgTag
      background-color: rgb(220, 234, 243)
      color: black

    .communityTag .tagNode .iconNode
      display: inline-block

  .filterColumn .tagContainer
    .fixedWidthTag
      width: 100%

    .layout
      apim-tag
        flex: 1

      .tagNode
        width: 100%

      input
        margin-right: 3px
        margin-top: 10px

  .compactTag .tagNode
    margin: 4px 2px 2px

    .closeIcon
      margin-left: -3px

    .deleteTagButton
      absolute: top 0 left 3px
      opacity: 0

    &:hover .deleteTagButton
      opacity: 1

    .tagLabel
      display: none

  .tagNode .tagLabel
    cursor: pointer
    vertical-align: middle

  .tagDialog
    .selectableTag
      cursor: pointer
      margin: 5px 0 10px
      min-width: 40px
      padding: 0 5px

      label
        cursor: pointer

      &:focus label
        outline: 1px dotted white !important // @stylint ignore important

    .title
      font-weight: bold
      padding: 5px 0

  .circleTag
    background-color: rgb(230, 233, 234)
    border-radius: 50%
    color: black
    font-weight: bold
    height: 12px
    line-height: 12px
    margin-top: 4px
    text-align: center
    vertical-align: top
    width: 12px

  .tag
    &.favourite
      background-color: rgb(252, 245, 202)

    &.untagged
      background-color: white
      color: black

  .resourceTagContainer
    ul
      margin: 0

    li
      width: 100%

      a
        box-sizing: border-box
        color: inherit
        display: inline-block
        padding: 1px 10px
        width: 100%

    .customTag
      padding: 6px 10px 0
      white-space: nowrap

    .scrollBox
      max-height: 100px
      overflow-x: visible
      overflow-y: auto
      padding: 1px 0

  .productTag
  .apiTag
  .tagContainer .fixedWidthTag
    border: 1px solid #CCC
    width: 90px
    word-wrap: break-word

  .compactTag .tagNode
    .productTag
    .apiTag
      padding: 0

  .redTag
  .tagContainer .tag.redTag
    background-color: red

  .blueTag
  .tagContainer .tag.blueTag
    background-color: blue

  .purpleTag
  .tagContainer .tag.purpleTag
    background-color: purple

  .greenTag
  .tagContainer .tag.greenTag
    background-color: green

  .navyTag
  .tagContainer .tag.navyTag
    background-color: navy

  .maroonTag
  .tagContainer .tag.maroonTag
    background-color: maroon

  .orangeTag
  .tagContainer .tag.orangeTag
    background-color: orange

  .magentaTag
  .tagContainer .tag.magentaTag
    background-color: magenta

  .circleTag.tag1
  .tagContainer .tag.tag1
    background-color: #8dcb36
    color: black

  .circleTag.tag2
  .tagContainer .tag.tag2
    background-color: #925ec2

  .circleTag.tag3
  .tagContainer .tag.tag3
    background-color: #ef5da0
    color: black

  .circleTag.tag4
  .tagContainer .tag.tag4
    background-color: #ffd426
    color: black

  .circleTag.tag5
  .tagContainer .tag.tag5
    background-color: #68b9f4
    color: black

  .circleTag.tag6
  .tagContainer .tag.tag6
    background-color: #7fdfee
    color: black

  .circleTag.tag7
  .tagContainer .tag.tag7
    background-color: #ffb794
    color: black

  .circleTag.tag8
  .tagContainer .tag.tag8
    background-color: #c6e59a
    color: black

  .circleTag.tag9
  .tagContainer .tag.tag9
    background-color: #c8aee0
    color: black

  .circleTag.tag10
  .tagContainer .tag.tag10
    background-color: #f7aecf
    color: black

  .circleTag.tag11
  .tagContainer .tag.tag11
    background-color: #ffe992
    color: black

  .circleTag.tag12
  .tagContainer .tag.tag12
    background-color: #b3dcf9
    color: black

  .circleTag.tag13
  .tagContainer .tag.tag13
    background-color: #ccf2f8
    color: black

  .circleTag.tag14
  .tagContainer .tag.tag14
    background-color: #ffe2d4
    color: black

  .circleTag.tag15
  .tagContainer .tag.tag15
    background-color: #e8f5d7
    color: black

  .circleTag.tag16
  .tagContainer .tag.tag16
    background-color: #e9dff3
    color: black

  .circleTag.tag17
  .tagContainer .tag.tag17
    background-color: #fcdfec
    color: black

  .circleTag.tag18
  .tagContainer .tag.tag18
    background-color: #fff6d4
    color: black

  .circleTag.tag19
  .tagContainer .tag.tag19
    background-color: #e1f1fd
    color: black

  .communityIcon
  .communityTag .iconNode
    margin: -2px 5px 0 0

  .resourceTagContainer li
    &:hover
    a:focus
      background-color: #e5f3fb

  .resourceTagContainer li a
    &:hover
    &:focus
      text-decoration: none

  .appLifecycleTag
    background-color: #80b723
    color: white
    margin-left: 10px
    padding: .5rem
    text-transform: uppercase
    vertical-align: middle

  .appLifecycle-development
    background-color: #ff8500

  .visibilityTags
    .tagContainer.publishContainer
      width: 100%

  apim-api-editor // @stylint ignore valid
    .bx--form__tagContainer
      width: 32em