a {
	color: #1e77c5;
}

.nav-sidebar > .nav-item .nav-icon.fa, .nav-sidebar > .nav-item .nav-icon.fab, .nav-sidebar > .nav-item .nav-icon.far, .nav-sidebar > .nav-item .nav-icon.fas, .nav-sidebar > .nav-item .nav-icon.glyphicon, .nav-sidebar > .nav-item .nav-icon.ion {
	font-size: 1rem;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active, .sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active {
	background-color: #1e77c5;
}

.layout-navbar-fixed .wrapper .sidebar-dark-primary .brand-link:not([class*="navbar"]) {
	background-color: #030a10 !important;
	transition: opacity .4s linear;
}

.main-sidebar {
	background-color: #030a10 !important;
}

.brand-link .brand-image {
	max-width: 100%;
	max-height: 40px;
	margin: 0;
	transition: all .4s;
}

.brand-link {
	height: 57px;
	padding: 10px;
}

.ion-bag::before {
	content: "\f110";
}

.layout-navbar-fixed .wrapper .main-sidebar:hover .brand-link {
	transition: all .4s;
}

.sidebar-mini.layout-fixed .logo_lg {
	display: block;
	transition: all .4s;
}

.sidebar-mini.layout-fixed .logo_mini {
	display: none;
}

.sidebar-mini.layout-fixed.sidebar-collapse .logo_mini {
	display: block;
	max-width: 100%;
	max-height: 50px;
	margin: 0px 0 0 5px;
}

	.sidebar-mini.layout-fixed.sidebar-collapse .logo_mini img {
		max-height: 40px;
	}

.sidebar-mini.layout-fixed.sidebar-collapse .logo_lg {
	display: none;
	transition: all .4s;
}

.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .logo_mini, .sidebar-mini.sidebar-collapse .main-sidebar:hover .logo_mini {
	display: none;
}

.sidebar-mini.layout-fixed.sidebar-collapse .user_name_left {
	display: none;
}

.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .user_name_left, .sidebar-mini.sidebar-collapse .main-sidebar:hover .user_name_left {
	display: block;
}

.main-footer {
	font-size: 14px;
}

.font14 {
	font-size: 14px;
}

.table td, .table th {
	padding: 10px;
	font-size: 14px;
}

.table th {
	background: #eef2f7;
	color: #0F172A;
}

/*Login*/
.login_logo {
	max-width: 100%;
	max-height: 120px;
}

.login_page_bg {
	background: #aed7fb;
}

.login-page, .register-page {
	height: 100vh;
	display: table;
	width: 500px;
	margin: auto;
	padding: 15px 0;
}

.login-box, .register-box {
	display: table-cell;
	margin: auto;
	vertical-align: middle !important;
}

.login-box-body, .register-box-body {
	padding: 50px;
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
	border-top: 0;
	color: #333;
	margin: 20px;
	box-shadow: 0 12px 34px 0 rgba(57,67,87,0.1) !important;
}

	.login-box-body .form-control {
		background: #fff;
		height: 40px;
		border-radius: 20px !important;
		font-size: 16px;
		padding: 5px 12px 5px 42px;
		border: solid 1px #e2e2e2;
	}

	.login-box-body .user_icon {
		position: absolute;
		top: 12px;
		left: 34px;
		z-index: 9;
		color: #b3b3b3;
	}

	.login-box-body .show_pass {
		position: absolute;
		top: 12px;
		right: 34px;
		z-index: 9;
		color: #b3b3b3;
	}

.btn_login {
	border: none;
	border-radius: 20px;
	height: 40px;
	line-height: 36px;
	padding: 0;
	font-size: 16px;
	box-shadow: 0px 2px 7px 0px #848484;
	color: #fff;
	cursor: pointer;
	text-align: center;
	text-transform: uppercase;
	background-size: 180% 100%;
	moz-transition: all .4s ease-in-out;
	-o-transition: all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}

	.btn_login:hover {
		background-position: 100% 0;
		moz-transition: all .4s ease-in-out;
		-o-transition: all .4s ease-in-out;
		-webkit-transition: all .4s ease-in-out;
		transition: all .4s ease-in-out;
	}

	.btn_login:focus {
		outline: none;
	}

	.btn_login.color_hover {
		background-image: linear-gradient(to right, #0e3a5e, #2475a0, #41c2f6, #18547b);
	}

.login-box .copyright_text {
	font-size: 13px;
	color: #103f64;
}

/* date picker */
.btn-width-100 {
	min-width: 100px;
}

.datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled:hover {
	background: #2682f9;
	background-image: -moz-linear-gradient(top, #2682f9, #2682f9);
	background-image: -ms-linear-gradient(top, #2682f9, #2682f9);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#2682f9), to(#2682f9));
	background-image: -webkit-linear-gradient(top, #2682f9, #2682f9);
	background-image: -o-linear-gradient(top, #2682f9, #2682f9);
	background-image: linear-gradient(top, #2682f9, #2682f9);
	background-repeat: repeat-x;
	border-color: #2682f9 #2682f9 #2682f9;
	color: #fff;
}

.defaultKeypad:disabled, .defaultKeypad[readonly] {
	background: #fff;
}

.keypad-popup {
	width: 200px !important;
	padding: 9px;
	border: 1px solid #ced4da;
}

.keypad-key, .keypad-special {
	border: 1px solid #ccc;
	font-size: 16px;
}

.keypad-popup, .keypad-inline, .keypad-key, .keypad-special {
	font-family: inherit;
	;
	font-size: 18px;
}

.keypad-close {
	font-size: .75rem;
	line-height: 1.9;
	background-color: #f44336;
	border-radius: 0;
	position: relative;
	top: -2px;
}

.keypad-clear {
	font-size: .75rem;
	line-height: 1.9;
	background-color: #00b74a;
	border-radius: 0;
	position: relative;
	top: -2px;
}

.keypad-back {
	font-size: .75rem;
	line-height: 1.9;
	background-color: #1e77c5;
	border-radius: 0;
	position: relative;
	top: -2px;
}

#indoor td:last-child, #PatientList td:last-child, #receipt_bill td:last-child {
	white-space: nowrap !important;
	text-align: center;
}


/*25 May 2022*/
.add_row_table {
	margin-bottom: 20px;
}
	.add_row_table td .form-control {
	min-width:120px;
	}

	.add_row_table tr, .add_row_table tr {
		display: flex;
	}
	.add_row_table th, .add_row_table td {
		padding: 8px 6px;
	}

	.add_row_table th, .add_row_table td {
		width: 18.5%;
		min-width: 120px;
		white-space: nowrap;
	}

		.add_row_table th:last-child, .add_row_table td:last-child {
			width: 5%;
			min-width: 60px;
		}

table.add_row_table {
	border-collapse: collapse;
	width: 100%;
	table-layout: fixed;
}

	table.add_row_table thead tr {
		/*display: block;*/
		position: relative;
	}

	table.add_row_table tbody {
		/*display: block;*/
		max-height: 275px;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
	}

/* Works on Firefox */
* {
	scrollbar-width: thin;
	scrollbar-color: #1e77c5 #c5c5c5;
}

	/* Works on Chrome, Edge, and Safari */
	*::-webkit-scrollbar {
		width: 5px;
	}

	*::-webkit-scrollbar-track {
		background: #c5c5c5;
	}

	*::-webkit-scrollbar-thumb {
		background-color: #1e77c5;
		border-radius: 10px;
	}

/*Calendar 9 Apr 2024*/
.popper,
.tooltip {
	position: absolute;
	z-index: 9999;
	background: #fff;
	color: black;
	max-width: 280px;
	width: 100%;
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.2);
	padding: 0;
	text-align: center;
	opacity: 1;
}

.tooltip-inner {
	background-color: transparent;
	max-width: 260px;
	padding: 0;
	color: inherit;
	text-align: center;
	border-radius: 0;
}

.style5 .tooltip {
	background: #1E252B;
	color: #FFFFFF;
	max-width: 200px;
	width: auto;
	font-size: .8rem;
	padding: .5em 1em;
}

.popper .popper__arrow,
.tooltip .tooltip-arrow {
	width: 0;
	height: 0;
	border-style: solid;
	position: absolute;
	margin: 5px;
}

.tooltip .tooltip-arrow,
.popper .popper__arrow {
	border-color: #174368;
}

.style5 .tooltip .tooltip-arrow {
	border-color: #1E252B;
}

.popper[x-placement^="top"],
.tooltip[x-placement^="top"] {
	margin-bottom: 5px;
}

	.popper[x-placement^="top"] .popper__arrow,
	.tooltip[x-placement^="top"] .tooltip-arrow {
		border-width: 10px 10px 0 10px;
		border-left-color: transparent;
		border-right-color: transparent;
		border-bottom-color: transparent;
		bottom: -10px;
		left: calc(50% - 10px);
		margin-top: 0;
		margin-bottom: 0;
	}

.popper[x-placement^="bottom"],
.tooltip[x-placement^="bottom"] {
	margin-top: 5px;
}

	.tooltip[x-placement^="bottom"] .tooltip-arrow,
	.popper[x-placement^="bottom"] .popper__arrow {
		border-width: 0 10px 10px 10px;
		border-left-color: transparent;
		border-right-color: transparent;
		border-top-color: transparent;
		top: -9px;
		left: calc(50% - 10px);
		margin-top: 0;
		margin-bottom: 0;
	}

.tooltip[x-placement^="right"],
.popper[x-placement^="right"] {
	margin-left: 5px;
}

	.popper[x-placement^="right"] .popper__arrow,
	.tooltip[x-placement^="right"] .tooltip-arrow {
		border-width: 5px 5px 5px 0;
		border-left-color: transparent;
		border-top-color: transparent;
		border-bottom-color: transparent;
		left: -5px;
		top: calc(50% - 5px);
		margin-left: 0;
		margin-right: 0;
	}

.popper[x-placement^="left"],
.tooltip[x-placement^="left"] {
	margin-right: 5px;
}

	.popper[x-placement^="left"] .popper__arrow,
	.tooltip[x-placement^="left"] .tooltip-arrow {
		border-width: 5px 0 5px 5px;
		border-top-color: transparent;
		border-right-color: transparent;
		border-bottom-color: transparent;
		right: -5px;
		top: calc(50% - 5px);
		margin-left: 0;
		margin-right: 0;
	}

.fc-event, .fc-event-dot {
	background-color: transparent;
	border: 0;
	text-align: center;
	font-size: 80px;
	font-weight: 600;
}

.fc-event-container {
	position: relative;
}

tr:first-child > td > .fc-day-grid-event {
	margin-top: 2px;
}
/*END*/
.appointment_table_fc {
	width: 280px;
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 0px;
}

	.appointment_table_fc thead tr th,
	.appointment_table_fc tbody tr td {
		padding: 3px 5px;
		font-size: 12px;
	}

	.appointment_table_fc thead tr th {
		color: #fff;
	}

	.appointment_table_fc tbody tr td {
		background: #fff;
		color: #333;
	}

.loader {
	background: rgba(0,0,0,0.5);
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 9999;
	left: 0;
	top: 0;
}

	.loader .loader_img {
		position: absolute;
		transform: translate(-50%, -50%);
		top: 50%;
		left: 50%;
		font-size: 16px;
		color: #333;
		text-align: center;
		padding: 25px;
		border-radius: 10px;
		min-width: 300px;
		background: #fff;
	}

	/* .loader img removed: the Dashboard overlay was its only user and now renders a
	   Font Awesome icon rather than a GIF. */

/*Switch*/
.onoffswitch {
	position: relative;
	width: 79px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.onoffswitch-checkbox {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.onoffswitch-label {
	display: block;
	overflow: hidden;
	cursor: pointer;
	border: 2px solid #EEEEEE;
	border-radius: 20px;
}

.onoffswitch-inner {
	display: block;
	width: 200%;
	margin-left: -100%;
	transition: margin 0.3s ease-in 0s;
}

	.onoffswitch-inner:before, .onoffswitch-inner:after {
		display: block;
		float: left;
		width: 50%;
		height: 30px;
		padding: 0;
		line-height: 30px;
		font-size: 14px;
		color: white;
		font-family: Trebuchet, Arial, sans-serif;
		font-weight: bold;
		box-sizing: border-box;
	}

	.onoffswitch-inner:before {
		content: "Yes";
		padding-left: 10px;
		background-color: #343A40;
		color: #FFFFFF;
	}

	.onoffswitch-inner:after {
		content: "No";
		padding-right: 10px;
		background-color: #17436833;
		color: #343A40;
		text-align: right;
	}

.onoffswitch-switch {
	display: block;
	width: 18px;
	margin: 6px;
	background: #FFFFFF;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 45px;
	border: 2px solid #EEEEEE;
	border-radius: 20px;
	transition: all 0.3s ease-in 0s;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
	margin-left: 0;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
	right: 0px;
}

/*22 Dec 2025 New Css*/

.swal-button {
	color: white !important;
	background-color: #174368 !important;
}

.appointment-box {
	border-radius: 12px;
	background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
	padding: 20px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
	border: 1px solid rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease;
	height: 100%;
}

	.appointment-box:hover {
		transform: translateY(-5px);
		box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
	}

.appointment-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 15px;
}

.appointment-icon {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	transition: all 0.3s ease;
}

.appointment-box:hover .appointment-icon {
	transform: scale(1.1) rotate(5deg);
}

.appointment-icon i {
	font-size: 18px;
	color: white;
}

.icon-today {
	background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
}

.icon-appointments {
	background: linear-gradient(135deg, #28a745 0%, #218838 100%);
}

.icon-surgery {
	background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
}

.icon-transactions {
	background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
}

	.icon-transactions i {
		color: #856404;
	}

.appointment-title {
	flex: 1;
	margin-left: 15px;
	font-size: 16px;
	font-weight: 550;
	color: #495057;
	letter-spacing: 0.3px;
}

.appointment-number {
	font-size: 24px;
	font-weight: 700;
	color: #212529;
	line-height: 1.2;
}

.appointment-separator {
	height: 2px;
	background: linear-gradient(90deg, transparent 0%, #dee2e6 50%, transparent 100%);
	margin: 18px 0;
	border: none;
}

.appointment-stats {
	display: flex;
	justify-content: space-between;
}

.stat-item {
	flex: 1;
}

.stat-label {
	font-size: 12px;
	color: #6c757d;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 8px;
}

.stat-value {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
}

.stat-item {
	padding: 8px 0;
	transition: all 0.2s ease;
}

	.stat-item:hover {
		transform: translateY(-2px);
	}

	.stat-item .stat-label {
		display: block;
	}

.stat-month {
	color: #FF8C00;
}

.stat-year {
	color: #DC3545;
}
/* Calendar Design Improvements */
#calendar {
	background: #f8f9fa;
	border-radius: 8px;
	padding: 0;
}
	/* Calendar Header */
	#calendar .fc-header-toolbar {
		margin-bottom: 10px;
		padding: 4px 6px;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-radius: 4px;
		color: white;
	}

.fc-toolbar h2 {
	font-size: 20px;
}

.fc-day-number {
	font-size: 16px;
}

#calendar .fc-toolbar-title {
	font-size: 24px;
	font-weight: 600;
	color: white;
	text-transform: uppercase;
	letter-spacing: 1px;
}

#calendar .fc-button-group {
	display: flex;
	gap: 8px;
}

#calendar .fc-button {
	background: rgba(255, 255, 255, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: white;
	padding: 8px 16px;
	border-radius: 6px;
	font-weight: 500;
	transition: all 0.3s ease;
}

	#calendar .fc-button:hover {
		background: rgba(255, 255, 255, 0.3);
		border-color: rgba(255, 255, 255, 0.5);
		transform: translateY(-2px);
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	}

	#calendar .fc-button:active,
	#calendar .fc-button:focus {
		background: rgba(255, 255, 255, 0.3);
		border-color: rgba(255, 255, 255, 0.5);
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	}

#calendar .fc-today-button {
	background: rgba(255, 255, 255, 0.25);
	border: 1px solid rgba(255, 255, 255, 0.4);
}
/* Calendar Grid */
#calendar .fc-daygrid {
	background: white;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* Days of Week Header */
#calendar .fc-col-header-cell {
	background: #343a40;
	color: white;
	padding: 12px 8px;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.5px;
	border: none;
}

