/* Fonts */
@font-face {
  font-family: "Poppins";
  font-weight: 300 400;
  src: url("../fonts/Poppins-Regular.ttf");
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  font-weight: 500;
  src: url("../fonts/Poppins-Medium.ttf");
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  font-weight: 600;
  src: url("../fonts/Poppins-SemiBold.ttf");
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  font-weight: 700;
  src: url("../fonts/Poppins-Bold.ttf");
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  font-weight: 900;
  src: url("../fonts/Poppins-ExtraBold.ttf");
  font-display: swap;
}

/* Global */
:root {
  --pandu-primary-color-1: #323FAD;

  --pandu-white: #FFFFFF;
  --pandu-gray-button: #CECECE;
  --pandu-input-bg: #E7E6E6;
  --pandu-profile-label: #222257;
  --pandu-back-button: #C1C1C1;
  --pandu-active-radio: #A1A1A1;

  --pandu-upload-border: #2257A2;
  --pandu-inactive-checkpoint: #A1A1A1;

  --pandu-section-progress-bg: #EDEDED;

  --home-bg: #CAEFF4;
  --section-1: #C9F2DA;
  --section-2: #FFEFC8;
  --section-3: #E6F1FE;
  --section-4: #D3EACA;
  --section-5: #FFD5E2;

  --pandu-spouse-card-bg: #98BAEA;
  --pandu-spouse-card-2-bg: #BDD2F1;
  --pandu-empty-spouse-card: #F5F5F5;
  --pandu-status-result: #B2DCFC;

  --pandu-harta-color-blue: #B2DCFC;
  --pandu-harta-color-green: #ABD8AB;
  --pandu-harta-color-orange: #FFBF9D;
  --pandu-harta-color-purple: #BBBBFF;
  --pandu-harta-color-white: #FFFFFF;
  --pandu-harta-color-pink: #FDB2B2;
  --pandu-harta-color-brown: #EB996E;

  --bs-font-sans-serif: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

body {
  font-size: calc(15 / 16 * 1rem);
}

.pandu-section {
  padding: calc(30 / 16 * 1rem) 0rem;
}

h1 {
  font-size: calc(50 / 16 * 1rem);
  font-weight: 700;
}

.section-header {
  color: var(--pandu-profile-label);
}

.subheader {
  color: var(--pandu-profile-label);
  font-size: calc(35 / 16 * 1rem);
}

.subtext {
  font-size: calc(12 / 16 * 1rem);
}

.pandu-button {
  border-radius: calc(20 / 16 * 1rem);
  font-size: calc(20 / 16 * 1rem);
  font-weight: 700;
  padding: calc(17 / 16 * 1rem) calc(33 / 16 * 1rem);
  text-decoration: none;
}

.body-navigation-wrapper {
  align-items: center;
  display: flex;
  gap: calc(33 / 16 * 1rem);
  justify-content: center;
}

.body-navigation-wrapper .body-nav {
  border-radius: calc(20 / 16 * 1rem);
  color: var(--pandu-white);
  font-size: calc(20 / 16 * 1rem);
  font-weight: 700;
  margin: calc(64 / 16 * 1rem) 0rem;
  padding: calc(17 / 16 * 1rem) calc(33 / 16 * 1rem);
  text-decoration: none;
}

.body-navigation-wrapper .body-nav.prev {
  background-color: var(--pandu-back-button);
}

.body-navigation-wrapper .body-nav.next {
  background-color: var(--pandu-primary-color-1);
}

.hidden {
  height: 0rem;
  overflow: hidden;
  padding: 0rem !important;
  transition: all 1s ease-in-out;
}

.really.hidden,
.field-pasangan.hidden {
  display: none;
}

input {
  cursor: text;
}

.radio-label {
  cursor: pointer;
}

.pandu-img {
  height: auto;
  width: 100%;
  display: block;
}

.pandu-actual-radio-button-wrapper .pandu-radio-button-wrapper {
  align-items: center;
  display: flex;
  gap: calc(8 / 16 * 1rem);
}

.pandu-actual-radio-button-wrapper input[type="radio"] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  appearance: none;
  /* For iOS < 15 to remove gradient background */
  background-color: #fff;
  /* Not removed via appearance */
  margin: 0;

  border-radius: 100%;
  box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3);
  height: calc(20 / 16 * 1rem);
  width: calc(20 / 16 * 1rem);

  display: grid;
  place-content: center;
}

.pandu-actual-radio-button-wrapper input[type="radio"]::before {
  content: "";
  height: calc(12 / 16 * 1rem);
  width: calc(12 / 16 * 1rem);
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--pandu-primary-color-1);
  border-radius: 100%;
}

.pandu-actual-radio-button-wrapper input[type="radio"]:checked::before {
  transform: scale(1);
}

.pandu-actual-radio-button-wrapper .pandu-radio-wrapper {
  display: flex;
  gap: calc(32 / 16 * 1rem);
  justify-content: center;
}

.pandu-actual-radio-button-wrapper .radio-label {
  margin-bottom: 0rem !important;
  width: unset !important;
}

input[type="file"] {
  display: none;
}

.mobile-only {
  display: none;
}

@media (max-width: 576px) {
  h1 {
    font-size: calc(20 / 16 * 1rem);
  }

  .subheader {
    font-size: calc(15 / 16 * 1rem);
  }

  .desktop-only {
    display: none;
  }

  .mobile-only {
    display: block;
  }

  body {
    font-size: calc(10 / 16 * 1rem);
  }

  .subtext {
    font-size: calc(8 / 16 * 1rem);
  }

  .pandu-button {
    border-radius: calc(10 / 16 * 1rem);
    font-size: calc(12 / 16 * 1rem);
    padding: calc(7 / 16 * 1rem) calc(19 / 16 * 1rem);
  }

  .body-navigation-wrapper .body-nav {
    font-size: calc(12 / 16 * 1rem);
    margin: calc(28 / 16 * 1rem) 0rem;
    padding: calc(7 / 16 * 1rem) calc(19 / 16 * 1rem);
  }
}

