html {
	direction: rtl;
	lang: ar;
}

body {
	background-color: white; /* Changed to white */
	color: black; /* Changed text color to black for better contrast */
}

table {
	width: 100%;
	border-collapse: collapse;
	color: black; /* Changed text color to black */
	direction: rtl; /* Ensure the table direction is RTL */
}

th, td {
	text-align: center; /* Center-align the headers */
	padding: 8px;
	border-bottom: 1px solid #ddd;
}

th {
	cursor: pointer;
	background-color: black; /* #4CAF50; */
	color: white;
	text-align: center; /* Center-align the headers */
}

th:hover {
	background-color: black; /* #3e8e41; */
}

td {
	direction: rtl; /* Ensure the table direction is RTL */
	text-align: right; /* right-align the headers */
}

/* Styles for filter container */
#filterContainer {
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

label[for="filterType"] {
	color: black; /* Changed to black */
	margin-right: 10px;
}

#filterType, #filterInput, #todayScheduleBtn, #expandAllBtn, #calendar, #home, #ashoora, #moharram {
	padding: 5px;
	border-radius: 5px;
}

#filterInput {
	width: 400px;
}

#todayScheduleBtn, #expandAllBtn, #calendar, #home, #ashoora, #moharram {
	padding: 8px 4px;
	border: none;
	background-color: black; /* #4CAF50; */
	color: white;
	cursor: pointer;
}

.collapsed  {
	display: none;
}

.expanded-row.collapsed {
	display: none;
}

.expand  {
	cursor: pointer;
}

.expandable.expanded td {
	border-bottom: none;
}

.expandable, .expanded-row {
	cursor: pointer; /* Change to pointer cursor */
}

.select2-container--default .select2-selection--single {
	border: 1px solid #aaa;
	border-radius: 4px;
	height: 40px;
	line-height: 38px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 38px;
	right: 5px;
}

.select2-container .select2-selection--single .select2-selection__rendered {
	padding-left: 8px;
}

.select2-container .select2-search--dropdown .select2-search__field {
	padding: 4px;
}

.select2-dropdown {
	border: 1px solid #aaa;
	border-radius: 4px;
}

/* Modal styles */
.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
	padding-top: 60px;
}

.modal-content {
	background-color: #fefefe;
	margin: 5% auto; /* 15% from the top and centered */
	padding: 20px;
	border: 1px solid #888;
	width: 30%; /* Could be more or less, depending on screen size */
}

.close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
}

.close:hover,
.close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}

#startDatePicker, #endDatePicker {
	width: 100%;
	padding: 12px;
	margin: 8px 0;
	box-sizing: border-box;
	direction: rtl;
}

/* Other existing styles */

/* Styles for filter container */
#filterContainer {
	margin-bottom: 20px; /* Create a gap between the table and the filter */
	display: flex;
	align-items: center;
	justify-content: flex-start; /* Adjusts alignment to the left */
}

/* Styles for filter label */
label[for="filterType"] {
	color: black; /* Changed to black */
	margin-right: 10px;
}

/* Styles for filter select */
#filterContainer {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#filterType {
	padding: 5px;
	border-radius: 5px;
}

/* Styles for filter input */
#filterInput {
	padding: 5px;
	border-radius: 5px;
	width: 50%; /* Adjust width as needed */
	text-align: right; /* Align text to the right */
}

.custom-button {
	background-color: white;
	color: green;
	border: 2px solid green;
	padding: 10px 20px;
	cursor: pointer;
	margin-left: 10px;
}

.custom-button:hover {
	background-color: black; /* green; */
	color: white;
}

/* Styles for Today's Schedule button */
#todayScheduleBtn {
	padding: 8px 16px;
	border: none;
	border-radius: 5px;
	background-color: darkgrey /* #4CAF50; /* Green */
	color: white;
	cursor: pointer;
	margin-left: 10px;
}

/* Style for collapsed rows */
.collapsed {
	display: none;
}

.expand {
	cursor: pointer;
}

/* Mobile specific styles */
@media (max-width: 768px) {
	.hidden-mobile {
		display: none;
	}

	.mobile-only {
		display: block;
	}
}

@media (min-width: 769px) {
	.mobile-only {
		display: none;
	}
}