/* Dashboard Styling */

/*//////////////////////////////////////////////////////////////////
[ FONT ]*/


@font-face {
  font-family: Poppins-Regular;
  src: url('../fonts/poppins/Poppins-Regular.ttf'); 
}

@font-face {
  font-family: Poppins-Medium;
  src: url('../fonts/poppins/Poppins-Medium.ttf'); 
}

@font-face {
  font-family: Poppins-Bold;
  src: url('../fonts/poppins/Poppins-Bold.ttf'); 
}

@font-face {
  font-family: Poppins-SemiBold;
  src: url('../fonts/poppins/Poppins-SemiBold.ttf'); 
}


body {
	background-color: rgb(238, 238, 246);
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

p.notification-message {
	font-family: Poppins-Regular;
	font-size: 16px;
	line-height: 1.7;
	color: #fff;
	margin: 0px;
}

/* Header styling */
.header {
	background-color: #102e1d; /* Solid color */
	color: white;
	padding: 5px 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.profile-section {
	display: flex;
	align-items: center;
	gap: 10px;
}

.profile-section img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: #ccc;
}

.profile-info p {
	margin: 0;
}

.profile-info p.name {
	font-size: medium;
	font-weight: bold;
	color: white;
}

.header-icons {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 20px;
	color: white;
	cursor: pointer;
	position: relative;
}

.header-icons i {
	padding: 0 10px;
	border-radius: 4px;
	position: relative; /* To keep the badge within the icon div */
	transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for hover */
}

.header-icons i:hover {
	background-color: white;
	color: rgb(34, 36, 97); /* Same color as the header */
}

.header-icons .bi-bell {
	position: relative; /* Keeps the badge positioned relative to the icon */
}

.header-icons .bi-bell::after {
	content: '';
	position: absolute;
	top: 4px; /* Adjust this value as needed for alignment */
	right: 4px; /* Closer to the icon */
	width: 12px; /* Slightly smaller for better alignment */
	height: 12px;
	background-color: red;
	border-radius: 50%;
	border: 1.5px solid white;
	box-sizing: border-box; /* Ensures border is included in sizing */
}


.login-contents-container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
	background-color: rgb(28, 138, 67);
	padding: 20px;
}

.login-container {
	background-color: #ffffff; /* Background color */
	padding: 20px;
	border-radius: 8px; /* Border radius */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
	width: 100%;
	max-width: 700px;
}

.login-container h3 {
	text-align: center;
	margin-bottom: 20px;
}

.login-image {
	width: 80px; /* Adjust size of the image */
	height: 80px;
	object-fit: cover; /* Ensures proper image scaling */
	margin-bottom: 10px;
}

.form-control, .btn {
	border-radius: 5px; /* Button and input border radius */
}

.form-label
{
	color: #102e1d;
	font-weight: bold;
	display: block;
	float: left;
}


/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/* Content Container for Sections */
.content-container {
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	padding: 20px;
	margin: 20px auto;
	width: 90%;
}

/* Main Content Section */
.main-content, .reporting-container {
	margin-bottom: 20px;
	overflow-y: auto;
	max-height: 80vh; /* Adds a scrollable area if content is too large */
	border: 2px solid #102e1d;

}

/* Summary Section */
.summary-section {
	position: fixed;
	bottom: 0;
	left: 50%; 
	transform: translateX(-50%);
	width: 90%;
	padding: 10px;
	display: flex;
	justify-content: space-around;
	background-color: #ffffff;
	border: 2px solid #102e1d;
	box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

.summary-item {
	color: #002210;
	text-align: center;
	font-weight: bold;
	font-size: 14px;
	
}

.summary-item span {
	color: red;
	font-weight: bold;
}

/* Styling for input, select, and button to match heights */
#name-text, #name-select, #school-name-select, #payment-status-select, .form-select, .search_report_button {
	height: calc(2.5rem + 2px); /* Matches Bootstrap input and select heights */
	font-size: 0.85rem; /* Smaller font size for consistency */
	margin-bottom: 10px; /* Adds spacing between elements */
	background-color: rgb(238, 238, 246);

}

/* Neutral color for the search button */
.btn-neutral {
	background-color: #e0e0e0; /* Neutral gray */
	color: #333; /* Dark text for readability */
	border: 1px solid #ccc; /* Subtle border */
}

/* Optional hover effect for better user experience */
.btn-neutral:hover {
	background-color: #d6d6d6; /* Slightly darker on hover */
	color: #000; /* Darker text */
	border-color: #bbb; /* Slightly darker border */
}

