body {
	background: #F3F3F3;
	color: #333;
	font: 1em/150% 'Lucida Grande', Calibri, sans-serif;
	padding: 0 40px;
	margin: 0;
	min-height: 100vh;
	box-sizing: border-box;
	display: flex; /* For sticking the footer to the bottom */
	flex-direction: column;
}
main { flex: 1; }
a { color: #36A; }
a:hover { color: #69F; }

h1 {
	margin: 0.25em 0;
	line-height: 1.5;
}
section ~ section h2 { margin-top: 1.5em; }
.new-feature::after {
	content: 'NEW';
	display: inline-block;
	background: #09F;
	color: #FFF;
	font: normal 0.5em sans-serif;
	padding: 4px 6px 3px;
	border-radius: 3px;
	margin-left: 0.75em;
	vertical-align: middle;
}
p span.new-feature::after {
	float: left;
	margin: 4px 1em 0 0;
}
#questions h2 + p {
	margin-top: -0.8em;
	margin-bottom: 1.2em;
	color: #555;
  }

.deemph-link {
  color: #666;
  opacity: 0.75;
  font-size: 0.8rem;
  display: inline-block;
}
.deemph-link:hover { opacity: 1; }

a { text-decoration: none; }

a.button, button, input[type='submit'] {
	display: inline-block;
	background: #369;
	padding: 8px 24px;
	color: rgb(255 255 255 / 85%);
	border: none;
	border-bottom: 3px solid rgb(0 0 0 / 25%);
	border-radius: 30px;
	cursor: pointer;
	font-size: 1.15em;
	font-family: 'Lucida Grande', Calibri, sans-serif;
}

a.button:hover, button:not(:disabled):hover, input[type='submit']:hover { background-color: #258; }
a.button.small {
	font-size: .55em;
	padding: 3px 13px 1px;
	border-bottom-width: 2px;
}
button:disabled {
	opacity: 0.5;
	cursor: default;
}

input[type="text"], input[type="password"], input[type="date"], input[type="number"], input[type="email"] {
	box-sizing: border-box;
	border-width: 1px;
	border-style: solid;
	border-color: #AAA #BBB #CCC;
	box-shadow: inset 0 2px 2px rgb(0 0 0 / 10%);
	padding: 0.3em 0.6em;
}
input[type="password"] { margin-right: 1em; }
input[type="number"] { padding-right: 3px; }

h1#name input { margin: calc(-0.3em - 1px) 0 calc(-0.3em - 1px) calc(-0.6em - 1px); }
#name input {
	font: bold 1em 'Lucida Grande',Calibri,sans-serif;
	max-width: 100%;
}
dialog #name input, .admin-new #name input { font-size: 1.5em; }
h2 input {
	font-size: 1em;
	width: 38%;
}
.note input, input.note { width: 100%; }
#selector-desc {
	color: #777;
	font-size: smaller;
	font-style: italic;
	margin-left: 15px;
}

#classmeta {
	font-size: 0.9em;
	margin: 0.25em 0 2em;
	border-bottom: 1px solid rgba(0 0 0 / 15%);
	padding-bottom: 0.5em;
	color: #555;
}
.meta-item {
	display: inline-block;
	margin-right: 1.5em;
}

#csvdown {
	margin-left: 10px;
	font-weight: normal;
	vertical-align: middle;
}
#csvdown::before {
	content: '';
	display: inline-block;
	height: .875rem; width: .875rem;
	background-image: url("../icon/svg.php?icon=download&color=777");
	background-size: .875rem .875rem;
	margin: 0 6px -2px 0;
}

/* ======
   Search
   ====== */

