/* 
  Created by IT Programmer Govindo Group
  Start-Date :: 16 OCT 2025
*/
@font-face {
  font-family: 'Baloo-Regular';
  src: url("../fonts/Baloo-Regular.woff2") format('opentype');
}

@font-face {
  font-family: 'TitanOne-Regular';
  src: url("../fonts/TitanOne-Regular.woff2") format('opentype');
}

/* Part::Variable */
:root {
  /* Color */
  --color-primary: #DC3B5B;
  --color-secondary: #FFC0AD;
  --color-black: #705165;
  --color-black2: #1e1e1ea6;
  --color-white: #FCF9EF;
  /* --------------------------------------- */
  /* Font */
  --brand-font-1-1: "Baloo-Regular";
  --brand-font-1-2: "TitanOne-Regular";
}
/* ------------------------------------------ */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.anypicker-container, 
.anypicker-container *,
.anypicker-container *::before,
.anypicker-container *::after {
    box-sizing: content-box !important;
}
/* ---------------------------------------- */
body {
  position: relative;
}
/* ---------------------------------------- */
/* loading:part */
#loading {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #ffffff;
  z-index: 1021;
}
#loading::after {
  content: '';
  width: 50px;
  height: 50px;
  background-size: contain;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22C10.6333 22 9.34167 21.7375 8.125 21.2125C6.90833 20.6875 5.84583 19.9708 4.9375 19.0625C4.02917 18.1542 3.3125 17.0917 2.7875 15.875C2.2625 14.6583 2 13.3667 2 12C2 10.6167 2.2625 9.32083 2.7875 8.1125C3.3125 6.90417 4.02917 5.84583 4.9375 4.9375C5.84583 4.02917 6.90833 3.3125 8.125 2.7875C9.34167 2.2625 10.6333 2 12 2C12.2833 2 12.5208 2.09583 12.7125 2.2875C12.9042 2.47917 13 2.71667 13 3C13 3.28333 12.9042 3.52083 12.7125 3.7125C12.5208 3.90417 12.2833 4 12 4C9.78333 4 7.89583 4.77917 6.3375 6.3375C4.77917 7.89583 4 9.78333 4 12C4 14.2167 4.77917 16.1042 6.3375 17.6625C7.89583 19.2208 9.78333 20 12 20C14.2167 20 16.1042 19.2208 17.6625 17.6625C19.2208 16.1042 20 14.2167 20 12C20 11.7167 20.0958 11.4792 20.2875 11.2875C20.4792 11.0958 20.7167 11 21 11C21.2833 11 21.5208 11.0958 21.7125 11.2875C21.9042 11.4792 22 11.7167 22 12C22 13.3667 21.7375 14.6583 21.2125 15.875C20.6875 17.0917 19.9708 18.1542 19.0625 19.0625C18.1542 19.9708 17.0958 20.6875 15.8875 21.2125C14.6792 21.7375 13.3833 22 12 22Z' fill='%23DC3B5B'/%3E%3C/svg%3E%0A");
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  animation: spin infinite .6s ease-in-out;
}
#loading-content {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}
#loading-content::after {
  content: '';
  width: 15px;
  height: 15px;
  background-size: contain;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22C10.6333 22 9.34167 21.7375 8.125 21.2125C6.90833 20.6875 5.84583 19.9708 4.9375 19.0625C4.02917 18.1542 3.3125 17.0917 2.7875 15.875C2.2625 14.6583 2 13.3667 2 12C2 10.6167 2.2625 9.32083 2.7875 8.1125C3.3125 6.90417 4.02917 5.84583 4.9375 4.9375C5.84583 4.02917 6.90833 3.3125 8.125 2.7875C9.34167 2.2625 10.6333 2 12 2C12.2833 2 12.5208 2.09583 12.7125 2.2875C12.9042 2.47917 13 2.71667 13 3C13 3.28333 12.9042 3.52083 12.7125 3.7125C12.5208 3.90417 12.2833 4 12 4C9.78333 4 7.89583 4.77917 6.3375 6.3375C4.77917 7.89583 4 9.78333 4 12C4 14.2167 4.77917 16.1042 6.3375 17.6625C7.89583 19.2208 9.78333 20 12 20C14.2167 20 16.1042 19.2208 17.6625 17.6625C19.2208 16.1042 20 14.2167 20 12C20 11.7167 20.0958 11.4792 20.2875 11.2875C20.4792 11.0958 20.7167 11 21 11C21.2833 11 21.5208 11.0958 21.7125 11.2875C21.9042 11.4792 22 11.7167 22 12C22 13.3667 21.7375 14.6583 21.2125 15.875C20.6875 17.0917 19.9708 18.1542 19.0625 19.0625C18.1542 19.9708 17.0958 20.6875 15.8875 21.2125C14.6792 21.7375 13.3833 22 12 22Z' fill='%23DC3B5B'/%3E%3C/svg%3E%0A");
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  animation: spin infinite .6s ease-in-out;
}
/* modal */
.modal {
  display: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1019;
}
.modal.active {
  display: flex;
}
.modal::before{
  content: "";
  position: absolute;
  background-color: var(--color-black2);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.modal.modal-xl .wrap-modal-content {
  width: fit-content;
  height: 90vh;
}
.modal.modal-xl .wrap-modal-content .main-content {
  width: 100%;
  height: 90vh;
  overflow: scroll;
}
.modal .wrap-modal-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 720px;
  max-width: 90%;
  min-height: 10vh;
  height: fit-content;
  margin: auto;
  background-color: var(--color-white);
  padding: 2rem;
  border-radius: 15px;
  border: 8px solid var(--color-black);
  box-shadow: 9px 9px 0px 0px var(--color-black2);
}
.wrap-modal-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.wrap-modal-content .input-group {
  width: 100%;
}
#form_input-tgl {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.modal .main-content .highlight {
  width: 35%;
}
.wrap-modal-content .card {
  width: 35%;
}
.wrap-modal-content .card .detail-paket {
  padding: 0vw 1vw;
}
.wrap-modal-content form .form-group {
  width: 61%;
}
#modal-sub-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center;
  align-items: center;
}
.swal2-popup {
  font-family: var(--brand-font-1-1);
  background-color: var(--color-white);
  border: 5px solid var(--color-black);
  border-radius: 15px;
}
.swal2-actions button {
  font-family: var(--brand-font-1-1);
}
.swal2-confirm {
  background-color: var(--color-primary);
  color: var(--color-white);
}
.swal2-confirm:hover,
.swal2-confirm:active {
  background-color: var(--color-primary);
  color: var(--color-white);
}
.swal2-title,
.swal2-html-container {
  color: var(--color-black);
}
/* welcome:part */
#welcome-page {
  position: absolute;
  top: -100vh;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 1020;
  opacity: 0;
  transition: .8s;
  background-image: url("../img/page_welcome_img.webp");
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
}
#welcome-page.active {
  top: 0;
  opacity: 1;
  transition: .8s;
}
#welcome-page .logo-welcome-mobile {
  display: none;
}
/*#welcome-page img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}*/
#welcome-page .icon-tap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: -30vh;
  margin: auto;
  width: 45px;
  height: 45px;
}
#welcome-page .icon-tap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  width: 45px;
  height: 45px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M19.221 10.803 12 10V4a2 2 0 0 0-4 0v12l-3.031-1.212a2 2 0 0 0-2.64 1.225l-.113.34a.998.998 0 0 0 .309 1.084l5.197 4.332c.179.149.406.231.64.231H19a2 2 0 0 0 2-2v-7.21a2 2 0 0 0-1.779-1.987z' fill='%23DC3B5B' %3E%3C/path%3E%3C/svg%3E");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  animation: touch-finger infinite 1.25s ease-in-out;
}
#welcome-page .icon-tap::before {
  content: "";
  width: 30px;
  height: 30px;
  border-radius: 100%;
  border: 2px solid var(--color-primary);
  position: absolute;
  top: -10px;
  background-color: transparent;
  z-index: 0;
  animation: touch infinite 1.3s ease-in-out;
}

