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

[draggable] {
    user-select: none;
}

#columns {
    display: flex;
    flex-direction: column;
}

.form-control {
    height: auto;
    border-radius: 0.25rem !important;
}

.column {
    height: 150px;
    width: 150px;
    display: inline-block;
    border: 2px solid #666666;
    background-color: #ccc;
    margin-right: 5px;
    border-radius: 10px;
    box-shadow: inset 0 0 3px #000;
    text-align: center;
    cursor: move;
    margin: 20px 0px;
}

.column header {
    color: #fff;
    background: radial-gradient(ellipse at center, #000000 0%, #7c7c7c 100%);
    text-shadow: #000 0 1px;
    box-shadow: 5px;
    padding: 5px;
    border-bottom: 1px solid #ddd;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    pointer-events: none;
}

.column.over {
    border: 2px dashed #000;
}

.practiceQtn .container::-webkit-scrollbar,
.wrapper main::-webkit-scrollbar,
.wrapper aside::-webkit-scrollbar,
.chapresult::-webkit-scrollbar,
.home-right .cover-menu::-webkit-scrollbar,
.home-left .cover-menu::-webkit-scrollbar,
.home-left .myprog-cover::-webkit-scrollbar,
.certificate.certificate-cover::-webkit-scrollbar,
.myprogress.mlstone_cover::-webkit-scrollbar,
#chaptest_result .chapTest-modal::-webkit-scrollbar,
.solution.solstyle::-webkit-scrollbar,
.home-tabcontent::-webkit-scrollbar,
.sc_reward .skilllist::-webkit-scrollbar,
.chap-view-sol .check::-webkit-scrollbar,.myprogress .myprog::-webkit-scrollbar,
.skill_chart_home .skill_chart_wrap .sc_list::-webkit-scrollbar,.overview_wrap::-webkit-scrollbar,
.top-parent::-webkit-scrollbar  {
    width: 5px;
}

/* Track */
.practiceQtn .container::-webkit-scrollbar-track,
.wrapper main::-webkit-scrollbar,
.wrapper aside::-webkit-scrollbar,
.chapresult::-webkit-scrollbar,
.home-right .cover-menu::-webkit-scrollbar,
.home-left .cover-menu::-webkit-scrollbar,
.home-left .myprog-cover::-webkit-scrollbar,
.certificate.certificate-cover::-webkit-scrollbar,
.myprogress.mlstone_cover::-webkit-scrollbar,
#chaptest_result .chapTest-modal::-webkit-scrollbar,
.solution.solstyle::-webkit-scrollbar,
.home-tabcontent::-webkit-scrollbar,
.chap-view-sol .check::-webkit-scrollbar,
.sc_reward .skilllist::-webkit-scrollbar,
.myprogress .myprog::-webkit-scrollbar,
.skill_chart_home .skill_chart_wrap .sc_list::-webkit-scrollbar,#imageZoomModal #imagediv::-webkit-scrollbar ,
.overview_wrap::-webkit-scrollbar,
.top-parent::-webkit-scrollbar 
{
    box-shadow: inset 0 0 5px #fff;
    border-radius: 60px;
    margin-right: 10px;
}

/* Handle */
.practiceQtn .container::-webkit-scrollbar-thumb,
.wrapper main::-webkit-scrollbar,
.wrapper aside::-webkit-scrollbar,
.chapresult::-webkit-scrollbar,
.home-right .cover-menu::-webkit-scrollbar,
.home-left .cover-menu::-webkit-scrollbar,
.home-left .myprog-cover::-webkit-scrollbar,
.certificate.certificate-cover::-webkit-scrollbar,
.myprogress.mlstone_cover::-webkit-scrollbar,
#chaptest_result .chapTest-modal::-webkit-scrollbar,
.solution.solstyle::-webkit-scrollbar,
.home-tabcontent::-webkit-scrollbar,
.sc_reward .skilllist::-webkit-scrollbar,
.chap-view-sol .check::-webkit-scrollbar, .myprogress .myprog::-webkit-scrollbar,
.skill_chart_home .skill_chart_wrap .sc_list::-webkit-scrollbar,#imageZoomModal #imagediv::-webkit-scrollbar,
.overview_wrap::-webkit-scrollbar,
.top-parent::-webkit-scrollbar  {
    background: grey;
    border-radius: 10px;
}

/* game css */
/* flip the pane when hovered */
.card-container:not(.manual-flip):hover .card,
.card-container.hover.manual-flip .card {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.card-container.static:hover .card,
.card-container.static.hover .card {
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    transform: none;
}

/* flip speed goes here */
.card {
    -webkit-transition: -webkit-transform .5s;
    -moz-transition: -moz-transform .5s;
    -o-transition: -o-transform .5s;
    transition: transform .5s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: relative;
}

/* hide back of pane during swap */
.front,
.back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #FFF;
    /* box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14); */
}

/* front pane, placed above back */
.front {
    z-index: 2;
}

/* back, initially hidden pane */
.back {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
    z-index: 3;
}

.back .btn-simple,
.front .btn-simple {
    position: absolute;
    right: 0;
    bottom: 4px;
}

/*        Style       */

.card-container,
.card {
    border: 0;
}

.card-container,
.front,
.back {
    width: 100%;
    height: 384px;
}

.btn-simple {
    opacity: .8;
    color: #666666;
    background-color: transparent;
}

/*       Fix bug for IE      */

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {

    .front,
    .back {
        -ms-backface-visibility: visible;
        backface-visibility: visible;
    }

    .back {
        visibility: hidden;
        /* -ms-transition: all 0.2s cubic-bezier(.92,.01,.83,.67); */
    }

    .front {
        z-index: 4;
    }

    .card-container:not(.manual-flip):hover .back,
    .card-container.manual-flip.hover .back {
        z-index: 5;
        visibility: visible;
    }
}

.image-icon-ten {
    width: 85%;
}

.back h4 {
    font-size: 20px;
    color: #a29d9d;
    line-height: 29px;
    padding: 0 37px;
}

.game-height-fix1 {
    height: 405px;
    overflow-y: auto;
}

.title-game {
    text-align: left !important;
}

.game-height-fix1::-webkit-scrollbar {
    width: 10px;
}

/* Track */
.game-height-fix1::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #fff;
    border-radius: 60px;
    margin-right: 10px;
}

/* Handle */
.game-height-fix1::-webkit-scrollbar-thumb {
    background: #007afc;
    border-radius: 10px;
}


/* Home page styles starts */
.banner {
    background-color: #007afc;
    padding: 20px;
}

.banner .title-txt {
    text-align: center;
}

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

.banner .banner-top-title .banner-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.banner .banner-top-title .faleft {
    color: #fff;
    font-size: 20px;
    position: relative;
    top: 1px;
}

.banner .banner-top-title .arrow-cover {
    cursor: pointer;
}

.banner .banner-top-title .faleft.faleft-double {
    margin-left: -5px;
}

.banner .banner-top-title .banner-top-txt {
    font-weight: 600;
    color: #fff;
    font-size: 16px;
}

.banner .title {
    color: #fff;
    font-weight: bold;
    padding-top: 10px;
}

.dashboard .banner .bwrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 150px;
    margin: 0px 40px 0px 0px;
}

.wrap-imgcup {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.banner .bwrapper {
    display: grid;
    grid-template-columns: 2fr 3fr 1fr;
}

.dash .banner .bwrapper {
    grid-template-columns: 2fr 2fr 60px;
    gap: 20px;
}

.box-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    gap: 5px;
}

.box-container>.row {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 5px 0;
    flex-wrap: nowrap;
    flex-direction: column;
}

.box-container .points>p {
    color: #676767;
    font-size: 17px;
    display: flex;
    gap: 5px;
}

.box-container .points>p>span {
    color: #000;
}

.box-container .row .d-flex {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 0px;
}

.points {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px 15px;
    border-radius: 5px;
    font-weight: bold;
    flex-direction: row;
    text-align: center;
    justify-content: center;
}

.box-container .row:nth-child(2) .points {
    justify-content: flex-start;
    padding: 10px 15px 10px 22px;
}

.points img {
    width: 40px;
    height: 40px;
}

.banner .sharebtn {
    display: flex;
    justify-content: flex-end;
}

.banner .sharebtn .sharebtn-style {
    display: flex;
    padding: 10px;
    border-radius: 25px;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.banner .sharebtn .sharebtn-style p {
    font-size: 16px;
    color: #fff;
    font-weight: 600;
}

.banner .sharebtn .sharebtn-style img {
    width: 25px;
    height: 27px;
}

.banner .bwrapper .cups {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    order: 2;
}

.banner .bwrapper .cups .badges {
    display: flex;
    gap: 30px;
    padding-top: 20px;
}

.dashboard .banner .bwrapper .stu-info {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-direction: column;
    order: 1;
}

.banner .bwrapper .stu-info {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-direction: column;
    order: 0;
}

.banner .bwrapper .stu-info .st-img {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.banner .bwrapper .stu-info .badges {
    display: inline-flex;
    justify-content: space-evenly;
}

.banner .bwrapper .stu-info .badges .cup-img img {
    width: 80%;
}

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

.banner .content .badges {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    text-align: center;
    margin: 30px 100px;
}

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

.banner .stu-info .stu-img {
    width: 85px;
    height: 82px;
    border-radius: 40px;
}

.banner .stu-info .crown {
    width: 90px;
    margin-bottom: -18px;
}

.banner .stu-info {
    text-align: center;
}

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

.banner .stu-info .earned-coins {
    background-color: #70c105;
    border-radius: 45px;
    /* padding: 5px 35px; */
    padding: 5px 20px;
    cursor: default;
}

.banner .stu-info .earned-coins .coins-info {
    display: flex;
    justify-content: space-around;
    /* gap: 25px; */
    gap: 10px;
    align-items: center;
}

.banner .content .info p {
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 0px;
}

.banner .content .info .img-style {
    display: flex;
    gap: 10px;
}

.banner .content .info .img-style {
    padding: 10px 0px;
    width: 100%;
}

.banner .content .info .img-style img {
    width: 30px;
    height: 30px;
}

.banner .coins-info .noof-coins {
    color: #fff;
    font-weight: bold;
    text-align: center;
}

.banner .coins-info .noof-coins .coins {
    font-size: 24px;
}

.banner .coins-info .noof-coins .crn {
    font-size: 18px;
}

.banner .badges .wrap-award {
    display: flex;
    flex-direction: column;
}

.wrap-award .box-score h3 {
    position: relative;
    font-size: 16px;
    bottom: 40%;
    color: #FFF;
    text-align: center;
}

.wrap-award .box-score {
    position: relative;
    top: -2.5px;
}

.wrap-award .box-score .emptycup-bottom {
    width: 60px;
    height: 26px;
}

.wrap-award .award-img {
    position: relative;
}

.wrap-award .award-img .goldcup {
    width: 130px;
}

.wrap-award .award-img .medal {
    position: absolute;
    top: 16%;
    left: 35%;
    width: 40px;
}

.wrap-award .award-img .medal.streak {
    position: absolute;
    top: 15%;
    left: 38%;
    width: 30px;
}

.wrap-award-empty .award-img {
    position: relative;
}

.wrap-award-empty .award-img .medal {
    position: absolute;
    top: 17%;
    left: 36%;
    width: 35px;
}

.wrap-award-empty .empty-box-score {
    position: relative;
    top: -2px;
}

.wrap-award-empty .empty-box-score img {
    width: 55px;
}

.emptycup {
    width: 130px;
}

.dashboard .banner-box {
    background-color: #fff;
    padding: 30px;
    order: 3;
    border-radius: 11px;
}

.banner-box {
    background-color: #fff;
    padding: 20px 50px 20px 50px;
}

.banner-box .banner-box-txt {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.banner-box p {
    font-size: 22px;
    color: #676767;
    font-weight: 600;
}

.banner-box .banner-box-txt p {
    margin-top: 5px;
}

.banner-box .achievement {
    display: flex;
    justify-content: space-between;
}

.banner-box .achievement .subdiv {
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    gap: 10px;
}

.banner-box .achievement .imgtxt-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.banner-box .banner-box-txt img {
    width: 40px;
    height: 40px;
}

.banner-box .achievement .imgtxt-wrap img {
    width: 40px;
    height: 40px;
}

/* Home - Aside Menu  */

.home-right .cover-menu {
    height: 400px;
    overflow-y: auto;
}

.home-left .cover-menu,
.certificate.certificate-cover,
.myprogress.mlstone_cover {
    height: 500px;
}

.home-left .cover-menu {
    background-color: #ecf5ff;
}

.certificate.certificate-cover {
    overflow-y: auto;
    background-color: #ecf5ff;
}

.myprogress.mlstone_cover {
    overflow-y: auto;
}

.home-left .myprog-cover {
    overflow: auto;
    height: 400px;
    background-color: #eff4ff;
}

.home-left .myprog-wrap {
    margin: 10px 50px 50px 50px;
}

.home-left .myprog-wrap .myprog-box {
    display: grid;
    grid-template-columns: 2fr 1fr;
    justify-content: space-between;
    border: 1px solid #DFDFDF;
    padding: 10px 20px;
    margin: 20px 0px;
    cursor: pointer;
    background-color: #fff;
    border-radius:5px;
}

.home-left .myprog-wrap .myprog-box:hover {
    border: 1px solid #007afa;
    background-color: #EFF4FF;
}

.home-left .myprog-wrap .myprog-box .box-left .prog-status {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.home-left .myprog-wrap .myprog-box .box-left p {
    font-weight: 600;
}

.home-left .myprog-wrap .myprog-box .box-left .prog-status .prog-status-img {
    text-align: center;
}

.home-left .myprog-wrap .myprog-box .box-left .prog-status .prog-status-img p {
    margin-top: 5px;
}

.home-left .myprog-wrap .myprog-box .box-left .prog-status-img img {
    width: 40px;
    height: 40px;
}

.home-left .myprog-wrap .myprog-box .box-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.home-right .menu.home-course {
    margin: 10px 50px 50px 50px;
}

.home-right .menu {
    margin: 10px 10px 50px 10px;
    display: flex;
    flex-direction: column;
    background-color: #eff4ff;
}

.home-right .menu .classes {
    align-items: center;
    padding: 8px;
    font-weight: bold;
    background-color: white;
    border: none;
    display: flex;
    width: auto;
    /*border: 0.5px solid #bdbdbd;*/
    border: 1px solid #DFDFDF;
    justify-content: space-between;
}

.home-right .menu .classes:hover {
    background-color: #EFF4FF;
    border: 1px solid #007AFC;
}

.home-right .menu button img {
    width: 60px;
    height: 50px;
}

.home-right .classes img {
    margin-right: 30px;
}

.home-right .classes .arralign {
    margin-right: 10px;
}

.home-right .menu button p {
    font-size: 16px;
}

.dashboard .home .home-wrapper {
    display: grid;
    grid-template-columns: auto;
    grid-gap: 10px;
}

.home .home-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
}

.home .home-wrapper.myprogress {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
}

.dashboard .home .home-wrapper.myprogress {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
}

.home .home-wrapper .title {
    margin: 15px 35px;
    font-size: 25px;
    letter-spacing: 1px;
}

.home .home-wrapper .home-left {
    background-color: #eff4ff;
}

.home .home-wrapper .home-right {
    background-color: #eff4ff;
    text-align: center;
}

.home .home-wrapper .home-right h3,
.home .home-wrapper .home-left h3 {
    font-weight: 600;
    padding: 13px;
    margin: 0px;
    font-size: 18px !important;
    text-align: center;
    background-color: #eff4ff;
    border: 2px solid #d8eafe;
}

.dash .home .home-wrapper .certificate.certificate-cover h3,
.dash .home .home-wrapper .home-left h3 {
    font-weight: 600;
    padding: 13px;
    margin: 0px;
    font-size: 18px !important;
    text-align: center;
    background-color: #fff;
    border: 2px solid #d8eafe;
}

.home .home-wrapper .certificate.certificate-cover {
    background-color: #eff4ff;
}

.nav-tabs .nav-item {
    width: 50%;
    text-align: center;
    font-weight: 600;
}

#myTab .nav-item a.active,
#myTab .nav-item a:hover {
    color: #007afc;
}

#myTab .nav-link {
    color: black;
    text-decoration: none;
    font-size: 18px;
    letter-spacing: 1px;
}

.dash_tab#myTab .nav-link {
    padding: 12px;
}

#myTabContent {
    padding: 15px 0px;
}

