@font-face {
  font-family: Phudu;
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
  src: url("../fonts/Phudu-Regular.woff2") format("woff2");
  font-stretch: normal;
}
@font-face {
  font-family: Phudu;
  font-style: normal;
  font-weight: 500;
  font-display: fallback;
  src: url("../fonts/Phudu-Medium.woff2") format("woff2");
  font-stretch: normal;
}
@font-face {
  font-family: Phudu;
  font-style: normal;
  font-weight: 700;
  font-display: fallback;
  src: url("../fonts/Phudu-Bold.woff2") format("woff2");
  font-stretch: normal;
}
html {
  scroll-behavior: smooth;
}

body {
  background-color: #11664F;
  color: #F7EFDB;
  font-family: Phudu, system-ui, sans-serif;
  background-image: url(../images/parten.png);
  background-size: 378.5px 620.5px;
  background-position: right bottom;
  background-repeat: no-repeat;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

section {
  max-width: 380px;
  margin: 0 auto;
  padding: 48px 8%;
}

h1 {
  font-size: 3.875rem;
  line-height: 1.25;
}

h2 {
  font-size: 1.25rem;
  line-height: 1.25;
}

label {
  display: block;
  position: relative;
  padding-left: 42px;
  margin-bottom: 15px;
  cursor: pointer;
  font-size: 22px;
  line-height: 32px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
label input:checked ~ .checkmark {
  background-color: #DBC387;
}
label input:checked ~ .checkmark:after {
  display: block;
}
label .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 28px;
  width: 28px;
  background-color: #F7EFDB;
  border: 3px solid #EEDDB3;
  border-radius: 5px;
}
label .checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 10px;
  top: 5px;
  width: 6px;
  height: 12px;
  border: solid #11664F;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
label:hover input ~ .checkmark {
  background-color: #EEDDB3;
}

button {
  background-color: #F7EFDB;
  color: #11664F;
  border: none;
  font-family: Phudu, system-ui, sans-serif;
  padding: 10px 20px;
  font-size: 22px;
  border-radius: 6px;
  cursor: pointer;
  display: block;
  margin: 32px auto;
}
button:hover {
  background-color: #EEDDB3;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.hidden {
  display: none;
}

.heading {
  background-color: #F7EFDB;
  color: #11664F;
  padding: 18px;
  margin-bottom: 48px;
  border-radius: 0 8px 8px 8px;
  position: relative;
}
.heading:before {
  content: "";
  width: 9px;
  height: 14px;
  position: absolute;
  left: -9px;
  top: 0px;
  background-size: 9px 14px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAA4CAYAAACVFFp4AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAALeSURBVHgB7ZjPaxNBFIDfzG6aNtEKgofa4knMrZeopfagVKNpEQqiiAdF6FXw6MWD5/4JxYunXoRaihDBpmlByMEYgrS9VEEwmNCAbZrdbjI7M27WNGjtj91kZydCv8tmdpIw++btvG8GQYOBgYGeXGbpGcb8KeMUgIMUUOOKS4X1a70hPMs560UIgSzU5gelq8xZFTM7MpLCY4EbV/bg0ehng6ovEUYEJPLX3HCu9ZFKMUlNGtnb5xf4zwZC4SIETz5EaqAIksB72mx4OJ7TDD5lJXYVJLDvtAwODoaXkrOvwl0wQSlTwUcOzBNN084GaCHJGLvAuX/5hA/qCIfDhRrrfoIRroCP4EP62OUrseXtGrywlgLf8unIqajn03Jy9k23ykc55xgE4yg3yuWNSBBpC8wk/SAYR088OXlmnaDux6qqCM8nxcmXVleBZ7Mr+bHx8dPBLohapc7R71rB1es8NHS+N/H23fseFS5aViBkKXD9p4axEUG17UVGaR8IwPVbE4/f+6IT9bm1PukgANcDSqVS5vjt+zM6wdMiVKXlPBClKi0vdKJUpZ2VV4iqtB1qr1XFk7n3UlU8KZZeqopX1dszVfF0+fdCVTyvR+2qiufC1a6qeK4R7aqKsN1Eq6oidHtjqwrRFq18cqwqQqV9ZCT+Va+hKTeqInRAmUyG3Lh5Z9ogqmNV8WVH6kZVhO+z6rhRFV8GBC5UxddDKSeq4vsp2VGq4teUNdlVFUVRtP36he1AD4Fnc2u/S0vw39Ii7UA6Go2eWkjMpENBNUIpRdIHZIErm/nRAOzMMc5DzZsgDxYbu/uhYqKEomBz96bMCNnYBdjY+mhF6US9LTNCNvH4pW+6Ca8xRnaUpEfIQtksfb/ao1bnGWch6RGyoNdvTaR3TJ7GGLNOGFAdgpTAvH2FDkHXS/2IbH3qlAhBLDZSNgisdMyA8vkqYQzmOmbKLPDPH2vn4Jj/jV9HK2Qgn/TW5wAAAABJRU5ErkJggg==);
}
.heading h2 {
  margin: 0;
}
.heading p {
  opacity: 0.5;
  margin: 0;
  font-size: 15px;
}

#tp_hcm label {
  padding-left: 84px;
  margin-bottom: 45px;
  cursor: pointer;
  font-size: 30px;
  line-height: 64px;
}
#tp_hcm label .checkmark {
  height: 58px;
  width: 58px;
  border: 6px solid #EEDDB3;
  border-radius: 10px;
}
#tp_hcm label .checkmark:after {
  left: 18px;
  top: 4px;
  width: 16px;
  height: 32px;
  border-width: 0 6px 6px 0;
}

#da_lat .fom-control {
  display: flex;
}
#da_lat label {
  padding-top: 115px;
  padding-left: 0;
  font-size: 16px;
  flex-basis: 50%;
  text-align: center;
}
#da_lat label .checkmark {
  width: 100px;
  height: 100px;
  border: none !important;
  background: none !important;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.5;
}
#da_lat label:hover .checkmark {
  opacity: 1;
}
#da_lat label input:checked ~ .checkmark {
  opacity: 1;
}

#step_3 {
  text-align: center;
  font-size: 1.5rem;
}

/*# sourceMappingURL=app.css.map */