@charset "utf-8";
/* CSS Document */
body {
	background: #f2f5f9 !important;
}
.sidebar {
	/*background: #0065b2 !important;*/
	  background: #fff !important;
	  border-right:1px solid #ccc;
	  
	  
}
.width-90Percent {
  width: 90%;
}
.navbar-brand{ padding:5px 20px !important;}
.navbar.navbar-inverse .navbar-brand, .sidebar .nav > li.active > a, .sidebar .nav > li.active > a:focus, .sidebar .nav > li.active > a:hover, .page-sidebar-minified .sidebar .nav > li.has-sub.active:focus > a, .page-sidebar-minified .sidebar .nav > li.has-sub.active:hover > a, .page-sidebar-minified .sidebar .nav > li.has-sub.active > a, .label.label-theme, .btn.btn-scroll-to-top {
	background: #215c71 !important;
}

.sidebar .nav>li.nav-profile {
	background: #0E5286 !important;
	  background: #fff !important;
	  color:#039;
}
.sidebar .nav > li > a {
	display: flex;
	align-items: center;
	text-decoration: none;
	font-weight: 500;
	border-radius: 10px;
	transition: all 0.3s ease;
	font-size: 14px;
	margin-bottom:20px;
	margin-left:15px;
}
.sidebar .nav>li>a .caret {
}
.pace-progress {
	background: #0065B2 !important;
}
.sidebar .sub-menu {
	background: #fff !important;
}
	.sidebar .sub-menu > li > a {
		color: #215c71 !important;
		background: #fff;
		border-radius:18px
	}
.sidebar .sub-menu:before {
	background: #fff !important;
}
.sidebar .sub-menu>li>a:before {
	color: #747A80 !important;
}

.sidebar .nav>li.expand>a, .sidebar .nav>li>a:focus, .sidebar .nav>li>a:hover {
	background: #215c71 !important;
	color:#fff !important;
}
.sidebar .sub-menu > li.active > a, .sidebar .sub-menu > li.active > a:focus, .sidebar .sub-menu > li.active > a:hover, .sidebar .sub-menu > li > a:focus, .sidebar .sub-menu > li > a:hover {
	color: #fff !important;
	background: #215c71
}
.sidebar .nav>li.nav-header {
	color:#333 !important;
}
.sidebar .nav>li.active>a, .sidebar .nav>li.active>a:focus, .sidebar .nav>li.active>a:hover {
	color:#fff !important;
}
.text-green {
	color: #259924!important;
}
.box {
	padding:10px;
	background-color:#fff;
	border:1px solid #ccd0d4;
	border-radius:3px;
}
.bg-black {
	background: #0065b2!important;
}
.btn.btn-green {
	-webkit-appearance: button;
	cursor: pointer;
	background: #215c71;
	border-radius: 22px;
	width:120px;
}
	.btn.btn-green.active, .btn.btn-green:active, .btn.btn-green:focus, .btn.btn-green:hover, .open .dropdown-toggle.btn-green {
		background: #205a6f;
		border-color: #0a0a0a;
	}
.login label {
	color: #E8E8E8 !important;
}
.theme-light-green {
	background-color: #DBF7E9;
}
.searchForms {
	padding:20px 10px;
	border-radius: 3px;
	border: 1px solid #BFE2FC;
}
.searchForms .form-horizontal .form-group {
	margin-right: 0px;
	margin-left: 0px;
}
.stats-info h4 {
	text-transform:capitalize;
}
.searchForms input[type=checkbox] {
	margin:10px 0 0;
}
.check_Group input[type=checkbox]{
	margin:1px -18px 0;
	}
.bg-themeLightBlue {
	background-color:#FFFFFF;
}
.bg-themeDarkBlue{
	background-color:#0065b2;
	}
