/* https://unpkg.com/sanitize.css@13.0.0/forms.css */ 

/**
 * 1. Change the inconsistent appearance in all browsers (opinionated).
 * 2. Add typography inheritance in all browsers (opinionated).
 */

:where(button, input, select, textarea) {
  background-color: transparent; /* 1 */
  border: 1px solid WindowFrame; /* 1 */
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  letter-spacing: inherit; /* 2 */
  padding: 0.25em 0.375em; /* 1 */
}

/**
 * Change the inconsistent appearance in all browsers (opinionated).
 */

:where(select) {
  appearance: none;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E") no-repeat right center / 1em;
  border-radius: 0;
  padding-right: 1em;
}

/**
 * Don't show the arrow for multiple choice selects
 */

:where(select[multiple]) {
  background-image: none;
}

/**
 * Remove the border and padding in all browsers (opinionated).
 */

:where([type="color" i], [type="range" i]) {
  border-width: 0;
  padding: 0;
}
/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */

/*
Document
========
*/

/**
Use a better box model (opinionated).
*/

*,
::before,
::after {
	box-sizing: border-box;
}

/**
Use a more readable tab size (opinionated).
*/

html {
	-moz-tab-size: 4;
	tab-size: 4;
}

/**
1. Correct the line height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
*/

html {
	line-height: 1.15; /* 1 */
	-webkit-text-size-adjust: 100%; /* 2 */
}

/*
Sections
========
*/

/**
Remove the margin in all browsers.
*/

body {
	margin: 0;
}

/**
Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
*/

body {
	font-family:
		system-ui,
		-apple-system, /* Firefox supports this but not yet `system-ui` */
		'Segoe UI',
		Roboto,
		Helvetica,
		Arial,
		sans-serif,
		'Apple Color Emoji',
		'Segoe UI Emoji';
}

/*
Grouping content
================
*/

/**
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
*/

hr {
	height: 0; /* 1 */
	color: inherit; /* 2 */
}

/*
Text-level semantics
====================
*/

/**
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr[title] {
	text-decoration: underline dotted;
}

/**
Add the correct font weight in Edge and Safari.
*/

