/* #region CSS RESET ======> */

*,
*::before,
*::after { /* Box sizing rules */
  box-sizing: border-box;
}

* { /* Remove default margin, padding, font */
  margin: 0;
  padding: 0;
  font: inherit;
}

ul[role='list'],
ol[role='list'] { /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
  list-style: none;
}

html:focus-within { /* Set core root defaults */
  scroll-behavior: smooth;
}

html,
body { /* Set core html and body defaults */
    width: 100%;
    height: 100%;
}

body {
  /* text-rendering: optimizeSpeed; */
  line-height: 1.5;
}

a:not([class]) { /* A elements that don't have a class get default styles */
  text-decoration-skip-ink: auto;
}

img,
picture,
svg { /* Make images easier to work with */
  max-width: 100%;
  display: block;
}

@media (prefers-reduced-motion: reduce) { /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
  html:focus-within {
   scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* #endregion <====== */


/* #region ROOT ======> */

:root {
  --light: #ebeef1;
  --dim: #a4a8ac;
  /* --dim: #d80f95; */
  --dimmer: #272e33;
  --dark: #20262c;

  --dark-50: rgba(32, 38, 44, 50%);

  --border-color: var(--dim);
  --border-color: #787e83;
  --border-color-light: var(--light);
  --border-color-dark: var(--dark);

  --link-color: var(--dim);
  --link-hover-color: var(--light);

  --x-color: var(--light);

  --modal-background: rgba(32, 38, 44, 75%);
  --modal-background-transparent: rgba(0, 0, 0, 0%);

  --white: #ebeef1;
  --lightgray: #b5c0ca;
  --gray: #7b8a97;
  --lightblue: #4b4b60;
  --blue: #172436;
  --darkblue: #12151c;
  --orange: #f8844e;
  --red: #f24444;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-heavy: 500;
  --fw-semi-bold: 700;
  --fw-bold: 900;

  --fs-200: .75rem;
  --fs-300: .875rem;
  --fs-400: 1rem;
  --fs-500: 1.125rem;
  --fs-600: 1.25rem;
  --fs-700: 1.5rem;

  --container-max-width: 1120px;
  --container-min-width: 280px;
  --container-half-width: calc(var(--container-max-width) / 2);
  --container-large-width: 840px;

  --spacing-100: .125rem;
  --spacing-200: .25rem;
  --spacing-300: .375rem;
  --spacing-400: .5rem;
  --spacing-500: .625rem;
  --spacing-600: .75rem;
  --spacing-700: .875rem;
  --spacing-800: 1rem;
  --spacing-900: 1.125rem;
  --spacing-1000: 1.25rem;
  --spacing-1100: 1.375rem;
  --spacing-1200: 1.5rem;
  --spacing-1300: 1.625rem;
  --spacing-1400: 1.75rem;
  --spacing-1500: 1.875rem;
  --spacing-1600: 2rem;

  --button-s-height: 2.5rem;  /* 40px */
  --button-m-height: 3.25rem; /* 52px */
  --button-l-height: 4rem;    /* 64px */

  --tag-height: 1.5rem;

  --border-radius-small: .125rem;
  --border-radius-tag: .375rem;

  --form-field-height: 2.5rem;

  --reply-line-thickness: 1px;
}

/* #endregion <====== */


/* #region ELEMENTS ======> */

body {
  min-height: 100vh;
  font-family: "Roboto", Sans-serif;
  font-size: var(--fs-400);
  background-color: var(--dark);
  color: var(--light);
  overflow-wrap: anywhere;
  white-space: normal;
}

h1 {
  font-size: var(--fs-700);
  font-weight: var(--fw-semi-bold);
}

h2 {
  font-size: var(--fs-600);
  font-weight: var(--fw-semi-bold);
}

a,
a:visited,
a:active {
  color: var(--link-color);
  text-decoration: none;
}

a:hover {
  color: var(--link-hover-color);
  text-decoration: underline;
}

p {
  overflow-wrap: break-word;
  white-space: normal;
}

  /* #region Input/Textarea ------> */
    textarea {
      font-family: "Roboto", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
      display: block;
    }

    input[type="time"]::-webkit-calendar-picker-indicator {
      filter: invert(90%);
    }

    input[type="date"]::-webkit-calendar-picker-indicator {
      filter: invert(90%);
    }

    select,
    select option {
      background-color: rgba(44, 52, 70, 1);
      padding: 1rem;
    }

    select:focus,
    select option:focus {
      border-color: var(--white);
      background-color: rgba(44, 52, 70, 1);
    }

    ::placeholder {
      color: var(--dim);
      font-size: var(--fs-300);
      font-weight: var(--fw-light);
      font-style: italic;
    }
  /* #endregion <------ */

/* #endregion <====== */


/* #region COMMON ======> */

  .wrapper { /* Primary wrapper for the entire site. */
    max-width: var(--container-max-width);
    min-height: 100dvh;
    margin-inline: auto;
    /* border: 1px solid var(--border-color); */
  }

  .container { /* Primary container for content. */
    background-color: var(--dark);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-small);
    padding: var(--spacing-800);
  }

  .hl {
    border-bottom: 1px solid var(--border-color);
  }

  .unfollow:hover {
    background-color: var(--light);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-small);
    color: var(--dark);
    cursor: pointer;
  }

  /* #region Column container/columns ------> */
    .col-container {
      background-color: var(--dark);
      width: 100%;
      padding: var(--spacing-800);
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      gap: var(--spacing-800);
    }

    .col-full {
      background-color: var(--dark);
      min-width: var(--container-min-width);
      flex: 1 1 100%;
    }

    .col-large {
      background-color: var(--dark);
      min-width: var(--container-min-width);
      flex: 1 1 100%;
      order: 1;
    }

    .col-small-left,
    .col-small-right {
      background-color: var(--dark);
      min-width: var(--container-min-width);
      flex: 1 1 100%;
      order: 0;
    }

    @media only screen and (min-width: 769px) {
      .col-large {
        flex: 2 1;
        order: 1;
      }

      .col-small-left {
        flex: 1 1;
        order: 0;
      }

      .col-small-right {
        flex: 1 1;
        order: 2;
      }
    }
  /* #endregion <------ */

  /* #region Tab ------> */
    .tab-container {
      background-color: var(--dark);
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius-small);
      /* border-bottom-left-radius: 0;
      border-bottom-right-radius: 0; */
      overflow: hidden;
    }

    .tab,
    .staff-tab,
    .tab-selected,
    .notif-tab-selected,
    .staff-tab-selected {
      background-color: var(--dark);
      padding: 0 var(--spacing-800);
      color: var(--light);
      line-height: var(--button-m-height);
      font-size: var(--fs-400);
      font-weight: var(--fw-heavy);
      text-align: center;
      flex: 1 1;
    }

    .tab:hover,
    .staff-tab:hover {
      background-color: var(--light);
      color: var(--dark);
      text-decoration: underline;
      cursor: pointer;
    }

    .tab-delete:hover {
      background-color: var(--x-color);
    }

    .tab-selected,
    .staff-tab-selected {
      background-color: var(--light);
      color: var(--dark);
      text-decoration: underline;
    }

    .tab-selected:hover,
    .staff-tab-selected:hover {
      background-color: var(--light);
      color: var(--dark);
      cursor: default;
    }

    .tab-content,
    .staff-tab-content {
      display: none;
    }
  /* #endregion <------ */

  /* #region Errors ------> */
    .error-container,
    .error-container-s,
    .notice-container,
    .notice-container-s {
      background-color: var(--dark);
      width: 100%;
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius-small);
      padding: var(--spacing-800);
      color: var(--dim);
    }

    .error-container-s,
    .notice-container-s {
      padding: var(--spacing-200) var(--spacing-800);
    }

    .error-message,
    .notice-message {
      color: var(--light);
      font-weight: var(--fw-heavy);
    }

    .error-code {
      color: var(--light);
      font-size: var(--fs-300);
      font-weight: var(--fw-light);
      /* display: none; */
    }
  /* #endregion <------ */

  /* #region Tags ------> */
    .tag-container {
      width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: var(--spacing-200);
    }

    .tag,
    .tag:visited {
      background-color: var(--dark);
      display: block;
      height: var(--tag-height);
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius-tag);
      padding: 0 var(--spacing-200);
      color: var(--light);
      line-height: var(--tag-height);
      font-size: var(--fs-300);
      font-weight: var(--fw-light);
      text-decoration: none;
    }

    .tag:hover {
      background-color: var(--light);
      color: var(--dark);
      text-decoration: none;
      cursor: pointer;
    }

    .tag:active {
      background-color: var(--light);
      color: var(--dark);
    }
  /* #endregion <------ */

/* #endregion <====== */


/* #region NAV ======> */

.nav-container {
  background-color: var(--dark);
  width: 100%;
  height: 4rem;
  border-bottom: 1px solid var(--border-color);
  padding: 1rem;
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}

.nav-left {
  flex: 1;
}

.nav-center {
  display: none;
}

@media only screen and (min-width: 769px) {
  .nav-center {
    display: block;
    flex: 0 0 auto;
    text-align: center;
  }
}

.nav-right {
  flex: 1;
  text-align: right;
}

.nav-icon-container {
  position: relative;
  display: inline-block;
}

.nav-icon {
  background-color: var(--dark);
  width: 2rem;
  height: 2rem;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--light);
  text-align: center;
  line-height: 2rem;
  overflow: hidden;
}

.nav-icon:hover {
  background-color: var(--light);
  border: 1px solid var(--border-color);
  color: var(--dark);
  cursor: pointer;
}