.tab-wrap .badges {
    padding: 20px 0px;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.tab-wrap .certificate>.badges {
    padding: 10px;
    background-color: #fff;
    margin: 20px;
    gap: 15px;
    cursor: pointer;
}

.certificate.certificate-cover .badges {
    padding: 15px;
    background-color: #fff;
    margin: 20px 0px;
    gap: 15px;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-radius: 10px;
}
/*dev changes*/
.tab-wrap .badges img {
    width: 60px;
    height: 60px;
}

.certificate .badges>img {
    width: 35px;
    height: 50px;
}

.certificate .badges .content-wrap .chapter {
    color: #a2a2ae;
    font-size: 16px;
}

.certificate .badges .content-wrap .topic {
    color: #1c1d1f;
    font-weight: bold;
    font-size: 18px;
}

/* Home page styles ends */


/* Desktop-1 css starts */
.classes {
    display: inline-flex;
}

aside .menu-content>a {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background-color: #fff;
    margin: 10px 0px;
    text-decoration: none;
    cursor: pointer;
    border-radius: 5px;
    border: 1px solid #DFDFDF;
    border-bottom: 4px solid #dfdfdf;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

aside .menu .course__box.active {
    background-color: #EFF4FF;
    border: 2px solid #007AFC;
    color: #000;
}

aside .menu .menu-content a:hover .chapterno,
aside .menu .menu-content a.active .chapterno {
    color: white;
    font-size: 14px;
}

aside .menu .menu-content a:hover .title,
aside .menu .menu-content a.active .title {
    color: white;
    font-size: 16px;
}


aside .menu .menu-content .chapter__boxes .icon .fa-chevron-right {
    color: #007AFC;
}

aside .menu .menu-content .chapter__boxes .cls .title {
    font-weight: bold;
    color: #000;
    font-size: 16px;
}

aside .menu .menu-content .chapter__boxes .cls .title.active {
    font-weight: bold;
    color: #fff;
    font-size: 16px;
}

aside .menu .menu-content .chapter__boxes .cls .chapterno {
    color: #91919F;
    font-size: 14px;
}


aside .menu .menu-content .chapter__boxes:hover {
    background-color: #007AFC;
}

aside .menu .menu-content .chapter__boxes:hover .cls .chapterno {
    color: #fff;
}

aside .menu .menu-content .chapter__boxes:hover .cls .title {
    color: #fff;
}

aside .menu .menu-content .chapter__boxes:hover .icon .fa-chevron-right {
    color: #fff;
}

.fa-arrow-left {
    cursor: pointer;
}

aside .menu .cls .title {
    font-weight: bold;
}

aside .menu .sub-title {
    color: #007afc;
    font-weight: bold;
    margin-top: 20px;
    font-size: 18px;
}

aside .menu .sub-title img {
    width: 23px;
    margin: 0px 10px;
}

.menu {
    border: none;
    background-color: #f5f5f5;
}

.menu .classes .courses__title {
    text-align: left;
    padding-top: 0px;
    font-size: 16px;
}

.menu .classes .classes-wrap {
    display: flex;
    align-items: center;
}

.menu .classes .diamond-img {
    margin-right: 0px;
    width: 30px;
    height: 20px;
}


.menu button.active,
.menu button:hover {
    background-color: #EFF4FF;
    outline: none;
}

.classes img {
    margin-right: 20px;
}

.menu button {
    display: block;
    width: 100%;
    align-items: center;
    margin: 10px 0px;
    position: relative;
    border-radius: 5px !important;
    overflow: hidden;
    font-weight: bold;
    background-color: white;
    border: 2px solid transparent;
}

.menu p {
    text-align: left;
    padding-top: 0px;
    font-size: 14px;
}

/* Main content styles */
.chap-wrapper p img {
    width: 25px;
}

.chap-wrapper p img.prog_tick {
    width: 35px;
}

.chap-wrapper .chap-content {
    display: flex;
    justify-content: space-between;

    align-items: center;
    padding: 10px;
}

.chap-wrapper .chap-content.chapwrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.chap-wrapper .chapter .chap-progress {
    height: 5px;
    background-color: yellowgreen;
    border-radius: 0px;
}

.chap-wrapper .chapter .progress-cover {
    background-color: #d6d6dc;
}

.chap-wrapper .chapter .chap-progress.progress-status {
    height: 5px;
    background-color: yellowgreen;
   /* border-radius: 0px;*/
    width: 80%;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.chap-wrapper .chap-content .medal-wrap {
    display: flex;
    gap: 10px;
    align-items: center;
}

.chap-wrapper .chap-content .medal-wrap img {
    width: 25px;
}

.chap-wrapper .chap-content .medal-wrap img.circle {
    width: 20px;
    height: 20px;
}

.chap-wrapper .chap-content .star-wrap {
    display: flex;
    gap: 10px;
}

.chap-wrapper .chap-content .star-wrap .percentage {
    font-size: 15px;
    font-weight: bold;
}

.chap-wrapper .chap-content .star-wrap img {
    width: 18px;
    height: 18px;
}

.chap-wrapper .medals-stars {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end
}

.chap-wrapper .medals-stars p {
    font-size: 18px;
    position: relative;
    top: -15px;
}

.chap-wrapper .medals-stars .ms {
    width: 18px;
}

.chap-wrapper .chapter:hover,
.chap-wrapper .chapter.active {
    background-color: #007AFC;
    color: white;
}

.chap-wrapper .medals-stars .med-gold {
    margin-right: 10px;
}

.chap-wrapper .chapter:hover .chapterno,
.chap-wrapper .chapter.active .chapterno
{
    color: white;
}

.chap-wrapper button {
    text-align: left;
    padding: 20px;
    margin: 15px;
    width: 90%;
    position: relative;
    border-radius: 0 !important;
    overflow: hidden;
    font-weight: bold;
    background-color: white;
    border: none;
}

.chap-wrapper button:hover,
.chap-wrapper button.active {
    background-color: #fff !important;
    color: #007AFC;
}

.chap-wrapper button#getnew-ques:hover,
.chap-wrapper button#getnew-ques.active {
    background-color: #f5f5f5 !important;
    color: #c3c4cc;
}

.chap-wrapper button:hover .chapterno,
.chap-wrapper button.active .chapterno,
.chap-wrapper button:hover .title,
.chap-wrapper button.active .title {
    color: white;
}
/*dev changes*/
main .container .chap-wrapper .myprogress {
    display: flex;
    gap: 43px;
    align-items: center;
    padding: 10px 10px;
    background-color: #EFFFD9;
    font-size: 18px;
    font-weight: 500;
    /*margin: 0px 15px 15px;*/ 
    cursor: pointer;
    border-bottom: 3px solid #c4d8ee;
    /*border-radius: 8px;*/
    justify-content: space-between;
}

main .container .chap-wrapper .myprogress:hover .arralign {
    color: #726f6f;
}

main .container .chap-wrapper .myprogress>div {
    display: flex;
    align-items: center;
    gap: 20px;
}

main .container .chap-wrapper .myprogress p:nth-child(2),
main .container .chap-wrapper .myprogress p:nth-child(3) {
    display: flex;
    align-items: center;
    gap: 5px;
}

main .container .chap-wrapper .myprogress .gold-star {
    padding-bottom: 5px;
    margin-right: 5px;
}

main .container .chap-wrapper .course-intro {
    background-color: #fefeff;
    margin: 10px 15px;
    padding: 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

main .container .chap-wrapper .course-intro:hover {
    color: #000;
}

.wrapper {
    display: grid;
    grid-template-columns: 340px auto;
}

.account-icon {
    cursor: pointer;
    width: 40px;
    height:40px;
}

.dropdown-item {
    color: black;
}

.dropdown-item:hover {
    background-color: #007afa96 !important;
    color: white !important;
}

.dropdown-item img {
    width: 20px;
    height: 20px;
}

.dropdown-item.faq-help img,.dropdown-item.about-us img {
    height: 17px;
    width: 17px;
}

.dropdown-toggle {
    color: #007AFC;
}

.dropdown-item {
    color: black;
}

.menu .fullcourse-btn {
    width: 100%;
    border-radius: 40px !important;
    margin-top: 20px;
    padding: 10px 0px;
}

.fullcourse-btn img {
    width: 25px;
    margin-right: 15px;
}

.fullcourse-btn p {
    text-align: center;
    padding-top: 0px;
}

/* Desktop-1 css ends */

/* Desktop-3 css starts */

.wrapper aside {
    background-color: #ECF5FF;
    margin: 0px 15px;
    height: 100vh;
    overflow-y: auto;
}

aside .menu {
    margin: 20px 0px;
    padding: 20px;
    background-color: #ECF5FF;
    margin-bottom: 60px;
}

.wrapper aside .menu .crs__title {
    font-weight: bold;
    padding-bottom: 10px;
    font-size: 17px;
    text-align: left;
}

aside .menu .active {
    background-color: #007afc;
    color: #FFFFFF;
    cursor: pointer;
}

.top-header {
    background-color: #007afa;
    color: #fff;
    font-size: 22px;
    padding: 10px;
    display: grid;
    grid-template-columns: 20px 1fr;
    justify-content: center;
    align-items: center;
}

.top-header .headertxt {
    display: flex;
    justify-content: center;
}

.chapter .chap-content .locked {
    color: #bbbbbb;
}

.chapter .chap-content img.lockimg {
    width: 18px;
}

.chapter .chap-content .cover img {
    border: 3px solid #fff;
    border-radius: 0px 0px 5px 5px;
    width: 70px;
    height: 60px;
}

.chapter .chap-content .cover {
    display: flex;
    align-items: center;
    gap: 20px;
}

.chapter .chap-content .chapcnt-cover {
    display: flex;
    justify-content: center;
}

.chapter .chap-content .arralign {
    display: flex;
    justify-content: flex-end;
}

.chap-wrapper .subheader-wrap {
    display: flex;
    justify-content: space-between;
}

.chap-wrapper .subheader-clock {
    padding-right: 20px;
    height: 25px;
    width: 48px;
}

/* Chapter test starts */
.chapter-wrap .wrap {
    margin: 30px;
}

.chapter-wrap .wrap .instructions ul>li {
    margin: 30px 0px;
    font-size: 20px;
}

.chapter-wrap .wrap .instructions ul {
    margin: 0px 18px;
}

.chapter-wrap .wrap .instructions {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.chapter-wrap .wrap .info-section {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.chapter-wrap .wrap .info-section .left {
    font-size: 20px;
    font-weight: bold;
    color: red;
}

.chapter-wrap .wrap .info-section .left>p {
    font-size: 22px;
}

.chapter-wrap .wrap .instructions .instruct {
    font-size: 22px;
    font-weight: bold;
    color: #000;
}

.chapter-wrap .wrap .info-section .right {
    display: flex;
    gap: 100px;
}

.chapter-wrap .wrap .info-section .right .noOfQ {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chapter-wrap .wrap .info-section .right .noOfQ {
    font-size: 18px;
}

.chapter-wrap .wrap .info-section .right .timing {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chapter-wrap .wrap .info-section .right .noOfQ>img {
    width: 25px;
    height: 25px;
}

.chapter-wrap .wrap .info-section .right .timing>img {
    width: 23px;
    height: 23px;
}

.chapter-wrap .wrap .startbtn {
    text-align: center;
    border-radius: 30px;
    padding: 10px 20px;
    font-size: 18px;
}
/* Desktop-3 css ends */

/* Desktop-4 css starts */
main .container .chap-wrapper .chap-cover {
    margin: 10px 0px;
}

main .container .chap-wrapper .chap-cover .chapter {
    background-color: #fefeff;
    margin: 0px 20px;
    padding: 0px;
    display: grid;
    grid-template-columns: 30px 1fr 1fr;
    cursor: pointer;
    border-radius: 5px;
}

main .container .chap-wrapper .chap-cover .chapter:hover {
    color: #000;
}

main .container .chap-wrapper .chapter .indicator {
    display: flex;
    justify-content: flex-end;
}

main .container .chap-wrapper .chapter .indicator img {
    width: 22px;
}

.container .chapter .concept {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0px 0px 0px 15px;
}

.container .chapter .concept .title.learn {
    font-size: 17px;
    color: #000;
}

.container .chapter .concept .title.grey {
    font-size: 15px;
    color: #91919F;
}

main .container .chap-wrapper .course-intro .concept {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0px 0px 0px 15px;
    width: 50%;
}

main .container .chap-wrapper .course-intro .thumb-img {
    display: flex;
    justify-content: flex-end;
    position: relative;
    cursor: pointer;
    width: 50%;
}

.container .chapter .concept .title {
    font-size: 17px;
    font-weight: bold;
}

.container .chapter .chapterno {
    color: #91919F;
    font-weight: 600;
    font-size: 15px;
}

main .container .chap-wrapper .chapter .thumb-img {
    display: flex;
    justify-content: flex-end;
    position: relative;
    cursor: pointer;
}

main .container .chap-wrapper .chapter .thumb-img .img-cover {
    position: relative;
}

main .container .chap-wrapper .chapter .thumb-img img {
    width: 100%;
    border-radius: 5px;
}

main .container .chap-wrapper .chapter .thumb-img .cover-playbtn {
    background-image: url(../img/playbutton.png);
    background-repeat: no-repeat;
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    top: 50;
    top: 50%;
    left: 50%;
    background-size: 16px;
    transform: translate(-50%, -50%);
}

.vid-imgcover .cover-playbtn {
    background-image: url(../img/playbutton.png);
    background-repeat: no-repeat;
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    top: 50;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

main .container .chap-wrapper .chap-cover .progress {
    background-color: #70c105;
    height: 5px;
    margin: 0px 20px;
    border-bottom-left-radius: 18px !important;
    border-bottom-right-radius: 18px !important;
}

main .container .video {
    display: flex;
    padding: 10px 20px;
    justify-content: space-between;
}

main .container .chap-wrapper .video .vid-wrap {
    padding: 5px;
    cursor: pointer;
}

main .container .chap-wrapper .video .vid-wrap .no-progress {
    background-color: #f1f1fa;
    height: 5px;
    border-radius: 0px;
}

main .container .video .exmpvid .exmpvid-txt {
    font-weight: bold;
    font-size: 15px;
    margin-top: 2px;
}

main .container .chap-wrapper .video .img-cover {
    position: relative;
}

main .container .chap-wrapper .video .img-cover img {
    width: 100%;
    border-radius: 5px;
}

main .container .chap-wrapper .video .vid-wrap .progress {
    background-color: #70c105;
    height: 5px;
    border-radius: 0px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

main .container .video .exmpvid {
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: center;
}

main .container .video .exmpvid .indicator img {
    width: 14px;
}

main .container .chap-wrapper .praQuestions .chapter .result-img img {
    width: 15px;
}

main .container .chap-wrapper .chap-header {
    background-color: #ffe4e1;
    margin: 0px 20px;
    padding: 10px 0px;
    text-align: center;
}

main .container .chap-wrapper .chap-header .headertxt {
    font-size: 18px;
    font-weight: bold;
}

main .container .chap-wrapper>.flashpack-cover {
    margin: 30px 0px;
}

.video-wrap {
    height: 73vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

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

.popup-vid video {
    width: 100%;
    height: 470px;
}

.video .vid-wrap .img-cover .cover-playbtn {
    background-image: url(../img/playbutton.png);
    background-repeat: no-repeat;
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    top: 50;
    top: 50%;
    left: 50%;
    background-size: 20px;
    transform: translate(-50%, -50%);
}

#vd-feedback {
    /*changes done for video intro button alignment*/
    background-image: url(../img/ic_rate_icon.png);
    background-repeat: no-repeat;
    /*position: absolute;*/
    content: "";
    width: 35px;
    height: 35px;
    /*top: 8%;
    right: 1%;*/
    background-size: 35px;
    /*transform: translate(-50%, -50%);*/
}

#myModal .learnconcept-vid {
    top: 6%;
    right: 0%;
}
#videoModal .learnconcept-vid {
    top: 6%;
    right: 0%;
}

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

.load-questions button {
    color: #99CAFE;
    border: 2px solid #007AFC;
    padding: 10px 35px;
    margin: 10px 0px;
    width: auto;
    height: auto;
    border-radius: 10px !important;
    background-color: transparent;
    cursor: pointer;
}

.load-questions button img {
    width: 15px;
    margin-right: 8px;
}

.load-questions .info {
    color: #c3c4cc;
}

.load-questions button:disabled:hover {
    /*background-color: #007afc !important;*/
    color: #fff;
}

.vd-thumbnail {
    width: 100%;
}

.vid-img {
    width: 65%;
}

.vid-imgcover {
    display: flex;
    justify-content: center;
}

.vid-imgcover .vid-img {
    width: 100%;
    height: 470px;
}

#get-newq h6 {
    font-weight: 500;
    font-size: 20px;
    color: #828282;
    text-align: center;
    padding: 10px 10px 0;
    line-height: 29px;
}

#invalid-card h6 {
    font-weight: 500;
    font-size: 20px;
    color: #828282;
    text-align: center;
    padding: 10px 10px 0;
    line-height: 29px;
}

#chapter-tests h6 {
    font-weight: 500;
    font-size: 20px;
    color: #828282;
    text-align: center;
    padding: 14px 14px 0;
    line-height: 29px;
    margin-top: 4%;
}

#chapter-tests img {
    width: 23px;
    margin-left: 4px;
}

#chapter-tests h2 {
    text-align: left;
    color: #007AFC;
    font-size: 22px;
    font-weight: 600;
    margin: 0px;
}

#Course-assigned h6 {
    font-weight: 500;
    font-size: 20px;
    color: #828282;
    text-align: center;
    padding: 14px 14px 0;
    line-height: 29px;
    margin-top: 4%;
}

#Course-assigned h2 {
    text-align: left;
    color: #007AFC;
    font-size: 22px;
    font-weight: 600;
    margin: 0px;
}

#Course-assigned .modal-body {
    padding: 21px 44px 24px 22px;
}

#Course-assigned .mb-wrap {
    margin: 15px 0px;
}

#Course-assigned .mb-wrap p {
    font-weight: 500;
    font-size: 20px;
    color: #828282;
}

#Course-assigned .happy-learn {
    margin-top: 8%;
}

#Course-assigned .footer-style p {
    color: #007afa;
    cursor: pointer;
}

/* Desktop-4 Modal */

#myModal .modal-content {
    border: none;
    height: 575px;
}
#videoModal .modal-content {
    border: none;
    height: 575px;
}

.modal-closebtn {
    color: #fff;
}

.modal .modal-title {
    font-weight: bold;
}

.modal-closebtn:hover {
    color: #fff;
}

button.close {
    outline: 0;
}

.modal-header {
    background-color: #007afa;
    color: #fff;
}

#myModal .modal-header .mtitle {
    font-size: 22px;
}

#myModal .modal-header .topics {
    display: flex;
}

#myModal .modal-header .topics .main-title {
    font-size: 22px;
}

#myModal .modal-header .topics .hyphen {
    font-size: 22px;
}

#myModal .modal-header .topics .sub-title {
    font-size: 22px;
}

/*video*/
#videoModal .modal-header .mtitle {
    font-size: 22px;
}

#videoModal .modal-header .topics {
    display: flex;
}

#videoModal .modal-header .topics .main-title {
    font-size: 22px;
}

#videoModal .modal-header .topics .hyphen {
    font-size: 22px;
}

#videoModal .modal-header .topics .sub-title {
    font-size: 22px;
}
.sol-video .solvid-review {
    top: 6% !important;
    right: 1% !important;
}

.vdcover {
    padding: 0px 30px 0px 30px;
}

.vdmodal .form-header .topics {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
}

.vdmodal .form-header .topics p {
    font-size: 26px;
    font-weight: bold;
    color: #fff;
    padding: 0px;
    margin-left: 10px;
}

.thumbnailcover {
    height: 80vh;
    align-items: center;
    position: relative;
    margin-top: 20px;
}

.thumbnailcover .cover-playbtn {
    background-image: url(../img/playbutton.png);
    background-repeat: no-repeat;
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    top: 50;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#myModal video {
    object-fit: fill;
    height: 400px;
}
#videoModal video ,.video-js {
    height: 400px;
}

#courseIntro video {
    object-fit: fill;
    height: 450px;
}


#videoModal .myvid-cover,
#myModal .myvid-cover {
    position: relative;
}

#videoModal .cover-playbtn,
#myModal .cover-playbtn,
#courseIntro .cover-playbtn,
.sol-video .cover-playbtn {
    background-image: url(../img/playbutton.png);
    background-repeat: no-repeat;
    position: absolute;
    content: "";
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    background-size: 30px;
    transform: translate(-50%, -50%);
    z-index: 99999;
}