/* Navbar */
.pandu-navbar {
  height: calc(104 / 16 * 1rem);
}

.logo-wrapper {
  align-items: center;
  display: flex;
  gap: calc(20 / 16 * 1rem);
  height: 100%;
}

.pandu-logo {
  height: auto;
  width: calc(110 / 16 * 1rem);
}

.navbar-wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.navbar-links-wrapper {
  align-items: center;
  display: flex;
  gap: calc(22.5 / 16 * 1rem);
}

.pandu-nav {
  color: var(--pandu-primary-color-1);
  font-size: calc(15 / 16 * 1rem);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  width: calc(120 / 16 * 1rem);
}

.pandu-nav:hover {
  color: var(--pandu-primary-color-1);
}

.pandu-nav.pandu-button {
  background-color: var(--pandu-gray-button);
}

.pandu-nav.pandu-button.white {
  background-color: var(--pandu-white);
}

.collapse-wrapper {
  justify-content: end;
}

@media(max-width: 576px) {
  .pandu-logo {
    width: calc(60 / 16 * 1rem);
  }

  .navbar-wrapper {
    position: relative;
  }

  .collapse-wrapper {
    position: absolute;
    top: calc(100% + (12 / 16 * 1rem));
    right: 0rem;
  }

  .navbar-links-wrapper {
    flex-direction: column;
    gap: calc(13 / 16 * 1rem);

    background-color: #E2E2E2;
    border-radius: calc(10 / 16 * 1rem);
    padding: calc(19 / 16 * 1rem);
  }

  .navbar-links-wrapper .pandu-nav.pandu-button {
    background-color: transparent;
  }

  .navbar-links-wrapper .pandu-button {
    padding: 0rem;
  }
}

/* Footer */
.pandu-footer {
  align-items: center;
  display: flex;
  height: calc(104 / 16 * 1rem);
}

.footer-wrapper {
  align-items: center;
  display: flex;
  gap: calc(60 / 16 * 1rem);
  justify-content: end;
}

.footer-item,
.footer-item a {
  color: var(--pandu-primary-color-1);
  font-size: calc(12 / 16 * 1rem);
  text-align: center;
  text-decoration: none;
}

.footer-item p {
  margin: 0rem;
}

@media (max-width: 576px) {
  .footer-wrapper {
    gap: unset;
    justify-content: space-between;
    margin: 0 calc((50 - 12) / 16 * 1rem);
  }

  .footer-item,
  .footer-item a {
    font-size: calc(8 / 16 * 1rem);
  }
}

/* Home */
.home-body {
  background-color: var(--home-bg);
}

.intro-text {
  color: var(--pandu-primary-color-1);
  text-align: center;

  display: flex;
  flex-direction: column;
  gap: calc(20 / 16 * 1rem);
  height: 100%;
  justify-content: center;
}

.intro-text h1,
.pandu-login-form .text h1 {
  font-size: calc(42 / 16 * 1rem);
}

.intro-text .desc {
  display: block;
  margin: 0rem auto;
  width: calc(2 / 3 * 100%);

  text-align: justify;
}

.intro-text .pandu-button {
  background-color: var(--pandu-primary-color-1);
  color: var(--pandu-white);
  display: inline-block;
  font-weight: 700;
}

.image-wrapper .home {
  height: auto;
  width: calc(400 / 1280 * 100vw);
}

@media (max-width: 576px) {

  .intro-text h1,
  .pandu-login-form .text h1 {
    font-size: calc(25 / 16 * 1rem);
  }

  .image-wrapper .home {
    width: calc(252 / 375 * 100vw);
  }
}

/* Login */
.pandu-login-form {
  background-color: var(--pandu-primary-color-1);
  border-radius: calc(20 / 16 * 1rem);
  color: var(--pandu-white);
  padding: calc(40 / 16 * 1rem) calc(65 / 16 * 1rem);
}

.pandu-login-form .text {
  padding-right: calc(30 / 16 * 1rem);
}

.pandu-login-form .text p {
  font-size: calc(18 / 16 * 1rem);
  margin-bottom: calc(24 / 16 * 1rem);
}

.pandu-login-form label {
  margin-bottom: calc(28 / 16 * 1rem);
  width: 100%;
}

.pandu-login-form label .pandu-label {
  font-weight: 700;
  padding-bottom: calc(11 / 16 * 1rem);
}

.pandu-input {
  border: none;
  border-radius: calc(20 / 16 * 1rem);
  background-color: var(--pandu-input-bg);
  height: calc(58 / 16 * 1rem);
  padding: 1rem;
  width: 100%;
}

.pandu-input.readonly,
div.ph-mt-value {
  filter: brightness(0.9);
}

.pandu-login-form .pandu-button {
  background-color: var(--pandu-white);
  color: var(--pandu-primary-color-1);
}

.signup-wrapper {
  margin-top: calc(40 / 16 * 1rem);
}

.signup-wrapper a {
  color: var(--pandu-white);
  font-weight: 700;
}

.image-wrapper {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
}

@media (max-width: 576px) {
  .pandu-login-form .text p {
    font-size: calc(12 / 16 * 1rem);
  }

  .pandu-input {
    height: unset;
    padding: calc(8 / 16 * 1rem) calc(5 / 16 * 1rem);
  }
}

/* Profile */
.clipboard {
  background-color: var(--pandu-white);
  border-radius: calc(20 / 16 * 1rem);
  padding: calc(87 / 16 * 1rem) calc(47 / 16 * 1rem);
  position: relative;
}

.clipboard .clip {
  position: absolute;
  top: calc(0% - (128px / 2));
  left: calc(50% - (400px / 2));
}

