@charset "UTF-8";
@layer reset, plugins, base, modules, basic, components, pages, static, utilities;
:root {
  --ff-base: 'Roboto', sans-serif;
  --ff-condensed: 'Roboto Condensed', sans-serif;
  --ff-poppins: "Poppins", sans-serif;
  --light-grad-bg: linear-gradient(to bottom,var(--brand-1),var(--brand-0));
  --border: var(--border-width, 1px) solid var(--border-color, var(--gray-2));
  --border-radius: 1rem;
  --grid-item-border-radius: 1rem;
  --hue-blue: 252.56;
  --brand-0: oklch(0.99 .015 var(--hue-blue));
  --brand-1: oklch(0.95 .023 var(--hue-blue));
  --brand-2: oklch(0.87 .054 var(--hue-blue));
  --brand-3: oklch(0.80 .10 var(--hue-blue));
  --brand-4: oklch(0.72 .15 var(--hue-blue));
  --brand-5: oklch(0.64 .16 var(--hue-blue));
  --brand-6: oklch(0.52 .18 var(--hue-blue));
  --brand-7: oklch(0.45 .17 var(--hue-blue));
  --brand-8: oklch(0.35 .15 var(--hue-blue));
  --brand-9: oklch(0.20 .10 var(--hue-blue));
  --brand-10: oklch(0.05 .10 var(--hue-blue));
  --gray-0: oklch(0.99 0.0052 var(--hue-blue));
  --gray-1: oklch(0.94 0.0052 var(--hue-blue));
  --gray-2: oklch(0.91 0.0070 var(--hue-blue));
  --gray-3: oklch(0.87 0.0106 var(--hue-blue));
  --gray-4: oklch(0.77 0.0145 var(--hue-blue));
  --gray-5: oklch(0.64 0.0152 var(--hue-blue));
  --gray-6: oklch(0.43 0.0147 var(--hue-blue));
  --gray-7: oklch(0.35 0.0133 var(--hue-blue));
  --gray-8: oklch(0.26 0.0095 var(--hue-blue));
  --gray-9: oklch(0.21 0.0092 var(--hue-blue));
  --gray-10: oklch(0.11 0.0087 var(--hue-blue));
  --white: #ffffff;
  --primary: var(--brand-6);
  --primary-10: var(--brand-1);
  --primary-25: var(--brand-2);
  --primary-50: var(--brand-3);
  --primary-75: var(--brand-4);
  --primary-light: var(--brand-3);
  --clr-primary: var(--brand-6);
  --clr-primary-link: var(--brand-8);
  --clr-primary-hover: var(--brand-9);
  --accent: hsl(351, 80%, 53%);
  --accent-clr: var(--brand-6);
  accent-color: var(--brand-6);
  --clr-orange: hsl(16, 93%, 31%);
  --clr-orange-500: hsl(16, 93%, 52%);
  --bg-light-orange: hsl(16, 93%, 97%);
  --clr-dark-blue: hsl(207, 25%, 26%);
  --clr-blue: hsl(216, 68%, 31%);
  --clr-blue-500: hsl(215, 79%, 46%);
  --bg-light-blue: hsl(218, 92%, 95%);
  --clr-green: hsl(142, 77%, 22%);
  --clr-green-500: hsl(137, 65%, 34%);
  --bg-light-green: hsl(137, 39%, 93%);
  --clr-yellow: hsl(45, 100%, 45%);
  --clr-yellow-500: hsl(45, 100%, 60%);
  --bg-light-yellow: hsl(45, 100%, 93%);
  --clr-red: hsl(0, 100%, 27%);
  --clr-red-500: hsl(0, 100%, 50%);
  --bg-light-red: hsl(0, 100%, 95%);
  --clr-text-1: hsl(0, 0, 38%);
  --clr-text-2: hsl(0, 0, 28%);
  --clr-text-3: hsl(0, 0, 18%);
  --clr-text-4: hsl(0, 0, 8%);
  --text-1: var(--brand-1);
  --text-2: var(--brand-2);
  --subtitle-ff: var(--ff-condensed);
  --subtitle-size: clamp(1.375rem, 1.225rem + 0.6vi, 1.75rem);
  --subtitle-clr: var(--gray-9);
  --fs-00: 0.625rem;
  --fs-01: .75rem;
  --fs-02: .875rem;
  --fs-03: 1rem;
  --fs-04: 1.125rem;
  --fs-05: 1.25rem;
  --fs-06: 1.5rem;
  --fs-07: 1.875rem;
  --fs-08: 2.25rem;
  --fs-fluid-0: clamp(.75rem, 2vw, 1rem);
  --fs-fluid-1: clamp(1rem, 4vw, 1.125rem);
  --fs-fluid-2: clamp(1.125rem, 6vw, 1.25rem);
  --fs-fluid-3: clamp(1.25rem, 9vw, 1.5rem);
  --primary-btn: var(--brand-6);
  --_highlight: var(--_border, var(--gray-3));
  --_highlight-selected: var(--gray-7);
  --_highlight-size: 0;
  --border-color: var(--gray-4);
  --btn-border-radius: .4rem;
  --base-border-1: 1px solid var(--border-color);
  --base-border-2: 2px solid var(--border-color);
  --inputs-border-color: var(--border-color);
  --_padding-inline: 1.25ch;
  --_padding-block: 5.5px;
  --transition: box-shadow 145ms ease, outline 145ms ease;
  --panel-ease: cubic-bezier(.22, 1, .36, 1);
  --custom-color-picker: transparent;
  --border-radius: 1rem;
  --_form-height: 50px;
  --form-height: 36px;
  --form-width: max-content;
  --form-border-color: var(--gray-4);
  --form-border-width: 2px;
  --form-border-radius: var(--btn-border-radius);
  --form-padding-inline: .4rem;
  --form-padding-block: .2rem;
  --form-font-size: 14px;
  --form-font-weight: 500;
  --form-highlight: var(--gray-3);
  --form-highlight-selected: var(--gray-7);
  --form-highlight-size: 0;
  --form-shadow: 0 0 0 var(--form-highlight-size) var(--form-highlight);
  --header-topline-height: 30px;
  --header-logoline-height: 75px;
  --header-navbar-height: 40px;
  --header-height: calc(var(--header-logoline-height) + var(--header-navbar-height) + var(--header-topline-height));
  --footer-bg-clr: var(--clr-dark-blue);
  --shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  --_shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  --_shadow-2: 0 3px 5px -2px hsl(var(--_shadow-color) / calc(var(--_shadow-strength) + 3%)), 0 7px 14px -5px hsl(var(--_shadow-color) / calc(var(--_shadow-strength) + 5%));
  --shadow-hover: 0 3px 7px 0 #a8a8a8;
  --shadow-btn: var(--_shadow-2), var(--_shadow-depth), 0 0 0 var(--_highlight-size) var(--_highlight);
  --_shadow-color: 220 3% 15%;
  --_shadow-strength: 1%;
  --_shadow-depth: 0 1px var(--gray-3);
  --checkout-bg: linear-gradient(to bottom,var(--bg-light-blue),hsl(217,95%,98%));
  --checkout-border: 2px solid var(--gray-3);
  --bt-outline-focus-site: var(--bg-light-blue);
  --svg-filter: brightness(0) saturate(100%) invert(16%) sepia(84%) saturate(1425%) hue-rotate(198deg) brightness(103%) contrast(91%);
}