.foot {
    width: 100%;
    background-color: #fff;
    margin: 5px 0px 10px 0px;
}

.foot .answer {
    display: grid;
    background-color: #e8f9fd;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 30px;
    padding: 8px 0px;
    color: #959597;
    font-size: 25px;
}

.foot .ans-section {
    display: flex;
    justify-content: space-around;
    background-color: #e8f7fb;
    padding: 5px;
}

.foot .ans-section .two-option {
    width: 40%;
    text-align: center;
    background-color: #cedde1;
    padding: 10px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
}

.foot .ans-section .fillup {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

.foot .ans-section .Operator {
    display: flex;
    align-items: center;
}

.foot .ans-section .divider-style {
    display: flex;
    justify-content: center;
}

.foot .ans-section .divider {
    height: 2px;
    background-color: #000;
    margin: 5px 0px;
    width: 125px;
}

.foot .ans-section .txtbox {
    display: flex;
    width: 15%;
    align-self: center;
}

.foot .ans-section .txtbox.desktxtbox {
    width: 50%;
}

.foot .ans-section .txtbox.ratiotxtbox {
    width: 50%;
}

.foot .ans-section .txtbox.mixtxtbox {
    width: 70%;
}

.foot .ans-section .mixed-fraction {
    display: flex;
    justify-content: center;
    align-items: center;
}

.foot .ans-section .mixed-fraction.deskfraction {
    gap: 20px;
}

.foot .ans-section .mixed-fraction.deskfraction .wrapdeskfraction {
    display: flex;
    justify-content: flex-end;
}

.foot .ans-section .mixed-fraction.deskfraction .txtboxstyle {
    width: 70%;
}

.foot .ans-section .divider-style.mfdivider {
    display: flex;
    justify-content: flex-start;
}

.foot .ans-section .divider-style .mixed-divider.divider {
    width: 70%;
}

.foot .ans-section .mixfraction-cover {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.foot .ans-section .divider-style .mixed-divider {
    height: 2px;
    background-color: #000;
    margin: 5px 0px;
    width: 180px;
}

.foot .fraction {
    background-color: #e8f7fb;
    padding: 5px;
    display: flex;
    flex-direction: column;
}

.foot .answer .text p {
    font-size: 20px;
}

.foot .answer .unit p {
    font-size: 20px;
}

.foot .answer .text p {
    font-size: 20px;
}

.foot .option {
    padding: 5px;
    background-color: #e8f7fb;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.foot .option .opt {
    padding: 10px 28px;
    background-color: #cedde1;
    border-radius: 40px;
    font-weight: bold;
    cursor: pointer;
}

.foot .option .opt.opt-val {
    padding: 10px 20px;
}

.foot .answer .text {
    display: flex;
    align-items: center;
    justify-content: end;
}

.foot .answer .unit {
    display: flex;
    align-items: center;
    justify-content: start;
}

.action-btns {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.action-btn-video {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 20px 0px;
    grid-gap: 50px;
}

.action-btns .prev {
    text-align: end;
}

.action-btns .submitbtn {
    padding: 5px 30px;
    border-radius: 30px;
    color: #fff;
    border: 1px solid #aaaaac;
    background-color: #007afa;
    font-weight: bold;
}

.action-btns .submit {
    text-align: center;
}

.game-body #submit-success {
    position: absolute;
    width: 100%;
    height: 100% !important;
}

.action-btns .pnbtn {
    padding: 5px 20px;
    border-radius: 30px;
    color: #007afc;
    border: 1px solid #aaaaac;
    background-color: #fff;
    font-weight: bold;
}

.modal-footer {
    justify-content: center;
    flex-direction: column;
    padding: 10px 0px;
}

.modal-footer .action-btns .pnbtn {
    padding: 5px 20px;
    border-radius: 30px;
    color: #007afc;
    border: 1px solid #aaaaac;
    background-color: #fff;
    font-weight: bold;
}

.modal-footer .action-btn-video {
    margin: 0px;
}

#Course-assigned .footer-style {
    display: flex;
    justify-content: flex-end;
}

.action-btns .next {
    text-align: start;
}

.pqmodal form {
    position: relative;
}

.form-height {
    height: 73vh;
}

.practiceQtn .container {
    height: 305px;
    overflow-y: auto;
}

.practiceQtn .container .info {
    color: #959597;
    margin: 20px 0px 40px 0px;
    font-size: 25px;
}

.practiceQtn .container .question {
    margin-bottom: 30px;
    font-size: 18px;
}

.chaptertest-slider .carousel-item .chapQsection {
    padding: 0px 20px;
    height: 325px;
    overflow-y: scroll;
}

.chap-view-sol .chaptertest-slider .carousel-item .chapQsection {
    padding: 0px 20px;
    height: auto;
    overflow-y: auto;
}

.chaptertest-slider .carousel-item .chapresult {
    height: 380px;
    overflow-y: auto;
}

.chap-view-sol .chaptertest-slider .carousel-item .chapresult {
    height: auto;
    overflow-y: auto;
}

.chaptertest-slider .carousel-item .chapQsection .question {
    font-size: 20px;
}

.chaptertest-slider .carousel-item .chapQsection .chapAnssection {
    margin: 20px 0px;
}

.chaptertest-slider .carousel-item .chapQsection .chapAnssection .answer {
    font-size: 20px;
    margin-bottom: 20px;
}

.chaptertest-slider .carousel-item .chapQsection .chapAnssection .ans {
    font-size: 20px;
    margin: 10px 0px;
}

.chaptertest-slider .carousel-item .crt-ans {
    background-color: #27ae60;
    padding: 10px;
    margin-top: 30px;
}

.chaptertest-slider .carousel-item .a-section .wrong-ans {
    background-color: #eb5757;
    padding: 10px;
    margin-top: 30px;
}

.chaptertest-slider .carousel-item .a-section .crt-ans p,
.chaptertest-slider .carousel-item .a-section .wrong-ans p {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}

.chaptertest-slider .carousel-item .a-section .vd-solution {
    text-align: center;
    margin: 20px 0px;
}

.chaptertest-slider .carousel-item .a-section .solution .soltxt {
    font-size: 18px;
    margin: 20px 0px;
    font-weight: bold;
}

.chaptertest-slider .carousel-item .a-section .solution {
    padding: 5px;
    font-size: 16px !important;
}

#submit-success .cone-img {
    width: 22%;
}

.carousel .carousel-inner #slide-1 {
    padding: 0px;
}

.carousel-control-next,
.carousel-control-prev {
    width: 10%;
    top: 250px;
}

.practiceQtn .container .answer {
    font-size: 18px;
}

.practiceQtn .container .ans {
    margin: 18px 0px;
    font-size: 18px;
}

.practiceQtn .container .a-section .crt-ans {
    background-color: #27ae60;
    padding: 20px;
    margin-top: 30px;
}

.practiceQtn .container .a-section .wrong-ans {
    background-color: #eb5757;
    padding: 20px;
    margin-top: 30px;
}

.practiceQtn .container .a-section .crt-ans p,
.practiceQtn .container .a-section .wrong-ans p {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
}

.practiceQtn .container .a-section .solution .soltxt {
    font-size: 18px;
    margin: 20px 0px;
    font-weight: bold;
}

.practiceQtn .container .a-section .solution p {
    font-size: 16px;
}

.practiceQtn .container .a-section .vd-solution {
    text-align: center;
    margin: 20px 0px;
}

/* video solution modal */
.sol-video {
    background-color: #000000a3;
}

.popup-content .icon {
    position: absolute;
    top: 200px;
    right: 0px;
    padding: 6px;
    background-color: yellow;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
}

/* Desktop-4 css ends */

/* Modal */
.form-sec {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 92%;
    background-color: #fff;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    transition: 0.3s ease-in-out;
    overflow-y: scroll;
}

.form-sec .form-field {
    background-color: #f3f5f8;
    padding: 13px 0px;
}

.form-sec .form-header {
    background-color: #007afa;
    display: grid;
    grid-template-columns: auto 50px;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
}

.form-sec h3 {
    font-size: 30px;
    font-weight: 600;
    line-height: 32px;
    color: #fff;
    text-align: left;
    padding: 10px;
    margin-bottom: 0px !important;
    margin-top: 0px;
}

.form-sec .close-btn {
    font-size: 2.5rem;
    font-weight: 600;
    color: #fff;
    background-color: transparent;
    border: none;
}

.form-sec .close-btn span {
    position: relative;
    top: -4px;
}

.form-sec .close-btn:hover {
    box-shadow: none !important;
    outline: none !important;
}

.form-sec .close-btn:focus {
    outline: none;
    box-shadow: none;
}

.form-sec .form {
    padding: 0px 30px 40px 30px;
}

.form-sec .form .inputs {
    padding: 20px 0px;
}

.form-sec .form .inputs label {
    font-size: 15px;
    font-weight: 600;
    color: #5a5a5a;
    margin-bottom: 0px !important;
}

.form-sec .form .inputs input {
    padding: 8px 0px 4px 0px;
    margin-top: 0px;
    color: #007afa;
    width: 100%;
    border: none;
    font-size: 18px;
    border-bottom: 1px solid #0002;
}

.form-sec .form-header .topics .sub-title {
    font-size: 23px;
    margin-top: 3px;
}

/* All popup css */
.main-pause h5 {
    font-size: 15px;
    font-weight: 600;
    padding: 1% 0 0%;
    color: #ED6C2D;
}

.main-pause .pause-btn {
    width: 70% !important;
    border: 1px solid #cccccc80;
    box-shadow: 0px 0px 3px 0px #ccc;
    margin: 5%;
}

.main-pause .pause-btn:hover {
    background-color: transparent !important;
    color: #007AFC;
}

.main-pause .resume-btn {
    width: 70%;
}

.main-pause h2 {
    font-size: 18px !important;
    font-weight: 600;
    padding: 0 0 14px;
}

.main-pause p {
    font-size: 14px;
    line-height: 20px;
}

.main-success .modal-header {
    background: #007AFC;
    color: #fff;
    align-items: center;
}

.main-success .modal-header h5 {
    font-size: 22px;
    font-weight: bold;
    text-align: center;
}

.new-stars img {
    width: 30px !important;
}

.teck-img img {
    width: 24% !important;
    margin: 4%;
}

.text-black-3 {
    color: #333 !important;
}

.close {
    color: #fff;
    opacity: 1;
}

.well-done img {
    width: 70%;
}

.share-btn {
    background: #fff !important;
    border-radius: 30px !important;
    font-size: 16px;
    padding: 4px 40px;
    margin: 0 5%;
}

#submit-success {
    position: absolute;
    width: 100%;
    height: auto;
}

.gold-medal-btn {
    border: 1px solid #F2A43A;
    color: rgb(0, 0, 0);
    margin: 4%;
    font-size: 16px;
    background: rgba(242, 164, 58, 0.2) !important;
    border-radius: 5px !important;
    padding: 11px 23px;
}

.gold-medal-btn:hover {
    color: #000 !important;
}

.gold-medal-btn img {
    padding: 0 8px 0 2px;
    width: 35px;
}

.share-btn img {
    width: 32px;
    padding: 0 14px 0px 0;
}

.share-btn:hover {
    color: #007AFC;
}

/* View solution */
.view-solution-btn {
    background-color: #007AFC !important;
    border-radius: 30px !important;
    font-size: 16px;
    padding: 5px 23px;
    margin: 0 5%;
}

.solution.solstyle {
    height: 250px;
    overflow-y: auto;
}

.chap-view-sol .solution.solstyle {
    height: auto;
    overflow-y: auto;
}

.chap-view-sol .arrleft {
    height: 100%;
    width: 160px;
    position: fixed;
    z-index: 1;
    top: 55%;
    left: 0;
    overflow-x: hidden;
    padding-top: 20px;
    cursor: pointer;
}

.chap-view-sol .arright {
    height: 100%;
    width: 160px;
    position: fixed;
    z-index: 1;
    top: 55%;
    right: 0;
    overflow-x: hidden;
    padding-top: 20px;
    cursor: pointer;
}
.arrleft {
    height: 100%;
    /*width: 160px;*/
     width: 88px;
    position: fixed;
    z-index: 1;
    top: 55%;
    left: 0;
    overflow-x: hidden;
    padding-top: 20px;
    cursor: pointer;
}

.arright {
    height: 100%;
    /*width: 160px;*/
    width: 88px;
    position: fixed;
    z-index: 1;
    top: 55%;
    right: 0;
    overflow-x: hidden;
    padding-top: 20px;
    cursor: pointer;
}

.paddle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3em;
}

.left-paddle {
    left: 12%;
    z-index: 1;
    height: 50px;
    margin: 20px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #007AFC;
    font-size: 40px;
}

.right-paddle {
    right: 12%;
    z-index: 1;
    height: 50px;
    margin: 20px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #007AFC;
    font-size: 40px;
}

.chap-view-sol .hidden {
    display: none;
}

.chap-view-sol .indi-cover {
    margin-top: 20px;
    height: 100px;
    position: relative;
    margin: 1em auto;
}

.chaptertest-cover .hidden {
    display: none;
}

.chaptertest-cover .indi-cover {
    margin-top: 20px;
    height: 100px;
    position: relative;
    margin: 1em auto;
}
.well-done h1 {
    font-size: 22px;
    font-weight: 600;
    margin: 2% 0;
}

.oops-done h1 {
    font-size: 22px;
    font-weight: 600;
}

.well-done p {
    font-size: 18px;
    font-weight: 600;
    color: #91919F;
}

.well-done h5 {
    font-size: 16px;
    font-weight: 600;
    color: #91919F;
}

.well-done h2 {
    font-size: 22px;
    font-weight: bold;
    color: #067DFD;
    padding: 12px 0 0;
}

.oops-done h3 {
    font-size: 20px;
    font-weight: 600;
    margin-top: 3%;
}

.progress_bar .star {
    border-bottom: 1px solid #ccc !important;
    padding: 0 0 10px;
}

.main-progress h4 {
    font-weight: 600;
    color: #828282;
    font-size: 16px;
    line-height: 33px;
}

.progress-cover {
    display: flex;
    justify-content: space-around;
}

.progress-cover.prgbar {
    justify-content: flex-start;
}

.progress-cover .value {
    display: flex;
    justify-content: center;
}

.progress_bar .pro-bar {
    background: hsl(0, 0%, 97%);
    box-shadow: 0 1px 2px hsl(0deg 0% 0% / 10%) inset;
    height: 4px;
    margin-bottom: 12px;
    position: relative;
    margin: 35px 3%;
}

.progress_bar {
    border: 1px solid #ccc;
    padding: 5px 0px 50px;
}

.progress_bar .progress_bar_title {
    color: #000;
    font-size: 15px;
    font-weight: 600;
    position: relative;
    top: -28px;
    z-index: 1;
}

.progress_bar img {
    width: 25px;
}

.progress_bar .progress_number {
    float: right;
    margin-top: 0;
}

.num-size {
    font-size: 18px !important;
    color: #000 !important;
    font-weight: bold;
}

.progress_number1 {
    margin-top: -27px !important;
}

.progress_number2 {
    top: 8px !important;
    text-align: center;
}

.progress-bar-inner {
    background-color: #70C105 !important;
    width: 100% !important;
}

.progress_bar .progress-bar-inner {
    background-color: hsl(0, 0%, 88%);
    display: block;
    width: 0;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: width 1s linear 0s;
}

.progress_bar .progress-bar-inner:before {
    content: "";
    background-color: hsl(0, 0%, 100%);
    border-radius: 50%;
    width: 4px;
    height: 4px;
    position: absolute;
    right: 1px;
    top: 0;
    z-index: 1;
}

.progress_bar .progress-bar-inner:after {
    content: "";
    width: 14px;
    height: 14px;
    background-color: inherit;
    border-radius: 50%;
    position: absolute;
    right: -4px;
    top: -5px;
}

.modal-mathzap {
    background-color: #007AFC;
    padding: 3% 8% 8%;
}

.modal-mathzap h3 {
    font-weight: bold;
    color: #fff;
    font-size: 22px;
    padding: 4px 0 13px;
}

.scratch-card h1 {
    font-size: 21px;
    padding: 17px 0 0;
    font-weight: bold;
}

.modal-mathzap .modal-body {
    background-color: #fff;
}

.rewars-modal .modal-content {
    background-color: transparent !important;
    border: 0 !important;
}

.rewars-body {
    background: #fff;
    padding: 10px;
    margin-bottom: 6%;
}

.rewars-body h2 {
    font-weight: 600;
    font-size: 22px;
    padding: 0 0 6px;
    color: #70C105;
}

.rewars-body p {
    font-size: 16px;
    color: #828282;
}

.rewars-body h5 {
    text-align: right;
    font-size: 12px;
    color: #828282;
}

.rewars-body h1 {
    font-weight: 600;
    font-size: 24px;
    padding: 6px 0 0;
}

.rewars-body h4 {
    font-weight: 600;
    font-size: 22px;
    color: #70C105;
    padding: 10px;
}

.rewars-body h6 {
    font-size: 15px;
    color: #828282;
}

.rewars-body-award {
    background: #F2F2F2;
    border-radius: 0px;
    padding: 11px 0 4px;
    margin: 5% 4%;

}

.rewars-body-award h2 {
    font-weight: 600;
    font-size: 20px;
    padding: 0 0 4px;
    color: #70C105;
}

.rewars-body-award h3 {
    font-size: 15px;
    color: #161719;
}

.rewars-body .progress-cover img {
    width: 74px;
}

.rewars-body .gree-badge {
    width: 19px !important;
}

.rewars-modal .modal-body {
    padding: 0;
}

.rewars-modal .close {
    padding: 10px;
    font-size: 44px;
    font-weight: 100;
    color: #fff !important;
}

.rewars-body-main_1 {
    border: 2px solid #F15A24;
    padding: 4px;
    border-radius: 4px;
}

.black_share_btn {
    display: flex;
    border: 0;
    background: transparent;
}

.black_share_btn:focus {
    outline: 0px !important;
}

.gree-downoload {
    width: 15px !important;
}

.black_share_btn span {
    padding: 0 7px;
    line-height: 19px;
    text-transform: uppercase;
    color: #161719;
    font-size: 18px;
}

.rewars-body-main {
    border: 1px solid #F15A24;
    padding: 11px;
    border-radius: 4px;
}

.red_rewards h2 {
    color: #F15A24 !important;
}

.blue_rewards h2 {
    color: #057DFD !important;
}

.awarded_body h3 {
    font-weight: 500;
    font-size: 20px;
    color: #828282;
}