.nav-icon-count {
  background-color: var(--light);
  min-width: 1rem;
  height: 1rem;
  line-height: 1rem;
  border: 1px solid var(--dark);
  border-radius: var(--border-radius-tag);
  padding: 0 var(--spacing-100);
  position: absolute;
  top: -0.5rem;
  left: 1rem;
  white-space: nowrap;
  color: var(--dark);
  font-size: var(--fs-200);
  text-align: center;
  pointer-events: none;
}

  /* #region Nav left ------> */
    .nav-website-status {
      padding-left: var(--spacing-800);
      color: var(--light);
    }
    
    .nav-website-status:hover {
      cursor: pointer;
    }

    .nav-website-status:active {
      color: var(--light);
    }

    .nav-website-status:visited {
      color: var(--light);
    }
  /* #endregion <------ */

  /* #region Nav center ------> */
    .nav-logo {
      width: 2.5rem;
      height: 2.5rem;
      display: inline-block;
      vertical-align: middle;
    }

    .nav-logo-text {
      width: auto;
      height: 1rem;
      display: inline-block;
      vertical-align: middle;
    }
  /* #endregion <------ */

  /* #region Nav right ------> */
    .nav-avatar {
      width: 2rem;
      height: 2rem;
      display: block;
    }
  /* #endregion <------ */

  /* #region Nav menu / user menu ------> */
    .nav-menu,
    .nav-user-menu {
      background-color: var(--dark);
      width: auto;
      min-width: 15%;
      height: auto;
      border: 0;
      display: flex;
      flex-direction: column;
      position: fixed;
      z-index: 2;
      top: 4rem;
      transform: translateX(-100%);
      transition: transform 150ms ease-in;
    }

    .nav-menu {
      border-right: 1px solid var(--border-color);
      border-bottom: 1px solid var(--border-color);
      border-bottom-right-radius: var(--border-radius-small);
    }

    .nav-user-menu {
      border-left: 1px solid var(--border-color);
      border-bottom: 1px solid var(--border-color);
      border-bottom-left-radius: var(--border-radius-small);
      right: 0;
      transform: translateX(100%);
    }

    .nav-menu[data-visible="true"],
    .nav-user-menu[data-visible="true"] {
      transform: translateX(0%);
    }

    .nav-menu li,
    .nav-user-menu li {
      list-style-type: none;
    }

    .nav-menu-button {
      width: 100%;
      min-width: 10rem;
      padding: var(--spacing-400) var(--spacing-800);
      display: block;
      color: var(--light);
      text-align: left;
      text-decoration: none;
    }

    .nav-menu-button:active {
      color: var(--light);
    }

    .nav-menu-button:visited {
      color: var(--light);
    }

    .nav-menu-button:hover {
      background-color: var(--light);
      color: var(--dark);
      text-decoration: underline;
      cursor: pointer;
    }

    .nav-menu-button-last {
      border-bottom: 1px solid var(--border-color);
    }
  /* #endregion <------ */

/* #endregion <====== */


