/*
:root {
  --primary-color: #252526;
  --secondary-color: #4a4a4a;
  --seconday-light-color: #878787;
  --white-text-color: #fff;
  --link-color: #0092f4;
  --pink-color: #da54d8;
  --primary-text-size: 1rem;
  --secondary-text-size: 0.875rem;
}
*/
#err-msg,#zero-state,
#read-more-container,
.list-cotainer.list-modal,
.is-expat-wrapper,
.calc-input-wrapper.province-parent-wrapper {
  display: none;
}

.canvas-container {
    width: 350px !important;
    height: 350px !important;
  }
  .chart-container,.canvas-container{
    margin: auto;
  }
/* form css */
.salary-insight-form {
  gap: 16px;
}
.form-input-wrapper {
  gap: 40px;
}
.info-container,
.tool-tip {
  position: relative;
}
.cal-input-label {
  margin-bottom: 5px;
}
span.sub-tool-tip{
  border-top: 1px dashed var(--white-text-color);
  padding-top: 8px;
  font-size: 12px;
}
.tooltiptext-top,
.tooltiptext {
  visibility: hidden;
  color: var(--white-text-color);
  background-color: var(--link-color);
  border-radius: 6px;
  width: 280px;
  padding: 8px;
  font-size: 14px;
  line-height: 21px;
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translate(-35%, -50%);
  display: grid;
  gap: 8px;
}
.d-flex-align-center img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  padding: 3px;
  cursor: pointer;
  margin-left: 2px;
}
.d-flex-align-center img:hover {
  background: #e2e4f0;
}

/* remove below class when live */
.temp-loading{
  font-size: 14px;
  line-height: 21px;
}

.info-icon-container:hover .tooltiptext-top,
.tool-tip:hover span.tooltiptext {
  visibility: visible;
}

.list-cotainer {
  position: absolute;
  top: 50px;
  width: 101%;
  max-height: 200px;
  list-style-type: none;
  overflow-y: auto;
  background: #fff;
  padding-left: 0;
  border: 1px solid rgba(6, 19, 45, 0.15);
  border-radius: 4px;
  z-index: 1;
  text-align: left;
  left: -1px;
}
.list-items {
  margin: 10px 0;
  color: #404040;
  font-size: 16px;
  line-height: 23px;
  padding: 5px 0 5px 5px;
  cursor: pointer;
}
.list-cotainer li {
  padding-left: 20px;
}
.calc-select.calc-form-input, .calc-select.province.calc-form-input{
  border: 1px solid #4a4a4a;
  padding: 10px 12px;
  border-radius: 6px;
}
.province-input-wrapper, .sal-cal-country-wrapper {
  position: relative;
}
.currency-amt-container-2 {
  border: 1px solid #4a4a4a;
  padding: 10px 0px 10px 0px;
  border-radius: 6px;
}
input#calc-amount-input {
  background-image: unset;
}
.currency-amt-container-2 input {
  border: none;
  outline: none;
  width: 100%;
}
.currency-amt-container-2 select {
  border: none;
  outline: none;
  color: var(--secondary-color);
  position: relative;
}
.currency-amt-container-2 select::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-top-color: var(--secondary-color);
}
.currency-amt-container-2 input::placeholder {
  height: 100%;
}
#calc-form-new input::placeholder {
  color: var(--seconday-light-color);
}
.currency-amt-container-2 .position-relative {
  border-right: 1px solid #4a4a4a;
}

.download-pdf,#resp-download-pdf {
  background-color: var(--primary-color);
  color: var(--white-text-color);
  border: none;
  padding: 5px 16px;
  border-radius: 25px;
  font-size: 12px;
  cursor: pointer;
  align-items: center;
  gap: 8px;
}

