/* Body and Container */

            body {
              background-color: #f9f9f9;
              font-family: 'Arial', sans-serif;
              padding-top: 80px; /* Match the navbar height */
          }

          .navbar.fixed-top {
              position: fixed;
              top: 0;
              left: 0;
              right: 0;
              z-index: 1030; /* High z-index to ensure navbar is always on top */
              box-shadow: 0 4px 6px rgba(0,0,0,0.1);
              background-color: #ffffff; /* Adjust according to your theme */
          }
         
            .navbar .avatar img {
              object-fit: cover;
            }
            
            .navbar .dropdown-menu {
              margin-top: 0.75rem; /* Adjust dropdown menu spacing */
            }

            .avatar {
              display: flex;
              align-items: center;
              justify-content: center;
            }
            
            .avatar img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
            
            .navbar {
              padding-top: 10px;
              padding-bottom: 0;
            }
            
            .navbar .container-fluid.bg-light {
              padding: 5px 10px;
            }
            
            .navbar .form-control {
              width: 300px; /* Adjust according to your layout */
            }
            
            
  
  
          .container {
              margin-top: 20px;
          }
  
          /* Main Layout */
          #main-container {
              display: flex;
              flex-direction: row;
              gap: 20px;
          }
  
          #input-panel, #output-panel {
              flex: 1;
              padding: 20px;
              border: 1px solid #ddd;
              border-radius: 8px;
              background: #fff;
              box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
          }
  
          #output-panel {
              display: flex;
              flex-direction: column;
              gap: 20px;
          }
  
          /* Quill Editor */
          #reusable-quill-editor {
              height: 300px;
              border: 1px solid #ddd;
              border-radius: 8px;
          }
  
          /* Modals */
          modal-dialog.modal-xl {
  max-width: 75%;
  height: 75vh;
  margin: auto;
}



/*---------------------- Global Modal background design started ----------------------*/

:root {
  /* your brand palette */
  --brand-bg:           #101418; /* page background */
  --brand-surface:      #1A2026; /* cards, modals, panels */
  --brand-primary:      #00A99D; /* buttons, highlights */
  --brand-primary-hover:#00C2B6; /* button hover */
  --brand-secondary:    #2D3748; /* inputs, dropdowns */
  --brand-text-primary: #F7FAFC; /* main text */
  --brand-text-secondary:#A0AEC0;/* secondary text */
}

/* page & body */
#generateQuestionsPrepModal .modal-dialog {
  /* width stays whatever Bootstrap set; only max-height changes */
  max-height: 88vh;       /* grow taller */
  margin: auto;           /* center vertically & horizontally */
  display: flex;
  flex-direction: column;
}


/* target only this one modal’s content */
#generateQuestionsPrepModal .modal-content {
  background-color: var(--brand-surface) !important;
  color: var(--brand-text-primary) !important;
  border: none !important;
  border-radius: 0.5rem;
  overflow: hidden;
  flex: 1 1 auto;         /* fill available space */
  display: flex;
  flex-direction: column;
}

/* let header/body/footer sit on that same surface */
#generateQuestionsPrepModal .modal-header,
#generateQuestionsPrepModal .modal-body,
#generateQuestionsPrepModal .modal-footer {
  background-color: transparent !important;
  color: inherit;
}

#generateQuestionsPrepModal .modal-header {
  background-color: var(--brand-primary) !important;
}

#generateQuestionsPrepModal .form-control,
#generateQuestionsPrepModal .form-select {
background-color: var(--brand-secondary) !important;
color: var(--brand-text-primary) !important;
border: none;
}

#generateQuestionsPrepModal .modal-body {
  flex: 1 1 auto;
  display: flex;
  padding: 1rem;
  overflow: hidden; /* we’ll scroll inside the columns if needed */
}


/* 6) Optionally, space out the groups evenly top‐to‐bottom inside each column */
#generateQuestionsPrepModal .modal-body .col-md-8 > .form-group:nth-child(n),
#generateQuestionsPrepModal .modal-body .col-md-8 > #questionTypeSelectContainer,
#generateQuestionsPrepModal .modal-body .col-md-8 > #highCovertingAdsCopyContainer {
margin-bottom: 1.5rem;
}

#generateQuestionsPrepModal .modal-body .col-md-4,
#generateQuestionsPrepModal .modal-body .col-md-8 {
display: flex;
flex-direction: column;
overflow-y: auto;
}


/* bump up the chapter-list height */
#generateQuestionsPrepModal #chaptersSelect {
  height: 600px !important;    /* or however tall you’d like */
  min-height: 600px !important; 
}

/* if you want the wrapper to match exactly */
#generateQuestionsPrepModal .resizable-select-wrapper {
  height: 600px !important;
  min-height: 600px !important;
}


/* Make all input/select text white in just this modal */
#generateQuestionsPrepModal .form-control,
#generateQuestionsPrepModal .form-select {
color: #fff !important;
}

/* Placeholder text a bit translucent white */
#generateQuestionsPrepModal .form-control::placeholder {
color: rgba(255, 255, 255, 0.6) !important;
}

/* If you use <select> dropdowns, ensure their options also appear white */
#generateQuestionsPrepModal .form-select option {
background: var(--brand-secondary) !important; /* keeps the dark bg */
color: #fff !important;
}



/* Force the “Generate Questions” button’s text to white */
#generateQuestionsPrepModal #generateQuestionsModalBtn {
  color: #fff !important;
  font-weight: 600 !important;
}
/*=============================================
Skin for “Saved Question Type Group” Modal
=============================================*/

/* Make selected <option>s stay highlighted even when the <select> is blurred */
#chaptersSelect[multiple] option:checked {
background-color: #0d6efd !important;  /* Bootstrap’s primary blue */
color: #fff !important;
}



    