/* page-general:part */
.content-page {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: scroll;
  background-image: url("../img/page_bg.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom;
  background-attachment: fixed;
}
.content-page .header {
  background-color: var(--color-secondary);
  width: 100vw;
  height: 8vh;
  position: sticky;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 18px;
  margin-bottom: 3.5rem;
  z-index: 1019;
  transition: .4s;
}
.content-page .header.scroll {
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
  transition: .4s;
}
.content-page .header a {
  width: 15vw;
}
.content-page .header .corner-menu {
  display: flex;
  flex-direction: row;
  gap: 18px;
  justify-content: flex-end;
  align-items: flex-end;
}
.content-page .header .corner-menu .date {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  font-family: var(--brand-font-1-1);
}
.corner-menu .date label {
  font-size: .7em;
  text-shadow: 
          1px 1px 0 var(--color-white),
          -1px -1px 0 var(--color-white),
          1px -1px 0 var(--color-white),
          -1px 1px 0 var(--color-white),
          2px 2px 0px rgba(0, 0, 0, 0.4);
  color: var(--color-primary);
}
.corner-menu .date input {
  width: 13vw;
  height: 4vh;
  padding: .5rem;
  border: 2px solid var(--color-white);
  background-color: var(--color-primary);
  color: var(--color-white);
  border-radius: 8px;
  box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.4);
  font-size: 1.3rem;
}
input.disabled {
  background-color: #EFEEE9 !important;
}
input.disabled:focus {
  border-color: var(--color-black) !important;
  outline: none;
}
input.disabled:hover {
  cursor: not-allowed;
}
input.disabled.picker {
  background-color: var(--color-white) !important;
}
input.disabled.picker2 {
  background-color: var(--color-primary) !important;
}
.corner-menu .date input::-webkit-calendar-picker-indicator {
  filter: brightness(0) invert(1) sepia(70%) saturate(150%);
}
.corner-menu .cart {
  height: 4vh;
  aspect-ratio: 1 / 1;
  border: 2px solid var(--color-white);
  border-radius: 5px;
  background-color: var(--color-primary);
  box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.4);
  padding: .2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-white);
  font-family: var(--brand-font-1-1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 38' fill='none'%3E%3Cpath d='M31.6665 19V28.5C31.6665 28.9199 31.4997 29.3227 31.2028 29.6196C30.9058 29.9165 30.5031 30.0833 30.0832 30.0833C29.6632 30.0833 29.2605 29.9165 28.9636 29.6196C28.6666 29.3227 28.4998 28.9199 28.4998 28.5V6.33333C28.4998 5.91341 28.333 5.51068 28.0361 5.21375C27.7392 4.91681 27.3364 4.75 26.9165 4.75H4.74984C4.32991 4.75 3.92718 4.91681 3.63025 5.21375C3.33332 5.51068 3.1665 5.91341 3.1665 6.33333V28.5C3.1665 31.1188 5.29767 33.25 7.9165 33.25H30.0832C32.702 33.25 34.8332 31.1188 34.8332 28.5V19H31.6665ZM22.1665 17.4167V20.5833H9.49984V17.4167H22.1665ZM9.49984 14.25V11.0833H22.1665V14.25H9.49984ZM22.1665 23.75V26.9167H17.4165V23.75H22.1665Z' fill='%23FCF9EF'/%3E%3C/svg%3E");
  background-size: 75%;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  cursor: pointer;
}
.corner-menu .cart #total-order {
  position: absolute;
  top: -14px;
  right: -5px;
  background-color: var(--color-primary);
  color: var(--color-white);
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.4);
  border: 2px solid var(--color-white);
  border-radius: 100%;
  font-size: .6em;
}

