body {
    background: #0A2A3D;
    font-size: 16px;
    font-family: "vaisalasans", "Arial";
    -webkit-font-smoothing: antialiased;
  }
  
  .sansProFont {
      font-family: "Source Sans Pro", "Source Sans Pro", Sans-serif;
  }
  
  .click2Edit {
      cursor: pointer;
      height: 26px;
      box-sizing: border-box;
  }
  
  .click2Edit:hover {
      cursor: pointer;
      border: 1px #d9d9d9 solid;
      border-radius: 3px;
      padding: 0px 15px;
  
  }
  
  .click2Edit[data-readmode="0"] {
      display: none;
  }
  .click2Edit span {
      padding: 0px 0px;
  }
  
  #inputCompanyEdit {
      display: inline;
  }
  #inputCompanyEdit[data-readmode="1"] {
      display: none;
  }
  
  .header {
      text-align: left;
      background-color: #0A2A3D;
      width: 100%;
  }
  
  .selfRegLogo {
      text-align: left;
      background-color: #0A2A3D;
      max-width: 800px;
  }
  
  .selfRegLogo .logo {
      text-align: left;
  }
  .selfRegLogo .logo img {
      width: 250px;
      height: 125px;
  }
  /* logo */
  .logo {
      margin-top: auto;
      padding: 0 0;
      text-align: center;
      letter-spacing: 2px;
  }
  .logo img {
      width: 150px;
      height: 112px;
  }
  .inputErrorMessage {
      color:#FF0000;
      font-size:.9em;
  }
  .pageFrameContainer {
      position: fixed;
      bottom: 0px;
      right: 0px;
      left: 0px;
      top: 0px;
      border: 0px solid #ffffff;
      padding: 0px;
      background-color: #0A2A3D;
      color: #FFFFFF;
      overflow: auto;
  }
  
  .userDataContent h2 {
      font-weight: normal;
      font-size: 22px;
      text-align: left;
      /*font-family: 'Source Sans Pro', sans-serif;*/
      font-family: "Source Sans Pro", "Source Sans Pro", Sans-serif;
      -webkit-font-smoothing: antialiased;
      margin-left: 10%;
  }
  
  .userDataContent h2 .finalStepSignIn {
      font-size: 16px;
      padding-top: 20px;
      margin-left: 10%;
  }
  .phase > div {
      margin-left: 10%;
      margin-right: 19%;
      height: 50px;
  }
  .phaseLine {
      z-index: 100;
  }
  .phaseLine ul {
      width: 100%;
  
  }
  .phaseLine ul li {
      height: 2px;
      background-color: #999999;
      width: 33%;
      float: left;
      margin: 0px;
  }

