.signin-container {
	margin: 40px;
}

/* Event Block Style */
.event-block {
	background-color: white;
	border: 1px solid #ddd;
	border-radius: 8px;
	margin: 16px 20px 16px 20px;
	padding: 24px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	position: relative;
}

.event-block:hover {
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.event-block .event-title {
	font-family: Segoe UI;
	font-size: 20px;
	font-weight: 600;
	line-height: 28px;
	text-align: left;
	text-underline-position: from-font;
	text-decoration-skip-ink: none;
	color: #242424;
}



.event-block .event-description {
	font-family: Segoe UI;
	font-size: 12px;
	font-weight: 400;
	color: #616161;
	margin-top: 12px;
}




.event-block .event-datetime svg,
.event-block .event-location svg,
.event-block .event-registration-count svg {
	margin-right: 8px;
}

/* Title & Filter Section Styling */
.signin-container .title {
	font-family: Segoe UI;
	font-size: 32px;
	font-weight: 600;
	line-height: 40px;
	text-align: left;
	text-underline-position: from-font;
	text-decoration-skip-ink: none;
	color: #101828;

}

.signin-container .desc {
	font-family: Segoe UI;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	text-align: left;
	text-underline-position: from-font;
	text-decoration-skip-ink: none;
	padding-top: 4px;
	color: #101828;

}

/* Align Title, Filter, and Description in one row */
.events-header {
	margin-bottom: 32px;
}

.events-header .title,
.events-header .desc {
	margin-left: 20px;
}

/* Existing CSS about top filter and search section */
.event-filter {
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 0;
	padding-top: 32px;
	display: flex;
	align-items: center;
	/* Aligns all items vertically in the middle */
	justify-content: space-between;
	/* Aligns items between left and right */
	gap: 10px;
	/* Adds spacing between elements */
	width: 100%;
}

.event-filter span {
	margin: 0 10px;
	font-size: 1.2em;
	color: #242424;
}

.event-filter label {
	font-family: Segoe UI;
	font-size: 16px;
	font-weight: 600;
	line-height: 32px;
	text-align: left;
	color: #232560;
	margin-right: 16px;
}

.event-filter select {
	width: 142px;
	height: 32px;
	font-size: 14px;
	font-family: Segoe UI;
	line-height: 20px;
	text-align: left;
	color: #707070;
	border: none;
	border-bottom: 1px solid #616161;
	background-color: transparent;
	-webkit-appearance: none;
	/* Removes default styles for webkit browsers (Safari, Chrome) */
	-moz-appearance: none;
	/* Removes default styles for Firefox */
	appearance: none;
	/* Removes default styles for other browsers */
}


#filter-by option:hover {
	background-color: #f5f5f5;
	/* Change background on hover */
}


/* Existing CSS for the "All" button */
#all-btn {
	height: 32px;
	padding: 0px 10px 0px 10px;
	background: #8661C51A;
	font-family: Segoe UI;
	font-size: 14px;
	font-weight: 600;
	border-radius: 40px;
	/*border: 1px solid #232560 !important;*/
	color: #232560;
	/*border: none;*/
	margin-right: 10px;
	cursor: pointer !important;
	transition: background-color 0.3s, color 0.3s;
}

/* Existing CSS for the "Registered" button */
#my-events-btn {
	height: 32px;
	padding: 0px 10px 0px 10px;
	border-radius: 25px;
	/*border: 1px solid #232560;*/
	font-family: Segoe UI;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: #232560;
	background-color: #8661C51A;
	cursor: pointer !important;
	transition: background-color 0.3s, color 0.3s;
}

/* Active button styles */
#all-btn.active,
#my-events-btn.active {
	background-color: #232560 !important;
	color: white !important;
	border: 3px solid #9F80D0;
}

/* Adjustments for the search box */
.search-box {
	display: flex;
	align-items: center;
	width: calc(100% - 40px);
	/* Adjusts the width based on padding and margin */
	max-width: 280px;
	/* Maximum width of the search box */
	height: 44px;
	padding: 0px 10px;
	border-radius: 4px;
	background-color: #FFFFFF;
	border: 1px solid #FFFFFF;
	margin-left: auto;
	/* Aligns the search box to the right */
}

.search-box .search-icon {
	margin-right: 10px;
	/* Adds space between the icon and the input */
}

.search-box .search-input {
	width: 100%;
	height: 100%;
	border: none;
	outline: none;
	font-family: Segoe UI;
	font-size: 14px;
	color: #707070;
	background-color: transparent;
	padding: 0;
}

/* End CSS about top filter and search section */


.event-datetime {
	margin-top: 12px;
	font-family: Segoe UI;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	color: #8661C5;
	padding: 2px;
}

.event-location {
	font-family: Segoe UI;
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
	color: #424242;
	margin-top: 6px;
}

.event-registration-count {
	font-family: "Segoe UI";
	font-size: 12px;
	font-weight: 400;
	color: #616161;
}