@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
  }
  * {
    margin: 0;
    padding: 0;
    font: inherit;
  }
  html {
    scroll-behavior: smooth;
    interpolate-size: allow-keywords;
    color-scheme: light;
    hanging-punctuation: first last;
  }
  body {
    -webkit-font-smoothing: antialiased;
    min-height: 100svh;
  }
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }
  input, button, textarea, select {
    font: inherit;
  }
  p {
    text-wrap: pretty;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
    overflow-wrap: break-word;
  }
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }
}
@layer basic {
  .btn {
    cursor: pointer;
    touch-action: manipulation;
    font-size: var(--_size, 14px);
    background-color: var(--_btn-color, white);
    color: var(--_text, var(--gray-8));
    border: 2px solid var(--_border, var(--gray-3));
    border-radius: var(--btn-border-radius);
    box-shadow: var(--_shadow-2), var(--_shadow-depth), 0 0 0 var(--_highlight-size) var(--_highlight);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: fit-content;
    height: var(--btn-height, fit-content);
    gap: 0.5ch;
    margin: 0;
    padding-block: var(--_padding-block);
    padding-inline: var(--_padding-inline);
    user-select: none;
    transition: box-shadow 250ms ease, outline 250ms ease, background-color 250ms ease;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }
  .btn:hover, .btn:focus, .btn:active {
    --_highlight-size: .25rem;
  }
  .btn[disabled] {
    --_highlight-size: 0;
    cursor: not-allowed;
  }
  .btn-no-hover:hover, .btn-no-hover:focus, .btn-no-hover:active {
    --_highlight-size: 0;
  }
  .btn-no-border {
    border-color: transparent;
    box-shadow: 0 0 0 var(--_highlight-size) var(--_highlight);
  }
  .btn--round {
    border-radius: var(--btn-border-radius);
  }
  .btn-w-height {
    --_padding-block: 0;
  }
  .btn--xs,
  .btn-xs {
    --_padding-block: 2px;
    --_padding-inline: 0.4rem;
    font-size: 0.75rem;
  }
  .btn--sm,
  .btn-sm {
    --_padding-block: 4.25px;
    --_padding-inline: .5rem;
    font-size: 13px;
  }
  .btn--lg,
  .btn-lg {
    --_padding-block: 0.625rem;
    --_padding-inline: 1.25rem;
    font-size: 1rem;
  }
  .btn--xlg,
  .btn-xlg {
    --_padding-block: 0.75rem;
    --_padding-inline: 2rem;
    font-size: 1.125rem;
  }
  .btn--fullwidth,
  .btn-fullwidth {
    width: 100%;
  }
  .btn--outlined {
    _highlight-size: 0;
    box-shadow: 0 0 0 var(--_highlight-size) var(--_highlight);
  }
  .btn--outlined:hover {
    --_highlight-size: .3rem;
  }
  .btn--icon,
  .btn-icon {
    aspect-ratio: 1/1;
    font-size: 1.3rem;
    --_padding-block: 0;
    --_padding-inline: 2px;
    height: fit-content;
  }
  .btn--icon:hover,
  .btn-icon:hover {
    --_highlight-size: .2rem;
  }
  .btn--icon.btn--xs, .btn--icon.btn-xs,
  .btn-icon.btn--xs,
  .btn-icon.btn-xs {
    --_padding-block: 0;
    --_padding-inline: 1px;
    font-size: 1.1rem;
  }
  .btn--icon.btn--sm, .btn--icon.btn-sm,
  .btn-icon.btn--sm,
  .btn-icon.btn-sm {
    --_padding-block: 0;
    --_padding-inline: 2px;
    font-size: 1.2rem;
  }
  .btn--icon.btn--lg, .btn--icon.btn-lg,
  .btn-icon.btn--lg,
  .btn-icon.btn-lg {
    --_padding-block: 0;
    --_padding-inline: 2px;
    font-size: 1.4rem;
  }
  .btn--icon.btn--xlg, .btn--icon.btn-xlg,
  .btn-icon.btn--xlg,
  .btn-icon.btn-xlg {
    --_padding-block: 0;
    --_padding-inline: 2px;
    font-size: 1.5rem;
  }
  .btn--icon.btn--round, .btn--icon.btn-round,
  .btn-icon.btn--round,
  .btn-icon.btn-round {
    border-radius: 999px;
  }
  .btn--primary,
  .btn-primary {
    --_btn-color: var(--primary-btn);
    --_text: white;
    --_border: var(--primary-btn);
    background-color: var(--_btn-color);
    color: var(--_text) !important;
    border-color: var(--_border);
  }
  .btn--primary:hover, .btn--primary:focus, .btn--primary:active,
  .btn-primary:hover,
  .btn-primary:focus,
  .btn-primary:active {
    --_btn-color-hover: hsl(from var(--_btn-color) h s calc(l - 10));
    --_highlight: var(--brand-2);
    --_border: var(--_btn-color-hover);
    background-color: var(--_btn-color-hover);
  }
  .btn--secondary,
  .btn-secondary {
    --_btn-color: var(--bg-light-blue);
    --_text: var(--brand-7);
    --_border: var(--brand-7);
    background-color: var(--_btn-color);
    color: var(--_text) !important;
    border-color: var(--_border);
  }
  .btn--secondary:hover, .btn--secondary:focus, .btn--secondary:active,
  .btn-secondary:hover,
  .btn-secondary:focus,
  .btn-secondary:active {
    --_btn-color-hover: hsl(from var(--_btn-color) h s calc(l + 10));
    --_highlight: hsl(from var(--_btn-color) h s calc(l - 10));
    --_border: var(--_btn-color-hover);
    background-color: var(--_btn-color-hover);
  }
  .btn--gray,
  .btn-gray,
  .btn--default,
  .btn-default {
    --_btn-color: var(--gray-2);
    --_text: var(--gray-8);
    --_border: var(--_btn-color);
    background-color: var(--_btn-color);
    color: var(--_text) !important;
    border-color: var(--_border);
  }
  .btn--gray:hover, .btn--gray:focus, .btn--gray:active,
  .btn-gray:hover,
  .btn-gray:focus,
  .btn-gray:active,
  .btn--default:hover,
  .btn--default:focus,
  .btn--default:active,
  .btn-default:hover,
  .btn-default:focus,
  .btn-default:active {
    --_btn-color-hover: hsl(from var(--_btn-color) h s calc(l + 2));
    --_highlight: hsl(from var(--_btn-color) h s calc(l - 5));
    --_border: var(--_btn-color-hover);
    --_text: var(--gray-9);
    background-color: var(--_btn-color-hover);
  }
  .btn--blue,
  .btn-blue {
    --_btn-color: var(--primary-light);
    --_text: white;
    --_border: var(--_btn-color);
    background-color: var(--_btn-color);
    color: var(--_text) !important;
    border-color: var(--_border);
  }
  .btn--blue:hover, .btn--blue:focus, .btn--blue:active,
  .btn-blue:hover,
  .btn-blue:focus,
  .btn-blue:active {
    --_btn-color-hover: hsl(from var(--_btn-color) h s calc(l - 15));
    --_highlight: hsl(from var(--_btn-color) h s calc(l + 20));
    --_border: var(--_btn-color-hover);
    background-color: var(--_btn-color-hover);
  }
  .btn--dark--blue,
  .btn-dark-blue {
    --_btn-color: var(--clr-dark-blue);
    --_text: white;
    --_border: var(--_btn-color);
    background-color: var(--_btn-color);
    color: var(--_text) !important;
    border-color: var(--_border);
  }
  .btn--dark--blue:hover, .btn--dark--blue:focus, .btn--dark--blue:active,
  .btn-dark-blue:hover,
  .btn-dark-blue:focus,
  .btn-dark-blue:active {
    --_btn-color-hover: hsl(from var(--_btn-color) h s calc(l - 15));
    --_highlight: hsl(from var(--_btn-color) h calc(s + 20) calc(l + 50));
    --_border: var(--_btn-color-hover);
    background-color: var(--_btn-color-hover);
  }
  .btn--red,
  .btn-red {
    --_btn-color: var(--clr-red-500);
    --_text: white;
    --_border: var(--_btn-color);
    background-color: var(--_btn-color);
    color: var(--_text) !important;
    border-color: var(--_border);
  }
  .btn--red:hover, .btn--red:focus, .btn--red:active,
  .btn-red:hover,
  .btn-red:focus,
  .btn-red:active {
    --_btn-color-hover: hsl(from var(--_btn-color) h s calc(l - 15));
    --_highlight: hsl(from var(--_btn-color) h s calc(l + 27));
    --_border: var(--_btn-color-hover);
    background-color: var(--_btn-color-hover);
  }
  .btn--orange,
  .btn-orange {
    --_btn-color: var(--clr-orange-500);
    --_text: white;
    --_border: var(--_btn-color);
    background-color: var(--_btn-color);
    color: var(--_text) !important;
    border-color: var(--_border);
  }
  .btn--orange:hover, .btn--orange:focus, .btn--orange:active,
  .btn-orange:hover,
  .btn-orange:focus,
  .btn-orange:active {
    --_btn-color-hover: hsl(from var(--_btn-color) h s calc(l - 15));
    --_highlight: hsl(from var(--_btn-color) h s calc(l + 27));
    --_border: var(--_btn-color-hover);
    background-color: var(--_btn-color-hover);
  }
  .btn--green,
  .btn-green {
    --_btn-color: var(--clr-green-500);
    --_text: white;
    --_border: var(--_btn-color);
    background-color: var(--_btn-color);
    color: var(--_text) !important;
    border-color: var(--_border);
    height: var(--btn-height);
  }
  .btn--green:hover, .btn--green:focus, .btn--green:active,
  .btn-green:hover,
  .btn-green:focus,
  .btn-green:active {
    --_btn-color-hover: hsl(from var(--_btn-color) h s calc(l - 5));
    --_highlight: hsl(from var(--_btn-color) h calc(s - 50) calc(l + 55));
    --_border: var(--_btn-color-hover);
    background-color: var(--_btn-color-hover);
  }
  .btn--yellow,
  .btn-yellow {
    --_btn-color: var(--clr-yellow-500);
    --_text: var(--gray-8);
    --_border: var(--_btn-color);
    background-color: var(--_btn-color);
    color: var(--_text) !important;
    border-color: var(--_border);
  }
  .btn--yellow:hover, .btn--yellow:focus, .btn--yellow:active,
  .btn-yellow:hover,
  .btn-yellow:focus,
  .btn-yellow:active {
    --_btn-color-hover: hsl(from var(--_btn-color) h s calc(l - 10));
    --_highlight: hsl(from var(--_btn-color) h s calc(l + 25));
    --_border: var(--_btn-color-hover);
    --_text: var(--gray-9);
    background-color: var(--_btn-color-hover);
  }
  ul.row--form li {
    display: block;
    float: left;
    padding: 0 5px 0 0;
  }
  .btn--block {
    display: block;
    width: 100%;
    margin: 1rem 0;
  }
  .btn--primary-eff {
    --_btn-color: var(--primary-btn);
    --_text: white;
    --_border: var(--primary-btn);
    background-color: var(--_btn-color);
    color: var(--_text) !important;
    border-color: var(--_border);
    background: linear-gradient(to left, #0069c0 50%, rgb(0%, 35.7077205882%, 65.2941176471%) 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    box-shadow: 0 0 0 var(--_highlight-size) var(--_highlight);
    transition: all 0.5s ease;
    color: #fff;
  }
  .btn--primary-eff:hover, .btn--primary-eff:focus, .btn--primary-eff:active {
    --_btn-color-hover: hsl(from var(--_btn-color) h s calc(l - 10));
    --_highlight: hsl(from var(--_btn-color) h s calc(l + 50));
    --_border: var(--_btn-color-hover);
    background-color: var(--_btn-color-hover);
    background-position: left bottom;
  }
  .btn--secondary-eff {
    background: linear-gradient(to left, #0069c0 50%, rgb(0%, 35.7077205882%, 65.2941176471%) 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all 0.5s ease;
  }
  .btn--secondary-eff:hover, .btn--secondary-eff:focus, .btn--secondary-eff:active {
    background-position: left bottom;
  }
  :where(button,
  input[type=button],
  input[type=submit],
  input[type=reset],
  input[type=file]),
  :where(input[type=file])::file-selector-button {
    --_accent-light: var(--brand-6);
    --_accent-dark: var(--brand-4);
    --_accent: var(--_accent-light);
    --_text-light: var(--gray-7);
    --_text-dark: var(--gray-1);
    --_text: var(--_text-light);
    --_bg-light: var(--gray-0);
    --_bg-dark: var(--gray-6);
    --_bg: var(--_bg-light);
    --_btn-color: var(--_bg);
    --_input-well-light: var(--gray-3);
    --_input-well-dark: var(--gray-9);
    --_input-well: var(--_input-well-light);
    --_padding-inline: 1.75ch;
    --_padding-block: 5.5px;
    --_border-radius: .5ch;
    --_border-light: var(--gray-3);
    --_border-dark: var(--_bg-dark);
    --_border: var(--_border-light);
    --_highlight-size: 0;
    --_highlight-light: hsl(210 10% 71% / 100%);
    --_highlight-dark: hsl(210 10% 5% / 100%);
    --_highlight: var(--_highlight-light);
    --_ink-shadow-light: 0 1px 0 var(--_border-light);
    --_ink-shadow-dark: 0 1px 0 var(--gray-9);
    --_ink-shadow: var(--_ink-shadow-light);
    --_icon-size: 2ch;
    --_icon-color: var(--_accent);
    --_shadow-color-light: 220 3% 15%;
    --_shadow-color-dark: 220 40% 2%;
    --_shadow-color: var(--_shadow-color-light);
    --_shadow-strength-light: 1%;
    --_shadow-strength-dark: 25%;
    --_shadow-strength: var(--_shadow-strength-light);
    --_shadow-1: 0 1px 2px -1px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 9%));
    --_shadow-2: 0 3px 5px -2px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 3%)), 0 7px 14px -5px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 5%));
    --_shadow-depth-light: 0 1px var(--_border-light);
    --_shadow-depth-dark: 0 1px var(--_bg-dark);
    --_shadow-depth: var(--_shadow-depth-light);
    --_transition: box-shadow 145ms ease, outline-offset 145ms ease;
    cursor: pointer;
    box-shadow: 0 0 0 var(--_highlight-size) var(--_highlight);
    font: inherit;
    letter-spacing: inherit;
    line-height: 1.5;
    border-radius: var(--_border-radius);
    padding: var(--_padding-block) var(--_padding-inline);
    border: 2px solid var(--_border);
    transition: var(--_transition);
  }
  :where(button,
  input[type=button],
  input[type=submit],
  input[type=reset],
  input[type=file]):hover, :where(button,
  input[type=button],
  input[type=submit],
  input[type=reset],
  input[type=file]):focus, :where(button,
  input[type=button],
  input[type=submit],
  input[type=reset],
  input[type=file]):active,
  :where(input[type=file])::file-selector-button:hover,
  :where(input[type=file])::file-selector-button:focus,
  :where(input[type=file])::file-selector-button:active {
    --_highlight-size: .2rem;
    --_highlight: var(--_border);
  }
  /* disabled */
  :where(button,
  input[type=button],
  input[type=submit],
  input[type=reset], div)[disabled] {
    background-color: none;
    color: var(--gray-4);
    cursor: not-allowed;
  }
  body {
    color: var(--gray-9);
    font-family: var(--ff-base);
    font-size: 14px;
    line-height: 1.5;
    background-color: #ffffff;
    position: relative;
  }
  :where(h1, h2, h3, h4, h5, h6) {
    font-family: "Roboto Condensed", sans-serif;
    line-height: 1.1;
    letter-spacing: -0.03125rem;
  }
  .h1-title {
    float: left;
    width: 100%;
    font-size: 22px;
  }
  .h2-title {
    float: left;
    width: 100%;
    font-size: 18px;
  }
  h1 {
    font-size: 22px;
  }
  h2 {
    font-size: 18px;
  }
  h3 {
    font-size: 16px;
  }
  h4 {
    font-size: 14px;
  }
  h5 {
    font-size: 14px;
  }
  h6 {
    font-size: 13px;
  }
  p {
    margin: 0 0 1em 0;
  }
  em {
    font-style: italic;
  }
  b,
  strong {
    font-weight: 500;
  }
  hr {
    border: solid #ddd;
    border-width: 1px 0 0;
    clear: both;
    margin: 10px 0 30px;
    height: 0;
  }
  .static-pages .dialog_content h3 {
    font-size: 24px;
    font-family: "Roboto Condensed", sans-serif;
    color: #0069c0;
    text-transform: uppercase;
  }
  .static-pages h2 {
    font-size: 38px;
  }
  a.growing-link {
    background: linear-gradient(to bottom, oklch(96% 0.02 263deg) 0%, oklch(92% 0.02 263deg) 100%);
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 2px 3px;
    text-decoration: none;
    color: var(--clr-blue);
    transition: background-size 0.35s ease;
  }
  a.growing-link:hover {
    background-size: 4px 50px;
    color: var(--clr-blue-dark);
  }
  .main-wrapper {
    margin: 30px auto;
    width: 370px;
  }
  .bt-form__block .bt-flabels input:-webkit-autofill,
  .bt-form__block .bt-flabels input:-webkit-autofill:hover,
  .bt-form__block .bt-flabels input:-webkit-autofill:focus,
  .bt-form__block .bt-flabels textarea:-webkit-autofill,
  .bt-form__block .bt-flabels textarea:-webkit-autofill:hover,
  .bt-form__block .bt-flabels textarea:-webkit-autofill:focus,
  .bt-form__block .bt-flabels select:-webkit-autofill,
  .bt-form__block .bt-flabels select:-webkit-autofill:hover,
  .bt-form__block .bt-flabels select:-webkit-autofill:focus {
    font-weight: 500;
    font-size: 1rem;
    -webkit-text-fill-color: var(--gray-7);
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
    transition: background-color 5000s ease-in-out 0s;
  }
  .bt-form__block .bt-flabels .bt-form__wrapper {
    display: grid;
  }
  .bt-form__block .bt-flabels .bt-block {
    min-height: 50px;
    padding: 14px 0;
  }
  .bt-form__block .bt-flabels .bt-block-lg {
    padding: 10px 0;
  }
  .bt-form__block .bt-flabels .bt-wrapper-title {
    text-align: center;
    font-size: 22px;
    text-transform: uppercase;
    padding: 10px 0;
  }
  .bt-form__block .bt-flabels .bt-block-title {
    text-align: center;
    font-size: 18px;
    color: #0069c0;
    padding: 0 0 17px 0;
  }
  .bt-form__block .bt-flabels .bt-block-title.w-sub {
    padding: 0;
    margin-top: -4px;
  }
  .bt-form__block .bt-flabels .bt-block-title p {
    padding: 0;
    margin: -5px 0 2px;
  }
  .bt-form__block .bt-flabels .bt-nested-group {
    display: grid;
  }
  .bt-form__block .bt-flabels .bt-nested-group.nested-1-2 {
    grid-template-columns: 3fr 5fr;
  }
  .bt-form__block .bt-flabels .bt-nested-group.nested-1-1 {
    grid-template-columns: 4fr minmax(155px, 3fr);
  }
  .bt-form__block .bt-flabels .bt-nested-group.nested-2-1 {
    grid-template-columns: 2fr minmax(116px, 1fr);
  }
  .bt-form__block .bt-flabels .bt-nested-group.nested-1-2-0 {
    grid-template-columns: 70px 1fr 0.5fr;
  }
  .bt-form__block .bt-flabels .bt-nested-group.nested-1-2-2 {
    grid-template-columns: 80px 1fr 1.4fr;
  }
  .bt-form__block .bt-flabels .bt-nested-group.nested-1-2-2 i.cvvInfoHelp {
    right: 9px;
    top: 15px;
    font-size: 16px;
    color: #cccccc;
    left: inherit;
  }
  .bt-form__block .bt-flabels .bt-flabels__wrapper {
    position: relative;
  }
  .bt-form__block .bt-flabels .bt-flabels__wrapper.bt-textarea {
    border: none;
  }
  .bt-form__block .bt-flabels .bt-form__wrapper > *:not(:first-child).bt-flabels__wrapper,
  .bt-form__block .bt-flabels .bt-form__wrapper > *:not(:first-child) .bt-flabels__wrapper {
    border-top: none;
  }
  .bt-form__block .bt-flabels .bt-flabels__wrapper input[type] {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    border: none;
    border-radius: 0;
    z-index: 1;
    padding: 0px 8px 0px 12px;
    background: #fff;
    appearance: none;
    font-family: "Roboto", sans-serif;
    font-size: 1rem;
    font-weight: 500;
    outline-offset: 0px;
    color: var(--gray-7) !important;
    outline: 2px solid var(--gray-3);
    cursor: auto;
    margin: 0;
    transition: background 1s cubic-bezier(0.215, 0.61, 0.355, 1), outline 1s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .bt-form__block .bt-flabels .bt-flabels__wrapper input[type].with-icon {
    padding-left: 45px;
  }
  .bt-form__block .bt-flabels .bt-flabels__wrapper input[type]:focus {
    box-shadow: none;
    background: var(--gray-1);
  }
  .bt-form__block .bt-flabels .bt-flabels__wrapper input[type]:focus ~ label {
    top: 0;
    left: 45px;
  }
  .bt-form__block .bt-flabels .bt-flabels__wrapper input[type].focused {
    outline-color: var(--brand-6);
    background-color: var(--gray-1);
    z-index: 2;
  }
  .bt-form__block .bt-flabels .bt-flabels__wrapper input[type].active-input {
    font-size: 1rem;
    font-weight: 500;
    color: var(--gray-7) !important;
  }
  .bt-form__block .bt-flabels .bt-flabels__wrapper select {
    display: inline-block;
    width: 100%;
    padding: 0 0 0 14px;
    margin: 0;
    border: 0;
    position: relative;
    background: #fff;
    font-size: 1rem;
    color: #999;
    font-weight: 400;
    height: 50px;
    outline: 2px solid var(--gray-3);
    outline-offset: 0px;
    appearance: none;
    cursor: pointer;
    border-radius: 0;
  }
  .bt-form__block .bt-flabels .bt-flabels__wrapper select.select-active {
    color: #424242;
    font-weight: 500;
  }
  .bt-form__block .bt-flabels .bt-flabels__wrapper select option {
    color: #999;
  }
  .bt-form__block .bt-flabels .bt-flabels__wrapper select option:not(:first-child) {
    color: var(--gray-7);
  }
  .bt-form__block .bt-flabels .bt-flabels__wrapper select#s_country, .bt-form__block .bt-flabels .bt-flabels__wrapper select#b_country {
    color: var(--gray-7);
    font-weight: 500;
  }
  .bt-form__block .bt-flabels .bt-flabels__wrapper select:active, .bt-form__block .bt-flabels .bt-flabels__wrapper select:focus {
    outline: 2px solid var(--gray-3);
    z-index: 10;
  }
  .bt-form__block .bt-flabels .bt-flabels__wrapper select.focused {
    outline: 2px solid var(--brand-6);
    background-color: var(--gray-1);
    z-index: 2;
    height: 50px;
  }
  .bt-form__block .bt-flabels .bt-flabels__wrapper select ~ i {
    pointer-events: none;
    position: absolute;
    top: 15px;
    right: 3px;
    left: auto;
    color: #999;
    z-index: 10;
  }
  .bt-form__block .bt-flabels .bt-flabels__wrapper textarea {
    width: calc(100% - 1px);
    height: auto;
    padding: 15px;
    font-size: 1rem;
    color: var(--gray-7) !important;
    border: none;
    box-sizing: border-box;
    outline: 2px solid var(--gray-3);
  }
  .bt-form__block .bt-flabels .bt-flabels__wrapper textarea:focus {
    box-shadow: none;
    outline: 2px solid var(--brand-6);
  }
  .bt-form__block .bt-flabels .bt-flabels__wrapper textarea:focus::placeholder {
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .bt-form__block .bt-flabels .bt-flabels__wrapper textarea.focused {
    outline-color: var(--brand-6);
    background-color: var(--gray-1);
    z-index: 2;
  }
  .bt-form__block .bt-flabels .bt-flabels__wrapper textarea::placeholder {
    text-overflow: ellipsis;
    font-weight: 400;
    font-size: 15px;
    color: #999;
    opacity: 1;
  }
  .bt-form__block .bt-flabels .bt-flabels__wrapper.bt-flabels__error select {
    background-color: var(--bg-light-red);
    outline: 2px solid var(--clr-red-500);
    z-index: 3;
  }
  .bt-form__block .bt-flabels .bt-flabels__wrapper.bt-flabels__error select:active, .bt-form__block .bt-flabels .bt-flabels__wrapper.bt-flabels__error select:focus {
    outline: 2px solid var(--clr-red-500);
    z-index: 10;
    z-index: 3;
  }
  .bt-form__block .bt-flabels .bt-flabels__wrapper.bt-flabels__error select.focused {
    outline: 2px solid var(--clr-red-500);
    background-color: var(--bg-light-red);
    z-index: 3;
  }
  .bt-form__block .bt-flabels .bt-flabels__error-desc {
    position: absolute;
    top: 40px;
    right: 2px;
    opacity: 0;
    font-weight: 500;
    color: var(--clr-red-500);
    font-size: 10px;
    text-transform: uppercase;
    z-index: 3;
    pointer-events: none;
  }
  .bt-form__block .bt-flabels .bt-flabels__error input[type] {
    outline: 2px solid var(--clr-red-500);
    background-color: var(--bg-light-red);
    z-index: 3;
  }
  .bt-form__block .bt-flabels .bt-flabels__error input[type]:focus {
    outline: 2px solid var(--clr-red-500);
    background-color: var(--bg-light-red);
  }
  .bt-form__block .bt-flabels .bt-flabels__error input[type].focused {
    outline: 2px solid var(--clr-red-500);
    background-color: var(--bg-light-red);
    z-index: 2;
  }
  .bt-form__block .bt-flabels .bt-flabels__error .bt-flabels__error-desc {
    opacity: 1;
    transform: translateY(-40px);
    transition-property: all;
    transition-duration: 0.3s;
  }
  .bt-form__block .bt-flabels .bt-flabels__wrapper i {
    position: absolute;
    left: 10px;
    top: 12px;
    z-index: 5;
    font-size: 18px;
    color: #999;
  }
  .bt-form__block .bt-flabels .icon-valid {
    display: none;
  }
  .bt-form__block .bt-flabels .bt-flabel__float:not(.bt-flabels__error) .icon-valid {
    display: inline;
    color: #5cb85c;
    font-size: 14px;
    top: 14px;
    left: 12px;
  }
  .bt-form__block .bt-flabels .bt-flabel__float:not(.bt-flabels__error) .icon {
    display: none;
  }
  .bt-form__block .bt-flabels .bt-flabels__wrapper input:focus ~ i.icon {
    color: var(--brand-6);
  }
  .bt-form__block .bt-flabels .bt-flabels__wrapper.bt-flabels__error input:focus ~ i.icon {
    color: var(--clr-red-500);
  }
  .bt-form__block .bt-flabels .bt-flabels__wrapper label {
    pointer-events: none;
    position: absolute;
    top: 15px;
    left: 45px;
    opacity: 1;
    z-index: 5;
    font-size: 14px;
    color: #666;
    text-transform: none;
  }
  .bt-form__block .bt-flabels .bt-flabels__wrapper.bt-flabel__float label {
    font-size: 10px;
    top: 0;
    text-transform: uppercase;
  }
  .bt-form__block .bt-flabels .bt-flabels__wrapper.bt-flabel__float label span {
    display: none;
  }
  .bt-form__block .bt-flabels .button-row {
    margin: 15px 0 0;
  }
  .bt-form__block .bt-flabels .plus-more,
  .bt-form__block .bt-flabels .plus-more-s,
  .bt-form__block .bt-flabels .plus-more-b {
    right: 12px;
    position: absolute;
    top: 12px;
    font-size: 20px;
    z-index: 3;
    color: #999;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s all;
  }
  .bt-form__block .bt-flabels .plus-more.open,
  .bt-form__block .bt-flabels .plus-more-s.open,
  .bt-form__block .bt-flabels .plus-more-b.open {
    top: 60px;
  }
  .bt-form__block .bt-flabels .bottom-space {
    margin-bottom: 10px;
  }
  span.field-icon {
    position: absolute;
    right: 13px;
    top: 13px;
    z-index: 100;
    cursor: pointer;
    color: #999999;
  }
  div[data-form=filters-order-list] {
    --form-height: 36px;
    --btn-height: var(--form-height);
    --form-border-color: var(--gray-3);
    --form-border-radius: 999px;
    --btn-border-radius: var(--form-border-radius);
    --form-max-width: 10rem;
  }
  .form-horisontal {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }
  .input-daterange {
    --form-max-width: 95px;
    --form-min-width: 90px;
    display: flex;
    box-shadow: 0 0 0 var(--form-highlight-size) var(--form-highlight);
    border-radius: var(--form-border-radius);
    transition: var(--transition);
  }
  .input-daterange:hover {
    --form-highlight-size: .2rem;
  }
  .input-daterange input {
    --form-highlight-size: 0 !important;
  }
  .input-daterange input:first-child, .input-daterange input[name=start-date] {
    border-radius: var(--form-border-radius) 0 0 var(--form-border-radius) !important;
    border-right-width: 1px;
  }
  .input-daterange input:last-child, .input-daterange input[name=end-date] {
    border-radius: 0 var(--form-border-radius) var(--form-border-radius) 0 !important;
    border-left-width: 1px;
  }
  .input-daterange input:hover, .input-daterange input:focus, .input-daterange input:active {
    --form-highlight-size: 0;
  }
  .float-input {
    --form-max-width: 80%;
    field-sizing: content;
  }
  select, textarea, input:not([type=button],
  [type=reset],
  [type=submit],
  [type=checkbox],
  [type=radio],
  [type=file],
  [type=image],
  [type=hidden]) {
    display: inline-flex;
    align-items: center;
    height: var(--form-height, 32px);
    width: var(--form-width, auto);
    min-width: var(--form-min-width, 4rem);
    max-width: var(--form-max-width, 100%);
    padding-inline: var(--form-padding-inline);
    padding-block: var(--form-padding-block);
    border: 2px solid var(--form-border-color);
    border-radius: var(--form-border-radius, 0.3rem);
    box-shadow: 0 0 0 var(--form-highlight-size) var(--form-highlight);
    background-color: var(--white);
    font: var(--form-font);
    color: var(--gray-7);
    line-height: initial;
    outline: none;
    margin: 0;
    transition: var(--transition);
  }
  select:hover, select:active, textarea:hover, textarea:active, input:not([type=button],
  [type=reset],
  [type=submit],
  [type=checkbox],
  [type=radio],
  [type=file],
  [type=image],
  [type=hidden]):hover, input:not([type=button],
  [type=reset],
  [type=submit],
  [type=checkbox],
  [type=radio],
  [type=file],
  [type=image],
  [type=hidden]):active {
    --form-highlight-size: .2rem;
  }
  select:focus, textarea:focus, input:not([type=button],
  [type=reset],
  [type=submit],
  [type=checkbox],
  [type=radio],
  [type=file],
  [type=image],
  [type=hidden]):focus {
    --form-border-color: var(--gray-5);
  }
  select:disabled, textarea:disabled, input:not([type=button],
  [type=reset],
  [type=submit],
  [type=checkbox],
  [type=radio],
  [type=file],
  [type=image],
  [type=hidden]):disabled {
    --form-highlight: var(--gray-2);
    cursor: not-allowed;
    border: 2px solid var(--gray-2);
    background-color: var(--gray-1);
    color: var(--gray-5);
    font-weight: 400;
  }
  select:disabled:hover, select:disabled:active, select:disabled:focus, textarea:disabled:hover, textarea:disabled:active, textarea:disabled:focus, input:not([type=button],
  [type=reset],
  [type=submit],
  [type=checkbox],
  [type=radio],
  [type=file],
  [type=image],
  [type=hidden]):disabled:hover, input:not([type=button],
  [type=reset],
  [type=submit],
  [type=checkbox],
  [type=radio],
  [type=file],
  [type=image],
  [type=hidden]):disabled:active, input:not([type=button],
  [type=reset],
  [type=submit],
  [type=checkbox],
  [type=radio],
  [type=file],
  [type=image],
  [type=hidden]):disabled:focus {
    --form-highlight-size: 0;
  }
  select[multiple], textarea[multiple], input:not([type=button],
  [type=reset],
  [type=submit],
  [type=checkbox],
  [type=radio],
  [type=file],
  [type=image],
  [type=hidden])[multiple] {
    min-height: fit-content;
  }
  textarea {
    height: var(--textarea-height, auto);
    width: 100%;
  }
  input[type=checkbox] {
    --checkbox-size: 24px;
    position: relative;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    aspect-ratio: 1/1;
    background-color: var(--white);
    border: var(--form-border-width) solid var(--form-border-color);
    border-radius: var(--form-border-radius);
    cursor: pointer;
    appearance: none;
    box-shadow: 0 0 0 var(--form-highlight-size) var(--form-highlight);
    transition: box-shadow 0.25s ease;
  }
  input[type=checkbox]:focus-visible, input[type=checkbox]:hover {
    --form-highlight-size: .2rem;
  }
  input[type=checkbox]:checked {
    --form-border-color: var(--primary);
    background-color: var(--primary);
  }
  input[type=checkbox]:checked::before {
    font-family: "armchem";
    content: "\e872";
    position: absolute;
    inset: 0;
    display: grid;
    align-items: center;
    align-content: center;
    justify-items: center;
    width: calc(var(--checkbox-size) - 2 * var(--form-border-width));
    height: calc(var(--checkbox-size) - 2 * var(--form-border-width));
    font-size: 1rem;
    color: var(--white);
  }
  input[type=radio] {
    --checkbox-size: 20px;
    position: relative;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    aspect-ratio: 1/1;
    border: var(--form-border-width) solid var(--form-border-color);
    border-radius: 99px;
    cursor: pointer;
    appearance: none;
    box-shadow: 0 0 0 var(--form-highlight-size) var(--form-highlight);
    transition: box-shadow 0.3s ease;
  }
  input[type=radio]:focus-visible, input[type=radio]:hover {
    --form-highlight-size: .2rem;
  }
  input[type=radio]:checked {
    border: var(--form-border-width) solid var(--primary);
  }
  input[type=radio]:checked::before {
    position: absolute;
    content: "";
    left: 3px;
    bottom: 3px;
    width: 10px;
    height: 10px;
    border-radius: 99px;
    background-color: var(--primary);
  }
  .form-radio-block {
    display: grid;
    gap: 0.5rem;
  }
  label:has(input[type=radio]) {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }
  input[type=file] {
    --input-file-height: var(--form-height, 36px);
    min-height: var(--input-file-height);
    max-width: 15rem;
    padding: 0;
    margin: 0;
    border: 0;
    cursor: pointer;
    border: var(--form-border-width) solid var(--form-border-color);
    border-radius: var(--form-border-radius);
    box-shadow: 0 0 0 var(--form-highlight-size) var(--form-highlight);
    inline-size: 100%;
    max-inline-size: max-content;
    background-color: var(--gray-1);
    transition: box-shadow 0.25s ease;
  }
  input[type=file]::file-selector-button {
    --file-font-size: .875rem;
    border: 0;
    font-size: var(--file-font-size);
    background-color: var(--white);
    line-height: 1;
    font-weight: 500;
    padding-inline: 1rem;
    border-right: var(--form-border-width) solid var(--gray-2);
    padding-block: calc((var(--input-file-height) - var(--file-font-size) - var(--form-border-width) * 2) / 2);
    box-shadow: none;
  }
  input[type=file]:hover, input[type=file]:focus, input[type=file]:active {
    --form-highlight-size: .2rem;
  }
  .form-group {
    --textarea-height: 5rem;
    display: flex;
    gap: 0.4rem;
    flex-wrap: nowrap;
    align-items: center;
    position: relative;
  }
  .form-group label {
    margin: 0;
    min-width: 100px;
    color: var(--gray-7);
    font-size: 0.875rem;
  }
  .form-float-labels > * {
    --textarea-height: 5rem;
    display: flex;
    gap: 0.4rem;
    flex-wrap: nowrap;
    align-items: center;
    position: relative;
  }
  .form-float-labels > * label {
    position: absolute;
    top: -6px;
    left: 9px;
    padding-inline: 0.25rem;
    margin: 0;
    background-color: var(--white);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1;
    text-transform: none;
    color: var(--gray-5);
    border-radius: var(--form-border-radius);
    min-width: unset;
    z-index: 10;
  }
  .form-float-labels > *:has(input[type=checkbox],
  input[type=radio]) label {
    position: unset;
    font-size: 0.875rem;
    color: var(--gray-7);
  }
  .form-wrapper {
    container: form-wrapper/inline-size;
  }
  .form-wrapper-inner {
    --form-highlight: var(--gray-2);
    display: grid;
    gap: 1rem;
  }
  .form-wrapper-inner .form-group {
    display: grid;
    gap: 0.5cap;
    align-items: start;
    grid-auto-rows: max-content;
  }
  .form-wrapper-inner label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 500;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    margin-bottom: 0;
    color: var(--gray-7);
  }
  .form-wrapper-inner label.fine-print {
    text-transform: none;
  }
  @container form-wrapper (width > 32em) {
    .form-wrapper-inner .form-wrapper-inner {
      grid-template-columns: 1fr 1fr;
    }
  }
  .form-wrapper-inner .form-group input {
    accent-color: var(--clr-blue-500);
  }
  .form-wrapper-inner .form-group input:user-valid {
    border-color: var(--clr-green-500);
  }
  .form-wrapper-inner .form-group input:user-invalid {
    border-color: var(--clr-red-500);
  }
  .form-wrapper-inner input:focus:invalid {
    border-color: var(--clr-blue-500);
  }
  .form-wrapper-inner .form-group:has(.fine-print) {
    grid-column: 1/-1;
    display: flex;
    align-items: center;
    gap: 0.5ch;
  }
  .form-wrapper-inner .form-group.width-100 {
    grid-column: 1/-1;
  }
  .form-wrapper-inner .btn {
    justify-self: start;
  }
  .custom-form {
    position: relative;
    max-width: 100%;
  }
  .custom-form > p {
    margin: 1em 0em;
  }
  .custom-form .form-group {
    clear: both;
    margin: 0em 0em 0.5em;
  }
  .custom-form .form-group:last-child {
    margin-bottom: 0em;
  }
  .custom-form .form-group > label {
    display: inline-block;
    margin: 0;
    color: #757575;
    font-size: 1em;
    text-transform: none;
    vertical-align: middle;
  }
  .custom-form input:not([type]),
  .custom-form input[type=date],
  .custom-form input[type=datetime-local],
  .custom-form input[type=email],
  .custom-form input[type=number],
  .custom-form input[type=password],
  .custom-form input[type=search],
  .custom-form input[type=tel],
  .custom-form input[type=time],
  .custom-form input[type=text],
  .custom-form input[type=file],
  .custom-form input[type=url] {
    font-family: "Roboto", sans-serif;
    display: inline-block;
    margin: 0em;
    outline: none;
    -webkit-appearance: none;
    line-height: 1.21428571em;
    padding: 0.67857143em 1em;
    font-size: 1rem;
    background: #fff;
    border: var(--base-border-1);
    color: var(--gray-9);
    border-radius: var(--btn-border-radius);
    box-shadow: 0em 0em 0em 0em transparent inset;
    -webkit-transition: color 0.1s ease, border-color 0.1s ease;
    transition: color 0.1s ease, border-color 0.1s ease;
  }
  /* Text Area */
  .custom-form textarea {
    display: inline-block;
    margin: 0em;
    -webkit-appearance: none;
    padding: 0.78571429em 1em;
    background: #FFFFFF;
    border: 1px solid var(--gray-4);
    color: #757575;
    outline: none;
    border-radius: 3px;
    box-shadow: 0em 0em 0em 0em transparent inset;
    -webkit-transition: color 0.1s ease, border-color 0.1s ease;
    transition: color 0.1s ease, border-color 0.1s ease;
    font-size: 1em;
    line-height: 1.2857;
    resize: vertical;
  }
  .custom-form textarea:not([rows]) {
    height: 12em;
    min-height: 8em;
    max-height: 24em;
  }
  .custom-form textarea,
  .custom-form input[type=checkbox] {
    vertical-align: top;
  }
  .custom-form input.attached {
    width: auto;
  }
  .custom-form .select-arrow {
    display: inline-block;
    position: relative;
    width: 100%;
  }
  .custom-form .select-arrow:after {
    font-family: "armchem";
    content: "\e827";
    color: #757575;
    right: 0;
    top: 0;
    position: absolute;
    padding: 0.62em 1em;
    pointer-events: none;
  }
  .custom-form .select-arrow.small {
    width: 80px;
  }
  .custom-form .select-arrow.medium {
    width: 200px;
  }
  .custom-form select {
    display: inline-block;
    height: auto;
    width: 100%;
    font-size: 1em;
    background: #FFFFFF;
    border: 1px solid var(--gray-4);
    color: #757575;
    border-radius: var(--btn-border-radius);
    box-shadow: 0em 0em 0em 0em transparent inset;
    padding: 0.62em 1em;
    margin: 0;
    -webkit-transition: color 0.1s ease, border-color 0.1s ease;
    transition: color 0.1s ease, border-color 0.1s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    cursor: pointer;
  }
  select::-ms-expand {
    display: none;
  }
  .custom--select {
    font-size: 1em;
    position: relative;
    overflow: hidden;
    width: 100%;
    transition: background-color 0.3s;
    max-width: 280px;
    height: 30px;
    color: #424242;
    background: #fff;
    border: 1px solid var(--gray-4);
    border-radius: 3px;
  }
  .custom--select:hover {
    border: 1px solid var(--gray-4);
    border-radius: 3px;
  }
  .custom--select select {
    padding: 0 35px 0 10px;
    margin: 0;
    width: 100%;
    height: 100%;
    color: #757575;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
    background-image: none;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
  }
  select::-ms-expand {
    display: none;
  }
  .custom--select:after {
    font-family: "armchem";
    content: "\e827";
    color: #757575;
    display: block;
    line-height: 38px;
    right: 0;
    top: 0;
    width: 28px;
    position: absolute;
    pointer-events: none;
    text-align: center;
  }
  .select--lg {
    height: 40px;
    background-color: #fff;
  }
  .select--md {
    font-size: 14px;
    min-width: 125px;
    width: 125px;
    height: 30px;
  }
  .select--md:after {
    line-height: 28px;
  }
  .select--sm:after {
    background-color: #eee;
    color: red;
  }
  .select--sm {
    max-width: 70px;
    height: 38px;
    background-color: #fff;
  }
  .is-ie8 .custom-select:after, .is-ie9 .custom-select:after {
    display: none;
  }
  .custom-select select:focus {
    outline: none;
  }
  .is-ie8 .custom-select select, .is-ie9 .custom-select select {
    padding: 0 0 0 9px;
  }
  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .custom-select select::-ms-expand {
      display: none;
    }
    .custom-select select:focus::-ms-value {
      background: transparent;
      color: #222;
    }
  }
  .custom-select select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
  }
  @-moz-document url-prefix() {
    .custom-select select {
      width: 120%;
      width: calc(100% + 43px);
      padding: 0 64px 0 5px;
    }
  }
  .row--form input[type=text] {
    height: 38px;
    width: 280px;
    padding: 0 9px;
    border-radius: 0px;
    border: solid 1px #ccc;
    transition: box-shadow 0.3s, border 0.3s;
  }
  .row--form input[type=text]:focus,
  .row--form input[type=text].focus {
    border: solid 1px #757575;
    box-shadow: 0 0 5px 1px #999999;
  }
  .row--form select:focus,
  .row--form select.focus {
    border: solid 1px #757575;
    box-shadow: 0 0 5px 1px #999999;
  }
  form.search-bar {
    position: relative;
  }
  form.search-bar input[type=text] {
    appearance: none;
    transition: border-color;
    border-radius: 4px;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    border: 2px solid #dcdcdc;
    border-right: 0px;
    background-color: white;
    display: block;
    font-size: 14px;
    line-height: 21px;
    margin: 0;
    width: 90%;
  }
  form.search-bar button[type=submit] {
    display: block;
    border-radius: 4px;
    border-left: 0 none;
    height: 41px;
    text-decoration: none;
    background-clip: padding-box;
    position: absolute;
    inset: 0;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    outline: none;
    top: -1px;
    right: 0px;
    bottom: 0px;
    outline: none;
    font-size: 16px;
  }
  .radio-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
  }
  .radio-wrapper ul.radio-block li {
    border-bottom: none;
    padding: 5px 0;
  }
  .radio-wrapper input[type=radio] {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px !important;
    overflow: hidden;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
  }
  .radio-wrapper label {
    color: #999;
    display: inline-flex;
    align-items: center;
  }
  .radio-wrapper label::before {
    content: "";
    display: block;
    height: 1.25em;
    width: 1.25em;
    border: solid 1px #ccc;
    border-radius: 50%;
    margin-right: 0.5em;
    transition: border ease-in 150ms, box-shadow ease-in 150ms;
  }
  .radio-wrapper input[type=radio]:checked + label,
  .radio-wrapper input[type=radio]:focus + label {
    color: #0069c0;
  }
  .radio-wrapper input[type=radio]:checked + label::before {
    background: radial-gradient(0.75em circle at center, currentColor 50%, transparent 55%);
    box-shadow: 0 0 1em 0 rgba(10, 150, 255, 0.75);
    border-color: currentColor;
  }
  .radio-wrapper input[type=radio]:focus + label::before {
    box-shadow: 0 0 1em 0 rgba(10, 150, 255, 0.75);
    border-color: currentColor;
  }
  .form-group {
    --textarea-height: 5rem;
    display: flex;
    gap: 0.4rem;
    flex-wrap: nowrap;
    align-items: center;
    position: relative;
  }
  .form-group label {
    margin: 0;
    min-width: 100px;
    color: var(--gray-7);
    font-size: 0.875rem;
  }
  .form-float-labels > * {
    --textarea-height: 5rem;
    display: flex;
    gap: 0.4rem;
    flex-wrap: nowrap;
    align-items: center;
    position: relative;
  }
  .form-float-labels > * label {
    position: absolute;
    top: -6px;
    left: 9px;
    padding-inline: 0.25rem;
    margin: 0;
    background-color: var(--white);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1;
    text-transform: none;
    color: var(--gray-5);
    border-radius: var(--form-border-radius);
    min-width: unset;
    z-index: 10;
  }
  .form-float-labels > *:has(input[type=checkbox],
  input[type=radio]) label {
    position: unset;
    font-size: 0.875rem;
    color: var(--gray-7);
  }
  @media print {
    body {
      background: #fff;
      color: #000;
      font-size: 8pt;
      line-height: 150%;
      margin: 0px;
    }
    hr {
      color: #ccc;
      background-color: #ccc;
    }
    h1, h2, h3, h4, h5, h6, code, pre {
      color: #000;
      text-transform: none; /* because sometimes I set all-caps */
    }
    h1 {
      font-size: 11pt;
      margin-top: 1em;
    }
    h2 {
      font-size: 10pt;
    }
    h3 {
      font-size: 9pt;
    }
    h4, h5, h6 {
      font-size: 8pt;
    }
    code, pre {
      font-size: 8pt;
      background-color: transparent;
      /* just in case the user configured browser to print backgrounds */
    }
    blockquote {
      background-image: none;
      /* though they may not print, I’d rather be sure */
    }
    a:link, a:visited {
      text-decoration: underline;
      color: #000;
    }
    table {
      page-break-inside: auto;
    }
    tr {
      page-break-inside: auto;
    }
    table, th, td {
      border-collapse: collapse;
      width: 100%;
    }
    table td, th td, td td {
      border: 1px solid #cccccc;
    }
  }
  [class^=icon-multi-] {
    display: inline-block;
    white-space: nowrap;
    position: relative;
    height: 1.3em;
    width: 1.3em;
    text-align: center;
    vertical-align: top;
    text-indent: -9999px;
  }
  [class^=icon-multi-]:before,
  [class^=icon-multi-]:after,
  [class^=icon-multi-] span:before,
  [class^=icon-multi-] span:after {
    display: block;
    position: absolute;
    white-space: normal;
    top: 0;
    left: 0.143em;
    text-indent: 0;
    font-size: 1em;
    font-family: "armchem";
    font-weight: 400 !important;
    font-style: normal !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    speak: none;
  }
  .icon-multi-hd:before {
    content: "\e89e";
    color: #006abd;
  }
  .icon-multi-hd:after {
    content: "\e89f";
    color: #fa460b;
  }
  .icon-multi-sp:before {
    content: "\e8a0";
    color: #1c8b4d;
  }
  .icon-multi-sp:after {
    content: "\e8a1";
    color: #8f1888;
  }
  .icon-multi-tc:before {
    content: "\e8a3";
    color: #fa6426;
    margin-left: 0.12em;
  }
  .icon-multi-tc:after {
    content: "\e8a4";
    color: #333;
    margin-left: 0.12em;
  }
  table {
    border-collapse: collapse;
  }
  th {
    border-bottom: 1px solid var(--gray-3);
    background-color: var(--gray-2);
    color: var(--gray-9);
    font-weight: 500;
    padding: 5px;
    text-align: left;
  }
  td {
    padding: 3px 5px;
  }
  tr,
  td,
  th {
    vertical-align: middle;
  }
  .table-bordered {
    --table-border: 1px solid var(--gray-2);
    border-collapse: separate;
    border-left: 0px;
    border-spacing: 0;
    border: var(--table-border);
    width: 100%;
    background-color: #fff;
  }
  .table-bordered td {
    border-bottom: 0px;
    border-left: var(--table-border);
    border-top: var(--table-border);
    padding: 5px;
  }
  .table-bordered td:first-child {
    border-left: none;
  }
  .table-bordered tr:hover > td,
  .table-bordered tr:hover > th {
    background-color: var(--gray-1);
  }
}
/*
 * Armchem font version (increase by 1 when changing font file)
 */