/* #region POST ======> */

  .new-post-alert {
    background-color: var(--light);
    /* background-image: url('/img/notif-background.png');
    background-repeat: repeat-y; */
    width: auto;
    height: var(--button-s-height);
    /* border: 1px solid var(--border-color); */
    border-radius: var(--border-radius-small);
    padding: 0 var(--spacing-800);
    color: var(--dark);
    font-weight: var(--fw-heavy);
    line-height: var(--button-s-height);
    text-align: center;
    position: fixed;
    top: 5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
  }

  .new-post-alert:hover {
    /* background-color: var(--light);
    color: var(--dark); */
    cursor: pointer;
  }

  /* #region Create post - post/reply/quote modal ------> */
    .post-text-wrapper {
      position: relative;
    }

    .post-textarea,
    .post-display {
      width: 100%;
      min-height: 10rem;
      padding: var(--spacing-200) var(--spacing-800);
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius-small);
      color: var(--dim);
      overflow-y: auto;
      white-space: pre-wrap; /* Preserves spaces and line breaks */
      word-wrap: break-word; /* Prevents overflow of long words */
      caret-color: var(--light);
    }

    .post-textarea {
      /* background-color: var(--lightblue-low); */
      background-color: var(--dark);
      
      color: transparent;
      /* resize: vertical; */
      cursor: text;
    }

    .post-display {
      background-color: transparent;
      z-index: 1;
      position: absolute;
      top: 0;
      left: 0;
      pointer-events: none;
    }

    .post-textarea:empty::before {
      content: attr(data-placeholder); /* Mimics textarea placeholder */
      color: var(--dim);
      font-size: var(--fs-300);
      font-weight: var(--fw-light);
      font-style: italic;
      pointer-events: none; /* Prevents interaction with placeholder text */
    }

    .mention,
    .hashtag {
      color: var(--dim);
    }

    .mention-not-found {
      color: var(--dim);
    }

    .post-text-panel {
      width: 100%;
      margin-top: var(--spacing-200);
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      gap: var(--spacing-800);
    }

    .post-text-panel-buttons {
      flex: 1 1;
      padding-left: var(--spacing-800);
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      gap: var(--spacing-200);
    }

    .post-text-count {
      flex: 1 1;
      height: 2rem;
      line-height: 2rem;
    }

    .post-text-button,
    .post-text-button-disabled {
      background-color: var(--dark);
      width: 2rem;
      height: 2rem;
      border: 1px solid transparent;
      border-radius: 50%;
      color: var(--light);
      line-height: 2rem;
      text-align: center;
    }

    .post-text-button-disabled {
      color: var(--dim);
      cursor: not-allowed;
    }

    .post-text-button:hover {
      background-color: var(--light);
      border: 1px solid var(--border-color);
      color: var(--dark);
      cursor: pointer;
    }
  /* #endregion <------ */

  /* #region Post display - post/reply/quote display ------> */
    .view-post-wrapper {
      width: 100%;
      position: relative;
    }

    .reply-wrapper {
      width: 100%;
      /* padding-left: 6rem; */
      padding-left: 4rem;
      position: relative;
    }

    .post-container,
    .post-container-no-hover,
    .pinned-post-container,
    .parent-post-container,
    .view-post-container,
    .deleted-post-container,
    .notif-post-container,
    .staff-post-container,
    .quote-post-container {
      background-color: var(--dark);
      width: 100%;
      margin: 0 auto;
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius-small);
      padding: var(--spacing-800);
      /* display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      gap: var(--spacing-800); */
      color: var(--light);
    }

    .view-post-container {
      background-image: url('/img/notif-background.png');
      background-repeat: repeat-y;
    }

    /* .post-container:first-child,
    .pinned-post-container:first-child,
    .parent-post-container:first-child,
    .view-post-container:first-child,
    .deleted-post-container:first-child {
      margin-top: 0;
    } */

    .post-container:hover,
    .pinned-post-container:hover,
    .parent-post-container:hover,
    .notif-post-container:hover,
    .quote-post-container:hover {
      border: 1px solid var(--border-color-light);
      cursor: pointer;
    }

    .deleted-post-container,
    .notif-post-container,
    .quote-post-container {
      border: 1px solid var(--border-color);
    }

    .staff-post-container {
      border: 0;
      padding: 0;
    }

    .reply-v-line {
      position: relative;
      top: 0;
      left: 2.5rem;
      width: 1rem;
      height: 1rem;
      border: 0;
      border-left: var(--reply-line-thickness) solid var(--border-color);
    }

    .reply-v-line-offset,
    .reply-v-line-offset-end {
      position: absolute;
      top: -1rem;
      left: 2.5rem;
      width: 1rem;
      height: calc(100% + 1rem);
      border: 0;
      border-left: var(--reply-line-thickness) solid var(--border-color);
    }

    .reply-v-line-offset-end {
      height: 3rem;
    }

    .reply-h-line-offset {
      position: absolute;
      top: 1.5rem;
      left: 2.5rem;
      /* width: 3.5rem; */
      width: 1.5rem;
      height: 1rem;
      border: 0;
      border-bottom: var(--reply-line-thickness) solid var(--border-color);
      border-left: var(--reply-line-thickness) solid var(--border-color);
      border-bottom-left-radius: var(--border-radius-small);
    }

    .post-pinned-row {
      width: 100%;
    }

    .post-row {
      width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      gap: var(--spacing-800);
    }

    .post-avatar-col {
      min-width: 48px;
    }

    .post-content-col {
      flex-grow: 1;
      min-width: 0; /* Ensures that content won't overflow the container */
    }

    /* #region Header (Post) ---> */
      .post-header {
        width: 100%;
        padding-right: 3rem;
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto;
        gap: var(--spacing-800);
        align-items: center;
      }

      .post-avatar-container {
        background-color: rgba(0, 0, 0, 0);
        border: 1px solid transparent;
        border-radius: 50%;
        overflow: hidden;
        position: relative;
      }

      .post-avatar-container:hover {
        border: 1px solid var(--border-color);
      }

      .post-avatar,
      .post-avatar-unselected {
        width: 48px;
        min-width: 48px;
        aspect-ratio: 1/1;
        /* transition: transform 0.3s ease; */
      }

      .post-avatar-unselected {
        opacity: 35%;
      }

      .post-avatar:hover,
      .post-avatar-unselected:hover {
        /* transform: scale(1.1); */
        cursor: pointer;
        opacity: 100%;
      }

      .post-header-line {
        width: 100%;
        height: 21px;
        line-height: 21px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .post-author-name {
        color: var(--light);
        font-size: var(--fs-400);
        font-weight: var(--fw-heavy);
        text-decoration: none;
      }

      .post-username {
        color: var(--dim);
        font-size: var(--fs-300);
        font-weight: var(--fw-light);
        text-decoration: none;
      }

      .post-timestamp {
        color: var(--dim);
        font-size: var(--fs-300);
        font-weight: var(--fw-light);
      }
    /* #endregion <--- */

    /* #region Content (Post) ---> */
      .post-title {
        text-align: left;
        font-size: var(--fs-600);
      }

      .post-text-wrapper {
        position: relative;
      }

      .post-text {
        text-align: left;
        font-size: var(--fs-400);
      }

      .post-text-hidden {
        height: calc(1.5rem * 10);
        overflow: hidden;
      }

      .post-text-show {
        background-color: var(--dark);
        width: 100%;
        height: var(--button-m-height);
        color: var(--light);
        line-height: var(--button-m-height);
        text-align: center;
      }

      .post-text-show:hover {
        text-decoration: underline;
        cursor: pointer;
      }

      .post-text-show-hidden {
        height: 0;
      }
    /* #endregion <--- */

    /* #region Media (Post) ---> */
      .post-media-container {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-200);
      }

      .post-media-container-multi {
        --grid-layout-gap: var(--spacing-200);
        --grid-column-count: 2;
        --grid-item--min-width: calc(50% - var(--grid-layout-gap));

        --gap-count: calc(var(--grid-column-count) - 1);
        --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
        --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
        grid-gap: var(--grid-layout-gap);
      }

      .post-media-wrapper {
        background-color: inherit;
        min-width: calc(50% - .375rem);
        border: 1px solid transparent;
        border-radius: var(--border-radius-small);
        flex: 1;
        overflow: hidden;
        position: relative;
      }

      .post-media-wrapper:hover {
        background-color: var(--light);
        border: 1px solid var(--border-color);
        cursor: pointer;
      }

      .post-media-img {
        width: 100%;
        /* transition: transform 0.3s ease; */
        aspect-ratio: 16/9;
        object-fit: cover;
      }

      /* .post-media-img:hover {
        transform: scale(1.1);
      } */

      .post-media-iframe {
        width: 100%;
        display: block;
        /* transition: transform 0.3s ease; */
        aspect-ratio: 16/9;
      }

      /* .post-media-iframe:hover {
        transform: scale(1);
      } */

      .post-media-play {
        background-color: rgba(0, 0, 0, 50%);
        width: 2rem;
        height: 2rem;
        border: 0;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        pointer-events: none;
      }
    /* #endregion <--- */

    /* #region Engagement (Post) ---> */
      .post-engagement-row {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--spacing-100);
      }

      .post-engagement-container {
        flex: 1 1; 
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .post-engagement-button {
        background-color: inherit;
        width: 2rem;
        height: 2rem;
        margin-right: var(--spacing-100);
        border: 1px solid transparent;
        border-radius: 50%;
        color: var(--dim);
        line-height: 2rem;
        text-align: center;
      }

      .post-engagement-button:hover {
        border: 1px solid var(--border-color);
        cursor: pointer;
      }

      .post-count-number {
        color: var(--light);
        font-size: var(--fs-300);
        font-weight: var(--fw-semi-bold);
        margin-left: var(--spacing-100);
        margin-right: var(--spacing-200);
      }

      .post-count-word {
        color: var(--dim);
        font-size: var(--fs-300);
        font-weight: var(--fw-light);
      }
    /* #endregion <--- */

  /* #endregion <------ */

  /* #region Post menu - post/reply/quote menu modal(s) ------> */
    .post-menu-button-container {
      width: 100%;
      position: relative;
    }

    .post-menu-button {
      background-color: transparent;
      width: 2rem;
      height: 2rem;
      border: 0;
      border-radius: 50%;
      color: var(--light);
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      right: 0;
    }

    .post-menu-button:hover {
      background-color: var(--light);
      color: var(--dark);
      cursor: pointer;
    }

    /* #region Modal ------> */
      .post-menu-modal {
        background-color: var(--modal-background);
        width: 100dvw;
        height: 100dvh;
        margin: 0 auto;
        border: 0;
        color: var(--light);
        font-family: "Roboto", Sans-serif;
        font-size: var(--fs-400);
        position: fixed;
        top: 0;
        z-index: 10;
        overflow-y: scroll;
      }

      .post-menu-modal-content-wrapper {
        width: 100%;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      .post-menu-modal-content {
        background: var(--dark);
        min-width: var(--container-min-width);
        width: 100%;
        max-width: var(--container-half-width);
        /* min-height: 100dvh; */
        height: auto;
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius-small);
      }

      .post-menu-modal-footer {
        background-color: var(--dark);
        width: 100%;
        height: var(--button-s-height);
        text-align: center;
        line-height: var(--button-s-height);
      }
    /* #endregion <------ */

    .post-menu {
      background-color: var(--dark);
      width: auto;
      min-width: 15%;
      height: auto;
      display: flex;
      flex-direction: column;
      z-index: 2;
    }

    .post-menu li {
      list-style-type: none;
    }

    .post-menu-control {
      display: none;
    }

    .post-menu-item {
      background-color: var(--dark);
      border: 0;
      border-radius: var(--border-radius-small);
      padding: var(--spacing-200) var(--spacing-800);
      color: var(--light);
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      gap: 10px;
    }

    .post-menu-item:hover {
      background-color: var(--light);
      color: var(--dark);
      cursor: pointer;
    }

    .post-menu-item-icon {
      min-width: 24px;
      margin: auto;
      text-align: center;
    }

    .post-menu-item-text {
      flex: auto;
      border-left: 1px solid var(--border-color);
      padding-left: 10px;
    }

    .post-menu-item:active {
      color: var(--light);
    }

    .post-menu-item:visited {
      color: var(--light);
    }

    .h-line {
      background-color: transparent;
      width: auto;
      height: 1px;
      margin: var(--spacing-200) 0;
      border-bottom: 1px solid var(--border-color);
    }

    /* #region Analytics ---> */
      .post-menu-analytics-row {
        background-color: var(--dark);
        border: 0;
        border-radius: var(--border-radius-small);
        padding: var(--spacing-200) var(--spacing-800);
        color: var(--light);
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: var(--spacing-600);
      }

      .post-menu-analytics-row-left {
        min-width: 24px;
        margin: auto;
        text-align: center;
      }

      .post-menu-analytics-row-right {
        flex: auto;
        border-left: 1px solid var(--border-color);
        padding-left: var(--spacing-600);
      }

      .post-menu-analytics-text {
        padding-left: var(--spacing-200);
        color: var(--dim);
      }
    /* #endregion <--- */

  /* #endregion <------ */

/* #endregion <====== */


/* #region PROFILE ======> */

  /* #region Header ------> */
    .profile-image {
      width: 100%;
      border: 1px solid transparent;
      border-radius: var(--border-radius-small);
    }

    .profile-image:hover {
      border: 1px solid var(--border-color);
      cursor: pointer;
    }

    .profile-header-line { /* Used to uniform the height of lines with different font sizes. */
      width: 100%;
      line-height: 24px;
    }

    .profile-header-display-name {
      font-size: var(--fs-600);
      font-weight: var(--fw-semi-bold);
    }

    .profile-header-username {
      color: var(--dim);
      font-size: var(--fs-400);
      font-weight: var(--fw-light);
    }

    .profile-header-follow { /* Flex container for follow count/text. */
      width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      column-gap: var(--spacing-800);
    }

    .profile-header-follow-count {
      color: var(--light);
      font-size: var(--fs-400);
      font-weight: var(--fw-semi-bold);
    }

    .profile-header-follow-text {
      color: var(--dim);
      font-size: var(--fs-400);
      font-weight: var(--fw-light);
    }
  /* #endregion <------ */

  /* #region Links ------> */
    .profile-info {
      background-color: var(--dark);
      width: 100%;
      height: var(--button-s-height);
      margin: 0;
      border: 1px solid transparent;
      border-radius: var(--border-radius-small);
      padding-right: var(--spacing-800);
      color: var(--light);
      line-height: var(--button-s-height);
      display: block;
      overflow: hidden;
    }

    .profile-info:hover {
      background-color: var(--light);
      color: var(--dark);
      text-decoration: none;
    }

    .profile-info-icon {
      width: 3rem;
      color: var(--light);
      text-align: center;
      display: inline-block;
    }

    .profile-info:hover .profile-info-icon {
      color: var(--dark);
    }

    .profile-info-link {
      color: var(--light);
      display: inline-block;
    }

    .profile-info:hover .profile-info-link {
      color: var(--dark);
      text-decoration: underline;
    }
  /* #endregion <------ */

  /* #region Users ------> */
    .user-display-container {
      --grid-layout-gap: var(--spacing-800);
      --grid-column-count: 3;
      --grid-item--min-width: var(--container-min-width);

      --gap-count: calc(var(--grid-column-count) - 1);
      --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
      --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

      background-color: var(--dark);
      width: 100%;
      /* padding: 0 var(--spacing-800); */
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
      grid-gap: var(--grid-layout-gap);
    }

    .user-display {
      background-color: var(--dark);
      width: 100%;
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius-small);
      padding: var(--spacing-800);
    }

    .user-display:hover {
      background-color: var(--dark);
      border: 1px solid var(--light);
      cursor: pointer;
    }
  /* #endregion <------ */

/* #endregion <====== */


