html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    line-height: normal;
    vertical-align: baseline;

}

body {
    font-family: 'cillax', sans-serif;
    font-size: 14px;
    font-weight: 400;
    overflow: hidden;
    min-height: 100dvh;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

* {
    box-sizing: border-box;
}

a {
    text-decoration: none;
    display: inline-block;
}

img {
    display: block;
    max-width: 100%;
}

@font-face {
    font-family: 'cillax';
    src: url('../fonts/Chillax-Regular.ttf') format('truetype');
    src: url('../fonts/Chillax-Regular.woff2') format('woff2');
    font-weight: 400;
}

@font-face {
    font-family: 'cillax';
    src: url('../fonts/Chillax-Semibold.ttf') format('truetype');
    font-weight: 600;
}

@font-face {
    font-family: 'cillax';
    src: url('../fonts/Chillax-Bold.ttf') format('truetype');
    src: url('../fonts/Chillax-Bold.woff2') format('woff2');
    font-weight: 700;
}

@font-face {
    font-family: 'nippo';
    src: url('../fonts/Nippo-Bold.ttf') format('truetype');
    src: url('../fonts/Nippo-Bold.woff2') format('woff2');
    font-weight: 700;
}

#btn-edit-username{
    display: none !important;
}

input, select, textarea, button {
    border: 0;
    outline: none;
    font-family: 'cillax';
    font-weight: 600;
    color: inherit;
}
textarea {
    resize: none;
}

ul, ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

li.karaoke__lyrics-item {
    min-height: 8px;
}

.text-capitalize {
    text-transform: capitalize;
}

.uppercase {
    text-transform: uppercase;
}

.pointer {
    cursor: pointer;
}

button {
    cursor: pointer;
}

.wider {
    width: 100%;
}

.flex {
    display: flex;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.relative {
    position: relative;
}

video {
    display: block;
}

.mobile {
    display: none;
}

.hamburger-bar span:after,
.hamburger-bar span:before,
.hamburger-bar span {
    transition: all ease .3s;
}

.openMenu .hamburger-bar span {
    height: 0;
}

.openMenu .hamburger-bar span:before {
    top: -1px;
    transform: rotate(45deg);
}

.openMenu .hamburger-bar span:after {
    top: -3px;
    transform: rotate(-45deg);
}

.intro-profile .lesson-map-wrapper,
.intro-gems_ .lesson-map-wrapper,
.intro-mission .lesson-map-wrapper,
.intro-profile .lesson-map-wrapper,
.intro-planets .lesson-map-wrapper,
.intro-profile .gems-card,
.intro-mission .gems-card,
.intro-lesson-map .gems-card,
.intro-gems_ .avatar-card a,
.intro-mission .avatar-card a,
.intro-lesson-map .avatar-card a,
.intro-profile .hamburger-bar,
.intro-mission .gems-card,
.intro-gems_ .hamburger-bar,
.intro-gems_ .mission-card,
.intro-lesson-map .mission-card,
.intro-profile .mission-card,
.intro-planets .mission-card
.intro-gems_ .holiday-card,
.intro-lesson-map .holiday-card,
.intro-profile .holiday-card,
.intro-planets .holiday-card{
    opacity: .2;
}

.container {
    width: 1200px;
    margin: 0 auto;
}

.main-content-wrap .container {
    height: 100% !important;
    width: 100% !important;
}

.quiz-puzzle .container {
    width: calc(100vw - 715px) !important;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bold {
    font-weight: 700;
}

.semi-bold {
    font-weight: 600;
}

.inline {
    display: inline-block;
}

.btn-primary {
    background: #FFF;
    padding: 12px 32px;
    font-size: 20px;
    font-weight: 700;
    color: #393939;
    letter-spacing: 1px;
    border-radius: 200px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px -3px 0px 0px rgba(0, 0, 0, 0.25) inset;

}

.btn-secondary {
    padding: 12px 8px;
    width: 100%;
    color: #fff;
    font-size: 24px;
    border-radius: 50px;
    transition: all ease-in-out .5s;
    /*border: 4px solid #135CD1;*/
    font-weight: 600;

    background: #178400;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px -3px 0px 0px rgba(0, 0, 0, 0.25) inset;
}

.btn-white {
    padding: 8px 32px;
    font-size: 16px;
    font-weight: 600;
    color: #393939;
    border-radius: 200px;
    letter-spacing: 1px;
    background: #FFFBFB;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05), 0px -3px 0px 0px rgba(0, 0, 0, 0.25) inset;
}

.btn-blue {
    padding: 8px 32px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 1px;
    border-radius: 200px;
    background: #178400;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px -3px 0px 0px rgba(0, 0, 0, 0.25) inset;
}

.btn-white-outline {
    border: 4px solid #E6E6E6;
    background: #fff;
    font-weight: 700;
    color: #111;
    letter-spacing: 1px;
    border-radius: 50px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05);
    cursor: pointer;
    font-size: 16px;
    padding: 8px 32px;
}

/*.btn-back-arr:hover,*/
.submit-answers button:hover,
.back-test:hover,
.nav-list li a:hover{
    /*border: 4px solid #DD5321;*/
    /*background: #FC6128;*/
}

.brand a {
    display: block;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

#overlayOver,
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10;
    display: none;
    backdrop-filter: blur(5px);
    background: rgba(0, 0, 0, .5);
}

#overlay.show {
    display: block;
}

#overlay.transparant-white {
    /*background: rgba(255,255,255,.6);*/
}

#login {
    background-image: url(../images/kerukunan-cinta/bg.webp);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.forgot-card,
.login-card {
    width: 540px;
    min-height: 200px;
    border-radius: 24px;
    text-align: center;
    position: relative;
    padding: 28px 26px 46px;
    background: #FEFEFC;
}

.login-card img {
    display: inline-block;
}

.login-card h3 {
    color: #DB8B49;
    font-size: 32px;
    margin: 16px 0
}

.login-card h3 img {
    vertical-align: text-bottom;
}

.logo-login img {
    width: 120px;
}

.login-form .form-control {
    margin-bottom: 16px;
    padding: 16px 24px;
    border-radius: 8px;
    border: 1px solid #E8E6E6;
    background: #EDEDED;
    position: relative;
    /*box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15), 0px 4px 4px 0px rgba(112, 112, 112, 0.15) inset;*/
}

.login-form .form-control input {
    background: transparent;
    color: #393939;
    margin-left: 8px;
    font-size: 16px;
    width: 100%;
}

.forgot-card .btn-login,
.login-form .btn-login {
    text-align: center;
    position: absolute;
    bottom: -40px;
    left: 0;
    padding: 0 32px;
    width: 100%;
}

.btn-login .btn-secondary[disabled], .btn-login .btn-secondary:disabled {
    color: #D9D9D9;
    background: #ECECEC;
    cursor: default;
}

.forgot-password {
    font-size: 16px;
    padding: 16px;
    color: #0A0A0A;
    border-bottom: 1px solid #E0E0E0;
}

.forgot-password a {
    color: #7EA800;
    text-decoration: underline;
    cursor: pointer;
}

.forgot-password a:hover {
    transition: color ease-in-out .2s;
    color: #fc6128;
}

.forgot-text img {
    display: inline-block;
}

.forgot-text h3 {
    margin-top: 8px;
    margin-bottom: 8px;
}

.ufo-,
.star- {
    position: absolute;
}

.star-one {
    width: 35px;
    top: 40%;
    left: 15%;
}

.star-two {
    top: 20px;
    left: 20%;
    width: 30px;
}

.star-three {
    top: 40px;
    right: 20%;
    width: 25px;
}

.star-four {
    bottom: 40px;
    right: 20%;
    width: 25px;
}

.ufo-one {
    width: 150px;
    top: 40%;
    right: 10%;
    animation: 5s infinite ufoOne linear;
}

@keyframes ufoOne {
    0% {
        transform: translateY(0);
    }
    5% {
        transform: rotate(2deg);
    }
    50% {
        transform: translateX(-90px);
    }
    80% {
        transform: rotate(-15deg);
    }
    100% {
        transform: translateX(0px);
    }
}

.zoomInOut {
    animation: 1s zoomInOut linear;
}

@keyframes zoomInOut {
    0% {
        width: 0;
    }
    50% {
        width: 10%;
    }
    100% {
        width: 0;
    }
}

.modal-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    background: rgba(0, 0, 0, .5);
}

.modal-wrap h2 {
    /*color: #6F42C1;*/
    font-size: 32px;
    line-height: 40px;
    margin-bottom: 16px;
}

.modal-middle p {
    font-size: 24px;
}

.global-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-dialog {
    min-width: 420px;
    padding: 24px;
    border-radius: 24px;
    background: #FFFDEE;
    text-align: center;
    /*box-shadow: 0 10px 0 0 rgba(255, 255, 255, 0.15);*/
}

.modal-dialog.practice-modal{
    margin-top: 60px;
    max-width: 50%;
}


.modal-dialog-achievement {
    padding: 0 !important;
    max-width: 400px;
}

.modal-dialog-achievement .achievement-icon {
    margin-top: -56px;
}

.modal-dialog-achievement-body {
    width: 100%;
    padding: 1.2rem;
    text-align: center;
}

.btn-achievement{
    margin-top: 1.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    text-transform: uppercase;
}

.txt-unachieve{
    color: #0A0A0A66 !important;
}

.modal-achievement-desc {
    font-size: 16px;
    font-weight: 400;
    line-height: 22.4px;
    text-align: center;
    color: #000000;
}

.bg-achievement {
    width: 100%;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.star-rank-wrap {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    margin-top: -100px;
    margin-bottom: 36px;
    justify-content: center;
}

.star-rank-wrap .star-smaller {
    width: 91px;
    height: 87px;
}
.star-rank-wrap .star-bigger {
    width: 121px;
    height: 117px;
}

.modal-action-bottom{
    margin:auto;
    padding-bottom: 10px;
    display: flex;
    justify-items: center;
}

.btn-modal-wrap {
    position: relative;
    width: 100%;
    text-align: center;
    margin-bottom: -54px;
    margin-top: 38px;
}

.btn-modal-card {
    position: relative;
    margin-top: 16px;
}

.close-modal {
    background: transparent;
    position: absolute;
    top: 3vh;
    right: 2vh;
    width: 50px;
}

.welcome-container {
    margin: auto;
    position: relative;
    display: flex;
    justify-content: center;
    height: 100%;
    align-items: center;
}

.bg-welcome-wrap {
    background-image: url(../images/kerukunan-cinta/bg.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    transform-origin: center;
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    transition: all ease-in-out .5s;
    height: 100dvh;
    width: 100%;
    position: absolute;
    z-index: -1;
}

.bg-welcome-wrap.zoom {
    transform-origin: 68em 56em;
    -ms-transform: scale(2.6);
    -webkit-transform: scale(2.6);
    transform: scale(2.6);
}

.welcome-text-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.welcome-text-card {
    /* background-color: #4E2E87;
    border:5px solid #CFC0EA; */
    background-image: url(../images/kerukunan-cinta/shape.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 833px;
    height: 480px;
    border-radius: 20px;
    position: relative;
    color: #fff;
    font-family: nippo;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 1px;
    padding: 60px 90px 40px 40px;
}

.welcome-text-card strong {
    text-transform: uppercase;
    font-size: 32px;
}

.welcome-text-card p {
    margin: 18px 0;
}

.welcome-text-card:before {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: polygon(0 40.00px, 40.00px 0, 100% 0, 100% calc(100% - 40.00px), calc(100% - 40.00px) 100%, 0 100%, 0 40.00px, 10px calc(40.00px + 4.14px), 10px calc(100% - 10px), calc(100% - 40.00px - 4.14px) calc(100% - 10px), calc(100% - 10px) calc(100% - 40.00px - 4.14px), calc(100% - 10px) 10px, calc(40.00px + 4.14px) 10px, 10px calc(40.00px + 4.14px));
}

.bima-char {
    position: absolute;
    left: -100px;
    bottom: 0;
}

.bima-char img {
    width: 450px;
}

.bima-char.anim {
    animation: 5s infinite bima linear;
}

@keyframes bima {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-50px);
    }
    100% {
        transform: translateX(0);
    }
}

.btn-start {
    position: absolute;
    /*right: 80px;*/
    bottom: 38px;
    background: #DB8B49;
    color: white;
}

.bg-course-page {
    background-image: url(../images/kerukunan-cinta/bg.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom center;
    position: fixed;
    width: 100%;
    height: 100%;
}

.bg-course-page.elementary-level {
    background-image: url(../images/contents/bg-itermediate-course.jpg);
}
.bg-course-page.highschool-level {
    background-image: url(../images/contents/bg-highschool.jpg);
}

.bg-bedroom {
    background-image: url(../images/assets/bg-bedroom.svg);
    background-position: bottom !important;
}

.bg-coloring {
    background-image: url(../images/assets/bg-coloring.svg);
    background-position: bottom !important;
}

.comingsoon-wrap {
    text-align: center;
    width: 100%;
}

.side-nav {
    border-radius: 16px;
    background: #FFFBFB;
    backdrop-filter: blur(8px);

    margin: 20px;
    height: calc(100vh - 40px);

    position: fixed;
    left: 0;
    top: 0;
    padding: 40px;
    width: 20%;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.highschool-level .side-nav,
.elementary-level .side-nav {
    background: rgb(20, 37, 71, .8);
    left: 1.5vw;
    top: 4vh;
    padding: 3vh;
    height: 92%;
    width: 20vw;
    border-radius: 2vh;
    backdrop-filter: blur(3px);
}
.highschool-level .side-nav{
    background: rgba(22, 22, 22, 0.70);
    backdrop-filter: blur(8px);
}
.logo-nav {
    text-align: center;
}

.logo-nav img {
    width: 200px;
    display: inline-block;
}

.nav-list {
    width: 100%;
    margin-top: 60px;
}

.nav-list li {
    text-transform: uppercase;
    font-weight: 600;
    text-align: center;
    letter-spacing: 1px;
    margin: 16px 0;
    position: relative;
}

.btn-exit,
.nav-list li {
    font-size: 2vh;
}

.nav-list li.lock::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    border-radius: 50px;
    background-color: rgb(0, 0, 0, .4);
    background-image: url(../images/assets/lock.png);
    background-position: center;
    background-repeat: no-repeat;
}

.nav-list li.checked::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    border-radius: 50px;
    background-color: rgb(0, 0, 0, .6);
    background-image: url(../images/assets/check_circle.png);
    background-position: center;
    background-repeat: no-repeat;
}

.nav-list li a {
    color: #fff;
    display: block;
    padding: 16px;
    position: relative;
    transition: all ease-in-out .3s;
    border-radius: 200px;
    background: rgba(23, 132, 0, 0.8);
}

.btn-exit {
    width: 100%;
    color: #fff;
    padding: 16px;
    /*font-size: 20px;*/
    font-weight: 600;
    text-align: center;
    margin-top: auto;
    letter-spacing: 1px;
    transition: all ease-in-out .3s;

    border-radius: 200px;
    border: 2px solid #7EA800;
    background: rgba(126, 168, 0, 0.6);
}

/*.btn-exit:hover {*/
/*    background-color: rgba(255, 251, 251, 0.60);*/
/*}*/

.avatar-wrap {
    margin-left: auto;
    display: flex;
    justify-content: end;
    padding-right: 40px;
    margin-top: 20px;

}

.highschool-level .avatar-wrap,
.elementary-level .avatar-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    position: absolute;
    right: 16px;
    top: 20px;
    z-index: 12;
    padding: 1vh 1vw;
    border-radius: 2vh;
    margin-top: 0;
    /*border: 2px solid #20333D;*/
    /*background: rgb(20, 37, 71, .8);*/
    /*backdrop-filter: blur(3px);*/
}

.avatar-card {
    display: flex;
    align-items: center;
    animation-duration: 1s;
    animation-delay: 600ms;
    position: relative;

}

.avatar-card a {
    display: flex;
    flex-direction: row;
    padding: 8px 16px;
    justify-content: center;
    gap: 12px;
    align-items: center;

    border-radius: 200px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(249, 142, 0, 0.8);
    backdrop-filter: blur(8px);
}

.avatar-card span {
    text-align: center;
    color: white;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    word-wrap: break-word;
}

.avatar-card .skip-intro-sm{
    font-size: 12px;
    font-weight: 500;
    text-transform: none;
}

.highschool-level .gems-card,
.elementary-level .gems-card,
.highschool-level .avatar-card,
.elementary-level .avatar-card {
    /*margin-left: 12px;*/
}

.circle-ava {
    border-radius: 50%;
    /*background-color: #6F42C1;*/
    /*border: 3px solid #8762CB;*/
    overflow: hidden;
}

.icon-gift-home,
.icon-fire-home,
.icon-gems-home,
.circle-ava,
.circle-ava .ava-img {
    width: 43px;
    height: 43px;
}

.highschool-level .circle-ava,
.elementary-level .circle-ava,
.highschool-level .circle-ava .ava-img,
.elementary-level .circle-ava .ava-img {
    width: 43px;
    height: 43px;
}

.gems-card {
    display: flex;
    align-items: center;
    margin-right: 24px;
    animation-delay: 300ms;
    padding: 8px 16px;
    justify-content: center;
    gap: 12px;

    border-radius: 200px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(249, 142, 0, 0.8);
    backdrop-filter: blur(8px);
}

.mission-card {
    display: flex;
    align-items: center;
    margin-right: 24px;
    animation-delay: 300ms;
    padding: 8px 16px;
    justify-content: center;
    gap: 12px;
    cursor: pointer;

    border-radius: 200px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(249, 142, 0, 0.8);
    backdrop-filter: blur(8px);
}

.holiday-card {
    display: flex;
    align-items: center;
    margin-right: 24px;
    animation-delay: 300ms;
    padding: 8px 16px;
    border-radius: 200px;
    border: 1px solid #8762CB;
    background: #5D37A1;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
}

/*.highschool-level .holiday-card,*/
/*.highschool-level .holiday-card,*/
/*.elementary-level .mission-card,*/
/*.elementary-level .mission-card,*/
/*.highschool-level .gems-card,*/
/*.elementary-level .gems-card {*/
/*    margin-right: 0px;*/
/*}*/

.icon-gems {
    position: absolute;
}

.icon-gems:after {
    content: '';
    position: absolute;
    top: .7vh;
    left: .5vw;
    width: 8px;
    height: 8px;
    background-size: cover;
    background-image: url(../images/assets/star-1.png);
    animation: blinker 2s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.gems-card img {
    /*position: relative;*/
    /*left: 40px;*/
    /*top: 4px;*/
}

/*.elementary-level .gems-card img {*/
/*    width: 3.3vw;*/
/*    left: unset;*/
/*    top: unset;*/
/*}*/

.gems-card .gems-number {
    text-align: center;
    color: white;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    word-wrap: break-word;
}

.mission-card .mission-text {
    text-align: center;
    color: white;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    word-wrap: break-word;
}
.holiday-card .mission-text {
    text-align: center;
    color: white;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    word-wrap: break-word;
}

/*.elementary-level .gems-card .gems-number {*/
/*    border: 3px solid #8762CB;*/
/*    background: #6F42C1;*/
/*    padding-left: 2.5vw;*/
/*    padding-right: .8vw;*/
/*    font-size: 3.1vh;*/
/*    font-weight: 600;*/
/*    min-width: 5.8vw;*/
/*    text-align: right;*/
/*    margin-left: 10px;*/
/*    line-height: 4vh;*/
/*}*/

.course-dungeon {
    /* position: absolute;
    right: 400px;
    top:150px; */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dungeon-line {
    height: 35.5vw;
    top: 1vw;
    position: relative;
    left: 0;
    /*background-image: url(../images/contents/route-course.png);*/
    background-image: url(../images/teman-tertib/route.webp);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 100%;
    transition: height ease-out .8s;
}

/*.dungeon-line img {*/
/*    width: 100%;*/
/*}*/

.spin-2 {
    animation: spin2 15s infinite linear;
}

@keyframes spin2 {
    0% {
        transform: rotate(0deg);
    }

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

.img-planet {
    position: relative;
    top: 0;
    left: 0;
    padding: 1.3vh;
    border: .6vh solid transparent;
    border-radius: 50%;
}

.planet-wrap {
    position: absolute;
    top: calc(1vh + 70px);
    left: 40vw;
    width: 38vw;
    height: 70vh;
}

.planet {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 18vh;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
    /*background-image: url(../images/assets/ring.png);*/
}

.planet-one {
    top: -7.5vh;
    left: -6vw;
}

.planet-two {
    top: -5vh;
    left: 12vw;
}

.planet-three {
    top: 1vh;
    right: 0;
}

.planet-four {
    bottom: 14vh;
    right: -1vw;
}

.planet-five {
    bottom: 0vw;
    right: 16vw;
}

.planet-six {
    bottom: -1vw;
    left: -6vw;
}

.ufo::before {
    content: '';
    position: absolute;
    background-image: url(../images/assets/ufo-small.png);
    background-position: center;
    background-size: 100%;
    width: 150px;
    height: 150px;
    top: 124px;
    z-index: 2;
    left: 25px;
    animation: 5s infinite ufoPlanet linear;
}

@keyframes ufoPlanet {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-100px);
    }
    90% {
        transform: rotate(-10deg);
    }
    100% {
        transform: translateX(0px);
    }
}

#ufo {
    content: '';
    position: absolute;
    background-image: url(../images/assets/ufo-small.png);
    background-position: center;
    background-size: 100%;
    top: 35vh;
    left: 0;
    width: 100px;
    height: 100px;
    margin-top: -50px;
    z-index: 2;
    animation: 10s infinite ufoPlanet linear;
}