@font-face {
  font-family: "armchem";
  src: url("fonts/armchem/font/armchem.eot?23782970");
  src: url("fonts/armchem/font/armchem.eot?23782970#iefix") format("embedded-opentype"), url("fonts/armchem/font/armchem.woff2?23782970") format("woff2"), url("fonts/armchem/font/armchem.woff?23782970") format("woff"), url("fonts/armchem/font/armchem.ttf?23782970") format("truetype"), url("fonts/armchem/font/armchem.svg?23782970#armchem") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'armchem';
    src: url('../font/armchem.svg' + $armchem-font-suffix + '#armchem') format('svg');
  }
}
*/
[class^=arm-]:before, [class*=" arm-"]:before {
  font-family: "armchem";
  font-style: normal;
  font-weight: normal;
  speak: never;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: 0.2em;
  text-align: center;
  /* opacity: .8; */
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: 0.2em;
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.arm-menu:before {
  content: "\e800";
} /* '' */
.arm-print:before {
  content: "\e801";
} /* '' */
.arm-cart-1:before {
  content: "\e802";
} /* '' */
.arm-gplus:before {
  content: "\e803";
} /* '' */
.arm-wordpress:before {
  content: "\e804";
} /* '' */
.arm-youtube:before {
  content: "\e805";
} /* '' */
.arm-pinterest-circled:before {
  content: "\e806";
} /* '' */
.arm-tumblr:before {
  content: "\e807";
} /* '' */
.arm-twitter:before {
  content: "\e808";
} /* '' */
.arm-left-dir:before {
  content: "\e809";
} /* '' */
.arm-right-dir:before {
  content: "\e80a";
} /* '' */
.arm-chat:before {
  content: "\e80b";
} /* '' */
.arm-right-open-big:before {
  content: "\e80c";
} /* '' */
.arm-left-open-big:before {
  content: "\e80d";
} /* '' */
.arm-down-open-big:before {
  content: "\e80e";
} /* '' */
.arm-up-open-big:before {
  content: "\e80f";
} /* '' */
.arm-home:before {
  content: "\e810";
} /* '' */
.arm-search-1:before {
  content: "\e811";
} /* '' */
.arm-lock:before {
  content: "\e812";
} /* '' */
.arm-twitter-1:before {
  content: "\e813";
} /* '' */
.arm-mastercard:before {
  content: "\e814";
} /* '' */
.arm-visa:before {
  content: "\e815";
} /* '' */
.arm-amex:before {
  content: "\e816";
} /* '' */
.arm-ok:before {
  content: "\e817";
} /* '' */
.arm-ok-circle:before {
  content: "\e818";
} /* '' */
.arm-plus-circle:before {
  content: "\e819";
} /* '' */
.arm-minus-circle:before {
  content: "\e81a";
} /* '' */
.arm-facebook:before {
  content: "\e81b";
} /* '' */
.arm-instagram:before {
  content: "\e81c";
} /* '' */
.arm-phone:before {
  content: "\e81d";
} /* '' */
.arm-align-left:before {
  content: "\e81e";
} /* '' */
.arm-align-center:before {
  content: "\e81f";
} /* '' */
.arm-align-right:before {
  content: "\e820";
} /* '' */
.arm-text-width:before {
  content: "\e821";
} /* '' */
.arm-text-height:before {
  content: "\e822";
} /* '' */
.arm-vip:before {
  content: "\e823";
} /* '' */
.arm-font:before {
  content: "\e824";
} /* '' */
.arm-cancel-circled:before {
  content: "\e825";
} /* '' */
.arm-cancel-squared:before {
  content: "\e826";
} /* '' */
.arm-down-open-1:before {
  content: "\e827";
} /* '' */
.arm-left-open-1:before {
  content: "\e828";
} /* '' */
.arm-right-open-1:before {
  content: "\e829";
} /* '' */
.arm-up-open-1:before {
  content: "\e82a";
} /* '' */
.arm-chat-empty:before {
  content: "\e82b";
} /* '' */
.arm-linkedin:before {
  content: "\e82c";
} /* '' */
.arm-attach:before {
  content: "\e82d";
} /* '' */
.arm-tag:before {
  content: "\e82e";
} /* '' */
.arm-tags:before {
  content: "\e82f";
} /* '' */
.arm-tag-1:before {
  content: "\e830";
} /* '' */
.arm-help:before {
  content: "\e831";
} /* '' */
.arm-left:before {
  content: "\e832";
} /* '' */
.arm-right:before {
  content: "\e833";
} /* '' */
.arm-plus-squared-alt:before {
  content: "\e834";
} /* '' */
.arm-minus-squared-alt:before {
  content: "\e835";
} /* '' */
.arm-cart:before {
  content: "\e836";
} /* '' */
.arm-trash-empty:before {
  content: "\e837";
} /* '' */
.arm-edit:before {
  content: "\e838";
} /* '' */
.arm-plus:before {
  content: "\e839";
} /* '' */
.arm-minus:before {
  content: "\e83a";
} /* '' */
.arm-discover:before {
  content: "\e83b";
} /* '' */
.arm-zoom-in:before {
  content: "\e83c";
} /* '' */
.arm-zoom-out:before {
  content: "\e83d";
} /* '' */
.arm-arrows-cw-1:before {
  content: "\e83e";
} /* '' */
.arm-paypal:before {
  content: "\e83f";
} /* '' */
.arm-user:before {
  content: "\e840";
} /* '' */
.arm-search:before {
  content: "\e841";
} /* '' */
.arm-heart:before {
  content: "\e842";
} /* '' */
.arm-help-2:before {
  content: "\e843";
} /* '' */
.arm-heart-empty:before {
  content: "\e844";
} /* '' */
.arm-down-dir:before {
  content: "\e845";
} /* '' */
.arm-up-dir:before {
  content: "\e846";
} /* '' */
.arm-attention:before {
  content: "\e847";
} /* '' */
.arm-at:before {
  content: "\e848";
} /* '' */
.arm-cancel:before {
  content: "\e849";
} /* '' */
.arm-cancel-circle:before {
  content: "\e84a";
} /* '' */
.arm-calendar:before {
  content: "\e84b";
} /* '' */
.arm-videocam:before {
  content: "\e84c";
} /* '' */
.arm-folder-open:before {
  content: "\e84d";
} /* '' */
.arm-volume-up:before {
  content: "\e84e";
} /* '' */
.arm-monitor:before {
  content: "\e84f";
} /* '' */
.arm-mobile:before {
  content: "\e850";
} /* '' */
.arm-globe:before {
  content: "\e851";
} /* '' */
.arm-star:before {
  content: "\e852";
} /* '' */
.arm-star-empty:before {
  content: "\e853";
} /* '' */
.arm-cogs:before {
  content: "\e854";
} /* '' */
.arm-wrench:before {
  content: "\e855";
} /* '' */
.arm-credit-card:before {
  content: "\e856";
} /* '' */
.arm-commerical-building:before {
  content: "\e857";
} /* '' */
.arm-town-hall:before {
  content: "\e858";
} /* '' */
.arm-city:before {
  content: "\e859";
} /* '' */
.arm-company:before {
  content: "\e85a";
} /* '' */
.arm-street:before {
  content: "\e85b";
} /* '' */
.arm-zipcode:before {
  content: "\e85c";
} /* '' */
.arm-floppy:before {
  content: "\e85d";
} /* '' */
.arm-truck:before {
  content: "\e85e";
} /* '' */
.arm-back:before {
  content: "\e85f";
} /* '' */
.arm-logout:before {
  content: "\e860";
} /* '' */
.arm-thumbs-up:before {
  content: "\e861";
} /* '' */
.arm-thumbs-down:before {
  content: "\e862";
} /* '' */
.arm-users:before {
  content: "\e863";
} /* '' */
.arm-user-add:before {
  content: "\e864";
} /* '' */
.arm-check:before {
  content: "\e865";
} /* '' */
.arm-cancel-1:before {
  content: "\e866";
} /* '' */
.arm-help-3:before {
  content: "\e867";
} /* '' */
.arm-help-circled:before {
  content: "\e868";
} /* '' */
.arm-info:before {
  content: "\e869";
} /* '' */
.arm-attach-1:before {
  content: "\e86a";
} /* '' */
.arm-arrows-ccw:before {
  content: "\e86b";
} /* '' */
.arm-cw:before {
  content: "\e86c";
} /* '' */
.arm-ccw:before {
  content: "\e86d";
} /* '' */
.arm-print-1:before {
  content: "\e86e";
} /* '' */
.arm-mail:before {
  content: "\e86f";
} /* '' */
.arm-home-1:before {
  content: "\e870";
} /* '' */
.arm-cancel-2:before {
  content: "\e871";
} /* '' */
.arm-ok-1:before {
  content: "\e872";
} /* '' */
.arm-down-fat:before {
  content: "\e873";
} /* '' */
.arm-left-fat:before {
  content: "\e874";
} /* '' */
.arm-right-fat:before {
  content: "\e875";
} /* '' */
.arm-up-fat:before {
  content: "\e876";
} /* '' */
.arm-download-alt:before {
  content: "\e877";
} /* '' */
.arm-trash:before {
  content: "\e878";
} /* '' */
.arm-comment:before {
  content: "\e879";
} /* '' */
.arm-logout-1:before {
  content: "\e87a";
} /* '' */
.arm-tc:before {
  content: "\e87b";
} /* '' */
.arm-hd:before {
  content: "\e87c";
} /* '' */
.arm-afl-old:before {
  content: "\e87d";
} /* '' */
.arm-download-1:before {
  content: "\e87e";
} /* '' */
.arm-upload-1:before {
  content: "\e87f";
} /* '' */
.arm-split:before {
  content: "\e880";
} /* '' */
.arm-ebay:before {
  content: "\e881";
} /* '' */
.arm-amazon-1:before {
  content: "\e882";
} /* '' */
.arm-chart-bar:before {
  content: "\e883";
} /* '' */
.arm-website:before {
  content: "\e884";
} /* '' */
.arm-th-list-1:before {
  content: "\e885";
} /* '' */
.arm-cart-2:before {
  content: "\e886";
} /* '' */
.arm-ups:before {
  content: "\e887";
} /* '' */
.arm-warehouse:before {
  content: "\e888";
} /* '' */
.arm-quote:before {
  content: "\e889";
} /* '' */
.arm-edit-alt:before {
  content: "\e88a";
} /* '' */
.arm-notes:before {
  content: "\e88b";
} /* '' */
.arm-note:before {
  content: "\e88c";
} /* '' */
.arm-qb:before {
  content: "\e88d";
} /* '' */
.arm-stencil:before {
  content: "\e88e";
} /* '' */
.arm-po:before {
  content: "\e88f";
} /* '' */
.arm-hc:before {
  content: "\e890";
} /* '' */
.arm-vfl:before {
  content: "\e891";
} /* '' */
.arm-comment-alt:before {
  content: "\e892";
} /* '' */
.arm-comment-1:before {
  content: "\e893";
} /* '' */
.arm-user-1:before {
  content: "\e894";
} /* '' */
.arm-sp:before {
  content: "\e895";
} /* '' */
.arm-plus-1:before {
  content: "\e896";
} /* '' */
.arm-info-1:before {
  content: "\e897";
} /* '' */
.arm-question:before {
  content: "\e898";
} /* '' */
.arm-youtube-1:before {
  content: "\e899";
} /* '' */
.arm-cog:before {
  content: "\e89a";
} /* '' */
.arm-arrows-cw:before {
  content: "\e89b";
} /* '' */
.arm-linkedin-1:before {
  content: "\e89c";
} /* '' */
.arm-credit-card-1:before {
  content: "\e89d";
} /* '' */
.arm-hd-multi-h:before {
  content: "\e89e";
} /* '' */
.arm-hd-multi-d:before {
  content: "\e89f";
} /* '' */
.arm-sp-multi-t:before {
  content: "\e8a0";
} /* '' */
.arm-sp-multi-b:before {
  content: "\e8a1";
} /* '' */
.arm-tc-1:before {
  content: "\e8a2";
} /* '' */
.arm-tc-t:before {
  content: "\e8a3";
} /* '' */
.arm-tc-b:before {
  content: "\e8a4";
} /* '' */
.arm-fontsize:before {
  content: "\e8a5";
} /* '' */
.arm-bold:before {
  content: "\e8a6";
} /* '' */
.arm-italic:before {
  content: "\e8a7";
} /* '' */
.arm-align-bottom:before {
  content: "\e8a8";
} /* '' */
.arm-align-top:before {
  content: "\e8a9";
} /* '' */
.arm-stumbleupon:before {
  content: "\e8aa";
} /* '' */
.arm-uppercase:before {
  content: "\e8ab";
} /* '' */
.arm-lowercase:before {
  content: "\e8ac";
} /* '' */
.arm-vertical-center:before {
  content: "\e8ad";
} /* '' */
.arm-valet:before {
  content: "\e8ae";
} /* '' */
.arm-blog:before {
  content: "\e8af";
} /* '' */
.arm-email:before {
  content: "\e8b0";
} /* '' */
.arm-help-1:before {
  content: "\e8b1";
} /* '' */
.arm-th-thumb:before {
  content: "\e8b2";
} /* '' */
.arm-plus-squared:before {
  content: "\e8b3";
} /* '' */
.arm-minus-squared:before {
  content: "\e8b4";
} /* '' */
.arm-valet-1:before {
  content: "\e8b5";
} /* '' */
.arm-picture:before {
  content: "\e8b6";
} /* '' */
.arm-upload-cloud-1:before {
  content: "\e8b7";
} /* '' */
.arm-tools:before {
  content: "\e8b8";
} /* '' */
.arm-down:before {
  content: "\e8b9";
} /* '' */
.arm-left-1:before {
  content: "\e8ba";
} /* '' */
.arm-right-1:before {
  content: "\e8bb";
} /* '' */
.arm-up:before {
  content: "\e8bc";
} /* '' */
.arm-resize-full:before {
  content: "\e8bd";
} /* '' */
.arm-resize-full-circle:before {
  content: "\e8be";
} /* '' */
.arm-pin:before {
  content: "\e8bf";
} /* '' */
.arm-pin-outline:before {
  content: "\e8c0";
} /* '' */
.arm-oes-logo-d:before {
  content: "\e8c1";
} /* '' */
.arm-oes-logo-l:before {
  content: "\e8c2";
} /* '' */
.arm-hd-multi-in:before {
  content: "\e8c3";
} /* '' */
.arm-hd-multi-out:before {
  content: "\e8c4";
} /* '' */
.arm-afl:before {
  content: "\e8c5";
} /* '' */
.arm-info-circled:before {
  content: "\e8c6";
} /* '' */
.arm-phone-1:before {
  content: "\e8c7";
} /* '' */
.arm-comment-alt-1:before {
  content: "\e8c8";
} /* '' */
.arm-arrows-cw-2:before {
  content: "\e8c9";
} /* '' */
.arm-comment-3:before {
  content: "\e8ca";
} /* '' */
.arm-chat-2:before {
  content: "\e8cb";
} /* '' */
.arm-chat-3:before {
  content: "\e8cc";
} /* '' */
.arm-play:before {
  content: "\e8cd";
} /* '' */
.arm-play-circled:before {
  content: "\e8ce";
} /* '' */
.arm-play-circled2:before {
  content: "\e8cf";
} /* '' */
.arm-backward:before {
  content: "\e8d0";
} /* '' */
.arm-forward:before {
  content: "\e8d1";
} /* '' */
.arm-play-1:before {
  content: "\e8d2";
} /* '' */
.arm-play-circle2:before {
  content: "\e8d3";
} /* '' */
.arm-eye:before {
  content: "\e8d4";
} /* '' */
.arm-eye-off:before {
  content: "\e8d5";
} /* '' */
.arm-floppy-1:before {
  content: "\e8d6";
} /* '' */
.arm-attach-2:before {
  content: "\e8d7";
} /* '' */
.arm-down-open-2:before {
  content: "\e8d8";
} /* '' */
.arm-left-open-2:before {
  content: "\e8d9";
} /* '' */
.arm-right-open-2:before {
  content: "\e8da";
} /* '' */
.arm-up-open-2:before {
  content: "\e8db";
} /* '' */
.arm-traffic-cone:before {
  content: "\e8dc";
} /* '' */
.arm-down-open:before {
  content: "\f004";
} /* '' */
.arm-up-open:before {
  content: "\f005";
} /* '' */
.arm-right-open:before {
  content: "\f006";
} /* '' */
.arm-left-open:before {
  content: "\f007";
} /* '' */
.arm-th-list:before {
  content: "\f009";
} /* '' */
.arm-upload-cloud:before {
  content: "\f014";
} /* '' */
.arm-globe-1:before {
  content: "\f018";
} /* '' */
.arm-star-half-1:before {
  content: "\f022";
} /* '' */
.arm-star-half_empty:before {
  content: "\f024";
} /* '' */
.arm-ccw-1:before {
  content: "\f025";
} /* '' */
.arm-download:before {
  content: "\f02e";
} /* '' */
.arm-upload:before {
  content: "\f02f";
} /* '' */
.arm-videocam-1:before {
  content: "\f03a";
} /* '' */
.arm-chat-1:before {
  content: "\f03d";
} /* '' */
.arm-user-2:before {
  content: "\f061";
} /* '' */
.arm-users-1:before {
  content: "\f064";
} /* '' */
.arm-info-circled-1:before {
  content: "\f085";
} /* '' */
.arm-info-circled-alt:before {
  content: "\f086";
} /* '' */
.arm-docs:before {
  content: "\f0c5";
} /* '' */
.arm-comment-empty:before {
  content: "\f0e5";
} /* '' */
.arm-sitemap:before {
  content: "\f0e8";
} /* '' */
.arm-download-cloud:before {
  content: "\f0ed";
} /* '' */
.arm-upload-cloud-2:before {
  content: "\f0ee";
} /* '' */
.arm-angle-double-up:before {
  content: "\f102";
} /* '' */
.arm-angle-double-down:before {
  content: "\f103";
} /* '' */
.arm-quote-left:before {
  content: "\f10d";
} /* '' */
.arm-quote-right:before {
  content: "\f10e";
} /* '' */
.arm-circle:before {
  content: "\f111";
} /* '' */
.arm-folder-open-empty:before {
  content: "\f115";
} /* '' */
.arm-calendar-empty:before {
  content: "\f133";
} /* '' */
.arm-lock-open-alt:before {
  content: "\f13e";
} /* '' */
.arm-dollar:before {
  content: "\f155";
} /* '' */
.arm-sort-alt-up:before {
  content: "\f160";
} /* '' */
.arm-sort-alt-down:before {
  content: "\f161";
} /* '' */
.arm-dropbox:before {
  content: "\f16b";
} /* '' */
.arm-wheelchair:before {
  content: "\f193";
} /* '' */
.arm-bank:before {
  content: "\f19c";
} /* '' */
.arm-file-pdf:before {
  content: "\f1c1";
} /* '' */
.arm-file-word:before {
  content: "\f1c2";
} /* '' */
.arm-file-excel:before {
  content: "\f1c3";
} /* '' */
.arm-file-image:before {
  content: "\f1c5";
} /* '' */
.arm-file-audio:before {
  content: "\f1c7";
} /* '' */
.arm-file-video:before {
  content: "\f1c8";
} /* '' */
.arm-wechat:before {
  content: "\f1d7";
} /* '' */
.arm-history:before {
  content: "\f1da";
} /* '' */
.arm-circle-thin:before {
  content: "\f1db";
} /* '' */
.arm-calc:before {
  content: "\f1ec";
} /* '' */
.arm-cc-visa:before {
  content: "\f1f0";
} /* '' */
.arm-cc-mastercard:before {
  content: "\f1f1";
} /* '' */
.arm-cc-discover:before {
  content: "\f1f2";
} /* '' */
.arm-cc-amex:before {
  content: "\f1f3";
} /* '' */
.arm-cc-paypal:before {
  content: "\f1f4";
} /* '' */
.arm-cc-stripe:before {
  content: "\f1f5";
} /* '' */
.arm-hourglass-o:before {
  content: "\f250";
} /* '' */
.arm-hourglass-1:before {
  content: "\f251";
} /* '' */
.arm-hourglass-2:before {
  content: "\f252";
} /* '' */
.arm-hourglass-3:before {
  content: "\f253";
} /* '' */
.arm-hourglass:before {
  content: "\f254";
} /* '' */
.arm-amazon:before {
  content: "\f270";
} /* '' */
.arm-map-signs:before {
  content: "\f277";
} /* '' */
.arm-commenting:before {
  content: "\f27a";
} /* '' */
.arm-address-book:before {
  content: "\f2b9";
} /* '' */
.arm-quora:before {
  content: "\f2c4";
} /* '' */
.arm-comment-2:before {
  content: "\f4ac";
} /* '' */
@layer admin-common {
  a {
    color: var(--gray-8);
    text-decoration: none;
  }
  a:active, a:focus, a:hover {
    color: var(--brand-7);
  }
  a.brand-link {
    color: var(--brand-6);
    text-decoration: underline;
  }
  a.brand-link:active, a.brand-link:focus, a.brand-link:hover {
    color: var(--brand-8);
    text-decoration: none;
  }
  strong, b {
    font-weight: 500;
  }
  :where(h1, h2, h3, h4, h5, h6) {
    font-family: var(--ff-base);
    line-height: 1.1;
    letter-spacing: -0.03125rem;
  }
  h1 {
    font-size: 30px;
  }
  h2 {
    font-size: 26px;
  }
  h3 {
    font-size: 22px;
  }
  h4 {
    font-size: 20px;
  }
  h5 {
    font-size: 16px;
  }
  h6 {
    font-size: 14px;
  }
  .admin-header {
    --_form-height: 32px;
    width: 100%;
    min-height: 40px;
    background-color: var(--brand-7);
    border: none;
  }
  .admin-header-row {
    margin: 0 auto;
    max-width: 1400px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 100px;
    align-items: center;
    height: 40px;
  }
  .admin-header-links {
    display: flex;
    gap: 0.5rem;
  }
  input[name=search_order_id] {
    --form-height: 32px;
    border-color: #fff;
  }
  .admin-logout {
    justify-items: end;
  }
  .admin-logout i {
    font-size: 18px;
    line-height: 1;
  }
  .admin-order-search form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }
  .page-content {
    margin: 0 auto;
    max-width: 1400px;
    width: 100%;
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 1rem;
  }
  .page-content a {
    font-weight: 500;
  }
  .page-content h5 {
    margin: 0.5rem;
  }
  .admin-left-menu-block {
    display: grid;
    background-color: var(--gray-1);
    padding: 0.3rem;
    border-radius: 0.5rem;
  }
  .admin-left-menu-block.top {
    gap: 3px;
  }
  .admin-left-menu-block.top a:not(.btn) {
    padding: 3px 5px;
    background-color: var(--gray-0);
    border-radius: 5px;
    align-self: center;
  }
  .admin-left-menu-block.top a:not(.btn):hover, .admin-left-menu-block.top a:not(.btn):active {
    background-color: var(--gray-1);
  }
  .admin-left-menu-block .btn {
    font-weight: 400;
    margin-block: 3px;
  }
  .mdl-layout__header {
    width: 100%;
    min-height: 40px;
    background-color: var(--brand-7);
    border: none;
  }
  .mdl-layout__header-row {
    height: 40px;
    margin: 0 auto;
    max-width: 1400px;
    width: 100%;
    padding: 0 5px;
  }
  .mdl-layout-title a {
    color: #fff;
  }
  .mdl-layout-title img {
    max-height: 33px;
  }
  .mdl-layout-title a:hover {
    color: #ccc;
  }
  .mdl-layout-title span {
    font-size: 13px;
  }
  .top-right {
    text-align: right;
    width: 90px;
    flex-grow: 0;
  }
  .login {
    text-align: right;
  }
  .mdl-layout__content {
    padding-top: 10px;
  }
  h2, h3 {
    margin: 5px 0;
    line-height: 40px;
  }
  h1 {
    margin: 10px 0;
  }
  .mdl-button--raised {
    background: var(--gray-1);
    box-shadow: none;
  }
  .mdl-button {
    height: 30px;
    line-height: 30px;
    padding-inline: 1rem;
  }
  .mdl-button:hover {
    background-color: var(--gray-1);
  }
  .mdl-button.btn--primary {
    border-radius: 4px;
    border: 1px solid transparent;
    text-transform: none;
    font-weight: 400;
  }
  .mdl-button.btn--primary i {
    font-size: 20px;
  }
  .mdl-chip {
    height: 30px;
    line-height: 30px;
    border-radius: 2px;
    background-color: var(--gray-1);
  }
  .mdl-layout-spacer input[type=text] {
    border-radius: 2px;
    padding: 0px 8px 0px 6px;
    background: #fff;
    border: 1px solid #fff;
    font-size: 14px;
    height: 30px;
    font-weight: 300;
    z-index: 1;
  }
  .mdl-layout-spacer input[type=submit] {
    height: 30px;
  }
  .buttons-row {
    margin: 10px 0;
  }
  .mdl-data-table {
    width: 100%;
  }
  .mdl-data-table.option-list-value {
    width: auto;
  }
  .mdl-data-table.filter-modify {
    width: 800px;
  }
  .mdl-data-table.filter-modify th {
    color: #444;
  }
  .mdl-data-table td:first-of-type, .mdl-data-table th:first-of-type {
    padding-left: 5px;
    padding-top: 5px;
  }
  .mdl-data-table td:last-of-type, .mdl-data-table th:last-of-type {
    text-align: right;
    padding-right: 7px;
  }
  .mdl-data-table tbody td {
    position: relative;
    height: 30px;
    padding: 2px 5px;
    box-sizing: border-box;
    text-align: left;
  }
  .mdl-data-table select {
    padding: 4px 0;
  }
  .mdl-data-table tbody tr {
    height: auto;
  }
  .mdl-data-table tbody tr:hover {
    background-color: var(--gray-2);
  }
  .mdl-data-table th {
    position: relative;
    height: 30px;
    padding: 2px 5px;
    box-sizing: border-box;
    text-align: left;
    background-color: var(--gray-1);
    font-weight: 500;
    font-size: 14px;
  }
  .mdl-data-table tbody td:nth-child(6) {
    white-space: normal;
  }
  .mdl-button.blue,
  .mdl-button--raised.mdl-button--colored {
    background-color: var(--brand-6);
    color: #fff;
  }
  .admin-search-result {
    padding-top: 5px;
  }
  .admin-search-again {
    margin-top: -38px;
  }
  .admin-top-sellers td a {
    font-weight: 400;
    line-height: 16px;
    font-size: 12px;
  }
  .admin-top-sellers td {
    line-height: 16px;
  }
  .custom-form {
    position: relative;
    max-width: 100%;
  }
  .custom-form > p {
    margin: 1em 0em;
  }
  .custom-form .form-group {
    clear: both;
    margin: 0em 0em 0.5em;
  }
  .custom-form .form-group:last-child {
    margin-bottom: 0em;
  }
  .custom-form .form-group > label {
    display: inline-block;
    margin: 0;
    color: #757575;
    font-size: 1em;
    text-transform: none;
    vertical-align: middle;
  }
  .custom-form input:not([type]),
  .custom-form input[type=date],
  .custom-form input[type=datetime-local],
  .custom-form input[type=email],
  .custom-form input[type=number],
  .custom-form input[type=password],
  .custom-form input[type=search],
  .custom-form input[type=tel],
  .custom-form input[type=time],
  .custom-form input[type=text],
  .custom-form input[type=file],
  .custom-form input[type=url] {
    display: inline-block;
    margin: 0em;
    outline: none;
    -webkit-appearance: none;
    line-height: 1.21428571em;
    padding: 0.5em 1em;
    font-size: 1em;
    background: #FFFFFF;
    border: 1px solid #ccc;
    box-shadow: 0em 0em 0em 0em transparent inset;
    -webkit-transition: color 0.1s ease, border-color 0.1s ease;
    transition: color 0.1s ease, border-color 0.1s ease;
  }
  /* Text Area */
  .custom-form textarea {
    display: inline-block;
    margin: 0em;
    -webkit-appearance: none;
    padding: 0.78571429em 1em;
    background: #FFFFFF;
    border: 1px solid var(--gray-4);
    border: 1px solid #ccc;
    outline: none;
    border-radius: 3px;
    box-shadow: 0em 0em 0em 0em transparent inset;
    -webkit-transition: color 0.1s ease, border-color 0.1s ease;
    transition: color 0.1s ease, border-color 0.1s ease;
    font-size: 1em;
    line-height: 1.2857;
    resize: vertical;
  }
  .custom-form textarea:not([rows]) {
    height: 12em;
    min-height: 8em;
    max-height: 24em;
  }
  .custom-form textarea,
  .custom-form input[type=checkbox] {
    vertical-align: top;
  }
  .custom-form input.attached {
    width: auto;
  }
  /*Basic Select*/
  .custom-form .select-arrow {
    display: inline-block;
    position: relative;
    width: 100%;
  }
  .custom-form .select-arrow:after {
    /*font-family: 'armchem';
    content: "\e827"; */
    color: #757575;
    right: 0;
    top: 0;
    position: absolute;
    padding: 0.62em 1em;
    pointer-events: none;
  }
  .custom-form .select-arrow.small {
    width: 80px;
  }
  .custom-form .select-arrow.medium {
    width: 200px;
  }
  .custom-form select {
    display: inline-block;
    height: auto;
    width: 100%;
    font-size: 1em;
    background: #FFFFFF;
    border: 1px solid var(--gray-4);
    color: #757575;
    border-radius: 3px;
    box-shadow: 0em 0em 0em 0em transparent inset;
    padding: 0.62em 1em;
    margin: 0;
    -webkit-transition: color 0.1s ease, border-color 0.1s ease;
    transition: color 0.1s ease, border-color 0.1s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    cursor: pointer;
  }
  select::-ms-expand {
    display: none;
  }
  ul.row--form li {
    display: block;
    float: left;
    padding: 0 5px 0 0;
  }
  .btn--block {
    display: block;
    width: 100%;
    margin: 1rem 0;
  }
  .h1-title {
    float: left;
    width: 100%;
    font-size: 22px;
  }
  .h2-title {
    float: left;
    width: 100%;
    font-size: 18px;
    color: var(--brand-7);
  }
  .right-content h2 {
    font-size: 22px;
    font-weight: normal;
    color: #424242;
  }
  p {
    margin: 0 0 20px 0;
  }
  em {
    font-style: italic;
  }
  strong {
    font-weight: 500;
  }
  hr {
    border: solid var(--gray-1);
    border-width: 2px 0 0;
    clear: both;
    margin: 5px 0;
    height: 0;
  }
  @media print {
    body {
      background: #fff;
      color: #000;
      font-size: 8pt;
      line-height: 150%;
      margin: 0px;
    }
    hr {
      color: #ccc;
      background-color: #ccc;
    }
    h1, h2, h3, h4, h5, h6, code, pre {
      color: #000;
      text-transform: none;
      /* because sometimes I set all-caps */
    }
    h1 {
      font-size: 11pt;
      margin-top: 1em;
    }
    h2 {
      font-size: 10pt;
    }
    h3 {
      font-size: 9pt;
    }
    h4, h5, h6 {
      font-size: 8pt;
    }
    code, pre {
      font-size: 8pt;
      background-color: transparent;
      /* just in case the user configured browser to print backgrounds */
    }
    blockquote {
      background-image: none;
      /* though they may not print, I’d rather be sure */
    }
    a:link, a:visited {
      text-decoration: underline;
      color: #000;
    }
    table {
      page-break-inside: auto;
    }
    tr {
      page-break-inside: auto;
    }
    table, th, td {
      border-collapse: collapse;
      width: 100%;
    }
    table td, th td, td td {
      border: 1px solid #cccccc;
    }
  }
  /*
  Content enviroment styles
  */
  TABLE.Container {
    HEIGHT: 100%;
  }
  TD.Container {
    VERTICAL-ALIGN: top;
  }
  /*
  Header styles
  */
  .top_bg {
    BACKGROUND-COLOR: #eceff3;
  }
  .HeadLogo {
    PADDING-LEFT: 27px;
    TEXT-ALIGN: left;
  }
  .HeadRightBox {
    VERTICAL-ALIGN: top;
    TEXT-ALIGN: right;
  }
  .HeadText {
    FONT-SIZE: 13px;
    FONT-WEIGHT: bold;
  }
  .HeadLine {
    BACKGROUND-COLOR: #C3CCD0;
  }
  .HeadThinLine {
    BACKGROUND-COLOR: #c3c4c5;
    HEIGHT: 2px;
  }
  .PrintableRow {
    WIDTH: 100%;
    VERTICAL-ALIGN: middle;
    PADDING-RIGHT: 176px;
    HEIGHT: 18px;
  }
  .HeadTopPad {
    HEIGHT: 18px;
  }
  .HeadTopPad IMG {
    WIDTH: 1px;
    HEIGHT: 18px;
  }
  /*
  Footer styles
  */
  .BottomRow {
    TEXT-ALIGN: center;
    VERTICAL-ALIGN: bottom;
  }
  .BottomBox {
    BACKGROUND-COLOR: #000000;
    COLOR: #FFFFFF;
    HEIGHT: 22px;
    VERTICAL-ALIGN: middle;
    PADDING-LEFT: 12px;
    PADDING-RIGHT: 12px;
  }
  .Bottom {
    BACKGROUND-COLOR: #000000;
    COLOR: #FFFFFF;
  }
  .BottomPopup {
    WIDTH: 100%;
    TEXT-ALIGN: right;
    PADDING-BOTTOM: 10px;
  }
  .BottomPopup A {
    FONT-WEIGHT: bold;
  }
  .BottomDialogBox {
    BACKGROUND-COLOR: #cfd6d9;
    PADDING-LEFT: 13px;
    PADDING-TOP: 10px;
    PADDING-BOTTOM: 10px;
  }
  /*
  Common styles
  */
  .SubmitBox,
  .admin-btn-block {
    display: table-cell;
    gap: 1rem;
    align-items: center;
    padding-top: 10px;
  }
  .SubmitBox input[type=button],
  .SubmitBox input[type=submit],
  .SubmitBox input[type=reset],
  .admin-btn-block input[type=button],
  .admin-btn-block input[type=submit],
  .admin-btn-block input[type=reset] {
    --_padding-block: 1ch;
    --_size: 1rem;
    --_btn-color: var(--brand-6);
    --_text: #fff;
    --_border: var(--brand-6);
    cursor: pointer;
    touch-action: manipulation;
    font-size: var(--_size, 0.875rem);
    background-color: var(--_btn-color, white);
    color: var(--_text, var(--gray-8));
    border: 2px solid var(--_border, var(--gray-3));
    border-radius: var(--btn-border-radius);
    box-shadow: var(--_shadow-2), var(--_shadow-depth), 0 0 0 var(--_highlight-size) var(--_highlight);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    width: fit-content;
    height: fit-content;
    gap: 0.5ch;
    margin: 0;
    padding-block: var(--_padding-block);
    padding-inline: var(--_padding-inline);
    user-select: none;
    transition: box-shadow 250ms ease, outline 250ms ease, background-color 250ms ease;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }
  .SubmitBox input[type=button]:hover, .SubmitBox input[type=button]:focus, .SubmitBox input[type=button]:active,
  .SubmitBox input[type=submit]:hover,
  .SubmitBox input[type=submit]:focus,
  .SubmitBox input[type=submit]:active,
  .SubmitBox input[type=reset]:hover,
  .SubmitBox input[type=reset]:focus,
  .SubmitBox input[type=reset]:active,
  .admin-btn-block input[type=button]:hover,
  .admin-btn-block input[type=button]:focus,
  .admin-btn-block input[type=button]:active,
  .admin-btn-block input[type=submit]:hover,
  .admin-btn-block input[type=submit]:focus,
  .admin-btn-block input[type=submit]:active,
  .admin-btn-block input[type=reset]:hover,
  .admin-btn-block input[type=reset]:focus,
  .admin-btn-block input[type=reset]:active {
    --_highlight-size: .3rem;
  }
  .SubmitBox input[type=button][disabled],
  .SubmitBox input[type=submit][disabled],
  .SubmitBox input[type=reset][disabled],
  .admin-btn-block input[type=button][disabled],
  .admin-btn-block input[type=submit][disabled],
  .admin-btn-block input[type=reset][disabled] {
    --_highlight-size: 0;
    cursor: not-allowed;
  }
  .SubmitBox input[type=button][value="Delete selected"],
  .SubmitBox input[type=submit][value="Delete selected"],
  .SubmitBox input[type=reset][value="Delete selected"],
  .admin-btn-block input[type=button][value="Delete selected"],
  .admin-btn-block input[type=submit][value="Delete selected"],
  .admin-btn-block input[type=reset][value="Delete selected"] {
    --_btn-color: var(--gray-2);
    --_text: var(--gray-9);
    --_border: var(--gray-2);
  }
  .SubmitBox input[type=button][value=Update], .SubmitBox input[type=button][value=save], .SubmitBox input[type=button][value="Modify selected"],
  .SubmitBox input[type=submit][value=Update],
  .SubmitBox input[type=submit][value=save],
  .SubmitBox input[type=submit][value="Modify selected"],
  .SubmitBox input[type=reset][value=Update],
  .SubmitBox input[type=reset][value=save],
  .SubmitBox input[type=reset][value="Modify selected"],
  .admin-btn-block input[type=button][value=Update],
  .admin-btn-block input[type=button][value=save],
  .admin-btn-block input[type=button][value="Modify selected"],
  .admin-btn-block input[type=submit][value=Update],
  .admin-btn-block input[type=submit][value=save],
  .admin-btn-block input[type=submit][value="Modify selected"],
  .admin-btn-block input[type=reset][value=Update],
  .admin-btn-block input[type=reset][value=save],
  .admin-btn-block input[type=reset][value="Modify selected"] {
    --_size: 1.2rem;
    --_padding-block: 1.5ch;
    --_padding-inline: 4ch;
  }
  .SubmitBox INPUT {
    MARGIN-RIGHT: 15px;
  }
  HR.Line {
    WIDTH: 100%;
    HEIGHT: 1px;
    BORDER-BOTTOM-WIDTH: 0px;
    BORDER-LEFT-WIDTH: 0px;
    BORDER-RIGHT-WIDTH: 0px;
  }
  HR.GreyLine {
    BACKGROUND-COLOR: transparent;
    BORDER: 0px;
    BORDER-TOP: 1px solid grey;
  }
  .SectionBox {
    BACKGROUND-COLOR: #ffffff;
    TEXT-ALIGN: left;
    FONT-WEIGHT: normal;
  }
  .SectionBox td,
  .TableSubHead td {
    text-transform: none;
    /*font-size:12px;*/
  }
  .Text {
    COLOR: #000000;
  }
  .NumberOfArticles {
    COLOR: #000000;
    FONT-WEIGHT: bold;
  }
  .TopLabel {
    COLOR: var(--brand-6);
    FONT-WEIGHT: 500;
    FONT-SIZE: 15px;
    text-align: left;
  }
  .Message {
    COLOR: #e72543;
  }
  .Line {
    BACKGROUND-COLOR: var(--brand-6);
  }
  TD.ButtonsRow {
    PADDING-TOP: 2px;
    PADDING-LEFT: 2px;
    PADDING-RIGHT: 12px;
    PADDING-BOTTOM: 2px;
  }
  .CustomerMessage {
    COLOR: #e72543;
    FONT-WEIGHT: bold;
  }
  .ErrorMessage {
    COLOR: #e72543;
    FONT-WEIGHT: 500;
  }
  .Star {
    COLOR: #FF0000;
  }
  .TableHead {
    background-color: var(--gray-2);
    font-weight: 500;
    padding: 2px;
    text-transform: uppercase;
  }
  .admin-var .TableHead td {
    white-space: nowrap;
  }
  .TableSubHead {
    BACKGROUND-COLOR: var(--gray-1);
    FONT-WEIGHT: normal;
  }
  .Spc {
    WIDTH: 1px;
    HEIGHT: 1px;
  }
  TABLE.EmptyBox {
    WIDTH: 100%;
  }
  TABLE.EmptyBox TR TD {
    PADDING: 0px;
  }
  .AdminSmallMessage {
    COLOR: #e72543;
  }
  .AdminTitle {
    COLOR: #e72543;
    FONT-WEIGHT: bold;
    FONT-SIZE: 13px;
  }
  .TableHeadLevel2 {
    BACKGROUND-COLOR: #CCCCCC;
    COLOR: #000000;
    FONT-WEIGHT: bold;
    HEIGHT: 20px;
    TEXT-ALIGN: center;
  }
  .TableLine {
    BACKGROUND-COLOR: #F0F0F0;
  }
  .TableSeparator {
    COLOR: #000000;
    FONT-WEIGHT: 500;
    FONT-SIZE: 14px;
  }
  .InputWidth {
    WIDTH: 80%;
  }
  .InputWidth-small {
    width: 150px;
  }
  .StatisticsBar {
    BACKGROUND-COLOR: #A8BCC8;
  }
  .HightLightRow {
    BACKGROUND-COLOR: #B0B0B0;
    FONT-WEIGHT: bold;
  }
  /*
  Popup styles
  */
  .PopupContainer {
    HEIGHT: 100%;
    WIDTH: 100%;
    TEXT-ALIGN: center;
  }
  .PopupTitle {
    BACKGROUND-COLOR: #D6D7D9;
    HEIGHT: 15px;
    VERTICAL-ALIGN: middle;
    TEXT-ALIGN: center;
    FONT-WEIGHT: bold;
    FONT-SIZE: 13px;
  }
  .PopupBG {
    BACKGROUND-COLOR: #D6D7D9;
  }
  /*
  BuyNow section
  */
  .BuyNowQuantity {
    HEIGHT: 25px;
    WIDTH: 15%;
    WHITE-SPACE: nowrap;
    PADDING-RIGHT: 10px;
  }
  .BuyNowPrices {
    WIDTH: 100%;
    HEIGHT: 25px;
    VERTICAL-ALIGN: middle;
  }
  /*
  Vertical menu
  */
  .VertMenuLeftColumn {
    WIDTH: 150px;
    VERTICAL-ALIGN: top;
    PADDING-LEFT: 6px;
    PADDING-RIGHT: 20px;
  }
  .VertMenuRightColumn {
    WIDTH: 148px;
    VERTICAL-ALIGN: top;
    PADDING-LEFT: 20px;
    PADDING-RIGHT: 6px;
  }
  .VertMenuBox {
    BACKGROUND-COLOR: #d9dbde;
    PADDING: 1px;
  }
  .VertMenuBorder {
    BACKGROUND-COLOR: #aaabac;
  }
  .VertMenuTitle {
    COLOR: #ffffff;
    PADDING: 3px;
    text-transform: uppercase;
  }
  .VertMenuSubTitle {
    BACKGROUND-COLOR: #d9dbde;
  }
  .VertMenuTitleIcon {
    WIDTH: 21px;
    HEIGHT: 20px;
    MARGIN-LEFT: 8px;
    MARGIN-RIGHT: 8px;
    VERTICAL-ALIGN: middle;
  }
  .VertMenuItemsHL {
    color: var(--brand-6);
    text-decoration: underline;
  }
  .VertMenuItemsHL:active, .VertMenuItemsHL:focus, .VertMenuItemsHL:hover {
    color: var(--brand-8);
    text-decoration: none;
  }
  .VertMenuHr {
    WIDTH: 100%;
    HEIGHT: 1px;
    BORDER-BOTTOM-WIDTH: 0px;
    BORDER-LEFT-WIDTH: 0px;
    BORDER-RIGHT-WIDTH: 0px;
    COLOR: #999999;
  }
  .CategoriesList {
    FONT-SIZE: 13px;
  }
  /*
  Dialog box
  */
  TABLE.DialogBox {
    WIDTH: 100%;
    HEIGHT: 100%;
    VERTICAL-ALIGN: top;
  }
  TD.DialogBox {
    BACKGROUND-COLOR: #ffffff;
    TEXT-ALIGN: left;
    PADDING: 10px;
  }
  .DialogBorder {
    BACKGROUND-COLOR: var(--brand-6);
    HEIGHT: 100%;
    PADDING: 0px;
  }
  TD.DialogTitle {
    COLOR: #000000;
    FONT-WEIGHT: bold;
    FONT-SIZE: 11px;
    BACKGROUND-IMAGE: url(images/dialog_bg_n.gif);
    VERTICAL-ALIGN: bottom;
    HEIGHT: 15px;
    PADDING-TOP: 0px;
    PADDING-BOTTOM: 0px;
    PADDING-LEFT: 10px;
    PADDING-RIGHT: 0px;
    TEXT-ALIGN: left;
  }
  FONT.DialogTitle {
    COLOR: #FFFFFF;
    FONT-WEIGHT: bold;
    FONT-SIZE: 11px;
    VERTICAL-ALIGN: bottom;
    HEIGHT: 15px;
    TEXT-ALIGN: left;
    MARGIN-LEFT: 10px;
  }
  /*
  Dialog info box
  */
  TABLE.DialogInfo {
    WIDTH: 85%;
    TEXT-ALIGN: center;
  }
  .DialogInfoTitle {
    COLOR: #FFFFFF;
    FONT-WEIGHT: bold;
    FONT-SIZE: 11px;
    VERTICAL-ALIGN: bottom;
    TEXT-ALIGN: left;
    HEIGHT: 15px;
    PADDING-TOP: 0px;
    PADDING-BOTTOM: 0px;
    PADDING-LEFT: 5px;
    PADDING-RIGHT: 5px;
  }
  .DialogInfoTitleBorder {
    BACKGROUND-COLOR: var(--brand-6);
    PADDING: 0px;
    VERTICAL-ALIGN: bottom;
    HEIGHT: 15px;
  }
  .DialogInfoBorder {
    BACKGROUND-COLOR: var(--brand-6);
    PADDING: 0px;
  }
  .DialogInfoIcon {
    WIDTH: 16px;
    HEIGHT: 16px;
  }
  .DialogInfoClose {
    WIDTH: 15px;
    HEIGHT: 13px;
  }
  /*
  Dialog tools section
  */
  .dialog-tool-header,
  .dialog-tool-block {
    display: flex;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  .dialog-tool-title {
    flex-grow: 1;
    font-size: 1rem;
    font-weight: 500;
    padding: 5px 15px;
    color: var(--brand-7);
  }
  .dialog-tool-block-left,
  .dialog-tool-block-right {
    display: grid;
    align-content: start;
    flex-grow: 1;
    background-color: var(--gray-1);
    border-radius: var(--border-radius);
    padding: 7px 15px;
  }
  .dialog-links-block .links-block {
    display: grid;
    gap: 0.3rem;
  }
  .dialog-links-block .links-block a {
    width: max-content;
  }
  .dialog-links-block .links-block a.VertMenuItemsHL {
    display: inline-block;
    background-color: var(--gray-6);
    padding: 3px 10px;
    border-radius: 5px;
    color: #fff;
    text-decoration: none;
  }
  .dialog-links-block td {
    vertical-align: top;
  }
  .NavDialogTitle {
    width: 50%;
    font-size: 1rem;
    font-weight: 500;
    padding: 5px 10px;
  }
  .NavDialogBorder {
    background-color: var(--gray-1);
  }
  .NavDialogBox {
    background-color: #fff;
  }
  .NavDialogSeparator {
    WIDTH: 100%;
    HEIGHT: 14px;
    BACKGROUND-IMAGE: url(images/separator.gif);
    PADDING-LEFT: 7px;
  }
  .NavDialogSeparator IMG {
    WIDTH: 100%;
    HEIGHT: 14px;
  }
  .NavDialogCell {
    PADDING-RIGHT: 3px;
  }
  .NavDialogCell A IMG {
    WIDTH: 9px;
    HEIGHT: 9px;
  }
  /*
  Product details page
  */
  .ProductTitle {
    font-size: 18px;
    color: var(--brand-6);
    font-weight: 500;
  }
  .ProductModifyTitle {
    font-size: 18px;
    color: var(--brand-6);
    font-weight: 500;
  }
  .ProductTitle a {
    font-size: 14px;
    color: var(--brand-6);
    font-weight: 400;
  }
  .ProductTitle a:hover {
    color: #333;
  }
  .ProductTitleHidden {
    COLOR: #666666;
    FONT-WEIGHT: bold;
    FONT-SIZE: 11px;
  }
  .ProductDetailsTitle {
    COLOR: #e72543;
    FONT-WEIGHT: bold;
    FONT-SIZE: 13px;
  }
  .ProductDetails {
    COLOR: #000000;
  }
  .ProductPriceTitle {
    COLOR: #000000;
    FONT-WEIGHT: bold;
    FONT-SIZE: 13px;
  }
  .ProductPriceConverting {
    COLOR: #000000;
    FONT-WEIGHT: bold;
    FONT-SIZE: 13px;
  }
  .ProductPrice {
    COLOR: #e72543;
    FONT-WEIGHT: bold;
    FONT-SIZE: 13px;
  }
  .ProductPriceSmall {
    COLOR: #e72543;
    FONT-WEIGHT: bold;
  }
  .SaveMoneyLabel {
    WIDTH: 57px;
    HEIGHT: 57px;
    TEXT-ALIGN: center;
    VERTICAL-ALIGN: middle;
    COLOR: #FFFFFF;
    FONT-WEIGHT: bold;
    BACKGROUND-IMAGE: url(images/save_money.gif);
  }
  .MarketPrice {
    FONT-SIZE: 14px;
    FONT-FAMILY: Times New Roman;
  }
  /*
  Products list
  */
  .PListImgBox {
    WIDTH: 90px;
    TEXT-ALIGN: center;
    VERTICAL-ALIGN: top;
    WHITE-SPACE: nowrap;
  }
  HR.PListLine {
    WIDTH: 100%;
    HEIGHT: 1px;
    BORDER-BOTTOM-WIDTH: 0px;
    BORDER-LEFT-WIDTH: 0px;
    BORDER-RIGHT-WIDTH: 0px;
  }
  .PListTaxBox {
    PADDING-LEFT: 70px;
    PADDING-RIGHT: 2px;
    PADDING-TOP: 2px;
    PADDING-BOTTOM: 2px;
  }
  .PListCell {
    BACKGROUND-COLOR: #ffffff;
    TEXT-ALIGN: center;
    PADDING: 10px;
    VERTICAL-ALIGN: top;
  }
  /*
  Items style
  */
  .ItemsList {
    COLOR: #000000;
    FONT-WEIGHT: 500;
  }
  .ItemsListDisabled {
    COLOR: #909090;
  }
  A.ItemsList:link {
    COLOR: #330000;
    FONT-WEIGHT: 500;
    TEXT-DECORATION: none;
  }
  A.ItemsList:visited {
    COLOR: #330000;
    FONT-WEIGHT: 500;
    TEXT-DECORATION: none;
  }
  A.ItemsList:hover {
    COLOR: #330000;
    FONT-WEIGHT: 500;
    TEXT-DECORATION: none;
  }
  A.ItemsList:active {
    COLOR: #330000;
    FONT-WEIGHT: 500;
    TEXT-DECORATION: none;
  }
  /*
  Location bar
  */
  .NavigationPath {
    COLOR: #000000;
    FONT-WEIGHT: 500;
    TEXT-DECORATION: none;
  }
  .NavigationPath:link {
    COLOR: #000000;
    FONT-WEIGHT: 500;
    TEXT-DECORATION: underline;
  }
  .NavigationPath:visited {
    COLOR: #000000;
    FONT-WEIGHT: 500;
    TEXT-DECORATION: underline;
  }
  .NavigationPath:hover {
    COLOR: #000000;
    FONT-WEIGHT: 500;
    TEXT-DECORATION: none;
  }
  .NavigationPath:active {
    COLOR: #000000;
    FONT-WEIGHT: 500;
    TEXT-DECORATION: underline;
  }
  /*
  Buttons
  */
  .FormButton {
    COLOR: #000000;
    FONT-WEIGHT: 500;
  }
  TABLE.ButtonTable {
    CURSOR: pointer;
    VERTICAL-ALIGN: middle;
    DIRECTION: ltr;
  }
  TABLE.ButtonTable TD {
    PADDING: 0px;
  }
  TD.Button {
    BACKGROUND: url(images/butbg.gif);
    BACKGROUND-COLOR: #68C1FF;
    BACKGROUND-REPEAT: repeat-x;
    PADDING-LEFT: 5px;
    PADDING-RIGHT: 5px;
    VERTICAL-ALIGN: middle;
    WHITE-SPACE: nowrap;
  }
  FONT.Button {
    FONT-FAMILY: Arial;
    COLOR: #FFFFFF;
    FONT-WEIGHT: 500;
    FONT-SIZE: 11px;
    TEXT-DECORATION: none;
  }
  IMG.ButtonSide {
    WIDTH: 7px;
    HEIGHT: 14px;
  }
  .SimpleButton TR TD {
    PADDING: 0px;
    WHITE-SPACE: nowrap;
  }
  A.Button:link, A.Button:visited, A.Button:hover, A.Button:active {
    COLOR: #330000;
    FONT-WEIGHT: 500;
  }
  .GoImage {
    WIDTH: 21px;
    HEIGHT: 18px;
    VERTICAL-ALIGN: middle;
    BORDER: 0px;
  }
  /*
  Small text/link style
  */
  .SmallNote:link {
    COLOR: #888888;
    TEXT-DECORATION: none;
    FONT-SIZE: 9px;
    FONT-FAMILY: Arial, Verdana, Helvetica, Sans-serif;
  }
  .SmallNote:visited {
    COLOR: #888888;
    TEXT-DECORATION: none;
    FONT-SIZE: 9px;
    FONT-FAMILY: Arial, Verdana, Helvetica, Sans-serif;
  }
  .SmallNote:hover {
    COLOR: #888888;
    TEXT-DECORATION: underline;
    FONT-SIZE: 9px;
    FONT-FAMILY: Arial, Verdana, Helvetica, Sans-serif;
  }
  .SmallNote:active {
    COLOR: #888888;
    TEXT-DECORATION: none;
    FONT-SIZE: 9px;
    FONT-FAMILY: Arial, Verdana, Helvetica, Sans-serif;
  }
  .SmallText {
    COLOR: #7C4C00;
    TEXT-DECORATION: none;
    FONT-SIZE: 9px;
    FONT-FAMILY: Arial, Verdana, Helvetica, Sans-serif;
  }
  /*
  Category page
  */
  .SubcatTitle {
    TEXT-ALIGN: left;
    WIDTH: 95%;
    PADDING-LEFT: 5px;
  }
  .SubcatInfo {
    TEXT-ALIGN: right;
    WHITE-SPACE: nowrap;
    COLOR: #000000;
  }
  /*
  Search sort bar
  */
  .SearchSortTitle {
    FONT-WEIGHT: 500;
    PADDING-RIGHT: 20px;
  }
  .SearchSortLink:link, .SearchSortLink:visited, .SearchSortLink:hover, .SearchSortLink:active {
    TEXT-DECORATION: underline;
  }
  .SearchSortImg {
    WIDTH: 9px;
    HEIGHT: 9px;
    MARGIN-RIGHT: 5px;
  }
  .SearchSortCell {
    PADDING-RIGHT: 20px;
  }
  /*
  Expandable section
  */
  .ExpandSectionMark {
    WIDTH: 11px;
    CURSOR: pointer;
    VERTICAL-ALIGN: middle;
  }
  /*
  Tab mechanism
  */
  .Tab {
    BACKGROUND-COLOR: #C3CCD0;
    FONT-WEIGHT: 500;
    TEXT-TRANSFORM: uppercase;
    WIDTH: 85px;
    HEIGHT: 30px;
    TEXT-ALIGN: center;
  }
  .TabTop {
    HEIGHT: 5px;
    BACKGROUND-COLOR: #D6D7D9;
  }
  TD.TabLeftSide {
    WIDTH: 9px;
    BACKGROUND-IMAGE: url(images/tab_l.gif);
  }
  TD.TabRightSide {
    WIDTH: 9px;
    BACKGROUND-IMAGE: url(images/tab_r.gif);
  }
  TD.TabLeftCorner {
    WIDTH: 9px;
    HEIGHT: 9px;
    BACKGROUND-IMAGE: url(images/tab_c1.gif);
  }
  TD.TabRightCorner {
    WIDTH: 9px;
    HEIGHT: 9px;
    BACKGROUND-IMAGE: url(images/tab_c2.gif);
  }
  TD.TabCenter {
    HEIGHT: 9px;
    BACKGROUND-IMAGE: url(images/tab_b.gif);
  }
  IMG.TabCorner {
    WIDTH: 9px;
    HEIGHT: 9px;
  }
  IMG.TabSide {
    WIDTH: 9px;
    HEIGHT: 1px;
  }
  /*
  Pagination mechanism
  */
  .NavigationArrow {
    WIDTH: 9px;
    HEIGHT: 9px;
  }
  .NavigationTitle {
    WHITE-SPACE: nowrap;
    HEIGHT: 14px;
    PADDING-RIGHT: 10px;
  }
  .NavigationCell {
    TEXT-ALIGN: center;
    VERTICAL-ALIGN: middle;
    WIDTH: 20px;
  }
  .NavigationCell A:link, .NavigationCell A:visited, .NavigationCell A:hover, .NavigationCell A:active {
    TEXT-DECORATION: none;
  }
  /* .NavigationCell IMG {
  	HEIGHT: 1px;
  	WIDTH: 17px;
  	} */
  .NavigationCellWide {
    TEXT-ALIGN: center;
    VERTICAL-ALIGN: bottom;
    BACKGROUND-IMAGE: url(images/page_wide.gif);
    WIDTH: 23px;
  }
  .NavigationCellWide A:link, .NavigationCellWide A:visited, .NavigationCellWide A:hover, .NavigationCellWide A:active {
    TEXT-DECORATION: none;
  }
  .NavigationCellWide IMG {
    HEIGHT: 1px;
    WIDTH: 23px;
  }
  .NavigationCellSel {
    VERTICAL-ALIGN: middle;
    FONT-WEIGHT: 500;
    width: 20px;
    text-align: center;
  }
  TABLE.SubHeaderGrey {
    WIDTH: 100%;
    MARGIN-BOTTOM: 10px;
  }
  .SubHeaderGrey {
    COLOR: #666666;
    FONT-SIZE: 14px;
    FONT-WEIGHT: 500;
    PADDING: 0px;
  }
  .SubHeaderGreyLine {
    HEIGHT: 1px;
    BACKGROUND-COLOR: #CCCCCC;
    PADDING: 0px;
  }
  TABLE.SubHeaderBlack {
    WIDTH: 100%;
    MARGIN-BOTTOM: 10px;
  }
  .SubHeaderBlack {
    COLOR: #000000;
    FONT-SIZE: 13px;
    FONT-WEIGHT: 500;
    PADDING: 0px;
  }
  .SubHeaderBlackLine {
    HEIGHT: 1px;
    BACKGROUND-COLOR: #000000;
    PADDING: 0px;
  }
  TABLE.SubHeaderRed {
    WIDTH: 100%;
    MARGIN-BOTTOM: 10px;
  }
  .SubHeaderRed {
    FONT-WEIGHT: 500;
    PADDING: 0px;
  }
  .SubHeaderRedLine {
    HEIGHT: 1px;
    BACKGROUND-COLOR: #550000;
    PADDING: 0px;
  }
  TABLE.SubHeader {
    WIDTH: 100%;
    MARGIN-BOTTOM: 10px;
  }
  .SubHeader {
    COLOR: var(--brand-6);
    font-size: 14px;
    PADDING: 0 0 3px;
    text-transform: uppercase;
  }
  .SubHeaderLine {
    HEIGHT: 2px;
    BACKGROUND-COLOR: #ccc;
    PADDING: 0px;
    margin-top: 3px;
  }
  /*
  User profile page
  */
  .RegSectionTitle {
    COLOR: #550000;
    FONT-SIZE: 10px;
    FONT-WEIGHT: 500;
  }
  /*
  Webmaster mode
  */
  SPAN.Lbl {
    COLOR: green;
    FONT-WEIGHT: 500;
  }
  .Section {
    MARGIN: 0px;
    PADDING: 0px;
  }
  /*
  Group editing of the products functionality
  */
  .DataTable {
    border-right: solid 1px white;
  }
  /*
  User action field stle
  */
  .UsersActionDisable {
    COLOR: #CC0000;
  }
  .UsersActionEnable {
    COLOR: #00CC00;
  }
  /*
  Data sheet container
  */
  TABLE.DataSheet {
    BACKGROUND-COLOR: black;
    WIDTH: 100%;
  }
  TR.DataSheet {
    BACKGROUND-COLOR: #CCCCCC;
    COLOR: #000000;
    FONT-WEIGHT: 500;
    HEIGHT: 20px;
    TEXT-ALIGN: center;
    TEXT-TRANSFORM: uppercase;
    WHITE-SPACE: nowrap;
  }
  TABLE.DataSheet TR TD {
    BACKGROUND-COLOR: white;
    PADDING: 2px;
  }
  TABLE.DataSheet TR TH {
    PADDING: 2px;
  }
  /*
  Images location page styles
  */
  .DBOption {
    COLOR: #0000CC;
  }
  .FSOption {
    COLOR: #CC0000;
  }
  /*
  Product options module
  */
  .DataField {
    PADDING-BOTTOM: 20px;
  }
  /*
  -- ADDONS --
  */
  /*
  Special offers module
  */
  .SpecialOffersThumb {
    DISPLAY: inline;
    MARGIN-LEFT: -51px;
  }
  .SpecialOffersThumb A IMG {
    WIDTH: 47px;
    HEIGHT: 44px;
  }
  /*
  X-Affiliate module section
  */
  .AffiliateCellBG {
    WIDTH: 19px;
    HEIGHT: 19px;
    VERTICAL-ALIGN: middle;
    BACKGROUND-IMAGE: url(images/tree_v.gif);
  }
  .AffiliateCell {
    WIDTH: 19px;
    HEIGHT: 19px;
    VERTICAL-ALIGN: middle;
  }
  .AffiliateElmTitle {
    TEXT-ALIGN: center;
    FONT-WEIGHT: 500;
    BACKGROUND-COLOR: #D6D7D9;
    PADDING: 1px;
  }
  .AffiliateElmIconBox {
    WIDTH: 70px;
    TEXT-ALIGN: center;
    VERTICAL-ALIGN: middle;
  }
  .AffiliateElmsBox {
    BACKGROUND-COLOR: #ffffff;
    TEXT-ALIGN: center;
    VERTICAL-ALIGN: top;
    HEIGHT: 100%;
  }
  .MediaElementProperties {
    COLOR: #666666;
    FONT-SIZE: 10px;
  }
  TD.OptionLabel {
    WHITE-SPACE: nowrap;
    PADDING-RIGHT: 10px;
  }
  .AELinkBox {
    TEXT-ALIGN: right;
    PADDING-BOTTOM: 3px;
  }
  /*
  Survey module
  */
  .SurveyStatLabel {
    PADDING-LEFT: 10px;
    WHITE-SPACE: nowrap;
  }
  TD.SurveyAnswerComment {
    PADDING-LEFT: 20px;
  }
  DIV.SurveyAnswerComment {
    WIDTH: 80%;
    BACKGROUND-COLOR: var(--gray-1);
    PADDING: 0px;
    MARGIN: 5px;
    BORDER: 1px solid var(--gray-1);
  }
  .SurveyQuestion {
    FONT-SIZE: 13px;
    FONT-WEIGHT: 500;
    PADDING: 2px;
  }
  .SurveyQuestionMenu {
    FONT-WEIGHT: 500;
    PADDING: 0px;
  }
  .SurveyAnswerTextLine_1 {
    BACKGROUND-COLOR: var(--gray-1);
    PADDING: 5px;
  }
  .SurveyAnswerTextLine_2 {
    BACKGROUND-COLOR: var(--gray-1);
    PADDING: 5px;
  }
  A.SurveyAnswerTextLine:link {
    COLOR: #330000;
    TEXT-DECORATION: none;
  }
  A.SurveyAnswerTextLine:visited {
    COLOR: #330000;
    TEXT-DECORATION: none;
  }
  A.SurveyAnswerTextLine:hover {
    COLOR: #330000;
    TEXT-DECORATION: underline;
  }
  A.SurveyAnswerTextLine:active {
    COLOR: #330000;
    TEXT-DECORATION: none;
  }
  TD.SurveyTab {
    PADDING-TOP: 0px;
    PADDING-BOTTOM: 0px;
    CURSOR: pointer;
    PADDING-LEFT: 10px;
    PADDING-RIGHT: 10px;
    HEIGHT: 26px;
    WHITE-SPACE: nowrap;
    FONT-SIZE: 13px;
    COLOR: #953e0e;
    TEXT-DECORATION: underline;
  }
  TD.SurveyTabSelected {
    PADDING-TOP: 0px;
    PADDING-BOTTOM: 0px;
    PADDING-LEFT: 10px;
    PADDING-RIGHT: 10px;
    HEIGHT: 26px;
    BACKGROUND-COLOR: var(--gray-1);
    WHITE-SPACE: nowrap;
    FONT-WEIGHT: 500;
    FONT-SIZE: 13px;
    COLOR: #953e0e;
  }
  TD.SurveyTabLine {
    HEIGHT: 1px;
    BACKGROUND-COLOR: var(--gray-1);
  }
  TD.SurveyTabLine IMG {
    HEIGHT: 1px;
    WIDTH: 100%;
  }
  .bot_02 {
    padding: 7px 0;
  }
  .dialog_n {
    width: 50%;
    text-align: center;
    margin-top: 50px;
    border: 1px solid #ed1c24;
    padding: 5px;
    background-color: #fadada;
    clear: left;
  }
  .dialog_n #dialog {
    background-color: #ffffff;
    padding: 5px;
  }
  .dialog_n #dialog span {
    color: #ed1c24;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
  }
  .admin-pagination {
    margin: 5px 0;
    padding: 0;
  }
  .admin-pagination li {
    display: inline-block;
    min-width: 28px;
    text-align: center;
  }
  .admin-pagination li a {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    color: #757575;
    display: block;
    border: 1px solid #E2E0E0;
    border-radius: 3px;
    text-align: center;
    height: 30px;
    line-height: 28px;
    padding: 0 9px;
    text-decoration: none;
  }
  .admin-pagination li.next a, .admin-pagination li.prev a {
    background-color: var(--gray-1);
  }
  .admin-pagination li.selected {
    height: 30px;
    line-height: 28px;
    padding: 0 9px;
    border-radius: 3px;
    color: white;
    background: var(--brand-6);
    border: 1px solid var(--brand-6);
    cursor: auto;
  }
  li.next a:before, li.prev a:before {
    font-family: "armchem";
    display: block;
    font-size: 14px;
    height: 28px;
    color: var(--brand-6);
  }
  li.next a:before {
    content: "\e829";
  }
  li.prev a:before {
    content: "\e828";
  }
  .edit-image img {
    max-width: 250px;
    max-height: 250px;
  }
  .admin-prod-details {
    max-width: 750px;
  }
  .refine {
    display: none;
  }
  a.VertMenuItems.marked {
    display: block;
    font-weight: 500;
    padding: 4px 0;
    color: black;
    font-size: 15px;
  }
  .admin-oreder-top-line {
    float: left;
    width: 100%;
    padding: 7px 0 5px;
    border-bottom: 2px solid #ccc;
    /*border-top: 2px solid #ccc;*/
  }
  .admin-tracking {
    float: right;
  }
  .tracking-carrier {
    float: left;
    width: 152px;
    margin: 0 4px 0 0;
  }
  .order-status select,
  select.admin-select {
    height: 30px;
    width: 106px;
    border: 1px solid #cccccc;
    border-radius: 2px;
    margin-bottom: 3px;
  }
  .order-status select {
    width: 153px;
    font-weight: 500;
  }
  .tracking-left {
    float: left;
    width: 195px;
  }
  .admin-tracking input[type=text] {
    display: inline-block;
    box-sizing: border-box;
    outline: 0;
    width: 100%;
    margin-bottom: 3px;
    border-radius: 2px;
    padding: 0px 8px 0px 6px;
    background: #fff;
    border: 1px solid #cccccc;
    font-size: 14px;
    height: 30px;
    font-weight: 300;
    z-index: 1;
  }
  .admin-tracking input[type=text]:hover, .admin-tracking input[type=text]:focus {
    border-color: #006bb9;
  }
  .tracking-right {
    float: left;
    /*width: 400px;*/
    padding-left: 4px;
  }
  .tracking-right button {
    display: inline-block;
    padding: 0 11px;
  }
  .tracking-right span {
    color: red;
    font-size: 12px;
  }
  h4 {
    color: var(--brand-6);
    font-weight: 400;
    padding: 0 0 3px;
    margin: 8px 0;
    text-transform: uppercase;
  }
  .admin-top-block {
    float: left;
    width: 100%;
    margin: 10px 0;
  }
  .order-admin-title {
    float: left;
    width: 60%;
    font-size: 12px;
  }
  .order-admin-title span {
    color: red;
    font-size: 18px;
  }
  .order-admin-title span.placed {
    color: red;
    font-size: 14px;
  }
  .order-admin-sort {
    float: left;
    width: 40%;
    text-align: right;
  }
  .tracking-error {
    background-color: #fbe3e4;
    color: #96151b;
    display: block;
    margin: 0.75em 0;
    padding: 0.75em;
    text-align: center;
  }
  input.status {
    vertical-align: top;
  }
  .flash-alert {
    background-color: #fff6bf;
    color: #8c7800;
    display: block;
    margin: 0.75em 0;
    padding: 0.75em;
    text-align: center;
  }
  .flash-alert a {
    color: #594c00;
    text-decoration: underline;
  }
  .flash-alert a:focus, .flash-alert a:hover {
    color: black;
  }
  .flash-error {
    background-color: #fbe3e4;
    color: #96151b;
    display: block;
    margin: 0.75em 0;
    padding: 0.75em;
    text-align: center;
  }
  .flash-error a {
    color: #6a0f13;
    text-decoration: underline;
  }
  .flash-error a:focus, .flash-error a:hover {
    color: #110203;
  }
  .flash-notice {
    background-color: #e6effe;
    color: #0744ab;
    display: block;
    margin: 0.75em 0;
    padding: 0.75em;
    text-align: center;
  }
  .flash-notice a {
    color: #05317a;
    text-decoration: underline;
  }
  .flash-notice a:focus, .flash-notice a:hover {
    color: #010a18;
  }
  .flash-success {
    background-color: #e6efc2;
    color: #56651a;
    display: block;
    margin: 0.75em 0;
    padding: 0.75em;
    text-align: center;
  }
  .flash-success a {
    color: #333c10;
    text-decoration: underline;
  }
  .flash-success a:focus, .flash-success a:hover {
    color: black;
  }
  .orders-stats td {
    padding: 3px;
  }
  .orders-stats td a {
    text-decoration: underline;
  }
  .orders-stats tr.TableHead td span {
    font-weight: normal;
    color: #666;
  }
  .orders-stats td.orders-total {
    font-weight: 500;
    font-size: 15px;
    color: #000;
  }
  .tax-red {
    color: red;
    font-size: 17px;
  }
  .print-buttons {
    float: left;
    /*width:35%;*/
    min-width: 220px;
  }
  .print-buttons a {
    display: none;
  }
  .print-notes {
    display: inline-block;
    height: 32px;
    padding: 0 10px;
    box-sizing: border-box;
  }
  .print-notes span {
    display: inline-block;
    box-sizing: border-box;
    height: 32px;
    vertical-align: top;
  }
  .print-notes input {
    display: inline-block;
    box-sizing: border-box;
    padding: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    vertical-align: middle;
  }
  .send-invoice {
    float: right;
    width: 65%;
    text-align: right;
  }
  .send-invoice input[type=text] {
    display: inline-block;
    box-sizing: border-box;
    outline: 0;
    margin-bottom: 3px;
    border-radius: 2px;
    padding: 0px 8px 0px 6px;
    background: #fff;
    border: 1px solid #cccccc;
    font-size: 12px;
    height: 30px;
    font-weight: 300;
    z-index: 1;
    min-width: 190px;
  }
  .send-invoice .btn {
    vertical-align: top;
  }
  .order-status {
    float: left;
  }
  .admin-wholesale-prices td {
    text-align: center;
  }
  .btn--primary.product-save {
    padding: 14px 50px;
    font-size: 18px;
    position: fixed;
    bottom: 20px;
    right: 35px;
    text-transform: uppercase;
    opacity: 0.9;
  }
  .order-details-left {
    float: left;
    width: 49%;
  }
  .order-details-left .btn--primary {
    margin-bottom: 5px;
  }
  .order-details-left td {
    padding: 1px 0;
  }
  .order-details-right {
    float: right;
    width: 49%;
    border-left: 1px solid #ccc;
    padding-left: 10px;
  }
  .order-details-right td {
    padding: 0;
  }
  .order-details-right .sub-title {
    font-size: 15px;
    font-weight: 500;
    padding: 3px 0;
  }
  .sub-title.top {
    padding-top: 0;
  }
  .order-details-right td:last-child,
  .order-details-left td:last-child {
    font-weight: 500;
  }
  .order-details-left textarea,
  .order-details-right textarea {
    width: 95%;
    font-style: italic;
    font-size: 15px;
    color: red;
  }
  .SubHeader {
    width: 100%;
    color: var(--brand-6);
    font-size: 15px;
    font-weight: 500;
    padding: 6px 0 3px 7px;
    margin-bottom: 10px;
    text-transform: uppercase;
    background-color: var(--gray-1);
  }
  h3.SubHeader {
    margin: 5px 0;
    padding: 0px 8px;
    line-height: 34px;
    background-color: transparent;
  }
  .SubHeader-order {
    width: 100%;
    color: #777;
    font-size: 15px;
    font-weight: 500;
    padding: 3px 0;
    margin-bottom: 10px;
    text-transform: uppercase;
    border-bottom: 2px solid #ccc;
  }
  .SubHeader-order span {
    font-size: 14px;
    font-weight: 400;
    text-transform: lowercase;
  }
  .hotrush-list {
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    color: #e72543;
    background-color: var(--gray-1);
  }
  .mdl-data-table tbody td.order-list-date {
    text-align: center;
  }
  .order-details-left td.admin-order-total {
    font-size: 16px;
    font-weight: 500;
    border-top: 1px solid #ccc;
    padding: 10px 0;
  }
  .admin-var-name {
    display: grid;
    font-size: 13px;
    line-height: 1;
    background-color: var(--brand-1);
    padding-inline: 0.5rem;
    padding-block: 4px;
    border-radius: 0.5rem;
    margin-bottom: 3px;
  }
  .admin-var-name div:first-child {
    color: var(--gray-6);
  }
  .admin-var-name div:last-child {
    font-size: 14px;
    font-weight: 500;
    padding-top: 1px;
  }
  .admin-var-img {
    background-color: #fff;
    padding: 0;
    min-width: 85px;
  }
  .admin-var-img img {
    max-width: 85px;
    max-height: 85px;
  }
  .admin-var {
    --_padding-inline: 6px;
  }
  .admin-var th {
    font-weight: 500;
    white-space: nowrap;
  }
  .admin-var-wh-prices,
  .admin-var-hist-block {
    display: grid;
    justify-content: end;
    margin-right: 30px;
  }
  .admin-var-wh th,
  .admin-var-hist th,
  .var-parts th {
    font-weight: 500;
    width: fit-content;
    background-color: var(--brand-1);
  }
  .admin-var-wh th {
    min-width: 85px;
  }
  .admin-var-wh td,
  .admin-var-hist td,
  .var-parts td {
    font-weight: 500;
  }
  .var-parts td:nth-child(6), .var-parts td:nth-child(6), .var-parts td:nth-child(7), .var-parts td:nth-child(7) {
    background-color: var(--brand-1);
    border-right: 1px solid #fff;
  }
  .var-parts th:nth-child(6), .var-parts th:nth-child(6), .var-parts th:nth-child(7), .var-parts th:nth-child(7), .var-parts th.admin-var-parts-bold {
    background-color: var(--brand-2);
    border-right: 1px solid #fff;
  }
  .box-calculation {
    width: 500px;
    margin-bottom: 7px;
  }
  .box-calculation th {
    text-align: center;
  }
  .box-calculation.mdl-data-table th:last-of-type,
  .box-calculation.mdl-data-table th:first-of-type {
    text-align: center;
    padding-left: 5px;
    width: 70px;
  }
  .box-calculation td input {
    width: 100px;
  }
  .box-calculation td input.box-name {
    min-width: 180px;
  }
  .box-calculation td input.box-max {
    max-width: 50px;
  }
  .box-calculation td input.inp-small {
    width: 50px;
  }
  .box-calculation ~ div {
    width: 568px;
    text-align: center;
  }
  .box-calculation input[type=checkbox] {
    width: 30px;
    text-align: center;
  }
  /* NEW */
  .admin-order {
    display: flex;
    align-items: stretch;
    width: 100%;
  }
  .admin-order-customer {
    order: 2;
    -webkit-flex-basis: 260px;
    flex-basis: 260px;
    min-width: 260px;
    float: left;
    width: 100%;
    font-weight: 500;
    padding-left: 10px;
    box-sizing: border-box;
  }
  .bill-to,
  .ship-to {
    float: left;
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    box-sizing: border-box;
  }
  .order-details-left {
    flex-grow: 2;
    float: left;
    /*width: 100%;*/
    margin-top: 10px;
  }
  .order-details-left .btn--primary {
    margin-bottom: 5px;
  }
  .admin-order-details {
    float: left;
    width: 100%;
    /*padding:10px;*/
    box-sizing: border-box;
  }
  .admin-order-details .left-block {
    float: left;
    width: 50%;
  }
  .admin-order-details .right-block {
    float: left;
    width: 50%;
    margin-top: 0;
    padding-left: 0;
  }
  .order-products {
    float: left;
    width: 100%;
    margin-top: 10px;
    /*padding:10px;*/
    box-sizing: border-box;
  }
  .admin-order-notes {
    display: flex;
    float: left;
    width: 100%;
    margin-top: 20px;
    padding: 0;
    box-sizing: border-box;
  }
  .admin-order-notes div {
    -webkit-flex-basis: 50%;
    flex-basis: 50%;
    padding: 5px 0;
    font-size: 14px;
  }
  .admin-order-notes div.left {
    padding-right: 10px;
  }
  .sub-title.top {
    padding-top: 0;
  }
  .admin-order-notes textarea {
    width: 100%;
    font-style: italic;
    font-size: 15px;
    color: red;
  }
  .mdl-textfield__input {
    border: 1px solid #ccc;
    padding: 5px;
    box-sizing: border-box;
  }
  .admin-order-title {
    float: left;
    width: 100%;
    color: #006bb9;
    font-size: 15px;
    font-weight: 500;
    padding: 5px 0;
    margin-bottom: 5px;
    text-transform: uppercase;
  }
  .admin-order-customer .admin-order-title {
    border-bottom: 2px solid var(--gray-1);
  }
  .admin-order-title i {
    vertical-align: top;
  }
  .admin-order-title span {
    display: inline-block;
    padding-top: 2px;
  }
  .admin-order-title span.small {
    font-size: 12px;
    font-weight: 400;
    text-transform: lowercase;
  }
  .mdl-data-table tbody td.order-list-date {
    text-align: center;
  }
  .admin-field-sm input {
    width: 60px;
  }
  .FormButton.box-size {
    vertical-align: middle;
  }
  .red-span {
    color: red;
    font-weight: 500;
  }
  .admin-prod-title {
    white-space: initial;
  }
  .admin-prod-title span {
    color: red;
    font-weight: 500;
  }
  .admin-order-total {
    float: right;
    min-width: 220px;
  }
  .admin-order-total table {
    border-spacing: 0;
  }
  .mdl-data-table tbody .admin-order-total td {
    border: none;
    padding: 3px 0;
    height: auto;
  }
  .mdl-data-table tbody .admin-order-total td:first-of-type {
    padding-right: 10px;
  }
  .left-block td:first-of-type {
    width: 140px;
  }
  .left-block td:last-of-type {
    font-weight: 500;
  }
  .admin-order-total tr:last-of-type td {
    font-size: 16px;
    font-weight: 500;
    border-top: 2px solid #ccc;
    padding-top: 8px;
  }
  .admin-order-total tr td:last-of-type {
    font-weight: 500;
  }
  #dialog_message {
    position: relative;
  }
  #dialog_message a {
    position: absolute;
    right: 10px;
    top: 8px;
  }
  .right-block {
    margin-top: 83px;
    float: right;
    width: 30%;
    padding-left: 20px;
    box-sizing: border-box;
  }
  .left-block {
    float: left;
    width: 70%;
  }
  .eprice.mdl-data-table {
    width: 180px;
  }
  .mdl-data-table td.wh-shipping:last-of-type {
    text-align: center;
    font-weight: 500;
  }
  .eprice.mdl-data-table td:first-of-type, .eprice.mdl-data-table td:last-of-type {
    padding-left: 5px;
    padding-top: 5px;
  }
  .red-message-md {
    color: red;
    font-size: 16px;
  }
  .hotrush-list {
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    color: red;
    background-color: var(--gray-1);
    padding: 5px 5px;
    vertical-align: middle;
    line-height: 30px;
  }
  .hotrush-list i {
    font-size: 20px;
    font-weight: 500;
    color: #666;
    vertical-align: middle;
  }
  .hotrush-shipping {
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    color: red;
    background-color: #fff;
    padding: 5px 5px;
    vertical-align: middle;
    line-height: 30px;
  }
  .hotrush-shipping i {
    font-size: 20px;
    font-weight: 500;
    color: #666;
    vertical-align: middle;
  }
  .po-sent {
    width: 180px;
    padding: 5px 1px;
    font-family: Roboto, Arial, Helvetica, Sans-serif;
    font-size: 14px;
    letter-spacing: 0;
    font-weight: 500;
  }
  .sent-by {
    min-height: 48px;
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 400;
  }
  .sent-po-list span {
    color: #444;
    font-size: 11px;
    font-style: italic;
  }
  .sent-po-list {
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    color: red;
    background-color: #fff;
    padding: 4px 2px 2px;
  }
  .mdl-data-table tbody td.admin-orders-icon {
    text-align: center;
  }
  .admin-orders-icon .icon {
    color: #777;
    font-size: 18px;
    line-height: 1.5;
  }
  .admin-orders-icon span {
    display: inline-block;
    width: 26px;
    height: 26px;
    background: #fff;
    border-radius: 50%;
  }
  .admin-orders-icon .mdl-tooltip {
    font-size: 12px;
    font-weight: 400;
    font-style: italic;
    line-height: 18px;
    max-width: 570px;
  }
  /*SPINNER*/
  .sk-spinner-double-bounce.sk-spinner {
    width: 70px;
    height: 70px;
    position: relative;
    margin: 0 auto;
  }
  .sk-spinner-double-bounce .sk-double-bounce1,
  .sk-spinner-double-bounce .sk-double-bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #1c5094;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: sk-doubleBounce 2s infinite ease-in-out;
    animation: sk-doubleBounce 2s infinite ease-in-out;
  }
  .sk-spinner-double-bounce .sk-double-bounce2 {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
  }
  @-webkit-keyframes sk-doubleBounce {
    0%, 100% {
      -webkit-transform: scale(0);
      transform: scale(0);
    }
    50% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  }
  @keyframes sk-doubleBounce {
    0%, 100% {
      -webkit-transform: scale(0);
      transform: scale(0);
    }
    50% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  }
  .ibox-content > .sk-spinner,
  .ibox-content-order > .sk-spinner {
    display: none;
  }
  .ibox-content.sk-loading,
  .ibox-content-order.sk-loading {
    position: relative;
  }
  .ibox-content.sk-loading:after,
  .ibox-content-order.sk-loading:after {
    content: "";
    background-color: rgba(255, 255, 255, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
  }
  .ibox-content.sk-loading .sk-spinner,
  .ibox-content-order.sk-loading .sk-spinner {
    display: block;
    position: absolute;
    top: 30%;
    left: 0;
    right: 0;
    z-index: 2000;
  }
  .admin-stencil {
    float: left;
    width: 100%;
  }
  .admin-stencil h3 {
    color: red;
  }
  .stencil-email {
    float: left;
    width: calc(100% - 400px);
    padding: 15px 10px;
    min-height: 320px;
    box-sizing: border-box;
    margin: 15px 0;
  }
  .stencil-img {
    float: right;
    text-align: center;
    width: 370px;
    max-width: 370px;
    padding: 10px;
    margin: 15px 0;
  }
  .stencil-img img {
    max-height: 339px;
  }
  .form-group {
    padding: 5px 10px;
  }
  .form-group input[type=text],
  .form-group textarea {
    width: calc(100% - 150px);
  }
  .stencil-email .form-group label {
    width: 110px;
    font-weight: 500;
  }
  .custom-form .stencil-button {
    float: left;
    width: 100%;
    padding-left: 123px;
    box-sizing: border-box;
  }
  .stencil-button div {
    width: 30%;
    float: left;
  }
  .stencil-button div.left {
    width: 70%;
  }
  .stencil-saved {
    font-size: 12px;
    color: #999;
    padding-left: 5px;
  }
  .stencil-button div:last-child {
    text-align: right;
    padding-right: 9px;
    box-sizing: border-box;
  }
  .stencil-link {
    float: left;
    width: 100%;
    text-align: right;
  }
  .view-more:after {
    font-family: armchem;
    font-size: 12px;
    content: "\e80e";
    position: relative;
    top: 1px;
    left: 5px;
  }
  .mdl-textfield__input.stencil-search {
    border: none;
    border-bottom: 2px solid var(--brand-6);
    padding: 4px 0;
  }
  .stencil-history i {
    color: var(--brand-6);
  }
  .stencil-history .mdl-layout__header-row {
    padding: 30px 0;
  }
  .stencil-history .mdl-data-table th:first-of-type {
    padding: 3px 0 0 5px;
  }
  .stencil-history .mdl-data-table th:first-of-type i {
    font-size: 18px;
  }
  .stencil-history .mdl-textfield {
    padding: 10px 0;
  }
  .stencil-buttons {
    text-align: center;
    padding: 15px 0;
  }
  .stencil-buttons input {
    position: fixed;
    height: 50px;
    padding: 0 40px;
    border-radius: 3px;
    bottom: 30px;
    left: 50%;
    opacity: 0.6;
  }
  .stencil-buttons input:hover {
    opacity: 1;
  }
  /*PURCHASE ORDER*/
  .admin-po {
    float: left;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 25px 25px;
  }
  .admin-po .mdl-data-table tbody td {
    height: 30px;
    padding: 5px;
    box-sizing: border-box;
    text-align: left;
  }
  .admin-po input {
    width: 100%;
    box-sizing: border-box;
  }
  .admin-po th {
    font-weight: 500;
    text-align: center;
    color: #444;
  }
  .admin-po .mdl-data-table td:last-of-type, .admin-po .mdl-data-table th:last-of-type {
    text-align: center;
  }
  .admin-po .mdl-data-table td:last-of-type {
    padding: 5px;
  }
  .po-date-tab h1 {
    font-size: 36px;
    font-weight: 500;
  }
  .admin-po .w-full {
    width: 100%;
  }
  .admin-po .w-300 {
    width: 300px;
  }
  .admin-po .w-200 {
    width: 200px;
  }
  .admin-po .w-150 {
    width: 150px;
  }
  .admin-po .w-100 {
    width: 100px;
  }
  .admin-po .w-75 {
    width: 75px;
  }
  .admin-po .w-50 {
    width: 50px;
  }
  .admin-po .mdl-textfield__input {
    padding: 0;
    font-family: Roboto, Arial, Helvetica, Sans-serif;
    font-size: 13px;
    font-weight: 500;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  }
  .admin-po .mdl-textfield__label {
    color: rgba(0, 0, 0, 0.9);
    font-size: 13px;
    font-weight: 500;
    top: 10px;
    box-sizing: border-box;
  }
  .admin-po .mdl-textfield {
    /*width: 90%;*/
    font-size: 13px;
  }
  .po-vendor th {
    text-align: left;
    text-transform: uppercase;
    font-size: 15px;
  }
  .po-date-tab {
    text-align: right;
  }
  .po-date-tab .mdl-data-table {
    max-width: 250px;
  }
  h2.po-total {
    text-align: right;
  }
  .admin-po input[type=button],
  .admin-po input[type=submit] {
    width: 120px;
    color: #fff;
  }
  .order-top-buttons {
    float: left;
    width: 100%;
  }
  .mdl-tabs {
    float: left;
  }
  .mdl-tabs__tab-bar {
    margin-bottom: 10px;
  }
  .mdl-tabs.is-upgraded .mdl-tabs__tab.is-active {
    background-color: var(--gray-1);
  }
  .order-ups-tracking {
    float: left;
    width: 100%;
    margin-top: 30px;
  }
  .order-po-logo,
  .po-company {
    float: left;
  }
  .order-po-logo {
    padding: 20px 0 20px 25px;
  }
  .po-vendor {
    width: 90%;
    margin: 10px 0 20px;
  }
  .admin-po .mdl-data-table.po-vendor th:last-of-type,
  .admin-po .mdl-data-table.po-vendor td:last-of-type {
    text-align: left;
  }
  .admin-po .mdl-data-table.po-vendor th:last-of-type {
    padding-left: 11px;
  }
  .po-vendor textarea {
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    font-size: 14px;
    min-height: 170px;
    width: 100%;
    box-sizing: border-box;
    padding: 6px;
  }
  .mdl-data-table.po-products td,
  .mdl-data-table.po-products th {
    border-right: 1px solid #e0e0e0;
  }
  .po-total-tab td {
    vertical-align: top;
  }
  .po-total-tab td:first-of-type {
    width: 60%;
  }
  .po-date-tab input {
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  }
  .po-terms {
    width: 350px;
  }
  .admin-po .mdl-data-table.po-terms td {
    text-align: center;
  }
  .mdl-data-table.po-terms td select {
    padding: 5px 0;
  }
  /*PRINT PO*/
  .po-print-wrapper {
    width: 990px;
    margin: 10px auto;
  }
  .ship-charge {
    font-weight: 500;
    color: red;
    text-indent: -230px;
    display: inline-block;
    font-size: 14px;
  }
  .admin-order-details .red {
    color: red;
  }
  .cart-recovery.mdl-data-table tbody tr:hover {
    background-color: transparent;
  }
  .cart-recovery.mdl-data-table td:last-of-type {
    text-align: left;
  }
  .cart-recovery.mdl-data-table {
    white-space: normal;
    font-size: 13px;
  }
  .recovery-coupon {
    padding: 5px 0;
  }
  .cart-recovery.mdl-data-table .trumbowyg-box {
    margin: 5px auto;
  }
  .cart-recovery .stencil-buttons {
    margin-bottom: 5px;
  }
  .disabled {
    color: red;
    opacity: 0.4;
    font-style: italic;
  }
  .var-parts.mdl-data-table td:last-of-type {
    text-align: left;
  }
  .var-parts.mdl-data-table td:nth-child(2) {
    min-width: 100px;
    font-weight: 500;
  }
  .var-parts.mdl-data-table td:nth-child(3) {
    min-width: 350px;
    font-weight: 500;
  }
  .part-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    margin-top: 0.5rem;
  }
  .parts-admin {
    padding-left: 10px;
  }
  .wh-prices-add {
    position: fixed;
    left: 35%;
    bottom: 120px;
    background-color: white;
    border: 2px solid #ccc;
    width: 600px;
    padding: 15px;
  }
  .wh-var-button-block {
    vertical-align: top;
    text-align: center;
  }
  .wh-var-button-block input[type=button].product-save {
    color: #fff;
  }
  .wh-var-link {
    position: fixed;
    padding: 5px;
    bottom: 20px;
    left: 44%;
    background-color: #fff;
    box-shadow: 0px 0px 8px #535353;
  }
  .box-resize {
    margin-top: 10px;
    position: relative;
    width: 600px;
    height: 210px;
    overflow: hidden;
    min-height: 100px;
    min-width: 200px;
    max-width: 999px;
    max-height: 900px;
  }
  .box-resize select {
    width: 100%;
    height: calc(100% - 45px);
  }
  .boxheader {
    font-weight: 500;
    padding: 5px;
  }
  .apply-parts {
    display: flex;
    width: fit-content;
    gap: 0.5rem;
    font-weight: 500;
  }
  .win-size-grip {
    position: absolute;
    width: 16px;
    height: 16px;
    padding: 4px;
    bottom: 0;
    right: 0;
    cursor: nwse-resize;
    background: url(images/wingrip.png) no-repeat;
  }
  .option-list td {
    padding: 4px 3px;
  }
  .option-list td.DataTable {
    border-right: 1px solid #ccc;
  }
  .option-list-value input[type=file] {
    width: 180px;
  }
  input.color-picker {
    max-width: 100%;
  }
  .prod-variants {
    margin-top: 5px;
  }
  .prod-variants th {
    padding: 5px 3px;
    border-bottom: 2px solid #ccc;
    color: #999;
    font-weight: 500;
  }
  .prod-variants td.bold, .prod-variants td.bold input {
    font-weight: 500;
  }
  .prod-variants td img {
    max-width: 60px;
    max-height: 60px;
  }
  .prod-variants td i {
    color: #666;
    margin-top: 3px;
  }
  .prod-variants td.parts {
    text-align: center;
  }
  .prod-variants .admin-var-wh th {
    font-weight: 500;
    width: 60px;
    border: none;
    text-align: center;
  }
  .prod-variants .admin-var-wh th:last-child {
    width: 34px;
  }
  .prod-variants .admin-var-wh td {
    font-weight: 500;
    text-align: center;
    background-color: var(--gray-1);
    padding: 2px 3px;
  }
  .preorder-admin {
    white-space: normal;
  }
  .preorder-admin tr > td {
    font-size: 12px;
  }
  .preorder-admin tr > td:first-child {
    width: 35px;
  }
  .preorder-button {
    text-align: center;
  }
  .cdseo-wrapper .mdl-dialog {
    width: 600px;
    padding: 20px;
    margin-inline: auto;
    margin-block: auto;
    border-radius: 1rem;
  }
  .cdseo-wrapper .mdl-dialog h5 {
    font-size: 1.2rem;
    color: var(--primary);
  }
  .cdseo-wrapper .mdl-dialog .mdl-dialog__content {
    display: grid;
    grid-template-columns: 100px 1fr;
  }
  .cdseo-wrapper .mdl-dialog .mdl-dialog__content.cdseo-settings {
    grid-template-columns: 110px 1fr;
  }
  .cdseo-wrapper .mdl-dialog .mdl-dialog__title {
    padding: 0;
    margin: 0;
    font-size: 1.2rem;
    text-align: center;
  }
  .cdseo-wrapper .mdl-dialog .mdl-dialog__content {
    padding: 10px 0;
  }
  .cdseo-wrapper .mdl-dialog .mdl-dialog__actions {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1rem;
  }
  .cdseo-wrapper .mdl-dialog .cdseo-menu {
    float: left;
    text-align: center;
    width: 100%;
    margin: 10px 0;
  }
  .cdseo-wrapper .mdl-dialog .dt-but-summary {
    position: absolute;
    top: 24px;
    right: -6px;
  }
  .cdseo-wrapper .mdl-dialog .dt-but-summary .buttons-excel {
    background-color: transparent;
    padding: 0;
  }
  .cdseo-wrapper .mdl-dialog .dataTables_info {
    margin-bottom: 10px;
  }
  .dataTables_wrapper .dataTables_paginate .paginate_button:hover a {
    color: #fff;
  }
  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled a {
    color: #666 !important;
  }
  .dataTables_wrapper .dataTables_paginate .paginate_button.active {
    background-color: var(--gray-1);
    color: #000;
  }
  .container {
    width: 800px;
    height: 800px;
    display: inline-block;
    border: 1px solid var(--gray-1);
    background: #ffffff;
    color: #333333;
    float: left;
    margin: 10px;
  }
  .admin-stl-edit-block {
    background-color: #fff;
    box-sizing: border-box;
    padding: 15px;
    overflow: hidden;
  }
  .container-left {
    display: grid;
    grid-gap: 10px;
  }
  #block1 {
    border: solid black 1px;
    height: 300px;
    width: 300px;
    display: inline-block;
    float: left;
  }
  .resizable {
    background-position: top left;
    width: 150px;
    height: 150px;
    padding: 0;
    border: 1px solid #999;
    background: rgba(0, 0, 0, 0.2);
    font-weight: normal;
    color: #ffffff;
    position: relative;
  }
  .table-block {
    display: table;
  }
  .table-row {
    display: table-row;
    text-align: center;
  }
  .table-cell {
    width: 50%;
    display: inline-block;
  }
  .table-input {
    width: 50px;
  }
  .drag-container-1,
  .drag-container-2 {
    width: 100%;
    height: 40px;
    line-height: 40px;
    background: rgba(0, 0, 0, 0.4);
    color: white;
    text-align: center;
    cursor: move;
  }
  .table-container {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  #datepickerButton,
  .datepickerButton {
    position: relative;
    right: 32px;
    top: -1px;
    display: inline-block;
    cursor: pointer;
  }
  .bulk-price-update {
    display: grid;
    justify-items: center;
    margin-bottom: 5px;
  }
  .bulk-price-update table table#wp_table {
    background-color: var(--gray-1);
    padding: 2px;
  }
  .bulk-price-update table table#wp_table td {
    padding: 6px;
  }
  .admin-subtitle {
    border-bottom: 2px solid var(--gray-3);
    color: var(--brand-6);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 18px;
  }
  .admin-subtitle a {
    text-transform: none;
    font-size: 14px;
  }
  .detaled-desc-block {
    flex-grow: 1;
    display: grid;
    grid-template-columns: 1fr 191px;
    align-items: top;
    grid-gap: 0.5rem;
  }
  .admin-description {
    display: inline-block;
  }
  .description-help {
    display: inline-block;
  }
  .admin-static-pages {
    width: 100%;
  }
  .admin-static-pages textarea {
    width: 80%;
  }
  .red-text {
    color: #e72543;
    font-weight: 500;
  }
  .tooltip-item {
    background: white;
    display: block;
    vertical-align: top;
  }
  @media (min-width: 512px) {
    .tooltip-item {
      display: inline-block;
    }
  }
  .tooltip-item {
    padding: 0;
    position: relative;
    text-align: left;
  }
  .tooltip-item:focus, .tooltip-item:hover .tooltip {
    opacity: 1;
    visibility: visible;
  }
  .tooltip-item i {
    font-size: 22px;
    color: #999999;
    cursor: pointer;
  }
  .tooltip-item .tooltip {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 3em;
  }
  @media (min-width: 512px) {
    .tooltip-item .tooltip {
      right: -135px;
      left: -135px;
    }
  }
  .tooltip-item .tooltip {
    background-color: white;
    background: #fff;
    border-radius: 3px;
    border: 1px solid #dddddd;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
    color: #424242;
    font-size: 0.9em;
    line-height: 1.5em;
    margin: 0 auto;
    max-width: 16em;
    min-width: 200px;
  }
  .tooltip-item .tooltip {
    opacity: 0;
    padding: 1em;
    text-align: left;
    transition: all 0.2s ease-in-out;
    visibility: hidden;
    z-index: 1000;
  }
  .tooltip-item .tooltip p {
    color: #424242;
    line-height: 1.5;
    margin: 0;
    padding: 10px 0;
    font-size: 14px;
    font-weight: 500;
  }
  .tooltip-item .tooltip p i {
    font-size: 16px;
  }
  .tooltip-item .tooltip::after {
    position: absolute;
    right: 0;
    left: 0;
    border: 8px solid transparent;
    bottom: -1.3em;
    color: white;
    content: "▼";
    font-size: 1.4em;
    margin-left: 8px;
    text-align: center;
    text-shadow: 0 2px 2px silver;
  }
  .admin-product-details .tooltip-item .tooltip {
    max-width: none;
    width: 900px;
  }
  .admin-product-details .tooltip-item .tooltip img {
    max-width: 900px;
    max-height: 450px;
  }
  .art-libraries-list .rows, .art-libraries-list .row {
    display: contents;
  }
  .art-libraries-list label, .art-libraries-list .c {
    display: inline-block;
    text-align: center;
  }
  .art-libraries-list .row {
    display: grid;
    grid-template-columns: 300px 50px 50px 95px 95px auto;
    grid-gap: 10px;
    align-items: center;
    list-style: none;
    padding: 7px;
  }
  .art-libraries-list .row.item:nth-child(odd) {
    background-color: var(--gray-1);
  }
  .art-libraries-list .memberships > * {
    display: inline-block;
    width: 95px;
  }
  .art-libraries-list .btn {
    aspect-ratio: 1/1;
  }
  #gallery li {
    list-style: none;
    float: left;
    display: grid;
    grid-gap: 10px;
    grid-template-rows: 1fr 30px;
    align-items: center;
    justify-items: center;
    text-align: center;
    border: 1px solid var(--gray-1);
    margin: 2px;
  }
  #gallery li img {
    max-width: 100px;
    min-width: 100px;
    max-height: none;
    margin: 0;
  }
  .listTag_problem, ul.qlinks .listTag_problem {
    background-color: var(--clr-red);
    color: white;
  }
  .listTags.inTable {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: end;
  }
  .listTags span {
    display: inline-block;
    padding: 0.25em 0.5em;
    font-size: 13px;
    border-radius: 5px;
  }
  .listTags span:not(.listTag_problem) {
    background-color: var(--gray-2);
  }
  .stencilAreaSettings > div {
    display: inline-block;
    vertical-align: top;
  }
  .stencilAreaSettings .stencilAreaImage {
    text-align: center;
    width: 10em;
  }
  .stencilAreaSettings .stencilAreaImage img {
    display: block;
    margin: 0 auto 1em auto;
  }
  .stencilAreaSettings .stencilAreaForm label {
    display: block;
    margin-bottom: 0.25em;
  }
  .stencilAreaSettings .stencilAreaForm label > span {
    display: inline-block;
    width: 15em;
  }
  .admin-stencil-settings td:first-child {
    max-width: 8em;
  }
  .table-wrapper {
    margin: 20px 0;
  }
  .button-wrapper {
    margin: 10px 0;
  }
  .button-wrapper.right {
    text-align: right;
  }
  .rwd-table {
    margin: auto;
    min-width: 300px;
    max-width: 100%;
    border-collapse: collapse;
  }
  .rwd-table tr:first-child {
    border-top: none;
    background: #0069c0;
    color: #fff;
  }
  .rwd-table tr {
    border-top: 1px solid var(--gray-1);
    border-bottom: 1px solid var(--gray-1);
  }
  .rwd-table tr:nth-child(odd):not(:first-child) {
    background-color: #ebf3f9;
  }
  .rwd-table th {
    display: none;
  }
  .rwd-table td {
    display: block;
  }
  .rwd-table td input {
    font-size: 14px;
    font-weight: 500;
  }
  .rwd-table td:first-child {
    margin-top: 0.5em;
  }
  .rwd-table td:last-child {
    margin-bottom: 0.5em;
  }
  .rwd-table td:before {
    content: attr(data-th) ": ";
    font-weight: bold;
    width: 120px;
    display: inline-block;
    color: #000;
  }
  .rwd-table th,
  .rwd-table td {
    text-align: left;
  }
  .rwd-table {
    color: #333;
    border-radius: 0.4em;
    overflow: hidden;
  }
  .rwd-table tr {
    border-color: #bfbfbf;
  }
  .rwd-table th,
  .rwd-table td {
    padding: 0.5em 1em;
    box-sizing: border-box;
  }
  @media screen and (max-width: 601px) {
    .rwd-table tr:nth-child(2) {
      border-top: none;
    }
  }
  @media screen and (min-width: 600px) {
    .rwd-table tr:hover:not(:first-child) {
      background-color: #d8e7f3;
    }
    .rwd-table td:before {
      display: none;
    }
    .rwd-table th,
    .rwd-table td {
      display: table-cell;
      padding: 0.25em 0.5em;
    }
    .rwd-table th:first-child,
    .rwd-table td:first-child {
      padding-left: 0;
    }
    .rwd-table th:last-child,
    .rwd-table td:last-child {
      padding-right: 0;
    }
    .rwd-table th,
    .rwd-table td {
      padding: 0.6em;
    }
  }
  .swal-content .design-selector {
    max-height: 60vh;
    overflow-y: scroll;
    text-align: left;
  }
  .swal-content .design-selector .design-container {
    vertical-align: top;
    display: inline-block;
    width: 30%;
    border: 1px solid silver;
    margin: 5px;
    padding-bottom: 10px;
    text-align: center;
  }
  .swal-content .design-selector .design-container button {
    width: 100px;
  }
  .promo-banner {
    margin-top: 20px;
  }
  .promo-banner textarea {
    width: 80%;
    min-height: 80px;
  }
  select[name="isay_taxcloud_states[]"] {
    width: 220px;
    height: 300px;
  }
  .product-details,
  .top-notes,
  .bundle-top {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--clr-text-3);
  }
  .product-details .sub-title,
  .product-details .product-sub-title,
  .product-details h4,
  .top-notes .sub-title,
  .top-notes .product-sub-title,
  .top-notes h4,
  .bundle-top .sub-title,
  .bundle-top .product-sub-title,
  .bundle-top h4 {
    font-size: clamp(1rem, 0.9rem + 0.4vi, 1.25rem);
    font-family: var(--ff-base);
    font-weight: 500;
    color: var(--clr-text-2);
    margin-bottom: 0;
    text-transform: none;
  }
  .product-details h3,
  .top-notes h3,
  .bundle-top h3 {
    font-size: clamp(1.25rem, 1.15rem + 0.4vi, 1.5rem);
    color: var(--clr-text-4);
    font-weight: 500;
    margin-bottom: 0;
    color: var(--clr-primary);
  }
  .product-details ul,
  .top-notes ul,
  .bundle-top ul {
    padding-left: 1.5rem;
  }
  .product-details ul li,
  .top-notes ul li,
  .bundle-top ul li {
    border: 0;
    font-size: inherit;
    color: var(--clr-text-3);
    padding-block: 4px;
    list-style: none;
  }
  .product-details ul li:before,
  .top-notes ul li:before,
  .bundle-top ul li:before {
    font-family: armchem;
    content: "\e872";
    color: #0069c0;
    padding-right: 10px;
  }
  .product-details ul.no-list-style li,
  .top-notes ul.no-list-style li,
  .bundle-top ul.no-list-style li {
    list-style: none;
  }
  .product-details ol,
  .top-notes ol,
  .bundle-top ol {
    list-style-type: decimal;
    padding-left: 1.5rem;
  }
  .product-details i,
  .top-notes i,
  .bundle-top i {
    padding-right: 7px;
  }
  .product-details b,
  .top-notes b,
  .bundle-top b {
    font-weight: 500;
  }
  .product-details p,
  .top-notes p,
  .bundle-top p {
    margin-bottom: 0;
  }
  .product-details .bundle-notes,
  .product-details .info,
  .top-notes .bundle-notes,
  .top-notes .info,
  .bundle-top .bundle-notes,
  .bundle-top .info {
    font-style: italic;
    font-size: 14px;
    margin-block: 0.5rem;
  }
  .product-details .bundle-notes:before,
  .product-details .info:before,
  .top-notes .bundle-notes:before,
  .top-notes .info:before,
  .bundle-top .bundle-notes:before,
  .bundle-top .info:before {
    font-family: armchem;
    content: "\e897";
    font-style: normal;
    font-size: 20px;
    color: #0069c0;
    padding-right: 5px;
  }
  .choose-product-wrapper h2 {
    font-size: 1.5rem;
    font-weight: 400;
  }
  .choose-product-wrapper {
    padding-inline: 1rem;
  }
  .choose-product-wrapper .grid-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  .choose-product-wrapper .popup-bookmarks {
    display: flex;
  }
  .admin-part-search-wrapper {
    --form-height: 40px;
    --btn-height: var(--form-height);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  .admin-part-search-wrapper .part-search {
    position: relative;
    display: grid;
  }
  .admin-part-search-wrapper .part-search label {
    position: absolute;
    top: -7px;
    left: 12px;
    z-index: 2;
    padding-inline: 4px;
    background-color: #fff;
    font-size: 12px;
    text-transform: none;
    color: var(--gray-5);
    z-index: 10;
  }
  .admin-part-search-wrapper .part-search select {
    min-width: 100px;
  }
  .freeze-table-container {
    max-height: calc(100vh - 332px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
    scrollbar-color: var(--brand-6);
    display: inline-block;
    width: 100%;
  }
  .parts-table {
    --_padding-inline: 5px;
  }
  .parts-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    color: #fff;
    background-color: var(--gray-6);
  }
  .parts-table i {
    font-size: 1rem;
    color: var(--gray-5);
    cursor: pointer;
  }
  .parts-table input:not([type=checkbox],
  [type=radiobox]) {
    width: 100%;
  }
  .parts-table.mdl-data-table td {
    padding: 2px;
    text-align: center;
  }
  .parts-table .parts-small-input input {
    max-width: 50px;
  }
  .admin-navigation {
    display: flex;
    gap: 3px;
    align-items: center;
    justify-self: end;
    margin-top: 5px;
  }
  .admin-navigation a {
    display: grid;
    place-items: center;
    width: 32px;
    aspect-ratio: 1/1;
    border-radius: 5px;
    background-color: var(--gray-2);
    color: var(--gray-7);
  }
  .admin-navigation span {
    display: grid;
    place-items: center;
    width: 32px;
    aspect-ratio: 1/1;
    border-radius: 5px;
    background-color: var(--brand-6);
    color: #fff;
  }
  .close-open-filters {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-block: 3px;
  }
  .close-open-filters img {
    width: 22px;
  }
  .admin-filters-wrapper {
    display: grid;
    gap: 0.3rem;
    margin-block: 0.5rem;
  }
  .admin-filters-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .admin-filters-item label {
    cursor: pointer;
    text-transform: none;
    font-size: 0.875rem;
  }
  .tables {
    border-collapse: separate;
    border-left: 0px;
    border-spacing: 0;
    border: 1px solid rgb(90%, 90%, 90%);
    width: 100%;
  }
  .tables tbody {
    background-color: #fff;
  }
  .tables tbody td {
    border-bottom: 0px;
    border-left: 1px solid rgb(90%, 90%, 90%);
    border-top: 1px solid rgb(90%, 90%, 90%);
    padding: 1em;
  }
  .tables tbody td:first-child {
    border-left: none;
  }
  .tables tbody td a {
    color: #424242;
  }
  .tables tr:hover > td, .tables tr:hover > th {
    background-color: rgb(95%, 95%, 95%);
  }
  .tables tr:nth-child(even) {
    background-color: rgb(98%, 98%, 98%);
  }
  .tables tr:nth-child(even):hover > td {
    background-color: rgb(95%, 95%, 95%);
  }
  .admin-product-details {
    --_form-height: 36px;
    --product-row-height: 36px;
  }
  .admin-product-details.form-wrapper-inner {
    gap: 2px;
  }
  .admin-product-details .admin-extra-fields {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .admin-product-details .ProductDetails {
    align-items: center;
  }
  .admin-product-details .mdl-tooltip {
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    white-space: initial;
  }
  .admin-product-section-2 {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 2rem;
  }
  .admin-product-section-2 > div {
    display: grid;
    grid-auto-rows: max-content;
    gap: 2px;
  }
  .admin-product-section-2 .admin-product-block {
    display: grid;
    grid-auto-rows: max-content;
    gap: 2px;
  }
  .admin-product-row-title .admin-subtitle {
    line-height: 1.5;
    margin-block: 1rem;
  }
  .admin-product-row {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 0.5rem;
    align-items: center;
    min-height: var(--product-row-height);
  }
  .admin-product-row:has(.admin-multiple) {
    grid-template-columns: var(--product-row-height) 240px 1fr;
  }
  .admin-product-row.full-width {
    grid-template-columns: 1fr;
  }
  .admin-product-row.full-width.with-image {
    grid-template-columns: 1fr 250px;
  }
  .admin-product-row.full-width.with-image > div {
    display: grid;
    gap: 2px;
  }
  .admin-product-row label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-transform: none;
    font-size: 14px;
    font-weight: 400;
  }
  .admin-product-row a {
    display: inline-block;
  }
  .admin-product-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .admin-product-form input[type=checkbox] {
    margin: 0;
  }
  .admin-product-form select {
    min-width: 70px;
  }
  .admin-product-form .lg-input {
    width: 80% !important;
  }
  .admin-product-form .filters {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .admin-multiple {
    display: grid;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: var(--product-row-height);
  }
  .admin-multiple input {
    margin: 0;
  }
  .admin-multiple:has(input) {
    background-color: var(--gray-2);
  }
  .admin-product-notes {
    padding: 5px;
    background-color: var(--gray-2);
    width: fit-content;
  }
  .tooltip-help {
    display: grid;
    grid-template-columns: 1fr 50px;
    align-items: center;
    justify-items: start;
  }
  .tooltip-help i {
    color: #999;
  }
  .tooltip-help i:before {
    margin: 0;
  }
  .admin-btn-block {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }
  .admin-btn-block :first-child {
    flex-grow: 1;
  }
  .admin-img-upload {
    --_form-height: 36px;
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }
  .admin-img-upload input {
    max-width: 45px;
  }
  .upload-block {
    --_form-height: 36px;
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }
  .upload-block :first-child {
    flex-grow: 1;
  }
  ul.qlinks {
    list-style: none;
    padding-block: 5px;
    padding-inline-start: 0;
  }
  ul.qlinks li {
    background-color: var(--brand-1);
    display: inline-block;
    cursor: pointer;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 5px;
    white-space: nowrap;
  }
  .stencil-options-wrapper,
  .add-option-wrapper {
    display: grid;
    min-width: 600px;
    grid-template-columns: 225px 50px 1fr;
    align-items: center;
    gap: 10px;
    max-width: 35rem;
  }
  .stencil-options-wrapper label,
  .add-option-wrapper label {
    font-weight: 500;
  }
  .stencil-options-wrapper i,
  .add-option-wrapper i {
    margin-top: 4px;
    color: #999;
  }
  .stencilAreaSettings {
    display: grid;
    grid-template-columns: 140px 1fr 2fr;
    place-items: center;
    gap: 10px;
    padding: 10px 0;
    margin-block: 10px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  }
  .stencilAreaSettings img {
    max-width: 200px;
    max-height: 200px;
  }
  .stencilAreaSettings .area-index-block {
    display: grid;
    gap: 10px;
    place-items: center;
    font-weight: 500;
  }
  .stencilAreaSettings .area-index {
    font-size: 2rem;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 2px solid #ccc;
    border-radius: 50%;
    line-height: 1.1;
  }
  .stencilAreaSettings .stencilAreaForm {
    display: grid;
    gap: 5px;
    justify-self: left;
    align-items: center;
  }
  .stencilAreaSettings .stencilAreaForm > div {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 10px;
    align-items: center;
  }
  .stencilAreaSettings .stencilAreaForm > div .chosen-choices {
    font-size: 13px;
    color: #000;
    margin: 0;
    padding: 1px 5px;
    border-radius: 5px;
    overflow: hidden;
    border: 2px solid rgba(0, 0, 0, 0.34);
    box-shadow: none;
    background-image: none;
  }
  .stencilAreaSettings .stencilAreaForm label {
    font-weight: 500;
  }
  .options-button-row {
    margin-block: 0.5rem;
  }
  .plus-minus-block {
    display: inline-flex;
    width: 100%;
    justify-content: center;
  }
  .plus-minus-block i {
    font-size: 1.1rem;
    color: var(--gray-5);
  }
  .plus-minus-block i:hover {
    color: var(--gray-7);
  }
  .add-option-wrapper {
    margin-bottom: 0.7rem;
  }
  .add-option-wrapper input[type=text] {
    width: 20rem;
  }
  .option-top-block {
    display: grid;
    grid-template-columns: 1fr 350px;
  }
  .picturebox-block {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .picturebox-block i {
    font-size: 20px;
    color: var(--gray-5);
  }
  .inputs-table.mdl-data-table td,
  .inputs-table td {
    padding: 4px 6px;
    height: unset;
  }
  .inputs-table textarea {
    --form-min-width: 200px;
  }
  .color-box-pallete {
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .option-list td {
    padding: 2px 4px;
  }
  /* COLOR PICKER */
  .palette-color-picker-button {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 28px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="#f5c86c" d="M2 2h8v8H2z"/><path fill="#f56c6c" d="M12 2h8v8h-8z"/><path fill="#f46ac6" d="M22 2h8v8h-8z"/><path fill="#c3f167" d="M2 12h8v8H2z"/><path fill="#f3f3f3" d="M12 12h8v8h-8z"/><path fill="#c76cf5" d="M22 12h8v8h-8z"/><path fill="#69e369" d="M2 22h8v8H2z"/><path fill="#6bc6f4" d="M12 22h8v8h-8z"/><path fill="#6b6bf5" d="M22 22h8v8h-8z"/><path d="M9 3v6H3V3h6m1-1H2v8h8V2zm9 1v6h-6V3h6m1-1h-8v8h8V2zm9 1v6h-6V3h6m1-1h-8v8h8V2zM9 13v6H3v-6h6m1-1H2v8h8v-8zm9 1v6h-6v-6h6m1-1h-8v8h8v-8zm9 1v6h-6v-6h6m1-1h-8v8h8v-8zM9 23v6H3v-6h6m1-1H2v8h8v-8zm9 1v6h-6v-6h6m1-1h-8v8h8v-8zm9 1v6h-6v-6h6m1-1h-8v8h8v-8z" opacity=".25"/></svg>') center center no-repeat;
    background-size: cover;
    /*background: url(palette-color-picker-icon.svg) center center no-repeat;*/
    cursor: pointer;
    -webkit-box-shadow: 0 0 0 1px #bbb;
    box-shadow: 0 0 0 1px #bbb;
    /*outline: 1px solid $cpfp-border;*/
    border: 2px solid #fff;
  }
  .palette-color-picker-button.admin-yellow-black {
    background: linear-gradient(45deg, black 0% 50%, var(--clr-yellow-500) 50% 100%);
  }
  .palette-color-picker-button.admin-red-black {
    background: linear-gradient(45deg, black 0% 50%, var(--clr-red-500) 50% 100%);
  }
  .palette-color-picker-button.admin-white-black {
    background: linear-gradient(45deg, black 0% 50%, white 50% 100%);
  }
  .palette-color-picker-button.admin-custom-palette {
    background: radial-gradient(yellow 0%, lightblue 30%, blue 50%, blueviolet 62%);
  }
  .palette-color-picker-button.admin-none-option {
    background-color: transparent;
  }
  .palette-color-picker-button.admin-none-option::before {
    content: "";
    position: absolute;
    width: 32px;
    height: 3px;
    top: 10px;
    right: -4px;
    transform: rotate(-45deg);
    background-color: var(--gray-6);
    z-index: 1;
  }
  .palette-color-picker-button.admin-none-option::after {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    left: 0px;
    border: 1px solid var(--gray-6);
    z-index: 1;
  }
  .palette-color-picker-bubble {
    display: none;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin: 12px 0;
    position: absolute;
    bottom: 100%;
    min-width: 240px;
    padding: 0.5rem;
    border: var(--base-border-2);
    border-radius: 3px;
    background-color: #fff;
    z-index: 10;
  }
  .palette-color-picker-bubble:after, .palette-color-picker-bubble:before {
    top: 100%;
    left: 14px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }
  .palette-color-picker-bubble:after {
    border-color: transparent;
    border-top-color: #fff;
    border-width: 8px;
    margin-left: -8px;
  }
  .palette-color-picker-bubble:before {
    border-color: transparent;
    border-top-color: #bbb;
    border-width: 9px;
    margin-left: -9px;
  }
  .palette-color-picker-bubble.downside {
    bottom: auto;
    top: 100%;
  }
  .palette-color-picker-bubble.downside:after, .palette-color-picker-bubble.downside:before {
    top: auto;
    bottom: 100%;
  }
  .palette-color-picker-bubble.downside:after {
    border-top-color: transparent;
    border-bottom-color: #fff;
  }
  .palette-color-picker-bubble.downside:before {
    border-top-color: transparent;
    border-bottom-color: #bbb;
  }
  .palette-color-picker-bubble .swatch {
    position: relative;
    display: inline-block;
    font: 0/0;
    width: 28px;
    aspect-ratio: 1/1;
    padding-top: 11%;
    margin: 1% 2%;
    outline: 1px solid #bbb;
    border: 2px solid #fff;
    border-radius: 3px;
    cursor: pointer;
    overflow: hidden;
  }
  .palette-color-picker-bubble .swatch.admin-yellow-black {
    background: linear-gradient(45deg, black 0% 50%, var(--clr-yellow-500) 50% 100%);
  }
  .palette-color-picker-bubble .swatch.admin-red-black {
    background: linear-gradient(45deg, black 0% 50%, var(--clr-red-500) 50% 100%);
  }
  .palette-color-picker-bubble .swatch.admin-white-black {
    background: linear-gradient(45deg, black 0% 50%, white 50% 100%);
  }
  .palette-color-picker-bubble .swatch.admin-custom-palette {
    background: radial-gradient(yellow 0%, lightblue 30%, blue 50%, blueviolet 62%);
  }
  .palette-color-picker-bubble .swatch.admin-none-option {
    background-color: transparent;
  }
  .palette-color-picker-bubble .swatch.admin-none-option::before {
    content: "";
    position: absolute;
    width: 39px;
    height: 4px;
    top: 10px;
    left: -6px;
    transform: rotate(-45deg);
    background-color: var(--gray-6);
    z-index: 1;
  }
  .palette-color-picker-bubble .swatch.admin-none-option::after {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    border: 1px solid var(--gray-6);
    z-index: 1;
  }
  .palette-color-picker-bubble .swatch.active {
    outline-color: #000;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
  }
  .palette-color-picker-bubble .swatch.clear {
    background-color: #fff;
  }
  .palette-color-picker-bubble .swatch.clear:before {
    position: absolute;
    content: "";
    display: block;
    top: -1px;
    left: 0;
    width: 100px;
    height: 2px;
    background-color: #e00;
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .palette-color-picker-bubble.double .swatch {
    width: 29.3%;
    padding-top: 11%;
    margin: 1% 2%;
  }
  .palette-color-picker-bubble.double .swatch.clear:before {
    -webkit-transform: rotate(22.5deg);
    -ms-transform: rotate(22.5deg);
    transform: rotate(22.5deg);
  }
  .palette-color-picker-bubble.wide .swatch {
    width: 96.2%;
    padding-top: 11%;
    margin: 1% 2%;
  }
  .palette-color-picker-bubble.wide .swatch.clear {
    width: 12.66%;
  }
  .palette-color-picker-bubble.force-left {
    left: -178px;
  }
  .palette-color-picker-bubble.force-left:after, .palette-color-picker-bubble.force-left:before {
    left: 188px;
  }
  .imginfo img {
    max-width: 1080px;
  }
  .admin-static-menu {
    display: flex;
    gap: 0.3rem;
    align-items: center;
    margin-bottom: 1rem;
  }
  .admin-static-menu > * {
    display: grid;
    padding: 5px 12px;
    background-color: var(--gray-1);
    border-radius: 5px;
  }
  .admin-static-title {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 10px;
  }
  .login-wrapper {
    display: grid;
  }
  .admin-filters-wrapper input[type=checkbox][data-readonly] {
    background-color: #eee;
  }
  .admin-filters-wrapper input[type=checkbox][data-readonly]::before {
    color: #999;
  }
  .admin-filters-wrapper label .num {
    color: darkgray;
  }
  .admin-filters-wrapper label .total {
    display: none;
  }
  .admin-filters-wrapper label[data-dirty] .lbl {
    font-weight: bold;
  }
  .admin-filters-wrapper label[data-dirty] .num {
    color: unset;
  }
  .admin-filters-wrapper label[data-dirty] .num .initial {
    color: darkgray;
  }
  .admin-filters-wrapper label[data-dirty] .num .initial span {
    text-decoration: line-through;
    text-decoration-color: darkgray;
  }
  .admin-filters-wrapper label[data-dirty][data-state=all] .total {
    display: unset;
  }
  .admin-filters-wrapper label[data-dirty][data-state=all] .initial::after {
    content: " → ";
    text-decoration: none;
  }
  .admin-filters-wrapper label[data-dirty][data-state=none] .initial::after {
    content: " → 0";
    text-decoration: none;
  }
  .ban-sizes.red {
    background-color: var(--clr-red-500);
    color: #fff;
    padding: 5px 10px;
    font-size: 1.2rem;
    font-weight: 500;
    display: inline-block;
    margin: 5px;
  }
  a.link {
    background: linear-gradient(to bottom, var(--brand-1) 0%, var(--brand-1) 100%);
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 2px 2px;
    color: var(--brand-8);
    text-decoration: none;
    transition: all 0.25s ease;
  }
  a.link:hover {
    background-size: 4px 50px;
    color: var(--gray-9) !important;
  }
  .admin-problem-products ul {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
  }
  .admin-problem-products ul li {
    list-style: none;
  }
  .admin-top-sellers td {
    vertical-align: top;
  }
  .flex-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  .cdseo-missed {
    padding: 1rem;
  }
  .button-block {
    margin-block: 1rem;
  }
  .faq-admin-button-block {
    display: grid;
    width: 100%;
    justify-items: stretch;
    grid-template-columns: 1fr 1fr;
  }
  .faq-admin-button-block input:nth-child(2) {
    justify-self: end;
  }
  .admin-faq-wrapper .form-float-labels {
    display: grid;
    grid-template-columns: 1fr 80px 65px 100px 300px;
  }
  .admin-faq-wrapper .faq-block {
    display: grid;
    gap: 0.3rem;
  }
  .admin-faq-wrapper .faq-block div {
    position: relative;
  }
  .admin-faq-wrapper .faq-block div:first-child textarea {
    --textarea-height: 3.2rem;
  }
  .admin-faq-wrapper .faq-block div:last-child textarea {
    --textarea-height: 11.5rem;
  }
  .admin-faq-wrapper table {
    border-collapse: separate;
    border-spacing: 0 1rem;
  }
  .admin-faq-wrapper td .form-float-labels {
    padding-top: 1rem;
  }
  .admin-faq-wrapper select {
    --form-max-width:300px;
    --form-height: 200px;
  }
  /* Stencil image library: location libraries (Towne location QR project, 2026-09) */
  .library-settings {
    margin: 1rem 0 0;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #f6f6f6;
  }
  .library-settings label {
    display: block;
    font-size: 14px;
    margin-bottom: 8px;
  }
  .library-settings label input[type=text], .library-settings label select {
    display: block;
    width: 100%;
    max-width: 520px;
    font-size: 14px;
    height: 34px;
    margin-top: 3px;
  }
  .library-settings .library-settings-title {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 8px;
  }
  .library-settings .library-settings-actions {
    margin: 6px 0 12px;
    font-size: 14px;
  }
  .library-settings .library-settings-actions span {
    margin-left: 10px;
  }
  .library-settings .library-generate {
    border-top: 1px solid #ddd;
    padding-top: 10px;
  }
  .library-settings .library-generate input[type=text] {
    font-size: 14px;
    height: 34px;
    margin: 0 6px 6px 0;
    width: 140px;
  }
  .library-settings .library-generate input[type=text]:nth-of-type(3) {
    width: 360px;
  }
  .library-settings .library-generate span {
    margin-left: 8px;
    font-size: 14px;
  }
  #gallery li.logo-location {
    width: 130px;
  }
  #gallery li.logo-location img {
    background: #2c3888;
    padding: 6px;
    box-sizing: border-box;
  }
  #gallery li.logo-location .logo-meta input {
    display: block;
    width: 100%;
    font-size: 14px;
    height: 28px;
    margin: 0 0 4px;
    box-sizing: border-box;
  }
  #gallery li.logo-location .logo-meta input.missing {
    background: #fff8e1;
    border-color: #ffca28;
  }
  /* Product Stencils admin tab: QR slot and template fields (Towne location QR project, 2026-09) */
  .stencil-slot {
    margin: 10px 0;
  }
  .stencil-slot input[type=text] {
    width: 80px;
    margin-right: 4px;
    font-size: 14px;
  }
  .stencil-slot select {
    font-size: 14px;
    margin-right: 6px;
  }
  .stencil-slot > label {
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
  }
  .stencil-fields {
    margin: 10px 0;
    overflow-x: auto;
  }
  .stencil-fields > label {
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
  }
  .stencil-fields .stencil-fields-table {
    border-collapse: collapse;
  }
  .stencil-fields .stencil-fields-table th, .stencil-fields .stencil-fields-table td {
    padding: 2px 3px;
    font-size: 14px;
    white-space: nowrap;
    vertical-align: middle;
  }
  .stencil-fields .stencil-fields-table th {
    text-align: left;
    color: #666;
    font-weight: 500;
  }
  .stencil-fields .stencil-fields-table input[type=text], .stencil-fields .stencil-fields-table select {
    font-size: 14px;
    height: 28px;
    padding: 0 4px;
  }
  .stencil-fields .stencil-fields-table tr.new-field td {
    background: #f6f6f6;
  }
  /* Towne location QR: guided sign setup block on the product stencil tab (2026-09-11) */
  .stencil-guided {
    grid-column: 1/-1; /* the area form is a two column grid: label, control; this block takes the full row */
    display: block !important; /* the admin form turns nested divs into two column grids */
  }
  .stencil-guided.is-off {
    display: none !important;
  }
  .stencil-guided { /* hidden until Guided template is ticked */
    min-width: 0; /* a grid item may shrink below the table's natural width */
    max-width: 100%;
    overflow: hidden;
  }
  .stencil-guided label {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    float: none !important;
    text-align: left;
    margin: 0 0 6px;
  }
  .stencil-guided .stencil-fields {
    overflow-x: auto;
  }
  .stencil-guided .stencil-guided-steps li, .stencil-guided .stencil-guided-legend {
    white-space: normal;
  }
  .stencil-guided {
    grid-template-columns: none !important;
    width: 100%;
    box-sizing: border-box;
    margin: 12px 0;
    padding: 12px 14px;
  }
  .stencil-guided > div, .stencil-guided .stencil-slot, .stencil-guided .stencil-fields, .stencil-guided .stencil-guided-help > div {
    display: block !important;
    grid-template-columns: none !important;
    width: 100%;
  }
  .stencil-guided .stencil-slot input[type=text] {
    display: inline-block;
    width: 110px;
    margin-right: 6px;
  }
  .stencil-guided .stencil-slot select, .stencil-guided .stencil-slot button {
    display: inline-block;
    vertical-align: middle;
  }
  .stencil-guided .stencil-slot label, .stencil-guided .stencil-fields > label {
    display: block;
    margin-bottom: 6px;
  }
  .stencil-guided .stencil-slot input[type=text] {
    width: 110px;
  }
  .stencil-guided .stencil-fields {
    overflow-x: auto;
  }
  .stencil-guided {
    border: 1px solid #c9d6e8;
    border-radius: 6px;
    background: #f6f9fd;
  }
  .stencil-guided .stencil-guided-title {
    font-size: 15px;
    font-weight: 500;
    color: #003785;
    margin-bottom: 8px;
  }
  .stencil-guided .stencil-guided-help {
    font-size: 14px;
    color: #333;
    line-height: 1.45;
    margin-bottom: 10px;
  }
  .stencil-guided .stencil-guided-steps ol {
    margin: 4px 0 8px 20px;
    padding: 0;
  }
  .stencil-guided .stencil-guided-steps li {
    margin-bottom: 3px;
  }
  .stencil-guided .stencil-guided-legend {
    padding: 8px 10px;
    background: #fff;
    border: 1px solid #e1e8f2;
    border-radius: 4px;
  }
  .stencil-guided .stencil-hint {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    float: none !important;
    margin: 2px 0 0;
    font-weight: 400;
    color: #555;
    font-size: 14px;
    line-height: 1.4;
  }
  .stencil-guided code {
    background: #e9eef6;
    padding: 0 4px;
    border-radius: 3px;
    font-size: 14px;
  }
  .stencil-guided .stencil-fields-table th {
    white-space: nowrap;
    cursor: help;
  }
  .stencil-guided tr.from-template td {
    background: #eef7ee;
  }
  .stl-tag {
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    padding: 0 6px;
    border-radius: 3px;
    vertical-align: middle;
    text-transform: none;
  }
  .stl-tag.stl-tag-auto {
    background: #dbe8fb;
    color: #0b3d91;
  }
  .stl-tag.stl-tag-you {
    background: #eee;
    color: #333;
  }
  .stl-tag.stl-tag-customer {
    background: #dff3e3;
    color: #0d632d;
  }
  /* Towne location QR: flag on customer generated codes in a location library (2026-09-11) */
  #gallery li.logo-location .logo-flag {
    font-size: 14px;
    line-height: 1.3;
    margin-top: 2px;
  }
  #gallery li.logo-location .logo-flag span {
    display: inline-block;
    background: #fff3cd;
    color: #7a5c00;
    border-radius: 3px;
    padding: 1px 6px;
    margin-bottom: 4px;
  }
  #gallery li.logo-location .logo-flag .btn {
    display: block;
    width: 100%;
    font-size: 14px;
    padding: 3px 4px;
  }
  #gallery li.logo-location .logo-flag.logo-flag-admin span {
    background: #e6eef8;
    color: #003785;
  }
  #gallery li.logo-new img {
    box-shadow: 0 0 0 3px #ffc107;
  }
  .library-settings .library-switch {
    display: block;
    font-size: 14px;
    line-height: 1.4;
    margin: 8px 0;
  }
  .library-settings .library-switch input {
    margin-right: 6px;
  }
  #gallery li.logo-location .logo-flag.logo-flag-named span {
    background: #e6eef8;
    color: #003785;
  }
  /* Towne location QR: wording of a location library (2026-09-24) */
  .library-settings .library-texts {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px 12px 10px;
    margin: 10px 0;
  }
  .library-settings .library-texts legend {
    font-size: 14px;
    font-weight: 500;
    padding: 0 4px;
  }
  .library-settings .library-texts .library-texts-help {
    font-size: 14px;
    color: #666;
    margin: 0 0 8px;
  }
  .library-settings .library-texts label {
    display: block;
    font-size: 14px;
    margin: 0 0 6px;
  }
  .library-settings .library-texts input[type=text] {
    display: block;
    width: 100%;
    max-width: 520px;
    font-size: 14px;
  }
  /* Guided signs: the admin guide page and its picture tooltips (2026-09-24) */
  .gs-tip {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    cursor: help;
    outline: none;
  }
  .gs-tip .gs-tip-q {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50%;
    background: #1a73e8;
    color: #fff;
    font: bold 14px/20px Arial, sans-serif;
    text-align: center;
  }
  .gs-tip .gs-tip-body {
    display: none;
    position: absolute;
    z-index: 1000;
    left: 0;
    top: 26px;
    width: 380px;
    max-width: 80vw;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    padding: 8px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #333;
    text-align: left;
    white-space: normal;
  }
  .gs-tip .gs-tip-body img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid #eee;
    margin-bottom: 6px;
  }
  .gs-tip:hover .gs-tip-body, .gs-tip:focus .gs-tip-body, .gs-tip:focus-within .gs-tip-body {
    display: block;
  }
  .gs-tip:focus .gs-tip-q {
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.35);
  }
  .gs-help {
    max-width: 1100px;
    font-size: 15px;
    line-height: 1.55;
    color: #222;
  }
  .gs-help h1 {
    font-size: 28px;
    margin: 0 0 8px;
  }
  .gs-help h2 {
    font-size: 22px;
    margin: 34px 0 10px;
    padding-top: 10px;
    border-top: 1px solid #e5e5e5;
  }
  .gs-help h3 {
    font-size: 18px;
    margin: 22px 0 8px;
  }
  .gs-help p, .gs-help li, .gs-help dd, .gs-help td, .gs-help th {
    font-size: 15px;
  }
  .gs-help code {
    font-size: 14px;
    background: #f3f4f6;
    padding: 1px 5px;
    border-radius: 3px;
  }
  .gs-help .gs-lead {
    font-size: 16px;
    color: #444;
  }
  .gs-help .gs-toc, .gs-help .gs-quick {
    background: #f7f9fc;
    border: 1px solid #e3e8f0;
    border-radius: 6px;
    padding: 10px 16px;
    margin: 12px 0;
  }
  .gs-help .gs-quick {
    background: #fffbea;
    border-color: #f1e3a6;
  }
  .gs-help .gs-toc ol, .gs-help .gs-quick ol {
    margin: 6px 0 0 20px;
  }
  .gs-help .gs-figure {
    margin: 12px 0;
  }
  .gs-help .gs-figure img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  .gs-help .gs-figure.gs-narrow {
    max-width: 380px;
    flex: 0 0 auto;
  }
  .gs-help .gs-figure.gs-medium {
    max-width: 720px;
  }
  .gs-help .gs-cap {
    display: block;
    font-size: 14px;
    color: #555;
    margin-top: 4px;
  }
  .gs-help .gs-cols {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .gs-help .gs-cols > div:last-child {
    flex: 1 1 360px;
  }
  .gs-help .gs-table {
    border-collapse: collapse;
    width: 100%;
    margin: 10px 0 16px;
  }
  .gs-help .gs-table th, .gs-help .gs-table td {
    border: 1px solid #e3e3e3;
    padding: 7px 10px;
    vertical-align: top;
    text-align: left;
  }
  .gs-help .gs-table th {
    background: #f5f6f8;
    font-weight: 600;
  }
  .gs-help .gs-table td:first-child {
    white-space: nowrap;
  }
  .gs-help .gs-table.gs-compact td:first-child {
    white-space: normal;
  }
  .gs-help .gs-note {
    background: #f4f8ff;
    border-left: 4px solid #1a73e8;
    padding: 8px 12px;
    margin: 10px 0;
  }
  .gs-help .gs-flow {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-wrap: wrap;
    margin: 10px 0;
  }
  .gs-help .gs-flow-box {
    flex: 1 1 180px;
    border: 1px solid #cfd8e3;
    border-radius: 6px;
    padding: 10px 12px;
    background: #fff;
  }
  .gs-help .gs-flow-box b {
    display: block;
    margin-bottom: 4px;
  }
  .gs-help .gs-flow-box span {
    font-size: 14px;
    color: #555;
  }
  .gs-help .gs-flow-out {
    background: #eef7ee;
    border-color: #b9dcb9;
  }
  .gs-help .gs-flow-arrow {
    align-self: center;
    font-size: 24px;
    color: #888;
  }
  .gs-help .gs-check li {
    margin: 4px 0;
  }
  .gs-help .gs-faq dt {
    font-weight: 600;
    margin-top: 12px;
  }
  .gs-help .gs-faq dd {
    margin: 2px 0 0 0;
  }
  .stencil-guided .stencil-guided-guide {
    font-size: 14px;
    margin: 0 0 8px;
  }
  .stencil-guided .stencil-guided-panel {
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    margin: 0 0 8px;
    padding: 0 10px;
    background: #fff;
  }
  .stencil-guided .stencil-guided-panel > summary {
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    padding: 7px 0;
  }
  .stencil-guided .stencil-guided-panel ol, .stencil-guided .stencil-guided-panel ul {
    margin: 0 0 8px 20px;
    padding: 0;
    font-size: 14px;
  }
  .stencil-guided .stencil-guided-panel p {
    font-size: 14px;
    margin: 0 0 8px;
  }
  .stencil-guided .stencil-guided-cols {
    display: flex;
    gap: 12px;
    align-items: flex-start;
  }
  .stencil-guided .stencil-guided-tips {
    list-style: none;
    margin-left: 0 !important;
  }
  .stencil-guided .stencil-guided-tips li {
    margin: 4px 0;
  }
  .library-settings .library-texts label .gs-tip {
    margin: 0 4px;
  }
  .stencil-guided .stencil-guided-guide a, .library-settings .library-texts-help a {
    color: #1a73e8;
    text-decoration: underline;
    font-weight: 600;
  }
  /* Stencil image library: admin fixes found during the Towne go-live (2026-09-25) */
  .library-settings input[type=text]::placeholder {
    font-style: italic;
    color: #9aa0a6;
    opacity: 1;
  }
  .library-settings .library-count {
    font-size: 14px;
    font-weight: 400;
    color: #555;
    margin-left: 8px;
  }
  .library-settings .library-warn {
    display: block;
    margin-top: 4px;
  }
  .library-settings .library-access {
    margin: 4px 0 12px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    max-width: 520px;
  }
  .library-settings .library-access .library-access-title {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 6px;
  }
  .library-settings .library-access label.library-radio {
    display: block;
    margin: 0 0 4px;
    font-size: 14px;
  }
  .library-settings .library-access label.library-radio input {
    margin-right: 6px;
  }
  .library-settings .library-access .library-access-groups {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 4px 0 4px 22px;
  }
  .library-settings .library-access .library-access-groups label {
    display: inline-block;
    margin: 0;
    font-size: 14px;
  }
  .library-settings .library-access .library-access-groups label input {
    margin-right: 4px;
  }
  .library-warn {
    font-size: 14px;
    line-height: 1.4;
    color: #7a5c00;
    background: #fff3cd;
    border-radius: 3px;
    padding: 3px 8px;
  }
  .art-libraries-list .library-list-count {
    font-size: 14px;
    font-weight: 400;
    color: #888;
  }
  .library-upload {
    margin: 8px auto 12px;
    width: 100%;
    max-width: 520px;
    font-size: 14px;
    text-align: left;
  }
  .library-upload .library-upload-bar {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: #e6e6e6;
    overflow: hidden;
  }
  .library-upload .library-upload-bar span {
    display: block;
    height: 100%;
    background: #1a73e8;
    transition: width 0.3s;
  }
  .library-upload .library-upload-text {
    margin: 4px 0;
    color: #333;
  }
  .library-upload .library-warn {
    display: block;
    margin-top: 4px;
  }
  .library-upload .library-warn .btn {
    margin-left: 8px;
  }
}
/* we need to have dummy rule to fix css parsing of rules located in @layer */
#dummy-rule-object {
  display: block;
}

