/* ---------------------------------------- */
/*  Font Declarations                       */
/* ---------------------------------------- */
/* @font-face {
  font-family: 'Modesto Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/modesto-condensed/modesto-condensed.woff2') format('woff2');
}
@font-face {
  font-family: 'Modesto Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/modesto-condensed/modesto-condensed-bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 400;
  src: url("/static/fonts/amiri/amiri-regular.woff2") format('woff2');
}
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 700;
  src: url("/static/fonts/amiri/amiri-bold.woff2") format('woff2');
}
@font-face {
  font-family: 'Signika';
  src: url('../fonts/signika/signika-regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: 'Signika';
  src: url('../fonts/signika/signika-bold.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
} */
/* ---------------------------------------- */
/*  Colors                                  */
/* ---------------------------------------- */
:root {
  --color-warm-1: #ee9b3a;
  --color-warm-2: #c9593f;
  --color-warm-3: #5d142b;
  --color-cool-3: #584a75;
  --color-cool-4: #302831;
  --color-cool-5: #0b0a13;
  --color-cool-5-25: rgba(11, 10, 19, 0.25);
  --color-cool-5-50: rgba(11, 10, 19, 0.5);
  --color-cool-5-75: rgba(11, 10, 19, 0.75);
  --color-cool-5-90: rgba(11, 10, 19, 0.9);
  --color-light-1: #f7f3e8;
  --color-light-2: #efe6d8;
  --color-light-3: #e7d1b1;
  --color-light-4: #d0b8a3;
  --color-light-5: #9f8475;
  --color-light-6: #816b66;
}
/* ---------------------------------------- */
/*  Layout                                  */
/* ---------------------------------------- */
:root {
  --body-max-width: 1200px;
  --header-height: 50px;
  --padding-vertical: 1rem;
  --padding-horizontal: 1.5rem;
  --padding-content: var(--padding-vertical) var(--padding-horizontal);
  --input-height: 32px;
}
/* ---------------------------------------- */
/*  Typography                              */
/* ---------------------------------------- */
:root {
  --font-h1: "Modesto Condensed", serif;
  --font-h2: "Amiri", serif;
  --font-body: "Signika", "Palatino Linotype", sans-serif;
  --font-awesome: "Font Awesome 6 Pro";
  --font-mono: monospace;
  --font-size-10: 0.0625rem;
  --font-size-11: 0.6875rem;
  --font-size-12: 0.75rem;
  --font-size-13: 0.8125rem;
  --font-size-14: 0.875rem;
  --font-size-15: 0.9375rem;
  --font-size-16: 1rem;
  --font-size-18: 1.125rem;
  --font-size-20: 1.25rem;
  --font-size-24: 1.5rem;
  --font-size-28: 1.75rem;
  --font-size-32: 2rem;
  --font-size-36: 2.25rem;
  --font-size-48: 3rem;
  --font-size-64: 4rem;
  --font-size-80: 5rem;
}
/* ---------------------------------------- */
/*  Headers                                 */
/* ---------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 2rem 0 1rem;
  line-height: 1;
  text-shadow: 1px 1px 4px #000;
}
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
  margin-top: 1rem;
}
h1,
h2,
h3 {
  color: var(--color-light-1);
}
h4,
h5,
h6 {
  color: var(--color-light-2);
}
h1 {
  font-family: var(--font-h1);
  font-size: var(--font-size-48);
  text-shadow: 2px 2px 8px #000;
  clear: both;
}
h2 {
  font-family: var(--font-h2);
  font-size: var(--font-size-32);
  clear: both;
}
h3 {
  font-family: var(--font-body);
  font-size: var(--font-size-24);
}
h4 {
  font-family: var(--font-h2);
  font-size: var(--font-size-24);
}
h5 {
  font-family: var(--font-body);
  font-size: var(--font-size-20);
}
h6 {
  font-family: var(--font-h1);
  font-size: var(--font-size-24);
}
h2.border,
h3.border,
h4.border {
  z-index: 1;
  clear: both;
  padding: 1rem 0 0.6rem;
  position: relative;
  text-indent: 0.5rem;
}
h2.border::before,
h3.border::before,
h4.border::before {
  z-index: -1;
  position: absolute;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  border-top: 2px solid var(--color-warm-2);
  border-bottom: 2px solid var(--color-warm-2);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 30%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 30%, transparent 100%);
}
h3.border::before,
h4.border::before {
  border-top: 2px solid var(--color-warm-3);
  border-bottom: 2px solid var(--color-warm-3);
}
/* ---------------------------------------- */
/*  Text                                    */
/* ---------------------------------------- */
p {
  margin: 0.5rem 0;
}
p.inactive {
  color: var(--color-light-5);
}
span.highlight {
  color: var(--color-warm-1);
}
::selection {
  background: var(--color-cool-4);
  color: var(--color-light-1);
}
span.tag {
  display: inline-block;
  flex: none;
  margin: 0;
  padding: 0 0.5rem;
  color: var(--color-light-1);
  background: var(--color-cool-4);
  border: 1px solid var(--color-cool-3);
  border-radius: 4px;
  box-shadow: 0 0 4px #000;
  text-align: center;
  line-height: 28px;
  user-select: none;
}
span.tag > i {
  margin-right: 0.25rem;
}
/* ---------------------------------------- */
/*  Quotes                                  */
/* ---------------------------------------- */
blockquote {
  background: var(--color-cool-4);
  margin: 1rem 0;
  padding: 0.5rem;
  color: var(--color-light-1);
  border: 1px solid var(--color-cool-3);
  border-radius: 3px;
  font-style: italic;
}
blockquote.question {
  font-style: normal;
}
/* ---------------------------------------- */
/*  Lists                                   */
/* ---------------------------------------- */
ul,
ol {
  margin: 1rem 0;
  padding: 0 0 0 1.25rem;
}
ul li,
ol li {
  margin-bottom: 0.25rem;
}
ul li:last-child,
ol li:last-child {
  margin-bottom: 0;
}
ul ul,
ol ul,
ul ol,
ol ol {
  margin: 0.25rem 0 0;
}
dl dt {
  display: inline-block;
  color: var(--color-light-2);
  text-shadow: 1px 1px #000;
  margin: 0 0 0.25rem;
}
dl dd {
  margin: 0 0 1rem 1rem;
}
/* ---------------------------------------- */
/*  Links                                   */
/* ---------------------------------------- */
a[href] {
  color: var(--color-warm-1);
}
a[href]:hover {
  text-shadow: 0 0 8px var(--color-warm-2);
}
/* ---------------------------------------- */
/*  Tables                                  */
/* ---------------------------------------- */
table {
  margin: 1rem;
  background: var(--color-cool-5-50);
  border-spacing: 0;
  border-radius: 8px;
  overflow: hidden;
}
table th,
table td {
  padding: 0.5rem 1rem;
}
table thead {
  background: var(--color-cool-5);
  font-size: 1.1em;
  color: var(--color-light-1);
  font-weight: bold;
  text-align: left;
}
table thead th {
  line-height: 1.5;
  border-bottom: 1px solid var(--color-cool-4);
}
table tfoot {
  background: var(--color-cool-5);
  font-size: 1.1em;
  font-weight: bold;
  color: var(--color-light-1);
}
table tfoot td {
  line-height: 1.5;
  border-top: 1px solid var(--color-cool-4);
}
/* ---------------------------------------- */
/*  Dividers                                */
/* ---------------------------------------- */
hr {
  clear: both;
  border: 0;
  height: 2px;
  margin: 1rem 0;
  color: var(--color-light-3);
  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), #e7d1b1, rgba(0, 0, 0, 0));
  background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), #e7d1b1, rgba(0, 0, 0, 0));
  background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0), #e7d1b1, rgba(0, 0, 0, 0));
  background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0), #e7d1b1, rgba(0, 0, 0, 0));
}
/* ---------------------------------------- */
/*  Code Blocks                             */
/* ---------------------------------------- */
/* Inline Code Blocks */
p code,
li code,
span code {
  display: inline-block;
  padding: 1px 0.25rem;
  margin: -1px 0;
  color: var(--color-light-2);
  font-size: 0.875rem;
  word-break: keep-all;
  white-space: nowrap;
  background: var(--color-cool-4);
  border: 1px solid var(--color-cool-3);
  border-radius: 3px;
}
p code::selection,
li code::selection,
span code::selection {
  background: var(--color-cool-3);
}
code.hljs {
  padding: 1rem;
  background: var(--color-cool-5);
  border: 1px solid var(--color-cool-3);
  border-radius: 3px;
  box-shadow: 0 0 4px var(--color-cool-3);
}
span.reference {
  display: inline-block;
  padding: 1px 0.25rem;
  margin: -1px 0;
  color: #c5dbe3;
  border: 1px solid #def7ff;
  border-radius: 3px;
}
.code-migration .before,
.code-migration .after {
  flex: 0 0 48%;
  overflow-x: auto;
}
.code-migration .before {
  margin-right: 1%;
}
.code-migration .after {
  margin-left: 1%;
}
pre.key-code code {
  padding: 0.25rem 0.5rem;
}
/* Images */
img,
iframe,
video {
  max-width: 100%;
}
/* Figures */
figure {
  width: 100%;
  margin: 1rem 0;
}
figure img,
figure iframe,
figure video {
  display: block;
  margin: 0 auto;
  clear: both;
  border: 1px solid var(--color-cool-4);
  box-shadow: 0 0 4px #000;
}
figure figcaption {
  margin: 1rem 0 0;
  color: var(--color-light-1);
  font-style: italic;
  text-align: center;
}
figure.video {
  position: relative;
}
figure.video::before {
  content: '';
  display: block;
  padding-bottom: calc(100% * 9/16 + 1.75rem);
}
figure.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 1.75rem);
}
figure.video figcaption {
  margin: 0;
}
/* Alignment */
figure.left,
img.left,
iframe.left,
video.left {
  clear: left;
  float: left;
  max-width: 30%;
  margin: 0 1rem 1rem 0;
}
figure.right,
img.right,
iframe.right,
video.right {
  clear: right;
  float: right;
  max-width: 30%;
  margin: 0 0 1rem 1rem;
}
figure.noborder,
img.noborder,
iframe.noborder,
video.noborder {
  border: none;
  box-shadow: none;
}
/* Image Showcase */
figure.image-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
}
/* ----------------------------------------- */
/*  Custom MultiSelect Web Component         */
/* ----------------------------------------- */
multi-select {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
multi-select .tags {
  display: flex;
  flex-direction: row;
  gap: 3px;
}
multi-select .tags span.tag {
  flex: none;
}
multi-select select {
  width: 100%;
}
multi-select.tags-col .tags {
  flex-direction: column;
}
multi-checkbox {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
multi-checkbox label {
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
}
/* ---------------------------------------- */
/*  Input Fields                            */
/* ---------------------------------------- */
input,
select {
  width: 100%;
  height: var(--input-height);
  line-height: var(--input-height);
  padding: 0 0.5rem;
  background: var(--color-light-3);
  border: none;
  border-radius: 4px;
  outline: none;
  color: var(--color-cool-4);
}
input:focus,
select:focus {
  color: var(--color-cool-5);
  outline: 1px solid var(--color-warm-1);
}
input:-webkit-autofill,
select:-webkit-autofill,
input:-webkit-autofill:hover,
select:-webkit-autofill:hover,
input:-webkit-autofill:focus,
select:-webkit-autofill:focus,
input:-webkit-autofill,
select:-webkit-autofill,
input:-webkit-autofill:hover,
select:-webkit-autofill:hover,
input:-webkit-autofill:focus,
select:-webkit-autofill:focus {
  border: none;
  -webkit-text-fill-color: var(--color-cool-4);
  background: var(--color-light-3);
  transition: background-color 5000s ease-in-out 0s;
}
input::placeholder,
select::placeholder {
  color: var(--color-light-6);
}
input:disabled,
select:disabled {
  background: var(--color-light-6);
}
input[readonly],
select[readonly] {
  background: var(--color-light-6);
  cursor: not-allowed;
}
/** Dark Style Inputs */
input.dark,
select.dark {
  background: var(--color-cool-5);
  color: var(--color-light-3);
}
input.dark:focus,
select.dark:focus {
  color: var(--color-light-1);
}
input.dark:-webkit-autofill,
select.dark:-webkit-autofill,
input.dark:-webkit-autofill:hover,
select.dark:-webkit-autofill:hover,
input.dark:-webkit-autofill:focus,
select.dark:-webkit-autofill:focus,
input.dark:-webkit-autofill,
select.dark:-webkit-autofill,
input.dark:-webkit-autofill:hover,
select.dark:-webkit-autofill:hover,
input.dark:-webkit-autofill:focus,
select.dark:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-light-3);
  background: var(--color-cool-5);
}
input.dark::placeholder,
select.dark::placeholder {
  color: var(--color-light-5);
}
input.dark[disabled],
select.dark[disabled],
input.dark[readonly],
select.dark[readonly] {
  background: var(--color-cool-4);
  color: var(--color-light-4);
  pointer-events: none;
}
/** Checkboxes */
input[type="checkbox"] {
  display: inline-grid;
  place-content: center;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: var(--color-cool-5);
}
input[type="checkbox"]:focus {
  color: inherit;
  outline: none;
}
input[type="checkbox"]::before {
  font-family: var(--font-awesome);
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--color-light-5);
  content: "\f0c8";
}
input[type="checkbox"]:checked::before {
  color: var(--color-warm-1);
  font-weight: bold;
  content: "\f14a";
}
/** Placeholder Text */
::placeholder {
  color: var(--color-light-6);
}
/** Icon Decorated Inputs */
label.username,
label.password,
label.search,
label.copy {
  position: relative;
}
label.username::after,
label.password::after,
label.search::after,
label.copy::after {
  position: absolute;
  right: 8px;
  top: 7px;
  display: inline-block;
  font-size: 12px;
  font-family: var(--font-awesome);
  font-weight: 900;
  color: var(--color-light-5);
}
label.username::after {
  content: "\F007";
}
label.password::after {
  content: "\F084";
}
label.search::after {
  content: "\F002";
}
label.copy {
  cursor: pointer;
}
label.copy input {
  cursor: pointer;
}
label.copy::after {
  top: 0;
  content: "\F0C5";
}
label.key {
  position: relative;
}
label.key input {
  padding-left: 2rem;
}
label.key::before {
  position: absolute;
  left: 8px;
  top: 2px;
  display: inline-block;
  font-size: 12px;
  font-family: var(--font-awesome);
  font-weight: 900;
  content: "\F084";
  color: var(--color-light-6);
}
/* ---------------------------------------- */
/*  Buttons                                 */
/* ---------------------------------------- */
a.button,
button {
  --button-background-color: var(--color-cool-5-50);
  --button-border-color: var(--color-light-5);
  --button-text-color: var(--color-light-3);
  --button-hover-background-color: var(--color-warm-2);
  --button-hover-border-color: var(--color-light-3);
  --button-hover-text-color: var(--color-light-1);
  padding: 0 0.5rem;
  background: var(--button-background-color);
  border: 1px solid var(--button-border-color);
  border-radius: 4px;
  color: var(--button-text-color);
  font-family: var(--font-body);
  font-size: var(--font-size-15);
  text-decoration: none;
  cursor: pointer;
}
a.button > i,
button > i {
  pointer-events: none;
  margin-right: 0.25rem;
}
a.button > label,
button > label {
  pointer-events: none;
}
a.button[disabled],
button[disabled] {
  --button-background-color: var(--color-cool-4);
  --button-hover-background-color: var(--color-cool-4);
  --button-text-color: var(--color-light-5);
  --button-hover-text-color: var(--color-light-5);
  --button-hover-border-color: transparent;
  pointer-events: none;
}
a.button:hover,
button:hover {
  background: var(--button-hover-background-color);
  color: var(--button-hover-text-color);
  border-color: var(--button-hover-border-color);
}
a.button:hover[disabled],
button:hover[disabled] {
  text-shadow: none;
}
a.button[type="submit"],
button[type="submit"] {
  width: 100%;
  height: calc(1.25 * var(--input-height));
  margin-top: 1rem;
}
a.button.icon > i,
button.icon > i {
  margin: 0;
}
/** Bright Buttons */
a.button.bright,
button.bright {
  --button-background-color: var(--color-warm-1);
  --button-border-color: var(--color-cool-5);
  --button-text-color: var(--color-cool-5);
  --button-hover-background-color: #fda948;
  --button-hover-border-color: var(--color-warm-3);
  --button-hover-text-color: #000000;
  text-transform: uppercase;
}
a.button.bright[disabled],
button.bright[disabled] {
  --button-background-color: var(--color-cool-4);
  --button-hover-background-color: var(--color-cool-4);
  --button-text-color: var(--color-light-5);
  --button-hover-text-color: var(--color-light-5);
  --button-hover-border-color: transparent;
}
/** Link Buttons */
a.button {
  display: flex;
  align-items: center;
  justify-content: center;
}
/** Form Footer */
form footer.buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 1rem 0 0;
  gap: 1rem;
}
form footer.buttons button,
form footer.buttons a.button {
  flex: 1 0 200px;
  height: calc(1.25 * var(--input-height));
}
form footer.buttons a.button {
  font-weight: 400;
}
form footer.buttons button[type="submit"] {
  margin: 0;
}
/* ---------------------------------------- */
/*  Form Groups                             */
/* ---------------------------------------- */
fieldset {
  margin: 0;
  padding: 0;
  border: none;
}
fieldset legend {
  font-size: var(--font-size-20);
  margin: 0;
  padding: 0;
}
fieldset + fieldset {
  margin-top: 1rem;
}
.form-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.form-group label {
  flex: 3;
  margin-right: 0.5rem;
  font-weight: bold;
  line-height: var(--input-height);
}
.form-group > * {
  flex: 2;
}
.form-group .form-fields {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.form-group .form-fields * {
  flex: auto;
}
.form-group .form-fields button {
  line-height: 2em;
}
.form-group.stacked {
  flex-wrap: wrap;
}
.form-group.stacked label,
.form-group.stacked > * {
  flex: 0 0 100%;
}
.form-group .hint {
  flex: 0 0 100%;
  margin: 0.5rem 0 0;
  font-size: var(--font-size-14);
  color: var(--color-light-5);
}
.form-group.hidden * {
  display: none;
}
.form-group.hidden ul.errorlist,
.form-group.hidden ul.errorlist li {
  display: block;
}
.form-group + .form-group {
  margin-top: 1rem;
}
.form-group .form-fill > * {
  flex: 0 0 100%;
}
/* Checkbox Labels */
label.checkbox {
  position: relative;
  display: flex;
  align-items: center;
  flex: auto;
  padding-left: 48px;
  line-height: var(--font-size-20);
}
label.checkbox > input[type="checkbox"] {
  cursor: pointer;
  width: 16px;
  height: 16px;
  position: absolute;
  left: 4px;
}
/* ----------------------------------------- */
/*  Google ReCaptcha
/* ----------------------------------------- */
#recaptcha-badge {
  margin: 1rem 0;
  display: flex;
  justify-content: flex-end;
  align-content: center;
}
#recaptcha-badge .recaptcha-badge {
  box-shadow: none;
}
/* ----------------------------------------- */
/*  TinyMCE Editor
/* ----------------------------------------- */
.tox.tox-tinymce {
  border: none;
}
.tox .tox-toolbar,
.tox .tox-toolbar__overflow,
.tox .tox-toolbar__primary {
  box-shadow: 0 0 5px #000;
  background: var(--color-light-2) !important;
}
.tox .tox-edit-area {
  border: 1px dashed var(--color-light-3);
  border-top: none;
  border-radius: 0 0 4px 4px;
}
.tox .tox-edit-area__iframe {
  background: transparent !important;
}
.tox.tox-tinymce-aux {
  flex: 0;
}
/* ----------------------------------------- */
/*  Flexbox
/* ----------------------------------------- */
.flexrow {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.flexcol {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
.flexrow > *,
.flexcol > * {
  flex: 1;
}
.flexrow > .flexnone,
.flexcol > .flexnone {
  flex: none;
}
.flexrow > .flex0,
.flexcol > .flex0 {
  display: block;
  flex: 0;
}
.flexrow > .flex1,
.flexcol > .flex1 {
  flex: 1;
}
.flexrow > .flex2,
.flexcol > .flex2 {
  flex: 2;
}
.flexrow > .flex3,
.flexcol > .flex3 {
  flex: 3;
}
/* ----------------------------------------- */
/*  Content Blocks                           */
/* ----------------------------------------- */
.primary-content,
.secondary-content {
  flex: none;
  width: 100%;
  margin: 1rem auto;
  padding: var(--padding-content);
  background: var(--color-cool-5-90);
  border-radius: 8px;
  box-shadow: 0 0 6px #000;
}
.narrow-content .primary-content {
  max-width: 66%;
  width: max-content;
  min-width: 50%;
}
.narrow-content .secondary-content {
  max-width: 50%;
  width: max-content;
}
/* ----------------------------------------- */
/*  Columns                                  */
/* ----------------------------------------- */
.columns {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.columns > .column {
  flex: 1;
}
.columns > .right,
.columns > .left {
  flex: none;
}
/* ----------------------------------------- */
/*  Image Carousel                           */
/* ----------------------------------------- */
.carousel {
  --carousel-width: 1200px;
  --carousel-margin: 40px;
  --carousel-header: calc(var(--carousel-margin) * 2);
  --figure-width: 1040px;
  --figure-height: 480px;
  --caption-width: min(600px, 100%);
  width: 100%;
  max-width: var(--carousel-width);
  position: relative;
  flex: none;
  margin: var(--carousel-margin) auto;
  pointer-events: none;
}
.carousel .carousel-header {
  width: 400px;
  max-width: 100%;
  margin: 0 auto var(--carousel-margin);
  line-height: var(--carousel-margin);
  color: var(--color-light-3);
  text-align: center;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-light-6);
}
.carousel .control {
  width: 40px;
  height: 40px;
  position: absolute;
  text-align: center;
  font-size: var(--font-size-32);
  pointer-events: all;
  cursor: pointer;
  z-index: 2;
}
.carousel .control.focus {
  width: 400px;
  position: absolute;
  left: calc(50% - 200px);
  top: var(--carousel-margin);
}
.carousel .control.focus > i {
  transform: scaleX(2);
}
.carousel .control.previous {
  height: var(--figure-height);
  line-height: var(--figure-height);
  position: absolute;
  top: calc(2 * var(--carousel-margin));
  left: var(--carousel-margin);
}
.carousel .control.previous > i {
  transform: scaleY(2);
}
.carousel .control.next {
  height: var(--figure-height);
  line-height: var(--figure-height);
  position: absolute;
  top: calc(2 * var(--carousel-margin));
  right: var(--carousel-margin);
}
.carousel .control.next > i {
  transform: scaleY(2);
}
.carousel .control:hover {
  color: var(--color-light-1);
  text-shadow: 0 0 10px var(--color-warm-2);
}
.carousel .carousel-figures {
  position: relative;
  width: var(--carousel-width);
  max-width: 100%;
  height: var(--figure-height);
  overflow: hidden;
  pointer-events: none;
}
.carousel figure {
  display: none;
  width: var(--figure-width);
  height: var(--figure-height);
  position: absolute;
  top: 0;
  margin: 0;
  overflow: hidden;
  z-index: -1;
  transition: left 1s ease-in-out;
}
.carousel figure a {
  display: block;
  width: 100%;
  height: 100%;
}
.carousel figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  -webkit-mask-image: linear-gradient(to top, transparent 0, black 40%);
  mask-image: linear-gradient(to top, transparent 0, black 40%);
}
.carousel figure figcaption {
  position: absolute;
  bottom: 0;
  left: calc((var(--figure-width) - var(--caption-width)) / 2);
  width: var(--caption-width);
  font-size: var(--font-size-14);
  text-align: justify;
  font-style: normal;
  pointer-events: none;
}
.carousel figure figcaption h3 {
  color: var(--color-light-1);
  text-align: center;
  filter: drop-shadow(0 0 8px black);
}
.carousel figure figcaption p {
  background: var(--color-cool-5-90);
  padding: var(--padding-content);
  border-radius: 8px;
  text-align: justify;
}
.carousel figure.active {
  display: block;
  z-index: 1;
  left: calc(2 * var(--carousel-margin));
  pointer-events: all;
}
.carousel figure.active img:hover {
  filter: saturate(1.4);
}
.carousel figure.previous {
  display: block;
  z-index: 0;
  left: calc(var(--carousel-margin) - var(--figure-width));
}
.carousel figure.next {
  display: block;
  z-index: 0;
  left: calc(var(--carousel-width) - var(--carousel-margin));
}
/* ---------------------------------------- */
/*  Dropdown Menus                          */
/* ---------------------------------------- */
input.dropdown-trigger {
  display: none;
}
label.dropdown-toggle {
  z-index: 2;
  cursor: pointer;
}
.dropdown {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: max-height 0.25s ease-out, opacity 0.25s ease-out, visibility 0.25s;
  z-index: 1;
}
input.dropdown-trigger:checked + .dropdown {
  max-height: 100vh;
  visibility: visible;
  opacity: 1;
  transition: max-height 0.25s ease-out, opacity 0.25s ease-out, visibility 0.25s;
}
/* ---------------------------------------- */
/*  Collapsibles                            */
/* ---------------------------------------- */
.collapsible {
  width: 100%;
  margin: 0.5rem 0;
}
.collapsible .collapsible-header {
  cursor: pointer;
  padding: 0 1rem;
  background-color: var(--color-cool-4);
  border: 1px solid #000;
  border-radius: 4px 4px 0 0;
  color: var(--color-light-2);
  font-size: 1.125rem;
  line-height: 2.5rem;
  font-weight: bold;
}
.collapsible .collapsible-header:after {
  content: '\02795';
  /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: var(--color-light-1);
  float: right;
  margin-left: 0.5rem;
}
.collapsible .collapsible-content {
  max-height: 0;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
  opacity: 0;
  border: 1px solid #000;
  border-top: none;
  border-radius: 0 0 4px 4px;
  transition: max-height 0.2s ease-out, opacity 0.2s ease-out;
}
.collapsible.active .collapsible-header:after {
  content: "\2796";
  /* Unicode character for "minus" sign (-) */
}
.collapsible.active .collapsible-content {
  opacity: 1;
}
/* ---------------------------------------- */
/*  Notifications                           */
/* ---------------------------------------- */
.notification,
.note {
  flex: none;
  padding: 0.5rem 1rem;
  margin-bottom: 0.5rem;
  background: var(--color-cool-5);
  border: 1px solid var(--color-cool-4);
  border-radius: 5px;
  box-shadow: 0 0 4px #000;
  color: var(--color-light-1);
  text-align: left;
  text-shadow: 1px 1px 3px #000;
}
.notification::before,
.note::before {
  font-family: var(--font-awesome);
  font-weight: 900;
  margin-right: 1rem;
}
.notification.info,
.note.info,
.notification.success,
.note.success {
  background: rgba(47, 80, 132, 0.8);
  border: 1px solid #5c87b9;
}
.notification.info::before,
.note.info::before,
.notification.success::before,
.note.success::before {
  content: "\f05a";
}
.notification.warning,
.note.warning {
  background: rgba(214, 150, 0, 0.8);
  border: 1px solid #d69e07;
}
.notification.warning::before,
.note.warning::before {
  content: "\f071";
}
.notification.error,
.note.error {
  background: rgba(101, 9, 29, 0.8);
  border: 1px solid #750003;
}
.notification.error::before,
.note.error::before {
  content: "\f06a";
}
.notification.success,
.note.success {
  background: #277200;
  border: 1px solid #2fd701;
}
.notification.success::before,
.note.success::before {
  content: "\f05a";
}
.notification.recommended,
.note.recommended {
  width: 100%;
  flex: none;
  background: rgba(138, 211, 4, 0.4);
}
.notification.recommended::before,
.note.recommended::before {
  content: "\f058";
}
.notification.stable,
.note.stable {
  width: 100%;
  flex: none;
  background: rgba(138, 211, 4, 0.4);
}
.notification.stable::before,
.note.stable::before {
  content: "\f6d9";
}
.notification.testing,
.note.testing {
  width: 100%;
  flex: none;
  background: rgba(211, 192, 4, 0.4);
}
.notification.testing::before,
.note.testing::before {
  content: "\f0ad";
}
.notification.development,
.note.development {
  width: 100%;
  flex: none;
  background: rgba(211, 119, 4, 0.4);
}
.notification.development::before,
.note.development::before {
  content: "\f6e3";
}
.notification.prototype,
.note.prototype {
  width: 100%;
  flex: none;
  background: rgba(211, 20, 4, 0.4);
}
.notification.prototype::before,
.note.prototype::before {
  content: "\f1e2";
}
.notification.hidden,
.note.hidden {
  display: none;
}
form .errorlist {
  flex: 0 0 100%;
  list-style: none;
  padding: 0;
  margin: 0;
}
form .errorlist:has(li) {
  margin: 1rem 0;
}
form .errorlist > li {
  padding: 0.5rem 1rem;
  margin-bottom: 0.5rem;
  background: rgba(101, 9, 29, 0.8);
  border: 1px solid #750003;
  border-radius: 5px;
  box-shadow: 0 0 4px #000;
  color: var(--color-light-1);
  text-align: left;
  text-shadow: 1px 1px 3px #000;
}
form .errorlist > li::before {
  font-family: var(--font-awesome);
  margin-right: 0.5rem;
  content: "\f06a";
}
a.patreon {
  background: #141518;
  color: var(--color-light-1);
  padding: 1px 6px;
  margin: -1px 2px;
  text-decoration: none;
  border: 1px solid #FF424D;
  border-radius: 4px;
}
a.patreon i.fa-patreon {
  color: #FF424D;
}
/* ---------------------------------------- */
/* Oauth Buttons                            */
/* ---------------------------------------- */
.oauth.button {
  --button-height: 48px;
  flex: 0 0 100%;
  height: var(--button-height);
  padding: 0;
  margin: 0;
  background: var(--color-light-1);
  border: 2px solid #000;
  border-radius: 3px;
}
.oauth.button img {
  height: var(--button-height);
  width: var(--button-height);
  margin: 0;
  float: left;
  border: none;
  box-shadow: none;
}
.oauth.button label {
  display: block;
  text-align: left;
  padding-left: calc(var(--button-height) + 0.5rem);
  font-size: var(--font-size-20);
  line-height: var(--button-height);
  color: var(--color-cool-5);
}
/* ---------------------------------------- */
/*  Loading Bar                             */
/* ---------------------------------------- */
#loading {
  display: none;
  width: 100%;
  height: 16px;
  margin: 1rem 0;
  background: rgba(0, 0, 0, 0.6);
  border: 2px solid var(--color-border-dark);
  box-shadow: 0 0 4px #b2c3ff;
  border-radius: 4px;
}
#loading label {
  line-height: 16px;
  position: absolute;
  top: -4px;
  padding: 0 5px;
  font-size: var(--font-size-18);
  color: var(--color-light-1);
  background: rgba(0, 0, 0, 0.6);
  text-shadow: 1px 1px 6px var(--color-light-1);
}
#loading #loading-bar {
  position: relative;
  margin: 3px;
  height: 10px;
  background: #5d49ff;
  border: 1px solid #b2c3ff;
  border-radius: 2px;
  top: 3px;
}
#loading #context {
  left: 5px;
}
#loading #progress {
  top: -4px;
  right: 0;
  padding: 0 8px;
}
.tooltip {
  display: inline-block;
}
.tooltip i {
  margin-left: 0.25rem;
  font-size: 12px;
}
.tooltip p {
  display: none;
  margin: 0 0.25px;
  width: fit-content;
  max-width: 280px;
  padding: 0.5rem;
  position: absolute;
  z-index: 5;
  background: var(--color-cool-5-90);
  text-align: center;
  border: 1px solid var(--color-warm-2);
  white-space: normal;
}
.tooltip:hover p {
  display: flex;
}
.tooltip:hover i {
  text-shadow: 0 0 8px var(--color-warm-2);
}
* {
  box-sizing: border-box;
}
body {
  position: relative;
  width: 100%;
  min-height: 100vh;
  margin: 0;
  background: var(--color-cool-5);
  font-family: var(--font-body);
  font-size: var(--font-size-15);
  line-height: 1.25;
  color: var(--color-light-3);
}
/* ---------------------------------------- */
/*  Page Background Images                  */
/* ---------------------------------------- */
.background-image {
  --background-width: 3840px;
  --background-height: 1440px;
  --background-url: url("./home-background.webp");
  position: absolute;
  width: 100%;
  height: 100vh;
  max-height: 1200px;
  background: var(--background-url) no-repeat;
  background-size: cover;
}
#background-top {
  top: 0;
  background-position: top;
  -webkit-mask-image: linear-gradient(to top, transparent 50%, black 90%);
  mask-image: linear-gradient(to top, transparent 50%, black 90%);
  z-index: -1;
}
#background-bottom {
  bottom: 0;
  background-position: bottom;
  -webkit-mask-image: linear-gradient(to bottom, transparent 66%, black 90%);
  mask-image: linear-gradient(to bottom, transparent 66%, black 90%);
  z-index: -2;
}
/* ---------------------------------------- */
/*  Page Header                             */
/* ---------------------------------------- */
#main-header {
  --menu-width: 280px;
  --login-width: 320px;
  position: fixed;
  width: 100%;
  height: var(--header-height);
  flex: 0 0 var(--header-height);
  background: var(--color-cool-5-50);
  z-index: 2;
}
#main-header label.dropdown-toggle {
  position: relative;
  flex: 0 0 var(--header-height);
  height: var(--header-height);
  margin: 0 0.5rem;
  line-height: calc(var(--header-height) - 5px);
  text-align: center;
  font-size: var(--font-size-24);
}
#main-header label.dropdown-toggle::after {
  display: inline-block;
  width: 100%;
  height: 30px;
  position: absolute;
  bottom: -10px;
  left: 0;
  font-family: var(--font-awesome);
  font-weight: 900;
  content: "\F0D7";
  font-size: var(--font-size-20);
  line-height: var(--font-size-20);
  color: var(--color-light-5);
  text-shadow: none;
}
#main-header .dropdown {
  background: var(--color-cool-5-50);
}
/** Navigation Menu */
#main-menu,
#tool-menu {
  position: absolute;
  width: var(--menu-width);
  left: 0;
}
#main-menu .search,
#tool-menu .search {
  margin-top: 8px;
}
#main-menu .dropdown,
#tool-menu .dropdown {
  flex: 0 0 100%;
  padding: var(--padding-vertical) 0;
}
#main-menu .dropdown a,
#tool-menu .dropdown a {
  display: block;
  position: relative;
  padding: 1rem 1.5rem;
  color: var(--color-light-3);
  line-height: var(--font-size-18);
  text-decoration: none;
}
#main-menu .dropdown a > i,
#tool-menu .dropdown a > i {
  position: relative;
  top: 2px;
  font-size: var(--font-size-18);
  margin-right: 1rem;
}
#main-menu .dropdown a:hover,
#tool-menu .dropdown a:hover {
  color: var(--color-light-1);
  background: var(--color-cool-4);
}
#main-menu .dropdown-trigger:checked + .dropdown,
#tool-menu .dropdown-trigger:checked + .dropdown {
  max-height: 36rem;
  border-radius: 0 0 6px 0;
}
/** Tool Menu */
#tool-menu {
  --position-left: 4rem;
  position: absolute;
  left: var(--position-left);
  width: var(--menu-width);
}
#tool-menu #tool-links {
  position: relative;
  left: calc(-1 * var(--position-left));
}
#tool-menu #tool-links #page-tool-links + #global-tool-links {
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-cool-4);
  margin-top: 0.5rem;
}
/** Login Form */
#login-form {
  position: absolute;
  right: 0;
  width: var(--login-width);
  line-height: var(--header-height);
  justify-content: flex-end;
  text-align: right;
}
#login-form > a.button,
#login-form button {
  flex: none;
  width: auto;
  height: calc(var(--header-height) - 20px);
  line-height: calc(var(--header-height) - 20px);
  padding: 0 0.5rem;
  margin: 10px 0.5rem;
}
#login-form #login-welcome {
  flex: none;
  position: relative;
}
#login-form #login-welcome::before {
  position: absolute;
  left: -20px;
  font-family: var(--font-awesome);
  font-weight: 900;
  content: "\f007";
  font-size: 16px;
  color: var(--color-light-3);
  opacity: 0.5;
}
#login {
  flex: 0 0 var(--login-width);
  text-align: left;
  line-height: 1.5;
  padding: 1rem 1.5rem;
  color: var(--color-light-1);
}
#login label {
  display: block;
  margin: 0.5rem 0;
}
#login button {
  width: 100%;
  margin: 0;
}
#login-toggle:checked + #login {
  max-height: 18rem;
  border-radius: 0 0 0 6px;
}
/* ---------------------------------------- */
/*  Page Body                               */
/* ---------------------------------------- */
#main-content {
  width: 100%;
  max-width: min(var(--body-max-width), calc(100vw - 20px));
  margin: var(--header-height) auto;
}
#site-title {
  flex: none;
  margin: 40px auto 0;
  font-size: var(--font-size-80);
  color: var(--color-light-1);
  text-align: center;
}
#site-subtitle {
  flex: none;
  margin: 5px auto 20px;
  font-size: var(--font-size-28);
  color: var(--color-light-3);
  text-align: center;
}
/* ---------------------------------------- */
/*  Footer                                  */
/* ---------------------------------------- */
#main-footer {
  flex: none;
  padding: 2rem;
  background: var(--color-cool-5-50);
  text-align: center;
}
#main-footer #footer-header {
  margin: 0 0 2rem;
  color: var(--color-light-4);
}
#main-footer #redesign {
  width: max-content;
  max-width: 100%;
  margin: 0 auto 2rem;
  padding: var(--padding-content);
  background: var(--color-cool-5);
  border-radius: 10px;
  color: var(--color-light-4);
}
#main-footer #copyright {
  color: var(--color-light-5);
}
#main-footer #footer-links {
  justify-content: center;
}
#main-footer #footer-links a {
  flex: none;
  padding: 0 1rem;
  border-right: 1px solid var(--color-light-6);
  color: var(--color-light-5);
}
#main-footer #footer-links a:last-child {
  border-right: none;
}
/* ---------------------------------------- */
/*  TO-DO                                   */
/* ---------------------------------------- */
#banner-messages {
  position: fixed;
  top: var(--header-height);
  width: 100%;
  max-width: inherit;
  z-index: 100;
}
.dialog-prompt {
  position: relative;
  max-width: 66%;
  width: max-content;
  min-width: 50%;
  margin: calc(-1 * var(--header-height)) auto 0;
  padding: 1rem;
  background: var(--color-cool-5);
  border-radius: 6px;
  z-index: 999;
  filter: drop-shadow(0 0 20px #000);
}
.dialog-prompt p {
  padding: 0 1.5rem 0 100px;
}
.dialog-prompt::before {
  position: absolute;
  top: 1.5rem;
  left: 1rem;
  font-family: var(--font-awesome);
  font-weight: 900;
  content: "\f4a5";
  font-size: 64px;
  color: var(--color-light-6);
  opacity: 0.5;
  bottom: 1rem;
}
/* ---------------------------------------- */
/*  Home Page                               */
/* ---------------------------------------- */
.home {
  --vertical-margin: 40px;
}
.home #site-title {
  margin: calc(4 * var(--vertical-margin)) auto 0;
}
.home #site-subtitle {
  margin: 10px auto calc(2 * var(--vertical-margin));
}
.home #background-top {
  -webkit-mask-image: linear-gradient(to top, transparent 33%, black 75%);
  mask-image: linear-gradient(to top, transparent 33%, black 75%);
}
.home #background-bottom {
  -webkit-mask-image: linear-gradient(to bottom, transparent 50%, black 75%);
  mask-image: linear-gradient(to bottom, transparent 50%, black 75%);
}
.home .carousel {
  margin: var(--vertical-margin) auto;
}
.home .product-feature {
  max-width: 920px;
  margin: var(--vertical-margin) auto;
  padding: 0 1rem;
  font-size: var(--font-size-16);
  color: var(--color-light-1);
  text-align: center;
}
.home .logo-navigation {
  --nav-height: 64px;
  --logo-size: 128px;
  --logo-hw: calc(var(--logo-size)/2);
  position: relative;
  width: 480px;
  max-width: calc(100vw - 40px);
  margin: var(--vertical-margin) auto;
}
.home .logo-navigation .logo {
  height: var(--logo-size);
  width: var(--logo-size);
  flex: none;
}
.home .logo-navigation a.logo-link {
  height: var(--nav-height);
  margin-top: calc((var(--logo-size) - var(--nav-height)) / 2);
  background: transparent;
  line-height: var(--nav-height);
  font-family: var(--font-h2);
  font-size: var(--font-size-24);
  text-transform: uppercase;
  font-weight: bold;
  color: var(--color-light-3);
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--color-light-5);
}
.home .logo-navigation a.logo-link:first-child {
  border-right: 1px solid transparent;
  border-radius: 10px 0 0 10px;
}
.home .logo-navigation a.logo-link:last-child {
  border-left: 1px solid transparent;
  border-radius: 0 10px 10px 0;
}
.home .logo-navigation a.logo-link:hover {
  color: var(--color-light-1);
  background: var(--color-warm-2);
  border-radius: 10px;
  border: 1px solid var(--color-light-2);
}
.home #social-links {
  justify-content: center;
  gap: 1rem;
  text-align: center;
}
.home #social-links > h5 {
  margin: 0;
  flex: 0 0 100%;
  font-size: var(--font-size-18);
}
.home #social-links .social-link {
  flex: 0 0 36px;
  color: var(--color-light-4);
  font-size: var(--font-size-28);
  text-shadow: 0 0 8px #000;
}
.home #social-links .social-link:hover {
  color: var(--color-light-3);
  text-shadow: 0 0 8px var(--color-warm-2);
}
/* ---------------------------------------- */
/*  User Registration Page                  */
/* ---------------------------------------- */
#user-registration-form .hint ul {
  margin: 0;
  padding: 0 0 0 1rem;
}
#user-registration-form #registration-terms {
  justify-content: center;
}
#user-registration-form #registration-terms label {
  flex: 1;
  margin: 1rem 0;
  line-height: 1.25rem;
}
#user-registration-form #registration-terms #recaptcha-badge {
  flex: none;
}
#user-registration-form #registration-terms #recaptcha-badge iframe {
  margin: 0;
}
/* ---------------------------------------- */
/*  Checkout Form                           */
/* ---------------------------------------- */
.checkout {
  /** Purchase Discount Field */
}
.checkout .primary-content {
  max-width: 960px;
}
.checkout .secondary-content {
  max-width: 880px;
}
.checkout #checkout-info {
  padding: var(--padding-vertical) 0;
}
.checkout #checkout-info p.purchase-info {
  margin: 0;
  padding: 0 1rem;
}
.checkout #checkout-info p.purchase-info + p.purchase-info {
  margin-top: var(--padding-vertical);
  padding-top: var(--padding-vertical);
  border-top: 1px solid var(--color-cool-4);
}
.checkout #checkout-info p.note {
  margin: 1rem;
}
.checkout #checkout-info p:last-child {
  margin-bottom: 0;
}
.checkout #checkout-price {
  max-width: 720px;
}
.checkout #checkout-price th + th,
.checkout #checkout-price td + td {
  text-align: right;
}
.checkout #checkout-price .promotion,
.checkout #checkout-price .discount {
  color: var(--color-warm-1);
}
.checkout input.discount-code {
  width: auto;
}
.checkout button.discount-apply {
  flex: 0;
  height: 100%;
  margin: 0;
}
#checkout-powered-stripe {
  width: 100%;
  display: block;
  margin: 0.5rem 0;
  text-align: center;
}
#checkout-powered-stripe i.fa-stripe {
  position: relative;
  top: 1px;
  transform: scale(2);
  padding: 0 1rem;
}
/* ---------------------------------------- */
/*  Purchase Page                           */
/* ---------------------------------------- */
#releases-directory .releases-list {
  margin: 0;
  padding: 0;
}
#releases-directory .release {
  align-items: center;
  margin: 0.5rem 0;
}
#releases-directory h3 {
  margin: 0.5rem 0;
  flex: none;
  font-size: var(--font-size-20);
}
#releases-directory h3 a {
  color: var(--color-light-3);
}
#releases-directory .release-time {
  flex-basis: 160px;
  margin: 0.5rem;
  color: var(--color-light-5);
}
#releases-directory .release-tags {
  flex: none;
  margin: 0.5rem 0;
}
#releases-directory .release-tag {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  margin-left: 0.5rem;
  color: var(--color-light-2);
  background: var(--color-cool-4);
  border: 1px solid var(--color-cool-3);
  border-radius: 6px;
}
#releases-directory .release-tag:first-child {
  margin-left: 0;
}
#releases-directory .release-tag.stable {
  background: rgba(138, 211, 4, 0.4);
  border-color: #8AD304;
}
#releases-directory .release-tag.prototype {
  background: rgba(211, 20, 4, 0.4);
  border-color: #D31404;
}
#releases-directory .release-tag.development {
  background: rgba(211, 119, 4, 0.4);
  border-color: #D37704;
}
#releases-directory .release-tag.testing {
  background: rgba(211, 192, 4, 0.4);
  border-color: #D3C004;
}
/* ---------------------------------------- */
/*  Knowledge Base                          */
/* ---------------------------------------- */
#knowledge-base #search-form {
  display: flex;
  flex-direction: row;
  margin-bottom: 1rem;
}
#knowledge-base #search-form #query {
  width: 80%;
  height: calc(1.25 * var(--input-height));
  margin-top: 1rem;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
