@charset "UTF-8";
/* VARIABLES */
/* TYPOGRAPHY */
/* Google Fonts */
/* TYPOGRAPHY */
/* Google Fonts */
.main-calculator {
  background-color: white;
  border-radius: 2.5rem 2.5rem 0 0;
}
@media (max-width: 75rem) {
  .main-calculator {
    border-radius: 2.5rem 2.5rem 0 0;
    padding: 2.5rem !important;
  }
}
@media (max-width: 62rem) {
  .main-calculator {
    border-radius: 1.5rem 1.5rem 0 0;
  }
}
.main-calculator.custom-border {
  border-radius: 2.5rem;
}
@media (max-width: 75rem) {
  .main-calculator.custom-border {
    border-radius: 2.5rem;
  }
}
@media (max-width: 62rem) {
  .main-calculator.custom-border {
    border-radius: 1.5rem;
  }
}
.main-calculator a {
  color: #a44f17;
  text-decoration: underline;
}
.main-calculator .calculator-layout {
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: 3rem;
}
.main-calculator .calculator-layout > * {
  min-width: 0;
}
@media (max-width: 64rem) {
  .main-calculator .calculator-layout {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}
@media (max-width: 62rem) {
  .main-calculator .calculator-layout {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}
@media (max-width: 62rem) {
  .main-calculator .cbc__layout {
    gap: 0.5rem !important;
  }
}
.main-calculator .block-field-input {
  display: grid;
  grid-template-columns: 1fr 1fr;
  -moz-column-gap: 24px;
       column-gap: 24px;
}
@media (max-width: 64rem) {
  .main-calculator .block-field-input {
    grid-template-columns: 1fr;
    gap: 0px;
  }
}
.main-calculator .pfc__row {
  grid-template-columns: 1fr;
  gap: 0;
}
@media (max-width: 62rem) {
  .main-calculator .hide-mobile {
    display: none;
  }
}
@media (min-width: 62.0625rem) {
  .main-calculator .show-mobile {
    display: none;
  }
}
@media (max-width: 75rem) {
  .main-calculator .cbc__grid.block-field-input {
    grid-template-columns: 1fr 1fr;
    -moz-column-gap: 20px;
         column-gap: 20px;
  }
}
@media (max-width: 62rem) {
  .main-calculator .cbc__grid.block-field-input {
    grid-template-columns: 1fr;
    -moz-column-gap: 0px;
         column-gap: 0px;
  }
}
@media (max-width: 75rem) {
  .main-calculator {
    padding: 2rem;
  }
}
@media (max-width: 62rem) {
  .main-calculator {
    padding: 1.5rem;
  }
}
.main-calculator .js-form-item {
  position: relative;
  height: 64px;
}
.main-calculator .js-form-item .form-control {
  height: 64px;
  padding: 1.875rem 1rem 0.75rem 1.875rem;
  font-size: inherit;
}
[dir=rtl] .main-calculator .js-form-item .form-control {
  padding: 1.875rem 1.875rem 0.75rem 1rem;
}
.main-calculator .js-form-item label {
  position: absolute;
  top: 12px;
  left: 16px;
  color: #707070;
  transform-origin: left top;
  transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
[dir=rtl] .main-calculator .js-form-item label {
  left: auto;
  right: 16px;
}
.main-calculator .js-form-item .custom-label {
  top: 23px;
  pointer-events: none;
}
.main-calculator .js-form-item .custom-select-trigger {
  position: absolute;
  padding: 1.875rem 1.25rem 0.75rem 1.25rem;
  gap: 0.25rem !important;
  font-weight: 500;
  cursor: pointer;
}
[dir=rtl] .main-calculator .js-form-item .custom-select-trigger {
  right: auto;
  left: 16px;
}
.main-calculator .js-form-item .custom-select-trigger svg {
  width: 12px;
  height: 14px;
}
.main-calculator .js-form-item .custom-select-filed {
  position: absolute;
  font-weight: 400;
  width: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
}
.main-calculator .js-form-item .custom-select-filed .selected-label {
  margin-inline-start: -0.25rem;
}
[dir=rtl] .main-calculator .js-form-item .custom-select-filed {
  right: 0;
  left: 0;
}
.main-calculator .js-form-item .custom-select-filed svg {
  width: 24px;
  height: 24px;
  margin-top: -0.625rem;
}
.main-calculator .js-form-item .hfc__input-with-select {
  position: relative;
  height: 100%;
}
.main-calculator .js-form-item .hfc__input-with-select > .form-control {
  padding-inline-end: 6.5rem;
}
.main-calculator .js-form-item .hfc__input-with-select .hfc__tenure-select {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 12px;
  inset-inline-start: auto;
  width: auto;
  display: flex;
  align-items: center;
}
@media (min-width: 36.0625rem) {
  .main-calculator .js-form-item .hfc__input-with-select .hfc__tenure-select {
    z-index: 2;
  }
}
.main-calculator .js-form-item .hfc__input-with-select .hfc__tenure-select .custom-select-trigger {
  position: static;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  white-space: nowrap;
  gap: 0.25rem !important;
}
@media (min-width: 36.0625rem) {
  .main-calculator .js-form-item .hfc__input-with-select .hfc__tenure-select .custom-select-dropdown {
    top: calc(100% + 6px);
    inset-inline-end: 0;
    inset-inline-start: auto;
    min-width: 130px;
  }
}
.main-calculator .js-form-item .input-with-symbol {
  position: relative;
  display: flex;
  align-items: center;
}
.main-calculator .js-form-item .input-with-symbol .usa-symbol {
  position: absolute;
  left: 16px;
  pointer-events: none;
  top: 30px;
}
@media (max-width: 75rem) {
  .main-calculator .js-form-item .input-with-symbol .usa-symbol {
    top: 33px;
  }
}
[dir=rtl] .main-calculator .js-form-item .input-with-symbol .usa-symbol {
  left: auto;
  right: 16px;
}
.main-calculator .js-form-item .input-with-symbol .usa-symbol::before {
  content: "$";
  font-family: "NewRiyal";
  font-weight: 400;
  letter-spacing: 0;
  text-align: center;
}
.main-calculator .js-form-item .input-with-symbol .sar-symbol {
  position: absolute;
  left: 16px;
  pointer-events: none;
  top: 30px;
}
@media (max-width: 75rem) {
  .main-calculator .js-form-item .input-with-symbol .sar-symbol {
    top: 33px;
  }
}
[dir=rtl] .main-calculator .js-form-item .input-with-symbol .sar-symbol {
  left: auto;
  right: 16px;
}
.main-calculator .js-form-item .input-with-symbol .sar-symbol::before {
  content: "⃀";
  font-family: "NewRiyal";
  font-weight: 400;
  letter-spacing: 0;
  text-align: center;
}
.main-calculator .js-form-item.custom-input {
  width: 48%;
}
@media (max-width: 75rem) {
  .main-calculator .js-form-item.custom-input {
    width: 100%;
  }
}
.main-calculator .js-form-item [id^=hfc-tenure-value],
.main-calculator .js-form-item [id^=pfc-tenure-value],
.main-calculator .js-form-item [id^=pfc-sector-wrapper],
.main-calculator .js-form-item [id^=wpc-category-wrapper],
.main-calculator .js-form-item [id^=clc-sector-wrapper],
.main-calculator .js-form-item [id^=clc-transfer-wrapper],
.main-calculator .js-form-item [id^=clc-age] {
  padding: 1.875rem 1rem 0.75rem 1rem;
}
.main-calculator .btn-reset-date {
  display: block;
  cursor: pointer;
  width: 100%;
  text-align: center;
  text-decoration: underline;
  color: #F2D793;
  width: -moz-max-content;
  width: max-content;
  margin: 2.5rem auto 0;
}
.main-calculator .btn-apply-calculator {
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-calculator .hfc__radio-row {
  display: flex;
  gap: 0.75rem;
}
.main-calculator .hfc__radio-row .hfc__radio {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border: 1px solid #e8e2db;
  border-radius: 1rem;
  cursor: pointer;
  background: #fff;
  max-height: 44px;
  height: 44px;
  justify-content: center;
}
.main-calculator .hfc__radio-row .hfc__radio input[type=radio] {
  display: none;
}
.main-calculator .hfc__radio-row .hfc__radio::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 1px solid #E8E2DB;
  border-radius: 50%;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.main-calculator .hfc__radio-row .hfc__radio.hfc__radio--active {
  border-color: #F2D793;
  color: black;
  background: #fdf3d9;
}
.main-calculator .hfc__radio-row .hfc__radio.hfc__radio--active::before {
  border: 0.3125rem solid #F2D793;
  background: white;
  box-shadow: inset 0 0 0 2px #fff;
  width: 20px;
  height: 20px;
}
.main-calculator .result-error {
  padding: 0.5rem 0.75rem;
  margin: 2.5rem 0 0.5rem;
  line-height: 1.5;
  border-radius: 1rem;
  background-color: #FDE9E6;
}

.result-block {
  background: linear-gradient(55deg, #732f0e 0%, #a44f17 100%);
  border-radius: 2rem;
}
@media (max-width: 64rem) {
  .result-block {
    height: -moz-max-content;
    height: max-content;
    padding: 1.75rem;
  }
}
@media (max-width: 62rem) {
  .result-block {
    padding: 1.5rem 1rem;
  }
}
.result-block .result-items p,
.result-block .result-items span {
  margin: 0;
  color: #fff;
}
.result-block .result-items .main-result [id^=hfc-out-installment],
.result-block .result-items .main-result [id^=pfc-out-installment] {
  justify-content: flex-start;
}
[dir=rtl] .result-block .result-items .main-result [id^=hfc-out-installment],
[dir=rtl] .result-block .result-items .main-result [id^=pfc-out-installment] {
  justify-content: flex-end;
}
.result-block .result-items .main-result span {
  overflow-wrap: anywhere;
  font-size: 2.25rem;
  line-height: 2.75rem;
}
@media (max-width: 64rem) {
  .result-block .result-items .main-result span {
    font-size: 1.75rem;
    line-height: 2.125rem;
  }
}
@media (max-width: 62rem) {
  .result-block .result-items .main-result span {
    font-size: 1.25rem;
    line-height: 1.625rem;
  }
}
.result-block .result-value-calculator {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.result-block .result-value-calculator .hfc__result-lbl {
  max-width: 200px;
}
@media (max-width: 62rem) {
  .result-block .result-value-calculator [id^=fxc-label-fee] {
    max-width: 200px;
  }
}
.result-block .result-value-calculator .badge-value {
  background: rgba(255, 255, 255, 0.2);
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  color: #fff;
}
@media (max-width: 75rem) {
  .result-block .result-value-calculator .badge-value {
    min-height: 40px;
    max-height: 40px;
  }
}
.result-block .badge-number {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.125rem;
}
[dir=rtl] .result-block .badge-number {
  flex-direction: row-reverse;
}
.result-block .badge-number::before {
  content: "⃀";
  font-family: "NewRiyal";
  font-weight: 400;
  letter-spacing: 0;
  text-align: center;
}

.hfc--hidden {
  display: none;
}

.block-header {
  margin-bottom: 3rem;
  text-align: center;
}
@media (max-width: 64rem) {
  .block-header {
    margin-bottom: 2rem;
  }
}
@media (max-width: 61.9375rem) {
  .block-header {
    margin-bottom: 1.5rem;
  }
}

.wpc__disclaimer {
  text-align: center;
}

@media (max-width: 75rem) {
  .wpc__layout {
    align-items: center;
  }
}

.fxc-rate-info .riyal-symbol::before {
  margin: 0;
}

.spc-badge {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

[id^=wpc-out-points] {
  text-align: center;
}

.custom-select-wrapper.has-value ~ .custom-label,
.custom-select-wrapper.has-value + .custom-label {
  top: 14px;
}

.clc-transfer-wrapper.has-value ~ .custom-label,
.clc-transfer-wrapper.has-value + .custom-label {
  top: 14px;
}

.clc__disclaimer p {
  margin: 0;
}

.m-1200 {
  margin: 3rem;
}

.mt-1200 {
  margin-top: 3rem;
}

.mb-1200 {
  margin-bottom: 3rem;
}
@media (max-width: 75rem) {
  .mb-1200 {
    margin-bottom: 1rem;
  }
}
@media (max-width: 62rem) {
  .mb-1200 {
    margin-bottom: 2rem;
  }
}

.p-1200 {
  padding: 3rem;
}

.pt-1200 {
  padding-top: 3rem;
}

.pb-1200 {
  padding-bottom: 3rem;
}

.m-1000 {
  margin: 2.5rem;
}

.mt-1000 {
  margin-top: 2.5rem;
}

.mb-1000 {
  margin-bottom: 2.5rem;
}

.p-1000 {
  padding: 2.5rem;
}
@media (max-width: 75rem) {
  .p-1000 {
    padding: 2rem !important;
  }
}
@media (max-width: 62rem) {
  .p-1000 {
    padding: 1.25rem !important;
  }
}

.pt-1000 {
  padding-top: 2.5rem;
}

.pb-1000 {
  padding-bottom: 2.5rem;
}

.m-800 {
  margin: 2rem;
}

.mt-800 {
  margin-top: 2rem;
}

.mb-800 {
  margin-bottom: 2rem;
}

.p-800 {
  padding: 2rem;
}
@media (max-width: 75rem) {
  .p-800 {
    padding: 1.75rem;
  }
}
@media (max-width: 62rem) {
  .p-800 {
    padding: 1.5rem 1rem;
  }
}

.pt-800 {
  padding-top: 2rem;
}

.pb-800 {
  padding-bottom: 2rem;
}

.m-600 {
  margin: 1.5rem;
}

.mt-600 {
  margin-top: 1.5rem;
}

.mb-600 {
  margin-bottom: 1.5rem;
}
@media (max-width: 75rem) {
  .mb-600 {
    margin-bottom: 1rem;
  }
}

.p-600 {
  padding: 1.5rem;
}

.pt-600 {
  padding-top: 1.5rem;
}

.pb-600 {
  padding-bottom: 1.5rem;
}

.m-500 {
  margin: 1.25rem;
}

.mt-500 {
  margin-top: 1.25rem;
}

.mb-500 {
  margin-bottom: 1.25rem;
}

.p-500 {
  padding: 1.25rem;
}

.pt-500 {
  padding-top: 1.25rem;
}

.pb-500 {
  padding-bottom: 1.25rem;
}

.m-400 {
  margin: 1rem;
}

.mt-400 {
  margin-top: 1rem;
}

.mb-400 {
  margin-bottom: 1rem;
}

.p-400 {
  padding: 1rem;
}

.pt-400 {
  padding-top: 1rem;
}

.pb-400 {
  padding-bottom: 1rem;
}

.m-300 {
  margin: 0.75rem;
}

.mt-300 {
  margin-top: 0.75rem;
}

.mb-300 {
  margin-bottom: 0.75rem;
}

.p-300 {
  padding: 0.75rem;
}

.pt-300 {
  padding-top: 0.75rem;
}

.pb-300 {
  padding-bottom: 0.75rem;
}