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;
}

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

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-profile .lesson-map-wrapper,
.intro-planets .lesson-map-wrapper,
.intro-profile .gems-card,
.intro-gems_ .avatar-card a,
.intro-profile .hamburger-bar,
.intro-gems_ .hamburger-bar {
    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 {
    border: 4px solid #7CB1CB;
    background: #5898B8;
    padding: 8px 32px;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
    border-radius: 50px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05);
}

.btn-secondary {
    padding: 12px 8px;
    width: 100%;
    color: #fff;
    font-size: 24px;
    border-radius: 50px;
    transition: all ease-in-out .5s;
    border: 4px solid #8762CB;
    background: #6F42C1;
    font-weight: 700;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05);
}

.btn-white {
    padding: 8px 32px;
    font-size: 18px;
    font-weight: 700;
    color: #6F42C1;
    border: 4px solid #d1d1d1;
    background: #E5E5E5;
    border-radius: 50px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05);
}

.btn-blue {
    border: 4px solid #8762CB;
    background: #6F42C1;
    padding: 1.6vh 2vw;
    font-size: 3vh;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
    border-radius: 50px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05);
}

.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,
.btn-secondary: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/assets/bg-login.png);
    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;
    border: 4px solid #CFC0EA;
    background: #FEFEFC;
    box-shadow: 0px 10px 0px 0px rgba(255, 255, 255, 0.15);
}

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

.login-card h3 {
    color: #6F42C1;
    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: #6F42C1;
    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%;
}

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

.forgot-password a {
    color: #6F42C1;
    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-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: -116px;
    margin-bottom: 36px;
    justify-content: center;
}

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

.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: 0 auto;
    width: 1100px;
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: end;
}

.bg-welcome-wrap {
    background-image: url(../images/assets/bg-welcome-first.svg);
    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: 100vh;
    width: 100%;
    position: relative;
}

.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;
}

.welcome-text-card {
    /* background-color: #4E2E87;
    border:5px solid #CFC0EA; */
    background-image: url(../images/assets/bg-text.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 833px;
    height: 480px;
    border-radius: 20px;
    position: relative;
    top: 110px;
    color: #fff;
    font-family: nippo;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 1px;
    padding: 60px 190px 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 {
    background-color: transparent;
    position: absolute;
    right: 80px;
    bottom: 30px;
}

.bg-course-page {
    background-image: url(../images/assets/bg-course.jpg);
    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 {
    background: rgb(0, 0, 0, .4);
    position: fixed;
    left: 0;
    top: 0;
    padding: 40px;
    height: 100%;
    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: 130px;
    display: inline-block;
}

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

.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: 2.4vh;
}

.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: 50px;
    border: 4px solid #5D37A1;
    background-color: #6F42C1;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);
}

.btn-exit {
    width: 100%;
    color: #fff;
    border-radius: 50px;
    padding: 16px;
    /*font-size: 20px;*/
    font-weight: 600;
    text-align: center;
    margin-top: auto;
    letter-spacing: 1px;
    transition: all ease-in-out .3s;
    border: 4px solid #B7A0E0;
    background-color: transparent;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);
}

.btn-exit:hover {
    background-color: #6F42C1;
}

.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;
    background: rgba(22, 22, 22, 0.70);
    border-radius: 200px;
    border: 1px rgba(255, 255, 255, 0.10) solid;
    backdrop-filter: blur(16px);
    justify-content: center;
    gap: 12px;
    align-items: center;
}

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

.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-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;
    background: rgba(22, 22, 22, 0.70);
    border-radius: 200px;
    border: 1px rgba(255, 255, 255, 0.10) solid;
    backdrop-filter: blur(16px);
    justify-content: center;
    gap: 12px;
}

.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;
}

/*.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 {
    width: 38vw;
    /*height: 30.5vw;*/
    position: relative;
    left: 0;
    /*background-image: url(../images/contents/route-course.png);*/
    background-image: url(../images/contents/new-route-course-basic.png);
    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: -7vh;
    left: -5vw;
}

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

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

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

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