.border-radius-3{ 
	border-radius:3px;
	-webkit-border-radius:3px;
	-o-border-radius:3px;
	-ms-border-radius:3px;
	-moz-border-radius:3px;
}
/*.sidebar {
	width: 60px;
	overflow: hidden;
	transition: width 0.3s ease;
	background-color: #ffffff;
	border: 2px solid #215c71;
	border-radius: 20px;
	min-height: 50vh;
	left: 10px;
	top: 56px;
	height: 50vh;
	padding: 10px 0;
}

	.sidebar:hover {
		width: 200px;
	}

.sidebar-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.menu-link {
	display: flex;
	align-items: center;
	padding: 12px 15px;
	color: #215c71;
	text-decoration: none;
	transition: background 0.3s, color 0.3s;
}

	.menu-link:hover {
		background-color: #f0f8ff;
		border-radius: 8px;
		color: #007bff;
	}
*/


/* Sidebar container */
/*.sidebar {
	width: 230px;
	background: #f8fafc;
	border: 1px solid #0f4c5c;
	border-radius: 45px;
	padding: 10px 0;
	height:500px;
	margin-left:6px;
	margin-top:100px;
}*/

	/* Main nav items */
	/*.sidebar .nav > li {
		position: relative;
		list-style: none;
	}*/

		/* Main links */
		/*.sidebar .nav > li > a {
			display: block;
			padding: 10px 20px;
			color: #0f4c5c;
			text-decoration: none;
			font-weight: 600;
			cursor: pointer;
			transition: all 0.3s ease;
		}*/

			/* Hover effect for main link */
			/*.sidebar .nav > li > a:hover {
				background: linear-gradient(to bottom, #0f4c5c, #195b70);
				color: white;
				border-radius: 8px;
			}*/

		/* Submenu (hidden by default) */
		/*.sidebar .nav > li > ul {
			display: none;
			padding-left: 25px;
			background: #fff;
		}*/

		/* Show submenu on hover */
		/*.sidebar .nav > li:hover > ul {
			display: block;
		}*/

		/* Submenu links */
		/*.sidebar .nav > li > ul > li > a {
			display: block;
			padding: 8px 15px;
			color: #0f4c5c;
			text-decoration: none;
			font-size: 14px;
		}*/

		/*.sidebar .nav > li > ul > li > a:hover {
                text-decoration: underline;
            }*/
		/* Main menu links */
		/*.sidebar .nav > li > a {
			display: block;
			padding: 10px 15px;*/ /* Reduced padding for a balanced height */
			/*margin: 5px 15px;*/ /* Gives some breathing space around the item */
			/*color: #0f4c5c;
			text-decoration: none;
			font-weight: 600;
			cursor: pointer;
			transition: all 0.3s ease;
			border-radius: 26px;*/ /* Slightly rounded corners */
			/*text-align: center;*/ /* Keep text centered */
		/*}*/

			/* Hover effect - neat and subtle */
			/*.sidebar .nav > li > a:hover {
				background: linear-gradient(to bottom, #0f4c5c, #195b70);
				color: #ffffff;*/
				/*  width:139px;
                height:40px;*/
				/*border-radius: 26px;
				transform: none;*/ /* Remove lift-up animation if it feels large */
				/*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);*/ /* Soft shadow for a cleaner hover */
			/*}*/


/* Scrollbar style */
/*.slimScrollBar {
	width: 6px;
	background-color: #ccc;
	border-radius: 10px;
	opacity: 0.7;
}*/

/* Apply to the container */
/*.sidebar {
	overflow-y: auto;
	scrollbar-width: thin;
	overflow-x: hidden;
	scrollbar-color: #ccc transparent;
	padding-bottom: 10px;*/ /* adds a small gap at the bottom */
/*}*/

	/* WebKit browsers (Chrome, Edge, Safari) */
	/*.sidebar::-webkit-scrollbar {
		width: 6px;
	}

	.sidebar::-webkit-scrollbar-thumb {
		background-color: #ccc;
		border-radius: 10px;
		margin-bottom: 10px;*/ /* creates space at the bottom */
	/*}

		.sidebar::-webkit-scrollbar-thumb:hover {
			background-color: #999;
		}
.icon {
	font-size: 18px;
	min-width: 25px;
	text-align: center;
	transition: transform 0.3s ease;
}

.menu-item {
	margin-left: 10px;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.sidebar:hover .menu-item {
	opacity: 1;
}*/

.selected_List ul {
	padding-left: 15px;
}
.selected_List ul li:first-child {
	cursor:auto;
}
.selected_List ul li {
	list-style:none;
	padding:3px;
	font-weight:600;
	margin-top:5px;
}
.list-unstyled li{
	padding:3px;}
