/* End old variables*/
@media (min-width: 1800px) {
	.container {
		width: 1710px;
	}
}

table.dataTable thead .sorting-disabled:after {
	opacity: 0.2;
	content: "" !important;
}

body {
	padding-top: 50px;
	padding-bottom: 20px;
	font-family: 'roboto', sans-serif;
}

@media (min-width: 1550px) {
	.container {
		width: 1510px;
	}
}

/* Set padding to keep content from hitting the edges */
.body-content {
	padding-left: 15px;
	padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
	white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
	max-width: 280px;
}

.navbar-inverse {
	background-color: #ffffff;
}

.navbar-nav > li:hover {
	background-color: #F08217;
	color: white !important;
}

.navbar-brand {
	padding-top: 9px;
	padding-bottom: 0;
}

.jumbotron {
	min-height: 300px;
	background-size: cover;
	border-radius: 0 !important;
}

a:hover {
	text-decoration: none;
}

.home-link {
	color: #333333;
}

	.home-link:hover {
		color: #333333;
		text-decoration: none;
	}

.btn-orange {
	background-color: #F08217;
	color: white;
	border-color: #F08217;
}

	.btn-orange:hover {
		background-color: #4ca950;
		color: white;
		border-color: #4ca950;
	}

.h2 {
	color: #1f1f1f !important;
	font-family: 'Roboto','Arial';
	font-weight: 300;
}


.navbar-inverse .navbar-nav > li > a {
	color: black;
}

.btn-swv {
	color: white;
}

/* Copied from NPO */
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
	background-color: #009CDD;
}

.navbar-nav > li {
	font-family: 'Lato', sans-serif;
}

.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
	background-color: #FFFCFE;
}

.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
	background-color: #f9f9f9;
}

.btn-sm, .btn-xs {
	font-size: 13px;
}

.pagination {
	margin: 0;
}

.form-inline .form-control {
	width: auto;
}

.form-group .btn-toolbar {
	margin-top: 10px;
}

.fa-folder-open {
	color: #00A4C1;
}

.fa-folder {
	color: #00A4C1;
}


.fa-blue {
	color: #00A4C1;
}

.fa-file {
	color: #00A4C1;
}


.fa-graduation-cap {
	color: #00A4C1;
}

.fa-download {
	color: #00A4C1;
}

.btn-primary .fa {
	color: white;
}

.btn-primary {
	background-color: #00A4C1;
	border-color: #00A4C1;
}

	.btn-primary:hover {
		background-color: #369483;
		border-color: #369483;
	}

.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
	background-color: #F08217;
	border-color: #F08217;
}

.panel-warning > .panel-heading {
	background-color: #00A4C1;
	border-color: #00A4C1;
	color: white;
}

.orange {
	background-color: #F08217 !important;
	border-color: #F08217 !important;
}

.red {
	background-color: red !important;
	border-color: red !important;
}

.panel-warning {
	border-color: #dddddd;
}

.navbar-nav > li {
	font-family: 'Roboto', sans-serif;
}

	.navbar-nav > li > a.active {
		background-color: #F08217;
		color: white;
	}

.navbar-inverse .navbar-toggle .icon-bar {
	background-color: #00A4C1;
}

.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
	color: black;
}

.row-margin {
	margin-bottom: 15px;
}

.form-group {
	margin-bottom: 3px;
}

.form-control-static {
	min-height: 0px;
	padding-top: 7px;
	padding-bottom: 3px;
}

.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
	color: white;
	background-color: #F08217;
}

.dropdown-menu > li > a.active {
	color: white;
	background-color: #F08217;
}

.navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus {
	color: #fff;
	background-color: #F08217;
}

.bootstrap-datetimepicker-widget.dropdown-menu {
	display: block;
	z-index: 2000 !important;
	overflow: visible !important;
}

.chosen-container {
	max-width: 280px;
}

th.pvtColumnLabel {
	color: #d6d6d6;
	font-weight: 100;
}

