:root {
    --switches-bg-color: #edf2fa;
    --switches-label-color: #17324b;
    --switch-bg-color: #1c83fc;
    --switch-text-color: white;
    --primary-text-color-breakup: #252526;
    --seconday-text-color-semibold: #1a204a;
    --seconday-text-color-accordian: #656c76;
    --tool-tip-bg-color: #0092f4;
  }
  
  .salary-contribution h2,li.list-items.active,#currency-input,.calc-again,.calculator-dsc span,
  .download-pdf,  .calc-select.calc-form-input::placeholder,.employment-cost .duration-salary,
  .calc-select::placeholder,.form-input-wrapper input,
  .calc-select.province::placeholder,.skuad-offer-label,.download-pdf,.insight-right-col.calculator h3,.error-msg-container,.country-and-flag h4  {
    font-family: "AvenirNextWorld-Demi", "Payo Fallback Demi Font", sans-serif !important;
  }
  .insight-right-col.calculator h3 {
    font-size: 20.6px;
  }

  #err-msg,
  #show-calculator-modal,
  #country-flag,
  #selected-province,
  #show-calc-province,
  .list-cotainer.list-modal,
  .calc-input-wrapper.mt-2.province-parent-wrapper {
    display: none;
  }
  .current-country-wrapper,.download-pdf-wrapper,.country-and-flag.d-mobile{
    display: none !important;
  }
  /* for payo calculator styles */
  .calc-container-parent p {
    margin-bottom: 0rem !important;
  }
  
  .d-flex-new,
  .info-icon-container,
  .error-msg-container,
  .form-input-wrapper,
  .info-container,
  .currency-amt-container-2,
  .radio-imput,
  .is-expat-radio,
  .switches-container,
  .current-country-wrapper,
  .accordian-section,
  .salary-contribution,
  .cost-label-align,
  .d-flex-align-center,
  .employment-cost,
  .new-heading-wrapper,
  .country-and-flag,
  .accordian-main.d-flex-new,
  .d-flex-new.justify-content-space-between.acc-item-container,
  .download-pdf-wrapper,.switch-pdf-wrapper,div#payo-calc-input-form,#payo-calc-input-form {
    display: flex;
  }
  
  .info-icon-container,
  .form-input-wrapper,
  .currency-amt-container-2,
  .is-expat-radio,
  .error-msg-container,
  .current-country-wrapper,
  .cal-result-container:nth-child(2),
  .cost-label-align,
  .d-flex-align-center,
  .employment-cost,
  .new-heading-wrapper,
  .country-and-flag h4,
  .accordian-main.d-flex-new,
  .d-flex-new.justify-content-space-between.acc-item-container,
  .download-pdf-wrapper,
  .download-pdf,.switch-pdf-wrapper,div#payo-calc-input-form {
    align-items: center;
  }
  
  .accordian-main.d-flex-new,
  .d-flex-new.justify-content-space-between.acc-item-container,
  .current-country-wrapper,
  .download-pdf-wrapper,.cost-label-align,.employment-cost,#payo-calc-input-form {
    justify-content: space-between;
  }
  .d-flex-align-center.dis-offer-active{
    align-items: flex-start;
  }
  
  .info-icon-container {
    justify-content: center;
  }