/*---------------------- Modal background design end ----------------------*/




/* SEARCH BOX */
.input-group .form-control-lg {
border-top-left-radius: .75rem;
border-bottom-left-radius: .75rem;
border-top-right-radius: 2rem;
border-bottom-right-radius: 2rem;
}
.input-group-text {
border-top-left-radius: .75rem;
border-bottom-left-radius: .75rem;
border-right: none;
}

/* COURSE CARDS */
.course-card .card {
border: none;
border-radius: 1rem;
overflow: hidden;
transition: transform .2s ease, box-shadow .2s ease;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.course-card .card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

/* CARD HEADER ACCENT BAR */
.course-card .card-body {
position: relative;
padding-top: 1.5rem;
}
.course-card .card-body::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4rem;
height: 4px;
background: linear-gradient(90deg, #007bff, #00d4ff);
}

/* VIEW COURSE BUTTON */
.course-card .btn-primary {
background: linear-gradient(135deg, #0062E6, #33AEFF);
border: none;
border-radius: 2rem;
padding: .5rem 1.5rem;
transition: background .2s ease;
}
.course-card .btn-primary:hover {
background: linear-gradient(135deg, #0051b5, #1a97cc);
}

/* Optional override if you need to shrink even more */
.container.mb-2 { margin-bottom: .5rem !important; }
.container.mt-2 { margin-top:    .5rem !important; }




/* ✅ Increase modal width */
.custom-modal-width {
  max-width: 90vw; /* Adjust width to 90% of viewport */
  width: 90%; /* Ensure it stretches */
}

/* Modal Dialog adjustments */
.custom-modal-dialog {
  max-width: 99%;
  height: 99vh;
}

/* Keep the header and footer visible, let body scroll */
.custom-modal-content {
  display: flex;
  flex-direction: column;
  max-height: 100vh; /* ensures the header won't scroll out of view */
  overflow: hidden;
}

/* ✅ Course Configuration Modal - Reduce Height */
.custom-modal-height {
  max-height: 90vh; /* Adjust modal height */
}

/* ✅ Ensure modal body is scrollable while keeping the header and footer fixed */
.custom-modal-body {
  max-height: 70vh; /* Set maximum height for body */
  overflow-y: auto; /* Enable scrolling */
  flex: 1 1 auto;
  overflow: hidden;
}

/* Custom footer styling for consistent spacing */
.custom-modal-footer {
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ✅ Ensure Close Button is Fully Visible */
.custom-modal-header {
  display: flex;
  justify-content: space-between; /* Push close button to the right */
  align-items: center;
  padding: 10px 20px; /* Adjust padding */
  background-color: #007bff;
  color: #fff;
  flex-shrink: 0;
}

/* Ensure panels are scrollable and responsive */
.left-panel,
.right-panel {
/* Use Bootstrap padding and borders */
min-height: 300px;
}

/* Toolbar can wrap or scroll horizontally if there are too many buttons */
.modal-toolbar {
  white-space: nowrap;
  flex-wrap: wrap;
  overflow-x: auto;
  
}

/* The entire modal (including header, body, footer) scrolls as one. */
/* Make the modal-dialog take full viewport height */
.custom-scroll-container {
  height: 100vh !important;
  overflow: auto;
}

/* If you want the body to be part of the same scrolling container,
   remove overflow from the body. We override it here: */
.no-overflow-hidden {
  overflow: visible !important;
}



/* ✅ Ensure close button is not cut off */
.custom-modal-header .btn-close {
  position: relative;
  right: 0;
  top: 0;
  padding: 5px;
  z-index: 10; /* Ensure it's above other elements */
}


  
  /* Optionally remove height:100% if not needed */
  .modal-content {
      display: flex;
      flex-direction: column;
      border-radius: 15px;
      
      max-height: 100vh;
      overflow: auto;
  }
          

  .modal-content:hover {
      transform: none;
      box-shadow: none;
  }
  


  .btn-gradient {
      background: linear-gradient(to right, #007bff, #6610f2);
      border: none;
      color: white;
  }

  .btn-gradient:hover {
      background: linear-gradient(to left, #007bff, #6610f2);
  }
  .modal-header {
      background: linear-gradient(to right, #007bff, #6610f2);
      color: white;
  }
  .form-control:focus {
      box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
      border-color: #007bff;
  }
  
/* Ensure modal doesn't cut off content */
.modal-body {
  overflow-y: auto;
  max-height: 90vh; /* Ensures scrolling inside modal */
}
  
          .modal-header, .modal-footer {
              justify-content: space-between;
          }
  

  
  
          /* Upload Section */
          .upload-container {
              background-color: #ffe4e6;
              border: 2px solid transparent;
              border-radius: 8px;
              padding: 20px;
              transition: all 0.3s ease;
          }
  
          .upload-container:hover {
              border-color: #ff7f8a;
              box-shadow: 0 4px 10px rgba(255, 127, 138, 0.2);
          }
  
          .upload-container h2 {
              color: #d63384;
          }
  
          .upload-container button {
              transition: all 0.3s ease;
          }
  
          .upload-container button:hover {
              background-color: #d63384;
              border-color: #c71e6e;
          }
  
          /* Buttons */
          .btn {
              box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
              /*transition: transform 0.2s;*/
              transition: all 0.3s ease-in-out;
              padding: 8px 12px; /* Adjust button spacing */
          }
  
      

          .btn:hover {
              transform: translateY(-2px);
              box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
              background-color: #0056b3;
          }

          /* Custom Button Effects */




/* Button Colors */
.btn-dark:hover {
  background-color: #343a40;
  color: white;
}

.btn-info:hover {
  background-color: #17a2b8;
  color: white;
}

.btn-warning:hover {
  background-color: #ffca2c;
  color: #000;
}

.btn-danger:hover {
  background-color: #dc3545;
  color: white;
}

.btn-primary:hover {
  background-color: #0056b3;
}

.btn-success:hover {
  background-color: #28a745;
}

/* Icon Styling */
.custom-btn i {
  margin-right: 8px;
}

  
          .play-button {
              width: 60px;
              height: 60px;
              font-size: 1.5rem;
          }
  
          /* Dropdowns */
          .dropdown-select, .blank-dropdown {
              min-width: 100px;
              margin: 0 5px;
          }
  
          /* Progress and Volume Control */
          .progress {
              height: 10px;
              background-color: #f1f1f1;
          }
  
          .progress-container {
              display: flex;
              align-items: center;
              gap: 10px;
          }
  
          #volume-control {
              margin: 0 10px;
          }
  
         
  
          /* Infographic Box */
          .infographic-box:hover {
              border: 2px solid #3498db;
              cursor: pointer;
          }
  
          /* Canvas */
          canvas {
              border: 1px solid #ccc;
              background-color: #fff;
              display: block;
              margin: 0 auto;
              width: 100%;
              height: 600px;
          }
  
          #infiniteCanvas-container {
              width: 100%;
              height: 600px;
              overflow: auto;
              position: relative;
          }
  
          /* Spinners */
          .spinner-border-sm {
              margin-left: 8px;
          }
  
          /* Responsive Design */
          @media (max-width: 768px) {
              #main-container {
                  flex-direction: column;
              }
          }



/* General Video Container */
.video-container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: white; /* Change to white or any desired color */
  overflow: hidden;
}
#course-video {
  width: 100%;
  height: auto; /* Ensure the video scales properly */
}

/* Video Player Styling */
.video-container .position-absolute {
  z-index: 2;
}

.video-player {
  z-index: 1;
  position: relative;
  width: 100%;
  height: auto;
}

/* Title Overlay */
#title-overlay {
  z-index: 2;
  color: black;
  font-family: "ui-sans-serif", -apple-system, system-ui, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
  line-height: 2; /* Increased line height for better spacing */
  top: 5%; /* Reduced the top margin for tighter spacing */
  padding: 0.5em 0; /* Reduced padding around the title and subtitle */
}



/* Custom Video Controls */
video::-webkit-media-controls {
  display: block;
  color: #333;
  background-color: #fff;
  border-radius: 10px;
}

video::-webkit-media-controls-play-button,
video::-webkit-media-controls-timeline,
video::-webkit-media-controls-volume-slider-container {
  color: #333;
  background: #fff;
  font-size: 16px;
  padding: 5px;
  border-radius: 5px;
}

video::-webkit-media-controls-mute-button,
video::-webkit-media-controls-fullscreen-button {
  color: #333;
  padding: 5px;
}

/* Adjust Title and Subtitle */
#slide-title {
  font-size: 26px; /* Slightly larger title */
  line-height: 1.8;
  margin-bottom: 8px;
}