.planet-six {
    bottom: 6vh;
    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: .2vw solid #54C7BB;
    background: rgba(84, 199, 187, 0.40);
    color: #fff;
    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 {
    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(1.2em + 24px);*/
}

/*.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-color: #58CC05;
    background: rgba(88, 204, 5, 0.40);
    /*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/assets/bg-pre-test.svg);
    background-size: 100%;
    background-position: top center;
    background-repeat: repeat-y;
    height: 100vh;
    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: 24px;
    font-weight: 700;
    padding: 4px 24px;
    border-radius: 50px;
    border: 4px solid #DFDFDF;
    background-color: #F8F9F0;
}

.timer img {
    width: 40px;
    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: #E2D9F3;
}

.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: 110px;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0 56px;
    position: relative;
    /*z-index:10;*/
}

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

.btn-back-arr {
    position: absolute;
    left: 56px;
    top: 25px;
    background: transparent;
}

.posttest-back {
    top: unset;
}

.semester-option a,
.semester-option button {
    transition: all ease-in-out .2s;
    border: 4px solid #8762CB;
    background-color: #6F42C1;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);
    color: #fff;
    font-size: 20px;
    border-radius: 50px;
    padding: 12px 32px;
    margin: 0 12px;
    font-weight: 700;
    position: relative;
}

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

.semester-option a.no-active,
.semester-option button.no-active {
    color: #616161;
    border: 4px solid #CFCFC8;
    background-color: #fff;
}

.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;
}

.btn-next-instruction {
    width: 134px;
    height: 54px;
    padding: 16px 24px;
    background: #6F42C1;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
    border-radius: 200px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    display: inline-flex;
    align-self: center;
    cursor: pointer;
    text-align: center;
    color: white;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    word-wrap: break-word
}

@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;
}

.main-content-wrap {
    height: 76.82vh;
    padding: 2.04vh 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#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/assets/bg-img-sound.svg);
}

.bg-conversation-lr {
    background-image: url(../images/assets/bg-conversation.svg);
    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: #58CC05;
    box-shadow: 0 -4px 4px 0 #459D05 inset;
}

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

.coin-progress img {
    width: 38px;
    margin: 0 6px 0 12px;
    animation: 10s infinite coinSpin linear;
}

@keyframes coinSpin {
    from {

    }
    to {
        transform: rotate(360deg);
    }
}

.coin-number {
    font-size: 20px;
    font-weight: 700;
}

.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(0, 0, 0, 0.6);
    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 {
    background: #6F42C1;
    border: 4px solid #8762CB;
    color: #fff;
}

.footer-navigation button.try-again-btn {
    background: #EA2C2B;
    border-color: transparent;
    color: #fff;
}

.footer-navigation button:disabled,
.footer-navigation button[disabled] {
    color: #C2C2C2;
    border: 4px solid #d1d1d1;
    background: #E5E5E5;
    cursor: default;
}

.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.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%;
}

.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: #F15858;
}

.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;
}

.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;
}

.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: 24px;
    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: #6F42C1;
    padding: 16px;
}

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

.link-login-code img {
    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;
}

.btn-blue {
    background: #6F42C1;
    border: 4px solid #8762CB;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    padding: 8px 32px;
    font-weight: 700;
    border-radius: 50px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05);
}

.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: 0 16px;
}

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

.sound-onboard {
    max-width: 2.2vw;
    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: 18px 0;
    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-semester:before,
#intro-planets:before,
#intro-alphabet:before,
#intro-phonics: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 #6F42C1 transparent;
}

.text-intro {
    display: block !important;
    color: #fff;
    border-radius: 8px;
    background: #6F42C1;
    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: transparent;
}

.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-gems_ .gems-card {
    z-index: 15;
}

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

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

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

.intro-planets #intro-planets,
.intro-alphabet #intro-alphabet,
.intro-phonics #intro-phonics {
    visibility: visible;
}

