/* ---------------------------------------- */
/* Cascade Layers Declaration               */
/* Reference https://css-tricks.com/css-cascade-layers/
/* ---------------------------------------- */
@layer reset,           // 1. Browser reset styles
       variables,       // 2. Declare framework variables
       elements,        // 3. HTML elements and typography
       blocks,          // 4. Block styles which are used across applications
       applications,    // 5. Application-specific rules
       layouts,         // 6. Page layouts
       system,          // 7. Default game system styles
       modules;         // 8. Default module styles
/* ---------------------------------------- */
/*  Browser Reset                           */
/* ---------------------------------------- */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    user-select: none;
  }
  body {
    width: 100%;
    height: 100vh;
    margin: 0;
    text-rendering: optimizeSpeed;
    line-height: 1.25;
    user-select: none;
  }
  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }
  ul[role="list"],
  ol[role="list"] {
    list-style: none;
  }
  html:focus-within {
    scroll-behavior: smooth;
  }
  img {
    max-width: 100%;
    display: block;
  }
  input,
  button,
  textarea,
  select {
    font: inherit;
  }
}
/* ---------------------------------------- */
/*  Variable Declaration                    */
/* ---------------------------------------- */
@layer variables {
  /* ---------------------------------------- */
  /*  Font Declarations                       */
  /* ---------------------------------------- */
  @font-face {
    font-family: 'Modesto Condensed';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/modesto-condensed.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Modesto Condensed';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/modesto-condensed-bold.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Amiri';
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/amiri-regular.woff2") format('woff2');
  }
  @font-face {
    font-family: 'Amiri';
    font-style: normal;
    font-weight: 700;
    src: url("../fonts/amiri-bold.woff2") format('woff2');
  }
  @font-face {
    font-family: 'Signika';
    src: url('../fonts/signika-regular.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
  }
  @font-face {
    font-family: 'Signika';
    src: url('../fonts/signika-bold.woff2') format('woff2');
    font-style: normal;
    font-weight: 700;
  }
  @font-face {
    font-family: 'Bruno Ace';
    src: url('../fonts/bruno-ace.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
  }
  @font-face {
    font-family: 'Bruno Ace SC';
    src: url('../fonts/bruno-ace-sc.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
  }
  /* ---------------------------------------- */
  /*  Colors                                  */
  /* ---------------------------------------- */
  body {
    --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;
    --color-dark-1: #111;
    --color-dark-2: #222;
    --color-dark-3: #444;
    --color-dark-4: #555;
    --color-dark-5: #666;
    --color-dark-6: #777;
    --color-level-error: #ce0707;
    --color-level-error-bg: rgba(105, 0, 8, 0.8);
    --color-level-error-border: #750003;
    --color-level-info: #59a1f6;
    --color-level-info-bg: rgba(47, 80, 132, 0.8);
    --color-level-info-border: #5c87b9;
    --color-level-success: #26b231;
    --color-level-success-bg: rgba(26, 107, 34, 0.8);
    --color-level-success-border: #1b8f23;
    --color-level-warning: #ee9b3a;
    --color-level-warning-bg: rgba(214, 150, 0, 0.8);
    --color-level-warning-border: #b18404;
    --color-scrollbar: #5d142b;
    --color-scrollbar-track: transparent;
    --color-scrollbar-border: #8d151b;
    --color-text-selection: #f7f3e8;
    --color-text-selection-bg: #584a75;
  }
  /* ---------------------------------------- */
  /*  Typography                              */
  /* ---------------------------------------- */
  body {
    --font-body: "Signika", "Palatino Linotype", sans-serif;
    --font-awesome: "Font Awesome 6 Pro";
    --font-awesome-duotone: "Font Awesome 6 Duotone";
    --font-monospace: monospace;
    --font-blockquote: "Signika", "Palatino Linotype", sans-serif;
    --font-size-10: 0.625rem;
    --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;
    --font-h1: "Modesto Condensed", serif;
    --font-h2: "Amiri", serif;
    --font-h3: "Signika", "Palatino Linotype", sans-serif;
    --font-h4: "Amiri", serif;
    --font-h5: "Signika", "Palatino Linotype", sans-serif;
    --font-h6: "Modesto Condensed", serif;
    --font-h1-size: var(--font-size-48);
    --font-h2-size: var(--font-size-32);
    --font-h3-size: var(--font-size-24);
    --font-h4-size: var(--font-size-24);
    --font-h5-size: var(--font-size-20);
    --font-h6-size: var(--font-size-24);
  }
  /* ---------------------------------------- */
  /*  Layout                                  */
  /* ---------------------------------------- */
  body {
    --input-height: 2rem;
    --z-index-background: -1;
    --z-index-main: 0;
    --z-index-canvas: 0;
    --z-index-app: 30;
    --z-index-ui: 60;
    --z-index-window: 100;
    --z-index-tooltip: 9999;
    --z-index-notification: 99999;
  }
  /* ---------------------------------------- */
  /*  Aesthetics                              */
  /* ---------------------------------------- */
  body {
    --background-url: url("../ui/backgrounds/setup.webp");
    --main-logo: url("../icons/vtt-512.png");
  }
  /* ---------------------------------------- */
  /*  Forms and Form Elements                 */
  /* ---------------------------------------- */
  input,
  select {
    --input-background-color: var(--color-cool-4);
    --input-border-color: transparent;
    --input-text-color: var(--color-light-3);
    --input-placeholder-color: var(--color-light-4);
    --input-focus-outline-color: var(--color-cool-3);
  }
  input:focus,
  select:focus {
    --input-text-color: var(--color-light-1);
  }
  input:disabled,
  select:disabled {
    --input-background-color: var(--color-cool-5);
    --input-border-color: var(--color-cool-4);
    --input-text-color: var(--color-light-4);
  }
  .standard-form label.icon {
    --input-background-color: var(--color-cool-4);
    --input-border-color: transparent;
    --input-text-color: var(--color-light-3);
    --input-focus-outline-color: var(--color-cool-3);
  }
  .standard-form label.icon:focus-within {
    --input-text-color: var(--color-light-1);
  }
  .standard-form label.icon:has(> input:disabled) {
    --input-background-color: var(--color-cool-5);
    --input-border-color: var(--color-cool-4);
    --input-text-color: var(--color-light-4);
  }
  input[readonly] {
    --input-background-color: var(--color-cool-5);
    --input-border-color: var(--color-cool-4);
    --input-text-color: var(--color-light-4);
  }
  input[type="checkbox"] {
    --checkbox-checked-color: var(--color-warm-1);
    --checkbox-disabled-color: var(--color-cool-4);
    --checkbox-background-color: var(--color-cool-4);
    --checkbox-checkmark-color: transparent;
    --checkbox-font-weight: bold;
  }
  input[type=range] {
    --range-track-color: var(--input-background-color);
    --range-thumb-background-color: rgba(11, 10, 19, 0.9);
    --range-thumb-border-color: var(--color-warm-1);
  }
  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-focus-outline-color: var(--color-warm-2);
    --button-hover-background-color: var(--color-warm-2);
    --button-hover-border-color: var(--color-light-3);
    --button-hover-text-color: var(--color-light-1);
  }
  a.button:disabled,
  button:disabled {
    --button-background-color: var(--color-cool-5);
    --button-border-color: transparent;
    --button-text-color: var(--color-light-5);
  }
  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;
  }
  a.button.bright:disabled,
  button.bright:disabled {
    --button-background-color: var(--color-cool-4);
  }
  /* ---------------------------------------- */
  /*  Setup Views Specifically                */
  /* ---------------------------------------- */
  body.auth {
    --header-size: 160px;
    --header-font-size: var(--font-size-80);
    --form-padding: 1.5rem;
    --max-width: 600px;
  }
  /* ---------------------------------------- */
  /*  Tables                                  */
  /* ---------------------------------------- */
  table {
    --table-background-color: var(--color-cool-5-50);
  }
}
/* ---------------------------------------- */
/*  Typography                              */
/* ---------------------------------------- */
@layer elements.typography {
  /* ---------------------------------------- */
  /*  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: 0;
  }
  h1 {
    font-family: var(--font-h1);
    font-size: var(--font-h1-size);
    color: var(--color-light-1);
  }
  h2 {
    font-family: var(--font-h2);
    font-size: var(--font-h2-size);
    color: var(--color-light-1);
  }
  h3 {
    font-family: var(--font-h3);
    font-size: var(--font-h3-size);
    color: var(--color-light-1);
  }
  h4 {
    font-family: var(--font-h4);
    font-size: var(--font-h4-size);
    color: var(--color-light-2);
  }
  h5 {
    font-family: var(--font-h5);
    font-size: var(--font-h5-size);
    color: var(--color-light-2);
  }
  h6 {
    font-family: var(--font-h6);
    font-size: var(--font-h6-size);
    color: var(--color-light-2);
  }
  /** Bordered Header */
  h1.border,
  h2.border,
  h3.border,
  h4.border {
    clear: both;
    padding: 1rem 0 0.6rem;
    position: relative;
    text-indent: 0.5rem;
  }
  h1.border::before,
  h2.border::before,
  h3.border::before,
  h4.border::before {
    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 50%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, black 50%, transparent 100%);
  }
  h3.border::before,
  h4.border::before {
    border-top: 2px solid var(--color-warm-3);
    border-bottom: 2px solid var(--color-warm-3);
  }
  /** Divider Header */
  h1.divider,
  h2.divider,
  h3.divider,
  h4.divider {
    clear: both;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    border: none;
  }
  h1.divider::before,
  h2.divider::before,
  h3.divider::before,
  h4.divider::before {
    content: "";
    width: 50%;
    margin-right: 0.5rem;
    border-top: 2px ridge var(--color-warm-1);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 100%);
    mask-image: linear-gradient(90deg, transparent 0%, black 100%);
  }
  h1.divider::after,
  h2.divider::after,
  h3.divider::after,
  h4.divider::after {
    content: "";
    width: 50%;
    margin-left: 0.5rem;
    border-top: 2px ridge var(--color-warm-1);
    -webkit-mask-image: linear-gradient(270deg, transparent 0%, black 100%);
    mask-image: linear-gradient(270deg, transparent 0%, black 100%);
  }
  /* ---------------------------------------- */
  /*  Text                                    */
  /* ---------------------------------------- */
  p {
    margin: 0.5rem 0;
  }
  p.inactive {
    color: var(--color-light-5);
  }
  span.highlight {
    color: var(--color-warm-1);
  }
  ::selection {
    background: var(--color-text-selection-bg);
    color: var(--color-text-selection);
  }
  .ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  /* ---------------------------------------- */
  /*  Blockquotes                             */
  /* ---------------------------------------- */
  blockquote {
    margin: 0;
    padding: 0.5rem 1rem;
    font-family: var(--font-blockquote);
    font-style: italic;
  }
  /* ---------------------------------------- */
  /*  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;
  }
  ul ul li,
  ol ul li,
  ul ol li,
  ol ol li {
    margin: 0;
  }
  /** Lists without list style */
  ul.plain,
  ol.plain {
    list-style: none;
    margin: 0;
    padding: 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);
    overflow-wrap: break-word;
  }
  a[href]:hover {
    text-shadow: 0 0 8px var(--color-warm-2);
  }
  a.control {
    cursor: pointer;
  }
  a.control > i {
    margin-right: 0.25rem;
  }
  a.control:hover {
    color: var(--color-light-2);
    text-shadow: 0 0 8px var(--color-warm-2);
  }
  /* ---------------------------------------- */
  /*  Tables                                  */
  /* ---------------------------------------- */
  table {
    margin: 1rem;
    background: var(--table-background-color);
    border-spacing: 0;
    border-radius: 8px;
    overflow: hidden;
  }
  table th,
  table td {
    padding: 0.5rem 1rem;
  }
  table thead {
    background: var(--color-cool-4);
    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-4);
    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: linear-gradient(90deg, transparent 0%, #e7d1b1 50%, transparent 100%);
  }
  /* ---------------------------------------- */
  /*  Code Blocks                             */
  /* ---------------------------------------- */
  /* Inline Code Blocks */
  p code,
  li code,
  span code {
    display: inline-block;
    padding: 1px 0.25rem;
    margin: -1px 0;
    font-size: var(--font-size-14);
    word-break: keep-all;
    white-space: nowrap;
  }
  code {
    display: block;
    padding: 0.5rem;
    color: var(--color-light-2);
    background: var(--color-cool-4);
    border: 1px solid var(--color-cool-3);
    border-radius: 3px;
    user-select: text;
    --color-text-selection-bg: var(--color-cool-3);
  }
  span.reference {
    flex: none;
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: var(--font-size-14);
    color: #c5dbe3;
    border: 1px solid #def7ff;
    border-radius: 3px;
  }
}
/* ---------------------------------------- */
/*  Media Elements                          */
/* ---------------------------------------- */
@layer elements.media {
  /* Images */
  img,
  iframe,
  video {
    max-width: 100%;
  }
}
/* ---------------------------------------- */
/*  Forms and Form Elements                 */
/* ---------------------------------------- */
@layer elements.forms {
  /* ---------------------------------------- */
  /*  Text Input Fields                       */
  /* ---------------------------------------- */
  input[type="text"],
  input[type="number"],
  input[type="password"],
  input[type="date"],
  input[type="time"],
  input[type="search"],
  input[type="file"],
  select {
    width: 100%;
    height: var(--input-height);
    line-height: var(--input-height);
    padding: 0 0.5rem;
    background: var(--input-background-color);
    border: 1px solid var(--input-border-color);
    border-radius: 4px;
    outline: 1px solid transparent;
    color: var(--input-text-color);
    user-select: text;
    font-size: var(--font-size-14);
    transition: outline-color 0.5s;
  }
  input[type="text"]:focus,
  input[type="number"]:focus,
  input[type="password"]:focus,
  input[type="date"]:focus,
  input[type="time"]:focus,
  input[type="search"]:focus,
  input[type="file"]:focus,
  select:focus {
    outline: 2px solid var(--input-focus-outline-color);
  }
  input[type="text"]:disabled,
  input[type="number"]:disabled,
  input[type="password"]:disabled,
  input[type="date"]:disabled,
  input[type="time"]:disabled,
  input[type="search"]:disabled,
  input[type="file"]:disabled,
  select:disabled {
    opacity: 1;
    pointer-events: none;
  }
  input[readonly] {
    pointer-events: none;
  }
  select {
    user-select: none;
  }
  select option {
    background: var(--color-select-option-bg);
  }
  /** Browser Time/Date Icons */
  ::-webkit-calendar-picker-indicator {
    display: none;
  }
  /** Placeholder Text */
  ::placeholder {
    color: var(--input-placeholder-color);
  }
  /** Icon Decorated Inputs */
  label.username,
  label.password,
  label.search {
    display: flex;
    align-items: center;
  }
  label.username > input,
  label.password > input,
  label.search > input {
    padding-right: 30px;
  }
  label.username::after,
  label.password::after,
  label.search::after {
    flex: 0 0 30px;
    margin-left: -30px;
    display: inline-block;
    line-height: var(--input-height);
    font-size: 12px;
    font-family: var(--font-awesome);
    font-weight: 900;
    text-align: center;
    color: var(--color-light-5);
  }
  label.username::after {
    content: "\F007";
  }
  label.password::after {
    content: "\F084";
  }
  label.search::after {
    content: "\F002";
  }
  /** Search Fields */
  input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 0.5rem;
    background: linear-gradient(45deg, transparent 0%, transparent 43%, var(--color-light-5) 45%, var(--color-light-5) 55%, transparent 57%, transparent 100%), linear-gradient(135deg, transparent 0%, transparent 43%, var(--color-light-5) 45%, var(--color-light-5) 55%, transparent 57%, transparent 100%);
    cursor: pointer;
  }
  /** Number Fields */
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
  }
  input[type="number"] {
    -moz-appearance: textfield;
  }
  /** File Input Fields */
  input[type="file"] {
    font-size: 0.75rem;
  }
  /** Hint Icons in Labels */
  label.hint {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
  }
  label.hint > i {
    cursor: pointer;
    transition: 0.5s;
  }
  label.hint > i:hover {
    color: var(--color-warm-1);
  }
  /* ---------------------------------------- */
  /*  Checkboxes                              */
  /* ---------------------------------------- */
  input[type="checkbox"] {
    --checkbox-size: 20px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  }
  input[type="checkbox"]:disabled,
  input[type="checkbox"][readonly] {
    cursor: initial;
  }
  input[type="checkbox"]:focus {
    color: inherit;
    outline: none;
  }
  input[type="checkbox"]:focus-visible::before {
    outline: 2px solid var(--input-focus-outline-color);
  }
  input[type="checkbox"]:checked:focus-visible::before {
    outline: 2px solid var(--input-focus-outline-color);
  }
  input[type="checkbox"]::before,
  input[type="checkbox"]::after {
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    font-size: var(--checkbox-size);
    line-height: var(--checkbox-size);
    border-radius: 3px;
  }
  input[type="checkbox"]::before {
    font-family: var(--font-awesome);
    font-weight: var(--checkbox-font-weight);
    color: var(--checkbox-background-color);
    content: "\f0c8";
    outline: 1px solid transparent;
    transition: outline-color 0.5s;
  }
  input[type="checkbox"]:checked {
    position: relative;
  }
  input[type="checkbox"]:checked::before,
  input[type="checkbox"]:checked::after {
    font-family: var(--font-awesome-duotone);
  }
  input[type="checkbox"]:checked::after {
    color: var(--checkbox-checked-color);
    content: "\f14a\f14a";
  }
  input[type="checkbox"]:checked::before {
    color: var(--checkbox-checkmark-color);
    content: "\f14a";
    position: absolute;
  }
  input[type="checkbox"]:disabled::before,
  input[type="checkbox"][readonly]::before {
    color: var(--checkbox-disabled-color);
  }
  /** Labeled Checkboxes */
  label.checkbox {
    flex: auto;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    margin: 0;
    font-size: var(--font-size-12);
  }
  label.checkbox > input[type="checkbox"] {
    --checkbox-size: 16px;
    flex: none;
    top: 0;
    margin: 0;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
  }
  /* Text Areas */
  textarea {
    --color-text-selection-bg: var(--color-cool-3);
    min-height: 50px;
    padding: 1rem;
    background: transparent;
    border: 1px solid var(--color-cool-4);
    border-radius: 4px;
    font-family: var(--font-monospace);
    font-size: var(--font-size-14);
    color: var(--input-text-color);
    user-select: text;
    resize: vertical;
  }
  textarea:focus {
    box-shadow: 0 0 6px var(--color-warm-1);
    outline: 1px solid transparent;
  }
  textarea:read-only {
    color: var(--color-light-4);
    box-shadow: none;
  }
  /* ---------------------------------------- */
  /*  Range Inputs                            */
  /* ---------------------------------------- */
  input[type=range] {
    --thumb-size: 12px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    height: 20px;
    margin: 0;
    width: 100%;
    border-radius: 4px;
  }
  input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: calc(var(--thumb-size) / 2);
    background: var(--range-track-color);
    cursor: pointer;
  }
  input[type=range]::-webkit-slider-thumb {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    height: var(--thumb-size);
    width: var(--thumb-size);
    background: var(--range-thumb-background-color);
    border: 1px solid var(--range-thumb-border-color);
  }
  input[type=range]::-moz-range-track {
    width: 100%;
    height: calc(var(--thumb-size) / 2);
    background: var(--range-track-color);
    cursor: pointer;
  }
  input[type=range]::-moz-range-thumb {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    height: var(--thumb-size);
    width: var(--thumb-size);
    background: var(--range-thumb-background-color);
    border: 1px solid var(--range-thumb-border-color);
  }
  input[type=range]:disabled,
  input[type=range][readonly] {
    pointer-events: none;
    filter: grayscale(1) opacity(0.33);
  }
  input[type=range]:focus {
    outline: none;
  }
  /* ---------------------------------------- */
  /*  Buttons                                 */
  /* ---------------------------------------- */
  a.button,
  button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
    background: var(--button-background-color);
    border: 1px solid var(--button-border-color);
    border-radius: 4px;
    color: var(--button-text-color);
    text-decoration: none;
    cursor: pointer;
    font-size: var(--font-size-14);
  }
  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 {
    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);
    transition: background-color 0.5s, border-color 0.5s;
  }
  a.button:focus,
  button:focus {
    outline: 1px solid var(--button-focus-outline-color);
    box-shadow: 0 0 4px var(--button-focus-outline-color);
  }
  a.button.icon > i,
  button.icon > i {
    margin: 0;
  }
  a.button.active,
  button.active {
    outline: 1px solid var(--button-focus-outline-color);
    box-shadow: 0 0 4px var(--button-focus-outline-color);
  }
  /** Bright Buttons */
  a.button.bright,
  button.bright {
    text-transform: uppercase;
  }
}
/* ---------------------------------------- */
/*  Block-Specific Rules                    */
/* ---------------------------------------- */
@layer blocks.basic {
  /* ---------------------------------------- */
  /*  Flexbox                                 */
  /* ---------------------------------------- */
  .flexrow {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .flexrow > * {
    flex: 1;
  }
  .flexcol {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
  }
  .flexcol > * {
    flex: none;
  }
  .flexrow > .flex0,
  .flexcol > .flex0 {
    flex: 0;
  }
  .flexrow > .flex1,
  .flexcol > .flex1 {
    flex: 1;
  }
  .flexrow > .flex2,
  .flexcol > .flex2 {
    flex: 2;
  }
  .flexrow > .flex3,
  .flexcol > .flex3 {
    flex: 3;
  }
  /* ---------------------------------------- */
  /*  Global Classes                          */
  /* ---------------------------------------- */
  .disabled {
    cursor: default;
    pointer-events: none;
  }
  .hidden {
    display: none !important;
  }
  /** Scrollable Containers */
  .scrollable {
    --scroll-margin: 0.75rem;
    margin-right: calc(-1 * var(--scroll-margin)) !important;
    padding-right: var(--scroll-margin) !important;
    overflow: hidden auto;
  }
}
/* ---------------------------------------- */
/*  Page Layouts                            */
/* ---------------------------------------- */
@layer layouts.full {
  /* ---------------------------------------- */
  /*  Body Container                          */
  /* ---------------------------------------- */
  body {
    overflow: hidden auto;
    margin: 0;
    padding: 1rem;
    background: black;
    font-family: var(--font-body);
    font-size: var(--font-size-15);
    color: var(--color-light-3);
  }
  #main-background {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--background-url) no-repeat;
    background-size: cover;
    background-attachment: fixed;
    opacity: 0.5;
    z-index: var(--z-index-background);
  }
  /* ----------------------------------------- */
  /*  Scrollbar                                */
  /* ----------------------------------------- */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  ::-webkit-scrollbar-track {
    border-radius: 3px;
  }
  ::-webkit-scrollbar-thumb {
    outline: 1px solid transparent;
    border-radius: 2px;
    background: var(--color-scrollbar);
    border: 1px solid var(--color-scrollbar-border);
  }
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--color-scrollbar) var(--color-scrollbar-track);
  }
}
@layer layouts.responsive {
  @media (max-width: 1440px) {
    body.setup {
      height: unset;
    }
    body.auth {
      min-height: 100vh;
    }
    #setup {
      display: unset;
      overflow: unset;
      margin: 2rem 0;
    }
    #setup-packages {
      max-width: unset;
    }
    #setup-sidebar {
      width: 100%;
      flex-direction: row;
      justify-content: center;
      margin: 1rem auto 0;
      container: unset;
    }
    #setup-sidebar #setup-sidebar-news,
    #setup-sidebar #setup-sidebar-featured {
      flex: 0 0 400px;
    }
    #setup-sidebar #news-articles {
      position: unset;
    }
    #setup-sidebar #news-articles .news {
      flex: 0 0 100px;
    }
  }
  @media (max-width: 960px) {
    #setup-packages .tabs h2.divider::before,
    #setup-packages .tabs h2.divider::after {
      content: unset;
    }
    #setup-sidebar {
      flex-direction: column;
    }
    .tour-center-step {
      top: 1rem;
    }
  }
  @media (max-height: 960px) {
    #main-header {
      --header-size: 80px;
    }
    .tour-center-step {
      top: 1rem;
    }
  }
  @media (max-width: 720px) {
    #setup-packages .tabs .tab-icon + .tab-title {
      display: none;
    }
  }
  @media (max-width: 480px) {
    :root {
      --font-size-10: 0.5rem;
      --font-size-11: 0.625rem;
      --font-size-12: 0.625rem;
      --font-size-13: 0.75rem;
      --font-size-14: 0.75rem;
      --font-size-15: 0.875rem;
      --font-size-16: 0.875rem;
      --font-size-18: 1rem;
      --font-size-20: 1.125rem;
      --font-size-24: 1.25rem;
      --font-size-28: 1.5rem;
      --font-size-32: 1.75rem;
      --font-size-36: 2rem;
      --font-size-48: 2.25rem;
      --font-size-64: 2.5rem;
      --font-size-80: 3rem;
    }
    /* ---------------------------------------- */
    /*  classes.less                            */
    /* ---------------------------------------- */
    #notifications {
      --position-top: 0.5rem;
    }
    /* ---------------------------------------- */
    /*  views/auth.less                         */
    /* ---------------------------------------- */
    body.auth {
      --header-size: 100px;
      --form-padding: 1rem;
    }
  }
}