#searchcontain {
	display: inline-block;
	margin-left: .75em;
	position: relative;
}
#search {
	width: 25em;
	vertical-align: middle;
	font-size: .5em;
	max-width: 100%;
}
#autocomplete {
	position: absolute;
	width: 100%;
	top: 1.3em;
	z-index: 99;
	box-shadow: 0 3px 10px rgb(0 0 0 / 25%);
	border-radius: 0 0 10px 10px;
	border: 1px solid rgb(0 0 0 / 30%);
}
#autocomplete:empty { display: none; }
#autocomplete a, #autocomplete .none {
	font-size: 0.8rem;
	background: rgb(255 255 255 / 90%);
	backdrop-filter: blur(4px);
	position: relative;
	border-style: solid;
	border-width: 0 0 1px;
	border-color: rgb(0 0 0 / 10%);
	font-weight: normal;
	color: #333;
	display: flex;
}
#autocomplete a.selected { background: rgb(235 235 235 / 90%); }
#autocomplete a:last-child, #autocomplete .none {
	border-bottom: none;
	border-radius: 0 0 10px 10px;
}
#autocomplete span {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
#autocomplete .class {
	display: inline-block;
	border-left: 1px solid rgb(0 0 0 / 10%);
	padding: 2px 1em;
	font-size: 0.9em;
	margin-left: 1em;
	font-weight: bold;
	line-height: 1.5;
	min-width: 8em;
}
#autocomplete .semester {
	font-weight: normal;
	display: block;
	font-size: 0.8em;
	color: #999;
}
#autocomplete .student {
	flex: 1;
	padding: 0 1em;
	line-height: 2.5;
}
#autocomplete .none {
	text-align: center;
	display: block;
	padding: 0.5em;
	font-size: 0.5em;
	color: #AAA;
	font-style: italic;
}

/* ==========
   Class List
   ========== */

.classes {
	list-style: none;
	padding: 0;
	margin: 2.5em 0 0;
	max-width: 51em;
}

.classes li { display: inline-block; }

.classbox, #collapse {
	display: inline-block;
	width: 18em;
	border: 1px solid rgb(0 0 0 / 20%);
	border-radius: 5px;
	text-align: center;
	padding: 0.75em;
	margin: 0 1em 1em 0;
	background-color: rgb(255 255 255 / 25%);
	color: #777;
	font-size: 0.8em;
	box-sizing: border-box;
}
.classbox:hover, #collapse:hover {
	color: #333;
	background-color: rgb(255 255 255 / 75%);
	border: 2px solid #69C;
	padding-top: calc(0.75em - 1px);
	padding-bottom: calc(0.75em - 1px);
}
.classbox.inactive, #collapse {
	opacity: 0.5;
	background: none;
}
.classbox.inactive:hover, #collapse:hover { opacity: 0.75; }
.hide-inactive .classbox.inactive { display: none; }

.classbox .title {
	display: block;
	font-size: 1.25em;
	color: #36A;
}
#collapse {
	width: 2em; height: 5.4em;
	background: url('/icon/svg.php?icon=caret-left-fill&color=777') center center no-repeat;
	vertical-align: top;
	cursor: pointer;
	position: relative;
}
.hide-inactive #collapse { background-image: url('/icon/svg.php?icon=caret-right-fill&color=777'); }
#collapse:hover::after { content: 'Hide inactive classes' !important; }
.hide-inactive #collapse:hover::after { content: 'Show inactive classes' !important; }

.classes .students::after {
	display: inline-block;
	text-indent: -9999em;
	height: 1em; width: 1em;
	background: url('/icon/person-fill.svg') center no-repeat;
	background-size: 1em 1em;
	margin: -3px 0 0 0.25em;
	content: 'Students';
	vertical-align: middle;
	opacity: 0.75;
}
#welcome {
	display: block;
	width: auto;
	max-width: 640px;
	font-size: 1.1em;
  }

/* ======
   Tables
   ====== */

table { border-collapse: collapse; }
table td { font-size: 0.85em; }
table td, table th {
	padding: 0 20px;
	border-left: 1px solid #CCC;
}
table tr th:first-child, table tr td:first-child {
	padding-left: 0;
	border-left: 0;
}
table th {
	border-bottom: 1px solid #CCC;
	padding-bottom: 10px;
	text-align: left;
}
table tr:nth-child(even) { background: rgb(0 0 0 / 5%); }
tbody .score { font-size: 0.75rem; }
td.score::before {
	content: attr(data-sort) '%';
	float: left;
	width: 3.75em;
	font-size: 0.85rem;
}
.score:empty::before, #roster .note:empty::before {
	content: '—';
	color: #AAA;
}

td.note {
	text-overflow: ellipsis;
	max-width: 150px;
	overflow: hidden;
	white-space: nowrap;
	font-size: small;
}