#reload-page {
  height: 4vh;
  aspect-ratio: 1 / 1;
  border: 2px solid var(--color-white);
  border-radius: 5px;
  background-color: var(--color-primary);
  box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.4);
  padding: .2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-white);
  font-family: var(--brand-font-1-1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'%3E%3Cpath d='M10 11H7.101l.001-.009a4.956 4.956 0 0 1 .752-1.787 5.054 5.054 0 0 1 2.2-1.811c.302-.128.617-.226.938-.291a5.078 5.078 0 0 1 2.018 0 4.978 4.978 0 0 1 2.525 1.361l1.416-1.412a7.036 7.036 0 0 0-2.224-1.501 6.921 6.921 0 0 0-1.315-.408 7.079 7.079 0 0 0-2.819 0 6.94 6.94 0 0 0-1.316.409 7.04 7.04 0 0 0-3.08 2.534 6.978 6.978 0 0 0-1.054 2.505c-.028.135-.043.273-.063.41H2l4 4 4-4zm4 2h2.899l-.001.008a4.976 4.976 0 0 1-2.103 3.138 4.943 4.943 0 0 1-1.787.752 5.073 5.073 0 0 1-2.017 0 4.956 4.956 0 0 1-1.787-.752 5.072 5.072 0 0 1-.74-.61L7.05 16.95a7.032 7.032 0 0 0 2.225 1.5c.424.18.867.317 1.315.408a7.07 7.07 0 0 0 2.818 0 7.031 7.031 0 0 0 4.395-2.945 6.974 6.974 0 0 0 1.053-2.503c.027-.135.043-.273.063-.41H22l-4-4-4 4z' fill='%23FCF9EF'%3E%3C/path%3E%3C/svg%3E");
  background-size: 75%;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  cursor: pointer;
}
#reload-page:focus,
#reload-page:hover {
  box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.8);
  transform: translateY(2px);
}
.content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.content h1 {
  font-size: 4em;
  font-family: var(--brand-font-1-2);
  text-shadow: 
          2px 2px 0 var(--color-secondary),
          -2px -2px 0 var(--color-secondary),
          2px -2px 0 var(--color-secondary),
          -2px 2px 0 var(--color-secondary),
          -2px 4px 0px rgba(30, 30, 30, 100),
          5px -2px 0px rgba(30, 30, 30, 100),
          5px 4px 0px rgba(30, 30, 30, 100);
  color: var(--color-primary);
  text-align: center;
  letter-spacing: .4rem;
}
.nav-wizard {
  margin-top: 3rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 54px;
  position: relative;
}
.nav-wizard::before {
  content: "";
  position: absolute;
  height: 5px;
  width: calc((75px * 6) + (54px * 5));
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: var(--color-primary);
  margin: auto;
  z-index: 0;
}
.nav-wizard .step {
  width: 75px;
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-white);
  color: var(--color-primary);
  border: 5px solid var(--color-primary);
  border-radius: 100%;
  position: relative;
  z-index: 1;
  cursor: pointer;
}
.nav-wizard .step.active {
  background-color: var(--color-primary);
}

