@charset "UTF-8";
/******************************************************************

Stylesheet: Main Stylesheet

******************************************************************/
@layer reset,vendor,helpers,typography,base, nav, theme;
/* =============================================================================
  Helpers
========================================================================== */
/* =============================================================================
  Browser Resets - https://piccalil.li/blog/a-modern-css-reset/
========================================================================== */
@layer reset {
  /* Box sizing rules */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  /* Remove default margin and padding */
  blockquote,
  body,
  dd,
  dl,
  dt,
  fieldset,
  figure,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  hr,
  html,
  iframe,
  legend,
  li,
  ol,
  p,
  pre,
  ul {
    margin: 0;
    padding: 0;
  }
  /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
  ul[role=list],
  ol[role=list] {
    list-style: none;
  }
  /* Prevents enlarging of paragraph text in landscape mode on devices */
  html {
    font-size: 100%;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    interpolate-size: allow-keywords;
  }
  /* Set core root defaults */
  html:focus-within {
    scroll-behavior: smooth;
  }
  /* Set core body defaults */
  body {
    margin: 0;
    overflow: auto;
    min-height: 100vh;
    text-rendering: optimizeSpeed;
    line-height: 1.5;
  }
  /* A elements that don't have a class get default styles */
  a:not([class]) {
    -webkit-text-decoration-skip: ink;
    text-decoration-skip-ink: auto;
  }
  /* Make images easier to work with */
  img,
  picture {
    max-width: 100%;
    display: block;
    height: auto;
  }
  /* Inherit fonts for inputs and buttons */
  input,
  button,
  textarea,
  select {
    font: inherit;
  }
  /* List stuff */
  ul,
  ol {
    list-style: none;
  }
  /* Table Stuff */
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  /* Pre Stuff */
  pre {
    white-space: pre-wrap;
  }
  /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
  @media (prefers-reduced-motion: reduce) {
    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;
    }
  }
}
/* =============================================================================
  Utils
========================================================================== */
/* =============================================================================
  Text
========================================================================== */
.text-center {
  justify-content: center;
}

.text-right {
  justify-content: right;
}

/* =============================================================================
  colors
========================================================================== */
/* =============================================================================
  color
========================================================================== */
.primary {
  color: var(--primary);
}

.secondary {
  color: var(--secondary);
}

.accent {
  color: var(--accent);
}

.black {
  color: var(--black);
}

.dark {
  color: var(--dark);
}

.medium {
  color: var(--medium);
}

.medium-2 {
  color: var(--medium-2);
}

.light {
  color: var(--light);
}

.white {
  color: var(--white);
}

.error {
  color: var(--error);
}

/* =============================================================================
  Background color
========================================================================== */
.bg-primary {
  background-color: var(--primary);
}

.bg-secondary {
  background-color: var(--secondary);
}

.bg-accent {
  background-color: var(--accent);
}

.bg-black {
  background-color: var(--black);
}

.bg-dark {
  background-color: var(--dark);
}

.bg-medium {
  background-color: var(--medium);
}

.bg-light {
  background-color: var(--light);
}

.bg-white {
  background-color: var(--white);
}

@layer helpers {
  /* =============================================================================
    Icons
  ========================================================================== */
  .icon {
    display: block;
    height: 1em;
  }
  .icon-wrapper {
    --icon-color: var(--color-primary);
    display: flex;
    flex-flow: row wrap;
    gap: 0.6em;
    font-size: var(--icon-size, 20px);
  }
  .icon-wrapper > * {
    color: var(--icon-color);
    height: var(--icon-size);
    width: auto;
  }
  .icon-wrapper svg {
    fill: currentColor;
  }
  .icon-wrapper a svg {
    fill: currentColor;
  }
  .icon-wrapper.social {
    --icon-size: 34px;
  }
  .icon-wrapper.social a {
    transition: color 50ms;
  }
  .icon-wrapper:has(> *:hover) > *:not(:hover) {
    --icon-color: var(--color-secondary);
  }
}
/******************************************************************

Stylesheet: Mixins & Constants Stylesheet

This is where you can take advantage of Sass' great features:
Mixins & Constants.

******************************************************************/
/*********************
TOOLS
*********************/
.image-replacement {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

/*********************
COLORS
*********************/
/* =============================================================================
Padding
========================================================================== */
/* =============================================================================
Aspect Ratio
========================================================================== */
/* =============================================================================
Clearfix
========================================================================== */
/* =============================================================================
Site Margins
========================================================================== */
/*********************
TYPOGRAPHY
*********************/
span.amp {
  font-family: Baskerville, "Goudy Old Style", Palatino, "Book Antiqua", serif !important;
  font-style: italic;
}

/* =============================================================================
	Fluid Type
========================================================================== */
/*
$min_width: map-get($breakpoints, medium)
$max_width: map-get($breakpoints, xxlarge)
$min_font: 16px;
$max_font: 24px;

.large-fluid {
  @include fluid-type($min_width, $max_width, $min_font, $max_font);
}
*/
/* =============================================================================
	Fluid Padding
========================================================================== */
/*
$direction: vertical,horizontal,both;
$min-vw: map-get($breakpoints, medium)
$max-vw: map-get($breakpoints, xxlarge);
$min-padding: 16px;
$max-padding: 38px;


*/
/* =============================================================================
	Fluid Attribute
========================================================================== */
/*
$attribute: margin-bottom;
$min-vw: map-get($breakpoints, medium);
$max-vw: map-get($breakpoints, xxlarge);
$min-value: 16px;
$max-value: 38px;


*/
/*********************
CSS3 GRADIENTS.
*********************/
/* @include css-gradient(#dfdfdf,#f8f8f8); */
/* =============================================================================
	Burgers
========================================================================== */
/* =============================================================================
  Spacing
========================================================================== */
.mt {
  margin-top: var(--layout-spacing);
}
.mt-sm {
  margin-top: calc(var(--layout-spacing) * 0.5);
}
.mt-lg {
  margin-top: calc(var(--layout-spacing) * 1.5);
}

.mb {
  margin-bottom: var(--layout-spacing);
}
.mb-sm {
  margin-bottom: calc(var(--layout-spacing) * 0.5);
}
.mb-lg {
  margin-bottom: calc(var(--layout-spacing) * 1.5);
}

.pt {
  padding-top: var(--layout-spacing);
}
.pt-sm {
  padding-top: calc(var(--layout-spacing) * 0.5);
}
.pt-lg {
  padding-top: calc(var(--layout-spacing) * 1.5);
}

.pb {
  padding-bottom: var(--layout-spacing);
}
.pb-sm {
  padding-bottom: calc(var(--layout-spacing) * 0.5);
}
.pb-lg {
  padding-bottom: calc(var(--layout-spacing) * 1.5);
}

.pad {
  padding: var(--layout-spacing);
}
.pad-sm {
  padding: calc(var(--layout-spacing) * 0.5);
}
.pad-lg {
  padding: calc(var(--layout-spacing) * 1.5);
}

.mt-05 {
  margin-top: 0.5rem;
}

.mt-1 {
  margin-top: 1rem;
}

.mb-1 {
  margin-bottom: 1rem;
}

.nmt {
  margin-top: 0 !important;
}

.nmb {
  margin-bottom: 0 !important;
}

.npb {
  padding-bottom: 0 !important;
}

@layer typography, nav, theme;
/* =============================================================================
  Settings
========================================================================== */
/* =============================================================================
  Breakpoints & Flexbox Grid (http://sassflexboxgrid.com/views/classes.html)
========================================================================== */
/* =============================================================================
    CSS Variables
  ========================================================================== */
:root {
  --primitives-color-brand-pink:hsl(0, 71%, 55%);
  --primitives-color-brand-blue:hsl(210, 71%, 55%);
  --primitives-color-brand-darkblue:hsl(207, 92%, 19%);
  --primitives-color-brand-orange:hsl(42, 100%, 70%);
  --primitives-color-brand-green:hsl(145, 34%, 55%);
  --primitives-color-grey-100:hsl(0, 0%, 100%);
  --primitives-color-grey-200:hsl(0, 0%, 98%);
  --primitives-color-grey-300:hsl(0, 0%, 85%);
  --primitives-color-grey-400:hsl(212, 5%, 64%);
  --primitives-color-grey-500:hsl(212, 6%, 46%);
  --primitives-color-grey-700:#2b2b2b;
  --primitives-color-grey-700:hsl(0, 0%, 17%);
  --primitives-color-grey-800:#2b2b2b;
  --primitives-color-grey-900:hsl(0, 0%, 0%);
  --numbers-spacing-100: 0.125rem; /* 2px */
  --numbers-spacing-200: 0.25rem; /* 4px */
  --numbers-spacing-300: 0.5rem; /* 8px */
  --numbers-spacing-400: 1rem; /* 16px */
  --numbers-spacing-500: 2rem; /* 32px */
  --numbers-spacing-600: 3rem; /* 48px */
  --numbers-spacing-700: 4rem; /* 64px */
  --numbers-spacing-800: 5rem; /* 80px */
  --numbers-spacing-900: 6rem; /* 96px */
  --numbers-spacing-1000: 7rem; /* 112px */
  --primary: var(--primitives-color-brand-blue);
  --secondary: var(--primitives-color-brand-darkblue);
  --accent: var(--primitives-color-brand-pink);
  --white: var(--primitives-color-grey-100);
  --light: var(--primitives-color-grey-200);
  --medium: var(--primitives-color-grey-300);
  --medium-2: var(--primitives-color-grey-400);
  --dark: var(--primitives-color-grey-700);
  --black: var(--primitives-color-grey-900);
  --primary-50: hsl(from var(--primary) h s l / 50%);
  --error: var(--accent);
  --warning: var(--primitives-color-brand-orange);
  --success: var(--primitives-color-brand-green);
  --spacing-xxs: var(--numbers-spacing-100);
  --spacing-xs: var(--numbers-spacing-200);
  --spacing-sm: var(--numbers-spacing-300);
  --spacing-md: var(--numbers-spacing-400);
  --spacing-lg: var(--numbers-spacing-500);
  --spacing-xl: var(--numbers-spacing-600);
  --spacing-2xl: var(--numbers-spacing-700);
  --spacing-3xl: var(--numbers-spacing-800);
  --font-family-body: Inter, sans-serif;
  --font-size-100: .5rem; /* 8px */
  --font-size-200: .75rem; /* 12px */
  --font-size-300: .875rem; /* 14px */
  --font-size-400: 1rem; /* 16px */
  --font-size-500: 1.1rem; /* 17.6px */
  --font-size-600: 1.2rem; /* 19.2px */
  --font-size-700: 1.3rem; /* 20.8px */
  --font-size-800: 1.4rem; /* 22.4px */
  --font-size-900: 1.5rem; /* 24px */
  --font-weight-light: 300;
  --font-weight-regular: 400 ;
  --font-weight-semibold: 500;
  --font-weight-bold: 600;
  --br-xs: var(--numbers-spacing-200);
  --br-sm: var(--numbers-spacing-300);
  --br-md: var(--numbers-spacing-400);
  --br-lg: var(--numbers-spacing-600);
  --nav: var(--primitives-color-grey-100);
  --nav-icon: var(--white);
  --nav-active: var(--secondary);
  --nav-hover: var(--white);
  --nav-icon-hover: var(--secondary);
  --input-clr: var(--black);
  --input-label-clr: var(--dark);
  --input-clr-disabled: var(--primitives-color-grey-500);
  --input-clr-bg-disabled: var(--primitives-color-grey-300);
  --input-clr-placeholder: var(--primitives-color-grey-500);
  --input-clr-error: var(--accent);
  --input-clr-success: var(--accent);
  --input-clr-bg: var(--white);
  --input-padding-block: var(--numbers-spacing-300);
  --input-padding-inline: var(--numbers-spacing-400);
  --input-fs: var(--font-size-400);
  --input-line-height: 1.2;
  --input-br: var(--br-xs);
  --input-focus-clr: 1px 1px 6px var(--medium-2);
  --sidebar-icon-size: 1.875rem;
  --btn-fs: var(--font-size-300);
  --btn-fw: var(--font-weight-semibold);
  --btn-pad-block: var(--spacing-sm);
  --btn-pad-inline: var(--spacing-md);
  --btn-br: var(--br-xs);
  --btn-clr: var(--primary);
  --btn-clr-text: var(--white);
  --btn-clr-border: transparent;
  --btn-hover-clr: var(--secondary);
  --btn-hover-clr-text: var(--white);
  --btn-hover-clr-border: transparent;
  --btn-active-clr-border: var(--black);
  /* =============================================================================
    colors
  ========================================================================== */
  --color-primary: #023979;
  --color-secondary: #800040;
  --color-accent: #6CAEDF;
  --color-accent: #6CAEDF;
  --color-body-bg: #D8D8D8;
  --color-white: #ffffff;
  --color-black: #323232;
  --color-light: #F6F6F6;
  --color-medium: #9D9D9D;
  --color-dark: #555555;
  --color-info: #e86b03;
  --color-success: #419b01;
  --color-warning: #ffbd08;
  --color-error: #ed0059;
  --color-gradient: transparent linear-gradient(to right, var(--color-primary) 0%, var(--color-accent) 100%) 0% 0% no-repeat padding-box;
  /* =============================================================================
    Layout
  ========================================================================== */
  --layout-body-bg: var(--color-light);
  --layout-pad-inline: 1rem;
  --layout-max-width: 1280px;
  --layout-breakout-max-width: 1500px;
  --layout-breakout-size: calc((var(--layout-breakout-max-width) - var(--layout-max-width)) / 2);
  --layout-anchor-offset: 5rem;
  --layout-border-radius: 16px;
  --header-bg: var(--color-gradient);
  --header-height: 4.375rem;
  --header-logo-height: 38px;
  --header-padding: 16px;
  --header-burger-color: var(--color-dark);
  --hero-bg-color: var(--color-secondary);
  --hero-padding: calc(var(--layout-spacing) * 1.5);
  --hero-overline-color: var(--color-accent);
  /* =============================================================================
    Spacing
  ========================================================================== */
  --layout-spacing: 2rem;
  /* =============================================================================
    Forms
  ========================================================================== */
  --form-input-radius: 16px;
  --form-focus-outline: 1px solid var(--color-dark);
  --form-disabled-bg-color: var(--color-light);
  /* =============================================================================
    Components
  ========================================================================== */
  --layout-grid-gap: clamp(4px,1.56vw,30px);
  --element-block-spacing: clamp(20px,1.8vw,36px);
  --element-box-padding: 1rem;
  --navbar-link-color: var(--color-black);
  --navbar-link-current-color: var(--color-primary);
  /* =============================================================================
  Typography
  // vw calculated by ([font size] / [design width]) * 100. eg (40/1920) * 100 = 2em
  ========================================================================== */
  --typography-header-font: "Roboto",sans-serif;
  --typography-header-weight: normal;
  --typography-header-letter-spacing: -0.03em;
  --typography-header-line-height: 1.2;
  --typography-paragraph-margin: 1rem;
  --typography-h1-size: clamp(20px,2.08vw,40px);
  --typography-h2-size: clamp(18px,1.46vw,28px);
  --typography-h3-size: clamp(17px,1.25vw,24px);
  --typography-h4-size: clamp(17px,1.15vw,22px);
  --typography-h5-size: clamp(16px,1.04vw,20px);
  --typography-h6-size: clamp(16px,1.04vw,20px);
  --typography-header-margin-bottom: 0.5em;
  --typography-paragraph-size: clamp(1rem,1.04vw,1.25rem);
  --typography-quote-size: clamp(22px,1.56vw,30px);
  --typography-quote-cite-size: clamp(14px,1.04vw,20px);
  --typography-body-font: "Roboto",sans-serif;
  --typography-body-weight: normal;
  --typography-body-size: 100%;
  --typography-body-line-height: 1.2;
  /* =============================================================================
    Animations
  ========================================================================== */
  --animation-offset: 100px;
  --animation-scale: 0.9;
  --animation-transition: transform 500ms ease-out, opacity 500ms ease-out, box-shadow 750ms ease-out;
  /* =============================================================================
    General
  ========================================================================== */
  --box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, 0.25);
  --box-shadow-hidden: 0px 2px 2px 0px rgba(0, 0, 0, 0);
}

