/* ============================================================================
   EDUcal "Neo" skin
   ----------------------------------------------------------------------------
   A presentation-only layer over Metronic (kt-*) + Bootstrap 4 + the existing
   educal-custom-styles.css. It is always the LAST stylesheet in a layout, so it
   restyles what is already on the page without a single template being rewritten.

   WHAT IT KEEPS
   The palette (EDUcal green #1fa47d, amber #faaa2f, purple #6f67c2), the page
   flow, and every class name the templates already use. Nothing here moves an
   element to a new place in the document -- the sidebar is still the sidebar.

   WHAT IT CHANGES
   Surfaces, depth, type rhythm and motion: a dark command rail, a glass header,
   cards that sit on the canvas instead of being boxed onto it, and Metronic's
   stock purple/teal/pink accents remapped onto the EDUcal palette.

   !important appears throughout on purpose. educal-custom-styles.css and the
   demo1 skins both use it heavily, and some of them load after this file in
   older layouts.
   ========================================================================== */

:root {
	/* Brand -- unchanged from educal-custom-styles.css, named so they can be reused */
	--edu-green: #1fa47d;
	--edu-green-deep: #14604b;
	--edu-green-lift: #25c096;
	--edu-amber: #faaa2f;
	--edu-amber-deep: #df7a00;
	--edu-amber-lift: #fdbe42;
	--edu-purple: #6f67c2;
	--edu-purple-deep: #534c9a;
	--edu-purple-lift: #7d74db;
	--edu-red: #e2495c;
	--edu-red-deep: #c22f42;

	/* Canvas */
	--edu-canvas: #f4f7fb;
	--edu-surface: #ffffff;
	--edu-line: #e6ecf4;
	--edu-line-soft: #eef2f8;
	--edu-ink: #1b2434;
	--edu-ink-2: #55637a;
	--edu-ink-3: #8a97ac;

	/* Command rail */
	--edu-rail: #101827;
	--edu-rail-2: #0b1220;
	--edu-rail-line: rgba(255, 255, 255, 0.07);
	--edu-rail-ink: #aab6c8;
	--edu-rail-ink-dim: #7b899e;

	/* Depth. Two soft layers read as glass; the stock five-shadow stack reads as fog. */
	--edu-shadow-1: 0 1px 2px rgba(16, 24, 39, 0.05), 0 4px 16px rgba(16, 24, 39, 0.06);
	--edu-shadow-2: 0 2px 6px rgba(16, 24, 39, 0.07), 0 16px 40px rgba(16, 24, 39, 0.10);
	--edu-shadow-rail: 0 0 0 1px rgba(16, 24, 39, 0.04);

	--edu-radius: 14px;
	--edu-radius-sm: 10px;

	--edu-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   1. Canvas
   The faint grid + two brand glows give the page depth without competing with
   content. Fixed attachment so it reads as a backdrop, not as page texture.
   ========================================================================== */

/* The technical grid and the two brand glows are painted by the body itself
   rather than an overlay: an overlay would need a z-index, and this codebase has
   too many positioned descendants to be confident one would stay behind them. */
body {
	background-color: var(--edu-canvas) !important;
	background-image:
		radial-gradient(900px 500px at 82% -10%, rgba(31, 164, 125, 0.10), transparent 60%),
		radial-gradient(760px 460px at 8% 0%, rgba(111, 103, 194, 0.09), transparent 60%),
		linear-gradient(rgba(27, 36, 52, 0.028) 1px, transparent 1px),
		linear-gradient(90deg, rgba(27, 36, 52, 0.028) 1px, transparent 1px);
	background-size: 100% 100%, 100% 100%, 46px 46px, 46px 46px;
	background-attachment: fixed;
	color: var(--edu-ink);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	letter-spacing: -0.01em;
}

.kt-grid--root,
.kt-page,
.kt-wrapper,
.kt-content {
	background: transparent !important;
}

::selection {
	background: rgba(31, 164, 125, 0.22);
}

/* Scrollbars, everywhere they are the browser's rather than perfect-scrollbar's */
* {
	scrollbar-width: thin;
	scrollbar-color: #c3ccdb transparent;
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: #c9d2e0;
	border: 3px solid transparent;
	background-clip: content-box;
	border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
	background: #a9b6c9;
	background-clip: content-box;
}

/* ==========================================================================
   2. The command rail (aside)
   Dark, so the working area reads as the bright surface it is. District logos
   are arbitrary uploads -- often dark artwork on transparent -- so the brand
   block sits on a white chip rather than trusting the logo to survive a dark
   background.
   ========================================================================== */

.kt-aside {
	background: linear-gradient(180deg, var(--edu-rail) 0%, var(--edu-rail-2) 100%) !important;
	box-shadow: 1px 0 0 rgba(16, 24, 39, 0.10), 8px 0 32px rgba(16, 24, 39, 0.06);
	border-right: 0 !important;
}

/* A hairline of brand light down the inner edge -- the one "console" flourish. */
.kt-aside::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 1px;
	background: linear-gradient(180deg, rgba(31, 164, 125, 0.55), rgba(111, 103, 194, 0.35) 45%, transparent);
	pointer-events: none;
}

.kt-aside__brand,
.kt-aside .kt-aside__brand {
	background: transparent !important;
	border-bottom: 1px solid var(--edu-rail-line);
	padding: 14px 18px !important;
}

/* Below 1025px the rail is off-canvas and Metronic empties the brand block, so
   the chip would paint as a stray white nub in the corner. Desktop only. */
@media (min-width: 1025px) {
	.kt-aside__brand-logo {
		background: #ffffff;
		border-radius: 12px;
		padding: 8px 12px;
		box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
		display: inline-flex;
		align-items: center;
		transition: transform 0.35s var(--edu-ease), box-shadow 0.35s var(--edu-ease);
	}

	.kt-aside__brand-logo:hover {
		transform: translateY(-1px);
		box-shadow: 0 10px 26px rgba(0, 0, 0, 0.34), inset 0 0 0 1px rgba(255, 255, 255, 0.7);
	}
}

/* Minimised, Metronic hides the logo image outright, so the white chip would be
   an empty slab. Drop it and leave the toggler alone on the dark rail. */
.kt-aside--minimize:not(.kt-aside--minimize-hover) .kt-aside__brand .kt-aside__brand-logo {
	background: transparent;
	box-shadow: none;
	padding: 0;
}

.kt-aside__brand-tools .kt-aside__brand-aside-toggler span,
.kt-aside__brand-tools .kt-aside__brand-aside-toggler span::before,
.kt-aside__brand-tools .kt-aside__brand-aside-toggler span::after {
	background: var(--edu-rail-ink) !important;
}