/* #region GAME ======> */
  
  /* Some classes for GAME are borrowed from PROFILE */

  /* #region Header ------> */
    .game-header-row {
      width: 100%;
      display: flex;
      flex-wrap: nowrap;
      gap: var(--spacing-800);
    }

    .game-header-row-left {
      width: 72px;
    }

    .game-header-row-right {
      flex: 1;
      overflow-wrap: anywhere;
    }

    .game-header-grid {
      width: 100%;
      display: grid;
      gap: var(--spacing-800);
      grid-template-columns: 1fr 3fr;
    }
  /* #endregion <------ */

  /* #region About ------> */
    .game-about-feature {
      color: var(--light);
      font-size: var(--fs-400);
      font-weight: var(--fw-semi-bold);
    }

    .about-list {
      margin-bottom: var(--spacing-800);
      color: var(--dim);
      list-style-type: none;
    }

    .about-list:last-of-type {
      margin: 0;
    }
  /* #endregion <------ */

  /* #region Team (/g/game.php) ------> */
    .game-team-display-container {
      --grid-layout-gap: var(--spacing-800);
      --grid-column-count: 3;
      --grid-item--min-width: var(--container-min-width);
    
      --gap-count: calc(var(--grid-column-count) - 1);
      --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
      --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));
    
      background-color: var(--dark);
      width: 100%;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
      grid-gap: var(--grid-layout-gap);
    }
    
    .game-team-display {
      background-color: var(--dark);
      width: 100%;
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius-small);
      padding: var(--spacing-800);
    }
  
    .game-team-display:hover {
      background-color: var(--dark);
      cursor: pointer;
    }
    
    .game-team-member-display {
      width: 100%;
      height: 64px;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      gap: var(--spacing-800);
    }

    .game-team-member-avatar-container {
      background-color: rgba(0, 0, 0, 0);
      border: 1px solid transparent;
      border-radius: 50%;
      overflow: hidden;
      position: relative;
    }

    .game-team-member-avatar-container:hover {
      border: 1px solid var(--border-color);
    }

    .game-team-member-avatar {
      width: 64px;
      min-width: 64px;
      aspect-ratio: 1/1;
      /* transition: transform 0.3s ease; */
    }

    .game-team-member-avatar:hover {
      /* transform: scale(1.1); */
      cursor: pointer;
      opacity: 100%;
    }
    
    .game-team-member-display-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    
    .game-team-member-display-name {
      line-height: 22px;
      color: var(--light);
      font-size: var(--fs-400);
    }
    
    .game-team-member-display-username,
    .game-team-member-display-role {
      line-height: 21px;
      color: var(--dim);
      font-size: var(--fs-300);
      font-weight: var(--fw-light);
    }
  /* #endregion <------ */

  /* #region Team (/g/gameinfo.php) ------> */
    .team-member-display {
      background-color: var(--dark);
      width: 100%;
      height: 64px;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      gap: var(--spacing-800);
    }

    .team-member-display-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .team-member-display-button-wrapper {
      width: 2rem;
      height: 64px;
      display: flex;
      align-items: center;
    }

    .team-member-display-button,
    .team-member-display-button-disabled {
      background-color: var(--dark);
      width: 2rem;
      height: 2rem;
      border: 1px solid transparent;
      border-radius: 50%;
      color: var(--light);
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .team-member-display-button:hover {
      background-color: var(--light);
      border: 1px solid var(--dim);
      color: var(--dark);
      cursor: pointer;
    }

    .team-member-display-button-disabled {
      background-color: var(--dark);
      color: var(--dim);
    }

    .team-member-display-button-disabled:hover {
      cursor: not-allowed;
    }

    .team-member-avatar-container {
      background-color: transparent;
      border: 1px solid transparent;
      border-radius: 50%;
      overflow: hidden;
      position: relative;
    }

    .team-member-avatar-container:hover {
      border: 1px solid var(--dim);
    }

    .team-member-avatar {
      width: 64px;
      min-width: 64px;
      aspect-ratio: 1/1;
      /* transition: transform 0.3s ease; */
    }

    .team-member-avatar:hover {
      /* transform: scale(1.1); */
      cursor: pointer;
      opacity: 100%;
    }

    .team-member-display-name {
      line-height: 22px;
      color: var(--light);
      font-size: var(--fs-400);
    }

    .team-member-display-username,
    .team-member-display-role {
      line-height: 21px;
      color: var(--dim);
      font-size: var(--fs-300);
      font-weight: var(--fw-light);
    }

    .search-button,
    .search-button-disabled {
      background-color: var(--dark);
      width: 40px;
      min-width: 40px;
      height: 40px;
      margin-left: var(--spacing-800);
      border: 1px solid var(--border-color);;
      border-radius: var(--border-radius-small);
      color: var(--light);
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .search-button:hover {
      background-color: var(--light);
      border: 1px solid var(--border-color);
      color: var(--dark);
      cursor: pointer;
    }

    .search-button-disabled {
      background-color: inherit;
      border: 1px solid var(--border-color);;
      color: var(--dim);
    }

    .search-button-disabled:hover {
      cursor: not-allowed;
    }
  /* #endregion <------ */

  /* #region Game display ------> */
    .game-display-container {
      --grid-layout-gap: var(--spacing-800);
      --grid-column-count: 3;
      --grid-item--min-width: var(--container-min-width);

      --gap-count: calc(var(--grid-column-count) - 1);
      --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
      --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count));

      background-color: var(--dark);
      width: 100%;
      /* padding: 0 var(--spacing-800); */
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
      grid-gap: var(--grid-layout-gap);
    }

    .game-display {
      background-color: var(--dark);
      width: 100%;
      border: 1px solid var(--border-color);
      padding: var(--spacing-800);
      border-radius: var(--border-radius-small);
    }

    .game-display:hover {
      background-color: var(--dark);
      border: 1px solid var(--light);
      cursor: pointer;
    }

    .game-display h3 {
      padding: var(--spacing-200) 0;
      font-size: var(--fs-600);
      font-weight: var(--fw-semi-bold);
    }

    /* #region Header ---> */
      .game-display-header-container {
        background-color: var(--dark);
        border: 1px solid transparent;
        border-radius: var(--border-radius-small);
        overflow: hidden;
        position: relative;
      }

      .game-display-header-container:hover {
        border: 1px solid var(--border-color);
        cursor: pointer;
      }

      .game-display-header {
        width: 100%;
      }

      .game-display-header:hover {
        cursor: pointer;
      }
    /* #endregion <--- */

    /* #region Screenshots ---> */
      .game-display-screenshot-row {
        width: 100%;
        margin-top: var(--spacing-200);
        display: flex;
        flex-direction: row;
        gap: var(--spacing-200);
      }

      .game-display-screenshot-container {
        background-color: var(--dark);
        border: 1px solid transparent;
        border-radius: var(--border-radius-small);
        flex: 1 1 100%;
        overflow: hidden;
        position: relative;
      }

      .game-display-screenshot-container:hover {
        border: 1px solid var(--border-color);
        cursor: pointer;
      }

      .game-display-screenshot {
        width: 100%;
        /* transition: transform 0.3s ease; */
        object-fit: cover;
        aspect-ratio: 16/9;
      }

      .game-display-screenshot:hover {
        cursor: pointer;
      }
    /* #endregion <--- */

    /* #region Information ---> */
      .game-display-info-container {
        width: 100%;
        max-height: 3.375rem;
        overflow-y: hidden;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: .375rem;
      }
    /* #endregion <--- */
  /* #endregion <------ */

/* #endregion <====== */


/* #region SEARCH ======> */

  .search-bar-container {
    flex: 1 1;
  }

  .search-bar-icon-container {
    width: 3rem;
    min-width: 3rem;
    height: 3rem;
  }

  input[type="search"]::-webkit-search-cancel-button {
    filter: brightness(0) saturate(100%) invert(91%) sepia(4%) saturate(231%) hue-rotate(180deg);
  }

/* #endregion <====== */


/* #region SETTINGS ======> */

  .settings-menu li {
    list-style-type: none;
  }

  .settings-menu-item {
    background-color: var(--dark);
    border: 0;
    border-radius: var(--border-radius-small);
    padding: var(--spacing-200) var(--spacing-800);
    color: var(--dim);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
  }

  .settings-menu-item:active {
    color: var(--light);
  }

  .settings-menu-item:visited {
    color: var(--light);
  }

  .settings-menu-item:hover {
    background-color: var(--light);
    color: var(--dark);
    text-decoration: none;
    cursor: pointer;
  }

  .settings-menu-item-icon {
    min-width: 24px;
    margin: auto;
    text-align: center;
  }

  .settings-menu-item-text {
    flex: auto;
    border-left: 1px solid var(--light);
    padding-left: 10px;
  }

  .settings-menu-item-chevron {
    min-width: 24px;
    margin: auto;
    text-align: center;
  }

/* #endregion <====== */


/* #region TICKETS ======> */

  /* #region Ticket display - feedback/support ticket display ------> */
  .ticket-wrapper {
    width: 100%;
    margin: auto;
    position: relative;
  }

  .ticket-container,
  .ticket-container-no-hover {
    background-color: var(--dark);
    margin: 0 auto;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-small);
    padding: var(--spacing-800);
  }

  .ticket-container:hover {
    border: 1px solid var(--border-color-light);
    cursor: pointer;
  }

  .ticket-container:first-child,
  .ticket-container-no-hover:first-child {
    margin-top: 0;
  }

  .ticket-row {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--spacing-800);
  }

  .ticket-avatar-col {
    min-width: 48px;
  }

  .ticket-content-col {
    flex-grow: 1;
    min-width: 0; /* Ensures that content won't overflow the container */
  }

  .ticket-claim-container {
    width: 100%;
    margin-top: var(--spacing-800);
  }

  /* #region Header (Ticket) ---> */
    .ticket-avatar-container,
    .ticket-staff-avatar-container {
      background-color: var(--dark);
      border: 1px solid transparent;
      border-radius: 50%;
      overflow: hidden;
      position: relative;
    }

    .ticket-avatar-container:hover {
      border: 1px solid var(--border-color);
    }

    .ticket-avatar,
    .ticket-staff-avatar {
      width: 48px;
      min-width: 48px;
      aspect-ratio: 1/1;
      /* transition: transform 0.3s ease; */
    }

    .ticket-avatar:hover {
      /* transform: scale(1.1); */
      cursor: pointer;
      /* opacity: 100%; */
    }

    .ticket-header-line {
      width: 100%;
      height: 21px;
      line-height: 21px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .ticket-name {
      color: var(--light);
      font-size: var(--fs-400);
      font-weight: var(--fw-heavy);
      text-decoration: none;
    }

    .ticket-username {
      color: var(--dim);
      font-size: var(--fs-300);
      font-weight: var(--fw-light);
      text-decoration: none;
    }

    .ticket-timestamp {
      color: var(--dim);
      font-size: var(--fs-300);
      font-weight: var(--fw-light);
    }
  /* #endregion <--- */

  /* #region Content (Ticket) ---> */
    .ticket-subject {
      text-align: left;
      font-size: var(--fs-600);
    }

    .ticket-message-wrapper {
      position: relative;
    }

    .ticket-message {
      text-align: left;
      font-size: var(--fs-400);
    }
  /* #endregion <--- */
/* #endregion <------ */

  /* .ticket-form {
    background-color: var(--dark);
    margin: auto;
    border-radius: var(--border-radius-small);
    padding: var(--spacing-1200);
  } */

  .ticket-v-line {
    position: relative;
    top: 0;
    left: 2.5rem;
    width: 1rem;
    height: 1rem;
    border: 0;
    border-left: var(--reply-line-thickness) solid var(--border-color);
  }

/* #endregion <====== */


/* #region REPORTS ======> */

  .report-container {
    background-color: var(--dark);
    width: 100%;
    min-width: var(--container-min-width);
    /* margin: var(--spacing-800) auto 0; */
    /* border: 1px solid var(--border-color);
    border-radius: var(--border-radius-small); */
    padding: var(--spacing-800);
  }

  /* .report-container:hover {
    background-color: var(--blue-high);
    cursor: pointer;
  } */

  .report-avatar-col {
    min-width: 2rem;
  }

  .report-avatar {
    width: 3rem;
    border: 1px solid transparent;
    border-radius: 50%;
    aspect-ratio: 1/1;
  }

  .report-avatar:hover {
    border: 1px solid var(--border-color);
    cursor: pointer;
  }

  .report-content-col {
    width: 100%;
  }

  .report-preview {
    padding: var(--spacing-800);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-small);
    color: var(--light);
  }

  .report-preview-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing-800);
  }

  .report-preview-left {
    flex: 1 1;
  }

  .report-preview-right {
    flex: 1 1;
  }

  .report-preview-full,
  .report-preview-img {
    width: 100%;
  }

  .report-preview-img img {
    width: 100%;
    border: 1px solid transparent;
    border-radius: var(--border-radius-small);
  }

  .report-preview-img img:hover {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-small);
  }

