/*Put All eeds-Specific Styling for the Healthcare Professional Area of the Site Here*/

html {
	height: 100%;
}

/* Headers for the main section. Could be converted to a custom class if
h2s without these styles are needed elsewhere */
h2 {
	font-weight: normal;
	margin-bottom: 20px;
}

/* By default, Bootstrap adds 1rem of bottom margin to ul elements.
This gets rid of that so things look more symmetrical. */
ul {
	margin-bottom: 0;
}

.Header {
	background: linear-gradient(90deg, rgb(28,121,228), rgb(14,184,218));
	border-bottom: 1px solid #eee; /*Faint_Grey*/
}

/* Applies to logo in the header */
.Header img {
	max-height: 70px;
	filter: brightness(0) invert(1); /* Make logo white */
}

.Header .nav-link {
	color: #f8f9fa; /*Playdoh_White*/
}

/* Underline only the text when a link in the header is hovered over,
but not when it has the active class. Needed because it looks weird to
have the icon and space between icon and text underlined. */
.Header .nav-link:not(.active):hover > span {
	text-decoration: underline;
}

/* When one of the header links is active, highlight it by adding a
very light gray background */
.Header .nav-link.active {
	background-color: #f8f9fa; /*Playdoh_White*/
	color: #0623da;
}

/* This is the navbar */
.Sidebar-Left {
	border-right: 1px solid #eee; /*Faint_Grey*/
}

/* This makes the navbar's gray background extend to the bottom of the
page even when the main content does not. Only applicable on larger
screens, since the nav is hidden on mobile (until expanded by jQuery).

The 87px is the height of the header (including padding, margin, and
border), so if it's height changes, the value in the calc would need to
change, as well.

Another option would be to calculate the height of the header using
jQuery once the DOM is ready, and then apply the min-height value using
jQuery. That eliminate the need for the hardcoded value (which would be
good), but would also require some extra JS work (which might not be
necessary if the value of the header isn't expected to change). */
@media (min-width: 768px) {
	.Sidebar-Left {
		min-height: calc(100vh - 87px);
	}
}

/* Make nav items take up full width of side navbar */
.Sidebar-Left .nav-item {
	width: 100%;
	border-bottom: 1px solid #eee; /*Faint_Grey*/
}

/* Remove default border radius */
.Sidebar-Left .nav-link {
	border-radius: 0;
}

/* Don't underline links in nav on hover but do change the bg color of
their container */
.Sidebar-Left .nav-link:hover {
	background-color: #eee;
}

/* Active link gets a purple background in the sidebar */
.Sidebar-Left .nav-link.active {
	color: #f8f9fa; /*Playdoh_White*/
	background: linear-gradient(90deg, rgb(28,121,228), rgb(14,184,218));
}

/* This is where notifications are displayed */
.Sidebar-Right {
	display: none; /* Hidden on load, toggled by jQuery */
	border-left: 1px solid #eee; /*Faint_Grey*/
}

/* Makes right sidebar's background extend the length of the page even
when the main content does not. See notes above on .Sidebar-Left. */
@media (min-width: 768px) {
	.Sidebar-Right {
		min-height: calc(100vh - 87px);
	}
}

#menuToggle {
	font-size: 1.25rem;
}

/* The .fa styles that follow make the icons in the header responsive.
On small screens, only the icon is displayed, so we make them larger. On
larger screens, the icons match the size of the text they're next to. */
.Header .fa {
	font-size: 1.33rem;
}

@media (min-width: 768px) {
	.Header .fa {
		font-size: inherit;
	}
}

/*------------------------------------------*/
/*----------DARK MODE STYLING---------------*/
/*------------------------------------------*/

@media (prefers-color-scheme: dark) 
{
    .bg-white
    {
        background-color: #343a40 !important; /*Grey*/
    }
}