.kt-aside__brand-tools .kt-aside__brand-aside-toggler:hover span,
.kt-aside__brand-tools .kt-aside__brand-aside-toggler:hover span::before,
.kt-aside__brand-tools .kt-aside__brand-aside-toggler:hover span::after {
	background: var(--edu-green-lift) !important;
}

.kt-aside-menu,
.kt-aside .kt-aside-menu {
	background: transparent !important;
	padding: 10px 0 24px !important;
}

.kt-aside-menu .kt-menu__nav {
	padding: 0 10px !important;
}

/* Section labels: micro-caps. The templates already colour these amber/green. */
.kt-aside-menu .kt-menu__nav > .kt-menu__section {
	margin: 22px 0 6px !important;
	padding: 0 12px !important;
	height: auto !important;
}

.kt-aside-menu .kt-menu__nav > .kt-menu__section .kt-menu__section-text {
	font-size: 0.68rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase;
	opacity: 0.95;
}

.kt-aside-menu .kt-menu__nav > .kt-menu__section .kt-menu__section-icon {
	color: var(--edu-rail-ink-dim) !important;
}

/* Section labels are coloured by the templates in the mid-tone brand values,
   which were picked against a white rail. On the dark one they need the lifted
   variants to stay readable; an uncoloured section falls back to slate. */
.kt-aside .kt-aside-menu .kt-menu__nav > .kt-menu__section .kt-menu__section-text {
	color: var(--edu-rail-ink) !important;
}

.kt-aside .kt-aside-menu .kt-menu__nav > .kt-menu__section .kt-menu__section-text.purpleText {
	color: var(--edu-purple-lift) !important;
}

.kt-aside .kt-aside-menu .kt-menu__nav > .kt-menu__section .kt-menu__section-text.greenText {
	color: var(--edu-green-lift) !important;
}

.kt-aside .kt-aside-menu .kt-menu__nav > .kt-menu__section .kt-menu__section-text.yellowText {
	color: var(--edu-amber) !important;
}

/* Items. The skin tints the <li> as well as the link; only the link should carry
   a surface, or the rounded pill sits inside a square grey block. */
.kt-aside .kt-aside-menu .kt-menu__nav .kt-menu__item,
.kt-aside .kt-aside-menu .kt-menu__nav .kt-menu__item.kt-menu__item--active,
.kt-aside .kt-aside-menu .kt-menu__nav .kt-menu__item.kt-menu__item--open,
.kt-aside .kt-aside-menu .kt-menu__nav .kt-menu__item.kt-menu__item--hover {
	background: transparent !important;
}

.kt-aside-menu .kt-menu__nav .kt-menu__item > .kt-menu__link {
	border-radius: var(--edu-radius-sm) !important;
	margin: 2px 0 !important;
	padding: 9px 12px !important;
	position: relative;
	transition: background-color 0.2s var(--edu-ease), color 0.2s var(--edu-ease), transform 0.2s var(--edu-ease);
}

.kt-aside-menu .kt-menu__nav .kt-menu__item > .kt-menu__link .kt-menu__link-text {
	color: var(--edu-rail-ink) !important;
	font-weight: 500 !important;
	font-size: 0.95rem !important;
}

.kt-aside-menu .kt-menu__nav .kt-menu__item > .kt-menu__link .kt-menu__link-icon,
.kt-aside-menu .kt-menu__nav .kt-menu__item > .kt-menu__link .kt-menu__ver-arrow {
	color: var(--edu-rail-ink-dim) !important;
	transition: color 0.2s var(--edu-ease);
}

.kt-aside-menu .kt-menu__nav .kt-menu__item > .kt-menu__link .kt-menu__link-icon {
	font-size: 1.05rem !important;
	width: 28px !important;
}

.kt-aside .kt-aside-menu .kt-menu__nav .kt-menu__item:not(.kt-menu__item--active) > .kt-menu__link:hover,
.kt-aside .kt-aside-menu .kt-menu__nav .kt-menu__item.kt-menu__item--open > .kt-menu__link,
.kt-aside .kt-aside-menu .kt-menu__nav .kt-menu__item.kt-menu__item--hover > .kt-menu__link {
	background: rgba(255, 255, 255, 0.055) !important;
	transform: translateX(2px);
}

.kt-aside-menu .kt-menu__nav .kt-menu__item:not(.kt-menu__item--active) > .kt-menu__link:hover .kt-menu__link-text {
	color: #ffffff !important;
}

.kt-aside-menu .kt-menu__nav .kt-menu__item:not(.kt-menu__item--active) > .kt-menu__link:hover .kt-menu__link-icon {
	color: var(--edu-green-lift) !important;
}

/* Active: brand-tinted glass with a glowing rail. An open submenu parent is not
   "active" -- it only gets the hover tint above. */
.kt-aside .kt-aside-menu .kt-menu__nav .kt-menu__item.kt-menu__item--active > .kt-menu__link {
	background: linear-gradient(90deg, rgba(31, 164, 125, 0.22), rgba(31, 164, 125, 0.04)) !important;
	box-shadow: inset 0 0 0 1px rgba(31, 164, 125, 0.28);
	transform: none;
}

.kt-aside-menu .kt-menu__nav .kt-menu__item.kt-menu__item--active > .kt-menu__link::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	bottom: 8px;
	width: 3px;
	border-radius: 0 3px 3px 0;
	background: linear-gradient(180deg, var(--edu-green-lift), var(--edu-green));
	box-shadow: 0 0 12px rgba(37, 192, 150, 0.85);
}

.kt-aside-menu .kt-menu__nav .kt-menu__item.kt-menu__item--active > .kt-menu__link .kt-menu__link-text {
	color: #ffffff !important;
	font-weight: 600 !important;
}

.kt-aside-menu .kt-menu__nav .kt-menu__item.kt-menu__item--active > .kt-menu__link .kt-menu__link-icon {
	color: var(--edu-green-lift) !important;
}

/* Submenus. The demo1 aside skin paints these white with a higher-specificity
   selector than the item rules above, so they get their own explicit override. */
.kt-aside .kt-aside-menu .kt-menu__nav .kt-menu__submenu,
.kt-aside .kt-aside-menu .kt-menu__nav .kt-menu__submenu .kt-menu__subnav,
.kt-aside .kt-aside-menu .kt-menu__nav .kt-menu__item .kt-menu__submenu {
	background: transparent !important;
	box-shadow: none !important;
}

.kt-aside-menu .kt-menu__nav .kt-menu__submenu {
	margin: 2px 0 6px !important;
}

.kt-aside-menu .kt-menu__nav .kt-menu__submenu .kt-menu__subnav {
	padding: 2px 0 2px 14px !important;
	border-left: 1px solid var(--edu-rail-line);
	margin-left: 20px !important;
}

.kt-aside-menu .kt-menu__nav .kt-menu__submenu .kt-menu__item > .kt-menu__link .kt-menu__link-text {
	font-size: 0.9rem !important;
	color: var(--edu-rail-ink-dim) !important;
}