.nav-wizard .step::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-repeat: no-repeat;
  background-position: center;
}
.nav-wizard .step.active::before {
  filter: brightness(0) invert(1) sepia(70%) saturate(150%);
}
#step-1::before {
  background-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' fill='%23DC3B5B' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.25 19.25H15.75V22.75H12.25V19.25ZM12.25 26.25H15.75V29.75H12.25V26.25ZM19.25 19.25H22.75V22.75H19.25V19.25ZM19.25 26.25H22.75V29.75H19.25V26.25ZM26.25 19.25H29.75V22.75H26.25V19.25ZM26.25 26.25H29.75V29.75H26.25V26.25Z'/%3E%3Cpath d='M8.75 38.5H33.25C35.1803 38.5 36.75 36.9302 36.75 35V10.5C36.75 8.56975 35.1803 7 33.25 7H29.75V3.5H26.25V7H15.75V3.5H12.25V7H8.75C6.81975 7 5.25 8.56975 5.25 10.5V35C5.25 36.9302 6.81975 38.5 8.75 38.5ZM33.25 14L33.2517 35H8.75V14H33.25Z'/%3E%3C/svg%3E%0A");
}
#step-2::before {
  background-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' fill='%23DC3B5B' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.25 3.5H8.75V38.5H5.25V3.5ZM17.5 10.5H29.75V14H17.5V10.5ZM17.5 17.5H29.75V21H17.5V17.5Z'/%3E%3Cpath d='M33.25 3.5H10.5V38.5H33.25C35.1803 38.5 36.75 36.9302 36.75 35V7C36.75 5.06975 35.1803 3.5 33.25 3.5ZM33.25 35H14V7H33.25V35Z'/%3E%3C/svg%3E%0A");
}
#step-3::before {
  background-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' fill='%23DC3B5B' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M34.8302 15.0255C34.7473 14.8356 34.6311 14.6619 34.4873 14.5128L23.9872 4.01275C23.8381 3.86887 23.6644 3.75272 23.4745 3.66975C23.422 3.64525 23.366 3.63125 23.31 3.612C23.1636 3.56217 23.0111 3.53215 22.8567 3.52275C22.82 3.51925 22.7867 3.5 22.75 3.5H10.5C8.56975 3.5 7 5.06975 7 7V35C7 36.9302 8.56975 38.5 10.5 38.5H31.5C33.4303 38.5 35 36.9302 35 35V15.75C35 15.7133 34.9807 15.68 34.9772 15.6415C34.9687 15.487 34.9387 15.3345 34.888 15.1882C34.8705 15.1322 34.8547 15.078 34.8302 15.0255ZM29.0255 14H24.5V9.4745L29.0255 14ZM10.5 35V7H21V15.75C21 16.2141 21.1844 16.6592 21.5126 16.9874C21.8408 17.3156 22.2859 17.5 22.75 17.5H31.5L31.5035 35H10.5Z'/%3E%3Cpath d='M14 21H28V24.5H14V21ZM14 28H28V31.5H14V28ZM14 14H17.5V17.5H14V14Z'/%3E%3C/svg%3E%0A");
}
#step-4::before {
  background-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' fill='%23DC3B5B' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M33.25 17.5H8.75C6.81975 17.5 5.25 19.0697 5.25 21V35C5.25 36.9302 6.81975 38.5 8.75 38.5H33.25C35.1803 38.5 36.75 36.9302 36.75 35V21C36.75 19.0697 35.1803 17.5 33.25 17.5ZM8.75 35V21H33.25L33.2535 35H8.75ZM8.75 10.5H33.25V14H8.75V10.5ZM12.25 3.5H29.75V7H12.25V3.5Z'/%3E%3C/svg%3E%0A");
}
#step-5::before {
  background-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' fill='%23DC3B5B' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.0012 21C19.0155 21 20.5012 19.5142 20.5012 17.5C20.5012 15.4857 19.0155 14 17.0012 14C14.987 14 13.5012 15.4857 13.5012 17.5C13.5012 19.5142 14.9852 21 17.0012 21Z'/%3E%3Cpath d='M35 7H7C5.06975 7 3.5 8.47175 3.5 10.2812V31.7188C3.5 33.5282 5.06975 35 7 35H35C36.9302 35 38.5 33.5282 38.5 31.7188V10.2812C38.5 8.47175 36.9302 7 35 7ZM35 31.5L7 31.4808V10.5L35 10.5193V31.5Z'/%3E%3Cpath d='M24.5 15.75H31.5V19.25H24.5V15.75ZM26.25 22.75H31.5V26.25H26.25V22.75ZM23.5025 27.188C23.5025 24.7835 20.5695 22.3125 17.0013 22.3125C13.433 22.3125 10.5 24.7835 10.5 27.188V28H23.5025V27.188Z'/%3E%3C/svg%3E%0A");
}
#step-6::before {
  background-image: url("data:image/svg+xml,%3Csvg width='42' height='42' viewBox='0 0 42 42' fill='%23DC3B5B' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M33.25 12.25H31.5V3.5H10.5V12.25H8.75C5.8555 12.25 3.5 14.6055 3.5 17.5V29.75C3.5 31.6803 5.06975 33.25 7 33.25H10.5V38.5H31.5V33.25H35C36.9302 33.25 38.5 31.6803 38.5 29.75V17.5C38.5 14.6055 36.1445 12.25 33.25 12.25ZM14 7H28V12.25H14V7ZM28 35H14V28H28V35ZM35 29.75H31.5V24.5H10.5V29.75H7V17.5C7 16.5358 7.78575 15.75 8.75 15.75H33.25C34.216 15.75 35 16.5358 35 17.5V29.75Z'/%3E%3Cpath d='M24.5 17.5H31.5V21H24.5V17.5Z'/%3E%3C/svg%3E%0A");
}
/* card:part */
.main-content {
  margin-top: 3rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1vw;
  justify-content: center;
  width: 100vw;
  height: fit-content;
  padding-bottom: 7vh;
}
.card {
  background-color: var(--color-white);
  border: 8px solid;
  border-radius: 20px;
  min-width: 500px;
  min-height: 100px;
  padding: 15px;
  box-shadow: 9px 9px 0px 0px var(--color-black2);
}
.card.card-primary {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.card.card-dark {
  border-color: var(--color-black);
  color: var(--color-black);
}
h3 {
  font-family: var(--brand-font-1-2);
  font-size: 1.8em;
}
.card .detail-paket {
  padding: 0 2.5vw;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.card .detail-paket span {
  width: 50%;
  font-size: 1.5em;
  font-family: var(--brand-font-1-1);
}
.detail-paket span.txt-dynm {
  text-align: right;
}
/* btn:part */
.btn {
  font-family: var(--brand-font-1-1);
  font-size: 1.3em;
  text-decoration: none;
  min-width: 60%;
  padding: 15px;
  color: var(--color-white);
  text-align: center;
  border-radius: 12px;
  box-shadow: 0px 5px 0px 0px var(--color-black2);
  transition: .3s;
}
.btn.btn-primary {
  background-color: var(--color-primary);
  border: 4px solid var(--color-primary);
}
.btn.btn-primary-outline {
  background-color: var(--color-white);
  border: 4px solid var(--color-primary);
  color: var(--color-primary);
}
.btn.btn-link {
  color: var(--color-black);
  text-decoration: underline;
  border: none;
  background-color: none;
  border-radius: none;
  box-shadow: none;
}
.btn.btn-dark {
  background-color: var(--color-black);
  border: 4px solid var(--color-black);
}
.btn:hover {
  color: var(--color-white);
  text-decoration: none;
  box-shadow: 0px 1px 0px 0px var(--color-black2);
  transform: translateY(4px);
  transition: .5s;
}
.btn.btn-primary-outline:hover {
  color: var(--color-primary);
}
.btn.btn-link:hover {
  color: var(--color-primary);
  box-shadow: none;
  transform: translateY(0px);
  text-decoration: underline;
}
.btn-close-modal {
  position: absolute;
  width: 50px;
  aspect-ratio: 1/1;
  right: -1.5rem;
  top: -1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  box-shadow: 3px 0px 0px 0px var(--color-black2);
}
.btn-close-modal::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 100%;
  overflow: hidden;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 65 67' fill='none'%3E%3Cpath d='M64.4895 34.3042C64.4895 51.9868 50.1549 66.3214 32.4723 66.3214C14.7897 66.3214 0.455078 51.9868 0.455078 34.3042C0.455078 16.6215 14.7897 2.28694 32.4723 2.28694C50.1549 2.28694 64.4895 16.6215 64.4895 34.3042Z' fill='%23333333'/%3E%3Cpath d='M60.6475 34.3042C60.6475 18.7435 48.033 6.12901 32.4723 6.12901C16.9116 6.12901 4.29715 18.7435 4.29715 34.3042C4.29715 49.8649 16.9116 62.4793 32.4723 62.4793V66.3214C14.7897 66.3214 0.455078 51.9868 0.455078 34.3042C0.455078 16.6215 14.7897 2.28694 32.4723 2.28694C50.1549 2.28694 64.4895 16.6215 64.4895 34.3042C64.4895 51.9868 50.1549 66.3214 32.4723 66.3214V62.4793C48.033 62.4793 60.6475 49.8649 60.6475 34.3042Z' fill='%23333333' fill-opacity='0.75'/%3E%3Cpath d='M64.0345 32.0172C64.0345 49.6999 49.6999 64.0345 32.0172 64.0345C14.3346 64.0345 0 49.6999 0 32.0172C0 14.3346 14.3346 0 32.0172 0C49.6999 0 64.0345 14.3346 64.0345 32.0172Z' fill='%23FCF9EF'/%3E%3Cpath d='M60.1924 32.0172C60.1924 16.4565 47.5779 3.84207 32.0172 3.84207C16.4565 3.84207 3.84207 16.4565 3.84207 32.0172C3.84207 47.5779 16.4565 60.1924 32.0172 60.1924V64.0345C14.3346 64.0345 0 49.6999 0 32.0172C0 14.3346 14.3346 0 32.0172 0C49.6999 0 64.0345 14.3346 64.0345 32.0172C64.0345 49.6999 49.6999 64.0345 32.0172 64.0345V60.1924C47.5779 60.1924 60.1924 47.5779 60.1924 32.0172Z' fill='%23DB3B5B'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M48.4789 45.9432L48.6654 45.715L35.4463 32.43L48.659 19.137L48.4789 18.9167L45.7711 16.1938L45.5469 16.0086L32.3329 29.2992L19.1155 16.0114L16.187 18.9167L16.0078 19.1359L29.2196 32.43L16.187 45.9432L18.8947 48.6661L32.3329 35.5607L45.7711 48.6661L48.4789 45.9432Z' fill='%23DB3B5B'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.btn-qty {
  width: 25px;
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  position: relative;
  cursor: pointer;
}
.btn-qty::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 100%;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.btn-qty-minus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25' fill='none'%3E%3Cpath d='M24.3098 12.931C24.3098 19.5965 18.9063 25 12.2408 25C5.57534 25 0.171875 19.5965 0.171875 12.931C0.171875 6.26552 5.57534 0.862061 12.2408 0.862061C18.9063 0.862061 24.3098 6.26552 24.3098 12.931Z' fill='%23333333'/%3E%3Cpath d='M22.8615 12.931C22.8615 7.06538 18.1065 2.31034 12.2408 2.31034C6.3752 2.31034 1.62015 7.06538 1.62015 12.931C1.62015 18.7967 6.3752 23.5517 12.2408 23.5517V25C5.57534 25 0.171875 19.5965 0.171875 12.931C0.171875 6.26552 5.57534 0.862061 12.2408 0.862061C18.9063 0.862061 24.3098 6.26552 24.3098 12.931C24.3098 19.5965 18.9063 25 12.2408 25V23.5517C18.1065 23.5517 22.8615 18.7967 22.8615 12.931Z' fill='%23333333' fill-opacity='0.75'/%3E%3Cpath d='M24.1379 12.069C24.1379 18.7345 18.7345 24.1379 12.069 24.1379C5.40346 24.1379 0 18.7345 0 12.069C0 5.40346 5.40346 0 12.069 0C18.7345 0 24.1379 5.40346 24.1379 12.069Z' fill='%23FCF9EF'/%3E%3Cpath d='M22.6897 12.069C22.6897 6.20332 17.9346 1.44828 12.069 1.44828C6.20332 1.44828 1.44828 6.20332 1.44828 12.069C1.44828 17.9346 6.20332 22.6897 12.069 22.6897V24.1379C5.40346 24.1379 0 18.7345 0 12.069C0 5.40346 5.40346 0 12.069 0C18.7345 0 24.1379 5.40346 24.1379 12.069C24.1379 18.7345 18.7345 24.1379 12.069 24.1379V22.6897C17.9346 22.6897 22.6897 17.9346 22.6897 12.069Z' fill='%23DB3B5B'/%3E%3Cpath d='M5 11H19V13H5V11Z' fill='%23DC3B5B'/%3E%3C/svg%3E");
}
.btn-qty-plus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25' fill='none'%3E%3Cpath d='M24.3098 12.931C24.3098 19.5965 18.9063 25 12.2408 25C5.57534 25 0.171875 19.5965 0.171875 12.931C0.171875 6.26552 5.57534 0.862061 12.2408 0.862061C18.9063 0.862061 24.3098 6.26552 24.3098 12.931Z' fill='%23333333'/%3E%3Cpath d='M22.8615 12.931C22.8615 7.06538 18.1065 2.31034 12.2408 2.31034C6.3752 2.31034 1.62015 7.06538 1.62015 12.931C1.62015 18.7967 6.3752 23.5517 12.2408 23.5517V25C5.57534 25 0.171875 19.5965 0.171875 12.931C0.171875 6.26552 5.57534 0.862061 12.2408 0.862061C18.9063 0.862061 24.3098 6.26552 24.3098 12.931C24.3098 19.5965 18.9063 25 12.2408 25V23.5517C18.1065 23.5517 22.8615 18.7967 22.8615 12.931Z' fill='%23333333' fill-opacity='0.75'/%3E%3Cpath d='M24.1379 12.069C24.1379 18.7345 18.7345 24.1379 12.069 24.1379C5.40346 24.1379 0 18.7345 0 12.069C0 5.40346 5.40346 0 12.069 0C18.7345 0 24.1379 5.40346 24.1379 12.069Z' fill='%23FCF9EF'/%3E%3Cpath d='M22.6897 12.069C22.6897 6.20332 17.9346 1.44828 12.069 1.44828C6.20332 1.44828 1.44828 6.20332 1.44828 12.069C1.44828 17.9346 6.20332 22.6897 12.069 22.6897V24.1379C5.40346 24.1379 0 18.7345 0 12.069C0 5.40346 5.40346 0 12.069 0C18.7345 0 24.1379 5.40346 24.1379 12.069C24.1379 18.7345 18.7345 24.1379 12.069 24.1379V22.6897C17.9346 22.6897 22.6897 17.9346 22.6897 12.069Z' fill='%23DB3B5B'/%3E%3Cpath d='M19 11H13V5H11V11H5V13H11V19H13V13H19V11Z' fill='%23DC3B5B'/%3E%3C/svg%3E");
}
.qty-item {
  position: relative;
}
.kelengkapan-list .qty-item::after {
  content: " Pcs";
}
.list-wrap .list-group span.mark {
  font-size: 1rem;
}
.list-wrap .list-group span {
  font-size: 1.5rem;
}

