/* Google Font Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

:root{
  /* Global fallbacks – per‑client themes override these via client_theme.css */
  --primary-color: #8F469B;
  --secondary-color: #494C9E;
  --bg-color: #f8f9ff;
  --navbar-bg-color: #b2c9ff;
  --sidebar-color: var(--navbar-bg-color);
  --btn-color: #6918b4;
  --table-header-color: #2b333f;

  --side-bar-bg-color: #f0f0f5d2;
  --modul-bg-color: ##555;
  --flashcard-header-color: #6c5ce7;
  --quiz-header-color: #fd79a8;
  --assist-subject-card-color:#ddd;
  --blue-primary: var(--btn-color);

  /* The platform logos colors */

   --color-blue-light: #3498db33;
  --color-blue-dark: #3498db80;
  --color-red-shadow: #e6060670;
  --color-red-dark: rgb(204 0 0 / 36.1%);
  --color-green-light: #2ecc7133;
  --color-green-dark: #2ecc7180;
  --color-blue-variant-light: #22a8e648;
  --color-blue-variant-darik: #222fe680;
  --color-lime-light: #3ce74d33;
  --color-lime-dark: #3ce78680;
  --color-pink-light: #e90ff133;
  --color-pink-dark: #e90ff180;
  --color-white-transparent-2: #fff3;
  --color-red-shadow: #ff44444d;
  --bg-sequential-colour-grey:linear-gradient(to right top, #110f0f, #1a1818, #333131, #3b3838, #a3a3a3);

}

*{
  font-family: "Poppins" , sans-serif;
}

/* Shared mobile auth / landing / login layout
   (used by mobile landing page and mobile login) */
@media (max-width: 767.98px) {
  .mobile-auth-landing {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
  }

  .mobile-auth-landing main {
    flex: 1 1 auto;
  }

  .mobile-auth-hero-card {
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.02)
    );
    border-radius: 18px;
    padding: 0.9rem 0.9rem 1.1rem;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.25);
  }

  .mobile-auth-login-box {
    background-color: rgba(0, 0, 0, 0);
    border-radius: 12px;
    padding: 1rem 1.1rem;
  }

  .mobile-auth-landing .landing-login-btn {
    border-radius: 999px;
    padding: 0.7rem 2.75rem;
    font-weight: 600;
    color: #212529;
    background-color: #dee2e6;
    border-color: var(--primary-color);
  }
}

.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('../img/Loading_icon.gif') 50% 50% no-repeat #fff;
  }

  .unload {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
    background: url('../img/Loading_icon.gif') 50% 50% no-repeat #fff;
  }

  .loader-text {
    font-size: 20px;
    font-weight: bold;
    color: #343cdb;
    margin-top: 40%;
    display: none;
    text-align: center;
  }
  
  /* Timeline */
  .timeline {
    border-left: 1px solid hsl(0, 0%, 90%);
    position: relative;
    list-style: none;
    left: 20px;
  }
  /* curently running  */
  .timeline .timeline-item {
    position: relative;
  }
  
  .timeline .timeline-item:after {
    position: absolute;
    display: block;
    top: 0;
  }
  
  .timeline .timeline-item:after {
    background-color: rgba(42,43,99,1);
    left: -38px;
    border-radius: 50%;
    height: 11px;
    width: 11px;
    content: "";
  }
  /* due timeline objectives */
  .timeline .due-timeline-item {
    position: relative;
    border: rgba(42,43,99,100%); 
  }
  
  .timeline .due-timeline-item::after {
    position: absolute;
    display: block;
    top: 0;
  }
  
  .timeline .due-timeline-item::after {
    background-color: color(168, 0, 0);
    left: -38px;
    border-radius: 50%;
  
    height: 11px;
    width: 11px;
    content: "";
  }
  /* archived objective  */
  .timeline .archived-timeline-item {
    position: relative;
    border: rgba(42,43,99,1); 
  }
  
  .timeline .archived-timeline-item:after {
    position: absolute;
    display: block;
    top: 0;
  }
  
  .timeline .archived-timeline-item:after {
    background-color: rgb(8 166 32);
    left: -38px;
    border-radius: 50%;
  
    height: 11px;
    width: 11px;
    content: "";
  }
  /* future objectives */
  .timeline .future-timeline-item {
    position: relative;
  }
  
  .timeline .future-timeline-item:after {
    position: absolute;
    display: block;
    top: 0;
  }
  
  .timeline .future-timeline-item:after {
    background-color: rgb(128, 127, 127);
    left: -38px;
    border-radius: 50%;
    height: 11px;
    width: 11px;
    content: "";
  }
  
/* Animation for the spinner */
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }


 
    body {
        background-color: var(--bg-color);
        margin: 0;
    }

/* Attendance calendar styling */
.attendance-calendar-table {
  table-layout: fixed;
  width: 100%;
}

.attendance-calendar-table th,
.attendance-calendar-table td {
  border: none;
}

.attendance-calendar-table td {
  min-height: 80px;
  height: 80px;
  vertical-align: middle;
  padding: 2px;
}

.attendance-day-card {
  background-color: #f9fafb;
  border-radius: 0.5rem;
  border: 1px solid #e5e7eb;
  box-shadow: none;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #374151;
}

  .attendance-day-card-disabled {
  opacity: 0.55;
  cursor: default;
  background-color: #f3f4f6;
  color: #9ca3af;
}

.attendance-day-date {
  font-size: 13px;
}


.attendance-day-card-selected {
  border-color: transparent;
  box-shadow: 0 10px 30px rgba(88, 86, 214 / 35%);
  transform: translateY(-2px);
}

.attendance-summary-card {
  border-radius: 0.75rem;
  box-shadow: 0 4px 18px rgba(15, 23, 42 / 4%);
  padding: 0.75rem 1rem;
  color: #111827;
  background-color: #f9fafb;
}

.attendance-summary-card-present {
  background-color: rgba(34, 197, 94/ 80%);
}

.attendance-summary-card-late {
  background-color: rgba(234, 179, 8/ 80%);
}

.attendance-summary-card-partial {
  background-color: rgba(14, 165, 233/ 80%);
}

.attendance-summary-card-absent {
  background-color: rgba(239, 68, 68/ 80%);
}

.attendance-summary-card-rate {
  background-color: rgba(139, 92, 246/ 80%);
}

.attendance-calendar-shell,
.attendance-day-detail-card {
  border-radius: 1rem;
  box-shadow: 0 16px 45px rgba(15, 23, 42 / 6%);
  background-color: #ffffff;
}

.attendance-calendar-shell .card-header {
  background-color: #ffffff !important;
  border-bottom: none;
  padding-top: 1.25rem;
  padding-bottom: 0.75rem;
}

.attendance-calendar-table thead tr th {
  background-color: #ffffff;
  color: #6b7280;
  font-weight: 500;
  border-bottom: none;
}

.summary-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.summary-dot-present {
  background-color: #22c55e;
}

.summary-dot-late {
  background-color: #eab308;
}

.summary-dot-partial {
  background-color: #0ea5e9;
}

.summary-dot-absent {
  background-color: #ef4444;
}

.summary-dot-rate {
  background-color: #8b5cf6;
}

/* Status-based backgrounds for calendar cards */
.attendance-day-card-status-present {
  background: #22c55e;
  color: #fff;
}

.attendance-day-card-status-late {
  background: #eab308;
  color: #111827;
}

.attendance-day-card-status-partial {
  background: #0ea5e9;
  color: #0f172a;
}

.attendance-day-card-status-absent {
  background: #ef4444;
  color: #ffffff;
}

.attendance-status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  margin-top: 4px;
}

.attendance-status-dot-present {
  background-color: #22c55e;
}

.attendance-status-dot-late {
  background-color: #eab308;
}

.attendance-status-dot-partial {
  background-color: #0ea5e9;
}

  .attendance-status-dot-absent {
    background-color: #ef4444;
  }

  /* Attendance header styling */
  .attendance-header-card {
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    background-image: linear-gradient(
      135deg,
      color-mix(in srgb, var(--primary-color) 84%, #ffffff 16%),
      color-mix(in srgb, var(--secondary-color, var(--primary-color)) 92%, #000000 8%)
    );
    color: #ffffff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
  }

  .attendance-header-title {
    font-size: 1.25rem;
    font-weight: 700;
  }

  .attendance-header-subtitle {
    font-size: 0.85rem;
    opacity: 0.9;
  }

  .attendance-header-time {
    font-size: 1.35rem;
    font-weight: 700;
  }

  .attendance-header-date {
    font-size: 0.75rem;
    opacity: 0.9;
  }

  .attendance-view-toggle {
    border-radius: 999px;
    font-weight: 500;
  }

  .attendance-header-card .attendance-view-toggle.btn-primary,
  .attendance-header-card .attendance-view-toggle.btn-primary:disabled,
  .attendance-header-card .attendance-view-toggle.active,
  .attendance-header-card .attendance-view-toggle.active:disabled {
    background-image: linear-gradient(
      135deg,
      color-mix(in srgb, var(--primary-color) 78%, #ffffff 22%),
      color-mix(in srgb, var(--primary-color) 92%, #000000 8%)
    );
    border-color: transparent;
    color: #ffffff;
    opacity: 1;
  }

  .attendance-header-card .attendance-view-toggle.btn-light,
  .attendance-header-card .attendance-view-toggle.btn-light:disabled {
    background-color: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.22);
    color: #ffffff;
    opacity: 1;
  }

  .attendance-selected-date-banner {
    background-color: #eff6ff;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    color: #1d4ed8;
  }

  .attendance-clock-row-btn {
    border-radius: 0.5rem;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
  }

  /* --------- Text Sizes and Custom Sizes--------- */
          .text-xs {
            font-size: 12px;
        }
        
        .text-xxs {
            font-size: 10px;
        }

        .text-sm {
            font-size: 14px;
        }
        
        .fs-6 {
            font-size: 1rem!important;
        } 
   
        .text-s {
            font-size: small;
        }

        .w-65 {
        width: 65%;
        }

        .ms-200 {
            margin-left: 200px;
          }
        
        .letter-spacing-1
        {
        letter-spacing: 0.4px;
        }
        
        .text-md
        {
        font-size: 13px!important;
        }
        
          .btn-sm {
          background: var(--primary-color);
          border-radius: 8px;
          border: transparent;
          }

.attendance-clock-btn {
  font-size: 0.95rem;
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  font-weight: 600;
}

        .rounded-icon
        {
            border-radius: 10px;
        }
      
        .mh-300{
            height:300px;
        }

        .w-40 {
            width: 40px !important;
        }
        .w-auto-max-content
        {
            width: max-content;
        }
        
        .roouded-8
        {
            border-radius: 8px;
        }

        .w-97
        {
          width: 97%;
        }
        
        .z-3
        {
          z-index: 3!important;
        }
        
        .h-24
        {
          height: 24px;
        }

        .h-90
        {
          height: 90%;
        }

        .top-58
        {
        top: 58px;
        }

        .top-34
        {
        top: 50px;
        }
        
        .top-10
        {
        top: -10px;
        }
        
        .z-99
        {
          z-index: 99;
        }

        .z-100
        {
          z-index: 100!important;
        }

/* --------- Sidebar ---------*/
        .sidebar.close .text-light{
            display: none;
        }
        
        .sidebar.close .logo-details{
        display: none;
        }
        
        .sidebar{
        position: fixed;
        top: 0;
        left: 0; 
        margin-left: 10px;
        margin-top: 27px;
        height: 100%;
        width: 20px;
        z-index: 90;
        transition: all 0.5s ease;
        }

        .sidebar.close{
        width: 70px;
        }
  
        .sidebar.close .logo-details{
        display: none;
        }

        .sidebar .logo-details{
        height: 60px;
        width: 100%;
        display: flex;
        align-items: center;
        }

        .sidebar .logo-details i{
        font-size: 30px;
        color: #fff;
        height: 50px;
        min-width: 78px;
        text-align: left;
        line-height: 50px;
        margin-left: 20px;
        }

        .sidebar .logo-details .logo-name{
        font-size: 10px;
        color: #fff;
        font-weight: 600;
        transition: 0.3s ease;
        transition-delay: 0.1s;
        text-align: left;
        }

        .sidebar.close .logo-details .logo-name{
        transition-delay: 0s;
        opacity: 0;
        pointer-events: none;
        }

        .sidebar .nav-links{
            height: 100%;
            padding: 10px 0 100px 0;
            overflow: auto;
        }
  
        .sidebar .nav-links::-webkit-scrollbar{
        width: 8px;
        }

        .sidebar .nav-links::-webkit-scrollbar-thumb {
            background: var(--scroller-color);
            border-radius: 4px;
        }

        .sidebar .nav-links::-webkit-scrollbar-thumb:hover {
            background: var(--scroller-color-hovered);
        }
  
        .sidebar .nav-links li{
        position: relative;
        list-style: none;
        transition: all 0.4s ease;
        }

        .sidebar .nav-links > li.active:before,
        .sidebar .nav-links > li:before{
        position:absolute;
        left:0;
        top:0;
        content:'';
        width:4px;
        height:100%;
        opacity: 0;
        transition: all 0.25s ease-in-out;
        border-top-right-radius:5px;
        border-top-right-radius:5px;
        }

        .sidebar .nav-links li.active:before,
        .sidebar .nav-links li:hover::before{
        opacity: 1;
        }

        .sidebar .nav-links li .iocn-link{
        display: flex;
        align-items: center;
        justify-content: space-between;
        }

        .sidebar.close .nav-links li .iocn-link{
        display: block
        }
        
        .sidebar .nav-links li.showMenu i.arrow{
        transform: rotate(-180deg);
        }

        .sidebar.close .nav-links i.arrow{
        display: none;
        }

        .sidebar .nav-links li a{
        display: flex;
        align-items: center;
        text-decoration: none;
        }
        
        .sidebar .nav-links li .sub-menu{
        padding: 6px 6px 14px 80px;
        margin-top: -10px; 
        color: #fff;
        display: none;
        }
  
  
  #main {
    transition: margin-left .5s;
    padding: 16px;
    margin-left: 225px;
  }
  
        .sidebar .nav-links li.showMenu .sub-menu{
        display: block;
        }

        .sidebar .nav-links li .sub-menu a{
        color: var(--sidebar-text-color);
        font-size: 10px;
        padding: 5px 0;
        white-space: nowrap;
        opacity: 0.6;
        transition: all 0.3s ease;
        }

        .sidebar .nav-links li .sub-menu a:hover{
        opacity: 1;
        }

        .sidebar.close .nav-links li .sub-menu{
        position: absolute;
        left: 100%;
        top: -10px;
        margin-top: 0;
        padding: 10px 20px;
        border-radius: 0 6px 6px 0;
        opacity: 0;
        display: block;
        pointer-events: none;
        transition: 0s;
        }

        .sidebar.close .nav-links li:hover .sub-menu{
        top: 0;
        opacity: 1;
        pointer-events: auto;
        transition: all 0.4s ease;
        }

        .sidebar .nav-links li .sub-menu .link-name{
        display: none;
        }

        .sidebar.close .nav-links li .sub-menu .link-name{
        font-size: 11px;
        opacity: 1;
        display: block;
        }

        .sidebar .nav-links li .sub-menu.blank{
        opacity: 1;
        pointer-events: auto;
        padding: 3px 20px 6px 16px;
        opacity: 0;
        pointer-events: none;
        }

        .sidebar .nav-links li:hover .sub-menu.blank{
        top: 50%;
        transform: translateY(-50%);
        }

        .sidebar .profile-details{
        position: fixed;
        bottom: 0;
        width: 260px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #1d1b31;
        padding: 12px 0;
        transition: all 0.5s ease;
        }

        .sidebar.close .profile-details{
        background: none;
        }

        .sidebar.close .profile-details{
        width: 78px;
        }

        .sidebar .profile-details .profile-content{
        display: flex;
        align-items: center;
        }

        .sidebar .profile-details img{
        height: 52px;
        width: 52px;
        object-fit: cover;
        border-radius: 16px;
        margin: 0 14px 0 12px;
        background: #1d1b31;
        transition: all 0.5s ease;
        }

        .sidebar.close .profile-details img{
        padding: 10px;
        }

        .sidebar .profile-details .profile_name,
        .sidebar .profile-details .job{
        color: #000;
        font-size: 16px;
        font-weight: 400;
        white-space: nowrap;
        }

        .sidebar .profile-details .job{
        color: #000;
        font-size: 14px;
        font-weight: 300;
        opacity:.5;
        white-space: nowrap;
        }

        .sidebar .profile-details i.bx{  
            min-width: 50px;
        }
        
        .sidebar .profile-details i.fa{  
        min-width: 50px;
        }
        
        .sidebar.close .profile-details i,
        .sidebar.close .profile-details .profile_name,
        .sidebar.close .profile-details .job{
        display: none;
        }
        
        .sidebar .profile-details .job{
        font-size: 12px;
        }

        .sidebar.close ~ .navbar {
        left: 70px;
        width: calc(100% - 78px);
        }

        .sidebar .nav-links li a .link-name{
        font-size: 10px;
        font-weight: 400;
        color: var(--sidebar-text-color);
        transition: all 0.4s ease;
        }
        
        .sidebar .nav-links li i{
        height: 45px;
        min-width: 78px;
        text-align: center;
        line-height: 50px;
        color: var(--sidebar-text-color);
        font-weight: 500;
        font-size: 10px;
        cursor: pointer;
        transition: all 0.3s ease;
        }
          
        .sidebar .nav-links li.active a .link-name,
        .sidebar .nav-links li:hover a .link-name{  
        color: var(--scroller-color);
        }
          
        .sidebar .nav-links li.active i,
        .sidebar .nav-links li:hover i{
        color: var(--scroller-color);
        }

         /* -- Sidebar on Mobile*/
  
        @media (min-width: 801px) {
            
            .sidebar-icon-menu
            {
            display: none!important;
            }
            .img-navbar
            {
            display: none;
            }
        }
        
        
        @media screen and (min-width:768px) and (max-width:1166px)
        {
        .d-icon{
            display: none;
        }
        }
        .z-0
        {
            z-index: 0;
        }
        

        /* Role badge */
        .role_name_sm {
          display: inline-flex;
          align-items: center;
          padding: 2px 8px;
          border-radius: 999px;
          font-size: 0.7rem;
          font-weight: 500;
          background-color:#fff;
          color: #000;
        }

        @media (max-width: 800px) {
            .role_name_sm {
              display: none;
            }
        
            .role-icon-sm {
              display: none!important;
            }
        
            .img-navbar
            {
            display: flex;
            }
        
            .navbar
            {
            position: fixed; 
            top: 0px!important;
            border-radius: 0px;
            z-index: 100;
            }

            @media (max-width: 800px) {
            .navbar {
              min-height: 38px !important; /* or your preferred height */
              height: 38px !important;
              padding-top: 2px !important;
              padding-bottom: 2px !important;
            }
            }
        
            .sidebar
            {
            z-index: 106;
            top: -25px;
            left: -20px;
            border-radius: 0px;
            }
        
            .home-section
            {
            margin-top: -134px
        
            }
        
            .sidebar.close ~ .home-section {
            left: auto!important;
            width: initial!important;
            }
        
            .home-section ~ .sidebar.close
            {
            display: none;
            }
        
        
            .sidebar-icon-menu
            {
            display: initial;
            }
        
            .top-58{
            top: 0px!important;
            }
        
            .sidebar.close ~ .navbar {
            left: inherit!important; 
        }
        }
      
        .sidebar.close {
            width: 211px; 
        }
        
        .sidebar.close .text-light {
            display: flex;
        }
        
        .sidebar.close .nav-links { 
            overflow-y: scroll;
        }


/* --------- End Sidebar ---------*/



/* --------- Block Content --------- */

  
        .home-section{
        position: relative;
        left: 92px;
        width: calc(100% - 93px);
        transition: all 0.5s ease;
        top: 153px; 
        padding: 15px;

        }
    
        .home-section .home-content{
        height: 60px;
        display: flex;
        align-items: center;
        }

        .home-section .home-content .bx-menu,
        .home-section .home-content .text{
        color: #11101d;
        font-size: 35px;
        }

        .home-section .home-content .bx-menu{
        margin: 0 15px;
        cursor: pointer;
        }

        .home-section .home-content .text{
        font-size: 26px;
        font-weight: 600;
        }
  
  .navbar {
    background:var(--navbar-bg-color); 
  }

  .application_form{
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 10px;
    background: #ebebec;
    border-radius: 3px;
  }
  
/* --------- Sidebar RESPONSIVENESS ---------*/
        @media (max-width: 800px) {
            .sidebar{
                width: 0;
            }
            .sidebar.active{
                width: 60px;
            }
            .home-section{
                width: 447px;
                left: -49px;
            }
            .sidebar.active ~ .home-section{
                left: 60px;
                width: calc(100% - 60px);
            }
            .home-section nav{
                width: 100%;
                left: 0; 
                margin-top: 17px;
                background: #fff;
            }
            .sidebar.active ~ .home-section nav{
                left: 60px;
                width: calc(100% - 60px);
            }
            .logo-details{
                display: none !important;
            }
            
            .sidebar-md-close
                {
                display: none!important;
                }
        }
/* --------- End Sidebar RESPONSIVENESS ---------*/  

        #intern_alert{
            display: none;
        }
          
        .dot {
            height: 50px;
            width: 52px;
            background:black;
            border-radius: 50%;
            display: inline-block;
        }
        
        .form-select {
            font-size: 10px;
        }


/* --------- Table---------*/  
        .dataTables_length {
            font-size: 10px;
        }
        
        .dataTables_filter {
            font-size: 10px;
            margin-left: 260px;
        } 

        .data_tables_info {
            font-size: 10px;
        }
        
        .page-item.active .page-link {
            color: #fff;
            background-color: #151515;
            border-color: #151515;
        }
        
        .paginate_button {
            font-size: 10px;
        }
        
        table.dataTable.nowrap th, table.dataTable.nowrap td {
            white-space: nowrap;
        }

        .tbody, td, tfoot, th, thead, tr {
            border-color: inherit;
            border-style: none;
            border-width: 0;
          }

thead
{
background: var(--table-header-color)!important;
color: whitesmoke!important;
letter-spacing: 0.3px!important;
font-weight: 500!important;
}

#completed-programs-table thead.completed-programs-thead th {
  background: var(--table-header-color) !important;
  color: #fff !important;
  opacity: 1 !important;
}
          
/* ---------End Table---------*/ 



        .breadcrumb-item{
            color: white !important;
        }


/* --------- Custom Colors & Buttons---------*/
        .bg-blue {
            background: linear-gradient(to right, #96d4f5, #92daf0) !important;
        }

        .bg-blue-light {
            background: #c1e5f8 !important;
        }

        .bg-secondary {
            background-color: var(--secondary-color) !important;
        }
        
        /* Brand‑aware buttons (use theme primary/secondary colors) */
        .btn-outline-primary {
            background-color: var(--primary-color);
            color: #fff;
            border-color: var(--primary-color);
        }

        .btn-outline-primary:hover,
        .btn-outline-primary:focus {
            background-color: var(--secondary-color);
            color: #fff;
            border-color: var(--secondary-color);
        }
        
        /* Brand‑aware buttons (use theme primary/secondary colors) */
        .btn-outline-primary {
            background-color: var(--btn-outline-primary-bg, var(--primary-color));
            color: var(--btn-outline-primary-text, #fff);
            border-color: var(--btn-outline-primary-border, var(--primary-color));
        }

        .btn-outline-primary:hover,
        .btn-outline-primary:focus {
            background-color: var(--btn-outline-primary-hover-bg, var(--secondary-color));
            color: var(--btn-outline-primary-hover-text, #fff);
            border-color: var(--btn-outline-primary-hover-border, var(--secondary-color));
        }

        /* Make primary buttons pop when placed on colored header cards
           without forcing the secondary color into the gradient.
           This uses lighter/darker variations of the primary color instead,
           so it stays on‑brand for every client. */
        .header-card .btn-outline-primary,
        .header-card-secondary .btn-outline-primary,
        .card-header.bg-outline-primary .btn-outline-primary {
            background-image: linear-gradient(
                135deg,
                color-mix(in srgb, var(--primary-color) 80%, #ffffff 20%),
                color-mix(in srgb, var(--primary-color) 90%, #000000 10%)
            );
            border-color: transparent;
            color: #fff;
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
        }

        .header-card .btn-outline-primary:hover,
        .header-card .btn-outline-primary:focus,
        .header-card-secondary .btn-outline-primary:hover,
        .header-card-secondary .btn-outline-primary:focus,
        .card-header.bg-outline-primary .btn-outline-primary:hover,
        .card-header.bg-outline-primary .btn-outline-primary:focus {
            background-image: linear-gradient(
                135deg,
                color-mix(in srgb, var(--primary-color) 85%, #ffffff 15%),
                color-mix(in srgb, var(--primary-color) 95%, #000000 5%)
            );
            box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
        }
        
        .btn-outline-secondary {
            background-color: var(--secondary-color);
            color: #fff;
            border-color: var(--secondary-color);
        }
        
        .btn-outline-success {
            background-color: #2fae4f;
            color: #fff;
            border-color: #2fae4f;
        }
        
        .btn-outline-success:hover {
            background-color: #2fae4f;
            color: #fff;
            border-color: #2fae4f;
        }
        
        .btn-outline-success:after {
            background-color: #2fae4f;
            color: #fff;
            border-color: #2fae4f;
        }
        
        .btn-outline-info {
            background-color: var(--btn-color) !important;
            color: #152329 !important;
            border-color: #c1e5f8 !important;
        }
        
        .btn-outline-info:hover {
            background-color: #c1e5f8 !important;
            color: #152329 !important;
            border-color: #c1e5f8 !important;
        }
        
        .btn-outline-info:after {
            background-color: #c1e5f8 !important;
            color: #152329 !important;
            border-color: #c1e5f8 !important;
        }

        .text-blue {
            color: #2f65ae;
        }
    
        .fw-bold {
            font-weight: 700!important;
        }
        
        .bg-Orcaa {
            background: linear-gradient(to right,var(--secondary-color));
        }

        .bg-Orcaa-footer  {
        background:#a830b3;
        }

        .btn-orcaa-save{
        background: #300067;
        }

        .bg-Orcaa-footerr{
        background: #300067;
        }
        
        .bg-tree{
        background:#5353b7;
        }
        
        .btn-Orcaa-cancel{
        background:#9530b3;
        }
 
        .text-light{
            font-size: 10px;
            color:  var(--primary-color) !important;
            margin: auto;
            font-weight: 600;
        }

        .sidebar-text-muted{
            font-size: 10px;
            color: var(--disabled-link-color) !important;
            margin: auto;
            margin-left: 20px;
            font-weight: 600;
        }

        .text-darkblue {
            color: #152329;
        }
        
        .text-blue {
            color: #2f65ae;
        }
     
        .btn-dark-blue
        {
            background: linear-gradient(0deg, rgba(73,76,158,0.677) 27%, rgba(119, 121, 197, 0.677) 100%);        
            border-radius: 10px;
            border: transparent;
        }

        .text-purple,
        .text-primary
        {
            color: var(--primary-color);
        }
        
        .bg-text-purple,
        .bg-primary
        {
            background-color: var(--primary-color);
        }
        
        .btn-purple-transparent
        {
            color: var(--primary-color);
        border: 1px solid var(--bg-primary-btn);
        background-color: transparent;
        border-radius: 10px;
        }

        .btn-purple-transparent:hover
        {
        color: var(--primary-color);
        border: 1px solid var(--bg-primary);
        background-color: transparent;
        border-radius: 10px;
        }
        
        .text-opacity
        {
            opacity: 0.8;
        }
        
        .bg-icon
        {
        background-color: var(--teriary-color);
        border-radius: 12px;
        font-size: 30px
        }

        .bg-icon-inner
        {
            background-color: var(--primary-light-primary);
            border-radius: 12px;
            font-size: 30px; 
        }
        
        .bg-purple
        {
        background-color: var(--primary-light-primary);        
        }

        .border-blue {
            border-color: #c1e5f8;
            border-width: 2px;
        }

        .btn-orca {
        padding: 0.25rem 1.5rem;
        font-size: .875rem;
        border-radius: 2.2rem;
        margin-left:-7px;
        background:#5353b7;
        }
        
        .btn-orca-subskill {
        padding: 0.25rem 1.5rem;
        font-size: .875rem;
        border-radius: 2.2rem;
        margin-left:1px;
        background:#5353b7;
        }
        
        .a {
            color:#000;
            text-decoration:none;
        }

        .btn-purple
        {
          background:  var(--btn-color);
        border-radius: 10px;
        border: transparent;
        }

        .bg-purple-wave
        {
            background:var(--dark-purple-2);
            border-radius:20px;
            background-repeat: no-repeat;
            background-size: cover;
        }
        
        .bg-blue-wave
        {
            background:var(--dark-purple-2);
            border-radius:20px;
            background-repeat: no-repeat;
            background-size: cover;
        }

        .text-dark-puple
        {
            color: var(--secondary-light-color);
        }
        
        .text-dark-blue
        {
            color: var(--teriary-light-color);
        }
        .bg-dark-blue
        {
            background-color:var(--teriary-light-color);
        }

        .btn-danger
        {
            background: linear-gradient(0deg, #dc3545 27%, #dc3545bf 100%)!important;
        }

        .btn-success{
            background: linear-gradient(0deg, #23c956cc 27%, #2bbf5a 100%)!important;
        }
        
        .bg-rating-1
        {
            background:linear-gradient(0deg, rgb(255 1 1) 0%, rgb(206 35 35 / 79%) 100%);
        }

        .bg-rating-2{
            background: linear-gradient(0deg, rgb(255 70 1) 0%, rgb(206 89 35 / 79%) 100%);
        }

        .bg-rating-3
        {
            background: linear-gradient(0deg, rgb(255 166 1) 0%, rgb(206 161 35 / 79%) 100%);
        }

        .bg-rating-4
        {
            background: linear-gradient(0deg, rgb(247, 255, 1) 0%, rgb(255, 167, 0) 100%);
        }

        .bg-rating-5
        {
            background: linear-gradient(0deg, rgb(1, 255, 53) 0%, rgba(40, 206, 35, 0.79) 100%)
        }

        .btn-gray
        {
            background: var(--bg-colour-grey);
            border-radius: 10px;
            border: transparent;
            pointer-events: none;
            cursor: not-allowed !important;
        }

        .btn-sequential-gray
        {
            background: var(--bg-sequential-colour-grey);
            border-radius: 10px;
            border: transparent;
            pointer-events: none;
            cursor: not-allowed !important;
        }
        
        
        .bg-icon-inner-gray
        {
            background: var(--bg-colour-grey) !important;
            border-radius: 12px;
            font-size: 30px;
            pointer-events: none;
        }

        .bg-navbar-content-md
        {
          /* Top navbar background driven by client theme */
          background: var(--navbar-bg-color, var(--primary-color));
        }

        .bg-light-purple {
          background-color: #8f469b!important;
        }

        .bg-purple-gradient
        {
          background-image: linear-gradient(to bottom, var(--homepage-card-color-1), var(--homepage-card-color-2));
        }
        
        .bg-blue-gradient
        {
          background-image:  linear-gradient(to top, var(--homepage-card-color-3), var(--homepage-card-color-2));
        }
        
        .bg-blue-1
        {
          background-color:var(--homepage-card-color-4);
        }
        
/* --------- End Custom Colors & Buttons ---------*/



/* ---------  Program-Management ---------*/ 
        .folder-structure {
            margin-left: 32px;
        }
        
        .folder-structure ul {
            margin:0px;
        }
        
        .folder-structure li {
            padding: var(--folder-structure-item-padding-top) 0rem 0rem 0rem;
            position: relative;
        }
        
        .folder-structure li::before {
            border-left: 2px solid var(--primary-color);
            content: '';
            /* Position */
            left: 0;
            position: absolute;
            top: 0;
            transform: translate(calc(-1 * var(--folder-structure-item-margin-left)), 0);
        
            /* Size */
            height: 100%;
        }
        
        .folder-structure li::after {
            border-bottom: 2px solid var(--primary-color);
            content: '';
            /* Position */
            left: 0;
            position: absolute;
            top: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2);
            transform: translate(-100%, 0);
        
            /* Size */
            width: var(--folder-structure-item-margin-left);
        }
    
        /* Remove the border from the last item */
        .folder-structure li:last-child::before {
            height: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2);
        }
        
        .ul-tree{
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        
        .caret {
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        
        .caret::before {
            content: "\1F4C1";
            color: black;
            font-size: 24px;
        }
        
        .caret-down::before {
            -ms-transform: rotate(90deg);
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
        }
        
        .nested {
            display: none;
            list-style-type: none;
        }
        
        .active {
            display: block;
        } 

        .select-box {
            position: relative;
        }
        
        .select-box select {
            width: 100%;
        }
        
        .over-select {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }
    
        .select-options-container {
            display: none;
            border: 0.5px #7c7c7c solid;
            background-color: #ffffff5d;
            max-height: 150px;
            overflow-y: scroll;
        }
        
        .select-options-container label {
            display: block;
            font-weight: normal;
            display: block;
            white-space: nowrap;
            min-height: 1.2em;
            background-color: #ffffff00;
            padding: 0 2.25rem 0 0.75rem;
        }
        
        .select-options-container label:hover {
            background-color: #1e90ff;
        }

        .card-h {
            padding: 0.5rem 1rem;
            margin-bottom: 0;
            background-color: rgba(12,0,0,.03);
            border-bottom: 1px solid rgba(125, 64, 146, 0.831);
        }

        .card-header:first-child {
            border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
        }
/* ---------  End Program-Management ---------*/ 
 
  .circle {
    width: 50px;
    height: 50px; 
    background-color:#300067; 
    border-radius: 50%; 
    position: absolute;
    right: 0;
    left:365px;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  .test{
    background-image: url('images/geomatric5.png');
    background-repeat: no-repeat; 
    background-size:25%;
    background-position:620px 269px;
  }

  .disabled-link {
    color:var(--disabled-link-color) !important;
    pointer-events: none !important;
    text-decoration: none !important;
    cursor: not-allowed !important;
  } 

  .no-cursor {
    cursor: not-allowed;
  }
  
  .no-hover{
    pointer-events: none;
    opacity: 0.6;
    cursor: default;
  }

        .card-overview {
            position: relative;
            display: flex;
            flex-direction: column;
            min-width: 0;
            word-wrap: break-word;
            background-color:rgb(235, 235, 235);
            background-image: url('images/geomatric5.png');
            background-repeat: no-repeat; 
            background-size:25%;
            background-position:610px 82px;
            background-clip: border-box;
            border: 1px solid rgba(0,0,0,.125);
            border-radius: 0.25rem;
        }


        .card-image {
            position: relative;
            display: flex;
            flex-direction: column;
            min-width: 0;
            word-wrap: break-word;
            background-color: rgb(74, 22, 104);
            background-position: 620px 269px;
            background-clip: border-box;
            border: 1px solid rgba(0,0,0,.125);
            border-radius: 1.25rem;
            margin-left:60px;
            margin-top:60px;
        }

        .card-body {
            flex: 1 1 auto;
            padding: 1rem 1rem; 
        }

        .card-header {  
          border-top-left-radius: 15px!important;
          border-top-right-radius: 15px!important;
        }

 
        .scrollable {
            height: 400px;
            overflow-y: scroll;
            background-color:#fff; 
            
        }

        .assessment-scrollable {
            height: 81vh;
            overflow-y: scroll;
            background-color:#fff; 
        }

        .manage_quiz_questions .scrollable {
            height: 550px;
            overflow-y: scroll;
            background-color:#fff; 
        }

        .alert-secondary {
            color: #41464b;
            background-color: #dce0e4;
            border-color: #d7dade;
        }

        .alert-purple
        {
            background: linear-gradient(0deg, rgba(165,161,182,1) 0%, rgba(165,161,182,0.7933637640449438) 100%);
        }

        .alert-danger
        {
            background: linear-gradient(0deg, #dc3545 27%, #dc3545bf 100%)!important;
            border-radius: 15px!important;
        }
  
        .frame_size iframe {
            border: 0;
            width: 500px;
        }
        
        .card_scrollable{
        height:5rem;
        width: 25rem;
        position: relative;
        }
        
        .choices__list--dropdown .choices__item--selectable {
            padding-right: 6px !important;
        }
        
        div.dataTables_wrapper div.dataTables_length select {
            width: 50px !important;
        }
        
        .card_question_paper {
            position: relative;
            display: flex;
            flex-direction: column;
            min-width: 0;
            word-wrap: break-word;
            background-color:rgba(235, 235, 235, 0.755);
        }
        
        ul.checkbox-list {
            list-style-type: none;
            padding: 0;
        }
        
        ul.checkbox-list li {
            display: flex;
            align-items: center;
            margin-bottom: 5px; /* Adjust as needed */
        }
        
        ul.checkbox-list input[type="checkbox"] {
            margin-right: 10px; /* Adjust as needed */
        }
        /* course content */
        .course-sidebar {
            height: 100%;
            overflow-y: auto; /* Add this */
            background: #f8f9fa;
        } 

        .list-item {
            cursor: pointer;
        }
 
        .view-img-size
        {
            max-width: 62%;
            height: 100px;
        }
        
        .dropdown-icon {
            display: inline-block;
            transition: transform 0.3s;
            transform: rotate(90deg);
        }
        
        .rotate-90 {
            transform: rotate(90deg);
        }
        
        .rotate-0 {
            transform: rotate(0deg);
        }
        
        li.active p.text-muted {
            color: white !important;
        }
        .course_detail_paragraph {
            max-width: 150px;
            overflow: hidden;
            text-overflow: ellipsis;
        }
  
        @media (max-width: 360px) 
        {
        
        .media_card{
        width:72% !important;
        }
        }
   
        .header-card {
            position: relative;
            display: flex;
            flex-direction: column;
            min-width: 0;
            /* Use theme-driven gradient so all clients get a branded header */
            background: var(
                --bg-card-purple,
                linear-gradient(var(--primary-color))
            );
            background-clip: border-box;
            border-radius:20px;
            background-repeat: no-repeat;
            background-size: cover;
        }
        
        .header-card-secondary {
            position: relative;
            display: flex;
            flex-direction: column;
            min-width: 0; 
            background-clip: border-box;
            border-radius:20px;
            /* Theme-driven secondary header gradient */
            background-image: var(
                --bg-card-secondary,
                linear-gradient(var(--primary-color))
            );
            padding: 15px;
        }
        
        
        .header-side-card {
            position: relative;
            display: flex;
            flex-direction: column;
            min-width: 0;
            background-color: #73859f21;
            border-radius:20px;
            background-repeat: no-repeat;
            background-size: cover;
        }
  
/* ---------End Cards and header Cards---------*/

/* ---------Scroller---------*/
          .scroller
          {
            scroll-behavior: smooth;
              max-height: 400px;
              overflow-y: scroll;
              overflow-x: hidden;
              scrollbar-width: thin;
              scrollbar-color: rgba(0, 0, 0, 0.5) rgba(255, 255, 255, 0.5);
          }
          .side-card-height
          {
            height: 80hv;
          
          }
          
          @media (max-width: 1700px) {
            .bg-icon
            { 
            font-size: 20px!important;
            }

            .side-scroller
            {
                scroll-behavior: smooth;
                max-height: 620px;
                overflow-y: scroll;
                overflow-x: hidden;
                scrollbar-width: thin;
                scrollbar-color: rgba(0, 0, 0, 0.5) rgba(255, 255, 255, 0.5);
            }

            .side_card_h_md .side-scroller
            {
                scroll-behavior: smooth;
                max-height: 497px;
                overflow-y: scroll; 
            }
          }
      
          @media (min-width: 1700px) {
            
            .scroller
            { 
                max-height:fit-content; 
            } 
          
            .side-scroller
            {
            max-height:none; 
          }
          
          }

  /* ---------END Scroller---------*/

      @media (max-width: 1232px) {
        .header-img-1
        {
          display: none;
        }
        .header-img-2
        {
          display: none;
        }
        .content-card
        {
        width: auto!important;
        height: auto!important;
        }
      }
  
      @media  screen and (min-width:766px) and  (max-width:1472px)  {
      .side-icon
      {
        display: none;
      }
      }
      
      .content-card
      {
        min-width: 80px;
        height: 86px;
      }
  
  /* ---------ALERTS AND MODALS---------*/
      .swal2-container button.swal2-styled.swal2-confirm {
        border: 0;
        border-radius: 0.25em;
        background: initial;
        background-color:var(--primary-color) !important;
        color: #fff;
        font-size: 0.6em;
      }
      
      .swal2-container button.swal2-styled.swal2-cancel , button.swal2-deny.swal2-styled{
        border: 0;
        border-radius: 0.25em;
        background: initial;
        background-color:var(--primary-color) !important;
        color: #fff;
        font-size: 0.6em;
      }
      
      .modal {
        z-index: 1060;
      }

      .modal-content {
        border-radius: 10px!important;
      }
      .modal-header { 
        border-bottom: none;
        color: var(--modal-header-text)!important;
        padding: 10px!important;
        background: var(--modal-header-color);
        border-top-left-radius: 9px;
        border-top-right-radius: 9px;
        border: 0.1px solid #fff;
      }
  
      .modal-body label
      {
        color:var(--modal-label-color);
        margin-top: 3px;
        margin-bottom: 3px;
      }
   /* ---------ALERTS AND MODALS---------*/
  

   /* ---------NAV TABS---------*/
        .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
          color: var(--modal-label-color);
          border-radius: 10px;
          background-color: var(--tab-color);
          color: whitesmoke; 
        }
        .nav-tabs .nav-link:hover { 
          border: 0px solid transparent;
        }
        
        .nav-tabs {
          border-bottom:transparent;
        }
        .nav-link { 
          color: #6c757d;
        }
        
        ul.nav-tabs { 
          background-color: transparent!important;
        }
  /* ---------END NAV TABS---------*/


  .highcharts-title
  {
    font-size: 12px!important;
    color: var(--sidebar-text-color)!important;d
    font-weight: bold!important;
    fill: var(--sidebar-text-color)!important;
  }
  
  .choices__list--multiple .choices__item {
    display: inline-block;
    vertical-align: middle;
    border-radius: 10px!important;
    padding: 4px 10px;
    font-size: 11px!important;
    font-weight: 100!important;
    margin-right: 3.75px;
    margin-bottom: 3.75px;
    background-color: var(--dark-blue-color)!important;
    border: 1px solid  var(--dark-blue-color)!important;
    color: #fff;
    word-break: break-all;
  }
 
  
  @media (max-width: 1232px) {
  .header-card-secondary .col-6,.header-card-secondary .col-9
  {
  width: 100%!important;
  }
  }
  
  
  
/*  --------- PAGE SCROLLER  ---------*/
  
        ::-webkit-scrollbar {
            width: 7px;
            height: 6px;
        }
        
        body::-webkit-scrollbar-track {
            background-color: var(--white);
        }
        
        body::-webkit-scrollbar-thumb {
            background-color: var(--scroller-color);
            border: 1px solid var(--white);
            border-radius: 10px;
        }
        
        .sidebar-text-color{
            color: var(--sidebar-text-color) !important;
        }
        
        .disabled-div{
            pointer-events: none;
            opacity: 0.7;
            cursor: default
        }
        
        .submit-button-font-size {
            font-size: 18px;
        }
        @media (max-width: 600px) {
            .video-container {
                max-width: 100%; 
            }
        } 
  
        .table-responsive-rubric table {
            border-collapse: collapse;
            width: 100%;
        }
        
        .table-responsive-rubric table tr,
        .table-responsive-rubric table th,
        .table-responsive-rubric table td {
            padding: 8px;
        }
        
        .table-responsive-rubric table th,
        .table-responsive-rubric table td {
            border: 1px solid #ddd;
        }
        
        .table-responsive-rubric {
            margin-bottom: 20px;
        }

        /* Rubric PDF viewer sizing for code challenge page */
        .rubric-pdf-viewer {
            width: 100%;
            min-height: 720px;
            height: 70vh;
            border-radius: 8px;
            overflow: hidden;
            background: #f8f9fa;
            border: 2px solid #e5e7eb;
        }

        .rubric-pdf-frame {
            width: 100%;
            height: 100%;
            min-height: 720px;
            border: none;
            border-radius: 8px;
        }

        @media (max-width <= 768px) {
            .rubric-pdf-viewer {
                min-height: 420px;
                height: 55vh;
            }

            .rubric-pdf-frame {
                height: 100%;
                min-height: 420px;
            }
        }

        
        .review_scroller{
            max-height:400px;
            overflow-y:auto;
            scrollbar-color:rgb(130, 122, 122) white !important;
        
        }
        
        .question_scroller{
            max-height:300px;
            overflow-y:auto;
            scrollbar-color:rgb(130, 122, 122) white !important;
        }
    
        .timeline {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .tl-item {
            display: flex;
            align-items: center;
        }
        
        .tl-dot {  
            width: 25px;
            height: 25px;
            border-radius: 50%;
            margin-right: 13px;
            margin-left: -13px;
            display: flex;
            justify-content: center;
            color: white;
        }
        
        .tl-content {
            font-family: Arial, sans-serif;
        }
        
        .tl-content b {
            font-weight: bold;
            color: black;
        }
        
        .swal2-container button.swal2-styled.swal2-confirm {
            border: 0;
            border-radius: 0.25em;
            background: initial;
            background-color:var(--primary-color) !important;
            color: #fff;
            font-size: 0.6em;
        }
  
        .swal2-container button.swal2-styled.swal2-cancel , button.swal2-deny.swal2-styled{
            border: 0;
            border-radius: 0.25em;
            background: initial;
            background-color:var(--primary-color) !important;
            color: #fff;
            font-size: 0.6em;
        }
        .progress
        {
            height: 3px;
        }
        .progress-bar
        {
            background-color: var(--bg-progress-bar);
            width: 25%;
        }
        
        .scrolling-container {
            overflow-x: auto;
            white-space: nowrap;
            padding: inherit;
        }  
        .scrolling-container::-webkit-scrollbar {
            width: 6px; 
        }
        
        
        .scrolling-container::-webkit-scrollbar-thumb {
            background-color: var(--bg-progress-bar);
            border-radius: 6px;
        }
  
  
        .scrolling-container::-webkit-scrollbar-thumb:hover {
            background-color: var(--bg-progress-bar);
        }
        
        @media (min-width: 100px) {
            .modal-100
            {
            width: 100% !important;
            max-width: 100% !important;
            }
        }
        
        table.dataframe thead th {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis; /* Add ellipsis for overflow */
        }
        
        .form-scroller {
        height:80vh;
        overflow-y:scroll;
        overflow-x: hidden;
        
        }
        
        .form-scroller::-webkit-scrollbar {
            width: 7px;
            height: 6px;
        }

        .form-scroller::-webkit-scrollbar-track {
            background-color: var(--white);
        }

        .form-scroller::-webkit-scrollbar-thumb {
            background-color: var(--scroller-color);
            border: 1px solid var(--white);
            border-radius: 10px;
        }

/*  ---------End PAGE SCROLLER  ---------*/

 
  .nowrap-button {
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden; /* Optional: Hide overflow text */
    text-overflow: ellipsis; /* Optional: Add ellipsis for overflow text */
  }
  
  .no-events {
    pointer-events: none;
  }
  
  .header-gray-card {
    pointer-events: none;
    cursor: not-allowed !important;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--bg-colour-grey);
    background-clip: border-box;
    border-radius:20px;
    background-repeat: no-repeat;
    background-size: cover;
  }



/* --------- Calender ---------*/
        .fc {
            background-color: var(--calendar-bg-color) !important;
            border-radius: 8px !important;
            font-size: 0.25rem !important;
            padding: 0 0.10rem 0.10rem 0.10rem !important;
        }
        
        .fc .fc-toolbar.fc-header-toolbar {
            font-size: 2.50em !important;
            padding: 0.50em !important;
            margin-bottom: 0 !important;
        }
        
        .fc .fc-toolbar-title {
            color:var(--calendar-title-color);
            font-size: 2.25em !important;
            margin: 0 !important;
            text-align: center !important;
            width: 100% !important;
        }
        
        .fc .fc-button-primary {
            background-color:var(--calendar-buttons-color) !important;
            border: 1px solid var(--calendar-buttons-border-color) !important;
            font-size: 1em;
        }
        
        .fc-scrollgrid-sync-inner,
        .fc-scrollgrid,
        .fc-scroller-harness {
            border-radius: 8px !important;
            background-color: transparent !important;
        }
        
        .fc .fc-scrollgrid-section > td {
            border-bottom-left-radius: 8px !important;
            border-bottom-right-radius: 8px !important;
        }
        
        .fc-col-header-cell-cushion {
            font-size: 2.25em !important;
            text-align: center !important;
            color: var(--calendar-header-days-color) !important;
            background-color: transparent !important;
            padding: 0.3em !important;
            border: bottom !important;
            text-decoration: none !important;
        }
        
        .fc-daygrid-day-number {
            color: var(--calendar-dates-color);
            text-align: center !important;
            font-size: 1.5em !important;
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
            margin-top: 5px !important;
            margin-right: 5px !important;
            position: relative !important;
            z-index: 4 !important;
            text-decoration: none !important;
            border-radius: 360px !important;
            width: 20px !important;
            height: 20px !important;
        }
        
        .fc .fc-daygrid-day.fc-day-today {
            background-color: transparent !important;
        }
        
        .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
            color: var(--calendar-current-date-color) !important;
            background-color: var(--calendar-current-date-background-color) !important;
            border: 1px solid var(--calendar-dates-circle-color) !important;
        }
        
        .fc .fc-scrollgrid-section-sticky > * {
            background: none !important;
            position: sticky !important;
            z-index: 3 !important;
        }
        
        .fc .fc-daygrid-day {
            border: 1px solid var(--calendar-grid-color) !important;
            text-align: center !important;
            font-size: 1.5em !important;
        }
        
        .fc-event-title {
            display: none;
        }
        
        .fc-event-time {
            display: none;
        }
        
        .fc-button {
            font-size: 0.8em !important;
            padding: 0.3em 0.5em !important;
            border-radius: 4px !important;
        }
        
        .fc-view {
            max-width: 100% !important;
            margin: 0 auto !important;
        }
        
        .fc-col-header-cell {
            background-color: transparent !important;
            border: none !important;
            text-align: center !important;
            padding: 0.3em !important;
        }
        
        .fc-col-header,
        .fc-scrollgrid-section > th {
            background-color: transparent !important;
            border-top-right-radius: 8px !important;
        }
        
        .fc thead {
            background: none !important;
            color: whitesmoke !important;
            letter-spacing: 0.3px !important;
            font-weight: 500 !important;
            border: 1px solid var(--calendar-header-border-color);
        }
        
        .subskill-padding-left {
            padding-left: 14rem;
        }
        .mainskill-padding-left {
            padding-left: 12rem;
        }
        
        .calendar-tab-content .fc-daygrid-day-number {
            color: var(--calendar-dates-color);
            text-align: center !important;
            font-size: 3.5em !important;
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
            margin-top: 5px !important;
            margin-right: 5px !important;
            position: relative !important;
            z-index: 4 !important;
            text-decoration: none !important;
            border-radius: 360px !important;
            width: 20px !important;
            height: 20px !important;
        }
        .calendar-tab-content .fc .fc-daygrid-day-number {
            padding: 20px;
            position: relative;
            z-index: 4;
        }
        .calendar-tab-content .fc-event-title {
            padding-top: 4px;
            font-size: 11px;
        }
        .calendar-tab-content .fc .fc-toolbar.fc-header-toolbar {
            font-size: 3.5em !important;
            padding: 0.50em !important;
            margin-bottom: 0 !important;
        }
        
        .calendar-tab-content .fc-col-header-cell {
            background-color: transparent !important;
            border: none !important;
            text-align: center !important;
            padding: 0.3em !important;
            font-size:8px;
        }
        /* Flashing effect */
        .flashing-event {
            animation: flash 1s infinite;
        }
        
        @keyframes flash {
            0%, 100% {
                background-color: red; /* or any other color you want */
            }
            50% {
                background-color: white; /* alternate color */
            }
        }
        
        .legend-color {
            display: inline-block;
            width: 12px;
            height: 12px;
            margin-right: 8px;
        }
        .blue-event { background-color: #0077B6; }
        .green-event { background-color: #29BF12; }
        .red-event { background-color: #C00021; }
        .yellow-event { background-color: #FFD100; }
        .legend-list {
            list-style-type: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-wrap: wrap; /* This will allow items to wrap to the next line if needed */
        }
        
        .legend-list li {
            display: flex;
            align-items: center;
            margin-right: 20px; /* Spacing between legend items */
        }
        #calendar-legend {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }
        
        #calendar-legend .legend-list {
            display: flex;
            gap: 20px;
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        
        #calendar-legend .legend-list li {
            cursor: pointer;
        }
        
        #calendar-legend .legend-color {
            display: inline-block;
            width: 12px;
            height: 12px;
            margin-right: 8px;
            vertical-align: middle;
        }
        
        #calendar-legend .disabled {
            opacity: 0.5;
        }

/* --------- End Calender ---------*/



  .view-event-assessment {
    content: 'View';
  }
  
  .hidden-btn {
    display: none;
  }


/* --------- Card Scrollers ---------*/

        /* Ensure that the card containers have the same height and align properly */
        .card .chart-height-card {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        
        .card .chart-height-card-body {
            flex-grow: 1;
        } 

        [role="list"] {
          display: none;
        }
       
        .card .chart-height-card-content {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            overflow: hidden;
        }
        
        .card .chart-height-card-container {
            width: 100%;
            height: 300px; /* Adjust the height as needed */  
        }
        
        /* Adjust the padding of columns */
        .card .chart-height-padding .col-sm-3,
        .card .chart-height-padding .col-sm-6 {
            padding: 10px;
        }
        
        .scrollable-similarity-chart-card {
            max-height: 700px;
            overflow-y: auto;
            overflow-x: hidden; /* Hide horizontal scrollbar if not needed */
            height: auto; /* Allow height to adjust based on content */
        }
        
        .highcharts-similarity-figure {
            margin: 0; /* Remove default figure margins if necessary */
        }
        
        .similarity-heatmap-chart-container {
            width: 100%;
            max-height: 400px; /* Set maximum height */
            height: auto; /* Adjust height automatically if smaller */
            min-height: 200px; /* Optional: Set a minimum height if needed */
        }
        
        select.qrcode:invalid {
            color: white;
        }
        
        .option-qrcode {
            color: black;
        }
        
        select:not(:invalid) {
            color: black;
        }
        .no-answer-line {
            border-top: 2px solid red;
            margin-top: 10px;
        }
        
        /* Ensure the scrollbar is always visible */
        .program-filter-scrollbar {
            overflow-y: scroll; /* Force scrollbar to always show */
        }
        
        /* WebKit browsers */
        .program-filter-scrollbar::-webkit-scrollbar {
            width: 6px; /* Adjust the width of the scrollbar */
        }
        
        .program-filter-scrollbar::-webkit-scrollbar-thumb {
            background-color: #888; /* Color of the scrollbar thumb */
            border-radius: 8px; /* Rounded scrollbar thumb */
        }
        
        .program-filter-scrollbar::-webkit-scrollbar-track {
            background-color: #f1f1f1; /* Background of the scrollbar track */
        }
         
        /* Firefox */
        .program-filter-scrollbar {
            scrollbar-width: auto; /* Ensures the scrollbar is always visible */
            scrollbar-color: #888 #f1f1f1; /* Custom color for thumb and track */
        }
        
        /* p in email_body_container */
        .email_body_container p {
            margin: 0;
        }
  
        /* NEW DASHBOARD CARDS */
        .dashboard-card { 
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05); 
        }
  
        .metric-value {
            font-size: 22px;
            font-weight: bold;
            color: #fff;
        }
        
        .metric-label {
            color: #fff;
            font-size: 11px;
        }
        
        .trend-up {
            color: #fff;
            font-size: 12px;
        }
        
        .trend-icon {
            font-size: 18px;
        }
        
        .gender-stat {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 10px 0;
        }
        
        .person-icon {
            font-size: 24px;
        }
        
        .info-icon {
            background: var(--primary-light-primary);
            color: var(--primary-color);
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
        }
  
        .scroll-container {
            display: flex;
            overflow-x: auto;
            overflow-y: hidden;
            gap: 10px;
            width: 100%;
            scroll-snap-type: x mandatory;
            scrollbar-width: thin;
            scrollbar-color: #888 #f1f1f1;
        
        }
        
        .scroll-item {
            flex: 0 0 200px;
            scroll-snap-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .scroll-item.current {
            transform: scale(1.1);
            z-index: 10;
        }
        
        .scroll-container::-webkit-scrollbar-thumb {
            background-color: #888;
            border-radius: 4px;
        }
  
        .tl-dot {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background-color: #007bff;
            margin-bottom: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            position: relative;
            z-index: 1;
        }
        .vertical-divider {
            width: 2px;
            background-color: white; /* Adjust the color to match your theme */
            height: 80%; /* Adjust the height as needed */
            margin: 0 10px;
            align-self: center; /* Center the divider vertically */
        }
        
        /* certificate preview model styling */
        .certificate-custom-height-modal .modal-content {
            height: 90vh; /* Adjust as needed */
        }
        
        .certificate-custom-height-modal .modal-body {
            height: calc(100% - 56px); /* Adjust as needed, considering header height */
        }
        
        .certificate-custom-height-modal #certificate_iframe {
            height: 100%; /* Make iframe take up the full height of the modal body */
        }
  
/* --------- End Scrollers ---------*/


/* --------- Dashboard cards ---------*/
        .dashboard-section .row {
            display: flex;
            justify-content: center;
            margin: -10px;
        }
        
        .dashboard-section .col {
            flex: 1;
            padding: 10px;
        }
        
        .dashboard-card {
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            padding: 0rem;
            cursor: pointer;
        }
        
        .dashboard-card:hover {
            background-color: var(--dark-purple); 
            color: whitesmoke;
        }
        
        .dashboard-card .card-text:hover
        { 
        color: whitesmoke!important; 
        }
        
        .dashboard-list-selected
        {
        background-color: var(--dark-purple); 
        color: whitesmoke; 
        }
        
        .dashboard-list-selected a
        {
            color: whitesmoke!important; 
        }
        
        .dashboard-list-selected .card-text
        {
        background-color: var(--dark-purple); 
        color: whitesmoke!important; 
        }
        
        .sidebar-list-active
        {
        background-color: var(--dark-purple); 
        color: whitesmoke; 
        }
        
        
        .sidebar-list-active a
        {
            color: whitesmoke!important; 
        }
        
        .sidebar-list-active .card-text
        {
        background-color: var(--dark-purple); 
        color: whitesmoke!important; 
        }
        
        .dashboard-card .card-body {
            display: flex;
            align-items: center;
            width: 100%;
        }
        
        .dashboard-card .icon {
            background-color: var(--dark-purple);
            color: #fff;
            border-radius: 50%;
            width: 28px;
            height: 28px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            font-size: 10px;
            border: 2px solid #fff;
        }
        
        .dashboard-card .content {
            margin-left: 1rem;
        }
        
        .dashboard-card .card-title {
            font-size: 10px; 
            margin-bottom: 0.3rem; 
        }
        
        .dashboard-card .card-text {
            font-size: 9px;
            color: #6c757d;
        }
        
        .dashboard-card a{ 
            color: #333;
        }
        
        .dashboard-card a:hover{ 
            color: #fff;
        }
        
        .dashboard-section-stat .row {
            display: flex; 
            margin: -10px;
        }
        
        .dashboard-section-stat .col {
            flex: 1;
            padding: 10px;
        }
        
        .dashboard-card-stat {
            border-radius: 15px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            padding: 0rem;
            cursor: pointer;
            color:whitesmoke;
            background-color: var(--navbar-bg-color);
            
        }
        
        .dashboard-card-stat .card-text {
            font-size: 15px; 
        }

        .dashboard-card-stat .card-body {

          width: 150px;
          height: 150px;
        }
        
        .dashboard-card-stat .icon {
            background-color: var(--dark-purple);
            color: #fff;
            border-radius: 50%;
            width: 25px;
            height: 25px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold; 
            border: 2px solid #fff;
        }
        
        .dashboard-card-stat .icon-md {
            background-color: var(--dark-purple);
            color: #fff;
            border-radius: 50%;
            width: 35px;
            height: 35px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold; 
            border: 2px solid #fff;
        }
        
        .dashboard-card-stat .content {
            margin-left: 1rem;
        }
/* --------- End Dashboard cards ---------*/


 
/* --------- Top Main Navbar ---------*/
        :root {
            --primary: #1F1F21;
            --text: white;
            --text-gray: #9D9D9E;
            --hover: #353537;
            --border: #3C3C3E;
            --error: #E3452F;
            --bg: #373739;
        }
        
        .profile-menu .cart-container {
            position: relative;
            display: inline-block;
        }
        
        .profile-menu .badge {
            position: absolute;
            top: -3px;
            right: -10px;
            background-color: red;
            color: white;
            font-size: 8px;
            padding: 2px 6px; 
            font-weight: bold;
            min-width: 18px;
            text-align: center;
        }
        
        .profile-menu   {
            position: relative; 
            padding: 2px 3px;
            display: flex;
            align-items: center;
            /* Use the per-client profile menu background color, falling back to primary */
            background: var(--profile-menu-bg-color, var(--primary-color));
            color: var(--profile-menu-text-color, #fff);
            justify-content: end;
            z-index: 99;
        }

        /* Ensure all icons inside the profile-menu follow the per-client
           profile-menu text color (e.g. black for DWYPD / recruitment). */
        .profile-menu i,
        .profile-menu svg {
            color: var(--profile-menu-text-color, #fff) !important;
            fill: var(--profile-menu-text-color, #fff) !important;
        }
        
        .profile-menu .navigation__group {
            display: flex!important;
            gap: 5px!important;
            align-items: center!important;
        }
        
        .profile-menu .navigation__group > .icon {
            cursor: pointer!important; 
            transition: all 0.2s ease-in-out!important;
        }
        
        .profile-menu .navigation__group > .icon:hover {
            transform: scale(1.1)!important;
        }

        /* Ensure any Bootstrap text-white utility inside profile-menu
           follows the per-client profile-menu text color (e.g. black
           for DWYPD / recruitment themes). */
        .profile-menu .text-white {
            color: var(--profile-menu-text-color, #fff) !important;
        }
        
        .profile-menu .profile {
            display: block;
            width: 30px;
            cursor: pointer;
            object-fit: cover;
            border-radius: 50%;
            filter: drop-shadow(-20px 0 10px 
            rgba(0, 0, 0, 0.1));
        }
        
        .profile-menu .profile:hover {
            transform: scale(1.05);
            transition: all 0.2s ease-in-out;
        }
        
        .profile-menu .dropdown__wrapper {
            width: 9rem;
            top: 37px;
            right: 1rem;
            padding: 1rem;
            position: absolute;
            border-radius: 12px;
            background: #fff;
            border: 1px solid #c4c4c4;
            display: flex;
            flex-direction: column;
            color: var(--text);
            gap: 0.25rem;
            animation: fadeOutAnimation 
            ease-in-out 0.3s forwards;
            font: 12px;
        }
        
        .profile-menu .dropdown__wrapper h2 {
            font-size: 1.15rem;
        }
        
        .profile-menu .dropdown__wrapper--fade-in {
            animation: fadeInAnimation 
            ease-in-out 0.3s forwards;
        }
        
        .profile-menu .none {
            display: none;
        }
        
        .profile-menu .hide {
            opacity: 0;
            visibility: hidden;
            animation: fadeOutAnimation 
            ease-in-out 0.3s forwards;
        }
   
        @keyframes fadeInAnimation {
            0% {
                opacity: 0;
                visibility: hidden;
            }
            100% {
                opacity: 1;
                visibility: visible;
            }
        }
        
        @keyframes fadeOutAnimation {
            0% {
                opacity: 1;
                visibility: visible;
            }
            100% {
                opacity: 0;
                visibility: hidden;
            }
        }
  
        .profile-menu .dropdown__group {
            padding: 0.75rem;
        }
        
        .profile-menu .divider {
            width: 100%;
            padding: 0;
            margin: 1rem 0;
            border: 1px solid 
            var(--text-gray);
        }
        
        .profile-menu .profile-menu nav > ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
            gap: 0.25rem;
        }
        
        .profile-menu nav > ul > li { 
            cursor: pointer;
            display: flex;
            flex-direction: row;
            border-radius: 0.5rem;
            align-items: center;
            color: #000;
            gap: 1rem; 
            width: 100%;
            font-weight: normal;
            transition: all 0.2s ease-in-out;
            font-size: 12px;
        }
        
        .profile-menu nav > ul > li > svg {
            stroke: var(--text-gray);
            height: 1.75rem;
            width: 1.75rem;
        }
  
        .profile-menu nav > ul > li:hover > svg {
            stroke: var(--text);
        }
        
        .switch__account ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
            display: flex;
            gap: 1.25rem;
            flex-direction: column;
        }
        
        .profile-menu .switch__account li {
            display: flex;
            align-items: center;
            font-weight: bold;
            gap: 0.75rem;
            padding: 0.75rem;
            cursor: pointer;
            border-radius: 0.5rem;
        }
        
        .profile-menu .switch__account .active {
            color: var(--text);
            background: var(--hover);
        }
        
        .profile-menu .switch__account img {
            border-radius: 50%;
            height: 2.75rem;
            width: 2.75rem;
            object-fit: cover;
        }
        
        .profile-menu .sign-out-all {
            background: var(--btn-color); 
            width: 100%;
            min-height: 3rem;
            margin-top: 1rem;
            border-radius: 0.5rem;
            color: whitesmoke;  
            transition: all 0.2s ease-in-out;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            font: 12px!important;
        }
        
        .profile-menu .sign-out-all:hover {
            color: var(--text);
            border: 1px solid var(--text);
            font: 12px!important;
        }
        
        .profile-menu .email {
            font-size: 0.95rem;
        }
        
        .profile-menu .marker { 
            background: yellowgreen;
            min-width: 1rem;
            min-height: 1rem;
            margin-left: auto;
            border-radius: 50%;
            display: none;
        }
  
        .profile-menu .switch__account .active .marker {
            display: block;
        }
        
        .dropdown__wrapper ul
        {
            margin-left: -28px;
        }
        
        .profile-menu .logo a {
            font-size: 24px;
            font-weight: bold;
            text-decoration: none;
            color: #333;
        }
        
        
        .profile-menu .nav-links li {
            position: relative;
            margin-left: 20px;
        }
        
        .profile-menu .nav-links li a {
            text-decoration: none;
            color: #666;
            padding: 10px;
            display: inline-block;
        }
  
        /* Dropdown Menu */
        .top-dropdown-menu {
            display: none;
            position: absolute;
            top: 100%; 
            background-color: #fff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
            width: 900px;
            z-index: 1000;
            border-radius: 8px;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            gap: 20px;
        }
        
        .top-dropdown-menu li {
            list-style: none;
            margin-bottom: 10px;
        }
        
        .top-dropdown-menu li a {
            text-decoration: none!important;
            color:#212529!important;
        }
  
   
        .dropdown-section {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .dropdown-section h4 {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
        }
        
        /* Icon Section */
        .icon-item {
            display: flex;
            align-items: center;
            gap: 10px;
            background-color: #f9f9f9;
            border-radius: 5px;
            padding: 10px;
        }
        
        .top-dropdown-menu .icon-item .bx
        {
            background-color: var(--dark-purple);
            border: 1px solid #fff;
        }
        
        .icon-item img {
            width: 40px;
            height: 40px;
            object-fit: cover;
        }
        
        .icon-item a {
            text-decoration: none;
            color: #333;
            font-weight: bold;
        }
  
        /* Hover Effects */
        .nav-links li:hover > .top-dropdown-menu {
            display: grid;
        }
        
        .top-dropdown-menu li a:hover {
            color: #0073e6;
        }
        
        .icon-item:hover {
            background-color: #f0f0f0;
        }
        
        
        @media (min-width: 800px) {
        
            .navbar-content-sm ,.navbar-list-sm
            {
            display: none;
            }
        
        }
  
        /* NAVBAR AND SIDEBAR */
        
        @media (max-width: 799px) {
        
            .navbar-content-sm ,.navbar-list-sm
            {
            display: block!important;
            }
        
            
        
            .dashboard-card-stat .icon
            {
            display: none;
            }
        
            .dashboard-card .icon
            {
            width: 23px;
            height: 23px;
            font-size: 10px;
            }
        
        }
  
/* --------- Global Search On Navbar ---------*/
        .search-container {
            position: relative;
            width: 600px;
        }
        
        .search-input {
            border-radius: 20px;
            padding-left: 40px;
            height: 24px;
            font-size: 12px;
        }
        
        .search-icon {
            position: absolute;
            left: 16px;
            top: 30%;
            transform: translateY(-50%);
            z-index: 2;
            color: #aaa;
            font-size: 12px;
        }
        
        .border-primary {
            border: 1px solid var(--primary-color) !important;
        }

        .border-card {
            border: 2px solid var(--btn-color) !important;
        }
        .big-emoji {
            font-size: 3rem;
        }
        
        #search-input {
            width: 100%;
            padding: 4px 17px;
            font-size: 10px;
            border: 1px solid #ddd;
            border-radius: 25px;
            outline: none;
            transition: box-shadow 0.3s ease-in-out;
        }
        
        #search-input:focus {
            box-shadow: 0 0 8px rgba(0, 123, 255, 0.5);
        }
        
        .search-container .dropdown {
            position: absolute;
            width:111vh;
            max-height: 454px;
            overflow-y: auto;
            background-color: white;
            border: 1px solid #ddd;
            border-radius: 8px;
            margin-top: 5px;
            padding: 15px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            display: none; 
            z-index: 1030;
            left:-100px;
        }
        
        .global-search-sm
        {
            display: none;
        }
  
        @media (max-width: 980px) 
        { 
            .search-container
            {
            width: inherit!important;
            }
        
            .search-container .dropdown {
            width: 75vh;
            }
        }
        
        @media (max-width: 885px) {
            .search-container .dropdown {
                width: 72vh;
            }
        }
  
  
        @media (max-width: 840px)
        
            { 
                .search-container
                {
                width: inherit!important;
                }
            }
    
        @media (max-width: 799px) {
            .search-container .dropdown {
                width: 60vh;
            }
            .global-search-md
            {
            display: none;
            }
        }
  
        @media (max-width: 798px) {
            .search-container .dropdown {
            left: inherit;
            width: auto!important;
            }
            .global-search-md
            {
            display: none;
            }
        
            .global-search-sm
            {
            display: block;
            } 
        }
  
  
        .search-container .profile-card {
            position: relative;
            border-radius: 15px;
            border: 1px solid #e0e0e0;
            padding: 20px;
            margin-bottom: 15px;
            background: #fafafa;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            
        }
        
        .search-container .role-badge {
            font-size: 8px;
            padding: 2px 8px;
            border-radius: 12px;
            background: #f0f0f0;
            color: #333;
            margin-left: 8px;
        }
        
        .search-container .contact-info {
            color: #666;
            margin: 8px 0;
            font-size: 13px;
        }
        
        .search-container .contact-info i {
            width: 20px;
            color: var(--primary-color);
        }
        
        .search-container .profile-actions {
            position: absolute;
            top: 15px;
            right: 15px;
        }
        
        .search-container .btn-action { 
            color: #300067; 
            padding: 0;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: none;
        }

        .selected-item
        {
            background: var(--dark-purple); 
        }
        
        .selected-item .link-name
        { 
            color: whitesmoke!important;
        }
/* ---------End  Global Search On Navbar ---------*/

/* ---------Profile ---------*/
input.country-code {
    max-width: 70px;
}
/* ---------End Profile ---------*/

/* ---------Orcaa Assist Parent Dashboard ---------*/ 
        .feature-icon {
            width: 140px; 
        }  
        
        .feature-card {
            background-color: var(--light-purple);
            border-radius: 15px;
            padding: 10px;
            text-align: center;
            transition: transform 0.3s;
        }
        
        .feature-card:hover {
            transform: translateY(-5px);
        } 
        
        /* dashboard container superset*/
        #dashboard-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }
        
        
        .superset-container {
            width: 100%;
            height: 100vh;
        }
        
        #dashboard-container {
            width: 100%;
            height: 100%;
            max-width: 1000px;
        }
/* --------- End Orcaa Assist Parent Dashboard ---------*/

/* ---------Profile ---------*/
input.country-code {
    max-width: 70px;
  }
  /* ---------End Profile ---------*/

/* ------------------Home Page new ------------------ */

      .home-page-card {
          border-radius: 30px;
          height: 53%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          transition: transform 0.3s;
          position: relative;
          overflow: hidden;
          box-shadow: 0 4px 8px rgba(0,0,0,0.1);
          color: white;
          cursor:pointer;
          text-decoration: none;
        }
        
        .home-page-card:hover {
          transform: translateY(-5px);
          color: white;
        }
        
        .home-page-card-2 {
          border-radius: 30px;
          height: 40%;
          display: flex; 
          flex-direction: column;
          align-items: center;
          justify-content: center;
          transition: transform 0.3s;
          position: relative;
          overflow: hidden;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
          color: white;
          text-decoration: none;
        }
  
        .h-277
        {
          height:277px;
        }
        
        .home-page .home-page-card-2:hover {
          transform: translateY(-5px);
          color: white;
        }
        .card-icon { 
          height: 100px;
          margin-bottom: 15px;
        }
      
        .home-page .card-title { 
          font-size: 16px;
          justify-content: start !important;
          position: absolute;
          bottom: 5px;
          left: 27px; 
        }
        
        .next-icon {
          position: absolute;
          top: 13px;
          right: 15px;
          background-color: white;
          border-radius: 50%;
          width: 25px;
          height: 25px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #6c757d;
        }
        
        .next-icon-2 {
          position: absolute;
          right: 10px;
          bottom: 14px;
          background-color: white;
          border-radius: 50%;
          width: 30px;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #6c757d;
        }
  
        @media screen and (width >= 979px) {
        
          .home-page-sm
          {
              display:none;
          } 
        }
        
        @media screen and (width <= 978px) {
        
          .home-page-sm
          {
              display:block;
          }
        
          .next-icon
          {
              top:initial;
              bottom:10px;
          }
          
          .home-page-md
          {
              display:none;
          }
        }
        
        /* For smaller cards */
        .col-md-6 .home-page-card {
          height: 180px;
        }
        
        .welcome-text {
          margin: 30px 0;
          text-align: center;
        }
/* ------------------END Home Page new ------------------ */



/* ---------------- APP 4 CARDS DISPLAY AND STATUS TABS ---------------- */

        .top-nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10px 15px;
            color: var(--text-color);
            text-decoration: none;
          }
          
          .nav-circle {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #888;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 5px;
          }
        
          .scrollable-nav-container .active {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: var(--primary-color);;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 5px;
          }
          
          .scrollable-nav-container .active .nav-circle {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: var(--primary-color);
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 5px;
          }
    
          .scrollable-nav-container .active:before {
            content: "";
            position: absolute;
            width: 46px;
            height: 46px;
            background-color: var(--primary-color);
            opacity: 0.1;
            border-radius: 50%;
            z-index: -1;
            animation: pulse 3s ease-in-out;
            animation-iteration-count: 2;
          }
        
          @keyframes pulse {
            0% {
              transform: scale(1);
              opacity: 0.1;
            }
            50% {
              transform: scale(1.1);
              opacity: 0.2;
            }
            100% {
              transform: scale(1);
              opacity: 0.1;
            }
          }
          
          .nav-label {
            font-size: 12px;
          }
    
          .stats-card {
            background: linear-gradient(135deg, var(--homepage-card-color-1), var(--homepage-card-color-2));
            color: #fff;
            border-radius: 30px;
            padding: 20px;
            text-align: right;
            position: relative;
            min-height: 120px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
          }
          
          .stats-card h1 {
            font-size: 25px;
            font-weight: bold;
            margin: 0;
            text-align: end;
          }
          
          .stats-card p {
            font-size: 15px;
            margin: 0;
            position: absolute;
            bottom: 20px;
            left: 20px;
          }
    
          .view-analytics-card {
            background: var(-- --white-1);
            color: var(--black-1);
            border-radius: 30px;
            padding: 20px;
            text-align: right;
            position: relative;
            min-height: 120px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
          }
          
          .view-analytics-card i {
            font-size: 15px;
            font-weight: bold;
            text-align: end;
          }
        
          .view-analytics-card p {
            font-size: 15px;
            margin: 0;
            position: absolute;
            bottom: 20px;
            left: 20px;
          } 
        
          .tab-content-section {
            min-height: 400px;
            background-color:#e3f2fd
            border-radius: 5px;
            margin-top: 20px;
            padding: 20px;
          }
      
          .nav-tabs {
            border-bottom: none;
          }
          
        .nav-tabs .nav-link {
            border: none;
            color: var(--text-color);
            padding: 10px 20px;
            font-weight: 500;
            border-radius: 20px;
            margin-right: 10px;
            cursor: pointer; /* ensure whole tab shows as clickable */
          }
          
          .nav-tabs .nav-link.active {

            color: #000 !important;  
            background-color: transparent !important; 
            border-radius: 0;
            border-bottom: 5px solid var(--primary-color);
            transition: all 0.2s ease;
          }
  
  
          /* Action buttons style like in the image */
          .status-tab{
            border-radius: 50px;
            padding: 6px 13px;
            margin: 5px;
            display: inline-flex;
            align-items: center;
            color: var(--text-color);
            text-decoration: none;
            font-size: 12px;
            border: transparent;
            cursor: pointer; /* treat status tabs as fully clickable buttons */
          }
        

          .status-tab.active {
            color: #000 !important;  
            background-color: transparent !important; 
            border-radius: 0;
            border-bottom: 3px solid var(--primary-color);
            transition: all 0.2s ease;
          }
          
          .status-tab.icon {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 8px;
          }
        
          .view-analytics-card {
            background-color: var(--white-1);
            border-radius: 30px;
            padding: 20px;
            text-align: center;
            height: 100%;
          }
    
          .user-avatar {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: var(--white);
          }
          
          .icon{
            background:var(--primary-color);
          }
          
          @media (max-width: 998px) {
            .scrollable-section {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch; /* Smooth scrolling */
                padding-bottom: 10px;
                display: flex;
                gap: 10px;
          
            }
          
            .row.flex-nowrap {
                flex-wrap: nowrap; /* Prevent wrapping on small screens */
            } 
          

            
          }
  
          @media (max-width: 998px) {
            .scrollable-nav-container {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch; /* Smooth scrolling */
                padding-bottom: 10px;
                padding: 20px;
                
            }
          
            .scrollable-nav {
                display: flex;
                flex-wrap: nowrap; /* Prevent wrapping */
                gap: 5px!important;
                justify-content:start!important;
            }
          
            .top-nav-item {
                flex: 0 0 auto; /* Prevent shrinking */
                white-space: nowrap; /* Prevent text from breaking */
            }
          
            .d-flex.justify-content-center {
                justify-content: center; /* Center the content */
            }
          }

   /* ----------------END APP 4 CARDS DISPLAY AND STATUS TABS ----------------*/



  /* bulk option */
 
.create-assessment-container {
    max-width: 320px;
  }
  
  .create-assessment-container .circle-group {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .create-assessment-container .circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: -8px;
  }
  
    
  .create-assessment-container .dropdown-menu { 
    padding: 15px;
    border-radius: 15px;
    border: none;
    box-shadow: 0 4px 12px var(--shadow-color);
  }
  
  .create-assessment-container .dropdown-item {
    color: var(--text-gray);
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 5px;
    font-size: 14px;
  }
  
  .create-assessment-container .dropdown-item:hover {
    background-color: var(--primary-color);
    color: #fff;
  }
  
  .create-assessment-container .create-text {
    font-size: 16px;
    font-weight: 500;
    margin-left: 10px;
    color: var(--text-gray);
  }
  
  .create-assessment-container .dropdown-toggle::after {
    display: none;
  }
 
  
/* ----------------- APP LAUNCHER MENU  -----------------*/

      .launcher-icon {
          cursor: pointer;
          font-size: 25px;
          color: #fff;
        }
        
        .app_launcher .dropdown-menu {
          width: 600px;
          background-color: var(--ms-dark);
          color: var(--ms-text);
          border-radius: 6px;
          padding: 20px;
          margin-top: 10px;
          border: none;
        }
        
        .app_search_bar {
          background-color: rgba(255, 255, 255, 0.1);
          border: none;
          color: white;
          border-radius: 4px;
          padding: 10px;
        }
        
        .app_search_bar::placeholder {
          color: rgba(255, 255, 255, 0.7);
        }
        
        .search-icon {
          color: rgba(255, 255, 255, 0.7);
        }
        
        .app-grid {
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          gap: 20px;
          margin-top: 20px;
        }
  
        .app-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
          cursor: pointer;
          transition: background-color 0.2s;
          padding: 10px;
          border-radius: 4px;
        }
        
        .app-item:hover {
          background-color: rgba(255, 255, 255, 0.1);
        }
        
        .app-icon {
          width: 50px;
          height: 50px;
          margin-bottom: 5px;
        }
        
        .app-name {
          font-size:  12px;
          font-weight: 600;
          color: #1d1d1d;
        }
        
        .divider {
          height: 1px;
          background-color: rgba(255, 255, 255, 0.1);
          margin: 20px 0;
        }
  
        .create-more {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          border: 1px solid rgba(255, 255, 255, 0.3);
          color: var(--ms-text);
          font-size: 20px;
        }
        
        .app-launcher .dropdown-menu
        {
          background-color: #fff;
          border-radius: 20px;
          inset: 46px auto auto -16px!important;
        }
  
/* ----------------- APP LAUNCHER MENU  -----------------*/


/*-----------------  Orcaa new sidebar ----------------- */    
      .orcaa-sidebar-container {
        position: relative;
        height: 100vh;
        width: 200px;           /* match .sidebar width to avoid overlapping main content */
        max-width: 125px;
        transition: all 0.3s ease;
        margin-top: 2.5rem;
        overflow-y: auto;      /* container can scroll */
      }
      
      .orcaa-sidebar {
        background-color: var(--orcaa-sidebar-white);
        height: 82vh;
        width: 115px;          /* fill container */
        box-shadow: 0 0 15px var(--orcaa-sidebar-shadow);
        display: flex;
        flex-direction: column;
        overflow-y: auto;      /* inner menu scrolls when taller than viewport */
        transition: width 0.3s ease;
        /* Match the rounded card‑like style used for .chiefluthuli-sidebar .orcaa-sidebar */
        border-radius: 26px;
        border: 1px solid rgba(0, 0, 0/ 50%);
        padding-top: 1.5rem;
        margin-top: 2.8rem;
      }

      /* Dedicated sidebar styling for curriculum "Up next" panel */
      .upnes-sidebar {
        background-color: var(--orcaa-sidebar-white);
        height: 84vh;
        width: 100%;
        box-shadow: 0 0 15px var(--orcaa-sidebar-shadow);
        display: flex;
        flex-direction: column;
        overflow-y: auto;      /* inner menu scrolls when taller than viewport */
        transition: width 0.3s ease;
      }
  
      .orcaa-sidebar.collapsed {
        width: 70px;
        padding: 20px 10px;
        overflow: visible;
      }

      /* Mobile bottom-nav layout for unified sidebar */
      @media (max-width: 767.98px) {
        /* Reposition the unified sidebar to the bottom of the viewport */
        .sidebar.sidebar-md {
          top: auto;
          bottom: 0;
          left: 0;
          margin: 0;
          width: 100%;
          height: auto;
          z-index: 1040;
        }

        .orcaa-sidebar-container {
          height: auto;
          width: 100%;
          max-width: 100%;
          margin: 0;
          overflow-x: auto;
          overflow-y: hidden;
        }

        .orcaa-sidebar {
          height: auto;
          width: 100%;
          margin-top: 0;
          border-radius: 0;
          background-color: var(--navbar-bg-color);
          box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.12);
          padding-top: 0.25rem;
          padding-bottom: 0.25rem;
        }

        /* Mobile sidebar: ensure icons and labels are white for all users (learner, admin, etc.) */
        .sidebar.sidebar-md .orcaa-sidebar .programme-icon-link,
        .sidebar.sidebar-md .orcaa-sidebar .nav-text,
        .sidebar.sidebar-md .orcaa-sidebar .programme-icon-label {
          color: #fff;
        }

        .sidebar.sidebar-md .orcaa-sidebar .programme-icon-circle i {
          color: #fff;
        }

        /* Display app sidebars (home, programme-cards, etc.) horizontally */
        .orcaa-sidebar .programme-icons-sidebar {
          flex-direction: row;
          justify-content: space-around;
          align-items: center;
          padding: 0.25rem 0.4rem;
          gap: 0.25rem;
        }

        /* Neutralise large negative top margins used on desktop */
        .orcaa-sidebar .programme-icons-sidebar.card-margin-top,
        .orcaa-sidebar .home-root-link.card-margin-top {
          margin-top: 0 !important;
        }

        /* Remove large bottom margin from home link (.mb-4) inside bottom nav */
        .orcaa-sidebar .home-root-link {
          margin-bottom: 0 !important;
        }

        .orcaa-sidebar .programme-icon-link {
          margin-bottom: 0;
          padding: 0.15rem 0.25rem;
        }

        /* Make bottom-nav icons and labels more compact */
        .orcaa-sidebar .programme-icon-circle {
          width: 26px;
          height: 26px;
          margin-bottom: 0.05rem;
        }

        .orcaa-sidebar .programme-icon-circle i {
          font-size: 11px;
        }

        /* Slightly larger icon just for the home link so it stays legible */
        .orcaa-sidebar .home-root-link .programme-icon-circle {
          width: 30px;
          height: 30px;
        }

        .orcaa-sidebar .home-root-link .programme-icon-circle i {
          font-size: 14px;
        }

        .orcaa-sidebar .programme-icon-label {
          font-size: 8px;
        }

        /* On mobile sidebar, use the client's secondary color on hover
           instead of white so the hover state is clearly visible */
        .sidebar.sidebar-md .orcaa-sidebar .programme-icon-link:hover,
        .sidebar.sidebar-md .orcaa-sidebar .programme-icon-link:focus {
          color: var(--secondary-color, #fff);
        }
        .sidebar.sidebar-md .orcaa-sidebar .programme-icon-link:hover .programme-icon-circle i,
        .sidebar.sidebar-md .orcaa-sidebar .programme-icon-link:focus .programme-icon-circle i {
          color: var(--secondary-color, #fff);
        }

        /* Also shrink generic nav text in the unified sidebar on mobile */
        .orcaa-sidebar .nav-text {
          font-size: 9px;
        }

        /* On mobile, active nav items use a very compact width */
        .orcaa-sidebar-container .nav-item.active {
          width: 6%;
        }

        /* Ensure page content is not hidden behind the bottom nav */
        .academic-page {
          padding-bottom: 4.5rem;
        }
      }

      /* Shared curriculum hero card (Chief Luthuli style) */
      .teacher-curriculum-hero {
        background-image: url("../../images/chiefluthuli_image/chiefluthulu.png");
        background-size: cover;
        background-position: center;
        border-radius: 24px;
        color: #fff;
      }

      .teacher-curriculum-hero .card-body {
        min-height: 160px;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: space-between;
        padding-bottom: 0.75rem;
      }

      .teacher-curriculum-hero-main {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        flex: 1;
      }

      .teacher-curriculum-hero-main .hero-actions {
        margin-top: auto;
      }

      .teacher-curriculum-hero .hero-back {
        align-self: flex-start;
      }

      .teacher-curriculum-hero .academic-title,
      .teacher-curriculum-hero p,
      .teacher-curriculum-hero .small,
      .teacher-curriculum-hero .text-muted,
      .teacher-curriculum-hero .text-uppercase {
        color: #fff !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0/ 40%);
      }

      .learner-teams-page .learner-teams-empty-wrap {
        min-height: clamp(220px, 34vh, 300px);
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .learner-teams-page .tables-margin-top {
        margin-top: -5.25rem !important;
      }

      .learner-teams-page .learner-teams-empty-state {
        width: min(100%, 780px);
        margin: 0 auto;
        border-radius: 24px;
        overflow: hidden;
        background:
          radial-gradient(
            circle at top left,
            color-mix(in srgb, var(--primary-color, #6f42c1) 14%, #ffffff 86%) 0%,
            transparent 42%
          ),
          radial-gradient(
            circle at bottom right,
            color-mix(in srgb, var(--btn-color, var(--primary-color, #6f42c1)) 16%, #ffffff 84%) 0%,
            transparent 44%
          ),
          linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.99),
            color-mix(in srgb, var(--primary-color, #6f42c1) 6%, #ffffff 94%)
          );
        border: 1px solid color-mix(in srgb, var(--primary-color, #6f42c1) 10%, #e5e7eb 90%);
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
      }

      .learner-teams-page .learner-teams-empty-state .card-body {
        position: relative;
        padding: 1.85rem 1.75rem;
      }

      .learner-teams-page .learner-teams-empty-state .card-body::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 8px;
        background: linear-gradient(
          180deg,
          color-mix(in srgb, var(--primary-color, #6f42c1) 78%, #ffffff 22%),
          color-mix(in srgb, var(--btn-color, var(--primary-color, #6f42c1)) 92%, #000000 8%)
        );
      }

      .learner-teams-page .learner-teams-empty-icon {
        width: 60px;
        height: 60px;
        margin: 0 auto 0.7rem;
        border-radius: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 1.55rem;
        background: linear-gradient(
          135deg,
          color-mix(in srgb, var(--primary-color, #6f42c1) 86%, #ffffff 14%),
          color-mix(in srgb, var(--btn-color, var(--primary-color, #6f42c1)) 92%, #000000 8%)
        );
        box-shadow: 0 16px 34px rgba(15, 23, 42, 0.14);
      }

      .learner-teams-page .learner-teams-empty-eyebrow {
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--btn-color, var(--primary-color, #6f42c1));
      }

      .learner-teams-page .learner-teams-empty-title {
        font-size: clamp(1.4rem, 1.55vw, 1.75rem);
        font-weight: 700;
        color: #0f172a;
      }

      .learner-teams-page .learner-teams-empty-copy {
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
        font-size: 0.92rem;
        line-height: 1.55;
        color: #475569;
      }

      @media (max-width: 767.98px) {
        .learner-teams-page .tables-margin-top {
          margin-top: 0.75rem !important;
        }

        .learner-teams-page .learner-teams-empty-wrap {
          min-height: auto;
        }

        .learner-teams-page .learner-teams-empty-state .card-body {
          padding: 1.6rem 1rem;
        }

        .learner-teams-page .learner-teams-empty-icon {
          width: 52px;
          height: 52px;
          border-radius: 16px;
          font-size: 1.35rem;
        }

        .learner-teams-page .learner-teams-empty-title {
          font-size: 1.25rem;
        }

        .learner-teams-page .learner-teams-empty-copy {
          font-size: 0.88rem;
          line-height: 1.5;
        }
      }

      .learner-certificates-page .learner-certificates-empty-wrap {
        min-height: clamp(220px, 34vh, 300px);
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .mobile-learner-home.learner-certificates-mobile-home {
        padding-bottom: 0 !important;
      }

      .learner-certificates-page .tables-margin-top {
        margin-top: -5.25rem !important;
      }

      .learner-certificates-page .learner-certificates-empty-state {
        width: min(100%, 760px);
        margin: 0 auto;
        border-radius: 24px;
        overflow: hidden;
        height: auto !important;
        min-height: 0;
        max-height: none !important;
        display: block;
        background:
          radial-gradient(
            circle at top left,
            color-mix(in srgb, var(--primary-color, #6f42c1) 14%, #ffffff 86%) 0%,
            transparent 42%
          ),
          radial-gradient(
            circle at bottom right,
            color-mix(in srgb, var(--btn-color, var(--primary-color, #6f42c1)) 16%, #ffffff 84%) 0%,
            transparent 44%
          ),
          linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.99),
            color-mix(in srgb, var(--primary-color, #6f42c1) 6%, #ffffff 94%)
          );
        border: 1px solid color-mix(in srgb, var(--primary-color, #6f42c1) 10%, #e5e7eb 90%);
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
      }

      .learner-certificates-page .learner-certificates-empty-inner {
        position: relative;
        padding: 1.85rem 1.75rem;
        height: auto !important;
        min-height: 0;
        max-height: none !important;
      }

      .learner-certificates-page .learner-certificates-empty-inner::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 8px;
        background: linear-gradient(
          180deg,
          color-mix(in srgb, var(--primary-color, #6f42c1) 78%, #ffffff 22%),
          color-mix(in srgb, var(--btn-color, var(--primary-color, #6f42c1)) 92%, #000000 8%)
        );
      }

      .learner-certificates-page .learner-certificates-empty-icon {
        width: 60px;
        height: 60px;
        margin: 0 auto 0.7rem;
        border-radius: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 1.55rem;
        background: linear-gradient(
          135deg,
          color-mix(in srgb, var(--primary-color, #6f42c1) 86%, #ffffff 14%),
          color-mix(in srgb, var(--btn-color, var(--primary-color, #6f42c1)) 92%, #000000 8%)
        );
        box-shadow: 0 16px 34px rgba(15, 23, 42, 0.14);
      }

      .learner-certificates-page .learner-certificates-empty-eyebrow {
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--btn-color, var(--primary-color, #6f42c1));
      }

      .learner-certificates-page .learner-certificates-empty-title {
        font-size: clamp(1.4rem, 1.55vw, 1.75rem);
        font-weight: 700;
        color: #0f172a;
      }

      .learner-certificates-page .learner-certificates-empty-copy {
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
        font-size: 0.92rem;
        line-height: 1.55;
        color: #475569;
      }

      @media (max-width: 767.98px) {
        .academic-page.learner-certificates-page {
          padding-top: 0 !important;
        }

        .academic-page.learner-certificates-page .tables-margin-top {
          margin-top: -0.25rem !important;
        }

        .academic-page.learner-certificates-page.learner-certificates-empty-page {
          padding-top: 1rem !important;
          padding-bottom: 6rem;
        }

        .academic-page.learner-certificates-page.learner-certificates-empty-page .tables-margin-top {
          margin-top: 0.85rem !important;
          justify-content: center;
        }

        .academic-page.learner-certificates-page.learner-certificates-empty-page .mx-25 {
          display: flex;
          justify-content: center;
        }

        .learner-certificates-page .learner-certificates-empty-wrap {
          min-height: auto;
          margin-top: 0;
        }

        .academic-page.learner-certificates-page.learner-certificates-empty-page .learner-certificates-empty-wrap {
          width: 100%;
          min-height: calc(100vh - 22rem);
          align-items: flex-start;
          justify-content: center;
          padding: 0 0.1rem 6.5rem;
        }

        .learner-certificates-page .learner-certificates-empty-state {
          overflow: visible;
          width: min(100%, 29rem);
          margin-left: auto;
          margin-right: auto;
        }

        .learner-certificates-page .learner-certificates-empty-inner {
          padding: 1.35rem 0.95rem 1.4rem;
        }

        .learner-certificates-page .learner-certificates-empty-icon {
          width: 48px;
          height: 48px;
          border-radius: 14px;
          font-size: 1.2rem;
        }

        .learner-certificates-page .learner-certificates-empty-title {
          font-size: 1.15rem;
        }

        .learner-certificates-page .learner-certificates-empty-copy {
          font-size: 0.84rem;
          line-height: 1.45;
        }
      }

      /* Ensure page content is not hidden behind the bottom nav */
      .academic-page {
        padding-bottom: 4.5rem;
      }

      /* Tighter hero card on mobile: reduce height and font sizes */
      @media (max-width: 767.98px) {
        .teacher-curriculum-hero .card-body {
          min-height: 58px;
          padding: 0.75rem 0.85rem;
        }
        .teacher-curriculum-hero .academic-title {
          font-size: 18px;
        }
        .teacher-curriculum-hero p,
        .teacher-curriculum-hero .small,
        .teacher-curriculum-hero .text-muted,
        .teacher-curriculum-hero .text-uppercase {
          font-size: 0.78rem;
        }
      }

      /* Shared Chief Luthuli academic layout (used for homepage,
         teacher_course_curriculum and curriculum_content across suits) */
      .academic-page {
        padding-top: 1.75rem;
      }

      /* Background colour for the teacher subject / course curriculum pages */
      .teacher-subject-curriculum-page {
        background-color: transparent;
      }

      .academic-page .academic-header {
        margin-bottom: 0.75rem;
      }

      .academic-page .academic-title {
        font-size: 24px;
        font-weight: 700;
        color: #111827;
      }

      .academic-page .academic-subtitle {
        font-size: 13px;
        color: #6b7280;
      }

      .academic-page .academic-tabs {
        border-bottom: 1px solid #e5e7eb;
        column-gap: 2.5rem;
      }

      .academic-page .academic-tab-link {
        border: none;
        background: transparent;
        padding: 0.4rem 0;
        font-size: 14px;
        font-weight: 600;
        color: #6b7280;
        position: relative;
      }

      .academic-page .academic-tab-link.active {
        color: #111827;
      }

      .academic-page .academic-tab-link.active::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -6px;
        height: 3px;
        border-radius: 999px;
        background-color: var(--primary-color);
      }

      .academic-page .academic-tab-content {
        padding-top: 1.5rem;
      }

      /* Teacher subject / course curriculum page: smaller text + buttons on mobile */
      @media (max-width: 767.98px) {
        .teacher-subject-curriculum-page {
          font-size: 0.85rem;
        }
        .teacher-subject-curriculum-page .academic-title {
          font-size: 1.1rem;
        }
        .teacher-subject-curriculum-page .academic-subtitle,
        .teacher-subject-curriculum-page p,
        .teacher-subject-curriculum-page .small,
        .teacher-subject-curriculum-page .text-muted {
          font-size: 0.78rem;
        }
        .teacher-subject-curriculum-page .btn {
          font-size: 0.7rem;
          padding: 0.2rem 0.55rem;
        }

        /* Wrap the mobile week filters in a subtle card */
        .teacher-subject-curriculum-page .mobile-course-weeks {
          background: #ffffff;
          border-radius: 16px;
          padding: 0.5rem 0.75rem;
          box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
        }

        .teacher-subject-curriculum-page .curriculum-card h5 {
          font-size: 0.95rem;
        }
        .teacher-subject-curriculum-page .curriculum-card .text-xxs,
        .teacher-subject-curriculum-page .curriculum-card .badge {
          font-size: 0.7rem;
        }
        /* Curriculum card actions: two small buttons side by side on mobile */
        .teacher-subject-curriculum-page .curriculum-card .curriculum-actions {
          width: 100%;
          justify-content: space-between;
        }
        .teacher-subject-curriculum-page .curriculum-card .curriculum-actions .btn {
          font-size: 0.65rem;
          padding: 0.18rem 0.5rem;
          flex: 1 1 calc(50% - 0.5rem);
          text-align: center;
        }

        /* Mobile course curriculum pills + cards */
        .teacher-subject-curriculum-page .mobile-course-weeks {
          padding: 0.25rem 0.25rem 0.5rem;
          display: flex;
          flex-wrap: wrap;
          gap: 0.4rem;
        }

        .teacher-subject-curriculum-page .mobile-week-pill {
          border-radius: 999px;
          background-color: #f3f4ff;
          color: #4b5563;
          border: none;
          font-size: 0.75rem;
          padding: 0.35rem 0.8rem;
          flex: 1 0 calc(50% - 0.4rem);
          text-align: center;
        }

        .teacher-subject-curriculum-page .mobile-week-pill.active {
          background-color: var(--primary-color);
          color: #fff;
        }

        .teacher-subject-curriculum-page .mobile-course-curriculum {
          margin-top: 0.5rem;
        }

        .teacher-subject-curriculum-page .mobile-module-card {
          background: #e2e8f0;
          border-radius: 18px;
          padding: 0.85rem 0.9rem;
          box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
        }

        .teacher-subject-curriculum-page .mobile-module-index {
          width: 32px;
          height: 32px;
          border-radius: 999px;
          background: #eef2ff;
          color: #4f46e5;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 0.8rem;
          font-weight: 700;
        }

        .teacher-subject-curriculum-page .mobile-module-title {
          font-size: 0.95rem;
          font-weight: 600;
          color: #0f172a;
          margin-top: 0.25rem;
        }

        .teacher-subject-curriculum-page .mobile-module-subtitle {
          font-size: 0.8rem;
          color: #6b7280;
        }

        .teacher-subject-curriculum-page .mobile-module-meta {
          font-size: 0.75rem;
          color: #6b7280;
        }

        .teacher-subject-curriculum-page .mobile-status-badge {
          font-size: 0.7rem;
          border-radius: 999px;
          padding: 0.15rem 0.6rem;
        }

        .teacher-subject-curriculum-page .mobile-status-complete {
          background: #dcfce7;
          color: #15803d;
        }

        .teacher-subject-curriculum-page .mobile-status-progress {
          background: #fef9c3;
          color: #a16207;
        }

        .teacher-subject-curriculum-page .mobile-status-notstarted {
          background: #e5e7eb;
          color: #374151;
        }

        .teacher-subject-curriculum-page .mobile-view-btn,
        .teacher-subject-curriculum-page .mobile-assessments-btn {
          font-size: 0.8rem;
          border-radius: 999px;
        }

        .teacher-subject-curriculum-page .mobile-view-btn {
          background-color: var(--navbar-bg-color);
          border-color: var(--navbar-bg-color);
        }
      }

@media (max-width: 767.98px) {
  .teacher-subject-curriculum-page .mobile-status-notstarted {
    background: #ccc;
    color: #374151;
  }
}

      /* Default subject / course card image */
      .teacher-subject-image {
        width: calc(100% - 10px);
        height: 140px;
        margin: 4px;
        background-image: url("../../images/chiefluthuli_image/yellow-and-blue-bicolor-background.jpg");
        background-size: cover;
        background-position: center;
        border-radius: 18px;
      }

      .academic-page .card .btn-learner-progress {
        background-color: var(--navbar-bg-color);
        border-color: var(--navbar-bg-color);
        color: #000;
      }

      .academic-page .card .btn-learner-progress-link {
        background-color: var(--navbar-bg-color);
        border-color: var(--navbar-bg-color);
        color: #000;
      }

      /* Parent "My Children" cards (shared Chief Luthuli academic layout) */
      .children-card {
        border-radius: 18px;
        border: 1px solid #e5e7eb;
        position: relative;
        overflow: hidden;
      }

      /* Center child cards and give them breathing room on all viewports */
      body.parent-my-children-layout .children-card {
        margin-left: auto;
        margin-right: auto;
        width: 110%;
        max-width: 480px; /* comfortable width on small phones */
      }

      @media (min-width: 768px) {
        body.parent-my-children-layout .children-card {
          max-width: 720px; /* tablets / small laptop */
        }
      }

      @media (min-width: 1200px) {
        body.parent-my-children-layout .children-card {
          max-width: 2100px; /* wider on desktop without spanning full width */
        }
      }

      .mobile-spacing {
        margin-right: 1rem !important;
        margin-left: -1rem !important;
      }

      .mobile-spacing-main {
          margin-right: 0rem !important;
          margin-left: -1rem !important;
      }

      .mobile-margin-bottom {
        margin-bottom: 8rem !important;
      }

      .margin-right{
        margin-right: 125px;
      }

      .container-mobile, .container-fluid-mobile{
          padding-right: var(--bs-gutter-x, 16.75rem);
          padding-left: var(--bs-gutter-x, .75rem);
          margin-right: auto;
          margin-left: auto;
      }

      .card-gap {
          gap: 1rem !important;
          margin-right: 379px;
      }

      /* Parent My Children – mobile layout refinements */
      @media (max-width: 767.98px) {
        body.parent-my-children-layout .children-card {
          width: 100%;
          max-width: 100%;
          margin-left: 0;
          margin-right: 0;
        }

        .margin-right {
          margin-right: 0 !important;
        }

        .mobile-spacing {
          margin-right: 0.75rem !important;
          margin-left: 0.75rem !important;
        }

        .card-gap {
          gap: 0.75rem !important;
          margin-right: 0 !important;
        }
      }

      /* Thin top accent bar on each child card */
      .children-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--secondary-color, #f9a8d4);
      }

      .children-name {
        font-weight: 600;
      }

      .parent-children-nav-link {
        border-radius: 18px;
        padding: 0.75rem 1rem;
        border: none;
        background: transparent;
        font-size: 14px;
        font-weight: 600;
        color: #374151;
      }

      .parent-children-nav-link.active {
        background: var(--navbar-bg-color);
        color: #fff;
      }

      .subject-pill {
        background-color: var(--sidebar-color, var(--primary-color));
        color: #f9fafb;
        font-size: 11px;
        padding: 0.2rem 0.75rem;
      }

      .grade-pill {
        background: var(--navbar-bg-color);
        color: #374151;
        font-size: 11px;
        padding: 0.2rem 0.9rem;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
      }

      .children-actions .btn {
        font-size: 12px;
        background: var(--secondary-color, #f9a8d4);
        border-color: var(--secondary-color, #f9a8d4);
        color: #ffffff;
        min-width: 120px;
      }

      .children-actions .btn:hover {
        filter: brightness(0.96);
        color: #ffffff;
      }

      @media (max-width: 767.98px) {
        .children-actions {
          width: 100%;
        }
      }

      /* Curriculum view learning mode layout */
      body.cv-learning-mode {
        /* Use the same light app background tone as the rest
           of the platform instead of a solid black */
        background-color: var(--bg-color, #f8f9ff);
        overflow: hidden;
      }

      /* Turn the Vue shell into a full-screen overlay */
      body.cv-learning-mode #curriculum-view-app {
        position: fixed;
        inset: 0;
        z-index: 1040;
      }

      /* Hide the global sidebar and top learning navbar in learning mode,
         but keep the main profile-menu navbar visible */
      body.cv-learning-mode .sidebar.sidebar-md,
      body.cv-learning-mode .top-learning-navbar {
        display: none !important;
      }

      /* Hide global sidebars for parent My Children layout, but keep navbar */
      body.parent-my-children-layout .sidebar.sidebar-md {
        display: none !important;
      }

      /* Hide global sidebars when a parent views the curriculum page, but keep navbar */
      body.parent-curriculum-layout .sidebar.sidebar-md {
        display: none !important;
      }

      body.parent-my-children-layout .academic-page .mx-25 {
        /* Center the main column and let cards control their own max-width */
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100%;
      }

      /* Remove the centered max-width behaviour on the main column */
      body.cv-learning-mode .academic-page .mx-25 {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
      }

      /* Make the learning layout truly full-screen and flush with edges */
      body.cv-learning-mode #curriculum-view-app > .container-fluid {
        height: 100%;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
      }

      body.cv-learning-mode #curriculum-view-app > .container-fluid > .row {
        height: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
      }

      body.cv-learning-mode #curriculum-view-app > .container-fluid > .row > .col-12 {
        height: 100%;
        padding-left: 0 !important;
        padding-right: 0 !important;
      }

      /* Remove extra gutters/margins so content touches the edges */
      body.cv-learning-mode .teacher-subject-curriculum-page {
        margin: 0 !important;
        padding: 0 !important;
      }

      /* Stretch sidebar + content card to full height */
      body.cv-learning-mode .cv-learning-layout {
        height: 100%;
        align-items: stretch;
      }

      body.cv-learning-mode .cv-learning-main {
        display: flex;
        flex-direction: column;
        height: 96%;
        margin-bottom: 0 !important; /* cancel Bootstrap mb-3 so bottoms align */
      }

      body.cv-learning-mode .cv-learning-main .card-body {
        flex: 1 1 auto;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        margin-bottom: 0 !important; /* remove space below buttons */
        padding-bottom: 0 !important; /* no padding under buttons */
      }

      /* In learning mode, push action buttons to the bottom of the card */
      body.cv-learning-mode .cv-learning-main .cv-learning-actions-row {
        margin-top: auto;
      }

      .cv-learning-layout {
        min-height: calc(100vh - 120px);
      }

      .cv-learning-main {
        border-radius: 1rem;
      }

      .cv-learning-sidebar {
        width: 100%;
        max-width: 320px;
      }

      /* ORCAA-style Up next sidebar in learning mode */
      body.cv-learning-mode .cv-upnext-sidebar {
        margin-top: 0 !important;
        padding: 1rem 0.75rem;
      }

      body.cv-learning-mode .cv-upnext-sidebar .upnes-sidebar {
        height: 100%;
        border-radius: 1rem;
        border: 1px solid rgba(0, 0, 0, 0.125);
        background-color: #ddd; /* match .learning-card background */
        padding: 0.75rem;
        box-shadow: 0 10px 24px rgba(15, 23, 42 / 12%);
      }

      body.cv-learning-mode .cv-upnext-sidebar-card {
        border: none;
        box-shadow: 0 4px 12px rgba(15, 23, 42 / 80%);
        background-color: #e6e6e6; /* slightly darker than white */
        height: auto;
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
      }

      body.cv-learning-mode .cv-upnext-sidebar .card-body {
        padding: 0.75rem 0.85rem;
        flex: 1 1 auto;
      }

      body.cv-learning-mode .cv-upnext-sidebar ul li + li {
        border-top: 1px solid rgba(0, 0, 0 / 40%);
        padding-top: 0.45rem;
      }

      body.cv-learning-mode .cv-upnext-active-card {
        border-radius: 18px;
        border: 1px solid rgba(0, 0, 0 / 6%);
        box-shadow: 0 6px 14px rgba(15 23 42 / 12%);
      }

      /* Main content viewer: tall but scrollable when content is long */
      .cv-content-viewer {
        min-height: 660px;
        max-height: 70vh;
        overflow-y: auto;
      }

      /* Ensure video and play overlay are clickable */
      .cv-content-viewer .cv-video-wrapper {
        position: relative;
      }

      .cv-content-viewer .cv-video-overlay-play {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: radial-gradient(circle, rgba(0,0,0,0.35) 0, rgba(0,0,0,0.6) 60%);
        color: #fff;
        font-size: 3rem;
        cursor: pointer;
        z-index: 2;
      }

      .cv-content-viewer .cv-video-overlay-play i {
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
      }

      /* Let the viewer grow inside the flex card in learning mode */
      body.cv-learning-mode .cv-learning-main .cv-content-viewer {
        flex: 1 1 auto;
      }

      /* Mobile tweaks: adjust viewer height and shrink typography */
      @media (max-width: 767.98px) {
        /* Reduce overall viewer height so buttons sit closer */
        .cv-content-viewer {
          min-height: 260px;
          max-height: 60vh;
        }
        .cv-content-viewer.mb-3 {
          margin-bottom: 0.75rem !important;
        }
        .cv-learning-actions-row.mt-3 {
          margin-top: 0.75rem !important;
        }

        /* Give the video/iframe a taller minimum area on phones */
        .cv-content-viewer .cv-video-wrapper video,
        .cv-content-viewer .ratio-16x9 iframe {
          min-height: 280px;
        }

        /* Extra-small text/buttons inside the curriculum view card */
        .curriculum-view-card h5 {
          font-size: 0.9rem;
        }
        .curriculum-view-card p,
        .curriculum-view-card .small {
          font-size: 0.72rem;
        }
        .curriculum-view-card .btn {
          font-size: 0.7rem;
          padding: 0.2rem 0.55rem;
        }
      }

      @media (min-width <= 1200px) {
        .cv-content-viewer {
          min-height: 560px;
        }
      }

      @media (min-width: 1200px) {
        body.cv-learning-mode .cv-learning-main {
          flex: 1 1 82%;
          max-width: 98%;
        }

        body.cv-learning-mode .cv-learning-sidebar {
          flex: 0 0 18%;
          max-width: 18%;
          order: 0;
        }

        body.cv-learning-mode .cv-learning-main-wrapper {
          order: 1;
          flex: 1 1 auto;
        }
      }

      .academic-page .card .btn-learner-progress:hover {
        opacity: 0.9;
      }

      .academic-page .card .btn-curriculum {
        background-color: var(--btn-color);
        border-color: var(--btn-color);
        color: #000;
      }

      .academic-page .card .btn-curriculum:hover {
        opacity: 0.9;
      }

      /* Term / week tabs on curriculum pages */
      .academic-page .learner-progress-terms .nav-link {
        color: #333;
        font-weight: 500;
        border-radius: 0;
        padding-bottom: 0.75rem;
        margin-right: 5.5rem;
      }

      .academic-page .learner-progress-terms .nav-link.active {
        border-color: transparent;
        border-bottom: 3px solid var(--navbar-bg-color);
        color: #000;
      }

      .academic-page .learner-progress-terms-detailed {
        background-color: var(--navbar-bg-color);
      }

      /* Question paper page: make typography denser on mobile for better fit */
      @media (max-width: 767.98px) {
        .question-paper-page {
          font-size: 0.85rem;
        }
        .question-paper-page .card-header,
        .question-paper-page label,
        .question-paper-page p,
        .question-paper-page .form-check-label,
        .question-paper-page .mark a {
          font-size: 0.8rem;
        }
        .question-paper-page .btn {
          font-size: 0.7rem;
          padding: 0.2rem 0.5rem;
        }
        .question-paper-page .card {
          padding: 0.4rem 0.5rem;
        }
      }

      /* Keep term tabs in a single horizontal row on mobile (scrollable) */
      @media (max-width: 767.98px) {
        .academic-page .learner-progress-terms {
          flex-wrap: nowrap;
          overflow-x: auto;
          overflow-y: hidden;
          white-space: nowrap;
        }

        .academic-page .learner-progress-terms .nav-item {
          flex: 0 0 auto;
        }

        .academic-page .learner-progress-terms .nav-link {
          margin-right: 0.75rem;
          font-size: 11px;
          padding: 0.25rem 0;
        }
      }

      /* Curriculum cards used on teacher / course curriculum page */
      .curriculum-card {
        background-color: rgba(228, 222, 222/80%);
        border-radius: 18px;
        box-shadow: 0 8px 16px rgba(0, 0, 0/50%);
      }

      .curriculum-card .curriculum-icon {
        width: 48px;
        height: 48px;
        background-color: var(--primary-color);
        color: #fff;
        font-size: 1.4rem;
      }

      /* Assessment tree styling reused on curriculum content page */
      .chiefluthuli-learner-profile .chiefluthuli-assessment-item-list {
        position: relative;
        margin-left: 1.75rem;
        padding-left: 1.25rem;
        border-left: 2px solid #888;
      }

      .chiefluthuli-learner-profile .chiefluthuli-assessment-item {
        position: relative;
        padding: 0.45rem 0.75rem;
        background: #dfdfdf;
        border-radius: 12px;
        box-shadow: 0 2px 6px rgba(0 0 0 / 4%);
        margin-bottom: 0.6rem;
      }

      .chiefluthuli-learner-profile .chiefluthuli-assessment-item::before {
        content: "";
        position: absolute;
        left: -1.25rem;
        top: 50%;
        width: 1.25rem;
        height: 1px;
        background: #888;
      }

      /* Suppress connector lines on curriculum_content page only */
      .curriculum-content-page .chiefluthuli-assessment-item-list {
        border-left: none;
        margin-left: 0;
        padding-left: 0;
      }

      .curriculum-content-page .chiefluthuli-assessment-item::before {
        background: none;
        width: 0;
      }

      .curriculum-content-page .chiefluthuli-assessment-item .badge {
        display: inline-block;
      }

      .chiefluthuli-learner-profile .chiefluthuli-assessment-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 12px;
        background: #ef9b9f;
        color: #fff;
        font-size: 0.9rem;
      }

        /* Shared rounded sidebar variant used across all clients */
      .orcaa-sidebar-variant.orcaa-sidebar-container {
        margin-top: 70px;
      }

      .orcaa-sidebar-variant .orcaa-sidebar {
        border-radius: 26px;
        border: 1px solid rgba(0, 0, 0/ 50%);
        background-color: var(--white);
        padding-top: 1.5rem;
        margin-top: 0.5rem;
      }

      .orcaa-sidebar-variant .nav {
        display: flex;
        flex-wrap: wrap;
        padding-left: 0;
        margin-bottom: -22px;
        list-style: none;
      }

      .orcaa-sidebar-variant .nav.p-4 {
        padding: 0.5rem !important;
      }

      .orcaa-sidebar-variant .nav-item {
        border-radius: 18px;
        margin: 0 0.75rem 0.85rem;
      }

      .orcaa-sidebar-variant .nav-item.active {
        margin-left: 0.15rem;
        margin-right: 0.15rem;
        width: calc(100% - 0.3rem);
        background-color: #6f7ab8;
        color: #fff;
        box-shadow: 0 10px 20px rgba(0, 0, 0/ 16%);
      }

      .orcaa-sidebar-variant .nav-item.active .nav-icon,
      .orcaa-sidebar-variant .nav-item.active .nav-text {
        color: #fff;
      }

      /* On mobile, strip extra padding/margin from the sidebar variant wrapper
         and make sure it uses the compact bottom-nav styling and navbar bg */
      @media (max-width: 767.98px) {
        .sidebar.sidebar-md .orcaa-sidebar-variant.orcaa-sidebar-container {
          margin: 0 !important;
          padding: 0 !important;
        }

        .sidebar.sidebar-md .orcaa-sidebar-variant .orcaa-sidebar {
          background-color: var(--navbar-bg-color) !important;
          border-radius: 0;
          border: none;
          margin-top: 0;
          padding-top: 0.2rem;
          padding-bottom: 0.2rem;
          height: auto;
          box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.12);
        }
      }

      .curriculum-card-background-light {
          background-color: #e0dbdb;
          border-radius: 15px;
          box-shadow: 0 2px 6px rgba(0, 0, 0/ 5%);
      }

      /* teacher_subject_curriculum locked-state refinements */
      .teacher-subject-curriculum-page .curriculum-card {
        position: relative;
        overflow: hidden;
        transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
      }

      .teacher-subject-curriculum-page .mobile-module-card {
        position: relative;
        overflow: hidden;
      }

      .teacher-subject-curriculum-page .curriculum-card--locked {
        background-image: linear-gradient(
          rgba(0, 0, 0, 0.1),
          rgba(0, 0, 0, 0.1)
        );
        border: 1px solid rgba(0, 0, 0, 0.14);
      }

      .teacher-subject-curriculum-page .curriculum-card--locked::before,
      .teacher-subject-curriculum-page .mobile-module-card--locked::before,
      .teacher-subject-curriculum-page .curriculum-card--available::before,
      .teacher-subject-curriculum-page .mobile-module-card--available::before,
      .teacher-subject-curriculum-page .curriculum-card--complete::before,
      .teacher-subject-curriculum-page .mobile-module-card--complete::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 6px;
        pointer-events: none;
      }

      .teacher-subject-curriculum-page .curriculum-card--locked::before,
      .teacher-subject-curriculum-page .mobile-module-card--locked::before {
        background: color-mix(
          in srgb,
          var(--btn-color, #6f42c1) 78%,
          #000000 22%
        );
        opacity: 0.72;
      }

      .teacher-subject-curriculum-page .curriculum-card--available::before,
      .teacher-subject-curriculum-page .mobile-module-card--available::before {
        background: color-mix(
          in srgb,
          var(--primary-color, var(--btn-color, #6f42c1)) 72%,
          #ffffff 28%
        );
        opacity: 0.72;
      }

      .teacher-subject-curriculum-page .curriculum-card--complete::before,
      .teacher-subject-curriculum-page .mobile-module-card--complete::before {
        background: color-mix(
          in srgb,
          var(--primary-color, var(--btn-color, #6f42c1)) 84%,
          #ffffff 16%
        );
        opacity: 0.9;
      }

      .teacher-subject-curriculum-page .mobile-module-card--locked {
        background-image: linear-gradient(
          rgba(0, 0, 0, 0.1),
          rgba(0, 0, 0, 0.1)
        );
        border: 1px solid rgba(0, 0, 0, 0.14);
      }

      .teacher-subject-curriculum-page .curriculum-action-stack {
        min-width: 220px;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
      }

      .teacher-subject-curriculum-page .curriculum-action-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        justify-content: flex-end;
      }

      .teacher-subject-curriculum-page .curriculum-action-btn {
        min-width: 168px;
        padding: 0.6rem 1rem;
        border-radius: 999px;
        font-weight: 600;
        border: 1px solid transparent;
      }

      .teacher-subject-curriculum-page .curriculum-action-btn:hover,
      .teacher-subject-curriculum-page .curriculum-action-btn:focus {
        color: #fff;
      }

      .teacher-subject-curriculum-page .curriculum-action-btn--primary {
        background-color: var(--btn-color, #6f42c1);
        border-color: var(--btn-color, #6f42c1);
        color: var(--white, #fff);
      }

      .teacher-subject-curriculum-page .curriculum-action-btn--primary:hover,
      .teacher-subject-curriculum-page .curriculum-action-btn--primary:focus {
        background-color: var(--btn-color, #6f42c1);
        border-color: var(--btn-color, #6f42c1);
      }

      .teacher-subject-curriculum-page .curriculum-action-btn--secondary {
        background-color: var(--teriary-light-color, #5863c6);
        border-color: var(--teriary-light-color, #5863c6);
        color: var(--white, #fff);
      }

      .teacher-subject-curriculum-page .curriculum-action-btn--secondary:hover,
      .teacher-subject-curriculum-page .curriculum-action-btn--secondary:focus {
        background-color: var(--teriary-light-color, #5863c6);
        border-color: var(--teriary-light-color, #5863c6);
      }

      .teacher-subject-curriculum-page .curriculum-lock-chip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        min-width: 168px;
        padding: 0.6rem 1rem;
        border-radius: 999px;
        font-size: 0.8rem;
        font-weight: 600;
        line-height: 1.1;
        border: 1px solid transparent;
        user-select: none;
      }

      .teacher-subject-curriculum-page .curriculum-lock-chip--content {
        background: rgba(255, 255, 255, 0.88);
        border-color: var(--btn-color, #6f42c1);
        color: var(--btn-color, #6f42c1);
      }

      .teacher-subject-curriculum-page .curriculum-lock-chip--assessment {
        background: rgba(255, 255, 255, 0.45);
        border-color: var(--teriary-light-color, #5863c6);
        color: var(--table-header-color, #1d1d1d);
      }

      .teacher-subject-curriculum-page .curriculum-lock-note {
        max-width: 320px;
        margin-left: auto;
        color: var(--text-secondary, #666);
        font-size: 0.76rem;
        line-height: 1.45;
        text-align: right;
      }

      .teacher-subject-curriculum-page .mobile-status-locked {
        background: rgba(255, 255, 255, 0.84);
        border: 1px solid var(--btn-color, #6f42c1);
        color: var(--btn-color, #6f42c1);
      }

      @media (max-width: 767.98px) {
        .teacher-subject-curriculum-page .curriculum-action-stack {
          width: 100%;
          min-width: 0;
        }

        .teacher-subject-curriculum-page .mobile-module-actions {
          margin-top: 1rem;
        }

        .teacher-subject-curriculum-page .curriculum-action-row {
          justify-content: flex-start;
          width: 100%;
        }

        .teacher-subject-curriculum-page .curriculum-action-btn,
        .teacher-subject-curriculum-page .curriculum-lock-chip,
        .teacher-subject-curriculum-page .curriculum-lock-note {
          width: 100%;
          max-width: none;
          text-align: left;
        }
      }

      .learning-card {
          position: relative;
          display: flex;
          flex-direction: column;
          min-width: 0;
          word-wrap: break-word;
          background-color: #ddd;
          background-clip: border-box;
          border: 1px solid rgba(0, 0, 0, 12.5);
          border-radius: .25rem;
      }

      /* Make the learning card more compact on mobile */
      @media (max-width: 767.98px) {
        .learning-card {
          border-radius: 0.75rem;
        }
        .learning-card .card-body {
          padding: 0.75rem 0.9rem;
        }
        .learning-card.mt-2 {
          margin-top: 0.5rem !important;
        }
        .learning-card.mb-3 {
          margin-bottom: 0.75rem !important;
        }
      }
      .brand {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 30px;
      }
  
      .brand-wrapper {
        display: flex;
        align-items: center;
        gap: 10px;
      }
  
      .brand-icon {
        min-width: 24px;
        height: 24px;
        background-color: var(--orcaa-sidebar-primary);
        transform: rotate(45deg);
        border-radius: 4px;
      }
  
      .brand-name {
        font-weight: 600;
        font-size: 18px;
        color: var(--orcaa-sidebar-text-dark);
        white-space: nowrap;
        overflow: hidden;
        opacity: 1;
        transition: opacity 0.2s ease;
      }
  
      .collapsed .brand-name {
        opacity: 0;
        width: 0;
      }
  
      .orcaa-sidebar-container  .toggle-sidebar {
        width: 30px;
        height: 30px;
        background-color: var(--orcaa-sidebar-primary);
        color: var(--orcaa-sidebar-white);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: transform 0.3s ease;
        box-shadow: 0 2px 5px var(--orcaa-sidebar-shadow-dark);
      }
  
      .collapsed .toggle-sidebar {
        transform: rotate(180deg);
      }
  
      .orcaa-sidebar-container  .section-heading {
        font-size: 12px;
        text-transform: uppercase;
        color: var(--orcaa-sidebar-text-light);
        font-weight: 600;
        margin: 20px 0 10px 15px;
        letter-spacing: 0.5px;
        white-space: nowrap;
        overflow: hidden;
        transition: opacity 0.2s ease;
      }
  
      .orcaa-sidebar-container  .collapsed .section-heading {
        opacity: 0;
        height: 10px;
        margin: 10px 0 5px 0;
      }
  
      .orcaa-sidebar-container  .nav-item {
        display: flex;
        align-items: center;
        padding: 9px 15px;
        border-radius: 10px;
        margin-top: 0.4rem;
        margin-bottom: -0.5rem;
        color: #000;
        text-decoration: none;
        transition: all 0.2s ease;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        position: relative;
        font-size: 12px;
      }
  
      .orcaa-sidebar-container  .collapsed .nav-item {
        padding: 12px;
        justify-content: center;
      }
  
      .orcaa-sidebar-container  .nav-item:hover {
        background-color: var(--orcaa-sidebar-hover-bg);
        color: #000;
        width: 50%
      }

      .card-margin-top-programme-view {
          margin-top: -0.5rem !important;
      }
        
      .orcaa-sidebar-container  .nav-item.active {
        background-color: var(--sidebar-color);
        color: #000;
        width: 80%;
      }

      .orcaa-sidebar-container  .nav-icon {
        min-width: 16px;
        margin-right: 10px;
        font-size: 14px;
        opacity: 0.8;
        text-align: center;
        color: #000;
      }

      /* Slightly larger icons for programme details sidebar */
      .app-programme-cards-list .nav-icon {
        font-size: 18px;
        min-width: 20px;
      }
  
      .orcaa-sidebar-container  .collapsed .nav-icon {
        margin-right: 0;
      }
  
      .orcaa-sidebar-container  .nav-text {
        transition: opacity 0.1s ease;
        font-size: 13px;
        color: #000;
      }
  
      .orcaa-sidebar-container  .collapsed .nav-text {
        opacity: 0;
        width: 0;
      }

      /* Distinguish active state between main section buttons
         and inner options on the programme cards sidebar.
         - Main headers keep the standard accent (var(--sidebar-color))
         - Selected inner options use a light grey background */
      .app-programme-cards-list #programme-sidebar-accordion > .nav-item.active,
      .app-home-list #home-admin-fixed-sidebar > .nav-item.active,
      .app-home-list #home-default-sidebar > .nav-item.active,
      .app-home-list .home-root-link.active,
      .app-course-list #learner-course-sidebar > .nav-item.active,
      .app-course-list #teacher-course-sidebar > .nav-item.active {
        background-color: var(--sidebar-color);
      }

      .app-programme-cards-list #programme-sidebar-accordion .collapse .nav-item.active {
        background-color: #f2f2f2;
      }

      /* Keep label visible for programme cards header even when collapsed */
      .orcaa-sidebar-container .programme-cards-header.collapsed .nav-text {
        opacity: 1;
        width: auto;
      }

      /* Keep label visible for Learners header when its submenu is collapsed */
      .orcaa-sidebar-container .nav-item[data-programme-section="learners"].collapsed .nav-text {
        opacity: 1;
        width: auto;
      }

      /* Keep label visible for Evaluation, Courses, Assessments, Settings and Attendance headers when collapsed */
      .orcaa-sidebar-container .nav-item[data-programme-section="evaluation"].collapsed .nav-text,
      .orcaa-sidebar-container .nav-item[data-programme-section="courses"].collapsed .nav-text,
      .orcaa-sidebar-container .nav-item[data-programme-section="assessments"].collapsed .nav-text,
      .orcaa-sidebar-container .nav-item[data-programme-section="programme-settings"].collapsed .nav-text,
      .orcaa-sidebar-container .nav-item[data-programme-section="attendance"].collapsed .nav-text {
        opacity: 1;
        width: auto;
      }
  
      .orcaa-sidebar-container  .dropdown-toggle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
      }
  
      .orcaa-sidebar-container  .dropdown-toggle::after {
        display: none;
      }
  
      .orcaa-sidebar-container  .dropdown-toggle .bi-chevron-down {
        transition: transform 0.2s;
        font-size: 14px;
      }
  
      .orcaa-sidebar-container  .collapsed .dropdown-toggle .bi-chevron-down {
        opacity: 0;
        width: 0;
      }
  
      .orcaa-sidebar-container  .dropdown-toggle[aria-expanded="true"] .bi-chevron-down {
        transform: rotate(180deg);
      }
  
      .orcaa-sidebar-container  .dropdown-menu {
        position: static !important;
        width: 100%;
        padding: 0;
        margin: 0 0 5px 0;
        border: none;
        box-shadow: none;
        transform: none !important;
        background: transparent;
      }

      .orcaa-sidebar-container  .recruitment-dropdown-menu {
        margin: 4px 0 5px 0;
      }

      .orcaa-sidebar-container  .programme-dropdown-menu {
        margin: 4px 0 5px 0;
      }
  
      .orcaa-sidebar-container  .collapsed .dropdown-menu {
        position: absolute !important;
        left: 100% !important;
        top: 0 !important;
        width: 180px;
        background: var(--orcaa-sidebar-white);
        box-shadow: 0 5px 15px var(--orcaa-sidebar-shadow-medium);
        border-radius: 8px;
        padding: 8px;
        margin-left: 5px;
        display: none; /* Hidden by default in collapsed mode */
      }
  
      .orcaa-sidebar-container  .collapsed .dropdown:hover .dropdown-menu {
        display: block; /* Show on hover in collapsed mode */
      }
  
      .orcaa-sidebar-container  .dropdown-item {
        padding: 8px 15px 8px 44px;
        color: #777;
        border-radius: 10px;
        margin-bottom: 2px;
        font-size: 14px;
      }

      .orcaa-sidebar-container  .recruitment-dropdown-menu .dropdown-item {
        padding: 8px 15px;
      }

      .orcaa-sidebar-container  .programme-dropdown-menu .dropdown-item {
        padding: 8px 15px;
      }

      .orcaa-sidebar-container  .dropdown-menu .nav-icon {
        font-size: 13px;
        min-width: 14px;
        margin-right: 8px;
      }
  
      .collapsed .dropdown-item {
        padding: 8px 15px;
      }
  
      .orcaa-sidebar-container  .dropdown-item:hover {
        background-color: var(--orcaa-sidebar-hover-bg);
        color: var(--orcaa-sidebar-text-dark);
      }
  
      .orcaa-sidebar-container  .dropdown-item.active {
        background-color: var(--orcaa-sidebar-light-bg);
        color: var(--orcaa-sidebar-primary);
      }
  
      .orcaa-sidebar-container  .collapsed .nav-item:hover .nav-tooltip {
        display: block;
      }
  
      .orcaa-sidebar-container  .nav-tooltip {
        display: none;
        position: absolute;
        left: calc(100% + 10px);
        top: 0;
        background: var(--orcaa-sidebar-white);
        width: 180px;
        padding: 12px 15px;
        border-radius: 8px;
        box-shadow: 0 5px 15px var(--orcaa-sidebar-shadow-medium);
        color: var(--orcaa-sidebar-text-medium);
        z-index: 100;
      }
  
      .premium-container {
        margin-top: auto;
        background-color: var(--orcaa-sidebar-light-bg);
        border-radius: 12px;
        padding: 20px;
        position: relative;
        overflow: hidden;
        margin-bottom: 94px;
        transition: all 0.3s ease;
      }
  
      .premium-content {
        position: relative;
        z-index: 2;
      }
  
      .premium-title {
        font-weight: 600;
        font-size: 16px;
        margin-bottom: 8px;
      }
  
      .premium-description {
        font-size: 12px;
        color: var(--orcaa-sidebar-text-medium);
        margin-bottom: 15px;
      }
  
      .premium-button {
        background-color: var(--orcaa-sidebar-primary);
        color: var(--orcaa-sidebar-white);
        border: none;
        border-radius: 8px;
        padding: 8px 15px;
        font-size: 11px;
        cursor: pointer;
        width: 100%;
        transition: all 0.2s;
      }
  
      .premium-button:hover {
        background-color: var(--orcaa-sidebar-primary-dark);
      }
  
      .premium-illustration {
        position: absolute;
        right: 72px;
        width: 83px;
        z-index: 1;
      }
      
      .premium-container
      {
        display: none;
      }

      .premium-illustration
      {
        display: none;
      }
    

      .table>thead {
        vertical-align: bottom;
        z-index: auto;
    }



 /*----------------- END  Orcaa new sidebar ----------------- */ 


/* ----------------- Manage Program section-----------------  */
      .bg-team-member-1
      {
        background:var(--team-member-1);
      }

      .bg-team-member-2
      {
        background:var(--team-member-2);
      }

      .tabs-container {  
        padding: 0 35px;
      }

      .tabs-container  .nav-pills {
        display: flex;
        flex-wrap: nowrap;
        gap: 10px;
        margin-bottom: 1rem;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 5px;
        overflow-x: auto;
      }

      /* Hide scrollbar for Chrome, Safari and Opera */
      .tabs-container  .nav-pills::-webkit-scrollbar {
        height: 4px;
      }

      /* Handle */
      .tabs-container  .nav-pills::-webkit-scrollbar-thumb {
        background: var(--color-border);
        border-radius: 4px;
      }

      .tabs-container  .nav-item .nav-link {
        border-radius: 12px;
        padding: 12px 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        background: var(--color-card);
        color: var(--color-text);
        border: 1px solid var(--color-border);
        box-shadow: 0 2px 4px rgba(0,0,0,0.04);
        min-width: 80px;
      }

      .tabs-container  .nav-item .nav-link.active {
        background-color: var(--color-all-light);
        color: var(--color-all);
        border-color: var(--color-all-border);
      }

      .tabs-container  .nav-item .nav-link i {
        font-size: 22px;
        margin-bottom: 4px;
      }

      .tabs-container  .nav-text {
        font-size: 12px;
        font-weight: 500;
      }

      /* ----------- Tab specific styles ----------- */
      .program-detail-tab { color: var(--color-all) !important; } 

      .active.program_detail_tab {
        background-color: var(--color-all-light) !important;
        border-color: var(--color-all-border);
      }



  
      .programme-management-card {
        background: var(--color-card);
        border-radius: 12px;
        margin-top: 20px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        border: 1px solid var(--color-border);
      }

      .tabs-container  .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid var(--color-border);
        padding-bottom: 15px;
        margin-bottom: 15px;
      }

      .programme-management-title {
        font-weight: 600;
        color: white;
        margin-bottom: 0;
      }

      .black-outline {
        border: 2px solid #000000;
        border-radius: 20px;
    }

      .recruit-outline {
        border: 1px solid #1c1515;
        border-radius: 15px;
    }
      .programme-management-badge {
        font-size: 11px;
        padding: 4px 10px;
        border-radius: 20px;
      }

      .programme-badge {
        background-color: var(--color-all-light);
        color: var(--color-all);
      }


      .tabs-container  .card-content {
        color: var(--color-text);
        font-size: 14px;
      }

      .tabs-container  .team-members {
        font-size: 12px;
        color: var(--color-text-light);
        margin-top: 15px;
        text-align: right;
      }

      .avatar-group {
        display: inline-flex;
        margin-left: 8px;
      }

      .avatar {
        width: 50px;
        height: 43px;
        border-radius: 50%;
        color: #000;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        font-weight: bold;
        margin-left: -8px;
        border: 2px solid white;
      }

      .tabs-container .tab-pane {
        display: none;
      }

      .tabs-container  .tab-pane.active {
        display: block;
      }
/* ----------------- END  Manage Program section-----------------  */
  

/* ----------------- Chat whindow -----------------*/

      .chat-button {
        position: fixed;
        bottom: 30px;
        right: 30px;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: #b197fc;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        cursor: pointer;
        z-index: 100;
        transition: all 0.3s ease;
      }

      .chat-button:hover {
        transform: scale(1.05);
      }

      .chat-icon {
        color: white;
        font-size: 24px;
        left: 18px;
        top: 9px;
        position: absolute;
      }

      .close-button {
        position: fixed;
        bottom: 30px;
        right: 100px;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: #b197fc;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        cursor: pointer;
        z-index: 100;
        transition: all 0.3s ease;
        opacity: 0;
        pointer-events: none;
      }

      .close-button.active {
        opacity: 1;
        pointer-events: auto;
      }

      .chat-window {
        position: fixed;
        bottom: 100px;
        right: 30px;
        width: 320px;
        height: 450px;
        background-color: #fff;
        border-radius: 15px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        opacity: 0;
        transform: translateY(20px);
        pointer-events: none;
        transition: all 0.3s ease;
        z-index: 99;
      }

      .chat-window.active {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
      }

      .chat-header {
        padding: 15px 20px;
        background-color: #b197fc;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .chat-header-title {
        display: flex;
        align-items: center;
        color: #fff;
        font-weight: bold;
      }

      .chat-header-icon {
        margin-right: 10px;
        font-size: 20px;
      }

      .chat-header-actions {
        display: flex;
      }

      .chat-body {
        flex-grow: 1;
        padding: 10px;
        overflow-y: auto;
        background-color: #f9f9f9;
        display: flex;
        flex-direction: column;
      }

      .chat-input-container {
        padding: 10px;
        background-color: #fff;
        border-top: 1px solid #eee;
      }

      .chat-input {
        width: 100%;
        padding: 10px 15px;
        border-radius: 20px;
        border: 1px solid #ddd;
        outline: none;
        font-size: 11px;
      }

      .message {
        max-width: 70%;
        padding: 10px 15px;
        margin: 5px 0;
        border-radius: 15px;
        font-size: 14px;
        line-height: 1.4;
      }

      .user-message {
        align-self: flex-end;
        background-color: #fff;
        border: 1px solid #eee;
        border-bottom-right-radius: 5px;
      }

      .user-message-container {
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        margin: 5px 0;
      }

      .agent-message {
        align-self: flex-start;
        background-color: #b197fc;
        color: #fff;
        border-bottom-left-radius: 5px;
      }

      .agent-message-container {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        margin: 5px 0;
      }

      .avatar {
        width: 50px;
        height: 43px;
        border-radius: 50%;
        overflow: hidden;
        margin: 0 5px;
      }

      .avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .send-button {
        position: absolute;
        right: 16px;
        bottom: 59px;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background-color: var(--dark-purple);
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
      }

/* ----------------- END  Chat window -----------------*/


/*----------------- Assesment layout -----------------*/

      .slide-container {
        max-width: 1000px;
        margin: 0 auto;
        position: relative; 
      }

      .slide-container .progress-bar-container {
        height: 15px !important;
        background-color: #6610f2 !important;
        border-radius: 30px !important;
        position: relative;
        margin-bottom: 20px;
      }

      .slide-container .progress-indicator {
        width: 40px;
        height: 40px;
        background-color: #d3d3d3 !important;
        border-radius: 50%;
        position: absolute;
        top: -12px;
        left: 43%;
        z-index: 10;
      }

      .slide-container .main-content
      {
        max-width: 100%!important;
      }

      .slide-container .content-container {
        display: flex;
        gap: 30px;
      }

      .main-content {
        flex: 5;
        background-color: white;
        border-radius: 15px;
        padding: 0;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        position: relative;
        overflow: hidden;
        margin: 0px;
      }

      .card-content {
        padding: 25px;
      } 

      .key-takeaway {
        flex: 1;
        background-color: #f0f0f0;
        border-radius: 15px;
        padding: 20px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      }

      .explanation-text {
        font-size: 1.1rem;
        line-height: 1.6;
      }

      .takeaway-header {
        font-weight: bold;
        margin-bottom: 15px;
        color: #333;
        font-size: 13px
      }

      .takeaway-content {
        font-size: 0.9rem;
        line-height: 1.5;
      }

/*-----------------END  Assesment layout -----------------*/


/* ----------------- QUIZE Assesment modal ----------------- */

      .modal-learning-modal-container  .card {
        width: 350px;
        border-radius: 25px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        overflow: hidden;
        max-height: 85vh;
        display: flex;
        flex-direction: column;
      }

      .modal-learning-modal-container .card-header {
        background-color: white;
        border-bottom: none;
        padding: 20px;
      }

      .modal-learning-modal-container .card-body {
        background-color: white;
        padding: 0;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: #d0d0d0 #f5f7ff;
      }

      .modal-learning-modal-container .card-body::-webkit-scrollbar {
        width: 6px;
      }

      .modal-learning-modal-container.card-body::-webkit-scrollbar-track {
        background: #f5f7ff;
      }

      .modal-learning-modal-container .card-body::-webkit-scrollbar-thumb {
        background-color: #d0d0d0;
        border-radius: 10px;
      }

      .modal-learning-modal-container .sub-topics-item {
        background-color: #f5f7ff;
        border-radius: 15px;
        margin: 10px 20px;
        padding: 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .modal-learning-modal-container .sub-topics-icon {
        width: 45px;
        height: 45px;
        background-color: var(--dark-purple);
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
      }

      .modal-learning-modal-container .sub-topics-icon.disabled {
        background-color: #d0d0d0;
      }

      .modal-learning-modal-container .sub-topics-info {
        flex: 1;
      }

      .modal-learning-modal-container .sub-topics-title {
        font-weight: 600;
        margin-bottom: 4px;
      }

      .modal-learning-modal-container .sub-topics-date {
        color: #888;
        font-size: 0.8rem;
      }

      .modal-learning-modal-container .header-title {
        font-weight: bold;
      }

      .modal-learning-modal-container .header-subtitle {
        color: #888;
        font-size: 0.9rem;
      }

      .wave-icon {
        margin-right: 10px;
      }

      .background-shapes .shape {
        position: absolute;
        z-index: -1;
        opacity: 0.7;
      }

      .shape-1 {
        top: 10%;
        left: 5%;
        width: 60px;
        height: 60px;
        background-color: var(--accent-teal);
        border-radius: 10px;
        transform: rotate(45deg);
      }

      .shape-2 {
        bottom: 15%;
        left: 10%;
        width: 100px;
        height: 100px;
        background-color: var(--primary-purple-light);
        border-radius: 50%;
      }

      .shape-3 {
        top: 20%;
        right: 10%;
        width: 70px;
        height: 70px;
        background-color: var(--accent-teal);
        border-radius: 50%;
      }

      .shape-4 {
        bottom: 20%;
        right: 5%;
        width: 80px;
        height: 80px;
        background-color: var(--accent-teal);
        border-radius: 12px;
        transform: rotate(15deg);
      }

      .quize-section .container {
        max-width: 900px;
      }

      .quize-section .card {
        border-radius: 15px;
        border: none;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        padding: 2rem;
      }

      .quize-section .progress {
        height: 10px;
        background-color: var(--light-purple-bg);
      }

      .quize-section .progress-bar {
        background-color: var(--primary-purple);
      }

      .quize-section .quiz-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2rem;
      }

      .quize-section .quiz-title {
        font-weight: 600;
        color: var(--text-dark);
        margin-bottom: 0;
      }

      .quiz-subtitle {
        color: #6c757d;
        font-size: 0.9rem;
      }

      .quiz-actions {
        display: flex;
        align-items: center;
        gap: 15px;
      }

      .btn-review {
        background-color: var(--medium-gray);
        color: var(--text-dark);
        border-radius: 20px;
        padding: 6px 15px;
        font-size: 0.85rem;
        border: none;
      }

      .btn-back {
        background-color: var(--light-gray);
        color: var(--text-dark);
        border-radius: 20px;
        padding: 6px 15px;
        font-size: 0.85rem;
        border: 1px solid #dee2e6;
      }

      .quize-section .timer {
        display: flex;
        align-items: center;
        gap: 5px;
        color: var(--text-dark);
        font-weight: 500;
      }

      .timer i {
        color: var(--primary-purple);
      }

      .question-container {
        margin-top: 2rem;
        padding: 1rem 0;
      }

      .question-number {
        font-size: 0.9rem;
        color: #6c757d;
        margin-bottom: 0.5rem;
      }

      .question-text {
        font-weight: 500;
        color: var(--text-dark);
        margin-bottom: 1.5rem;
      }

      .options-container {
        margin-top: 1rem;
      }

      .option {
        display: flex;
        align-items: center;
        padding: 12px 16px;
        margin-bottom: 10px;
        border-radius: 10px;
        cursor: pointer;
        transition: all 0.2s ease;
      }

      .option:hover {
        background-color: var(--light-purple-bg);
      }

      /* Style for disabled options */
      .option[disabled], .option.disabled {
        cursor: not-allowed;
        opacity: 0.8;
      }

      .option.selected {
        background-color: var(--light-purple-bg);
        border-left: 4px solid var(--primary-purple);
      }

      .option-label {
        width: 30px;
        color: #6c757d;
      }

      .option-text {
        flex: 1;
      }

      .option-radio {
        width: 18px;
        height: 18px;
        border: 2px solid #ced4da;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .option.selected .option-radio {
        border-color: var(--primary-purple);
      }

      .option.selected .option-radio::after {
        content: '';
        width: 10px;
        height: 10px;
        background-color: var(--primary-purple);
        border-radius: 50%;
      }
 
    .option.correct {
      background-color: rgba(40, 167, 69, 0.2) !important;
      border-left: 4px solid #28a745 !important;
    }

    .option.correct .option-radio {
      border-color: #28a745;
    }

    .option.correct .option-radio::after {
      background-color: #28a745;
    }

    .option.incorrect {
      background-color: rgba(220, 53, 69, 0.2) !important;
      border-left: 4px solid #dc3545 !important;
    }

    .option.incorrect .option-radio {
      border-color: #dc3545;
    }

    .option.incorrect .option-radio::after {
      background-color: #dc3545;
    }

    /* Notification styling - replacing modal */
    .notification {
      position: fixed;
      bottom: 20px;
      right: 20px;
      padding: 15px 20px;
      border-radius: 8px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
      display: flex;
      align-items: center;
      gap: 10px;
      z-index: 1050;
      font-weight: 500;
      animation: fadeIn 0.3s ease-in-out;
    }
      
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .navigation {
      display: flex;
      justify-content: space-between;
      margin-top: 2rem;
      padding-top: 1rem;
      border-top: 1px solid #dee2e6;
    }

    .quize-section .quize-prev-btn,  .quize-section .quize-next-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      border-radius: 20px;
      padding: 6px 15px;
      font-size: 0.9rem;
      background-color: var(--light-gray);
      color: var(--text-dark);
      border: 1px solid #dee2e6;
    }

    .quize-prev-btn:disabled, .quize-next-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .btn-submit {
      background-color: var(--primary-purple);
      color: white;
      border-radius: 20px;
      padding: 6px 20px;
      border: none;
    }

    .btn-submit:disabled {
      background-color: #a491e8;
      cursor: not-allowed;
    } 
 
/* -----------------END QUIZE Assesment modal ----------------- */
  
.wave-shape {
  position: absolute;
  /* top: -0; */
  right: 0;
  height: 100vh;
  width: 80%;
  background-color: #7B68EE;
  z-index: 0;
  border-radius: 0;
  clip-path: path('M1000,0 L1000,1000 L0,1000 C300,850 200,650 400,500 C600,350 500,150 1000,0 Z');
}

.hero-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  color: white;
}

.hero-title {
  font-size: 4rem; 
  margin-bottom: 1rem;
  color: #000;
}

.hero-subtitle {
  font-size: 1.5rem;
  margin-bottom: 2rem;
  color: #333;
}
  
.device-mockup {
  position: relative;
  z-index: 2;
  max-width: 100%;
  transform: perspective(1000px) rotateY(-10deg);
  transition: transform 0.5s ease;
}

.device-mockup:hover {
  transform: perspective(1000px) rotateY(0deg);
}

.btn-primary-custom {
  background-color: #7B68EE;
  border: none;
  padding: 0.8rem 2rem;
  border-radius: 50px;
  font-weight: 600;
  transition: all 0.3s ease;
  color: whitesmoke;
}

.btn-primary-custom:hover {
  background-color: #6A5ACD;
  transform: translateY(-3px);
  box-shadow: 0 10px 20px var(--shadow-color);
  color: whitesmoke;
}

.logo-container {
  text-align: center;
  margin-bottom: 1rem;
}

.logo {
  width: 50px;
  height: 50px;
  background-color: #7B68EE;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
}

.footer {
  position: absolute;
  bottom: 20px;
  right: 20px;
  color: #fff;
  z-index: 2;
}

@media (max-width: 991.98px) {
  .hero-title {
      font-size: 3rem;
  }
  
  .hero-subtitle {
      font-size: 1.2rem;
  }
  
  .wave-shape {
      width: 50%;
  }
}

@media (max-width: 767px) {
  .hero-section {
      padding: 3rem 0;
      min-height: auto;
  }
  
  .hero-title {
      font-size: 2.5rem;
      text-align: center;
  }
  
  .hero-subtitle {
      text-align: center;
  }
  
  .text-container {
      margin-bottom: 3rem;
      text-align: center;
  }
  
  .device-mockup {
      margin: 0 auto;
      transform: none;
  }
  
  .wave-shape {
      display: none;
  }
  
  .bg-primary-custom {
      background-image: linear-gradient(to bottom, #7B68EE, #9370DB);
  }
}

/*-------------------------STEP 1 - PARENTS ONBOARDING-------------------------*/
      .top-banner {
          background-color: var(--purple-primary);
          height: 25px;
          width: 100%;
      }

      .header-section { 
          color: black; 
          text-align: center;
      }

      .welcome-text {
          font-size: 25px;
          font-weight: bold;
          margin-bottom: 1rem;
          margin-top: 50px;
      }

      .purple-text {
          color: var(--purple-primary);
      }

      .progress-bars {
          margin: 1rem 0;
          text-align: center;
      }

      .bar {
          display: inline-block;
          width: 50px;
          height: 8px;
          margin: 0 5px;
          border-radius: 4px;
      }

      .bar-active {
          background-color: var(--purple-primary);
      }

      .bar-inactive {
          background-color:var(--grey-placeholder);
      }
              
      .pricing-card {
          background-color: var(--grey-light);
          border-radius: 15px;
          padding: 2rem;
          height: 100%;
      }

      .pricing-type {
          background-color: var(--grey-placeholder);
          color: var(--text-primary);
          padding: 0.5rem 2rem;
          border-radius: 25px;
          display: inline-block;
          margin-bottom: 1rem;
          position: relative;
          top: -15px;
      }

      .annual {
          background-color: var(--purple-primary);
          color: white;
      }

      .btn-subscribe:hover,  #subscribe-annual:hover  {
          background-color: var(--purple-hover);
          border: 1px solid var(--purple-primary);
          color:#fff;
      } 

      .price {
          font-size: 2.5rem;
          font-weight: bold;
          margin-bottom: 1.5rem;
      }

      .feature-list {
          list-style-type: none;
          padding-left: 0;
          margin-bottom: 2rem;
      }

      .feature-list li {
          margin-bottom: 0.5rem;
          position: relative;
          padding-left: 1.5rem;
      }

      .feature-list li::before {
          content: "•";
          position: absolute;
          left: 0;
          color: var(--text-primary);
      }

      .btn-subscribe {
          background-color: var(--purple-primary);
          color: white;
          border: none;
          border-radius: 25px;
          padding: 0.75rem 0;
          width: 100%;
          font-weight: bold;
      }

      .btn-subscribe-outline {
          background-color: transparent;
          color: var(--text-primary);
          border: 2px solid var( --grey-border);
          border-radius: 25px;
          padding: 0.75rem 0;
          width: 100%;
          font-weight: bold;
      }

      .footer {
          text-align: center;
          padding: 2rem 0;
          color: var(--text-primary);
      }

      .form-section {
          max-width: 600px;
          margin: 0 auto;
          text-align: center;
      }

      .form-control {
          border-radius: 10px; 
      }

      .btn-next {
          background-color: var(--purple-primary);
          color: white;
          border: none;
          border-radius: 25px;
          padding: 10px 0;
          width: 200px;
          font-weight: bold;
          margin-top: 20px;
      }

      .btn-next:hover {
          background-color: var(--purple-light);
          color: white; 
      }

      .form-label {
          display: block;
          margin-bottom: 5px;
          text-align: left;
      }

      .registration-page,
      .pricing-page,
      .subjects-page {
          transition: opacity 0.5s ease-in-out;
      }

      .side-info {
          position: absolute;
          top: 10px;
          left: 10px;
          background-color: white;
          border: 1px solid var( --grey-border);
          border-radius: 5px;
          padding: 2px 5px;
          font-size: 12px;
      }

      .avatar-container {
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap; /* Prevents wrapping of the avatars */
          justify-content: center; /* Centers the avatars */
          gap: 10px; /* Adds spacing between the avatars */
          max-width: 100%;
          overflow-x: auto;

      }
      
      .avatar {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: bold;
          font-size: 15px;
          cursor: pointer;
      }

      .avatar.active {
          border: 3px solid var(--green-primary);
      }

      .avatar.inactive {
          border: 3px solid #000;
      }

      .avatar.add {
          background-color: var(--grey-placeholder);
      }

      .avatar-label {
          text-align: center;
          margin-top: 5px;
          font-size: 12px;
          cursor: pointer;
      }

      .search-box {
          max-width: 400px;
          margin: 20px auto;
          position: relative;
      }

      .search-input {
          border-radius: 16px;
          padding: 4px 10px;
          width: 100%;
          border: 1px solid #cccccc5c; 
      }

      .search-dropdown {
          position: absolute;
          top: 100%;
          left: 0;
          right: 0;
          background-color: white;
          border: 1px solid var( --grey-border);
          border-radius: 10px;
          margin-top: 5px;
          z-index: 100;
          max-height: 200px;
          overflow-y: auto;
          display: none;
          box-shadow: 0 2px 8px rgba(0,0,0,10%);
      }

      .search-dropdown-item {
          padding: 10px 15px;
          cursor: pointer;
          border-bottom: 1px solid var(--grey-border-light);
      }

      .search-dropdown-item:last-child {
          border-bottom: none;
      }

      .search-dropdown-item:hover {
          background-color:var(--grey-light);
      }

      .tag {
          display: inline-block;
          background-color: var(--green-primary);
          color: white;
          border-radius: 25px;
          padding: 5px 15px;
          margin: 5px;
          font-size: 14px;
      }

      .subject-grid {
          display: flex;
          flex-wrap: wrap; 
          gap: 15px;
          margin-top: 20px;
      }

      .subject-card {
          width: 100px;
          height: 100px;
          border-radius: 15px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          background-color: var(--grey-medium);
          cursor: pointer;
          position: relative;
      }

      .subject-card.active {
          background-color: var(--dark-purple);
          color: white;
      }

      .subject-indicator {
          width: 50px;
          height: 3px;
          background-color: white;
          border-radius: 3px;
          margin-top: 10px;
      }

      .remove-subject {
          position: absolute;
          top: 5px;
          right: 5px;
          background-color: rgba(255, 255, 255, 0.8);
          border-radius: 50%;
          width: 20px;
          height: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 12px;
          cursor: pointer;
          display: none;
      }

      .subject-card.active .remove-subject {
          display: flex;
      }

      /* Additional CSS for the new content section */
      .subject-btn {
          background-color: var(--grey-medium);
          color: var(--text-primary);
          border-radius: 25px;
          padding: 8px 25px;
          margin: 0 10px;
          border: none;
          transition: all 0.3s ease;
          width:300px;
          font-size: 12px;
      }

      .subject-btn.active {
          background-color: var(--purple-primary);
          color: white;
      }

      .selected-subject-btn {
          background-color: var(--grey-medium);
          color: var(--text-primary);
          border-radius: 25px;
          padding: 8px 25px;
          margin: 0 10px; 
          border: none;
          transition: all 0.3s ease;
      }

      .selected-subject-btn.active {
          background-color: var(--purple-primary);
          color: white;
      }

      .content-card {
          background:var(--primary-color);
          border-radius: 15px;
          overflow: hidden;
          box-shadow: 0 4px 8px rgb(0 0 0 / 10%);
          height: 100%;
          display: flex;
          flex-direction: column;
      }

     

      .card-header h5 {
          margin: 0;
          font-weight: bold;
      }

      .card-body {
          padding: 10px !important;
          flex-grow: 1;
      }

      .resource-count {
          color: var(--purple-primary);
          font-weight: bold;
          margin-top: 10px;
      }

      .card-footer {
          padding: 15px;
          background-color: var(--grey-lightest);
          text-align: right;
      }

      .btn-view {
          background-color: transparent;
          color: var(--purple-primary);
          border: 2px solid var(--purple-primary);
          border-radius: 25px;
          padding: 5px 20px;
          font-weight: bold;
          transition: all 0.3s ease;
      }

      .btn-view:hover {
          background-color: var(--purple-primary);
          color: white;
      }

      .btn-continue {
          background-color: var(--purple-primary);
          color: white;
          border: none;
          border-radius: 25px;
          padding: 10px 30px;
          font-weight: bold;
          transition: all 0.3s ease;
      }

      .btn-continue:hover {
          background-color: #7b68eed9;
          color: white;
      }



      /* Subject section */
      .subject-section {
          margin-bottom: 30px;
      }

      .subject-title {
          font-size: 22px;
          font-weight: 600;
          margin-bottom: 15px;
          padding-left: 5px;
          text-align: center;
      }

      /* Tiles grid */
      .tiles-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 15px;
      }

      @media (max-width: 768px) {
          .tiles-grid {
              grid-template-columns: repeat(2, 1fr);
          }
      }

      @media (max-width: 480px) {
          .tiles-grid {
              grid-template-columns: 1fr;
          }
      }

      /* Individual tile */
      .tile {
          background-color: #e5e5e5;
          border-radius: 12px;
          padding: 30px 20px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          min-height: 120px;
          transition: transform 0.2s ease, box-shadow 0.2s ease;
          cursor: pointer;
          position: relative;
      }

      .tile.active {
          background-color: var(--text-dark);
          color: white;
      }

      .tile:hover {
          transform: scale(1.02);
          box-shadow: 0 4px 12px color(rgba(0, 0, 0, 0.1));
      }

      .tile-icon {
          position: absolute;
          top: 10px;
          right: 10px;
          font-size: 18px;
          width: 24px;
          height: 24px;
          background-color: #fff;
          color: #000;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
      }

      .active .tile-icon {
          background-color: var(--text-primary);
          color: var(--purple-primary);
      }

      .tile-count {
          font-size: 42px;
          font-weight: 600;
          margin-bottom: 15px;
      }

      .tile-name {
          text-align: center;
          font-size: 16px;
          font-weight: 500;
      }

      /* Two-line tile names */
      .two-line {
          display: flex;
          flex-direction: column;
          align-items: center;
      }

      .modal-header {
          padding: 10px 10px; /* Adjust padding to reduce the header's height */
          font-size: 18px; /* Reduce font size for the title */
          justify-content: space-between;
      }

      .modal-title {
          font-size: 18px; /* Optional: adjust title font size as needed */
      }

      /* Optional: Adjust the close button size if necessary */
      .modal-header .btn-close {
        font-size: 18px; /* Smaller close button */
        padding: 5px; /* Reduce padding around the close button */
      }

      .file-upload {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          border: 2px dashed var( --grey-border);
          border-radius: 10px;
          padding: 30px;
          text-align: center;
          margin-bottom: 20px;
          cursor: pointer;
      }

      .file-upload:hover {
          border-color: #999;
          background-color: var(--grey-lighter);
      }

      .upload-icon {
        font-size: 3rem;
        color: var(--dark-purple);
        margin-bottom: 1rem;
    }

      .file-input {
          display: none;
      }

      .selected-files {
          margin-top: 15px;
          padding: 10px;
          background-color: #f5f5f7;
          border-radius: 8px;
          width: 100%;
          display: none;
      }

      .selected-files p {
          margin: 5px 0;
      }

      .btn {
          position: relative;
          z-index: 1; /* ensure buttons sit above overlapping layout elements */
      }

      .btn-primary {
          background-color: var(--blue-primary);
          border-color: var(--blue-primary);
          border-radius: 20px;
          padding: 8px 20px;
      }

      .btn-primary:hover,
      .btn-primary:focus,
      .btn-primary:active {
          background-color: var(--blue-primary);
          border-color: var(--blue-primary);
          color: #fff;
      }

      .upload-container {
          background-color: white;
          border-radius: 8px;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
          padding: 20px;
          max-width: 700px;
          margin: 0 auto;
      }

      .upload-header {
          margin-bottom: 20px;
      }

      .upload-header h4 {
          color: var(--green-dark);
          margin: 0 0 5px 0;
          font-weight: 600;
      }

      .upload-header p {
          color: var(--text-secondary);
          margin: 0;
          font-size: 14px;
      }

      .upload-content {
          display: flex;
          gap: 20px;
      }

      .upload-area {
        flex: 0.4;
      }

      .upload-dropzone {
          border: 2px dashed var( --grey-border);
          border-radius: 8px;
          padding: 30px;
          text-align: center;
          background-color: var(--grey-lighter);
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          transition: all 0.3s ease;
      }

      .upload-dropzone:hover {
          border-color: var(--green-dark);
          background-color: #f0f7f0;
      }

      .upload-icon {
          font-size: 40px;
          color: #9e9e9e;
          margin-bottom: 15px;
      }

      .upload-text {
          color: var(--text-secondary);
          margin: 0 0 10px 0;
          font-size: 14px;
      }

      .upload-text-or {
          color: #999;
          margin: 5px 0;
          font-size: 14px;
      }

      .upload-button {
          background-color: var(--green-dark);
          color: white;
          border: none;
          border-radius: 4px;
          padding: 8px 16px;
          font-size: 14px;
          cursor: pointer;
          margin-top: 10px;
          transition: background-color 0.3s ease;
      }

      .upload-button:hover {
          background-color:var(--green-darker);
      }

      .uploaded-files {
          flex: 1;
      }

      .uploaded-files h5 {
          margin: 0 0 15px;
          color: var(--text-primary);
          font-weight: 600;
      }

      .file-list {
          display: flex;
          flex-direction: column;
          gap: 10px;
      }

      .file-item {
          display: flex;
          align-items: center;
          padding: 10px;
          border-bottom: 1px solid var(--grey-border-light);
      }

      .file-icon {
          font-size: 20px;
          margin-right: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
      }

      .file-icon.pdf {
          color: var(--red-primary);
      }

      .file-icon.excel {
          color: var(--green-light);
      }

      .file-icon.doc {
          color: var(--blue-light);
      }

      .file-icon.audio {
          color:var(--orange-primary);
      }

      .file-details {
          flex: 1;
      }

      .file-name {
          margin: 0;
          font-size: 13px;
          color: #555;
      }

      .file-status {
          margin-left: 10px;
      }

      .status-complete {
          color: var(--green-light);
          font-size: 12px;
      }

      .file-actions {
          display: flex;
          gap: 4px;
      }

      .action-btn {
          width: 28px;
          height: 28px;
          border-radius: 50%;
          border: none;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.2s ease;
          font-size: 14px;
      }

      .view-btn {
          background-color: #e3f2fd;
          color: var(--blue-light);
      }

      .view-btn:hover {
          background-color: var(--blue-light);
          color: white;
      }

      .edit-btn {
          background-color: var(--btn-color);
          color: var(--green-light);
      }

      .edit-btn:hover {
          background-color: var(--btn-color);
          color: white;
      }

      .delete-btn {
          background-color: #ffebee;
          color: var(--red-primary);
      }

      .delete-btn:hover {
          background-color: var(--red-primary);
          color: white;
      }

      /* Drag over state */
      .upload-dropzone.drag-over {
          border-color: var(--green-dark);
          background-color: #e8f5e9;
      }

      @media (max-width: 768px) {
          .upload-content {
          flex-direction: column;
          }
          
          .upload-dropzone {
          margin-bottom: 20px;
          }
      }

      /* Payment Page Specific Styles */
      .payment-page {
          transition: opacity 0.5s ease-in-out;
      }

      .bg-light {
          background-color: var(--grey-light);
          border-radius: 15px;
          box-shadow: 0 2px 6px rgba(0,0,0,5%);
      }

      .bg-purple {
          background-color: var(--dark-purple);
          border-radius: 25px;
          padding: 4px 15px;
          font-weight: bold;
      }

      .payment-item {
          padding: 10px 0;
          border-bottom: 1px solid var(--grey-border-light);
      }

      .payment-item:last-child {
          border-bottom: none;
      }

      .payment-label {
          font-weight: 500;
      }

      .payment-value {
          text-align: right;
          font-weight: 600;
      }

      .total-row {
          border-top: 2px solid var( --grey-border-lighter);
          padding-top: 15px;
          margin-top: 10px;
      }

      #proceed-to-pay {
          background-color: var(--purple-primary);
          color: white;
          border: none;
          border-radius: 25px;
          padding: 10px 40px;
          font-weight: bold;
          font-size: 16px;
          transition: all 0.3s ease;
      }

      #proceed-to-pay:hover {
          background-color:var(--purple-dark);
          transform: translateY(-2px);
          box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      }

      .payment-method-options {
          display: flex;
          justify-content: center;
          gap: 15px;
          margin: 20px 0;
      }

      .payment-method {
          border: 2px solid var( --grey-border-lighter);
          border-radius: 10px;
          padding: 15px 20px;
          text-align: center;
          cursor: pointer;
          transition: all 0.2s ease;
      }

      .payment-method:hover {
          border-color: var(--purple-primary);
          transform: translateY(-2px);
      }

      .payment-method.active {
          border-color: var(--purple-primary);
          background-color: rgba(123, 104, 238, 0.05);
      }

      .payment-icon {
          font-size: 24px;
          margin-bottom: 8px;
          color: var(--text-primary);
      }

      .payment-method.active .payment-icon {
          color: var(--purple-primary);
      }


      /* --------------------------Alert-------------------------- */
      .alert-container {
          position: fixed;
          bottom: 20px;
          right: 20px;
          z-index: 1050;
      }

      .custom-alert {
          min-width: 300px;
          box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 15%);
          margin-bottom: 10px;
          opacity: 0;
          transform: translateY(20px);
          transition: opacity 0.3s, transform 0.3s;
      }

      .custom-alert.show {
          opacity: 1;
          transform: translateY(0);
      }

      .custom-alert .alert-icon {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 24px;
          height: 24px;
          border-radius: 50%;
          margin-right: 10px;
      }

      .btn-loading {
          position: relative;
          padding-right: 40px !important;
          pointer-events: none;
          opacity: 0.8;
      }

      .spinner {
          position: absolute;
          left: 15px;
          top: 50%;
          transform: translateY(-50%);
          width: 20px;
          height: 20px;
          border: 2px solid color(rgba(255, 255, 255, 0.3));
          border-radius: 50%;
          border-top-color: white;
          animation: spin 0.8s linear infinite;
      }

      @keyframes spin {
          to { transform: translateY(-50%) rotate(360deg); }
      }

      #avatar-container-first {
          display: flex;
          flex-wrap: wrap; /* Allows items to wrap onto the next line */
          gap: 10px; /* Adds space between the items */
          justify-content: center; /* Centers the content horizontally */
          align-items: center; /* Centers the content vertically */
          overflow-x: auto;
      }

      .child-selector {
          display: flex;
          flex-direction: column;
          align-items: center; /* Centers the children inside each selector */
          justify-content: center; /* Centers the children vertically inside each selector */
      }

      .avatar {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #f0f0f0;
          font-size: 20px;
          font-weight: bold;
      }

      .avatar.add {
          background-color: #4CAF50;
          color: white;
      }

      .avatar-label {
          margin-top: 5px;
          font-size: 14px;
          text-align: center; /* Centers the label text */
      }

      .d-none {
          display: none;
      }

      .avatar-list-container {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
      }

      .child-selector {
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
      }

      .avatar {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: bold;
          background-color: #f0f0f0;
      }

      .add {
          background-color: #ddd;
      }

      .subject-grid {
          display: flex;
          flex-wrap: nowrap; /* No wrapping */
          gap: 5px;
          overflow-x: auto; /* Enable horizontal scrolling */
          white-space: nowrap;
          padding-bottom: 10px;
          scroll-behavior: smooth; /* Smooth scrolling */
          font-size: 13px;
      }

      .selected-subject-grid {
          display: flex;
          flex-wrap: nowrap; /* Prevent wrapping */
          overflow-x: auto; /* Enable horizontal scrolling */
          gap: 5px; /* Adjust spacing */
          white-space: nowrap; /* Prevent text wrapping inside items */
          
      }
      
      #learner-selected-subjects {
          max-width: 100%; /* Ensure it fits within the parent container */
          overflow-x: auto; /* Enable scrolling */
          padding: 5px; /* Optional: for visual clarity */
      }
      
      #learner-selected-subjects .selected-subject-grid > * {
          flex-shrink: 0;
          width: 30%;
          max-width: 100%;
          padding-right: calc(var(--bs-gutter-x) * 0.5);
          padding-left: calc(var(--bs-gutter-x) * 0.5);
          margin-top: var(--bs-gutter-y);
      }
      .selected-subject-btn {
          background-color: var(--grey-medium);
          color: var(--text-primary);
          border-radius: 25px;
          padding: 8px 25px;
          margin: 0 10px;
          border: none;
          transition: all 0.3s ease;
          width: fit-content;
      }

      .subject-card {
          flex: 0 0 150px; /* Fixed width */
          background: #f8f9fa;
          padding: 10px;
          width:287px;
          text-align: center;
          border: 1px solid #ddd;
          border-radius: 5px;
          position: relative;
      }

      .remove-subject {
          position: absolute;
          top: 5px;
          right: 5px;
          cursor: pointer;
      }

      /* Hide scrollbar for a cleaner look */
      .subject-grid::-webkit-scrollbar {
          display: none;
      }

      .subject-grid {
          -ms-overflow-style: none;
          scrollbar-width: none;
      }

      /* Scroll Buttons */
      .scroll-btn {
          position: absolute;
          top: 50%;
          transform: translateY(-30%);
          background: color(rgba(0, 0, 0, 0.5));
          color: black;
          border: none;
          padding: 10px 15px;
          cursor: pointer;
          border-radius: 50%;
          z-index: 10;
          transition: 0.3s;
      }

      .scroll-btn:hover {
          background:rgba(0, 0, 0, 80%);
      }

      .scroll-btn.left {
          left: -70px;
      }

      .scroll-btn.right {
          right: -70px;
      }

      /* Show buttons only when scrolling is needed */
      .container.position-relative:hover .scroll-btn {
          display: block;
      }

      .uploaded-file-item .btn {
          padding: 0.25rem 0.5rem; /* Adjust padding */
          font-size: 0.5rem; /* Reduce font size */
          line-height: 1.5; /* Adjust line-height for consistency */
      }

      .child-selector .active{
          display: inline-flex;

      }

      body { 
          padding-top: 0;
      }
      
      .header-purple {
          background-color: var(--primary-color);
          height: 40px;
          width: 100%;
      }
      
      .main-content {
          max-width: 800px;
          margin: 66px auto;
          padding: 20px;
          text-align: center;
      }
      
      .title {
          margin-top: 100px;
          margin-bottom: 60px;
          font-size: 28px;
          font-weight: 600;
      }

      .avatar {
          display: flex;
          flex-direction: column;
          align-items: center;
      }
      
      .avatar-circle {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;
          font-weight: bold;
          margin-bottom: 10px;
      }

      .learner-subject-card {
          width: 172px;
          height: 110px;
          background-color: linear-gradient(135deg, var(--homepage-card-color-1), var(--homepage-card-color-2));
          border-radius: 20px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
          color: #000;
          position: relative;
          padding: 0;
          z-index: 1;
      }

      .learner-subject-card-footer {
          width: 100%;
          text-align: center;
          position: absolute;
          bottom: 10px; /* Adjust as needed */
      }

      .file-count {
          font-size: 14px;
          font-weight: bold;
      }

      .learner-subject-cards {
          display: flex;
          justify-content: center;
          gap: 20px;
          margin-bottom: 100px;
          position: relative;
      }

      .learner-subject-card-header {
          background-color: #7d7d7d;
          width: 77%;
          height: 9px;
          border-radius: 20px;
          position: absolute;
          top: -20px;
          z-index: 0;
          top: -8px;
          left: 16px;
      }

      .learner-subject-card-content {
          flex-grow: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          font-size: 14px;
          font-weight: 500;
          margin-top: 5px;
      }
      
      .learner-subject-card-footer {
          width: 19%;
          height: 3px;
          background-color: white;
          border-radius: 10px;
          margin-bottom: 15px;
      }
      
      .learner-footer {
          margin-top: auto;
          padding: 20px;
          text-align: center;
          color: #333;
      } 
      
      .header {
          background-color: var(--primary-color);
          height: 32px;
      }
      
      .avatar-circle {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: bold;
          font-size: 18px;
      }
      
      .avatar-velly {
          border: 2px solid #2ecc71;
          color: #2ecc71;
          background-color: white;
      }
      
      .avatar-mpho {
          border: 2px solid #333;
          color: #333;
          background-color: white;
      }
      
      .nav-pill {
          display: flex;
          align-items: center;
          background-color: #e9ecef;
          border-radius: 20px;
          padding: 5px 10px;
          margin: 5px 0;
          cursor: pointer;
      }
      
      .nav-pill.active {
          background-color: var(--primary-color);
          color: white;
      }
      
      .nav-pill i {
          margin-right: 10px;
      }
      
      .subject-card {
          background-color: var(--light-gray);
          border-radius: 10px;
          padding: 20px;
          margin-bottom: 15px;
          cursor: pointer;
          transition: background-color 0.2s;
      }
      
      .subject-card:hover {
          background-color: var(--secondary-color);
      }
      
      .progress-col {
          border-left: 1px solid #dee2e6;
      }
      
      .progress-percentage {
          font-size: 24px;
          font-weight: bold;
      }
      
      .locked-item {
          color: var(--dark-gray);
      }
      
      .back-button {
          cursor: pointer;
          font-weight: 500;
      }
      
      .back-button i {
          margin-right: 5px;
      }
      
      .subject-nav {
          background-color: #e9ecef;
          border-radius: 50%;
          width: 40px;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 15px;
          cursor: pointer;
      }
      
      .subject-nav.active {
          background-color: var(--primary-color);
          color: white;
      }
      
      .footer {
          text-align: center;
          color: var(--dark-gray);
          padding: 20px 0;
          font-size: 14px;
      }
      
      /* Modal styles */
      .modal-content {
          border-radius: 15px;
          border: none;
      }
      
      .modal-header {
          border-bottom: none;
          padding: 20px 20px 10px;
      }
      
      .modal-body {
          padding: 0 20px 20px;
      }
      
      .modal-title {
          font-weight: 600;
      }
      
      /* Ensure modal image is responsive */
      .modal-body img {
          max-width: 100%;
          height: auto;
          border-radius: 8px;
      }

      .active-subject {
          border: 2px solid green;
          background-color: #e0f7e0; /* Optional: gives a light green background */
      }

.avatar-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.avatar-circle .active {
  border: 2px solid #4cd137;
  color: #4cd137;
  display: inline-flex;
}

.subject-nav.active {
  background-color: var(--primary-color);
  color: white;
  display: inline-flex;
}

.topic-header {
  background-color:var(--purple-dark);
  height: 32px;
}

.nav-pill {
display: flex;
align-items: center;
background-color: #e9ecef;
border-radius: 20px;
padding: 5px 10px;
margin: 5px 0;
cursor: pointer;
}

.nav-pill.active {
background-color: var(--primary-color);
color: white;
}

.nav-pill i {
margin-right: 10px;
}



.topic-subject-card:hover {
background-color: #e9ecef;
}

.progress-col {
border-left: 1px solid #dee2e6;
}

.progress-percentage {
font-size: 24px;
font-weight: bold;
}

.locked-item {
color: var(--dark-gray);
}

.back-button {
cursor: pointer;
font-weight: 500;
}

.back-button i {
margin-right: 5px;
}

.subject-nav {
background-color: #e9ecef;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
cursor: pointer;
}

.subject-nav.active {
background-color: var(--dark-purple);
color: white;
}

.footer {
text-align: center;
color: var(--dark-gray);
padding: 20px 0;
font-size: 14px;
}

/* Modal styles */
.modal-content {
border-radius: 15px;
border: none;
}

.modal-header {
border-bottom: none;
padding: 20px 20px 10px;
}

.modal-body {
padding: 0 20px 20px;
}

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

/* Ensure modal image is responsive */
.modal-body img {
max-width: 100%;
height: auto;
border-radius: 8px;
}

.back-button a {
  text-decoration: none;
}

.topic-item.active {
  background-color: #f0f0f0; /* Example active background color */
  border-left: 4px solid #00ff22; /* Optional border to highlight the active topic */
}

.subject-title {
  font-weight: bold;
  color: #333;
}

.topics {
  max-height: 380px;  /* Adjust the height as needed */
  overflow-y: auto;   /* Enable vertical scrolling */
}

/*-------------------------END STEP 1 - PARENTS ONBOARDING-------------------------*/

 

.loading-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Transparent effect */
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.5s ease;
  z-index: 9999; /* Ensure it's on top */
}

.loading-modal-content {
  background: transparent;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  max-width: 90%; /* Limit content width */
  max-height: 90%; /* Limit content height */
  overflow: hidden;
}

.loading-loader {
  width: 4rem;
  height: 4rem;
  border: 5px solid #f3f3f3;
  border-top: 5px solid var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.scrollable-container {
  display: flex;
  overflow-x: auto;
  padding: 0 10px; /* Optional: padding for left and right space */
  gap: 15px; /* Space between learner cards */
  max-width: 100%;
}

.learner-card {
  flex: 0 0 auto; /* Prevents wrapping */
  min-width: 120px; /* Width of each learner card */
  text-align: center;
}

/* Modal container to hold sidebar and content */
.modal-learning-modal-container {
  display: flex;
  height: 100%;
}

/* Sidebar styles */
.modal-sidebar {
  width: 250px;
  background-color: #f8f9fa;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border-right: 1px solid #ddd;
}

.modal-hamburger-menu {
  display: none; 
  font-size: 24px;
  cursor: pointer;
  margin-bottom: 20px;
}

.modal-menu-item {
  display: flex;
  align-items: center;
  padding: 10px;
  margin: 5px 0;
  cursor: pointer;
}

.modal-menu-item.active {
  background-color: var(--primary-color);
  color: white;
}

.modal-menu-badge {
  font-weight: bold;
  margin-right: 10px;
}

.modal-menu-text {
  flex: 1;
}

.modal-menu-icon {
  font-size: 20px;
}

/* Main content area */
.modal-main-content {
  flex: 1;
  background-color:  #fff;
  padding: 20px;
  overflow-y: auto;
}

/* Header styles */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.modal-header-hamburger {
  display: none;
}

/* Content area */
.modal-purple-bar {
  height: 5px;
  background-color: var(--primary-color);
  margin-bottom: 15px;
}

.modal-white-content {
  padding: 20px;
  background-color: #f4f4f4;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Responsive styling for small screens */
@media (max-width: 768px) {
  .modal-learning-modal-container {
      flex-direction: column;
  }

  .modal-sidebar {
      width: 100%;
      border-right: none;
  }

  .modal-main-content {
      margin-top: 20px;
  }

  .modal-hamburger-menu {
      display: block;
  }
}

/*----------------- ASSESMENT MODAL ----------------- */ 

.file-url-view {
  width: 100%;
  height: 500px;
  border: none;
}

/* Basic progress bar styles */
.progress-bar {
  width: 0%;
  height: 20px;
  background-color: #007bff;
  transition: width 0.6s ease;
}

/* Stripes effect for the progress bar */
.progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 40px 40px;
}

/* Animated progress bar effect */
.progress-bar-animated {
  animation: progress-bar-stripes 1s linear infinite;
}

@keyframes progress-bar-stripes {
  0% {
    background-position: 40px 0;
  }
  
  100% {
    background-position: 0 0;
  }
}

.custom-scrollable-dropdown {
  max-height: 200px;
  overflow-y: auto;
}

.avatar-container .avatar {
  flex-shrink: 0; /* Prevent avatars from shrinking */
  margin-right: 10px; /* Optional: Space between avatars */
}

/* Basic styling for modal */
.kubici-modal {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Darker background shade */
  justify-content: center;
  align-items: center;
}

.kubici-modal-content {
  background-color: white;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  width: 50%;
  height: 50%;
}

.kubici-robot {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.kubici-robot-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.kubici-welcome-text {
  margin-top: 10px;
  font-size: 16px;
  font-weight: bold;
}

.kubici-modal-footer {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.kubici-close-btn {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.kubici-close-btn:hover {
  background-color: #45a049;
}

.bg-light-grey {
  background-color: #878787; /* Light grey color */
  color: white;
}

.bg-green {
  background-color: #3fcc3f; /* Light grey color */
  color: white;
}

.flashcard-modal-sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px; /* Space between items */
  padding: 16px;
}

.sub-sub-timeline-modal-sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px; /* Space between items */
  padding: 16px;
}

.flashcard-modal-sidebar-menu-item {
  background:  #fff; /* White background */
  border-radius: 10px; /* Rounded corners */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow */
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.3s ease;
  cursor: pointer;
}

.flashcard-modal-sidebar-menu-item:hover {
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* Stronger shadow on hover */
  transform: translateY(-2px); /* Slight lift effect */
}

.flashcard-modal-menu-badge {
  width: 280px;
  height: 50px;
  border-radius: 50%;
  margin-right: 20px;
}

.modal-menu-text {
  flex-grow: 1;
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

.modal-menu-icon {
  color: #555;
  font-size: 18px;
}


/* ----------------- END  Manage Program section-----------------  */

.search-bar {
  background-color: var(--light-purple);
  padding: 10px 0;
}

.search-container {
  position: relative;
  max-width: 500px;
  margin: 0 auto;
}

.search-box .search-input {
  border-radius: 20px;
  border: none;
  padding: 8px 15px;
  width: 100%;
  text-align: center;
}

.welcome-container {
  text-align: center;
  padding: 50px 20px;
}

.welcome-title {
  color: #555;
  font-size: 32px;
  margin-bottom: 10px;
}

.welcome-subtitle {
  color: #777;
  font-size: 18px;
  margin-bottom: 40px;
}

.countdown-circle {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background-color: #666;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  border: 10px solid var(--primary-purple);
}

.count-number {
  font-size: 72px;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 5px;
}

.count-text {
  font-size: 16px;
}

.btn-light-outline {
  background-color: transparent;
  color: #333;
  border: 1px solid #ddd;
  border-radius: 20px;
  padding: 8px 25px;
}

.floating-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #666;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 24px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

:root {
/* Color palette */
--learner-primary: #7b2cbf;
--learner-secondary: #1a77b8;
--learner-light-blue: #38b6ff;
--learner-light-gray: #f0f0f0;
--learner-white: #ffffff;
--learner-dark-text: #333333;
}

.learner-header {
background-color: var(--learner-primary);
color: var(--learner-white);
padding: 10px 0;
text-align: center;
}

.learner-subheader {
background-color: #d4b8e8;
padding: 10px 0;
}

.learner-search {
max-width: 400px;
margin: 0 auto;
background-color: var(--learner-white);
border-radius: 20px;
}

.learner-search input {
border: none;
width: 100%;
padding: 8px 15px;
border-radius: 20px;
text-align: center;
}

.learner-search input:focus {
outline: none;
}

.learner-welcome {
text-align: center;
margin: 40px 0;
}

.learner-welcome h1 {
font-size: 28px;
margin-bottom: 15px;
color: var(--learner-dark-text);
}

.learner-welcome p {
color: #666;
max-width: 850px;
margin: 0 auto;
line-height: 1.6;
}

.learner-subject {
  height: 60px;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--learner-white);
  font-weight: 400;
  transition: transform 0.2s;
  cursor: pointer;
  gap: 2px;
}

.learner-subject:hover {
transform: scale(1.05);
}

.learner-subject.purple {
background-color: var(--learner-primary);
}

.learner-subject.blue {
background-color: var(--learner-secondary);
}

.learner-subject.light-blue {
background-color: var(--learner-light-blue);
}

.learner-motivation {
text-align: center;
margin: 50px 0;
color: #555;
line-height: 1.6;
}

.learner-question {
font-weight: bold;
}

.learner-action-btn {
background-color: var(--learner-primary);
color: var(--learner-white);
border: none;
padding: 10px 40px;
border-radius: 30px;
font-size: 18px;
margin-top: 30px;
transition: background-color 0.2s;
}

.learner-action-btn:hover {
background-color: #681fa8;
}

.learner-cart-btn {
background-color: var(--learner-primary);
color: var(--learner-white);
border-radius: 5px;
padding: 6px 15px;
}

.learner-admin-btn {
background-color: #f0f0f0;
color: #555;
border-radius: 5px;
padding: 6px 15px;
margin-left: 10px;
}

.typing {
border-right: 2px solid var(--learner-dark-text);
white-space: nowrap;
overflow: hidden;
display: inline-block;
animation: typing 3s steps(40, end), blink 0.5s step-end infinite alternate;
}

@keyframes typing {
from {
  width: 0;
}
to {
  width: 100%;
}
}

@keyframes blink {
from {
  border-color: transparent;
}
to {
  border-color: var(--learner-dark-text);
}
}

.bot-icon {
width: 50px;
height: 50px;
margin-right: 10px;
animation: bounce 1s infinite alternate;
}

@keyframes bounce {
from {
  transform: translateY(0);
}
to {
  transform: translateY(-10px);
}
}

.fade-in {
opacity: 0;
animation: fadeIn 2s forwards;
}



/* ----------------- Chat Window -----------------*/

.chat-button {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #b197fc;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  z-index: 100;
  transition: all 0.3s ease;
}

.chat-button:hover {
  transform: scale(1.05);
}

.chat-icon {
  color: white;
  font-size: 24px;
  left: 18px;
  top: 9px;
  position: absolute;
}

.close-button {
  position: fixed;
  bottom: 30px;
  right: 100px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #b197fc;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  z-index: 100;
  transition: all 0.3s ease;
  opacity: 0;
  pointer-events: none;
}

.close-button.active {
  opacity: 1;
  pointer-events: auto;
}

.chat-window {
  position: fixed;
  bottom: 100px;
  right: 30px;
  width: 320px;
  height: 450px;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: all 0.3s ease;
  z-index: 99;
}

.chat-window.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.chat-header {
  padding: 15px 20px;
  background-color: #b197fc;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-header-title {
  display: flex;
  align-items: center;
  color: #fff;
  font-weight: bold;
}

.chat-header-icon {
  margin-right: 10px;
  font-size: 20px;
}

.chat-header-actions {
  display: flex;
}

.header-button {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
  cursor: pointer;
}

.chat-body {
  flex-grow: 1;
  padding: 10px;
  overflow-y: auto;
  background-color: #f9f9f9;
  display: flex;
  flex-direction: column;
}

.chat-input-container {
  padding: 10px;
  background-color: #fff;
  border-top: 1px solid #eee;
}

.chat-input {
  width: 100%;
  padding: 10px 15px;
  border-radius: 20px;
  border: 1px solid #ddd;
  outline: none;
  font-size: 11px;
}

.message {
  max-width: 70%;
  padding: 10px 15px;
  margin: 5px 0;
  border-radius: 15px;
  font-size: 14px;
  line-height: 1.4;
}

.user-message {
  align-self: flex-end;
  background-color: #fff;
  border: 1px solid #eee;
  border-bottom-right-radius: 5px;
}

.user-message-container {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  margin: 5px 0;
}

.agent-message {
  align-self: flex-start;
  background-color: #b197fc;
  color: #fff;
  border-bottom-left-radius: 5px;
}

.agent-message-container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 5px 0;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 5px;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.send-button {
  position: absolute;
  right: 16px;
  bottom: 59px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: var(--dark-purple);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
/* ----------------- END  Chat whindow -----------------*/


/*-----------------   Assesment layout -----------------*/


.slide-container {
  max-width: 1000px;
  margin: 0 auto;
  position: relative; 
}

.slide-container .progress-bar-container {
  height: 15px !important;
  background-color: #6610f2 !important;
  border-radius: 30px !important;
  position: relative;
  margin-bottom: 20px;
}

.slide-container .progress-indicator {
  width: 40px;
  height: 40px;
  background-color: #d3d3d3 !important;
  border-radius: 50%;
  position: absolute;
  top: -12px;
  left: 43%;
  z-index: 10;
}

.slide-container .main-content
{
  max-width: 100%!important;
}

.slide-container .content-container {
  display: flex;
  gap: 30px;
}

.main-content {
  flex: 5;
  background-color: white;
  border-radius: 15px;
  padding: 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  position: relative;
  overflow: hidden;
  margin: 0px;
}

.card-content {
  padding: 25px;
} 

.key-takeaway {
  flex: 1;
  background-color: #f0f0f0;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.explanation-text {
  font-size: 1.1rem;
  line-height: 1.6;
}

.takeaway-header {
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
  font-size: 13px
}

.takeaway-content {
  font-size: 0.9rem;
  line-height: 1.5;
}

/*-----------------END  Assesment layout -----------------*/

/* ----------------- QUIZE Assesment modal ----------------- */

.modal-learning-modal-container  .card {
  width: 350px;
  border-radius: 25px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  overflow: hidden;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.modal-learning-modal-container .card-header {
  background-color: white;
  border-bottom: none;
  padding: 20px;
}

.modal-learning-modal-container .card-body {
  background-color: white;
  padding: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #d0d0d0 #f5f7ff;
}

.modal-learning-modal-container .card-body::-webkit-scrollbar {
  width: 6px;
}

.modal-learning-modal-container.card-body::-webkit-scrollbar-track {
  background: #f5f7ff;
}

.modal-learning-modal-container .card-body::-webkit-scrollbar-thumb {
  background-color: #d0d0d0;
  border-radius: 10px;
}

.modal-learning-modal-container .flashcard-sidebar-title-item,
.modal-learning-modal-container .question-sidebar-title-item {
  background-color: #f5f7ff;
  border-radius: 15px;
  margin: 10px 20px;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* flashcard icon */
.modal-learning-modal-container .flashcard-sidebar-title-icon {
  width: 45px;
  height: 45px;
  background-color: var(--dark-purple);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

/* question icon */
.modal-learning-modal-container .question-sidebar-title-icon {
  width: 45px;
  height: 45px;
  background-color: #fd79a8;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.modal-learning-modal-container .flashcard-sidebar-title-icon.disabled,
.modal-learning-modal-container .question-sidebar-title-icon.disabled {
  background-color: #d0d0d0;
}

.modal-learning-modal-container .flashcard-sidebar-title-info,
.modal-learning-modal-container .question-sidebar-title-info {
  flex: 1;
}

.modal-learning-modal-container .flashcard-sidebar-title,
.modal-learning-modal-container .question-sidebar-title {
  font-weight: 600;
  margin-bottom: 4px;
}

.modal-learning-modal-container .flashcard-sidebar-sub-title,
.modal-learning-modal-container .question-sidebar-sub-title {
  color: #888;
  font-size: 0.8rem;
}


.modal-learning-modal-container .header-title {
  font-weight: bold;
}

.modal-learning-modal-container .header-subtitle {
  color: #888;
  font-size: 0.9rem;
}

.wave-icon {
  margin-right: 10px;
}

.modal-learning-modal-container .flashcard-sidebar-title-item:hover,
.modal-learning-modal-container .question-sidebar-title-item:hover {
  background-color: #e2e6ea; /* hover effect */
}

.modal-learning-modal-container .flashcard-sidebar-title-item.active,
.modal-learning-modal-container .question-sidebar-title-item.active {
  background-color: #4f46e5; /* Indigo-600 for active item */
  opacity: 70%;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.modal-learning-modal-container .flashcard-sidebar-title-item.active .flashcard-sidebar-title-icon i,
.modal-learning-modal-container .flashcard-sidebar-title-item.active .flashcard-sidebar-title,
.modal-learning-modal-container .flashcard-sidebar-title-item.active .flashcard-sidebar-sub-title,
.modal-learning-modal-container .flashcard-sidebar-title-item.active i.bx-chevron-right,

.modal-learning-modal-container .question-sidebar-title-item.active .question-sidebar-title-icon i,
.modal-learning-modal-container .question-sidebar-title-item.active .question-sidebar-title,
.modal-learning-modal-container .question-sidebar-title-item.active .question-sidebar-sub-title,
.modal-learning-modal-container .question-sidebar-title-item.active i.bx-chevron-right {
  color: #ffffff;
}

.background-shapes .shape {
  position: absolute;
  z-index: -1;
  opacity: 0.7;
}

/* in your stylesheet */
.flashcard-sidebar-title-item.loading::after,
.question-sidebar-title-item.loading::after {
  content: '';
  border: 2px solid #ccc;
  border-top-color: #4f46e5;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  animation: spin 1s linear infinite;
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* correct answer highlight */
.option-box-correct {
  background-color: #d4edda;
}

/* incorrect answer highlight */
.option-box-incorrect {
  background-color: #f8d7da;
}


.shape-1 {
  top: 10%;
  left: 5%;
  width: 60px;
  height: 60px;
  background-color: var(--accent-teal);
  border-radius: 10px;
  transform: rotate(45deg);
}

.shape-2 {
  bottom: 15%;
  left: 10%;
  width: 100px;
  height: 100px;
  background-color: var(--primary-purple-light);
  border-radius: 50%;
}

.shape-3 {
  top: 20%;
  right: 10%;
  width: 70px;
  height: 70px;
  background-color: var(--accent-teal);
  border-radius: 50%;
}

.shape-4 {
  bottom: 20%;
  right: 5%;
  width: 80px;
  height: 80px;
  background-color: var(--accent-teal);
  border-radius: 12px;
  transform: rotate(15deg);
}

.quize-section .container {
  max-width: 900px;
}

.quize-section .card {
  border-radius: 15px;
  border: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  padding: 2rem;
}

.quize-section .progress {
  height: 10px;
  background-color: var(--light-purple-bg);
}

.quize-section .progress-bar {
  background-color: var(--primary-purple);
}

.quize-section .quiz-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.quize-section .quiz-title {
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 0;
}

.quiz-subtitle {
  color: #6c757d;
  font-size: 0.9rem;
}

.quiz-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

.btn-review {
  background-color: var(--medium-gray);
  color: var(--text-dark);
  border-radius: 20px;
  padding: 6px 15px;
  font-size: 0.85rem;
  border: none;
}

.btn-back {
  background-color: var(--light-gray);
  color: var(--text-dark);
  border-radius: 20px;
  padding: 6px 15px;
  font-size: 0.85rem;
  border: 1px solid #dee2e6;
}

.quize-section .timer {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text-dark);
  font-weight: 500;
}

.timer i {
  color: var(--primary-purple);
}

.question-container {
  margin-top: 2rem;
  padding: 1rem 0;
}

.question-number {
  font-size: 0.9rem;
  color: #6c757d;
  margin-bottom: 0.5rem;
}

.question-text {
  font-weight: 500;
  color: var(--text-dark);
  margin-bottom: 1.5rem;
}

.options-container {
  margin-top: 1rem;
}

.option {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  margin-bottom: 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.option:hover {
  background-color: var(--light-purple-bg);
}

/* Style for disabled options */
.option[disabled], .option.disabled {
  cursor: not-allowed;
  opacity: 0.8;
}

.option.selected {
  background-color: var(--light-purple-bg);
  border-left: 4px solid var(--primary-purple);
}

.option-label {
  width: 30px;
  color: #6c757d;
}

.option-text {
  flex: 1;
}

.option-radio {
  width: 18px;
  height: 18px;
  border: 2px solid #ced4da;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.option.selected .option-radio {
  border-color: var(--primary-purple);
}

.option.selected .option-radio::after {
  content: '';
  width: 10px;
  height: 10px;
  background-color: var(--primary-purple);
  border-radius: 50%;
}

/* Styles for correct and incorrect answers */
.option.correct {
  background-color: rgba(40, 167, 69, 0.2) !important;
  border-left: 4px solid #28a745 !important;
}

.option.correct .option-radio {
  border-color: #28a745;
}

.option.correct .option-radio::after {
  background-color: #28a745;
}

.option.incorrect {
  background-color: rgba(220, 53, 69, 0.2) !important;
  border-left: 4px solid #dc3545 !important;
}

.option.incorrect .option-radio {
  border-color: #dc3545;
}

.option.incorrect .option-radio::after {
  background-color: #dc3545;
}

/* Notification styling - replacing modal */
.notification {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 15px 20px;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 1050;
  font-weight: 500;
  animation: fadeIn 0.3s ease-in-out;
}
  
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.navigation {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #dee2e6;
}

.quize-section .quize-prev-btn,  .quize-section .quize-next-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 20px;
  padding: 6px 15px;
  font-size: 0.9rem;
  background-color: var(--light-gray);
  color: var(--text-dark);
  border: 1px solid #dee2e6;
}

.quize-prev-btn:disabled, .quize-next-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-submit {
  background-color: var(--primary-purple);
  color: white;
  border-radius: 20px;
  padding: 6px 20px;
  border: none;
}

.btn-submit:disabled {
  background-color: #a491e8;
  cursor: not-allowed;
} 

.child-subjects {
  white-space: nowrap;
  scroll-behavior: smooth;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 0;
}

.subject-grid {
  display: flex;
  flex-wrap: nowrap; /* Ensure subjects stay in a single row */
  gap: 10px;
}

.subject-card {
  flex: 0 0 auto; /* Prevent shrinking */
  width: 300px;
  height: 100px;
  background-color: #e9ecef;
  text-align: center;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}

.scroll-btn {
  position: absolute;
  top: 100%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  z-index: 10;
}

.left {
  left: -10px;
}

.right {
  right: -10px;
}

#progress-bar-template .progress {
  height: 7px;
}
/* -----------------END QUIZE Assesment modal ----------------- */

.uploaded-file-list {
  max-height: 300px;        /* Set the maximum height */
  overflow-y: auto;         /* Add vertical scrolling */
  border: 1px solid #ddd;   /* Optional: visual boundary */
  padding: 10px;            /* Optional: inner spacing */
  border-radius: 4px;       /* Optional: rounded corners */
  background-color: #f9f9f9; /* Optional: background color */
}



.timeline-sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px; /* Space between items */
  padding: 16px;
}

.timeline-menu-item {
  background:  #fff; /* White background */
  border-radius: 10px; /* Rounded corners */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow */
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.3s ease;
  cursor: pointer;
}

.timeline-menu-item:hover {
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* Stronger shadow on hover */
  transform: translateY(-2px); /* Slight lift effect */
}

.timeline-menu-badge {
  width: 280px;
  height: 50px;
  border-radius: 50%;
  margin-right: 20px;
}

.sub-topic-title {
  font-size: 18px;
}

.sub-topic-title .topic-name {
  font-size: 16px;
}



.timeline-row {
  width: 100%;
  display: flex;
  flex-wrap: nowrap; /* Prevent wrapping of columns */
}

.timeline-col-md-2 {
  flex: 0 0 16.6667%; /* Ensure the sidebar takes up 2/12 of the row */
  max-width: 16.6667%;
  padding: 0 15px; /* Add some padding for spacing */
  margin-right: auto;
}
.sidebar-topics {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  border-right: 1px solid #ddd;
  background-color: white;
  padding: 15px;
  box-shadow: 0 2px 4px color(rgba(0, 0, 0, 0.1));
  border-radius: 20px;
  width:400px;
}

.timeline-container {
  padding: 8px;
  position: relative;
}

.main-timeline {
  position: absolute;
  left: 24px;
  top: 16px;
  bottom: 16px;
  width: 4px;
  background-color: #d1d5db;
}

.term-container {
  margin-bottom: 24px;
  position: relative;
}

.term-node {
  position: absolute;
  left: 16px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: white;
  border: 2px solid;
  z-index: 10;
  transform: translateX(-8px);
  top: 12px;
}

.term-button {
  margin-left: 40px;
  width: calc(100% - 40px);
  padding: 8px;
  border-radius: 4px;
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}

.term-content {
  margin-left: 40px;
  padding-left: 16px;
  border-left: 2px dashed #9ca3af;
  margin-top: 8px;
  margin-bottom: 8px;
  position: relative;
  display: none; /* Hidden by default */
}

.term-title {
  font-weight: 600;
  font-size: 14px;
  color: #374151;
  margin-bottom: 8px;
}

.week-container {
  margin-bottom: 16px;
  position: relative;
}

.week-node {
  position: absolute;
  left: 0;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transform: translateX(-20px);
}

.week-card {
  display: flex;
  flex-direction: column;
  padding: 8px;
  border-radius: 6px;
  border-left-width: 4px;
  border-left-style: solid;
}

.week-number {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 4px;
}

.week-topic {
  font-size: 14px;
  color: #4b5563;
}

/* Term 1 - Blue */
.term-1 .term-node {
  border-color: #3b82f6;
}

.term-1 .term-button {
  background-color: #3b82f6;
}

.term-1 .week-node {
  background-color: #3b82f6;
}

.term-1 .week-card {
  background-color: #dbeafe;
  border-left-color: #3b82f6;
}

.term-1 .week-number {
  color: #1d4ed8;
}

/* Term 2 - Green */
.term-2 .term-node {
  border-color: #10b981; /* Green */
}

.term-2 .term-button {
  background-color: #10b981; /* Green */
}

.term-2 .week-node {
  background-color: #10b981; /* Green */
}

.term-2 .week-card {
  background-color: #d1fae5; /* Light Green */
  border-left-color: #10b981; /* Green */
}

.term-2 .week-number {
  color: #047857; /* Dark Green */
}

/* Term 3 - Purple */
.term-3 .term-node {
  border-color: #8b5cf6; /* Purple */
}

.term-3 .term-button {
  background-color: #8b5cf6; /* Purple */
}

.term-3 .week-node {
  background-color: #8b5cf6; /* Purple */
}

.term-3 .week-card {
  background-color: #ede9fe; /* Light Purple */
  border-left-color: #8b5cf6; /* Purple */
}

.term-3 .week-number {
  color: #6d28d9; /* Dark Purple */
}

/* Term 4 - Red */
.term-4 .term-node {
  border-color: #ef4444; /* Red */
}

.term-4 .term-button {
  background-color: #ef4444; /* Red */
}

.term-4 .week-node {
  background-color: #ef4444; /* Red */
}

.term-4 .week-card {
  background-color: #fee2e2; /* Light Red */
  border-left-color: #ef4444; /* Red */
}

.term-4 .week-number {
  color: #b91c1c; /* Dark Red */
}


/* Add styles for other terms as needed */
.term-button:hover {
  opacity: 0.9;
}

.active {
  display: block;
}

/* Make the card-body scrollable */
.card-body.flashcard-modal-sidebar {
  overflow-y: auto; /* Enable vertical scrolling */
  overflow-x: hidden; /* Prevent horizontal scrolling */
  padding-right: 15px; /* Add padding for better spacing */
  scrollbar-width: thin; /* For modern browsers, make the scrollbar thinner */
  scrollbar-color: #ccc #f8f9fa; /* Customize scrollbar colors */
}

/* Optional: Customize the scrollbar for Webkit browsers (Chrome, Safari) */
.card-body.flashcard-modal-sidebar::-webkit-scrollbar {
  width: 8px; /* Set the width of the scrollbar */
}

.card-body.flashcard-modal-sidebar::-webkit-scrollbar-thumb {
  background-color: #ccc; /* Set the color of the scrollbar thumb */
  border-radius: 4px; /* Add rounded corners to the scrollbar thumb */
}

.card-body.flashcard-modal-sidebar::-webkit-scrollbar-track {
  background-color: #f8f9fa; /* Set the color of the scrollbar track */
}

.sidebar-toggle-container {
  z-index: 1055;
}

#sidebar-toggle {
  z-index: 1060 !important;
}

.sidebar-toggle-container.collapsed .flashcard-modal-sidebar-main-sub-topic {
  display: none;
}

/* Unique styles for timeline */

.full-screen-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent; /* semi-transparent black */
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader-overlay {
  text-align: center;
}

.full-screen-loader .loader-spinner {
  width: 4rem;
  height: 4rem;
}

.full-screen-loader .loader-text {
  margin-top: 1rem;
}

.custom-height {
  height: 90%;
}

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

.sp-learning-module body {
  background-color: #f8f9fa;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.sp-content-card {
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
  margin-bottom: 20px;
  overflow: hidden;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.sp-content-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}
.sp-card-header {
  color: white;
  font-weight: bold;
  padding: 12px 20px;
  border-bottom: none;
}
.sp-card-body {
  padding: 25px;
  background-color: white;
}
.sp-explanation-text {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #333;
}
.sp-option-btn {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 12px;
  border-radius: 8px;
  transition: all 0.2s;
  text-align: left;
}
.sp-option-btn:hover {
  background-color: #e9ecef;
}
.sp-option-btn.sp-selected {
  background-color: #6c5ce7;
  color: white;
  border-color: #6c5ce7;
}
.sp-option-btn.sp-correct {
  background-color: #28a745;
  color: white;
  border-color: #28a745;
}
.sp-option-btn.sp-incorrect {
  background-color: #dc3545;
  color: white;
  border-color: #dc3545;
}
.sp-progress {
  height: 6px;
  border-radius: 5px;
}
.sp-progress-bar {
  background-color: #6c5ce7;
}
.sp-nav-btn {
  background-color: #6c5ce7;
  color: white;
  border: none;
  transition: all 0.2s;
  padding: 10px 25px;
}
.sp-nav-btn:hover {
  background-color: #5649c0;
}
.sp-nav-btn:disabled {
  background-color: #d1d1d1;
}
.sp-card-note .sp-card-header {
  background-color: var(--flashcard-header-color);
}
.sp-card-quiz .sp-card-header {
  background-color: var(--quiz-header-color);
}
.sp-card-icon {
  margin-right: 10px;
  font-size: 1.2rem;
}
.sp-feedback-message {
  margin-top: 15px;
  padding: 10px;
  border-radius: 8px;
  font-weight: 500;
  display: none;
}
.sp-feedback-correct {
  background-color: rgba(40, 167, 69, 0.2);
  color: #28a745;
}
.sp-feedback-incorrect {
  background-color: rgba(220, 53, 69, 0.2);
  color: #dc3545;
}
.sp-card-container {
  min-height: 300px;
}
/* Animation for card transitions */
@keyframes spFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.sp-content-card {
  animation: spFadeIn 0.5s ease-out;
}
.sp-center-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sp-learning-main-content {
  padding: 20px;
  border-radius: 10px;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.sp-progress-wrapper {
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 10px;
  margin-top: 20px;
}
.sp-nav-buttons {
  margin-top: 15px;
}

/* Status Card */
.status-card {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 350px;
  z-index: 1050;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
  border-radius: 0.5rem;
  overflow: hidden;
}

.progress-bar {
    transition: width 0.5s ease-in-out;
}

.alert {
    margin-bottom: 0;
    border-left: 4px solid;
    border-radius: 20px;
}

.alert-warning {
    border-left-color: #ffc107;
}

.alert-info {
    border-left-color: #0dcaf0;
}

.alert-success {
    border-left-color: #198754;
}

.alert-light {
    border-left-color: #f8f9fa;
}

/* Animation for appearance */
@keyframes slideIn {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.status-card:not(.d-none) {
    animation: slideIn 0.3s ease forwards;
}


/* ----------------- Global styles ----------------- */


.breadcrumb {
    padding: 10px 30px;
    background-color: #fff;
    border-bottom: 1px solid #e0e0e0;
}

.breadcrumb a {
    text-decoration: none;
    color: #666;
}

.breadcrumb span {
    color: #999;
}

.container-timeline {
    display: flex;
    height: calc(100vh - 100px);
    padding: 15px;
    gap: 15px;
}

/* First sidebar for terms */
.terms-sidebar {
    width: 100px;
    background-color: #f0f0f5;
    padding: 20px 0;
    border-right: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.sidebar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    margin-bottom: 10px;
    cursor: pointer;
}

.sidebar-icon {
    width: 40px;
    height: 40px;
    background-color: #ddd;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
}

.active-icon {
    background-color: #7859cb;
    color: white;
}

.term-label {
    font-size: 12px;
    color: #888;
    text-align: center;
}

/* Second sidebar for weeks */
.weeks-sidebar {
    width: 250px;
    background-color:var(--side-bar-bg-color);
    padding: 20px 10px;
    border-right: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    overflow-y: auto;
}

.week-selector {
    max-height: 100%;
    overflow-y: auto;
    padding: 0 10px;
}

.week-button {
    display: block;
    width: 100%;
    padding: 15px;
    margin-bottom: 10px;
    background-color: #e1e0f5;
    border: none;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    color: #555;
}

.week-button.active {
    background-color: #7859cb;
    color: white;
}

.topic-list {
    max-height: 200px;
    overflow-y: auto;
}

.topic-item {
    padding: 10px;
    margin: 5px 0;
    background-color: var(--bg-primary);
    border-radius: 5px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.topic-item-active {
    background-color:var(--bg-primary-active);
}

.topic-icon {
    margin-right: 10px;
}

.main-content-timeline {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background-color: #fff;
    border-radius: 12px;
}

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

.progress-bar-timeline {
    height: 10px;
    background-color: #e0e0e0;
    border-radius: 5px;
    margin: 10px 0 30px;
    position: relative;
}

.progress-fill {
    height: 100%;
    width: 10%;
    background-color: #4cd964;
    border-radius: 5px;
}

.progress-text {
    text-align: right;
    font-size: 12px;
    color: #888;
    margin-top: 5px;
}

.module-container {
    margin-bottom: 30px;
}

.modules-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 15px;
    margin-bottom: 30px;
}

.module {
    background-color: #e1e0f5;
    padding: 25px 20px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 100px;
    cursor: pointer;
    height: 60px;
}

.module.active {
    background-color: #7859cb;
    color: white;
}

.module-title {
    font-size: 16px;
    margin-bottom: 10px;
}

.module-count {
    font-size: 12px;
    color: #888;
}

.module.active .module-count {
    color: #e0e0e0;
}

.progress-circle {
    width: 30px;
    height: 30px;
    background-color: transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* color: transparent; */
    font-weight: bold;
}

.module-icon {
    width: 30px;
    height: 30px;
    background-color: transparent;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.module.active .module-icon {
    background-color: #9d86e2;
}

.footer {
    text-align: center;
    padding: 20px;
    color: #666;
    font-size: 14px;
}

.number-patterns-header {
    background-color: #e1e0f5;
    padding: 3px 10px;
    border-radius: 5px;
    font-size: 12px;
    color: #7859cb;
    margin-bottom: 5px;
}

.nav-btn {
    padding: 8px 15px;
    border: none;
    background-color: #7859cb;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}

.term-dropdown {
    cursor: pointer;
    margin-bottom: 10px;
}

.term-content {
    display: none;
}

.term-content.active {
    display: block;
}

.timeline-header {
    background-color: #f0f0f5;
    padding: 10px 15px;
    margin-top: -15px;
    border-radius: 5px;
}

.timeline-title {
    font-size: 18px;
    margin-bottom: 5px;
}

.timeline-subtitle {
    font-size: 14px;
    color: #666;
}

.flashcard-modal-sidebar {
  max-height: 100vh;
  overflow-y: auto;
}

.topic-item.active {
  background-color: #0056b3;
  color: white;
  font-weight: bold;
  font-size: .875em;; /* Font size */
}

.sidebar-icon.active {
  background-color: var(--secondary-color); /* Highlight color */
  color: white;
  border-radius: 8px; /* Optional: rounded corners */
}

.topic-item.active {
  background-color: var(--course-border-light); /* Active background color */
  border-left: 4px solid #007bff; /* Blue border on the left */
  color: #0056b3; /* Text color */
  font-weight: bold; /* Bold text */
  font-size: .875em;; /* Font size */
}


@media (min-width: 768px) {
  .week-button {
      flex: 1 1 calc(25% - 10px); /* Four buttons per row on medium screens */
  }
}

.topic-subject-card {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
/* Ensure .topic-subject-card retains its fixed size */
.topic-subject-card {
  background-color: var(--light-gray);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 15px;
  cursor: pointer;
  transition: background-color 0.2s;
  border: 1px solid #ddd;
  width: 100%;
  height: 145px; /* Fixed height */
  display: flex;
  flex-direction: column;
  gap: 15px; /* Space between modules */
  overflow: hidden; /* Prevent overflow if content exceeds height */
}

/* Modules grid inside .topic-subject-card */
.topic-subject-card .modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Flexible layout */
  gap: 15px;
  height: 100%; /* Ensure grid fills the card */
}

/* Ensure text remains inside the module */
.topic-subject-card .module {
  background-color: #e1e0f5;
  padding: 20px 15px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 80px;
  cursor: pointer;
  height: auto; /* Allow height to adjust dynamically */
  overflow: hidden; /* Prevent content from overflowing */
}

/* Style for the text inside the module */
.topic-subject-card .module h5.small {
  font-size: 0.875em; /* Default size */
  margin: 0;
  color: var(----modul-bg-color); /* Text color */
  display: -webkit-box; /* Use a flexbox-like container */
  -webkit-line-clamp: 3; /* Limit to 3 lines */
  -webkit-box-orient: vertical; /* Set the box orientation to vertical */
  overflow: hidden; /* Hide overflowing text */
  text-overflow: ellipsis; /* Add ellipsis for overflowing text */
  max-width: 100%; /* Ensure text stays within the module */
  word-wrap: break-word; /* Break long words if necessary */
}

/* Adjust text styles for smaller screens */
@media (max-width: 768px) {
  .topic-subject-card .module h5.small {
    font-size: 0.8em; /* Reduce font size for smaller screens */
  }
}

@media (max-width: 480px) {
  .topic-subject-card .module h5.small {
    font-size: 0.75em; /* Further reduce font size for extra small screens */
  }
}

/* Adjust text sizes for module titles and counts */
.topic-subject-card .module-title {
  font-size: 0.875em; /* Default size */
  margin-bottom: 10px;
  color: #555;
}

.topic-subject-card .module-count {
  font-size: 12px; /* Default size */
  color: #888;
}

/* Adjust styles for smaller screens */
@media (max-width: 768px) {
  .topic-subject-card .modules-grid {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Smaller grid items */
  }

  .topic-subject-card .module-title {
    font-size: 0.8em; /* Smaller text for titles */
  }

  .topic-subject-card .module-count {
    font-size: 11px; /* Smaller text for counts */
  }

  .topic-subject-card .progress-circle {
    width: 25px;
    height: 25px;
    font-size: 0.8em; /* Adjust progress circle text size */
    background-color: #666;
  }

  .topic-subject-card .module-icon {
    width: 25px;
    height: 25px;
    margin-bottom: 8px; /* Adjust spacing */
  }
}

/* Adjust styles for extra small screens */
@media (max-width: 480px) {
  .topic-subject-card .modules-grid {
    grid-template-columns: 1fr; /* Single column layout */
  }

  .topic-subject-card .module-title {
    font-size: 0.75em; /* Further reduce text size */
  }

  .topic-subject-card .module-count {
    font-size: 10px;
  }

  .topic-subject-card .progress-circle {
    width: 20px;
    height: 20px;
    font-size: 0.7em;
  }

  .topic-subject-card .module-icon {
    width: 20px;
    height: 20px;
    margin-bottom: 5px;
  }
}

.flashcard-details {
  width: 80%; /* Maintain the increased width */
  height: auto;
  margin: 0 auto; /* Center the flashcard details */
  padding: 20px; /* Add padding for spacing */
  border: 2px solid #ddd; /* Add a light border */
  border-radius: 10px; /* Add rounded corners */
  background-color: var(--primary-color);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
}

.flashcard-details .card-title {
  font-size: 1.2rem; /* Increase font size for the title */
  font-weight: bold; /* Make the title bold */
  color: #333; /* Darker color for the title */
  margin-bottom: 15px; /* Add spacing below the title */
  text-align: center; /* Center-align the title */
  border-bottom: 2px solid #ddd; /* Add a bottom border */
  padding-bottom: 10px; /* Add padding below the title */
  background-color: var(--dark-purple);
  width: 100%;
}

.flashcard-details .card-body {
  font-size: 1rem; /* Set a readable font size for the content */
  line-height: 1.6; /* Improve readability with line height */
  color: #555; /* Use a medium-dark color for the content */
  text-align: justify; /* Justify the content for better alignment */
}

body {
  font-family: 'Arial', sans-serif; /* Replace 'Arial' with your desired font */
  font-size: 14px; /* Optional: Set a consistent font size */
  line-height: 1.5; /* Optional: Set a consistent line height */
}

.selected-option label {
  font-weight: bold;
  color: green; /* Bootstrap primary color */
}

.selected-option input[type="radio"] {
  accent-color: green; /* Change the radio button color */
}

/* Remove bullet points from options */
.flashcard-details ul {
  list-style-type: none; /* Remove bullet points */
  padding-left: 0; /* Remove default padding */
}

.flashcard-details ul li {
  margin-bottom: 10px; /* Add spacing between options */
}

.card .learner-card {
  background-color: var(--primary-color);
}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
  padding-right: var(--bs-gutter-x, .75rem);
  padding-left: var(--bs-gutter-x, .75rem);
  margin-right: auto;
  margin-left: auto;
}

/* Custom container padding helper for parent My Children layout.
   Keeps default padding on mobile, adds extra right padding only on large screens
   to align cards without breaking small viewports. */
.margin-right {
  padding-right: var(--bs-gutter-x, .75rem);
  padding-left: var(--bs-gutter-x, .75rem);
}

@media (min-width: 1200px) {
  .margin-right {
    /* Adjust 14.75rem if you want more/less shift */
    padding-right: calc(var(--bs-gutter-x, .75rem) + 14.75rem);
  }
}

.assist-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color:var(--assist-subject-card-color);
  border: 1px solid rgba(0, 0, 0, .125);
  border-radius: 13px;
}

/* General styles for the modal */
.modal-learning-modal-container {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

/* Sidebar styles */
.flashcard-modal-sidebar-main-sub-topic {
  flex: 1;
  max-width: 380px;

}

/* Main content styles */
.modal-main-content {
  flex: 3;
  overflow-y: auto;
}

/* Responsive styles for smaller screens */
@media (max-width: 768px) {
  .modal-learning-modal-container {
      flex-direction: column;
  }

  .flashcard-modal-sidebar-main-sub-topic {
      max-width: 100%;
      margin-bottom: 1rem;
  }

  .modal-main-content {
      flex: 1;
  }

  .sp-progress-wrapper {
      flex-direction: column;
      align-items: flex-start;
  }

  .timeline-and-progress {
      flex-direction: column;
      align-items: flex-start;
  }

  .progress-counter {
      margin-left: 0;
      margin-top: 0.5rem;
  }

  .text-center {
      flex-direction: column;
      gap: 0.5rem;
  }

  .btn {
      width: 91%;
  }

  .btn-semi {
      width: 22%;
  }
}
#sidebar_toggle {
  z-index: 1000;
  cursor: pointer;
  font-size: 1.5rem;
}

/* Loader styles */
.learner-subject.loading {
  position: relative;
  pointer-events: none; /* Disable clicks while loading */
  opacity: 0.7; /* Optional: Dim the subject while loading */
}

.learner-subject.loading::after {
  content: '';
  border: 2px solid #ccc;
  border-top-color: #4f46e5;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  animation: spin 1s linear infinite;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.custom-transparent-modal .modal-content {
  background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white background */
  border: none;
  box-shadow: none;
}

.custom-transparent-modal .modal-backdrop {
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black backdrop */
}


.option-box {
  transition: background-color 0.3s, border-color 0.3s;
}

.option-box-correct {
  background-color: #d4edda;
  border-color: #28a745;
  color: #155724;
}

.option-box-incorrect {
  background-color: #f8d7da;
  border-color: #dc3545;
  color: #721c24;
}

.option-box-selected {
  background-color: #f0f8ff; /* Light blue background */
  border-color: #007bff; /* Blue border */
}

.option-box,
.option-box * {
    filter: none !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
}

/* Adjust layout for smaller screens */
@media (max-width: 768px) {
  .modal-learning-modal-container {
      flex-direction: column;
  }

  .flashcard-modal-sidebar-main-sub-topic {
      width: 100%;
      max-width: none;
      border-right: none;
      border-bottom: 1px solid #ddd;
  }

  .modal-main-content {
      width: 100%;
      padding: 10px;
  }

  .sp-card-container {
      margin-bottom: 20px;
  }

  .sp-progress-wrapper {
      flex-direction: column;
      align-items: flex-start;
  }

  .progress-counter {
      margin-top: 10px;
      margin-left: 0;
  }

  .text-center {
      flex-direction: column;
  }

  .text-center button {
      margin-bottom: 10px;
      width: 40%;
      text-align: center !important;
  }
}

/* Adjust font sizes for smaller screens */
@media (max-width: 576px) {
  .sp-note-title,
  .sp-quiz-title {
      font-size: 1rem;
  }

  .sp-quiz-question {
      font-size: 0.9rem;
  }

  .form-check-label {
      font-size: 0.85rem;
  }

  .btn {
      font-size: 0.8rem;
  }
}

@media (max-width: 768px) {
  .sidebar-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px;
      font-size: 14px;
  }

  .sidebar-icon.term-icon {
      margin-right: 10px;
  }

  .term-label {
      flex-grow: 1;
      text-align: left;
  }

  .week-selector {
      display: flex;
      flex-direction: column;
      gap: 10px;
  }

  .week-container {
      display: flex;
      flex-direction: column;
      align-items: stretch;
  }

  .week-button {
      width: 100%;
      font-size: 14px;
      padding: 8px;
  }

  .week-topic-list {
      margin-top: 10px;
      padding-left: 15px;
  }

  .topic-item {
      display: flex;
      align-items: center;
      padding: 8px;
      font-size: 14px;
  }

  .topic-icon {
      margin-right: 10px;
  }
}
/* Container for the layout */
.container-timeline {
  display: flex;
  flex-direction: row;
  height: 100vh; /* Full height */
  overflow: hidden;
}

/* Term Sidebar */
.terms-sidebar {
  flex: 0 0 100px; /* Fixed width for the term sidebar */
  background-color: #f0f0f5;
  padding: 20px 0;
  border-right: 1px solid #e0e0e0;
  overflow-y: auto;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* Week Sidebar */
.weeks-sidebar {
  flex: 0 0 250px; /* Fixed width for the week sidebar */
  background-color: #f0f0f5;
  padding: 20px 10px;
  border-right: 1px solid #e0e0e0;
  overflow-y: auto;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* Main Content */
.main-content-timeline {
  flex: 1; /* Take up the remaining space */
  padding: 20px;
  overflow-y: auto;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .terms-sidebar {
      flex: 0 0 80px; /* Reduce width for smaller screens */
  }

  .weeks-sidebar {
      flex: 0 0 200px; /* Reduce width for smaller screens */
  }

  .main-content-timeline {
      padding: 10px; /* Adjust padding for smaller screens */
  }
}

.learner-card-list {
  min-width: 180px;
  max-width: 200px;
  cursor: pointer;
}

.selected-learner {
  background-color:var(--secondary-color);
  color: white;
}

.unselected-learner {
  background-color: text-dark;
  color: black;
}

.progress-bar-container {
  height: 10px;
}

.performance-dashboard .stats-card {
  border-radius: 16px;
  color: white;
  padding: 1rem;
}

.performance-dashboard .card-title {
  margin-bottom: 1rem;
  font-size: 0.875rem;
  font-weight: bold;
  text-align: center;
}

.performance-dashboard .list-group-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  background-color: transparent;
  color: white;
}

/* manage subjects */


.search-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

/* Subject Grid */
.subject-grid {
    display: flex;
    overflow-x: auto;
    gap: 1rem;
    padding: 0.5rem;
    scrollbar-width: thin;
}

.subject-grid::-webkit-scrollbar {
    height: 4px;
}

.subject-grid::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 4px;
}

.subject-card.active, .subject-card.active-subject {
    border-color: var(--secondary-color);
}

.scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    color: #64748b;
    transition: all 0.2s;
}

.scroll-btn:hover {
    background-color:var(--dark-purple);
    color: var(--primary-color);
}

.scroll-btn.left {
    left: -4.5rem;
}

.scroll-btn.right {
    right: -5.5rem;
}

/* Folders */
.folders-container {
    margin-top: -3rem;
}

.tile {
    background-color: #e9ecef;
    border-radius: 0.75rem;
    padding: 1.5rem 1rem;
    height: 100%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s;
    cursor: pointer;
}

.tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.tile-icon {
    font-size: 2rem;
    color: var(--dark-purple);
    margin-bottom: 0.5rem;
}

.folder-name {
    font-weight: 600;
    margin-top: 0.75rem;
}

.folder-total-content {
    background-color: var(--purple-primary);
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
}

.folder-learner-grade {
    color: #64748b;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Upload Area */
.upload-area {
  background-color: #f8fafc;
  border: 2px dashed #cbd5e1;
  border-radius: 1.75rem;
  padding: 52rem;
  text-align: center;
  transition: all 0.3s;
  height: 229px;
  margin-top: 60px;
}

.upload-area:hover {
    border-color: var(--dark-purple);
}

/* File Items */
.file-item, .uploaded-file-item {
    background-color: white;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.2s;
}

.uploaded-file-item:hover {
    background-color: #f1f5f9;
}

.uploaded-file-link {
    font-weight: 500;
    color: #334155;
    text-decoration: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .subject-card {
        min-width: 150px;
    }

    .status-card {
        width: 300px;
    }
}

/* Text sizes */
.text-xs {
    font-size: 0.875rem;
}

.text-xxs {
    font-size: 0.75rem;
}

/* iFrame */
iframe.file-url-view {
    width: 100%;
    height: 600px;
    border: none;
}

.dropdown-btn {
  background-color: var(--dark-purple);
  color: white;
  border: none;
  border-radius: 25px;
  padding: 10px 30px;
  font-weight: bold;
}

.dropdown-btn:hover {
  background-color: var(--primary-color);
  color: white;
}

.assist-form-container {
  max-width: 800px; /* Set a maximum width for the form */
  margin: 0 auto; /* Center the form horizontally */
  padding: 20px; /* Add padding inside the form container */
  background-color: transparent; /* Set a white background */
  border-radius: 10px; /* Add rounded corners */

  border: 1px solid #ddd; /* Optional: Add a light border */
}

.assist-form-container h2 {
  text-align: center; /* Center-align the heading */
  margin-bottom: 20px; /* Add spacing below the heading */
  font-size: 1.5rem; /* Adjust the font size */
}

.assist-form-container .form-label {
  font-weight: bold; /* Make the labels bold */
  margin-bottom: 5px; /* Add spacing below the labels */
  display: block; /* Ensure labels are on their own line */
}

.assist-form-container .form-control {
  width: 100%; /* Make the input fields take up the full width */
  padding: 10px; /* Add padding inside the input fields */
  border: 1px solid #ccc; /* Add a light border */
  border-radius: 5px; /* Add rounded corners */
  font-size: 1rem; /* Set a consistent font size */
  margin-bottom: 15px; /* Add spacing below the input fields */
}


  .tabs-container  .assist-nav-item .nav-link {
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--purple-primary);
    color: white;
    border: 1px solid var(--color-border);
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    min-width: 80px;
  }

  .tabs-container  .assist-nav-item .nav-link.active {
    background-color: var(--color-all-light);
    color: var(--color-all);
    border-color: var(--color-all-border);
  }

  .tabs-container  .assist-nav-item .nav-link i {
    font-size: 22px;
    margin-bottom: 4px;
  }

  .bg-assist-success {
    background-color: var(--btn-color) !important;
}

  .bg-selected-subject {
    background-color: var(--secondary-color) !important;
}

/* Custom vertical scrollbar for subject tiles */
.child-subjects-tile {
  overflow-x: auto;
  white-space: nowrap;
  scroll-behavior: smooth;
  width: 100%;
  flex-direction: row;
  align-items: center;
  padding: 10px 0;
  margin-top: 16px; /* Add space above the scroller */
  margin-bottom: 16px; /* Add space below the scroller */
}

/* For Chrome, Edge, and Safari */
.child-subjects-tile::-webkit-scrollbar {
  width: 10px;                /* Vertical scrollbar width */
  height: 0;                  /* Hide horizontal scrollbar */
}

.child-subjects-tile::-webkit-scrollbar-thumb {
  background: #7B68EE;
  border-radius: 8px;
}

.child-subjects-tile::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.nav-tabs-responsive-wrapper {
  -webkit-overflow-scrolling: touch;
  width: 100%;
  overflow-x: auto;
}

.programme_tabs {
  min-width: 600px;
}

@media (max-width: 767.98px) {
  .programme_tabs {
    flex-wrap: wrap;
    display: flex;
    gap: 0.5rem;
  }

  .programme_tabs > .assist-nav-item {
    width: 33.3333% !important;
    max-width: 33.3333%;
    flex: 0 0 33.3333%;
    padding-left: 4px !important;
    padding-right: 4px !important;
    margin-bottom: 8px;
  }

  .programme_tabs .nav-link {
    font-size: 0.85rem;
    padding: 0.5rem 0.25rem;
    min-height: 60px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .programme_tabs .nav-text {
    font-size: 0.8rem;
    margin-top: 2px;
  }
  .programme_tabs i {
    font-size: 1.2rem;
    margin-top: 2px;
  }
}

@media (max-width: 767.98px) {
  .programme_tabs {
    flex-wrap: wrap;
    display: flex;
    gap: 0;
  }

  .programme_tabs > .assist-nav-item {
    width: 33.3333% !important;
    max-width: 16.3333%;
    flex: 1 0 -5.6667%;
    padding-left: 0 !important;
    padding-right: -8px !important;
    margin-bottom: 4px;
  }

  .programme_tabs .nav-link {
    min-width: 0 !important;
    width: 100% !important;
    padding: 0.3rem 0.1rem !important;
    font-size: 0.75rem !important;
    min-height: 44px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .programme_tabs .nav-text {
    font-size: 0.75rem;
    margin-top: 2px;
  }

  .programme_tabs i {
    font-size: 1rem;
    margin-top: 2px;
  }
}
/* Responsive adjustments for parent_dashboard.html */
@media (max-width: 991.98px) {
    .home-page-md {
        display: none !important;
    }

    .home-page-sm {
        display: flex !important;
    }
}

@media (min-width: 992px) {
    .home-page-sm {
        display: none !important;
    }

    .home-page-md {
        display: flex !important;
    }
}

@media (max-width: 767.98px) {
    .welcome-text h2 {
        font-size: 1.3rem;
        line-height: 1.5;
        letter-spacing: 0.02em;
        padding-right: 6.5rem;
    }
    .home-page-card,
    .home-page-card-2 {
        padding: 1rem !important;
        font-size: 1rem !important;
    }

    .card-title {
        font-size: 1rem !important;
    }

    .device-mockup img {
        width: 100%;
        height: auto;
    }

    .hero-title {
        font-size: 2rem !important;
    }

    .hero-subtitle {
        font-size: 1rem !important;
    }

    .btn-primary-custom {
        font-size: 1rem !important;
        padding: 0.5rem 1rem !important;
    }

    .container.home-page {
        padding: 0 !important;
    }

    .row.home-page-sm > div {
        padding-left: 60px !important;
        padding-right: 0 !important;
    }
}

.learner-subjects-tiles {
  max-height: 600px;
  overflow-y: auto;
  margin-top: 20px;
}

@media (max-width: 600px) {
  .home-page-card,
  .home-page-card-2 {
    height: 120px !important;         /* Reduce card height */
    min-height: 90px !important;
    padding: 0.5rem !important;
    font-size: 0.85rem !important;
  }

  .card-icon {
    height: 48px !important;          /* Reduce icon size */
    width: 48px !important;
    margin-bottom: 8px !important;
  }

  .card-title {
    font-size: 0.95rem !important;    /* Reduce title font size */
    left: 16px !important;
    bottom: 8px !important;
  }

  .next-icon,
  .next-icon-2 {
    width: 20px !important;
    height: 20px !important;
    font-size: 1rem !important;
    top: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
  }

  .welcome-text h2 {
    font-size: 1.1rem !important;
  }

  .hero-title {
    font-size: 1.3rem !important;
  }

  .hero-subtitle {
    font-size: 0.95rem !important;
  }

  .btn-primary-custom {
    font-size: 0.95rem !important;
    padding: 0.4rem 0.8rem !important;
    width: 80%;
  }
}

/* Make nav-link smaller on mobile */
@media (max-width: 767.98px) {
  .programme_tabs .nav-link {
    font-size: 0.85rem;
    padding: 0.5rem 0.25rem;
  }

  .programme_tabs .nav-text {
    font-size: 0.8rem;
  }

  .programme_tabs i {
    font-size: 1rem;
  }
}

.home-page-md { display: flex; }
.home-page-sm { display: none; }

/* Mobile: show .home-page-sm, hide .home-page-md, adjust card sizes */
@media (max-width: 767.98px) {
  .home-page-md { display: none !important; }
  .home-page-sm { display: block !important; }

  .home-page-card,
  .home-page-card-2 {
    padding: 12px 10px;
    min-height: 60px;
    font-size: 0.95rem;
    border-radius: 12px;
  }

  .card-title {
    font-size: 1rem;
  }

  .card-icon {
    width: 28px;
    height: 28px;
    margin-right: 8px;
  }

  .next-icon, .next-icon-2 {
    font-size: 1rem;
  }

  .h-277 {
    min-height: 80px !important;
  }
}

@media (max-width: 767.98px) {
  .home-page-sm {
    display: flex !important;
    flex-wrap: wrap;
    flex-direction: row !important;
    gap: 0.5rem;
  }

  .home-page-sm > div[class^="col-"] {
    width: 50% !important;
    max-width: 50%;
    flex: 0 0 50%;
    padding-left: 4px !important;
    padding-right: 4px !important;
    margin-bottom: 8px;
  }

  .home-page-card,
  .home-page-card-2 {
    width: 100%;
    margin-bottom: 0.5rem;
  }
}


@media (max-width: 767.98px) {
  .home-page-sm {
    display: flex !important;
    flex-wrap: wrap;
    flex-direction: row !important;
    gap: 0.5rem;
  }

  .home-page-sm > div[class^="col-"] {
    width: 33.3333% !important;
    max-width: 33.3333%;
    flex: 0 0 33.3333%;
    /* ... */
  }

  .home-page-card,
  .home-page-card-2 {
    width: 100%;
    height: 120px !important;      /* Fixed card height */
    min-height: 120px !important;
    max-height: 120px !important;
    margin-bottom: 0.5rem;
    padding: 0.5rem !important;
    font-size: 0.95rem !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .card-icon {
    height: 48px !important;
    width: 48px !important;
    margin-bottom: 8px !important;
  }

  .card-title {
    font-size: 0.95rem !important;
    left: 16px !important;
    bottom: 8px !important;
    position: static !important;
    margin-top: 4px;
  }

  .next-icon,
  .next-icon-2 {
    width: 20px !important;
    height: 20px !important;
    font-size: 1rem !important;
    top: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
  }
}

/* Ensure select product suit cards are not clipped on mobile */
@media (max-width: 767.98px) {
  #select_product_app .home-page-card,
  #select_product_app .home-page-card-2 {
    height: auto !important;
    min-height: 110px !important;
    max-height: none !important;
  }
}

/* Select product page: layout suit cards nicely on mobile */
@media (max-width: 767.98px) {
  #select_product_app .home-page-sm {
    display: flex !important;
    flex-wrap: wrap;
    flex-direction: row !important;
    justify-content: center;
    gap: 0.75rem;
  }

  #select_product_app .home-page-sm > div[class^="col-"] {
    width: 50% !important;
    max-width: 200px;
    flex: 0 0 50%;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 0.75rem;
  }

  #select_product_app .home-page-card {
    width: 100%;
    margin: 0 auto;
  }

  /* Center the "Select a Product" heading on this page */
  #select_product_app .welcome-text,
  #select_product_app .welcome-text h2 {
    text-align: center !important;
    padding-left: 0;
    padding-right: 0;
  }
}

/* Select product page: ensure container is tall enough on mobile */
@media (max-width: 767.98px) {
  #select_product_app .scrollable-nav-container-none {
    min-height: 100vh;
    padding-bottom: 4.5rem; /* room above bottom nav */
  }
}

@media (max-width: 767.98px) {
    .container,
    .container-fluid,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        width: 111% !important;
        padding-right: var(--bs-gutter-x, 0.75rem 12px) !important;
        padding-left: var(--bs-gutter-x, 0.75rem) !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
}

@media (max-width: 767.98px) {
  .welcome-text {
    text-align: center !important;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding-left: 1rem;
    padding-right: 6rem;
  }

  .welcome-text h2 {
    font-size: 1.3rem;
    line-height: 1.5; /* Add more vertical spacing */
    letter-spacing: 0.02em; /* Optional: add a bit of spacing between letters */
  }
}

@media (max-width: 767.98px) {
  .welcome-text {
    text-align: center !important;
    font-size: 1.1rem !important;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    line-height: 1.4;
  }

  .welcome-text h4 {
    font-size: 1.1rem !important;
    line-height: 1.3;
  }

  .progress-bars {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .progress-bars .bar {
    width: 18px;
    height: 8px;
    border-radius: 4px;
    margin: 0 2px;
  }

  .pricing-card {
    padding: 0.8rem 0.5rem;
    font-size: 0.95rem;
    border-radius: 12px;
    margin-bottom: 1rem;
  }

  .pricing-type.annual {
    font-size: 1rem;
  }

  .price {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
  }

  .feature-list {
    padding-left: 1rem;
    font-size: 0.92rem;
  }

  .btn-subscribe.subscription-plan {
    font-size: 0.95rem;
    padding: 0.4rem 0.8rem;
    width: 100%;
    margin-top: 0.5rem;
  }

  /* .container, .container-fluid {
    padding-left: 0.5rem !important;
    padding-right: 1.5rem !important;
  } */

  .container, .container-fluid {
    padding-left: 0.5rem !important;
    padding-right: 4.5rem !important;
  }

  .container-suits, .container-fluid-suits {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }


  .text-center {
    text-align: center !important;
  }
}

@media (max-width: 767.98px) {
  .pricing-card {
    padding: 0.6rem 0.4rem;
    font-size: 0.85rem;
    border-radius: 10px;
    margin-bottom: 0.7rem;
  }

  .pricing-type.annual {
    font-size: 0.92rem;
  }

  .price {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 0.3rem;
  }

  .feature-list {
    padding-left: 0.8rem;
    font-size: 0.82rem;
  }

}

@media (max-width: 767.98px) {
  .btn-subscribe.subscription-plan {
    font-size: 0.75rem !important;
    width: 40% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    text-align: center !important;
    padding: 0.3rem 0.5rem !important;
  }
}

@media (max-width: 768px) {
    .text-center button {
        margin-bottom: 10px;
        width: 48%;
    }
}

@media (max-width: 767.98px) {
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    width: 403px !important;
    padding-right: var(--bs-gutter-x, 4.75rem) !important;
    padding-left: var(--bs-gutter-x, -1.25rem) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }
  body, html {
    overflow-x: hidden !important;
  }
}


/* Make home-page cards and text left-aligned and more compact on mobile */
@media (max-width: 767.98px) {
  .home-page .row {
    justify-content: flex-start !important;
    gap: 0.5rem;
  }
  .home-page .col-md-3 {
    max-width: 95% !important;
    flex: 0 0 95% !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .home-page-card,
  .home-page-card-2 {
    width: 100% !important;
    max-width: 320px !important;
    margin-left: 19px !important;
    margin-right: auto !important;
    height: auto !important;
    padding: 0.7rem 0.5rem !important;
    font-size: 1rem !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  .info-row {
    display: flex;
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.5;
  }


  .card-title {
    font-size: 1rem !important;
    left: 0 !important;
    right: auto !important;
    text-align: left !important;
    position: static !important;
    margin-top: 8px;
    margin-bottom: 0;
  }

  .device-mockup {
    margin: 1.5rem 0 0 0 !important;
    text-align: left !important;
  }
  .container.home-page {
    padding: 0 !important;
  }
}

.clickable-subject {
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.clickable-subject:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

.clickable-icon {
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 8px;
  font-size: 20px;
  color: white;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.clickable-subject:hover .clickable-icon {
  opacity: 1;
}

@media (max-width: 576px) {
  .small-card,
  .stats-card {
    border-radius: 10px;
    padding: 0.25rem !important;
    font-size: 0.75rem !important;
    min-width: 80px;
    max-width: 293px;
    min-height: 50px;
    max-height: 110px;
    width: auto;
    height: 100%;
    text-align: center;
    word-break: break-word;
    margin-left: 0.75rem !important;
    margin-right: 0.75rem !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .stats-card .card-title,
  .small-card .card-title {
    font-size: 0.85em !important;
    margin-bottom: 0.3em;
    text-align: center;
    word-break: break-word;
  }
  .stats-card .list-group-item,
  .small-card .list-group-item {
    font-size: 0.75em !important;
    padding: 0.15em 0.2em !important;
    gap: 0.3em;
    text-align: center;
    word-break: break-word;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .stats-card .badge,
  .small-card .badge {
    font-size: 0.75em !important;
    padding: 0.1em 0.4em !important;
    word-break: break-word;
  }
  .dashboard-welcome {
    font-size: 1rem !important;
    text-align: center !important;
  }
  .performance-dashboard,
  .performance-dashboard .row {
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  .program .stats-card {
    min-width: 150px;
    min-height: 100px;
    border-radius: 30px;
  }
}

.subject-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    overflow-x: unset !important;
    white-space: normal !important;
}

.subject-grid .col-md-6 {
  display:block;
}

.preview-section {
  position: sticky;
  top: 20px;
  height: fit-content;
  align-self: flex-start; /* Align to top within grid */
}


/* Code Editor Preview Specific Styles (for the right panel) */
.code-editor-preview {
  background: #f1f3f5;
  border: 2px solid #dee2e6;
  border-radius: 8px;
  padding: 15px;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  color: #495057;
  margin: 15px 0;
  display: flex; /* Use flexbox for line numbers and code content */
  align-items: baseline; /* Align content to the top baseline */
  overflow-x: auto; /* Allow horizontal scrolling for long lines */
  max-height: 300px; /* Limit height and allow vertical scrolling */
  overflow-y: auto;
}

.code-editor-preview .line-numbers {
  color: #6c757d;
  margin-right: 15px;
  user-select: none;
  flex-shrink: 0; /* Prevent line numbers from shrinking */
  text-align: right;
  white-space: pre; /* Preserve whitespace and line breaks for numbers */
  padding-right: 5px; /* Small padding for separation */
  border-right: 1px solid #e9ecef; /* Visual separator */
}

.code-editor-preview .code-content {
  flex-grow: 1; /* Allow code content to take remaining space */
  white-space: pre-wrap; /* Preserve whitespace and wrap lines */
  word-break: break-word; /* Break long words to prevent overflow */
}

/* Starter Code Input Editor Styles (for the left panel) */
.starter-code-editor-container {
  position: relative;
  display: flex;
  border: 2px solid #e9ecef; /* Match form control border */
  border-radius: 8px; /* Match form control border-radius */
  overflow: hidden; /* Hide overflow for scroll sync */
  background: white; /* Match form control background */
  transition: all 0.3s ease; /* Add transition for consistency */
  min-height: 150px; /* Ensure a minimum height for the editor */
}

.starter-code-editor-container:focus-within {
  border-color: #667eea; /* Custom focus color */
  box-shadow: 0 0 0 0.25rem rgba(102, 126, 234, 0.25); /* Custom focus shadow */
  transform: translateY(-2px); /* Slight lift on focus */
}

.starter-code-editor-container .line-numbers-input {
  flex-shrink: 0;
  width: 40px; /* Fixed width for line numbers */
  padding: 12px 0; /* Match textarea vertical padding */
  text-align: right;
  color: #6c757d;
  background-color: #f8f9fa; /* Light background for line numbers */
  border-right: 1px solid #e9ecef;
  user-select: none;
  overflow: hidden; /* Hide scrollbar for line numbers */
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  line-height: 1.5; /* Match textarea line-height */
}

.starter-code-editor-container textarea {
  flex-grow: 1;
  border: none; /* Remove default textarea border */
  outline: none; /* Remove default textarea outline */
  resize: none; /* Disable textarea resize */
  padding: 12px 16px; /* Match form control padding */
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  line-height: 1.5; /* Ensure line height matches line numbers */
  background: transparent; /* Transparent background to show container background */
  overflow-y: auto; /* Enable scrolling for the textarea */
}

/* Modal Styles - Adapted for Bootstrap look */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1050; /* Higher than Bootstrap's default modal-backdrop */
  backdrop-filter: blur(1px);
}

.custom-modal-content {
  background: white;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  width: 95%;
  max-width: 900px;
  text-align: left;
  position: relative;
  transform: translateY(-20px);
  opacity: 0;
  animation: modal-fade-in 0.3s forwards;
}

@keyframes modal-fade-in {
  to {
      transform: translateY(0);
      opacity: 1;
  }
}

/* Loading indicator */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1060; /* Above modal */
  font-size: 1.5rem;
  color: #667eea;
  backdrop-filter: blur(3px);
}

.curriculum-content-list .list-group-item,
.challenge-list .list-group-item {
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    border-radius: 8px;
    margin-bottom: 8px;
}
.curriculum-content-list .list-group-item:hover,
.challenge-list .list-group-item:hover {
    background-color: #e2f0ff;
    transform: translateY(-2px);
}
.curriculum-content-list .list-group-item.active,
.challenge-list .list-group-item.active {
    background-color: #4facfe;
    border-color: #4facfe;
    color: white;
    font-weight: bold;
}

.code-editor-container {
    position: relative;
    display: flex;
    border: 2px solid #ced4da;
    border-radius: 8px;
    overflow: hidden;
    background: white;
    min-height: 300px; /* Min height for editor */
    height: 100%; /* Make it fill parent height */
    resize: vertical; /* Allow vertical resizing */
}

.code-editor-container .line-numbers-editor {
    flex-shrink: 0;
    width: 40px;
    padding: 12px 0;
    text-align: right;
    color: #6c757d;
    background-color: #f8f9fa;
    border-right: 1px solid #e9ecef;
    user-select: none;
    overflow: hidden;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    line-height: 1.5;
}

.code-editor-container textarea {
    flex-grow: 1;
    border: none;
    outline: none;
    resize: none;
    padding: 12px 16px;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    line-height: 1.5;
    background: transparent;
    overflow-y: auto;
}

.live-preview-iframe {
    width: 100%;
    height: 100%; /* Make it fill parent height */
    border: 2px solid #ced4da;
    border-radius: 8px;
    background-color: white;
}

/* New style for the row containing editor and preview */
.editor-preview-row {
    min-height: 450px; /* Ensure enough vertical space for side-by-side */
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}


.CodeMirror-gutters {
  border-right: 1px solid #ddd;
  background-color: #f8f9fa;
}


.input-group .btn {
  z-index: 0;

}

.school_level_container{
    width: 80%;
    padding-right: var(--bs-gutter-x, .75rem);
    padding-left: var(--bs-gutter-x, .75rem);
    margin-right: auto;
    margin-left: auto;
}

.folder-tile {
  position: relative;
  min-height: 110px;
  width: 100%;
  border: 1px solid #dee2e6;
  padding: 1rem;
  background: #e9ecef;
  border-radius: 0.25rem;
}

.folder-name-top-left {
  position: absolute;
  top: 1rem;
  left: 1rem;
  text-align: left;
  font-weight: bold;
  margin-bottom: 0.5rem;
  z-index: 2;
  background: transparent;
  padding-right: 1rem;
}

.folder-add-btn {
  position: relative;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  background:linear-gradient(135deg, #667eea 0%, #764ba2 100%)
}

.folder-files-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  height: 100%;
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 1;
}

.btn-link {
    font-weight: 400;
    color: #000;
    text-decoration: none;
}

.subject-tick-icon {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 1.4em;
  color: white;
  z-index: 2;
  pointer-events: none;
}

.learner-subject-badge {
  font-size: 0.95em;
  padding: 0.7em 1.5em 0.7em 0.8em;
  border-radius: 20px;
  margin-bottom: 8px;
}

/* create new container style width */

.subject-tile-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.child-subjects-tile-flex {
  max-height: 600px;
  overflow-y: auto;
  margin-top: 20px;
}

.top-lebel-badge {
  position: absolute;
  top: 12px;
  right: 12px;
}

.scrollable-list-icon {
  overflow-y: auto;
}


.course_img {
  height: 100%;
  object-fit: cover;
}

@media (max-width: 767.98px) {
    .terms-sidebar,
    .weeks-sidebar {
        display: none !important; /* Hide sidebars on mobile, show via offcanvas */
        width: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }
    .main-content-timeline {
        padding: 8px !important;
        border-radius: 8px !important;
    }
    /* If using offcanvas, Vue/Bootstrap will handle sidebar display */
}

@media (max-width: 767.98px) {
    .terms-sidebar,
    .weeks-sidebar {
        display: none !important;
    }
    /* Offcanvas handled by Bootstrap/Vue, appears on top */
}

.responsive-modules-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    align-items: stretch;
}

@media (max-width: 768px) {
    .responsive-modules-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    .topic-subject-card {
        margin-bottom: 1rem;
    }
    .module-title, .module-count, .progress-circle {
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .responsive-modules-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    .topic-subject-card {
        padding: 0.5rem;
    }
    .module-title, .module-count, .progress-circle {
        font-size: 0.9rem;
    }
}
/* Desktop: 5 columns, good spacing */
.topic-subject-card .modules-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
  height: 100%;
}

/* Tablet: 2 columns */
@media (max-width: 900px) {
  .topic-subject-card .modules-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

/* Mobile: 1 column, compact, stacked */
@media (max-width: 600px) {
  .topic-subject-card {
    padding: 10px !important;
    height: auto !important;
    min-height: unset !important;
    margin-bottom: 10px !important;
  }
  .topic-subject-card .modules-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .topic-subject-card .module {
    min-height: 60px;
    padding: 10px 8px;
    font-size: 0.95em;
  }
  .topic-subject-card .module-title {
    font-size: 1em;
    margin-bottom: 4px;
  }
  .topic-subject-card .module-count {
    font-size: 0.95em;
  }
  .topic-subject-card .progress-circle {
    width: 34px;
    height: 32px;
    font-size: 0.9em;
  }
  .topic-subject-card .module-icon {
    width: 22px;
    height: 22px;
    margin-bottom: 4px;
    font-size: 1em;
  }
  .topic-subject-card .module h5.small {
    font-size: 1em;
    margin-bottom: 2px;
    word-break: break-word;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
}

.btn-xs-custom {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
    border-radius: 0.2rem !important;
}

@media (max-width: 768px) {
    .btn-xs-custom {
        min-width: 64px;
    }
}

    .sidebar-toggle-btn {
        z-index: 1001;
    }
    .sidebar-toggle-btn-desktop {
        position: absolute;
        top: 0;
        right: 0;
        margin-top: 1rem;
        margin-right: 1rem;
    }
    .flashcard-modal-sidebar-main-sub-topic.mobile-sidebar {
        z-index: 1000;
        background: white;
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100vw;
        max-width: 100vw;
        overflow-y: auto;
        box-shadow: 2px 0 8px rgba(0,0,0,0.1);
        border: none !important;
    }
    .flashcard-modal-sidebar-main-sub-topic.mobile-sidebar .card {
        border: none !important;
        box-shadow: none !important;
    }
    .sidebar-close-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        border: none !important;
        background: transparent !important;
        z-index: 1100;
        box-shadow: none !important;
    }
    .btn-xs-custom {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
        border-radius: 0.2rem !important;
    }
    .hide-on-mobile {
        display: none !important;
    }
    
    @media (min-width: 769px) {
        .hide-on-mobile {
            display: block !important;
        }
    }

    @media (max-width: 991.98px) {
    .profile-tabs-sidebar {
      flex-direction: row !important;
      width: 100% !important;
      margin-bottom: 1rem;
      margin-right: 0 !important;
    }
    .profile-tabs-sidebar ul {
      flex-direction: row !important;
      width: 100% !important;
    }
    .profile-tabs-sidebar .nav-item {
      width: 100% !important;
      margin-bottom: 0.5rem !important;
      margin-right: 0.5rem !important;
    }
    .profile-main-card-content {
      width: 100% !important;
      max-width: 100% !important;
    }
    .container.d-flex.flex-column.align-items-center.justify-content-center.py-4 {
      padding: 0.5rem !important;
    }
  }

  @media (max-width: 767.98px) {
    .profile-tabs-sidebar {
      flex-direction: row !important;
      width: 100% !important;
      margin-bottom: 1rem;
      margin-right: 0 !important;
    }
    .profile-tabs-sidebar ul {
      flex-direction: row !important;
      width: 100% !important;
    }
    .profile-tabs-sidebar .nav-item {
      width: 100% !important;
      margin-bottom: 0.5rem !important;
      margin-right: 0.5rem !important;
    }
    .profile-main-card-content {
      width: 100% !important;
      max-width: 100% !important;
    }
    .container.d-flex.flex-column.align-items-center.justify-content-center.py-4 {
      padding: 0.25rem !important;
    }
  }

  /* Tab button: increase width, decrease height */
  .profile-tabs-sidebar .nav-link {
    min-width: 180px;
    width: 320px !important;
    min-height: 48px;
    height: 78px !important;
    font-size: 1.15rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    border-radius: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    display: flex;
    align-items: center;
    gap: -1.25rem;
  }

  @media (max-width: 991.98px) {
    .profile-tabs-sidebar .nav-link {
      width: 100% !important;
      min-width: 0 !important;
      font-size: 1rem !important;
      height: 44px !important;
      min-height: 44px !important;
      padding: 0.4rem 0.5rem !important;
    }
  }

  @media (max-width: 767.98px) {
    .profile-tabs-sidebar .nav-link {
      width: 100% !important;
      min-width: 0 !important;
      font-size: 0.98rem !important;
      height: 40px !important;
      min-height: 40px !important;
      padding: 0.3rem 0.4rem !important;
    }
  }

  /* Responsive card widths */
  .profile-main-card-content > div[class*="w-100"] {
    max-width: 900px;
    margin: 0 auto;
  }

  @media (max-width: 991.98px) {
    .profile-main-card-content > div[class*="w-100"] {
      max-width: 100% !important;
      margin: 0 !important;
    }
  }

  @media (max-width: 991.98px) {
    .profile-main-card-content {
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      flex-grow: 1 !important;
    }
    .profile-main-card-content > div[class*="w-100"] {
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
    }
}

/* Professional Dashboard Styles */
.dashboard {
  max-width: 2400px;
  margin: 0 auto;
  background: white;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  overflow: hidden;
}

.header {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: white;
  padding: 30px 40px;
  position: relative;
  overflow: hidden;
}

.header-content { position: relative; z-index: 2; }
.student-name { font-size: 2.5rem; font-weight: 700; margin-bottom: 10px; text-shadow: 0 2px 4px rgba(0,0,0,0.3);}
.last-updated { font-size: 1rem; opacity: 0.9; font-weight: 300;}
.main-content { padding: 40px;}
.overview-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
  margin-bottom: 40px;
}

.overview-card {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-radius: 16px;
  padding: 25px;
  text-align: center;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.overview-card.excellent { --accent-color: #10b981; }
.overview-card.good { --accent-color: #3b82f6; }
.overview-card.needs-attention { --accent-color: #f59e0b; }
.overview-card.critical { --accent-color: #ef4444; }
.card-value { font-size: 2rem; font-weight: 700; color: #1e293b; margin-bottom: 5px;}
.card-label { font-size: 0.85rem; color: #64748b;}
.subjects-section { margin-top: 40px;}
.section-title { font-size: 1.5rem; font-weight: 600; color: #1e293b; margin-bottom: 25px; display: flex; align-items: center; gap: 10px;}
.section-icon { width: 24px; height: 24px; background: linear-gradient(135deg, #4f46e5, #7c3aed); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: white; font-size: 12px;}
.subjects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 25px;
}

.subject-card {
  background: white;
  border-radius: 16px;
  padding: 25px;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.subject-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--progress-color);
}

.subject-header { display: flex; justify-content: between; align-items: flex-start; margin-bottom: 20px;}
.subject-name { font-size: 1.1rem; font-weight: 600; color: black; margin-bottom: 5px;}
.subject-status { padding: 4px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;}
.status-excellent { background: #d1fae5; color: #065f46;}
.status-good { background: #dbeafe; color: #1e40af;}
.status-attention { background: #fef3c7; color: #92400e;}
.status-critical { background: #fee2e2; color: #991b1b;}
.progress-container { margin: 20px 0;}
.progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;}
.progress-label { font-size: 0.9rem; color: #64748b; font-weight: 500;}
.progress-percentage { font-size: 0.9rem; font-weight: 600; color: #1e293b;}
.progress-section .progress-bar { width: 100%; height: 8px; background: #f1f5f9; border-radius: 4px; overflow: hidden;}
.progress-fill { height: 100%; border-radius: 4px; transition: width 0.8s ease; position: relative;}
.skills-breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 15px;
  margin-top: 20px;
}

.skill-item { text-align: center; padding: 12px; background: #f8fafc; border-radius: 12px; border: 1px solid #e2e8f0;}
.skill-score { font-size: 1.5rem; font-weight: 700; margin-bottom: 5px;}
.skill-name { font-size: 0.8rem; color: #64748b; font-weight: 500;}
.last-activity { margin-top: 15px; padding-top: 15px; border-top: 1px solid #e2e8f0; font-size: 0.85rem; color: #64748b;}
.export-section { margin-top: 40px; padding: 25px; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); border-radius: 16px; text-align: center;}
.export-btn { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); color: white; border: none; padding: 12px 24px; border-radius: 12px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; margin: 0 10px;}
.export-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(79, 70, 229, 0.4);}
@media (max-width: 768px) {
  .main-content { padding: 20px;}
  .header { padding: 20px;}
  .student-name { font-size: 2rem;}
  .subjects-grid { grid-template-columns: 1fr;}
}


.profile-tab-container {
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}


.subjects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 25px;
    margin-bottom: 40px;
}

@media (min-width: 1100px) {
    .subjects-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 700px) and (max-width: 1099px) {
    .subjects-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 699px) {
    .subjects-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
  .dashboard {
    max-width: 95%;
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    padding-left: 0.75rem;
    margin-right: 3rem;
    padding-right: 0.75rem;
  }
}

/* Layout containers */
.parent-desktop-layout {
  min-height: 30vh;
  margin-top: 2rem;
  margin-bottom: 2rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  display: flex;
}

.parent-mobile-layout {
  margin-top: 1rem;
  padding-left: 0.25rem;
  padding-right: 1.25rem;
}

.parent-sidebar {
  width: 306px;
  min-width: 200px;
}

.parent-learner-list {
  gap: 1rem;
}

.parent-learner-card {
  cursor: pointer;
}

.parent-main-content {
  padding: 1rem;
}

.parent-top-subjects-list,
.parent-attention-subjects-list {
  max-height: 72px;
  overflow-y: auto;
}

.parent-subject-cards-scroll {
  max-height: 520px;
  overflow-y: auto;
}

.parent-export-title {
  margin-bottom: 15px;
  color: #1e293b;
}

.bg-purple {
  background-color: #7B68EE !important;
}

@media (max-width: 767.98px) {
  .xsmall-card {
    font-size: 0.7rem !important;
    padding: 0.3rem 0.5rem !important;
    border-radius: 8px !important;
    min-height: 60px !important;
    height: auto !important;
    box-shadow: none !important;
  }
  .xsmall-text {
    font-size: 0.7rem !important;
    padding: 0.05rem !important;
  }
  .xsmall-bar {
    height: 0.25rem !important;
  }
  .export-btn.btn-sm {
    font-size: 0.8rem !important;
    padding: 0.15rem 0.4rem !important;
    margin-right: 0.1rem;
  }
  .progress-card.xsmall-card {
    padding: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    box-shadow: none !important;
    width: 376px;
    right: 19px;
    
  }
  
}

/* Profile Dashboard Styles */
.profile-container {
  max-width: 2100px;
  margin: 0 auto;
  background: rgba(255,255,255,0.95);
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  overflow: hidden;
  min-height: 100vh; /* Increased height */
}
.profile-header {
  background:var(--primary-color);
  color: white;
  padding: 0rem;
  text-align: center;
  position: relative;
  height: 50px;
}
.profile-header h1 { font-size: 2.5rem; margin-bottom: 0.5rem;}
.profile-header p { font-size: 1.1rem; opacity: 0.9; }
.profile-content { padding: 2rem; }
.profile-tab-navigation {
  display: flex;
  background: #f8fafc;
  border-radius: 12px;
  padding: 6px;
  margin-bottom: 2rem;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
}
.profile-tab-btn {
  flex: 1;
  padding: 12px 20px;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  color: #64748b;
  transition: all 0.3s ease;
  position: relative;
}
.profile-tab-btn.active {
  background: var(--primary-color);
  color: white;
  box-shadow: 0 4px 12px rgba(79,70,229,0.3);
}
.profile-tab-content { }
.profile-profile-section {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2rem;
  margin-bottom: 2rem;
}
.profile-profile-avatar { text-align: center; }
.profile-avatar {
  width: 150px; height: 150px; border-radius: 50%;
  background: linear-gradient(135deg,#ff6b6b,#feca57);
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; color: white; margin: 0 auto 1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  transition: transform 0.3s ease;
}
.profile-avatar:hover { transform: scale(1.05); }
.profile-edit-btn {
  background: linear-gradient(135deg,#10b981 0%,#059669 100%);
  color: white; border: none; padding: 0.75rem 1.5rem;
  border-radius: 8px; cursor: pointer; font-weight: 600;
  transition: all 0.3s ease; margin-top: 1rem;
}
.profile-edit-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(16,185,129,0.3); }
.profile-profile-info {
  background: #f8fafc; padding: 1.5rem; border-radius: 12px; border-left: 4px solid #4f46e5;
}
.profile-info-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.75rem 0; border-bottom: 1px solid #e2e8f0;
}
.profile-info-row:last-child { border-bottom: none; }
.profile-info-label { font-weight: 600; color: #374151; }
.profile-info-value { color: #6b7280; }
.profile-edit-profile-card {
  max-width: 600px; margin: 0 auto; background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  margin-bottom: 2rem;
}
.profile-card-header { font-weight: bold; padding: 1rem 1.5rem; border-bottom: 1px solid #e2e8f0; }
.profile-card-body { padding: 1.5rem; }
.profile-row { display: flex; gap: 1rem; margin-bottom: 1rem; }
.profile-col { flex: 1; }
.profile-col-full { flex: 1 1 100%; }
.profile-form-label { font-size: 0.95rem; }
.profile-form-control { width: 100%; padding: 0.5rem; border-radius: 6px; border: 1px solid #e2e8f0; }
.profile-is-invalid { border-color: #dc3545; }
.profile-invalid-feedback { color: #dc3545; font-size: 0.85rem; }
.profile-btn-save {
  background: linear-gradient(135deg,#10b981 0%,#059669 100%);
  color: white; border: none; padding: 0.5rem 1.2rem; border-radius: 8px; font-weight: 600; margin-right: 1rem;
}
.profile-btn-cancel {
  background: #e2e8f0; color: #374151; border: none; padding: 0.5rem 1.2rem; border-radius: 8px; font-weight: 600;
}
.profile-text-danger { color: #dc3545; }
.profile-subscription-card {
  background: linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  color: white; padding: 2rem; border-radius: 16px; margin-bottom: 2rem; position: relative; overflow: hidden;
}
.profile-plan-name { font-size: 1.8rem; font-weight: 700; margin-bottom: 0.5rem; }
.profile-plan-price { font-size: 2.5rem; font-weight: 800; margin-bottom: 1rem; }
.profile-plan-price-unit { font-size: 1rem; opacity: 0.8; }
.profile-plan-features { list-style: none; padding-left: 0; }
.profile-plan-features li { padding: 0.5rem 0; position: relative; padding-left: 1.5rem; }
.profile-plan-features li::before { content: '✓'; position: absolute; left: 0; color: #10b981; font-weight: 800; }
.profile-subscription-details {
  background: #f8fafc; padding: 1.5rem; border-radius: 12px; margin-top: 1rem;
}
.profile-payment-table {
  background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.07);
}
.profile-table-header {
  background: #f8fafc; padding: 1rem; border-bottom: 2px solid #e2e8f0; font-weight: 600; color: #374151;
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
}
.profile-table-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; padding: 1rem; border-bottom: 1px solid #f1f5f9; transition: background 0.2s ease;
}
.profile-table-row:last-child { border-bottom: none; }
.profile-status-badge {
  display: inline-block; padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.875rem; font-weight: 600;
}
.profile-status-success { background: #dcfce7; color: #166534; }
.profile-status-pending { background: #fef3c7; color: #92400e; }
.profile-btn-download {
  color: #4f46e5; text-decoration: none; font-weight: 600; border: none; background: none; cursor: pointer;
}
.profile-plan-options { display: flex; gap: 2rem; flex-wrap: wrap; }
.profile-plan-option {
  background: #fff; color: #374151; padding: 1.5rem; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.07); margin-bottom: 1rem; flex: 1 1 300px;
  border: 2px solid transparent; transition: border 0.2s;
}
.profile-plan-active { border-color: #4f46e5; }
.profile-plan-option-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.profile-btn-subscribe {
  background: linear-gradient(135deg,#10b981 0%,#059669 100%);
  color: white; border: none; padding: 0.5rem 1.2rem; border-radius: 8px; font-weight: 600; margin-top: 1rem;
}
@media (max-width: 768px) {
  .profile-content { padding: 1rem; }
  .profile-tab-navigation { flex-direction: column; gap: 4px; padding: 4px; }
  .profile-tab-btn { padding: 14px 16px; font-size: 0.9rem; }
  .profile-profile-section { grid-template-columns: 1fr; gap: 1.5rem; }
  .profile-avatar { width: 120px; height: 120px; font-size: 2.5rem; }
  .profile-profile-info { padding: 1rem; }
  .profile-info-row { flex-direction: column; align-items: flex-start; padding: 1rem 0; gap: 0.3rem; }
  .profile-subscription-card { padding: 1.5rem; margin-bottom: 1.5rem; }
  .profile-plan-name { font-size: 1.5rem; }
  .profile-plan-price { font-size: 2rem; }
  .profile-plan-features { font-size: 0.9rem; }
  .profile-payment-table { border-radius: 8px; }
  .profile-table-header { display: none; }
  .profile-table-row { display: block; padding: 1.5rem 1rem; border-bottom: 1px solid #f1f5f9; background: white; margin-bottom: 8px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
  .profile-table-row > div { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid #f1f5f9; }
  .profile-table-row > div:last-child { border-bottom: none; }
  .profile-table-row > div::before { content: attr(data-label); font-weight: 600; color: #6b7280; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; }
}


.btn-xs, .form-control-xs {
  padding: 0.15rem 0.5rem;
  font-size: 0.75rem;
  border-radius: 0.2rem;
  line-height: 1.2;
}

/* Extra small button style */
.btn-xs {
  font-size: 0.7rem !important;
  padding: 0.15rem 0.5rem !important;
  line-height: 1.1 !important;
  border-radius: 0.2rem !important;
}


/* Space below subjects list so button doesn't overlap */
.subjects-row {
  margin-bottom: 2.2rem;
  padding-right: 7rem;
}

/* Mobile adjustments */
@media (max-width: 767.98px) {
  .add-subject-btn-mobile {
    position: absolute;
    bottom: 12px;
    right: 9px;
    z-index: 2;
    font-size: 0.7rem !important;
    padding: 0.15rem 0.4rem !important;
    line-height: 1.1 !important;
    border-radius: 0.2rem !important;
    width: 66px;
  }
  .subjects-row-mobile {
    margin-bottom: 2.2rem;
    padding-right: 5.5rem;
  }
}

.add-subjects-back-btn { font-size: 1.25rem; }
.add-subjects-title-desktop { font-size: 1.25rem; }
.add-subjects-search-group { max-width: 300px; }

.subject-name-desktop { padding: 1rem; }

.add-subjects-back-btn-mobile { font-size: 1rem; }
.add-subjects-title-mobile { font-size: 1rem; }
.add-subjects-mobile-container { padding: 0; margin: 0; }
.add-subjects-learner-mobile { margin: 0 4px 8px 4px; }
.avatar-mobile { font-size: 0.85rem; width: 32px; height: 32px; }
.avatar-label-mobile { font-size: 0.85rem; }
.learner-name-mobile { font-size: 0.75rem; white-space: nowrap; }
.add-subjects-search-mobile { font-size: 0.85rem; padding: 0 8px; }
.add-subjects-search-group-mobile { max-width: 110px; }
.add-subjects-tile-mobile { padding: 0 4px; }
.add-subjects-col-mobile { padding-left: 2px; padding-right: 2px; }
.subject-mobile {
  min-height: 38px;
  font-size: 0.72rem;
  padding: 0.25rem 0.2rem;
  border-radius: 8px;
  margin-bottom: 4px;
  overflow: hidden;
  width: 100%;
}
.subject-tick-mobile { top: 2px; right: 2px; font-size: 0.75rem; }
.subject-name-mobile { font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0; }
.add-subjects-content-btn { font-size: 0.8rem; padding: 2px 8px; }
.add-subjects-next-btn-mobile button { font-size: 0.8rem; padding: 2px 18px; }

/* Desktop */
.subject-desktop { cursor: pointer; }
.subject-name-desktop { padding: 1rem; }
.folder-name-desktop { margin-right: 1.5rem; }
.folder-add-btn-desktop { font-size: 0.85rem; min-width: 32px; min-height: 24px; line-height: 1; margin-left: auto; }

/* Mobile */
.content-back-btn-mobile { font-size: 1rem; }
.content-title-mobile { font-size: 1rem; }
.avatar-mobile { width: 32px; height: 32px; font-size: 0.85rem; }
.learner-name-mobile { font-size: 0.75rem; white-space: nowrap; }
.content-alert-mobile { font-size: 0.9rem; }
.content-subjects-mobile { padding: 0 2px; }
.content-col-mobile { padding-left: 2px; padding-right: 2px; }
.subject-mobile {
  min-height: 38px;
  font-size: 0.72rem;
  padding: 0.25rem 0.2rem;
  border-radius: 8px;
  margin-bottom: 4px;
  overflow: hidden;
  width: 100%;
}
.subject-tick-mobile { top: 2px; right: 2px; font-size: 0.75rem; }
.subject-name-mobile { font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0; }
.folder-tile-mobile { padding: 0.5rem 0.7rem; }
.folder-name-mobile { margin-right: 1.2rem; font-size: 0.68rem; max-width: 90px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.folder-add-btn-mobile-wrapper { position: relative; flex: 1; margin-top: -13px;padding-left: 42px; }
.folder-add-btn-mobile {
  position: absolute;
  top: 0; right: 0;
  font-size: 0.7rem;
  min-width: 24px;
  min-height: 20px;
  line-height: 1;
}
.folder-files-center-mobile { font-size: 0.85rem; }
.content-no-folder-mobile { font-size: 0.9rem; }
.next-btn-mobile { font-size: 0.85rem; padding: 2px 18px; }

.custom-modal-height {
  min-height: 85vh;
}

@media (max-width: 768px) {
.btn-mobile {
        width: 37%
194.531px
;
    }
}

/* Mobile Subscription Section Styles */
.mobile-title {
  font-size: 1.5rem;
}
.mobile-subtitle {
  font-size: 0.5rem;
}
.mobile-arrow-btn {
  font-size: 0.45rem;
  padding: 0.04rem 0.09rem;
}
.mobile-alert {
  font-size: 0.5rem;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
}
.mobile-pricing-card {
  font-size: 0.3rem;
  min-height: 20px;
  box-sizing: border-box;
}
.mobile-plan-name {
  font-size: 0.30rem;
}
.mobile-plan-price {
  font-size: 0.5rem;
}
.mobile-feature-list {
  padding-left: 0.1rem;
  margin-bottom: 0.08rem;
}
.mobile-feature-list li {
  font-size: 0.55rem;
}
.mobile-subscribe-btn {
  font-size: 0.65rem;
  padding: 0.2rem 0.5rem;
  min-height: 1.0em;
  border-radius: 8px;
  margin-top: 0.2rem;
}
.mobile-next-btn {
  font-size: 0.5rem;
  padding: 0.04rem 0.12rem;
  min-height: 1.5rem;
}

.subscription-card-colored {
  background: linear-gradient(135deg, #7B68EE 0%, #A084E8 100%);
  color: #fff;
  border-radius: 1rem;
  transition: box-shadow 0.2s, border 0.2s;
}
.subscription-card-monthly {
  background: var(--secondary-color);
}
.subscription-card-annual {
  background: var(--secondary-color);
}
.profile-plan-active {
  border: 2px solid #6c63ff !important;
  box-shadow: 0 0 0 2px #a084e8;
}

/* Desktop Card */
.custom-desktop-card {
    cursor: pointer;
    margin-bottom: 16px;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    transition: box-shadow 0.2s, border-color 0.2s;
    background: #fff;
}
.custom-desktop-card-hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    border-color: #b3d4fc;
}
.subtopic-title {
    font-weight: 600;
}
.module-title-desktop {
    font-size: 1rem;
}
.module-count-desktop {
    font-size: 0.95rem;
}
.notes-icon { color: #1976d2; }
.quiz-icon { color: #ff9800; }
.assessment-icon { color: #43a047; }
.progress-circle-desktop {
    background: #f5f5f5;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #1976d2;
}

/* Mobile Card */
.custom-mobile-card {
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #eee;
    background:#d09eff;
    margin-bottom: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
    cursor: pointer;
}
.subtopic-title-mobile {
    font-weight: 600;
}
.module-row-mobile {
    font-size: 0.97rem;
}
.notes-icon-mobile { color: #1976d2; }
.quiz-icon-mobile { color: #ff9800; }
.assessment-icon-mobile { color: #43a047; }
.progress-icon-mobile { color: #1976d2; }
.module-count-mobile {
    font-weight: 500;
}
.progress-mobile {
    font-weight: 600;
}

@media (max-width: 768px) {
  .modal-header {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .modal-header .modal-title {
    flex: 1 1 auto;
    text-align: left;
  }
  .modal-header .btn {
    margin-left: auto !important;
  }
}

/* Card gradients */
.card-gradient-green {
  background: linear-gradient(135deg, #56ab2f 0%, #a8e6cf 100%) !important;
  box-shadow: 0 8px 32px rgba(86, 171, 47, 0.15);
  border: none !important;
}
.card-gradient-blue {
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%) !important;
  box-shadow: 0 8px 32px rgba(59, 130, 246, 0.15);
  border: none !important;
}
.card-gradient-orange {
  background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%) !important;
  box-shadow: 0 8px 32px rgba(245, 158, 11, 0.15);
  border: none !important;
}
.card-gradient-red {
  background: linear-gradient(135deg, #FFA0AC 0%, #FF6B9D 100%) !important;
  box-shadow: 0 8px 32px rgba(255, 107, 107, 0.15);
  border: none !important;
}

/* Skill circle progress backgrounds */
.skill-item-mobile {
  background: rgba(255,255,255,0.15);
  border-radius: 12px;
  padding: 8px;
  flex: 1;
  min-width: 70px;
  text-align: center;
  backdrop-filter: blur(10px);
  margin-bottom: 4px;
}
.skill-progress-circle {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  margin: 0 auto 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #000;
  background: rgba(255,255,255,0.2);
  position: relative;
}
.circle-green {
  background: conic-gradient(#4ade80 0% 80%, rgba(255,255,255,0.2) 80% 100%);
}
.circle-blue {
  background: conic-gradient(#3b82f6 0% 60%, rgba(255,255,255,0.2) 60% 100%);
}
.circle-orange {
  background: conic-gradient(#f59e0b 0% 40%, rgba(255,255,255,0.2) 40% 100%);
}
.circle-red {
  background: conic-gradient(#ef4444 0% 20%, rgba(255,255,255,0.2) 20% 100%);
}

/* Card and button hover effects */
.progress-card.xsmall-card {
  border: none !important;
  border-radius: 16px !important;
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}
.skill-item-mobile:hover {
  transform: scale(1.05);
  transition: transform 0.2s ease;
}
.progress-card.xsmall-card button:hover {
  background: rgba(255,255,255,0.3) !important;
  transform: translateY(-1px);
  transition: all 0.2s ease;
}

.min-w-220 { min-width: 220px; }
.subject-title-lg { font-size: 1.5rem; font-weight: 700; }
.subject-title-mobile { color: #000; font-weight: 700; font-size: 1.25rem; }
.subject-status-mobile { background: rgba(251,15,15,0.2); color: #000; padding: 2px 6px; border-radius: 8px; font-size: 0.6rem; }
.subject-label-mobile { color: rgba(255,255,255,0.8); font-size: 0.9rem; }
.subject-progress-mobile { color: #000; font-weight: 600; font-size: 1.1rem; }
.skill-name-mobile { font-size: 0.6rem; color: #212529;; }
.subject-last-activity-mobile { font-size: 0.65rem; color: #64748b; }
.subject-btn-mobile {
  font-size: 0.8rem;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.3);
  color: white;
  border-radius: 20px;
  backdrop-filter: blur(10px);
  font-weight: 600;
  padding: 8px 16px;
}
.xsmall-bar { background: rgba(255,255,255,0.2); height: 6px; border-radius: 3px; }
.list-disc { list-style: disc; }

@media (min-width: 768px) {
  .overview-cards.d-md-flex {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 25px !important;
    width: 100%;
  }
  .overview-card {
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
  }
}

.overview-card {
  min-height: 180px;
}

/* Make the profile card bigger on mobile */
@media (max-width: 767.98px) {
    .mobile-container .profile-card-mobile {
        min-height: 220px;
        font-size: 1.2rem;
        padding: 2rem 1rem;
    }
}

  .overall-card {
    background: linear-gradient(135deg, var(--homepage-card-color-1), var(--homepage-card-color-2));
    color: #fff;
    border-radius: 30px;
    padding: 20px;
    position: relative;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .overall-card h1 {
    font-size: 25px;
    font-weight: bold;
    margin: 0;
    text-align: end;
  }
  
  .overall-card p {
    font-size: 15px;
    margin: 0;
    position: absolute;
    bottom: 20px;
    left: 20px;
  }


.hide-survey-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.hide-survey-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;     /* Firefox */
}

.learning-header-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  border: 1px solid #e2e8f0;
  overflow: hidden;
  position: relative;
}

.header-gradient {
  height: 4px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.header-content {
  padding: 24px;
  text-align: center;
}

.header-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1a202c;
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}

.header-subtitle {
  color: #718096;
  margin-bottom: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

.modern-alert {
  border: none;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fef5e7;
  border-left: 4px solid #f6ad55;
}


.alert-content strong {
  display: block;
  color: #c05621;
  margin-bottom: 4px;
}

.alert-content p {
  color: #744210;
  font-size: 0.9rem;
}

.modern-close {
  background: none;
  border: none;
  font-size: 1.2rem;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.modern-close:hover {
  opacity: 1;
}


.subject-card-modern {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  border: 1px solid #e2e8f0;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
  width: 95%;
  height: 100%;
  display: flex;
  flex-direction: column;
  right:11px;
}

.subject-card-modern:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.subject-header-modern {
  padding: 20px 20px 16px;
  position: relative;
}

.subject-name-modern {
  font-size: 1.2rem;
  font-weight: 600;
  color: #1a202c;
  margin: 0;
  flex-grow: 1;
  padding-right: 12px;
}

.subject-progress-badge {
  background: #f7fafc;
  color: #4a5568;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid #e2e8f0;
}


.status-badge-modern {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-badge-modern.needs-attention {
  background: #fed7d7;
  color: #c53030;
}

.status-badge-modern.on-track {
  background: #c6f6d5;
  color: #38a169;
}

.status-badge-modern.completed {
  background: #bee3f8;
  color: #3182ce;
}

.skills-performance-grid {
  grid-template-columns: repeat(auto-fit, minmax(75px, 1fr));
  gap: 5px;
  padding: 0 20px 20px;
  margin: 0 -1px;
}

.skill-performance-item {
  text-align: center;
  padding: 12px 8px;
  background: white;
  border-radius: 12px;
  transition: all 0.3s ease;
  border: 1px solid #e2e8f0;
  width: 90px;
}

.skill-performance-item:hover {
  background: #edf2f7;
  transform: translateY(-1px);
}


.skill-progress-circle-modern {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 0 auto;
  position: relative;
  background: conic-gradient(
    var(--skill-color) 0deg calc(var(--progress) * 3.6deg),
    #e2e8f0 calc(var(--progress) * 3.6deg) 360deg
  );
  padding: 3px;
}

.skill-progress-inner {
  width: 100%;
  height: 100%;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.skill-percentage {
  font-size: 0.75rem;
  font-weight: 600;
  color: #4a5568;
}

.skill-label-modern {
  font-size: 0.75rem;
  color: #718096;
  font-weight: 500;
  line-height: 1.2;
}

.subject-action-section {
  padding: 0 20px 20px;
  margin-top: auto;
}

.start-learning-btn-modern {
  width: 100%;
  background: var(--button-gradient);
  color: white;
  border: none;
  padding: 14px 20px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.start-learning-btn-modern:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.start-learning-btn-modern:active {
  transform: translateY(0);
}

.btn-arrow {
  font-size: 1rem;
  transition: transform 0.3s ease;
}

.start-learning-btn-modern:hover .btn-arrow {
  transform: translateX(2px);
}

/* Skill-specific colors */
.skill-performance-item:nth-child(1) .skill-progress-circle-modern { --skill-color: #48bb78; }
.skill-performance-item:nth-child(2) .skill-progress-circle-modern { --skill-color: #4299e1; }
.skill-performance-item:nth-child(3) .skill-progress-circle-modern { --skill-color: #ed8936; }
.skill-performance-item:nth-child(4) .skill-progress-circle-modern { --skill-color: #9f7aea; }
.skill-performance-item:nth-child(5) .skill-progress-circle-modern { --skill-color: #38b2ac; }

/* Responsive improvements */
@media (max-width: 576px) {
  .skills-performance-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
  
  .subject-name-modern {
    font-size: 1.1rem;
  }
  
  .header-title {
    font-size: 1.3rem;
  }
}

  .progress-section {
      background: linear-gradient(135deg, #e1e0f5 0%, #e1e0f5 100%);
      border: 1px solid #0ea5e9;
      border-radius: 16px;
      padding: 24px;
      margin-bottom: 32px;

  }
  .progress-label {
      font-size: 16px;
      font-weight: 600;
      color: #0c4a6e;
      margin-bottom: 12px;
  }

.subject-chip {
  background: #fff;
  color: #333;
  border-radius: 999px;
  padding: 0.4rem 1.1rem;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  border: 1px solid #e0e0e0;
}

.subject-chip.active {
  background-color: #b090f9;
  color: #fff;
  font-weight: 500;
}

.card-top-strip {
  height: 6px; /* or 4px if you prefer thinner */
  width: 100%;
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}

.navigation {
  background: white;
  padding: 16px;
  margin: 16px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
        
.term-selector {
  display: flex;
  background: #f8f9fa;
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.term-btn {
  flex: 1;
  min-width: 80px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  background: transparent;
  color: #666;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.term-btn.active {
  background: #667eea;
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.weeks-container {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  padding-bottom: 8px;
  scroll-behavior: smooth;
  scrollbar-width: thin; /* For Firefox */
}

.weeks-container::-webkit-scrollbar {
  height: 6px;
}
.weeks-container::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}
.weeks-container::-webkit-scrollbar-track {
  background: transparent;
}

/* week button styling you already have */
.week-btn {
  padding: 6px 8px;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  background: white;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  transition: all 0.3s ease;
  color: #333;
  position: relative;
  overflow: hidden;
  width: 100px; /* Adjust width as needed */
  flex: 0 0 auto; /* Prevent shrinking and wrapping */
}

.week-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
}

.week-btn:hover::before {
  left: 100%;
}

.week-btn:hover {
  border-color: #667eea;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.15);
}

.week-btn.active {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-color: #667eea;
  color: white;
  transform: translateY(1px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

.card {
  border-radius: 1rem;
  
}

.add-learner-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
  padding: 0.6rem 1rem;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
}

.learners-grid {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.learners-grid .learner-card {
  background: #fff;
  backdrop-filter: blur(20px);
  border-radius: 12px;
  padding: 1.5rem;
  border: 2px solid rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.learners-grid .learner-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.grade-badge {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.subject-tag {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 0.375rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
  transition: all 0.3s ease;
  cursor: pointer;
}

.add-subscription-btn {
  background: #f8f9fa;
  border: 1px solid rgba(102, 126, 234, 0.3);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  color: #667eea;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  white-space: nowrap;
}


.add-subscription-btn:hover {
  transform: translateY(-1px);
}


.search-limit {
  max-width: 400px;
}

@media (max-width: 768px) {
  .learner-subject { 
    max-width: 95%;
    
  }
}

.list-group-item.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.list-group-item.completed {
  border-left: 4px solid #28a745;
}

.list-group-item.locked {
  border-left: 4px solid #6c757d;
}

.topic-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 20px;
    border: 2px solid transparent;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}


.topic-card.completed {
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
    border-color: #10b981;
}

.topic-card.completed:hover {
    box-shadow: 0 20px 40px rgba(16, 185, 129, 0.2);
}

.topic-card.in-progress {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-color: #f59e0b;
}

.topic-card.in-progress:hover {
    box-shadow: 0 20px 40px rgba(245, 158, 11, 0.2);
}

.topic-card.not-started {
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  border-color: #6b7280;
}
.topic-card .topic-title {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    flex-grow: 1;
    line-height: 1.3;
}

.status-badge {
    padding: 6px 16px;
    border-radius: 25px;
    font-size: 12px;
    font-weight: 700;
    margin-left: 16px;
    white-space: nowrap;
    backdrop-filter: blur(10px);
}

.status-badge.completed {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    color: white;
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
}

.status-badge.in-progress {
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
  color: white;
  box-shadow: 0 4px 8px rgba(245, 158, 11, 0.3);
}

.status-badge.not-started {
  background: linear-gradient(135deg, #6b7280 0%, #9ca3af 100%);
  color: white;
  box-shadow: 0 4px 8px rgba(107, 114, 128, 0.3);
}

.topic-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: white;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.stat-icon.notes { 
  background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%); 
}
.stat-icon.quizzes { 
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); 
}
.stat-icon.assessments { 
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%); 
}


.topic-progress-fill.completed { 
  background: linear-gradient(90deg, #10b981 0%, #34d399 100%); 
}
.topic-progress-fill.in-progress { 
  background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%); 
}
.topic-progress-fill.not-started { 
  background: linear-gradient(90deg, #9ca3af 0%, #d1d5db 100%); 
}

.topic-progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: shimmer 2s infinite;
}

.topic-progress-text {
  font-size: 14px;
  font-weight: 700;
  color: #374151;
  min-width: 40px;
}
.topic-progress {
  display: flex;
  align-items: center;
  gap: 16px;
}

.topic-progress-bar {
  flex-grow: 1;
  background: #e5e7eb;
  border-radius: 8px;
  height: 8px;
  overflow: hidden;
}

.topic-progress-fill {
  height: 100%;
  border-radius: 8px;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.topic-progress-fill.completed { 
  background: linear-gradient(90deg, #10b981 0%, #34d399 100%); 
}
.topic-progress-fill.in-progress { 
  background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%); 
}
.topic-progress-fill.not-started { 
  background: linear-gradient(90deg, #9ca3af 0%, #d1d5db 100%); 
}

.topic-progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: shimmer 2s infinite;
}

.topic-progress-text {
  font-size: 14px;
  font-weight: 700;
  color: #374151;
  min-width: 40px;
}

.custom-image-size {
    width: 100%;
    height: 280px;
    object-fit: contain;
    background: #f8f9fa;
    display: block;
}

.cart_image {
    width: 100%;
    height: 200px; /* set a fixed height */
    object-fit: cover;
    background: #f8f9fa;
    display: block;
}


.step-card {
    background-color: #f9f9f9;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.step-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #3498db;
    color: #fff;
}
.submitted-overlay {
  position: relative;
}

.submitted-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 128, 0, 0.2); /* green overlay with 20% opacity */
  pointer-events: none;
}

/* User CRUD Vue */

.user-card {
  transition: all 0.3s ease;
  border: 1px solid #e0e0e0;
}

.user-card:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

.status-badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
}

.tab-button {
  border: none;
  background: none;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  transition: all 0.3s ease;
}

.tab-button.active {
  background-color: #007bff;
  color: white;
}

.tab-button:hover:not(.active) {
  background-color: #f8f9fa;
}

.assignment-section {
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

.assignment-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem;
  border: 1px solid #e9ecef;
  border-radius: 0.25rem;
  margin-bottom: 0.5rem;
}

.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.search-box {
  border-radius: 20px;
  border: 1px solid #ddd;
  padding: 0.5rem 1rem;
  width: 300px;
}

.search-box:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

/* Scrollable user types container */
.user-types-container {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  background: #f8f9fa;
  position: relative;
}

.user-types-container::-webkit-scrollbar {
  width: 8px;
}

.user-types-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.user-types-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.user-types-container::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

.user-types-scroll-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(transparent, #f8f9fa);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.user-types-container.has-scroll .user-types-scroll-indicator {
  opacity: 1;
}

.user-type-item {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #e9ecef;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.user-type-item:hover {
  background-color: #e9ecef;
}

.user-type-item.active {
  background-color: #007bff;
  color: white;
}

.user-type-item:last-child {
  border-bottom: none;
}

/* DataTable customizations */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  margin-bottom: 1rem;
}

.dataTables_wrapper .dataTables_info {
  margin-top: 1rem;
}

.dataTables_wrapper .dataTables_paginate {
  margin-top: 1rem;
}

.action-buttons {
  white-space: nowrap;
  position: relative;
}

.action-buttons .btn {
  margin-right: 0.25rem;
}

.action-buttons .btn:last-child {
  margin-right: 0;
}

/* Fix dropdown overflow issues */
.action-buttons .dropdown {
  position: relative;
}

.action-buttons .dropdown-menu {
  position: absolute !important;
  z-index: 9999 !important;
  overflow: visible !important;
}

/* Ensure dropdown can overflow outside table boundaries */
.dataTables_wrapper {
  overflow: visible !important;
}

/* Force dropdown to be visible even when parent has overflow hidden */
.dropdown-menu.show {
  position: absolute !important;
  z-index: 9999 !important;
  overflow: visible !important;
}

/* Additional positioning for dropup */
.dropup .dropdown-menu {
  margin-bottom: 0.125rem;
}

/* Enhanced dropdown overflow fixes for all table scenarios */
.table-responsive {
  overflow: visible !important;
}

.table {
  overflow: visible !important;
}

/* Ensure all dropdowns in tables have proper z-index */
.table .dropdown-menu,
.table-responsive .dropdown-menu,
.dataTables_wrapper .dropdown-menu {
  z-index: 99999 !important;
  position: absolute !important;
  overflow: visible !important;
}

/* Fix for Bootstrap DataTables */
.dataTables_wrapper .dataTables_scroll {
  overflow: visible !important;
}

.dataTables_wrapper .dataTables_scrollBody {
  overflow: visible !important;
}

/* Ensure dropdowns appear above modals and other overlays */
.dropdown-menu {
  z-index: 99999 !important;
}

/* Fix for specific table containers */
.table-container,
.table-wrapper,
.data-table-container {
  overflow: visible !important;
}

/* Ensure action buttons container doesn't clip dropdowns */
.action-buttons {
  overflow: visible !important;
  position: relative;
}

/* Force dropdown positioning for edge cases */
.dropdown-menu.show,
.dropdown-menu.dropdown-menu-end.show {
  position: absolute !important;
  z-index: 99999 !important;
  overflow: visible !important;
  transform: none !important;
  min-width: 22rem;
}

.menu-items .app-name {
  font-size: 0.65rem !important; /* Smallest readable */
  line-height: 1.1;
  padding: 0;
  margin: 0;
}
.menu-items .app-item {
  padding: 0.25rem 0 !important;
}


/* Additional fix for dropup menus */
.dropup .dropdown-menu.show {
  margin-bottom: 0.125rem;
  z-index: 99999 !important;
}

/* Force larger sizing for notification bell dropdown panels */
.notification-bell-panel.dropdown-menu,
.notification-bell-panel.dropdown-menu.show {
  width: min(45rem, calc(100vw - 3rem)) !important;
  max-width: min(45rem, calc(100vw - 3rem)) !important;
  min-width: min(30rem, calc(100vw - 3rem)) !important;
  left: auto !important;
  right: 0 !important;
  margin-left: 0.9rem !important;
  max-height: 70vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  white-space: normal !important;
  border-radius: 0.85rem !important;
}

/* Notification message inner container */
.notification-bell-panel .collapse > .text-muted {
  border-radius: 0.65rem;
}

/* Make the notification bell pop while dropdown is open (no panel color changes). */
.notification-bell-toggle[aria-expanded="true"] {
  position: relative;
  z-index: 100001;
  background-color: rgba(255, 255, 255, 0.14) !important;
  border-radius: 0.5rem;
}

.notification-bell-toggle[aria-expanded="true"] > .bi-bell-fill {
  filter: brightness(1.55) drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
}

.notification-bell-toggle[aria-expanded="true"] > .badge {
  position: relative;
  z-index: 100002;
}

.menu-items {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0.5rem !important;
}
.menu-items .col {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
}

/* Hierarchical tree styling for edit modal */
.hierarchical-tree {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  padding: 1rem;
  background: #f8f9fa;
}

.tree-node {
  margin-bottom: 0.5rem;
}

.tree-node-header {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.tree-node-header:hover {
  background-color: #f8f9fa;
}

.tree-node-content {
  margin-left: 1.5rem;
  margin-top: 0.5rem;
  padding-left: 1rem;
  border-left: 2px solid #dee2e6;
}

.level-name, .class-name {
  font-weight: 600;
  margin-left: 0.5rem;
  flex-grow: 1;
}

.level-actions, .class-actions {
  display: flex;
  gap: 0.25rem;
}

.class-teacher-checkbox {
  display: flex;
  align-items: center;
  margin-left: 1rem;
}

.subject-item {
  padding: 0.25rem 0;
}

.add-class-section {
  margin-top: 1rem;
  padding: 0.5rem;
  background: #e9ecef;
  border-radius: 0.25rem;
}

.assignment-summary {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  padding: 1rem;
  background: #fff;
}

.summary-level {
  margin-bottom: 1rem;
}

.summary-class {
  margin-left: 1rem;
  margin-bottom: 0.5rem;
}

.summary-subject {
  margin-left: 1rem;
  color: #6c757d;
}

.class-indent, .subject-indent {
  font-size: 0.9rem;
}

/* Choices.js customizations */
.choices {
  margin-bottom: 0;
}

.choices__inner {
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  min-height: 38px;
  padding: 0.375rem 0.75rem;
}

.choices__input {
  background-color: transparent;
  border: 0;
  padding: 0;
  margin: 0;
}

.choices__input:focus {
  outline: none;
  box-shadow: none;
}

.choices__list--dropdown {
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.choices__list--dropdown .choices__item--selectable {
  padding: 0.5rem 0.75rem;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: #007bff;
  color: white;
}

.choices__list--multiple .choices__item {
  background-color: #007bff;
  border: 1px solid #007bff;
  border-radius: 0.25rem;
  color: white;
  margin: 2px;
  padding: 0.25rem 0.5rem;
}

.choices__list--multiple .choices__item .choices__button {
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  color: white;
  margin-left: 0.5rem;
  padding-left: 0.5rem;
}

.choices__list--multiple .choices__item .choices__button:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.choices__placeholder {
  color: #6c757d;
  opacity: 1;
}

/* Hierarchical Tree Styles */
.hierarchical-tree {
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  max-height: 400px;
  overflow-y: auto;
  background-color: #f8f9fa;
}

.tree-node {
  border-bottom: 1px solid #dee2e6;
}

.tree-node:last-child {
  border-bottom: none;
}

.tree-node-header {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  background-color: #e9ecef;
  cursor: pointer;
  transition: background-color 0.2s;
  font-weight: 600;
}

.tree-node-header:hover {
  background-color: #dee2e6;
}

.tree-node-header i {
  margin-right: 0.5rem;
  color: #6c757d;
  transition: transform 0.2s;
}

.tree-node-header .level-name {
  flex: 1;
  color: #495057;
}

.level-actions {
  display: flex;
  gap: 0.25rem;
}

.tree-node-content {
  background-color: #ffffff;
  border-top: 1px solid #dee2e6;
}

.sub-node {
  border-bottom: 1px solid #f1f3f4;
}

.sub-node:last-child {
  border-bottom: none;
}

.sub-node-header {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem 0.5rem 2rem;
  background-color: #f8f9fa;
  cursor: pointer;
  transition: background-color 0.2s;
  font-weight: 500;
}

.sub-node-header:hover {
  background-color: #e9ecef;
}

.sub-node-header i {
  margin-right: 0.5rem;
  color: #6c757d;
  transition: transform 0.2s;
}

.sub-node-header .class-name {
  flex: 1;
  color: #495057;
}

.class-actions {
  display: flex;
  gap: 0.25rem;
}

.sub-node-content {
  background-color: #ffffff;
  border-top: 1px solid #f1f3f4;
  padding: 0.5rem 1rem 0.5rem 3rem;
}

.subject-item {
  padding: 0.25rem 0;
}

.subject-item .form-check {
  margin-bottom: 0;
}

.subject-item .form-check-label {
  color: #495057;
  font-weight: normal;
}

.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
}

/* Assignment Summary Styles */
.assignment-summary {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  padding: 1rem;
  max-height: 200px;
  overflow-y: auto;
}

.summary-level {
  margin-bottom: 0.75rem;
}

.summary-level:last-child {
  margin-bottom: 0;
}

.summary-level strong {
  color: #495057;
  font-size: 0.9rem;
}

.summary-class {
  margin-left: 1rem;
  margin-top: 0.25rem;
}

.class-indent {
  color: #6c757d;
  font-size: 0.85rem;
}

.summary-subject {
  margin-left: 1rem;
  margin-top: 0.125rem;
}

.subject-indent {
  color: #6c757d;
  font-size: 0.8rem;
}

.add-class-section {
  margin-top: 1rem;
  padding: 0.75rem;
  background-color: #f8f9fa;
  border: 1px dashed #dee2e6;
  border-radius: 0.375rem;
}

.add-class-section .input-group {
  max-width: 400px;
}

.add-class-section .form-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.add-class-section .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* end of hierarchical tree styles */

.bg-light-success {
  background-color: #d4edda !important;
}

.bg-light-danger {
  background-color: #f8d7da !important;
}

.payment-method-card {
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.payment-method-card:hover {
  border-color: #007bff;
  box-shadow: 0 2px 8px rgba(0,123,255,0.2);
}

.payment-method-card.selected {
  border-color: #007bff;
  background-color: #f8f9ff;
}

.payment-method-card.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.gateway-logo {
  width: 60px;
  height: 40px;
  object-fit: contain;
  margin-right: 15px;
}

.order-summary {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
}

.loading-overlay {
  position: fixed;
  top: 0;c
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.dot {
    width: 10px;
    height: 10px;
    display: inline-block;
}

.student-info-card {
  background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
  border-radius: 16px;
  padding: 25px 35px;
  margin-bottom: 30px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  border: 1px solid rgba(102, 126, 234, 0.1);
  position: relative;
  overflow: hidden;
}

.student-info-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #667eea, #764ba2, #f093fb);
}

.student-info-card::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(102, 126, 234, 0.03) 0%, transparent 70%);
  pointer-events: none;
}


.table-loader{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.6);
  z-index:5;
}
.table-responsive{ position:relative; }
.table-loader .spinner-border{ width:2.5rem; height:2.5rem; }

/* spacing + consistent control widths */
.filters .form-select { min-width: 220px; }
@media (max-width: 768px) { .filters .form-select { min-width: 160px; } }

/* keep the button on one line */
.text-nowrap { white-space: nowrap; }

/* Keep widths consistent for the Status column */
.table-transactions { table-layout: fixed; }
.table-transactions .col-status { width: 8rem; }          /* adjust as you like */
.table-transactions .status-badge { display: block; width: 100%; }

/* (optional) a bit narrower on phones */
@media (max-width: 576px) {
    .table-transactions .col-status { width: 6.5rem; }
}


/* Payment Gateway css */

.gateway-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.gateway-card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.status-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
}

.status-active {
    background-color: #d4edda;
    color: #155724;
}

.status-tested {
    background-color: #fff3cd;
    color: #856404;
}

.status-inactive {
    background-color: #f8d7da;
    color: #721c24;
}

.btn-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-sm {
    padding: 4px 8px;
    font-size: 12px;
}

.modal-content {
    border-radius: 8px;
}

.form-group {
    margin-bottom: 15px;
}

.alert {
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 15px;
}

.loading {
    opacity: 0.6;
    pointer-events: none;
}

.dataTables_filter {
    margin: 0.25rem 0.5rem 0.5rem 0;
}
.dataTables_filter input.form-control.form-control-sm {
    min-width: 220px;
}

.fab-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 3.5rem;
  height: 3.5rem;
  z-index: 1000;
}
 
.fab-main {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: linear-gradient(90deg, black, #f00);
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px var(--color-red-shadow);
  z-index: 1001;
}
 
.fab-main:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 30px #f449;
}
 
.fab-options {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Allow clicks to pass through to underlying elements when closed */
}
 
.fab-options.show {
  pointer-events: all; /* Re-enable clicks when menu is open */
}
 
.fab-option {
  position: absolute;
  width: 40px;
  height: 40px;
  backdrop-filter: blur(10px);
  border: 1px solid var(--color-white-transparent-2);
  transition: all 0.3s ease;
  opacity: 0;
  transform: scale(0);
}
 
.fab-options.show .fab-option {
  opacity: 1;
  transform: scale(1);
}
 
.draggable {
  position: fixed !important;
  user-select: none;
  touch-action: none;
  cursor: move;
}
 
/* FAB individual colors */
.fab-option:nth-child(1) {
  background: var(--color-blue-light);
  border-color: var(--color-blue-dark);
  top: -55px;
  left: 7px;
  transition-delay: 0.1s;
}
 
.fab-option:nth-child(1):hover {
  background: var(--color-blue-dark);
  box-shadow: 0 4px 15px var(--color-blue-dark);
  transform: scale(1.1);
}
 
.fab-option:nth-child(2) {
  background: var(--color-red-shadow);
  border-color: var(--color-red-shadow);
  top: -27px;
  left: 57px;
  transition-delay: 0.15s;
}
 
.fab-option:nth-child(2):hover {
  background: var(--color-red-dark);
  box-shadow: 0 4px 15px var(--color-red-dark);
  transform: scale(1.1);
}
 
.fab-option:nth-child(3) {
  background: var(--color-green-light);
  border-color: var(--color-green-dark);
  top: -25px;
  left: -40px;
  transition-delay: 0.2s;
}
 
.fab-option:nth-child(3):hover {
  background: var(--color-green-dark);
  box-shadow: 0 4px 15px var(--color-green-dark);
  transform: scale(1.1);
}
 
.fab-option:nth-child(4) {
  background: var(--color-blue-variant-light);
  border-color: var(--color-blue-variant-dark);
  top: 29px;
  left: -38px;
  transition-delay: 0.25s;
}
 
.fab-option:nth-child(4):hover {
  background: var(--color-blue-variant-dark);
  box-shadow: 0 4px 15px var(--color-blue-variant-dark);
  transform: scale(1.1);
}
 
.fab-option:nth-child(5) {
  background: var(--color-lime-light);
  border-color: var(--color-lime-dark);
  top: 53px;
  left: 9px;
  transition-delay: 0.3s;
}
 
.fab-option:nth-child(5):hover {
  background: var(--color-lime-dark);
  box-shadow: 0 4px 15px var(--color-lime-dark);
  transform: scale(1.1);
}
 
.fab-option:nth-child(6) {
  background: var(--color-pink-light);
  border-color: var(--color-pink-dark);
  top: 25px;
  left: 57px;
  transition-delay: 0.35s;
}
 
.fab-option:nth-child(6):hover {
  background: var(--color-pink-dark);
  box-shadow: 0 4px 15px var(--color-pink-dark);
  transform: scale(1.1);
}

.fab-corner {
  position: fixed !important;
  transition: all 0.3s ease;
  margin: 0 !important;
}
 
.fab-corner.top-left {
  top: 0 !important;
  left: 0 !important;
  transform: scale(0.8);
}
 
.fab-corner.top-right {
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  transform: scale(0.8);
}
 
.fab-corner.bottom-left {
  bottom: 0 !important;
  left: 0 !important;
  top: auto !important;
  transform: scale(0.8);
}
 
.fab-corner.bottom-right {
  inset: auto 0 0 auto !important;
  transform: scale(0.8);
}
 
.fab-minimized {
  transform: scale(0.8);
}
 
.learner-header-section {
    /* background: linear-gradient(135deg, #1a365d 0%, #2c5282 100%); */
    background: var(--primary-color);
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 24px;
    color: #fff;
    box-shadow: 0 4px 20px rgba(26, 54, 93, 0.3);
  }

  .learner-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }

  .learner-info-block {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .learner-avatar-block {
    width: 72px;
    height: 72px;
    background: linear-gradient(45deg, #4fd1c7, #81e6d9);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    color: #1a365d;
    box-shadow: 0 4px 15px rgba(79, 209, 199, 0.3);
  }

  .learner-details-block h2 {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #fff;
  }

  .learner-meta-block {
    display: flex;
    gap: 16px;
    font-size: 14px;
    opacity: 0.9;
    flex-wrap: wrap;
  }

  .learner-meta-badge {
    background: rgba(255, 255, 255, 0.15);
    padding: 4px 12px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    color: #fff;
    font-weight: 400;
  }

  .learner-header-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }

  .learner-action-btn {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .learner-action-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
    color: #fff;
  }

  .activity-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 1.5rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    background-color: var(--primary-color);
  }

  .sidebar-panel {
      display: flex;
      flex-direction: column;
      gap: 20px;
  }

  .sidebar-tall-card {
    min-height: 260px;
  }

  /* Add breathing room below the navbar on mobile for learner header */
  @media (max-width: 767.98px) {
    .chiefluthuli-learner-profile .learner-header-section {
      margin-top: 1.25rem !important;
    }
  }

  .sidebar-tall-alert {
    min-height: 110px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .activity-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    font-size: 16px;
    color: white;
    }

  .activity-icon.subjects { background: linear-gradient(45deg, #667eea, #764ba2); }

  .activity-icon.classes { background: linear-gradient(45deg, #f093fb, #f5576c); }

  .activity-icon.assessments { background: linear-gradient(45deg, #4facfe, #00f2fe); }

  .activity-icon.documents { background: linear-gradient(45deg, #43e97b, #38f9d7); }

  .activity-icon.media { background: linear-gradient(45deg, #fa709a, #fee140); }

  .activity-icon.certificates { background: linear-gradient(45deg, #a8edea, #fed6e3); }

  .activity-icon.actions { background: linear-gradient(45deg, #ff9a9e, #fecfef); }

  .activity-icon.reviews { background: linear-gradient(45deg, #ffecd2, #fcb69f); }

/* Intern learner profile (internCharts): make buttons, badges, and text extra small on mobile */
@media (max-width: 767.98px) {
  .chiefluthuli-learner-profile {
    font-size: 0.8rem;
  }

  .chiefluthuli-learner-profile .learner-header-section {
    padding: 16px;
  }

  .chiefluthuli-learner-profile .learner-avatar-block {
    width: 56px;
    height: 56px;
    font-size: 1.4rem;
  }

  .chiefluthuli-learner-profile .learner-details-block h2 {
    font-size: 1.1rem;
  }

  .chiefluthuli-learner-profile .learner-meta-badge {
    font-size: 0.65rem;
    padding: 2px 8px;
  }

  .chiefluthuli-learner-profile .btn,
  .chiefluthuli-learner-profile .learner-action-btn {
    font-size: 0.65rem;
    padding: 0.2rem 0.45rem;
  }

  .chiefluthuli-learner-profile .badge {
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
  }

  .chiefluthuli-learner-profile .panel-title,
  .chiefluthuli-learner-profile .data-value,
  .chiefluthuli-learner-profile .data-label,
  .chiefluthuli-learner-profile .activity-icon,
  .chiefluthuli-learner-profile .list-group-item,
  .chiefluthuli-learner-profile .small,
  .chiefluthuli-learner-profile .text-xs,
  .chiefluthuli-learner-profile .text-xxs {
    font-size: 0.75rem;
  }
}

.data-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1px;
    background: #e2e8f0;
    margin: 24px 0;
    border-radius: 8px;
    overflow: hidden;
}

.data-cell {
    background: transparent;
    padding: 20px 0 12px 0;
    text-align: center;
    transition: background 0.2s ease;
}

.data-cell:hover {
    background: #f7fafc;
}

.data-value {
    font-size: 2rem;
    font-weight: 700;
    color: #2b6cb0;
    display: block;
    margin-bottom: 4px;
}

.data-label {
    font-size: 12px;
    color: #718096;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

@media (max-width: 768px) {
    .data-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.content-panel {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.panel-header {
    background: #f7fafc;
    padding: 20px 24px;
    border-bottom: 1px solid #e2e8f0;
}

.panel-title {
    font-size: 18px;
    font-weight: 600;
    color: #2d3748;
    display: flex;
    align-items: center;
    gap: 10px;
}

.list-group-item.activity-hover:hover {
    background-color: #f0f4fa !important;
    cursor: pointer;
    transition: background 0.2s;
}

.edit-specs-popper {
    position: absolute;
    z-index: 9999;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    min-width: 320px;
    max-width: 95vw;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    border-radius: 8px;
    border: 1px solid #ddd;
    padding: 16px;
    overflow-y: auto;
    max-height: 80vh;
}

.bg-job-role-icon{
  color: var(--white) !important;
  background: var(--btn-color) !important;
}

.program-tree-card {
    position: relative;
    margin-bottom: 1.5rem;
}

.program-tree-card .card-body {
    padding: 0.75rem 1rem;
}

/* Tree children layout – no connector lines, simple stacked cards */
.tree-children-container {
    margin-left: 1.5rem;
    padding-left: 0;
    position: relative;
}

.tree-children-container::before,
.tree-child::before {
    display: none;
}

.tree-child {
    position: relative;
    margin-bottom: 1rem;
}

.tree-child:last-child {
    margin-bottom: 0;
}

/* Programme cards: top/right actions as text links, bottom row as compact pills */
.program-tree-card .program-card-top-actions .program-card-link {
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
    font-weight: 600;
    font-size: 0.8rem;
    color: #111827;
    cursor: pointer;
}

.program-tree-card .program-card-top-actions .program-card-link .fa {
    margin-right: 0.25rem;
}

.program-tree-card .program-card-top-actions .program-card-link.program-card-delete-btn {
    color: #111827;
}

.program-tree-card .program-card-top-actions .program-card-link:hover {
    text-decoration: underline;
}

.program-tree-card .program-card-top-actions .program-card-separator {
    color: #6b7280;
    font-weight: 500;
}

.program-tree-card .program-card-bottom-actions {
    margin-top: 0.5rem;
}

.program-tree-card .program-card-bottom-actions .btn {
    border-radius: 6px;
    padding: 0.25rem 1.1rem;
    font-weight: 600;
}

.program-tree-card .program-sub-count {
    font-weight: 600;
    color: #111827;
}

/* Ensure the last horizontal line aligns perfectly with the end of the vertical line */
.tree-child:last-child::before {
    top: auto;
    bottom: 2.4rem; /* This aligns the horizontal line with the end of the vertical line */
}

.scrollable-visible {
  overflow-y: scroll !important;
  scrollbar-width: thick; /* For Firefox */
  background: #f8f9fa; /* Light background for contrast */
}

/* For Webkit browsers (Chrome, Edge, Safari) */
.scrollable-visible::-webkit-scrollbar {
  width: 10px;
  background: transparent;
}

.scrollable-visible::-webkit-scrollbar-thumb {
  background: #b0b0b0;
  border-radius: 5px;
}


.scrollable-visible::-webkit-scrollbar-track {
  background:transparent;
}
.max-height-250 {
  max-height: 250px;
  overflow-y: auto;
  scrollbar-width: auto;
}

.max-height-300 {
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: auto;
}
.max-height-600 {
  max-height: 600px;
  overflow-y: auto;
  scrollbar-width: auto;
}
.max-width-100 {
  max-width: 100px;
  overflow-y: auto;
  scrollbar-width: auto;
}

.max-height-100 {
  max-height: 100px;
  overflow-y: auto;
  scrollbar-width: auto;
}
.max-height-400 {
  max-height: 400px;
  overflow-y: auto;
  scrollbar-width: auto;
}

/* Course view assessment table */
#view_assessment_popup table#assessment_table {
  width: 100% !important;
}

#view_assessment_popup .assessment-table-container {
  width: 100%;
}

#view_assessment_popup .assessment-table-container .row {
  margin-left: 0;
  margin-right: 0;
  flex-wrap: wrap;
}

#view_assessment_popup .assessment-table-container .row > div {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

#view_assessment_popup .assessment-table-container .dataTables_scrollHead,
#view_assessment_popup .assessment-table-container .dataTables_scrollBody {
  margin-bottom: 0;
}

#view_assessment_popup .assessment-table-container .dataTables_scrollBody {
  max-height: 60vh;
  overflow-x: auto;
}

#view_assessment_popup .assessment-table-container .dataTables_length label,
#view_assessment_popup .assessment-table-container .dataTables_filter label {
  width: 100%;
}

#view_assessment_popup .assessment-table-container .dataTables_filter input {
  width: 100%;
}

/* Mobile responsiveness fix for Cart and Profile/Menu button overlap */
@media (max-width: 768px) {
    /* Reduce cart button spacing aggressively */
    .navbar-nav .cart-btn,
    button.cart-btn {
        margin-left: 0.25rem !important;
        margin-right: 0.25rem !important;
        padding-left: 0.3rem !important;
        padding-right: 0.3rem !important;
        font-size: 0.7rem !important;
        white-space: nowrap !important;
    }

    /* Hide "Cart" text on mobile, show only icon and badge */
    .navbar-nav .cart-btn {
        font-size: 0 !important;
        line-height: 0 !important;
    }

    .navbar-nav .cart-btn .bx-cart {
        font-size: 1.1rem !important;
        line-height: normal !important;
        margin-right: 0 !important;
    }

    .navbar-nav .cart-btn .badge {
        font-size: 0.65rem !important;
        line-height: normal !important;
        padding: 0.1rem 0.25rem !important;
        margin-left: 0.25rem !important;
    }

    /* Reduce profile button spacing */
    .navbar-nav .profile-button {
        margin-left: 0.25rem !important;
        margin-right: 0.25rem !important;
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }

    /* Control navbar list item spacing */
    .navbar-nav li.d-flex {
        gap: 0.15rem !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    /* Reduce icon and text sizes */
    .navbar-nav .role-icon-sm {
        font-size: 0.85rem !important;
        margin-right: 0.25rem !important;
    }

    .navbar-nav .role_name_sm {
        font-size: 0.7rem !important;
        white-space: nowrap !important;
    }

    /* Reduce sidebar menu icon spacing */
    .navbar-nav .sidebar-icon-menu {
        margin-left: 0.25rem !important;
        font-size: 1.2rem !important;
    }
}

/* Extra small devices - even more aggressive spacing */
@media (max-width: 480px) {
    .navbar-nav .cart-btn,
    button.cart-btn {
        margin-left: 0.15rem !important;
        margin-right: 0.15rem !important;
        padding-left: 0.2rem !important;
        padding-right: 0.2rem !important;
        min-width: auto !important;
    }

    .navbar-nav .cart-btn .bx-cart {
        font-size: 1rem !important;
        margin-right: 0.1rem !important;
    }

    .navbar-nav .cart-btn .badge {
        font-size: 0.6rem !important;
        padding: 0.05rem 0.2rem !important;
        margin-left: 0.1rem !important;
    }

    .navbar-nav .profile-button {
        margin-left: 0.15rem !important;
        margin-right: 0.15rem !important;
        padding-left: 0.15rem !important;
        padding-right: 0.15rem !important;
    }

    .navbar-nav li.d-flex {
        gap: 0.1rem !important;
    }

    .navbar-nav .role-icon-sm {
        font-size: 0.75rem !important;
        margin-right: 0.15rem !important;
    }

    .navbar-nav .role_name_sm {
        font-size: 0.65rem !important;
    }

    .navbar-nav .sidebar-icon-menu {
        margin-left: 0.15rem !important;
        font-size: 1rem !important;
    }
}


.note-content p {
  width: 100% !important;
  margin-bottom: 1.5rem;
  border-collapse: collapse;
}

.flashcard-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,4%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0;
}

.flashcard-card p {
  margin: 0;
  line-height: 1.55;
  font-size: 15px;
}

.note-content img {
  max-width: 35%;    /* shrink width on desktop */
  height: auto;      /* keep aspect ratio */
  display: block;
  margin: 1.5rem auto;  /* center + spacing */
  border-radius: 12px;  /* optional: rounded corners */
  object-fit: cover;

}

.flashcard-card p {
  white-space: pre-wrap;
}

.flashcard-card p strong {
  display: inline-block;
  min-width: 120px;
  color: #374151;
}

/* On mobile, let them use full width */
@media (max-width: 768px) {
  .note-content img {
    max-width: 100%;
  }
}

.flashcard-line {
  display: inline;
  padding: 1px 2px;
  border-radius: 3px;
}


.flashcard-line-active{
  background-color: #e0e0e0;;
  box-shadow: 0 0 0 2px rgb(125 124 120 / 60%);
  transition: background-color 0.05s linear;
}

/* ---------------- Mobile learner homepage (new UI) ---------------- */
@media (max-width: 767.98px) {
  .mobile-learner-margins {
    margin-right: 1.5rem !important;
    margin-left: 0.5rem !important;
  }

  /* Select product mobile view – keep cards centered with equal side spacing */
  .select-product-page .mobile-learner-margins {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }

  @media (max-width: 767.98px) {
    .select-product-page .mobile-learner-margins {
        margin-right: 4rem !important;
        margin-left: 1rem !important;
    }
}
  .mobile-learner-home {
    /* Extra bottom padding so at least two
       course cards are fully visible above
       the fixed bottom navigation on mobile */
    padding: 0 0 14rem 0;
  }

  .mobile-learner-hero {
    /* Match the primary gradient look used on the learner
       homepage hero so all learner flows feel consistent,
       but keep the header compact and flat-edged on mobile */
    background: var(--primary-color);
    background-image: linear-gradient(
      135deg,
      var(--primary-color),
      var(--navbar-bg-color, var(--primary-color))
    );
    padding: 0.55rem 0.75rem 0.7rem;
    margin-top: -0.8rem;
    margin-bottom: 0;
    color: #fff;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
    position: relative;
  }

  .mobile-learner-hero-header .mobile-hello {
    font-size: 0.8rem;
    opacity: 0.85;
  }

  .mobile-program-name {
    font-size: 1.1rem;
    font-weight: 700;
  }

  .mobile-program-subtitle {
    font-size: 0.75rem;
    opacity: 0.9;
  }

  .mobile-learner-metrics {
    margin-top: 0.35rem;
  }

  .mobile-metric-card {
    /* Use the client's primary brand color for metric tiles */
    background: var(--primary-color);
    border-radius: 8px;
    padding: 0.2rem 0.3rem;
    text-align: center;
  }

  .mobile-metric-label {
    font-size: 0.6rem;
    opacity: 0.9;
  }

  .mobile-metric-value {
    font-size: 0.85rem;
    font-weight: 700;
  }

  .mobile-metric-value-small {
    font-size: 0.75rem;
  }

  .mobile-learner-section {
    padding: 0.75rem 1rem 0;
  }

  .mobile-section-title {
    font-size: 0.95rem;
    font-weight: 600;
  }

  .mobile-see-all-link {
    font-size: 0.8rem;
    color: var(--primary-color);
  }

  .mobile-course-card {
    background: #fff;
    border-radius: 16px;
    padding: 0.6rem 0.8rem;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
  }

  /* Reduce vertical gap so at least two cards
     are fully visible above the bottom nav */
  .mobile-course-list .mobile-course-card.mb-3 {
    margin-bottom: 0.6rem !important;
  }

  .mobile-course-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    color: #ffffff;
  }

  .mobile-course-tag {
    font-size: 0.65rem;
    color: #64748b;
  }

  .mobile-course-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #0f172a;
  }

  .mobile-course-meta {
    font-size: 0.75rem;
    color: #6b7280;
  }

  .mobile-view-btn {
    border-radius: 999px;
    font-size: 0.8rem;
    padding: 0.35rem 0.7rem;
    background-color: var(--navbar-bg-color);
    border-color: var(--navbar-bg-color);
  }

  .mobile-empty-title {
    font-size: 0.95rem;
    font-weight: 600;
  }

  .mobile-empty-subtitle {
    font-size: 0.8rem;
    color: #6b7280;
  }

  /* Generic mobile landing wrapper */
  .mobile-landing-page {
    background-color: var(--bg-color);
    padding: 0 0 5rem 0; /* leave room for bottom nav */
  }

  /* Select product mobile layout: fix container padding so cards are centered */
  .select-product-page .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Give the select product mobile container extra height
     so all product cards are visible above the bottom nav */
  .select-product-page .mobile-container.container-suits {
    padding-bottom: 8rem;
  }

  /* Select product mobile cards */
  .select-product-page .select-product-mobile-shell {
    margin-top: 1.25rem;
  }

  .select-product-page .mobile-product-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    /* mimic a custom mx-3 just for this list */
    margin-right: -1rem !important;
    margin-left: 1rem !important;
  }

  .select-product-page .mobile-product-card {
    background: var(--primary-color);
    border-radius: 16px;
    padding: 0.7rem 0.9rem;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
    color: #ffffff;
  }

  .select-product-page .mobile-product-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #ffffff;
  }

  .select-product-page .mobile-product-subtitle {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.85);
  }

  .select-product-page .mobile-product-icon img.card-icon {
    width: 32px;
    height: 32px;
  }
}

/* Mobile curriculum_content list styling */
@media (max-width: 767.98px) {
  .curriculum-content-page .chapters-heading {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9ca3af;
  }

  .curriculum-content-page .mobile-curriculum-back .mobile-back-btn {
    background: #eef2ff;
    border: none;
    color: #111827;
    font-size: 0.8rem;
  }

  .curriculum-content-page .mobile-curriculum-list {
    margin-top: 0.5rem;
  }

  .curriculum-content-page .mobile-curriculum-item {
    background: #e2e8f0;
    border-radius: 18px;
    padding: 0.85rem 0.9rem;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
  }

  .curriculum-content-page .mobile-status-badge {
    font-size: 0.7rem;
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
  }

  .curriculum-content-page .mobile-status-complete {
    background: #dcfce7;
    color: #15803d;
  }

  /* Position mobile back button similarly to learner hero back button */
  .curriculum-content-page .mobile-curriculum-back {
    margin-top: 0.25rem;
  }
}

/* Academic Years page: custom mobile container padding */
@media (max-width: 767.98px) {
  .academic-years-mobile-shell {
    padding-left: 0.5rem !important;
    padding-right: 4.5rem !important;
  }
}

/* Teacher program subjects (All Subjects list) – custom mobile container padding */
@media (max-width: 767.98px) {
  .teacher-program-subjects-shell {
    padding-left: 0.5rem !important;
    padding-right: 4.5rem !important;
  }
}

@media (max-width: 767.98px) {
  .mobile-learner-hero .mobile-back-btn {
    background: #eef2ff;
    border: none;
    color: #111827;
    font-size: 0.65rem;
    padding: 0.15rem 0.45rem;
  }

  /* Compact, unified top navbar on mobile (profile-menu) */
  .profile-menu.navbar-content-md {
    background-image: linear-gradient(
      135deg,
      var(--profile-menu-bg-color, var(--primary-color)),
      var(--navbar-bg-color, var(--primary-color))
    );
    padding: 0.35rem 0.75rem;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.25);
  }

  .profile-menu.navbar-content-md .container-fluid {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .profile-menu.navbar-content-md .container-fluid .row {
    align-items: center;
  }

  .profile-menu.navbar-content-md .launcher-icon {
    font-size: 1.1rem;
  }

  .profile-menu.navbar-content-md .btn-link {
    color: var(--profile-menu-text-color, #fff) !important;
  }

  .profile-menu.navbar-content-md .navigation__group .icon i,
  .profile-menu.navbar-content-md .navigation__group .icon svg {
    font-size: 1.1rem;
    color: var(--profile-menu-text-color, #fff) !important;
    fill: var(--profile-menu-text-color, #fff) !important;
  }

  /* For learner and curriculum-content mobile layouts, hide the secondary
     breadcrumb navbar so we only have a single compact top bar. */
  body.learner-homepage-layout .navbar.top-34,
  body.curriculum-content-layout .navbar.top-34 {
    display: none !important;
  }

  /* On learner mobile pages, hide the extra mobile waffle button
     from the platform header to avoid duplicate grid icons. */
  body.learner-homepage-layout #mobile_waffle_btn {
    display: none !important;
  }

  /* On curriculum content mobile view, pull the hero
     right up under the profile-menu with no extra gap */
  .curriculum-content-page.card-margin-top {
    margin-top: 0 !important;
  }

  .curriculum-content-page .mobile-learner-hero {
    margin-top: 0;
  }

  .mobile-learner-hero .mobile-back-wrapper {
    position: absolute;
    top: 0.4rem;
    right: 0.6rem;
    margin: 0;
  }

  .mobile-learner-hero-header {
    padding-right: 3rem;
  }

}

/* -------------------- Teacher Subject Curriculum Mobile Tweaks -------------------- */
@media (max-width: 767.98px) {
  /* Make all buttons on the teacher subject curriculum page extra small on mobile,
     including "View Content" and "View Assessments" actions. */
  .teacher-subject-curriculum-page .btn,
  .teacher-subject-curriculum-page .btn-sm {
    font-size: 0.7rem !important;
    padding: 0.2rem 0.35rem !important;
  }
}

/* -------------------- Learner Assessments Mobile Tweaks -------------------- */
@media (min-width: 320px) and (max-width: 767.98px) {
  /* Only affect the learner assessments page on small screens */
  .learner-assessments-page {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  .learner-assessments-page .tab-content {
    padding-right: 0.75rem !important;
    margin-right: 0 !important;
  }
  .learner-assessments-page .table-responsive {
    overflow-x: auto !important;
    padding-right: 0.5rem;
    -webkit-overflow-scrolling: touch;
  }
  /* Let the table be wider than the viewport so
     columns stay readable and can scroll sideways */
  .learner-assessments-page table.data-table {
    min-width: 720px;
  }
  /* Ensure DataTables scroll container can also scroll horizontally */
  .learner-assessments-page .dataTables_wrapper,
  .learner-assessments-page .dataTables_wrapper .dataTables_scroll,
  .learner-assessments-page .dataTables_wrapper .dataTables_scrollBody {
    overflow-x: auto !important;
  }
}

/* Learner Assessments: align "entries" and "search" in a row and shrink text */
.learner-assessments-page .dataTables_wrapper .row:first-child {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
}

.learner-assessments-page .dataTables_wrapper .row:first-child > div {
  flex: 0 0 50%;
  max-width: 50%;
}

.learner-assessments-page .dataTables_wrapper .dataTables_length,
.learner-assessments-page .dataTables_wrapper .dataTables_filter {
  float: none !important;
  margin: 0 !important;
  font-size: 0.8rem;
}

.learner-assessments-page .dataTables_wrapper .dataTables_length label,
.learner-assessments-page .dataTables_wrapper .dataTables_filter label {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: inherit;
  margin-bottom: 0;
}

.learner-assessments-page .dataTables_wrapper .dataTables_filter input[type="search"] {
  font-size: inherit;
  max-width: 170px;
}

/* ------------ Global mobile body + learner hero tweaks on mobile ------------ */
@media (max-width: 767.98px) {
  body {
    background-color: var(--bg-color);
    margin: -5px;
    overflow-x: hidden;
  }

  /* Fine-tune the learner mobile hero width independently of the profile-menu */
  .mobile-learner-hero {
    width: 100%;
    max-width: 100%;
    margin-left: 7px;
    margin-right: 9px;
  }

  .mian-course-section {
    margin-top: -16.75rem !important;
  }

  /* Override width for the profile-menu header that uses w-100 */
  .profile-menu.navbar-content-md.w-100 {
    width: 379px !important;
  }
}

/* Written assessment page: center the assessment card and give it height */
@media (min-width: 768px) {
  .written-assessment-page {
    min-height: calc(100vh - 140px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

@media (max-width: 767.98px) {
  .written-assessment-page {
    min-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-bottom: 2.5rem;
  }

  .written-assessment-page .card {
    min-height: 60vh;
  }
}

.ld-carousel-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem;
}

.ld-forms-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  gap: 1rem;
  padding-top: 1rem;
}

.ld-form-slide {
  min-width: 100%;
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.ld-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ld-nav-prev { left: -20px; }

.ld-nav-next { right: -20px; }

/* Stepper titles */
.ld-steps {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  overflow-x: auto;
  padding: 0.5rem 2.5rem;
  border-bottom: 2px solid #e9ecef;
  width: calc(100% - 120px);
}

.ld-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  flex: 0 0 auto;
  padding: 0 0.5rem;
}

.ld-step-num {
  background: #e9ecef;
  color: #333;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.ld-step-title {
  font-size: 0.85rem;
  color: #666;
  white-space: nowrap;
  margin-top: 4px;
}

/* Active step styling using parent data attribute */
.ld-forms-carousel[data-active-index="0"] ~ .ld-steps .ld-step[data-index="0"],

.ld-forms-carousel[data-active-index="1"] ~ .ld-steps .ld-step[data-index="1"],

.ld-forms-carousel[data-active-index="2"] ~ .ld-steps .ld-step[data-index="2"],

.ld-forms-carousel[data-active-index="3"] ~ .ld-steps .ld-step[data-index="3"],

.ld-forms-carousel[data-active-index="4"] ~ .ld-steps .ld-step[data-index="4"] {
  /* fallback in case parent-sibling selectors are not supported in some environments */
}

/* Simpler approach: highlight based on attribute on wrapper (applied via JS in template) */
.ld-carousel-wrapper[data-active-index] .ld-step { opacity: 0.6; }

.ld-carousel-wrapper[data-active-index] .ld-step.ld-active,

.ld-carousel-wrapper .ld-step:hover { opacity: 1; }

/* Active step styles (when JS applies ld-active) */
.ld-step.ld-active .ld-step-num { background: #0d6efd; color: #fff; }

.ld-step.ld-active .ld-step-title { color: #0d6efd; font-weight: 700; }

/* Wide modal helper */
.ld-modal-wide { max-width: 1100px; }

/* My Learners page: constrain learner table to card body and allow scrolling */
.my-learners-card .my-learners-table-wrapper {
  max-height: calc(100vh - 260px);
  overflow-y: auto;
  overflow-x: auto;
  width: 100%;
}

/* Accordion button arrow styling - make arrow white when collapsed */
.accordion-button.collapsed::after {
  filter: brightness(0) invert(1) !important;
}

/* ========================================
   Payment Requirements Popup (cart.js)
   ======================================== */
.payment-popup-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    margin: 0 auto 20px;
}

.payment-popup-title {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 700;
    color: #1a1a2e;
}

.payment-popup-subtitle {
    color: #6c757d;
    font-size: 13px;
    margin: 0 0 24px;
}

.payment-popup-cards {
    max-width: 380px;
    margin: 0 auto;
}

.payment-popup-card {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    margin-bottom: 10px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.payment-popup-card-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
}

.payment-popup-card-icon--fields {
    background: var(--primary-color);
}

.payment-popup-card-icon--docs {
    background: var(--secondary-color);
}

.payment-popup-card-content {
    flex: 1;
}

.payment-popup-card-label {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a2e;
}

.payment-popup-card-desc {
    font-size: 12px;
    color: #999;
    margin-top: 2px;
}

.payment-popup-card-status {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-popup-card-status--fields {
    background: #fee2e2;
}

.payment-popup-card-status--docs {
    background: #fef3c7;
}

.payment-popup-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--primary-color);
    color: #fff;
    text-decoration: none;
    padding: 12px 32px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: all 0.25s ease;
    letter-spacing: 0.3px;
}

.payment-popup-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    color: #fff;
    text-decoration: none;
}

.payment-popup-dismiss {
    background: var(--secondary-color) !important;
    color: #fff !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    border: none !important;
}

.payment-popup-dismiss:hover {
    opacity: 0.9;
}

.swal2-close:focus {
    box-shadow: none !important;
}

.payment-popup-close {
    color: var(--primary-color) !important;
    font-size: 28px !important;
}

.payment-popup-close:hover {
    color: var(--secondary-color) !important;
}

.notification-fade-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 90;
}

.notification-fade-overlay.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.notification-dropdown-open .notification-fade-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.notification-dropdown-open .notification-fade-overlay.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body:has(.dropdown-menu[aria-labelledby="notificationDropdown"].show) .notification-fade-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.notification-bell-wrap {
    position: relative;
    z-index: 1060;
}

#notificationDropdown {
    position: relative;
    z-index: 1061;
}

.dropdown-menu[aria-labelledby="notificationDropdown"] {
    z-index: 1062 !important;
}

.dropdown-menu[aria-labelledby="notificationDropdown"] .notification-title,
.dropdown-menu[aria-labelledby="notificationDropdown"] .notification-title span,
.dropdown-menu[aria-labelledby="notificationDropdown"] .notification-title:hover,
.dropdown-menu[aria-labelledby="notificationDropdown"] .notification-title:focus {
    color: #1f2937 !important;
}

.notification-bell-panel {
    overflow: hidden;
    border: 0;
    background: #f5f5f8;
}

.notification-panel-header {
    padding: 1rem 1rem 0.75rem;
    background: var(--primary-color);
    color: #fff;
    border-bottom-left-radius: 0.9rem;
    border-bottom-right-radius: 0.9rem;
    border-top-right-radius: 0.9rem;
    border-top-left-radius: 0.9rem;
    margin-top: 2px;
    width: 99.5%;
}

.notification-panel-title {
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1;
}

.notification-count-pill {
    background: rgba(255, 255, 255, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.34);
    color: #fff;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.35rem 0.8rem;
}

.notification-close-btn {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 0.7rem;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.notification-close-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.3);
}

.notification-tab-nav {
    border: 0;
    gap: 0.5rem;
}

.notification-tab-nav .nav-link {
    border: 0;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 700;
    border-radius: 0.75rem 0.75rem 0 0;
    padding: 0.5rem 0.85rem;
}

.notification-tab-nav .nav-link.active {
    background: #fff;
    color: var(--primary-color);
}

.notification-panel-body {
    max-height: 360px;
    overflow-y: auto;
}

.notification-day-separator {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    font-weight: 700;
    color: #8f96a8;
    padding: 0.75rem 1rem 0.25rem;
}

.notification-card {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e4e6ee;
}

.notification-card-icon {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.9rem;
    background: #e8dcff;
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notification-card-content {
    flex: 1;
    min-width: 0;
}
.notification-title[aria-expanded="true"] + .notification-preview-row {
    display: none !important;
}
.notification-time-dark {
    color: #111827 !important;
    font-weight: 400;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 0.72rem;
}

.notification-card-title {
    font-size: 0.78rem;
    line-height: 1.25;
    color: #111827 !important;
}

.notification-card-preview {
    color: #111827 !important;
    font-size: 0.74rem;
    margin-top: 0.15rem;
    flex: 1;
    min-width: 0;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notification-panel-body .notification-time {
    color: #111827 !important;
    opacity: 1 !important;
}

.notification-panel-body .notification-card-preview,
.notification-panel-body .notification-time-dark {
    color: #111827 !important;
    opacity: 1 !important;
}

.notification-chip {
    background: rgba(1, 72, 107, 0.12);
    color: var(--primary-color);
    font-size: 0.62rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.18rem 0.55rem;
}

.notification-time {
    color: #8b94aa;
    font-size: 0.72rem;
}

.notification-full-message {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    color: #111827 !important;
    font-size: 0.72rem;
    line-height: 1.35;
}

.notification-panel-footer {
    display: flex;
    gap: 0.75rem;
    padding: 0.8rem 1rem 1rem;
    background: #f6f6fb;
    border-top: 1px solid #eceef5;
}

.notification-footer-btn {
    flex: 1;
    border-radius: 0.8rem;
    font-size: 0.8rem;
    font-weight: 700;
}

.notification-view-all-btn {
    flex: 1;
    border-radius: 0.8rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    background: var(--primary-color);
}

.notification-view-all-btn:hover {
    color: #fff;
    opacity: 0.95;
}

/* Center modal header for Action Required modal */

.modal-header-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-bottom: none;
  padding-bottom: 0;
}

.modal-header-center .modal-title {
  margin-top: 8px;
  font-weight: 600;
  font-size: 1.5rem;
  text-align: center;
}

.modal-header-center .btn-close {
  position: absolute;
  right: 16px;
  top: 16px;
}

.modal-header-center .payment-popup-icon {
  margin-bottom: 0;
}

/* Modal and cart.html inline style replacements (shared for all clients) */

.mt-24 {
  margin-top: 24px !important;
}

.modal-icon-red {
  color: #e60000 !important;
  font-size: 32px !important;
}

.fs-18 {
  font-size: 18px !important;
}

.checkbox-lg {
  width: 24px !important;
  height: 24px !important;
}

.fs-14 {
  font-size: 14px !important;
}

.text-danger-link {
  color: #e60000 !important;
  text-decoration: underline !important;
}

  .app-programme-cards-list #programme-sidebar-accordion > .nav-item.active,
  .app-home-list #home-admin-fixed-sidebar > .nav-item.active,
  .app-home-list #home-default-sidebar > .nav-item.active,
  .app-home-list .home-root-link.active,
  .app-course-list #learner-course-sidebar > .nav-item.active,
  .app-course-list #teacher-course-sidebar > .nav-item.active {
      background: var(--primary-color) !important; /* main button color */
      color: #fff !important;
  }

  .app-programme-cards-list #programme-sidebar-accordion .collapse .nav-item.active {
      background-color: var(--navbar-bg-color) !important;
  }

  .app-programme-cards-list #programme-sidebar-accordion .collapse .nav-item.active {
  background: var(--navbar-bg-color) !important;
  color: #000 !important;
  }

  .bg-outline-primary {
    background: var(--primary-color);
  }

  .bg-outline-primary-darker {
    /* Darker variant of primary: use secondary if available, else primary */
    background-color: var(--secondary-color, var(--primary-color));
  }

  /* Programme cards – vertical icon sidebar */
  .programme-icons-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 0;
  }

  .programme-icons-sidebar .nav-item {
    border: none;
    background: transparent;
  }

  .programme-icon-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #000;
    margin-bottom: 1rem;
  }

  /* Ensure icon above label when used inside the main sidebar container */
  .orcaa-sidebar-container .programme-icons-sidebar .programme-icon-link {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }

  .programme-icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 30px;
    border-radius: 50%;
    border:transparent;
    margin-bottom: 0.5rem;
  }

  .programme-icon-circle i {
    font-size: 24px;
  }

  .programme-icon-pill {
    min-width: 104px;
    padding: 0.35rem 0.75rem;
    border-radius: 14px;
    background-color: #fff;
    color: #000;
    border: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0.35rem;
  }

  .programme-icon-pill i {
    font-size: 24px;
    margin-bottom: 0.1rem;
  }

  .programme-icon-pill-label {
    font-size: 13px;
    font-weight: 600;
  }

  .programme-icon-label {
    font-size: 9px;
    font-weight: 400;
  }

  .tables-margin-top {
    margin-top: -11.5rem !important;
}

  .programme-icons-sidebar .nav-item.active .programme-icon-circle {
    color: #fff;
  }

  .programme-icons-sidebar .nav-item.active .programme-icon-circle i {
    color: #fff;
  }

  .programme-icons-sidebar .nav-item.active .programme-icon-label {
    color: #fff;
  }

  .programme-icons-sidebar .nav-item.active .programme-icon-pill {
    background-color: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
  }

  .programme-icons-sidebar .nav-item.active .programme-icon-pill i {
    color: #fff;
  }

  /* On desktop, nudge the Home icon down slightly so it aligns visually
     with the rest of the sidebar icons */
  @media (min-width: 768px) {
    .orcaa-sidebar-container .programme-icons-sidebar .home-root-link.card-margin-top-home {
      margin-top: 1rem !important; /* roughly mt-3 */
    }
  }

  /* Programme cards – learners/teams tabs */
  .programme-tabs .nav-link {
    border-radius: 0;
    color: #000;
    background-color: transparent;
    border-bottom: 2px solid transparent;
    padding-left: 0;
    padding-right: 1rem;
  }

  .programme-tabs .nav-link:hover {
    color: var(--primary-color);
    background-color: transparent;
  }

  .programme-tabs .nav-link.active {
    color: var(--primary-color);
    background-color: transparent;
    border-bottom-color: var(--primary-color);
  }

  /* Programme page header spacing overrides */
  .programme-header-offset {
    margin-top: 2rem !important;
    margin-right: -0.5rem !important;
  }

  /* Programme details – learners table mobile tweaks */
  @media (max-width: 767.98px) {
    .programme-learners-table-wrapper {
      width: 100%;
      overflow-x: auto;
    }

    .programme-learners-table th,
    .programme-learners-table td {
      white-space: nowrap;
      font-size: 0.7rem;
      padding: 0.35rem 0.5rem;
    }

    .programme-learners-table thead {
      position: sticky;
      top: 0;
      z-index: 1;
    }
  }

  .bg-outline-secondary {
    background: var(--badge-color)
  }

  .card-margin-top {
    margin-top: -3.5rem !important;
  }

  .card-margin-top-home {
    margin-top: -1.5rem !important;
  }

  /* On mobile, reduce the vertical offset for card-margin-top and card-margin-top-home */
  @media (max-width: 767.98px) {
    .card-margin-top,
    .card-margin-top-home {
      margin-top: 0.5rem !important;
    }
  }

  /* Learner profile (internCharts) needs extra space below navbar */
  @media (max-width: 767.98px) {
    .chiefluthuli-learner-profile.card-margin-top {
      margin-top: 1.5rem !important;
    }
  }

  @media (min-width: 768px) {
    .chiefluthuli-learner-profile.card-margin-top {
      margin-top: 1rem !important;
    }
  }

  .table-light {
    --bs-table-bg:var(--primary-color);
    --bs-table-striped-bg: #ecedee;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #dfe0e1;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #e5e6e7;
    --bs-table-hover-color: #000;
    color: #000;
    border-color: #dfe0e1;
}

.academic-page .grade-header {
  border: none;
  outline: none;
  background-color: #f9fafb;
  color: #111827;
  border-radius: 14px;
  padding: 0.85rem 1.25rem;
  min-height: 35px;
  font-weight: 600;
  font-size: 14px;
}

.academic-page .grade-header i {
  font-size: 16px;
}

.academic-page .grade-header[aria-expanded="true"] {
  background-color: var(--navbar-bg-color);
  color: #111827;
}
.modal-header i.fa-times[data-bs-dismiss="modal"] {
  cursor: pointer;
}

/* Parent My Children – mobile column width tweak for cards */
@media (max-width: 767.98px) {
  body.parent-my-children-layout .card-gap .col-12 {
    flex: 0 0 auto;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

.mobile-nav-width {
    width: 102% !important;
}