/* #endregion <====== */


/* #region MODALS ======> */

  /* #region Modal ------> */
    .modal {
      background-color: var(--modal-background);
      width: 100dvw;
      height: 100dvh;
      margin: 0 auto;
      border: 0;
      color: var(--light);
      font-family: "Roboto", Sans-serif;
      font-size: var(--fs-400);
      position: fixed;
      top: 0;
      z-index: 10;
      overflow-y: scroll;
    }

    .modal-background {
      background-color: var(--modal-background-transparent);
    }

    .modal-content-wrapper {
      width: 100%;
      min-height: 100dvh;
      /* padding: var(--spacing-800); */
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .modal-content,
    .modal-content-narrow {
      background: var(--dark);
      min-width: var(--container-min-width);
      width: 100%;
      max-width: var(--container-large-width);
      min-height: 100dvh;
      height: auto;
      border-left: 1px solid var(--border-color);
      border-right: 1px solid var(--border-color);
    }

    .modal-content-narrow {
      width: var(--container-half-width);
    }

    .modal-nav {
      background-color: var(--dark);
      width: 100%;
      min-height: 4rem;
      /* border-bottom: 1px solid var(--border-color); */
      text-align: center;
      line-height: 4rem;
      position: relative;
      /* position: sticky;
      top: 0;
      left: 0;
      z-index: 3; */
    }

    .modal-close-button,
    .alert-modal-close-button {
      background-color: var(--dark);
      width: 2rem;
      height: 2rem;
      border: 1px solid transparent;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: var(--light);
      position: absolute;
      top: 1rem;
      right: 0;
      font-size: var(--fs-600);
    }

    .modal-close-button:hover,
    .alert-modal-close-button:hover {
      background-color: var(--light);
      color: var(--dark);
      cursor: pointer;
    }

    .alert-modal-close-button {
      top: 1rem;
      right: 1rem;
    }

    .modal-footer {
      background-color: var(--dark);
      width: 100%;
      height: var(--button-s-height);
      border-top: 1px solid var(--border-color);
      text-align: center;
      line-height: var(--button-s-height);
      position: sticky;
      bottom: 0;
      left: 0;
      z-index: 3;
    }

    /* @media only screen and (min-width: 769px) {
      .modal-footer {
        display: none;
      }
    } */

    .modal-close {
      color: var(--dim);
      font-size: var(--fs-300);
      font-weight: var(--fw-light);
    }

    .modal-close:hover {
      color: var(--light);
      text-decoration: underline;
      cursor: pointer;
    }
  /* #endregion <------ */

  /* #region Media modal ------> */
    .media-modal {
      background: var(--modal-background);
      width: 100vw;
      height: 100vh;
      margin: auto;
      border: 0;
      color: var(--light);
      font-family: "Roboto", Sans-serif;
      font-size: var(--fs-400);
      position: fixed;
      top: 0;
      z-index: 20;
      overflow-y: scroll;
    }

    .media-modal-content-wrapper {
      width: 100%;
      height: 100%;
      padding: var(--spacing-800);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .media-modal-content {
      background: var(--dark);
      /* width: 100vh; */
      width: calc(100vh + 8rem);
      max-width: calc(100vw - 2rem);
      height: auto;
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius-small);
      padding: var(--spacing-800) var(--spacing-800) 0;
    }

    .media-modal-footer {
      width: 100%;
      /* margin-top: var(--spacing-400);
      margin-bottom: var(--spacing-200); */
      padding: var(--spacing-400) 0;
      color: var(--dim);
      font-size: var(--fs-300);
      font-weight: var(--fw-light);
      text-align: center;
    }

    .media-nav-close:hover {
      color: var(--light);
      text-decoration: underline;
      cursor: pointer;
    }
  /* #endregion <------ */

  /* #region Alert modal ------> */
    .alert-modal {
      background-color: var(--dark);
      height: 4rem;
      margin: auto;
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius-small);
      padding: var(--spacing-800);
      padding-right: 4rem;
      color: var(--dim);
      font-family: "Roboto", Sans-serif;
      font-size: var(--fs-400);
      position: fixed;
      bottom: var(--spacing-1200);
      z-index: 100;
      /* box-shadow: 0 0 10px 1px var(--darkblue); */
    }

    .alert-modal-content {
      height: 2rem;
      line-height: 2rem;
    }

    .alert-modal-link {
      color: var(--dim);
      text-decoration: underline;
    }

    .alert-modal-link:hover {
      color: var(--light);
      text-decoration: underline;
      cursor: pointer;
    }
  /* #endregion <------ */

  /* #region Response modal ------> */
    .response-modal {
      background: var(--modal-background);
      width: 100dvw;
      height: 100dvh;
      margin: auto;
      border: 0;
      border-radius: var(--border-radius-small);
      color: var(--white);
      font-family: "Roboto", Sans-serif;
      font-size: var(--fs-400);
      position: fixed;
      top: 0;
      z-index: 30;
      overflow-y: scroll;
      display: none;
      justify-content: center;
      align-items: center;
    }

    .response-modal-content {
      background: var(--dark);
      min-width: var(--container-min-width);
      width: var(--container-half-width);
      max-width: var(--container-max-width);
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius-small);
      padding: var(--spacing-800) var(--spacing-800) 0;
    }

    .response-message {
      width: fit-content;
      margin: auto;
    }

    .response-modal-footer {
      background-color: var(--dark);
      width: 100%;
      height: var(--button-s-height);
      text-align: center;
      line-height: var(--button-s-height);
    }
  /* #endregion <------ */

  /* #region Notification modal/display ------> */
    /* .notif-modal {
      background-color: var(--modal-background);
      width: 100dvw;
      height: 100dvh;
      margin: 0 auto;
      border: 0;
      color: var(--light);
      font-family: "Roboto", Sans-serif;
      font-size: var(--fs-400);
      position: fixed;
      top: 0;
      z-index: 10;
      overflow-y: scroll;
    } */

    /* .notif-modal-content-wrapper {
      width: 100%;
      height: auto;
      padding: var(--spacing-800);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    } */

    /* .notif-modal-content {
      background: var(--dark);
      width: 100%;
      min-width: var(--container-min-width);
      max-width: var(--container-large-width);
      height: auto;
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius-small);
    } */

    /* .notif-modal-nav {
      background-color: var(--dark);
      width: 100%;
      min-height: 4rem;
      border-bottom: 1px solid var(--border-color);
      text-align: center;
      line-height: 4rem;
      position: sticky;
      top: 0;
      left: 0;
      z-index: 3;
    } */

    .notif-modal-tab-description {
      width: 100%;
      height: auto;
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius-small);
      padding: var(--spacing-800);
      color: var(--dim);
    }

    .notif-container,
    .notif-container-new {
      background-color: var(--dark);
      padding: var(--spacing-800);
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      gap: var(--spacing-800);
    }

    .notif-container-new {
      background-image: url('/img/notif-background.png');
      background-repeat: repeat-y;
    }

    .notif-avatar-col {
      min-width: 3rem;
    }

    .notif-avatar,
    .notif-staff-avatar {
      width: 3rem;
      border: 1px solid transparent;
      border-radius: 50%;
      aspect-ratio: 1/1;
    }

    .notif-avatar:hover {
      border: 1px solid var(--border-color);
      cursor: pointer;
    }

    .notif-content-col {
      flex-grow: 1;
      min-width: 0; /* Ensures that content won't overflow the container */
    }

    .notif-preview {
      color: var(--dim);
    }

    /* .notif-modal-footer {
      background-color: var(--dark);
      width: 100%;
      height: var(--button-s-height);
      border-top: 1px solid var(--border-color);
      text-align: center;
      line-height: var(--button-s-height);
      position: sticky;
      bottom: 0;
      left: 0;
      z-index: 3;
    } */

    /* @media only screen and (min-width: 769px) {
      .notif-modal-footer {
        display: none;
      }
    } */

    .notif-ticket-container {
      background-color: var(--dark);
      margin: 0 auto;
      padding: var(--spacing-800);
    }
  
    .notif-ticket-container:hover {
      border: 1px solid var(--border-color-light);
      cursor: pointer;
    }

    /* .notif-modal-close {
      color: var(--dim);
      font-size: var(--fs-300);
      font-weight: var(--fw-light);
    }

    .notif-modal-close:hover {
      color: var(--light);
      text-decoration: underline;
      cursor: pointer;
    } */

    /* #region Tab ---> */
      .notif-tab-container {
        background-color: var(--dark);
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius-small);
        overflow: hidden;
      }
  
      .notif-tab,
      .notif-tab-selected {
        background-color: var(--dark);
        padding: 0 var(--spacing-800);
        color: var(--light);
        line-height: var(--button-m-height);
        font-size: var(--fs-400);
        font-weight: var(--fw-heavy);
        text-align: center;
        flex: 1 1;
      }
  
      .notif-tab:hover {
        background-color: var(--light);
        color: var(--dark);
        text-decoration: underline;
        cursor: pointer;
      }

      .notif-tab-selected {
        background-color: var(--light);
        color: var(--dark);
        text-decoration: underline;
      }

      .notif-tab-selected:hover {
        background-color: var(--light);
        color: var(--dark);
        cursor: default;
      }
  
      .notif-tab-content {
        display: none;
      }
    /* #endregion <--- */
  
  /* #endregion <------ */