.is-expat-wrapper,.error-msg-container,.accordian-section,.salary-contribution,.d-flex-align-center.dis-offer-active {
    flex-direction: column;
  }

  .form-input-wrapper input, select#currency-input:focus {
    outline: unset;
    border-color: #d9dade !important;
  }
  #calc-form-new{
    padding: 24px;
    border-radius: 14px;
    box-shadow:
    0px 1.58px 2.19px 0px #2A2A2A06,
    0px 3.79px 5.25px 0px #2A2A2A08,
    0px 7.14px 9.89px 0px #2A2A2A0A,
    0px 12.73px 17.65px 0px #2A2A2A0C,
    0px 23.81px 33px 0px #2A2A2A0F,
    0px 57px 79px 0px #2A2A2A14;
    width: 500px;
  }
  .currency-salary-wrapper {
    width: 100%;
}
  p#current-country {
    margin-top: 60px;
    font-size: 20.3px;
    font-family: AvenirNextWorld-Demi, "Payo Fallback Demi Font", sans-serif !important;
  }
  
  /* form css   */
  
  
  .switch-pdf-wrapper {
    padding: 0 2px;
    flex-direction: row-reverse;
    justify-content: space-between;
}
  .form-input-wrapper {
    column-gap: 40px;
  }
  
  .info-container {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
  }
  
  .cal-input-label,
  .country-and-flag,
  .list-items,
  .tooltiptext-top {
    text-align: left;
  }
  
  .cal-input-label {
    color: var(--primary-text-color-breakup);
    margin-bottom: 5px;
  }
  
  .tooltiptext-top {
    color: var(--switch-text-color);
    background-color: var(--tool-tip-bg-color);
    border-radius: 6px;
    width: 280px;
    padding: 8px;
    font-size: 14px;
    position: absolute;
    bottom: 30px;
    left: 0%;
  }
  
  .info-icon-container:hover .tooltiptext-top,
  .tool-tip:hover .tooltiptext {
    visibility: visible;
  }
  
  .currency-amt-container {
    border-radius: 8px;
    justify-content: flex-start;
    align-items: flex-start;
    padding-bottom: 2px;
  }
  
  .province-input-wrapper,
  .sal-cal-country-wrapper {
    position: relative;
  }
  
  .sal-cal-country-wrapper,
  .province-input-wrapper {
    width: 100%;
  }
  
  .calc-select,
  li.ml-auto,
  .duration-salary,
  .right-side-value {
    text-wrap: nowrap;
  }
  
  .calc-select {
    background-color: var(--switch-text-color);
    background-image: url(https://www.payoneer.com/wp-content/uploads/down-arrow.svg);
    background-position: 95%;
    background-repeat: no-repeat;
    background-size: auto;
    border: 1px solid #d9dade;
    border-radius: 8px;
    min-height: 44px;
    width: 100%;
    padding: 0 10px;
    color: var(--primary-text-color-breakup);
    min-width: 246px;
  }
  
  .breakups-main,
  .list-modal {
    font-size: 14px;
    color: #252526;
  }
  
  .list-cotainer {
    position: absolute;
    top: 50px;
    width: 100%;
    max-height: 200px;
    list-style-type: none;
    overflow-y: auto;
    background: var(--switch-text-color);
    padding-left: 0;
    border: 1px solid rgba(6, 19, 45, 0.15);
    border-radius: 4px;
    z-index: 1;
  }
  
  .currency-amt-container-2 {
    border: 1px solid #d9dade;
    border-radius: 8px;
    justify-content: flex-start;
    height: 44px;
    overflow: hidden;
  }
  
  #calc-amount-input {
    height: 42px;
    border: none;
    border-radius: 0;
    background-image: none;
  }
  
  .currecny-select {
    background-image: url(https://www.payoneer.com/wp-content/uploads/down-arrow.svg);
    background-position: 90%;
    background-repeat: no-repeat;
    background-size: auto;
    background-attachment: scroll;
    border: 1px #000;
    width: 107px;
    height: 42px;
  }
  
  .is-expat-wrapper {
    grid-row-gap: 10px;
    margin-top: 16px;
    display: none;
  }
  .radio-imput {
    column-gap: 50px;
    margin-left: 20px;
  }
  
  .is-expat-text {
    font-size: 14px;
    color: var(--primary-text-color-breakup) !important;
  }
  
  .is-expat-radio {
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    justify-content: flex-start;
  }
  
  .is-expat-radio > span {
    font-size: 14px;
    font-weight: 600;
  }
  input.w-form-formradioinput:checked ~ span {
    color: var(--primary-text-color-breakup);
  }
  
  .w-form-label {
    cursor: pointer;
    margin-bottom: 0;
    display: inline-block;
    color: rgba(33, 37, 41, 0.5);
  }
  
  input[type="checkbox"],
  input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
  }
  
  .w-radio-input {
    float: left;
    margin: 3px 0 0 -20px;
    line-height: normal;
  }
  
  #err-msg {
    padding: 40px;
  }
  .error-msg-container {
    gap: 36px;
    margin-top: 100px;
  }
  .error-msg-container img {
    max-width: 100px;
  }
  .payo-btn {
    border-radius: 500px;
    padding: 9px 50px;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    border: none;
    color: white !important;
    background-color: var(--primary-text-color-breakup);
    cursor: pointer;
    width: 100%;
  }
  
  input[type="submit" i]:disabled {
    background-color: #cccccc;
  }
  
  /* end payo style */
  
  .switches-container {
    padding: 0;
    position: relative;
    background: white;
    line-height: 2.5rem;
    border-radius: 3rem;
    width: 184px;
    border: 1px solid #25252629;
  }
  .switches-container input {
    visibility: hidden;
    position: absolute;
    top: 0;
  }
  .switches-container label {
    width: 50%;
    padding: 0;
    margin: 0;
    text-align: center;
    cursor: pointer;
    color: var(--switches-label-color);
    font-weight: 400;
    font-size: 14px;
    -webkit-tap-highlight-color: transparent;
  }
  .switch-wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    padding: 0.15rem;
    z-index: 3;
    transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  }
  .switch {
    border-radius: 3rem;
    background: linear-gradient(90deg, #9064da 0%, #2171e0 49.37%, #844eb4 100%);
    height: 100%;
    /* background-color: #252526; */
  }
  .switch div {
    width: 100%;
    opacity: 0;
    display: block;
    color: var(--switch-text-color);
    transition: opacity 0.2s cubic-bezier(0.77, 0, 0.175, 1) 0.125s;
    will-change: opacity;
    position: absolute;
    top: 0;
    left: 18px;
    font-size: 14px;
  }
  .switches-container input:first-of-type:checked ~ .switch-wrapper {
    transform: translateX(0);
  }
  .switches-container input:nth-of-type(2):checked ~ .switch-wrapper {
    transform: translateX(100%);
  }
  .switches-container
    input:first-of-type:checked
    ~ .switch-wrapper
    .switch
    div:first-of-type,
  .switches-container
    input:nth-of-type(2):checked
    ~ .switch-wrapper
    .switch
    div:nth-of-type(2) {
    opacity: 1;
  }
  
  .error-text {
    font-weight: 500;
    font-size: 24px;
    line-height: 40px;
    color: rgba(0, 0, 0, 0.87) !important;
    margin-top: 24px;
  }
  
  .calc-again {
    font-size: 14px;
    color: var(--tool-tip-bg-color);
    text-decoration: none;
    cursor: pointer;
  }
  
  .calc-again:hover svg {
    transform: translateX(5px);
  }
  .calc-again svg {
    transition: all 0.2s ease-in-out;
    margin-left: 8px;
  }
 
  
  .cal-result-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
    padding: 30px;
    border-radius: 20px;
    /* border: 1px solid #7070703c; */
    column-gap: 48px;
    color: var(--primary-text-color-breakup);
    margin-top: 24px;
    background-color: white;
    box-shadow: 0px 20px 30px 0px #08345214, 0px 4px 20px -5px #0834521f;
  }
  .cal-result-container:nth-child(2) {
    padding: 20px 20px 20px 32px;
  }
  div#calculation-wrapper > :first-child:after {
    content: "";
    border-right: 1px solid #e4e7ec;
    height: 80%;
    position: absolute;
    right: 50%;
  }
  .accordian-section,
  .salary-contribution {
    row-gap: 12px;
  }
  li.ml-auto {
    text-wrap: nowrap;
  }
  
  .salary-contribution h2 {
    font-size: 18px;
    line-height: 30px;
  }
  
  .d-flex-new.justify-content-space-between.acc-item-container {
    padding-left: 0px;
  }
  
  li.list-items.active {
    background-color: #ddd;
  }
  
  .list-cotainer li {
    padding-left: 20px;
  }
  .list-items {
    margin: 10px 0;
    color: #404040;
    font-size: 16px;
    line-height: 24px;
    padding: 5px 0 5px 5px;
  }
  .cont-breakup,
  ul.d-flex-new.justify-content-space-between.acc-item-container {
    padding-top: 0;
  }
  .list-cotainer li:hover {
    background-color: #add8e6;
    cursor: pointer;
  }
  .list-items:hover {
    color: var(--switches-label-color);
    opacity: 1;
    cursor: pointer;
  }
  #currency-input {
    cursor: pointer;
    border-right: 1px solid #d9dade;
    max-width: 80px;
    padding: 0 10px;
    -webkit-appearance: none;
  }
  .tool-tip {
    position: relative;
  }
  .tool-tip .tooltiptext {
    visibility: hidden;
    width: 340px;
    background-color: var(--tool-tip-bg-color);
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 8px;
    position: absolute;
    z-index: 1;
    bottom: 20px;
    left: -77px;
    font-size: 14px;
    line-height: 140%;
  }
  .tool-tip svg {
    margin-top: 0 !important;
  }
  .d-flex-align-center img:hover {
    background: #e2e4f0;
  }
  .d-flex-align-center img {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    padding: 3px;
    cursor: pointer;
    margin-left: 2px;
  }
  
  .cost-label-align,
  .d-flex-align-center,
  .employment-cost,
  .new-heading-wrapper {
    column-gap: 8px;
  }
  
  .inner-breakup ul {
    margin-bottom: 0rem !important;
  }
  
  .d-flex-new.justify-content-space-between.acc-item-container ul {
    margin-bottom: 0;
  }
  .inner-breakup ul {
    width: 100%;
  }
  .inner-breakup {
    background-color: #f7f7f7;
    padding: 16px 16px 8px 16px;
    margin-top: 8px;
  }
  .cont-breakup {
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s linear;
    height: 0;
    overflow: hidden;
    padding-bottom: 0;
    margin-top: 8px;
  }
  .cont-breakup.hidden {
    border: 0;
    margin-top: 0;
  }
  .rotate-180 {
    transition: 0.4s;
    transform: rotate(180deg);
  }
  ul.d-flex-new.justify-content-space-between.acc-item-container li {
    list-style: none;
  }
  .skuad-offer-label {
    background: linear-gradient(
      85.91deg,
      #faf4fd -31.4%,
      #f0f9fd 57.96%,
      #f1fcfb 146.43%
    );
    padding: 2px 10px;
    border-radius: 50px;
    font-size: 12px;
  }
  .d-flex-new.offer-active {
    column-gap: 10px;
    flex-direction: column-reverse;
    align-items: flex-end;
  }
  .old-skuad-fee {
    text-decoration: line-through;
    color: #656c76;
    font-size: 12px;
    line-height: 15.12px;
  }
  .country-and-flag {
    gap: 16px;
  }
  
  .country-and-flag h4 {
    column-gap: 8px;
    font-size: 20.3px;
  }
  
  #current-country-flag {
    width: 28px;
    height: 28px;
    margin-left: 8px;
  }
  
  .download-pdf-wrapper {
    column-gap: 32px;
    padding: 16px 24px;
    border-radius: 10px;
    margin-top: 24px;
    position: relative;
    overflow: hidden;
  }
  
  .download-pdf-wrapper:after {
    content: "";
    width: 300px;
    height: 100px;
    background: linear-gradient(
      252.93deg,
      #d054ce 33.59%,
      #0092f4 59.88%,
      #20dc86 87.87%
    );
    position: absolute;
    right: 0;
    filter: blur(140px);
    z-index: -1;
  }
  .download-pdf-wrapper:before {
    content: "";
    width: 300px;
    height: 100px;
    background: linear-gradient(
      252.93deg,
      #d054ce 33.59%,
      #0092f4 59.88%,
      #20dc86 87.87%
    );
    position: absolute;
    filter: blur(140px);
    z-index: -1;
  }
  
  .calculator-dsc span,
  .download-pdf {
    line-height: 16.94px;
    font-size: 14px;
  }
  .download-pdf {
    background-color:var(--primary-text-color-breakup);
    border-radius: 60px;
    padding: 6px 16px;
    text-decoration: none;
    min-width: 153px;
    color:var(--switch-text-color);
    position: relative;
    z-index: 2;
  }
  .download-pdf img {
    margin-right: 8px;
    width: 16.67px;
    height: 16px;
  }
  .salary-contribution > :last-child {
    border-top: 1px solid #878787;
    padding-top: 16px;
    margin-top: auto;
  }
  .calculator-dsc-container {
    margin-top: 42px;
    color: var(--primary-text-color-breakup);
  }
  .calculator-dsc-container ul {
    padding-left: 0;
  }
  .calculator-dsc {
    font-size: 12px;
    line-height: 18px;
    margin-top: 5px;
    list-style: none;
  }
  
  input::-webkit-contacts-auto-fill-button {
    display: none !important;
    pointer-events: none;
    position: absolute;
    right: 0;
  }
  input::-webkit-textfield-decoration-container {
    visibility: hidden;
  }
  
  .calc-select:focus,
  .currency-amt-container-2:focus,
  .w-input:focus,
  .w-select:focus {
    border-color: unset;
  }
  

  .justify-self-end {
    justify-self: end;
  }
  .sticky-reset-icon {
    position: fixed;
    bottom: 20px;
    right: -25px;
    padding: 12px;
    border-radius: 50%;
    font-size: 22px;
    cursor: pointer;
    transition: opacity 0.3s ease;
    z-index: 9;
  }
  