.label-level {
    /*display: inline-block;*/
    display: flex;
    align-items: center;
    border-radius: 50px;
    border: 2px solid rgba(57, 57, 57, 0.8);
    background: #FFFBFB;
    color: rgba(57, 57, 57, 0.8);
    font-size: 2.5vh;
    font-weight: 600;
    padding: .3vh 1vw;
    margin-top: 1.5vh;
    white-space: nowrap;
    width: max-content;
}

.img-planet.completed {
    /*background: rgba(88, 204, 5, 0.30);*/
    /*border-radius: 9999px;*/
    /*border: 6px solid*/
}

.img-planet-elementary.completed {
    background: rgba(88, 204, 5, 0.30);
    border-radius: 9999px;
    border: 6px solid
}

.img-planet-elementary {
    padding: 8px;
}

.img-planet-elementary.inprogress {
    border-color: transparent;
}

.label-level img {
    display: none;
    /*width: 20px;*/
    /*height: fit-content;*/
    height: 1.1em;
    margin-right: 4px !important;
}

.label-level.completed .icon-completed,
.label-level.locked .icon-locked {
    display: inline-block;
}

/*.label-level.locked::before {*/
/*    content: "";*/
/*    background-image: url(../images/assets/lock-white.svg);*/
/*    background-size: contain;*/
/*    background-repeat: no-repeat;*/
/*    position: absolute;*/
/*    left: 24px;*/
/*    width: 1.2em;*/
/*    height: 1.2em;*/
/*}*/

.label-level.completed {
    border-radius: 200px;
    border: 2px solid rgba(19, 92, 209, 0.80);
    background: #FFFBFB;
    color: rgba(19, 92, 209, 0.80);
    /*padding-left: calc(1.2em + 24px);*/
}

/*.label-level.completed::before {*/
/*    content: "";*/
/*    background-image: url(../images/assets/icon-true.png);*/
/*    background-size: contain;*/
/*    background-repeat: no-repeat;*/
/*    position: absolute;*/
/*    left: 24px;*/
/*    width: 1.2em;*/
/*    height: 1.2em;*/
/*}*/

.level-label.locked {
    border-color: rgba(255, 255, 255, 0.40);
    background: rgba(255, 255, 255, 0.20);
    color: rgba(255, 255, 255, 0.50);
    padding-left: calc(2.5vh + 24px);
}

.level-label.locked::before {
    content: "";
    background-image: url(../images/assets/lock-white.svg);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: 10px;
    width: 1.2em;
    height: 1.2em;
}

.level-label.completed {
    border-color: #58CC05;
    background: rgba(88, 204, 5, 0.40);
    padding-left: calc(2.5vh + 24px);
}

.level-label.completed::before {
    content: "";
    background-image: url(../images/assets/icon-true.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: 10px;
    width: 1.2em;
    height: 1.2em;
}

.label-start {
    position: absolute;
    top: 7vh;
    left: 0;
    width: 100%;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity ease-out .5s;
}

.label-start span {
    display: inline-block;
    color: #fff;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 20px;
    padding: .5vh .8vw;
    font-size: .8vw;
    font-weight: 600;
    letter-spacing: 1px;
}

.planet:hover .label-start {
    visibility: visible;
    opacity: 1;
}


#pre-test {
    background-image: url(../images/kerukunan-cinta/bg-test.webp);
    background-size: 100%;
    background-position: top center;
    background-repeat: repeat-y;
    height: 100vh;
    overflow: auto;
}

#mission {
    background-image: url(../images/kerukunan-cinta/bg.webp);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    height: 100%;
    overflow: auto;
}

#profile{
    background-image: url(../images/kerukunan-cinta/bg.webp);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    height: 100%;
    overflow: auto;
}

.bg-leaderboard {
    background-image: url(../images/kerukunan-cinta/bg-leaderboard.webp);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    height: 100%;
    overflow: auto;
}

.pre-test-top-bar {
    margin-bottom: 26px;
    padding: 36px 36px 0;
    position: sticky;
    top: 0;
}

.top-bar-left {
    flex-direction: row;
}

.back-test {
    background-color: #6F42C1;
    border: 4px solid #5D37A1;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all ease-in-out .2s;
}

.title-page {
    margin-left: 16px;
    font-weight: 700;
    color: #fff;
    font-size: 20px;
    padding: 11px 32px;
    border-radius: 50px;
    border: 4px solid #98DDD6;
    background: #54C7BB;
}

.top-bar-right {
    margin-left: auto;
}

.timer {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
    padding: 10px 16px;
    border-radius: 50px;
    border: 4px solid #DFDFDF;
    background-color: #F8F9F0;
}

.timer img {
    width: 20px;
    margin-right: 8px;
}

.pretest-wrap {
    justify-content: center;
    margin-top: 20px;
    flex-direction: column;
    align-items: center;
}

.pretest-card {
    border-radius: 24px;
    width: 540px;
    padding: 24px;
    font-size: 18px;
    font-weight: 700;
    color: #001F3F;
    position: relative;
    margin-bottom: 40px;
    border: 4px solid #CFC0EA;
    background-color: #FEFEFC;
    box-shadow: 0px 10px 0px 0px rgba(255, 255, 255, 0.15);
}

.pretest-number {
    position: absolute;
    top: 6px;
    left: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    border-radius: 50%;
    border: 2px solid #98DDD6;
    background: #54C7BB;
}

.pretest-question {
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 16px;
    padding: 0 2vw;
    position: relative;
    top: -14px;
}

.pretest-question img {
    margin-top: 8px;
}

.quizOption {
    font-size: 16px;
    text-align: left;
    font-weight: 700;
    margin-bottom: 6px;
}

.quizLabel {
    border: 4px solid #CFCFC8;
    border-radius: 50px;
    padding: 12px 24px;
    cursor: pointer;
    transition: all ease-in .2s;
    display: flex;
    align-items: center;
}

.quizOption input[type="radio"] {
    display: none;
}

.quizOption input[type="radio"]:checked + .quizLabel {
    border: 4px solid #6F42C1;
    background-color: rgba(111, 66, 193, 0.2);
}

.choiceText {
    color: #0A0A0A;
}

.choiceAl {
    color: #6F42C1;
}

.submit-answers {
    margin-bottom: 30px;
}

.submit-answers button {
    font-weight: 700;
    font-size: 20px;
    color: #fff;
    transition: all ease-in-out .2s;
    padding: 12px 48px;
    border-radius: 20px;
    border: 4px solid #8762CB;
    background-color: #6F42C1;
}

#chapter- {
    background-image: url('../images/assets/bg-chapters.svg');
    background-position: top right;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100vh;
}

.nav-top-bar {
    background: #fff;
    height: 84px;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0 56px;
    position: relative;
    /*z-index:10;*/
}

.nav-top-bar.sticky {
    position: sticky;
    top: 0;
    z-index: 30;
}

.nav-top-bar .save-profile {
    padding: 6px 18px;
    font-size: 20px;
}

.btn-back-arr {
    /*position: absolute;*/
    left: 56px;
    top: 25px;
    background: transparent;
}
.btn-back-arr img {
    max-width: 40px;
}

.vocab-review-button {
    position: absolute;
    right: 56px;
    /*top: 25px;*/
    background: transparent;
}

.posttest-back {
    top: unset;
}
.posttest-back img{
    height: 32px;
}

@media (width >= 62rem) {
    .posttest-back img{
        height: 5.2dvh;
    }
}


.semester-option a,
.semester-option button {
    transition: all ease-in-out .2s;
    color: #fff;
    font-size: 14px;
    padding: 8px 22px;
    margin: 0 12px;
    font-weight: 600;
    position: relative;
    line-height: 22px;

    border-radius: 200px;
    background: #178400;
}

.vocab-review-button {
    transition: all ease-in-out .2s;
    border: 3px solid #5D37A1;
    background: white;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05);
    color: #5D37A1;
    font-size: 20px;
    border-radius: 50px;
    padding: 12px 32px;
    /*margin: 0 12px;*/
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: capitalize;
    /*position: relative;*/
}

#vocab-review-wrap {
    display: flex;
    width: 80%;
    padding-bottom: 40px;
    margin: 16px auto;
    flex-direction: column;
}

.vocab-card {
    display: grid;
    grid-template-columns: repeat(2, 50%);
    gap: 8px;
    width: 100%;
    background: white;
    border-radius: 0 24px 24px 24px;
}

.tab-content {
    display: none;
    padding: 24px;
    width: 100%;
    background: white;
    border-radius: 0 24px 24px 24px;
}

.tab-content.active {
    display: block;
}
.tab-content h1 {
    display: block;
    margin-bottom: 16px;
}

.vocab-item {
    display: flex;
    padding: 16px;
    justify-content: start;
    align-items: center;
    gap: 20px;
    align-self: stretch;
    border-radius: 8px;
    border: 2px solid #EDEDED;
    flex-direction: row;
}

.vocab-item img {
    width: 52px;
    height: 52px;
    cursor: pointer;
}

.vocab-text {
    display: flex;
    flex-direction: column;
    /*gap: 8px;*/
    overflow-wrap: anywhere;
}

.vocab-text p {
    color: #161616;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
}

.vocab-grammar-tabs {
    width: 360px;
    padding-left: 24px;
    padding-right: 24px;
    background: white;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 70px;
    display: inline-flex
}

.TabsContainer {
    align-self: stretch;
    border-radius: 12px;
    justify-content: flex-start;
    align-items: center;
    display: inline-flex
}

.TabsContainer .tab-button {
    flex: 1 1 0;
    padding-top: 18px;
    overflow: hidden;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 18px;
    display: inline-flex;
    opacity: 0.5;
    cursor: pointer;
}

.TabsContainer .tab-button.active {
    opacity: 1;
}

.tab-button .label {
    text-align: center;
    color: #6F42C1;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.16px;
    word-wrap: break-word
}

.indicator-tab-active {
    width: 48px;
    height: 3px;
    background: #6F42C1;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    opacity: 0;
}
.TabsContainer .tab-button.active .indicator-tab-active {
    opacity: 1;
}

.grammar-card {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.grammar-item {
    align-self: stretch;
    padding: 22px;
    border-radius: 8px;
    outline: 2px #EDEDED solid;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    /*gap: 18px;*/
    display: flex
}

.grammar-item-title-wrap {
    align-self: stretch;
    padding-bottom: 18px;
    border-bottom: 1px #D9D9D9 solid;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 2px;
    display: flex
}

.grammar-item-title-wrap .title {
    align-self: stretch;
    color: #6F42C1;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 26px;
    word-wrap: break-word
}

.grammar-item-title-wrap .label {
    padding-left: 6px;
    padding-right: 6px;
    background: linear-gradient(151deg, #F5F5F5 0%, #DADADA 100%);
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    display: inline-flex;
    color: #525252;
    font-size: 14px;
    font-weight: 500;
    line-height: 26px;
    word-wrap: break-word
}

.semester-option {
    margin: 0 auto;
    text-align: center;
    position: relative;
}

.semester-option a.no-active,
.semester-option button.no-active {
    color: #393939;
    background-color: #fff;

    border-radius: 200px;
    border: 2px solid rgba(224, 220, 220, 0.80);
}

.windmills-house {
    background: url('../images/assets/windmills.svg');
    width: 133px;
    height: 145px;
    position: absolute;
    bottom: 0;
    right: 26%;
}

.icon-kincir {
    position: absolute;
    top: -19px;
    left: 44px;
    width: 70px;
}

.ship-left {
    position: absolute;
    right: 450px;
    top: 160px;
    animation: 15s infinite shipLeft linear;
}



@keyframes shipLeft {
    0% {
        transform: translateX(0) rotate(-10deg);
    }
    50% {
        transform: translateX(100px) rotate(0deg);
    }
    55% {
        transform: translateX(110px) scaleX(-1) rotate(-10deg);
    }
    95% {
        transform: translateX(0px) scaleX(-1);
    }
    100% {
        transform: scaleX(1);
    }
}

.ship-long {
    position: absolute;
    right: 340px;
    top: 380px;
    animation: 60s infinite shipLong linear;
}

@keyframes shipLong {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(400px);
    }
    55% {
        transform: translateX(410px) scaleX(-1);
    }
    95% {
        transform: translateX(20px) scaleX(-1);
    }
    97% {
        transform: scaleX(1);
    }
    100% {
        transform: translateX(0)
    }
}

.ship-right {
    position: absolute;
    right: 260px;
    bottom: 450px;
    animation: 10s infinite shipRight linear;
}

@keyframes shipRight {
    0% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(80px) translateX(50px);
    }
}

.line-chapter {
    width: 260px;
    /*height:442px;*/
    position: absolute;
    bottom: 160px;
    left: 43%;
    background-image: url(../images/assets/line-chapter.svg);
    background-position: bottom center;
    background-size: cover;
    background-repeat: no-repeat;
}

.chapter-col {
    text-align: center;
    flex-direction: column;
    align-items: center;
}

.chapter-circle {
    width: 110px;
    height: 110px;
    position: relative;
    border: 6px solid #fff;
    margin-bottom: 12px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 6px 0px 0px rgba(255, 255, 255, 0.30);
}

.chapter-animals {
    margin-top: -50px;
    margin-left: -100px;
}

.chapter-animals .chapter-circle {
    background: #3DD8A0;
}

.chapter-col strong {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
}


.modal-hexa {
    background-image: url(../images/assets/popup-bg-hexa.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 900px;
    height: 450px;
    color: #fff;
    font-size: 20px;
    position: relative;
    padding: 3vw 4vw;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
}

.modal-hexa h2 {
    color: #fff;
    font-size: 32px;
    margin-bottom: 0;
    font-weight: 600;
}

.modal-hexa h3 {
    font-size: 18px;
    font-weight: 600;
    margin-top: 2vh;
}

.modal-hexa p span {
    color: #fff !important;
}

/*
.modal-hexa p {
    margin-bottom: 20px;
}*/
/*
.greeting-text-card {
    width: 73vh;
}*/

.greeting-text-card ul li {
    background-image: url("../images/assets/bullet-yellow.png");
    background-position: left center;
    background-repeat: no-repeat;
    padding-left: 1.5vw;
    background-size: 1.1vw;
}

.greeting-text-card ul li span {
    color: #FFFFFF !important;
}

.greeting-text-card ul li::marker {
    top: 10px;
}



#bg-content {
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}

.bg-video-lr {
    background-image: url(../images/assets/bg-video-learning.svg);
}

.bg-imageSound {
    background-image: url(../images/kerukunan-cinta/bg-lm.webp);
}

.bg-conversation-lr {
    background-image: url(../images/kerukunan-cinta/bg-lm.webp);
    background-position: center !important;
}

.text-instruction {
    background: rgba(0, 0, 0, 0.6);
    text-transform: uppercase;
    text-align: center;
    font-size: 16px;
    color: #fff;
    /*padding: 16px;*/
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.learn-progress-wrap {
    align-items: center;
    justify-content: center;
}

.line-progress {
    width: 520px;
    height: 12px;
    background: #D9D9D9;
    border-radius: 30px;
}

.seek-progress {
    height: 12px;
    border-radius: 30px;

    background: rgba(19, 92, 209, 0.80);
    box-shadow: 0px -4px 4px 0px #61B4FF inset;
}

.coin-progress {
    align-items: center;
    justify-content: center;
}


.glossaries-wrap {
    position: relative;
    z-index: 20;
}

.glossaries-wrap .icon-glossaries {
    cursor: pointer;
}

.glossaries-card {
    display: none;
    position: absolute;
    top: 90px;
    right: -24px;
    border-radius: 16px;
    border: 6px solid #FFF;
    background: #fff;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
}

.glossaries-card.show {
    display: block;
}

.glossaries-card:before {
    content: '';
    width: 38px;
    height: 19px;
    top: -24px;
    right: 34px;
    position: absolute;
    background: url(../images/assets/arr-top.png);
}

.glossaries-card h2 {
    background: #5898B8;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    padding: 8px;
    text-align: center;
    margin-bottom: 8px;
    border-radius: 16px 16px 0 0;
}

.list-glossaries {
    width: 240px;
    font-size: 16px;
    padding: 6px 12px;
}

.glossaries-id {
    font-weight: 600;
    margin-left: auto;
    text-align: right;
}

.glossaries-en {
    font-weight: 400;
}

.footer-navigation {
    background: rgba(57, 57, 57, 0.40);
    width: 100%;
    height: 76px;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 0 170px;
    align-items: center;
    justify-content: center;
    z-index: 0;
    gap: 12px;
}

.footer-navigation .back-btn {
    margin-right: auto;
}

.footer-navigation .next-btn {
    margin-left: auto;
}

.footer-navigation button {
    padding: 8px 32px;
    font-size: 18px;
    font-weight: 600;
    color: #0A0A0A;
    /*border: 4px solid transparent;*/
    background: white;
    border-radius: 50px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05);
}

.footer-navigation button.next-btn {
    color: #fff;

    border-radius: 200px;
    background: #178400;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px -3px 0px 0px rgba(0, 0, 0, 0.25) inset;
}