.awarded_body p {
    font-weight: 500;
    font-size: 17px;
    color: #828282;
}

.awarded_body img {
    width: 100px;
    margin: 5%;
}

.awarded_body h1 {
    font-weight: 600;
    font-size: 24px;
    color: #161719;
}

.prog_info {
    text-align: center;
}

.prog_info p:first-child {
    text-align: right;
    font-size: 15px;
    font-weight: 900;
    color: #666666;
}

.prog_info p:nth-child(2) {
    color: #666666;
    font-size: 24px;
    font-weight: 900;
}

.prog_info p:nth-child(3) {
    font-size: 18px;
    padding: 5px 0 10px 0px;
    font-weight: 900;
    color: #000;
}

.prog_info p:nth-child(5) {
    color: #40B019;
    font-size: 16px;
    font-weight: 900;
    padding: 10px 0px;
}

.prog_info p:nth-child(6) {
    color: #666666;
    font-weight: 900;
}

.prog_info p:nth-child(6) span {
    font-size: 20px;
    color: #000;
}

.prog_info .prog_img {
    width: 70px;
}

.width-btn {
    width: 100px !important;
}

/* all-popup end css */

/* Review modal */
#review .review-container {
    padding: 50px;
}

#review .review-container .review-title {
    text-align: center;
    margin-bottom: 50px;
    font-size: 22px;
}

#review .review-container .user-review {
    display: flex;
    justify-content: space-around;
}

#review .review-container .user-review .review-txt {
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

/* Flashpack */
.flashpack-wrap {
    margin: 6px 0px;
    display: flex;
    justify-content: center;
}

.flashpack-wrap .flash-child {
    cursor: pointer;
}

.flashpack-wrap {
   /* background-image: url(../img/flashpack/Flashpack-2.png);*/
    background-position: center;
    width: 245px;
    height: 450px;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    animation-duration: 1s;
    animation: animName 1s;
}


.flashpack-wrap1 {
    background-image: url(../img/flashpack/Flashpack-3.png);
    background-position: center;
    width: 283px;
    height: 500px;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
}

.flashpack-wrap1 img {
    width: 202px;
    display: initial !important;
    animation-duration: 2s;
    animation-name: slidein;
    cursor: pointer;
    height: 335px;
}

.flashpack-wrap img {
    width: 202px;
    display: initial !important;
    cursor: pointer;
    height: 335px;

}

.back-icon .arrow-fp {
    color: white;
    float: left;
    margin-left: 10px;
    margin-bottom: 5px;
}

.flash-body .title {
    text-align: left;
}

.flashpack-header .sub-header {
    display: flex;
    align-items: center;
    gap: 20px;
}

.flash-height .flash-txt {
    height: 45vh;
    display: flex;
    align-items: center;
}

@keyframes animName {
    0% {
        transform: rotateY(270deg);
    }

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

button.next_FP {
    border: none;
    border-radius: 40px;
    font-size: 35px;
    position: relative;
    left: 10%;
    top: 12%;
    font-weight: bold;
    color: #000;
}

button.next_FP:disabled {
    color: grey;
}

.match-btn:disabled {
    color: #fff;
    background-color: grey;
    border: none;
}

.resmatch-btn:disabled {
    color: #fff;
    background-color: grey;
    border: none;
}

button.close_FP {
    width: 100px;
    border-radius: 40px;
    background-color: #007AFC;
    color: #fff;
    border: none;
    margin: 10px;
}

button.start_FP {
    width: 100px;
    border-radius: 40px;
    background-color: #007AFC;
    color: #fff;
    border: none;
    margin-top: 25px;
    position: relative;
    left: 50%;
    bottom: auto !important;
    transform: translate(-50%, -50%);
    align-items: center;
}

.flash-p p {
    background: #C6211B;
    width: 30px;
    height: 30px;
    border-radius: 30px;
    padding: 3px;
    color: #fff;
    font-weight: 600;
}

.flash-tab {
    justify-content: center;
}

.flash-tab .cards-box {
    display: inline-flex;
}

.flash-tab .cards-box p {
    position: relative;
    top: 5px;
    left: 5px;
}

.flash-tab a {
    color: #000 !important;
    padding: 0px 18px;
    font-size: 20px;
    text-decoration: none;
}

.flash-tab .arrow.next_FP {
    color: #007AFC;
    cursor: pointer;
}

.flash-tab .active {
    color: #007AFC !important;
    border: 0;
}

.flash-body {
    background-color: #F2F0F0;
}

@keyframes slidein {
    from {
        margin-left: 10%;
        width: 30%;
    }

    to {
        margin-left: 0%;
        width: 100%;
    }
}

.flashpack-wrap .flash-child#fc2 {
    display: none;
}

.flashpack-wrap .flash-child#fc3 {
    display: none;
}

.flashpack-wrap1 .flash-child#fc22 {
    display: none;
}

.flashpack-wrap1 .flash-child#fc33 {
    display: none;
}

button.next_FP:focus,
button.next_FP:active {
    border: none !important;
    outline: none !important;
}

/* game css */
.overflow {
    overflow: hidden;
}

.cover {
    touch-action: none;
}

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

.new-game6 img {
    width: 100px;
}

button.btn.btn-danger.bame-btn {
    background: #fff !important;
    border: 1px solid #ccc;
    color: #333;
    font-weight: 600;
    box-shadow: 0px 0px 3px 0px #00000063;
    padding: 6px 6px;
    width: 146px;
    height: 42px;
    border-radius: 9px;
    cursor: pointer;
}

.game-main-btn {
    display: flex;
    justify-content: center;
    gap: 52px;
    background: #F0F0F0;
    padding: 10px;
}

.game-tab {
    text-align: center;
    display: flex;
    justify-content: center;
}

.game-tab a {
    color: #007AFC !important;
    padding: 5px 18px;
    background-color: #fff;
    cursor: pointer;
}

.game-main-btn1 {
    gap: 0px;
    background: #F0F0F0;
    padding: 10px;
    justify-content: space-evenly;
    display: grid;
}

.game-main-btn1 .bame-btn2 {
    width: 240px !important;
    margin: 3%;
}

.game-card {
    padding: 10px;
    box-shadow: 0px 0px 4px 0px #00000059;
    border-radius: 12px;
    margin-top: 3%;
}

.game-text-height1 {
    border: 1px solid #ccc !important;
    border-radius: 5px;
    padding: 10px;

    margin-top: 2%;
    margin-bottom: 2%;
}

.game-text-height {
    border-radius: 7px;
    border: 1px solid #ccc;
    margin-top: 2%;
    margin-bottom: 2%;
}

.game-text-height1 .nomatch {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 110px;

    box-shadow: 4px 4px 8px #e1e1e1, 0px 0px 12px #fff;
    border-radius: 12px;
}

.btn-bottom {
    bottom: 400px !important;
}

.btn-danger:not(:disabled):not(.disabled).active,
.btn-danger:not(:disabled):not(.disabled):active,
.show>.btn-danger.dropdown-toggle {
    color: #333;
}

.game-next-btn {
    background: #ccc;
    border: 1px solid #ccc !important;
    color: #fff;
    font-weight: 600;
    padding: 6px 6px;
    width: 146px;
    height: 42px;
    border-radius: 41px;
    position: relative;
    bottom: 335px;
    left: 32%;
}

.start_game {
    background: #007AFC;
    border: 1px solid #ccc !important;
    color: #fff;
    font-weight: 600;
    padding: 6px 6px;
    width: 146px;
    height: 42px;
    border-radius: 41px;
    position: relative;
    left: 50%;
    bottom: -12px;
    transform: translate(-50%, -50%);
    align-items: center;
}

.close_game {
    background: #007AFC;
    border: 1px solid #ccc !important;
    color: #fff;
    font-weight: 600;
    padding: 6px 6px;
    width: 146px;
    height: 42px;
    border-radius: 41px;
    position: relative;
    bottom: 400px;
    left: 72%;
}

.ten-img img {
    width: 73px;
    border: 1px solid #ccc;
    background: #fff;
    height: 70px;
}

.game-text p {
    font-size: 20px;
    line-height: 38px;
}

.game-btn {
    background: #fff !important;
    border: 1px solid #ccc;
    color: #333;
    font-weight: 600;
    box-shadow: 0px 0px 3px 0px #00000063;
    padding: 6px 6px;
    width: 73px !important;
    height: 50px !important;
    border-radius: 9px;
    cursor: pointer;
}

.gmain-img {
    width: 100%;
    height: 330px;
}

.game-body,
.flash-body {
    overflow-x: hidden;
}

.game-body .title {
    text-align: center;
}

.game-body .sub-header {
    display: flex;
    align-items: center;
    gap: 20px;
}

button.close_game:disabled {
    background-color: grey;
    color: white;
}

.header-cover {
    display: flex;
    align-items: center;
    gap: 20px;
}

.drag-img {
    justify-content: center;
    text-align: center;
    border-radius: 11px;
    width: 93px;
    padding: 5px;
    height: 89px;
    margin: 0 15px 7% 0;
    box-shadow: 0px 0px 3px 0px #ccc;
    display: inline-flex;
}

.nomatch {
    justify-content: center;
    text-align: center;
    border-radius: 7px;
    width: 59px;
    padding: 5px;
    height: 85px !important;
    margin: 0 15px 7% 0;
    box-shadow: 0px 0px 3px 0px #ccc;
    display: inline-flex;
}

#ddimg-cover {
    justify-content: flex-end;
    display: grid;
}

.btn-btm {
    bottom: 200px !important;
}

.match-btn {
    width: 146px;
    height: 42px;
    border-radius: 41px;
    position: relative;
    bottom: 335px;
    left: 32%;
}

.resmatch-btn {
    width: 146px;
    height: 42px;
    border-radius: 41px;
    display: none;
}

.card {
    width: 100%;
    height: 88px;
    font-size: 18px;
    background-color: #007afc33;
    box-sizing: border-box;
    color: #000;
    margin-bottom: 3%;
    justify-content: center;
    padding: 0 12px;
    font-weight: 600;
}

.card1 {
    background-color: #ff000042;
}

.card2 {
    background-color: #007afc33;
}

.card3 {
    background-color: #ffff003b;
}

.match-wrap {
    display: grid;
    grid-template-columns: 1fr 3fr;
}

.game-body .left>div {
    text-align: right;
}

.game-body .drag-img {
    justify-content: center;
    text-align: center;
    border-radius: 7px;
    width: 93px;
    padding: 5px;
    height: 85px;
    margin: 0 15px 12% 0px;
    border: 1px solid #ccc;
}

.game-body .left h1 {
    justify-content: center;
    text-align: center;
    border-radius: 7px;
    width: 93px;
    padding: 5px;
    height: 85px;
    margin: 0 15px 12% 0;
    border: 1px solid #ccc;
    line-height: 73px;
    font-size: 33px;
    font-weight: bold;
}

.game-body .grid {
    margin: 0px 100px;
}

.game-body .grid-item {
    padding: 20px;
    margin: 10px 0px;
    background-color: #000;
    color: #fff;
}

/*===== VARIABLES CSS =====*/

:root {
    /*===== Colors =====*/
    --first-color: #272a3a;
    --first-color-light: #8a8eaa;
    --first-color-lighten: #f8f8fc;
    /*===== Font and typography =====*/
    --body-font: "Ubuntu", sans-serif;
    --normal-font-size: 1rem;
    --smaller-font-size: 0.813rem;
}

/*===== BASE =====*/

/*===== DRAG and DROP =====*/

.drop,
.drop_container {
    display: grid;
}

.drop {
    align-items: center;
    justify-content: center;
}

.drop_card,
.drop_data {
    display: flex;
    align-items: center;
}

.drop_card {
    border-radius: 11px;
    margin-bottom: 3%;
    padding: 21px;
    border: 0px solid #ccc;
    box-shadow: 0px 0px 4px 0px #ccc;
    cursor: pointer;
}

.drop_container img {
    border-radius: 11px;
    width: 93px;
    padding: 5px;
    height: 84px;
}

.drop_name {
    font-size: var(--normal-font-size);
    color: var(--first-color);
    font-weight: 500;
}

.drop_profession {
    font-size: var(--smaller-font-size);
    color: var(--first-color-light);
}

.drop_social {
    margin: 0 0.375rem;
    color: var(--first-color-light);
    transition: 0.4s;
}

.drop_social:hover {
    color: var(--first-color);
}


/* Class name for the chosen item */
.sortable-chosen {
    box-shadow: 8px 8px 32px #e1e1e1;
}

/* Class name for the dragging item */
.sortable-drag {
    opacity: 0;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    border-bottom: 2px solid !important;
}

.drop_card_fix {
    display: grid;
    grid-template-columns: 1fr 3fr;
}

/* ends here */

/* Chapter-test start */
.carousel-indicators>li {
    border-radius: 50% !important;
    text-indent: 0;
}

.carousel .carousel-indicators li {
    background-color: #fff;
    width: 40px;
    height: 40px;
    margin-right: 6px;
    margin-left: 6px;
    border-radius: 30px;
    position: relative;
    border: 2px solid #cccccc;
    pointer-events: none;
}

.chap-view-sol .carousel .carousel-indicators li {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 19px;
    margin-left: 20px;
}

.chap-view-sol .carousel .carousel-indicators li .list_style {
    pointer-events: initial;
    background-color: #fff;
    width: 0px;
    height: 0px;
    padding: 18px;
    border-radius: 30px;
    position: relative;
    border: 2px solid #cccccc;
    display: flex;
    justify-content: center;
    align-items: center;
}

.chaptertest-cover .carousel .carousel-indicators li {
    pointer-events: none;
    background-color: #fff;
    width: 0px;
    height: 0px;
    padding: 18px;
    margin-right: 20px;
    margin-left: 20px;
    border-radius: 30px;
    position: relative;
    border: 2px solid #cccccc;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-indicators {
    bottom: auto;
    justify-content: space-around;
}

.chap-view-sol .carousel-indicators {
    bottom: auto;
    justify-content: space-between;
    overflow-x: scroll;
    margin-right: 23%;
    margin-left: 23%;
}

.chaptertest-cover .carousel-indicators {
    bottom: auto;
    justify-content: space-between;
    overflow-x: scroll;
    margin-right: 24%;
    margin-left: 24%;
}

.carousel-indicators .text {
    position: absolute;
    color: #000;
    font-size: 16px;
}

.carousel .carousel-inner {
    background-color: #fff;
    height: auto;
}

.carousel-inner .carousel-item {
    margin-bottom: 20px;
}

.chap-view-sol .carousel-inner .carousel-item {
    margin-top: 0px;
    margin-bottom: 20px;
}

.carousel-inner .carousel-item .container .check {
    margin: 0px 10px;
    border: 1px solid;
    padding: 20px 0px 20px 0px;
}

.chap-view-sol .carousel-inner .carousel-item .container .check {
    margin: 0px 10px;
    border: 1px solid;
    padding: 20px 0px 20px 0px;
    height: 80vh;
    overflow-y: auto;
}

.carousel-inner .carousel-item .container .q-section .answer1 {
    margin: 25px 0px;
    font-size: 18px;
}

.carousel-inner .carousel-item .container .options .ans {
    margin: 25px 0px;
    font-size: 18px;
}

.timer {
    display: flex;
    justify-content: space-between;
    background-color: #007AFC;
    color: #fff;
    padding: 10px 20px;
}

.timer .runtime {
    display: flex;
    gap: 10px;
    align-items: center;
}

.timer .title {
    display: flex;
    align-items: center;
}

.timer .title>p {
    font-size: 20px;
}

.timer .runtime>img {
    height: 25px;
    width: 25px;
    cursor: pointer;
}

.timer .submit-test {
    background-color: #fff;
    color: #007AFC;
    padding: 10px;
    border-radius: 30px;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
}

.action-btns {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.carousel-indicators .active {
    background-color: #007AFC !important;
    color: #fff;
    border: none;
}

.carousel-indicators .active .text {
    color: #fff;
}

.carousel-indicators .active .list_style {
    background-color: #007AFC !important;
    color: #fff;
}

.chaptertest-slider #slide-1 {
    text-align: start !important;
}

.chapter-testwrap {
    padding: 15px 0px;
    border-bottom: 1px solid #bdbdbd;
}

.chapter-testwrap.last-chap {
    border: none;
}

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

.chapter-test .tests {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chapter-test .tests .tick-img {
    width: 25px;
    height: 25px;
}

.chapter-test .result {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chapter-test .result .percentvalue {
    width: 40px;
}

.chapter-test .result .star {
    display: flex;
    align-items: center;
    gap: 5px;
}

.chapter-test .result .chap-img {
    width: 20px;
    height: 20px;
}

.chapter-test .result .star .strimg {
    width: 20px;
    height: 20px;
}

.chapter-test .result .star .empty-strimg {
    width: 20px;
    height: 20px;
    margin-top: -2px;
}

#chaptest_result .modal-title {
    font-size: 20px;
}

#chaptest_result .chapTest-modal {
    height: 300px;
    overflow: auto;
}

.chapter-main {
    height: 100%;
}

/* chaptertest ends */

.lottie_ani {
    width: 100%;
}

.lottie_ani .wrap-body {
    position: absolute;
    width: 96%;
}

.toggle_switch {
    display: flex;
    gap: 10px;
    align-items: center;
}

.toggle_switch p:first-child {
    color: #5e6266;
    font-size: 16px;
    pointer-events: none;
}

.toggle_switch p:last-child {
    color: #007afa;
    font-size: 16px;
    pointer-events: none;
}

.toggle {
    --width: 45px;
    --height: calc(var(--width) / 3);
    position: relative;
    display: inline-block;
    width: var(--width);
    height: var(--height);
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    border-radius: var(--height);
    cursor: pointer;
    margin-bottom: 0px;
}

.toggle input {
    display: none;
}

.toggle .slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--height);
    background-color: #ccc;
    transition: all 0.4s ease-in-out;
}

.toggle .slider::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--height));
    height: calc(var(--height));
    border-radius: calc(var(--height) / 2);
    background-color: #fff;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    transition: all 0.4s ease-in-out;
}

.toggle input:checked+.slider {
    background-color: #2196F3;
}

.toggle input:checked+.slider::before {
    transform: translateX(calc(var(--width) - var(--height)));
}

.myprogress {
    background-color: #ecf5ff;
}

.myprogress .myprog>div {
    text-align: center;
}

.myprogress .myprog .stu-img {
    border-radius: 50px;
    margin: 40px 0px 20px 0px;
}

.myprogress .myprog p {
    margin-bottom: 10px;
    color: #666666;
    font-weight: bold;
}