/*.panel-inverse>.panel-heading{
	background-color:#0E5286 !important;
	}*/
table.tablefieldWidth{ table-layout:fixed;}	
table.tablefieldWidth tr th, table.tablefieldWidth tr td{width: 150px !important; }
@media (min-width: 768px)
.modal-dialog {
  width: 750px !important;
}
.errMsg
{
    font-size:11px;
    color:Red;
    font-size:"x-small";
}

.pgg{
    background-color:#fff !important;
   
   padding:2px;
   margin:1% auto;
    float:left;  
   
}
.pgg a{
  margin:auto 1%;
   
      background-color:#444;
      padding:5px 10px 5px 10px;
      color:#fff;
      text-decoration:none;
      -o-box-shadow:1px 1px 1px #111;
      -moz-box-shadow:1px 1px 1px #111;
      -webkit-box-shadow:1px 1px 1px #111;
      box-shadow:1px 1px 1px #111;
     
}

.pgg a:hover{
    background-color:#215c71;
    color:#fff;
}

.pgg span{
    background-color:#215c71;
    color:#fff;
     -o-box-shadow:1px 1px 1px #111;
      -moz-box-shadow:1px 1px 1px #111;
      -webkit-box-shadow:1px 1px 1px #111;
      box-shadow:1px 1px 1px #111;

  
    padding:5px 10px 5px 10px;
}

/*.sidebar {
    width: 280px;*/ /* Increased width for more space */
    /*background: linear-gradient(180deg, #f8fafc 0%, #e8f4f8 100%);
    border: 2px solid #0f4c5c;
    border-radius: 25px;
    padding: 25px 0;
    height: 580px;*/ /* Increased height */
    /*margin-left: 15px;
    margin-top: 120px;
    box-shadow: 0 8px 25px rgba(15, 76, 92, 0.15);
    position: relative;
    overflow: hidden;
}*/

/* Add a subtle pattern overlay */
/*.sidebar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(#0f4c5c22 1px, transparent 1px);
    background-size: 15px 15px;
    opacity: 0.3;
    pointer-events: none;
}*/

/* Main nav items */
/*.sidebar .nav > li {
    position: relative;
    list-style: none;
    margin: 12px 20px;*/ /* More space between items */
/*}*/

/* Main links */
/*.sidebar .nav > li > a {
    display: flex;
    align-items: center;
    padding: 16px 20px;*/ /* More padding for larger click area */
    /*color: #0f4c5c;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.4s ease;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(15, 76, 92, 0.1);
    box-shadow: 0 2px 8px rgba(15, 76, 92, 0.08);
    position: relative;
    overflow: hidden;
}*/

/* Add subtle hover effect background */
/*.sidebar .nav > li > a::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.6s ease;
}

.sidebar .nav > li > a:hover::before {
    left: 100%;
}*/

/* Hover effect for main link */
/*.sidebar .nav > li > a:hover {
    background: linear-gradient(135deg, #0f4c5c, #1a6b82);
    color: white;
    border-radius: 16px;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(15, 76, 92, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.2);
}*/

/* Submenu (hidden by default) */
/*.sidebar .nav > li > ul {
    display: none;
    padding-left: 30px;
    background: transparent;
    margin-top: 8px;
}*/

/* Show submenu on hover */
/*.sidebar .nav > li:hover > ul {
    display: block;
    animation: fadeInUp 0.3s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}*/

/* Submenu links */
/*.sidebar .nav > li > ul > li {
    margin: 6px 0;
}

.sidebar .nav > li > ul > li > a {
    display: flex;
    align-items: center;
    padding: 12px 18px;
    color: #0f4c5c;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 12px;
    border: 1px solid rgba(15, 76, 92, 0.05);
    transition: all 0.3s ease;
}

.sidebar .nav > li > ul > li > a:hover {
    background: rgba(15, 76, 92, 0.1);
    color: #0f4c5c;
    transform: translateX(5px);
    border-left: 3px solid #0f4c5c;
}*/