/* =============================================================================
  Responsive Vars
========================================================================== */
@media (min-width: 64rem) {
  :root {
    --layout-body-bg: var(--color-body-bg);
    --header-logo-height: 48px;
    --header-height: auto;
    --header-padding: clamp(16px,2.86vw,55px);
    --layout-anchor-offset: 10rem;
  }
}
@media (min-width: 76.5625rem) {
  :root {
    --header-logo-height: 65px;
    --layout-spacing: 3rem;
  }
}
/* =============================================================================
  Debug
  ========================================================================== */
/* =============================================================================
  View transitions
========================================================================== */
/* =============================================================================
  Layout
========================================================================== */
body {
  font-size: var(--font-size-300);
  font-family: Inter, sans-serif;
  font-weight: var(--font-weight-regular);
  line-height: 1.1;
  margin: 0;
  overscroll-behavior: none;
}

body {
  overflow-x: clip;
}
body.is-loaded {
  opacity: 1;
}
body.is-loading #main {
  z-index: 1;
}
body.is-loading #main:before {
  display: block;
  position: fixed;
  inset: 0;
  content: "";
  background-color: hsl(from var(--light) h s l/0.5);
}
body:before {
  content: "xs";
  display: none;
  visibility: hidden;
}
@media (min-width: 49rem) {
  body:before {
    content: "sm";
  }
}
@media (min-width: 64.9375rem) {
  body:before {
    content: "md";
  }
}
@media (min-width: 76.5625rem) {
  body:before {
    content: "lg";
  }
}
@media (min-width: 107.25rem) {
  body:before {
    content: "xl";
  }
}

/* =============================================================================
  MacOS scrollbar
========================================================================== */
html:not(.macos) .is-mac {
  display: none;
}
html.macos .is-not-mac {
  display: none;
}

/* =============================================================================
  Alignment
========================================================================== */
.items-right {
  justify-items: end;
}

/* =============================================================================
  Downloads
========================================================================== */
[data-external-url] {
  cursor: pointer;
}

/* =============================================================================
  Page Layout
========================================================================== */
#main {
  --inline-margin: var(--spacing-md);
  --gap: var(--spacing-md);
  background-color: var(--light);
  flex-grow: 1;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--gap);
  align-items: start;
}
#main > .inner {
  display: grid;
  row-gap: var(--gap);
  grid-template-columns: [fullwidth-start] var(--inline-margin) [content-start] minmax(0, 1fr) [content-end] var(--inline-margin) [fullwidth-end];
}
#main > .inner > :not(.breakout, .fullwidth) {
  grid-column: content;
}
#main > .inner > .fullwidth,
#main > .inner > .page-header {
  grid-column: fullwidth;
  padding-inline: var(--inline-margin);
}

/* =============================================================================
  Login
========================================================================== */
body.login .wrapper, body:has(.form-wrapper-2fa) .wrapper, body.password-reset .wrapper {
  grid-template-columns: 1fr;
}
body.login #main, body:has(.form-wrapper-2fa) #main, body.password-reset #main {
  grid-template-columns: unset;
  width: 100%;
  place-items: center;
}
body.login .form-wrapper, body:has(.form-wrapper-2fa) .form-wrapper, body.password-reset .form-wrapper {
  margin: 0 auto;
  max-width: min(100% - var(--inline-margin) * 2, 400px);
  width: 100%;
}

.twofa-input-wrapper {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.twofa-input {
  width: 40px;
  height: 50px;
  font-size: 24px;
  text-align: center;
  border: 1px solid var(--medium);
  border-radius: 5px;
  outline: none;
  transition: border-color 0.2s;
  padding: 4px;
}

.twofa-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 5px rgba(0, 115, 170, 0.5);
}

/* =============================================================================
  Page Header
========================================================================== */
.page-header {
  padding-block: var(--spacing-md);
  display: flex;
  gap: var(--spacing-lg);
  align-items: center;
  border-bottom: 1px solid var(--medium);
  flex-wrap: wrap;
}
.page-header:first-child {
  z-index: 5;
}
.page-header.stick {
  position: sticky;
  top: 0;
  background-color: var(--light);
  z-index: 2;
  padding-inline: var(--inline-margin);
}
.page-header + .page-header {
  margin-top: calc(var(--gap) * -1);
}
.page-header .end {
  flex-grow: 1;
  justify-content: end;
}
.page-header .title {
  color: var(--secondary);
  margin-bottom: 0;
}
.page-header .filter-wrapper {
  flex-basis: 100%;
}
.page-header #item-name {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

#title-lock {
  font-size: 0.5em;
  color: var(--error);
}

.row {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
}
.row.row--separator > span:not(:last-child):after {
  margin-inline-start: var(--spacing-md);
  content: "|";
}
.row.owner-info {
  white-space: nowrap;
  gap: var(--spacing-sm);
}

.actions {
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  flex-flow: row wrap;
}
.actions .button {
  --btn-clr: var(--primary-50);
  --btn-clr-text: var(--secondary);
}

.ref {
  font-size: 0.75em;
  color: var(--medium-2);
}

/* =============================================================================
  Item
========================================================================== */
.has-icon {
  display: flex;
  align-items: center;
}
.has-icon > *:not(:first-child) {
  margin-left: var(--spacing-sm);
}
.has-icon svg {
  fill: currentColor;
  height: 1.2em;
  max-width: 2em;
}

/* =============================================================================
  Edit screen
========================================================================== */
.col-primary-image {
  grid-column: 1/13;
}

/* =============================================================================
  Content Grid
========================================================================== */
/* =============================================================================
  // Flow
========================================================================== */
.flow {
  display: grid;
  gap: var(--layout-flow-gap, 20px);
  grid-template-columns: minmax(0, 1fr);
}
.flow.flow--start {
  align-content: start;
}

/* =============================================================================
  Scroll 
========================================================================== */
[id] {
  scroll-margin-top: var(--layout-header-height, 2rem);
}

/* =============================================================================
    Sticky
  ========================================================================== */
.is-sticky {
  position: sticky;
  z-index: 30;
}

/* =============================================================================
    Credits
  ========================================================================== */
.indigo-credits {
  display: block;
}
.indigo-credits img {
  display: inline-block;
}