.list-wrap .wrap-qty {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 15px;
  position: absolute;
  margin: auto;
  width: fit-content;
  left: 95px;
  right: 0;
}
.txt {
  font-family: var(--brand-font-1-1);
}
.txt-primary {
  color: var(--color-primary);
}
.txt-dark {
  color: var(--color-black);
}
.txt-black {
  color: #1E1E1E;
}
.txt-left {
  text-align: left !important;
  margin-right: auto;
}
.txt-center {
  text-align: center !important;
  margin: auto;
}
.txt-right {
  text-align: right !important;
  margin-left: auto;
}
.msg {
  display: none;
}
.msg.active {
  display: inline-block;
}
.row {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}
.mark {
  background-color: var(--color-primary);
  color: var(--color-white);
  font-family: var(--brand-font-1-1);
  font-size: .8em;
  border-radius: 5px;
  padding: 2px 7px;
}
.mark.highlight {
  font-size: 1em;
  padding: 2px 8px;
}
hr.line {
  height: 5px;
  background-color: var(--color-black);
  border: none;
  width: 85%;
  margin: 17px auto;
}

/* page::tanggal/reservasi */
#page_tanggal-pemesanan .card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 7vh;
  padding: 5vh 0;
}
/* page::pilih-paket */
#page_pilih-paket .card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 7vh;
  padding: 5vh 0;
}
#page_pilih-paket.card h3 {
  text-transform: uppercase;
}
#page_pilih-paket .detail-paket span {
  margin-bottom: 2.5vw;
}
/* page:registrasi */
#page_registrasi .main-content {
  flex-direction: column;
  align-items: center;
}
#page_registrasi .main-content .highlight {
  width: 24%;
}