b,
strong {
	font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
	font-family:
		ui-monospace,
		SFMono-Regular,
		Consolas,
		'Liberation Mono',
		Menlo,
		monospace; /* 1 */
	font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/

small {
	font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/*
Tabular data
============
*/

/**
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/

table {
	text-indent: 0; /* 1 */
	border-color: inherit; /* 2 */
}

/*
Forms
=====
*/

/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/

button,
input,
optgroup,
select,
textarea {
	font-family: inherit; /* 1 */
	font-size: 100%; /* 1 */
	line-height: 1.15; /* 1 */
	margin: 0; /* 2 */
}

/**
Remove the inheritance of text transform in Edge and Firefox.
1. Remove the inheritance of text transform in Firefox.
*/

button,
select { /* 1 */
	text-transform: none;
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
	-webkit-appearance: button;
}

/**
Remove the inner border and padding in Firefox.
*/

::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
Restore the focus styles unset by the previous rule.
*/

:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
Remove the additional ':invalid' styles in Firefox.
See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
*/

:-moz-ui-invalid {
	box-shadow: none;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/

legend {
	padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
	vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
	height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
	-webkit-appearance: textfield; /* 1 */
	outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/

::-webkit-file-upload-button {
	-webkit-appearance: button; /* 1 */
	font: inherit; /* 2 */
}

/*
Interactive
===========
*/

/*
Add the correct display in Chrome and Safari.
*/

summary {
	display: list-item;
}


html.sis_hwacollege_org {
	
	--primary-color-100: hsl(280 66% 95%);
	--primary-color-200: hsl(280 57% 90%);
	--primary-color-300: hsl(280 48% 82%);
	--primary-color-400: hsl(280 41% 61%);
	--primary-color-500: hsl(280 40% 40%);
	--primary-color-600: hsl(280 38% 36%);
	--primary-color-700: hsl(280 35% 32%);
	--primary-color-800: hsl(280 32% 28%);
	--primary-color-900: hsl(280 30% 25%);
	
	--neutral-color-100: hsl(288 3% 97%);
	--neutral-color-200: hsl(288 3% 93%);
	--neutral-color-300: hsl(288 3% 77%);
	--neutral-color-400: hsl(288 3% 63%);
	--neutral-color-500: hsl(288 3% 50%);
	--neutral-color-600: hsl(288 3% 41%);
	--neutral-color-700: hsl(288 3% 32%);
	--neutral-color-800: hsl(288 3% 23%);
	--neutral-color-900: hsl(288 3% 15%);
	
	--accent-color-100: hsl(198 66% 99%);
	--accent-color-200: hsl(198 57% 90%);
	--accent-color-300: hsl(198 48% 82%);
	--accent-color-400: hsl(198 41% 61%);
	--accent-color-500: hsl(198 40% 40%);
	--accent-color-600: hsl(198 38% 36%);
	--accent-color-700: hsl(198 35% 32%);
	--accent-color-800: hsl(198 32% 28%);
	--accent-color-900: hsl(198 30% 25%);
	
	--affirm-color-100: hsl(120 66% 95%);
	--affirm-color-200: hsl(120 67% 90%);
	--affirm-color-300: hsl(120 68% 82%);
	--affirm-color-400: hsl(120 69% 61%);
	--affirm-color-500: hsl(120 70% 45%);
	--affirm-color-600: hsl(120 60% 40%);
	--affirm-color-700: hsl(120 50% 35%);
	--affirm-color-800: hsl(120 40% 30%);
	--affirm-color-900: hsl(120 30% 25%);
	
	--refuse-color-100: hsl(0 50% 95%);
	--refuse-color-200: hsl(0 67% 90%);
	--refuse-color-300: hsl(0 68% 82%);
	--refuse-color-400: hsl(0 69% 61%);
	--refuse-color-500: hsl(0 70% 50%);
	--refuse-color-600: hsl(0 60% 36%);
	--refuse-color-700: hsl(0 50% 32%);
	--refuse-color-800: hsl(0 40% 28%);
	--refuse-color-900: hsl(0 30% 25%);
	
}


html.sis_imperial_academy_org {
	
	--primary-color-100: hsl(220 80% 95%);
	--primary-color-200: hsl(220 75% 90%);
	--primary-color-300: hsl(220 69% 82%);
	--primary-color-400: hsl(220 63% 67%);
	--primary-color-500: hsl(220 58% 52%);
	--primary-color-600: hsl(220 54% 45%);
	--primary-color-700: hsl(220 49% 38%);
	--primary-color-800: hsl(220 44% 31%);
	--primary-color-900: hsl(220 40% 25%);
	
	--neutral-color-100: hsl(288 3% 97%);
	--neutral-color-200: hsl(288 3% 93%);
	--neutral-color-300: hsl(288 3% 77%);
	--neutral-color-400: hsl(288 3% 63%);
	--neutral-color-500: hsl(288 3% 50%);
	--neutral-color-600: hsl(288 3% 41%);
	--neutral-color-700: hsl(288 3% 32%);
	--neutral-color-800: hsl(288 3% 23%);
	--neutral-color-900: hsl(288 3% 15%);
	
	--accent-color-100: hsl(288 66% 99%);
	--accent-color-200: hsl(288 57% 90%);
	--accent-color-300: hsl(288 48% 82%);
	--accent-color-400: hsl(288 41% 61%);
	--accent-color-500: hsl(288 40% 40%);
	--accent-color-600: hsl(288 38% 36%);
	--accent-color-700: hsl(288 35% 32%);
	--accent-color-800: hsl(288 32% 28%);
	--accent-color-900: hsl(288 30% 25%);
	
	--affirm-color-100: hsl(120 66% 95%);
	--affirm-color-200: hsl(120 67% 90%);
	--affirm-color-300: hsl(120 68% 82%);
	--affirm-color-400: hsl(120 69% 61%);
	--affirm-color-500: hsl(120 70% 45%);
	--affirm-color-600: hsl(120 60% 40%);
	--affirm-color-700: hsl(120 50% 35%);
	--affirm-color-800: hsl(120 40% 30%);
	--affirm-color-900: hsl(120 30% 25%);
	
	--refuse-color-100: hsl(0 50% 95%);
	--refuse-color-200: hsl(0 67% 90%);
	--refuse-color-300: hsl(0 68% 82%);
	--refuse-color-400: hsl(0 69% 61%);
	--refuse-color-500: hsl(0 70% 50%);
	--refuse-color-600: hsl(0 60% 36%);
	--refuse-color-700: hsl(0 50% 32%);
	--refuse-color-800: hsl(0 40% 28%);
	--refuse-color-900: hsl(0 30% 25%);
	
}


.color_chart {
	width: 45em;
	margin: 3em auto;
}

.color_chart hr {
	margin: 0.7em 0;
	color: var(--neutral-color-500);
}

.color_chart .label {
	display: inline-block;
	vertical-align: middle;
	min-width: 10em;
}

.color_chart .swatch {
	display: inline-block;
	vertical-align: middle;
	border: solid 1px var(--neutral-color-500);
	border-radius: 0.5em;
	margin: 0.25em;
	width: 3em;
	height: 3em;

}


body {
	min-width: 876px;
}

input,
select {
	border-color: var(--neutral-color-200);
}

input:focus {
	box-shadow: 0 0 0.3em var(--accent-color-500);
	border-color: var(--accent-color-200);
	outline: none;
}

a, 
a:visited {
	text-decoration: none;
	color: var(--primary-color-500);
}

hr {
	border: 0;
	border-top: solid 1px var(--neutral-color-300);
	margin: 0;
}

strong {
	color: var(--neutral-color-900);
}

table {
	width: 100%;
}

table a {
	text-decoration: none;
}

table {
	border-collapse: collapse;
}

table th {
	text-transform: uppercase;
	color: var(--neutral-color-400);
}

table th, table td {
	padding: 0.5em;
}

.muted {
	color: var(--neutral-color-300);
}

.positive {
	color: var(--affirm-color-700);
}

.negative {
	color: var(--refuse-color-700);
	margin-right: -0.4em;
}

.right {
	text-align: right;
}

.center {
	text-align: center;
}

.left {
	text-align: left;
}

#header, #content, #footer {
	margin: 1em;
	position: relative;
}

#header {
	font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
}

#header #flash {
	bottom: 0; 
	position: absolute;
	right: 0;
}