.myprogress .myprog p:last-child {
    font-size: 22px;
    font-weight: 900;
}

.myprogress .myprog_title {
    background-color: #007afa;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.myprogress .myprog_title>div {
    display: flex;
    gap: 10px;
}

.myprogress .myprog_title img {
    width: 22px;
    cursor: pointer;
}

.myprogress .myprog_title p {
    font-size: 18px;
    color: #fff;
}

.myprogress .progress_cards,
.myprogress .milestone {
    text-align: left !important;
    width: 500px;
    margin: 20px auto;
}

.myprogress .milestone {
    width: auto;
}

.myprogress .progress_cards .card,
.myprogress .milestone .card {
    height: auto;
    padding: 10px 10px 12px 10px;
    box-shadow: 2px 3px 4px grey;
}

.myprogress .milestone .card {
    padding: 15px;
}

.myprogress .progress_cards .card:last-child,
.myprogress .milestone .card:last-child {
    margin-bottom: 0px;
}

.myprogress .progress_cards .card p,
.myprogress .milestone .card p {
    color: #007afa;
    margin-left: 7px;
}

.myprogress .milestone .card p {
   font-size: 17px;
}

.myprogress .progress_cards .card .incard {
    display: flex;
    justify-content: space-between;
}

.myprogress .milestone .card .incard {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    margin-top: 10px;
    row-gap: 30px;
}

.myprogress .progress_cards .card .result,
.myprogress .milestone .card .result {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 10px;
}

.myprogress .progress_cards .card .result>p,
.myprogress .milestone .card .result>p {
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
}

.myprogress .progress_cards .card .result>p img,
.myprogress .milestone .card .result>p img {
    width: 20px;
    height: 20px;
}

.myprogress .progress_cards .card .result>p>span>img,
.myprogress .milestone .card .result>p>span>img {
    margin: 0px;
    position: relative;
    top: -2px;
}

.myprogress .progress_cards .card .result>p>span>img:first-child,
.myprogress .milestone .card .result>p>span>img:first-child {
    margin-left: 10px;
}

.myprogress .progress_cards .card .result>p>span>img,
.myprogress .milestone .card .result>p>span>img {
    margin-left: 3px;
}

.myprogress .progress_cards p {
    margin-bottom: 10px;
}

.myprogress .milestone p {
    margin: 7px 0px;
}

.myprogress .progress_cards .wrap_prog,
.myprogress .milestone .wrap_prog {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.myprogress .progress_cards .card .incard:last-child .wrap_prog {
    margin-bottom: 0px;
}

.myprogress .progress_cards .wrap_prog .star,
.myprogress .milestone .wrap_prog .star {
    margin-top: -2px;
    display: flex;
}

.myprogress .progress_cards .wrap_prog img,
.myprogress .milestone .wrap_prog img {
    margin: 0px;
    cursor: pointer;
    width: 70px;
}

.myprogress .progress_cards .wrap_prog .star img,
.myprogress .milestone .wrap_prog .star img {
    width: 14px;
    height: 14px;
    margin: 0px 1px;
    margin-top: -5px;
}

.rewars-modal-style .rewars-body img {
    width: 31px;
}

.rewars-modal-style .rewars-body .value {
    width: 70px;
}

.rewars-modal-style .rewars-body h1 {
    color: #666666;
    font-size: 22px;
    padding: 0px;
}

.rewars-modal-style .rewars-body h2 {
    font-size: 20px;
    padding: 5px 0px;
}

.rewars-modal-style .rewars-body .rewars-body-award h2 {
    font-size: 17px;
    padding-top: 5px;
}

.rewars-modal-style .rewars-body p {
    color: #828282;
}

/*.rewars-modal-style .rewars-body-main_1 {
    border: 2px solid #70C105;
}

.rewars-modal-style .rewars-body-main {
    border: 1px solid #70C105;
}*/

.rewars-modal-style .progress-cover {
    display: flex;
    justify-content: space-between;
    padding: 0px 20px;
    align-items: center;
}

.rewars-modal-style .progress-cover .blue_badge {
    width: 30px !important;
}

.rewars-modal-style .rewars-body-award img {
    width: 70px;
    /*border: 1px solid #bfbdbb;*/
    border-radius: 50%;
}

.rewars-modal-style .rewars-body-award h3 {
    margin-bottom: 2px;
    color: #666666;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 14px;
}

.rewars-modal-style .rewars-body-award h3 b {
    color: #000;
    font-size: 16px;
}

.rewars-modal-style .rewars-body-award {
    margin: 4% 4%;
}

.rewars-modal-style .black_share_btn span {
    color: #666666;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 1px;
}

.rewars-modal-style h5,
.rewars-modal-style h1,
.rewars-modal-style h2,
.rewars-modal-style h6 {
    margin-bottom: 0px;
}

.rewars-modal-style .black_share_btn {
    align-items: center;
}

.rewars-modal-style .rewars-body .gree-badge {
    width: 17px !important;
}

.rewars-modal-style .gree-downoload {
    width: 18px !important;
}

.star_stu .rewars-modal-style .rewars-body img {
    width: 50px;
}

.rewars-modal-style .rewars-body .share_grey {
    width: 15px !important;
}

.star_stu .rewars-modal-style .rewars-body .rewars-body-award h2,
.star_stu .rewars-modal-style .rewars-body h2 {
    color: #057DFD;
}

.star_stu .rewars-modal-style .rewars-body .subject {
    color: #000;
}

.star_stu .rewars-modal-style .rewars-body h2 {
    font-size: 18px;
    padding: 3px 0px;
}

.star_stu .rewars-modal-style .rewars-body .star img {
    width: 15px;
}

.star_stu .rewars-modal-style .rewars-body-main_1,
.star_stu .rewars-modal-style .rewars-body-main {
   /* border: 2px solid #057DFD;*/
}

.rewars-modal-style .rewars-body h5 {
    font-weight: bold;
}

.star_stu .rewars-modal-style .stu-img {
    width: 70px !important;
}

.star_stu .rewars-modal-style .rewars-body-award {
    margin: 2% 4%;
}

.star_stu .rewars-body-award {
    padding: 10px 0px;
}

.star_stu .rewars-modal-style .rewars-body .badge {
    width: 40px !important;
}

.star_stu .rewars-modal-style .rewars-body .ahaguru_logo {
    width: 70px !important;
}

.m_orange .rewars-modal-style .rewars-body-main_1,
.m_orange .rewars-modal-style .rewars-body-main {
    border: 2px solid #FF5F00;
}

.m_orange .rewars-modal-style .rewars-body .rewars-body-award h2,
.m_orange .rewars-modal-style .rewars-body h2 {
    color: #FF5F00;
}

.dropdown-item {
    width: 100%;
    padding: 7px 10px !important;
    display: grid !important;
    align-items: center;
    gap: 10px;
    grid-template-columns: 20px 1fr;
}

.dropdown-item img.logout {
    width: 17px;
    height: 15px;
}

.dropdown-item img.accounts,
.dropdown-item img.share {
    width: 17px;
    height: 17px;
}

.dropdown-item img.accounts {
    position: relative;
    bottom: 2px;
}

.dropdown-menu {
    right: 1%;
    width: 360px !important;
    font-size: 15px !important;
}

@media (min-width: 576px) {

    #invalid-card .modal-dialog,
    #get-newq .modal-dialog {
        max-width: 344px;
        margin: 1.75rem auto;
    }
}

/* Desktop-1 mediaQuery  starts */
@media (max-width:1300px) {
    .banner-box p {
        font-size: 18px;
    }
}

@media (max-width:1300px) {
    .box-container .row .d-flex {
        gap: 0px;
    }
}


@media (max-width:1200px) {
    #myModal .modal-content {
        border: none;
        height: auto;
    }
    #videoModal .modal-content {
        border: none;
        height: auto;
    }

    .chap-view-sol .indi-cover {
        margin-top: 20px;
        height: 100px;
        position: relative;
        margin: 1em auto;
    }

    .right-paddle {
        right: 12%;
    }

    .left-paddle {
        left: 12%;
    }

    .dashboard .banner .bwrapper {
        gap: 20px;
        margin: 0px 20px 0px 0px;
    }

    .wrap-award .award-img .goldcup {
        width: 110px;
    }

    .emptycup {
        width: 110px;
    }

    .wrap-award .award-img .medal {
        width: 35px;
    }

    .wrap-award-empty .award-img .medal {
        width: 35px;
        left: 33%;
    }

    .wrap-award .award-img .medal.streak {
        width: 25px;
    }

    .banner .stu-info .earned-coins .coins-info {
        display: flex;
        justify-content: space-around;
        gap: 22px;
        align-items: center;
    }

    .home-left .myprog-wrap .myprog-box {
        grid-template-columns: 3fr 1fr;
    }

    .banner .stu-info .earned-coins {
        padding: 10px 25px;
    }

    .banner .stu-info .earned-coins .coins-info {
        gap: 10px;
    }

    .banner .coins-info .noof-coins .coins {
        font-size: 18px;
    }

    .banner .coins-info .noof-coins .crn {
        font-size: 16px;
    }

    .dashboard .banner .bwrapper {
        gap: 70px;
        margin: 0px 10px 0px 0px;
    }

    .banner-box {
        padding: 20px 20px 20px 20px;
    }
    .box-container .points>p {
        display: flex;
    }
}

@media (max-width:1100px) {
    .dash .banner .bwrapper {
        grid-template-columns: 1fr 2fr 60px;
        gap: 20px;
    }
}
@media (max-width:1050px) {
    .box-container {
        padding: 15px;
    }

    .points {
        padding: 10px 5px;
    }
}

@media (max-width: 1024px) {
    .thumbnailcover .vd-thumbnail {
        width: 100%;
    }

    .video-wrap video {
        width: 100%;
    }

    .thumbnailcover .vd-thumbnail {
        width: 100%;
    }

    .practiceQtn .container .info {
        margin: 0px;
    }

    /*game*/
    .start_game,
    .close_game {
        position: relative;
        left: 50%;
        bottom: -12px !important;
        transform: translate(-50%, -50%);
        align-items: center;
    }

    .home-left .cover-menu {
        overflow-y: auto;
    }

    .home-right .cover-menu {
        height: 70vh;
        overflow-y: auto;
    }

    .home-left .myprog-cover {
        overflow: auto;
        height: 70vh;
        background-color: #eff4ff;
    }

    .dashboard .home .home-wrapper.myprogress {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 10px;
    }

    .home .home-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 10px;
    }

    .home-right .menu.home-course,
    .home-left .myprog-wrap {
        margin: 10px 20px 50px 20px;
    }

    .chap-view-sol .indi-cover {
        margin-top: 20px;
        height: 100px;
        position: relative;
        margin: 1em auto;
    }

    .right-paddle {
        right: 10%;
    }

    .left-paddle {
        left: 10%;
    }

    .chap-view-sol .arright {
        height: 100%;
        width: 60px;
        position: fixed;
        z-index: 1;
        top: 55%;
        right: 0;
        overflow-x: hidden;
        padding-top: 20px;
        cursor: pointer;
    }

    .chap-view-sol .arrleft {
        height: 100%;
        width: 60px;
        position: fixed;
        z-index: 1;
        top: 55%;
        left: 0;
        overflow-x: hidden;
        padding-top: 20px;
        cursor: pointer;
    }
    .arright {
        height: 100%;
        width: 60px;
        position: fixed;
        z-index: 1;
        top: 55%;
        right: 0;
        overflow-x: hidden;
        padding-top: 20px;
        cursor: pointer;
    }

    .arrleft {
        height: 100%;
        width: 60px;
        position: fixed;
        z-index: 1;
        top: 55%;
        left: 0;
        overflow-x: hidden;
        padding-top: 20px;
        cursor: pointer;
    }
    .banner-box {
        background-color: #fff;
        padding: 10px 20px 20px 20px;
    }

    .banner .stu-info .earned-coins {
        padding: 10px 16px;
    }

    .banner .stu-info .earned-coins .coins-info {
        gap: 5px;
    }

    .banner .coins-info .noof-coins .coins {
        font-size: 20px;
    }

    .banner .coins-info .noof-coins .crn {
        font-size: 16px;
    }

    .home-left .myprog-wrap .myprog-box {
        grid-template-columns: 5fr 1fr;
    }

    .banner-box p {
        font-size: 20px;
    }

    .dashboard .banner .bwrapper {
        gap: 60px;
        margin: 0px 10px 0px 0px;
    }

    .banner-box .banner-box-txt img,
    .banner-box .achievement .imgtxt-wrap img {
        width: 35px;
        height: 35px;
    }

    .points {
        flex-direction: column;
    }
    .myprogress .milestone .card .incard {
        grid-template-columns: repeat(5,1fr);
    
    }
    .dash .banner .bwrapper {
        gap: 20px;
    }
    .box-container .row .d-flex {
        gap: 30px;
    }
    .dash .banner .bwrapper {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 920px) {

    /* Banner */
    .banner .bwrapper .cups .badges {
        gap: 12px;
    }

    .wrap-award .award-img .goldcup {
        width: 90px;
    }

    .wrap-award-empty .award-img .emptycup {
        width: 90px;
    }

    .banner-box p {
        font-size: 18px;
    }

    .dashboard .banner-box .achievement {
        height: 140px;
    }

    .banner-box .achievement {
        height: 160px;
    }

    .banner-box .achievement .imgtxt-wrap img {
        width: 30px;
        height: 30px;
    }

    .banner-box .banner-box-txt img {
        width: 30px;
        height: 30px;
    }

    .emptycup {
        width: 90px;
    }

    .banner .stu-info .earned-coins .coins-info {
        gap: 15px;
    }

    .banner .stu-info .earned-coins {
        padding: 5px 15px;
    }

    .banner .coins-info .noof-coins .coins {
        font-size: 18px;
    }

    .banner .coins-info .noof-coins .crn {
        font-size: 14px;
    }

    .banner .content .info p {
        font-size: 18px;
    }

    .banner .content .info .img-style img {
        width: 25px;
        height: 25px;
    }

    .dashboard .banner .bwrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 50px;
        margin: 0px;
    }

    .dashboard .banner-box {
        padding: 20px;
    }

    .stu-info .coins-info img.coins {
        width: 50px;
    }

    #myModal video {
        object-fit: fill;
        height: 200px;
    }

    #myModal .modal-header .mtitle {
        font-size: 18px;
    }
    #videoModal video,.video-js {
        /*object-fit: fill;*/
        height: 200px;
    }

    #videoModal .modal-header .mtitle {
        font-size: 18px;
    }

    .sol-video .modal-header .vd-title {
        font-size: 18px;
    }

    #courseIntro video {
        object-fit: fill;
        height: 250px;
    }

    .game-next-btn {
        bottom: -6px !important;
        left: 0;
    }

    .home .home-wrapper {
        grid-template-columns: 1fr 1fr;
    }

    .view-solution-btn {
        margin: 10px 5%;
    }

    .share-btn {
        padding: 4px 40px;
    }

    .wrap-award .award-img .medal {
        position: absolute;
        top: 15%;
        left: 32%;
        width: 35px;
    }

    .wrap-award-empty .award-img .medal {
        position: absolute;
        top: 17%;
        left: 32%;
        width: 32px;
    }

    .wrap-award .award-img .medal.streak {
        position: absolute;
        top: 10%;
        left: 38%;
        width: 25px;
    }

    .match-btn {
        display: none;
        width: 100px;
        border-radius: 40px;
        background-color: #007AFC;
        color: #fff;
        border: none;
        margin-top: 10px;
        position: relative;
        left: 50%;
        bottom: auto !important;
        transform: translate(-50%, -50%);
        align-items: center;
    }

    .resmatch-btn {
        width: 146px;
        height: 42px;
        border-radius: 41px;
        display: block;
    }

    .classes img {
        margin-right: 15px;
    }

    .chap-wrapper .chap-content.chapwrap {
        display: grid;
        grid-template-columns: 1fr 105px;
    }

    .chapter .chap-content .cover {
        gap: 10px;
    }

    .chap-view-sol .carousel-indicators {
        bottom: auto;
        justify-content: space-between;
        overflow-x: scroll;
        margin-right: 15%;
        margin-left: 15%;
    }

    .right-paddle {
        right: 5%;
    }

    .left-paddle {
        left: 5%;
    }

    .lottie_ani .wrap-body {
        width: 94%;
    }

    .lottie_ani {
        width: 100%;
        height: 95vh;
    }

    #submit-success {
        height: auto;
    }

    .home-left .myprog-wrap,
    .home-right .menu.home-course {
        margin: 10px 20px 50px 20px;
    }

    .dashboard .home .home-wrapper.myprogress {
        grid-template-columns: 1fr 1fr;
        grid-gap: 10px;
    }

    .banner-box {
        background-color: #fff;
        padding: 20px;
    }

    .home-right .cover-menu {
        height: 100vh;
    }

    .home-left .myprog-cover {
        height: 100vh;
    }

    .home-left .myprog-wrap .myprog-box {
        grid-template-columns: 7fr 1fr;
    }

    .home-left .myprog-wrap .myprog-box .box-left .prog-status-img img {
        width: 30px;
        height: 30px;
    }

    .banner .bwrapper .cups {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-weight: bold;
        order: 2;
    }
}

@media (min-width: 900px) {
    .lottie_ani {
        width: 100%;
    }
}

@media (max-width: 860px) {
    .banner .stu-info .earned-coins .coins-info {
        gap: 5px;
    }
}

@media (min-width: 1200px) {
    .lottie_ani {
        width: 100%;
    }

    .dashboard .home .home-wrapper.myprogress {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 1190px) {
    .dashboard .home .home-wrapper.myprogress {
        grid-template-columns: 1fr 1fr;
    }

    .home-right .menu.home-course,
    .home-left .myprog-wrap {
        margin: 10px 20px 50px 20px;
    }
}

@media (max-width: 900px) {
    .thumbnailcover {
        height: auto;
    }

    .game-next-btn {
        bottom: -8px !important;
        left: 0;
    }

    .video-wrap video {
        width: 59%;
    }

    .thumbnailcover .vd-thumbnail {
        width: 50%;
    }

    .video-wrap {
        height: auto;
    }


    #videoModal .modal-body,
    #myModal .modal-body,
    .sol-video .modal-body {
        padding: 5px;
    }

 #videoModal video,.video-js,
    #myModal video {
        /*object-fit: fill;*/
        height: 220px;
    }

    #courseIntro .modal-body {
        padding: 5px;
    }

    .foot {
        bottom: auto;
    }

    .foot .ch_answer {
        width: 100%;
    }
    .home .home-wrapper .home-left {
        background-color: #eff4ff;
        height: auto;
    }

    #myTab .nav-link {
        font-size: large;
    }

    .home .home-wrapper .home-right h3 {
        font-size: large !important;
    }

    .wrapper {
        grid-template-columns: 300px auto;
    }

    .tab-wrap .badges img {
        width: 70px;
        height: 42px;
    }

    .tab-wrap .certificate img {
        width: 55px;
        height: 40px;
    }

    .certificate .badges .content-wrap .topic {
        font-size: 16px;
    }

    .certificate .badges .content-wrap .chapter {
        font-size: 14px;
    }

    .chap-view-sol .indi-cover {
        margin-top: 20px;
        height: 100px;
        position: relative;
        margin: 1em auto;
    }

    .lottie_ani {
        width: 100%;
        height: 95vh;
    }

    .lottie_ani .wrap-body {
        width: 93%;
    }

    #submit-success {
        height: auto;
    }
}