.kt-aside .kt-aside-menu .kt-menu__nav .kt-menu__submenu .kt-menu__item.kt-menu__item--active > .kt-menu__link,
.kt-aside .kt-aside-menu .kt-menu__nav .kt-menu__submenu .kt-menu__item > .kt-menu__link:hover {
	background: rgba(31, 164, 125, 0.16) !important;
	box-shadow: inset 0 0 0 1px rgba(31, 164, 125, 0.24);
}

.kt-aside .kt-aside-menu .kt-menu__nav > .kt-menu__item .kt-menu__submenu .kt-menu__item > .kt-menu__link .kt-menu__link-text {
	color: var(--edu-rail-ink-dim) !important;
}

.kt-aside .kt-aside-menu .kt-menu__nav > .kt-menu__item .kt-menu__submenu .kt-menu__item.kt-menu__item--active > .kt-menu__link .kt-menu__link-text,
.kt-aside .kt-aside-menu .kt-menu__nav > .kt-menu__item .kt-menu__submenu .kt-menu__item > .kt-menu__link:hover .kt-menu__link-text {
	color: #ffffff !important;
}

/* The submenu's active item carries a 4px purple slab and gradient-clipped text
   (transparent fill painting the parent's background). Both have to go, or the
   label renders in Metronic's purple no matter what `color` says. */
.kt-aside .kt-aside-menu .kt-menu__nav .kt-menu__item,
.kt-aside .kt-aside-menu .kt-menu__nav > .kt-menu__item .kt-menu__submenu .kt-menu__item.kt-menu__item--active {
	border-left: 0 !important;
}

.kt-aside .kt-aside-menu .kt-menu__nav .kt-menu__link,
.kt-aside .kt-aside-menu .kt-menu__nav .kt-menu__link .kt-menu__link-text,
.kt-aside .kt-aside-menu .kt-menu__nav .kt-menu__section .kt-menu__section-text {
	-webkit-text-fill-color: currentColor !important;
}

/* The gradient those labels were clipping is on the label itself; unclipped it
   would paint as a solid block, so it goes too. Links keep their background --
   that is the active pill. */
.kt-aside .kt-aside-menu .kt-menu__nav .kt-menu__link .kt-menu__link-text,
.kt-aside .kt-aside-menu .kt-menu__nav .kt-menu__section .kt-menu__section-text {
	background: none !important;
}

.kt-aside .kt-aside-menu .kt-menu__nav > .kt-menu__item .kt-menu__submenu .kt-menu__item.kt-menu__item--active > .kt-menu__link .kt-menu__link-bullet.kt-menu__link-bullet--dot > span {
	background-color: var(--edu-green-lift) !important;
}

.kt-aside-menu .kt-menu__nav .kt-menu__item > .kt-menu__link .kt-menu__link-bullet.kt-menu__link-bullet--dot > span {
	background: var(--edu-rail-ink-dim) !important;
	width: 5px !important;
	height: 5px !important;
}

.kt-aside-menu .kt-menu__nav .kt-menu__item.kt-menu__item--active > .kt-menu__link .kt-menu__link-bullet.kt-menu__link-bullet--dot > span,
.kt-aside-menu .kt-menu__nav .kt-menu__item > .kt-menu__link:hover .kt-menu__link-bullet.kt-menu__link-bullet--dot > span {
	background: var(--edu-green-lift) !important;
	box-shadow: 0 0 8px rgba(37, 192, 150, 0.9);
}

/* The templates paint per-section hover/border colours; keep them, on dark. */
.kt-aside-menu .kt-menu__nav .kt-menu__item > .kt-menu__link.purpleHover:hover .kt-menu__link-icon,
.kt-aside-menu .kt-menu__nav .kt-menu__item > .kt-menu__link .kt-menu__link-icon.icon-purple {
	color: var(--edu-purple-lift) !important;
}

.kt-aside-menu .kt-menu__nav .kt-menu__item > .kt-menu__link.greenHover:hover .kt-menu__link-icon,
.kt-aside-menu .kt-menu__nav .kt-menu__item > .kt-menu__link .kt-menu__link-icon.icon-green {
	color: var(--edu-green-lift) !important;
}

/* Status pills inside the rail need to hold up against the dark surface. */
.kt-aside-menu .kt-menu__link-badge .kt-badge.kt-badge--success {
	background: rgba(37, 192, 150, 0.22) !important;
	color: #6ee7bd !important;
	box-shadow: inset 0 0 0 1px rgba(37, 192, 150, 0.45);
}

.kt-aside-menu .kt-menu__link-badge .kt-badge.kt-badge--danger {
	background: rgba(226, 73, 92, 0.22) !important;
	color: #ff9fac !important;
	box-shadow: inset 0 0 0 1px rgba(226, 73, 92, 0.45);
	opacity: 1 !important;
}

.kt-aside .kt-aside__footer,
.kt-aside .kt-aside__footer.kt-grid__item {
	background: transparent !important;
	border-top: 1px solid var(--edu-rail-line);
}

.kt-aside-close {
	background: rgba(255, 255, 255, 0.08) !important;
	color: #fff !important;
}

/* Minimised rail: the flyout panel is a dark card, not a white one. */
.kt-aside--minimize .kt-aside-menu .kt-menu__nav > .kt-menu__item > .kt-menu__submenu,
.kt-aside--minimize-hover .kt-aside-menu .kt-menu__nav > .kt-menu__item > .kt-menu__submenu {
	background: var(--edu-rail-2) !important;
	border-radius: var(--edu-radius) !important;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45) !important;
	border: 1px solid var(--edu-rail-line);
}

/* The secondary rail on planner screens sits next to the dark one; keep it light
   but give it the same hairline language. */
.kt-aside-secondary {
	background: rgba(255, 255, 255, 0.86) !important;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-right: 1px solid var(--edu-line) !important;
}

/* ==========================================================================
   3. Header -- glass
   ========================================================================== */

.kt-header {
	background: rgba(255, 255, 255, 0.78) !important;
	backdrop-filter: saturate(180%) blur(18px);
	-webkit-backdrop-filter: saturate(180%) blur(18px);
	border-bottom: 1px solid rgba(230, 236, 244, 0.9) !important;
	box-shadow: 0 1px 20px rgba(16, 24, 39, 0.05) !important;
}