.clipboard h1 {
  text-align: center;
}

.clipboard .pandu-form-input {
  display: flex;
  gap: calc(95 / 16 * 1rem);
  margin-top: calc(53 / 16 * 1rem);
}

.clipboard .pandu-form-input .left,
.clipboard .pandu-form-input .right {
  flex: 1;
}

.clipboard .pandu-form-input .label-wrapper,
.password-wrapper {
  margin-bottom: calc(28 / 16 * 1rem);
  width: 100%;
}

.password-wrapper {
  display: flex;
  flex-direction: column;
  gap: calc(8 / 16 * 1rem);
}

.additional-password-wrapper {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
}

.additional-password-wrapper .reset-password {
  color: var(--pandu-white);
  font-size: calc(13 / 16 * 1rem);
  text-decoration: none;

  border: none;
  background-color: rgba(0, 0, 0, 0);
}

.pandu-login-form.reset {
  align-items: center;
  display: flex;
  height: 100%;
}

.pandu-login-form.reset .reset-div {
  width: 100%;
}

.show-password-label {
  display: flex;
  gap: calc(12 / 16 * 1rem);
  font-size: calc(13 / 16 * 1rem);
}

.pandu-login-form label.show-password-label {
  width: unset;
}

.clipboard .pandu-form-input .label-wrapper.password {
  margin-bottom: 0rem;
}

.change-password {
  align-items: center;
  display: flex;
}

.change-password a {
  padding: calc(17 / 16* 1rem) calc(33 / 16* 1rem);

  background-color: var(--pandu-input-bg);
  border-radius: calc(20 / 16 * 1rem);
  color: var(--bs-dark);
  text-decoration: none;
}

.clipboard .pandu-label {
  color: var(--pandu-profile-label);
  font-weight: 700;
  margin-bottom: calc(11 / 16 * 1rem);
}

.clipboard input[type="radio"] {
  /* Add if not using autoprefixer */
  /* apparently doesn't work with required so replacing with 0 width & height
  -webkit-appearance: none;
  appearance: none;
  display: none;
  */
  height: 0px;
  width: 0px;
  /* For iOS < 15 to remove gradient background */
  background-color: #fff;
  /* Not removed via appearance */
  margin: 0;

}

.clipboard .pandu-input.radio-label {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: calc(17 / 16 * 1rem) calc(33 / 16 * 1rem);
}

.clipboard .pandu-input.radio-label.active,
.year-wrapper .pandu-radio-wrapper .pandu-input.radio-label.active {
  background-color: var(--pandu-active-radio);
}

.clipboard .pandu-radio-wrapper {
  display: flex;
  gap: calc(26 / 16 * 1rem);
}

.clipboard .pandu-radio-wrapper .pandu-radio-button-wrapper {
  display: inline-flex;
}

.clipboard .pandu-form-input .pandu-notice {
  font-size: calc(12 / 16 * 1rem);
  margin-bottom: calc(11 / 16* 1rem);
}

.pandu-textarea {
  background-color: var(--pandu-input-bg);
  border: none;
  border-radius: calc(20 / 16 * 1rem);
  margin: calc(11 / 16 * 1rem) 0rem;
  padding: calc(16 / 16 * 1rem);
  width: 100%;
}

.pandu-upload-wrapper {
  margin-top: calc(67 / 16 * 1rem);
  margin-bottom: calc(78 / 16 * 1rem);
  text-align: center;
}

.pandu-upload-wrapper .preface {
  margin-bottom: calc(25 / 16 * 1rem);
}

.pandu-upload-button {
  border: calc(1 / 16 * 1rem) solid var(--pandu-upload-border);
  border-radius: calc(20 / 16 * 1rem);
  color: var(--pandu-profile-label);
  font-weight: 700;
  padding: calc(21 / 16 * 1rem) calc(35 / 16 * 1rem);
}

.year-wrapper {
  align-items: center;
  display: flex;
  gap: calc(33 / 16 * 1rem);
}

.year-wrapper .pandu-radio-wrapper {
  gap: calc(33 / 16 * 1rem);
}

.year-wrapper .pandu-radio-wrapper .pandu-input.radio-label {
  background-color: var(--pandu-white);
  border: calc(1 / 16 * 1rem) solid var(--pandu-primary-color-1);
}

@media (max-width: 576px) {
  .clipboard {
    padding: 2rem 1rem;
  }

  .clipboard .clip {
    top: calc(0% - (32.5px / 2));
    left: calc(50% - (100px / 2));
    width: 100px;
  }

  .clipboard .pandu-form-input {
    flex-direction: column;
    gap: calc(16 / 16 * 1rem);
  }

  .clipboard .pandu-input.radio-label {
    padding: calc(9 / 16 * 1rem) calc(18 / 16 * 1rem);
  }

  .pandu-upload-wrapper {
    margin-top: 0rem;
    margin-bottom: calc(24 / 16 * 1rem);
    text-align: center;
  }
}

/* Section 1 */
.section-1-body {
  background-color: var(--section-1);
}

.pandu-progress-wrapper {
  margin: 0rem calc(15 / 16 * 1rem);
  margin-bottom: calc(45 / 16 * 1rem);
  position: relative;
}

.pandu-progress-bar {
  background-color: var(--pandu-section-progress-bg);
  height: calc(12 / 16 * 1rem);
  width: calc(100% - (20px / 2));

  position: absolute;
  top: calc(50% - (12px / 2));
  left: 0;
  z-index: -1;
}