#calendar .fc-col-header-cell-cushion {
	color: white;
}
/* Calendar Days */
#calendar .fc-daygrid-day {
	border: 1px solid #e9ecef;
	background: white;
	transition: all 0.2s ease;
}

	#calendar .fc-daygrid-day:hover {
		background: #f8f9fa;
		transform: scale(1.02);
		z-index: 1;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

#calendar .fc-daygrid-day-number {
	padding: 8px;
	font-weight: 500;
	color: #495057;
	font-size: 14px;
}
/* Today's Date Highlight */
#calendar .fc-day-today {
	background: #fff3cd !important;
	border: 2px solid #ffc107 !important;
}

	#calendar .fc-day-today .fc-daygrid-day-number {
		color: #856404;
		font-weight: 700;
		font-size: 16px;
	}
/* Other Month Days */
#calendar .fc-day-other .fc-daygrid-day-number {
	color: #adb5bd;
	opacity: 0.5;
}
/* Event/Appointment Numbers */
#calendar .fc-event {
	/*background: #007bff;*/
	border: none;
	border-radius: 4px;
	padding: 4px 8px;
	margin: 2px 0;
	font-weight: 600;
	font-size: 22px;
	color: #000;
	cursor: pointer;
	transition: all 0.2s ease;
}

	#calendar .fc-event:hover {
		background: #0056b3;
		transform: translateY(-2px);
		box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
	}

