.step-b {
  display: none;
}

.text {
  transform-origin: left top;
}

.step1-1 {
  right: 80%;
  top: 26%;
  display: block;
  transform-origin: right top;
}

.step1-2 {
  left: 18%;
  top: 44%;
}

.step2-1 {
  top: 32.5%;
  left: 43.5%;
}

.step2-1 .popover-icon {
  position: absolute;
  left: -91%;
  top: 275%;
}

.step2-1 .popover-for-icon {
  transform: none !important;
  top: 400% !important;
  left: -97% !important;
  width: max-content;
}

.step2-1 .popover-for-icon .arrow {
  top: -10px !important;
  left: 20px !important;
}

.step2-2 {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.step2-2 span {
  position: absolute;
  transform-origin: left top;
  top: 565px;
  left: 101px;
}

.step2-2 .popover-icon {
  position: absolute;
  left: 268px;
  top: 376px;
}

.step2-2 .popover-for-icon {
  width: 480px;
  transform: none !important;
  top: 308px !important;
  left: 242px !important;
}

.step2-2 .popover-for-icon .arrow {
  top: auto !important;
  left: 20px !important;
  bottom: -10px !important;
}

.step2-2 .popover-icon2 {
  position: absolute;
  left: 268px;
  top: 411px;
}

.step2-2 .popover-for-icon2 {
  width: max-content;
  transform: none !important;
  top: 343px !important;
  left: 242px !important;
}

.step2-2 .popover-for-icon2 .arrow {
  top: auto !important;
  left: 20px !important;
  bottom: -10px !important;
}

.step2-2 .popover-icon3 {
  position: absolute;
  left: 323px;
  top: 479px;
}

.step2-2 .popover-for-icon3 {
  width: max-content;
  transform: none !important;
  top: 410px !important;
  left: 296px !important;
}

.step2-2 .popover-for-icon3 .arrow {
  top: auto !important;
  left: 20px !important;
  bottom: -10px !important;
}

.step3-1 {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.step3-1 .text3-1-1 {
  position: absolute;
  top: 530px;
  left: 110px;
}

.step3-1 .text3-1-2 {
  width: 265px;
  position: absolute;
  left: 1159px;
  top: 189px;
}

.step3-1 .text3-1-3 {
  width: 175px;
  top: 272px;
  left: 45px;
  position: absolute;
}

.step3-2 {
  top: 40%;
  left: 59%;
}

.step3-3 {
  top: 81%;
  left: 61%;
}

.step3-4 {
  top: 60%;
  left: 57%;
}

.step4-2 {
  left: 64%;
  top: 50.5%;
  transform-origin: left top;
}

.step4-2.text-b {
  left: 80%;
  top: 49%;
  width: 205px;
}

.step4-2 .step-a {
  display: none !important;
}

.step4-3 {
  left: 74%;
  top: 45%;
  width: 245px;
}

.step4-4 {
  top: 49%;
  width: 236px;
  left: 72%;
}

.step4-5 {
  bottom: 22%;
  left: 74%;
  transform-origin: left bottom;
}

.mobile-step4-3.text-b {
  width: 150px;
  left: auto;
  top: auto;
  right: 83.5%;
  bottom: 65%;
  transform-origin: right bottom;
}

.mobile-step4-4 {
  display: none;
  top: auto;
  width: 241px;
  left: 48%;
  bottom: 37%;
  transform-origin: left bottom;
}

.mobile-step4-5 {
  display: none;
  width: 175px;
  top: 52%;
  left: 85%;
}

.mobile-step4-6.text-b {
  top: 52%;
  left: auto;
  right: 85%;
  width: 145px;
  transform-origin: right top;
}

.mobile-step4-7 {
  left: 50%;
  width: 200px;
  top: auto;
  bottom: 38%;
  transform-origin: left bottom;
}

.mobile-step4-8 {
  left: 85%;
  top: 51%;
  width: 170px;
}

@media (max-width: 1024.98px) {
  .step1-1 {
    top: 36%;
    right: 56%;
  }
  .step1-2 {
    left: 15%;
    top: 20%;
  }
  .step2-1 {
    top: 2.5%;
    left: 46%;
    width: 265px;
  }
  .step2-1 .popover-icon {
    left: -98%;
    top: 120%;
  }
  .step2-1 .popover-for-icon {
    top: 179% !important;
    left: -105% !important;
  }
  .step2-2 span {
    top: 236px;
    left: 34px;
    width: 206px;
    font-size: 1rem;
  }
  .step2-2 .popover-icon {
    top: 133px;
    left: 150px;
  }
  .step2-2 .popover-for-icon {
    top: 66px !important;
    left: 123px !important;
  }
  .step2-2 .popover-icon2 {
    top: 153px;
    left: 150px;
  }
  .step2-2 .popover-for-icon2 {
    top: 86px !important;
    left: 131px !important;
    margin: 0;
  }
  .step2-2 .popover-icon3 {
    top: 191px;
    left: 180px;
  }
  .step2-2 .popover-for-icon3 {
    top: 125px !important;
    left: 152px !important;
  }
  .step2-3 {
    top: 42%;
    left: 38%;
  }
  .step3-1 .text3-1-1 {
    transform: scale(0.66);
    top: 230px;
    left: -43px;
  }
  .step3-1 .text3-1-2 {
    transform: scale(0.66);
    top: 0;
    left: 660px;
    width: 170px;
  }
  .step3-1 .text3-1-3 {
    transform: scale(0.66);
    width: 175px;
    top: 51px;
    left: -12px;
  }
  .step3-2 {
    top: 6%;
    left: 59%;
    width: 330px;
  }
  .step3-3 {
    top: 64%;
    left: 18%;
    width: 195px;
  }
  .step3-4 {
    top: 35%;
    left: 62%;
  }
  .step4-2 {
    left: 26%;
    top: 56.5%;
  }
  .step4-2.text-b {
    left: 45%;
    top: 36%;
    width: auto;
  }
  .step4-2 .step-a {
    display: block !important;
  }
  .step4-3 {
    left: 40%;
    width: 487px;
  }
  .step4-4 {
    top: 43%;
    left: 40%;
  }
  .step4-5 {
    left: 61%;
    bottom: 22%;
  }
}

@media screen and (orientation: landscape) and (max-width: 1200px) {
  .mobile-step4-3.text-b {
    width: 150px;
    left: auto;
    top: auto;
    right: 83.5%;
    bottom: 65%;
    transform-origin: right bottom;
  }
  .mobile-step4-4 {
    display: none;
    top: auto;
    width: 241px;
    left: 48%;
    bottom: 37%;
    transform-origin: left bottom;
  }
  .mobile-step4-5 {
    display: none;
    width: 175px;
    top: 52%;
    left: 85%;
  }
  .mobile-step4-6.text-b {
    top: 52%;
    left: auto;
    right: 85%;
    width: 145px;
    transform-origin: right top;
  }
  .mobile-step4-7 {
    left: 50%;
    width: 200px;
    top: auto;
    bottom: 38%;
    transform-origin: left bottom;
  }
  .mobile-step4-8 {
    left: 85%;
    top: 51%;
    width: 170px;
  }
}

@media screen and (orientation: portrait) {
  .mobile-step4-3.text-b {
    width: 225px;
    text-align: center;
    right: 21%;
    bottom: 15%;
  }
  .mobile-step4-4 {
    display: none;
    top: auto;
    width: 241px;
    left: 37%;
    bottom: 21%;
  }
  .mobile-step4-5 {
    width: 225px;
    text-align: center;
    left: 21%;
    top: 78%;
  }
  .mobile-step4-6.text-b {
    width: 188px;
    right: 32%;
  }
  .mobile-step4-7 {
    left: 37%;
    top: 67%;
  }
  .mobile-step4-8 {
    width: 204px;
    text-align: center;
    top: 78%;
    left: 24%;
  }
  .mobile-step4-9 {
    left: 61%;
    bottom: 22%;
  }
}

@media screen and (orientation: landscape) and (max-height: 576px) {
  .mobile-step4-9 {
    left: 61.5%;
    bottom: 22%;
  }
}
/*# sourceMappingURL=salary-transfer-use-example.css.map */