body {
  font-family: Arial, sans-serif;
  margin: 0;
  background: #F5F5F5;
  
    -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}


.container {
  max-width: 400px;
  margin: auto; 
  padding:0 20px; 
}

.input {
  display: block;
  width: 100%;
  padding: 12px 0;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 10px;
}

.btn {
  display: block;
    margin: 20px 0 10px;
    padding: 14px 30px; width: 100%;
    background: #0CA8AB;
    color: white;
    border: none; 
    font-size: 16px;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 2px 2px 11px rgba(0,0,0,0.33);
}
.btn-outline {
  display: block;
    margin: 20px 0 10px;
    padding: 14px 30px; width: 100%;
    background: none;
    border:1px solid #212121;
    color: #212121;  
    font-size: 16px;
    border-radius: 10px;
    text-decoration: none; 
    text-align:center;
}


a {
  color: #00a9b7;
  text-decoration: none;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.row-right {
  text-align: right;
  margin: 5px 0;
}
.otp-box{display: flex; justify-content: center;}
.otp-box input {
  width: 34px; 
  height: 46px;
  text-align: center;
  font-size: 24px;
  margin-right: 10px;
  border-radius: 8px;
  background: none;
  border: 1px solid #818181;
}
.otp-box input:focus, .otp-box input:visited, .otp-box input:active{background: #000; color:#fff}

.toast {
  background: rgba(14,163,178,0.7);
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 20px; font-size: 12px;
  color: #06373C;
  box-shadow: 0 0 10px #84EEF9;
}

.toast.success {
  background: #32c671;
}

.back-btn {
  display: inline-block;
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 20px;
}

.dot {
  display: inline-block;
  height: 10px;
  width: 10px;
  background-color: lightgray;
  border-radius: 50%;
  margin: 0 4px;
}

.dot.active {
  background-color: black;
}

.logo {
  display: block;
  margin: auto;
  width: 220px;
  height: auto;
}

/*Bhavesh 01-08-25*/

.question-checkbox {
  accent-color: #28a745;
}
.question-checkbox.or-question {
  accent-color: #ff5722;
}
.signup-link.or-question {
  background: #fff3e0;
  border-radius: 6px;
  padding: 4px;
  display: inline-block;
}

.error-msg {
  color: red;
  font-size: 12px;
  margin: 10px auto;
  text-align: center;
  padding: 9px 2px;
  border-radius: 20px;
  background-color: #f8d7da;
}
.success-msg {
  font-size: 12px;
  margin: 10px auto;
  text-align: center;
  padding: 9px 2px;
  border-radius: 20px;
  background-color: #d4edda;
  color: #155724;
}

.notification {
  display: none;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 12px;
  margin: 10px auto;
  width: 90%;
  text-align: center;
}
.block{
    display: block;
}

.success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.error {
  background-color: #f8d7da;
  color: #721c24;

  
  font-size: 12px;
  margin: 10px auto;
  text-align: center;
  padding: 9px 2px;
  border-radius: 20px;
}


#customConfirmOverlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

#customConfirmBox {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    width: 300px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    animation: fadeIn 0.3s ease;
}

/* Text */
#customConfirmBox p {
    font-size: 16px;
    margin-bottom: 20px;
    color: #333;
}

/* Buttons */
.confirm-btn {
    padding: 8px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin: 5px;
    font-size: 14px;
}

.confirm-yes {
    background-color: #28a745;
    color: white;
}

.confirm-no {
    background-color: #dc3545;
    color: white;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}


/*Transaction css*/

.transaction-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.transaction-list li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.transaction-list li:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.transaction-list img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.transaction-list h5 {
    font-size: 16px;
    margin: 0 0 5px;
    color: #333;
}

.transaction-list p {
    font-size: 14px;
    margin: 2px 0;
    color: #555;
}

.transaction-list p strong {
    color: #000;
}


    .question-list{
        display:none;
        margin:27px 0 37px 35px;
    }
    .questions_type{
        font-size:13px;
        padding: 1px;
        
    }
    .qtype-box{
        margin-bottom:7px;
        /*border-bottom:1px solid #333;*/
        /*padding: 11px 8px;*/
    }
    .qtype-box li{
        position:relative;
    }
    .qtype-box li a span:nth-child(2) {
        position: absolute;
        right: 10px;
    }
    .question-item p{
        margin:0px;
        font-size: 12px;
    }
    .qtype-header{
        margin: 10px 0px !important;
    }
    
    .display-flex{display: flex; justify-content: space-between;}
    .display-flex .buttons {
      background-color: #00bcd4;
      color: white; font-size: 8px; width: 100%;
      border: none;
      padding: 7px 12px; 
      border-radius: 8px;
      cursor: pointer; text-align: center;
    }
    .paper-name{
        font-size:12px;
    }

/*End css by me*/











.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { 
    width: 40px;
}
.m-0{margin: 0;}

.welcome-page{display: flex; justify-content: space-between;flex-direction: column; height:100vh}
.welcome-one{ flex: 1;
    align-items: center;
    display: flex;justify-content: center;}
.welcome-one h3 {color: #E90781;
    font-size: 20px;
    font-weight: 400;}
.welcome-two h3 {color: #0C7EBE;
    font-size: 18px;
    font-weight: 400; margin-bottom: 0;}
.welcome-two p { font-size: 14px; }    
.login-head{color:#0EA3B2; font-size: 22px; margin-bottom: 30px;}

.from-input-wrap{border: 1px solid #212121;
    border-radius: 10px;
    position: relative; margin: 20px 0;}
.from-input-wrap label{background: #f5f5f5;
    position: absolute;
    top: -8px;
    left: 28px;
    padding: 0 5px;
    font-size: 14px;
    font-weight: 400;}
.from-input{display: flex;
    align-items: center;
    padding: 0 10px;
    gap: 6px;}
.from-input img{}
.from-input input{margin: 6px 0 2px 0;
    border: 0;
    background: none;
    outline: 0;}
.forgot-link{font-size: 14px;}
.signup-link{font-size: 14px;margin:0}
.verify-otp p.small{font-size: 12px; padding:0 40px;margin-top: 5px; }    
.resend-otp a{font-size: 14px; color: #000;}
.home-wrap{padding-bottom: 50px;}





/*home code start*/
.home-wrap{padding-bottom: 60px; padding-top: 60px;}
.top-bar {
     position: fixed; top: 0; z-index: 999;  width: 100%; display: flex; justify-content: space-between; align-items: center;
      padding: 10px 0px; background: white; box-shadow: 0 2px 10px rgba(172,177,233,0.33);
    }
    .top-bar img { width: 40px; height: 40px; border-radius: 50%; }
    .top-bar .icons { display: flex; gap: 15px; margin-right: 15px; }
    .top-bar .icons img{ height: 26px; width: auto; margin-right: 5px;}
    .bell-count{position: relative;}
    .bell-count span{position: absolute; line-height: 16px; right: 4px; top: -4px; background: #C5C5C5; font-size: 10px; height: 16px; width: 16px; text-align: center; border-radius: 30px; display: block;}
    .section-card {
      background: white;
      border-radius: 12px;
      margin: 15px;
      padding: 15px;
      box-shadow: 4px 4px 10px #C5C5C5;
    }
    .section-card-slid {
      background: white;
      border-radius: 12px;
      margin: 15px 5px 10px 5px; display: flex; justify-content: space-between;
    flex-direction: column;
      padding: 15px;
      box-shadow: 4px 4px 10px #C5C5C5; min-height: 130px;
    }
    .section-card-slid img{ width:120px !important}
    .section-card-slid p{font-size: 13px; margin: 0;}
    .section-card h3 { margin: 0 0 5px; color: #008b9a; }
    .class-buttons {
      display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px;
    }
    .class-buttons button {
      background: #00a9b7; border: none; color: white;
      padding: 6px 14px; border-radius: 20px; font-size: 13px;
    }
    .bottom-nav {
      position: fixed; bottom: 0; width: 100%; background: #008bdb;
      display: flex; justify-content: space-around; padding: 8px 0; z-index: 1;
    }
    .bottom-nav a {
      color: white; text-align: center; font-size: 12px;
      text-decoration: none;     font-size: 11px;
      border-bottom: 3px solid #008bdb;
      padding-bottom: 4px;
    }
    .bottom-nav a.active{ border-bottom: 3px solid #fff;}
    .social-icons {
      display: flex; justify-content: space-around; padding-top: 10px;
    }
    .social-icons img {
      width: 24px;
    }
    .home-slide .owl-dots{margin:0 !important}
    .home-slide .owl-dots .owl-dot.active span{width: 25px !important;background: #3c3c3c !important;}
    .home-slide .owl-dots .owl-dot span{width: 7px !important; height: 7px !important; background: #a5a5a5 !important;}
    .left-top-bar{display: flex; align-items: center; gap: 5px; margin-left: 15px;}
    .section-card.green-card{padding: 0; margin-top: 7px;}
    .section-card.green-card .card-top{background:#0EA3B2; padding: 15px; border-radius: 12px 12px 0 0;}
    .section-card.green-card .card-top a{color:#0EA3B2; }
    .section-card.green-card .card-top h3{font-size: 17px; color: #fff; margin: 0;}
    .section-card.green-card .card-top p{margin: 0; font-size: 12px; color: #fff;}
    .section-card.green-card .card-top img{height: 20px; margin-top: 4px;}
    .section-card.green-card .card-top a{color: #0ea3b2; background: #fff; border-radius: 20px; font-size: 10px; font-weight: bold; padding: 5px 10px;}
    .owl-carousel2 {text-align: center;}
    .owl-carousel2 .owl-dots{margin:-5px 0 0 !important}
    .owl-carousel2 .owl-dots .owl-dot.active span{width: 10px !important;background: #0EA3B2 !important;}
    .owl-carousel2 .owl-dots .owl-dot span{width: 5px !important; height: 5px !important; margin: 0 2px !important; background: #9DF6FF !important;}
    .owl-carousel2 a{ background: #fff; color: #0EA3B2; font-size: 10px; padding: 10px 8px; border-radius: 10px; display: inline-block; margin: 0px auto;}
    .owl-carousel2 a.active{ background: #0EA3B2; color: #fff;  }
    .advertizement{  padding:0 15px; display: block;}
    .advertizement img{ border-radius: 12px;  width: 100%;}
    .contact-home p{margin: 0; padding: 0; font-size: 12px; font-weight: bold;} 
/*home code end*/

/* Sidebar */
.sidebar {
  position: fixed;
  top: 0;
  left: -100%;
  width: 100%;
  height: calc(100% - 100px);
  background-color: #fff;
  box-shadow: 2px 0 8px rgba(0,0,0,0.2);
  padding: 20px 0;
  transition: left 0.3s ease-in-out;
  z-index: 999;
  overflow-y: auto; 
}
.sidebar.active {
  left: 0;
}
.sidebar-header {
  text-align: center;
}
.sidebar-profile-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}
.sidebar-header h3 {
  margin: 10px 0 5px; font-size: 16px;
}
.sidebar-header p {
  margin: 0; font-size: 12px;
  color: #777;
}
.sidebar-menu {
  list-style: none;
  padding: 0;
  margin-top: 20px;
  padding-bottom: 20px;
}
.sidebar-menu li {
  margin: 0px 0; padding: 10px 20px; border-top:1px solid #DBDBDB
}
.sidebar-menu a {
  text-decoration: none;
  color: #333;
  font-weight: 500;display: flex;
    justify-content: space-between; font-weight: bold;
    align-items: center;
}
.sidebar-menu a span{display: flex;
    align-items: center;
    gap: 20px;}
.sidebar-menu a img.sidebar-menu-ico{height: 24px;}    
.sidebar-menu a img.sidebar-menu-next{height: 12px;}    
.sidebar-menu a:hover {
  color: #f03;
}

/* Close Button */
.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  background: none;
  border: none;
  color: #000;
  cursor: pointer;
}
.sidebar-head{display: flex; justify-content: space-between; margin: 0 10px;} 
.sidebar-head h4{margin: 0;
    display: flex
;
    align-items: center;
    gap: 8px;} 
.sidebar-head h4 img{    height: 22px; } 
.sidebar-head button{border: 0;
    background: none;
    padding: 0; } 
.sidebar-head button img{ height: 20px; } 
.sidebar-profile-edit{    margin-left: -30px;
    height: 20px;}     

.profile-form{padding: 0 20px;}
.profile-form .from-input-wrap label{background: #fff;}    
.profile-form .from-input-wrap input{font-size: 16px;}    
/* .profile-form .from-input-wrap .from-input img{height:40px}     */
.profile-select-row{display: flex; gap: 10px; width: 100%;margin-top: 20px;}
.select-small{border: 1px solid #212121;
    border-radius: 10px;
    width: 100%;
    padding: 8px 10px;}
.saveModal{display: none; position:fixed; top: 0; width: 100%; height: calc(100% - 60px);background-color: rgba(0, 0, 0, 0.3); 
        backdrop-filter: blur(5px); z-index: 999;
  transition: left 0.3s ease-in-out;}    
.saveModal.active{display: flex;
    align-items: center;
    justify-content: center;}   
.saveModalbox{background: #0EA3B2;
    border-radius: 15px;
    padding: 5px 20px;
    width: 160px;
    text-align: center;} 
.saveModalbox h3{margin-bottom: 0;
    color: #fff;
    font-size: 24px;} 
.saveModalbox img{} 
.saveModalbox p{margin-top: 5px;
    color: #fff;} 
.styled-select {
  position: relative;
  width: 100%;
  padding: 0 15px 0 50px;
}

.styled-select select {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid #ccc;
  appearance: none; /* Hide default arrow in most browsers */
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #fff;
  font-size: 14px;
  color: #0EA3B2;
  outline: 0;
  cursor: pointer;
  background-image: url("../assets/svg/down.svg");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 12px 12px;
} 
.styled-select select option{
  background: #0EA3B2; color: #fff; border-radius: 10px; margin: 5px 0; display: block;
}
.green-bar{background: #0EA3B2;}


/* Close Button */
.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  background: none;
  border: none;
  color: #000;
  cursor: pointer;
}
.sidebar-head{display: flex; justify-content: space-between; margin: 0 10px;} 
.sidebar-head h4{margin: 0;
    display: flex
;
    align-items: center;
    gap: 8px;} 
.sidebar-head h4 img{    height: 22px; } 
.sidebar-head button{border: 0;
    background: none;
    padding: 0; } 
.sidebar-head button img{ height: 20px; } 
.sidebar-profile-edit{    margin-left: -30px;
    height: 20px;}     

.profile-form{padding: 0 20px;}
.profile-form .from-input-wrap label{background: #fff;}    
.profile-form .from-input-wrap input{font-size: 16px;}    
/* .profile-form .from-input-wrap .from-input img{height:40px}     */
.select-small-div{
    width: 100%;
}
    
.balanceModal{display: none; position:fixed; top: 0; width: 100%; height: calc(100% - 60px);background-color: rgba(0, 0, 0, 0.3); 
        backdrop-filter: blur(5px); z-index: 999;
  transition: left 0.3s ease-in-out;}    
.balanceModal.active{display: flex;
    align-items: center;
    justify-content: center;}   
/*.saveModalbox{background: #0EA3B2;*/
/*    border-radius: 15px;*/
/*    padding: 5px 20px;*/
/*    width: 160px;*/
/*    text-align: center;} */
/*.saveModalbox h3{margin-bottom: 0;*/
/*    color: #fff;*/
/*    font-size: 24px;} */
/*.saveModalbox img{} */
/*.saveModalbox p{margin-top: 5px;*/
/*    color: #fff;} */

.styled-select {
  position: relative;
  width: 100%;
  padding: 0 15px 0 50px;
}

.styled-select select {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid #ccc;
  appearance: none; /* Hide default arrow in most browsers */
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #fff;
  font-size: 14px;
  color: #0EA3B2;
  outline: 0;
  cursor: pointer;
  background-image: url("../assets/svg/down.svg");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 12px 12px;
} 
.styled-select select option{
  background: #0EA3B2; color: #fff; border-radius: 10px; margin: 5px 0; display: block;
}
.green-bar{background: #0EA3B2;}
.subject-card {
  display: flex;
  align-items: center;
  background-color: #E7E7E7;
  padding: 5px 15px 5px 5px;
  border-radius: 10px;
  box-shadow: 1px 1px 13px rgba(0,0,0,0.25);
  margin-bottom: 15px;
}

.subject-card img {
  width: 70px;
  height: 70px;
  border-radius: 10px;
  margin-right: 10px;
  object-fit: cover;
}
.chapter-container{
  background-color: #E7E7E7;
  box-shadow: 1px 1px 13px rgba(0,0,0,0.25);
  border-radius: 10px;
  margin-bottom: 15px;}
.individual-subject-card {
  display: flex;
  align-items: center; 
  padding: 5px 15px 5px 5px;
}

.individual-subject-card img {
  width: 70px;
  height: 70px;
  border-radius: 10px;
  margin-right: 10px;
  object-fit: cover;
}

.subject-info {
  flex: 1;
}

.subject-info h2 {
  margin: 0;
  font-size: 16px; font-weight: normal;
}

.subject-info h2 span {
  float: right;
  font-size: 12px;
  color: #000;
}

.subject-info p {
  margin: 0px 0 8px;
  font-size: 13px;
  color: #000;
}

.subject-info .buttons{display: flex; gap: 10px;}
.subject-info .buttons a {
  background-color: #00bcd4;
  color: white; font-size: 8px; width: 100%;
  border: none;
  padding: 7px 12px; 
  border-radius: 8px;
  cursor: pointer; text-align: center;
}

.subject-info .buttons a:hover {
  background-color: #008c9e;
}
.subject-info .buttons button {
  background-color: #00bcd4;
  color: white; font-size: 8px; width: 100%;
  border: none;
  padding: 7px 12px; 
  border-radius: 8px;
  cursor: pointer; text-align: center;
}

.subject-info .buttons button:hover {
  background-color: #008c9e;
}

.green-bar .backico{margin-left: 5px; position: inherit;z-index: 99;}
.green-bar .backico img{  height: 20px;}
.green-bar h4{flex:1; text-align: center; font-weight: normal; font-size: 20px; margin: 8px 0; color: #fff;}
.subject-cards{padding: 20px 15px 50px;}
.rechargeModalbox{background: #fff;
    border-radius: 15px;
    padding: 5px 20px 10px; margin: 0 10px; box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
    width: 100%;
    text-align: center;} 
.rechargeModalbox h3{margin-bottom: 0;
    color: #000;
    font-size: 14px;}  
.rechargeModalbox p{margin-top: 5px; font-size: 12px;
    color: #000;} 
.rechargeModalbox-btns{display: flex; gap: 10px; justify-content: center;}    
.rechargeModalbox-btns a.cancel-btn{background: #C2BFBF;
    color: #000;
    width: 100%;
    border-radius: 10px;
    font-size: 12px;
    padding: 8px 0;}    
.rechargeModalbox-btns a.recharge-btn{background: #01C954;
    color: #fff;
    width: 100%;
    border-radius: 10px;
    font-size: 12px;
    padding: 8px 0;}   
.topics-section {  
  padding:0px;
  margin: 0px auto;
  border-radius: 8px;
  max-width: 600px; 
}

.topics-section ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.topics-section li {
  padding: 8px 10px; font-size: 12px;
  border-top: 1px solid #D7D7D7;
  cursor: pointer;
}
.topics-section li a{
  color:#000
}

.topics-section li:last-child {
  border-bottom: none;
}     
.btn-toggles {   justify-content: space-between; align-items: center;}
.btn-toggles img{ height: 9px; width: auto; margin: 0; }
.btn-toggles span { 
  font-size: 12px;
  color: #000;
}
.export-paper-wrap{ padding: 10px; display: flex; justify-content: space-between; box-shadow: 2px -7px 10px rgba(1,129,201,0.33); background: #fff; width: calc(100% - 20px); position: fixed; bottom: 60px;}
.export-paper-wrap p{margin: 0; font-size: 12px;}
.export-paper-wrap a{    background: #0EA3B2;
    color: #fff;
    font-size: 10px;
    padding: 6px 15px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 6px;}
.export-paper-wrap a img{height: 14px;}    
.export-paper-wrap h4{margin: 0; font-size: 22px;}    
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
  }

  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  .switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 28px;
  }

  .switch .slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
  }

  .switch input:checked + .slider {
    background-color: #4caf50;
  }

  .switch input:checked + .slider:before {
    transform: translateX(22px);
  }
  .all-questions{background: #E7E7E7; margin: 5px 5px 50px 5px;border-radius: 10px; }
  .main-question{padding: 6px;border-bottom:1px solid #B5B5B5}
  .main-question label{font-size: 12px;display: flex; gap: 5px; align-items: start;}
  .main-question p{margin: 0;font-size: 11px; text-align: left; color: #FF9020;}
  .question-option{ display: flex; justify-content: space-between; padding: 5px 10px 5px 0px;} 
  .question-option span{font-size: 12px; display: block; margin:3px 0;}
  .question-option div{
      margin:4px 5px;
  }
  .main-question p img {
      vertical-align: middle;
    }

  .recharge-main-page{padding: 10px 15px;}
  
  .paper-counting{    background: #0EA3B2;
    border-radius: 10px;}
  .paper-counting p{font-size: 16px;
    color: #fff;
    margin: 0;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #fff;
    padding: 8px 15px;}
  .paper-counting p span{}
  .subscriptions{background: #0EA3B2;
    border-radius: 10px;
    padding: 10px 15px;
    margin-top: 10px;}
  .subscriptions h3{    margin: 0 0 15px;
    color: #fff;
    text-align: center;
    font-weight: normal;}
  .subscriptions-box{box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.25);
    background: #fff;
    border-radius: 10px;
    margin-top: 15px;}
  .subscriptions-box-head{background: #305E62;
    color: #fff;
    font-size: 14px;
    text-align: center;
    border-radius: 10px 10px 0 0;
    padding: 5px 0;}
  .subscriptions-box-body{    display: flex;
    justify-content: space-between;
    padding: 8px 10px;
    align-items: center;}
  .subscriptions-box-body p{    font-size: 12px;
    margin: 2px 0;}
  .subscriptions-box-body a{font-size: 12px;
    background: #0EA3B2;
    color: #fff;
    padding: 5px 20px;
    border-radius: 8px;}

 
.inputslider .controls {
      display: flex;
      align-items: center;
      gap: 40px; margin-top: 20px;    justify-content: space-between;
    }

.inputslider .btn {
  width: 26px;
height: 26px;
font-size: 24px;
font-weight: bold;
border: none;
background-color: #000;
color: #fff;
border-radius: 50%;
cursor: pointer;
min-width: 0;
padding: 0;
box-shadow: 0 0 0;
margin: 0;
}

.inputslider  .value-label {
font-weight: normal;
font-size: 16px;
text-align: center;
}

.inputslider   .slider-container { 
  margin-top: 5px;
}

.inputslider   input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  height: 3px;
  border-radius: 5px;
  background: linear-gradient(to right, #0EA3B2 50%, #ccc 50%);
  outline: none;
  transition: background 450ms ease-in;
}

.inputslider   input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  background: #0EA3B2;
  border-radius: 50%;
  cursor: pointer;
  border: none;
  margin-top: 0px;
}

.inputslider   input[type=range]::-moz-range-thumb {
  width: 10px;
  height: 10px;
  background: #0EA3B2;
  border-radius: 50%;
  cursor: pointer;
  border: none;
}
.qr-main-page{    padding: 30px 15px;
    text-align: center;}
.qr-main-page img.qr-icon{height: 130px;}
.qr-main-page p{ font-size: 12px;}
.qr-main-page h5{margin-bottom: 10px;}
.qr-main-page-input{    border: 1px solid #818181;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px; color: #0EA3B2;
    margin-bottom: 40px;}
.qr-main-page-input img{ height: 26px;cursor: pointer;}

.notifications-list{padding: 20px 15px 50px;}
.notifications-list ul{margin: 0;
    padding: 0;}
.notifications-list ul li{    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #E7E7E7;
    padding: 10px 15px 10px 10px;
    border-radius: 10px;
    box-shadow: 1px 1px 13px rgba(0, 0, 0, 0.25);
    margin-bottom: 15px;}
.notifications-list ul li img{height: 30px;}
.notifications-list ul li h5{margin: 0;
    font-size: 14px;}
.notifications-list ul li p{    margin: 0;
    font-size: 12px;
    color: #919191;}

.setting-list{padding: 20px 15px 50px;}
.setting-list ul{margin: 0;
    padding: 0;}
.setting-list ul li{    display: flex;
    align-items: center;
    gap: 10px; justify-content: space-between;
    background-color: #E7E7E7;
    padding: 10px 15px 10px 15px;
    border-radius: 10px;
    box-shadow: 1px 1px 13px rgba(0, 0, 0, 0.25);
    margin-bottom: 15px;}
.setting-list ul li img{height: 24px;}
.setting-list ul li a{   font-size: 14px; display: flex; align-items: center; gap: 10px; font-weight: bold;color:#000}
.setting-list ul li div{   font-size: 14px; display: flex; align-items: center;gap: 10px; font-weight: bold;color:#000}
.setting-list .switch {  
    height: 24px;
    width: 44px;
  }
.setting-list .switch .slider:before { 
    height: 18px;
    width: 18px; 
  } 
 .setting-list .switch input:checked + .slider {
    background-color: #0EA3B2;
  } 
 .setting-list .switch input:checked + .slider:before {
    transform: translateX(18px);
  }
  .export-from{padding: 15px 20px;}
  .export-action{display: flex; justify-content: space-between; gap: 10px;}

  .payment-input{display: flex; align-items: center; justify-content: space-between; padding:10px 0;}
  .payment-input label{color: #000;}
  .payment-input input{background: #fff;  color: #000; border: 0; text-align: center; border-radius: 8px; font-size: 22px;  min-width:0; width: 45%;}
  .coupon-subtotal{background: #E7E7E7;
    margin: 0 -15px -15px;
    padding: 0 15px 15px;
    border-radius: 0px 0px 10px 10px;}
  .coupon-subtotal .subtotal{display: flex
;
    justify-content: space-between;
    font-size: 14px;
    padding: 8px 0;}
  .coupon-subtotal .subtotal span{}
  .coupon-subtotal p{margin: 0;
    padding: 10px 0 10px;
    font-size: 14px;
    color: #00BBCE;
    border-top: 1px solid #999999;}
  .coupon-subtotal .coupon-code{ display: flex
;
    gap: 10px;}
  .coupon-subtotal .coupon-code input{background: #6D6D6D;
    width: 60%;
    border-radius: 6px;
    color: #fff;
    border: 0;
    padding: 8px;
    font-size: 12px;}
  .coupon-subtotal .coupon-code button{    background: #00BBCE;
    width: 40%;
    border-radius: 6px;
    color: #fff;
    border: 0;
    padding: 8px;
    font-size: 12px;}    
.paper-card {
  background-color: #E7E7E7;
  padding: 5px 15px 5px 5px;
  border-radius: 10px;
  box-shadow: 1px 1px 13px rgba(0,0,0,0.25);
  margin-bottom: 15px;
}
.paper-card-top{display: flex;
  align-items: center;
  }
.paper-card img {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  margin-right: 10px;
  object-fit: cover;
}
.paper-card p {
    margin: 0px 0 0px;
    font-size: 13px;
    color: #000;
}
.paper-card .buttons{display: flex; gap: 10px; padding: 5px;}
.paper-card .buttons a {
  background-color: #00bcd4;
  color: white; font-size: 8px; width: 100%;
  border: none;
  padding: 7px 12px; 
  border-radius: 8px;
  cursor: pointer; text-align: center;
}

.paper-card .buttons a:hover {
  background-color: #008c9e;
}
.paper-card .buttons button {
  background-color: #00bcd4;
  color: white; font-size: 8px; width: 100%;
  border: none;
  padding: 7px 12px; 
  border-radius: 8px;
  cursor: pointer; text-align: center;
}

.paper-card .buttons button:hover {
  background-color: #008c9e;
}

.tab-container {
  max-width: 600px;
  margin: auto; 
}

.tabs {
  display: flex; 
}

.tab-button {
  flex: 1;
  padding: 15px;
  cursor: pointer;
  background: #f1f1f1;
  border: none;
  outline: none;
  transition: background 0.3s ease;
  font-size: 16px;
}

.tab-button:hover,
.tab-button.active {
  background-color: #ddd;
}

.tab-content {
  display: none;
  padding: 3px;
}

.tab-content.active {
  display: block;
}
.chapter-list{margin:0; padding: 0;}
.chapter-list li{display: flex;
    align-items: center;
    background-color: #E7E7E7;
    padding: 10px 15px 10px 10px;
    border-radius: 10px;
    box-shadow: 1px 1px 13px rgba(0, 0, 0, 0.25);justify-content: space-between;
    margin-bottom: 15px;}
.chapter-list li img{}
.chapter-list li .chapter{    display: flex;
    gap: 8px;}
.chapter-list li .chapter h4{    margin: 0;
    font-size: 14px;
    font-weight: normal;}
.chapter-list li .chapter p{    margin: 0px 0 0px;
    font-size: 12px;
    color: #000;}
.margin-rl{margin: 0 15px; width: calc(100% - 30px);}  

.random-paper{    padding: 20px 15px;}
.class-mark {    display: flex;
    justify-content: space-between;}
.class-mark p{    margin: 0;
    font-size: 12px;
    font-weight: 600;}
.divider{margin-top: 15px;text-align: center  ;}
.divider hr{margin-bottom: -11px;}
.divider span{margin: 0px auto 0;
    text-align: center;
    font-weight: 600;
    color: #0ea3b2;    display: inline-block;
    background: #f5f5f5;
    padding: 0 10px;}
.random-list{margin: 10px 0;
    padding: 0;
    list-style: none;}
.random-list li{background-color: #E7E7E7;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 1px 1px 13px rgba(0, 0, 0, 0.25);
    margin-bottom: 15px;}
.random-list li .total-qa-mark{    font-weight: bold;
    margin: 0;
    font-size: 12px;}
.random-list li .total-qa-mark span{float: right;}
.random-list li .total-qa{    margin: 5px 0;
    text-align: right;
    font-size: 12px;
    color: #7a7a7a;}
.random-list li .ask-out{display: flex;
    gap: 10px;
    font-size: 12px;
    font-weight: bold;}
.random-list li .ask-out label{}
.random-list li .ask-out input{border-radius: 10px;
    border: 1px solid #949494;
    min-width: 0;
    padding: 5px 10px;
    margin-top: 5px;
    width: calc(100% - 20px);}
.profile-wrap{padding: 10px 0 60px;}    
.full-page{height:80vh; justify-content: center; display: flex; align-items: center;}
.full-page img{width:200px}
.radio-from{border: 1px solid #333;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;}
.radio-from .label{}
.inline-radio{display: flex;  
    margin-top: 10px;
    gap: 10px;
    font-size: 14px;}
.checkbox-from{}
.checkbox-from label{
    width: 49%;
    display: inline-block;}
    
    
/*Preview paper*/

.preview-head{border-bottom: 5px double #a1a1a1;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 600; padding: 0 0 6px;
    margin-bottom:0px;
}
.preview-head p{margin: 0;}  
.paper-section{text-align: center;padding-top: 1px;}
.paper-section span{font-size: 10px;font-weight: 600; padding: 5px; margin:4px 0 5px 0;}
.question-withcount ol{padding-left: 15px; margin:0;
  font-size: 10px;color:#333}
.question-withcount .question{ 
  font-size: 10px;color:#333}  
.question-withcount ul{padding-left: 10px; list-style: lower-alpha;}
.question-withcount div.question ul{ padding-left: 20px;}  
.question-note{font-weight: 600; font-size: 10px; margin: 8px 0px 3px 0px;}
.question-footer{text-align: center;font-size: 10px;}
.main-preview{position: relative; padding:2px;}
.label-span{color: rgb(235, 164, 52); margin-left:15px;}
.class-marks {    display: flex;
    justify-content: space-between;
    margin: 0px;
}

.logo-watermark{position: absolute;
  width: 100%;
  text-align: center;
  height: 100%;
  align-items: center;
  display: flex;
  justify-content: center;}
.logo-watermark img{opacity: 0.2;
  width: 40%;}
    
/*#preview-paper-download { padding: 10px; display: flex; justify-content: space-between; box-shadow: 2px -7px 10px rgba(1,129,201,0.33); background: #fff; width: calc(100% - 20px); position: fixed; bottom: 10px;}*/

.preview-paper-download{
    text-align:center;
    margin-top:20px;
}
.preview-paper-download a{    background: #0EA3B2;
    color: #fff;
    font-size: 10px;
    padding: 6px 15px;
    border-radius: 20px;
    margin: 5px auto;
    display: flex;
    width:  90% !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;}
.preview-paper-download a img{height: 14px;}


.question { 
  display: block; /* All questions will be shown */
  transition: padding-bottom 0.5s ease, background-color 0.3s ease, border 0.3s ease;
} 
.navigation {
  margin-top: 20px;
}
.navigation button{background: #0EA3B2;
    padding: 10px 10px;
    border-radius: 10px;
    border: 0;
    color: #fff;
    width: 100%;}
.navigation div{display: flex; gap: 10px; margin-top: 10px;}    
#prevBtn:disabled, #nextBtn:disabled {
  background-color: #ddd;
  cursor: not-allowed;
}
.footer-navigation {
  text-align: center;
  margin-top: 20px;
}
.question-number {
  margin: 0 10px;
  cursor: pointer;
  padding: 5px;
  border-radius: 5px;
  background-color: #f0f0f0;
}
.question-number:hover {
  background-color: #ddd;
}
/* Highlight Effect when space is added */
.question.highlighted {
  background-color: #e0f7fa; /* Light cyan background for highlighting */
  border: 2px solid #00796b; /* Dark border when space is added */
}
.highlighted {
  background-color: #ffffcc;
  transition: background-color 0.5s;
}
.extra-spaces {
  /*transition: height 0.3s ease;*/
  /*background: repeating-linear-gradient(*/
  /*  to bottom,*/
  /*  transparent,*/
  /*  transparent 18px,*/
  /*  #000 19px*/
  /*);*/
  /*margin: 3px 0;*/
  
  display: inline-block;
  border-bottom: 1px dotted  #000;
   width: 90%;       /* screen के हिसाब से width adjust होगी */
  max-width: 520px; /* optional maximum width */
  min-width: 200px; /* optional minimum width */
   box-sizing: border-box;
  margin: 10px 5px;
}
/*.question.active .extra-space{*/
/*    background-color: #e0f7fa; */
/*  border: 2px solid #00796b;*/
    
/*}*/
.modal {
  display: none;
  position: fixed;
  z-index: 999;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5);
}
.modal-content {
  background-color: #fff;
  margin: auto;
  padding: 20px;
  width: 300px;
  border-radius: 5px;
  position: relative;
}
.close {
  color: #aaa;
  position: absolute;
  right: 10px;
  top: 5px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}
#spaceModal h3{ margin: 0;}  
#spaceModal label{ margin: 0; font-size: 12px;}  
#spaceModal input{ margin: 10px 0; padding: 10px 10px;
    border-radius: 10px; width: calc(100% - 20px);}   
#spaceModal button{ margin: 0;background: #0EA3B2;
    padding: 10px 10px;
    border-radius: 10px;
    border: 0;
    color: #fff;
    width: 100%;}