/********************************************************* {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} **/
.webapi
  .mainBanner md-sidenav.md-whiteframe-z2
    border-right: 1px solid #E5E5E5
    box-shadow: none

  md-switch
    margin: 0

  .md-button
    margin: 0 2px
    text-transform: none

    button.md-default-theme.iconOnlyButton:not([disabled])
      &:hover,
      &:focus
        background: none

    &:not([disabled])
      &.md-focused
      &:hover
        background-color: rgba(17, 118, 201, .8)

      &.cancelButton
        &.md-focused,
        &:hover
          background-color: #ccd5d5

  &[disabled]
    background-color: #1176c9

  md-select
    padding: 0

  md-input-container md-select-label // @stylint ignore colons
    width: 100%

  md-option
    height: 24px

.apim
  .mainBanner md-sidenav

    .offlineMode&
      overflow: hidden !important // @stylint ignore important

    header
      background-color: #1d3649
      border-right: 1px solid rgba(255, 255, 255, .2)
      color: white
      height: 60px
      overflow: hidden
      padding: 0 13px 0 20px

    h5
      padding: 16px 18px

    .navHeader a
      width: 100%

    > section
      height:calc(100% - 61px)
      overflow-y: auto

  md-chip button:not(:disabled):hover
    background: transparent

  md-chips input[type='search'] // @stylint ignore colons
    background: none
    border: 0
    padding: 10px

  md-autocomplete
    input[type='search'] // @stylint ignore colons
      background: white
      border: 0
      padding: 6px 10px

    button
      display: none

  .md-select-value *:first-child
    max-width: 100%

  md-input-container
    margin-bottom: 0

    &.md-input-focused
      .md-input
        padding-bottom: 0

    .md-input
      padding-bottom: 1px

    .md-errors-spacer
      min-width: 0
    &.hiddenLabel
      margin-top: 0

    select
      width: 100%

    &.defaultPadding
      padding: 2px 5px 10px

    &.inlinePlaceholder
      padding-bottom: 3px

      &.md-icon-float.md-input-focused
        margin-top: -16px

      label
        display: none
        margin-left: 10px
        margin-top: 19px
        transform-origin: inherit
        transform: inherit
        transition: inheriit

      input
        line-height: normal
        margin-top: 19px
        max-height: 17px
        padding-top: 0

  md-toolbar
    background-color: inherit
    border-bottom: 1px solid #e5e5e5
    color: inherit
    min-height: inherit

    h2
      color: inherit

  md-toolbar-tools
    height: auto
    padding: 15px

  md-dialog
    md-dialog-content
      padding: 20px

    .md-actions .md-button
      margin: 0 2px

  .md-actions
    border-top: 1px solid #e5e5e5
    margin-top: 15px
    min-height: inherit
    padding: 19px 20px 20px

  md-radio-button
    margin: 0
    margin-right: 10px

  md-tabs md-ink-bar // @stylint ignore colons
    background: #90D2FC
    color: #90D2FC
    height: 4px

  md-menu-content label // @stylint ignore colons
    color: white
    margin-left: 5px

  md-switch
    margin: 0

    &.md-checked

      .md-thumb
        background-color: white

  .md-button
    text-transform: none

  md-whiteframe
    margin: 10px

  md-radio-group
    &.row md-radio-button
      display: inline-block

    &.horizontalRadioButtons md-radio-button
      display: inline

  label
    word-wrap: break-word

  .material-left-border
    border-color: rgba(0, 0, 0, .12)
    border-left: 1px solid

  md-checkbox.md-checked .md-icon:after
    display: block

  md-input-container
    .md-placeholder:not(.md-select-label)
    &:not(.md-input-focused) label:not(.md-no-float)
      color: #767676

    &:not(.md-input-invalid).md-input-focused label
    &.md-input-focused label:not(.md-no-float)
    &.md-input-has-value label:not(.md-no-float)
      font-size: 12px

    &.md-input-focused
    &.md-input-has-value
      label:not(.md-no-float)
        transform: translate3d(0, 8px, 0)
        -webkit-transform: translate3d(0, 8px, 0)

    &.clearPadding
      padding: 0

    md-select
    select
      margin: 2px 0
      order: 2


  md-input-container
  md-switch
    + md-input-container
      margin-left: 10px
      -ms-flex-negative: 1 // @stylint ignore valid

  .catalogEndpoint
    md-input-container
    md-switch
      + md-input-container
        margin-left: 0
        -ms-flex-negative: 1 // @stylint ignore valid

  .layout-column
    md-input-container
    md-switch
      + md-input-container
        padding-left: 0

  legend.radioButtonLabel
  md-input-container label // @stylint ignore colons
    border-bottom: none
    color: rgba(0, 0, 0, .54)
    font-size: 14px
    margin-bottom: 5px
    padding-left: 2px