.footer-navigation button.try-again-btn {
    color: #fff;

    border-radius: 200px;
    background: #E52C2C;
    box-shadow: 0px -3px 0px 0px rgba(0, 0, 0, 0.25) inset, 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.footer-navigation button:disabled,
.footer-navigation button[disabled] {
    color: #C2C2C2;
    cursor: default;

    border-radius: 200px;
    background: #ECECEC;
    box-shadow: 0px -3px 0px 0px rgba(0, 0, 0, 0.25) inset, 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.learning-video {
    /*width: 51.125vw;*/
    height: 59.057dvh;
    margin: auto;
    border: 4px solid #fff;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    background: #D1CFCF;
}

.center-video {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    justify-items: center;
}

.modal-gems {
    width: 398px;
    padding: 24px;
    border-radius: 24px;
    border: 8px solid #8E6AD2;
    background: linear-gradient(180deg, #815CC5 0%, #5E4095 100%);
}

.modal-gems.wotd {
    border-radius: 24px;
    border: 4px solid #B288FF;
    background: linear-gradient(180deg, #9E47F5 0%, #4B0A5B 100%);
}

.modal-gems.failed-wotd {
    border-radius: 24px;
    border: 4px solid #B470CC;
    background: linear-gradient(180deg, #9944ED 0%, #272727 100%);
}

.failed-wotd .earned-gems {
    justify-content: space-evenly;
    align-items: center;
}

.modal-gems.wrong-answers {
    background: #fff;
    border-color: #EDEDED;
}

.wrong-answers .earned-gems {
    color: #333;
    min-height: 190px;
}

.wrong-answers .earned-gems .gems-number {
    margin-top: 10px;
    position: relative;
}

.wrong-answers .earned-gems .gems-number img {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

.earned-gems {
    text-align: center;
    color: #fff;
    letter-spacing: 1px;
    min-height: 270px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.earned-gems h3 {
    font-size: 24px;
}

.earned-gems h4 {
    font-size: 20px;
    font-weight: 400;
}

.earned-gems h4 .yellow {
    color: #FFD45D;
}

.earned-gems .gems-number {
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    position: absolute;
}

.earned-gems .gems-number img {
    display: inline-block;
}

.earned-gems .gems-number .gems-ttl {
    font-weight: 700;
    color: #fff;
    font-size: 20px;
    background: #4DB106;
    border-radius: 30px;
    padding: 4px 18px;
    position: absolute;
    right: 15%;
    top: 25%;
}

.number-question {
    font-size: 1.5vw;
    padding: 0.4vh 1.8vw;
    border: 4px solid #F5F5F5;
    margin: 0 auto;
    background: #fff;
    color: #404042;
    font-weight: 700;
    border-radius: 50px;
    width: fit-content;
    text-align: center;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
}

.main-quiz-wrap {
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 40px;
}

.card-quiz {
    text-align: center;
    background: #fff;
    margin: 0 8px;
    border-radius: 18px;
    border: 6px solid #FFFDEE;
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.25);
}

.img-quiz {
    padding: 30px 0;
}

.img-quiz .question-image {
    display: inline-block;
    width: 60%;
}

.name-img {
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 16px;
    background: #EAEAEA;
    padding: 6px 8px;
    text-transform: uppercase;
    border-radius: 14px 14px 0 0;

    /*text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;*/
}

.name-img .name-img-label {
    max-height: 44px;
    overflow-y: auto;
}

.name-img-label::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #c5c5c5;
    border-radius: 10px;
}

.name-img-label::-webkit-scrollbar-thumb {
    background: #FFD42F;
    border-radius: 10px;
}

.name-img-label::-webkit-scrollbar-thumb:hover {
    background: #58CC05;
}

.name-img-label::-webkit-scrollbar {
    width: 3px;
}

.action-quiz {
    background: #FFD42F;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 6px 2px;
    text-align: center;
    border-radius: 0 0 14px 14px;
    transition: 0.3s;
    display: flex;
}

.action-quiz .btn-audio-listen {
    display: flex;
    align-items: center;
    margin: 0 auto;
    width: 100%;
    justify-content: center;
    background: transparent;
}

.text-quiz {
    font-size: 3.75vw;
    font-weight: 700;
    width: 100%;
    height: 20.43vh;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

.quiz-phonics .card-quiz {
    margin: 0 0 12px 0 !important;
}

.card-phonics .action-quiz .btn-audio-listen {
    font-size: 1.25vw !important;
}

.card-phonics .action-quiz .btn-audio-listen img {
    width: 1.875vw !important;
}

.dialogue-wrap {
    width: 78.1vw;
    height: 61.05vh;
    padding: 4.8vh 1.5vw;
    margin: auto auto;
    border-radius: 24px;
    border: 6px solid #FFFDEE;
    background: rgba(22, 22, 22, 0.80);
}

.quiz-complete-story .dialogue-wrap {
    border: 6px solid white;
}

.dialogue-wrap .scroll-wrapper {
    padding: 0 1.5vw 0 0 !important;
}

.dialogue-wrap .inside {
    height: 100%;
    overflow-y: scroll;
}

.chat-wrap {
    flex-direction: row;
}

.chat-wrap.chat-right-wrap {
    flex-direction: row-reverse;
}

.avatar-chat-box {
    margin-right: .7vw;
    flex-basis: 6vw;
    flex-grow: 0;
    flex-shrink: 0;
}

.avatar-chat-box img {
    width: 100%;
    border-radius: 6px;
}

.text-chat-box {
    font-size: 1.25vw;
    font-weight: 700;
    letter-spacing: 1px;
}

.chat-name {
    color: #fff;
}

.chat-text {
    margin-top: 0;
    padding: 1vh 0.8vw;
    background: #fff;
    border-radius: 0 6px 6px 6px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.chat-right-wrap .avatar-chat-box {
    margin-right: 0;
    margin-left: 0.93vw;
}

.chat-right-wrap .chat-text {
    border-radius: 6px 0 6px 6px;
}

.chat-right-wrap .chat-name {
    text-align: right;
}

.chat-text.correct .drop-text-dialog:after,
.chat-text.incorrect .drop-text-dialog:after,
.complete-story-text .correct.drop-text-dialog:after,
.complete-story-text .incorrect.drop-text-dialog:after {
    position: absolute;
    right: -35px;
    top: 4px;
    width: 24px;
    height: 24px;
}

.chat-text.correct .drop-text-dialog,
.complete-story-text .correct.drop-text-dialog {
    background: transparent;
    border-color: #58CC05;
    margin-right: 26px;
    cursor: default;
}

.chat-text.correct .drop-text-dialog:after,
.complete-story-text .correct.drop-text-dialog:after {
    content: url(../images/assets/icon-true.png);
}

.complete-story-text .correct.content-drag-dialog {
    background: #58CC05;
}

.chat-text.correct .content-drag-dialog {
    background: #EAFADF;
}

.chat-text.incorrect .content-drag .text-drag,
.chat-text.correct .content-drag .text-drag,
.complete-story-text .incorrect.content-drag .text-drag,
.complete-story-text .correct.content-drag .text-drag {
    border-radius: 5px;
    height: 100%;
    display: flex;
    align-items: center;
}

.chat-text.correct .content-drag .text-drag,
.complete-story-text .correct.content-drag .text-drag {
    background: #EAFADF;

}

.chat-text.incorrect .drop-text-dialog .no_,
.chat-text.correct .drop-text-dialog .no_,
.complete-story-text .incorrect .drop-text-dialog .no_,
.complete-story-text .correct.drop-text-dialog .no_ {
    color: #fff;
    padding: 0 10px;
}

.chat-text.incorrect .drop-text-dialog .no_,
.complete-story-text .incorrect.drop-text-dialog .no_ {
    background: #F15858;
}

.chat-text.correct .drop-text-dialog .no_,
.complete-story-text .correct.drop-text-dialog .no_ {
    background: #58CC05;
}

.chat-text.incorrect .drop-text-dialog,
.complete-story-text .incorrect.drop-text-dialog {
    background: transparent;
    border-color: #F15858;
    margin-right: 26px;
    cursor: pointer;
}

.chat-text.incorrect .drop-text-dialog:after,
.complete-story-text .incorrect.drop-text-dialog:after {
    content: url(../images/assets/icon-false.png);
}

.chat-text.incorrect .content-drag-dialog,
.complete-story-text .incorrect.content-drag-dialog {
    background: #EAFADF;
}

.chat-text.incorrect .content-drag .text-drag,
.complete-story-text .incorrect.content-drag .text-drag {
    background: #FDF2F2;
}

.complete-story-text .incorrect .drop-text-dialog,
.complete-story-text .correct.drop-text-dialog {
    margin-right: 30px;
}

.quiz-dialogue-complete .container {
    display: flex;
    flex-direction: row;
}

.quiz-dialogue-complete .dialogue-wrap {
    margin-right: 1.25vw;
    width: 45.6vw;
    position: relative;
}

.dialogue-drag {
    margin-left: auto;
    border-radius: 24px;
    border: 6px solid #FFFDEE;
    background: #FFD42F;
    width: 31.25vw;
    height: 61.05vh;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05);
    /*padding-bottom: 2px;*/
    /*overflow-y: auto;*/
}

.dialogue-drag h2 {
    font-weight: 700;
    font-size: 1.4vw;
    background: #FFF0B7;
    padding: 2.4vh 1.5vw;
    text-align: center;
    border-radius: 18px 18px 0 0;
}

.drag-slot {
    padding: 4px 16px;
}

.dragList {
    font-weight: 700;
    color: #161616;
    border-radius: 12px;
    background: #FFF;
    border: 4px solid #F5F5F5;
    /*margin: 12px 0;*/
    margin: 8px 0;
    height: 6.4vh;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

#list-drag-complete-dialogue .dragList {
    min-height: 6.4vh !important;
    height: auto !important;
}


.dragList .content-drag {
    background: #fff;
    width: 100%;
    height: 100%;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    font-size: 1.25vw;
    display: flex;
    align-items: center;
}

.content-drag .text-drag {
    width: fit-content;
    padding: 0 12px;
}

.dragList .no_ {
    width: 34px;
    height: 100%;
    text-align: center;
    background: #F5F5F5;
    padding: 0 12px;
    display: flex;
    align-items: center;
    border-radius: 8px 0 0 8px;
}

.center-spelling {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.drop-text-dialog {
    background: #EDEDED;
    border-radius: 6px;
    border: 2px solid #E0E0E0;
    min-width: 7.8vw;
    min-height: 4.5vh;
    position: relative;
}

.complete-story-text .drop-text-dialog .content-drag-dialog {
    height: 4.5vh;
}

.drop-text-dialog .content-drag-dialog {
    border-radius: 6px;
    background: #fff;
    height: 100%;
}

.center-dialogue {
    width: 79%;
    display: flex;
    margin: auto;
}

.drop-text-dialog:before {
    content: '?';
    position: absolute;
    top: 3%;
    left: 50%;
    /*margin-left:-6px;*/
    color: #6F42C1;
    font-size: 1.5vw;
}

.drop-text-dialog .no_ {
    padding: 0 12px;
    height: 100%;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    border-radius: 4px 0 0 4px;
}

.drop-text-dialog .content-drag {
    height: 100%;
    display: flex;
    align-items: center;
    /*background: #EAFADF;*/
}

.content-drag-dialog {
    align-items: center;
    border-radius: 12px;
    /*background: #F5F5F5;*/
    position: relative;
}

.arrange-sentence .spelling-black-screen{
    width: 100%;
}

.spelling-black-screen {
    backdrop-filter: blur(5px);
    background: rgba(0, 0, 0, .6);
    min-width: 400px;
    width: fit-content;
    margin: 0 auto;
    text-align: center;
    border-radius: 24px;
    border: 6px solid #FFF;
}

.arrange-sentence-black-screen {
    backdrop-filter: blur(5px);
    background: rgba(0, 0, 0, .6);
    width: fit-content;
    margin: 0 auto;
    text-align: center;
    border-radius: 24px;
    border: 6px solid #FFF;
    min-width: 70%;
}

.spelling-black-screen h2 {
    background: #fff;
    padding: 1.9vh 1.8vw;
    font-size: 1.5vw;
}

.arrange-sentence-black-screen h2 {
    background: #fff;
    padding: 1.9vh 1.8vw;
    font-size: 1.5vw;
}

.drop-spelling-wrap {
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3.84vh;

    padding: 5.69vh 1vw 6.61vh 1vw;
}

.spelling-line {
    justify-content: center;
    /*margin: 18px 8px;*/
}

.arrange-sentence-line {
    justify-content: center;
    min-height: 31px;
}

.drag-spelling-box,
.drop-spelling-box {
    width: 3.3vw;
    height: 3.3vw;
    /*height: 6.7vh;*/
    margin: 0 6px;
    position: relative;
    border-radius: 1vw;
}

.drag-arrange-sentence-box,
.drop-arrange-sentence-box {
    width: fit-content;
    height: 3.3vw;
    /*height: 6.7vh;*/
    margin: 0 6px;
    position: relative;
    border-radius: 1vw;
}

.drop-spelling-box {
    border: 3px dashed #fff;
    position: relative;
}

.drop-arrange-sentence-box {
    border: 3px dashed #fff;
    position: relative;
    min-width: 80px;
}

.drop-spelling-box .drag-spelling-text {
    /*border-radius:9px;*/
}

.spelling-yellow-screen {
    border-radius: 24px;
    border: 6px solid #FFFDEE;
    background: #FFD42F;
    padding: 2.8vh 3.1vw;
    min-width: 300px;
    width: fit-content;
    z-index: 5;
    position: relative;
    margin: -30px auto 0 auto;
    text-align: center;
}

.arrange-sentence-yellow-screen {
    border-radius: 24px;
    border: 6px solid #FFFDEE;
    background: #FFD42F;
    padding: 2.8vh 3.1vw;
    min-width: 70%;
    width: fit-content;
    z-index: 5;
    position: relative;
    margin: -30px auto 0 auto;
    text-align: center;
}

.spelling-yellow-screen .spelling-line {
    margin: 0px 0;
}

.arrange-sentence-yellow-screen .arrange-sentence-line {
    margin: 0px 0;
}

.drag-spelling-wrap {
    flex-direction: column;
    gap: 2.40vh;
}

.card-phonics {
    width: 20vw;
    height: 26.44vh;
    /*display: flex;*/
    /*justify-content: center;*/
    /*flex-direction: column;*/
    /*align-items: center;*/
}

.card-phonics .action-quiz {
    height: 5vh !important;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.25vw !important;
    padding: 0;
}

.card-phonics .text-quiz {
    font-size: 2.75vw !important;
    height: 19.6vh;
}

.drag-spelling-box {
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.drag-arrange-sentence-box {
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.drag-spelling-text {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8vw;
    font-weight: 700;
    cursor: pointer;
}

.drag-arrange-sentence-text {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8vw;
    font-weight: 700;
    cursor: pointer;
    padding: 16px;
}

.drop-spelling-box.false {
    border: 3px solid #F15858;
}

.drop-arrange-sentence-box.false {
    border: 3px solid #F15858;
}

.drop-spelling-box.false:before {
    content: url(../images/assets/icon-false.png);
}

.drop-arrange-sentence-box.false:before {
    content: url(../images/assets/icon-false.png);
}

.drop-spelling-box.true {
    border: 3px solid #58CC05;
}

.drop-arrange-sentence-box.true {
    border: 3px solid #58CC05;
}

.drop-spelling-box.true:before {
    content: url(../images/assets/icon-true.png);
}

.drop-arrange-sentence-box.true:before {
    content: url(../images/assets/icon-true.png);
}

.drop-spelling-box.false:before,
.drop-spelling-box.true:before {
    position: absolute;
    top: -30px;
    left: 50%;
    width: 20px;
    height: 20px;
    margin-left: -13px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}

.drop-arrange-sentence-box.false:before,
.drop-arrange-sentence-box.true:before {
    position: absolute;
    top: -30px;
    left: 50%;
    width: 20px;
    height: 20px;
    margin-left: -13px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}

.drop-arrange-sentence-box.false:before,
.drop-arrange-sentence-box.true:before {
    position: absolute;
    top: -30px;
    left: 50%;
    width: 20px;
    height: 20px;
    margin-left: -13px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}

.title-pretest {
    color: #0A0A0A;
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

.check-remember {
    color: #525252;
    font-weight: 500;
    text-align: left;
}

.login-method {
    margin-top: 16px;
    border-radius: 12px;
    border: 1px solid #E0E0E0;
}

.login-code {
    font-size: 16px;
    font-weight: 600;
    color: #7EA800;
    padding: 16px;
}

.link-login-code {
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.link-login-code img {
    width: 20px;
    margin-left: 4px;
}

/*
.link-login-code:hover{
	color: #fc6128;
}
*/

.language-wrap {
    position: absolute;
    top: 18px;
    right: 40px;
    cursor: pointer;
    z-index: 15;
    display: flex;
    align-items: center;
    gap: 8px;
}

.language {
    min-width: 140px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: #fff;
    border-radius: 20px;
    padding: 8px 12px;
    /*border: 1px solid #9E9E9E;*/
}

.language:after {
    background-image: url("../images/assets/chevron-down.png");
    background-position: center;
    background-size: cover;
    content: "";
    width: 20px;
    height: 20px;
    position: relative;
}

.language-wrap ul li span,
.language span {
    margin: 0 8px;
}

.language-wrap ul {
    background: #fff;
    border-radius: 20px;
    padding: 8px;
    position: absolute;
    top: 46px;
    right: 0px;
    display: none;
    min-width: 170px;
    border: 1px solid #9E9E9E;
}

.language-wrap ul.show {
    display: block;
}

.language-wrap ul li {
    display: flex;
    font-weight: 600;
    padding: 4px 12px;
    border-bottom: 1px solid #ddd;
}

.language-wrap ul li:first-child {
    padding-bottom: 12px;
}

.language-wrap ul li:last-child {
    border: 0;
    /*margin-bottom: 0;*/
    margin-top: 4px;
}

.welcome-message {
    width: 440px;
    background: #fff;
    border-radius: 12px;
    text-align: center;
    overflow: hidden;
    font-size: 16px;
    font-weight: 500;
}

.welcome-message .banner-message {
    margin-bottom: 18px;
}

.welcome-message-text {
    padding: 16px;
}

.welcome-message-text .sound-onboard {
    margin-left: auto;
    margin-right: 0;
}

.sound-onboard {
    max-width: 2.2vw;
    height: unset !important;
    cursor: pointer;
    left: 0 !important;
    top: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    transition: none !important;
}

.sound-onboard:hover {
    rotate: none !important;
}

.welcome-message-text strong {
    font-size: 18px;
    margin-bottom: 8px;
    display: inline-block;
}

.welcome-action {
    margin-top:18px;
    padding: 0 16px;
}

.welcome-action .btn-blue {
    margin-bottom: 12px;
}

.skip-intro {
    cursor: pointer;
    text-decoration: underline;
}

.modal-intro {
    position: absolute;
    visibility: hidden;
}

.modal-intro.show {
    visibility: visible;
}

#intro-gems {
    top: 135%;
    left: -55%;
    min-width: 365px;
}

#intro-mission {
    top: 135%;
    left: -55%;
    min-width: 365px;
}

#intro-lesson-map{
    top: 135%;
    width: 365px;
}


#intro-semester:before,
#intro-planets:before,
#intro-alphabet:before,
#intro-phonics:before,
#intro-test:before,
#intro-leaderboard:before,
#intro-mission:before,
#intro-gems:before {
    content: "";
    position: absolute;
    top: -14px;
    left: 45%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 8px 14px 8px;
    border-color: transparent transparent #178400 transparent;
}

#intro-lesson-map:before{
    content: "";
    position: absolute;
    top: -14px;
    right: 48%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 8px 14px 8px;
    border-color: transparent transparent #178400 transparent;
}

.text-intro {
    display: block !important;
    color: #fff;
    border-radius: 8px;
    background: #178400;
    backdrop-filter: blur(2px);
    padding: 16px;
    font-size: 14px;
    text-transform: none;
    text-align: left;
    font-weight: 500;

}

.text-desc-onboard {
    line-height: 22px;
    margin-top: 10px;
}

.title-onboard {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.title-sound-onboard {
    display: flex;
    align-items: center;
    gap: 4px;
}

.text-intro strong {
    font-weight: 600;
    display: inline-block;
    /*margin-bottom: 12px;*/
}

.intro-action {
    margin-top: 12px;
    align-items: center;
}

.intro-action-sound-wrap {
    display: flex;
    align-items: center;
    gap: 0.90vw;
}

.intro-action .action-btn {
    margin-left: auto;
    align-items: center;
}

.action-page {
    font-weight: 600;
}

.next-intro {
    /*border: 1px solid #fff;*/
    border-radius: 12px;
    padding: 8px 12px;
    /*margin-left: 12px;*/
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    background: #DB8B49;
}

.skip-intro-sm {
    cursor: pointer;
}

.nav-alphabet.show-intro {
    z-index: 25;
}

.nav-alphabet.show-intro:before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: none;
    backdrop-filter: blur(5px);
    background: rgba(0, 0, 0, .5);
}

.intro-profile .avatar-wrap,
.intro-gems_ .avatar-wrap,
.intro-lesson-map .avatar-wrap,
.intro-lesson-map .lesson-map-wrapper,
.intro-mission .avatar-wrap,
.intro-mission .mission-card,
.intro-mission .mission-card-intro,
.intro-mission .holiday-card,
.intro-mission .holiday-card-intro,
.intro-gems_ .gems-card {
    z-index: 15;
}

.intro-gems_ #intro-gems {
    visibility: visible;
}

.intro-alphabet .side-nav {
    z-index: 11;
}

.intro-phonics .side-nav,
.intro-leaderboard .side-nav,
.intro-test .side-nav{
    z-index: 11;
}

.intro-planets #intro-planets,
.intro-mission #intro-mission,
.intro-lesson-map #intro-lesson-map,
.intro-alphabet #intro-alphabet,
.intro-test #intro-test,
.intro-leaderboard #intro-leaderboard,
.intro-phonics #intro-phonics {
    visibility: visible;
}

.intro-alphabet .nav-alphabet,
.intro-phonics .nav-phonics,
.intro-leaderboard .nav-leaderboard,
.intro-test .nav-test{
    z-index: 20;
}

.intro-alphabet .nav-alphabet:before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px);
    background: rgba(0, 0, 0, .5);
}

.intro-phonics .nav-phonics:before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px);
    background: rgba(0, 0, 0, .5);
}

.intro-test .nav-test:before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px);
    background: rgba(0, 0, 0, .5);
}

.intro-leaderboard .nav-leaderboard:before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px);
    background: rgba(0, 0, 0, .5);
}

#intro-alphabet {
    width: 420px;
    top: 0;
    left: 110%;
}

#intro-phonics {
    width: 420px;
    top: 0;
    left: 110%;
}


#intro-test {
    width: 420px;
    top: 0;
    left: 110%;
}

#intro-leaderboard {
    width: 420px;
    top: 0;
    left: 110%;
}

#intro-alphabet:before {
    content: "";
    position: absolute;
    top: 30px;
    left: -14px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 14px 8px 0;
    border-color: transparent #135CD1 transparent transparent;
}

#intro-phonics:before {
    content: "";
    position: absolute;
    top: 30px;
    left: -14px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 14px 8px 0;
    border-color: transparent #135CD1 transparent transparent;
}

#intro-test:before {
    content: "";
    position: absolute;
    top: 30px;
    left: -14px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 14px 8px 0;
    border-color: transparent #135CD1 transparent transparent;
}

#intro-leaderboard:before {
    content: "";
    position: absolute;
    top: 30px;
    left: -14px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 14px 8px 0;
    border-color: transparent #135CD1 transparent transparent;
}

.intro-planets .planet-one {
    z-index: 15;
}

#intro-planets {
    width: 370px;
    /*left: -38%;*/
    /*left: -82%;*/
    bottom: -80%;
    top: 110%;
}

.intro-semester #intro-semester {
    visibility: visible;
    left: -15%;
    top: 85px;
    width: 365px;
    z-index: 20;
}

