#sidebar-student	{
	--_width: var(--width, 360px);
	--_margin-right: var(--margin-right, 15px);
	--_box-shadow: var(--box-shadow, 0px 0px 6px 7px #888888);
	--_height: var(--height, calc(100vh - 10px));

	height: var(--_height);
	min-width: var(--_width);
	width: var(--_width);
	margin-left: 10px;
	margin-right: var(--_margin-right);
	margin-bottom: 5px;
	box-shadow:var(--_box-shadow);
	border-left: thin solid lightgrey;
	border-bottom: 2px solid black;
	grid-area: sidebar-student;
}

.sidebar-student__cards__section :is(.student-record, .admission-coas, .registration) {
	padding-bottom: 1em;
}


/* Style the tab wrapper */
#sidebar-student__tabs-wrapper {
	overflow: hidden;
	background: transparent;
	display: flex;
	position: sticky;
	top: 0; /* Sticks to the top of the viewport */
	z-index: 2;
	border-bottom: 2px solid black;
}

/* Style the buttons inside the tab wrapper */
.sidebar-student__tab-button {
	background-color: white;
	outline: none;
	cursor: pointer;
	padding: 0;
	transition: 0.2s;

	height: 40px;
	min-width: 40px;
	margin: 0;
	width: 100%;
	display: inline-flex; /* keep the inline nature of buttons */
	justify-content: center;
	align-items: center; /* this is default */
	text-align: center;

	border: 1px solid lightgrey;
	border-radius: 7px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	-webkit-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
	-moz-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
	-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);

}


.sidebar-student__tab-img	{
	width: auto;
	height: 80%;
}


/* Change background color of buttons on hover */
.sidebar-student__tab-button:hover {
	background-color: black;
}

/* Create an active/current tablink class */
.sidebar-student__tab-button.active {
	background-color: var(--color-purple--dark);
	color: white;
	width: 100px;
	min-width: 100px;
}


#sidebar-student__cards-wrapper 	{
	--_height: var(--height, calc(100vh - 54px));
	height: var(--_height);
	overflow: auto;
	overflow-x: hidden;

}

/* Style the tab content */
.sidebar-student__card {
	display: none;
	background: #ccc;
	border: black 1px solid;
	min-height: 50px;
	margin-bottom: 1em;
	padding-bottom: 1em;
}

/*Add spacing to cards, if the above sibling is visible */
.sidebar-student__card:not([style*="display: none"]) + .sidebar-student__card {
	margin-top: 4em;
}


#student--image 	{
	object-fit: contain;
	max-height: 300px;
	height: 100%;
	width: 100%;
	border-radius: 8px;
}


.sidebar-student__card__h1 {
	--_margin-top: var(--margin-top, 1px);
	--_hue: var(--hue);
	--_saturation: var(--saturation);
	--_lightness: var(--lightness);
	--_color: var(--color);
	--_background-color: hsl(var(--_hue) var(--_saturation) var(--_lightness));

	margin-top: var(--_margin-top, -1px);
	margin-bottom: 0;
	margin-inline: -1px;

	background-color: var(--_background-color, var(--color-purple--dark));

	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	padding: .25em 0;
	text-align: center;

}

.sidebar-student__card__img 	{
	width: auto;
	height: 30px;
	-webkit-filter: invert(1);
	filter: invert(1);
	margin-right: 1em;
}


.sidebar-student__card__h2 {
	--__margin-top: var(--margin-top);

	margin-top: var(--__margin-top, .5em);
	margin-bottom: 0;
	margin-inline: .5em;

	padding: .25em;
	text-align: center;
	font-size: calc(var(--base-font-size)* 1.125);
}



#Personal .sidebar-student__card__h1 {
	font-size: 1.35rem;
	padding: 5px;
	margin: .5em;
	margin-bottom: 0;
}


.sidebar-student__tab-button:hover:enabled 	{
	transform: translate(0, 1px);
	-webkit-transform: translate(0, 1px);
	-moz-transform: translate(0, 1px);
	padding: 0;
	background-color: black;
}

.sidebar-student__tab-button:hover:enabled .sidebar-student__tab-img
,.sidebar-student__tab-button.active .sidebar-student__tab-img {
	-webkit-filter: invert(1);
	filter: invert(1);
}


#sidebar-student #NSLDS.sidebar-student__card 	{
	display: none;
}


[data-card="Holds"] .sidebar-student__holds__div 	{
	background: white;
	padding: .5em 2.5em;
}

[data-card="Holds"] .sidebar-student__holds__div:nth-child(odd) 	{
	background: lightgrey;

}

[data-card="Contact"] .sidebar-student__card__h2 ~ .sidebar-student__card__h2 	{
	margin-top: 1.5em;
}


#sidebar-student .sidebar-student__card__no_holds 	{
	text-align: center;
	background: green;
	color: white;
	font-weight: bold;
	font-size: 1.5rem;
	padding: 1em;
	margin-bottom: 10px;
}


[data-card="NSLDS"] {
	display: none;
}


.sidebar-student__wrapper {
	margin: .5em;
	background: white;
	border: thin solid black;
}

.sidebar-student__holds__wrapper {
	padding: .5em 1em ;
	padding-top: 2px;
}

.sidebar-student__holds__h3 {
	text-align: center;
	width: 100%;
	background: black;
	color: white;
	font-weight: bold;
}

.sidebar-student__holds__h3 ~ .sidebar-student__holds__h3 {
	margin-top: 5px;
}


.sidebar-student__holds__no-records {
	padding: .5em 1em ;
}


/* Highlight the header RED if there are holds on record */
.sidebar-student__h1:has(+.sidebar-student__holds__wrapper .sidebar-student__holds__h3) {
	background: red;
}


.side-bar__field {
	display: flex;
	padding: 0 .5em;
	margin: 1px;
}

.side-bar__field:has(.width--full) {
	display: block;
}

.side-bar__field__label {
	--_text-align: var(--text-align);
	--_width: var(--width);

	background-color: var(--color-grey);
	color: white;
	text-align: var(--_text-align, right);
	width: var(--_width, 10em);

	padding: .65em .5em;
	font-weight: 600;
	justify-content: end;
	position: relative;
}

/*Highlight every other item */
.side-bar__field:nth-of-type(odd) .side-bar__field__label {
	background-image: linear-gradient(rgb(0 0 0/20%) 0 0);
}

.side-bar__field:nth-of-type(odd) .side-bar__field__information {
	background-image: linear-gradient(rgb(0 0 0/10%) 0 0);
}
.side-bar__field:nth-of-type(odd) .side-bar__field__information.darker {
	background-image: linear-gradient(rgb(0 0 0/30%) 0 0);
}


.side-bar__field__information {
	--_hue: var(--hue);
	--_saturation: var(--saturation);
	--_lightness: var(--lightness);
	--_color: var(--color);
	--_background-color: hsl(var(--_hue) var(--_saturation) var(--_lightness));

	background-color: var(--_background-color, white);
	color: var(--_color, black);

	word-wrap: break-word;
	white-space: normal;

	flex: 1;
	position: relative;

	padding-left: .5em;
	padding-right: .5em;

	min-height: 30px;
	align-content: center;
}

/* Remove the background color if the class is not directly on the information field */
.side-bar__field__information:not([class*=" "]) {
	--hue: 0;
	--saturation: 0%;
	--lightness: 100%;
	--color: black;

}