/************* COMPONENT VARS *************/
/************* COMPONENT VARS END *************/
/*media query proposal - for refactoring 15-06-2016*/
/********************* global slider animations ******************/

body.singlesignon #footer {
  display: none; }

#wrapper > #content {
  /* CLOAKING */
  /* CLOAKING */
  /* FONT CLASSES */
  /* FONT CLASSES */ }
  #wrapper > #content .ng-cloak {
    display: none !important; }
  #wrapper > #content .font-medium {
    font-family: "Soho Gothic W01 Medium", "Open Sans Semibold", "Arial", sans-serif !important; }
  #wrapper > #content .font-bold {
    font-family: "Soho Gothic W01 Bold", "Open Sans Bold", "Arial", sans-serif !important; }
  #wrapper > #content .font-regular {
    font-family: "Soho Gothic W01 Regular", "Open Sans", "Arial", sans-serif !important; }
  #wrapper > #content .component.singlesignon-background {
      position: fixed;
      background-image: url(/assets/images/oticon-background.jpg);
      background-size: cover;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 0;
  }
  #wrapper > #content .component.singlesignon-title {
    position: relative;
    z-index: 1; }
    #wrapper > #content .component.singlesignon-title.global-login, #wrapper > #content .component.singlesignon-title.reset-password-spot, #wrapper > #content .component.singlesignon-title.set-password-spot {
      padding: 11rem 0 0;
      /* Small devices (tablets, 768px and up) */
      /* Large devices (large desktops, 1200px and up) */
      position: relative;
      width: 74rem;
      max-width: 90%;
      margin: 0 auto; }
      @media (min-width: 768px) {
        #wrapper > #content .component.singlesignon-title.global-login, #wrapper > #content .component.singlesignon-title.reset-password-spot, #wrapper > #content .component.singlesignon-title.set-password-spot {
          padding: 7rem 0 0; } }
      @media (min-width: 1200px) {
        #wrapper > #content .component.singlesignon-title.global-login, #wrapper > #content .component.singlesignon-title.reset-password-spot, #wrapper > #content .component.singlesignon-title.set-password-spot {
          padding: 4rem 0 0; } }
      #wrapper > #content .component.singlesignon-title.global-login .welcome-label, #wrapper > #content .component.singlesignon-title.reset-password-spot .welcome-label, #wrapper > #content .component.singlesignon-title.set-password-spot .welcome-label {
        text-align: center;
        margin: 0 auto;
        color: #F7F6F4;
        font-size: 2.55rem;
        width: 80%; }
