/********************************************************* {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} **/
html, body
  margin: 0
  padding: 0
  size: 100%

body
  background: embedurl('../images/poly_background.svg', 'utf-8') no-repeat center
  background-blend-mode: color-burn
  background-color: #1d3649
  background-size: cover
  font-family: HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif
  font-size: 14px

$IEBG()
  body:before
    absolute: top right left bottom
    background-color: rgba(17, 32, 44, .7)
    content: ' '

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active)
  $IEBG()

@supports (-ms-ime-align:auto)
  $IEBG()

.page
  margin: 0
  padding: 0
  position: absolute
  size: 100%

h1
  color: rgba(255, 255, 255, .7)
  font-size: 32px

  margin-bottom: 30px

.bold
  font-weight: bold

.largerText
  font-size: 18px

.blue-box
  -webkit-transform: translateY(-50%)
  box-sizing: border-box
  color: rgba(255, 255, 255, .5)
  left: 50%
  margin-left: -160px
  position: relative
  top: 50%
  transform: translateY(-50%)
  width: 320px

  hr
    border-color: rgba(255, 255, 255, .5)

  hgroup
    margin-bottom: 20px

    h1
      margin-bottom: 0
  p
    line-height: 175%
    margin: 0
    padding: 15px 0 0
    text-align: justify

  a
    color: white
    text-decoration: underline

.callback-box
  -webkit-transform: translateY(-50%)
  background: rgba(236,  240,  242,  .35)
  margin: 0 50px
  position: relative
  top: 50%
  transform: translateY(-50%)
  width: calc(100% - 100px)

  .content-container
    margin: 0 100px
    padding: 10px 0
    position: relative

    .status
      text-transform: uppercase

      .failure
        color: #e71d32

      .success
        color: #41D6C3

    a
      color: #ECF0F2
      margin-top: 10px
      text-decoration: underline

      :hover
        color: white

.error-message
  color: orange
  text-align: center

.error-container
  margin-top: 20px
  min-height: 100px

.user-message
  margin-top: 20px
  min-height: 100px
  text-align: center

.error-box
  padding: 10px 0

.legacy
  .blue-box
    margin-top: -125px

  .inputContainer label
    color: rgba(255, 255, 255, 1.0)
    font-size: 12px
    top: -14px

.inputContainer
  margin-bottom: 30px
  position: relative

  label
    absolute: top 4px left
    color: rgba(255, 255, 255, 1.0)
    display: block
    transition: top .3s, color .3s
    width: 320px

  input
    background-color: transparent
    border-color: rgba(255, 255, 255, 1.0)
    border-style: solid
    border-width: 0 0 1px 0
    color: rgba(255, 255, 255, 1.0)
    font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif
    font-size: 14px
    margin-top: 15px
    outline: 0
    padding: 4px 0
    width: 100%

    &:focus
      border-color: #7cc7ff !important // @stylint ignore important

      & + label
        color: rgba(255, 255, 255, 1.0)

    &:valid label
      color: rgba(255, 255, 255, 0, 5)

    &:focus
    &:valid
      border-color: rgba(255, 255, 255, 1.0)
      color: rgba(255, 255, 255, 1.0)

      + label
        color: #7cc7ff
        font-size: 12px
        top: -14px

  &.md-input-has-value label
    color: rgba(255,  255,  255,  .5) !important // @stylint ignore important
    font-size: 12px
    margin-left: -5px
    margin-top: -18px
.md-input-focused label
  color: #7cc7ff !important // @stylint ignore important

.inputWrapper p
  color: rgba(255, 255, 255, 1.0)

button
  background-color: transparent
  border: 1px solid white
  color: white
  cursor: pointer
  font-family: Arial, Verdana, Helvetica, sans-serif
  font-size: 16px
  font-weight: bold
  padding: 10px
  transition: background-color .2s, color .2s
  width: 100%

  &:disabled
    background: #ccc
    border-color: #ccc
    color: #999
    cursor: not-allowed

  &.bluemix
    background: embedurl('../images/bluemix_logo_white.svg', 'utf-8') no-repeat 55px center
    background-size: 28px
    border-color: white
    color: white
    margin: 5px 0
    padding: 15px 15px 15px 45px

