/*//
@date 2025-04-04 23:41:13 UTC
@files 48 [
    "src\/imports.css",
    "src\/main.css",
    "src\/ext-bootstrap.css",
    "src\/ext-bootstrap\/anim.css",
    "src\/ext-bootstrap\/buttons.css",
    "src\/ext-bootstrap\/cargobay.css",
    "src\/ext-bootstrap\/code.css",
    "src\/ext-bootstrap\/dyes.css",
    "src\/ext-bootstrap\/filters.css",
    "src\/ext-bootstrap\/font-text-stuff.css",
    "src\/ext-bootstrap\/forms.css",
    "src\/ext-bootstrap\/hr.css",
    "src\/ext-bootstrap\/jumbotron.css",
    "src\/ext-bootstrap\/modal.css",
    "src\/ext-bootstrap\/opacity.css",
    "src\/ext-bootstrap\/overflow.css",
    "src\/ext-bootstrap\/position.css",
    "src\/ext-bootstrap\/responsive-container.css",
    "src\/ext-bootstrap\/tags.css",
    "src\/ext-materialdesignicons.css",
    "src\/ext-simpleicons.css",
    "src\/ext-litepicker.css",
    "src\/ext-grecaptcha.css",
    "src\/ext-editorjs.css",
    "src\/fx-text.css",
    "src\/design\/footer.css",
    "src\/design\/header.css",
    "src\/design\/page-note-dev.css",
    "src\/elements\/ace-editor.css",
    "src\/elements\/article.css",
    "src\/elements\/blog.css",
    "src\/elements\/collapser.css",
    "src\/elements\/dropsort.css",
    "src\/elements\/editor-html.css",
    "src\/elements\/field-tag-search.css",
    "src\/elements\/gallery.css",
    "src\/elements\/misc.css",
    "src\/elements\/nether-sensei.css",
    "src\/elements\/pager.css",
    "src\/elements\/pathbar.css",
    "src\/elements\/pillbox.css",
    "src\/elements\/pretty-modern-box.css",
    "src\/elements\/pretty-modern-navbar.css",
    "src\/elements\/sitemenu.css",
    "src\/elements\/statebtn.css",
    "src\/elements\/swiper.css",
    "src\/elements\/timeline.css",
    "src\/elements\/togglebtn.css"
]
//*/

/*//////////////////////////////////////////////////////////////////////////////
//// src/imports.css /////////////////////////////////////////////////////////*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,400;0,700;0,900;1,100;1,400;1,700;1,900&display=swap');

/*//////////////////////////////////////////////////////////////////////////////
//// src/main.css ////////////////////////////////////////////////////////////*/

/*//////////////////////////////////////////////////////////////////////////////
//// GLOBAL VARS /////////////////////////////////////////////////////////////*/

:root {
	--theme-anim-ease-fast: 150ms ease-in-out;
	--theme-anim-ease-slow: 300ms ease-in-out;

	--theme-black: #141414;
	--theme-white: #FDFDFD;

	--theme-red: #aa0000;
	--theme-red-txt: var(--theme-white);
	--theme-red-alt: #ff0000;
	--theme-red-alt-txt: var(--theme-white);

	--theme-orange: #EA7222;
	--theme-orange-txt: var(--theme-white);
	--theme-orange-alt: #ee9559;
	--theme-orange-alt-txt: var(--theme-white);

	--min-xs: 0px;
	--min-sm: 576px;
	--min-md: 768px;
	--min-lg: 992px;
	--min-xl: 1200px;
	--min-xxl: 1400px;
}

/*//////////////////////////////////////////////////////////////////////////////
//// DARK THEME //////////////////////////////////////////////////////////////*/

:root {

	/* these colours should be used to brand the theme to fit in with the
	logo and/or desired look. these should typically be somewhat bold colours
	to be used on primary attention getting elements. */

	--theme-primary:       #4e81e0;
	--theme-primary-alt:   #84a6e6;
	--theme-secondary:     #be78df;
	--theme-secondary-alt: #c39ad7 ;

	/* font settings for the theme. generally these should be the most
	readable fonts that you think look good, not any fancy things used for
	flavour */

	--theme-font-normal-family: 'Poppins', 'Segoe UI', 'Helvetica', sans-serif;
	--theme-font-normal-weight: 400;
	--theme-font-normal-letter-spacing: 0.03rem;

	--theme-font-mono-family: 'FiraCode', 'Consolas', 'Menlo', monospace;
	--theme-font-mono-weight: 400;
	--theme-font-mono-letter-spacing: 0.02em;

	/* these should be generically neutral colours as they will be used for
	various page elements for division and such. */

	--theme-body-fg:      #FAFAFA;

	--theme-body-bg:      #141414;
	--theme-body-bg-alt:  #0c0c0c;
	--theme-body-bg-alt0: var(--theme-body-bg);
	--theme-body-bg-alt2: var(--theme-body-bg-alt);
	--theme-body-bg-alt1: #17181f;
	--theme-body-bg-alt3: #1d1e29;

	--theme-menu-bg: #111111AA;
	--theme-menu-border: #141414;

	/* styles for glass panels of various opacity and filters. opacity is
	chosen via a bg class so that backdrop-filter can then apply the glass
	filters to it. */

	--theme-glass-bg-100: #000000FF;
	--theme-glass-bg-75:  #000000BD;
	--theme-glass-bg-50:  #0000007F;
	--theme-glass-bg-25:  #0000003F;
	--theme-glass-bg-0:   #00000000;

	--theme-glass-light-bg-100: #222222FF;
	--theme-glass-light-bg-75:  #222222BD;
	--theme-glass-light-bg-50:  #2222227F;
	--theme-glass-light-bg-25:  #2222223F;
	--theme-glass-light-bg-0:   #22222200;

	--theme-glass-filter-out:         contrast(1.0) saturate(1.0) blur(0.0px);
	--theme-glass-filter-thin:        contrast(1.0) saturate(0.5) blur(2.0px);
	--theme-glass-filter-thick:       contrast(1.0) saturate(0.5) blur(8.0px);
	--theme-glass-filter-frost-thin:  contrast(0.9) saturate(0.5) blur(2.0px);
	--theme-glass-filter-frost-thick: contrast(0.9) saturate(0.5) blur(8.0px);

	/* this section needs to be auditied */

	--theme-shadow: #000000AA;
	--theme-hover-bg: var(--theme-primary);
	--theme-hover-fg: #FAFAFA;

	--theme-dark-bg: #1A1A1A;
	--theme-dark-glass: #09090988;
	--theme-dark-fg: #FAFAFA;
	--theme-darker-bg: #080808;
	--theme-darker-fg: var(--theme-body-fg);

	--theme-light-bg: #F1F1F1;
	--theme-light-fg: #161616;
	--theme-lighter-bg: #FAFAFA;
	--theme-lighter-fg: var(--theme-body-bg);

	--theme-dark-bg-glass: rgba(40, 40, 40, 0.75);
	--theme-light-bg-glass: rgba(60, 60, 60, 0.75);

	/* *** */

	--theme-header-bg: #040404;
	--theme-header-color: #FBFBFB;
	--theme-footer-bg: #040404;

	--theme-form-bg: #222;
	--theme-form-fg: #fff;
	--theme-form-border: #666;

	--bs-body-color: var(--theme-body-fg);
	--bs-body-color-rgb: 253, 253, 253;
	--bs-code-color: var(--theme-primary-alt);
	--bs-link-hover-color: var(--theme-primary-alt);

	--bs-body-bg: var(--theme-body-bg);
	--bs-body-bg-rgb: 22, 22, 22;
	--bs-secondary-bg: #0A0A0A;
	--bs-secondary-bg-rgb: 10, 10, 10;
	--bs-tertiary-bg: #101010;
	--bs-tertiary-bg-rgb: 16, 16, 16;

	--bs-border-radius: 10px;
	--bs-btn-disabled-opacity: 0.25;

	--bs-tooltip-bg: var(--theme-glass-bg-75);
	--bs-tooltip-color: var(--bs-white);


}

/*//////////////////////////////////////////////////////////////////////////////
//// LIGHT THEME /////////////////////////////////////////////////////////////*/

[data-bs-theme="light"] {

	--theme-body-fg:      #161616;

	--theme-body-bg:      #fafafa;
	--theme-body-bg-alt0: var(--theme-body-bg);
	--theme-body-bg-alt:  #eaeaea;
	--theme-body-bg-alt1: #eaebf7;
	--theme-body-bg-alt2: var(--theme-body-bg-alt);
	--theme-body-bg-alt3: #e2e3f1;

	--theme-menu-bg: #FFFFFFDD;
	--theme-menu-border: #DDDDDD;

	--theme-dark-bg: #5a5a5a;
	--theme-dark-glass: #09090988;
	--theme-dark-fg: #FAFAFA;
	--theme-darker-bg: #474747;
	--theme-darker-fg: var(--theme-body-fg);

	--theme-glass-bg-100: #FFFFFFFF;
	--theme-glass-bg-75:  #FFFFFFBD;
	--theme-glass-bg-50:  #FFFFFF7F;
	--theme-glass-bg-25:  #FFFFFF3F;
	--theme-glass-bg-0:   #FFFFFF00;

	/* this section needs to be auditied */

	--theme-dark-glass: #cccccc34;

	/* *** */

	--theme-header-bg: #FFFFFF;
	--theme-footer-bg: #FFFFFF;

	--bs-body-color: var(--theme-body-fg);
	--bs-body-color-rgb: 4, 4, 4;

	--bs-body-bg-rgb: 242, 242, 242;
	--bs-secondary-bg: #F2F2F2;
	--bs-secondary-bg-rgb: 236, 236, 236;
	--bs-tertiary-bg: #F5F5F5;
	--bs-tertiary-bg-rgb: 248, 248, 248;

	--bs-border-radius: 10px;
	--bs-btn-disabled-opacity: 0.25;
}

/*//////////////////////////////////////////////////////////////////////////////
//// MISC ////////////////////////////////////////////////////////////////////*/

* {
	scrollbar-width: thin;
}

html, body {
	font-family: var(--theme-font-normal-family);
	font-weight: var(--theme-font-normal-weight);
	letter-spacing: var(--theme-font-normal-letter-spacing);
}

a:link:not(.btn),
a:visited:not(.btn) {
	border-bottom: 1px dotted var(--bs-body-color);
	color: var(--bs-body-color);
	text-decoration: none;
}

code,
a > code,
pre {
	color: var(--bs-code-color);
	font-family: var(--theme-font-mono-family);
	font-weight: var(--theme-font-mono-weight);
	letter-spacing: var(--theme-font-mono-letter-spacing);
}

img {
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
}


h1, h2, h3, h4 {
	font-weight: bold;
}

hr {
	opacity: 0.20;
}

strong {
	font-weight: bold;
}

table th,
table td {
	white-space: nowrap;
}

/*******************************************************************************
**** button stuff *************************************************************/

.btn {
	--bs-btn-border-width: 2px;
}

.btn-primary {
	--bs-btn-bg: var(--theme-primary);
	--bs-btn-hover-bg: var(--theme-primary-alt);
	--bs-btn-active-bg: var(--theme-primary-alt);
	--bs-btn-border-color: var(--theme-primary);
	--bs-btn-hover-border-color: var(--theme-primary-alt);
	--bs-btn-active-border-color: var(--theme-primary-alt);
}

.btn-outline-primary {
	color: var(--theme-primary);
	--bs-btn-hover-bg: var(--theme-primary-alt);
	--bs-btn-border-color: var(--theme-primary);
	--bs-btn-hover-border-color: var(--theme-primary-alt);
}

.zbtn-light {
	--bs-btn-bg: var(--theme-light-bg);
	--bs-btn-border-color: var(--theme-light-bg);
	--bs-btn-color: var(--theme-light-fg);
}

.zbtn-dark {
	--bs-btn-bg: var(--theme-form-bg);
	--bs-btn-border-color: var(--theme-form-bg);
	--bs-btn-color: var(--theme-form-fg);
}

.btn-dark-alt {
	--bs-btn-bg: var(--bs-btn-hover-bg);
	--bs-btn-border-color: var(--bs-btn-hover-bg);
	--bs-btn-color: var(--bs-btn-hover-fg);
}

.btn-dark-alt:hover {
	--bs-btn-bg: var(--bs-btn-active-bg);
	--bs-btn-border-color: var(--bs-btn-active-bg);
	--bs-btn-color: var(--bs-btn-active-fg);
}

.zbtn-outline-light {
	--bs-btn-border-color: var(--theme-light-bg);
	--bs-btn-color: var(--theme-light-bg);
	--bs-btn-hover-bg: var(--theme-light-bg-glass);
	--bs-btn-hover-color: var(--theme-light-bg);
}

[data-bs-theme="light"] .zbtn-outline-light {
	--bs-btn-border-color: var(--theme-dark-bg);
	--bs-btn-color: var(--theme-dark-bg);
	--bs-btn-hover-bg: var(--theme-dark-bg-glass);
	--bs-btn-hover-color: var(--theme-dark-bg);
}

.zbtn-outline-dark {
	--bs-btn-border-color: var(--theme-light-bg);
	--bs-btn-color: var(--theme-light-bg);
}

[data-bs-theme="light"] .zbtn-outline-dark {
	--bs-btn-border-color: var(--theme-dark-bg);
	--bs-btn-color: var(--theme-dark-bg);
}

.form-check-input:checked {
	background-color: var(--theme-primary);
}

.form-check-input.nui-theme-switch:checked {
	background-color: #d9aa51;
	border-color: #a5813e;
}

/*******************************************************************************
**** form stuff ***************************************************************/

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
	background-color: var(--theme-form-bg);
	border-color: var(--theme-form-border);
	color: var(--theme-form-fg);
}

.form-control:focus {
	transition: background-color 200ms;
}

.form-control::placeholder {
	color: var(--bs-body-color);
	opacity: 0.25;
	font-size: 0.8rem;
	letter-spacing: 0.1rem;
}

.btn {
	font-size: 0.80rem;
	font-weight: bold;
	letter-spacing: 0.03em;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	text-transform: uppercase;
}

.dropdown-menu {
	background-color: var(--theme-dark);
	backdrop-filter: var(--theme-glass-filter-thick);
	-webkit-backdrop-filter: var(--theme-glass-filter-thick);

	border-radius: 6px;
	box-shadow: 0px 0px 72px #0004;
	font-size: 0.9em;
	font-weight: 800;
	text-transform: uppercase;
}

.dropdown-menu .btn {
	white-space: nowrap;
	/* min-width: 256px; */
}

.dropdown-menu li {
	margin-bottom: 6px;
}

.dropdown-menu li:last-of-type {
	margin-bottom: 0px;
}

.dropdown-menu a.dropdown-item:link,
.dropdown-menu a.dropdown-item:visited {
	border-bottom: 0px !important;
	border-radius: 2px;
	text-decoration: none !important;
}

.dropdown-menu a.dropdown-item:active,
.dropdown-menu a.dropdown-item:hover,
.dropdown-menu a.dropdown-item:focus {
	background-color: var(--theme-hover-bg) !important;
	color: var(--theme-hover-fg) !important;
}

.dropdown-menu > .dropdown-div {
	margin-left: 0.5rem;
	margin-right: 0.5rem;
	margin-bottom: 0.5rem;
}

.dropdown-menu > .dropdown-div:last-of-type {
	margin-left: 0.5rem;
	margin-right: 0.5rem;
	margin-bottom: 0rem;
}

.dropdown-div > a {
	display: block;
	text-align: left;
}

.table td {
	vertical-align: middle;
}

/*******************************************************************************
**** alternating background rows **********************************************/

.bg-alt0,
.bg-alt-rows > div:nth-of-type(3n+1),
.bg-alt-rows > section:nth-of-type(3n+1) {
	background-color: var(--theme-body-bg-alt0);
}

.bg-alt1,
.bg-alt-rows > div:nth-of-type(3n+2),
.bg-alt-rows > section:nth-of-type(3n+2) {
	background-color: var(--theme-body-bg-alt1);
}

.bg-alt2,
.bg-alt-rows > div:nth-of-type(3n+3),
.bg-alt-rows > section:nth-of-type(3n+3) {
	background-color: var(--theme-body-bg-alt2);
}

/*******************************************************************************
**** typeify.js ***************************************************************/

.typeify-cursor {
	font-weight: normal;

	animation-duration: 1s;
	animation-name: blink;
	animation-iteration-count: infinite;
	animation-timing-function: steps(1);
}

.typeify-cursor::after {
	position: absolute;
	content: attr(data-typeify-cursor);
}

