/* Error Modal Overlay (same as modal-overlay, but can override z-index if needed) */
.modal-error {
	z-index: 99999;
	display: flex;
}

/* Error Modal Content */
.modal-error-content {
	background: #fff;
	padding: 30px 25px;
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.2);
	min-width: 300px;
	text-align: center;
	margin: auto;
	pointer-events: auto;
}

.modal-error-title {
	margin-bottom: 20px;
	color: #c0392b;
}

.modal-error-btn {
	background: #c0392b;
	color: #fff;
	border: none;
	padding: 8px 18px;
	border-radius: 5px;
	cursor: pointer;
}
/* Modal Overlay (shared for both modals) */
.modal-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0,0,0,0.4);
	z-index: 9999;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	pointer-events: auto;
}

/* Success Modal Overlay (higher z-index) */
.modal-success {
	z-index: 99999;
	display: flex;
}

/* Modal Content */
.modal-content {
	background: #fff;
	padding: 30px 25px;
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.2);
	min-width: 300px;
	text-align: center;
	margin: auto;
}

/* Success Modal Content */
.modal-success-content {
	background: #fff;
	padding: 30px 25px;
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.2);
	min-width: 300px;
	text-align: center;
	margin: auto;
	pointer-events: auto;
}

.modal-title {
	margin-bottom: 20px;
}

.modal-success-title {
	margin-bottom: 20px;
	color: #27ae60;
}

.modal-actions {
	margin-top: 25px;
	display: flex;
	justify-content: center;
	gap: 20px;
}

.modal-delete-btn {
	background: #c0392b;
	color: #fff;
	border: none;
	padding: 8px 18px;
	border-radius: 5px;
	cursor: pointer;
}

.modal-cancel-btn {
	background: #ccc;
	color: #333;
	border: none;
	padding: 8px 18px;
	border-radius: 5px;
	cursor: pointer;
}

.modal-success-btn {
	background: #27ae60;
	color: #fff;
	border: none;
	padding: 8px 18px;
	border-radius: 5px;
	cursor: pointer;
}
* {
	   padding: 0;
	   margin: 0;
	   box-sizing: border-box;
	   font-family: arial, sans-serif;
}
html, body {
	   min-height: 100vh;
	   overflow: auto;
}
.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 30px;
	background: #0e0e0f;
	color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	height: 60px;
}
.label{
	color: #2e2d2d;
}
.u-name {
	font-size: 20px;
	padding-left: 17px;
	align-items: center;
}
.u-name b {
	color: #127b8e;
}
.header i {
	font-size: 30px;
	cursor: pointer;
	color: #fff;
}
/*.header i:hover {
	color: #127b8e;
}*/
.header .notification {
	position: relative;
	cursor: pointer;
}
.header .notification span{
	position: absolute;
	top: 5px;
	left: 5px;
	background: #C80000;
	padding: 1px;
	border-radius: 50%;
}
.header .notification:hover i{
	color: #127b8e;
}
.notification-bar {
	display: none;
	width: 90%;
	max-width: 300px;
	position: absolute;
	top: 60px;
	right: 0;
	background: #eee;
	padding: 5px;
	border: 1px solid #262931;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.notification-bar.open-notification {
    display: block;
}
.notification-bar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.notification-bar li.notification-item {
    border-bottom: 1px solid #eee;
}
.notification-bar li.notification-item:last-child {
    border-bottom: none;
}
.notification-bar li.notification-item a {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem;
    text-decoration: none;
    color: #333;
}
.notification-bar li.notification-item:hover a {
    background: #f9f9f9;
}
.notif-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    color: #127b8e;
}
.notif-body {
    flex: 1;
}
.notif-title {
    font-weight: bold;
    margin-bottom: 0.25rem;
}
.notif-message {
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}
.notif-time {
    font-size: 0.8rem;
    color: #777;
}
.notification-item.empty .notif-message {
    text-align: center;
    color: #777;
}
.open-notification {
	display: block;
}