/* Icon styles */
/*.icon {
    font-size: 20px;
    min-width: 30px;
    text-align: center;
    transition: transform 0.3s ease;
    margin-right: 12px;
}

.sidebar .nav > li > a:hover .icon {
    transform: scale(1.1);
}*/

/* Menu text styles */
/*.menu-item {
    margin-left: 5px;
    white-space: nowrap;
    opacity: 1;*/ /* Always visible in this design */
    /*transition: all 0.3s ease;
    font-size: 15px;
}

.sidebar .nav > li > a:hover .menu-item {
    transform: translateX(3px);
}*/

/* Scrollbar styles */
/*.slimScrollBar {
    width: 6px;
    background: linear-gradient(to bottom, #0f4c5c, #1a6b82);
    border-radius: 10px;
    opacity: 0.8;
}*/

/* Apply to the container */
/*.sidebar {
    overflow-y: auto;
    scrollbar-width: thin;
    overflow-x: hidden;
    scrollbar-color: #0f4c5c transparent;
    padding-bottom: 20px;
}*/

/* WebKit browsers (Chrome, Edge, Safari) */
/*.sidebar::-webkit-scrollbar {
    width: 8px;
}

.sidebar::-webkit-scrollbar-track {
    background: rgba(15, 76, 92, 0.1);
    border-radius: 10px;
    margin: 15px 0;
}

.sidebar::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #0f4c5c, #1a6b82);
    border-radius: 10px;
    margin: 5px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #0c3d4a, #155a6e);
}*/

/* Active state for current page */
/*.sidebar .nav > li > a.active {
    background: linear-gradient(135deg, #0f4c5c, #1a6b82);
    color: white;
    box-shadow: 0 4px 15px rgba(15, 76, 92, 0.3);
}*/


/*.sidebar {
	width: 225px;
	background:#215c71 !important;
	border: none;
	border-radius: 50px;
	padding: 42px 6px;
	height: 600px;
	margin-left: 9px;
	margin-top: 105px;
	box-shadow: 0 10px 40px rgba(15, 76, 92, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.8);
	position: relative;
	overflow: hidden;
	backdrop-filter: blur(10px);
}*/

	/* Glass morphism effect */
	/*.sidebar::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.8) 100%);
		border: 1px solid rgba(255, 255, 255, 0.5);
		border-radius: 20px;
		pointer-events: none;
	}*/

	/* Modern accent line */
	/*.sidebar::after {
		content: "";
		position: absolute;
		top: 30px;
		left: 0;
		width: 4px;
		height: 120px;
		background: linear-gradient(180deg, #0f4c5c, #215c71, #2a7088);
		border-radius: 0 10px 10px 0;
	}*/

	/* Main nav items */
	/*.sidebar .nav > li {
		position: relative;
		list-style: none;
		margin: 15px 5px;
	}*/

		/* Main links */
		/*.sidebar .nav > li > a {
			display: flex;
			align-items: center;
			padding: 20px 3px;
			color: #215c71;
			text-decoration: none;
			font-weight: 600;
			cursor: pointer;
			transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
			border-radius: 16px;
			background: rgba(255, 255, 255, 0.7);
			border: 1px solid rgba(255, 255, 255, 0.8);
			box-shadow: 0 4px 15px rgba(15, 76, 92, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
			position: relative;
			overflow: hidden;
		}*/

			/* Subtle gradient overlay on hover */
			/*.sidebar .nav > li > a::before {
				content: "";
				position: absolute;
				top: 0;
				left: -100%;
				width: 100%;
				height: 100%;
				background: linear-gradient(90deg, transparent, rgba(33, 92, 113, 0.1), transparent);
				transition: left 0.6s ease;
			}

			.sidebar .nav > li > a:hover::before {
				left: 100%;
			}*/

			/* Hover effect for main link */
			/*.sidebar .nav > li > a:hover {
				background: linear-gradient(135deg, #0f4c5c, #215c71);
				color: white;
				border-radius: 16px;
				transform: translateY(-3px) scale(1.02);
				box-shadow: 0 12px 30px rgba(15, 76, 92, 0.25), 0 4px 15px rgba(33, 92, 113, 0.3);
				border: 1px solid rgba(255, 255, 255, 0.3);
			}*/

		/* Submenu (hidden by default) */
		/*.sidebar .nav > li > ul {
			display: none;
			padding-left: 35px;
			background: transparent;
			margin-top: 10px;
		}*/

		/* Show submenu on hover */
		/*.sidebar .nav > li:hover > ul {
			display: block;
			animation: slideDown 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
		}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-15px);
	}

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

/* Submenu links */
/*.sidebar .nav > li > ul > li {
	margin: 8px 0;
}

	.sidebar .nav > li > ul > li > a {
		display: flex;
		align-items: center;
		padding: 14px 20px;
		color: #4a5568;
		text-decoration: none;
		font-size: 14px;
		font-weight: 500;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 50px;
		border: 2px solid rgba(255, 255, 255, 0.8);
		transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
		position: relative;
		overflow: hidden;
	}*/

		/* Your preferred hover color for submenu */
		/*.sidebar .nav > li > ul > li > a:hover {
			background: #215c71 !important;
			color: white !important;
			transform: translateX(8px);
			box-shadow: 0 6px 20px rgba(33, 92, 113, 0.25), 0 2px 8px rgba(33, 92, 113, 0.2);
			border: 1px solid rgba(255, 255, 255, 0.3);
		}*/

		/* Add a small indicator for submenu items */
		/*.sidebar .nav > li > ul > li > a::before {
			content: "";
			position: absolute;
			left: -5px;
			top: 50%;
			transform: translateY(-50%);
			width: 0;
			height: 0;
			border-top: 4px solid transparent;
			border-bottom: 4px solid transparent;
			border-left: 4px solid #215c71;
			opacity: 0;
			transition: all 0.3s ease;
		}

		.sidebar .nav > li > ul > li > a:hover::before {
			opacity: 1;
			left: 10px;
		}*/

