th.sorting_disabled {background-color:#fff;color:#000;text-align:center;}

ul.social-nav {
	padding: 0;
	margin: 0;
	font-size: 0;
}


ul.social-nav li {
	list-style: none;
	padding: 0;
	margin: 0 0 0 10px;
	display: inline-block;
	float: right;
}

ul.social-nav li a {
	background: #fff;
	display: inline-block;
	line-height: 40px;
	font-size: 22px;
	text-align: center;
	border-radius: 50%;
	color: #008A98;
	height: 40px;
	width: 40px;
	transition: all 0.3s ease-in-out
}

ul.social-nav li a:hover {
	opacity: .7
}

footer ul.social-nav li a {
	color: #000
}

footer a {
	color:#fff;
}


.blue-highlight {
background-color: #f0f0f0 !important; // !important may be necessary to override default DataTable styles
color: white; // You might want to change the text color for better readability
}

footer a:hover {
	color:#31a9e0;
}

footer a.logo {
	text-align:left !important;
}

.bg-sdccd {
	background-color: #31a9e0; }

.bg-sdccdfooter {
	background-color: #000000; }

.navbar-brand img {
	height: 5rem;
	display: block; }

.bg-legend {
	background-color: #31a9e0 !important;
}

.bg-legend h3 {
	color: #fff !important;
}

.custom-input-group > * {
	/*flex: 1 1 auto;*/
}

/* Custom styles for the form-select elements */
.form-select {
	height: 45px; /* Adjust the height as needed */
}

.form-control {
	height: 45px; /* Adjust the height as needed */
}

.input {
	height: 45px;
}

/* Optional: Adjust the height of the input-group-text to match the select */
.input-group-text {
	height: 45px; /* Make sure this matches the height of your form-select */
	align-items: center; /* Aligns the text vertically */
	display: flex;
}

/* To ensure flush alignment */
.input-group .form-select:not(:first-child) {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.input-group .form-select:not(:last-child) {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.input-group-text:not(:last-child) {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.input-group-text:not(:first-child) {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

/* Custom styles for Select2 containers */
.select2-container--default .select2-selection--single {
	height: 45px; /* Adjust the height as needed */
	line-height: 44px; /* Align the text vertically in the middle */
	border-radius: 0; /* Remove border-radius for flush appearance */
}

/* Adjust the height and line-height of the text within the Select2 dropdown */
.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 44px; /* Aligns the text vertically */
}

/* Adjust the position of the Select2 dropdown arrow */
.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 44px; /* Match the height of the dropdown */
}

/* Optional: If you want to adjust the dropdown menu's font size or padding */
.select2-dropdown {
	font-size: 1rem; /* Example to adjust font size */
	/* You can add padding or other styles as needed */
}

/* Adjust the Select2 search field height, if you use it */
.select2-container--default .select2-search--dropdown .select2-search__field {
	height: 36px; /* Adjust as needed */
	line-height: 36px; /* Adjust for vertical alignment */
}

/* Additional styles for focus and hover states, if needed */
.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--single:hover {
	border-color: #80bdff; /* Example color for focus/hover */
	/* Add any additional styles for focus/hover states */
}

/* so that input groups do not wrap on large screens */
@media (min-width: 576px) {
	.custom-input-group {
		flex-wrap: nowrap;
	}
}


/* Custom Material Design styles */
.checkbox-list {
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
	margin-top: 10px;
}

/* Add Material Design specific styles here */
/* Example: */
.dropdown-menu {
	border-radius: 4px;
	box-shadow: 0 2px 4px rgba(0,0,0,.2);
}

/* Custom styles for the popover (if needed) */
.popover .popover-header {
	background-color: #31a9e0;
	color: white;
}

/* Buttons */
.btn-active-light {
	background-color: #f8f9fa; /* Light background color */
	color: #000; /* Text color */
}

.btn-active-primary {
	/* Primary color for hover or active state */
	&:hover, &:active {
		background-color: #31a9e0; /* Adjust the color as needed */
		color: #fff; /* Text color on hover or active state */
	}
}

.btn.btn-bg-info {
	border-color: var(--bs-info);
	background-color: #31a9e0;
	font-weight: bold;
}

.btn.btn-info {
	border-color: var(--bs-info);
	background-color: #31a9e0;
}

.btn.btn-bg-info:active,
.btn.btn-bg-info:hover,
.btn.btn-bg-info:focus {
	border-color: var(--bs-info);
	background-color: #80bdff;
}

.btn.btn-bg-ceinfo {
	border-color: var(--bs-info);
	background-color: #53247F;
}

.btn.btn-bg-ceinfo:active,
.btn.btn-bg-ceinfo:hover,
.btn.btn-bg-cenfo:focus {
	border-color: var(--bs-info);
	background-color: #80bdff;
}

.btn-active-color-primary {
	/* Primary color for hover or active state */
	&:hover, &:active {
		background-color: #31a9e0; /* Adjust the color as needed */
		color: #fff; /* Text color on hover or active state */
	}
}

.btn-active-light:active,
.btn-active-light:hover,
.btn-active-light:focus {
	background-color: #f8f9fa; /* Adjust as per your color scheme */
	color: #fff;
}

.btn-active-color-primary:active,
.btn-active-color-primary:hover,
.btn-active-color-primary:focus {
	background-color: #31a9e0; /* Adjust as per your color scheme */
	color: #fff;
}

/* Additional styling for the icon, if needed */
.btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Add specific styles for the icon here */
}

/* Styling for pop-over screens */

/* Custom CSS */
.menu-sub-dropdown.menu-column {
	width: 350px; /* Default width */
	padding-bottom: 20px;
	color: #000;
}

.form-check-label {
	color: #000;
	font-weight: bold;
}

@media (max-width: 576px) { /* Bootstrap small breakpoint */
	.menu-sub-dropdown.menu-column {
		width: 100%; /* Full width on small screens */
	}
}

.responsive-input-group {
	display: flex;
	flex-direction: column;
}

.input-group-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-bottom: 10px; /* Spacing between rows */
}

.input-group-text {
	flex: 0 0 auto; /* Fixed size for label */
}

.form-select {
	flex: 1; /* Takes the remaining space */
}

/* Larger screens: input group layout */
@media (min-width: 768px) { /* Adjust the breakpoint as needed */
	.responsive-input-group {
		flex-direction: row;
	}

	.input-group-item {
		flex: 1; /* Equal width for both dropdowns */
		display: flex;
		flex-direction: row;
		width: 100%;
	}

	.input-group-text, .form-select {
		width: auto; /* Auto width for larger screens */
	}
}


.bg-legend {
	background-color: #31a9e0 !important;
}

.bg-celegend {
	background-color: #53247F !important;
}

.btn.btn-infoce {
	color: #fff;
	border-color: #099;
	background-color: #53247F !important;
}

.bg-legend h3 {
	color: #fff !important;
}

.bg-celegend {
	background-color: #53247F !important;
}

.btn.cebtn-info {
	color: #fff;
	border-color: #099;
	background-color: #53247F !important;
}

.bg-celegend h3 {
	color: #fff !important;
}

.cebanner {
	background-color: #53247F;
}

.bg-sdcce {
	background-color: #53247F; }

.fas.fa-calendar-alt {
	font-size: 2em;
	margin-right: 20px;
}

.banner-content h2 {
	margin: 0;
	font-size: 1.5em;
}

.banner-content p {
	margin: 5px 0 0;
	font-size: 1em;
}

.registration-banner {
	display: flex;
	align-items: center;
	justify-content: center; /* Added for horizontal alignment of content */
	background-color: #53247F;
	color: white;
	padding: 20px;
	border-radius: 4px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	font-family: 'Roboto', sans-serif;
	width: 80%; /* Set a width for the banner */
	margin: 0 auto; /* Center the banner horizontally */
}

/* Begin DataTables CSS */

/* Header align */
table.dataTable thead th, table.dataTable thead td, table.dataTable tfoot th, table.dataTable tfoot td {
	text-align: center;
}

/* child styling */
.table.gs-7 td:last-child, .table.gs-7 th:last-child {
	padding-right: 1.75rem;
	text-align: left;
	font-weight: normal;
}

/* RESPONSIVE Version */

.stacktable.large-only { display: table; !important}
.stacktable.small-only { display: table; !important}

@media (max-width: 800px) {
  .stacktable.large-only { display: table; !important}
  .stacktable.small-only { display: table; !important}
}

@media 
only screen and (max-width: 800px)
 {

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr {
		display: block;
    	margin: auto;
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	.table td:first-child, .table th:first-child {
		margin-left: 0px !important;
		padding-left: 0em !important;
	}

	/* content row in child */
	.table-striped>tbody>tr:nth-of-type(odd)>* {
		--bs-table-color-type: var(--bs-table-striped-color);
		--bs-table-bg-type: #fff;
	}

	table.table-bordered.dataTable th:last-child, table.table-bordered.dataTable th:last-child, table.table-bordered.dataTable td:last-child, table.table-bordered.dataTable td:last-child {
		border-left-width: 1px;
		border-right-width: 1px;
		text-align: center;
		color: #000;
	}

	/* Mobile version header class row */
	table.dataTable.table-striped>tbody>tr:nth-of-type(2n+1)>* {
		box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-stripe), 0.00) !important;
		font-weight: normal !important;
	}

	/* text rows for categroy titles and course */
	table.table-bordered.dataTable th:first-child, table.table-bordered.dataTable th:first-child, table.table-bordered.dataTable td:first-child, table.table-bordered.dataTable td:first-child {
		border-left-width: 1px;
		border-right-width: 1px;
		text-align: center !important;
		font-weight: bold;
	}

   table.dataTable tbody td {
	   text-align:right;
   }

	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 0px solid #eee; 
		position: relative;
		padding-left: 25%; 
    	text-align: left;
		min-height:12px;
	}
	
	td:before { 
		/* Now like a table header */
		position: absolute;
    	font-weight: bold;
    	text-align: center;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		white-space: nowrap;
	}

	.modal-content {
		min-width: 200px !important;
	}

	.modal-body td:nth-child(1) {
		color:#ffffff !important;
		font-weight: bold !important;
	}
    
	.page-item.active .page-link {
    background-color: lightgrey !important;
    border: 1px solid black;
	}
	.page-link {
    color: black !important;
	}
	/*
	Label the data
	*/
	td:nth-of-type(0):before { content: ""; }
	td:nth-of-type(1):before { content: ""; }
	td:nth-of-type(2):before { content: ""; }
	table.dataTable tbody td:nth-of-type(3):before { content: "Class #"; text-align:right; }
    td:nth-of-type(4):before { content: "Capacity"; }
    td:nth-of-type(5):before { content: "Seats"; }
    td:nth-of-type(6):before { content: "Status"; }
    td:nth-of-type(7):before { content: "Room"; }
    td:nth-of-type(8):before { content: "Type"; }
	td:nth-of-type(9):before { content: "Times"; }
	td:nth-of-type(10):before { content: "Dates"; }
	td:nth-of-type(11):before { content: "Days"; }
	td:nth-of-type(12):before { content: "Instructor"; }
	td:nth-of-type(13):before { content: "Start Time"; }
	td:nth-of-type(14):before { content: "End Time"; }
	td:nth-of-type(15):before { content: "Start Date"; }
	td:nth-of-type(16):before { content: "End Date"; }
	td:nth-of-type(17):before { content: "Course Descr"; }
	td:nth-of-type(18):before { content: "Class Notes"; }
	td:nth-of-type(19):before { content: "Requisites"; }
	td:nth-of-type(20):before { content: "Degree Applicable"; }
	td:nth-of-type(21):before { content: "Transfer"; }
	td:nth-of-type(22):before { content: "Books"; }
    td:nth-of-type(1) {color:#31a9e0;text-align:center;}
	}

.modal-content {}

.modal-body td:nth-child(1) {
color: #31a9e0;
font-weight: bold;
}

.modal-body td:nth-child(2) {
text-align: right;
}

@media only screen and (max-width: 775px) {
	.modal-content {
		min-width: 200px;
	}

	.modal-body td:nth-child(1) {
		color: #ffffff !important;
		font-weight: bold !important;
	}

}

/* tooltip in DataTables */
.custom-tooltip {
	min-width: 200px;
	font-size: 14px;
}

#new-search-area {
	width: 100%;
	clear: both;
	padding-top: 20px;
	padding-bottom: 20px;
}

/* parent row in datatables */
table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td.dtr-control:before {
	content: ' ';
	< !-- f151 -->font-family: FontAwesome;
	cursor: pointer;
	font-size: 22px;
	border: 0px;
	border-radius: 0px;
	background-color: transparent;
	box-shadow: none;
	color: #31a9e0;
	vertical-align: middle;
}

table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before, table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before
{
	content: '';
	display:none;
}

table.table-bordered.dataTable th, table.table-bordered.dataTable td {
	border-bottom-width: 0px;
}

/* main class row css on full screen */
.table-striped tbody th {
	font-weight: normal;
	text-align: left !important;
}


/* End Row CSS */

/* close row for groups */
table.dataTable tr.dtrg-group.dtrg-end td {
	background-color: #000;
	color: #fff;
	font-weight: normal;
	font-size: 6px;
	text-align: center;
}

tr.summary-row {
	background-color: black;
	color: white; /* For better readability */
}
/* End of End Row CSS */

/* to make sure all striped rows are one color but maintain colors in header */
.table.dataTable.display tbody tr.group,
.table.dataTable.display tbody tr.dataTable-group {
	background-color: #31a9e0;
	color: #fff;
	font-weight: bold;
}

.table-striped tbody th {
	background-color: #31a9e0;
	color: #fff;
	text-align: left;
	font-weight: bold !important;
}

.table-striped tobdy th.CE-Header {
	background-color: #53247F !important;
}

.table-striped tbody td {
	vertical-align: middle;
	text-align: center;
}

/* CSS for striped row in child dropdown */
table.dataTable.table-striped>tbody>tr:nth-of-type(2n+1)>* {
	box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-stripe), 0.00);
	font-weight: normal;
	vertical-align: middle;
}