hr.new4 {
	display: block;
  border: 1px solid rgb(161, 152, 152);
  width: 225px;
}

.user-p {
	text-align: center;
	padding-left: 10px;
	padding-top: 25px;
}
.user-p img {
	width: 100px;
	border-radius: 50%;
}
.user-p h4 {
	color: #0f0f0f;
	padding: 5px 0;

}
.side-bar {
	position: fixed;
	top: 60px; /* height of header */
	left: 0;
	width: 250px;
	height: calc(100vh - 60px);
	background: #ddd8d8;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	min-height: 93.4vh;
	transition: 500ms width;
	overflow-y: auto;
	z-index: 999;
}
.body {
	   display: flex;
	   font-family: 'Helvetica Neue', Helvetica, Arial;
	   /* background-image: url("../img/1.jpg");   
	   background-size: cover;
	   background-position: center; */
	   margin-top: 60px; /* height of header */
	   /* overflow: auto; */
}

.side-bar ul {
	margin-top: 20px;
	list-style: none;
	
}
.side-bar ul li {
	font-size: 16px;
	padding: 15px 0px;
	padding-left: 20px;
	transition: 500ms background;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.side-bar ul li:hover {
	background: #818383;
	
}


 .side-bar ul li a {
	text-decoration: none;
	color: #272727;
	cursor: pointer;
	letter-spacing: 1px;
}

.side-bar ul li.active a {
	color: #000000 !important; /* Highlight active item */
	font-weight: bold;
}

.side-bar ul li.active a i {
	color: #000000 !important;
}
/* .side-bar ul .active:hover {
	background: transparent;
} */

.side-bar ul li a i {
	display: inline-block;
	padding-right: 10px;
	font-size: 23px;
}
#navbtn {
	display: inline-block;
	margin-left: 70px;
	font-size: 20px;
	transition: 500ms color;
}
#checkbox {
	display: none;
}
#checkbox:checked ~ .body .side-bar {
	width: 60px;
}
#checkbox:checked ~ .body .side-bar .user-p{
	visibility: hidden;
}
#checkbox:checked ~ .body .side-bar a span{
	display: none;
}
.main-container{
	background: #727070;
	padding: 20px 40px;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	width: 100%;
	max-width: 700px;   
}
.login-body {
	background-image: url("../img/1.jpg");
	background-size : cover;
	background-position : center;
	background-repeat : no-repeat;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
}
.dashboard-body {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: auto; /* Allows scrolling only if needed */
}


h3{
	text-align: center;
	/* font-weight: bold; */
}
.login-body form {
	background-color : #ffffff;
	opacity : .8;
	max-width:450px;
	width: 90%;
	border-radius: 9px;
}

.section-1 {
	padding: 30px;
	margin-left: 250px; /* width of sidebar */
}


