@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;
}

   :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-design: #0048B0;
	--ignou-blue: #072941;
   	--ignou-blue-dark: #003a8c;
   	--accent-blue: #1f77d8;
   	--text-muted: #5d657b;
   	--border-soft: #cfe3f7;
   	--surface: #ffffff;
	--lightigbg: #dceaff;
	--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 {
   	position: sticky;
   	top: 0;
   	left: 0;
   	right: 0;
   	display: flex;
   	flex-wrap: wrap;
   	align-items: center;
   	justify-content: space-between;
background: linear-gradient(182deg, #172d4d, #01273d);
   	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: 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;
   }
  

   .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;
   }

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

   .ig-notif-dropdown .dropdown-toggle::after,
   .ig-profile-dropdown .dropdown-toggle::after { display: none; }

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

   .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; }

   .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;
   }

   .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);
   }

   .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);
   }

   .ig-profile-menu { width: 260px; max-width: 90vw; }

   .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;
   }

   .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;
   }

   .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;
   }

   .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;
   }

   .app-sidebar {
   	position: fixed;
   	top: var(--header-height);
   	left: 0;
   	bottom: 0;
   	width: var(--sidebar-width);
	background: #fff;
   	border: none;
   	border-radius: 0 16px 16px 0;
   	box-shadow: 2px 0 14px rgba(31, 119, 216, 0.06);
   	z-index: 1040;
   	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);
   }

   .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);
   }

   .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;
   }

   .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);
   }

   .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;
   }

   .content-area {
   	margin-top: 0;
   	margin-left: var(--sidebar-width);
   	padding: 22px 26px 40px;
   	min-height: calc(100vh - var(--header-height));
   	transition: margin-left var(--sidebar-transition);
   }

	  .welcome-banner {
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;
   }

   .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); }
   
   
   .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;
   }
   .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);
   }
   
   
   .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;
       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: 2%;
					
				  }
		
				  .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);
}
   
   
   .marquee-container {
       width: 100%;
       max-width: 600px;
       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;
     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;
       gap: 7px;
       width: calc(100% - 20px);
       border-radius: 6px;
       box-shadow: 0px 0px 10px #2178d782;
       align-items: center;
   }

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

   .marquee-controls {
     display: flex;
     justify-content: center;
     
     
   }

   .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;
   }

   
   .course-page {
   	padding: 0;
   }

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


   .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;

   }


.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;
}  

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;
}
.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;
}

.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{
		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;
}

.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;
	}
}

.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;
	flex-direction: column;
	align-content: center;
}
.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;
	width: fit-content;
	align-self: center
}
.start-assignment-btn:hover{
	background: #123e75;
	   color: #fff;
}

.assignmenent-cb-header-area{
	min-height: 60px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	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;
}
.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-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-zoom-select {
           width: 100px;
       }

       .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;
}
#synopsisFilePreviewModal .modal-dialog.pvx-content-modal {
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
}
#synopsisFilePreviewModal .modal-content {
	height: 100%;
	border-radius: 0;
}
#synopsisFilePreviewModal .modal-body {
	min-height: 0;
}
#synopsisFilePreviewModal .answer-pdf-container {
	height: 100%;
}
.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;
}
.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;
}

.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;
    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 {
    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-icon {
    width: 45px;
    height: 45px;
    font-size: 15px;
}
}


.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: #062841;
  color: white;
}


.list-style-alpha{
	list-style: lower-alpha;
}
.student-assignment-question-area ul{
	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;
}

	
	.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;
				}
		
		.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;
			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 {
			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; }
		.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;
}

		@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;
		    }
		}
		
		
		.word-break{
			word-break: break-word;
			white-space: normal;
		}	
	

.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%;
	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;
}
.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;
}

.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%);
}

.csd-notif-marquee-track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    animation: csd-notif-scroll 10s linear infinite;
}

.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%); }
}

.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);
}

.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; }

.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; }

.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;
}

.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;
}

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

.csd-ep-bar {
    height: 100%;
    border-radius: 20px;
    transition: width 0.6s ease;
}

.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);
}

.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%; }

.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;
}
.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;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	text-decoration: none;
}
.view-answer-pdf-btn:hover {
	color: #fff;
	background: #003a5e;
}
.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;
}
.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;
}

.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%;
	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;
}
.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;
}


.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;
}

.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;

}

.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;
}

.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;
}


.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;
}

.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;
}

.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;
}

.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;
}

.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;
}


.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;

}


.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; }

.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;
}


.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;
}
   .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 16px;
   	min-height: 210px;
   }

   .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: 22px;
   	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: #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-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%;
   }
   
   .new-progress-area p{
	margin: 0px;
	word-break: break-word;
	white-space: normal;
	color: #000;
	font-size: 16px;
	font-weight: 600;
	text-align: start;
   }

@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%;
	}
}

   @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;
   	}
   }

   @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;
    overflow: hidden;
}

body.sidebar-collapsed .nav-item {
    overflow: hidden;
}

   	body.sidebar-collapsed .sidebar-nav .sidebar-dropdown-menu,
body.sidebar-collapsed .sidebar-nav .sidebar-dropdown-menu.show {
    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;
		}
		
   }
.sidebar-nav .sidebar-dropdown-menu {
    position: static !important;
    float: none !important;
    width: 100% !important;
    margin: 2px 0 4px 0 !important;
    padding: 4px !important;
    border: none !important;
    box-shadow: none !important;
    background: #f8fbff !important;
    border-left: 2px solid var(--border-soft);
    border-radius: 8px;
}
.nav-item-dropdown.show .sidebar-dropdown-menu {
	display: block;
}
.sidebar-nav .sidebar-dropdown-menu.show {
    display: block !important;
    animation: opmsSlideDown 0.15s ease-out;
}

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

.sidebar-nav .sidebar-dropdown-menu .dropdown-item {
    padding: 9px 12px !important;
    font-size: 13.5px !important;
    border-radius: 8px !important;
    color: var(--text-muted) !important;
    white-space: normal !important;
    font-weight: 500;
    transition: background 0.2s ease, color 0.2s ease;
}

.sidebar-nav .sidebar-dropdown-menu .dropdown-item:hover {
    background: #eef5fd !important;
    color: var(--ignou-blue) !important;
}
.sidebar-nav .sidebar-dropdown-menu .dropdown-item.active {
    background: var(--ignou-blue) !important;
    color: #fff !important;
    font-weight: 600;
}

.sidebar-nav .sidebar-dropdown-menu .dropdown-item.active:hover {
    background: var(--ignou-blue-dark) !important;
    color: #fff !important;
}
.sidebar-nav .nav-link[aria-expanded="true"] .nav-caret {
    transform: rotate(180deg);
}

  .sidebar-nav .nav-link.active-parent {
    color: #082942;
    font-weight: 600;
    background: #eef5fd;
}

.sidebar-nav .nav-link:focus {
    box-shadow: none !important;
    outline: none !important;
}
   @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 10px;
    gap: 0;
    overflow: hidden;
}

.nav-item {
    overflow: hidden;
}

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

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

   	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;
   	}

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

   	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);
	   
	}
   }

   @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;
		}

   	.nav-tooltip,
   	.nav-flyout {
   		display: none !important;
   	}
	
   }

	  
@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;
       }
   }
   @media (max-width: 420px) {
   	

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

   @media (min-width: 768px) {
   	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;
}

.synopsis-preview-table th {
	width: 250px;
}

.synopsis-status-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
}
.synopsis-status-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
.synopsis-status-item i {
	margin-top: 3px;
}


.sps-page {
	width: 100%;
}

.sps-page-head {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 18px;
}
.sps-page-head-text {
	min-width: 0;
}
.sps-breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 13px;
	color: #6b7b8a;
	margin-bottom: 6px;
}
.sps-breadcrumb i {
	font-size: 10px;
	color: #9aa8b5;
}
.sps-breadcrumb .sps-breadcrumb-current {
	color: #01507c;
	font-weight: 600;
}
.sps-page-title {
	font-size: 28px;
	font-weight: 700;
	color: #0f2b40;
	margin: 0 0 4px 0;
	word-break: break-word;
}
.sps-page-subtitle {
	font-size: 15px;
	color: #6b7b8a;
	margin: 0;
}
.sps-page-head-status {
	flex-shrink: 0;
}
.sps-status-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 600;
	padding: 7px 14px;
	border-radius: 30px;
	white-space: nowrap;
}
.sps-status-eligible {
	background: #e4f7ee;
	color: #12784f;
	border: 1px solid #bfe9d5;
}
.sps-status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #16a367;
	display: inline-block;
}

