:root {
  --uiuc-blue: #002755;
  --uiuc-orange: #e84927;
}

/*
	Utility Classes
*/

.cursor-pointer {
	cursor: pointer;
}

.font-b {
	font-weight: bold;
}

.font-i {
	font-style: italic;
}

.font-bi {
	font-weight: bold;
	font-style: italic;
}

img {
	image-rendering: -moz-crisp-edges; /* Firefox */
	image-rendering: -o-crisp-edges; /* Opera */
	image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
	image-rendering: crisp-edges;
	-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}

/*
	A basic example of collapsable elements
	<div data-toggle="collapse" data-target="#<unique-id>">
	  <span class="collapse-arrow"></span>
	</div>
	<div class="collapse show" id="<unique-id>"></div>
*/

[data-toggle="collapse"] {
  cursor: pointer;
}

.collapsed .collapse-arrow:after {
  content: " \25BC";
}

.collapse-arrow:after {
  content: " \25B2";
}

.collapsed .collapse-sign:after {
  content: " \002B";
  font-weight: bold;
}

.collapse-sign:after {
  content: " \2212";
  font-weight: bold;
}

/*
	To enhance UI when using li in dropdown-menu
*/

li.dropdown-item.disabled {
	cursor: not-allowed;
}

li.dropdown-item {
	cursor: default;
}

/*
	A simple grid system for bordered panels

	Usage
	- Use .panel-container as the container. The direct div children will be bordered.
	- Use w-* or width to specify the width of each panel.
	- Use <hr> to break a new line. This is needed for flex and border rendering.
	- Use .panel-grow to let this panel grow (stretch) the row.

	Note
	- The actual width and height may be smaller than specified due to border behavior.

	Example

	<div class="panel-container" style="width: 900px; flex-wrap: wrap;">
		<div class="w-100">1</div>
		<hr>
		<div class="" style="width: 500px;">2</div>
		<div class="panel-grow">3</div>
		<hr>
		<div class="w-25">4</div>
		<div class="w-25">5</div>
		<div class="w-25">6</div>
		<hr>
		<div class="w-50">7</div>
	</div>
*/

:root {
	--panel-border: 3px solid gray;
}

.panel-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

/* hr force flexbox to create a new row */
.panel-container > hr {
	margin: 0px;
	border: 0px;
	flex-basis: 100%;
}

/* only the first div, and the first div after each hr have left border */
.panel-container > div {
	border: var(--panel-border);
	border-left: 0px;
}

.panel-container > div:first-of-type, .panel-container > hr + div {
	border-left: var(--panel-border);
}

/* only the div before the first hr have top border  */
.panel-container > hr ~ div {
	border-top: 0px;
}

/* a helper class to strecth a div without specifying width */
.panel-container > div.panel-grow {
	flex-grow: 1;
	flex-basis: 0;
}

/* column version */
.panel-container.panel-container-col {
	flex-direction: column;
}

/* We still need this to configure border, but do not break panels into new columns */
.panel-container.panel-container-col > hr {
	flex-basis: 0;
}


/*
	Login page
*/

#login.card {
	width: 500px;
}