@media (max-width: 896px) {
    .game-next-btn {
        left: 0%;
        bottom: -8px !important;
    }
}

@media (max-width: 851px) {

    /* game css */
    .gmain-img {
        width: 100%;
    }

    .game-next-btn {
        left: 0%;
        bottom: -8 !important;
    }

    .gmain-img {
        width: 100%;
        height: 242px;
    }
}

@media (max-width: 844px) {
    .thumbnailcover {
        height: auto;
    }

    .video-wrap video {
        width: 57%;
    }

    /* game css */

    .video-wrap video {
        width: 57%;
    }

    .thumbnailcover .vd-thumbnail {
        width: 50%;
    }

    .practiceQtn .container {
        height: 270px;
        overflow-y: auto;
    }

    .video-wrap {
        height: auto;
    }

    .footer-section {
        position: absolute;
        bottom: auto;
        width: 100%;
    }

    .chap-view-sol .indi-cover {
        margin-top: 20px;
        height: 100px;
        position: relative;
        margin: 1em auto;
    }

    .right-paddle {
        right: 6%;
    }

    .left-paddle {
        left: 6%;
    }

    .chap-view-sol .arright {
        height: 100%;
        width: 80px;
        position: fixed;
        z-index: 1;
        top: 40%;
        right: 0;
        overflow-x: hidden;
        padding-top: 20px;
        cursor: pointer;
    }

    .chap-view-sol .arrleft {
        height: 100%;
        width: 80px;
        position: fixed;
        z-index: 1;
        top: 40%;
        left: 0;
        overflow-x: hidden;
        padding-top: 20px;
        cursor: pointer;
    }
    .arright {
        height: 100%;
        width: 80px;
        position: fixed;
        z-index: 1;
        top: 40%;
        right: 0;
        overflow-x: hidden;
        padding-top: 20px;
        cursor: pointer;
    }

    .arrleft {
        height: 100%;
        width: 80px;
        position: fixed;
        z-index: 1;
        top: 40%;
        left: 0;
        overflow-x: hidden;
        padding-top: 20px;
        cursor: pointer;
    }

    .lottie_ani {
        width: 100%;
    }
}

@media (max-width: 820px) {
    .footer-section {
        position: absolute;
        bottom: auto;
        width: 100%;
    }

    main .container {
        width: 100%;
        margin: 0px;
    }

    /* Modal */
    .vdcover .foot {
        position: relative;
    }

    .thumbnailcover {
        height: auto;
    }

    .vdmodal {
        height: auto;
    }

    .video-wrap {
        height: auto;
    }

    .video-wrap video {
        width: 100%;
    }

    .thumbnailcover .vd-thumbnail {
        width: 100%;
        height: auto;
    }

    .practiceQtn .container {
        height: 325px;
        overflow-y: auto;
    }

    .foot {
        bottom: 0;
    }

    /* Home */
    .banner .bwrapper {
        display: grid;
        grid-template-columns: 1fr;
    }

    .dash .banner .bwrapper {
        grid-template-columns: 1fr;
    }

    .banner-box {
        background-color: #fff;
        padding: 20px 50px;
        margin: 0px 50px;
    }

    .dashboard .banner-box {
        padding: 20px 50px;
    }

    .dashboard .banner .bwrapper {
        grid-template-columns: 1fr;
        gap: 0px;
        margin: 0px;
    }

    .dashboard .home-left .myprog-wrap,
    .home-right .menu.home-course {
        margin: 10px 20px 50px 20px;
    }

    .dashboard .home .home-wrapper.myprogress {
        grid-template-columns: 1fr 1fr;
    }

    .home-left .myprog-wrap .myprog-box {
        grid-template-columns: 8fr 1fr;
        padding: 10px 15px;
    }

    .dashboard .banner .bwrapper .stu-info {
        display: flex;
        justify-content: center;
        gap: 50px;
        flex-direction: row;
        order: 1;
    }

    .banner .bwrapper .stu-info {
        display: flex;
        justify-content: center;
        gap: 50px;
        flex-direction: row;
        order: 0;
    }

    .banner .bwrapper .cups {
        justify-content: center;
        order: 2;
    }

    .banner .stu-info .stu-img {
        width: 85px;
        height: 82px;
    }

    .banner-box .banner-box-txt img {
        width: 30px;
        height: 30px;
    }

    .banner-box .achievement .imgtxt-wrap img {
        width: 30px;
        height: 30px;
    }

    .banner .sharebtn {
        margin-bottom: 0px;
    }

    .home .home-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 10px;
    }

    .banner .bwrapper .stu-info .badges {
        justify-content: space-evenly;
    }

    .banner .content .info .img-style {
        display: flex;
        gap: 10px;
        padding: 10px 0px;
        width: 50%;
        align-items: center;
        justify-content: flex-start;
    }

    .banner .stu-info .crown {
        margin-bottom: -18px;
    }

    .banner .content {
        display: inline;
        order: 3;
        justify-content: center;
        margin-left: 155px;
    }

    .banner .content .info {
        display: flex;
        flex-wrap: unset;
        flex-wrap: wrap;
        margin: 0px 0px 20px 0px;
    }

    .banner .bwrapper .cups .badges {
        display: flex;
        gap: 70px;
        padding-top: 10px;
    }

    .banner-box .achievement,
    .dashboard .banner-box .achievement {
        height: auto;
    }

    .banner-box .achievement .subdiv {
        margin-top: 0px;
    }

    .wrap-imgcup {
        display: grid;
        grid-template-columns: 1fr;
    }

    .home .home-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 10px;
    }

    .home .home-wrapper .home-right h3 {

        font-size: large !important;
    }

    #myTab .nav-link {
        font-size: medium;
    }

    .vid-imgcover .vid-img {
        width: 100%;
        height: auto;
    }

    .popup-vid video {
        width: 100%;
        height: auto;
    }

    #myModal .modal-header .topics {
        flex-direction: column;
    }

    #myModal .modal-header .topics .main-title {
        font-size: 18px;
    }

    #myModal .modal-header .topics .sub-title {
        font-size: 16px;
    }

    #myModal .modal-header .topics .hyphen {
        display: none !important;
    }

    #myModal .modal-header .mtitle {
        display: none;
    }

    #videoModal .modal-header .topics {
        flex-direction: column;
    }

    #videoModal .modal-header .topics .main-title {
        font-size: 18px;
    }

    #videoModal .modal-header .topics .sub-title {
        font-size: 16px;
    }

    #videoModal .modal-header .topics .hyphen {
        display: none !important;
    }

    #videoModal .modal-header .mtitle {
        /*display: none;*/
    }

    .modal-header .topics .main-title {
        font-size: 20px;
    }

    #myModal video {
        object-fit: fill;
        height: 250px;
    }
    #videoModal video,.video-js {
        /*object-fit: fill;*/
        height: 250px;
    }

    .sol-video .solvid-review {
        top: 6% !important;
        right: -2% !important;
    }

    .practiceQtn .container .question {
        margin: 10px 0px;
        font-size: 16px;
    }

    #courseIntro video {
        object-fit: fill;
        height: 300px;
    }

    .practiceQtn .container .question {
        margin-bottom: 30px;
        font-size: 18px;
    }

    .practiceQtn .container .answer1 {
        margin-bottom: 10px;
        font-size: 18px;
    }

    .practiceQtn .container .ans {
        margin: 10px 0px;
        font-size: 18px;
    }

    .foot .ans-section .txtbox {
        width: 25%;
    }

    .foot .ans-section .mixed-fraction.deskfraction .txtboxstyle {
        width: 50%;
    }

    .foot .ans-section .mixed-fraction.deskfraction .wrapdeskfraction {
        display: flex;
        justify-content: flex-end;
    }

    .foot .ans-section .divider-style.mfdivider {
        display: flex;
        justify-content: flex-start;
    }

    .foot .ans-section .divider-style .mixed-divider.divider {
        width: 50%;
    }

    .home-right .cover-menu,
    .home-left .myprog-cover {
        height: 50vh;
        overflow-y: auto;
    }

    .home-left .cover-menu,
    .certificate.certificate-cover {
        overflow-y: auto;
    }

    .chapter .chap-content .cover img {
        width: 60px;
        height: 60px;
    }

    #submit-success {
        position: absolute;
        width: 100%;
        height: -webkit-fill-available;
    }

    .flash-main {
        height: 85vh;
        overflow-y: auto;
    }

    .game-main {
        height: 70vh;
        overflow-y: auto;
    }

    .chapter-main {
        height: 71vh;
        overflow-y: auto;
    }

    .chap-view-sol .chapter-main {
        height: auto;
        overflow-y: auto;
    }

    .chap-view-sol .carousel-inner .carousel-item .container .check {
        margin: 0px 10px;
        border: 1px solid;
        padding: 20px 0px 20px 0px;
        height: 55vh;
        overflow-y: auto;
    }

    .chap-view-sol .arright,
    .chap-view-sol .arrleft {
        width: 35px;
    }
    .arright,
    .arrleft {
        width: 35px;
    }

    .right-paddle {
        right: 70px;
        width: 30px;
        z-index: 1;
        height: 50px;
        margin: 35px 20px;
    }

    .left-paddle {
        left: 70px;
        width: 30px;
        z-index: 1;
        height: 50px;
        margin: 35px 20px;
    }

    .chap-view-sol .indi-cover {
        margin-top: 20px;
        height: 100px;
        position: relative;
        margin: 1em auto;
    }

    .chap-view-sol .carousel-indicators {
        bottom: auto;
        justify-content: space-between;
        overflow-x: scroll;
        margin-right: 15%;
        margin-left: 15%;
    }

    .lottie_ani .wrap-body {
        width: 94%;
    }

    .lottie_ani {
        width: 100%;
        height: 38vh;
    }

    #submit-success .cone-img {
        width: 33%;
    }

    /*dev changes*/
    .tab-wrap .badges img {
        width: 60px;
        height: 60px;
    }

    .myprogress .progress_cards .wrap_prog img,
    .myprogress .milestone .wrap_prog img {
        width: 50px;
    }

    .myprogress .progress_cards .card p {
        color: #007afa;
        margin-left: 7px;
        font-size: 15px;
    }

    .points {
        padding: 10px 15px;
    }

    .box-container .points>p {
        font-size: 13px;
    }

    .points img {
        width: 35px;
        height: 35px;
    }

    .box-container {
        padding: 15px;
        width: 85%;
        margin: 0 auto;
    }

    .points {
        padding: 10px 0px;
    }

    .box-container {
        grid-template-columns: 1fr 130px 1fr;
    }

    .box-container .row:nth-child(2) .points {
        padding: 10px 15px;
    }

    .myprogress .milestone .card .incard {
        row-gap: 25px;
    }

    .banner .sharebtn .sharebtn-style img {
        width: 18px;
        height: 20px;
    }

    header .logo {
        width: 75%;
    }
}

@media (max-width: 768px) {

    .home-right .cover-menu {
        height: 520px;
        overflow-y: auto;
    }

    .home-left .cover-menu,
    .certificate.certificate-cover {
        overflow-y: auto;
    }

    .dashboard .home .home-wrapper.myprogress {
        grid-template-columns: 1fr 1fr;
    }

    .home-right .classes img {
        margin-right: 10px;
    }

    .game-next-btn {
        left: 0%;
    }

    .gmain-img {
        width: 44%;
        margin-top: 0%;
    }

    .practiceQtn .container {
        height: 325px;
        overflow-y: auto;
    }

    .vdmodal .form-header .topics {
        flex-direction: column;
        justify-content: flex-start;
        text-align: left;
    }

    .vdmodal .form-header .topics p {
        font-size: 20px;
        font-weight: bold;
        color: #fff;
        padding: 0px;
        margin-left: 0px;
    }

    .footer-section {
        position: absolute;
        bottom: auto;
        width: 100%;
    }

    .home-cover {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .home-cover .main-cover {
        overflow-y: scroll;
    }

    .home-cover .home {
        height: 100%;
    }

    .home-cover .home-wrapper {
        height: 100%;
    }

    .gmain-img {
        width: 57%;
        margin-top: 0%;
        height: 278px;
    }

    .card-container,
    .front,
    .back {
        width: 100%;
        height: 288px !important;
    }

    .game-height-fix1 {
        height: 320px;
        overflow-y: auto;
    }

    .right-paddle {
        right: 20px;
        width: 30px;
        z-index: 1;
        height: 50px;
        margin: 35px 20px;
    }

    .left-paddle {
        left: 20px;
        width: 30px;
        z-index: 1;
        height: 50px;
        margin: 35px 20px;
    }

    .chap-view-sol .indi-cover {
        margin-top: 20px;
        height: 100px;
        position: relative;
        margin: 1em auto;
    }

    .chap-view-sol .carousel-indicators {
        bottom: auto;
        justify-content: space-between;
        overflow-x: scroll;
        margin-right: 10%;
        margin-left: 10%;
    }

    .lottie_ani {
        width: 100%;
        height: 44vh;
    }

    .lottie_ani .wrap-body {
        width: 94%;
        height: 40vh;
    }
}

@media (max-width: 740px) {

    .home-right .cover-menu,
    .home-left .myprog-cover {
        height: 100vh;
        overflow-y: auto;
    }

    .dashboard .home-left .myprog-wrap,
    .home-right .menu.home-course {
        margin: 10px 10px 50px 10px;
    }

    .footer-section {
        position: absolute;
        bottom: auto;
        width: 100%;
    }

    .practiceQtn .container {
        height: 270px;
        overflow-y: auto;
    }

    .video-wrap {
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
    }

    .video-wrap video {
        width: 65%;
    }

    .thumbnailcover .vd-thumbnail {
        width: 55%;
    }

    .vdmodal .form-header .topics {
        display: flex;
        flex-wrap: wrap;
        padding: 5px 0px;
    }

    #myModal video {
        object-fit: fill;
        height: 220px;
    }

     #videoModal video,.video-js {
        object-fit: fill;
        height: 220px;
    }

    #courseIntro video {
        object-fit: fill;
        height: 250px;
    }

    #myModal .modal-body {
        padding: 5px;
    }
    #videoModal .modal-body {
        padding: 5px;
    }

    .modal .modal-header .topic .main-title {
        font-size: 15px;
    }

    .modal .modal-header .topic .sub-title {
        font-size: 14px;
    }

    .modal-header {
        padding: 8px 10px;
    }

    .form-sec .form-header .topics .sub-title {
        font-size: 18px;
        margin-top: 0px;
    }

    .foot {
        bottom: auto;
    }

    .action-btn-video {
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin: 10px 0px;
        grid-gap: 50px;
    }

    .banner .content .info .img-style {
        justify-content: unset;
    }

    .banner .content .info {
        flex-wrap: wrap;
    }

    .banner .content .info .img-style .skill,
    .banner .content .info .img-style .star,
    .banner .content .info .img-style .medals {
        margin-left: 150px;
    }

    .banner .content {
        margin-left: 0px;
    }

    /* Game */
    .game-body .offset-4 {
        margin-left: 0.333333%;
    }

    .flash-main {
        height: auto;
    }

    .game-main {
        height: auto;
    }

    .chapter-main {
        height: auto;
    }

    .chap-view-sol .indi-cover {
        margin-top: 20px;
        height: 100px;
        position: relative;
        margin: 1em auto;
    }

    .lottie_ani {
        width: 100%;
        height: 125vh;
    }

    #submit-success {
        height: auto;
    }

    .home-left .cover-menu,
    .certificate.certificate-cover {
        overflow-y: auto;
    }
}