#knowledge-base #search-form #submit {
  width: 20%;
  font-size: var(--font-size-18);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
#knowledge-base h2 {
  margin: 0;
  text-align: center;
}
#knowledge-base .articles {
  columns: 2;
  column-gap: 1rem;
  padding: 1rem;
}
#knowledge-base .article-title {
  font-size: var(--font-size-18);
  line-height: 2rem;
  margin: 0;
}
#knowledge-base .article-title a {
  color: var(--color-light-3);
  text-decoration: none;
}
/* ---------------------------------------- */
/*  Search                                  */
/* ---------------------------------------- */
/** Search Input Form */
#search-form {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}
#search-form #search-type {
  flex: 1;
  height: 2.5rem;
}
#search-form #search-query {
  flex: 3;
  height: 2.5rem;
}
#search-form #search-submit {
  margin: 0;
  flex: 1;
}
/** Search Results Page */
#search-results .search-result {
  margin-top: 1rem;
  border-bottom: 1px solid var(--color-cool-4);
}
#search-results .search-result:last-child {
  border-bottom: none;
}
#search-results .search-result .search-result-header {
  gap: 1rem;
  align-items: center;
}
#search-results .search-result .search-result-header .title {
  flex-basis: 280px;
  font-size: var(--font-size-18);
  margin: 0;
  text-decoration: underline;
}
#search-results .search-result .search-result-header .title a {
  color: var(--color-light-3);
  text-decoration: none;
}
#search-results .search-result .search-result-header .metadata {
  flex-basis: 280px;
  color: var(--color-light-5);
  text-align: right;
}
#search-results .search-result .search-headline {
  font-size: var(--font-size-14);
  font-style: normal;
}
#search-results .search-result .search-headline b {
  color: var(--color-warm-1);
}
nav.pagination {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}
nav.pagination a {
  line-height: 2rem;
  flex: none;
}
nav.pagination a.previous,
nav.pagination a.first {
  margin: 0 0.25rem 0 0;
}
nav.pagination a.next i,
nav.pagination a.last i {
  margin: 0 0 0 0.25rem;
}
nav.pagination .current {
  width: 80%;
  text-align: center;
}
/* ---------------------------------------- */
/*  Game Controls Article                   */
/* ---------------------------------------- */
#game-controls ol.hotkey-list {
  list-style: none;
  padding: 0;
}
#game-controls ol.hotkey-list > li {
  display: flex;
  justify-content: space-between;
  margin: 5px 0;
}
#game-controls ol.hotkey-list h4 {
  margin: 0;
  flex: 2;
  font-size: var(--font-size-16);
  line-height: 24px;
  text-decoration: none;
}
#game-controls ol.hotkey-list .keys {
  flex: 2;
}
#game-controls ol.hotkey-list .key {
  display: inline-block;
  margin: 0 1px;
  padding: 2px 4px;
  background: var(--color-cool-4);
  border: 1px solid var(--color-cool-3);
  border-radius: 5px;
  box-shadow: 1px 1px #000;
  font-size: var(--font-size-14);
  color: var(--color-light-2);
  text-align: center;
  min-width: 24px;
}
/* ---------------------------------------- */
/*  Refund Request                          */
/* ---------------------------------------- */
.profile-licenses .license p {
  margin-left: 1rem;
}
/* ---------------------------------------- */
/*  Content Creator Portal                  */
/* ---------------------------------------- */
.creators {
  /** Content Provider Users List */
}
.creators #upload-messages pre code {
  white-space: pre;
  background: rgba(0, 0, 0, 0.8);
}
.creators .overflow {
  overflow-x: auto;
  margin: 0;
  padding: 0;
}
.creators .overflow table {
  white-space: nowrap;
}
.creators .overflow table button {
  padding: 0.25rem 0.5rem;
}
.creators .overflow table button i {
  margin-right: 0.25rem;
}
.creators .creator-users,
.creators .creator-packages {
  gap: 1rem;
}
.creators .creator-users .creator-metadata,
.creators .creator-packages .creator-metadata {
  align-items: center;
  gap: 0.5rem;
}
.creators .creator-users .creator-metadata button,
.creators .creator-packages .creator-metadata button {
  display: inline-block;
  flex: none;
  margin: 0;
  padding: 0 0.5rem;
  line-height: 28px;
}
.creators .creator-users .creator-metadata h4,
.creators .creator-packages .creator-metadata h4 {
  margin: 0;
}
.creators .creator-users footer,
.creators .creator-packages footer {
  flex: 0 0 calc(1.25 * var(--input-height));
}
/* ---------------------------------------- */
/*  Packages Home                           */
/* ---------------------------------------- */
.packages .provider-biography {
  border-top: 1px solid var(--color-cool-4);
  margin-top: 1rem;
  padding-top: 1rem;
  gap: 1rem;
}
.packages .provider-biography img.logo {
  flex: 0 0 200px;
  border-radius: 6px;
}
.packages .provider-biography .description {
  flex-basis: 240px;
}
.packages .provider-biography .description > *:first-child {
  margin-top: 0;
}
.packages .package-tags {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  gap: 0.5rem;
}
#packages-home h3,
#packages-home h4 {
  font-size: var(--font-size-20);
  margin: 0.5rem 0;
}
#packages-home h3 a,
#packages-home h4 a {
  color: var(--color-light-4);
  text-decoration: none;
}
#packages-home .index-list {
  padding: 0 1rem;
}
#packages-home .index-list li {
  break-inside: avoid;
  align-items: center;
  margin: 0;
  padding-bottom: 0.25rem;
}
#packages-home .tag {
  flex: 0 0 48px;
  line-height: 32px;
  margin-right: 1rem;
}
#packages-home #package-types {
  border: none;
}
#packages-home .category-list {
  column-count: 2;
  column-gap: 2rem;
}
/* ---------------------------------------- */
/*  Packages List                           */
/* ---------------------------------------- */
.packages-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.packages-list .package {
  border-bottom: 1px solid var(--color-cool-4);
  margin: 0;
  padding: 0.5rem 0;
}
.packages-list .package:last-child {
  border-bottom: none;
}
.packages-list .package-header {
  align-items: center;
}
.packages-list .package-metadata {
  align-items: center;
  gap: 0.5rem;
}
.packages-list .package-metadata .tag {
  background: transparent;
  border-color: var(--color-cool-4);
}
/* ---------------------------------------- */
/*  Single Package                          */
/* ---------------------------------------- */
.packages .package-title {
  margin: 0;
  font-size: var(--font-size-20);
  color: var(--color-light-3);
}
.packages .package-title a {
  color: var(--color-light-4);
  text-decoration: none;
}
.packages .package-description .package-tags {
  margin-bottom: 1rem;
}
.packages .package-systems,
.packages .package-versions {
  list-style: none;
  margin: 0;
  padding: 0;
}
.packages .package-categories {
  justify-content: flex-start;
}
.packages .package-version,
.packages .package-system {
  align-items: center;
  margin-bottom: 1rem;
}
.packages .package-version:last-child,
.packages .package-system:last-child {
  margin-bottom: 0;
}
.packages .package-version .package-tags {
  flex: 3;
}
.packages .package-version .package-created {
  font-size: small;
  display: block;
  color: var(--color-light-5);
}
/* ---------------------------------------- */
/*  Edit Package                            */
/* ---------------------------------------- */
.versions-form {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
.versions-form .version-headers,
.versions-form .version {
  display: grid;
  grid-template-columns: 2fr 3fr repeat(3, 2fr) repeat(2, 4fr) 1fr;
  text-align: center;
  align-items: center;
  height: 3rem;
}
.versions-form .version-headers > div,
.versions-form .version > div {
  max-height: 100%;
  padding: 0.25rem 0.5rem;
  margin: 0;
}
.versions-form .version-headers .version-number,
.versions-form .version .version-number {
  text-align: left;
  font-weight: bold;
  font-size: var(--font-size-16);
  border-left: none;
  padding-left: 1rem;
}
.versions-form .version-headers .version-date,
.versions-form .version .version-date {
  font-size: var(--font-size-16);
}
.versions-form .version-headers .foundry-version,
.versions-form .version .foundry-version {
  align-items: center;
}
.versions-form .version-headers .version-url,
.versions-form .version .version-url {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.versions-form .version-headers .version-url:has(a),
.versions-form .version .version-url:has(a) {
  color: var(--color-warm-1);
}
.versions-form .version-headers .version-url:has(a):hover,
.versions-form .version .version-url:has(a):hover {
  text-shadow: 0 0 8px var(--color-warm-2);
}
.versions-form .version-headers .version-buttons,
.versions-form .version .version-buttons {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 0.5rem;
  border-right: none;
  min-width: 5rem;
}
.versions-form .version-headers .version-buttons a.button,
.versions-form .version .version-buttons a.button,
.versions-form .version-headers .version-buttons button,
.versions-form .version .version-buttons button {
  padding: 0;
  border: none;
  background: none;
  color: var(--color-warm-1);
  font-weight: bold;
}
.versions-form .version-headers .version-buttons a.button:hover,
.versions-form .version .version-buttons a.button:hover,
.versions-form .version-headers .version-buttons button:hover,
.versions-form .version .version-buttons button:hover {
  text-shadow: 0 0 8px var(--color-warm-2);
}
.versions-form .version-headers.version-headers,
.versions-form .version.version-headers {
  background: rgba(255, 255, 255, 0.05);
  font-weight: bold;
}
.versions-form .version-headers.version,
.versions-form .version.version {
  border-bottom: 1px solid var(--color-cool-4);
}
#add-version-form {
  position: relative;
  width: 100%;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.2s ease-out, opacity 0.2s ease-out, margin 0.2s ease-out;
}
#add-version-form.active {
  opacity: 1;
  margin: 0.5rem 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-cool-4);
}
#add-version-form .close-form {
  position: absolute;
  top: 1.5rem;
  right: 0;
  height: var(--font-size-24);
  width: var(--font-size-24);
  margin: 0;
  padding: 0;
}
/* ---------------------------------------- */
/*  Merch Page                              */
/* ---------------------------------------- */
#merchandise .columns {
  gap: 0.25rem;
}
#merchandise .columns .column h1 {
  text-align: center;
}
/* ---------------------------------------- */
/*  Software License                        */
/* ---------------------------------------- */
#article-28 #license-title {
  text-align: center;
}
#article-28 .terms li {
  margin: 1rem 0;
}
#article-28 .copyright {
  margin-top: 2rem;
  font-size: var(--font-size-14);
  color: var(--color-light-5);
}
/* ---------------------------------------- */
/*  Error Pages                             */
/* ---------------------------------------- */
.error-page {
  text-align: center;
}
.error-page #site-title {
  padding: inherit;
  color: var(--color-light-1);
}
.error-page #site-subtitle {
  font-size: var(--font-size-48);
  margin-top: 1.5rem;
  padding: 2rem;
  color: var(--color-light-1);
}
.error-page .error-info {
  font-size: var(--font-size-32);
  font-family: var(--font-h2);
  font-weight: bold;
  color: var(--color-light-2);
}
.error-page .error-info p {
  padding: 1.5rem;
  margin: 1.5rem;
}
.error-page .error-info code {
  font-size: var(--font-size-28);
}
.user-profile {
  /** User Profile Sidebar */
}
.user-profile .primary-content {
  --padding-content: 1.5rem;
  gap: var(--padding-content);
  justify-content: center;
}
.user-profile .profile-sidebar {
  flex: 0 0 200px;
  text-align: center;
  gap: 1rem;
}
.user-profile .profile-sidebar > * {
  flex: none;
  margin: 0;
}
.user-profile .profile-sidebar .button {
  padding: 0.5rem 0;
}
.user-profile .profile-sidebar .button.active {
  background: var(--color-cool-4);
  color: var(--color-light-2);
  pointer-events: none;
}
.user-profile .profile-content {
  flex-basis: 280px;
  justify-content: flex-start;
  gap: 1rem;
}
.user-profile .profile-content > * {
  flex: none;
  margin: 0;
}
.user-profile .profile-content h2.border {
  margin-top: 0;
}
.user-profile #profile-edit-form {
  gap: 1rem;
}
.user-profile #profile-edit-form #avatar-current {
  max-width: 280px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.user-profile .license {
  margin-bottom: 1.5rem;
}
.user-profile .license h4 {
  margin: 1rem 0 0;
  font-size: var(--font-size-20);
}
.user-profile .license-name input[type="text"] {
  width: auto;
}
.user-profile .subscription label {
  display: inline-block;
  width: 160px;
  margin-left: 10px;
}
.user-profile .subscription .package {
  margin-left: 10px;
}
.user-profile .software-download {
  max-width: 460px;
  gap: 0.5rem;
}
.user-profile .software-download > label {
  flex: 1;
}
.user-profile .software-download .button {
  flex: none;
  text-align: center;
}
.user-profile .account-link {
  flex-direction: column;
}
.user-profile .account-info {
  display: flex;
  align-items: center;
}
.user-profile .account-info > * {
  margin: 0 3px;
  flex: 2;
}
.edit-user .form-group.avatar label {
  flex: 1;
}
.edit-user .form-group.avatar .form-fields {
  display: block;
  text-align: right;
}
.edit-user button.oauth-button {
  flex: 0 0 128px;
  margin: -3px 0 0 10px;
}
.user-badges .badge-tooltip {
  display: none;
  width: 280px;
  flex-direction: column;
  padding: 1rem;
  gap: 1rem;
  position: absolute;
  z-index: 5;
  align-content: center;
  justify-content: flex-start;
  background: var(--color-cool-5-90);
  text-align: center;
}
.user-badges .badge-tooltip h4 {
  font-size: var(--font-size-20);
  margin: 0;
}
.user-badges .badge-tooltip p {
  margin: 0;
  color: var(--color-light-5);
}
.user-badges .badge-holder {
  flex: 0 0 96px;
  margin: 0 0.25rem;
}
.user-badges .badge-holder:hover .badge-tooltip {
  display: flex;
}
.content-providers .content-provider {
  align-items: center;
  gap: 0.5rem;
}
.content-providers .content-provider .provider-name {
  flex: none;
}
.content-providers .content-provider .provider-id {
  font-size: var(--font-size-16);
  color: var(--color-light-5);
}
@media (max-width: 1200px) {
  .carousel {
    --figure-width: calc(100% - (2 * var(--carousel-margin)));
  }
  .carousel figure.previous {
    left: calc(-1 * var(--carousel-width));
  }
  .carousel figure.next {
    left: var(--carousel-width);
  }
  .carousel figure.active {
    left: var(--carousel-margin);
  }
  .carousel .control.previous {
    left: 0;
  }
  .carousel .control.next {
    right: 0;
  }
}
@media (max-width: 720px) {
  /* ----------------------------------------- */
  /*  Override ../blocks.less                  */
  /* ----------------------------------------- */
  .carousel {
    --figure-width: 100%;
  }
  .carousel figure.active {
    left: 0;
  }
  .carousel figure figcaption {
    width: 100%;
    left: 0;
  }
  .carousel figure figcaption h3 {
    font-size: var(--font-size-20);
  }
  .carousel figure figcaption p {
    background: var(--color-cool-5-50);
    color: var(--color-light-1);
    border-radius: 0;
    text-align: center;
  }
  .carousel .control {
    color: var(--color-light-1);
    text-shadow: 0 0 10px #000;
  }
  .carousel .control.previous,
  .carousel .control.next {
    line-height: 300px;
  }
  /* ----------------------------------------- */
  /*  Override ../pages.less                   */
  /* ----------------------------------------- */
  #packages-home .category-list {
    columns: 1;
  }
}
@media (max-width: 480px) {
  :root {
    --padding-horizontal: 0.5rem;
  }
  /* ----------------------------------------- */
  /*  Override ../layout.less                  */
  /* ----------------------------------------- */
  /** More gradient to fill the vertical space */
  #background-top {
    -webkit-mask-image: linear-gradient(to top, transparent 33%, black 90%);
    mask-image: linear-gradient(to top, transparent 33%, black 90%);
  }
  #background-bottom {
    -webkit-mask-image: linear-gradient(to bottom, transparent 33%, black 90%);
    mask-image: linear-gradient(to bottom, transparent 33%, black 90%);
  }
  #main-header {
    --menu-width: 100%;
    --login-width: 100%;
    background: var(--color-cool-5-90);
  }
  #main-header .dropdown {
    background: var(--color-cool-5-90);
  }
  #site-title {
    font-size: var(--font-size-36);
  }
  #site-subtitle {
    font-size: var(--font-size-20);
  }
  .dialog-prompt {
    max-width: 100%;
  }
  .dialog-prompt p {
    padding: 0 1rem;
  }
  .dialog-prompt::before {
    display: none;
  }
  /* ----------------------------------------- */
  /*  Override ../pages.less                   */
  /* ----------------------------------------- */
  .home {
    --vertical-margin: 20px;
  }
  .home .logo-navigation {
    --logo-size: 96px;
    --logo-hw: 48px;
    --nav-height: 48px;
  }
  .home .logo-navigation a.logo-link {
    font-size: var(--font-size-16);
  }
  .home #social-links .social-link {
    font-size: var(--font-size-24);
  }
  .purchase #sale {
    font-size: var(--font-size-16);
  }
  .purchase #sale h3 {
    font-size: var(--font-size-16);
  }
  .purchase #sale .discount .number {
    font-size: var(--font-size-16);
  }
  .purchase #sale h3 + label,
  .purchase #sale span.days,
  .purchase #sale span.hours {
    display: none;
  }
  #knowledge-base .articles {
    columns: 1;
  }
}