html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block;
}
ol,
ul {
	list-style: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* ------ */

a > img {
	border: none;
}
select,
input,
textarea {
	resize: vertical;
	font-size: inherit;
}
textarea,
pre {
	margin: 0;
	padding: 0;
	outline: 0;
	border: 0;
}
select,
textarea,
input:not([type="file"]) {
	border: 1px solid #abc;
}
textarea,
input:not([type="file"]) {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 20px;
	background: #fff;
}
textarea,
input:not([type="file"]) {
	box-sizing: border-box;
	padding: 3px 5px;
	border-radius: 3px;
}
textarea {
	width: 100%;
}

/* ======================== */

@media print {
	* {
		background: none !important;
	}
	header,
	nav {
		display: none !important;
	}
}

/* ======================== */
/* --- PAGE CONTAINERS --- */

html {
	height: 100%;
	background-color: #89a;
}
html.external {
}
body {
	min-height: 100%;
	min-height: 100vh;
	margin: 1px auto;
	padding: 0 10px 35px 10px;
	background-color: #fff;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 16px;
	color: #333;
}
body.external {
	width: 850px;
	padding-top: 1px;
}

.content_wrapper {
	position: relative;
}

/* ======================== */
/* --- FOCUS INDICATORS --- */

:root {
	--focus-ring-color: dodgerblue;
}

/* Note: ':focus-visible' is widely supported now,
/* but Safari did not add it until Mar 2022.
/* Browsers that do not support ':focus-visible'
/* will continue to use their default focus indicators.

/* Remove potential default browser styling */
:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}

:focus-visible {
	outline: 2px solid var(--focus-ring-color);
	box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.4);
}

/* Text links */
a:not(.button, .buttonlike, .topbutton, .logout-button):focus-visible {
	outline-offset: 2px;
	box-shadow: none;
}

/* The 'focus-ring' class can be used to put the focus ring on
/* a parent of the focused element instead of the focused element.
/* This is useful, for example, when hiding overflow also hides or
/* partially hides a focus ring. */

/* Remove focus rings on children */
.focus-ring :focus-visible {
	outline: none;
	box-shadow: none;
}

/* Apply focus ring to element whenever a child has focus */
.focus-ring:focus-within {
	outline: 2px solid var(--focus-ring-color);
	outline-offset: 2px;
	box-shadow: none;
}

/* ================================= */
/* --- BACKGROUNDS, COLORS, ETC --- */

/* --------------------------------------------- */
/* flats */

/* --- regular flats --- */

.flatpane.red {
	background: none; /* kill cascade */
	background-color: #fff6f6;
	border: 1px solid #f5e0e0;
}
.flatpane.purple {
	background: none; /* kill cascade */
	background-color: #faf0fa;
	border: 1px solid #f0e0f0;
}
.flatpane.blue {
	background: none; /* kill cascade */
	background-color: #f0f5fa;
	border: 1px solid #e0e5ff;
}
.flatpane.sideblue {
	background: none; /* kill cascade */
	background-color: #d8e4ee;
	border: 1px solid #bcd;
}
.flatpane.gray {
	background: none; /* kill cascade */
	background-color: #f0f0f0;
	border: 1px solid #bbb;
}

.flatpane.tab {
	background: none; /* kill cascade */
	background-color: #eee; /* tab backgroud */
	border: none;
}

/* --- dark flats --- */

.flatpane.darkred {
	background: none; /* kill cascade */
	background-color: #faeaf0;
	border: 1px solid #ead5da;
}
.flatpane.darkpurple {
	background: none; /* kill cascade */
	background-color: #faeafa;
	border: 1px solid #f0d0f0;
}
.flatpane.darkblue {
	background: none; /* kill cascade */
	background-color: #eaf0fa;
	border: 1px solid #d5dafa;
}
.flatpane.darkgray {
	background: none; /* kill cascade */
	background-color: #ddd;
	border: 1px solid #aaa;
}

/* --------------------------------------------- */
/* gradients: declare a shade on parent, then trigger on child with .catchgradient */

.catchgradient {
	border-style: solid;
	border-left-width: 1px;
	border-right-width: 1px;
}

/* --- regular gradients --- */