#header #flash p {
	border: solid 1px var(--neutral-color-300);
	border-radius: 0.4em;
	display: inline-block;
	font-weight: bold;
}

#flash p {
	background: var(--primary-color-100);
	color:  var(--primary-color-700);
}

#flash p.alert {
	background: var(--refuse-color-100);
	color:  var(--refuse-color-700);
}

#header #session {
	position: absolute;
	right: 0;
	top: 0;
}

#header li {
  margin-left: 1.0em;
}

#header #session button:hover {
	background: var(--refuse-color-100);
}

#header #flash p {
	margin: 0;
	padding: 0.4em 0.6em;
}

#header li, #navbar li {
  display: inline-block;
  list-style-type: none;
}

#navbar {
	display: flex;
	background: linear-gradient( to bottom, var(--neutral-color-100), var(--neutral-color-200) );
	border-radius: 0.4em;
	border: solid 1px var(--neutral-color-300);
	line-height: 1.8em;
	margin: 1em;
	padding: 0 1em;
	height: 2.9em;
}

#navbar .spacer {
	flex: 1; 
}

#navbar li a {
	color: inherit;
	display: inline-block;
	padding: 0.5em;
}

#navbar li.active, #navbar li.active:hover {
	box-shadow: inset 0 0.1em 0.5em var(--neutral-color-300);
	background-color: var(--neutral-color-200);
	color: var(--neutral-color-900);
}

#navbar li:hover {
	box-shadow: inset 0 0.1em 0.5em var(--neutral-color-200);
	background-color: var(--neutral-color-100);
	color: var(--neutral-color-800);
}

#navbar select,
#navbar #search {
	margin: 0.5em;
}

#navbar select,
#navbar #search input {
	background-color: white;
}

#navbar select:invalid {
	color: var(--neutral-color-400);
}

#navbar input::placeholder {
	color: var(--neutral-color-500);
}

#content .pagy-nav {
	margin: 1.0em;
}

#footer {
	text-align: center;
	color: var(--neutral-color-400);
}

#footer a {
	color: var(--primary-color-500);
	font-weight: bolder;
}

.auth_integration .form-group label {
	display: inline-block;
	text-align: right;
	margin: 0.7em;
	width: 7em;
}