/* Icon styles */
/*.icon {
	font-size: 22px;
	min-width: 35px;
	text-align: center;
	transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	margin-right: 15px;
	opacity: 0.8;
}

.sidebar .nav > li > a:hover .icon {
	transform: scale(1.15) rotate(5deg);
	opacity: 1;
}*/

/* Menu text styles */
/*.menu-item {
	margin-left: 5px;
	white-space: nowrap;
	opacity: 1;
	transition: all 0.3s ease;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.2px;
}

.sidebar .nav > li > a:hover .menu-item {
	transform: translateX(5px);
}*/

/* Scrollbar styles - Modern */
/*.sidebar {
	overflow-y: auto;
	scrollbar-width: thin;
	overflow-x: hidden;
	scrollbar-color: #215c71 transparent;
	padding-bottom: 25px;
}*/

	/* WebKit browsers (Chrome, Edge, Safari) */
	/*.sidebar::-webkit-scrollbar {
		width: 6px;
	}

	.sidebar::-webkit-scrollbar-track {
		background: rgba(33, 92, 113, 0.08);
		border-radius: 10px;
		margin: 20px 0;
	}

	.sidebar::-webkit-scrollbar-thumb {
		background: linear-gradient(to bottom, #215c71, #2a7088);
		border-radius: 10px;
		border: 1px solid rgba(255, 255, 255, 0.3);
	}

		.sidebar::-webkit-scrollbar-thumb:hover {
			background: linear-gradient(to bottom, #1a5266, #24657c);
		}*/

	/* Active state for current page */
	/*.sidebar .nav > li > a.active {
		background: linear-gradient(135deg, #215c71, #2a7088);
		color: white;
		box-shadow: 0 8px 25px rgba(33, 92, 113, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
		transform: translateY(-1px);
	}*/

		/* Subtle pulse animation for active item */
		/*.sidebar .nav > li > a.active::after {
			content: "";
			position: absolute;
			top: 50%;
			right: 20px;
			transform: translateY(-50%);
			width: 8px;
			height: 8px;
			background: #fff;
			border-radius: 50%;
			animation: pulse 2s infinite;
		}

@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
	}

	70% {
		box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
	}
}*/

/* Responsive design for smaller screens */
/*@media (max-width: 768px) {
	.sidebar {
		width: 260px;
		margin: 20px auto;
		height: auto;
		max-height: 500px;
	}
}*/