#calendar .fc-event-title {
	font-weight: 700;
	font-size: 16px;
}
/* Calendar Scrollbar */
#calendar .fc-scroller {
	scrollbar-width: thin;
	scrollbar-color: #cbd5e0 #f7fafc;
}

	#calendar .fc-scroller::-webkit-scrollbar {
		width: 8px;
	}

	#calendar .fc-scroller::-webkit-scrollbar-track {
		background: #f7fafc;
		border-radius: 4px;
	}

	#calendar .fc-scroller::-webkit-scrollbar-thumb {
		background: #cbd5e0;
		border-radius: 4px;
	}

		#calendar .fc-scroller::-webkit-scrollbar-thumb:hover {
			background: #a0aec0;
		}
/* FullCalendar v4 compatibility */
#calendar .fc-left,
#calendar .fc-center,
#calendar .fc-right {
	display: flex;
	align-items: center;
}

#calendar .fc-prev-button,
#calendar .fc-next-button,
#calendar .fc-today-button {
	background: rgba(255, 255, 255, 0.2) !important;
	border: 1px solid rgba(255, 255, 255, 0.3) !important;
	color: white !important;
	padding: 2px 8px !important;
	border-radius: 4px !important;
	font-weight: 500 !important;
	transition: all 0.3s ease !important;
}

	#calendar .fc-prev-button:hover,
	#calendar .fc-next-button:hover,
	#calendar .fc-today-button:hover {
		background: rgba(255, 255, 255, 0.3) !important;
		border-color: rgba(255, 255, 255, 0.5) !important;
		transform: translateY(-2px) !important;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
	}

	#calendar .fc-prev-button:active,
	#calendar .fc-next-button:active,
	#calendar .fc-today-button:active,
	#calendar .fc-prev-button:focus,
	#calendar .fc-next-button:focus,
	#calendar .fc-today-button:focus {
		background: rgba(255, 255, 255, 0.3) !important;
		border-color: rgba(255, 255, 255, 0.5) !important;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
	}