/* Uniform margin and padding for spacing consistency */
.mb-3 > .col-md-2,
.mb-3 > .col-md-3 {
	padding-right: 8px;
	padding-left: 8px;
}

.row.mb-3 {
	margin-bottom: 40px; /* Spacing between search parameters and table */
	padding-bottom: 10px;
}

.title-line {
	margin-top: 20px;
	margin-bottom: 30px;
	border-top: 3px solid #555;
	margin-left: 0;
}

.header-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
	padding: 0 10px; /* Add padding if needed */
}

.button-container {
	display: flex;
	gap: 10px; /* Space between buttons */
}

.action_button {
	background-color: #e6e6e6; /* Neutral background color */
	color: #4a4a4a; /* Neutral text color */
	border: 1px solid #ccc;
	padding: 5px 10px; /* Smaller padding for compact button */
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.5px; /* Slight letter spacing */
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.action_button:hover {
	background-color: #d1d1d1; /* Darker shade on hover */
	color: #333;
}

.action_button:active{
	background-color: #bbb; /* Slightly darker on active */
	color: white;
}

.total-registrations {
	font-weight: bold; /* Make "Total Registrations:" bold */
	font-size: 0.9rem;
	color: #333;
}

#registration_count {
	color: red; /* Red color for visibility */
	font-weight: bold;
	font-size: 14px; /* Slightly larger for emphasis */
}

/* Table Container */
.table-container {
	width: 100%;
	overflow-x: auto; /* Enable horizontal scroll */
	overflow-y: auto; /* Enable vertical scroll */
	max-height: 45vh; /*Limit height for vertical scroll */
	border: 1px solid #ddd; /* Add border for the container */
	border-radius: 5px;
}

/* Updated Table Styling */
table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px; /* Adjusted font size for better fit */
	border-radius: 5px;
	border: 1px solid #ddd;
	border-spacing: 0;
}

table thead {
	background-color: #102e1d;
	color: white;
	position: sticky; /* Keep the header visible while scrolling */
	top: 0;
	z-index: 1;
}

table th, table td {
	padding: 10px 10px;
	border: 1px solid #ddd;

}
table td{
	text-align: left;
}

table th{
	text-align: center;
	font-size: small;
}

table tbody tr:nth-child(odd) {
	background-color: rgb(238, 240, 246);
}

table tbody tr:hover {
	background-color: rgb(230, 250, 231);;
}

table tbody tr.isattended td {
	background-color: rgba(28,138, 67, 1);
	color: #fff;
}



/* Styling for Select Inside Table Cells */
td select {
	font-size: 14px; /* Smaller font size for compact design */
	padding: 4px 6px; /* Minimized padding */
	border-radius: 4px; /* Slight rounding for consistency */
	border: 1px solid #ccc; /* Subtle border */
	background-color: #f8f9fa; /* Neutral background */
	color: #333; /* Dark text for readability */
	width: 100%; /* Full width for better alignment */
	height: auto; /* Adjust height for compact design */
	white-space: nowrap; /* Prevent text wrapping */
	transition: border-color 0.3s ease, background-color 0.3s ease; /* Smooth hover effects */
	box-shadow: none; /* Remove any default shadow */
}

/* Hover and Focus States */
td select:hover {
	border-color: #bdbdbd; /* Darker border on hover */
	background-color: #e9ecef; /* Slightly darker background */
}

td select:focus {
	border-color: #007bff; /* Blue outline on focus */
	outline: none; /* Remove default outline */
}

/* Actions Column Styling */
td button {
	font-size: 12px; /* Smaller text for better fit */
	padding: 4px 6px; /* Minimized padding */
	border-radius: 4px; /* Slight rounding for a clean look */
	cursor: pointer;
	border: 1px solid #ccc; /* Subtle border */
	background-color: #e9ecef; /* Neutral background color */
	color: #333; /* Dark text color for readability */
	white-space: nowrap; /* Prevent text wrapping */
	transition: all 0.3s ease; /* Smooth transition for hover effects */
	margin: 2px; /* Small spacing between buttons */
}

/* Hover Effect */
td button:hover {
	background-color: #d6d8db; /* Slightly darker background */
	border-color: #bdbdbd; /* Match border with hover state */
}

td {
    text-align: left; /* Align all text to the left */
    vertical-align: middle; /* Vertically center all content */
	font-weight: bold;
}