#page_registrasi .main-content .highlight input {
  padding: 12px 13px;
  font-size: 1.2em;
  border-radius: 13px;
}
#page_registrasi .card {
  width: 27%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3vh;
  padding: 2vh 0;
}
#page_registrasi .card .detail-paket {
  padding: 0 2.5vw;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
#page_registrasi .detail-paket span {
  margin-bottom: .9vw;
}
/* input:part */
.input-group {
  display: flex;
  flex-direction: column;
  font-family: var(--brand-font-1-1);
}
.input-group label {
  font-size: 1.4em;
  color: var(--color-black);
}
.input-group input {
  padding: 15px 13px;
  font-size: 1.2em;
  font-family: var(--brand-font-1-1);
  border-radius: 10px;
  border: 3px solid var(--color-black);
  background-color: var(--color-white);
  color: var(--color-black);
}
.input-group input:focus {
  border: 3px solid var(--color-primary);
  outline: none;
}
.input-group select {
  padding: 15px 13px;
  font-size: 1.2em;
  font-family: var(--brand-font-1-1);
  border-radius: 10px;
  border: 3px solid var(--color-black);
  background-color: var(--color-white);
  color: var(--color-black);
}
.input-group select:focus {
  border: 3px solid var(--color-primary);
  outline: none;
}
select option {
  font-family: var(--brand-font-1-1);
}
select option:nth-child(even) {
    font-family: var(--brand-font-1-1);
}

form {
  padding: 0 2vw;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 3vw;
}
form .form-group {
  width: 53%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .9vw;
}
form .form-group .input-group {
  width: calc(50% - 2vw);
}
form .form-group .input-group.input-lg {
  width: 100%;
}

/* page:kelengkapan */
/* part:1 */
#page_kelengkapan .main-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

#page_kelengkapan .main-content .disclaimer{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
}

#page_kelengkapan .main-content .disclaimer p {
  margin-top: 25px;
  font-family: var(--brand-font-1-1);
  font-size: 1.3em;
  text-align: center;
  line-height: 1em;
}
#page_kelengkapan .main-content .disclaimer .sign-rule {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}
#page_kelengkapan .main-content .disclaimer .sign-rule .sign {
  width: 10vw;
  aspect-ratio: 1/1;
  margin-bottom: 20px;
}
#page_kelengkapan .main-content .disclaimer a {
  font-size: 1.2em;
  min-width: 18vw;
  padding: 12px 0;
}
#page_kelengkapan .main-content .disclaimer a:last-child {
  margin-top: 20px;
}
.action-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.form-kelengkapan {
  display: flex;
  flex-direction: row;
  gap: 25px;
}
.form-kelengkapan form {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
}
.form-kelengkapan h3 {
  text-align: center;
  margin-bottom: 20px;
}
.form-kelengkapan form .input-group {
  width: 100%;
}
.form-kelengkapan form button {
  margin-top: 20px;
  width: 40%;
  padding: 7px 0;
  font-size: 1em;
  right: 0;
  margin-left: auto;
}
.form-kelengkapan .list-group {
  border-bottom: 2px solid var(--color-black);
}
.empty-list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  max-height: fit-content;
  gap: 25px;
  flex-wrap: wrap;
}
.empty-list .sign {
  width: 120px;
  @media (max-width: 480px) {
    width: 40%;
  }
}
.empty-list .action-btn {
  width: 100%;
}
.empty-list a {
  display: inline-block;
  min-width: 170px;
  padding: 7px 0;
  font-size: .9em;
}
.list-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.list-group {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-family: var(--brand-font-1-1);
  font-size: 1.2em;
}
#card-list {
  padding: 25px;
}
#card-list .action-btn {
  margin-top: 25px;
  align-items: center;
  justify-content: flex-end;
  flex-direction: row;
}
#card-list a {
  display: inline-block;
  min-width: 170px;
  padding: 7px 0;
  font-size: .9em;
  border-radius: 8px;
}
/* page:konfirmasi */
#page_konfirmasi .card {
  width: 27vw;
  padding: 1.5vw;
}
#page_konfirmasi .card .detail-paket {
  margin-top: 1vh;
  padding: 0;
  font-size: .8em;
}
#page_konfirmasi .card .detail-paket .txt-dynm {
  margin-bottom: 23px;
}