td.addnew, #roster tfoot td { padding: 0 !important; } /* Replace with :has(a) when Firefox gets support */
tfoot a, #qactions a {
	text-align: center;
	display: block;
	font-size: 1.5em;
	font-weight: bold;
	color: #777;
	padding: 0.5rem 0;
	min-width: 1.75em;
}
#roster tfoot a, #schemaitems tfoot a {
	border-top: 1px solid rgb(0 0 0 / 10%);
	padding: 5px 0;
}
tfoot a:hover, #qactions a:not(.disabled):hover {
	background-color: rgb(0 0 0 / 5%);
	color: #555;
}
tfoot a.disabled {
	color: #CCC;
	cursor: default;
}
tfoot a.disabled:hover { background: none; }
dialog tfoot td:last-child a { border-bottom-right-radius: 12px; }
.events tfoot .addnew { border-left: none; }
.uploadcsv a {
	font-weight: normal;
	font-size: 0.8rem;
}
.uploadcsv a::before {
	background-image: url('../icon/upload.svg');
	background-size: 1rem 1rem;
	height: 1rem; width: 1rem;
	opacity: 67%;
	display: inline-block;
	content: '';
	margin: 3px 10px -3px 0;
}

table tbody:empty {
	height: 3em;
	display: block;
}
table tbody:empty::before, #questionlist:empty::before {
	padding: 10px 0;
	display: table-cell;
	font-size: 0.8em;
	font-style: italic;
	color: #999;
	position: absolute; /* Best substitute for lack of CSS colspan */
}
.events tbody:empty::before { content: 'No events yet'; }
#roster tbody:empty::before { content: 'No students yet. You can add them individually, or upload a CSV roster, below.' }
#questionlist:empty::before {
	content: 'No questions yet.';
	display: list-item;
	position: static;
}

input.error, textarea.error { box-shadow: 0 0 3px 1px #D22; }

#roster tbody tr:hover td, table.sortable th[class]:hover, .events tbody .m-name:hover {
	cursor: pointer;
	background: rgb(160 180 230 / 20%);
}
dialog .events tbody .m-name:hover { cursor: default; background: none; }
table.sortable th[class]:hover { background: rgb(0 0 0 / 5%); }
table tr.new { background: #FFF3C0; }

.events tfoot {
	font-weight: bold;
	border-top: 1px solid #CCC;
}
.events tfoot td {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

#csvfile { display: none; }
label[for="csvfile"] {
	cursor: pointer;
	border: 3px dashed rgb(0 0 0 / 15%);
	padding: 20px;
	display: block;
	color: #555;
	text-align: center;
}
label[for="csvfile"]:hover { background: rgb(0 0 0 / 5%); }
label.active[for="csvfile"] { background: rgb(0 0 0 / 10%); }

.info {
	font-size: 0.8em;
	background: #F5F5CC;
	border: 1px solid #CC5;
	padding: 10px 20px;
	border-radius: 3px;
	display: inline-block;
}
.info.error {
	background: #F5CCCC;
	border-color: #C55;
}
.inlineError {
	font-size: smaller;
	font-style: italic;
	color: #C66;
}

span.num {
  color: #999;
  font-weight: normal;
}
span.num::before { content: ' / '; }

#questionlist {
	padding: 0;
	list-style: none;
}
#questionlist .inactive { color: #999; }
#questionlist .inactive .archive:hover::after { content: 'Unarchive'; }
#questionlist li {
	padding: 0.2em 0.5em;
	border-radius: 5px;
	cursor: pointer;
	max-width: 640px;
}
#questionlist.hiding .inactive { display: none; }
#questionlist li:hover { background: rgb(160 180 230 / 20%); }
#questionlist .date {
	display: block;
	font-size: 0.75em;
}
.studentmodal textarea {
	width: 100%;
	font-size: 1em;
	font-family: inherit;
	box-sizing: border-box;
}
.question .studentmodal h3 {
	font-weight: normal;
	max-width: 85%;
}
.inactive.question .studentmodal h3, .inactive.question .studentmodal textarea { color: #999; }
#qactions {
	border-top: 1px solid rgb(0 0 0 / 10%);
	display: flex;
	padding: 0;
	border-radius: 0;
	max-width: 640px;
}
#qactions a {
	display: block;
	padding: 0.5rem 2em;
}
#qactions a:not(:last-child) { border-right: 1px solid rgb(0 0 0 / 10%); }
#qactions .expand {
	text-indent: -9999em;
	background: url('/icon/svg.php?icon=chevron-up&color=777') center no-repeat;
	background-size: 1em 1em;
}
#qactions a.disabled {
	opacity: 0.5;
	cursor: default;
}
#questionlist.hiding + #qactions .expand { background-image: url('/icon/svg.php?icon=chevron-down&color=777'); }

/* ==============
   Action buttons
   ============== */