/* Without backdrop-filter the header would be a washed translucent strip over
   scrolling content, so those browsers get an opaque one instead. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {

	.kt-header,
	.kt-aside-secondary {
		background: #ffffff !important;
	}

	.kt-login-v2 .kt-login-v2__container {
		background: #ffffff !important;
	}
}

.kt-header .plannerNavTitle {
	color: var(--edu-ink-3);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-right: 12px;
}

/* Metronic's topbar avatar badge is stock purple; make it the brand gradient. */
.kt-header .kt-header__topbar .kt-header__topbar-item.kt-header__topbar-item--user .kt-badge--username,
.kt-badge.kt-badge--username.kt-badge--brand {
	background: linear-gradient(135deg, var(--edu-green-lift), var(--edu-green-deep)) !important;
	color: #fff !important;
	box-shadow: 0 6px 16px rgba(31, 164, 125, 0.35);
	border: 0 !important;
}

.kt-header .kt-header__topbar .kt-header__topbar-item .kt-header__topbar-wrapper {
	border-radius: 12px;
	transition: background-color 0.2s var(--edu-ease);
}

.kt-header .kt-header__topbar .kt-header__topbar-item:hover .kt-header__topbar-wrapper {
	background: rgba(31, 164, 125, 0.07);
}

.kt-header .kt-header__topbar .kt-header__topbar-username {
	color: var(--edu-ink) !important;
	font-weight: 600 !important;
}

.kt-header .kt-header__topbar .kt-header__topbar-welcome {
	color: var(--edu-ink-3) !important;
}

/* The "currently editing" planner pill in the header */
.plannerDropdown > .btn,
.plannerDropdown > .btn:hover,
.plannerDropdown > .btn:focus {
	background: linear-gradient(135deg, var(--edu-purple-lift), var(--edu-purple-deep)) !important;
	border: 0 !important;
	border-radius: 999px !important;
	box-shadow: 0 8px 22px rgba(111, 103, 194, 0.32) !important;
}

.plannerDropdown > .btn:hover {
	transform: translateY(-1px);
}

.kt-header-mobile {
	background: var(--edu-rail) !important;
	border-bottom: 1px solid var(--edu-rail-line);
}

/* ==========================================================================
   4. Subheader -- the page title block
   ========================================================================== */

.kt-subheader {
	padding: 26px 22px 14px !important;
	background: transparent !important;
}

.kt-subheader .kt-subheader__title {
	color: var(--edu-ink) !important;
	font-weight: 700 !important;
	letter-spacing: -0.025em !important;
}

.kt-subheader .kt-subheader__breadcrumbs .kt-subheader__breadcrumbs-link,
.kt-subheader .kt-subheader__breadcrumbs .kt-subheader__breadcrumbs-home > i {
	color: var(--edu-ink-3) !important;
	font-size: 0.78rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: color 0.2s var(--edu-ease);
}

.kt-subheader .kt-subheader__breadcrumbs .kt-subheader__breadcrumbs-link:hover,
.kt-subheader .kt-subheader__breadcrumbs .kt-subheader__breadcrumbs-home:hover > i {
	color: var(--edu-green) !important;
}

.kt-subheader .kt-subheader__breadcrumbs .kt-subheader__breadcrumbs-separator::before {
	background: var(--edu-ink-3) !important;
	opacity: 0.5;
}

/* ==========================================================================
   5. Portlets -- the card system
   ========================================================================== */

.kt-portlet,
.panel {
	background: var(--edu-surface) !important;
	border: 1px solid var(--edu-line) !important;
	border-radius: var(--edu-radius) !important;
	box-shadow: var(--edu-shadow-1) !important;
	overflow: hidden;
	transition: box-shadow 0.35s var(--edu-ease), transform 0.35s var(--edu-ease), border-color 0.35s var(--edu-ease);
}

.kt-portlet:hover,
.panel:hover {
	box-shadow: var(--edu-shadow-2) !important;
	border-color: #dbe4ef !important;
	transform: translateY(-2px);
}

.kt-portlet .kt-portlet__head {
	background: transparent !important;
	border-bottom: 1px solid var(--edu-line-soft) !important;
	padding: 6px 16px !important;
	min-height: 62px !important;
	position: relative;
}

/* The amber title chip is an EDUcal signature -- kept, but tightened: less
   padding, a softer gradient, a legible inner highlight instead of a drop shadow. */
.kt-portlet .kt-portlet__head .kt-portlet__head-label .kt-portlet__head-title {
	background: linear-gradient(135deg, var(--edu-amber-lift) 0%, var(--edu-amber) 55%, var(--edu-amber-deep) 100%) !important;
	color: #3a2a06 !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	letter-spacing: -0.015em !important;
	padding: 7px 14px !important;
	border-radius: var(--edu-radius-sm) !important;
	margin: 12px 10px 12px 0 !important;
	box-shadow: 0 6px 16px rgba(223, 122, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
	text-shadow: none;
}

/* .deleteBG is the templates' way of saying "no chip here" -- honour it. */
.kt-portlet .kt-portlet__head .kt-portlet__head-label .kt-portlet__head-title.deleteBG {
	background: none !important;
	box-shadow: none !important;
	color: var(--edu-ink) !important;
	padding: 0 !important;
	margin: 16px 0 !important;
	font-size: 0.82rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase;
}

/* A stat tile (its title carries .deleteBG, meaning "no chip") reads better as
   one continuous surface than as head-plus-body. */
.kt-portlet .kt-portlet__head:has(.kt-portlet__head-title.deleteBG) {
	border-bottom: 0 !important;
	min-height: 0 !important;
}

/* Deliberately not !important: a few views load their own sheet after this one
   to zero the bottom padding, and that intent should survive. */
.kt-portlet .kt-portlet__body {
	padding: 22px;
}

.kt-portlet .kt-portlet__foot {
	background: #fbfcfe !important;
	border-top: 1px solid var(--edu-line-soft) !important;
}

.kt-portlet .kt-portlet__head-search .fa,
.kt-portlet .kt-portlet__head-search .fas {
	color: var(--edu-ink-3) !important;
	transition: color 0.2s var(--edu-ease), transform 0.2s var(--edu-ease);
}

.kt-portlet .kt-portlet__head-search:hover .fa,
.kt-portlet .kt-portlet__head-search:hover .fas {
	color: var(--edu-green) !important;
	transform: scale(1.1);
}

/* Accent rails. The templates ask for an 8px slab; a 4px gradient rail plus a
   tinted glow reads the same at a glance and far lighter up close. */
.yellowLeftBorder,
.greenLeftBorder,
.purpleLeftBorder,
.greyLeftBorder,
.blueLeftBorder {
	border-left: 0 !important;
	position: relative;
}

.yellowLeftBorder::before,
.greenLeftBorder::before,
.purpleLeftBorder::before,
.greyLeftBorder::before,
.blueLeftBorder::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	z-index: 2;
}

.yellowLeftBorder::before {
	background: linear-gradient(180deg, var(--edu-amber-lift), var(--edu-amber-deep));
}

.greenLeftBorder::before {
	background: linear-gradient(180deg, var(--edu-green-lift), var(--edu-green-deep));
}

