* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

/* Loading */
.loading {
    position: fixed;
    top: 0;
    /* left: 0; */
    width: 100%;
    min-height: 100vh;
    max-width: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;

    background-image: url(./assets/image/loading_bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    z-index: 99;
    transition: 0.5s ease;
}

.loading img {
    animation: loading-anim 2s infinite;
    max-width: 300px;
    opacity: 1;
}

.loading2_text {
    /* display: none; */
    animation: loading-anim 2s infinite;
    opacity: 1;
}

@keyframes loading-anim {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.1;
    }

    100% {
        opacity: 1;
    }
}

/* Loading END */

.main_holder,
.main_holder_no_bg {
    width: 100%;
    min-height: 100vh;
    max-width: 600px;
    display: flex;
    justify-content: center;
    align-items: center;

    background-image: url(./assets/image/main_bg.webp);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
}

.main_holder_no_bg {
    background-image: url();
}

.main {
    width: 100%;
    max-width: 600px;
    height: 100%;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-text-size-adjust: 100%;
    /* prevent iOS text zoom */
    -webkit-overflow-scrolling: touch;
    /* smooth scrolling on iOS */
}

body {
    font-family: 'Noto Serif SC';
    color: #3E3E3E;
    line-height: 1.5;
    display: flex;
    justify-content: center;
}

.hide {
    opacity: 0;
}

/* English */
/* body.lang-en *:not(.poppins) {
    font-family: "bentham", serif;
} */

/* Chinese */
/* body.lang-zh *:not(.poppins) {
    font-family: "Noto Serif SC", serif;
} */

img {
    width: 100%;
    height: auto;
}

button {
    min-width: 137px;
    font-family: 'Noto Serif SC';
    border: none;
    background: transparent;
}

button strong {
    font-family: 'Noto Serif SC';
    font-weight: 800;
}

h1 {
    font-size: 8.15vw;
    font-weight: 400;
    margin-bottom: 5%;
    font-family: 'aataohuashan';
}

h2 {
    font-size: 4.7vw;
    font-weight: 400;
}

h3,
input,
.btn,
label,
li,
.proceed_btn {
    font-size: 4vw;
    font-weight: 400;
}

h4,
.subtitle,
.small_label,
.card-text {
    font-size: 3.5vw;
    font-weight: 400;
}

.small_label {
    font-size: 2.7vw;
    vertical-align: super;
}

h5 {
    font-size: 3vw;
    font-weight: 400;
}

.red {
    color: #8D0000;
}

.green {
    color: #047100;
}

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

.justify-center {
    display: flex;
    justify-content: center !important;
}

.column {
    flex-direction: column;
}

.disabled {
    pointer-events: none !important;
}