button
  &:hover:not(:disabled)
  &:focus
    background-color: white
    color: #1d3649

  &.bluemix
    &:hover
    &:focus
      background-color: white
      background-image: embedurl('../images/bluemix_logo.svg', 'utf-8')
      color: #1d3649

.modal-dialog
  margin: 10px
  position: relative
  width: auto

  button
    border: 1px solid #4b68fa
    color: #4b68fa
    width: auto

    &:hover:not(:disabled)
    &:focus
      background-color: #4b68fa
      color: white

.legal
  bottom: 0
  box-sizing: border-box
  color: rgba(255, 255, 255, .5)
  display: flex
  font-size: 8px
  justify-content: center
  left: 0
  padding: 16px 40px
  position: fixed
  width: 100%

  .legalBox
    display: flex
    justify-content: center
    width: 80%

  .legalText
    margin-right: 20px
    padding-top: 8px

  .javaLogo
    background-image: embedurl('../images/Java_Compatible_mono.png')
    background-repeat: no-repeat
    background-size: contain
    size: 28px 32px

.forgot
  font-size: 12px
  padding: 10px
  text-align: center

.boxout
  padding: 0 0 20px

.productName
  margin: 20px 0 30px

  h1
    margin: 0

.uiname
  color: white
  font-size: 16px

.redirectingSignInBox
  padding: 10px 0

.registerID
  padding: 20px 0

  a
    color: rgba(255, 255, 255, .8)

a
  color: rgba(255, 255, 255, .5)
  text-decoration: none

  &:visited
    color: rgba(255, 255, 255, .5)
    text-decoration: none

  &:hover
    color: rgba(255, 255, 255, 1.0)
    text-decoration: none

  &:focus
    color: rgba(255, 255, 255, 1.0)
    text-decoration: none

.modal-open
  overflow: hidden

  .modal
    overflow-x: hidden
    overflow-y: auto

.modal
  -webkit-overflow-scrolling: touch
  display: none
  fixed: top 0 right 0 bottom 0 left 0
  outline: 0
  overflow: hidden
  z-index: 1050

  &.fade .modal-dialog
    -webkit-transform: translate(0, -25%)
    transform: translate(0, -25%)
    transition: transform .3s ease-out

  &.in .modal-dialog
    -webkit-transform: translate(0, 0)
    transform: translate(0, 0)

.modal-content
  background-clip: padding-box
  background-color: #fff
  border: 1px solid rgba(0,  0,  0,  .2)
  border-radius: 6px
  box-shadow: 0 3px 9px rgba(0,  0,  0,  .5)
  outline: 0
  position: relative

.modal-backdrop
  background-color: #000
  fixed: top right bottom left
  z-index: 1040

  &.fade
    opacity: 0

  &.in
    opacity: .5

.modal-header
  border-bottom: 1px solid #e5e5e5
  min-height: 16.42857143px
  padding: 15px

  .close
    margin-top: -2px

.modal-title
  line-height: 1.42857143
  margin: 0

.modal-body
  padding: 15px
  position: relative

.modal-footer
  border-top: 1px solid #e5e5e5
  padding: 15px
  text-align: right

  .btn + .btn
    margin-bottom: 0
    margin-left: 5px

  .btn-group .btn + .btn
    margin-left: -1px

  .btn-block + .btn-block
    margin-left: 0

.modal-scrollbar-measure
  absolute: top -9999px
  overflow: scroll
  size: 50px

@media (min-width: 768px)
  .modal-dialog
    margin: 30px auto
    width: 600px

  .modal-content
    box-shadow: 0 5px 15px rgba(0,  0,  0,  .5)

  .modal-sm
    width: 300px

@media (min-width: 992px)
  .modal-lg
    width: 900px

@media all and (max-width: 400px)
  .white-box
    left: 0
    margin-left: 0
    width: 100%

.dedicatedTarget
  md-input-container
    margin-top: 15px
    size: 100% 20px

  input
    line-height: 20px

  #dedicated_cancel_button
    background-color: #DFE6EB
    border-color: #DFE6EB
    color: #1d3649
    width: 75px

    &:hover
      border-color: black
      color: black

  #dedicated_save_button
    width: calc(100% - 80px)

.login .linkButton
  background: none
  border: 0
  color: white
  cursor: pointer
  font: inherit
  padding: 0 !important // @stylint ignore important
  text-decoration: underline