.sps-info-banner {
	background: linear-gradient(120deg, #072942ed, #062840eb), url(../db_img/welcome-banner-bg.png);
	background-size: cover;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0px 0px 15px #2080c354;
}
.sps-info-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.sps-info-label {
	font-size: 12px;
	font-weight: 500;
	color: #cfe3f1;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}
.sps-info-value {
	font-size: 15px;
	font-weight: 600;
	color: #ffffff;
	word-break: break-word;
	white-space: normal;
}

.sps-card {
	background: #ffffff;
	border: 1px solid #e6edf3;
	border-radius: 12px;
	box-shadow: 0px 2px 10px rgba(32, 128, 195, 0.08);
	overflow: hidden;
}
.sps-card-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 18px;
	border-bottom: 1px solid #eef3f7;
	background: #c0e4ff;
}
.sps-card-icon {
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: #e7f1f9;
	color: #062841;
	font-size: 15px;
}
.sps-card-title {
	font-size: 17px;
	font-weight: 600;
	color: #0f2b40;
	margin: 0;
	word-break: break-word;
}
.sps-card-body {
	padding: 18px;
}
.sps-card-sticky {
	position: sticky;
	top: 100px;
}

.sps-form-label {
	font-size: 14px;
	font-weight: 600;
	color: #35485a;
	margin-bottom: 6px;
}
.sps-input.form-control {
	border: 1px solid #d5dfe8;
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 14px;
	color: #24333f;
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sps-input.form-control::placeholder {
	color: #9aa8b5;
}
.sps-input.form-control:focus {
	border-color: #2080c3;
	box-shadow: 0 0 0 3px rgba(32, 128, 195, 0.15);
}
textarea.sps-input.form-control {
	resize: vertical;
	min-height: 60px;
}

.sps-upload-note {
	font-size: 13px;
	color: #7a8894;
	margin: 0 0 14px 0;
}
.sps-upload-field.custom-cls-upload-area-sa {
	gap: 10px;
}
.sps-file-input.form-control {
	max-width: 100%;
	flex: 1 1 220px;
}
.sps-view-btn.view-answer-pdf-btn {
	font-size: 14px;
	padding: 8px 12px;
}

.sps-sidebar {
	width: 100%;
	height: 100%;
}
.sps-notice {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	background: #e9f3ff;
	border: 1px solid #e9f3ff;
	border-radius: 8px;
	padding: 12px 14px;
	font-size: 13px;
	color: #0a2944;
	line-height: 1.45;
}
.sps-notice i {

	margin-top: 2px;
	flex-shrink: 0;
}

.sps-checklist {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #eef3f7;
}
.sps-checklist-title {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: #35485a;
	margin: 0 0 10px 0;
}
.sps-checklist-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.sps-checklist-list li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 13.5px;
	color: #4a5b69;
	line-height: 1.4;
	word-break: break-word;
}
.sps-checklist-list li i {
	color: #072941;
	font-size: 14px;
	margin-top: 2px;
	flex-shrink: 0;
}

.sps-checklist-list li i {
	color: #b7c2cb;
}
.sps-checklist-list li.sps-check-done i {
	color: #1aa251;
}

.sps-help-line {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 14px 0 0 0;
	padding-top: 14px;
	border-top: 1px solid #eef3f7;
	font-size: 12.5px;
	color: #7a8894;
	line-height: 1.45;
}
.sps-help-line i {
	color: #01507c;
	margin-top: 2px;
	flex-shrink: 0;
}

.sps-btn-primary.btn {
	background: #062841;
	border: 1px solid #062841;
	color: #fff;
	font-weight: 600;
	font-size: 15px;
	padding: 11px 16px;
	border-radius: 8px;
	transition: background 0.15s ease, box-shadow 0.15s ease;
}
.sps-btn-primary.btn:hover,
.sps-btn-primary.btn:focus {
	background: #013a5c;
	border-color: #013a5c;
	color: #fff;
	box-shadow: 0 4px 12px rgba(1, 80, 124, 0.28);
}
.sps-btn-primary.btn:disabled {
	background: #7ea6bf;
	border-color: #7ea6bf;
	cursor: not-allowed;
}
.sps-card .view-answer-pdf-btn{
	background: #062841;
}

@media (max-width: 991.98px) {
	.sps-card-sticky {
		position: static;
		top: auto;
	}
}
@media (max-width: 575.98px) {
	.sps-page-title {
		font-size: 23px;
	}
	.sps-info-banner {
		padding: 16px;
	}
	.sps-card-body {
		padding: 14px;
	}
	.sps-file-input.form-control {
		flex-basis: 100%;
	}
}


.vls-page {
	width: 100%;
}

.vls-hero {
	background: linear-gradient(120deg, #072942ed, #062840eb), url(../db_img/welcome-banner-bg.png);
	background-size: cover;
	border-radius: 14px;
	padding: 24px;
	box-shadow: 0px 4px 18px rgba(32, 128, 195, 0.28);
	margin-bottom: 16px;
}
.vls-hero-tag {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	padding: 5px 12px;
	border-radius: 30px;
	margin-bottom: 12px;
}
.vls-hero-tag i {
	color: #ff5a5f;
	font-size: 14px;
}
.vls-hero-title {
	color: #fff;
	font-size: 28px;
	font-weight: 700;
	margin: 0 0 18px 0;
	word-break: break-word;
}
.vls-hero-meta {
	margin: 0;
}
.vls-meta-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.vls-meta-label {
	font-size: 11.5px;
	font-weight: 500;
	color: #cfe3f1;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}
.vls-meta-value {
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	word-break: break-word;
	line-height: 1.35;
}

.vls-progress-card {
	position: sticky;
	top: 0;
	z-index: 5;
	background: #fff;
	border: 1px solid #e6edf3;
	border-radius: 12px;
	padding: 16px 18px;
	box-shadow: 0px 2px 12px rgba(32, 128, 195, 0.12);
	margin-bottom: 16px;
}
.vls-progress-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 12px;
}
.vls-progress-heading {
	display: flex;
	align-items: center;
	gap: 12px;
}
.vls-progress-icon {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: #e7f1f9;
	color: #072941;
	font-size: 18px;
}
.vls-progress-title {
	display: block;
	font-size: 16px;
	font-weight: 700;
	color: #0f2b40;
}
.vls-progress-sub {
	display: block;
	font-size: 13px;
	color: #6b7b8a;
	margin-top: 1px;
}
.vls-progress-track.progress {
	height: 12px;
	border-radius: 30px;
	background: #eef2f6;
}
.vls-progress-track .progress-bar {
	border-radius: 30px;
	width: 0%;
}

.vls-submitted-banner {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: #e6f7ec;
	border: 1px solid #a8e6bd;
	color: #157347;
	border-radius: 12px;
	padding: 14px 16px;
	font-weight: 600;
	margin-bottom: 16px;
}
.vls-submitted-banner i {
	margin-top: 2px;
	flex-shrink: 0;
}

.vls-phase-card {
	background: #fff;
	border: 1px solid #e6edf3;
	border-radius: 12px;
	box-shadow: 0px 2px 10px rgba(32, 128, 195, 0.08);
	overflow: hidden;
	margin-bottom: 16px;
}
.vls-phase-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 16px 18px;
	background: #f8fbfd;
	border-bottom: 1px solid #eef3f7;
}
.vls-phase-badge {
	flex-shrink: 0;
	background: #01507c;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 4px 11px;
	border-radius: 6px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}
.vls-phase-badge-muted {
	background: #8aa2b3;
}
.vls-phase-title {
	font-size: 17px;
	font-weight: 600;
	color: #0f2b40;
	margin: 0;
	flex: 1 1 auto;
	word-break: break-word;
}
.vls-phase-count {
	flex-shrink: 0;
	background: #fff2e0;
	color: #b5651d;
	border: 1px solid #f3d9b5;
	font-size: 12.5px;
	font-weight: 700;
	padding: 4px 11px;
	border-radius: 30px;
}
.vls-phase-body {
	padding: 18px;
}
.vls-phase-desc {
	font-size: 13.5px;
	color: #6b7b8a;
	margin: 0 0 16px 0;
	line-height: 1.5;
}
.vls-phase-note {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #eef6ff;
    border: 1px solid #0c5587;
    border-radius: 10px;
    padding: 14px 16px;
    color: #03273e;
    font-weight: 500;
}
.vls-phase-note i {
	flex-shrink: 0;
}

.vls-accordion .accordion-item {
	border: 1px solid #e3e8ef;
	border-radius: 10px !important;
	margin-bottom: 10px;
	overflow: hidden;
}
.vls-accordion .accordion-item:last-child {
	margin-bottom: 0;
}
.vls-accordion .accordion-button {
	font-weight: 700;
	color: #01507c;
	background: #f6fafd;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
}
.vls-accordion .accordion-button:not(.collapsed) {
	background: linear-gradient(120deg, #01507cde, #13416af7);
	color: #fff;
	box-shadow: none;
}
.vls-accordion .accordion-button:not(.collapsed)::after {
	filter: brightness(0) invert(1);
}
.vls-accordion .accordion-button:not(.collapsed) .day-progress-badge.bg-secondary {
	background: rgba(255, 255, 255, 0.25) !important;
	color: #fff;
}
.vls-accordion .accordion-button:focus {
	box-shadow: none;
	border-color: #e3e8ef;
}
.vls-accordion .day-progress-badge {
	font-weight: 600;
	font-size: 12px;
	border-radius: 30px;
	padding: 4px 10px;
}
.vls-accordion .accordion-body {
	padding: 0;
}

.vls-accordion .video-session-table {
	margin-bottom: 0;
}
.vls-accordion .video-session-table thead th {
	background: #f0f4f8;
	color: #556;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	border-bottom: 2px solid #e3e8ef;
	padding: 10px 14px;
}
.vls-accordion .video-session-table td {
	vertical-align: middle;
	padding: 12px 14px;
}
.vls-accordion .video-session-meta {
	width: 45%;
}
.vls-accordion .video-session-meta .session-label {
	font-weight: 600;
	color: #1f2d38;
	display: block;
	margin-bottom: 2px;
}
.vls-accordion .video-session-meta .session-desc {
	font-size: 13px;
	color: #6b7b8a;
	line-height: 1.4;
}
.vls-accordion .video-session-input-area {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.vls-accordion .video-session-input-area .form-control {
	flex: 1 1 auto;
	min-width: 0;
	border-radius: 8px;
	border: 1px solid #d5dfe8;
}
.vls-accordion .video-session-input-area .form-control:focus {
	border-color: #2080c3;
	box-shadow: 0 0 0 3px rgba(32, 128, 195, 0.15);
}
.vls-accordion .video-save-status {
	min-width: 20px;
	text-align: center;
	font-size: 18px;
}
.vls-accordion .video-save-status .fa-check-circle { color: #1e9e51; }
.vls-accordion .video-save-status .fa-circle-exclamation { color: #d9363e; }
.vls-accordion .video-watch-link {
	white-space: nowrap;
	border-radius: 8px;
}

.vls-submit-bar {
	display: flex;
	justify-content: flex-end;
	margin: 20px 0 24px 0;
}
.vls-submit-btn.btn {
	background: #01507c;
	border: 1px solid #01507c;
	color: #fff;
	font-weight: 600;
	font-size: 15px;
	padding: 11px 24px;
	border-radius: 8px;
	transition: background 0.15s ease, box-shadow 0.15s ease;
}
.vls-submit-btn.btn:hover,
.vls-submit-btn.btn:focus {
	background: #013a5c;
	border-color: #013a5c;
	color: #fff;
	box-shadow: 0 4px 12px rgba(1, 80, 124, 0.28);
}
.vls-submit-btn.btn:disabled {
	background: #7ea6bf;
	border-color: #7ea6bf;
	cursor: not-allowed;
}

.vls-modal-content {
	border: 0;
	border-radius: 14px;
	overflow: hidden;
}
.vls-modal-header {
	background: linear-gradient(120deg, #01507cde, #13416af7);
	color: #fff;
	border-bottom: 0;
}
.vls-modal-header .modal-title {
	font-weight: 600;
}
.vls-modal-header .modal-title i {
	color: #ff5a5f;
}
.vls-preview-summary {
	margin-bottom: 16px;
}
.vls-preview-summary-top {
	margin-bottom: 8px;
}
.vls-preview-summary-text {
	font-size: 15px;
	color: #0f2b40;
}
.vls-preview-track.progress {
	height: 10px;
	border-radius: 30px;
	background: #eef2f6;
}
.vls-preview-track .progress-bar {
	border-radius: 30px;
	width: 0%;
}
.vls-preview-table th {
	background: #f0f4f8;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: #556;
}
.vls-preview-table td {
	vertical-align: middle;
	font-size: 13.5px;
}
.vls-preview-table .status-saved { color: #1e9e51; font-weight: 600; }
.vls-preview-table .status-missing { color: #d9363e; font-weight: 600; }
.vls-preview-table .video-preview-phase-heading td {
	background: #eef6ff;
	color: #0b4a7a;
	font-weight: 700;
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

@media (max-width: 767.98px) {
	.vls-hero {
		padding: 18px;
	}
	.vls-hero-title {
		font-size: 22px;
	}
	.vls-phase-head {
		padding: 14px;
	}
	.vls-phase-title {
		font-size: 15.5px;
		flex-basis: 100%;
		order: 3;
	}
	.vls-phase-body {
		padding: 14px;
	}
	.vls-accordion .video-session-table thead {
		display: none;
	}
	.vls-accordion .video-session-table,
	.vls-accordion .video-session-table tbody,
	.vls-accordion .video-session-table tr,
	.vls-accordion .video-session-table td {
		display: block;
		width: 100%;
	}
	.vls-accordion .video-session-table tr.video-session-row {
		border: 1px solid #e3e8ef;
		border-radius: 10px;
		margin: 10px;
		padding: 4px 2px;
		background: #fff;
	}
	.vls-accordion .video-session-meta {
		width: 100%;
		border-bottom: 0 !important;
	}
	.vls-accordion .video-session-input-area {
		width: 100%;
		border-top: 0 !important;
		padding-top: 0 !important;
	}
	.vls-submit-bar {
		justify-content: stretch;
	}
	.vls-submit-btn.btn {
		width: 100%;
	}
}
@media (max-width: 575.98px) {
	.vls-progress-card {
		position: static;
	}
	.vls-accordion .accordion-button {
		font-size: 14px;
		padding: 12px 14px;
	}
}


.v3-side-cc-cls {
	box-shadow: 0px 0px 8px #40b5ff;
	height: fit-content;
	max-height: 60vh;
	border-radius: 7px;
	overflow: auto;
	position: sticky;
	top: 10vh;
	background: #fff;
}
.v3-step-list {
    list-style: none;
    padding: 15px;
    margin: 0;
    display: flex;
    flex-direction: row;
    gap: 10px;
    overflow: auto;
    max-width: 100%;
}
.v3-step-item {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: start;
	gap: 5px;
	padding: 12px;
	margin-bottom: 0px;
	cursor: pointer;
	border-radius: 5px;
	background: #fff;
	border-left: 3px solid transparent;
	box-shadow: 0px 0px 4px #10b7fd;
	transition: background 0.3s ease, border-color 0.3s ease;
}
.v3-step-item p {
	color: #000;
	font-size: 15px;
	font-weight: 400;
	text-align: start;
	margin: 0px;
	word-break: keep-all;
	white-space: normal;
}
.v3-step-item:hover {
	background: #e8f0ff;
}
.v3-step-item.active {
	background: #d6eaff;
	color: #000;
	border-left-color: #1b88ff;
}
.v3-step-item.completed {
	background: #eafff4;
	color: #000;
	border-left-color: #00d769;
}
.v3-step-item.incomplete {
	background: #fbe4e4;
	color: #000;
	border-left-color: #ff1b1b;
}
.v3-step-item.active.completed,
.v3-step-item.active.incomplete {
	background: #d6eaff;
	border-left-color: #1b88ff;
}

.v3-marking-details {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 5px;
}
.v3-marking-details p {
	color: #000;
	font-size: 14px;
	font-weight: 600 !important;
	text-align: start;
	margin: 0px;
	word-break: keep-all;
	white-space: normal;
}
.v3-marking-details p span {
	font-weight: 400 !important;
}

.v3-form-wrapper {
	padding: 25px;
	border-radius: 8px;
	box-shadow: 0 0px 15px #21a2f4;
	min-height: 400px;
	background: #fff;
}
.v3-step-form { display: none; }
.v3-step-form.active { display: block; }

.v3-bottom-btn-area {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 5px;
	padding: 5px;
}
.v3-btm-sd-area {
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
	gap: 5px;
}
.v3-next,
.v3-prev,
.save-btn-new-v3,
.v3-submit-btn,
.v3-delete-data-btn {
	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;
	cursor: pointer;
	transition: background 0.2s ease;
}
.v3-next { background: #0d488d; }
.v3-next:hover { background: #05356c; color: #fff; }

.v3-prev { background: #996f17; }
.v3-prev:hover { background: #75530b; color: #fff; }

.save-btn-new-v3 { background: #058e6c; }
.save-btn-new-v3:hover { background: #007588; color: #fff; }

.v3-submit-btn { background: #009470; }
.v3-submit-btn:hover { background: #04634c; color: #fff; }

.v3-delete-data-btn { background: #aa0000; padding: 7px 10px; }
.v3-delete-data-btn:hover { background: #770101; color: #fff; }

.v3-next:disabled,
.v3-prev:disabled,
.v3-submit-btn:disabled {
	opacity: .65;
	cursor: not-allowed;
}

@media (max-width: 768px) {
	.v3-step-item {
		padding: 10px;
	}
}
@media (max-width: 767px) {
	.v3-side-cc-cls {
		position: static;
		max-height: none;
	}
	.v3-step-list {
		flex-direction: row;
		flex-wrap: nowrap;
		width: 100%;
		overflow-x: auto;
		gap: 10px;
		padding: 10px;
	}
	.v3-step-item {
		min-width: 180px;
	}
	.v3-form-wrapper {
		margin-top: 30px;
	}
}
@media (max-width: 500px) {
	.v3-form-wrapper {
		padding: 5px;
	}
	.v3-step-item p {
		font-size: 13px;
	}
	.v3-bottom-btn-area {
		justify-content: center;
	}
}

#project-details-wrapper .v3-side-cc-cls {
	position: static;
	max-height: none;
	overflow: visible;
	background: #fff;
	border: 1px solid #e3ecf5;
	border-radius: 14px;
	box-shadow: 0 4px 18px rgba(7, 41, 65, 0.06);
	padding: 8px;
}
#project-details-wrapper .v3-step-list {
	counter-reset: v3pd-step;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 8px;
	padding: 0;
	margin: 0;
	overflow-x: auto;
	scrollbar-width: thin;
}
#project-details-wrapper .v3-step-item {
	counter-increment: v3pd-step;
	flex: 1 1 0;
	min-width: 220px;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border: 1px solid transparent;
	border-radius: 10px;
	background: #f5f8fb;
	box-shadow: none;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

#project-details-wrapper .v3-step-item p {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: #3a4f6d;
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}
#project-details-wrapper .v3-step-item p span {
	font-size: 15px;
	opacity: 0.8;
}
#project-details-wrapper .v3-step-item:hover {
	background: #eaf3fc;
	border-color: #cfe3f7;
}

#project-details-wrapper .v3-step-item.completed {
	background: #effaf4;
	border-color: #c4ebd4;
}

#project-details-wrapper .v3-step-item.completed p {
	color: #12784f;
}

#project-details-wrapper .v3-step-item.active,
#project-details-wrapper .v3-step-item.active.completed {
	background: linear-gradient(120deg, #072941, #0b4a75);
	border-color: #072941;
	box-shadow: 0 6px 16px rgba(7, 41, 65, 0.22);
}

#project-details-wrapper .v3-step-item.active p,
#project-details-wrapper .v3-step-item.active p span {
	color: #fff;
	opacity: 1;
}

#project-details-wrapper .v3-form-wrapper {
	min-height: auto;
	padding: 24px;
	background: #ffffff00;
	border: 1px solid #e3ecf5;
	border-radius: 14px;
	box-shadow: 0 4px 18px rgba(7, 41, 65, 0.06);
}
#project-details-wrapper .v3-step-form.active {
	animation: v3pdFadeIn 0.25s ease;
}
@keyframes v3pdFadeIn {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}
#project-details-wrapper .v3-step-form > .container-fluid {
	padding-left: 0;
	padding-right: 0;
}

#project-details-wrapper .v3-form-wrapper .sps-card {
	border: 1px solid #e3ecf5;
	box-shadow: none;
}
#project-details-wrapper .v3-form-wrapper .sps-card-head {
	background: linear-gradient(90deg, #c3def7, #88b1d9);
	border-bottom: 1px solid #e3ecf5;
	padding: 14px 18px;
}
#project-details-wrapper .v3-form-wrapper .sps-card-icon {
	background: #072941;
	color: #fff;
}
#project-details-wrapper .v3-form-wrapper .sps-card-title {
	font-size: 16px;
}
#project-details-wrapper .v3-form-wrapper .sps-card-sticky {
	top: calc(var(--header-height) + 16px);
}

#project-details-wrapper .v3-form-wrapper .vls-progress-card {
	top: calc(var(--header-height) + 8px);
	border-color: #e3ecf5;
}
#project-details-wrapper .v3-form-wrapper .vls-phase-card {
	box-shadow: none;
	border-color: #e3ecf5;
}
#project-details-wrapper .v3-form-wrapper .vls-submit-bar {
	margin-bottom: 0;
}

#project-details-wrapper .v3-step-form > .bottom-btn-area {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 24px !important;
	padding: 18px 0 0;
	border-top: 1px dashed #d5e1ee;
}
#project-details-wrapper .v3-step-form > .bottom-btn-area .v3-next,
#project-details-wrapper .v3-step-form > .bottom-btn-area .v3-prev,
#project-details-wrapper .v3-step-form > .bottom-btn-area .save-btn-new-v3 {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 22px;
	font-size: 15px;
	font-weight: 600;
	border-radius: 8px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