/* Sign Up/Sign In/Choose Language */
.forms-wrapper {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    background-image: url(./assets/image/form_bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.form_center_btn {
    display: flex;
    flex-direction: column;
    min-width: auto;
}

.forms-wrapper.login-bg {
    background-image: url();
}

.main-login {
    background-image: url(./assets/image/main_bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    display: flex;
}

.main-login_form {
    background-image: url(./assets/image/form_bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    display: flex;
}

.space-between {
    justify-content: space-between;
}

.mt5 {
    margin-top: 5%;
}

.mt10 {
    margin-top: 10%;
}

.mt15 {
    margin-top: 15%;
}

.form-card {
    width: 100%;
    padding: 1em 2em;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.form-card h1 {
    font-size: 17vw;
    text-align: center;
    margin-bottom: 1%;
}

.form-card img {
    max-width: 200px;
}

.pdpa-checkbox {
    margin: 20px 0;
}

.pdpa-checkbox label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1.5;
    color: #000;
}

.pdpa-checkbox input[type="checkbox"] {
    display: none;
}

.pdpa-checkbox .checkmark {
    width: 22px;
    height: 22px;
    border: 3px solid #707070;
    border-radius: 3px;
    flex-shrink: 0;
    position: relative;
    margin-top: 2px;
    background: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
    transition: .2s;
}

.pdpa-checkbox input:checked+.checkmark {
    background-image: url("./assets/image/puzzle_tick.webp");
    background-size: cover;
    border: transparent;
}

.pdpa-link {
    color: inherit;
    transition: color .2s ease;
    pointer-events: none;
}

/* When checked, change the link color */
.pdpa-checkbox input:checked~.checkbox-text .pdpa-link {
    color: #14B7FF;
    pointer-events: auto;
}

.pdpaPopup {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
}

.pdpaPopup a {
    color: inherit;
    text-decoration: none;
}

div.forms-wrapper .closePDPABtn {
    background-color: #3E3E3E;
    background-image: url();
}

/* Top Menu Icons */
.top_menu {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding-bottom: 2em;
}

.top_menu .logo {
    margin-top: 5%;
    position: relative;
    padding: 0em 2em;
}

/* .top_menu .logo img {
    max-width: 267px;
} */

.logo img,
.logo_about img {
    padding-top: 0.5em;
    max-width: 250px;
}

.logo_about img {
    padding-top: 0em;
}

.logo_about {
    display: flex;
    justify-content: center;
}

.code_holder img {
    max-width: none;
}

.icons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-top: 1.5em;
}

.icon {
    background-color: rgba(187, 202, 159, 1);
    padding: 0.5em 1em;
    border-radius: 2em 0em 0em 2em;
}

.icon img {
    width: 100%;
    max-width: 29px;
}

/* Top Menu Icons END */

/* Banner */
.banner_holder {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 2em;
    align-items: center;
}

.banner_main {
    width: 95%;
    display: flex;
    flex-direction: column;
}

.banner_main h2 {
    padding-bottom: 0.5em;
}

.banner {
    display: flex;
    justify-content: center;
}

/* Banner END */
.form-card_img {
    display: flex;
    justify-content: center;
    padding-bottom: 2em;
}

.subtitle_holder {
    margin: 3% 0;
}

.subtitle {
    text-align: center;
    margin: 2% 0;
}

label {
    display: block;
    margin-bottom: 1%;
    padding: 0em 1em;
}

input {
    width: 100%;
    padding: 0.7em 1em;
    margin-bottom: 5%;
    border: 2px solid #3E3E3E;
    background: transparent;
    border-radius: 2em;
}

input::placeholder,
input::value {
    color: #3D3D3D4D;
}

/* Age Custom Dropdown */
.custom-select {
    position: relative;
    width: 100%;
    color: #3E3E3E;
}

.custom-select .selected {
    padding: 12px 15px;
    border: 2px solid #3E3E3E;
    color: #000000;
    border-radius: 2em;
    background: transparent;
    cursor: pointer;
    user-select: none;
    position: relative;
}

/* dropdown arrow */
.custom-select .selected:after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #3E3E3E;
}

.custom-select .options {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #FFFEF2;
    backdrop-filter: blur(10px);
    border-radius: 1em;
    overflow: hidden;
    display: none;
    z-index: 999;
}

.custom-select .option {
    padding: 1em;
    cursor: pointer;
    transition: 0.2s;
}

iframe {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.poppins,
.poppins strong {
    font-family: 'poppins' !important;
    font-weight: 400;
}

.poppins strong {
    font-weight: 600;
}

.forms-wrapper .btn {
    /* width: 100%; */
    width: auto;
    margin-top: 5%;
    padding: 1em;
    color: #FBF9EE;
    border: none;
    background-image: url(./assets/image/submit_box.webp);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    background-color: transparent;
    cursor: pointer;
}

.btn,
.btn_green,
.btn_selected {
    /* width: 65%; */
    width: auto;
    margin-top: 5%;
    /* padding: 1em 0.5em; */
    padding: 1em 1.5em;
    color: #FBF9EE;
    border: none;
    background-color: #3E3E3E;
    cursor: pointer;
    border-radius: 2em;
    font-weight: 800;
    opacity: 1;
}

.btn.btn-disabled {
    opacity: 0.5;
}

.btn_green {
    background-color: #5D8F1E;
}

.btn_green:active {
    background-color: #E4DEBC;
}

.btn_selected {
    background-color: #E4DEBC;
}

.btn_bottom {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.line_holder {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10%;
    opacity: 0;
}

.line_holder1 {
    margin-bottom: 5%;
}

.line_holder .line {
    width: 95%;
    line-height: 0.5;
}

.line.w100 {
    width: 100%;
}

.choose_language {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.no-overlay,
.no-overlay2 {
    width: 100%;
    height: auto;
    /* top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.75); */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding-top: 2em;
}

.no-overlay2 {
    height: auto;
    padding-top: 0;
}

.gap_progress_bar {
    justify-content: space-around;
}

.no-overlay h1,
.no-overlay2 h1 {
    margin-bottom: 3%;
}

.no-overlay h2,
.no-overlay2 h2 {
    padding-bottom: 1em;
}

.no-overlay .bottom_stations_intro_text h2 {
    padding-top: 1em;
}

.instruction_text_holder {
    width: 90%;
}

.next_instruction_page {
    position: relative;
    width: 100%;
    padding-bottom: 1em;
    padding: 0em 1em 2em 1em;
}

.next_instruction_btn {
    /* width: 45%; */
    width: auto;
    float: right;
    display: flex;
    justify-content: flex-end;
}

.back_instruction_btn {
    /* width: 45%; */
    width: auto;
    float: left;
}

.start_instruction_btn {
    /* width: 45%; */
    width: auto;
    float: right;
    display: flex;
    justify-content: flex-end;

}

.start_instruction_btn2 {
    /* width: 45%; */
    width: auto;
    display: flex;
    justify-content: center;
}

/* stations instruction */
.stations_intro {
    position: relative;
    width: 90%;
    display: flex;
    align-items: center;
    padding-bottom: 1.5em;
}

.stations_individual {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.stations_individual img {
    max-width: 75px;
    /* filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.5)); */
}

.stations_individual.darken img,
.stations_individual img.darken {
    filter: brightness(0.5);
}

.stations_individual.selected img,
.stations_individual img.selected {
    filter: drop-shadow(0px 0px 25px #FFF8A3);
}

.no_shadow img {
    max-width: 165px;
    filter: none;
    padding: 0em 0.5em;
}

.stations_intro2 {
    width: 100%;
}

.the_story {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.the_story .stations_intro3 {
    width: 100%;
    background-image: url();
}

.the_story .envelope_content {
    width: 100%;
    position: relative;
}

.the_story img {
    width: 100%;
    position: relative;
}

.stations_intro3 {
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url(./assets/image/main_bg.webp);
    background-position: center;
    background-size: cover;
}

.intro_progress_bar img {
    max-width: none;
    padding: 0em 0em 1.5em 0em;
}

/* stations instruction END */

.overlay,
.overlay_envelope {
    width: 100%;
    /* height: 100vh; */
    height: 95%;
    position: absolute;
    top: 0;
    left: 0;
    /* background-color: rgba(0, 0, 0, 0.75); */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.envelope_q {
    max-width: 260px;
    padding-bottom: 1em;
}

.black {
    color: #000000 !important;
}

.small_main_bg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.overlay_envelope {
    height: 100vh;
    /* background-color: rgba(0, 0, 0, 0.75); */
}

.lang_holder,
.lang_holder_no_side_padding {
    position: relative;
    width: 90%;
    height: auto;
    padding: 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: url(./assets/image/main_bg.webp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.lang_holder.correct_popup {
    height: 95%;
    overflow-y: scroll;
    justify-content: flex-start !important;
}

.lang_holder.incorrect_popup {
    height: auto;
}

.lang_holder_no_side_padding {
    padding: 0em !important;
}

.side_padding {
    padding: 1em;
}

.question_answer_help {
    padding-bottom: 2em;
    align-items: flex-end;
}

.question_answer_help .icon {
    width: 15%;
    background-color: #BBCA9F;
}

.icon.answer {
    background-color: #BBCA9F;
}

.icon.answer.active {
    background-color: #B3B3B3;
}

.no_bg {
    background-image: none;
}

.lang_holder h2 {
    margin-bottom: 15%;
}

.envelope_answer h2 {
    margin-bottom: 10%;
    color: white;
}

.envelope_holder input,
.envelope_holder label {
    text-align: center;
}

.start_game h2,
.instruction_text h2 {
    margin-bottom: 10%;
}

.lang_holder div {
    width: 100%;
    max-width: none;
}

div.instruction_text {
    width: 100%;
    max-width: none;
    background-image: url(./assets/image/instruction_border.webp);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    padding: 1em;
    margin-top: 1%;
}

div.close_envelope {
    width: 100%;
    position: relative;
    padding-bottom: 0.5em;
    z-index: 10;
}

div.close_envelope img {
    max-width: 29px;
    float: right;
}

div.close_station {
    width: 100%;
    position: absolute;
    top: 2%;
    right: 3%;
    padding-bottom: 0.5em;
    z-index: 1;
}

div.close_station img {
    max-width: 29px;
    float: right;
}

.messages {
    margin-top: 6%;
    text-align: center;
}

.messages a {
    color: #3E3E3E !important;
}

.messages.forgot {
    margin-top: 2%;
    margin-bottom: 2%;
    text-align: center;
    padding: 0em 1em;
}

button a {
    color: #FEF6DF !important;
    text-decoration: none;
}

.login_here {
    margin: 3% 0;
}

.press_enter,
.text,
.incorrect_login,
.password-message {
    margin-top: 5%;
    display: none;
    color: red;
}

.password-message {
    margin-bottom: 3%;
    margin-top: 3%;
}

/* password eye */
.password-wrapper {
    position: relative;
}

.password-wrapper input {
    width: 100%;
    padding-right: 40px;
}

.toggle-password {
    min-width: auto;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-70%);
    background: none;
    border: none;
    cursor: pointer;
}

/* Base eye icon */
.eye-icon {
    width: 22px;
    height: 22px;
    transition: opacity 0.2s ease;
}

/* Closed (password hidden) */
.eye-closed {
    opacity: 0.35;
}

/* Open (password visible) */
.eye-open {
    opacity: 1;
}

/* Station */
.main-station,
.main-station-mission {
    position: relative;
    width: 100%;
    background-image: url(./assets/image/main_bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center right;
    display: flex;
    flex-direction: column;
}

.main-station-mission {
    position: relative;
    height: 100%;
    justify-content: space-between;
}

.main_station_right {
    position: absolute;
    width: 15%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: transparent;
    background-image: url();
}

.station_holder {
    padding-top: 1em;
    height: auto;
    justify-content: space-evenly;
}

.station_click {
    position: relative;
    height: 85%;
    width: 85%;
    justify-content: flex-start;
}

.first_envelope_answer2_holder {
    display: none;
}

.first_envelope_img,
.second_envelope_img,
.third_envelope_img,
.fourth_envelope_img,
.fifth_envelope_img,
.sixth_envelope_img {
    filter: drop-shadow(0px 0px 1em #B8AB8A);
    max-width: 245px;
}

.station1_envelope_holder,
.station2_envelope_holder,
.station3_envelope_holder,
.station4_envelope_holder,
.station5_envelope_holder,
.station6_envelope_holder {
    position: absolute;
    /* position: fixed; */
}

.envelope_content_holder {
    height: 90%;
    position: absolute;
    background-image: url();
    display: none;
}

.envelope_content {
    position: absolute;
    display: flex;
    align-items: center;
    flex-direction: column;
    height: 100%;
    width: 100%;
    /* background-image: url(./assets/image/envelope1_story_bg.webp); */
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 10;
    overflow-y: scroll;
}

.envelope_bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
}

.envelope_content .line_holder {
    opacity: 1;
    margin: 0;
    padding: 1.5em 0em;
}

.envelope_story_title img {
    max-width: 320px;
}

.envelope_story_title {
    display: flex;
    justify-content: center;
}

.envelope_content .close_envelope {
    position: absolute;
    right: 2%;
    top: 2%;
}

@keyframes envelopeBounceGlow {
    0% {
        transform: scale(1);
        filter: drop-shadow(0px 0px 0px #FFF8A3);
    }

    30% {
        transform: scale(1.12);
        filter: drop-shadow(0px 0px 25px #FFF8A3);
    }

    60% {
        transform: scale(0.95);
        filter: drop-shadow(0px 0px 15px #FFF8A3);
    }

    80% {
        transform: scale(1.05);
        filter: drop-shadow(0px 0px 20px #FFF8A3);
    }

    100% {
        transform: scale(1);
        filter: drop-shadow(0px 0px 0px #FFF8A3);
    }
}

@keyframes envelopeGlow {
    0% {
        filter: drop-shadow(0 0 5px #FFF8A3);
        transform: scale(1);
    }

    50% {
        filter: drop-shadow(0 0 25px #FFF8A3);
        transform: scale(1.03);
    }

    100% {
        filter: drop-shadow(0 0 5px #FFF8A3);
        transform: scale(1);
    }
}

.envelope_q {
    cursor: pointer;
}

.envelope_q.glow {
    animation: envelopeGlow 1.8s ease-in-out infinite;
}

.envelope-opening {
    animation: envelopeBounceGlow 0.7s ease-out forwards;
}

.overlay_bg_fixed {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
}

.no-overlay_envelope {
    background-color: transparent;
}

.story_holder_overlay {
    background-color: transparent;
    width: 100%;
    height: 100%;
    display: flex;
}

.story_holder {
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.station_overlay {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: transparent;
}

.station_overlay .lang_holder {
    width: 100%;
    height: 100%;
    /* background-image: url(./assets/image/square_border.webp); */
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 0em 0em 0em 1em;
}

.main_title {
    align-items: flex-start;
    flex-direction: row;
    position: relative;
    margin-bottom: -6%;
    z-index: 1;
    background-image: url();
}

.main_title div:nth-child(1) {
    width: 100%;
    display: flex;
    justify-content: center;
}

.main_title div:nth-child(2) {
    position: relative;
    bottom: -15%;
    z-index: 1;
}

.main_title.station3_title {
    margin-bottom: -25%;
}

.main_title h1 {
    writing-mode: vertical-rl;
    text-orientation: upright;
    color: rgba(113, 107, 8, 1);
    font-size: 17vw;
    letter-spacing: -5%;
}

.station4_title {
    margin-bottom: -10%;
}

.station4_front_img_top {
    position: relative;
    width: 109%;
}

.s4_m3_img {
    width: 60%;
}

.station5_front_img_top {
    width: 100%;
}

.station2_title h1 {
    color: rgba(81, 65, 0, 1);
    text-align: end;
}

.station2_title h1 span {
    position: relative;
    margin-bottom: -10%;
    left: -50%;
}

.station3_title h1 {
    color: rgba(7, 84, 66, 1);
}

.station4_title h1 {
    color: rgba(92, 8, 11, 1);
}

.station5_title h1 {
    color: #001464;
}

.station6_title h1 {
    color: #520668;
}

h1.station6_title_sub {
    position: absolute;
    left: 25%;
    font-size: 13.75vw;
}

.station_overlay .sub_title {
    background-image: url(./assets/image/station1_text_texture.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 4em 1.5em 3em 1.5em;
}

.station_overlay .station2_sub_title {
    background-image: url(./assets/image/station2_text_texture.webp);
}

.station_overlay .station3_sub_title {
    background-image: url(./assets/image/station3_text_texture.webp);
    padding: 7em 1.5em 3em 1.5em;
}

.station_overlay .station4_sub_title {
    background-image: url(./assets/image/station4_text_texture.webp);
}

.station_overlay .station5_sub_title {
    background-image: url(./assets/image/station5_text_texture.webp);
}

.station_overlay .station6_sub_title {
    background-image: url(./assets/image/station6_text_texture.webp);
}

.station3_title {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.station3_title>img {
    width: 12%;
    position: relative;
}

.sub_title h4 {
    color: rgba(251, 249, 238, 1);
    line-height: 1.5;
}

.pointer_none {
    pointer-events: none;
}

.pointer_none_overlay {
    pointer-events: none;
    filter: brightness(0.5);
}

.pointer_none_no_overlay {
    pointer-events: none;
}

/* Station - Station Mission */
.mission_holder {
    width: 100%;
    display: flex;
    flex-direction: row;
    padding-top: 0em;
}

.station3_mission_holder {
    display: flex;
    justify-content: center;
}

.station3_mission_holder .mission {
    width: 33.4%;
}

.mission {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
}

.mission_disabled {
    pointer-events: none;
}

.mission .mission_left {
    width: 75%;
}

.mission .mission_right {
    width: 40%;
    margin-left: 5%;
}

.mission_text {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.mission_text div:first-child {
    width: 95%;
    /* max-width: 17px; */
    margin: 0 auto;
}

.mission1_title div:first-child,
.mission2_title div:first-child,
.mission3_title div:first-child {
    width: 100%;
}

.mission_text div:first-child img {
    max-width: 160px;
    filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.5));
}

.mission_popup .mission_text div:first-child img {
    max-width: 136px;
    filter: none;
}

.mission_text h1 {
    margin-bottom: 0;
}

/* Progress Bar */
.progress_bar_holder {
    width: 100%;
    background-color: rgba(187, 202, 159, 1);
    position: relative;
    overflow: hidden;
    padding: 1em 0.5em;
}

.progress_bar {
    width: 95%;
    height: 40px;
    border: 2px solid rgba(251, 249, 238, 1);
    border-radius: 2em;
    background-color: rgba(250, 246, 236, 0.3);
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}

.progress_fill {
    position: relative;
    height: 100%;
    width: 0%;
    /* start at 0% */
    background-color: rgba(251, 249, 238, 1);
    /* fill color */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    box-sizing: border-box;
    transition: width 0.5s ease;
    border-radius: 0em 1em 1em 0em;
}

.progress_text,
.progress_text_0 {
    position: absolute;
    top: 50%;
    padding: 0em 0.3em;
    transform: translateY(-50%);
    /* font-weight: bold; */
    color: rgba(251, 249, 238, 1);
    pointer-events: none;
}

.progress_text {
    position: relative;
    top: 0;
    transform: translateY(0%);
}

.progress_text_0 {
    padding: 0em 0.5em;
}

.progress_text {
    display: none;
}

.prize1 {
    position: absolute;
    bottom: 0%;
    right: 20%;
}

.prize2 {
    position: absolute;
    bottom: 0%;
    right: -9%;
}

.prize1 img,
.prize2 img {
    width: 42%;
}

img.progress_prize_icon {
    width: 11%;
    padding: 0 0.3em;
}

/* Menu */
.menu {
    width: 80%;
    margin: 5% auto;
}

.menu_popup {
    position: absolute;
    right: 13%;
    bottom: 5%;
    width: 50%;

    display: none;
    align-items: center;
    flex-direction: column;
    background-image: url(./assets/image/menu_bg.webp);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 10;
}

.menu_popup h4 {
    color: #FEF6DF;
}

.menu_popup div {
    width: 100%;
    padding: 1em;
    text-align: center;
}

.menu_popup div:first-child {
    border-bottom: 1px solid #FEF6DF;
}

/* Mission Popup */
.mission_popup_holder,
.home_popup_holder,
.first_envelope_answer,
.mission_answer {
    position: absolute;
}

.mission_answer {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 10;
}

h2.s1m2_correct {
    margin-top: 10%;
    margin-bottom: 10%;
}

.blacknwhite {
    filter: grayscale(1);
}

.mission_popup_holder,
.home_popup_holder {
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.75);
}

.home_popup_holder {
    background-color: transparent;
}

.cendol_try_again {
    padding-bottom: 1em;
}

.mission_popup {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 4em 2em 4em 1em;
    height: 95%;
    overflow-y: scroll;
    /* height: auto; */
}

.mission_img {
    display: flex;
    justify-content: center;
    margin: 3% 0;
}

.mission_img img {
    width: 18%;
}

div.img_border {
    width: 80% !important;
    border: 1px solid #3E3E3E;
    padding: 0.5em;
    margin: 5% 0;
}

.s1_m3_img img {
    width: 70%;
}

.s2_m3_img img {
    width: 90%;
}

.answer_full_popup {
    position: relative;
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: flex-start;
    align-items: center;
    justify-content: space-evenly;
    z-index: 2;
}

.answer_full_popup2 {
    width: 100%;
    height: 100%;
    justify-content: center;
}

.mission2_popup_holder .mission_popup,
.mission3_questions .mission_popup,
.answer_full_popup {
    padding: 1em;
}

.mission_text_middle {
    margin: 5% 0 5% 0;
}

.mission_text_middle2 {
    margin: 0% 0 0% 0;
}

.mission_text_middle3 {
    margin: 3% 0;
}

.mission_text_middle4 td {
    vertical-align: top;
}

.mission_text_middle4 td:first-child {
    padding-right: 0.5em;
}

.mission_text_middle4 td:nth-child(2) {
    vertical-align: middle;
}

.mission_text_middle4 {
    flex-direction: column;
}

.mission_popup div,
.answer_full_popup div,
.answer_full_popup2 div {
    width: 100%;
    max-width: none;
}

.mission_popup .mission_text,
.answer_full_popup .mission_text,
.answer_full_popup2 .mission_text {
    padding: 0em 1em;
}

.mission3_questions .mission_text {
    padding: 0;
}

.mission2_popup_holder .mission_popup .mission_text {
    padding: 0em 0em 1em 0em;
}

.paper_bg {
    position: relative;
    /* height: 100%; */
    height: 50%;
    min-height: 25em;
    background-image: url(./assets/image/paper_bg.webp);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.paper_bg .mission_question_holder {
    padding: 0em 2em;
}

.paper_bg .mission_question_holder,
.paper_bg .question {
    padding: 2em;
}

.station6_step2 .paper_bg .mission_question_holder {
    padding: 0em;
    margin-top: 5%;
}

.station6_step2 .mission_text_middle2 {
    display: flex;
    justify-content: flex-start;
    padding: 1em;
}

div.bottom_q_button {
    position: relative;
    width: 100%;
    padding: 0em 2em;
    bottom: 10%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

div.bottom_q_button div.next,
div.bottom_q_button div.back {
    position: relative;
    width: 100%;
    bottom: 0;
    right: 0;
    z-index: 10;
}

div.bottom_q_button div.back {
    right: auto;
    left: 0;
}

div.bottom_q_button div.indicator {
    width: 20%;
}

div.mission_scan_btn {
    /* width: 100%; */
    width: auto;
}

div.close,
div.close_m2 {
    width: 100%;
    max-width: 29px;
    position: absolute;
    top: 3%;
    right: 3%;
    z-index: 10;
}

div.next,
div.back {
    width: 20%;
    position: absolute;
    bottom: 10%;
    right: 15%;
    text-align: right;
    z-index: 10;
}

.information div.next,
.information div.back {
    position: relative;
    width: 100%;
    bottom: 0%;
}

.information div.next {
    float: right;
}

.information div.back {
    float: left;
}

.padding-gap {
    padding: 1em;
}

div.next h2,
div.back h2 {
    margin-bottom: 0;
}

div.back {
    right: auto;
    left: 15%;
    text-align: left;
}

div.submit_q {
    position: absolute;
    right: 0%;
    bottom: 10%;
    width: 40%;
}

div.submit_q_relative {
    position: relative;
    bottom: 0;
    width: 65%
}

.question h3 {
    padding-bottom: 1em;
}

.mission_text .red {
    color: #FF0000;
}

.mission_text .blue {
    color: #0033FF;
}

.mission_text .yellow {
    color: #F7BD00;
}

/* Indicator */
.indicator_q {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #D9D9D9;
    transition: background-color 0.3s;
}

.dot.active {
    background-color: #3E3E3E;
    /* Active color */
}

/* Mission Question */
.mission_question_holder {
    margin-top: 5%;
}

.answers.image_selection {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.answers.image_selection li {
    width: 100%;
}

.answers.image_selection img {
    width: 100%;
    height: auto;
    display: block;
}

.mission_question_holder ul.answers {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 5%;
    margin-bottom: 10%;
}

.mission_question_holder ul.answers li {
    position: relative;
    padding-left: 1.5em;
    margin-bottom: 10%;
    cursor: pointer;
    font-size: 3.75vw;
    user-select: none;
    display: flex;
    align-items: center;
}

/* Drag Drop Keris */
/* .station2_mission2_popup_holder .mission_popup,
.station3_mission1_popup_holder .mission_popup,
.station3_mission2_popup_holder .mission_popup,
.station4_mission1_popup_holder .mission_popup {
    width: 100%;
    height: 100%;
    justify-content: space-between;
} */

.opening_popup h1 {
    font-size: 14vw;
}

.opening_popup h2 {
    font-size: 7vw;
    color: #5F5F5F;
}

.opening_popup h4 {
    font-size: 3vw;
    color: #5F5F5F;
}

.opening_popup .bottom_opening {
    position: absolute;
    bottom: 5%;
}

.station2_mission2_real_mission,
.real_station3_mission1,
.real_station4_mission1,
.real_station4_mission2 {
    display: none;
}

/* .station2_mission2_popup_holder .mission_popup {
    position: absolute;
    top: 0;
    height: auto;
} */

.bg_fixed {
    background-image: url(./assets/image/main_bg.webp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: fixed;
}

/* .station3_mission1_popup_holder .mission_popup {
    width: 100%;
    height: 100%;
} */

.showS4M1_AR .mission_popup {
    text-align: center;
    justify-content: center;
}

/* .correct_info {
    width: 100%;
    background-image: url(./assets/image/square_border3.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 1.5em;
} */

h2.keris_h2_correct {
    margin-bottom: 5%;
    margin-top: 5%;
}

div.keris_mask {
    width: 70%;
    position: relative;
}

.keris_animation {
    width: 100%;
    height: auto;
}

.slots {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 20px;
}

.slot {
    max-height: 150px;
    border: 2px solid #5B8F19;
    /* background-image: url(./assets/image/square_border.webp); */
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5B8F19;
    font-family: "aataohuashan";
    font-size: 3.75em;
    padding: 0.5em;
    overflow: hidden;
}

.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 5%;
    margin-top: 5%;
}

.card {
    position: relative;
    max-height: 150px;
    display: flex;
    align-items: center;
    cursor: grab;
    overflow: hidden;
}

.card.dragging {
    /* opacity: 0.5; */
}

.slot.filled {
    border-style: solid;
    padding: 0em;
}

.slot.filled span {
    position: absolute;
}

.slot .card {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    cursor: default;
    z-index: 2;
}

/* Station2 Mission1 */
div.choose_correct_knife_holder {
    position: relative;
    /* display: flex; */
    width: 90%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 20px;
}

.knife_holder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(./assets/image/station2_m1/default.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.knife_holder.active {
    background-image: url(./assets/image/station2_m1/selected.webp);
}

.first_mission_answer {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.first_mission_answer .lang_holder {
    height: 95%;
    justify-content: space-around;
}

/* Station3 Mission1 */
.ingredients {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Selected (before submit) */
.ingredients.selected {
    background-color: rgba(84, 150, 0, 1);
}

/* Result states (after submit) */
.ingredients.correct {
    background-color: transparent;
}

.ingredients.wrong {
    background-color: transparent;
}

/* Lock after submit */
.ingredients.locked {
    pointer-events: none;
}

.ingredients_holder {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 20px;
    padding: 0em 1em;

}

.ingredients {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3E3E3E;
    font-family: "poppins" !important;
    overflow: hidden;
    background-image: url(./assets/image/square_border.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.ingredients div {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5em;
    justify-content: space-between;
}

.ingredients div img {
    max-height: 100px;
}

.third_station_answer .correct_info {
    width: 100%;
    /* background-image: none; */
    background-size: 100% 100%;
    background-repeat: no-repeat;
    /* padding: 0em; */
    padding: 1.5em;
}

/* The circle itself */
.mission_question_holder ul.answers li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1em;
    height: 1em;
    border: 1px solid #555;
    border-radius: 50%;
    background: transparent;
    transition: all 0.2s ease;
}

ul.answers.image_selection li::before {
    top: 15%;
}

/* Selected state */
.mission_question_holder ul.answers li.selected::before {
    background: #3E3E3E;
    border-color: #3E3E3E;
}

/* Optional: hover effect */
.mission_question_holder ul.answers li:hover::before {
    border-color: #3E3E3E;
}

/* Station1 Mission2 information Popup */
.information_popup {
    position: absolute;
    width: 100%;
    min-height: 100vh;
    top: 0;
    left: 0;
}

.information {
    width: 100%;
    /* height: 100%; */
    height: 100vh;
}

.information1_s4 {
    justify-content: flex-start;
}

.information1_s4 .mission_text_middle4 {
    margin-top: 5%;
}

.mission_text_middle4 table {
    margin: 3% 0;
}

.mission_text_middle4 table td:first-child {
    width: 35%;
}

.information>div:not(:last-child) {
    max-width: none;
}

.information h2 {
    margin-bottom: 0%;
}

.information_s4 {
    width: 95%;
    height: auto;
    position: absolute;
}

.overlay_s4 {
    position: absolute;
    width: 100%;
    height: 100%;
    /* background-color: rgba(0, 0, 0, 0.75); */
}

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

div.stone_tablet_subtitle {
    display: flex;
    flex-direction: row;
    align-items: center;
    max-width: none;
}

.stone_tablet_subtitle>img {
    width: 100%;
    max-width: 45px;
    margin-right: 3%;
}

.no_max-width {
    max-width: none !important;
}

/* S1 Mission1 AR */
.mission_ar {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.ar_iframe {
    position: absolute;
    width: 100%;
    height: 100%;
}

.ar_iframe iframe {
    background-color: #ffffff;
}

.iframe_info {
    width: 90%;
    height: 80%;
}

.iframe_cendol {
    width: 100%;
    height: 100%;
}

.cendol {
    position: relative;
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mission_cendol {
    position: fixed;
}

div.close_cendol {
    width: 100%;
    height: 12%;
    max-width: none;
    position: absolute;
    top: 0%;
    z-index: 10;
    /* background-color: red; */
}

.lan_cheng img,
.lan_cheng2 img {
    width: 70%;
    margin-bottom: 5%;
}

.lan_cheng2 img {
    width: 95%;
    margin-top: 3%;
}

.lan_cheng3 {
    display: flex;
}

.lan_cheng3 img {
    width: 55%;
    margin: 3% auto 6% auto;
}

.stone_tablet {
    display: flex;
    position: relative;
}

.stone_tablet img {
    width: 90%;
    margin: 3% auto 6% auto;
}

/* Stone Tablet info click */
div.s4_info {
    position: absolute;
    width: 100%;
    max-width: none;
}

div.s4_info img {
    max-width: 45px;
}

.s4_info1_click {
    top: 29%;
    left: 16%;
}

.s4_info2_click {
    top: 23%;
    left: 50%;
}

.s4_info3_click {
    top: 36%;
    left: 76%;
}

.s4_info4_click {
    top: 76%;
    left: 50%;
}

.iframe_information1 {
    display: flex;
    justify-content: space-between;
}

.main_title h5 {
    font-family: 'poppins' !important;
}

.lang-en,
.en {
    font-family: "bentham";
}

.lang-zh {
    font-family: "Noto Serif SC";
}

strong {
    font-weight: 800;
}

.semibold {
    font-weight: 500 !important;
}

/* AR Frame */
.frame_holder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

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

.frame {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width: 60%;
    height: 100%;
}

.frame_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 1);

    background-image: url(./assets/image/ar_border.webp);
    background-size: 80%;
    background-position: center center;
    background-repeat: no-repeat;
}

.frame_content {
    position: relative;
    width: 100%;
    height: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.ar_instruction {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.ar_instruction_image {
    width: 20%;
}

.ar_instruction_text {
    width: 85%;
    color: white;
    margin-left: 5%;
}

.ar_padding_top {
    padding-top: 1.5em;
}

.ar_instruction+.ar_instruction {
    margin-top: 5%;
}

.ar_instruction:last-child {
    margin-bottom: 5%;
}

.ar_line {
    border-bottom: 1px solid white;
    padding-bottom: 1.5em;
}

.proceed_btn {
    /* width: 45%; */
    width: auto;
    border: none;
    background-color: white;
    color: black;
    font-family: 'poppins' !important;
    text-align: center;
    border-radius: 1em;
    padding: 0.5em 1em;
    margin-top: 10%;
}

.help_icon {
    width: 100%;
    max-width: 44px;
    position: absolute;
    bottom: 3%;
    right: 3%;
    z-index: 10;
    display: none;
}

.mission_ar {
    display: none;
}

/* Station3 */
.station3_subtitle2 {
    margin-bottom: 2%;
}

/* Mission3 Cendol */
.mission_left.cendol_redeem {
    width: 90%;
    margin: 0 auto;
}

/* Station4 Mission3 */
.overlay_s4,
.information_s4.iframe_information2,
.information_s4.iframe_information3,
.information_s4.iframe_information4,
.information_s4.iframe_information5 {
    display: none;
}

/* Redirecting */
div.redirecting {
    display: none;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

div.redirecting h1 {
    font-size: 7vw;
    font-weight: 400;
    color: white;
}

/* Station3 Mission1 */
.station3_mission1_questionnaire div+div {
    margin-top: 5%;
}

div.station3_mission2_questionnaire {
    width: 80%;
}

div.station4_mission3_questionnaire {
    display: flex;
    flex-direction: column;
    align-items: center;
}

div.station4_mission3_questionnaire img {
    width: 50%;
}

div.station3_mission2_questionnaire label,
div.station4_mission3_questionnaire label,
div.station5_mission1_questionnaire label {
    font-size: 3.5vw;
    color: #808080
}

.station1_page div.station3_mission2_questionnaire label {
    color: #3E3E3E
}

.overlay_envelope label {
    font-size: 3.5vw;
}

.overlay_envelope .start_game h2,
.overlay_envelope .start_game label {
    color: #6A6966;
}

.home_page div.station5_mission1_questionnaire {
    width: 100%;
    padding: 0em 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.station5_mission1_questionnaire .img_border {
    width: 100% !important;
    border: transparent;
    background-image: url(./assets/image/s5m1_box.webp);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    padding: 1em;
}

div.station5_mission1_questionnaire .paper_bg {
    min-height: 10em;
    background-image: url(./assets/image/paper_bg_small.webp);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

div.station5_mission1_questionnaire .paper_bg h3 {
    padding: 2em 1em;
}

div.station4_mission1_puzzle {
    width: 90%;
}

.s3_info_text div:first-child {
    width: 20%;
    max-width: none;
}

.s3_info_text div:nth-child(2) {
    width: 80%;
    max-width: none;
}

.cendol_combination_holder {
    width: 100%;
    max-width: 200px;
    height: auto;
    /* overflow: hidden; */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.cendol_combination {
    width: 50%;
    height: auto;
}

.s3_m2_correct {
    width: 80%;
}

/* Station4 Mission1 AR */
.showS4M1_AR {
    display: none;
}

/* Station4 Mission1 Puzzle */
.station4_mission1_puzzle_wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px;
}

/* Puzzle board */
.station4_mission1_puzzle_wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#puzzle-board {
    width: 90%;
    height: 100%;
    /* min-height: 15em; */
    position: relative;
    aspect-ratio: 8/8;
    /* keeps correct grid ratio */

    background-image: url("./assets/image/s4_m3_jigsaw/puzzle_board_outline2.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    border: 2px solid transparent;
}

#game {
    width: 100%;
    max-width: 450px;
    /* padding: 1em; */
}

#boardWrapper {
    position: relative;
    width: 90%;
    aspect-ratio: 1;
}

#photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#board {
    position: absolute;
    inset: 0;
}

.cell {
    position: absolute;
    background: #5c080b;
    border: 1px solid rgba(255, 255, 255, 1);
}

#pieceTray {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.piece {
    position: absolute;
    touch-action: none;
    cursor: grab;
    opacity: 0;
}

#pieceTray_indicator {
    display: grid;
    grid-template-columns: repeat(5, 1fr);

    justify-content: center;

    width: fit-content;
    margin: 10px auto 0;
    position: relative;
}

#pieceTray_indicator .piece-indicator {
    width: 100%;
    aspect-ratio: 1;
    position: relative;
    background: #d3a95d;
    border: 1px solid #5c080b;

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

.mini-shape {
    position: relative;
}

.mini-block {

    position: absolute;

    /* turn image blue */
    filter:
        brightness(0) saturate(100%) invert(8%) sepia(87%) saturate(5147%) hue-rotate(345deg) brightness(66%) contrast(108%);
}

.piece-tick {

    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    font-size: 28px;
    font-weight: bold;

    color: #00ff4c;

    opacity: 0;
}

.piece-indicator.completed .piece-tick {

    opacity: 1;
}

.piece.dragging {
    opacity: .9;
}

.block {
    position: absolute;
    background-repeat: no-repeat;
    border: 1px solid rgba(255, 255, 255, .25);
}

/* Completion Page */
.completion_main {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    margin: 0 auto;
    padding: 2em 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f5f7fa;
    border-radius: 12px;
}

.completion_main h2 {
    font-size: 7.5vw;
    margin-bottom: 1.5em;
    color: #333;
}

.completion_holder {
    width: 90%;
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}

.litepicker .container__months {
    width: 95% !important;
}

.litepicker .container__months .month-item {
    width: 95% !important;
}

.main_box {
    background: #fff;
    padding: 1.5em;
    border-radius: 1em;
    box-shadow: 0 0px 6px rgba(0, 0, 0, 0.15);
}

.main_box h3 {
    margin-bottom: 0.8em;
    color: #007BFF;
    /* nice blue for headings */
}

.main_box p {
    margin: 0.4em 0;
    color: #555;
}

.percentage {
    font-weight: 700;
    /* color: #28a745; */
}

/* Login Box */
.login-box_holder {
    width: 90%;
    height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.login-box {
    background: #fff;
    padding: 1em;
    border-radius: 1em;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1em;
}

.login-box input {
    width: 100%;
    padding: 1em;
    text-align: center;
}

.login-box button,
.filter_date button {
    padding: 0.5em 1.5em;
    background: transparent;
    color: #3E3E3E;
    border: none;
    cursor: pointer;
    border: 2px solid #3E3E3E;
    border-radius: 2em;
}

.login-box .error {
    color: red;
}

.login-box form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
}

.filter_date {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    padding-bottom: 1.5em;
}

.filter_date {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.filter_date label {
    display: flex;

}

.filter_date form {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 1em;
}

.filter_date_buttons {
    position: relative;
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    gap: 15px;
}

#dateRange {
    text-align: center;
}

/* Station5 Mission1 */
.fill_blanks {
    border: none;
    border-bottom: 1px solid #3E3E3E;
    background: transparent;
    outline: none;
    border-radius: 0;

    display: inline-block;
    vertical-align: baseline;

    width: 1.5em;
    /* perfect for 1 Chinese character */
    text-align: center;
    padding: 0;
    margin: 0 2px;
}

/* Hide placeholder */
.fill_blanks::placeholder {
    color: transparent;
    background-position: center center;
    background-size: 75%;
    background-repeat: no-repeat;
}

.fill_blanks:nth-child(1)::placeholder {
    background-image: url('./assets/image/s5_m1_1.webp');
}

.fill_blanks:nth-child(2)::placeholder {
    background-image: url('./assets/image/s5_m1_2.webp');
}

.fill_blanks:nth-child(3)::placeholder {
    background-image: url('./assets/image/s5_m1_3.webp');
}

.fill_blanks:nth-child(4)::placeholder {
    background-image: url('./assets/image/s5_m1_4.webp');
}

/* Focus effect */
.fill_blanks:focus {
    border-bottom: 2px solid #4CAF50;
}

/* Station5 Mission1 END */

/* Station6 */
.station6_step2 {
    display: none;
}

/* Station6 END */

/* Profile Page + Home */
.profile_page {
    display: none;
}

.profile_page .no-overlay2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 90%;
    height: 95%;
    background-color: white;
}

.profile_holder {
    display: flex;
    width: 100%;
    height: auto;
    padding: 1em;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.profile_page_div {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow-y: scroll;
}

.home_popup_holder .mission_popup .close {
    top: 2%;
    right: 2%;
}

.profile_page_div div.close {
    top: 4.4%;
    right: 7%;
}

.username,
.user_button {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.user_button {
    margin-bottom: 15%;
}

.user_button div button {
    display: flex;
    align-items: center;
    justify-content: center;
}

.user_button img {
    margin-right: 10%;
    max-width: 29px;
}

.user_button button {
    text-align: left;
    min-width: 350px;
}

.img_user img {
    width: 100%;
    max-width: 86px;
}

.user_log_out h2 {
    text-decoration: underline;
}

/* Profile Popup */
.profile_popup_holder,
.setting_popup_holder,
.assistant_popup_holder {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    display: none;
}

.paper_bg2 {
    background-image: none;
    min-height: auto;
}

.paper_bg2 .mission_question_holder {
    padding: 1em;
    margin: 0;
}

.paper_bg2 .question {
    padding: 0;
    margin: 0;
}

.paper_bg2 div.bottom_q_button {
    bottom: 0;
}

.profile_popup_holder .mission_popup,
.assistant_popup_holder .mission_popup {
    height: 95%;
    overflow-y: scroll;
}

.profile_popup02_img,
.profile_popup03_img,
.profile_popup04_img {
    display: flex;
    justify-content: center;
}

.profile_popup02_img img {
    max-width: 186px;
}

.profile_popup03_img img {
    max-width: 165px;
}

.profile_popup04_img img {
    max-width: 150px;
}

/* Assitant */
.station_help {
    position: absolute;
    width: 90%;
    height: 95%;
    display: none;
    background-image: url(./assets/image/main_bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 10;
}

.station_help .envelope_story_title img {
    max-width: 260px;
}

.station_help .line_holder {
    padding: 1em 0em;
}

.station_help .line_holder.padding05 {
    padding: 0.5em 0em;
}

.station_help .envelope_story_title {
    padding-top: 1em;
}

.assistant_main {
    padding-bottom: 1em;
}

.station_help .assistant_info {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2%;
}

.station_help .assistant_left {
    width: 25%;
}

.station_help .assistant_right {
    width: 75%;
    padding-top: 0.7em;
}

.assistant_smaller_img img {
    width: 50%;
}

.assistant_smaller_img {
    display: flex;
    justify-content: center;
}

/* Home Instruction */
.home_instruction_page {
    display: none;
}

/* Station AR Answer Button */
.station_ar_answer {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.station_ar_answer_holder {
    display: none;
}

.s1_m3_answer {
    display: none;
}

.image_target {
    position: fixed;
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: -1;
}

.image_target h1 {
    color: white;
}

.image_target img {
    width: 85%;
    opacity: 0.75;
}

/* Reset Password */
.reset_popup_holder,
.code_holder {
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.reset_popup,
.enter_code {
    position: relative;
    width: 90%;
    background-color: #FFFEF2;
    padding: 2em 1em;
    border-radius: 1em;
}

.reset_success,
.reset_failed {
    display: none;
}

/* Code */
.melaka_code {
    display: none;
}

@media screen and (min-width: 600px) {

    p,
    a {
        font-size: 20px;
    }

    h3,
    input,
    .btn,
    label,
    li,
    .proceed_btn {
        /* font-size: 3.2vw; */
        font-size: 22px;
    }

    h4,
    .subtitle,
    .small_label,
    .card-text {
        font-size: 3.5vw;
    }

    .small_label {
        font-size: 14px;
    }

    .eye-icon {
        width: 30px;
        height: 30px;
    }

    .toggle-password {
        top: 45%;
    }

    /* Home */
    img.progress_prize_icon {
        width: 11%;
    }

    .prize2 {
        right: -24%;
    }
}

@media screen and (min-width: 768px) {
    .completion_holder {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .login-box {
        width: 85%;
    }
}

@media screen and (min-width: 1250px) {
    .completion_main h2 {
        font-size: 3.5vw;
    }

    .completion_holder {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .filter_date input,
    .completion_holder h3 {
        font-size: 1.5vw;
    }

    .login-box {
        width: 85%;
    }

    .login-box_holder h2 {
        font-size: 2.7vw;
    }

    .login-box input,
    .login-box button {
        font-size: 1.2vw;
    }

    .litepicker .container__months {
        width: 100% !important;
    }

    .litepicker .container__months .month-item {
        width: 100% !important;
        max-width: min-content !important;
    }
}