.sidebar {
	width: 225px;
	background: #fff!important;
	border: none;
	border-radius: 50px;
	padding: 42px 6px;
	height: 600px;
	margin-left: 9px;
	margin-top: 105px;
	box-shadow: 0 10px 40px rgba(15, 76, 92, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.8);
	position: relative;
	overflow: hidden;
	backdrop-filter: blur(10px);
}

	/* Glass morphism effect */
	.sidebar::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.8) 100%);
		border: 1px solid rgba(255, 255, 255, 0.5);
		border-radius: 20px;
		pointer-events: none;
	}

	/* Modern accent line */
	/*.sidebar::after {
		content: "";
		position: absolute;
		top: 30px;
		left: 0;
		width: 4px;
		height: 120px;
		background: linear-gradient(180deg, #0f4c5c, #215c71, #2a7088);
		border-radius: 0 10px 10px 0;
	}*/

	/* Main nav items */
	.sidebar .nav > li {
		position: relative;
		list-style: none;
		margin: 15px 5px;
	}

		/* Main links */
		.sidebar .nav > li > a {
			display: flex;
			align-items: center;
			padding: 20px 3px;
			color: #215c71 !important;
			text-decoration: none;
			font-weight: 300;
			cursor: pointer;
			transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
			border-radius: 36px;
			background: rgba(255, 255, 255, 0.7);
			border: 1px solid rgba(255, 255, 255, 0.8);
			box-shadow: 0 4px 15px rgba(15, 76, 92, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
			position: relative;
			overflow: hidden;
		}

			/* Subtle gradient overlay on hover */
			.sidebar .nav > li > a::before {
				content: "";
				position: absolute;
				top: 0;
				left: -100%;
				width: 100%;
				height: 100%;
				background: linear-gradient(90deg, transparent, rgba(33, 92, 113, 0.1), transparent);
				transition: left 0.6s ease;
			}

			.sidebar .nav > li > a:hover::before {
				left: 100%;
			}

			/* Hover effect for main link */
			.sidebar .nav > li > a:hover {
				background: linear-gradient(135deg, #0f4c5c, #215c71);
				color: white;
				border-radius: 16px;
				transform: translateY(-3px) scale(1.02);
				box-shadow: 0 12px 30px rgba(15, 76, 92, 0.25), 0 4px 15px rgba(33, 92, 113, 0.3);
				border: 1px solid rgba(255, 255, 255, 0.3);
			}

		/* Submenu container with connecting line */
		.sidebar .nav > li > ul {
			display: none;
			padding-left: 20px;
			background: transparent;
			margin-top: 8px;
			position: relative;
		}

			/* Connecting line from main menu to submenu */
			.sidebar .nav > li > ul::before {
				content: "";
				position: absolute;
				left: 15px;
				top: -8px;
				width: 2px;
				height: calc(100% + 8px);
				background: linear-gradient(to bottom, #215c71, #2a7088);
				opacity: 0.6;
				border-radius: 2px;
			}

		/* Show submenu on hover with smooth animation */
		.sidebar .nav > li:hover > ul {
			display: block;
			animation: slideDownFade 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
		}

@keyframes slideDownFade {
	from {
		opacity: 0;
		transform: translateY(-10px) scale(0.95);
	}

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

/* Submenu items */
.sidebar .nav > li > ul > li {
	margin: 10px 13px;
	position: relative;
}

	/* Submenu links with modern design */
	.sidebar .nav > li > ul > li > a {
		display: flex;
		align-items: center;
		padding: 12px 15px 12px 25px;
		color: #215c71 !important ;
		text-decoration: none;
		font-size: 14px;
		font-weight: 300;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 30px;
		/*border: 1px solid rgba(255, 255, 255, 0.9);*/
		transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
		position: relative;
		overflow: hidden;
		backdrop-filter: blur(10px);
		/*box-shadow: 0 2px 8px rgba(15, 76, 92, 0.1);*/
	}

		/* Dot connector for submenu items */
		/* Dot connector for submenu items */
		/* Square connector for submenu items */
		.sidebar .nav > li > ul > li > a::before {
			content: "";
			position: absolute;
			left: 12px;
			top: 50%;
			transform: translateY(-50%) rotate(45deg);
			width: 5px;
			height: 5px;
			background: #215c71;
			transition: all 0.3s ease;
			opacity: 0.6;
		}
		/* Hover effect for submenu items */
		.sidebar .nav > li > ul > li > a:hover {
			background: #215c71 !important;
			color: white !important;
			transform: translateX(8px);
			/*box-shadow: 0 6px 20px rgba(33, 92, 113, 0.25), 0 4px 12px rgba(33, 92, 113, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);*/
			/*border: 1px solid rgba(255, 255, 255, 0.3);*/
			padding-left: 30px;
		}

			/* Dot animation on hover */
			.sidebar .nav > li > ul > li > a:hover::before {
				background: white;
				opacity: 1;
				transform: translateY(-50%) scale(1.3);
				box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
			}

/* Icon styles */
.icon {
	font-size: 22px;
	min-width: 35px;
	text-align: center;
	transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	margin-right: 15px;
	opacity: 0.8;
}

.sidebar .nav > li > a:hover .icon {
	transform: scale(1.15) rotate(5deg);
	opacity: 1;
}

/* Menu text styles */
.menu-item {
	margin-left: 5px;
	white-space: nowrap;
	opacity: 1;
	transition: all 0.3s ease;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.2px;
}

.sidebar .nav > li > a:hover .menu-item {
	transform: translateX(5px);
}

/* Scrollbar styles - Modern */
.sidebar {
	overflow-y: auto;
	scrollbar-width: thin;
	overflow-x: hidden;
	scrollbar-color: #215c71 transparent;
	padding-bottom: 25px;
}

	/* WebKit browsers (Chrome, Edge, Safari) */
	.sidebar::-webkit-scrollbar {
		width: 6px;
	}

	.sidebar::-webkit-scrollbar-track {
		background: rgba(33, 92, 113, 0.08);
		border-radius: 10px;
		margin: 20px 0;
	}

	.sidebar::-webkit-scrollbar-thumb {
		background: linear-gradient(to bottom, #215c71, #2a7088);
		border-radius: 10px;
		border: 1px solid rgba(255, 255, 255, 0.3);
	}

		.sidebar::-webkit-scrollbar-thumb:hover {
			background: linear-gradient(to bottom, #1a5266, #24657c);
		}

	/* Active state for current page */
	.sidebar .nav > li > a.active {
		background: linear-gradient(135deg, #215c71, #2a7088);
		color: white;
		box-shadow: 0 8px 25px rgba(33, 92, 113, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
		transform: translateY(-1px);
	}

		/* Subtle pulse animation for active item */
		.sidebar .nav > li > a.active::after {
			content: "";
			position: absolute;
			top: 50%;
			right: 20px;
			transform: translateY(-50%);
			width: 8px;
			height: 8px;
			background: #fff;
			border-radius: 50%;
			animation: pulse 2s infinite;
		}

@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
	}

	70% {
		box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
	}
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
	.sidebar {
		width: 260px;
		margin: 20px auto;
		height: auto;
		max-height: 500px;
	}
}

/* New: Arrow indicator for parent menu items */
.sidebar .nav > li.has-submenu > a::after {
	content: "�";
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%) rotate(90deg);
	font-size: 18px;
	color: #215c71;
	transition: all 0.3s ease;
	opacity: 0.7;
}

.sidebar .nav > li.has-submenu > a:hover::after {
	color: white;
	transform: translateY(-50%) rotate(90deg) scale(1.2);
}

/* New: Smooth transition for all elements */
.sidebar .nav > li > a,
.sidebar .nav > li > ul > li > a {
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* your original sidebar style (kept unchanged) */
/* .sidebar {
    overflow-y: auto;
    scrollbar-width: thin;
    overflow-x: hidden;
    scrollbar-color: #215c71 transparent;
    padding-bottom: 25px;
} */

/* ✔ Updated sidebar with border */
.sidebar {
	overflow-y: auto;
	scrollbar-width: thin;
	overflow-x: hidden;
	scrollbar-color: #215c71 transparent;
	padding-bottom: 25px;
	/* ⭐ added border to match first image */
	border: 2px solid #215c71;
	border-radius: 50px; /* keep rounded shape */
}