/* #endregion <====== */


/* #region FORM ======> */

  .form {
    background-color: var(--dark);
    width: 100%;
    /* padding: var(--spacing-1200); */
    /* width: calc(var(--container-max-width) * .5);
    min-width: var(--container-min-width);
    margin: auto; */
    /* border-radius: var(--border-radius-small); */
    /* padding: var(--spacing-1200); */
  }

  .form-title {
    text-align: center;
    font-size: var(--fs-700);
  }

  /* #region Form Fields ------> */
    .form fieldset {
      width: 100%;
      /* margin-top: var(--spacing-800); */
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius-small);
      padding: 0 var(--spacing-800) var(--spacing-800);
    }

    .form-name {
      margin-bottom: var(--spacing-200);
      font-weight: var(--fw-heavy);
    }

    .form legend {
      font-weight: var(--fw-heavy);
    }

    .form-field {
      background-color: var(--dark);
      width: 100%;
      height: var(--form-field-height);
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius-small);
      padding: 0 var(--spacing-800);
      color: var(--dim);
    }

    .form-date {
      min-width: calc(100% - var(--spacing-800));
    }

    .form-time {
      min-width: calc(100% - var(--spacing-800));
    }

    .form-textarea {
      background-color: var(--dark);
      width: 100%;
      height: 10rem;
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius-small);
      padding: var(--spacing-200) var(--spacing-800);
      color: var(--dim);
      resize: vertical;
    }

    .form-file {
      width: 100%;
      padding: 1rem 0 var(--spacing-200);
    }

    .form-field-character-count {
      padding-right: var(--spacing-800);
      color: var(--light);
      text-align: right;
      font-size: var(--fs-300);
      font-weight: var(--fw-light);
    }

    .form-expand {
      min-height: 1.5rem;
      margin-top: var(--spacing-100);
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
    }
    
    .form-description {
      color: var(--dim);
    }

    .form-expand button {
      background-color: var(--dark);
      width: 24px;
      height: 24px;
      border: 1px solid transparent;
      border-radius: 50%;
      color: var(--light);
      display: inline-block;
      text-align: center;
    }

    .form-expand button:hover {
      background-color: var(--light);
      border: 1px solid var(--dim);
      color: var(--dark);
      cursor: pointer;
    }

    .form-password-container {
      position: relative;
    }

    .form-password-view {
      width: var(--form-field-height);
      height: var(--form-field-height);
      position: absolute;
      top: 0;
      right: 0;
      line-height: var(--form-field-height);
      text-align: center;
      color: var(--dim);
    }

    .form-password-view:hover {
      color: var(--light);
      cursor: pointer;
    }
  /* #endregion <------ */

  /* #region Radio ------> */
  .form-radio {
    display: flex;
    justify-content: start;
    align-items: baseline;
  }

  .form-radio label {
    display: flex;
    color: var(--light);
    line-height: var(--button-s-height);
    cursor: pointer;
  }

  .form-radio label:hover {
    color: var(--light);
  }

  .form-radio input[type='radio'] {
    position: absolute;
    opacity: 0;
  }

  .form-radio label::before { /* The new radio being drawn */
    content: '';
    width: 1.25rem;
    height: 1.25rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-small);
    margin-right: var(--spacing-800);
    position: relative;
    top: 5px;
    z-index: 0;
  }

  .form-radio label:hover::before,
  .form-radio input[type='radio']:hover + label::before {
    background-color: var(--border-color);
    cursor: pointer;
  }

  .form-radio input[type='radio']:focus + label::before {
    outline: 1px solid var(--light);
  }

  .form-radio input[type='radio']:checked + label::before {
    content: '\002714';
    background-color: var(--border-color);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .form-radio input[type='radio']:checked:hover + label::before {
    background-color: var(--border-color);
  }
  /* #endregion <------ */

  /* #region Checkbox ------> */
  .form-checkbox {
    display: flex;
    justify-content: start;
    align-items: baseline;
  }

  .form-checkbox label {
    display: flex;
    color: var(--light);
    line-height: var(--button-s-height);
    cursor: pointer;
  }

  .form-checkbox label:hover {
    color: var(--light);
  }

  .form-checkbox input[type='checkbox'] {
    position: absolute;
    opacity: 0;
  }

  .form-checkbox label::before { /* The new checkbox being drawn */
    content: '';
    width: 1.25rem;
    height: 1.25rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-small);
    margin: auto;
    margin-right: var(--spacing-800);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
  }

  .form-checkbox label:hover::before,
  .form-checkbox input[type='checkbox']:hover + label::before {
    background-color: var(--border-color);
    cursor: pointer;
  }

  .form-checkbox input[type='checkbox']:focus + label::before {
    outline: 1px solid var(--light);
  }

  .form-checkbox input[type='checkbox']:checked + label::before {
    content: '\002714';
    background-color: var(--border-color);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .form-checkbox input[type='checkbox']:checked:hover + label::before {
    background-color: var(--border-color);
  }

  .form-checkbox-disabled {
    display: flex;
    justify-content: start;
    align-items: baseline;
  }

  .form-checkbox-disabled label {
    display: flex;
    color: var(--light);
    line-height: var(--button-s-height);
    cursor: not-allowed;
  }

  .form-checkbox-disabled label:hover {
    color: var(--light);
  }

  .form-checkbox-disabled input[type='checkbox'] {
    position: absolute;
    opacity: 0;
  }

  .form-checkbox-disabled label::before { /* The new checkbox being drawn */
    content: '';
    width: 1.25rem;
    height: 1.25rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-small);
    margin-right: var(--spacing-800);
    position: relative;
    top: 5px;
    z-index: 0;
  }

  .form-checkbox-disabled label:hover::before,
  .form-checkbox-disabled input[type='checkbox']:hover + label::before {
    cursor: not-allowed;
  }

  .form-checkbox-disabled input[type='checkbox']:focus + label::before {
    outline: 1px solid var(--light);
  }

  .form-checkbox-disabled input[type='checkbox']:checked + label::before {
    content: '\002714';
    background-color: var(--light);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* 
  .form-checkbox-disabled input[type='checkbox']:checked:hover + label::before {
    background-color: var(--lightblue); 
  }
  */

  .form-checkbox-info-wrapper {
    display: block;
  }

  .form-checkbox-info-title {
    line-height: 24px;
    font-size: var(--fs-400);
    font-weight: var(--fw-semi-bold);
  }

  .form-checkbox-info-description {
    color: var(--dim);
    line-height: 21px;
    font-size: var(--fs-300);
    font-weight: var(--fw-light);
  }
  /* #endregion <------ */

  .input-text-count-container {
    width: 100%;
    height: auto;
    position: relative;
  }

  .input-text-count {
    width: auto;
    height: auto;
    color: var(--dim);
    font-size: var(--fs-300);
    font-weight: var(--fw-light);
    position: absolute;
    top: var(--spacing-200);
    right: var(--spacing-800);
  }

  .form-submit {
    width: 100%;
    padding: 0 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .form-submit-row {
    width: 100%;
    padding: 0 3rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: var(--spacing-800);
  }

  .form-footer {
    width: 100%;
    margin-top: var(--spacing-200);
    padding: 0 var(--spacing-200);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    color: var(--dim);
    font-size: var(--fs-300);
  }

  .form-footer a {
    color: var(--light);
    text-decoration: none;
  }

  .form-footer a:hover {
    text-decoration: underline;
    cursor: pointer;
  }

  .form-footer a:active {
    color: var(--light);
  }

  .form-footer a:visited {
    color: var(--light);
  }

  .form-footer-full {
    width: 100%;
    text-align: center;
  }

  .form-image-preview {
    width: 100%;
    border: 1px solid transparent;
    border-radius: var(--border-radius-small);
    /* transition: transform 0.3s ease; */
  }

  .form-image-preview:hover {
    border: 1px solid var(--border-color);
    cursor: pointer;
    /* transform: scale(1.1); */
  }

  .viewable-requirement-link-wrapper {
    width: 100%;
    color: var(--light);
  }

  .viewable-requirement-link,
  .viewable-requirement-link-disabled {
    color: var(--dim);
    font-size: var(--fs-300);
    font-weight: var(--fw-light);
  }

  .viewable-requirement-link:hover {
    color: var(--light);
    text-decoration: underline;
    cursor: pointer;
  }

  .required-field {
    color: var(--dim);
    font-size: var(--fs-200);
    font-weight: var(--fw-light);
  }

  .password-validation {
    width: 100%;
    margin-top: var(--spacing-200);
    padding: 0 var(--spacing-800);
    color: var(--dim);
    font-size: var(--fs-300);
    font-weight: var(--fw-light);
  }

/* #endregion <====== */


/* #region CROPPIE ======> */
  .file-input {
    display: none;
  }

  .cropped-images {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing-800);
  }

  .cropped-image-wrapper {
    flex: 1 1;
  }

  #cropped-image-square,
  #cropped-image-round {
    border: 1px solid transparent;
  }

  #cropped-image-square {
    border-radius: var(--border-radius-small);
  }

  #cropped-image-round {
    border-radius: 50%;
  }

  #cropped-image-square:hover,
  #cropped-image-round:hover {
    border-color: var(--border-color);
    cursor: pointer;
  }