.intro-semester .intro_ {
    z-index: 20;
}

.intro-topics #intro-topics {
    visibility: visible;
    left: 100px;
    bottom: 0%;
    width: 365px;
    z-index: 20;
}

.intro-topics-lock .topics .chapter-lvl-02,
.intro-topics .topics .chapter-lvl-01 {
    z-index: 20;
}

#intro-topics:before {
    content: "";
    position: absolute;
    top: 43%;
    left: -14px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 14px 8px 0;
    border-color: transparent #178400 transparent transparent;
}

.intro-profile #intro-profile {
    visibility: visible;
    top: 135%;
    right: 0;
    width: 365px;
}

.intro-profile .avatar-card {
    z-index: 15;
}

#intro-profile:before {
    content: "";
    position: absolute;
    top: -14px;
    right: 70px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 8px 14px 8px;
    border-color: transparent transparent #178400 transparent;
}

.intro-topics-lock #intro-topics-lock {
    visibility: visible;
    top: 5%;
    left: 25%;
    z-index: 15;
    width: 365px;
}

#intro-topics-lock:before {
    content: "";
    position: absolute;
    top: 43%;
    left: -14px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 14px 8px 0;
    border-color: transparent #178400 transparent transparent;
}

#intro-semester {
    top: 14vh;
    left: -6vw;
}

.modal-hexa .mascott-girl {
    width: 34vh;
    position: absolute;
    right: 3vh;
    bottom: 1vh;
}

.modal-hexa.mission-complete {
    width: 112vh;
    height: 55vh;
}

.msg-wrong-pass {
    border-left: 2px solid #CF142B;
    background: rgba(207, 20, 43, 0.10);
    padding: 16px;
    color: #CF142B;
    flex-direction: row;
    align-items: center;
    text-align: left;
    margin-top: 16px;
}

.msg-wrong-pass img {
    margin-right: 12px;
}

.msg-wrong-pass span {
    font-weight: 500;
}

.eye-icon {
    background-image: url(../images/assets/visibility_off.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 2vh;
    right: 2vh;
    cursor: pointer;
}

.eye-icon.eye-slash {
    background-image: url(../images/assets/visibility.png);
}

.pretest-back {
    position: relative;
    width: 170px;
    justify-content: flex-end;
}

.pretest-back .btn-back-arr {
    position: unset;
}

.popup-starting {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(0, 0, 0, 0.6);
}

.starting-circle {
    cursor: pointer;
}

.text-starting {
    background: #DB8B49;
    border-radius: 50%;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#timerCountDown h5,
.starting-circle .text-starting {
    font-size: 16px;
    font-weight: 600;
    color: #FFF;
    text-shadow: 0 4px 4px rgba(22, 22, 22, 0.25);
}

#timerCountDown {
    border-radius: 50%;
    width: 160px;
    height: 160px;
    display: none;
    align-items: center;
    justify-content: center;
    background: #DB8B49;
    border: 20px solid #ecb17f;
}

#timerCountDown h3 {
    font-size: 80px;
    font-weight: 600;
    color: #fff;
}

.complete-desc {
    width: 100%;
    background: #C7DDE7;
    color: #444444;
    border-radius: 12px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
}

.lock-modal {
    max-width: 400px !important;
    margin-top: 30px;
    color: #404040;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.lock-modal .btn-secondary {
    color: #FFF;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

.lock-modal .title-modal-expired {
    color: #0A0A0A;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

.lock-modal .title-mistake {
    color: #0A0A0A;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

.lock-desc {
    margin-top: 6px;
    color: #404040;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.warning-modal .icon-warning {
    display: inline-block;
}
.daily-quest-modal .icon-warning {
    display: inline-block;
}

.warning-modal .btn-modal-wrap {
    display: flex;
    gap: 12px;
    margin-bottom: 0;
    margin-top: 22px;
}

.daily-quest-modal .btn-modal-wrap {
    display: flex;
    gap: 12px;
    margin-bottom: 0;
    margin-top: 22px;
}

.warning-modal a,
.warning-modal button {
    border-radius: 30px;
    font-size: 18px;
    width: 100%;
    padding: 8px;
}
.daily-quest-modal a,
.daily-quest-modal button {
    border-radius: 30px;
    font-size: 18px;
    width: 100%;
    padding: 8px;
}

.warning-modal {
    max-width: 600px;
}
.daily-quest-modal {
    max-width: 400px;
}

.warning-modal h3 {
    margin-bottom: 8px;
}
.daily-quest-modal h3 {
    margin-top: 24px;
    margin-bottom: 8px;
}

.daily-quest-modal .btn-modal-wrap .btn-white {
    color: #0A0A0A;
    border: 2px solid #E6E6E6;
    background: white;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05);
}

.warning-modal ol li {
    margin: 8px 0;
}

#profile-wrap {
    position: relative;
}

.profile-language {
    position: relative;
    justify-content: right;
    margin-top: 18px;
    padding: 0 56px;
    gap: 8px;
    flex-wrap: wrap;
}

#profile-wrap .language-wrap {
    /*right: 56px;
    top:24px;*/
    position: relative;
    top: 0;
    right: 0;
    margin-left: 18px;
}

.save-profile {
    width: auto;
    padding: 6px 28px;
}

.btn-tutorial {
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.40);
    color: #FFF;
    padding: 11px 12px;
    font-weight: 600;
    letter-spacing: 0.16px;
    display: flex;
    align-items: center;
    width: fit-content;
    /*position:absolute;
    top:24px;
    right: 220px;*/
}

.btn-tutorial img {
    margin-right: 6px;
}

.profile-content {
    width: 206vh;
    margin: 18px auto 0;
}

.current-profile {
    border-radius: 12px;
    border: 1px solid #8762CB;
    background: #6F42C1;
    padding: 2vh 1vw 0;
    color: #fff;
    width: 72vh;
    text-align: center;
}

.name-current-profile {
    font-size: 16px;
}

.photo-profile {
    width: fit-content;
    margin: 16px auto;
}

.photo-profile img {
    width: 8vw;
    border-radius: 50%;
    border: 4px solid #FFD09E;
}

.galaxy-gems {
    border-radius: 8px;
    background: #5D37A1;
    display: flex;
    padding: 1.1vh 1vw;
    align-items: center;
}

.gems-icon {
    margin-left: auto;
    display: flex;
    align-items: center;
    font-weight: 600;
}

.gems-icon img {
    width: 24px;
    margin-right: 8px;
}

.profile-label {
    text-align: left;
    margin: 10px 0;
}

.profile-label-text {
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid #8762CB;
    background: rgba(135, 98, 203, 0.30);
}

.choose-profile {
    margin-left: auto;
    color: #fff;
    width: 130vh;
    border-radius: 12px;
    padding: 2vh 1vw 0;
    border: 1px solid rgba(255, 255, 255, 0.30);
    background: rgba(22, 22, 22, 0.70);
}

.choose-profile .name-current-profile {
    text-align: center;
    margin-bottom: 10px;
}

.choose-profile-list {
    flex-wrap: wrap;
    padding: 8px 0;
    row-gap: 8px;
}

.choose-profile-img {
    display: flex;
    flex-basis: calc(100% / 3);
    justify-content: center;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.choose-profile-img img {
    cursor: pointer;
    border: 4px solid transparent;
    width: 7vw;
    margin: 0 auto;
}

.choose-profile-img strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-top: 4px;
    letter-spacing: 1px;
    text-align: center;
}

.choose-profile-img .inside {
    position: relative;
    transition: all ease-in-out .2s;
}

.choose-profile-img.select .inside:before {
    background-image: url(../images/assets/checked-white.png);
    background-color: #6F42C1;
    background-size: contain;
    background-position: center;
    width: 32px;
    height: 32px;
    position: absolute;
    top: 0;
    right: 8px;
    content: "";
    border-radius: 50%;
}

.choose-profile-img.select img {
    border: 4px solid #fff;
    border-radius: 50%;
}

.teacher-notif-content {
    width: 440px;
    background: #fff;
    border-radius: 12px;
    text-align: center;
    overflow: hidden;
    font-size: 16px;
    font-weight: 500;
    padding: 16px;
    position: relative;
}

.teacher-notif-content .close-modal {
    top: 1vh;
    right: 0vh;
}

.teacher-notif-content img {
    display: inline-block;
}

.assign-test-name {
    padding: 8px 12px;
    border-radius: 50px;
    background: rgba(97, 180, 255, 0.20);
    color:#135CD1;
    font-size: 18px;
    font-weight: 600;
    margin: 8px 0;
    display: inline-block;
}

.teacher-assignment-action {
    margin-top: 16px;
}

#list-pretest {
    margin-bottom: 80px;
}

.modal-score {
    width: 520px;
}

.modal-score-top {
    background: url("../images/assets/bg-score-top.png") no-repeat bottom center;
    width: 100%;
    /*height: 70px;*/
}

.modal-score-middle {
    background: url("../images/assets/bg-score-mid.png") repeat-y bottom center;
    width: 100%;
    text-align: center;
    padding: 26px 24px;
}

.modal-score-bottom {
    background: url("../images/assets/bg-score-bot.png") no-repeat bottom center #fff;
    width: 100%;
    /*height: 37px;*/
    padding: 0 24px 24px;
    border-radius: 0 0 30px 30px;
}

.modal-score-top .star-rank-wrap {
    margin: unset;
}

.modal-score-bottom .btn-modal-wrap {
    margin: 0;
}

.login-page #rotate-screen {
    display: none;
}

#rotate-screen {
    display: none;
    z-index: 9999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    color: #fff;
    text-align: center;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    font-size: 18px;
}

#rotate-screen strong {
    display: block;
    font-size: 60px;
    line-height: 52px;
}

#rotate-screen span {
    font-size: 34px;
    line-height: 28px;
}

@media only screen and (max-width: 1024px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
    #rotate-screen {
        display: flex;
    }
}

.quiz-coloring .container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.popover {
    position: absolute;
    top: -10vh;
    left: 18.9vw;
    min-width: 25vw;
    display: none;
    z-index: 12;
}

.popover-basic {
    position: absolute;
    top: -4vh;
    left: 18.9vw;
    min-width: 25vw;
    display: none;
    z-index: 12;
}

.popover-test {
    position: absolute;
    top: -4vh;
    left: 18.9vw;
    min-width: 25vw;
    display: none;
    z-index: 12;
}

.popover.show {
    display: inline-block;
}

.popover-basic.show {
    display: inline-block;
}

.popover-test.show {
    display: inline-block;
}

.popover:after {
    content: '';
    border-style: solid;
    border-width: 5px 8px 5px 0;
    border-color: transparent #747474 transparent transparent;
    left: -.5vw;
    position: absolute;
    top: 13.5vh;
}

.popover-basic:after {
    content: '';
    border-style: solid;
    border-width: 8px 16px 8px 0;
    border-color: transparent #ffffff transparent transparent;
    left: -.8vw;
    position: absolute;
    top: 7vh;
}

.popover-test:after {
    content: '';
    border-style: solid;
    border-width: 8px 16px 8px 0;
    border-color: transparent #ffffff transparent transparent;
    left: -1.2vw;
    position: absolute;
    top: 7vh;
}

.popover-nav a {
    font-size: 2.3vh;
    font-weight: 500;
    background-color: transparent !important;
    border-radius: 0 !important;
    border: 0 !important;
    text-transform: none;
    box-shadow: none !important;
    text-align: left;
    padding: 2vh 3.5vh !important;
    position: relative;
}

.popover-basic-nav a {
    font-size: 2.3vh;
    font-weight: 500;
    background-color: transparent !important;
    border-radius: 0 !important;
    border: 0 !important;
    text-transform: none;
    box-shadow: none !important;
    text-align: left;
    padding: 2vh 3.5vh !important;
    position: relative;
    color: #6F42C1;
}

.popover-test-nav a {
    font-size: 2.3vh;
    font-weight: 500;
    background-color: #F5F5F5 !important;
    border-radius: 8px !important;
    border: 1px #EDEDED solid !important;
    text-transform: none;
    box-shadow: none !important;
    text-align: left;
    padding: 2vh 3.5vh !important;
    position: relative;
    color: #6F42C1;
}

.popover-test-nav a.checked {
    background-color: rgba(84, 199, 187, 0.10) !important;
    color: #54C7BB;
}

.popover-test-nav a.checked strong {
    color: #54C7BB !important;
}

.popover-test-nav a.lock strong {
    color: #C2C2C2 !important;
}

.popover-test-nav a.lock p {
    color: #C2C2C2 !important;
}

.popover-nav a:before {
    content: '';
    position: absolute;
    width: 32px;
    height: 32px;
    top: 5.2vh;
    right: .5vh;
    background-image: url(../images/assets/expand_more-right.png);
}

.popover-basic-nav a:before {
    content: '';
    position: absolute;
    width: 32px;
    height: 32px;
    top: 5.2vh;
    right: .5vh;
    background-image: url(../images/assets/purple_expand_more.png);
    background-repeat: no-repeat;
}

.popover-test-nav a:before {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    top: 40%;
    right: .5vh;
    background-repeat: no-repeat;
}

/* Default icon */
.popover-test-nav a:before {
    /*transform: translateX(40%);*/
    background-image: url(../images/kerukunan-cinta/chevronright-icon.webp);
}

/* Lock class changes the icon to a lock icon */
.popover-test-nav a.lock:before {
    width: 16px;
    height: 16px;
    transform: translateX(-10%);
    /*transform: translateY(-50%); !* Adjust to exactly center vertically *!*/
    background-size: contain;
    background-image: url(../images/assets/lock.png);
    filter: invert(1) grayscale(100%) brightness(0) contrast(100%);
}

/* Checked class changes the icon to a checked icon */
.popover-test-nav a.checked:before {
    width: 16px;
    height: 16px;
    transform: translateX(-10%);
    /*transform: translateY(-50%); !* Adjust to exactly center vertically *!*/
    background-size: contain;
    background-image: url(../images/assets/check_circle.png);
}

.popover-card {
    border: 2px solid #747474;
    border-radius: 1.3vh;
    background: rgb(40, 40, 53);
    background: linear-gradient(93deg, rgba(40, 40, 53, 1) 27%, rgba(46, 196, 148, 1) 100%);
}

.popover-basic-card {
    /*border: 2px solid #747474;*/
    border-radius: 1.3vh;
    background: white;
}

.popover-test-card {
    /*border: 2px solid #747474;*/
    border-radius: 1.3vh;
    background: white;
}

.popover-nav {
    border-bottom: 2px solid #747474;
    position: relative;
}

.popover-basic-nav {
    border-bottom: 1px solid #EDEDED;
    position: relative;
}

.popover-test-nav {
    position: relative;
    padding: 12px;
}

.popover-nav.lock:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    border-radius: 0 0 1.3vh 1.3vh;
    background-color: rgb(0, 0, 0, .7);
    background-image: url(../images/assets/lock.png);
    background-position: center;
    background-repeat: no-repeat;
}

.popover-basic-nav.lock:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    border-radius: 0 0 1.3vh 1.3vh;
    background-color: rgb(0, 0, 0, .7);
    background-image: url(../images/assets/lock.png);
    background-position: center;
    background-repeat: no-repeat;
}

.popover-test-nav.lock:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    border-radius: 0 0 1.3vh 1.3vh;
    background-color: rgb(0, 0, 0, .7);
    background-image: url(../images/assets/lock.png);
    background-position: center;
    background-repeat: no-repeat;
}

.popover-nav:last-child {
    border-bottom: 0;
}

.popover-basic-nav:last-child {
    border-bottom: 0;
}

.popover-test-nav:last-child {
    border-bottom: 0;
}

.popover-basic-caption {
    color: #616161;
    font-size: 2.12vh;
    font-weight: 500;
    word-wrap: break-word;
    padding-right: 12px
}

.popover-test-caption {
    color: #616161;
    font-size: 2.12vh;
    font-weight: 500;
    word-wrap: break-word;
    padding-right: 12px
}

.elementary-zone {
    position: relative;
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
    /*z-index:2;*/
}

.elementary-course {
    /*width: 45vw;*/
    /*height: 38vw;*/
    margin: 0 auto;
    left: 4vw;
    position: relative;
}

.course-planet-wrap {
    background-image: url(../images/contents/track.png);
    background-repeat: no-repeat;
    background-position: top left;
    width: 35vw !important;
    height: 28vw;
    overflow: hidden;
    background-size: cover;
    transition: width ease-out .5s;
    margin-left: 20vw;
}

.level-planet {
    width: 7vw;
    text-align: center;
    position: absolute;
    cursor: pointer;
    overflow: visible;
}

.intro-planets .planet-earth {
    z-index: 11;
}

.planet-earth {
    /*left: 0;*/
    top: -3vh;

}

.planet-neptune {
    right: 0;
    top: 29vh;
}

.planet-jupiter {
    /*left: 0;*/
    bottom: -12vh;
}

.level-planet img {
    /*border: 1.7vh solid rgb(92 92 92 / 60%);*/
    border-radius: 50%;
    transition: all ease-out .6s;
}

.level-planet:hover img {
    rotate: 35deg;
}

.level-planet:hover img.sound-onboard {
    rotate: none !important;
}

.level-label {
    display: inline-block;
    border-radius: 50px;
    border: 2px solid #4B819D;
    background: rgb(20, 37, 71, .8);
    padding: .3vh 1vw;
    font-size: 2.5vh;
    font-weight: 600;
    color: #fff;
    margin-top: 1.5vh;
    white-space: nowrap;
}

.meteor-1 {
    position: absolute;
    top: 40vh;
    left: 85vw;
    width: 300px;
    height: 1px;
    transform: rotate(-45deg);
    background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
    animation: meteor 3.4s linear infinite;
}

.meteor-1:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 5px;
    border-radius: 50%;
    margin-top: -2px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 15px 3px #fff;
}

.meteor-3 {
    position: absolute;
    top: 30vh;
    left: 45vw;
    width: 300px;
    height: 1px;
    transform: rotate(-45deg);
    background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
    animation: meteor 6.5s linear infinite;
}

.meteor-3:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 5px;
    border-radius: 50%;
    margin-top: -2px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 15px 3px #fff;
}

@keyframes meteor {
    0% {
        opacity: 1;
        margin-top: -300px;
        margin-right: -300px;
    }
    12% {
        opacity: 0;
    }
    15% {
        margin-top: 300px;
        margin-left: -600px;
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

.level-planet .start-planet {
    position: absolute;
    top: 5.6vh;
    width: 100%;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: all ease-out 1s;
}

.level-planet .start-planet span {
    font-size: 1.9vh;
    color: #fff;
    background: #6F42C1;
    border-radius: 50px;
    padding: .4vh .5vw;
    font-weight: 600;
    display: inline-block;
}

.level-planet:hover .start-planet {
    opacity: 1;
    visibility: visible;
}

.text-topics {
    text-align: left;
    margin-top: 12px;
}

.text-topics ul li {
    margin-bottom: 8px;
}

.text-topics ul li img {
    display: inline-block;
    vertical-align: middle;
    width: 2vh;
}

.elementary {
    background-position: top right;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.elementary-lvl07 {
    background-image: url("../images/contents/elementary-lvl-07.png");
}

.elementary-lvl08 {
    background-image: url("../images/contents/elementary-lvl-08.png");
}

.elementary-lvl09 {
    background-image: url("../images/contents/elementary-lvl-09.png");
}

.elementary-lvl10 {
    background-image: url("../images/contents/elementary-lvl-10.png");
    background-position: bottom center;
}
.elementary-lvl11 {
    background-image: url("../images/contents/elementary-lvl-11.png");
    background-position: bottom center;
}
.elementary-lvl12 {
    background-image: url("../images/contents/elementary-lvl-12.png");
    background-position: bottom center;
}

#elementary-path path {
    fill: none;
    stroke: #fff;
    stroke-width: 10;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}

#elementary-path {

}

.topics-route {
    width: 62vw;
    top: 4vh;
    position: relative;
}

#elementary-chapter .nav-top-bar {
    width: 100%;
    top: 0;
    left: 0;
    z-index: 3;
    background: transparent;
    height: 15vh;
    position: fixed;
    align-items: end;
}

#elementary-chapter.intro-semester .nav-top-bar {
    z-index: 11;
}

#elementary-chapter .nav-top-bar .nav-top-bar-fix {
    background: linear-gradient(0deg, rgba(108, 108, 108, 0.70) 0%, rgba(108, 108, 108, 0.70) 100%), rgba(37, 37, 37, 0.60);
    background-blend-mode: overlay, normal;
    backdrop-filter: blur(10px);
    height: 12vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 1vh;
    position: fixed;
    border-radius: 3vh;
    width: 97vw;
}

.nav-top-bar-fix .btn-back-arr {
    left: .5vw;
    top: 2.4vh;
    z-index: 5;
}
.nav-top-bar-fix .vocab-review-button {
    right: .5vw;
    /*top: 2vh;*/
    z-index: 5;
}
.nav-top-bar-fix .vocab-review-button svg{
    /*width: 30px;*/
    /*height: 30px;*/
    height: 3vh;
    width: 3vh;

}