/* Calendar body improvements */
#calendar .fc-view-container {
	background: white;
	border-radius: 8px;
	overflow: hidden;
}

#calendar .fc-body {
	background: white;
}
/* Weekends styling */
#calendar .fc-day-sat,
#calendar .fc-day-sun {
	background: #f8f9fa;
}
/* Event container */
#calendar .fc-daygrid-event {
	margin: 2px 4px;
}
/* Patients Statistics Chart Design */
.patients-stats-content {
	padding: 10px 0;
}

.patients-stats-info {
	padding: 0 5px;
}

	.patients-stats-info p {
		font-size: 15px;
		color: #495057;
		margin: 0;
	}

	.patients-stats-info #totalPatientsCount {
		color: #174368;
		font-size: 18px;
		font-weight: 700;
	}

.chart-legend {
	display: inline-flex;
	gap: 30px;
	padding: 0 5px;
}

.legend-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: #495057;
	font-weight: 500;
}

.legend-color {
	width: 16px;
	height: 16px;
	border-radius: 3px;
	display: inline-block;
}

.legend-new-patients {
	background-color: #174368;
}

.legend-old-patients {
	background-color: #5b9bd5;
}

.chart-container {
	min-height: 300px;
	padding: 15px 5px;
	position: relative;
}

#patientsStatisticsChart {
	max-height: 250px;
}
/* Top Departments Donut Chart Design */
.departments-content {
	padding: 0;
}

.donut-chart-container {
	position: relative;
	width: 100%;
	max-width: 200px;
	height: 200px;
	margin: 0 auto;
}

.donut-chart-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	pointer-events: none;
	z-index: 10;
}

.donut-center-label {
	font-size: 13px;
	color: #6c757d;
	margin-bottom: 5px;
	font-weight: 500;
}

.donut-center-value {
	font-size: 36px;
	font-weight: 700;
	color: #333;
	line-height: 1.2;
}

#departmentsDonutChart {
	width: 100% !important;
	height: 100% !important;
}

.departments-legend {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 10px 0;
}

	.departments-legend .legend-item {
		display: flex;
		align-items: center;
		gap: 10px;
		font-size: 14px;
		color: #495057;
	}

.legend-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	display: inline-block;
	flex-shrink: 0;
}

.metric-box {
	background: #f8f9fa;
	border-radius: 4px;
	padding: 5px 10px;
	text-align: center;
	border: 1px solid #e9ecef;
	transition: all 0.3s ease;
}

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

.metric-value {
	font-size: 24px;
	font-weight: 700;
	color: #333;
	margin-bottom: 0px;
}

.metric-label {
	font-size: 25px;
	color: #000;
	text-transform: capitalize;
}
/* Modal/Popup Design Improvements */
#modal-default .modal-dialog {
	max-width: 900px;
}

#modal-default .modal-content {
	border-radius: 12px;
	border: none;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
	overflow: hidden;
}

#modal-default .modal-dialog {
	overflow-x: hidden;
}

#modal-default .modal-header {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	border-bottom: none;
	padding: 15px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

#modal-default .modal-title {
	color: white;
	font-size: 20px;
	font-weight: 600;
	margin: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 0px;
}

	#modal-default .modal-title #txtmodaltitle {
		font-size: 22px;
		font-weight: 700;
		letter-spacing: 0.5px;
	}

#modal-default .modal-header .close {
	color: white;
	opacity: 1;
	font-size: 28px;
	font-weight: 300;
	text-shadow: none;
	padding: 0;
	margin: 0;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: all 0.3s ease;
}

	#modal-default .modal-header .close:hover {
		background: rgba(255, 255, 255, 0.2);
		transform: rotate(90deg);
	}
/* Filter Radio Buttons */
#modal-default .input-group {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 12px;
	align-items: center;
}

#modal-default .custom-control {
	margin: 0;
	padding-left: 0;
	min-height: auto;
	position: relative;
}

#modal-default .custom-control-label {
	color: white;
	font-weight: 500;
	font-size: 15px;
	padding-left: 28px;
	cursor: pointer;
	transition: all 0.2s ease;
	margin-bottom: 0;
	line-height: 20px;
	user-select: none;
}

	#modal-default .custom-control-label:hover {
		color: #f0f0f0;
	}

#modal-default .custom-control-input:checked ~ .custom-control-label {
	color: white;
	font-weight: 600;
}

	#modal-default .custom-control-input:checked ~ .custom-control-label::before {
		background-color: white;
		border-color: white;
		box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
	}

	#modal-default .custom-control-input:checked ~ .custom-control-label::after {
		background-color: #667eea;
		border-color: white;
		transform: scale(0.6);
	}