/* =============================================================================
  Media Queries
========================================================================== */
@media (min-width: 64.9375rem) {
  .reduced-width {
    width: 66.67%;
    margin-inline: auto;
  }
}
@media (width <= 48rem) {
  html {
    overflow-x: clip;
  }
}
@media (width > 48rem) {
  #main {
    --inline-margin: var(--spacing-lg);
    --gap: var(--spacing-lg);
    gap: 0;
  }
  .wrapper {
    min-height: 100svh;
    display: grid;
    grid-template-columns: auto 1fr;
  }
  /* =============================================================================
    Edit screen
  ========================================================================== */
  .col-primary-image {
    grid-column: 7/13;
    grid-row: 1/4;
  }
  .col-primary-image .image-uploader {
    min-height: 100%;
    aspect-ratio: unset;
  }
}
@media (width > 75.5625rem) {
  /* =============================================================================
    Edit screen
  ========================================================================== */
  .col-primary-image {
    grid-column: 10/13;
    grid-row: 1/4;
  }
}
/* =============================================================================
  Vendors
========================================================================== */
@layer vendor {
  .nice-select {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    background-color: #fff;
    border-radius: 5px;
    border: solid 1px #e8e8e8;
    box-sizing: border-box;
    clear: both;
    cursor: pointer;
    display: block;
    float: left;
    font-family: inherit;
    font-size: 14px;
    font-weight: normal;
    height: 38px;
    line-height: 36px;
    outline: none;
    padding-left: 18px;
    padding-right: 30px;
    position: relative;
    text-align: left !important;
    -webkit-user-select: none;
    user-select: none;
    white-space: nowrap;
    width: auto;
  }
  .nice-select:hover {
    border-color: hsl(0, 0%, 85.9803921569%);
  }
  .nice-select:active,
  .nice-select.open,
  .nice-select:focus {
    border-color: #999;
  }
  .nice-select:after {
    border-bottom: 2px solid #999;
    border-right: 2px solid #999;
    content: "";
    display: block;
    height: 5px;
    margin-top: -4px;
    pointer-events: none;
    position: absolute;
    right: 12px;
    top: 50%;
    transform-origin: 66% 66%;
    transform: rotate(45deg);
    transition: all 0.15s ease-in-out;
    width: 5px;
  }
  .nice-select.open:after {
    transform: rotate(-135deg);
  }
  .nice-select.open .nice-select-dropdown {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1) translateY(0);
  }
  .nice-select.disabled {
    border-color: rgb(237.1, 237.1, 237.1);
    color: #999;
    pointer-events: none;
  }
  .nice-select.disabled:after {
    border-color: #ccc;
  }
  .nice-select.wide {
    width: 100%;
  }
  .nice-select.wide .nice-select-dropdown {
    left: 0 !important;
    right: 0 !important;
  }
  .nice-select.right {
    float: right;
  }
  .nice-select.right .nice-select-dropdown {
    left: auto;
    right: 0;
  }
  .nice-select.small {
    font-size: 12px;
    height: 36px;
    line-height: 34px;
  }
  .nice-select.small:after {
    height: 4px;
    width: 4px;
  }
  .nice-select.small .option {
    line-height: 34px;
    min-height: 34px;
  }
  .nice-select .nice-select-dropdown {
    margin-top: 4px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);
    pointer-events: none;
    position: absolute;
    top: 100%;
    left: 0;
    transform-origin: 50% 0;
    transform: scale(0.75) translateY(19px);
    transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    z-index: 9;
    opacity: 0;
  }
  .nice-select .list {
    border-radius: 5px;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0;
    max-height: 210px;
    overflow-y: auto;
  }
  .nice-select .list:hover .option:not(:hover) {
    background-color: rgba(0, 0, 0, 0) !important;
  }
  .nice-select .option {
    cursor: pointer;
    font-weight: 400;
    line-height: 40px;
    list-style: none;
    outline: none;
    padding-left: 18px;
    padding-right: 29px;
    text-align: left;
    transition: all 0.2s;
  }
  .nice-select .option:hover,
  .nice-select .option.focus,
  .nice-select .option.selected.focus {
    background-color: #f6f6f6;
  }
  .nice-select .option.selected {
    font-weight: bold;
  }
  .nice-select .option.disabled {
    background-color: rgba(0, 0, 0, 0);
    color: #999;
    cursor: default;
  }
  .nice-select .extra {
    float: right;
  }
  .nice-select .optgroup {
    font-weight: bold;
  }
  .no-csspointerevents .nice-select .nice-select-dropdown {
    display: none;
  }
  .no-csspointerevents .nice-select.open .nice-select-dropdown {
    display: block;
  }
  .nice-select .list::-webkit-scrollbar {
    width: 0;
  }
  .nice-select .has-multiple {
    white-space: inherit;
    height: auto;
    padding: 7px 12px;
    min-height: 36px;
    line-height: 22px;
  }
  .nice-select .has-multiple span.current {
    border: 1px solid #ccc;
    background: #eee;
    padding: 0 10px;
    border-radius: 3px;
    display: inline-block;
    line-height: 24px;
    font-size: 14px;
    margin-bottom: 3px;
    margin-right: 3px;
  }
  .nice-select .has-multiple .multiple-options {
    display: block;
    line-height: 24px;
    padding: 0;
  }
  .nice-select .nice-select-search-box {
    box-sizing: border-box;
    width: 100%;
    padding: 5px;
    pointer-events: none;
    border-radius: 5px 5px 0 0;
  }
  .nice-select .nice-select-search {
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 3px;
    color: #444;
    display: inline-block;
    vertical-align: middle;
    padding: 7px 12px;
    margin: 0 10px 0 0;
    width: 100%;
    min-height: 36px;
    line-height: 22px;
    height: auto;
    outline: 0 !important;
    font-size: 14px;
  }
}
/* =============================================================================
  Helpers
========================================================================== */
/* =============================================================================
  Footer
========================================================================== */
@layer theme {
  .banner {
    --_banner-bg: var(--banner-bg, var(--dark));
    --_banner-color: var(--banner-color, var(--white));
    background-color: var(--_banner-bg);
    color: var(--_banner-color);
    padding: var(--spacing-md) var(--inline-margin);
    margin-bottom: var(--inline-margin);
  }
  .banner a:link, .banner a:visited {
    color: var(--_banner-color);
  }
  .banner--error {
    --_banner-bg: var(--error);
  }
  .banner--warning {
    --_banner-bg: var(--warning);
    --_banner-color: var(--black);
  }
  .banner--success {
    --_banner-bg: var(--success);
  }
}
@layer base {
  .button {
    -webkit-user-select: none;
    user-select: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    text-decoration: none;
    display: flex;
    padding: var(--btn-pad-block) var(--btn-pad-inline);
    border-radius: var(--btn-br);
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
    cursor: pointer;
    color: var(--btn-clr-text);
    background-color: var(--btn-clr);
    border: 2px solid var(--btn-clr-border);
    font-size: var(--btn-fs);
    font-weight: var(--btn-fw);
    border-style: inset;
    border: 2px solid var(--btn-clr-border);
  }
  .button .icon {
    height: var(--btn-fs);
  }
  @media (hover: hover) {
    .button:hover {
      background-color: var(--btn-hover-clr);
      color: var(--btn-hover-clr-text);
      border-color: var(--btn-hover-clr-border);
    }
  }
  .button:focus-visible {
    outline: 2px solid var(--btn-active-clr-border);
  }
  .button[disabled] {
    opacity: 0.5;
    pointer-events: none;
  }
  .button--outline {
    --btn-clr: var(--white);
    --btn-clr-text: var(--dark);
    --btn-clr-border: var(--dark);
    --btn-hover-clr: var(--secondary);
    --btn-hover-clr-text: var(--white);
  }
  .button--error {
    --btn-clr: var(--error);
    --btn-clr-text: var(--white);
    --btn-hover-clr: var(--black);
  }
  .buttons-wrapper {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    flex-wrap: wrap;
  }
  .buttons-wrapper .button {
    margin: 0;
  }
  .dropdown-button {
    display: flex;
  }
  .dropdown-button > :first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .dropdown-button[disabled], .dropdown-button.is-submitting {
    pointer-events: none;
    opacity: 0.5;
  }
  .button-toggle {
    outline: none;
    background-color: var(--btn-clr);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    anchor-name: --toggle-button;
    border-left: 1px solid var(--white);
    place-items: center;
  }
  .button-toggle:before {
    position: relative;
    content: "";
    display: block;
    height: var(--btn-fs);
    width: var(--btn-fs);
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='11' viewBox='0 0 16 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.74219 9.71778C8.33346 10.1265 7.67252 10.1265 7.26813 9.71778L0.306553 2.76055C-0.102184 2.35181 -0.102184 1.69088 0.306553 1.28649C0.71529 0.882098 1.37623 0.87775 1.78062 1.28649L7.99864 7.50451L14.221 1.28214C14.6297 0.873402 15.2907 0.873402 15.6951 1.28214C16.0995 1.69088 16.1038 2.35181 15.6951 2.7562L8.74219 9.71778Z' fill='white'/%3E%3C/svg%3E%0A");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  .button-toggle svg {
    border-left: 1px solid var(--btn-clr-text);
    padding-left: calc(var(--btn-pad-inline) * 0.5);
    fill: var(--btn-clr-text);
    height: 1em;
  }
  .button-toggle span:after {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
  }
  .dropdown-button-menu {
    position: absolute;
    position-anchor: --toggle-button;
    margin: 0;
    inset: auto;
    top: anchor(bottom);
    right: anchor(right);
    border: none;
    padding: 0;
    margin-top: var(--spacing-sm);
  }
}
/* =============================================================================
  Accordion
========================================================================== */
.accordion {
  border-radius: var(--br-md);
  overflow: hidden;
}
.accordion details summary {
  cursor: pointer;
  padding: var(--spacing-md, 1rem 2rem);
  background-color: var(--light);
  color: var(--dark);
  font-size: 1.2em;
}
.accordion details summary::-webkit-details-marker {
  display: none;
}

.accordion-content {
  padding-block: var(--spacing-lg);
  padding-inline: var(--spacing-md);
  background-color: var(--light);
  color: var(--dark);
}
.accordion-content img {
  border: 2px solid var(--primary);
}

#faqs-wrapper {
  margin-block-start: var(--spacing-md);
  display: grid;
  gap: var(--spacing-md);
}
#faqs-wrapper.loading {
  position: relative;
  min-height: 270px;
  /* 5 rows * (38px row + 16px spacing) = 270px */
  background-color: #fff;
  padding: 1rem 0;
  /* Draw 5 grey bars with spacing between them */
  /* Shimmer overlay sweeping across all rows */
}
#faqs-wrapper.loading .accordion {
  display: none;
}
#faqs-wrapper.loading:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: repeating-linear-gradient(to bottom, #eeeeee, #eeeeee 38px, transparent 38px, transparent 54px);
  pointer-events: none;
}
#faqs-wrapper.loading:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  pointer-events: none;
}