.title-review {
    font-size: 1.875vw;
    font-weight: 700;
    color: #000;
}

.title-review-intermediate {
    font-size: 1.875vw;
    font-weight: 700;
    color: #fff;
}

.nav-top-bar-fix .semester-option a {
    font-size: 3vh;
    padding: 1.6vh 2vw;
}

.nav-top-bar-fix .vocab-review-button {
    font-size: 3vh;
    padding: 1.6vh 2vw;
}

.topic-card {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
}

.topic-circle {
    position: relative;
    border: .2vw solid #fff;
    background: #C2C2C2;
    border-radius: 50%;
    width: 5.5vw;
    height: 5.5vw;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.20);
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
}

.topic-circle img {
    width: 3.5vw;
}

.topic-card.checked .topic-circle {
    background: #5898B8;
}

.topic-card.checked .topic-circle:after {
    content: '';
    z-index: 1;
    top: -1vh;
    right: -1vw;
    width: 5.2vh;
    height: 5.2vh;
    animation: 1.5s checked infinite;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(../images/assets/check_circle_border.png);
}

@keyframes checked {
    0% {

    }
    50% {
        transform: scale(1.1);
    }
    100% {

    }
}

.topic-card.current .topic-circle {
    background: #9F81D6;
    border-color: #8762CB;
    z-index: 6;
    animation: 1s topic-current infinite;
    box-shadow: 0 0 0 0 rgba(159, 129, 214, 0.60);
}

@keyframes topic-current {
    from {

    }
    to {
        box-shadow: 0 0 0 .8vw rgba(159, 129, 214, 0.60);
    }
}

.topic-01 {
    bottom: 30%;
    left: -5.6vw;
}

.topic-02 {
    top: -5vh;
    left: 1.3vw;
}

.topic-03 {
    bottom: 30%;
    left: 8vw;
}

.topic-04 {
    bottom: -12vh;
    left: 14.5vw;
}

.topic-05 {
    bottom: 30%;
    left: 21.6vw;
}

.topic-06 {
    top: -5vh;
    left: 28.3vw;
}

.topic-07 {
    top: 25vh;
    right: 14.7vw;
}

.topic-08 {
    bottom: -12vh;
    right: 7.5vw;
}

.topic-09 {
    top: 25vh;
    right: 1.1vw;
}

.topic-10 {
    top: -5vh;
    right: -6vw;
}


.topic-name {
    width: 12vw;
    position: relative;
    z-index: 6;
    margin-top: 1.5vh;
    text-align: center;
}

.topic-name span {
    border: .1vw solid #FFF;
    border-radius: 50px;
    padding: .9vh 1vw;
    color: #fff;
    display: inline-block;
    font-weight: 600;
    font-size: .8vw;
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
    background: rgba(22, 22, 22, 0.70);
    position: relative;
}

.topic-card.locked .topic-name span:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url(../images/assets/lock.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 1.5vw;
    border-radius: 50px;
    background-color: rgb(47 47 47 / 70%);
}

.topic-card.locked {
    cursor: default;
}

#elementary-chapter.intro-topics #intro-topics {
    left: 5vw;
    bottom: 18vh;
}

.intro-topics-lock .topic-02,
.intro-topics .topic-01 {
    z-index: 12;
}

#elementary-chapter.intro-topics-lock #intro-topics-lock {
    top: -5vh;
    left: 13vw;
}

#elementary-chapter.intro-semester #intro-semester {
    top: 12vh;
    left: -3vw;
}

.modal-insight {
    background: #fff;
    border-radius: .9vw;
    border: 6px solid #FFF;
    width: 55vw;
}

.head-modal {
    font-size: 20px;
    color: #404042;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    background: #DFF0F8;
    padding: 1vh 5vw;
    border-radius: .5vw .5vw 0 0;
    position: relative;
}

.head-modal .head-icon {
    position: absolute;
    top: -.5vw;
    left: -2vw;
    width: 3vw;
}

.head-modal .close-modal {
    top: .5vh;
    right: 0;
    width: 46px;
}

.content-insight {
    padding: 18px;
    max-height: 33vw;
    overflow: auto;
    margin-bottom: 12px;
    font-size: 18px;
}

.content-insight ul,
.content-insight ol {
    margin-bottom: 12px;
    margin-left: 20px;
}

.content-insight ul {
    list-style: disc;
}

.content-insight ol {
    list-style: decimal;
}

.content-insight .btn-modal-card {
    text-align: right;
}

.content-insight .btn-primary {
    padding: 6px 18px;
    font-size: 16px;
    font-weight: 600;
    background: #178400;
    color: #fff;
}

.modal-default {
    background: #fff;
    border-radius: 12px;
    min-width: 32vw;
    max-width: 43vw;
    padding: 1.5vw;
}

.modal-half-progress {
    background: #fff;
    border-radius: 12px;
    width: 440px;
    padding: 16px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
    display: inline-flex;
}

.modal-half-progress h2 {
    margin-bottom: unset;
    font-size: 20px;
    line-height: unset;
}

.modal-default .close-modal {
    top: 1.4vh;
    right: .5vh;
    width: 44px;
}

.warning-modal h2,
.default-modal-card h2 {
    font-size: 1.5vw;
    text-align: center;
    color: #0a0a0a;
    margin-bottom: 1vh;
    text-transform: uppercase;
}

.default-modal-card h3 {
    font-weight: 600;
    font-size: 1.2vw;
    color: #0a0a0a;
}

.default-modal-card strong {
    font-weight: 600;
    font-size: 16px;
}

.default-modal-card {
    font-size: 16px;
}

.default-modal-card p {
    margin-bottom: 1.3vh;
}

.default-modal-card .btn-modal-card {
    align-items: center;
}

.default-modal-card .btn-modal-card .btn-blue,
.default-modal-card .btn-modal-card .btn-primary {
    border-width: 3px;
    padding: 4px 32px;
    font-size: 18px;
    font-weight: 600;
    width: 40%;
}

.default-modal-card ul {

}

.left-text ul li,
.default-modal-card ul li {
    background-image: url("../images/assets/check.png");
    background-position: left 2px;
    background-repeat: no-repeat;
    padding-left: 1.5vw;
    background-size: 1.05vw;
    margin: 1vh 0;
}

.left-text {
    text-align: left;
    margin-top: 12px;
}

.highschool-level #intro-gems,
.elementary-level #intro-gems {
    /*min-width: 22vw;*/
    /*top: 10vh;*/
    /*left: -8.7vw;*/
}

.highschool-level #intro-planets,
.elementary-level #intro-planets {
    left: -110%;
    /*top: 23vh;*/
    top: calc(100% + 16px);
    position: absolute;
}

.middle-wrap {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

}

.middle-wrap.column {
    flex-direction: column;
}

.middle-wrap.row {
    flex-direction: row;
    flex-wrap: wrap;
}

.arrange-sentence {
    border-radius: 1vw;
    overflow: hidden;
    border: .24vw solid #fff;
}

.arrange-sentence .spelling-black-screen {
    border-width: 0;
    border-radius: 0;
}

.arrange-sentence h2 {
    padding: 1.4vh 2vw;
    font-size: 1.3vw;
    background: #fff;
    text-align: center;
}

.arrange-sentence .drop-spelling-wrap {
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.6vh;
    padding: 3vh 1vw;
    /*min-width: 54vw;*/
    width: 100%;
}

.drop-arrange-sentence-box,
.arrange-sentence .drop-spelling-box {
    border-width: .15vw;
}

.drop-arrange-sentence-box,
.arrange-sentence .drop-spelling-box {
    width: unset;
    min-width: 5vw;
    height: 2.4vw;
    margin: 0;
    border-radius: .4vw;
}

.arrange-sentence .spelling-line {
    gap: .5vw;
    align-items: center;
}

.arrange-sentence .spelling-yellow-screen {
    width: 100%;
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 3vh 1vw;
}

.drag-arrange-sentence-box,
.arrange-sentence .drag-spelling-box {
    width: fit-content;
    height: 2.4vw;
    margin: 0;
}

.drag-arrange-sentence-text,
.arrange-sentence .drag-spelling-text {
    font-size: 1.2vw;
    font-weight: 700;
    padding: 0 1vw;
    border-radius: .4vw;
    /*text-transform: capitalize;*/

}

.arrange-sentence .drag-spelling-wrap {
    gap: 1.5vh;
}

.arrange-sentence .drop-spelling-box .drag-spelling-text {
    border-radius: 0;
}

.arrange-sentence .drop-spelling-box:has(.drag-spelling-text) {
    border: 3px solid #fff;
}

.sentence-text {
    color: #fff;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 1.3vw;
}

/*Flip Card */
.flip-card-wrap {
    display: flex;
    flex-direction: row;
    justify-content: center;
    max-width: 70vw;
    margin: 2.5vh auto 0;
    gap: 1.5vw;
}

.flip-card {
    position: relative;
    max-width: 22vw;
    width: 100%;
    overflow: hidden;
    border-radius: 3vh;
    border: .7vh solid #FFFDEE;
    background: #fff;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.25);
}

.flip-card-front, .flip-card-back {
    display: block;
    width: 100%;
    text-align: center;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

}

.flip-card-back {
    transform: rotateY(180deg);
    position: absolute;
    top: 0;
    left: 0;
}

.flip-card-image {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    /*min-height: 30vh;*/
    max-height: 30vh;
    margin: 12px 0;
    object-fit: contain;
}

.flip-card-image img {
    width: 36vh;
}

.flip-card-front {
    padding: 1.5vh 1.5vh 0;
}

.flip-card-front .image-name {
    border-radius: 30px;
    background: #EDEDED;
    padding:0 8px;
    font-weight: 600;
    font-size: 1vw;
    margin: 0 auto;
    width: 100%;
    position: relative;
    height:35px;
    display:flex;
    align-items: center;
}

.flip-card-back {
    border: 1vh solid #5898b8;
    /*border-image: url("../images/assets/bg-border.jpg") 30 round;*/
    height: 100%;
    border-radius: 3vh 3vh 0 0;
    padding: 1.5vh 2.3vh;
}

.flip-card-inner {
    width: 100%;
    -webkit-transition: -webkit-transform 0.4s;
    -moz-transition: -moz-transform 0.4s;
    -o-transition: -o-transform 0.4s;
    transition: transform 0.4s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.flipped .flip-card-inner {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.flip-click {
    font-weight: 600;
    font-size: 1.2vw;
    text-align: center;
    cursor: pointer;
    background: #FFFDEE;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 1.5vh;
}

.flip-click img {
    margin-right: 8px;
    width: 1.7vw;
}

.audio-image-name{
    /*position: absolute;
    top: 4px;
    right: 6px;*/
    /*border-radius: 50%;*/
    /*background: #FFD42F;*/
    width: 26px;
    height: 26px;
    /*width: 1.79vw;
    height: 1.79vw;*/
    margin-left:auto;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer
}

.flip-listen-audio {
    font-size: 1.2vw;
    border-radius: 30px;
    background: #FFD42F;
    padding: 7px 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.flip-listen-audio img {
    width: 3vh;
    margin-left: 6px;
}

.flip-text {
    letter-spacing: 1px;
    text-align: left;
    margin-top: 1.5vh;
    overflow-y: auto;
    height: 25vh;
    display: flex;
    align-items: flex-start;
}

.flip-text::-webkit-scrollbar {
    width: 0;
}

.complete-story {
    counter-reset: list-number;
    max-height: 48.5vh !important;
    overflow-y: auto;
}

.complete-story .dragList {
    counter-increment: list-number;

}

.complete-story .dragList:before {
    content: counter(list-number);
    display: flex;
    align-items: center;
    font-size: 1.25vw;
    background: #f5f5f5;
    padding: 0 1vw;
}

.complete-story .dragList .content-drag {
    border-radius: 8px;
}

.complete-story-text {
    color: #fff;
    font-weight: 600;
    font-size: 1.25vw;
    letter-spacing: 1px;
    margin: 2.5vh 1vw 0 1.5vw;
    overflow-y: auto;
    max-height: 45vh;
}

.complete-story-text ul, ol {
    list-style: inside;
}

.complete-story-text p {
    line-height: 6vh;
    margin-bottom: 3vh;
}

.complete-story-text p.only-br {
    line-height: 2vh;
}
ul + p {
    margin-top: -13px;
    margin-bottom: 13px;
}

.complete-story-text p em,
.complete-story-text p span {
    color: #fff !important;
}

.complete-story-text p strong {
    color: #fff !important;
}

.complete-story-text .drop-text-dialog {
    width: fit-content;
    display: inline-block;
    min-width: 4vw;
    position: relative;
    top: 1.1vh;
    background: #fff;
}

.complete-story-text .drop-text-dialog:has(.content-drag-dialog) {
    top: 0;
}

.complete-story-text .drop-text-dialog:before {
    top: .1vh;
    left: 1.5vw;
    font-size: 1.2vw;
}

.complete-story-text .text-drag {
    color: #000;
    font-weight: 700;
}

.complete-story-text .scrollbar {
    max-height: 44vh !important;
    height: auto;
}

.complete-story::-webkit-scrollbar {
    width: 1px;
}

/*.complete-story::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
.complete-story::-webkit-scrollbar-thumb {
background: #FFD42F;
border-radius: 10px;
}
.complete-story::-webkit-scrollbar-thumb:hover {
background: #b30000;
}*/
.dialogue-drag .scroll-wrapper {
    padding: 4px 16px !important;
}

.quiz-complete-story .dialogue-wrap {
    padding: 0;
    position: relative;
}

.quiz-complete-story .center-dialogue {
    gap: 1.2vw;
}

.dialogue-wrap .story-title {
    background: #FFFDEE;
    text-align: center;
    /*text-transform: uppercase;*/
    font-size: 1vw;
    padding: 2vh 1vw;
    border-radius: 16px 16px 0 0;
}

.quiz-complete-story .dialogue-wrap .story-title {
    background: white;
    border-radius: 0;
}

.landscape-login {
    display: none;
}

.whatsapp a {
    display: flex;
    color: #fff;
    background: #25D366;
    border-radius: 30px;
    padding: 8px 12px;
    border: 1px solid #25D366;
}

.whatsapp a span {
    display: inline-block;
    margin-left: 6px;
    font-weight: 600;
}

.close-instruction {
    border-top: 1px solid #4B4B4B;
    width: 100%;
    margin-top: 6px;
    padding-top: 6px;
}

.close-instruction button {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    background: transparent;
}

.faq-wrapper {
    background-image: url(../images/assets/bg-pre-test.svg);
    background-size: 100%;
    background-position: top center;
    background-repeat: repeat-y;
    height: 100vh;
    padding-top: 32px;
    padding-bottom: 110px;
    overflow-y: auto;
}

.fag-list {
    display: flex;
    flex-direction: column;
    width: 800px;
    margin: 0 auto;
    gap: 24px;
}

.faq-list-card {
    background: #fff;
    border: 1px solid #EDEDED;
    border-radius: 8px;
    overflow: hidden;
}

.card-faq-title {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    padding: 16px;
    background: #F5F5F5;
}

.faq-list-content {
    border: 2px solid #EDEDED;
    border-radius: 8px;
    padding: 0 16px;
}

.faq-list-content-title {
    padding: 16px 0;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    flex-shrink: revert;
    cursor: pointer;
    position: relative;
}

.number-list {
    margin-right: 8px;
    display: inline-block;
}

.img-arrow-icon {
    margin-left: auto;
    flex: 0 0 20px;
}

.faq-list-wrap {
    padding: 16px;
    display: flex;
    gap: 8px;
    flex-direction: column;
}

.faq-accordion-content {
    font-weight: 400;
    font-size: 16px;
    margin-bottom: 16px;
    display: none;
    color: #404040;
}

.faq-accordion-content-inside {
    display: flex;
    gap: 10px;
    flex-direction: column;
}

.faq-accordion-content-inside ol {
    list-style: decimal;
    margin-left: 20px;
}

.faq-accordion-content-inside ul {
    list-style: disc;
    margin-left: 20px;
}

.img-arrow-icon img {
    transition: all ease-in-out .2s;
}

.img-arrow-icon.accordion__rotate img {
    transform: rotate(180deg);
}

.nav-top-bar.faq-top-bar {
    text-align: center;
    display: grid;
    grid-template-columns: 20% 60% 20%;
}

.faq-top-bar .btn-back-arr {
    position: unset;
}

.action-right-top-bar .whatsapp {
    margin-right: 0;
    width: fit-content;
    margin-left: auto;
}

.faq-wrapper {
    -ms-overflow-style: none; /* Internet Explorer 10+ */
    scrollbar-width: none; /* Firefox */
}

.faq-wrapper::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
}


.phonics-topic-logo {
    width: 3vw !important;
}

.title-modal-expired {
    color: #0A0A0A;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: capitalize;
}

.desc-modal-expired {
    color: #616161;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

.desc-modal-expired span {
    color: #6F42C1;
}

.modal-video-instruction {
    width: 60%;
    /*height: 55%; */
    padding: 16px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    display: inline-flex;
    background: white;
    border-radius: 12px;
}

.book-text {
    font-size: 1.875vw;
    margin: 0 auto;
}

.modal-books-container {
    width: 30%;
    /*padding: 16px;*/
    max-height: 85vh;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap: 16px;
    display: inline-flex;
    background: white;
    border-radius: 12px;
    border-bottom: 1px #E0E0E0 solid
}

.modal-book-header {
    width: 100%;
    padding: 12px 16px;
    border-bottom: 1px #E0E0E0 solid;
    justify-content: space-between;
    align-items: center;
    display: inline-flex;
}

.modal-book-header-choose {
    align-items: center;
    height: 40px;
    background: #F4F4F4;
    border-radius: 4px;
    border: 1px #E0E0E0 solid;
    display: flex;
}

.modal-title-instruction {
    text-align: center;
    color: #404042;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    word-wrap: break-word
}

.modal-body-instruction {
    align-self: stretch;
    height: 52px;
    padding: 16px 24px;
    background: #E2D9F3;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    display: flex;
    text-align: center;
    color: #6F42C1;
    font-size: 14px;
    font-weight: 600;
    word-wrap: break-word
}

.modal-body-bahasa-instruction {
    align-self: stretch;
    height: 52px;
    padding: 16px 24px;
    background: #F5F5F5;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    display: flex;
    text-align: center;
    color: #404040;
    font-size: 14px;
    font-weight: 600;
    word-wrap: break-word
}

#video-instruction {
    width: 100%; /* Make video width fit the modal width */
    height: auto; /* Maintain aspect ratio */
    max-width: 100%; /* Prevent video from exceeding modal width */
    max-height: 100%; /* Prevent video from exceeding modal height */
    display: block; /* Prevents extra spacing below video */
    margin: 0 auto;
}

.dropdown-select-grade {
    min-width: 180px;
    height: 100%;
    border: none;
    background: transparent;
    color: #9E9E9E;
    font-weight: 400;
    cursor: pointer;
    outline: none;
    padding: 0;
    margin: 0;
    appearance: none;
    text-align: left;
    position: relative;
    z-index: 1;
}

.dropdown-select-grade-small {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    color: #161616;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    padding: 0;
    margin: 0;
    appearance: none;
    text-align: left;
    position: relative;
    z-index: 1;
}

.no-selected-grade-container {
    align-self: stretch;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    display: flex
}

.no-selected-grade-container p {
    text-align: center;
    color: #616161;
    font-size: 18px;
    font-weight: 600;
    word-wrap: break-word
}

.top-bar-topic {
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    display: inline-flex
}

.main-content-topics {
    width: 90%;
    height: 85vh;
    align-self: center;
    background: white;
    border-radius: 8px;
    border: 1px #E0E0E0 solid;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    display: flex;
}

.grid-page-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    width: 100%;
}

.grid-page-container.small {
    grid-template-columns: repeat(2, 1fr);
}

.grid-page-item {
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px #E0E0E0 solid;
    align-items: center;
    display: inline-flex;
    justify-content: space-between;
    cursor: pointer;
}

.topic-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    border-bottom: 1px #E0E0E0 solid;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    padding: 24px;
}

.topic-container.small {
    gap: 8px;
    padding: 12px;
}

.topic-title {
    flex: 1 1 0;
    /*height: 25px;*/
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    display: flex;
    color: #161616;
    font-size: 18px;
    font-weight: 600;
    word-wrap: break-word;
}

.topic-title.small {
    font-size: 16px;
}

.btn-select-page {
    padding: 6px 12px 6px 16px;
    border-radius: 200px;
    border: 1px #404040 solid;
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
    display: flex;
    cursor: pointer;
    color: #404040;
    font-size: 14px;
    font-weight: 500;
    word-wrap: break-word
}

.btn-select-page img {
    margin-left: 10px;
    transition: transform 0.3s;
}