#modal-default .custom-control-label::before {
	border: 2px solid white;
	background-color: transparent;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	top: 0;
	left: 0;
	transition: all 0.2s ease;
}

#modal-default .custom-control-label::after {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	top: 4px;
	left: 4px;
	background-color: transparent;
	border: none;
	transform: scale(0);
	transition: all 0.2s ease;
}

#modal-default .custom-control-input:focus ~ .custom-control-label::before {
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
}

#modal-default .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
	background-color: rgba(255, 255, 255, 0.3);
}
/* Modal Body */
#modal-default .modal-body {
	padding: 0;
	max-height: 70vh;
	overflow-y: auto;
	overflow-x: hidden;
}
/* Table Styling */
#modal-default #txtdddltable {
	margin: 0;
	width: 100%;
	table-layout: auto;
	overflow-x: auto;
}

	#modal-default #txtdddltable thead {
		background: #eef2f7;
	}

		#modal-default #txtdddltable thead th {
			color: #000;
			font-weight: 600;
			text-transform: uppercase;
			font-size: 12px;
			letter-spacing: 0.5px;
			padding: 15px 12px;
			border: none;
			white-space: nowrap;
		}

	#modal-default #txtdddltable tbody td {
		padding: 6px;
		vertical-align: middle;
		border-bottom: 1px solid #e9ecef;
		font-size: 14px;
	}

	#modal-default #txtdddltable tbody tr {
		transition: all 0.2s ease;
	}

		#modal-default #txtdddltable tbody tr:hover {
			background-color: #f8f9fa;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		}

		#modal-default #txtdddltable tbody tr:last-child td {
			border-bottom: none;
		}
	/* UHID Link Styling */
	#modal-default #txtdddltable tbody td a {
		color: #007bff;
		text-decoration: none;
		font-weight: 600;
		transition: all 0.2s ease;
	}

		#modal-default #txtdddltable tbody td a:hover {
			color: #0056b3;
			text-decoration: underline;
		}
/* Toggle Switch Styling */
#modal-default .onoffswitch {
	position: relative;
	width: 70px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

#modal-default .onoffswitch-checkbox {
	display: none;
}

#modal-default .onoffswitch-label {
	display: block;
	overflow: hidden;
	cursor: pointer;
	border-radius: 20px;
	margin: 0;
	height: 30px;
	background-color: #ccc;
	transition: background-color 0.3s ease;
}

#modal-default .onoffswitch-inner {
	display: block;
	width: 200%;
	margin-left: -100%;
	transition: margin 0.3s ease;
}

	#modal-default .onoffswitch-inner:before,
	#modal-default .onoffswitch-inner:after {
		display: block;
		float: left;
		width: 50%;
		height: 30px;
		padding: 0;
		line-height: 30px;
		font-size: 12px;
		color: white;
		font-weight: 600;
		box-sizing: border-box;
	}

	#modal-default .onoffswitch-inner:before {
		content: "YES";
		padding-left: 10px;
		background-color: #28a745;
		color: white;
	}

	#modal-default .onoffswitch-inner:after {
		content: "NO";
		padding-right: 10px;
		background-color: #dc3545;
		color: white;
		text-align: right;
	}

#modal-default .onoffswitch-switch {
	display: block;
	width: 22px;
	margin: 4px;
	background: white;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 40px;
	border-radius: 20px;
	transition: all 0.3s ease;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#modal-default .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
	margin-left: 0;
}

#modal-default .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
	right: 0px;
}

#modal-default .onoffswitch-checkbox:checked + .onoffswitch-label {
	background-color: #28a745;
}
/* Empty State */
#modal-default #txtdddltable tbody td[colspan] {
	text-align: center;
	padding: 40px 20px;
	color: #6c757d;
	font-size: 16px;
	font-style: italic;
}
/* Modal Backdrop */
.modal-backdrop {
	background-color: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(5px);
}
/* Scrollbar for modal body */
#modal-default .modal-body::-webkit-scrollbar {
	width: 8px;
}

#modal-default .modal-body::-webkit-scrollbar-track {
	background: #f1f1f1;
}

#modal-default .modal-body::-webkit-scrollbar-thumb {
	background: #888;
	border-radius: 4px;
}

	#modal-default .modal-body::-webkit-scrollbar-thumb:hover {
		background: #555;
	}

.btn-outline-light {
	color: #000;
	border-color: #dbdbdb;
}

	.btn-outline-light:hover {
		color: #000;
		border-color: #dbdbdb;
	}

.card-header {
	min-height: 52px;
	padding: 1rem 1.25rem 0.75rem;
}

.card-title {
	font-size: 18px;
	font-weight: 600;
}

.btn-sm {
	padding: 2px 10px;
	font-size: 12px;
	line-height: 18px;
	border-radius: 0.2rem;
}

.nav-itema .fa-angle-down {
	animation: rotateVertical 0.5s ease-in-out forwards;
}

.nav-item.menu-open a .fa-angle-down {
	transform: rotate(-180deg);
	animation: rotateVertical 0.5s ease-in-out forwards;
}

@keyframes rotateVertical {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(-180deg);
	}
}

.nav-treeview.dropdown-submenu .nav-item > .nav-link,
.nav-treeview.dropdown-submenu .nav-item > .nav-link .fa {
	font-size: 14px;
}

[class*=sidebar-dark-] .sidebar a {
	color: #fff;
}

.nav-sidebar .menu-open > .nav-treeview {
	background: rgba(255, 255, 255, 0.1) !important;
}

.nav-sidebar > .nav-item {
	margin-bottom: 4px;
}

.nav-link {
	padding: .5rem 0.6rem;
}

.table-bordered thead td, .table-bordered thead th {
	border-bottom-width: 0px;
}

/* Patient History Open */
.patient-dashboard {
	background: #f5f7fa;
	min-height: 100vh;
	padding: 20px;
}