/* download pdf wrapper  */
.download-pdf-wrapper,
.calc-again-toggle-wrapper {
  column-gap: 10px;
  padding: 16px 30px;
  border-radius: 10px;
  margin-top: 24px;
  position: relative;
  overflow: hidden;
}
.download-pdf-wrapper {
  margin-top: 48px;
}
.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;
  /* right: 0; */
  filter: blur(140px);
  z-index: -1;
}
.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;
}

/* toglle year month css */
.switches-container {
  padding: 0;
  position: relative;
  background: white;
  line-height: 2.5rem;
  border-radius: 3rem;
  margin-left: auto;
  width: 230px;
  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(--primary-color);
  font-size: 14px;
  line-height: 21px;
  -webkit-tap-highlight-color: transparent;
}
.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%);
}
.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);
  text-align: center;
}
.switch {
  border-radius: 3rem;
  background: linear-gradient(90deg, #9064da 0%, #2171e0 49.37%, #844eb4 100%);
  height: 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;
}
.value-msg-wrapper {
  max-width: 700px;
  margin: 16px auto;
}
.skuad-offer-label,
.current-country-wrapper {
  text-align: center;
}
/*
.salary-contribution h2,
a.calc-again,
.download-pdf,
.legend-value-span,
form#calc-form-new input,
#currency-input,
.country-and-flag h4,
.employment-cost .duration-salary,
.country-heading,
.calculator-dsc span,
.calc-selected-country,
.selected-province,
#total-employment-cost,
#gross-annual-pay {
  font-family: Avenirnextworld Demi, Arial, sans-serif;
}
*/
.country-and-flag h4 .calc-selected-country,
.country-and-flag h4 .selected-province {
  color: #ff4802;
}
.country-and-flag h4 {
  max-width: 700px;
  margin: 0 auto;
}
#current-country-flag {
  width: 28px;
  height: 28px;
  margin-left: 8px;
}
.switch div {
  width: 100%;
  opacity: 0;
  display: block;
  color: var(--white-text-color);
  transition: opacity 0.2s cubic-bezier(0.77, 0, 0.175, 1) 0.125s;
  will-change: opacity;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 14px;
  line-height: 21px;
}

.new-heading-wrapper,
.d-flex-align-center,
a.calc-again {
  gap: 8px;
}
a.calc-again {
  color: var(--link-color);
  text-decoration: none;
}
.calc-again:hover svg {
  transform: translateX(5px);
}
.calc-again svg {
  transition: all 0.2s ease-in-out;
}

.d-flex-new.offer-active {
  flex-direction: row-reverse;
  gap: 12px;
}

/* common css  */
.error-msg-container,
.salary-contribution,
.accordian-section,
.new-heading-wrapper,
.d-flex-align-center,
.cost-label-align,
.employment-cost,
a.calc-again,
.switches-container,
.download-pdf-wrapper,
.calc-again-toggle-wrapper,
.accordian-main.d-flex-new,
.salary-insight-form,
.form-input-wrapper,
.info-container,
.currency-amt-container-2,
.d-flex-new.justify-content-space-between.acc-item-container,
.breakup-parent,
.inner-breakup {
  display: flex;
}
.cost-label-align,
.employment-cost,
.d-flex-align-center,
.accordian-main.d-flex-new,
.d-flex-new.justify-content-space-between.acc-item-container,
.download-pdf-wrapper,
.calc-again-toggle-wrapper,
.breakup-parent {
  justify-content: space-between;
}
.error-msg-container,
.salary-contribution,
.accordian-section,
.inner-breakup,
.salary-insight-form {
  flex-direction: column;
}
.error-msg-container,
a.calc-again,
.new-heading-wrapper,
.d-flex-align-center,
.is-expat-wrapper,
.cost-label-align,
.employment-cost,
.accordian-main.d-flex-new,
.d-flex-new.justify-content-space-between.acc-item-container,
.download-pdf-wrapper,
.calc-again-toggle-wrapper {
  align-items: center;
}
/* css for result  */