.section-1 .title {
	margin-bottom: 10px;
}
.section-1 .title a{
	text-decoration: none;
	display: inline-block;
	padding-left: 10px;
	border: none;
	background: #00CF22;
	padding: 10px 15px;
	color: #fff;
	font-size: 16px;
	border-radius: 5px;
	cursor: pointer;
	outline: none;
	transition: background 1s;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.section-1 .title-3 {
	margin-bottom: 10px;
}
.btn{
	width: 50px;
}
.section-1 .title-3{
	text-decoration: none;
	display: inline-block;
	/* padding-left: 10px; */
	border: none;	
	background: #00CF22;
	padding: 10px 15px;
	color: #fff;
	font-size: 16px;
	border-radius: 5px;
	cursor: pointer;
	outline: none;
	transition: background 1s;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	
}
.section-1 .title-3 .btn:hover{
	opacity: .6;
}
.section-1 .title-3 a{
	display: inline-block;
	/* margin-left: 10px; */
}
.border-right {
	border-right: 1px solid #b5b6b8 !important;
	box-shadow: #000;
}

.section-1 {
	   width: 100%;
	   min-height: 100vh;
	   background: #f2f6fc;
	  
	   display: flex;
	   gap: 5px;
	   flex-direction: column;
}
.form-1 {
	display: grid;
	grid-template-columns: repeat(2, 1fr); /* Creates two equal columns */
	gap: 30px; /* Adds space between items */
	width: 70%;
	align-content: center;
}
.form-2 {
	width: 50%;
	max-width: 500px;
}
.section-1 .title a:hover{
	opacity: .6;
}



.section-2 {
	padding: 30px;
	margin-left: 250px; /* width of sidebar */
}
.section-2 .title {
	margin-bottom: 10px;
}
.section-2 .title a{
	text-decoration: none;
	display: inline-block;
	padding-left: 10px;
	border: none;
	background: #00CF22;
	padding: 10px 15px;
	color: #fff;
	font-size: 16px;
	border-radius: 5px;
	cursor: pointer;
	outline: none;
	transition: background 1s;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.section-2 .title-2 {
	margin-bottom: 10px;
}

.section-2 .title-2{
	text-decoration: none;
	display: inline-block;
	padding-left: 10px;
	border: none;	
	background: #00CF22;
	padding: 10px 15px;
	color: #fff;
	font-size: 16px;
	border-radius: 5px;
	cursor: pointer;
	outline: none;
	transition: background 1s;	
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.section-2 .title-2 .btn:hover{
	opacity: .6;
}
.section-2 .title-2 a{
	display: inline-block;
	margin-left: 10px;
}

.section-2 {
	width: 45%;
	background: #f2f6fc;
	display: flex;
	gap: 30px;
	flex-direction: column;
}
.section-2 .title a:hover{
	opacity: .6;
}

.main-table, .main-table tr, .main-table th, .main-table td {
	border: 1px solid #cacaca;
	border-collapse: collapse;
	padding: 5px;
}

.main-table {
	width: 90%;
	margin-top: 5px;
	font-size: 9px;
	border-radius: 5px;
}

.main-table th {
	font-size: 15px;
	color: #ffffff;
	background: #2980b9;
}

.main-table td {
	font-size: 12px;
}



.delete-btn{
	text-decoration: none;
	display: inline-block;
	padding-left: 10px;
	border: none;
	background: #E00051;
	padding: 10px 15px;
	color: #fff;
	font-size: 16px;
	border-radius: 5px;
	cursor: pointer;
	outline: none;
	transition: background 1s;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.delete-btn:hover{
	opacity: .6;
}

.edit-btn{
	text-decoration: none;
	display: inline-block;
	padding-left: 10px;
	border: none;
	background: #006CE0;
	padding: 10px 15px;
	color: #fff;
	font-size: 16px;
	border-radius: 5px;
	cursor: pointer;
	outline: none;
	transition: background 1s;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.edit-btn:hover{
	opacity: .6;
}

.input-holder lable {
	display: block;
	margin-bottom: 5px;
	
}
.input-1 {
	border: 2px solid #ccc;
	width: 100%;
	padding: 10px;
	font-size: 15px;
	outline: none;
	border-radius: 5px;
	display: block;

}
.ro-search-input{
	border: 2px solid #ccc;
	width: 300px;
	padding: 5px;
	font-size: 15px;
	outline: none;
	border-radius: 5px;
}
.ro-filter-select{
	border: 2px solid #ccc;
	width: 200px;
	padding: 5px;
	font-size: 15px;
	outline: none;
	border-radius: 5px;
}

.input-2 {
	border: 2px solid #ccc;
	width: 300px; /* set a specific width */
	padding: 10px;
	font-size: 15px;
	outline: none;
	border-radius: 5px;
	display: block;
	margin: 0 auto;

}

.input-1:focus{
	border-color: #555;
}
.danger {
	background: #FF98AA;
	color: #B20008;
	padding: 10px;
	margin-bottom: 10px;
}
.success {
	background: #80CE91;
	color: #009D22;
	padding: 10px;
	margin-bottom: 10px;
}
.dashboard {
	display: flex;
	gap: 15px;
	width: 100%;
	flex-wrap: wrap;
	justify-content: space-evenly;
}
.dashboard-item {
	flex: 1; /* Allows items to grow and take up available space */
	min-width: 150px;
	text-align: center;
	background: #ffffff;
	border-radius: 10px;
	box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.15);
	/* width: 200px; */
	padding: 30px 40px;
	margin-bottom: 20px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.dashboard-item:hover {
	transform: scale(1.05); /* Slight zoom effect */
	box-shadow: 6px 6px 18px rgba(0, 0, 0, 0.2); /* Shadow deepens */
}


.db-personnel{
	background-color: #808080;
}
.db-docs{
	background-color: #ffa500;
}
.db-overdue{
	background-color: #e81500;
}
.db-due{
	background-color: #dc3545;
}
.db-pending{
	background-color: #f4a100;
}
.db-in_progress{
	background-color: #0000cd;
}
.db-complete{
	background-color: rgb(0, 172, 106)
}

#dashboard-item-1{
	background:  #9b5feb;
}
.dashboard-item i{	
	display: block;
	color: #ebe5e5;
	font-size: 30px;
	margin-bottom: 5px;
}
.dashboard-item span{
	display: block;
	color: #ffffff;
	font-weight: bold;
}
.brown-color{
	color: rgb(0, 0, 0);
	
}
.fa {
	font-size: 20px;
}
textarea {
  width: 300px;
  height: 50px;
}



/* Pagination Styles */
.pagination {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin: 1rem 1rem 0 0;
}
.pagination a {
    padding: 0.5rem 0.75rem;
    background: #f1f1f1;
    color: #333;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.3s, color 0.3s;
}
.pagination a:hover {
    background: #ddd;
}
.pagination a.active {
    background: #127b8e;
    color: #fff;
}

#chart-container {
	display: flex;
	justify-content: left;
	gap: 20px;
	align-items: center;
	padding: 20px;
}

#chart {
	width: 500px;
	height: 400px;
	display: block !important;
	/* border: 2px solid #333; Adds a solid border */
	border-radius: 10px; /* Optional: Rounds the corners */
	padding: 10px; /* Adds spacing inside the border */
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3); /* Adds a shadow */
}
#program-bar-chart {
	width: 500px;
	height: 400px;
	display: block !important;
	/* border: 2px solid #333; Adds a solid border */
	border-radius: 10px; /* Optional: Rounds the corners */
	padding: 10px; /* Adds spacing inside the border */
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3); /* Adds a shadow */
}

.container {
	display: flex;
	gap: 20px;
}

.form-section {
	flex: 2;
}

.preview-section {
	flex: 1;
	border-left: 2px solid #ddd;
	padding-left: 20px;
	background: #f9f9f9;
	padding: 15px;
}

.file-preview {
	max-width: 100%;
	height: auto;
}

iframe.file-preview {
	width: 100%;
	height: 750px;
	border: none;
}

#drop-area {
	background-color: #e0dede;
	border: 2px dashed #999;
	padding: 20px;
	cursor: pointer;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
	height: 100px;
	}

	#preview div {
	margin: 10px;
	position: relative;
	}

	.remove-btn {
	position: absolute;
	top: 0;
	right: 0;
	background: red;
	color: #fff;
	border: none;
	cursor: pointer;
	border-radius: 25%;
	}

	.toast {
	position: fixed;
	top: 80px;
	right: 20px;
	background-color: #323232;
	color: #fff;
	padding: 15px 20px;
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	opacity: 0;
	transform: translateX(-20px);
	transition: all 0.4s ease;
	z-index: 9999;
	font-family: sans-serif;
	}

.toast.show {
  opacity: 1;
  transform: translateX(0);
}

.toast.hidden {
  display: none;
}