.patient-nav-tabs {
	background: white;
	border-radius: 8px;
	padding: 0;
	margin-bottom: 20px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

	.patient-nav-tabs .nav-link {
		color: #6c757d;
		font-weight: 500;
		padding: 15px 25px;
		border: none;
		border-bottom: 3px solid transparent;
		transition: all 0.3s ease;
	}

		.patient-nav-tabs .nav-link:hover {
			color: #007bff;
			background: #f8f9fa;
		}

		.patient-nav-tabs .nav-link.active {
			color: #007bff;
			background: transparent;
			border-bottom-color: #007bff;
			font-weight: 600;
		}

.patient-sidebar {
	background: white;
	border-radius: 12px;
	padding: 25px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	margin-bottom: 20px;
}

.patient-profile-header {
	text-align: center;
	padding-bottom: 20px;
	border-bottom: 1px solid #e9ecef;
	margin-bottom: 20px;
}

.patient-avatar {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	margin: 0 auto 15px;
	border: 4px solid #e9ecef;
	object-fit: cover;
}

.patient-name {
	font-size: 22px;
	font-weight: 700;
	color: #212529;
	margin-bottom: 5px;
}

.patient-id {
	color: #6c757d;
	font-size: 14px;
	margin-bottom: 8px;
}

.last-visited {
	color: #28a745;
	font-size: 13px;
	font-weight: 500;
}

.info-section {
	margin-bottom: 25px;
}

.info-section-title {
	font-weight: 600;
}

.info-item {
	display: flex;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid #f1f3f5;
}

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

.info-label {
	color: #212529;
}

.info-value {
	font-weight: 500;
	text-align: right;
}

	.info-value a {
		color: #007bff;
		text-decoration: none;
	}

		.info-value a:hover {
			text-decoration: underline;
		}

.content-section {
	background: white;
	border-radius: 12px;
	padding: 25px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	margin-bottom: 20px;
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	padding-bottom: 15px;
	border-bottom: 1px solid #e9ecef;
}

.section-title {
	font-size: 20px;
	font-weight: 700;
	color: #212529;
	margin: 0;
}

.section-action {
	color: #007bff;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
}

	.section-action:hover {
		text-decoration: underline;
	}
/* .appointment-card {
   background: white;
   border-radius: 12px;
   padding: 20px;
   margin-bottom: 15px;
   border: 1px solid #e9ecef;
   transition: all 0.3s ease;
   height: 100%;
}
.appointment-card:hover {
   transform: translateY(-3px);
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
   border-color: #dee2e6;
} */
.appointment-badge {
	display: inline-block;
	padding: 5px 14px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 700;
	margin-bottom: 18px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.badge-upcoming {
	background: #6f42c1;
	color: white;
}

.badge-completed {
	background: #28a745;
	color: white;
}

.appointment-icon-box {
	width: 56px;
	height: 56px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.icon-video {
	background: #28a745;
	color: white;
}

.icon-phone {
	background: #007bff;
	color: white;
}

.appointment-icon-box i {
	font-size: 24px;
}

.appointment-detail {
	margin-bottom: 14px;
}

	.appointment-detail:last-child {
		margin-bottom: 0;
	}

.appointment-detail-label {
	font-size: 11px;
	color: #6c757d;
	margin-bottom: 5px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.appointment-detail-value {
	font-size: 15px;
	font-weight: 600;
	color: #212529;
	line-height: 1.4;
}

--1371 line no
.vital-item {
	background: #f8f9fa;
	border-radius: 5px;
	padding: 10px;
	text-align: center;
	transition: all 0.3s ease;
}

.vital-item:hover {
	background: #e9ecef;
	transform: translateY(-2px);
}

.vital-icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 15px;
	font-size: 18px;
	color: white;
}

	.vital-icon.blood-pressure {
		background: #dc3545;
	}

	.vital-icon.heart-rate {
		background: #e83e8c;
	}

	.vital-icon.temperature {
		background: #fd7e14;
	}

	.vital-icon.respiratory {
		background: #20c997;
	}
	.vital-icon.pvalue {
		background: #ffc107;
	}
	.vital-icon.fvalue {
		background: #6f42c1;
	}

	.vital-icon.spo2 {
		background: #17a2b8;
	}

	.vital-icon.weight {
		background: #6f42c1;
	}

.vital-label {
	font-size: 13px;
	color: #6c757d;
	margin-bottom: 8px;
	font-weight: 500;
}

.vital-value {
	font-size: 16px;
	font-weight: 700;
	color: #212529;
}

.visit-card {
	background: #f8f9fa;
	border-radius: 10px;
	padding: 20px;
	margin-bottom: 15px;
	transition: all 0.3s ease;
}

	.visit-card:hover {
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	}

.visit-doctor {
	display: flex;
	align-items: center;
	margin-bottom: 15px;
}

.doctor-avatar {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	margin-right: 15px;
	object-fit: cover;
}

.doctor-info h6 {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: #212529;
}

.doctor-specialty {
	font-size: 13px;
	color: #6c757d;
	margin-top: 3px;
}

.visit-detail {
	margin-bottom: 12px;
}

.visit-detail-label {
	font-size: 12px;
	color: #6c757d;
	margin-bottom: 3px;
}

.visit-detail-value {
	font-size: 14px;
	font-weight: 600;
	color: #212529;
}

.visit-notes {
	background: #eef2f7;
	border-radius: 4px;
	padding: 10px;
	font-size: 14px;
	color: #495057;
	line-height: 1.2;
}
/* Patient History Close */


.card {
	background: white;
	border-radius: 12px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* New CSS 26/12/2025 */

.doctor-avatar-2 {
	width: 2rem;
	height: 2rem;
	object-fit: cover;
}

.customTable td {
	vertical-align: middle;
}

.badge-soft-success {
	color: var(--success);
	background-color: #eef9f1;
}

.badge-soft-warning {
	color: var(--warning);
	background-color: #fff8ef;
}

.badge-soft-info {
	color: var(--info);
	background-color: #ebf3fc;
}

.badge-soft-purple {
	background-color: #f1ebf7;
	color: var(--purple);
}

.customTable td .badge {
	font-weight: 400;
	font-size: 90%;
}

.fw-semibold {
	font-weight: 600;
}
.vital-box-col {
	display: flex;
}

	.vital-box-col span i {
		width: 40px;
		height: 40px;
		background: #f5f5f5;
		line-height: 40px;
		text-align: center;
		border-radius: 6px;
		margin-right: 15px;
	}

	.vital-box-col h6 {
		font-weight: 700;
		margin: 0;
	}

div#vitalsModal button.btn-close {
	border-radius: 100%;
	width: 30px;
	height: 30px;
	color: #fff;
	background: #0f172a;
	border-color: #0f172a;
}
.div-none{
	display:none!important;
}
.rightSideBtn {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 99;
}
.rightSideBtn ul {
	margin: 0;
	padding: 0;
}
.rightSideBtn ul li {
	list-style: none;
	display: block;
}
.rightSideBtn #request {
	top: -9px;
	background: #1e77c5;
	position: absolute;
	right: -111px;
	transition: .3s;
	width: 160px;
	color: #fff;
	line-height: 50px;
	border-radius: 4px 0px 0 4px;
}
.rightSideBtn ul li:hover #request {
	right: 0;
}
.rightSideBtn #request span {
	background: #1e77c5;
}
.rightSideBtn ul li a span {	
	display: inline-block;
	width: 48px;
	height: 48px;
	line-height: 48px;
	border-radius: 4px 0 0 4px;
	text-align: center;
	font-size: 20px;
	margin-right: 5px;

}
	.rightSideBtn ul li a span img {
		max-width: 40px;
		margin: 0;
	}