.purpleLeftBorder::before {
	background: linear-gradient(180deg, var(--edu-purple-lift), var(--edu-purple-deep));
}

.greyLeftBorder::before {
	background: linear-gradient(180deg, #8a97ac, #55637a);
}

.blueLeftBorder::before {
	background: linear-gradient(180deg, #56a8ff, #2263d6);
}

/* A whisper of the accent colour bleeding in from the rail. The stop is in pixels,
   not a percentage: these classes also land on full-width table cards, where 40%
   of the card would wash a whole datatable in yellow. */
.yellowLeftBorder {
	background-image: linear-gradient(100deg, rgba(250, 170, 47, 0.10), rgba(250, 170, 47, 0) 260px) !important;
}

.greenLeftBorder {
	background-image: linear-gradient(100deg, rgba(31, 164, 125, 0.10), rgba(31, 164, 125, 0) 260px) !important;
}

.purpleLeftBorder {
	background-image: linear-gradient(100deg, rgba(111, 103, 194, 0.10), rgba(111, 103, 194, 0) 260px) !important;
}

.greyLeftBorder {
	background-image: linear-gradient(100deg, rgba(85, 99, 122, 0.08), rgba(85, 99, 122, 0) 260px) !important;
}

/* Stat figures: tabular, tight, gradient-filled in their accent colour. */
.totalUserNum {
	font-size: 2.9rem !important;
	font-weight: 700 !important;
	letter-spacing: -0.045em !important;
	line-height: 1.05 !important;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.totalUserNum.greenText {
	background: linear-gradient(135deg, var(--edu-green-lift), var(--edu-green-deep));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.totalUserNum.yellowText {
	background: linear-gradient(135deg, var(--edu-amber-lift), var(--edu-amber-deep));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.totalUserNum.purpleText {
	background: linear-gradient(135deg, var(--edu-purple-lift), var(--edu-purple-deep));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.totalUserNum .smallText {
	font-size: 0.8rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em !important;
	color: var(--edu-ink-2) !important;
	-webkit-text-fill-color: var(--edu-ink-2);
	display: inline-block;
	vertical-align: middle;
}

/* ==========================================================================
   6. Buttons
   Metronic's brand is a blue-purple; EDUcal's is green. Remap rather than ask
   every template to change class.
   ========================================================================== */

.btn {
	border-radius: 999px !important;
	font-weight: 600 !important;
	letter-spacing: 0.005em;
	transition: transform 0.2s var(--edu-ease), box-shadow 0.25s var(--edu-ease), background-color 0.2s var(--edu-ease), color 0.2s var(--edu-ease), border-color 0.2s var(--edu-ease);
}

.btn:active {
	transform: translateY(1px);
}

.btn.btn-brand,
.btn.btn-primary,
.btn.btn-success {
	background: linear-gradient(135deg, var(--edu-green-lift) 0%, var(--edu-green) 55%, var(--edu-green-deep) 100%) !important;
	border: 0 !important;
	color: #fff !important;
	box-shadow: 0 6px 18px rgba(31, 164, 125, 0.28) !important;
}

.btn.btn-brand:hover,
.btn.btn-primary:hover,
.btn.btn-success:hover,
.btn.btn-brand:focus,
.btn.btn-primary:focus,
.btn.btn-success:focus {
	box-shadow: 0 10px 26px rgba(31, 164, 125, 0.40) !important;
	transform: translateY(-1px);
	color: #fff !important;
}

.btn.btn-warning {
	background: linear-gradient(135deg, var(--edu-amber-lift), var(--edu-amber-deep)) !important;
	border: 0 !important;
	color: #3a2a06 !important;
	box-shadow: 0 6px 18px rgba(223, 122, 0, 0.26) !important;
}

.btn.btn-warning:hover {
	box-shadow: 0 10px 26px rgba(223, 122, 0, 0.36) !important;
	transform: translateY(-1px);
}

.btn.btn-danger {
	background: linear-gradient(135deg, var(--edu-red), var(--edu-red-deep)) !important;
	border: 0 !important;
	color: #fff !important;
	box-shadow: 0 6px 18px rgba(226, 73, 92, 0.26) !important;
}

.btn.btn-danger:hover {
	box-shadow: 0 10px 26px rgba(226, 73, 92, 0.36) !important;
	transform: translateY(-1px);
}

.btn.btn-info,
.btn.btn-secondary {
	background: linear-gradient(135deg, var(--edu-purple-lift), var(--edu-purple-deep)) !important;
	border: 0 !important;
	color: #fff !important;
	box-shadow: 0 6px 18px rgba(111, 103, 194, 0.26) !important;
}

.btn.btn-info:hover,
.btn.btn-secondary:hover {
	box-shadow: 0 10px 26px rgba(111, 103, 194, 0.36) !important;
	transform: translateY(-1px);
}

.btn.btn-default,
.btn.btn-light,
.btn.btn-outline-secondary {
	background: #ffffff !important;
	border: 1px solid var(--edu-line) !important;
	color: var(--edu-ink-2) !important;
	box-shadow: 0 1px 2px rgba(16, 24, 39, 0.04) !important;
}

.btn.btn-default:hover,
.btn.btn-light:hover,
.btn.btn-outline-secondary:hover {
	background: #ffffff !important;
	border-color: var(--edu-green) !important;
	color: var(--edu-green) !important;
	box-shadow: 0 6px 18px rgba(31, 164, 125, 0.14) !important;
	transform: translateY(-1px);
}

/* The app's own colour buttons keep their gradients; they just join the new
   depth-and-lift language so they do not read as flat next to the rest. */
.btn.btn-purple {
	border: 0 !important;
	box-shadow: 0 6px 18px rgba(111, 103, 194, 0.28) !important;
}

.btn.btn-purple:hover {
	box-shadow: 0 10px 26px rgba(111, 103, 194, 0.38) !important;
	transform: translateY(-1px);
}

.btn.btn-yellow {
	border: 0 !important;
	box-shadow: 0 6px 18px rgba(223, 122, 0, 0.26) !important;
}

.btn.btn-yellow:hover {
	box-shadow: 0 10px 26px rgba(223, 122, 0, 0.36) !important;
	transform: translateY(-1px);
}

.btn.btn-label-brand {
	background: rgba(31, 164, 125, 0.12) !important;
	color: var(--edu-green-deep) !important;
	border: 0 !important;
}

.btn.btn-label-brand:hover {
	background: var(--edu-green) !important;
	color: #fff !important;
}

.btn:focus-visible,
a:focus-visible,
.form-control:focus-visible {
	outline: 2px solid var(--edu-green);
	outline-offset: 2px;
}

/* ==========================================================================
   7. Forms
   ========================================================================== */

.form-control,
.custom-select,
select.form-control {
	border-radius: var(--edu-radius-sm) !important;
	border: 1px solid var(--edu-line) !important;
	background-color: #fbfcfe !important;
	color: var(--edu-ink) !important;
	transition: border-color 0.2s var(--edu-ease), box-shadow 0.2s var(--edu-ease), background-color 0.2s var(--edu-ease);
}

.form-control:hover {
	border-color: #d5dfec !important;
}

.form-control:focus,
.custom-select:focus {
	background-color: #ffffff !important;
	border-color: var(--edu-green) !important;
	box-shadow: 0 0 0 4px rgba(31, 164, 125, 0.14) !important;
}

.form-control::placeholder {
	color: var(--edu-ink-3) !important;
}

/* Deliberately not uppercased. Plenty of templates use a <label> for a radio or
   checkbox option ("Auto", "Manual"), and micro-caps there reads as shouting.
   The uppercase treatment is reserved for things that are always headings:
   table columns, breadcrumbs, section titles, stat-tile labels. */
.kt-form label,
.form-group > label {
	color: var(--edu-ink-2) !important;
	font-weight: 600 !important;
	margin-bottom: 6px;
}

/* Native controls the templates use directly, rather than Metronic's wrappers. */
input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
	accent-color: var(--edu-green);
}

.input-group-text {
	border-radius: var(--edu-radius-sm) !important;
	border-color: var(--edu-line) !important;
	background: #f3f6fb !important;
	color: var(--edu-ink-2) !important;
}

/* bootstrap-select renders a button, not a select */
.bootstrap-select > .dropdown-toggle,
.bootstrap-select > .btn.dropdown-toggle {
	border-radius: var(--edu-radius-sm) !important;
	border: 1px solid var(--edu-line) !important;
	background: #fbfcfe !important;
	color: var(--edu-ink) !important;
	box-shadow: none !important;
}

/* ==========================================================================
   8. Tables
   ========================================================================== */

.table {
	color: var(--edu-ink);
}

.table thead th {
	border-top: 0 !important;
	border-bottom: 1px solid var(--edu-line) !important;
	color: var(--edu-ink-3) !important;
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase;
	padding-top: 12px !important;
	padding-bottom: 12px !important;
	white-space: nowrap;
}

.table tbody td {
	border-top: 1px solid var(--edu-line-soft) !important;
	padding-top: 14px !important;
	padding-bottom: 14px !important;
	vertical-align: middle !important;
}

.table.table-striped tbody tr:nth-of-type(odd) {
	background: transparent !important;
}

/* DataTables ships .table-bordered; keep the grid but as hairlines. */
.table.table-bordered,
.table.table-bordered th,
.table.table-bordered td {
	border-color: var(--edu-line-soft) !important;
}

.table tbody tr {
	transition: background-color 0.15s var(--edu-ease);
}

.table:not(.table-borderless) tbody tr:hover {
	background: rgba(31, 164, 125, 0.05) !important;
}

.table-hover tbody tr:hover {
	background: rgba(31, 164, 125, 0.06) !important;
}

/* DataTables chrome */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
	border-radius: var(--edu-radius-sm) !important;
	border: 1px solid var(--edu-line) !important;
	padding: 6px 12px !important;
}

.page-link {
	border: 1px solid var(--edu-line) !important;
	color: var(--edu-ink-2) !important;
	border-radius: 8px !important;
	margin: 0 2px;
}

.page-item.active .page-link {
	background: var(--edu-green) !important;
	border-color: var(--edu-green) !important;
	color: #fff !important;
	box-shadow: 0 4px 12px rgba(31, 164, 125, 0.3);
}

/* ==========================================================================
   9. Badges, alerts, progress, tabs
   ========================================================================== */

.kt-badge.kt-badge--inline,
.kt-badge.kt-badge--brand,
.kt-badge.kt-badge--success,
.kt-badge.kt-badge--warning,
.kt-badge.kt-badge--danger,
.kt-badge.kt-badge--info {
	border-radius: 999px !important;
	font-weight: 600 !important;
	font-size: 0.72rem !important;
	letter-spacing: 0.02em;
	padding: 4px 12px !important;
	border: 0 !important;
	/* .kt-badge is a 6px flex dot by default; --inline widens it but keeps the
	   height, and outside a table cell the flex box stretches to full width. */
	display: inline-flex !important;
	height: auto !important;
	width: auto !important;
	min-height: 0 !important;
	line-height: 1.5 !important;
}

.kt-badge.kt-badge--brand:not(.kt-badge--username),
.kt-badge.kt-badge--success {
	background: rgba(31, 164, 125, 0.14) !important;
	color: var(--edu-green-deep) !important;
}

.kt-badge.kt-badge--warning {
	background: rgba(250, 170, 47, 0.20) !important;
	color: #8a5300 !important;
}

.kt-badge.kt-badge--danger {
	background: rgba(226, 73, 92, 0.15) !important;
	color: var(--edu-red-deep) !important;
}

.kt-badge.kt-badge--info {
	background: rgba(111, 103, 194, 0.15) !important;
	color: var(--edu-purple-deep) !important;
}

.alert {
	border: 1px solid transparent !important;
	border-radius: var(--edu-radius-sm) !important;
	box-shadow: none !important;
	font-weight: 500;
}

.alert.alert-success {
	background: rgba(31, 164, 125, 0.10) !important;
	border-color: rgba(31, 164, 125, 0.28) !important;
	color: var(--edu-green-deep) !important;
}

.alert.alert-warning {
	background: rgba(250, 170, 47, 0.14) !important;
	border-color: rgba(223, 122, 0, 0.3) !important;
	color: #8a5300 !important;
}

.alert.alert-danger {
	background: rgba(226, 73, 92, 0.10) !important;
	border-color: rgba(226, 73, 92, 0.28) !important;
	color: var(--edu-red-deep) !important;
}

.alert.alert-info {
	background: rgba(111, 103, 194, 0.10) !important;
	border-color: rgba(111, 103, 194, 0.28) !important;
	color: var(--edu-purple-deep) !important;
}

.progress {
	background: #eaeff6 !important;
	border-radius: 999px !important;
	overflow: hidden;
}

.progress-bar {
	background: linear-gradient(90deg, var(--edu-green-lift), var(--edu-green)) !important;
	border-radius: 999px;
}

.nav-tabs {
	border-bottom: 1px solid var(--edu-line) !important;
}

.nav-tabs .nav-link {
	border: 0 !important;
	color: var(--edu-ink-3) !important;
	font-weight: 600 !important;
	padding: 10px 4px !important;
	margin-right: 24px !important;
	position: relative;
	background: transparent !important;
}

.nav-tabs .nav-link:hover {
	color: var(--edu-ink) !important;
}

.nav-tabs .nav-link.active {
	color: var(--edu-green-deep) !important;
}

.nav-tabs .nav-link.active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--edu-green-lift), var(--edu-green-deep));
}

.nav-pills .nav-item .nav-link.active,
.nav-pills .nav-item .nav-link.current {
	background: linear-gradient(135deg, var(--edu-amber-lift), var(--edu-amber-deep)) !important;
	color: #3a2a06 !important;
	border-radius: 999px !important;
}

/* ==========================================================================
   10. Overlays -- dropdowns, modals, tooltips, toasts
   ========================================================================== */

.dropdown-menu {
	border: 1px solid var(--edu-line) !important;
	border-radius: var(--edu-radius) !important;
	box-shadow: 0 18px 50px rgba(16, 24, 39, 0.16) !important;
	padding: 8px !important;
}

.dropdown-menu .dropdown-item {
	border-radius: 8px !important;
	padding: 8px 12px !important;
	font-weight: 500;
	color: var(--edu-ink-2) !important;
	transition: background-color 0.15s var(--edu-ease), color 0.15s var(--edu-ease);
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
	background: rgba(31, 164, 125, 0.10) !important;
	color: var(--edu-green-deep) !important;
}

.modal .modal-content {
	border: 0 !important;
	border-radius: var(--edu-radius) !important;
	box-shadow: 0 30px 80px rgba(16, 24, 39, 0.30) !important;
	overflow: hidden;
}

.modal .modal-content .modal-header {
	border-bottom: 1px solid var(--edu-line-soft) !important;
	background: #fbfcfe !important;
	padding: 18px 22px !important;
}

.modal .modal-content .modal-footer {
	border-top: 1px solid var(--edu-line-soft) !important;
	background: #fbfcfe !important;
}

.modal-backdrop.show {
	opacity: 0.5;
	background: #0b1220;
}

/* educal-custom-styles.css sets .tooltip-inner's colour to #333 for the light
   tooltip it used to be. This file then painted the background near-black and
   left the text alone, so every tooltip in the app was dark grey on black. The
   colour has to move with the background, and it needs !important to beat that
   earlier rule. The arrow is a border colour, so it has to be told separately or
   it keeps pointing at the old background. */
.tooltip .tooltip-inner {
	background: var(--edu-rail) !important;
	color: #ffffff !important;
	border-radius: 8px !important;
	padding: 7px 11px !important;
	font-weight: 500;
	font-size: 12.5px;
	line-height: 1.45;
	max-width: 260px;
	box-shadow: 0 6px 20px rgba(16, 24, 39, 0.28);
}

.tooltip.show {
	opacity: 1 !important;
}

.tooltip .arrow::before {
	border-top-color: var(--edu-rail) !important;
	border-bottom-color: var(--edu-rail) !important;
	border-left-color: var(--edu-rail) !important;
	border-right-color: var(--edu-rail) !important;
}

/* Metronic's own light-skinned tooltips opt out of the dark treatment rather
   than inheriting white-on-white. */
.tooltip.tooltip-light .tooltip-inner,
.tooltip[data-skin="light"] .tooltip-inner {
	background: #ffffff !important;
	color: var(--edu-ink) !important;
	box-shadow: 0 2px 6px rgba(16, 24, 39, 0.10), 0 14px 34px rgba(16, 24, 39, 0.16);
}

.tooltip.tooltip-light .arrow::before,
.tooltip[data-skin="light"] .arrow::before {
	border-top-color: #ffffff !important;
	border-bottom-color: #ffffff !important;
	border-left-color: #ffffff !important;
	border-right-color: #ffffff !important;
}

#toast-container > div {
	border-radius: var(--edu-radius-sm) !important;
	box-shadow: 0 18px 50px rgba(16, 24, 39, 0.24) !important;
	opacity: 1 !important;
}