@font-face {
  font-family: "Lorimer";
  font-style: normal;
  font-weight: normal;
  src: url("fonts/stencil/Lorimer_No2_Stencil.otf"), url("fonts/stencil/Lorimer_No2_Stencil.woff");
}
@font-face {
  font-family: "Expressway";
  font-style: normal;
  font-weight: normal;
  src: url("fonts/stencil/expressway_rg.ttf");
}
@font-face {
  font-family: "HighwayB";
  font-style: normal;
  font-weight: normal;
  src: url("fonts/stencil/sshgb.eot");
  src: url("fonts/stencil/sshgb.eot?#iefix") format("embedded-opentype"), url("fonts/stencil/sshgb.woff") format("woff"), url("fonts/stencil/sshgb.ttf") format("truetype"), url("fonts/stencil/sshgb.svg#sshgb") format("svg");
}
@font-face {
  font-family: "HighwayC";
  font-style: normal;
  font-weight: normal;
  src: url("fonts/stencil/sshgc.eot?");
  src: url("fonts/stencil/sshgc.eot?#iefix") format("embedded-opentype"), url("fonts/stencil/sshgc.woff") format("woff"), url("fonts/stencil/sshgc.ttf") format("truetype"), url("fonts/stencil/sshgc.svg#sshgc") format("svg");
}
@font-face {
  font-family: "HighwayD";
  font-style: normal;
  font-weight: normal;
  src: url("fonts/stencil/sshgd.eot");
  src: url("fonts/stencil/sshgd.eot?#iefix") format("embedded-opentype"), url("fonts/stencil/sshgd.woff") format("woff"), url("fonts/stencil/sshgd.ttf") format("truetype"), url("fonts/stencil/sshgd.svg#sshgd") format("svg");
}
@font-face {
  font-family: "HighwayE";
  font-style: normal;
  font-weight: normal;
  src: url("fonts/stencil/sshge.eot");
  src: url("fonts/stencil/sshge.eot?#iefix") format("embedded-opentype"), url("fonts/stencil/sshge.woff") format("woff"), url("fonts/stencil/sshge.ttf") format("truetype"), url("fonts/stencil/sshge.svg#sshge") format("svg");
}
.Lorimer {
  font-family: "Lorimer", sans-serif;
}