@layer theme {
  #faq-search-input {
    padding-block: calc(var(--input-padding-block) * 2);
    border-color: var(--primary);
    border-width: 2px;
  }
}
/* =============================================================================
  Footer
========================================================================== */
@layer theme {
  #footer {
    padding-inline: var(--inline-margin);
    padding-bottom: var(--spacing-md);
    align-self: end;
    margin-top: var(--gap);
    display: flex;
    color: var(--medium-2);
  }
  #footer :last-child {
    margin-left: auto;
    margin-bottom: 0;
  }
  .credits {
    color: var(--medium-2);
    font-size: var(--font-size-300);
    text-align: center;
  }
  @media (width > 48rem) {
    .credits {
      text-align: right;
    }
  }
}
/* =============================================================================
Forms Related Stuff
========================================================================== */
@layer base {
  .response-success, .response-error {
    display: none;
  }
  .response-success > *, .response-error > * {
    margin-top: calc(var(--layout-spacing) * 0.5);
  }
  .response-success.is-active, .response-error.is-active {
    display: block !important;
  }
  .field {
    display: grid;
    gap: 5px;
  }
  .field:has([disabled]) {
    --input-clr: var(--input-clr-disabled);
  }
  .field:has([aria-invalid=true]) {
    --input-clr: var(--input-clr-error);
  }
  .field:has([aria-invalid=true]) .form-error {
    display: block;
  }
  .field-group {
    display: flex;
  }
  .field-group > span {
    display: flex;
    place-items: center;
    grid-column: auto;
    background-color: var(--medium);
    color: var(--input-clr);
    font-size: var(--input-fs, 1rem);
    padding-inline: var(--numbers-spacing-300);
    border: 2px solid var(--input-clr);
  }
  .field-group > span:first-child:not(:last-child) {
    border-top-left-radius: var(--input-br);
    border-bottom-left-radius: var(--input-br);
    border-right: none;
  }
  .field-group > span:last-child:not(:first-child) {
    border-top-right-radius: var(--input-br);
    border-bottom-right-radius: var(--input-br);
    border-left: none;
  }
  .field-group input, .field-group select {
    flex-grow: 1;
    grid-column: 1fr;
    border-radius: none;
  }
  .field-group input:first-child:not(:last-child), .field-group select:first-child:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
    outline-right: none;
  }
  .field-group input:last-child:not(:first-child), .field-group select:last-child:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
    outline-left: none;
  }
  .field-group:focus-within {
    box-shadow: var(--input-focus-clr);
  }
  .field-group:focus-within input, .field-group:focus-within select {
    --input-focus-clr: none;
  }
  label {
    display: flex;
    margin: 0;
    font-size: var(--input-fs, 1rem);
    font-weight: var(--font-weight-regular);
    color: var(--input-label-clr);
    gap: 0.5em;
    align-items: center;
  }
  label .icon {
    font-size: 0.875em;
  }
  [type=color], [type=date], [type=datetime-local], [type=datetime], [type=email], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week], textarea, select, .nice-select {
    display: block;
    box-sizing: border-box;
    margin: 0;
    appearance: none;
    font-size: var(--input-fs, 1rem);
    color: var(--input-clr);
    padding: var(--input-padding-block, 1rem) var(--input-padding-inline, 1rem);
    border: 2px solid var(--input-clr);
    border-radius: var(--input-br, 0px);
    background-color: var(--input-clr-bg);
    width: 100%;
    line-height: 1.2;
    accent-color: var(--secondary);
  }
  [type=color] ::placeholder, [type=date] ::placeholder, [type=datetime-local] ::placeholder, [type=datetime] ::placeholder, [type=email] ::placeholder, [type=month] ::placeholder, [type=number] ::placeholder, [type=password] ::placeholder, [type=search] ::placeholder, [type=tel] ::placeholder, [type=text] ::placeholder, [type=time] ::placeholder, [type=url] ::placeholder, [type=week] ::placeholder, textarea ::placeholder, select ::placeholder, .nice-select ::placeholder {
    color: var(--input-clr-placeholder);
  }
  [type=color]:focus, [type=date]:focus, [type=datetime-local]:focus, [type=datetime]:focus, [type=email]:focus, [type=month]:focus, [type=number]:focus, [type=password]:focus, [type=search]:focus, [type=tel]:focus, [type=text]:focus, [type=time]:focus, [type=url]:focus, [type=week]:focus, textarea:focus, select:focus, .nice-select:focus {
    outline: none;
    box-shadow: var(--input-focus-clr);
  }
  [type=color][disabled], [type=color][readonly], [type=date][disabled], [type=date][readonly], [type=datetime-local][disabled], [type=datetime-local][readonly], [type=datetime][disabled], [type=datetime][readonly], [type=email][disabled], [type=email][readonly], [type=month][disabled], [type=month][readonly], [type=number][disabled], [type=number][readonly], [type=password][disabled], [type=password][readonly], [type=search][disabled], [type=search][readonly], [type=tel][disabled], [type=tel][readonly], [type=text][disabled], [type=text][readonly], [type=time][disabled], [type=time][readonly], [type=url][disabled], [type=url][readonly], [type=week][disabled], [type=week][readonly], textarea[disabled], textarea[readonly], select[disabled], select[readonly], .nice-select[disabled], .nice-select[readonly] {
    --input-clr-bg: var(--input-clr-bg-disabled);
    --input-clr: var(--input-clr-disabled);
    cursor: not-allowed;
  }
  .nice-select-dropdown input {
    border-color: var(--medium);
  }
  .nice-select:after {
    all: unset;
    border: none;
    content: "";
    display: block;
    width: 2.56em;
    height: 100%;
    right: 1em;
    top: 0;
    background-origin: content-box;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 1em 0.56em;
    position: absolute;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 17 10'%3E%3Cpath fill='currentColor' d='M9.242 9.195a1.043 1.043 0 0 1-1.474 0L.807 2.275a1.03 1.03 0 0 1 0-1.466 1.047 1.047 0 0 1 1.474 0l6.218 6.185L14.72.804a1.043 1.043 0 0 1 1.474 0 1.034 1.034 0 0 1 0 1.467L9.242 9.195Z'/%3E%3C/svg%3E");
  }
  [data-nice] {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
  textarea {
    field-sizing: content;
    min-height: 10em;
  }
  select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 17 10'%3E%3Cpath fill='currentColor' d='M9.242 9.195a1.043 1.043 0 0 1-1.474 0L.807 2.275a1.03 1.03 0 0 1 0-1.466 1.047 1.047 0 0 1 1.474 0l6.218 6.185L14.72.804a1.043 1.043 0 0 1 1.474 0 1.034 1.034 0 0 1 0 1.467L9.242 9.195Z'/%3E%3C/svg%3E");
    background-origin: content-box;
    background-position: right -1.5em center;
    background-repeat: no-repeat;
    background-size: 1em 0.56em;
    padding-right: calc(var(--numbers-spacing-400) * 2);
  }
  button.form-button, .button.form-button {
    font-size: var(--input-fs, 1rem);
    padding-block: var(--input-padding-block, 1rem);
  }
  button.form-button .icon, .button.form-button .icon {
    height: calc(var(--input-fs, 1rem) * var(--input-line-height));
  }
  .form-error {
    display: none;
    color: var(--error);
    font-size: 0.875rem;
    line-height: 1.2;
  }
  .forgot-password-toggle {
    cursor: pointer;
  }
  .forgot-password-toggle:hover {
    opacity: 0.8;
  }
  .input-desc {
    display: block;
    font-size: 0.875rem;
    line-height: 1.2;
    color: var(--color-dark);
    margin-top: calc(var(--layout-spacing) * -0.5 + 4px);
    margin-bottom: calc(var(--layout-spacing) * 0.5);
  }
  .input-desc a:not(.button) {
    color: var(--color-accent);
  }
  .input-desc + .form-error {
    margin-top: 0;
  }
  .search-wrapper:not(.filters-applied) .form-button {
    --btn-clr: var(--white);
    --btn-clr-text: var(--dark);
    --btn-clr-border: var(--dark);
    --btn-hover-clr: var(--secondary);
    --btn-hover-clr-text: var(--white);
  }
  .search-wrapper:not(.filters-open) .filter-wrapper {
    display: none;
  }
  .search-wrapper.filters-open .form-button {
    --btn-clr: var(--primary-50);
    --btn-clr-text: var(--secondary);
    --btn-clr-border: transparent;
    --btn-hover-clr: var(--primary-50);
    --btn-hover-clr-text: var(--secondary);
    --btn-hover-clr-border: var(--dark);
  }
  .search-field-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    max-width: 67vw;
  }
  .search-field {
    display: flex;
    align-items: center;
    border: 2px solid var(--input-clr);
    border-radius: var(--input-br, 0px);
    background-color: var(--input-clr-bg);
  }
  .search-field > :not(input):first-child {
    padding-inline-start: var(--input-padding-inline, 1rem);
  }
  .search-field > :not(input):last-child {
    padding-inline-end: var(--input-padding-inline, 1rem);
  }
  .search-field input {
    border: none;
  }
  .search-field:has(input:focus) {
    outline: var(--form-focus-outline);
  }
  .search-field:has(input:focus) input {
    box-shadow: none;
  }
  .keyboard-hint {
    display: none;
    gap: 2px;
  }
  .keyboard-hint > * {
    padding: 2px 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--br-xs);
    background: var(--light);
  }
  #form-wrapper-login, #form-wrapper-2fa {
    max-width: min(100vw - var(--inline-margin) * 2, 400px);
  }
  .show-for-edit {
    display: none;
  }
  .editing .show-for-edit {
    display: block;
  }
  .editing .hide-for-edit {
    display: none;
  }
  .editing [data-external-url] {
    cursor: unset;
  }
  #filter-form {
    max-height: 100dvh;
  }
  #dvla-lookup {
    background-color: var(--primary);
    color: var(--white);
    cursor: pointer;
  }
  .licence-categories {
    width: 100%;
  }
  .licence-categories thead th {
    background-color: var(--medium);
    text-align: left;
    padding-block: 0.5em;
  }
  .licence-categories th, .licence-categories td {
    padding: 0.2em 0.5em;
    border: 1px solid var(--medium);
  }
  .licence-categories input {
    padding: 1px;
    border: none;
  }
  .licence-categories [data-tooltip]:after {
    left: 0;
    transform: none;
  }
  @media (hover: hover) and (width > 48rem) {
    .keyboard-hint {
      display: flex;
    }
  }
}
@layer theme {
  body:not(.editing) .conditional-editing .field {
    -webkit-user-select: none;
    user-select: none;
  }
  body:not(.editing) .conditional-editing .field:has(:placeholder-shown) .input--empty, body:not(.editing) .conditional-editing .field:has(.input--empty) .input--empty {
    display: none;
  }
  body:not(.editing) .conditional-editing .field:has(:placeholder-shown):not(:has(.nice-select-search)):not(:has(.field-group)):after, body:not(.editing) .conditional-editing .field:has(.input--empty):not(:has(.nice-select-search)):not(:has(.field-group)):after {
    display: block;
    padding-top: var(--input-padding-block, 1rem);
    content: "Not set";
    font-style: italic;
    color: var(--medium-2);
    font-size: var(--input-fs, 1rem);
  }
  body:not(.editing) .conditional-editing .field:has(:placeholder-shown) .field-group span, body:not(.editing) .conditional-editing .field:has(.input--empty) .field-group span {
    display: none;
  }
  body:not(.editing) .conditional-editing .field:has(:placeholder-shown) .field-group:after, body:not(.editing) .conditional-editing .field:has(.input--empty) .field-group:after {
    display: block;
    padding-top: var(--input-padding-block, 1rem);
    content: "Not set";
    font-style: italic;
    color: var(--medium-2);
    font-size: var(--input-fs, 1rem);
  }
  body:not(.editing) .conditional-editing .field:has(.nice-select):has(option:checked[value=""]) .nice-select {
    display: none;
  }
  body:not(.editing) .conditional-editing .field:has(.nice-select):has(option:checked[value=""]):after {
    display: block;
    padding-top: var(--input-padding-block, 1rem);
    content: "Not set";
    font-style: italic;
    color: var(--medium-2);
    font-size: var(--input-fs, 1rem);
  }
  body:not(.editing) .conditional-editing .field[data-friendly] input {
    padding-inline: 0;
    width: min-content;
    flex-grow: unset;
    field-sizing: content;
  }
  body:not(.editing) .conditional-editing .field[data-friendly]:after {
    display: block;
    padding-top: var(--input-padding-block, 1rem);
    content: attr(data-friendly);
    font-style: italic;
    color: var(--medium-2);
    font-size: var(--input-fs, 1rem);
    padding-left: 2px;
  }
  body:not(.editing) .conditional-editing .field label [data-tooltip] {
    display: none;
  }
  body:not(.editing) .conditional-editing .field-group span {
    background-color: transparent;
    padding: 0;
    font-size: var(--input-fs, 1rem);
    color: var(--input-clr);
    border: none;
  }
  body:not(.editing) .conditional-editing .field-group input, body:not(.editing) .conditional-editing .field-group select, body:not(.editing) .conditional-editing .field-group .nice-select, body:not(.editing) .conditional-editing .field-group textarea {
    padding-inline: 0;
    width: min-content;
    flex-grow: unset;
    field-sizing: content;
  }
  body:not(.editing) .conditional-editing .licence-categories td {
    padding: 0.2em 0.5em;
  }
  body:not(.editing) .conditional-editing .licence-categories input[value=""] {
    opacity: 0;
  }
  body:not(.editing) .conditional-editing label {
    pointer-events: none;
  }
  body:not(.editing) .conditional-editing input, body:not(.editing) .conditional-editing select, body:not(.editing) .conditional-editing .nice-select, body:not(.editing) .conditional-editing textarea {
    border: none;
    background-color: transparent;
    min-height: unset;
    padding-left: 0;
    pointer-events: none;
  }
  body:not(.editing) .conditional-editing input::-webkit-calendar-picker-indicator, body:not(.editing) .conditional-editing input::-webkit-list-button, body:not(.editing) .conditional-editing select::-webkit-calendar-picker-indicator, body:not(.editing) .conditional-editing select::-webkit-list-button, body:not(.editing) .conditional-editing .nice-select::-webkit-calendar-picker-indicator, body:not(.editing) .conditional-editing .nice-select::-webkit-list-button, body:not(.editing) .conditional-editing textarea::-webkit-calendar-picker-indicator, body:not(.editing) .conditional-editing textarea::-webkit-list-button {
    display: none;
    -webkit-appearance: none;
  }
  body:not(.editing) .conditional-editing input:placeholder-shown, body:not(.editing) .conditional-editing select:placeholder-shown, body:not(.editing) .conditional-editing .nice-select:placeholder-shown, body:not(.editing) .conditional-editing textarea:placeholder-shown {
    display: none;
  }
  body:not(.editing) .conditional-editing input:focus, body:not(.editing) .conditional-editing select:focus, body:not(.editing) .conditional-editing .nice-select:focus, body:not(.editing) .conditional-editing textarea:focus {
    outline: none;
  }
  body:not(.editing) .conditional-editing input:after, body:not(.editing) .conditional-editing select:after, body:not(.editing) .conditional-editing .nice-select:after, body:not(.editing) .conditional-editing textarea:after {
    display: none;
  }
  body:not(.editing) .conditional-editing .image-uploader:before {
    content: "No images set";
  }
  body:not(.editing) .conditional-editing .image-uploader input[type=file] {
    pointer-events: none;
  }
  body:not(.editing) .conditional-editing .image-uploader .remove-btn, body:not(.editing) .conditional-editing .image-uploader .add-image {
    display: none;
  }
  body.editing .page-header .actions {
    display: none;
  }
  @media (width <= 48rem) {
    body:not(.editing) .conditional-editing .col-primary-image:not(:has(.image-container)) {
      display: none;
    }
    body:has(.filters-open) {
      height: 100vh;
      overflow: hidden;
    }
    .filter-wrapper {
      overflow-y: auto;
      max-height: 75dvh;
    }
  }
}
/* =============================================================================
  Grid
========================================================================== */
.grid {
  display: grid;
}
.grid:not(.no-gap) {
  column-gap: var(--layout-grid-gap);
  row-gap: var(--spacing-lg);
}
.grid:not([class*=" grid-col-"]) {
  grid-template-columns: repeat(12, 1fr);
}
.grid:not([class*=" grid-col-"]) > *:not([class]) {
  grid-column-start: span 12;
}
.grid.grid-col-2 {
  grid-template-columns: 1fr 1fr;
}
.grid.grid-col-3 {
  grid-template-columns: 1fr 1fr 1fr;
}
.grid .col-xs-1 {
  grid-column-start: span 1;
}
.grid .col-xs-2 {
  grid-column-start: span 2;
}
.grid .col-xs-3 {
  grid-column-start: span 3;
}
.grid .col-xs-4 {
  grid-column-start: span 4;
}
.grid .col-xs-5 {
  grid-column-start: span 5;
}
.grid .col-xs-6 {
  grid-column-start: span 6;
}
.grid .col-xs-7 {
  grid-column-start: span 7;
}
.grid .col-xs-8 {
  grid-column-start: span 8;
}
.grid .col-xs-9 {
  grid-column-start: span 9;
}
.grid .col-xs-10 {
  grid-column-start: span 10;
}
.grid .col-xs-11 {
  grid-column-start: span 11;
}
.grid .col-xs-12 {
  grid-column-start: span 12;
}
@media (min-width: 49rem) {
  .grid .col-sm-1 {
    grid-column-start: span 1;
  }
  .grid .col-sm-2 {
    grid-column-start: span 2;
  }
  .grid .col-sm-3 {
    grid-column-start: span 3;
  }
  .grid .col-sm-4 {
    grid-column-start: span 4;
  }
  .grid .col-sm-5 {
    grid-column-start: span 5;
  }
  .grid .col-sm-6 {
    grid-column-start: span 6;
  }
  .grid .col-sm-7 {
    grid-column-start: span 7;
  }
  .grid .col-sm-8 {
    grid-column-start: span 8;
  }
  .grid .col-sm-9 {
    grid-column-start: span 9;
  }
  .grid .col-sm-10 {
    grid-column-start: span 10;
  }
  .grid .col-sm-11 {
    grid-column-start: span 11;
  }
  .grid .col-sm-12 {
    grid-column-start: span 12;
  }
}
@media (min-width: 64.9375rem) {
  .grid .col-md-1 {
    grid-column-start: span 1;
  }
  .grid .col-md-2 {
    grid-column-start: span 2;
  }
  .grid .col-md-3 {
    grid-column-start: span 3;
  }
  .grid .col-md-4 {
    grid-column-start: span 4;
  }
  .grid .col-md-5 {
    grid-column-start: span 5;
  }
  .grid .col-md-6 {
    grid-column-start: span 6;
  }
  .grid .col-md-7 {
    grid-column-start: span 7;
  }
  .grid .col-md-8 {
    grid-column-start: span 8;
  }
  .grid .col-md-9 {
    grid-column-start: span 9;
  }
  .grid .col-md-10 {
    grid-column-start: span 10;
  }
  .grid .col-md-11 {
    grid-column-start: span 11;
  }
  .grid .col-md-12 {
    grid-column-start: span 12;
  }
}
@media (min-width: 76.5625rem) {
  .grid .col-lg-1 {
    grid-column-start: span 1;
  }
  .grid .col-lg-2 {
    grid-column-start: span 2;
  }
  .grid .col-lg-3 {
    grid-column-start: span 3;
  }
  .grid .col-lg-4 {
    grid-column-start: span 4;
  }
  .grid .col-lg-5 {
    grid-column-start: span 5;
  }
  .grid .col-lg-6 {
    grid-column-start: span 6;
  }
  .grid .col-lg-7 {
    grid-column-start: span 7;
  }
  .grid .col-lg-8 {
    grid-column-start: span 8;
  }
  .grid .col-lg-9 {
    grid-column-start: span 9;
  }
  .grid .col-lg-10 {
    grid-column-start: span 10;
  }
  .grid .col-lg-11 {
    grid-column-start: span 11;
  }
  .grid .col-lg-12 {
    grid-column-start: span 12;
  }
}
@media (min-width: 107.25rem) {
  .grid .col-xl-1 {
    grid-column-start: span 1;
  }
  .grid .col-xl-2 {
    grid-column-start: span 2;
  }
  .grid .col-xl-3 {
    grid-column-start: span 3;
  }
  .grid .col-xl-4 {
    grid-column-start: span 4;
  }
  .grid .col-xl-5 {
    grid-column-start: span 5;
  }
  .grid .col-xl-6 {
    grid-column-start: span 6;
  }
  .grid .col-xl-7 {
    grid-column-start: span 7;
  }
  .grid .col-xl-8 {
    grid-column-start: span 8;
  }
  .grid .col-xl-9 {
    grid-column-start: span 9;
  }
  .grid .col-xl-10 {
    grid-column-start: span 10;
  }
  .grid .col-xl-11 {
    grid-column-start: span 11;
  }
  .grid .col-xl-12 {
    grid-column-start: span 12;
  }
}

