@charset "UTF-8";
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

button,
fieldset,
input,
search,
legend,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
.item-view .grid-table.digital-decoder-function .digital-decoder-function-key,
.item-view .grid-table.listing.digital-decoder-function-images .digital-decoder-function-key,
.item-view .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-key,
.item-view .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .digital-decoder-function-key,
.item-view .grid-table.listing.digital-decoder-function-images:not(.edit):not(.search) .grid-item .digital-decoder-function-key,
.item-view .grid-table.listing.digital-decoder-function-mappings:not(.edit):not(.search) .grid-item .digital-decoder-function-key,
h5,
.nav__link,
[data-tooltip]::after,
h6,
.dropdown__link,
.dropdown__sublink,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/** AVdb **/
/*
 * Noobs!
 */
:root {
  --dashboard-chart-colours: hsl(208, 7%, 46%), hsl(337, 77%, 15%), hsl(181, 100%, 20%), hsl(25, 100%, 66%), hsl(199, 72%, 36%), #393F4C, hsl(73, 72%, 75%) hsl(340, 100%, 22%), hsl(182, 52%, 42%), hsl(16, 100%, 66%), hsl(286, 41%, 16%);
}

body {
  --colour-body-container-bg: linear-gradient( to bottom, #262C38, #2D3442, #393F4C );
}

:root {
  --scaling-factor: 1;
}

:root {
  --default-font-size: 14px;
}
@media only screen and (min-width: 0px) {
  :root {
    --scaling-factor: 0.7;
    --breakpoint: "xs";
  }
}
@media only screen and (min-width: 481px) {
  :root {
    --scaling-factor: 0.8;
    --breakpoint: "sm";
  }
}
@media only screen and (min-width: 769px) {
  :root {
    --scaling-factor: 0.9;
    --breakpoint: "md";
  }
}
@media only screen and (min-width: 1281px) {
  :root {
    --scaling-factor: 1;
    --breakpoint: "lg";
  }
}
@media only screen and (min-width: 1921px) {
  :root {
    --scaling-factor: 1.1;
    --breakpoint: "xl";
  }
}

.text--uppercase, .dropdown__link, .dropdown__sublink, .nav__link {
  text-transform: uppercase;
}
.text--lowercase {
  text-transform: lowercase;
}
.text--capitalise {
  text-transform: capitalize;
}
.text--regular {
  text-transform: none;
}

.subheading {
  font-size: 80% !important;
  font-weight: 200 !important;
}

.flex-column, .horizontal-align-centre, .flex-column--xl, .flex-column--lg, .flex-column--md, .flex-column--sm, .flex-column--xs {
  display: flex;
  flex-direction: column;
}
.flex-column--xs {
  gap: 0.25rem;
}
.flex-column--sm {
  gap: 0.5rem;
}
.flex-column--md {
  gap: 1rem;
}
.flex-column--lg {
  gap: 1.75rem;
}
.flex-column--xl {
  gap: 3.5rem;
}

.flex-row, .vertical-align, .flex-row--xl, .flex-row--lg, .flex-row--md, button.image,
.btn.image, .flex-row--sm, .item-view .grid-table.digital-decoder-function .selectize-digital-decoder-function-template > .selectize-input:has(input:nth-child(2)),
.item-view .grid-table.digital-decoder-function .selectize-digital-decoder-function-image > .selectize-input:has(input:nth-child(2)),
.item-view .grid-table.digital-decoder-function .selectize-digital-decoder-function-image.esu > .selectize-input:has(input:nth-child(2)),
.item-view .grid-table.listing.digital-decoder-function-images .selectize-digital-decoder-function-template > .selectize-input:has(input:nth-child(2)),
.item-view .grid-table.listing.digital-decoder-function-images .selectize-digital-decoder-function-image > .selectize-input:has(input:nth-child(2)),
.item-view .grid-table.listing.digital-decoder-function-images .selectize-digital-decoder-function-image.esu > .selectize-input:has(input:nth-child(2)),
.item-view .grid-table.listing.digital-decoder-function-mappings .selectize-digital-decoder-function-template > .selectize-input:has(input:nth-child(2)),
.item-view .grid-table.listing.digital-decoder-function-mappings .selectize-digital-decoder-function-image > .selectize-input:has(input:nth-child(2)),
.item-view .grid-table.listing.digital-decoder-function-mappings .selectize-digital-decoder-function-image.esu > .selectize-input:has(input:nth-child(2)), .item-view .grid-table.digital-decoder-function .digital-decoder-function-template-option,
.item-view .grid-table.listing.digital-decoder-function-images .digital-decoder-function-template-option,
.item-view .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-template-option, .item-view .grid-table.digital-decoder-function .digital-decoder-function-image-option,
.item-view .grid-table.listing.digital-decoder-function-images .digital-decoder-function-image-option,
.item-view .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-image-option, button.icon,
.btn.icon, .flex-row--xs {
  display: flex;
  flex-direction: row;
}
.flex-row--xs {
  gap: 0.25rem;
}
.flex-row--sm, .item-view .grid-table.digital-decoder-function .selectize-digital-decoder-function-template > .selectize-input:has(input:nth-child(2)),
.item-view .grid-table.digital-decoder-function .selectize-digital-decoder-function-image > .selectize-input:has(input:nth-child(2)),
.item-view .grid-table.digital-decoder-function .selectize-digital-decoder-function-image.esu > .selectize-input:has(input:nth-child(2)),
.item-view .grid-table.listing.digital-decoder-function-images .selectize-digital-decoder-function-template > .selectize-input:has(input:nth-child(2)),
.item-view .grid-table.listing.digital-decoder-function-images .selectize-digital-decoder-function-image > .selectize-input:has(input:nth-child(2)),
.item-view .grid-table.listing.digital-decoder-function-images .selectize-digital-decoder-function-image.esu > .selectize-input:has(input:nth-child(2)),
.item-view .grid-table.listing.digital-decoder-function-mappings .selectize-digital-decoder-function-template > .selectize-input:has(input:nth-child(2)),
.item-view .grid-table.listing.digital-decoder-function-mappings .selectize-digital-decoder-function-image > .selectize-input:has(input:nth-child(2)),
.item-view .grid-table.listing.digital-decoder-function-mappings .selectize-digital-decoder-function-image.esu > .selectize-input:has(input:nth-child(2)), .item-view .grid-table.digital-decoder-function .digital-decoder-function-template-option,
.item-view .grid-table.listing.digital-decoder-function-images .digital-decoder-function-template-option,
.item-view .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-template-option, .item-view .grid-table.digital-decoder-function .digital-decoder-function-image-option,
.item-view .grid-table.listing.digital-decoder-function-images .digital-decoder-function-image-option,
.item-view .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-image-option, button.icon,
.btn.icon {
  gap: 0.5rem;
}
.flex-row--md, button.image,
.btn.image {
  gap: 1rem;
}
.flex-row--lg {
  gap: 1.75rem;
}
.flex-row--xl {
  gap: 3.5rem;
}

.vertical-align {
  align-items: center;
  gap: 0.5rem;
}

.horizontal-align-centre {
  align-items: center !important;
  gap: 0.5rem;
}

.grid-table {
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: var(--col-layout, max-content minmax(0, 1fr));
  row-gap: var(--row-gap, 1rem);
  column-gap: var(--col-gap, 1rem);
  align-items: center;
}
.grid-table[class*="--align-baseline"] {
  align-items: baseline !important;
}
.grid-table[class*="--align-start"] {
  align-items: start !important;
}
.grid-table[class*="--align-end"] {
  align-items: end !important;
}
.grid-table[class*="--align-centre"] {
  align-items: center !important;
}
.grid-table .grid-label {
  grid-column: 1/2;
  text-transform: uppercase;
}
.grid-table .grid-value {
  grid-column: 2/-1;
}
@media only screen and (min-width: 0px) {
  .grid-table .grid-item--responsive {
    display: none;
  }
}
@media only screen and (min-width: 481px) {
  .grid-table .grid-item--responsive {
    display: none;
  }
}
@media only screen and (min-width: 769px) {
  .grid-table .grid-item--responsive {
    display: none;
  }
}
@media only screen and (min-width: 1281px) {
  .grid-table .grid-item--responsive {
    display: initial;
  }
}
@media only screen and (min-width: 1921px) {
  .grid-table .grid-item--responsive {
    display: initial;
  }
}
.grid-table .grid-row {
  display: grid;
  grid-column: 1/-1;
  grid-template-columns: subgrid;
}
.grid-table .grid-row[class*="--align-baseline"] {
  align-items: baseline !important;
}
.grid-table .grid-row[class*="--align-start"] {
  align-items: start !important;
}
.grid-table .grid-row[class*="--align-end"] {
  align-items: end !important;
}
.grid-table .grid-row[class*="--align-centre"] {
  align-items: center !important;
}

.item-image-shadow {
  box-shadow: 0px 45px 25px -30px var(--shadow-colour, none);
}

.image-stack {
  display: grid;
  position: relative;
  grid-template-columns: 1fr;
  padding: 0;
}
.image-stack img {
  width: 100%;
  display: block;
  object-fit: cover;
}

.image-stack__item--bottom {
  grid: 1/1;
  position: absolute;
  aspect-ratio: 1;
  inset-inline: 10%;
  bottom: -15px;
}
.image-stack__item--bottom img {
  position: absolute;
  bottom: 0px;
  filter: blur(15px);
}

.image-stack__item--top {
  grid: 1/1;
  z-index: 1;
}
.image-stack__item--top img {
  box-shadow: 0px 5px 10px -5px #2D3442;
}

/* helper class as we use this quite often throughout  */
.space-between {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 0.5rem;
}
.space-between[class*="--vertical"] {
  flex-direction: column;
  row-gap: 0.5rem;
}
.space-between[class*="--nowrap"] {
  flex-wrap: nowrap;
}
.space-between[class*="--vertical-align--top"] {
  align-items: first baseline;
}

.flex-row-left {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  column-gap: 0.5rem;
}

.flex-row-right {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  column-gap: 0.5rem;
}

.hidden {
  display: none;
}

.pad-top {
  padding-top: var(--pad-by, 0);
}

.external-link {
  position: relative;
}
.external-link::after {
  font-family: "Font Awesome 6 Free";
  content: "\f08e";
  color: hsl(178, 67%, 38%);
  padding-left: 0.5rem;
}
.external-link.sup::after {
  position: absolute;
  vertical-align: text-top;
  font-size: 75%;
}

.align-left, .item-view .grid-table.digital-decoder-function .digital-decoder-function-template-option > label,
.item-view .grid-table.listing.digital-decoder-function-images .digital-decoder-function-template-option > label,
.item-view .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-template-option > label, .item-view .grid-table.digital-decoder-function .digital-decoder-function-image-option > label,
.item-view .grid-table.listing.digital-decoder-function-images .digital-decoder-function-image-option > label,
.item-view .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-image-option > label {
  text-align: left;
}

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

.align-centre {
  text-align: center;
}

.row-wrapper {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
}
.row-wrapper > * {
  padding: 0.25rem;
}

.nowrap, .item-view .grid-table.digital-decoder-function .digital-decoder-function-key,
.item-view .grid-table.listing.digital-decoder-function-images .digital-decoder-function-key,
.item-view .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-key, .item-view .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .digital-decoder-function-key,
.item-view .grid-table.listing.digital-decoder-function-images:not(.edit):not(.search) .grid-item .digital-decoder-function-key,
.item-view .grid-table.listing.digital-decoder-function-mappings:not(.edit):not(.search) .grid-item .digital-decoder-function-key, .check, .check--unselected, .check--selected {
  white-space: nowrap;
}

.no-padding {
  padding: 0 !important;
}

.no-margin {
  margin: 0 !important;
}

ul.li-line-spacing li + li {
  line-height: var(--line-height, normal) !important;
}

.hover-colour-primary:hover {
  color: hsl(178, 67%, 38%) !important;
}

.hover-colour-secondary:hover {
  color: hsl(313, 44%, 40%) !important;
}

.hover-colour-tertiary:hover {
  color: hsl(33, 93%, 48%) !important;
}

[class*=align-items][class*="--start"] {
  align-items: start !important;
}
[class*=align-items][class*="--end"] {
  align-items: end !important;
}
[class*=align-items][class*="--baseline"] {
  align-items: baseline !important;
}
[class*=align-items][class*="--centre"] {
  align-items: center !important;
}

.check--selected {
  color: hsl(178, 67%, 38%);
}
.check--unselected {
  color: hsl(0, 82%, 65%);
}

/**
 * Item view styles for creation, editing and displaying of individual A/V items.
 */
.item-view {
  --section-heading-underline-colour: linear-gradient( to right, hsl(195, 83%, 38%), hsl(313, 44%, 40%), hsl(178, 67%, 38%), hsl(0, 82%, 65%), hsl(33, 93%, 48%) );
  margin: 0 1.75rem;
  /**
   * Item view styles for manufacturers, railway undertakings and retailers.
   */
  /**
   * Item view styles for categories and subcategories.
   */
  /* Item view styles for categories */
}
.item-view.search-results {
  margin: 1.75rem 1.75rem 0.5rem 1.75rem;
}
.item-view a:hover {
  color: hsl(178, 67%, 38%);
}
.item-view h1, .item-view h2 {
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom-width: 4px;
  border-bottom-style: solid;
  border-image: var(--section-heading-underline-colour) 1;
  width: 100%;
  text-transform: none;
}
.item-view section.particulars {
  margin-bottom: 1rem;
}
.item-view section.particulars .card-deck.edit .card__side--front,
.item-view section.particulars .card-deck.edit .card__side--back,
.item-view section.particulars .card-deck.search .card__side--front,
.item-view section.particulars .card-deck.search .card__side--back {
  padding-bottom: 1.75rem;
}
.item-view section.categories > ul {
  font: inherit;
  text-transform: uppercase;
  display: grid;
  grid-template-columns: max-content auto;
  column-gap: 3.5rem;
}
.item-view section.categories > ul li {
  padding: 0.5rem 0;
}
.item-view section a:hover {
  color: hsl(178, 67%, 38%);
}
.item-view .item-description {
  margin-top: 1rem;
  padding: 1rem 0.5rem;
  color: #DEE2E6;
  font-size: calc(var(--scaling-factor) * 1rem);
  font-weight: 200;
  line-height: 135%;
}
.item-view .item-description ul, .item-view .item-description li {
  line-height: 125%;
  list-style-type: square !important;
  list-style-position: inside !important;
}
.item-view .item-description li {
  margin-left: 1rem;
}
.item-view .hero {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.item-view .hero .image-stack img {
  border-radius: 4px;
}
.item-view .hero .item-image {
  display: flex;
  justify-content: center;
  padding: 1rem 0;
}
.item-view .hero .item-image .image img {
  box-shadow: 0 1px 20px 0 hsla(0, 0%, 0%, 0.1), 1px 0px 5px hsla(0, 0%, 0%, 0.25);
  max-height: calc(var(--scaling-factor) * 35vh);
  max-width: 100%;
}
.item-view .hero .item-secondary-images {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 1rem 0;
  gap: 1rem;
}
.item-view .hero .item-secondary-images .image img {
  box-shadow: 0 1px 20px 0 hsla(0, 0%, 0%, 0.1), 1px 0px 5px hsla(0, 0%, 0%, 0.25);
  max-height: calc(var(--scaling-factor) * 10vh);
}
.item-view .hero .item-image .image,
.item-view .hero .item-secondary-images .image {
  position: relative;
  /* The overlay effect (full height and width) - lays on top of the container and over the image */
  /* When you mouse over the container, fade in the overlay icon*/
}
.item-view .hero .item-image .image > .overlay,
.item-view .hero .item-secondary-images .image > .overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: 0.3s ease;
  background-color: rgba(38, 44, 56, 0.85);
  z-index: 1;
  /* The icon inside the overlay is positioned in the middle vertically and horizontally */
}
.item-view .hero .item-image .image > .overlay .icon,
.item-view .hero .item-secondary-images .image > .overlay .icon {
  color: hsl(313, 44%, 40%);
  font-size: calc(var(--scaling-factor) * 2rem);
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}
.item-view .hero .item-image .image:hover .overlay,
.item-view .hero .item-secondary-images .image:hover .overlay {
  opacity: 1;
}
.item-view .hero .title-block {
  padding: 0;
  flex-grow: 1;
  display: grid;
  grid-template-rows: min-content auto auto;
  row-gap: 1rem;
  width: 100%;
}
.item-view .hero .title-block a:hover {
  color: hsl(178, 67%, 38%);
}
.item-view .hero .title-block .feature-labels img {
  height: calc(var(--scaling-factor) * 2.5rem);
}
.item-view .hero .title-block .title-above {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: initial;
  width: 100%;
  padding-bottom: 1rem;
  margin-bottom: 1.75rem;
}
.item-view .hero .title-block .title-above.column {
  flex-direction: column;
}
.item-view .hero .title-block .title-above > .grid-table {
  gap: 0.5rem !important;
}
.item-view .hero .title-block .title-above a {
  color: hsl(195, 83%, 38%);
}
.item-view .hero .title-block .title-above a:hover {
  color: hsl(178, 67%, 38%) !important;
}
.item-view .hero .title-block .title-below {
  display: flex;
  padding: 0;
  justify-content: space-between;
  column-gap: 3.5rem;
  align-items: baseline;
  font-size: initial;
  width: 100%;
}
.item-view .hero .title-block h1 {
  flex-grow: 1;
  letter-spacing: -1px;
  margin: auto 0 1rem 0;
}
.item-view .hero .title-block h2 {
  flex-grow: 1;
  margin: auto 0 0 0;
}
.item-view .hero .title-block h2 input {
  width: 100%;
  text-transform: none;
  letter-spacing: -1px;
  margin: auto 0 0 0;
}
.item-view .particulars {
  width: 100%;
}
.item-view .particulars section {
  background-color: var(--particulars-section-bg-colour, #393F4C);
}
.item-view .particulars section > img {
  max-width: 100px;
}
.item-view .item-notes {
  color: #DEE2E6;
  font-size: calc(var(--scaling-factor) * 1.25rem);
  font-weight: lighter;
  line-height: 175%;
}
.item-view .item-notes ul, .item-view .item-notes li {
  line-height: 150%;
  list-style-type: square !important;
  list-style-position: inside !important;
}
.item-view .item-notes li {
  margin-left: 1rem;
}
.item-view.edit .item-image {
  position: relative;
}
.item-view.edit .item-image::after {
  content: attr(data-label) " ";
  z-index: 500;
  position: absolute;
  top: 50%;
  left: 50%;
  pointer-events: none;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  background-color: hsl(178, 67%, 38%);
  padding: 0.25rem 0.75rem;
  transform: translate(-50%, -50%);
  text-align: center;
}
.item-view.edit .item-image:hover::after {
  opacity: 1;
}
.item-view.edit .title-block h1 {
  margin: auto 0 0 0 !important;
  border-bottom: none;
}
.item-view.edit .title-block h1 input {
  width: 100%;
  text-transform: none;
  letter-spacing: -1px;
  margin: auto 0 0 0;
  border-bottom: 2px solid hsl(178, 67%, 38%);
}
.item-view.edit .title-block h2 {
  border-bottom: none;
}
.item-view.search .title-block h1 {
  margin: auto 0 0 0 !important;
  border-bottom: none;
}
.item-view.search .title-block h1 input {
  width: 100%;
  text-transform: none;
  letter-spacing: -1px;
  margin: auto 0 0 0;
  border-bottom: 2px solid hsl(178, 67%, 38%);
}
.item-view.search .title-block h2 {
  border-bottom: none;
}
.item-view.search.moba_item .particulars {
  display: grid;
  width: 100%;
  gap: 3.5rem;
}
.item-view.manufacturer .hero, .item-view.railway_undertaking .hero, .item-view.retailer .hero {
  flex-direction: row;
  margin-bottom: 0.5rem;
}
.item-view.manufacturer .hero .image-stack,
.item-view.manufacturer .hero .item-image, .item-view.railway_undertaking .hero .image-stack,
.item-view.railway_undertaking .hero .item-image, .item-view.retailer .hero .image-stack,
.item-view.retailer .hero .item-image {
  max-width: calc(350px * var(--scaling-factor));
}
.item-view.manufacturer .hero .item-image img, .item-view.railway_undertaking .hero .item-image img, .item-view.retailer .hero .item-image img {
  object-fit: cover;
  max-width: calc(350px * var(--scaling-factor));
  box-shadow: 0 1px 20px 0 hsla(0, 0%, 0%, 0.1), 1px 0px 5px hsla(0, 0%, 0%, 0.25);
  overflow: hidden;
}
.item-view.manufacturer .hero .title-block, .item-view.railway_undertaking .hero .title-block, .item-view.retailer .hero .title-block {
  width: 100%;
}
.item-view.manufacturer .hero .title-block .title-above, .item-view.railway_undertaking .hero .title-block .title-above, .item-view.retailer .hero .title-block .title-above {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.item-view.manufacturer .hero .title-block .title-above .right, .item-view.railway_undertaking .hero .title-block .title-above .right, .item-view.retailer .hero .title-block .title-above .right {
  display: flex;
  justify-content: flex-end;
}
.item-view.manufacturer .hero .title-block h1, .item-view.railway_undertaking .hero .title-block h1, .item-view.retailer .hero .title-block h1 {
  flex-grow: 1;
  letter-spacing: -1.5px;
  margin: auto 0 1rem 0;
}
.item-view.manufacturer .hero .title-block h1 input, .item-view.railway_undertaking .hero .title-block h1 input, .item-view.retailer .hero .title-block h1 input {
  width: 100%;
  font-weight: 500;
  letter-spacing: -1.5px;
  margin: auto 0 0 0;
}
.item-view.manufacturer .hero .title-block .title,
.item-view.manufacturer .hero .title-block .name, .item-view.railway_undertaking .hero .title-block .title,
.item-view.railway_undertaking .hero .title-block .name, .item-view.retailer .hero .title-block .title,
.item-view.retailer .hero .title-block .name {
  display: flex;
  justify-content: space-between;
  align-items: end;
  padding-bottom: 0.5rem;
}
.item-view.manufacturer .hero .title-block .series-title-title, .item-view.railway_undertaking .hero .title-block .series-title-title, .item-view.retailer .hero .title-block .series-title-title {
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  padding-bottom: 0.5rem;
  row-gap: 1rem;
}
.item-view.manufacturer .hero .title-block .sort, .item-view.railway_undertaking .hero .title-block .sort, .item-view.retailer .hero .title-block .sort {
  display: flex;
  flex-direction: row;
  column-gap: 1rem;
  align-items: baseline;
}
.item-view.manufacturer .hero .title-block .title-below .alttitle,
.item-view.manufacturer .hero .title-block .title-below .altname, .item-view.railway_undertaking .hero .title-block .title-below .alttitle,
.item-view.railway_undertaking .hero .title-block .title-below .altname, .item-view.retailer .hero .title-block .title-below .alttitle,
.item-view.retailer .hero .title-block .title-below .altname {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.item-view.manufacturer .hero .title-block .title-below .alttitle > span:first-of-type,
.item-view.manufacturer .hero .title-block .title-below .altname > span:first-of-type, .item-view.railway_undertaking .hero .title-block .title-below .alttitle > span:first-of-type,
.item-view.railway_undertaking .hero .title-block .title-below .altname > span:first-of-type, .item-view.retailer .hero .title-block .title-below .alttitle > span:first-of-type,
.item-view.retailer .hero .title-block .title-below .altname > span:first-of-type {
  display: flex;
  gap: 1rem;
}
.item-view.manufacturer .hero .title-block .title-below .artists,
.item-view.manufacturer .hero .title-block .title-below .artists > *, .item-view.railway_undertaking .hero .title-block .title-below .artists,
.item-view.railway_undertaking .hero .title-block .title-below .artists > *, .item-view.retailer .hero .title-block .title-below .artists,
.item-view.retailer .hero .title-block .title-below .artists > * {
  line-height: 1.5;
  text-align: right;
}
.item-view.manufacturer .hero .title-block .title-below .group-members label, .item-view.railway_undertaking .hero .title-block .title-below .group-members label, .item-view.retailer .hero .title-block .title-below .group-members label {
  padding-top: 1.75rem;
}
.item-view.manufacturer .hero .title-block .title-below .group-members > ul, .item-view.railway_undertaking .hero .title-block .title-below .group-members > ul, .item-view.retailer .hero .title-block .title-below .group-members > ul {
  display: flex;
  gap: 1rem;
  align-items: baseline;
}
.item-view.manufacturer .hero .title-block .title-below .group-members > ul li:first-child > label, .item-view.railway_undertaking .hero .title-block .title-below .group-members > ul li:first-child > label, .item-view.retailer .hero .title-block .title-below .group-members > ul li:first-child > label {
  padding-top: 1.75rem;
}
.item-view.manufacturer:not(.edit) .particulars, .item-view.railway_undertaking:not(.edit) .particulars, .item-view.retailer:not(.edit) .particulars {
  display: grid;
  width: 100%;
  row-gap: 1rem;
  column-gap: 3.5rem;
  grid-template-areas: "heading heading" "categories listing";
  grid-template-columns: max-content auto;
}
@media (max-width: 1024px) {
  .item-view.manufacturer:not(.edit) .particulars, .item-view.railway_undertaking:not(.edit) .particulars, .item-view.retailer:not(.edit) .particulars {
    grid-template-areas: "heading" "categories" "listing";
    grid-template-columns: auto;
  }
}
@media (min-width: 2500px) {
  .item-view.manufacturer:not(.edit) .particulars, .item-view.railway_undertaking:not(.edit) .particulars, .item-view.retailer:not(.edit) .particulars {
    grid-template-areas: "heading heading" "categories listing";
    grid-template-columns: max-content auto;
    width: 100%;
  }
}
.item-view.manufacturer:not(.edit) .particulars section.heading, .item-view.railway_undertaking:not(.edit) .particulars section.heading, .item-view.retailer:not(.edit) .particulars section.heading {
  grid-area: heading;
}
.item-view.manufacturer:not(.edit) .particulars section.categories, .item-view.railway_undertaking:not(.edit) .particulars section.categories, .item-view.retailer:not(.edit) .particulars section.categories {
  grid-area: categories;
}
.item-view.manufacturer:not(.edit) .particulars section.listing, .item-view.railway_undertaking:not(.edit) .particulars section.listing, .item-view.retailer:not(.edit) .particulars section.listing {
  grid-area: listing;
}
.item-view.manufacturer:not(.edit) .particulars section.heading, .item-view.railway_undertaking:not(.edit) .particulars section.heading, .item-view.retailer:not(.edit) .particulars section.heading {
  padding: 0;
  margin: 0;
}
.item-view.manufacturer:not(.edit) .particulars section.categories, .item-view.railway_undertaking:not(.edit) .particulars section.categories, .item-view.retailer:not(.edit) .particulars section.categories {
  padding: 0;
  margin: 0;
}
.item-view.manufacturer:not(.edit) .particulars section.categories a:hover, .item-view.railway_undertaking:not(.edit) .particulars section.categories a:hover, .item-view.retailer:not(.edit) .particulars section.categories a:hover {
  color: hsl(178, 67%, 38%) !important;
}
.item-view.manufacturer:not(.edit) .particulars section.categories .grid-table, .item-view.railway_undertaking:not(.edit) .particulars section.categories .grid-table, .item-view.retailer:not(.edit) .particulars section.categories .grid-table {
  grid-template-columns: auto auto;
  row-gap: 0.5rem;
  column-gap: 1rem;
}
.item-view.manufacturer:not(.edit) .particulars section.categories .grid-table:nth-of-type(1), .item-view.railway_undertaking:not(.edit) .particulars section.categories .grid-table:nth-of-type(1), .item-view.retailer:not(.edit) .particulars section.categories .grid-table:nth-of-type(1) {
  margin-bottom: 1rem;
}
.item-view.manufacturer:not(.edit) .particulars section.categories .grid-table:nth-of-type(2), .item-view.railway_undertaking:not(.edit) .particulars section.categories .grid-table:nth-of-type(2), .item-view.retailer:not(.edit) .particulars section.categories .grid-table:nth-of-type(2) {
  row-gap: 1rem;
}
.item-view.manufacturer:not(.edit) .particulars section.categories .grid-table .row-wrapper, .item-view.railway_undertaking:not(.edit) .particulars section.categories .grid-table .row-wrapper, .item-view.retailer:not(.edit) .particulars section.categories .grid-table .row-wrapper {
  transition: background-color 0.3s ease-in;
}
.item-view.manufacturer:not(.edit) .particulars section.categories .grid-table .row-wrapper > *, .item-view.railway_undertaking:not(.edit) .particulars section.categories .grid-table .row-wrapper > *, .item-view.retailer:not(.edit) .particulars section.categories .grid-table .row-wrapper > * {
  padding: 0.25rem;
}
.item-view.manufacturer:not(.edit) .particulars section.categories .grid-table .row-wrapper > *, .item-view.railway_undertaking:not(.edit) .particulars section.categories .grid-table .row-wrapper > *, .item-view.retailer:not(.edit) .particulars section.categories .grid-table .row-wrapper > * {
  background-color: transparent !important;
}
.item-view.manufacturer:not(.edit) .particulars section.categories .grid-table .row-wrapper:hover, .item-view.railway_undertaking:not(.edit) .particulars section.categories .grid-table .row-wrapper:hover, .item-view.retailer:not(.edit) .particulars section.categories .grid-table .row-wrapper:hover {
  background-color: #144552;
}
.item-view.manufacturer:not(.edit) .particulars section.categories .grid-table .row-wrapper.selected, .item-view.railway_undertaking:not(.edit) .particulars section.categories .grid-table .row-wrapper.selected, .item-view.retailer:not(.edit) .particulars section.categories .grid-table .row-wrapper.selected {
  font-weight: bold;
  background-color: rgba(32, 162, 157, 0.25) !important;
}
.item-view.manufacturer:not(.edit) .particulars section.categories .grid-table .row-wrapper.selected:hover, .item-view.railway_undertaking:not(.edit) .particulars section.categories .grid-table .row-wrapper.selected:hover, .item-view.retailer:not(.edit) .particulars section.categories .grid-table .row-wrapper.selected:hover {
  color: hsl(0, 82%, 65%) !important;
}
.item-view.manufacturer:not(.edit) .particulars section.categories .grid-table .row-wrapper.selected > div:nth-last-of-type(1):after, .item-view.railway_undertaking:not(.edit) .particulars section.categories .grid-table .row-wrapper.selected > div:nth-last-of-type(1):after, .item-view.retailer:not(.edit) .particulars section.categories .grid-table .row-wrapper.selected > div:nth-last-of-type(1):after {
  content: "\f00d";
  font: var(--fa-font-solid);
  font-weight: 500;
  color: hsl(0, 82%, 65%);
  padding-left: 0.5rem;
}
.item-view.manufacturer:not(.edit) .particulars section.categories .grid-table:has(> .row-wrapper), .item-view.railway_undertaking:not(.edit) .particulars section.categories .grid-table:has(> .row-wrapper), .item-view.retailer:not(.edit) .particulars section.categories .grid-table:has(> .row-wrapper) {
  gap: 0.5rem 0;
}
.item-view.manufacturer:not(.edit) .particulars section.listing, .item-view.railway_undertaking:not(.edit) .particulars section.listing, .item-view.retailer:not(.edit) .particulars section.listing {
  padding: 0;
  margin: 0;
}
.item-view.category .particulars, .item-view.admin_category .particulars, .item-view.subcategory .particulars, .item-view.admin_subcategory .particulars {
  display: grid;
  width: 100%;
  gap: 3.5rem;
  grid-template-areas: "details";
  grid-template-columns: auto;
}
.item-view.category .particulars section:nth-of-type(1), .item-view.admin_category .particulars section:nth-of-type(1), .item-view.subcategory .particulars section:nth-of-type(1), .item-view.admin_subcategory .particulars section:nth-of-type(1) {
  grid-area: details;
}

.item-view .grid-table.listing {
  column-gap: 0 !important;
}
.item-view .grid-table.listing .image img {
  max-width: calc(85px * var(--scaling-factor));
}
.item-view .grid-table.listing .sort ::after {
  content: "\f0dc";
  font: var(--fa-font-solid);
  left: 1.75rem;
}
.item-view .grid-table.listing .sort.ASC ::after {
  content: "\f0de";
  font: var(--fa-font-solid);
  left: 1.75rem;
}
.item-view .grid-table.listing .sort.DESC ::after {
  content: "\f0dd";
  font: var(--fa-font-solid);
  left: 1.75rem;
}
.item-view .grid-table.listing .row-wrapper a:hover {
  color: hsl(33, 93%, 48%);
}
.item-view .grid-table.listing .row-wrapper.heading {
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #218380;
}
.item-view .grid-table.listing .row-wrapper.heading > * {
  padding: 0 1rem;
}
.item-view .grid-table.listing .row-wrapper.heading a:hover {
  color: hsl(178, 67%, 38%) !important;
  font-weight: 400;
}
.item-view .grid-table.listing .row-wrapper:not(.heading) {
  transition: background-color 0.3s ease-in;
}
.item-view .grid-table.listing .row-wrapper:not(.heading) > * {
  padding: 1rem;
}
.item-view .grid-table.listing .row-wrapper:not(.heading):nth-child(odd) {
  background-color: rgba(57, 63, 76, 0.5);
}
.item-view .grid-table.listing .row-wrapper:not(.heading):hover {
  background-color: #144552;
}
.item-view .grid-table.listing .row-wrapper:not(.heading) .property-sub-property > li:nth-of-type(1) {
  font-size: 1rem;
  text-transform: none;
  font-weight: 400;
}
.item-view .grid-table.listing .row-wrapper:not(.heading) .property-sub-property > li:nth-of-type(2) {
  padding-top: 0.25rem;
  font-size: 0.8rem;
  font-weight: 200;
  text-transform: uppercase;
}
.item-view .grid-table.listing .row-wrapper:not(.heading) .categories-formats > li:nth-of-type(1),
.item-view .grid-table.listing .row-wrapper:not(.heading) .labels-catalogue-id-barcode > li:nth-of-type(1) {
  font-weight: inherit;
}
.item-view .grid-table.listing .row-wrapper > .button-group {
  display: block;
  gap: 0.25rem;
}
.item-view .grid-table.listing .row-wrapper .align-content-centre {
  display: flex;
  justify-content: center;
}
.item-view .grid-table.listing .row-wrapper img {
  height: 50px;
}
.item-view .grid-table.listing.moba_item {
  row-gap: 1rem;
}
@media only screen and (min-width: 0px) {
  .item-view .grid-table.listing.moba_item {
    grid-template-columns: min-content repeat(6, auto);
  }
}
@media only screen and (min-width: 481px) {
  .item-view .grid-table.listing.moba_item {
    grid-template-columns: min-content repeat(6, auto);
  }
}
@media only screen and (min-width: 769px) {
  .item-view .grid-table.listing.moba_item {
    grid-template-columns: min-content repeat(6, auto);
  }
}
@media only screen and (min-width: 1281px) {
  .item-view .grid-table.listing.moba_item {
    grid-template-columns: min-content repeat(9, auto);
  }
}
@media only screen and (min-width: 1921px) {
  .item-view .grid-table.listing.moba_item {
    grid-template-columns: min-content repeat(9, auto);
  }
}
.item-view.moba_item .grid-table.listing {
  row-gap: 1rem;
}
@media only screen and (min-width: 0px) {
  .item-view.moba_item .grid-table.listing {
    grid-template-columns: min-content repeat(6, auto);
  }
}
@media only screen and (min-width: 481px) {
  .item-view.moba_item .grid-table.listing {
    grid-template-columns: min-content repeat(6, auto);
  }
}
@media only screen and (min-width: 769px) {
  .item-view.moba_item .grid-table.listing {
    grid-template-columns: min-content repeat(6, auto);
  }
}
@media only screen and (min-width: 1281px) {
  .item-view.moba_item .grid-table.listing {
    grid-template-columns: min-content repeat(9, auto);
  }
}
@media only screen and (min-width: 1921px) {
  .item-view.moba_item .grid-table.listing {
    grid-template-columns: min-content repeat(9, auto);
  }
}
.item-view.manufacturer .grid-table.listing, .item-view.railway_undertaking .grid-table.listing, .item-view.retailer .grid-table.listing {
  row-gap: 1rem;
  grid-template-columns: min-content auto auto;
}
.item-view.manufacturer .grid-table.listing .row-wrapper > *, .item-view.railway_undertaking .grid-table.listing .row-wrapper > *, .item-view.retailer .grid-table.listing .row-wrapper > * {
  padding: 0.5rem 1.75rem !important;
}
.item-view.manufacturer .grid-table.listing.moba_item, .item-view.railway_undertaking .grid-table.listing.moba_item, .item-view.retailer .grid-table.listing.moba_item {
  row-gap: 1rem;
}
@media only screen and (min-width: 0px) {
  .item-view.manufacturer .grid-table.listing.moba_item, .item-view.railway_undertaking .grid-table.listing.moba_item, .item-view.retailer .grid-table.listing.moba_item {
    grid-template-columns: min-content repeat(6, auto);
  }
}
@media only screen and (min-width: 481px) {
  .item-view.manufacturer .grid-table.listing.moba_item, .item-view.railway_undertaking .grid-table.listing.moba_item, .item-view.retailer .grid-table.listing.moba_item {
    grid-template-columns: min-content repeat(6, auto);
  }
}
@media only screen and (min-width: 769px) {
  .item-view.manufacturer .grid-table.listing.moba_item, .item-view.railway_undertaking .grid-table.listing.moba_item, .item-view.retailer .grid-table.listing.moba_item {
    grid-template-columns: min-content repeat(6, auto);
  }
}
@media only screen and (min-width: 1281px) {
  .item-view.manufacturer .grid-table.listing.moba_item, .item-view.railway_undertaking .grid-table.listing.moba_item, .item-view.retailer .grid-table.listing.moba_item {
    grid-template-columns: min-content repeat(9, auto);
  }
}
@media only screen and (min-width: 1921px) {
  .item-view.manufacturer .grid-table.listing.moba_item, .item-view.railway_undertaking .grid-table.listing.moba_item, .item-view.retailer .grid-table.listing.moba_item {
    grid-template-columns: min-content repeat(9, auto);
  }
}

/* .card-deck will fill rows with cards an ideal size of 300px, but will grow to suit its container.
*  so in grid-template-columns, you can adjust 20rem to whatever you want.
*  I've used rem as it should take into account the monitor resolution and scale accordingly based on the text size of the <html> element.
*  currently it's: calc( $sizing-card-max-width * var( --scaling-factor ) ) 
*  
*  resize the window to see how things behave. Also look at .card img height and see if that suits, you'll notice the images adjust to fit the card.
*/
:root {
  --card-bg-colour: linear-gradient( to bottom right, #2D3442, #393F4C, hsl(213, 36%, 32%) );
  --card-bg-colour-ordered: linear-gradient( to bottom right, #393F4C, hsl(213, 36%, 32%), hsl(276, 16%, 41%), hsl(347, 35%, 55%) );
  --card-bg-colour-wishlist: linear-gradient( to bottom right, #525A6B, #30786C );
  --card-text-colour: #DEE2E6;
  --card-text-colour-ordered: #DEE2E6;
  --card-text-colour-wishlist: #DEE2E6;
  --card-hr-colour: linear-gradient( to right, hsl(195, 83%, 38%), hsl(313, 44%, 40%), hsl(178, 67%, 38%), hsl(0, 82%, 65%), hsl(33, 93%, 48%) );
  --card-outline-colour: #272640;
  --card-image-overlay-bg-colour: #DEE2E6;
  --card-image-overlay-text-colour: hsla(216, 44%, 25%, 0.85);
  --card-bg-colour-hover: linear-gradient( to top left, #2D3442, #393F4C, hsl(213, 36%, 32%) );
  --card-bg-colour-ordered-hover: linear-gradient( to top left, #393F4C, hsl(213, 36%, 32%), hsl(276, 16%, 41%), hsl(347, 35%, 55%) );
  --card-bg-colour-wishlist-hover: linear-gradient( to top left, #525A6B, #30786C );
  --card-text-colour-hover: #30786C;
  --card-text-colour-ordered-hover: #30786C;
  --card-text-colour-wishlist-hover: #DEE2E6;
  --card-hr-colour-hover: linear-gradient( to left, hsl(195, 83%, 38%), hsl(313, 44%, 40%), hsl(178, 67%, 38%), hsl(0, 82%, 65%), hsl(33, 93%, 48%) );
  --card-outline-colour-hover: hsl(313, 44%, 40%);
  --card-border-radius: 0;
  --media-type-image-gradient: radial-gradient( circle closest-side at center, #272640, #25122B, hsl(287, 39%, 20%), hsl(340, 100%, 22%), #168AAD, hsl(351, 59%, 53%) );
}

.card-deck {
  display: grid;
  max-width: 100%;
  width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(min(325px * var(--scaling-factor), 100%), 1fr));
  gap: 1rem;
  margin-inline: auto;
}
.card-deck .card {
  display: flex;
  flex-direction: column;
  padding: 0;
  /* as back is 'absolute' it's size is determined by front */
}
.card-deck .card h1, .card-deck .card h2, .card-deck .card h3, .card-deck .card h4, .card-deck .card .item-view .grid-table.digital-decoder-function .digital-decoder-function-key, .item-view .grid-table.digital-decoder-function .card-deck .card .digital-decoder-function-key,
.card-deck .card .item-view .grid-table.listing.digital-decoder-function-images .digital-decoder-function-key,
.item-view .grid-table.listing.digital-decoder-function-images .card-deck .card .digital-decoder-function-key,
.card-deck .card .item-view .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-key,
.item-view .grid-table.listing.digital-decoder-function-mappings .card-deck .card .digital-decoder-function-key, .card-deck .card .item-view .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .digital-decoder-function-key, .item-view .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .card-deck .card .digital-decoder-function-key,
.card-deck .card .item-view .grid-table.listing.digital-decoder-function-images:not(.edit):not(.search) .grid-item .digital-decoder-function-key,
.item-view .grid-table.listing.digital-decoder-function-images:not(.edit):not(.search) .grid-item .card-deck .card .digital-decoder-function-key,
.card-deck .card .item-view .grid-table.listing.digital-decoder-function-mappings:not(.edit):not(.search) .grid-item .digital-decoder-function-key,
.item-view .grid-table.listing.digital-decoder-function-mappings:not(.edit):not(.search) .grid-item .card-deck .card .digital-decoder-function-key, .card-deck .card h5, .card-deck .card .nav__link, .card-deck .card [data-tooltip]::after, .card-deck .card h6, .card-deck .card .dropdown__link, .card-deck .card .dropdown__sublink {
  border: none;
}
.card-deck .card .cover-art,
.card-deck .card .card-image,
.card-deck .card .item-image {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-image: var(--card-hr-colour) 1;
}
.card-deck .card .card-title,
.card-deck .card .card-heading {
  padding-bottom: 0.5rem;
  margin-bottom: 1.75rem;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-image: var(--card-hr-colour) 1;
}
.card-deck .card .name,
.card-deck .card .title {
  text-transform: none !important;
  padding-bottom: 1rem;
}
.card-deck .card .name:hover,
.card-deck .card .name a:hover,
.card-deck .card .title:hover,
.card-deck .card .title a:hover {
  color: hsl(178, 67%, 38%) !important;
}
.card-deck .card .features {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2;
  flex-wrap: wrap;
}
.card-deck .card .features img {
  height: 1.5rem;
}
.card-deck .card .addresses > i:before {
  font: var(--fa-font-solid);
  content: "@";
  color: hsl(178, 67%, 38%);
  padding-right: 0.25rem;
}
.card-deck .card.flip {
  -webkit-perspective: 1000px;
  perspective: 1000px;
  -moz-perspective: 1000px;
}
.card-deck .card.flip:hover .card__side.flip {
  transform: rotateY(180deg);
}
.card-deck .card .card__side {
  position: relative;
  height: 100%;
}
.card-deck .card .card__side.flip {
  transform-style: preserve-3d;
  transition: 0.6s;
}
.card-deck .card .card__side--front,
.card-deck .card .card__side--back {
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  overflow: visible;
  text-decoration: none;
  color: var(--card-text-colour);
  background: var(--card-bg-colour);
  border-radius: var(--card-border-radius);
  display: flex;
  flex-direction: column;
  padding: 1rem 1rem 1.75rem;
  /* The overlay effect (full height and width) - lays on top of the container and over the image */
}
.card-deck .card .card__side--front > .card-image,
.card-deck .card .card__side--front > .cover-art,
.card-deck .card .card__side--back > .card-image,
.card-deck .card .card__side--back > .cover-art {
  position: relative;
  display: flex;
  justify-content: left;
}
.card-deck .card .card__side--front > .card-image img,
.card-deck .card .card__side--front > .cover-art img,
.card-deck .card .card__side--back > .card-image img,
.card-deck .card .card__side--back > .cover-art img {
  display: block;
  max-width: 100%;
  object-fit: cover; /* this will crop the image to fit the height */
  object-position: center; /* this will center the image */
  border-radius: 4px;
  box-shadow: 0 1px 20px 0 hsla(0, 0%, 0%, 0.1), 1px 0px 5px hsla(0, 0%, 0%, 0.25);
  transition: all 0.5s ease;
  outline: 2px solid transparent;
  position: relative;
}
.card-deck .card .card__side--front .cover-art img,
.card-deck .card .card__side--front .card-image img,
.card-deck .card .card__side--front .item-image img,
.card-deck .card .card__side--back .cover-art img,
.card-deck .card .card__side--back .card-image img,
.card-deck .card .card__side--back .item-image img {
  z-index: 20;
}
.card-deck .card .card__side--front .cover-art .overlay,
.card-deck .card .card__side--front .card-image .overlay,
.card-deck .card .card__side--front .item-image .overlay,
.card-deck .card .card__side--back .cover-art .overlay,
.card-deck .card .card__side--back .card-image .overlay,
.card-deck .card .card__side--back .item-image .overlay {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  z-index: 30;
  opacity: 1;
  pointer-events: none !important;
}
.card-deck .card .card__side--front > .cover-art img:hover,
.card-deck .card .card__side--front > .card-image img:hover,
.card-deck .card .card__side--front > .item-image img:hover,
.card-deck .card .card__side--back > .cover-art img:hover,
.card-deck .card .card__side--back > .card-image img:hover,
.card-deck .card .card__side--back > .item-image img:hover {
  box-shadow: 0 28px 20px 0 hsla(0, 0%, 0%, 0.2);
  outline: 2px solid hsl(313, 44%, 40%);
}
.card-deck .card.flip .card__side--front {
  transform: rotateY(0deg);
}
.card-deck .card .card__side--front {
  z-index: 2;
  color: var(--card-text-colour);
  background: var(--card-bg-colour);
}
.card-deck .card .card__side--front.ordered {
  color: var(--card-text-colour-ordered);
  background: var(--card-bg-colour-ordered);
}
.card-deck .card .card__side--front.wishlist {
  color: var(--card-text-colour-wishlist);
  background: var(--card-bg-colour-wishlist);
}
.card-deck .card .card__side--front .name,
.card-deck .card .card__side--front .title {
  border-image: var(--card-hr-colour) 1;
}
.card-deck .card .card__side--back.flip {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform: rotateY(180deg);
  color: var(--card-text-colour);
  background: var(--card-bg-colour-hover);
}
.card-deck .card .card__side--back.flip.ordered {
  color: var(--card-text-colour-ordered-hover);
  background: var(--card-bg-colour-ordered-hover);
}
.card-deck .card .card__side--back.flip.wishlist {
  color: var(--card-text-colour-wishlist-hover);
  background: var(--card-bg-colour-wishlist-hover);
}
.card-deck .card .card__side--back.flip .name,
.card-deck .card .card__side--back.flip .title {
  border-image: var(--card-hr-colour-hover) 1;
}
.card-deck.hero-menu {
  grid-template-columns: repeat(auto-fit, minmax(min(550px * var(--scaling-factor), 100%), 1fr));
  height: auto;
}
.card-deck.hero-menu .card {
  width: 100%;
  place-items: start center;
}
.card-deck.hero-menu .card .name {
  padding-bottom: 0 !important;
}
.card-deck.hero-menu .card .card-image img {
  height: calc(375px * var(--scaling-factor) * var(--scaling-factor));
  width: 100%;
}
.card-deck.hero-menu .card .card__side--front .card-image img {
  filter: grayscale(100%);
}
.card-deck.hero-menu .card .card__side--back .card-image img {
  filter: grayscale(0%);
}
.card-deck.particulars {
  grid-template-columns: repeat(auto-fit, minmax(min(750px * var(--scaling-factor), 100%), 1fr));
}
.card-deck.particulars.edit {
  grid-template-columns: repeat(auto-fit, minmax(min(950px * var(--scaling-factor), 100%), 1fr));
}
.card-deck.particulars label.grid-label {
  font-weight: 200;
  opacity: 0.6;
}
.card-deck.particulars .grid-table {
  column-gap: 3.5rem;
}
.card-deck.particulars .grid-table .grid-table {
  column-gap: 1.75rem !important;
}
.card-deck.no-bg .card__side--front,
.card-deck.no-bg .card__side--back {
  background: none !important;
}

/* The alert message box */
.alert {
  padding: 20px;
  margin: 1rem;
  border-radius: 4px;
}
.alert.alert-info {
  background-color: #DEE2E6;
  color: hsl(235, 22%, 20%);
}
.alert.alert-success {
  background-color: hsl(178, 67%, 38%);
  color: #2D3442;
}
.alert.alert-warning {
  background-color: hsl(33, 93%, 48%);
  color: #2D3442;
}
.alert.alert-danger {
  background-color: hsl(0, 82%, 65%);
  color: #2D3442;
  font-weight: bold;
}
.alert .closebtn {
  margin-left: 15px;
  color: #DEE2E6;
  font-weight: bold;
  float: right;
  font-size: calc(var(--scaling-factor) * 22px);
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}
.alert .closebtn:hover {
  color: #2D3442;
}

.pagination-container {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
}
.pagination-container .pagination-item {
  list-style-type: none;
  display: inline-block;
  width: 55px;
}
.pagination-container .pagination-item:hover {
  background-color: hsl(351, 59%, 53%);
}
.pagination-container .pagination-item:hover.forward-back {
  background-color: transparent;
}
.pagination-container .pagination-item.is-active {
  background-color: hsl(178, 67%, 38%);
}
.pagination-container .pagination-item.is-active a {
  color: #2D3442;
  font-weight: 600;
}
.pagination-container .pagination-item.first-number {
  border-left: 0;
}
.pagination-container .pagination-item .pagination-link {
  padding: 0.5em 0;
  margin: auto;
  width: 100%;
  height: 100%;
  display: inline-block;
  text-decoration: none;
  color: #DEE2E6;
}
.pagination-container .pagination-item .pagination-link.forward-back {
  color: hsl(178, 67%, 38%);
}
.pagination-container .pagination-item .pagination-link.forward-back :hover {
  color: hsl(351, 59%, 53%);
}
.pagination-container .pagination-item .pagination-link.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
}
.forward-back:hover .pagination-container .pagination-item .pagination-link.disabled {
  color: inherit;
}

.list-separator, .list-separator--bullet, .list-separator--comma, .list-separator--ellipsis, .list-separator--semicolon, .list-separator--pipe {
  display: flex;
  align-items: baseline;
}
.list-separator li:not(:first-of-type)::before, .list-separator--bullet li:not(:first-of-type)::before, .list-separator--comma li:not(:first-of-type)::before, .list-separator--ellipsis li:not(:first-of-type)::before, .list-separator--semicolon li:not(:first-of-type)::before, .list-separator--pipe li:not(:first-of-type)::before {
  font-weight: 400;
  color: #30786C;
  margin-inline: 0.25rem;
}
.list-separator--pipe li:not(:first-of-type)::before {
  content: "|";
}
.list-separator--semicolon li:not(:first-of-type)::before {
  content: ":";
}
.list-separator--ellipsis li:not(:first-of-type)::before {
  content: "…";
}
.list-separator--comma li {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.list-separator--comma li:not(:first-of-type)::before {
  content: ",";
  color: #DEE2E6;
}
.list-separator--bullet li::before {
  font-weight: 400;
  color: #30786C;
  margin-inline: 0.25rem;
  content: "|";
}

.bullet::before {
  content: "//";
  font-weight: 600;
  color: hsl(178, 67%, 38%);
  padding-right: 0.5rem;
}

.hero-menu .card-deck {
  grid-template-columns: repeat(auto-fit, minmax(min(550px * var(--scaling-factor), 100%), 1fr));
  height: auto;
}
.hero-menu .card-deck .card {
  width: 100%;
}
.hero-menu .card-deck .card .card-image img {
  height: calc(375px * var(--scaling-factor));
  width: 100%;
}
.hero-menu .card-deck .card .card__side--front .card-image img {
  filter: grayscale(100%);
}
.hero-menu .card-deck .card .card__side--back .card-image img {
  filter: grayscale(0%);
}

/* TOOLTIP */
[data-tooltip] {
  --bg-colour: #7F899F;
  --fg-colour: #0D131C;
  --tail-height: 8px;
  --neg-offset: -8px;
  position: relative;
  cursor: help;
  isolation: isolate;
}

[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
  translate: 0 var(--neg-offset);
  opacity: 1;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.275, 1.75);
}

[data-tooltip]::before,
[data-tooltip]::after {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.25s ease, translate 1s;
  font-style: normal;
  color: var(--fg-colour, black);
}

/* tail of tooltip */
[data-tooltip]::before {
  content: "";
  background: var(--bg-colour, white);
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
  bottom: calc(100% - var(--tail-height));
  width: var(--tail-height);
  height: var(--tail-height);
  z-index: 102; /* keep the tail over the bubble for things like shadows */
}

/* tooltip bubble */
[data-tooltip]::after {
  font: initial;
  content: attr(data-tooltip);
  white-space: nowrap;
  pointer-events: none;
  background: var(--bg-colour);
  padding: 0.2rem 0.35rem;
  border-radius: 0.25rem;
  bottom: 100%;
  z-index: 101;
}

/* LEFT ALIGNED  */
[data-tooltip-alignment=left]::after,
[data-tooltip-alignment=left]::before {
  left: 5px; /* this is an arbitrary value to move it away from the very edge */
  transform: translateX(0);
  border-bottom-left-radius: 0px;
}

[data-tooltip-alignment=left]::before {
  clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
}

/* RIGHT ALIGNED  */
[data-tooltip-alignment=right]::after,
[data-tooltip-alignment=right]::before {
  left: auto;
  right: 5px; /* so is this */
  transform: translateX(0);
  border-bottom-right-radius: 0px;
}

[data-tooltip-alignment=right]::before {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
}

#image-carousel {
  width: 100%;
  max-width: 1920px;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}
#image-carousel img {
  border-radius: 4px;
  box-shadow: 0 1px 20px 0 hsla(0, 0%, 0%, 0.1), 1px 0px 5px hsla(0, 0%, 0%, 0.25);
  object-fit: contain;
  object-position: var(--centre-position, top center);
  width: 100%;
  height: 100%;
  box-shadow: none !important;
}

.slideshow {
  inset: 0;
  display: grid;
  grid-template-areas: "button_prev image button_next" ". indicator .";
  grid-template-rows: max-content 5px;
  grid-template-columns: min-content auto min-content;
  column-gap: 1rem;
  row-gap: 1px;
  align-items: center;
  width: 100%;
  isolation: isolate;
  /* The overlay effect (full height and width) - lays on top of the container and over the image */
}
.slideshow button#image-carousel-prev {
  grid-area: button_prev;
}
.slideshow button#image-carousel-next {
  grid-area: button_next;
}
.slideshow:hover .overlay {
  opacity: 1;
}
.slideshow .slide {
  --centre-position: top center;
  position: relative;
  grid-row: 1;
  grid-column: 1;
  grid-area: image;
  opacity: 0;
  transition: opacity 1s;
}
.slideshow .slide.current {
  opacity: 1;
}
.slideshow .overlay {
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: 0.3s ease;
  background-color: rgba(38, 44, 56, 0.85);
  grid-area: image;
  z-index: 1;
  /* The icon inside the overlay is positioned in the middle vertically and horizontally */
}
.slideshow .overlay .icon {
  color: hsl(178, 67%, 38%);
  font-size: calc(var(--scaling-factor) * 10rem);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.slideshow .overlay .icon:hover {
  color: hsl(0, 82%, 65%) !important;
}
.slideshow #image-carousel-time-indicator {
  grid-area: indicator;
  bottom: 0;
  left: 0;
  height: 5px;
  background: linear-gradient(to right, hsl(195, 83%, 38%), hsl(313, 44%, 40%), hsl(178, 67%, 38%), hsl(0, 82%, 65%), hsl(33, 93%, 48%));
  z-index: 1;
}
.slideshow #image-carousel-time-indicator.active {
  background: #2D3442;
}

@keyframes timeIndicator {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
.chart-canvas-container {
  color: red;
}

.card-deck.dashboard {
  grid-template-columns: repeat(auto-fit, minmax(min(650px * var(--scaling-factor), 100%), 1fr));
  grid-template-rows: min-content;
  gap: 3.5rem;
}
.card-deck.dashboard .card {
  --card-border-radius: 16px;
}
.card-deck.dashboard .card .card__side .grid-table.dashboard-data-chart {
  grid-template-columns: 2fr 0.5fr 1fr 0.5fr;
  align-items: start;
  column-gap: 0;
}
.card-deck.dashboard .card .card__side .grid-table .row-wrapper {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: subgrid;
  transition: background-color 0.3s ease-in;
}
.card-deck.dashboard .card .card__side .grid-table .row-wrapper:hover {
  background-color: rgba(147, 57, 127, 0.25) !important;
}
.card-deck.dashboard .card .card__side .grid-table .row-wrapper > .grid-label,
.card-deck.dashboard .card .card__side .grid-table .row-wrapper > .grid-value,
.card-deck.dashboard .card .card__side .grid-table .row-wrapper > .grid-item {
  padding: 0.25rem 1rem;
}
.card-deck.dashboard .card .card__side .grid-table:has(> .row-wrapper) {
  gap: 0.5rem 0;
}
.card-deck.dashboard .card .grid-label, .card-deck.dashboard .card .grid-value, .card-deck.dashboard .card .grid-item {
  line-height: 125%;
}
.card-deck.dashboard .card .grid-label {
  font-weight: 200;
  opacity: 0.75;
  text-transform: none;
}

/**
 * Option items
 */
/**
 * Dropdown
 */
/**
 * Dropdown arrow
 */
/**
 * Input
 */
/**
 * Remove/clear 'x' symbol
 */
/**
 * Padding and margins
 */
.selectize-control.plugin-drag_drop.multi > .selectize-input.dragging {
  overflow: visible;
}
.selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder {
  visibility: visible !important;
  background: #f2f2f2 !important;
  background: rgba(0, 0, 0, 0.06) !important;
  border: 0 none !important;
  box-shadow: inset 0 0 12px 4px #fff;
}
.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after {
  content: "!";
  visibility: hidden;
}
.selectize-control.plugin-drag_drop .ui-sortable-helper {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.selectize-dropdown.plugin-dropdown_header .selectize-dropdown-header {
  position: relative;
  padding: 10px 6px;
  border-bottom: 1px solid rgba(222, 226, 230, 0.05);
  background: rgba(46, 53, 67, 0.8575);
  border-radius: 3px 3px 0 0;
}
.selectize-dropdown.plugin-dropdown_header .selectize-dropdown-header-close {
  position: absolute;
  right: 6px;
  top: 50%;
  color: #DEE2E6;
  opacity: 0.4;
  margin-top: -12px;
  line-height: 20px;
  font-size: 20px !important;
  text-decoration: none;
}
.selectize-dropdown.plugin-dropdown_header .selectize-dropdown-header-close:hover {
  color: #95a2af;
}

.selectize-dropdown.plugin-optgroup_columns .selectize-dropdown-content {
  display: flex;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup {
  border-right: 1px solid #f2f2f2;
  border-top: 0 none;
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup:last-child {
  border-right: 0 none;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup:before {
  display: none;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup-header {
  border-top: 0 none;
}

.selectize-control.plugin-remove_button .item {
  display: inline-flex;
  align-items: center;
  padding-right: 0 !important;
}
.selectize-control.plugin-remove_button .item .remove {
  color: inherit;
  text-decoration: none;
  vertical-align: middle;
  display: inline-block;
  padding: 2px 4px;
  border-left: 1px solid rgba(174, 175, 180, 0.75);
  border-radius: 0 2px 2px 0;
  box-sizing: border-box;
  margin-left: 4px;
}
.selectize-control.plugin-remove_button .item .remove:hover {
  background: rgba(0, 0, 0, 0.05);
}
.selectize-control.plugin-remove_button .item.active .remove {
  border-left-color: orange;
}
.selectize-control.plugin-remove_button .disabled .item .remove:hover {
  background: none;
}
.selectize-control.plugin-remove_button .disabled .item .remove {
  border-left-color: rgba(254, 254, 254, 0.75);
}

.selectize-control.plugin-clear_button .clear {
  text-decoration: none;
  display: flex;
  position: absolute;
  height: 100%;
  width: 25px;
  top: 0;
  right: calc(6px - 4px);
  color: rgb(0, 0, 0);
  opacity: 0.4;
  font-weight: bold;
  border: none;
  cursor: pointer;
  z-index: 1;
  font-size: 21px;
  justify-content: center;
  align-items: center;
}
.selectize-control.plugin-clear_button .clear:hover {
  opacity: 1;
}
.selectize-control.plugin-clear_button.single .clear {
  right: calc(6px - 4px + 1.5rem);
}

.selectize-dropdown.plugin-auto_position.selectize-position-top {
  border-top: 1px solid rgba(222, 226, 230, 0.05);
  border-bottom: 0 none;
  border-radius: 3px 3px 0 0;
  box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.18);
}

.selectize-control.plugin-auto_position .selectize-input.selectize-position-top.dropdown-active {
  border-radius: 0 0 3px 3px;
  border-top: 0 none;
}
.selectize-control.plugin-auto_position .selectize-input.selectize-position-top.dropdown-active::before {
  top: 0;
  bottom: unset;
}

.selectize-dropdown .no-results {
  padding: 5px 8px;
  background-color: hsl(0, 82%, 65%);
  color: #DEE2E6;
}

.selectize-dropdown .active.no-results {
  color: #495c68;
}

.selectize-control {
  position: relative;
}

.selectize-dropdown,
.selectize-input,
.selectize-input input {
  color: #DEE2E6;
  font-family: inherit;
  font-size: 1rem;
  line-height: calc(1rem + 4px);
  font-smooth: inherit;
}

.selectize-input,
.selectize-control.single .selectize-input.input-active {
  background: transparent;
  cursor: text;
  display: inline-block;
}

.selectize-input {
  border: 2px solid rgba(222, 226, 230, 0.05);
  padding: 4px 6px;
  display: inline-block;
  width: 100%;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}
.selectize-control.multi .selectize-input.has-items {
  padding: calc(4px - 2px - 0px) 6px calc(4px - 2px - 1px - 0px);
}
.selectize-input.full {
  background-color: transparent;
}
.selectize-input.disabled, .selectize-input.disabled * {
  cursor: default !important;
}
.selectize-input.focus {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}
.selectize-input.dropdown-active {
  border-radius: 3px 3px 0 0;
}
.selectize-input > * {
  vertical-align: baseline;
  display: inline-block;
  zoom: 1;
}
.selectize-control.multi .selectize-input > div {
  cursor: pointer;
  margin: 0 3px 1px 0;
  padding: 2px 4px;
  background: hsl(276, 16%, 41%);
  color: #DEE2E6;
  border: 0px solid rgba(174, 175, 180, 0.75);
}
.selectize-control.multi .selectize-input > div.active {
  background: hsl(276, 16%, 41%);
  color: hsl(178, 67%, 38%);
  border: 0px solid orange;
}
.selectize-control.multi .selectize-input.disabled > div, .selectize-control.multi .selectize-input.disabled > div.active {
  color: white;
  background: #b5b5b5;
  border: 0px solid rgba(254, 254, 254, 0.75);
}
.selectize-input > input {
  display: inline-block !important;
  padding: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  max-width: 100% !important;
  margin: 0 !important;
  text-indent: 0 !important;
  border: 0 none !important;
  background: none !important;
  line-height: inherit !important;
  user-select: auto !important;
  box-shadow: none !important;
}
.selectize-input > input::-ms-clear {
  display: none;
}
.selectize-input > input:focus {
  outline: none !important;
}
.selectize-input > input[placeholder] {
  box-sizing: initial;
}
.selectize-input.has-items > input {
  margin: 0 0px !important;
}

.selectize-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 10;
  border: 1px solid rgba(222, 226, 230, 0.05);
  background: #2D3442;
  margin: -1px 0 0 0;
  border-top: 0 none;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 0 0 3px 3px;
}
.selectize-dropdown [data-selectable] {
  cursor: pointer;
  overflow: hidden;
}
.selectize-dropdown [data-selectable] .highlight {
  background: rgba(125, 168, 208, 0.2);
  border-radius: 1px;
}
.selectize-dropdown .option,
.selectize-dropdown .optgroup-header,
.selectize-dropdown .no-results,
.selectize-dropdown .create {
  padding: 5px 6px;
}
.selectize-dropdown .option,
.selectize-dropdown [data-disabled],
.selectize-dropdown [data-disabled] [data-selectable].option {
  cursor: inherit;
  opacity: 0.5;
}
.selectize-dropdown [data-selectable].option {
  opacity: 1;
  cursor: pointer;
}
.selectize-dropdown .optgroup:first-child .optgroup-header {
  border-top: 0 none;
}
.selectize-dropdown .optgroup-header {
  color: #DEE2E6;
  background: #2D3442;
  cursor: default;
}
.selectize-dropdown .active {
  background-color: hsl(276, 16%, 41%);
  color: hsl(178, 67%, 38%);
}
.selectize-dropdown .active.create {
  color: #DEE2E6;
}
.selectize-dropdown .selected {
  background-color: hsl(276, 16%, 41%);
  color: hsl(178, 67%, 38%);
}
.selectize-dropdown .create {
  color: rgba(222, 226, 230, 0.5);
}
.selectize-dropdown .active:not(.selected) {
  background: #30786C;
  color: #DEE2E6;
}

.selectize-dropdown-content {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 250px;
  -webkit-overflow-scrolling: touch;
}

.selectize-dropdown-emptyoptionlabel {
  text-align: center;
}

.selectize-dropdown .spinner {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 5px 6px;
}
.selectize-dropdown .spinner:after {
  content: " ";
  display: block;
  width: 24px;
  height: 24px;
  margin: 3px;
  border-radius: 50%;
  border: 5px solid rgba(222, 226, 230, 0.05);
  border-color: rgba(222, 226, 230, 0.05) transparent rgba(222, 226, 230, 0.05) transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.selectize-control.single .selectize-input,
.selectize-control.single .selectize-input input {
  cursor: pointer;
}
.selectize-control.single .selectize-input.input-active, .selectize-control.single .selectize-input.input-active input:not(:read-only) {
  cursor: text;
}
.selectize-control.single .selectize-input:after {
  content: " ";
  display: block;
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: 0rem;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.4rem 0.4rem 0 0.4rem;
  border-color: hsl(178, 67%, 38%) transparent transparent transparent;
}
.selectize-control.single .selectize-input.dropdown-active:after {
  margin-top: -0.32rem;
  border-width: 0 0.4rem 0.4rem 0.4rem;
  border-color: transparent transparent hsl(178, 67%, 38%) transparent;
}

.selectize-control.rtl {
  text-align: right;
}
.selectize-control.rtl.single .selectize-input:after {
  left: 15px;
  right: auto;
}
.selectize-control.rtl .selectize-input > input {
  margin: 0 4px 0 -2px !important;
}

.selectize-control .selectize-input.disabled {
  opacity: 0.5;
  background-color: #fafafa;
}

/**
 * Override selectize default styles
 */
.selectize-control {
  width: 100%;
}
.selectize-control.multi .selectize-input.has-items {
  padding-left: 3px;
  padding-right: 3px;
}
.selectize-control.multi .selectize-input.disabled [data-value] {
  color: red;
  text-shadow: none;
  background: none;
  box-shadow: none;
}
.selectize-control.multi .selectize-input.disabled [data-value],
.selectize-control.multi .selectize-input.disabled [data-value] .remove {
  border-color: red;
}
.selectize-control.multi .selectize-input.disabled [data-value] .remove {
  background: none;
}
.selectize-control.multi .selectize-input [data-value] {
  text-shadow: none;
  border-radius: 3px;
  box-shadow: none;
}
.selectize-control.single .selectize-input {
  box-shadow: none;
}

.selectize-input.focus:not(.locked), .selectize-input:hover:not(.locked) {
  box-shadow: none !important;
  border-color: rgba(32, 162, 157, 0.5) !important;
}

.selectize-control.single .selectize-input,
.selectize-dropdown {
  border-color: rgba(222, 226, 230, 0.05);
}
.selectize-control.single .selectize-input.focus:not(.locked), .selectize-control.single .selectize-input:hover:not(.locked),
.selectize-dropdown.focus:not(.locked),
.selectize-dropdown:hover:not(.locked) {
  border-color: rgba(32, 162, 157, 0.5);
}

.selectize-dropdown {
  width: 100%;
  background: none;
  background-color: #363b52;
  background-image: linear-gradient(to bottom, #24364c, #52425c);
  background-repeat: repeat-x;
  color: #7F899F !important;
}
.selectize-dropdown .selected {
  font-weight: bold !important;
}
.selectize-dropdown .optgroup-header {
  padding-top: 7px;
  font-weight: bold;
  font-size: 0.85em;
}
.selectize-dropdown .optgroup {
  border-top: 1px solid #f0f0f0;
}
.selectize-dropdown .optgroup:first-child {
  border-top: 0 none;
}

/**
 * Clear button
 */
.selectize-control.plugin-clear_button .clear {
  color: hsl(0, 82%, 65%) !important;
}
.selectize-control.plugin-clear_button .clear:hover {
  color: hsl(0, 82%, 65%) !important;
}

/**
 * Remove button
 */
.selectize-control.plugin-remove_button .item .remove {
  color: hsl(0, 82%, 65%) !important;
  padding: 0 4px !important;
}
.selectize-control.plugin-remove_button .item .remove:hover {
  background: none !important;
  color: hsl(0, 82%, 65%) !important;
}

/**
 * No results plugin
 */
/**
 * min. chars plugin
 */
/*
 * Google fonts
 */
/* poppins-100 - latin-ext_latin */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 100;
  src: local(""), url("../fonts/poppins/poppins-v20-latin-ext_latin-100-2iyxfjb.woff2") format("woff2"), url("../fonts/poppins/poppins-v20-latin-ext_latin-100-Fm_0RUV.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* poppins-100italic - latin-ext_latin */
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 100;
  src: local(""), url("../fonts/poppins/poppins-v20-latin-ext_latin-100italic-VBp3YH0.woff2") format("woff2"), url("../fonts/poppins/poppins-v20-latin-ext_latin-100italic-hEs4LgI.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* poppins-200 - latin-ext_latin */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 200;
  src: local(""), url("../fonts/poppins/poppins-v20-latin-ext_latin-200-jkh3-AS.woff2") format("woff2"), url("../fonts/poppins/poppins-v20-latin-ext_latin-200-G7diUx_.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* poppins-200italic - latin-ext_latin */
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 200;
  src: local(""), url("../fonts/poppins/poppins-v20-latin-ext_latin-200italic-ucENjnJ.woff2") format("woff2"), url("../fonts/poppins/poppins-v20-latin-ext_latin-200italic-t2xM-tO.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* poppins-300 - latin-ext_latin */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  src: local(""), url("../fonts/poppins/poppins-v20-latin-ext_latin-300--4F20YG.woff2") format("woff2"), url("../fonts/poppins/poppins-v20-latin-ext_latin-300-WITwos0.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* poppins-300italic - latin-ext_latin */
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 300;
  src: local(""), url("../fonts/poppins/poppins-v20-latin-ext_latin-300italic-mrFTq2K.woff2") format("woff2"), url("../fonts/poppins/poppins-v20-latin-ext_latin-300italic-1kXkdxU.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* poppins-regular - latin-ext_latin */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  src: local(""), url("../fonts/poppins/poppins-v20-latin-ext_latin-regular-Tn9dkSs.woff2") format("woff2"), url("../fonts/poppins/poppins-v20-latin-ext_latin-regular-HDpxhlI.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* poppins-italic - latin-ext_latin */
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 400;
  src: local(""), url("../fonts/poppins/poppins-v20-latin-ext_latin-italic-9zIq22w.woff2") format("woff2"), url("../fonts/poppins/poppins-v20-latin-ext_latin-italic-bUAQ5Rk.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* poppins-500 - latin-ext_latin */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  src: local(""), url("../fonts/poppins/poppins-v20-latin-ext_latin-500-NzWftwD.woff2") format("woff2"), url("../fonts/poppins/poppins-v20-latin-ext_latin-500-85xSxMk.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* poppins-500italic - latin-ext_latin */
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 500;
  src: local(""), url("../fonts/poppins/poppins-v20-latin-ext_latin-500italic-L8dQYEr.woff2") format("woff2"), url("../fonts/poppins/poppins-v20-latin-ext_latin-500italic-DQF_1Kt.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* poppins-600 - latin-ext_latin */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  src: local(""), url("../fonts/poppins/poppins-v20-latin-ext_latin-600-vAUwOfq.woff2") format("woff2"), url("../fonts/poppins/poppins-v20-latin-ext_latin-600-pquuMqG.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* poppins-600italic - latin-ext_latin */
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 600;
  src: local(""), url("../fonts/poppins/poppins-v20-latin-ext_latin-600italic-1SzbLGZ.woff2") format("woff2"), url("../fonts/poppins/poppins-v20-latin-ext_latin-600italic-YNpxn_s.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* poppins-700 - latin-ext_latin */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  src: local(""), url("../fonts/poppins/poppins-v20-latin-ext_latin-700-hKDy710.woff2") format("woff2"), url("../fonts/poppins/poppins-v20-latin-ext_latin-700-NCvuM7i.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* poppins-700italic - latin-ext_latin */
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 700;
  src: local(""), url("../fonts/poppins/poppins-v20-latin-ext_latin-700italic-NqqgT_V.woff2") format("woff2"), url("../fonts/poppins/poppins-v20-latin-ext_latin-700italic-eXWwQB7.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* poppins-800 - latin-ext_latin */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  src: local(""), url("../fonts/poppins/poppins-v20-latin-ext_latin-800-gCBLG0K.woff2") format("woff2"), url("../fonts/poppins/poppins-v20-latin-ext_latin-800-vK-0mtm.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* poppins-800italic - latin-ext_latin */
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 800;
  src: local(""), url("../fonts/poppins/poppins-v20-latin-ext_latin-800italic-SkJerbD.woff2") format("woff2"), url("../fonts/poppins/poppins-v20-latin-ext_latin-800italic-l2Mmy4r.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* poppins-900 - latin-ext_latin */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 900;
  src: local(""), url("../fonts/poppins/poppins-v20-latin-ext_latin-900-bO4tbaV.woff2") format("woff2"), url("../fonts/poppins/poppins-v20-latin-ext_latin-900-F0kwC0q.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* poppins-900italic - latin-ext_latin */
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 900;
  src: local(""), url("../fonts/poppins/poppins-v20-latin-ext_latin-900italic-yC6lgub.woff2") format("woff2"), url("../fonts/poppins/poppins-v20-latin-ext_latin-900italic-qSndvBK.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/*
 *
 */
/* source-code-pro-200 - latin-ext_latin */
@font-face {
  font-family: "Source Code Pro";
  font-style: normal;
  font-weight: 200;
  src: local(""), url("../fonts/source-code-pro/source-code-pro-v22-latin-ext_latin-200-tYgZJ7I.woff2") format("woff2"), url("../fonts/source-code-pro/source-code-pro-v22-latin-ext_latin-200-il8iKFA.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* source-code-pro-300 - latin-ext_latin */
@font-face {
  font-family: "Source Code Pro";
  font-style: normal;
  font-weight: 300;
  src: local(""), url("../fonts/source-code-pro/source-code-pro-v22-latin-ext_latin-300-XVHI1MW.woff2") format("woff2"), url("../fonts/source-code-pro/source-code-pro-v22-latin-ext_latin-300-47Wrz3S.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* source-code-pro-regular - latin-ext_latin */
@font-face {
  font-family: "Source Code Pro";
  font-style: normal;
  font-weight: 400;
  src: local(""), url("../fonts/source-code-pro/source-code-pro-v22-latin-ext_latin-regular-OXX_4eH.woff2") format("woff2"), url("../fonts/source-code-pro/source-code-pro-v22-latin-ext_latin-regular-9WSooOi.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* source-code-pro-600 - latin-ext_latin */
@font-face {
  font-family: "Source Code Pro";
  font-style: normal;
  font-weight: 600;
  src: local(""), url("../fonts/source-code-pro/source-code-pro-v22-latin-ext_latin-600-EJ6JO3-.woff2") format("woff2"), url("../fonts/source-code-pro/source-code-pro-v22-latin-ext_latin-600-TtJYY8-.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* source-code-pro-500 - latin-ext_latin */
@font-face {
  font-family: "Source Code Pro";
  font-style: normal;
  font-weight: 500;
  src: local(""), url("../fonts/source-code-pro/source-code-pro-v22-latin-ext_latin-500-wL7r0GU.woff2") format("woff2"), url("../fonts/source-code-pro/source-code-pro-v22-latin-ext_latin-500-C0cXi5I.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* source-code-pro-700 - latin-ext_latin */
@font-face {
  font-family: "Source Code Pro";
  font-style: normal;
  font-weight: 700;
  src: local(""), url("../fonts/source-code-pro/source-code-pro-v22-latin-ext_latin-700-CDSZOBZ.woff2") format("woff2"), url("../fonts/source-code-pro/source-code-pro-v22-latin-ext_latin-700-712U91i.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* source-code-pro-800 - latin-ext_latin */
@font-face {
  font-family: "Source Code Pro";
  font-style: normal;
  font-weight: 800;
  src: local(""), url("../fonts/source-code-pro/source-code-pro-v22-latin-ext_latin-800-vydvO3c.woff2") format("woff2"), url("../fonts/source-code-pro/source-code-pro-v22-latin-ext_latin-800-icjOy7w.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* source-code-pro-900 - latin-ext_latin */
@font-face {
  font-family: "Source Code Pro";
  font-style: normal;
  font-weight: 900;
  src: local(""), url("../fonts/source-code-pro/source-code-pro-v22-latin-ext_latin-900-Irqe4Uv.woff2") format("woff2"), url("../fonts/source-code-pro/source-code-pro-v22-latin-ext_latin-900-WSPidLQ.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* source-code-pro-300italic - latin-ext_latin */
@font-face {
  font-family: "Source Code Pro";
  font-style: italic;
  font-weight: 300;
  src: local(""), url("../fonts/source-code-pro/source-code-pro-v22-latin-ext_latin-300italic-FiCoa82.woff2") format("woff2"), url("../fonts/source-code-pro/source-code-pro-v22-latin-ext_latin-300italic-wcR-j6m.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* source-code-pro-200italic - latin-ext_latin */
@font-face {
  font-family: "Source Code Pro";
  font-style: italic;
  font-weight: 200;
  src: local(""), url("../fonts/source-code-pro/source-code-pro-v22-latin-ext_latin-200italic-0goNY6z.woff2") format("woff2"), url("../fonts/source-code-pro/source-code-pro-v22-latin-ext_latin-200italic-EFgDpjk.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* source-code-pro-italic - latin-ext_latin */
@font-face {
  font-family: "Source Code Pro";
  font-style: italic;
  font-weight: 400;
  src: local(""), url("../fonts/source-code-pro/source-code-pro-v22-latin-ext_latin-italic-niBxDFm.woff2") format("woff2"), url("../fonts/source-code-pro/source-code-pro-v22-latin-ext_latin-italic-PDk02bd.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* source-code-pro-500italic - latin-ext_latin */
@font-face {
  font-family: "Source Code Pro";
  font-style: italic;
  font-weight: 500;
  src: local(""), url("../fonts/source-code-pro/source-code-pro-v22-latin-ext_latin-500italic-vrsAfj7.woff2") format("woff2"), url("../fonts/source-code-pro/source-code-pro-v22-latin-ext_latin-500italic-FEywbfg.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* source-code-pro-600italic - latin-ext_latin */
@font-face {
  font-family: "Source Code Pro";
  font-style: italic;
  font-weight: 600;
  src: local(""), url("../fonts/source-code-pro/source-code-pro-v22-latin-ext_latin-600italic-E86LAHw.woff2") format("woff2"), url("../fonts/source-code-pro/source-code-pro-v22-latin-ext_latin-600italic-nyoydOb.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* source-code-pro-700italic - latin-ext_latin */
@font-face {
  font-family: "Source Code Pro";
  font-style: italic;
  font-weight: 700;
  src: local(""), url("../fonts/source-code-pro/source-code-pro-v22-latin-ext_latin-700italic-RHDpifG.woff2") format("woff2"), url("../fonts/source-code-pro/source-code-pro-v22-latin-ext_latin-700italic-j8Oc89t.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* source-code-pro-800italic - latin-ext_latin */
@font-face {
  font-family: "Source Code Pro";
  font-style: italic;
  font-weight: 800;
  src: local(""), url("../fonts/source-code-pro/source-code-pro-v22-latin-ext_latin-800italic-j3b5xsM.woff2") format("woff2"), url("../fonts/source-code-pro/source-code-pro-v22-latin-ext_latin-800italic-ghxbgRa.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* source-code-pro-900italic - latin-ext_latin */
@font-face {
  font-family: "Source Code Pro";
  font-style: italic;
  font-weight: 900;
  src: local(""), url("../fonts/source-code-pro/source-code-pro-v22-latin-ext_latin-900italic-obmEjwN.woff2") format("woff2"), url("../fonts/source-code-pro/source-code-pro-v22-latin-ext_latin-900italic-7HyAFFK.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@font-face {
  font-family: "Urbanist";
  font-style: normal;
  font-weight: 100 900;
  src: local(""), url("../fonts/Urbanist/Urbanist-VariableFont_wght-r7bcfbR.woff2") format("woff2-variations"), url("../fonts/Urbanist/Urbanist-VariableFont_wght-AXRpqH1.ttf") format("ttf");
}
@font-face {
  font-family: "Urbanist";
  font-style: italic;
  font-weight: 100 900;
  src: local(""), url("../fonts/Urbanist/Urbanist-Italic-VariableFont_wght-_BPdcpE.woff2") format("woff2-variations"), url("../fonts/Urbanist/Urbanist-Italic-VariableFont_wght-Jdyn4yF.ttf") format("ttf");
}
@font-face {
  font-family: "Encode Sans";
  font-style: normal;
  font-weight: 100 900;
  src: local(""), url("../fonts/EncodeSans/EncodeSans-VariableFont_wdth_wght-B2GPkDS.woff2") format("woff2-variations"), url("../fonts/EncodeSans/EncodeSans-VariableFont_wdth_wght-xv26HUX.ttf") format("ttf");
}
@media only screen and (min-width: 0px) {
  .far.--responsive,
  .fa-regular.--responsive {
    font-weight: 400 !important;
  }
}
@media only screen and (min-width: 481px) {
  .far.--responsive,
  .fa-regular.--responsive {
    font-weight: 400 !important;
  }
}
@media only screen and (min-width: 769px) {
  .far.--responsive,
  .fa-regular.--responsive {
    font-weight: 400 !important;
  }
}
@media only screen and (min-width: 1281px) {
  .far.--responsive,
  .fa-regular.--responsive {
    font-weight: 900 !important;
  }
}
@media only screen and (min-width: 1921px) {
  .far.--responsive,
  .fa-regular.--responsive {
    font-weight: 900 !important;
  }
}

@media only screen and (min-width: 0px) {
  .fas.--responsive,
  .fa-solid.--responsive {
    font-weight: 400 !important;
  }
}
@media only screen and (min-width: 481px) {
  .fas.--responsive,
  .fa-solid.--responsive {
    font-weight: 400 !important;
  }
}
@media only screen and (min-width: 769px) {
  .fas.--responsive,
  .fa-solid.--responsive {
    font-weight: 400 !important;
  }
}
@media only screen and (min-width: 1281px) {
  .fas.--responsive,
  .fa-solid.--responsive {
    font-weight: 900 !important;
  }
}
@media only screen and (min-width: 1921px) {
  .fas.--responsive,
  .fa-solid.--responsive {
    font-weight: 900 !important;
  }
}

:root {
  font-size: calc(var(--default-font-size) * var(--scaling-factor));
}

body {
  background: var(--bg-image-url) no-repeat center center fixed;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index: -100;
  background-color: #262C38;
  box-shadow: inset 0 0 0 100vmax rgba(13, 19, 28, 0.85);
  padding: 0;
  font-family: "Encode Sans", sans-serif;
  -webkit-font-smoothing: subpixel-antialiased;
  color: #DEE2E6;
  font-weight: 200;
  min-height: 100vh;
}
body > div.body-container {
  max-width: 2048px;
  margin: auto;
  padding-top: 150px;
  background: var(--colour-body-container-bg);
  opacity: 0.9;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.flex-column, .flex-column--xs, .flex-column--sm, .flex-column--md, .flex-column--lg, .flex-column--xl, .horizontal-align-centre {
  display: flex;
  flex-direction: column;
}

main {
  padding: 0 1.75rem;
  flex-grow: 1;
}

a {
  text-decoration: none;
  color: #DEE2E6;
}

h1 {
  font-size: 2.5rem;
  font-weight: 600;
}

h2 {
  font-size: 2rem;
  font-weight: 600;
}

h3 {
  font-size: 1.5rem;
  font-weight: 500;
}

h4, .item-view .grid-table.digital-decoder-function .digital-decoder-function-key,
.item-view .grid-table.listing.digital-decoder-function-images .digital-decoder-function-key,
.item-view .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-key, .item-view .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .digital-decoder-function-key,
.item-view .grid-table.listing.digital-decoder-function-images:not(.edit):not(.search) .grid-item .digital-decoder-function-key,
.item-view .grid-table.listing.digital-decoder-function-mappings:not(.edit):not(.search) .grid-item .digital-decoder-function-key {
  font-size: 1.3rem;
  font-weight: 500;
}

h5, .nav__link, [data-tooltip]::after {
  font-size: 1.2rem;
  font-weight: 400;
}

h6, .dropdown__link, .dropdown__sublink {
  font-size: 1.1rem;
  font-weight: 400;
}

hr {
  border-color: #30786C;
  opacity: 0.25;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

li {
  list-style-type: none;
}

strong {
  font-weight: 600;
}

.font-size--regular {
  font-size: 1rem;
}
.font-size--sm {
  font-size: 0.9rem;
}

.help-text {
  margin: 0.5rem 0;
  color: rgba(174, 175, 180, 0.75);
  width: 100%;
  font-size: 85%;
  font-weight: 200;
}

/* New Simplified Version 6 CSS */
/* Step 1: Common Properties: All required to make icons render reliably */
.icon::before {
  /* removed font- based rules */
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.monospace {
  font-family: "Source Code Pro", monospace;
  font-weight: 300;
  text-align: right;
}

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

body section {
  width: 100%;
  border-radius: 4px;
  background: #393F4C;
  box-shadow: 0 1px 20px 0 hsla(0, 0%, 0%, 0.1);
  position: relative;
  padding: 1.75rem;
}
body section.no-bg {
  background: none !important;
  box-shadow: none !important;
}
body section.bg-dark {
  background: #2D3442 !important;
}
body section .title-block {
  padding: 1rem 0;
}
body section .title-block [class^=section-title] {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  width: 100%;
  align-items: baseline;
  border-bottom-width: 4px;
  border-bottom-style: solid;
  border-image: linear-gradient(to right, hsl(195, 83%, 38%), hsl(313, 44%, 40%), hsl(178, 67%, 38%), hsl(0, 82%, 65%), hsl(33, 93%, 48%)) 1;
}
body section .title-block [class^=section-title][class$="--medium"] {
  border-bottom-width: 2px;
}
body section .title-block [class^=section-title][class$="--small"] {
  border-bottom-width: 1px;
}

:root {
  --header-padding-left: 1.75rem;
}

header {
  --_submenu-offset: 2rem;
  --_top-corner-inset: 1rem;
  --header-bg-colour: #2D3442;
  --header-site-logo-gradient: conic-gradient( hsl(195, 83%, 38%), hsl(313, 44%, 40%), hsl(178, 67%, 38%), hsl(0, 82%, 65%), hsl(33, 93%, 48%) );
  width: 100%;
  max-width: 2048px;
  position: fixed;
  top: 0;
  padding-left: var(--header-padding-left);
  background: var(--header-bg-colour);
  display: grid;
  grid-template-areas: "site-logo space top-menu" "site-logo space navbar";
  grid-template-columns: min-content auto 1fr;
  grid-template-rows: min-content min-content;
  row-gap: 1rem;
  z-index: 999;
  /* SEARCH FIELD  */
  /* The always visible content is within the top level before "expander" */
  /* Expander is a grid with 0 rows, it's position determines where the drawer ends up. */
  /* expander expands to 1 cell when trigger hovered */
  /* An EMPTY element that hides the content */
}
header *, header *::before, header *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
header .menu-buttons {
  grid-area: top-menu;
  align-self: start;
  justify-self: end;
  display: flex;
}
header .menu-buttons > ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
header .menu-buttons .menu-button, header .menu-buttons .menu-button--responsive {
  grid-template-columns: -1/-2;
  background: #393F4C;
  padding: 0.75rem 1.75rem 0.75rem 2rem;
  border-width: 0;
  cursor: pointer;
  clip-path: polygon(0% 100%, 100% 100%, 100% 0%, var(--_top-corner-inset) 0%);
  margin-left: calc(-1 * var(--_top-corner-inset));
  position: relative;
  transition: 0.2s;
  font-weight: 300 !important;
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 0px) {
  header .menu-buttons .menu-button--responsive label {
    display: none;
  }
}
@media only screen and (min-width: 481px) {
  header .menu-buttons .menu-button--responsive label {
    display: none;
  }
}
@media only screen and (min-width: 769px) {
  header .menu-buttons .menu-button--responsive label {
    display: none;
  }
}
@media only screen and (min-width: 1281px) {
  header .menu-buttons .menu-button--responsive label {
    display: initial;
  }
}
@media only screen and (min-width: 1921px) {
  header .menu-buttons .menu-button--responsive label {
    display: initial;
  }
}
header a.login,
header .login {
  background: hsl(213, 36%, 32%) !important;
  color: hsl(178, 67%, 38%) !important;
}
header a.login:hover,
header .login:hover {
  background: hsl(178, 67%, 38%) !important;
  color: hsl(213, 36%, 32%) !important;
}
header .adv-search {
  display: flex;
  color: #DEE2E6 !important;
}
header .adv-search:hover {
  color: hsl(178, 67%, 38%) !important;
}
header input[type=search].search-input {
  --search-input-width: calc(250px * var(--scaling-factor));
  border-bottom: initial !important;
  border-radius: 0;
  color: #DEE2E6 !important;
  border: 0 !important;
  background-color: #393F4C !important;
  font: inherit !important;
  font-size: inherit !important;
  font-weight: normal !important;
  padding: 0.75rem 1.75rem 0.75rem 3.5rem !important;
  clip-path: polygon(0% 100%, 100% 100%, 100% 0%, var(--_top-corner-inset) 0%);
  width: var(--search-input-width);
  position: relative;
  transition: width 250ms ease-in-out !important;
  transform-origin: right;
  /* :valid required on input for this to remain expanded when there's a value in the input */
  /* 350px is an arbitrary value - obviously craps out at small screens */
}
header input[type=search].search-input:valid, header input[type=search].search-input:focus-visible {
  max-width: 100%;
  outline: 0;
}
@media only screen and (min-width: 1281px) {
  header input[type=search].search-input:valid, header input[type=search].search-input:focus-visible {
    --search-input-width: calc(350px * var(--scaling-factor));
  }
}
@media only screen and (min-width: 1921px) {
  header input[type=search].search-input:valid, header input[type=search].search-input:focus-visible {
    --search-input-width: calc(350px * var(--scaling-factor));
  }
}
header input[type=search].search-input::placeholder {
  color: #7F899F !important;
  font-weight: 400 !important;
}
header .search-input-container {
  position: relative;
}
header .search-input-container::before {
  pointer-events: none;
  z-index: 10;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 2.25rem;
  font-family: "Font Awesome 6 Free";
  content: "\f002";
}
header .search-input-container:hover {
  color: hsl(178, 67%, 38%);
}
header .search-input-container:hover .search-input::placeholder {
  color: hsl(178, 67%, 38%);
}
header .site-logo {
  grid-area: site-logo;
  align-self: center;
  justify-self: center;
  width: 175px;
  transition: 0.5s;
  display: inline-block;
  aspect-ratio: 3/2;
  background-image: var(--header-site-logo-gradient);
  mask-image: var(--mask-image-url);
  mask-size: contain;
  mask-repeat: no-repeat;
}
header .expander-trigger {
  position: relative;
  display: flex;
}
header .expander {
  position: absolute;
  top: 100%;
  right: 0;
  /*   left: 0; */
  display: grid;
  grid-template-rows: 0fr;
  grid-template-columns: max-content;
  transition: grid-template-rows 200ms;
  z-index: 1;
}
header .expander-trigger:hover .expander {
  grid-template-rows: 1fr;
}
header .expander-drawer {
  overflow: hidden;
  /* Within the drawer can be anything, the grid will ensure the sizing works automatically - to separate the content fro the trigger, include the appropriate sided margin to prevent flickering */
}
header .expander-drawer hr {
  color: hsl(351, 59%, 53%);
  border-color: hsl(351, 59%, 53%);
}
header .expander-drawer .any-content {
  display: grid;
  grid-template-columns: max-content; /* Without this it is only as big as the main menu entry */
  grid-template-rows: 1fr;
  row-gap: 1rem;
  padding: 1rem;
  padding-right: 1.75rem;
  background: #25122B;
  color: #AEAFB4;
}
header .expander-drawer .any-content a {
  color: #AEAFB4;
}
header .expander-drawer .any-content a:hover {
  color: hsl(178, 67%, 38%);
}

footer {
  --footer-bg-colour: #2D3442;
  --footer-site-logo-gradient: conic-gradient( hsl(195, 83%, 38%), hsl(313, 44%, 40%), hsl(178, 67%, 38%), hsl(0, 82%, 65%), hsl(33, 93%, 48%) );
  width: 100%;
  max-width: 2048px;
  padding: 1rem;
  background: var(--footer-bg-colour);
  display: grid;
  grid-template-rows: min-content min-content;
  row-gap: 0.5rem;
}
footer *, footer *::before, footer *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
footer .site-logo {
  grid-row: 1/2;
  align-self: center;
  justify-self: center;
  width: 100px;
  transition: 0.5s;
  display: inline-block;
  aspect-ratio: 3/2;
  background-image: var(--footer-site-logo-gradient);
  mask-image: var(--mask-image-url);
  mask-size: contain;
  mask-repeat: no-repeat;
}
footer .copyright {
  grid-row: 2/2;
  align-self: center;
  justify-self: center;
  font-size: 0.75rem;
}

/*=============== VARIABLES CSS ===============*/
:root {
  --nav-height: calc(5rem * var(--scaling-factor));
  /*========== Colors ==========*/
  --header-bg-colour: #2D3442;
  --navbar-bg-colour-primary: #2D3442;
  --navbar-bg-colour-secondary: #393F4C;
  --navbar-bg-colour-dropdown: #262C38;
  --navbar-bg-colour-dropdown-highlight: #2D3442;
  --navbar-fg-colour: #dbdbdb;
  --navbar-burger-colour: #dbdbdb;
  --nav-underline-colour: radial-gradient( hsl(313, 44%, 40%), hsl(178, 67%, 38%) );
  --body-color: #393F4C;
  /*========== Font weight ==========*/
  --font-semi-bold: 600;
  /*========== z index ==========*/
  --z-fixed: 100;
  --navbar-menu-item-padding-left-right: 1rem;
}

nav.container {
  grid-area: navbar;
  padding-right: var(--header-padding-left);
}
nav label,
nav p,
nav li {
  max-width: none;
  text-wrap: nowrap;
}
nav label:hover {
  cursor: pointer;
}
nav .pill {
  float: right;
  color: hsl(212, 14%, 24%);
  background-color: #0091AD;
  margin-left: var(--navbar-menu-item-padding-left-right);
  margin-right: var(--navbar-menu-item-padding-left-right);
  padding: 2px 5px;
  text-align: center;
  font: initial;
  font-size: 0.9rem;
  font-weight: 400;
  border-radius: 2px;
  text-transform: none;
}

/*=============== BREAKPOINTS ===============*/
/* For small devices */
@media only screen and (max-width: 480px) {
  nav.container {
    margin-inline: var(--navbar-menu-item-padding-left-right);
  }
  .nav .nav__link {
    padding-inline: var(--navbar-menu-item-padding-left-right);
  }
}
/* For large devices */
@media only screen and (min-width: 1281px) {
  nav.nav,
  nav .nav {
    height: var(--nav-height);
    display: flex;
    justify-content: space-between;
  }
  nav.nav__toggle,
  nav .nav__toggle {
    display: none;
  }
  nav.nav__list,
  nav .nav__list {
    height: 100%;
    display: flex;
    align-items: stretch;
  }
  nav.nav__link,
  nav .nav__link {
    height: 100%;
    padding: 0;
    justify-content: initial;
    column-gap: 0.25rem;
  }
  nav.nav__link:hover,
  nav .nav__link:hover {
    background-color: transparent;
  }
  .dropdown__item, .dropdown__subitem {
    position: relative;
    height: 100%;
  }
  .dropdown__menu, .dropdown__submenu {
    max-height: initial;
    overflow: initial;
    position: absolute;
    left: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, top 0.3s;
  }
  .dropdown__submenu {
    position: absolute;
    left: 100%;
    top: 0.5rem;
  }
  .dropdown__item:hover .dropdown__menu {
    opacity: 1;
    top: var(--nav-height);
    pointer-events: initial;
    transition: top 0.3s;
  }
  .dropdown__subitem:hover > .dropdown__submenu {
    opacity: 1;
    top: 0;
    pointer-events: initial;
    transition: top 0.3s;
  }
}
@media only screen and (min-width: 1921px) {
  nav.nav,
  nav .nav {
    height: var(--nav-height);
    display: flex;
    justify-content: space-between;
  }
  nav.nav__toggle,
  nav .nav__toggle {
    display: none;
  }
  nav.nav__list,
  nav .nav__list {
    height: 100%;
    display: flex;
    align-items: stretch;
  }
  nav.nav__link,
  nav .nav__link {
    height: 100%;
    padding: 0;
    justify-content: initial;
    column-gap: 0.25rem;
  }
  nav.nav__link:hover,
  nav .nav__link:hover {
    background-color: transparent;
  }
  .dropdown__item, .dropdown__subitem {
    position: relative;
    height: 100%;
  }
  .dropdown__menu, .dropdown__submenu {
    max-height: initial;
    overflow: initial;
    position: absolute;
    left: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, top 0.3s;
  }
  .dropdown__submenu {
    position: absolute;
    left: 100%;
    top: 0.5rem;
  }
  .dropdown__item:hover .dropdown__menu {
    opacity: 1;
    top: var(--nav-height);
    pointer-events: initial;
    transition: top 0.3s;
  }
  .dropdown__subitem:hover > .dropdown__submenu {
    opacity: 1;
    top: 0;
    pointer-events: initial;
    transition: top 0.3s;
  }
}
/*=============== NAV ===============*/
.nav {
  height: var(--nav-height);
  /* Show menu */
  /* Show icon */
}
.nav__logo, .nav__burger, .nav__close {
  color: var(--navbar-burger-colour);
}
.nav__data {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav__logo {
  display: inline-flex;
  align-items: center;
  column-gap: 0.5rem;
  font-weight: var(--font-semi-bold);
}
.nav__logo i {
  font-weight: initial;
  font-size: 1.25rem;
}
.nav__logo img {
  height: 60px;
  margin-right: 0.75rem;
}
.nav__text-logo {
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  text-align: center;
  padding-left: 0.75rem;
  border-left: 4px solid var(--navbar-fg-colour);
}
.nav__text-logo * {
  line-height: 1.5rem;
  margin: 0;
  padding: 0;
}
.nav__toggle {
  position: relative;
  width: 32px;
  height: 32px;
}
.nav__burger, .nav__close {
  position: absolute;
  width: 2rem;
  height: 2rem;
  inset: 0;
  margin: auto;
  font-size: 1.25rem;
  cursor: pointer;
  transition: opacity 0.1s, transform 0.4s;
}
.nav__close {
  opacity: 0;
}
.nav__link {
  color: var(--navbar-fg-colour);
  background-color: transparent;
  font-weight: var(--font-semi-bold);
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav__link label,
.nav__link p {
  padding: 1.75rem 0.5rem;
  flex-grow: 1;
}
.nav__link.language-switcher {
  font-weight: unset;
}
.nav__link.language-switcher:hover label, .nav__link.language-switcher:hover p {
  background-color: transparent !important;
}
.nav__link.language-switcher a:hover,
.nav__link.language-switcher a:hover > * {
  font-weight: bold;
  color: hsl(178, 67%, 38%);
}
.nav__menu {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-grow: 1;
}
.nav__menu .nav__extras {
  height: 100%;
  display: flex;
  align-items: stretch;
  background-color: var(--navbar-bg-colour-primary);
}
.nav__menu.show-menu .nav__extras {
  background-color: var(--navbar-bg-colour-secondary);
}
@media only screen and (max-width: 480px) {
  .nav__menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    left: 0;
    width: 100%;
    overflow: auto;
    pointer-events: none;
    opacity: 0;
    transition: top 0.4s, opacity 0.3s;
    background-color: var(--navbar-bg-colour-primary);
  }
  .nav__menu::-webkit-scrollbar {
    width: 0;
  }
  .nav__list {
    background-color: var(--navbar-bg-colour-primary);
    padding-top: 1rem;
    flex-grow: 1;
  }
  .nav__logo img {
    height: 40px;
  }
  .nav__text-logo {
    display: none;
  }
  .nav .active > a label,
  .nav .active > a p {
    background-color: var(--navbar-bg-colour-dropdown-highlight);
  }
  .nav__link i {
    border-left: 1px solid var(--navbar-bg-colour-dropdown);
    padding: 1.25rem 1.5rem;
  }
  .nav__link:hover label, .nav__link:hover p {
    background-color: var(--navbar-bg-colour-dropdown-highlight);
  }
  .nav .dropdown__menu, .nav .dropdown__submenu {
    margin-left: 0.5rem;
    border-left: 3px solid var(--navbar-bg-colour-dropdown-highlight);
  }
}
@media only screen and (max-width: 768px) {
  .nav__menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    left: 0;
    width: 100%;
    overflow: auto;
    pointer-events: none;
    opacity: 0;
    transition: top 0.4s, opacity 0.3s;
    background-color: var(--navbar-bg-colour-primary);
  }
  .nav__menu::-webkit-scrollbar {
    width: 0;
  }
  .nav__list {
    background-color: var(--navbar-bg-colour-primary);
    padding-top: 1rem;
    flex-grow: 1;
  }
  .nav__logo img {
    height: 40px;
  }
  .nav__text-logo {
    display: none;
  }
  .nav .active > a label,
  .nav .active > a p {
    background-color: var(--navbar-bg-colour-dropdown-highlight);
  }
  .nav__link i {
    border-left: 1px solid var(--navbar-bg-colour-dropdown);
    padding: 1.25rem 1.5rem;
  }
  .nav__link:hover label, .nav__link:hover p {
    background-color: var(--navbar-bg-colour-dropdown-highlight);
  }
  .nav .dropdown__menu, .nav .dropdown__submenu {
    margin-left: 0.5rem;
    border-left: 3px solid var(--navbar-bg-colour-dropdown-highlight);
  }
}
@media only screen and (max-width: 1280px) {
  .nav__menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    left: 0;
    width: 100%;
    overflow: auto;
    pointer-events: none;
    opacity: 0;
    transition: top 0.4s, opacity 0.3s;
    background-color: var(--navbar-bg-colour-primary);
  }
  .nav__menu::-webkit-scrollbar {
    width: 0;
  }
  .nav__list {
    background-color: var(--navbar-bg-colour-primary);
    padding-top: 1rem;
    flex-grow: 1;
  }
  .nav__logo img {
    height: 40px;
  }
  .nav__text-logo {
    display: none;
  }
  .nav .active > a label,
  .nav .active > a p {
    background-color: var(--navbar-bg-colour-dropdown-highlight);
  }
  .nav__link i {
    border-left: 1px solid var(--navbar-bg-colour-dropdown);
    padding: 1.25rem 1.5rem;
  }
  .nav__link:hover label, .nav__link:hover p {
    background-color: var(--navbar-bg-colour-dropdown-highlight);
  }
  .nav .dropdown__menu, .nav .dropdown__submenu {
    margin-left: 0.5rem;
    border-left: 3px solid var(--navbar-bg-colour-dropdown-highlight);
  }
}
.nav .show-menu {
  opacity: 1;
  pointer-events: initial;
  padding-left: var(--navbar-menu-item-padding-left-right);
  padding-right: var(--navbar-menu-item-padding-left-right);
  padding-bottom: 1.75rem;
}
.nav .show-icon .nav__burger {
  opacity: 0;
  transform: rotate(90deg);
}
.nav .show-icon .nav__close {
  opacity: 1;
  transform: rotate(90deg);
}

/*=============== DROPDOWN MENU & SUBMENU ===============*/
.dropdown {
  /* Default styles for small screens (toggle with .active class) */
  /* Media query for large screens (open on hover) */
  /*=============== DROPDOWN SUBMENU ===============*/
}
.dropdown__item {
  cursor: pointer;
}
.dropdown__arrow {
  font-size: 1.25rem;
  font-weight: initial;
  transition: transform 0.4s;
}
.dropdown__link, .dropdown__sublink {
  position: relative;
  color: var(--navbar-fg-colour);
  background-color: var(--navbar-bg-colour-dropdown);
  display: flex;
  align-items: center;
  flex-grow: 1;
  font-weight: var(--font-semi-bold);
  transition: background-color 0.3s;
}
.dropdown__link i, .dropdown__sublink i {
  font-size: 1.25rem;
  font-weight: initial;
  transition: transform 0.4s;
  padding: 1.25rem;
  border-left: 2px solid var(--navbar-bg-colour-primary);
}
.dropdown__link i svg, .dropdown__sublink i svg {
  min-width: var(--navbar-menu-item-padding-left-right);
  min-height: var(--navbar-menu-item-padding-left-right);
}
.dropdown__link label,
.dropdown__link p, .dropdown__sublink label,
.dropdown__sublink p {
  padding: 1.25rem 1.5rem;
  flex-grow: 1;
}
.dropdown__link:hover, .dropdown__sublink:hover {
  background-color: var(--navbar-bg-colour-dropdown-highlight);
}
.dropdown__menu, .dropdown__submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out, opacity 0.4s ease-out;
  opacity: 0;
  visibility: hidden;
}
.dropdown__item.active > .dropdown__menu, .dropdown__subitem.active > .dropdown__submenu {
  max-height: 1000px;
  overflow: hidden;
  transition: max-height 0.4s ease-in, opacity 0.4s ease-in;
  opacity: 1;
  visibility: visible;
}
.dropdown__trigger {
  transition: transform 0.4s;
}
@media only screen and (min-width: 1281px) {
  .dropdown {
    /* Remove the .active class styles on large screens */
  }
  .dropdown__item:hover > .dropdown__menu, .dropdown__subitem:hover > .dropdown__submenu {
    max-height: 1000px;
    opacity: 1;
    visibility: visible;
    transition: max-height 0.4s ease-in, opacity 0.4s ease-in;
  }
  .dropdown__subitem:hover {
    background-color: var(--navbar-bg-colour-dropdown-highlight);
  }
  .dropdown__item.active > .dropdown__menu, .dropdown__subitem.active > .dropdown__submenu {
    max-height: initial;
    overflow: visible;
    transition: none;
  }
  .dropdown__menu, .dropdown__submenu {
    max-height: initial;
    overflow: visible;
    transition: none;
  }
  .dropdown__submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, opacity 0.2s ease-out;
    opacity: 0;
    visibility: hidden;
  }
  .dropdown__item:hover > a .dropdown__trigger svg, .dropdown__subitem:hover > a .dropdown__trigger svg {
    transform: rotate(90deg);
  }
  .dropdown__link:hover {
    background-color: var(--navbar-bg-colour-dropdown-highlight);
  }
}
@media only screen and (min-width: 1921px) {
  .dropdown {
    /* Remove the .active class styles on large screens */
  }
  .dropdown__item:hover > .dropdown__menu, .dropdown__subitem:hover > .dropdown__submenu {
    max-height: 1000px;
    opacity: 1;
    visibility: visible;
    transition: max-height 0.4s ease-in, opacity 0.4s ease-in;
  }
  .dropdown__subitem:hover {
    background-color: var(--navbar-bg-colour-dropdown-highlight);
  }
  .dropdown__item.active > .dropdown__menu, .dropdown__subitem.active > .dropdown__submenu {
    max-height: initial;
    overflow: visible;
    transition: none;
  }
  .dropdown__menu, .dropdown__submenu {
    max-height: initial;
    overflow: visible;
    transition: none;
  }
  .dropdown__submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, opacity 0.2s ease-out;
    opacity: 0;
    visibility: hidden;
  }
  .dropdown__item:hover > a .dropdown__trigger svg, .dropdown__subitem:hover > a .dropdown__trigger svg {
    transform: rotate(90deg);
  }
  .dropdown__link:hover {
    background-color: var(--navbar-bg-colour-dropdown-highlight);
  }
}
.dropdown__trigger svg {
  transition: transform 0.4s;
}
.dropdown__subitem.active .dropdown__add svg, .dropdown__item.active .dropdown__arrow svg {
  transform: rotate(90deg);
}
.dropdown__add {
  margin-left: auto;
}

/*=============== HOVER UNDERLINE ===============*/
@media only screen and (min-width: 1281px) {
  .nav__list {
    --_gap: 2rem;
  }
  .nav__menu .underline .nav__link,
  .nav__menu .underline.nav__extras {
    overflow: hidden;
    position: relative;
    padding: 1rem var(--navbar-menu-item-padding-left-right);
    min-inline-size: 3rem;
  }
  .nav__menu .underline .nav__link::after,
  .nav__menu .underline.nav__extras::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0rem;
    block-size: 3px;
    background: var(--nav-underline-colour);
    translate: var(--_translate, 0);
    scale: var(--_scale, 0) 1;
    transition: scale 100ms var(--_scale-delay, 0ms), translate 200ms;
  }
  /* A previous sibling is hovered */
  .nav__menu .underline:hover ~ .underline {
    --_translate: -100%;
    --_scale-delay: 200ms;
  }
  /* Any other sibling is hovered */
  .nav__menu:hover .underline {
    --_translate: 100%;
    --_scale-delay: 200ms;
  }
  /*
  The actually hovered <.underline>

  NOTE: same specificity as previous selector, so it must either come after or be artificially inflated (eg. :hover:hover)
  */
  .nav__menu .underline:hover {
    --_scale: 1;
    --_translate: 0;
    --_scale-delay: 0ms;
  }
}
@media only screen and (min-width: 1921px) {
  .nav__list {
    --_gap: 2rem;
  }
  .nav__menu .underline .nav__link,
  .nav__menu .underline.nav__extras {
    overflow: hidden;
    position: relative;
    padding: 1rem var(--navbar-menu-item-padding-left-right);
    min-inline-size: 3rem;
  }
  .nav__menu .underline .nav__link::after,
  .nav__menu .underline.nav__extras::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0rem;
    block-size: 3px;
    background: var(--nav-underline-colour);
    translate: var(--_translate, 0);
    scale: var(--_scale, 0) 1;
    transition: scale 100ms var(--_scale-delay, 0ms), translate 200ms;
  }
  /* A previous sibling is hovered */
  .nav__menu .underline:hover ~ .underline {
    --_translate: -100%;
    --_scale-delay: 200ms;
  }
  /* Any other sibling is hovered */
  .nav__menu:hover .underline {
    --_translate: 100%;
    --_scale-delay: 200ms;
  }
  /*
  The actually hovered <.underline>

  NOTE: same specificity as previous selector, so it must either come after or be artificially inflated (eg. :hover:hover)
  */
  .nav__menu .underline:hover {
    --_scale: 1;
    --_translate: 0;
    --_scale-delay: 0ms;
  }
}
button,
.btn {
  display: inline-block;
  background: transparent;
  border-width: 2px;
  border-style: solid;
  border-color: transparent;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  background: hsl(178, 67%, 38%);
  border-color: hsl(178, 67%, 38%);
  font: inherit;
  font-weight: 300;
  color: hsl(213, 36%, 32%);
  --button-size-scaling-factor: var( --scaling-factor );
  /*  --button-size-scaling-factor: 1;

    &[class*="btn--xsmall"], 
    &[class*="btn--xsmall"] > * {
      --button-size-scaling-factor: 0.7;
      font-size: 70% !important;
    }
    &[class*="btn--small"], 
    &[class*="btn--small"] > * {
      --button-size-scaling-factor: 0.85;
      font-size: 85% !important;
    }
    &[class*="btn--regular"], 
    &[class*="btn--regular"] > * {
      --button-size-scaling-factor: 1.0;
      // font-size: 100% !important;
    }
    &[class*="btn--large"], 
    &[class*="btn--large"] > * {
      --button-size-scaling-factor: 1.25;
      font-size: 125% !important;
    }
  */
  transform-style: preserve-3d;
  padding: calc(0.5rem * var(--button-size-scaling-factor)) calc(0.5rem * var(--button-size-scaling-factor));
}
button label,
.btn label {
  font: inherit;
}
button:hover,
.btn:hover {
  background: hsl(213, 36%, 32%) !important;
  border-color: hsl(178, 67%, 38%) !important;
  color: hsl(178, 67%, 38%) !important;
}
button:hover label,
.btn:hover label {
  color: hsl(178, 67%, 38%) !important;
}
button.invert,
.btn.invert {
  background: transparent;
  border-color: hsl(178, 67%, 38%);
  color: hsl(178, 67%, 38%);
}
button.invert label,
.btn.invert label {
  color: hsl(178, 67%, 38%);
}
button.invert:hover,
.btn.invert:hover {
  background: hsl(178, 67%, 38%) !important;
  border-color: hsl(178, 67%, 38%) !important;
  color: hsl(213, 36%, 32%) !important;
}
button.invert:hover label,
.btn.invert:hover label {
  color: hsl(213, 36%, 32%) !important;
}
button.icon-only,
.btn.icon-only {
  padding: calc(0.5rem * var(--button-size-scaling-factor)) !important;
}
button.image img,
.btn.image img {
  height: 1.75rem;
}
button.image-only,
.btn.image-only {
  padding: calc(0.5rem * var(--button-size-scaling-factor)) !important;
}
button.image-only img,
.btn.image-only img {
  height: 1.75rem;
}
button.warning,
.btn.warning {
  background: hsl(33, 93%, 48%);
  border-color: hsl(33, 93%, 48%);
  color: hsl(213, 36%, 32%);
}
button.warning label,
.btn.warning label {
  color: hsl(213, 36%, 32%);
}
button.warning:hover,
.btn.warning:hover {
  background: hsl(213, 36%, 32%) !important;
  border-color: hsl(33, 93%, 48%) !important;
  color: hsl(33, 93%, 48%) !important;
}
button.warning:hover label,
.btn.warning:hover label {
  color: hsl(33, 93%, 48%) !important;
}
button.warning.invert,
.btn.warning.invert {
  background: transparent;
  border-color: hsl(33, 93%, 48%);
  color: hsl(33, 93%, 48%);
}
button.warning.invert label,
.btn.warning.invert label {
  color: hsl(33, 93%, 48%);
}
button.warning.invert:hover,
.btn.warning.invert:hover {
  background: hsl(33, 93%, 48%) !important;
  border-color: hsl(33, 93%, 48%) !important;
  color: hsl(213, 36%, 32%) !important;
}
button.warning.invert:hover label,
.btn.warning.invert:hover label {
  color: hsl(213, 36%, 32%) !important;
}
button.danger,
.btn.danger {
  background: hsl(0, 82%, 65%);
  border-color: hsl(0, 82%, 65%);
  color: hsl(213, 36%, 32%);
}
button.danger label,
.btn.danger label {
  color: hsl(213, 36%, 32%);
}
button.danger:hover,
.btn.danger:hover {
  background: hsl(213, 36%, 32%) !important;
  border-color: hsl(0, 82%, 65%) !important;
  color: hsl(0, 82%, 65%) !important;
}
button.danger:hover label,
.btn.danger:hover label {
  color: hsl(0, 82%, 65%) !important;
}
button.danger.invert,
.btn.danger.invert {
  background: transparent;
  border-color: hsl(0, 82%, 65%);
  color: hsl(0, 82%, 65%);
}
button.danger.invert label,
.btn.danger.invert label {
  color: hsl(0, 82%, 65%);
}
button.danger.invert:hover,
.btn.danger.invert:hover {
  background: hsl(0, 82%, 65%) !important;
  border-color: hsl(0, 82%, 65%) !important;
  color: hsl(213, 36%, 32%) !important;
}
button.danger.invert:hover label,
.btn.danger.invert:hover label {
  color: hsl(213, 36%, 32%) !important;
}
button.disabled,
.btn.disabled {
  display: none;
  pointer-events: none !important;
}
@media only screen and (min-width: 0px) {
  button[class$="--responsive"] label, button[class*="--responsive"] label,
  .btn[class$="--responsive"] label,
  .btn[class*="--responsive"] label {
    display: none;
  }
}
@media only screen and (min-width: 481px) {
  button[class$="--responsive"] label, button[class*="--responsive"] label,
  .btn[class$="--responsive"] label,
  .btn[class*="--responsive"] label {
    display: none;
  }
}
@media only screen and (min-width: 769px) {
  button[class$="--responsive"] label, button[class*="--responsive"] label,
  .btn[class$="--responsive"] label,
  .btn[class*="--responsive"] label {
    display: none;
  }
}
@media only screen and (min-width: 1281px) {
  button[class$="--responsive"] label, button[class*="--responsive"] label,
  .btn[class$="--responsive"] label,
  .btn[class*="--responsive"] label {
    display: initial;
  }
}
@media only screen and (min-width: 1921px) {
  button[class$="--responsive"] label, button[class*="--responsive"] label,
  .btn[class$="--responsive"] label,
  .btn[class*="--responsive"] label {
    display: initial;
  }
}

.button-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.75rem;
}

.button-group {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: baseline;
}
.button-group input, .button-group select {
  width: min-content !important;
}
.button-group > span,
.button-group > span > span {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.5rem;
}
.button-group .button-with-help-text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

form .row {
  display: flex;
  justify-content: space-between;
  margin-top: 3.5rem;
  gap: 1.75rem;
  align-items: center;
}
form .row:first-of-type {
  margin-top: 0;
}
form ::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: hsl(208, 7%, 46%);
  opacity: 1; /* Firefox */
}
form :-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: hsl(208, 7%, 46%);
}
form ::-ms-input-placeholder {
  /* Microsoft Edge */
  color: hsl(208, 7%, 46%);
}
form .element {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
form .element legend,
form .element label {
  margin-bottom: 0.5rem;
  position: relative;
  width: max-content;
}
form .element legend:before,
form .element label:before {
  content: "//";
  font-weight: 600;
  color: hsl(351, 59%, 53%);
  padding-right: 0.5rem;
}
form .element legend.button,
form .element label.button {
  display: inline-block;
  background: transparent;
  color: #DEE2E6;
  font: inherit;
  border-width: 2px;
  border-style: solid;
  border-color: transparent;
  padding: 0.5rem 1.75rem;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  font-weight: 400;
  color: #2D3442;
  margin-inline: 0.5rem;
  position: relative;
  max-width: fit-content;
  transform-style: preserve-3d;
}
form .element legend.button:before,
form .element label.button:before {
  content: "";
  padding-right: 0;
}
form .element legend.button:hover,
form .element label.button:hover {
  color: #2D3442;
}
form .element legend.button:hover::after,
form .element label.button:hover::after {
  opacity: 1;
}
form .element legend.button::after,
form .element label.button::after {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: blur(1em);
  transform: translateZ(-1px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
form .element .selected-image img,
form .element .image {
  max-width: 300px;
  border-radius: 8px;
}
form .element select {
  color: #DEE2E6;
}
form .element select:required:invalid {
  color: hsl(208, 7%, 46%);
}
form .form-input-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  column-gap: 0.5rem;
  width: 100%;
  padding: 0;
  margin: 0;
}
form textarea {
  min-height: 200px;
}
form .remove-button:first-of-type {
  display: none;
}
form .grouped-inputs {
  margin: 0 0 1rem 0;
}
form .grouped-inputs i {
  padding: 0 1rem;
}
form .grouped-elements {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 1rem;
  margin: 0 0 1rem 0;
}
form .grouped-elements i {
  padding: 0 1rem;
}
form .input-group {
  display: flex;
}
form .input-group input {
  flex-grow: 1;
}
form form.grid {
  width: min(100%, 1800px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(25rem, 100%), 1fr));
  grid-gap: 1.75rem;
}
form .edit-toggle {
  user-select: none;
  cursor: pointer;
}
form .vich-file {
  max-width: 10vw;
}
form li.form-element-error {
  margin: 0.25rem;
  padding: 0.25rem;
  background-color: #393F4C;
  border: 2px solid hsl(0, 82%, 65%);
  font-size: 0.9rem;
  font-weight: 300;
  color: #DEE2E6;
  width: max-content;
}
form li.form-element-error:before {
  font: var(--fa-font-solid);
  content: "\f062";
  color: hsl(0, 82%, 65%);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
form legend[required],
form label[required] {
  font-weight: 500 !important;
  opacity: 1;
}

.form-modal-container {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(13, 19, 28, 0.85);
  z-index: 100;
}
.form-modal-container.login {
  background-color: #2D3442;
}
.form-modal-container.login a {
  text-decoration: none;
  color: hsl(178, 67%, 38%);
}
.form-modal-container > .form-modal {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  background-color: #393F4C;
  border: 2px solid hsl(178, 67%, 38%);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 7px 20px -10px hsl(178, 67%, 38%);
}
.form-modal-container > .form-modal.discogs-query-results {
  max-height: 80vh;
  overflow-y: auto;
}
.form-modal-container > .form-modal input[type=username],
.form-modal-container > .form-modal input[type=email],
.form-modal-container > .form-modal input[type=password] {
  background-color: #2D3442;
  color: #DEE2E6;
}
.form-modal-container > .form-modal > section {
  position: relative;
  padding: 0.5rem 1.75rem 1.75rem;
  background-color: #2D3442 !important;
}
.form-modal-container > .form-modal > section > span:first-of-type {
  display: flex;
  flex-direction: row;
  column-gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #30786C;
}
.form-modal-container > .form-modal > section > span:first-of-type i {
  color: hsl(351, 59%, 53%);
  cursor: pointer;
  position: relative;
  transition: 0.2s;
}
.form-modal-container > .form-modal > section > span:first-of-type i:hover {
  box-shadow: 0px 0px 8px 0px hsl(351, 59%, 53%);
}
.form-modal-container > .form-modal > section > ul li,
.form-modal-container > .form-modal > section > ul > ul li {
  text-transform: uppercase;
  padding: 0.5rem 0;
}
.form-modal-container > .form-modal > section > ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1rem;
  row-gap: 1rem;
  align-items: center;
}
.form-modal-container > .form-modal > section > span {
  display: grid;
  margin-top: 1.75rem;
  justify-content: center;
}

select {
  cursor: pointer;
}
select option {
  background-color: #2D3442;
  color: #DEE2E6 !important;
}

textarea,
select,
input[type=file],
input[type=email],
input[type=username],
input[type=password],
input[type=search],
input[type=time],
input[type=number],
input[type=text] {
  width: 100%;
  padding: 0;
  padding: 0.25rem 0.5rem;
  border: 0px solid transparent;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: rgba(222, 226, 230, 0.05);
  border-radius: 0;
  position: relative;
  background-color: transparent;
  color: #DEE2E6;
  transition: 300ms ease;
}
textarea::placeholder,
select::placeholder,
input[type=file]::placeholder,
input[type=email]::placeholder,
input[type=username]::placeholder,
input[type=password]::placeholder,
input[type=search]::placeholder,
input[type=time]::placeholder,
input[type=number]::placeholder,
input[type=text]::placeholder {
  color: hsl(208, 7%, 46%);
}
textarea:hover:not(:disabled),
select:hover:not(:disabled),
input[type=file]:hover:not(:disabled),
input[type=email]:hover:not(:disabled),
input[type=username]:hover:not(:disabled),
input[type=password]:hover:not(:disabled),
input[type=search]:hover:not(:disabled),
input[type=time]:hover:not(:disabled),
input[type=number]:hover:not(:disabled),
input[type=text]:hover:not(:disabled) {
  border-bottom-color: rgba(32, 162, 157, 0.5);
  outline: none;
}
textarea:focus:not(:disabled),
select:focus:not(:disabled),
input[type=file]:focus:not(:disabled),
input[type=email]:focus:not(:disabled),
input[type=username]:focus:not(:disabled),
input[type=password]:focus:not(:disabled),
input[type=search]:focus:not(:disabled),
input[type=time]:focus:not(:disabled),
input[type=number]:focus:not(:disabled),
input[type=text]:focus:not(:disabled) {
  border-bottom-color: rgba(32, 162, 157, 0.5);
  outline: none;
}
textarea:disabled,
select:disabled,
input[type=file]:disabled,
input[type=email]:disabled,
input[type=username]:disabled,
input[type=password]:disabled,
input[type=search]:disabled,
input[type=time]:disabled,
input[type=number]:disabled,
input[type=text]:disabled {
  background: transparent;
  color: #7F899F;
  opacity: 1;
}
textarea option,
select option,
input[type=file] option,
input[type=email] option,
input[type=username] option,
input[type=password] option,
input[type=search] option,
input[type=time] option,
input[type=number] option,
input[type=text] option {
  color: hsl(208, 7%, 46%);
}

input[type=number] {
  min-width: 100px;
  -moz-appearance: textfield;
  appearance: textfield;
  margin: 0;
}
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

textarea {
  resize: vertical;
  width: 100%;
  border: 2px solid #DEE2E6;
  border-radius: 0.5rem;
  transition: border 300ms ease, background-color 300ms ease, color 300ms ease;
}
textarea:hover {
  border: 2px solid hsl(351, 59%, 53%);
  outline: none;
}
textarea:hover:disabled {
  border: 2px solid transparent;
}
textarea:focus {
  border: 2px solid hsl(178, 67%, 38%);
  outline: none;
}
textarea:disabled {
  background: transparent;
  color: #DEE2E6;
  border-color: transparent;
}

input[type=file] {
  display: none;
}

.text-input-with-icon {
  position: relative;
  width: 100%;
}
.text-input-with-icon img {
  position: absolute;
  height: 2rem;
}
.text-input-with-icon .input-field {
  width: 100%;
  padding: 5px;
  padding-left: 2rem;
}

.form-input-container[class*=form-error-placeholder] input::placeholder {
  font-weight: 400;
  color: hsl(0, 82%, 65%);
}
.form-input-container[class*=form-error-placeholder]::after {
  font: var(--fa-font-solid);
  content: "\f071";
  color: hsl(0, 82%, 65%);
}
.form-input-container[class*=form-error-placeholder] select + .select2-container .select2-selection__placeholder,
.form-input-container[class*=form-error-placeholder] select + .select2-container .select2-search__field::placeholder {
  font-weight: 400 !important;
  color: hsl(0, 82%, 65%) !important;
}

.uncheckbox {
  --icon-size: 1.25rem; /* icon size is really more 'switch size' as the icons are scaled down 25% to better fit the circle */
  --padding: 3px;
  --border-width: 2px;
  --colour-bg-neutral: hsl(208, 7%, 46%);
  --colour-bg-positive: hsl(178, 67%, 38%);
  --colour-bg-negative: hsl(0, 82%, 65%);
  --colour-fg-checked: #DEE2E6;
  --colour-fg-unchecked: hsl(208, 7%, 46%);
  --gap: calc( var( --icon-size ) / 2 );
  --offset: calc( var( --icon-size ) + var( --gap ) );
  display: inline-grid;
  grid-template-areas: "true false"; /* defining only 2 columns allows us to force a third row for the last element */
  grid-template-rows: 1fr;
  align-items: center;
  gap: var(--gap, 1rem);
  border-radius: 4px;
  border: var(--border-width) solid;
  border-color: var(--colour-bg-neutral);
  padding: var(--padding);
  position: relative;
  isolation: isolate;
  transition: all 0.5s;
  /* inlined svg icon - may not all apply if icons not svgs  */
  /* selection indicator - 'default' value is null so element centered to start but will change depending on whatever radio button is marked checked to start */
  /* hide radio button */
  /* Overrides for checkbox  */
  /* these translations break when gap changes, needs to be fixed */
}
.uncheckbox i, .uncheckbox .icon {
  font-size: var(--icon-size, 1rem);
  width: var(--icon-size, 1rem);
  height: var(--icon-size, 1rem);
  scale: 0.75;
  text-align: center;
}
.uncheckbox i, .uncheckbox .icon path {
  transition: all 0.5s;
}
.uncheckbox:has(input[value="1"]:checked), .uncheckbox:has(input[value=true]:checked) {
  border-color: var(--colour-bg-positive);
}
.uncheckbox:has(input[value="0"]:checked), .uncheckbox:has(input[value=false]:checked) {
  border-color: var(--colour-bg-negative);
}
.uncheckbox label {
  cursor: pointer;
  display: grid;
  place-items: center;
  /* force the last element to make a new row if it doesn't exist, i.e. there's three options instead of two */
}
.uncheckbox label:last-of-type {
  grid-column: -1;
}
.uncheckbox .selected-value {
  pointer-events: none;
  position: absolute;
  transition: all 0.5s;
  width: var(--icon-size, 1rem);
  height: var(--icon-size, 1rem);
  border-radius: 4px;
  background: var(--colour-bg-neutral);
  top: var(--padding);
  left: 50%;
  translate: -50% 0;
  z-index: -1;
}
.uncheckbox input {
  position: absolute;
  height: 0;
  opacity: 0;
}
.uncheckbox label {
  /* vary the selected item position and colour */
  /* if there is a 'null' option, the offset needs to adapt */
  /* if there is a 'null' option, the offset needs to adapt */
}
.uncheckbox label:has(input[type=radio][value="1"]:checked) ~ .selected-value {
  transform: translateX(-100%);
  background: var(--colour-bg-positive);
}
.uncheckbox label:has(input[type=radio][value="1"]:checked) ~ label:has(input[value="-1"]) ~ .selected-value {
  transform: translateX(calc(-1 * var(--offset)));
}
.uncheckbox label:has(input[value="-1"]:checked) ~ .selected-value {
  transform: translateX(0%);
}
.uncheckbox label:has(input[value="0"]:checked) ~ .selected-value {
  transform: translateX(100%);
  background: var(--colour-bg-negative);
}
.uncheckbox label:has(input[value="-1"]) ~ label:has(input[value="0"]:checked) ~ .selected-value {
  transform: translateX(var(--offset));
}
.uncheckbox label:has(input[type=radio]) i {
  color: var(--colour-fg-unchecked);
}
.uncheckbox label:has(input[type=radio]:checked) i {
  color: var(--colour-fg-checked) !important;
}
.uncheckbox label:has(input[type=radio]) path {
  fill: var(--colour-fg-unchecked);
}
.uncheckbox label:has(input[type=radio]:checked) .icon path {
  fill: var(--colour-fg-checked) !important;
}
.uncheckbox:has(input[type=checkbox]) {
  border-color: var(--colour-bg-negative);
}
.uncheckbox:has(input[type=checkbox]:checked) {
  border-color: var(--colour-bg-positive);
}
.uncheckbox:has(input[type=checkbox]) label {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: 1fr;
  grid-column: 1/-1;
}
.uncheckbox:has(input[type=checkbox]) path {
  fill: var(--colour-fg-unchecked);
}
.uncheckbox:has(input[type=checkbox]) input:checked ~ .icon:first-of-type path {
  fill: var(--colour-fg-checked);
}
.uncheckbox:has(input[type=checkbox]) input:not(:checked) ~ .icon:last-of-type path {
  fill: var(--colour-fg-checked);
}
.uncheckbox:has(input[type=checkbox]) .selected-value {
  left: calc(100% - var(--icon-size) - var(--padding));
  translate: 0% 0;
  background: var(--colour-bg-negative);
}
.uncheckbox:has(input[type=checkbox]:checked) .selected-value {
  transform: translateX(calc(var(--offset) * -1));
  background: var(--colour-bg-positive);
}

.tab-container {
  width: 100%;
  margin: 0 auto;
  background: #2D3442;
  display: flex;
  flex-wrap: wrap;
  isolation: isolate;
}
.tab-container.no-bg {
  background: transparent;
}
.tab-container > .tab {
  width: 100%;
  z-index: -1;
  order: 1;
  display: none;
  padding: 1.75rem;
  border: 1px solid #30786C;
  border-radius: 0;
  background: var(--tab-container-section-bg-colour, #393F4C);
  color: #DEE2E6;
}
.tab-container > .tab h1 {
  margin-bottom: 1.75rem;
  padding-bottom: 0.5rem;
  width: 100%;
  border-bottom: 2px solid #30786C;
}
.tab-container hr {
  margin-top: 1.75rem;
  margin-bottom: 1.75rem;
}
.tab-container > input {
  display: none;
}
.tab-container > label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 0 -1px;
  padding: 15px 25px;
  font-weight: 500;
  color: #DEE2E6;
  border: 1px solid transparent;
  border-top: 1px solid #30786C;
  border-left: 1px solid #30786C;
  border-right: 1px solid #30786C;
}
.tab-container > label p {
  display: inline-block;
  padding-left: 1rem;
}
.tab-container > label img {
  height: 2rem;
}
.tab-container > label:has(+ div .form-error-placeholder), .tab-container > label:has(+ div .form-element-error) {
  color: hsl(0, 82%, 65%) !important;
}
.tab-container > label:has(+ div .form-error-placeholder) p:after, .tab-container > label:has(+ div .form-element-error) p:after {
  font: var(--fa-font-solid);
  content: "\f071";
  color: hsl(0, 82%, 65%);
  padding-left: 1rem;
}
.tab-container > label:hover {
  color: #30786C;
  cursor: pointer;
}
.tab-container > input:checked + label {
  color: #DEE2E6;
  border: 1px solid #30786C;
  border-top: 4px solid #30786C;
  position: relative;
  background-color: #393F4C;
}
.tab-container > input:checked + label:after {
  left: 0;
  bottom: -2px;
  position: absolute;
  content: "";
  width: 100%;
  height: 3px;
  background-color: #393F4C;
}
.tab-container [id^=tab-]:checked + label + [id^=content-] {
  display: block;
}

/**
 * Card deck and cards
 */
.card-deck {
  /**
   * "Non-main" item cards
   */
  /**
   * Item attachments
   */
}
.card-deck.moba_item .card .card__side--front:hover, .card-deck.manufacturer .card .card__side--front:hover, .card-deck.railway_undertaking .card .card__side--front:hover, .card-deck.retailer .card .card__side--front:hover {
  color: var(--card-text-colour);
  background: var(--card-bg-colour-hover);
}
.card-deck.moba_item .card .card__side--front:hover.ordered, .card-deck.manufacturer .card .card__side--front:hover.ordered, .card-deck.railway_undertaking .card .card__side--front:hover.ordered, .card-deck.retailer .card .card__side--front:hover.ordered {
  color: var(--card-text-colour-ordered-hover);
  background: var(--card-bg-colour-ordered-hover);
}
.card-deck.moba_item .card .card__side--front:hover.wishlist, .card-deck.manufacturer .card .card__side--front:hover.wishlist, .card-deck.railway_undertaking .card .card__side--front:hover.wishlist, .card-deck.retailer .card .card__side--front:hover.wishlist {
  color: var(--card-text-colour-wishlist-hover);
  background: var(--card-bg-colour-wishlist-hover);
}
.card-deck.moba_item .card .card__side--front:hover .name,
.card-deck.moba_item .card .card__side--front:hover .title, .card-deck.manufacturer .card .card__side--front:hover .name,
.card-deck.manufacturer .card .card__side--front:hover .title, .card-deck.railway_undertaking .card .card__side--front:hover .name,
.card-deck.railway_undertaking .card .card__side--front:hover .title, .card-deck.retailer .card .card__side--front:hover .name,
.card-deck.retailer .card .card__side--front:hover .title {
  border-image: var(--card-hr-colour-hover) 1;
}
.card-deck.manufacturer .card .card-image,
.card-deck.manufacturer .card .item-image, .card-deck.railway_undertaking .card .card-image,
.card-deck.railway_undertaking .card .item-image, .card-deck.retailer .card .card-image,
.card-deck.retailer .card .item-image {
  justify-content: center;
}
.card-deck.manufacturer .card .card-image img,
.card-deck.manufacturer .card .item-image img, .card-deck.railway_undertaking .card .card-image img,
.card-deck.railway_undertaking .card .item-image img, .card-deck.retailer .card .card-image img,
.card-deck.retailer .card .item-image img {
  max-width: 100%;
}
.card-deck.attachments {
  grid-template-columns: repeat(auto-fill, minmax(min(250px * var(--scaling-factor), 100%), 1fr));
}
.card-deck.attachments .card {
  box-shadow: 0 1px 20px 0 hsla(0, 0%, 0%, 0.1), 1px 0px 5px hsla(0, 0%, 0%, 0.25);
  white-space: initial;
  transition: all 0.5s ease;
  outline: 2px solid transparent;
}
.card-deck.attachments .card:hover {
  outline: 2px solid hsl(178, 67%, 38%) !important;
}

/**
 * Digital decoder function mapping table for Moba items
 */
.item-view .grid-table.digital-decoder-function,
.item-view .grid-table.listing.digital-decoder-function-images,
.item-view .grid-table.listing.digital-decoder-function-mappings {
  max-width: 100%;
  width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(min(450px * var(--scaling-factor), 100%), 1fr));
  margin-inline: auto;
}
.item-view .grid-table.digital-decoder-function .row-wrapper:not(.heading):nth-child(even),
.item-view .grid-table.listing.digital-decoder-function-images .row-wrapper:not(.heading):nth-child(even),
.item-view .grid-table.listing.digital-decoder-function-mappings .row-wrapper:not(.heading):nth-child(even) {
  background-color: rgba(45, 52, 66, 0.5);
}
.item-view .grid-table.digital-decoder-function:not(.edit):not(.search),
.item-view .grid-table.listing.digital-decoder-function-images:not(.edit):not(.search),
.item-view .grid-table.listing.digital-decoder-function-mappings:not(.edit):not(.search) {
  gap: 1rem !important;
}
.item-view .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item,
.item-view .grid-table.listing.digital-decoder-function-images:not(.edit):not(.search) .grid-item,
.item-view .grid-table.listing.digital-decoder-function-mappings:not(.edit):not(.search) .grid-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: start;
  border: 1px solid hsl(208, 7%, 46%);
  padding: 0.5rem;
  gap: 1rem;
  font-weight: bold;
}
.item-view .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item.highlight:hover,
.item-view .grid-table.listing.digital-decoder-function-images:not(.edit):not(.search) .grid-item.highlight:hover,
.item-view .grid-table.listing.digital-decoder-function-mappings:not(.edit):not(.search) .grid-item.highlight:hover {
  background-color: #144552;
}
.item-view .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item.highlight:hover > label,
.item-view .grid-table.listing.digital-decoder-function-images:not(.edit):not(.search) .grid-item.highlight:hover > label,
.item-view .grid-table.listing.digital-decoder-function-mappings:not(.edit):not(.search) .grid-item.highlight:hover > label {
  color: #30786C;
}
.item-view .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item > :last-child,
.item-view .grid-table.listing.digital-decoder-function-images:not(.edit):not(.search) .grid-item > :last-child,
.item-view .grid-table.listing.digital-decoder-function-mappings:not(.edit):not(.search) .grid-item > :last-child {
  margin-left: auto;
}
.item-view .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .digital-decoder-function-key,
.item-view .grid-table.listing.digital-decoder-function-images:not(.edit):not(.search) .grid-item .digital-decoder-function-key,
.item-view .grid-table.listing.digital-decoder-function-mappings:not(.edit):not(.search) .grid-item .digital-decoder-function-key {
  color: hsl(178, 67%, 38%);
  border: 1px solid hsl(208, 7%, 46%);
  border-radius: 4px;
  padding: 0.5rem;
}
.item-view .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .digital-decoder-function-key::before,
.item-view .grid-table.listing.digital-decoder-function-images:not(.edit):not(.search) .grid-item .digital-decoder-function-key::before,
.item-view .grid-table.listing.digital-decoder-function-mappings:not(.edit):not(.search) .grid-item .digital-decoder-function-key::before {
  content: "F";
  color: hsl(178, 67%, 38%);
  font-weight: bold;
}
.item-view .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .digital-decoder-function-image, .item-view .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .digital-decoder-function-template-option,
.item-view .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .grid-table.listing.digital-decoder-function-images .digital-decoder-function-template-option,
.item-view .grid-table.listing.digital-decoder-function-images .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .digital-decoder-function-template-option,
.item-view .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-template-option,
.item-view .grid-table.listing.digital-decoder-function-mappings .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .digital-decoder-function-template-option, .item-view .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .digital-decoder-function-image-option,
.item-view .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .grid-table.listing.digital-decoder-function-images .digital-decoder-function-image-option,
.item-view .grid-table.listing.digital-decoder-function-images .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .digital-decoder-function-image-option,
.item-view .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-image-option,
.item-view .grid-table.listing.digital-decoder-function-mappings .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .digital-decoder-function-image-option,
.item-view .grid-table.listing.digital-decoder-function-images:not(.edit):not(.search) .grid-item .digital-decoder-function-image,
.item-view .grid-table.listing.digital-decoder-function-images:not(.edit):not(.search) .grid-item .digital-decoder-function-template-option,
.item-view .grid-table.listing.digital-decoder-function-images:not(.edit):not(.search) .grid-item .digital-decoder-function-image-option,
.item-view .grid-table.listing.digital-decoder-function-mappings:not(.edit):not(.search) .grid-item .digital-decoder-function-image,
.item-view .grid-table.listing.digital-decoder-function-mappings:not(.edit):not(.search) .grid-item .digital-decoder-function-template-option,
.item-view .grid-table.listing.digital-decoder-function-mappings:not(.edit):not(.search) .grid-item .digital-decoder-function-image-option {
  height: calc(2.75rem * var(--scaling-factor));
  width: calc(2.75rem * var(--scaling-factor));
}
.item-view .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .digital-decoder-function-image.esu:has(svg), .item-view .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .esu.digital-decoder-function-template-option:has(svg), .item-view .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .esu.digital-decoder-function-image-option:has(svg), .item-view .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .digital-decoder-function-image.esu :has(img), .item-view .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .esu.digital-decoder-function-template-option :has(img), .item-view .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .esu.digital-decoder-function-image-option :has(img),
.item-view .grid-table.listing.digital-decoder-function-images:not(.edit):not(.search) .grid-item .digital-decoder-function-image.esu:has(svg),
.item-view .grid-table.listing.digital-decoder-function-images:not(.edit):not(.search) .grid-item .esu.digital-decoder-function-template-option:has(svg),
.item-view .grid-table.listing.digital-decoder-function-images:not(.edit):not(.search) .grid-item .esu.digital-decoder-function-image-option:has(svg),
.item-view .grid-table.listing.digital-decoder-function-images:not(.edit):not(.search) .grid-item .digital-decoder-function-image.esu :has(img),
.item-view .grid-table.listing.digital-decoder-function-images:not(.edit):not(.search) .grid-item .esu.digital-decoder-function-template-option :has(img),
.item-view .grid-table.listing.digital-decoder-function-images:not(.edit):not(.search) .grid-item .esu.digital-decoder-function-image-option :has(img),
.item-view .grid-table.listing.digital-decoder-function-mappings:not(.edit):not(.search) .grid-item .digital-decoder-function-image.esu:has(svg),
.item-view .grid-table.listing.digital-decoder-function-mappings:not(.edit):not(.search) .grid-item .esu.digital-decoder-function-template-option:has(svg),
.item-view .grid-table.listing.digital-decoder-function-mappings:not(.edit):not(.search) .grid-item .esu.digital-decoder-function-image-option:has(svg),
.item-view .grid-table.listing.digital-decoder-function-mappings:not(.edit):not(.search) .grid-item .digital-decoder-function-image.esu :has(img),
.item-view .grid-table.listing.digital-decoder-function-mappings:not(.edit):not(.search) .grid-item .esu.digital-decoder-function-template-option :has(img),
.item-view .grid-table.listing.digital-decoder-function-mappings:not(.edit):not(.search) .grid-item .esu.digital-decoder-function-image-option :has(img) {
  background-color: #AEAFB4;
}
.item-view .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .digital-decoder-function-image:not(.esu), .item-view .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .digital-decoder-function-template-option:not(.esu), .item-view .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .digital-decoder-function-image-option:not(.esu),
.item-view .grid-table.listing.digital-decoder-function-images:not(.edit):not(.search) .grid-item .digital-decoder-function-image:not(.esu),
.item-view .grid-table.listing.digital-decoder-function-images:not(.edit):not(.search) .grid-item .digital-decoder-function-template-option:not(.esu),
.item-view .grid-table.listing.digital-decoder-function-images:not(.edit):not(.search) .grid-item .digital-decoder-function-image-option:not(.esu),
.item-view .grid-table.listing.digital-decoder-function-mappings:not(.edit):not(.search) .grid-item .digital-decoder-function-image:not(.esu),
.item-view .grid-table.listing.digital-decoder-function-mappings:not(.edit):not(.search) .grid-item .digital-decoder-function-template-option:not(.esu),
.item-view .grid-table.listing.digital-decoder-function-mappings:not(.edit):not(.search) .grid-item .digital-decoder-function-image-option:not(.esu) {
  color: hsl(178, 67%, 38%);
}
.item-view .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .digital-decoder-function-image > img, .item-view .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .digital-decoder-function-template-option > img,
.item-view .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .grid-table.listing.digital-decoder-function-images .digital-decoder-function-template-option > img,
.item-view .grid-table.listing.digital-decoder-function-images .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .digital-decoder-function-template-option > img,
.item-view .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-template-option > img,
.item-view .grid-table.listing.digital-decoder-function-mappings .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .digital-decoder-function-template-option > img, .item-view .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .digital-decoder-function-image-option > img,
.item-view .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .grid-table.listing.digital-decoder-function-images .digital-decoder-function-image-option > img,
.item-view .grid-table.listing.digital-decoder-function-images .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .digital-decoder-function-image-option > img,
.item-view .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-image-option > img,
.item-view .grid-table.listing.digital-decoder-function-mappings .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .digital-decoder-function-image-option > img, .item-view .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .digital-decoder-function-image > svg, .item-view .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .digital-decoder-function-template-option > svg,
.item-view .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .grid-table.listing.digital-decoder-function-images .digital-decoder-function-template-option > svg,
.item-view .grid-table.listing.digital-decoder-function-images .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .digital-decoder-function-template-option > svg,
.item-view .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-template-option > svg,
.item-view .grid-table.listing.digital-decoder-function-mappings .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .digital-decoder-function-template-option > svg, .item-view .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .digital-decoder-function-image-option > svg,
.item-view .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .grid-table.listing.digital-decoder-function-images .digital-decoder-function-image-option > svg,
.item-view .grid-table.listing.digital-decoder-function-images .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .digital-decoder-function-image-option > svg,
.item-view .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-image-option > svg,
.item-view .grid-table.listing.digital-decoder-function-mappings .grid-table.digital-decoder-function:not(.edit):not(.search) .grid-item .digital-decoder-function-image-option > svg,
.item-view .grid-table.listing.digital-decoder-function-images:not(.edit):not(.search) .grid-item .digital-decoder-function-image > img,
.item-view .grid-table.listing.digital-decoder-function-images:not(.edit):not(.search) .grid-item .digital-decoder-function-template-option > img,
.item-view .grid-table.listing.digital-decoder-function-images:not(.edit):not(.search) .grid-item .digital-decoder-function-image-option > img,
.item-view .grid-table.listing.digital-decoder-function-images:not(.edit):not(.search) .grid-item .digital-decoder-function-image > svg,
.item-view .grid-table.listing.digital-decoder-function-images:not(.edit):not(.search) .grid-item .digital-decoder-function-template-option > svg,
.item-view .grid-table.listing.digital-decoder-function-images:not(.edit):not(.search) .grid-item .digital-decoder-function-image-option > svg,
.item-view .grid-table.listing.digital-decoder-function-mappings:not(.edit):not(.search) .grid-item .digital-decoder-function-image > img,
.item-view .grid-table.listing.digital-decoder-function-mappings:not(.edit):not(.search) .grid-item .digital-decoder-function-template-option > img,
.item-view .grid-table.listing.digital-decoder-function-mappings:not(.edit):not(.search) .grid-item .digital-decoder-function-image-option > img,
.item-view .grid-table.listing.digital-decoder-function-mappings:not(.edit):not(.search) .grid-item .digital-decoder-function-image > svg,
.item-view .grid-table.listing.digital-decoder-function-mappings:not(.edit):not(.search) .grid-item .digital-decoder-function-template-option > svg,
.item-view .grid-table.listing.digital-decoder-function-mappings:not(.edit):not(.search) .grid-item .digital-decoder-function-image-option > svg {
  height: calc(2.75rem * var(--scaling-factor));
  width: calc(2.75rem * var(--scaling-factor));
}
.item-view .grid-table.digital-decoder-function:not(.edit):not(.search).icon-view,
.item-view .grid-table.listing.digital-decoder-function-images:not(.edit):not(.search).icon-view,
.item-view .grid-table.listing.digital-decoder-function-mappings:not(.edit):not(.search).icon-view {
  grid-template-columns: repeat(auto-fill, minmax(min(450px * var(--scaling-factor) / 2, 100%), 1fr));
}
.item-view .grid-table.digital-decoder-function:not(.edit):not(.search).icon-view .grid-item,
.item-view .grid-table.listing.digital-decoder-function-images:not(.edit):not(.search).icon-view .grid-item,
.item-view .grid-table.listing.digital-decoder-function-mappings:not(.edit):not(.search).icon-view .grid-item {
  flex-direction: column;
  gap: 0.5rem;
}
.item-view .grid-table.digital-decoder-function:not(.edit):not(.search).icon-view .grid-item > :last-child,
.item-view .grid-table.listing.digital-decoder-function-images:not(.edit):not(.search).icon-view .grid-item > :last-child,
.item-view .grid-table.listing.digital-decoder-function-mappings:not(.edit):not(.search).icon-view .grid-item > :last-child {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}
.item-view .grid-table.digital-decoder-function:not(.edit):not(.search).icon-view .grid-item .digital-decoder-function-image, .item-view .grid-table.digital-decoder-function:not(.edit):not(.search).icon-view .grid-item .digital-decoder-function-template-option, .item-view .grid-table.digital-decoder-function:not(.edit):not(.search).icon-view .grid-item .digital-decoder-function-image-option,
.item-view .grid-table.listing.digital-decoder-function-images:not(.edit):not(.search).icon-view .grid-item .digital-decoder-function-image,
.item-view .grid-table.listing.digital-decoder-function-images:not(.edit):not(.search).icon-view .grid-item .digital-decoder-function-template-option,
.item-view .grid-table.listing.digital-decoder-function-images:not(.edit):not(.search).icon-view .grid-item .digital-decoder-function-image-option,
.item-view .grid-table.listing.digital-decoder-function-mappings:not(.edit):not(.search).icon-view .grid-item .digital-decoder-function-image,
.item-view .grid-table.listing.digital-decoder-function-mappings:not(.edit):not(.search).icon-view .grid-item .digital-decoder-function-template-option,
.item-view .grid-table.listing.digital-decoder-function-mappings:not(.edit):not(.search).icon-view .grid-item .digital-decoder-function-image-option {
  height: calc(2.75rem * var(--scaling-factor) * 2);
  width: calc(2.75rem * var(--scaling-factor) * 2);
}
.item-view .grid-table.digital-decoder-function:not(.edit):not(.search).icon-view .grid-item .digital-decoder-function-image > img, .item-view .grid-table.digital-decoder-function:not(.edit):not(.search).icon-view .grid-item .digital-decoder-function-template-option > img, .item-view .grid-table.digital-decoder-function:not(.edit):not(.search).icon-view .grid-item .digital-decoder-function-image-option > img, .item-view .grid-table.digital-decoder-function:not(.edit):not(.search).icon-view .grid-item .digital-decoder-function-image > svg, .item-view .grid-table.digital-decoder-function:not(.edit):not(.search).icon-view .grid-item .digital-decoder-function-template-option > svg, .item-view .grid-table.digital-decoder-function:not(.edit):not(.search).icon-view .grid-item .digital-decoder-function-image-option > svg,
.item-view .grid-table.listing.digital-decoder-function-images:not(.edit):not(.search).icon-view .grid-item .digital-decoder-function-image > img,
.item-view .grid-table.listing.digital-decoder-function-images:not(.edit):not(.search).icon-view .grid-item .digital-decoder-function-template-option > img,
.item-view .grid-table.listing.digital-decoder-function-images:not(.edit):not(.search).icon-view .grid-item .digital-decoder-function-image-option > img,
.item-view .grid-table.listing.digital-decoder-function-images:not(.edit):not(.search).icon-view .grid-item .digital-decoder-function-image > svg,
.item-view .grid-table.listing.digital-decoder-function-images:not(.edit):not(.search).icon-view .grid-item .digital-decoder-function-template-option > svg,
.item-view .grid-table.listing.digital-decoder-function-images:not(.edit):not(.search).icon-view .grid-item .digital-decoder-function-image-option > svg,
.item-view .grid-table.listing.digital-decoder-function-mappings:not(.edit):not(.search).icon-view .grid-item .digital-decoder-function-image > img,
.item-view .grid-table.listing.digital-decoder-function-mappings:not(.edit):not(.search).icon-view .grid-item .digital-decoder-function-template-option > img,
.item-view .grid-table.listing.digital-decoder-function-mappings:not(.edit):not(.search).icon-view .grid-item .digital-decoder-function-image-option > img,
.item-view .grid-table.listing.digital-decoder-function-mappings:not(.edit):not(.search).icon-view .grid-item .digital-decoder-function-image > svg,
.item-view .grid-table.listing.digital-decoder-function-mappings:not(.edit):not(.search).icon-view .grid-item .digital-decoder-function-template-option > svg,
.item-view .grid-table.listing.digital-decoder-function-mappings:not(.edit):not(.search).icon-view .grid-item .digital-decoder-function-image-option > svg {
  height: calc(2.75rem * var(--scaling-factor) * 2);
  width: calc(2.75rem * var(--scaling-factor) * 2);
}
.item-view .grid-table.digital-decoder-function.edit,
.item-view .grid-table.listing.digital-decoder-function-images.edit,
.item-view .grid-table.listing.digital-decoder-function-mappings.edit {
  grid-template-columns: min-content auto auto auto auto min-content min-content min-content;
}
.item-view .grid-table.digital-decoder-function.search,
.item-view .grid-table.listing.digital-decoder-function-images.search,
.item-view .grid-table.listing.digital-decoder-function-mappings.search {
  grid-template-columns: max-content auto;
}
.item-view .grid-table.digital-decoder-function.edit, .item-view .grid-table.digital-decoder-function.search,
.item-view .grid-table.listing.digital-decoder-function-images.edit,
.item-view .grid-table.listing.digital-decoder-function-images.search,
.item-view .grid-table.listing.digital-decoder-function-mappings.edit,
.item-view .grid-table.listing.digital-decoder-function-mappings.search {
  row-gap: 0.5rem;
  column-gap: 0 !important;
}
.item-view .grid-table.digital-decoder-function.edit .function-key .form-input-container, .item-view .grid-table.digital-decoder-function.search .function-key .form-input-container,
.item-view .grid-table.listing.digital-decoder-function-images.edit .function-key .form-input-container,
.item-view .grid-table.listing.digital-decoder-function-images.search .function-key .form-input-container,
.item-view .grid-table.listing.digital-decoder-function-mappings.edit .function-key .form-input-container,
.item-view .grid-table.listing.digital-decoder-function-mappings.search .function-key .form-input-container {
  align-items: end !important;
}
.item-view .grid-table.digital-decoder-function.edit .function-key .form-input-container::before, .item-view .grid-table.digital-decoder-function.search .function-key .form-input-container::before,
.item-view .grid-table.listing.digital-decoder-function-images.edit .function-key .form-input-container::before,
.item-view .grid-table.listing.digital-decoder-function-images.search .function-key .form-input-container::before,
.item-view .grid-table.listing.digital-decoder-function-mappings.edit .function-key .form-input-container::before,
.item-view .grid-table.listing.digital-decoder-function-mappings.search .function-key .form-input-container::before {
  content: "F";
  position: absolute;
  color: hsl(178, 67%, 38%);
  font-weight: bold;
  width: 2ch;
  padding-bottom: 0.5rem;
}
.item-view .grid-table.digital-decoder-function.edit .function-key .form-input-container::after, .item-view .grid-table.digital-decoder-function.search .function-key .form-input-container::after,
.item-view .grid-table.listing.digital-decoder-function-images.edit .function-key .form-input-container::after,
.item-view .grid-table.listing.digital-decoder-function-images.search .function-key .form-input-container::after,
.item-view .grid-table.listing.digital-decoder-function-mappings.edit .function-key .form-input-container::after,
.item-view .grid-table.listing.digital-decoder-function-mappings.search .function-key .form-input-container::after {
  padding-bottom: 0.5rem;
}
.item-view .grid-table.digital-decoder-function.edit .function-key .form-input-container > input, .item-view .grid-table.digital-decoder-function.search .function-key .form-input-container > input,
.item-view .grid-table.listing.digital-decoder-function-images.edit .function-key .form-input-container > input,
.item-view .grid-table.listing.digital-decoder-function-images.search .function-key .form-input-container > input,
.item-view .grid-table.listing.digital-decoder-function-mappings.edit .function-key .form-input-container > input,
.item-view .grid-table.listing.digital-decoder-function-mappings.search .function-key .form-input-container > input {
  padding-left: 2ch;
}
.item-view .grid-table.digital-decoder-function.edit .grid-item, .item-view .grid-table.digital-decoder-function.search .grid-item,
.item-view .grid-table.listing.digital-decoder-function-images.edit .grid-item,
.item-view .grid-table.listing.digital-decoder-function-images.search .grid-item,
.item-view .grid-table.listing.digital-decoder-function-mappings.edit .grid-item,
.item-view .grid-table.listing.digital-decoder-function-mappings.search .grid-item {
  padding: 0 1rem !important;
  margin: 0 !important;
}
.item-view .grid-table.digital-decoder-function .selectize-input,
.item-view .grid-table.listing.digital-decoder-function-images .selectize-input,
.item-view .grid-table.listing.digital-decoder-function-mappings .selectize-input {
  padding-right: calc(10px + 0.4rem + 2rem);
}
.item-view .grid-table.digital-decoder-function .digital-decoder-function-key,
.item-view .grid-table.listing.digital-decoder-function-images .digital-decoder-function-key,
.item-view .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-key {
  color: hsl(178, 67%, 38%);
}
.item-view .grid-table.digital-decoder-function .digital-decoder-function-image.grid-item, .item-view .grid-table.digital-decoder-function .grid-item.digital-decoder-function-template-option,
.item-view .grid-table.digital-decoder-function .grid-table.listing.digital-decoder-function-images .grid-item.digital-decoder-function-template-option,
.item-view .grid-table.listing.digital-decoder-function-images .grid-table.digital-decoder-function .grid-item.digital-decoder-function-template-option,
.item-view .grid-table.digital-decoder-function .grid-table.listing.digital-decoder-function-mappings .grid-item.digital-decoder-function-template-option,
.item-view .grid-table.listing.digital-decoder-function-mappings .grid-table.digital-decoder-function .grid-item.digital-decoder-function-template-option, .item-view .grid-table.digital-decoder-function .grid-item.digital-decoder-function-image-option,
.item-view .grid-table.digital-decoder-function .grid-table.listing.digital-decoder-function-images .grid-item.digital-decoder-function-image-option,
.item-view .grid-table.listing.digital-decoder-function-images .grid-table.digital-decoder-function .grid-item.digital-decoder-function-image-option,
.item-view .grid-table.digital-decoder-function .grid-table.listing.digital-decoder-function-mappings .grid-item.digital-decoder-function-image-option,
.item-view .grid-table.listing.digital-decoder-function-mappings .grid-table.digital-decoder-function .grid-item.digital-decoder-function-image-option,
.item-view .grid-table.listing.digital-decoder-function-images .digital-decoder-function-image.grid-item,
.item-view .grid-table.listing.digital-decoder-function-images .grid-item.digital-decoder-function-template-option,
.item-view .grid-table.listing.digital-decoder-function-images .grid-table.listing.digital-decoder-function-mappings .grid-item.digital-decoder-function-template-option,
.item-view .grid-table.listing.digital-decoder-function-mappings .grid-table.listing.digital-decoder-function-images .grid-item.digital-decoder-function-template-option,
.item-view .grid-table.listing.digital-decoder-function-images .grid-item.digital-decoder-function-image-option,
.item-view .grid-table.listing.digital-decoder-function-images .grid-table.listing.digital-decoder-function-mappings .grid-item.digital-decoder-function-image-option,
.item-view .grid-table.listing.digital-decoder-function-mappings .grid-table.listing.digital-decoder-function-images .grid-item.digital-decoder-function-image-option,
.item-view .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-image.grid-item,
.item-view .grid-table.listing.digital-decoder-function-mappings .grid-item.digital-decoder-function-template-option,
.item-view .grid-table.listing.digital-decoder-function-mappings .grid-item.digital-decoder-function-image-option {
  height: calc(2.75rem * var(--scaling-factor));
}
.item-view .grid-table.digital-decoder-function .digital-decoder-function-image > i, .item-view .grid-table.digital-decoder-function .digital-decoder-function-template-option > i,
.item-view .grid-table.digital-decoder-function .grid-table.listing.digital-decoder-function-images .digital-decoder-function-template-option > i,
.item-view .grid-table.listing.digital-decoder-function-images .grid-table.digital-decoder-function .digital-decoder-function-template-option > i,
.item-view .grid-table.digital-decoder-function .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-template-option > i,
.item-view .grid-table.listing.digital-decoder-function-mappings .grid-table.digital-decoder-function .digital-decoder-function-template-option > i, .item-view .grid-table.digital-decoder-function .digital-decoder-function-image-option > i,
.item-view .grid-table.digital-decoder-function .grid-table.listing.digital-decoder-function-images .digital-decoder-function-image-option > i,
.item-view .grid-table.listing.digital-decoder-function-images .grid-table.digital-decoder-function .digital-decoder-function-image-option > i,
.item-view .grid-table.digital-decoder-function .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-image-option > i,
.item-view .grid-table.listing.digital-decoder-function-mappings .grid-table.digital-decoder-function .digital-decoder-function-image-option > i,
.item-view .grid-table.listing.digital-decoder-function-images .digital-decoder-function-image > i,
.item-view .grid-table.listing.digital-decoder-function-images .grid-table.digital-decoder-function .digital-decoder-function-template-option > i,
.item-view .grid-table.digital-decoder-function .grid-table.listing.digital-decoder-function-images .digital-decoder-function-template-option > i,
.item-view .grid-table.listing.digital-decoder-function-images .digital-decoder-function-template-option > i,
.item-view .grid-table.listing.digital-decoder-function-images .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-template-option > i,
.item-view .grid-table.listing.digital-decoder-function-mappings .grid-table.listing.digital-decoder-function-images .digital-decoder-function-template-option > i,
.item-view .grid-table.listing.digital-decoder-function-images .grid-table.digital-decoder-function .digital-decoder-function-image-option > i,
.item-view .grid-table.digital-decoder-function .grid-table.listing.digital-decoder-function-images .digital-decoder-function-image-option > i,
.item-view .grid-table.listing.digital-decoder-function-images .digital-decoder-function-image-option > i,
.item-view .grid-table.listing.digital-decoder-function-images .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-image-option > i,
.item-view .grid-table.listing.digital-decoder-function-mappings .grid-table.listing.digital-decoder-function-images .digital-decoder-function-image-option > i,
.item-view .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-image > i,
.item-view .grid-table.listing.digital-decoder-function-mappings .grid-table.digital-decoder-function .digital-decoder-function-template-option > i,
.item-view .grid-table.digital-decoder-function .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-template-option > i,
.item-view .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-template-option > i,
.item-view .grid-table.listing.digital-decoder-function-mappings .grid-table.digital-decoder-function .digital-decoder-function-image-option > i,
.item-view .grid-table.digital-decoder-function .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-image-option > i,
.item-view .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-image-option > i {
  height: calc(2.75rem * var(--scaling-factor));
  width: calc(2.75rem * var(--scaling-factor));
  color: hsl(178, 67%, 38%);
}
.item-view .grid-table.digital-decoder-function .digital-decoder-function-image > i > img, .item-view .grid-table.digital-decoder-function .digital-decoder-function-template-option > i > img,
.item-view .grid-table.digital-decoder-function .grid-table.listing.digital-decoder-function-images .digital-decoder-function-template-option > i > img,
.item-view .grid-table.listing.digital-decoder-function-images .grid-table.digital-decoder-function .digital-decoder-function-template-option > i > img,
.item-view .grid-table.digital-decoder-function .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-template-option > i > img,
.item-view .grid-table.listing.digital-decoder-function-mappings .grid-table.digital-decoder-function .digital-decoder-function-template-option > i > img, .item-view .grid-table.digital-decoder-function .digital-decoder-function-image-option > i > img,
.item-view .grid-table.digital-decoder-function .grid-table.listing.digital-decoder-function-images .digital-decoder-function-image-option > i > img,
.item-view .grid-table.listing.digital-decoder-function-images .grid-table.digital-decoder-function .digital-decoder-function-image-option > i > img,
.item-view .grid-table.digital-decoder-function .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-image-option > i > img,
.item-view .grid-table.listing.digital-decoder-function-mappings .grid-table.digital-decoder-function .digital-decoder-function-image-option > i > img, .item-view .grid-table.digital-decoder-function .digital-decoder-function-image > i > svg, .item-view .grid-table.digital-decoder-function .digital-decoder-function-template-option > i > svg,
.item-view .grid-table.digital-decoder-function .grid-table.listing.digital-decoder-function-images .digital-decoder-function-template-option > i > svg,
.item-view .grid-table.listing.digital-decoder-function-images .grid-table.digital-decoder-function .digital-decoder-function-template-option > i > svg,
.item-view .grid-table.digital-decoder-function .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-template-option > i > svg,
.item-view .grid-table.listing.digital-decoder-function-mappings .grid-table.digital-decoder-function .digital-decoder-function-template-option > i > svg, .item-view .grid-table.digital-decoder-function .digital-decoder-function-image-option > i > svg,
.item-view .grid-table.digital-decoder-function .grid-table.listing.digital-decoder-function-images .digital-decoder-function-image-option > i > svg,
.item-view .grid-table.listing.digital-decoder-function-images .grid-table.digital-decoder-function .digital-decoder-function-image-option > i > svg,
.item-view .grid-table.digital-decoder-function .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-image-option > i > svg,
.item-view .grid-table.listing.digital-decoder-function-mappings .grid-table.digital-decoder-function .digital-decoder-function-image-option > i > svg,
.item-view .grid-table.listing.digital-decoder-function-images .digital-decoder-function-image > i > img,
.item-view .grid-table.listing.digital-decoder-function-images .grid-table.digital-decoder-function .digital-decoder-function-template-option > i > img,
.item-view .grid-table.digital-decoder-function .grid-table.listing.digital-decoder-function-images .digital-decoder-function-template-option > i > img,
.item-view .grid-table.listing.digital-decoder-function-images .digital-decoder-function-template-option > i > img,
.item-view .grid-table.listing.digital-decoder-function-images .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-template-option > i > img,
.item-view .grid-table.listing.digital-decoder-function-mappings .grid-table.listing.digital-decoder-function-images .digital-decoder-function-template-option > i > img,
.item-view .grid-table.listing.digital-decoder-function-images .grid-table.digital-decoder-function .digital-decoder-function-image-option > i > img,
.item-view .grid-table.digital-decoder-function .grid-table.listing.digital-decoder-function-images .digital-decoder-function-image-option > i > img,
.item-view .grid-table.listing.digital-decoder-function-images .digital-decoder-function-image-option > i > img,
.item-view .grid-table.listing.digital-decoder-function-images .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-image-option > i > img,
.item-view .grid-table.listing.digital-decoder-function-mappings .grid-table.listing.digital-decoder-function-images .digital-decoder-function-image-option > i > img,
.item-view .grid-table.listing.digital-decoder-function-images .digital-decoder-function-image > i > svg,
.item-view .grid-table.listing.digital-decoder-function-images .grid-table.digital-decoder-function .digital-decoder-function-template-option > i > svg,
.item-view .grid-table.digital-decoder-function .grid-table.listing.digital-decoder-function-images .digital-decoder-function-template-option > i > svg,
.item-view .grid-table.listing.digital-decoder-function-images .digital-decoder-function-template-option > i > svg,
.item-view .grid-table.listing.digital-decoder-function-images .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-template-option > i > svg,
.item-view .grid-table.listing.digital-decoder-function-mappings .grid-table.listing.digital-decoder-function-images .digital-decoder-function-template-option > i > svg,
.item-view .grid-table.listing.digital-decoder-function-images .grid-table.digital-decoder-function .digital-decoder-function-image-option > i > svg,
.item-view .grid-table.digital-decoder-function .grid-table.listing.digital-decoder-function-images .digital-decoder-function-image-option > i > svg,
.item-view .grid-table.listing.digital-decoder-function-images .digital-decoder-function-image-option > i > svg,
.item-view .grid-table.listing.digital-decoder-function-images .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-image-option > i > svg,
.item-view .grid-table.listing.digital-decoder-function-mappings .grid-table.listing.digital-decoder-function-images .digital-decoder-function-image-option > i > svg,
.item-view .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-image > i > img,
.item-view .grid-table.listing.digital-decoder-function-mappings .grid-table.digital-decoder-function .digital-decoder-function-template-option > i > img,
.item-view .grid-table.digital-decoder-function .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-template-option > i > img,
.item-view .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-template-option > i > img,
.item-view .grid-table.listing.digital-decoder-function-mappings .grid-table.digital-decoder-function .digital-decoder-function-image-option > i > img,
.item-view .grid-table.digital-decoder-function .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-image-option > i > img,
.item-view .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-image-option > i > img,
.item-view .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-image > i > svg,
.item-view .grid-table.listing.digital-decoder-function-mappings .grid-table.digital-decoder-function .digital-decoder-function-template-option > i > svg,
.item-view .grid-table.digital-decoder-function .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-template-option > i > svg,
.item-view .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-template-option > i > svg,
.item-view .grid-table.listing.digital-decoder-function-mappings .grid-table.digital-decoder-function .digital-decoder-function-image-option > i > svg,
.item-view .grid-table.digital-decoder-function .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-image-option > i > svg,
.item-view .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-image-option > i > svg {
  height: calc(2.75rem * var(--scaling-factor));
  width: calc(2.75rem * var(--scaling-factor));
}
.item-view .grid-table.digital-decoder-function .digital-decoder-function-image-option,
.item-view .grid-table.listing.digital-decoder-function-images .digital-decoder-function-image-option,
.item-view .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-image-option {
  align-items: center;
  margin: 0 0.25rem;
}
.item-view .grid-table.digital-decoder-function .digital-decoder-function-image-option > i,
.item-view .grid-table.listing.digital-decoder-function-images .digital-decoder-function-image-option > i,
.item-view .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-image-option > i {
  margin: 2px 0;
}
.item-view .grid-table.digital-decoder-function .digital-decoder-function-template-option,
.item-view .grid-table.listing.digital-decoder-function-images .digital-decoder-function-template-option,
.item-view .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-template-option {
  align-items: center;
  margin: 0 0.25rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  height: calc(2.75rem * var(--scaling-factor));
}
.item-view .grid-table.digital-decoder-function .digital-decoder-function-template-option > i,
.item-view .grid-table.listing.digital-decoder-function-images .digital-decoder-function-template-option > i,
.item-view .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-template-option > i {
  margin: 2px 0;
}
.item-view .grid-table.digital-decoder-function .digital-decoder-function-template-option > .justify-right,
.item-view .grid-table.listing.digital-decoder-function-images .digital-decoder-function-template-option > .justify-right,
.item-view .grid-table.listing.digital-decoder-function-mappings .digital-decoder-function-template-option > .justify-right {
  margin-left: auto;
}
.item-view .grid-table.digital-decoder-function .selectize-input > .digital-decoder-function-template-option > i,
.item-view .grid-table.digital-decoder-function .selectize-input > .digital-decoder-function-image-option > i,
.item-view .grid-table.listing.digital-decoder-function-images .selectize-input > .digital-decoder-function-template-option > i,
.item-view .grid-table.listing.digital-decoder-function-images .selectize-input > .digital-decoder-function-image-option > i,
.item-view .grid-table.listing.digital-decoder-function-mappings .selectize-input > .digital-decoder-function-template-option > i,
.item-view .grid-table.listing.digital-decoder-function-mappings .selectize-input > .digital-decoder-function-image-option > i {
  margin: 0;
}
.item-view .grid-table.digital-decoder-function .selectize-digital-decoder-function-template > .selectize-input input:nth-child(1),
.item-view .grid-table.digital-decoder-function .selectize-digital-decoder-function-image > .selectize-input input:nth-child(1),
.item-view .grid-table.digital-decoder-function .selectize-digital-decoder-function-image.esu > .selectize-input input:nth-child(1),
.item-view .grid-table.listing.digital-decoder-function-images .selectize-digital-decoder-function-template > .selectize-input input:nth-child(1),
.item-view .grid-table.listing.digital-decoder-function-images .selectize-digital-decoder-function-image > .selectize-input input:nth-child(1),
.item-view .grid-table.listing.digital-decoder-function-images .selectize-digital-decoder-function-image.esu > .selectize-input input:nth-child(1),
.item-view .grid-table.listing.digital-decoder-function-mappings .selectize-digital-decoder-function-template > .selectize-input input:nth-child(1),
.item-view .grid-table.listing.digital-decoder-function-mappings .selectize-digital-decoder-function-image > .selectize-input input:nth-child(1),
.item-view .grid-table.listing.digital-decoder-function-mappings .selectize-digital-decoder-function-image.esu > .selectize-input input:nth-child(1) {
  height: calc(2.75rem * var(--scaling-factor));
  margin: 2px 0;
}
.item-view .grid-table.digital-decoder-function .selectize-digital-decoder-function-template > .selectize-input:has(input:nth-child(2)),
.item-view .grid-table.digital-decoder-function .selectize-digital-decoder-function-image > .selectize-input:has(input:nth-child(2)),
.item-view .grid-table.digital-decoder-function .selectize-digital-decoder-function-image.esu > .selectize-input:has(input:nth-child(2)),
.item-view .grid-table.listing.digital-decoder-function-images .selectize-digital-decoder-function-template > .selectize-input:has(input:nth-child(2)),
.item-view .grid-table.listing.digital-decoder-function-images .selectize-digital-decoder-function-image > .selectize-input:has(input:nth-child(2)),
.item-view .grid-table.listing.digital-decoder-function-images .selectize-digital-decoder-function-image.esu > .selectize-input:has(input:nth-child(2)),
.item-view .grid-table.listing.digital-decoder-function-mappings .selectize-digital-decoder-function-template > .selectize-input:has(input:nth-child(2)),
.item-view .grid-table.listing.digital-decoder-function-mappings .selectize-digital-decoder-function-image > .selectize-input:has(input:nth-child(2)),
.item-view .grid-table.listing.digital-decoder-function-mappings .selectize-digital-decoder-function-image.esu > .selectize-input:has(input:nth-child(2)) {
  align-items: center;
}/*# sourceMappingURL=app.css.map */