.btn-select-page.active {
    background-color: #EDEDED; /* Background color when active */
}

.btn-select-page.active img {
    content: url('../images/assets/icon-close.png'); /* Path to the close icon */
}

.choose-grade-container {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    display: inline-flex
}

.choose-grade-container label {
    color: #404040;
    font-size: 14px;
    font-weight: 500;
    word-wrap: break-word;
}

.dropdown-select-grade-container {
    /*width: 400px; */
    height: 48px;
    background: #F4F4F4;
    border-radius: 4px;
    border: 1px #E0E0E0 solid;
    display: flex;
    align-items: center;
    /*padding: 10px 16px;*/
}

.explore-more-text {
    text-align: center;
    color: #6F42C1;
    font-size: 16px;
    font-weight: 600;
    word-wrap: break-word;
}

#btn-explore-more {
    position: absolute;
    right: 20px;
    cursor: pointer;
    padding: 10px 16px;
    background: rgba(111, 66, 193, 0.10);
    border-radius: 200px;
    overflow: hidden;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    display: inline-flex
}

.choose-grade-wrapper {
    align-self: stretch;
    padding: 24px;
    border-bottom: 2px #E0E0E0 solid;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    display: inline-flex
}

.page-text {
    color: #404040;
    font-size: 16px;
    font-weight: 500;
    word-wrap: break-word
}

.btn-books {
    min-height: 7.2vh;
    padding: 8px 20px;
    background: #EDEDED;
    border-radius: 8px;
    border: 3px #E0E0E0 solid;
    justify-content: center;
    align-items: center;
    gap: 4px;
    display: inline-flex;
    text-align: center;
    color: #0A0A0A;
    font-size: 18px;
    font-weight: 600;
    word-wrap: break-word
}

.purple-book-svg {
    width: 24px;
    height: 24px;
}

#grade-dropdown {
    padding: 10px;
}

#grade-dropdown option {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.modal-topic-closing {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 16px;
    max-height: 450px;
    overflow-y: auto;
    align-items: center;
}

#page-flip-card {
    border-radius: 200px !important;
}

.phonics-page-title {
    text-align: center;
    color: #0A0A0A;
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    word-wrap: break-word
}

.practice-modal button {
    margin-top: 24px;
    text-transform: uppercase;
}

.practice-modal .title-text {
    text-align: center;
    /*font-size: 14px;*/
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    padding: 8px;
    margin-top: 8px;
}
.practice-modal .desc-text {
    color: #0A0A0A;
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-top: 8px;
}

.practice-modal .green-bg-text {
    border-radius: 4px;
    background: #EAFADF;
    color: #58CC05;
}
.practice-modal .yellow-bg-text {
    border-radius: 4px;
    background: #FFF0B7;
    color: #D4B127;
}
.practice-modal .red-bg-text {
    border-radius: 4px;
    background: #FFC9C9;
    color: #EA2C2B;
}

.btn-faq {
    background: #fff;
    border-radius: 30px;
    height: 40px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    color: #161616;
    font-weight: 600;
    gap: 6px
}

.background-image {
    background-image: url(../images/assets/progress.svg);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.progress-0 {
    background-image: url(../images/kerukunan-cinta/progress-0.svg);
}

.progress-25 {
    background-image: url(../images/kerukunan-cinta/progress-25.svg);
}

.progress-50 {
    background-image: url(../images/kerukunan-cinta/progress-50.svg);
}

.progress-75 {
    background-image: url(../images/kerukunan-cinta/progress-75.svg);
}

.progress-0.small {
    background-image: url(../images/kerukunan-cinta/progress-0-small.svg);
}

.progress-25.small {
    background-image: url(../images/kerukunan-cinta/progress-25-small.svg);
}

.progress-50.small {
    background-image: url(../images/kerukunan-cinta/progress-50-small.svg);
}

.progress-75.small {
    background-image: url(../images/kerukunan-cinta/progress-75-small.svg);
}

.progress-100 {
    background-image: url(../images/kerukunan-cinta/progress-100.svg);
}

.progress-100.small {
    background-image: url(../images/kerukunan-cinta/progress-100-small.svg);
}

#new-profile-wrap {
    display: flex;
    flex-direction: row;
    width: 60%;
    gap: 16px;
    margin: 16px auto;
    /*overflow-y: scroll;*/
    padding-bottom: 40px;
    justify-content: center;
}
#mission-challenge-wrap {
    display: flex;
    flex-direction: column;
    width: 50%;
    gap: 16px;
    margin: 16px auto;
    /*overflow-y: scroll;*/
    padding-bottom: 40px;
}

#mission-greeting {
    padding: 20px 40px;
    background: linear-gradient(90deg, #1000AB 0%, #7D4AD5 100%);
    border-radius: 20px;
    overflow: hidden;
    justify-content: start;
    align-items: center;
    gap: 20px;
    display: inline-flex
}

#mission-greeting img {
    width: 102px;
}

#mission-greeting div {
    /*width: 438px; */
    align-self: stretch;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
    display: inline-flex
}

.mission-greeting-title {
    align-self: stretch;
    color: white;
    font-size: 20px;
    font-weight: 600;
}

.mission-greeting-caption {
    align-self: stretch;
    color: white;
    font-size: 16px;
    font-weight: 400;
}

.green-text-timer {
    color: #58CC05;
    font-size: 14px;
    font-weight: 600;
}

.small-gap-row-wrap {
    justify-content: center;
    align-items: center;
    gap: 4px;
    display: inline-flex
}

#left-section-profile {
    display: inline-flex;
    flex-direction: column;
    gap: 16px;
    width: 70%;
}

.container-profile-section {
    display: inline-flex;
    background-color: white;
    flex-direction: column;
    width: 100%;
    border-radius: 8px;
    /*overflow: hidden; */
    border: 2px #EDEDED solid;
}

.title-container-profile-section {
    min-height: 46px;
    padding: 12px 16px;
    background: #F5F5F5;
    border-bottom: 2px #EDEDED solid;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    display: inline-flex;
}

.title-container-profile-section .img-close {
    cursor: pointer
}

.title-text-profile {
    flex: 1 1 0;
    color: #161616;
    font-size: 16px;
    font-weight: 600;
    word-wrap: break-word
}

.btn-edit-profile {
    padding: 6px 12px;
    background: white;
    border-radius: 200px;
    border: 2px #E0E0E0 solid;
    justify-content: flex-start;
    align-items: center;
    gap: 4px;
    display: inline-flex;
    cursor: pointer;
}

.btn-edit-profile img {
    width: 16px;
    height: 16px;
    position: relative
}

.btn-edit-profile p {
    color: #404040 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    word-wrap: break-word;
}

.avatar-img-profile {
    border-radius: 50%;
    width: 30%;
    /*aspect-ratio: 1;*/
}

.body-container-profile-section {
    position: relative;
    width: 100%;
    min-height: 100px;
    padding: 16px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    display: inline-flex;
}

.badges-body {
    justify-content: flex-start;
    align-items: flex-start;
}

.achievements-wrap {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.achievement-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.modal-body-achievement .achievement-icon {
    max-width: unset;
}

.achievement-date {
    width: 95%;
    padding: 8px 12px 8px 12px;
    gap: 0px;
    border-radius: 8px;
    margin: auto;
    background: #6F42C133;
    text-align: center;

    font-size: 16px;
    font-weight: 600;
    line-height: 22.4px;
    color: #6F42C1;
}

.achievement-desc {
    width: 95%;
    margin: auto;
    font-size: 16px;
    font-weight: 600;
    line-height: 22.4px;
    text-align: center;
    color: #0A0A0A;
}

.achievement-img {
    width: 100%;
    position: relative;
}

.achievement-icon {
    max-width: 82px;
    margin: auto;
}

.achievement-number {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 6px;
}

.achievement-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 19.6px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    margin-top: 10px;
}

.achievement-text {
    font-size: 14px;
    font-weight: 500;
    line-height: 19.6px;
    text-align: left;
    color: #2C2C2CB2;
}

.statistic-body {
    width: 100%;
    display: grid;
    grid-template-columns: auto auto;
    gap: 16px;
}

.statistic-item-container {
    padding: 16px;
    border-radius: 8px;
    border: 2px #EDEDED solid;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    display: inline-flex;
    cursor: pointer;
}

.statistic-item-container.red {
    border: 1px solid rgba(240, 64, 66, 0.20);
    background: rgba(240, 64, 66, 0.10);
}

.texts-container {
    flex: 1 1 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: inline-flex;
}

.texts-container label {
    color: #404040;
    font-size: 18px;
    font-weight: 700;
}

.texts-container p {
    color: #9E9E9E;
    font-size: 14px;
    font-weight: 500;
}

.statistic-item-container.red .texts-container p {
    color: rgba(44, 44, 44, 0.70);
}

.information-wrapper {
    width: 100%;
    flex: 1 1 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: inline-flex;
    padding-bottom: 16px;
    border-bottom: 1px #EDEDED solid;
    gap: 6px;
}

.information-wrapper label {
    color: #0A0A0A;
    font-size: 16px;
    font-weight: 500;
}

.information-wrapper p {
    color: #757575;
    font-size: 16px;
    font-weight: 500;
}

.body-information {
    width: 100%;
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;

}

.planet-icon-wrapper {
    width: 45px;
    height: 45px;
    position: relative;
    padding: 8px;
}

.gems-icon-wrapper-grey {
    width: 45px;
    height: 45px;
    padding-top: 2px;
    padding-bottom: 2px;
    background: #F5F5F5;
    border-radius: 200px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

#right-section-profile {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 30%;
}

#btn-language {
    width: 100%;
    padding: 10px 12px;
    background: white;
    border-radius: 8px;
    border: 2px #EDEDED solid;
    justify-content: flex-start;
    align-items: center;
    display: inline-flex;
    cursor: pointer;
}

.language-item li {
    cursor: pointer;
}

.support-item {
    width: 100%;
    padding: 16px;
    border-bottom: 2px #EDEDED solid;
    justify-content: center;
    align-items: center;
    gap: 12px;
    display: inline-flex;
    cursor: pointer;
}

.language-item {
    display: none;
}

.language-item.show {
    position: absolute;
    top: 90%;
    display: flex;
    width: calc(100% - 30px);
    padding: 8px;
    background: white;
    box-shadow: 0 4px 16px rgba(20, 20, 20, 0.20);
    border-radius: 8px;
    border: 2px #EDEDED solid;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
}

.language-item li {
    color: #161616;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    gap: 8px;
    width: 100%;
    padding: 8px 0;
    align-items: center;
}

.language-item li:not(:last-child) {
    border-bottom: 1px #EDEDED solid;
    padding-bottom: 16px;
}

#btn-language div {
    flex: 1 1 0;
    height: 24px;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    display: flex
}

#btn-language.selecting {
    background: #F5F5F5;
}

.body-container-profile-section .language-item {
    top: 78px;
}

#icon-dropdown {
    transition: transform 0.3s;
}

.up {
    transform: rotate(180deg);
}

.change-profile-modal {
    display: inline-flex;
    background-color: white;
    flex-direction: column;
    width: 40%;
    border-radius: 8px;
    overflow: hidden;
    border: 2px #EDEDED solid;
}

.error-username {
    display: none;
}

.input-username {
    padding: 12px 16px;
    background: white;
    border-radius: 8px;
    border: 1px solid #9b9898;
    color: #404040;
    font-size: 16px;
    font-weight: 500;
    word-wrap: break-word;
    width: 100%;
}

.username-field.error input {
    border-color: #E52E2E;
}

.username-field.error .error-username {
    display: inline-flex;
    align-self: stretch;
    /*height: 22px;*/
    color: #E52E2E;
    font-size: 16px;
    font-weight: 500;
    word-wrap: break-word
}

.username-field {
    align-self: stretch;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 6px;
    display: flex
}

.avatar-field {
    align-self: stretch;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    display: flex
}

.username-field label {
    align-self: stretch;
    color: #0A0A0A;
    font-size: 16px;
    font-weight: 500;
    word-wrap: break-word
}

.change-username-container {
    width: 100%;
    padding: 16px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 16px;
    display: inline-flex
}

#change-avatar {
    display: none;
}

#change-avatar.show {
    display: flex;
}

#change-username {
    display: none;
}

#change-username.show {
    display: flex;
}

#list-achievement{
    display: none;
}

#list-achievement.show{
    display: flex;
}

.avatar-list-wrapper {
    width: 100%;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    border: 2px #EDEDED solid;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.success-modal-container {
    padding: 24px;
    background: white;
    border-radius: 12px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 24px;
    display: inline-flex
}

.success-modal-container div {
    align-self: stretch;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    display: flex
}

.success-modal-container label {
    align-self: stretch;
    text-align: center;
    color: #0A0A0A;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    word-wrap: break-word
}

.success-modal-container p {
    align-self: stretch;
    text-align: center;
    color: #404040;
    font-size: 16px;
    font-weight: 500;
    word-wrap: break-word
}

.success-modal-container a {
    width: 100%;
    justify-content: center;
    display: inline-flex;
}

.action-quiz.played {
    background: #56B412;
    padding-right: 8px;
    padding-left: 8px;
    align-items: center;
}

.action-quiz.played button {
    color: white;
}

.action-quiz.played svg {
    display: block;
}

.quizLabel.incorrect,
.quizLabel.correct {
    position: relative;
}

.quizLabel.correct {
    border-color: #58CC05;
}

.quizLabel.incorrect {
    border-color: #F15858;
}

.quizLabel.incorrect:after {
    background-image: url(../images/assets/icon-false.png);
}

.quizLabel.correct:after {
    background-image: url(../images/assets/icon-true.png);
}

.quizLabel.correct:after,
.quizLabel.incorrect:after {
    content: '';
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    margin-top: -10px;
    right: 12px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#btn-level {
    /*height: 48px; */
    padding: 12px 16px;
    background: #F5F5F5;
    border-radius: 8px;
    border: 2px #E0E0E0 solid;
    backdrop-filter: blur(16px);
    justify-content: center;
    align-items: center;
    gap: 12px;
    display: inline-flex;
    cursor: pointer;
}

#btn-level p {
    text-align: center;
    color: #0A0A0A;
    font-size: 16px;
    font-weight: 600;
    word-wrap: break-word;
}

.lesson-map-wrapper {
    margin-right: auto;
    margin-left: 24%;
    display: flex;
    align-items: center;
    gap: 16px;
}

.lesson-map-wrapper label {
    text-align: center;
    color: #393939;
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    word-wrap: break-word
}

.select-level-wrapper {
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;

    position: relative;
    top: 0;
    right: 0;
}

.select-level-wrapper .language-item.show {
    position: absolute;
    top: 44px;
    padding: unset;
    /*width: 100%;*/
    width: max-content;
    max-width: 190px;
    gap: unset;
}

.select-level-wrapper .language-item li {
    color: #161616;
    font-size: 16px;
    padding: 8px 10px;
    width: 100%;
}

.select-level-wrapper .language-item li span{
    flex:1;
}

.select-level-wrapper .language-item .locked {
    color: #9E9E9E;
}

.select-level-wrapper .language-item .locked::after {
    content: "";
    display: inline-block;
    width: 16px; /* Adjust the width as needed */
    height: 16px; /* Adjust the height as needed */
    background-image: url('../images/assets/lock-black.png'); /* Replace with your image path */
    background-size: contain; /* Ensures the image fits */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    margin-left: 5px; /* Optional: add space between text and image */
}

.scroll-wrapper > .scroll-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-navigation.success {
    background: rgba(97, 180, 255, 0.60);
}


.footer-navigation.success .next-btn {
    border-radius: 200px;
    background: #135CD1;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px -3px 0px 0px rgba(0, 0, 0, 0.25) inset;
}



.footer-navigation.failed .next-btn:disabled,
.footer-navigation.failed .next-btn {
    display: none;
}

.footer-navigation.failed .try-again-btn {
    display: block;
}

.footer-navigation .try-again-btn {
    display: none;
}


.footer-navigation.success .gems-and-progress {
    display: flex;
}

.gems-and-progress {
    display: none;
    padding: 1.2dvh 2.5vw;
    justify-content: center;
    align-items: center;
    gap: 24px;
    flex: 1 0 0;
    border-radius: 200px;
    background: rgba(97, 180, 255, 0.80);
}