/* Load More Button Styles */
.load-more-container {
	text-align: center;
	margin-top: 73px;
}

.load-more-btn {
	/*width: 192px;*/
	width: auto;
	height: 40px;
	padding: 8px 16px;
	border-radius: 4px;
	border: 1px solid #D1D1D1;
	background: #FFFFFF;
	font-family: Segoe UI;
	font-size: 16px;
	font-weight: 600;
	line-height: 22px;
	color: #242424;
	cursor: pointer !important;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.load-more-btn svg {
	margin-right: 6px;
	width: 12px;
	height: 12px;
	fill: #242424;
	/* arrow color */
}

.load-more-btn:focus,
.load-more-btn:active {
	border: 3px solid #9F80D0;
}


.styled-button {
	padding: 6px 12px;
	font-family: "Segoe UI";
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: #232560;
	border: 1px solid #8661C5;
	background-color: #ffff;
	border-radius: 4px;
	transition: background-color 0.3s ease;
	/* Smooth transition for background color */
}

.watch-online-button {
	padding: 6px 12px;
	font-family: "Segoe UI";
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: #232560;
	border: 1px;
	border-color: #8661C5;
	background-color: #ffff;
	/*border-radius: 4px;*/
	transition: background-color 0.3s ease;
	/* Smooth transition for background color */
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

/* On hover */
.styled-button:hover {
	background-color: #F3F0FA !important;
}

/* On click (active state) 
.styled-button:active {
	background-color: #232560 !important;
	color: #fff !important;
}  Optional: Change text color when clicked */

.styled-button:focus,
.styled-button:active {
	border: 3px solid #9F80D0;
}

/* Container for the buttons to align them horizontally */
.button-container {
	display: flex;
	/* Align buttons horizontally */
	justify-content: flex-start;
	/* Align buttons to the left */
	gap: 8px;
	/* Space between buttons */
	margin-top: 10px;
	/* Adjust space from other elements if needed */
}

/* Style for each button */
.almostfull,
.registered,
.eventfull {
	display: inline-flex;
	/* Use inline-flex for button layout inside container */
	align-items: center;
	/* Center align text or icons */
	justify-content: center;
	/* Center align text or icons */
	padding: 0px 4px;
	/* Adjust padding */
	cursor: default;
	/* Prevent pointer cursor */
	font-family: "Segoe UI";
	font-size: 10px;
	font-weight: 600;
	line-height: 14px;
	text-align: center;
}

/* Specific button styles */
.almostfull {
	background-color: #616161;
	border: 1px solid #616161;
	width: 62px;
	height: 20px;
}

.registered {
	background-color: #F1FAF1;
	border: 1px solid #9FD89F;
	width: 82px;
	height: 20px;
}

.eventfull {
	background-color: #FDF3F4;
	border: 1px solid #EEACB2;
	width: 82px;
	height: 20px;
}

/* Text color for each button */
.almostfull span {
	color: #FFFFFF;
}

.registered span {
	color: #0E700E;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.eventfull span {
	color: #B10E1C;
}




/* Ensure pagination items are aligned correctly */
.pagination {
	list-style-type: none;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
}

.pagination li {
	margin: 0 5px;
	/* Adjust the space between pagination items */
}

.pagination li a {
	display: inline-block;
	padding: 8px 15px;
	/* Ensure button size is consistent */
	text-decoration: none;
	margin-left: 10px;
	color: #0078d4;
	/* Microsoft blue color for text */
	font-weight: bold;
	text-align: center;
	line-height: 1.2;
	cursor: pointer !important;
}

.pagination li a.active {
	background-color: #0078d4;
	/* Active page has a blue background */
	color: white;
	/* Text turns white when active */
}

.pagination li.disabled span {
	color: #ccc;
	/* Disabled state (gray text) */
}

.pagination li.disabled span:hover {
	cursor: not-allowed;
	/* Show "not allowed" cursor on hover for disabled buttons */
}

.pagination li a:focus {
	outline: none;
	/* Remove outline on focus */
}

/* Specific styles for prev/next buttons */
.pagination li a[aria-label="Prev"],
.pagination li a[aria-label="Next"] {
	font-size: 16px;
	/* Adjust font size for prev/next buttons */
	font-weight: normal;
	text-transform: uppercase;
	/* Uppercase for prev/next text */
}

.pagination li a[aria-label="Prev"] {
	padding-left: 20px;
	/* Add padding to the left for prev button */
}

.pagination li a[aria-label="Next"] {
	padding-right: 20px;
	/* Add padding to the right for next button */
}

select>option.hidden_option {
	display: none;
}



.join-event-btn {
	/*width: 120px; height: 32px;*/

	min-height: 32px;
	max-height: 32px;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
	border: 1px solid #000;
	/* thin border */
	padding: 6px 12px 6px 12px;
	border-color: #D1D1D1;
	margin-top: 8px;
	background-color: #FFFFFF;
	font-family: 'Segoe UI';
	font-weight: 600;
	font-size: 14px;
	color: #000000;
}

.split-button {
	/*width: 24px;height: 32px;*/
	max-width: 24px;
	max-height: 32px;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	border: 1px solid #000;
	/* thin border */
	padding: 0px 6px 0px 6px;
	background-color: #FFFFFF;
	border-color: #D1D1D1;
	margin-top: 8px;
	font-family: 'Segoe UI';
	font-weight: 600;
	font-size: 14px;
	color: #000000;
}

/* Apply your custom styles for the select box */
.select2-container--default .select2-selection--single {
	position: static !important;
	width: 142px !important;
	/* Ensure the width is applied */
	font-size: 14px !important;
	/* Enforce font size */
	font-family: 'Segoe UI', sans-serif !important;
	/* Set font family */
	line-height: 20px !important;
	/* Set line height */
	text-align: left !important;
	/* Align text to the left */
	color: #707070 !important;
	/* Set text color */
	border: none !important;
	/* Remove any borders */
	border-bottom: 1px solid #616161 !important;
	/* Apply border at the bottom */
	background-color: transparent !important;
	/* Ensure transparent background */
	white-space: nowrap;
	/* Prevent the text from wrapping */
	text-overflow: ellipsis;
	/* Show ellipsis if the text overflows */
	overflow: hidden;
	/* Ensure no overflow */
}

/* Apply custom styles to the dropdown */
.select2-container--default .select2-dropdown {
	background-color: #fff !important;
	/* Set white background */
	border: 1px solid #616161 !important;
	/* Apply border to the dropdown */
	margin-top: 0 !important;
	/* Remove any margin on top */
	padding: 0 !important;
	/* Remove any padding */
	box-shadow: none !important;
	/* Remove box shadow if present */
}

/* Change the background color of disabled option */
.select2-container--default .select2-results__option[aria-disabled="true"] {
	color: #999 !important;
	/* Gray text for disabled */
	background-color: #f5f5f5 !important;
	/* Disabled option background */
}



/* Hover effect for the regular options */
.select2-container--default .select2-results__option--highlighted {
	background-color: #f5f5f5 !important;
	/* Hover background color */
	color: #000 !important;
	/* Text color */
}



/* Add a little space between the select and the dropdown */
.select2-container--default .select2-selection__arrow {
	position: absolute !important;
	right: 10px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	display: inline-block !important;
}



/* Ensure the select2 container respects the width */
.select2-container--default {

	width: 142px !important;
	/* Force the container to have the correct width */
}

/* Ensure font size consistency across rendered text */
.select2-container--default .select2-selection__rendered {
	font-size: 14px !important;
	/* Match the font size */
	color: #707070 !important;
	/* Ensure consistent text color */
	display: inline !important
}

/* Remove extra space caused by .selection span */
.select2-container--default .select2-selection__rendered .selection {
	margin: 0 !important;
	/* Remove any margin */
	padding: 0 !important;
	/* Remove any padding */
	position: relative !important;
	/* Ensure proper position handling */
}

/* Apply hover effect for the select box */
.select2-container--default .select2-selection--single:hover {
	background-color: transparent !important;
	/* Make sure it stays transparent */
}



/* Remove space inside the options list */
.select2-container--default .select2-results__options {
	padding: 0 !important;
	/* Remove any padding inside options */
	margin: 0 !important;
	/* Remove any margin between options */
}

/* Ensure no extra space around highlighted option */
.select2-container--default .select2-results__option {
	padding: 8px 10px !important;
	/* Adjust padding if necessary for better spacing */
}

/* Fix the issue caused by aria-hidden in dropdown-wrapper */
.select2-container--default .select2-dropdown-wrapper[aria-hidden="true"] {
	display: block !important;
	/* Ensure the dropdown is displayed correctly */
	margin-top: 0 !important;
	/* Remove unnecessary margin */
	padding-top: 0 !important;
	/* Remove extra padding */
}



/* Remove extra space caused by top and left of select2-container--open */
.select2-container--default.select2-container--open {
	/* top: 287.323px !important;  Remove any top offset */
	/* left: 322.594px !important; Remove any left offset */
	top: auto !important;
	/* Remove the fixed top position */
	left: auto !important;
	/* Remove the fixed left position */
	position: absolute !important;
}

/* Apply hover effect on the options */
.select2-container--default .select2-results__option--highlighted {
	background-color: #f5f5f5 !important;
	/* Apply hover background color */
	color: #000 !important;
	/* Ensure the text color stays black */
}

/* Center the arrow correctly and fix its width */
.select2-container--default .select2-selection__arrow {
	position: absolute !important;
	/* Make the arrow position absolute */
	right: 10px !important;
	/* Align it to the right */
	top: 50% !important;
	width: auto !important;
	/* Remove any fixed width */
	height: 15px !important;
	/* Adjust the height to match the size */
	transform: translateY(-50%) !important;
	/* Vertically center the arrow */
	display: inline-block !important;
	/* Ensure the arrow is displayed inline */
}