/* =============================================================================
  Remove gaps on cells
========================================================================== */
.no-gap-t {
  margin-top: calc(var(--layout-grid-gap) * -1);
}

.no-gap-b {
  margin-bottom: calc(var(--layout-grid-gap) * -1);
}

.no-gap-l {
  margin-left: calc(var(--layout-grid-gap) * -1);
}

.no-gap-r {
  margin-right: calc(var(--layout-grid-gap) * -1);
}

@media (width <= 48rem) {
  .grid {
    overflow-x: clip;
  }
}
@layer base {
  .image-uploader {
    --_border-clr: transparent;
    --_bg: var(--light);
    --_image-width: 180px;
    position: relative;
    background: var(--_bg);
    border: 2px dashed var(--_border-clr);
    min-height: 140px;
    display: grid;
    gap: var(--inline-margin);
  }
  .image-uploader:before {
    display: block;
    content: attr(data-placeholder);
    position: absolute;
    inset: 0;
    place-content: center;
    text-align: center;
    padding: var(--inline-margin);
  }
  .image-uploader.active {
    --_border-clr: var(--medium);
    cursor: pointer;
    padding: var(--spacing-sm);
  }
  .image-uploader.dragover {
    --_border-clr: var(--primary);
    --_bg: var(--white);
  }
  .image-uploader p {
    position: absolute;
    inset: auto;
    padding: var(--inline-margin);
    margin: var(--inline-margin);
  }
  .image-uploader:has(.image-container):before {
    display: none;
  }
  .image-uploader .button.add-image {
    align-self: end;
    justify-self: start;
  }
  .image-uploader:not([data-max-images="1"]) .image-preview {
    display: flex;
  }
  .image-uploader:not([data-max-images="1"]) .image-container {
    width: auto;
    height: 130px;
    max-width: calc(50vw - var(--inline-margin) * 5);
  }
  .image-uploader[data-max-images="1"] .image-preview {
    position: absolute;
    inset: 0;
  }
  .image-preview {
    display: grid;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    overflow: hidden;
  }
  .image-preview .remove-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 30px;
    height: 30px;
    background-color: var(--error);
    color: var(--white);
    border: none;
    border-radius: 50%; /* Makes it circular */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 384 512'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath d='M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z'/%3E%3C/svg%3E");
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.2s ease, background-color 0.2s ease;
  }
  .image-container {
    background-color: var(--light);
    position: relative;
    display: inline-block;
    cursor: grab;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .image-container:has(.file-icon) {
    height: unset;
    aspect-ratio: 1/1;
  }
  .image-container img {
    height: fit-content;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
  .file-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-50);
    border-radius: var(--br-sm);
    color: var(--black);
    font-size: var(--font-size-300);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    padding: var(--spacing-md);
    border: 2px solid var(--white);
    width: 100%;
    height: 100%;
    word-break: break-word;
    overflow: hidden;
    hyphens: auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512' opacity='0.25' fill='white'%3E%3C!--!Font Awesome Pro 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc.--%3E%3Cpath d='M352 448l0-256-112 0c-26.5 0-48-21.5-48-48l0-112L64 32C46.3 32 32 46.3 32 64l0 384c0 17.7 14.3 32 32 32l256 0c17.7 0 32-14.3 32-32zm-.5-288c-.7-2.8-2.1-5.4-4.2-7.4L231.4 36.7c-2.1-2.1-4.6-3.5-7.4-4.2L224 144c0 8.8 7.2 16 16 16l111.5 0zM0 64C0 28.7 28.7 0 64 0L220.1 0c12.7 0 24.9 5.1 33.9 14.1L369.9 129.9c9 9 14.1 21.2 14.1 33.9L384 448c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 64z'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 60%;
  }
  [data-max-images="1"] {
    --_image-width: 100%;
    aspect-ratio: 387/245;
  }
  [data-max-images="1"]:has(.image-container) .image-container img {
    margin-inline: auto;
  }
  [data-max-images="1"]:has(.image-container) .add-image {
    display: none;
  }
}
#loader-wrapper {
  display: none;
  position: fixed;
  z-index: 9999;
  background-color: hsl(from var(--white) h s l/0.25);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  align-items: center;
  justify-content: center;
}