.gems-word {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gems-word span {
    color: #FFF;
    font-size: 1.4vw;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.progress-word {
    display: none;
    font-size: 1.25vw;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: #FFF;
}

.progress-word.show {
    display: flex;
}




.footer-navigation.failed .try-again-footer {
    display: flex;
}

.try-again-footer {
    display: none;
    padding: 1.2dvh 2.5vw;
    justify-content: center;
    align-items: center;
    flex: 1 0 0;
    border-radius: 200px;
    background: #FFDFDF;
}

.try-again-footer div {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}


.progress-container {
    position: relative;
    width: 100%;
    background: #D9D9D9;
    border-radius: 200px;
}
.progress-bar {
    height: 20px;
    background-color: #58CC05;
    text-align: center;
    line-height: 20px;
    color: white;
    font-weight: bold;
    border-radius: 200px;
}
.progress-text {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-weight: bold;
    z-index: 1;
    color: rgba(22, 22, 22, 0.32);
    font-size: 14px;
}

.progress-bar-and-treasure {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    gap: 8px;
}

.title-mission {
    color: #404040;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.hint-button {
    padding: 10px 22px;
    background: #324B65;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    display: inline-flex;
    text-align: center;
    /*flex-direction: column;*/
    color: #F5F5F5;
    font-size: 18px;
    font-weight: 500;
    word-wrap: break-word;
    transform: translateX(-50%);
    left: 50%;
    position: absolute;
    bottom: -45px;
    z-index: 5;
    cursor: pointer;
}

.hint-button:disabled {
    background: gray;
    cursor: not-allowed;
}

.quiz-dialogue-complete .hint-button,
.quiz-complete-story .hint-button {
    top: calc(100% + 6px);
    bottom: unset;
}

.arrange-sentence {
    overflow: unset;
    position: relative;
}

/* Custom shake animation */
@keyframes customShakeY {
    0% {
        transform: translateY(4px);
    }
    20% {
        transform: translateY(0px);
    }
    /* First bounce up */
    40% {
        transform: translateY(4px);
    }
    /* Bounce down */
    60% {
        transform: translateY(0px);
    }
    /* Second bounce up */
    80% {
        transform: translateY(4px);
    }
    /* Bounce down */
    100% {
        transform: translateY(0);
    }
}

.shake-custom {
    animation: customShakeY 1s forwards;
    animation-delay: 0.1s;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideUpWithoutFade {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.slide-up {
    animation: slideUp 0.5s forwards;
    /*animation-delay: 0.3s;*/
}

.slide-up-no-fade {
    animation: slideUpWithoutFade 0.5s forwards; /* Slide up effect */
}

.modal-topic-opening .close-modal {
    right: 8px;
    top: 12px;
}

.modal-topic-opening {
    background: #FFF;
    width: 440px;
    padding: unset;
}

.modal-banner {
    background: unset;
    padding: unset !important;
    width: fit-content !important;
    max-height: unset !important;
}

.modal-banner picture img {
    height: 50%;
    max-height: 515px;
    width: auto;
}

.rank-container {
    background: transparent;
    position: absolute;
    display: inline-flex;
    top: -74px;
    width: 100%;
    justify-content: center;
}

.mid-badge {
    z-index: -1;
    position: absolute;
    left: 14%;
    bottom: 13px;
}

.modal-topic-opening h2 {
    text-align: start;
    padding: 12px 26px 12px 16px;
    font-size: 16px;
    font-weight: 600;
    border-bottom: 1px solid #EDEDED;
}

.modal-topic-opening h3 {
    font-weight: 600;
    margin: 0;
    font-size: 14px;
}

/*.modal-topic-opening {
    height: 50%;
}*/


.modal-topic-opening .warning-modal {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.modal-topic-opening .warning-modal .left-text {
    flex: 1;
    /*overflow-y: scroll;*/
    overflow-y: auto;
    display: flex;
    gap: 12px;
    flex-direction: column;
    margin: 0;
}

.modal-topic-opening .warning-modal .max-height-card::-webkit-scrollbar-thumb {
    background-color: #757575;
    border-radius: 12px;
}

.modal-topic-opening .warning-modal .max-height-card::-webkit-scrollbar {
    background-color: white;
    border-radius: 12px;
    width: 8px;
    height: 2px;
}

.modal-topic-opening .warning-modal .max-height-card {
    max-height: 260px;
    flex: 1;
    overflow-y: scroll;
    margin-right: 6px;
}

.left-text,
.modal-topic-opening .btn-modal-card,
.modal-topic-opening .btn-modal-wrap {
    padding: 16px 24px;
    margin: 0;
}

.modal-topic-opening .warning-modal button {
    /*font-size: 14px;*/
}

.two-button-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 16px
}

.w-full {
    width: 100%
}


.login-streak-container {
    width: 400px;
    margin: 0 auto;
    border: 1px solid #ddd;
    border-radius: 10px;
    /*z-index: 10;*/
    background: white;
    /*top: 10%;*/
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow:hidden;

}

.login-streak-container.new {
    border: unset;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: unset;
    overflow: hidden;
}

.login-streak-container.reward {
    border: unset;
    border-radius: 10px;
    background: white;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background-image: url("../images/assets/bg-streak-reward.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 24px;
}

.streak-detail-word {
    margin: 0 12px;
    padding: 12px;
    background: rgba(240, 64, 66, 0.10);
    border-radius: 8px;
    border: 1px rgba(240, 64, 66, 0.20) solid;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    display: inline-flex
}

.streak-detail-word.new {
    background: #135CD1;
    justify-content: flex-start;
    display: flex;
    padding: 16px;
    margin: unset;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    border: unset;
    border-radius: unset;
}

.streak-count-and-fire {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

#strike-label {
    color: #FFF;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

#strike-caption.ChallengeDescription {
    align-self: stretch;
    color: rgba(44, 44, 44, 0.70);
    font-size: 12px;
    font-weight: 500;
    word-wrap: break-word
}

#strike-caption.new {
    display: flex;
    padding: 12px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    color: #FFF;
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.calendar {
    background: white;
    margin:  8px 12px;
    overflow-y: auto;
}

.month {
    padding: 4px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background: #F5F5F5;
    border-radius: 200px;
    align-items: center;
    margin-bottom: 8px;
}

.month h3 {
    margin: 0;
}

.prev, .next {
    cursor: pointer;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

.weekdays-wrapper {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid #E6E6E6;
}

.weekdays-wrapper.new {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    border-radius: 12px;
    border: 1px solid #E6E6E6;
    background: #FFF;
}

.weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    color: #757575;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    background: #F5F5F5;
    padding: 8px 0;
}

.weekdays.new {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    color: black;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    width: 100%;
    padding: unset;
    background: unset;
}

.days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin: 10px 8px;
    row-gap: 8px;
}

.days.new {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    width: 100%;
    margin: unset;
    row-gap: unset;
}

.days div {
    padding: 10px;
    /*border-left: 12px;*/
    /*cursor: pointer;*/
    box-sizing: border-box;
    color: #757575;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-left: -1px;
}

.days img {
    justify-self: center;
}

.days div.streak {
    background-color: #E2D9F3;
    color: rgba(19, 92, 209, 0.60);
}

.streak.first,
.streak-strong.first {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.streak.last,
.streak-strong.last {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.days div.streak-strong {
    background-color: #135CD1;
    color: white;
}

.title-streak {
    text-align: start;
    padding: 12px;
    font-size: 18px;
    font-weight: 600;
    border-bottom: 1px solid #ededed;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.title-streak.new {
    text-align: start;
    padding: 12px;
    font-size: 18px;
    font-weight: 600;
    border-bottom: unset;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    color: white;
    background: #135CD1;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px -3px 0px 0px rgba(0, 0, 0, 0.25) inset;
}
.title-streak.new .closed{
    cursor:pointer;
}
.gems-reward-streak {
    display: flex;
    padding: 8px;
    margin: 0 16px 16px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    align-self: stretch;
    border-radius: 4px;
    background: #F5F5F5;
    color: #2C2C2C;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.image-name-text {
    width: 84%;
    white-space: nowrap;
    overflow-x: auto;
}

.image-name-text::-webkit-scrollbar {
    width: 1px;
    height: 1px;
}

/* Track */
.image-name-text::-webkit-scrollbar-track {
    background: #ededed;
}

/* Handle */
.image-name-text::-webkit-scrollbar-thumb {
    background: #ededed;
}

/* Handle on hover */
.image-name-text::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.no-scroll {
    overflow: hidden;
}

.leaderboard-announcement-modal {
    background-image: url(../images/assets/bg-leaderboard-modal.jpg);
    border-radius: 32px;
    width: 40vw;
}

.leaderboard-announcement-modal button {
    text-align: end;
    margin: 16px 16px 16px auto;
    border-radius: 200px;
    border: 3px solid #CFCFC8;
    background: #FFF;
    display: flex;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
}

.leaderboard-announcement-modal .leaderboard-container {
    height: 25vh;
}

.title-leaderboard-modal {
    color: white;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

.caption-leaderboard-modal {
    color: white;
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding: 0 16px;
    /*width: 80%;*/
}

#topic-text {
    font-size: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    line-height: normal;
    display: block;
    font-weight: bold;
}

.badge-score {
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
}

.badge-score img{
    width: 120px;
}

.badge-score p {
    color: #EA2C2B;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    position: absolute;
    top: 30%;
}

.badge-score.red p{
    color: #EA2C2B;
}
.badge-score.yellow p{
    color: #D4B127;
}
.badge-score.green p{
    color: #58CC05;
}

.paragraph-text-wrap {
    display: flex;
    height: fit-content;
    /*padding: 16px;*/
    justify-content: start;
    align-items: flex-start;
    align-self: stretch;
    border-radius: 12px;
    border: 2px solid #F5F5F5;
    background: #F5F5F5;
    overflow-y: auto;
    color: #0A0A0A;
    margin: 1.5rem;
}
.paragraph-text {
    display: flex;
    max-height: 120px;
    padding-right: 16px;
    justify-content: start;
    align-items: flex-start;
    align-self: stretch;
    background: #F5F5F5;
    overflow-y: scroll;
    color: #0A0A0A;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    margin: 8px;
}

div.paragraph-text::-webkit-scrollbar {
    width: 8px;
}
div.paragraph-text::-webkit-scrollbar-thumb {
    background-color: #757575;
    border-radius: 200px;
}

.progress-bar-and-treasure img {
    width: 40px;
    height: 40px;
}

.login-streak-container.reward h4{
    color: #FFF;
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}
.login-streak-container.reward p{
    color: #FFF;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.login-streak{
    flex-direction: column;
}
.login-streak-modal{
    width: 420px;
    margin: 0 auto;
    position: relative;
}
login-streak-modal:before{

}
.login-streak .small-font {
    color:#B3B3B3;
    font-size: 14px;
    font-weight: 500;
    margin-top:8px;
    text-align: center;
    display:block;
}
.login-streak-wrapper{
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #f5f5f5;
    display: flex;
    overflow:hidden;
    flex-direction: column;
    position:relative;
    z-index: 6;
}
.modal-body-streak{
    background: #f5f5f5;
    padding:22px;
}
.streak-list{
    margin-top:16px;
}
.streak-list ul{
    display: flex;
    flex-direction: column;
    gap:8px;
}
.streak-list ul li{
    border-radius: 100px;
    border: 1px solid #D9D9D9;
    background:  #E6E6E6;
    font-weight: 600;

}
.streak-list ul label{
    display: flex;
    align-items: center;
    gap:10px;
    padding:10px;
    cursor: pointer;
}
.streak-list ul label input{
    padding:0;
    margin:0;
}
.streak-content .center{
    text-align: center;
    display:block;
}
.btn-streak-choose:disabled,
.btn-streak-choose[disabled]{
    background: #E6E6E6;
    box-shadow: none;
}
.btn-streak-choose{
    border-radius: 200px;
    background: #FFFBFB;
    border: 2px solid #E0DCDCCC;
    width: 100%;
    margin-top:16px;
    font-size:18px;
    color: #393939;
    padding: 12px 32px;
}
.additional-info{
    border-radius: 20px;
    background:  #3ABB77;
    padding:12px 18px;
    font-size:14px;
    color:#fff;
    width: 100%;
    margin-top:20px;
    text-align: center;
}
.additional-info strong{
    font-weight: 600;
}
.additional-info img{
    width: 18px;
    vertical-align: middle;
}
.coin-earned{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.coin-earned img{
    width: 18px;
}
.additional-info .coin-earned {
    display: ruby;
}

.content-streak-target{
    text-align: center;
}
.label-target{
    font-size:18px;
    font-weight:600;
    margin-bottom: 16px;
}
.gem-acc{
    position: absolute;
    top: -130px;
    right: 0;
    z-index: 5;
}
.gem-acc2{
    position: absolute;
    top: -70px;
    left: 0;
    z-index: 2;
}

.topic-finish-modal{
    width: 400px;
    border-radius:10px;
    overflow:hidden;
}

.great-effort:after{
    content:'';
    height: 150px;
    width: 100%;
    background-image:url(../images/assets/great-effort-art.png);
    background-position: center;
    background-repeat:no-repeat ;
    background-size: 100%;
    position: absolute;
    left:0;
    top:0;
}
.complete-topic:before{
    content:'';
    height: 150px;
    width: 100%;
    background-image:url(../images/kerukunan-cinta/Shine.webp);
    background-position: center;
    background-repeat:no-repeat ;
    background-size: cover;
    position: absolute;
}
.complete-topic:after{
    content:'';
    height: 150px;
    width: 100%;
    background-image:url(../images/kerukunan-cinta/Confetti.webp);
    background-position: center;
    background-repeat:no-repeat ;
    background-size: 95%;
    position: absolute;
    left:0;
    top:0;
}

.modal-body-topic-finish{
    background: #fff;
    padding: 22px;
    text-align: center;
    font-weight: 600;
}
.modal-body-topic-finish .label-target{
    font-size:22px;
    font-weight:700;
    text-transform:uppercase;
    margin-bottom: 8px;
}
.txt-green{
    color: rgba(23, 132, 0, 0.8);
}

.txt-gold{
    color: #E0B845;
}


#modalBox:has(*) ~ section {
    overflow: hidden;
}

#toastContainer {
    position: absolute;
    bottom: -13.9807692dvh;
    width: 100%;
    align-items: center;
    justify-content: center;
    display: flex;
    z-index: 5;
}

.toast {
    padding: 16px;
    background: #F6FFF9;
    border-radius: 8px;
    outline: 1px #48C1B5 solid;
    outline-offset: -1px;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    display: inline-flex;
    animation: slideIn 0.3s ease;
}

.text-toast {
    flex: 1 1 0;
    align-self: stretch;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    display: inline-flex
}

.text-toast .title {
    align-self: stretch;
    justify-content: flex-start;
    align-items: flex-start;
    display: inline-flex;
    flex: 1 1 0;
    color: #27303A;
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
    line-height: 22.40px;
    word-wrap: break-word
}

.text-toast .caption {
    align-self: stretch;
    color: #2F3F53;
    font-size: 14px;
    font-weight: 400;
    line-height: 18.20px;
    word-wrap: break-word
}


@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.btn-blue:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.grammar-item.content-insight {
    max-height: unset;
}

#heart-container {
    padding: 8px 16px;
    background: white;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    display: inline-flex
}

/*#region GetToKnowYou*/
.gtky-wrapper {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
    margin: 0 auto;
    width: 870px;
}

.gtky-header {
    width: 100%;
    padding: 18px 20px;
    background-color: #6F42C1;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    color: white;
    font-size: 18px;
    font-weight: 600;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    word-wrap: break-word;
}

.gtky-questions-wrapper {
    width: 100%;
    padding: 32px 26px;
    background-color: white;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.gtky-question {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
}

.gtky-question-title {
    color: #404040;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    justify-content: center;
    word-wrap: break-word;
}

.gtky-answers-wrapper {
    display: grid;
    width: 100%;
    grid-template-columns: calc(50% - 8px) calc(50% - 8px);
    gap: 16px;
}

/* Base radio answer style */
.gtky-answer {
    padding: 10px 16px;
    background-color: #F5F5F5;
    border-radius: 100px;
    outline: 1px solid #E0E0E0;
    outline-offset: -1px;
    display: inline-flex;
    /*flex-wrap: wrap;*/
    align-content: flex-start;
    gap: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.gtky-answer .gtky-answer-alphabet,
.gtky-answer .gtky-answer-text {
    color: #2C2C2C;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    justify-content: center;
    flex-direction: column;
    font-family: Chillax, sans-serif;
}

.gtky-answer .gtky-answer-alphabet {
    font-size: 14px;
}

/* Selected state style */
.select-container.selected,
.gtky-answer.selected,
.gtky-answer-select.selected {
    background-color: #CFC0EA;
    outline: 1px solid #CFC0EA;
}

.gtky-answer.selected .gtky-answer-alphabet,
.gtky-answer.selected .gtky-answer-text {
    color: #5D37A1;
}

.select-container {
    position: relative;
    width: 100%;
    padding-right: 16px;
    box-sizing: border-box;
    background-color: #F5F5F5;
    border-radius: 100px;
    outline: 1px solid #E0E0E0;
}

.gtky-answer-select {
    width: 100%;
    padding: 10px 16px;
    background-color: #F5F5F5;
    border-radius: 100px;
    /*outline: 1px solid #E0E0E0;*/
    /*outline-offset: -1px;*/
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    align-content: flex-start;
}

.dash-divider {
    align-self: stretch;
    height: 0;
    outline: 1px solid #E0E0E0;
    outline-offset: -0.5px;
}

.gtky-ask-phone-number {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
}

.gtky-ask-phone-number-title {
    text-align: center;
    color: #6F42C1;
    font-size: 14px;
    font-weight: 600;
}

.gtky-ask-phone-number-caption {
    text-align: center;
    color: #8762CB;
    font-size: 12px;
    font-weight: 500;
}

.gtky-input-phone-number {
    align-self: stretch;
    padding: 12px 16px;
    background: #EDEDED;
    border-radius: 8px;
    outline: 1px solid #E8E6E6;
    outline-offset: -1px;
    /*color: #CECECE;*/
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
}

.confirmed-subscribe {
    border-radius: 20px;
    display: inline-flex;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
}

.confirmed-subscribe div:nth-child(1) {
    width: 20px;
    height: 20px;
    background: #D9D9D9;
}

.confirmed-subscribe div:nth-child(2) {
    width: 280px;
    color: #525252;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.16px;
    word-wrap: break-word;
}

.gtky-wrapper .line-progress {
    display: none;
}

.overflow-visible {
    overflow: visible !important;
}

@media (max-width: 880px) {
    .gtky-wrapper {
        width: 100%;
        padding: 16px;
        margin: auto;
    }
    .gtky-answers-wrapper {
        grid-template-columns: auto;
        gap: 8px;
    }

    .gtky-questions-wrapper {
        gap: 16px;
        padding: 16px;
        margin: auto;
    }

    .gtky-wrapper .line-progress {
        position: unset;
    }

    .gtky-header {
        font-size: 1rem;
        padding: 0.875rem 1rem;
    }

    .gtky-question-title {
        font-size: 0.875rem;
    }

    .gtky-ask-phone-number-title,
    .gtky-input-phone-number,
    .gtky-answer-select,
    .gtky-answer .gtky-answer-alphabet,
    .gtky-answer .gtky-answer-text {
        font-size: 0.875rem;
    }

    .gtky-ask-phone-number-caption {
        font-size: 0.7rem;
    }

    .confirmed-subscribe div {
        font-size: 0.625rem;
    }

    .faq-wrapper.gtky {
        padding: 0;
        display: flex;

    }
}

/*#endregion */

.modal-finish-leaderboard-holiday {
    width: 606px;
    height: 515px;
    background-image: url("/images/winner-holiday/bg-winner-holiday.png");
    background-size: cover;
    padding: unset !important;
    max-height: unset !important;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.modal-finish-leaderboard-holiday.mobile {
    width: calc(100% - 16px);
    background-image: url("/images/winner-holiday/bg-winner-holiday-mobile.png");
}

.modal-finish-leaderboard-holiday .logo-fun-holiday {
    height: 132px;
    position: absolute;
    top: -66px;
    left: 50%;
    transform: translateX(-50%);
}

.mobile .modal-finish-leaderboard-holiday .logo-fun-holiday {
    height: 117px;
    top: -51px
}

.modal-finish-leaderboard-holiday .title {
    text-align: center;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    word-wrap: break-word;
    margin-top: 80px;
}

.modal-finish-mission-holiday img {
    height: 515px;
}

.modal-finish-mission-holiday button {
    width: max-content;
    padding: 12px 32px;
    position: absolute;
    left: 50%;
    bottom: -36px;
    transform: translateX(-50%);
    height: unset;
}
.modal-finish-mission-holiday button.none-rank {
    bottom: 8px;
}

.leaderboard-items-holiday-wrapper {
    width: calc(100% - 16px);
    padding: 12px;
    background: white;
    border-radius: 14px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    display: inline-flex;
    margin: 16px
}

.mobile .leaderboard-items-holiday-wrapper {
    margin: 16px 4px;
    width: calc(100% - 8px);
}

.leaderboard-item-holiday {
    align-self: stretch;
    height: 64px;
    padding: 12px 8px;
    background: #F5F8FA;
    border-radius: 12px;
    outline: 1px #EDF1F4 solid;
    outline-offset: -1px;
    justify-content: flex-start;
    align-items: center;
    gap: 4px;
    display: inline-flex;
    flex-direction: row
}

.rank-item-leaderboard-holiday {
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    display: flex;
    font-size: 14px;
    color: #6F42C1;
    font-weight: 600;
    margin-right: 8px;
}

.avatar-item-leaderboard-holiday {
    width: 32px;
    height: 32px;
    background: #FFAF5B;
    overflow: hidden;
    border-radius: 200px;
    outline: 1px #EDF1F4 solid;
    outline-offset: -1px;
    justify-content: flex-start;
    align-items: center;
    display: flex
}

.detail-item-leaderboard-holiday {
    flex: 1 1 0;
    justify-content: center;
    align-items: center;
    gap: 4px;
    display: flex
}

.mobile .detail-item-leaderboard-holiday {
    width: 70%;
}

.detail-item-leaderboard-holiday .name-and-school-wrapper {
    flex: 1 1 0;
    overflow: hidden;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    display: inline-flex
}

.name-item-holiday {
    /*justify-content: center;*/
    display: block;
    color: #404040;
    font-size: 16px;
    font-weight: 500;
    word-wrap: break-word;
}

.mobile .name-item-holiday {
    font-size: 14px;
}

.school-item-holiday {
    align-self: stretch;
    /*justify-content: center; */
    display: block;
    /*flex-direction: column; */
    color: #9E9E9E;
    font-size: 14px;
    font-weight: 500;
    word-wrap: break-word
}

.mobile .name-item-holiday,
.mobile .school-item-holiday {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.button-follow-item-holiday {
    padding: 6px 16px;
    background: #6F42C1;
    border-radius: 200px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    display: flex;
}

.button-follow-item-holiday:hover {

}

.mobile .button-follow-item-holiday {
    padding: unset;
}

.button-follow-item-holiday p {
    text-align: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: white;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    word-wrap: break-word
}

.mobile .button-follow-item-holiday p {
    display: none;
}

.coin-item-holiday {
    width: 140px;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    display: flex
}

.mobile .coin-item-holiday {
    max-width: 30%;
    margin-left: 4px;
    overflow-wrap: anywhere;
}

.coin-item-holiday p {
    text-align: right;
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: #6F42C1;
    font-size: 14px;
    font-weight: 600;
    /*word-wrap: break-word*/
}

.modal-wotd .close-modal {
    z-index:4;
}

.modal-wotd picture{
    position: absolute;
    right: -7.83px;
    top: -90.668px;
}

.wotd-wrap {
    text-align: center;
    width: 100%;
    margin-top: 20%;
    padding: 0 10%;
    gap: 1.5vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wotd-wrap {
    font-weight: 600;
}

.wotd-image {
    width: 65%;
}

.input-wotd {
    width: 100%;
    /*padding: 12px 16px;*/
    margin: 8px 0;
    box-sizing: border-box;
    border: none;
    border-bottom: 2px solid black;
    text-align: center;
}

.wotd-wrap .btn-blue:disabled {
    background: #ECECEC;
    color: #D9D9D9;
    opacity: unset;
    border: none;
}

@media (max-width: 1280px) {
    .label-level {
        font-size: 2vh !important;
        padding: .3vh .5vw;
    }

    .login-form .form-control {
        height: 2.9rem;
        padding: 0.6rem .7rem;
    }

    .login-form {
        gap: .5rem;
    }

    .img-planet {
        padding: .6vh;
        border-width: .4vh;
    }

    /*.planet{
        width: 14vh;
    }*/
    .side-nav {
        padding: 20px;
    }

    .logo-nav img {
        width: 165px;
    }
    .nav-list{
        margin-top: 34px;
    }

    .login-code,
    .forgot-password {
        padding: 10px;
    }

    .eye-icon {
        top: .8rem;
    }

    .text-instruction {
        height: 54px;
    }

    .nav-top-bar {
        height: 60px;
    }

    .timer img {
        width: 24px;
    }

    .timer {
        font-size: 18px;
        padding: 4px 12px;
    }

    .text-starting {
        width: 120px;
        height: 120px;
    }

    .topic-08,
    .topic-04 {
        bottom: -9vh;
    }

    .topic-card.checked .topic-circle:after {
        right: 0;
        width: 3.5vh;
        height: 3.5vh;
    }

    .topics-route {
        top: 1vh;
    }

    .level-phonics .topics-route{
        top: 3vh;
    }

    #elementary-chapter .nav-top-bar {
        height: 11vh;
    }

    #elementary-chapter .nav-top-bar .nav-top-bar-fix {
        height: 10vh;
    }

    .btn-back-arr img {
        width: 30px;
    }



    .nav-top-bar-fix .semester-option a {
        font-weight: 600;
        font-size: 2.2vh;
        padding: 1vh 2vw;
    }

    .nav-top-bar-fix .vocab-review-button {
        font-weight: 600;
        font-size: 2.2vh;
        padding: 1vh 2vw;
    }

    .main-quiz-wrap {
        width: 68vw;
        margin: 0 auto;
    }

    .dialogue-wrap {
        width: 68vw;
    }

    .drag-and-drop-wrap {
        width: 68vw;
    }

    .drop-text-dialog:before {
        top: -3px;
        left: 47%;
    }

    .label-start {
        top: 5vh;
    }

    .topic-name span {
        padding: .6vh .6vw;
        font-size: .8vw;
    }

    .check-remember {
        font-size: 12px;
    }

    .login-code,
    .forgot-password,
    .login-form .form-control input {
        font-size: 14px;
    }

    .logo-login img {
        width: 60px;
    }

    .login-card h3 {
        font-size: 16px;
        margin: 6px 0;
    }

    .login-card h3 img {
        width: 18px;
    }

    .forgot-card, .login-card {
        width: 430px;
    }

    .avatar-wrap {
        padding-bottom: 10px;
        margin-top: 10px;
    }

    .planet-four {
        right: -1vw;
    }

    .planet-three {
        right: 2vw;
    }

    #elementary-chapter .btn-back-arr img {
        width: 32px;
    }

    #elementary-chapter .topics-route {
        top: 2vh;
    }

    #elementary-chapter .topic-name span {
        font-size: .9vw;
    }

    .paragraph-text {
        font-size: 1.2vw;
    }
}

@media (max-width: 932px) {
    #video-instruction {
        width: 70% !important;
    }
}

@media (max-width: 1440px) {
    .icon-fire-home,
    .icon-gift-home,
    .icon-gems-home,
    .highschool-level .circle-ava,
    .elementary-level .circle-ava,
    .highschool-level .circle-ava .ava-img,
    .elementary-level .circle-ava .ava-img,
    .circle-ava, .circle-ava .ava-img {
        width: 43px;
        height: 43px;
    }

    .profile-content {
        padding: 0 3.7vw;
        gap: 2vw;
        width: auto;
    }

    .planet-neptune {
        top: 26vh;
    }
}

@media (max-width: 1366px) {
    /*body {*/
    /*    overflow: unset;*/
    /*}*/
    .avatar-img-profile {
        width: 120px;
    }

    .choose-profile-img img {
        width: 6vw;
    }

    .choose-profile-img.select .inside:before {
        width: 24px;
        height: 24px;
    }

    .choose-profile-img strong {
        font-size: 13px;
    }

    .title-container-profile-section {
        padding: 8px 16px;
    }

    #btn-level {
        padding: 6px 10px;
    }

    .lesson-map-wrapper label {
        font-size: 18px;
    }

    .logo-login img {
        width: unset;
    }

    #elementary-chapter.intro-topics-lock #intro-topics-lock {
        top: -9vh;
        left: 13vw;
    }

    #elementary-chapter.intro-semester #intro-semester {
        left: -5vw;
    }

    .msg-wrong-pass {
        padding: 12px 16px;
        margin-top: 12px;
    }

    .highschool-level .next-intro,
    .elementary-level .next-intro,
    .highschool-level .text-intro,
    .elementary-level .text-intro {
        font-size: 12px;
    }

    #intro-gems {
        min-width: 290px;
    }

    #intro-gems {
        min-width: 22vw;
        /*top: 10vh;*/
        left: -8.7vw;
    }

    #intro-profile:before {
        right: 70px;
    }

    .highschool-level #intro-profile,
    .elementary-level #intro-profile {
        top: 5vw;
        right: 0;
        width: 19vw;
    }

    .highschool-level #intro-planets,
    .elementary-level #intro-planets {
        left: 50%;
        margin-left: -135px;
        /*top: 48vh;*/
    }

    #intro-alphabet:before {
        top: 26px;
    }

    #intro-phonics:before {
        top: 26px;
    }

    #intro-planets {
        width: 270px;
        top: 165px;
        left: -70%;
    }

    .intro-topics-lock #intro-topics-lock {
        top: -5%;
        left: 30%;
    }

    .quiz-img-sound .img-quiz {
        padding: 0;
        margin-top: 6px;
    }

    .quiz-img-sound .img-quiz .question-image {
        width: 42%;
    }

    .deck-game-wrap {
        /*width: 60%;*/
        margin: 0 auto;
    }

    .dragList {
        /*margin: 4px 0;*/
        border: 2px solid #F5F5F5;
        /*height: 40px;*/
        border-radius: 8px;
    }

    .text-chat-box {
        /*font-size:14px;*/
        letter-spacing: 0;
        position: relative;
    }

    .quiz-phonics .container {
        width: 870px;
    }

    .img-quiz .question-image {
        width: 30%;
    }

    .main-quiz-wrap {
        margin-top: 20px;
    }

    .video-progress {
        width: 200px !important;
    }

    .nav-top-bar {
        height: 64px;
    }

    .btn-back-arr {
        top: 24px;
    }


    .posttest-back {
        top: unset;
    }

    .btn-back-arr img {
        width: 40px;
    }


    .chapter-col-circle {
        width: 80px;
        height: 80px;
    }

    .chapter-col-circle img {
        width: 40px;
    }

    .chapter-lvl-list.current:before {
        width: 75px;
        height: 75px;
        top: 3px;
    }


    .ufo::before {
        width: 100px;
        height: 100px;
        top: 84px;
    }

    .login-card {
        padding: 22px 24px 38px;
    }

    .login-card h3 {
        margin: 5px 0 12px;
        font-size: 26px;
    }

    .login-form .form-control {
        padding: 11px 18px;
        margin-bottom: 10px;
    }

    .login-method {
        margin-top: 10px;
    }

    .login-code,
    .forgot-password {
        padding: 12px;
    }

    .btn-secondary {
        padding: 8px 8px;
        /*border-radius: 12px;*/
    }

    .login-card h3 img {
        width: 30px;
    }

    .forgot-card .btn-login, .login-form .btn-login {
        bottom: -32px;
    }

    .bg-welcome-wrap {
        transform-origin: center;
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    .bg-welcome-wrap.zoom {
        transform-origin: 49em 38em;
        -ms-transform: scale(2.5);
        -webkit-transform: scale(2.5);
        transform: scale(2.5);
    }

    .bima-char img {
        width: 18vw;
    }

    .welcome-container {
        width: 800px;
    }

    .welcome-text-card {
        width: 700px;
        height: 400px;
        padding: 40px;
        font-size: 16px;
        top: 50px;
    }

    .welcome-text-card strong {
        font-size: 28px;
    }

    .btn-start {
        left: 40px;
        bottom: 40px;
        width: 140px;
    }


    .btn-exit,
    .nav-list li a {
        padding: 12px;
    }

    .nav-list li.checked::before,
    .nav-list li.lock::before {
        background-size: 10%;
    }

    .icon-gift-home,
    .icon-fire-home,
    .icon-gems-home,
    .circle-ava .ava-img,
    .circle-ava {
        width: 43px;
        height: 43px;
    }

    .avatar-wrap {
        padding-right: 20px;
        margin-top: 20px;
    }

    .gems-card .gems-number {
        font-size: 18px;
    }
    .mission-card .mission-text {
        font-size: 18px;
    }
    .holiday-card .mission-text {
        font-size: 18px;
    }

    .gems-card img {
        left: 30px;
        width: 43px;
    }
    .mission-card img {
        left: 30px;
        width: 43px;
    }

    .holiday-card img {
        left: 30px;
        width: 43px;
    }

    .intro-topics #intro-topics {
        left: 70px;
        bottom: 4%;
    }

    .bg-course-page .gems-card img {
        position: relative;
        top: 2px;
        left: -2px;
    }

    .gems-card {
        padding: 4px 16px 4px 10px;
    }
    .mission-card {
        padding: 4px 16px 4px 10px;
    }

    .holiday-card {
        padding: 4px 16px 4px 10px;
    }

    .gems-card img {
        width: 36px;
        height: 36px;
    }

    .mission-card img {
        width: 36px;
        height: 36px;
    }

    .holiday-card img {
        width: 36px;
        height: 36px;
    }

    .avatar-wrap {
        align-items: center;
    }

    .circle-ava {
        border-width: 1px;
    }

    .avatar-card a {
        padding: 5px 6px;
        gap: 8px;
    }

    .icon-gift-home,
    .icon-fire-home,
    .icon-gems-home,
    .highschool-level .circle-ava,
    .elementary-level .circle-ava,
    .highschool-level .circle-ava .ava-img,
    .elementary-level .circle-ava .ava-img,
    .circle-ava, .circle-ava .ava-img {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 1280px) {
    .mission-card .mission-text {
        font-size: 16px;
    }
    .holiday-card .mission-text {
        font-size: 16px;
    }
    #intro-alphabet:before {
        top: 16px;
    }
    .vocab-review-button{
        padding:12px 24px;
    }
    #intro-phonics:before {
        top: 16px;
    }

    .photo-profile img {
        width: 6vw;
    }

    .modal-hexa .close-modal {
        top: 6vh;
        right: 1vh;
        width: 36px;
    }

    .modal-hexa h2 {
        font-size: 4vh;
    }

    .comingsoon-wrap img {
        width: 56px;
    }


    .quiz-dialogue-complete .container {
        width: 1050px;
    }


    .quiz-phonics .card-quiz {
        border-radius: 14px;
        border-width: 2px;
        width: 100%;
        height: unset;
    }

    .quiz-phonics .action-quiz {
        border-radius: 0 0 14px 14px;
        height: 6.4vh !important;
    }

    #list-card-phonics {
        gap: 12px !important;
        margin-top: 16px !important;
    }

    .action-quiz .btn-audio-listen {
        font-size: 10px;
    }

    .img-quiz .question-image {
        width: 40%;
    }

    .btn-audio-listen img {
        width: 20px;
    }

    .quiz-phonics .container {
        width: 560px;
    }

    #list-card-phonics .card-phonics .text-quiz {
        /*width: 170px;
        height: 75px;*/
        font-size: 24px !important;
    }

    .main-quiz-wrap {
        margin-top: 14px;

    }

    .quiz-image-sound .main-quiz-wrap {
        flex-wrap: nowrap;
    }

    .text-instruction {
        font-size: 12px;
    }

    .footer-navigation button {
        font-size: 14px;
    }

    .number-question,
    .footer-navigation button,
    .footer-navigation button.next-btn {
        border-width: 2px;
    }


    .footer-navigation {
        height: 60px;
    }

    .bg-welcome-wrap.zoom {
        transform-origin: 50vw 87vh;
    }

    .modal-hexa {
        width: 660px;
        height: 380px;
        font-size: 14px;
    }

    .welcome-text-card {
        width: 700px;
        height: 380px;
        font-size: 14px;
    }

    .welcome-container {
        width: 750px;
    }

    .btn-start {
        bottom: 25px;
    }

    .nav-list li {
        margin: 8px 0;
    }

    .btn-exit, .nav-list li a {
        padding: 8px;
    }

}