.intro-alphabet .nav-alphabet,
.intro-phonics .nav-phonics {
    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-alphabet {
    width: 420px;
    top: 0;
    left: 110%;
}

#intro-phonics {
    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 #6F42C1 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 #6F42C1 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 #6F42C1 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 #6F42C1 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 #6F42C1 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;
}

.starting-circle {
    cursor: pointer;
}

.text-starting {
    background: #6F42C1;
    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: #6F42C1;
    border: 20px solid #D4C6EC;
}

#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;
}

.warning-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;
}

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

.warning-modal h3 {
    margin-bottom: 8px;
}

.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(226, 217, 243, 0.30);
    color: #6F42C1;
    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: 32px;
    height: 32px;
    top: 40%;
    right: .5vh;
    background-repeat: no-repeat;
}

/* Default icon */
.popover-test-nav a:before {
    transform: translateX(40%);
    background-image: url(../images/assets/purple_expand_more.png);
}

/* 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;
}

.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;
}

.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;
}

.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 {
    top: 25vh;
    left: -5.6vw;
}

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

.topic-03 {
    top: 25vh;
    left: 8vw;
}

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

.topic-05 {
    top: 25vh;
    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: scroll;
    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;
}

.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: 1.3vw;
}

.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;
}

.comingsoon-wrap h2 {
    color: #0a0a0a;
    font-size: 2vw;
    line-height: normal;
}

.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;
}

.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: 8px;
    font-weight: 600;
    font-size: 1vw;
    margin: 0 auto;
    width: 100%;
    position: relative;
}

.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: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.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 p {
    line-height: 6vh;
    margin-bottom: 3vh;
}

.complete-story-text p span {
    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;
}

.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: 400px;
    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
}

.right-top {
    display: flex;
    flex-direction: row;
    gap: 0.5vw;
}

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

.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/assets/progress-0.svg);
}

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

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

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

.progress-0.small {
    background-image: url(../images/assets/progress-0-small.png);
}

.progress-25.small {
    background-image: url(../images/assets/progress-25-small.png);
}

.progress-50.small {
    background-image: url(../images/assets/progress-50-small.png);
}

.progress-75.small {
    background-image: url(../images/assets/progress-75-small.png);
}

.progress-100 {
    background-image: url(../images/assets/progress-100.svg);
}

#new-profile-wrap {
    display: flex;
    flex-direction: row;
    width: 60%;
    gap: 16px;
    margin: 16px auto;
    /*overflow-y: scroll;*/
    padding-bottom: 40px;
}

#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: 24px 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;
}

.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: white;
    font-size: 20px;
    font-weight: 700;
    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%;
    gap: unset;
}

.select-level-wrapper .language-item li {
    color: #161616;
    font-size: 16px;
    padding: 8px 10px;
    width: 100%;

}

.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: #96C4DA;
}


.footer-navigation.success .next-btn {
    background: #5898B8;
    border-color: transparent;
}

.footer-navigation.failed {
    background: #FFC9C9;
}

.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: #93BBCE;
}

.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;
}

.try-again-footer span {
    color: #EA2C2B;
    font-size: 1.4vw;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}


.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;
}