/* https://icons.getbootstrap.com */
.edit { background: url('../icon/pencil-fill.svg') center no-repeat; }
.save { background: url('../icon/check-lg.svg') center no-repeat; }
.cancel { background: url('../icon/x-lg.svg') center no-repeat; }
.delete { background: url('../icon/trash3-fill.svg') center no-repeat; }
.excuses { background: url('../icon/moon-fill.svg') center no-repeat; }
.copy { background: url('../icon/copy.svg') center no-repeat; }
.archive { background: url('../icon/archive.svg') center no-repeat; }
.inactive .archive { background: url('../icon/unarchive.svg') center no-repeat; }
.apipublic.private { background: url('../icon/eye-slash.svg') center no-repeat; }

.edit, .actions a, #roster .excuses, .apipublic {
	color: #000;
	display: inline-block;
	margin: 0 0.5em;
	position: relative;
	height: 1em; width: 1em;
	background-size: 1em 1em !important;
	opacity: 0.3;
	font-size: 0.75em;
	font-weight: normal;
	background-position: right;
	line-height: 1;
}
.apipublic {
	background: url('../icon/eye.svg') center no-repeat;
	vertical-align: middle;
	font-size: 1.2rem;
	cursor: pointer;
}
#roster .excuses {
	float: right;
	position: relative;
	top: 6px; right: -15px;
}
h1 .actions { padding-left: 0.25em; }
h1 .actions a { font-size: 0.5em; }
.actions.expand a {
	width: auto;
	padding-right: 1.25em;
}
.actions.expand a::before { content: attr(title); }

.edit:hover, .actions a:hover, #roster .excuses:hover, .apipublic:hover { opacity: 0.75; }
table .actions {
	border-left-color: transparent;
	padding: 0 5px;
	font-size: 1em;
}
table.events .actions a { visibility: hidden; }
table.events tr:hover .actions, table.events td.editing + td.actions { border-left-color: #CCC; }
table.events tr:hover .actions a, table:not(#schemaitems) td.editing + td.actions a { visibility: visible; }
#roster [data-excused] .actions a.excuses { visibility: visible; }

table.sortable th::after {
	content: '';
	float: right;
	color: #CCC;
	margin: 2px -10px -2px 15px;
	width: 12px;
}
table.sortable th[data-sort="desc"]::after { content: '↓'; }
table.sortable th[data-sort="asc"]::after { content: '↑'; }

.actions:not(.expand) a:hover::after, #roster .excuses:hover::after,
#collapse:hover::after, .events .q:hover::after, .apipublic:hover::after {
	content: attr(title);
	display: block;
	position: absolute;
	top: -30px; left: -2px;
	height: 24px;
	background: #000;
	border-radius: 3px;
	padding: 0 10px;
	font-size: 0.7rem;
	color: #CCC;
	white-space: nowrap;
	pointer-events: none;
	line-height: 2;
}
.actions:not(.expand) a:hover::before, #roster .excuses:hover::before,
#collapse:hover::before, .events .q:hover::before, .apipublic:hover::before {
	content: '';
	display: block;
	position: absolute;
	border-color: #000 transparent transparent;
	border-style: solid;
	border-width: 5px;
	pointer-events: none;
	top: -6px;
}

.admin-edit h1#name:not(.editing) .actions a:hover::after { content: attr(title) ' Class'; }
.admin-schema h1#name:not(.editing) .actions a:hover::after { content: attr(title) ' Schema'; }
#schemaselect a.edit:hover::after { content: attr(title) ' Schema'; }
#email a.edit:hover::after { content: attr(title) ' Email Address'; }
#password a.edit:hover::after { content: attr(title) ' Password'; }
.events a.edit:hover::after, .events a.delete:hover::after { content: attr(title) ' Event'; }
.studentmodal > .actions a.delete:hover::after, .studentmodal > .actions a.edit:hover::after { content: attr(title) ' Student'; }
.question .studentmodal > .actions a:hover::after { content: attr(title) ' Question'; }
.inactive .studentmodal > .actions a.archive:hover::after { content: 'Unarchive Question'; }

#schemaitems .actions a { font-size: 1em; }

/* ======
   Modal
   ====== */

dialog {
	width: 640px;
	padding: 0;
	background: rgb(255 255 255 / 90%);
	backdrop-filter: blur(10px);
	border: none;
	border-radius: 12px;
	box-shadow: 0 5px 10px rgb(0 0 0 / 20%);
	transition: 0.2s opacity;
	overflow: visible;
}

.loader {
	width: 48px; height: 48px;
	border-radius: 50%;
	margin: 3em auto;
	border-top: 3px solid rgb(0 0 0 / 25%);
	border-right: 3px solid transparent;
	box-sizing: border-box;
	animation: rotation 1s linear infinite;
}