#project-details-wrapper .v3-step-form > .bottom-btn-area .v3-next {
	background: #072941;
	color: #fff;
	box-shadow: 0 4px 12px rgba(7, 41, 65, 0.25);
}
#project-details-wrapper .v3-step-form > .bottom-btn-area .v3-next:hover {
	background: #0b4a75;
	transform: translateY(-1px);
}
#project-details-wrapper .v3-step-form > .bottom-btn-area .v3-prev {
	background: #fff;
	color: #072941;
	border-color: #c9d8ec;
}
#project-details-wrapper .v3-step-form > .bottom-btn-area .v3-prev:hover {
	background: #eef5fd;
	border-color: #072941;
}
#project-details-wrapper .v3-step-form > .bottom-btn-area .save-btn-new-v3 {
	background: #0f7b5f;
	color: #fff;
}
#project-details-wrapper .v3-step-form > .bottom-btn-area .save-btn-new-v3:hover {
	background: #0a5f49;
	transform: translateY(-1px);
}

@media (max-width: 767.98px) {
	#project-details-wrapper .v3-step-item {
		min-width: 190px;
		padding: 10px 12px;
	}
	#project-details-wrapper .v3-step-item p {
		font-size: 14px;
	}
	#project-details-wrapper .v3-form-wrapper {
		margin-top: 0;
		padding: 14px;
	}
	#project-details-wrapper .v3-form-wrapper .vls-progress-card {
		position: static;
	}
}
@media (max-width: 500px) {
	#project-details-wrapper .v3-step-form > .bottom-btn-area {
		flex-direction: column;
		align-items: stretch;
	}
	#project-details-wrapper .v3-step-form > .bottom-btn-area > * {
		width: 100%;
		justify-content: center;
	}
	#project-details-wrapper .v3-step-form > .bottom-btn-area > div:empty {
		display: none;
	}
}


