:root{ --font-family:'SFRounded'; --primary-colors:#0C3958; /* rgba(12, 57, 88, 1) */ --secondary-colors: #FABB18; /* rgba(250, 187, 24, 1) */ --red-color:#E94A4A; /* rgba(233, 74, 74, 1) */ --green-color:#27c978; /* rgba(39, 201, 120, 1) */ --orange-color:#f87017; /* rgba(248, 112, 23, 1) */ --transition: .3s all linear; } body{font-family: var(--font-family);font-size: 14px;color: var(--primary-colors); background: rgba(7, 41, 64, 3%); letter-spacing: 0.2px;} a{text-decoration: none; color: var(--primary-colors); transition: var(--transition);} p{font-size: 16px; line-height: normal;} a:hover{color: var(--secondary-colors); transition: var(--transition);} ul, ol{list-style: none; padding: 0; margin: 0;} ::selection{background-color: var(--primary-colors); color: #fff;} ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: rgba(7, 41, 64, 30%) !important; } ::-moz-placeholder { /* Firefox 19+ */ color: rgba(7, 41, 64, 30%) !important; } :-ms-input-placeholder { /* IE 10+ */ color: rgba(7, 41, 64, 30%) !important; } :-moz-placeholder { /* Firefox 18- */ color: rgba(7, 41, 64, 30%) !important; } label{color: #072940; margin-bottom: 8px; font-size: 16px; display: block; position: relative;} .form-control{font-size: 18px; color: var(--primary-colors); font-weight: 500; background: #F7FBFF; border-radius: 12px; padding: 12px 15px; border: solid 1px rgba(12, 57, 88, 20%); width: 100%; box-sizing: border-box;} .form-control:focus{box-shadow: none; outline: none; border-color: var(--secondary-colors);} /* common-btn */ .common-btn{background: var(--primary-colors); border: solid 1px var(--primary-colors); border-radius: 50px; font-size: 20px; color: #fff; padding: 12px 16px; cursor: pointer; transition: var(--transition); font-weight: 600;} .yellow-btn{background-color: var(--secondary-colors); color: var(--primary-colors); border-color: var(--secondary-colors);} .yellow-color{color: var(--secondary-colors);} .common-btn.yellow-btn:hover, .common-btn.yellow-btn:active, .common-btn.yellow-btn:focus{background: var(--primary-colors); color: #fff; border-color: var(--primary-colors);} .common-btn:hover, .common-btn:active, .common-btn:focus{background: var(--secondary-colors); transition: var(--transition); color: var(--primary-colors); border-color: var(--secondary-colors); outline: none; box-shadow: none;} .common-btn.line-btn{background: transparent; color: var(--primary-colors); transition: var(--transition);} .common-btn.line-btn:hover, .common-btn.line-btn:active, .common-btn.line-btn:focus{border-color: var(--secondary-colors); color: var(--secondary-colors); transition: var(--transition);} /* form-group */ .form-group{margin-bottom: 24px;} .form-group .icon{position: relative;} .form-group .icon img{position: absolute;top: 0;bottom: 0;height: 18px;margin: auto;right: 20px;} .form-group .icon .form-control{padding-right: 50px;} textarea.form-control{resize: none;} select.form-control{background-image: url(../img/down-arrow.svg);background-position: calc(100% - 14px);background-size: 12px;background-repeat: no-repeat;padding-right: 40px;} ::-webkit-scrollbar {width: 4px; height: 4px;} ::-webkit-scrollbar-track {background: #EBEBEB;} ::-webkit-scrollbar-thumb {background-color: rgba(250, 187, 24, 50%);} /* login */ .login{display: flex; padding: 32px;align-items: center; justify-content: space-between; gap: 50px;} /* Highlight error for checkbox */ .highlight-error {background-color: rgba(255, 0, 0, 0.15);border-radius: 8px;padding: 5px;transition: background-color 0.3s ease;} /* Bounce animation for checkbox area */ @keyframes bounce { 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-10px);} 60% {transform: translateY(-5px);} } .bounce-animation { animation: bounce 1s ease; } .login .student-img {flex: 0 0 52%;position: relative; border-radius: 24px; overflow: hidden; background-image: linear-gradient(-45deg, rgba(250, 187, 24, 0.1), rgba(12, 57, 88, 0.1), rgba(250, 187, 24, 0.1), rgba(12, 57, 88, 0.1)); animation: bg-animation 10s infinite; background-size: 300%;} @keyframes bg-animation { 0% { background-position: left; } 50% { background-position: right; } 100% { background-position: left; } } /* login */ .login .student-img img {width: 100%;height: calc(100vh - 105px);object-fit: contain; object-position: bottom; min-height: 700px;} .login .title {margin-bottom: 48px;position: relative;padding-bottom: 20px;} .login .title:after {content: '';height: 2px;background: #fabb18;position: absolute;bottom: 0;left: 0;border-radius: 20px;width: 100px;} .login .title h1{font-weight: 300;color: var(--primary-colors);font-size: 22px;margin: 0 0 5px;display: flex;gap: 0;flex-direction: column;} .login .title h1 span{color: var(--secondary-colors);font-weight: bold;text-transform: uppercase;letter-spacing: 1px;font-size: 38px;} .login .title p{ color: rgba(7, 41, 64, 80%);font-size: 18px;margin: 0;line-height: 24px;font-weight: 500;} .login .title .text{font-size: 16px;margin-bottom: 15px;display: block;text-transform: capitalize;color: rgba(7, 41, 64, 60%);} .login .login-details {width: 500px;margin: 0 auto;display: flex;flex-direction: column; justify-content: center; } .login .login-area {display: flex; width: 100%; } .login .common-btn{width: 100%;} .login .no-account{font-size: 16px; color: var(--primary-colors); margin-top: 24px; margin-bottom: 0; text-align: center;} .login .no-account a{color: var(--secondary-colors);} /* .login footer{position: absolute;left: 0;right: 0;margin: 0 auto;bottom: 0;text-align: center; color: rgba(7, 41, 64, 50%); width: auto; background: transparent;} */ .login footer{background: transparent;} .login footer .login-footer{ display: inline-flex;gap: 10px;align-items: center; justify-content: center; } /* student-set-up */ .student-set-up{padding: 30px; position: relative;} .student-set-up:after{content: ''; position: absolute; position: absolute;width: 220px;height: 220px;left: 399px;top: -149px;background: var(--secondary-colors);opacity: 0.2;filter: blur(22.7px); border-radius: 50%;} .student-set-up .star {margin: 50px 0;position: relative;display: block;color: var(--secondary-colors);width: 0px;height: 0px;border-right: 130px solid transparent;border-bottom: 70px solid var(--secondary-colors);border-left: 130px solid transparent;transform: rotate(35deg);position: absolute;left: -101px;top: 490px;opacity: 0.2;filter: blur(10.4px);} .student-set-up .star:before {border-bottom: 80px solid var(--secondary-colors);border-left: 30px solid transparent;border-right: 30px solid transparent;position: absolute;height: 0;width: 0;top: -48px;left: -65px;display: block;content: '';transform: rotate(-35deg);} .student-set-up .star:after {position: absolute;display: block;color: var(--secondary-colors);top: 3px;left: -135px;width: 0px;height: 0px;border-right: 130px solid transparent;border-bottom: 70px solid var(--secondary-colors);border-left: 130px solid transparent;transform: rotate(-70deg);content: '';} .student-set-up .logo{width: auto; height: auto; border: none; border-radius: 0;} .student-set-up .logo img{width: auto; height: 45px;} .student-set-up .title{margin-bottom: 30px; text-align: center; margin-top: 40px;} .student-set-up .title h1{font-size: 36px; font-weight: bold; margin-bottom: 15px;} .student-set-up .title p{font-size: 20px; color: rgba(7, 41, 64, 80%);} .card{padding: 40px; background: #FFFFFF;border: 1px solid #EFF0F7;box-shadow: 0px 5px 16px rgba(8, 15, 52, 0.06);border-radius: 22px; position: relative; } /* student-set-up */ .step-card{max-width: 900px; margin: 0 auto;} .student-set-up .step.card:after{content: '';position: absolute;width: 300px;height: 300px;bottom: -150px;right: -150px;background: var(--secondary-colors);opacity: 0.2;filter: blur(22.7px);border-radius: 50%;z-index: -1;} .student-set-up .step-card .card-btn{margin: 40px 0 0; display: flex; gap: 15px; justify-content: space-between; align-items: center;} .student-set-up .step-card .card-btn .common-btn{width: 159px;} /*.student-set-up .step-card .card-btn.back-hidden{justify-content: right;}*/ .student-set-up .card .step-title{margin-bottom: 30px;} .student-set-up .common-btn{font-size: 18px;} .student-set-up .card .step-title h5{font-size: 24px; line-height: 35px; margin-bottom: 8px; font-weight: 600;} .student-set-up .card .step-title p{font-size: 18px; line-height: 18px; margin: 0;} .student-set-up .card .contact-details{display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px;} .student-set-up .card .contact-details.first-last-name {grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 30px;} .student-set-up .card .contact-details .form-group{margin: 0;} .student-set-up .card .card-header:first-child{border-radius: 0;} .student-set-up .card .card-header{padding: 0; background: transparent; border: none;} .student-set-up .card .card-header .nav-pills .nav-link{width: 34px; height: 34px; background: #EFF0F6; border-radius: 50%; font-size: 16px; display: flex; justify-content: center; align-items: center; flex: 0; position: relative; color: rgba(7, 41, 64, 50%); transition: var(--transition);} .student-set-up .card .card-header .nav-pills .nav-link:after{content: ''; position: absolute; right: -92px; top: 0; bottom: 0; width: 72px; background: #EFF0F6; border-radius: 40px; height: 6px; margin: auto; transition: var(--transition);} .student-set-up .card .card-header .nav ul {display: flex;justify-content: center; gap: 112px;} .student-set-up .card .card-header .nav{display: block; border-bottom: solid 1px #D9DBE9; padding-bottom: 30px; margin-bottom: 30px;} .student-set-up .card .card-header .nav ul li:last-of-type .nav-link:after{display: none;} .student-set-up .card .card-header .nav-pills .nav-link.pre-active, .student-set-up .card .card-header .nav-pills .nav-link.active{background: var(--secondary-colors); color: rgba(7, 41, 64, 100%); transition: var(--transition);} .student-set-up .card .card-header .nav-pills .nav-link.pre-active:before, .student-set-up .card .card-header .nav-pills .nav-link.active:before{content: ''; position: absolute; right: -56px; top: 0; bottom: 0; width: 36px; background:var(--secondary-colors); border-radius: 40px; height: 6px; margin: auto; z-index: 2; transition: var(--transition);} .student-set-up .card .card-header .nav-pills .nav-link.pre-active:before{right: -92px; width: 72px; transition: var(--transition);} .student-set-up .card .card-header .nav-pills .nav-link.last::before, .student-set-up .card .card-header .nav-pills .nav-link.last::after{display: none;} .student-set-up .card .card-body{padding: 0;} .card {border: 1px solid #EFF0F6;border-radius: 22px;} /*Card Button CSS*/ .student-set-up .academic-focus .card-radio-group .card-radio-btn .content_head {color: var(--primary-colors);line-height: 20px;font-weight: 500;} .student-set-up .card-radio-group .card-input-element + .card.card-body {background: #FFFFFF;border: 2px solid #EFF0F7;box-shadow: 0px 2px 6px rgba(19, 18, 66, 0.07);border-radius: 16px; padding: 20px 15px;} .student-set-up .card-radio-group .card-input-element + .card {cursor: pointer;} .student-set-up .card-radio-group .card-input-element:checked + .card {border: 2px solid var(--green-color);-webkit-transition: border 0.3s;-o-transition: border 0.3s;transition: border 0.3s;} .student-set-up .academic-focus .card-radio-group{display: grid; grid-template-columns: 1fr 1fr; gap: 30px;} .student-set-up .card-radio-group .card-body{ display: flex;justify-content: flex-start;align-items: center;flex-direction: row;gap: 20px;} .student-set-up .academic-focus .card-radio-group .card-body img{display: block; height: 30px; width: auto;} .student-set-up .academic-focus .card-radio-group .card-body span{width: 66px; height: 66px; border-radius: 50%; display: flex; justify-content: center; align-items: center; background: rgba(12, 57, 88, 0.15);} .student-set-up .card-radio-group label{margin: 0;} @-webkit-keyframes fadeInCheckbox { from {opacity: 0;-webkit-transform: rotateZ(-20deg);} to {opacity: 1;-webkit-transform: rotateZ(0deg);} } @keyframes fadeInCheckbox { from {opacity: 0;transform: rotateZ(-20deg);} to {opacity: 1;transform: rotateZ(0deg);} } .search{position: relative;} .search .form-control{padding-right: 70px;} .search .btn{position: absolute;bottom: 10px;right: 20px;} /* educational-institution */ .educational-institution .card-radio-group .card-input-element + .card{display: block; text-align: center;} .educational-institution .card-radio-group span img{width: 60px; height: 60px; border-radius: 50%; object-fit: contain; margin: 0 auto; margin-bottom: 10px;} .educational-institution .slick-initialized .slick-slide{display: flex;flex-direction: column;row-gap: 18px;margin: 0 9px 0 7px; } .slick-slider .slick-track, .slick-slider .slick-list{width: 100% !important;} .educational-institution .card-radio-group .card-input-element + .card.card-body{padding: 20px 30px;} .educational-institution button.slick-next.slick-arrow, .educational-institution button.slick-prev.slick-arrow {background-color: var(--primary-colors);font-size: 0;width: 48px;height: 48px;border: solid 1px var(--primary-colors);border-radius: 12px;} .educational-institution button.slick-next.slick-arrow{background-image: url("../img/left-arrow.svg"); background-size: 16px; background-repeat: no-repeat; background-position: center; position: absolute; top: -75px; right: 0;} .educational-institution button.slick-prev.slick-arrow{background-image: url("../img/right-arrow.svg"); background-size: 16px; background-repeat: no-repeat; background-position: center; position: absolute; top: -75px; right: 55px;} .educational-institution .all-institution .card-radio-group .card-input-element + .card{display: flex;flex-direction: column;justify-content: center;gap: 0;} /* department-units */ .department-units{margin-top: 30px; } .department-units .card-radio-group label{margin-bottom: 10px;} .department-units .form-group.search{margin-bottom: 20px !important; margin-right: 0;} .department-units .card-radio-group .content_head{margin: 0;} .department-units .card-radio-group .card-input-element + .card{text-align: start;} .department-units .card-radio-group .content_head{padding-left: 40px; font-size: 18px; font-weight: 500;} .department-units .card-radio-group .card-input-element + .card.card-body:after{content: ''; position: absolute; width: 24px; height: 24px; border: solid 1px #D9DBE9; border-radius: 50%; top: 0; bottom: 0; margin: auto; box-shadow: inset 0px -3px 7px rgba(20, 20, 43, 0.08);} .department-units .card-radio-group .card-input-element:checked + .card:after{ border: solid 3px var(--green-color);background-image: url(../img/green-check.svg);background-size: cover;background-repeat: no-repeat;} .department-units .back-arrow img{filter: brightness(0); height: 22px; margin-top: 8px;} .department-units .step-title{display: flex; gap: 15px; align-items: flex-start;} .academic-year{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 20px;} .department-units .academic-year.card-radio-group label{margin: 0;} .subject-preferences .card-radio-group .card-input-element + .card.card-body:after{border-radius: 0;} /* form-submitted */ .form-submitted {text-align: center;} .form-submitted img{margin-bottom: 18px; height: 120px;} .form-submitted h2{font-size: 24px; font-weight: bold; margin-bottom: 8px;} .form-submitted p{font-size: 18px; line-height: 30px; color: rgba(7, 41, 64, 80%); max-width: 410px; margin: 0 auto;} .student-app{display: flex; gap: 05px; align-items: flex-start; padding-bottom: 20px;} .header-wrapper{width: 100%;} /* sidebar */ .sidebar{flex: 0 0 280px; padding:15px 12px; transition: var(--transition); position: sticky;z-index: 1;top: 0px; height: calc(100vh - 60px); } .logo-section img{width: 100%;} .logo-section{ display: flex;gap: 20px;justify-content: space-between;align-items: center; position: sticky; top: 0; background: #f7f8f9; margin-bottom: 15px;} .logo-section .menu{width: 40px; height: 40px; background: #fff; display: flex; justify-content: center; align-items: center; flex-direction: column; border-radius: 8px; flex: 0 0 30px; gap: 8px;} .logo-section .menu span{background: var(--primary-colors); width: 10px; height: 2px; border-radius: 8px; display: block; transform: rotate(45deg) translateY(7px) translateX(5px);} .logo-section .menu span:last-of-type{margin: 0; transform: rotate(-45deg) translateY(-7px) translateX(5px)} .sidebar .sidebar-nav{margin-top: 10px;} .sidebar .sidebar-nav .nav-item a{font-weight: 400;font-size: 18px;line-height: 20px;color: rgba(12, 57, 88, 0.65); display: flex; gap: 12px; align-items: center; padding: 10px 15px; background: transparent; border-radius: 8px; margin-bottom: 2px; white-space: nowrap; text-transform: capitalize;} .sidebar .sidebar-nav .nav-item.submenu.open .custom-toggle, .sidebar .sidebar-nav .nav-item a:hover, .sidebar .sidebar-nav .nav-item a.active {background: #C5E0F3; color: rgba(12, 57, 88, 1); font-weight: 500;} .sidebar .sidebar-nav .nav-item.submenu.open .custom-toggle img, .sidebar .sidebar-nav .nav-item a:hover img, .sidebar .sidebar-nav .nav-item a.active img{opacity: 1; filter: brightness(-100);} .sidebar .sidebar-nav .nav-item a img{width: 26px; height: 26px;} .sidebar .sidebar-nav .nav-item{width: 100%; position: relative;} /* header */ header{display: flex;justify-content: space-between;padding: 12px 10px;position: sticky;z-index: 99;top: 0;background: #f7f8f9; gap: 15px;} header .form-group.search{margin: 0;} header .form-group.search .form-control{border-radius: 50px; padding: 8px 16px 8px 26px; width: 400px; padding-right: 45px;} header .form-group.search .btn {position: absolute;inset: 0;left: auto;right: 5px;} header .form-group.search a img{height: 16px;} .header-right{ display: flex;gap: 16px;align-items: center;justify-content: flex-end;} .header-right ul{display: flex; gap: 16px;} .header-right ul li{background: #fff; display: flex; justify-content: center; align-items: center; border-radius: 50%; width: 40px; height: 40px; text-align: center; } .header-right ul li a{width: 100%; } .header-right ul li a.disabled{opacity: .4;cursor: no-drop; position: relative;} .main-content{padding-right: 15px;} .student-app .card{padding: 20px; border-radius: 18px;} .student-app .common-btn{font-size: 16px;padding: 8px 20px;font-weight: 700;letter-spacing: 0.4px;} .student-app .common-btn span{ font-size: 20px;margin-right: 8px;font-weight: 400; line-height: normal;} .student-app label{font-size: 18px; color: rgba(12, 57, 88, .5); margin-bottom: 10px; line-height: normal;} /* breadcrumb */ .breadcrumb{background: #F6FAFE;border-radius: 8px; padding: 8px 10px; margin-bottom: 30px;} .breadcrumb .breadcrumb-item a, .breadcrumb .breadcrumb-item{font-size: 16px; color: #71787D; letter-spacing: 0.3px;} .breadcrumb .breadcrumb-item.active{color: var(--primary-colors); font-weight: 500;} .profile-img-section{display: flex; gap: 30px; align-items: center; margin-bottom: 30px; flex-wrap: wrap;} .profile-img-section .common-btn{white-space: nowrap;} .profile-img-section p{margin: 15px 0 0; font-size: 14px; color: rgba(12, 57, 88, .5);} .profile-img-section .change-image{display: flex; gap: 20px; align-items: center; flex-wrap: wrap;} .profile-img-section .profile-pic img{width: 120px; height: 120px; border-radius: 50%; object-fit: cover;} .academic-focus-radio .radio-group{display: flex; gap: 30px; align-items: center;} .academic-focus-radio .radio-group label{font-size: 16px; color: var(--primary-colors); font-weight: 500; margin: 0; margin-left: 12px;} .form-check-input[type=checkbox], .form-check-input[type=radio]{margin-top: 2px;transform: scale(1.4); margin-left: -18px;} .form-check{margin: 0;} .update-cancel-btn{display: flex; gap: 20px; align-items: center;} .form-check-input:checked{background-color: var(--primary-colors); border-color: var(--primary-colors);} #profiledropdownMenu img{width: 40px; height: 40px; border-radius: 50%;} #profiledropdownMenu{padding: 0;} #profiledropdownMenu:focus{box-shadow: none; outline: none;} /* small-sidemenu */ .small-sidemenu .sidebar .sidebar-nav .nav-item a{font-size: 0; transform: none;} .small-sidemenu .sidebar .sidebar-menu-structure h5{font-size: 0; transform: none; margin: 0;} .small-sidemenu .sidebar .sidebar-menu-structure{margin: 0;} .small-sidemenu .sidebar .logo-section img{display: none; } .small-sidemenu .sidebar {flex: 0 0 76px;} .small-sidemenu .sidebar .logo-section{gap: 0; justify-content: center;} .small-sidemenu .sidebar .logo-section .menu span{transform:none;} /* new_prompt */ .new-prompt{display: flex; gap: 30px; align-items: stretch;} .new-prompt .chat-history{flex: 0 0 344px; border-right: solid 1px rgba(000, 000, 000, .10); padding-right: 20px;} .new-prompt .chat-history .title{display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 20px;} .new-prompt .chat-history .title h2{font-size: 20px; font-weight: 500; margin: 0; cursor: pointer;} .new-prompt .chat-history .sort-icon, .new-prompt .chat-history .sidebar-icon{background: #EFEFEF; width: 32px; height: 32px; display: flex; justify-content: center; align-items: center; border-radius: 8px;} .new-prompt .chat-history .sort-icon{width: 38px; height: 38px;} .new-prompt .chat-history .search-bar{display: flex; justify-content: space-between; gap: 12px;} .new-prompt .chat-history .search-bar .form-control{padding: 6px 15px; padding-left: 35px;} .new-prompt .chat-history .search-bar .icon img { bottom: 0;right: auto;left: 15px;filter: saturate(0) brightness(0.6);height: 14px;top: 0;margin: auto;} .new-prompt .history-list .saved-chat{display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 8px;} .new-prompt .history-list .title-time{display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; width: 100%;} .new-prompt .history-list .title-time h5{margin: 0; font-size: 14px; font-weight: bold;} .new-prompt .history-list .title-time span{font-size: 12px; color: rgba(95, 95, 95, 0.6); white-space: nowrap;} .new-prompt .history-list li p{font-weight: 400;font-size: 13px;line-height: 18px;color: #6D717C; padding-left: 22px; margin: 0;} .new-prompt .history-list li{margin-bottom: 2px;background: transparent;border-radius: 8px;transition: var(--transition);padding: 10px; cursor: pointer;} .new-prompt .history-list li.active, .new-prompt .history-list li:hover{background: rgba(250, 187, 24, 0.2); transition: var(--transition);} .new-prompt .history-list .saved-chat .profile-pic img{width: 16px; height: 16px; border-radius: 50%; object-fit: cover; border: 1px solid #FABB18;} .new-prompt .dropdown.sort-menu .dropdown-item{font-size: 14px;padding: 2px 10px; } .new-prompt .chat-area{ width: 100%;display: flex;flex-direction: column;justify-content: space-between;height: 100%; gap: 100px;} /* .new-prompt .chat-area .welcome-word{ text-align: center;max-width: 640px;margin: 0 auto; height: 100%;} */ .new-prompt .welcome-word h2{font-size: 30px;letter-spacing: 0.01em;color: var(--primary-colors); margin-bottom: 30px; font-weight: 400;} .new-prompt .welcome-word h2 span{font-weight: 600;} .new-prompt .welcome-word h2 span span{color: var(--secondary-colors); text-transform: capitalize;} .new-prompt .welcome-word h3{font-size: 22px; font-weight: 600;} .new-prompt .welcome-word p{font-size: 18px; line-height: normal; margin-bottom: 0;} .new-prompt .welcome-word .topic-que{gap: 30px; display: flex; text-align: left;} .new-prompt .welcome-word .topic-que a:hover, .new-prompt .welcome-word .topic-que a:hover p{color: var(--primary-colors); transition: var(--transition);} .new-prompt .welcome-word .topic-que a:hover {background-color: var(--primary-colors); transition: var(--transition);} .new-prompt .welcome-word .topic-que a:hover *{color: #fff !important; transition: var(--transition);} .new-prompt .welcome-word .topic-que a:hover img, .new-prompt .welcome-word .topic-que a:hover img{transition: var(--transition);} .new-prompt .welcome-word .chat-area .welcome-word p{margin: 0;} .new-prompt .welcome-word{ text-align: center;margin: 0 auto;align-items: center;display: flex;flex-direction: column;justify-content: center; } .new-prompt .welcome-word img{ width: 220px;display: block;margin: 0 auto;margin-bottom: 30px;} .new-prompt .welcome-word .question, .new-prompt .welcome-word .topic{background: #eaf1f5; padding: 20px; border-radius: 20px; display: flex ;align-items: center;gap: 20px;} .new-prompt .welcome-word .common-btn{ margin-top: 20px;} .new-prompt .welcome-word .question img, .new-prompt .welcome-word .topic img{ flex: 0 0 80px;height: 80px;margin: 0;width: 100%;} .new-prompt .welcome-word .topic-que a p{max-width: 275px; margin: 0;} .main-content.ask-anything .card{justify-content: flex-end; min-height: calc(100vh - 150px);} .new-prompt #chat-messages.chat-messages-full-screen{display: block; height: calc(100vh - 325px); padding-right: 10px; padding-top: 10px;} .new-prompt #chat-messages::-webkit-scrollbar {width: 4px;} .new-prompt #chat-messages::-webkit-scrollbar-track {background: #EBEBEB;} .new-prompt #chat-messages::-webkit-scrollbar-thumb {background-color: rgba(250, 187, 24, 50%);} .new-prompt .chat-area .message-type{ position: sticky;z-index: 10;background: #fff;padding: 0;bottom: 0; margin: 0;} .new-prompt .chat-area .message-type .form-control{padding-left: 78px; padding-right: 60px; box-shadow: 0px 19px 29px rgba(12, 57, 88, 0.05);} .new-prompt .chat-area .message-type .send{border: none;background: transparent;position: absolute;right: 22px;top: 0;bottom: 0;margin: auto; padding: 0;} .new-prompt .chat-area .message-type ul{ display: flex; gap: 14px;justify-content: center;position: absolute;left: 20px;top: 0;bottom: 0;margin: 0 auto;align-items: center;} .new-prompt .history-list { height: calc(100vh - 365px);overflow: auto;padding-right: 10px;right: -10px;position: relative;margin-left: -10px;} .new-prompt .chat-area .message-type ul li img{height: 18px} .new-prompt .chat-area .message-type ul li{cursor: pointer;} /* .history-close .new-prompt .chat-history *{transition: var(--transition);} */ .history-close .new-prompt .chat-history .search-bar, .history-close .new-prompt .chat-history .history-list, .history-close .new-prompt .chat-history .title h2{display: none; } .history-close .new-prompt .chat-history {flex: 0 0 45px;padding-right: 0;min-height: calc(100vh - 250px); overflow: auto;} input[type="date"]{text-transform: uppercase;} input[type="date"]::-webkit-calendar-picker-indicator {opacity: 0.6;} /* subscription-plan */ .subscription-card{padding-left: 30px; margin-left: 20px; border-left: solid 2px rgba(12, 57, 88, .5); height: 100%;} .subscription-plan{background: var(--primary-colors);box-shadow: 0px 22px 24px rgba(12, 57, 88, .1);border-radius: 20px;margin-bottom: 30px;width: 100%;padding: 18px;position: relative;} .subscription-plan *{color: #fff;} .subscription-plan .title{display: flex;justify-content: space-between;align-items: flex-start;border-bottom: solid 1px #ffffff45;padding-bottom: 10px;margin-top: 5px;gap: 15px;} .subscription-plan .title h2{font-size: 24px;font-weight: bold;margin: 5px 0 0;} .subscription-plan .title h2 sup{font-size: 15px; top: -1.2em;} .subscription-plan .title p{font-size: 13px;margin-bottom: 0;text-transform: capitalize;font-weight: 500;} .subscription-plan .title p span {color: rgba(255, 255, 255, 70%);} .subscription-plan .common-btn{border-radius: 50px;margin-top: 20px; font-size: 14px; font-weight: bold; background: var(--secondary-colors);padding: 6px 16px;margin: 0; color: var(--primary-colors);} .subscription-plan .common-btn:hover{opacity: .6;} .subscription-plan .active-btn .common-btn.active{opacity: 1; cursor: auto;} .subscription-card h3{ margin-bottom: 12px;font-size: 18px;font-weight: 400;} .subscription-plan .active-btn .common-btn.active{ color: var(--primary-colors);position: absolute;top: -16px;left: 20px; background-color: #23ce70; border: solid 2px #ffffff;} .subscription-plan{margin-top: 30px;} .subscription-plan .start-end-date{margin-top: 5px;display: flex;justify-content: end;gap: 10px;color: rgba(000, 000, 000, .2);font-weight: 500;} .subscription-plan .start-end-date li{font-size: 13px; color: #fff;} .subscription-plan .start-end-date li span{color: rgba(255, 255, 255, 70%);} .subscription-plan .selected-subject{margin-top: 10px;} .subscription-plan .selected-subject h6{margin-bottom: 10px; font-size: 14px; letter-spacing: .3px; color: rgba(255, 255, 255, 70%);} .subscription-plan .selected-subject ul{ display: flex; flex-wrap: wrap; gap: 8px;} .subscription-plan .selected-subject ul li{ font-size: 16px;letter-spacing: 1px;border: solid 1px #73838d;padding: 4px 15px; border-radius: 50px;} .subscription-plan .selected-subject ul li img{height: 20px; filter: brightness(100);} .subscription-plan .selected-subject ul li:nth-last-child{margin: 0;} .student-set-up .all-institution{display: flex;gap: 2.5%;flex-wrap: wrap;row-gap: 22px; margin-bottom: 30px;} .student-set-up .card-radio-group label, .student-set-up .educational-institution .card-radio-group .card-input-element + .card{height: 100%;} .student-set-up .card-radio-group {flex: 0 0 23.1%;} .custom-submenu {overflow: hidden;height: 0;transition: height 0.3s ease;} .toggle-icon {transition: transform 0.3s ease;} .toggle-icon.rotate {transform: rotate(180deg);} .sidebar .sidebar-nav .nav-item.submenu{position: relative;} .sidebar .sidebar-nav .nav-item.submenu .down-arrow{filter: saturate(0) brightness(0);height: 8px;width: 100%;text-align: right;object-fit: contain;object-position: right;} .sidebar .sidebar-nav .nav-item .custom-submenu{padding-left: 29px;} .sidebar .sidebar-nav .nav-item .custom-submenu .nav-item a{ padding: 0 15px 5px 15px; margin: 0 0 0 12px;} .sidebar .sidebar-nav .nav-item .custom-submenu .nav-item{position: relative;} .sidebar .sidebar-nav .nav-item .custom-submenu .nav-item::after{content: ''; position: absolute; height: 100%; width: 2px; background: var(--secondary-colors); top: 0; left: 0;} .sidebar .sidebar-nav .nav-item.submenu.open .down-arrow{transform: scaleY(-1);} .sidebar .sidebar-nav .nav-item.submenu.open{background: #C5E0F3; color: rgba(12, 57, 88, 1); border-radius: 12px; padding-bottom: 15px; margin-bottom: 4px;} .small-sidemenu .sidebar .sidebar-nav .nav-item.submenu.open .custom-submenu a{font-size: 14px;} .small-sidemenu .sidebar .sidebar-nav .nav-item.submenu.open .custom-submenu{position: absolute;background: #c5e0f3;padding: 10px 20px;border-radius: 12px; min-width: 150px; z-index: 1;} .small-sidemenu .sidebar .sidebar-nav .nav-item.submenu.open .custom-submenu .nav-item::after{display: none;} .small-sidemenu .sidebar .sidebar-nav .nav-item.submenu.open .custom-submenu .nav-item a{ padding: 0 0 5px; margin: 0;} .small-sidemenu .sidebar .sidebar-nav .nav-item.submenu .down-arrow{display: none;} .small-sidemenu .sidebar .sidebar-nav .nav-item .custom-submenu .nav-item a{margin: 0; padding: 0;} .small-sidemenu .student-app{gap: 0;} .student-set-up .card .contact-details .option{color: rgba(12, 57, 88, .5);} .coming-soon{background: #fabb18;color: #0c3958;padding: 4px 8px;font-size: 12px;position: absolute;top: -12px;right: 10px;border-radius: 50px;border: solid 4px #fff;letter-spacing: .8px;font-weight: 500;z-index: 1;line-height: 12px;} .disabled-card .card{opacity: 0.4;} .card-radio-btn.disabled-card input[disabled] + .card {cursor: no-drop !important;} .form-control[disabled], .common-btn[disabled]{cursor: no-drop;} #editDetails .radio-group {display: grid;gap: 10px;row-gap: 5px;grid-template-columns: 1fr 1fr 1fr;} #editDetails .radio-group label{margin-left: 6px;} #editDetails .radio-group .form-check label{color: var(--primary-colors);} #editDetails .modal-dialog{max-width:850px} .header-right .subscriptions-type{ background: var(--secondary-colors);color: var(--primary-colors);padding: 12px 20px;border-radius: 10px;font-size: 15px;margin: 0;display: flex;gap: 6px;align-items: center;letter-spacing: .3px;} .header-right .subscriptions-type img{height: 16px;} .sidebar .sidebar-nav .nav-item .coming-soon-board img{opacity: 1;height: 18px;position: absolute;top: 0;bottom: 0;margin: auto;right: 18px;width: auto;} .sidebar .sidebar-nav .nav-item.c-soon a{ cursor: url("../img/coming-soon-label.svg") 50 50, move; opacity: .6;} .sidebar .sidebar-nav .nav-item.c-soon:hover a{background: transparent; font-weight: 400; color: rgba(12, 57, 88, 0.65);} .sidebar .sidebar-nav .nav-item.c-soon:hover a img{opacity: .6;} .sidebar .sidebar-nav .nav-item.c-soon.submenu .down-arrow{opacity: .4;} .form-submitted .loading-content {text-align: center;height: 2em;max-width: 100%; margin: 50px 0;} .form-submitted .loading-dots {margin-left: -1.5em;opacity: 0;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);-webkit-animation: loading-dots-fadein .5s linear forwards;-moz-animation: loading-dots-fadein .5s linear forwards;-o-animation: loading-dots-fadein .5s linear forwards;-ms-animation: loading-dots-fadein .5s linear forwards;animation: loading-dots-fadein .5s linear forwards;} .form-submitted .loading-dots i {width: 1em;height: 1em;display: inline-block;vertical-align: middle;background: #e0e0e0;-webkit-border-radius: 50%;border-radius: 50%;margin: 0 .125em;-webkit-animation: loading-dots-middle-dots .5s linear infinite;-moz-animation: loading-dots-middle-dots .5s linear infinite;-o-animation: loading-dots-middle-dots .5s linear infinite;-ms-animation: loading-dots-middle-dots .5s linear infinite;animation: loading-dots-middle-dots .5s linear infinite;} .form-submitted .loading-dots.dark-gray i {background: var(--secondary-colors);} .form-submitted .loading-dots i:first-child {-webkit-animation: loading-dots-first-dot .5s infinite;-moz-animation: loading-dots-first-dot .5s linear infinite;-o-animation: loading-dots-first-dot .5s linear infinite;-ms-animation: loading-dots-first-dot .5s linear infinite;animation: loading-dots-first-dot .5s linear infinite;opacity: 0;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);-webkit-transform: translate(-1em);-moz-transform: translate(-1em);-o-transform: translate(-1em);-ms-transform: translate(-1em);transform: translate(-1em);} .form-submitted .loading-dots i:last-child {-webkit-animation: loading-dots-last-dot .5s linear infinite;-moz-animation: loading-dots-last-dot .5s linear infinite;-o-animation: loading-dots-last-dot .5s linear infinite;-ms-animation: loading-dots-last-dot .5s linear infinite;animation: loading-dots-last-dot .5s linear infinite;} @-moz-keyframes loading-dots-fadein{100%{opacity:1;-ms-filter:none;filter:none}} @-webkit-keyframes loading-dots-fadein{100%{opacity:1;-ms-filter:none;filter:none}} @-o-keyframes loading-dots-fadein{100%{opacity:1;-ms-filter:none;filter:none}} @keyframes loading-dots-fadein{100%{opacity:1;-ms-filter:none;filter:none}} @-moz-keyframes loading-dots-first-dot{100%{-webkit-transform:translate(1em);-moz-transform:translate(1em);-o-transform:translate(1em);-ms-transform:translate(1em);transform:translate(1em);opacity:1;-ms-filter:none;filter:none}} @-webkit-keyframes loading-dots-first-dot{100%{-webkit-transform:translate(1em);-moz-transform:translate(1em);-o-transform:translate(1em);-ms-transform:translate(1em);transform:translate(1em);opacity:1;-ms-filter:none;filter:none}} @-o-keyframes loading-dots-first-dot{100%{-webkit-transform:translate(1em);-moz-transform:translate(1em);-o-transform:translate(1em);-ms-transform:translate(1em);transform:translate(1em);opacity:1;-ms-filter:none;filter:none}} @keyframes loading-dots-first-dot{100%{-webkit-transform:translate(1em);-moz-transform:translate(1em);-o-transform:translate(1em);-ms-transform:translate(1em);transform:translate(1em);opacity:1;-ms-filter:none;filter:none}} @-moz-keyframes loading-dots-middle-dots{100%{-webkit-transform:translate(1em);-moz-transform:translate(1em);-o-transform:translate(1em);-ms-transform:translate(1em);transform:translate(1em)}} @-webkit-keyframes loading-dots-middle-dots{100%{-webkit-transform:translate(1em);-moz-transform:translate(1em);-o-transform:translate(1em);-ms-transform:translate(1em);transform:translate(1em)}} @-o-keyframes loading-dots-middle-dots{100%{-webkit-transform:translate(1em);-moz-transform:translate(1em);-o-transform:translate(1em);-ms-transform:translate(1em);transform:translate(1em)}} @keyframes loading-dots-middle-dots{100%{-webkit-transform:translate(1em);-moz-transform:translate(1em);-o-transform:translate(1em);-ms-transform:translate(1em);transform:translate(1em)}} @-moz-keyframes loading-dots-last-dot{100%{-webkit-transform:translate(2em);-moz-transform:translate(2em);-o-transform:translate(2em);-ms-transform:translate(2em);transform:translate(2em);opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)}} @-webkit-keyframes loading-dots-last-dot{100%{-webkit-transform:translate(2em);-moz-transform:translate(2em);-o-transform:translate(2em);-ms-transform:translate(2em);transform:translate(2em);opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)}} @-o-keyframes loading-dots-last-dot{100%{-webkit-transform:translate(2em);-moz-transform:translate(2em);-o-transform:translate(2em);-ms-transform:translate(2em);transform:translate(2em);opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)}} @keyframes loading-dots-last-dot{100%{-webkit-transform:translate(2em);-moz-transform:translate(2em);-o-transform:translate(2em);-ms-transform:translate(2em);transform:translate(2em);opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0)}} .new-prompt .message-type .disable{opacity: .5;} .new-prompt .message-type .disable *{cursor: no-drop;} .new-prompt .avatar-circle.ai{width: 32px;height: 32px;background: var(--secondary-colors);border-radius: 8px; position: relative; z-index: 1; margin-right: -15px;} .new-prompt .avatar-circle.ai img{ width: 100%;height: 100%;object-fit: cover;padding: 5px;} .new-prompt .avatar-circle {width: 40px;height: 40px;border-radius: 50%;display: flex;align-items: center;justify-content: center;} .new-prompt .message-bubble {padding: 15px 20px;max-width: 100%; background: rgba(197, 224, 243, 0.25); border-radius: 16px; position: relative; left: 0; top: -15px;} .new-prompt .message-bubble.user-message{background: rgba(250, 187, 24, 0.2);} .new-prompt .message-text {font-size: 18px;line-height: 1.5;color: var(--primary-colors); word-break: normal; overflow-wrap: normal;} .new-prompt #chat-messages::-webkit-scrollbar {width: 4px;} .new-prompt #chat-messages::-webkit-scrollbar-track {background: #f8f9fa;} .new-prompt #chat-messages::-webkit-scrollbar-thumb {background-color: #dee2e6;border-radius: 20px;} .new-prompt .chat-container{display: flex; flex-direction: column;} .new-prompt .chat-container .user-date-time{ display: flex;gap: 10px;margin-bottom: 20px;margin-left: 25px;align-items: center; white-space: nowrap;} .new-prompt .chat-container h5{font-size: 14px; color: var(--primary-colors); font-weight: bold; margin: 0;} .new-prompt .chat-container span{font-size: 13px; color: rgba(12, 57, 88, 0.6); } .new-prompt .chat-container .chat-response{white-space: nowrap;} .new-prompt .message-bubble .edit{position: absolute; right: 0; top: 0; padding: 16px; cursor: pointer;} .new-prompt .chat-response{display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 10px;} .new-prompt .chat-response li{display: flex; gap: 5px; align-items: center; background: rgba(12, 57, 88, 0.2);border-radius: 8px; padding: 6px 12px; font-size: 12px; color: var(--primary-colors); transition: var(--transition); cursor: pointer;} .new-prompt .chat-response li:hover{background: var(--primary-colors); color: #fff; transition: var(--transition);} .new-prompt .chat-response li:hover img{filter: brightness(100);} /* Typing indicator animation */ .new-prompt .typing-indicator {display: flex;padding: 6px 0 0 0;} .new-prompt .typing-indicator span {height: 8px;width: 8px;float: left;margin: 0 1px;background-color: #9E9EA1;display: block;border-radius: 50%;opacity: 0.4;} .new-prompt .typing-indicator span:nth-of-type(1) {animation: 1s blink infinite 0.3333s;} .new-prompt .typing-indicator span:nth-of-type(2) {animation: 1s blink infinite 0.6666s;} .new-prompt .typing-indicator span:nth-of-type(3) {animation: 1s blink infinite 0.9999s;} @keyframes blink {50% {opacity: 1;}} .new-prompt #chat-messages {overflow-y: auto; scroll-behavior: smooth; display: none;} .thinking-placeholder{position: sticky; bottom: 0; z-index: 1;} .form-control.student-address{height: 150px;} /*copy to clipboard toast*/ .copy-toast {position: fixed;bottom: 30px;left: 50%;transform: translateX(-50%);background-color: #333;color: #fff;padding: 10px 20px;border-radius: 6px;font-size: 14px;opacity: 0;transition: opacity 0.3s ease-in-out;z-index: 9999;pointer-events: none; display: none;} .copy-toast.visible {opacity: 1; display: block;} /* syllabus */ .new-prompt.syllabus{align-items: stretch;} .new-prompt.syllabus .sidebar-nav{transition: var(--transition);} .new-prompt.syllabus .sidebar-nav ul li a.menu-toggle:after {content: ''; position: absolute; right: 15px; top: 8px; background-image: url("../img/down-arrow.svg"); width: 16px;height: 10px;background-size: contain;background-repeat: no-repeat;} .new-prompt.syllabus .sidebar-nav ul li a.menu-toggle.rotate {transform: scaleY(-1);} .new-prompt.syllabus .sidebar-nav ul.sub-menu {display: none;font-size: 14px;} .new-prompt.syllabus .sidebar-nav ul.sub-menu li { position: relative;background: #e5e5e5;margin-bottom: 3px; border-radius: 12px;} .new-prompt.syllabus .sidebar-nav ul.sub-menu li .sub-menu.active {padding: 10px;} .new-prompt.syllabus .sidebar-nav ul li a.menu-toggle {display: block;position: absolute;right: 0;z-index: 1;padding: 0;height: 30px;width: 100%;top: 10px;} .new-prompt.syllabus .sidebar-nav ul li{position: relative;} .new-prompt.syllabus .sidebar-nav a{font-size: 18px;font-weight: 600;color: var(--primary-colors);padding: 8px 0;padding-right: 30px;display: flex;gap: 8px;align-items: center; transition: var(--transition); letter-spacing: 1px; text-transform: uppercase;} .new-prompt.syllabus .sidebar-nav a:hover{opacity: .6; transition: var(--transition);} .new-prompt.syllabus .chat-area {width: 100%;display: flex;flex-direction: column;justify-content: space-between; position: relative;} .new-prompt.syllabus .sidebar-nav a img{width: 24px; height: auto; transition: var(--transition);} .new-prompt.syllabus .sidebar-nav ul.sub-menu li ul.sub-menu li::after{ height: 2px;top: 0;bottom: 0;margin: auto;width: 10px;left: 0; display: none;} .new-prompt.syllabus .sidebar-nav ul.sub-menu li ul.sub-menu li a{font-size: 16px;font-weight: 500;background: rgba(12, 57, 88, 10%);margin-bottom: 6px;padding: 8px 15px;} .new-prompt.syllabus .sidebar-nav ul.sub-menu li ul.sub-menu li a:hover{background-color: var(--secondary-colors);} .history-close .new-prompt.syllabus .sidebar-nav{display: none; transition: var(--transition);} .new-prompt.syllabus.flashcards .sidebar-nav ul.sub-menu li ul.sub-menu{padding: 15px;} /* history */ .new-prompt.history{height: calc(100vh - 225px); } .new-prompt.history .chat-container {height: calc(100vh - 0px);overflow: auto;} .new-prompt.history .chat-message{padding-top: 10px;} .new-prompt.history .chat-area{justify-content:center} .new-prompt.history .chat-area .welcome-word{max-width: 800px; margin: 0 auto; text-align: center;} /* otp-input-fields */ .login .login-details .otp-input-fields{display: flex;gap: 10px;} .login .login-details .otp-input-fields .form-control{text-align: center;} .login .login-details .otp-input-fields .form-control::-webkit-outer-spin-button, .login .login-details .otp-input-fields .form-control::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;} .login .login-details .otp-input-fields .form-control[type=number] {-moz-appearance: textfield;} .login .login-details .info {font-size: 16px;color: #0c3958;font-weight: 500;text-transform: math-auto;} .login .login-details .enter-otp{ display: flex;gap: 5px; align-items: center; font-size: 15px;} .login .login-details .enter-otp span{ font-weight: 600; color: #ff4b4b; } .login .login-details .phn-num{ display: flex;align-items: center;gap:5px;} .login .login-details .phn-num .input-text{ background: #edf5fd;border-radius: 12px;padding: 12px 15px;border: solid 1px rgba(12, 57, 88, 20%); white-space: nowrap; font-size: 16px; font-weight: 500;} .login .login-details .logo-icon img{height: 60px; display: block;} .login .login-details .logo-icon-partner img{height: 120px; display: block;} .login .login-details .logo-icon {display: inline-block; margin-bottom: 15px;} .login .login-details .logo-icon-partner {display: inline-block; margin-bottom: 15px;} .only-mobile{display: none;} .error{color: #ff4b4b;font-weight: 500;letter-spacing: 0.4px;font-size: 14px;margin: 5px 0;} .login #resend-link{color: #ff4b4b;font-weight: 500;letter-spacing: 0.4px;} /* spinner */ .spinner-area {height: 100%;background:rgba(000, 000, 000, .2); position: fixed; inset: 0; z-index: 99;} .spinner-area .spinner {animation: spinnerRotate 2s linear infinite;z-index: 10;position: absolute;width: 50px;height: 50px;inset: 0;margin: auto;} .spinner-area .spinner .path {fill: none;stroke: var(--primary-colors);stroke-width: 6;stroke-linecap: round;animation: dash 1.5s ease-in-out infinite;} @keyframes spinnerRotate { 100% {transform: rotate(360deg); } } @keyframes dash { 0% { stroke-dasharray: 1, 150;stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 150;stroke-dashoffset: -35; } 100% { stroke-dasharray: 90, 150;stroke-dashoffset: -124; } } #preloader.hidden {display: none;} .login .otp-timer{ display: flex;justify-content: space-between;gap: 10px;} .login .login-details #mobile_number{ color: #0c3958; font-weight: 600;} .login .receiveOTP label{ font-size: 12px;letter-spacing: .3px;color: var(--primary-colors);cursor: pointer;margin-bottom: 0;display: flex;align-items: flex-start;} .login .receiveOTP span{margin-left: 8px;} .login .receiveOTP .checkbox{transform: scale(1.2); vertical-align: sub; margin-top: 4px; accent-color: var(--secondary-colors);} .login .receiveOTP.check span, .login .receiveOTP.check .checkbox{animation: receiveOTP 2s linear infinite; color: #ff4b4b;} @keyframes receiveOTP { 0% { opacity: 0.4; } 100% { opacity: 1; } } #editDetails .radio-group {display: grid;gap: 10px;row-gap: 5px;grid-template-columns: 1fr 1fr 1fr;} #editDetails .radio-group.all-subjects{ display: flex;margin-bottom: 10px; gap: 10px;} #editDetails .radio-group.all-subjects label{margin: 0;} #editDetails .radio-group.all-subjects .form-check label {color: var(--primary-colors);margin: 0 0 0 10px;} /* my-subscriptions */ .all-my-subscriptions{display: grid; grid-template-columns: 1fr 1fr 1fr; padding-bottom: 8px; gap: 15px;flex-wrap: wrap; padding-top: 15px;} .all-my-subscriptions .subscription-plan{margin: 0; box-shadow: none; cursor: pointer;} .all-my-subscriptions::-webkit-scrollbar {width: 4px; height: 2px;} .all-my-subscriptions .subscription-plan .active-btn .common-btn.active{position: relative; top: auto; left: auto;} .all-my-subscriptions .subscription-plan.new-subscription-add{background: rgba(12, 57, 88, 0.1); box-shadow: none;} .all-my-subscriptions .subscription-plan.new-subscription-add img {position: absolute;inset: 0;margin: auto;height: 80px;opacity: .1;} /* footer */ footer{width: 100%; padding: 10px 20px; display: flex; gap: 15px; align-items: center; background: #fff; position: relative; z-index: 1;} footer ul{display: flex;justify-content: flex-end;gap: 10px;} footer ul li{ padding-right: 10px; position: relative;} footer ul li:after{content: ''; position: absolute; height: 12px; width: 1px; background: var(--primary-colors); right: 0; top: 0; bottom: 0; margin: auto;} footer ul li:last-of-type:after{display: none;} footer ul li:last-of-type{padding: 0;} footer .login-footer{display: flex;gap: 10px;justify-content: space-between;width: 100%; font-size: 14px; flex-wrap: wrap; white-space: nowrap;} footer .login-footer a{color: rgba(7, 41, 64, 80%); text-transform: capitalize; font-size: 14px;} /*profile subscription-card */ .subscription-card .subscription-plan .title h2{font-size: 20px;font-weight: 600; margin: 0; display: flex; justify-content: space-between; align-items: center;} .subscription-card .subscription-plan .title h2 img{filter: brightness(100);} .subscription-card .subscription-plan .title h2 a{ background: rgba(255, 255, 255, .2);border-radius: 50%;width: 40px;height: 40px;display: flex;align-items: center;justify-content: center; transition: var(--transition);} .subscription-card .subscription-plan .title h2 a:hover{background: var(--secondary-colors); transition: var(--transition);} .subscription-card .subscription-plan .title h2 a:hover img{ filter: none;} .subscription-card .subscription-plan .title{margin: 0; border: none; padding: 0;} .subscription-card .subscription-plan .title{display: block;} .subscription-card .subscription-plan .title h2 label {background: var(--secondary-colors);padding: 2px 14px;border-radius: 20px;font-size: 14px;position: absolute;top: -12px;border: solid 2px #ffffff;color: var(--primary-colors);} /* document-page */ .document-page {padding: 30px; background: #fff; max-width: 90%;} .document-page h1{margin-bottom: 40px; border-bottom:solid 1px var(--primary-colors); padding-bottom: 20px;} .document-page h6{margin-bottom: 10px; font-size: 20px;} .document-page ul{margin-bottom: 30px;} .document-page ul ul{padding-left: 30px;} .document-page ul li {display: flex; gap: 10px; margin-bottom: 8px;} .document-page ul li p{margin: 0;} .document-page p, .document-page span, .document-page li{font-size: 16px;} .document-page .super-tutor-policy{display: flex; gap: 40px; align-items: flex-start;} .document-page .super-tutor-policy .list { margin-bottom: 30px;flex: 0 0 320px;border-right: solid 1px #ccc;position: sticky;top: 20px;height: 100vh;padding-right: 20px; text-transform: capitalize;} .document-page ul li {display: flex; gap: 10px;} .document-page ul.point {list-style: disc; padding-left: 15px;} /* no-history-container */ .no-history-container{text-align: center; max-width: 250px; margin: 0 auto;} .no-history-container img{margin: 40px 0 30px;height: 40px;opacity: .5;} .no-history-container h5, .no-history-container p{color: rgba(12, 57, 88, 0.8);} .subscription-plan.inactive{ opacity: .8; filter: grayscale(1) brightness(0.6); cursor: auto;} /* login termsOfService */ .login-terms .document-page{max-width: 100%;} .login-terms .modal-body{padding: 0;} .login-terms .modal-header{padding: 0; border: none;} .login-terms .modal-header .btn-close{ position: absolute;right: 20px;top: 20px;z-index: 1;opacity: 1;} .login .common-btn[disabled] {cursor: no-drop;opacity: .2;filter: grayscale(1);} .common-btn[disabled] {cursor: no-drop;opacity: .2;filter: grayscale(1);} .login .document-page .super-tutor-policy { height: calc(100vh - 230px); overflow: auto;} .login .policy-data {padding-right: 10px;} .text-muted, .new-prompt.syllabus .sidebar-nav a.text-muted{ opacity: .4;pointer-events: none;cursor: none;filter: grayscale(1);} .new-prompt .chat-container .follow-up-questions h5{margin-bottom: 15px;} .follow-up-questions{margin-top: 15px;border-top: 1px solid #eaeaea;padding-top: 10px;} .new-prompt .chat-container .follow-up-questions h5{font-size: 14px;color: #555;margin-bottom: 10px;} .follow-up-list{display: flex;flex-direction: column;gap: 8px;} .follow-up-item{background-color: #ffffff;border: 1px solid rgba(12, 57, 88, .4);border-radius: 10px;padding: 8px 14px;font-size: 16px;cursor: pointer;transition: all 0.2s ease;} .follow-up-item:hover{background-color: var(--secondary-colors);border-color: var(--secondary-colors); color: var(--primary-colors);} .see-more{text-align: center;margin-top: 8px;color: var();font-size: 13px;cursor: pointer;font-weight: 500;} .see-more:hover{text-decoration: underline;} .new-prompt .chat-container .see-more span {color: #0e4a6c;font-size: 14px;display: flex;position: absolute;bottom: 16px;z-index: 1;font-weight: 400;letter-spacing: .4px;} .new-prompt .chat-container .follow-up-item span {font-size: 16px;color: rgba(12, 57, 88, 0.6);font-weight: 500;} /* syllabus-tab */ .syllabus-tab{width: 100%;} .syllabus-tab h1{font-size: 20px; font-weight: bold; color: var(--primary-colors); padding-bottom: 20px; border-bottom: solid 1px rgba(000, 000, 000, .10); margin-bottom: 20px; padding-right: 80px;} .syllabus-tab .nav-tabs{margin: 0 0 30px; border: none; display: flex; align-items: center; gap: 10px;} .syllabus-tab .nav-tabs .nav-link{ margin: 0;color: var(--primary-colors);border: 1px solid #EFF0F7;box-shadow: 0px 2px 6px rgba(19, 18, 66, 0.07);border-radius: 50px;align-self: center;justify-content: center;white-space: nowrap;font-size: 16px;display: flex;align-items: center;gap: 10px;font-weight: 600;transition: var(--transition);padding: 12px 30px 12px 20px; cursor: pointer;} /* .syllabus-tab .nav-tabs .nav-link:hover, .syllabus-tab .nav-tabs .nav-link.active{background: var(--secondary-colors); transition: var(--transition);} */ /* .syllabus-tab .nav-tabs .nav-link span{display: none; transition: var(--transition);} .syllabus-tab .nav-tabs .nav-link:hover span, .syllabus-tab .nav-tabs .nav-link.active span{display: block; transition: var(--transition);} */ .syllabus-tab .nav-tabs .nav-link img{ aspect-ratio: 1;transition: var(--transition); object-position: center;object-fit: contain;width: 22px; opacity: .50;} .syllabus-tab .nav-tabs .nav-link:hover img, .syllabus-tab .nav-tabs .nav-link.active img{ opacity: 1; transition: var(--transition);} .syllabus-tab .tab-pane{padding: 0;} .syllabus-tab .tab-pane h5{font-size: 20px; line-height: 22px; color: var(--primary-colors); font-weight: 600; margin-bottom: 10px;} .syllabus-tab .tab-pane .key-ideas li, .syllabus-tab .side-content ul.point li, .syllabus-tab .side-content .box p, .syllabus-tab .side-content .side-box p, .syllabus-tab .tab-pane p{font-size: 18px; line-height: 1.4; color: rgba(12, 57, 88, .80); margin-bottom: 15px;} .syllabus-tab .tab-pane .key-ideas li, .syllabus-tab .side-content ul.point li{margin-bottom: 10px; transition: var(--transition);} .syllabus-tab .side-content ul.point li:last-of-type{margin: 0;} .syllabus-tab .side-content ul.point li:hover{color: var(--primary-colors); transition: var(--transition);} .syllabus-tab .tab-content{ overflow: auto;padding-right: 10px;} .syllabus-tab .side-content .side-box{background: rgba(199, 244, 251, 20%); padding: 15px;} .syllabus-tab .side-content .side-box h4{margin: 0; font-size: 18px; font-weight: 600;} .syllabus-tab #detailed_explanation .side-content .data-box .box{background: rgba(255, 231, 178, 10%);} .syllabus-tab #revision_notes .side-content .data-box .box{background: rgba(201, 219, 255, 10%);} .syllabus-tab #summary .side-content .data-box .box{background: rgba(255, 147, 15, 5%);} /* height: calc(100vh - 360px); */ .syllabus-tab .content{display: flex; gap: 20px; position: relative; align-items: flex-start;} .syllabus-tab .key-ideas{flex: 0 0 280px; border-left: solid 1px rgba(000, 000, 000, .10); padding-left: 20px; position: sticky;top: 1px;z-index: 1;} .syllabus-tab .key-ideas li{margin-bottom: 10px;} .syllabus-tab .slick-track {width: 100% !important;} .font-18 {font-size: 18px} #newSubscription .radio-group {display: grid;gap: 10px;row-gap: 5px;grid-template-columns: 1fr 1fr 1fr;} #newSubscription .radio-group label{margin-left: 6px;} #newSubscription .radio-group .form-check label{color: var(--primary-colors);} #newSubscription .form-group .radio-inline-custom label {border: solid 1px rgba(12, 57, 88, 1);padding: 10px 20px;border-radius: 10px; display: flex; gap: 10px; cursor: pointer; font-weight: 500;} #newSubscription .form-group .radio-inline-custom label:hover{background: rgba(12, 57, 88, 0.1); } #newSubscription .form-group .radio-inline-custom input{accent-color: var(--primary-colors); transform: scale(1.4);} #newSubscription .form-group .radio-inline-custom input:focus{outline: none;} #newSubscription .radio-inline-custom {display: inline-block;margin-right: 10px;} /* syllabus-carousel */ .carouselSlider button.slick-next.slick-arrow, .carouselSlider button.slick-prev.slick-arrow {position: absolute;right: 0;top: 0;z-index: 1;background-color: #fff;border: none;font-size: 0;background-image: url(../img/r-arrow.svg);width: 40px;height: 30px;background-repeat: no-repeat;background-position: center;padding: 0;} .carouselSlider button.slick-prev.slick-arrow {right: 40px; background-image: url(../img/l-arrow.svg); left: auto;} .carouselSlider .slick-next:before, .carouselSlider .slick-prev:before{content: '' !important;} .syllabus-carousel.slick-initialized.slick-slider:focus {outline: none;} .carouselSlider button.slick-next.slick-arrow, .carouselSlider button.slick-prev.slick-arrow{display: none;} .carouselSlider button.slick-next.slick-arrow.syllabus-slider, .carouselSlider button.slick-prev.slick-arrow.syllabus-slider{display: block;} .new-prompt.syllabus .sidebar-nav .sub-menu a {background: transparent;padding-left: 15px;border-radius: 12px; opacity: 1; border-bottom: solid 1px transparent; text-transform: capitalize; letter-spacing: 0.4px;} /* .new-prompt.syllabus .sidebar-nav .sub-menu a:hover{color: var(--secondary-colors) !important;} */ .new-prompt.syllabus .sidebar-nav .sub-menu a.active {background: var(--secondary-colors) !important;} .new-prompt.syllabus .sidebar-nav .sub-menu a.active:hover{color: var(--primary-colors); background: var(--secondary-colors);} .new-prompt .chat-response li img {height: 14px;opacity: 1;filter: brightness(0);aspect-ratio: 1;} .new-prompt .chat-response li:hover span{color: #fff;} .new-prompt .history-list .saved-chat .pin img{width: 20px;height: 20px;border-radius: 50px;} .user-and-ai{flex: 1;} .user-and-ai.order-1 {flex: 0 0 60%;} /* trial-period-ends */ .trial-period-ends {margin: 0 auto;text-align: center;background-color: #e6ffed; border: 1px solid #a3f7b5; padding: 4px 20px; border-radius: 8px; color: #2e7d32; position: relative;display: flex;gap: 20px;align-items: center; justify-content: center;} .trial-period-ends .cancel{position: absolute;right: 20px;top: 0;bottom: 0;margin: auto;cursor: pointer;background: #e6ffed;height: 100%;width: 22px; display: none;} .trial-period-ends strong{font-weight: 600;} .trial-period-ends .common-btn{font-size: 14px;padding: 5px 20px;font-weight: 500;} .all-my-subscriptions .subscription-plan .card-label{background: var(--secondary-colors);padding: 2px 14px;border-radius: 20px;font-size: 14px;position: absolute;top: -12px;border: solid 2px #ffffff;color: var(--primary-colors); font-weight: 600;} /* syllabus-tab */ .syllabus-tab .tab-pane .side-content {margin-bottom: 20px;} .syllabus-tab .new-prompt.ask-anything .chat-area .welcome-word .no-data-ask-question{display: none;} .syllabus-tab .new-prompt #chat-messages.chat-messages-full-screen {height: auto} .syllabus-tab .side-content ul.point{padding-left: 2rem; margin-bottom: 20px;} .syllabus-tab .side-content ul.point ul.point{margin-bottom: 10px; margin-top: 15px;} .syllabus-tab .side-content a{text-align: right; color: var(--secondary-colors); margin-bottom: 20px; display: block;} .syllabus-tab .key-ideas ul{margin-bottom: 30px;} .syllabus-tab .tab-pane h2{font-size: 18px; margin-bottom: 20px;} .syllabus-tab .tab-pane h6{text-transform: capitalize; font-size: 18px} .syllabus-tab .content .summary{flex: 1;} /* tab-content-error */ .tab-content-error span{font-size: 18px;text-align: center;display: block;padding: 10px;margin: 0 auto;line-height: 30px; background-color: #fedfdf; border: 1px solid #f45b5b;color: var(--primary-colors);border-radius: 8px;} .btn-outline-primary{background: var(--primary-colors);} /* upgrade-card */ .upgrade-card {background: #fff;border-radius: 16px;padding: 15px;width: 100%;box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);text-align: center;transition: transform 0.3s ease;width: calc(100% - 30px);margin: 20px auto;} .upgrade-card:hover {transform: translateY(-5px);} .upgrade-card h2 {font-size: 20px;margin-bottom: 5px;font-weight: 600;} .upgrade-card img{ height: 40px; margin-bottom: 5px;} .upgrade-card p{ font-size: 16px;color: var(--primary-colors);margin-bottom: 10px;line-height: 20px;} .upgrade-card .common-btn{ padding: 4px 20px; font-size: 13px; width: 100%; border-radius: 50px;} .student-app .card {min-height: calc(100vh - 130px);} .small-sidemenu .upgrade-card{display: none;} .side-all-menu {display: flex;flex-direction: column;justify-content: space-between; height: calc(100vh - 76px); overflow: auto; padding-bottom: 50px;} .sidebar .sidebar-nav .nav-item a.upgrade-btn{ background: var(--primary-colors);border: solid 1px var(--primary-colors);border-radius: 12px;font-size: 13px;color: #fff;padding: 5px 10px;cursor: pointer;transition: var(--transition);font-weight: 600;text-align: center;display: block;} .side-all-menu .sidebar-menu-structure.hide{display: none;} .congratulations-pop-up .title span{font-size: 50px;} .congratulations-pop-up .title{text-align: center; margin-bottom: 40px; border-bottom: solid 1px rgba(12, 57, 88, 0.1);} .congratulations-pop-up .title h2{ font-size: 32px; font-weight: 700; color: var(--secondary-colors);} .congratulations-pop-up .title p{font-size: 18px; font-weight: 500;} .congratulations-pop-up .common-btn{width: 100%;} .congratulations-pop-up label{color: var(--primary-colors);} .congratulations-pop-up .form-group{margin-bottom: 10px;} .congratulations-pop-up .modal-body {padding: 2.2rem;} .student-set-up .card .content_head {font-size: 22px;} .student-set-up .card .step-title h5.choose-and-stream{margin-top: 30px;} .congratulations-pop-up .title img{width: 120px;margin-bottom: 30px;} .selected-education-type{display: flex;align-items: center;gap: 10px;} .ask-doubt{height: 100%;} .new-prompt{height: 100%;} .tab-content>.tab-pane{height: 100%;} .slick-initialized .slick-slide{outline: none;} .carouselSlider, .slick-slide { width: 100% !important;} .slick-slider{margin-bottom: 0 !important;} /* New top center header */ header .menu-center .submenu {display: none;position: absolute; z-index: 99; top: 55px; left: 0;right: 0; margin: 0 auto;background: white;padding: 30px;width: 958px; border-top: solid 2px var(--secondary-colors); box-shadow: 0px 25px 26px rgba(0, 0, 0, 0.1);} header .menu-center .menu-item:hover .submenu, header .menu-center .menu-item.open .submenu {display: block;} header .menu-center .sidebar .submenu ul {display: grid;grid-template-columns: 1fr 1fr 1fr; gap: 12px;} header .menu-center .sidebar .submenu h5{font-size: 14px; color: var(--primary-colors); font-weight: 500; margin-bottom: 16px;} header .menu-center .sidebar .submenu h4{font-size: 16px; color: var(--primary-colors); font-weight: 500; margin-bottom: 8px;} header .menu-center .sidebar .submenu p{font-size: 14px; line-height: 130%; color: rgba(12, 57, 88, .6); margin: 0;} header .menu-center .sidebar .submenu li{padding: 10px; cursor: pointer; background: transparent; transition: var(--transition);} header .menu-center .sidebar .submenu li a{display: flex; gap: 16px; align-items: start;} header .menu-center .sidebar .submenu li:hover{background: rgba(250, 187, 24, .2); transition: var(--transition);} header .sidebar .sidebar-nav .nav-item.has-submenu .submenu a{white-space: normal; padding: 0;} header .sidebar .sidebar-nav .nav-item.has-submenu .submenu a:after{display: none;} header .menu-center .sidebar .submenu .menu-info{flex: 1;} header .menu-center .m-view{display: none;} header .sidebar .sidebar-nav .nav-item a img{display: none;} header .menu-center .sidebar .submenu li img {width: 20px; height: auto; display: block;} header .sidebar .sidebar-nav .nav-item img {width: 18px;aspect-ratio: 1;} /* ============ feedback-pop-up ============ */ .feedback-pop-up .modal-body{display: flex; gap: 10px;} .feedback-pop-up .left-img{flex: 1; background: var(--secondary-colors); display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 42px;} .feedback-pop-up .left-img h2{font-style: italic;font-weight: 600;font-size: 18px;text-align: center;color: #705511;} .feedback-pop-up .modal-dialog{max-width: 1065px; margin-top: 100px;} .feedback-pop-up .modal-body{padding: 0;} .feedback-pop-up .form{flex: 1; padding: 30px;} .feedback-pop-up .modal-header{position: relative; padding: 0; border: none;} .feedback-pop-up .form .modal-title{font-weight: 600;font-size: 20px;color: var(--primary-colors); margin: 0;} .feedback-pop-up .form .close{top: -20px; right: -20px;opacity: .5; position: relative; display: block; transition: var(--transition);} .feedback-pop-up .form .close:hover{opacity: 1; transition: var(--transition);} .feedback-pop-up .modal-header{display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 20px;} .feedback-pop-up label{color: rgba(12, 57, 88, .5);} .feedback-pop-up .common-btn{width: 100%;} .feedback-pop-up .file-upload{position: relative;} .feedback-pop-up .file-upload span{background: #F7FBFF;font-size: 15px;font-weight: bold;line-height: 20px;display: flex;align-items: center;gap: 10px;position: absolute;inset: 0;border-radius: 12px;text-align: center;justify-content: center;border: dashed 1px var(--primary-colors); text-transform: uppercase; cursor: auto; pointer-events: none;} .feedback-pop-up .file-upload.file-selected span{background: var(--secondary-colors); } .feedback-pop-up .file-upload.file-selected .Upload{display: none;} .feedback-pop-up .file-upload.file-selected .uploaded{display: flex;} .feedback-pop-up .rating {display: flex;width: 100%;justify-content:left;overflow: hidden;flex-direction: row-reverse;position: relative; gap: 10px;} .feedback-pop-up .rating-0 {filter: grayscale(100%);} .feedback-pop-up .rating > input {display: none;} .feedback-pop-up .rating > label {cursor: pointer;width: 30px;height: 30px;margin-top: auto;background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23e3e3e3' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");background-repeat: no-repeat;background-position: center;background-size: 76%;transition: .3s; margin: 0;} .feedback-pop-up .rating > input:checked ~ label, .feedback-pop-up .rating > input:checked ~ label ~ label {background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23fcd93a' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");} .feedback-pop-up .rating > input:not(:checked) ~ label:hover, .feedback-pop-up .rating > input:not(:checked) ~ label:hover ~ label {background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23d8b11e' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");} .feedback-pop-up .form-group{margin-bottom: 15px;} .login .login-footer .feedback{display: none;} header .menu-center .submenu.upgrade ul {grid-template-columns: 1fr 1fr;} header .menu-center .menu-item:hover .submenu.upgrade, header .menu-center .menu-item.open .submenu.upgrade {display: flex;gap: 20px;} .sidebar .sidebar-nav .nav-item .upgrade-card a::after{display: none;} /* quiz */ .top-filter{display: flex; gap: 20px; justify-content: center; margin-bottom: 20px; align-items: flex-end; position: relative; padding-right: 95px;} .top-filter .form-group{margin: 0;} .top-filter .form-control{width: 330px;} .quiz-dashboard{padding: 20px 10px;background: linear-gradient(180deg, #0C3958 67.23%, #2A6389 100%);border-radius: 20px;} /* .quiz-dashboard .middle{display: flex;gap: 18px;align-items: end;flex: 1;justify-content: flex-end;} */ .quiz-dashboard .master ul{display: flex; align-items: center; gap: 5px; margin-bottom: 10px; justify-content: center;} .quiz-dashboard .master ul li img{height: 32px; opacity: 0.2;} .quiz-dashboard .master ul li.active img{opacity: 1; filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));} .quiz-dashboard .left .master p{margin-bottom: 15px;} .quiz-dashboard .left p{font-size: 16px; color: rgba(255, 255, 255, 0.8); margin: 0; text-align: center;} .quiz-dashboard .left {display: flex;flex-direction: column;justify-content: space-between;} .quiz-dashboard .inner-box{display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px;} .quiz-dashboard h1{font-weight: 600;font-size: 20px;color: #FFFFFF; margin-bottom: 15px; text-align: center;} .quiz-dashboard {margin-bottom: 30px;} .top-filter .reset-filter.common-btn{border-radius: 12px;} .chapter-bar .circle-progress {width: 75px;height: 75px;border-radius: 50%;background: conic-gradient(#1abc6e 0deg, rgba(12, 57, 88, 20%) 0deg);display: flex;align-items: center;justify-content: center;position: relative; transition: all 1s linear;} .chapter-bar .circle-progress::before {content: "";position: absolute;width: 56px;height: 56px;background-color: #0b3c57;border-radius: 50%;z-index: 1; transition: all 1s linear;} .chapter-bar .circle-progress span {position: absolute;color: white;font-size: 15px;font-weight: bolder; z-index: 2;} .chapter-bar ul{display: flex; gap: 20px; margin-bottom: 15px; flex-wrap: wrap; align-items: center;} .chapter-bar{margin-bottom: 10px;} .quiz-dashboard .left .chapter-bar ul li p{font-size: 14px; margin-top: 10px; margin-bottom: 0;} .quiz-dashboard .left .chapter-bar p{margin-bottom: 15px;} .quiz-dashboard .get-point{width: 100%;} .quiz-dashboard .get-point li .box{background: var(--primary-colors);border-radius: 16px; padding: 20px 15px; position: relative; transition: var(--transition); top: 0; margin-bottom: 8px; display: flex; justify-content: space-between; gap: 10px;} .quiz-dashboard .get-point li .box img{top: 0; position: relative; transition: var(--transition);} .quiz-dashboard .get-point li .box:hover img{top: -15px; transition: var(--transition);} .quiz-dashboard .get-point li .box.easy{background: linear-gradient(180deg, #23CE70 0%, #0F5C41 100%);} .quiz-dashboard .get-point li .box.medium{background: linear-gradient(180deg, #CE5023 0%, #822B0B 100%);} .quiz-dashboard .get-point li .box.hard{background: linear-gradient(360deg, #980083 0%, #DC0068 100%);} .quiz-dashboard .get-point li .box.easy{background: linear-gradient(180deg, #23CE70 0%, #0F5C41 100%);} .quiz-dashboard .get-point li .box h4{font-size: 20px; font-weight: bolder; color: #fff; text-transform: uppercase; margin: 0;} .quiz-dashboard .get-point li .box .star img{height: 50px; width: auto;} .quiz-dashboard .get-point li .reward, .quiz-dashboard .get-point li .key-reward {display: flex;flex-direction: column;justify-content: space-between; gap: 5px;} .quiz-dashboard .get-point p{color: #fff; text-align: center;} .quiz-dashboard .get-point li .reward p{font-size: 16px; font-weight: bolder; margin-bottom: 10px; color: #fff;} .quiz-dashboard .get-point li .reward label{font-size: 16px; font-weight: bolder; margin-bottom: 10px; color: #fff;font-weight: 800;font-size: 16px;letter-spacing: 0.02em;text-transform: uppercase;} .quiz-dashboard .get-point li .reward p{margin: 0; font-size: 14px; color: rgba(255, 255, 255, 80%); text-transform: capitalize; margin: 0;} .quiz-dashboard .get-point li .reward img{width: auto;height: 34px;display: block;filter: drop-shadow(0px 8px 7.5px rgba(0, 0, 0, 0.55));margin: 0 0 20px auto;} .quiz-dashboard .get-point li .btn{background: var(--secondary-colors);box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.27);text-transform: uppercase; border-radius: 30px; font-size: 18px; color: var(--primary-colors); font-weight: bolder; padding: 8px 35px; transition: var(--transition); line-height: 20px;} .quiz-dashboard .get-point li:hover .btn{animation: cardButton 2s ease-in-out infinite; transition: var(--transition);} .quiz-dashboard .get-point li .btn:hover{box-shadow: none; transition: var(--transition);} .quiz-dashboard .middle .small-robot{margin-bottom: 20px; animation: slideUpDown 6s ease-in-out infinite;} .quiz-dashboard .middle .big-robot{animation: slideDownUp 6s ease-in-out infinite;} .quiz-dashboard .middle .small-robot img, .quiz-dashboard .middle .big-robot img{width: 100%;} .quiz-dashboard .get-point li .key-reward label{font-weight: 600;font-size: 18px;line-height: 20px;letter-spacing: 0.08em;text-transform: uppercase;color: #FFFFFF;} /* small robot img slideUpDown */ @keyframes slideUpDown { 0% { transform: translateY(0); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0); } } /* card button scale */ @keyframes cardButton { 0% { transform: scale(1); } 50% { transform: scale(0.8); } 100% { transform: scale(1); } } /* big robot img slideUpDown */ @keyframes slideDownUp { 0% { transform: translateY(-20px); } 50% { transform: translateY(0); } 100% { transform: translateY(-20px); } } /* custom-table */ .custom-table h2{font-size: 20px;color: var(--primary-colors);font-weight: bold; color: var(--primary-colors); margin: 0; padding-bottom: 15px; border-bottom: solid 1px rgba(0, 0, 0, 0.2); margin-bottom: 20px;} .custom-table table{width: 100%;} .custom-table table th{font-weight: 500;font-size: 18px;color: var(--primary-colors); padding: 12px; white-space: nowrap;} .custom-table table td{font-weight: 500;font-size: 18px;color: var(--primary-colors)} .custom-table table thead {position: sticky;width: 100%;top: 0;background: #fff;} .custom-table table tbody tr{border-bottom: solid 5px #fff;} .custom-table table tbody tr td{padding: 12px; margin-bottom: 5px;} .custom-table table tbody tr{ background: #F7F9FA; transition: var(--transition);} .custom-table table tbody tr.hover:hover{background: var(--secondary-colors); transition: var(--transition);} .custom-table table td{text-transform: capitalize;} .custom-table.summary table td{text-transform: none;} .custom-table table tbody tr td.diamond img{ width: auto;height: 14px;display: inline-block;margin-right: 5px;vertical-align: baseline;} .custom-table table td .sort img{width: 10px; height: auto;} .custom-table .table-scroll.test-summary {height: 260px;overflow-y: auto; cursor: pointer} .custom-table .play{background: var(--secondary-colors);text-transform: uppercase; border-radius: 30px; font-size: 15px; color: var(--primary-colors); font-weight: bolder; padding: 6px 26px; transition: var(--transition); border: solid 1px var(--secondary-colors); line-height: 18px; text-align: center;} .custom-table .play:hover{background: transparent; transition: var(--transition); opacity: .8;} .custom-table .process{color: #fff; padding: 6px 16px; font-size: 14px; font-weight: bolder; border-radius: 50px; line-height: 20px; background: #333;} .custom-table .easy{background: #23CE70;} .custom-table .hard{background: #CE5023;} .custom-table .expert{background: #DC0068;} .custom-table td.correct img{margin-right: 10px; width: 20px;} /* title-box */ .title-box{padding-bottom: 15px; margin-bottom: 20px; border-bottom:solid 1px rgba(0, 0, 0, 0.2); display: flex; gap: 20px; align-items: center;} .title-box a{position: relative; transition: var(--transition); } .title-box a img{width: 18px; height: auto; position: relative; left: 0; transition: var(--transition); } .title-box a:hover img{transition: var(--transition); left: -4px;} .title-box h2{font-size: 20px; color: var(--primary-colors); margin: 0; font-weight: bold;} .full-subject{background: var(--primary-colors); border-radius: 16px; margin-bottom: 30px; padding: 10px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px;} .full-subject h2{font-size: 24px; font-weight: bold; color: #fff; margin-bottom: 5px;} .full-subject .left{padding-left: 20px;} .full-subject p{margin: 0; color: rgba(255, 255, 255, .6); font-size: 14px; text-transform: capitalize;} .full-subject ul {display: flex; gap: 10px;} .full-subject ul .btn{border-radius: 16px; color: #fff; font-weight: bold; font-size: 20px; padding:12px 20px; transition: var(--transition); cursor: pointer; position: relative; top: 0;} .full-subject ul .btn:hover{transition: var(--transition); top: -5px;} .full-subject ul .btn span{display: block; font-size: 14px; font-weight: 500;} .full-subject ul .btn.easy{background: linear-gradient(180deg, #23CE70 0%, #0F5C41 100%);box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);} .full-subject ul .btn.hard{background: linear-gradient(180deg, #CE5023 0%, #822B0B 100%);box-shadow: inset 0px 4px 4px #BD481D;} .full-subject ul .btn.export{background: linear-gradient(360deg, #980083 0%, #DC0068 100%);box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);} /* level line-progress-bar */ .progress-container {width: 100%;background-color: var(--primary-colors);height: 12px;overflow: hidden;} .chapters-completed, .progress-bar, .question-count {height: 100%;background-color:var(--secondary-colors); width: 0;transition: width 0.4s ease;} .test-details{background: rgba(12, 57, 88, 4%); padding-left: 30px; margin-bottom: 20px;} .test-details .left p{font-weight: 500;font-size: 14px;line-height: 20px;color: var(--primary-colors); margin-bottom: 5px;} .test-details .left h3{font-weight: 600;font-size: 20px;text-transform: capitalize;color: var(--primary-colors); margin: 0;} .test-details{display: flex; justify-content: space-between; align-items: center; position: relative; gap: 20px;} .test-details .progress-container{position: absolute; bottom: 0; width: 100%; left: 0; right: 0;} .test-details .right{display: flex; align-items: center; gap: 15px;} .test-details .right .level {font-weight: bolder;font-size: 18px;letter-spacing: 0.01em;text-transform: capitalize;color: #fff; padding: 8px 20px; border-radius: 8px; background: #fff; } .test-details .right .level span{font-weight: 500;font-size: 14px;line-height: normal;color: #fff; display: block; text-align: left; margin-bottom: 5px;} .test-details .right .level.easy{background: #23CE70;} .test-details .right .level.hard{background: #CE5023;} .test-details .right .level.expert{background: #DC0068;} .test-details .right .min {display: flex; align-items: center; gap: 12px; text-align: right; } .test-details .right .min h5{font-weight: 500;font-size: 18px;line-height: normal;color: var(--primary-colors); margin: 0; white-space: nowrap;} .test-details .right .min span{font-weight: 500;font-size: 14px;line-height: normal;color: var(--primary-colors);} .test-details .right .icon{width: 40px; height: 40px; background: rgba(250, 187, 24, 40%); border-radius: 50%; display: flex; justify-content: center; align-items: center;} .test-details .right .icon img{width: 22px; height: auto;} .test-details .right .level-box{padding: 10px; position: relative;} .test-details .right .level-box:after{content: ''; position: absolute; left: 0; height: 100%; background: rgba(12, 57, 88, 20%); width: 1px; top: 0;} /* question-area */ .question-area .que{margin-bottom: 16px;border-bottom: solid 1px rgba(0, 0, 0, 10%);padding-bottom: 15px;} .question-area .que p{font-weight: 500;font-size: 20px;line-height: normal;color: var(--primary-colors);margin-bottom: 20px;} .question-area .que h4{font-weight: 500;font-size: 20px;line-height: 30px;color: var(--primary-colors);margin: 0;} /*.question-area{max-width: 1045px; margin: 0 auto;}*/ .question-area .academic-focus .card-radio-group .card-radio-btn .content_head {color: var(--primary-colors);line-height: 20px;font-weight: 500;} .question-area .card-radio-group .card-input-element + .card.card-body {background: #FFFFFF;border: 2px solid #EFF0F7;border-radius: 12px; padding: 12px 20px; min-height: auto; padding-left: 64px; height: auto !important;} .question-area .card-radio-group .card-input-element + .card {cursor: pointer;} .question-area .card-radio-group .card-input-element:checked + .card {border: 2px solid var(--green-color);-webkit-transition: border 0.3s;-o-transition: border 0.3s;transition: border 0.3s;} .question-area .academic-focus .card-radio-group{display: grid; grid-template-columns: 1fr 1fr; gap: 30px;} .question-area .card-radio-group .card-body{ display: flex;justify-content: flex-start;align-items: center;flex-direction: row;gap: 20px; position: relative; margin-bottom: 5px;} .question-area .card-radio-group .card-body:after{content: ''; position: absolute; left: 20px; top: 0; bottom: 0; margin: auto; width: 24px; height: 24px; border-radius: 50px; border: solid 2px var(--primary-colors);} .question-area .card-radio-group .card-input-element:checked + .card:after{border: solid 6px var(--green-color);} .question-area .card-radio-group .card-input-element:checked + .card .content_head{color: var(--green-color);} .question-area .academic-focus .card-radio-group .card-body span{width: 66px; height: 66px; border-radius: 50%; display: flex; justify-content: center; align-items: center; background: rgba(12, 57, 88, 0.15);} .question-area .card-radio-group label{margin: 0;} .question-area .card{min-height: auto; margin-bottom: 10px; box-shadow: none;} .question-area .card .content_head{font-weight: 500;font-size: 18px;line-height: normal;color: var(--primary-colors);} .question-area .btn-box{margin-top: 30px; display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap;} .yellow-btn-arrow.btn{font-size: 18px;font-weight: bold;padding: 4px 30px 4px 4px;border-radius: 50px;background: var(--secondary-colors);display: flex;gap: 20px;align-items: center;} .yellow-btn-arrow.btn span{background: #fff; width: 32px; height: 32px; border-radius: 50px; display: flex; justify-content: center; align-items: center; transition: var(--transition);} .yellow-btn-arrow.btn span img{width: 16px; height: auto;} .yellow-btn-arrow.btn.next img{transform: rotate(180deg);} .yellow-btn-arrow.btn.next{padding: 4px 4px 4px 30px;} .yellow-btn-arrow.btn.next:focus, .yellow-btn-arrow.btn.next:hover, .yellow-btn-arrow.btn.next:active{outline: none; box-shadow: none;} .yellow-btn-arrow.btn:hover span{ transition: var(--transition); transform: scale(1.1);} .quiz-three-screen{position: relative; z-index: 1;} /*.quiz-three-screen:after{content: ''; position: absolute; inset: 0; width: 100%; height: 100%; background-image: url(../img/left-1.svg); background-repeat: no-repeat; background-size: 88px; background-position: bottom left; animation: robot-shaking 5s infinite; z-index: -1;}*/ @keyframes robot-shaking { 0% { transform: translateY(-40px);} 50% { transform: translateY(-10px);} 100% { transform: translateY(-40px);} } .submit-btn{display: flex; justify-content: end; align-items: center; gap: 30px; margin-top: 40px;} .submit-btn .common-btn{ padding: 8px 32px;} .submit-btn p{margin: 0; font-size: 15px;} .submit-btn .test-cancel{ font-size: 15px; font-weight: 600; text-transform: capitalize;} /* quiz-four-screen */ .quiz-four-screen{display: flex;gap: 30px; flex-wrap: wrap;} .quiz-four-screen .left{flex: 1;} .quiz-four-screen .test-name{display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px;} .quiz-four-screen .test-name h6{font-weight: 500;font-size: 16px;line-height: normal;color: var(--primary-colors); margin: 0; display: flex; gap: 5px; flex-wrap: wrap;} .quiz-four-screen .test-name span{background: var(--green-color); display: block; font-size: 16px; color: var(--primary-colors); padding: 8px 20px; border-radius: 50px; font-weight: bold; white-space: nowrap;} .quiz-four-screen .result-show{text-align: center; background-image: url(../img/prom.svg); background-repeat: no-repeat; background-size: auto; background-position: 5% 90%; position: relative; z-index: 1;} .quiz-four-screen .result-show h2{font-style: normal;font-weight: 800;font-size: 30px;line-height: 38px;letter-spacing: 0.02em;text-transform: uppercase;color: var(--primary-colors); margin-bottom: 20px;} .quiz-four-screen .result-show h2 span{color: var(--secondary-colors);} .quiz-four-screen .result-show p{font-style: normal;font-weight: 400;font-size: 20px;letter-spacing: 0.01em;color: var(--primary-colors);} .result-show ul{display: flex; gap: 10px; justify-content: center; margin: 20px 0 0px 0; flex-wrap: wrap;} .result-show ul li{border: 1px solid #C4D6E2;border-radius: 50px; padding: 8px 25px; font-size: 16px; font-weight: bold; white-space: nowrap; display: flex; gap: 10px; align-items: center;} .result-show ul li.correct{color: var(--green-color);} .result-show ul li.incorrect{color: #E94A4A;} .result-show ul li.unattempted{color: rgba(12, 57, 88, 80%);} .result-show ul li.attempted{color: #D9AA2F;} .quiz-four-screen .diamond-count{display: flex; align-items: center; gap: 10px; justify-content: center;} .quiz-four-screen .diamond-count span{font-weight: 800;font-size: 40px;letter-spacing: 0.02em;text-transform: uppercase;color: var(--primary-colors);display: block;} .quiz-four-screen .diamond-count img{width: 55px; height: auto;} .quiz-four-screen .result-show .common-btn{display: block; margin: 0 auto 10px auto; border-radius: 50px; font-size: 18px; padding: 10px 30px;} .quiz-four-screen .retake-test{text-align: center;font-style: normal;font-weight: 500;font-size: 16px;letter-spacing: 0.01em;color: var(--primary-colors);} .quiz-four-screen .trophy-img {text-align: center; margin-bottom: 40px;} .quiz-four-screen .trophy-img img{width: auto; height: 190px;} .quiz-four-screen #fireworks{position: absolute; inset: 0; margin: auto; z-index: -1; width: 100%; height: 100%; display: none;} .quiz-four-screen #fireworks.active{display: block;} .performance-summary{padding-left: 30px; border-left: solid 1px rgba(12, 57, 88, 20%);} .performance-summary h6{font-weight: bold;font-size: 20px;align-items: center;letter-spacing: 0.01em;text-transform: capitalize;color: var(--primary-colors); margin-bottom: 20px;} .performance-summary p{font-weight: 500;font-size: 16px;line-height: 24px;letter-spacing: 0.01em;;color: var(--primary-colors); padding-left: 15px; max-width: 305px; margin-bottom: 20px;} .performance-summary ul{list-style: disc; padding-left: 15px;} .performance-summary ul li{font-weight: bold;font-size: 16px;letter-spacing: 0.01em;color: var(--primary-colors); margin-bottom: 12px; line-height: normal;} .performance-summary ul li a{font-weight: 500; transition: var(--secondary-colors);} .performance-summary ul li:hover a{color: var(--secondary-colors); transition: var(--secondary-colors);} .performance-summary .next-steps{margin-bottom: 30px;} .vertical-shake {animation: vertical-shaking 3s infinite;} @keyframes vertical-shaking { 0% { transform: scale(0.8);} 50% { transform: scale(1); } 100% { transform: scale(0.8);} } /* result-show fail */ .quiz-four-screen .result-show.fail h2 span{color: #E94A4A;} .quiz-four-screen .test-name span.fail{background: #E94A4A; color: #fff;} .quiz-four-screen .result-show.fail{background: none;} .quiz-four-screen .read-chapter-again{font-weight: 500;font-size: 16px;letter-spacing: 0.01em;color: var(--primary-colors);} .quiz-five-screen .title-box{justify-content: space-between;} .quiz-five-screen .incorrect-answers-header{display: flex; align-items: center; gap: 20px;} .quiz-five-screen .result-show ul{margin: 0;} .quiz-five-screen .result-show ul li{font-size: 16px; padding: 8px 20px; line-height: normal;} .quiz-five-screen .custom-table .no{width: 50px;} .quiz-five-screen .custom-table .incorrect-answers img, .quiz-five-screen .custom-table .correct-answers img{width: 16px; margin-right: 6px;} .quiz-five-screen .custom-table th{white-space: nowrap;} .quiz-five-screen .custom-table th, .quiz-five-screen .custom-table td{font-size: 15px;} /* .sidebar-menu-structure */ .sidebar-menu-structure{margin-bottom: 20px; width: calc(100% - 10px);} .sidebar-menu-structure h5{font-size: 14px; color: rgba(12, 57, 88, 0.8); font-weight: 400; letter-spacing: 1.2px; margin-bottom: 10px;} /* dashboard */ .dashboard .card{background: transparent;box-shadow: none;border-radius: 0;border: none;min-height: auto;padding: 0;} .dashboard .card .dashboard-inner .card{background: #FFFFFF;border-radius: 12px; padding: 20px; display: block;} .main-box{display: flex; gap: 20px;} .dashboard .main-box .card{width: 100%; flex: 1; margin-bottom: 20px;} .dashboard .main-box .small-box{display: flex; gap: 20px; flex: 1; justify-content: space-between;} .dashboard .main-box .box{width: 100%;} .dashboard .main-box .profile-history-summary{flex: 0 0 350px;} .dashboard .main-box .title{margin-bottom: 20px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center;} .dashboard .main-box .title h2{font-weight: bold;font-size: 25px;line-height: 30px;color: var(--primary-colors);margin-bottom: 5px;} .dashboard .main-box .title p{font-weight: 500;font-size: 16px;color: rgba(12, 57, 88, .8); margin: 0;} .dashboard .main-box .small-title{text-align: right;} .dashboard .main-box .small-title h5{font-weight: 500;font-size: 20px;color: var(--primary-colors); margin-bottom: 5px;} .dashboard .main-box .small-title span{font-weight: 500;font-size: 16px;color: rgba(12, 57, 88, 0.6);} .dashboard .main-box .hours-spent-performance .card{display: flex; flex-direction: row; gap: 30px;} .dashboard .main-box .hours-spent-performance .card .chart{border: solid 1px #E5E7E9; border-radius: 12px; padding: 20px;} .dashboard .main-box .hours-spent-performance .card .all-chart:last-of-type{flex: 1;} .dashboard .main-box .study-process .chapters{display: flex; justify-content: space-between;} .dashboard .main-box .study-process .progress-bar {background-color: #23CE70;} .dashboard .main-box .study-process .progress-container{background: rgba(12, 57, 88, .3); border-radius: 50px;} .dashboard .main-box .common-btn.yellow-btn{padding: 8px 20px; display: table; margin-left: auto; line-height: normal;} .dashboard .main-box .study-process{margin: 72px 0 15px 0;} .dashboard .main-box .card.plans{background: #E1E2F6; flex: 0 0 400px;} .dashboard .main-box .card.trophy-showcase{background: #E7FBE7; flex: 0 0 310px;} .dashboard .main-box .card.continue-solving{background: #EFF7E2;} .dashboard .main-box .card.syllabus-progress{background: #F0E7FF;} .dashboard .main-box .master-in-subject h5{font-weight: normal;font-size: 16px;color: var(--primary-colors);margin-bottom: 15px;} .dashboard .main-box .master-in-subject {margin-bottom: 15px;} .dashboard .main-box .master-in-subject ul{display: flex;gap: 15px;flex-direction: row;max-width: 350px;flex-wrap: wrap;} .dashboard .main-box .master-in-subject ul li img{margin-bottom: 5px; display: block; width: 50px; height: auto;} .dashboard .main-box .trophy-showcase .right p, .dashboard .main-box .master-in-subject ul li span{display: block;font-size: 16px;color:var(--primary-colors);} .dashboard .main-box .trophy-showcase .left{display: flex;flex-direction: column;justify-content: space-between; margin-bottom: 30px;} .dashboard .main-box .trophy-showcase .right ul{display: flex;gap: 40px;margin-bottom: 25px;} .dashboard .main-box .trophy-showcase .left, .dashboard .main-box .trophy-showcase .right{flex: 1;} .dashboard .main-box .trophy-showcase .right ul li{position: relative; transition: var(--transition);} .dashboard .main-box .trophy-showcase .right ul li:hover{transform: translateY(-15px);transition: var(--transition);} .dashboard .main-box .trophy-showcase .right ul li span{font-size: 15px; color: #fff; width: 30px; height: 30px; background-color: #fff; border-radius: 50px; display: flex; justify-content: center; align-items: center; position: absolute; bottom: -10px; left: 0; right: 0; margin: 0 auto;} .dashboard .main-box .trophy-showcase .right ul li.gold span{background: #DB8A00; box-shadow: 0px -4px 0px #6F4600;} .dashboard .main-box .trophy-showcase .right ul li.silver span{background: #8295A7; box-shadow: 0px -4px 0px #002141;} .dashboard .main-box .trophy-showcase .right ul li.bronze span{background: #9C3131;box-shadow: 0px -4px 0px #4E0E0E;} .dashboard .main-box .trophy-showcase .right .last-week{color: var(--primary-colors); display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 600;} .dashboard .main-box .master-in-subject ul li span{font-weight: 600;} .dashboard .main-box .trophy-showcase .right .last-week img{width: 20px; height: auto;} .dashboard .main-box .continue-solving .current-task{margin-bottom: 24px;} .dashboard .main-box .continue-solving .current-task p{font-weight: 500; margin-bottom: 5px;} .dashboard .main-box .continue-solving .current-task h3{font-weight: 500;font-size: 20px; margin: 0;} .dashboard .main-box .continue-solving .start-solving{display: flex; justify-content: space-between; align-items: center;} .dashboard .main-box .continue-solving .start-solving a{margin: 0;font-weight: 500;font-size: 16px;text-decoration-line: underline;color: var(--primary-colors);} .dashboard .chapter-bar .circle-progress::before{background: #F0E7FF;} .dashboard .chapter-bar .circle-progress span{color: var(--primary-colors); transition: var(--transition);} .dashboard .chapter-bar .circle-progress:hover span{transition: var(--transition); transform: scale(1.6);} .dashboard .chapter-bar ul li p {text-align: center; font-weight: 500; margin: 10px 0 0; white-space: nowrap;} .dashboard .chapter-bar .circle-progress{margin: 0 auto;} .dashboard .chapter-bar ul li{flex: 1;} .dashboard .chapter-bar ul{margin: 0;} .dashboard .chapter-bar{margin: 0;} .dashboard .history-summary ul li{border-bottom: solid 1px rgba(12, 57, 88, 0.1); padding-bottom: 15px; margin-bottom: 15px;} .dashboard .history-summary ul li p{font-size: 14px; margin-bottom: 5px;} .dashboard .history-summary ul li h5{font-size: 18px; font-weight: 500; margin: 0;} .dashboard .history-summary ul li .time p{font-weight: 500; margin: 0; color: rgba(12, 57, 88, 0.6);} .dashboard .history-summary ul li .time{display: flex; justify-content: space-between; align-items: center; margin-top: 15px;} .dashboard .history-summary ul li:last-of-type{border: none; padding: 0; margin: 0;} .dashboard .profile-history-summary .profile-img{text-align: center; position: relative; width: 100px; height: 100px; margin: 0 auto 30px auto;} .dashboard .profile-history-summary .profile-img img{width: 100%; height: 100%; object-fit: cover; border-radius: 50px; margin: 0 auto; position: relative;} .dashboard .profile-history-summary .profile-img:after{content: '';position: absolute;border: dashed 2px var(--secondary-colors);width: 100%;height: 100%;border-radius: 50px;inset: 0;margin: auto;transform: scale(1.2);} .dashboard .active-plans h3{font-weight: bold;font-size: 25px;color: var(--primary-colors); margin-bottom: 5px;} .dashboard .active-plans p{font-weight: 500;font-size: 16px;color: rgba(12, 57, 88, .6); margin: 0;} .dashboard .active-plans .auto-renew{font-size: 14px; font-weight: 500; background: var(--primary-colors); color: #fff; padding: 2px 10px; border-radius: 50px;} .dashboard .profile-history-summary .name{margin-bottom: 20px; text-align: center;} .dashboard .profile-history-summary .name h2{font-weight: bold;font-size: 24px;color: var(--primary-colors); margin-bottom: 5px; display: flex; align-items: center; gap: 12px; justify-content: center;} .dashboard .profile-history-summary .name h2 .verification{height: 18px; width: auto;} .dashboard .profile-history-summary .name p{font-weight: 500;font-size: 16px; margin: 0;} .dashboard .profile-history-summary .list li{font-weight: bold;font-size: 16px;line-height: 28px;color: var(--primary-colors); list-style: nui;} .dashboard .profile-history-summary .list{padding-left: 20px;} .dashboard .profile-history-summary .see-all-plans{display: flex; justify-content: space-between; align-items: center; margin-top: 20px;} .dashboard .profile-history-summary .see-all-plans span{font-weight: 500;font-size: 14px;color: var(--primary-colors);} .dashboard .profile-history-summary .see-all-plans .common-btn.yellow-btn{margin: 0; display: block;} .dashboard .active-plans{display: flex; justify-content: space-between; align-items: end; margin-top: 20px; border-bottom: solid 2px rgba(12, 57, 88, 0.1); padding-bottom: 10px; margin-bottom: 15px;} .dashboard .chart-container {width: 100%;padding: 20px;border: 1px solid #e0e0e0;border-radius: 10px;} .dashboard .gauge-wrapper {width: 350px;height: 155px;position: relative;margin: 50px auto; text-align: center;} .dashboard .gauge-wrapper .gauge {transform: rotate(-90deg);} .dashboard .gauge-wrapper .needle {position: absolute;top: 30px;left: 44%;transform-origin: bottom;transition: transform 0.5s ease;} .dashboard .gauge-wrapper .label {text-align: center;font-size: 20px;margin-top: 10px; font-weight: bold;} .dashboard .point-progress{display: flex; justify-content: space-between; align-items: center;} .dashboard .point-progress label{font-weight: 500;font-size: 12px;line-height: 14px;color: #42404C; display: flex; gap: 8px; align-items: center;} .dashboard .point-progress label .green{width: 16px;height: 16px;background: #23CE70;border-radius: 4px; display: block;} .dashboard .point-progress .form-control{padding: 6px 15px; font-size: 16px; padding-right: 40px;} .QA-ask{position: fixed; bottom: 100px; right: 40px; z-index: 999; display: block; animation: vertical-shaking 2s infinite; text-align: center;} .QA-ask img{width: 66px; height: auto; filter: drop-shadow(2px 4px 6.8px rgba(0, 0, 0, 0.25));} .dashboard .main-box .card.flashcards-reviewed{background: var(--primary-colors);box-shadow: 0px 10px 15px rgba(4, 16, 34, 0.12);border-radius: 12px; text-align: center; position: relative; padding: 55px 35px; flex:0 0 222px; overflow: hidden; cursor: pointer; transition: var(--transition);} .dashboard .main-box .card.flashcards-reviewed:after{content: '';position: absolute;inset: 0;width: 75%;height: 75%;border: solid 2px #fff;margin: auto;border-radius: 18px; transition: var(--transition);} .dashboard .main-box .flashcards-reviewed:hover .card-logo, .dashboard .main-box .card.flashcards-reviewed:hover{background: var(--secondary-colors); transition: var(--transition);} .dashboard .main-box .card.flashcards-reviewed:hover:after{ border-color: var(--primary-colors);} .dashboard .main-box .flashcards-reviewed:hover .card-logo img{filter: brightness(0);} .dashboard .main-box .card.flashcards-reviewed:hover *{color: var(--primary-colors);} .dashboard .main-box .flashcards-reviewed p{font-size: 16px; font-weight: bold; color: #fff; line-height: 24px; margin: 0;} .dashboard .main-box .flashcards-reviewed h1{font-size: 50px; font-weight: bold; color: #fff; margin: 10px 0;} .dashboard .main-box .flashcards-reviewed .card-logo{background: var(--primary-colors); position: absolute; bottom: 0; right: 0; padding: 15px; z-index: 1; transition: var(--transition);} .dashboard .main-box .flashcards-reviewed .reviewed{position: relative; z-index: 3;} .top-card-data{display: flex; justify-content: space-between; align-items: end;} .top-card-data h2{font-size: 60px; font-weight: bold; color: var(--primary-colors);} .top-card-data h2 span{font-size: 16px; font-weight: 500; color: var(--primary-colors);} .dashboard .dashboard-inner .card.flashcards-top-card{ display: flex;justify-content: space-between;} .quiz-second-screen .custom-table table tbody tr td:nth-child(2) {min-width: 150px;} .quiz-second-screen .custom-table .table-scroll{overflow: auto;} .subscription-plan .active-btn {line-height: 1} /* summary-btn */ .quiz-four-screen .result-show .summary-btn{display: flex; align-items: center; gap: 20px; justify-content: center; flex-wrap: wrap;} .quiz-four-screen .result-show .summary-btn a:first-child{border-right: solid 1px var(--primary-colors); padding-right: 20px; margin: 0; line-height: 18px; transition: var(--transition);} .quiz-four-screen .result-show .summary-btn a:hover{color: var(--secondary-colors); transition: var(--transition);} .table-scroll {overflow: auto;} .badges-svg{position: absolute; top: 0; right: 20px;} .badges-svg img{height: 160px; width: auto;} .dashboard .card.badges-earned{display: flex; gap: 18px; flex: 0 0 540px;} .dashboard .badges-earned .badge-count{display: flex; gap: 18px; margin-top: 18px;} .dashboard .badges-earned .badge-count li{border-right:solid 1px rgba(12, 57, 88, 0.2); padding-right: 18px;} .dashboard .badges-earned .badge-count li:last-of-type{border: none; padding: 0;} .dashboard .badges-earned .badge-count li img{margin-bottom: 15px; height: 80px; width: auto; transform-style: preserve-3d; animation: flip-left-right 10s infinite linear;} @keyframes flip-left-right { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .dashboard .badges-earned .badge-count li span{font-size: 15px;color: #fff;width: 30px;height: 30px;background-color: #fff;border-radius: 50px;display: flex;justify-content: center;align-items: center; margin: auto;} .dashboard .badges-earned .badge-count li.gold span {background: #DB8A00;box-shadow: 0px -4px 0px #6F4600;} .dashboard .badges-earned .badge-count li.silver span {background: #8295A7;box-shadow: 0px -4px 0px #002141;} .dashboard .badges-earned .badge-count li.bronze span {background: #9C3131;box-shadow: 0px -4px 0px #4E0E0E;} .dashboard .badges-earned .champion{text-align: right; margin: 0; font-weight: bold;} .dashboard .flashcards .main-box .title{margin: 0;} .dashboard .flashcards .card.current-streak{background: #FFEACC;} .dashboard .flashcards .card.studying-today{background: #E0F7F5;} .dashboard .flashcards .card.badges-earned{background: #F3E8FF;} .dashboard .leaderboard .title-point{display: flex; justify-content: space-between;} .dashboard .leaderboard .top-user ul{display: flex; gap: 20px; } .dashboard .leaderboard .top-user{ text-align: center;} .dashboard .leaderboard .top-user p{font-size: 16px; color: rgba(12, 57, 88, 0.8); line-height: normal;} .dashboard .leaderboard .top-user ul li{padding-right: 20px; border-right: solid 1px rgba(12, 57, 88, 0.1); text-align: center;} .dashboard .leaderboard .top-user ul li img{height: 156px; width: auto; animation: leaderboard 3s infinite;} @keyframes leaderboard { 0%{transform: scale(0.9);} 50%{transform: scale(1);} 100%{transform: scale(0.9);} } /* dashboard leaderboard */ .dashboard .leaderboard .top-user ul li:last-of-type{border: none; padding: 0;} .dashboard .leaderboard .top-user ul li p{font-size: 18px; color: rgba(12, 57, 88, 0.6); font-weight: 500; margin-bottom: 10px;} .dashboard .leaderboard .top-user ul li h6{font-weight: bolder; font-size: 20px; margin: 0; line-height: normal;} .dashboard .leaderboard .point h2{font-size: 60px; margin-bottom: 0; font-weight: bold;} .dashboard .leaderboard .point h2 span{font-size: 18px;} .dashboard .leaderboard .point p{font-weight: bold; margin: 0;} .dashboard .leaderboard .point-rank{display: flex;flex-direction: column;justify-content: space-between;} .dashboard .my-point{background: var(--secondary-colors); padding: 20px 40px; border-radius: 12px; text-align: center;} .dashboard .my-point .total-point{background: #fff; padding: 15px 10px; border: solid 6px var(--primary-colors); border-radius: 12px; position: relative; margin-bottom: 30px;} .dashboard .my-point .total-point h2{font-size: 55px; font-weight: bold;} .dashboard .my-point .total-point p{ font-size: 16px;color: #fff;padding: 3px 14px;background: var(--primary-colors);border-radius: 50px;line-height: 16px;position: absolute;bottom: -14px;margin: auto;left: 0;right: 0;display: table;} .dashboard .my-point .ranks{display: flex; align-items: center; justify-content: center; gap: 10px;} .dashboard .my-point .ranks p{margin: 0; font-size: 16px; font-weight: bold; } .dashboard .my-point .username{font-size: 16px; font-weight: bold; color: rgba(12, 57, 88, 0.8); margin-bottom: 15px;} .dashboard .my-point .username span{color: rgba(12, 57, 88, 1);} .dashboard .flashcards .study-process{margin: 0;} .dashboard .flashcards .plans{ display: flex;justify-content: space-between;} .dashboard .flashcards .plans .common-btn{margin-top: 15px;} /* difficulty-radio */ .difficulty-radio .form-check, .difficulty-radio{display: flex; gap: 20px; align-items: center; justify-content: center; margin-top: 10px;} .difficulty-radio .form-check{gap: 10px;} .difficulty-radio label{font-size: 18px; font-weight: 500; color: var(--primary-colors); margin-left: 10px; margin-bottom: 0;} .dashboard .flashcards .top-filter{align-items: start;} /* .flashcards-flip-test */ .flashcards-flip-test .all-card-stats{display: flex; gap: 30px; flex-wrap: wrap;} .flashcards-flip-test .title{margin-bottom: 30px;} .flashcards-flip-test .title h2{font-size: 20px; font-weight: bold; margin-bottom: 10px; margin-top: 40px;} .flashcards-flip-test .title p{font-weight: 500; font-size: 18px; margin-bottom: 0;} .flashcards-flip-test .all-card-que{flex: 1;} .flashcards-flip-test .performance-summary{flex: 0 0 200px;} .flashcards-flip-test .performance-summary .common-btn{font-size: 16px; padding: 10px 20px; white-space: nowrap;} .masonry-image-grid { display: flex;flex-flow: column wrap;max-width: 100%;clear: both; gap: 20px;} .masonry-container {flex: 0 0 auto;overflow:hidden;box-sizing: border-box;} .masonry-container .inner {width: 100%;height: 100%;position: relative;display: flex;align-items: center;justify-content: center; background: var(--primary-colors);} .masonry-container {box-shadow: 0px 10px 15px rgba(4, 16, 34, 0.12);} /* all-card-stats */ .all-card-stats .flash-cards{ position: absolute;height: 100%;width: 100%;display: flex;flex-direction: column;justify-content: center;} .all-card-stats .flash-cards:after{content: '';position: absolute;inset: 0;width: calc(100% - 70px);height: calc(100% - 70px);border: solid 2px #fff;margin: auto;border-radius: 18px;} .all-card-stats .flash-cards h6{font-size: 20px;color: #fff;font-weight: 600;text-align: center;position: relative;z-index: 1;line-height: 32px; margin-bottom: 30px;} .all-card-stats .que-btn{max-width: 320px;margin: auto; } .all-card-stats .flash-cards span{display: block; font-size: 22px; color: #fff; font-weight: 500; line-height: 36px;} .all-card-stats .flash-cards .common-btn{padding: 10px 40px;} .all-card-stats .flash-cards .flash-cards-logo {background: var(--primary-colors);position: absolute;bottom: 0;right: 0;padding: 15px;z-index: 1;} .all-card-stats .flash-cards .que-num{background: var(--primary-colors);position: absolute;top: 0;left: 8px;padding: 20px 20px;z-index: 1;text-align: center;} @media screen and (max-width: 599px) { .masonry-container {flex: none;} } @media screen and (min-width:600px) { div#masonry-image-grid.mobile-grid {display: grid;grid-template-columns: 1fr 1fr;height: unset !important; gap: 20px;} div#masonry-image-grid.mobile-grid .masonry-container {min-height: 100%;} } @media screen and (min-width:1024px) { div#masonry-image-grid.mobile-grid {display: grid;grid-template-columns: 1fr 1fr 1fr;height: unset !important; gap: 20px;} } /* masonry */ .masonry-container.flipped .flash-cards .flash-cards-logo{display: none;} .masonry-container.flipped .flash-cards .que-num, .masonry-container.flipped .inner{background: #fff;} .masonry-container.flipped .inner *{color: var(--primary-colors);} .masonry-container.flipped .flash-cards:after{border-color: var(--primary-colors);} .masonry-container .answer{display: none; position: relative; z-index: 1;} .masonry-container.flipped .answer{display: block;} .masonry-container.flipped .question{display: none;} .masonry-container.flipped .common-btn.flip-btn{display: none; } .masonry-container .answer ul{display: grid; grid-template-columns: 1fr 1fr; gap: 5px; align-items: center; justify-content: center;} .masonry-container .answer ul .common-btn{display: flex; gap: 10px; justify-content: space-between; align-items: center; padding: 6px 26px; width: 100%;} .masonry-container .answer ul .common-btn.easy{background: #E0FBE4;} .masonry-container .answer ul .common-btn.good{background: #FFF9E0;} .masonry-container .answer ul .common-btn.hard{background: #FFF2E5;} .masonry-container .answer ul .common-btn.forgot{background: #FBEAEA;} .masonry-container.flipped.easy .answer ul, .masonry-container.flipped.good .answer ul, .masonry-container.flipped.hard .answer ul, .masonry-container.flipped.forgot .answer ul{display: none;} .masonry-container.flipped.easy .flash-cards .que-num, .masonry-container.flipped.easy .inner{background: #8cff9d;} .masonry-container.flipped.good .flash-cards .que-num, .masonry-container.flipped.good .inner{background: #ffe887;} .masonry-container.flipped.hard .flash-cards .que-num, .masonry-container.flipped.hard .inner{background: #f5bc83;} .masonry-container.flipped.forgot .flash-cards .que-num, .masonry-container.flipped.forgot .inner{background: #fd9191;} .masonry-container .answer-logo{padding: 15px; display: flex; justify-content: center; align-items: center; margin: 0 auto; position: relative; } .masonry-container .answer-logo span{width: 70px; height: 70px; margin: auto; display: block; background: #fff; position: relative; z-index: 1;} .masonry-container .answer-logo:after{content: ''; position: absolute; height: 1px; width: 100%; background: var(--primary-colors); top: 0; bottom: 0; margin: auto;} .masonry-container .answer-logo img{filter: brightness(0); z-index: 1; width:100% ; position: absolute; inset: 0; margin: auto; height: 100%; padding: 10px;} .masonry-container .answer label{text-align: center; margin-bottom: 15px;} .masonry-container.flipped h6{margin: 0;} .masonry-container.flipped.easy .answer-logo, .masonry-container.flipped.easy .answer label, .masonry-container.flipped.good .answer-logo, .masonry-container.flipped.good .answer label, .masonry-container.flipped.hard .answer-logo, .masonry-container.flipped.hard .answer label, .masonry-container.flipped.forgot .answer-logo, .masonry-container.flipped.forgot .answer label{display: none;} .emoji-answer, .emoji-answer .emoji-forgot, .emoji-answer .emoji-hard, .emoji-answer .emoji-good, .emoji-answer .emoji-easy{display: none;} .emoji-answer{text-align: center; margin-bottom: 15px; } .emoji-answer img{margin-bottom: 15px; display: block; width: 50px; height: auto; margin: 0 auto 15px auto;} .emoji-answer h2{font-weight: bold;font-size: 22px;text-decoration-line: underline;text-transform: uppercase;color: var(--primary-colors);} .masonry-container.flipped.easy .emoji-answer .emoji-easy, .masonry-container.flipped.easy .emoji-answer, .masonry-container.flipped.hard .emoji-answer .emoji-hard, .masonry-container.flipped.hard .emoji-answer, .masonry-container.flipped.good .emoji-answer .emoji-good, .masonry-container.flipped.good .emoji-answer, .masonry-container.flipped.forgot .emoji-answer .emoji-forgot, .masonry-container.flipped.forgot .emoji-answer{display: block;} .dashboard .main-box .card.plans.go-to-study{ background: linear-gradient(-45deg, #f7dfbd, #b8f2ed, #dbc0f9, #bcbff8); background-size: 400% 400%; animation: goStudyGradient 15s ease infinite;} @keyframes goStudyGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* mark-learned .checkbox */ .mark-learned-submit label{ display: flex;align-items: center;gap: 20px; margin: 0; font-size: 16px; color: var(--primary-colors); font-weight: 500;} .mark-learned-submit .common-btn{padding: 15px 50px;} .mark-learned-submit{position: relative; position: relative;display: flex;align-items: center;justify-content: flex-end;gap: 20px;} .toggle-checkbox {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;} .toggle-slot {font-size: 10px;position: relative;height: 26px;width: 50px;border: 0px solid transparent;border-radius: 10em;background-color: #e1e1e1;transition: background-color 250ms; box-shadow: inset 0px 6px 8px 3px rgba(0, 0, 0, 0.1);} .toggle-checkbox:checked ~ .toggle-slot {background-color: #23CE70;} .toggle-button {transform: translate(0.3em, 0.25em);position: absolute;height: 20px;width: 20px;border-radius: 50%;background-color: #23CE70;box-shadow: inset 0px 0px 0px 0.75em #23CE70;transition: background-color 250ms, border-color 250ms, transform 500ms cubic-bezier(.26,2,.46,.71); box-shadow: inset 0px 6px 8px 3px rgba(0, 0, 0, 0.1);} .toggle-checkbox:checked ~ .toggle-slot .toggle-button {background-color: #fff;box-shadow: inset 0px 0px 0px 0.75em white;transform: translate(2.60em, 0.25em); box-shadow: inset 0px 6px 8px 3px rgba(0, 0, 0, 0.1); filter: drop-shadow(-2px 1px 6px rgba(0, 0, 0, 0.25));} .sun-icon {position: absolute;height: 20px;width: 20px;color: #23CE70;} .sun-icon-wrapper {position: absolute;height: 20px;width: 20px;opacity: 1;transform: translate(2em, 2em) rotate(15deg);transform-origin: 50% 50%;transition: opacity 150ms, transform 500ms cubic-bezier(.26,2,.46,.71);} .toggle-checkbox:checked ~ .toggle-slot .sun-icon-wrapper {opacity: 0;transform: translate(3em, 2em) rotate(0deg);} .moon-icon {position: absolute;height: 20px;width: 20px;color: white;} .moon-icon-wrapper {position: absolute;height: 20px;width: 20px;opacity: 0;transform: translate(11em, 2em) rotate(0deg);transform-origin: 50% 50%;transition: opacity 150ms, transform 500ms cubic-bezier(.26,2.5,.46,.71);} .toggle-checkbox:checked ~ .toggle-slot .moon-icon-wrapper {opacity: 1;transform: translate(2em, 2em) rotate(-15deg);} /* flashcards-result */ .flashcards-result .trophy-img img{height: 150px; width: auto;} .flashcards-result .diamond-count span{font-weight: 400; text-transform: capitalize; display: flex; gap: 12px;} .flashcards-result .diamond-count span span{font-weight: 900;} .flashcards-result .test-name .result.time-spent{background: transparent; border: solid 1px rgba(12, 57, 88, 1); padding: 8px 20px;} /* upgrade-plan */ .upgrade-plan .test-details{padding: 20px 30px;} .upgrade-plan .all-plan .plan{background: #FFFFFF;border: 1px solid #EFF0F7;box-shadow: 0 2px 12px rgba(20, 20, 43, 0.08);border-radius: 20px; padding: 20px; position: relative; display: flex;flex-direction: column;justify-content: space-between; transition: var(--transition); min-width: 280px;} .upgrade-plan .all-plan .plan.premium-plan.best-value{border: solid 2px #2463eb;} .upgrade-plan .all-plan {display: flex; gap: 20px; flex-wrap: wrap;justify-content: center;} .upgrade-plan .all-plan .plan.basic-plan .price h2 .amount{color: var(--secondary-colors);} .upgrade-plan .all-plan .plan.basic-plan{background: var(--primary-colors); transition: var(--transition);} .upgrade-plan .all-plan .plan.basic-plan:hover{transition: var(--transition);} .upgrade-plan .all-plan .plan.basic-plan *{color: #fff;} .upgrade-plan .all-plan .plan.basic-plan .price h2 .month{color: #D9DBE9;} .upgrade-plan .all-plan .plan.basic-plan .benefits li img{filter: blur(0);} .upgrade-plan .all-plan .plan .common-btn.choose-plan{width: 100%;} .upgrade-plan .all-plan .plan.basic-plan .common-btn.choose-plan{background: #fff; color: var(--primary-colors);} .upgrade-plan .all-plan .plan .price-strike{opacity: 0.8;font-weight: 400; position: relative;} .upgrade-plan .all-plan .plan .price-strike:after{content: '';position: absolute;height: 8px;width: 100%;background: var(--red-color);inset: 0;margin: auto;border-radius: 50px;transform: rotate(-15deg);} .common-btn.transfer-btn{background: rgba(255, 255, 255, .2); border-radius: 10px; font-size: 14px; line-height: normal; padding: 12px 24px; border-color: rgba(255, 255, 255, .2); font-weight: normal;} .upgrade-plan .plan-title{margin-bottom: 20px;} .upgrade-plan .plan-title h5{font-weight: 600;font-size: 22px;color: var(--primary-colors); margin: 0;} .upgrade-plan .plan-title p{font-weight: 400;font-size: 16px;color: rgba(12, 57, 88, .6); margin: 5px 0;} .upgrade-plan .price {margin-bottom: 15px;} .upgrade-plan .price h2{font-size: 38px; font-weight: bold; color: var(--primary-colors); margin-top: 0;} .upgrade-plan .price h2 .month{font-size: 18px; font-weight: 500; color: rgba(12, 57, 88, .6); display: block; margin-top: 10px;} .upgrade-plan .benefits h6{font-weight: bold;font-size: 18px;color: var(--primary-colors); margin-bottom: 15px;padding-top: 15px;} .upgrade-plan .benefits{margin-bottom: 25px;} .upgrade-plan .benefits li{font-weight: 400;font-size: 17px;line-height: 24px;color: rgba(12, 57, 88, .9); margin-bottom: 10px; display: flex; align-items: center; gap: 14px;} .upgrade-plan .benefits li:last-of-type{margin-bottom: 0;} .upgrade-plan .benefits li img {height: 20px; width: 20px; object-fit: cover;} .upgrade-plan .custom-table.feature-checklist-table table tbody tr td:nth-child(1) {width: 50%;} .upgrade-plan .feedback1-img{position: absolute; right: 0; top: 0; z-index: 1; width: 44px; height: auto; margin: 8px;} .upgrade-plan .card-btn .arrow{margin-left: 10px;} .upgrade-plan .card-btn .common-btn img{filter: brightness(100); transition: all .2s linear;} .upgrade-plan .card-btn .common-btn:hover img{filter: brightness(0); transition: all .4s linear;} .upgrade-plan .card-btn .common-btn{ transition: all .4s linear;} .upgrade-plan .card-btn .common-btn.yellow-btn img{filter: brightness(0);} .upgrade-plan .card-btn .common-btn.yellow-btn:hover img{filter: brightness(100); } .upgrade-plan .best-value-price.price h2, .upgrade-plan .best-value-price.plan-title h5{color: #2463eb;} /* payment-banner */ .payment-banner {display: flex;overflow: hidden;width: 100%; background: var(--primary-colors); border-radius: 12px; margin: 40px 0;} .payment-banner .left {background-color: #f9b21d; display: flex;align-items: center;clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%); flex: 1; gap: 40px; padding: 35px 40px;} .payment-banner .text h3 {margin: 0 0 15px;font-size: 32px;font-weight: bold;} .payment-banner .text p {margin: 0;font-size: 26px; font-weight: bold;} .payment-banner .right {display: flex;align-items: center;justify-content: center; flex: 0 0 450px;} .payment-banner .right p{font-size: 18px; color: #fff; margin: 0;} /* frequently-asked-questions */ .frequently-asked-questions .faq-box{ margin: 0 auto; box-shadow: 0 2px 12px rgba(20, 20, 43, 0.08); padding: 20px; border-radius: 20px;} .frequently-asked-questions .title-box{border: none; margin-bottom: 20px; text-align: center; display: block;} .frequently-asked-questions .title-box h2{line-height: 1.5;} .frequently-asked-questions .accordion-item{background: #FFFFFF;border: none;border-radius: 0;border-bottom: 1px solid #DEDEDE; padding: 0; font-size: 20px; font-weight: 600; color: var(--primary-colors);} .frequently-asked-questions .accordion-item:last-of-type{border: none; padding: 0;} .frequently-asked-questions .accordion-button{background: transparent;border: none;box-shadow: none;border-radius: 0; font-size: 18px; font-weight: 500; color: var(--primary-colors);} .frequently-asked-questions .accordion-button, .frequently-asked-questions .accordion-body{padding: 0 20px 20px 40px;} .frequently-asked-questions .accordion-button{padding-top: 15px;} .frequently-asked-questions .accordion-body p{font-size: 16px; color: rgba(12, 57, 88, .7); font-weight: normal;} .frequently-asked-questions .accordion-body p b{display: block; margin-bottom: 15px;} .frequently-asked-questions .accordion-body p:last-of-type{margin: 0;} .frequently-asked-questions .accordion-button::after{ content: '+';font-size: 34px;line-height: 14px;font-weight: 300;background: none; color: var(--secondary-colors); position: absolute; left: 0; } .frequently-asked-questions .accordion-button:not(.collapsed)::after{ content: '-'; font-size: 60px;} /* payment-history */ .payment-history .next-renewal{text-align: right;} .payment-history .next-renewal p{font-size: 18px; margin: 0; font-weight: 600;} .payment-history .next-renewal p:first-of-type{color: rgba(12, 57, 88, 0.6); margin-bottom: 5px;} .payment-history .auto-renew {padding: 30px 30px 30px 0; border-left: solid 1px rgba(12, 57, 88, 0.2); padding-left: 20px;} .payment-history .auto-renew label{display: flex; align-items: center; font-weight: 600; font-size: 16px; color: var(--primary-colors); gap: 20px;} .payment-history.test-details .left h3{margin-bottom: 10px;} .payment-history.test-details{padding: 15px 20px;} /* past-payments-table */ .payment-history.test-details .left p{font-size: 18px;} .past-payments-table .title{display: flex; justify-content: space-between; align-items: center; gap: 15px; width: 100%; flex-wrap: wrap;} .past-payments-table .title .issues-payment{display: flex; justify-content: space-between; align-items: center; gap: 15px; flex-wrap: wrap;} .past-payments-table .title h5{font-size: 16px; font-weight: 600; margin: 0;} .past-payments-table .title h2{padding: 0; margin: 0; border: none;} .past-payments-table .title{padding-bottom: 15px; border-bottom: solid 1px rgba(0, 0, 0, 0.2); margin-bottom: 20px;} .past-payments-table img{margin-right: 5px;} .past-payments-table table tbody tr td{white-space: nowrap;} .past-payments-table table tbody tr td:nth-child(3){white-space: normal; min-width: 200px;} .custom-table .common-btn{padding: 5px 15px; font-size: 16px; display: inline-block;} .top-filter.quiz{justify-content: space-between; background: rgba(12, 57, 88, 4%); align-items: center; padding: 12px; border-radius: 12px;} .top-filter.quiz h1{font-weight: bold;font-size: 24px;line-height: 20px;color: var(--primary-colors); margin: 0; padding-left: 8px;} .top-filter.quiz .form-group{display: flex; align-items: center; gap: 15px;} .top-filter.quiz .form-group label{margin: 0; white-space: nowrap;} .select-subject-card{background: rgba(12, 57, 88, 4%); padding: 12px; border-radius: 12px; margin-bottom: 20px;} .all-select label.radio-card .card-content-wrapper {background: #fff;border-radius: 12px;padding: 15px;border: solid 1px rgba(12, 57, 88, 20%);transition: 200ms linear;position: relative;height: 100%;} .all-select label.radio-card .check-icon {width: 28px;height: 31px;display: inline-block;transition: 200ms linear;position: absolute;right: 10px;top: 10px;} .all-select label.radio-card .check-icon:before {content: "";position: absolute;inset: 0;background-image: url(../img/subject-icon.svg);background-repeat: no-repeat;background-position: center center;transition: 200ms linear;opacity: 0;} .all-select label.radio-card input[type=radio] {appearance: none;-webkit-appearance: none;-moz-appearance: none;} .all-select label.radio-card.selected .card-content-wrapper {box-shadow: none;background: var(--primary-colors);} .all-select label.radio-card.selected .check-icon {background: transparent;border-color: transparent;} .all-select label.radio-card.selected .check-icon:before {opacity: 1;} .all-select label.radio-card.selected .card-content-wrapper * {color: #fff;} .all-select label.radio-card input[type=radio]:focus + .card-content-wrapper .check-icon {box-shadow: 0 0 0 4px rgba(48, 86, 213, 0.2);border-color: #3056d5;} .all-select label.radio-card .card-content img {margin-bottom: 10px;} .all-select {display: flex;gap: 15px;flex-wrap: wrap;} .all-select label {min-width: 130px;} .all-select .radio-card {color: var(--primary-colors);cursor: pointer;display: flex;flex-direction: column;margin: 0;} .all-select label.radio-card .card-content-wrapper:hover{background: var(--primary-colors);} .all-select label.radio-card .card-content-wrapper:hover *{color: #fff;} .card-content h4{font-weight: bold; font-size: 26px; margin: 0;} .card-content span{font-size: 18px; margin: 0; word-wrap: normal; max-width: 100px;} .card-content {display: flex;gap: 20px; flex-direction: column;} .payment-plans.test-details{padding: 15px 20px;} .payment-plans.test-details .left h3 {margin-bottom: 6px;} .payment-plans.test-details .left p {margin-bottom: 0;} .payment-plans.test-details .right label{font-size: 16px; white-space: nowrap;} .save-discount{display: block;background:rgb(235 66 63);border-radius: 50px;color: #FFF;font-weight: 600;font-size: 14px;line-height: normal;padding: 12px 24px;font-weight: normal; white-space: nowrap; gap: 15px;} .alert-info{color: var(--primary-colors);background: rgba(250, 187, 24, 0.3);border-color: rgba(250, 187, 24, 1);font-size: 16px;padding: 10px 20px;} .custom-modal-ui .close.common-btn, .custom-pop-up .close.common-btn{ width: 30px;height: 30px;margin: 0;padding: 0;} .custom-modal-ui .close.common-btn span, .custom-pop-up .close.common-btn span{margin: 0;} .common-btn.promo-code{border-radius: 0 12px 12px 0; height: 100%;} .custom-pop-up .modal-title {font-size: 22px;font-weight: bold;margin: 0;} .payment-details .table-scroll table{width: 100%;} .payment-details .table-scroll th, .payment-details .table-scroll td{ padding: 5px 0; font-size: 16px; } .payment-details .table-scroll td{ text-align: right;} .panel-title {font-weight: bold;font-size: 20px;margin-bottom: 10px;} .subscription-container{display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-top: 30px;} .subscription-container .subscription-card{ border-radius: 12px;padding: 20px; margin: 0; border: 1px solid #EFF0F7; box-shadow: 0px 5px 16px rgba(8, 15, 52, 0.06);} .subscription-container .subscription-card h3{font-size: 22px; margin-bottom: 0; font-weight: bold;} .subscription-container .subscription-card .c-title{ margin-bottom: 10px; border-bottom: solid 1px rgba(12, 57, 88, 20%); padding-bottom: 15px; display: flex; align-items: center; justify-content: space-between;} .subscription-container .subscription-card .c-title p{background: rgba(12, 57, 88, 50%); color: #fff; border: solid 1px rgba(12, 57, 88, 30%); border-radius: 50px; padding: 5px 16px;} .subscription-container .subscription-card .c-title .active{background: #23CE70; border-color: #23CE70;} .subscription-container .subscription-card .c-title .expired{background: #eb423f; border-color: #eb423f;} .subscription-container .subscription-card .c-title .canceled{background: rgba(12, 57, 88, 50%);} .subscription-container .subscription-card li{font-size: 18px; margin-bottom: 5px;} .subscription-container .subscription-card ul{margin-bottom: 20px;} .choose-plan.common-btn.selected{opacity: .4;} .upgrade-plan .custom-pop-up .modal-title-btn .not-now:hover, .choose-plan.common-btn.selected:hover{background: var(--primary-colors); opacity: .5; color: #fff; border-color: var(--primary-colors);} .trial-ends li{font-size: 18px; margin-bottom: 6px;} .trial-ends {margin-bottom: 20px;} .trial-ends li img{height: 30px; width: auto; margin-right: 10px;} .upgrade-plan #paymentModal .modal-dialog { max-width: 512px;} .upgrade-plan .complete-payment-flow{ background: rgba(12, 57, 88, 3%);padding: 20px;border-radius: 20px; margin-bottom: 15px; border: solid 1px rgba(12, 57, 88, 15%);} .upgrade-plan .complete-payment-flow .free-trial-flow .box h2{font-size: 16px; font-weight: 500;} .upgrade-plan .complete-payment-flow .free-trial-flow .box h6{font-size: 16px; font-weight: 500; color: rgba(12, 57, 88, 80%);} .upgrade-plan .complete-payment-flow .free-trial-flow .box p{font-size: 16px; font-weight: 400; color: rgba(12, 57, 88, 60%); margin: 0;} .upgrade-plan .complete-payment-flow .free-trial-flow .box{position: relative; padding-bottom: 30px; padding-left: 40px;} .upgrade-plan .complete-payment-flow .free-trial-flow .box:after{content: ''; position: absolute; left: 11px; height: 100%; width: 3px; background: rgba(12, 57, 88, 10%); top: 0;} .upgrade-plan .complete-payment-flow .free-trial-flow .box::before {content: ''; position: absolute; left: 0; width: 24px; height: 24px; background:#fff; border: solid 2px rgba(12, 57, 88, 10%); top: 0; border-radius: 50px; z-index: 1;} .upgrade-plan .complete-payment-flow .free-trial-flow .box:last-of-type:after{display: none;} .upgrade-plan .complete-payment-flow .free-trial-flow .box:first-of-type:before{background: var(--secondary-colors); border-color: var(--secondary-colors);} .upgrade-plan .complete-payment-flow .free-trial-flow .box:nth-child(1):after{background: var(--secondary-colors);} .upgrade-plan .complete-payment-flow .free-trial-flow .box:nth-child(2):before{border-top-color: var(--secondary-colors); } .upgrade-plan .complete-payment-flow .free-trial-flow .box:last-of-type{padding-bottom: 0;} .upgrade-plan #paymentModal .modal-body{padding: 15px;} .upgrade-plan .payment-details{flex: 0 0 380px;} .upgrade-plan .custom-pop-up .modal-title-btn{display: flex; align-items: center; gap: 20px;} .upgrade-plan .custom-pop-up .modal-title-btn .not-now{opacity: .4;} .subscription-container{margin-bottom: 30px;} .common-btn.activated{opacity: .4;} #subscriptionDetailsModal .modal-dialog{max-width:1050px} #paymentDetailsModal .modal-dialog{max-width:850px} .custom-pop-up .subscription-details h2{font-size: 20px; font-weight: 600; margin-bottom: 10px; background: rgba(12, 57, 88, 10%); padding: 5px; color:var(--primary-colors);} .custom-pop-up .subscription-details ul li{margin-bottom: 10px; font-size: 16px; color: rgba(12, 57, 88, 80%);} .custom-pop-up .subscription-details ul li:last-of-type{margin: 0;} .custom-pop-up .subscription-details ul li strong{color: var(--primary-colors);} .custom-pop-up .all-subscription{display: flex; gap: 16px; flex-wrap: wrap; border-right: solid 1px #f1f1f1;} .custom-pop-up .subscription-details{flex: 1; border: solid 1px rgba(12, 57, 88, 10%); padding: 15px;} /* payment-subscription-details */ .payment-successful .test-details{background: rgba(35, 206, 112, 60%); padding: 15px 20px;} .payment-successful.failed .test-details{background: rgba(211, 47, 47, 80%); padding: 15px 20px;} .payment-successful.failed .test-details *{color: #fff;} .payment-successful .test-details .left h3{margin-bottom: 5px;} .payment-subscription-details{margin-bottom: 30px;} .payment-subscription-details .title h5{font-size: 22px; margin-bottom: 20px; border-bottom: solid 1px rgba(12, 57, 88, 20%); padding-bottom: 15px;} .payment-subscription-details .payment-data{display: flex; gap: 20px; justify-content: space-between;} .payment-subscription-details .d-details{flex: 1; border: solid 1px rgba(12, 57, 88, 10%); padding: 15px;} .payment-subscription-details .d-details ul li{margin-bottom: 10px; font-size: 16px; color: rgba(12, 57, 88, 80%);} .payment-subscription-details .d-details ul li strong{color: var(--primary-colors);} .payment-subscription-details .d-details ul li:last-of-type{margin: 0;} #subscriptionDetailsModal .subscription-details h2{font-size: 20px; font-weight: 600; margin-bottom: 10px;} #subscriptionDetailsModal .subscription-details ul li{margin-bottom: 4px; font-size: 16px;} #subscriptionDetailsModal .all-subscription{display: flex; gap: 30px; flex-wrap: wrap; border-right: solid 1px #f1f1f1;} #subscriptionDetailsModal .subscription-details{flex: 1;} /* tab-container */ .tab-container {margin-bottom: 20px;} .tab-container ul{display: flex; gap: 10px; align-items: center; flex-wrap: wrap;} .tab-container ul li{font-weight: bold;font-size: 16px;text-transform: uppercase;color: var(--primary-colors);padding: 6px 26px;background: #FFFFFF;border: 1px solid var(--primary-colors);border-radius: 12px; cursor: pointer;line-height: 21px} .tab-container ul li.active, .tab-container ul li:hover{background: var(--secondary-colors);} /* master-subject */ .master-subject{background: rgba(12, 57, 88, 4%);padding: 12px;border-radius: 12px; margin-bottom: 20px;} .master-subject .title{margin-bottom: 16px;} .master-subject .title h5{margin-bottom: 5px; font-size: 24px; font-weight: bold; text-transform: capitalize;} .master-subject .title p{font-size: 18px; margin: 0;} .master-subject .attempt{background: var(--primary-colors);border-radius: 16px; border: none; font-weight: bold; font-size: 18px; color: #fff; padding: 10px 26px; line-height: 18px; width: 100%; display: flex; justify-content: space-between; gap: 20px; transition: var(--transition);} .master-subject .attempt[disabled]{opacity: .6; cursor: not-allowed; filter: saturate(0); background: #555555 !important;} .master-subject .attempt[disabled]:hover{opacity: .6; cursor: not-allowed; filter: saturate(0);} .master-subject .attempt.easy{background: linear-gradient(180deg, #23CE70 0%, #0F5C41 100%); transition: var(--transition);} .master-subject .attempt.easy:hover{background: #178a54; transition: var(--transition);} .master-subject .attempt.medium{background: linear-gradient(180deg, #CE5023 0%, #822B0B 100%);} .master-subject .attempt.medium:hover{background: #a93e17;transition: var(--transition);} .master-subject .attempt.hard{background: linear-gradient(360deg, #980083 0%, #DC0068 100%);} .master-subject .attempt.hard:hover{background: #b20079;transition: var(--transition);} .master-subject ul li{margin-bottom: 8px;} .master-subject ul li:last-of-type{margin-bottom: 0;} .master-subject .attempt span{font-size: 15px; font-weight: 500;} .main-quiz-area{display: flex; gap: 20px;} .main-quiz-area .left{flex: 1;} .main-quiz-area .right{flex: 0 0 300px;} .custom-table thead th img{height: 15px; width: auto;} /* start-quiz-popup */ .start-quiz-popup .customize-your-quiz{display: flex;} .start-quiz-popup .customize-your-quiz .left-img, .start-quiz-popup .customize-your-quiz .right-form{flex: 1;} .start-quiz-popup .modal-dialog{max-width: 1065px; margin-top: 100px;} .start-quiz-popup .modal-body{padding: 0;} .start-quiz-popup .left-img{position: relative;} .start-quiz-popup .left-img img{position: absolute; height: 100%; width: 100%; object-fit: cover;} .start-quiz-popup .left-img h6{font-size: 20px; font-weight: bold; padding: 15px 30px; border-radius: 12px; border: solid 4px var(--secondary-colors);position: absolute; background-color: #ffffff; bottom: 30px; left: 0; right: 0; margin: auto; display: table;} .start-quiz-popup .right-form {padding: 30px;} .start-quiz-popup .right-form .title{margin-bottom: 30px;} .start-quiz-popup .right-form .title h2{font-size: 22px; font-weight: bold; margin-bottom: 5px;} .start-quiz-popup .right-form .title p{font-size: 16px; font-weight: 500;} .start-quiz-popup .right-form .common-btn{width: 100%; border-radius: 12px;} .start-quiz-popup .right-form .form-group:last-of-type{margin-bottom: 0;} .start-quiz-popup .right-form .form-group span{font-size: 16px; color: var(--primary-colors); font-weight: 500; display: flex; justify-content: end; gap: 5px;} .start-quiz-popup .start-quiz-btn{display: flex; gap: 15px; align-items: center;} .start-quiz-popup .start-quiz-btn .common-btn{flex: 1;} .start-quiz-popup .start-quiz-btn .common-btn.line-btn{max-width: 150px;} /* syllabus-tab nav-tabs color */ .syllabus-tab .nav-tabs .nav-link.summary:hover, .syllabus-tab .nav-tabs .nav-link.summary.active{background: #ff930f;} .syllabus-tab .nav-tabs .nav-link.quiz-only:hover, .syllabus-tab .nav-tabs .nav-link.quiz-only.active{background: #E4D4FA;} .syllabus-tab .nav-tabs .nav-link.ask-a-doubt:hover, .syllabus-tab .nav-tabs .nav-link.ask-a-doubt.active{background: #D4F5E0;} .syllabus-tab .nav-tabs .nav-link.revision-notes:hover, .syllabus-tab .nav-tabs .nav-link.revision-notes.active{background: #c9dbff;} .syllabus-tab .nav-tabs .nav-link.explain-full-chapter:hover, .syllabus-tab .nav-tabs .nav-link.explain-full-chapter.active{background: #FFE7B2;} .syllabus-tab .nav-tabs .nav-link.slides:hover, .syllabus-tab .nav-tabs .nav-link.slides.active{background: #C7F4FB;} .start-quiz-popup label{font-size: 16px;} /* Toggle switch style */ .switch {position: relative;display: inline-block;width: 46px;height: 24px;} .switch input {opacity: 0;width: 0;height: 0;} .slider {position: absolute;top: 0; left: 0;right: 0; bottom: 0;background-color: #ccc;transition: .4s;border-radius: 24px;} .slider:before {position: absolute;content: "";height: 18px;width: 18px;left: 3px;bottom: 3px;background-color: white;transition: .4s;border-radius: 50%;} input:checked + .slider {background-color: #22c55e;} input:checked + .slider:before {transform: translateX(22px);} .difficulty-radio-group {display: flex;} .difficulty-radio-group input[type="radio"] {display: none;} .difficulty-radio-group label {flex: 1;text-align: center;padding: 10px;border: 1px solid #f0b400;background-color: #fff;color: var(--primary-colors);font-weight: 600;cursor: pointer;transition: 0.3s;} .difficulty-radio-group input[type="radio"]:checked + label {background-color: #f0b400;color: var(--primary-colors);} .enable-timer{display: flex; align-items: center;gap: 20px;} .enable-timer label{margin: 0;} .difficulty-radio-group label:first-of-type{border-radius: 12px 0 0 12px;} .difficulty-radio-group label:last-of-type{border-radius: 0 12px 12px 0;} /*Range style*/ .range-input{appearance: none;width: 100%;height: 10px;border-radius: 5px;background: #d7dcdf;outline: none;padding: 0;margin: 0;} /*Range black ⚫ thumb*/ .range-input::-webkit-slider-thumb {appearance: none;width: 20px;height: 20px;border-radius: 100%;background: var(--secondary-colors);cursor: pointer;transition: background 0.15s ease-in-out;} .range-input::-webkit-slider-thumb:hover {transform: scale(1.1);background: var(--secondary-colors);} .range-input:active::-webkit-slider-thumb {transform: scale(1.1);background: var(--secondary-colors);} .syllabus-tab .key-ideas ul li.active {color: #04afd3; font-weight: 600;} .red-tooltip + .tooltip > .tooltip-inner, .red-tooltip + .tooltip > .tooltip-arrow {background: red;} .tooltip-inner {background-color: var(--primary-colors);color: #fff;} .accordion#frequentlyAskedQuestions {width: 100%;} .dashboard .dashboard-inner .card.daily-activity{background: #E0F0FF;} .dashboard .dashboard-inner .card .daily-all-activity{display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; } .dashboard .daily-activity .box{display: flex; align-items: center; gap: 10px;} .dashboard .daily-activity .box .activity{flex: 1;} .dashboard .daily-activity .box-icon img{width: 100%; height: auto;} .dashboard .daily-activity .box-icon{width: 50px; height: 50px; border-radius: 12px; border: solid 2px rgba(12, 57, 88, 10%); padding: 8px;} .dashboard .daily-activity p{ font-weight: normal; font-size: 16px; margin-bottom: 5px;} .dashboard .daily-activity h4{font-size: 18px; font-weight: bold; margin: 0;} .dashboard .daily-activity .score{font-size: 18px; background: var(--secondary-colors); font-weight: bold; color: var(--primary-colors); border-radius: 12px; padding: 10px; line-height: normal; margin: 0; width: 105px; text-align: center; display: block; margin-left: 10px;} .dashboard .small-box .card.user-message{flex:0 0 426px;} .dashboard .small-box .card.user-message .title{justify-content: start; gap: 15px;} /* streaks-milestones */ .streaks-milestones .all-box{display: flex; justify-content: space-between; gap: 10px;} .streaks-milestones .box{display: flex; padding: 20px; border-radius: 12px; align-items: center; gap: 15px;} .streaks-milestones .box.milestone{background: #FF9B9B;} .streaks-milestones .box.milestone .common-btn{margin-left: 20px;} .streaks-milestones .box.streak-login{background: #8678FF;} .streaks-milestones .box.study{background: #4DCAA5;} .streaks-milestones .box h5{font-size: 24px; color: #fff; margin-bottom: 5px; font-weight: bold;} .streaks-milestones .box p{font-size: 20px; color: #fff; margin-bottom: 0; font-weight: normal;} .streaks-milestones .box img{width: 42px; height: auto;} .streaks-milestones .box *{white-space: nowrap;} .dashboard .streaks-milestones .title{ align-items: center;} .dashboard .main-box .card.hours-spent-performance{flex: 0 0 500px;} .dashboard .main-box .peer-comparison {flex: 0 0 436px;} .dashboard .main-box .peer-comparison ul li{display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: solid 1px rgba(12, 57, 88, 20%); padding-bottom: 10px; margin-bottom: 10px;} .dashboard .main-box .peer-comparison ul li:last-of-type{margin: 0; padding: 0; border: none;} .dashboard .main-box .peer-comparison ul li h2{font-size: 18px; font-weight: 600; margin: 0;} .dashboard .main-box .peer-comparison ul li p{margin: 0; font-size: 16px; font-weight: 600; white-space: nowrap;} .dashboard .main-box .peer-comparison ul li img{width: 45px; height: 45px; object-fit: cover; object-fit: cover; border-radius: 50%;} .dashboard .main-box .peer-comparison ul li p img{ width: 30px;height: auto;margin-right: 8px;} .dashboard .main-box .peer-comparison ul li .profile-data{display: flex; gap: 20px; align-items: center;} .dashboard .main-box .peer-comparison ul li .profile-data span{font-size: 16px; display: block; font-weight: 600; color: var(--primary-colors);} .dashboard .smart-recommendations .all-box{display: flex; gap: 10px;} .dashboard .smart-recommendations .box{background: #E6F0FF;border-radius: 8px; overflow: hidden; } .dashboard .smart-recommendations .box .list{padding: 20px; text-align: center;} .dashboard .smart-recommendations .box .list .common-btn{display: table; margin: 10px auto 0;} .dashboard .smart-recommendations .box .list p, .dashboard .smart-recommendations .box .list h6{font-size: 18px; font-weight: bold; margin: 0;} .dashboard .smart-recommendations .box .list p{font-weight: normal; margin-bottom: 5px;} .dashboard .smart-recommendations .box span{font-size: 16px; color: #fff; padding: 10px; display: block; width: 100%; background: var(--primary-colors); text-align: center;} .dashboard .main-box .card.user-message .title{margin-bottom: 40px;} header .new-prompt{width: 400px;} header .new-prompt .chat-area .message-type .form-control{box-shadow: none;} header .total-point{display: flex; overflow: hidden; border-radius: 12px;align-items: center; height: 100%; border: solid 1px var(--secondary-colors);} header .total-point h2{font-size: 18px; font-weight: 900; margin: 0; color: var(--primary-colors); padding: 15px 20px 15px 10px;} header .total-point span{width: 50px;background: var(--secondary-colors);border-radius: 12px;height: 100%;display: flex;justify-content: space-around;align-items: stretch;gap: 0;padding: 8px;} header .total-point span img{width: 100%;} header .feature-limits{background-color: var(--primary-colors); border-radius: 12px; height: 100%; padding: 6px 20px; display: flex; align-items: center; gap: 15px; font-weight: 900; color: #fff; font-size: 18px; cursor: pointer;} header .feature-limits img{ animation: flicker .8s infinite alternate;} @keyframes flicker { 0% { opacity: 0.8; filter: drop-shadow(4px 4px 6px var(--secondary-colors)); transform: scale(1); } 100% { opacity: 1; filter: drop-shadow(4px 4px 6px var(--secondary-colors)); transform: scale(.9);} } .data-title h4 {font-size: 20px;font-weight: bold; margin: 0;} .data-title {margin-bottom: 15px;border-bottom: solid 1px rgba(12, 57, 88, 20%); display: flex; gap: 10px; align-items: center; padding-bottom: 10px;} .data-title img{width: 26px;} .data-box {display: grid;grid-template-columns: 1fr 1fr;gap: 20px; margin-bottom: 20px;} .data-box.full {grid-template-columns: 1fr;} .data-box .box{border: solid 1px rgba(12, 57, 88, 20%); padding: 20px; position: relative;} .data-box .box ul li{list-style: none;position: relative; padding-left: 20px;} .data-box .box ul li:after{ content: '';position: absolute;left: 0;width: 8px;height: 8px;border-radius: 50%;background: var(--secondary-colors);top: 8px; transition: var(--transition);} .data-box .box ul li:hover:after{transform: scale(2.2); transition: var(--transition); background-color: var(--primary-colors);} .syllabus-tab .side-content .data-box .box ul.point{padding: 0;} .next-steps{background: rgba(250, 187, 24, 20%); padding: 10px 20px; margin-top: 20px;} .section-title{ margin-bottom: 20px;border-bottom: solid 1px rgba(12, 57, 88, 20%); padding-bottom: 10px;} .section-title h2{font-size: 22px !important; margin: 0 !important; font-weight: bold;} .result-show ul li.correct:hover{cursor: pointer} /*background-color: #eafff5; */ .result-show ul li.incorrect:hover{cursor: pointer} /*background-color: #ffecec; */ /*.quiz-summary ul li.correct:hover{background-color: transparent; cursor: initial} .quiz-summary ul li.incorrect:hover{background-color: transparent; cursor: initial}*/ /*confirmation box buttons*/ #confirmModal .modal-body{font-size: 20px} .confirm-btn .confirm{background: var(--secondary-colors);text-transform: uppercase; border-radius: 30px; font-size: 15px; color: var(--primary-colors); font-weight: bolder; padding: 6px 26px; transition: var(--transition); border: solid 1px var(--secondary-colors); line-height: 18px; text-align: center;} .confirm-btn .confirm:hover{background: transparent; transition: var(--transition); opacity: .8;} .confirm-btn .cancel{background: var(--primary-colors);text-transform: uppercase; border-radius: 30px; font-size: 15px; color: #ffffff; font-weight: bolder; padding: 6px 26px; transition: var(--transition); border: solid 1px var(--primary-colors); line-height: 18px; text-align: center;} .confirm-btn .cancel:hover{background: transparent; transition: var(--transition); opacity: .8; color: var(--primary-colors);} /*animate timer when 15 seconds are left*/ @keyframes zoomInOut { 0%, 100% {transform: scale(1);} 50% {transform: scale(1.3);}} .live-timer .zoom-warning {animation: zoomInOut 1s infinite;color: red !important; font-weight: bold;} .test-details .right .level-box{padding: 12px 10px 12px 20px; position: relative;} .test-details .right .level-box:after{content: ''; position: absolute; left: 0; height: 100%; background: rgba(12, 57, 88, 20%); width: 1px; top: 0;} .slide-btn .common-btn {width: 120px;} .syllabus-tab .side-content ul.point {list-style: disc; margin: 0;} .syllabus-tab .side-content .section-definitions:not(:first-child) {margin-top: 30px;} /* header-ask-anything */ .header-ask-anything {position: relative;} .header-ask-anything .form-group{position: relative; margin: 0;} .header-ask-anything .btn{position: absolute; top: 7px; right: 7px; z-index: 1; padding: 0;} .header-ask-anything .btn:hover{opacity: .8;} .header-ask-anything .form-control{border-radius: 50px; background: #fff; width: 420px; background-image: url(../img/ask-search.svg);background-repeat: no-repeat;background-size: 25px;background-position: 20px; padding: 12px 60px;} /* feature-limits-pop-up */ .feature-limits-pop-up .all-access-card .box{position: relative;} .feature-limits-pop-up .all-limits{display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;} .feature-limits-pop-up .all-limits .box{padding: 15px; border: solid 1px var(--secondary-colors); border-radius: 12px; position: relative; overflow: hidden;} .feature-limits-pop-up .all-limits .box .title{ display: flex; gap: 10px; align-items: center; margin-bottom: 12px;} .feature-limits-pop-up .all-limits .box .title h5{font-size: 18px; font-weight: 600; color: var(--primary-colors); margin: 0;} .feature-limits-pop-up .all-limits .box .title img{width: 24px; height: 24px; object-fit: none; } .feature-limits-pop-up .modal-dialog{max-width: 860px; margin: 60px 30px 0 auto;} .feature-limits-pop-up .all-limits .box ul{display: flex; justify-content: space-between; font-size: 16px; color: var(--primary-colors);} .feature-limits-pop-up .all-limits .box ul li{margin-bottom: 4px;} .feature-limits-pop-up .all-limits .box ul:last-of-type li{margin: 0;} .feature-limits-pop-up .modal-content{border-radius: 12px;} .feature-limits-pop-up .available-in{position: absolute;inset: 0;background: rgba(255, 255, 255, 80%);width: 100%;height: 100%;z-index: 1;margin: auto;display: flex;flex-direction: column;align-items: center;justify-content: center;} .feature-limits-pop-up .available-in p{font-size: 18px; margin-bottom: 5px; color: var(--primary-colors);} .feature-limits-pop-up .available-in h2{font-size: 22px; font-weight: 900; color: var(--primary-colors);} .feature-limits-pop-up .all-limits .box.end-limit{border-color: rgba(250, 187, 24, 20%);} #motivational-line {font-weight: 400;font-size: 16px;letter-spacing: .4px;background: rgba(12, 57, 88, 8%);padding: 3px 20px;border-radius: 50px;color: var(--primary-colors);line-height: normal; text-transform: capitalize;} .no-data-found {text-align: center;} .no-data-found .what-can{max-width: 500px; margin: 0 auto; display: block; width: 100%;} .no-data-found h2{font-size: 30px;max-width: 400px;margin: 20px auto 30px auto;font-weight: bold; padding: 0; border: none;} .no-data-found .common-btn {max-width: 700px;display: block;margin: 0 auto;padding: 10px;border-radius: 20px;line-height: normal;} .no-data-ask-question img{width: 500px;margin: 30px auto;} .no-data-ask-question-img{display: none;} .new-prompt.ask-anything .syllabus-no-data{display: none;} .syllabus-tab .new-prompt.ask-anything .chat-area .welcome-word .syllabus-no-data{display: block;} .syllabus-tab .new-prompt .welcome-word img {max-height: 500px;margin: 0 auto;margin-bottom: 0; width: auto; height: auto;} /* dashboard learning-journey */ .dashboard .learning-journey .circle-progress::before{background: #fff;} .dashboard .learning-journey .total-point{font-size: 28px; color: var(--primary-colors); padding: 20px 10px; text-align: center; border-radius: 20px; background: var(--secondary-colors); font-weight: bold; margin: 0 auto; line-height: normal;} .dashboard .learning-journey .chapter-bar{display: flex;justify-content: space-around;align-items: flex-start;gap: 20px;} .dashboard .learning-journey .chapter-bar ul li p{white-space: nowrap;} .dashboard .learning-journey .all-progress{border-right: solid 1px rgba(12, 57, 88, 20%); padding-right: 20px;} .dashboard .learning-journey .all-progress:last-of-type{border-right: none; padding-right: 0;} .dashboard .syllabus-progress .title p, .dashboard .learning-journey .title p{color: var(--primary-colors); font-weight: 500;} .dashboard .learning-journey .all-progress h5{font-weight: bold;font-size: 18px;margin-bottom: 15px;} .custom-table.chapter-list-table td:nth-child(2) {min-width: 160px;} .login .login-details .phn-num .form-control{height: 50px; font-size: 18px;} .history-link{cursor: pointer;} .all-chart{height: 100%;} .dashboard .all-chart .chart-container{height: calc(100% - 55px);} /* feature-limits-pop-up */ .feature-limits-pop-up .why-premium-table span{ border-radius: 50px;color: var(--primary-colors);aspect-ratio: 1;width: 30px;display: block;height: 100%;display: inline-flex;align-items: center;justify-content: center;margin-right: 8px;} .feature-limits-pop-up .why-premium-table span.used{background: rgba(255, 105, 105, 0.3);} .feature-limits-pop-up .why-premium-table span.left{background: rgba(77, 202, 165, 0.3);} .feature-limits-pop-up .why-premium-table span.left.reached{ width: auto;height: auto;aspect-ratio: auto;padding: 4px 18px;display: block;white-space: nowrap; background: #eb423f; color: #fff; display: inline-block;} .feature-limits-pop-up .why-premium-table span.freemium{background: var(--primary-colors); color: #fff;} .feature-limits-pop-up .hit-limit{font-size: 15px; font-weight: 600; text-align: center; margin: 30px 0 0; color: #eb423f;} .feature-limits-pop-up .why-premium-table span.premium{background: var(--secondary-colors);} .feature-limits-pop-up .why-premium{background: rgba(250, 187, 24, 20%); padding: 15px 20px; border-radius: 12px; margin-bottom: 15px; border: solid 1px var(--secondary-colors);} .feature-limits-pop-up .why-premium h2{font-size: 18px; font-weight: 500; margin-bottom: 5px; color: var(--primary-colors); } .feature-limits-pop-up .why-premium h2 strong{font-weight: bold; text-transform: uppercase;} .feature-limits-pop-up .why-premium p{line-height: 23px; font-size: 16px; color: rgba(12, 57, 88, 80%); margin: 0;} .feature-limits-pop-up .why-premium ul{display: flex; justify-content: space-between; margin-top: 15px; flex-wrap: wrap; gap: 15px;} .feature-limits-pop-up .why-premium ul li{font-size: 16px; color: var(--primary-colors); font-weight: 500;} .feature-limits-pop-up .why-premium ul li.trial{color: var(--red-color);display: flex; gap: 10px; align-items: center;} .feature-limits-pop-up .why-premium-table table th{font-size: 16px;} .feature-limits-pop-up .why-premium-table table td{font-size: 16px; padding: 8px 12px;} .feature-limits-pop-up .common-btn{padding: 6px 14px; font-size: 15px;} .feature-limits-pop-up .why-premium-table table td img{width: 22px; height: auto; margin-right: 4px;} .feature-limits-pop-up.freemium .modal-content{background: #FFF9EC;} /* loader animation */ .feature-limits-pop-up .not-available{display: inline-flex;align-items: center;text-transform: uppercase;padding: 5px;gap: 10px;font-weight: bold;border: solid 1px #eb423f;justify-content: center;color: #eb423f;white-space: nowrap;width: 100%; border-radius: 50px;} .feature-limits-pop-up .not-available p{margin: 0;background: #eb423f;color: #fff;padding: 4px 10px;font-weight: bolder;text-shadow: 0px 0px 2px #eb423f; width: 110px; text-align: center; border-radius: 50px;} .feature-limits-pop-up .not-available img{height: 20px;width: auto;margin: 0;} .feature-limits-pop-up .custom-table .not-available{border-color: var(--primary-colors); color: var(--primary-colors);} /* loader animation */ .loading *{font-family: var(--font-family) !important;} .loading {font-weight: 800;position: fixed;inset: 0;margin: auto;display: flex;justify-content: center;align-items: center; font-size: 80px; gap: 10px;} #preloader{position: fixed;color:var(--primary-colors);inset: 0;margin: auto;z-index: 9999; background: rgba(250, 187, 24, 92%);} /* loader animation */ .logoLoader span {animation: logoLoader 1.8s infinite alternate;} .logoLoader span:nth-child(1) {animation-delay: 0s;} .logoLoader span:nth-child(2) {animation-delay: 0.1s;} .logoLoader span:nth-child(3) {animation-delay: 0.2s;} .logoLoader span:nth-child(4) {animation-delay: 0.3s;} .logoLoader span:nth-child(5) {animation-delay: 0.4s;} .logoLoader span:nth-child(6) {animation-delay: 0.5s;} .logoLoader span:nth-child(7) {animation-delay: 0.6s;} .logoLoader span:nth-child(8) {animation-delay: 0.7s;} .logoLoader span:nth-child(9) {animation-delay: 0.8s;} .logoLoader span:nth-child(10) {animation-delay: 0.9s;} .logoLoader span:nth-child(11) {animation-delay: 0.10s;} @keyframes logoLoader { 0% {opacity: 1;} 100% {opacity: 0;} } .feature-limits-pop-up .modal-header{flex-wrap: wrap; gap: 15px;} .get-available-premium{display: flex;gap: 10px;justify-content: center;align-items: center; flex-wrap: wrap;} .get-available-premium .not-available{width: auto; padding: 5px 5px 5px 20px;} .custom-table.chapter-list-table table thead th:last-of-type, .custom-table.chapter-list-table table tbody td:last-of-type{position: sticky; right: 0; z-index: 1; background: #F7F9FA; text-align: center;} .custom-table.chapter-list-table table thead th:last-of-type{background: #fff;} .feature-checklist-table.custom-table table tbody tr td{ min-width: 200px;} .subscription-plan .validity p{margin: 0;} .payment-plans.test-details select.form-control{min-width: 200px;} .get-available-premium .common-btn{white-space: nowrap; margin-right: 10px;} .feature-limits-pop-up .why-premium-table span.limit{background: #eb423f; color: #fff;} .ask-anything header .header-ask-anything {visibility: hidden;} .flashcards-dashboard.top-filter h1{ margin: 0 0 10px; padding: 0;} .flashcards-dashboard.top-filter p{ margin: 0;} .flashcards .test-details{margin: 0 0 20px;} #premiumPlan{scroll-margin-top: 100px;} .payment-plans.test-details .right .form-group{width: 100%;} .responsive-vertical-table {margin: auto;width: 100%;border-collapse: collapse;} .responsive-vertical-table tr:nth-child(odd):not(:first-child) {background-color: #ebf3f9;} .responsive-vertical-table th {display: none;} .responsive-vertical-table td {display: block;} .responsive-vertical-table td:before {content: attr(data-th) ": ";font-weight: 600;width: 160px;display: inline-block;color: #000;} .responsive-vertical-table th, .responsive-vertical-table td {text-align: left;} .responsive-vertical-table {color: #333;border-radius: .4em;overflow: hidden;} .responsive-vertical-table tr {border-color: #bfbfbf;} .responsive-vertical-table th, .responsive-vertical-table td {padding: .5em 1em;} .responsive-vertical-table th{background: #fff;} @media screen and (max-width: 768px) { .responsive-vertical-table tr:nth-child(2) {border-top: none;} } @media screen and (min-width: 767px) { .responsive-vertical-table tr:hover:not(:first-child) {background-color: #d8e7f3;} .responsive-vertical-table td:before {display: none;} .responsive-vertical-table th, .responsive-vertical-table td {display: table-cell;padding: .25em .5em;} .responsive-vertical-table th:first-child, .responsive-vertical-table td:first-child {padding-left: 0;} .responsive-vertical-table th:last-child, .responsive-vertical-table td:last-child {padding-right: 0;} } .header-ask-anything .mobile-ask-anything-redirect span{display: none;} .new-prompt.flashcards.syllabus .sidebar-nav a.sidebar-icon img{width: auto;} .new-prompt.flashcards.syllabus .sidebar-nav a.sidebar-icon{ padding: 0;display: flex !important;justify-content: center;align-items: center;} .new-prompt.syllabus .sidebar-nav .incorrect-answers-header a{padding: 0;} .new-prompt.revision-notes .sidebar-nav ul.sub-menu ul.sub-menu{padding: 15px; padding-top: 0;} /* user-desktop-screen-pop-up */ .user-desktop-screen-pop-up .modal-dialog{max-width:650px; margin: 40px auto;} .user-desktop-screen-pop-up .modal-body{padding: 0;} .user-desktop-screen-pop-up .inner{display: flex; align-items: center; background: var(--secondary-colors); position: relative; z-index: 1; padding: 35px; gap: 30px; justify-content: center;} .user-desktop-screen-pop-up .inner:after{content: ''; width: 60%; height: 100%; top: 0; left: 0; background: var(--primary-colors); position: absolute; z-index: -1;} .user-desktop-screen-pop-up .text h5{font-size: 20px; text-transform: uppercase; letter-spacing: 1px; font-weight: bolder; color: #fff; z-index: 1; position: relative; margin: 0; line-height: 30px;} .user-desktop-screen-pop-up .desktop img{width: auto; height: 220px;} .user-desktop-screen-pop-up .btn-close {background: #0c3958;opacity: 1;width: 20px;height: 20px;border-radius: 50px;display: flex;justify-content: center;align-items: center;padding: 7px;top: 10px;} .user-desktop-screen-pop-up .btn-close img{filter: brightness(100);} .user-desktop-screen-pop-up .modal-header h2{font-size: 22px;} .user-desktop-screen-pop-up p{text-align: center; margin: 0; padding: 10px; font-weight: 500;} .ask-anything .message-text h1 {font-size: 22px;font-weight:500; margin: 20px 0 10px;} .ask-anything .message-text br {display:none} .ask-anything .message-text ul{margin: 20px 0; padding-left: 2rem;} .ask-anything .message-text ul li{list-style: disc;} .ask-anything .message-text li{font-weight: 600;} .ask-anything .message-text ul li{font-weight: normal;} /* introduction-video */ .introduction-video {position: relative; display: none;} .introduction-video video{width: 100%;} @keyframes introductionVideoBtn { 50% {opacity: 0;} 100% {opacity: 1;} } .congratulations-pop-up .video-btn{display: flex; gap: 10px; font-size: 14px; margin-top: 20px;} .congratulations-pop-up .common-btn{padding: 10px; font-size: 14px;} .congratulations-pop-up .after-video-end{display: none;} /* .video-ended .congratulations-pop-up .skip-video{display: none;} */ .video-ended .congratulations-pop-up .after-video-end{display: block;} /* .introduction-video .sound{width: 46px;height: 46px;position: absolute;bottom: 100px;right: 20px;background: #fff;border-radius: 50px; cursor: pointer; animation: bounce 1s ease infinite;} */ .congratulations-pop-up .video-btn img.muteSound{width: 20px; margin-right: 8px;} .introduction-video .sound img{width: 100%;} .introduction-video .sound.sound-off .unmute{display: none;} .introduction-video .sound.sound-off .mute{display: block;} .introduction-video .sound img{width: 20px; margin-right: 6px;} .introduction-video .sound.sound-on .unmute{display: block;} .introduction-video .sound.sound-on .mute{display: none;} .introduction-video .sound {display: flex;gap: 10px;white-space: nowrap;} /* get-started-now */ .checklists{display: flex; justify-content: space-between; align-items: center;} .checklists p{font-size: 18px;} .checklists h2{margin: 0;font-size: 24px;font-weight: 600;border: solid 1px rgba(250, 187, 24, 50%);border-radius: 50px;padding: 12px; color: var(--primary-colors);} .checklists h2 span{font-size:16px;} /* get-started-now */ .get-started-now .checklist {list-style: none;padding-left: 0;max-width: 320px;} .get-started-now .checklist li {background: #fff;padding: 10px;cursor: pointer;transition: background 0.2s;} .get-started-now .checklist li:hover {background: rgba(12, 57, 88, 10%); border-radius: 6px} .get-started-now .item-header {display: flex;align-items: center;margin-bottom: 5px;} .get-started-now .circle {width: 25px;height: 25px;border: 1px solid #4DCAA5;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-weight: bold;margin-right: 10px;background-color: white;flex-shrink: 0;} .get-started-now .checklist li.checked .circle {background-color: #4DCAA5;border: none;color: white;font-size: 12px;content: "✔";} .get-started-now .chk-title {font-size: 18px;flex-grow: 1;transition: color 0.3s;color: var(--primary-colors);font-weight: 600;} .get-started-now .checklist li.checked .chk-title {color: rgba(12, 57, 88, 40%);text-decoration: line-through;} .get-started-now .dashboard .history-summary .checklist li:last-child {padding: 10px;} .get-started-now .common-btn {padding: 5px 15px; font-size: 14px; margin-left: 38px;border-radius: 7px} .dashboard .card .dashboard-inner .get-started-now.mobile{display: none;} .only-for-breadcrumb{display: none;} /* all-access-card */ .all-access-card{display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px;} .all-access-card .box{background: #FFFFFF;border-radius: 16px; padding: 15px;border: 1px solid #e5e5e5;} .all-access-card .box h5{font-size: 20px; font-weight: 600; color: var(--primary-colors); margin-bottom: 10px;} .all-access-card .box p{font-size: 16px; color: rgba(12, 57, 88, 80%); margin: 0;} .all-access-card .box .limit{color: var(--red-color); font-size: 16px; font-weight: bold; margin-top: 5px; display: block; line-height: normal;} .all-access-card .box .per-day, .all-access-card .box .total-use{display: flex;justify-content: space-between;align-items: flex-start; gap: 10px;} .all-access-card .box .per-day{ justify-content: flex-start;} .all-access-card .box .per-day h5{margin-bottom: 5px;} .all-access-card .box .per-day img{height: 24px; width: auto;} .all-access-card .box .total-use .chapter-bar .circle-progress{width: 75px; height: 75px;} .all-access-card .box .total-use .chapter-bar .circle-progress::before{ width: 56px; height: 56px;} .all-access-card .box .total-use .chapter-bar .circle-progress::before{background: #fff;} .all-access-card .box .total-use .chapter-bar .circle-progress span{color: var(--primary-colors);} .all-access-card .box.today-limit .chapter-bar .circle-progress{background: var(--red-color);} .all-access-card .box.today-limit .total-use .chapter-bar .circle-progress span{color: var(--red-color);} .all-access-card .chapter-bar{margin: 0;} .unlock-premium{background: var(--primary-colors); border-radius: 16px; padding: 20px; display: flex; align-items: center; gap: 25px; justify-content: space-between;} .unlock-premium .common-btn{background: #fff; color: var(--primary-colors); white-space: nowrap;} .unlock-premium h6{font-size: 20px; color: #fff; font-weight: 500; margin-bottom: 10px;} .unlock-premium p{font-size: 18px; color: #fff; font-weight: 400; margin: 0;} .feature-limits-pop-up.premium .modal-content{background: #E1EFEB;} .feature-limits-pop-up.premium .why-premium{background: rgba(77, 202, 165, 0.2);border: 1px solid #4DCAA5;} .new-prompt .chat-history .sidebar-icon .all-subject{display: none; transition: var(--transition);} .subject-name-show .new-prompt .chat-history .sidebar-icon {width: auto !important;gap: 10px;color: #fff;padding: 0 15px;font-weight: 700; transition: var(--transition);} tr.final-amount {border-top: solid 1px rgba(12, 57, 88, 30%);} .final-amount span{font-weight: 800;font-size: 20px; } @keyframes finalAmount { 50% { background: rgba(12, 57, 88, 5%); } 100% { background: rgba(12, 57, 88, 10%); } } .mobile-red-close-btn{color: #fff;font-weight: 600;background: #eb423f;padding: 2px 10px;border-radius: 50px; font-size: 16px; display: none;} .cust-disable {background: #f5f5f5 !important; color: #a2a2a2 !important; cursor: no-drop !important;} .your-name p {font-size: 14px;margin-top: 6px;font-weight: 500;} /* limit-reached-pop-up */ .limit-reached-pop-up .close.line-btn{padding: 2px 11px;} .limit-reached-pop-up .content{text-align: center;} .limit-reached-pop-up .btn-box{display: flex; flex-direction: column; gap: 15px; margin-top: 20px;} .limit-reached-pop-up .btn-box .action-btn{ width: 100%;display: flex; gap: 10px;} .limit-reached-pop-up .btn-box .common-btn {width: 100%; padding: 8px 10px; font-size: 16px;} .limit-reached-pop-up h5 {font-size: 20px;max-width: 330px;margin: 0 auto 30px;line-height: 25px;} .premium-btn{background: #008000;border-color: #008000;color: #fff;text-transform: uppercase;letter-spacing: 0.6px;font-weight: 700;} .premium-color{color: #008000;} .limit-reached-pop-up .modal-header h2{ font-size: 22px; font-weight: 600; margin: 0;} .custom-modal-ui .left p{font-size: 18px; font-weight: 500; text-align: center;} .custom-modal-ui .left h3{color: #23CE70; font-size: 40px; font-weight: 900; margin: 20px 0;} .custom-modal-ui .btn-box{margin-top: 10px; display: flex; gap: 15px; flex-wrap: wrap; justify-content: flex-end;} .custom-modal-ui .btn-box .common-btn{border-radius: 12px; font-size: 18px; white-space: nowrap;} .custom-modal-ui .modal-dialog{max-width: 600px; position: relative;} .limit-popup-open .modal-backdrop{display: none;} .limit-popup-open .main-content .card:after{content: ''; position: absolute; inset: 0; margin: auto; background: rgba(12, 57, 88, 20%); z-index: 1;} .custom-modal-ui .modal-body{padding: 0;} .custom-modal-ui .modal-header h2{font-size: 40px; font-weight: bold;} .custom-modal-ui .modal-header{margin-bottom: 10px; padding: 0; border: none;} .custom-modal-ui .modal-content{padding: 30px; border: none;} .custom-modal-ui .get-email{margin: 30px 0 20px;} .custom-modal-ui .get-email span{margin-top: 10px; display: block;} .modal-open footer{z-index: 1;} /* mobile-tabs-intro */ .mobile-tabs-intro{background: #0f2bff;color: #fff;padding: 8px 20px;font-size: 15px;text-transform: capitalize;border-radius: 50px;position: fixed;bottom: 90px;z-index: 1;margin: 0 auto;left: 0;right: 0;visibility: hidden; opacity: 0; transition: var(--transition); display: inline-table; animation: 2s tabsIntro infinite;} .mobile-tabs-intro img{width: 16px; margin-right: 5px;} @keyframes tabsIntro { 0% { transform: scale(1); } 100% { transform: scale(1.1); } } /* partner-logo */ .login .logo-area {display: flex;justify-content: space-between;gap: 20px; margin-bottom: 20px;} .login .logo-area img{width: auto; height: 80px;} .login .partner-logo {position: fixed;top: 0;right: 0;margin: 50px;} .login .partner-logo img{height: 120px;} header .partner-logo img{height: 55px;} header .partner-logo {display: flex;align-items: center;} .side-all-menu .partner-logo{ display: none;position: absolute;top: 10px;z-index: 1;} .side-all-menu .partner-logo img{height: 50px;} .mobile-tabs-intro.home {bottom: auto;top: 52px;z-index: 990;right: auto;left: 80px;} /* trial-expiration-modal */ #trial-expiration-modal #secondary-options {display: none !important;} #trial-expiration-modal #secondary-options.show { display: flex !important; gap: 10px;flex-wrap: wrap;justify-content: space-between;} #trial-expiration-modal.custom-modal-ui .btn-box .common-btn, #trial-expiration-modal #secondary-options .common-btn{margin: 0;} #trial-expiration-modal.custom-modal-ui .btn-box .common-btn{display: block; text-align: center;} #trial-expiration-modal #initial-options.hide {display: none !important;} #trial-expiration-modal #initial-options {display: flex;gap: 10px;} #secondary-options.show .common-btn{width: 48%;} #trial-expiration-modal #secondary-options .line-btn{width: 100%;} /*help video*/ .help-video .header-title{background: rgba(12, 57, 88, 4%);padding: 15px 20px;border-radius: 12px;margin-bottom: 30px;} .help-video .header-title h2{font-size: 26px;font-weight: 600;margin: 0 0 10px; color: var(--primary-colors);} .help-video .header-title p{margin: 0;} .help-video .all-video{display: grid; gap: 20px; grid-template-columns: 1fr 1fr 1fr 1fr;} .help-video .all-video .box {display: flex;flex-direction: column;justify-content: space-between; padding: 20px;border: solid 1px rgba(12, 57, 88, 20%);border-radius: 8px;} .help-video .all-video .box h5{font-size: 20px;font-weight: 600;margin: 0 0 5px;} .help-video .all-video .box p{font-weight: 500; color: rgba(12, 57, 88, 60%);;} .help-video .all-video .box img{width: 100%; object-fit: cover; cursor: pointer;} .help-video .all-video .box .video{position: relative; cursor: pointer;} .video-pop-up .modal-body{padding: 0;} .video-pop-up .close{position: absolute;z-index: 1;background: #fff;right: -10px;top: -10px;} /* .video-pop-up .iframe-height {height: 100%;position: absolute;inset: 0;margin: auto;width: 100%; object-fit: cover; } */ .mobile.video-pop-up .modal-dialog{max-width: 450px; margin: 30px auto;} .video-pop-up .modal-content{background: transparent;} .iframe-height{ min-height: 80vh !important; } .desktop .modal-body .responsive-iframe { position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 aspect ratio */ height: 0;overflow: hidden; max-height: 80vh; /* never exceed 80% of viewport height */ } .desktop .modal-body .responsive-iframe iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: 0;} /*help video*/ .sidebar .sidebar-nav .nav-item.help-videos{display: none;} .flashcards-result .quiz-four-screen .test-name{ margin: 0 0 20px !important; width: auto;} .question-area .card-radio-group .checkbox .card-body:after{border-radius: 0;} .question-area .card-radio-group .checkbox .card-input-element:checked + .card:after{ background-image: url(../img/green-check.svg);background-repeat: no-repeat;background-size: 22px;BORDER: solid 2px var(--green-color);background-position: center;} .question-area .que .multi-correct {font-size: 15px; margin-top: 10px; color: #909090; margin-bottom: 0} .mobile-slide-select{display: none;} .subscription-card .see-all-plans .common-btn {padding: 8px 20px;} .get-started-now .common-btn img{animation: getStartedNow 2s infinite; margin-left: 10px; width: 12px;} @keyframes getStartedNow { 0% { transform: scale(0.8) rotate(0deg); } 50% { transform: scale(1.4) rotate(-50deg); } 100% { transform: scale(0.8) rotate(0deg); } } .syllabus-tab .side-content ul.point li {margin-bottom: 5px;} .slide-btn {display: flex;align-items: center;justify-content: center;gap: 10px;} /* .syllabus-tab p {font-size: 18px} */ #syllabus-tab-ul li:last-child {margin-left: auto;} .yellow-btn-arrow.btn.done img{width: 25px;} .yellow-btn-arrow.btn.done{padding: 6px 6px 6px 48px;} .yellow-btn-arrow.btn.done:focus, .yellow-btn-arrow.btn.done:hover, .yellow-btn-arrow.btn.done:active{outline: none; box-shadow: none;} #videoPopUp .modal-dialog{margin: 40px auto;} .login-details .title .partner-logo .partner-name {color: rgb(12 57 88);width: 200px;font-size: 15px;line-height: 18px;text-align: center;margin-top: .5rem} .login .partner-logo {text-align: center} .partner-name {letter-spacing: 0.5px !important;font-size: 15px;margin-bottom: 20px;padding: 10px;text-align: center;border-radius: 6px;line-height: 20px;color: #ffffff !important;background: #5e244b;} .main-box.on-checklist{ flex-direction: row-reverse;} .small-sidemenu .sidebar-menu-structure .partner-name{display: none;} .login .student-img.partner-sign-up img{width: 90%;object-fit: contain;position: absolute;inset: 0;margin: auto;height: 90%; object-position: center;} .login .student-img.partner-sign-up{height: calc(100vh - 80px);} .partner-logo-img{max-height: 80px;} .custom-modal-ui .modal-header h2{font-size: 24px;} .custom-modal-ui .right img {height: 200px;} /* .custom-modal-ui .left{margin-bottom: 20px;} */ .custom-modal-ui .right{margin-bottom: 20px; margin-top: 20px; text-align: center;} .custom-modal-ui .content{margin-bottom: 20px;} #limitReachedPopUp.modal{z-index: 1050;} /* refer style */ .refer-data {display: grid;gap: 15px;grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));width: 100%;} .page-title{background: rgba(12, 57, 88, 4%);padding: 20px;margin-bottom: 30px;border-radius: 16px;} .page-title h1{font-weight: bold;font-size: 24px;color: var(--primary-colors);margin-bottom: 10px;} .page-title p{font-size: 18px;font-weight: 500;color: var(--primary-colors);margin: 0;} .referral-data-and-share .refer-data{display: flex;flex-direction: column;justify-content: space-between;gap: 22px;} .refer-data .total-data{border-radius: 12px;padding: 20px 15px;background: rgba(253, 128, 135, 0.1);gap: 20px;display: flex;justify-content: flex-start;height: 100%;align-items: center;} .refer-data .total-data.earned{background: rgba(166, 213, 232, 0.2);} .refer-data .total-data.completed{background: rgba(31, 31, 31, 0.2);} .refer-data .total-data.pending{background: rgba(255, 193, 7, 0.2);} .refer-data .total-data.rate{background: rgba(33, 150, 243, 0.2);} .refer-data .total-data.signups{background: rgba(253, 70, 83, 0.2);} .refer-data .total-data.recent{background: rgb(255, 34, 213, 0.2);} .refer-data .total-data h3{font-size: 32px;font-weight: bolder;color: var(--primary-colors);} .refer-data .total-data p{font-size: 16px;font-weight: 500;color: var(--primary-colors);white-space: nowrap;} .refer-data .total-data img{width: 60px;height: auto;} .email-referral-link .email .copy-link .common-btn{position: absolute;top: 50%;margin: auto;right: 3px;transform: translateY(-50%);z-index: 1;} .email-referral-link .common-btn{border-radius: 16px;padding: 10px 36px;line-height: normal;font-size: 20px;height: auto;} .email-referral-link .referral-link .copy-link{width: 100%;position: relative;} .email-referral-link .referral-link .copy-link .common-btn{background: rgb(188 200 209);border-radius: 10px;font-size: 16px;display: flex;gap: 10px;align-items: center;border-color: rgba(12, 57, 88, 20%);padding: 8px 15px;margin-right: 4px;} .email-referral-link .referral-link .copy-link .common-btn img{width: 18px;height: auto;transition: var(--transition);} .email-referral-link .referral-link .copy-link .common-btn:focus, .email-referral-link .referral-link .copy-link .common-btn:active, .email-referral-link .referral-link .copy-link .common-btn:hover{background: var(--primary-colors);color: #fff;} .email-referral-link .referral-link .copy-link .common-btn:focus img, .email-referral-link .referral-link .copy-link .common-btn:active img, .email-referral-link .referral-link .copy-link .common-btn:hover img{filter: brightness(100);transition: var(--transition);} .email-referral-link .get{display: flex;gap: 5px;margin-top: 10px;} .email-referral-link .form-group{border: solid 1px rgba(12, 57, 88, 20%);border-radius: 16px;padding: 30px 20px;position: relative;} .email-referral-link .form-group:last-of-type{margin: 0;} .referral-data-and-share{display: flex;gap: 30px;flex-wrap: wrap; width: 50%;} .email-referral-link .position-relative{display: flex;gap: 15px;} .how-it-work{border: 1px dashed rgba(12, 57, 88, 0.3);padding: 20px 22px;display: flex;flex-direction: column;justify-content: space-between;gap: 20px;flex: 1; width: 50%;} .how-it-work h4{font-weight: 600;font-size: 22px;margin-bottom: 2px;color: var(--primary-colors);} .how-it-work p{font-size: 18px;font-weight: 600;margin-bottom: 5px;} .how-it-work span{font-size: 16px;display: block;line-height: 20px;color: rgba(12, 57, 88, 80%);} .how-it-work .box{display: flex;gap: 15px;} .how-it-work .box:last-of-type{margin: 0;} .how-it-work .box img{background: rgba(12, 57, 88, 15%);width: 40px;height: 40px;padding: 10px;border-radius: 10px;} .what-you-get-table{margin: 30px 0;} .what-you-get-table .table-scroll{max-height: 400px;overflow: auto;} .what-you-get-table h2{padding: 0;border: none;margin: 0;} .what-you-get-table .title{display: flex;justify-content: space-between;width: 100%;align-items: center;margin-bottom: 20px;border-bottom: solid 1px rgba(0, 0, 0, 0.2);;padding-bottom: 15px;flex-wrap: wrap;gap: 15px;} .copied{position: absolute;background: var(--primary-colors);color: #fff;padding: 10px;margin: auto;inset: 0;display: inline-table;z-index: 1;box-shadow: 1px 1px 24.5px rgba(12, 57, 88, 0.77);} .why-refer{background: var(--primary-colors);border-radius: 16px;display: flex;align-items: center;justify-content: space-between;padding: 0 40px;} .why-refer *{color: #fff;} .why-refer h6{font-size: 22px;font-weight: 600;margin-bottom: 15px;} .why-refer li, .why-refer p{font-size: 18px;font-weight: 400;} .why-refer li{list-style: disc;margin-bottom: 5px;} .why-refer ul{padding-left: 1rem;} .share-earn-instantly-pop-up .invite{display: flex;justify-content: center;align-items: center;gap: 15px;margin: 40px 0 20px;} .share-earn-instantly-pop-up .invite img{height: 50px;width: auto;transition: var(--transition);} .share-earn-instantly-pop-up .invite a:hover img{transform: scale(1.2);transition: var(--transition);} .email-referral-link{flex: 1;} .no-referrals-yet{text-align: center; padding: 30px; background: #f9f9f9; border-radius: 8px; margin: 20px 0;} .no-referrals-yet img{width: 60px; height: 60px; margin: 0 auto 20px auto;} .refer-inner-data{display: flex; flex-wrap: wrap; gap: 30px;} .why-refer .right, .why-refer .left{padding: 20px 0;} /* custom-modal-ui */ .custom-modal-ui .modal-content{background: var(--primary-colors);} .custom-modal-ui .right img {height: 320px;} .custom-modal-ui .btn-box .common-btn.line-btn{color: #fff; border-color: #fff;} .custom-modal-ui .btn-box{ display: flex;flex-direction: row-reverse;width: 100%;justify-content: center; z-index: 11; position: relative;} .custom-modal-ui .modal-header h2 {color: #fff; font-size: 22px;text-align: center;line-height: 32px;} .custom-modal-ui .modal-header {display: block;text-align: center;} .custom-modal-ui .modal-header .btn-close{position: absolute;top: -34px;color: #fff;filter: invert(100);opacity: 1;width: 25px;height: 25px;background-size: 24px;right: 0;} .custom-modal-ui .content{position: relative;} .custom-modal-ui .content img{width: 450px;height: auto;margin: 0 auto;display: block;} .custom-modal-ui .modal-body P{color: #fff; text-align: center; margin: 20px 0;} /* big-modules-buttons */ .big-modules-buttons {display: none;} .big-modules-buttons ul{display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 15px; margin-bottom: 20px; align-items: stretch;} .big-modules-buttons ul li{ background: #589BE9; padding: 15px; text-align: center;display: flex;flex-direction: column;justify-content: center;align-items: center; border-radius: 8px;} .big-modules-buttons ul li:nth-child(1){background: #808AFF;} /* .big-modules-buttons ul li:nth-child(1) span, .big-modules-buttons ul li:nth-child(2) span, .big-modules-buttons ul li:nth-child(6) span{color: #fff;} */ .big-modules-buttons ul li:nth-child(2){background: #e77463;} .big-modules-buttons ul li:nth-child(3){background: #ed9d73;} .big-modules-buttons ul li:nth-child(4){background: #f9be65;} .big-modules-buttons ul li:nth-child(5){background: #f3d453;} .big-modules-buttons ul li:nth-child(6){background: #5edfaf;} .big-modules-buttons ul li:nth-child(7){background: #6bdbdb;} .big-modules-buttons ul li:nth-child(8){background: #7db9fb;} .big-modules-buttons ul li:nth-child(9){background: #a587f7;} .big-modules-buttons ul li:nth-child(10){background: #f97ea9;} /* #8ce958 */ .big-modules-buttons ul li span{display: block; margin-top: 26px; font-size: 18px; line-height: normal; color: var(--primary-colors); font-weight: bold; } .big-modules-buttons ul li img{width: auto; height: 115px; aspect-ratio: 1;} /* basic-advanced-btn */ .basic-advanced-btn{ display: flex; margin-bottom: 10px; justify-content: flex-end; display: none;} .basic-advanced-btn button{background: #f1f1f1;padding: 6px 22px;border: solid 1px var(--primary-colors);font-size: 16px;font-weight: 600;color: var(--primary-colors); opacity: 0.5;} .basic-advanced-btn button:nth-child(1){border-radius: 10px 0 0 10px;} .basic-advanced-btn button:nth-child(2){border-radius: 0 10px 10px 0;} .basic-advanced-btn button.current{background: var(--secondary-colors); opacity: 1;} .logo-section.only-mobile.home-button .goto-home-button{display: none;} .logo-section.only-mobile.home-button .goto-home-button img{height: 42px; width: auto; margin: 0;} .basic-advanced-btn button.basic.current{border-right: none;} /* basic-advanced-header */ .basic-advanced-header{display: flex;gap: 10px;align-items: flex-start;justify-content: space-between;} .basic-advanced-header .common-btn{ font-size: 14px;padding: 8px 12px;border-radius: 10px;} /* dismiss-btn */ .dismiss-btn{margin: 12px 0; justify-content: end; display: none;} /* limit-reached error */ .limit-reached-area { text-align: center;padding: 50px 20px;background: linear-gradient(135deg, #2c3e50, #1a232e);color: #ecf0f1;border-radius: 12px;} .limit-reached-area h2 {font-size: 26px;font-weight: bold;color: #f1c40f;text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);} .limit-reached-area p {font-size: 18px;color: #bdc3c7;margin: 0;} .limit-reached-area .common-btn {margin: 10px 0 20px;padding: 14px 30px;font-size: 18px;font-weight: bold;border-radius: 10px;transition: all 0.3s ease;text-transform: uppercase;letter-spacing: 0.5px;box-shadow: 0 4px 10px rgba(241, 196, 15, 0.4); } .limit-reached-area .common-btn:hover {background-color: #f39c12;transform: translateY(-2px);box-shadow: 0 6px 15px rgba(243, 156, 18, 0.6);} .limit-reached-area img{height: 150px; margin-bottom: 20px;} /* nudge-form */ .nudge-form label{color: #fff; font-size: 15px;} .nudge-form .form-group{margin-bottom: 15px;} .nudge-form .btn-box{margin: 0;} .connected-btn.btn-box .common-btn:hover, .connected-btn.btn-box .common-btn:focus, .connected-btn.btn-box .common-btn:active{background: var(--secondary-colors); color: var(--primary-colors); opacity: 0.9;} .connected-btn.btn-box .line-btn:hover, .connected-btn.btn-box .line-btn:focus, .connected-btn.btn-box .line-btn:active{background: transparent; color: #fff; opacity: .9;} .custom-modal-ui .modal-body ul{margin: 0 0 20px;border: solid 1px #34556b;padding: 10px;} .custom-modal-ui .modal-body ul li{color: #fff;font-size: 16px;margin-bottom: 8px;} .custom-modal-ui .modal-body ul li:last-of-type{margin: 0;} /* header-ask-anything */ .header-ask-anything .chat-option{background: rgba(12, 57, 88, 5%); border-radius: 0 0 16px 16px; padding: 15px 20px;} .header-ask-anything .chat-option ul.chat-view-all-option {display: flex;gap: 2px;align-items: center;} .header-ask-anything .chat-option ul.chat-view-all-option li{display: flex;gap: 8px;align-items: center; font-size: 16px; cursor: pointer; background: transparent; padding: 0 15px; border-radius: 16px; transition: var(--transition); position: relative;} .header-ask-anything .chat-option ul.chat-view-all-option li .file{opacity: 0; width: 46px; position: relative; z-index: 2;} .header-ask-anything .chat-option ul.chat-view-all-option li span{font-size: 16px;color: var(--primary-colors);position: absolute;padding-left: 22px;z-index: 1; cursor: pointer; pointer-events: none; font-weight: 400;} .header-ask-anything .chat-option ul.chat-view-all-option li:hover{background: rgba(12, 57, 88, 10%);} .header-ask-anything .chat-option ul.chat-view-all-option li img{height: 14px; width: auto;} .header-ask-anything .chat-option ul.chat-view-all-option li select{background: transparent; border: none; color: var(--primary-colors); font-size: 16px;} .header-ask-anything .chat-option ul.chat-view-all-option li select:active, .header-ask-anything .chat-option ul.chat-view-all-option li select:hover, .header-ask-anything .chat-option ul.chat-view-all-option li select:focus{border: none; outline: none;} .header-ask-anything .chat-option ul.chat-view-all-option li.camera-btn span, .header-ask-anything .chat-option ul.chat-view-all-option li.voice-message-btn span{position: relative; padding: 0;} .header-ask-anything.main-chat{background: #FFFFFF;border: 1px solid #0C3958;border-radius: 16px; filter: drop-shadow(0px 10px 9.9px rgba(0, 0, 0, 0.07));} .header-ask-anything.main-chat .form-control{border: none; background: none; padding: 20px; padding-right: 80px;} .header-ask-anything.main-chat .btn{top: 20px; right: 20px;} .header-ask-anything.main-chat .upload-img{position: relative;} .header-ask-anything.main-chat .upload-img li{position: relative;} .header-ask-anything.main-chat .upload-img img{width: 80px; height: 80px; object-fit: cover; border-radius: 16px; margin: 10px 10px 0;} .header-ask-anything.main-chat .upload-img .cancel{position: absolute; top: 5px; right: 5px; z-index: 1; cursor: pointer; background: #fff; border-radius: 50px; padding: 2px;} .header-ask-anything.main-chat .upload-img .cancel img{width: 18px;height: 18px;object-fit: cover; margin: 0;} .header-ask-anything.main-chat .upload-img .uploaded{position: relative; display: flex; flex-wrap: wrap;} .header-ask-anything.main-chat .upload-img .image-count-badge{position: absolute; bottom: 15px; right: 10px; background: var(--secondary-colors); color: var(--primary-colors); border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; z-index: 2; border: 2px solid #fff;} .header-ask-anything.main-chat .upload-img .upload-box{position: relative;} /* festival-card card */ .dashboard .dashboard-inner .festival-card.card{position: relative;background: #B20B41;background: linear-gradient(90deg,rgba(178, 11, 65, 1) 50%, rgba(47, 1, 63, 1) 100%); padding: 10px; padding-top: 15px; cursor: pointer; overflow: hidden;} .dashboard .dashboard-inner .festival-card img{height: 58px; width: auto; max-width: 100%; display: block;} .dashboard .dashboard-inner .festival-card.card ul{display: flex; justify-content: space-between; align-items: flex-end;} .dashboard .dashboard-inner .festival-card.card ul li{padding: 0 20px;font-size: 16px;color: #fff;font-weight: 400;letter-spacing: 0.4px; text-transform: capitalize; text-align: center;} .dashboard .dashboard-inner .festival-card.card ul li span{font-weight: bold;background: var(--red-color);padding: 4px 6px;border-radius: 4px;margin:0 8px;} .dashboard .dashboard-inner .festival-card.card .all-diya li{padding: 0;} .festival-card .diya-light1{position: relative; padding-top: 25px;} .festival-card .diya-light1 .light1, .festival-card .diya-light1 .light2, .festival-card .diya-light1 .light3{position: absolute;top: 0;left: 0;right: 0;margin: 0 auto;} .festival-card .diya1, .festival-card .diya2, .festival-card .diya3{position: relative;width: 60px;height: 30px;background: linear-gradient(50deg, red, orange);border-radius: 15% 15% 50% 50%;box-shadow: 0px 5px 10px 0px rgb(85, 69, 40);z-index: 5;} .festival-card .light1, .festival-card .light2, .festival-card .light3{position: relative;width: 15px;height: 35px;background: linear-gradient(50deg, wheat, orange);border-radius: 50% 50% 50% 50%;box-shadow: 0px 5px 10px 0px rgb(85, 69, 40);z-index: 2;box-shadow: 2px 0px 15px 0px wheat;animation: blink1 1s ease-in infinite;} .festival-card .diya2 {background: linear-gradient(50deg, rgb(218, 198, 21), orange);width: 40px;height: 20px;} .festival-card .diya3 {background: linear-gradient(50deg, rgb(112, 24, 58), rgb(221, 21, 104));width: 40px;height: 20px;} .festival-card .light2 {height: 25px;width: 7px;animation: blink2 2s ease-in infinite;} .festival-card .light3 {height: 25px;width: 7px;animation: blink3 1.5s ease-in infinite;} .festival-card .colorLamp:nth-child(1), .festival-card .colorLamp:nth-child(2), .festival-card .colorLamp:nth-child(3) {display: inline-block;width: 10px;height: 10px;background: tomato;border-radius: 50%;box-shadow: 2px 1px 0px 0px rgb(97, 48, 8);animation: colorlighting 1s ease-in-out infinite;} .festival-card .colorLamp:nth-child(1) {transform: translateX(-3200%) translateY(1800%);} .festival-card .colorLamp:nth-child(2) {transform: translateX(-2200%) translateY(1800%);} .festival-card .colorLamp:nth-child(3) {transform: translateX(-800%) translateY(1650%);} .festival-card .colorLamp:nth-child(4) {transform: translateX(-200%) translateY(1800%);} .festival-card .all-diya{display: flex; align-items: center; gap: 20px;} .festival-card #wire{text-align: center;white-space: nowrap;position: absolute;padding: 0;width:750px;top:0px;left: 0;right: 0;margin: 0 auto;} .festival-card #wire li{position: relative;list-style: none;margin: 0 15px;padding: 0;display: inline-block;width: 12px;height: 22px;border-radius: 50%;background: #fff;animation-name: even-flash;animation-duration: 1s;animation-iteration-count: infinite;animation-fill-mode: both;} .festival-card #wire li:nth-child(odd){animation-name: odd-flash;} .festival-card #wire li:before{content: "";position: absolute;width: 14px;height: 10px;border-radius: 4px;top: -5px;left: 0;background: #444;} @keyframes lighting {0% {background: turquoise;box-shadow: whitesmoke;}50% {background: rgb(216, 224, 92);box-shadow: rgb(221, 198, 68);}100% {background: rgb(247, 128, 30);box-shadow: rgb(197, 64, 23);}} @keyframes blink1 {0% {height: 30px;}100% {height: 32px;}}@keyframes blink2 {0% {box-shadow: 2px -5px 15px 0px wheat;}100% {box-shadow: 5px 10px 15px 0px wheat;}}@keyframes blink3 {0% {box-shadow: 3px -10px 15px 0px wheat;}100% {box-shadow: 5px 10px 30px 0px wheat;}} @keyframes colorlighting {0% {background: rgb(30, 184, 24);box-shadow: rgb(221, 198, 68);}50% {background: rgb(216, 12, 5);box-shadow: rgb(197, 64, 23);}100% {background: rgb(145, 46, 145);box-shadow: rgb(163, 10, 177);}} @keyframes even-flash{0%, 100%{background:rgba(255,230,65,1);box-shadow: 0px 2px 20px 4px rgba(255,230,65,1);}50%{background:rgba(255,230,65,0.5);box-shadow: 0px 2px 20px 4px rgba(255,230,65,0.3);}} @keyframes odd-flash{50%{background:rgba(255,65,185,1);box-shadow: 0px 2px 20px 4px rgba(255,65,185,1);}0%, 100%{background: rgba(255,65,185,0.5);box-shadow: 0px 2px 20px 4px rgba(255,65,185,0.3);}} /* m-quiz-first-screen */ .m-quiz-first-screen .top-filter {padding: 20px 30px;} .m-quiz-first-screen .top-filter h1{padding: 0; margin-bottom: 10px;} .m-quiz-first-screen .top-filter p{margin: 0;} /* m-exam-dashboard */ .m-exam-dashboard .result-card {display: flex; gap: 20px;} .m-exam-dashboard .card{padding: 20px;width: 100%;height: auto;min-height: auto;box-shadow: none; display: block; position: relative;} .m-exam-dashboard .result-card .card{background: #E8F5E9;} .m-exam-dashboard .result-card .card:nth-child(2){background: #FFE0E0;} .m-exam-dashboard .result-card .card:nth-child(3){background: #E3F2FD;} .m-exam-dashboard .result-card .card:nth-child(4){background: rgba(255, 112, 67, 15%);} .m-exam-dashboard .result-card h2{font-size: 24px; color: var(--primary-colors); margin-bottom: 5px; font-weight: bold;} .m-exam-dashboard .result-card .data h3 span, .m-exam-dashboard .result-card p{font-size: 16px; font-weight: 500; margin: 0; text-transform: capitalize;} .m-exam-dashboard .result-card .data h3 span{display: block;} .m-exam-dashboard .result-card .data{display: flex; align-items: center; gap: 28px; flex-wrap: wrap;} .m-exam-dashboard .result-card .data h3{font-size: 40px; font-weight: 500; margin: 0;} .m-exam-dashboard .result-card .data-icon{margin-top: 15px; display: flex; justify-content: space-between; align-items: end; gap: 20px;} .m-exam-dashboard .result-card .data h3 sub{font-size: 18px; bottom: 0;} .m-exam-dashboard .result-card .card-icon img{height: 60px; width: auto;} .m-exam-dashboard .common-btn{padding: 6px 18px; font-size: 15px; line-height: normal;} /* all-exam-type */ .all-exam-type { display: flex; justify-content: space-between; align-items: stretch; margin-top: 30px; gap: 15px;} .all-exam-type .card{border: solid 1px #999999;display: flex;justify-content: space-between;flex-direction: row;align-items: flex-end;} .all-exam-type .card h2{font-size: 22px; font-weight: 500; margin-bottom: 10px; display: flex; align-items: center; gap: 15px;} .all-exam-type .card p{font-size: 16px; margin-bottom: 15px; color: rgba(12, 57, 88, 80%); text-transform: capitalize;} .all-exam-type .type-icon img{height: 62px; width: auto;} .all-exam-type .recommended{ background: var(--red-color);padding: 5px 10px;font-size: 15px;color: #fff;border-radius: 8px;line-height: normal;position: absolute;top: -15px;right: 20px;z-index: 1;} /* attempt-past-year-papers */ .attempt-past-year-papers{margin-top: 30px;} .attempt-past-year-papers .all-card{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; align-items: center; align-items: stretch;} .attempt-past-year-papers .card.attempted{background: #E8F5E9;border: 1px solid #4CAF50;border-radius: 16px; cursor: pointer;} .attempt-past-year-papers .card .common-btn{ transform: scale(0.9);} .attempt-past-year-papers .card:hover .common-btn{transform: scale(1);} .attempt-past-year-papers .card .common-btn:hover{transform: scale(1);} .attempt-past-year-papers .card.attempted .common-btn{background: #4CAF50; border-color: #4CAF50;} .attempt-past-year-papers .card .title { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 15px; flex-wrap: wrap; row-gap: 5px;} .attempt-past-year-papers .card .title h2{font-size: 20px; font-weight: 600; margin: 0;} .attempt-past-year-papers .card .title .result{background: #fff; font-size: 15px; color: var(--primary-colors); padding: 6px 14px; border-radius: 50px; border: solid 1px #23CE70; gap: 10px;display: flex;align-items: center; font-weight: 500; margin: 0;} .attempt-past-year-papers .card .title .result span{font-weight: bold; color: #23CE70;} .attempt-past-year-papers .card.in-progress{background: #FFF3E0;border: 1px solid #FB8C00;border-radius: 16px;} .attempt-past-year-papers .card.in-progress .common-btn{background: #FB8C00; border-color: #FB8C00;} .attempt-past-year-papers .card.unattempted{background: #F5F5F5;border: 1px solid #BDBDBD;border-radius: 16px;} .attempt-past-year-papers .card.unattempted .common-btn{background: #BDBDBD; border-color: #BDBDBD;} .attempt-past-year-papers .card ul{display: flex; font-size: 16px; color: rgba(12, 57, 88, 90%); gap: 10px; margin-bottom: 20px; flex-wrap: wrap; row-gap:5px;} .attempt-past-year-papers .card ul li{padding-right: 10px; border-right: solid 1px rgba(12, 57, 88, 30%);} .attempt-past-year-papers .card ul li:last-of-type{padding: 0; border: none;} .attempt-past-year-papers .attempt-filter{display: flex; border-bottom: solid 1px rgba(0, 0, 0, 10%); justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 5px; padding-bottom: 15px; margin-bottom: 15px;} .attempt-past-year-papers .attempt-filter h2{font-size: 20px; font-weight: bold; margin: 0;} .attempt-past-year-papers .filter .form-group{margin: 0;} .attempt-past-year-papers .filter .form-group, .attempt-past-year-papers .filter{ display: flex; align-items: center; gap: 15px; } .attempt-past-year-papers .filter select.form-control{padding: 8px 40px 8px 15px; font-size: 16px;} .attempt-past-year-papers .filter .check label{font-weight: 500; } .attempt-past-year-papers .filter label{font-size: 16px;margin: 0; color: var(--primary-colors);} .attempt-past-year-papers .filter .check-input{transform: scale(1.4);} .attempt-past-year-papers .filter .form-group.search-by-year{margin:0 10px;} .attempt-past-year-papers .filter {flex-wrap: wrap;} .attempted-points{display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;} .attempted-points label{font-size: 13px; color: var(--primary-colors); margin: 0 0 2px;} .attempted-points [type="range"]{ accent-color: #4CAF50; background: #E8F5E9;} .attempted-points [type="range"]::-moz-range-thumb{opacity: 0;} .attempted-points [type="range"]::-webkit-slider-thumb {opacity: 0;} /* mock-exam-pop-up */ .mock-exam-pop-up .right-form .difficulty-radio-group span{justify-content: center; font-size: 14px;} .mock-exam-pop-up .right-form .difficulty-radio-group label{text-transform: capitalize;} .mock-exam-pop-up .duration-que ul{display: flex; font-size: 14px; gap: 10px;} .mock-exam-pop-up .duration-que{display: flex; justify-content: space-between; margin-bottom: 20px; gap: 20px; flex-wrap: wrap; row-gap: 5px;} .mock-exam-pop-up .difficulty-radio-group label{margin: 0;} /* exam-instructions */ .mock-exam-pop-up .exam-instructions{font-size: 16px; font-weight: bold; } .mock-exam-pop-up .exam-instructions ol{padding-left: 15px; margin-bottom: 20px;} .mock-exam-pop-up .exam-instructions li{font-size: 15px;color: rgba(12, 57, 88, 80%);list-style: auto;font-weight: 500;} .mock-exam-pop-up .marking-scheme{border: solid 1px rgba(12, 57, 88, 80%); border-radius: 50px; padding: 8px 20px; line-height: normal; font-size: 14px; display: table; margin: 0 auto 20px auto;} .mock-exam-pop-up .marking-scheme b{margin-left: 15px;} .mock-exam-pop-up .instructions{margin-bottom: 20px;} .mock-exam-pop-up .instructions ul li{display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: bold; margin-bottom: 2px;} .mock-exam-pop-up .instructions ul li [type="checkbox"]{transform: scale(1.3);} .mock-exam-pop-up .right-form .title{margin-bottom: 20px;} .mock-exam-pop-up .form-group{margin-bottom: 15px;} /* m-exam-mobile-view */ .m-exam-mobile-view{display: none;} .m-exam-mobile-view ul{background: #E7ECEF; display: flex; justify-content: space-around; border-radius: 8px; padding: 6px; margin-bottom: 20px;} .m-exam-mobile-view ul li {width: 100%;} .m-exam-mobile-view ul li span{text-align: center; flex: 1; padding: 10px 12px; font-size: 16px; font-weight: 500; line-height: normal; background: transparent;display: block; width: 100%;} .m-exam-mobile-view ul li.active{background: var(--primary-colors); color: #fff; transition: var(--transition); border-radius: 8px; border: none;} .mock-exam-pop-up .right-form .difficulty-radio-group label {display: flex;flex-direction: column;justify-content: center;align-items: center;} /* ans hint */ .hint-container {display: flex;flex-direction: column;gap: 5px;cursor: pointer; margin: 10px 0;} .hint-header {display: flex;align-items: center;gap: 10px;cursor: pointer;user-select: none;} .hint-icon {width: 18px;transition: transform 0.3s ease; margin-left: 10px;} .hint-label {font-size: 15px;color: #007bff;transition: color 0.3s ease;} .hint-label:hover {color: #0056b3;} .hint-body {max-height: 0;opacity: 0;overflow: hidden;transform: translateY(-5px);transition: all 0.4s ease;background: #FFFFFF;border-left: 3px solid #ffd700;border-radius: 5px;padding: 0 10px;margin-left: 5px;} .hint-body.show {max-height: 100%; /* adjust based on expected hint size */opacity: 1;transform: translateY(0);padding: 10px;} /* mark-for-review */ .mark-for-review{display: flex; justify-content: end;} .mark-for-review .common-btn{padding: 5px 20px;} .common-btn.hint{padding: 5px 20px; display: flex; align-items: center;} .question-area .btn-box .two-btn{display: flex;flex-wrap: wrap;align-items: center;gap: 12px; flex-wrap: wrap; position: relative;} .step-content {display: none;} .step.active .step-content {display: block;} /* Enhanced Table Styles for AI Chat Markdown Tables */ .enhanced-table-container {width: 100%;overflow-x: auto;margin: 15px 0;border-radius: 12px;background: #fff;box-shadow: 0 2px 8px rgba(12, 57, 88, 0.08);} .enhanced-table {width: 100%;border-collapse: collapse;font-size: 16px;background: #fff;border-radius: 12px;overflow: hidden;} .enhanced-table thead {background: linear-gradient(135deg, #0C3958 0%, #165a8a 100%);color: #fff;} .enhanced-table thead th {padding: 14px 16px;text-align: left;font-weight: 600;font-size: 16px;border-bottom: 2px solid #FABB18;white-space: nowrap;} .enhanced-table tbody tr {border-bottom: 1px solid rgba(12, 57, 88, 0.08);transition: background-color 0.2s ease;} .enhanced-table tbody tr:hover {background-color: rgba(250, 187, 24, 0.05);} .enhanced-table tbody tr:last-child {border-bottom: none;} .enhanced-table tbody td {padding: 12px 16px;color: var(--primary-colors);line-height: 1.6;vertical-align: top;} .enhanced-table tbody td:first-child {font-weight: 600;color: #0C3958;} /* Responsive table for mobile */ @media screen and (max-width: 768px) { .enhanced-table-container {border-radius: 8px;} .enhanced-table {font-size: 14px;} .enhanced-table thead th, .enhanced-table tbody td {padding: 10px 12px;font-size: 14px;} } /* Code Block Styles for AI Chat Markdown */ .code-block-container {margin: 15px 0;border-radius: 12px;overflow: hidden;background: #1e1e1e;box-shadow: 0 2px 8px rgba(12, 57, 88, 0.1);} .code-header {display: flex;justify-content: space-between;align-items: center;padding: 10px 16px;background: #2d2d2d;border-bottom: 1px solid #404040;} .code-language {font-size: 13px;font-weight: 600;color: #FABB18;text-transform: uppercase;letter-spacing: 0.5px;} .copy-code-btn {background: rgba(250, 187, 24, 0.1);border: 1px solid #FABB18;color: #FABB18;padding: 4px 12px;border-radius: 6px;font-size: 12px;cursor: pointer;transition: all 0.2s ease;font-weight: 500;} .copy-code-btn:hover {background: #FABB18;color: #1e1e1e;} .code-block {margin: 0;padding: 16px;background: #1e1e1e;color: #262626;font-family: 'Consolas', 'Monaco', 'Courier New', monospace;font-size: 14px;line-height: 1.6;white-space: normal;} .code-block::-webkit-scrollbar {height: 8px;} .code-block::-webkit-scrollbar-track {background: #2d2d2d;} .code-block::-webkit-scrollbar-thumb {background: #404040;border-radius: 4px;} .code-block::-webkit-scrollbar-thumb:hover {background: #505050;} /* Inline Code Styles */ .message-text code {background: rgba(250, 187, 24, 0.1);color: #0C3958;padding: 2px 6px;border-radius: 4px;font-family: 'Consolas', 'Monaco', 'Courier New', monospace;font-size: 14px;border: 1px solid rgba(250, 187, 24, 0.2);} /* Math Block Styles */ .math-block {margin: 15px 0;padding: 16px;background: rgba(197, 224, 243, 0.15);border-left: 4px solid #0C3958;border-radius: 8px;overflow-x: auto;} .math-inline {padding: 0 4px;} /* Emoji Support - Ensure emojis display properly */ .message-text {font-family: var(--font-family), 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;} /* Style for content with emojis at the start */ .message-text br + strong::before, .message-text p strong::before {margin-right: 4px;} /* Header Styling in AI Responses */ .message-text h1 {font-size: 26px;font-weight: bold;color: var(--primary-colors);margin: 25px 0 15px 0;padding-bottom: 10px;border-bottom: 2px solid rgba(250, 187, 24, 0.3);} .message-text h2 {font-size: 20px;font-weight: bold;color: var(--primary-colors);margin: 20px 0 12px 0;padding-left: 12px;border-left: 4px solid #FABB18;} .message-text h3 {font-size: 18px;font-weight: 600;color: var(--primary-colors);margin: 15px 0 10px 0;} /* MCQ Options Styling */ .message-text ol.mcq-options {list-style-type: lower-alpha;padding-left: 30px;margin: 10px 0 20px 0;} .message-text ol.mcq-options li {padding: 8px 12px;margin: 6px 0;background: rgba(197, 224, 243, 0.15);border-left: 3px solid transparent;border-radius: 6px;transition: all 0.2s ease;cursor: pointer;} .message-text ol.mcq-options li:hover {background: rgba(250, 187, 24, 0.15);border-left-color: #FABB18;transform: translateX(4px);} /* Question numbering in lists */ .message-text ol {padding-left: 25px;margin: 10px 0;} .message-text ul {padding-left: 25px;margin: 10px 0;} .message-text li {margin: 8px 0;line-height: 1.6;} /* Checkmark List Styling (✅) */ .message-text ul.check-list {list-style: none;padding-left: 0;margin: 15px 0;} .message-text ul.check-list li.check-item {position: relative;padding: 10px 10px 10px 40px;margin: 8px 0;background: rgba(34, 197, 94, 0.08);border-left: 4px solid #22c55e;border-radius: 8px;line-height: 1.6;transition: all 0.2s ease;} .message-text ul.check-list li.check-item::before {content: '✅';position: absolute;left: 12px;top: 50%;transform: translateY(-50%);font-size: 18px;} .message-text ul.check-list li.check-item:hover {background: rgba(34, 197, 94, 0.15);transform: translateX(4px);} /* Cross Mark List Styling (❌) */ .message-text ul.cross-list {list-style: none;padding-left: 0;margin: 15px 0;} .message-text ul.cross-list li.cross-item {position: relative;padding: 10px 10px 10px 40px;margin: 8px 0;background: rgba(239, 68, 68, 0.08);border-left: 4px solid #ef4444;border-radius: 8px;line-height: 1.6;transition: all 0.2s ease;} .message-text ul.cross-list li.cross-item::before {content: '❌';position: absolute;left: 12px;top: 50%;transform: translateY(-50%);font-size: 18px;} .message-text ul.cross-list li.cross-item:hover {background: rgba(239, 68, 68, 0.15);transform: translateX(4px);} /* Emoji Bullet List Styling (🎯, 📝, etc.) */ .message-text ul.emoji-list {list-style: none;padding-left: 0;margin: 15px 0;} .message-text ul.emoji-list li.emoji-item {position: relative;padding: 5px 10px 5px 20px;margin: 8px 0;background: rgba(250, 187, 24, 0.08);border-left: 4px solid #FABB18;border-radius: 8px;line-height: 1.6;transition: all 0.2s ease;} .message-text ul.emoji-list li.emoji-item::before {content: attr(data-emoji);position: absolute;left: 12px;top: 50%;transform: translateY(-50%);font-size: 18px;} .message-text ul.emoji-list li.emoji-item:hover { background: rgba(250, 187, 24, 0.15); transform: translateX(4px); } .new-prompt .chat-container ul li span{font-size: 18px; color: #0c3958; font-weight: 700;} .new-prompt .chat-container .chat-response span{font-size: 13px; font-weight: normal;} #chat-starter-lines{margin-top: 20px; display: block; font-weight: 500; font-size: 24px;} .basic-que-list{max-width: 1020px; margin: 0 auto;} .basic-que-list ul{display: flex; flex-wrap: wrap; gap: 10px 5px; justify-content: center;} .basic-que-list ul li{font-size: 16px; color: rgba(12, 57, 88, 80%); border: solid 1px rgba(12, 57, 88, 30%);padding: 4px 20px;border-radius: 50px; cursor: pointer; position: relative; transition: var(--transition);} .basic-que-list ul li:hover{border-color: var(--secondary-colors); transition: var(--transition);} .new-prompt .welcome-word .ST-robot{width: 100px; height: auto; display: inline-block; animation: smoothShake 4s ease-in-out infinite;} @keyframes smoothShake { 0%, 100% { transform: translateX(0) translateY(0);} 25% { transform: translateX(-4px) translateY(4px);} 50% { transform: translateX(4px) translateY(4px);} 75% { transform: translateX(-4px) translateY(-4px);} } .header-ask-anything .chat-option ul.chat-view-all-option li span.pro-only{position: relative;background: var(--secondary-colors);text-align: center;padding: 4px 10px;line-height: normal;color: #0c3958;border-radius: 50px;font-weight: 500; opacity: 1 !important; font-size: 14px;} .header-ask-anything .chat-option ul.chat-view-all-option li.pro-only-click{padding-right: 60px;} /* cursor: none; pointer-events: none; */ .header-ask-anything .chat-option ul.chat-view-all-option li.pro-only-click img, .header-ask-anything .chat-option ul.chat-view-all-option li.pro-only-click span{opacity: 0.6;} .header-ask-anything .chat-option ul.chat-view-all-option li select{width: 100%;} .message-text ul.emoji-list, .message-text ul.check-list{padding: 0 !important;} .message-text ul.check-list li{list-style: none;} /* submit-quiz-popup */ .submit-quiz-popup .modal-header{padding: 10px 15px; border-bottom: solid 1px rgba(12, 57, 88, 60%);} .submit-quiz-popup .modal-content{border-radius: 16px;} .submit-quiz-popup .modal-header h5{font-size: 18px; font-weight: bold;} .submit-quiz-popup .attempt-label{display: flex; justify-content: space-between; flex-wrap: wrap;gap: 5px} .submit-quiz-popup .attempt-label li{font-size: 16px; font-weight: 400; text-transform: capitalize; display: flex; gap: 8px; align-items: center;} .submit-quiz-popup .attempt-label li span{width: 15px; height: 15px; display: block; background: var(--secondary-colors);} .submit-quiz-popup .attempt-label li:nth-child(1) span{background: #fff; border: solid 1px #0c3958;} .submit-quiz-popup .attempt-label li:nth-child(2) span{background: #e94a4a;} .submit-quiz-popup .attempt-label li:nth-child(3) span{background: #549afd;} .submit-quiz-popup .attempt-label li:nth-child(4) span{background: #f9b400;} .submit-quiz-popup .total-que li{ width: 46px;height: 46px;display: flex;justify-content: center;background: #fff;font-size: 16px;font-weight: 500;box-shadow: none;transition: var(--transition);cursor: pointer;box-shadow: inset 0px 0px 1.6px #0c3958; align-items: center;} .submit-quiz-popup .total-que ul{display: flex;gap: 0;flex-wrap: wrap;margin: 20px 0 0;} .submit-quiz-popup .total-que li.active{border: 2px solid #ffffff;box-shadow: inset 2px 2px 12px #000000;transition: var(--transition);border-radius: 50%;}/*#0C3958*/ .submit-quiz-popup .total-que li.unattempted{ background: rgba(233, 74, 74, 80%); color: #fff;} .submit-quiz-popup .total-que li.attempted{background: rgba(84, 154, 253, 60%);} .submit-quiz-popup .total-que li.review{background: #f9b400; color: var(--primary-colors);} .submit-quiz-popup .modal-footer{display: flex;gap: 10px;justify-items: stretch;justify-content: center;} .submit-quiz-popup .modal-footer .common-btn{display: block; width: 48%; margin: 0; transition: var(--transition); padding: 12px;} .submit-quiz-popup .modal-footer .common-btn:hover{opacity: 0.6; transition: var(--transition);} .submit-quiz-popup .modal-footer .common-btn.attempt{background: #f9b400; color: #333333; border-color: #F1F1F1;} .submit-quiz-popup .modal-footer .common-btn.resume{background: #e94a4a; color: #fff; border-color: rgba(233, 74, 74, 70%);} .submit-quiz-popup .modal-footer .common-btn.line-btn{background: transparent; color: #2C3E50; border-color: #D0D0D0;} .submit-quiz-popup .total-que p {margin: 15px 0 0;} /*.submit-quiz-popup .total-que p.show {display: block;} .submit-quiz-popup .total-que p span{display: block; margin-top: 10px;}*/ .submit-quiz-popup .modal-header .total{display: flex; align-items: center; gap: 15px;} .submit-quiz-popup .modal-header .total span{font-size: 15px;font-weight: bold;margin: 0;line-height: normal;padding: 6px 16px;background: #ededed;border-radius: 50px;} .correct-filter {background: var(--green-color);color: white !important;} .incorrect-filter {background: #E94A4A;color: white !important;} .start-quiz-popup .modal-dialog {margin-top: 55px;} .exam-instructions {background: aliceblue;padding: 5px 10px 1px 10px;border-radius: 6px;} .exam-instructions h5 {font-size: 18px;cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px;} .instructions-content {transition: all 0.3s ease;overflow: hidden;} .instructions-content.ng-hide {opacity: 0;max-height: 0;} .instructions-content.ng-show {opacity: 1;max-height: 500px;} .start-quiz-popup .right-form .form-group label.attempted {display: flex; flex-wrap: wrap; gap: 6px} .start-quiz-popup .right-form .form-group span.attempted-badge, .attempted-badge {background: #0c3958;padding: 3px 8px;border-radius: 4px;color: #ffffff;font-weight: normal;font-size: 11px;letter-spacing: 0.04rem;} .attempt-past-year-papers .filter .form-group.select-paper {align-items: flex-start; width: 100%;} .question-area .btn-box.content-center {justify-content: center;} .paper-paper-attempt {background: #fff7e3;border: 1px solid #fabb18;} .past-paper-div {height: 100px;overflow-y: auto;padding: 5px;} .customize-your-quiz .select-year select.form-select option {font-size: 14px;line-height: normal;} .customize-your-quiz .select-year select.form-select {padding: 10px;font-size: 16px; margin: 0;background-color: #fff; border: none;border-radius: 0; background-size: 19px;background-position: calc(100% - 0px); position: relative;} .customize-your-quiz .select-year{display: flex; align-items: center; gap: 20px;} .customize-your-quiz .select-year label{white-space: nowrap; margin: 0;} ol.roman-numeral-list li {font-size: 18px;font-weight: 500;line-height: 26px;color: var(--primary-colors);} .customize-your-quiz .box-form{border: solid 1px rgba(236, 180, 43, 50%);margin: 0;border-radius: 14px;margin: 20px 0 20px 0;position: relative; padding: 20px 20px 15px 20px;} .customize-your-quiz .box-form .box-label{position: absolute;top: -10px;background: #fff;padding: 0 10px;left: 10px; font-size: 15px;} .customize-your-quiz .box-form.btn-enable{display: flex;justify-content: space-between;align-items: center;padding: 10px 15px;gap: 20px;flex-wrap: wrap;row-gap: 8px;} .customize-your-quiz .box-form.btn-enable .form-group{margin: 0 !important;} .customize-your-quiz .box-form.select-year{padding: 5px 15px 0px 10px;} .submit-quiz-popup .total-que li:hover {color: var(--primary-colors);} /*question*/ .ques-num {display: flex;justify-content: space-between;gap: 80px;} .ques-num .question-area {flex: 1; background: #f7f7f7; padding: 20px; border: solid 5px #e9e9e9;} .ques-num .submit-quiz-popup {flex: 0 0 490px;} /*resume exam popup*/ .resume-exam-popup .modal-content {border-radius: 12px; border: none; box-shadow: 0 10px 40px rgba(0,0,0,0.15);} .resume-exam-popup .modal-header {padding: 15px 20px;} .resume-exam-popup .modal-header h5 {margin: 0; font-size: 22px; font-weight: 600;} .resume-exam-popup .modal-header p {margin:0; font-size: 15px} .resume-exam-popup .modal-body {padding: 20px;} .resume-exam-popup .exam-details {margin-bottom: 20px;} .resume-exam-popup .exam-details h6 {margin: 0 0 15px 0; font-size: 17px; font-weight: 600; color: var(--primary-colors);} .resume-exam-popup .exam-details h6 i {color: #667eea;} .resume-exam-popup .exam-details .exam-type-and-course {margin-bottom: 12px;} .resume-exam-popup .exam-details .exam-type-and-course .exam-type {display: flex; align-items: center; margin-bottom: 8px; gap: 10px;} .resume-exam-popup .exam-details .exam-type-and-course .exam-type .span1 i {margin-right: 8px;} .resume-exam-popup .exam-details .exam-type-and-course .exam-type .span1 {font-weight: 600; color: var(--primary-colors); min-width: 100px; font-size: 13px;} .resume-exam-popup .exam-details .exam-type-and-course .exam-type .span1 {color: var(--primary-colors); font-size: 14px; text-transform: capitalize;} .resume-exam-popup .exam-details .exam-type-and-course .exam-course {display: flex; align-items: center; margin-bottom: 8px; gap: 10px;} .resume-exam-popup .exam-details .exam-type-and-course .exam-course .span1 i {margin-right: 8px;} .resume-exam-popup .exam-details .exam-type-and-course .exam-course .span1 {font-weight: 600; color: var(--primary-colors); min-width: 100px; font-size: 13px;} .resume-exam-popup .exam-details .exam-type-and-course .exam-course .span1 {color: var(--primary-colors); font-size: 14px; font-weight: 500} .resume-exam-popup .exam-details .progress-stats {display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 15px; padding-top: 15px; border-top: 1px solid #dee2e6;} .resume-exam-popup .exam-details .progress-stats .stat-card {border: 1px solid #ebebeb;text-align: center; padding: 12px; background: #f8f9fa; border-radius: 8px;} .resume-exam-popup .exam-details .progress-stats .stat-card .num {font-size: 24px; font-weight: 700; color: var(--primary-colors);} .resume-exam-popup .exam-details .progress-stats .stat-card .label-text {font-size: 13px; color: #6c757d; margin-top: 4px;} .resume-exam-popup .exam-details .exam-timer {border: 1px solid #ebebeb;margin-top: 15px; padding: 12px; background: #f8f9fa; border-radius: 8px; display: flex; align-items: center; justify-content: space-between;} .resume-exam-popup .exam-details .exam-timer .span1 {font-size: 14px;} .resume-exam-popup .exam-details .exam-timer .span1 i {color: #667eea;} .resume-exam-popup .exam-details .exam-timer .span2 {font-size: 16px; font-weight: 600; color: var(--primary-colors);} .resume-exam-popup .last-saved-info {background: #fff3cd; border-left: 4px solid #ffc107; padding: 12px 16px; border-radius: 6px; margin-bottom: 16px;} /* exam-attempt-summary */ .exam-summary-header{border-bottom: solid 1px rgba(12, 57, 88, 30%); padding-bottom: 15px; margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center;flex-wrap: wrap;} .exam-summary-header .left h2{font-size: 22px; text-transform: capitalize; margin: 0;} .exam-summary-header .left ul{display: flex; gap: 15px; flex-wrap: wrap;} .exam-summary-header .left ul li{font-size: 15px; list-style: disc; padding-right: 15px; color: rgba(12, 57, 88, 80%);;} .exam-summary-header .left ul li:first-of-type{list-style: none;} .exam-summary-header .left ul li:last-of-type{color: var(--primary-colors);} .exam-summary-header .right{ display: flex; align-items: center; gap: 30px; flex-wrap: wrap;} .exam-summary-header .right .data p{font-size: 15px; margin: 0;} .exam-summary-header .right .data h6{font-size: 18px; margin: 0; font-weight: bold;} .exam-summary-header .right .pie{display: flex; align-items: center; gap: 10px;} .exam-summary-header .right .pie-chart {background: radial-gradient(circle closest-side,white 0,white 47.58%,transparent 0%,transparent 70%,white 0),conic-gradient(var(--data, #ccc 100%));position: relative;width: 60px;height: 60px;margin: 0;} .exam-summary-header .left .title-and-back{ display: flex;align-items: center;gap: 15px;margin-bottom: 6px;} /* exam-attempt-summary */ .exam-attempt-summary .result-box{margin-bottom: 30px;} .exam-attempt-summary .result-box .result-view{display: flex; flex-wrap: wrap; gap: 5px; align-items: center;max-height: 124px;overflow: auto;margin-bottom: 15px;} .exam-attempt-summary .result-box .result-view li{font-size: 15px; font-weight: 500; width: 60px; height: 35px; display: flex; align-items: center; justify-content: center; border-radius: 5px; background: #C7C7C7; color: var(--primary-colors); transition: var(--transition); cursor: pointer;} .exam-attempt-summary .result-box .result-view li.incorrect{background: #E94A4A; color: #fff;} .exam-attempt-summary .result-box .result-view li.correct{background: #34C759;} .exam-attempt-summary .result-box .result-view li.review{background: #949393; color: #fff;} .exam-attempt-summary .result-box .result-view li.skip{background: #C7C7C7;} .exam-attempt-summary .result-box .result-view li:hover, .exam-attempt-summary .result-box .result-view li.active{border: 3px solid #0C3958;box-shadow: inset 3px 3px 6px 5px rgba(12, 57, 88, 0.25); transition: var(--transition);} .exam-attempt-summary .result-box .result-tip{display: flex; flex-wrap: wrap; gap: 10px; align-items: center; row-gap: 5px;} .exam-attempt-summary .result-box .result-tip li{display: flex; align-items: center; gap: 5px; font-size: 14px; flex-wrap: wrap; border: 1px solid #3440c7;border-radius: 50px;padding: 3px 15px; cursor: pointer; transition: var(--transition);} .exam-attempt-summary .result-box .result-tip li span{width: 12px; height: 12px; display: block;} .exam-attempt-summary .result-box .result-tip li.correct.active, .exam-attempt-summary .result-box .result-tip li.correct:hover{background:#34C759; transition: var(--transition); color: #fff;} .exam-attempt-summary .result-box .result-tip li.active span, .exam-attempt-summary .result-box .result-tip li:hover span{border: solid 1px #fff;} .exam-attempt-summary .result-box .result-tip li.correct{border-color:#34C759 ;} .exam-attempt-summary .result-box .result-tip li.correct span{background: #34C759;} .exam-attempt-summary .result-box .result-tip li.incorrect.active, .exam-attempt-summary .result-box .result-tip li.incorrect:hover{background:#E94A4A; transition: var(--transition); color: #fff;} .exam-attempt-summary .result-box .result-tip li.incorrect{border-color: #E94A4A;} .exam-attempt-summary .result-box .result-tip li.incorrect span{background: #E94A4A;} .exam-attempt-summary .result-box .result-tip li.need-review.active, .exam-attempt-summary .result-box .result-tip li.need-review:hover{background:#949393; transition: var(--transition); color: #fff;} .exam-attempt-summary .result-box .result-tip li.need-review{border-color: #949393;} .exam-attempt-summary .result-box .result-tip li.need-review span{background: #949393;} .exam-attempt-summary .result-box .result-tip li.all.active, .exam-attempt-summary .result-box .result-tip li.all:hover{background:#C7C7C7; transition: var(--transition); color: #fff;} .exam-attempt-summary .result-box .result-tip li.all{border-color: #C7C7C7;} .exam-attempt-summary .result-box .result-tip li.all span{background: #C7C7C7;} .question-ans-box{background: #FAFAFA;border: 5px solid rgba(226, 226, 226, 0.5);border-radius: 16px; padding: 20px;} .question-ans-box .title {display: flex; justify-content: space-between; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; row-gap: 10px; align-items: center;} .question-ans-box .title h6{font-size: 20px; font-weight: 600; margin: 0;} .question-ans-box .title p{font-size: 16px; font-weight: 400; margin: 0; display: flex; gap: 10px; align-items: center; line-height: normal; color: rgba(12, 57, 88, 80%);} .question-ans-box .title p span{width: 12px; height: 12px; display: block;} .question-ans-box .title p .correct{width: 12px; height: 12px;background: #34C759; display: block;} .question-ans-box .title p .incorrect{background: #e94a4a;} .question-ans-box .title p .unattempted{background: #C7C7C7;} .question-ans-box .que-data{display: flex; justify-content: space-between; gap: 20px;} .question-ans-box .que{font-size: 18px; line-height: 28px; font-weight: 500; margin: 0;} .question-ans-box .your-answer{font-size: 18px; font-weight: bold; padding: 4px 14px;background: #EAECEE; border-radius: 8px; display: inline-block; margin: 20px 0; line-height: 30px;} .question-ans-box .your-answer span{font-weight: 300;} .question-ans-box .explanation h4{font-size: 20px; font-weight: bold; margin-bottom: 10px;} .question-ans-box .explanation ul li{font-weight: 400;font-size: 18px;line-height: 30px;letter-spacing: 0.01em;color: rgba(12, 57, 88, 90%);} .question-ans-box .multiple{background: #EDEDED;padding: 4px 16px;border-radius: 50px;line-height: normal;} .attempt-past-year-papers .filter{ max-height: 100px;overflow: auto;padding: 5px;} .question-formatted *, .explanation *{white-space: normal;} .question-area .question-area-select{display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px; flex-wrap: wrap; gap: 10px;} .enable-timer label b{color: var(--primary-colors); text-transform: capitalize; font-weight: 600;} .enable-timer label {color: rgba(12, 57, 88, 80%);} .enable-timer label img{width: 14px;margin-right: 8px;} .exam-summary-box {background: aliceblue;border: 1px solid #cce8fb;padding: 20px;border-radius: 8px;margin-bottom: 15px;position: sticky;top: 0;margin-top: 10px;} .exam-summary-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 16px;text-align: center;} .exam-summary-value {font-size: 28px;font-weight: 700;color: var(--primary-colors);} .exam-summary-label {font-size: 15px;color: #646f78;margin-top: 2px;} #examInstructionsModal .modal-body{position: relative; padding-top: 0;} #confirmModal .submit-quiz-popup .attempt-label li {padding-left: 15px;} .select-your-paper{ border: none;font-size: 16px;margin: 0;font-weight: 600;color: var(--primary-colors);background: rgba(250, 187, 24, 80%);width: 100%;border-radius: 50px;padding: 5px; margin-bottom: 15px;} .paper-list-modal{inset: 0;margin: auto;padding: 10px;display: flex;align-items: center;background: rgba(12, 57, 88, 30%);height: 100vh;width: 100%; max-width: none;} .paper-list-modal .modal-content{max-width: 500px; margin: auto;} .paper-list-modal .customize-your-quiz .box-form{margin: 0;} /* slider-for-arrow */ .slider-for-arrow{display: flex; gap: 15px; margin-top: 30px;} .slider-for-arrow img{filter: brightness(100);} .slider-for-arrow .common-btn.mobile{padding: 10px; display: none;} .slider-for-arrow .common-btn.mobile:nth-child(1){border-radius: 0px 50px 50px 0; position: fixed; top: 50%; left: 0; z-index: 99; transform: translateY(translateY(-50%));} .slider-for-arrow .common-btn.mobile:nth-child(2){border-radius: 50px 0 0 50px; position: fixed; top: 50%; right: 0; z-index: 99; transform: translateY(translateY(-50%));} .slider-for-arrow .common-btn.bottom{position: relative;border-radius: 50px;width: 50px;height: 50px; padding: 0;} .coming-soon-label{font-size: 13px !important;white-space: nowrap;display: block;margin-top: 2px !important;color: var(--red-color); font-weight: 500;} /* login - auto-carousel */ .login .student-img img.c-img {filter: blur(6px);opacity: 0; position: absolute; inset: 0; height: 100%; transition: var(--transition);} .login .student-img img.c-img.active { filter: blur(0); opacity: 1; transition: var(--transition);} .login .student-img .auto-carousel{position: relative; height: calc(100vh - 105px); inset: 0; margin: auto;} /* explanation */ .explanation .explanation-data{ display: flex; justify-content: space-between; gap: 40px;} .explanation .explanation-data ul{width: 100%;} .explanation .explanation-img{flex: 0 0 320px;} .explanation .explanation-img img{width: 100%;} .exam-attempt-summary .result-box .result-tip li.all.active {background: #0c3958;} .text-center-section {display: flex;flex-direction: column;gap: 15px;text-align: center; align-items: center;} .text-center-section .sub-text {max-width: 550px; margin: 0;} .badge-main {background: rgba(12, 57, 88, 10%);padding: 8px 20px;border-radius: 50px;color: var(--primary-colors);align-items: center;gap: 6px;} .main-heading {font-size: 44px;font-weight: 900; margin: 0;} .sub-highlight {color: var(--primary-colors);} .sub-text span {color: var(--primary-colors);font-weight: bold;} /* offer-bar */ .offer-bar {padding: 10px 20px;background: var(--orange-color);color: #ffffff;font-size: 15px;border-radius: 10px; margin: auto; background-image: linear-gradient(-45deg, rgba(250, 187, 24, 0.1), rgba(12, 57, 88, 0.1), rgba(250, 187, 24, 0.1), rgba(12, 57, 88, 0.1));animation: bg-animation 10s infinite;background-size: 300%;} .offer-bar ul {display: inline-flex;gap: 20px;margin: 0;padding: 0;list-style: none; flex-wrap: wrap; row-gap: 5px; justify-content: center;} .offer-bar li {display: flex;align-items: center;gap: 5px; color: #fff; white-space: nowrap; justify-content: center;} .timer-box {background: rgba(255,255,255, 0.2);padding: 4px 8px;border-radius: 5px;} /* all-plan */ .all-plan {padding-top: 15px;} .badge-green {padding: 5px 15px;background: var(--green-color);border-radius: 50px;text-transform: uppercase;font-size: 12px;letter-spacing: 1px;font-weight: 600;color: #FFFFFF;} .badge-orange {padding: 5px 15px;background: var(--orange-color);border-radius: 50px;text-transform: uppercase;font-size: 12px;letter-spacing: 1px;font-weight: 600;color: #fff;} .badge-green, .badge-orange {position: absolute;top: -13px;margin: 0 auto;left: 0;right: 0;display: table;} .plan-title {margin-bottom: 25px;} .plan-title h5 {margin-bottom: 0.5rem;} .old-price {text-decoration: line-through;color: #7f7c7c;margin: 0;} .price h2 {margin: 10px 0;} .amount {font-size: 54px;font-weight: bolder;} .savings-badge {background: rgba(39, 201, 120, 10%);border-radius: 50px;color: var(--green-color);font-weight: 600;font-size: 14px;padding: 5px 15px;} .benefits ul {list-style: none;padding: 0;} .benefits ul li {display: flex;align-items: center;gap: 8px;margin-bottom: 8px;} /* stats-container */ .stats-container {display: flex;gap: 25px;justify-content: center; flex-wrap: wrap;} .stats-container .box {min-width: 250px;text-align: center;padding: 15px;border-radius: 8px;border: 1px solid rgba(12, 57, 88, 15%);; text-align: center; border-radius: 20px;} .stats-container .box h4{font-weight: bold; margin-bottom: 2px;} .card-btn .common-btn{width: 100%;} .stats-container .box i{width: 48px;height: 48px;background: rgba(12, 57, 88, 8%);border: solid 1px var(--primary-colors);display: flex;align-items: center;justify-content: center;border-radius: 50px; margin: 0 auto 12px;} .sub-highlight{color: #2463eb;} .feature-checklist-table .table-ui{ margin: 0 auto;background: #fff;box-shadow: 0 2px 12px rgba(20, 20, 43, 0.08); border: solid 1px rgba(12, 57, 88, 10%); border-radius: 20px; padding: 20px; overflow: auto;} .feature-checklist-table.custom-table table thead th{background: rgba(12, 57, 88, 10%); } .feature-checklist-table.custom-table table thead th:nth-child(1){border-radius: 14px 0 0 0;} .feature-checklist-table.custom-table table thead th:last-of-type{border-radius: 0 14px 0 0; text-align: center;} .feature-checklist-table.custom-table table tbody tr{background: transparent; border-bottom: solid 1px rgba(12, 57, 88, 10%);} .feature-checklist-table.custom-table table tbody tr:last-of-type{border-bottom: none;} .feature-checklist-table.custom-table table td{font-size: 16px; padding: 10px;} .payment-plans{text-align: center; margin-bottom: 20px;} .payment-plans .title {font-size: 32px;font-weight: 700; padding: 0; border: none; margin: 0;} .success-section .subtitle {margin-top: 5px;font-size: 15px;color: #666;} .success-section .testimonial-wrapper {display: flex;justify-content: center;gap: 25px;margin-top: 40px;flex-wrap: wrap;} .success-section .testimonial-card {width: 360px;background: #fff;border: 1px solid #e9edf5;padding: 25px;border-radius: 14px;position: relative;box-shadow: 0px 4px 12px rgba(0,0,0,0.03); text-align: left;} .success-section .profile {display: flex;align-items: center;gap: 12px;} .success-section .avatar {width: 48px;height: 48px;border-radius: 50%;background: #0066ff;color: #fff;display: flex;align-items: center;justify-content: center;font-weight: 600;font-size: 18px;} .success-section .avatar.purple {background: #6a4cff;} .success-section .avatar.blue {background: #1e8bff} .success-section .name {font-size: 17px;font-weight: 600;margin-bottom: 5px;} .success-section .rank {margin: 0;color: #888;font-size: 14px;} .success-section .quote-icon {position: absolute;right: 20px;top: 15px;font-size: 30px;color: #d3d7e3;} .success-section .stars {color: var(--secondary-colors);margin-top: 10px;font-size: 20px;} .success-section .review {margin: 12px 0 20px;color: rgba(12, 57, 88, 90%);font-size: 15px;line-height: 1.5;} .success-section .badge {padding: 6px 14px;border-radius: 20px;font-size: 12px;font-weight: 600;display: inline-block;} .success-section .badge.crash {background: #e6f7ff;color: #00a3ff;} .success-section .badge.full {background: #e5fbe8;color: #27ae60;} .payment-section{margin-bottom: 40px; } .feature-checklist-table, .jee-box, .frequently-asked-questions {max-width: 800px;margin: 0 auto;} /* jee-box */ .jee-box {padding: 40px 30px;text-align: center;color: #fff;border-radius: 24px;background: linear-gradient(90deg, #005791, #09456f);} .jee-box h2 {font-size: 32px;font-weight: 700;margin-bottom: 12px;} .jee-box p {font-size: 17px;opacity: 0.95;margin-bottom: 40px;} .jee-box .btn-row {display: flex;justify-content: center;gap: 20px;margin-bottom: 25px; flex-wrap: wrap; row-gap: 10px;} .jee-box .note span {font-size: 14px;opacity: 0.9;} .jee-box .common-btn.line-btn{border-color:#fff; color: #fff;} .custom-table table thead th.features{background: var(--secondary-colors);} .custom-table table tbody tr td.features{background: rgba(250, 187, 24, 10%);} /* payment-modal-pop-up */ .payment-modal-pop-up .course-card {background: #f7fafe;padding: 15px;border-radius: 12px;margin-bottom: 15px;} .payment-modal-pop-up .course-card h3 {margin: 0 0 8px 0;font-size: 20px;color: #0f172a;} .payment-modal-pop-up .course-card .sub {font-size: 14px;color: #64748b;margin-bottom: 16px;display: flex;align-items: center;gap: 10px;} .payment-modal-pop-up .course-card .sub .icon img{width: 16px;height: auto;opacity: .6;display: inline-block;vertical-align: sub;} .payment-modal-pop-up .course-card .features {list-style: none;padding: 0;margin: 0;} .payment-modal-pop-up .course-card .features li {margin-bottom: 8px;font-size: 14px;color: #1e293b;position: relative;padding-left: 20px;} .payment-modal-pop-up .course-card .features li::before {content: "✔";position: absolute;left: 0;top: 0;color: var(--primary-colors);font-size: 14px;} .payment-modal-pop-up .modal-footer{border: none; padding: 15px 0;} .payment-modal-pop-up label{font-size: 15px;} .payment-modal-pop-up .input-group .form-control{padding: 0; background: #fff; padding: 5px 20px; font-size: 16px;} .payment-modal-pop-up .payment-details .table-scroll th{font-weight: normal; color: rgba(12, 57, 88, 80%);} .payment-modal-pop-up .access-card {display: flex;align-items: center;gap: 16px;background: rgba(12, 57, 88, 8%);padding: 10px 15px;border-radius: 12px;border: 1px solid rgba(12, 57, 88, 20%);} .payment-modal-pop-up .access-card .icon-box {width: 45px;height: 45px;background:linear-gradient(90deg, #005791, #09456f);border-radius: 50%;display: flex;justify-content: center;align-items: center;color: #ffffff;font-size: 20px;} .payment-modal-pop-up .access-card .icon-box img{ width: 20px; filter: brightness(1000);} .payment-modal-pop-up .access-card .text-box .title {font-size: 16px;color: #0f172a; line-height: normal;} .payment-modal-pop-up .access-card .text-box .subtitle {font-size: 14px;color: #64748b; line-height: normal; margin-top: 2px;} .payment-modal-pop-up .payment-details .table-scroll th, .payment-modal-pop-up .payment-details .table-scroll td{padding: 3px; font-size: 15px;} .payment-modal-pop-up .payment-details .table-scroll tr.final-amount th, .payment-modal-pop-up .payment-details .table-scroll tr.final-amount td{padding: 10px 3px 0 3px;} .payment-modal-pop-up .form-group{margin-bottom: 15px;} .payment-modal-pop-up .secure-payment-label{font-size: 14px; color: rgba(12, 57, 88, 60%); text-align: center; margin: 0;} .payment-modal-pop-up .common-btn, .payment-modal-pop-up #razorpay-button-container{width: 100%;} .payment-modal-pop-up .course-card.best-value{background: linear-gradient(90deg, #005791, #09456f);} .payment-modal-pop-up .course-card.best-value * {color: #fff !important;} .payment-modal-pop-up .course-card.best-value .sub .icon img{filter: brightness(100); opacity: .8;} .payment-modal-pop-up .course-card.best-value .features li::before{color: #fff;} table .coming-soon-label {background: rgba(233, 74, 74, 12%);padding: 4px 8px;border: solid 1px rgb(233 74 74);border-radius: 50px;text-align: center;display: inline-flex;align-items: center;} /* congratulations-pop-up */ .congratulations-pop-up div#VideoPlayButton {position: absolute;font-size: 70px;color: #fff;z-index: 1;margin: auto;text-align: center;top: 50%;left: 0;right: 0;transform: translateY(-50%);border: solid 4px rgba(204, 204, 204, 80%);width: 120px;height: 120px;display: flex;align-items: center;justify-content: center;border-radius: 50%;cursor: pointer;} .congratulations-pop-up .skip-video{ position: absolute;right: 15px;width: auto;background: #fff;color: var(--primary-colors);top: 15px; padding: 6px 20px;} .intro-video .introduction-video{background: #000;} .feature-checklist-table.custom-table table thead th:nth-child(1), .feature-checklist-table.custom-table table tbody td:nth-child(1){position: sticky; left: 0; z-index: 1; background: #e6ebee;} .feature-checklist-table.custom-table table tbody td:nth-child(1){background: #fff;} .quiz-four-screen .result-show{padding: 30px 0;} .result-show .pie{ display: flex;align-items: center;gap: 10px;justify-content: center;position: relative;width: 300px;margin: 0 auto 30px;} .result-show .pie-chart {background: radial-gradient(circle closest-side,white 0,white 85%,transparent 0%,transparent 100%,white 0),conic-gradient(var(--data, #ccc 100%));position: relative;width: 220px;height: 220px;} .result-show .score-text { position: absolute;inset: 0;margin: auto;top: 50%;transform: translateY(-50%);} .result-show .score-text span{ font-size: 40px;color: var(--primary-colors);font-weight: 900;line-height: normal;} .result-show .score-text span{display: block;} .result-show .score-text .line{ height: 6px;width: 100px;background: var(--primary-colors);margin: 0 auto;border-radius: 50px;} .result-show .total-marks{ background: rgba(39, 201, 120, 12%);padding: 20px 40px;display: inline-block;margin: 0;font-size: 30px;border-radius: 20px;} .result-show .fail-quotes, .result-show .pass-quotes{font-size: 22px;font-weight: 500;margin: 0 auto;border-top: solid 1px rgba(12, 57, 88, 20%);display: inline-block;padding: 10px 0;border-bottom: solid 1px rgba(12, 57, 88, 20%); letter-spacing: .6px;} .quiz-four-screen .result-show .have-scored{font-size: 24px; font-weight: 600;} .payment-plans-jee .upgrade-plan .all-plan .plan{min-width: 420px; flex: 0;} .payment-plans-jee .upgrade-plan .all-plan {gap: 30px;} .payment-plans-jee .upgrade-plan .plan-title{display: block;} .upgrade-plan .plan-title{ display: flex;justify-content: space-between;align-items: center; gap: 30px;} .quiz-four-screen .result-show{background: none;} .result-show .pie-chart{border-radius: 50%;} .message-bubble li.emoji-item strong {margin: 0;} /* selectPaymentType */ #selectPaymentType .select-type .form-check{ cursor: pointer;display: flex;align-items: center;gap: 12px;margin-bottom: 15px;} #selectPaymentType .select-type .form-check:last-of-type{margin-bottom: 0;} #selectPaymentType .modal-dialog{top: 50%;transform: translateY(-50%);} #selectPaymentType label{ color: var(--primary-colors); font-weight: 600; text-transform: capitalize; margin: 0;}