.form-large {
	max-width: 100%;
}

textarea.form-document {
	height: 450px;
}

textarea.form-medium {
	max-width: 100%;
	height: 250px;
}

tfoot {
	display: table-header-group;
}

.form-control-small {
	height: 28px;
	font-size: 12px;
	padding: 0px;
}

@media (max-width: 767px) {
	.navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
		color: #000000;
		background-color: #ffffff;
	}
}

.dt-buttons {
	float: left;
	margin-bottom: 5px;
}

.dt-button {
	margin-right: 5px;
}

.jumbotron h1 {
	color: white;
}

	.jumbotron h1 a {
		color: white;
		font-size: 36px;
	}

.dt-button {
	font-size: 10px;
}

.paginate_button {
	font-size: 10px;
}

@media print {
	a[href]:after {
		content: none;
	}

	.btn {
		display: none;
	}

	.row {
		margin-right: 0px !important;
		margin-left: 0px !important;
	}

	textarea {
		overflow: visible !important;
		height: auto !important;
		min-height: 300px;
		height: 300px !important;
		min-width: 500px;
		font-size: 12px !important;
	}
}

.pvtColumnLabel {
	color: #CC8548;
}

.left10px {
	margin-left: 10px !important;
}

.totalValue {
	background-color: #f9f9f9;
}

.totals {
	background-color: #f9f9f9;
}

.green {
	background-color: #004E5A !important;
	border-color: #004E5A !important;
}

@media print {
	body {
		display: table;
		table-layout: fixed;
		margin-left: 0px;
		margin-right: 0px;
		padding-top: 0px;
		font-size: 8pt;
	}

	.container {
		margin-left: 0px;
		margin-right: 0px;
		width: 100% !important;
	}


	.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
		padding: 2px;
	}
}

.large-textarea {
	height: 600px;
}



.btn-blue {
	background-color: #00A4C1;
	border-color: #00A4C1;
}

.btn {
	border-radius: 0px !important;
}

h2 {
	font-weight: 300;
}

.badge {
	background-color: #8c8c8c;
}

table.dataTable th {
	font-weight: 500;
}

select {
	border-radius: 0px !important;
}

input {
	border-radius: 0px !important;
}


.chosen-container-single .chosen-single {
	border-radius: 0px !important;
}


td.thuiszitter-red a {
	color: red !important;
}

td.thuiszitter-orange a {
	color: orange;
}

td.thuiszitter-blue a {
	color: blue;
}

.disabled-control {
	background: #f7f7f7;
}

a.bell-link:hover > i {
	color: #ffffff !important;
}

a.bell-link:visited > i {
	color: #ffffff !important;
}

.hint {
	font-size: 12px;
	color: #8c8c8c;
}


.dropdown {
	display: inline-block;
	margin-left: 20px;
}


.glyphicon-bell {
	font-size: 1.5rem;
}

.notifications {
	min-width: 620px;
}

.notifications-wrapper {
	overflow: auto;
	max-height: 600px;
}

.menu-title {
	color: #ff7788;
	font-size: 1.5rem;
	display: inline-block;
}

.glyphicon-circle-arrow-right {
	margin-left: 10px;
}


.notification-heading, .notification-footer {
	padding: 2px 10px;
}


.dropdown-menu.divider {
	margin: 5px 0;
}

.item-title {
	font-size: 1.3rem;
	color: #000;
}

.notifications a.content {
	text-decoration: none;
	background: #ccc;
}

.notification-item {
	padding: 10px;
	margin: 5px;
	background: #ccc;
	border-radius: 4px;
}

li.active-bell {
	background-color: #F08217;
}

	li.active-bell > a > i {
		color: white !important;
	}


	li.active-bell > a {
		color: white !important;
	}

.textarealarge {
	width: 100%;
	max-width: 100%;
}

.left-checkbox {
	width: 25px !important;
	margin: 0px !important;
}