.HighwayB {
  font-family: "HighwayB", sans-serif;
}

.HighwayC {
  font-family: "HighwayC", sans-serif;
}

.HighwayD {
  font-family: "HighwayD", sans-serif;
}

.HighwayE {
  font-family: "HighwayE", sans-serif;
}

.ExpressWay {
  font-family: "Expressway", sans-serif;
}

.Oswald {
  font-family: "Oswald", sans-serif;
  font-weight: 300;
}

.Roboto {
  font-family: "Roboto", sans-serif;
}

.RobotoCond {
  font-family: "Roboto Condensed", sans-serif;
}

.Arial {
  font-family: "Arial", sans-serif;
}

.Anton {
  font-family: "Anton", sans-serif;
}

.Heebo {
  font-family: "Heebo", sans-serif;
  font-weight: 500;
}

.HeeboBold {
  font-family: "Heebo", sans-serif;
  font-weight: 700;
}

.OpenSans {
  font-family: "Open Sans Condensed", sans-serif;
}

.hide-scroll {
  overflow: hidden;
}

.stl-editor {
  --stl-border-radius: var(--border-radius);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  visibility: hidden;
  background-color: #fff;
  margin: 0;
  z-index: 10000;
  box-sizing: border-box;
}
.stl-editor.stl-show {
  visibility: visible;
}
.stl-block {
  display: grid;
  grid-template-rows: 60px 1fr 80px;
  background-color: #fff;
}