/* #endregion <====== */


/* #region SLIDER ======> */

.slider {
  width: 100%;
  border: none;
  border-radius: var(--border-radius-small);
  position: relative;
  overflow: hidden;
}

.slider-inner {
  width: 100%;
  display: flex;
  transition: transform 0.5s ease;
}

.slider-item {
  min-width: 100%;
  height: 100%;
  transition: opacity 0.5s ease;
  aspect-ratio: 16/9;
}

.slider-item img,
.slider-item iframe {
  width: 100%;
  height: 100%;
  border: 1px solid transparent;
  border-radius: var(--border-radius-small);
  display: block;
  object-fit: contain;
}

.slider-item img:hover,
.slider-item iframe:hover {
  border: 1px solid var(--border-color);
  cursor: pointer;
}

.slider-button {
  background: var(--dark-50);
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  padding: var(--spacing-200);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--dim);
  font-size: var(--fs-700);
}

.slider-button:hover {
  background: var(--light);
  border: 1px solid var(--border-color);
  color: var(--dark);
  cursor: pointer;
}

.slider-button-prev {
  left: var(--spacing-800);
}

.slider-button-next {
  right: var(--spacing-800);
}

.slider-item-preview-container {
  width: 100%;
  margin-top: var(--spacing-200);
  display: flex;
  flex-wrap: nowrap;
  column-gap: var(--spacing-200);
}

.slider-preview {
  width: 100%;
  border: none;
  border-radius: var(--border-radius-small);
  position: relative;
  overflow: hidden;
}

.slider-preview-inner {
  width: 100%;
  margin-top: var(--spacing-200);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  column-gap: var(--spacing-200);
  transition: transform 0.5s ease-in-out;
}

.slider-item-preview {
  height: 4rem;
  transition: opacity 0.5s ease-in-out;
  aspect-ratio: 16/9;
}

.slider-item-preview img {
  border: 1px solid transparent;
  border-radius: var(--border-radius-small);
  width: 100%;
  height: 4rem;
  object-fit: cover;
}

.slider-item-preview img:hover {
  border: 1px solid var(--border-color);
  cursor: pointer;
}

/* #endregion <====== */


/* #region TOOLTIP ======> */

.tooltip {
  background: var(--dark);
  width: auto;
  z-index: 1000;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-small);
  /* padding: var(--spacing-s); */
  padding: .7rem;
  color: var(--light);
  font-size: var(--fs-300);
  white-space: nowrap;
  position: absolute;
  /* opacity: 0; */
  transition: opacity 0.3s;
  /* pointer-events: none; */
}

.tooltip.show {
  opacity: 1;
}

.tooltip-header-wrapper {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  column-gap: var(--spacing-400);
}

.tooltip-avatar-container {
  width: 36px;
  height: 36px;
}

.tooltip-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.tooltip-text-column-container {
  /* width: 100%; */
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  line-height: 1rem;
}

.tooltip-text-row-container {
  /* width: 100%; */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  line-height: 1rem;
  gap: var(--spacing-400);
}

.tooltip-display-name {
  color: var(--light);
  font-weight: var(--fw-heavy);
}

.tooltip-username {
  font-weight: var(--fw-regular);
}

.tooltip-pitch {
  margin: var(--spacing-400) 0;
  color: var(--light);
  font-weight: var(--fw-regular);
}

.tooltip-joined {
  margin-bottom: var(--spacing-200);
  font-weight: var(--fw-regular);
}

.tooltip-joined-date {
  margin-left: var(--spacing-400);
}

.tooltip-follow-count {
  color: var(--light);
  font-weight: var(--fw-heavy);
}

.tooltip-follow-text {
  padding-left: var(--spacing-400);
}

/* #endregion <====== */


/* #region BUTTONS ======> */

  /* #region Small ------> */
    .button-s,
    .button-s-disabled {
      background-color: var(--dark);
      width: 100%;
      height: var(--button-s-height);
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius-small);
      padding: 0 var(--spacing-800);
      color: var(--light);
      line-height: var(--button-s-height);
      font-size: var(--fs-400);
      font-weight: var(--fw-regular);
      text-align: center;
      text-decoration: none;
      flex: 1 1;
      display: inline-block;
    }

    .button-s:active {
      background-color: var(--light);
      color: var(--dark);
    }

    .button-s:visited {
      background-color: var(--dark);
      color: var(--light);
    }

    .button-s:hover {
      background-color: var(--light);
      color: var(--dark);
      text-decoration: underline;
      cursor: pointer;
    }

    .button-s-disabled {
      color: var(--dim);
    }

    .button-s-disabled:hover {
      cursor: not-allowed;
    }
  /* #endregion <------ */

  /* #region Medium ------> */
    .button-m,
    .button-m-disabled {
      background-color: var(--dark);
      width: 100%;
      height: var(--button-m-height);
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius-small);
      padding: 0 var(--spacing-800);
      color: var(--light);
      line-height: var(--button-m-height);
      font-size: var(--fs-500);
      font-weight: var(--fw-heavy);
      text-align: center;
      text-decoration: none;
      flex: 1 1;
      display: inline-block;
    }

    .button-m:active {
      background-color: var(--light);
      color: var(--dark);
    }

    .button-m:visited {
      background-color: var(--dark);
      color: var(--light);
    }

    .button-m:hover {
      background-color: var(--light);
      color: var(--dark);
      text-decoration: underline;
      cursor: pointer;
    }

    .button-m-disabled {
      color: var(--dim);
    }

    .button-m-disabled:hover {
      cursor: not-allowed;
    }
  /* #endregion <------ */

  /* #region Large ------> */
    .button-l,
    .button-l-disabled {
      background-color: var(--dark);
      width: 100%;
      height: var(--button-l-height);
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius-small);
      padding: 0 var(--spacing-800);
      color: var(--light);
      line-height: var(--button-l-height);
      font-size: var(--fs-600);
      font-weight: var(--fw-semi-bold);
      text-align: center;
      text-decoration: none;
      flex: 1 1;
      display: inline-block;
    }

    .button-l:active {
      background-color: var(--light);
      color: var(--dark);
    }

    .button-l:visited {
      background-color: var(--dark);
      color: var(--light);
    }

    .button-l:hover {
      background-color: var(--light);
      color: var(--dark);
      text-decoration: underline;
      cursor: pointer;
    }

    .button-l-disabled {
      color: var(--dim);
    }

    .button-l-disabled:hover {
      cursor: not-allowed;
    }
  /* #endregion <------ */

  /* #region Close/remove buttons ------> */
    .button-close {
      background-color: var(--dark);
      width: var(--button-s-height);
      height: var(--button-s-height);
      border: 1px solid transparent;
      border-radius: var(--border-radius-small);
      display: flex;
      justify-content: center;
      align-items: center;
      color: var(--light);
      font-size: var(--fs-600);
    }

    .button-close:hover {
      background-color: var(--light);
      color: var(--dark);
      cursor: pointer;
    }

    .button-remove,
    .button-remove-media {
      background-color: var(--dark-50);
      width: var(--button-s-height);
      height: var(--button-s-height);
      border: 1px solid transparent;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: var(--light);
      font-size: var(--fs-600);
    }

    .button-remove {
      position: absolute;
      top: var(--spacing-400);
      right: var(--spacing-400);
      z-index: 1;
    }

    .button-remove:hover,
    .button-remove-media:hover {
      background-color: var(--light);
      color: var(--dark);
      cursor: pointer;
    }
  /* #endregion <------ */

/* #endregion <====== */


