.control-panel-shell { position: absolute; display: flex; margin-left: 20px; margin-top: 20px; left: 0px; transition: 150ms; }
.control-panel { box-shadow: rgba(0, 0, 0, 0.627) 1px 1px 10px; border-radius: 28px; color: rgb(255, 255, 255); z-index: 100; }
.control-panel.hide { opacity: 0; }
.control-panel-expander { position: relative; top: 25px; height: 14px; background-color: rgb(94, 87, 87); padding: 2px; border-radius: 0px 3px 3px 0px; cursor: pointer; }
.hamburger-menu { width: 12px; height: 2px; background-color: rgb(17, 17, 17); margin: 2px; }
.control-panel-entry { width: 250px; background-color: rgb(34, 34, 34); border-radius: 0px; box-sizing: content-box; color: rgb(255, 255, 255); cursor: pointer; display: block; font-family: "Google Sans", "Titillium Web", sans-serif; font-size: 15px; line-height: 25px; padding: 12px 16px; position: relative; z-index: 100; border-top: none; border-right: none; border-left: none; border-image: initial; border-bottom: 1px solid rgb(51, 51, 51); }
.control-panel-entry:first-child { border-radius: 28px 28px 0px 0px; }
.control-panel-entry:last-child { border-radius: 0px 0px 28px 28px; border: none; }
.control-panel-text { cursor: default; font-size: 20px; font-weight: 600; text-align: center; }
.control-panel-toggle .label { position: relative; }
.control-panel-toggle .value { position: absolute; top: 8px; right: 15px; width: 80px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 40px; background: rgb(0, 0, 0); }
.control-panel-toggle.yes .value { background-color: rgb(48, 159, 147); color: rgb(163, 250, 163); }
.control-panel-toggle.no .value { background-color: rgb(211, 47, 80); color: rgb(241, 158, 158); }
.control-panel-slider .value { position: relative; width: 100%; }
.control-panel-slider .callout { position: absolute; right: 25px; }
.control-panel-fps { display: flex; justify-content: center; align-items: center; }
.control-panel-fps canvas { height: 50px; width: 100%; background-color: rgb(34, 34, 34); margin: 5px 0px; z-index: 0; }
.control-panel-fps .fps-text { position: absolute; font-size: 20px; font-weight: 600; text-align: center; backface-visibility: hidden; }
.control-panel-source-picker { display: flex; flex-direction: column; align-items: center; }
.control-panel-source-picker .inputs { display: none; }
.control-panel-source-picker .file-selection div { display: flex; place-items: center; }
.control-panel-source-picker .file-selection div img { margin-left: 8px; }
.source-selection { display: flex; flex-direction: row; align-items: center; width: 100%; }
.video-controls { width: 100%; display: none; flex-direction: row; align-items: center; justify-content: center; position: relative; margin: 12px 0px 4px; }
.video-controls * { display: inline-block; }
.video-controls img { margin: 0px 8px 0px -6px; }
.pause-button { height: 100%; }
.video-track { height: 5px; width: 100%; background-color: rgb(255, 255, 255); flex-grow: 1; margin-right: 10px; }
.video-slider-ball { height: 10px; width: 10px; background-color: rgb(255, 255, 255); position: absolute; display: none; border-radius: 50%; }
.video-time { padding-left: 0.1rem; }
.dropdown-wrapper { position: relative; user-select: none; width: calc(100% - 28px); }
.dropdown { position: relative; display: flex; flex-direction: column; }
.dropdown-trigger { position: relative; display: flex; align-items: center; white-space: nowrap; text-overflow: ellipsis; justify-content: space-between; padding: 0px 10px; font-size: 16px; font-weight: 300; height: 30px; line-height: 30px; background: rgb(51, 51, 51); color: rgb(255, 255, 255); cursor: pointer; }
.dropdown-trigger span { max-width: calc(100% - 30px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown-options { position: absolute; display: block; top: 100%; left: 0px; right: 0px; color: rgb(255, 255, 255); background: rgb(51, 51, 51); transition: 0.5s; opacity: 0; visibility: hidden; pointer-events: none; z-index: 2; }
.dropdown.open .dropdown-options { opacity: 1; visibility: visible; pointer-events: all; }
.dropdown-option { position: relative; display: flex; flex-direction: row; align-items: center; justify-content: left; padding: 0px 5px; font-size: 16px; font-weight: 300; line-height: 30px; cursor: pointer; transition: 0.5s; color: rgb(255, 255, 255); }
.dropdown-option * { padding-right: 0.5rem; }
.dropdown-option:hover { cursor: pointer; background-color: rgb(178, 178, 178); }
.dropdown-option.selected { color: rgb(255, 255, 255); background-color: rgb(48, 92, 145); }
.arrow { position: relative; height: 15px; width: 10.6066px; margin-left: 10.6066px; transform: scale(0.8); }
.arrow::before, .arrow::after { content: ""; position: absolute; bottom: 0px; width: 0.15rem; height: 100%; transition: 0.5s; backface-visibility: hidden; }
.arrow::before { left: -5px; transform: rotate(135deg); background-color: rgb(255, 255, 255); }
.arrow::after { left: 5px; transform: rotate(-135deg); background-color: rgb(255, 255, 255); }
.open .arrow::before { left: -5px; transform: rotate(45deg); }
.open .arrow::after { left: 5px; transform: rotate(-45deg); backface-visibility: hidden; }
.fps-30 { position: absolute; font-size: 8px; top: 45%; left: 10px; }
.fps-60 { position: absolute; font-size: 8px; top: 15%; left: 10px; }
.qs-datepicker-container { font-size: 1rem; font-family: sans-serif; color: rgb(0, 0, 0); position: absolute; width: 15.625em; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; z-index: 9001; user-select: none; border: 1px solid grey; border-radius: 0.263922em; overflow: hidden; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.3) 0px 1.25em 1.25em -0.9375em; }
.qs-datepicker-container * { box-sizing: border-box; }
.qs-centered { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.qs-hidden { display: none; }
.qs-overlay { position: absolute; top: 0px; left: 0px; background: rgba(2, 56, 103, 0.75); color: rgb(255, 255, 255); width: 100%; height: 100%; padding: 0.5em; z-index: 1; opacity: 1; transition: opacity 0.3s; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; }
.qs-overlay.qs-hidden { opacity: 0; z-index: -1; }
.qs-overlay .qs-overlay-year { background: rgba(0, 0, 0, 0); border-top: none; border-right: none; border-left: none; border-image: initial; border-bottom: 1px solid rgb(255, 255, 255); border-radius: 0px; color: rgb(255, 255, 255); font-size: 0.875em; padding: 0.25em 0px; width: 80%; text-align: center; margin: 0px auto; display: block; }
.qs-overlay .qs-overlay-year::-webkit-inner-spin-button { appearance: none; }
.qs-overlay .qs-close { padding: 0.5em; cursor: pointer; position: absolute; top: 0px; right: 0px; }
.qs-overlay .qs-submit { display:none!important; border: 1px solid rgb(255, 255, 255); border-radius: 0.263922em; padding: 0.5em; margin: 0px auto auto; cursor: pointer; background: rgba(128, 128, 128, 0.4); }
.qs-overlay .qs-submit.qs-disabled { color: grey; border-color: grey; cursor: not-allowed; }
.qs-overlay .qs-overlay-month-container { display: flex; flex-wrap: wrap; -webkit-box-flex: 1; flex-grow: 1; }
.qs-overlay .qs-overlay-month { display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; width: calc(33.3333%); cursor: pointer; opacity: 0.75; transition: opacity 0.15s; }
.qs-overlay .qs-overlay-month.active, .qs-overlay .qs-overlay-month:hover { opacity: 1; }
.qs-controls { width: 100%; display: flex; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: center; align-items: center; -webkit-box-flex: 1; flex-grow: 1; flex-shrink: 0; background: rgb(211, 211, 211); filter: blur(0px); transition: filter 0.3s, -webkit-filter 0.3s; }
.qs-controls.qs-blur { filter: blur(5px); }
.qs-arrow { height: 1.5625em; width: 1.5625em; position: relative; cursor: pointer; border-radius: 0.263922em; transition: background 0.15s; }
.qs-arrow:hover.qs-left::after { border-right-color: rgb(0, 0, 0); }
.qs-arrow:hover.qs-right::after { border-left-color: rgb(0, 0, 0); }
.qs-arrow:hover { background: rgba(0, 0, 0, 0.1); }
.qs-arrow::after { content: ""; border: 0.390625em solid rgba(0, 0, 0, 0); position: absolute; top: 50%; transition: border 0.2s; }
.qs-arrow.qs-left::after { border-right-color: grey; right: 50%; transform: translate(25%, -50%); }
.qs-arrow.qs-right::after { border-left-color: grey; left: 50%; transform: translate(-25%, -50%); }
.qs-month-year { font-weight: 700; transition: border 0.2s; border-bottom: 1px solid rgba(0, 0, 0, 0); }
.qs-month-year:not(.qs-disabled-year-overlay) { cursor: pointer; }
.qs-month-year:not(.qs-disabled-year-overlay):hover { border-bottom: 1px solid grey; }
.qs-month-year:active:focus, .qs-month-year:focus { outline: none; }
.qs-month { padding-right: 0.5ex; }
.qs-year { padding-left: 0.5ex; }
.qs-squares { display: flex; flex-wrap: wrap; padding: 0.3125em; filter: blur(0px); transition: filter 0.3s, -webkit-filter 0.3s; }
.qs-squares.qs-blur { filter: blur(5px); }
.qs-square { width: calc(14.2857%); height: 1.5625em; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; cursor: pointer; transition: background 0.1s; border-radius: 0.263922em; }
.qs-square:not(.qs-empty):not(.qs-disabled):not(.qs-day):not(.qs-active):hover { background: orange; }
.qs-current { font-weight: 700; text-decoration: underline; }
.qs-active, .qs-range-end, .qs-range-start { background: rgb(173, 216, 230); }
.qs-range-start:not(.qs-range-6) { border-top-right-radius: 0px; border-bottom-right-radius: 0px; }
.qs-range-middle { background: rgb(212, 235, 242); }
.qs-range-middle:not(.qs-range-0):not(.qs-range-6) { border-radius: 0px; }
.qs-range-middle.qs-range-0 { border-top-right-radius: 0px; border-bottom-right-radius: 0px; }
.qs-range-end:not(.qs-range-0), .qs-range-middle.qs-range-6 { border-top-left-radius: 0px; border-bottom-left-radius: 0px; }
.qs-disabled, .qs-outside-current-month { opacity: 0.2; }
.qs-disabled { cursor: not-allowed; }
.qs-day, .qs-empty { cursor: default; }
.qs-day { font-weight: 700; color: grey; }
.qs-event { position: relative; }
.qs-event::after { content: ""; position: absolute; width: 0.46875em; height: 0.46875em; border-radius: 50%; background: rgb(0, 119, 255); bottom: 0px; right: 0px; }
html, body { width: 100vw; height: 100vh; min-height: 640px; overflow: hidden; overscroll-behavior: none; }
body { font-family: Montserrat, Helvetica, sans-serif; margin: 0px; line-height: 1.28; font-size: 14px; background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; position: relative; overflow: auto; }
a { text-decoration: none; outline: none; }
small, .small { font-size: 12px; }
.wrapper, .modal, .modal-fullscreen { margin: 0px auto; height: 100%; }
.btn { font-family: "Montserrat SemiBold"; }
.btn:not(.btn-sm) { padding: 9px 25px; font-size: 12px; }
.btn-primary { border-radius: 30px; color: rgb(255, 255, 255); transition: filter 0.3s; border: none !important; background-color: rgb(108, 255, 128) !important; }
.btn:hover { filter: brightness(0.9); }
b, strong, .strong { font-family: "Montserrat Bold"; }
.semi-bold { font-family: "Montserrat SemiBold"; }
.btn-icon { display: inline-block; }
.btn .icon { width: 11px; margin-right: 6px; transform: translateY(-2px); }
.wrapper { max-width: 600px; }
#circularG { position: relative; width: 98px; height: 98px; transform: scale(0.4); }
.circularG { position: absolute; background-color: rgb(255, 255, 255); width: 23px; height: 23px; transform: scale(0.3); border-radius: 15px; animation-name: bounce_circularG; animation-duration: 1.1s; animation-iteration-count: infinite; animation-direction: normal; }
#circularG_1 { left: 0px; top: 39px; animation-delay: 0.41s; }
#circularG_2 { left: 10px; top: 10px; animation-delay: 0.55s; }
#circularG_3 { top: 0px; left: 39px; animation-delay: 0.69s; }
#circularG_4 { right: 10px; top: 10px; animation-delay: 0.83s; }
#circularG_5 { right: 0px; top: 39px; animation-delay: 0.97s; }
#circularG_6 { right: 10px; bottom: 10px; animation-delay: 1.1s; }
#circularG_7 { left: 39px; bottom: 0px; animation-delay: 1.24s; }
#circularG_8 { left: 10px; bottom: 10px; animation-delay: 1.38s; }
@keyframes bounce_circularG { 
  0% { transform: scale(1); }
  100% { transform: scale(0.3); }
}
@-webkit-keyframes bounce_circularG { 
  0% { transform: scale(1); }
  100% { transform: scale(0.3); }
}
.front-page { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 2; display: flex; justify-content: center; align-items: center; }
.owl-nav > button { position: absolute; top: calc(50% - 11px); right: 104%; z-index: 2; }
button.owl-next { transform: scaleX(-1); left: 104%; right: unset; }
.tab-arrow img { height: 22px; }
.owl-nav > button.disabled { filter: grayscale(1); opacity: 0.5; }
.horizontal-swipe { white-space: nowrap; flex-wrap: nowrap; overflow: hidden; justify-content: center; }
.tab-makeup-content { opacity: 0; width: 100%; }
.tab-makeup-content[style*="opacity: 1"] { margin-top: 7vh; }
.tab-makeup-content:not([style*="opacity: 1"]):not(.tab-makeup-front) { height: 0px; overflow: hidden; }
.tab-makeup-content.tab-makeup-front { opacity: 1; display: block; }
.tab-makeup-content[style*="display: block"] { margin-top: 7vh; }
.tab-makeup-content h2 { font-size: 18px; color: rgb(255, 255, 255); text-align: center; margin-bottom: 28px; font-family: "Montserrat SemiBold"; }
.owl-carousel .owl-stage-outer { width: calc(100% - 30px); margin: 0px auto; overflow: visible !important; }
@media (min-width: 767px) {
  .corner-ar { font-size: 13px; }
}
.tab-makeup-content .nav-item { width: 100%; }
.tab-makeup-content .owl-item:not(:first-child) { margin-left: -15px; }
.tab-makeup-content .owl-item .nav-link { width: 100%; display: flex; justify-content: center; align-items: center; padding: 0px; border: 0px; flex-direction: column; background-color: transparent !important; }
.tab-makeup-content .owl-item .nav-link .owl-image { backdrop-filter: blur(20px); background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; width: 100%; aspect-ratio: calc(1.09091) / 1; border-radius: 16%; position: relative; transition: background-color 0.3s; background-color: rgba(255, 255, 255, 0.3); }
.tab-makeup-content .owl-item .nav-link .owl-image.portrait { aspect-ratio: calc(0.556989) / 1; border-radius: 11.5%; }
.tab-makeup-content .owl-item .nav-link.active .owl-image, .tab-makeup-content .owl-item .nav-link .owl-image:hover { background-color: rgba(117, 104, 255, 0.2); }
.tab-makeup-content .owl-item .nav-link img { width: 100%; max-width: 82%; max-height: 126%; object-fit: contain; position: absolute; left: 50%; bottom: 11px; transform: translateX(-50%); }
.tab-makeup-content .owl-item .nav-link .owl-image.portrait img { height: 77%; left: 50%; object-fit: contain; top: 47%; transform: translate(-50%, -50%); }
.tab-makeup-content .owl-item .nav-link p { font-size: 10px; color: rgb(0, 0, 0); line-height: 10px; margin-bottom: 0px; margin-top: 7px; font-family: "Montserrat SemiBold"; }
.tab-makeup-content .owl-item .nav-link .owl-image.portrait + p { font-family: Montserrat; margin-top: -10%; aspect-ratio: calc(3.94118) / 1; width: 86%; font-size: 13px; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(20px); background-image: url("../images/bg-prodname.webp"); background-repeat: no-repeat; color: rgb(255, 255, 255); background-position: center center; background-size: 100% 100%; position: relative; z-index: 2; border-radius: 16px; overflow: hidden; }
@media (pointer: coarse) and (hover: none) {
  .tab-makeup-content .owl-item .nav-link .owl-image.portrait + p { font-size: 2.8cqw; }
}
#webar_container { height: 100%; max-width: calc(100% - 30px); max-height: 47vh; position: relative; padding: 9px; margin: 0px auto; aspect-ratio: 1 / 1; border-radius: 14.2%; transition: opacity 0.3s; background-color: rgba(255, 255, 255, 0.3); background-image: url("../images/frame-square.webp"); background-repeat: no-repeat; background-size: 101% 101%; background-position: center center; backdrop-filter: blur(20px); opacity: 0; }
.webar-inner { position: relative; border-radius: 13.2%; width: 100%; height: 100%; overflow: hidden; }
.corner-ar { width: calc(100% - 30px); margin: -10% auto 0px; z-index: 4; color: rgb(255, 255, 255); font-size: 11px; display: none; justify-content: space-between; align-items: center; text-align: right; }
.corner-ar p { margin-right: 14px; margin-bottom: 0px; margin-top: 12%; padding-left: 12px; flex: 1 1 0%; }
.canvas-container { pointer-events: none; }
.corner-ar-image { backdrop-filter: blur(20px); background-image: url("../images/frame-square.webp"); background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; aspect-ratio: calc(1.09091) / 1; border-radius: 16%; max-width: 28%; min-width: 28%; background-color: rgba(255, 255, 255, 0.3); display: flex; justify-content: center; align-items: center; position: relative; }
.corner-ar img { width: 100%; max-width: 80%; max-height: 126%; object-fit: contain; position: absolute; left: 50%; right: 50%; bottom: 8px; transform: translateX(-50%); }
.makeup-vto { width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0px; left: 0px; }
.makeup-vto > canvas { position: absolute; }
.makeup-vto > #video_canvas { transform: scaleX(-1); z-index: -1; opacity: 0; }
.makeup-vto > canvas#full_face_canvas { z-index: 1; filter: blur(4px); transform: scaleY(1.04); margin-top: -11px; }
.makeup-vto > canvas#full_face_canvas.oval { filter: blur(6px); transform: scaleY(1.06); margin-top: -16px; }
.makeup-vto > canvas:first-child { z-index: 2; }
.makeup-vto > video { opacity: 0; z-index: -1 !important; }
.backdrop-blur { z-index: 4; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; display: none; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(9px); }
.lighting-detect { position: absolute; top: 20%; left: 50%; text-align: center; color: rgb(255, 255, 255); font-size: 16px; text-shadow: rgb(0, 0, 0) 1px 1px 1px; transform: translate(-50%, -50%); display: none; z-index: 4; }
.items-wrapper { width: calc(100% + 30px); left: -15px; bottom: -22px; z-index: 5; }
.controls-color { color: rgb(255, 255, 255); padding: 0px 12px; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 8px; }
.controlButton { width: 44px; aspect-ratio: 1 / 1; border-radius: 8px; cursor: pointer; border-width: 2px; user-select: none; overflow: hidden; position: relative; }
.controlButton.controlButton-product { text-align: center; color: rgb(0, 0, 0); font-size: 8px; font-weight: 800; display: flex; justify-content: center; align-items: center; background-color: rgb(0, 234, 239); flex-direction: column; }
.controlButton > span { font-size: 12px; font-weight: 900; }
.selected { border: 2px solid rgb(80, 255, 127); }
.loader { background-image: url("../images/bg.webp"); background-repeat: no-repeat; background-position: center center; background-size: cover; position: absolute; color: rgb(255, 255, 255); background-color: rgb(0, 0, 0); font-size: 16px; width: 100%; height: 100%; top: 0px; left: 0px; display: flex; justify-content: center; align-items: center; flex-direction: column; margin: 0px; z-index: 9999; }
.loader.clickable { }
.loader .loading-icon { width: 36px; animation: 1s linear 0s infinite normal none running rotating; }
.loader .loading-icon { width: 36px; animation: 1s linear 0s infinite normal none running rotating; }
.acc { position: absolute; pointer-events: none; }
.acc.bubble-top-right { width: 36%; right: -2%; top: -2%; }
.acc.logo { z-index: 1; top: 3%; left: 2%; width: 25%; }
.acc.bubble-top-left { width: 32%; left: 0px; top: 0px; }
.acc.bubble-center-left { width: 10%; top: 50%; transform: translateY(-50%); }
.acc.bubble-bottom-left { width: 64%; left: 0px; bottom: 0px; }
.acc.bubble-bottom-right { width: 25%; right: 0px; bottom: 0px; }
.loader .acc.bubble-bottom-left { width: 27%; }
.splash-text { font-size: 14px; text-align: center; padding: 0px 14px; z-index: 2; }
.splash-text.show { color: rgb(80, 0, 140); margin-top: 19px; }
.loader.loader-2 { display: none; color: rgb(255, 255, 255); background-color: rgba(0, 0, 0, 0.5); }
.splash { position: fixed; color: rgb(255, 255, 255); width: 100%; height: calc(100% - 56px); top: 0px; left: 0px; background-image: url("../images/bg.webp"); background-color: rgb(0, 0, 0); background-repeat: no-repeat; background-position: center center; background-size: cover; z-index: 999; transition: opacity 0.8s; }
.splash-inner { height: 78%; aspect-ratio: 0.563359 / 1; margin: 4vh auto 0px; position: relative; }
.splash-inner .splash-image { height: 100%; }
.splash-inner .splash-button { width: 100%; position: absolute; left: 0px; bottom: -16%; cursor: pointer; }
@keyframes rotating { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.divider { left: 0px; top: 0px; width: 50%; height: 100%; position: absolute; overflow: hidden; z-index: 2; cursor: ew-resize; }
.divider #cloned_video_canvas { transform: scaleX(-1); position: absolute; }
.divider::before { content: ""; width: 2px; right: 0px; background-color: rgb(255, 255, 255); height: 100%; position: absolute; z-index: 2; }
img.arrow-divider { width: 30px; cursor: pointer; left: 50%; position: absolute; aspect-ratio: 1 / 1; margin-left: -16px; top: 50%; transform: translateY(-50%); z-index: 3; user-select: none; }
.capture-wrapper { pointer-events: none; position: absolute; top: 0px; left: 0px; width: 1200px; aspect-ratio: 1 / 1; z-index: -1; opacity: 0; }
.capture-wrapper > img { position: absolute; width: 100%; height: 100%; object-fit: cover; left: 50%; top: 0px; }
.capture-wrapper > img:first-child { transform: scaleX(-1) translateX(50%); }
.capture-wrapper > img:nth-child(2) { z-index: 1; transform: translateX(-50%); }
.capture-wrapper > img:nth-child(3) { filter: blur(7px) saturate(1.7); transform: scaleY(1.04) translateX(-50%); margin-top: -24px; opacity: 0.93; z-index: 2; }
.capture-wrapper > img.oval { filter: blur(14px) saturate(1.7); transform: scaleY(1.06) translateX(-50%); margin-top: -35px; }
.capture-wrapper > img:last-child { transform: translateX(-50%); z-index: 3; }
.modal-fullscreen { background-image: url("../images/bg-result.webp"); background-repeat: no-repeat; background-position: center -5vh; background-size: auto 105vh; }
.frame-capture-image { background-color: rgba(255, 255, 255, 0.3); background-image: url("../images/frame-square.webp"); background-repeat: no-repeat; background-size: 101% 101%; background-position: center center; backdrop-filter: blur(20px); border-radius: 14.2%; padding: 8px; position: relative; overflow: hidden; height: 30vh; margin: 0px auto 30px; aspect-ratio: 1 / 1; }
.image-captured { width: calc(100% - 12px); aspect-ratio: 1 / 1; overflow: hidden; position: absolute; top: 6px; left: 6px; border-radius: 13.2%; }
.modal { left: 50%; transform: translateX(-50%); }
.header { font-family: "Montserrat SemiBold"; height: 118px; position: relative; display: flex; justify-content: center; align-items: center; padding: 33px 20px 0px; color: rgb(255, 255, 255); font-size: 17px; opacity: 0; gap: 12px; transition: opacity 0.3s; }
.header .logo { position: absolute; top: 50%; right: 15px; transform: translateY(-50%); height: 58%; }
.header .back { width: 25px; position: absolute; bottom: -10px; left: 15px; }
.back { cursor: pointer; }
.result-content { font-size: 12px; max-width: 95%; margin: 0px auto; }
.result-section-1 { margin-top: 80px; }
.result-section-1 .back { width: 27px; position: absolute; top: 50%; transform: translateY(-50%); left: 14px; }
.result-content h2 { font-size: 13px; font-family: "Montserrat SemiBold"; }
img.result-image-product { width: 94%; max-height: 236px; object-fit: contain; max-width: 200px; }
.result-title-product { font-size: 15px; font-family: "Montserrat SemiBold"; }
img.result-logo { width: 60%; }
.qr-product { font-family: "Montserrat SemiBold"; font-size: 12px; }
img.result-qr-product { width: 85%; max-width: 190px; margin-bottom: 10px; }
.footer { display: none; width: 100%; height: 56px; justify-content: space-between; gap: 12px; align-items: center; color: black; }
.footer p { font-size: 0.8rem; text-align: center; line-height: 1rem; margin-bottom: 20px; }
.footer > a { width: 100%; font-size: 22px; display: flex; justify-content: center; color: rgb(255, 255, 255); align-items: center; height: 32px; border: 1px solid rgb(255, 255, 255); border-radius: 10px; cursor: pointer; }
.footer-page { padding: 0px 15px 20px; }
.footer-landing { padding: 20px; display: flex; box-sizing: border-box; }
.modal { padding-right: 0px !important; }
.mindar-ui-loading { display: none !important; }
.available-color { color: rgb(130, 55, 59); }
.skincare-meter-wrapper { width: calc(100% - 30px); margin: 20px auto; display: none; }
.skincare-meter { width: 95%; display: flex; align-items: center; justify-content: space-between; margin: 0px auto; }
.skincare-meter::before { content: ""; width: 6px; aspect-ratio: 1 / 1; background-color: rgb(255, 255, 255); border-radius: 50%; transform: translateX(6px); }
.skincare-meter::after { content: ""; width: 6px; aspect-ratio: 1 / 1; background-color: rgb(255, 255, 255); border-radius: 50%; transform: translateX(-6px); }
.skincare-meter-time { display: flex; align-items: center; justify-content: space-between; width: 100%; color: rgb(255, 255, 255); font-size: 12px; line-height: 9px; margin-top: 15px; }
input[type="range"] { appearance: none; width: 100%; height: 2px; border-radius: 12px; background: rgb(255, 255, 255); outline: none; }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 28px; height: 28px; border-radius: 50%; background-size: contain; border: none; cursor: pointer; }
.modal-body { overflow-x: hidden; }
.modal-open { padding-right: 0px !important; }
@media (max-width: 320px) {
  .corner-ar { margin-top: -9%; font-size: 10px; }
}
@media (orientation: landscape) {
  .makeup-vto > canvas#full_face_canvas, .capture-wrapper > img:nth-child(3) { margin-top: 0px; }
}
.product-placement { position: absolute; right: 0px; bottom: 0px; padding: 12px; background: rgba(220, 220, 220, 0.6); border-radius: 16px; overflow: hidden; margin-right: -120px; z-index: 9; }
.product-placement img { max-width: 120px; height: 120px; }
.product-placement.show { animation-name: showproduct; animation-iteration-count: 1; animation-timing-function: linear; animation-duration: 1s; animation-fill-mode: forwards; }
@keyframes showproduct { 
  0% { margin-right: -120px; }
  100% { margin-right: 0px; }
}
.skin-care-data-contain { display: block; width: 100%; color: black; }
.skin-care-data { width: 100%; max-width: 33%; float: left; display: inline-block; }
.skin-care-data p:nth-child(1) { font-size: 1.2rem; }
.skin-care-data p { text-align: center; margin: 0px; font-size: 0.8rem; }
@font-face { font-family: Norms; src: url("../fonts/TT-Norms-Fonts/TTNorms-Regular.otf"); font-style: normal; font-display: swap; }
@font-face { font-family: "Norms Bold"; src: url("../fonts/TT-Norms-Fonts/TTNorms-Bold.otf"); font-style: normal; font-display: swap; }
@font-face { font-family: "Norms SemiBold"; src: url("../fonts/TT-Norms-Fonts/TTNorms-Medium.otf"); font-style: normal; font-display: swap; }
@font-face { font-family: "Norms Light"; src: url("../fonts/TT-Norms-Fonts/TTNorms-Light.otf"); font-style: normal; font-display: swap; }
@keyframes spin { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.abs { position: absolute; }
a {
  color: white; text-decoration: none;
  &:hover { color: lightblue; }
}
body { inset: 0px; font-family: "Titillium Web", sans-serif; color: white; margin: 0px; position: absolute; transform-origin: 0px 0px; }
html, body { display: block; position: relative; width: 100vw; height: 100vh; font-family: Montserrat, Helvetica, sans-serif; }
.container { box-sizing: border-box; width: 100%; min-height: 100%; height: 100%; background-color: rgb(255, 255, 255); background-repeat: repeat-y; background-position: center top; background-size: 100%; position: relative; overflow: hidden; }
.input_video {
  display: none; position: absolute; inset: 0px;
  &.selfie { transform: scale(-1, 1); }
}
.input_image { position: absolute; }
.canvas-container { display: flex; width: 100%; margin: auto; align-items: start; position: relative; border-radius: 1rem; overflow: hidden; height: calc(100%); max-height: 100vh; transition: 0.5s; }
.canvas-container.result { max-width: 480px; max-height: 40vh; }
.canvas-container canvas { border-radius: 1rem; height: 100vh; }
.capture-modal { position: fixed; z-index: 99; inset: 0px; display: none; }
.capture-modal-background { width: 100%; height: 100%; position: absolute; background-color: rgba(0, 0, 0, 0.5); z-index: 1; }
.capture-modal-fill { background-color: white; width: 88vw; height: 88vw; position: absolute; z-index: 9; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 30px; }
.capture-modal-fill img, .capture-modal-fill a { position: absolute; width: 100%; height: 100%; }
.capture-modal-fill img { width: 90%; height: 90%; top: 5%; left: 5%; }
.canvas-container.show-scan-line .canvas-border::after { content: ""; width: 100%; background-image: url("./design/images/GlowLine.png"); height: 100px; position: absolute; margin-top: -50px; animation-name: animScan; animation-duration: 4s; animation-timing-function: linear; animation-fill-mode: forwards; animation-iteration-count: infinite; }
.raw_canvas { position: absolute; top: 0px; }
#effect_raw { display: none !important; }
#effect_final { transform-origin: center center; transform: translate(-50%, 40%) scale(2.5); }
.denoise-container { padding: 0px 2rem; margin-top: 0.5rem; margin-bottom: 0.25rem; max-height: 0px; overflow: hidden; transition: 0.5s; }
.denoise-container.active { max-height: 33vh; }
.output_canvas { position: relative; left: 0px; top: 0px; margin: auto; display: block !important; }
.cropped_canvas { min-width: 360px; max-height: 640px; margin: auto; position: relative; }
.logo {
  bottom: 10px; right: 20px;
  & .title { color: white; font-size: 28px; }
  & .subtitle { position: relative; color: white; font-size: 10px; left: -30px; top: 20px; }
}
.control-panel { position: absolute; left: 10px; top: 10px; }
.raw-canvas-container, .effects-container { position: absolute; inset: 0px; overflow: hidden; }
.raw-canvas-container.raw-canvas-with-slider { border-right: 1px solid white; z-index: 7; }
.effects-container { z-index: 8; }
#canvasSlider { position: absolute; height: 0px; appearance: none; background-color: transparent; border: none; top: 50%; pointer-events: initial; z-index: 9; }
#canvasSlider::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; border-radius: 50%; border: 0px solid transparent; background: url("./design/images/arrow-diff.png") 0% 0% / 18px 18px; cursor: pointer; margin-top: -8px; }
#canvasSlider::-webkit-slider-runnable-track { width: 100%; height: 0px; cursor: pointer; background: transparent; border-radius: 12px; }
input[type="range"] { width: 100%; height: 3px; background-color: white; color: white; outline: none; appearance: none; border-radius: 8px; border: 1px solid rgb(112, 202, 203); margin: 16px 0px; }
.loading {
  display: flex; position: absolute; inset: 0px; align-items: center; backface-visibility: hidden; justify-content: center; opacity: 1; transition: opacity 1s;
  & .message { font-size: x-large; }
  & .spinner { position: absolute; width: 120px; height: 120px; animation: 1s linear 0s infinite normal none running spin; border-width: 32px; border-style: solid; border-color: rgb(52, 152, 219) rgb(190, 190, 190) rgb(190, 190, 190); border-image: initial; border-radius: 50%; }
}
.loaded .loading { opacity: 0; }
.shoutout { left: 0px; right: 0px; bottom: 40px; text-align: center; font-size: 24px; position: absolute; }
.status-container { width: 100%; color: black; margin: auto; display: block; position: fixed; inset: 0px; padding: 0px; box-sizing: border-box; opacity: 0; pointer-events: none; transition: 0.65s; z-index: 99; }
.status-container .status-box { display: block; position: absolute; opacity: 0; left: 0px; bottom: 0px; right: 0px; padding: 20px 0px 120px; border-radius: 1rem 1rem 0px 0px; background-color: rgb(255, 255, 255); color: rgb(0, 0, 0); transition: 0.5s; margin-top: 100px; }
.status-container.show-status { opacity: 1; pointer-events: initial; }
.status-container.show-status .status-box { transition-delay: 0.5s; opacity: 1; pointer-events: initial; margin-top: 0px; }
.status-bar { display: block; width: 100%; max-width: 100%; height: 3px; margin-bottom: 15px; border-radius: 12px; border: 1px solid rgb(112, 202, 203); background-color: rgb(255, 255, 255); overflow: hidden; }
.status-fill { position: relative; display: block; max-width: 100%; width: 0px; height: 100%; background-color: rgb(77, 152, 216); }
.status-fill--Minimal { background-color: rgb(163, 233, 132); }
.status-fill--Medium { background-color: rgb(255, 255, 50); }
.status-fill--High { background-color: rgb(196, 107, 109); }
.status-skin-condition { position: relative; display: none; margin: 2rem auto auto; color: black; padding-bottom: 80px; }
.status-skin-title, .statis-skin-detail { font-size: 1.5em; text-align: center; }
.status-skin-detail { font-size: 1.2em; margin-bottom: 30px; text-align: center; }
.status-detail { width: auto; position: relative; display: block; max-width: calc(100% - 80px); margin: auto; color: rgb(77, 152, 216); }
.status-detail-text { float: right; font-size: 0.65em; }
.status-detail-text ~ p { font-size: 0.65em; font-weight: 600; margin: 2px 0px 8px; }
@keyframes animScan { 
  0%, 100% { top: 0%; }
  50% { top: 100%; }
}
.loader, .start-menu { color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); }
.loader, .start-menu { position: fixed; font-size: 16px; width: 100%; height: 100%; top: 0px; left: 0px; right: 0px; display: flex; justify-content: center; align-items: center; flex-direction: column; margin: 0px; z-index: 999; transition: 1s; }
.start-menu { text-align: center; z-index: 1000; display: block; }
.start-menu-content { position: relative; padding-top: 10%; }
.loader .loading-icon { width: 36px; height: 36px; margin-bottom: 0.5rem !important; }
.loader.fade { opacity: 0; pointer-events: none; }
.start-menu-guide-selfie { width: 110px; height: 110px; border-radius: 50%; overflow: hidden; margin: auto; }
.start-menu-title, .wardah-loader-text { font-weight: 700; font-size: 1rem; margin: 0.5rem 0px 0.8rem; }
.start-menu-subtitle { font-size: 0.65rem; line-height: 1rem; margin: 1rem; }
.start-menu-subtitle p { margin: 0.2rem 0px; padding: 0px; }
.start-menu-options { text-align: left; padding: 0px 2rem; }
.start-menu-option { font-size: 0.65rem; font-weight: 700; padding: 1rem 0px 1rem 3rem; position: relative; }
.start-menu-option img { position: absolute; width: 30px; height: 30px; left: 0px; top: 0.5rem; }
.start-menu-guide-selfie img { width: 100%; }
.canvas-border { top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; margin: 0px auto 20px; border-radius: 2rem; border: 2px solid rgb(80, 255, 127); box-sizing: border-box; overflow: hidden; z-index: 8; }
input[type="range"]::-webkit-slider-runnable-track { width: 100%; height: 2px; cursor: pointer; background: rgb(112, 202, 203); border-radius: 0px; }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 15px; height: 15px; border-radius: 50%; border: 3px solid rgb(112, 202, 203); background-color: rgb(255, 255, 255); cursor: pointer; margin-top: -7px; }
input[type="range"] { width: 100%; height: 2px; background-color: white; color: white; outline: none; appearance: none; border-radius: 0px; border: 0px solid rgb(112, 202, 203); }
.start-button { border-style: solid; border-color: rgb(255, 255, 255); border-image: initial; border-width: 1px !important; }
.start-button--pressed .start-button { pointer-events: none; animation-name: hideButton; animation-duration: 1s; animation-iteration-count: 1; animation-fill-mode: forwards; animation-timing-function: ease-out; }
.start-button-fill-container { position: relative; width: 100%; overflow: hidden; }
.start-button-fill { position: absolute; top: 0px; left: 0px; width: 0px; bottom: 0px; background-color: rgb(255, 255, 255); border-radius: 1rem; transition: 0.25s; }
@keyframes hideButton { 
  0% { height: 3rem; line-height: 1rem; background-color: rgb(112, 202, 203); border-color: rgb(77, 153, 217); }
  75% { height: 0px; line-height: 5rem; background-color: rgb(255, 255, 255); border-color: rgb(77, 153, 217); }
  100% { height: 9px; line-height: 5rem; background-color: rgb(255, 255, 255); border-color: rgb(77, 153, 217); }
}
@keyframes showBox { 
  0% { opacity: 0; margin-bottom: -100px; }
  40% { opacity: 1; }
  100% { opacity: 1; margin-bottom: 0px; }
}
@keyframes showContainer { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.footer { position: fixed; bottom: 0px; pointer-events: none; }
.footer p { font-size: 8px; text-align: center; line-height: 11px; margin: 20px; }
.denoise-text { display: inline-block; text-align: left; font-size: 12px; color: black; }
.denoise-text ~ .denoise-text { float: right; text-align: right; }
.denoise-container label { font-size: 0.6rem; height: 2rem; display: block; color: black; }
.status-cta-container { font-weight: 600; margin: 1.5rem 0px 0.8rem; text-align: center; }
.status-cta-container .bottom-button-container { position: absolute; }
.status-cta-container p { font-size: 0.8em; }
.status-cta { appearance: none; border: 0px; color: rgb(0, 0, 0); padding: 15px 40px; border-radius: 15px; font-size: 1.2em; font-weight: 700; }
.result-button-container { position: fixed; bottom: 40px; right: 40px; z-index: 9; }
.result-button-container.screenshot { top: 40px; bottom: initial; }
.result-button, .capture-close { width: 80px; height: 80px; border-radius: 50%; border: 0px; position: relative; font-size: 0.8em; font-weight: 700; }
.capture-close { position: absolute; bottom: -80px; right: 0px; }
.result-button::after, .capture-close::after { position: absolute; width: 100%; height: 100%; content: ""; background: url("./design/images/loader-icon.png") 0% 0% / contain; top: 0px; left: 0px; }
.product-recommendation { width: 100%; box-sizing: border-box; position: relative; display: none; z-index: 2; }
.product-recommendation > p { font-weight: 600; }
.product-recommendation--show { display: flex; height: 36vh; max-height: 36vh; width: 100%; align-items: center; justify-content: center; transition: max-height 0.3s; }
.product-recommendation-content, .product-recommendation-group { margin: 0px; position: relative; white-space: nowrap; display: flex; }
.product-recommendation-group { opacity: 0; transition: opacity 0.2s; padding-top: 3.25rem; }
.product-recommendation-group.active { overflow: hidden; max-height: 36vh; opacity: 1; }
.product-recommendation-group#category { margin: 0px; padding: 0px; width: 100%; }
.product-recommendation-group p { position: absolute; top: 0px; left: 0px; text-align: center; right: 0px; font-weight: 700; font-size: 1.25rem; margin: 0px; line-height: 2.5rem; pointer-events: none; text-transform: capitalize; color: rgb(0, 0, 0); }
.product-recommendation-item { position: relative; display: inline-flex; width: 100%; margin-right: 1.5rem; flex: 1 1 0%; flex-direction: column; height: 20vh; min-height: 140px; padding: 0.25rem; box-sizing: border-box; }
.product-recommendation-item button { border-radius: 0.5rem; border-width: 1px; border-style: solid; border-color: transparent; background-color: transparent; transition: 0.3s; }
.product-recommendation-item button.active { border-color: rgb(254, 254, 254); background-color: rgba(117, 104, 255, 0.2); }
.product-recommendation-item:nth-last-child(1) { margin-right: 0px; }
.product-recommendation-item button { position: absolute; inset: 0px; z-index: 9; background-color: transparent; appearance: none; }
.product-recommendation-item img { margin-left: 50%; transform: translateX(-50%); box-sizing: border-box; padding: 0.3rem; display: block; height: auto; max-width: 100%; max-height: 90px; object-fit: contain; width: auto !important; }
.product-description { white-space: initial; text-align: center; font-size: 0.5rem; overflow: hidden; text-overflow: ellipsis; text-transform: capitalize; color: rgb(0, 0, 0); padding: 0px 0.2rem; }
.product-image { height: 100px; width: 100%; max-height: 100px; position: relative; z-index: 9; pointer-events: none; }
.product-group_template, .product-item_template { display: none !important; }
.toggle-mask-container { display: inline-flex; white-space: nowrap; }
.toggle-mask-item { width: 20vw; aspect-ratio: 1.5 / 1; border-radius: 0.7em; position: relative; transition: 0.3s; background-color: rgba(255, 255, 255, 0.8); display: flex; align-items: center; text-align: center; white-space: initial; margin-right: 1rem; border: 1px solid rgb(255, 255, 255); flex: 0.35 1 0%; }
.toggle-mask-item.toggle--active { background-color: rgba(255, 255, 255, 0.6); }
.product-recommend-back, .product-recommend-back button { position: relative; appearance: none; border: none; background-color: transparent; }
.product-recommend-back img { max-width: 100%; max-height: 100%; }
.product-recommendation-content::-webkit-resizer { height: 10px; }
.product-recommendation-content::-webkit-resizer { display: none; }
.bottom-button-container { position: fixed; bottom: 0px; left: 0px; right: 0px; padding: 2rem; border-radius: 0.5rem 0.5rem 0px 0px; z-index: 2; }
.bottom-button { border-radius: 2rem; height: 3rem; font-size: 0.8rem; font-weight: 700; background-color: rgb(112, 202, 203); width: 100%; border-width: 0px; appearance: none; color: rgb(255, 255, 255); transition: 0.2s; }
.bottom-button:disabled { background-color: rgb(160, 160, 160); color: white; }
.bottom-button-container.style-green { background-color: rgb(112, 202, 203); color: rgb(112, 202, 203); }
.bottom-button-container.style-green .bottom-button { color: rgb(112, 202, 203); background-color: rgb(255, 255, 255); }
.start-menu-cancel-button { position: absolute; top: 1rem; right: 1rem; width: 2rem; height: 2rem; border-radius: 50%; border-width: 0px; appearance: none; box-sizing: border-box; padding: 0px; background: none; }
.start-menu-cancel-button img { width: 100%; height: 100%; }
.start-menu.fade { opacity: 0; pointer-events: none; }
.wardah-loader { width: 140px; height: 28px; mask-image: url("./design/images/logo-wardah.webp"); mask-repeat: no-repeat; mask-size: 130px; margin: auto; background-color: rgb(112, 202, 203); }
.loading-spinner-wardah { position: relative; width: 20px; height: 20px; margin: auto; }
.loading-spinner-item { position: absolute; width: 100%; height: 100%; }
.loading-spinner-item::before, .loading-spinner-item::after { position: absolute; top: 0px; height: 6px; width: 2px; left: 50%; margin-left: -1px; background-color: rgb(112, 202, 203); content: ""; animation-name: pulsing; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: linear; transform-origin: center top; transform: rotate(180deg); }
.loading-spinner-item::after { top: 20px; transform-origin: center top; transform: rotate(0deg); }
.loading-spinner-item:nth-child(2)::before { animation-delay: 0.25s; }
.loading-spinner-item:nth-child(3)::before { animation-delay: 0.5s; }
.loading-spinner-item:nth-child(4)::before { animation-delay: 0.75s; }
.loading-spinner-item:nth-child(1)::after { animation-delay: 1s; }
.loading-spinner-item:nth-child(2)::after { animation-delay: 1.25s; }
.loading-spinner-item:nth-child(3)::after { animation-delay: 1.5s; }
.loading-spinner-item:nth-child(4)::after { animation-delay: 1.75s; }
.loading-spinner-item:nth-child(2) { transform: rotate(45deg); }
.loading-spinner-item:nth-child(3) { transform: rotate(90deg); }
.loading-spinner-item:nth-child(4) { transform: rotate(135deg); }
@keyframes pulsing { 
  0%, 50% { height: 6px; }
  25% { height: 10px; }
}
.wardah-loader-content { position: absolute; transform: translate(0px, 50%); width: 100%; text-align: center; margin-top: -50%; }
.wardah-loader-content small { margin-top: 1rem; display: block; }
.start-container { position: fixed; }
.start-container-analyze-text { color: rgb(255, 255, 255); height: 0px; padding: 0px; transition: 0.5s; text-align: center; font-size: 0px; margin-bottom: 0px; overflow: hidden; }
.start-button--pressed .start-container-analyze-text { height: 1rem; font-size: 0.65rem; margin-bottom: 0.5rem; }
.owl-carousel .owl-stage-outer { margin: 0px; }
.denoise-container.active ~ .product-recommendation--show { align-self: baseline; max-height: 30vh; }
.start-menu-content { height: 100%; padding: 0px; align-items: center; align-content: center; }
.start-menu { background: url("./design/images/analyzer/bg.png") 0% 0% / cover; }
.start-menu-guide-wardah { width: 200px; height: 130px; overflow: hidden; margin: auto; background-color: rgb(77, 153, 217); mask-image: url("./design/images/logo-wardah.webp"); mask-repeat: no-repeat; mask-size: 130px; mask-position: 50% center; }
.edit-icon { width: 1.5rem; height: 1.5rem; background-color: rgb(77, 153, 217); mask-image: url("./design/images/analyzer/edit.png"); mask-repeat: no-repeat; mask-size: 1.5rem; mask-position: 50% center; position: absolute; right: 0.6rem; top: 0.75rem; }
#questionnaireButton { margin-bottom: 5rem; }
.bottom-button { background-color: rgb(107, 183, 196); font-family: Norms; font-weight: 500; }
.bottom-button:nth-last-child(1) { margin-top: 0.5rem; }
.bottom-button-container.style-green { background: url("./design/images/analyzer/bg.png") 0% 0% / cover; }
.bottom-button-container.style-green .bottom-button { background-color: rgb(107, 183, 196); color: white; border: 1px solid transparent; }
.start-button-fill { background-color: rgb(77, 153, 217); }
.start-container-analyze-text { color: rgb(77, 153, 217); }
.status-viewer { position: fixed; inset: 0px; z-index: 4; }
.status-viewer-bg { background-color: rgba(0, 0, 0, 0.3); position: absolute; inset: 0px; }
.status-viewer-container { position: absolute; max-width: 80vw; max-height: 60vh; height: 100%; width: 100%; top: 50%; left: 50%; padding: 0px; margin: -3rem 0px 0px; transform: translate(-50%, -50%); white-space: nowrap; }
.status-viewer-item { position: relative; display: inline-block; width: 100%; height: 100%; }
.status-viewer-item img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; }
.status-viewer-back img { width: 100%; height: 100%; object-fit: contain; }
.status-viewer-back { position: absolute; top: -3rem; right: 0px; width: 2rem; height: 2rem; border-radius: 50%; border-width: 0px; appearance: none; box-sizing: border-box; padding: 0px; background: none; }
.status-viewer-nav { position: absolute; bottom: 1rem; left: 1rem; height: 2.5rem; right: 1rem; text-align: center; }
.status-viewer-nav--prev, .status-viewer-nav--next { width: 2.5rem; height: 2.5rem; appearance: none; outline: none; border: none; padding: 0px; margin: 0px 0.25rem; background-color: transparent; }
.status-viewer-nav--prev img, .status-viewer-nav--next img { width: 100%; height: 100%; }
.status-viewer-nav--prev img { transform: rotate(180deg); }
.status-helper-container { position: absolute; left: 0px; right: 0px; bottom: 2rem; padding: 1rem; background: white; border-radius: 1rem; }
.status-helper { display: flex; padding-bottom: 3rem; }
.status-helper-1, .status-helper-2 { position: relative; flex: 1 1 0%; text-align: center; font-size: 0.7rem; }
.status-helper-color { position: absolute; width: 2rem; height: 2rem; left: 50%; margin-left: -0.75rem; top: 1rem; border-radius: 50%; }
.status-helper-guidance { font-size: 0.75rem; }
.questionnaire-menu { display: none; position: fixed; inset: 0px; background: url("./design/images/analyzer/bg.png") 0% 0% / cover; z-index: 5; }
.questionnaire-item { position: absolute; width: 100%; box-sizing: border-box; top: 0px; left: 0px; right: 0px; height: calc(100% - 8rem); padding: 4rem 2rem 0px; display: flex; flex-direction: column; }
.questionnaire-query, .questionnaire-sub-query { color: rgb(77, 153, 217); text-align: center; font-size: 1.25rem; left: 0px; right: 0px; }
.questionnaire-sub-query { font-size: 0.75rem; margin: 0.5rem 0px 0px; }
.questionnaire-guide { color: rgb(77, 153, 217); text-align: center; font-size: 0.8rem; top: 2rem; position: relative; }
.questionnaire-block { display: flex; flex-flow: wrap; height: calc(100%); margin-top: 1rem; gap: 1rem; position: relative; }
.questionnaire-block#genderSelect { height: 100%; place-content: center; max-width: 10rem; margin: auto; }
.questionnaire-block#genderSelect label { flex-basis: 100%; padding: 1rem 0px; font-size: 0.6rem; }
.questionnaire-block#ageSelect { height: 100%; place-content: center; max-width: 10rem; margin: auto; }
#ageSelect.questionnaire-block label { flex-basis: 100%; }
.questionnaire-block input[type="checkbox"], .questionnaire-block input[type="radio"], .questionnaire-block input[type="button"] { position: absolute; z-index: -1; opacity: 0; display: none; }
.questionnaire-skin-result { margin-top: 4rem; }
.questionnaire-block label { flex: 1 1 calc(50% - 2rem); color: rgb(77, 153, 217); padding: 1rem 2.5%; box-sizing: border-box; text-align: center; align-content: flex-end; position: relative; border-radius: 0.5rem; font-size: 0.6rem; background-color: white; }
.questionnaire-block label::before { content: ""; width: calc(100%); height: calc(100%); position: absolute; inset: 0px; border-radius: 0.5rem; background-color: rgba(77, 153, 217, 0); transition: background-color 0.2s; z-index: 2; }
.questionnaire-block input:checked + label::before { background-color: rgba(77, 153, 217, 0.44); }
#geoLocation { flex-direction: column; padding-top: 3rem; }
#geoLocation input { flex: 1 1 0%; border: 0px solid rgba(0, 0, 0, 0.333); border-radius: 0.5rem; text-align: center; padding: 1rem 2.5%; color: rgb(77, 153, 217); width: 100%; }
#geoLocation input:active, #geoLocation input:focus { background: rgb(107, 183, 196); color: white; }
#geoLocation input:focus ~ .edit-icon { background-color: white; }
.weather-data { padding-top: 0px; display: flex; position: relative; flex-direction: column; place-content: center; align-items: center; gap: 1rem; }
.weather-data-item { flex: 1 1 100%; position: relative; box-sizing: border-box; width: 100%; padding: 1rem 2.5%; place-content: center; background: white; border-radius: 0.5rem; text-align: center; }
.weather-data-item-key { color: rgb(77, 153, 217); font-size: 0.6rem; }
#question_3 { flex-direction: column; }
#question_3 .questionnaire-query { position: relative; }
#skinConcern.questionnaire-block label { width: 45%; }
#skinType.questionnaire-block label, #skinConcern.questionnaire-block label { color: white; overflow: hidden; border-radius: 0.5rem; max-width: 12rem; }
#skinType.questionnaire-block label img, #skinConcern.questionnaire-block label img { z-index: 1; position: relative; height: 100%; width: 100%; object-fit: cover; }
#skinType.questionnaire-block label .fill, #skinConcern.questionnaire-block label .fill { z-index: 1; position: absolute; top: 0px; left: 0px; right: 0px; height: 100%; width: 100%; }
#skinType.questionnaire-block label, #skinConcern.questionnaire-block label { text-align: right; align-items: end; }
#skinType.questionnaire-block label p, #skinConcern.questionnaire-block label p { margin: 0px; font-size: 1rem; z-index: 2; font-family: Norms; font-weight: 500; }
#skinConcern.questionnaire-block label p { position: absolute; bottom: 0.5rem; left: 0.5rem; right: 0.5rem; font-size: 0.8rem; }
#skinType.questionnaire-block label small { margin: 0px; font-size: 0.6rem; z-index: 2; position: relative; font-family: Norms; font-weight: 500; }
#question_extra { width: 100%; height: 100%; background: url("./design/images/analyzer/bg.png") 0% 0% / cover; z-index: 3; }
#question_extra .questionnaire-block { flex-wrap: initial; flex-direction: column; height: initial; }
.questionnaire-item-extra { padding-bottom: 7rem; }
#question_extra .bottom-button-container { display: flex; flex-direction: column; }
#question_extra .bottom-button { flex: 1 1 0%; padding: 1rem 0px; width: auto; }
#question_extra .questionnaire-block label { flex-basis: 100%; align-content: center; text-align: left; background-color: white; border-radius: 0.5rem; font-size: 0.6rem; padding: 0.5rem; }
.questionnaire-block label p { position: relative; z-index: 2; margin: 0px; }
.questionnaire-block input:checked + label, #question_extra .questionnaire-block input:checked + label { color: white; }
#question_extra .questionnaire-block input:checked + label::before { background-color: rgb(107, 183, 196); }
#questionExtraBack { background-color: transparent; border: 1px solid rgb(77, 153, 217); color: rgb(77, 153, 217); }
.questionnaire-skin-photo { width: 10rem; height: 10rem; overflow: hidden; margin: 4rem auto 0px; border-radius: 1rem; }
.questionnaire-skin-photo img { min-width: 100%; height: 100%; }
.questionnaire-skin-type, .questionnaire-skin-desc { font-size: 1.5rem; color: rgb(77, 153, 217); padding: 2rem 0.5rem 0px; text-align: center; }
.questionnaire-skin-desc { font-size: 0.75rem; }
#extra_6 .questionnaire-block { display: block; }
.weather-input { position: relative; z-index: 2; display: flex; }
.city-autocompleter { position: absolute; right: 0px; left: 0px; top: 3rem; padding: 0.5rem; border-radius: 0px 0px 0.5rem 0.5rem; opacity: 0; pointer-events: none; transition: opacity 0.2s; background: white; box-shadow: rgba(77, 153, 217, 0.44) 0px 10px 10px; max-height: 20vh; overflow: auto; }
.city-autocompleter-item { position: relative; display: block; width: 100%; padding: 0.25rem; text-align: center; border: 1px solid rgb(77, 153, 217); background: transparent; margin: 0.5rem 0px; border-radius: 0.5rem; line-height: 1.5rem; color: rgb(77, 153, 217); }
.city-autocompleter.fade { opacity: 1; pointer-events: initial; }
.city-autocompleter-item.hidden { display: none; }
.start-menu-subtitle { line-height: 1.2rem; font-family: Norms; }
.start-menu { transition: all; }
.start-menu.fade { transition: 0.5s; opacity: 0; }
.start-menu-guide-selfie { display: flex; flex-flow: wrap; justify-content: center; align-items: center; border-radius: initial; width: 80%; height: auto; gap: 1rem 0.5rem; margin: 2rem auto; max-width: 320px; }
.start-menu-guide-selfie .guide-item { width: 100%; height: 100%; max-height: 8rem; flex-basis: calc(50% - 0.5rem); aspect-ratio: 1 / 1; position: relative; overflow: hidden; padding: 0.5rem 0.5rem 2rem; border-radius: 0px; box-sizing: border-box; }
.guide-item p { position: relative; left: 0px; right: 0px; color: rgb(77, 153, 217); font-size: 0.6rem; text-align: center; margin: 0px; }
.start-menu-guide-selfie img { position: relative; object-fit: contain; width: 100%; height: 100%; display: block; margin-bottom: 0.5rem; }
.start-menu-title, .start-menu-option { color: rgb(77, 153, 217); }
.start-menu-option { display: block; font-weight: 500; line-height: 1.2rem; padding: 0px 0px 1rem 3rem; }
.start-menu-option a { color: rgb(77, 153, 217); border-bottom: 1px solid rgb(77, 153, 217); }
#privacy_agree_chk { display: none; }
#privacy_agree_chk + label::before, #privacy_agree_chk + label::after { position: absolute; width: 16px; height: 16px; content: ""; background-color: white; border-radius: 4px; left: 0.2rem; top: 0.2rem; transition: 0.2s; box-shadow: rgba(77, 153, 217, 0.44) 0px 4px 4px inset; }
.start-menu-option { max-width: 320px; margin: auto; }
#privacy_agree_chk + label::after { opacity: 0; border-bottom: 3px solid rgb(52, 113, 113); border-left: 3px solid rgb(52, 113, 113); border-image: initial; height: 8px; border-top: none; border-right: none; border-radius: 0px; box-shadow: none; background: none; transform: rotate(-45deg); box-sizing: border-box; top: 0.2rem; left: 0.2rem; }
#privacy_agree_chk:checked + label::after { opacity: 1; }
.loader { background: url("./design/images/analyzer/bg.png") 0% 0% / cover; }
.guidance-text { position: fixed; left: 50%; transform: translate(-50%, 0px); bottom: 9rem; font-size: 1.05rem; font-weight: 700; width: 100vw; text-align: center; }
.status-box > p { font-size: 0.8em; text-align: center; font-weight: 700; }
.status-container.show-status .status-box { overflow: auto; }
.status-detail button { position: absolute; inset: 0px; appearance: none; outline: none; border: 0px solid; background-color: transparent; }
.view-three-d { position: absolute; inset: 0px; }
.button-three-d { position: absolute; padding: 0.5rem 1rem; background-color: rgb(107, 183, 196); border-radius: 2rem; font-size: 0.6rem; color: white; z-index: 8; border: 0px solid transparent; bottom: 8rem; right: 1rem; }
.popup-3d { position: absolute; inset: 0px; z-index: 6; display: none; background-color: rgba(0, 0, 0, 0.3); }
.image-popup-3d { margin: auto; width: 80%; max-width: 30rem; position: relative; display: block; border-radius: 1rem; aspect-ratio: 1 / 1; top: 4rem; }
.status-cta-container { position: absolute; z-index: 3; inset: 0px; margin-bottom: 0px; pointer-events: none; }
.status-container.show-status button { pointer-events: initial; }
.status-container .status-box { z-index: 2; }
.bottom-button--back { border: 1px solid rgb(77, 153, 217); background: transparent; color: rgb(77, 153, 217); }
.loading-spinner-item::before, .loading-spinner-item::after { background-color: rgb(77, 153, 217); }
@keyframes hideButton { 
  0% { height: 3rem; line-height: 1rem; background-color: rgb(112, 202, 203); border-color: rgb(77, 153, 217); }
  75% { height: 0px; line-height: 5rem; background-color: transparent; border-color: white; }
  100% { height: 9px; line-height: 5rem; background-color: transparent; border-color: white; }
}
.qs-datepicker-container { width: 59%; font-size: 16px; font-family: Norms; }
.qs-overlay-year { display: none !important; }
.qs-controls { background-color: rgb(77, 153, 217); color: white; padding: 0.5rem; }
.qs-arrow.qs-right::after, .qs-arrow.qs-right:hover::after { border-left-color: white; }
.qs-arrow.qs-left::after, .qs-arrow.qs-left:hover::after { border-right-color: white; }
.qs-square:not(.qs-empty):not(.qs-disabled):not(.qs-day):not(.qs-active):hover { background-color: rgb(77, 153, 217); color: white; }
@media (max-width: 480px) {
  .qs-datepicker-container { font-size: 12px; width: 80%}
}
.start-menu-title { display: block; font-size: 3rem; font-family: "Times New Roman", Times, serif; color: rgb(77, 153, 217); font-style: italic; }
.start-menu-title.start-menu-title--small { font-family: Montserrat; font-size: 1rem; margin: 1rem auto; font-style: initial; color: white; max-width: 65%; }
#face_analyzer { background-position: center bottom; background-size: 200%; }
#face_analyzer .start-menu-title { font-size: 1.5rem; }
.wardah-loader-text { display: block; font-size: 1.25rem; font-family: "Times New Roman", Times, serif; color: rgb(77, 153, 217); font-style: italic; }
.wardah-loader-text img { max-height: 3rem; margin: 1rem auto; }
.start-menu-content { height: 100%; padding: 0px; align-items: center; align-content: center; }
.start-menu { background-size: cover; }
.start-menu-guide-wardah { width: 200px; height: 50px; overflow: hidden; margin: 0px auto 2rem; background-color: white; mask-image: url("../design/images/logo-wardah.webp"); mask-repeat: no-repeat; mask-size: 130px; mask-position: 50% center; }
#question_extra .start-menu-guide-wardah { background-color: rgb(77, 153, 217); }
.edit-icon { width: 1rem; height: 1rem; background-color: rgb(77, 153, 217); mask-image: url("../design/images/analyzer/arrow_send.png"); mask-repeat: no-repeat; mask-size: 1rem; mask-position: 50% center; position: absolute; right: 0.6rem; top: 1.8rem; pointer-events: none; }
#questionnaireButton { margin-bottom: 5rem; background-color: rgb(77, 153, 217); color: white; }
#registButton { margin-bottom: 3.5rem; }
#scanQRButton { margin-bottom: 0px; }
.bottom-button { background-color: white; font-family: Norms; font-weight: 500; color: rgb(77, 153, 217); }
.bottom-button:disabled { background-color: rgb(217, 217, 217); color: white; }
.start-button--pressed .bottom-button-container { display: none; }
.bottom-button-container.style-green { background: url("../design/images/analyzer/skin_analyzer/bg.png") left bottom / 200%; }
.bottom-button.bottom-button--unstyled { background-color: transparent; color: rgb(77, 153, 217); }
.bottom-button-container.style-green .bottom-button { color: rgb(77, 153, 217); border: 1px solid transparent; background-color: white; }
.start-button-fill { background-color: white; }
.start-container-analyze-text { color: white; }
.start-button--pressed .bottom-button-container.style-green .bottom-button { background-color: transparent; }
.start-menu-subtitle--top { margin: 1.5rem 0px; }
.start-menu-subtitle--top img { max-height: 2.5rem; }
.start-menu-subtitle--bottom { color: white; line-height: 0.8rem; font-size: 0.6rem; background: url("../design/images/analyzer/skin_analyzer/ribbon.png") 0% 0% / 100% no-repeat; margin: 0px; font-family: Norms; height: 2rem; padding: 0.5rem; }
.questionnaire-menu { display: none; position: fixed; inset: 0px; background: url("../design/images/analyzer/skin_analyzer/bg.png") center bottom / 200%; z-index: 5; }
.questionnaire-item { position: absolute; width: 100%; box-sizing: border-box; top: 0px; left: 0px; right: 0px; height: calc(100% - 10rem); padding: 2rem 2rem 0px; display: flex; flex-direction: column; }
.questionnaire-query, .questionnaire-sub-query { color: rgb(77, 153, 217); text-align: center; font-size: 1.25rem; left: 0px; right: 0px; }
.questionnaire-query { font-family: "Times New Roman", Times, serif; font-size: 1.5rem; font-style: italic; }
#question_extra .questionnaire-query { font-family: "Times New Roman", Times, serif; font-style: italic; font-size: 2rem; }
.questionnaire-sub-query { font-size: 0.75rem; margin: 1rem 0px; }
.questionnaire-guide { color: rgb(77, 153, 217); text-align: center; font-size: 0.8rem; top: 2rem; position: relative; }
.questionnaire-block { display: flex; flex-flow: wrap; height: calc(100%); margin-top: 1rem; gap: 1rem; position: relative; justify-content: center; }
#ageSelect { display: flex; flex-flow: wrap; height: calc(100%); margin-top: 1rem; gap: 1rem; position: relative; justify-content: center; }
#genderSelect { flex: 1 0 100%; border: 0px solid rgba(0, 0, 0, 0.333); border-radius: 0.5rem; text-align: center; padding: 0.5rem 2.5%; color: rgb(77, 153, 217); width: 100%; font-family: Norms; font-size: 16px; place-content: center; margin: auto; display: flex; flex-flow: wrap; height: calc(100%); position: relative; }
#genderSelect label { flex-basis: 100%; padding: 1rem 0px; font-size: 0.6rem; }
#ageSelect { height: auto; place-content: center; max-width: 80%; margin: auto; }
#ageSelect.questionnaire-block label { flex-basis: 100%; }
.questionnaire-block input[type="checkbox"], .questionnaire-block input[type="radio"], .questionnaire-block input[type="button"], #genderSelect input[type="checkbox"], #genderSelect input[type="radio"] { position: absolute; z-index: -1; opacity: 0; }
.questionnaire-skin-result { margin-top: 2rem; }
.questionnaire-block label, #genderSelect label { flex: 1 1 calc(50% - 2rem); color: rgb(77, 153, 217); padding: 1rem 2.5%; box-sizing: border-box; text-align: center; align-content: flex-end; position: relative; border-radius: 0.5rem; font-size: 0.6rem; background-color: white; }
.questionnaire-block label::before, #genderSelect label::before { content: ""; width: calc(100%); height: calc(100%); position: absolute; inset: 0px; border-radius: 0.5rem; background-color: rgba(77, 153, 217, 0); transition: background-color 0.2s; z-index: 2; }
#skinConcern.questionnaire-block input:checked + label::before, #skinType.questionnaire-block input:checked + label::before { background-color: rgba(77, 153, 217, 0.44); }
.questionnaire-block input:checked + label::before, #genderSelect input:checked + label::before { background-color: rgb(77, 153, 217); }
#skinConcern.questionnaire-block input:checked + label::after, #skinType.questionnaire-block input:checked + label::after { width: 1rem; height: 1rem; mask-image: url("../design/images/analyzer/top-right.png"); mask-repeat: no-repeat; mask-position: 50% center; mask-size: 100%; margin: auto; background-color: white; content: ""; top: 0.3rem; right: 0.3rem; position: absolute; z-index: 3; }
#geoLocation { flex-direction: column; padding-top: 3rem; }
#geoLocation input, #ageSelect input, #regist_menu input { flex: 1 1 0%; border: 0px solid rgba(0, 0, 0, 0.333); text-align: center; color: rgb(77, 153, 217); width: 60%; font-family: Norms; font-size: 0.8rem; padding: 28px; border-radius: 24px; }
.datepicker-year-selector { flex: 1 1 0%; text-align: center; width: calc(100% - 1rem); font-family: Norms; font-size: 0.8rem; }
.datepicker-year-selector select { position: relative; width: 100%; padding: 0.5rem 2.5%; border-radius: 0.5rem; }
#ageSelect input, #regist_menu input { flex: initial; }
#ageSelect input[name="user_phone"], #regist_menu input[name="user_phone"], input[name="login_phone"] { padding-left: 1rem; }
#geoLocation input:active, #geoLocation input:focus, #ageSelect input:active, #ageSelect input:focus, #regist_menu input:active, #regist_menu input:focus { background: rgb(77, 153, 217); color: white; }
#ageSelect input:active::placeholder, #ageSelect input:focus::placeholder, #regist_menu input:focus::placeholder { color: white; }
#ageSelect input[name="user_phone"] ~ div, #regist_menu input[name="user_phone"] ~ div, input[name="login_phone"] ~ div { position: absolute; left: 20%; top: 50%; transform: translate(0px, -50%); color: rgb(77, 153, 217); background-color: white; align-content: center; text-align: center; border-radius: 0.5rem 0px 0px 0.5rem; font-size: 14px; font-weight: 500; font-family: Montserrat; padding-right: 5px; }
#geoLocation input:focus ~ .edit-icon { background-color: white; }
.weather-data { padding-top: 0px; display: flex; position: relative; flex-direction: column; place-content: center start; align-items: center; gap: 1rem; }
.weather-data-item { flex: 0 1 0px; position: relative; box-sizing: border-box; width: 100%; padding: 0.5rem 2.5%; place-content: center; background: white; border-radius: 0.5rem; text-align: center; }
.weather-data-item-key { color: rgb(77, 153, 217); font-size: 0.6rem; }
.edit-icon { top: 50%; transform: translateY(-50%); }
#question_3 { flex-direction: column; }
#question_3 .questionnaire-query { position: relative; }
#skinType.questionnaire-block label { color: white; overflow: hidden; border-radius: 0.5rem; }
#skinType.questionnaire-block label img { z-index: 1; position: relative; height: 100%; width: 100%; object-fit: cover; }
#skinType.questionnaire-block label .fill { z-index: 1; position: absolute; top: 0px; left: 0px; right: 0px; height: 100%; width: 100%; }
#skinType.questionnaire-block label { text-align: right; align-items: end; }
#skinType.questionnaire-block label p, #skinConcern.questionnaire-block label p { margin: 0px; font-size: 1rem; z-index: 2; font-family: Norms; font-weight: 500; position: relative; bottom: initial; left: initial; right: initial; }
#skinConcern.questionnaire-block label p { font-size: 0.8rem; }
#skinType.questionnaire-block label small, #skinConcern.questionnaire-block label small { margin: 0px; font-size: 0.6rem; z-index: 2; position: relative; font-family: Norms; font-weight: 500; }
.status-tab { display: flex; flex-flow: row; gap: 0px 0.5rem; padding: 1.5rem; }
.status-tab-item { flex: 1 1 0%; border: 1px solid rgba(194, 194, 194, 0.59); border-radius: 0.5rem; padding: 0.5rem; white-space: nowrap; color: rgb(77, 152, 216); font-weight: 500; font-family: Norms; background-color: rgba(255, 255, 255, 0.19); font-size: 0.8rem; }
.status-tab-item.status-tab-item--active { background-color: rgb(77, 153, 217); color: white; }
.status-subtab-items { flex-flow: wrap; display: none; color: rgb(77, 153, 217); }
.status-subtab-items.status-subtab-items--active { display: flex; }
.status-subtab-item { flex: 1 1 30%; padding: 0.6rem; position: relative; border-right: none; border-left: none; border-image: initial; border-bottom: 1px solid white; border-top: 1px solid white; color: rgb(77, 153, 217); appearance: none; font-size: 0.8rem; background-color: transparent; }
.status-subtab-item p { margin: 0px; display: block; color: rgb(77, 152, 216); z-index: 2; position: relative; }
.status-subtab-item--active p { color: rgb(255, 255, 255); }
.status-subtab-item.status-subtab-item--active { background-color: rgb(77, 152, 216); color: white; }
.status-subtab-item--active::before, .status-subtab-item--active::after, .status-box-title::before, .status-box-title::after { content: ""; position: absolute; width: 2rem; height: calc(100%); left: 0px; top: 0px; background: linear-gradient(270deg, rgb(77, 152, 216), rgba(255, 255, 255, 0.314)); z-index: 1; }
.status-subtab-item--active::after, .status-box-title::after { left: initial; right: 0px; transform: rotate(180deg); }
.status-box-title { display: block; position: relative; text-align: center; width: 100%; padding: 1rem; margin: 0px 0px 1rem; color: white; background-color: rgb(77, 152, 216); box-sizing: border-box; }
.status-box > p { font-size: 0.8em; text-align: center; font-weight: 700; }
.status-container.show-status .status-box { overflow: auto; }
.status-container.show-status { padding-bottom: 8rem; }
.status-detail button { position: absolute; inset: 0px; appearance: none; outline: none; border: 0px solid; background-color: transparent; }
.status-box-par, .status-box-fit { color: rgb(77, 152, 216); padding: 1rem 1.5rem; font-family: Norms; font-weight: 400; font-size: 0.8rem; }
.status-box-fit { color: rgb(77, 152, 216); padding: 1rem; border: 1px solid rgb(255, 255, 255); border-radius: 0.5rem; background-color: rgba(255, 255, 255, 0.19); margin: 0px 1rem; }
.status-filled-data { display: none; }
.status-filled-data.status-filled-data--active { display: block; }
.status-cta-container .bottom-button-container { position: relative; }
.status-main-data-container { padding: 1rem; }
.status-main-data { padding: 1rem; border: 1px solid rgb(255, 255, 255); background: rgba(255, 255, 255, 0.19); border-radius: 0.5rem; font-family: Norms; position: relative; }
.status-main--age-container { position: absolute; top: -2rem; right: -1rem; height: 4rem; border-radius: 50%; width: 4rem; background: rgba(255, 255, 255, 0.19); text-align: center; border: 1px solid white; color: rgb(77, 152, 216); z-index: 2; }
.status-main--age { width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 0.6rem; font-weight: 700; font-style: italic; }
.status-main--age p { margin: 0px; font-size: 2.25rem; line-height: 2rem; font-style: initial; }
.status-main-photos { position: relative; display: flex; flex-flow: row; gap: 0.5rem; border-radius: 0.5rem; overflow: hidden; }
.status-photo { flex: 1 1 0%; }
.status-photo img { max-width: 100%; object-fit: cover; height: 100%; display: table; margin: 0px auto; }
.status-data-user-detail { display: flex; position: relative; line-height: 1rem; color: rgb(77, 153, 217); margin-top: 1rem; font-size: 1.25rem; place-items: center; }
.status-data-user-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; width: 45%; padding-right: 0.5rem; position: relative; line-height: 2rem; box-sizing: border-box; }
.status-data-user-name::after { position: absolute; content: ""; right: 0px; height: 100%; width: 2px; background: linear-gradient(rgba(77, 153, 217, 0), rgb(77, 152, 216), rgba(77, 153, 217, 0)); }
.status-data-user-age { display: inline-block; width: 20%; position: relative; padding: 0px 0.5rem; box-sizing: border-box; }
.status-data-user-download-diary { white-space: nowrap; width: 20%; appearance: none; border: 0px; background: none; flex: 1 1 0%; }
.status-data-user-download-diary img { max-width: 100%; height: 100%; }
.status-data-user-complement { display: flex; color: rgb(77, 153, 217); font-size: 0.6rem; margin: 0.5rem 0px 1rem; }
.status-data-user--phone { width: 45%; }
.status-data-user--phone, .status-data-user--datetime { position: relative; font-size: 0.75rem; height: 1rem; padding-left: 1rem; box-sizing: border-box; }
.status-data-user--datetime { padding: 0px 0.5rem 0px 2rem; }
.status-data-user--phone::before, .status-data-user--datetime::before { content: ""; position: absolute; left: 0px; width: 0.8rem; height: 0.8rem; top: 0.1rem; }
.status-data-user--phone::before, .status-data-user--datetime::before { background: url("../design/images/analyzer/skin_analyzer/phone.png") center center / 0.8rem no-repeat; }
.status-data-user--datetime::before { left: 0.9rem; background: url("../design/images/analyzer/skin_analyzer/date.png") center center / 0.8rem no-repeat; }
.status-data-user--phone::after { position: absolute; content: ""; right: 0px; height: 100%; width: 2px; background: linear-gradient(rgba(77, 153, 217, 0), rgb(77, 152, 216), rgba(77, 153, 217, 0)); }
.status-data-user-skin-details::before { position: absolute; top: 0px; content: ""; width: 100%; height: 3px; background: linear-gradient(90deg, rgba(77, 153, 217, 0), rgb(77, 153, 217), rgba(77, 153, 217, 0)); }
.status-data-user-skin-details { position: relative; padding-top: 1rem; display: flex; gap: 1rem; }
.status-data-user-skin { border-radius: 0.5rem; background-color: rgba(255, 255, 255, 0.19); border: 1px solid rgb(255, 255, 255); flex: 1 1 0%; display: flex; flex-direction: column; align-items: center; }
.status-data-user-skin-title, .status-data-user-skin-type { text-align: center; padding: 0.5rem; font-size: 1rem; white-space: nowrap; }
.status-data-user-skin-title { color: rgb(77, 152, 216); }
.status-data-user-skin-type { color: white; font-weight: 700; font-style: italic; padding: 0.5rem; background: rgb(77, 153, 217); border-radius: 0.5rem; text-transform: capitalize; box-sizing: border-box; width: 100%; flex: 1 1 0%; display: flex; justify-content: center; place-items: center; }
.view-three-d { position: absolute; inset: 0px; }
.button-three-d { position: absolute; padding: 0.5rem 1rem; background-color: rgb(107, 183, 196); border-radius: 2rem; font-size: 0.6rem; color: white; z-index: 8; border: 0px solid transparent; bottom: 8rem; right: 1rem; }
.popup-3d { position: absolute; inset: 0px; z-index: 6; display: none; background-color: rgba(0, 0, 0, 0.3); }
.image-popup-3d { margin: auto; width: 80%; max-width: 30rem; position: relative; display: block; border-radius: 1rem; aspect-ratio: 1 / 1; top: 4rem; }
.status-cta-container { position: relative; z-index: 3; inset: 0px; margin: 0px; pointer-events: none; }
.status-container.show-status .bottom-button-container button { pointer-events: initial; background-color: white; color: rgb(77, 153, 217); }
.status-container .status-box { z-index: 2; }
.status-container { overflow: auto; background: url("../design/images/analyzer/skin_analyzer/bg.png") 0% 0% / cover; bottom: initial; position: absolute; }
.status-container .status-box { display: block; position: relative; opacity: 1; left: 0px; bottom: 0px; right: 0px; padding: 0px 0px 1rem; border-radius: 0px; background-color: transparent; color: rgb(0, 0, 0); transition: 0.5s; margin: 0px; }
.item-product-recommendation-container { position: relative; display: flex; flex-flow: row; margin: 1rem; gap: 0.5rem; align-items: start; align-content: center; }
.item-product { position: relative; flex: 1 0 40%; max-width: 40%; display: flex; min-width: 40%; overflow: visible; flex-direction: column-reverse; }
.item-product img { width: 100%; height: 100%; object-fit: contain; position: absolute; top: 0%; left: 50%; transform: translate(-50%, 0px); z-index: 2; }
.item-product a { position: relative; z-index: 9; min-width: 80%; background: linear-gradient(140.37deg, rgb(42, 110, 168) 26.43%, rgb(77, 152, 216) 58.59%); aspect-ratio: 1 / 1; display: block; border-radius: 4px; overflow: visible; }
.item-product p { margin-top: 0rem; padding: 1rem 1rem 0px; text-align: center; color: rgb(77, 152, 216); border-radius: 1rem; border: 1px solid rgb(255, 255, 255); font-size: 12px; word-break: break-word; z-index: 10; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: visible; height: 8rem; margin-bottom: 0px; box-sizing: border-box; }
.item--template { display: none; }
.start-menu { background: url("../design/images/analyzer/skin_analyzer/bg.png") 0% 0% / cover; }
.wardah-loader { width: 140px; height: 20px; mask-image: url("../design/images/logo-wardah.webp"); mask-repeat: no-repeat; mask-position: 50% center; mask-size: auto 20px; margin: auto; background-color: rgb(77, 153, 217); }
.status-bar { height: 0.5rem; max-height: 12px; border-radius: 1rem; background-color: transparent; }
.container.container--scrollable { overflow: auto; }
.container { max-width: 640px; }
.loader, .start-menu { max-width: 640px; left: 50%; transform: translate(-50%, 0px); }
.bottom-button-container, .questionnaire-menu { max-width: 640px; box-sizing: border-box; left: 50%; transform: translate(-50%, 0px); width: 100%; }
#skinType.questionnaire-block label { max-width: initial; }
#skinConcern.questionnaire-block label { max-width: 45%; }
.colour-bar { width: 100%; height: 0.5rem; background: linear-gradient(90deg, rgb(78, 41, 32) 0%, rgb(78, 41, 32) 16.6%, rgb(146, 86, 58) 16.6%, rgb(146, 86, 58) 33.33%, rgb(192, 117, 69) 33.33%, rgb(192, 117, 69) 50%, rgb(206, 147, 90) 50%, rgb(206, 147, 90) 66.66%, rgb(222, 173, 109) 66.66%, rgb(222, 173, 109) 83.33%, rgb(246, 207, 183) 83.33%, rgb(246, 207, 183) 100%); border-radius: 1rem; border: 1px solid rgb(107, 183, 196); }
.colour-bar::before { position: absolute; content: ""; background: linear-gradient(90deg, rgb(107, 183, 196) 1px, transparent 1px) -1px center / calc(16.6% + 0.2px); width: 100%; z-index: 2; margin: 0px; height: 0.5rem; }
.colour-names { display: flex; flex-flow: row; padding: 1rem 0px 0px; margin: 0px; }
.colour-names li { flex: 1 1 20%; max-width: 20%; text-align: center; list-style: none; font-size: 0.5rem; padding: 0.25rem 0px; }
.colour-selector { width: calc(6% + 2px); padding-bottom: 6%; border-radius: 50%; position: relative; box-sizing: border-box; top: 50%; border: 1px solid rgb(107, 183, 196); transform: translate(0px, -50%); }
@media (min-width: 600px) {
  html, body { font-size: 24px; }
}
@media (max-width: 480px) {
  .start-menu #questionnaireButton { margin-bottom: 0px; }
}
.params-border-wrapper { position: relative; width: 100%; border: 2px solid rgb(77, 152, 216); border-radius: 5px; box-sizing: border-box; overflow: hidden; padding: 10px; }
.params-container { width: 100%; padding-bottom: 50%; position: relative; overflow: visible; margin-top: -1rem; }
.params-outer-fill { width: 80%; height: 160%; position: absolute; left: 50%; top: 20%; background: conic-gradient(from -90deg, rgb(107, 183, 196) 0deg, rgb(107, 183, 196) 45deg, rgb(163, 233, 132) 45deg, rgb(163, 233, 132) 90deg, rgb(255, 255, 50) 90deg, rgb(255, 255, 50) 135deg, rgb(196, 107, 108) 135deg, rgb(196, 107, 108) 180deg, transparent 180deg); border-radius: 50%; transform: translate(-50%, 0px); z-index: 1; }
.params-inner-fill { width: 60%; height: 120%; position: absolute; left: 50%; border-radius: 50%; background-color: white; z-index: 2; top: 40%; transform: translate(-50%, 0px) rotate(-72deg); }
.params-inner-fill p { text-align: center; bottom: 50%; margin: 0px; font-size: 3rem; position: absolute; transform: translate(0px, calc(50% - 3rem)); width: 100%; line-height: 3rem; z-index: 2; }
.params-arrow { width: 30%; height: 50%; background: url("../design/images/analyzer/raindrop.png") 0% 0% / 100% 200% no-repeat; position: absolute; top: 20%; left: 50%; transform: translate(-50%, -50%); transform-origin: 50% 100%; }
.params-arrow::before, .params-arrow::after { position: absolute; height: 100%; width: 2rem; content: ""; transform-origin: 50% 100%; transform: rotate(90deg); display: none; }
.params-arrow::before { position: absolute; height: 100%; width: 1rem; content: ""; transform-origin: 50% 100%; transform: translate(-50%) rotate(-90deg); background-color: white; bottom: 1rem; border: 1px solid rgb(77, 153, 217); left: 50%; border-radius: 100% 100% 0px 0px; }
.params-arrow::after { width: calc(1px + 1rem); height: calc(1px + 1rem); transform-origin: 50% 50%; left: 50%; transform: translate(-50%) rotate(-135deg); border-width: 0px 0px 1px 1px; border-bottom-style: solid; border-bottom-color: rgb(77, 153, 217); border-left-style: solid; border-left-color: rgb(77, 153, 217); border-radius: 50%; border-top-style: initial; border-top-color: initial; border-right-style: initial; border-right-color: initial; bottom: calc(-1px + 0.5rem); }
#question_extra { width: 100%; height: 100%; background: url("../design/images/analyzer/skin_analyzer/bg.png") center bottom / 200%; z-index: 3; padding: 2rem 2rem 0px; }
#question_extra .questionnaire-block { flex-wrap: initial; flex-direction: column; height: initial; }
.questionnaire-item-extra { padding-bottom: 7rem; }
#question_extra .bottom-button-container { display: flex; flex-direction: column; }
#question_extra .bottom-button { flex: 1 1 0%; margin: 2%; padding: 1rem 0px; width: auto; }
#question_extra .questionnaire-block label { flex-basis: 100%; align-content: center; text-align: left; background-color: white; border-radius: 0.5rem; font-size: 0.6rem; padding: 1rem; }
.questionnaire-block label p { position: relative; z-index: 2; margin: 0px; }
#genderSelect input:checked + label { color: white; }
#genderSelect p { position: relative; z-index: 3; }
#questionExtraBack, #questionBackButton { background-color: transparent; border: 1px solid white; color: white; }
.questionnaire-skin-photo { width: 10rem; height: 10rem; overflow: hidden; margin: 1.25rem auto 0px; border-radius: 1rem; padding-bottom: 0.8rem; background-color: rgb(38, 136, 145); }
.questionnaire-skin-photo img { width: 100%; min-width: 100%; height: 100%; border-radius: 0px 0px 1rem 1rem; object-fit: cover; }
.questionnaire-skin-type, .questionnaire-skin-desc { font-size: 1.5rem; color: rgb(77, 153, 217); padding: 2rem 0.5rem 0px; text-align: center; }
.questionnaire-skin-desc { margin: 1rem -2rem; padding: 0.6rem 1rem; background: url("../design/images/analyzer/skin_analyzer/ribbon.png") 0% 0% / 100% no-repeat; color: white; font-size: 0.65rem; border-top: 1px solid white; border-bottom: 1px solid white; }
#extra_6 .questionnaire-block { display: block; }
.weather-input { position: relative; z-index: 2; display: flex; }
.city-autocompleter { position: absolute; right: 0px; left: 0px; top: 4rem; padding: 0.5rem; border-radius: 0px 0px 0.5rem 0.5rem; opacity: 0; pointer-events: none; transition: opacity 0.2s; background: white; box-shadow: rgba(77, 153, 217, 0.44) 0px 10px 10px; z-index: 9; box-sizing: border-box; }
#cities_select + .city-autocompleter { position: fixed; max-width: 80%; width: 100%; left: 50%; transform: translateX(-50%); }
.city-autocompleter-item { position: relative; display: block; width: 100%; padding: 0.25rem; text-align: center; border: 1px solid rgb(77, 153, 217); background: transparent; margin: 0.5rem 0px; border-radius: 0.5rem; line-height: 1.5rem; color: rgb(77, 153, 217); text-transform: capitalize; }
.city-autocompleter.fade { opacity: 1; pointer-events: initial; }
.city-autocompleter-item.hidden { display: none; }
.start-menu { transition: all; }
.start-menu.fade { transition: 0.5s; opacity: 0; }
.start-menu-guide-selfie { display: flex; flex-flow: wrap; justify-content: center; align-items: center; border-radius: initial; width: 80%; height: auto; gap: 1rem 0.5rem; margin: 2rem auto; max-width: 320px; }
.start-menu-guide-selfie .guide-item { width: 100%; height: 100%; max-height: 8rem; flex-basis: calc(50% - 0.5rem); aspect-ratio: 1 / 1; position: relative; overflow: hidden; padding: 0.5rem 0.5rem 2rem; border-radius: 0px; box-sizing: border-box; }
.guide-item p { position: relative; left: 0px; right: 0px; color: rgb(77, 153, 217); font-size: 0.6rem; text-align: center; margin: 0px; }
.start-menu-guide-selfie img { position: relative; object-fit: contain; width: 100%; height: 100%; display: block; margin-bottom: 0.5rem; }
.start-menu-title, .start-menu-option { color: rgb(77, 153, 217); }
.start-menu-title img { max-height: 6rem; }
.start-menu-option { display: block; font-weight: 500; line-height: 1.2rem; padding: 0px 0px 1rem 3rem; }
.start-menu-option a { color: rgb(77, 153, 217); border-bottom: 1px solid rgb(77, 153, 217); }
#privacy_agree_chk { display: none; }
#privacy_agree_chk + label::before, #privacy_agree_chk + label::after { position: absolute; width: 16px; height: 16px; content: ""; background-color: white; border-radius: 4px; left: 0.2rem; top: 0.2rem; transition: 0.2s; box-shadow: rgba(77, 153, 217, 0.44) 0px 4px 4px inset; }
.start-menu-option { max-width: 320px; margin: auto; }
#privacy_agree_chk + label::after { opacity: 0; border-bottom: 3px solid rgb(52, 113, 113); border-left: 3px solid rgb(52, 113, 113); border-image: initial; height: 8px; border-top: none; border-right: none; border-radius: 0px; box-shadow: none; background: none; transform: rotate(-45deg); box-sizing: border-box; top: 0.2rem; left: 0.2rem; }
#privacy_agree_chk:checked + label::after { opacity: 1; }
.loader { background: url("../design/images/analyzer/skin_analyzer/bg.png") center bottom / cover; }
.guidance-text { position: fixed; left: 50%; transform: translate(-50%, 0px); bottom: 9rem; font-size: 1.05rem; font-weight: 700; width: 100vw; text-align: center; }
.result-logo-container { height: 3rem; margin-bottom: 1rem; align-items: center; align-content: center; position: relative; padding: 2rem 2rem 0px; }
.result-logo-title img { max-height: 3.5rem; }
.result-logo-wardah { height: 20px; overflow: hidden; background-color: rgb(77, 152, 216); mask-image: url("../design/images/logo-wardah.webp"); mask-repeat: no-repeat; mask-size: 100%; mask-position: 50% 50%; position: absolute; right: 2rem; width: 100px; top: 50%; transform: translate(0px, 0%); margin: 0px !important; }
.status-filled-facial { position: relative; margin: 1rem; border-radius: 0.5rem; box-sizing: border-box; }
.status-filled-comparer { position: absolute; top: 0px; right: 0px; bottom: 0px; width: 100%; height: 100%; overflow: hidden; }
.comparer-img { inset: 0px 50% 0px 0px; overflow: hidden; position: absolute; }
.comparer-img img { height: 100%; width: auto !important; }
.status-filled-facial img { width: 100%; border-radius: 0.5rem; box-sizing: border-box; }
.status-filled-box { border-radius: 1rem; margin: 1rem; overflow: hidden; }
.status-filled-box-title { padding: 1rem; text-align: center; text-transform: capitalize; color: rgb(77, 152, 216); font-weight: 600; font-size: 1.5rem; }
.status-filled-box-content { padding: 1rem; box-sizing: border-box; background-color: white; color: rgb(77, 152, 216); overflow-x: auto; }
.status-bar-slider { z-index: 9; position: absolute; left: 0%; right: 0%; bottom: 3rem; }
.status-viewer { position: fixed; inset: 0px; z-index: 4; }
.status-viewer-bg { background-color: rgba(0, 0, 0, 0.3); position: absolute; inset: 0px; }
.status-viewer-container { position: absolute; max-width: 80vw; max-height: 60vh; height: 100%; width: 100%; top: 50%; left: 50%; padding: 0px; margin: -3rem 0px 0px; transform: translate(-50%, -50%); white-space: nowrap; }
.status-viewer-item { position: relative; display: inline-block; width: 100%; height: 100%; }
.status-viewer-item img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; }
.status-viewer-back img { width: 100%; height: 100%; object-fit: contain; }
.status-viewer-back { position: absolute; top: -3rem; right: 0px; width: 2rem; height: 2rem; border-radius: 50%; border-width: 0px; appearance: none; box-sizing: border-box; padding: 0px; background: none; }
.status-viewer-nav { position: absolute; bottom: 1rem; left: 1rem; height: 2.5rem; right: 1rem; text-align: center; }
.status-viewer-nav--prev, .status-viewer-nav--next { width: 2.5rem; height: 2.5rem; appearance: none; outline: none; border: none; padding: 0px; margin: 0px 0.25rem; background-color: transparent; }
.status-viewer-nav--prev img, .status-viewer-nav--next img { width: 100%; height: 100%; }
.status-viewer-nav--prev img { transform: rotate(180deg); }
.status-helper-container { position: absolute; left: 0px; right: 0px; bottom: 2rem; padding: 1rem; background: white; border-radius: 1rem; }
.status-helper { display: flex; padding-bottom: 3rem; }
.status-helper-1, .status-helper-2 { position: relative; flex: 1 1 0%; text-align: center; font-size: 0.7rem; }
.status-helper-color { position: absolute; width: 2rem; height: 2rem; left: 50%; margin-left: -0.75rem; top: 1rem; border-radius: 50%; }
.status-helper-guidance { font-size: 0.75rem; }
.profile-warning { display: none; color: rgba(255, 0, 0, 0.55); bottom: 1rem; font-size: 0.75rem; margin: auto; top: -24px; width: 100%; text-align: center; position: absolute; left: 50%; transform: translateX(-50%)}
.loading-failed-error { display: none; font-size: 0.6rem; font-weight: 700; color: rgba(255, 0, 0, 0.55); word-break: break-word; width: 80%; max-width: 440px; margin: auto; }
#qr-wrapper-video { width: 60%; aspect-ratio: 1 / 1; margin: 2rem auto; }
#qr-wrapper-video video { transform: scaleX(-1); border-radius: 24px; width: 100% !important; }
.scan-guide { font-family: Transducer; font-size: 10px; font-weight: 500; margin-top: 1rem; }
@media (min-width: 768px) {
  .scan-guide { font-size: 15px; }
}
.scan-inline-button { color: rgb(77, 153, 217); cursor: pointer; }
#regist_menu { margin: 1rem auto; }
.user-popup-info-container { position: fixed; top: 0px; left: 0px; right: 0px; z-index: 1002; pointer-events: none; }
.user-popup-info { position: absolute; padding: 1rem; width: 72%; max-width: 320px; background-color: rgb(77, 153, 217); border: 1px solid rgb(255, 255, 255); border-radius: 8px; left: 50%; transform: translateX(-50%); margin-top: -80px; transition: 0.5s; }
.user-popup-info.user-popup-info--show { margin-top: 0px; }
.user-popup-info--iserror { background-color: rgb(252, 51, 51); }
.user-popup-info p { margin: 0px; text-align: center; font-family: Montserrat; font-weight: 700; font-size: 12px; }
.copy { position: fixed; bottom: 28px; width: 100%; font-size: 10px; color: rgb(77, 153, 217); text-align: center; pointer-events: none; }
@media (max-height: 880px) and (min-width: 640px) {
  html, body { font-size: 16px; overflow-y: scroll; }
  .questionnaire-menu, .loader, .start-menu { position: absolute; min-height: 600px; }
  .start-menu { min-height: 600px; }
}
.status-skin-overview::after { content: ""; position: absolute; bottom: 0px; width: 100%; left: 0px; right: 0px; height: 1px; background: linear-gradient(to right, rgb(255, 255, 255), rgb(77, 152, 216), rgb(255, 255, 255)); }
.status-skin-overview { position: relative; }
.status-filled-box::after { content: ""; position: absolute; bottom: 0px; width: 100%; left: 0px; right: 0px; height: 1px; background: linear-gradient(to right, rgb(255, 255, 255), rgb(77, 152, 216), rgb(255, 255, 255)); }
.status-filled-box { position: relative; }
.status-breakdown { display: flex; margin: 1rem; max-width: 100%; gap: 0.25rem; }
.status-breakdown-item { flex-grow: 1; flex-basis: 20%; padding: 1rem 0px; border-radius: 20px; background-color: rgb(77, 153, 217); width: calc(20% - 0.25rem); }
.status-breakdown-item p { color: white; font-size: 0.6rem; margin-bottom: 0px; text-align: center; overflow: hidden; text-overflow: ellipsis; }
.status-breakdown-item img { max-width: 100%; border-radius: 16px; }
.status-split-box { display: flex; gap: 1rem; }
.status-filled-box-splitter { flex: 1 0 0%; border-radius: 1rem; overflow: hidden; display: flex; flex-direction: column; }
.status-filled-box-splitter .status-filled-box-title { font-size: 0.75rem; }
.status-filled-box-splitter ul { margin: 0px; }
.status-filled-box-splitter li { font-size: 0.75rem; }
.status-filled-box-splitter .status-filled-box-content { flex: 1 1 0%; padding-left: 0.2rem; }
.params-overview { font-size: 0.8rem; font-family: Norms; margin-top: 1.5rem; margin-bottom: 0px; position: relative; z-index: 9; }
.start-menu-guide-wardah { background-color: rgb(77, 153, 217); width: 240px; height: 80px; max-width: 8rem; margin-bottom: initial; max-height: 4rem; mask-size: contain; }
.start-menu-title img, .start-menu-subtitle img { width: 70%; max-width: 400px; }
.start-menu-subtitle img { width: 80%; max-width: 480px; }
.start-menu-subtitle--top { margin-bottom: 1rem; }
.start-menu-subtitle--bottom { font-family: Montserrat; font-weight: 500; font-size: 0.6rem; background: none; color: rgb(77, 153, 217); }
.start-menu { background: url("../design/images/analyzer/skin_analyzer/Wardah Skinverse - NEW BG.png") 0% 0% / cover; }
.loader, .start-menu, .questionnaire-menu { max-width: 820px; }
.start-menu-content { position: absolute; height: auto; width: 100%; }
#question_extra .bottom-button, .bottom-button { height: initial; background-color: rgb(77, 153, 217); color: rgb(255, 255, 255); border-radius: 0.75rem; width: auto; margin: 0.5rem auto 0px; padding: 0.75rem 1rem; }
#save_result_btn { color: rgb(77, 152, 216); border: 1px solid rgb(77, 152, 216); background-color: rgb(255, 255, 255); position: relative; }
#save_result_btn.done::before { content: ""; width: 16px; height: 16px; background-image: url("../design/images/analyzer/check_save.png"); position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); background-size: 16px; }
.qrcode { display: none; width: 50%; max-width: 240px; margin: auto; border-width: 0px 1px 1px; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-right-color: rgb(77, 152, 216); border-bottom-color: rgb(77, 152, 216); border-left-color: rgb(77, 152, 216); border-image: initial; border-radius: 0.5rem; border-top-style: initial; border-top-color: initial; }
#qr_image img, #qr_image canvas { width: 140px; height: 140px; margin: auto; }
#qr_image { position: relative; margin: auto; padding: 20px; }
.start-menu #questionnaireButton { margin-bottom: 4rem; }
.wardah-orb { position: absolute; top: 4rem; width: 100%; min-width: 300px; max-width: 58%; max-height:400px;min-height:300px; object-fit: contain; left: 50%; transform: translateX(-50%); }
.face_questionnaire .start-menu-content { position: absolute; bottom: 0px; }
.bottom-button, #question_extra .bottom-button { margin: 0.5rem auto 0px; display: block; font-family: Transducer; font-weight: 500; font-size: 0.6rem; width: 50%; max-width: 240px; text-transform: uppercase; padding: 15px; border-radius: 15px; }
#questionExtraBack, #questionBackButton { color: rgb(77, 153, 217); border-color: rgb(77, 153, 217); padding: 15px; border-radius: 15px; }
#skinType.questionnaire-block label small, #skinConcern.questionnaire-block label small { font-family: Montserrat; font-weight: 600; font-size: 0.5rem; position: absolute; right: 1rem; bottom: 1rem; }
#skinType.questionnaire-block label p, #skinConcern.questionnaire-block label p { position: absolute; font-family: Transducer; font-size: 0.8rem; left: 1rem; right: 1rem; bottom: 3rem; }
.questionnaire-block label { padding: 12px; }
#skinConcern.questionnaire-block label p { font-size: 0.5rem; bottom: 1rem; }
.bottom-button:disabled, #questionExtraNext:disabled { background-color: rgb(166, 166, 166); padding: 15px; border-radius: 15px; }
.questionnaire-query, #question_extra .questionnaire-query { font-family: Transducer; font-weight: 500; color: rgb(255, 255, 255); font-style: initial; font-size: 1rem; }
.questionnaire-menu, #question_extra, .loader { background: url("../design/images/analyzer/skin_analyzer/Wardah Skinverse - NEW BG.png") center top / auto 150% no-repeat rgb(255, 255, 255); }
.questionnaire-sub-query { font-family: Montserrat; color: rgb(255, 255, 255); }
.questionnaire-block#genderSelect label { border-radius: 0.5rem; font-family: Montserrat; font-weight: 600; }
#question_extra #questionExtraBack { background-color: transparent; color: rgb(77, 152, 216); }
.questionnaire-skin-photo { height: 14rem; padding: 0.75rem; background-color: rgba(255, 255, 255, 0.565); border: 1px solid rgba(194, 194, 194, 0.59); }
.questionnaire-skin-photo img { width: 100%; height: initial; min-width: 100%; border-radius: 0px 0px 1rem 1rem; object-fit: cover; aspect-ratio: 1 / 1; }
.questionnaire-block label p { font-family: Montserrat; }
.questionnaire-skin-type { font-family: Transducer; font-weight: 600; text-transform: uppercase; color: rgb(34, 107, 105); font-size: 1rem; padding: 1.5rem; }
.questionnaire-skin-desc { background: none; color: rgb(34, 107, 105); font-family: Transducer; font-size: 0.6rem; font-weight: 500; }
#question_extra .questionnaire-skin-result .questionnaire-query { text-transform: uppercase; }
#ageSelect input[name="user_phone"] ~ div { background-color: transparent; padding-left: 16px; }
#ageSelect input[name="user_phone"] ~ div::after { position: absolute; top: 0px; bottom: 0px; right: 0px; border-right: 1px solid rgb(77, 153, 217); content: ""; }
#ageSelect input[name="user_phone"]:focus ~ div { color: rgb(77, 153, 217); }
#ageSelect input, #geoLocation input:active, #geoLocation input:focus, #ageSelect input:active, #ageSelect input:focus { background: rgb(255, 255, 255); color: rgb(77, 153, 217); outline: none; padding: 28px; border-radius: 25px; }
input[name="login_phone"] { flex: 1 1 0%; border: 0px solid rgba(0, 0, 0, 0.333); border-radius: 0.5rem; text-align: center; padding: 0.5rem 2.5%; width: 100%; font-family: Norms; font-size: 0.8rem; background: rgb(255, 255, 255); color: rgb(77, 153, 217); outline: none; }
input[name="login_phone"] ~ div::after { position: absolute; top: 0px; bottom: 0px; right: 0px; border-right: 1px solid rgb(77, 153, 217); content: ""; }
.questionnaire-guide { color: rgb(255, 255, 255); text-align: center; font-size: 0.8rem; top: 2rem; position: relative; font-family: Montserrat; font-weight: 500; }
#face_analyzer { background-size: cover; background-position: center top; }
#face_analyzer .start-menu-title { font-family: Transducer; font-weight: 500; color: rgb(255, 255, 255); font-style: normal; padding: 1rem; font-size: 1rem; }
.guide-item p { font-family: Montserrat; color: rgb(255, 255, 255); font-weight: 500; }
.wardah-loader-text { font-family: Transducer; font-weight: 700; color: rgb(34, 107, 105); text-align: center; font-size: 1.5rem; font-style: initial; }
.loader { background-size: cover; }
.wardah-loader-content { margin-top: initial; }
.loading-spinner-wardah { margin: 2rem auto; }
.container { max-width: 820px; }
.guidance-text { font-size: 0.6rem; font-family: Transducer; font-weight: 500; color: rgb(255, 255, 255); }
.wardah-loader-content small { color: rgb(34, 107, 105); }
.status-container { background: rgb(255, 255, 255); }
.result-logo-title img { max-height: 2rem; }
.result-logo-wardah { height: 2.5rem; width: 7rem; right: 2rem; top: 56%; transform: translateY(-50%); }
.status-data-user-skin-details::before { height: 1px; }
.status-photo img { aspect-ratio: 3 / 4; max-height: 40vh; border-radius: 8px; margin-top: 5px; }
.result-logo-container { padding: 2rem 2rem 1rem; }
.result-logo-title { position: relative; }
.status-data-user-name { width: 70%; }
.status-data-user-detail, .status-data-user-complement { font-family: Transducer; font-weight: 500; color: rgb(77, 152, 216); }
.status-data-user--phone, .status-data-user--datetime { font-size: 0.6rem; overflow: hidden; text-overflow: ellipsis; }
.status-data-user-skin-type { background-color: rgb(77, 152, 216); }
.status-data-user-skin { border: 1px solid rgba(194, 194, 194, 0.59); }
.status-main-data { border: 1px solid rgb(77, 152, 216); }
.status-data-user-skin-title, .status-data-user-skin-type { font-family: Transducer; font-weight: 500; font-size: 0.75rem; }
.status-data-user-skin-type { word-break: break-word; white-space: break-spaces; font-weight: 700; font-style: initial; }
.status-main--age { position: relative; transform: initial; color: rgb(77, 152, 216); box-sizing: border-box; top: initial; left: initial; padding: 0.1rem 0.5rem; }
.status-main--age-container { font-family: Transducer; font-weight: 500; width: initial; height: initial; right: -0.5rem; border-radius: 0.75rem; background-color: rgb(255, 255, 255); border: 1px solid rgba(194, 194, 194, 0.59); padding: 0.2rem 1rem; }
.status-main--age p { font-size: 1.5rem; line-height: 1; }
.status-data-user-download--dropdown { appearance: none; background: none; display: block; font-family: Transducer; border: 1px solid rgba(204, 204, 204, 0.565); border-radius: 0.5rem; width: 100%; padding: 0.5rem; color: rgb(77, 152, 216); font-weight: 500; }
.status-data-user-download-diary { display: none; font-family: Transducer; width: 100%; padding: 0.75rem 0.25rem 0.5rem; color: rgb(77, 152, 216); font-weight: 500; text-align: center; font-size: 0.8rem; border-width: 0px 1px 1px; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-right-color: rgba(204, 204, 204, 0.565); border-bottom-color: rgba(204, 204, 204, 0.565); border-left-color: rgba(204, 204, 204, 0.565); border-image: initial; box-sizing: border-box; border-top-style: initial; border-top-color: initial; border-radius: 0px 0px 0.5rem 0.5rem; }
.status-data-user-download-diary a { color: rgb(77, 152, 216); display: block; width: 100%; appearance: none; padding: 0.25rem 0px; }
.status-data-user-download--list { position: relative; top: -0.3rem; margin-bottom: 0.5rem; }
.button--arrow { border-bottom: 12px solid rgb(77, 152, 216); display: inline-block; border-right: 12px solid transparent; border-left: 12px solid transparent; margin-left: 0.5rem; transform: rotate(180deg); transition: transform 0.5s; }
.button--arrow.toggled { transform: rotate(0deg); }
.status-box-title { background-color: transparent; font-size: 1.5rem; font-family: Transducer; font-weight: 700; }
.status-detail-text ~ p { font-family: Transducer; font-weight: 700; font-size: 0.6rem; color: rgb(77, 152, 216); }
.status-bar { height: 1.5rem; border: 1px solid rgb(77, 152, 216); max-height: initial; border-radius: 3px; }
.status-fill { border-radius: 0px 3px 3px 0px; }
.status-fill--Medium { background-color: rgb(77, 152, 216); }
.status-fill--None, .status-fill--Minimal { background-color: rgb(77, 152, 216); }
.status-fill--High { background-color: rgb(77, 152, 216); }
.status-box-par, .status-box-fit { text-align: center; font-family: Montserrat; font-weight: 600; }
.status-box::after { content: ""; position: absolute; bottom: 0px; left: 0px; right: 0px; height: 1px; background: linear-gradient(to right, rgb(255, 255, 255), rgb(77, 152, 216), rgb(255, 255, 255)); }
.status-box:nth-last-child(1)::after { display: none; }
.status-fill { font-family: Transducer; font-weight: 500; min-width: 1%; }
.status-fill p { width: 100%; margin: 0px; color: rgb(255, 255, 255); padding-right: 0.2rem; box-sizing: border-box; line-height: 1rem; font-size: 0.6rem; text-align: right; min-width: 2rem; padding-top: 3px; }
.status-tab-item, .status-subtab-item { font-family: Transducer; font-size: 0.75rem; border-radius: 0.5rem; font-weight: 500; }
.status-tab-item.status-tab-item--active, .status-subtab-item.status-subtab-item--active { background-color: rgb(77, 152, 216); color: white; }
.status-subtab-item { border: 1px solid rgba(194, 194, 194, 0.59); }
.status-container.show-status button { pointer-events: initial; border: 1px solid rgba(194, 194, 194, 0.59); flex: 1 0 33%; font-family: Transducer; font-size: 0.6rem; border-radius: 0.5rem; font-weight: 500; }
.status-breakdown-item { flex: 0 0 auto; padding: 0px 0px 0.5rem; background-color: rgb(77, 152, 216); width: 32%; border: 1px solid rgba(194, 194, 194, 0.59); }
.status-breakdown { flex-wrap: wrap; justify-content: center; width: initial; }
.status-breakdown-item p { font-family: Transducer; font-weight: 500; padding: 0px 0.5rem; }
.status-subtab-items { gap: 0.5rem; padding: 0px 1rem; }
.colour-bar { height: 1rem; border: 0px; }
.colour-selector { width: calc(8% + 2px); padding-bottom: 8%; border: 1px solid rgb(77, 153, 217); }
.colour-bar::before { background: none; }
.colour-names li { color: rgb(0, 0, 0); font-family: Montserrat; font-weight: 600; }
.status-subtab-item--active::before, .status-subtab-item--active::after, .status-box-title::before, .status-box-title::after { display: none; }
.status-data-user--phone, .status-data-user--datetime { line-height: 1rem; }
.status-data-user--datetime { padding-right: 0px; }
.status-subtab-item--active::after, .status-box-title::after { display: none; }
.status-box-title { color: rgb(77, 152, 216); }
.start-menu-option { margin: auto; max-width: 440px; padding: 0px; text-align: center; flex: 1 0 100%; font-family: Montserrat; font-weight: 600; font-size: 14px; line-height: 1rem; }
.start-menu-options { max-width: 440px; display: flex; flex-wrap: wrap; margin: auto; padding-top: 75px; }
#email_agree_chk, #whatsapp_agree_chk, #email_agree_chk2 { display: none; }
#whatsapp_agree_chk + label, #email_agree_chk + label, #email_agree_chk2 + label { line-height: 12px; position: relative; display: inline-block; flex: 0; padding-left: 1.2rem; text-align: left; font-size: 12px; }
#face_analyzer .consent{margin-top: 42px; gap: 24px; place-content: center;}
#face_analyzer .bottom-button-container {padding-top: 0;}
#whatsapp_agree_chk + label::before, #email_agree_chk + label::before, #email_agree_chk2 + label::before { position: absolute; width: 16px; height: 16px; left: 0px; content: ""; background-color: white; border-radius: 4px; transition: 0.2s; box-shadow: rgba(77, 153, 217, 0.44) 0px 4px 4px inset; display: inline-block; top: 50%; transform: translateY(-50%); }
#whatsapp_agree_chk + label::after, #email_agree_chk + label::after, #email_agree_chk2 + label::after { content: ""; opacity: 0; border-bottom: 3px solid rgb(77, 153, 217); border-left: 3px solid rgb(77, 153, 217); border-image: initial; height: 8px; width: 18px; border-top: none; border-right: none; border-radius: 0px; box-shadow: none; background: none; transform: rotate(-45deg); box-sizing: border-box; bottom: 5px; left: 0px; position: absolute; }
#whatsapp_agree_chk:checked + label::after, #email_agree_chk:checked + label::after, #email_agree_chk2:checked + label::after { opacity: 1; }
#content { margin: auto; }
.consent { position: relative; width: 100%; max-width: 250px; display: flex; flex-wrap: wrap; margin: auto; color: rgb(77, 153, 217); font-family: Montserrat; font-weight: 500; font-size: 11px; line-height: 3rem; text-align: center; }
.consent p { position: relative; top: 0px; flex: 1 0 100%; font-size: 12px; font-weight: 500; margin-top: 30px; }
#regist_menu .consent { max-width: 320px; width: 100%; padding-left: 40px; margin-top: 24px;}
#regist_menu .consent a { color: rgb(77, 153, 217); font-weight: 600; text-decoration: underline;}
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="name"], .weather-data-item, .weather-data-item-key, select, option { font-weight: 500; outline: none; padding: 14px 0px; border-radius: 24px; font-family: Montserrat !important; font-size: 16px !important; }
.city-autocompleter { position: absolute; top: 100%; right: 0px; left: 0px; bottom: initial; padding: 0.5rem; border-radius: 0.5rem 0.5rem 0.5rem 0.5rem; opacity: 0; pointer-events: none; transition: opacity 0.2s; background: white; box-shadow: rgba(77, 153, 217, 0.44) 0px 10px 10px; z-index: 9; box-sizing: border-box; }
.weather-data-item-key { padding: 0px; }
.weather-data-item { padding: 12px; flex-basis: initial; }
.questionnaire-block#ageSelect, #geoLocation { max-width: 360px; margin: auto; width: 100%; }
.status-container.show-status .bottom-button-container button.status-cta { background-color: rgb(77, 152, 216); color: rgb(255, 255, 255); }
#phoneLogin { position: relative; max-width: 80%; margin: 1rem auto; }
@media (max-height: 880px) and (min-width: 640px) {
  .wardah-orb { height: 100vh; max-height: 400px; width: auto; max-width: 400px; }
}
@media (max-height: 640px) {
  #question_3.questionnaire-item .questionnaire-query, #question_4.questionnaire-item .questionnaire-query { top: 1rem; }
}
@media (min-width: 640px) {
  #skinType.questionnaire-block label p, #skinConcern.questionnaire-block label p { font-size: 0.8rem; }
  #skinType.questionnaire-block label small, #skinConcern.questionnaire-block label small { font-size: 0.5rem; }
  input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="name"], .weather-data-item, .weather-data-item-key { font-size: 16px !important; }
}
@media (max-width: 480px) {
  .bottom-button, .qrcode { width: 60%; max-width: 300px; }
}
.owl-carousel, .owl-carousel .owl-item { -webkit-tap-highlight-color: transparent; position: relative; }
.owl-carousel { display: none; width: 100%; z-index: 1; }
.owl-carousel .owl-stage { position: relative; touch-action: manipulation; }
.owl-carousel .owl-stage::after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0px; }
.owl-carousel .owl-stage-outer { position: relative; overflow: hidden; transform: translate3d(0px, 0px, 0px); }
.owl-carousel .owl-item, .owl-carousel .owl-wrapper { backface-visibility: hidden; transform: translate3d(0px, 0px, 0px); }
.owl-carousel .owl-item { min-height: 1px; float: left; backface-visibility: hidden; }
.owl-carousel .owl-item img { display: block; width: 100%; }
.owl-carousel .owl-dots.disabled, .owl-carousel .owl-nav.disabled { display: none; }
.no-js .owl-carousel, .owl-carousel.owl-loaded { display: block; }
.owl-carousel .owl-dot, .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-nav .owl-prev { cursor: pointer; user-select: none; }
.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot { background: 0px 0px; color: inherit; border: none; font: inherit; padding: 0px !important; }
.owl-carousel.owl-loading { opacity: 0; display: block; }
.owl-carousel.owl-hidden { opacity: 0; }
.owl-carousel.owl-refresh .owl-item { visibility: hidden; }
.owl-carousel.owl-drag .owl-item { touch-action: pan-y; user-select: none; }
.owl-carousel.owl-grab { cursor: grab; }
.owl-carousel.owl-rtl { direction: rtl; }
.owl-carousel.owl-rtl .owl-item { float: right; }
.owl-carousel .animated { animation-duration: 1s; animation-fill-mode: both; }
.owl-carousel .owl-animated-in { z-index: 0; }
.owl-carousel .owl-animated-out { z-index: 1; }
.owl-carousel .fadeOut { animation-name: fadeOut; }
@keyframes fadeOut { 
  0% { opacity: 1; }
  100% { opacity: 0; }
}
.owl-height { transition: height 0.5s ease-in-out; }
.owl-carousel .owl-item .owl-lazy { opacity: 0; transition: opacity 0.4s; }
.owl-carousel .owl-item .owl-lazy:not([src]), .owl-carousel .owl-item .owl-lazy[src^=""] { max-height: 0px; }
.owl-carousel .owl-item img.owl-lazy { transform-style: preserve-3d; }
.owl-carousel .owl-video-wrapper { position: relative; height: 100%; background: rgb(0, 0, 0); }
.owl-carousel .owl-video-play-icon { position: absolute; height: 80px; width: 80px; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; background: url("owl.video.play.png") no-repeat; cursor: pointer; z-index: 1; backface-visibility: hidden; transition: transform 0.1s; }
.owl-carousel .owl-video-play-icon:hover { transform: scale(1.3, 1.3); }
.owl-carousel .owl-video-playing .owl-video-play-icon, .owl-carousel .owl-video-playing .owl-video-tn { display: none; }
.owl-carousel .owl-video-tn { opacity: 0; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: contain; transition: opacity 0.4s; }
.owl-carousel .owl-video-frame { position: relative; z-index: 1; height: 100%; width: 100%; }
.skin-options { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.skin-options input[type="checkbox"], .skin-options input[type="radio"] { display: none; }
.skin-options label { display: flex; width: 90%; max-width: 500px; min-height: 15px; background-color: rgb(249, 249, 249); border: 1px solid rgb(77, 152, 216); border-radius: 13px; padding: 15px; text-align: center; cursor: pointer; transition: 0.2s; font-size: 14px; color: rgb(77, 153, 217); font-weight: 400; align-items: center; justify-content: center; }
.skin-options label p { font-size: 10px; margin: 0px; font-weight: 500; }
@media (min-width: 768px) {
  .skin-options label p { font-size: 13px; }
}
.skin-options label:hover { background-color: rgb(230, 240, 255); border-color: rgb(77, 152, 216); }
.skin-options input[type="checkbox"]:checked + label, .skin-options input[type="radio"]:checked + label { background-color: rgb(77, 153, 217); color: rgb(255, 255, 255); border-color: rgb(77, 153, 217); }
.questionnaire-query { font-size: 14px; text-align: center; margin: 0px 0px 10px; line-height: 1.4; }
.questionnaire-item > label { display: block; text-align: center; margin: 0px 0px 15px; }
.questionnaire-item > label p { margin: 0px; font-size: 14px; line-height: 1.3; }
.skin-options label small { display: block; font-size: 11px; margin-top: 3px; font-weight: 400; color: rgb(51, 51, 51); }
.questionnaire-query { font-size: 28px; text-align: center; }
.questionnaire-query + label { display: block; margin-top: 20px; text-align: center; font-size: 18px; font-weight: 500; }
#question_1 { max-height: 80vh; overflow-y: auto; }
#question_5 { max-height: 80vh; overflow-y: auto; }
.questionnaire-item > label > p { font-size: 12px; line-height: 1.5; font-weight: 400; }
@media (min-width: 768px) {
  .questionnaire-item > label > p { font-size: 16px; }
}
.questionnaire-query { font-size: 28px; text-align: center; line-height: 1.4; }
@media (max-width: 1024px) {
  .questionnaire-query { font-size: 24px; }
}
@media (max-width: 768px) {
  .questionnaire-query { font-size: 18px; }
}
.status-skin-character .status-detail-content { display: flex; align-items: center; gap: 10px; }
.status-skin-character .status-label-left, .status-skin-character .status-label-right { width: 120px; text-align: center; font-weight: 500; font-size: 14px; }
.status-skin-character .status-bar { height: 1.5rem; background: rgb(255, 255, 255); border-radius: 3px; overflow: hidden; }
.status-skin-character .status-fill { height: 100%; background: rgb(77, 152, 216); border-radius: 3px; }
@media screen and (max-width: 480px) {
  .status-skin-character .status-label-left, .status-skin-character .status-label-right { font-size: 12px; }
}
.skin-char-small { font-size: 100%; font-weight: 500; margin-bottom: -1.5rem; }
.skin-analysis-text { font-size: 100%; font-weight: 500; color: rgb(77, 152, 216); text-align: center; margin-bottom: 40px; }
.lifestyle-plan-table { width: 100%; border-collapse: collapse; color: rgb(77, 152, 216); }
.lifestyle-plan-table td { padding: 12px 0px; font-weight: 500; }
.lifestyle-plan-table td.label { border-top: 2px solid rgb(77, 152, 216); font-size: 14px; text-align: center; padding-top: 16px; padding-bottom: 8px; }
.lifestyle-plan-table td.value { font-size: 12px; text-align: center; padding-bottom: 16px; }
.mindar-ui-overlay { display: flex; align-items: center; justify-content: center; position: absolute; inset: 0px; background: transparent; z-index: 2; }
.mindar-ui-overlay.hidden { display: none; }
.mindar-ui-loading .loader { border-width: 16px; border-style: solid; border-color: white rgb(34, 34, 34) rgb(34, 34, 34); border-image: initial; opacity: 0.8; border-radius: 50%; width: 120px; height: 120px; animation: 2s linear 0s infinite normal none running spin; }
@keyframes spin { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.mindar-ui-compatibility .content { background: black; color: rgb(255, 255, 255); opacity: 0.8; text-align: center; margin: 20px; padding: 20px; min-height: 50vh; }
@media (min-aspect-ratio: 1 / 1) {
  .mindar-ui-scanning .scanning { width: 50vh; height: 50vh; }
}
@media (max-aspect-ratio: 1 / 1) {
  .mindar-ui-scanning .scanning { width: 80vw; height: 80vw; }
}
.mindar-ui-scanning .scanning .inner { position: relative; width: 100%; height: 100%; opacity: 0.8; background: linear-gradient(to right, white 10px, transparent 10px) 0px 0px / 40px 40px no-repeat, linear-gradient(to right, white 10px, transparent 10px) 0px 100%, linear-gradient(to left, white 10px, transparent 10px) 100% 0px, linear-gradient(to left, white 10px, transparent 10px) 100% 100%, linear-gradient(white 10px, transparent 10px) 0px 0px, linear-gradient(white 10px, transparent 10px) 100% 0px, linear-gradient(to top, white 10px, transparent 10px) 0px 100%, linear-gradient(to top, white 10px, transparent 10px) 100% 100%; }
.mindar-ui-scanning .scanning .inner .scanline { position: absolute; width: 100%; height: 10px; background: white; animation: 2s linear 0s infinite normal none running move; }
@keyframes move { 
  0%, 100% { top: 0%; }
  50% { top: calc(100% - 10px); }
}