.red .catchgradient {
	background: #ebd5d5; /* fallback */
	background: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(#ebd5d5),
		to(#fff)
	);
	background: -webkit-linear-gradient(top, #ebd5d5 0%, #fff 100%);
	background: -o-linear-gradient(top, #ebd5d5 0%, #fff 100%);
	background: linear-gradient(to bottom, #ebd5d5 0%, #fff 100%);
	border-color: #ebd5d5;
}
.purple .catchgradient {
	background: #f0dbf0; /* fallback */
	background: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(#f0dbf0),
		to(#fff)
	);
	background: -webkit-linear-gradient(top, #f0dbf0 0%, #fff 100%);
	background: -o-linear-gradient(top, #f0dbf0 0%, #fff 100%);
	background: linear-gradient(to bottom, #f0dbf0 0%, #fff 100%);
	border-color: #f0dbf0;
}
.blue .catchgradient {
	background: #eaf0fa; /* fallback */
	background: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(#eaf0fa),
		to(#fff)
	);
	background: -webkit-linear-gradient(top, #eaf0fa 0%, #fff 100%);
	background: -o-linear-gradient(top, #eaf0fa 0%, #fff 100%);
	background: linear-gradient(to bottom, #eaf0fa 0%, #fff 100%);
	border-color: #eaf0fa;
}
.sideblue .catchgradient {
	background: #d8e4ee; /* fallback */
	background: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(#d8e4ee),
		to(#fff)
	);
	background: -webkit-linear-gradient(top, #d8e4ee 0%, #fff 100%);
	background: -o-linear-gradient(top, #d8e4ee 0%, #fff 100%);
	background: linear-gradient(to bottom, #d8e4ee 0%, #fff 100%);
	border-color: #d8e4ee;
}

hgroup.catchgradient {
	display: table;
	margin: 1em 0 0 0;
	height: 1.2em;
	border-radius: 0 10px 0 0;
	text-align: left;
	min-width: 40%;
	text-shadow: 0 0 3px #fff;
	border-left: none;
}
hgroup.catchgradient h1 {
	display: inline-block;
	margin: 0;
	padding: 6px 3px 3px 13px;
	min-width: 0;
	vertical-align: bottom;
	font-size: 16px;
}
hgroup.catchgradient h2 {
	display: inline-block;
	vertical-align: bottom;
	min-width: 0;
	font-weight: normal;
	font-size: 16px;
}

.red hgroup.catchgradient {
	background: none; /* kill cascade */
	background-color: #ebd5d5;
	border-top: 2px solid #a77;
	border-right: 2px solid #a77;
	color: #700;
}
.purple hgroup.catchgradient {
	background: none; /* kill cascade */
	background-color: #f0dbf0;
	border-top: 2px solid #8566a4;
	border-right: 2px solid #8566a4;
	color: #505;
}
.blue hgroup.catchgradient {
	background: none; /* kill cascade */
	background-color: #eaf0fa;
	border-top: 2px solid #77c;
	border-right: 2px solid #77c;
	color: #007;
}
.sideblue hgroup.catchgradient {
	background: none; /* kill cascade */
	background-color: #d8e4ee;
	border-top: 2px solid #567;
	border-right: 2px solid #567;
	color: #234;
}

/* --- pale gradients --- */

.palered .catchgradient {
	background: #fff6f6; /* fallback */
	background: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(#fff6f6),
		to(#fff)
	);
	background: -webkit-linear-gradient(top, #fff6f6 0%, #fff 100%);
	background: -o-linear-gradient(top, #fff6f6 0%, #fff 100%);
	background: linear-gradient(to bottom, #fff6f6 0%, #fff 100%);
	border-color: #fff6f6;
}
.palepurple .catchgradient {
	background: #faf0fa; /* fallback */
	background: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(#faf0fa),
		to(#fff)
	);
	background: -webkit-linear-gradient(top, #faf0fa 0%, #fff 100%);
	background: -o-linear-gradient(top, #faf0fa 0%, #fff 100%);
	background: linear-gradient(to bottom, #faf0fa 0%, #fff 100%);
	border-color: #faf0fa;
}
.paleblue .catchgradient:not(.palegrey .catchgradient) {
	background: #f0f5fa; /* fallback */
	background: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(#f0f5fa),
		to(#fff)
	);
	background: -webkit-linear-gradient(top, #f0f5fa 0%, #fff 100%);
	background: -o-linear-gradient(top, #f0f5fa 0%, #fff 100%);
	background: linear-gradient(to bottom, #f0f5fa 0%, #fff 100%);
	border-color: #f0f5fa;
}
.palegrey .catchgradient {
	background: #eee; /* fallback */
	background: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(#eee),
		to(#fff)
	);
	background: -webkit-linear-gradient(top, #eee 0%, #fff 100%);
	background: -o-linear-gradient(top, #eee 0%, #fff 100%);
	background: linear-gradient(to bottom, #eee 0%, #fff 100%);
	border-color: #ccc;
}

.palered hgroup.catchgradient {
	background: none; /* kill cascade */
	background-color: #fff6f6;
	border-top: 2px solid #a77;
	border-right: 2px solid #a77;
	color: #700;
}
.palepurple hgroup.catchgradient {
	background: none; /* kill cascade */
	background-color: #faf0fa;
	border-top: 2px solid #8566a4;
	border-right: 2px solid #8566a4;
	color: #505;
}
.paleblue hgroup.catchgradient {
	background: none; /* kill cascade */
	background-color: #f0f5fa;
	border-top: 2px solid #77c;
	border-right: 2px solid #77c;
	color: #007;
}
.palegrey hgroup.catchgradient {
	background: none; /* kill cascade */
	background-color: #eee;
	border-top: 2px solid #77c;
	border-right: 2px solid #77c;
	color: #007;
}

/* ---------------------------------------- */
/* --- catchcolor (on headers, mostly) --- */

.purple .catchcolor,
.darkpurple .catchcolor,
.palepurple .catchcolor {
	color: #505;
}
.red .catchcolor,
.darkred .catchcolor,
.palered .catchcolor {
	color: #700;
}
.blue .catchcolor,
.darkblue .catchcolor,
.paleblue .catchcolor {
	color: #007;
}
.sideblue .catchcolor {
	color: #345;
}

h1.catchcolor {
	font-size: 16px;
}
h2.catchcolor {
	font-size: 14px;
}
h3.catchcolor {
	font-size: 12px;
}
h1.catchcolor,
h2.catchcolor,
h3.catchcolor {
	text-transform: uppercase;
	font-style: normal;
	margin: 0.25em 0 0.5em 0;
}

/* --- catchgradient (on table cells) --- */

td.catchgradient {
	border-top-width: 1px;
	border-right-width: 0;
	border-left-width: 0;
	border-bottom-width: 0;
	border-bottom-color: #fff !important;
}
tr:first-child td.catchgradient {
	border-top-width: 0;
}
td.catchgradient:first-child {
	border-left-width: 1px;
}
td.catchgradient:last-child {
	border-right-width: 1px;
}

/* --- strongborder --- */

.red.strongborder .catchgradient,
.palered.strongborder .catchgradient {
	border-color: #daa;
}
.purple.strongborder .catchgradient,
.palepurple.strongborder .catchgradient {
	border-color: #cac;
}
.blue.strongborder .catchgradient,
.paleblue.strongborder .catchgradient:not(.palegrey .catchgradient) {
	border-color: #aad;
}
.sideblue.strongborder .catchgradient {
	border-color: #abc;
}

/* ================================= */
/* --- CONTENT STYLING, ETC --- */

h1.pageheader {
	font-size: 18px;
	color: #900;
	margin: 10px 0 20px 0;
	padding: 0 10px 2px 10px;
}

h1.actionheader {
	color: #700;
	font-size: 24px;
	margin: 0 0 48px 0;
	padding: 0;
}

/* ------ */

div.std,
section.std {
	padding: 0.25em 16px 0.5em 16px;
	line-height: 1.4;
}
.std h3 {
	margin: 0.5em 0 0.25em 0;
	font-weight: bold;
}
.std p {
	margin: 0.5em 0;
}
dl.std dt {
	font-weight: bold;
	margin-top: 0.25em;
}
dl.std dd {
	margin-left: 2em;
	margin-bottom: 0.25em;
	line-height: 1.3;
}
dl.std dd p {
	margin-right: 1.5em;
	margin-top: 3px;
}
ul.std {
	list-style: circle inside;
}
ul.std li {
	margin: 0.25em 0;
	padding-left: 2em;
	text-indent: -2em;
}

/* ================================= */

/* -- LINKS --- */
a {
	text-decoration: none;
	cursor: pointer;
}
a,
a:link,
a:visited {
	color: #00c;
}
a:hover {
	color: #c00;
	text-decoration: underline;
}
a:active {
	color: red;
}

.pointer {
	cursor: pointer;
}

/* -- BUTTONS --- */
input[type="submit"],
input[type="button"],
button,
.button,
.buttonlike {
	background-color: #fff;
	border-radius: 6px;
	color: #00c;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}
input[type="submit"],
input[type="button"],
button,
.button {
	display: inline-block;
	margin: 2px 0.5em 2px 0;
	padding: 2px 10px 1px 10px !important;
	text-transform: none;
	font-weight: normal;
	font-size: 16px;
	line-height: 18px;
}
button {
	padding-bottom: 2px; /*  ¯\_(ツ)_/¯  */
}

input[type="submit"],
input[type="button"],
button,
.button,
.buttonlike {
	border: 1px solid #ddf;
}
.blue input[type="submit"],
.blue input[type="button"],
.blue button,
.blue .button,
.blue .buttonlike,
.purple .button,
.purple .buttonlike,
.palepurple .button,
.palepurple .buttonlike,
.darkblue .button,
.darkblue .buttonlike,
.darkred .button,
.darkred .buttonlike {
	border-color: #ccf;
}
.gray input[type="submit"],
.gray input[type="button"],
.gray button,
.gray .button,
.gray .buttonlike,
.sideblue .button,
.sideblue .buttonlike,
.darkpurple .button,
.darkpurple .buttonlike,
.darkgray .button,
.darkgray .buttonlike {
	border-color: #bbf;
}

.button.occulted,
.buttonlike.occulted {
	/* only visble as button on hover; eg, refreq actions */
	background-color: transparent;
	border-color: transparent;
}
.button.occulted {
	margin-top: 0;
	margin-bottom: 0;
}

input[type="submit"]:hover,
input[type="button"]:hover,
button:hover,
.button:hover,
.buttonlike:hover,
.button:active,
.buttonlike:active,
button:focus,
.button:focus,
.buttonlike:focus,
.button.current, /* "pressed/selected" button, eg. on Find Ref page */
.current .button,
.buttonlike.current,
.current .buttonlike {
	border-color: #88b;
	background-color: #eaefff;
	text-decoration: none;
	color: #c00 !important;
}
.button:visited,
.buttonlike:visited {
	color: #00c;
}

.button.disabled,
.buttonlike.disabled,
.button.disabled:hover,
.buttonlike.disabled:hover,
.button.disabled:visited,
.buttonlike.disabled:visited {
	color: #aaa !important;
	cursor: default;
	background-color: #fff;
}

.button.highlighted {
	font-weight: bold;
}

/* ---- */

.capsbutton {
	display: inline-block;
	margin: 2px 0.5em 2px 0;
	padding: 1px 7px 0 7px;
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
}

.lcbutton {
	display: inline-block;
	margin: 2px 0.5em 2px 0;
	padding: 1px 7px 0 7px;
	font-size: 12px;
	font-weight: bold;
	text-transform: lowercase;
}

/* ================================= */
/* -- WIDGETS --- */

del {
	position: relative;
	display: inline-block;
	text-decoration: none;
}
del::before {
	position: absolute;
	right: -2px;
	bottom: 50%;
	width: -webkit-calc(100% + 4px);
	width: calc(100% + 4px);
	content: "";
	border-bottom: 2px solid #c00;
}

/* ================================= */
/* -- EF LOGO --- */

.img-eflogo-localized,
.img-eflogo-plain {
	height: 85px;
	border: none;
}

.outerpage-eflogo {
	position: absolute;
	top: -7px;
	right: 16px;
}
.a-outerpage-eflogo .img-eflogo-localized,
.a-outerpage-eflogo .img-eflogo-plain {
	position: relative;
}

.oopsie-eflogo {
	position: absolute;
	top: 3px;
	right: 20px;
}
.a-oopsie-eflogo .img-eflogo-localized,
.a-oopsie-eflogo .img-eflogo-plain {
	position: relative;
}

/* ================================= */
/* -- ETC --- */

.emailmessage {
	margin: 0;
	padding: 7px 14px;
	border-radius: 7px;
	border: 1px solid #ccd;
	background-color: #fff;
	font-family: "Courier", "Courier New", monospace;
	color: #444;
	white-space: pre-wrap;
}
.emailmessage pre {
	/* might need to wrap content in <pre> to preserve spaces in copy-pasta in some browsers, eg, Firefox */
	font-family: inherit;
	white-space: inherit;
}

ul.horiz {
	margin: 0 auto 0 auto;
}
ul.horiz li {
	display: inline-block;
}

.emailaddress::before {
	content: "⟨";
	font-weight: bold;
	padding-right: 0.1em;
}
.emailaddress::after {
	content: "⟩";
	font-weight: bold;
	padding-left: 0.1em;
}

/* ========================================================== */
/* ========================================================== */

/* --- "FUNCTIONAL" CLASSES --- */

.smaller95 {
	font-size: 0.95em !important;
}
.smaller90 {
	font-size: 0.9em !important;
}
.smaller85 {
	font-size: 0.85em !important;
}
.smaller80 {
	font-size: 0.8em !important;
}
.smaller75 {
	font-size: 0.75em !important;
}
.smaller70 {
	font-size: 0.7em !important;
}

.font8 {
	font-size: 8px !important;
}
.font9 {
	font-size: 9px !important;
}
.font10 {
	font-size: 10px !important;
}
.font11 {
	font-size: 11px !important;
}
.font12 {
	font-size: 12px !important;
}
.font13 {
	font-size: 13px !important;
}
.font14 {
	font-size: 14px !important;
}
.font15 {
	font-size: 15px !important;
}
.font16 {
	font-size: 16px !important;
}
.font18 {
	font-size: 18px !important;
}
.font20 {
	font-size: 20px !important;
}
.font22 {
	font-size: 22px !important;
}
.font24 {
	font-size: 24px !important;
}
.font30 {
	font-size: 30px !important;
}

.italic {
	font-style: italic !important;
}
.upright {
	font-style: normal !important;
}
.bold {
	font-weight: bold !important;
}
.medium {
	font-weight: normal !important;
}

.strike {
	text-decoration: line-through !important;
}

/* This used to be done with text-decoration, but the line-through was a bit low.
  This solution was cribbed from https://stackoverflow.com/a/66794802/733823.
 */
.strike-red {
	text-decoration: none;
	position: relative;
}
.strike-red::before {
	content: "";
	width: 100%;
	position: absolute;
	right: 0;
	top: calc(50% - 2px);
	border-bottom: 2px solid #a00;
}

.positioned {
	position: relative;
}
.floatbottomright {
	position: absolute;
	right: 0;
	bottom: 0;
}
.floatleft {
	float: left;
}
.floatright {
	float: right;
}
.clear {
	clear: both;
}

.uppercase {
	text-transform: uppercase;
}

.underline,
.u {
	text-decoration: underline;
}

.nowrap,
.s {
	white-space: nowrap;
}
.preline {
	white-space: pre-line;
}
.prewrap {
	white-space: pre-wrap;
}
.tt {
	font-family: "Courier", "Courier New", monospace !important;
}
.rm {
	font-family: "Times New Roman", "Times", serif !important;
}

.flushright {
	text-align: right !important;
}
.flushleft {
	text-align: left !important;
}
.center {
	text-align: center !important;
}

.hangindent {
	padding-left: 1em;
	text-indent: -1em;
}

.hidden {
	display: none;
}

/* ----------- */

.xxred {
	color: #e00 !important;
}
.xred {
	color: #c00 !important;
}
.mred {
	color: #a00 !important;
}
.mmred {
	color: #900 !important;
}
.dkred {
	color: #700 !important;
}
.lred {
	color: #c99 !important;
}

.linkblue {
	color: #00c !important;
}
.dkblue {
	color: #007 !important;
}
.lblue {
	color: #99c !important;
}

.xxpurple {
	color: #c0c !important;
}
.xpurple {
	color: #a0a !important;
}
.mpurple {
	color: #808 !important;
}
.dkpurple {
	color: #505 !important;
}

.xgreen {
	color: #0a0 !important;
}
.mgreen {
	color: #090 !important;
}
.dkgreen {
	color: #070 !important;
}
.lgreen {
	color: #9c9 !important;
}

.xxxgray {
	color: #ccc !important;
}
.xxgray {
	color: #aaa !important;
}
.xgray {
	color: #777 !important;
}
.dkgray {
	color: #333 !important;
}

.xorange {
	color: #fa0 !important;
}

.white {
	color: #fff !important;
}
.black {
	color: #000 !important;
}

/* ----------- */

.border-xred {
	border: 1px solid #c00 !important;
}
.border-mred {
	border: 1px solid #a00 !important;
}
.border-dkred {
	border: 1px solid #700 !important;
}
.border-dkpurple {
	border: 1px solid #505 !important;
}
.border-xgreen {
	border: 1px solid #0a0 !important;
}
.border-mgreen {
	border: 1px solid #090 !important;
}
.border-xgray {
	border: 1px solid #777 !important;
}
.border-xred.w2,
.border-mred.w2,
.border-dkred.w2,
.border-dkpurple.w2,
.border-xgreen.w2,
.border-mgreen.w2,
.border-xgray.w2 {
	border-width: 2px !important;
}

/* ----------- */

.topborder.abc {
	border-top: 1px solid #abc;
}

/* ----------- */
.topspaced.x0 {
	margin-top: 0;
}
.topspaced.x01 {
	margin-top: 0.1em;
}
.topspaced.x025 {
	margin-top: 0.25em;
}
.topspaced.x05 {
	margin-top: 0.5em;
}
.topspaced.x075 {
	margin-top: 0.75em;
}
.topspaced.x1 {
	margin-top: 1em;
}
.topspaced.x15 {
	margin-top: 1.5em;
}
.topspaced.x2 {
	margin-top: 2em;
}
.topspaced.x3 {
	margin-top: 3em;
}
.topspaced.x4 {
	margin-top: 4em;
}

.botspaced.x0 {
	margin-bottom: 0;
}
.botspaced.x01 {
	margin-bottom: 0.1em;
}
.botspaced.x025 {
	margin-bottom: 0.25em;
}
.botspaced.x05 {
	margin-bottom: 0.5em;
}
.botspaced.x075 {
	margin-bottom: 0.75em;
}
.botspaced.x1 {
	margin-bottom: 1em;
}
.botspaced.x15 {
	margin-bottom: 1.5em;
}
.botspaced.x2 {
	margin-bottom: 2em;
}
.botspaced.x3 {
	margin-bottom: 3em;
}
.botspaced.x4 {
	margin-bottom: 4em;
}

/* --- */

.leftspaced.x0 {
	margin-left: 0;
}
.leftspaced.x01 {
	margin-left: 0.1em;
}
.leftspaced.x025 {
	margin-left: 0.25em;
}
.leftspaced.x05 {
	margin-left: 0.5em;
}
.leftspaced.x075 {
	margin-left: 0.75em;
}
.leftspaced.x1 {
	margin-left: 1em;
}
.leftspaced.x15 {
	margin-left: 1.5em;
}
.leftspaced.x2 {
	margin-left: 2em;
}
.leftspaced.x3 {
	margin-left: 3em;
}
.leftspaced.x4 {
	margin-left: 4em;
}

.rightspaced.x0 {
	margin-right: 0;
}
.rightspaced.x01 {
	margin-right: 0.1em;
}
.rightspaced.x025 {
	margin-right: 0.25em;
}
.rightspaced.x05 {
	margin-right: 0.5em;
}
.rightspaced.x075 {
	margin-right: 0.75em;
}
.rightspaced.x1 {
	margin-right: 1em;
}
.rightspaced.x15 {
	margin-right: 1.5em;
}
.rightspaced.x2 {
	margin-right: 2em;
}
.rightspaced.x3 {
	margin-right: 3em;
}
.rightspaced.x4 {
	margin-right: 4em;
}

/* --- */

.toppadded.x0 {
	padding-top: 0;
}
.toppadded.x01 {
	padding-top: 0.1em;
}
.toppadded.x025 {
	padding-top: 0.25em;
}
.toppadded.x05 {
	padding-top: 0.5em;
}
.toppadded.x075 {
	padding-top: 0.75em;
}
.toppadded.x1 {
	padding-top: 1em;
}
.toppadded.x15 {
	padding-top: 1.5em;
}
.toppadded.x2 {
	padding-top: 2em;
}
.toppadded.x3 {
	padding-top: 3em;
}
.toppadded.x4 {
	padding-top: 4em;
}

.botpadded.x0 {
	padding-bottom: 0;
}
.botpadded.x01 {
	padding-bottom: 0.1em;
}
.botpadded.x025 {
	padding-bottom: 0.25em;
}
.botpadded.x05 {
	padding-bottom: 0.5em;
}
.botpadded.x075 {
	padding-bottom: 0.75em;
}
.botpadded.x1 {
	padding-bottom: 1em;
}
.botpadded.x15 {
	padding-bottom: 1.5em;
}
.botpadded.x2 {
	padding-bottom: 2em;
}
.botpadded.x3 {
	padding-bottom: 3em;
}
.botpadded.x4 {
	padding-bottom: 4em;
}

/* --- */

.leftpadded.x0 {
	padding-left: 0;
}
.leftpadded.x01 {
	padding-left: 0.1em;
}
.leftpadded.x025 {
	padding-left: 0.25em;
}
.leftpadded.x05 {
	padding-left: 0.5em;
}
.leftpadded.x075 {
	padding-left: 0.75em;
}
.leftpadded.x1 {
	padding-left: 1em;
}
.leftpadded.x15 {
	padding-left: 1.5em;
}
.leftpadded.x2 {
	padding-left: 2em;
}
.leftpadded.x3 {
	padding-left: 3em;
}
.leftpadded.x4 {
	padding-left: 4em;
}

.rightpadded.x0 {
	padding-right: 0;
}
.rightpadded.x005 {
	padding-right: 0.05em;
}
.rightpadded.x01 {
	padding-right: 0.1em;
}
.rightpadded.x025 {
	padding-right: 0.25em;
}
.rightpadded.x05 {
	padding-right: 0.5em;
}
.rightpadded.x075 {
	padding-right: 0.75em;
}
.rightpadded.x1 {
	padding-right: 1em;
}
.rightpadded.x15 {
	padding-right: 1.5em;
}
.rightpadded.x2 {
	padding-right: 2em;
}
.rightpadded.x3 {
	padding-right: 3em;
}
.rightpadded.x4 {
	padding-right: 4em;
}

/* --- */

.valign-top {
	vertical-align: top;
}
.valign-bot {
	vertical-align: bottom;
}
.valign-bline {
	vertical-align: baseline;
}

/* --- */

.white-bg-on-hover:hover,
.white-bg-on-hover:hover * {
	background-color: #fff;
}

/* --- */

.suppress-autotooltip::after {
	content: "";
	display: block;
}

/* --- */

.table {
	display: table;
}

.table-cell {
	display: table-cell;
}

.full-width {
	width: 100%;
}

/* --- */

.wordwrap {
	overflow-wrap: break-word;
}

.overflow-hidden {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* --- */

.display-block {
	display: block;
}

/* --- flexbox utilities --- */
.flex-col {
	display: flex;
	flex-direction: column;
}

.flex-row {
	display: flex;
	flex-direction: row;
}

.flex-grow1 {
	flex-grow: 1;
}

/* For eg making a bunch of flex items be more or less the same width (in row layout)
   or same height (in column layout).
   May not play well with margins and padding...
 */
.flex-grow-equal {
	flex-basis: 100%;
	flex-grow: 1;
}

.flex-jstfy-spcbtwn {
	justify-content: space-between;
}

/* dialogs */
dialog::backdrop {
	background-color: #000;
	opacity: 0.7;
}

/* border radii */
.br6 {
	border-radius: 6px;
}