/* #region MODIFIERS ======> */

  .half-width {
    width: calc(var(--container-max-width) * .5);
    min-width: var(--container-min-width);
  }

  .underline {
    text-decoration: underline;
  }

  .no-wrap {
    white-space: nowrap;
  }

  .wrap {
    overflow-wrap: anywhere;
    /* word-break: break-all; */
    white-space: normal;
  }

  /* #region Font color ------> */
    .color-light {
      color: var(--light);
    }

    .color-dim {
      color: var(--dim);
    }
  /* #endregion <------ */

  /* #region Font weight ------> */
    .fw-heavy {
      font-weight: var(--fw-heavy);
    }
  /* #endregion <------ */

  /* #region Borders ------> */
    .border {
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius-small);
    }
    
    .border-top-none {
      border-top: 0;
    }

    .border-bottom-none {
      border-bottom: 0;
    }

    .border-bottom {
      border-bottom: 1px solid var(--border-color);
    }
    
    .border-radius-none {
      border-radius: 0;
    }

    .border-radius-top-none {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }

    .border-radius-bottom-none {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }

    .border-radius-top-small {
      border-top-left-radius: var(--border-radius-small);
      border-top-right-radius: var(--border-radius-small);
    }

    .border-radius-bottom-small {
      border-bottom-left-radius: var(--border-radius-small);
      border-bottom-right-radius: var(--border-radius-small);
    }

    .border-radius-round {
      border-radius: 50%;
    }    
  /* #endregion <------ */

  /* #region Links ------> */
    .link-light,
    .link-light:visited,
    .link-light:active {
      color: var(--light);
      text-decoration: none;
    }

    .link-light:hover {
      color: var(--light);
      text-decoration: underline;
      cursor: pointer;
    }

    .link-dim,
    .link-dim:visited,
    .link-dim:active {
      color: var(--dim);
      text-decoration: none;
    }

    .link-dim:hover{
      color: var(--dim);
      text-decoration: underline;
      cursor: pointer;
    }

    .link-light-to-dark,
    .link-light-to-dark:visited,
    .link-light-to-dark:active {
      color: var(--light);
      text-decoration: none;
    }

    .link-light-to-dark:hover {
      color: var(--dark);
      text-decoration: underline;
      cursor: pointer;
    }
  /* #endregion <------ */

  /* #region Margin ------> */
    .margin-auto {
      margin: auto;
    }

    /* #region Top ---> */
      .margin-top-100 {
        margin-top: var(--spacing-100);
      }

      .margin-top-200 {
        margin-top: var(--spacing-200);
      }

      .margin-top-300 {
        margin-top: var(--spacing-300);
      }
      
      .margin-top-400 {
        margin-top: var(--spacing-400);
      }

      .margin-top-500 {
        margin-top: var(--spacing-500);
      }

      .margin-top-600 {
        margin-top: var(--spacing-600);
      }

      .margin-top-700 {
        margin-top: var(--spacing-700);
      }

      .margin-top-800 {
        margin-top: var(--spacing-800);
      }

      .margin-top-900 {
        margin-top: var(--spacing-900);
      }

      .margin-top-1000 {
        margin-top: var(--spacing-1000);
      }

      .margin-top-1100 {
        margin-top: var(--spacing-1100);
      }

      .margin-top-1200 {
        margin-top: var(--spacing-1200);
      }
      
      .margin-top-1300 {
        margin-top: var(--spacing-1300);
      }

      .margin-top-1400 {
        margin-top: var(--spacing-1400);
      }

      .margin-top-1500 {
        margin-top: var(--spacing-1500);
      }

      .margin-top-1600 {
        margin-top: var(--spacing-1600);
      }
    /* #endregion <--- */
  
    /* #region Right ---> */
      .margin-right-100 {
        margin-right: var(--spacing-100);
      }

      .margin-right-200 {
        margin-right: var(--spacing-200);
      }

      .margin-right-300 {
        margin-right: var(--spacing-300);
      }
      
      .margin-right-400 {
        margin-right: var(--spacing-400);
      }

      .margin-right-500 {
        margin-right: var(--spacing-500);
      }

      .margin-right-600 {
        margin-right: var(--spacing-600);
      }

      .margin-right-700 {
        margin-right: var(--spacing-700);
      }

      .margin-right-800 {
        margin-right: var(--spacing-800);
      }

      .margin-right-900 {
        margin-right: var(--spacing-900);
      }

      .margin-right-1000 {
        margin-right: var(--spacing-1000);
      }

      .margin-right-1100 {
        margin-right: var(--spacing-1100);
      }

      .margin-right-1200 {
        margin-right: var(--spacing-1200);
      }
    /* #endregion <--- */

    /* #region Bottom ---> */
      .margin-bottom-100 {
        margin-bottom: var(--spacing-100);
      }

      .margin-bottom-200 {
        margin-bottom: var(--spacing-200);
      }

      .margin-bottom-300 {
        margin-bottom: var(--spacing-300);
      }
      
      .margin-bottom-400 {
        margin-bottom: var(--spacing-400);
      }

      .margin-bottom-500 {
        margin-bottom: var(--spacing-500);
      }

      .margin-bottom-600 {
        margin-bottom: var(--spacing-600);
      }

      .margin-bottom-700 {
        margin-bottom: var(--spacing-700);
      }

      .margin-bottom-800 {
        margin-bottom: var(--spacing-800);
      }

      .margin-bottom-900 {
        margin-bottom: var(--spacing-900);
      }

      .margin-bottom-1000 {
        margin-bottom: var(--spacing-1000);
      }

      .margin-bottom-1100 {
        margin-bottom: var(--spacing-1100);
      }

      .margin-bottom-1200 {
        margin-bottom: var(--spacing-1200);
      }
    /* #endregion <--- */

    /* #region Left ---> */
      .margin-left-100 {
        margin-left: var(--spacing-100);
      }

      .margin-left-200 {
        margin-left: var(--spacing-200);
      }

      .margin-left-300 {
        margin-left: var(--spacing-300);
      }
      
      .margin-left-400 {
        margin-left: var(--spacing-400);
      }

      .margin-left-500 {
        margin-left: var(--spacing-500);
      }

      .margin-left-600 {
        margin-left: var(--spacing-600);
      }

      .margin-left-700 {
        margin-left: var(--spacing-700);
      }

      .margin-left-800 {
        margin-left: var(--spacing-800);
      }

      .margin-left-900 {
        margin-left: var(--spacing-900);
      }

      .margin-left-1000 {
        margin-left: var(--spacing-1000);
      }

      .margin-left-1100 {
        margin-left: var(--spacing-1100);
      }

      .margin-left-1200 {
        margin-left: var(--spacing-1200);
      }
    /* #endregion <--- */
  
    /* #region Horizontal/vertical ---> */
      .margin-horizontal-800 {
        margin-top: var(--spacing-800);
        margin-bottom: var(--spacing-800);
      }

      .margin-horizontal-1200 {
        margin-top: var(--spacing-1200);
        margin-bottom: var(--spacing-1200);
      }

      .margin-vertical-800 {
        margin-left: var(--spacing-800);
        margin-right: var(--spacing-800);
      }

      .margin-vertical-1200 {
        margin-left: var(--spacing-1200);
        margin-right: var(--spacing-1200);
      }
    /* #endregion <--- */
  /* #endregion <------ */

  /* #region Padding ------> */
    .padding-800 {
      padding: var(--spacing-800);
    }

    .padding-1200 {
      padding: var(--spacing-1200);
    }

    /* #region Top ---> */
      .padding-top-100 {
        padding-top: var(--spacing-100);
      }

      .padding-top-200 {
        padding-top: var(--spacing-200);
      }

      .padding-top-300 {
        padding-top: var(--spacing-300);
      }
      
      .padding-top-400 {
        padding-top: var(--spacing-400);
      }

      .padding-top-500 {
        padding-top: var(--spacing-500);
      }

      .padding-top-600 {
        padding-top: var(--spacing-600);
      }

      .padding-top-700 {
        padding-top: var(--spacing-700);
      }

      .padding-top-800 {
        padding-top: var(--spacing-800);
      }

      .padding-top-900 {
        padding-top: var(--spacing-900);
      }

      .padding-top-1000 {
        padding-top: var(--spacing-1000);
      }

      .padding-top-1100 {
        padding-top: var(--spacing-1100);
      }

      .padding-top-1200 {
        padding-top: var(--spacing-1200);
      }
    /* #endregion <--- */

    /* #region Right ---> */
      .padding-right-100 {
        padding-right: var(--spacing-100);
      }

      .padding-right-200 {
        padding-right: var(--spacing-200);
      }

      .padding-right-300 {
        padding-right: var(--spacing-300);
      }
      
      .padding-right-400 {
        padding-right: var(--spacing-400);
      }

      .padding-right-500 {
        padding-right: var(--spacing-500);
      }

      .padding-right-600 {
        padding-right: var(--spacing-600);
      }

      .padding-right-700 {
        padding-right: var(--spacing-700);
      }

      .padding-right-800 {
        padding-right: var(--spacing-800);
      }

      .padding-right-900 {
        padding-right: var(--spacing-900);
      }

      .padding-right-1000 {
        padding-right: var(--spacing-1000);
      }

      .padding-right-1100 {
        padding-right: var(--spacing-1100);
      }

      .padding-right-1200 {
        padding-right: var(--spacing-1200);
      }
    /* #endregion <--- */

    /* #region Bottom ---> */
      .padding-bottom-100 {
        padding-bottom: var(--spacing-100);
      }

      .padding-bottom-200 {
        padding-bottom: var(--spacing-200);
      }

      .padding-bottom-300 {
        padding-bottom: var(--spacing-300);
      }
      
      .padding-bottom-400 {
        padding-bottom: var(--spacing-400);
      }

      .padding-bottom-500 {
        padding-bottom: var(--spacing-500);
      }

      .padding-bottom-600 {
        padding-bottom: var(--spacing-600);
      }

      .padding-bottom-700 {
        padding-bottom: var(--spacing-700);
      }

      .padding-bottom-800 {
        padding-bottom: var(--spacing-800);
      }

      .padding-bottom-900 {
        padding-bottom: var(--spacing-900);
      }

      .padding-bottom-1000 {
        padding-bottom: var(--spacing-1000);
      }

      .padding-bottom-1100 {
        padding-bottom: var(--spacing-1100);
      }

      .padding-bottom-1200 {
        padding-bottom: var(--spacing-1200);
      }
    /* #endregion <--- */

    /* #region Left ---> */
      .padding-left-100 {
        padding-left: var(--spacing-100);
      }

      .padding-left-200 {
        padding-left: var(--spacing-200);
      }

      .padding-left-300 {
        padding-left: var(--spacing-300);
      }
      
      .padding-left-400 {
        padding-left: var(--spacing-400);
      }

      .padding-left-500 {
        padding-left: var(--spacing-500);
      }

      .padding-left-600 {
        padding-left: var(--spacing-600);
      }

      .padding-left-700 {
        padding-left: var(--spacing-700);
      }

      .padding-left-800 {
        padding-left: var(--spacing-800);
      }

      .padding-left-900 {
        padding-left: var(--spacing-900);
      }

      .padding-left-1000 {
        padding-left: var(--spacing-1000);
      }

      .padding-left-1100 {
        padding-left: var(--spacing-1100);
      }

      .padding-left-1200 {
        padding-left: var(--spacing-1200);
      }
    /* #endregion <--- */

    /* #region Horizontal/vertical ---> */
      .padding-horizontal-800 {
        padding-top: var(--spacing-800);
        padding-bottom: var(--spacing-800);
      }

      .padding-horizontal-1200 {
        padding-top: var(--spacing-1200);
        padding-bottom: var(--spacing-1200);
      }

      .padding-vertical-800 {
        padding-left: var(--spacing-800);
        padding-right: var(--spacing-800);
      }

      .padding-vertical-1200 {
        padding-left: var(--spacing-1200);
        padding-right: var(--spacing-1200);
      }
    /* #endregion <--- */
  /* #endregion <------ */

  /* #region Flex rows ------> */
    .flex-row {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }

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

    .flex-row-center {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
    }

    .flex-row-center-gap {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      gap: var(--spacing-800);
    }
  /* #endregion <------ */

/* #endregion <====== */