.doctorInOUT {
	display: flex;
	margin: 0 auto;
}
.vital-box-col.doctorInOUTTime {
	justify-content: space-around;
	margin-top: 10px;
}
/* ==========================================================================
   Shared page chrome — added 2026-08-09.
   The AdminLTE 3 -> 4 move left page-level typography and spacing to whatever
   each view happened to inherit, so titles, card gaps and table widths drifted
   apart between pages. These rules are deliberately global (style.css is loaded
   by _LayoutAdmin on every admin page) so a page cannot opt out by accident.
   ========================================================================== */

/* Page title. Every view already renders <h1 class="m-0 text-dark">, so pinning
   the size here makes them agree regardless of which wrapper they sit in —
   which is why Patient List rendered noticeably larger than Dashboard. */
.app-content-header h1,
.content-header h1,
.app-content-header h3.m-0.text-dark,
.content-header h3.m-0.text-dark,
.app-content-header .m-0.text-dark,
.content-header .m-0.text-dark {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.2;
}

.app-content-header,
.content-header {
    padding: 1rem 0.5rem 0.75rem;
}

/* Breadcrumb aligned to the title rather than floating at its own size. */
.app-content-header .breadcrumb,
.content-header .breadcrumb {
    margin-bottom: 0;
    background: transparent;
    padding: 0;
    font-size: 0.875rem;
}

/* Uniform gap between cards. Views previously used a mix of mb-2/mb-3/mb-4 and
   bare rows, which is what made the spacing look arbitrary between panels. */
.app-content .card,
.content .card {
    margin-bottom: 1rem;
}

.app-content .card-header,
.content .card-header {
    padding: 0.75rem 1rem;
}

.app-content .card-title,
.content .card-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0;
}

.app-content .card-body,
.content .card-body {
    padding: 1rem;
}

/* DataTables containment.
   A wide table (Patient List has 12+ columns) was overflowing its card and
   spilling past the page edge, because nothing constrained it. Scrolling the
   table inside its own card keeps the layout intact instead of widening the
   whole page. */
.dataTables_wrapper {
    width: 100%;
    overflow-x: auto;
}

.dataTables_wrapper > .table-responsive,
.card-body > .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table.dataTable {
    width: 100% !important;
    margin: 0 !important;
}

table.dataTable th,
table.dataTable td {
    white-space: nowrap;
    vertical-align: middle;
}

/* Address-style columns are the reason nowrap alone is not enough — allow the
   long ones to wrap within a sane width rather than stretching the table. */
table.dataTable td.wrap-cell,
table.dataTable td:nth-child(n+7) {
    white-space: normal;
    max-width: 220px;
}

/* Filter/length controls sit on one line with the table, not above its scroll. */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    padding: 0.25rem 0 0.5rem;
}

.dataTables_wrapper .dataTables_filter input {
    margin-left: 0.5rem;
}

/* ==========================================================================
   UI consistency pass — 2026-08-09. Reported from staging across 10 screens.
   ========================================================================== */

/* Blue top border on every content card, so pages stop disagreeing about it.
   Medicine List, Reports and Patient Category were missing it entirely. */
/* Only cards with a VISIBLE header get the accent border. The earlier version
   applied it to every card and then tried to subtract the header-less wrappers,
   which still left a stray blue rule under the page title where the wrapper had
   no .d-none class to match on. Stating the condition positively removes the
   whole class of problem. */
.app-content .card:has(> .card-header:not(.d-none)),
.content .card:has(> .card-header:not(.d-none)) {
    border-top: 3px solid #0d6efd;
}

/* Cards without a visible header keep their normal box; they simply do not get
   the blue accent stripe. */
.app-content .card,
.content .card {
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}

/* No rule under the page title. The header carried a grey bottom border, and the
   wrapper card above added a blue one, so most pages showed both. */
.app-content-header,
.content-header {
    border-bottom: none !important;
    box-shadow: none;
}

.app-content-header + .container-fluid > .row > [class*="col-"] > .card:first-child:not(:has(> .card-header:not(.d-none))),
.app-content > .container-fluid > .row > [class*="col-"] > .card:not(:has(> .card-header:not(.d-none))) {
    border: none;
    box-shadow: none;
}

/* Card footers and empty tails picked up a grey fill on some pages (Change
   Password most visibly) while the same area was white elsewhere. */
.app-content .card-footer,
.content .card-footer {
    background: transparent;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}

.app-content .card > .card-body:last-child,
.content .card > .card-body:last-child {
    background: transparent;
}

/* Master Entries and similar single-field forms: input and its button on one
   line, with the DataTables search below rather than wedged beside them. */
.app-content .card-body form .row > [class*="col-"] {
    margin-bottom: 0.5rem;
}

.app-content .card-body .dataTables_filter {
    float: none;
    text-align: right;
    clear: both;
}