#page_konfirmasi .action-btn {
  margin-top: 2vh;
  width: 100%;
  gap: 15px;
}

#page_konfirmasi .action-btn a {
  display: inline-block;
  min-width: 170px;
  width: 100%;
  padding: 10px 0;
  font-size: 1em;
  border-radius: 8px;
}

/* page:ringkasan */
#page_ringkasan .main-content {
  gap: 5vw;
}
#tgl-pemesanan {
  text-transform: capitalize !important;
}
#page_ringkasan .list-paket {
  display: flex;
  flex-direction: column;
  gap: 25px;
  position: relative;
}
#page_ringkasan .list-paket .card .txt-info-anak span {
  font-size: 1.5em;
}
#page_ringkasan .action-btn {
  flex-direction: row;
  justify-content: flex-end;
  gap: 15px;
}
#page_ringkasan .action-btn.top-btn {
  justify-content: flex-start;
  position: absolute;
  top: -50px;
  left: 0;
}
#page_ringkasan .action-btn.top-btn a{
  width: 100%;
  height: 100%;
  padding: 5px 25px;
}
#page_ringkasan .action-btn a {
  display: inline-block;
  min-width: 0;
  width: 30%;
  padding: 7px 0;
  font-size: .8em;
  border-radius: 8px;
}
#page_ringkasan .addtional-print {
  display: flex;
  flex-direction: column;
  gap: 25px;
}
#page_ringkasan .kelengkapan-list {
  gap: 0;
}
.kelengkapan-list .list-group {
  border-bottom: 2px solid var(--color-black);
  margin-bottom: 15px;
  position: relative;
}

#page_ringkasan .card h3 {
  margin-bottom: 15px;
  text-transform: capitalize;
}
#page_ringkasan .card {
  min-width: 600px;
}

.txt.nm-pendamping-1 {
  font-size: 1.5rem;
}
.txt.nm-pendamping-1,
.txt.nm-pendamping-2 {
  text-transform: capitalize;
}
/* page:finish */
#page_finish .content {
  justify-content: center;
  align-items: center;
  height: calc(100vh - 8vh - 3.5rem);
}
#page_finish h3 {
  font-family: var(--brand-font-1-1);
}
h3.tgl-transaksi {
  text-transform: capitalize !important;
}
#page_finish p {
  font-size: 1.5em;
}
#page_finish .main-content{
  flex-direction: column;
  align-items: center;
}
#page_finish .action-btn {
  flex-direction: row;
  width: 40vw;
  gap: 25px;
}
#page_finish .action-btn a:nth-child(1) {
  min-width: 30%;
}
#page_finish .action-btn a:nth-child(2) {
  min-width: 50%;
}

#page_finish #kode-display {
  font-size: .8rem;
  margin-bottom: 5px;
}

/* animation */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes touch {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes touch-finger {
  0% {
    transform: translateY(10px);
  }
  50% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(10px);
  }
}

@keyframes skeleton-fade {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}