.pandu-progress-checkpoint-wrapper {
  align-items: center;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.pandu-checkpoint {
  background-color: var(--pandu-inactive-checkpoint);
  border-radius: 100%;
  height: calc(20 / 16 * 1rem);
  width: calc(20 / 16 * 1rem);
}

.pandu-checkpoint.active {
  background-color: var(--pandu-primary-color-1);
}

.question-wrapper {
  text-align: center;
}

.q1 {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;

  height: calc(450 / 16 * 1rem);
  width: calc(800 / 16 * 1rem);

  display: block;
  margin: auto;

  position: relative;
}

.answer-wrapper input[type="radio"] {
  /* Add if not using autoprefixer */
  /* apparently doesn't work with required so replacing with 0 width & height
  -webkit-appearance: none;
  appearance: none;
  display: none;
  */
  height: 0px;
  width: 0px;
  /* For iOS < 15 to remove gradient background */
  background-color: #fff;
  /* Not removed via appearance */
  margin: 0;

}

.answer-wrapper .pandu-input.radio-label {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: calc(17 / 16 * 1rem) calc(33 / 16 * 1rem);
}

.answer-wrapper .pandu-input.radio-label.active,
.status-wrapper .answer-wrapper .pandu-radio-wrapper .pandu-input.radio-label.active {
  background-color: var(--pandu-primary-color-1);
  color: var(--pandu-white);
}

.question-wrapper .answer-wrapper .pandu-radio-wrapper {
  display: flex;
  gap: calc(30 / 16 * 1rem);

  position: absolute;
  bottom: calc(86 / 16 * 1rem);
  left: calc(80 / 16 * 1rem);
}

.answer-wrapper .pandu-radio-wrapper .pandu-radio-button-wrapper {
  display: inline-flex;
}

.spouse-wrapper {
  margin: calc(60 / 16 * 1rem) 0rem;
}

.spouse-wrapper .image-wrapper {
  align-items: center;
  display: flex;
  height: 100%;
}

.spouse-card {
  background-color: var(--pandu-spouse-card-bg);
  border-radius: calc(20 / 16 * 1rem);
}

.spouse-card .head {
  align-items: center;
  display: flex;
  padding: calc(26 / 16 * 1rem) calc(22 / 16 * 1rem);
}

.spouse-card .body {
  padding: calc(96 / 16 * 1rem) calc(42 / 16 * 1rem) calc(65 / 16 * 1rem);
}

.spouse-card .body label {
  margin-bottom: calc(26 / 16 * 1rem);
  width: 100%;
}

.spouse-card .pandu-label {
  font-size: calc(15 / 16 * 1rem);
  font-weight: 700;
  margin-bottom: calc(11 / 16 * 1rem);
}

.spouse-card .body .pandu-input {
  width: 100%;
}

.status-wrapper {
  position: relative;
}

.background-wrapper {
  width: 50%;
}

.status-wrapper .answer-wrapper {
  position: absolute;
  right: 0;
  top: 0;

  height: 100%;
  width: calc(7 / 12 * 100%);

  align-items: flex-end;
  display: flex;
}

.status-wrapper .answer-wrapper .pandu-radio-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: calc(54 / 16 * 1rem);
}

.status-wrapper .answer-wrapper .pandu-radio-wrapper .pandu-input.radio-label {
  background-color: var(--pandu-white);
  flex: 3;
}

.status-wrapper .answer-wrapper .pandu-radio-wrapper .pandu-input.radio-label.disabled {
  filter: brightness(0.8);
  cursor: default;
}

.status-wrapper .answer-wrapper .pandu-radio-wrapper .status-explanation {
  flex: 5;
  font-size: calc(12 / 16 * 1rem);
}

.status-wrapper .answer-wrapper .pandu-radio-button-wrapper {
  align-items: center;
  display: flex;
  gap: calc(32 / 16 * 1rem);
}

.status-tooltip {
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 100%;
  color: var(--pandu-white);
  font-size: calc((8 / 15 * 23) / 16 * 1rem);
  height: calc(15 / 16 * 1rem);
  width: calc(15 / 16 * 1rem);

  align-items: center;
  display: flex;
  justify-content: center;
}

.follow-up-question {
  margin-top: calc(64 / 16 * 1rem);
  margin-bottom: calc(35 / 16 * 1rem);
  text-align: center;
}

.q2 .spouse-card {
  background-color: var(--pandu-spouse-card-2-bg);
}

.q2 .spouse-card .head {
  padding-left: calc(82 / 16 * 1rem);
  padding-right: calc(82 / 16 * 1rem);
  padding-bottom: 0rem;
  position: relative;
}

.q2 .spouse-card .head .spouse-card-close {
  left: calc(22 / 16 * 1rem);
  position: absolute;
}

.q2 .spouse-card .body {
  display: flex;
  gap: calc(18 / 16 * 1rem) calc(49 / 16 * 1rem);
  flex-wrap: wrap;
  padding: calc(27 / 16 * 1rem) calc(82 / 16 * 1rem) calc(55 / 16 * 1rem);
  position: relative;
}

.q2 .spouse-card .body label {
  margin-bottom: 0rem;
  width: calc((100% - 49px) / 2);
}

.liabilities-list {
  display: flex;
  flex-direction: column;
  gap: calc(43 / 16 * 1rem);
}

.spouse-card-close,
.empty-card,
.add-btn,
.remove-btn {
  cursor: pointer;
}

.spouse-card .head .pandu-label {
  margin-bottom: 0rem;
}

.empty-card {
  border-radius: calc(20 / 16 * 1rem);
  background-color: var(--pandu-empty-spouse-card);
  margin-top: calc(43 / 16 * 1rem);
  margin-bottom: calc(76 / 16 * 1rem);
  padding: calc(10 / 16 * 1rem) 0rem;
  width: 100%;
}

.empty-card .add-btn {
  display: block;
  text-align: center;
}

.result-wrapper {
  background-color: var(--pandu-status-result);
  border-radius: calc(20 / 16 * 1rem);
  padding: calc(45 / 16 * 1rem) calc(118 / 16 * 1rem);
  text-align: center;
}

.result-wrapper .caption {
  margin-bottom: calc(11 / 16 * 1rem);
}