/* 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-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;

}

.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 {
    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;
}

.days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin: 10px 8px;
    row-gap: 8px;
}

.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 div.streak {
    background-color: #E2D9F3;
    color: #9F81D6;
}

.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: #6F42C1;
    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;
}

.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: 1.875vw;
    margin: 0;
    padding: 0;
    border: 0;
    line-height: normal;
    vertical-align: baseline;
    display: block;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
}

@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: 80px;
    }

    .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;
    }

    .topic-circle {
        border-width: .3vw;
        width: 12vh;
        height: 12vh;
    }

    .topics-route {
        top: 1vh;
    }

    #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;
    }

    .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: .6vw;
    }

    .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-circle {
        width: 15vh;
        height: 15vh;
    }

    #elementary-chapter .topic-name span {
        font-size: .9vw;
    }


}

@media (max-width: 932px) {
    #video-instruction {
        width: 70% !important;
    }
}

@media (max-width: 1440px) {
    .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;
    }

    .footer-navigation {
        /*position: relative;*/
    }

    /*.spelling-black-screen{
        min-width: 55%;
    }*/
    .drag-arrange-sentence-box, .drop-arrange-sentence-box {
        /*width: 45px;*/
        /*height: 45px;*/
    }

    .spelling-black-screen h2 {
        /*padding: 5px 14px;*/
        /*font-size: 16px;*/
    }

    .drop-spelling-wrap {
        /*margin: 18px 48px;*/
    }

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

    .spelling-yellow-screen {
        /*padding: 10px 12px;*/
        /*min-width: 54%;*/
    }

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

    .quiz-dialogue-complete .dialogue-wrap {
        /*width: 880px;*/
    }

    .dialogue-drag h2 {
        /*font-size: 16px;*/
        /*padding: 8px 8px;*/
    }

    .dragList {
        /*margin: 4px 0;*/
        border: 2px solid #F5F5F5;
        /*height: 40px;*/
        border-radius: 8px;
    }

    .dragList .content-drag {
        /*font-size:14px;*/
    }

    /*.dialogue-wrap {*/
    /*	width: 880px;*/
    /*	height: 330px;*/
    /*}*/
    .text-chat-box {
        /*font-size:14px;*/
        letter-spacing: 0;
        position: relative;
    }

    .avatar-chat-box {
        /*flex-basis: 72px;*/
    }

    /*.chat-wrap {
        margin-bottom: 4px;
    }*/
    .chat-text {
        /*margin-top:0px;*/
        /*padding: 6px 16px;*/
    }

    .text-quiz {
        /*font-size: 36px;*/
        /*height: 80px;*/
        /*width: 190px;*/
    }

    .quiz-phonics .container {
        width: 870px;
    }

    .number-question {
        /*font-size: 16px;*/
        /*padding: 4px 22px;*/
    }

    .img-quiz .question-image {
        width: 30%;
    }

    .main-quiz-wrap {
        margin-top: 20px;
    }

    .learning-video {
        /*width: 600px;*/
        /*height: auto;*/
    }

    .video-progress {
        width: 200px !important;
    }

    .nav-top-bar {
        height: 90px;
    }

    .btn-back-arr {
        top: 24px;
    }

    .posttest-back {
        top: unset;
    }

    .btn-back-arr img {
        width: 44px;
    }

    .chapter-col-circle {
        width: 80px;
        height: 80px;
    }

    .chapter-col-circle img {
        width: 40px;
    }

    .chapter-lvl-list.current:before {
        width: 75px;
        height: 75px;
        top: 3px;
    }

    /*.img-planet {*/
    /*    top: 20px;*/
    /*    left: 15px;*/
    /*    width: 120px;*/
    /*}*/
    .ufo::before {
        width: 100px;
        height: 100px;
        top: 84px;
    }

    /*.planet {*/
    /*    width: 150px;*/
    /*    height: 150px;*/
    /*    position: absolute;*/
    /*}*/
    /*.planet-wrap {*/
    /*    width: 500px;*/
    /*    height: 500px;*/
    /*}*/
    /*.planet-one {*/
    /*    top: -80px;*/
    /*    left: -85px;*/
    /*}*/
    /*.planet-two {*/
    /*    top: -44px;*/
    /*}*/
    /*.planet-four {*/
    /*    top: 250px;*/
    /*    right: -50px;*/
    /*}*/
    /*.planet-five {*/
    /*    top: unset;*/
    /*    bottom: -40px;*/
    /*    right: 170px;*/
    /*}*/
    /*.planet-six {
        top: 58vh;
    }*/
    /*.dungeon-line {*/
    /*    width: 500px;*/
    /*}*/
    .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;
    }

    /*.modal-hexa{
        width: 680px;
        height: 400px;
    }*/
    .welcome-text-card {
        width: 680px;
        height: 400px;
        padding: 40px;
        font-size: 16px;
        top: 50px;
    }

    .welcome-text-card strong {
        font-size: 28px;
    }

    .btn-start {
        right: 40px;
        bottom: 40px;
        width: 190px;
    }

    .logo-nav img {
        width: 80px;
    }

    /*.side-nav {
        padding: 20px;
    }*/
    .nav-list {
        margin-top: 0px;
    }

    .btn-exit,
    .nav-list li a {
        padding: 12px;
    }

    .nav-list li.checked::before,
    .nav-list li.lock::before {
        background-size: 10%;
    }

    .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;
    }

    .gems-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;
    }

    .gems-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-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) {

    #intro-alphabet:before {
        top: 16px;
    }

    #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;
    }

    /*.learning-video {*/
    /*    width: 540px;*/
    /*}*/
    /*.dungeon-line {*/
    /*    width: 460px;*/
    /*}*/
    /*.planet-four {*/
    /*    right: -10px;*/
    /*}*/
    /*.planet-five {*/
    /*    bottom: 10px;*/
    /*}*/
    /*.planet-six {*/
    /*    bottom: -15px;*/
    /*}*/
    .text-chat-box {
        /*font-size: 12px;*/
    }

    .avatar-chat-box {
        /*flex-basis: 60px;*/
    }

    .quiz-dialogue-complete .container {
        width: 1050px;
    }

    .quiz-image-sound .container {
        /*width: 960px;*/
    }

    .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;
    }

    /*.main-content-wrap {
        height: 61vh;
    }*/
    .text-instruction {
        font-size: 12px;
    }

    .footer-navigation button {
        font-size: 14px;
    }

    .number-question,
    .footer-navigation button,
    .footer-navigation button.next-btn {
        border-width: 2px;
    }

    .number-question {
        /*font-size: 14px;*/
    }

    .footer-navigation {
        height: 60px;
    }

    .bg-welcome-wrap.zoom {
        transform-origin: 50vw 87vh;
    }

    .modal-hexa,
    .welcome-text-card {
        width: 660px;
        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 (max-width: 1280px) and (min-height: 600px) and (max-height: 770px) {
    .dungeon-line {
        background-image: url(../images/contents/route-course.png);
    }

    .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;
    }

    /*.planet-four {
        top: 38vh;
    }*/
    .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;
    }

    .nav-top-bar-fix .btn-back-arr {
        top: 3vh;
    }

    .topic-01,
    .topic-03,
    .topic-05,
    .topic-07,
    .topic-09 {
        top: 20vh;
    }

    .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 .scrollbar-dynamic {
        height: 28dvh !important;
    }

    .audio-conversation-wrap {
        height: 48vh !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%;
    }

    /*.spelling-black-screen{
        width: 60%;
    }*/
    .drag-spelling-box, .drop-spelling-box {
        /*width: 50px;*/
        /*height: 50px;*/
    }

    .spelling-black-screen h2 {
        /*padding: 5px 14px;*/
        /*font-size: 16px;*/
    }

    .drop-spelling-wrap {
        /*margin: 24px 40px;*/
    }

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

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

    .dragList {
        /*margin: 8px 0;*/
    }

    .dialogue-wrap {
        /*height: 428px;*/
    }

    .chat-text {
        /*padding: 4px 16px;*/
    }

    .chat-text {
        /*margin-top: 4px;*/
    }

    .avatar-chat-box {
        /*flex-basis: 80px;*/
    }

    .text-chat-box {
        /*font-size:14px;*/
    }

    /*.chat-wrap {
        margin-bottom: 20px;
    }*/
    .quiz-phonics .main-quiz-wrap {
        margin-top: 20px;
    }

    .text-quiz {
        /*width: 275px;*/
        /*height: 120px;*/
        /*font-size: 30px;*/
    }

    /*.img-quiz .question-image {
        width: 210px;
    }*/
    .main-content-wrap {
        /*height: 65vh;*/
    }

    .learning-video {
        /*width: 790px;*/
        /*height: 420px;*/
    }

    .nav-top-bar {
        height: 90px;
    }

    .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) {
    .avatar-chat-box {
        /*flex-basis: 130px;*/
    }

    .audio-image-name {
        top: 9px;
    }

    .text-chat-box {
        /*font-size:22px;*/
    }

    .dialogue-wrap {
        /*width: 1200px;*/
        /*height: 648px;*/
        /*padding: 30px;*/
    }

    /*.chat-wrap {
        margin-bottom: 28px;
    }*/
    .action-quiz .btn-audio-listen {
        font-size: 22px;
    }

    .action-quiz .btn-audio-listen {
        font-size: 22px;
    }

    .btn-audio-listen img {
        margin-right: 8px;
    }

    .text-quiz {
        /*font-size: 68px;*/
        /*width: 370px;*/
        /*height: 230px;*/
    }

    /*.img-quiz .question-image{
        width: 380px;
    }*/
    .main-content-wrap {
        height: 74vh;
    }

    .learning-video {
        /*width: 1062px;*/
        /*height: 640px;*/
    }

    .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 {
        font-size: 26px;
    }*/
    .btn-exit,
    .nav-list li a {
        padding: 22px;
    }

    /*.dungeon-line {*/
    /*    width: 940px;*/
    /*    !*height: 940px;*!*/
    /*}*/
    /*.planet-wrap {*/
    /*    width: 940px;*/
    /*    height: 940px;*/
    /*}*/
    /*.planet-two {*/
    /*    left: 320px;*/
    /*}*/
    /*.planet-three {*/
    /*    top: 120px;*/
    /*}*/
    /*.planet-four {*/
    /*    top: unset;*/
    /*    bottom: 100px;*/
    /*    right: 80px;*/
    /*}*/
    /*.planet-five {*/
    /*    top: unset;*/
    /*    bottom: -30px;*/
    /*    right: 460px;*/
    /*}*/
    /*.planet-six {*/
    /*    top: unset;*/
    /*    bottom: -60px;*/
    /*    left: -90px;*/
    /*}*/
    .drop-text-dialog {
        min-width: 1000px;
    }
}