@keyframes blink {
	0% {
		opacity: 0.0;
	}

	50% {
		opacity: 1.0
	}

	100% {
		opacity: 0.0;
	}
}

.atl-profile-section {
	margin-bottom: 6em;
}

.atl-pin-top-right {
	position: absolute;
	top: 0px;
	right: 0px;
	transform: translate(50%, -50%);
}

.atl-pin-top-right2 {
	position: absolute;
	top: 0px;
	right: 0px;
	transform: translate(50%, 50%);
}

@media(max-width: 576px) {
	.atl-pin-top-right {
		transform: translate(10%, -50%);
	}
	.atl-pin-top-right2 {
		transform: translate(10%, 50%);
	}
}

.atl-btn-sm-dark {
	background-color: color-mix(in srgb, var(--theme-black) 75%, transparent);
	color: var(--theme-white) !important;

	border: 0px;
	border-radius: 4px;
	font-size: initial;
	font-weight: bold;
	line-height: initial;
	padding: 0px 4px;
	text-transform: uppercase;
	text-decoration: none !important;
}

/*//////////////////////////////////////////////////////////////////////////////
//// src/ext-bootstrap.css ///////////////////////////////////////////////////*/

:root {
	--DropdownMaxHeight: 300px;
}

/* we are going to break this into smaller components to help manage and
migrate with a few of the bs5 naming updates that im ok with. each component
for the forseeable future should be put into ext-bootstrap and onescript will
continue to handle the production builds. things left in here that could be
grouped are to be considered depreciated. */

[data-bs-theme="dark"] .on-dark-hide { display: none; }
[data-bs-theme="dark"] .on-dark-invert { filter: invert(); }

[data-bs-theme="light"] .on-light-hide { display: none; }
[data-bs-theme="light"] .on-light-invert { filter: invert(); }

/*******************************************************************************
**** font stuff ***************************************************************/

.font-family-monotype { font-family: monospace; }
.font-family-normal { font-family: 'Segoe UI', 'Helvetica', sans-serif; }

.font-size-reset         { font-size: 1.0rem; }
.font-size-mostest-small { font-size: 0.44em; }
.font-size-most-small    { font-size: 0.52em; }
.font-size-smallerest    { font-size: 0.60em; }
.font-size-smallerer     { font-size: 0.68em; }
.font-size-smallest      { font-size: 0.76em; }
.font-size-smaller       { font-size: 0.84em; }
.font-size-small         { font-size: 0.92em; }
.font-size-normal        { font-size: 1.00em; }
.font-size-large         { font-size: 1.20em; }
.font-size-larger        { font-size: 1.40em; }
.font-size-largest       { font-size: 1.60em; }
.font-size-largerer      { font-size: 1.80em; }
.font-size-largerest     { font-size: 2.00em; }
.font-size-most-large    { font-size: 2.40em; }
.font-size-mostest-large { font-size: 2.80em; }

.letter-space-reset             { letter-spacing:  0.0rem; }
.letter-space-literally-space   { letter-spacing:  0.80em; }
.letter-space-mostest-loose     { letter-spacing:  0.54em; }
.letter-space-most-loose        { letter-spacing:  0.48em; }
.letter-space-looserest         { letter-spacing:  0.40em; }
.letter-space-looserer          { letter-spacing:  0.32em; }
.letter-space-loosest           { letter-spacing:  0.24em; }
.letter-space-looser            { letter-spacing:  0.16em; }
.letter-space-loose             { letter-spacing:  0.08em; }
.letter-space-reading  	        { letter-spacing:  0.03em; }
.letter-space-normal            { letter-spacing:  0.00em; }
.letter-space-tight             { letter-spacing: -0.04em; }
.letter-space-tighter           { letter-spacing: -0.08em; }
.letter-space-tightest          { letter-spacing: -0.12em; }
.letter-space-tighterer         { letter-spacing: -0.16em; }
.letter-space-tighterest        { letter-spacing: -0.20em; }
.letter-space-most-tight        { letter-spacing: -0.24em; }
.letter-space-mostest-tight     { letter-spacing: -0.28em; }
.letter-space-literally-nothing { letter-spacing: -0.42em; }

.line-height-normal { line-height: 1em; }

.text-align-right { text-align: right; }
.text-align-left { text-align: left; }
.text-align-center { text-align: center; }

.text-overline { text-decoration: underline; }
.text-underline { text-decoration: underline; }
.text-underline-none { text-decoration: none; }
.text-muted { color: #7d7d7d !important; }
.text-decoration-none { border-bottom: 0px !important; text-decoration: none !important; }
.text-transform-none { text-transform: initial !important; }

.text-underline-thick { border-bottom-width: 3px !important; border-bottom-style: solid !important; }

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

.box-shadow-normal { box-shadow: 0px 5px 5px var(--theme-shadow); }
.box-shadow-wofty { box-shadow: 0px 0px 24px var(--theme-shadow), 0px 0px 12px var(--theme-shadow); }
.box-shadow-inset { box-shadow: inset 0px 0px 25px var(--theme-shadow), inset 0px 0px 15px var(--theme-shadow); }

.text-shadow-wofty { text-shadow: 0px 0px 24px var(--theme-shadow); }

.text-primary { color: var(--theme-primary) !important; }

.border-less { border-width: 1px !important; }

.white-space-nowrap { white-space: nowrap; }
.white-space-lines { white-space: pre-line; }

.user-select-none { user-select: none; }
.user-select-normal { user-select: all; }

.fw-bold { font-weight: 600 !important; }
.fw-bolder { font-weight: 900 !important; }

@media (max-width: 991.9px) {
	.font-size-mostest-small { font-size: 0.44em; }
	.font-size-most-small    { font-size: 0.52em; }
	.font-size-smallerest    { font-size: 0.60em; }
	.font-size-smallerer     { font-size: 0.68em; }
	.font-size-smallest      { font-size: 0.76em; }
	.font-size-smaller       { font-size: 0.84em; }
	.font-size-small         { font-size: 0.92em; }
	.font-size-normal        { font-size: 1.00em; }
	.font-size-large         { font-size: 1.10em; }
	.font-size-larger        { font-size: 1.20em; }
	.font-size-largest       { font-size: 1.30em; }
	.font-size-largerer      { font-size: 1.40em; }
	.font-size-largerest     { font-size: 1.50em; }
	.font-size-most-large    { font-size: 1.60em; }
	.font-size-mostest-large { font-size: 1.70em; }

	.letter-space-literally-space   { letter-spacing:  0.60em; }
	.letter-space-mostest-loose     { letter-spacing:  0.42em; }
	.letter-space-most-loose        { letter-spacing:  0.36em; }
	.letter-space-looserest         { letter-spacing:  0.32em; }
	.letter-space-looserer          { letter-spacing:  0.24em; }
	.letter-space-loosest           { letter-spacing:  0.18em; }
	.letter-space-looser            { letter-spacing:  0.12em; }
	.letter-space-loose             { letter-spacing:  0.06em; }
	.letter-space-normal            { letter-spacing:  0.00em; }
	.letter-space-tight             { letter-spacing: -0.04em; }
	.letter-space-tighter           { letter-spacing: -0.08em; }
	.letter-space-tightest          { letter-spacing: -0.12em; }
	.letter-space-tighterer         { letter-spacing: -0.16em; }
	.letter-space-tighterest        { letter-spacing: -0.20em; }
	.letter-space-most-tight        { letter-spacing: -0.24em; }
	.letter-space-mostest-tight     { letter-spacing: -0.28em; }
	.letter-space-literally-nothing { letter-spacing: -0.42em; }
}

/*******************************************************************************
**** give em the clamps *******************************************************/

.line-clamp {
	--LocalLineHeight: 1.4em;
	position: relative;
	line-height: var(--LocalLineHeight);
	overflow: hidden;

	-webkit-mask-image: linear-gradient(175deg, #000000FF 0%, #00000000);
	text-overflow: ellipsis;
}

.line-clamp-terminator {
	position: absolute;
	bottom: 0px;
	right: 0px;
	width: 33%;
	text-align: right;
}

.line-clamp-1 { height: calc(var(--LocalLineHeight) * 1); }
.line-clamp-2 { height: calc(var(--LocalLineHeight) * 2); }
.line-clamp-3 { height: calc(var(--LocalLineHeight) * 3); }
.line-clamp-4 { height: calc(var(--LocalLineHeight) * 4); }
.line-clamp-5 { height: calc(var(--LocalLineHeight) * 5); }
.line-clamp-6 { height: calc(var(--LocalLineHeight) * 6); }
.line-clamp-7 { height: calc(var(--LocalLineHeight) * 7); }
.line-clamp-8 { height: calc(var(--LocalLineHeight) * 8); }

.dropdown-menu {
	z-index: 9011;
	backdrop-filter: blur(6px);
}

.dropdown-menu > hr:first-child,
.dropdown-menu > hr:last-child {
	display: none;
}

.dropdown-menu.dropdown-menu-scrolled {
	max-height: var(--DropdownMaxHeight);
	overflow-y: scroll;
}

/*******************************************************************************
**** opacity stuff ************************************************************/

.opacity-0 { opacity: 0.0; }
.opacity-10 { opacity: 0.10; }
.opacity-25 { opacity: 0.25; }
.opacity-20 { opacity: 0.20; }
.opacity-30 { opacity: 0.30; }
.opacity-40 { opacity: 0.40; }
.opacity-50 { opacity: 0.50; }
.opacity-60 { opacity: 0.60; }
.opacity-70 { opacity: 0.70; }
.opacity-75 { opacity: 0.75; }
.opacity-80 { opacity: 0.80; }
.opacity-90 { opacity: 0.90; }
.opacity-100 { opacity: 1.0; }

.opacity-hover-0:hover { opacity: 0.0; }
.opacity-hover-10:hover { opacity: 0.10; }
.opacity-hover-25:hover { opacity: 0.25; }
.opacity-hover-20:hover { opacity: 0.20; }
.opacity-hover-30:hover { opacity: 0.30; }
.opacity-hover-40:hover { opacity: 0.40; }
.opacity-hover-50:hover { opacity: 0.50; }
.opacity-hover-60:hover { opacity: 0.60; }
.opacity-hover-70:hover { opacity: 0.70; }
.opacity-hover-75:hover { opacity: 0.75; }
.opacity-hover-80:hover { opacity: 0.80; }
.opacity-hover-90:hover { opacity: 0.90; }
.opacity-hover-100:hover { opacity: 1.0; }

/*******************************************************************************
**** positioning stuff ********************************************************/

.position-absolute { position: absolute; }
.position-absolutely { position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; }
.position-relative { position: relative; }
.position-sticky { position: sticky; }

.position-top-left { top: 0px; left: 0px; }
.position-top-right { top: 0px; right: 0px; }
.position-bottom-left { bottom: 0px; left: 0px; }
.position-bottom-right { bottom: 0px; right: 0px; }

.position-bottom { bottom: 0px; }
.position-top { top: 0px; }
.position-left { left: 0px; }
.position-right { right: 0px; }
.position-h-center { left: 50%; transform: translateX(-50%); }
.position-v-center { top: 50%; transform: translateY(-50%); }
.position-h-center.position-v-center { transform: translateX(-50%) translateY(-50%); }

.zindex-high { z-index: 9001; }
.zindex-normal { z-index: 0; }
.zindex-low { z-index: -9001; }

.vh-100 { height: 100vh !important; }
.vh-75 { height: 75vh !important; }
.vh-50 { height: 50vh !important; }
.vh-25 { height: 25vh !important; }
.vh-0 { height: 0vh !important; }

.vw-100 { width: 100vw !important; }
.vw-75 { width: 75vw !important; }
.vw-50 { width: 50vw !important; }
.vw-25 { width: 25vw !important; }
.vw-0 { width: 0vw !important; }

.row.tight { margin-left: -0.25rem; margin-right: -0.25rem; }
.row.tight > *[class^='col'] { padding-left: 0.25rem; padding-right: 0.25rem; }

.row.snug { margin-left: -0.50rem; margin-right: -0.50rem; }
.row.snug > *[class^='col'] { padding-left: 0.50rem; padding-right: 0.50rem; }

/*******************************************************************************
**** animating stuff **********************************************************/

.opacity-fade { transition: opacity 250ms; }

.transition-none { transition: none !important; }
.transition-timing-linear { transition-timing-function: linear; }
.transition-timing-inout { transition-timing-function: ease-in-out; }

/*******************************************************************************
**** table stuff **************************************************************/

.td-normal { white-space: nowrap; }
.td-shrink { white-space: nowrap; width: 1%; }
.td-valign-middle { vertical-align: middle !important; }

/*******************************************************************************
**** ratiobox stuff************************************************************/

.ratiobox {
	position: relative;
	padding-top: 100%;
	overflow: hidden;
}

.ratiobox.one-x-one,
.ratiobox.square {
	padding-top: 100%;
}

.ratiobox.four-x-three,
.ratiobox.tv,
.ratiobox.photo {
	padding-top: 75%;
}

.ratiobox.sixteen-x-ten,
.ratiobox.widemeh {
	padding-top: 62.5%;
}

.ratiobox.photo2 {
	padding-top: 66.65%;
}

.ratiobox.sixteen-x-nine,
.ratiobox.widescreen {
	padding-top: 56.25%;
}

.ratiobox.nineteen-x-one,
.ratiobox.imax {
	padding-top: 52.63%;
}

.ratiobox.two-x-one,
.ratiobox.univisium {
	padding-top: 50.00%;
}

.ratiobox.twentyone-x-nine,
.ratiobox.ultrawide {
	padding-top: 42.85%;
}

.ratiobox.three-x-one {
	padding-top: 33.00%;
}

.ratiobox.four-x-one {
	padding-top: 25.00%;
}

.ratiobox.one-x-two
.ratiobox.book {
	padding-top: 150%;
}

.ratiobox.hoverzoom .wallpapered {
	transform: scale(1.0);
	transition: transform 350ms;
}

.ratiobox.hoverzoom:hover .wallpapered {
	transform: scale(1.15);
	transition: transform 350ms;
}

.ratiobox a.position-absolutely {
	border-bottom: 0px;
	text-decoration: none;
}

/*******************************************************************************
**** background image stuff ***************************************************/

.accented,
.accented-top {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
}

.accented-bottom {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom center;
}

.wallpapered {
	background: var(--theme-darker-bg);
	background-repeat: no-repeat;
	background-position: center center;
	color: #fff;
	text-shadow: 0px 0px 4px var(--theme-shadow);
}

.wallpapered,
.wallpapered.covered {
	background-size: cover;
}

.wallpapered.contained {
	background-size: contain;
}

/*******************************************************************************
**** some gradient fills ******************************************************/

/* focus grads are soft vignettes */

.grad-focus-normal {
	background: radial-gradient(circle, rgba(0, 0, 0, 0.0) 0%, rgba(0,0,0,0.80) 100%);
}

.grad-focus-dark {
	background: radial-gradient(circle, rgba(0, 0, 0, 0.35) 10%, rgba(0,0,0,0.80) 100%);
}

.grad-focus-darker {
	background: radial-gradient(circle, rgba(0, 0, 0, 0.45) 0%, rgba(0,0,0,0.90) 100%);
}

/* tunnel grads are hard vignettes */

.grad-tunnel-normal {
	background: radial-gradient(circle, rgba(0, 0, 0, 0.0) 10%, rgba(0,0,0,0.80) 88%);
}

.grad-tunnel-dark {
	background: radial-gradient(circle, rgba(0, 0, 0, 0.35) 10%, rgba(0,0,0,0.80) 88%);
}

.grad-tunnel-darker {
	background: radial-gradient(circle, rgba(0, 0, 0, 0.45) 10%, rgba(0, 0, 0, 0.90) 88%);
}

/* bottom grads are mostly transparent until near the bottom of the element */

.grad-bottom-normal {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.10) 1%, rgba(0, 0, 0, 0.10) 51%, rgba(0, 0, 0, 0.85) 100%);
}

.grad-bottom-dark {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.40) 1%, rgba(0, 0, 0, 0.45) 51%, rgba(0, 0, 0, 0.90) 100%);
}

.grad-bottom-darker {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.45) 1%, rgba(0, 0, 0, 0.55) 51%, rgba(0, 0, 0, 0.95) 100%);
}

/*******************************************************************************
**** misc stuff ***************************************************************/

.progress-bar {
	transition: width 100ms;
}

.break {
	clear: both;
}

.bg-body-primary {
	--bs-bg-opacity: 1;
	background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important
}

.bg-primary {
	background-color: var(--theme-primary) !important;
}

.form-control:focus,
.form-check-input:focus {
	outline: none !important;
	box-shadow: none !important;
}

.blockquote-supercontainer {
	margin-bottom: 1.75rem;
}