#wrapper > #content .component.singlesignon-title.global-login .header-label, #wrapper > #content .component.singlesignon-title.reset-password-spot .header-label, #wrapper > #content .component.singlesignon-title.set-password-spot .header-label {
    text-align: center;
    margin: 0 auto;
    color: #F7F6F4;
    font-size: 2.55rem;
    width: 80%;
}
#wrapper > #content .component.singlesignon-title.global-login .sub-header-label, #wrapper > #content .component.singlesignon-title.reset-password-spot .sub-header-label, #wrapper > #content .component.singlesignon-title.set-password-spot .sub-header-label {
    text-align: center;
    margin: 0 auto;
    color: #F7F6F4;
    font-size: 2.0rem;
    width: 80%;
}
  #wrapper > #content .component.singlesignon-info-boxes {
    position: relative;
    z-index: 1;
    overflow: hidden; }
    #wrapper > #content .component.singlesignon-info-boxes .logo-svg svg .logo-rect {
      fill: #c6168d; }
    #wrapper > #content .component.singlesignon-info-boxes .info-box {
      width: 40%;
      background-color: rgba(247, 246, 244, 0.7);
      border: none; }
      #wrapper > #content .component.singlesignon-info-boxes .info-box input {
        margin-top: 0; }
      #wrapper > #content .component.singlesignon-info-boxes .info-box .info-box-header {
        border-bottom: 1px solid #7E7B78; }
      #wrapper > #content .component.singlesignon-info-boxes .info-box .info-box-subheader {
        margin-bottom: 0; }
      #wrapper > #content .component.singlesignon-info-boxes .info-box .info-box-content a:not(.button):not(.link),
      #wrapper > #content .component.singlesignon-info-boxes .info-box .info-box-content span {
        padding: .6rem 0 1em;
        font-size: 0.8rem; }
      #wrapper > #content .component.singlesignon-info-boxes .info-box .info-box-content .info-box-content-block {
        color: #3B3C3D;
        display: inline-block;
        margin-bottom: 0;
        vertical-align: middle;
        margin-right: 3px;
      }
      #wrapper > #content .component.singlesignon-info-boxes .info-box .info-box-content .info-box-content-block ~ a {
        font-family: "Soho Gothic W01 Regular", "Open Sans", "Arial", sans-serif;
      }
      #wrapper > #content .component.singlesignon-info-boxes .info-box .info-box-content .info-box-content-block ~ a.active {
        font-family: "Soho Gothic W01 Medium", "Open Sans", "Arial", sans-serif;
        font-size: 1rem;
      }
      #wrapper > #content .component.singlesignon-info-boxes .info-box .info-box-content .info-box-content-block ~ a.active:hover {
        font-family: "Soho Gothic W01 Medium", "Open Sans", "Arial", sans-serif;
        font-size: 1rem;
        color: #c6168d !important;
        cursor: auto;
      }
    #wrapper > #content .component.singlesignon-info-boxes .alert.alert-danger {
      clear: both;
      color: #c6168d;
      padding-top: 1.3rem; }
  
      #wrapper > #content .component.singlesignon-info-boxes .label-cont {
        position: relative;
      }
      #wrapper > #content .component.singlesignon-info-boxes .label-cont label {
        position: absolute;
        left: 0.375rem;
        top: 10px;
        transition: all 0.3s ease;
        color: #3B3C3D;
        pointer-events: none;
      }

      /* input placeholder colors */
      #wrapper > #content .component.singlesignon-info-boxes input:not([type=checkbox]):not([type=submit])::-webkit-input-placeholder {
        color: transparent;
      }
      #wrapper > #content .component.singlesignon-info-boxes input:not([type=checkbox]):not([type=submit])::-moz-placeholder {
        color: transparent;
      }
      #wrapper > #content .component.singlesignon-info-boxes input:not([type=checkbox]):not([type=submit]):-moz-placeholder {
        color: transparent;
      }
      #wrapper > #content .component.singlesignon-info-boxes input:not([type=checkbox]):not([type=submit]):-ms-input-placeholder {
        color: transparent !important;
      }

      #wrapper > #content .component.singlesignon-info-boxes .label-cont input:active + label,
      #wrapper > #content .component.singlesignon-info-boxes .label-cont input:focus + label,
      #wrapper > #content .component.singlesignon-info-boxes .label-cont input:-webkit-autofill + label {
        top: 0px;
        font-size: 0.70rem;
        opacity: 0.6;
      }

      #wrapper > #content .component.singlesignon-info-boxes .label-cont input.ng-valid + label {
        top: 0px;
        font-size: 0.70rem;
        opacity: 0.6;
      }

      #wrapper > #content .component.singlesignon-info-boxes input:not([type=checkbox]):not([type=submit]), 
      #wrapper > #content .component.singlesignon-info-boxes input[type=search],
      #wrapper > #content .component.singlesignon-info-boxes input[type=tel], 
      #wrapper > #content .component.singlesignon-info-boxes select, 
      #wrapper > #content .component.singlesignon-info-boxes textarea {
      border-radius: 0;
      padding: 0.85rem 0.375rem 0.35rem;
      border: thin solid #E3DFDB; 
    }
    #wrapper > #content .component.singlesignon-info-boxes form button[disabled], #wrapper > #content .component.singlesignon-info-boxes input[type="submit"][disabled] {
      opacity: 1;
      cursor: default; }
      #wrapper > #content .component.singlesignon-info-boxes form button[disabled]:hover, #wrapper > #content .component.singlesignon-info-boxes input[type="submit"][disabled]:hover {
        color: #3B3C3D !important;
        background-color: transparent; }
    #wrapper > #content .component.singlesignon-info-boxes.reset-password-spot .cssload-container, #wrapper > #content .component.singlesignon-info-boxes.set-password-spot .cssload-container {
      display: none; }
    #wrapper > #content .component.singlesignon-info-boxes.reset-password-spot input.error, #wrapper > #content .component.singlesignon-info-boxes.set-password-spot input.error {
      border: 2px solid #c6168d; }
    #wrapper > #content .component.singlesignon-info-boxes.global-login, #wrapper > #content .component.singlesignon-info-boxes.reset-password-spot, #wrapper > #content .component.singlesignon-info-boxes.set-password-spot {
      position: relative;
      width: 74rem;
      max-width: 90%;
      margin: 0 auto;
      margin-top: 2.1rem;
      /* Small devices (tablets, 768px and up) */
      /* Large devices (large desktops, 1200px and up) */ }
      #wrapper > #content .component.singlesignon-info-boxes.global-login .logo-svg, #wrapper > #content .component.singlesignon-info-boxes.reset-password-spot .logo-svg, #wrapper > #content .component.singlesignon-info-boxes.set-password-spot .logo-svg {
        padding: 0.8em 0 0; }
      #wrapper > #content .component.singlesignon-info-boxes.global-login .logo-svg svg, #wrapper > #content .component.singlesignon-info-boxes.reset-password-spot .logo-svg svg, #wrapper > #content .component.singlesignon-info-boxes.set-password-spot .logo-svg svg {
        width: 31%; }
      #wrapper > #content .component.singlesignon-info-boxes.global-login form button, #wrapper > #content .component.singlesignon-info-boxes.global-login input[type="submit"], #wrapper > #content .component.singlesignon-info-boxes.reset-password-spot form button, #wrapper > #content .component.singlesignon-info-boxes.reset-password-spot input[type="submit"], #wrapper > #content .component.singlesignon-info-boxes.set-password-spot form button, #wrapper > #content .component.singlesignon-info-boxes.set-password-spot input[type="submit"] {
        display: block;
        width: 100%;
        margin: 0 auto 1.5rem;
        padding: 0.7em;
        font-size: 0.9em; }
      #wrapper > #content .component.singlesignon-info-boxes.global-login .info-box.login-box, #wrapper > #content .component.singlesignon-info-boxes.reset-password-spot .info-box.login-box, #wrapper > #content .component.singlesignon-info-boxes.set-password-spot .info-box.login-box {
        margin: 0 auto;
        width: 80%; }
        #wrapper > #content .component.singlesignon-info-boxes.global-login .info-box.login-box .info-box-header, #wrapper > #content .component.singlesignon-info-boxes.reset-password-spot .info-box.login-box .info-box-header, #wrapper > #content .component.singlesignon-info-boxes.set-password-spot .info-box.login-box .info-box-header {
          text-align: center;
          border: none; }
          #wrapper > #content .component.singlesignon-info-boxes.global-login .info-box.login-box .info-box-header .logo-svg, #wrapper > #content .component.singlesignon-info-boxes.reset-password-spot .info-box.login-box .info-box-header .logo-svg, #wrapper > #content .component.singlesignon-info-boxes.set-password-spot .info-box.login-box .info-box-header .logo-svg {
            padding-bottom: 0; }
        #wrapper > #content .component.singlesignon-info-boxes.global-login .info-box.login-box .info-box-content, #wrapper > #content .component.singlesignon-info-boxes.reset-password-spot .info-box.login-box .info-box-content, #wrapper > #content .component.singlesignon-info-boxes.set-password-spot .info-box.login-box .info-box-content {
          margin: 2.2rem auto 0;
          text-align: center;
          width: 80%; }
        #wrapper > #content .component.singlesignon-info-boxes.global-login .info-box.login-box .link-container, #wrapper > #content .component.singlesignon-info-boxes.reset-password-spot .info-box.login-box .link-container, #wrapper > #content .component.singlesignon-info-boxes.set-password-spot .info-box.login-box .link-container {
        text-align: center;
        color: #c6168d; }
        #wrapper > #content .component.singlesignon-info-boxes.global-login .info-box.login-box .link-container a, #wrapper > #content .component.singlesignon-info-boxes.reset-password-spot .info-box.login-box .link-container a, #wrapper > #content .component.singlesignon-info-boxes.set-password-spot .info-box.login-box .link-container a {
          float: none;
          padding: 0;
          transition: color .3s ease;
        }
        #wrapper > #content .component.singlesignon-info-boxes.global-login .info-box.login-box .link-container a:hover, #wrapper > #content .component.singlesignon-info-boxes.reset-password-spot .info-box.login-box .link-container a:hover, #wrapper > #content .component.singlesignon-info-boxes.set-password-spot .info-box.login-box .link-container a:hover {
          color: #3B3C3D;
        }

        #wrapper > #content .component.singlesignon-info-boxes.global-login .info-box.login-box input, 
        #wrapper > #content .component.singlesignon-info-boxes.reset-password-spot .info-box.login-box input, 
        #wrapper > #content .component.singlesignon-info-boxes.set-password-spot .info-box.login-box input {
          margin-bottom: 1.3rem;
          float: none; 
        }

        #wrapper > #content .component.singlesignon-info-boxes.global-login .info-box.login-box input:-webkit-autofill, 
        #wrapper > #content .component.singlesignon-info-boxes.global-login .info-box.login-box input:-webkit-autofill:hover, 
        #wrapper > #content .component.singlesignon-info-boxes.global-login .info-box.login-box input:-webkit-autofill:focus, 
        #wrapper > #content .component.singlesignon-info-boxes.reset-password-spot .info-box.login-box input:-webkit-autofill, 
        #wrapper > #content .component.singlesignon-info-boxes.reset-password-spot .info-box.login-box input:-webkit-autofill:hover, 
        #wrapper > #content .component.singlesignon-info-boxes.reset-password-spot .info-box.login-box input:-webkit-autofill:focus, 
        #wrapper > #content .component.singlesignon-info-boxes.set-password-spot .info-box.login-box input:-webkit-autofill,
        #wrapper > #content .component.singlesignon-info-boxes.set-password-spot .info-box.login-box input:-webkit-autofill:hover,
        #wrapper > #content .component.singlesignon-info-boxes.set-password-spot .info-box.login-box input:-webkit-autofill:focus {
          box-shadow: 0 0 0px 1000px #fff inset;
        }

          #wrapper > #content .component.singlesignon-info-boxes.global-login .info-box.login-box input.required, #wrapper > #content .component.singlesignon-info-boxes.reset-password-spot .info-box.login-box input.required, #wrapper > #content .component.singlesignon-info-boxes.set-password-spot .info-box.login-box input.required {
            border: 2px solid #c6168d; }
      #wrapper > #content .component.singlesignon-info-boxes.global-login .alert.alert-danger, #wrapper > #content .component.singlesignon-info-boxes.reset-password-spot .alert.alert-danger, #wrapper > #content .component.singlesignon-info-boxes.set-password-spot .alert.alert-danger {
        padding-top: 0;
        margin-bottom: 1rem;
        text-align: left;
        font-size: 0.8rem; }
      @media (min-width: 768px) {
        #wrapper > #content .component.singlesignon-info-boxes.global-login, #wrapper > #content .component.singlesignon-info-boxes.reset-password-spot, #wrapper > #content .component.singlesignon-info-boxes.set-password-spot {
          /*                .singlesignon-inner-container {
                    padding: 7rem 0;
                }*/ }
          #wrapper > #content .component.singlesignon-info-boxes.global-login .info-box.login-box, #wrapper > #content .component.singlesignon-info-boxes.reset-password-spot .info-box.login-box, #wrapper > #content .component.singlesignon-info-boxes.set-password-spot .info-box.login-box {
            width: 50%; } }
      @media (min-width: 1200px) {
        #wrapper > #content .component.singlesignon-info-boxes.global-login, #wrapper > #content .component.singlesignon-info-boxes.reset-password-spot, #wrapper > #content .component.singlesignon-info-boxes.set-password-spot {
          /*                .singlesignon-inner-container {
                    padding: 4rem 0;
                }*/ }
          #wrapper > #content .component.singlesignon-info-boxes.global-login .info-box.login-box, #wrapper > #content .component.singlesignon-info-boxes.reset-password-spot .info-box.login-box, #wrapper > #content .component.singlesignon-info-boxes.set-password-spot .info-box.login-box {
            width: 40%; } }
      #wrapper > #content .component.singlesignon-info-boxes.global-login .cssload-container, #wrapper > #content .component.singlesignon-info-boxes.reset-password-spot .cssload-container, #wrapper > #content .component.singlesignon-info-boxes.set-password-spot .cssload-container {
        width: 100%;
        height: 24px;
        text-align: center;
        margin-bottom: 1rem; }
      #wrapper > #content .component.singlesignon-info-boxes.global-login .cssload-double-torus, #wrapper > #content .component.singlesignon-info-boxes.reset-password-spot .cssload-double-torus, #wrapper > #content .component.singlesignon-info-boxes.set-password-spot .cssload-double-torus {
        width: 24px;
        height: 24px;
        margin: 0 auto;
        border: 2px double;
        border-radius: 50%;
        border-color: transparent rgba(198, 22, 142, 0.9) rgba(198, 22, 142, 0.9);
        -webkit-animation: cssload-spin 960ms infinite linear;
        animation: cssload-spin 960ms infinite linear; }
        #wrapper > #content .component.singlesignon-info-boxes.global-login .cssload-double-torus .cssload-double-torus-arrow, #wrapper > #content .component.singlesignon-info-boxes.reset-password-spot .cssload-double-torus .cssload-double-torus-arrow, #wrapper > #content .component.singlesignon-info-boxes.set-password-spot .cssload-double-torus .cssload-double-torus-arrow {
          border-left: 5px solid rgba(198, 22, 142, 0.9);
          border-right: 5px solid transparent;
          border-top: 4px solid transparent;
          border-bottom: 4px solid transparent;
          width: 0;
          height: 0;
          position: relative;
          top: -4px;
          left: 1px;
          -webkit-transform: rotate(-45deg);
          -ms-transform: rotate(-45deg);
          transform: rotate(-45deg); }