#toast-container > .toast-success {
	background-color: var(--edu-green) !important;
}

#toast-container > .toast-warning {
	background-color: var(--edu-amber-deep) !important;
}

#toast-container > .toast-error {
	background-color: var(--edu-red-deep) !important;
}

/* ==========================================================================
   11. Footer, scroll-to-top
   ========================================================================== */

.kt-footer {
	background: transparent !important;
	border-top: 1px solid var(--edu-line) !important;
}

.kt-footer .kt-footer__copyright {
	color: var(--edu-ink-3) !important;
	font-size: 0.8rem !important;
	letter-spacing: 0.04em;
}

.kt-scrolltop {
	background: rgba(16, 24, 39, 0.88) !important;
	backdrop-filter: blur(8px);
	border-radius: 999px !important;
	box-shadow: 0 10px 30px rgba(16, 24, 39, 0.3) !important;
}

.kt-scrolltop > i {
	color: #fff !important;
}

.kt-scrolltop:hover {
	background: var(--edu-green) !important;
}

/* ==========================================================================
   12. Login / register -- the public face
   ========================================================================== */

/* The sign-in screen is the one place with no data to get in the way, so it
   carries the system's darkest surface: brand glows over the rail colour, with
   the card as the single lit object. */
.kt-login-v2 {
	background:
		radial-gradient(1200px 700px at 84% 4%, rgba(31, 164, 125, 0.30), transparent 62%),
		radial-gradient(1000px 640px at 4% 98%, rgba(111, 103, 194, 0.30), transparent 60%),
		radial-gradient(820px 480px at 52% -12%, rgba(250, 170, 47, 0.18), transparent 62%),
		linear-gradient(160deg, #131c2c 0%, var(--edu-rail-2) 55%, #070c15 100%) !important;
	position: relative;
	overflow: hidden;
}

.kt-login-v2::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
	background-size: 54px 54px, 54px 54px;
	-webkit-mask-image: radial-gradient(circle at 50% 38%, #000 0%, transparent 76%);
	mask-image: radial-gradient(circle at 50% 38%, #000 0%, transparent 76%);
}

/* The EDUcal wordmark is dark artwork, so it gets the same white chip the rail
   gives it rather than being inverted into something that is not the logo. */
.kt-login-v2 .kt-login-v2__logo {
	background: #ffffff;
	border-radius: 14px;
	padding: 10px 16px;
	display: inline-block;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.kt-login-v2 .kt-login-v2__head .kt-login-v2__desc {
	color: rgba(255, 255, 255, 0.72) !important;
}

.kt-login-v2 .kt-login-v2__head .kt-link,
.kt-login-v2 .kt-login-v2__head .greenLink {
	color: var(--edu-green-lift) !important;
}

.kt-login-v2 .kt-login-v2__footer .kt-link {
	color: rgba(255, 255, 255, 0.45) !important;
}

.kt-login-v2 > * {
	position: relative;
	z-index: 1;
}

.kt-login-v2 .kt-login-v2__container {
	background: rgba(255, 255, 255, 0.97) !important;
	backdrop-filter: saturate(140%) blur(10px);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	position: relative;
	border: 1px solid rgba(255, 255, 255, 0.55) !important;
	border-radius: 20px !important;
	box-shadow:
		0 40px 90px rgba(0, 0, 0, 0.45),
		0 0 0 1px rgba(255, 255, 255, 0.06),
		inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
	padding: 34px 34px 30px !important;
}

/* A brand hairline across the top edge, the same device the cards use. */
.kt-login-v2 .kt-login-v2__container::before {
	content: "";
	position: absolute;
	top: 0;
	left: 22px;
	right: 22px;
	height: 2px;
	border-radius: 0 0 2px 2px;
	background: linear-gradient(90deg, var(--edu-green), var(--edu-amber) 50%, var(--edu-purple));
	opacity: 0.9;
}

.kt-login-v2 .kt-login-v2__title h3 {
	font-weight: 700 !important;
	font-size: 1.6rem !important;
	letter-spacing: -0.035em !important;
	color: var(--edu-ink) !important;
}

.kt-login-v2 .kt-login-v2__desc {
	color: var(--edu-ink-2) !important;
	font-size: 0.95rem !important;
	font-weight: 500 !important;
}

.kt-login-v2 .kt-login-v2__signup .kt-login-v2__desc {
	font-size: 1rem !important;
}

.kt-login-v2 .kt-link,
.greenLink {
	color: var(--edu-green) !important;
	font-weight: 600;
	transition: color 0.2s var(--edu-ease);
}

.kt-login-v2 .kt-link:hover,
.greenLink:hover {
	color: var(--edu-green-deep) !important;
}

.kt-login-v2 .kt-login-v2__options .btn {
	background: #ffffff !important;
	border: 1px solid var(--edu-line) !important;
	border-radius: var(--edu-radius-sm) !important;
	padding: 4px 10px !important;
	box-shadow: 0 2px 8px rgba(16, 24, 39, 0.05) !important;
}

.kt-login-v2 .kt-login-v2__options .btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(16, 24, 39, 0.12) !important;
	border-color: #d5dfec !important;
}

.kt-login-v2 .kt-login-v2__form .form-control {
	background: rgba(255, 255, 255, 0.85) !important;
	padding: 12px 16px !important;
	height: auto !important;
}

.kt-login-v2 .kt-login-v2__image img {
	filter: drop-shadow(0 24px 48px rgba(223, 122, 0, 0.22));
	animation: edu-float 9s ease-in-out infinite;
}

@keyframes edu-float {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-12px);
	}
}