.stl-head-block-inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: center;
  padding: 0 12px;
}
@media (min-width: 768px) {
  .stl-head-block-inner {
    grid-template-columns: 200px 1fr;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
  }
}
.stl-head-block-inner i {
  font-size: 30px;
}
.stl-head-block-inner .stl-header-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 768px) {
  .stl-head-block-inner .stl-header-right {
    grid-template-columns: 200px 220px;
    justify-items: end;
    justify-self: end;
  }
}
.stl-head-block-inner .stl-header-right {
  align-items: center;
  white-space: nowrap;
}
.stl-head-block-inner .stl-header-right .stl-header-text {
  line-height: 1.3;
}
@media (max-width: 767px) {
  .stl-head-block-inner .stl-header-right .stl-header-text div:first-child {
    display: none;
  }
}
.stl-head-block-inner .stl-header-right .stl-header-text a {
  color: #2196f3;
}
.stl-head-block-inner .stl-header-phone {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
}
@media (min-width: 768px) {
  .stl-head-block-inner .stl-header-phone {
    grid-template-columns: 50px 1fr;
  }
}
.stl-head-block-inner .stl-header-chat {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
}
@media (min-width: 768px) {
  .stl-head-block-inner .stl-header-chat {
    grid-template-columns: 50px 1fr;
  }
}
.stl-head-block-inner .stl-header-chat a {
  cursor: pointer;
}
.stl-head-block-inner .stl-header-icon svg {
  height: 40px;
  width: 40px;
}
@media (min-width: 768px) {
  .stl-head-block-inner .stl-header-icon svg {
    height: 50px;
    width: 50px;
  }
}
.stl-head-block-inner .stl-header-icon svg {
  fill: #2196f3;
}
.stl-head-block-inner .stl-header-left img {
  max-height: 55px;
  padding-top: 4px;
}