/*
  .phaseLine ul li[data-phase="2"]:first-child,
  .phaseLine ul li[data-phase="3"]:first-child,
  .phaseLine ul li[data-phase="3"]:last-child {
      background-color: #01728f;
  }
  BACKUP
  */

    .phaseLine ul li[data-phase="2"]:first-child,
    .phaseLine ul li[data-phase="3"]:first-child,
    .phaseLine ul li[data-phase="3"]:nth-child(2),
    .phaseLine ul li[data-phase="4"]:first-child,
    .phaseLine ul li[data-phase="4"]:nth-child(2),
    .phaseLine ul li[data-phase="4"]:last-child {
        background-color: #FB6432;
    }
  
  .phaseDots {
      z-index: 101;
  }
  .phaseLabels ul,
  .phaseDots ul,
  .phaseLine ul {
      margin: 0px;
      padding: 0px;
      list-style-type: none;
  
  }
  .phaseLabels ul li {
      float: left;
      height: 60px;
      color: #FB6432;
      /*width: 60px;*/
      font-size: 12px;
      padding: 0px;
      margin: 0px;
      position: relative;
      text-align: center;
      font-weight: bold;
  }
  .phaseLabels ul li[data-phase="1"]:nth-child(2),
  .phaseLabels ul li[data-phase="1"]:nth-child(3),
  .phaseLabels ul li[data-phase="1"]:last-child,
  .phaseLabels ul li[data-phase="2"]:nth-child(3),
  .phaseLabels ul li[data-phase="2"]:last-child,
  .phaseLabels ul li[data-phase="3"]:last-child {
      color: #FB6432;
  }
  .phaseLabels ul li:first-child {
      margin: 0px;
      float: left;
      margin-left: 0px;
      left: -30px;
  }
  .phaseLabels ul li:nth-child(2) {
      margin: 0px;
      float: left;
      margin-left: 33%;
      left: -90px;
  }

  .phaseLabels ul li:nth-child(3) {
        margin: 0px;
        float: left;
        margin-left: 33%;
        left: -129px;
    }

  .phaseLabels ul li:last-child{
      margin: 0px;
      float: right;
      margin-left: 0px;
      left: 20px;
  }
  
  .phaseDots ul {
      position: relative;
      top: -9px;
  }
  
  .phaseDots ul li {
      float: left;
      border-radius: 18px;
      height: 18px;
      background-color: #FB6432;
      width: 18px;
      color: #FFFFFF;
      font-size: 12px;
      padding: 0px;
      margin: 0px;
      position: relative;
  
  }
  .phaseDots ul li[data-phase="1"]:nth-child(2),
  .phaseDots ul li[data-phase="1"]:nth-child(3),
  .phaseDots ul li[data-phase="1"]:last-child,
  .phaseDots ul li[data-phase="2"]:nth-child(3),
  .phaseDots ul li[data-phase="2"]:last-child,
  .phaseDots ul li[data-phase="3"]:last-child {
      background-color: #FB6432;
  }
  
  .phaseDots ul li:first-child {
      margin: 0px;
      float: left;
      margin-left: 0px;
      left: -9px;
  }
  .phaseDots ul li:nth-child(2) {
      margin: 0px;
      float: left;
      margin-left: 33%;
      left: -30px;
  }

    .phaseDots ul li:nth-child(3) {
        margin: 0px;
        float: left;
        margin-left: 33%;
        left: -36px;
    }

  .phaseDots ul li:last-child{
      margin: 0px;
      float: right;
      margin-left: 0px;
      left: 9px;
  }
  
  .phaseDots ul li span {
      margin-left: 6px;
      vertical-align: middle;
  }
  
  .phaseTitle {
      margin-top: 40px;
  }
  .finalStepSignIn a {
      text-decoration: none;
      color: #FB6432;
  }
  .selfRegContent,
  .userDataContent {
      padding: 10px;
      background-color: #0A2A3D;
      max-width: 1100px;
      text-align: left;
  }
  .selfRegContent .infoBox4User {
      width: 100%;
      margin-bottom: 40px;
  }
  .selfRegContent .infoBox4User a,
  .selfRegContent .agreeCheckbox a, 
  .agreeCheckbox a:hover, .existingUserLinks a {
      text-decoration: none;
      color: #FFFFFF !important;
  }
  
  .selfRegContent .logo,
  .userDataContent .logo {
      height: 60px;
      text-align: left;
  }
  
  .selfRegLogo .logo {
      padding: 0 60px;
  }
  
  
  
  .dataConfirmForm .submit1Button {
      text-align: right;
      padding-top: 24px;
  
  }
  .dataConfirmForm input[type="submit"] {
  
      border-radius: 45px;
      background-color: #FB6432;
      border-width: 0px;
      color: #FFFFFF;
      padding: 8px 24px;
      font-size: 1em;
      font-weight: 400;
      background-image: none;
      font-family: "Arial", "Source Sans Pro", Sans-serif;
      -webkit-font-smoothing: antialiased;
  }
  .dataConfirmForm input[type="submit"]:hover{
      background-color: 01728f;
  }
  .dataConfirmForm input[type="submit"]:disabled {
      background-color: #d9d9d9;
      cursor: wait;
  }
  
  .selfRegForm {
      width: 100%;
      box-sizing: border-box;
      /*border: 2px #d9d9d9 solid;*/
      padding: 16px;
      /*background-color: #f2f2f2;*/
      font-size: 16px;
  }
  
  .selfRegForm h2 {
      color: #FFFFFF;
      font-size: 20px;
    }
    
  .selfRegForm h3 {
      color: #FFFFFF;
      font-family: "Source Sans Pro", "Source Sans Pro", Sans-serif;
      font-weight: normal;
      font-size: 13px;
      text-transform: uppercase;
  }
  
  .selfRegForm ul {
      list-style-image: url('/resource/1564144983000/eui_stable/assets/ecomm_icons/check_blue.svg');
      padding: 0 10px;
  }
  
  .selfRegForm li {
      padding: 5px 0;
  }
  
  /* ==========================================================================
     #CARD
     ========================================================================== */
    .card {
      overflow: hidden;
      width: 100%;
      display: table;
    }
    
    .card .card-heading {
      display: table-cell;
      width: 50%;
    }
    
    .card .card-body {
      padding: 57px 25px;
      padding-bottom: 65px;
      width: 50%;
      display: table-cell;
    }
  
    .card .card-heading {
      display: table-cell;
      width: 50%;
    }
  
    .card .card-copyright {
      padding: 35px 60px;
      width: 20%;
      min-width: 200px;
      display: table-cell;
      color: #ffffff;
      font-weight: bold;
      font-size: 16.5px;
      letter-spacing: 0.4px;
      line-height: 25px;
  }
  
    .card .card-termsContainer {
      display: table-cell;
      width: 80%;
      min-width: 550px;
      padding: 35px 0;
      line-height: 15px;
    }
    
    @media screen and (max-width: 767px) {
      .card {
        display: block !important;
      }
      .card .card-heading {
        display: block !important;
        width: 100% !important;
        padding-top: 0px !important;
      }
      .card .card-body {
        display: block !important;
        width: 100% !important;
        padding: 37px 0px !important;
        padding-bottom: 0px !important;
      }
      .card .card-copyright {
        display: block !important;
        width: 100% !important;
        padding: 15px 30px !important;
      }
      .card .card-termsContainer {
        display: block !important;
        width: 100% !important;
        /*min-width: 280px !important;
        max-width: 280px !important;*/
        padding: 0 5px 0 30px !important;
      }
      .selfRegLogo .logo {
          padding: 0 30px !important;
      }
      .termsandcond {
          padding: 0 5px !important;
      }
      .card-termsContainer ul li:first-child .termsandcond {
          padding-left: 0 !important;
      }
      .card-termsContainer ul {
          padding-left: 0px !important;
          margin: 0 !important;
          padding-inline-start: 0px !important;
      }
      .pageFrameContainerBottom {
          position: relative !important;
      }
      .emailSentContent .info2display {
          max-width: 280px !important;
          min-width: 280px !important;
      }  
      .dataConfirmForm table {
          width: 100% !important;
          margin: 0 !important;    
      }
      /*.phaseLabels ul li {
          width: auto;
      } */
      .phaseLabels ul li:first-child {
          left: -30px;
      }   
      .phaseLabels ul li:nth-child(2) {
          left: 20px;
      }
      /*.phaseLabels ul li:last-child {
          left: 0px;
      }*/
    }
    
  
  .dataConfirmForm table {
      width: 65%; /*changed from 60% to 65% 16.1.2019 JM*/
      border-collapse: collapse;
      border-width: 0px;
      margin: 0px 19%;
      font-family: "Source Sans Pro", "Source Sans Pro", Sans-serif;
      -webkit-font-smoothing: antialiased;
  
  }
  .dataConfirmForm table .emailInfo {
      font-size: 16px;
      color: #FFFFFF;
  }
  .dataConfirmForm table .columnLabel {
      text-align: right;
      padding-right: 20px;
      width: 33%;
      font-family: "Source Sans Pro", "Source Sans Pro", Sans-serif;
      -webkit-font-smoothing: antialiased;
      font-size: 16px;
      font-weight: 400;
  }
  .dataConfirmForm table .columnInput,
  .dataConfirmForm table .columnLabel {
      padding: 8px 10px;
    color: #FFFFFF;
  }
  
  .dataConfirmForm table .columnLabel .highlight {
      font-weight: bold;
  }
  
  .dataConfirmForm table .columnInput select {
      font-family: "Source Sans Pro", "Source Sans Pro", Sans-serif;
      background-color: #FFFFFF;
      border: 1px #d9d9d9 solid;
      border-radius: 3px;
      height: 26px;
      padding: 0px 12px;
      color: #333333;
      display:table-cell;
      width: 100%;
      box-sizing: border-box;
      font-size: 16px;
  }
  
  .selfRegForm table {
      width: 100%;
      border-collapse: collapse;
      border-width: 0px;
      margin: 0px;
      font-family: "Source Sans Pro", "Source Sans Pro", Sans-serif;
      -webkit-font-smoothing: antialiased;
  }
  
  .selfRegForm table input,
  .selfRegForm table select,
  .dataConfirmForm table input[type="text"],
  .dataConfirmForm table input[type="password"]{
      background-color: #FFFFFF;
      border: 1px #d9d9d9 solid;
      border-radius: 3px;
      height: 26px;
      padding: 0px 15px;
      color: #333333;
      display:table-cell;
      width: 100%;
      box-sizing: border-box;
      font-size: 16px;
  }
  .dataConfirmForm table input[type="password"][data-mismatch="1"],
  .dataConfirmForm table input[type="password"][data-mismatch="1"]:focus {
      border-color: #ff5c33;
  }
  
  .inputPswdErrorMessage[data-mismatch="1"] {
      display: inline;
  }
  .inputPswdErrorMessage {
      display: none;
  }
  
  .selfRegForm table .columnLabel {
      width: 33%;
      font-family: "Source Sans Pro", "Source Sans Pro", Sans-serif;
      -webkit-font-smoothing: antialiased;
      font-weight: normal;
      text-align: right;
      padding: 8px 10px;
  }
  .selfRegForm table .columnInput,
  .dataConfirmForm table .columnInput {
      width: 66%;
      font-family: "Source Sans Pro", "Source Sans Pro", Sans-serif;
      -webkit-font-smoothing: antialiased;
  }
  .selfRegForm .selfRegButton {
      text-align: right;
      padding-top: 24px;
  
  }
  
  .selfRegForm .agreeCheckbox {
      /*text-align: right;*/
      padding: 3px 0px;
      font-size: 16px;
      font-family: "Source Sans Pro", "Source Sans Pro", Sans-serif;
      -webkit-font-smoothing: antialiased;
      text-decoration: none;
      line-height: 18px;
  }
  
  .selfRegForm .agreeCheckbox input {
      position: relative;
      top: 2px;
  }
  
  .existingUserLinks {
      width: 100%;
      /*text-align: right;*/
      padding-right: 16px;
      color: #808080;
      padding-top: 48px;
      /*padding-right: 16px;*/
      box-sizing: border-box;
  }
  .selfRegContent .logo img,
  .emailSentContent .logo img,
  .userDataContent .logo img {
      width: 100px;
      height: 30px;
  }
  .emailSentContent .logo,  .emailSentContent .blank {
      width: 20%;
      position: relative;
      float: left;
  }
  .emailSentContent p:first-child {
      font-size: 24px;
      font-weight: 600;
      margin: 0px 0px 0px 0px;
  }
  .emailSentContent p:nth-child(2) {
      font-size: 20px;
      font-weight: 100;
      margin: 0px 0px 32px 0px;
  
  }
  .emailSentContent p:nth-child(3) {
      font-size: 14px;
      color: #999999;
      margin: 0px;
  }
  .emailSentContent a {
      text-decoration: none;
      color: #FB6432;
  }
  
  .emailSentContent .logo img {
      margin-top: 32px;
      margin-left: 32px;
  }
  
  .emailSentContent .info2display {
      width: 100%;
      position: relative;
      padding: 20px 20px 360px 20px;
      background-color: #0A2A3D;
      max-width: 800px;
      text-align: left;
      color: white;
  }
  
  .pageFrameContainerBottom {
      position: relative;
      bottom: 0px;
      right: 0px;
      left: 0px;
      min-height: 100px;
      background-color: #0A2A3D;
      font-family: "Source Sans Pro", "Source Sans Pro", Sans-serif;
  }
  
  .pageFrameContainerBottom ul {
      list-style-type:none;
  }
  
  .pageFrameContainerBottom ul li {
      color: #ffffff;
      float: left;
      vertical-align: middle;
      text-align: center;
      border-left: 1px #ffffff solid;
      margin: 0px;
  }
  .pageFrameContainerBottom ul li:first-child {
      border-left-width: 0px;
  }
  
  .pageFrameContainerBottom .termsandcond {
      text-align: center;
      margin: 15px 0;
      font-size: 13px;
      letter-spacing: 0.4px;
      padding: 0 15px;
  }
  .pageFrameContainerBottom  a, .pageFrameContainerBottom a:hover {
      text-decoration: none;
      color: #ffffff;
  }
  
  /* Login form */
  .login-form {
    position: relative;
    background: #ffffff;
    max-width: 360px;
    width: 100%;
    color: #313131;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
    -ms-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
    -o-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
    margin: auto auto;
     font-family: "Source Sans Pro", "Source Sans Pro", Sans-serif;
    -webkit-font-smoothing: antialiased;
      font-weight: 400;
    line-height: 1;
  }
  .login-form .text{
    margin: 0 0 10px;
    font-size: 14px;
    color: #313131;
    font-family: "Source Sans Pro", "Source Sans Pro", Sans-serif;
    -webkit-font-smoothing: antialiased;
      font-weight: 400;
    line-height: 1.3;
  }
  .login-form .form {
    display: block;
    padding: 30px;
    font-size: 14px;
    color: #313131;
    font-family: "Gotham A", "Gotham B", Sans-serif;
    -webkit-font-smoothing: antialiased;
      font-weight: 400;
    line-height: 1;
  }
  .login-form h2 {
    margin: 0 0 10px;
    color: #0A2A3D;
    font-size: 16px;
    font-family: "Gotham A", "Gotham B", Sans-serif;
    -webkit-font-smoothing: antialiased;
    font-weight: 400;
    line-height: 1;
    display: block;
  }
  .login-form .policy {
  
    font-size: 0.9em;
    padding-bottom: 3px;
  }
  .policy input {
      margin-right: 6px;
      position: relative;
      bottom: -2px;
  
  }
  .login-form h2 a {
    color: #0A2A3D;
    text-decoration: underline;
  }
  .login-form .inputField,
  .login-form .inputUser,
  .login-form .inputPswd,
  .login-form .inputPswdRepeat,
  .selfRegForm .inputField
  {
    outline: none;
    display: block;
    width: 100%;
    border: 1px solid #d9d9d9;
    margin: 0 0 20px;
    padding: 10px 15px;
    box-sizing: border-box;
    font-family: "Source Sans Pro", "Source Sans Pro", Sans-serif;
    -webkit-font-smoothing: antialiased;
    font-weight: 400;
  }
  .login-form .inputField:focus,
  .login-form .inputUser:focus,
  .login-form .inputPswd:focus,
  .login-form .inputPswdRepeat:focus,
  .selfRegForm .inputField:focus
  {
    border: 1px solid #0A2A3D;
    color: #333333;
      -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
  }
  .login-form button,
  .login-form input[type="submit"],
  .selfRegForm input[type="submit"],
  .submitButton {
      -webkit-appearance: none !important;
      cursor: pointer;
      background: #FB6432;
      width: 100%;
      border: 0;
      padding: 10px 32px;
      color: #FFFFFF;
      font-family: "Source Sans Pro", "Source Sans Pro", Sans-serif;
      -webkit-font-smoothing: antialiased;
      font-weight: normal;
      font-size: 1em;
      border-radius: 55px;
  }
  .login-form button:hover,
  .login-form input[type="submit"]:hover,
  .selfRegForm input[type="submit"]:hover,
  .submitButton:hover  {
    background: #C44017;
      -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
  }
  .login-form .forgot {
    background: #f2f2f2;
    width: 100%;
    padding: 15px 40px;
    box-sizing: border-box;
    color: #666666;
    font-size: 12px;
    text-align: center;
  }
  .login-form .forgot a {
    font-family: "Gotham A", "Gotham B", Sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #0A2A3D;
    text-decoration: none;
  
  }
  
  .passwordicon {
      padding-right: 8px;
      width: 16px;
  }
  input.password-input.password-weak, input.password-input.password-weak:focus {
      border: 1px solid #C23934;
  }
  .passwordul {
      padding-left: 0px;
      list-style-type: none;
  }
  .passwordul span {
      position: relative;
      bottom: 2px;
  }
  .fontBold {
      font-weight: bold;
  }