#slide-subtitle {
  font-size: 20px;
  line-height: 1.8;
  margin-bottom: 16px;
}

         /* Script Overlay */
/* Expanded Transcript Area */
#script-overlay {
  z-index: 3;
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: left;
  padding: 1em;
  color: black;
  font-family: "ui-sans-serif", -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight: 400;
  line-height: 1.8;
  background: rgba(255, 255, 255, 0.9);
  overflow-y: auto;
  max-height: 70%; /* Expand the script area to utilize freed space */
  padding-top: 1em; /* Ensure spacing is consistent */
}


/* Transcript Overlay */
.transcript-overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  padding: 10px;
  font-size: 1rem;
  overflow-y: auto;
  max-height: 30%; /* Adjust to prevent overlap */
}

/* Ensure the Quill editor expands properly */
#transcript-content {
  height: auto !important;
  min-height: 300px;
  max-height: 80vh; /* Adjust to fit within modal */
  overflow: visible; /* Prevent hidden content */
  box-shadow: none !important; /* Remove unwanted shadow */
}

/* Show Transcript Button */
.transcript-overlay.show {
  display: flex;
}

#slide-normalfont,
.transcript-text {
  font-size: 18px; /* Larger font size for better readability */
  line-height: 1.8; /* Improved spacing between lines */
  padding: 10px;
  margin-bottom: 16px;
  word-wrap: break-word;
  white-space: pre-wrap; /* Preserve whitespace formatting */
}

#slide-points li {
  font-size: 1.2rem;
  margin-bottom: 0.7rem; /* Increased margin for better spacing between list items */
}

.modal-backdrop + #generated-video-container {
  display: none;
}


.spinner-border {
      vertical-align: middle;
      margin-left: 10px;
  }



  .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1050;
  display: none;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
}

.dropdown-menu.show {
  display: block;
}

















/* Generated course css part used started */


/* .banner {
  background-color: #1f2a3b;
  color: white;
  padding: 40px 20px;
  text-align: center;
} */


      .banner h1 {
          font-size: 2.2rem;
          font-weight: bold;
      }

      .banner .badge {
          background-color: #00c851;
          color: #ffffff;
          font-size: 0.9rem;
      }

      .filter-container {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 20px;
      }

      .filter-tags {
          margin: 20px 0;
      }

      .filter-tags .btn {
          margin: 5px;
      }

      .dropdown-search {
          width: 100%;
      }

      .card {
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          cursor: pointer;
          transition: transform 0.2s;
      }

      .card:hover {
          transform: translateY(-5px);
      }

      .author-placeholder {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          background-color: #ddd;
          display: inline-block;
      }
 