.result-wrapper .result {
  font-weight: 700;
}

.pandu-progress {
  background-color: var(--pandu-primary-color-1);
  height: calc(12 / 16 * 1rem);
  width: 0rem;
  left: calc(20px / 2);

  position: absolute;
  z-index: -1;
}

.q1.q3-image,
.q1.q4-image {
  height: calc(484 / 16 * 1rem);
  margin-top: calc(72 / 16 * 1rem);
  margin-bottom: calc(110 / 16 * 1rem);
}

.section-image {
  height: calc(330 / 16 * 1rem);
  margin-top: calc(20 / 16 * 1rem);
  margin-bottom: calc(20 / 16 * 1rem);
  z-index: -1;
}

.q3.answer-wrapper .pandu-radio-wrapper,
.q4.answer-wrapper .pandu-radio-wrapper {
  gap: calc(139 / 16 * 1rem);
  justify-content: center;
  position: initial;
}

.q3.answer-wrapper .pandu-radio-wrapper .pandu-radio-button-wrapper,
.q4.answer-wrapper .pandu-radio-wrapper .pandu-radio-button-wrapper {
  align-items: center;
  flex: 1;
  flex-direction: column;
  gap: calc(12 / 16 * 1rem);
}

.q3 .pandu-input.radio-label {
  background-color: var(--pandu-white);
  width: initial;
}

.q4 .pandu-input.radio-label {
  background-color: transparent;
  border: calc(1 / 16 * 1rem) solid var(--pandu-primary-color-1);
  width: calc(343 / 16 * 1rem);
}

.q4.answer-wrapper .pandu-radio-wrapper {
  gap: calc(36 / 16 * 1rem);
}

@media (max-width: 576px) {
  .q1 {
    height: calc(224 / 16* 1rem);
    width: calc(339 / 16* 1rem);
  }

  .answer-wrapper .pandu-input.radio-label {
    padding: calc(9 / 16* 1rem) calc(15 / 16* 1rem);
  }

  .question-wrapper .answer-wrapper .pandu-radio-wrapper {
    left: calc(20 / 16 * 1rem);
    bottom: 0rem;
  }

  .background-wrapper {
    width: 100%;
  }

  .status-wrapper .answer-wrapper {
    margin-top: calc(16 / 16 * 1rem);
    position: relative;
    width: 100%;
  }

  .spouse-card .body {
    margin-top: calc(16 / 16 * 1rem);
    padding: calc(21 / 16 * 1rem) calc(12 / 16 * 1rem);
  }

  .status-wrapper .answer-wrapper .pandu-radio-wrapper {
    gap: 1rem;
  }

  .status-wrapper .answer-wrapper .pandu-radio-button-wrapper {
    flex-direction: column;
    gap: calc(16 / 16 * 1rem);
    width: calc(163 / 16 * 1rem);
  }

  .status-wrapper .answer-wrapper .pandu-radio-wrapper .pandu-input.radio-label,
  .status-wrapper .answer-wrapper .pandu-radio-wrapper .status-explanation {
    flex: unset;
  }

  .q2 .spouse-card .body {
    padding: calc(10 / 16 * 1rem) calc(14 / 16 * 1rem) calc(30 / 16 * 1rem);
  }

  .q2 .spouse-card .body label {
    width: 100%;
  }

  .result-wrapper {
    padding: calc(9 / 16 * 1rem) calc(72 / 16 * 1rem);
  }

  .q1.q3-image,
  .q1.q4-image {
    height: calc(235 / 16 * 1rem);
    margin: calc(10 / 16 * 1rem) 0;
  }

  .q3.answer-wrapper .pandu-radio-wrapper,
  .q4.answer-wrapper .pandu-radio-wrapper {
    flex-wrap: wrap;
    gap: calc(30 / 16 * 1rem);
  }

  .question-wrapper {
    margin: 2rem 0;
  }
}

/* Section 2 */
.section-2-body {
  background-color: var(--section-2);
}

.section-2-body .pandu-progress {
  width: calc(25% - (20px * 25 / 100));
}

.job-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.job-list {
  display: flex;
  flex-wrap: wrap;
  gap: calc(16 / 16 * 1rem);
  margin-top: calc(18 / 16 * 1rem);
}

.job-list input[type="radio"] {
  color: var(--pandu-primary-color-1);
  height: calc(16 / 16 * 1rem);
  width: calc(16 / 16 * 1rem);
  border: calc(1 / 16 * 1rem) solid var(--pandu-primary-color-1);
  border-radius: 100%;

  display: grid;
  place-content: center;
}

.job-list input[type="radio"]::before {
  content: "";
  height: calc(16 / 16 * 1rem);
  width: calc(16 / 16 * 1rem);
  border-radius: 100%;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1rem 1rem var(--pandu-primary-color-1);
}

.job-list input[type="radio"]:checked::before {
  transform: scale(1);
}

.q4.answer-wrapper .job-list .pandu-input.radio-label {
  background: var(--pandu-white);
  gap: calc(10 / 16 * 1rem);
  justify-content: flex-start;
  padding: calc(21 / 16 * 1rem);
  width: calc(50% - 1rem);
}

/* Section 2 */
.pandu-download-wrapper {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}

.pandu-download-wrapper.preview {
  margin: calc(64 / 16 * 1rem) 0;
}

.pandu-download-btn {
  color: var(--pandu-profile-label);
  font-size: calc(20 / 16 * 1rem);
  font-weight: 700;
  padding: calc(18 / 16 * 1rem);
  text-decoration: none;

  align-items: center;
  display: inline-flex;
  justify-content: center;

  background-color: var(--pandu-white);
  border: calc(1 / 16 * 1rem) solid var(--pandu-upload-border);
  border-radius: calc(20 / 16 * 1rem);
  margin-bottom: calc(5 / 16 * 1rem);
}