.blockquote-supercontainer .blockquote {
	font-size: 1.2rem;
	border-left: 4px solid;
	border-left-color: var(--ColourTextAccent);
	padding-left: 1.0rem;
	font-style: italic;
	font-weight: light;
	letter-spacing: 0.05rem;
}

.blockquote-supercontainer .blockquote-footer {
	font-size: 1.2rem;
	color: var(--bs-body-fg);
	font-style: italic;
	font-weight: bold;
	letter-spacing: 0.07rem;
	padding: 0.5rem 0px 0.5rem 0.0rem;
	opacity: 0.5;
	text-align: left;
}

.blockquote-edged,
.edged-left {
	border-left: 4px solid;
	border-left-color: var(--ColourTextAccent);
	padding-left: 0.75em;
}

.blockquote-edged-thicc,
.edged-left-thicc {
	border-left: 0.5em solid;
	padding-left: 0.75em;
}

.blockquote-edged-primary {
	border-left-color: var(--ColourPrimaryAccent);
}

.rounded-less { border-radius: 4px; }
.rounded-extra { border-radius: 10px; }

.th-shrink,
.td-shrink {
	width: 1px;
}

.cursor-pointer {
	cursor: pointer;
}

.msi {
	display: inline-block;
	height: 1rem;
	vertical-align: middle;
	width: 1.25rem;
}

.msi-smol { width: 16px; }
.msi-sm { width: 24px; }
.msi-md { width: 32px; }
.msi-lg { width: 48px; }
.msi-huge { width: 64px; }

.msi-apple { mask: url(/share/icons/apple.svg) no-repeat center; mask-size: contain; mask-position: center center; }
.msi-discord { mask: url(/share/icons/discord.svg) no-repeat center; mask-size: contain; mask-position: center center; }
.msi-github { mask: url(/share/icons/github.svg) no-repeat center; mask-size: contain; mask-position: center center; }
.msi-google { mask: url(/share/icons/google.svg) no-repeat center; mask-size: contain; mask-position: center center; }
.msi-keyboard { mask: url(/share/icons/keyboard.svg) no-repeat center; mask-size: contain; mask-position: center center; }

.modal {
	box-shadow: 0px 0px 10px #000;
	z-index: 9011;
}

.modal-dialog {
	transition: height 200ms;
}

.modal-content {
	background-color: var(--bs-body-bg) !important;
	border-color: var(--bs-body-bg) !important;
	box-shadow: 0px 0px 24px var(--theme-dark-bg), 0px 0px 12px var(--theme-dark-bg-glass);
}

.modal-header,
.modal-footer {
	border: 0px;
}

.modal-header {
	padding-bottom: 0px;
}

.modal-header .btn {
	display: inline-block;
	padding-top: 0.20rem;
	padding-bottom: 0.18rem;
}

.modal-backdrop.show {
	background-color: var(--theme-dark-bg-glass) !important;
	backdrop-filter: blur(2px);
	opacity: 1.0;
	z-index: 9010;
}

.clickthru,
.clickthrough {
	pointer-events: none;
	user-select: none;
}

.quotron {
	padding-left: 0.5rem;
	border-left: 4px solid var(--theme-light-bg);
}

.quotron-primary {
	border-left: 4px solid var(--theme-primary);
}

.quotron-secondary {
	border-left: 4px solid var(--theme-secondary);
}

.quotron-tertiary {
	border-left: 4px solid var(--theme-tertiary);
}

.quotron-quaternary {
	border-left: 4px solid var(--theme-quaternary );
}

.hr-hide-last > hr:last-of-type {
	display: none;
}

.hr-dark {
	/* todo */
}

.hr-phatline {
	--bs-border-width: 2px;
}

.hr-snug {
	margin-top: 0.25rem;
	margin-bottom: 0.75rem;
}

/*******************************************************************************
**** offcanvas tweaks *********************************************************/

.zoffcanvas .atl-offcanvas-page {
	box-shadow: 0px 0px 24px var(--theme-black);
	z-index: 9101;
	scrollbar-gutter: auto;
	border: 0px !important;

	transition: transform var(--theme-anim-ease-fast), width var(--theme-anim-ease-fast), padding-right var(--theme-anim-ease-fast), opacity var(--theme-anim-ease-fast), filter var(--theme-anim-ease-fast);
}

.zoffcanvas.offcanvas-glass .atl-offcanvas-page {
	background-color: var(--theme-glass-bg-75);
	backdrop-filter: var(--theme-glass-filter-thick);
	-webkit-backdrop-filter: var(--theme-glass-filter-thick);
}

.offcanvas-backdrop {
	z-index: 9100;
}

.offcanvas-backdrop.fade {
	background-color: var(--theme-glass-bg-0);
	backdrop-filter: var(--theme-glass-filter-out);
	-webkit-backdrop-filter: var(--theme-glass-filter-out);

	opacity: 1.0;

	transition: backdrop-filter var(--theme-anim-ease-fast), background-color var(--theme-anim-ease-fast);
}

.offcanvas-backdrop.fade.show {
	background-color: var(--theme-glass-bg-25);
	backdrop-filter: var(--theme-glass-filter-frost-thin);
	-webkit-backdrop-filter: var(--theme-glass-filter-frost-thin);

	opacity: 1.0;
}

/*//////////////////////////////////////////////////////////////////////////////
//// src/ext-bootstrap/anim.css //////////////////////////////////////////////*/

@keyframes oPulseWorking {

	0% {
		opacity: 0.5;
	}

	100% {
		opacity: 1.0;
	}

}

.o-anim-pulse-slow {
	animation-name: oPulseWorking;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
}

/*//////////////////////////////////////////////////////////////////////////////
//// src/ext-bootstrap/buttons.css ///////////////////////////////////////////*/

.btn-block {
	display: block;
	width: 100%;
}

.btn-left {
	display: block;
	text-align: left;
	width: 100%;
}

.btn-left > .mdi {
	margin-right: 0.25rem;
}