.kt-login-v2 .kt-login-v2__footer .kt-link {
	color: var(--edu-ink-3) !important;
	font-weight: 500;
}

.kt-separator--border-solid {
	border-color: var(--edu-line) !important;
}

/* ==========================================================================
   13. The controls these views actually use
   Checkboxes, switches, sections and nav lists appear across dozens of
   templates in Metronic's stock blue-purple; they get the brand instead.
   ========================================================================== */

.kt-checkbox > span {
	border: 1.5px solid #cfd8e6 !important;
	border-radius: 5px !important;
	transition: background-color 0.15s var(--edu-ease), border-color 0.15s var(--edu-ease), box-shadow 0.15s var(--edu-ease);
}

.kt-checkbox:hover > span {
	border-color: var(--edu-green) !important;
}

.kt-checkbox > input:checked ~ span {
	background: var(--edu-green) !important;
	border-color: var(--edu-green) !important;
	box-shadow: 0 2px 8px rgba(31, 164, 125, 0.32);
}

.kt-checkbox > input:checked ~ span::after {
	border-color: #ffffff !important;
}

.kt-checkbox.kt-checkbox--warning > input:checked ~ span {
	background: var(--edu-amber-deep) !important;
	border-color: var(--edu-amber-deep) !important;
	box-shadow: 0 2px 8px rgba(223, 122, 0, 0.32);
}