.loader {
  font-size: min(30vw, 120px);
  width: 1em;
  height: 1em;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  border-radius: 50%;
  border: 0.05em solid transparent;
  border-bottom-color: var(--dark);
  border-left-color: var(--dark);
  place-items: center;
}

.loader div {
  box-sizing: border-box;
  width: 0.75em;
  height: 0.75em;
  border-radius: 50%;
  border: 0.05em solid transparent;
  border-bottom-color: var(--primary);
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
body.is-loading #loader-wrapper {
  display: flex;
  flex-direction: column;
}
body.is-loading #loader-wrapper .loader {
  display: grid;
  animation: rotation 1s linear infinite;
}
body.is-loading #loader-wrapper .loader div {
  animation: rotation 0.5s linear infinite;
  animation-direction: reverse;
}
body.is-loading #loader-wrapper:after {
  position: relative;
  bottom: 0;
  display: block;
  text-align: center;
  content: attr(data-label);
  font-size: 1.5rem;
  margin-top: var(--spacing-lg);
  color: var(--color-white);
  background-color: var(--dark);
  padding: 0.5em 1em;
  border-radius: var(--br-sm);
}

@layer nav {
  .menu {
    display: grid;
    list-style-type: none;
    grid-auto-flow: column;
    margin: 0;
    padding: 0;
  }
  .menu a {
    display: flex;
    align-items: center;
    justify-items: start;
    padding-block: var(--spacing-sm, 8px);
    font-size: var(--font-size-400);
    color: var(--nav);
    text-decoration: none;
    line-height: 1;
  }
  .menu a svg {
    fill: var(--nav-icon);
  }
  .menu .is-active a, .menu .is-current a {
    color: var(--nav-active);
  }
  .menu .is-active svg, .menu .is-current svg {
    fill: var(--nav-icon-hover);
  }
  @media (width > 48rem) {
    .menu a {
      padding: var(--spacing-sm, 8px);
    }
  }
}
@media (hover: hover) {
  .menu a:hover {
    color: var(--nav-hover);
  }
  .menu a:hover svg {
    fill: var(--nav-icon-hover);
  }
}
.popover {
  border: none;
  padding: 0;
  background: transparent;
}
.popover::backdrop {
  background-color: hsl(from var(--black) h s l/0.75);
}
.popover.multiple #prevBtn, .popover.multiple #nextBtn {
  display: block;
}

#modalImage {
  max-width: 90vw;
  max-height: 80vh;
}

#prevBtn, #nextBtn, #closeBtn {
  width: 40px;
  aspect-ratio: 1/1;
  font-size: 1.4em;
  border-radius: var(--br-xs);
  background-color: var(--light);
  border: none;
  cursor: pointer;
  place-items: center;
  display: grid;
  justify-content: center;
}
#prevBtn:not(:hover):not(:focus), #nextBtn:not(:hover):not(:focus), #closeBtn:not(:hover):not(:focus) {
  opacity: 0.5;
}

#closeBtn {
  position: absolute;
  top: 5px;
  right: 5px;
}

#prevBtn, #nextBtn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: none;
}

#prevBtn {
  left: 5px;
}

#nextBtn {
  right: 5px;
}

#sidebar {
  background-color: var(--primary);
  padding: var(--spacing-md);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  display: grid;
  z-index: 10;
}
#sidebar .logo-wrapper {
  padding: var(--spacing-sm, 8px);
  cursor: pointer;
}
#sidebar .logo-wrapper > svg {
  height: var(--sidebar-icon-size);
}
#sidebar .logo-wrapper svg {
  display: block;
}
#sidebar .logo-wrapper input {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 0px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 0px;
}
#sidebar .logo-wrapper .brandmark {
  display: none;
}
#sidebar .menu svg {
  height: var(--sidebar-icon-size);
}
#sidebar .menu a > span:not(.initials) {
  display: none;
}
#sidebar .initials {
  height: var(--sidebar-icon-size);
  width: var(--sidebar-icon-size);
  background-color: var(--nav);
  position: relative;
  border-radius: var(--br-xs);
}
#sidebar .initials span {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--secondary);
}

.profile-wrapper {
  --nav-icon: var(--secondary);
  position: relative;
  align-self: end;
}
.profile-wrapper .profile-name {
  flex-grow: 1;
}
.profile-wrapper .open {
  display: none;
}
.profile-wrapper .open svg {
  width: 16px !important;
  height: 16px !important;
  margin-right: 7px;
}
.profile-wrapper .submenu {
  --nav: var(--secondary);
  --nav-hover: var(--black);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: var(--spacing-md);
  background-color: var(--white);
  border-radius: var(--br-sm);
  padding: var(--spacing-md);
  justify-items: center;
  min-width: calc(100% - var(--spacing-md) * 2);
  display: none;
  z-index: 2;
}
.profile-wrapper:has(.submenu-active) .profile-name {
  color: var(--secondary);
}
.profile-wrapper:has(.submenu-active) .closed {
  display: none;
}
.profile-wrapper:has(.submenu-active) .open {
  display: block;
}
.profile-wrapper:has(.submenu-active) .submenu {
  display: block;
}