.pandu-download-wrapper .body-navigation-wrapper .body-nav {
  margin: 0rem;
  margin-top: calc(27 / 16 * 1rem);
}

.checkbox-main-question {
  margin-top: calc(32 / 16 * 1rem);
}

.half-background-wrapper {
  display: flex;
  justify-content: flex-end;
}

.pandu-custom-checkboxes-container {
  align-items: center;
  display: flex;
  height: 100%;
}

.pandu-custom-checkboxes-container .row {
  flex-grow: 1;
}

.pandu-custom-checkboxes-wrapper {
  display: flex;
  flex-direction: column;
  gap: calc(21 / 16 * 1rem);
}

.pandu-checkbox-label {
  align-items: center;
  display: flex;
  gap: calc(9 / 16 * 1rem);
  justify-content: flex-start;
}

.pandu-checkbox-label .label-text {
  color: var(--pandu-profile-label);
  flex: 1;
  text-align: left;
}

input[type="checkbox"].pandu-custom-checkbox {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  appearance: none;
  /* For iOS < 15 to remove gradient background */
  background-color: #fff;
  /* Not removed via appearance */
  margin: 0;

  box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3);
  height: calc(20 / 16 * 1rem);
  width: calc(20 / 16 * 1rem);
  border-radius: 100%;

  display: grid;
  place-content: center;
}

input[type="checkbox"].pandu-custom-checkbox::before {
  content: "";
  height: calc(20 / 16 * 1rem);
  width: calc(20 / 16 * 1rem);
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset calc(20 / 16 * 1rem) calc(20 / 16 * 1rem) var(--pandu-primary-color-1);
  border-radius: 100%;
}

input[type="checkbox"].pandu-custom-checkbox:checked::before {
  transform: scale(1);
}

.harta-list {
  margin-top: calc(85 / 16 * 1rem);
}

.harta-list .header,
.harta-list .subheader,
.harta-list .harta-card {
  padding: 0rem calc(65 / 16 * 1rem);
}

.harta-list .harta-card {
  border-radius: 20px;

  padding-top: calc(38 / 16 * 1rem);
  padding-bottom: calc(30 / 16 * 1rem);

  display: flex;
  flex-direction: column;
  gap: calc(28 / 16 * 1rem);
}

.harta-list .harta-card .content {
  align-items: center;
  display: flex;
  gap: calc(30 / 16 * 1rem);
  justify-content: flex-start;
}

.harta-card.blue {
  background-color: var(--pandu-harta-color-blue);
}

.harta-card.green {
  background-color: var(--pandu-harta-color-green);
}

.harta-card.orange {
  background-color: var(--pandu-harta-color-orange);
}

.harta-card.purple {
  background-color: var(--pandu-harta-color-purple);
}

.harta-card.pink {
  background-color: var(--pandu-harta-color-pink);
}

.harta-card.white {
  background-color: var(--pandu-harta-color-white);
}

.harta-card.brown {
  background-color: var(--pandu-harta-color-brown);
}

.harta-list .harta-card .harta-label {
  color: var(--pandu-profile-label);
  flex: 1;
}

.harta-list .harta-card .row-flex .harta-label {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.harta-list .harta-card .row-flex .harta-label.bulan {
  align-self: center;
}

.content .option-label {
  flex: 2;
}

.content .option-plain-input {
  flex: 3;
}

.harta-card .add-btn-placeholder,
.harta-card .add-btn,
.harta-card .remove-btn {
  height: calc(30 / 16 * 1rem);
  width: calc(30 / 16 * 1rem);
}

.harta-card .add-btn-placeholder {
  width: calc(65 / 16 * 1rem);

  align-items: center;
  display: flex;
  justify-content: space-between;
}

.harta-card .add-btn-placeholder.sum-modifier-btn {
  width: unset;
  flex-direction: column;
  gap: 1rem;
}

.harta-type {
  margin: 1.5rem 0;
}

.harta-card .add-btn svg,
.harta-card .remove-btn svg {
  height: 100%;
  width: 100%;
}

.harta-detail-list {
  font-size: calc(15 / 16 * 1rem);
  font-weight: 700;
}

.harta-detail-list.half {
  width: calc(50% - (15 / 16 * 1rem));
}

.harta-detail-list.half .subheader {
  padding-right: 0rem;
}

.harta-detail-list.half.hidden {
  display: none;
}

.half-list-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: calc(30 / 16 * 1rem);
}

.harta-list .header {
  margin-bottom: calc(52 / 16 * 1rem);
}

.harta-detail-list .subheader {
  font-size: calc(15 / 16 * 1rem);
  margin-top: calc(32 / 16 * 1rem);
  margin-bottom: calc(25 / 16 * 1rem);
}

.harta-detail-list .subheader .subtext {
  font-size: calc(12 / 16 * 1rem);
  font-weight: 400;
}

.harta-list.radio .header {
  margin-bottom: calc((69 - 33) / 16 * 1rem);
}

.harta-list.radio .harta-card {
  padding-top: 0rem;
}

.pandu-col {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: calc(33 / 16 * 1rem);
}

.pandu-col.row-flex {
  flex-direction: row;
}

.pandu-col.norma {
  flex: 2;
}

.pandu-col.custom-flex.f1 {
  flex: 14;
}

.pandu-col.custom-flex.f2 {
  flex: 12;
}

.pandu-col.custom-flex.f3 {
  flex: 4;
}