.auth_integration .checkbox {
	margin: 0.7em;
}

.auth_integration .checkbox input{
	margin-left: 6.5em;
	margin-right: 0.3em;
}

.auth_integration input.btn-primary {
	margin: 0.7em 1.0em 1.0em 18em;
	background-color: var(--primary-color-100);
	color: var(--primary-color-700);
	padding: 0.5em 1.1em;
}

.auth_integration a.btn {
	display: none;
}

.pages--totals table {
	table-layout: fixed;
}

.pages--totals th.year {
	text-align: left;
}

.pages--totals th.year {
	font-size: 2.5em;
}

.pages--totals td:not(:first-child) {
	font-size: 1.5em;
}

#content .settings {
	display: flex;
	justify-content: center;
	margin-bottom: 1.5em;
}

#content .settings h4 {
	text-align: center;
}

#content .settings h4, 
#content .settings label, 
#content .settings td:first-child {
	color: var(--neutral-color-700);
}

#content .settings .column {
	margin: 0 1em; 
}

#content .settings input {
	width: 6em;
}

#content .settings input[type=text] {
	font-weight: bold;
}

#content .settings input[type=text]::placeholder {
	font-weight: normal;
}

#content .settings label {
	display: block;
}

#content .settings .general input {
	margin-top: 0.2em;
	margin-bottom: 0.8em; 
	width: 12em;
}

#content .settings .change input {
	width: 8em;
}

#content .settings .credits input {
	width: 13em;
}

#content .settings .lodging td:nth-child(2) input {
	width: 8em;
}

#content .settings table tbody tr {
	background: inherit;
}

#content .setting-message {
	text-align: center;
	color: var(--neutral-color-500);
	font-size: 0.9em;
} 


/* General */

.students--search hr {
	margin-top: 1.0em;
}

.students--show table {
	margin-top: 2.0em;
}

.students--search .student_card {
	vertical-align: top;
	display: inline-block;
	background: var(--neutral-color-100);
	border: solid 1px var(--neutral-color-300);
	box-shadow: 0.05em 0.05em 0.3em var(--neutral-color-200);
	border-radius: 0.4em;
	padding: 1.5em;
	margin: 1.0em;
}

.students--search .student_card:hover {
	box-shadow: 0.05em 0.05em 0.6em var(--primary-color-200);
}


/* Top banner */

.students--show #banner .name,
.students--search .student_card .name {
	font-size: 1.5em;
	font-weight: bolder;
	color: var(--neutral-color-700);
}

.students--show #banner .program,
.students--search .student_card .program {
	color: var(--neutral-color-500);
	margin-bottom: 0.25em;
}

.students--show #banner .designation,
.students--search .student_card .designation {
	color: var(--neutral-color-500);
	text-transform: uppercase;
	font-weight: bolder;
	font-size: 1em;
}

.students--show #banner {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.students--show #banner .segment {
	margin: 1.0em;
	color: var(--neutral-color-500);
}

.students--show #banner .segment strong{
	color: var(--neutral-color-700);
}

.students--show #banner .segment:not(:first-child) {
	padding-top: 0.2em;
}

.students--show #banner .address {
	text-transform: uppercase;
}

.students--show #banner .contact a {
	color: inherit;
}

.students--show #banner .segment svg {
	color: var(--neutral-color-300);
	height: 1.2em;
	vertical-align: top;
}

.students--show #banner .segment strong {
	font-size: 1.5em;
}


/* Ledger information */

.students--show #ledger table button {
	font-weight: normal;
}

.students--show #ledger table thead tr:only-child,
.students--show #ledger table thead tr:nth-child(even), 
.students--show #ledger table tbody tr:nth-child(even) {
	background: var(--neutral-color-100);
}



/* Grade information */

.students--show #grades {
	display: flex;
}

.students--show #grades nav {
	flex: 0 0 content;
}

.students--show #grades nav ol {
	border-right: solid 1px var(--neutral-color-300);
	padding: 2.5em 0;
}

.students--show #grades nav a {
	text-decoration: none;
	color: inherit;
}