.sss-page {
	width: 100%;
}

.sss-hero {
	background: linear-gradient(120deg, #01507cde, #13416af7), url(../db_img/welcome-banner-bg.png);
	background-size: cover;
	border-radius: 14px;
	padding: 24px;
	box-shadow: 0px 4px 18px rgba(32, 128, 195, 0.28);
	margin-bottom: 16px;
}
.sss-hero-tag {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	padding: 5px 12px;
	border-radius: 30px;
	margin-bottom: 12px;
}
.sss-hero-tag i {
	font-size: 13px;
}
.sss-hero-title {
	color: #fff;
	font-size: 27px;
	font-weight: 700;
	margin: 0 0 18px 0;
	word-break: break-word;
}
.sss-hero-meta {
	margin: 0;
}
.sss-meta-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.sss-meta-label {
	font-size: 11.5px;
	font-weight: 500;
	color: #cfe3f1;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}
.sss-meta-value {
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	word-break: break-word;
	line-height: 1.35;
}

.sss-empty-state {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #fff;
	border: 1px dashed #c3d2de;
	border-radius: 12px;
	padding: 22px 20px;
	color: #6b7b8a;
	font-size: 15px;
	font-weight: 500;
	box-shadow: 0px 2px 10px rgba(32, 128, 195, 0.06);
}
.sss-empty-state i {
	font-size: 22px;
	color: #9aacba;
	flex-shrink: 0;
}

.sss-card {
	background: #fff;
	border: 1px solid #e6edf3;
	border-radius: 12px;
	box-shadow: 0px 2px 10px rgba(32, 128, 195, 0.08);
	overflow: hidden;
	margin-bottom: 16px;
}
.sss-card-last {
	margin-bottom: 24px;
}
.sss-card-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 15px 18px;
	background: #f8fbfd;
	border-bottom: 1px solid #eef3f7;
}
.sss-card-icon {
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: #e7f1f9;
	color: #01507c;
	font-size: 15px;
}
.sss-card-head .sss-card-title.opms-section-title {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	color: #0f2b40;
	word-break: break-word;
}
.sss-card-body {
	padding: 18px;
}

.sss-action-box:empty {
	display: none;
}
.sss-action-box {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding-top: 14px;
	border-top: 1px solid #eef3f7;
}

@media (max-width: 767.98px) {
	.sss-hero {
		padding: 18px;
	}
	.sss-hero-title {
		font-size: 21px;
	}
	.sss-card-body {
		padding: 14px;
	}
	.sss-card-head {
		padding: 13px 14px;
	}
	.sss-card-body .opms-table,
	.sss-card-body table {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.sss-action-box .btn {
		width: 100%;
	}
}
@media (max-width: 575.98px) {
	.sss-hero-tag {
		font-size: 12px;
	}
	.sss-empty-state {
		padding: 18px 16px;
		font-size: 14px;
	}
}

.pvx-preview-page .v3-side-cc-cls {
	position: static;
	max-height: none;
	overflow: visible;
	background: #fff;
	border: 1px solid #e3ecf5;
	border-radius: 14px;
	box-shadow: 0 4px 18px rgba(7, 41, 65, 0.06);
	padding: 8px;
}
.pvx-preview-page .v3-step-list {
	counter-reset: pvx-step;
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	padding: 0;
	margin: 0;
	overflow-x: auto;
}
.pvx-preview-page .v3-step-item {
	counter-increment: pvx-step;
	flex: 1 1 0;
	min-width: 0;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border: 1px solid transparent;
	border-radius: 10px;
	background: #f5f8fb;
	box-shadow: none;
}
.pvx-preview-page .v3-step-item::before {
	content: counter(pvx-step);
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 700;
	background: #fff;
	color: #072941;
	border: 2px solid #c9d8ec;
}
.pvx-preview-page .v3-step-item p {
	min-width: 0;
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: #3a4f6d;
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.pvx-preview-page .v3-step-item:hover {
	background: #eaf3fc;
	border-color: #cfe3f7;
}
.pvx-preview-page .v3-step-item.active {
	background: linear-gradient(120deg, #072941, #0b4a75);
	border-color: #072941;
	box-shadow: 0 6px 16px rgba(7, 41, 65, 0.22);
}
.pvx-preview-page .v3-step-item.active::before {
	border-color: #fff;
}
.pvx-preview-page .v3-step-item.active p {
	color: #fff;
}

.pvx-preview-page .pv-tab-panel > .sps-card {
	border: 1px solid #e3ecf5;
	border-radius: 14px;
	box-shadow: 0 4px 18px rgba(7, 41, 65, 0.06);
}
.pvx-preview-page .pv-tab-panel .sps-card-head {
	background: linear-gradient(90deg, #eaf4fd, #f8fbfe);
	border-bottom: 1px solid #e3ecf5;
}
.pvx-preview-page .pv-tab-panel .sps-card-icon {
	background: #072941;
	color: #fff;
}
.pvx-preview-page .pv-tab-panel .sps-card-body {
	padding: 22px;
	min-width: 0;
}

.pvx-preview-page .pvx-section-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 26px 0 14px;
	padding-bottom: 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #072941;
	border-bottom: 1px dashed #d5e1ee;
}
.pvx-preview-page .pvx-section-title:first-child {
	margin-top: 0;
}
.pvx-preview-page .pvx-section-title i {
	width: 26px;
	height: 26px;
	border-radius: 7px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #e7f1f9;
	color: #0b4a75;
	font-size: 12px;
}

.pvx-preview-page .pvx-field {
	display: flex;
	align-items: stretch;
	height: 100%;
	min-width: 0;
	background: #fff;
	border: 1px solid #e3ecf5;
	border-radius: 10px;
	overflow: hidden;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pvx-preview-page .pvx-field:hover {
	border-color: #c9d8ec;
	box-shadow: 0 2px 10px rgba(7, 41, 65, 0.06);
}
.pvx-preview-page .pvx-field-label {
	flex: 0 0 38%;
	max-width: 38%;
	display: flex;
	align-items: center;
	margin: 0;
	padding: 12px 14px;
	background: #f4f8fc;
	border-right: 1px solid #e3ecf5;
	font-size: 13.5px;
	font-weight: 700;
	color: #12233b;
	word-break: break-word;
}
.pvx-preview-page .pvx-field .pvx-field-value.form-control {
	flex: 1 1 auto;
	min-width: 0;
	height: auto;
	margin: 0 !important;
	padding: 12px 14px !important;
	border: 0 !important;
	border-radius: 0;
	background: transparent !important;
	box-shadow: none !important;
	font-size: 14.5px;
	font-weight: 500;
	color: #24333f;
	cursor: default;
	text-overflow: ellipsis;
}
.pvx-preview-page .pvx-field textarea.pvx-field-value.form-control {
	resize: none;
	min-height: 48px;
	field-sizing: content;
	line-height: 1.5;
}
.pvx-preview-page .pvx-field .pvx-field-value.form-control:focus {
	outline: none;
}

.pvx-preview-page .pvx-doc-tile {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 100%;
	min-width: 0;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid #e3ecf5;
	border-radius: 12px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pvx-preview-page .pvx-doc-tile:hover {
	border-color: #c9d8ec;
	box-shadow: 0 4px 14px rgba(7, 41, 65, 0.08);
}
.pvx-preview-page .pvx-doc-icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fdecec;
	color: #c62828;
	font-size: 20px;
}
.pvx-preview-page .pvx-doc-info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.pvx-preview-page .pvx-doc-label {
	font-size: 13.5px;
	font-weight: 700;
	color: #12233b;
	line-height: 1.35;
	overflow-wrap: anywhere;
}
.pvx-preview-page .pvx-doc-name {
	font-size: 12.5px;
	color: #5d657b;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.pvx-preview-page .pvx-doc-tile .pvx-doc-view.view-answer-pdf-btn {
	flex-shrink: 0;
	margin: 0;
	padding: 7px 14px;
	font-size: 13.5px;
	border-radius: 8px;
	background: #072941;
}
.pvx-preview-page .pvx-doc-tile .pvx-doc-view.view-answer-pdf-btn:hover {
	background: #0b4a75;
}
.pvx-preview-page .pvx-doc-tile.is-missing {
	background: #fff8f8;
	border-color: #f5c6c6;
}
.pvx-preview-page .pvx-doc-tile.is-missing .pvx-doc-icon {
	background: #f1f3f6;
	color: #9aa6bf;
}
.pvx-preview-page .pvx-doc-tile.is-missing .pvx-doc-name {
	color: #c0392b;
	font-weight: 600;
}
.pvx-preview-page .pvx-doc-missing {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 999px;
	background: #fdecec;
	color: #c0392b;
	font-size: 12.5px;
	font-weight: 700;
}

.pvx-preview-page .pvx-video-area #pvVideoAlert {
	border-radius: 10px;
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 20px;
}

.pvx-preview-page .pvx-video-area #pvVideoContainer {
	--pvx-card-w: 260px;
	--pvx-gap: 12px;
	--pvx-day-gap: 16px;
	--pvx-band-w: 72px;

	display: flex;
	flex-direction: column;
	gap: 26px;
	min-width: 0;
}

.pvx-preview-page .pvx-segment {
	min-width: 0;
	padding: 16px;
	background: #f7f9fc;
	border: 1px solid #e3ecf5;
	border-radius: 16px;
}
.pvx-preview-page .pvx-seg-head {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 16px;
	padding-bottom: 14px;
	border-bottom: 1px dashed #d5e1ee;
}
.pvx-preview-page .pvx-seg-step {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #072941, #0b4a75);
	color: #fff;
	font-size: 17px;
	font-weight: 800;
	box-shadow: 0 6px 14px rgba(7, 41, 65, 0.22);
}
.pvx-preview-page .pvx-seg-info {
	flex: 1 1 220px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.pvx-preview-page .pvx-seg-title {
	margin: 0;
	font-size: 17px;
	font-weight: 800;
	color: #072941;
	letter-spacing: 0.2px;
}
.pvx-preview-page .pvx-seg-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 10px;
	font-size: 12.5px;
	font-weight: 500;
	color: #5d6f84;
}
.pvx-preview-page .pvx-seg-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 10px;
	border-radius: 999px;
	background: #e7f1f9;
	color: #0b4a75;
	font-weight: 700;
}
.pvx-preview-page .pvx-seg-progress {
	flex: 0 1 200px;
	min-width: 140px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
}
.pvx-preview-page .pvx-seg-num {
	font-size: 13px;
	font-weight: 800;
	color: #b5651d;
}
.pvx-preview-page .pvx-seg-bar {
	display: block;
	width: 100%;
	height: 8px;
	border-radius: 999px;
	background: #e6ecf3;
	overflow: hidden;
}
.pvx-preview-page .pvx-seg-bar i {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, #f0a43a, #e07b1f);
	transition: width 0.6s ease;
}
.pvx-preview-page .pvx-seg-progress.is-done .pvx-seg-num { color: #12784f; }
.pvx-preview-page .pvx-seg-progress.is-done .pvx-seg-bar i {
	background: linear-gradient(90deg, #34c58a, #12784f);
}

.pvx-preview-page .pvx-day-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--pvx-day-gap);
	min-width: 0;
}

.pvx-preview-page .pvx-tone-1  { --pvx-bg:#fff1f3; --pvx-bd:#f6c5d0; --pvx-ac:#d6456d; }
.pvx-preview-page .pvx-tone-2  { --pvx-bg:#f3f0ff; --pvx-bd:#d6ccff; --pvx-ac:#6d4fd0; }
.pvx-preview-page .pvx-tone-3  { --pvx-bg:#ecfdf3; --pvx-bd:#b5e7ca; --pvx-ac:#188a56; }
.pvx-preview-page .pvx-tone-4  { --pvx-bg:#fff7e6; --pvx-bd:#f8d79c; --pvx-ac:#c27806; }
.pvx-preview-page .pvx-tone-5  { --pvx-bg:#eef6ff; --pvx-bd:#c4dcfa; --pvx-ac:#2867b8; }
.pvx-preview-page .pvx-tone-6  { --pvx-bg:#fdf2fa; --pvx-bd:#f0c2e3; --pvx-ac:#b23c8e; }
.pvx-preview-page .pvx-tone-7  { --pvx-bg:#effcf9; --pvx-bd:#b0e6db; --pvx-ac:#0f8577; }
.pvx-preview-page .pvx-tone-8  { --pvx-bg:#fefce8; --pvx-bd:#eee0a0; --pvx-ac:#9a7b0a; }
.pvx-preview-page .pvx-tone-9  { --pvx-bg:#fff4ed; --pvx-bd:#f9ccb0; --pvx-ac:#cf5f2a; }
.pvx-preview-page .pvx-tone-10 { --pvx-bg:#f4fbea; --pvx-bd:#cde6ad; --pvx-ac:#4f8a19; }

.pvx-preview-page .pvx-day-group {
	--pvx-n: 1;
	display: flex;
	align-items: stretch;
	min-width: 0;
	--pvx-day-base: calc(var(--pvx-band-w) + var(--pvx-n) * var(--pvx-card-w) + (var(--pvx-n) - 1) * var(--pvx-gap) + 24px);
	flex: var(--pvx-n) 1 var(--pvx-day-base);
	max-width: min(100%, calc(var(--pvx-day-base) * 1.6));
	background: var(--pvx-bg, #f5f8fb);
	border: 1px solid var(--pvx-bd, #e3ecf5);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 3px 12px rgba(7, 41, 65, 0.05);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.pvx-preview-page .pvx-day-group:hover {
	box-shadow: 0 10px 26px rgba(7, 41, 65, 0.12);
}
.pvx-preview-page .pvx-day-size-2 { --pvx-n: 2; }
.pvx-preview-page .pvx-day-size-3 { --pvx-n: 3; }
.pvx-preview-page .pvx-day-size-4 { --pvx-n: 4; }

.pvx-preview-page .pvx-day-band {
	flex: 0 0 var(--pvx-band-w);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 14px 6px;
	background: var(--pvx-ac, #072941);
	background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0.08));
	color: #fff;
	text-align: center;
}
.pvx-preview-page .pvx-day-lbl {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	opacity: 0.85;
}
.pvx-preview-page .pvx-day-num {
	font-size: 30px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.5px;
}
.pvx-preview-page .pvx-day-count {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 8px;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.95);
	color: var(--pvx-ac, #072941);
	font-size: 11.5px;
	font-weight: 800;
	white-space: nowrap;
}
.pvx-preview-page .pvx-day-group.has-missing .pvx-day-count {
	background: #fff;
	color: #c0392b;
}

.pvx-preview-page .pvx-session-grid {
	flex: 1 1 auto;
	min-width: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(var(--pvx-card-w, 260px), 100%), 1fr));
	gap: var(--pvx-gap, 12px);
	padding: 12px;
}

.pvx-preview-page .pvx-session-card {
	display: flex;
	flex-direction: column;
	gap: 9px;
	height: 100%;
	min-width: 0;
	padding: 14px;
	background: #fff;
	border: 1px solid var(--pvx-bd, #e3ecf5);
	border-top: 3px solid var(--pvx-ac, #072941);
	border-radius: 11px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pvx-preview-page .pvx-session-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(7, 41, 65, 0.1);
}
.pvx-preview-page .pvx-session-top {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}
.pvx-preview-page .pvx-session-no {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--pvx-bg, #f5f8fb);
	color: var(--pvx-ac, #072941);
	border: 1px solid var(--pvx-bd, #e3ecf5);
	font-size: 12px;
	font-weight: 800;
}
.pvx-preview-page .pvx-session-title {
	min-width: 0;
	margin: 0;
	font-size: 14.5px;
	font-weight: 700;
	color: #12233b;
	overflow-wrap: anywhere;
}
.pvx-preview-page .pvx-session-desc {
	flex: 1 1 auto;
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: #4a5b69;
	overflow-wrap: anywhere;
}
.pvx-preview-page .pvx-session-link {
	margin-top: auto;
	min-width: 0;
	max-width: 100%;
}

.pvx-preview-page .pvx-link-tag {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	min-width: 0;
	padding: 7px 12px;
	background: #fff;
	border: 1px solid var(--pvx-bd, #e3ecf5);
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	color: #0b4a75;
	text-decoration: none;
	box-shadow: 0 2px 6px rgba(7, 41, 65, 0.06);
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.pvx-preview-page .pvx-link-tag i {
	flex-shrink: 0;
	font-size: 15px;
	color: #e62117;
}
.pvx-preview-page .pvx-link-tag span {
	flex: 1 1 auto;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.pvx-preview-page .pvx-link-tag .pvx-link-go {
	font-size: 11px;
	color: var(--pvx-ac, #072941);
}
.pvx-preview-page .pvx-link-tag:hover {
	background: var(--pvx-ac, #072941);
	border-color: var(--pvx-ac, #072941);
	color: #fff;
}
.pvx-preview-page .pvx-link-tag:hover i {
	color: #fff;
}

.pvx-preview-page .pvx-session-card.is-missing {
	border-style: dashed;
	border-top: 3px solid #d9363e;
	background: #fffafa;
}
.pvx-preview-page .pvx-missing-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	background: #fff;
	border: 1px dashed #e7a3a3;
	color: #c0392b;
	font-size: 12.5px;
	font-weight: 600;
}

.pvx-preview-page .pvx-action-bar {
	position: sticky;
	bottom: 12px;
	z-index: 5;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 14px 18px;
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid #e3ecf5;
	border-radius: 14px;
	box-shadow: 0 8px 24px rgba(7, 41, 65, 0.1);
	backdrop-filter: blur(6px);
}
.pvx-preview-page .pvx-action-bar #pvBackBtn {
	padding: 10px 20px;
	border-radius: 8px;
	font-weight: 600;
	color: #072941;
	border-color: #c9d8ec;
	background: #fff;
}
.pvx-preview-page .pvx-action-bar #pvBackBtn:hover {
	background: #eef5fd;
	border-color: #072941;
}
.pvx-preview-page .pvx-action-bar #pvFinalSubmitBtn {
	padding: 10px 26px;
}


@media (max-width: 991.98px) {
	.pvx-preview-page .pvx-field-label {
		flex-basis: 34%;
		max-width: 34%;
	}
	.pvx-preview-page .pvx-video-area #pvVideoContainer {
		--pvx-card-w: 230px;
		--pvx-band-w: 64px;
	}
}

@media (max-width: 767.98px) {
	.pvx-preview-page .pv-tab-panel .sps-card-body {
		padding: 14px;
	}
	.pvx-preview-page .pv-tab-panel .sps-card-head {
		padding: 12px 14px;
	}
	.pvx-preview-page .v3-step-item {
		padding: 10px 12px;
		gap: 8px;
	}
	.pvx-preview-page .v3-step-item::before {
		width: 28px;
		height: 28px;
		font-size: 13px;
	}
	.pvx-preview-page .v3-step-item p {
		font-size: 14px;
	}
	.pvx-preview-page .pvx-segment {
		padding: 12px;
	}
	.pvx-preview-page .pvx-day-group,
	.pvx-preview-page .pvx-day-size-2,
	.pvx-preview-page .pvx-day-size-3,
	.pvx-preview-page .pvx-day-size-4 {
		flex: 1 1 100%;
		max-width: 100%;
		flex-direction: column;
	}
	.pvx-preview-page .pvx-day-band {
		flex: 0 0 auto;
		flex-direction: row;
		justify-content: flex-start;
		gap: 8px;
		padding: 9px 14px;
	}
	.pvx-preview-page .pvx-day-num {
		font-size: 22px;
	}
	.pvx-preview-page .pvx-day-count {
		margin: 0 0 0 auto;
		font-size: 12px;
	}
	.pvx-preview-page .pvx-session-grid {
		grid-template-columns: minmax(0, 1fr);
		padding: 10px;
	}
	.pvx-preview-page .pvx-session-card {
		padding: 12px;
	}
	.pvx-preview-page .pvx-session-card:hover {
		transform: none;
	}
}

@media (max-width: 575.98px) {
	.pvx-preview-page .v3-side-cc-cls {
		padding: 6px;
	}
	.pvx-preview-page .v3-step-list {
		gap: 6px;
	}
	.pvx-preview-page .v3-step-item {
		padding: 9px 10px;
	}
	.pvx-preview-page .v3-step-item p span {
		display: none;
	}
	.pvx-preview-page .v3-step-item p {
		font-size: 13px;
	}

	.pvx-preview-page .pv-tab-panel .sps-card-body {
		padding: 12px;
	}
	.pvx-preview-page .pvx-video-area #pvVideoContainer {
		--pvx-gap: 10px;
		--pvx-day-gap: 12px;
		gap: 18px;
	}

	.pvx-preview-page .pvx-field {
		flex-direction: column;
	}
	.pvx-preview-page .pvx-field-label {
		flex-basis: auto;
		max-width: 100%;
		border-right: 0;
		border-bottom: 1px solid #e3ecf5;
		padding: 9px 12px;
	}
	.pvx-preview-page .pvx-field .pvx-field-value.form-control {
		padding: 10px 12px !important;
	}

	.pvx-preview-page .pvx-doc-tile {
		flex-wrap: wrap;
	}
	.pvx-preview-page .pvx-doc-tile .pvx-doc-view.view-answer-pdf-btn,
	.pvx-preview-page .pvx-doc-missing {
		width: 100%;
		justify-content: center;
	}

	.pvx-preview-page .pvx-segment {
		padding: 10px;
		border-radius: 12px;
	}
	.pvx-preview-page .pvx-seg-step {
		width: 34px;
		height: 34px;
		font-size: 15px;
	}
	.pvx-preview-page .pvx-seg-title {
		font-size: 15.5px;
	}
	.pvx-preview-page .pvx-seg-progress {
		flex: 1 1 100%;
		align-items: stretch;
	}
	.pvx-preview-page .pvx-seg-num {
		text-align: right;
	}
	.pvx-preview-page .pvx-session-title {
		font-size: 14px;
	}
	.pvx-preview-page .pvx-session-desc {
		font-size: 12.5px;
	}
	.pvx-preview-page .pvx-link-tag {
		padding: 7px 12px;
		font-size: 12px;
	}

	.pvx-preview-page .pvx-action-bar {
		position: static;
		flex-direction: column;
		align-items: stretch;
		padding: 12px;
	}
	.pvx-preview-page .pvx-action-bar > * {
		width: 100%;
		text-align: center;
	}
}
.payment-pending-status, .payment-completed-status,.pd-view-status {
    color: #fff;
    padding: 5px 7px;
    border-radius: 5px;

    display: flex;
    gap: 2px;
    align-items: center;
    width: fit-content;
    text-align: center;
}
.payment-pending-status{
	background: linear-gradient(45deg, #b38507, #f3860dc7);
	box-shadow: 0px 0px 5px #b1862d;
}
.payment-completed-status{
	background: linear-gradient(45deg, #0a632f, #20b271);
	box-shadow: 0px 0px 5px #168f54;
}
.pd-view-status{
	background: linear-gradient(45deg, #055b97, #002aa5);
	box-shadow: 0px 0px 5px #0a3796;
	cursor: pointer;
}
.pd-view-status.pd-status-pending {
	background: linear-gradient(45deg, #b38507, #f3860dc7);
	box-shadow: 0px 0px 5px #b1862d;
}
.pd-view-status.pd-status-submitted {
	background: linear-gradient(45deg, #0a632f, #20b271);
	box-shadow: 0px 0px 5px #168f54;
}
.vls-accordion .video-save-status{
	    width: 100%;
    text-align: start !important;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2px;
}
.error-message-txt{
	color: red;
	font-size: 14px;
	word-break: break-word;
	white-space: normal;
}
/* Design Changes 15-10-2026 */
.project-guideline-area{
	background: #fff;
	padding: 15px;
	border-radius: 0px 0px 7px 7px;
	min-height: 200px;
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 100%;
}
.project-guideline-title{
	color: #000;
	font-size: 22px;
	font-weight: 600;
	margin: 0px;
	word-break: break-word;
	white-space: normal;
	text-align: center;
	text-decoration: underline;
}

/* Level 1 : numbered steps */
.project-guideline-list{
	display: flex;
	flex-direction: column;
	gap: 12px;
	list-style: decimal;
	padding: 0px 0px 0px 24px;
	margin: 0px;
}
.project-guideline-item{
	margin: 0px;
	padding: 10px 12px;
	background: var(--lightigbg);
	border-left: 4px solid var(--ignou-blue-design);
	border-radius: 7px;
}
.project-guideline-item::marker{
	color: #000;
	font-weight: 600;
}
.project-guideline-step-title{
	color: #000;
	font-size: 18px;
	font-weight: 600;
	margin: 0px 0px 6px 0px;
	word-break: break-word;
	white-space: normal;
	text-align: start;
}

/* Level 2 : points under each step */
.project-guideline-sublist{
	display: flex;
	flex-direction: column;
	gap: 5px;
	list-style: disc;
	padding: 0px 0px 0px 20px;
	margin: 0px;
}
.project-guideline-sublist > li{
	margin: 0px;
}
.project-guideline-sublist > li::marker{
	color: #000;
}
.project-guideline-sublist > li > p{
	color: #000;
	font-size: 16px;
	margin: 0px;
	word-break: break-word;
	white-space: normal;
	text-align: justify;
}

/* Level 3 : points under a point */
.project-guideline-sublist-inner{
	list-style: circle;
	margin-top: 5px;
}

/* Size table (step 6) */
.project-guideline-size-list{
	display: flex;
	flex-direction: column;
	gap: 6px;
	list-style: none;
	padding: 0px;
	margin: 0px;
}
.project-guideline-size-row{
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 7px;

}
.project-guideline-size-name{
	flex: 1 1 260px;
	color: #000;
	font-size: 16px;
	margin: 0px;
	word-break: break-word;
	white-space: normal;
	text-align: start;
}
.project-guideline-size-badge{
	background: var(--ignou-blue-design);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	padding: 3px 12px;
	border-radius: 5px;
	word-break: break-word;
	white-space: normal;
	text-align: center;
}

/* Highlights and links */
.project-guideline-highlight{
	color: var(--danger);
	font-weight: 700;
}
.project-guideline-mail{
	color: var(--ignou-blue-design);
	font-weight: 600;
	text-decoration: underline;
	word-break: break-word;
	white-space: normal;
}
.project-guideline-mail:hover{
	color: var(--ignou-blue-dark);
}

/* Declaration */
.project-guideline-declaration{
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 12px 15px;
	border: 1px solid var(--border-soft);
	border-radius: 7px;
	background: #f4f8fc;
}
.project-guideline-declaration-title{
	color: #000;
	font-size: 18px;
	font-weight: 600;
	margin: 0px;
	word-break: break-word;
	white-space: normal;
}
.project-guideline-declaration-text{
	color: #000;
	font-size: 16px;
	margin: 0px;
	word-break: break-word;
	white-space: normal;
	text-align: justify;
}

/* Responsive */
@media(max-width: 768px){
	.project-guideline-title{
		font-size: 20px;
	}
	.project-guideline-step-title{
		font-size: 17px;
	}
}
@media(max-width: 576px){
	.project-guideline-area{
		padding: 10px;
	}
	.project-guideline-title{
		font-size: 18px;
	}
	.project-guideline-list{
		padding-left: 20px;
	}
	.project-guideline-item{
		padding: 8px 10px;
	}
	.project-guideline-step-title{
		font-size: 16px;
	}
	.project-guideline-sublist{
		padding-left: 16px;
	}
	.project-guideline-sublist > li > p,
	.project-guideline-size-name,
	.project-guideline-declaration-text{
		font-size: 15px;
		text-align: start;
	}
	.project-guideline-size-badge{
		width: 100%;
	}
}
/* Design Changes 15-10-2026 */

/* Design Changes 15-10-2026 */

/* ===== Header Brand Title ===== */
.header-left:has(.opms-brand) {
	flex: 0 1 auto;
	min-width: 0;
}

.opms-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.opms-brand-bar {
	flex-shrink: 0;
	width: 4px;
	height: 34px;
	border-radius: 4px;
	background: linear-gradient(180deg, #ffffff, #ffffff);
}

.opms-brand-title {
	font-size: clamp(15px, 1.6vw, 21px);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0.2px;
	color: #fff;
	white-space: normal;
	word-break: break-word;
}

.opms-brand-hl {
	color: #7fd0ff;
}
@media (max-width: 769px){
	.app-sidebar{
		top: 128px;
	}
}
@media (max-width: 767.98px) {
	.opms-brand { gap: 9px; }
	.opms-brand-bar { height: 28px; }
	.opms-brand-title { font-size: 15px; }
	.app-sidebar{
		top: 148px;
	}
}

@media (max-width: 479.98px) {
	.opms-brand { gap: 8px; }
	.opms-brand-bar { width: 3px; height: 24px; }
	.opms-brand-title { font-size: 13px; line-height: 1.2; }
}

/* Design Changes 15-10-2026 */
/* ===== Footer ===== */
.opms-footer-wrap {
	margin-left: var(--sidebar-width);
	transition: margin-left var(--sidebar-transition);
}

.opms-footer {
	background: linear-gradient(182deg, #000000, #123b52);
	border-top: 3px solid #1f77d8;
	box-shadow: 0 -4px 14px rgba(103, 174, 233, 0.35);
	padding: 10px;
}

.opms-footer-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px 20px;
}

.footer-logo {
	width: 110px;
	    height: 40px;
	flex-shrink: 0;
	padding: 4px 8px;
	border-radius: 6px;
}

.ft-img {
	width: 100%;
	height: 100%;

}

.opms-footer-logo-right {

}
.opms-footer-logo-right {
    background: #fff;
    border-radius: 5px;
    width: 65px;
    padding: 2px;
}
	
.opms-footer-text {
	flex: 1 1 280px;
	text-align: center;
	min-width: 0;
}

.opms-footer-line {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	color: #dbe9f7;
	word-break: break-word;
}

.opms-footer-sub {
	font-size: 13px;
	color: #a9c3dd;
}

.opms-footer-hl {
	color: #ffce6d;
	font-weight: 600;
}

/* sidebar offset follows the sidebar state */
@media (min-width: 1100px) {
	body.sidebar-collapsed .opms-footer-wrap {
		margin-left: var(--sidebar-width-collapsed);
	}
}

@media (min-width: 768px) and (max-width: 1099.98px) {
	.opms-footer-wrap {
		margin-left: var(--sidebar-width-collapsed);
	}
}

@media (max-width: 767.98px) {
	.opms-footer-wrap { margin-left: 0; }
	.opms-footer { padding: 12px 14px; }
	.footer-logo { width: 130px; height: 42px; }
	.opms-footer-text {
		order: 3;
		flex: 1 1 100%;
		padding-top: 10px;
		border-top: 1px solid rgba(255, 255, 255, 0.14);
	}
	.header{
		padding: 4px 10px;
		justify-content: center;
		gap: 8px;
	}
	.header-left{
		width: 100%;
	}
}

@media (max-width: 479.98px) {
	.footer-logo {
	    width: auto;
	    height: 30px;
	    padding: 2px 4px;
	}
	.opms-footer-line { font-size: 12.5px; }
	.opms-footer-sub { font-size: 12px; }
}

/* Design Changes 15-10-2026 */
/* Design Changes 15-10-2026 */
.project-guideline-area{
	background: #fff;
	padding: 15px;
	border-radius: 0px 0px 7px 7px;
	min-height: 200px;
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 100%;
}
.project-guideline-title{
	color: #000;
	font-size: 22px;
	font-weight: 600;
	margin: 0px;
	word-break: break-word;
	white-space: normal;
	text-align: center;
	text-decoration: underline;
}

/* Level 1 : numbered steps */
.project-guideline-list{
	display: flex;
	flex-direction: column;
	gap: 4px;
	list-style: decimal;
	padding: 0px 0px 0px 33px;
	margin: 0px;
	max-height: 39vh;
	    overflow: auto;
}
.project-guideline-item{
	margin: 0px;
	padding: 2px;
	background: #fff;
	border-left: none;
	border-radius: 7px;
}
.project-guideline-item::marker{
	color: #000;
	font-weight: 600;
}
.project-guideline-step-title{
	color: #000;
	font-size: 18px;
	font-weight: 600;
	margin: 0px 0px 6px 0px;
	word-break: break-word;
	white-space: normal;
	text-align: start;
}

/* Level 2 : points under each step */
.project-guideline-sublist{
	display: flex;
	flex-direction: column;
	gap: 5px;
	list-style: disc;
	padding: 0px 0px 0px 20px;
	margin: 0px;
}
.project-guideline-sublist > li{
	margin: 0px;
}
.project-guideline-sublist > li::marker{
	color: #000;
}
.project-guideline-sublist > li > p{
	color: #000;
	font-size: 16px;
	margin: 0px;
	word-break: break-word;
	white-space: normal;
	text-align: justify;
}

/* Level 3 : points under a point */
.project-guideline-sublist-inner{
	list-style: circle;
	margin-top: 5px;
}

/* Size table (step 6) */
.project-guideline-size-list{
	display: flex;
	flex-direction: column;
	gap: 6px;
	list-style: none;
	padding: 0px;
	margin: 0px;
}
.project-guideline-size-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    background: none;
    padding: 5px;
    border-radius: 7px;
}
.project-guideline-size-name{
	flex: 1 1 260px;
	color: #000;
	font-size: 16px;
	margin: 0px;
	word-break: break-word;
	white-space: normal;
	text-align: start;
}
.project-guideline-size-badge{
	background: var(--ignou-blue-design);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	padding: 3px 12px;
	border-radius: 5px;
	word-break: break-word;
	white-space: normal;
	text-align: center;
}

/* Highlights and links */
.project-guideline-highlight{
	color: #000;
	font-weight: 700;
}
.project-guideline-mail{
	color: var(--ignou-blue-design);
	font-weight: 600;
	text-decoration: underline;
	word-break: break-word;
	white-space: normal;
}
.project-guideline-mail:hover{
	color: var(--ignou-blue-dark);
}

/* Declaration */
.project-guideline-declaration{
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 12px 15px;
	border: 1px solid var(--border-soft);
	border-radius: 7px;
	background: #f4f8fc;
}
.project-guideline-declaration-title{
	color: #000;
	font-size: 18px;
	font-weight: 600;
	margin: 0px;
	word-break: break-word;
	white-space: normal;
}
.project-guideline-declaration-text{
	color: #000;
	font-size: 16px;
	margin: 0px;
	word-break: break-word;
	white-space: normal;
	text-align: justify;
}

/* Responsive */
@media(max-width: 768px){
	.project-guideline-title{
		font-size: 20px;
	}
	.project-guideline-step-title{
		font-size: 17px;
	}
}
@media(max-width: 576px){
	.project-guideline-area{
		padding: 10px;
	}
	.project-guideline-title{
		font-size: 18px;
	}
	.project-guideline-list{
		padding-left: 35px;
		max-height: 100%;
	}
	.assignment-card-header h3{
		font-size: 18px;
	}
	.details-area-assignment ul li p{
		font-size: 14px;
	}
	.project-guideline-item{
		padding: 5px;
	}
	.project-guideline-step-title{
		font-size: 16px;
	}
	.project-guideline-sublist{
		padding-left: 16px;
	}
	.project-guideline-sublist > li > p,
	.project-guideline-size-name,
	.project-guideline-declaration-text{
		font-size: 15px;
		text-align: start;
	}
	.project-guideline-size-badge{
		width: 100%;
	}
}
/* Design Changes 15-10-2026 */