.leerling-info {
	width: 280px;
	height: 150px !important;
}

.panel-warning > a > .panel-heading {
	background-color: #00A4C1;
	border-color: #00A4C1;
	color: white;
}


.form-control-label {
	border: 0px;
	box-shadow: none;
}

.form-control-limitless {
	max-width: none;
}

.panel-header {
	font-size: 18px;
}

.currency {
	text-align: right;
}

.green-check {
	color: green;
}

.fa-info-circle {
	color: #f08217;
}


.hinttekst {
	font-size: 10px;
	max-width: 270px;
}

.total-ok {
	border-color: green;
}

.total-notok {
	border-color: red;
}

.tab-content > .tab-pane {
	display: none;
}

.tab-content > .active {
	display: block;
}


#report-div {
	min-width: 800px;
	height: calc(0.5625 * 64vw); /* 16:9 aspect ratio */
	width: 60%;
}

#report-frame {
	min-height: 750px;
	height: 750px;
}

iframe {
	border: none;
}

.btn-optional {
	padding: 3px;
	font-size: 12px;
}


.page-preview {
	max-width: 675px;
}


@page {
	size: portrait auto;
}

.prio-1 td {
	background-color: #00cc00 !important;
	font-weight: bold;
}

.prio-2 td {
	background-color: #66cc00 !important;
	font-weight: bold;
}

.prio-3 td {
	background-color: #cccc00 !important;
	font-weight: bold;
}

.prio-4 td {
	background-color: #ffcc00 !important;
	color: black !important;
	font-weight: bold;
}

.prio-5 td {
	background-color: #ff9900 !important;
	color: black !important;
	font-weight: bold;
}

.prio-6 td {
	background-color: #ff6600 !important;
	font-weight: bold;
}

.prio-7 td {
	background-color: #ff3300 !important;
	font-weight: bold;
	color: white !important;
}

.prio-8 td {
	background-color: #ff0000 !important;
	font-weight: bold;
	color: white !important;
}

.prio-9 td {
	background-color: #cc0000 !important;
	font-weight: bold;
	color: white !important;
}

.prio-10 td {
	background-color: #990000 !important;
	font-weight: bold;
	color: white !important;
}

/* ========================================
   MODERN DATATABLE STYLING IMPROVEMENTS
   ======================================== */

/* Panel improvements for better table layout */
.panel-body .form-horizontal {
	margin: 0;
	padding: 0;
}