/* only widget calc css  */
.form-input-wrapper {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 16px;
}

.calc-input-wrapper{
    width: 100%;
}

div#payo-calc-input-form img{
  max-width: 520px;
  max-height: 492px;
  position: relative;
}

/* end widget calc css */


/* loader on submit btn started */
.submit-wrapper-loader {
  position: relative;
  margin-top: 24px;
  overflow: hidden;
}
.loader {
  position: absolute;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0%;
  bottom: 0%;
  display: none;
  z-index: 3;
}
.loader img{
  width: 25px;
  height: 25px;
  animation: spin 1s linear infinite;
}
.tempray-disable{
  background: rgb(220, 220, 220);
  color: rgb(135, 135, 135)
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* loader on submit btn end */

.result-wrapper{
  margin-top: 100px;
}
  /* this is only for left dashed line */
  @media only screen and (min-width: 992px) {
    .d-flex-align-center {
      max-width: 190px;
    }
    .d-flex-align-center.dis-offer-active {
      max-width: 100%;
    }
  
  }

  @media only screen and (max-width: 991px) {
  
    .calc-container-parent,.form-input-wrapper {
      flex-direction: column;
    }
 
    .d-flex-new.offer-active {
      flex-direction: row-reverse;
      align-items: flex-end;
    }
 
    .calc-container-parent {
      padding: 32px 40px;
    }
   
    div#calculation-wrapper > :first-child:after {
      border: 0;
    }
    #current-country-flag {
      width: 24px;
      height: 24px;
    }
    .salary-contribution {
      padding: 24px;
      border-radius: 16px;
    }
    .duration-salary,
    .right-side-value {
      white-space: nowrap;
    }
    .cal-result-container {
      display: flex;
      flex-direction: column;
      width: 100%;
      row-gap: 16px;
      border: none;
    }
    .country-and-flag h4 {
      display: block;
    }
    .form-input-wrapper {
      row-gap: 32px;
      align-items: flex-start;
    }
  
    .salary-contribution:nth-child(2) {
      border-top: 4px solid #25252610;
      border-radius: 0;
    }
  
    .sticky-reset-icon.hidden {
      opacity: 0;
      pointer-events: none;
    }
    .cal-result-container:last-child {
      flex-direction: row;
      align-items: center;
  }
  .payo-calc-input-form{
    justify-content: center;
  }
  }
  @media only screen and (max-width: 568px) {
    .cal-result-container:last-child {
      padding: 24px;
      text-align: center;
  }
    .switches-container {
      margin: 0 auto;
      margin-top: 24px;
    }
  
    div#calculation-wrapper p {
      font-size: 14px;
    }
    #calc-form-new {
      width: 100%;
      position: relative;
      z-index: 1;
      background: white;
    }
    div#payo-calc-input-form img {
      max-width: 100%;
    }
    .d-flex-align-center.dis-offer-active,.switch-pdf-wrapper,#payo-calc-input-form  {
      flex-direction: column;
    }
    .d-flex-new.offer-active {
      flex-direction: column-reverse;
    }
    .cal-result-container {
      padding: 0px;
      border-radius: 16px;
    }
    .calc-container-parent {
      padding: 0px;
      position: relative;
    }
  
    .form-input-wrapper div {
      width: 100%;
    }
    .is-expat-wrapper {
      margin-top: 32px;
    }
    .salary-contribution {
      border-radius: 0;
      padding: 16px;
    }
    .cal-input-label {
      display: contents;
    }
    .info-icon-container {
      max-width: 50px;
    }
  
    .calc-select {
      background-position: 95%;
    }
    .current-country-wrapper {
      flex-direction: column-reverse;
      align-items: flex-start;
      gap: 24px;
    }
    .download-pdf-wrapper {
      padding: 9px 24px;
      flex-direction: column;
      gap: 16px;
      align-items: flex-start;
    }
    .download-pdf-dsc {
      max-width: 100%;
    }
  
    .calc-again {
      display: flex;
      align-items: center;
      flex-direction: row-reverse;
      gap: 8px;
    }
    .calc-again svg {
      transform: rotate(180deg);
    }
  
    .calc-again:hover svg {
      transform: translateX(-5px);
    }
  
    .currency-amt-container,
    .province-parent-container,
    .currency-amt-container-2 {
      margin-top: 5px;
    }
    .new-heading-wrapper {
      max-width: 130px;
    }
    .currency-amt-container-2 div {
      max-width: 82px;
    }
  
    .d-visible,
    h3.d-visible,
    .w-form.d-visible {
      display: none;
    }
    .d-visible ~ .insight-right-col {
      padding-top: 0px;
    }
    .home-calc-container.margin-top-zero {
      margin-top: 0px;
    }
  }