.btn-spread {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.btn-thinner,
.form-thinner {
	padding-top: 0.35em;
	padding-bottom: 0.35em;
}

.btn:active:focus,
.btn:focus {
	outline: none !important;
	box-shadow: none !important;
}

.btn-phatline {
	--bs-border-width: 2px;
}

/*
.btn-outline-light:hover,
.btn-outline-light:active,
.btn-outline-light.show,
[data-bs-theme="light"] .btn-outline-dark:hover,
[data-bs-theme="light"] .btn-outline-dark:active,
[data-bs-theme="light"] .btn-outline-dark.show {
	background-color: var(--theme-black) !important;
	border-color: var(--theme-black) !important;
	color: var(--theme-white) !important;
}

.btn-outline-dark:hover,
.btn-outline-dark:active,
.btn-outline-dark.show,
[data-bs-theme="light"] .btn-outline-light:hover,
[data-bs-theme="light"] .btn-outline-light:active,
[data-bs-theme="light"] .btn-outline-light.show {
	background-color: var(--theme-white) !important;
	border-color: var(--theme-white) !important;
	color: var(--theme-black) !important;
}
*/

/*******************************************************************************
*******************************************************************************/

.btn-orange {
	background: var(--theme-orange);
	border-color: var(--theme-orange);
	color: var(--theme-white);
}

.btn-orange:active,
.btn-orange:hover,
.btn-orange:focus
.btn-orange.show {
	background: var(--theme-orange-alt);
	border-color: var(--theme-orange-alt);
	color: var(--theme-white);
}

/*******************************************************************************
*******************************************************************************/

.atl-btn-flip-save-check i:nth-of-type(1) {
	display: inline;
}

.atl-btn-flip-save-check i:nth-of-type(2) {
	display: none;
}

.atl-btn-flip-save-check.btn-success i:nth-of-type(1) {
	display: none;
}

.atl-btn-flip-save-check.btn-success i:nth-of-type(2) {
	display: inline;
}

/*//////////////////////////////////////////////////////////////////////////////
//// src/ext-bootstrap/cargobay.css //////////////////////////////////////////*/

:root {
	--atl-cargobay-container-spacing: 1.5rem;
	--atl-cargobay-section-padding: 4.0rem;

	--atl-cargobay-s1-bg-colour: var(--theme-body-bg-alt0);
	--atl-cargobay-s2-bg-colour: var(--theme-body-bg-alt1);
	--atl-cargobay-s3-bg-colour: var(--theme-body-bg-alt2);
	--atl-cargobay-s4-bg-colour: var(--theme-body-bg-alt3);
}

/* container directly added */

.cargobay > .container {
	margin-bottom: var(--atl-cargobay-container-spacing);
}

.cargobay > .container:last-of-type {
	margin-bottom: 0px;
}

/* containers put into sections */

.cargobay > section {
	padding: var(--atl-cargobay-section-padding) 0px;
}

.cargobay > section:last-of-type {
	margin-bottom: 0px;
}

.cargobay > section:nth-of-type(4n+1) {
	background-color: var(--atl-cargobay-s1-bg-colour);
}

.cargobay > section:nth-of-type(4n+2) {
	background-color: var(--atl-cargobay-s2-bg-colour);;
}

.cargobay > section:nth-of-type(4n+3) {
	background-color: var(--atl-cargobay-s3-bg-colour);
}

.cargobay > section:nth-of-type(4n+4) {
	background-color: var(--atl-cargobay-s4-bg-colour);
}

/***/

.container-flush {
	
}

/*//////////////////////////////////////////////////////////////////////////////
//// src/ext-bootstrap/code.css //////////////////////////////////////////////*/

code.cli {
	background-color: var(--theme-black);
	border-radius: 4px;
	border-left: 2px solid var(--theme-primary);
	border-right: 2px solid var(--theme-primary);
	color: var(--theme-primary-alt);
	display: inline-block;
	padding: 0.1rem 0.55rem;
	margin: 0px 0.25rem;
	vertical-align: middle;
}

/*//////////////////////////////////////////////////////////////////////////////
//// src/ext-bootstrap/dyes.css //////////////////////////////////////////////*/

:root {
	--theme-black: #141414FF;
	--theme-black-alt: #181818FF;
	--theme-black-fg: #FDFDFDFF;
	--theme-black-alt-fg: #FDFDFDFF;
	--theme-white: #FDFDFDFF;
	--theme-white-alt: #FFFFFFFF;
	--theme-white-fg: #141414FF;
	--theme-white-alt-fg: #141414FF;
	--theme-dark: #141414FF;
	--theme-dark-alt: #181818FF;
	--theme-dark-fg: #FDFDFDFF;
	--theme-dark-alt-fg: #FDFDFDFF;
	--theme-light: #FDFDFDFF;
	--theme-light-alt: #FFFFFFFF;
	--theme-light-fg: #141414FF;
	--theme-light-alt-fg: #141414FF;
	--theme-red: #D22828FF;
	--theme-red-alt: #D15E5EFF;
	--theme-red-fg: #141414FF;
	--theme-red-alt-fg: #141414FF;
	--theme-gold: #FFB81DFF;
	--theme-gold-alt: #F0C469FF;
	--theme-gold-fg: #141414FF;
	--theme-gold-alt-fg: #141414FF;
	--theme-orange: #EA7222FF;
	--theme-orange-alt: #E09663FF;
	--theme-orange-fg: #141414FF;
	--theme-orange-alt-fg: #141414FF;
	--theme-yellow: #FFE11DFF;
	--theme-yellow-alt: #F0DE69FF;
	--theme-yellow-fg: #141414FF;
	--theme-yellow-alt-fg: #141414FF;
	--theme-lime: #B1DE1AFF;
	--theme-lime-alt: #BAD952FF;
	--theme-lime-fg: #141414FF;
	--theme-lime-alt-fg: #141414FF;
	--theme-green: #3BB33BFF;
	--theme-green-alt: #63BD63FF;
	--theme-green-fg: #141414FF;
	--theme-green-alt-fg: #141414FF;
	--theme-seafoam: #06D6ADFF;
	--theme-seafoam-alt: #29E3BDFF;
	--theme-seafoam-fg: #141414FF;
	--theme-seafoam-alt-fg: #141414FF;
	--theme-cyan: #4FD8EEFF;
	--theme-cyan-alt: #96DEEBFF;
	--theme-cyan-fg: #141414FF;
	--theme-cyan-alt-fg: #141414FF;
	--theme-blue: #3363F4FF;
	--theme-blue-alt: #7A96EBFF;
	--theme-blue-fg: #141414FF;
	--theme-blue-alt-fg: #141414FF;
	--theme-violet: #7540EAFF;
	--theme-violet-alt: #A385E6FF;
	--theme-violet-fg: #141414FF;
	--theme-violet-alt-fg: #141414FF;
	--theme-purple: #A671E6FF;
	--theme-purple-alt: #CCB5EBFF;
	--theme-purple-fg: #141414FF;
	--theme-purple-alt-fg: #141414FF;
	--theme-magenta: #BF52BFFF;
	--theme-magenta-alt: #C785C7FF;
	--theme-magenta-fg: #141414FF;
	--theme-magenta-alt-fg: #141414FF;
	--theme-pink: #D587A8FF;
	--theme-pink-alt: #E3C2CFFF;
	--theme-pink-fg: #141414FF;
	--theme-pink-alt-fg: #141414FF;
	--theme-grey-lt: #B0B0B0FF;
	--theme-grey-lt-alt: #D4D4D4FF;
	--theme-grey-lt-fg: #141414FF;
	--theme-grey-lt-alt-fg: #141414FF;
	--theme-grey-md: #707070FF;
	--theme-grey-md-alt: #878787FF;
	--theme-grey-md-fg: #FDFDFDFF;
	--theme-grey-md-alt-fg: #FDFDFDFF;
	--theme-grey-dk: #303030FF;
	--theme-grey-dk-alt: #3A3A3AFF;
	--theme-grey-dk-fg: #FDFDFDFF;
	--theme-grey-dk-alt-fg: #FDFDFDFF;
}

[data-bs-theme="light"]:root {
	--theme-dark: #FDFDFDFF;
	--theme-dark-alt: #FFFFFFFF;
	--theme-dark-fg: #141414FF;
	--theme-dark-alt-fg: #141414FF;
	--theme-light: #141414FF;
	--theme-light-alt: #1A1A1AFF;
	--theme-light-fg: #FDFDFDFF;
	--theme-light-alt-fg: #FDFDFDFF;
}

.btn-black {
	background-color: var(--theme-black);
	border: var(--bs-btn-border-width) solid var(--theme-black);
	color: var(--theme-black-fg);
}

.btn-black:active, .btn-black:hover, .btn-black:focus .btn-black.show {
	background-color: var(--theme-black-alt);
	border: var(--bs-btn-border-width) solid var(--theme-black-alt);
	color: var(--theme-black-fg);
}

.btn-outline-black {
	background-color: transparent;
	border: var(--bs-btn-border-width) solid var(--theme-black);
	color: var(--theme-black);
}

.btn-outline-black:active, .btn-outline-black:hover, .btn-outline-black:focus .btn-outline-black.show {
	background-color: var(--theme-black-alt);
	border: var(--bs-btn-border-width) solid var(--theme-black-alt);
	color: var(--theme-black-fg);
}

.btn-white {
	background-color: var(--theme-white);
	border: var(--bs-btn-border-width) solid var(--theme-white);
	color: var(--theme-white-fg);
}

.btn-white:active, .btn-white:hover, .btn-white:focus .btn-white.show {
	background-color: var(--theme-white-alt);
	border: var(--bs-btn-border-width) solid var(--theme-white-alt);
	color: var(--theme-white-fg);
}

.btn-outline-white {
	background-color: transparent;
	border: var(--bs-btn-border-width) solid var(--theme-white);
	color: var(--theme-white);
}

.btn-outline-white:active, .btn-outline-white:hover, .btn-outline-white:focus .btn-outline-white.show {
	background-color: var(--theme-white-alt);
	border: var(--bs-btn-border-width) solid var(--theme-white-alt);
	color: var(--theme-white-fg);
}

.btn-dark {
	background-color: var(--theme-dark);
	border: var(--bs-btn-border-width) solid var(--theme-dark);
	color: var(--theme-dark-fg);
}

.btn-dark:active, .btn-dark:hover, .btn-dark:focus .btn-dark.show {
	background-color: var(--theme-dark-alt);
	border: var(--bs-btn-border-width) solid var(--theme-dark-alt);
	color: var(--theme-dark-fg);
}

.btn-outline-dark {
	background-color: transparent;
	border: var(--bs-btn-border-width) solid var(--theme-dark);
	color: var(--theme-dark);
}

.btn-outline-dark:active, .btn-outline-dark:hover, .btn-outline-dark:focus .btn-outline-dark.show {
	background-color: var(--theme-dark-alt);
	border: var(--bs-btn-border-width) solid var(--theme-dark-alt);
	color: var(--theme-dark-fg);
}

.btn-light {
	background-color: var(--theme-light);
	border: var(--bs-btn-border-width) solid var(--theme-light);
	color: var(--theme-light-fg);
}

.btn-light:active, .btn-light:hover, .btn-light:focus .btn-light.show {
	background-color: var(--theme-light-alt);
	border: var(--bs-btn-border-width) solid var(--theme-light-alt);
	color: var(--theme-light-fg);
}

.btn-outline-light {
	background-color: transparent;
	border: var(--bs-btn-border-width) solid var(--theme-light);
	color: var(--theme-light);
}

.btn-outline-light:active, .btn-outline-light:hover, .btn-outline-light:focus .btn-outline-light.show {
	background-color: var(--theme-light-alt);
	border: var(--bs-btn-border-width) solid var(--theme-light-alt);
	color: var(--theme-light-fg);
}

.btn-red {
	background-color: var(--theme-red);
	border: var(--bs-btn-border-width) solid var(--theme-red);
	color: var(--theme-red-fg);
}

.btn-red:active, .btn-red:hover, .btn-red:focus .btn-red.show {
	background-color: var(--theme-red-alt);
	border: var(--bs-btn-border-width) solid var(--theme-red-alt);
	color: var(--theme-red-fg);
}

.btn-outline-red {
	background-color: transparent;
	border: var(--bs-btn-border-width) solid var(--theme-red);
	color: var(--theme-red);
}

.btn-outline-red:active, .btn-outline-red:hover, .btn-outline-red:focus .btn-outline-red.show {
	background-color: var(--theme-red-alt);
	border: var(--bs-btn-border-width) solid var(--theme-red-alt);
	color: var(--theme-red-fg);
}

.btn-gold {
	background-color: var(--theme-gold);
	border: var(--bs-btn-border-width) solid var(--theme-gold);
	color: var(--theme-gold-fg);
}

.btn-gold:active, .btn-gold:hover, .btn-gold:focus .btn-gold.show {
	background-color: var(--theme-gold-alt);
	border: var(--bs-btn-border-width) solid var(--theme-gold-alt);
	color: var(--theme-gold-fg);
}

.btn-outline-gold {
	background-color: transparent;
	border: var(--bs-btn-border-width) solid var(--theme-gold);
	color: var(--theme-gold);
}

.btn-outline-gold:active, .btn-outline-gold:hover, .btn-outline-gold:focus .btn-outline-gold.show {
	background-color: var(--theme-gold-alt);
	border: var(--bs-btn-border-width) solid var(--theme-gold-alt);
	color: var(--theme-gold-fg);
}

.btn-orange {
	background-color: var(--theme-orange);
	border: var(--bs-btn-border-width) solid var(--theme-orange);
	color: var(--theme-orange-fg);
}

.btn-orange:active, .btn-orange:hover, .btn-orange:focus .btn-orange.show {
	background-color: var(--theme-orange-alt);
	border: var(--bs-btn-border-width) solid var(--theme-orange-alt);
	color: var(--theme-orange-fg);
}

.btn-outline-orange {
	background-color: transparent;
	border: var(--bs-btn-border-width) solid var(--theme-orange);
	color: var(--theme-orange);
}

.btn-outline-orange:active, .btn-outline-orange:hover, .btn-outline-orange:focus .btn-outline-orange.show {
	background-color: var(--theme-orange-alt);
	border: var(--bs-btn-border-width) solid var(--theme-orange-alt);
	color: var(--theme-orange-fg);
}

.btn-yellow {
	background-color: var(--theme-yellow);
	border: var(--bs-btn-border-width) solid var(--theme-yellow);
	color: var(--theme-yellow-fg);
}

.btn-yellow:active, .btn-yellow:hover, .btn-yellow:focus .btn-yellow.show {
	background-color: var(--theme-yellow-alt);
	border: var(--bs-btn-border-width) solid var(--theme-yellow-alt);
	color: var(--theme-yellow-fg);
}

.btn-outline-yellow {
	background-color: transparent;
	border: var(--bs-btn-border-width) solid var(--theme-yellow);
	color: var(--theme-yellow);
}

.btn-outline-yellow:active, .btn-outline-yellow:hover, .btn-outline-yellow:focus .btn-outline-yellow.show {
	background-color: var(--theme-yellow-alt);
	border: var(--bs-btn-border-width) solid var(--theme-yellow-alt);
	color: var(--theme-yellow-fg);
}

.btn-lime {
	background-color: var(--theme-lime);
	border: var(--bs-btn-border-width) solid var(--theme-lime);
	color: var(--theme-lime-fg);
}

.btn-lime:active, .btn-lime:hover, .btn-lime:focus .btn-lime.show {
	background-color: var(--theme-lime-alt);
	border: var(--bs-btn-border-width) solid var(--theme-lime-alt);
	color: var(--theme-lime-fg);
}

.btn-outline-lime {
	background-color: transparent;
	border: var(--bs-btn-border-width) solid var(--theme-lime);
	color: var(--theme-lime);
}

.btn-outline-lime:active, .btn-outline-lime:hover, .btn-outline-lime:focus .btn-outline-lime.show {
	background-color: var(--theme-lime-alt);
	border: var(--bs-btn-border-width) solid var(--theme-lime-alt);
	color: var(--theme-lime-fg);
}

.btn-green {
	background-color: var(--theme-green);
	border: var(--bs-btn-border-width) solid var(--theme-green);
	color: var(--theme-green-fg);
}

.btn-green:active, .btn-green:hover, .btn-green:focus .btn-green.show {
	background-color: var(--theme-green-alt);
	border: var(--bs-btn-border-width) solid var(--theme-green-alt);
	color: var(--theme-green-fg);
}

.btn-outline-green {
	background-color: transparent;
	border: var(--bs-btn-border-width) solid var(--theme-green);
	color: var(--theme-green);
}

.btn-outline-green:active, .btn-outline-green:hover, .btn-outline-green:focus .btn-outline-green.show {
	background-color: var(--theme-green-alt);
	border: var(--bs-btn-border-width) solid var(--theme-green-alt);
	color: var(--theme-green-fg);
}

.btn-seafoam {
	background-color: var(--theme-seafoam);
	border: var(--bs-btn-border-width) solid var(--theme-seafoam);
	color: var(--theme-seafoam-fg);
}

.btn-seafoam:active, .btn-seafoam:hover, .btn-seafoam:focus .btn-seafoam.show {
	background-color: var(--theme-seafoam-alt);
	border: var(--bs-btn-border-width) solid var(--theme-seafoam-alt);
	color: var(--theme-seafoam-fg);
}

.btn-outline-seafoam {
	background-color: transparent;
	border: var(--bs-btn-border-width) solid var(--theme-seafoam);
	color: var(--theme-seafoam);
}

.btn-outline-seafoam:active, .btn-outline-seafoam:hover, .btn-outline-seafoam:focus .btn-outline-seafoam.show {
	background-color: var(--theme-seafoam-alt);
	border: var(--bs-btn-border-width) solid var(--theme-seafoam-alt);
	color: var(--theme-seafoam-fg);
}

.btn-cyan {
	background-color: var(--theme-cyan);
	border: var(--bs-btn-border-width) solid var(--theme-cyan);
	color: var(--theme-cyan-fg);
}

.btn-cyan:active, .btn-cyan:hover, .btn-cyan:focus .btn-cyan.show {
	background-color: var(--theme-cyan-alt);
	border: var(--bs-btn-border-width) solid var(--theme-cyan-alt);
	color: var(--theme-cyan-fg);
}

.btn-outline-cyan {
	background-color: transparent;
	border: var(--bs-btn-border-width) solid var(--theme-cyan);
	color: var(--theme-cyan);
}

.btn-outline-cyan:active, .btn-outline-cyan:hover, .btn-outline-cyan:focus .btn-outline-cyan.show {
	background-color: var(--theme-cyan-alt);
	border: var(--bs-btn-border-width) solid var(--theme-cyan-alt);
	color: var(--theme-cyan-fg);
}

.btn-blue {
	background-color: var(--theme-blue);
	border: var(--bs-btn-border-width) solid var(--theme-blue);
	color: var(--theme-blue-fg);
}

.btn-blue:active, .btn-blue:hover, .btn-blue:focus .btn-blue.show {
	background-color: var(--theme-blue-alt);
	border: var(--bs-btn-border-width) solid var(--theme-blue-alt);
	color: var(--theme-blue-fg);
}

.btn-outline-blue {
	background-color: transparent;
	border: var(--bs-btn-border-width) solid var(--theme-blue);
	color: var(--theme-blue);
}

.btn-outline-blue:active, .btn-outline-blue:hover, .btn-outline-blue:focus .btn-outline-blue.show {
	background-color: var(--theme-blue-alt);
	border: var(--bs-btn-border-width) solid var(--theme-blue-alt);
	color: var(--theme-blue-fg);
}

.btn-violet {
	background-color: var(--theme-violet);
	border: var(--bs-btn-border-width) solid var(--theme-violet);
	color: var(--theme-violet-fg);
}

.btn-violet:active, .btn-violet:hover, .btn-violet:focus .btn-violet.show {
	background-color: var(--theme-violet-alt);
	border: var(--bs-btn-border-width) solid var(--theme-violet-alt);
	color: var(--theme-violet-fg);
}

.btn-outline-violet {
	background-color: transparent;
	border: var(--bs-btn-border-width) solid var(--theme-violet);
	color: var(--theme-violet);
}

.btn-outline-violet:active, .btn-outline-violet:hover, .btn-outline-violet:focus .btn-outline-violet.show {
	background-color: var(--theme-violet-alt);
	border: var(--bs-btn-border-width) solid var(--theme-violet-alt);
	color: var(--theme-violet-fg);
}

.btn-purple {
	background-color: var(--theme-purple);
	border: var(--bs-btn-border-width) solid var(--theme-purple);
	color: var(--theme-purple-fg);
}

.btn-purple:active, .btn-purple:hover, .btn-purple:focus .btn-purple.show {
	background-color: var(--theme-purple-alt);
	border: var(--bs-btn-border-width) solid var(--theme-purple-alt);
	color: var(--theme-purple-fg);
}

.btn-outline-purple {
	background-color: transparent;
	border: var(--bs-btn-border-width) solid var(--theme-purple);
	color: var(--theme-purple);
}

.btn-outline-purple:active, .btn-outline-purple:hover, .btn-outline-purple:focus .btn-outline-purple.show {
	background-color: var(--theme-purple-alt);
	border: var(--bs-btn-border-width) solid var(--theme-purple-alt);
	color: var(--theme-purple-fg);
}

.btn-magenta {
	background-color: var(--theme-magenta);
	border: var(--bs-btn-border-width) solid var(--theme-magenta);
	color: var(--theme-magenta-fg);
}

.btn-magenta:active, .btn-magenta:hover, .btn-magenta:focus .btn-magenta.show {
	background-color: var(--theme-magenta-alt);
	border: var(--bs-btn-border-width) solid var(--theme-magenta-alt);
	color: var(--theme-magenta-fg);
}

.btn-outline-magenta {
	background-color: transparent;
	border: var(--bs-btn-border-width) solid var(--theme-magenta);
	color: var(--theme-magenta);
}

.btn-outline-magenta:active, .btn-outline-magenta:hover, .btn-outline-magenta:focus .btn-outline-magenta.show {
	background-color: var(--theme-magenta-alt);
	border: var(--bs-btn-border-width) solid var(--theme-magenta-alt);
	color: var(--theme-magenta-fg);
}

.btn-pink {
	background-color: var(--theme-pink);
	border: var(--bs-btn-border-width) solid var(--theme-pink);
	color: var(--theme-pink-fg);
}

.btn-pink:active, .btn-pink:hover, .btn-pink:focus .btn-pink.show {
	background-color: var(--theme-pink-alt);
	border: var(--bs-btn-border-width) solid var(--theme-pink-alt);
	color: var(--theme-pink-fg);
}

.btn-outline-pink {
	background-color: transparent;
	border: var(--bs-btn-border-width) solid var(--theme-pink);
	color: var(--theme-pink);
}

.btn-outline-pink:active, .btn-outline-pink:hover, .btn-outline-pink:focus .btn-outline-pink.show {
	background-color: var(--theme-pink-alt);
	border: var(--bs-btn-border-width) solid var(--theme-pink-alt);
	color: var(--theme-pink-fg);
}

.btn-grey-lt {
	background-color: var(--theme-grey-lt);
	border: var(--bs-btn-border-width) solid var(--theme-grey-lt);
	color: var(--theme-grey-lt-fg);
}

.btn-grey-lt:active, .btn-grey-lt:hover, .btn-grey-lt:focus .btn-grey-lt.show {
	background-color: var(--theme-grey-lt-alt);
	border: var(--bs-btn-border-width) solid var(--theme-grey-lt-alt);
	color: var(--theme-grey-lt-fg);
}

.btn-outline-grey-lt {
	background-color: transparent;
	border: var(--bs-btn-border-width) solid var(--theme-grey-lt);
	color: var(--theme-grey-lt);
}

.btn-outline-grey-lt:active, .btn-outline-grey-lt:hover, .btn-outline-grey-lt:focus .btn-outline-grey-lt.show {
	background-color: var(--theme-grey-lt-alt);
	border: var(--bs-btn-border-width) solid var(--theme-grey-lt-alt);
	color: var(--theme-grey-lt-fg);
}

.btn-grey-md {
	background-color: var(--theme-grey-md);
	border: var(--bs-btn-border-width) solid var(--theme-grey-md);
	color: var(--theme-grey-md-fg);
}

.btn-grey-md:active, .btn-grey-md:hover, .btn-grey-md:focus .btn-grey-md.show {
	background-color: var(--theme-grey-md-alt);
	border: var(--bs-btn-border-width) solid var(--theme-grey-md-alt);
	color: var(--theme-grey-md-fg);
}

.btn-outline-grey-md {
	background-color: transparent;
	border: var(--bs-btn-border-width) solid var(--theme-grey-md);
	color: var(--theme-grey-md);
}

.btn-outline-grey-md:active, .btn-outline-grey-md:hover, .btn-outline-grey-md:focus .btn-outline-grey-md.show {
	background-color: var(--theme-grey-md-alt);
	border: var(--bs-btn-border-width) solid var(--theme-grey-md-alt);
	color: var(--theme-grey-md-fg);
}

.btn-grey-dk {
	background-color: var(--theme-grey-dk);
	border: var(--bs-btn-border-width) solid var(--theme-grey-dk);
	color: var(--theme-grey-dk-fg);
}

.btn-grey-dk:active, .btn-grey-dk:hover, .btn-grey-dk:focus .btn-grey-dk.show {
	background-color: var(--theme-grey-dk-alt);
	border: var(--bs-btn-border-width) solid var(--theme-grey-dk-alt);
	color: var(--theme-grey-dk-fg);
}

.btn-outline-grey-dk {
	background-color: transparent;
	border: var(--bs-btn-border-width) solid var(--theme-grey-dk);
	color: var(--theme-grey-dk);
}

.btn-outline-grey-dk:active, .btn-outline-grey-dk:hover, .btn-outline-grey-dk:focus .btn-outline-grey-dk.show {
	background-color: var(--theme-grey-dk-alt);
	border: var(--bs-btn-border-width) solid var(--theme-grey-dk-alt);
	color: var(--theme-grey-dk-fg);
}

.bg-black { background-color: var(--theme-black) !important; }
.tc-black { color: var(--theme-black) !important; }
.fg-black { color: var(--theme-black-fg) !important; }
.bg-black-alt { background-color: var(--theme-black-alt) !important; }
.tc-black-alt { color: var(--theme-black-alt) !important; }
.fg-black-alt { color: var(--theme-black-alt-fg) !important; }

.bg-white { background-color: var(--theme-white) !important; }
.tc-white { color: var(--theme-white) !important; }
.fg-white { color: var(--theme-white-fg) !important; }
.bg-white-alt { background-color: var(--theme-white-alt) !important; }
.tc-white-alt { color: var(--theme-white-alt) !important; }
.fg-white-alt { color: var(--theme-white-alt-fg) !important; }

.bg-dark { background-color: var(--theme-dark) !important; }
.tc-dark { color: var(--theme-dark) !important; }
.fg-dark { color: var(--theme-dark-fg) !important; }
.bg-dark-alt { background-color: var(--theme-dark-alt) !important; }
.tc-dark-alt { color: var(--theme-dark-alt) !important; }
.fg-dark-alt { color: var(--theme-dark-alt-fg) !important; }

.bg-light { background-color: var(--theme-light) !important; }
.tc-light { color: var(--theme-light) !important; }
.fg-light { color: var(--theme-light-fg) !important; }
.bg-light-alt { background-color: var(--theme-light-alt) !important; }
.tc-light-alt { color: var(--theme-light-alt) !important; }
.fg-light-alt { color: var(--theme-light-alt-fg) !important; }

.bg-red { background-color: var(--theme-red) !important; }
.tc-red { color: var(--theme-red) !important; }
.fg-red { color: var(--theme-red-fg) !important; }
.bg-red-alt { background-color: var(--theme-red-alt) !important; }
.tc-red-alt { color: var(--theme-red-alt) !important; }
.fg-red-alt { color: var(--theme-red-alt-fg) !important; }

.bg-gold { background-color: var(--theme-gold) !important; }
.tc-gold { color: var(--theme-gold) !important; }
.fg-gold { color: var(--theme-gold-fg) !important; }
.bg-gold-alt { background-color: var(--theme-gold-alt) !important; }
.tc-gold-alt { color: var(--theme-gold-alt) !important; }
.fg-gold-alt { color: var(--theme-gold-alt-fg) !important; }

.bg-orange { background-color: var(--theme-orange) !important; }
.tc-orange { color: var(--theme-orange) !important; }
.fg-orange { color: var(--theme-orange-fg) !important; }
.bg-orange-alt { background-color: var(--theme-orange-alt) !important; }
.tc-orange-alt { color: var(--theme-orange-alt) !important; }
.fg-orange-alt { color: var(--theme-orange-alt-fg) !important; }

.bg-yellow { background-color: var(--theme-yellow) !important; }
.tc-yellow { color: var(--theme-yellow) !important; }
.fg-yellow { color: var(--theme-yellow-fg) !important; }
.bg-yellow-alt { background-color: var(--theme-yellow-alt) !important; }
.tc-yellow-alt { color: var(--theme-yellow-alt) !important; }
.fg-yellow-alt { color: var(--theme-yellow-alt-fg) !important; }

.bg-lime { background-color: var(--theme-lime) !important; }
.tc-lime { color: var(--theme-lime) !important; }
.fg-lime { color: var(--theme-lime-fg) !important; }
.bg-lime-alt { background-color: var(--theme-lime-alt) !important; }
.tc-lime-alt { color: var(--theme-lime-alt) !important; }
.fg-lime-alt { color: var(--theme-lime-alt-fg) !important; }

.bg-green { background-color: var(--theme-green) !important; }
.tc-green { color: var(--theme-green) !important; }
.fg-green { color: var(--theme-green-fg) !important; }
.bg-green-alt { background-color: var(--theme-green-alt) !important; }
.tc-green-alt { color: var(--theme-green-alt) !important; }
.fg-green-alt { color: var(--theme-green-alt-fg) !important; }

.bg-seafoam { background-color: var(--theme-seafoam) !important; }
.tc-seafoam { color: var(--theme-seafoam) !important; }
.fg-seafoam { color: var(--theme-seafoam-fg) !important; }
.bg-seafoam-alt { background-color: var(--theme-seafoam-alt) !important; }
.tc-seafoam-alt { color: var(--theme-seafoam-alt) !important; }
.fg-seafoam-alt { color: var(--theme-seafoam-alt-fg) !important; }

.bg-cyan { background-color: var(--theme-cyan) !important; }
.tc-cyan { color: var(--theme-cyan) !important; }
.fg-cyan { color: var(--theme-cyan-fg) !important; }
.bg-cyan-alt { background-color: var(--theme-cyan-alt) !important; }
.tc-cyan-alt { color: var(--theme-cyan-alt) !important; }
.fg-cyan-alt { color: var(--theme-cyan-alt-fg) !important; }

.bg-blue { background-color: var(--theme-blue) !important; }
.tc-blue { color: var(--theme-blue) !important; }
.fg-blue { color: var(--theme-blue-fg) !important; }
.bg-blue-alt { background-color: var(--theme-blue-alt) !important; }
.tc-blue-alt { color: var(--theme-blue-alt) !important; }
.fg-blue-alt { color: var(--theme-blue-alt-fg) !important; }

.bg-violet { background-color: var(--theme-violet) !important; }
.tc-violet { color: var(--theme-violet) !important; }
.fg-violet { color: var(--theme-violet-fg) !important; }
.bg-violet-alt { background-color: var(--theme-violet-alt) !important; }
.tc-violet-alt { color: var(--theme-violet-alt) !important; }
.fg-violet-alt { color: var(--theme-violet-alt-fg) !important; }

.bg-purple { background-color: var(--theme-purple) !important; }
.tc-purple { color: var(--theme-purple) !important; }
.fg-purple { color: var(--theme-purple-fg) !important; }
.bg-purple-alt { background-color: var(--theme-purple-alt) !important; }
.tc-purple-alt { color: var(--theme-purple-alt) !important; }
.fg-purple-alt { color: var(--theme-purple-alt-fg) !important; }

.bg-magenta { background-color: var(--theme-magenta) !important; }
.tc-magenta { color: var(--theme-magenta) !important; }
.fg-magenta { color: var(--theme-magenta-fg) !important; }
.bg-magenta-alt { background-color: var(--theme-magenta-alt) !important; }
.tc-magenta-alt { color: var(--theme-magenta-alt) !important; }
.fg-magenta-alt { color: var(--theme-magenta-alt-fg) !important; }

.bg-pink { background-color: var(--theme-pink) !important; }
.tc-pink { color: var(--theme-pink) !important; }
.fg-pink { color: var(--theme-pink-fg) !important; }
.bg-pink-alt { background-color: var(--theme-pink-alt) !important; }
.tc-pink-alt { color: var(--theme-pink-alt) !important; }
.fg-pink-alt { color: var(--theme-pink-alt-fg) !important; }

.bg-grey-lt { background-color: var(--theme-grey-lt) !important; }
.tc-grey-lt { color: var(--theme-grey-lt) !important; }
.fg-grey-lt { color: var(--theme-grey-lt-fg) !important; }
.bg-grey-lt-alt { background-color: var(--theme-grey-lt-alt) !important; }
.tc-grey-lt-alt { color: var(--theme-grey-lt-alt) !important; }
.fg-grey-lt-alt { color: var(--theme-grey-lt-alt-fg) !important; }

.bg-grey-md { background-color: var(--theme-grey-md) !important; }
.tc-grey-md { color: var(--theme-grey-md) !important; }
.fg-grey-md { color: var(--theme-grey-md-fg) !important; }
.bg-grey-md-alt { background-color: var(--theme-grey-md-alt) !important; }
.tc-grey-md-alt { color: var(--theme-grey-md-alt) !important; }
.fg-grey-md-alt { color: var(--theme-grey-md-alt-fg) !important; }

.bg-grey-dk { background-color: var(--theme-grey-dk) !important; }
.tc-grey-dk { color: var(--theme-grey-dk) !important; }
.fg-grey-dk { color: var(--theme-grey-dk-fg) !important; }
.bg-grey-dk-alt { background-color: var(--theme-grey-dk-alt) !important; }
.tc-grey-dk-alt { color: var(--theme-grey-dk-alt) !important; }
.fg-grey-dk-alt { color: var(--theme-grey-dk-alt-fg) !important; }

.bc-black { --bs-border-color: var(--theme-black); }

.bc-white { --bs-border-color: var(--theme-white); }

.bc-dark { --bs-border-color: var(--theme-dark); }

.bc-light { --bs-border-color: var(--theme-light); }

.bc-red { --bs-border-color: var(--theme-red); }

.bc-gold { --bs-border-color: var(--theme-gold); }

.bc-orange { --bs-border-color: var(--theme-orange); }

.bc-yellow { --bs-border-color: var(--theme-yellow); }

.bc-lime { --bs-border-color: var(--theme-lime); }

.bc-green { --bs-border-color: var(--theme-green); }

.bc-seafoam { --bs-border-color: var(--theme-seafoam); }

.bc-cyan { --bs-border-color: var(--theme-cyan); }

.bc-blue { --bs-border-color: var(--theme-blue); }

.bc-violet { --bs-border-color: var(--theme-violet); }

.bc-purple { --bs-border-color: var(--theme-purple); }

.bc-magenta { --bs-border-color: var(--theme-magenta); }

.bc-pink { --bs-border-color: var(--theme-pink); }

.bc-grey-lt { --bs-border-color: var(--theme-grey-lt); }

.bc-grey-md { --bs-border-color: var(--theme-grey-md); }

.bc-grey-dk { --bs-border-color: var(--theme-grey-dk); }

/*//////////////////////////////////////////////////////////////////////////////
//// src/ext-bootstrap/filters.css ///////////////////////////////////////////*/

.filter-desaturate,
.filter-desaturate-0  { filter: saturate(0.00); }
.filter-desaturate-50 { filter: saturate(0.50); }
.filter-desaturate-25 { filter: saturate(0.25); }
.filter-desaturate-10 { filter: saturate(0.10); }

.bg-glass-50 {
	background-color: var(--theme-glass-bg-50);
	backdrop-filter: var(--theme-glass-filter-thin);
}

/*//////////////////////////////////////////////////////////////////////////////
//// src/ext-bootstrap/font-text-stuff.css ///////////////////////////////////*/

/*******************************************************************************
** font family ****************************************************************/

.ff-mono {
	font-family: var(--theme-font-mono-family);
}

.ff-normal {
	font-family: 'Segoe UI', 'Helvetica', sans-serif;
}

/*******************************************************************************
** font sizing ****************************************************************/

.fs-reset         { font-size: 1.0rem; }
.fs-mostest-small { font-size: 0.44em; }
.fs-most-small    { font-size: 0.52em; }
.fs-smallerest    { font-size: 0.60em; }
.fs-smallerer     { font-size: 0.68em; }
.fs-smallest      { font-size: 0.76em; }
.fs-smaller       { font-size: 0.84em; }
.fs-small         { font-size: 0.92em; }
.fs-normal        { font-size: 1.00em; }
.fs-large         { font-size: 1.20em; }
.fs-larger        { font-size: 1.40em; }
.fs-largest       { font-size: 1.60em; }
.fs-largerer      { font-size: 1.80em; }
.fs-largerest     { font-size: 2.00em; }
.fs-most-large    { font-size: 2.40em; }
.fs-mostest-large { font-size: 2.80em; }

/*******************************************************************************
** letter spacing  ************************************************************/

.ls-reset             { letter-spacing:  0.0rem; }
.ls-literally-space   { letter-spacing:  0.80em; }
.ls-mostest-loose     { letter-spacing:  0.54em; }
.ls-most-loose        { letter-spacing:  0.48em; }
.ls-looserest         { letter-spacing:  0.40em; }
.ls-looserer          { letter-spacing:  0.32em; }
.ls-loosest           { letter-spacing:  0.24em; }
.ls-looser            { letter-spacing:  0.16em; }
.ls-loose             { letter-spacing:  0.08em; }
.ls-reading           { letter-spacing:  0.03em; }
.ls-normal            { letter-spacing:  0.00em; }
.ls-tight             { letter-spacing: -0.04em; }
.ls-tighter           { letter-spacing: -0.08em; }
.ls-tightest          { letter-spacing: -0.12em; }
.ls-tighterer         { letter-spacing: -0.16em; }
.ls-tighterest        { letter-spacing: -0.20em; }
.ls-most-tight        { letter-spacing: -0.24em; }
.ls-mostest-tight     { letter-spacing: -0.28em; }
.ls-literally-nothing { letter-spacing: -0.42em; }

/*******************************************************************************
** line heights ***************************************************************/

.lh-none   { line-height: 0em; }
.lh-normal { line-height: 1em; }

/*******************************************************************************
** text alignments ************************************************************/

/* patched into bobmagicii/bootstrap5 with responsive stack
.ta-right  { text-align: right; }
.ta-left   { text-align: left; }
.ta-center { text-align: center; }
*/

/*******************************************************************************
** text decorations ***********************************************************/

.td-overline  { text-decoration: underline !important; }
.td-strike    { text-decoration: line-through !important; }
.td-underline { text-decoration: underline !important; }
.td-none      { text-decoration: none !important; border-bottom: 0px !important; }

/*******************************************************************************
** text transforms ************************************************************/

.tt-none, .tt-normal  { text-transform: initial !important; }
.tt-upper, .tt-uppercase { text-transform: uppercase !important; }
.tt-lower, .tt-lowercase { text-transform: lowercase !important; }
.tt-title, .tt-titlecase { text-transform: capitalize !important; }

.fv-small, .fv-small-caps { font-variant: small-caps; }
.fv-petite, .fv-petite-caps { font-variant: petite-caps; }

/*******************************************************************************
** text line wrapping *********************************************************/

.tw-normal { white-space: initial !important; }
.tw-none { white-space: nowrap !important; }
.tw-preline { white-space: pre-line !important; }
.tw-pre { white-space: pre !important; }
.tw-wrap { white-space: wrap; }
.tw-hard { white-space: wrap; word-wrap: break-word; }
.tw-harder { white-space: wrap; word-wrap: break-word; overflow-wrap: anywhere; }

/*******************************************************************************
** text selection *************************************************************/

.ts-normal { user-select: all !important; }
.ts-none { user-select: none !important; }
.ts-contain { user-select: contain !important; }

/*******************************************************************************
** responsive reactions *******************************************************/

@media (max-width: 991.9px) {
	.fs-mostest-small { font-size: 0.44em; }
	.fs-most-small    { font-size: 0.52em; }
	.fs-smallerest    { font-size: 0.60em; }
	.fs-smallerer     { font-size: 0.68em; }
	.fs-smallest      { font-size: 0.76em; }
	.fs-smaller       { font-size: 0.84em; }
	.fs-small         { font-size: 0.92em; }
	.fs-normal        { font-size: 1.00em; }
	.fs-large         { font-size: 1.10em; }
	.fs-larger        { font-size: 1.20em; }
	.fs-largest       { font-size: 1.30em; }
	.fs-largerer      { font-size: 1.40em; }
	.fs-largerest     { font-size: 1.50em; }
	.fs-most-large    { font-size: 1.60em; }
	.fs-mostest-large { font-size: 1.70em; }

	.ls-literally-space   { letter-spacing:  0.60em; }
	.ls-mostest-loose     { letter-spacing:  0.42em; }
	.ls-most-loose        { letter-spacing:  0.36em; }
	.ls-looserest         { letter-spacing:  0.32em; }
	.ls-looserer          { letter-spacing:  0.24em; }
	.ls-loosest           { letter-spacing:  0.18em; }
	.ls-looser            { letter-spacing:  0.12em; }
	.ls-loose             { letter-spacing:  0.06em; }
	.ls-normal            { letter-spacing:  0.00em; }
	.ls-tight             { letter-spacing: -0.04em; }
	.ls-tighter           { letter-spacing: -0.08em; }
	.ls-tightest          { letter-spacing: -0.12em; }
	.ls-tighterer         { letter-spacing: -0.16em; }
	.ls-tighterest        { letter-spacing: -0.20em; }
	.ls-most-tight        { letter-spacing: -0.24em; }
	.ls-mostest-tight     { letter-spacing: -0.28em; }
	.ls-literally-nothing { letter-spacing: -0.42em; }
}

/*******************************************************************************
** misc potential depreciations or refactors **********************************/

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

.text-muted {
	opacity: 0.64;
}

.text-crossed-fs {
	background: linear-gradient(to bottom right, transparent 45.9%, currentColor 49.0%, currentColor 51.0%, transparent 52.1%);
}

.text-crossed-bs {
	background: linear-gradient(to top right, transparent 45.9%, currentColor 49.0%, currentColor 51.0%, transparent 52.1%);
}

/*//////////////////////////////////////////////////////////////////////////////
//// src/ext-bootstrap/forms.css /////////////////////////////////////////////*/



/*//////////////////////////////////////////////////////////////////////////////
//// src/ext-bootstrap/hr.css ////////////////////////////////////////////////*/

.atl-hr-fancy {
	background: linear-gradient(90deg, var(--theme-primary) 0%, var(--theme-grey-lt) 100%) !important;
	border: 0px;
	border-radius: 4px;
	height: 4px;
	opacity: 1.0;
}

/*//////////////////////////////////////////////////////////////////////////////
//// src/ext-bootstrap/jumbotron.css /////////////////////////////////////////*/

:root {
	--atl-jumbotron-bg: #0007;
}

[data-bs-theme="light"] {
	--atl-jumbotron-bg: #0001;
}

/*******************************************************************************
**** restoration of the jumbotron *********************************************/

.jumbotron {
	background-color: var(--atl-jumbotron-bg);
	padding: 1rem;
}

.jumbotron-outline {
	background-color: transparent;
	border: 4px solid var(--atl-jumbotron-bg);
}

/*//////////////////////////////////////////////////////////////////////////////
//// src/ext-bootstrap/modal.css /////////////////////////////////////////////*/

.modal-header,
.modal-header .btn,
.modal-body {
	color: var(--theme-body-fg);
}

/*//////////////////////////////////////////////////////////////////////////////
//// src/ext-bootstrap/opacity.css ///////////////////////////////////////////*/

.o-0   { opacity: 0.0; }
.o-10  { opacity: 0.10; }
.o-25  { opacity: 0.25; }
.o-20  { opacity: 0.20; }
.o-30  { opacity: 0.30; }
.o-40  { opacity: 0.40; }
.o-50  { opacity: 0.50; }
.o-60  { opacity: 0.60; }
.o-70  { opacity: 0.70; }
.o-75  { opacity: 0.75; }
.o-80  { opacity: 0.80; }
.o-90  { opacity: 0.90; }
.o-100 { opacity: 1.0; }

.o-hover-0:hover   { opacity: 0.0; }
.o-hover-10:hover  { opacity: 0.10; }
.o-hover-25:hover  { opacity: 0.25; }
.o-hover-20:hover  { opacity: 0.20; }
.o-hover-30:hover  { opacity: 0.30; }
.o-hover-40:hover  { opacity: 0.40; }
.o-hover-50:hover  { opacity: 0.50; }
.o-hover-60:hover  { opacity: 0.60; }
.o-hover-70:hover  { opacity: 0.70; }
.o-hover-75:hover  { opacity: 0.75; }
.o-hover-80:hover  { opacity: 0.80; }
.o-hover-90:hover  { opacity: 0.90; }
.o-hover-100:hover { opacity: 1.0; }

.o-anim-fast { transition: opacity 250ms; }

/*//////////////////////////////////////////////////////////////////////////////
//// src/ext-bootstrap/overflow.css //////////////////////////////////////////*/

.scroll-y {
	overflow: hidden;
	overflow-x: auto;
}

.scroll-y {
	overflow: hidden;
	overflow-y: auto;
}

.scroll-xy {
	overflow: auto;
}

.scroll-none {
	overflow: hidden;
}

/*//////////////////////////////////////////////////////////////////////////////
//// src/ext-bootstrap/position.css //////////////////////////////////////////*/

.pos-absolute { position: absolute; }
.pos-absolutely { position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; }
.pos-relative { position: relative; }
.pos-sticky { position: sticky; }

.pos-top-left { top: 0px; left: 0px; }
.pos-top-right { top: 0px; right: 0px; }
.pos-bottom-left { bottom: 0px; left: 0px; }
.pos-bottom-right { bottom: 0px; right: 0px; }
.pos-bottom { bottom: 0px; }
.pos-top { top: 0px; }
.pos-left { left: 0px; }
.pos-right { right: 0px; }

.pos-h-center { left: 50%; transform: translateX(-50%); }
.pos-v-center { top: 50%; transform: translateY(-50%); }
.pos-h-center.pos-v-center,
.pos-middle { transform: translateX(-50%) translateY(-50%); }

.gridset { position: relative; width: 100%; height: 100%; }

.gridbox { display: grid; }
.gridbox > * { position: relative; }

/*//////////////////////////////////////////////////////////////////////////////
//// src/ext-bootstrap/responsive-container.css //////////////////////////////*/

.container-viewport {

}

/*//////////////////////////////////////////////////////////////////////////////
//// src/ext-bootstrap/tags.css //////////////////////////////////////////////*/

.tag a:link,
.tag a:visited,
.tag span {
	background: var(--theme-body-fg) !important;
	color: var(--theme-body-bg) !important;

	display: inline-block;
	border-radius: 0.2em;
	padding: 0.04em 0.4em;
	text-shadow: none;
}

.tag-primary {
	background: var(--theme-primary);
	color: var(--theme-body-fg);
}

/*//////////////////////////////////////////////////////////////////////////////
//// src/ext-materialdesignicons.css /////////////////////////////////////////*/

.mdi {
	display: inline-block;
	-vertical-align: middle;
	width: 1.0em;
}

.btn > .mdi:first-child {
	margin-right: 0.25em;
}

.mdi-spin::before {
	-webkit-animation: mdi-spin 1s infinite linear;
	animation: mdi-spin 2s infinite linear;
}

.mdi-spin-fast::before {
	-webkit-animation: mdi-spin 1s infinite linear;
	animation: mdi-spin 1s infinite linear;
}

.mdi-spin-hyper::before {
	-webkit-animation: mdi-spin 500ms infinite linear;
	animation: mdi-spin 500ms infinite linear;
}

/*//////////////////////////////////////////////////////////////////////////////
//// src/ext-simpleicons.css /////////////////////////////////////////////////*/

.si {
	display: inline-block;
	vertical-align: initial;
	width: 1.0em;
}

.btn > .si:first-child {
	margin-right: 0.25em;
}

.si-twitter::before {
	/* content: "\f4e4"; prior to 13.16.0 */
	content: "\f643";
}

/*//////////////////////////////////////////////////////////////////////////////
//// src/ext-litepicker.css //////////////////////////////////////////////////*/

.litepicker select {
	background: #FFF !important;
	border: 1px solid #ccc;
	border-radius: 4px;
	color: #444 !important;
	padding: 4px;
}

/*//////////////////////////////////////////////////////////////////////////////
//// src/ext-grecaptcha.css //////////////////////////////////////////////////*/

.g-recaptcha iframe {

	border-width: 2px !important;
	border-style: solid !important;
	border-color: transparent !important;
	border-radius: 4px;

}

/*//////////////////////////////////////////////////////////////////////////////
//// src/ext-editorjs.css ////////////////////////////////////////////////////*/

.codex-editor__redactor {
	padding-bottom: 100px !important;
}

.ce-toolbar__content,
.ce-block__content {
	max-width: 100%;
	width: 100%;
}

.codex-editor__redactor > .ce-block {
	border-bottom: 2px dashed #FFFFFF22;
	margin-bottom: 0px;
	padding: 0.2rem 1rem 0.6rem 1rem;
}

.ce-toolbar__plus {
	background-color: var(--theme-form-fg);
	border-color: var(--theme-form-border);
	color: var(--theme-form-bg);
}

.ce-inline-toolbar {
	background-color: var(--theme-form-fg);
	border-color: var(--theme-form-border);
	color: var(--theme-form-bg);
}

.ce-inline-toolbar svg {
	height: 32px;
	width: 32px;
}

.ce-inline-toolbar .mdi {
	height: 32px;
	width: 32px;
	font-size: 22px;
}

.ce-inline-tool-input {
	background-color: var(--theme-form-bg);
	border-color: var(--theme-form-border);
	color: var(--theme-form-fg);
}

.ce-toolbar__plus:hover {
	background-color: #FFFFFF !important;
	color: #000000;
}

.ce-block--selected {
	background: var(--theme-primary);
}

.ce-block--selected .ce-block__content {
	background: transparent;
}

/*******************************************************************************
*******************************************************************************/

.atl-editorjs {
	background-color: var(--theme-form-bg);
	border: 1px solid var(--theme-form-border);
	border-radius: 4px;
	color: var(--theme-form-fg);
}

.atl-editorjs-hr {
	margin-top: 2rem;
	margin-bottom: 4rem;
}

.atl-editorjs-hr.empty {
	border-color: transparent !important;
	background: transparent !important;
}

.atl-editorjs-imgupl {
	padding: 1.5rem 0px 1.20rem 0px;
}

/*//////////////////////////////////////////////////////////////////////////////
//// src/fx-text.css /////////////////////////////////////////////////////////*/

.shifty1 {
	position: relative;
	white-space: nowrap;
}

.shifty1::after {
	color: #F00;
	content: attr(data-title);

	position: absolute;
	top: 0px;
	left: -2px;
	opacity: 0.2;
}

.shifty1::before {
	color: #0FF;
	content: attr(data-title);

	position: absolute;
	top: 0px;
	left: 2px;
	opacity: 0.2;
}

.shifty {
	position: relative;
	white-space: nowrap;
}

.shifty::before {
	color: #000;
	content: attr(data-title);

	position: absolute;
	top: 0px;
	left: 3px;
	opacity: 0.8;
	mix-blend-mode: soft-light;
}

.scale-anim {
	transition: transform 250ms;
}

.scale-anim-1 {
	transform: scale(1.0);
}

.scale-anim-1a {
	transform: scale(1.1);
}

/*//////////////////////////////////////////////////////////////////////////////
//// src/design/footer.css ///////////////////////////////////////////////////*/

/* header element stuff *******************************************************/

.PageFooter {
	position: relative;
	z-index: 9001;

	background-color: var(--theme-footer-bg);
	padding: 64px 0px 64px 0px;
}

.PageFooter a:link:not(.btn),
.PageFooter a:visited:not(.btn) {
	color: var(--bs-body-color);
	text-decoration: none;
	transition: color 200ms;
}

.PageFooter a:hover:not(.btn),
.PageFooter a:active:not(.btn) {
	color: var(--bs-link-hover-color);
}

.PageFooter nav {
	text-transform: uppercase;
}

.PageFooter nav .btn {
	font-size: 0.8em;
	font-weight: bold;
	padding: 1px 8px 2px 8px;
}

/* header menu stuff **********************************************************/

.PageFooterMenu {
	height: 0px;
	overflow: hidden;
}

.PageFooterMenuToggle:nth-of-type(1) {
	opacity: 1.0;
}

.PageFooterMenuToggle:nth-of-type(2) {
	opacity: 0.0;
}

.MenuOpen .PageFooterMenuToggle:nth-of-type(1) {
	opacity: 0.0;
}

.MenuOpen .PageFooterMenuToggle:nth-of-type(2) {
	opacity: 1.0;
}

.MenuOpen .PageFooterMenu {
	height: auto;
}

/* responsive *****************************************************************/

@media(min-width:768px) {
	.PageFooterMenu {
		height: auto;
	}
}

/*//////////////////////////////////////////////////////////////////////////////
//// src/design/header.css ///////////////////////////////////////////////////*/

/* header element stuff *******************************************************/

:root {
	--theme-header-bg: var(--theme-black);
	--theme-header-fg: var(--theme-white);
	--theme-header-link-fg: var(--theme-white);
	--theme-header-link-fg-hover: var(--theme-orange-alt);
	--theme-header-pad-x: 0.00rem;
	--theme-header-pad-y: 0.75rem;
}

.atl-page-header {
	position: relative;
	z-index: 9001;

	background-color: var(--theme-header-bg);
	color: var(--theme-header-fg);
	padding: var(--theme-header-pad-y) var(--theme-header-pad-x);
}

.atl-page-header a:link:not(.btn),
.atl-page-header a:visited:not(.btn) {
	border-bottom: 0px;
	color: var(--theme-header-link-fg);
	text-decoration: none;
	transition: color 150ms;
}

.atl-page-header a:hover:not(.btn),
.atl-page-header a:active:not(.btn) {
	color: var(--theme-header-link-fg-hover);
}

.atl-page-header-logo-text {
	font-weight: bold;
}

.atl-page-header-logo-img {
	max-height: 20px;
}

.atl-page-header-menubtn {
	border-color: var(--theme-white);
	color: var(--theme-white);
	padding: 0px 0.5rem;
}

.atl-page-header-menubtn .mdi-menu {
	font-size: 2.0rem;
	line-height: 2.0rem;
	margin: 0px 0px;
}

.atl-page-header-menubtn:hover {
	background-color: var(--theme-white);
	border-color: var(--theme-white);
	color: var(--theme-black);
	padding: 0px 0.5rem;
}

.atl-page-header nav .btn {
	font-size: 0.8em;
	font-weight: bold;
	padding: 1px 8px 2px 8px;
}

/*//////////////////////////////////////////////////////////////////////////////
//// src/design/page-note-dev.css ////////////////////////////////////////////*/

.atl-page-note-dev {
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 9101;
	width: 7svw;
	height: 7svw;

	filter: drop-shadow(2px 2px 2px #0004);
}

.atl-page-note-dev > div {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	clip-path: polygon(0 0, 0 100%, 100% 0);
}

.atl-page-note-dev svg,
.atl-page-note-dev label {
	position: absolute;
	top: 1svw;
	left: 1svw;
	height: 5svw;
	width: 5svw;
	transform: rotate(-45deg);

	line-height: 1.2rem;
	font-family: 'Beiruti', monospace;
	font-size: 1.5svw;
	font-weight: 900;
	text-align: center;
}

@media(max-width: 767.99px) {
	.atl-page-note-dev {
		width: 12svw;
		height: 12svw;
		filter: drop-shadow(2px 2px 1px #0004);
	}

	.atl-page-note-dev svg,
	.atl-page-note-dev label {
		height: 6svw;
		width: 6svw;

		font-size: 2.5svw;
	}
}

/*//////////////////////////////////////////////////////////////////////////////
//// src/elements/ace-editor.css /////////////////////////////////////////////*/

.atl-code-viewer section {
	border-radius: 4px;

	background-color: var(--theme-body-bg) !important;
	font-family: 'FiraCode', 'Consolas', monospace !important;
	white-space: pre;
}

/* this is a theme that force overwrites how ace is at all times. this is not
the correct way to do it. the correct way involves telling ace a custom theme
is being used and then prefixing all these with that theme name, if i recall. */

.ace_class, .ace_constant, .ace_function, .ace_identifier, .ace_keyword,
.ace_lparen, .ace_numeric, .ace_operator, .ace_paren, .ace_punctuation,
.ace_rparen, .ace_string, .ace_support, .ace_variable {
	color: var(--theme-body-fg) !important;
	text-shadow: 0px 0px var(--SyntaxGlowSize) color-mix(in hsl shorter hue, var(--theme-body-fg) var(--SyntaxGlowShift), var(--SyntaxGlowMix)) !important;
	font-style: normal;
	font-weight: normal;
	text-decoration: none;
}

.aace_editor {
	background-color: var(--theme-body-bg) !important;
	font-family: 'FiraCode', 'Consolas', monospace !important;
}

.ace_line {
	margin-left: 4px;
}

.ace_bracket {
	border: 0px !important;
}

/*******************************************************************************
*******************************************************************************/

.ace_identifier {
	color: var(--SyntaxNamespace) !important;
	text-shadow: 0px 0px var(--SyntaxGlowSize) color-mix(in hsl shorter hue, var(--SyntaxNamespace) var(--SyntaxGlowShift), var(--SyntaxGlowMix)) !important;
}

.ace_class {
	color: var(--SyntaxClass) !important;
	text-shadow: 0px 0px var(--SyntaxGlowSize) color-mix(in hsl shorter hue, var(--SyntaxClass) var(--SyntaxGlowShift), var(--SyntaxGlowMix)) !important;
}

.ace_variable {
	color: var(--SyntaxVariable) !important;
	font-weight: bold !important;
	text-shadow: 0px 0px var(--SyntaxGlowSize) color-mix(in hsl shorter hue, var(--SyntaxVariable) var(--SyntaxGlowShift), var(--SyntaxGlowMix)) !important;
}

.ace_string {
	color: var(--SyntaxString) !important;
	text-shadow: 0px 0px var(--SyntaxGlowSize) color-mix(in hsl shorter hue, var(--SyntaxString) var(--SyntaxGlowShift), var(--SyntaxGlowMix)) !important;
}

/** targets the most leafy of tokens that look like namespace chains. */
.ace_identifier ~ .ace_identifier:has(+ .ace_punctuation) {
	color: var(--SyntaxClass) !important;
	text-shadow: 0px 0px var(--SyntaxGlowSize) color-mix(in hsl shorter hue, var(--SyntaxClass) var(--SyntaxGlowShift), var(--SyntaxGlowMix)) !important;
}

/** targets the most leafy of method calls on a chain.. */
.ace_identifier ~ .ace_identifier:has(+ .ace_paren) {
	color: var(--SyntaxMethod) !important;
	text-shadow: 0px 0px var(--SyntaxGlowSize) color-mix(in hsl shorter hue, var(--SyntaxMethod) var(--SyntaxGlowShift), var(--SyntaxGlowMix)) !important;
}

/** targets the most leafy object property chains. */
.ace_variable ~ .ace_identifier,
.ace_variable ~ .ace_identifier ~ .ace_identifier {
	color: var(--SyntaxProperty) !important;
	text-shadow: 0px 0px var(--SyntaxGlowSize) color-mix(in hsl shorter hue, var(--SyntaxProperty) var(--SyntaxGlowShift), var(--SyntaxGlowMix)) !important;
}

/*//////////////////////////////////////////////////////////////////////////////
//// src/elements/article.css ////////////////////////////////////////////////*/

.atl-ui-article-section {
	color: var(--theme-primary);
	font-weight: bold;
	margin-bottom: 1.0em;
}

.atl-ui-article-pathbar {
	font-size: 0.8em;
	font-weight: bold;
	margin-bottom: 1.0em;
}

.atl-ui-article-section {
	margin-bottom: 0.0em;
	font-size: 1.0em;
}

.atl-ui-article-title {
	margin-bottom: 0.0em;
	line-height: 1.0em;
}

.atl-ui-article-subline {
	display: flex;
	gap: 2.0em;
	font-size: 0.8rem;
	opacity: 0.42;
	padding-top: 0.5rem;
}

.atl-ui-article-content {
	padding-top: 1.5em;
}

/*//////////////////////////////////////////////////////////////////////////////
//// src/elements/blog.css ///////////////////////////////////////////////////*/

:root {

	--atl-blog-bg0: var(--theme-black); /* blog header overall bg */

	--atl-blog-bg1: var(--theme-black); /* primary gradient 1 */
	--atl-blog-bg2: var(--theme-white); /* primary gradient 2 */

	--atl-blog-bg3: var(--theme-black); /* secondary gradient 1 */
	--atl-blog-bg4: var(--theme-white); /* secondary gradient 2 */

	--atl-blog-fg1: var(--theme-white); /* titlebar */
	--atl-blog-fg2: var(--theme-black); /* post date */

	/* headings 1-6 */
	--atl-blog-fgh1: var(--theme-white);
	--atl-blog-fgh2: var(--theme-white);
	--atl-blog-fgh3: var(--theme-white);
	--atl-blog-fgh4: var(--theme-white);
	--atl-blog-fgh5: var(--theme-white);
	--atl-blog-fgh6: var(--theme-white);

}

/* the header widget in its entirety */

.atl-blog-header {
	position: relative;
	overflow: hidden;

	background-color: var(--atl-blog-bg0);
}

/* undermost layer to add art. */

.atl-blog-header-wash {
	position: absolute;
	height: 100%;
	width: 100%;

	background-image: var(--image);
	background-position: center center;
	filter: blur(30px) brightness(0.35) opacity(0.85);
	transform: scale(1.25);
}

/* titlebar stripe above the blog graphic. */

.atl-blog-header-titlebar {
	position: relative;

	background-color: var(--atl-blog-bg1);
}

.atl-blog-header-titlebar,
.atl-blog-header-titlebar a:link,
.atl-blog-header-titlebar a:visited {
	border: 0px;
	color: var(--atl-blog-fg1);
}

.atl-blog-header-titlebar-title {
	font-weight: 700;
}

.atl-blog-header-titlebar-tagline {
	opacity: 0.75;
	font-weight: 500;
}

@media(max-width: 767.99px) {
	.atl-blog-header-titlebar-tagline {
		opacity: 0.75;
		font-size: 0.75em;
	}
}

.atl-blog-header-breakbar {
	position: relative;

	background-color: var(--atl-blog-bg2);
	height: 4px;
}

/* artwork area of the header */

.atl-blog-header-artwork {
	position: relative;
}

.atl-blog-header-artwork-graphic {
	position: relative;
	background-position: 50% 25%;
	height: 250px;
}

.atl-blog-header-artsplit-icon {
	position: relative;
	height: 200px;
	width: 200px;
}

.atl-blog-header-artsplit-graphic {
	position: relative;
	background-position: 50% 25%;
	height: 200px;
}


@media(max-width: 991.99px) {
	.atl-blog-header-artsplit-icon {
		height: 150px;
		width: 150px;
	}

	.atl-blog-header-artsplit-graphic {
		height: 150px;
	}
}

@media(max-width: 767.99px) {
	.atl-blog-header-artsplit-icon {
		height: 100px;
		width: 100px;
	}

	.atl-blog-header-artsplit-graphic {
		background-position: 75% 50%;
		height: 100px;
	}

	.atl-blog-header-artsplit-graphic {
		background-position: 75% 50%;
	}
}

@media(max-width: 575.99px) {
	.atl-blog-header-artsplit-graphic {
		height: 145px;
	}
}

/***/

/* make hr's inside of blog posts to be fancy */

.atl-blog-post-container hr {
	background: linear-gradient(135deg, var(--atl-blog-bg1) 0%, var(--atl-blog-bg2) 100%);
	border: 0px;
	border-radius: 4px;
	height: 4px;
	opacity: 1.0;
}

.atl-blog-post-container h3 hr,
.atl-blog-post-container h4 hr,
.atl-blog-post-container h5 hr,
.atl-blog-post-container h6 hr {
	display: none;
}

/* allow headings to be themed wihin posts */

.atl-blog-post-container h1 { color: var(--atl-blog-fgh1); }
.atl-blog-post-container h2 { color: var(--atl-blog-fgh2); }
.atl-blog-post-container h3 { color: var(--atl-blog-fg2); }
.atl-blog-post-container h4 { color: var(--atl-blog-fg2); }
.atl-blog-post-container h5 { color: var(--atl-blog-fg2); }
.atl-blog-post-container h6 { color: var(--atl-blog-fg2); }

/* blog post content styling */

.atl-blog-post-dateline {
	color: var(--atl-blog-fg2);
	font-size: 0.8em;
	font-weight: bold;
	text-transform: uppercase;
}

.atl-blog-post-title {
	margin-bottom: 0.5rem;
}

.atl-blog-post-tags .btn {
	border-radius: 4px;
}

.atl-blog-post-img {
	text-align: center;
	margin-bottom: 2rem;
}

.atl-blog-post-img img {
	background: linear-gradient(90deg, var(--atl-blog-bg3) 0%, var(--atl-blog-bg4) 100%) !important;
	padding: 2px;

	border-radius: 10px;
	max-width: 100%;
}

.atl-blog-post-img figcaption {
	font-size: 0.8em;
	font-style: italic;
	opacity: 0.65;
	padding-top: 0.5rem;
}

.atl-blog-post-row .ratiobox a {
	border: 0px !important;
}

/* utility */

.atl-blog-bg-grad1 {
	background-image: linear-gradient(90deg, var(--atl-blog-bg1), var(--atl-blog-bg2) );
}

.atl-blog-bg-grad2 {
	background-image: linear-gradient(90deg, var(--atl-blog-bg3), var(--atl-blog-bg4) );
}

/*//////////////////////////////////////////////////////////////////////////////
//// src/elements/collapser.css //////////////////////////////////////////////*/

.Collapser {
	margin-bottom: 1.5em;
}

.Collapser > header {
	background-color: var(--bs-secondary-bg);
	border-radius: 6px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 1.5em;
	font-weight: bold;
	margin-bottom: 0.75em;
	padding: 6px 6px 6px 12px;
	user-select: none;
}

.Collapser > header .Indicator {
	font-size: 1.3em;
	margin-left: 0.5em;
	transform: rotate(0deg);
	transition: transform 400ms;
}

.Collapser > section {
	border-left: 4px solid var(--bs-secondary-bg);
	display: none;
	padding-left: 8px;
}

.Collapser.Open > section {
	display: block;
}

.Collapser.Open > header .Indicator {
	transform: rotate(225deg);
}

/*******************************************************************************
** Boxy Stack Style ***********************************************************/

.CollapserStack.Boxy {
	border-top: 1px solid #00000066;
}

.CollapserStack.Boxy .Collapser {
	margin: 0px;
	padding: 0px;
	border-bottom: 1px solid #00000066;
}

.CollapserStack.Boxy .Collapser header {
	background-color: transparent;
	border-radius: 0px;
	padding: 1rem 0px;
	margin: 0px;
	font-size: 1.2em;
}

.CollapserStack.Boxy .Collapser section {
	border: 0px;
	padding: 0px 0px 1rem 0px;
	margin: 0px;
}

.CollapserStack.Boxy .Collapser header .Indicator {
	font-size: 1.6em;
	transform: scaleY(1) rotate(0deg);
}

.CollapserStack.Boxy .Collapser.Open header .Indicator {
	transform: scaleY(-1) rotate(0deg);
}

/*//////////////////////////////////////////////////////////////////////////////
//// src/elements/dropsort.css ///////////////////////////////////////////////*/

.atl-dropsort {

}

.atl-dropsort-item {
	background-color: var(--theme-grey-lt);
	color: var(--theme-black);
	transition: opacity 200ms, background-color 200ms;
}

.atl-dropsort-item.droptarget {
	background-color: var(--theme-red);
}

.atl-dropsort-item.droptarget a:link,
.atl-dropsort-item.droptarget a:visited {
	color: var(--theme-white) !important;
}

.atl-dropsort-item.moved {
	color: var(--theme-red);
}

.atl-dropsort-item-handle {
	cursor:grab
}

/*//////////////////////////////////////////////////////////////////////////////
//// src/elements/editor-html.css ////////////////////////////////////////////*/

.Editor {
	background-color: var(--theme-body-bg-alt);
	border-radius: 6px;
	padding: 6px;
}

.Editor .EditorItem.Selected {
	border-radius: 0.25rem;
	outline: 2px solid var(--theme-primary);
}

.Editor .Viewport {
	border-radius: 6px;
	padding: 6px;

	max-height: 40vh;
	overflow-y: scroll;
}

.Editor .Viewport:focus-visible {
	outline: 2px solid var(--theme-primary-alt);
}

.Editor .Toolbar {
	gap: 0.50rem;
	padding: 6px;
	border-radius: 6px;
	margin-bottom: 6px;
}

.Editor .Toolbar > div {
	padding: 0px !important;
}

.Editor .ToolbarButton {
	display: flex;
	align-items: center;
	flex-grow: 0;

	font-size: 1.2em;
	padding: 1px 6px 0px 6px;
}

.Editor .ToolbarButton > span {
	display: none;
}

.Editor .ToolbarDropdown .dropdown-menu {
	background-color: var(--bs-secondary-bg);
}

.Editor .ToolbarDropdown .row {
	gap: 0.50rem;
}

.Editor .ToolbarDropdown .row > div {
	padding: 0px !important;
}

.Editor .Debug {
	font-size: 0.8rem;
	padding-top: 16px;
	white-space: break-word;

	display: none;
	max-height: 10vh;
	overflow-y: scroll;
}

.EditorItem {
	user-select: none;
}

.EditorContent blockquote {
	margin-left: 3rem;
}

.EditorContent ul > li {
	margin-bottom: 16px;
}

.EditorContent ul > li:last-of-type {
	margin-bottom: 0px;
}

.EditorContent .float-start {
	margin-bottom: 0.5rem;
	margin-right: 0.5rem;
}

.EditorContent .EditorItemImage {
	border-radius: 6px;
}

.EditorContent .break-clear {
	border: 0px;
}

.EditorContent.Viewport .break-clear {
	background: #a00;
	border-radius: 6px;
	padding: 16px;
	background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
}

/*//////////////////////////////////////////////////////////////////////////////
//// src/elements/field-tag-search.css ///////////////////////////////////////*/

.atl-field-tag-search-results > div.position-absolute {
	background: var(--theme-menu-bg);
	border: 1px solid var(--theme-form-border);
	box-shadow: 0px 0px 10px #000000;
	border-radius: 4px;
	padding: 0.5rem;
	bottom: 4px;

	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

[data-bs-theme="light"] .atl-field-tag-search-results > div.position-absolute {
	box-shadow: 0px 0px 10px #00000066;
}

.atl-field-tag-search-results {

}

.atl-field-tag-search-selected {

}

/*//////////////////////////////////////////////////////////////////////////////
//// src/elements/gallery.css ////////////////////////////////////////////////*/

.GalleryItem .GalleryHoverTools {
	background: var(--theme-dark-glass);
	padding: 4px;
	opacity: 0.0;
	width: 100%;
}

.GalleryItem:hover .GalleryHoverTools {
	opacity: 1.0;
}

.atl-ui-gallery-item {
	background: var(--theme-dark-glass);
	padding: 0.65em;

	border-radius: 0.75em;
}

.atl-ui-gallery-item img,
.atl-ui-gallery-item .btn {
	border-radius: 0.45em;
}

.atl-ui-gallery-item img {
	border-radius: 0.45em;
}

.atl-ui-gallery-item .atl-ui-gallery-item-tools {
	display: none;
	padding: 0.325em;
}

.atl-ui-gallery-item:hover .atl-ui-gallery-item-tools {
	display: block;
}

/*//////////////////////////////////////////////////////////////////////////////
//// src/elements/misc.css ///////////////////////////////////////////////////*/

.PrettyBrandText {
	display: inline-block;
	font-weight: bold;
	border-top: 0.15em solid;
	border-color: var(--theme-primary);
	text-transform: uppercase;
	line-height: 1.4rem;
}

.PrettyBrandTextFixed {
	display: inline-block;
	font-weight: bold;
	border-top: 4px solid;
	border-color: var(--theme-primary);
	text-transform: uppercase;
	line-height: 1.4rem;
}

.FancyOrVH {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	height: 100%;
}

.FancyOrVH > div {
	flex-grow: 1;
	flex-shrink: 1;
	margin: 0px;
	padding: 0px;
	opacity: 0.25;
	text-align: center;
}

.FancyOrVH > div:after {
	content: ' ';
	background: #fff;
	display: inline-block;
	height: 100%;
	width: 1px;
}

.FancyOrVH > label {
	flex-shrink: 1;
	flex-grow: 0;
	font-style: italic;
	padding: 6px;
	text-align: center;
	text-transform: uppercase;
}

@media(max-width: 767.99px) {
	/** md or smaller */

	.FancyOrVH {
		flex-direction: row;
	}

	.FancyOrVH > div:after {
		background: #fff;
		height: 1px;
		width: 100%;
	}
}

.FancyStateButton {
	display: flex;
}

.FancyStateButton > i {
	overflow: auto;
	width: 0rem;

	transition: width 200ms;
}

.FancyStateButton.btn-primary .Idle {
	margin-right: 0.25rem;
	width: 1.0rem;
}

.FancyStateButton.btn-success .Success {
	margin-left: 0.25rem;
	width: 1.0rem;
}

.FancyStateButton.btn-danger .Danger {
	margin-left: 0.25rem;
	width: 1.0rem;
}

/*//////////////////////////////////////////////////////////////////////////////
//// src/elements/nether-sensei.css //////////////////////////////////////////*/

:root {
	--SenseiGreen: #9ddd4f;
	--SenseiPurple: #b991d9;
	--SenseiGrey: #c0c0c0;
	--SenseiBlue: #51b6dd;

	--SenseiNamespace: #5a74bb;
	--SenseiClass: #51b6dd;
	--SenseiInterface: #c26ebe;
	--SenseiTrait: #845dcc;
	--SenseiAttribute: #8ac3da;

	--SenseiFinal: #dd4f4f;
	--SenseiAbstract: #b14141;
	--SenseiStatic: #dd774f;
	--SenseiAccess: #c4a85d;

	--SenseiType: #3875af;
	--SenseiConstant: #38af6a;
	--SenseiProperty: #3da87f;
	--SenseiMethod: #55ad61;

	--SenseiTextLight: #eeeeee;
	--SenseiTextDark: #222222;
	--SenseiColourDark: #222222;
	--SenseiColourLight: #eeeeee;

	--SyntaxGlowSize: 0.75rem;
	--SyntaxGlowMix: #0000;
	--SyntaxGlowShift: 30%;

	--SyntaxNamespace: #90a8eaFF;
	--SyntaxClass: #8fc5f5FF;
	--SyntaxMethod: #c7a6d4FF;
	--SyntaxVariable: #f0834dFF;
	--SyntaxProperty: #eaa785FF;
	--SyntaxString: #f2bfbfFF;
}

.border-colour-namespace { border-color: var(--SenseiNamespace) !important; }
.border-colour-class { border-color: var(--SenseiClass) !important; }
.border-colour-interface { border-color: var(--SenseiInterface) !important; }
.border-colour-trait { border-color: var(--SenseiTrait) !important; }
.border-colour-attribute { border-color: var(--SenseiAttribute) !important; }
.border-colour-constant { border-color: var(--SenseiConstant) !important; }
.border-colour-property { border-color: var(--SenseiProperty) !important; }
.border-colour-method { border-color: var(--SenseiMethod) !important; }


.Tag {
	border-top: 2px solid var(--SenseiGrey);
	padding-top: 2px;
}

.Tag.Primary { border-color: var(--SenseiGreen); }
.Tag.Secondary { border-color: var(--SenseiPurple); }
.Tag.Type { border-color: var(--SenseiType); }
.Tag.Class { border-color: var(--SenseiClass); }
.Tag.Interface { border-color: var(--SenseiInterface); }
.Tag.Trait { border-color: var(--SenseiTrait); }
.Tag.Namespace { border-color: var(--SenseiNamespace); }
.Tag.Final { border-color: var(--SenseiFinal); }
.Tag.Static { border-color: var(--SenseiStatic); }
.Tag.Access { border-color: var(--SenseiAccess); }
.Tag.Abstract { border-color: var(--SenseiFinal); }
.Tag.Attribute { border-color: var(--SenseiAttribute); }

.TagText {
	color: var(--SenseiTextLight);
}

.TagText.Primary { color: var(--SenseiGreen); }
.TagText.Secondary { color: var(--SenseiPurple); }
.TagText.Type { color: var(--SenseiBlue); }

.Tag > a {
	color: inherit;
	text-decoration: none;
	border-bottom-color: inherit;
}

/*******************************************************************************
*******************************************************************************/

.Block {
	background-color: var(--SenseiGrey);
	border-radius: 2px;
	color: var(--SenseiTextLight);
	font-weight: bold;
	line-height: 1em;
	padding: 1px 6px;
	text-decoration: none;
	vertical-align: middle;
}

.Block:link,
.Block:visited {
	color: var(--SenseiTextLight) !important;
	border-bottom: 0px !important;
	text-decoration: none !important;
}

.Block.Primary { background-color: var(--theme-primary); }
.Block.Secondary { background-color: var(--SenseiPurple); }
.Block.Access { background-color: var(--SenseiPurple); }
.Block.Type { background-color: var(--SenseiType); }
.Block.Class { background-color: var(--SenseiClass); }
.Block.Interface { background-color: var(--SenseiInterface); }
.Block.Trait { background-color: var(--SenseiTrait); }
.Block.Namespace { background-color: var(--SenseiNamespace); }
.Block.Final { background-color: var(--SenseiFinal); }
.Block.Static { background-color: var(--SenseiStatic); }
.Block.Access { background-color: var(--SenseiAccess); }
.Block.Abstract { background-color: var(--SenseiAbstract); }
.Block.Attribute { background-color: var(--SenseiAttribute); }

/*//////////////////////////////////////////////////////////////////////////////
//// src/elements/pager.css //////////////////////////////////////////////////*/

.atl-ui-pager .btn.disabled {
	opacity: 0.15;
}

.atl-ui-pager .pager-status {
	font-weight: bold;
}

/*//////////////////////////////////////////////////////////////////////////////
//// src/elements/pathbar.css ////////////////////////////////////////////////*/

.atl-ui-pathbar {
	display: flex;
	gap: 0.5em;
}

.atl-ui-pathbar-sep {
	opacity: 0.25;
}

/*//////////////////////////////////////////////////////////////////////////////
//// src/elements/pillbox.css ////////////////////////////////////////////////*/

.atl-ui-pillbox-item a:link,
.atl-ui-pillbox-item a:visited {
	-background: var(--theme-body-bg) !important;
	-color: var(--theme-body-fg) !important;

	border-bottom: 0px;
	display: block;
	font-weight: bold !important;
	padding: 6px 10px 5px 10px;
	border-radius: 4px;
	white-space: nowrap;
}

.atl-ui-pillbox-moredown-dropdown .dropdown-toggle {
	background: var(--theme-body-bg) !important;
	color: var(--theme-body-fg) !important;

	border-bottom: 0px;
	display: block;
	font-weight: bold !important;
	padding: 6px 10px 5px 10px;
	border-radius: 4px;
	white-space: nowrap;
}

.atl-ui-pillbox-moredown-dropdown .dropdown-menu-item {
	/* give in the menu some finger space. */
	padding: 4px 0px;
}

.atl-ui-pillbox-item a:hover {
	background-color: var(--theme-primary);
	color: var(--theme-white);
}

.atl-ui-pillbox-item.on a:link,
.atl-ui-pillbox-item.on a:visited {
	background: var(--theme-body-fg) !important;
	color: var(--theme-body-bg) !important;
}

/*//////////////////////////////////////////////////////////////////////////////
//// src/elements/pretty-modern-box.css //////////////////////////////////////*/

.PrettyModernBox {
	background-color: var(--theme-dark-glass);
	border-radius: 5px;
	padding: 1.0em;
}

.PrettyModernBox h3,
.PrettyModernBox dt {
	display: flex;
	align-items: center;
	justify-content: center;

	letter-spacing: 0.12em;
	margin-bottom: 0.5em;
	font-weight: 200;
	text-transform: uppercase;
}

.PrettyModernBox h3 a,
.PrettyModernBox h3 span,
.PrettyModernBox dt a,
.PrettyModernBox dt span {
	flex-grow: 0;
}

.PrettyModernBox h3 hr,
.PrettyModernBox dt hr {
	flex-grow: 1;
	margin: 0px 0.5rem;
	padding: 0px
}

.PrettyModernBox h3 hr:first-child,
.PrettyModernBox dt hr:first-child {
	margin: 0px 0.5em 0px 0px;
}

.PrettyModernBox h3 hr:last-child,
.PrettyModernBox dt hr:last-child {
	margin: 0px 0px 0px 0.5em;
}

.PrettyModernBox a:link:not(.underdot),
.PrettyModernBox a:visited:not(.underdot) {
	border-bottom: 0px !important;
}

.PrettyModernBox dd {
	margin: 0px;
	padding: 0px;
}

.PrettyModernBox blockquote {
	letter-spacing: 0.12em;
	line-height: 1em;
	font-size: 2em;
	font-weight: 200;
	margin-bottom: 0px;
	text-align: right;
}

.PrettyModernBox .PrettyBrandText {
	border-top: 0.10em solid;
	font-weight: 200;
}

.PrettyModernBox .line-clamp-terminator {
	-background: linear-gradient(90deg, #1A1A1A00 0%, #1A1A1AFF 100%);
}

/*//////////////////////////////////////////////////////////////////////////////
//// src/elements/pretty-modern-navbar.css ///////////////////////////////////*/

.PrettyModernNavbar {
	font-weight: 600;
	background-color: var(--theme-dark-glass);
	border-radius: 5px;
	padding: 0.75rem 1.0rem 0.75rem 1.0rem;
}

.PrettyModernNavbar span {
	opacity: 0.50;
}

.PrettyModernNavbar a:link,
.PrettyModernNavbar a:visited {
	color: var(--bs-body-color);
}

/*//////////////////////////////////////////////////////////////////////////////
//// src/elements/sitemenu.css ///////////////////////////////////////////////*/

:root {
	--theme-sitemenu-bg: #000000AA;
	--theme-sitemenu-fg: var(--theme-white);
	--theme-sitemenu-blur: 8px;
	--theme-sitemenu-page-padding: 0.0rem;
	--theme-sitemenu-page-corner: 0px;
	--theme-sitemenu-page-edge: 0px solid #FFFFFF22;
	--theme-sitemenu-page-shadow: 0px 0px 14px #000000AA;
}

/* bootstrap resets */

.atl-sitemenu-page.offcanvas {
	background: transparent;
}

/* atlantis sitemenu */

.atl-sitemenu .atl-sitemenu-page.show,
.atl-sitemenu .atl-sitemenu-page.showing,
.atl-sitemenu .atl-sitemenu-page.hiding {

}

.atl-sitemenu .atl-sitemenu-page.show {

}

/* atlantis sitemenu page */

.atl-sitemenu-page {
	border: 0px;
	padding: var(--theme-sitemenu-page-padding);
}

.atl-sitemenu-page.offcanvas-end {
	border-left: var(--theme-sitemenu-page-edge) !important;
	margin-right: var(--theme-sitemenu-page-padding);
}

.atl-sitemenu-page-container {
	display: flex;
	flex-direction: column;

	background-color: var(--theme-sitemenu-bg);
	color: var(--theme-sitemenu-fg);
	backdrop-filter: blur(var(--theme-sitemenu-blur));
	border-radius: var(--theme-sitemenu-page-corner);
	box-shadow: var(--theme-sitemenu-page-shadow);
	min-height: 100%;
	overflow: hidden;
}

.atl-sitemenu-page .offcanvas-header {
	display: flex;
	justify-content: space-between;
	align-items: center !important;
}

.atl-sitemenu-page .offcanvas-header .offcanvas-title {
	font-weight: bold;
}

.atl-sitemenu-page .offcanvas-header .btn-dark {
	padding: 0rem 0.5rem;
	font-size: 1.5rem;
}

.atl-sitemenu-page .offcanvas-header .btn-dark .mdi {
	margin: 0px;
	padding: 0px;
}

.atl-sitemenu-page .offcanvas-body {
	overflow: hidden;
	overflow-y: scroll;
	height: 100%;
}

.atl-sitemenu-page .offcanvas-footer {
	font-size: small;
	padding: 1rem;
	text-align: center;
}

.sitemenu-body-lock {
	position: fixed;
	overflow-y: hidden;
	scrollbar-gutter: stable;
	width: 100%;
}

/*//////////////////////////////////////////////////////////////////////////////
//// src/elements/statebtn.css ///////////////////////////////////////////////*/

.atl-statebtn {
	display: grid;
	background: transparent !important;
	border: 0px !important;
	padding: 0px !important;
	text-align: center !important;
	opacity: 1.0;
	transition: opacity 300ms;
}

.atl-statebtn[disabled] {
	opacity: 0.75;
}

.atl-statebtn .btn {
	grid-column-start: 0;
	grid-column-end: 1;
	grid-row-start: 0;
	grid-row-end: 1;

	opacity: 0.0;
	width: 100%;

	transition: opacity 150ms;
}

.atl-statebtn.atl-state-default .default {
	opacity: 1.0;
}

.atl-statebtn.atl-state-success .success {
	opacity: 1.0;
}

.atl-statebtn.atl-state-error .error {
	opacity: 1.0;
}

.atl-statebtn.atl-state-processing .processing {
	opacity: 1.0;
}

/*//////////////////////////////////////////////////////////////////////////////
//// src/elements/swiper.css /////////////////////////////////////////////////*/

/*******************************************************************************
********************************************************************************

Element: Nether\Atlantis\UI\Slider
Area:    elements/slider

* .swiper-supercontainer
wraps the swiper and after it is rigged up reparents the button and pager docks
into this for easier styling where the elements do not cover things up.

* .swiper.swiper-coldboot
hide the swiper untils its ready. this causes the page to grow when it turns on
rather than shink after the swiper configures itself when it contains
ratioboxes.

* .swiper.swiper-realboot
boot this slider swiper as part of the batch the page theme does rather than
pinging with its own document ready func.

* .swiper-buttons
docks the next/prev buttons and gets reparented to the supercontainer when
it is ready to go.

* .swiper-pager
docks the paginator widget and gets reparented to the supercontainer when it
is ready to go.

* swiper-pager-bullet-square
makes the pager bullets be square instead of circle.

<div class="swiper-supercontainer">
	<div id="" class="swiper swiper-coldboot swiper-realboot">
		<div class="swiper-wrapper">
			<div class="swiper-slide"></div>
			...
		</div>

		<!-- if omitted, added automatically. -->
		<div class="swiper-buttons">
			<div class="swiper-button-prev"></div>
			<div class="swiper-button-next"></div>
		</div>

		<!-- if omitted, added automatically. -->
		<div class="swiper-pager">
			<div class="swiper-pagination"></div>
		</div>
	</div>
</div>

********************************************************************************
*******************************************************************************/

:root {
	--theme-swiper-btn-bg:      #00000000;
	--theme-swiper-btn-bg-next: #000000AA;
	--theme-swiper-btn-bg-stop: #00000033;

	--theme-swiper-pager-bg-this: #AAAAAA;
	--theme-swiper-pager-bg-nope: #222222;
}

.atl-ui-slider {

}

.swiper-supercontainer {
	position: relative;
}

.swiper-coldboot {
	display: none !important;
}

.swiper {
	border-radius: 6px;
	overflow: hidden !important;
}

.swiper-wrapper {
	margin-bottom: 0px !important;
}

.swiper-pager {
	position: absolute;
	display: flex;
	justify-content: center;
	width: 100%;
}

.swiper-pagination {
	bottom: auto !important;
	flex-grow: 0;
}

.swiper-pagination-horizontal {
	line-height: 1.0em;
}

.swiper-buttons {
	position: absolute;
	top: 0px;
	width: 100%;
	height: 100%;
	padding: 4px;

	display: flex;
	justify-content: space-between;
	align-items: center;
}

.swiper-button-prev,
.swiper-button-next {
	position: relative !important;
	top: initial !important;
	left: initial !important;
	height: 100% !important;
	width: auto !important;
	margin-top: 0px !important;

	color: #FFFFFF !important;
	background-color: var(--theme-swiper-btn-bg);
	backdrop-filter: blur(0px) !important;
	transition: background-color 200ms, backdrop-filter 200ms, color 200ms;

	border-radius: 6px;
	padding: 0px 8px !important;
}

.swiper-button-prev {
	right: auto !important;
	left: 0px !important;
}

.swiper-button-next {
	left: auto !important;
	right: 0px !important;
}

.swiper-button-disabled {
	opacity: 1.0 !important;
	cursor: pointer !important;
	pointer-events: initial !important;
	color: var(--theme-swiper-btn-bg-stop) !important;
}

/*******************************************************************************
**** pager tweaks *************************************************************/

.swiper-pagination-bullet {
	background: var(--theme-swiper-pager-bg-nope) !important;
	opacity: initial !important;
	height: 14px !important;
	width: 14px !important;
}

.swiper-pagination-bullet-active {
	background: var(--theme-swiper-pager-bg-this) !important;
	opacity: initial !important;
}

.swiper-pager-bullet-square {
	border-radius: 2px !important;
}

.swiper-supercontainer .swiper-pager {
	position: relative !important;
	padding-top: 0.75rem;
}

.swiper-supercontainer .swiper-pagination {
	position: relative !important;
}

/*******************************************************************************
**** hover effects ************************************************************/

.swiper-supercontainer:hover .swiper-button-prev,
.swiper-supercontainer:hover .swiper-button-next {
	background-color: var(--theme-swiper-btn-bg-next) !important;
	backdrop-filter: blur(4px) !important;
}

.swiper-supercontainer:hover .swiper-button-prev.swiper-button-disabled,
.swiper-supercontainer:hover .swiper-button-next.swiper-button-disabled {
	background-color: var(--theme-swiper-btn-bg-stop) !important;
	backdrop-filter: blur(2px) !important;
}

/*//////////////////////////////////////////////////////////////////////////////
//// src/elements/timeline.css ///////////////////////////////////////////////*/

:root {
	--atl-timeline-item-bg: #dadada;
}

.atl-timeline .jumbotron {
	background-color: var(--atl-timeline-item-bg);
}

.atl-timeline-vertical-bar {
	background-color: var(--theme-grey-lt);
	height: 100%;
	width: 4px;
}

.atl-timeline-vertical-node {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);

	background-color: var(--theme-primary);
	border-radius: 300px;
	height: 16px;
	width: 16px;
}

.atl-timeline-vertical-node::after {
	content: ' ';

	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);

	background-color: var(--theme-white);
	border-radius: 300px;
	height: 8px;
	width: 8px;
}

.atl-timeline-item-arrow {
	position: absolute;
	top: 50%;
	right: 0px;
	width: 24px;
	height: 24px;

	transform: translateX(100%) translateY(-50%);
	background-color: var(--atl-timeline-item-bg);

	clip-path: polygon(0 0, 0% 100%, 50% 50%);
}

.atl-timeline-item-arrow.atl-timeline-even {
	left:0px;
	transform: translateX(-100%) translateY(-50%);
	clip-path: polygon(100% 0%, 100% 100%, 50% 50%);
}

/*//////////////////////////////////////////////////////////////////////////////
//// src/elements/togglebtn.css //////////////////////////////////////////////*/

.atl-togglebtn {
	padding: 0.15rem 0.50rem;
	text-align: left !important;
}

.atl-togglebtn i {
	display: none;
	margin-right: 0.25rem !important;
	font-size: 1.3rem;

}

.atl-togglebtn .atl-togglebtn-icon-loading {
	display: inline;
}

.atl-togglebtn.atl-togglebtn-on .atl-togglebtn-icon-on {
	display: inline;
}

.atl-togglebtn.atl-togglebtn-off .atl-togglebtn-icon-off {
	display: inline;
}

.atl-togglebtn.atl-togglebtn-on .atl-togglebtn-icon-loading,
.atl-togglebtn.atl-togglebtn-off .atl-togglebtn-icon-loading {
	display: none;
}