/* DataTables wrapper improvements */
.dataTables_wrapper {
	margin-top: 0;
	padding: 0;
}

	/* Compact and modern button toolbar */
	.dataTables_wrapper .dt-buttons {
		float: left;
		margin-bottom: 10px;
		margin-right: 15px;
	}

		.dataTables_wrapper .dt-buttons .dt-button {
			background: #f8fafb00;
			border: 1px solid #dee2e6;
			color: #495057;
			font-size: 11px;
			padding: 4px 8px;
			margin-right: 2px;
			border-radius: 4px;
			transition: all 0.2s ease;
		}

			.dataTables_wrapper .dt-buttons .dt-button:hover {
				background: #e9ecef;
				color: #495057;
				text-decoration: none;
			}

	/* Search box improvements */
	.dataTables_wrapper .dataTables_filter {
		float: right;
		margin-bottom: 10px;
	}

		.dataTables_wrapper .dataTables_filter input {
			border-radius: 4px;
			border: 1px solid #ddd;
			padding: 4px 8px;
			font-size: 12px;
			max-width: 200px;
		}

	/* Table styling improvements */
	.dataTables_wrapper .dataTable {
		border-collapse: separate;
		border-spacing: 0;
		border: 1px solid #e9ecef;
		border-radius: 6px;
		overflow: hidden;
		font-size: 13px;
	}

		.dataTables_wrapper .dataTable thead th {
			background: linear-gradient(to bottom, #f8f9fa 0%, #e9ecef 100%);
			border-bottom: 2px solid #dee2e6;
			font-weight: 600;
			color: #495057;
			padding: 8px 12px;
			font-size: 12px;
			text-transform: uppercase;
			letter-spacing: 0.5px;
		}

		.dataTables_wrapper .dataTable tbody td {
			padding: 8px 12px;
			border-bottom: 1px solid #f1f3f4;
			vertical-align: middle;
			line-height: 1.4;
		}

		.dataTables_wrapper .dataTable tbody tr:hover {
			background-color: #f8f9fa !important;
		}

		.dataTables_wrapper .dataTable tbody tr:nth-child(even) {
			background-color: #fcfcfc;
		}

		/* Footer filters styling */
		.dataTables_wrapper .dataTable tfoot th {
			padding: 4px 8px;
			background: #f1f3f4;
			border-top: 1px solid #dee2e6;
		}

		.dataTables_wrapper .dataTable tfoot select {
			width: 100%;
			font-size: 11px;
			padding: 2px 4px;
			border: 1px solid #ddd;
			border-radius: 3px;
			max-width: none;
		}

	/* Pagination improvements */
	.dataTables_wrapper .dataTables_paginate {
		float: right;
		margin-top: 10px;
	}

	.dataTables_wrapper .dataTables_info {
		float: left;
		margin-top: 15px;
		font-size: 12px;
		color: #6c757d;
	}

	/* Compact action buttons in tables */
	.dataTables_wrapper .btn-toolbar {
		margin: 0;
	}

		.dataTables_wrapper .btn-toolbar .btn {
			padding: 2px 6px;
			font-size: 13px;
			margin-right: 2px;
			border-radius: 3px;
		}

	.dataTables_wrapper .btn-xs {
		padding: 1px 5px;
		font-size: 10px;
	}

	/* Links in tables */
	.dataTables_wrapper a {
		color: #00A4C1;
		text-decoration: none;
	}

		.dataTables_wrapper a:hover {
			color: #007a91;
			text-decoration: underline;
		}

/* Panel heading with collapse improvements */
.panel-heading[data-toggle="collapse"] {
	cursor: pointer;
	user-select: none;
}

	.panel-heading[data-toggle="collapse"]:hover {
		background-color: rgba(0, 0, 0, 0.05) !important;
	}

.panel-heading .js-icon {
	transition: transform 0.3s ease;
}

.panel-heading[aria-expanded="false"] .js-icon {
	transform: rotate(-90deg);
}

/* Editable fields in tables */
.editable-opmerkingen {
	min-height: 20px;
	border-radius: 3px;
	font-size: 12px;
	transition: border-color 0.2s ease;
}

	.editable-opmerkingen:hover {
		border-color: #00A4C1 !important;
	}

	.editable-opmerkingen:focus {
		outline: none;
		border-color: #00A4C1 !important;
		box-shadow: 0 0 3px rgba(0, 164, 193, 0.3);
	}

/* Processing indicator improvements */
.dataTables_wrapper .dataTables_processing {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 200px;
	margin-left: -100px;
	margin-top: -25px;
	text-align: center;
	padding: 10px;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid #ddd;
	border-radius: 4px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Responsive improvements */
@media (max-width: 768px) {
	.dataTables_wrapper .dt-buttons {
		float: none;
		text-align: center;
		margin-bottom: 15px;
	}

	.dataTables_wrapper .dataTables_filter {
		float: none;
		text-align: center;
		margin-bottom: 15px;
	}

	.dataTables_wrapper .dataTables_info,
	.dataTables_wrapper .dataTables_paginate {
		float: none;
		text-align: center;
		margin-top: 10px;
	}

	.dataTables_wrapper .dataTable {
		font-size: 12px;
	}

		.dataTables_wrapper .dataTable thead th,
		.dataTables_wrapper .dataTable tbody td {
			padding: 6px 8px;
		}
}

/* Special styling for priority rows */
.dataTables_wrapper .dataTable tbody tr.prio-1 {
	border-left: 4px solid #dc3545;
}

.dataTables_wrapper .dataTable tbody tr.prio-2 {
	border-left: 4px solid #fd7e14;
}

.dataTables_wrapper .dataTable tbody tr.prio-3 {
	border-left: 4px solid #ffc107;
}

/* Clearfix for wrapper elements */
.dataTables_wrapper:after {
	content: "";
	display: table;
	clear: both;
}

/* Panel body padding adjustment when contains datatables */
.panel-body:has(.dataTables_wrapper) {
	padding: 15px 15px 5px 15px;
}

/* Alternative for older browsers */
.panel-body .dataTables_wrapper:first-child {
	margin-top: 0;
}

.panel-body .dataTables_wrapper:last-child {
	margin-bottom: 0;
}

/* ========================================
   MODERN PANEL STYLING IMPROVEMENTS
   ======================================== */

/* Modern panel design */
.panel {
	border: none;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	margin-bottom: 20px;
	overflow: visible !important;
	transition: box-shadow 0.3s ease;
}

	.panel:hover {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
	}

/* Modern panel headings */
.panel-heading {
	border-bottom: none;
	padding: 16px 20px;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.3px;
	border-radius: 8px 8px 0 0 !important;
}

/* Panel body improvements */
.panel-body {
	padding: 20px;
	background: #ffffff;
}

/* Specific panel type improvements */
.panel-warning {
	border: 1px solid #e3f2fd;
}

	.panel-warning > .panel-heading {
		background: linear-gradient(135deg, #00A4C1 0%, #0288aa 100%) !important;
		color: white;
		border: none;
	}

		.panel-warning > .panel-heading.orange {
			background: linear-gradient(135deg, #F08217 0%, #e67c00 100%) !important;
		}

		.panel-warning > .panel-heading.green {
			background: linear-gradient(135deg, #004E5A 0%, #003d47 100%) !important;
		}

		.panel-warning > .panel-heading.red {
			background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
		}

/* Panel collapse improvements */
.panel-heading[data-toggle="collapse"] {
	cursor: pointer;
	user-select: none;
	position: relative;
}

	.panel-heading[data-toggle="collapse"]:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(255, 255, 255, 0);
		transition: background 0.2s ease;
		pointer-events: none;
	}

	.panel-heading[data-toggle="collapse"]:hover:before {
		background: rgba(255, 255, 255, 0.1);
	}

/* Collapse icon improvements */
.panel-heading .js-icon {
	transition: transform 0.3s ease;
	font-size: 12px;
	opacity: 0.8;
}

.panel-heading[aria-expanded="false"] .js-icon {
	transform: rotate(-90deg);
}

/* ========================================
   MODERN FLAT TABLE DESIGN (LESS GREY)
   ======================================== */

/* Table wrapper to match panel styling */
.dataTables_wrapper {
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	margin: 0;
	padding: 0;
	overflow: visible !important;
	transition: box-shadow 0.3s ease;
}

	.dataTables_wrapper:hover {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
	}

	/* Table controls area styling to match panel header */
	.dataTables_wrapper .dt-buttons,
	.dataTables_wrapper .dataTables_filter {
		background: #f8fafb;
		margin: 0;
		padding: 12px 20px;
		border-bottom: 1px solid #e8f4f8;
	}

	.dataTables_wrapper .dt-buttons {
		float: left;
	}

	.dataTables_wrapper .dataTables_filter {
		float: right;
		text-align: right;
	}

	/* Modern table design to match panels */
	.dataTables_wrapper .dataTable {
		background: #ffffff;
		border: none;
		border-radius: 0;
		overflow: visible;
		font-size: 14px;
		margin: 0;
		width: 100% !important;
	}

		/* Table header styling to complement panels */
		.dataTables_wrapper .dataTable thead th {
			background: #ffffff !important;
			border-bottom: 2px solid #00A4C1 !important;
			border-top: none !important;
			border-left: none !important;
			border-right: none !important;
			font-weight: 600;
			color: #2c3e50 !important;
			padding: 16px 20px;
			font-size: 14px;
			text-transform: none;
			letter-spacing: 0.3px;
			position: relative;
		}

		/* Table body cells */
		.dataTables_wrapper .dataTable tbody td {
			border-bottom: 1px solid #f1f3f4;
			border-left: none;
			border-right: none;
			vertical-align: middle;
			line-height: 1.5;
			color: #2c3e50;
		}

		/* Enhanced row hover to match panel interactions */
		.dataTables_wrapper .dataTable tbody tr {
			transition: all 0.2s ease;
		}

			.dataTables_wrapper .dataTable tbody tr:hover {
				background-color: #f8fafb !important;
				box-shadow: inset 4px 0 0 #00A4C1;
			}

			.dataTables_wrapper .dataTable tbody tr:nth-child(even) {
				background-color: #fcfcfc;
			}

				.dataTables_wrapper .dataTable tbody tr:nth-child(even):hover {
					background-color: #f8fafb !important;
				}

	/* Footer area to match panel styling */
	.dataTables_wrapper .dataTables_info,
	.dataTables_wrapper .dataTables_paginate {
		background: #f8fafb;
		padding: 12px 20px;
		margin: 0;
		border-top: 1px solid #e8f4f8;
	}

	.dataTables_wrapper .dataTables_info {
		float: left;
		font-size: 13px;
		color: #6c757d;
		font-weight: 500;
	}

	.dataTables_wrapper .dataTables_paginate {
		float: right;
	}

	/* Footer filters in table */
	.dataTables_wrapper .dataTable tfoot th {
		padding: 12px 20px;
		background: #f8fafb;
		border-top: 1px solid #e8f4f8;
		border-bottom: none;
		border-left: none;
		border-right: none;
	}

	.dataTables_wrapper .dataTable tfoot select {
		background: white;
		border: 1px solid #dee2e6;
		border-radius: 4px;
		padding: 6px 10px;
		font-size: 12px;
		color: #495057;
		width: 100%;
		transition: border-color 0.2s ease;
	}

		.dataTables_wrapper .dataTable tfoot select:focus {
			outline: none;
			border-color: #00A4C1;
			box-shadow: 0 0 0 2px rgba(0, 164, 193, 0.1);
		}

	/* ========================================
   MODERN BUTTON AND CONTROL STYLING
   ======================================== */

	/* Export buttons with brand colors */
	.dataTables_wrapper .dt-buttons .dt-button {
		background: #ffffff;
		border: 1px solid #00A4C1;
		color: #00A4C1;
		font-size: 12px;
		padding: 6px 12px;
		margin-right: 4px;
		border-radius: 6px;
		font-weight: 500;
		transition: all 0.2s ease;
	}

		.dataTables_wrapper .dt-buttons .dt-button:hover {
			background: #00A4C1;
			color: white;
			transform: translateY(-1px);
			box-shadow: 0 2px 4px rgba(0, 164, 193, 0.3);
		}

	/* Search input improvements */
	.dataTables_wrapper .dataTables_filter input {
		border: 2px solid #e1e5e9;
		border-radius: 6px;
		padding: 8px 12px;
		font-size: 13px;
		transition: border-color 0.2s ease;
		background: #ffffff;
	}

		.dataTables_wrapper .dataTables_filter input:focus {
			outline: none;
			border-color: #00A4C1;
			box-shadow: 0 0 0 3px rgba(0, 164, 193, 0.1);
		}

/* ========================================
   RESPONSIVE AND ACCESSIBILITY IMPROVEMENTS
   ======================================== */

/* Better mobile responsiveness */
@media (max-width: 768px) {
	.panel {
		margin-bottom: 15px;
		border-radius: 6px;
	}

	.panel-heading {
		padding: 12px 16px;
		font-size: 13px;
	}

	.panel-body {
		padding: 16px;
	}

	.dataTables_wrapper .dataTable thead th,
	.dataTables_wrapper .dataTable tbody td {
		padding: 8px 12px;
		font-size: 12px;
	}
}

/* Accessibility improvements */
.panel-heading:focus,
.dataTables_wrapper .dt-buttons .dt-button:focus,
.dataTables_wrapper .dataTables_filter input:focus {
	outline: 2px solid #00A4C1;
	outline-offset: 2px;
}

/* Print optimizations */
@media print {
	.panel {
		box-shadow: none;
		border: 1px solid #ccc;
	}

	.dataTables_wrapper .dataTable thead th {
		background: #f5f5f5 !important;
		color: #000 !important;
	}
}

/* ========================================
   MODERN HOMEPAGE STYLING
   ======================================== */

/* Modern jumbotron design */
.jumbotron {
	border-radius: 12px !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	margin-bottom: 30px;
	position: relative;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

	.jumbotron:hover {
		transform: translateY(-2px);
		box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
	}

/* Modern row layout for dashboard cards */
.row {
	flex-wrap: wrap;
	justify-content: space-between;
	margin-left: -15px;
	margin-right: -15px;
}

/* Modern dashboard cards */
.dashboard-card {
	width: 31%;
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	margin-bottom: 20px;
	padding: 24px;
	transition: all 0.3s ease;
	border: 1px solid #f1f3f4;
	display: flex;
	flex-direction: column;
	min-height: 280px;
}

	.dashboard-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
		border-color: #e3f2fd;
	}

	/* Dashboard card styling */
	.dashboard-card > h2,
	.dashboard-card > p,
	.dashboard-card > .btn,
	.dashboard-card > .dropdown {
		position: relative;
		z-index: 2;
	}

	/* Modern card headers */
	.dashboard-card h2 {
		color: #2c3e50 !important;
		font-size: 20px;
		font-weight: 600;
		margin-bottom: 16px;
		letter-spacing: 0.3px;
		display: flex;
		align-items: center;
		gap: 12px;
		flex-shrink: 0;
	}

		.dashboard-card h2 i {
			color: #00A4C1;
			font-size: 18px;
			width: 24px;
			text-align: center;
		}

	/* Modern card content */
	.dashboard-card .home-block {
		color: #5a6c7d;
		font-size: 14px;
		line-height: 1.6;
		margin-bottom: 20px;
		padding: 0;
		flex-grow: 1;
	}

	/* Button container to stick to bottom */
	.dashboard-card p:last-of-type {
		margin-top: auto;
		margin-bottom: 0;
		flex-shrink: 0;
	}

	/* Modern badges in cards */
	.dashboard-card .badge {
		background: linear-gradient(135deg, #00A4C1 0%, #0288aa 100%) !important;
		color: white;
		padding: 4px 10px;
		border-radius: 12px;
		font-size: 12px;
		font-weight: 600;
		box-shadow: 0 2px 4px rgba(0, 164, 193, 0.3);
	}

	/* Special colored badges */
	.dashboard-card .swvcolor {
		color: #00A4C1;
		font-weight: 600;
	}

	/* Modern button styling for homepage */
	.dashboard-card .btn {
		border-radius: 8px !important;
		font-weight: 500;
		font-size: 13px;
		padding: 8px 16px;
		margin: 4px 4px 4px 0;
		transition: all 0.2s ease;
		border: none;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.dashboard-card .btn-orange {
		background: linear-gradient(135deg, #F08217 0%, #e67c00 100%) !important;
		color: white !important;
	}

		.dashboard-card .btn-orange:hover {
			transform: translateY(-2px);
			box-shadow: 0 4px 12px rgba(240, 130, 23, 0.4);
			background: linear-gradient(135deg, #e67c00 0%, #d96d00 100%) !important;
		}

	.dashboard-card .btn-blue {
		background: linear-gradient(135deg, #00A4C1 0%, #0288aa 100%) !important;
		color: white !important;
	}

		.dashboard-card .btn-blue:hover {
			transform: translateY(-2px);
			box-shadow: 0 4px 12px rgba(0, 164, 193, 0.4);
			background: linear-gradient(135deg, #0288aa 0%, #026d8a 100%) !important;
		}

	/* Modern dropdown styling */
	.dashboard-card .dropdown {
		margin-top: 8px;
	}

	.dashboard-card .dropdown-menu {
		border-radius: 8px;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
		border: 1px solid #e9ecef;
		padding: 8px 0;
	}

		.dashboard-card .dropdown-menu li a {
			padding: 8px 16px;
			color: #495057;
			transition: all 0.2s ease;
		}

			.dashboard-card .dropdown-menu li a:hover {
				background: #f8f9fa;
				color: #00A4C1;
				padding-left: 20px;
			}

/* Home link wrapper improvements */
.home-link {
	text-decoration: none;
	display: block;
}

	.home-link:hover {
		text-decoration: none;
	}

	.home-link .dashboard-card {
		cursor: pointer;
		height: 100%;
		width: 100%;
	}

/* Password change notice styling */
div[style*="padding-top:50px"] {
	background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
	border: 1px solid #ffc107;
	border-radius: 8px;
	padding: 20px;
	margin: 20px 0;
	box-shadow: 0 2px 8px rgba(255, 193, 7, 0.2);
}

	div[style*="padding-top:50px"] p {
		margin: 0;
		color: #856404;
		font-weight: 500;
	}

	div[style*="padding-top:50px"] a {
		color: #00A4C1;
		font-weight: 600;
		text-decoration: none;
	}

		div[style*="padding-top:50px"] a:hover {
			text-decoration: underline;
		}

/* What's new modal improvements */
.whats-new-modal {
	backdrop-filter: blur(4px);
}

.whats-new-content {
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.whats-new-header {
	background: linear-gradient(135deg, #00A4C1 0%, #0288aa 100%) !important;
}

/* Responsive improvements for homepage */
@media (max-width: 768px) {
	.row {
		flex-direction: column;
		margin-left: -15px;
		margin-right: -15px;
	}

	.dashboard-card {
		width: 100%;
		margin-bottom: 15px;
		padding: 20px 16px;
		border-radius: 8px;
		min-height: 200px;
	}

	.home-link {
		width: 100%;
	}

	.dashboard-card h2 {
		font-size: 18px;
		margin-bottom: 12px;
	}

	.dashboard-card .btn {
		padding: 6px 12px;
		font-size: 12px;
		margin: 2px;
		display: inline-block;
		width: auto;
	}

	.jumbotron {
		border-radius: 8px !important;
		margin-bottom: 20px;
	}
}

@media (max-width: 992px) and (min-width: 769px) {
	.dashboard-card {
		width: 48%;
		min-height: 240px;
	}

	.home-link {
		width: 48%;
	}
}

/* Animation for cards appearing */
@keyframes cardFadeIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.dashboard-card {
	animation: cardFadeIn 0.6s ease-out;
	animation-fill-mode: both;
}

	/* Stagger animation delays */
	.dashboard-card:nth-child(1) {
		animation-delay: 0.1s;
	}

	.dashboard-card:nth-child(2) {
		animation-delay: 0.2s;
	}

	.dashboard-card:nth-child(3) {
		animation-delay: 0.3s;
	}

	.dashboard-card:nth-child(4) {
		animation-delay: 0.4s;
	}

	.dashboard-card:nth-child(5) {
		animation-delay: 0.5s;
	}

	.dashboard-card:nth-child(6) {
		animation-delay: 0.6s;
	}

.dataTables_wrapper .dt-buttons, .dataTables_wrapper .dataTables_filter {
	background: #f8fafb00 !important;
}

.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate {
	background: #f8fafb00;
}