@keyframes rotation {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
} 

dialog.transit { opacity: 0; }
dialog > div { padding: 15px 30px; }
dialog::backdrop {
	background: rgb(0 0 0 / 10%);
	backdrop-filter: blur(1px);
	cursor: pointer;
	transition: 0.2s background, 0.2s backdrop-filter;
}
dialog.transit::backdrop {
	background: transparent;
	backdrop-filter: blur(0);
	pointer-events: none;
}
dialog .note, dialog .excused {
	font-size: 0.8em;
	position: relative;
	top: -1.2em;
	color: #555;
	margin: 0;
}
dialog table {
	margin: 0 -30px;
	width: calc(100% + 60px);
}
dialog .buttons { text-align: right; }
dialog .buttons button { margin-left: 1em; }
dialog table tr th:first-child, dialog table tr td:first-child, dialog table tbody:empty::before { padding-left: 30px; }
dialog table:last-child { margin-bottom: -15px; }
dialog h2, dialog h3 { margin-top: 0.5em; }
.schemalist { margin-left: 0.5em; }
.result-button {
	height: 1.11em; width: 1.11em; /* 16px at 0.9em */
	display: inline-block;
	vertical-align: middle;
	margin-top: -3px;
	background-size: 0.9em 0.9em;
	background-repeat: no-repeat;
	background-position: center;
	color: #FFF;
	text-align: center;
	line-height: 1.11em;
}
table#schemae .result-button {
	flex: 1;
	margin-right: 0;
}
.events .result-button { font-size: 0.9rem; }
.result-button:first-of-type {
	border-top-left-radius: 2px;
	border-bottom-left-radius: 2px;
}
.result-button:last-of-type {
	margin-right: 1em;
	border-top-right-radius: 2px;
	border-bottom-right-radius: 2px;
}
.result-button.unselected {
	opacity: 0.25;
	cursor: pointer;
}
.result-button.unselected:hover {
	opacity: 0.5;
}

.events .q {
	height: 1.18em; width: 1.18em;
	display: inline-block;
	background-image: url("../icon/svg.php?icon=question-circle-fill&color=777");
	background-size: 1.18em 1.18em;
	vertical-align: middle;
	cursor: pointer;
	margin-left: 1em;
	position: relative;
}

dialog div > .actions {
	position: absolute;
	right: 10px; top: 1.35em;
	font-size: 1.25em;
}
.excused .actions { font-size: 1.25em; } /* Cancels out the 0.8 */

dialog .error {
	/* font-size: .85em;
	margin: 2em; */
	color: #900;
}

/* ========
   Schemae
   ======== */

#schemaitems td { padding: 3px 20px; }
#schemaitems tr.locked td.value { padding-left: 2.1em; }
#schemaitems td:last-child {
	padding-left: 0;
	border-left: none;
}
.colortext {
	vertical-align: top;
	margin: 0.35em 0.5em 0;
	display: inline-block;
}
input[name="text"] {
	font-size: 2.5em;
	text-align: center;
	width: 2em;
	padding: 0.1em;
}
details {
	border: 1px solid rgba(0, 0, 0, 0.15);
	margin: 2em 0;
	padding: 0 2em;
	max-width: 840px;
}
summary { list-style: none; }
summary::-webkit-details-marker { display: none; } /* Necessary for Safari */
summary h2 {
	margin: 0 -2rem;
	padding: 1em 2rem;
}
summary h2:hover {
	background: rgb(0 0 0 / 5%);
	cursor: pointer;
}
summary h2::after {
	content: '';
	display: inline-block;
	height: 1rem; width: 1rem;
	background-image: url("../icon/svg.php?icon=chevron-down&color=777");
	background-size: 1rem 1rem;
	margin: 0 6px -2px 0.5em;
}
details[open] summary h2::after { background-image: url("../icon/svg.php?icon=chevron-up&color=777"); }
details li { margin: 0.4em 0; }
#save { margin: 0 0 1em; }

#schemae td:first-child { font-size: 1em; }
#schemae td:nth-child(2) {
	font-size: 1.5em;
	padding: 5px 20px;
	display: flex;
}

