:root{ --font-family:'SFRounded'; --primary-colors:#0C3958; /* rgba(12, 57, 88, 1) */ --secondary-colors: #FABB18; /* rgba(250, 187, 24, 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);} .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; bottom: 18px; right: 20px; height: 18px;} .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 - 65px);object-fit: contain; object-position: bottom;} .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: 460px;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: 52%;right: 0;margin: 0 auto;bottom: 22px;text-align: center; color: rgba(7, 41, 64, 50%); width: auto; 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 #27c978;-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 #27c978;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: 24px;justify-content: space-between;align-items: center; position: sticky; top: 0; background: #f7f8f9; margin-bottom: 15px;} .logo-section .menu{width: 30px; height: 30px; 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: 12px 24px;font-weight: 700;letter-spacing: 0.4px;} .student-app .common-btn span{ font-size: 20px;line-height: 0;margin-right: 8px;font-weight: 400;} .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 16px; margin-bottom: 30px;} .breadcrumb .breadcrumb-item a, .breadcrumb .breadcrumb-item{font-size: 12px; color: #71787D; letter-spacing: 0.5px;} .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; margin-top: 10px;} .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: 40px;} /* .new-prompt .chat-area .welcome-word{ text-align: center;max-width: 640px;margin: 0 auto; height: 100%;} */ .new-prompt .welcome-word h2{font-size: 34px;letter-spacing: 0.01em;color: var(--primary-colors); margin-bottom: 30px; font-weight: 400;} .new-prompt .welcome-word h2 span{font-weight: bold;} .new-prompt .welcome-word h2 span span{color: var(--secondary-colors); text-transform: capitalize;} .new-prompt .welcome-word h3{font-size: 22px; font-weight: bold;} .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: 10px 10px 30px 25px;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);} /* 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 {display: 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: 9999;} 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;} 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;} .document-page .super-tutor-policy ul *{font-size: 13px; text-transform: capitalize;} .document-page ul li {display: flex; gap: 10px;} .document-page p, .document-page span, .document-page li{font-size: 16px;} /* 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);} .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;} /* .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 .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:hover{color: var(--primary-colors); transition: var(--transition);} .syllabus-tab .tab-content{ overflow: auto;padding-right: 10px;} /* 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: 50px;max-width: 520px;margin: 0 auto;opacity: .8;} .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 .nav-item.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: 3rem;} .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, #2b4e65 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: rgba(12, 57, 88, .6); 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: 30px;} .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: 20px;} .test-details .right .level {font-weight: bolder;font-size: 20px;letter-spacing: 0.01em;text-transform: capitalize;color: #fff; padding: 20px 32px; border-radius: 20px; 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: 20px;line-height: normal;color: var(--primary-colors); margin-bottom: 5px; 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: 15px; height: auto;} .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;} /* question-area */ .question-area .que{padding: 30px 0; margin-bottom: 30px; border-bottom: solid 1px rgba(0, 0, 0, 10%);} .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: bold;font-size: 24px;line-height: normal;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: 18px 30px; min-height: auto; padding-right: 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 #27c978;-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;} .question-area .card-radio-group .card-body:after{content: ''; position: absolute; right: 30px; 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 #27c978;} .question-area .card-radio-group .card-input-element:checked + .card .content_head{color: #27c978;} .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: 15px; box-shadow: none;} .question-area .card .content_head{font-weight: 500;font-size: 20px;line-height: normal;color: var(--primary-colors);} .question-area .btn-box{margin-top: 30px; display: flex; justify-content: center; align-items: center; gap: 30px;} .question-area .btn-box .btn{font-size: 20px;font-weight: bold;padding: 6px 48px 6px 6px;border-radius: 50px;background: var(--secondary-colors);display: flex;gap: 26px;align-items: center;} .question-area .btn-box .btn span{background: #fff; width: 42px; height: 42px; border-radius: 50px; display: flex; justify-content: center; align-items: center; transition: var(--transition);} .question-area .btn-box .btn span img{width: 16px; height: auto;} .question-area .btn-box .btn.next img{transform: rotate(180deg);} .question-area .btn-box .btn.next{padding: 6px 6px 6px 48px;} .question-area .btn-box .btn.next:focus, .question-area .btn-box .btn.next:hover, .question-area .btn-box .btn.next:active{outline: none; box-shadow: none;} .question-area .btn-box .btn:hover span{ transition: var(--transition); transform: scale(1.4);} .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: 128px; 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: 90px;} .submit-btn .common-btn{border-radius: 50px; padding: 15px 50px;} .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; min-width: 450px;} .quiz-four-screen .test-name span{background: #27c978; 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: 32px;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: 40px 0 30px 0; flex-wrap: wrap;} .result-show ul li{border: 1px solid #C4D6E2;border-radius: 50px; padding: 14px 30px; font-size: 18px; font-weight: bold; white-space: nowrap;} .result-show ul li.correct{color: #27c978;} .result-show ul li.incorrect{color: #E94A4A;} .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(1);} 50% { transform: scale(1.1); } 100% { transform: scale(1);} } /* 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;} .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;} .masonry-container .que-btn .common-btn.flip-btn{transition: var(--transition); cursor: pointer; opacity: 0;visibility: hidden;transform: translateY(10px); z-index: 2; position: relative; display: block; margin: auto;} .masonry-container:hover .que-btn .common-btn.flip-btn{ transition: var(--transition); opacity: 1;visibility: visible;transform: translateY(0);} @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: 5px;} .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{padding-top: 60px; margin-bottom: 40px;} .upgrade-plan .all-plan .plan{background: #FFFFFF;border: 1px solid #EFF0F7;box-shadow: 0px 2px 12px rgba(20, 20, 43, 0.08);border-radius: 24px; padding: 30px; min-width: 388px; min-width: 388px; position: relative; display: flex;flex-direction: column;justify-content: space-between; transition: var(--transition); top: 0;} .upgrade-plan .all-plan {display: flex; gap: 30px; justify-content: center;} .upgrade-plan .plan-title{margin-bottom: 30px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px;} .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 h5{font-weight: 600;font-size: 24px;color: var(--primary-colors); margin: 0;} .upgrade-plan .plan-title p{font-weight: 400;font-size: 16px;color: rgba(12, 57, 88, .6); margin: 0 0 5px;} .upgrade-plan .price {margin-bottom: 15px;} .upgrade-plan .price h2{font-size: 44px; font-weight: bold; color: var(--primary-colors);} .upgrade-plan .price h2 span{font-size: 20px; font-weight: 500; color: rgba(12, 57, 88, .6);} .upgrade-plan .benefits h6{font-weight: bold;font-size: 18px;color: var(--primary-colors); margin-bottom: 24px;} .upgrade-plan .benefits{margin-bottom: 50px;} .upgrade-plan .benefits li{font-weight: 400;font-size: 18px;line-height: 24px;color: rgba(12, 57, 88, .9); margin-bottom: 15px; display: flex; align-items: center; gap: 14px;} .upgrade-plan .benefits li:last-of-type{margin-bottom: 0;} .upgrade-plan .benefits li img {height: 26px; width: 26px; object-fit: cover;} .upgrade-plan .all-plan .plan.basic-plan{background: var(--primary-colors); top: -60px; transition: var(--transition);} .upgrade-plan .all-plan .plan.basic-plan:hover{top: -70px; transition: var(--transition);} .upgrade-plan .all-plan .plan.basic-plan *{color: #fff;} .upgrade-plan .all-plan .plan.basic-plan .price h2 span{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 .custom-table.feature-checklist-table table tbody tr td:nth-child(1) {width: 50%;} /* 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{display: flex; align-items: start; gap: 30px;} .frequently-asked-questions .title-box{flex: 0 0 200px; border: none;} .frequently-asked-questions .title-box h2{line-height: 1.5;} .frequently-asked-questions .accordion-item{background: #FFFFFF;border: none;border-radius: 0;border-top: 1px solid #DEDEDE; padding: 0; font-size: 20px; font-weight: 600; color: var(--primary-colors);} .frequently-asked-questions .accordion-button{background: transparent;border: none;box-shadow: none;border-radius: 0; font-size: 20px; font-weight: 500; color: var(--primary-colors);} .frequently-asked-questions .accordion-button, .frequently-asked-questions .accordion-body{padding: 0 20px 20px 70px;} .frequently-asked-questions .accordion-button{padding-top: 15px;} .frequently-asked-questions .accordion-body p{font-size: 18px; line-height: 150%; 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: 40px;line-height: 14px;font-weight: 400;background: none; color: var(--secondary-colors); position: absolute; left: 30px; } .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;} .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-pop-up .close.common-btn{ width: 30px;height: 30px;margin: 0;padding: 0;} .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%; margin-bottom: 20px;} .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: 22px;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: 1080px;} .upgrade-plan .complete-payment-flow{display: flex; align-items: center; gap: 60px; justify-content: space-between;} .upgrade-plan .complete-payment-flow .free-trial-flow .box h2{font-size: 20px; font-weight: 500;} .upgrade-plan .complete-payment-flow .free-trial-flow .box h6{font-size: 18px; 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 #paymentModal .modal-body{padding: 20px 30px;} .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;} /* 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-buttons, .difficulty-buttons {display: flex;gap: 10px;} button {flex: 1;padding: 10px;border: 2px solid #f0b400;background-color: #fff; color: #333;font-weight: 600;border-radius: 6px;cursor: pointer;} button.active {background-color: #f0b400;color: white;} small {display: block;margin-top: 5px;color: #666;} input[type="range"] {width: 100%;margin-top: 10px;} */ /* 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;} .feature-checklist-table{margin-bottom: 40px;} .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{background-color: #eafff5; cursor: pointer} .result-show ul li.incorrect:hover{background-color: #ffecec; cursor: pointer} .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;} /* 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-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: 800px; 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;} header .mobile-ask-anything-redirect{position: absolute;top: 0;margin: auto;background: rgba(255, 255, 255, 0);border-radius: 50px;z-index: 99;display: none;width: 40px;height: 100%;right: 0;} .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.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: 10px;} .feature-limits-pop-up .why-premium h2{font-size: 18px; font-weight: bold; margin-bottom: 10px; color: var(--primary-colors); display: flex; align-items: center; gap: 10px;} .feature-limits-pop-up .why-premium h2 img{width: 23px; height: auto;} .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-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: 15px; height: auto; margin-right: 4px;} /* loader animation */ .feature-limits-pop-up .custom-table td:nth-child(1) {min-width: 200px;} .feature-limits-pop-up .custom-table td:last-of-type {min-width: 200px;} .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: 999; background: var(--secondary-colors);} /* 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;} .get-available-premium .not-available{width: auto; padding: 5px 5px 5px 20px;} .custom-table.chapter-list-table table tbody td:last-of-type{position: sticky; right: 0; z-index: 1; background: #F7F9FA;} .feature-checklist-table.custom-table table tbody tr td{ min-width: 200px;} .subscription-plan .validity p{margin: 0;}