td select, td button {
    display: block; /* Make buttons and selects block-level for centering */
    margin: 0 auto; /* Horizontally center the elements */
}

/* Specific Styling for Action Buttons */
.attended-btn {
	background-color: #28a745; /* Green for confirm attendance */
	color: white;
}

.attended-btn:hover {
	background-color: #218838; /* Darker green on hover */
}

.edit-btn, .save-btn, .cancel-btn, .print-id-btn {
	background-color: #007bff; /* Blue for other actions */
	color: white;
}

.edit-btn{
	background-color: #e1e500; /* Blue for other actions */
	color: rgb(0, 0, 0);
}

.edit-btn:hover, .save-btn:hover, .cancel-btn:hover, .print-id-btn:hover {
	background-color: #0056b3; /* Darker blue on hover */
}



.cancel-btn {
	background-color: #dc3545; /* Red for cancel action */
}

.cancel-btn:hover {
	background-color: #c82333; /* Darker red on hover */
}

.action_button {
	background-color: #e0e0e0; /* Neutral button color */
	color: #333; /* Text color */
}

.action_button:hover {
	background-color: #d6d6d6; /* Slightly darker on hover */
}

/* Ensure modal content is centered and visually appealing */
.modal-dialog {
	max-width: 800px; /* Adjust modal width */
	margin: 1.75rem auto; /* Vertical and horizontal centering */
}

.modal-content {
	border-radius: 0.5rem; /* Rounded corners for modal */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
	background-color: #ffffff; /* Ensure content has a clean white background */
}

.modal-header {
	/* background-color: #f8f9fa; Light gray background for header */
	background-color: #102e1d; /* Solid color */
	border-bottom: 1px solid #dee2e6; /* Subtle border for distinction */


}

.modal-title {
	font-size: 1.25rem; /* Slightly larger font for the title */
	font-weight: bold;
	color: white;
}

.modal-body {
	padding: 1.5rem; /* Extra padding for a spacious layout */
	font-size: 1rem; /* Consistent font size */
	color: #102e1d; /* Neutral text color */
}

.modal-footer {
	background-color: #f8f9fa; /* Match the header for consistency */
	border-top: 1px solid #dee2e6;
	padding: 1rem; /* Comfortable spacing for footer buttons */
}

/* Buttons in the footer */
.modal-footer .btn {
	min-width: 100px; /* Uniform button width */
}

/* Adjust modal backdrop color */
.modal-backdrop {
	background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
}

/* Optional: Modal fade-in animation (Bootstrap default) */
.modal.fade .modal-dialog {
	transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.alert{
	padding: 0.55rem 0.65rem 0.55rem 0.75rem;
	border-radius:1rem;
	/* min-width:400px; */

}
.content{
	display: flex;
	align-items:center;
}
.icon{
	padding: 0.5rem;
	margin-right: 1rem;
	border-radius:39% 61% 42% 58% / 50% 51% 49% 50%;
	box-shadow:
	0px 3.2px 13.8px rgba(0, 0, 0, 0.02),
	0px 7.6px 33.3px rgba(0, 0, 0, 0.028),
	0px 14.4px 62.6px rgba(0, 0, 0, 0.035),
	0px 25.7px 111.7px rgba(0, 0, 0, 0.042),
	0px 48px 208.9px rgba(0, 0, 0, 0.05),
	0px 115px 500px rgba(0, 0, 0, 0.07)
}
.close{
	background-color: transparent;
	border:none;
	outline:none;
	transition:all 0.2s ease-in-out;
	padding: 0.75rem;
	border-radius:0.5rem;
	cursor:pointer;
	display: flex;
	align-items:center;
	justify-content: center;
}
.close:hover{
	background-color: #fff;
}

.success{
	background-color: rgba(62, 189, 97);
	border:2px solid #3ebd61;
}
.success .icon{
	background-color:#3ebd61;
}
.info{
	background-color: rgba(0, 108, 227);
	border:2px solid #006CE3;
}
.info .icon{
	background-color: #006CE3;
}
.warning{
	background-color: #ffc107;
	border:2px solid #EF9400;
}
.warning .icon{
	background-color: #EF9400;
}

.danger{
	background-color: #fb0018;
	border:2px solid #EF9400;
}
.danger .icon{
	background-color: #EC4D2B;
}

.btn-warning{
	border:2px solid #EF9400;

}


#loading_registration {
	display: none;
}

.custom-modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1000; /* On top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	background-color: rgba(0, 0, 0, 0.5); /* Black background with opacity */
}