/*UHD zoom 125%*/
@media only screen and (width: 3072px) {
    .avatar-chat-box {
        /*flex-basis: 140px;*/
    }

    .text-chat-box {
        /*font-size:22px;*/
    }

    .dialogue-wrap {
        /*width: 1200px;*/
        /*height: 648px;*/
    }

    .action-quiz .btn-audio-listen {
        font-size: 22px;
    }

    .btn-audio-listen img {
        margin-right: 8px;
    }

    .text-quiz {
        /*font-size: 68px;*/
        /*width: 370px;*/
        /*height: 230px;*/
    }

    .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 {
        font-size: 26px;
    }*/
    .btn-exit,
    .nav-list li a {
        padding: 22px;
    }

    /*.dungeon-line {*/
    /*    width: 1170px;*/
    /*    !*height: 1170px ;*!*/
    /*}*/
    /*.planet-wrap {*/
    /*    width: 1170px;*/
    /*    height: 1170px;*/
    /*}*/
    /*.planet-two {*/
    /*    left: 320px;*/
    /*}*/
    /*.planet-three {*/
    /*    top: 100px;*/
    /*    right: 130px;*/
    /*}*/
    /*.planet-four {*/
    /*    top: unset;*/
    /*    bottom: 190px;*/
    /*    right: 80px;*/
    /*}*/
    /*.planet-five {*/
    /*    top: unset;*/
    /*    bottom: 10px;*/
    /*    right: 460px;*/
    /*}*/
    /*.planet-six {*/
    /*    top: unset;*/
    /*    bottom: -60px;*/
    /*    left: -90px;*/
    /*}*/
}

/*UHD zoom 100%*/
@media only screen and (width: 3840px) {
    .action-quiz .btn-audio-listen {
        font-size: 22px;
    }

    .btn-audio-listen img {
        margin-right: 8px;
    }

    .text-quiz {
        /*font-size: 68px;*/
        /*width: 370px;*/
        /*height: 230px;*/
    }

    .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;*/
    /*}*/
}