@keyframes cssload-spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    transform: rotate(360deg); } }

@-webkit-keyframes cssload-spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }
    #wrapper > #content .component.singlesignon-info-boxes.reset-password-spot form button, #wrapper > #content .component.singlesignon-info-boxes.reset-password-spot input[type="submit"], #wrapper > #content .component.singlesignon-info-boxes.set-password-spot form button, #wrapper > #content .component.singlesignon-info-boxes.set-password-spot input[type="submit"] {
      margin-bottom: 1rem; }
    #wrapper > #content .component.singlesignon-info-boxes.reset-password-spot .info-box .info-box-header, #wrapper > #content .component.singlesignon-info-boxes.set-password-spot .info-box .info-box-header {
      width: 80%;
      margin: 0 auto; }
      #wrapper > #content .component.singlesignon-info-boxes.reset-password-spot .info-box .info-box-header > *, #wrapper > #content .component.singlesignon-info-boxes.set-password-spot .info-box .info-box-header > * {
        font-family: "Soho Gothic W01 Regular", "Open Sans", "Arial", sans-serif;
        line-height: 1.7; }
    #wrapper > #content .component.singlesignon-info-boxes.reset-password-spot .info-box .info-box-content a:not(.button):not(.link), #wrapper > #content .component.singlesignon-info-boxes.set-password-spot .info-box .info-box-content a:not(.button):not(.link) {
      font-size: 0.9em; }
    #wrapper > #content .component.singlesignon-info-boxes.reset-password-spot .logo, #wrapper > #content .component.singlesignon-info-boxes.set-password-spot .logo {
      margin-bottom: 1rem; }
    #wrapper > #content .component.singlesignon-info-boxes.reset-password-spot .alert.alert-danger, #wrapper > #content .component.singlesignon-info-boxes.set-password-spot .alert.alert-danger {
      display: none; }
    #wrapper > #content .component.singlesignon-info-boxes.full-login {
      /* INFO BOXES SPECIFIC */
      /* INFO BOXES SPECIFIC */
      /* MEDIA QUERIES */
      /* MEDIA QUERIES */ }
      #wrapper > #content .component.singlesignon-info-boxes.full-login .logo-svg {
        padding: 1.1em 0; }
      #wrapper > #content .component.singlesignon-info-boxes.full-login .logo-svg svg {
        height: 3em; }
      #wrapper > #content .component.singlesignon-info-boxes.full-login .logo-svg svg .logo-type {
        fill: white; }
      #wrapper > #content .component.singlesignon-info-boxes.full-login form button {
        float: left; }
      #wrapper > #content .component.singlesignon-info-boxes.full-login .info-boxes {
        margin-top: 7rem; }
      #wrapper > #content .component.singlesignon-info-boxes.full-login .info-box .info-box-content button + a:nth-of-type(1) {
        clear: none;
        float: right; }
      #wrapper > #content .component.singlesignon-info-boxes.full-login .info-box.login-box {
        float: left;
        width: 50%;
        background-color: rgba(247, 246, 244, 0.9);
        padding-bottom: 500rem;
        margin-bottom: -500rem; }
      #wrapper > #content .component.singlesignon-info-boxes.full-login .info-box.create-account-box {
        float: right;
        margin-bottom: 1rem; }
      #wrapper > #content .component.singlesignon-info-boxes.full-login .info-box.new-customer-box {
        float: right; }
      #wrapper > #content .component.singlesignon-info-boxes.full-login .info-box.login-box button {
        min-width: 10rem; }
      #wrapper > #content .component.singlesignon-info-boxes.full-login .info-box.create-account-box, #wrapper > #content .component.singlesignon-info-boxes.full-login #wrapper > #content .component .info-box.new-customer-box {
        padding-top: 1.1rem;
        position: relative; }
      #wrapper > #content .component.singlesignon-info-boxes.full-login .info-box.create-account-box h3, #wrapper > #content .component.singlesignon-info-boxes.full-login #wrapper > #content .component .info-box.new-customer-box h3 {
        font-size: 1rem; }
      #wrapper > #content .component.singlesignon-info-boxes.full-login .info-box.create-account-box p, #wrapper > #content .component.singlesignon-info-boxes.full-login #wrapper > #content .component .info-box.new-customer-box p {
        font-size: 0.8rem; }
      #wrapper > #content .component.singlesignon-info-boxes.full-login .info-box.create-account-box a.button {
        margin: 0;
        float: right; }
      #wrapper > #content .component.singlesignon-info-boxes.full-login .info-box.new-customer-box p {
        width: 60%; }
      #wrapper > #content .component.singlesignon-info-boxes.full-login .info-box.new-customer-box .button {
        position: absolute;
        right: 1.5rem;
        top: 3rem; }
      @media screen and (max-width: 1600px) {
        #wrapper > #content .component.singlesignon-info-boxes.full-login .info-boxes {
          margin-top: 6rem; } }
      @media screen and (max-width: 1500px) {
        #wrapper > #content .component.singlesignon-info-boxes.full-login .info-boxes {
          margin-top: 4rem; } }
      @media screen and (max-width: 1400px) {
        #wrapper > #content .component.singlesignon-info-boxes.full-login .info-boxes {
          margin-top: 2rem; } }
      @media screen and (max-width: 1300px) {
        #wrapper > #content .component.singlesignon-info-boxes.full-login .info-boxes {
          margin-top: 0; } }