@media only screen and (width: 1250px){
}

@media (max-width: 1260px){
    .planet-wrap{
        width:50vw;
    }
}

@media (max-width: 1280px) and (min-height: 600px) and (max-height: 770px) {
    .dungeon-line {
        background-image: url(../images/contents/route-course.png);
        width: 45vw;
    }

    .planet-one {
        top: -10%;
        left: -10%;
    }
    .planet-two {
        top: -5%;
        left: 35%;
    }
    .planet-three {
        right: 5%;
        top: 8%;
    }
    .planet-four {
        right: 5%;
        bottom: 15%;
    }
    .planet-five {
        bottom: 8%;
        left: 35%;
    }
    .planet-six {
        bottom: 5%;
        left: -10%;
    }

    .bg-welcome-wrap.zoom {
        transform-origin: unset;
        transform: unset;
    }

    .welcome-text-card {
        top: 120px;
    }

    #elementary-chapter {
        height: 100dvh;
    }

    .elementary,
    .welcome-container {
        height: 100%;
    }

    .planet-wrap {
        top: 8vh;
    }

    .gems-card {
        margin-right: 14px;
    }
    .mission-card {
        margin-right: 14px;
    }
    .holiday-card {
        margin-right: 14px;
    }

    .level-label {
        font-size: 1.7vh;
    }

    .highschool-level .side-nav,
    .elementary-level .side-nav {
        height: 92%;
    }

    .quiz-puzzle .container {
        width: calc(100vw - 530px) !important;
    }

    .topics-route {
        top: 1vh;
    }

    .level-phonics .topics-route{
        top: 3vh;
    }

    .nav-top-bar-fix .btn-back-arr {
        top: 3vh;
    }
    .nav-top-bar-fix .vocab-review-button {
        /*top: 3vh;*/
    }

    .topic-01,
    .topic-03,
    .topic-05,
    .topic-07,
    .topic-09 {
        bottom: 30%;
    }

    .card-quiz {
        border-radius: 10px;
    }

    .text-quiz {
        height: 19.7vh;
    }

    .action-quiz,
    .quiz-phonics .action-quiz {
        border-radius: 0 0 8px 8px;
    }

    .main-quiz-wrap {
        gap: 12px;
    }

    .pretest-question {
        padding: 0 24px;
    }

    .dialogue-wrap .inside {
        gap: 12px;
        display: flex;
        flex-direction: column;
    }

    .dialogue-wrap {
        padding: 3dvh 1.5vw;
        height: 57dvh;
    }

    .name-img {
        border-radius: 8px 8px 0 0;
    }

    .card-quiz.quiz-img-sound {
        height: 44vh !important;
        margin: 0;
    }

    .audio-conversation-player {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .audio-conversation-player .scrollbar-dynamic {
        height: 31dvh !important;
    }

    .audio-conversation-wrap {
        height: auto !important;
    }

    .main-content-wrap .quiz-audio-conversation {
        height: 60vh;
    }

    #section-complete-sentence .middle-wrap {
        height: 80%;
    }

    .topic-08,
    .topic-04 {
        bottom: -8vh;
    }

    .topic-card.checked .topic-circle:after {
        width: 4vh;
        height: 4vh;
    }
}

/*FHD zoom 125%*/
@media screen and (min-width: 1390px) and (max-width: 1536px) {
    .deck-game-wrap {
        /*width: 60%;*/
        margin: 0 auto;
    }

    .audio-image-name {
        top: 9px;
    }

    .quiz-img-sound .img-quiz {
        padding: 0;
    }

    .quiz-img-sound .img-quiz .question-image {
        width: 50%;
    }

    .quiz-phonics .main-quiz-wrap {
        margin-top: 20px;
    }


    .nav-top-bar {
        height: 64px;
    }

    .btn-back-arr {
        top: 15px;
    }


    .posttest-back {
        top: unset;
    }

    .chapter-col-circle {
        width: 90px;
        height: 90px;
    }

    .chapter-col-name {
        font-size: 14px;
        max-width: 220px;
    }

    .chapter-lvl-01 {
        bottom: -70px;
    }

    .chapter-lvl-02 {
        top: 70px;
    }

    .chapter-lvl-03 {
        top: 200px;
        left: 260px;
    }

    .chapter-lvl-04 {
        right: 290px;
    }

    .chapter-lvl-05 {
        right: 270px;
    }

    .chapter-lvl-06 {
        right: 150px;
    }

}

@media screen and (min-width: 1920px) and (max-width: 1929px) {
    .audio-image-name {
        top: 9px;
    }
    #karaoke-panel #karaoke-lyrics{
        height: 260px;
    }
    .flip-card-image {
        justify-content: flex-start;
    }

    .left-text ul li, .default-modal-card ul li {
        background-size: .8vw;
    }
}

/*UHD zoom 150%*/
@media screen and  (min-width: 1930px) and (max-width: 2560px) {

    .audio-image-name {
        top: 9px;
    }

    .action-quiz .btn-audio-listen {
        font-size: 22px;
    }

    .action-quiz .btn-audio-listen {
        font-size: 22px;
    }

    .btn-audio-listen img {
        margin-right: 8px;
    }


    .main-content-wrap {
        height: 74vh;
    }


    .chapter-lvl-02 {
        top: 180px;
    }

    .chapter-lvl-03 {
        left: 380px;
    }

    .chapter-lvl-04 {
        top: -30px;
        right: 580px;
    }

    .chapter-lvl-05 {
        right: 550px;
    }

    .chapter-lvl-06 {
        right: 310px;
    }

    .chapter-lvl-07 {
        right: -80px;
        top: 110px;
    }

    .bg-welcome-wrap.zoom {
        transform-origin: 92em 75em;
    }

    .welcome-container {
        width: 1550px;
    }

    .welcome-text-card {
        width: 1120px;
        height: 690px;
        font-size: 28px;
        top: 30px;
        padding: 90px 90px 40px 75px;
    }

    .welcome-text-card strong {
        font-size: 46px;
    }

    .btn-start {
        right: 110px;
        bottom: 60px;
    }

    .bima-char img {
        width: 610px;
    }


    .btn-exit,
    .nav-list li a {
        padding: 22px;
    }


    .drop-text-dialog {
        min-width: 1000px;
    }
}

/*UHD zoom 125%*/
@media only screen and (width: 3072px) {
    .action-quiz .btn-audio-listen {
        font-size: 22px;
    }

    .btn-audio-listen img {
        margin-right: 8px;
    }


    .bg-welcome-wrap.zoom {
        transform-origin: 110em 85em;
    }

    .welcome-container {
        width: 1550px;
    }

    .welcome-text-card {
        width: 1120px;
        height: 690px;
        font-size: 28px;
        top: 230px;
        padding: 90px 90px 40px 75px;
    }

    .welcome-text-card strong {
        font-size: 46px;
    }

    .btn-start {
        right: 110px;
        bottom: 60px;
    }

    .bima-char img {
        width: 610px;
    }

    .btn-exit,
    .nav-list li a {
        padding: 22px;
    }

}

/*UHD zoom 100%*/
@media only screen and (width: 3840px) {
    .action-quiz .btn-audio-listen {
        font-size: 22px;
    }

    .btn-audio-listen img {
        margin-right: 8px;
    }


    .course-dungeon {
        margin-top: 100px;
    }

    .bg-welcome-wrap.zoom {
        transform-origin: 138em 111em;
    }

    .welcome-container {
        width: 2020px;
    }

    .welcome-text-card {
        width: 1510px;
        height: 848px;
        font-size: 38px;
        top: 290px;
        padding: 90px 90px 40px 75px;
    }

    .welcome-text-card strong {
        font-size: 46px;
    }

    .btn-start {
        right: 110px;
        bottom: 60px;
    }

    .bima-char img {
        width: 610px;
    }

    /*.btn-exit,
    .nav-list li {
        font-size: 26px;
    }*/
    .btn-exit,
    .nav-list li a {
        padding: 22px;
    }
    /*
        .close-modal{
            top: 2vh;
            right: 6px;
        }*/

    /*.dungeon-line {*/
    /*    width: 1490px;*/
    /*    !*height: 1170px ;*!*/
    /*}*/
    /*.planet-wrap {*/
    /*    width: 1490px;*/
    /*    height: 1490px;*/
    /*}*/
    /*.planet-two {*/
    /*    left: 600px;*/
    /*    top: -30px;*/
    /*}*/
    /*.planet-three {*/
    /*    top: 220px;*/
    /*    right: 130px;*/
    /*}*/
    /*.planet-four {*/
    /*    top: unset;*/
    /*    bottom: 310px;*/
    /*    right: 80px;*/
    /*}*/
    /*.planet-five {*/
    /*    top: unset;*/
    /*    bottom: 30px;*/
    /*    right: 660px;*/
    /*}*/
    /*.planet-six {*/
    /*    top: unset;*/
    /*    bottom: -60px;*/
    /*    left: -90px;*/
    /*}*/
}

@media (min-width: 1920px){

    #mission-challenge-wrap {
        width: 30%;
    }
}

@media screen and (max-height: 600px) {
    .paragraph-text {
        max-height: 16vh;
    }

    .practice-modal .title-text,
    .practice-modal .desc-text {
        font-size: 14px;
    }

    .practice-modal button {
        font-size: 16px;
        margin-top: 16px;
        padding: 0;
        height: 50px;
    }
    .modal-wotd picture {
        top: -58px;
    }

    .wotd-image {
        width: 50%;
    }
}

@media(min-width: 1280px){
    .chapter-col-circle img{
        width: 3vw;
    }
}

/*kerukunan cinta*/

.logo-login img {
    width: 80%;
}