.studentinfo {
	background: #666;
	border: 20px solid #333; 
	padding: 2.25em 0 0;
	border-radius: 30px;
	max-width: 640px;
	color: #FFF;
	text-align: center;
}
.studentinfo h2 { margin: 0; }
.studentinfo .note {
	height: 1.5em;
	margin: 0.5em 2em 0;
	font-style: italic;
	color: #CCC;
}
.studentinfo ul {
	padding: 0;
	list-style: none;
	display: flex;
	margin: 1.5em 0 0;
}
.studentinfo li { flex: 1; }
.studentinfo button {
	width: 100%; height: 1.5em;
	font-size: 4em;
	padding: 10px 0;
	background-size: 1em 1em;
	background-repeat: no-repeat;
	background-position: center;
	color: #FFF;
	border-radius: 0;
	border-bottom: none;
	margin: 0;
}
.studentinfo li:first-child button { border-radius: 0 0 0 10px; }
.studentinfo li:last-child button { border-radius: 0 0 10px 0; }

/* =================
   Header and Footer
   ================= */

#userbar {
	background: #555;
	margin: 0 -40px 1.5em;
	border-bottom: 1px solid #333;
	padding: 0 40px;
	text-align: center;
}
#userbar::after {
	content: '';
	display: block;
	clear: both;
}
#userbar a {
	display: block;
	color: #BBB;
	font-size: 0.8em;
	padding: 8px;
	margin-bottom: -1px;
}
#userbar a:hover {
	background: rgb(255 255 255 / 10%);
	color: #CCC;
}
#backlink { float: left; }
#userbar #rightside {
	float: right;
	display: flex;
}
#userbar .gravatar {
	height: 20px; width: 20px;
	margin: 0 4px -6px 0;
	border: 1px solid #999;
}

#userbar #logo {
	width: 100px;
	display: inline-block;
	text-indent: -9999px;
	background: url("../icon/svg.php?icon=logo&color=FFF") center 8px no-repeat;
	background-size: 75px;
	opacity: 0.75;
}
#userbar #logo:hover { opacity: 1; }

#footer {
	padding: 10px 0;
	font-size: 0.8em;
	font-style: italic;
	color: #999;
	border-top: 1px solid rgb(0 0 0 / 10%);
	margin-top: 20px;
}
footer span + span::before {
	content: '•';
	margin: 0 1.5em;
	color: #555;
	font-style: normal;
}

/* =========
   User page
   ========= */

#gravatar-link {
	float: left;
	margin: -1.5em 15px 0 0;
	position: relative;
}
#gravatar-link::after {
	border: 1px solid rgb(0 0 0 / 20%);
	border-top: none;
	position: absolute;
	content: '';
	height: 100%; width: 100%;
	left: 0; top: 0;
	box-sizing: border-box;
	pointer-events: none;
	border-radius: 0 0 5px 5px;
}
#gravatar-link:hover { opacity: 0.85; }
main .gravatar {
	width: 5em;
	display: block;
	border-radius: 0 0 5px 5px;
}

#password::after, .admin-user p > small {
	content: "Last changed " attr(data-date);
	display: block;
	font-size: small;
	color: #777;
}

#orcid .button, .button#orcid {
	background: #ACDA53 url("/icon/orcid.svg") 10px center/12px 12px no-repeat;
	color: #FFF;
	font-size: small;
	padding: 0 13px 0 30px;
	border-bottom-width: 2px;
	margin: 0 0 0 0.5em;
}
#orcid .button:hover, .button#orcid:hover { background-color: #8cba43; }
#orcid .actions + .button { display: none; }

@media screen and (max-width: 48em) {
	body { padding: 0 20px; }
	#userbar {
		margin: 0 -20px 1.5em;
		padding: 0 20px;
	}
	section > table {
		margin: 0 -20px;
		width: calc(100% + 40px);
	}
	table td, table th {
		padding-left: 12px;
		padding-right: 12px;
	}
	table tr th:first-child, table tr td:first-child, table tbody:empty::before { padding-left: 20px; }
	table.sortable th::after { margin-right: -5px; }
	#roster .excuses { right: -10px; }

	dialog {
		margin: auto 0 0;
		max-width: 100vw;
		width: 100%;
		border-radius: 12px 12px 0 0;
		box-shadow: 0 -5px 15px rgb(0 0 0 / 20%);
		transition: 0.25s margin-bottom, 0.25s opacity;
	}
	dialog.transit { margin-bottom: -10em; }
	#searchcontain {
		display: block;
		margin-left: 0;
	}

	h1#name input {
		padding: 0.3em 0.4em;
		margin: calc(-0.3em - 1px) calc(-0.4em - 1px);
	  }
}
@media screen and (max-width: 30em) {
	#backlink span { display: none; }
}