/* Generated course css part used ended */


  /* Example styles directly in the template */
  .question-card {
      border: 1px solid #ccc;
      border-radius: 5px;
      padding: 15px;
      background-color: #f9f9f9;
  }

  .question-card h5 {
      font-size: 18px;
  }




  .btn-danger {
      font-size: 12px;
  }

  .answer-options-container {
      margin-top: 10px;
  }

  #logo-image {
      position: absolute;
      top: 10px; /* Reduce the top margin */
      left: 10px; /* Reduce the left margin */
      max-width: 80px; /* Adjust the logo size */
      max-height: 80px; /* Prevent it from becoming too large */
      padding: 0; /* Remove padding around the logo */
      margin: 0; /* Remove additional margin */
      z-index: 10; /* Ensure it stays on top */
  }
  
  #header-section {
      padding-top: 60px; /* Add some top padding to avoid overlap */
  }
  
  @media (max-width: 768px) {
      #logo-image {
          max-width: 60px; /* Adjust for smaller screens */
          top: 5px;
          left: 5px;
      }
      #header-section {
          padding-top: 40px;
      }
  }
  




#leftareainputcode {
  color: #000 !important;
  }
  
  #rightsideoutputtextarea {
  color: #000 !important;
  }




.custom-btn:hover {
  background-color: #35ce56;
  color: white;
}












/* css for course_details started */



      .banner {
          background: linear-gradient(90deg, #003366, #00509e);
          color: white;
          padding: 50px 20px;
          text-align: center;
      }

      .banner h1 {
          font-size: 2.8rem;
          font-weight: bold;
      }

      .badge-custom {
          background-color: #ffc107;
          color: #333;
      }

      .section-title {
          font-size: 1.8rem;
          font-weight: bold;
          margin-bottom: 20px;
          color: #333;
      }

      .card:hover {
          transform: scale(1.03);
          transition: all 0.3s ease-in-out;
      }

      .chapter-card {
          background-color: #f1f1f1;
          border: none;
          border-radius: 10px;
          padding: 15px;
          margin-bottom: 10px;
          transition: all 0.3s ease-in-out;
      }

      .chapter-card:hover {
          background-color: #e6e6e6;
          transform: scale(1.02);
      }

      .progress-bar {
          background-color: #28a745;
      }

      .sidebar-card {
          border: none;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          margin-bottom: 20px;
      }

      .btn-primary-custom {
          background-color: #00509e;
          color: white;
      }

      .btn-primary-custom:hover {
          background-color: #003366;
      }


      .animate-hover:hover {
          animation: pulse 1s infinite;
      }

      @keyframes pulse {
          0% { transform: scale(1); }
          50% { transform: scale(1.05); }
          100% { transform: scale(1); }
      }

      .collapsed-content {
          max-height: 50px;  /* Show only a limited portion */
  overflow: hidden;
  text-overflow: ellipsis;
  transition: max-height 0.3s ease-in-out;
      }

      .expanded-content {
          max-height: none; /* Expand fully */
      }

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

      .chapter-section li {
          margin-bottom: 10px;
      }

      .card {
          transition: all 0.3s ease-in-out;
          border: 1px solid #ddd;
          box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
      }

      .card:hover {
          transform: translateY(-5px);
          box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
      }

      .table-bordered {
  border: 1px solid #ddd;
  border-radius: 8px;
}

.table th {
  background-color: #f8f9fa;
  font-weight: bold;
  text-align: left;
  padding: 15px;
}

.table td {
  padding: 15px;
  vertical-align: top;
  font-size: 16px;
  line-height: 1.6;
}

ul, ol {
  margin: 0;
  padding-left: 20px;
}

li {
  margin-bottom: 10px;
}


.card-body {
  font-size: 14px;
  padding: 15px;
}

.text-truncate-content {
  overflow: hidden;
  max-height: 4.8em; /* Approx 3 lines */
  position: relative;
  line-height: 1.6;
}

.collapsed-content {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Number of lines to show */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.expanded-content {
  -webkit-line-clamp: unset;
  max-height: unset;
  overflow: visible;
}


.text-primary {
  color: #007bff;
  cursor: pointer;
}

.text-primary:hover {
  text-decoration: underline;
}

.btn-outline-primary {
  color: #007bff;
  border: 1px solid #007bff;
  transition: background-color 0.3s, color 0.3s;

  /* Reduce spacing between buttons */
  margin: 0.2px; /* Adjust the margin to reduce space */
  padding: 0.3rem 0.5rem; /* Optional: Adjust padding if needed */
}

      .btn-outline-primary:hover {
          background-color: #28a745;
          color: white;
      }




.modal-header .btn-close {
  background-color: white;
  border-radius: 50%;
  padding: 0.3rem;
}

.modal-header .btn-close:hover {
  background-color: #135c30;
}

.modal-body {
  max-height: 95vh; /* Restrict modal height */
  overflow-y: auto; /* Allow scrolling */
  padding: 1.5rem;
}
      .transcript-section {
      margin-bottom: 20px;
  }

 /* Styling for transcript title */
 .transcript-title {
      font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
      font-style: normal;
      font-weight: bold;
      color: rgb(0, 0, 0);
      font-size: 24px;
      line-height: 32px;
      margin-bottom: 16px;
  }

  /* Styling for transcript content */
  .transcript-section p {
      font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
      font-style: normal;
      font-weight: 400;
      color: rgb(0, 0, 0);
      font-size: 18px;
      line-height: 26px;
      margin: 0 0 12px 0;
  }

  .editable {
  border: 1px dashed #007bff;
  padding: 10px;
  background-color: #f9f9f9;
}

/* Fix inner Quill editor scrolling */
.ql-editor {
  min-height: 300px;
  max-height: none; /* Prevent forced scrolling */
  overflow-y: auto;
  color: #000 !important;
  font-family: 'Poppins', sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
}
.translator-section label {
  font-size: 0.85rem;
}

  .ql-editor h1 {
      font-size: 2rem;
      margin-bottom: 1rem;
  }

  .ql-editor h2 {
      font-size: 1.75rem;
      margin-bottom: 0.8rem;
  }

  .ql-editor h3 {
      font-size: 1.5rem;
      margin-bottom: 0.6rem;
  }

  .ql-editor ul {
      margin: 1rem 0;
      padding-left: 1.5rem;
  }

  .ql-editor li {
      margin-bottom: 0.5rem;
  }

  .ql-editor pre {
      background-color: #f4f4f4;
      padding: 10px;
      border-radius: 5px;
      overflow-x: auto;
  }

  .ql-editor table {
      border-collapse: collapse;
      width: 100%;
      margin: 1rem 0;
  }

  .ql-editor table th,
  .ql-editor table td {
      border: 1px solid #ddd;
      padding: 10px;
      text-align: left;
  }

  .ql-editor img {
      max-width: 100%;
      border-radius: 5px;
      margin: 10px 0;
  }

  /* Quill toolbar enhancements */
  .ql-toolbar {
      background: #f9f9f9;
      border-bottom: 1px solid #ddd;
  }


.custom-modal .modal-body {
  background-color: #ffffff;
  overflow-y: auto; /* Add scrolling inside the body */
  height: calc(100% - 60px); /* Adjust for header and footer height */
  
}


.custom-modal .modal-footer button {
  transition: none;
}

.custom-modal .modal-footer button:hover {
  transform: none;
}

.modal-xl {
  max-width: 90%;
  max-height: 80%;
}

.quill-editor-container {
  background-color: #fafafa;
}




/* Increase Modal Height */
.custom-modal .modal-dialog {
  height: 90%; /* Adjust as needed */
  max-height: 90%; /* Ensure it does not exceed the viewport */
  overflow: hidden; /* Prevent scrollbars outside */
}
.custom-modal .modal-content {
  border-radius: 12px;
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2);
  
}
/* Modal Title Background Color */
.custom-modal .modal-header {
  background-color: #0069d9;
  color: white;
  border-bottom: 2px solid #0056b3;
}

.custom-modal .modal-footer {
  background-color: #f8f9fa;
  border-top: 1px solid #e0e0e0;
}
.custom-modal .modal-toolbar button {
  border-radius: 25px;
  transition: transform 0.3s, box-shadow 0.3s;
}
.custom-modal .modal-toolbar button:hover {
  transform: translateY(-2px);
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
}





#modal-output-container {
  height: calc(100% - 20px);
  overflow-y: auto;
  background-color: #f9f9f9;
}

/* Adjust Modal Body and Footer */
#chapterDetailsModal .modal-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow-y: auto;
}

#chapterDetailsModal .modal-footer {
  position: sticky; /* Keep the footer fixed at the bottom */
  bottom: 0;
  background-color: #fff; /* Match modal background */
  border-top: 1px solid #ddd; /* Optional: Add a border for separation */
  justify-content: flex-start; /* Align buttons to the left */
  gap: 1px; /* Add spacing between buttons */
  padding: 10px; /* Optional: Add padding for better spacing */
}



.modal-footer {
  background-color: #f8f9fa;
  border-top: 1px solid #ddd;
  position: relative;
  z-index: 10;
}




.modal-footer .btn {
  border-radius: 20px;
  padding: 0.5rem 1.5rem;
}



.custom-button:focus {
  outline: none;
  box-shadow: 0 0 4px #135c30;
}




.modal-header {
      background-color: #167347;
      color: white;
      padding: 1rem;
      border-bottom: 2px solid #135c30;
  }




  .left-panel {
  background-color: #f8f9fa;
  box-shadow: inset 0px 0px 12px rgba(0, 0, 0, 0.1);
  border-radius: 2px;
}

/* Right Panel Styling */
.right-panel {
  box-shadow: inset 0px 0px 12px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

  .custom-button {
  background-color: #167347;
  color: white;
  border-radius: 20px;
  transition: all 0.3s ease-in-out;
}

.custom-button:hover {
  background-color: #135c30;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

  #dynamic-output {
      font-size: 1rem;
      line-height: 1.5;
  }






#output-quill-editor {
  height: 100%; /* Fill the parent container */
  border: 1px solid #ddd; /* Add a border for separation */
  border-radius: 8px; /* Rounded corners for aesthetics */
  background-color: #ffffff; /* Match modal background */
  padding: 10px; /* Inner padding for usability */
  overflow-y: auto; /* Enable scrolling for overflowing content */
}

.ql-toolbar {
  background-color: #f8f9fa; /* Match the modal styling */
  border-bottom: 1px solid #ddd;
}

.ql-container {
  height: calc(100% - 42px); /* Adjust height to fit toolbar */
  font-size: 14px; /* Adjust font size */
  line-height: 1.5; /* Improve readability */
}

.quill-editor-container .ql-editor {
  font-size: 16px; /* Larger font for readability */
  line-height: 1.6; /* Add spacing between lines */
  color: #333; /* Comfortable text color */
  padding: 10px;
  background-color: #fff; /* Neutral background for better contrast */
  border: 1px solid #ddd;
  border-radius: 5px;
}











/* Gutenberg Block Styling */
#transcript-content .ql-editor {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 8px;
  border: 1px solid #ddd;
}

#transcript-content .ql-editor h1,
#transcript-content .ql-editor h2,
#transcript-content .ql-editor h3 {
  margin-bottom: 20px;
  color: #003366;
}

#transcript-content .ql-editor h1 {
  font-size: 2rem;
  font-weight: bold;
}

#transcript-content .ql-editor h2 {
  font-size: 1.75rem;
  font-weight: bold;
}

#transcript-content .ql-editor h3 {
  font-size: 1.5rem;
  font-weight: bold;
}

#transcript-content .ql-editor p {
  font-size: 1rem;
  margin-bottom: 15px;
  color: #555;
}

#transcript-content .ql-editor ul,
#transcript-content .ql-editor ol {
  margin-left: 20px;
  margin-bottom: 15px;
}

#transcript-content .ql-editor li {
  margin-bottom: 10px;
  color: #555;
}

#transcript-content .ql-editor strong {
  font-weight: bold;
  color: #000;
}

#transcript-content .ql-editor img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 15px;
}

#transcript-content .ql-editor .wp-block-columns {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

#transcript-content .ql-editor .wp-block-column {
  flex: 1;
}

#transcript-content .ql-editor .wp-block-group {
  margin-bottom: 20px;
}


/* css for course_details ended */




/* Grid container for equal buttons */
.equal-btn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 5px;
}
/* Ensure each button fills its grid cell */
.equal-btn-grid button,
.equal-btn-grid a {
  width: 100%;
  /* Optional: Make font-size or padding uniform */
  padding: 0.5rem 1rem;
}



/* Light Gradient Background for Course Cards */
.course-card .card {
  background: linear-gradient(135deg, #f9f9f9, #e3f2fd); /* Light gradient */
  border: none;
  border-radius: 10px;
  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  transition: transform 0.3s ease-in-out;
}

.course-card .card:hover {
  transform: scale(1.03); /* Slight scale-up on hover */
}

/* Writer Image Placeholder */
.author-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-image: url("{% static 'icons-writers-male-and-female.png' %}"); /* Default placeholder */
}



#questionsModal {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.modal.fade {
  transition: none !important;
}


.modal {
  z-index: 1055 !important; /* Ensure it's above other elements */
}

.modal-backdrop {
  z-index: 1050 !important; /* Ensure backdrop is below the modal */
}

body.modal-open {
  overflow: hidden !important; /* Prevent scrolling behind modal */
}


#performanceAnalysisText::-webkit-scrollbar {
  width: 6px;
}
#performanceAnalysisText::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 3px;
}


.small-card {
  max-width: 100px; /* Adjust as needed */
  margin: 0 auto;
}


@font-face {
  font-family: "Noto Sans Bengali";
  src: url("/static/fonts/NotoSansBengali-Regular.woff2") format("woff2");
}

body[data-lang="bn"] {
  font-family: "Noto Sans Bengali", sans-serif;
}

#selected-question-type {
  font-size: 0.85rem;
  font-weight: 500;
}
#loadingOverlay {
  transition: opacity 0.3s ease-in-out;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
  }
  
  @keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.75; }
  }
  
  .animate-pulse {
  animation: pulse 1.8s ease-in-out infinite;
  }  

  .hover-shadow:hover {
      transform: scale(1.02);
      box-shadow: 0 0 15px rgba(0,0,0,0.2);
    }
    
    .resizable-select-wrapper {
      resize: vertical;
      overflow: auto;
      min-height: 100px;
      max-height: 400px;
      border: 1px solid #ccc;
      border-radius: 4px;
      padding: 0;
    }
    
    .resizable-select-wrapper select {
      height: 100%;
      width: 100%;
      border: none;
      outline: none;
      box-shadow: none;
    }
    img.rounded-circle {
      object-fit: cover;
      background-color: #f1f1f1;
  }
  #leaderboardModal .modal-dialog {
      animation: zoomIn 0.3s ease-in-out;
    }
    
    @keyframes zoomIn {
      from { transform: scale(0.7); opacity: 0; }
      to { transform: scale(1); opacity: 1; }
    }
    .highlight {
      background-color: #dff0d8;
      font-weight: bold;
    }
    .list-group-item img {
      object-fit: cover;
      border: 1px solid #ccc;
  }



  .custom-btn {
      background-color: #085ed6 !important;
      color: #fff !important;
      border: 1px solid #085ed6 !important;
      transition: all 0.2s ease-in-out;
      white-space: normal;
      text-align: center;
      padding: 8px 12px;
      min-width: 140px;
    }
    .mark-icon {
      font-size: 1.2rem;
      margin-left: 6px;
    }
    .text-success {
      color: green;
    }
    .text-danger {
      color: red;
    }
    
  







    @media (max-width: 768px) {
      body {
        font-size: 15px;
      }
    
      .banner h1 {
          font-size: 2.2rem;
        }
        
        @media (max-width: 768px) {
          .banner h1 {
            font-size: 1.4rem;
            line-height: 1.3;
          }
        }
        
    
      .section-title {
        font-size: 1.4rem;
      }
    
      .btn-lg {
        font-size: 1rem;
        padding: 10px;
      }
    
      table {
        font-size: 14px;
      }
    
      .card-body {
        font-size: 14px;
      }
    }
  
    @media (max-width: 768px) {
      table th, table td {
        font-size: 12px;
        white-space: nowrap;
      }
    }

    
    @media (max-width: 768px) {
      .custom-btn {
        width: 100% !important;
        font-size: 0.9rem;
      }
    }
    

    .modal.fade .modal-dialog {
      transition: transform 0.3s ease-out, opacity 0.3s ease-out;
      transform: translateY(-40px);
      opacity: 0;
    }
    .modal.fade.show .modal-dialog {
      transform: translateY(0);
      opacity: 1;
    }
    



/* Apply row-level hover effect */
#generatedquestionsModal .option-row {
  border-radius: 8px;
  transition: all 0.3s ease;
  padding: 2px;
}

/* Hover effect on the full row */
#generatedquestionsModal .option-row:hover {
  background-color: #14532d; /* Deep green */
  color: white;
  box-shadow: 0 2px 8px rgba(20, 83, 45, 0.2);
  transform: scale(1.01);
}

/* Ensure label and input show pointer and stay aligned */
#generatedquestionsModal .form-check-input:hover,
#generatedquestionsModal .form-check-label:hover {
  cursor: pointer;
  background-color: transparent;
  color: inherit;
  box-shadow: none;
}

/* Remove double hover effects from form-check directly */
#generatedquestionsModal .form-check:hover {
  background-color: transparent;
  box-shadow: none;
  transform: none;
}

#generatedquestionsModal .form-check-label {
  display: block;
  width: 100%;
}
#generatedquestionsModal .form-check-input:checked + .form-check-label {
  background-color: #166534; /* Slightly deeper green */
  color: white;
  font-weight: 600;
}

/* 🟢 Hover Effect for Saved Questions List Items */
#savedQuestionsModal .list-group-item {
  transition: all 0.2s ease-in-out;
  border-radius: 0.5rem;
  border: 1px solid #eee;
  padding: 12px 16px;
  background-color: #fff;
}

/* 🟢 On Hover */
#savedQuestionsModal .list-group-item:hover {
  background-color: #e0f2fe; /* Light Blue */
  box-shadow: 0 2px 6px rgba(0, 123, 255, 0.15);
  transform: scale(1.01);
  cursor: pointer;
}

/* 🎯 Ensure nested buttons retain their style */
#savedQuestionsModal .list-group-item button {
  cursor: pointer;
  transition: transform 0.2s ease;
}

#savedQuestionsModal .list-group-item button:hover {
  transform: scale(1.05);
}

.fade-in {
  animation: fadeIn 0.3s ease-in forwards;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
#saved-questions-list {
  min-height: 200px;
}



.step-by-step-guide {
  font-family: 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.2;
  color: #2c2c2c;
}

.step-by-step-guide h2,
.step-by-step-guide h3 {
  color: #2a5298;
  margin-top: 1.2em;
}

.step-by-step-guide ul,
.step-by-step-guide ol {
  margin-left: 1.5em;
}

.step-by-step-guide p {
  margin-bottom: 0.9em;
}
.lecture-sheet-output {
  white-space: pre-wrap;
  font-size: 16px;
  line-height: 1.6;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  padding: 10px;
}


.lecture-sheet-output h2,
.lecture-sheet-output h3 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.lecture-sheet-output p {
  margin-bottom: 0.5rem;
}

.lecture-sheet-output ul,
.lecture-sheet-output ol {
  margin: 0.5rem 0 0.5rem 1.25rem;
  padding: 0;
}

.lecture-sheet-output li {
  margin-bottom: 0.4rem;
}

  

.assignment-sheet h2 {
  font-size: 1.5rem;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}
.assignment-sheet h3 {
  font-size: 1.25rem;
  margin-top: 1rem;
}
.assignment-sheet p {
  line-height: 1.6;
  margin-bottom: 0.8rem;
}
.assignment-sheet ul,
.assignment-sheet ol {
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}
.assignment-sheet strong {
  font-weight: bold;
}

.language-test-sheet h3 {
  font-size: 1.25rem;
  margin-top: 1.2rem;
  margin-bottom: 0.5rem;
  color: #2a2a2a;
}

.language-test-sheet p {
  margin-bottom: 0.8rem;
  line-height: 1.6;
}

.language-test-sheet blockquote {
  background-color: #f8f9fa;
  border-left: 4px solid #007bff;
  padding: 0.75rem 1rem;
  font-style: italic;
}

.language-test-sheet ol {
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

.language-test-sheet strong {
  color: green;
}
.written-test-sheet h3,
.written-test-sheet h4 {
  margin-top: 20px;
  font-weight: 600;
  color: #1a1a1a;
}

.written-test-sheet p {
  margin: 8px 0;
  line-height: 1.6;
}

.written-test-sheet ul, .written-test-sheet ol {
  padding-left: 20px;
  margin-bottom: 15px;
}

.written-test-sheet strong {
  color: #2d6a4f;
}
.vocab-table table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

.vocab-table th, .vocab-table td {
  border: 1px solid #ccc;
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

.vocab-table th {
  background-color: #f2f2f2;
  font-weight: bold;
}
.test-paper-guide h2 {
  margin-top: 1.25rem;
  font-size: 1.6rem;
  border-bottom: 1px solid #ccc;
  padding-bottom: 0.3rem;
}

.test-paper-guide h3 {
  font-size: 1.3rem;
  margin-top: 1rem;
}

.test-paper-guide ol, .test-paper-guide ul {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.test-paper-guide p {
  margin-bottom: 0.8rem;
  line-height: 1.6;
}
.exam-suggestion-guide h2 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.exam-suggestion-guide h3 {
  font-size: 1.2rem;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.exam-suggestion-guide ul, .exam-suggestion-guide ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.exam-suggestion-guide p {
  margin-bottom: 0.8rem;
  line-height: 1.6;
}
.comprehension-guide {
  font-size: 1rem;
  line-height: 1.6;
  padding: 1rem;
}

.comprehension-guide h3 {
  margin-top: 1.5rem;
  font-size: 1.3rem;
}

.comprehension-guide ul,
.comprehension-guide ol {
  padding-left: 1.8rem;
  margin-bottom: 1rem;
}

.comprehension-guide p {
  margin-bottom: 1rem;
}
.exam-sheet {
  background: #fff;
  padding: 20px;
  font-size: 1rem;
  line-height: 1.7;
  font-family: "Noto Sans Bengali", "Segoe UI", sans-serif;
  color: #1a1a1a;
  border-radius: 8px;
  white-space: pre-wrap;
  overflow-x: auto;
  max-height: 600px;
}


.exam-sheet h3 {
  margin-top: 1.4em;
  font-size: 1.2em;
  color: #333;
  font-weight: 600;
}

.exam-sheet p {
  margin: 0.8em 0;
}

.exam-sheet ul {
  margin: 1em 0 1em 2em;
  padding-left: 1.2em;
}

.exam-sheet li {
  margin-bottom: 0.5em;
}
.exam-sheet {
  background: #fff;
  padding: 20px;
  font-size: 1rem;
  line-height: 1.7;
  font-family: "Noto Sans Bengali", "Segoe UI", sans-serif;
  color: #1a1a1a;
  border-radius: 8px;
}

.exam-sheet h3 {
  margin-top: 1.4em;
  font-size: 1.2em;
  color: #333;
  font-weight: 600;
}

.exam-sheet p {
  margin: 0.8em 0;
}

.exam-sheet ul {
  margin: 1em 0 1em 2em;
  padding-left: 1.2em;
}

.exam-sheet li {
  margin-bottom: 0.5em;
}
.exam-sheet {
  background: #fff;
  padding: 20px;
  font-size: 1rem;
  line-height: 1.7;
  font-family: "Noto Sans Bengali", "Segoe UI", sans-serif;
  color: #1a1a1a;
  border-radius: 8px;
}

.exam-sheet h3 {
  margin-top: 1.4em;
  font-size: 1.2em;
  font-weight: bold;
  color: #222;
  font-weight: 600;
}

.exam-sheet p {
  margin: 0.8em 0;
}

.exam-sheet ul {
  margin: 1em 0 1em 2em;
  padding-left: 1.2em;
}

.exam-sheet li {
  margin-bottom: 0.5em;
}
.interview-qna {
  background: #fff;
  padding: 20px;
  font-size: 1rem;
  line-height: 1.75;
  font-family: "Segoe UI", sans-serif;
  color: #222;
  border-radius: 8px;
}

.interview-qna h3 {
  margin-top: 2em;
  font-size: 1.3em;
  color: #0a0a0a;
  border-bottom: 1px solid #ccc;
  padding-bottom: 5px;
}

.interview-qna h4 {
  margin-top: 1.2em;
  font-size: 1.15em;
  color: #1e1e1e;
}

.interview-qna p {
  margin: 0.9em 0;
}

.interview-qna ul {
  margin: 1em 0 1em 2em;
  padding-left: 1.2em;
}

.interview-qna li {
  margin-bottom: 0.4em;
}
.quiz-questions-html {
  font-family: "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.75;
  background-color: #fff;
  padding: 20px;
  color: #222;
  border-radius: 8px;
}

.quiz-questions-html h3 {
  font-size: 1.3em;
  margin-top: 1.5em;
  color: #0a0a0a;
  border-bottom: 1px solid #ccc;
  padding-bottom: 5px;
}

.quiz-questions-html h4 {
  font-size: 1.1em;
  margin-top: 1em;
  color: #1e1e1e;
}

.quiz-questions-html p {
  margin: 0.8em 0;
}

.quiz-questions-html ul {
  margin: 1em 0 1em 2em;
  padding-left: 1em;
}

.quiz-questions-html li {
  margin-bottom: 0.4em;
}
.creative-answer {
  font-size: 1.2rem;
  color: #0d6efd;
  margin-top: 5px;
}

.read-aloud-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.speaker-btn {
  background-color: #007bff;
  border: none;
  color: white;
  padding: 6px 12px;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
}
.speaker-btn:hover {
  background-color: #0056b3;
}
.exam-sheet {
  white-space: pre-wrap;
  font-size: 16px;
  line-height: 1.6;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  padding: 10px;
}
#play-audio {
  font-weight: 600;
  font-size: 14px;
  border-radius: 5px;
}
.exam-sheet {
  white-space: pre-wrap;
  font-size: 16px;
  line-height: 1.6;
}


.longform-article {
  padding: 1rem;
  font-size: 1.05rem;
  line-height: 1.75;
  color: #333;
}

.longform-article h2, 
.longform-article h3 {
  margin-top: 1.5rem;
  color: #212529;
  font-weight: 600;
}

.longform-article ul {
  padding-left: 2rem;
}

.longform-article ul li {
  margin-bottom: 0.5rem;
}

.longform-article p {
  margin-bottom: 1rem;
}
.grammar-guide-output {
  font-family: "Segoe UI", "Helvetica Neue", sans-serif;
  background-color: #fff;
  padding: 2rem;
  margin-top: 1rem;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
  font-size: 1rem;
  line-height: 1.7;
  color: #333;
}

.grammar-guide-output h2 {
  font-size: 1.75rem;
  margin-top: 1.5rem;
  color: #003366;
  border-bottom: 2px solid #003366;
  padding-bottom: 0.3rem;
}

.grammar-guide-output h3 {
  font-size: 1.4rem;
  margin-top: 1.2rem;
  color: #005599;
}

.grammar-guide-output p {
  margin-bottom: 1rem;
}

.grammar-guide-output blockquote {
  background: #f0f8ff;
  border-left: 5px solid #87cefa;
  padding: 0.75rem 1rem;
  font-style: italic;
  margin: 1rem 0;
}

.grammar-guide-output details {
  background: #eef6ff;
  padding: 0.6rem 1rem;
  margin-bottom: 1rem;
  border-radius: 8px;
  border-left: 3px solid #3399ff;
}

.grammar-guide-output details summary {
  font-weight: bold;
  cursor: pointer;
  color: #0066cc;
}

.grammar-guide-output ul {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.grammar-guide-output li {
  margin-bottom: 0.4rem;
}
.highlight-list {
  list-style-type: disc;
  padding-left: 24px;
  margin: 0;
}

.highlight-list li {
  margin-bottom: 12px;
}