@media (max-width: 668px) {
    .vdmodal {
        height: 95%;
    }

    .dashboard .banner-box {
        padding: 20px;
    }

    .banner-box .banner-box-txt p {
        font-size: 18px;
    }

    .banner-box .achievement .subdiv .imgtxt-wrap p {
        font-size: 18px;
    }

    .banner .bwrapper .cups .badges {
        padding-top: 10px;
    }

    main .container .header h2 {
        font-size: 20px;
    }

    main .container .video .exmpvid .exmpvid-txt {
        font-weight: bold;
        font-size: 12px;
        margin-top: 2px;
    }

    .certificate .badges .content-wrap .topic {
        font-size: 15px;
    }

    .certificate .badges .content-wrap .chapter {
        font-size: 14px;
    }

    .home .home-wrapper {
        grid-template-columns: 1fr 1fr;
    }

    .practiceQtn .container .question {
        margin: 10px 0px;
        font-size: 16px;
    }

    .practiceQtn .container .answer1 {
        margin-bottom: 10px;
        font-size: 16px;
    }

    .practiceQtn .container .ans {
        margin: 10px 0px;
        font-size: 16px;
    }

    .practiceQtn .container {
        height: 205px;
        overflow-y: auto;
    }

    /* Chapter test css starts */
    .chapter-wrap .wrap .info-section {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 15px;
    }

    .chapter-wrap .wrap .info-section .left {
        font-size: 20px;
        font-weight: bold;
        color: red;
        display: flex;
        justify-content: center;
    }

    .chapter-wrap .wrap .info-section .right {
        display: flex;
        gap: 0px;
        justify-content: space-between;
    }

    .chapter-wrap .wrap .instructions {
        margin-top: 20px;
    }

    .chapter-wrap .wrap .instructions ul>li {
        margin: 30px 0px;
        font-size: 16px;
    }

    .carousel-indicators {
        margin-right: 0%;
        margin-left: 0%;
    }

    /* Chapter test css ends */

    .footer-section .footer-bottom p {
        font-size: 16px;
    }

    .chapter .chap-content .cover {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .chap-wrapper .medals-stars .med-gold {
        margin-right: 0px;
    }

    .chap-wrapper .chap-content {
        padding: 5px;
    }

    .chap-wrapper .chap-content.chapwrap {
        display: grid;
        grid-template-columns: 1fr 95px;
    }

    .chap-wrapper .medals-stars p {
        font-size: 15px;
    }

    .chap-wrapper .medals-stars .ms {
        width: 15px;
    }

    .container .chapter .title {
        font-weight: bold;
        font-size: 15px;
    }

    #chaptest_result .modal-title {
        font-size: 16px;
    }

    .home-cover .main-cover {
        height: auto;
        overflow-y: scroll;
    }

    .chap-view-sol .arrleft {
        top: 65%;
    }

    .chap-view-sol .arright {
        top: 65%;
    }

    .arrleft {
        top: 65%;
    }

    .arright {
        top: 65%;
    }

    .chap-view-sol .indi-cover {
        margin-top: 20px;
        height: 100px;
        position: relative;
        margin: 1em auto;
    }

    .right-paddle {
        right: 18px;
        width: 30px;
        z-index: 1;
        height: 50px;
        margin: 35px 20px;
    }

    .left-paddle {
        left: 18px;
        width: 30px;
        z-index: 1;
        height: 50px;
        margin: 35px 20px;
    }

    .lottie_ani {
        width: 100%;
        height: 120vh;
    }

    #submit-success {
        height: auto;
    }

    .home-left .myprog-cover,
    .home-right .cover-menu {
        overflow: auto;
        height: 100vh;
        background-color: #eff4ff;
    }

    .home-left .cover-menu,
    .certificate.certificate-cover {
        overflow-y: auto;
    }

    .dashboard .home .home-wrapper.myprogress {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 10px;
    }

    .dashboard .home-left .myprog-wrap,
    .home-right .menu.home-course {
        margin: 10px 10px 50px 10px;
    }

    .home-right .classes img {
        margin-right: 10px;
    }

    .home-right .menu button p {
        font-size: 14px;
    }

    .home-left .myprog-wrap .myprog-box .box-left p {
        font-weight: 600;
        font-size: 14px;
    }

    .certificate .badges>img {
        width: 30px;
        height: 40px;
    }

    .certificate.certificate-cover .badges {
        margin: 15px 10px;
    }

    .home-left .myprog-wrap .myprog-box .box-left .prog-status-img img {
        width: 25px;
        height: 25px;
    }

    #examSelection .modal-body .shadow form .form-group label {
        margin-left: 1px;
        font-size: 14px;
    }

    .skill-card .left div .subjects_list p {
        padding: 1px 5px;
        margin-left: 4px;
        letter-spacing: 1px;
    }

    .skill-card .left div .subjects_list p {
        font-size: 10px;
    }

    #examSelection .modal-body .shadow form .form-group input {
        width: 16px;
        height: 16px;
    }

    .chap-wrapper p img {
        width: 20px;
    }

    .chap-wrapper p img.prog_tick {
        width: 30px;
    }

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

    .box-container {
        padding: 10px;
        gap: 10px;
    }

    .box-container .points>p {
        font-size: 14px;
    }

    .points img {
        width: 30px;
        height: 30px;
    }

    .box-container .row .d-flex {
        gap: 20px;
    }

    .box-container {
        width: 100%;
    }

    .myprogress .milestone .card .incard {
        grid-template-columns: repeat(4, 1fr);
        row-gap: 20px;
    }
}

@media (min-width: 820px) and (max-width: 1000px) {
    .lottie_ani {
        width: 100%;
    }
}

@media (min-width: 668px) and (max-width: 820px) {
    .lottie_ani {
        width: 100%;
    }
}

@media (max-width:668px) {
    .foot .ans-section.multi-fillup {
        gap: 7px;
    }

    .foot .ans-section .prefix {
        display: flex;
        justify-content: flex-end;
    }

    .foot .ans-section.multi-fillup .prefix,
    .foot .ans-section.multi-fillup .suffix {
        width: 100px;
    }

    .foot .ans-section.multi-fillup {
        flex-wrap: wrap;
    }

    .foot .ans-section .fillup {
        gap: 0px;
        width: 300px;
    }

    .foot .ans-section .txtbox {
        margin: 0px 5px;
    }
}

@media (max-width: 667px) {
    .footer-section {
        position: absolute;
        bottom: auto;
        width: 100%;
    }

    /* Game */
    .game-body .offset-4 {
        margin-left: 0.333333%;
    }

    .chap-wrapper .medals-stars {
        gap: 4px;
    }

    .chap-wrapper .medals-stars p {
        font-size: 15px;
    }

    .chap-wrapper .medals-stars .ms {
        width: 14px;
    }
      .box-container .row .d-flex {
        gap: 25px;
    }
    .box-container {
        gap: 20px;
    }
}

@media (max-width: 670px) {
    .video-wrap {
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
    }

    .video-wrap video {
        width: 73%;
    }

    .thumbnailcover .vd-thumbnail {
        width: 61%;
    }

    .vdmodal .form-header .topics {
        display: flex;
        flex-wrap: wrap;
        padding: 5px 0px;
    }

    .form-sec .form-header .topics .sub-title {
        font-size: 16px;
        margin-top: 0px;
    }

    .foot {
        bottom: auto;
    }

    .tab-wrap .certificate>.badges {
        align-items: center;
        flex-wrap: unset;
    }
}

@media (max-width:620px) {

    .banner .content .info .img-style .skill,
    .banner .content .info .img-style .star,
    .banner .content .info .img-style .medals {
        margin-left: 80px;
    }

    .chapter-main .container,
    .container-sm {
        max-width: 490px !important;
    }

    .dashboard .home .home-wrapper.myprogress {
        grid-template-columns: 1fr 1fr;
    }

    .home-left .myprog-cover,
    .home-right .cover-menu {
        height: 70vh;
    }

    .banner-box {
        background-color: #fff;
        padding: 20px;
        margin: 0px;
    }

    .box-container .row .d-flex {
        gap: 20px;
    }

}

@media (max-width:570px) {
    .home .home-wrapper {
        grid-template-columns: 1fr;
    }

    .chap-view-sol .arright,
    .chap-view-sol .arrleft {
        width: 25px;
    }

    .box-container .row .d-flex {
        gap: 0px;
    }
}

@media (max-width:544px) {
    .myprogress.mlstone_cover {
        width: auto;
        height: 400px;
        overflow-y: scroll;
    }

    .box-container .row .d-flex {
        gap: 10px;
    }

    .box-container {
        gap: 0px;
    }

}