.table td:first-child, .table th:first-child {
	padding-left: 10px;
	text-align: center;
}

table.dataTable>tbody>tr[role="row"] {
	vertical-align:middle;
	text-align: center;
}

table.dataTable>thead>tr[role="row"] {
	vertical-align:middle;
	text-align: center;
}

/* Datatables Processing */

div.dataTables_wrapper div.dataTables_processing {
	width: 70%; /* Width to 70% of the window */
	height: 70%; /* Height to 70% of the window */
	position: fixed; /* Use fixed positioning */
	top: 50%; /* Center vertically */
	left: 50%; /* Center horizontally */
	transform: translate(-50%, -50%); /* Adjust to truly center the element */

	z-index: 99999;
	background-color: rgba(128, 128, 128, 0.75); /* Gray with 75% opacity */
	display: none;
	color: #fff;

	/* Remove unnecessary margins */
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;

	/* Legacy opacity styles (filter and -moz-opacity) can be removed */
}

div.dataTables_processing>div:last-child {
		display:none;
}

/* filter boxes */

.filter-box {
	border-radius: 10px;
	box-shadow: 0 4px 6px rgba(0,0,0,0.1);
	padding: 10px;
	max-width: 100%;
	background: white;
}

.checkbox-container {
	display: block;
	position: relative;
	padding-left: 35px;
	margin-bottom: 12px;
	cursor: pointer;
	font-size: 16px;
	user-select: none;
}

.checkbox-container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: #eee;
	border-radius: 5px;
}

.checkbox-container:hover input ~ .checkmark {
	background-color: #ccc;
}

.checkbox-container input:checked ~ .checkmark {
	background-color: #2196F3;
}

.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

.checkbox-container input:checked ~ .checkmark:after {
	display: block;
}

.checkbox-container .checkmark:after {
	left: 9px;
	top: 5px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
}

/* Tooltip styling */
[data-tooltip]:before {
	content: attr(data-tooltip);
	position: absolute;
	opacity: 0;
	transition: all 0.3s ease;
	background-color: black;
	color: white;
	text-align: center;
	border-radius: 6px;
	padding: 5px;
	font-size: 14px;
	line-height: 1.2;
}

[data-tooltip]:hover:before {
	opacity: 1;
}

/* Responsive Design */
@media screen and (max-width: 600px) {
	.filter-box {
		width: 100%;
	}
	/* Additional responsive styles as needed */
}

/* Existing CSS */

.checkbox-container input:checked ~ .checkmark {
	background-color: #2196F3;
}

.option-input {
	margin-top: 10px;
	flex: auto;
}