@media (width <= 48rem) {
  body {
    --sidebar-height: 94px;
  }
  #sidebar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-bottom: var(--spacing-lg);
  }
  #sidebar .logo-wrapper {
    display: none;
  }
  #sidebar .menu {
    justify-content: space-between;
  }
  #main {
    min-height: calc(100svh - var(--sidebar-height));
    margin-bottom: var(--sidebar-height);
  }
  .profile-wrapper {
    display: none;
  }
}
@media (width > 48rem) {
  #sidebar {
    position: sticky;
    margin-top: 0;
    top: 0;
    grid-template-rows: auto 1fr auto;
    height: 100svh;
  }
  #sidebar .logo-wrapper {
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--nav);
  }
  #sidebar .menu {
    margin-block-start: var(--spacing-md);
    grid-auto-flow: row;
    gap: var(--spacing-md);
  }
  #sidebar .menu svg {
    width: 30px;
  }
  #sidebar .separator {
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--nav);
  }
  #sidebar:not(:has(:checked)) {
    width: 17rem;
  }
  #sidebar:not(:has(:checked)) .menu a > *:not(:first-child) {
    display: block;
    margin-left: var(--spacing-md);
  }
  #sidebar:has(:checked) .menu a > span:not(.initials),
  #sidebar:has(:checked) .logo {
    display: none;
  }
  #sidebar:has(:checked) .menu a:not(#profile-toggle):hover > span:not(.initials) {
    --bg-color: var(--secondary);
    display: block;
    position: absolute;
    left: 100%;
    background-color: var(--bg-color);
    color: var(--white);
    padding: var(--spacing-sm);
    border-radius: var(--br-xs);
    margin-left: 0;
  }
  #sidebar:has(:checked) .menu a:not(#profile-toggle):hover > span:not(.initials):before {
    content: "";
    display: block;
    position: absolute;
    border-color: transparent black;
    border-style: solid;
    border-width: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 0;
    height: 0px;
    width: 0px;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
  }
  #sidebar:has(:checked) .brandmark {
    display: inherit;
  }
  #sidebar nav {
    overflow-y: auto;
  }
  .profile-item-for-small {
    display: none;
  }
}
/* =============================================================================
Table
========================================================================== */
@layer base {
  [data-sortable] {
    --icon-size: .5em;
    --icon-offset: .5em;
  }
  [data-sortable] span {
    display: inline-grid;
    gap: 2ch;
    cursor: pointer;
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr;
    align-items: center;
  }
  [data-sortable] span:before, [data-sortable] span:after {
    grid-row: 1/1;
    grid-column: 2/2;
    content: "";
    display: block;
    top: 50%;
    width: var(--icon-size);
    aspect-ratio: 6/4;
    margin-top: calc(var(--icon-offset) * -1);
    justify-self: end;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 6 3.75'%3E%3Cpath id='Path_1' data-name='Path 1' d='M5.25,4a.748.748,0,0,1-.53-.22L3,2.061,1.28,3.78A.75.75,0,0,1,.22,2.72L2.47.47A.75.75,0,0,1,3.53.47L5.78,2.72A.75.75,0,0,1,5.25,4Z' transform='translate(0 -0.25)'/%3E%3C/svg%3E%0A");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
  }
  [data-sortable] span:after {
    transform: rotate(180deg);
    margin-top: var(--icon-offset);
    background-position: bottom center;
  }
  [data-sortable].active.desc span:before {
    opacity: 0.5;
  }
  [data-sortable].active.asc span:after {
    opacity: 0.5;
  }
  .table--simple {
    margin-top: 8px;
  }
  .table--simple td, .table--simple th {
    padding: 4px 0;
  }
  .table--simple tr:nth-child(even) td {
    background-color: var(--light);
  }
  .table--simple th {
    text-align: left;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
  }
  .table--simple td:first-child {
    font-weight: var(--font-weight-semibold);
    padding-right: 16px;
  }
  th [type=checkbox] {
    outline-color: var(--secondary);
    accent-color: var(--secondary);
  }
  .table-wrapper {
    display: grid;
    gap: var(--spacing-md);
  }
  .table-wrapper:not(:has(.id-checkbox:checked)) .table-actions-wrapper {
    display: none;
  }
  .items-table [type=checkbox] {
    margin: 0;
    scale: 1.5;
  }
  .items-table .archived {
    color: var(--error);
  }
  .items-table .tr {
    box-shadow: 1px 1px 1px 0px var(--medium);
  }
  .items-table .has-icon .icon {
    height: 1.5em;
    max-width: 20px;
  }
  .items-table .has-icon span {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .table-nav {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--spacing-md);
  }
  .table-actions-wrapper select {
    width: fit-content;
  }
  .paging-wrapper, .limit-wrapper, .pagination-wrapper {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
  }
  .paging-wrapper div {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
  }
  .paging-wrapper input {
    width: 4ch;
    padding: 2px 4px;
    text-align: center;
  }
  .limit-wrapper div {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
  }
  .limit-wrapper select {
    width: 6ch;
    padding-inline-start: 0.5em;
    width: auto;
  }
  .pagination-wrapper {
    display: flex;
    gap: var(--spacing-sm);
  }
  .pagination-wrapper button {
    --btn-clr: var(--dark);
    --btn-bg: var(--light);
    display: flex;
    border: none;
    padding: var(--input-padding-block, 1rem) var(--input-padding-inline, 1rem);
    background-color: var(--btn-bg);
    color: var(--btn-clr);
    aspect-ratio: 1/1;
    border-radius: var(--br-sm);
    place-items: center;
    cursor: pointer;
  }
  .pagination-wrapper button.page.active {
    --btn-clr: var(--white);
    --btn-bg: var(--secondary);
  }
  .pagination-wrapper button.page:not(.active):not([disabled]):hover {
    --btn-bg: var(--medium);
  }
  .pagination-wrapper button:not(.page) {
    --btn-clr: var(--dark);
    --btn-bg: var(--medium);
  }
  .pagination-wrapper button:not(.page):hover {
    --btn-bg: var(--primary);
    --btn-clr: var(--white);
  }
  .pagination-wrapper button:not(.page)[disabled] {
    --btn-bg: var(--white);
    --btn-clr: var(--dark);
    opacity: 0.75;
    pointer-events: none;
  }
  .pagination-wrapper .prev .icon {
    transform: rotate(180deg);
  }
  .quick-filters {
    display: flex;
    gap: 12px;
    flex-flow: row wrap;
  }
  .quick-filters > * {
    display: flex;
    padding: 6px 12px;
    font-size: var(--font-size-300);
    border-radius: 24px;
    background-color: var(--type-surface, transparent);
    border: 1px solid var(--type-border, transparent);
    color: var(--dark);
    text-decoration: none;
    line-height: 1;
    place-items: center;
  }
  .quick-filters > *:hover {
    --type-border: var(--medium);
    --type-surface: var(--white);
  }
  .quick-filters > *.active {
    --type-surface: var(--primary-50);
  }
  .column-content:has(.thumbnail-toggler) {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
  }
  .thumbnail-toggler {
    font-size: 0.75em;
    opacity: 0;
    pointer-events: none;
  }
  @media (width <= 48rem) {
    .quick-filters {
      display: none;
    }
    .responsive-table .tbody {
      display: grid;
      gap: var(--gap, 1rem);
    }
    .responsive-table .tr {
      display: grid;
      row-gap: 0.5em;
      column-gap: 1rem;
      grid-template-columns: 1fr 1fr;
      padding: var(--spacing-md);
      background-color: var(--white);
      border-radius: var(--br-md);
      overflow: clip;
      box-shadow: 1px 1px 1px 0px var(--medium);
    }
    .responsive-table .tr .fullwidth-col {
      grid-column: 1/3;
    }
    .responsive-table .td {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .responsive-table .td:nth-child(1), .responsive-table .td:nth-child(2) {
      color: var(--black);
      margin-top: calc(var(--spacing-md) * -1);
      margin-left: calc(var(--spacing-md) * -1);
      padding: var(--spacing-md);
      grid-column: 1/3;
      grid-row: 1;
      align-self: center;
    }
    .responsive-table .td.primary-label {
      margin-right: calc(var(--spacing-md) * -1);
      font-weight: var(--font-weight-semibold);
      font-size: 1.1em;
      text-indent: 2em;
      border-bottom: 2px solid var(--primary);
      color: var(--secondary);
      line-height: 1.1;
    }
    .responsive-table .td.primary-label .icon {
      height: 1.2em;
    }
    .responsive-table .td[data-label]:not(.primary-label):before {
      margin-top: var(--spacing-xs);
      content: attr(data-label);
      display: block;
      font-size: 0.75em;
      font-weight: var(--font-weight-bold);
      color: var(--medium-2);
      margin-bottom: var(--spacing-xxs);
      line-height: 1.5;
    }
    .responsive-table .td[data-label]:not(.primary-label):has(.has-icon):before {
      margin-bottom: var(--spacing-xs);
    }
    .thead {
      display: none;
    }
    .fallback {
      font-style: italic;
      color: var(--medium-2);
    }
    .checkbox-wrapper {
      border-color: var(--secondary);
    }
    .pagination-wrapper .page {
      display: none;
    }
  }
  @media (width > 48rem) {
    .table-scroll-wrapper {
      overflow-x: auto;
    }
    .responsive-table {
      display: table;
      border-spacing: 0 var(--spacing-sm);
    }
    .responsive-table .tr {
      display: table-row;
    }
    .responsive-table .tbody, .responsive-table .thead {
      display: table-row-group;
    }
    .responsive-table .tr {
      display: table-row;
      background-color: var(--white);
      margin-bottom: var(--spacing-md);
    }
    .responsive-table .th, .responsive-table .td {
      display: table-cell;
      align-content: center;
    }
    .no-results-wrapper {
      width: 100%;
      padding: var(--spacing-md);
      background-color: var(--white);
      margin-bottom: var(--spacing-md);
    }
    .td:has(.fallback) .fallback {
      display: none;
    }
    .td:has(.fallback):after {
      content: "None set";
      display: block;
      font-style: italic;
      color: var(--medium-2);
    }
    .items-table {
      width: 100%;
    }
    .items-table .checkbox-wrapper {
      width: fit-content;
      padding-inline-end: 0;
      width: 2.2em;
    }
    .items-table .checkbox-wrapper input {
      margin: 0;
      scale: 1.5;
      opacity: 0.5;
    }
    .items-table .tr:hover .checkbox-wrapper input, .items-table .tr:has(:checked) .checkbox-wrapper input {
      opacity: 1;
    }
    .items-table .th, .items-table .td {
      padding: var(--spacing-md);
    }
    .items-table .th:first-child, .items-table .td:first-child {
      border-top-left-radius: var(--br-sm);
      border-bottom-left-radius: var(--br-sm);
    }
    .items-table .th:last-child, .items-table .td:last-child {
      border-top-right-radius: var(--br-sm);
      border-bottom-right-radius: var(--br-sm);
    }
    .items-table .th {
      background-color: var(--primary);
      color: var(--white);
      text-align: left;
      white-space: nowrap;
    }
    .items-table .tbody .tr:hover, .items-table .tbody .tr:focus-within {
      background-color: var(--medium);
    }
  }
  @media (hover: hover) {
    .items-table .tr:hover {
      background-color: var(--medium);
    }
    .items-table .tr:hover .thumbnail-toggler {
      opacity: 1;
      pointer-events: all;
    }
  }
}
@layer theme {
  .lock-indicator {
    position: absolute !important;
    inset: auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 448 512'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath d='M144 144v48h160v-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zm-64 48v-48C80 64.5 144.5 0 224 0s144 64.5 144 144v48h16c35.3 0 64 28.7 64 64v192c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V256c0-35.3 28.7-64 64-64h16z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 1em;
    height: 1em;
    display: block;
    aspect-ratio: 1/1;
    transform: translateY(-100%);
  }
  .lock-indicator:after {
    left: 0;
    transform: none;
  }
  [data-row-id].locked [type=checkbox] {
    opacity: 0;
  }
  [data-row-id]:not(.locked) .lock-indicator {
    display: none;
  }
}
/* =============================================================================
  Toast Styles
========================================================================== */
/* =============================================================================
  Toast
========================================================================== */
#toast {
  visibility: hidden;
  width: min(100vw - var(--spacing-lg) * 2, 500px);
  background-color: var(--success);
  color: var(--white) !important;
  text-align: center;
  border-radius: var(--br-md);
  padding: var(--spacing-md);
  position: fixed;
  z-index: 1007;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  box-shadow: rgba(0, 0, 0, 0.6) 0px 20px 50px 0px;
  font-size: var(--font-size-400);
}
#toast a:not(.button) {
  text-decoration: underline;
  color: var(--color-white) !important;
}
#toast.info {
  background-color: var(--dark);
}
#toast.warning {
  background-color: var(--warning);
}
#toast.error {
  background-color: var(--error);
}

@keyframes toastIn {
  from {
    bottom: 0;
    opacity: 0;
  }
  to {
    bottom: 30px;
    opacity: 1;
  }
}
@keyframes toastOut {
  from {
    bottom: 30px;
    opacity: 1;
  }
  to {
    bottom: 0;
    opacity: 0;
  }
}
body.toast-active div, body.toast-active a, body.toast-active label {
  animation: toastErrorCursor 1000ms;
}
body.toast-active #toast {
  --toast_timing: var(--toast_timing, 2500ms);
  visibility: visible;
  animation: toastIn 0.5s;
}
body.toast-active #toast:not(.persist) {
  animation: toastIn 0.5s, toastOut 0.5s var(--toast_timing);
}

@keyframes toastErrorCursor {
  0% {
    cursor: default;
  }
  1% {
    cursor: not-allowed;
  }
  99% {
    cursor: not-allowed;
  }
  100% {
    cursor: default;
  }
}
body.toast-active:has(#toast.persist):after {
  content: "";
  display: block;
  z-index: 1006;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.4);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* =============================================================================
  Breakpoints