.kt-radio > span {
	border: 1.5px solid #cfd8e6 !important;
}

.kt-radio > input:checked ~ span {
	border-color: var(--edu-green) !important;
}

.kt-radio > input:checked ~ span::after {
	background: var(--edu-green) !important;
}

.kt-switch input:checked ~ span::before {
	background-color: var(--edu-green) !important;
	box-shadow: 0 2px 10px rgba(31, 164, 125, 0.35);
}

.kt-switch.kt-switch--outline input:checked ~ span::after {
	background-color: var(--edu-green) !important;
}

.kt-section .kt-section__title {
	color: var(--edu-ink) !important;
	font-weight: 700 !important;
	font-size: 0.82rem !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase;
}

.kt-section .kt-section__content--border {
	border: 1px solid var(--edu-line) !important;
	border-radius: var(--edu-radius-sm) !important;
	background: #fbfcfe;
}

.kt-separator {
	background: var(--edu-line) !important;
	border-color: var(--edu-line) !important;
}

.kt-nav .kt-nav__item .kt-nav__link {
	border-radius: 8px !important;
	transition: background-color 0.15s var(--edu-ease);
}

.kt-nav .kt-nav__item .kt-nav__link:hover,
.kt-nav .kt-nav__item.kt-nav__item--active .kt-nav__link {
	background: rgba(31, 164, 125, 0.10) !important;
}

.kt-nav .kt-nav__item .kt-nav__link:hover .kt-nav__link-text,
.kt-nav .kt-nav__item .kt-nav__link:hover .kt-nav__link-icon > i {
	color: var(--edu-green-deep) !important;
}

/* The header's user card sits behind the avatar dropdown; it ships a hard-coded
   indigo background in the template, which the brand gradient replaces. */
.kt-user-card {
	background: linear-gradient(135deg, var(--edu-green-deep), var(--edu-rail)) !important;
}

/* DataTables sort affordances */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
	cursor: pointer;
}

table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
	color: var(--edu-green-deep) !important;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
	color: var(--edu-ink-2) !important;
	font-size: 0.85rem;
}

/* ==========================================================================
   14. Print
   Reports get printed. Ink-heavy surfaces and chrome come off the page.
   ========================================================================== */

@media print {

	body {
		background: #ffffff !important;
	}

	.kt-aside,
	.kt-aside-secondary,
	.kt-header,
	.kt-header-mobile,
	.kt-footer,
	.kt-scrolltop,
	.kt-subheader__toolbar {
		display: none !important;
	}

	.kt-wrapper {
		padding-left: 0 !important;
	}

	.kt-portlet,
	.panel {
		box-shadow: none !important;
		border: 1px solid #d8dfe9 !important;
		break-inside: avoid;
	}

	.kt-portlet .kt-portlet__head .kt-portlet__head-label .kt-portlet__head-title {
		background: none !important;
		box-shadow: none !important;
		color: #000 !important;
		padding: 0 !important;
	}
}

/* ==========================================================================
   15. Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	.kt-portlet:hover,
	.panel:hover,
	.btn:hover {
		transform: none !important;
	}
}