/* #mobile */
@media screen and (max-width: 600px) {
  #welcome-page {
    background-image: url("../img/page_welcome_mobile.webp");
    background-size: cover;
    width: 100%;
    height: 100vh;
  }
  #welcome-page.active .logo-welcome-mobile {
    display: flex;
  }
  .logo-welcome-mobile {
    display: inline-block;
    position: absolute;
    width: 250px;
    height: fit-content;
    margin: auto;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }
  #welcome-page .icon-tap {
    top: 40%;
  }

  .content-page {
    background-image: url("../img/page_welcome_mobile.webp");
  }
  .content-page .header {
    height: 10vh;
    margin-bottom: 1.3rem;
  }
  .content-page .header a {
    width: 35vw;
  }
  .content-page .header .corner-menu {
    gap: 5px;
  }
  .content-page .header .corner-menu .date {
    width: 30vw;
  }
  .corner-menu .date label {
    font-size: .5rem;
  }
  .corner-menu .date input {
    font-size: .6rem;
    height: 5vh;
    width: 100%;
    padding: 0 0.3rem;
  }
  .corner-menu .cart {
    height: 5vh;
  }
  .content h1 {
    font-size: 1.6em;
    text-shadow: 
            1px 1px 0 var(--color-secondary),
            -1px -1px 0 var(--color-secondary),
            1px -1px 0 var(--color-secondary),
            -1px 1px 0 var(--color-secondary),
            -1px 2px 0px rgba(30, 30, 30, 100),
            3px -1px 0px rgba(30, 30, 30, 100),
            3px 2px 0px rgba(30, 30, 30, 100);
    letter-spacing: 0;
    white-space: normals;
  }
  .nav-wizard {
    gap: 20px;
    margin-top: 1.3rem;
    justify-content: space-between;
  }
  .nav-wizard::before {
    width: 100%;
    height: 2px;
  }
  .nav-wizard .step {
    width: 32px;
    border: 2px solid var(--color-primary);
  }
  .step::before {
    background-size: 80%;
  }
  .main-content {
    margin-top: 1.3rem;
    gap: 4vh;
  }
  h3 {
    font-size: 1rem;
  }
  .btn {
    font-size: 1rem;
    padding: 5px 0;
    border-radius: 7px;
  }
  .card {
    min-width: 90vw;
    width: 100%;
    max-width: 90vw;
    border-radius: 14px;
    border: 6px solid;
    box-shadow: 5px 5px 0px 0px var(--color-black2);
  }
  .card .detail-paket span {
    font-size: 1rem;
  }
  .detail-paket .nm_anak {
    text-transform: capitalize !important;
  }
  #page_pilih-paket .card {
    gap: 3vh;
  }
  #page_registrasi .main-content .highlight {
    width: 90vw;
  }
  form {
    flex-wrap: wrap;
    width: 90vw;
    padding: 0;
    gap: 5vh;
  }
  form .form-group {
    width: 100%;
  }
  .input-group label {
    font-size: .7rem;
  }
  #page_registrasi .main-content .highlight input {
    border-radius: 10px;
    font-size: 1rem;
    padding: 8px;
  }
  .input-group input {
    font-size: .8rem;
    border-radius: 7px;
    height: 45px;
    width: 100%;
    padding: 0 5px;
  }
  .input-group select {
    font-size: .8rem;
    border-radius: 7px;
    height: 45px;
    width: 100%;
    padding: 0 5px;
  }

  .msg {
    font-size: 0.5rem;
  }

  #page_kelengkapan .main-content .disclaimer {
    gap: 10px;
  }
  #page_kelengkapan .main-content .disclaimer p {
    font-size: 1rem;
  }
  #page_kelengkapan .main-content .disclaimer .sign-rule {
    gap: 2rem;
  }
  #page_kelengkapan .main-content .disclaimer .sign-rule .sign {
    width: 30vw;
  }
  #page_kelengkapan .main-content .disclaimer a {
    font-size: .9rem;
    min-width: 70vw;
    padding: 7px 0;
  }
  #page_kelengkapan .main-content .disclaimer a:last-child {
    margin-top: 10px;
  }
  .form-kelengkapan {
    flex-wrap: wrap;
    flex-direction: column;
  }
  .form-kelengkapan form {
    padding: 0px;
    width: 100%;
  }
  .form-kelengkapan form button {
    font-size: .7em;
  }
  .list-group {
    font-size: 1em;
  }
  .form-kelengkapan .list-group span {
    font-size: 1em !important;
  }
  .list-wrap .list-group span.mark {
    font-size: .8em !important;
  }
  #card-list .action-btn {
    gap: 15px;
  }
  .result-form-side #card-list a {
    min-width: 30%;
    font-size: .7em;
  }
  #page_konfirmasi .card {
    padding: 2vh;
  }
  #page_konfirmasi .card .detail-paket .txt-dynm {
    margin-bottom: 12px;
  }
  #page_konfirmasi .card .detail-paket span {
    font-size: 1rem;
  }
  #page_konfirmasi .action-btn a {
    font-size: .8rem;
  }
  #page_ringkasan .list-paket {
    gap: 20px;
    align-items: center;
    width: 100%;
  }
  #page_ringkasan .action-btn.top-btn {
    position: relative;
    top: 0;
    width: 40%;
  }
  #page_ringkasan .action-btn.top-btn a {
    font-size: .7rem;
    padding: 5px 0px;
  }
  #page_ringkasan .kelengkapan-list .list-group {
    font-size: .6em;
  }
  #page_ringkasan .card {
    min-width: 90vw;
    width: 100%;
  }
  #page_ringkasan .list-paket .card .txt-info-anak span {
    font-size: 1rem;
  }
  .txt.nm-pendamping-1 {
    font-size: 1rem;
  }
  #page_ringkasan .list-group span {
    font-size: 1rem;
  }
  .mark.highlight {
    font-size: .6rem;
  }
  .mark {
    font-size: .5rem;
  }
  .list-wrap {
    gap: 15px;
  }
  hr.line {
    height: 3px;
    width: 90%;
    margin: 10px 0;
  }

   .list-wrap .wrap-qty {
    gap: 5px;
    left: 28vw;
    right: auto;
    top: 0;
    bottom: 5px;
  }

  .btn-qty {
    width: 20px;
  }

  #page_finish .content {
    justify-content: center;
    align-items: center;
    height: fit-content;
  }

  #page_finish .main-content {
    gap: 0;
  }

  #page_finish p {
    font-size: 1em;
  }
  #page_finish .action-btn {
    width: 100%;
    gap: 10px;
    font-size: .8em;
  }
  #page_ringkasan .action-btn a {
    width: 47%;
    font-size: .8em;
  }
  #page_finish .action-btn a:nth-child(1) {
    width: 40%;
  }

  .modal .wrap-modal-content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 720px;
    max-width: 100%;
    min-height: 10vh;
    height: fit-content;
    margin: auto;
    background-color: var(--color-white);
    padding: 2rem 0;
    border-radius: 15px;
    border: 6px solid var(--color-black);
    box-shadow: 5px 5px 0px 0px var(--color-black2);
    align-items: center;
  }
  .modal form {
    padding: 0;
  }
  .wrap-modal-content form .form-group {
    width: 90%;
  }
  #modal-order {
    overflow: scroll;
  }
  .btn-close-modal {
    top: -5px;
    right: -3px;
    width: 35px;
  }

  #modal-sub-card {
    min-width: 80vw;
    width: 100%;
    max-width: 90%;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center;
    align-items: center;
    padding: 1rem 0.5rem;
  }
  .modal .card .detail-paket span {
    font-size: .9rem;
  }
  .wrap-modal-content .card .detail-paket {
    padding: 0;
  }

  .swal2-title {
    font-size: 1.3rem;
  }
  .swal2-html-container {
    font-size: 1rem;
  }
  .swal2-actions button {
    font-size: .9rem;
  }

}