@media (max-width: 480px) {
    
    /* game css */
    .game-next-btn {
        bottom: -7px !important;
        left: 0%;
    }

    .game-text-height {
        border: 1px solid #ccc;
        margin-left: 0%;
        border-radius: 5px;
        padding: 10px;
    }

    /* Games */
    .gmain-img {
        width: 100%;
    }

    .card-container,
    .front,
    .back {
        width: 100%;
        height: 292px;
    }

    .navbar-light .navbar-toggler-icon {
        width: 25px;
        height: 25px;
    }

    .navbar-light .navbar-toggler {
        color: rgba(0, 0, 0, .5);
        border: unset;
        padding: 0px;
    }

    header .navbar form {
        justify-content: space-between;
    }

    header svg {
        width: 25px;
        height: 25px;

    }

    header .navbar-collapse a.btn {
        padding: 0px;
    }

    header .navbar-collapse .fv-div a.btn, header .navbar-collapse .ml-center a.btn {
        padding: 4px;
    }

    header .navbar form .ern-coins {
        display: none !important;
    }

    header .navbar .hlight-coins {
        display: block;
    }
    /*header .navbar .schlight{
        display: block;
    }*/
    /*avail in style*/
    /*header .navbar .hlight-coins img {
        width: 40px;
    }*/

    /* Main content styles */
    main .container {
        width: 100%;
        margin: 0px 0px 20px 0px;
    }

    main .container .video {
        display: flex;
        padding: 10px 15px;
        justify-content: space-between;
    }

    main .container .video .exmpvid .exmpvid-txt {
        font-size: 12px;
    }

    main .container .video .exmpvid .exptxt {
        margin-top: 0px;
    }

    main .container .chap-wrapper .course-intro .concept {
        padding: 0px 0px 0px 5px;
    }

    main .container .sub-title {
        font-size: 15px;
    }

    main .container .chap-wrapper .chap-header .headertxt {
        font-size: 16px;
        font-weight: bold;
    }

    .chap-wrapper .chap-content .medal-wrap img {
        width: 18px;
        height: 18px;
    }

    .container .chapter .concept .title {
        font-size: 14px;
    }

    .container .chapter .concept .title.learn {
        font-size: 14px;
        color: #000;
    }

    .container .chapter .concept .title.grey {
        font-size: 13px;
        color: #91919F;
    }

    .wrapper {
        margin-left: 0px;
        grid-template-columns: 100%;
    }

    .dropdown-item:hover {
        background-color: #007AFC;
        color: white;
    }

    .dropdown-toggle {
        color: #007AFC;
    }

    .dropdown-item {
        color: black;
        font-size: 13px;
    }

    .chap-wrapper button p {
        font-size: 14px;
    }

    .foot {
        bottom: 0px;
    }

    /* video modal */
    .form-sec .form-header .topics .sub-title {
        font-size: 15px;
        margin-top: 0px;
    }

    #myModal .modal-header .topics .main-title {
        font-size: 15px;
    }

    #myModal .modal-header .topics .sub-title {
        font-size: 13px;
    }
     #videoModal .modal-header .topics .main-title {
        font-size: 15px;
    }

    #videoModal .modal-header .topics .sub-title {
        font-size: 13px;
    }


    #vd-feedback {
        background-image: url(../img/ic_rate_icon.png);
        background-repeat: no-repeat;
        position: absolute;
        content: "";
        width: 25px;
        height: 25px;
        top: 8%;
        right: 0%;
        background-size: 25px;
        transform: translate(-50%, -50%);
    }

    .vdmodal .form-header .topics p {
        font-size: 18px;
        font-weight: bold;
        color: #fff;
        padding: 0px;
        margin-left: 0px;
    }

    .vdmodal .form-header .topics {
        display: flex;
        flex-wrap: wrap;
        padding: 5px 10px;
    }

    .thumbnailcover {
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        margin: 20px 0px;
    }

    .thumbnailcover .vd-thumbnail {
        width: 100%;
        height: auto;
    }

    .video-wrap {
        height: auto;
        display: flex;
        justify-content: center;
        margin: 20px 0px;
    }

    .video-wrap video {
        width: 100%;
    }

    /* Question modal */

    .form-sec h3 {
        font-size: 20px;
        font-weight: 600;
        line-height: 32px;
        color: #fff;
        text-align: left;
        padding: 15px;
        margin-bottom: 0px !important;
        margin-top: 0px;
    }

    .form-sec {
        width: 90%;
    }

    .practiceQtn .container .question {
        margin: 0px;
        font-size: 14px;
    }

    .practiceQtn .container {
        height: 325px;
        overflow-y: auto;
        padding: 10px;
    }

    .modal-header .topics .main-title {
        font-size: 18px;
    }

    .practiceQtn .container .answer {
        font-size: 14px;
        margin-top: 10px;
    }

    .answer1 {
        margin-top: 30px;
        font-size: 18px;
    }

    .practiceQtn .container .ans {
        margin: 10px 0px;
        font-size: 14px;
    }

    .practiceQtn .container .info {
        color: #959597;
        margin: 20px 0px 20px 0px;
        font-size: 20px;
    }

    .foot .answer {
        display: grid;
        background-color: #e8f9fd;
        grid-template-columns: 1fr 2fr 1fr;
        grid-gap: 15px;
    }

    .foot .answer .text p {
        font-size: 15px;
    }

    .foot .answer .unit p {
        font-size: 15px;
    }

    .foot .answer .text {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .action-btns {
        display: flex;
        margin: 10px;
        justify-content: space-between;
    }

    /* Home */
    .banner .content .info p {
        font-size: 16px;
    }

    .home-right .menu .classes {
        border: 1px solid #bdbdbd;
    }

    .dashboard .banner .bwrapper {
        grid-template-columns: 1fr;
    }

    .dashboard .banner .bwrapper .stu-info {
        display: grid;
        gap: 20px;
        margin-bottom: 0px;
    }

    .dashboard .home-left .myprog-wrap,
    .home-right .menu.home-course {
        margin: 10px 20px 50px 20px;
    }

    .banner-box {
        background-color: #fff;
        margin: 0px;
    }

    .home-left .myprog-cover {
        height: 400px;
    }

    .certificate.certificate-cover {
        height: 400px;
        overflow-y: auto;
    }

    .banner .bwrapper .stu-info {
        display: grid;
        grid-template-columns: 1fr;
        margin: 0px 0px 20px 0px;
        grid-gap: 20px;
    }

    .banner .content .info {
        text-align: center;
        flex-direction: row;
        justify-content: space-between;
    }

    .banner .content .info .img-style {
        width: 50%;
    }

    .banner .stu-info .crown {
        display: block;
        /* width: 94px; */
        margin-bottom: -18px;
    }

    .banner .content .badges {
        grid-template-columns: 1fr 1fr 1fr;
        margin: 0px;
    }

    .banner .title {
        margin-left: 20px;
    }

    .banner .stu-info .stu-img {
        width: 85px;
        height: 82px;
    }

    .banner .bwrapper .stu-info .st-img {
        margin-bottom: 0px;
    }

    .banner .content .info {
        display: flex;
        flex-wrap: wrap;
        margin: 0px;
    }

    .banner .bwrapper .cups .badges {
        display: flex;
        gap: 15px;
    }

    .banner .banner-top-title .banner-top-txt {
        font-size: 12px;
    }

    .banner .banner-top-title .banner-left {
        gap: 5px;
    }

    .banner .banner-top-title .faleft {
        font-size: 15px;
        top: -1px;
    }

    .banner-box p {
        font-size: 14px;
    }

    .banner-box .banner-box-txt p {
        font-size: 14px;
    }

    .banner-box .achievement .subdiv .imgtxt-wrap p {
        font-size: 14px;
    }

    .banner-box .banner-box-txt img {
        width: 20px;
        height: 20px;
    }

    .banner-box .achievement .imgtxt-wrap img {
        width: 20px;
        height: 20px;
    }

    .dashboard .banner-box {
        padding: 20px;
    }

    .wrap-award .award-img .goldcup {
        width: 80px;
    }

    .wrap-award-empty .award-img .emptycup {
        width: 80px;
    }

    .wrap-award .award-img .medal {
        position: absolute;
        top: 15%;
        left: 35%;
        width: 25px;
    }

    .wrap-award .award-img .medal.streak {
        position: absolute;
        top: 10%;
        left: 38%;
        width: 20px;
    }

    .wrap-award-empty .award-img .medal {
        position: absolute;
        top: 17%;
        left: 34%;
        width: 25px;
    }

    .emptycup {
        width: 80px;
    }

    .home .home-wrapper {
        grid-template-columns: 1fr;
        gap: 0px;
    }

    .dashboard .home .home-wrapper.myprogress {
        grid-template-columns: 1fr;
        gap: 0px;
    }

    .home-left .myprog-wrap,
    .home-right .menu.home-course {
        margin: 10px 20px 50px 20px;
    }

    .home-left .myprog-wrap .myprog-box {
        grid-template-columns: 5fr 1fr;
        padding: 10px;
    }

    .home-left .myprog-wrap .myprog-box .box-left p {
        font-size: 14px;
    }

    .home-left .myprog-wrap .myprog-box .box-left .prog-status-img img {
        width: 22px;
        height: 22px;
    }

    .home .home-wrapper .home-right h3 {
        border: 1px solid #e1e1e1;
    }

    .home-right .menu p {
        margin: 0px !important;
        font-size: 14px !important;
    }


    #myTab .nav-link {
        font-size: small !important;
    }

    .dash_tab .nav-link {
        padding: 12px;
    }

    .certificate .badges .content-wrap .chapter {
        color: #a2a2ae;
        font-size: 12px;
    }

    .certificate .badges .content-wrap .topic {
        color: #1c1d1f;
        font-weight: bold;
        font-size: 13px;
    }

    .banner .content .info .img-style .skill,
    .banner .content .info .img-style .star,
    .banner .content .info .img-style .medals {
        margin-left: 0px;
    }

    .banner .content {
        margin-left: 0px;
    }

    main .container .chap-wrapper .course-intro {
        grid-template-columns: 200px 1fr;
    }

    .vid-imgcover .vid-img {
        width: 100%;
    }

    .popup-vid video {
        width: 100%;
    }

    .modal-content {
        border: none;
    }

    .tab-wrap .badges img {
        width: 70px;
        height: 42px;
    }

    .tab-wrap .certificate img {
        width: 65px;
        height: 50px;
    }

    #myModal .modal-header .mtitle {
        font-size: 14px;
    }
     #videoModal .modal-header .mtitle {
        font-size: 14px;
    }

    .sol-video .modal-header .vd-title {
        font-size: 14px;
    }

    .modal-header {
        padding: 0.6rem 1rem;
    }

    /* ap */
    .chap-wrapper .medals-stars p {
        font-size: 14px;
    }

    .chap-wrapper .medals-stars .ms {
        width: 16px;
    }

    #myModal video {
        object-fit: fill;
        height: 200px;
    }
     #videoModal video,.video-js {
        height: 200px;
    }

    #courseIntro video {
        object-fit: fill;
        height: 200px;
    }


    #courseIntro .modal-header .modal-title {
        font-size: 15px;
    }

    /* Practical Question modal styles */
    .practiceQtn .container .a-section .crt-ans {
        background-color: #27ae60;
        padding: 10px;
        margin-top: 20px;
    }

    .practiceQtn .container .a-section .wrong-ans {
        background-color: #eb5757;
        padding: 10px;
        margin-top: 20px;
    }

    .practiceQtn .container .a-section .crt-ans p,
    .practiceQtn .container .a-section .wrong-ans p {
        font-size: 14px;
        font-weight: bold;
        color: #fff;
    }

    .practiceQtn .container .a-section .solution .soltxt {
        font-size: 14px;
        margin: 10px 0px;
        font-weight: bold;
    }

    .practiceQtn .container .a-section .solution p {
        font-size: 14px;
    }

    .foot .ans-section .txtbox {
        margin: 0px 5px;
    }

    .foot .ans-section .divider-style .mixed-divider {
        height: 2px;
        background-color: #000;
        margin: 5px 0px;
        width: 100px;
    }

    /* Games */

    .gmain-img {
        width: 100%;
        height: 245px;
    }

    button.btn.btn-danger.bame-btn {
        width: 110px;
    }

    .back h4 {
        font-size: 15px;
        color: #a29d9d;
        line-height: 25px;
        padding: 0 14px;
    }

    .chaptertest-slider .carousel-item .chapQsection .question {
        font-size: 14px;
    }

    .chaptertest-slider .carousel-item .chapQsection .chapAnssection .answer {
        font-size: 14px;
    }

    .chaptertest-slider .carousel-item .chapQsection .chapAnssection .ans {
        font-size: 14px;
    }

    /* Chaptertest starts */
    .carousel-indicators {
        bottom: auto;
        justify-content: space-around;
        margin: 20px 0px;
    }

    .chap-view-sol .carousel .carousel-indicators li {
        margin-right: 10px;
        margin-left: 10px;
    }

    .chaptertest-cover .carousel .carousel-indicators li {
        margin-right: 10px;
        margin-left: 10px;
    }

    .carousel-indicators .text {
        position: absolute;
        color: #000;
        font-size: 13px;
    }

    .timer {
        padding: 10px;
    }

    .timer .runtime>img {
        height: 16px;
        width: 16px;
    }

    .timer .run-timer {
        font-size: 16px;
    }

    .timer .title>p {
        font-size: 16px;
    }

    .timer .submit-test {
        font-size: 12px;
    }

    .notification-header .title h3 {
        font-size: 24px;
    }

    .chaptertest-slider .carousel-item .chapQsection .crt-ans {
        background-color: #27ae60;
        padding: 10px;
        margin-top: 30px;
    }

    .chaptertest-slider .carousel-item .chapQsection .a-section .crt-ans p,
    .chaptertest-slider .carousel-item .chapQsection .a-section .wrong-ans p {
        font-size: 14px;
        font-weight: bold;
        color: #fff;
        padding-top: 0px;
    }

    .chaptertest-slider .carousel-item .chapQsection .a-section .solution .soltxt {
        font-size: 14px;
        margin: 10px 0px 0px 0px;
    }

    .chaptertest-slider .carousel-item .chapQsection .a-section .solution .solution {
        font-size: 14px;
    }

    .carousel-inner .carousel-item .container .check {
        margin: 0px 10px;
        border: 1px solid;
        padding: 20px 0px 0px 0px;
    }

    /* Chapter test intro page */

    .chapter-wrap .wrap .info-section {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 15px;
    }

    .chapter-wrap .wrap .info-section .left {
        font-size: 20px;
        font-weight: bold;
        color: red;
        display: flex;
        justify-content: center;
    }

    .chapter-wrap .wrap {
        margin: 20px;
    }

    .chapter-wrap .wrap .instructions ul>li {
        margin: 15px 0px;
        font-size: 14px;
        line-height: 28px;
    }

    .chapter-wrap .wrap .startbtn {
        text-align: center;
        border-radius: 30px;
        padding: 6px 15px;
        font-size: 14px;
    }

    .chapter-wrap .wrap .instructions {
        margin-top: 20px;
    }

    .chapter-wrap .wrap .info-section .left>p {
        font-size: 18px;
    }

    .chapter-wrap .wrap .instructions .instruct {
        font-size: 16px;
    }

    .chapter-wrap .wrap .info-section .right {
        display: flex;
        gap: 0px;
        justify-content: space-between;
    }

    .chapter-wrap .wrap .info-section .right .noOfQ {
        gap: 5px;
    }

    .chapter-wrap .wrap .info-section .right .noOfQ .txtstyle {
        font-size: 14px;
    }

    .chapter-wrap .wrap .info-section .right .timing .txtstyle {
        font-size: 14px;
    }

    /* all-popup */
    .rewars-body h1 {
        font-size: 19px;
    }

    .rewars-body p {
        font-size: 13px;

    }

    .rewars-body-award h2 {
        font-size: 16px !important;
    }

    .rewars-body h2 {

        font-size: 19px;
    }

    .rewars-body-award {
        margin: 5% 0;
    }

    .rewars-body-award h3 {
        font-size: 13px;
    }

    .rewars-body h6 {

        font-size: 14px;
    }

    .black_share_btn span {
        font-size: 16px;
    }

    .btn-btm {
        bottom: 0px !important;
    }

    /* chaptertest ends */

    .carousel .carousel-inner .carousel-item p {
        padding-top: 0px;
    }

    .foot .ans-section .fillup p {
        font-size: 12px;
    }

    .foot .ans-section .txtbox {
        width: 50%;
    }

    .foot .ans-section .txtbox {
        width: 30%;
    }

    .foot .ans-section .divider {
        width: 115px;
    }

    .foot .ans-section .txtbox.mixtxtbox {
        width: 85%;
    }

    .foot .ans-section .mixfraction-cover {
        width: 35%;
    }

    .game-body .card {
        height: 84px;
        margin-bottom: 8%;
    }

    .chap-wrapper .chap-content.chapwrap {
        display: grid;
        grid-template-columns: 1fr 95px;
    }

    .chap-wrapper .medals-stars {
        display: flex;
        gap: 6px;
        align-items: center;
        justify-content: flex-start;
    }

    .chapter .chap-content .cover {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .chapter .chap-content .cover img {
        width: 70px;
        height: 60px;
    }

    .chap-wrapper .medals-stars .med-gold {
        margin-right: 10px;
    }

    .chap-wrapper .chap-content {
        padding: 10px;
    }

    .chap-wrapper .medals-stars .ms {
        width: 18px;
    }

    .container .chapter .title {
        font-weight: bold;
        font-size: 14px;
    }

    /* Home */
    .home-cover .main-cover {
        height: auto;
        overflow-y: scroll;
    }

    .home-cover .home {
        height: auto;
    }

    .home-right .cover-menu {
        height: 400px;
        overflow-y: auto;
    }

    .home-left .cover-menu {
        height: 400px;
        overflow-y: auto;
    }

    .tab-wrap .badges {
        padding: 15px 0px;
        gap: 15px;
    }

    .certificate.certificate-cover .badges {
        margin: 15px 0px;
    }

    .practiceQtn .container::-webkit-scrollbar,
    .wrapper main::-webkit-scrollbar,
    .wrapper aside::-webkit-scrollbar,
    .chapresult::-webkit-scrollbar,
    .home-right .cover-menu::-webkit-scrollbar,
    .home-left .cover-menu::-webkit-scrollbar,
    #chaptest_result .chapTest-modal::-webkit-scrollbar,
    .solution.solstyle::-webkit-scrollbar,
    .home-tabcontent::-webkit-scrollbar,
    .chap-view-sol .check::-webkit-scrollbar,
    .overview_wrap::-webkit-scrollbar,
    .top-parent::-webkit-scrollbar {
        width: 5px;
    }

    .carousel-control-next,
    .carousel-control-prev {
        width: 7%;
    }

    .chap-view-sol .carousel-inner .carousel-item .container .check {
        margin: 0px 15px;
        border: 1px solid;
        padding: 20px 0px 0px 0px;
        height: 80vh;
        overflow-y: auto;
    }

    .chap-view-sol .arrleft {
        height: 100%;
        width: 25px;
        position: fixed;
        z-index: 1;
        left: 0;
        overflow-x: hidden;
        padding-top: 20px;
    }

    .chap-view-sol .arright {
        height: 100%;
        width: 25px;
        position: fixed;
        z-index: 1;
        right: 0;
        overflow-x: hidden;
        padding-top: 20px;
    }

    .chap-view-sol .carousel-indicators {
        bottom: auto;
        justify-content: space-between;
        max-width: 100%;
        overflow-x: scroll;
        padding: 5px 0px;
        margin-right: 60px;
        margin-left: 60px;
    }

    .chaptertest-cover .carousel-indicators {
        bottom: auto;
        justify-content: space-between;
        max-width: 100%;
        overflow-x: scroll;
        padding: 5px 0px;
        margin-right: 18%;
        margin-left: 18%;
    }

    .right-paddle {
        right: 25px;
        width: 40px;
        z-index: 1;
        height: 55px;
        margin: 35px 0px;
    }

    .left-paddle {
        left: 25px;
        width: 40px;
        z-index: 1;
        height: 55px;
        margin: 35px 0px;
    }

    .chap-view-sol .indi-cover {
        height: 100px;
        position: relative;
        margin: 1em auto;
    }

    .banner .sharebtn .sharebtn-style p {
        font-size: 14px;
        color: #fff;
    }

    .banner .sharebtn .sharebtn-style img {
        width: 18px;
        height: 19px;
    }

    .banner .sharebtn .sharebtn-style {
        padding: 7px;
    }

    .lottie_ani {
        width: 100%;
    }

    .lottie_ani .wrap-body {
        position: absolute;
        width: 91%;
    }

    #submit-success {
        height: -webkit-fill-available;
    }
     .myprogress i {
        font-size: 10px;
    }
    .myprogress .progress_cards .wrap_prog .star {
        margin-top: -5px;
        display: flex;
    }

    .myprogress .progress_cards .wrap_prog .star img,
    .myprogress .milestone .wrap_prog .star img {
        width: 13px;
        height: 13px;
    }

    .myprogress .progress_cards .card,
    .myprogress .milestone .card {
        height: auto;
        padding: 5px 5px 8px 5px;
    }

    .myprogress .progress_cards .card p,
    .myprogress .milestone .card p {
        font-size: 13px;
        padding: 5px 0px;
    }

    .myprogress .progress_cards .wrap_prog img,
    .myprogress .milestone .wrap_prog img {
        width: 45px;
    }

    .myprogress .progress_cards .card .result>p img,
    .myprogress .milestone .card .result>p img {
        width: 15px;
        height: 15px;
    }

    .myprogress .progress_cards .card .result>p,
    .myprogress .milestone .card .result>p {
        font-size: 12px;
    }

    main .container .chap-wrapper .myprogress p:nth-child(2),
    main .container .chap-wrapper .myprogress p:nth-child(3) {
        gap: 2px;
        font-size: 14px;
    }

    main .container .chap-wrapper .myprogress {
        gap: 10px;
        padding: 5px;
    }

    main .container .chap-wrapper .myprogress p:first-child {
        font-size: 14px;
    }

    .chap-wrapper p img {
        width: 15px;
        padding-bottom: 5px;
    }

    .chap-wrapper p img.prog_tick {
        width: 20px;
        padding-bottom: 2px;
    }

    .marks-arrow {
        margin-right: 20px;
    }

    .prog_info p:first-child {
        font-size: 12px;
    }

    .prog_info p:nth-child(2) {
        font-size: 18px;
    }

    .prog_info p:nth-child(3) {
        font-size: 16px;
    }

    .prog_info img {
        width: 70px;
    }

    .prog_info p:nth-child(5) {
        font-size: 14px;
    }

    .prog_info p:nth-child(5) span {
        font-size: 16px;
    }

    .prog_info p:nth-child(6) span {
        font-size: 18px;
        color: #000;
    }

    .myprogress .progress_cards p,
    .myprogress .milestone p {
        margin-bottom: 0px;
    }

    .rewars-modal-style .rewars-body img {
        width: 27px;
    }

    .rewars-modal-style .rewars-body h1 {
        font-size: 20px;
        padding: 3px 0px;
    }

    .rewars-modal-style .rewars-body .rewars-body-main h1 {
        font-size: 20px;
        padding: 0px;
    }

    .rewars-modal-style .rewars-body h2 {
        font-size: 16px;
        padding: 3px 0px;
    }

    .rewars-modal-style .rewars-body .rewars-body-award img {
        width: 60px;
    }

    .rewars-modal-style .rewars-body-award h3 {
        letter-spacing: 0px;
        font-size: 14px;
    }

    .rewars-modal-style .rewars-body-award h3 b {
        color: #000;
        font-size: 15px;
    }

    .rewars-modal-style .rewars-body .subject {
        font-size: 14px;
    }

    .star_stu .rewars-modal-style .rewars-body h2 {
        padding: 0px 0px;
    }

    .star_stu .rewars-modal-style .rewars-body h2 {
        font-size: 16px;
    }

    .myprogress .myprog img {
        width: 70px;
        margin: 15px 0px;
    }

    .myprogress .myprog p {
        margin-bottom: 5px;
        font-size: 14px;
    }

    .myprogress .myprog p:last-child {
        font-size: 18px;
        font-weight: 900;
    }

    .myprogress .progress_cards .card p {
        margin-left: 5px;
    }

    .myprogress .milestone p {
        margin: 7px 0px;
    }
        
    .myprogress .milestone .card .incard {
        margin-top: 0px;
        grid-template-columns: repeat(5, 1fr);
    }
    
    .myprogress .myprog_title img {
        width: 18px;
    }

    .myprogress .progress_cards,
    .myprogress .milestone {
        margin: 15px auto;
    }

    .myprogress i {
        font-size: 10px;
    }

    .myprogress .progress_cards .wrap_prog .star,
    .myprogress .milestone .wrap_prog .star {
        display: flex;
    }

    .dropdown-item {
        padding: 5px 10px !important;
        gap: 6px;
        grid-template-columns: 16px 1fr;
    }

    .dropdown-item img {
        width: 16px;
        height: 15px;
    }

    .dropdown-item.faq-help img, .dropdown-item.about-us img {
        height: 14px;
        width: 14px;
    }

    .dropdown-item img.logout {
        width: 14px;
        height: 11px;
    }

    .dropdown-item img.accounts,
    .dropdown-item img.share {
        width: 13px;
        height: 13px;
    }
    /*dev changes*/
    .tab-wrap .badges img {
        width: 50px;
        height: 50px;
    }

    .points img {
        width: 25px;
        height: 25px;
    }

    .points {
        padding: 10px 0px;
    }

    .box-container .points>p {
        font-size: 12px;
        display: flex;
        flex-direction: column;
    }
    
    .box-container .row .d-flex {
        gap: 0px;
    }

    .box-container {
        gap: 10px;
            grid-template-columns: 1fr 70px 1fr;
    }

    .box-container .points>p {
        font-size: 10px;
        gap: 0px;
    }
}

@media (max-width: 480px) {
    .lottie_ani {
        width: 100%;
    }
}

@media (max-width: 415px) {
    .lottie_ani {
        width: 100%;
        height: auto;
    }

    #submit-success .cone-img {
        width: 32%;
    }

    .banner .bwrapper .cups .badges {
        padding-top: 30px;
    }
}

@media (max-width: 395px) {
    .lottie_ani {
        width: 100%;
        height: auto;
    }
    .box-container {
        gap: 0px;
    }

    .points img {
        width: 22px;
        height: 21px;
    }

}

@media (max-width: 376px) {
    .lottie_ani {
        width: 100%;
        height: 59vh;
    }

    #submit-success {
        height: auto;
    }
}

@media (max-width:360px) {
    .banner .content .info p {
        font-size: 14px;
    }

    .wrap-award .award-img .goldcup {
        width: 80px;
    }

    .emptycup {
        width: 80px;
    }

    .carousel-inner .carousel-item .container .check {
        margin: 0px 0px;
        border: 1px solid;
        padding: 20px 0px 0px 0px;
    }

    .timer .title>p {
        font-size: 14px;
    }

    .timer .run-timer {
        font-size: 14px;
    }

    .timer .runtime {
        gap: 2px;
    }

    .chaptertest-slider .carousel-item .a-section .solution {
        padding: 5px;
        font-size: 14px !important;
    }

    .chap-view-sol .indi-cover {
        height: 100px;
        position: relative;
        margin: 1em auto;
    }

    .chap-view-sol .carousel-indicators {
        justify-content: space-between;
    }

    .chap-view-sol .carousel-indicators {
        margin-right: 55px;
        margin-left: 55px;
    }

    .lottie_ani {
        width: 100%;
        height: 53vh;
    }

    #submit-success {
        height: -webkit-fill-available;
    }

.box-container .row .d-flex {
    gap: 10px;
}

.dash .banner {
    padding: 10px;
}
}


/* Desktop-1 mediaQuery ends */
#examSelection .modal-header {
    background-color: #767a7f;
}

#examSelection .modal-body {
    padding: 20px 30px;
    position: relative;
}

#examSelection .modal-body .close {
    position: absolute;
    right: 0;
    top: -30px;
    width: 25px;
    height: 25px;
    cursor: pointer;
}

#examSelection .modal-body .form_wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 20px;
}

#examSelection .modal-body .submit_btn {
    text-align: center;
    margin: 10px 0px;
}

#examSelection .modal-body .title {
    gap: 10px;
    display: flex;
}

#examSelection .modal-body .title img {
    width: 25px;
    height: 25px;
}

#examSelection .modal-body .title p {
    font-size: 18px;
}

#examSelection .modal-body .shadow {
    margin: 20px 0px 0px 0px;
    padding: 20px;
    box-shadow: 0 0px 10px rgb(0 0 0 / 0.2) !important;
}

#examSelection .modal-body .shadow .form-group label {
    color: #666666;
    margin-left: 5px;
    margin-top: 2px;
}

#examSelection .modal-body .shadow .form-group input {
    width: 18px;
    height: 18px;
}

#examSelection .modal-body .shadow p {
    color: #666666;
    font-size: 20px;
    letter-spacing: 1px;
}

#examSelection .modal-body .shadow span {
    font-size: 16px;
    letter-spacing: 1px;
    margin-top: 10px;
}

.retest .retest_txt {
    color: #666666;
    padding: 10px 18px 18px 18px;
    line-height: 28px;
}

.retest .title p {
    font-size: 18px;
}

.retest .btn_grp {
    display: flex;
    justify-content: space-around;
}

.retest .btn_grp .btn {
    border-radius: 10px;
    width: 130px;
}

.retest .btn_grp .btn:first-child {
    color: #007afa;
    border: 2px solid #007afa;
}

.retest .title img {
    position: absolute;
    top: 18px;
    right: 18px;
}
.prim-color{
   color: #007afc; 
}
.myprogress:hover .prim-color
{
    color: #007afc !important;
}  
.cprogress-tab{
display: flex;
align-items: center;
gap: 5px;
line-height: 5px;
}
/*practice module*/
a:hover .svg_icon,
a:hover h6 {
    fill: #007afc;
    color: #007AFC;
}

a:hover .sk-ltcolor {
    fill: #63AEFF;
}
a:hover .sk-lttcolor {
    fill: #A1CFFF;
}
a:hover .sk-dkcolor {
    fill: #007AFC;
}

a:hover .sk-green {
    fill: #40b019;
}

a:hover .sk-orange {
    fill: #f6843f;
}

a h6 {
    margin: 0px;
    font-size: 12px;
}