.students--show #grades nav li {
	border: solid 1px transparent;
	border-radius: 0.5em 0 0 0.5em;
	list-style-type: none;
	text-align: right;
	margin-right: -1px;
	padding: 0.5em;
	color: var(--neutral-color-500);
	text-transform: uppercase;
	font-weight: bolder;
}

.students--show #grades nav li.tab:hover {
	background-color: var(--neutral-color-100);
	border-right: solid 1px var(--neutral-color-300);
}

.students--show #grades nav li.tab.active {
	color: var(--primary-color-500);
	border: solid 1px var(--neutral-color-300);
	border-right: solid 1px white;
	background-color: inherit;
}

.students--show #grades table th.label {
	color: var(--primary-color-500);
}

.students--show #grades #cards > div:not(.active),
.students--show #grades table tr.comment:not(.active) {
	display: none;
}

.students--show #grades table td.grade {
	text-align: left;
}

.students--show #grades table td.points {
	text-align: right;
}

.students--show #grades table td.grade, 
.students--show #grades table td.points {
	border-bottom: solid 1px var(--neutral-color-300);
}

.students--show #grades table tbody tr:not(.comment) td {
	border-top: solid 1px var(--neutral-color-300);
}

.students--show #grades table tbody tr.comment td {
	border-right: solid 1px var(--neutral-color-300);
}

.students--show #grades table tbody tr:last-child td {
	border-bottom: solid 1px var(--neutral-color-300);
}

.students--show #grades table td:first-child {
	border-left: solid 1px var(--neutral-color-300);
}

.students--show #grades table td.grade {
	border-left: solid 1px var(--neutral-color-300);
}

.students--show #grades table td.points {
	border-right: solid 1px var(--neutral-color-300);
}

.students--show #grades table tr:nth-child(2) th {
	border-top: solid 1px var(--neutral-color-300);
}

.students--show #grades table tr:nth-child(2) th.grade,
.students--show #grades table tr:nth-child(2) th:first-child {
	border-left: solid 1px var(--neutral-color-300);
}

.students--show #grades table tr:nth-child(2) th.points {
	border-right: solid 1px var(--neutral-color-300);
}

.students--show #grades table thead tr:nth-child(2) {
	background: var(--neutral-color-100);
}

.students--show #grades table tr.comment .label {
	color: var(--neutral-color-300);
	text-transform: uppercase;
}

.students--show #grades table td.points {
	font-family: monospace;
}

.students--show #grades table tr.comment td {
	color: var(--neutral-color-500);
	font-style: italic;
	font-size: 0.9em;
}

.students--show #grades table td.class {
	color: var(--neutral-color-700);
	font-size: 1.2em;
}

.students--show #grades table td.grade,
.students--show #grades table td.points {
	color: var(--neutral-color-700);
	font-weight: bolder;
	font-size: 1.5em;
	width: 5ch;
}

.students--show #grades table td.grade {
	padding-left: 1.2em;
}

.students--show #grades table td.points {
	padding-right: 0.8em;
}

.students--show #grades table td.points .decimals {
	color: var(--neutral-color-400);
	font-weight: normal;
	font-size: 0.8em;
}

.students--show #grades table tr th,
.students--show #grades table tr td  {
	padding: 0.7rem;
}

.students--show #grades #cards {
	margin: 0 2em;
}

.students--show #grades #cards .center {
	margin: 1.5em;
}

.students--show #grades #cards .muted {
	font-size: 0.9em;
}

.students--show #grades #cards .gpa {
	margin-top: 2.5em;
}

.students--show #estimate_summary {
	display: flex;
	justify-content: center;
}


/* Estimate summary */

.students--show #estimate_summary .overview {
	border-radius: 1em;
	text-align: center;	
	padding: 2em;
	margin: 2em;
}

.students--show #estimate_summary .overview {
	background: var(--neutral-color-200);
}

.students--show #estimate_summary .overview h1 {
	font-size: 3em;
	margin-bottom: 0;
}

.students--show #estimate_summary .overview p {
	color: var(--neutral-color-500);
	font-size: 1.2em;
	font-weight: lighter;
}

.students--show #estimate_summary .expenses table tr {
	border-bottom: solid 1px var(--neutral-color-200);
}

.students--show #estimate_summary .expenses table th {
	text-align: left;
}

.students--show #estimate_summary .expenses table td:not(:first-child) {
	text-align: right;
}

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */