/************* 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: "Arial Narrow", "Soho Gothic W01 Medium", "Open Sans Semibold", sans-serif !important; 
      font-weight: 600;
    }
    #wrapper > #content .font-bold {
      font-family: "Arial Narrow", "Soho Gothic W01 Bold", "Open Sans Bold", sans-serif !important;
      font-weight: 900;
    }
    #wrapper > #content .font-regular {
      font-family: "Arial Narrow", "Soho Gothic W01 Regular", "Open Sans", sans-serif !important;
      font-weight: 400;
    }
    #wrapper > #content .component.singlesignon-background {
      position: fixed;
      /*background-image: url(/assets/background-login-page.png); */
      background-color: #B9B9AD;
      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-bernafon svg .logo-rect {
        fill: #24405B; }
      #wrapper > #content .component.singlesignon-info-boxes .info-box {
        width: 40%;
        background-color: #F8F8F7;
        border: none; }
        #wrapper > #content .component.singlesignon-info-boxes .info-box input {
          margin-top: 0;
          font-family: "Arial Narrow", "Soho Gothic W01 Regular", "Open Sans", sans-serif; }
        #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) {
          padding: .6rem 0 1em;
          font-size: 0.8rem; }
      #wrapper > #content .component.singlesignon-info-boxes .alert.alert-danger {
        clear: both;
        color: #bd3737;
        padding-top: 1.3rem; }
      #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.7rem 1rem;
        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 #24405B; }
      #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: 1rem;
          border: 4px solid #24405B;
          color: #24405B !important;
          font-family: "Arial Narrow", "Soho Gothic W01 Regular", "Open Sans", sans-serif;
          font-weight: bold;
        }
        #wrapper > #content .component.singlesignon-info-boxes.global-login form button:hover {
          background-color: #24405B;
          color: #fff !important;
        }
        #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: #24405B;
            margin-bottom: 5px;
          }
          #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;
              color: #3344f6;
              font-size: 1rem;
              text-decoration: underline;
              font-weight: bold;
          }
          #wrapper > #content .component.singlesignon-info-boxes.global-login .info-box.login-box .link-container a.active, #wrapper > #content .component.singlesignon-info-boxes.reset-password-spot .info-box.login-box .link-container a.active, #wrapper > #content .component.singlesignon-info-boxes.set-password-spot .info-box.login-box .link-container a.active {
            color: #24405B;
            text-decoration: none;
            pointer-events: none;
          }
          #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: .2rem;
            float: none;
          }
          #wrapper > #content .component.singlesignon-info-boxes.global-login:not(.tandc) .info-box.login-box label, #wrapper > #content .component.singlesignon-info-boxes.reset-password-spot .info-box.login-box label, #wrapper > #content .component.singlesignon-info-boxes.set-password-spot .info-box.login-box label {
            display: block;
            margin-bottom: .5rem;
            font-size: 14px;
            visibility: hidden;
            text-indent: -9999px;
          }
          #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 #24405B; }
        #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: 1rem; }
        @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(36, 64, 91, 0.9) rgba(36, 64, 91, 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(36, 64, 91, 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: "Arial Narrow", "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; } }


#wrapper > #content .impersonateuser .component.singlesignon-info-boxes.global-login .info-box.login-box input {
    margin-bottom: 1.3rem;
}

#wrapper > #content .impersonateuser .component.singlesignon-info-boxes.global-login a {
    color: #3344f6;
    font-size: 1rem;
    text-decoration: underline;
    font-weight: bold;
}