/* inter fonts start */
@font-face {
    font-family: 'Inter';
    src: url('../font/inter-fonts/Inter-Regular.woff2') format('woff2'),
        url('../font/inter-fonts/Inter-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../font/inter-fonts/Inter-SemiBold.woff2') format('woff2'),
        url('../font/inter-fonts/Inter-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../font/inter-fonts/Inter-Thin.woff2') format('woff2'),
        url('../font/inter-fonts/Inter-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../font/inter-fonts/Inter-ExtraBold.woff2') format('woff2'),
        url('../font/inter-fonts/Inter-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../font/inter-fonts/Inter-Medium.woff2') format('woff2'),
        url('../font/inter-fonts/Inter-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../font/inter-fonts/Inter-ExtraLight.woff2') format('woff2'),
        url('../font/inter-fonts/Inter-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../font/inter-fonts/Inter-Light.woff2') format('woff2'),
        url('../font/inter-fonts/Inter-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../font/inter-fonts/Inter-Black.woff2') format('woff2'),
        url('../font/inter-fonts/Inter-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../font/inter-fonts/Inter-Bold.woff2') format('woff2'),
        url('../font/inter-fonts/Inter-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/*  intar fonts end*/
/* ===========================================================
   IGNOU Dashboard — Sidebar / Header / Layout
   =========================================================== */
   :root {
   	--header-height: 70px;
   	--sidebar-width: 240px;
   	--sidebar-width-collapsed: 78px;
   	--sidebar-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

/*   	--ignou-blue: #0048B0;*/
	--ignou-blue-design: #0048B0;
	--ignou-blue: #01507c;
   	--ignou-blue-dark: #003a8c;
   	--accent-blue: #1f77d8;
   	--text-muted: #5d657b;
   	--border-soft: #cfe3f7;
   	--surface: #ffffff;
	--lightigbg: #dceaff;
/*	--lightigbg: #ebf3ff;*/
	--success: #0b9d10;
	--danger:#d52c2c;
	--warning: #e59152;
	--primary: #1524F4;
	--border: #c9d8ec;
	--hue: 223;
		--bg: hsl(var(--hue),10%,90%);
		--fg: hsl(var(--hue),10%,10%);
		--primary: hsl(var(--hue),90%,55%);
		--primary-l: hsl(var(--hue),90%,65%);
		--primary-d: hsl(var(--hue),90%,45%);
		--white: hsl(var(--hue),10%,100%);
		--white-d: hsl(var(--hue),10%,45%);
		--ink:#12233b;          
		--ink-soft:#3a4f6d;
		--paper:#f6f3ea;        
		--line:#e3ddcc;         
		--accent:#e5643c;       
		--accent-ink:#a53f1f;
		--teal:#0f6d8f;         
		--teal-wash:#eaf3f6;
   }

   html {
   	scroll-behavior: smooth;
   }

   body {
   	font-family: "Inter", "Segoe UI", sans-serif;
   	font-weight: normal;
   	font-style: normal;
   	color: var(--text-muted);
   	overflow-x: hidden;
   	background: #f4f8fc;
   }

   * {
   	margin: 0;
   	padding: 0;
   	box-sizing: border-box;
   }

   a {
   	text-decoration: none;
   }
   
   a.disabled,button.disabled{
	pointer-events: none;
	opacity: .65;
   }

   /* ===========================================================
      HEADER — STICKY (not fixed)
      =========================================================== */
   .header {
   	position: sticky;
   	top: 0;
   	left: 0;
   	right: 0;
   	display: flex;
   	flex-wrap: wrap;
   	align-items: center;
   	justify-content: space-between;
/*   	background: #fff;*/
background: linear-gradient(182deg, #01507c, #1e385f);
   	box-shadow: 0px 4px 4px 0px rgba(103, 174, 233, 0.7);
   	padding: 10px 18px;
   	gap: 12px;
   	z-index: 1040;
   	min-height: var(--header-height);
   }

   .header-left {
   	display: flex;
   	align-items: center;
   	gap: 12px;
   	flex-shrink: 0;
   	order: 1;
   }

   .header-logo {
   	width: 178px;
   	height: 53px;
/*   	background: var(--ignou-blue);*/
background: none;
   	border-radius: 5px;
   	padding: 5px 12px 5px 5px;
   	flex-shrink: 0;
   }

   .header-img {
   	width: 100%;
   	height: 100%;
   	object-fit: contain;
   }

   .header-center {
   	flex: 1 1 auto;
   	display: flex;
   	justify-content: center;
   	min-width: 280px;
   	order: 2;
   }

   .search-wrap {
   	position: relative;
   	width: 100%;
   	max-width: 420px;
   	min-width: 240px;
   	display: flex;
   	align-items: center;
   	flex-wrap: wrap;
   }

   .search-input {
   	border-radius: 8px;
   	border: 1px solid #d8e3f0;
   	padding: 9px 70px 9px 40px;
   	background: #fff;
   	font-size: 14px;
   	width: 100%;
   	height: 40px;
   }

   .search-input:focus {
   	box-shadow: 0 0 0 0.2rem rgba(0, 72, 176, 0.15);
   	border-color: var(--ignou-blue);
   	outline: none;
   }

   .search-icon-btn {
   	position: absolute;
   	left: 12px;
   	top: 40%;
   	transform: translateY(-50%);
   	background: transparent;
   	border: none;
   	color: var(--ignou-blue);
   	font-size: 14px;
   	display: flex;
   	align-items: center;
   	cursor: pointer;
   	padding: 0;
   	width: 24px;
   	height: 24px;
   }

   .search-icon-btn:hover {
   	color: var(--ignou-blue-dark);
   }

   .filter-icon-btn {
   	position: absolute;
   	right: 6px;
   	top: 40%;
   	transform: translateY(-50%);
   	background: var(--ignou-blue);
   	border: none;
   	color: #fff;
   	width: 30px;
   	height: 30px;
   	border-radius: 6px;
   	display: flex;
   	align-items: center;
   	justify-content: center;
   	font-size: 13px;
   	cursor: pointer;
   	transition: background 0.2s ease;
   }

   .filter-icon-btn:hover {
   	background: var(--ignou-blue-dark);
   }

   .header-right {
   	display: flex;
   	align-items: center;
   	gap: 10px;
   	flex-shrink: 0;
   	order: 3;
   }
  

   /* ---- shared menu shell ---- */
   .ig-notif-dropdown .dropdown-menu,
   .ig-profile-dropdown .dropdown-menu {
       border: 1px solid var(--border-soft);
       border-radius: 14px;
       padding: 0;
       margin-top: 10px;
       background: #fff;
       box-shadow: 0 10px 30px rgba(1, 80, 124, 0.18);
       overflow: hidden;
/*       animation: igDdFade 0.18s ease;*/
   }

   @keyframes igDdFade {
       from { opacity: 0; transform: translateY(-6px); }
       to   { opacity: 1; transform: translateY(0); }
   }

   /* remove default bootstrap caret if any */
   .ig-notif-dropdown .dropdown-toggle::after,
   .ig-profile-dropdown .dropdown-toggle::after { display: none; }

  
   .ig-notif-dropdown { position: relative; }

   /* bell unread count bubble */
   .ig-notif-toggle { position: relative; }
   .ig-notif-count {
       position: absolute;
       top: -3px;
       right: -3px;
       min-width: 18px;
       height: 18px;
       padding: 0 5px;
       border-radius: 9px;
       background: var(--danger);
       color: #fff;
       font-size: 10px;
       font-weight: 700;
       line-height: 18px;
       text-align: center;
       border: 2px solid #fff;
   }

   .ig-notif-menu { width: 340px; max-width: 92vw; }

   /* header strip (shared look) */
   .ig-notif-menu .ig-dd-head {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 13px 16px;
       background: linear-gradient(182deg, #01507c, #1e385f);
   }
   .ig-dd-head-title {
       color: #fff;
       font-weight: 600;
       font-size: 14.5px;
   }
   .ig-dd-head-badge {
       background: rgba(255, 255, 255, 0.18);
       color: #fff;
       font-size: 11px;
       font-weight: 600;
       padding: 3px 9px;
       border-radius: 20px;
   }

   /* notification rows */
   .ig-notif-menu .ig-notif-item {
       display: flex;
       align-items: center;
       gap: 12px;
       padding: 12px 16px;
       white-space: normal;
       border-bottom: 1px solid #f0f4f9;
       transition: background 0.18s ease;
   }
   .ig-notif-menu .ig-notif-item:hover {
       background: #eef5fd;
   }
   .ig-notif-menu .ig-notif-item.is-unread {
       background: #f6faff;
   }

   .ig-notif-icon {
       flex-shrink: 0;
       width: 38px;
       height: 38px;
       border-radius: 10px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 15px;
   }
   .ig-ic-blue  { background: #e3f0ff; color: var(--ignou-blue); }
   .ig-ic-green { background: #e2f6e3; color: var(--success); }
   .ig-ic-amber { background: #fdf0e3; color: var(--warning); }

   .ig-notif-body {
       display: flex;
       flex-direction: column;
       gap: 2px;
       min-width: 0;
       flex: 1 1 auto;
   }
   .ig-notif-text {
       font-size: 13.5px;
       font-weight: 500;
       color: #2b3346;
       line-height: 1.3;
   }
   .ig-notif-time {
       font-size: 11.5px;
       color: var(--text-muted);
   }
   .ig-unread-dot {
       flex-shrink: 0;
       width: 8px;
       height: 8px;
       border-radius: 50%;
       background: var(--accent-blue);
   }

   /* footer (shared look) */
   .ig-notif-menu .ig-dd-foot {
       padding: 0;
       border-top: 1px solid #eef2f7;
   }
   .ig-dd-foot-link {
       display: block;
       text-align: center;
       padding: 12px;
       font-size: 13px;
       font-weight: 600;
       color: var(--ignou-blue);
       transition: background 0.18s ease;
   }
   .ig-dd-foot-link:hover {
       background: #eef5fd;
       color: var(--ignou-blue-dark);
   }

   /* ===========================================================
      PROFILE DROPDOWN
      =========================================================== */
   .ig-profile-menu { width: 260px; max-width: 90vw; }

   /* profile header card */
   .ig-profile-menu .ig-prof-head {
       display: flex;
       align-items: center;
       gap: 12px;
       padding: 16px;
       background: linear-gradient(182deg, #01507c, #1e385f);
   }
   .ig-prof-avatar {
       flex-shrink: 0;
       width: 44px;
       height: 44px;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.15);
       color: #fff;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 26px;
   }
   .ig-prof-meta {
       display: flex;
       flex-direction: column;
       min-width: 0;
   }
   .ig-prof-name {
       color: #fff;
       font-weight: 600;
       font-size: 14.5px;
       line-height: 1.3;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }
   .ig-prof-mail {
       color: rgba(255, 255, 255, 0.75);
       font-size: 12px;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }

   /* profile menu items */
   .ig-profile-menu .ig-prof-item {
       display: flex;
       align-items: center;
       gap: 11px;
       padding: 11px 16px;
       font-size: 14px;
       font-weight: 500;
       color: #41485c;
       transition: background 0.18s ease, color 0.18s ease;
   }
   .ig-profile-menu .ig-prof-item:hover {
       background: #eef5fd;
       color: var(--ignou-blue);
   }
   .ig-prof-ic {
       width: 18px;
       text-align: center;
       font-size: 14px;
       color: #8a94a8;
       transition: color 0.18s ease;
   }
   .ig-profile-menu .ig-prof-item:hover .ig-prof-ic {
       color: var(--ignou-blue);
   }

   .ig-prof-divider {
       margin: 4px 0;
       border-color: #eef2f7;
       opacity: 1;
   }

   /* logout accent */
   .ig-profile-menu .ig-prof-item.is-logout { color: var(--danger); }
   .ig-profile-menu .ig-prof-item.is-logout .ig-prof-ic { color: var(--danger); }
   .ig-profile-menu .ig-prof-item.is-logout:hover {
       background: #fdeaea;
       color: var(--danger);
   }
   .ig-profile-menu .ig-prof-item.is-logout:hover .ig-prof-ic { color: var(--danger); }

 

   .btn-icon-only {
   	width: 42px;
   	height: 42px;
   	border-radius: 50%;
   	border: 1px solid #e3edf8;
   	background: #fff;
   	color: var(--ignou-blue);
   	font-size: 17px;
   	display: flex;
   	align-items: center;
   	justify-content: center;
   	cursor: pointer;
   	transition: background 0.2s ease, color 0.2s ease;
   }

   .btn-icon-only:hover,
   .btn-icon-only:focus {
   	background: #eef5fd;
   	color: var(--ignou-blue-dark);
   	outline: none;
   }

   .btn-icon-only::after {
   	display: none !important;
   }

   /* hamburger toggle buttons */
   .sidebar-toggle-btn {
   	width: 40px;
   	height: 40px;
   	border-radius: 8px;
   	border: 1px solid #e3edf8;
   	background: #fff;
   	color: var(--ignou-blue);
   	font-size: 16px;
   	display: flex;
   	align-items: center;
   	justify-content: center;
   	flex-shrink: 0;
   	transition: background 0.2s ease, transform 0.2s ease;
   	cursor: pointer;
   }

   .sidebar-toggle-btn:hover {
   	background: #eef5fd;
   }

   .sidebar-toggle-mobile {
   	display: none;
   }

   /* ===========================================================
      SIDEBAR
      =========================================================== */
   .app-sidebar {
   	position: fixed;
   	top: var(--header-height);
   	left: 0;
   	bottom: 0;
   	width: var(--sidebar-width);
   	background: #fff;
   	border: 1px solid var(--border-soft);
   	border-radius: 0 16px 16px 0;
   	box-shadow: 2px 0 14px rgba(31, 119, 216, 0.06);
   	z-index: 1030;
   	transition: width var(--sidebar-transition), transform var(--sidebar-transition);
   	overflow: hidden;
	box-shadow: 2px 0px 12px 0px #70BFFF;
   }

   .sidebar-inner {
   	height: 100%;
   	display: flex;
   	flex-direction: column;
   	overflow-y: auto;
   	overflow-x: hidden;
   }

   .sidebar-head {
   	display: flex;
   	align-items: center;
   	justify-content: space-between;
   	padding: 16px 18px 10px 18px;
   	flex-shrink: 0;
   }

   .sidebar-head-title {
   	font-weight: 600;
   	font-size: 13px;
   	letter-spacing: 0.06em;
   	text-transform: uppercase;
   	color: #9aa6bf;
   	white-space: nowrap;
   	opacity: 1;
   	transition: opacity 0.2s ease;
   }

   .sidebar-toggle-desktop {
   	margin-left: auto;
   }

   .sidebar-nav {
   	padding: 6px 12px 18px 12px;
   	flex: 1 1 auto;
   }

   .nav-list {
   	list-style: none;
   	display: flex;
   	flex-direction: column;
   	gap: 6px;
   	padding: 0;
   	margin: 0;
   }

   .nav-item {
   	position: relative;
   }

   .nav-link {
   	display: flex;
   	align-items: center;
   	gap: 12px;
   	padding: 11px 12px;
   	border-radius: 10px;
   	color: #41485c;
   	font-weight: 500;
   	font-size: 14.5px;
   	white-space: nowrap;
   	transition: background 0.2s ease, color 0.2s ease;
   	cursor: pointer;
   }

   .nav-link:hover {
   	background: #eef5fd;
   	color: var(--ignou-blue);
   }

   .nav-link.active {
   	background: var(--ignou-blue);
   	color: #fff;
   }

   .nav-icon {
   	width: 22px;
   	height: 22px;
   	display: flex;
   	align-items: center;
   	justify-content: center;
   	font-size: 17px;
   	flex-shrink: 0;
   }

   .nav-text {
   	flex: 1 1 auto;
   	overflow: hidden;
   	text-overflow: ellipsis;
   }

   .nav-caret {
   	font-size: 11px;
   	flex-shrink: 0;
   	transition: transform 0.2s ease;
   	color: #9aa6bf;
   }

   .nav-link[aria-expanded="true"] .nav-caret {
   	transform: rotate(180deg);
   }

   /* dropdown items inside sidebar (Reports / Support) */
   .sidebar-dropdown-menu {
   	position: static;
   	display: none;
   	float: none;
   	width: 100%;
   	margin: 2px 0 0 0;
   	padding: 4px 0 4px 40px;
   	border: none;
   	box-shadow: none;
   	background: #ffffff;
   }

   .nav-item-dropdown.show .sidebar-dropdown-menu {
   	display: block;
   }

   .sidebar-dropdown-menu .dropdown-item {
   	padding: 8px 10px;
   	font-size: 13.5px;
   	border-radius: 8px;
   	color: #5d657b;
   	cursor: pointer;
   	transition: background 0.2s ease, color 0.2s ease;
   }

   .sidebar-dropdown-menu .dropdown-item:hover {
   	background: #eef5fd;
   	color: var(--ignou-blue);
   }

   /* ===========================================================
      CUSTOM TOOLTIP (icon-only mode)
      =========================================================== */
   .nav-tooltip {
   	position: fixed;
   	background: #2b2f3a;
   	color: #fff;
   	font-size: 13px;
   	font-weight: 500;
   	padding: 6px 12px;
   	border-radius: 6px;
   	white-space: nowrap;
   	z-index: 2000;
   	pointer-events: none;
   	opacity: 0;
   	transform: translateX(-6px);
   	transition: opacity 0.15s ease, transform 0.15s ease;
   }

   .nav-tooltip.show {
   	opacity: 1;
   	transform: translateX(0);
   }

   .nav-tooltip::before {
   	content: '';
   	position: absolute;
   	left: -5px;
   	top: 50%;
   	transform: translateY(-50%);
   	border-width: 5px 5px 5px 0;
   	border-style: solid;
   	border-color: transparent #2b2f3a transparent transparent;
   }

   /* flyout submenu shown on hover when collapsed (icon-only) */
   .nav-flyout {
   	position: fixed;
   	min-width: 190px;
   	background: #fff;
   	border: 1px solid var(--border-soft);
   	border-radius: 10px;
   	box-shadow: 0 8px 24px rgba(31, 119, 216, 0.18);
   	padding: 6px;
   	z-index: 2000;
   	opacity: 0;
   	transform: translateX(-6px);
   	transition: opacity 0.15s ease, transform 0.15s ease;
   	pointer-events: none;
   }

   .nav-flyout.show {
   	opacity: 1;
   	transform: translateX(0);
   	pointer-events: auto;
   }

   .nav-flyout .flyout-title {
   	font-size: 12px;
   	font-weight: 600;
   	text-transform: uppercase;
   	letter-spacing: 0.04em;
   	color: #9aa6bf;
   	padding: 6px 10px 4px;
   }

   .nav-flyout a {
   	display: block;
   	padding: 8px 10px;
   	font-size: 13.5px;
   	border-radius: 8px;
   	color: #41485c;
   	cursor: pointer;
   	transition: background 0.2s ease, color 0.2s ease;
   }

   .nav-flyout a:hover {
   	background: #eef5fd;
   	color: var(--ignou-blue);
   }

   /* ===========================================================
      OVERLAY (mobile/tablet)
      =========================================================== */
   .sidebar-overlay {
   	position: fixed;
   	inset: 0;
   	top: 0;
   	background: rgba(15, 23, 42, 0.45);
   	z-index: 1020;
   	opacity: 0;
   	visibility: hidden;
   	transition: opacity 0.25s ease;
	height: 100vh;
   }

   body.sidebar-open .sidebar-overlay {
   	opacity: 1;
   	visibility: visible;
   }

   /* main-wrapper is a flex column so the footer (its last child) sticks to the bottom
      of the viewport on short pages instead of sitting right after content-area's old
      fixed min-height, which left a full-screen gap above it on pages with little content. */
   .main-wrapper {
   	display: flex;
   	flex-direction: column;
   	min-height: 100vh;
   }

   /* ===========================================================
      CONTENT AREA
      =========================================================== */
   .content-area {
   	margin-top: 0;
   	margin-left: var(--sidebar-width);
   	padding: 22px 26px 40px;
   	flex: 1 0 auto;
   	transition: margin-left var(--sidebar-transition);
   }

   /* ===========================================================
      DASHBOARD DEMO BLOCKS (banner / stat cards)
      =========================================================== */
	  .welcome-banner {
/*	      background: linear-gradient(120deg, #0757a9ed, #0757a9ed), url(../db_img/welcome-banner-bg.png);*/
background: linear-gradient(120deg, #01507cde, #13416af7), url(../db_img/welcome-banner-bg.png);	
	      border-radius: 14px;
	      padding: 10px 25px;
	      color: #fff;
	      margin-bottom: 22px;
	      display: flex;
	      justify-content: space-between;
	      flex-wrap: wrap;
	      align-items: center;
	      background-size: cover;
	      background-position: center;
	  }
   
   .welcome-text{
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: 5px;
   }
   
   .banner-img{
	width: 100%;
	height: 100%;
   }
   
   .bannner-img-area {
       width: 190px;
   }

   .welcome-banner h2 {
   	font-size: 26px;
   	font-weight: 700;
   	margin-bottom: 0px;
   }

   .welcome-sub {
   	font-weight: 600;
   	margin-bottom: 0px;
   }

   .welcome-desc {
   	font-style: italic;
   	opacity: 0.85;
   	font-size: 14px;
	margin-bottom: 0px;
   }

   /* FLEX STATS ROW */
   .stats-row {
   	display: grid;
   	grid-template-columns: repeat(4, 1fr);
   	gap: 15px;
   }

   

   .stat-card {
   	border-radius: 12px;
   	padding: 18px 20px;
   	display: flex;
   	align-items: center;
   	justify-content: space-between;
   	color: #fff;
   }

   .stat-card .stat-label {
   	display: block;
   	font-style: italic;
   	font-weight: 600;
   	font-size: 16px;
   	margin-bottom: 6px;
   }

   .stat-card .stat-value {
   	font-size: 26px;
   	font-weight: 700;
   }

   .stat-icon {
   	font-size: 26px;
   	opacity: 0.9;
   }

   .stat-card:hover {
   	transform: translateY(-2px);
   	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
   }

   

   .stat-orange { background: linear-gradient(135deg, #e0a23a, #c9762e); }
   .stat-blue   { background: linear-gradient(135deg, #1f77d8, #1556a3); }
   .stat-red    { background: linear-gradient(135deg, #e0715c, #c2452f); }
   .stat-teal   { background: linear-gradient(135deg, #15a3a3, #0c7c7c); }
   
   
   
   
 /* Dashboard Course Card Area */
   
   .dash-courses-card-area{
	padding: 15px;
	background: #fff;
	min-height: 250px;
	border-radius: 10px;
	width: 100%;
	box-shadow: 2px 0px 12px 0px #70BFFF;
	margin-top: 10px;
	margin-bottom: 30px;
   }
   /* Dashboard Course Card Area Header */
   .courses-area-header{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
   }
   
   .courses-header-left h3{
	color: #000;
	font-size: 22px;
	margin: 0px;
	word-break: break-word;
	white-space: normal;
	font-weight: 600;
   }
   
   .index-area {
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
       justify-content: space-evenly;
       gap: 5px;
       background: var(--lightigbg);
       border-radius: 5px;
       padding: 5px;
	   width: 100%;
	   max-width: 400px;
   }
   .indication {
       display: flex;
       flex-direction: row;
       gap: 7px;
       background: #fff;
       border-radius: 10px;
       padding: 5px 8px;
       align-items: center;
       min-width: 174px;
       justify-content: start;
       width: fit-content;
   }
   .indication .left-indication {
       content: "";
       width: 15px;
       height: 15px;
       border-radius: 50%;
       box-shadow: 0px 0px 15px #accee3;
   }
   
   .indication p{
	margin: 0px;
	font-size: 12px;
	font-weight: 500;
	word-break: break-word;
	white-space: normal;
		color: #000;
   }
   
   .left-indication.success {
   	background: var(--success);
   }

   .left-indication.danger {
   	background: var(--danger);
   }

   .left-indication.warning {
   	background: var(--warning);
   }

   .left-indication.primary {
   	background: var(--primary);
   }
   
   /* Dashboard Course Card Area Header */
   
   
   /* Course Details Card */
   
   .course-details-card-area{
	display: flex;
	justify-content: start;
	gap: 10px;
	flex-wrap: wrap;
	width: 100%;
	margin-top: 20px;
   }
   
   
   .course-details-card-area .course-details-card {
       background: var(--lightigbg);
       min-height: 220px;
       width: 100%;
       max-width: 420px;
       box-shadow: 0px 0px 14px #00000052;
       border-radius: 15px;
   }

   .course-details-card-area .course-details-card mark.search-term-highlight {
       background: #ffd54f;
       color: inherit;
       padding: 0 1px;
       border-radius: 2px;
   }
   
   .course-details-card .course-details-card-header {
       display: flex;
       justify-content: end;
       flex-wrap: wrap;
       width: 100%;
       padding: 5px;
   }
   .course-details-card-header .indication{
	min-width: fit-content;
   }
   
   .course-details-card .course-details-card-body {
       display: flex;
       justify-content: start;
       gap: 8px;
/*       flex-wrap: wrap;*/
       padding: 8px 16px;
	   min-height: 140px;
   }
   
   .course-details-card-body .course-card-icon-area {
       width: 65px;
       height: 70px;
       background: var(--ignou-blue-design);
       font-size: 36px;
       color: #fff;
       border-radius: 5px;
       text-align: center;
       align-content: center;
   }
   
   
   .course-details-card-body .course-details{
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex-wrap: wrap;
   }
   
   .course-details-card-body .course-details h5 {
       margin: 0px;
       word-break: break-word;
       white-space: normal;
       color: #000;
       font-size: 22px;
       font-weight: 600;
   }
   
   .course-details-card-body .course-details .course-code{
	color: #000;
	font-size: 16px;
	word-break: break-word;
	white-space: normal;
	font-weight: 600;
	margin: 0px;
   }
   .course-details-card-body .course-details .course-code span{
	font-weight: 400;
   }
   .course-details-card-body .course-details .course-duration {
       color: #232121;
       font-size: 16px;
       word-break: break-word;
       white-space: normal;
       font-weight: 600;
       margin: 0px;
   }
	      .course-details-card-body .course-details .course-duration span {
	      	font-weight: 300;
	      }
		  
.course-details-card-body .progress-area{
	display: flex;
		flex-direction: column;
		gap: 3px;
}
				  .course-details-card-body .progress {
				  	border-radius: 7px;
					background: #fff;
					height: 10px;
	
				  }
				  
				  .course-details-card-body .progress-area .progress-text{
					margin: 0px;
					word-break: break-word;
					white-space: normal;
					font-weight: 600;
					font-size: 14px;
					color: #000;
					text-align: start;
				  }
		
				  .progress-bar.primary-bg {
				  	background: #0757A7 !important;
				  	width: 100%;
					
				  }
		
				  .progress-bar.warning-bg {
				  	background: linear-gradient(45deg, #EAC357, #DA8340);
				  	width: 60%;
					background-size: 1rem 1rem;
				  }
		
				  .progress-bar.success-bg {
				  	background: linear-gradient(45deg, #45C343, #317E10);
				  	width: 100%;

				  }
		
				  .progress-bar.danger-bg {
				  	background: linear-gradient(45deg, #F22424, #991717);
				  	width: 5%;
					background-size: 1rem 1rem;
				  }
		  
		  .course-details-card .course-details-card-footer {
		      background: #fff;
		      padding: 8px;
		      display: flex;
		      justify-content: space-between;
		      flex-wrap: wrap;
		      border-radius: 0px 0px 15px 15px;
			  align-items: center;
		  }	  
		  
		 .course-details-card-footer p{
			margin: 0px;
			word-break: break-word;
			       white-space: normal;
				   font-weight: 600;
		   color: #000;
		 }
		 
.warning-text span i{
	color: var(--warning);
}
.danger-text span i{
	color: var(--danger);
}

.primary-text span i{
	color: var(--primary);
}
.success-text span i{
	color: var(--success);
}

.view-course-btn {
    background: var(--ignou-blue-design);
    color: #fff;
    border-radius: 5px;
    padding: 5px 20px;
    font-size: 16px;
    font-weight: 600;
	cursor: pointer;
}
.course-details-card-area .course-details-card:hover{
	box-shadow: 0px 0px 14px #0000008a;
	transform: translateY(-2px);
}
   
   /* Course Details Card */
   
   
   /* Dashboard Course Card Area */
   
   
   /* Dashboard Marquee */
   


   .marquee-container {
       width: 100%;
       max-width: 600px;
       /* margin: 0 auto; */
       overflow: hidden;
       background: #ffffff;
       border-radius: 7px;
       padding: 20px;
       box-shadow: 2px 0px 12px 0px #70BFFF;
   }

   .marquee-wrapper {
       overflow: hidden;
       width: 100%;
       height: 300px;
       position: relative;
       background: #fff;
       box-shadow: 0px 0px 12px #8dc1eb;
       border-radius: 5px;
   }

   /* .marquee-track {
     display: flex;
     flex-direction: column;
     width: 100%;
     height: max-content;

   animation: scrollVertical var(--speed, 7s) linear infinite;
     animation-play-state: running;
     gap: 18px;
     align-items: center;
   } */
   .marquee-track {
     display: flex;
     flex-direction: column;
     width: 100%;
     height: max-content;
     min-height: 100%;
     position: absolute;
     top: 0;
     left: 0;
     animation: scrollVertical var(--speed, 20s) linear infinite;
     animation-play-state: running;
     gap: 18px;
     align-items: center;
   }

   .marquee-item {
       padding: 5px;
       background: #fff;
       margin-bottom: 0px;
       font-size: 18px;
       width: 100%;
       box-sizing: border-box;
       display: flex;
       justify-content: start;
       /* flex-wrap: wrap; */
       gap: 7px;
       width: calc(100% - 20px);
       border-radius: 6px;
       box-shadow: 0px 0px 10px #2178d782;
       align-items: center;
   }

   /* @keyframes scrollVertical {
     0% {
       transform: translateY(0);
     }
     100% {
       transform: translateY(-50%);
     }
   } */
   @keyframes scrollVertical {
     0% {
       transform: translateY(100%);
     }
     100% {
       transform: translateY(-100%);
     }
   }

   /* Control buttons styling */
   .marquee-controls {
     display: flex;
     justify-content: center;
     
     
   }

   /* Paused state via class toggle on container */
   .marquee-container.is-paused .marquee-track {
     animation-play-state: paused;
   }

   .marquee-container.is-paused .marquee-wrapper {
     max-height: 300px;
     overflow: auto;
     padding: 60px 0px 0px 0px;
   }


   .marquee-header {
       display: flex;
       justify-content: space-between;
       flex-wrap: wrap;
       padding: 0px 0px 15px 0px;
       border-radius: 5px;
       background: none;
       align-items: center;
   }
   .marquee-header h3{
   	    color: #25303e;
       margin: 0px;
       font-size: 18px;
       word-break: break-word;
       white-space: normal;
       font-weight: 600;
   }
   .marquee-header .marquee-controls #playPauseBtn{
   	    background: var(--ignou-blue-design);
       color: #fff;
       font-size: 16px;
       word-break: break-word;
       white-space: normal;
       box-shadow: 2px 2px 15px #fff;
       border: none;
       border-radius: 5px;
       padding: 5px 10px;
   }

   .marquee-track:hover {
     animation-play-state: paused;
   }

   .marquee-item .date-area{
   	    background: var(--ignou-blue-design);
       padding: 5px;
       display: flex;
       flex-direction: column;
       gap: 3px;
       border-radius: 5px;
       min-width: 65px;
       min-height: 55px;
       height: fit-content;
	   align-items: center;
   }
   .marquee-item .date-area .date-num-txt {
       color: #fff;
       margin: 0px;
       word-break: break-word;
       white-space: normal;
       font-size: 20px;
       font-weight: 600;
   }
   .marquee-item .date-area .mm-yy-num-txt{
   	color: #fff;
   	margin: 0px;
   	word-break: break-word;
   	white-space: normal;
   	font-size: 16px;
   }

   .marquee-details-area{
   	display: flex;
   	flex-direction: column;
   	gap: 2px;
   	flex-wrap: wrap;
   }
   .marquee-details-area a{
   	color: #000;
   	font-size: 14px;
   	word-break: break-word;
   	white-space: normal;
   	text-decoration: underline;
   	text-align: start;
   }
   .marquee-details-area p{
   	margin: 0px;
   	font-size: 15px;
   	font-weight: 500;
   	word-break: break-word;
   	white-space: normal;
   	color: #000;
   	text-align: start;
   }

   
   /* Dashboard Marquee */
   
   
   /***** Course Dashbaord ******/
   .course-page {
   	padding: 0;
   }

   .course-page .container-fluid {
   	padding: 20px;
   	display: flex;
   	flex-direction: column;
   	gap: 24px;
   }

   /* ============================================================================
      COURSE HEADER
      ============================================================================ */

   .cd-course-header {
   	background: linear-gradient(120deg, #01507cde, #13416af7), url(../db_img/welcome-banner-bg.png);
   	background-size: cover;
   	background-position: center;
   	border-radius: 14px;
   	padding: 28px;
   	color: #fff;
   	position: relative;
   	overflow: hidden;
   	box-shadow: 0 8px 24px rgba(30, 58, 138, 0.2);
   }

   .cd-course-header::before {
   	content: '';
   	position: absolute;
   	top: 0;
   	left: 0;
   	right: 0;
   	bottom: 0;
   	background: rgba(15, 23, 42, 0.4);
   	pointer-events: none;
   }

   .cd-header-wrap {
   	position: relative;
   	z-index: 1;
   	display: flex;
   	align-items: center;
   	justify-content: space-between;
   	gap: 32px;
   	flex-wrap: wrap;
   }

   .cd-header-left {
   	flex: 1 1 auto;
   	min-width: 300px;
   }

   .cd-header-title {
   	font-size: 26px;
   	font-weight: 700;
   	margin: 0 0 16px 0;
   	line-height: 1.3;
   }
   
   .cd-details-area {
       display: flex;
       flex-direction: row;
       gap: 10px;
       justify-content: space-between;
       flex-wrap: wrap;
       margin-top: 12px;
       padding: 0px 5px;
       width: 100%;
       max-width: 830px;
   }
      
      .cd-details-area ul{
   	display: flex;
   	flex-direction: column;
   	gap: 5px;
   	flex-wrap: wrap;
   	list-style: none;
   	padding: 0px;
   	margin: 0px;
      }
      .cd-details-area ul li{
   	margin: 0px;
      }
      .cd-details-area ul li p{
   	margin: 0px;
   		word-break: break-word;
   		white-space: normal;
   		color: #fff;
   		font-size: 18px;
   		font-weight: 600;
      }
      .cd-details-area ul li p span{
   	font-weight: 400;
      }


   .cd-status-active {
   	color: #86efac;
   	font-weight: 600;
   }

   .cd-header-right {
   	flex-shrink: 0;
   	display: flex;
   	align-items: center;
   	justify-content: center;
   }

   .cd-progress-circle {
   	position: relative;
   	width: 180px;
   	height: 180px;
   	display: flex;
   	align-items: center;
   	justify-content: center;
   }

   .cd-progress-svg {
   	position: absolute;
   	width: 100%;
   	height: 100%;
   	transform: rotate(-90deg);
   }

   .cd-progress-content {
   	display: flex;
   	flex-direction: column;
   	align-items: center;
   	text-align: center;
   	z-index: 2;
   	position: relative;
   }

   .cd-progress-label {
   	font-size: 12px;
   	font-weight: 600;
   	text-transform: uppercase;
   	letter-spacing: 0.05em;
   	opacity: 0.9;
   }

   .cd-progress-percent {
   	font-size: 36px;
   	font-weight: 700;
   	margin-top: 4px;
   	line-height: 1;
   }
   
   .cd-header-controls {
   	display: flex;
   	align-items: center;
   	gap: 12px;
   	flex-shrink: 0;
   }

   .cd-search-box {
   	position: relative;
   	width: 100%;
   	max-width: 280px;
   	height: 38px;
   	display: flex;
   	align-items: center;
   }

   .cd-search-input {
   	width: 100%;
   	height: 100%;
   	border: 1px solid #cbd5e1;
   	border-radius: 8px;
   	padding: 8px 36px 8px 12px;
   	font-size: 13px;
   	background: #f8fafc;
   	transition: border-color 0.2s, background 0.2s;
   }

   .cd-search-input:focus {
   	outline: none;
   	border-color: #0048B0;
   	background: #fff;
   	box-shadow: 0 0 0 3px rgba(0, 72, 176, 0.1);
   }

   .cd-search-btn {
   	position: absolute;
   	right: 10px;
   	background: transparent;
   	border: none;
   	color: #0048B0;
   	font-size: 13px;
   	cursor: pointer;
   	padding: 0;
   	width: 20px;
   	height: 20px;
   	display: flex;
   	align-items: center;
   	justify-content: center;
   }

   .cd-filter-btn {
   	width: 38px;
   	height: 38px;
   	border-radius: 8px;
   	border: 1px solid #cbd5e1;
   	background: #f8fafc;
   	color: #0048B0;
   	cursor: pointer;
   	display: flex;
   	align-items: center;
   	justify-content: center;
   	transition: background 0.2s, border-color 0.2s;
   }

   .cd-filter-btn:hover {
   	background: #eef5fd;
   	border-color: #0048B0;
   }
   
   
   
   .assignment-details-card-area{
	display: flex;
	justify-content: start;
	gap: 10px;
	flex-wrap: wrap;
	width: 100%;
	margin-top: 20px;
   }
   
   .assignment-details-card-area .assignment-details-card{
	background: var(--lightigbg);
	min-height: 220px;
	width: 100%;
	max-width: 510px;
	box-shadow: 0px 0px 14px #00000052;
	border-radius: 15px;
   }
   
   .assignment-details-card .assignment-details-card-header{
	display: flex;
	justify-content: end;
	flex-wrap: wrap;
	width: 100%;
	padding: 5px;
   }
   
   .assignment-details-card-header .indication{
	min-width: fit-content;
   }
   .assignment-details-card .assignment-details-card-body{
	
	padding: 8px 16px;
	min-height: 210px;
   }
   .assignment-details-card-body .assigment-details-icon-heading-area{
	display: flex;
	justify-content: start;
	gap: 8px;
	align-items: center;
   }
   .assigment-details-icon-heading-area .assignment-card-icon-area{
	width: 65px;
	height: 70px;
	background: var(--ignou-blue-design);
	font-size: 36px;
	color: #fff;
	border-radius: 5px;
	text-align: center;
	align-content: center;
   }
   .assigment-details-icon-heading-area h5{
	margin: 0px;
	word-break: break-word;
	white-space: normal;
	color: #000;
	font-size: 22px;
	font-weight: 600;
   }
   
   
   .assignment-details-card-body .assigment-card-details{
	display: flex;
	flex-direction: row;
	gap: 10px;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: 12px;
   }
   
   .assigment-card-details ul{
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex-wrap: wrap;
	list-style: none;
	padding: 0px;
	margin: 0px;
   }
   .assigment-card-details ul li{
	margin: 0px;
   }
   .assigment-card-details ul li p{
	margin: 0px;
		word-break: break-word;
		white-space: normal;
		color: #000;
		font-size: 16px;
		font-weight: 600;
		text-align: start;
   }
   .assigment-card-details ul li p span{
	font-weight: 400;
   }
   .assignment-details-card-body .progress{
   	border-radius: 7px;
   	background: #fff;
	height: 10px;
   }
    .assignment-details-card .assignment-details-card-footer{
	background: #fff;
	padding: 8px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	border-radius: 0px 0px 15px 15px;
	align-items: center;
   }
   
   .assignment-details-card-footer p{
	margin: 0px;
	word-break: break-word;
	white-space: normal;
	font-weight: 600;
	color: #000;
   }
   
   .view-assignment-btn{
	background: var(--ignou-blue-design);
	color: #fff;
	border-radius: 5px;
	padding: 5px 20px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
   }
   .view-assignment-btn.disabled {
      
	   pointer-events: none;
	   opacity: .65;

   }


   /***** Course Dashbaord ******/
   
   
   /**** Assignments Combined ****/
.assignment-combined-card{
	padding: 15px;
	background: #fff;
	min-height: 250px;
	border-radius: 10px;
	width: 100%;
	box-shadow: 2px 0px 12px 0px #70BFFF;
	margin-top: 10px;
	margin-bottom: 30px;
}
.assignment-combined-card .assignment-combined-card-header{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
} 

.assignment-header-left h3{
	color: #000;
	font-size: 22px;
	margin: 0px;
	word-break: break-word;
	white-space: normal;
	font-weight: 600;
}  

/* Assignment Tabs */
ul.assignment-tab-area{
	display: flex;
	justify-content: start;
	gap: 10px;
	flex-wrap: wrap;
}
ul.assignment-tab-area li button {
    padding: 6px 14px !important;
    font-size: 18px;
    margin: 0px;
    word-break: break-word;
    white-space: normal;
    font-weight: 600;
    border: 1px solid;
}
.all-assignments{
	border-color: #01507c !important;
	color: #01507c !important;
	background: #fff !important;
}
.all-assignments.active{
	background: #01507c !important;
	color: #fff !important;
}
.not-started-assignment{
	border-color: #7c0101 !important;
		color: #7c0101 !important;
		background: #fff !important;
}
.not-started-assignment.active{
	background: #7c0101 !important;
	color: #fff !important;
}
.in-progress-assignment{
	border-color: #c9762e !important;
		color: #c9762e !important;
		background: #fff !important;
}
.evaluated-assignment{
	border-color: #1659a8 !important;
	color: #1659a9 !important;
	background: #fff !important;
}
.evaluated-assignment.active{
	background: #1659a8 !important;
	color: #fff !important;
}
.in-progress-assignment.active{
	background: #c9762e !important;
	color: #fff !important;
}
.completed-assignment{
	border-color: #0b9d10 !important;
		color: #0b9d10 !important;
		background: #fff !important;
}
.completed-assignment.active{
	background: #0b9d10 !important;
	color: #fff !important;
}

/* Assignment Card View Combined */
.combined-assignments-view-area{
	display: flex;
	flex-direction: column;
	width: 100%;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.assignment-view-combined-card{
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
	background: var(--lightigbg);
	padding: 10px;
	min-height: 60px;
	border-radius: 7px;
	align-items: center;
}
.assignment-view-combined-card .assignment-combined-card-left{
	display: flex;
	flex-direction: row;
	justify-content: start;
	flex-wrap: wrap;
	gap: 10px;
}
.assignment-combined-card-left .left-icon-area{
	width: 55px;
		height: 50px;
		background: var(--ignou-blue-design);
		font-size: 26px;
		color: #fff;
		border-radius: 5px;
		text-align: center;
		align-content: center;
}

.combined-card-right-details-area{
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: 5px;
	padding: 0px 0px 0px 10px;
}
.combined-card-right-details-area h6{
	margin: 0px;
	word-break: break-word;
	white-space: normal;
	color: #000;
	font-size: 18px;
	font-weight: 600;
}
.combined-card-right-details-area ul{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 15px;
	list-style: none;
	padding: 0px;
	margin: 0px;
}


.combined-card-right-details-area ul li p {
	margin: 0px;
	word-break: break-word;
	white-space: normal;
	color: #000;
	font-size: 16px;
	font-weight: 600;
}

.combined-card-right-details-area ul li p span {
	font-weight: 400;
}



.assignment-view-combined-card .assignment-viewbtn{
	background: var(--ignou-blue-design);
	color: #fff;
	border-radius: 5px;
	padding: 5px 20px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}

.assignment-combined-card-right .indication{
	min-width: fit-content;
}

.combined-card-right-details-area .combined-assignment-progress-area{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	
}
.assignment-combined-card-right {
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: start;
	flex-wrap: wrap;
}

/* Assignment Card View Combined */


/* Assignment Tabs */
	/**** Assignments Combined ****/
	
	
	/** Student Assignment View **/
	.assignment-card{
		width: 100%;

		border-radius: 7px;
		background: #fff;
		min-height: 80px;
		box-shadow: 0px 0px 15px #2080c354;
	}
	.assignment-card-header{
		padding: 15px;
		border-radius: 7px 7px 0px 0px;
		
		width: 100%;
		display: flex;
		justify-content: start;
		gap: 0px;
		flex-wrap: wrap;
		background: linear-gradient(120deg, #01507cde, #13416af7), url(../db_img/welcome-banner-bg.png);
	}
	.assignment-card-header h3{
		color: #fff;
		font-size: 30px;
		margin: 0px;
		word-break: break-word;
		white-space: normal;
		font-weight: 600;
		width: 100%;
		text-align: center;
	}
	
	.details-area-assignment {
	    display: flex;
	    flex-direction: row;
	    justify-content: space-between;
	    flex-wrap: wrap;
	    width: 100%;
	}
	.details-area-assignment ul{
		display: flex;
		flex-direction: column;
		gap: 5px;
		flex-wrap: wrap;
		list-style: none;
		padding: 0px;
		margin: 0px;
	}
	.details-area-assignment ul li {
	    margin: 0px;
	}
	.details-area-assignment ul li p {
	    margin: 0px;
	    word-break: break-word;
	    white-space: normal;
	    color: #fff;
	    font-size: 18px;
	    font-weight: 600;
	}
	.details-area-assignment ul li p span {
	    font-weight: 400;
	}
	
	
	.assignment-instruction-area{
		padding: 15px;
		text-align: center;
		padding: 10px 15px;
	}
	.assignment-instruction-area ul{
		display: flex;
		flex-direction: column;
		gap: 7px;
		flex-wrap: wrap;
		list-style: decimal;
				padding: 0px;
				margin: 0px;
	}
	.assignment-instruction-area ul li{
		margin: 0px;
	}
	.assignment-instruction-area ul li p {
		    margin: 0px;
		    word-break: break-word;
		    white-space: normal;
		    color: #000;
		    font-size: 18px;
		    font-weight: 400;
			text-align: start;
		}
		
	.assignment-instruction-area h6{
		margin: 0px;
				    word-break: break-word;
				    white-space: normal;
				    color: #000;
				    font-size: 22px;
				    font-weight: 600;
					margin-bottom: 15px;
					text-align: start;
	}
	.proceed-with-assignment {
	    color: #fff;
	    font-size: 18px;
	    font-weight: 600;
	    background: #1b4a72;
	    word-break: break-word;
	    white-space: normal;
	    padding: 8px 10px;
	    border-radius: 7px;
	    box-shadow: 0px 0px 15px #1f598047;
	    text-align: center;
		cursor: pointer;
	}	
	.proceed-with-assignment:hover{
		background: #10426d;
		color: #fff;
	}
	
	
	
	.assignment-questions-header-area{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 5px;
		background: var(--lightigbg);
		padding: 10px 15px;
	}
	.assignment-questions-header-area .progress-area {
	    display: flex;
	    flex-direction: column;
	    gap: 3px;
	}
	.assignment-questions-header-area .progress {
	    border-radius: 7px;
	    background: #fff;
	    height: 10px;
	}
	.assignment-questions-header-area .progress-area .progress-text{
		margin: 0px;
		word-break: break-word;
		white-space: normal;
		font-weight: 600;
		font-size: 14px;
		color: #000;
	}
.question-label-area p,.page-label-area p{
	margin: 0px;
		word-break: break-word;
		white-space: normal;
		font-weight: 600;
		font-size: 16px;
		color: #fff;
}
.question-label-area,.page-label-area{
	background: var(--ignou-blue);
	height: fit-content;
	border-radius: 5px;
	padding: 5px 10px;
}
.assignment-question-body-area {
    padding: 15px;
}
.list-style-decimal{
	list-style: decimal;
}
.list-style-roman{
	list-style: lower-roman;
}
.list-style-disc{
	list-style: disc;
}
ul.main-question-area li p{
	color: #000;
	font-size: 18px;
	margin: 0px;
			word-break: break-word;
			white-space: normal;
			font-weight: 600;
	
}
ul.main-question-area li::marker,ul.subquestion li::marker{
	color: #000;
}
.subquestion li p{
	color: #000;
		font-size: 16px !important;
		margin: 0px;
				word-break: break-word;
				white-space: normal;
				font-weight: 400 !important;
}

/** Summernote Editor Fix **/
.note-editable {
    background: #fff;
}
.note-editable img,
.preview-answer-html img {
    display: block;
    max-width: 100%;
    height: auto;
}
.note-editor .note-editing-area .note-editable table td, .note-editor .note-editing-area .note-editable table th{
	border: 1px solid #777777 !important;
}
 .note-editor.note-airframe .note-editing-area .note-editable, .note-editor.note-frame .note-editing-area .note-editable{
    word-break: break-word !important;
    white-space: normal;
}
.note-editable pre, pre {
	word-break: break-word !important;
	white-space: normal;
}

.note-modal-backdrop{
			display: none !important;
		}
@media(max-width: 500px){
	.note-editor .note-toolbar .note-color-all .note-dropdown-menu, .note-popover .popover-content .note-color-all .note-dropdown-menu {
	    min-width: 190px !important;
	    width: 100% !important;
	    max-width: 100% !important;
	    overflow: auto !important;
	}
}
/** Summernote Editor Fix **/

/** Assignment Instruction Area **/
.student-assignment-instruction-area{
	background: #fff;
	padding: 15px;
	border-radius: 0px 0px 7px 7px;
	min-height: 200px;
}
.student-assignment-instruction-area h6{
	color: #000;
	font-size: 22px;
	font-weight: 600;
	margin: 0px;
	word-break: break-word;
	white-space: normal;
	text-align: center;
	text-decoration: underline;
}
.student-assignment-instruction-area{
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex-wrap: wrap;
	
}
.student-assignment-instruction-area li{
	margin: 0px;
}
.student-assignment-instruction-area li::marker{
	color: #000;
}
.student-assignment-instruction-area li p{
	color: #000;
	font-size: 16px;
	margin: 0px;
	word-break: break-word;
		white-space: normal;
		text-align: justify;
}
.student-assignment-instruction-footer-area{
	display: flex;
	justify-content: center;
	gap: 5px;
	flex-wrap: wrap;
}
.start-assignment-btn {
    background: linear-gradient(45deg, #1c5178, #123e75);
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    word-break: break-word;
    white-space: normal;
    text-align: center;
    border-radius: 5px;
    padding: 5px 10px;
    display: flex;
    gap: 3px;
    align-items: center;
    box-shadow: 0px 0px 15px #1d8ddd73;
	cursor: pointer;
}
.start-assignment-btn:hover{
	background: #123e75;
	   color: #fff;
}
.download-guidelines-btn {
    background: #fff;
    color: #123e75;
    border: 1px solid #123e75;
    font-size: 18px;
    font-weight: 600;
    word-break: break-word;
    white-space: normal;
    text-align: center;
    border-radius: 5px;
    padding: 5px 10px;
    display: flex;
    gap: 3px;
    align-items: center;
    cursor: pointer;
}
.download-guidelines-btn:hover {
    background: #f0f5fa;
    color: #123e75;
}
/** Assignment Instruction Area **/

/* Student Assignment Header Area */
.assignmenent-cb-header-area{
	min-height: 60px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
/*	background: #e7f5ff;*/
	padding: 10px;
	background: #fff;
	box-shadow: 0px 0px 15px #1d537a3b;
}
.question-text-area,.page-text-area {
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    word-break: break-word;
    white-space: normal;
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    background: #1d537a;
    border-radius: 5px;
    padding: 5px;
	height: fit-content;
    margin: 0px;
}

.assignment-instructions-btn,.assignment-quesition-btn {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    word-break: break-word;
    white-space: normal;
    border: none;
   padding: 8px 10px;
    border-radius: 7px;
	height: fit-content;
	cursor: pointer;
}
.assignment-instructions-btn{
	background: #0072b7;
}
.assignment-quesition-btn{
	background: #068397;
}
.assignment-instructions-btn:hover{
	color: #fff;
	background: #004f7e;
}
.assignment-quesition-btn:hover {
    background: #046474;
	color: #fff;
}
.autosaved-text{
	color: #00518a;
	font-size: 16px;
	font-weight: 400;
	word-break: break-word;
	white-space: normal;
	margin: 0px;
}
.single-pdf-saved-text,
.single-pdf-submitted-text {
	font-size: 14px;
	font-weight: 600;
	word-break: break-word;
	white-space: normal;
	margin: 0px;
	display: flex;
	align-items: center;
	gap: 6px;
}
.single-pdf-saved-text {
	color: #00518a;
}
.single-pdf-submitted-text {
	color: var(--success);
}
.assignment-cb-center,.assignment-cb-left {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.assignment-cb-right .custom-progress-area{
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.assignment-cb-right .custom-progress-area .progress{
	border-radius: 7px;
	background: #fff;
	height: 10px;
}
.assignment-cb-right .custom-progress-area .progress-text{
	margin: 0px;
	word-break: break-word;
	white-space: normal;
	font-weight: 600;
	font-size: 14px;
	color: #000;
}
.progress-bar.status-bg{
	background: linear-gradient(45deg, #45C343, #317E10);
	width: 10%;
}
.assignment-cb-right {
    align-content: center;
}
.download-preview-btn {
    background: #0c5e94;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border-radius: 5px;
    padding: 5px 7px;
    border: none;
    box-shadow: 0px 0px 15px #1983ce45;
}
.btm-sd-area{
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 5px;
	flex-wrap: wrap;
}
.delete-my-data-btn {
    background: #aa0000;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border: none;
    padding: 7px 10px;
    display: flex;
    border-radius: 7px;
    gap: 3px;
    align-items: center;
    cursor: pointer;
}
.delete-my-data-btn:hover{
	color: #fff;
	background: #770101;
}
.custom-hidden-css{
	visibility: hidden;	
}
button.swal2-confirm.swal2-styled.swal2-default-outline {
    background-color: rgb(17 122 26) !important;
}
/* PDF Viewer */
#pdf-container {
       height: 600px;
       overflow: auto;
       border: 1px solid #ccc;
       background: #f5f5f5;
   }
   
   #pdf-container canvas {
       display: block;
       margin: 10px auto;
       border: 1px solid #ddd;
       box-shadow: 0 2px 4px rgba(0,0,0,0.1);
   }
   
   .pdf-loading {
       padding: 20px;
       text-align: center;
       color: #666;
   }
   
   .pdf-error {
       padding: 20px;
       background: #ffe6e6;
       color: #c00;
       border: 1px solid #fcc;
       border-radius: 4px;
   }
   .pdf-toolbar {
           display: flex;
           gap: 10px;
           padding: 12px;
           background: #f0f0f0;
           border-bottom: 1px solid #ddd;
           flex-wrap: wrap;
           align-items: center;
           position: sticky;
           top: 0;
           z-index: 10;
       }

       .toolbar-group {
           display: flex;
           gap: 8px;
           align-items: center;
           border-right: 1px solid #ddd;
           padding-right: 10px;
       }

       .toolbar-group:last-child {
           border-right: none;
       }

       .pdf-toolbar button {
           padding: 8px 12px;
           background: white;
           border: 1px solid #bbb;
           border-radius: 4px;
           cursor: pointer;
           font-size: 14px;
           transition: all 0.2s;
       }

       .pdf-toolbar button:hover {
           background: #e8e8e8;
           border-color: #999;
       }

       .pdf-toolbar button:disabled {
           opacity: 0.5;
           cursor: not-allowed;
       }

       .pdf-toolbar input[type="number"] {
           width: 60px;
           padding: 8px;
           border: 1px solid #bbb;
           border-radius: 4px;
           font-size: 14px;
       }

       .pdf-toolbar input[type="text"] {
           padding: 8px 12px;
           border: 1px solid #bbb;
           border-radius: 4px;
           font-size: 14px;
           width: 200px;
       }

       .page-info {
           font-size: 14px;
           color: #333;
           white-space: nowrap;
       }

       .zoom-display {
           font-size: 14px;
           color: #333;
           min-width: 50px;
           text-align: center;
       }

       #pdf-container {
           height: calc(100vh - 250px);
           overflow: auto;
           background: #e0e0e0;
           padding: 20px;
           position: relative;
       }

       .pdf-page-wrapper {
           margin: 10px auto;
           background: white;
           box-shadow: 0 2px 8px rgba(0,0,0,0.2);
           display: inline-block;
           position: relative;
       }

       .pdf-page-wrapper canvas {
           display: block;
           max-width: 100%;
           height: auto;
       }

       .pdf-page-number {
           position: absolute;
           bottom: 5px;
           right: 10px;
           background: rgba(0,0,0,0.5);
           color: white;
           padding: 3px 8px;
           font-size: 12px;
           border-radius: 3px;
       }

       .pdf-error {
           padding: 20px;
           background: #ffebee;
           color: #c62828;
           border: 1px solid #ef5350;
           border-radius: 4px;
           margin: 20px;
       }

       .pdf-loading {
           text-align: center;
           padding: 40px;
           color: #666;
       }

       .search-highlight {
           background: yellow;
           opacity: 0.7;
       }

       .search-results {
           font-size: 12px;
           color: #666;
           margin-left: 10px;
       }
.pdf-page-wrapper .textLayer{
	display: none;
}
#pdf-container{
	text-align: center;
}
.answer-pdf-container {
	height: 600px;
	overflow: auto;
	background: #f5f5f5;
	text-align: center;
}
.answer-files-annotate-frame {
	width: 100%;
	height: 600px;
	border: none;
	display: block;
}
.answer-pdf-container canvas {
	display: block;
	margin: 10px auto;
	border: 1px solid #ddd;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.download-pdf-btn {
    color: #fff;
    font-weight: 600;
    word-break: break-word;
    white-space: normal;
    background: #8e0000 !important;
    border-radius: 7px !important;
    display: flex;
    gap: 5px;
    align-items: center;
}
 /* PDF Viewer */  
/* Student Assignment Header Area */
.progress-bar {
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    transition: width 0.4s ease;
}

#progressBar {
    width: 0%;
}

.progress-text {
    font-size: 14px;
    font-weight: 600;
    color: #667eea;
    margin-top: 8px;
    text-align: center;
}

/* Student Assignment Multi Step Form */
/* Step List Container */
.assignment-question-navigation-header-area{
	background: #014d93;
	padding: 10px;
	width: 100%;
	display: flex;
	justify-content: center;
}
.assignment-question-navigation-header-area h6{
	color: #fff;
	word-break: break-word;
	white-space: normal;
	margin: 0px;
	font-size: 18px;
}
.student-assignment-index-area{
	background: #014d93;
		padding: 10px;
		width: 100%;
		display: flex;
		justify-content: center;
}
.student-assignment-index-area {
    background: #e7f5ff;
    padding: 10px;
    width: 100%;
    display: flex;
    justify-content: start;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
}
.question-index-text {
    color: #000;
    font-size: 16px;
    font-weight: 400;
    margin: 0px;
    word-break: break-word;
    white-space: normal;
    background: #fff;
    border-radius: 5px;
    padding: 2px 3px;
    width: fit-content;
}

.question-index-text span{
	font-size: 16px;
}
.question-index-text span.attempted{
	
	color: var(--success);
}
.question-index-text span.not-attempted{
	
	color: var(--danger);
}
.question-index-text span.current{
	
	color: #003392;
}
.vstep-list {
    list-style: none;
    padding: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin: 0px;
}


.vstep-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    margin-bottom: 3px;
    cursor: pointer;
    border-radius: 8px;
    background: #fff;
    transition: 0.3s;
    box-shadow: 0px 0px 4px #10b7fd;
    min-width: 40px;
    width: fit-content;
    min-height: 40px;
    text-align: center;
    justify-content: center;
}


.vstep-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #dcdcdc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}


.vstep-item.active .vstep-icon {
    background: #007bff;
    color: white;
}

.vstep-item.completed {
    background: #008741;
    box-shadow: 0px 0px 7px #11894b;
    color: #fff;
}

.vstep-item.not-attempted {
    background: var(--danger);
    box-shadow: 0px 0px 7px #d52c2c66;
    color: #fff;
}

.next{
	background: #0d488d;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	border: none;
	padding: 7px 18px;
	display: flex;
	border-radius: 7px;
	gap: 3px;
	align-items: center;
	height: fit-content;
}
.next:hover{
	background: #05356c;
	color: #fff;
}

.bottom-btn-area {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 5px;
    padding: 5px;
}
.save-btn-new {
    background: #058e6c;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border: none;
    padding: 7px 18px;
    display: flex;
    border-radius: 7px;
    gap: 3px;
    align-items: center;
	cursor: pointer;
	height: fit-content;
}
.save-btn-new:hover{
	background: #007588;
	color: #fff;
}
.question-area {
    padding: 4px 8px;
}
.prev {
    background: #996f17;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border: none;
    padding: 7px 18px;
    border-radius: 7px;
	display: flex;
	gap: 3px;
		align-items: center;
		height: fit-content;
}
.submit-assignment-btn {
    background: #009470;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border: none;
    padding: 7px 18px;
    border-radius: 7px;
    display: flex;
    gap: 3px;
    align-items: center;
}
.submit-assignment-btn:hover{
	color: #fff;
	background: #04634c;
}
.prev:hover{
	background: #75530b;
		color: #fff;
}

.assignment-submit-confirmation-area {
    padding: 10px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    gap: 15px;
	align-items: center;
}
.assignment-submit-confirmation-area .sa-confirmation-question{
	color: #000;
	font-size: 18px;
	font-weight: 600;
	margin: 0px;
	word-break: break-word;
	white-space: normal;
	
}
.confirmation-submit-header {
    background: linear-gradient(182deg, #01507c, #1e385f);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 5px;
}
.confirmation-submit-header h5{
	color: #fff;
	word-break: break-word;
	white-space: normal;
}
.confirmation-submit-header button {
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    background: none;
    border: none;
}
.assignment-submit-confirmation-area .sa-confirmation-details{
	color: #000;
		font-size: 18px;
		font-weight: 400;
		margin: 0px;
		word-break: break-word;
		white-space: normal;
}
.assignment-submit-confirmation-area .sa-confirmation-details span{
	font-weight: 600 !important;
}
.submit-confirmation-btn {
    background: #009470;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border: none;
    padding: 7px 18px;
    border-radius: 7px;
    display: flex;
    gap: 3px;
    align-items: center;
    width: fit-content;
   
}
.submit-confirmation-btn:hover{
	color: #fff;
	background: #04634c;
}
.confirmation-md-btns-area{
	display: flex;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
}
.edit-response-btn{
	background: #008ea8;
	    color: #fff;
	    font-size: 16px;
	    font-weight: 600;
	    border: none;
	    padding: 7px 18px;
	    border-radius: 7px;
	    display: flex;
	    gap: 3px;
	    align-items: center;
	    width: fit-content;
}
.edit-response-btn:hover{
	color: #fff;
		background: #036071;
}
.tbl-toggle-bn{
	background: linear-gradient(45deg, #1a83ea, #1097e7);
	color: #fff;
    font-size: 16px;
    font-weight: 600;
    border: none;
    padding: 7px 18px;
    border-radius: 7px;
}
.tbl-1-cls table thead>tr:first-child>th:first-child, .tbl-1-cls table tbody>tr:first-child>td:first-child{
	min-width: 150px !important;
	width: 150px !important;
	max-width: fit-content !important;
}

.tbl-1-cls table thead tr th, .tbl-1-cls table tbody tr td{
	min-width: 150px !important;
	width: 150px !important;
	
}
.add-btn-column{
	 background: linear-gradient(45deg, #033c75, #1d7eddbf);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border: none;
    padding: 7px 18px;
    border-radius: 7px;
}

.vstep-item.completed .vstep-icon {
    background: #28a745;
    color: white;
}
.single-heading-txt {
    color: #000;
    font-size: 17px;
    text-decoration: underline;
    word-break: break-word;
    white-space: normal;
    margin-bottom: 15px;
    margin-top: 15px;
}

.side-cc-cls {
    box-shadow: 0px 0px 8px #40b5ff;
/*    padding: 5px;*/
    height: fit-content;
    max-height: 60vh;
    border-radius: 7px;
    overflow: auto;
}

.vstep-item.active{
	clip-path: none;
	background: #003392;
	color: #fff;
}


.vstep-item:hover {
	background: #0059ff;
	color: #fff;
}


.vform-wrapper {
/*    background: linear-gradient(45deg, #ffffff9e, #fefefe9e), url(../db_img/assignment-bg.png);*/
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 0px 15px #21a2f4;
    min-height: 400px;
    background-size: cover;
   background-position: top;
    backdrop-filter: blur(10px);
	background: #fff;
}



.vstep-form { display: none; }
.vstep-form.active { display: block; }

@page {
    margin: 0;
}

@media print {
    body {
        margin: 1.5cm;
    }

    .header,
    .app-sidebar,
    .side-cc-cls,
    .assignmenent-cb-header-area,
    .bottom-btn-area,
    .assignment-card-header {
        display: none !important;
    }

    .col-xxl-2, .col-xxl-10 {
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    .preview-answer-html img,
    .preview-answer-html table {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}


@media (max-width: 768px) {
    .vstep-item {
        padding: 10px;
    }
    .vstep-icon {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }
}
@media (max-width: 767px) {
	.vstep-list {
		display: flex;
		flex-direction: row;
		width: 100%;
		overflow: auto;
		gap: 10px;
		justify-content: start;
		flex-wrap: nowrap;
		margin: 0px;
		padding: 10px;
}
.assignment-cb-center, .assignment-cb-left,.assignmenent-cb-header-area{
	justify-content: center;
}
.vform-wrapper{
	margin-top: 30px;	
}
.vstep-item.active {
    clip-path: none;

}
/*    .vstep-item {*/
/*	min-width: 180px;*/
/*	}*/
	.vstep-icon {
    width: 45px;
    height: 45px;
    font-size: 15px;
}
}

/* Student Assignment Multi Step Form */


/* Student Assignment Question Answer */
.student-assignment-question-answer-area{
	display: flex;
	flex-direction: column;
	gap: 15px;
	flex-wrap: wrap;
	padding: 5px;
}

.section-heading-area {
    color: #000;
    font-size: 22px;
    font-weight: 600;
    word-break: break-word;
    white-space: normal;
    margin: 0px;
    text-align: center;
    text-decoration: underline;
}

.question-instruction-text{
	color: #000;
		font-size: 20px;
		font-weight: 600;
		word-break: break-word;
		white-space: normal;
		margin: 0px;
}

.question-text{
	color: #000;
	font-size: 18px;
	font-weight: 600;
	word-break: break-word;
	white-space: normal;
	margin: 0px;
}
.bold-question{
	font-weight: 600 !important;
}
.student-assignment-answer-area{
	
}
.custom-file-upload::file-selector-button {
  background-color: #1d537a; /* Bootstrap primary blue */
  color: white;
}


.list-style-alpha{
	list-style: lower-alpha;
}
.student-assignment-question-area ul{
/*	padding: 0px;*/
	margin: 0px;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: 5px;
}
.student-assignment-question-area ul li{
	margin: 0px;
}
.student-assignment-question-area ul li p{
	color: #000;
	font-size: 16px;
	font-weight: 500;
	word-break: break-word;
	white-space: normal;
	margin: 0px;
}
.student-assignment-question-area ul li::marker{
	color: #000;
}
/* Student Assignment Question Answer */

	/** Student Assignment View **/
	
	
	
	
	/*** Counsellor Assignment Evaluate ***/
	.counsellor-assignmet-card{
		width: 100%;
		border-radius: 7px;
		background: #fff;
		min-height: 80px;
		box-shadow: 0px 0px 15px #2080c354;
		padding: 15px;
	}
	.ca-view-header-area{
		display: flex;
		flex-direction: row;
		width: 100%;
		flex-wrap: wrap;
		gap: 10px;
		justify-content: space-between;
		background: #d3e8ff;
		border-radius: 5px;
		padding: 10px;
		border: 2px solid #82beff;
		box-shadow: 0px 0px 15px #6aacf3b8;
	}
	.ca-header-left-area{
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
				gap: 5px;
	}
	.ca-upper-heading-area{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 10px;
		align-items: center;
	}
	.ca-upper-heading-area h6{
		color: #000;
		font-size: 20px;
		margin: 0px;
		word-break: break-word;
		white-space: normal;
		font-weight: 600;
	}
	.ca-upper-heading-area p{
		color: #323131;
		font-size: 20px;
		margin: 0px;
		word-break: break-word;
		white-space: normal;
		font-weight: 600;
	}
	.ca-upper-heading-area p span{
		font-weight: 400 !important;
	}
	.ca-details-area ul{
		margin: 0px;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 10px;
		list-style: none;
		padding: 0px;
		}
		.ca-details-area ul li{
			margin: 0px;
			padding: 0px;
		}
		.ca-details-area ul li p{
			color: #000;
					font-size: 16px;
					margin: 0px;
					word-break: break-word;
					white-space: normal;
					font-weight: 600;
		}
		.ca-details-area ul li p span{
			font-weight: 400 !important;
		}
		.ca-index-area {
		    background: #fff;
		    padding: 10px;
		    display: flex;
		    flex-direction: row;
		    flex-wrap: wrap;
		    gap: 5px;
		    border-radius: 5px;
		    justify-content: center;
		}
		.ca-index-text{
			color: #000;
			font-size: 14px;
			margin: 0px;
			word-break: break-word;
			white-space: normal;
			font-weight: 600;
			background: #fff;
			padding: 5px;
			border-radius: 5px;
			box-shadow: 0px 0px 15px #a5d0ff;
			display: flex;
			gap: 3px;
			align-items: center;
		}
		.ca-index-text.current span{
			color: #1e385f;
		}
		.ca-index-text.attempted span{
			color: #0b9d10;
		}
		.ca-index-text.not-attempted span{
					color: #9d0b0b;
				}
		
		/* Counsellor Assignment View Multi Step Form */
		/* Step List Container */
		.v2-step-list {
			list-style: none;
			padding: 5px;
			display: flex;
			flex-direction: column;
			gap: 10px;
		}

		.v2-step-item {
			display: flex;
			align-items: center;
			gap: 12px;
			padding: 12px;
			margin-bottom: 0px;
			cursor: pointer;
			border-radius: 5px;
			background: #fff;
			transition: 0.3s;
			box-shadow: 0px 0px 4px #10b7fd;
		}

		.v2-step-icon {
		    width: 42px;
		    height: 42px;
		    border-radius: 50%;
		    background: #dcdcdc;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    font-size: 18px;
		}

		.v2-step-item.active .v2-step-icon {
		    background: #007bff;
		    color: white;
		}

		.v2-step-item.completed {
			background: #eafff4;
			color: #000;
			border-left: 3px solid #00d769;
		}
		.view-student-response-btn{
			color: #fff;
			font-size: 16px;
			font-weight: 600;
			word-break: break-word;
			white-space: normal;
			padding: 8px 10px;
			border-radius: 7px;
			height: fit-content;
			cursor: pointer;
			background: #068397;
			display: flex;
			gap: 3px;
			align-items: center;
			width: fit-content;
		}



		.v2-question-area {
		    padding: 4px 8px;
		}

		.list-style-alpha::marker{
			color: #000 !important;
		}

		.v2-tbl-toggle-bn {
		    background: linear-gradient(45deg, #1a83ea, #1097e7);
		    color: #fff;
		    font-size: 16px;
		    font-weight: 600;
		    border: none;
		    padding: 7px 18px;
		    border-radius: 7px;
		}

		.v2-tbl-1-cls table thead>tr:first-child>th:first-child,
		.v2-tbl-1-cls table tbody>tr:first-child>td:first-child {
		    min-width: 150px !important;
		    width: 150px !important;
		    max-width: fit-content !important;
		}

		.v2-tbl-1-cls table thead tr th,
		.v2-tbl-1-cls table tbody tr td {
		    min-width: 150px !important;
		    width: 150px !important;
		}

		.v2-add-btn-column {
		    background: linear-gradient(45deg, #033c75, #1d7eddbf);
		    color: #fff;
		    font-size: 16px;
		    font-weight: 600;
		    border: none;
		    padding: 7px 18px;
		    border-radius: 7px;
		}

		.v2-step-item.completed .v2-step-icon {
		    background: #28a745;
		    color: white;
		}

		.v2-single-heading-txt {
		    color: #000;
		    font-size: 17px;
		    text-decoration: underline;
		    word-break: break-word;
		    white-space: normal;
		    margin-bottom: 15px;
		    margin-top: 15px;
		}

		.v2-side-cc-cls {
			box-shadow: 0px 0px 8px #40b5ff;
			/* padding: 5px; */
			height: fit-content;
			max-height: 60vh;
			border-radius: 7px;
			overflow: auto;
			position: sticky;
			    top: 10vh;
		}

		.v2-step-item.active {
			background: #d6eaff;
			color: #000;
			border-left: 3px solid #1b88ff;
		}
		.v2-step-item.incomplete {
			background: #fbe4e4;
			color: #000;
			border-left: 3px solid #ff1b1b;
				}
				
		.max-marks-txt{
			color: #000;
			font-size: 16px;
			margin: 0px;
			word-break: break-word;
			white-space: normal;
			font-weight: 600;
		}		
		.max-marks-txt span{
			font-weight: 400 !important;
		}

		.v2-step-item:hover {
		    background: #e8f0ff;
		}

		.v2-form-wrapper {
/*			background: linear-gradient(45deg, #ffffff9e, #fefefe9e), url(../db_img/assignment-bg.png);*/
			padding: 25px;
			border-radius: 8px;
			box-shadow: 0 0px 15px #21a2f4;
			min-height: 400px;
			background-size: cover;
			background-position: top;
			backdrop-filter: blur(10px);
			background: #fff;
		}

		.v2-label-txt {
		    color: #000 !important;
		    font-size: 16px !important;
		    font-weight: 500 !important;
		    margin: 0px;
		    word-break: keep-all;
		    white-space: normal;
		}

		.v2-step-form { display: none; }
		.v2-step-form.active { display: block; }
		/* Counsellor Evaluation Assignment Evaluate Screen */
		.ca-view-fw-content-area{
			display: flex;
			flex-direction: column;
			gap: 10px;
			flex-wrap: wrap;
		}
		
		.ca-view-fw-heading-note-area{
			display: flex;
			flex-direction: column;
			gap: 7px;
			flex-wrap: wrap;
			
		}
		.ca-view-fw-heading-note-area h6{
			color: #000;
			font-size: 22px;
			font-weight: 600;
			text-align: center;
			text-decoration: underline;
			margin: 0px;
				word-break: keep-all;
				white-space: normal;
		}
		
								.ca-view-fw-heading-note-area p.bold-text-cc {
									color: #000;
									font-size: 20px;
									font-weight: 600;
									text-align: start;
									margin: 0px;
									word-break: keep-all;
									white-space: normal;
								}
				
								.ca-view-fw-heading-note-area p.normal-text-cc {
									color: #000;
									font-size: 20px;
									font-weight: 600;
									text-align: start;
				
									margin: 0px;
									word-break: keep-all;
									white-space: normal;
								}
								
								.ca-view-fw-question-area {
								    padding: 5px;
								    background: #d3e8ff3d;
								    border-radius: 5px;
								    min-height: 50px;
								    border: 2px solid #80beff;
								    backdrop-filter: blur(10px);
								}
								.ca-view-fw-question-area ul li::marker{
									color: #000;
									font-weight: 600;
								}
								.ca-view-fw-question-area p{
									color: #000;
									font-size: 18px;
									font-weight: 600;
									text-align: start;
									margin: 0px;
									word-break: keep-all;
									white-space: normal;
								}
								.ca-view-fw-reference-answer-area{
									padding: 10px;
									background: #a3ffcd4a;
									min-height: 80px;
									border-radius: 5px;
									border-left: 3px solid #03b655;
									backdrop-filter: blur(10px);
								}
																.ca-view-fw-reference-answer-area h6 {
																	color: #000;
																	font-size: 16px;
																	font-weight: 600;
																	text-align: start;
																	margin: 0px 0px 10px 0px;
																	word-break: keep-all;
																	white-space: normal;
																}
																
																.ca-view-fw-reference-answer{
																	width: 100%;
																	border-radius: 5px;
																	background: #fff;
																	padding: 10px;
																}										
																
.ca-view-fw-reference-answer p {
	color: #000;
	font-size: 16px;
	font-weight: 400;
	text-align: justify;
	margin: 0px;
	word-break: keep-all;
	white-space: normal;
}
.ca-view-fw-marking-rubrics-area{
	padding: 10px;
	background: #c6d0d95e;
	min-height: 80px;
	border-radius: 5px;
	border-left: 3px solid #5b5b5b;
	backdrop-filter: blur(10px);
}
.ca-view-fw-marking-rubrics-area h6 {
	color: #000;
	font-size: 16px;
	font-weight: 600;
	text-align: start;
	margin: 0px 0px 10px 0px; 
	word-break: keep-all;
	white-space: normal;
}
.ca-view-fw-marking-rubrics {
	width: 100%;
	border-radius: 5px;
	background: #fff;
	padding: 10px;
}

.ca-view-fw-marking-rubrics ul{
	margin: 0px;

}
.ca-view-fw-marking-rubrics ul li::marker{
	color: #000;
}
.ca-view-fw-marking-rubrics ul li{
	padding: 0px;
	margin: 0px;
}
.ca-view-fw-marking-rubrics ul li p{
	margin: 0px;
	font-size: 16px;
		font-weight: 600;
		text-align: start;
		margin: 0px;
		word-break: keep-all;
		white-space: normal;
		color: #000;
}
.ca-view-fw-marking-rubrics ul li p span{
	font-weight: 400 !important;
}


.ca-view-fw-student-answer-area {
    padding: 10px;
    background: #c6d2ff63;
    min-height: 80px;
    border-radius: 5px;
    border-left: 3px solid #2f4ce8;
    backdrop-filter: blur(10px);
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex-wrap: wrap;
}
.ca-view-fw-student-answer-area h6 {
	color: #000;
	font-size: 16px;
	font-weight: 600;
	text-align: start;
	margin: 0px 0px 10px 0px; 
	word-break: keep-all;
	white-space: normal;
}
.ca-view-fw-student-answer {
	width: 100%;
	border-radius: 5px;
	background: #fff;
	padding: 10px;
}
.ca-view-fw-student-answer p{
	color: #000;
	font-size: 16px;
		font-weight: 400;
		text-align: start;
		margin: 0px; 
		word-break: keep-all;
		white-space: normal;
}

.ca-view-fw-student-marks-area{
	padding: 10px;
	width: 100%;
	
	border-radius: 7px;
	background: #fff;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 5px;
	align-items: center;
}
.ca-view-marks-btn-left,.ca-view-marks-inp-right{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 7px;
	align-items: center;
}
.ca-view-marks-btn-left a,.ca-view-marks-inp-right a{
	padding: 5px 7px;
	border-radius: 7px;
	font-size: 16px;
	font-weight: 600;
	word-break: break-word;
	height: fit-content;
				white-space: normal;
				display: flex;
				gap: 3px;
				flex-wrap: wrap;
				align-items: center;
}
.ca-view-marks-btn-left .incorrect-btn{
	background: #ffd5d5;
	color: #9f0404;
}
.ca-view-marks-btn-left .partially-correct-btn{
	background: #ffead3;
	color: #9f5004;
}
.ca-view-marks-btn-left .correct-btn{
	background: #dcffd8;
	color: #276b00;
}
.ca-view-marks-btn-left .comment-btn{
	background: #d8e4ff;
	color: #00266b;
}
.ca-view-marks-inp-right .edit-marks-btn{
	background: #dcdfff;
	color: #2a4ea2;
}
.ca-view-marks-inp-right .save-marks-btn{
	background: #dcf0ff;
	color: #005f71;
}

.save-btn-new-v2{
	background: #058e6c;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	border: none;
	padding: 7px 18px;
	display: flex;
	border-radius: 7px;
	gap: 3px;
	align-items: center;
	cursor: pointer;
}
.save-btn-new-v2:hover {
    background: #007588;
    color: #fff;
}
.v2-next {
    background: #0d488d;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border: none;
    padding: 7px 18px;
    display: flex;
    border-radius: 7px;
    gap: 3px;
    align-items: center;
}
.v2-next:hover {
    background: #05356c;
    color: #fff;
}

.v2-prev {
    background: #996f17;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border: none;
    padding: 7px 18px;
    border-radius: 7px;
    display: flex;
    gap: 3px;
    align-items: center;
}
.v2-prev:hover {
    background: #75530b;
    color: #fff;
}
.v2-step-item{
	flex-direction: column;
	flex-wrap: wrap;
	gap: 5px;
	justify-content: start;
}
.v2-step-item p{
	color: #000;
			font-size: 15px;
			font-weight: 400;
			text-align: start;
			margin: 0px;
			word-break: keep-all;
			white-space: normal;
}
.marking-details{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 5px;
}

.marking-details p{
	color: #000;
		font-size: 14px;
		font-weight: 600 !important;
		text-align: start;
		margin: 0px;
		word-break: keep-all;
		white-space: normal;
}
.marking-details p span{

		font-weight: 400 !important;
}
.ca-marks-input .invalid-feedback{
	margin: 0px;
	word-break: break-word;
	white-space: normal;
}
		/* Counsellor Evaluation Assignment Evaluate Screen */

		@media (max-width: 768px) {
		    .v2-step-item {
		        padding: 10px;
		    }
		    .v2-step-icon {
		        width: 38px;
		        height: 38px;
		        font-size: 16px;
		    }
		}

		@media (max-width: 767px) {
		    .v2-step-list {
		        display: flex;
		        flex-direction: row;
		        width: 100%;
		        overflow: auto;
		        gap: 10px;
		    }
		    .v2-form-wrapper {
		        margin-top: 30px;
		    }
		    .v2-step-item.active {
		        clip-path: none;
		    }
		    .v2-step-item {
		        min-width: 180px;
		    }
		    .v2-step-icon {
		        width: 45px;
		        height: 45px;
		        font-size: 15px;
		    }
		}
		/* Counsellor Assignment View Multi Step Form */	
		
		
		.word-break{
			word-break: break-word;
			white-space: normal;
		}	
	/*** Counsellor Assignment Evaluate ***/
	


	
	
	
/**** Counsellor Dashboard ****/
.csd-welcome-banner-area{
	padding: 10px;
	border-radius: 5px;
	background: #ddeeff;
	box-shadow: 0px 0px 15px #6aacf3cc;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: 10px;
}
.csd-banner-upper-area h6{
	color: #000;
	font-size: 20px;
	font-weight: 600;
	margin: 0px;
	word-break: break-word;
	white-space: normal;
}
.csd-banner-upper-area h6 span{
	font-weight: 400 !important;
}
.csd-banner-bottom-area ul{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	list-style: none;
	gap: 15px;
	justify-content: start;
	margin: 0px;
	padding-left: 5px;
}
.csd-banner-bottom-area ul li{
	margin: 0px;
}
.csd-banner-bottom-area ul li p{
	color: #535252;
	font-size: 16px;
	font-weight: 600;
	margin: 0px;
	word-break: break-word;
	white-space: normal;
}
.csd-box-area{
	width: 100%;
	margin-top: 20px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 15px;

}
.csd-box{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 10px 15px;
	width: 100%;
/*	max-width: 380px;*/
	min-height: 120px;
	background: #fff;
	border-radius: 5px;
	align-items: center;
	box-shadow: 0px 0px 15px #2e3d4f30;
}

.csd-box-left{
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex-wrap: wrap;
	
}

.csd-box-left h6{
	color: #000;
	font-size: 16px;
	font-weight: 500;
	margin: 0px;
	word-break: break-word;
	white-space: normal;
}
.csd-box-left h5{
	color: #000;
			font-size: 22px;
			font-weight: 600;
			margin: 0px;
			word-break: break-word;
			white-space: normal;	
}
.csd-box-left p{
	
			font-size: 12px;
			font-weight: 400;
			margin: 0px;
			word-break: break-word;
			white-space: normal;	
}
.csd-icon-box{
	width: 60px;
	height: 60px;
	border-radius: 5px;
	font-size: 40px;
	align-content: center;
	text-align: center;
}
.csd-assigned-card .csd-icon-box {
    background: #d3e8ff;
    color: #004a9a;
}

.csd-assigned-card .csd-box-left p{
	color: #004a9a;
}

.csd-completed-card .csd-icon-box {
	background: #e1ffe5;
	color: #097000;
}
.csd-completed-card .csd-box-left p{
	color: #109304;
}

.csd-pending-card .csd-icon-box {
	background: #fff3e1;
	color: #ad6800;
}
.csd-pending-card .csd-box-left p{
	color: #915802;
}
.csd-batch-card .csd-icon-box {
	background: #ffe1e1;
	color: #ad0000;
}
.csd-batch-card .csd-box-left p{
	color: #ad0000;
}

.csd-card {
    box-shadow: 2px 0px 12px 0px #70BFFF;
    background: #fff;
    border-radius: 5px;
    min-height: 150px;
}
.csd-card-header,.custom-csd-card-header{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 5px;
	padding: 10px;
	align-items: center;
}
.custom-csd-card-header {
    background: #0b4771;
    border-radius: 5px 5px 0px 0px;
}
.custom-csd-card-header h6{
	color: #fff;
		font-size: 22px;
		margin: 0px;
		word-break: break-word;
		white-space: normal;
		font-weight: 600;
}
.csd-card-header h6{
	color: #000;
	font-size: 22px;
	margin: 0px;
	word-break: break-word;
	white-space: normal;
	font-weight: 600;
}

.csd-card-index-area{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-evenly;
	gap: 5px;
	background: var(--lightigbg);
	border-radius: 5px;
	padding: 5px;
	width: 100%;
	max-width: 400px;
}
.csd-index-text{
	margin: 0px;
	background: #fff;
	padding: 5px 7px;
	border-radius: 5px;
	color: #000;
	display: flex;
	align-items: center;
	gap: 5px;
	font-weight: 500;
}
.csd-index-text.active span{
	color: #199928;
}
.csd-index-text.pending span{
	color: #ab7e0f;
}
.csd-index-text.due span{
	color: #d51616;
}
.csd-index-text.overdue span{
	color: #910303;
}

.csd-view-assignment-queue-btn{
	padding: 5px 7px;
	border-radius: 5px;
	background: linear-gradient(45deg, #1a86e3, #00b48c);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
}
.csd-card-body{
	padding: 15px;
}
thead,thead tr th{
    background: #074a75 !important;
    color: #fff !important;
	text-align: center !important;
	border-right: 1px solid #c9c5c5;
}
tbody tr td{
	text-align: center !important;
	border-right: 1px solid #c9c5c5;
	align-content: center;
}
.tbl-btn-label{
	padding: 5px 7px;
	border-radius: 5px;
	font-size: 14px;
	word-break: break-word;
	white-space: normal;
}
.tbl-btn-label.completed{
	background: #4ae85b45;
	color: #097000;
}
.tbl-btn-label.pending{
	background: #f8ae1345;
	color: #705b00;
}
.tbl-btn-label.due{
	background: #ff686845;
	color: #700000;
}
.action-btn-tbl {
    display: flex;
    gap: 3px;
    word-break: break-word;
    white-space: normal;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: #007099;
    border-radius: 5px;
    padding: 5px 7px;
    width: fit-content;
    height: fit-content;
    align-items: center;
    justify-self: center;
    text-align: center;
}
/* ===========================================================
   ALERTS & NOTIFICATIONS — Custom CSS Marquee (no <marquee> tag)
   =========================================================== */
.view-all-notifications-btn{
	padding: 5px 7px;
	border-radius: 5px;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	background: linear-gradient(182deg, #01507c, #1e385f);
}

.csd-notif-marquee-wrapper {
    overflow: hidden;
    position: relative;
    height: 308px; 
    border-radius: 10px;
}

/* Faint top/bottom fade masks for polish */
.csd-notif-marquee-wrapper::before,
.csd-notif-marquee-wrapper::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 32px;
    z-index: 2;
    pointer-events: none;
}
.csd-notif-marquee-wrapper::before {
    top: 0;
    background: linear-gradient(to bottom, #fff 0%, transparent 100%);
}
.csd-notif-marquee-wrapper::after {
    bottom: 0;
    background: linear-gradient(to top, #fff 0%, transparent 100%);
}

/* The scrolling track — vertical marquee via translateY animation */
.csd-notif-marquee-track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* total height = 6 items × ~86px each; animation moves up by 50% (3 real items) */
    animation: csd-notif-scroll 10s linear infinite;
}

/* Pause on hover — animation-play-state: paused */
.csd-notif-marquee-wrapper:hover .csd-notif-marquee-track {
    animation-play-state: paused;
}

@keyframes csd-notif-scroll {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

/* Individual notification card */
.csd-notif-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    border-left: 4px solid transparent;
    background: #f8fafd;
    flex-shrink: 0;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    cursor: default;
	align-items: center;
}

.csd-notif-item:hover {
    background: #eef5fd;
    box-shadow: 0 2px 10px rgba(1, 80, 124, 0.08);
}

/* Type-specific left-border + bg tint */
.csd-notif-item.overdue-notif {
    border-left-color: #d52c2c;
    background: #fff5f5;
}
.csd-notif-item.overdue-notif:hover { background: #ffe8e8; }

.csd-notif-item.warning-notif {
    border-left-color: #e59152;
    background: #fffaf4;
}
.csd-notif-item.warning-notif:hover { background: #fff0de; }

.csd-notif-item.info-notif {
    border-left-color: #01507c;
    background: #f0f7fd;
}
.csd-notif-item.info-notif:hover { background: #dceaff; }

/* Icon circle */
.csd-notif-icon-wrap {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
}
.overdue-icon  { background: #fde8e8; color: #d52c2c; }
.warning-icon  { background: #fdf0e0; color: #e59152; }
.info-icon     { background: #dceaff; color: #01507c; }

/* Notification text */
.csd-notif-content p {
    font-size: 14px;
    color: #3a4256;
    line-height: 1.5;
    margin: 0 0 4px 0;
}
.csd-notif-content p strong {
    color: #1e2a3a;
    font-weight: 600;
}

/* Sender + timestamp line */
.csd-notif-meta {
    font-size: 13px;
    color: #264382;
    letter-spacing: 0.01em;
}


.csd-ep-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.csd-ep-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.csd-ep-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.csd-ep-label {
    font-size: 13.5px;
    font-weight: 500;
    color: #1e2a3a;
    word-break: break-word;
    white-space: normal;
}

.csd-ep-percent {
    font-size: 13.5px;
    font-weight: 700;
    color: #1e2a3a;
    flex-shrink: 0;
}

/* Bootstrap .progress track override */
.csd-ep-progress {
    height: 10px;
    border-radius: 20px;
    background-color: #e4edf7;
    overflow: hidden;
}

/* Base bar — no width here, set per class below */
.csd-ep-bar {
    height: 100%;
    border-radius: 20px;
    transition: width 0.6s ease;
}

/* ── Colour variants (match existing csd-index-text dot colours) ── */
.csd-ep-bar--active {
    background: linear-gradient(90deg, #45C343, #199928);
}

.csd-ep-bar--pending {
    background: linear-gradient(90deg, #EAC357, #ab7e0f);
}

.csd-ep-bar--due {
    background: linear-gradient(90deg, #f26161, #d51616);
}

.csd-ep-bar--overdue {
    background: linear-gradient(90deg, #c94444, #910303);
}

/* ── Width classes — one per value, zero inline styles ── */
.csd-ep-w75 { width: 75%; }
.csd-ep-w74 { width: 74%; }
.csd-ep-w58 { width: 58%; }
.csd-ep-w41 { width: 41%; }
.csd-ep-w35 { width: 35%; }

/* ── Deadline alert strip ── */
.csd-ep-deadline-alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 16px;
    padding: 10px 12px;
    background: #fff3f3;
    border: 1px solid #f5c6c6;
    border-radius: 7px;
}

.csd-ep-deadline-icon {
    color: #d51616;
    font-size: 15px;
    flex-shrink: 0;
    padding-top: 1px;
}

.csd-ep-deadline-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    word-break: break-word;
    white-space: normal;
    color: #5a1a1a;
}

.csd-ep-deadline-bold {
    font-weight: 700;
    color: #d51616;
}

.csd-ep-deadline-info {
    font-weight: 400;
    color: #7a2a2a;
}
/**/

.custom-cls-upload-area-sa .view-answer-pdf-btn {
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	word-break: break-word;
	white-space: normal;
	padding: 6px 10px;
	border-radius: 7px;
	height: fit-content;
	cursor: pointer;
	width: fit-content;
	background: #004f7e;
}

.custom-cls-upload-area-sa{
	display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}
.custom-cls-upload-area-sa .custom-file-upload{
	max-width: 320px;
	height: fit-content;
	margin: 0px;
}
.custom-cls-upload-area-sa .file-count-badge {
	font-weight: 400;
}
.single-pdf-input-blue::file-selector-button,
.single-pdf-input-blue::-webkit-file-upload-button {
	background-color: #1d537a;
	color: #fff;
	border: none;
	border-radius: 4px;
	padding: 6px 12px;
	margin-right: 10px;
	cursor: pointer;
}
.view-btn-filename-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}
.view-btn-filename-wrap .file-count-badge {
	margin: 0px;
	max-width: 160px;
	word-break: break-word;
	white-space: normal;
	text-align: center;
	font-size: 12px;
}
.uploaded-files-chip-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 6px;
	width: 100%;
}
.uploaded-files-chip-list .file-chip {
	font-size: 12px;
	padding: 3px 8px;
	border-radius: 12px;
	background: #eef3f7;
	color: #333;
	word-break: break-word;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.file-chip-delete-btn {
	border: none;
	background: transparent;
	color: #8e0000;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}
.file-chip-delete-btn:disabled {
	color: #aaa;
	cursor: not-allowed;
}
.answer-file-heading {
	font-weight: 600;
	margin: 10px 0 5px;
	color: #004f7e;
}
.answer-file-edit-link {
	font-weight: 400;
	font-size: 13px;
	color: #0a84ff;
	text-decoration: underline;
	cursor: pointer;
	margin-left: 8px;
}
.answer-file-image {
	display: block;
	max-width: 100%;
	margin: 10px auto;
	border: 1px solid #ddd;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.preview-answer-files .answer-file-image,
.preview-answer-files canvas {
	max-width: 100%;
	margin: 10px 0;
}
/**/
/**** Counsellor Dashboard ****/

/*** Counsellor Assignment Queue ***/
.caq-banner-area{
	padding: 10px;
	border-radius: 5px;
	background: #ddeeff;
	box-shadow: 0px 0px 15px #6aacf3cc;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: 10px;
}
.caq-banner-upper-area h6 {
    color: #000;
    font-size: 20px;
    font-weight: 600;
    margin: 0px;
    word-break: break-word;
    white-space: normal;
}
.caq-banner-upper-area h6 span{
	font-weight: 400 !important;
}
.caq-banner-bottom-area ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    list-style: none;
    gap: 15px;
    justify-content: start;
    margin: 0px;
    padding-left: 5px;
}
.caq-banner-bottom-area ul li {
    margin: 0px;
    display: flex;
    align-items: center;
    gap: 3px;
    word-break: break-word;
    white-space: normal;
}
.caq-banner-bottom-area ul li i{
	font-size: 8px;
}
.caq-banner-bottom-area ul li p {
    color: #535252;
    font-size: 16px;
    font-weight: 600;
    margin: 0px;
    word-break: break-word;
    white-space: normal;
}
.caq-box-area{
	width: 100%;
	margin-top: 20px;
	margin-bottom: 20px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 15px;
}

.caq-box{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 10px 15px;
	width: 100%;
	/* max-width: 380px; */
	min-height: 120px;
	background: #fff;
	border-radius: 5px;
	align-items: center;
	box-shadow: 0px 0px 15px #2e3d4f30;
}
.caq-box-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-wrap: wrap;
}
.caq-box-left h6 {
    color: #000;
    font-size: 16px;
    font-weight: 500;
    margin: 0px;
    word-break: break-word;
    white-space: normal;
}
.caq-box-left h5 {
    color: #000;
    font-size: 22px;
    font-weight: 600;
    margin: 0px;
    word-break: break-word;
    white-space: normal;
}
.caq-assigned-card .caq-box-left p {
    color: #004a9a;
}
.caq-box-left p {
    font-size: 12px;
    font-weight: 400;
    margin: 0px;
    word-break: break-word;
    white-space: normal;
}
.caq-icon-box {
    width: 60px;
    height: 60px;
    border-radius: 5px;
    font-size: 40px;
    align-content: center;
    text-align: center;
}
.caq-assigned-card .caq-icon-box {
    background: #d3e8ff;
    color: #004a9a;
}
.caq-completed-card .caq-box-left p {
    color: #109304;
}
.caq-completed-card .caq-icon-box {
    background: #e1ffe5;
    color: #097000;
}
.caq-pending-card .caq-box-left p {
    color: #915802;
}
.caq-pending-card .caq-icon-box {
    background: #fff3e1;
    color: #ad6800;
}
.caq-batch-card .caq-box-left p {
    color: #ad0000;
}
.caq-batch-card .caq-icon-box {
    background: #ffe1e1;
    color: #ad0000;
}

.caq-card {
    box-shadow: 2px 0px 12px 0px #70BFFF;
    background: #fff;
    border-radius: 5px;
    min-height: 150px;
}
.caq-card-header, .custom-caq-card-header {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    padding: 10px;
    align-items: center;
}
.custom-caq-card-header {
    background: #0b4771;
    border-radius: 5px 5px 0px 0px;
}
.custom-caq-card-header h6 {
    color: #fff;
    font-size: 22px;
    margin: 0px;
    word-break: break-word;
    white-space: normal;
    font-weight: 600;
}
.caq-card-body {
    padding: 15px;
}
/*** Counsellor Assignment Queue ***/
/** Assignment Template Generate   **/
.at-template-header-banner {
	width: 100%;
	box-sizing: border-box;
	padding: 36px 40px 30px;
	min-height: 100px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	background:
		radial-gradient(120% 140% at 100% 0%, #1c3557 0%, transparent 55%),
		linear-gradient(160deg, #12233b 0%, #0d1a2d 100%);
	border-radius: 18px;
	position: relative;
	overflow: hidden;
	justify-self: center;
	box-shadow: 0 24px 48px -28px rgba(18, 35, 59, .6);
}

.at-banner-top-shape {
	position: absolute;
	inset: 0;
	top: auto;
	right: auto;
	left: auto;
	width: 100%;
	height: 100%;
	border-radius: 0;
	background: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
	background-size: 34px 34px;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(180deg, #000, transparent 70%);
	mask-image: linear-gradient(180deg, #000, transparent 70%);
}

.at-banner-top-shape-2 {
	position: absolute;
	top: 0;
	right: 0;
	left: auto;
	width: 6px;
	height: 100%;
	border-radius: 0;
	background: linear-gradient(180deg, var(--accent), #f0a06f);
	display: none;
}

.at-banner-upper-area,
.at-banner-bottom-area {
	display: flex;
	flex-direction: column;
	gap: 12px;
	position: relative;
	z-index: 1;
}

.at-banner-upper-area h5 {
	margin: 0;
	color: #fff;
	font-weight: 600;
	font-size: 34px;
	text-align: left;
	word-break: break-word;
	white-space: normal;
}

.at-banner-upper-area h5::before {
	content: "Course toolkit";
	display: block;

	font-weight: 600;
	font-size: 12px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 12px;
	display: none;
}

.at-banner-upper-area p {
	margin: 0;
	color: #fff;
}

.at-banner-bottom-area h6 {
	margin: 0;
	color: #c3d0e2;
	font-weight: 400;
	font-size: 16px;
	text-align: left;
	word-break: break-word;
	white-space: normal;
}


.hb-btm-label-area {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 6px;
}

.hb-btm-label-area p {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 7px 13px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .16);
	background: rgba(255, 255, 255, .05);
	backdrop-filter: blur(6px);
	color: #fff;

	font-weight: 600;
	font-size: 13px;
	transition: border-color .2s, background .2s;
}

.hb-btm-label-area p:hover {
	border-color: var(--accent);
	background: rgba(229, 100, 60, .12);
}

.hb-btm-label-area p::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent);
	flex: none;
}

.hb-btm-label-area p span {
	font-weight: 400 !important;
	color: #9fb0c6;
}


.at-template-workflow-area {
	background: var(--paper);
	border: 1px solid var(--line);
	min-height: 90px;
	padding: 30px 34px;
	width: 100%;
	box-sizing: border-box;
	justify-self: center;
	margin-top: 20px;
	margin-bottom: 15px;
	border-radius: 18px;
	position: relative;
}

.at-template-workflow-area>p {
	margin: 0;
	color: var(--ink-soft);

	font-weight: 400;
	font-size: 15.5px;

	text-align: left;
	word-break: break-word;
}

.at-template-workflow-area>p span {
	display: inline-block;

	font-weight: 600 !important;
	font-size: 19px !important;
	color: var(--ink) !important;
	margin-bottom: 0px;
}

.at-template-workflow-area>p strong {
	color: var(--accent-ink);
	font-weight: 600;
}


.at-template-workflow-area ul {
	list-style: none;
	margin: 10px 0 0;
	padding: 0 0 0 8px;
	display: flex;
	flex-direction: column;
	gap: 0;
	position: relative;
	counter-reset: step;
}

.at-template-workflow-area ul::before {
	content: "";
	position: absolute;
	left: 19px;
	top: 14px;
	bottom: 14px;
	width: 2px;
	background: linear-gradient(180deg, var(--accent), var(--teal));
	opacity: .35;
	display: none;
}

.at-template-workflow-area ul li {
	margin: 0;
	position: relative;
	padding: 12px 12px 12px 52px;
	counter-increment: step;
}

.at-template-workflow-area ul li::marker {
	content: none;
}

.at-template-workflow-area ul li::before {
	content: counter(step);
	position: absolute;
	left: 6px;
	top: 10px;
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--accent);
	color: var(--accent-ink);

	font-weight: 600;
	font-size: 13px;
	z-index: 1;
}

.at-template-workflow-area ul li p {
	margin: 0;
	color: var(--ink);

	font-weight: 500;
	font-size: 15px;
	line-height: 1.55;
	text-align: left;
	word-break: break-word;
}

.at-template-workflow-area ul li p i {
	color: var(--accent);
	margin: 0 3px;
	font-size: 12px;
}

.at-accordion-structure-area {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
    flex-wrap: wrap;
}

.at-accordion-structure-area .at-accordion-item .accordion-button{
	color: #000;
	font-size: 20px;
	display: flex;
	gap: 7px;
	padding: 10px 15px;
}

.at-accordion-item .ac-it-1.accordion-button i,
.at-accordion-item .ac-it-2.accordion-button i,
.at-accordion-item .ac-it-3.accordion-button i,
.at-accordion-item .ac-it-4.accordion-button i,
.at-accordion-item .ac-it-5.accordion-button i {
	padding: 6px;
	font-size: 20px;
	width: 40px;
	height: 40px;
	align-content: center;
	border-radius: 5px;
}
.at-accordion-item .ac-it-1.accordion-button i{
	color: #003e96;
	background: #d6e8ff;
}
.at-accordion-item .ac-it-2.accordion-button i{
	background: #ffefd6;
	color: #9d6205;	
}
.at-accordion-item .ac-it-3.accordion-button i{
	background: #f9fcd3;
	color: #6e7104;	
}
.at-accordion-item .ac-it-4.accordion-button i{
	background: #f1ffd6;
	color: #1d8607;	
}
.at-accordion-item .ac-it-5.accordion-button i{
	background: #e0e9fe;
	color: #24059d;	
}
.at-accordion-item .accordion-button:not(.collapsed){
	background: #fff;
	font-weight: 600;
}
.at-accordion-item .accordion-body{
	background: #fff;
}
.at-label-txt {
    color: #000;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 5px;
    word-break: break-word;
    white-space: normal;
    display: flex;
    gap: 3px;
    align-items: center;
    flex-wrap: wrap;
}
.at-label-txt span.mandatory{
	color: red;
}
.at-label-txt span.required-label {
    background: #ffdede;
    color: #a10e0e;
    padding: 2px 3px;
    font-size: 12px;
    border-radius: 5px;
    height: fit-content;
}
.at-label-txt span.optional-label{
	background: #e2fbff;
	    color: #077d7d;
	    padding: 2px 3px;
	    font-size: 12px;
	    border-radius: 5px;
	    height: fit-content;
}
.label-example-txt{
	color: #5b5b5b;
	    font-size: 12px;
	    font-weight: 400;
	    margin-bottom: 5px;
	    word-break: break-word;
	    white-space: normal;	
}
select,.form-control{
	margin-bottom: 10px;
}
.select2-container .select2-selection--single{
	height: 40px;
	align-content: center;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
	top: 7px;
}
.form-control, .select2-container--default .select2-selection--single {
     border: 2px solid #dbdbdb; 
    background: #fff;
}
.form-control::placeholder{
	color: #777777;
}
.select2-results__option[aria-selected]{
	color: #000;
}
.select2-container--default .select2-results__option--highlighted[aria-selected]{
	color: white;
	background: linear-gradient(182deg, #01507c, #1e385f);
}
#zoomLevel{
	margin-bottom: 0px;
}
.at-question-slot-inst-area {
    padding: 12px 14px;
    background: #ebf6ea;
    border-radius: 5px;
    border: 1.5px solid #78df6f;
}
.at-question-slot-inst-area label{
	font-size: 14px;
}
.at-question-slot-inst-area p{
	color: #000;
		    font-size: 14px;
		    font-weight: 400;
			margin: 0px;
		    word-break: break-word;
		    white-space: normal;	
}

.at-gen-part-card {
    padding: 0px;
    border-radius: 5px;
    min-height: 80px;
    width: 100%;
    border: 2px solid #e2e2e2;
}

.at-gen-part-card .at-gen-part-card-header {
    display: flex;
    flex-direction: row;
    justify-content: start;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    background: #fff;
    border-radius: 5px 5px 0px 0px;
    padding: 8px 12px;
}
.at-gen-part-card-header h5 {
	font-size: 16px;
	font-weight: 600;
	margin: 0px;
	word-break: break-word;
	white-space: normal;
	padding: 5px;
	border-radius: 5px;
}
.at-gen-part-card-header p {
	font-size: 16px;
	font-weight: 600;
	margin: 0px;
	word-break: break-word;
	white-space: normal;
	color: #000;
}
.at-get-part-card-1 .at-gen-part-card-header h5 {
    
    background: #ebf6ea;
    
    color: #2c5328;
}
.at-get-part-card-2 .at-gen-part-card-header h5 {
	background: #ebecfa;
	color: #243bb0;
}
.at-gen-part-card-body {
    padding: 10px;
    background: #f6f3ea;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-wrap: wrap;
}
.at-gen-part-card-body p{
	color: #000;
	font-size: 14px;
	font-weight: 400;
	margin: 0px;
	word-break: break-word;
	white-space: normal;
}
.blooms-taxonomy-card {
    background: #eaebff;
    border-radius: 5px;
    border: 2px solid #babdff;
	margin-bottom: 15px;
}

.blooms-taxonomy-card .blooms-card-header{
	padding: 10px;
}
.blooms-card-header h5 {
    margin: 0px;
    color: #24298a;
    font-size: 16px;
    font-weight: 600;
}
.blooms-card-header h5 .opt-label {
    color: #086351;
    background: #cdf2e6;
    padding: 5px;
    word-break: break-word;
    white-space: normal;
    margin: 0px;
    border-radius: 5px;
    font-size: 14px;
}
.blooms-card-body{
	padding: 10px;
}
.blooms-card-body .bloomlabel {
    margin: 0px;
    color: #24298a;
    font-size: 14px;
    font-weight: 600;
	margin-bottom: 10px;
	word-break: break-word;
	    white-space: normal;

}
.blooms-card-body .bloomlabel .opt-label {
    color: #086351;
    background: #cdf2e6;
    padding: 5px;
    word-break: break-word;
    white-space: normal;
    margin: 0px;
    border-radius: 5px;
    font-size: 14px;
}
.blooms-card-body p{
	color: #01007e;
	font-size: 14px;
	font-weight: 400;
	margin: 0px;
	word-break: break-word;
	white-space: normal;
}
.blooms-btns-selection-area{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 5px;
	padding: 5px;
	margin-bottom: 20px;
}
.blooms-btns-selection-area a {
    color: #505050 !important;
    background: #fff;
    padding: 5px 10px;
    border-radius: 10px;
    word-break: break-word;
    white-space: normal;
    font-size: 14px;
    font-weight: 500;
	cursor: pointer;
}
.blooms-btns-selection-area a:hover{
	background: #fff;
	color: #24298a !important;
	border: 1px solid #979cff;
	font-weight: 600;
}
.at-question-card{
	border-radius: 8px;
	min-height: 35px;
	background: #fff;
	box-shadow: 0px 0px 15px #8489ed36;
}
.at-question-card .at-question-card-header{
	padding: 8px 10px;
	
}

.at-question-card-header p{
	color: #000;
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 0px;
	word-break: break-word;
	white-space: normal;
	display: flex;
	gap: 3px;
	align-items: center;
	flex-wrap: wrap;
}
.at-question-card-header p span {
    padding: 5px;
    border-radius: 50%;
    background: #eaebff;
    color: #01007e;
	word-break: break-word;
		white-space: normal;
}
.at-question-card-body {
    padding: 10px;
}
.at-question-card-body .bloom-levels-questions{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 5px;
	padding: 5px;

}
.at-question-card-body .bloom-levels-questions a{
	color: #505050 !important;
	background: #fff;
	padding: 5px 10px;
	border-radius: 10px;
	word-break: break-word;
	white-space: normal;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	box-shadow: 0px 0px 15px #b3b7ff;
}
.at-question-card-body .bloom-levels-questions a:hover{
	background: #fff;
	color: #24298a !important;
	border: 1px solid #979cff;
	font-weight: 600;
}
.bloom-levels-questions p{
	width: 100%;
	word-break: break-word;
	white-space: normal;
	margin-bottom: 10px;
	font-weight: 600;
	color: #525252;
}
.at-add-more-question-btn {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    font-size: 16px;
    padding: 8px 7px;
    font-weight: 500;
    border: 2px dashed #459d3b;
    background: #f0fff1;
    border-radius: 5px;
    align-items: center;
    color: #1f6b17;
}
.at-add-more-question-btn:hover{
	background: #fff;
	color: #459d3b;
}
.at-ac2-assignment-structure-arrange{
	display: flex;
	flex-direction: column;
	gap: 15px;
	flex-wrap: wrap;
}

/** Assignment Template Generate   **/


/** ─────────────────────────────────────────────
   Assignment Template — Added Components
   ───────────────────────────────────────────── **/

/* INFO BOX */
.at-infobox {
    background: #f6f3ea;
    border: 1.5px solid #ffe082;
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    gap: 9px;
    align-items: flex-start;
}
.at-infobox-icon {
	font-size: 15px;
	flex-shrink: 0;
	margin-top: 1px;
	color: #a53f1f;
}
.at-infobox-text {
    font-size: 13px;
    color: #12233b;
    word-break: break-word;
    white-space: normal;
	margin: 0px;
}
.at-infobox-text strong {
	font-weight: 600;
}

/* WARN / CALLOUT BOX */
.at-warnbox {
	background: #faeeda;
	border: 1.5px solid #d4a857;
	border-radius: 10px;
	padding: 12px 14px;
	display: flex;
	gap: 9px;
	align-items: flex-start;
}
.at-warnbox-text {
	font-size: 13px;
	color: #854f0b;
	line-height: 1.6;
}


.at-rev {
	display: none;
	margin-top: 6px;
}
.at-rev.on {
	display: block;
}


.at-mono-textarea {


	font-size: 12px;

}

/* UNIT STEPPER ROW */
.at-stepper-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 4px;
}
.at-stepper-pill {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #f5f4f0;
	border: 1.5px solid #ecead3;
	border-radius: 10px;
	padding: 8px 12px;
}
.at-stepper-pill .pill-hint {
	font-size: 11px;
	color: #6b6b67;
	white-space: nowrap;
}
.at-stepper-btn {
	width: 28px;
	height: 28px;
	border-radius: 6px;
	border: 1.5px solid #dbdbdb;
	background: #fff;
	color: #1a1a18;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	line-height: 1;
}
.at-stepper-btn:hover {
	border-color: #7f77dd;
	color: #534ab7;
}
.at-stepper-val {
	min-width: 28px;
	text-align: center;
	font-weight: 700;
	font-size: 14px;
	color: #1a1a18;
}

/* RADIO CARDS (unit numbering scheme) */
.at-radio-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 4px;
}
.at-radio-card {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	padding: 10px 14px;
	border: 1.5px solid #ecead3;
	border-radius: 10px;
	background: #f5f4f0;
	transition: border-color .2s, background .2s;
}
.at-radio-card:hover {
	border-color: #dbdbdb;
}
.at-radio-card input[type="radio"] {
	width: auto;
	margin-top: 3px;
	flex-shrink: 0;
}
.at-radio-card strong {
	font-size: 14px;
	color: #1a1a18;
	display: block;
	margin-bottom: 2px;
}
.at-radio-sub {
	font-size: 12px;
	color: #6b6b67;
	display: block;
}





/* GENERIC ADD BUTTON (materials, sample qs) */
.at-add-btn {
	font-size: 13px;
	font-weight: 500;
	color: #534ab7;
	background: none;
	border: 1.5px dashed #7f77dd;
	border-radius: 10px;
	padding: 8px 14px;
	cursor: pointer;
	width: 100%;
	text-align: center;
	transition: all .15s;
	margin-top: 8px;
}
.at-add-btn:hover {
	background: #eeedfe;
}

/* BLOOM PILL BUTTONS */
.at-bp,
.at-qbp {
	font-size: 12px;
	padding: 4px 10px;
	border-radius: 10px;
	cursor: pointer;
	border: 1.5px solid transparent;
	background: #fff;
	color: #6b6b67;
	transition: all .15s;
	font-weight: 500;
	user-select: none;
}
.at-bp:hover,
.at-qbp:hover {
	border-color: #7f77dd;
	color: #534ab7;
}
.at-bp.sel,
.at-qbp.sel {
	background: #534ab7;
	border-color: #534ab7;
	color: #fff;
}

/* BLOOM PANEL (section-level) */
.at-bloom-panel {
	padding: 14px;
	background: #eeedfe;
	border: 1.5px solid #c5c1f0;
	border-radius: 10px;
}
.at-bloom-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}
.at-bloom-head span:first-child {
	font-size: 15px;
}
.at-bloom-title {
	font-size: 13px;
	font-weight: 700;
	color: #534ab7;
}
.at-bloom-note {
	font-size: 12px;
	color: #534ab7;
	margin-bottom: 10px;
	line-height: 1.55;
}
.at-bloom-note strong {
	font-weight: 600;
}
.at-bloom-ref-row {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}
.at-bloom-display {
	font-size: 12px;
	color: #534ab7;
	margin-bottom: 10px;
	min-height: 16px;
}

/* MATERIAL CARDS */
.at-mat-cont {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.at-mat-card {
	background: #f5f4f0;
	border: 1.5px solid #ecead3;
	border-radius: 10px;
	overflow: hidden;
}
.at-mat-card:hover {
	border-color: #dbdbdb;
}
.at-mat-card-head {
	padding: 10px 14px;
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border-bottom: 1px solid #ecead3;
}
.at-mat-num {
	width: 24px;
	height: 24px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: #faeeda;
	color: #854f0b;
}
.at-mat-remove {
	margin-left: auto;
	flex-shrink: 0;
}
.at-mat-body {
	padding: 12px 14px;
	display: grid;
	gap: 10px;
}

/* SAMPLE QUESTIONS */
.at-sq-wrap {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.at-sq-row {
	display: flex;
	gap: 8px;
	align-items: flex-start;
}
.at-sq-num {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #eeedfe;
	color: #534ab7;
	font-size: 11px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 9px;
}
.at-sq-row .at-sq {
	flex: 1;
	margin-bottom: 0;
}






/* ASSIGNMENT LIVE PREVIEW */
.at-asn-preview {
	background: #0e0e0d;
	border-radius: 16px;
	padding: 20px;
	border: 2px solid #2a2a28;
}
.at-asn-preview-lbl {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .3);
	margin-bottom: 14px;
	display: flex;
	align-items: center;
	gap: 7px;
}
.at-asn-preview-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #1d9e75;
	animation: at-blink 1.5s ease-in-out infinite;
}
.at-asn-preview-body {
	
	font-size: 12px;
	word-break: break-word;
	color: rgba(255, 255, 255, .55);
	white-space: normal;
}
.at-asn-total {
	font-size: 12px;
	font-weight: 700;
	color: #1d9e75;
	margin-top: 12px;
	text-align: right;

}


/* SUBMIT AREA */
.at-sub {
	background: #fff;
	border: 1px solid #ecead3;
	border-radius: 16px;
	padding: 20px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .05), 0 4px 16px rgba(0, 0, 0, .04);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 30px;
}
.at-sub-info {
	font-size: 13px;
	color: #6b6b67;
	line-height: 1.55;
}
.at-sub-info strong {
	color: #3d3d3a;
}
.at-sub-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-end;
}
.at-btn-go {
	padding: 12px 28px;
	background: #1a1a18;
	color: #fff;
	border: none;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all .15s;
	white-space: nowrap;
}
.at-btn-go:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
}
.at-btn-go.blue { background: #185fa5; }
.at-btn-go.amber { background: #854f0b; }
.at-btn-go.orange { background: #5f3810; }

/* TOAST */
.at-toast {
	position: fixed;
	bottom: 28px;
	left: 50%;
	transform: translateX(-50%) translateY(20px);
	background: #1a1a18;
	color: #fff;
	border-radius: 12px;
	padding: 14px 20px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, .28);
	min-width: 300px;
	max-width: 520px;
	width: 90%;
	opacity: 0;
	transition: opacity .25s, transform .25s;
	pointer-events: none;
	z-index: 9999;
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
.at-toast.show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
	pointer-events: auto;
}
.at-toast-body {
	flex: 1;
	min-width: 0;
}
.at-toast-title {
	font-size: 13px;
	font-weight: 700;
	color: #a89feb;
	margin-bottom: 4px;
}
.at-toast-msg {
	font-size: 12px;
	color: rgba(255, 255, 255, .65);
	line-height: 1.55;
}
.at-toast-close {
	background: none;
	border: none;
	color: rgba(255, 255, 255, .4);
	font-size: 18px;
	cursor: pointer;
	flex-shrink: 0;
	padding: 0;
	line-height: 1;
	margin-top: -2px;
}


.mark, mark{
	padding: 0px !important;
}

/**** Student Dashboard Updated ****/

.sd-assignment-card-area {
    padding: 15px;
    background: #fff;
    min-height: 250px;
    border-radius: 10px;
    width: 100%;
    box-shadow: 2px 0px 12px 0px #70BFFF;
    margin-top: 10px;
    margin-bottom: 30px;
}

.sd-courses-area-header{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.sd-courses-header-left h3 {
    color: #000;
    font-size: 22px;
    margin: 0px;
    word-break: break-word;
    white-space: normal;
    font-weight: 600;
}
.sd-header-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.sd-search-box {
    position: relative;
    width: 100%;
    max-width: 280px;
    height: 38px;
    display: flex;
    align-items: center;
}
.sd-search-input {
    width: 100%;
    height: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px 36px 8px 12px;
    font-size: 13px;
    background: #f8fafc;
    transition: border-color 0.2s, background 0.2s;
}
.sd-search-btn {
    position: absolute;
    right: 10px;
    background: transparent;
    border: none;
    color: #0048B0;
    font-size: 13px;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sd-filter-btn {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #0048B0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s;
}
/* Student Dashboard Updated Design Card */
   .sd-assignment-details-card-area {
   	display: flex;
   	justify-content: start;
   	gap: 10px;
   	flex-wrap: wrap;
   	width: 100%;
   	margin-top: 20px;
   }

   .sd-assignment-details-card-area .sd-assignment-details-card {
   	background: var(--lightigbg);
   	min-height: 220px;
   	width: 100%;
   	max-width: 510px;
   	box-shadow: 0px 0px 14px #00000052;
   	border-radius: 15px;
   }

   .sd-assignment-details-card .sd-assignment-details-card-header {
   	display: flex;
   	justify-content: end;
   	flex-wrap: wrap;
   	width: 100%;
   	padding: 5px;
   }

   .sd-assignment-details-card-header .indication {
   	min-width: fit-content;
   }

   .sd-assignment-details-card .sd-assignment-details-card-body {

   	padding: 8px;
   	min-height: 270px;
   }
.visiblity-hidden{
	visibility: hidden !important;
}
.blink {
    animation: blink_smooth 1s infinite;
}

@keyframes blink_smooth {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
   .sd-assignment-details-card-body .sd-assigment-details-icon-heading-area {
   	display: flex;
   	justify-content: start;
   	gap: 8px;
   	align-items: center;
   }

   .sd-assigment-details-icon-heading-area .sd-assignment-card-icon-area {
   	width: 65px;
   	height: 70px;
   	background: var(--ignou-blue-design);
   	font-size: 36px;
   	color: #fff;
   	border-radius: 5px;
   	text-align: center;
   	align-content: center;
   }

   .sd-assigment-details-icon-heading-area h5 {
   	margin: 0px;
   	word-break: break-word;
   	white-space: normal;
   	color: #000;
   	font-size: 18px;
   	font-weight: 600;
   }

   .sd-assignment-details-card-body .sd-assigment-card-details {
   	display: flex;
   	flex-direction: row;
   	gap: 10px;
   	justify-content: space-between;
   	flex-wrap: wrap;
   	margin-top: 12px;
   }

   .sd-assigment-card-details ul {
   	display: flex;
   	flex-direction: column;
   	gap: 5px;
   	flex-wrap: wrap;
   	list-style: none;
   	padding: 0px;
   	margin: 0px;
   }

   .sd-assigment-card-details ul li {
   	margin: 0px;
   }

   .sd-assigment-card-details ul li p {
   	margin: 0px;
   	word-break: break-word;
   	white-space: normal;
   	color: #000;
   	font-size: 16px;
   	font-weight: 600;
   	text-align: start;
   }

   .sd-assigment-card-details ul li p span {
   	font-weight: 400;
   }

   .sd-assignment-details-card-body .progress {
   	border-radius: 7px;
/*    	background: #e9ecef; */
   	background: #fff;
   	height: 10px;
   }

   .sd-assignment-details-card .sd-assignment-details-card-footer {
   	background: #fff;
   	padding: 8px;
   	display: flex;
   	justify-content: space-between;
   	flex-wrap: wrap;
   	border-radius: 0px 0px 15px 15px;
   	align-items: center;
   }

   .sd-assignment-details-card-footer p {
   	margin: 0px;
   	word-break: break-word;
   	white-space: normal;
   	font-weight: 600;
   	color: #000;
   }
   .sd-assignment-details-card-footer p .score-text{
	word-break: break-word;
	   	white-space: normal;
	   	font-weight: 400;
	   	color: #000;
   }

   .sd-view-assignment-btn {
   	background: var(--ignou-blue-design);
   	color: #fff;
   	border-radius: 5px;
   	padding: 5px 20px;
   	font-size: 16px;
   	font-weight: 600;
   	cursor: pointer;
   }

   .sd-view-assignment-btn.disabled {

   	pointer-events: none;
   	opacity: .65;

   }
   .new-progress-area.progress-area {
       width: 100%;
   }
   .sd-assignment-details-card-body .progress{
	height: 12px;
	width: 100%;
   }

   /* Fixed-value width classes for the course progress bar - replaces a th:style inline
      "width:X%" attribute, which CSP's style-src blocks outright (nonces/hashes don't cover
      style attributes, only unsafe-inline/unsafe-hashes do - see the browser CSP error). */
   .progress-w-0 { width: 0%; }
   .progress-w-50 { width: 50%; }
   .progress-w-100 { width: 100%; }

   /* Same CSP reason - replaces static style="width: Xpx;" on the assignment.html zoom/
      display-mode <select> toolbar dropdowns. */
   .w-100px { width: 100px; }
   .w-120px { width: 120px; }

   .new-progress-area p{
	margin: 0px;
	word-break: break-word;
	white-space: normal;
	color: #000;
	font-size: 16px;
	font-weight: 600;
	text-align: start;
   }
   /* Student Dashboard Updated Design Card */
/**** Student Dashboard Updated ****/

/* RESPONSIVE */
@media (max-width: 620px) {
	.at-q-fields,
	.at-q-fields-2 {
		grid-template-columns: 1fr;
	}
	.at-sub {
		flex-direction: column;
	}
	.at-sub-actions {
		width: 100%;
		align-items: stretch;
	}
	.at-btn-go {
		width: 100%;
	}
}
/** Assignment Template — Added Components END **/

   @media(max-width: 1378px){
	.assignment-details-card-area .assignment-details-card{
		max-width: 480px;
	}
	.sd-assignment-details-card-area .sd-assignment-details-card{
			max-width: 480px;
		}
   }
   
   @media(max-width: 1315px) {
   	.assignment-details-card-area .assignment-details-card {
   		max-width: 460px;
   	}

   	.sd-assignment-details-card-area .sd-assignment-details-card {
   		max-width: 460px;
   	}
   }

   @media(max-width: 1273px) {
   	.assignment-details-card-area {
   		justify-content: center;
   	}

   	.assignment-details-card-area .assignment-details-card {
   		max-width: 650px;
   	}

   	.sd-assignment-details-card-area {
   		justify-content: center;
   	}

   	.sd-assignment-details-card-area .sd-assignment-details-card {
   		max-width: 650px;
   	}

   	.cd-header-wrap {
   		justify-content: center;
   	}
   }

   /* ===========================================================
      STATE: SIDEBAR COLLAPSED (icon-only) — desktop >= 1100px
      =========================================================== */
   @media (min-width: 1100px) {

   	body.sidebar-collapsed .app-sidebar {
   		width: var(--sidebar-width-collapsed);
   	}

   	body.sidebar-collapsed .content-area {
   		margin-left: var(--sidebar-width-collapsed);
   	}

   	body.sidebar-collapsed .sidebar-head-title,
   	body.sidebar-collapsed .nav-text,
   	body.sidebar-collapsed .nav-caret {
   		opacity: 0;
   		width: 0;
   		overflow: hidden;
   	}

   	body.sidebar-collapsed .sidebar-head {
   		justify-content: center;
   		padding: 16px 0 10px;
   	}

   	body.sidebar-collapsed .sidebar-toggle-desktop {
   		margin-left: 0;
   	}

   	body.sidebar-collapsed .nav-link {
   		justify-content: center;
   		padding: 12px 5px;
   		gap: 0;
   	}

   	/* native sidebar dropdowns are replaced by JS-driven flyout when collapsed */
   	body.sidebar-collapsed .sidebar-dropdown-menu {
   		display: none !important;
   	}

   	.sidebar-toggle-mobile {
   		display: none !important;
   	}

   	body.sidebar-collapsed .nav-list{
		align-items: center;
	}

   
   }
   @media(max-width: 1110px){
	.stats-row, .csd-box-area, .caq-box-area {
			    grid-template-columns: repeat(2, 1fr);
			}
   }
   @media(max-width: 1024px){
	.cd-header-title{
			font-size: 22px;
		}
		.course-details-card-area{
			justify-content: center;
		}
		.course-details-card-area .course-details-card{
			max-width: 550px;
		}
		
		.assignment-view-combined-card{
			box-shadow: 0px 0px 11px #00000052;
			padding: 0px;
		}
		.assignment-view-combined-card .assignment-combined-card-left{
			padding: 10px;
			flex-wrap: nowrap;
		}
		
		.assignment-combined-card-right{
			background: #fff;
			width: 100%;
			border-radius: 0px 0px 7px 7px;
			padding: 10px;
			justify-content: center;
		}
		.assignment-combined-card-right .indication{
			box-shadow: 0px 0px 15px #00000036;
		}
		.assignment-combined-card-body {
		    margin-top: 15px;
		}
		.combined-card-right-details-area ul li p{
			font-size: 14px;
		}
		
   }

   /* ===========================================================
      STATE: TABLET — 768px to 1099px
      Sidebar defaults to icon-only "mini" mode.
      Toggle expands it fully as an overlay on top of content.
      =========================================================== */
   @media (min-width: 768px) and (max-width: 1099.98px) {

   	.app-sidebar {
   		width: var(--sidebar-width-collapsed);
   	}

   	.content-area {
   		margin-left: var(--sidebar-width-collapsed);
   	}

   	.sidebar-head-title,
   	.nav-text,
   	.nav-caret {
   		opacity: 0;
   		width: 0;
   		overflow: hidden;
   	}

   	.sidebar-head {
   		justify-content: center;
   		padding: 16px 0 10px;
   	}

   	.sidebar-toggle-desktop {
   		margin-left: 0;
   	}

   	.nav-link {
   		justify-content: center;
/*   		padding: 12px 0;*/
		padding: 12px 10px;
   		gap: 0;
   	}

   	.sidebar-dropdown-menu {
   		display: none !important;
   	}

   	.sidebar-toggle-mobile {
   		display: flex;
   	}

   	/* fully expanded state — slides over content, content doesn't shift */
   	body.sidebar-open .app-sidebar {
   		width: var(--sidebar-width);
   		box-shadow: 4px 0 24px rgba(15, 23, 42, 0.18);
   	}

   	body.sidebar-open .sidebar-head-title,
   	body.sidebar-open .nav-text,
   	body.sidebar-open .nav-caret {
   		opacity: 1;
   		width: auto;
   		overflow: visible;
   	}

   	body.sidebar-open .sidebar-head {
   		justify-content: space-between;
   		padding: 16px 18px 10px 18px;
   	}

   	body.sidebar-open .sidebar-toggle-desktop {
   		margin-left: auto;
   	}

   	body.sidebar-open .nav-link {
   		justify-content: flex-start;
   		padding: 11px 12px;
   		gap: 12px;
   	}

   	/* When sidebar is expanded, show normal dropdowns (NOT flyout) */
   	body.sidebar-open .sidebar-dropdown-menu.show {
   		display: block !important;
   	}

   	/* content area never shifts in tablet mode; overlay covers it instead */
   	body.sidebar-open .content-area {
   		margin-left: var(--sidebar-width-collapsed);
   	}

   	

   	.stat-card .stat-value {
   		font-size: 24px;
   	}
   }
   
   @media (max-width: 900px) {
	.stats-row,.csd-box-area,.caq-box-area {
	   
	    grid-template-columns: repeat(2, 1fr);
	   
	}
   }

   /* ===========================================================
      STATE: MOBILE — below 768px
      Sidebar fully hidden off-canvas by default.
      =========================================================== */
   @media (max-width: 767.98px) {

   	.header {
   		padding: 8px 12px;
   		gap: 8px;
   		min-height: auto;
   	}

   	.header-left {
   		order: 1;
   	}

   	.header-right {
   		order: 2;
   		gap: 6px;
   	}

   	.header-center {
   		order: 3;
   		flex: 1 1 100%;
   		min-width: auto;
   		margin-top: 6px;
   		justify-content: stretch;
   	}

   	.header-logo {
   		width: 110px;
   		height: 40px;
   	}

   	.search-wrap {
   		width: 100%;
   		max-width: none;
   		min-width: auto;
   	}

   	.search-input {
   		padding: 8px 60px 8px 35px;
   		font-size: 13px;
   		height: 38px;
   	}

   	.search-icon-btn {
   		width: 20px;
   		height: 20px;
   		font-size: 12px;
   	}

   	.filter-icon-btn {
   		width: 28px;
   		height: 28px;
   		font-size: 12px;
   	}

   	.btn-icon-only {
   		width: 36px;
   		height: 36px;
   		font-size: 15px;
   	}

   	.sidebar-toggle-mobile {
   		display: flex;
   	}

   	.sidebar-toggle-desktop {
   		display: none;
   	}

   	.app-sidebar {
   		width: 78%;
   		max-width: 280px;
   		border-radius: 0 16px 16px 0;
   		transform: translateX(-100%);
   	}

   	body.sidebar-open .app-sidebar {
   		transform: translateX(0);
   		box-shadow: 4px 0 24px rgba(15, 23, 42, 0.25);
   	}

   	.sidebar-head {
   		padding: 16px 18px 10px 18px;
   	}

   	.nav-link {
   		justify-content: flex-start;
   		padding: 10px 12px;
   		gap: 12px;
   		font-size: 14px;
   	}

   	.sidebar-dropdown-menu.show {
   		display: block !important;
   	}

   	.content-area {
   		margin-left: 0;
   		padding: 16px 12px 30px;
   	}

   	.welcome-banner {
   		padding: 16px 16px;
   		margin-bottom: 16px;
   	}

   	.welcome-banner h2 {
   		font-size: 18px;
   		margin-bottom: 0px;
   	}

   	.welcome-sub {
   		font-size: 13px;
   		margin-bottom: 0px;
   	}

   	.welcome-desc {
   		font-size: 12px;
   	}

	.stats-row {
			grid-template-columns: repeat(2, 1fr);
			gap: 12px;
		}

		.stat-card {
			padding: 14px 14px;
		}

		.stat-card .stat-value {
			font-size: 21px;
		}

   	/* no flyouts/tooltips on touch screens */
   	.nav-tooltip,
   	.nav-flyout {
   		display: none !important;
   	}
	
   }

   /* ===========================================================
      SMALL PHONES — below 480px
      =========================================================== */
	  
@media(max-width: 576px){
	
	.at-banner-top-shape,.at-banner-top-shape-2{
		display: none;
	}
}	  
@media(max-width: 500px){
	.assignment-details-card .assignment-details-card-footer,.course-details-card .course-details-card-footer,.sd-assignment-details-card .sd-assignment-details-card-footer{
		flex-direction: column;
		justify-content: center;
		gap: 10px;
	}
	.sd-assigment-details-icon-heading-area h5,.assigment-details-icon-heading-area h5,.course-details-card-body .course-details h5{
		font-size: 18px;
		
	}
	.course-details-card-body .course-details .course-code,.course-details-card-body .course-details .course-duration{
		font-size: 14px;
	}
	.course-details-card-body .course-card-icon-area{
		width: 50px;
		height: 60px;
		font-size: 28px;
	}
	.index-area{
		justify-content: start;
	}
	.cd-course-header{
		padding: 8px;
	}
	.cd-header-title {
	    font-size: 20px;
	    
	    line-height: normal;
	}
	.cd-details-area ul li p{
		display: flex;
		flex-direction: column;
		    justify-content: center;
			flex-wrap: wrap;
	}
	.cd-details-area{
		justify-content: start;
		gap: 14px;
		flex-direction: column;
	}
	.cd-details-area ul{
		gap: 10px;
	}
	.cd-header-left {
	    min-width: 100%;
	    width: 100%;
		flex: auto;
	}
	.sd-assigment-card-details ul li p,.sd-assignment-details-card-footer p,.assigment-card-details ul li p,.assignment-details-card-footer p{
		font-size: 14px;
	}
	.assignment-view-combined-card .assignment-combined-card-left{
		flex-wrap: wrap;
	}
	.combined-card-right-details-area ul{
		gap: 10px;
	}
	ul.assignment-tab-area li button{
		font-size: 16px;
	}
	ul.assignment-tab-area{
		justify-content: center;
		    gap: 5px;
	}
	.vform-wrapper{
		padding: 5px;
	}
	
	.section-heading-area{
		font-size: 20px;
	}
	.question-instruction-text{
		font-size: 17px;
		text-align: justify;
	}
	.question-text{
		font-size: 16px;
				text-align: justify;
	}
	.bottom-btn-area{
		justify-content: center;
	}
	.ca-view-fw-heading-note-area p.bold-text-cc{
		font-size: 17px;
	}
	.v2-step-item p{
		font-size: 13px;
	}
	.v2-form-wrapper{
		padding: 5px;
	}
	.ca-view-fw-question-area p{
		font-size: 16px;
	}
	.ca-view-fw-reference-answer p,.ca-view-fw-marking-rubrics ul li p,.ca-view-fw-student-answer p{
		font-size: 14px;
	}
	
	.ca-view-marks-inp-right {
	    order: 1;
	}
	.ca-view-marks-btn-left {
	    order: 2;
	}
	.action-btn-tbl{
		font-size: 12px;
		padding: 5px 3px;
		gap: 2px;
	}
	
	.tbl-btn-label{
		font-size: 12px;
	}
	.custom-csd-card-header h6,.csd-card-header h6{
		font-size: 18px;
	}
	.csd-view-assignment-queue-btn,.view-all-notifications-btn{
		font-size: 14px;
		padding: 5px;
	}
	table.dataTable>tbody>tr>th, table.dataTable>tbody>tr>td {
	    padding: 8px 5px !important;
		font-size: 14px;
	}
}	  
	  
   @media (max-width: 479.98px) {

   	.header-logo {
   		width: 90px;
   		height: 35px;
   	}

   	.header-left {
   		gap: 8px;
   	}

   	.search-input {
   		padding: 7px 50px 7px 30px;
   		font-size: 12px;
   		height: 36px;
   	}

   	.sidebar-toggle-btn {
   		width: 36px;
   		height: 36px;
   		font-size: 15px;
   	}

   	.btn-icon-only {
   		width: 34px;
   		height: 34px;
   		font-size: 14px;
   	}

   	.stat-card {
   		padding: 12px 12px;
   	}

   	.stat-card .stat-label {
   		font-size: 11px;
   	}

   	.stat-card .stat-value {
   		font-size: 18px;
   	}

   	.stat-icon {
   		font-size: 20px;
   	}

   	.content-area {
   		padding: 12px 10px 20px;
   	}
	.stats-row,.csd-box-area,.caq-box-area {
	    grid-template-columns: repeat(1, 1fr) !important;
	   
	}
   }
   @media (max-width: 479.98px) {
       .ig-notif-menu { width: 300px; }
       .ig-profile-menu { width: 240px; }
       .ig-notif-count {
           min-width: 16px;
           height: 16px;
           line-height: 16px;
           font-size: 9px;
       }
   }
   /* small phones */
   @media (max-width: 420px) {
   	

   	.header-logo {
   		width: 100px;
   		height: 38px;
   	}
   }

   /* ===========================================================
      UTILITY: Prevent dropdown flyout when sidebar is expanded
      =========================================================== */
   @media (min-width: 768px) {
   	/* When sidebar is open/expanded on tablet, disable flyout behavior */
   	body.sidebar-open .nav-item-dropdown .nav-link[data-bs-toggle="dropdown"] {
   		pointer-events: auto;
   	}
   }

#saveToServerButton {
	display: flex;
	gap: 10px;
	align-content: center;
	align-items: center;
}
.toolbarButton::before {
	opacity: var(--toolbar-icon-opacity);
	top: 0px;
	left: 6px;
	position: relative;
}
/* Design Changes 19-10-2026 */
.assignment-new-upload-area {
    min-height: 40vh;
    padding-bottom: 20px;
}
.assignment-new-upload-area .new-assignment-upload-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 15px #51a9f5;
    padding: 0;
    margin: 15px 0;
    overflow: hidden;
}
.upload-area-assignment-max-size {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 2px;
}
.label-txt-new {
    color: #000;
    font-size: 16px;
    font-weight: 600;
    margin: 0px;
    word-break: break-word;
    white-space: normal;
}
.label-txt-new-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}
.upload-area-assignment-max-size .max-file-size-txt,
.label-txt-new-row .max-file-size-txt {
    color: #d00707;
    font-size: 12px;
    font-weight: 400;
    word-break: break-word;
    white-space: normal;
    margin: 0px;
}
.single-pdf-error-text {
    color: #d00707;
    font-size: 13px;
    font-weight: 500;
    margin: 0px;
    word-break: break-word;
    white-space: normal;
}

/* Header strip */
.nau-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 20px;
    padding: 14px 20px;
    background: #eaf4fd;
    border-bottom: 1px solid #cfe3f7;
    border-left: 5px solid #01507c;
}
.nau-head-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.nau-head-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #01507c;
    color: #fff;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px 12px #a5d0ff;
}
.nau-head-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.nau-head-title {
    margin: 0;
    color: #12233b;
    font-size: 20px;
    font-weight: 600;
    word-break: break-word;
    white-space: normal;
}
.nau-head-subtitle {
    margin: 0;
    color: #3a4f6d;
    font-size: 14px;
    word-break: break-word;
    white-space: normal;
}
.nau-head-tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.nau-head-tag {
    margin: 0;
    padding: 5px 12px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #b9d6ee;
    color: #01507c;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* Body */
.nau-body {
    padding: 20px;
}
.nau-body-row {
    row-gap: 20px;
}

/* Upload panel */
.nau-upload-panel {
    height: 100%;
    padding: 18px;
    border: 1px solid #d5e6f6;
    border-radius: 10px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.nau-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px dashed #c9d8ec;
}
.nau-second-upload-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px dashed #c9d8ec;
}
.nau-submit-btn {
    background: #009470;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border: none;
    padding: 8px 22px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    box-shadow: 0px 0px 12px #7fd9c1;
    transition: background 0.2s ease, transform 0.2s ease;
}
.nau-submit-btn:hover {
    background: #04634c;
    transform: translateY(-1px);
}
.nau-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Guidelines card */
.nau-guide-card {
    height: 100%;
    padding: 18px;
    border-radius: 10px;
    background: #f6f3ea;
    border: 1px solid #e3ddcc;
}
.nau-guide-title {
    margin: 0 0 14px;
    color: #12233b;
    font-size: 17px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}
.nau-guide-title i {
    color: #e5643c;
}
.nau-guide-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.nau-guide-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
}
.nau-guide-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e3ddcc;
    color: #0f6d8f;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nau-guide-text {
    margin: 0;
    color: #3a4f6d;
    font-size: 13.5px;
    line-height: 1.45;
    word-break: break-word;
    white-space: normal;
    text-align: start;
}
.nau-guide-text strong {
    display: block;
    color: #12233b;
    font-size: 14px;
    font-weight: 600;
}
.left-indication.ovedue{
	background: #737578;
}
.overdue-bg{
	background: #777777;
	width: 100%;
}
.overdue-assignment{
	border-color: #737578 !important;
	color: #737578 !important;
	background: #fff !important;
}
.overdue-assignment.active{
	background: #737578 !important;
	color: #fff !important;
}



.asg-ins-heading {
    color: #000;
    font-size: 22px;
    font-weight: 600;
    margin: 0px;
    text-align: center;
    text-decoration: underline;
    word-break: break-word;
    white-space: normal;
}
.asg-ins-intro {
    margin: 0px;
    color: #000;
    font-size: 16px;
    text-align: justify;
    word-break: break-word;
    white-space: normal;
}
.asg-ins-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0px;
    padding-left: 30px;
	max-height: 40vh;
	    overflow: auto;
}
.asg-ins-roman {
    list-style: lower-roman;
}
.asg-ins-item {
    margin: 0px;
}
.asg-ins-item::marker {
    color: #000;
}
.asg-ins-item .asg-ins-text,
.asg-ins-declaration .asg-ins-text {
    margin: 0px;
    color: #000;
    font-size: 16px;
    text-align: justify;
    word-break: break-word;
    white-space: normal;
}
.asg-ins-link {
    color: #0048B0;
    text-decoration: underline;
    word-break: break-all;
}
.asg-ins-sublist {
    list-style: disc;
    margin: 6px 0px 0px 0px;
    padding-left: 24px;
}
.asg-ins-subitem {
    margin: 0px;
    color: #000;
    font-size: 16px;
    word-break: break-word;
    white-space: normal;
}
.asg-ins-declaration {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 5px;
}
.asg-ins-declaration-title {
    margin: 0px;
    color: #000;
    font-size: 18px;
    font-weight: 600;
}
/* Declaration */
.asg-ins-declaration {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 5px;
    padding: 14px 16px;
    background: #f5f8fd;
    border: 1px solid #d9e5f4;
    border-radius: 8px;
}
.asg-ins-declaration-title {
    margin: 0px;
    color: #000;
    font-size: 18px;
    font-weight: 600;
    word-break: break-word;
    white-space: normal;
}
.asg-ins-declaration-text {
    margin: 0px;
    color: #000;
    font-size: 16px;
    text-align: justify;
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
}

/* Agree checkbox */
.asg-ins-agree-area {
    display: flex;
    justify-content: center;
    margin-top: 4px;
}
.asg-ins-agree-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0px;
    cursor: pointer;
}
.asg-ins-agree-label .asg-ins-agree-check {
    flex-shrink: 0;
    margin: 0px;
    cursor: pointer;
}
.asg-ins-agree-text {
    color: #5d657b;
    font-size: 16px;
    word-break: break-word;
    white-space: normal;
}
.asg-ins-agree-check:checked ~ .asg-ins-agree-text {
    color: #000;
}

.oams-heading{
	color: #fff;
	font-size: 22px;
	font-weight: 600;
	word-break: break-word;
	white-space: normal;
	margin: 0px;
	
}

/* Locked Start Assignment button */
.start-assignment-btn.asg-ins-start-locked {
    opacity: 0.55;
    pointer-events: none;
    filter: grayscale(0.3);
}


/* Footer */
.main-wrapper > .footer {
    margin-left: var(--sidebar-width);
    background: linear-gradient(182deg, #01507c, #1e385f);
    box-shadow: 0px -3px 8px 0px rgba(103, 174, 233, 0.7);
    transition: margin-left var(--sidebar-transition);
    flex-shrink: 0;
}
.oams-ft-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 20px;
    padding: 10px 0px;
}
.oams-ft-left,
.oams-ft-right {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.oams-ft-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
}
.oams-ft-logo-ignou {
    width: 120px;
}
.oams-ft-logo-bisagn {
    padding: 4px 12px;
    background: #fff;
    border-radius: 6px;
}
.oams-ft-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.oams-ft-center {
    flex: 1 1 320px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
}
.oams-ft-text {
    margin: 0px;
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
    word-break: break-word;
    white-space: normal;
}
.oams-ft-text strong {
    font-weight: 600;
}
.oams-ft-text strong{
	color: #ffc872;
}
.feedback-btn {
    color: #fff;
    background: #d17a0a;
    font-size: 16px;
    font-weight: 600;
    word-break: break-word;
    white-space: normal;
    padding: 5px 7px;
    border-radius: 5px;
    box-shadow: 0px 0px 15px #ffd7a5;
}
.feedback-btn:hover{
	color: #fff;
	background: #c56f00;
}
.nau-footer {
    display: flex;
    justify-content: center;
    padding: 7px;
    flex-wrap: wrap;
}
.back-to-dashboard-btn {
    padding: 5px 7px;
    border-radius: 5px;
    color: #fff;
    background: #18649f;
    box-shadow: 0px 0px 16px #59aae291;
    font-size: 16px;
    font-weight: 600;
}
@media (min-width: 1100px) {
    body.sidebar-collapsed .main-wrapper > .footer {
        margin-left: var(--sidebar-width-collapsed);
    }
}

@media(max-width: 1024px){
	.header-left{
		gap: 2px;
	}
	.oams-heading{
		font-size: 20px;
	}
}
@media (min-width: 768px) and (max-width: 1099.98px) {
    .main-wrapper > .footer,
    body.sidebar-open .main-wrapper > .footer {
        margin-left: var(--sidebar-width-collapsed);
    }
}
@media(max-width: 992px){
	.order-arrange-upload{
		order: 2;
	}
	.order-arrange-guidelines{
	order: 1;	
	}
	.app-sidebar{
		z-index: 9999;
	}
}

@media (max-width: 767.98px) {
    .main-wrapper > .footer {
        margin-left: 0;
    }
    .oams-ft-left {
        order: 1;
    }
    .oams-ft-right {
        order: 2;
    }
    .oams-ft-center {
        order: 3;
        flex: 1 1 100%;
    }
    .oams-ft-logo {
        height: 42px;
    }
    .oams-ft-logo-ignou {
        width: 100px;
    }
    .oams-ft-text {
        font-size: 13px;
    }
	.header-center{
		justify-content: center;
	}
	.app-sidebar{
		top: 96px;
	}
}

@media (max-width: 576px) {
	
	.nau-head {
	       padding: 12px 14px;
	   }
	   .nau-head-title {
	       font-size: 17px;
	   }
	   .nau-head-icon {
	       width: 42px;
	       height: 42px;
	       font-size: 18px;
	   }
	   .nau-head-tag {
	       font-size: 12px;
	       padding: 4px 10px;
	   }
	   .nau-body {
	       padding: 12px;
	   }
	   .nau-upload-panel,
	   .nau-guide-card {
	       padding: 14px;
	   }
	   .nau-actions {
	       justify-content: stretch;
	   }
	   .nau-submit-btn {
	       width: 100%;
	       justify-content: center;
	   }
	
	
    .asg-ins-heading {
        font-size: 18px;
    }
    .asg-ins-list {
        padding-left: 22px;
    }
    .asg-ins-item .asg-ins-text,
    .asg-ins-declaration .asg-ins-text,
    .asg-ins-intro {
        text-align: start;
    }
	
	.asg-ins-declaration-text {
	        text-align: start;
	    }
	    .asg-ins-agree-label {
	        align-items: flex-start;
	    }
		.asg-ins-list{
			max-height: 100%;
		}
		.assignment-card-header h3{
			font-size: 20px;
		}
		.details-area-assignment ul li p{
			font-size: 12px;
		}
		.student-assignment-instruction-area h6{
			font-size: 16px;
		}
		.asg-ins-intro{
			font-size: 14px;
		}
		.asg-ins-item .asg-ins-text{
			font-size: 14px;
		}
		.app-sidebar{
				top: 94px;
			}
			
			.oams-heading {
			    font-size: 14px;
			}
			.assignment-instructions-btn, .assignment-quesition-btn,.autosaved-text,.nau-head-title{
				font-size: 14px;
			}
			.nau-head-subtitle{
				font-size: 12px;	
			}
			.nau-head{
				padding: 5px;
			}
}
/* Design Changes 19-10-2026 */
.no-assignment-text{
	color: #000;
	font-size: 14px;
	font-weight: 600;
	word-break: break-word;
	white-space: normal;
}
.asg-ins-subitem.color-red{
	color: #a40000;
}
.assignment-submitted-area{
	padding: 10px 0px;
	background: #fff;
}
.view-sub-assignment-btn, .submitted-btn-view-assigment {
    color: #fff;
    padding: 5px 3px;
    word-break: break-word;
    white-space: normal;
    font-size: 14px;
    border-radius: 5px;
    font-weight: 600;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    width: fit-content;
    justify-self: center;
    align-items: center;
}
.view-sub-assignment-btn{
	background: #074a75;
}

/* Design Changes 19-10-2026 */

/* Design Changes 30-10-2026 */
.custom-assignment-instruction-area {
	background: #fff8e6;
	border: 2px dashed #f5d98b;
/*	border-left: 5px solid #e6a100;*/
	border-radius: 8px;
	padding: 14px 18px;
	margin: 16px 0;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.custom-assignment-instruction-area .custom-assignment-instruction-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}

.custom-assignment-instruction-area .custom-assignment-instruction-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #e6a100;
	color: #ffffff;
	flex-shrink: 0;
}

.custom-assignment-instruction-area .custom-assignment-instruction-title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: #000000;
	letter-spacing: 0.2px;
}

.custom-assignment-instruction-area .custom-assignment-instruction-list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: custom-instruction-step;
}

.custom-assignment-instruction-area .custom-assignment-instruction-item {
	position: relative;
	padding-left: 32px;
	margin-bottom: 8px;
	font-size: 14px;
	line-height: 1.6;
	color: #000;
	counter-increment: custom-instruction-step;
	word-break: break-word;
	white-space: normal;
}

.custom-assignment-instruction-area .custom-assignment-instruction-item:last-child {
	margin-bottom: 0;
}

.custom-assignment-instruction-area .custom-assignment-instruction-item::before {
	content: counter(custom-instruction-step);
	position: absolute;
	left: 0;
	top: 2px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #ffe7a8;
	color: #7a5200;
	font-size: 12px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.custom-assignment-instruction-area .custom-assignment-instruction-item strong {
	color: #222222;
}

.custom-assignment-instruction-area .custom-assignment-instruction-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-left: 4px;
	padding: 3px 10px;
	border-radius: 20px;
	background: #0d4a8f;
	color: #ffffff;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s ease, transform 0.2s ease;
	word-break: break-word;
	white-space: normal;
}

.custom-assignment-instruction-area .custom-assignment-instruction-link:hover,
.custom-assignment-instruction-area .custom-assignment-instruction-link:focus {
	background: #08356a;
	color: #ffffff;
	transform: translateY(-1px);
}
.custom-assignment-instruction-area .custom-assignment-instruction-icon i {
	font-size: 15px;
	line-height: 1;
}

.custom-assignment-instruction-area .custom-assignment-instruction-link i {
	font-size: 11px;
}

@media (max-width: 576px) {
	.custom-assignment-instruction-area {
		padding: 12px 14px;
	}

	.custom-assignment-instruction-area .custom-assignment-instruction-link {
		margin-left: 0;
		margin-top: 6px;
	}
}
/* Design Changes 30-10-2026 */