/* Modal content */
.custom-modal-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #fff;
	padding: 20px;
	text-align: center;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.loading-gif {
	margin-bottom: 10px;
}

/* Loading message */
.modal-content p {
	font-size: 18px;
	color: #333;
	margin: 0;
}

#header-section {
	background-color: rgb(28, 138, 67);
	display: flex;
	flex-direction: column; /* Stack items vertically */
	position: sticky;
	top: 0;
	/* padding-block: 0.25rem; */
	box-shadow: -1px 11px 30px -8px rgba(0, 0, 0, 0.5);
	color: white; /* Set default text color to white */
	text-align: center;
	z-index: 99;
}

#header-div {
	margin: auto;
	max-width: 968px;
	display: flex;
	align-items: center;
	justify-content: center; /* Center items horizontally */
}

#org-name {
	padding-left: 1rem;
	color: gold;
	/* text-align: left; */
}

img {
	max-width: 60px;
	max-height: 60px;
	text-align: center;

}

.additional-info {
	/* margin-top: 1rem; Add spacing between org name and additional info */
}

.additional-info h2, .additional-info h4, .additional-info p {
	/* margin: 0.5rem 0;  */
	font-size: 16px;
	
}

.additional-info p {
	font-style: italic;
}

/* Responsive adjustments for mobile screens */
@media screen and (max-width: 768px) {

	table td{
		text-align: left;
		font-size: x-small;

	}
	
	table th{
		text-align: center;
		font-size: x-small;
	}

	.row {
		flex-direction: column; /* Stack elements vertically on smaller screens */
	}

	#name-text, #name-select, #school-select, #status, #search_button {
		width: 100%; /* Full width on mobile */
		font-size: smaller;
	}

	.main-content {
		margin-bottom: 20px;
		/* overflow-y: auto; */
		max-height: 70vh; /* Adds a scrollable area if content is too large */
	}

	.reporting-container {
		margin-bottom: 20px;
		/* overflow-y: auto; */
		max-height: 70vh; /* Adds a scrollable area if content is too large */
	}

	.header-container {
		flex-direction: column; /* Stack items vertically */
		align-items: flex-start; /* Align items to the left */
	}

	.button-container {
		flex-direction: column; /* Stack buttons vertically */
		width: 100%;
		margin-bottom: 10px;
	}

	.action_button {
		width: 100%; /* Make buttons full width on mobile */
		margin-bottom: 10px; /* Space between buttons */
	}

	.total-registrations {
		align-self: center; /* Align total registrations to the right */
		margin-top: 10px; /* Add space above total registrations */
	}

	td select {
		font-size: 9px; /* Slightly smaller font for mobile */
		padding: 3px 5px; /* Compact padding for smaller screens */
	}

	td button {
		font-size: 9px; /* Slightly smaller font for mobile */
		padding: 3px 5px; /* Reduced padding for tighter fit */
	}

	.table-container {
		max-height: 30vh;
	}

	.summary-section {
		flex-wrap: wrap;
		justify-content: center;
		/* padding: 20px; */
		/* gap: 10px; Space between items */
	}

	.summary-section .summary-item {
		width: 30%; /* Ensure items are spaced evenly */
		/* margin: 5px 0; */
		text-align: center;
		font-size: 10px; /* Smaller text for smaller screens */
	}

	.summary-item span {
		font-size: 10px; /* Smaller text for numbers */
	}

	/* Specific rows for better arrangement */
	.summary-item:nth-child(1), /* Registered */
	.summary-item:nth-child(2), /* Attended */
	.summary-item:nth-child(3) { /* Proxy */
		order: 1;
	}

	.summary-item:nth-child(4), /* Paid */
	.summary-item:nth-child(5), /* Unpaid */
	.summary-item:nth-child(6) { /* For Billing */
		order: 2;
	}

	#header-section {
        /* padding-block: 0.5rem; */
        text-align: center; /* Ensure everything is centered */
    }

    #header-div {
        flex-direction: column; /* Stack logo and text vertically */
        align-items: center; /* Center items */
    }

    img {
        max-width: 50px;
        max-height: 50px;
        margin-bottom: 0.5rem; /* Add space below the logo */
    }

    #org-name {
        padding-left: 0; /* Remove left padding */
        font-size: 14px; /* Reduce font size */
    }

    .additional-info h2, .additional-info h4, .additional-info p {
        font-size: 12px; /* Smaller font size for text */
        margin: 0.3rem 0; /* Adjust spacing between lines */
    }
}