/* The "Please wait" overlay is styled per page. Pinned here so it looks the same
   everywhere it appears. */
/* Two different loaders existed. Dashboard renders #ddlloader (.loader >
   .loader_img > img), while Registration, Discharge and Discharge History render
   #loader (.page_loader > .icon_loader > a spinner icon). They looked nothing
   alike. Both are given the same treatment here rather than rewriting the markup
   in four views.

   Note the display rule: jQuery .show() sets display:block inline, which would
   defeat a flex layout, so centring is done with position/transform on the inner
   panel instead of flexbox on the overlay. */
#ddlloader,
.page_loader {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(255, 255, 255, 0.65);
}

#ddlloader .loader_img,
.page_loader .icon_loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 1.5rem 2.25rem;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    text-align: center;
    min-width: 11rem;
}

/* The spinner-icon variant carries no caption; give it the same wording as the
   Dashboard one so the two read identically. */
.page_loader .icon_loader::after {
    content: "Please wait...";
    display: block;
    margin-top: 0.75rem;
    font-size: 0.95rem;
    color: #555;
}

#ddlloader .loader_img i,
.page_loader .icon_loader i {
    color: #2a73d9;
}

/* Sidebar submenu. Items sat at the same indent as top-level entries, so the
   Reports children read as siblings of Reports rather than children of it. */
.sidebar-menu .nav-treeview > .nav-item > .nav-link {
    padding-left: 2.25rem;
    font-size: 0.95rem;
}

.sidebar-menu .nav-treeview {
    background: rgba(0, 0, 0, 0.15);
}

/* Report filter rows: the three inputs took the full width and pushed the two
   buttons onto separate lines. Capping the inputs lets the buttons sit side by
   side, which is what they are meant to do. */
.app-content .card-body .row > [class*="col-"] > .form-control,
.app-content .card-body .row > [class*="col-"] > .form-select {
    max-width: 100%;
}

.report-actions,
.card-body .btn + .btn {
    display: inline-block;
}

.report-actions .btn {
    margin: 0 0.25rem 0.25rem 0;
}

/* Trailing whitespace under short pages (Change Password sat in a tall empty
   card). Let the card size to its content instead of stretching. */
.app-content .card-body:last-child {
    padding-bottom: 1rem;
}

/* Login page: the outer container had square corners at the viewport edges. */
.login-container {
    border-radius: 16px;
    overflow: hidden;
}

/* ==========================================================================
   Follow-up 2026-08-09 (2). Two fixes that did not fully land.
   ========================================================================== */

/* The grey rule under the page title is the SAME wrapper card as the blue one.
   Removing border-top left the other three sides, so an empty header-less card
   still drew a thin bordered strip. Remove the border entirely, and its shadow
   and padding with it, so the element collapses instead of rendering as a line. */
/* The stray rule under the page title is an EMPTY card -- inspected in the
   browser, it reports childCount 0 and renders 2px tall, i.e. nothing but its own
   top and bottom borders. It carries no .card-header at all, which is why every
   previous selector missed it: I kept targeting a hidden header that was not
   there. :not(:has(> *)) matches exactly this and cannot touch a real card, since
   any real card has at least a header or a body element.

   Also covers the .d-none-header variant, which is the same defect in another
   form -- but only when that hidden header is the card's only child. A card with
   a hidden header AND a body is real: the wider rule hid Indoor Registration's
   UHID search until 28 Sep. */
.app-content .card:not(:has(> *)),
.content .card:not(:has(> *)),
.app-content .card:has(> .card-header.d-none:only-child),
.content .card:has(> .card-header.d-none:only-child) {
    display: none !important;
}

.app-content .card:has(> .card-header.d-none:only-child),
.content .card:has(> .card-header.d-none:only-child) {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent;
    margin-bottom: 0;
}

/* Prescription: the section cards sat at different vertical rhythms, so the gap
   above "Systemic diseases" did not match the one above "Chief Complaint".
   Uniform spacing, and a minimum body height so a card holding only a short
   select does not collapse against the one below it. */
.app-content .card + .card,
.content .card + .card {
    margin-top: 1rem;
}

.app-content .card-body .form-group,
.app-content .card-body .mb-3 {
    margin-bottom: 1rem;
}

.app-content .card-body select[multiple],
.app-content .card-body select[size] {
    min-height: 6rem;
}

/* ==========================================================================
   Found by inspecting the live pages, 2026-08-09.
   ========================================================================== */

/* Patient List table pushed past the viewport: TABLE, THEAD, TR and every TH
   reported right edges beyond the window. AdminLTE 4's .app-wrapper is a CSS
   grid, and a grid item's default min-width:auto refuses to shrink below its
   content, so a 12-column table widens the whole layout instead of scrolling.
   min-width:0 on the chain is the fix; the wrapper then scrolls inside its card. */
.app-main,
.app-content,
.app-content > .container-fluid,
.app-content .card,
.app-content .card-body {
    min-width: 0;
}

.app-content .dataTables_wrapper,
.app-content .table-responsive {
    max-width: 100%;
    overflow-x: auto;
}

/* ---------------------------------------------------------------------------
   Sidebar brand: exactly one logo in every state.

   The collapse rules above are keyed on `.main-sidebar`, the AdminLTE 3 name.
   In v4 the element is `.app-sidebar`, so the hover branch never matched and a
   hovered collapsed sidebar painted the small mark AND the full logo together.
   Hovering a collapsed sidebar expands it, so the full logo is the correct one
   to show there -- the small mark belongs to the collapsed-and-unhovered state.
   --------------------------------------------------------------------------- */
body.sidebar-collapse .app-sidebar:hover .logo_mini,
body.sidebar-collapse .app-sidebar.sidebar-focused .logo_mini {
	display: none;
}

body.sidebar-collapse .app-sidebar:hover .logo_lg,
body.sidebar-collapse .app-sidebar.sidebar-focused .logo_lg {
	display: block;
}

body.sidebar-collapse .app-sidebar:hover .user_name_left,
body.sidebar-collapse .app-sidebar.sidebar-focused .user_name_left {
	display: block;
}