.stl-footer-block-inner.withUndoRedo {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0 10px;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  height: 100%;
}

.btn-editor-tool[disabled] i, .btn-editor-tool[disabled] span {
  color: #fff;
}

.stl-footer-block-inner.mobile {
  grid-template-columns: 1fr;
}

.stl-footer-left p.stl-product-title {
  font-size: 18px;
  font-weight: 500;
}

.stl-inner {
  background-color: oklch(81% 0.09 249deg / 0.5);
  background-image: linear-gradient(62deg, oklch(81% 0.09 249deg / 0.7) 0%, oklch(86% 0.08 308deg / 0.7) 100%);
}

.stl-body-block {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 10px;
  height: calc(100vh - 140px);
  padding: 5px 2px;
}
@media (min-width: 1024px) {
  .stl-body-block {
    grid-template-columns: 1fr 2fr;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px;
  }
}
.stl-body-block > * {
  box-shadow: var(--shadow);
}

.stl-tabs-outer {
  display: grid;
  grid-template-columns: 1fr;
  min-width: 380px;
}
@media (min-width: 1024px) {
  .stl-tabs-outer {
    grid-template-columns: 80px 1fr;
    min-width: 400px;
    height: calc(100vh - 160px);
    overflow: clip;
  }
}
@media (min-width: 1280px) {
  .stl-tabs-outer {
    min-width: 450px;
    border-top-left-radius: var(--stl-border-radius);
    border-bottom-left-radius: var(--stl-border-radius);
  }
}

.stl-tab-menu {
  background-color: #333;
  color: #fff;
}
@media (min-width: 1024px) {
  .stl-tab-menu {
    overflow-y: auto;
  }
}

.stl-tab-menu-inner {
  display: grid;
  grid-gap: 10px;
  margin-top: 40px;
}
.stl-tab-menu-inner a {
  padding: 10px 0;
  text-align: center;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  color: #fff;
}
.stl-tab-menu-inner a i {
  font-size: 20px;
  display: block;
  color: #fff;
}
.stl-tab-menu-inner a.active {
  color: #333;
  background-color: #fff;
}
.stl-tab-menu-inner a.active i {
  color: #333;
}

.stl-tab-menu-inner > :first-child {
  display: none;
}

@media (max-width: 1023px) {
  .stl-tab-menu.moved-bottom .stl-tab-menu-inner {
    grid-template-columns: repeat(auto-fill, 60px);
  }
}
.draw-area-border {
  border: 2px dotted #999;
}

.stl-start-block-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
  grid-row-gap: 20px;
  padding: 10px 20px 0;
}
.stl-start-block-inner a {
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  color: #333;
}
.stl-start-block-inner a i {
  font-size: 38px;
  display: block;
  color: #555;
}

.stl-tabs {
  display: grid;
  grid-gap: 20px;
  background-color: #fff;
  box-sizing: border-box;
  overflow: hidden;
}
.stl-tabs > div.active {
  display: block;
  overflow-y: auto;
}
@media (max-width: 1023px) {
  .stl-tabs > div.active.stl-start-block {
    display: none;
  }
}
.stl-tabs > div:not(.active) {
  display: none;
}
.stl-tabs .stl-add-text-block-inner,
.stl-tabs .stl-upload-block-inner,
.stl-tabs .stl-var-block-inner,
.stl-tabs .stl-notes-block-inner,
.stl-tabs .stl-help-block-inner {
  padding: 15px;
}
.stl-tabs .stl-var-block-inner .var-text-blocks .swatch-value {
  padding: 4px 6px;
}
.stl-tabs .stl-var-block-inner .var-text-blocks .swatch-value.selected {
  padding: 4px 6px;
}
.stl-tabs .stl-add-text-block-inner textarea {
  font-size: 16px;
  text-align: center;
}
.stl-tabs .stl-block-title {
  font-size: 14px;
  font-weight: 500;
  background-color: #f6f6f6;
  text-align: center;
  text-transform: uppercase;
  line-height: 40px;
  position: relative;
}
@media (min-width: 1024px) {
  .stl-tabs .stl-block-title {
    position: sticky;
    top: 0;
  }
}
.stl-tabs .stl-block-title a.stl-close-icon {
  position: absolute;
  right: 10px;
  top: 0;
}
.stl-tabs .stl-block-title a.stl-close-icon i {
  color: #ccc;
}

.stl-block-subtitle {
  float: left;
  width: 100%;
  font-size: 1rem;
  padding: 1rem 0 0.5rem;
}

.stl-instructions-title {
  font-weight: 500;
  padding: 20px 0 10px;
}

.stl-notes-instructions div {
  padding-bottom: 2px;
}

.stl-tools-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  grid-gap: 10px;
}
.stl-tools-container .stl-tool {
  display: contents;
  font-size: 14px;
}
.stl-tools-container .stl-tool .stl-text-option-block {
  text-transform: uppercase;
  text-align: right;
}
.stl-tools-container .stl-tool .stl-text-option-block > div {
  display: inline-block;
}
.stl-tools-container .stl-tool .stl-text-option-block button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid #ddd;
  padding: 0;
  color: #333;
}
.stl-tools-container .stl-tool .stl-text-option-block button i {
  color: #333;
  font-size: 18px;
}
.stl-tools-container .stl-tool .stl-text-option-block button svg {
  height: 1.4rem;
  width: 2.1rem;
  fill: #333;
}
.stl-tools-container .stl-tool .stl-text-option-block .text-color-swatch {
  border: 2px solid #ddd;
}
.stl-tools-container .stl-tool .stl-text-option-block .text-color-swatch.selected {
  outline: 2px solid #314352;
}
.stl-tools-container .stl-tool .input-append {
  grid-column: 1/3;
  display: grid;
  gap: 0.5rem;
}
.stl-tools-container .stl-attributes:not(.stl-visible) {
  display: none;
}

.select-option select {
  width: 100%;
  height: 40px;
  margin: 0;
  border: 2px solid #ccc;
  padding: 0 6px;
  font-size: 16px;
  font-weight: 500;
}
.select-option select option {
  font-size: 18px;
  padding: 5px 0;
}

.stl-help-block-inner {
  text-align: center;
}
.stl-help-block-inner .stl-block-subtitle {
  font-size: 24px;
}
.stl-help-block-inner .stl-message-image {
  height: 96px;
  width: 96px;
  margin: 20px auto;
}
.stl-help-block-inner .stl-message-image .stl-message-image-inner {
  background: url(../images/stl-person.jpg) no-repeat center;
  height: 96px;
  width: 96px;
  border-radius: 50%;
  background-size: contain;
}
.stl-help-block-inner .stl-help-schedule {
  margin-bottom: 20px;
}
.stl-help-block-inner .stl-help-schedule p {
  margin-bottom: 5px;
}
.stl-help-block-inner .stl-help-schedule p:first-child {
  font-weight: 500;
}
.stl-help-block-inner .stl-help-buttons a {
  min-width: 250px;
  margin-bottom: 10px;
}
.stl-help-block-inner .stl-message-save {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #ddd;
}

.stl-img-block {
  display: flex;
  justify-items: center;
  align-self: center;
  justify-self: center;
  background-color: #fff;
  width: 100%;
  height: 100%;
  position: relative;
}
@media (min-width: 1024px) {
  .stl-img-block {
    border-top-right-radius: var(--stl-border-radius);
    border-bottom-right-radius: var(--stl-border-radius);
  }
}
.stl-img-block .stl-img-block-inner {
  align-self: center;
  overflow: visible;
  height: 0px;
  width: 0px;
}

.stencil-image {
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.stencil-image img {
  object-fit: contain;
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  max-height: 100%;
  position: relative;
}
.stencil-image .draw-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.stl-var-block {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  padding: 0;
}
.stl-var-block .option-title {
  font-weight: 500;
  margin-block-end: 0.5rem;
}
.stl-var-block .prod-option-block {
  margin-bottom: 15px;
  padding: 15px 0 20px 0;
  border-bottom: 1px solid #ccc;
}
.stl-var-block .prod-option-block:last-child {
  border-bottom: none;
}
.stl-var-block .var-checkbox-blocks input {
  vertical-align: top;
}
.stl-var-block .stl-editor-price {
  font-size: 18px;
  padding-top: 21px;
  text-align: center;
}
.stl-var-block .stl-editor-price span {
  font-weight: 500;
}
.stl-var-block .var-color-blocks .swatch-values {
  grid-template-columns: repeat(auto-fill, 36px);
}
.stl-var-block .var-color-blocks button.swatch-value {
  width: 36px;
  height: 36px;
}

.stl-overlay {
  position: fixed;
  width: 100%;
  height: 100vh;
  visibility: hidden;
  top: 0;
  left: 0;
  z-index: 1000;
  opacity: 0;
  background: rgba(228, 240, 227, 0.8);
  transition: all 0.3s;
}

.stl-show ~ .stl-overlay {
  opacity: 1;
  visibility: visible;
}

.stl-effect .stl-block {
  transform: scale(0.8);
  opacity: 0;
  transition: all 0.3s;
}

.stl-show.stl-effect ~ .stl-overlay {
  background-color: #d8d8d8;
}

.stl-show.stl-effect .stl-block {
  transform: scale(1);
  opacity: 1;
}

.stl-editor.stl-show {
  visibility: visible;
}
.stl-editor .font-editor-buttons {
  margin-bottom: 10px;
}
.stl-editor .font-editor-buttons ul.dropdown-menu {
  background-color: #fff;
  padding: 5px 0;
}
.stl-editor .font-editor-buttons ul.dropdown-menu a {
  text-decoration: none;
  font-size: 18px;
}
.stl-editor .font-editor-buttons i {
  font-size: 18px;
  color: #666;
}
.stl-editor .dropdown-menu a {
  display: block;
  padding: 3px 9px;
  clear: both;
  font-weight: normal;
  line-height: 20px;
  color: #333333;
  white-space: nowrap;
}
.stl-editor .open {
  *z-index: 1000;
}
.stl-editor .open > .dropdown-menu {
  display: block;
  top: 31px;
}
.stl-editor .btn-group {
  position: relative;
  font-size: 0;
  vertical-align: middle;
  *margin-left: 0.3em;
}
.stl-editor .btn-group > .btn {
  position: relative;
  background-color: #fff;
  min-width: 40px;
  min-height: 40px;
  font-size: 14px;
  color: #424242;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  line-height: 1.42857143;
  display: inline-block;
  padding: 6px;
  margin-bottom: 0;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  background-image: none;
  border: 1px solid #ccc;
  border-right: none;
  border-radius: 0;
  text-decoration: none;
}
.stl-editor .btn-group > .btn:last-child {
  border-right: 1px solid #ccc;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.stl-editor .btn-group > .btn:first-child {
  width: 60px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.stl-editor .btn-group > .btn:hover {
  background-color: #e6ebf1;
  color: #000;
}
.stl-editor .btn-group.open .dropdown-toggle {
  background-image: none;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.bottom-links {
  text-align: center;
  padding: 10px 0;
}

.vue-swatches__check__wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
}

.vue-swatches__check__circle {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.25);
}

.vue-swatches__check__path {
  fill: #fff;
}

.vue-swatches__swatch {
  position: relative;
  display: inline-block;
  font-size: 0;
}

.vue-swatches__swatch:focus,
.vue-swatches__swatch:hover {
  opacity: 0.9;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.75);
  outline: none;
}

.vue-swatches__swatch.vue-swatches__swatch--border,
.vue-swatches__swatch.vue-swatches__swatch--selected {
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.75);
}

.vue-swatches__swatch__label {
  position: absolute;
  left: 0;
  right: 0;
  color: #666;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}

.vue-swatches__swatch .vue-swatches__diagonal__wrapper {
  position: absolute;
}

fieldset[disabled] .vue-swatches {
  pointer-events: none;
}

.vue-swatches {
  position: relative;
  outline: none;
}

.vue-swatches__trigger__wrapper {
  display: inline-block;
  cursor: pointer;
}

.vue-swatches__trigger.vue-swatches--is-empty {
  border: 2px solid #ccc;
}

.vue-swatches__trigger.vue-swatches--is-disabled {
  cursor: not-allowed;
}

.vue-swatches__container {
  box-sizing: content-box;
}

.vue-swatches__container.vue-swatches--inline {
  font-size: 0;
}

.vue-swatches__container:not(.vue-swatches--inline) {
  position: absolute;
  display: block;
  overflow: auto;
  border-radius: 5px;
  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.2), 0 0 0 1px rgba(10, 10, 10, 0.2);
  z-index: 50;
}

.vue-swatches__wrapper {
  background-color: inherit;
  box-sizing: content-box;
}

.vue-swatches__row {
  font-size: 0;
}

.vue-swatches__fallback__wrapper {
  display: table;
}

.vue-swatches__fallback__input--wrapper {
  display: table-cell;
  padding-right: 10px;
  width: 100%;
  font-size: 14px;
}

.vue-swatches__fallback__input {
  width: 100%;
  padding-top: 6px;
  padding-bottom: 6px;
  border-radius: 5px;
  border: 1px solid #dcdcdc;
  color: #35495e;
  background: #fff;
}

.vue-swatches__fallback__button {
  display: table-cell;
  padding: 6px 15px;
  border: 0;
  cursor: pointer;
  font-weight: 700;
  color: #fff;
  background-color: #3571c8;
  border-radius: 5px;
}

.vue-swatches-show-hide-enter-active,
.vue-swatches-show-hide-leave-active {
  transition: all 0.3s ease;
}

.vue-swatches-show-hide-enter,
.vue-swatches-show-hide-leave-active {
  opacity: 0;
}

.vue-swatches--has-children-centered {
  display: flex;
  align-items: center;
  justify-content: center;
}

.vue-swatches__diagonal__wrapper {
  width: 100%;
  height: 100%;
}