.pandu-col.custom-flex .harta-label {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.section-2-body .question-wrapper .answer-wrapper .pandu-radio-wrapper {
  left: unset;
  right: 0rem;
}

.content-input-wrapper {
  display: flex;
  flex: 30;
  gap: calc(30 / 16 * 1rem);
}

.sum-modifier-btn {
  flex: 1;
}

@media (max-width: 576px) {
  .pandu-custom-checkboxes-container {
    margin-top: calc(16 / 16 * 1rem);
    margin-bottom: calc(24 / 16 * 1rem);
  }

  .harta-list .header {
    margin-bottom: calc(16 / 16 * 1rem);
  }

  .pandu-custom-checkboxes-container,
  .harta-list .header,
  .harta-list .subheader,
  .harta-list .harta-card {
    padding: 0rem calc(15 / 16 * 1rem);
  }

  .harta-list {
    margin-top: calc(27 / 16 * 1rem);
  }

  .harta-list .harta-card {
    gap: calc(10 / 16 * 1rem);
    padding-top: calc(17 / 16 * 1rem);
    padding-bottom: calc(15 / 16 * 1rem);
  }

  .harta-list .harta-card .content {
    gap: calc(9 / 16 * 1rem);
  }

  .harta-list .harta-card .content.plain-input {
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
  }

  .harta-detail-list .subheader {
    margin-top: calc(17 / 16* 1rem);
    margin-bottom: calc(8 / 16* 1rem);
  }

  .content-input-wrapper {
    flex: 9;
    flex-direction: column;
  }

  .sum-modifier-btn {
    flex: unset;
  }

  .content-input-wrapper,
  .pandu-col {
    gap: calc(10 / 16 * 1rem);
  }

  .pandu-col.norma-keterangan {
    width: calc(50% - 5px);
  }

  .harta-detail-list.half {
    width: 100%;
  }

  .harta-label {
    font-size: calc(8 / 16 * 1rem);
  }

  .harta-card .add-btn,
  .harta-card .add-btn-placeholder,
  .harta-card .remove-btn {
    width: calc(9 / 16 * 1rem);
  }


  .harta-card .add-btn-placeholder {
    width: calc(23 / 16 * 1rem);
  }

  .pandu-col.custom-flex.f3 {
    width: calc(50% - 5px);
  }
}

/* Preview Page */
.table,
.value-table {
  width: 100%;
}

.table .pandu-preview {
  width: 1%;
}

.pandu-table .pandu-value-wrapper,
.tbd .pandu-value-wrapper {
  display: flex;
  justify-content: space-between;
}

.pandu-value-wrapper {
  border-top: 1px solid black;
}

.pandu-value-wrapper:last-child {
  border-bottom: 1px solid black;
}

.pandu-table .section-preview:not(:last-of-type) {
  margin-bottom: 2rem;
}

.pandu-value-wrapper .pandu-preview {
  border-left: 1px solid black;
  padding: .25rem;
  word-wrap: break-word;
}

.tbd .section-preview {
  margin: 1rem;
}

.value-table.parameter-summary th,
.value-table.parameter-summary td {
  width: calc(100% / 3);
}

@media(max-width: 576px) {
  .pandu-value-wrapper .pandu-preview {
    word-break: break-all;
  }
}

.pandu-value-wrapper .pandu-preview:last-child {
  border-right: 1px solid black;
}

.pandu-value-wrapper .pandu-preview.label,
.pandu-value-wrapper .pandu-preview.value {
  width: 50%;
}

.pandu-value-wrapper .pandu-preview.number {
  width: 10%;
}

/* Section 3 */
.section-3-body {
  background-color: var(--section-3);
}

.section-3-body .pandu-progress {
  width: calc(50% - (20px * 50 / 100));
}

/* Section 4 */
.section-4-body {
  background-color: var(--section-4);
}

.section-4-body .pandu-progress {
  width: calc(75% - (20px * 75 / 100));
}

.section-4-body .harta-list .harta-card .content {
  align-items: stretch;
}

.double-label-wrapper {
  flex: 1;

  align-items: center;
  display: flex;
  flex-direction: column;
  gap: calc(30 / 16 * 1rem);
  justify-content: space-between;
}

.double-label-wrapper .harta-label,
.harta-label .harta-label {
  width: 100%;
}

.add-wrapper {
  align-items: center;
  display: flex;
  justify-content: center;
}

.ph-mt-section {
  background-color: var(--pandu-white);
  border-radius: calc(20 / 16 * 1rem);
  padding: 1rem 1rem;
  margin: 2rem 0;
}

.ph-mt-header {
  font-size: calc(35 / 16 * 1rem);
  font-weight: 700;
  margin-bottom: calc(16 / 16 * 1rem);
}

.ph-mt-data {
  display: flex;
  justify-content: space-between;
  margin: calc(8 / 16 * 1rem);
}

.ph-mt-label {
  flex: 3;
  text-align: left;

  align-items: center;
  display: flex;
}

.ph-mt-value {
  flex: 1;
  text-align: right;

  border: none;
  border-radius: calc(20 / 16 * 1rem);
  background-color: var(--pandu-input-bg);
  padding: 1rem;
}

.pandu-lampiran-checkboxed-wrapper {
  display: grid;
  gap: calc(21 / 16 * 1rem);
  grid-template-rows: repeat(6, 1fr);
  grid-auto-flow: column;
}

/* Section 5 */
.section-5-body {
  background-color: var(--section-5);
}

.section-5-body .pandu-progress {
  width: calc(100% - (20px * 100 / 100));
}

.section-header.payment {
  font-size: calc(40 / 16 * 1rem);
}

.section-5-data-input-wrapper {
  display: flex;
  flex-direction: column;
  gap: calc(26 / 16 * 1rem);
  margin-top: calc(45 / 16 * 1rem);
}

.section-5-data-input-wrapper .label-wrapper {
  align-items: center;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.section-5-data-input-wrapper .label-wrapper .pandu-label {
  color: var(--pandu-profile-label);
  font-weight: 600;
}

.section-5-data-input-wrapper .label-wrapper .pandu-input {
  background-color: var(--pandu-white);
  width: calc(570 / 800 * 100%);
}

@media (max-width:576px) {
  .section-5-data-input-wrapper .label-wrapper .pandu-input {
    width: calc(500 / 800 * 100%);
  }
}

/* PDF styling */
.tbd .tbd-entry {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: .5rem 0rem;
  break-inside: avoid;
}

.tbd .tbd-entry.section-header {
  font-weight: 700;
}

.tbd .tbd-entry .tbd-label,
.tbd .tbd-entry .tbd-value {
  padding: .5rem 1rem;
}

.tbd .tbd-entry .tbd-value {
  background-color: lightgray;
  border-radius: calc(10 / 16 * 1rem);
  width: calc(100% / 3);
}

.pagebreak {
  display: block;
  clear: both;
  page-break-after: auto;
}

.pandu-download-btn.pandu-dropdown {
  /* border-radius: calc(20 / 16* 1rem) 0 0 calc(20 / 16* 1rem); */
  border-radius: calc(20 / 16* 1rem);
}

.pandu-download-btn.pandu-dropdown-toggle {
  border-radius: 0 calc(20 / 16* 1rem) calc(20 / 16* 1rem) 0;
}


#section-4-3 .content-input-wrapper {
  align-items: center;
}

.pdf-wrapper {
  position: absolute;
  display: flex;
  flex-direction: row;
}

.pdf-wrapper.center-1 {
  left: 34.3%;
}

.pdf-wrapper.right-1 {
  left: 74.7%;
}

.pdf-wrapper.left-1 {
  left: 14.7%;
}

.pdf-wrapper.left-2 {
  left: 17.3%;
}

.pdf-wrapper .input-box {
  /* border: 1px red solid; */
  height: 1.28rem;
  width: 1.28rem;

  font-size: calc(10 / 16 * 1rem);
  font-weight: 500;

  align-items: center;
  display: flex;
  justify-content: center;
}

.pdf-wrapper .input-block {
  /* border: 1px red solid; */
  height: 1.45rem;
  width: 10.6rem;
  padding: 0.2rem;

  font-size: calc(10 / 16 * 1rem);
  font-weight: 500;
  text-align: right;

  align-items: center;
  display: flex;
  justify-content: end;
}

.snap-container {
  align-items: center;
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

.checkbox-option {
  align-items: center;
  display: flex;
  justify-content: flex-start;
  gap: .5rem;
  width: 80%;
}

.split-column-wrapper {
  align-items: stretch;
  display: flex;
  justify-content: space-between;
}

.split-column-wrapper .split-col {
  flex: auto;

  align-items: center;
  display: flex;
}

.split-column-wrapper .split-col:not(:first-child) {
  padding-left: 1rem;
}

.split-column-wrapper .split-col:not(:last-child) {
  border-right: 1px solid black;
  padding-right: 1rem;
}

.split-column-wrapper .identity-column:first-child {
  border-right: 1px solid black;
  padding-right: 1rem;
}

.split-column-wrapper .identity-column:last-child {
  padding-left: 1rem;
}

.newspt .section-wrapper {
  margin: 1rem 0;
  padding: 1rem 0;
  break-inside: avoid;
}

.newspt .section-wrapper .section-title {
  font-weight: 600;
  font-size: calc(18 / 16 * 1rem);
  margin-bottom: .5rem;
}

.identity-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.side-to-side-option {
  display: flex;
  justify-content: space-between;
}

.side-to-side-option .checkbox-option {
  flex: 1;
}

.side-to-side-option .textfield-response-1 {
  flex: 1;
  text-align: right;
}

.side-to-side-option .textfield-response-2 {
  flex: 2;
}

.side-to-side-option .textfield-response-2,
.section-item-question {
  display: -webkit-box;
}

.section-item-question {
  width: 70%;
}

.lampiran-header-wrapper {
  display: flex;
}

.lampiran-header-wrapper .notice,
.lampiran-header-wrapper .page-info {
  flex: 2;

  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: space-between;
}

.lampiran-header-wrapper .list {
  flex: 3;

  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: space-between;
}

.lampiran-header-wrapper .list .list-item {
  display: flex;
  gap: .5rem;
}

.lampiran-table {
  font-size: calc(10 / 16 * 1rem);
  width: 100%;
}

.landscape {
  /*
    all these numbers are EXPERIMENTAL from TRIAL AND ERROR
    please change it to a systematical one if you can
  */
  width: 33cm;

  padding-top: 13cm;
  padding-left: 2cm;

  transform: rotate(90deg);

  break-before: left;
}

.lampiran-table th,
.lampiran-table td {
    border: 1px solid black;
    padding: .5rem;
    text-align: center;
}

.lampiran-table .col-num {
  font-size: calc(10 / 16 * 1rem);
}

.lampiran-table .jumlah-label {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.full-width-stacking-data {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: flex-start;
}

.full-width-stacking-data.custom-input {
  text-align: left;
  width: 10rem;
}

.lampiran-table th.nilai-wrapper {
  width: 10rem;
}

.single-line-checkbox {
  display: flex;
}

.single-line-checkbox .question {
  flex: 2;
}

.single-line-checkbox .checkboxes {
  display: flex;
  gap: 3rem;
  flex: 1;
}

.lampiran-table td.table-value-wrapper {
  text-align: right;
}

.newspt {
  margin: 2rem;
  font-size: calc(12 / 16 * 1rem);
}

.newspt .spt-item {
  margin: .5rem 0;
  break-inside: avoid;
}

.newspt-page:not(:first-of-type) {
  break-before: left;
}

.newspt-page .section-wrapper:last-of-type {
  margin-bottom: 0rem;
  padding-bottom: 0rem;
}

.keterangan-tooltip {
  height: 1.5rem;
  width: 1.5rem;
  position: relative;
  padding: 0;

  border-radius: 100%;
  font-size: .75rem;
}

.spt-number,
.spt-point,
.spt-subpoint {
  display: inline-block;
  width: 1rem;
}

.checkbox-options-wrapper {
  margin: 0rem 3rem;
}