========================================================================== */
@media (width > 48rem) {
  #toast {
    font-size: var(--font-size-500);
  }
}
@layer base {
  [data-tooltip] {
    text-decoration: underline;
    text-decoration-style: dashed;
    text-underline-offset: 2px;
    text-decoration-color: color-mix(in srgb, currentColor, transparent 75%);
  }
  [data-tooltip] svg {
    pointer-events: bounding-box;
  }
  .custom-tooltip {
    --_tt-clr: var(--tt-clr, var(--white));
    --_tt-bg: var(--tt-bg, var(--dark));
    --_tt-fs: var(--tt-fs, 12px);
    position: absolute;
    inset: unset;
    margin: 0;
    background: var(--_tt-bg);
    color: var(--_tt-clr);
    padding: 6px 10px;
    border-radius: 4px;
    outline: none;
    font-size: var(--_tt-fs);
    max-width: 250px;
    pointer-events: none;
    top: anchor(bottom);
    left: anchor(left);
    margin-top: 6px;
    position-try-fallbacks: --tooltip-anchor-right, --tooltip-anchor-top-left, --tooltip-anchor-top-right;
  }
  .custom-tooltip:has(img) {
    padding: 6px;
  }
  @position-try --tooltip-anchor-right {
    inset: unset;
    top: anchor(bottom);
    right: anchor(right);
  }
  @position-try --tooltip-anchor-top-left {
    inset: unset;
    margin: 0;
    bottom: anchor(top);
    left: anchor(left);
    margin-bottom: 6px;
  }
  @position-try --tooltip-anchor-top-right {
    inset: unset;
    margin: 0;
    bottom: anchor(top);
    right: anchor(right);
    margin-bottom: 6px;
  }
}
/* =============================================================================
  User Switching
========================================================================== */
#user_switching_switch_on {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 300;
}
#user_switching_switch_on a {
  background-color: var(--error);
  font-size: 0;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  display: block;
  opacity: 0.5;
}
#user_switching_switch_on a:before {
  content: "";
  width: 50%;
  height: 50%;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3C!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath d='M208 96a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM123.7 200.5c1-.4 1.9-.8 2.9-1.2l-16.9 63.5c-5.6 21.1-.1 43.6 14.7 59.7l70.7 77.1 22 88.1c4.3 17.1 21.7 27.6 38.8 23.3s27.6-21.7 23.3-38.8l-23-92.1c-1.9-7.8-5.8-14.9-11.2-20.8l-49.5-54 19.3-65.5 9.6 23c4.4 10.6 12.5 19.3 22.8 24.5l26.7 13.3c15.8 7.9 35 1.5 42.9-14.3s1.5-35-14.3-42.9L281 232.7l-15.3-36.8C248.5 154.8 208.3 128 163.7 128c-22.8 0-45.3 4.8-66.1 14l-8 3.5c-32.9 14.6-58.1 42.4-69.4 76.5l-2.6 7.8c-5.6 16.8 3.5 34.9 20.2 40.5s34.9-3.5 40.5-20.2l2.6-7.8c5.7-17.1 18.3-30.9 34.7-38.2l8-3.5zm-30 135.1L68.7 398 9.4 457.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L116.3 441c4.6-4.6 8.2-10.1 10.6-16.1l14.5-36.2-40.7-44.4c-2.5-2.7-4.8-5.6-7-8.6zm347.7 119c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L461.3 384H480c88.4 0 160-71.6 160-160s-71.6-160-160-160L352 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l128 0c53 0 96 43 96 96s-43 96-96 96H461.3l25.4-25.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-80 80c-12.5 12.5-12.5 32.8 0 45.3l80 80z' fill='%23fff'/%3E%3C/svg%3E") center center no-repeat;
  background-size: contain;
}
#user_switching_switch_on a:hover {
  transform: scale(1.02);
  opacity: 1;
}

/* =============================================================================
  Widget
========================================================================== */
@layer base {
  .widget {
    position: relative;
    display: grid;
    padding: var(--inline-margin, 32px);
    gap: var(--spacing-md, 16px);
    background-color: var(--white);
    border-radius: var(--br-md, 16px);
    align-content: start;
    z-index: 1;
  }
  .widget.widget--dashboard {
    min-height: 100%;
  }
  .widget-list {
    position: relative;
    display: grid;
    gap: var(--spacing-md, 1rem);
  }
  .widget-list.loading {
    position: relative;
    min-height: 270px;
    /* 5 rows * (38px row + 16px spacing) = 270px */
    background-color: #fff;
    padding: 1rem 0;
    /* Draw 5 grey bars with spacing between them */
    /* Shimmer overlay sweeping across all rows */
  }
  .widget-list.loading:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: repeating-linear-gradient(to bottom, #eeeeee, #eeeeee 38px, transparent 38px, transparent 54px);
    pointer-events: none;
  }
  .widget-list.loading:after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    pointer-events: none;
  }
  .widget-list .item {
    display: block;
    background-color: var(--light);
    border-radius: var(--br-sm);
    margin-bottom: 0;
    padding: var(--spacing-sm) var(--spacing-md);
    text-decoration: none;
    line-height: 1.6;
  }
  .widget-list .item .row span {
    flex-grow: 1;
  }
  .widget-list .item:link:hover, .widget-list .item:link:focus-within, .widget-list .item:visited:hover, .widget-list .item:visited:focus-within {
    background-color: var(--medium);
    color: var(--black);
  }
  .widget-list .item:last-childsvg {
    margin-left: auto;
  }
}
.widget-buttons-list {
  justify-items: start;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
/* =============================================================================
  Visiblity
========================================================================== */
.hide {
  display: none !important;
}

.show-for-sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.is-show-dm {
  display: none;
}

@media (hover: none) {
  .is-show-hover {
    display: none;
  }
}
@media screen and (min-width: 49rem) {
  .is-hide-sm {
    display: none !important;
  }
}
@media screen and (min-width: 64.9375rem) {
  .is-hide-md {
    display: none !important;
  }
}
@media screen and (min-width: 76.5625rem) {
  .is-hide-lg {
    display: none !important;
  }
}
@media screen and (min-width: 107.25rem) {
  .is-hide-xl {
    display: none !important;
  }
}
@media screen and (max-width: 48rem) {
  .is-hide-xs-only {
    display: none !important;
  }
  .is-show-sm, .is-show-md, .is-show-lg, .is-show-xl {
    display: none !important;
  }
}
@media screen and (min-width: 49rem) and (max-width: 63.9375rem) {
  .is-hide-sm-only {
    display: none !important;
  }
  .is-show-md, .is-show-lg, .is-show-xl {
    display: none !important;
  }
}
@media screen and (min-width: 64.9375rem) and (max-width: 75.5625rem) {
  .is-hide-md-only {
    display: none !important;
  }
  .is-show-lg, .is-show-xl {
    display: none !important;
  }
}
@media screen and (min-width: 76.5625rem) and (max-width: 106.25rem) {
  .is-hide-lg-only {
    display: none !important;
  }
  .is-show-xl {
    display: none !important;
  }
}
@media screen and (min-width: 107.25rem) {
  .is-hide-xl-only {
    display: none !important;
  }
}
@media screen and (min-width: 64rem) {
  .is-hide-dm {
    display: none !important;
  }
  .is-show-dm {
    display: inherit !important;
  }
}
/* =============================================================================
  Device type
========================================================================== */
.is-show-touch, .is-show-mouse, .is-show-touch-mouse {
  display: none;
}

/* mobile device */
@media (pointer: coarse) {
  .is-show-touch {
    display: inherit;
  }
  .is-hide-touch {
    display: inherit !important;
  }
}
/* desktop */
@media (pointer: fine), (pointer: none) {
  .is-show-mouse {
    display: inherit;
  }
  .is-hide-mouse {
    display: none !important;
  }
}
/* touch desktop */
@media (pointer: fine) and (any-pointer: coarse) {
  .is-show-touch-mouse {
    display: inherit;
  }
  .is-hide-touch-mouse {
    display: none !important;
  }
}
@layer typography {
  /* =============================================================================
    Typography
  ========================================================================== */
  /* =============================================================================
    Main
  ========================================================================== */
  body {
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-300);
    color: var(--black);
  }
  body ::selection {
    background-color: var(--secondary);
    color: var(--white);
  }
  /* =============================================================================
    Headers
  ========================================================================== */
  h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-weight: var(--font-weight-semibold);
  }
  h1, .h1 {
    font-size: var(--font-size-900);
  }
  h2, .h2 {
    font-size: var(--typography-h2-size);
  }
  h3, .h3 {
    font-size: var(--typography-h3-size);
  }
  h4, .h4 {
    font-size: var(--typography-h4-size);
  }
  h5, .h5 {
    font-size: var(--typography-h5-size);
  }
  h6, .h6 {
    font-size: var(--typography-h6-size);
  }
  .title {
    display: flex;
    align-items: center;
    gap: var(--spacing-spacing-md, 16px);
    margin-bottom: var(--spacing-md);
  }
  .title .icon {
    height: 1.67em;
    color: var(--primary);
  }
  /* =============================================================================
    Body Copy
  ========================================================================== */
  p {
    line-height: var(--typography-body-line-height);
  }
  .lead {
    font-size: var(--typography-lead-size);
    line-height: 1.3;
  }
  .lead p {
    font-size: var(--typography-lead-size);
    line-height: 1.3;
  }
  .small {
    font-size: 0.875em;
  }
  .large {
    font-size: 1.5em !important;
  }
  .overline {
    font-size: 1.375rem;
    text-transform: uppercase;
    letter-spacing: 1.36;
    line-height: 1.36em;
  }
  .overline.ul {
    border-bottom: 1px solid var(--color-medium);
    margin-bottom: 0.625rem;
  }
  .overline.small-header {
    font-size: 0.875em;
    border-bottom: 1px solid var(--color-medium);
    margin-bottom: 0.625rem;
  }
  .uc {
    text-transform: uppercase;
  }
  .sc {
    text-transform: none !important;
  }
  strong, .strong {
    font-weight: var(--font-weight-semibold);
  }
  .hr-text {
    display: flex;
    align-items: center;
    justify-content: left;
  }
  .hr-text:after {
    background: currentColor;
    height: 2px;
    flex: 1;
    margin-left: 1em;
    content: "";
  }
  .break-word {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-all;
    word-break: break-word;
    hyphens: auto;
  }
  blockquote {
    background-color: var(--color-light);
    padding: 1rem;
    font-size: 1.125rem;
    font-style: italic;
    margin-bottom: var(--layout-spacing);
  }
  /* =============================================================================
    Links
  ========================================================================== */
  a, a:visited {
    transition: color 150ms ease;
    text-underline-offset: 2px;
    text-decoration-color: color-mix(in srgb, currentColor, transparent 75%);
    color: currentColor;
  }
  a:hover, a:visited:hover {
    color: var(--secondary);
  }
  a:link, a:visited:link {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
  }
  a.has-icon [class^=icon-], a.has-icon [class*=icon-], a:visited.has-icon [class^=icon-], a:visited.has-icon [class*=icon-] {
    align-items: center;
    display: inline-flex;
    justify-content: center;
  }
  a.has-icon [class^=icon-]:first-child:not(:last-child), a.has-icon [class*=icon-]:first-child:not(:last-child), a:visited.has-icon [class^=icon-]:first-child:not(:last-child), a:visited.has-icon [class*=icon-]:first-child:not(:last-child) {
    margin-right: 0.5em;
  }
  a.has-icon [class^=icon-]:last-child:not(:first-child), a.has-icon [class*=icon-]:last-child:not(:first-child), a:visited.has-icon [class^=icon-]:last-child:not(:first-child), a:visited.has-icon [class*=icon-]:last-child:not(:first-child) {
    margin-left: 0.5em;
  }
  [data-href] {
    cursor: pointer;
  }
  [data-copy] {
    position: relative;
  }
  [data-copy]:after {
    display: block;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    font-size: 0.75rem;
    content: "Copied!";
    transform: scale(0);
    transform-origin: center;
    transition: transform 250ms ease-out;
  }
  [data-copy].is-copied:after {
    transform: scale(1);
  }
  /* =============================================================================
    Text Alignment
  ========================================================================== */
  .text-right {
    text-align: right;
    justify-items: end;
  }
  .text-center {
    text-align: center;
  }
  /* =============================================================================
  Lists
  ========================================================================== */
  ul.is-line {
    margin-left: 0;
    list-style-type: none;
  }
  ul.is-line li {
    margin-bottom: 1rem;
  }
  ul.is-line li:before {
    display: inline-block;
    content: "–";
    position: relative;
    font-size: 1em;
    color: var(--color-primary);
    margin-right: 0.75em;
    font-weight: var(--typography-bold-weight);
  }
  ul.is-line li a {
    padding: 0;
  }
}