.salary-contribution,
.accordian-section {
  gap: 24px;
}
.salary-contribution {
  width: 50%;
}
.salary-contribution h2 {
  font-size: 18px;
  color: var(--primary-color);
}
ul.d-flex-new.justify-content-space-between.acc-item-container {
  font-size: 14px;
  line-height: 21px;
}

.d-flex-new.justify-content-space-between.acc-item-container {
  list-style: none;
}
#hmphone-code-dropdown{
  border-right: 0;
}
.salary-contribution > :last-child {
    border-top: 1px solid rgba(37, 37, 38, 0.1);
    padding-top: 24px;
    margin-top: auto;
}
.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;
}
.error-msg-container{
  padding-bottom: 32px;
}
.cont-breakup.hidden {
  border: 0;
  margin-top: 0;
}
.breakup-parent {
  flex-direction: row-reverse;
  gap: 48px;
  box-shadow: 0px 20px 30px 0px #08345214, 0px 4px 20px -5px #0834521f;
  border-radius: 16px;
  padding: 32px;
  margin-top: 24px;
}
.inner-breakup {
  gap: 12px;
  background-color: #f7f7f7;
  padding: 16px;
}
.calculator-dsc-container {
  margin-top: 24px;
}
.calculator-dsc-container ul,
ul.d-flex-new.justify-content-space-between.acc-item-container {
  padding-left: 0;
  align-self: auto;
}
.calculator-dsc {
  font-size: 14px;
  line-height: 21px;
  list-style: none;
}
.old-skuad-fee {
  font-size: 12px;
  text-decoration: line-through;
  color: #4a4a4a;
}
.skuad-offer-label {
  background: linear-gradient(
    85.91deg,
    #faf4fd -31.4%,
    #f0f9fd 57.96%,
    #f1fcfb 146.43%
  );
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 50px;
}

.chart-legend ul {
  display: flex;
  flex-wrap: wrap; /* this enables wrapping */
  gap: 10px 20px; /* spacing between items */
  padding: 0;
  margin: 15px 0 0;
  list-style: none;
}

.chart-legend li {
  display: flex;
  flex-direction: column; /* two-line labels */
  line-height: 1.25;
  font-size: 14px;
  line-height: 21px;
}

/* css for chart legend colors and labels */
.chart-legend-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
}
.legend-item,
.legend-value-pervent {
  display: flex;
  align-items: center;
  gap: 8px;
}
.legend-value-pervent {
  margin-top: 4px;
  gap: 4px;
}
.legend-label {
  font-size: 12px;
  line-height: 100%;
}

.legend-color {
  width: 16px;
  height: 16px;
}

.rotate-180 {
  transition: 0.4s;
  transform: rotate(180deg);
}
@media screen and (max-width: 991px) {
  .breakup-parent {
    flex-direction: column-reverse;
  }
  .salary-contribution,
  .chart-container {
    width: 100%;
  }
  p.download-pdf-dsc {
    max-width: 70%;
  }
}
@media screen and (max-width: 568px) {
  .calc-res-wrapper{
    margin-top: 48px;
  }
  .chart-legend-container{
    margin-top: 0px;
    justify-content: start;
  }
    .breakup-parent{
    padding: 24px 16px;
    }
    .d-flex-new.offer-active{
        flex-direction: column-reverse;
    }
  .download-pdf-wrapper,
  .calc-again-toggle-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .calc-again-toggle-wrapper {
    align-items: center;
  }
  p.download-pdf-dsc {
    max-width: 100%;
  }
  .d-flex-align-center {
    max-width: 60%;
  }
  p.employment-cost-label {
    max-width: 50%;
  }
  .switches-container {
    margin-left: unset;
  }
  .d-flex-align-center.dis-offer-active {
    flex-direction: column;
    align-items: flex-start;
  }
  .canvas-container {
    width: 280px !important;
    width: 280px !important;
  }
}


/* 552967960560 */