.vue-swatches__diagonal {
  width: 75%;
  height: 75%;
  background: linear-gradient(to top right, transparent 0, transparent calc(50% - 2.4px), #de080a 50%, transparent calc(50% + 2.4px), transparent);
}

.stl-text-color {
  height: 100%;
}
.stl-text-color label {
  pointer-events: none;
}
.stl-text-color label .input {
  display: none;
}
.stl-text-color label .input:checked + .toggle-wrapper > .selector {
  left: calc(100% - 25px);
  background-color: #fff;
}
.stl-text-color label .input:checked ~ .notification > .selected:before {
  content: "White";
}
.stl-text-color label .toggle-wrapper {
  position: relative;
  width: 70px;
  height: 30px;
  background-color: #eaeaea;
  border-radius: 999px;
  cursor: pointer;
  pointer-events: all;
}
.stl-text-color label .toggle-wrapper .selector {
  width: 15px;
  height: 15px;
  position: absolute;
  top: 50%;
  left: 10px;
  border: 1px solid #000;
  transform: translateY(-50%);
  background-color: #000;
  transition: left 0.25s ease;
  border-radius: 50%;
}
.stl-text-color label .notification {
  font-size: 14px;
  font-weight: 500;
  margin: -55px 0 10px;
  width: 100%;
}
.stl-text-color label .notification .selected:before {
  content: "Black";
}

.admin-stl-block {
  display: grid;
  grid-template-rows: 40px 1fr 60px;
  background-color: #fff;
}
.admin-stl-block .stl-img-block .stl-img-block-inner {
  height: 100%;
  width: 100%;
}

.admin-stl-footer {
  text-align: center;
  padding: 8px 0;
  z-index: 1000;
}

.admin-stl-inner {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-gap: 10px;
  height: calc(100vh - 120px);
  background-color: #eee;
  padding: 10px;
}
.admin-stl-inner .stencil-image {
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.admin-stl-inner .stencil-image img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}
.admin-stl-inner .cone {
  width: 800px;
  height: 800px;
}
.admin-stl-inner .cone .draw-area {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-103px, 270px);
  z-index: 10;
}

.note {
  width: 500px;
  margin: 50px auto;
  font-size: 1.1em;
  color: #333;
  text-align: center;
}

#drop-area .stl-block-subtitle {
  text-align: center;
}
#drop-area.highlight .drop-area-block {
  border-color: blue;
}

.drop-area-block {
  float: left;
  border: 1px dashed #ccc;
  border-radius: 5px;
  width: 100%;
  margin: 10px auto 20px;
  padding: 10px;
  box-sizing: border-box;
}

.my-form {
  margin: 20px;
}

.stl-editor #gallery {
  margin-top: 10px;
}
.stl-editor #gallery li {
  display: inline-block;
  width: 100px;
  margin-right: 10px;
  vertical-align: top;
}
.stl-editor #gallery img {
  max-width: 100px;
  max-height: 120px;
  margin-bottom: 10px;
  margin-right: 10px;
  vertical-align: middle;
}

#fileElem {
  display: none;
}

.stl-drag-drop {
  text-align: center;
  font-size: 16px;
}
.stl-drag-drop .button {
  display: inline-block;
  cursor: pointer;
  color: #3571c8;
  font-size: 16px;
}
.stl-drag-drop i {
  display: inline-block;
  font-size: 34px;
  color: #3571c8;
  margin-bottom: 10px;
}
.stl-drag-drop label {
  cursor: pointer;
}

.stl-upload-file-format-list {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  padding: 10px 0;
}
.stl-upload-file-format-list div {
  border: 1px solid #e1e1e1;
  border-right: none;
  font-size: 0.65rem;
  font-weight: 300;
  padding: 0.25rem 0;
  width: 100%;
  text-align: center;
}
.stl-upload-file-format-list div:last-child {
  border-right: 1px solid #e1e1e1;
}

.stl-gallery-title {
  margin: 5px 0;
}

.stl-text-block {
  margin: 10px auto;
  padding: 20px;
  background-color: var(--bg-light-blue);
  text-align: left;
  width: fit-content;
  border-radius: 10px;
}
.stl-text-block label {
  font-weight: 500;
}
.stl-text-block input#logo_text {
  width: 100%;
}
.stl-text-block .add-stl-text-btn {
  text-align: center;
}
.stl-text-block .add-stl-text-btn .btn--default {
  background: #fff;
  border: 1px solid #ccc;
  padding: 0.3rem 2rem;
  border-radius: 5px;
}
.stl-text-block p {
  text-align: center;
  margin: 10px 0 0 0;
}

.design-stencil {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
  grid-gap: 10px;
}
@media (min-width: 1024px) {
  .design-stencil {
    grid-template-columns: auto 1fr auto;
    grid-gap: 0;
  }
}
.design-stencil.design-btn-full-width {
  grid-template-columns: 1fr;
  padding: 0;
}
.design-stencil.design-btn-full-width .stl-design-btn {
  width: unset;
}
.design-stencil.design-btn-full-width .stl-add-text {
  width: unset;
}
.design-stencil .stl-design-btn {
  display: flex;
  gap: 1rem;
  width: 100%;
}
.design-stencil .stl-design-btn .stencil-open {
  --_highlight: hsl(218 92% 90%);
  min-height: 50px;
  font-size: 1rem;
  background: var(--brand-1);
  color: var(--brand-7);
  font-weight: 500;
  border: 2px solid var(--brand-6);
  text-align: center;
  border-radius: var(--btn-border-radius);
  justify-content: center;
  align-items: center;
  box-shadow: var(--_shadow-2), var(--_shadow-depth), 0 0 0 var(--_highlight-size) var(--_highlight);
  transition: var(--transition);
}
.design-stencil .stl-design-btn .stencil-open:hover {
  --_highlight-size: .3rem;
}
.design-stencil .stl-add-text {
  display: grid;
  width: 100%;
}
.design-stencil .stl-add-text .btn {
  --_highlight: hsl(218 92% 90%);
  line-height: 2;
  font-size: 1rem;
  background: var(--brand-1);
  color: var(--brand-7);
  font-weight: 500;
  padding: 0.5rem 1.8rem;
  border: 2px solid var(--brand-6);
  text-align: center;
  border-radius: var(--btn-border-radius);
  justify-content: center;
  align-items: center;
  box-shadow: var(--_shadow-2), var(--_shadow-depth), 0 0 0 var(--_highlight-size) var(--_highlight);
  transition: var(--transition);
}
.design-stencil .stl-add-text .btn:hover {
  --_highlight-size: .3rem;
}

.var-checkbox-blocks.option-block.design-stencil {
  grid-template-columns: 1fr;
  margin: 0;
}

.saved-designs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  grid-gap: 5px;
  align-items: center;
  justify-items: center;
  padding-top: 10px;
}

.stl-saved-designs-block {
  text-align: center;
  width: 100%;
  padding: 10px;
}

.stl-saved-designs .stl-saved-design {
  display: contents;
}
.stl-saved-designs .stl-saved-design input {
  width: 20px;
  height: 20px;
}
.stl-saved-designs {
  display: grid;
  grid-template-columns: 40px 1fr 1fr;
  grid-gap: 10px;
  align-items: center;
  justify-items: center;
  max-width: 175px;
}

.product-tab td.custom-stencil .stl-saved-title {
  font-size: 14px;
  font-weight: 500;
  display: inline-block;
  width: 100%;
  padding: 0 0 20px;
}

.stl-logolibrary-list {
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}
.stl-logolibrary-list h4 {
  width: 100%;
  text-align: center;
  padding-block: 0.6rem 0.2rem;
  font-size: 1rem;
  font-weight: 500;
}
.stl-logolibrary-list > div {
  display: grid;
  grid-template-columns: repeat(auto-fill, 64px);
  grid-gap: 4px;
  align-items: center;
  justify-items: center;
  padding: 0.5rem;
  margin: 0.3rem;
  background-color: var(--gray-1);
  border-radius: 1rem;
}

.zsiq_floatmain.zsiq_theme1.siq_bR.chat-moved {
  bottom: 91px;
  right: 8px;
}
.zsiq_floatmain.zsiq_theme1.siq_bR.chat-moved .zsiq_cnt {
  display: none;
}

.arm-undo::before {
  content: "\e86d";
}

.arm-redo::before {
  content: "\e86c";
}

.stl-product-title {
  opacity: 0;
  padding-left: 0.75em;
}
@media (min-width: 1024px) {
  .stl-product-title {
    opacity: 1;
    flex-grow: 1;
  }
}

/* support for js-save-design .running animation */
.stl-editor .btn.running i {
  visibility: hidden;
}

.stl-editor .btn.running .ld-ring {
  display: inline-block;
  width: 20px;
  height: 20px;
  position: absolute;
  left: 31px;
  margin-top: 3px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
}

.stl-loading .stl-loading-screen .ld-ring {
  display: block;
  width: 60px;
  height: 60px;
  position: absolute;
  left: calc(50% - 30px);
  top: calc(50% - 100px);
  border: 5px solid rgba(128, 128, 128, 0.3);
  border-radius: 50%;
  border-top-color: #333;
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
}

.stl-loading-screen {
  background-color: white;
  z-index: 500;
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s;
}

.stl-loading .stl-loading-screen {
  opacity: 1;
}

.stl-loading .stencil-image {
  left: 100000px;
}

@keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}
.hide-scroll .zsiq_theme1.zsiq_floatmain {
  bottom: 100px;
}

@media (max-width: 1023px) {
  .stl-body-block {
    height: 100%;
    display: flex;
    flex-direction: column-reverse;
    grid-gap: 0;
  }
  .stl-tabs-outer {
    display: block;
    position: relative;
    overflow: visible;
    max-width: unset;
    min-width: unset;
  }
  .stl-head-block-inner .stl-header-right .stl-header-text a {
    color: #424242;
    font-weight: 500;
  }
  .stl-tab-menu-inner {
    margin-top: 0;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    grid-gap: 0;
  }
  .stl-tabs {
    display: block;
    position: absolute;
    width: 100%;
    z-index: 1000;
    bottom: 100%;
    background-color: rgba(240, 240, 240, 0.8);
    backdrop-filter: blur(4px);
  }
  .stl-tabs .stl-block-title {
    background: none;
  }
  .stl-tabs > div > div:nth-child(2) {
    max-height: 40vh;
    overflow-y: auto;
  }
  .stl-tabs .stl-var-block-inner {
    padding-top: 0;
  }
  .stl-tabs > div.stl-var-block .stl-editor-price {
    position: sticky;
    top: 0;
    backdrop-filter: blur(10px);
    z-index: 1;
    margin: -15px -15px 0 -15px;
    border-bottom: none;
    padding-top: 0;
  }
  .stl-tabs > div.stl-var-block > div:nth-child(2),
  .stl-tabs > div.stl-notes-block > div:nth-child(2),
  .stl-tabs > div.stl-help-block > div:nth-child(2) {
    max-height: 60vh;
  }
  .stl-block {
    height: 100%;
    min-height: 500px;
    grid-template-rows: 60px 1fr 80px;
  }
  .stl-block .product-top {
    display: none;
  }
  .stl-tools-scroller .stl-tools-container {
    display: flex;
    flex-direction: row;
    min-width: 100%;
    justify-content: center;
    align-items: stretch;
    width: max-content;
    scroll-snap-type: x mandatory;
    padding-right: 1em;
  }
  .stl-tools-scroller .stl-tools-container .stl-tool.stl-visible {
    display: flex;
    flex-direction: column;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  .stl-tools-scroller .stl-tools-container .stl-text-title {
    text-align: center;
  }
  .stl-tools-scroller .stl-tools-container .stl-text-option-block {
    display: flex;
    justify-content: center;
  }
  .stl-tools-scroller .stl-tools-container .stl-text-option-block button {
    background-color: white;
  }
  .stl-tools-scroller .stl-tools-container textarea {
    margin-bottom: 0;
    margin-right: 0.25em;
    padding: 5px;
    font-size: 1em !important;
    height: 100%;
    max-width: 50vw;
  }
  .stl-tools-scroller .stl-tools-container .well .input-append {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    height: 100%;
    overflow-x: clip;
  }
  .stl-tools-scroller .stl-tools-container .well .input-append button {
    white-space: nowrap;
  }
  .stl-tools-scroller .stl-tools-container .well .input-append i {
    display: none;
  }
  .stl-tools-scroller .stl-tools-container .select-option select, .stl-tools-scroller .stl-tools-container input {
    height: 36px;
  }
  .stl-tools-scroller .stl-tools-container .select-option select {
    font-size: 1em;
    border-radius: 2px;
    border-width: 1px;
    background-color: white;
  }
  .stl-tab-menu {
    overflow-y: clip;
    height: auto;
  }
  .stl-tab-menu-inner a {
    padding: 5px 0;
  }
  .stl-editor {
    overflow-y: auto;
  }
  .stl-var-block {
    background: none;
  }
  .stl-tabs {
    opacity: 1;
    transition: opacity 0.5s;
  }
  .stl-tabs .stl-start-block-inner,
  .stl-tabs .stl-logolibrary-list h4,
  .stl-tabs .stl-add-text-block-inner,
  .stl-tabs .stl-upload-block-inner,
  .stl-tabs .stl-var-block-inner,
  .stl-tabs .stl-notes-block-inner,
  .stl-tabs .stl-help-block-inner {
    padding-top: 0;
    padding-bottom: 10px;
  }
  .stl-drag .stl-tabs, .stl-text-editing .stl-tabs {
    opacity: 0;
    pointer-events: none;
  }
  #js-colorpicker-text, #js-colorpicker-background {
    width: 5em;
  }
  .hide-scroll .zsiq_theme1.zsiq_floatmain {
    top: 5px;
    right: 0;
  }
  .zsiq_theme1 .siqico-chat::before {
    line-height: 40px !important;
    font-size: 20px !important;
  }
  .zsiq_theme1 .zsiq_flt_rel {
    height: 40px !important;
    width: 40px !important;
  }
  .zsiq_theme1 div.zsiq_cnt {
    top: 10px !important;
  }
  .zsiq_theme1 .siqico-close {
    display: flex !important;
    margin-top: 10px !important;
  }
}
@media (max-width: 768px) {
  .stl-head-block-inner {
    grid-template-columns: 1fr 1fr;
  }
  .stl-head-block {
    padding: 0;
    border-bottom: 2px solid #d8d8d8;
  }
  .stl-head-block .stl-head-block-inner img {
    max-height: 40px;
    padding: 0;
  }
  .stl-header-right {
    white-space: nowrap;
  }
  .stl-block {
    height: 100%;
    min-height: 500px;
    grid-template-rows: 50px 1fr 50px;
    grid-gap: 0;
  }
  .stl-footer-block .btn, .stl-footer-block .btn--xlg, .stl-footer-block .btn-editor-tool {
    padding: 7px;
  }
  .stl-footer-block .btn span {
    display: none;
  }
  .stl-product-title {
    padding-left: 0.5em;
    font-size: 1em;
    line-height: 1em;
  }
  .stl-body-block {
    padding: 0;
  }
  .stl-head-block-inner .stl-header-phone {
    margin-right: 10px;
  }
  .stl-editor .btn.running .ld-ring {
    left: 5px;
  }
  .stl-editor .btn#js-save-design span {
    display: inline;
    font-size: 14px;
  }
  .stl-editor .btn#js-save-design span span {
    display: none;
  }
  .stl-header-left a {
    display: inline-block;
    padding: 4px 0;
  }
  .stl-tab-menu-inner a {
    padding: 4px 8px;
  }
}
@media (max-width: 360px) {
  .stl-product-title {
    font-size: 0.8em;
    line-height: 1.1em;
  }
  .stl-footer-block .btn:not(:last-child, :first-child) {
    margin-right: 5px;
  }
  .stl-footer-block-inner {
    padding-left: 5px;
    padding-right: 5px;
  }
}
.stl-block:not(.stl-text-selected) .stl-tool-text-only:not(.stl-tool-image-only, .stl-tool-none-only),
.stl-block:not(.stl-image-selected) .stl-tool-image-only:not(.stl-tool-text-only, .stl-tool-none-only),
.stl-block:not(.stl-none-selected) .stl-tool-none-only:not(.stl-tool-image-only, .stl-tool-only) {
  display: none;
}

.sp-colorize-container.sp-add-on {
  width: 30px !important;
}

.stl-tools-container .sp-replacer {
  height: 36px;
  width: 50px;
  border-radius: 2px;
  border: 1px solid #ddd;
}

.stl-tools-container .sp-replacer .sp-dd {
  line-height: 36px;
  color: #555;
  border-left: 1px solid #ddd;
}

.stl-choose-color span {
  font-size: 0.7em;
  font-weight: bold;
  display: block;
  text-align: center;
}

#js-custom-product-div {
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1400px) {
  .hide-scroll .a5-widget {
    bottom: 100px !important;
  }
}
@media (max-width: 1023px) {
  .hide-scroll .a5-widget {
    top: 10px !important;
  }
}

.stl-areas {
  position: absolute;
  z-index: 20;
  right: 0;
  top: 0;
  width: calc(100px + 1em);
  margin: 10px;
}
.stl-areas > div > div img:first-child {
  margin-left: 5px;
}
.stl-areas > div {
  padding: 0.5em;
  background-color: white;
  margin-bottom: 0.5em;
  text-align: center;
  cursor: pointer;
  border-radius: var(--stl-border-radius);
  border: 5px solid var(--gray-1);
}
.stl-areas > div.stl-selected-area {
  border: 5px solid var(--_highlight);
}
.stl-areas > div.stl-selected-area > div img:first-child {
  margin-left: 0;
}
.stl-areas > div.stl-selected-area > div {
  text-decoration: underline;
  text-decoration-color: #0069c0;
  text-decoration-thickness: 3px;
}
.stl-areas > div > div {
  position: relative;
}
.stl-areas > div > div > img.stencil-area-preview {
  display: block;
  position: absolute;
}
.stl-areas > div > div > img.stencil-background-image {
  display: block;
  max-width: 100%;
  max-height: 100px;
  margin-left: auto;
  margin-right: auto;
}

#js-stencil-design {
  display: inline-block;
  width: auto;
}

.stencilDesignSides {
  display: flex;
  width: fit-content;
  background-color: white;
  margin-bottom: 0.5em;
  margin-right: 0.5em;
  flex-direction: row;
  vertical-align: middle;
  white-space: nowrap;
  border: 2px solid #0069c0;
  padding: 5px;
  border-radius: 10px;
}
.stencilDesignSides img {
  max-width: 90px;
  max-height: 90px;
  display: inline;
  vertical-align: middle;
  background-color: white;
}

.stl-saved-title {
  padding: 5px 0 13px;
  display: inline-block;
  font-weight: 500;
}

.stl-no-design span {
  display: inline-block;
  width: 100%;
  font-weight: 500;
  text-align: left;
}

.custom-orientation,
.custom-color {
  margin-bottom: 15px;
  border-bottom: 1px dashed #ccc;
}
.custom-orientation > span,
.custom-color > span {
  text-align: right;
}

.stl-notes-buttons-row {
  margin-top: 0.5rem;
}

/* Towne location QR: guided template tab, location rows, template fields, company help (2026-09) */
.stl-guided-block .stl-guided-inner {
  padding: 15px;
  overflow-y: auto;
}

.stl-guided-block .steps {
  display: grid;
  gap: 14px;
}

.stl-guided-block .step {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px 14px;
  background: #fff;
}

.stl-guided-block .step.done {
  border-color: #a5d6a7;
}

.stl-guided-block .step h4 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.stl-guided-block .step h4 .num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #003785;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.stl-guided-block .step.done h4 .num {
  background: #0d632d;
}

.stl-guided-block .opt-group {
  margin-bottom: 10px;
}

.stl-guided-block .opt-group:last-child {
  margin-bottom: 0;
}

.stl-guided-block .opt-group .opt-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.stl-guided-block .tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.stl-guided-block .tiles.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stl-guided-block .tiles .tile {
  font: inherit;
  color: inherit;
  background: #fff;
  box-shadow: none;
  --_highlight-size: 0;
  width: 100%;
}

.stl-guided-block .tiles .tile:focus-visible {
  outline: 2px solid #003785;
  outline-offset: 2px;
}

.stl-guided-block .tiles label, .stl-guided-block .tiles .tile {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 10px 4px;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1px;
  min-height: 58px;
  box-sizing: border-box;
  margin: 0;
}

.stl-guided-block .tiles label .sz, .stl-guided-block .tiles .tile .sz {
  font-size: 17px;
  font-weight: 500;
  color: #15191d;
  line-height: 1.15;
}

/* longer option names (Coroplast, Vinyl decal) must not spill out of a three across tile */
.stl-guided-block .tiles label .sz.long, .stl-guided-block .tiles .tile .sz.long {
  font-size: 14px;
  line-height: 1.2;
}

.stl-guided-block .tiles label .sz.big, .stl-guided-block .tiles .tile .sz.big {
  font-size: 19px;
}

.stl-guided-block .tiles label .pr, .stl-guided-block .tiles .tile .pr {
  font-size: 14px;
  color: #424242;
  line-height: 1.2;
}

.stl-guided-block .tiles label.on, .stl-guided-block .tiles .tile.on {
  border-color: #003785;
  background: #e6eef8;
}

.stl-guided-block .tiles label.on .sz, .stl-guided-block .tiles .tile.on .sz {
  color: #003785;
}

.stl-guided-block #js-guided-options .prod-option-block {
  margin-bottom: 10px;
}

/* the guided Options step draws its own label above full width tiles, as in the mockup; the store's
   own title and control stay in the DOM (the form posts them) but out of sight */
/* the store gives the block a two column grid, 12.8px vertical padding and a rule underneath, and its
   container 15px on every side; the mockup has none of that, just 10px between groups */
.stl-guided-block #js-guided-options .stl-var-block-inner {
  padding: 0 !important;
}

.stl-guided-block #js-guided-options .prod-option-block {
  display: block !important;
  grid-template-columns: none !important;
  padding: 0 !important;
  border: 0 !important;
  margin: 0 0 10px !important;
}

.stl-guided-block #js-guided-options .prod-option-block:last-child {
  margin-bottom: 0 !important;
}

.stl-guided-block #js-guided-options .option-title {
  display: none;
}

.stl-guided-block #js-guided-options .stl-editor-price {
  display: none !important;
} /* the price lives in the review card */
.stl-guided-block #js-guided-options .opt-label {
  display: block;
  width: auto;
  font-size: 14px;
  color: #666;
  margin: 0 0 5px;
}

.stl-guided-block #js-guided-options .tiles {
  width: 100%;
}

/* breathing room above and below the sign; the drawing area is laid out inside the same box, so the
   canvas and the background move together */
.stl-editor.stl-guided .stencil-image {
  top: 18px;
  bottom: 18px;
  height: auto;
}

.stl-guided-block #js-guided-options .option-value {
  display: none;
}

.stl-guided-block .loc-input, .stl-guided-block .fld input {
  font-size: 18px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
}

.stl-guided-block .loc-input::placeholder, .stl-guided-block .fld input::placeholder {
  color: #9a9a9a;
  font-weight: 400;
  text-transform: none;
  opacity: 1;
}

.stl-guided-block .loc-hint {
  font-size: 14px;
  color: #666;
  margin: 6px 0 0;
}

.stl-guided-block .loc-empty {
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: 6px;
  padding: 12px;
  font-size: 14px;
  margin-top: 8px;
}

.stl-guided-block .loc-empty .btn {
  margin-top: 10px;
}

.stl-guided-block .rows {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.stl-guided-block .row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 10px;
  align-items: center;
  border: 1px solid #e1e1e1;
  border-radius: 6px;
  padding: 6px 8px;
}

.stl-guided-block .row .box {
  background: #2c3888;
  border-radius: 4px;
  padding: 4px;
}

.stl-guided-block .row .box img {
  width: 40px;
  height: 40px;
  display: block;
}

.stl-guided-block .row .id {
  font-size: 16px;
  font-weight: 500;
}

.stl-guided-block .row .id small {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: #666;
}

.stl-guided-block .row.selected {
  border-color: #0d632d;
  background: #e8f5e9;
}

.stl-guided-block .row .onsign {
  color: #0d632d;
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
}

.stl-guided-block .sub-fields {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid #e6eef8;
  background: #f4f7fb;
  border-radius: 6px;
}

.stl-guided-block .sub-fields .loc-hint {
  margin-top: 2px;
}

.stl-guided-block .fld {
  margin-bottom: 10px;
}

.stl-guided-block .fld:last-child {
  margin-bottom: 0;
}

.stl-guided-block .fld label {
  display: block;
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
}

.stl-guided-block .fld .cnt {
  font-size: 14px;
  color: #999;
  float: right;
}

.stl-guided-block .review {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 6px;
  font-size: 15px;
  align-items: baseline;
}

/* a long value without spaces (a location name typed in one go) must wrap inside the card, not push the panel into a horizontal scroll */
.stl-guided-block .review .v {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.stl-guided-block .stl-guided-inner, .stl-guided-block .step {
  overflow-x: hidden;
  min-width: 0;
}

.stl-guided-block .review .k {
  color: #666;
  white-space: nowrap;
}

.stl-guided-block .review .v {
  font-weight: 500;
  color: #15191d;
}

.stl-guided-block .review .v small {
  font-weight: 400;
  color: #424242;
}

.stl-guided-block .cta {
  margin-top: 12px;
  padding: 12px 10px;
  border-radius: 6px;
  background: #e6eef8;
  text-align: center;
}

.stl-guided-block .cta .q {
  font-size: 16px;
  font-weight: 500;
  color: #003785;
}

.stl-guided-block .cta .a {
  font-size: 14px;
  color: #424242;
  margin-top: 3px;
}

.stl-guided-block .cta.wait {
  background: #fff8e1;
}

.stl-guided-block .cta.wait .q {
  color: #7a5c00;
}

.help-towne {
  text-align: center;
}

.help-towne .help-hero {
  padding: 6px 0 4px;
}

.help-towne .help-photo {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 12px;
}

.help-towne .help-photo img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px #2c3888;
}

.help-towne .help-photo .help-badge {
  position: absolute;
  right: -6px;
  bottom: 4px;
  background: #2c3888;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  padding: 2px 10px;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.help-towne .help-title {
  font-size: 24px;
  font-weight: 400;
  color: #15191d;
  margin-bottom: 6px;
}

.help-towne .help-sub {
  font-size: 15px;
  color: #424242;
  line-height: 1.45;
  max-width: 360px;
  margin: 0 auto 12px;
}

.help-towne .help-hours {
  font-size: 14px;
  color: #424242;
  margin-bottom: 14px;
}

.help-towne .help-hours b {
  display: block;
  font-weight: 500;
  color: #15191d;
  margin-bottom: 2px;
}

.help-towne .help-buttons {
  display: grid;
  grid-template-columns: 1fr;
  width: max-content;
  min-width: 250px;
  max-width: 100%;
  margin: 0 auto 18px;
  gap: 10px;
}

.help-towne .help-buttons .btn {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
  justify-self: stretch;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  white-space: nowrap;
  margin: 0 !important;
}

.help-towne .help-buttons .btn i {
  font-size: 16px;
}

.help-towne .help-faq {
  text-align: left;
  border-top: 1px solid #e1e1e1;
  padding-top: 12px;
}

.help-towne .help-faq-title {
  font-size: 14px;
  font-weight: 500;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.help-towne .help-faq details {
  border-bottom: 1px solid #eee;
}

.help-towne .help-faq summary {
  cursor: pointer;
  padding: 9px 0;
  font-size: 15px;
  font-weight: 500;
  color: #003785;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.help-towne .help-faq summary::after {
  content: "+";
  font-size: 18px;
  color: #999;
}

.help-towne .help-faq details[open] summary::after {
  content: "-";
}

.help-towne .help-faq p {
  margin: 0 0 10px;
  font-size: 14px;
  color: #424242;
  line-height: 1.5;
}

.design-meta {
  font-size: 14px;
  color: #424242;
}

/* Towne location QR: template field font (licensed Fiendstar W01 Semibold, woff converted from the TTF) */
@font-face {
  font-family: "Fiendstar";
  font-style: normal;
  font-weight: 700;
  src: url("fonts/stencil/fiendstar-semibold.woff") format("woff");
}
/* Towne location QR: customer names the chosen location (library switch) */
.stl-guided-block .loc-name {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid #e6eef8;
  background: #f4f7fb;
  border-radius: 6px;
}

.stl-guided-block .loc-name label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #424242;
  margin: 0;
}

.stl-guided-block .loc-name label .opt {
  color: #888;
  font-weight: 400;
}

/* the explanation belongs to the block title, so it sits right under the label, quiet and on one line where it fits */
.stl-guided-block .loc-name-note {
  font-size: 14px;
  line-height: 1.3;
  color: #777;
  margin: 2px 0 8px;
}

.stl-guided-block .loc-name-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.stl-guided-block .loc-name-row input {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin: 0;
}

.stl-guided-block .loc-name-row input::placeholder {
  color: #9a9a9a;
  font-weight: 400;
  text-transform: none;
  opacity: 1;
}

.stl-guided-block .loc-name-row .btn {
  flex: 0 0 auto;
  --btn-height: 44px;
  height: 44px;
  font-size: 15px;
  padding-inline: 18px;
}

.stl-guided-block .loc-error {
  color: #b00020;
}

/* the list is collapsed to the chosen row; this brings the rest back without touching the sign */
/* a plain text link, so the store's button ring (box-shadow highlight on hover and focus) stays off */
.stl-guided-block .loc-change {
  display: inline-block;
  justify-self: start;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  --_highlight-size: 0;
  padding: 4px 0 0;
  font-size: 14px;
  color: #0b57a4;
  text-decoration: underline;
  cursor: pointer;
}

.stl-guided-block .loc-change:hover, .stl-guided-block .loc-change:focus, .stl-guided-block .loc-change:active {
  box-shadow: none;
  --_highlight-size: 0;
  background: none;
  border: 0;
}

.stl-guided-block .loc-change:hover {
  color: #003785;
}

.stl-guided-block .loc-named {
  margin-top: 8px;
}

/* Mobile: the setup panel floats over the sign (semi transparent, anchored above the tab bar). A tall sign
   was centred in the whole image block, so a band of white sat under the header and the lower half of the
   design hid behind the panel. In guided mode the sign is fitted into the strip above the panel instead:
   the panel content is capped at 40vh and its title adds about 40px, so the image box stops just above it.
   The editor watches the image with a ResizeObserver and rescales the canvas, so the drawing follows. */
@media (max-width: 1023px) {
  .stl-editor.stl-guided .stencil-image {
    top: 6px;
    bottom: calc(40vh + 52px);
    height: auto;
  }
}
/* guided mode draws the sign from the steps, so the free-hand history buttons have nothing to undo that the
   steps do not own; hiding them keeps the canvas and the saved values in step */
.stl-editor.stl-guided .btn-editor-tool {
  display: none !important;
}

.stl-guided-block .loc-label {
  display: block;
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
}

.admin-site-title a {
  display: inline-grid;
  grid-template-columns: 30px 1fr 50px;
  gap: 10px;
  align-items: center;
  min-height: 40px;
  font-weight: 400;
  color: #fff;
}
.admin-site-title a div {
  width: 30px;
  height: 30px;
  background-color: #fff;
  border-radius: 50%;
  align-content: center;
  text-align: center;
}
.admin-site-title a i {
  font-size: 20px;
  margin-bottom: 4px;
}
.admin-site-title a .site-name-admin {
  font-size: 20px;
  font-family: var(--ff-condensed);
  font-weight: 400;
}
.admin-site-title a:hover {
  color: #ddd;
}

/*# sourceMappingURL=admin.css.map */