/*Important to leave it 240 so that the carousel pictures align perfectly*/
/* =========================================================================
   TopManager Online Shop - Design Tokens (the theme "contract")
   -------------------------------------------------------------------------
   These CSS custom properties are the single set of runtime "knobs" a theme
   is allowed to change. The values published here are the historical
   "Default" theme values, taken verbatim from the immutable colour palette in
   own.os.variables.scss, so a shop on the Default theme stays byte-for-byte
   identical to before.

   Tokens are intentionally derived ONLY from the raw palette ($blue, $fire,
   ...) or from literals - never from the semantic variables ($primary-color,
   ...). The semantic variables are what will later resolve TO these tokens
   (var(--tm-..., fallback)); deriving a token from a semantic variable would
   create a circular reference once that wiring lands.

   PHASING NOTE: on their own these custom properties are inert - nothing reads
   them yet, so simply publishing them changes nothing on screen. Components
   begin consuming them in a later phase. A non-default theme overrides a
   subset of these tokens under an html.<theme> scope, loaded after this file.
   ========================================================================= */
:root {
  /* Brand --------------------------------------------------------------- */
  --tm-primary: #0088d4;
  --tm-primary-dark: #006197;
  --tm-primary-light: #63bef1;
  --tm-secondary: #00c893;
  --tm-secondary-dark: #009970;
  --tm-secondary-light: #99edd7;
  --tm-accent: #ff6500;
  --tm-accent-dark: #c15d1c;
  --tm-accent-light: #ffa86f;
  /* Chrome (single-value, published). The neutral scale - surface, surface-alt,
     text, text-muted, border - is intentionally NOT published here: on Default
     and light themes each component keeps its own literal via the var()
     fallback; only dark/brand themes collapse them by setting the token. */
  --tm-body-bg: #dfe7f1;
  --tm-footer-bg: #333;
  --tm-anchor: #0366d6;
  --tm-anchor-hover: #004796;
  /* Status -------------------------------------------------------------- */
  --tm-success: #85c177;
  --tm-danger: #ff6500;
  --tm-warn: orange;
  --tm-info: #0088d4;
  /* Composite (derived from the brand tokens above) --------------------- */
  --tm-gradient-default: linear-gradient(90deg, var(--tm-primary) 0%, var(--tm-secondary) 100%);
  /* Layout / sizing ----------------------------------------------------- */
  /* Max content width at the xxl tier (>=1400px). 1320px is byte-identical
     to Bootstrap's stock .container cap, so Default shops are unchanged.
     Unlike the colour tokens above, these are LIVE - own.os.common.media.queries
     reads them at the xxl breakpoint. To enable an "extra large" layout with
     no code/deploy, a shop overrides the token in its BO custom CSS, e.g.
         :root { --tm-container-max-width: 1560px; }
     (header, categories menu, carousel and page content widen together). */
  --tm-container-max-width: 1320px;
  --tm-container-max-width-wide: 1560px;
}

/*!
 * Bootstrap  v5.3.2 (https://getbootstrap.com/)
 * Copyright 2011-2023 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */
:root,
[data-bs-theme=light] {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-primary-rgb: 13, 110, 253;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-primary-text-emphasis: #052c65;
  --bs-secondary-text-emphasis: #2b2f32;
  --bs-success-text-emphasis: #0a3622;
  --bs-info-text-emphasis: #055160;
  --bs-warning-text-emphasis: #664d03;
  --bs-danger-text-emphasis: #58151c;
  --bs-light-text-emphasis: #495057;
  --bs-dark-text-emphasis: #495057;
  --bs-primary-bg-subtle: #cfe2ff;
  --bs-secondary-bg-subtle: #e2e3e5;
  --bs-success-bg-subtle: #d1e7dd;
  --bs-info-bg-subtle: #cff4fc;
  --bs-warning-bg-subtle: #fff3cd;
  --bs-danger-bg-subtle: #f8d7da;
  --bs-light-bg-subtle: #fcfcfd;
  --bs-dark-bg-subtle: #ced4da;
  --bs-primary-border-subtle: #9ec5fe;
  --bs-secondary-border-subtle: #c4c8cb;
  --bs-success-border-subtle: #a3cfbb;
  --bs-info-border-subtle: #9eeaf9;
  --bs-warning-border-subtle: #ffe69c;
  --bs-danger-border-subtle: #f1aeb5;
  --bs-light-border-subtle: #e9ecef;
  --bs-dark-border-subtle: #adb5bd;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg: #fff;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-emphasis-color: #000;
  --bs-emphasis-color-rgb: 0, 0, 0;
  --bs-secondary-color: rgba(33, 37, 41, 0.75);
  --bs-secondary-color-rgb: 33, 37, 41;
  --bs-secondary-bg: #e9ecef;
  --bs-secondary-bg-rgb: 233, 236, 239;
  --bs-tertiary-color: rgba(33, 37, 41, 0.5);
  --bs-tertiary-color-rgb: 33, 37, 41;
  --bs-tertiary-bg: #f8f9fa;
  --bs-tertiary-bg-rgb: 248, 249, 250;
  --bs-heading-color: inherit;
  --bs-link-color: #0d6efd;
  --bs-link-color-rgb: 13, 110, 253;
  --bs-link-decoration: underline;
  --bs-link-hover-color: #0a58ca;
  --bs-link-hover-color-rgb: 10, 88, 202;
  --bs-code-color: #d63384;
  --bs-highlight-color: #212529;
  --bs-highlight-bg: #fff3cd;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-xxl: 2rem;
  --bs-border-radius-2xl: var(--bs-border-radius-xxl);
  --bs-border-radius-pill: 50rem;
  --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
  --bs-focus-ring-width: 0.25rem;
  --bs-focus-ring-opacity: 0.25;
  --bs-focus-ring-color: rgba(13, 110, 253, 0.25);
  --bs-form-valid-color: #198754;
  --bs-form-valid-border-color: #198754;
  --bs-form-invalid-color: #dc3545;
  --bs-form-invalid-border-color: #dc3545;
}

[data-bs-theme=dark] {
  color-scheme: dark;
  --bs-body-color: #dee2e6;
  --bs-body-color-rgb: 222, 226, 230;
  --bs-body-bg: #212529;
  --bs-body-bg-rgb: 33, 37, 41;
  --bs-emphasis-color: #fff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: rgba(222, 226, 230, 0.75);
  --bs-secondary-color-rgb: 222, 226, 230;
  --bs-secondary-bg: #343a40;
  --bs-secondary-bg-rgb: 52, 58, 64;
  --bs-tertiary-color: rgba(222, 226, 230, 0.5);
  --bs-tertiary-color-rgb: 222, 226, 230;
  --bs-tertiary-bg: #2b3035;
  --bs-tertiary-bg-rgb: 43, 48, 53;
  --bs-primary-text-emphasis: #6ea8fe;
  --bs-secondary-text-emphasis: #a7acb1;
  --bs-success-text-emphasis: #75b798;
  --bs-info-text-emphasis: #6edff6;
  --bs-warning-text-emphasis: #ffda6a;
  --bs-danger-text-emphasis: #ea868f;
  --bs-light-text-emphasis: #f8f9fa;
  --bs-dark-text-emphasis: #dee2e6;
  --bs-primary-bg-subtle: #031633;
  --bs-secondary-bg-subtle: #161719;
  --bs-success-bg-subtle: #051b11;
  --bs-info-bg-subtle: #032830;
  --bs-warning-bg-subtle: #332701;
  --bs-danger-bg-subtle: #2c0b0e;
  --bs-light-bg-subtle: #343a40;
  --bs-dark-bg-subtle: #1a1d20;
  --bs-primary-border-subtle: #084298;
  --bs-secondary-border-subtle: #41464b;
  --bs-success-border-subtle: #0f5132;
  --bs-info-border-subtle: #087990;
  --bs-warning-border-subtle: #997404;
  --bs-danger-border-subtle: #842029;
  --bs-light-border-subtle: #495057;
  --bs-dark-border-subtle: #343a40;
  --bs-heading-color: inherit;
  --bs-link-color: #6ea8fe;
  --bs-link-hover-color: #8bb9fe;
  --bs-link-color-rgb: 110, 168, 254;
  --bs-link-hover-color-rgb: 139, 185, 254;
  --bs-code-color: #e685b5;
  --bs-highlight-color: #dee2e6;
  --bs-highlight-bg: #664d03;
  --bs-border-color: #495057;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
  --bs-form-valid-color: #75b798;
  --bs-form-valid-border-color: #75b798;
  --bs-form-invalid-color: #ea868f;
  --bs-form-invalid-border-color: #ea868f;
}

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

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  font-weight: var(--bs-body-font-weight);
  line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  text-align: var(--bs-body-text-align);
  background-color: var(--bs-body-bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

hr {
  margin: 1rem 0;
  color: inherit;
  border: 0;
  border-top: var(--bs-border-width) solid;
  opacity: 0.25;
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--bs-heading-color);
}

h1, .h1 {
  font-size: calc(1.375rem + 1.5vw);
}
@media (min-width: 1200px) {
  h1, .h1 {
    font-size: 2.5rem;
  }
}

h2, .h2 {
  font-size: calc(1.325rem + 0.9vw);
}
@media (min-width: 1200px) {
  h2, .h2 {
    font-size: 2rem;
  }
}

h3, .h3 {
  font-size: calc(1.3rem + 0.6vw);
}
@media (min-width: 1200px) {
  h3, .h3 {
    font-size: 1.75rem;
  }
}

h4, .h4 {
  font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
  h4, .h4 {
    font-size: 1.5rem;
  }
}

h5, .h5 {
  font-size: 1.25rem;
}

h6, .h6 {
  font-size: 1rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

abbr[title] {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  cursor: help;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

ol,
ul {
  padding-left: 2rem;
}

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

dt {
  font-weight: 700;
}

dd {
  margin-bottom: 0.5rem;
  margin-left: 0;
}

blockquote {
  margin: 0 0 1rem;
}

b,
strong {
  font-weight: bolder;
}

small, .small {
  font-size: 0.875em;
}

mark, .mark {
  padding: 0.1875em;
  color: var(--bs-highlight-color);
  background-color: var(--bs-highlight-bg);
}

sub,
sup {
  position: relative;
  font-size: 0.75em;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

a {
  color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
  text-decoration: underline;
}
a:hover {
  --bs-link-color-rgb: var(--bs-link-hover-color-rgb);
}

a:not([href]):not([class]), a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}

pre,
code,
kbd,
samp {
  font-family: var(--bs-font-monospace);
  font-size: 1em;
}

pre {
  display: block;
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  font-size: 0.875em;
}
pre code {
  font-size: inherit;
  color: inherit;
  word-break: normal;
}

code {
  font-size: 0.875em;
  color: var(--bs-code-color);
  word-wrap: break-word;
}
a > code {
  color: inherit;
}

kbd {
  padding: 0.1875rem 0.375rem;
  font-size: 0.875em;
  color: var(--bs-body-bg);
  background-color: var(--bs-body-color);
  border-radius: 0.25rem;
}
kbd kbd {
  padding: 0;
  font-size: 1em;
}

figure {
  margin: 0 0 1rem;
}

img,
svg {
  vertical-align: middle;
}

table {
  caption-side: bottom;
  border-collapse: collapse;
}

caption {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: var(--bs-secondary-color);
  text-align: left;
}

th {
  text-align: inherit;
  text-align: -webkit-match-parent;
}

thead,
tbody,
tfoot,
tr,
td,
th {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}

label {
  display: inline-block;
}

button {
  border-radius: 0;
}

button:focus:not(:focus-visible) {
  outline: 0;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
select {
  text-transform: none;
}

[role=button] {
  cursor: pointer;
}

select {
  word-wrap: normal;
}
select:disabled {
  opacity: 1;
}

[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
  display: none !important;
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}
button:not(:disabled),
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled) {
  cursor: pointer;
}

::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

textarea {
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: calc(1.275rem + 0.3vw);
  line-height: inherit;
}
@media (min-width: 1200px) {
  legend {
    font-size: 1.5rem;
  }
}
legend + * {
  clear: left;
}

::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
  padding: 0;
}

::-webkit-inner-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

/* rtl:raw:
[type="tel"],
[type="url"],
[type="email"],
[type="number"] {
  direction: ltr;
}
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-color-swatch-wrapper {
  padding: 0;
}

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

::file-selector-button {
  font: inherit;
  -webkit-appearance: button;
}

output {
  display: inline-block;
}

iframe {
  border: 0;
}

summary {
  display: list-item;
  cursor: pointer;
}

progress {
  vertical-align: baseline;
}

[hidden] {
  display: none !important;
}

.lead {
  font-size: 1.25rem;
  font-weight: 300;
}

.display-1 {
  font-size: calc(1.625rem + 4.5vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-1 {
    font-size: 5rem;
  }
}

.display-2 {
  font-size: calc(1.575rem + 3.9vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-2 {
    font-size: 4.5rem;
  }
}

.display-3 {
  font-size: calc(1.525rem + 3.3vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-3 {
    font-size: 4rem;
  }
}

.display-4 {
  font-size: calc(1.475rem + 2.7vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-4 {
    font-size: 3.5rem;
  }
}

.display-5 {
  font-size: calc(1.425rem + 2.1vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-5 {
    font-size: 3rem;
  }
}

.display-6 {
  font-size: calc(1.375rem + 1.5vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-6 {
    font-size: 2.5rem;
  }
}

.list-unstyled {
  padding-left: 0;
  list-style: none;
}

.list-inline {
  padding-left: 0;
  list-style: none;
}

.list-inline-item {
  display: inline-block;
}
.list-inline-item:not(:last-child) {
  margin-right: 0.5rem;
}

.initialism {
  font-size: 0.875em;
  text-transform: uppercase;
}

.blockquote {
  margin-bottom: 1rem;
  font-size: 1.25rem;
}
.blockquote > :last-child {
  margin-bottom: 0;
}

.blockquote-footer {
  margin-top: -1rem;
  margin-bottom: 1rem;
  font-size: 0.875em;
  color: #6c757d;
}
.blockquote-footer::before {
  content: "— ";
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

.img-thumbnail {
  padding: 0.25rem;
  background-color: var(--bs-body-bg);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  max-width: 100%;
  height: auto;
}

.figure {
  display: inline-block;
}

.figure-img {
  margin-bottom: 0.5rem;
  line-height: 1;
}

.figure-caption {
  font-size: 0.875em;
  color: var(--bs-secondary-color);
}

.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container-sm, .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container-md, .container-sm, .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container-lg, .container-md, .container-sm, .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1320px;
  }
}
:root {
  --bs-breakpoint-xs: 0;
  --bs-breakpoint-sm: 576px;
  --bs-breakpoint-md: 768px;
  --bs-breakpoint-lg: 992px;
  --bs-breakpoint-xl: 1200px;
  --bs-breakpoint-xxl: 1400px;
}

.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

.col {
  flex: 1 0 0%;
}

.row-cols-auto > * {
  flex: 0 0 auto;
  width: auto;
}

.row-cols-1 > * {
  flex: 0 0 auto;
  width: 100%;
}

.row-cols-2 > * {
  flex: 0 0 auto;
  width: 50%;
}

.row-cols-3 > * {
  flex: 0 0 auto;
  width: 33.33333333%;
}

.row-cols-4 > * {
  flex: 0 0 auto;
  width: 25%;
}

.row-cols-5 > * {
  flex: 0 0 auto;
  width: 20%;
}

.row-cols-6 > * {
  flex: 0 0 auto;
  width: 16.66666667%;
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
}

.col-1 {
  flex: 0 0 auto;
  width: 8.33333333%;
}

.col-2 {
  flex: 0 0 auto;
  width: 16.66666667%;
}

.col-3 {
  flex: 0 0 auto;
  width: 25%;
}

.col-4 {
  flex: 0 0 auto;
  width: 33.33333333%;
}

.col-5 {
  flex: 0 0 auto;
  width: 41.66666667%;
}

.col-6 {
  flex: 0 0 auto;
  width: 50%;
}

.col-7 {
  flex: 0 0 auto;
  width: 58.33333333%;
}

.col-8 {
  flex: 0 0 auto;
  width: 66.66666667%;
}

.col-9 {
  flex: 0 0 auto;
  width: 75%;
}

.col-10 {
  flex: 0 0 auto;
  width: 83.33333333%;
}

.col-11 {
  flex: 0 0 auto;
  width: 91.66666667%;
}

.col-12 {
  flex: 0 0 auto;
  width: 100%;
}

.offset-1 {
  margin-left: 8.33333333%;
}

.offset-2 {
  margin-left: 16.66666667%;
}

.offset-3 {
  margin-left: 25%;
}

.offset-4 {
  margin-left: 33.33333333%;
}

.offset-5 {
  margin-left: 41.66666667%;
}

.offset-6 {
  margin-left: 50%;
}

.offset-7 {
  margin-left: 58.33333333%;
}

.offset-8 {
  margin-left: 66.66666667%;
}

.offset-9 {
  margin-left: 75%;
}

.offset-10 {
  margin-left: 83.33333333%;
}

.offset-11 {
  margin-left: 91.66666667%;
}

.g-0,
.gx-0 {
  --bs-gutter-x: 0;
}

.g-0,
.gy-0 {
  --bs-gutter-y: 0;
}

.g-1,
.gx-1 {
  --bs-gutter-x: 0.25rem;
}

.g-1,
.gy-1 {
  --bs-gutter-y: 0.25rem;
}

.g-2,
.gx-2 {
  --bs-gutter-x: 0.5rem;
}

.g-2,
.gy-2 {
  --bs-gutter-y: 0.5rem;
}

.g-3,
.gx-3 {
  --bs-gutter-x: 1rem;
}

.g-3,
.gy-3 {
  --bs-gutter-y: 1rem;
}

.g-4,
.gx-4 {
  --bs-gutter-x: 1.5rem;
}

.g-4,
.gy-4 {
  --bs-gutter-y: 1.5rem;
}

.g-5,
.gx-5 {
  --bs-gutter-x: 3rem;
}

.g-5,
.gy-5 {
  --bs-gutter-y: 3rem;
}

@media (min-width: 576px) {
  .col-sm {
    flex: 1 0 0%;
  }
  .row-cols-sm-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-sm-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-sm-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-sm-3 > * {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .row-cols-sm-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-sm-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-sm-6 > * {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-sm-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-sm-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-sm-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-sm-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-sm-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-sm-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-sm-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-sm-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-sm-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-sm-0 {
    margin-left: 0;
  }
  .offset-sm-1 {
    margin-left: 8.33333333%;
  }
  .offset-sm-2 {
    margin-left: 16.66666667%;
  }
  .offset-sm-3 {
    margin-left: 25%;
  }
  .offset-sm-4 {
    margin-left: 33.33333333%;
  }
  .offset-sm-5 {
    margin-left: 41.66666667%;
  }
  .offset-sm-6 {
    margin-left: 50%;
  }
  .offset-sm-7 {
    margin-left: 58.33333333%;
  }
  .offset-sm-8 {
    margin-left: 66.66666667%;
  }
  .offset-sm-9 {
    margin-left: 75%;
  }
  .offset-sm-10 {
    margin-left: 83.33333333%;
  }
  .offset-sm-11 {
    margin-left: 91.66666667%;
  }
  .g-sm-0,
  .gx-sm-0 {
    --bs-gutter-x: 0;
  }
  .g-sm-0,
  .gy-sm-0 {
    --bs-gutter-y: 0;
  }
  .g-sm-1,
  .gx-sm-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-sm-1,
  .gy-sm-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-sm-2,
  .gx-sm-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-sm-2,
  .gy-sm-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-sm-3,
  .gx-sm-3 {
    --bs-gutter-x: 1rem;
  }
  .g-sm-3,
  .gy-sm-3 {
    --bs-gutter-y: 1rem;
  }
  .g-sm-4,
  .gx-sm-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-sm-4,
  .gy-sm-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-sm-5,
  .gx-sm-5 {
    --bs-gutter-x: 3rem;
  }
  .g-sm-5,
  .gy-sm-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 768px) {
  .col-md {
    flex: 1 0 0%;
  }
  .row-cols-md-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-md-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-md-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-md-3 > * {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .row-cols-md-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-md-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-md-6 > * {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-md-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-md-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-md-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-md-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-md-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-md-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-md-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-md-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-md-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-md-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-md-0 {
    margin-left: 0;
  }
  .offset-md-1 {
    margin-left: 8.33333333%;
  }
  .offset-md-2 {
    margin-left: 16.66666667%;
  }
  .offset-md-3 {
    margin-left: 25%;
  }
  .offset-md-4 {
    margin-left: 33.33333333%;
  }
  .offset-md-5 {
    margin-left: 41.66666667%;
  }
  .offset-md-6 {
    margin-left: 50%;
  }
  .offset-md-7 {
    margin-left: 58.33333333%;
  }
  .offset-md-8 {
    margin-left: 66.66666667%;
  }
  .offset-md-9 {
    margin-left: 75%;
  }
  .offset-md-10 {
    margin-left: 83.33333333%;
  }
  .offset-md-11 {
    margin-left: 91.66666667%;
  }
  .g-md-0,
  .gx-md-0 {
    --bs-gutter-x: 0;
  }
  .g-md-0,
  .gy-md-0 {
    --bs-gutter-y: 0;
  }
  .g-md-1,
  .gx-md-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-md-1,
  .gy-md-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-md-2,
  .gx-md-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-md-2,
  .gy-md-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-md-3,
  .gx-md-3 {
    --bs-gutter-x: 1rem;
  }
  .g-md-3,
  .gy-md-3 {
    --bs-gutter-y: 1rem;
  }
  .g-md-4,
  .gx-md-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-md-4,
  .gy-md-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-md-5,
  .gx-md-5 {
    --bs-gutter-x: 3rem;
  }
  .g-md-5,
  .gy-md-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 992px) {
  .col-lg {
    flex: 1 0 0%;
  }
  .row-cols-lg-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-lg-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-lg-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-lg-3 > * {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .row-cols-lg-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-lg-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-lg-6 > * {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-lg-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-lg-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-lg-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-lg-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-lg-0 {
    margin-left: 0;
  }
  .offset-lg-1 {
    margin-left: 8.33333333%;
  }
  .offset-lg-2 {
    margin-left: 16.66666667%;
  }
  .offset-lg-3 {
    margin-left: 25%;
  }
  .offset-lg-4 {
    margin-left: 33.33333333%;
  }
  .offset-lg-5 {
    margin-left: 41.66666667%;
  }
  .offset-lg-6 {
    margin-left: 50%;
  }
  .offset-lg-7 {
    margin-left: 58.33333333%;
  }
  .offset-lg-8 {
    margin-left: 66.66666667%;
  }
  .offset-lg-9 {
    margin-left: 75%;
  }
  .offset-lg-10 {
    margin-left: 83.33333333%;
  }
  .offset-lg-11 {
    margin-left: 91.66666667%;
  }
  .g-lg-0,
  .gx-lg-0 {
    --bs-gutter-x: 0;
  }
  .g-lg-0,
  .gy-lg-0 {
    --bs-gutter-y: 0;
  }
  .g-lg-1,
  .gx-lg-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-lg-1,
  .gy-lg-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-lg-2,
  .gx-lg-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-lg-2,
  .gy-lg-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-lg-3,
  .gx-lg-3 {
    --bs-gutter-x: 1rem;
  }
  .g-lg-3,
  .gy-lg-3 {
    --bs-gutter-y: 1rem;
  }
  .g-lg-4,
  .gx-lg-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-lg-4,
  .gy-lg-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-lg-5,
  .gx-lg-5 {
    --bs-gutter-x: 3rem;
  }
  .g-lg-5,
  .gy-lg-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 1200px) {
  .col-xl {
    flex: 1 0 0%;
  }
  .row-cols-xl-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-xl-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-xl-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-xl-3 > * {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .row-cols-xl-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-xl-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-xl-6 > * {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xl-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-xl-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-xl-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-xl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-xl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-xl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-xl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-xl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-xl-0 {
    margin-left: 0;
  }
  .offset-xl-1 {
    margin-left: 8.33333333%;
  }
  .offset-xl-2 {
    margin-left: 16.66666667%;
  }
  .offset-xl-3 {
    margin-left: 25%;
  }
  .offset-xl-4 {
    margin-left: 33.33333333%;
  }
  .offset-xl-5 {
    margin-left: 41.66666667%;
  }
  .offset-xl-6 {
    margin-left: 50%;
  }
  .offset-xl-7 {
    margin-left: 58.33333333%;
  }
  .offset-xl-8 {
    margin-left: 66.66666667%;
  }
  .offset-xl-9 {
    margin-left: 75%;
  }
  .offset-xl-10 {
    margin-left: 83.33333333%;
  }
  .offset-xl-11 {
    margin-left: 91.66666667%;
  }
  .g-xl-0,
  .gx-xl-0 {
    --bs-gutter-x: 0;
  }
  .g-xl-0,
  .gy-xl-0 {
    --bs-gutter-y: 0;
  }
  .g-xl-1,
  .gx-xl-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-xl-1,
  .gy-xl-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-xl-2,
  .gx-xl-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-xl-2,
  .gy-xl-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-xl-3,
  .gx-xl-3 {
    --bs-gutter-x: 1rem;
  }
  .g-xl-3,
  .gy-xl-3 {
    --bs-gutter-y: 1rem;
  }
  .g-xl-4,
  .gx-xl-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-xl-4,
  .gy-xl-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-xl-5,
  .gx-xl-5 {
    --bs-gutter-x: 3rem;
  }
  .g-xl-5,
  .gy-xl-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 1400px) {
  .col-xxl {
    flex: 1 0 0%;
  }
  .row-cols-xxl-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-xxl-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-xxl-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-xxl-3 > * {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .row-cols-xxl-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-xxl-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-xxl-6 > * {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xxl-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-xxl-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-xxl-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xxl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xxl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xxl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-xxl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xxl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-xxl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-xxl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xxl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-xxl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-xxl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-xxl-0 {
    margin-left: 0;
  }
  .offset-xxl-1 {
    margin-left: 8.33333333%;
  }
  .offset-xxl-2 {
    margin-left: 16.66666667%;
  }
  .offset-xxl-3 {
    margin-left: 25%;
  }
  .offset-xxl-4 {
    margin-left: 33.33333333%;
  }
  .offset-xxl-5 {
    margin-left: 41.66666667%;
  }
  .offset-xxl-6 {
    margin-left: 50%;
  }
  .offset-xxl-7 {
    margin-left: 58.33333333%;
  }
  .offset-xxl-8 {
    margin-left: 66.66666667%;
  }
  .offset-xxl-9 {
    margin-left: 75%;
  }
  .offset-xxl-10 {
    margin-left: 83.33333333%;
  }
  .offset-xxl-11 {
    margin-left: 91.66666667%;
  }
  .g-xxl-0,
  .gx-xxl-0 {
    --bs-gutter-x: 0;
  }
  .g-xxl-0,
  .gy-xxl-0 {
    --bs-gutter-y: 0;
  }
  .g-xxl-1,
  .gx-xxl-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-xxl-1,
  .gy-xxl-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-xxl-2,
  .gx-xxl-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-xxl-2,
  .gy-xxl-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-xxl-3,
  .gx-xxl-3 {
    --bs-gutter-x: 1rem;
  }
  .g-xxl-3,
  .gy-xxl-3 {
    --bs-gutter-y: 1rem;
  }
  .g-xxl-4,
  .gx-xxl-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-xxl-4,
  .gy-xxl-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-xxl-5,
  .gx-xxl-5 {
    --bs-gutter-x: 3rem;
  }
  .g-xxl-5,
  .gy-xxl-5 {
    --bs-gutter-y: 3rem;
  }
}
.table {
  --bs-table-color-type: initial;
  --bs-table-bg-type: initial;
  --bs-table-color-state: initial;
  --bs-table-bg-state: initial;
  --bs-table-color: var(--bs-emphasis-color);
  --bs-table-bg: var(--bs-body-bg);
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: var(--bs-emphasis-color);
  --bs-table-striped-bg: rgba(var(--bs-emphasis-color-rgb), 0.05);
  --bs-table-active-color: var(--bs-emphasis-color);
  --bs-table-active-bg: rgba(var(--bs-emphasis-color-rgb), 0.1);
  --bs-table-hover-color: var(--bs-emphasis-color);
  --bs-table-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.075);
  width: 100%;
  margin-bottom: 1rem;
  vertical-align: top;
  border-color: var(--bs-table-border-color);
}
.table > :not(caption) > * > * {
  padding: 0.5rem 0.5rem;
  color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color)));
  background-color: var(--bs-table-bg);
  border-bottom-width: var(--bs-border-width);
  box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
}
.table > tbody {
  vertical-align: inherit;
}
.table > thead {
  vertical-align: bottom;
}

.table-group-divider {
  border-top: calc(var(--bs-border-width) * 2) solid currentcolor;
}

.caption-top {
  caption-side: top;
}

.table-sm > :not(caption) > * > * {
  padding: 0.25rem 0.25rem;
}

.table-bordered > :not(caption) > * {
  border-width: var(--bs-border-width) 0;
}
.table-bordered > :not(caption) > * > * {
  border-width: 0 var(--bs-border-width);
}

.table-borderless > :not(caption) > * > * {
  border-bottom-width: 0;
}
.table-borderless > :not(:first-child) {
  border-top-width: 0;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-color-type: var(--bs-table-striped-color);
  --bs-table-bg-type: var(--bs-table-striped-bg);
}

.table-striped-columns > :not(caption) > tr > :nth-child(even) {
  --bs-table-color-type: var(--bs-table-striped-color);
  --bs-table-bg-type: var(--bs-table-striped-bg);
}

.table-active {
  --bs-table-color-state: var(--bs-table-active-color);
  --bs-table-bg-state: var(--bs-table-active-bg);
}

.table-hover > tbody > tr:hover > * {
  --bs-table-color-state: var(--bs-table-hover-color);
  --bs-table-bg-state: var(--bs-table-hover-bg);
}

.table-primary {
  --bs-table-color: #000;
  --bs-table-bg: #cfe2ff;
  --bs-table-border-color: #a6b5cc;
  --bs-table-striped-bg: #c5d7f2;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #bacbe6;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #bfd1ec;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.table-secondary {
  --bs-table-color: #000;
  --bs-table-bg: #e2e3e5;
  --bs-table-border-color: #b5b6b7;
  --bs-table-striped-bg: #d7d8da;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #cbccce;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #d1d2d4;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.table-success {
  --bs-table-color: #000;
  --bs-table-bg: #d1e7dd;
  --bs-table-border-color: #a7b9b1;
  --bs-table-striped-bg: #c7dbd2;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #bcd0c7;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #c1d6cc;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.table-info {
  --bs-table-color: #000;
  --bs-table-bg: #cff4fc;
  --bs-table-border-color: #a6c3ca;
  --bs-table-striped-bg: #c5e8ef;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #badce3;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #bfe2e9;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.table-warning {
  --bs-table-color: #000;
  --bs-table-bg: #fff3cd;
  --bs-table-border-color: #ccc2a4;
  --bs-table-striped-bg: #f2e7c3;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #e6dbb9;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #ece1be;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.table-danger {
  --bs-table-color: #000;
  --bs-table-bg: #f8d7da;
  --bs-table-border-color: #c6acae;
  --bs-table-striped-bg: #eccccf;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #dfc2c4;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #e5c7ca;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.table-light {
  --bs-table-color: #000;
  --bs-table-bg: #f8f9fa;
  --bs-table-border-color: #c6c7c8;
  --bs-table-striped-bg: #ecedee;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #dfe0e1;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #e5e6e7;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.table-dark {
  --bs-table-color: #fff;
  --bs-table-bg: #212529;
  --bs-table-border-color: #4d5154;
  --bs-table-striped-bg: #2c3034;
  --bs-table-striped-color: #fff;
  --bs-table-active-bg: #373b3e;
  --bs-table-active-color: #fff;
  --bs-table-hover-bg: #323539;
  --bs-table-hover-color: #fff;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 575.98px) {
  .table-responsive-sm {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 767.98px) {
  .table-responsive-md {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 991.98px) {
  .table-responsive-lg {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 1199.98px) {
  .table-responsive-xl {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 1399.98px) {
  .table-responsive-xxl {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
.form-label {
  margin-bottom: 0.5rem;
}

.col-form-label {
  padding-top: calc(0.375rem + var(--bs-border-width));
  padding-bottom: calc(0.375rem + var(--bs-border-width));
  margin-bottom: 0;
  font-size: inherit;
  line-height: 1.5;
}

.col-form-label-lg {
  padding-top: calc(0.5rem + var(--bs-border-width));
  padding-bottom: calc(0.5rem + var(--bs-border-width));
  font-size: 1.25rem;
}

.col-form-label-sm {
  padding-top: calc(0.25rem + var(--bs-border-width));
  padding-bottom: calc(0.25rem + var(--bs-border-width));
  font-size: 0.875rem;
}

.form-text {
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: var(--bs-secondary-color);
}

.form-control {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--bs-body-bg);
  background-clip: padding-box;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-control {
    transition: none;
  }
}
.form-control[type=file] {
  overflow: hidden;
}
.form-control[type=file]:not(:disabled):not([readonly]) {
  cursor: pointer;
}
.form-control:focus {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.form-control::-webkit-date-and-time-value {
  min-width: 85px;
  height: 1.5em;
  margin: 0;
}
.form-control::-webkit-datetime-edit {
  display: block;
  padding: 0;
}
.form-control::-moz-placeholder {
  color: var(--bs-secondary-color);
  opacity: 1;
}
.form-control::placeholder {
  color: var(--bs-secondary-color);
  opacity: 1;
}
.form-control:disabled {
  background-color: var(--bs-secondary-bg);
  opacity: 1;
}
.form-control::-webkit-file-upload-button {
  padding: 0.375rem 0.75rem;
  margin: -0.375rem -0.75rem;
  -webkit-margin-end: 0.75rem;
  margin-inline-end: 0.75rem;
  color: var(--bs-body-color);
  background-color: var(--bs-tertiary-bg);
  pointer-events: none;
  border-color: inherit;
  border-style: solid;
  border-width: 0;
  border-inline-end-width: var(--bs-border-width);
  border-radius: 0;
  -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-control::file-selector-button {
  padding: 0.375rem 0.75rem;
  margin: -0.375rem -0.75rem;
  -webkit-margin-end: 0.75rem;
  margin-inline-end: 0.75rem;
  color: var(--bs-body-color);
  background-color: var(--bs-tertiary-bg);
  pointer-events: none;
  border-color: inherit;
  border-style: solid;
  border-width: 0;
  border-inline-end-width: var(--bs-border-width);
  border-radius: 0;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-control::-webkit-file-upload-button {
    -webkit-transition: none;
    transition: none;
  }
  .form-control::file-selector-button {
    transition: none;
  }
}
.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
  background-color: var(--bs-secondary-bg);
}
.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
  background-color: var(--bs-secondary-bg);
}

.form-control-plaintext {
  display: block;
  width: 100%;
  padding: 0.375rem 0;
  margin-bottom: 0;
  line-height: 1.5;
  color: var(--bs-body-color);
  background-color: transparent;
  border: solid transparent;
  border-width: var(--bs-border-width) 0;
}
.form-control-plaintext:focus {
  outline: 0;
}
.form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg {
  padding-right: 0;
  padding-left: 0;
}

.form-control-sm {
  min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2));
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: var(--bs-border-radius-sm);
}
.form-control-sm::-webkit-file-upload-button {
  padding: 0.25rem 0.5rem;
  margin: -0.25rem -0.5rem;
  -webkit-margin-end: 0.5rem;
  margin-inline-end: 0.5rem;
}
.form-control-sm::file-selector-button {
  padding: 0.25rem 0.5rem;
  margin: -0.25rem -0.5rem;
  -webkit-margin-end: 0.5rem;
  margin-inline-end: 0.5rem;
}

.form-control-lg {
  min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  border-radius: var(--bs-border-radius-lg);
}
.form-control-lg::-webkit-file-upload-button {
  padding: 0.5rem 1rem;
  margin: -0.5rem -1rem;
  -webkit-margin-end: 1rem;
  margin-inline-end: 1rem;
}
.form-control-lg::file-selector-button {
  padding: 0.5rem 1rem;
  margin: -0.5rem -1rem;
  -webkit-margin-end: 1rem;
  margin-inline-end: 1rem;
}

textarea.form-control {
  min-height: calc(1.5em + 0.75rem + calc(var(--bs-border-width) * 2));
}
textarea.form-control-sm {
  min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2));
}
textarea.form-control-lg {
  min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));
}

.form-control-color {
  width: 3rem;
  height: calc(1.5em + 0.75rem + calc(var(--bs-border-width) * 2));
  padding: 0.375rem;
}
.form-control-color:not(:disabled):not([readonly]) {
  cursor: pointer;
}
.form-control-color::-moz-color-swatch {
  border: 0 !important;
  border-radius: var(--bs-border-radius);
}
.form-control-color::-webkit-color-swatch {
  border: 0 !important;
  border-radius: var(--bs-border-radius);
}
.form-control-color.form-control-sm {
  height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2));
}
.form-control-color.form-control-lg {
  height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));
}

.form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  display: block;
  width: 100%;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--bs-body-bg);
  background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-select {
    transition: none;
  }
}
.form-select:focus {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.form-select[multiple], .form-select[size]:not([size="1"]) {
  padding-right: 0.75rem;
  background-image: none;
}
.form-select:disabled {
  background-color: var(--bs-secondary-bg);
}
.form-select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 var(--bs-body-color);
}

.form-select-sm {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  font-size: 0.875rem;
  border-radius: var(--bs-border-radius-sm);
}

.form-select-lg {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  font-size: 1.25rem;
  border-radius: var(--bs-border-radius-lg);
}

[data-bs-theme=dark] .form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-check {
  display: block;
  min-height: 1.5rem;
  padding-left: 1.5em;
  margin-bottom: 0.125rem;
}
.form-check .form-check-input {
  float: left;
  margin-left: -1.5em;
}

.form-check-reverse {
  padding-right: 1.5em;
  padding-left: 0;
  text-align: right;
}
.form-check-reverse .form-check-input {
  float: right;
  margin-right: -1.5em;
  margin-left: 0;
}

.form-check-input {
  --bs-form-check-bg: var(--bs-body-bg);
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  margin-top: 0.25em;
  vertical-align: top;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--bs-form-check-bg);
  background-image: var(--bs-form-check-bg-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: var(--bs-border-width) solid var(--bs-border-color);
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
  print-color-adjust: exact;
}
.form-check-input[type=checkbox] {
  border-radius: 0.25em;
}
.form-check-input[type=radio] {
  border-radius: 50%;
}
.form-check-input:active {
  filter: brightness(90%);
}
.form-check-input:focus {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.form-check-input:checked {
  background-color: #0d6efd;
  border-color: #0d6efd;
}
.form-check-input:checked[type=checkbox] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.form-check-input:checked[type=radio] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}
.form-check-input[type=checkbox]:indeterminate {
  background-color: #0d6efd;
  border-color: #0d6efd;
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}
.form-check-input:disabled {
  pointer-events: none;
  filter: none;
  opacity: 0.5;
}
.form-check-input[disabled] ~ .form-check-label, .form-check-input:disabled ~ .form-check-label {
  cursor: default;
  opacity: 0.5;
}

.form-switch {
  padding-left: 2.5em;
}
.form-switch .form-check-input {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
  width: 2em;
  margin-left: -2.5em;
  background-image: var(--bs-form-switch-bg);
  background-position: left center;
  border-radius: 2em;
  transition: background-position 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-switch .form-check-input {
    transition: none;
  }
}
.form-switch .form-check-input:focus {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2386b7fe'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked {
  background-position: right center;
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.form-switch.form-check-reverse {
  padding-right: 2.5em;
  padding-left: 0;
}
.form-switch.form-check-reverse .form-check-input {
  margin-right: -2.5em;
  margin-left: 0;
}

.form-check-inline {
  display: inline-block;
  margin-right: 1rem;
}

.btn-check {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}
.btn-check[disabled] + .btn, .btn-check:disabled + .btn {
  pointer-events: none;
  filter: none;
  opacity: 0.65;
}

[data-bs-theme=dark] .form-switch .form-check-input:not(:checked):not(:focus) {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e");
}

.form-range {
  width: 100%;
  height: 1.5rem;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
}
.form-range:focus {
  outline: 0;
}
.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.form-range::-moz-focus-outer {
  border: 0;
}
.form-range::-webkit-slider-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: -0.25rem;
  -webkit-appearance: none;
  appearance: none;
  background-color: #0d6efd;
  border: 0;
  border-radius: 1rem;
  -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-range::-webkit-slider-thumb {
    -webkit-transition: none;
    transition: none;
  }
}
.form-range::-webkit-slider-thumb:active {
  background-color: #b6d4fe;
}
.form-range::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: var(--bs-secondary-bg);
  border-color: transparent;
  border-radius: 1rem;
}
.form-range::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  -moz-appearance: none;
  appearance: none;
  background-color: #0d6efd;
  border: 0;
  border-radius: 1rem;
  -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-range::-moz-range-thumb {
    -moz-transition: none;
    transition: none;
  }
}
.form-range::-moz-range-thumb:active {
  background-color: #b6d4fe;
}
.form-range::-moz-range-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: var(--bs-secondary-bg);
  border-color: transparent;
  border-radius: 1rem;
}
.form-range:disabled {
  pointer-events: none;
}
.form-range:disabled::-webkit-slider-thumb {
  background-color: var(--bs-secondary-color);
}
.form-range:disabled::-moz-range-thumb {
  background-color: var(--bs-secondary-color);
}

.form-floating {
  position: relative;
}
.form-floating > .form-control,
.form-floating > .form-control-plaintext,
.form-floating > .form-select {
  height: calc(3.5rem + calc(var(--bs-border-width) * 2));
  min-height: calc(3.5rem + calc(var(--bs-border-width) * 2));
  line-height: 1.25;
}
.form-floating > label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  height: 100%;
  padding: 1rem 0.75rem;
  overflow: hidden;
  text-align: start;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  border: var(--bs-border-width) solid transparent;
  transform-origin: 0 0;
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-floating > label {
    transition: none;
  }
}
.form-floating > .form-control,
.form-floating > .form-control-plaintext {
  padding: 1rem 0.75rem;
}
.form-floating > .form-control::-moz-placeholder, .form-floating > .form-control-plaintext::-moz-placeholder {
  color: transparent;
}
.form-floating > .form-control::placeholder,
.form-floating > .form-control-plaintext::placeholder {
  color: transparent;
}
.form-floating > .form-control:not(:-moz-placeholder-shown), .form-floating > .form-control-plaintext:not(:-moz-placeholder-shown) {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}
.form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown),
.form-floating > .form-control-plaintext:focus,
.form-floating > .form-control-plaintext:not(:placeholder-shown) {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}
.form-floating > .form-control:-webkit-autofill,
.form-floating > .form-control-plaintext:-webkit-autofill {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}
.form-floating > .form-select {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}
.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label {
  color: rgba(var(--bs-body-color-rgb), 0.65);
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-control-plaintext ~ label,
.form-floating > .form-select ~ label {
  color: rgba(var(--bs-body-color-rgb), 0.65);
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label::after {
  position: absolute;
  inset: 1rem 0.375rem;
  z-index: -1;
  height: 1.5em;
  content: "";
  background-color: var(--bs-body-bg);
  border-radius: var(--bs-border-radius);
}
.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating > .form-control-plaintext ~ label::after,
.form-floating > .form-select ~ label::after {
  position: absolute;
  inset: 1rem 0.375rem;
  z-index: -1;
  height: 1.5em;
  content: "";
  background-color: var(--bs-body-bg);
  border-radius: var(--bs-border-radius);
}
.form-floating > .form-control:-webkit-autofill ~ label {
  color: rgba(var(--bs-body-color-rgb), 0.65);
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
.form-floating > .form-control-plaintext ~ label {
  border-width: var(--bs-border-width) 0;
}
.form-floating > :disabled ~ label,
.form-floating > .form-control:disabled ~ label {
  color: #6c757d;
}
.form-floating > :disabled ~ label::after,
.form-floating > .form-control:disabled ~ label::after {
  background-color: var(--bs-secondary-bg);
}

.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}
.input-group > .form-control,
.input-group > .form-select,
.input-group > .form-floating {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group > .form-control:focus,
.input-group > .form-select:focus,
.input-group > .form-floating:focus-within {
  z-index: 5;
}
.input-group .btn {
  position: relative;
  z-index: 2;
}
.input-group .btn:focus {
  z-index: 5;
}

.input-group-text {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color);
  text-align: center;
  white-space: nowrap;
  background-color: var(--bs-tertiary-bg);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}

.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-text,
.input-group-lg > .btn {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  border-radius: var(--bs-border-radius-lg);
}

.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text,
.input-group-sm > .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: var(--bs-border-radius-sm);
}

.input-group-lg > .form-select,
.input-group-sm > .form-select {
  padding-right: 3rem;
}

.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3),
.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control,
.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group.has-validation > :nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
.input-group.has-validation > .dropdown-toggle:nth-last-child(n+4),
.input-group.has-validation > .form-floating:nth-last-child(n+3) > .form-control,
.input-group.has-validation > .form-floating:nth-last-child(n+3) > .form-select {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-left: calc(var(--bs-border-width) * -1);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group > .form-floating:not(:first-child) > .form-control,
.input-group > .form-floating:not(:first-child) > .form-select {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.valid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: var(--bs-form-valid-color);
}

.valid-tooltip {
  position: absolute;
  top: 100%;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: 0.1rem;
  font-size: 0.875rem;
  color: #fff;
  background-color: var(--bs-success);
  border-radius: var(--bs-border-radius);
}

.was-validated :valid ~ .valid-feedback,
.was-validated :valid ~ .valid-tooltip,
.is-valid ~ .valid-feedback,
.is-valid ~ .valid-tooltip {
  display: block;
}

.was-validated .form-control:valid, .form-control.is-valid {
  border-color: var(--bs-form-valid-border-color);
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.was-validated .form-control:valid:focus, .form-control.is-valid:focus {
  border-color: var(--bs-form-valid-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
}

.was-validated textarea.form-control:valid, textarea.form-control.is-valid {
  padding-right: calc(1.5em + 0.75rem);
  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}

.was-validated .form-select:valid, .form-select.is-valid {
  border-color: var(--bs-form-valid-border-color);
}
.was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"], .form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"] {
  --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
  padding-right: 4.125rem;
  background-position: right 0.75rem center, center right 2.25rem;
  background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.was-validated .form-select:valid:focus, .form-select.is-valid:focus {
  border-color: var(--bs-form-valid-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
}

.was-validated .form-control-color:valid, .form-control-color.is-valid {
  width: calc(3rem + calc(1.5em + 0.75rem));
}

.was-validated .form-check-input:valid, .form-check-input.is-valid {
  border-color: var(--bs-form-valid-border-color);
}
.was-validated .form-check-input:valid:checked, .form-check-input.is-valid:checked {
  background-color: var(--bs-form-valid-color);
}
.was-validated .form-check-input:valid:focus, .form-check-input.is-valid:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
}
.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {
  color: var(--bs-form-valid-color);
}

.form-check-inline .form-check-input ~ .valid-feedback {
  margin-left: 0.5em;
}

.was-validated .input-group > .form-control:not(:focus):valid, .input-group > .form-control:not(:focus).is-valid,
.was-validated .input-group > .form-select:not(:focus):valid,
.input-group > .form-select:not(:focus).is-valid,
.was-validated .input-group > .form-floating:not(:focus-within):valid,
.input-group > .form-floating:not(:focus-within).is-valid {
  z-index: 3;
}

.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: var(--bs-form-invalid-color);
}

.invalid-tooltip {
  position: absolute;
  top: 100%;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: 0.1rem;
  font-size: 0.875rem;
  color: #fff;
  background-color: var(--bs-danger);
  border-radius: var(--bs-border-radius);
}

.was-validated :invalid ~ .invalid-feedback,
.was-validated :invalid ~ .invalid-tooltip,
.is-invalid ~ .invalid-feedback,
.is-invalid ~ .invalid-tooltip {
  display: block;
}

.was-validated .form-control:invalid, .form-control.is-invalid {
  border-color: var(--bs-form-invalid-border-color);
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
  border-color: var(--bs-form-invalid-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
}

.was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {
  padding-right: calc(1.5em + 0.75rem);
  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}

.was-validated .form-select:invalid, .form-select.is-invalid {
  border-color: var(--bs-form-invalid-border-color);
}
.was-validated .form-select:invalid:not([multiple]):not([size]), .was-validated .form-select:invalid:not([multiple])[size="1"], .form-select.is-invalid:not([multiple]):not([size]), .form-select.is-invalid:not([multiple])[size="1"] {
  --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  padding-right: 4.125rem;
  background-position: right 0.75rem center, center right 2.25rem;
  background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.was-validated .form-select:invalid:focus, .form-select.is-invalid:focus {
  border-color: var(--bs-form-invalid-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
}

.was-validated .form-control-color:invalid, .form-control-color.is-invalid {
  width: calc(3rem + calc(1.5em + 0.75rem));
}

.was-validated .form-check-input:invalid, .form-check-input.is-invalid {
  border-color: var(--bs-form-invalid-border-color);
}
.was-validated .form-check-input:invalid:checked, .form-check-input.is-invalid:checked {
  background-color: var(--bs-form-invalid-color);
}
.was-validated .form-check-input:invalid:focus, .form-check-input.is-invalid:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
}
.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label {
  color: var(--bs-form-invalid-color);
}

.form-check-inline .form-check-input ~ .invalid-feedback {
  margin-left: 0.5em;
}

.was-validated .input-group > .form-control:not(:focus):invalid, .input-group > .form-control:not(:focus).is-invalid,
.was-validated .input-group > .form-select:not(:focus):invalid,
.input-group > .form-select:not(:focus).is-invalid,
.was-validated .input-group > .form-floating:not(:focus-within):invalid,
.input-group > .form-floating:not(:focus-within).is-invalid {
  z-index: 4;
}

.btn {
  --bs-btn-padding-x: 0.75rem;
  --bs-btn-padding-y: 0.375rem;
  --bs-btn-font-family: ;
  --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: 400;
  --bs-btn-line-height: 1.5;
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-width: var(--bs-border-width);
  --bs-btn-border-color: transparent;
  --bs-btn-border-radius: var(--bs-border-radius);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
  --bs-btn-disabled-opacity: 0.65;
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
  display: inline-block;
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
  font-family: var(--bs-btn-font-family);
  font-size: var(--bs-btn-font-size);
  font-weight: var(--bs-btn-font-weight);
  line-height: var(--bs-btn-line-height);
  color: var(--bs-btn-color);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
  border-radius: var(--bs-btn-border-radius);
  background-color: var(--bs-btn-bg);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}
.btn:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-check + .btn:hover {
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
}
.btn:focus-visible {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  outline: 0;
  box-shadow: var(--bs-btn-focus-box-shadow);
}
.btn-check:focus-visible + .btn {
  border-color: var(--bs-btn-hover-border-color);
  outline: 0;
  box-shadow: var(--bs-btn-focus-box-shadow);
}
.btn-check:checked + .btn, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}
.btn-check:checked + .btn:focus-visible, :not(.btn-check) + .btn:active:focus-visible, .btn:first-child:active:focus-visible, .btn.active:focus-visible, .btn.show:focus-visible {
  box-shadow: var(--bs-btn-focus-box-shadow);
}
.btn:disabled, .btn.disabled, fieldset:disabled .btn {
  color: var(--bs-btn-disabled-color);
  pointer-events: none;
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: var(--bs-btn-disabled-opacity);
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #0d6efd;
  --bs-btn-border-color: #0d6efd;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0b5ed7;
  --bs-btn-hover-border-color: #0a58ca;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0a58ca;
  --bs-btn-active-border-color: #0a53be;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0d6efd;
  --bs-btn-disabled-border-color: #0d6efd;
}

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #6c757d;
  --bs-btn-border-color: #6c757d;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #5c636a;
  --bs-btn-hover-border-color: #565e64;
  --bs-btn-focus-shadow-rgb: 130, 138, 145;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #565e64;
  --bs-btn-active-border-color: #51585e;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #6c757d;
  --bs-btn-disabled-border-color: #6c757d;
}

.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: #198754;
  --bs-btn-border-color: #198754;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #157347;
  --bs-btn-hover-border-color: #146c43;
  --bs-btn-focus-shadow-rgb: 60, 153, 110;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #146c43;
  --bs-btn-active-border-color: #13653f;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #198754;
  --bs-btn-disabled-border-color: #198754;
}

.btn-info {
  --bs-btn-color: #000;
  --bs-btn-bg: #0dcaf0;
  --bs-btn-border-color: #0dcaf0;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #31d2f2;
  --bs-btn-hover-border-color: #25cff2;
  --bs-btn-focus-shadow-rgb: 11, 172, 204;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #3dd5f3;
  --bs-btn-active-border-color: #25cff2;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #0dcaf0;
  --bs-btn-disabled-border-color: #0dcaf0;
}

.btn-warning {
  --bs-btn-color: #000;
  --bs-btn-bg: #ffc107;
  --bs-btn-border-color: #ffc107;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #ffca2c;
  --bs-btn-hover-border-color: #ffc720;
  --bs-btn-focus-shadow-rgb: 217, 164, 6;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #ffcd39;
  --bs-btn-active-border-color: #ffc720;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #ffc107;
  --bs-btn-disabled-border-color: #ffc107;
}

.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: #dc3545;
  --bs-btn-border-color: #dc3545;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #bb2d3b;
  --bs-btn-hover-border-color: #b02a37;
  --bs-btn-focus-shadow-rgb: 225, 83, 97;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #b02a37;
  --bs-btn-active-border-color: #a52834;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #dc3545;
  --bs-btn-disabled-border-color: #dc3545;
}

.btn-light {
  --bs-btn-color: #000;
  --bs-btn-bg: #f8f9fa;
  --bs-btn-border-color: #f8f9fa;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #d3d4d5;
  --bs-btn-hover-border-color: #c6c7c8;
  --bs-btn-focus-shadow-rgb: 211, 212, 213;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #c6c7c8;
  --bs-btn-active-border-color: #babbbc;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #f8f9fa;
  --bs-btn-disabled-border-color: #f8f9fa;
}

.btn-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: #212529;
  --bs-btn-border-color: #212529;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #424649;
  --bs-btn-hover-border-color: #373b3e;
  --bs-btn-focus-shadow-rgb: 66, 70, 73;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #4d5154;
  --bs-btn-active-border-color: #373b3e;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #212529;
  --bs-btn-disabled-border-color: #212529;
}

.btn-outline-primary {
  --bs-btn-color: #0d6efd;
  --bs-btn-border-color: #0d6efd;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0d6efd;
  --bs-btn-hover-border-color: #0d6efd;
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0d6efd;
  --bs-btn-active-border-color: #0d6efd;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #0d6efd;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #0d6efd;
  --bs-gradient: none;
}

.btn-outline-secondary {
  --bs-btn-color: #6c757d;
  --bs-btn-border-color: #6c757d;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #6c757d;
  --bs-btn-hover-border-color: #6c757d;
  --bs-btn-focus-shadow-rgb: 108, 117, 125;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #6c757d;
  --bs-btn-active-border-color: #6c757d;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #6c757d;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #6c757d;
  --bs-gradient: none;
}

.btn-outline-success {
  --bs-btn-color: #198754;
  --bs-btn-border-color: #198754;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #198754;
  --bs-btn-hover-border-color: #198754;
  --bs-btn-focus-shadow-rgb: 25, 135, 84;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #198754;
  --bs-btn-active-border-color: #198754;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #198754;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #198754;
  --bs-gradient: none;
}

.btn-outline-info {
  --bs-btn-color: #0dcaf0;
  --bs-btn-border-color: #0dcaf0;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #0dcaf0;
  --bs-btn-hover-border-color: #0dcaf0;
  --bs-btn-focus-shadow-rgb: 13, 202, 240;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #0dcaf0;
  --bs-btn-active-border-color: #0dcaf0;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #0dcaf0;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #0dcaf0;
  --bs-gradient: none;
}

.btn-outline-warning {
  --bs-btn-color: #ffc107;
  --bs-btn-border-color: #ffc107;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #ffc107;
  --bs-btn-hover-border-color: #ffc107;
  --bs-btn-focus-shadow-rgb: 255, 193, 7;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #ffc107;
  --bs-btn-active-border-color: #ffc107;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #ffc107;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #ffc107;
  --bs-gradient: none;
}

.btn-outline-danger {
  --bs-btn-color: #dc3545;
  --bs-btn-border-color: #dc3545;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #dc3545;
  --bs-btn-hover-border-color: #dc3545;
  --bs-btn-focus-shadow-rgb: 220, 53, 69;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #dc3545;
  --bs-btn-active-border-color: #dc3545;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #dc3545;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #dc3545;
  --bs-gradient: none;
}

.btn-outline-light {
  --bs-btn-color: #f8f9fa;
  --bs-btn-border-color: #f8f9fa;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #f8f9fa;
  --bs-btn-hover-border-color: #f8f9fa;
  --bs-btn-focus-shadow-rgb: 248, 249, 250;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #f8f9fa;
  --bs-btn-active-border-color: #f8f9fa;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #f8f9fa;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #f8f9fa;
  --bs-gradient: none;
}

.btn-outline-dark {
  --bs-btn-color: #212529;
  --bs-btn-border-color: #212529;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #212529;
  --bs-btn-hover-border-color: #212529;
  --bs-btn-focus-shadow-rgb: 33, 37, 41;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #212529;
  --bs-btn-active-border-color: #212529;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #212529;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #212529;
  --bs-gradient: none;
}

.btn-link {
  --bs-btn-font-weight: 400;
  --bs-btn-color: var(--bs-link-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--bs-link-hover-color);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--bs-link-hover-color);
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: #6c757d;
  --bs-btn-disabled-border-color: transparent;
  --bs-btn-box-shadow: 0 0 0 #000;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  text-decoration: underline;
}
.btn-link:focus-visible {
  color: var(--bs-btn-color);
}
.btn-link:hover {
  color: var(--bs-btn-hover-color);
}

.btn-lg, .btn-group-lg > .btn {
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-font-size: 1.25rem;
  --bs-btn-border-radius: var(--bs-border-radius-lg);
}

.btn-sm, .btn-group-sm > .btn {
  --bs-btn-padding-y: 0.25rem;
  --bs-btn-padding-x: 0.5rem;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-border-radius: var(--bs-border-radius-sm);
}

.fade {
  transition: opacity 0.15s linear;
}
@media (prefers-reduced-motion: reduce) {
  .fade {
    transition: none;
  }
}
.fade:not(.show) {
  opacity: 0;
}

.collapse:not(.show) {
  display: none;
}

.collapsing {
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}
@media (prefers-reduced-motion: reduce) {
  .collapsing {
    transition: none;
  }
}
.collapsing.collapse-horizontal {
  width: 0;
  height: auto;
  transition: width 0.35s ease;
}
@media (prefers-reduced-motion: reduce) {
  .collapsing.collapse-horizontal {
    transition: none;
  }
}

.dropup,
.dropend,
.dropdown,
.dropstart,
.dropup-center,
.dropdown-center {
  position: relative;
}

.dropdown-toggle {
  white-space: nowrap;
}
.dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}
.dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropdown-menu {
  --bs-dropdown-zindex: 1000;
  --bs-dropdown-min-width: 10rem;
  --bs-dropdown-padding-x: 0;
  --bs-dropdown-padding-y: 0.5rem;
  --bs-dropdown-spacer: 0.125rem;
  --bs-dropdown-font-size: 1rem;
  --bs-dropdown-color: var(--bs-body-color);
  --bs-dropdown-bg: var(--bs-body-bg);
  --bs-dropdown-border-color: var(--bs-border-color-translucent);
  --bs-dropdown-border-radius: var(--bs-border-radius);
  --bs-dropdown-border-width: var(--bs-border-width);
  --bs-dropdown-inner-border-radius: calc(var(--bs-border-radius) - var(--bs-border-width));
  --bs-dropdown-divider-bg: var(--bs-border-color-translucent);
  --bs-dropdown-divider-margin-y: 0.5rem;
  --bs-dropdown-box-shadow: var(--bs-box-shadow);
  --bs-dropdown-link-color: var(--bs-body-color);
  --bs-dropdown-link-hover-color: var(--bs-body-color);
  --bs-dropdown-link-hover-bg: var(--bs-tertiary-bg);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: #0d6efd;
  --bs-dropdown-link-disabled-color: var(--bs-tertiary-color);
  --bs-dropdown-item-padding-x: 1rem;
  --bs-dropdown-item-padding-y: 0.25rem;
  --bs-dropdown-header-color: #6c757d;
  --bs-dropdown-header-padding-x: 1rem;
  --bs-dropdown-header-padding-y: 0.5rem;
  position: absolute;
  z-index: var(--bs-dropdown-zindex);
  display: none;
  min-width: var(--bs-dropdown-min-width);
  padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);
  margin: 0;
  font-size: var(--bs-dropdown-font-size);
  color: var(--bs-dropdown-color);
  text-align: left;
  list-style: none;
  background-color: var(--bs-dropdown-bg);
  background-clip: padding-box;
  border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
  border-radius: var(--bs-dropdown-border-radius);
}
.dropdown-menu[data-bs-popper] {
  top: 100%;
  left: 0;
  margin-top: var(--bs-dropdown-spacer);
}

.dropdown-menu-start {
  --bs-position: start;
}
.dropdown-menu-start[data-bs-popper] {
  right: auto;
  left: 0;
}

.dropdown-menu-end {
  --bs-position: end;
}
.dropdown-menu-end[data-bs-popper] {
  right: 0;
  left: auto;
}

@media (min-width: 576px) {
  .dropdown-menu-sm-start {
    --bs-position: start;
  }
  .dropdown-menu-sm-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-sm-end {
    --bs-position: end;
  }
  .dropdown-menu-sm-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}
@media (min-width: 768px) {
  .dropdown-menu-md-start {
    --bs-position: start;
  }
  .dropdown-menu-md-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-md-end {
    --bs-position: end;
  }
  .dropdown-menu-md-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}
@media (min-width: 992px) {
  .dropdown-menu-lg-start {
    --bs-position: start;
  }
  .dropdown-menu-lg-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-lg-end {
    --bs-position: end;
  }
  .dropdown-menu-lg-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}
@media (min-width: 1200px) {
  .dropdown-menu-xl-start {
    --bs-position: start;
  }
  .dropdown-menu-xl-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-xl-end {
    --bs-position: end;
  }
  .dropdown-menu-xl-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}
@media (min-width: 1400px) {
  .dropdown-menu-xxl-start {
    --bs-position: start;
  }
  .dropdown-menu-xxl-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-xxl-end {
    --bs-position: end;
  }
  .dropdown-menu-xxl-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}
.dropup .dropdown-menu[data-bs-popper] {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: var(--bs-dropdown-spacer);
}
.dropup .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0;
  border-right: 0.3em solid transparent;
  border-bottom: 0.3em solid;
  border-left: 0.3em solid transparent;
}
.dropup .dropdown-toggle:empty::after {
  margin-left: 0;
}

.dropend .dropdown-menu[data-bs-popper] {
  top: 0;
  right: auto;
  left: 100%;
  margin-top: 0;
  margin-left: var(--bs-dropdown-spacer);
}
.dropend .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid transparent;
  border-right: 0;
  border-bottom: 0.3em solid transparent;
  border-left: 0.3em solid;
}
.dropend .dropdown-toggle:empty::after {
  margin-left: 0;
}
.dropend .dropdown-toggle::after {
  vertical-align: 0;
}

.dropstart .dropdown-menu[data-bs-popper] {
  top: 0;
  right: 100%;
  left: auto;
  margin-top: 0;
  margin-right: var(--bs-dropdown-spacer);
}
.dropstart .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
}
.dropstart .dropdown-toggle::after {
  display: none;
}
.dropstart .dropdown-toggle::before {
  display: inline-block;
  margin-right: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid transparent;
  border-right: 0.3em solid;
  border-bottom: 0.3em solid transparent;
}
.dropstart .dropdown-toggle:empty::after {
  margin-left: 0;
}
.dropstart .dropdown-toggle::before {
  vertical-align: 0;
}

.dropdown-divider {
  height: 0;
  margin: var(--bs-dropdown-divider-margin-y) 0;
  overflow: hidden;
  border-top: 1px solid var(--bs-dropdown-divider-bg);
  opacity: 1;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
  clear: both;
  font-weight: 400;
  color: var(--bs-dropdown-link-color);
  text-align: inherit;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  border-radius: var(--bs-dropdown-item-border-radius, 0);
}
.dropdown-item:hover, .dropdown-item:focus {
  color: var(--bs-dropdown-link-hover-color);
  background-color: var(--bs-dropdown-link-hover-bg);
}
.dropdown-item.active, .dropdown-item:active {
  color: var(--bs-dropdown-link-active-color);
  text-decoration: none;
  background-color: var(--bs-dropdown-link-active-bg);
}
.dropdown-item.disabled, .dropdown-item:disabled {
  color: var(--bs-dropdown-link-disabled-color);
  pointer-events: none;
  background-color: transparent;
}

.dropdown-menu.show {
  display: block;
}

.dropdown-header {
  display: block;
  padding: var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x);
  margin-bottom: 0;
  font-size: 0.875rem;
  color: var(--bs-dropdown-header-color);
  white-space: nowrap;
}

.dropdown-item-text {
  display: block;
  padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
  color: var(--bs-dropdown-link-color);
}

.dropdown-menu-dark {
  --bs-dropdown-color: #dee2e6;
  --bs-dropdown-bg: #343a40;
  --bs-dropdown-border-color: var(--bs-border-color-translucent);
  --bs-dropdown-box-shadow: ;
  --bs-dropdown-link-color: #dee2e6;
  --bs-dropdown-link-hover-color: #fff;
  --bs-dropdown-divider-bg: var(--bs-border-color-translucent);
  --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.15);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: #0d6efd;
  --bs-dropdown-link-disabled-color: #adb5bd;
  --bs-dropdown-header-color: #adb5bd;
}

.btn-group,
.btn-group-vertical {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}
.btn-group > .btn,
.btn-group-vertical > .btn {
  position: relative;
  flex: 1 1 auto;
}
.btn-group > .btn-check:checked + .btn,
.btn-group > .btn-check:focus + .btn,
.btn-group > .btn:hover,
.btn-group > .btn:focus,
.btn-group > .btn:active,
.btn-group > .btn.active,
.btn-group-vertical > .btn-check:checked + .btn,
.btn-group-vertical > .btn-check:focus + .btn,
.btn-group-vertical > .btn:hover,
.btn-group-vertical > .btn:focus,
.btn-group-vertical > .btn:active,
.btn-group-vertical > .btn.active {
  z-index: 1;
}

.btn-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.btn-toolbar .input-group {
  width: auto;
}

.btn-group {
  border-radius: var(--bs-border-radius);
}
.btn-group > :not(.btn-check:first-child) + .btn,
.btn-group > .btn-group:not(:first-child) {
  margin-left: calc(var(--bs-border-width) * -1);
}
.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn.dropdown-toggle-split:first-child,
.btn-group > .btn-group:not(:last-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.btn-group > .btn:nth-child(n+3),
.btn-group > :not(.btn-check) + .btn,
.btn-group > .btn-group:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.dropdown-toggle-split {
  padding-right: 0.5625rem;
  padding-left: 0.5625rem;
}
.dropdown-toggle-split::after, .dropup .dropdown-toggle-split::after, .dropend .dropdown-toggle-split::after {
  margin-left: 0;
}
.dropstart .dropdown-toggle-split::before {
  margin-right: 0;
}

.btn-sm + .dropdown-toggle-split, .btn-group-sm > .btn + .dropdown-toggle-split {
  padding-right: 0.375rem;
  padding-left: 0.375rem;
}

.btn-lg + .dropdown-toggle-split, .btn-group-lg > .btn + .dropdown-toggle-split {
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}

.btn-group-vertical {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group {
  width: 100%;
}
.btn-group-vertical > .btn:not(:first-child),
.btn-group-vertical > .btn-group:not(:first-child) {
  margin-top: calc(var(--bs-border-width) * -1);
}
.btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group-vertical > .btn-group:not(:last-child) > .btn {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn ~ .btn,
.btn-group-vertical > .btn-group:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.nav {
  --bs-nav-link-padding-x: 1rem;
  --bs-nav-link-padding-y: 0.5rem;
  --bs-nav-link-font-weight: ;
  --bs-nav-link-color: var(--bs-link-color);
  --bs-nav-link-hover-color: var(--bs-link-hover-color);
  --bs-nav-link-disabled-color: var(--bs-secondary-color);
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.nav-link {
  display: block;
  padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
  font-size: var(--bs-nav-link-font-size);
  font-weight: var(--bs-nav-link-font-weight);
  color: var(--bs-nav-link-color);
  text-decoration: none;
  background: none;
  border: 0;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .nav-link {
    transition: none;
  }
}
.nav-link:hover, .nav-link:focus {
  color: var(--bs-nav-link-hover-color);
}
.nav-link:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.nav-link.disabled, .nav-link:disabled {
  color: var(--bs-nav-link-disabled-color);
  pointer-events: none;
  cursor: default;
}

.nav-tabs {
  --bs-nav-tabs-border-width: var(--bs-border-width);
  --bs-nav-tabs-border-color: var(--bs-border-color);
  --bs-nav-tabs-border-radius: var(--bs-border-radius);
  --bs-nav-tabs-link-hover-border-color: var(--bs-secondary-bg) var(--bs-secondary-bg) var(--bs-border-color);
  --bs-nav-tabs-link-active-color: var(--bs-emphasis-color);
  --bs-nav-tabs-link-active-bg: var(--bs-body-bg);
  --bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg);
  border-bottom: var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color);
}
.nav-tabs .nav-link {
  margin-bottom: calc(-1 * var(--bs-nav-tabs-border-width));
  border: var(--bs-nav-tabs-border-width) solid transparent;
  border-top-left-radius: var(--bs-nav-tabs-border-radius);
  border-top-right-radius: var(--bs-nav-tabs-border-radius);
}
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
  isolation: isolate;
  border-color: var(--bs-nav-tabs-link-hover-border-color);
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--bs-nav-tabs-link-active-color);
  background-color: var(--bs-nav-tabs-link-active-bg);
  border-color: var(--bs-nav-tabs-link-active-border-color);
}
.nav-tabs .dropdown-menu {
  margin-top: calc(-1 * var(--bs-nav-tabs-border-width));
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.nav-pills {
  --bs-nav-pills-border-radius: var(--bs-border-radius);
  --bs-nav-pills-link-active-color: #fff;
  --bs-nav-pills-link-active-bg: #0d6efd;
}
.nav-pills .nav-link {
  border-radius: var(--bs-nav-pills-border-radius);
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: var(--bs-nav-pills-link-active-color);
  background-color: var(--bs-nav-pills-link-active-bg);
}

.nav-underline {
  --bs-nav-underline-gap: 1rem;
  --bs-nav-underline-border-width: 0.125rem;
  --bs-nav-underline-link-active-color: var(--bs-emphasis-color);
  gap: var(--bs-nav-underline-gap);
}
.nav-underline .nav-link {
  padding-right: 0;
  padding-left: 0;
  border-bottom: var(--bs-nav-underline-border-width) solid transparent;
}
.nav-underline .nav-link:hover, .nav-underline .nav-link:focus {
  border-bottom-color: currentcolor;
}
.nav-underline .nav-link.active,
.nav-underline .show > .nav-link {
  font-weight: 700;
  color: var(--bs-nav-underline-link-active-color);
  border-bottom-color: currentcolor;
}

.nav-fill > .nav-link,
.nav-fill .nav-item {
  flex: 1 1 auto;
  text-align: center;
}

.nav-justified > .nav-link,
.nav-justified .nav-item {
  flex-basis: 0;
  flex-grow: 1;
  text-align: center;
}

.nav-fill .nav-item .nav-link,
.nav-justified .nav-item .nav-link {
  width: 100%;
}

.tab-content > .tab-pane {
  display: none;
}
.tab-content > .active {
  display: block;
}

.navbar {
  --bs-navbar-padding-x: 0;
  --bs-navbar-padding-y: 0.5rem;
  --bs-navbar-color: rgba(var(--bs-emphasis-color-rgb), 0.65);
  --bs-navbar-hover-color: rgba(var(--bs-emphasis-color-rgb), 0.8);
  --bs-navbar-disabled-color: rgba(var(--bs-emphasis-color-rgb), 0.3);
  --bs-navbar-active-color: rgba(var(--bs-emphasis-color-rgb), 1);
  --bs-navbar-brand-padding-y: 0.3125rem;
  --bs-navbar-brand-margin-end: 1rem;
  --bs-navbar-brand-font-size: 1.25rem;
  --bs-navbar-brand-color: rgba(var(--bs-emphasis-color-rgb), 1);
  --bs-navbar-brand-hover-color: rgba(var(--bs-emphasis-color-rgb), 1);
  --bs-navbar-nav-link-padding-x: 0.5rem;
  --bs-navbar-toggler-padding-y: 0.25rem;
  --bs-navbar-toggler-padding-x: 0.75rem;
  --bs-navbar-toggler-font-size: 1.25rem;
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --bs-navbar-toggler-border-color: rgba(var(--bs-emphasis-color-rgb), 0.15);
  --bs-navbar-toggler-border-radius: var(--bs-border-radius);
  --bs-navbar-toggler-focus-width: 0.25rem;
  --bs-navbar-toggler-transition: box-shadow 0.15s ease-in-out;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: var(--bs-navbar-padding-y) var(--bs-navbar-padding-x);
}
.navbar > .container,
.navbar > .container-fluid,
.navbar > .container-sm,
.navbar > .container-md,
.navbar > .container-lg,
.navbar > .container-xl,
.navbar > .container-xxl {
  display: flex;
  flex-wrap: inherit;
  align-items: center;
  justify-content: space-between;
}
.navbar-brand {
  padding-top: var(--bs-navbar-brand-padding-y);
  padding-bottom: var(--bs-navbar-brand-padding-y);
  margin-right: var(--bs-navbar-brand-margin-end);
  font-size: var(--bs-navbar-brand-font-size);
  color: var(--bs-navbar-brand-color);
  text-decoration: none;
  white-space: nowrap;
}
.navbar-brand:hover, .navbar-brand:focus {
  color: var(--bs-navbar-brand-hover-color);
}

.navbar-nav {
  --bs-nav-link-padding-x: 0;
  --bs-nav-link-padding-y: 0.5rem;
  --bs-nav-link-font-weight: ;
  --bs-nav-link-color: var(--bs-navbar-color);
  --bs-nav-link-hover-color: var(--bs-navbar-hover-color);
  --bs-nav-link-disabled-color: var(--bs-navbar-disabled-color);
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
  color: var(--bs-navbar-active-color);
}
.navbar-nav .dropdown-menu {
  position: static;
}

.navbar-text {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: var(--bs-navbar-color);
}
.navbar-text a,
.navbar-text a:hover,
.navbar-text a:focus {
  color: var(--bs-navbar-active-color);
}

.navbar-collapse {
  flex-basis: 100%;
  flex-grow: 1;
  align-items: center;
}

.navbar-toggler {
  padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
  font-size: var(--bs-navbar-toggler-font-size);
  line-height: 1;
  color: var(--bs-navbar-color);
  background-color: transparent;
  border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);
  border-radius: var(--bs-navbar-toggler-border-radius);
  transition: var(--bs-navbar-toggler-transition);
}
@media (prefers-reduced-motion: reduce) {
  .navbar-toggler {
    transition: none;
  }
}
.navbar-toggler:hover {
  text-decoration: none;
}
.navbar-toggler:focus {
  text-decoration: none;
  outline: 0;
  box-shadow: 0 0 0 var(--bs-navbar-toggler-focus-width);
}

.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  background-image: var(--bs-navbar-toggler-icon-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

.navbar-nav-scroll {
  max-height: var(--bs-scroll-height, 75vh);
  overflow-y: auto;
}

@media (min-width: 576px) {
  .navbar-expand-sm {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-sm .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-sm .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-sm .navbar-nav .nav-link {
    padding-right: var(--bs-navbar-nav-link-padding-x);
    padding-left: var(--bs-navbar-nav-link-padding-x);
  }
  .navbar-expand-sm .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-sm .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-sm .navbar-toggler {
    display: none;
  }
  .navbar-expand-sm .offcanvas {
    position: static;
    z-index: auto;
    flex-grow: 1;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: 0 !important;
    transform: none !important;
    transition: none;
  }
  .navbar-expand-sm .offcanvas .offcanvas-header {
    display: none;
  }
  .navbar-expand-sm .offcanvas .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}
@media (min-width: 768px) {
  .navbar-expand-md {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-md .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-md .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-md .navbar-nav .nav-link {
    padding-right: var(--bs-navbar-nav-link-padding-x);
    padding-left: var(--bs-navbar-nav-link-padding-x);
  }
  .navbar-expand-md .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-md .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-md .navbar-toggler {
    display: none;
  }
  .navbar-expand-md .offcanvas {
    position: static;
    z-index: auto;
    flex-grow: 1;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: 0 !important;
    transform: none !important;
    transition: none;
  }
  .navbar-expand-md .offcanvas .offcanvas-header {
    display: none;
  }
  .navbar-expand-md .offcanvas .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}
@media (min-width: 992px) {
  .navbar-expand-lg {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-lg .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: var(--bs-navbar-nav-link-padding-x);
    padding-left: var(--bs-navbar-nav-link-padding-x);
  }
  .navbar-expand-lg .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-lg .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-lg .navbar-toggler {
    display: none;
  }
  .navbar-expand-lg .offcanvas {
    position: static;
    z-index: auto;
    flex-grow: 1;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: 0 !important;
    transform: none !important;
    transition: none;
  }
  .navbar-expand-lg .offcanvas .offcanvas-header {
    display: none;
  }
  .navbar-expand-lg .offcanvas .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}
@media (min-width: 1200px) {
  .navbar-expand-xl {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-xl .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-xl .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-xl .navbar-nav .nav-link {
    padding-right: var(--bs-navbar-nav-link-padding-x);
    padding-left: var(--bs-navbar-nav-link-padding-x);
  }
  .navbar-expand-xl .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-xl .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-xl .navbar-toggler {
    display: none;
  }
  .navbar-expand-xl .offcanvas {
    position: static;
    z-index: auto;
    flex-grow: 1;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: 0 !important;
    transform: none !important;
    transition: none;
  }
  .navbar-expand-xl .offcanvas .offcanvas-header {
    display: none;
  }
  .navbar-expand-xl .offcanvas .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}
@media (min-width: 1400px) {
  .navbar-expand-xxl {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-xxl .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-xxl .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-xxl .navbar-nav .nav-link {
    padding-right: var(--bs-navbar-nav-link-padding-x);
    padding-left: var(--bs-navbar-nav-link-padding-x);
  }
  .navbar-expand-xxl .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-xxl .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-xxl .navbar-toggler {
    display: none;
  }
  .navbar-expand-xxl .offcanvas {
    position: static;
    z-index: auto;
    flex-grow: 1;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: 0 !important;
    transform: none !important;
    transition: none;
  }
  .navbar-expand-xxl .offcanvas .offcanvas-header {
    display: none;
  }
  .navbar-expand-xxl .offcanvas .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}
.navbar-expand {
  flex-wrap: nowrap;
  justify-content: flex-start;
}
.navbar-expand .navbar-nav {
  flex-direction: row;
}
.navbar-expand .navbar-nav .dropdown-menu {
  position: absolute;
}
.navbar-expand .navbar-nav .nav-link {
  padding-right: var(--bs-navbar-nav-link-padding-x);
  padding-left: var(--bs-navbar-nav-link-padding-x);
}
.navbar-expand .navbar-nav-scroll {
  overflow: visible;
}
.navbar-expand .navbar-collapse {
  display: flex !important;
  flex-basis: auto;
}
.navbar-expand .navbar-toggler {
  display: none;
}
.navbar-expand .offcanvas {
  position: static;
  z-index: auto;
  flex-grow: 1;
  width: auto !important;
  height: auto !important;
  visibility: visible !important;
  background-color: transparent !important;
  border: 0 !important;
  transform: none !important;
  transition: none;
}
.navbar-expand .offcanvas .offcanvas-header {
  display: none;
}
.navbar-expand .offcanvas .offcanvas-body {
  display: flex;
  flex-grow: 0;
  padding: 0;
  overflow-y: visible;
}

.navbar-dark,
.navbar[data-bs-theme=dark] {
  --bs-navbar-color: rgba(255, 255, 255, 0.55);
  --bs-navbar-hover-color: rgba(255, 255, 255, 0.75);
  --bs-navbar-disabled-color: rgba(255, 255, 255, 0.25);
  --bs-navbar-active-color: #fff;
  --bs-navbar-brand-color: #fff;
  --bs-navbar-brand-hover-color: #fff;
  --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.1);
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

[data-bs-theme=dark] .navbar-toggler-icon {
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.card {
  --bs-card-spacer-y: 1rem;
  --bs-card-spacer-x: 1rem;
  --bs-card-title-spacer-y: 0.5rem;
  --bs-card-title-color: ;
  --bs-card-subtitle-color: ;
  --bs-card-border-width: var(--bs-border-width);
  --bs-card-border-color: var(--bs-border-color-translucent);
  --bs-card-border-radius: var(--bs-border-radius);
  --bs-card-box-shadow: ;
  --bs-card-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
  --bs-card-cap-padding-y: 0.5rem;
  --bs-card-cap-padding-x: 1rem;
  --bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.03);
  --bs-card-cap-color: ;
  --bs-card-height: ;
  --bs-card-color: ;
  --bs-card-bg: var(--bs-body-bg);
  --bs-card-img-overlay-padding: 1rem;
  --bs-card-group-margin: 0.75rem;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: var(--bs-card-height);
  color: var(--bs-body-color);
  word-wrap: break-word;
  background-color: var(--bs-card-bg);
  background-clip: border-box;
  border: var(--bs-card-border-width) solid var(--bs-card-border-color);
  border-radius: var(--bs-card-border-radius);
}
.card > hr {
  margin-right: 0;
  margin-left: 0;
}
.card > .list-group {
  border-top: inherit;
  border-bottom: inherit;
}
.card > .list-group:first-child {
  border-top-width: 0;
  border-top-left-radius: var(--bs-card-inner-border-radius);
  border-top-right-radius: var(--bs-card-inner-border-radius);
}
.card > .list-group:last-child {
  border-bottom-width: 0;
  border-bottom-right-radius: var(--bs-card-inner-border-radius);
  border-bottom-left-radius: var(--bs-card-inner-border-radius);
}
.card > .card-header + .list-group,
.card > .list-group + .card-footer {
  border-top: 0;
}

.card-body {
  flex: 1 1 auto;
  padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
  color: var(--bs-card-color);
}

.card-title {
  margin-bottom: var(--bs-card-title-spacer-y);
  color: var(--bs-card-title-color);
}

.card-subtitle {
  margin-top: calc(-0.5 * var(--bs-card-title-spacer-y));
  margin-bottom: 0;
  color: var(--bs-card-subtitle-color);
}

.card-text:last-child {
  margin-bottom: 0;
}

.card-link + .card-link {
  margin-left: var(--bs-card-spacer-x);
}

.card-header {
  padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
  margin-bottom: 0;
  color: var(--bs-card-cap-color);
  background-color: var(--bs-card-cap-bg);
  border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
}
.card-header:first-child {
  border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0;
}

.card-footer {
  padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
  color: var(--bs-card-cap-color);
  background-color: var(--bs-card-cap-bg);
  border-top: var(--bs-card-border-width) solid var(--bs-card-border-color);
}
.card-footer:last-child {
  border-radius: 0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius);
}

.card-header-tabs {
  margin-right: calc(-0.5 * var(--bs-card-cap-padding-x));
  margin-bottom: calc(-1 * var(--bs-card-cap-padding-y));
  margin-left: calc(-0.5 * var(--bs-card-cap-padding-x));
  border-bottom: 0;
}
.card-header-tabs .nav-link.active {
  background-color: var(--bs-card-bg);
  border-bottom-color: var(--bs-card-bg);
}

.card-header-pills {
  margin-right: calc(-0.5 * var(--bs-card-cap-padding-x));
  margin-left: calc(-0.5 * var(--bs-card-cap-padding-x));
}

.card-img-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: var(--bs-card-img-overlay-padding);
  border-radius: var(--bs-card-inner-border-radius);
}

.card-img,
.card-img-top,
.card-img-bottom {
  width: 100%;
}

.card-img,
.card-img-top {
  border-top-left-radius: var(--bs-card-inner-border-radius);
  border-top-right-radius: var(--bs-card-inner-border-radius);
}

.card-img,
.card-img-bottom {
  border-bottom-right-radius: var(--bs-card-inner-border-radius);
  border-bottom-left-radius: var(--bs-card-inner-border-radius);
}

.card-group > .card {
  margin-bottom: var(--bs-card-group-margin);
}
@media (min-width: 576px) {
  .card-group {
    display: flex;
    flex-flow: row wrap;
  }
  .card-group > .card {
    flex: 1 0 0%;
    margin-bottom: 0;
  }
  .card-group > .card + .card {
    margin-left: 0;
    border-left: 0;
  }
  .card-group > .card:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .card-group > .card:not(:last-child) .card-img-top,
  .card-group > .card:not(:last-child) .card-header {
    border-top-right-radius: 0;
  }
  .card-group > .card:not(:last-child) .card-img-bottom,
  .card-group > .card:not(:last-child) .card-footer {
    border-bottom-right-radius: 0;
  }
  .card-group > .card:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .card-group > .card:not(:first-child) .card-img-top,
  .card-group > .card:not(:first-child) .card-header {
    border-top-left-radius: 0;
  }
  .card-group > .card:not(:first-child) .card-img-bottom,
  .card-group > .card:not(:first-child) .card-footer {
    border-bottom-left-radius: 0;
  }
}

.accordion {
  --bs-accordion-color: var(--bs-body-color);
  --bs-accordion-bg: var(--bs-body-bg);
  --bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
  --bs-accordion-border-color: var(--bs-border-color);
  --bs-accordion-border-width: var(--bs-border-width);
  --bs-accordion-border-radius: var(--bs-border-radius);
  --bs-accordion-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
  --bs-accordion-btn-padding-x: 1.25rem;
  --bs-accordion-btn-padding-y: 1rem;
  --bs-accordion-btn-color: var(--bs-body-color);
  --bs-accordion-btn-bg: var(--bs-accordion-bg);
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-icon-width: 1.25rem;
  --bs-accordion-btn-icon-transform: rotate(-180deg);
  --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23052c65'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-focus-border-color: #86b7fe;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  --bs-accordion-body-padding-x: 1.25rem;
  --bs-accordion-body-padding-y: 1rem;
  --bs-accordion-active-color: var(--bs-primary-text-emphasis);
  --bs-accordion-active-bg: var(--bs-primary-bg-subtle);
}

.accordion-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
  font-size: 1rem;
  color: var(--bs-accordion-btn-color);
  text-align: left;
  background-color: var(--bs-accordion-btn-bg);
  border: 0;
  border-radius: 0;
  overflow-anchor: none;
  transition: var(--bs-accordion-transition);
}
@media (prefers-reduced-motion: reduce) {
  .accordion-button {
    transition: none;
  }
}
.accordion-button:not(.collapsed) {
  color: var(--bs-accordion-active-color);
  background-color: var(--bs-accordion-active-bg);
  box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}
.accordion-button:not(.collapsed)::after {
  background-image: var(--bs-accordion-btn-active-icon);
  transform: var(--bs-accordion-btn-icon-transform);
}
.accordion-button::after {
  flex-shrink: 0;
  width: var(--bs-accordion-btn-icon-width);
  height: var(--bs-accordion-btn-icon-width);
  margin-left: auto;
  content: "";
  background-image: var(--bs-accordion-btn-icon);
  background-repeat: no-repeat;
  background-size: var(--bs-accordion-btn-icon-width);
  transition: var(--bs-accordion-btn-icon-transition);
}
@media (prefers-reduced-motion: reduce) {
  .accordion-button::after {
    transition: none;
  }
}
.accordion-button:hover {
  z-index: 2;
}
.accordion-button:focus {
  z-index: 3;
  border-color: var(--bs-accordion-btn-focus-border-color);
  outline: 0;
  box-shadow: var(--bs-accordion-btn-focus-box-shadow);
}

.accordion-header {
  margin-bottom: 0;
}

.accordion-item {
  color: var(--bs-accordion-color);
  background-color: var(--bs-accordion-bg);
  border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
}
.accordion-item:first-of-type {
  border-top-left-radius: var(--bs-accordion-border-radius);
  border-top-right-radius: var(--bs-accordion-border-radius);
}
.accordion-item:first-of-type .accordion-button {
  border-top-left-radius: var(--bs-accordion-inner-border-radius);
  border-top-right-radius: var(--bs-accordion-inner-border-radius);
}
.accordion-item:not(:first-of-type) {
  border-top: 0;
}
.accordion-item:last-of-type {
  border-bottom-right-radius: var(--bs-accordion-border-radius);
  border-bottom-left-radius: var(--bs-accordion-border-radius);
}
.accordion-item:last-of-type .accordion-button.collapsed {
  border-bottom-right-radius: var(--bs-accordion-inner-border-radius);
  border-bottom-left-radius: var(--bs-accordion-inner-border-radius);
}
.accordion-item:last-of-type .accordion-collapse {
  border-bottom-right-radius: var(--bs-accordion-border-radius);
  border-bottom-left-radius: var(--bs-accordion-border-radius);
}

.accordion-body {
  padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x);
}

.accordion-flush .accordion-collapse {
  border-width: 0;
}
.accordion-flush .accordion-item {
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}
.accordion-flush .accordion-item:first-child {
  border-top: 0;
}
.accordion-flush .accordion-item:last-child {
  border-bottom: 0;
}
.accordion-flush .accordion-item .accordion-button, .accordion-flush .accordion-item .accordion-button.collapsed {
  border-radius: 0;
}

[data-bs-theme=dark] .accordion-button::after {
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236ea8fe'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236ea8fe'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.breadcrumb {
  --bs-breadcrumb-padding-x: 0;
  --bs-breadcrumb-padding-y: 0;
  --bs-breadcrumb-margin-bottom: 1rem;
  --bs-breadcrumb-bg: ;
  --bs-breadcrumb-border-radius: ;
  --bs-breadcrumb-divider-color: var(--bs-secondary-color);
  --bs-breadcrumb-item-padding-x: 0.5rem;
  --bs-breadcrumb-item-active-color: var(--bs-secondary-color);
  display: flex;
  flex-wrap: wrap;
  padding: var(--bs-breadcrumb-padding-y) var(--bs-breadcrumb-padding-x);
  margin-bottom: var(--bs-breadcrumb-margin-bottom);
  font-size: var(--bs-breadcrumb-font-size);
  list-style: none;
  background-color: var(--bs-breadcrumb-bg);
  border-radius: var(--bs-breadcrumb-border-radius);
}

.breadcrumb-item + .breadcrumb-item {
  padding-left: var(--bs-breadcrumb-item-padding-x);
}
.breadcrumb-item + .breadcrumb-item::before {
  float: left;
  padding-right: var(--bs-breadcrumb-item-padding-x);
  color: var(--bs-breadcrumb-divider-color);
  content: var(--bs-breadcrumb-divider, "/") /* rtl: var(--bs-breadcrumb-divider, "/") */;
}
.breadcrumb-item.active {
  color: var(--bs-breadcrumb-item-active-color);
}

.pagination {
  --bs-pagination-padding-x: 0.75rem;
  --bs-pagination-padding-y: 0.375rem;
  --bs-pagination-font-size: 1rem;
  --bs-pagination-color: var(--bs-link-color);
  --bs-pagination-bg: var(--bs-body-bg);
  --bs-pagination-border-width: var(--bs-border-width);
  --bs-pagination-border-color: var(--bs-border-color);
  --bs-pagination-border-radius: var(--bs-border-radius);
  --bs-pagination-hover-color: var(--bs-link-hover-color);
  --bs-pagination-hover-bg: var(--bs-tertiary-bg);
  --bs-pagination-hover-border-color: var(--bs-border-color);
  --bs-pagination-focus-color: var(--bs-link-hover-color);
  --bs-pagination-focus-bg: var(--bs-secondary-bg);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: #0d6efd;
  --bs-pagination-active-border-color: #0d6efd;
  --bs-pagination-disabled-color: var(--bs-secondary-color);
  --bs-pagination-disabled-bg: var(--bs-secondary-bg);
  --bs-pagination-disabled-border-color: var(--bs-border-color);
  display: flex;
  padding-left: 0;
  list-style: none;
}

.page-link {
  position: relative;
  display: block;
  padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);
  font-size: var(--bs-pagination-font-size);
  color: var(--bs-pagination-color);
  text-decoration: none;
  background-color: var(--bs-pagination-bg);
  border: var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .page-link {
    transition: none;
  }
}
.page-link:hover {
  z-index: 2;
  color: var(--bs-pagination-hover-color);
  background-color: var(--bs-pagination-hover-bg);
  border-color: var(--bs-pagination-hover-border-color);
}
.page-link:focus {
  z-index: 3;
  color: var(--bs-pagination-focus-color);
  background-color: var(--bs-pagination-focus-bg);
  outline: 0;
  box-shadow: var(--bs-pagination-focus-box-shadow);
}
.page-link.active, .active > .page-link {
  z-index: 3;
  color: var(--bs-pagination-active-color);
  background-color: var(--bs-pagination-active-bg);
  border-color: var(--bs-pagination-active-border-color);
}
.page-link.disabled, .disabled > .page-link {
  color: var(--bs-pagination-disabled-color);
  pointer-events: none;
  background-color: var(--bs-pagination-disabled-bg);
  border-color: var(--bs-pagination-disabled-border-color);
}

.page-item:not(:first-child) .page-link {
  margin-left: calc(var(--bs-border-width) * -1);
}
.page-item:first-child .page-link {
  border-top-left-radius: var(--bs-pagination-border-radius);
  border-bottom-left-radius: var(--bs-pagination-border-radius);
}
.page-item:last-child .page-link {
  border-top-right-radius: var(--bs-pagination-border-radius);
  border-bottom-right-radius: var(--bs-pagination-border-radius);
}

.pagination-lg {
  --bs-pagination-padding-x: 1.5rem;
  --bs-pagination-padding-y: 0.75rem;
  --bs-pagination-font-size: 1.25rem;
  --bs-pagination-border-radius: var(--bs-border-radius-lg);
}

.pagination-sm {
  --bs-pagination-padding-x: 0.5rem;
  --bs-pagination-padding-y: 0.25rem;
  --bs-pagination-font-size: 0.875rem;
  --bs-pagination-border-radius: var(--bs-border-radius-sm);
}

.badge {
  --bs-badge-padding-x: 0.65em;
  --bs-badge-padding-y: 0.35em;
  --bs-badge-font-size: 0.75em;
  --bs-badge-font-weight: 700;
  --bs-badge-color: #fff;
  --bs-badge-border-radius: var(--bs-border-radius);
  display: inline-block;
  padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
  font-size: var(--bs-badge-font-size);
  font-weight: var(--bs-badge-font-weight);
  line-height: 1;
  color: var(--bs-badge-color);
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: var(--bs-badge-border-radius);
}
.badge:empty {
  display: none;
}

.btn .badge {
  position: relative;
  top: -1px;
}

.alert {
  --bs-alert-bg: transparent;
  --bs-alert-padding-x: 1rem;
  --bs-alert-padding-y: 1rem;
  --bs-alert-margin-bottom: 1rem;
  --bs-alert-color: inherit;
  --bs-alert-border-color: transparent;
  --bs-alert-border: var(--bs-border-width) solid var(--bs-alert-border-color);
  --bs-alert-border-radius: var(--bs-border-radius);
  --bs-alert-link-color: inherit;
  position: relative;
  padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
  margin-bottom: var(--bs-alert-margin-bottom);
  color: var(--bs-alert-color);
  background-color: var(--bs-alert-bg);
  border: var(--bs-alert-border);
  border-radius: var(--bs-alert-border-radius);
}

.alert-heading {
  color: inherit;
}

.alert-link {
  font-weight: 700;
  color: var(--bs-alert-link-color);
}

.alert-dismissible {
  padding-right: 3rem;
}
.alert-dismissible .btn-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 1.25rem 1rem;
}

.alert-primary {
  --bs-alert-color: var(--bs-primary-text-emphasis);
  --bs-alert-bg: var(--bs-primary-bg-subtle);
  --bs-alert-border-color: var(--bs-primary-border-subtle);
  --bs-alert-link-color: var(--bs-primary-text-emphasis);
}

.alert-secondary {
  --bs-alert-color: var(--bs-secondary-text-emphasis);
  --bs-alert-bg: var(--bs-secondary-bg-subtle);
  --bs-alert-border-color: var(--bs-secondary-border-subtle);
  --bs-alert-link-color: var(--bs-secondary-text-emphasis);
}

.alert-success {
  --bs-alert-color: var(--bs-success-text-emphasis);
  --bs-alert-bg: var(--bs-success-bg-subtle);
  --bs-alert-border-color: var(--bs-success-border-subtle);
  --bs-alert-link-color: var(--bs-success-text-emphasis);
}

.alert-info {
  --bs-alert-color: var(--bs-info-text-emphasis);
  --bs-alert-bg: var(--bs-info-bg-subtle);
  --bs-alert-border-color: var(--bs-info-border-subtle);
  --bs-alert-link-color: var(--bs-info-text-emphasis);
}

.alert-warning {
  --bs-alert-color: var(--bs-warning-text-emphasis);
  --bs-alert-bg: var(--bs-warning-bg-subtle);
  --bs-alert-border-color: var(--bs-warning-border-subtle);
  --bs-alert-link-color: var(--bs-warning-text-emphasis);
}

.alert-danger {
  --bs-alert-color: var(--bs-danger-text-emphasis);
  --bs-alert-bg: var(--bs-danger-bg-subtle);
  --bs-alert-border-color: var(--bs-danger-border-subtle);
  --bs-alert-link-color: var(--bs-danger-text-emphasis);
}

.alert-light {
  --bs-alert-color: var(--bs-light-text-emphasis);
  --bs-alert-bg: var(--bs-light-bg-subtle);
  --bs-alert-border-color: var(--bs-light-border-subtle);
  --bs-alert-link-color: var(--bs-light-text-emphasis);
}

.alert-dark {
  --bs-alert-color: var(--bs-dark-text-emphasis);
  --bs-alert-bg: var(--bs-dark-bg-subtle);
  --bs-alert-border-color: var(--bs-dark-border-subtle);
  --bs-alert-link-color: var(--bs-dark-text-emphasis);
}

@keyframes progress-bar-stripes {
  0% {
    background-position-x: 1rem;
  }
}
.progress,
.progress-stacked {
  --bs-progress-height: 1rem;
  --bs-progress-font-size: 0.75rem;
  --bs-progress-bg: var(--bs-secondary-bg);
  --bs-progress-border-radius: var(--bs-border-radius);
  --bs-progress-box-shadow: var(--bs-box-shadow-inset);
  --bs-progress-bar-color: #fff;
  --bs-progress-bar-bg: #0d6efd;
  --bs-progress-bar-transition: width 0.6s ease;
  display: flex;
  height: var(--bs-progress-height);
  overflow: hidden;
  font-size: var(--bs-progress-font-size);
  background-color: var(--bs-progress-bg);
  border-radius: var(--bs-progress-border-radius);
}

.progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: var(--bs-progress-bar-color);
  text-align: center;
  white-space: nowrap;
  background-color: var(--bs-progress-bar-bg);
  transition: var(--bs-progress-bar-transition);
}
@media (prefers-reduced-motion: reduce) {
  .progress-bar {
    transition: none;
  }
}

.progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: var(--bs-progress-height) var(--bs-progress-height);
}

.progress-stacked > .progress {
  overflow: visible;
}

.progress-stacked > .progress > .progress-bar {
  width: 100%;
}

.progress-bar-animated {
  animation: 1s linear infinite progress-bar-stripes;
}
@media (prefers-reduced-motion: reduce) {
  .progress-bar-animated {
    animation: none;
  }
}

.list-group {
  --bs-list-group-color: var(--bs-body-color);
  --bs-list-group-bg: var(--bs-body-bg);
  --bs-list-group-border-color: var(--bs-border-color);
  --bs-list-group-border-width: var(--bs-border-width);
  --bs-list-group-border-radius: var(--bs-border-radius);
  --bs-list-group-item-padding-x: 1rem;
  --bs-list-group-item-padding-y: 0.5rem;
  --bs-list-group-action-color: var(--bs-secondary-color);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-tertiary-bg);
  --bs-list-group-action-active-color: var(--bs-body-color);
  --bs-list-group-action-active-bg: var(--bs-secondary-bg);
  --bs-list-group-disabled-color: var(--bs-secondary-color);
  --bs-list-group-disabled-bg: var(--bs-body-bg);
  --bs-list-group-active-color: #fff;
  --bs-list-group-active-bg: #0d6efd;
  --bs-list-group-active-border-color: #0d6efd;
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  border-radius: var(--bs-list-group-border-radius);
}

.list-group-numbered {
  list-style-type: none;
  counter-reset: section;
}
.list-group-numbered > .list-group-item::before {
  content: counters(section, ".") ". ";
  counter-increment: section;
}

.list-group-item-action {
  width: 100%;
  color: var(--bs-list-group-action-color);
  text-align: inherit;
}
.list-group-item-action:hover, .list-group-item-action:focus {
  z-index: 1;
  color: var(--bs-list-group-action-hover-color);
  text-decoration: none;
  background-color: var(--bs-list-group-action-hover-bg);
}
.list-group-item-action:active {
  color: var(--bs-list-group-action-active-color);
  background-color: var(--bs-list-group-action-active-bg);
}

.list-group-item {
  position: relative;
  display: block;
  padding: var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x);
  color: var(--bs-list-group-color);
  text-decoration: none;
  background-color: var(--bs-list-group-bg);
  border: var(--bs-list-group-border-width) solid var(--bs-list-group-border-color);
}
.list-group-item:first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.list-group-item:last-child {
  border-bottom-right-radius: inherit;
  border-bottom-left-radius: inherit;
}
.list-group-item.disabled, .list-group-item:disabled {
  color: var(--bs-list-group-disabled-color);
  pointer-events: none;
  background-color: var(--bs-list-group-disabled-bg);
}
.list-group-item.active {
  z-index: 2;
  color: var(--bs-list-group-active-color);
  background-color: var(--bs-list-group-active-bg);
  border-color: var(--bs-list-group-active-border-color);
}
.list-group-item + .list-group-item {
  border-top-width: 0;
}
.list-group-item + .list-group-item.active {
  margin-top: calc(-1 * var(--bs-list-group-border-width));
  border-top-width: var(--bs-list-group-border-width);
}

.list-group-horizontal {
  flex-direction: row;
}
.list-group-horizontal > .list-group-item:first-child:not(:last-child) {
  border-bottom-left-radius: var(--bs-list-group-border-radius);
  border-top-right-radius: 0;
}
.list-group-horizontal > .list-group-item:last-child:not(:first-child) {
  border-top-right-radius: var(--bs-list-group-border-radius);
  border-bottom-left-radius: 0;
}
.list-group-horizontal > .list-group-item.active {
  margin-top: 0;
}
.list-group-horizontal > .list-group-item + .list-group-item {
  border-top-width: var(--bs-list-group-border-width);
  border-left-width: 0;
}
.list-group-horizontal > .list-group-item + .list-group-item.active {
  margin-left: calc(-1 * var(--bs-list-group-border-width));
  border-left-width: var(--bs-list-group-border-width);
}

@media (min-width: 576px) {
  .list-group-horizontal-sm {
    flex-direction: row;
  }
  .list-group-horizontal-sm > .list-group-item:first-child:not(:last-child) {
    border-bottom-left-radius: var(--bs-list-group-border-radius);
    border-top-right-radius: 0;
  }
  .list-group-horizontal-sm > .list-group-item:last-child:not(:first-child) {
    border-top-right-radius: var(--bs-list-group-border-radius);
    border-bottom-left-radius: 0;
  }
  .list-group-horizontal-sm > .list-group-item.active {
    margin-top: 0;
  }
  .list-group-horizontal-sm > .list-group-item + .list-group-item {
    border-top-width: var(--bs-list-group-border-width);
    border-left-width: 0;
  }
  .list-group-horizontal-sm > .list-group-item + .list-group-item.active {
    margin-left: calc(-1 * var(--bs-list-group-border-width));
    border-left-width: var(--bs-list-group-border-width);
  }
}
@media (min-width: 768px) {
  .list-group-horizontal-md {
    flex-direction: row;
  }
  .list-group-horizontal-md > .list-group-item:first-child:not(:last-child) {
    border-bottom-left-radius: var(--bs-list-group-border-radius);
    border-top-right-radius: 0;
  }
  .list-group-horizontal-md > .list-group-item:last-child:not(:first-child) {
    border-top-right-radius: var(--bs-list-group-border-radius);
    border-bottom-left-radius: 0;
  }
  .list-group-horizontal-md > .list-group-item.active {
    margin-top: 0;
  }
  .list-group-horizontal-md > .list-group-item + .list-group-item {
    border-top-width: var(--bs-list-group-border-width);
    border-left-width: 0;
  }
  .list-group-horizontal-md > .list-group-item + .list-group-item.active {
    margin-left: calc(-1 * var(--bs-list-group-border-width));
    border-left-width: var(--bs-list-group-border-width);
  }
}
@media (min-width: 992px) {
  .list-group-horizontal-lg {
    flex-direction: row;
  }
  .list-group-horizontal-lg > .list-group-item:first-child:not(:last-child) {
    border-bottom-left-radius: var(--bs-list-group-border-radius);
    border-top-right-radius: 0;
  }
  .list-group-horizontal-lg > .list-group-item:last-child:not(:first-child) {
    border-top-right-radius: var(--bs-list-group-border-radius);
    border-bottom-left-radius: 0;
  }
  .list-group-horizontal-lg > .list-group-item.active {
    margin-top: 0;
  }
  .list-group-horizontal-lg > .list-group-item + .list-group-item {
    border-top-width: var(--bs-list-group-border-width);
    border-left-width: 0;
  }
  .list-group-horizontal-lg > .list-group-item + .list-group-item.active {
    margin-left: calc(-1 * var(--bs-list-group-border-width));
    border-left-width: var(--bs-list-group-border-width);
  }
}
@media (min-width: 1200px) {
  .list-group-horizontal-xl {
    flex-direction: row;
  }
  .list-group-horizontal-xl > .list-group-item:first-child:not(:last-child) {
    border-bottom-left-radius: var(--bs-list-group-border-radius);
    border-top-right-radius: 0;
  }
  .list-group-horizontal-xl > .list-group-item:last-child:not(:first-child) {
    border-top-right-radius: var(--bs-list-group-border-radius);
    border-bottom-left-radius: 0;
  }
  .list-group-horizontal-xl > .list-group-item.active {
    margin-top: 0;
  }
  .list-group-horizontal-xl > .list-group-item + .list-group-item {
    border-top-width: var(--bs-list-group-border-width);
    border-left-width: 0;
  }
  .list-group-horizontal-xl > .list-group-item + .list-group-item.active {
    margin-left: calc(-1 * var(--bs-list-group-border-width));
    border-left-width: var(--bs-list-group-border-width);
  }
}
@media (min-width: 1400px) {
  .list-group-horizontal-xxl {
    flex-direction: row;
  }
  .list-group-horizontal-xxl > .list-group-item:first-child:not(:last-child) {
    border-bottom-left-radius: var(--bs-list-group-border-radius);
    border-top-right-radius: 0;
  }
  .list-group-horizontal-xxl > .list-group-item:last-child:not(:first-child) {
    border-top-right-radius: var(--bs-list-group-border-radius);
    border-bottom-left-radius: 0;
  }
  .list-group-horizontal-xxl > .list-group-item.active {
    margin-top: 0;
  }
  .list-group-horizontal-xxl > .list-group-item + .list-group-item {
    border-top-width: var(--bs-list-group-border-width);
    border-left-width: 0;
  }
  .list-group-horizontal-xxl > .list-group-item + .list-group-item.active {
    margin-left: calc(-1 * var(--bs-list-group-border-width));
    border-left-width: var(--bs-list-group-border-width);
  }
}
.list-group-flush {
  border-radius: 0;
}
.list-group-flush > .list-group-item {
  border-width: 0 0 var(--bs-list-group-border-width);
}
.list-group-flush > .list-group-item:last-child {
  border-bottom-width: 0;
}

.list-group-item-primary {
  --bs-list-group-color: var(--bs-primary-text-emphasis);
  --bs-list-group-bg: var(--bs-primary-bg-subtle);
  --bs-list-group-border-color: var(--bs-primary-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-primary-border-subtle);
  --bs-list-group-action-active-color: var(--bs-emphasis-color);
  --bs-list-group-action-active-bg: var(--bs-primary-border-subtle);
  --bs-list-group-active-color: var(--bs-primary-bg-subtle);
  --bs-list-group-active-bg: var(--bs-primary-text-emphasis);
  --bs-list-group-active-border-color: var(--bs-primary-text-emphasis);
}

.list-group-item-secondary {
  --bs-list-group-color: var(--bs-secondary-text-emphasis);
  --bs-list-group-bg: var(--bs-secondary-bg-subtle);
  --bs-list-group-border-color: var(--bs-secondary-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-secondary-border-subtle);
  --bs-list-group-action-active-color: var(--bs-emphasis-color);
  --bs-list-group-action-active-bg: var(--bs-secondary-border-subtle);
  --bs-list-group-active-color: var(--bs-secondary-bg-subtle);
  --bs-list-group-active-bg: var(--bs-secondary-text-emphasis);
  --bs-list-group-active-border-color: var(--bs-secondary-text-emphasis);
}

.list-group-item-success {
  --bs-list-group-color: var(--bs-success-text-emphasis);
  --bs-list-group-bg: var(--bs-success-bg-subtle);
  --bs-list-group-border-color: var(--bs-success-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-success-border-subtle);
  --bs-list-group-action-active-color: var(--bs-emphasis-color);
  --bs-list-group-action-active-bg: var(--bs-success-border-subtle);
  --bs-list-group-active-color: var(--bs-success-bg-subtle);
  --bs-list-group-active-bg: var(--bs-success-text-emphasis);
  --bs-list-group-active-border-color: var(--bs-success-text-emphasis);
}

.list-group-item-info {
  --bs-list-group-color: var(--bs-info-text-emphasis);
  --bs-list-group-bg: var(--bs-info-bg-subtle);
  --bs-list-group-border-color: var(--bs-info-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-info-border-subtle);
  --bs-list-group-action-active-color: var(--bs-emphasis-color);
  --bs-list-group-action-active-bg: var(--bs-info-border-subtle);
  --bs-list-group-active-color: var(--bs-info-bg-subtle);
  --bs-list-group-active-bg: var(--bs-info-text-emphasis);
  --bs-list-group-active-border-color: var(--bs-info-text-emphasis);
}

.list-group-item-warning {
  --bs-list-group-color: var(--bs-warning-text-emphasis);
  --bs-list-group-bg: var(--bs-warning-bg-subtle);
  --bs-list-group-border-color: var(--bs-warning-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-warning-border-subtle);
  --bs-list-group-action-active-color: var(--bs-emphasis-color);
  --bs-list-group-action-active-bg: var(--bs-warning-border-subtle);
  --bs-list-group-active-color: var(--bs-warning-bg-subtle);
  --bs-list-group-active-bg: var(--bs-warning-text-emphasis);
  --bs-list-group-active-border-color: var(--bs-warning-text-emphasis);
}

.list-group-item-danger {
  --bs-list-group-color: var(--bs-danger-text-emphasis);
  --bs-list-group-bg: var(--bs-danger-bg-subtle);
  --bs-list-group-border-color: var(--bs-danger-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-danger-border-subtle);
  --bs-list-group-action-active-color: var(--bs-emphasis-color);
  --bs-list-group-action-active-bg: var(--bs-danger-border-subtle);
  --bs-list-group-active-color: var(--bs-danger-bg-subtle);
  --bs-list-group-active-bg: var(--bs-danger-text-emphasis);
  --bs-list-group-active-border-color: var(--bs-danger-text-emphasis);
}

.list-group-item-light {
  --bs-list-group-color: var(--bs-light-text-emphasis);
  --bs-list-group-bg: var(--bs-light-bg-subtle);
  --bs-list-group-border-color: var(--bs-light-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-light-border-subtle);
  --bs-list-group-action-active-color: var(--bs-emphasis-color);
  --bs-list-group-action-active-bg: var(--bs-light-border-subtle);
  --bs-list-group-active-color: var(--bs-light-bg-subtle);
  --bs-list-group-active-bg: var(--bs-light-text-emphasis);
  --bs-list-group-active-border-color: var(--bs-light-text-emphasis);
}

.list-group-item-dark {
  --bs-list-group-color: var(--bs-dark-text-emphasis);
  --bs-list-group-bg: var(--bs-dark-bg-subtle);
  --bs-list-group-border-color: var(--bs-dark-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-dark-border-subtle);
  --bs-list-group-action-active-color: var(--bs-emphasis-color);
  --bs-list-group-action-active-bg: var(--bs-dark-border-subtle);
  --bs-list-group-active-color: var(--bs-dark-bg-subtle);
  --bs-list-group-active-bg: var(--bs-dark-text-emphasis);
  --bs-list-group-active-border-color: var(--bs-dark-text-emphasis);
}

.btn-close {
  --bs-btn-close-color: #000;
  --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
  --bs-btn-close-opacity: 0.5;
  --bs-btn-close-hover-opacity: 0.75;
  --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  --bs-btn-close-focus-opacity: 1;
  --bs-btn-close-disabled-opacity: 0.25;
  --bs-btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 0.25em 0.25em;
  color: var(--bs-btn-close-color);
  background: transparent var(--bs-btn-close-bg) center/1em auto no-repeat;
  border: 0;
  border-radius: 0.375rem;
  opacity: var(--bs-btn-close-opacity);
}
.btn-close:hover {
  color: var(--bs-btn-close-color);
  text-decoration: none;
  opacity: var(--bs-btn-close-hover-opacity);
}
.btn-close:focus {
  outline: 0;
  box-shadow: var(--bs-btn-close-focus-shadow);
  opacity: var(--bs-btn-close-focus-opacity);
}
.btn-close:disabled, .btn-close.disabled {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  opacity: var(--bs-btn-close-disabled-opacity);
}

.btn-close-white {
  filter: var(--bs-btn-close-white-filter);
}

[data-bs-theme=dark] .btn-close {
  filter: var(--bs-btn-close-white-filter);
}

.toast {
  --bs-toast-zindex: 1090;
  --bs-toast-padding-x: 0.75rem;
  --bs-toast-padding-y: 0.5rem;
  --bs-toast-spacing: 1.5rem;
  --bs-toast-max-width: 350px;
  --bs-toast-font-size: 0.875rem;
  --bs-toast-color: ;
  --bs-toast-bg: rgba(var(--bs-body-bg-rgb), 0.85);
  --bs-toast-border-width: var(--bs-border-width);
  --bs-toast-border-color: var(--bs-border-color-translucent);
  --bs-toast-border-radius: var(--bs-border-radius);
  --bs-toast-box-shadow: var(--bs-box-shadow);
  --bs-toast-header-color: var(--bs-secondary-color);
  --bs-toast-header-bg: rgba(var(--bs-body-bg-rgb), 0.85);
  --bs-toast-header-border-color: var(--bs-border-color-translucent);
  width: var(--bs-toast-max-width);
  max-width: 100%;
  font-size: var(--bs-toast-font-size);
  color: var(--bs-toast-color);
  pointer-events: auto;
  background-color: var(--bs-toast-bg);
  background-clip: padding-box;
  border: var(--bs-toast-border-width) solid var(--bs-toast-border-color);
  box-shadow: var(--bs-toast-box-shadow);
  border-radius: var(--bs-toast-border-radius);
}
.toast.showing {
  opacity: 0;
}
.toast:not(.show) {
  display: none;
}

.toast-container {
  --bs-toast-zindex: 1090;
  position: absolute;
  z-index: var(--bs-toast-zindex);
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  pointer-events: none;
}
.toast-container > :not(:last-child) {
  margin-bottom: var(--bs-toast-spacing);
}

.toast-header {
  display: flex;
  align-items: center;
  padding: var(--bs-toast-padding-y) var(--bs-toast-padding-x);
  color: var(--bs-toast-header-color);
  background-color: var(--bs-toast-header-bg);
  background-clip: padding-box;
  border-bottom: var(--bs-toast-border-width) solid var(--bs-toast-header-border-color);
  border-top-left-radius: calc(var(--bs-toast-border-radius) - var(--bs-toast-border-width));
  border-top-right-radius: calc(var(--bs-toast-border-radius) - var(--bs-toast-border-width));
}
.toast-header .btn-close {
  margin-right: calc(-0.5 * var(--bs-toast-padding-x));
  margin-left: var(--bs-toast-padding-x);
}

.toast-body {
  padding: var(--bs-toast-padding-x);
  word-wrap: break-word;
}

.modal {
  --bs-modal-zindex: 1055;
  --bs-modal-width: 500px;
  --bs-modal-padding: 1rem;
  --bs-modal-margin: 0.5rem;
  --bs-modal-color: ;
  --bs-modal-bg: var(--bs-body-bg);
  --bs-modal-border-color: var(--bs-border-color-translucent);
  --bs-modal-border-width: var(--bs-border-width);
  --bs-modal-border-radius: var(--bs-border-radius-lg);
  --bs-modal-box-shadow: var(--bs-box-shadow-sm);
  --bs-modal-inner-border-radius: calc(var(--bs-border-radius-lg) - (var(--bs-border-width)));
  --bs-modal-header-padding-x: 1rem;
  --bs-modal-header-padding-y: 1rem;
  --bs-modal-header-padding: 1rem 1rem;
  --bs-modal-header-border-color: var(--bs-border-color);
  --bs-modal-header-border-width: var(--bs-border-width);
  --bs-modal-title-line-height: 1.5;
  --bs-modal-footer-gap: 0.5rem;
  --bs-modal-footer-bg: ;
  --bs-modal-footer-border-color: var(--bs-border-color);
  --bs-modal-footer-border-width: var(--bs-border-width);
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--bs-modal-zindex);
  display: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: var(--bs-modal-margin);
  pointer-events: none;
}
.modal.fade .modal-dialog {
  transition: transform 0.3s ease-out;
  transform: translate(0, -50px);
}
@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog {
    transition: none;
  }
}
.modal.show .modal-dialog {
  transform: none;
}
.modal.modal-static .modal-dialog {
  transform: scale(1.02);
}

.modal-dialog-scrollable {
  height: calc(100% - var(--bs-modal-margin) * 2);
}
.modal-dialog-scrollable .modal-content {
  max-height: 100%;
  overflow: hidden;
}
.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
}

.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - var(--bs-modal-margin) * 2);
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  color: var(--bs-modal-color);
  pointer-events: auto;
  background-color: var(--bs-modal-bg);
  background-clip: padding-box;
  border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
  border-radius: var(--bs-modal-border-radius);
  outline: 0;
}

.modal-backdrop {
  --bs-backdrop-zindex: 1050;
  --bs-backdrop-bg: #000;
  --bs-backdrop-opacity: 0.5;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--bs-backdrop-zindex);
  width: 100vw;
  height: 100vh;
  background-color: var(--bs-backdrop-bg);
}
.modal-backdrop.fade {
  opacity: 0;
}
.modal-backdrop.show {
  opacity: var(--bs-backdrop-opacity);
}

.modal-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: var(--bs-modal-header-padding);
  border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);
  border-top-left-radius: var(--bs-modal-inner-border-radius);
  border-top-right-radius: var(--bs-modal-inner-border-radius);
}
.modal-header .btn-close {
  padding: calc(var(--bs-modal-header-padding-y) * 0.5) calc(var(--bs-modal-header-padding-x) * 0.5);
  margin: calc(-0.5 * var(--bs-modal-header-padding-y)) calc(-0.5 * var(--bs-modal-header-padding-x)) calc(-0.5 * var(--bs-modal-header-padding-y)) auto;
}

.modal-title {
  margin-bottom: 0;
  line-height: var(--bs-modal-title-line-height);
}

.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: var(--bs-modal-padding);
}

.modal-footer {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  padding: calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * 0.5);
  background-color: var(--bs-modal-footer-bg);
  border-top: var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color);
  border-bottom-right-radius: var(--bs-modal-inner-border-radius);
  border-bottom-left-radius: var(--bs-modal-inner-border-radius);
}
.modal-footer > * {
  margin: calc(var(--bs-modal-footer-gap) * 0.5);
}

@media (min-width: 576px) {
  .modal {
    --bs-modal-margin: 1.75rem;
    --bs-modal-box-shadow: var(--bs-box-shadow);
  }
  .modal-dialog {
    max-width: var(--bs-modal-width);
    margin-right: auto;
    margin-left: auto;
  }
  .modal-sm {
    --bs-modal-width: 300px;
  }
}
@media (min-width: 992px) {
  .modal-lg,
  .modal-xl {
    --bs-modal-width: 800px;
  }
}
@media (min-width: 1200px) {
  .modal-xl {
    --bs-modal-width: 1140px;
  }
}
.modal-fullscreen {
  width: 100vw;
  max-width: none;
  height: 100%;
  margin: 0;
}
.modal-fullscreen .modal-content {
  height: 100%;
  border: 0;
  border-radius: 0;
}
.modal-fullscreen .modal-header,
.modal-fullscreen .modal-footer {
  border-radius: 0;
}
.modal-fullscreen .modal-body {
  overflow-y: auto;
}

@media (max-width: 575.98px) {
  .modal-fullscreen-sm-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-sm-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-sm-down .modal-header,
  .modal-fullscreen-sm-down .modal-footer {
    border-radius: 0;
  }
  .modal-fullscreen-sm-down .modal-body {
    overflow-y: auto;
  }
}
@media (max-width: 767.98px) {
  .modal-fullscreen-md-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-md-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-md-down .modal-header,
  .modal-fullscreen-md-down .modal-footer {
    border-radius: 0;
  }
  .modal-fullscreen-md-down .modal-body {
    overflow-y: auto;
  }
}
@media (max-width: 991.98px) {
  .modal-fullscreen-lg-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-lg-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-lg-down .modal-header,
  .modal-fullscreen-lg-down .modal-footer {
    border-radius: 0;
  }
  .modal-fullscreen-lg-down .modal-body {
    overflow-y: auto;
  }
}
@media (max-width: 1199.98px) {
  .modal-fullscreen-xl-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-xl-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-xl-down .modal-header,
  .modal-fullscreen-xl-down .modal-footer {
    border-radius: 0;
  }
  .modal-fullscreen-xl-down .modal-body {
    overflow-y: auto;
  }
}
@media (max-width: 1399.98px) {
  .modal-fullscreen-xxl-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-xxl-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-xxl-down .modal-header,
  .modal-fullscreen-xxl-down .modal-footer {
    border-radius: 0;
  }
  .modal-fullscreen-xxl-down .modal-body {
    overflow-y: auto;
  }
}
.tooltip {
  --bs-tooltip-zindex: 1080;
  --bs-tooltip-max-width: 200px;
  --bs-tooltip-padding-x: 0.5rem;
  --bs-tooltip-padding-y: 0.25rem;
  --bs-tooltip-margin: ;
  --bs-tooltip-font-size: 0.875rem;
  --bs-tooltip-color: var(--bs-body-bg);
  --bs-tooltip-bg: var(--bs-emphasis-color);
  --bs-tooltip-border-radius: var(--bs-border-radius);
  --bs-tooltip-opacity: 0.9;
  --bs-tooltip-arrow-width: 0.8rem;
  --bs-tooltip-arrow-height: 0.4rem;
  z-index: var(--bs-tooltip-zindex);
  display: block;
  margin: var(--bs-tooltip-margin);
  font-family: var(--bs-font-sans-serif);
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  white-space: normal;
  word-spacing: normal;
  line-break: auto;
  font-size: var(--bs-tooltip-font-size);
  word-wrap: break-word;
  opacity: 0;
}
.tooltip.show {
  opacity: var(--bs-tooltip-opacity);
}
.tooltip .tooltip-arrow {
  display: block;
  width: var(--bs-tooltip-arrow-width);
  height: var(--bs-tooltip-arrow-height);
}
.tooltip .tooltip-arrow::before {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
}

.bs-tooltip-top .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow {
  bottom: calc(-1 * var(--bs-tooltip-arrow-height));
}
.bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
  top: -1px;
  border-width: var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * 0.5) 0;
  border-top-color: var(--bs-tooltip-bg);
}

/* rtl:begin:ignore */
.bs-tooltip-end .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow {
  left: calc(-1 * var(--bs-tooltip-arrow-height));
  width: var(--bs-tooltip-arrow-height);
  height: var(--bs-tooltip-arrow-width);
}
.bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
  right: -1px;
  border-width: calc(var(--bs-tooltip-arrow-width) * 0.5) var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * 0.5) 0;
  border-right-color: var(--bs-tooltip-bg);
}

/* rtl:end:ignore */
.bs-tooltip-bottom .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow {
  top: calc(-1 * var(--bs-tooltip-arrow-height));
}
.bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
  bottom: -1px;
  border-width: 0 calc(var(--bs-tooltip-arrow-width) * 0.5) var(--bs-tooltip-arrow-height);
  border-bottom-color: var(--bs-tooltip-bg);
}

/* rtl:begin:ignore */
.bs-tooltip-start .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow {
  right: calc(-1 * var(--bs-tooltip-arrow-height));
  width: var(--bs-tooltip-arrow-height);
  height: var(--bs-tooltip-arrow-width);
}
.bs-tooltip-start .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
  left: -1px;
  border-width: calc(var(--bs-tooltip-arrow-width) * 0.5) 0 calc(var(--bs-tooltip-arrow-width) * 0.5) var(--bs-tooltip-arrow-height);
  border-left-color: var(--bs-tooltip-bg);
}

/* rtl:end:ignore */
.tooltip-inner {
  max-width: var(--bs-tooltip-max-width);
  padding: var(--bs-tooltip-padding-y) var(--bs-tooltip-padding-x);
  color: var(--bs-tooltip-color);
  text-align: center;
  background-color: var(--bs-tooltip-bg);
  border-radius: var(--bs-tooltip-border-radius);
}

.popover {
  --bs-popover-zindex: 1070;
  --bs-popover-max-width: 276px;
  --bs-popover-font-size: 0.875rem;
  --bs-popover-bg: var(--bs-body-bg);
  --bs-popover-border-width: var(--bs-border-width);
  --bs-popover-border-color: var(--bs-border-color-translucent);
  --bs-popover-border-radius: var(--bs-border-radius-lg);
  --bs-popover-inner-border-radius: calc(var(--bs-border-radius-lg) - var(--bs-border-width));
  --bs-popover-box-shadow: var(--bs-box-shadow);
  --bs-popover-header-padding-x: 1rem;
  --bs-popover-header-padding-y: 0.5rem;
  --bs-popover-header-font-size: 1rem;
  --bs-popover-header-color: inherit;
  --bs-popover-header-bg: var(--bs-secondary-bg);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: 1rem;
  --bs-popover-body-color: var(--bs-body-color);
  --bs-popover-arrow-width: 1rem;
  --bs-popover-arrow-height: 0.5rem;
  --bs-popover-arrow-border: var(--bs-popover-border-color);
  z-index: var(--bs-popover-zindex);
  display: block;
  max-width: var(--bs-popover-max-width);
  font-family: var(--bs-font-sans-serif);
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  white-space: normal;
  word-spacing: normal;
  line-break: auto;
  font-size: var(--bs-popover-font-size);
  word-wrap: break-word;
  background-color: var(--bs-popover-bg);
  background-clip: padding-box;
  border: var(--bs-popover-border-width) solid var(--bs-popover-border-color);
  border-radius: var(--bs-popover-border-radius);
}
.popover .popover-arrow {
  display: block;
  width: var(--bs-popover-arrow-width);
  height: var(--bs-popover-arrow-height);
}
.popover .popover-arrow::before, .popover .popover-arrow::after {
  position: absolute;
  display: block;
  content: "";
  border-color: transparent;
  border-style: solid;
  border-width: 0;
}

.bs-popover-top > .popover-arrow, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow {
  bottom: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));
}
.bs-popover-top > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before, .bs-popover-top > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after {
  border-width: var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * 0.5) 0;
}
.bs-popover-top > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before {
  bottom: 0;
  border-top-color: var(--bs-popover-arrow-border);
}
.bs-popover-top > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after {
  bottom: var(--bs-popover-border-width);
  border-top-color: var(--bs-popover-bg);
}

/* rtl:begin:ignore */
.bs-popover-end > .popover-arrow, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow {
  left: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));
  width: var(--bs-popover-arrow-height);
  height: var(--bs-popover-arrow-width);
}
.bs-popover-end > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before, .bs-popover-end > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after {
  border-width: calc(var(--bs-popover-arrow-width) * 0.5) var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * 0.5) 0;
}
.bs-popover-end > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before {
  left: 0;
  border-right-color: var(--bs-popover-arrow-border);
}
.bs-popover-end > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after {
  left: var(--bs-popover-border-width);
  border-right-color: var(--bs-popover-bg);
}

/* rtl:end:ignore */
.bs-popover-bottom > .popover-arrow, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow {
  top: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));
}
.bs-popover-bottom > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before, .bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after {
  border-width: 0 calc(var(--bs-popover-arrow-width) * 0.5) var(--bs-popover-arrow-height);
}
.bs-popover-bottom > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before {
  top: 0;
  border-bottom-color: var(--bs-popover-arrow-border);
}
.bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after {
  top: var(--bs-popover-border-width);
  border-bottom-color: var(--bs-popover-bg);
}
.bs-popover-bottom .popover-header::before, .bs-popover-auto[data-popper-placement^=bottom] .popover-header::before {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: var(--bs-popover-arrow-width);
  margin-left: calc(-0.5 * var(--bs-popover-arrow-width));
  content: "";
  border-bottom: var(--bs-popover-border-width) solid var(--bs-popover-header-bg);
}

/* rtl:begin:ignore */
.bs-popover-start > .popover-arrow, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow {
  right: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));
  width: var(--bs-popover-arrow-height);
  height: var(--bs-popover-arrow-width);
}
.bs-popover-start > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before, .bs-popover-start > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after {
  border-width: calc(var(--bs-popover-arrow-width) * 0.5) 0 calc(var(--bs-popover-arrow-width) * 0.5) var(--bs-popover-arrow-height);
}
.bs-popover-start > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before {
  right: 0;
  border-left-color: var(--bs-popover-arrow-border);
}
.bs-popover-start > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after {
  right: var(--bs-popover-border-width);
  border-left-color: var(--bs-popover-bg);
}

/* rtl:end:ignore */
.popover-header {
  padding: var(--bs-popover-header-padding-y) var(--bs-popover-header-padding-x);
  margin-bottom: 0;
  font-size: var(--bs-popover-header-font-size);
  color: var(--bs-popover-header-color);
  background-color: var(--bs-popover-header-bg);
  border-bottom: var(--bs-popover-border-width) solid var(--bs-popover-border-color);
  border-top-left-radius: var(--bs-popover-inner-border-radius);
  border-top-right-radius: var(--bs-popover-inner-border-radius);
}
.popover-header:empty {
  display: none;
}

.popover-body {
  padding: var(--bs-popover-body-padding-y) var(--bs-popover-body-padding-x);
  color: var(--bs-popover-body-color);
}

.carousel {
  position: relative;
}

.carousel.pointer-event {
  touch-action: pan-y;
}

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.carousel-inner::after {
  display: block;
  clear: both;
  content: "";
}

.carousel-item {
  position: relative;
  display: none;
  float: left;
  width: 100%;
  margin-right: -100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform 0.6s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .carousel-item {
    transition: none;
  }
}

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
  display: block;
}

.carousel-item-next:not(.carousel-item-start),
.active.carousel-item-end {
  transform: translateX(100%);
}

.carousel-item-prev:not(.carousel-item-end),
.active.carousel-item-start {
  transform: translateX(-100%);
}

.carousel-fade .carousel-item {
  opacity: 0;
  transition-property: opacity;
  transform: none;
}
.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-start,
.carousel-fade .carousel-item-prev.carousel-item-end {
  z-index: 1;
  opacity: 1;
}
.carousel-fade .active.carousel-item-start,
.carousel-fade .active.carousel-item-end {
  z-index: 0;
  opacity: 0;
  transition: opacity 0s 0.6s;
}
@media (prefers-reduced-motion: reduce) {
  .carousel-fade .active.carousel-item-start,
  .carousel-fade .active.carousel-item-end {
    transition: none;
  }
}

.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15%;
  padding: 0;
  color: #fff;
  text-align: center;
  background: none;
  border: 0;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}
@media (prefers-reduced-motion: reduce) {
  .carousel-control-prev,
  .carousel-control-next {
    transition: none;
  }
}
.carousel-control-prev:hover, .carousel-control-prev:focus,
.carousel-control-next:hover,
.carousel-control-next:focus {
  color: #fff;
  text-decoration: none;
  outline: 0;
  opacity: 0.9;
}

.carousel-control-prev {
  left: 0;
}

.carousel-control-next {
  right: 0;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 100% 100%;
}

/* rtl:options: {
  "autoRename": true,
  "stringMap":[ {
    "name"    : "prev-next",
    "search"  : "prev",
    "replace" : "next"
  } ]
} */
.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.carousel-indicators {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 0;
  margin-right: 15%;
  margin-bottom: 1rem;
  margin-left: 15%;
}
.carousel-indicators [data-bs-target] {
  box-sizing: content-box;
  flex: 0 1 auto;
  width: 30px;
  height: 3px;
  padding: 0;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  cursor: pointer;
  background-color: #fff;
  background-clip: padding-box;
  border: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  opacity: 0.5;
  transition: opacity 0.6s ease;
}
@media (prefers-reduced-motion: reduce) {
  .carousel-indicators [data-bs-target] {
    transition: none;
  }
}
.carousel-indicators .active {
  opacity: 1;
}

.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 1.25rem;
  left: 15%;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  color: #fff;
  text-align: center;
}

.carousel-dark .carousel-control-prev-icon,
.carousel-dark .carousel-control-next-icon {
  filter: invert(1) grayscale(100);
}
.carousel-dark .carousel-indicators [data-bs-target] {
  background-color: #000;
}
.carousel-dark .carousel-caption {
  color: #000;
}

[data-bs-theme=dark] .carousel .carousel-control-prev-icon,
[data-bs-theme=dark] .carousel .carousel-control-next-icon, [data-bs-theme=dark].carousel .carousel-control-prev-icon,
[data-bs-theme=dark].carousel .carousel-control-next-icon {
  filter: invert(1) grayscale(100);
}
[data-bs-theme=dark] .carousel .carousel-indicators [data-bs-target], [data-bs-theme=dark].carousel .carousel-indicators [data-bs-target] {
  background-color: #000;
}
[data-bs-theme=dark] .carousel .carousel-caption, [data-bs-theme=dark].carousel .carousel-caption {
  color: #000;
}

.spinner-grow,
.spinner-border {
  display: inline-block;
  width: var(--bs-spinner-width);
  height: var(--bs-spinner-height);
  vertical-align: var(--bs-spinner-vertical-align);
  border-radius: 50%;
  animation: var(--bs-spinner-animation-speed) linear infinite var(--bs-spinner-animation-name);
}

@keyframes spinner-border {
  to {
    transform: rotate(360deg) /* rtl:ignore */;
  }
}
.spinner-border {
  --bs-spinner-width: 2rem;
  --bs-spinner-height: 2rem;
  --bs-spinner-vertical-align: -0.125em;
  --bs-spinner-border-width: 0.25em;
  --bs-spinner-animation-speed: 0.75s;
  --bs-spinner-animation-name: spinner-border;
  border: var(--bs-spinner-border-width) solid currentcolor;
  border-right-color: transparent;
}

.spinner-border-sm {
  --bs-spinner-width: 1rem;
  --bs-spinner-height: 1rem;
  --bs-spinner-border-width: 0.2em;
}

@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}
.spinner-grow {
  --bs-spinner-width: 2rem;
  --bs-spinner-height: 2rem;
  --bs-spinner-vertical-align: -0.125em;
  --bs-spinner-animation-speed: 0.75s;
  --bs-spinner-animation-name: spinner-grow;
  background-color: currentcolor;
  opacity: 0;
}

.spinner-grow-sm {
  --bs-spinner-width: 1rem;
  --bs-spinner-height: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .spinner-border,
  .spinner-grow {
    --bs-spinner-animation-speed: 1.5s;
  }
}
.offcanvas, .offcanvas-xxl, .offcanvas-xl, .offcanvas-lg, .offcanvas-md, .offcanvas-sm {
  --bs-offcanvas-zindex: 1045;
  --bs-offcanvas-width: 400px;
  --bs-offcanvas-height: 30vh;
  --bs-offcanvas-padding-x: 1rem;
  --bs-offcanvas-padding-y: 1rem;
  --bs-offcanvas-color: var(--bs-body-color);
  --bs-offcanvas-bg: var(--bs-body-bg);
  --bs-offcanvas-border-width: var(--bs-border-width);
  --bs-offcanvas-border-color: var(--bs-border-color-translucent);
  --bs-offcanvas-box-shadow: var(--bs-box-shadow-sm);
  --bs-offcanvas-transition: transform 0.3s ease-in-out;
  --bs-offcanvas-title-line-height: 1.5;
}

@media (max-width: 575.98px) {
  .offcanvas-sm {
    position: fixed;
    bottom: 0;
    z-index: var(--bs-offcanvas-zindex);
    display: flex;
    flex-direction: column;
    max-width: 100%;
    color: var(--bs-offcanvas-color);
    visibility: hidden;
    background-color: var(--bs-offcanvas-bg);
    background-clip: padding-box;
    outline: 0;
    transition: var(--bs-offcanvas-transition);
  }
}
@media (max-width: 575.98px) and (prefers-reduced-motion: reduce) {
  .offcanvas-sm {
    transition: none;
  }
}
@media (max-width: 575.98px) {
  .offcanvas-sm.offcanvas-start {
    top: 0;
    left: 0;
    width: var(--bs-offcanvas-width);
    border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(-100%);
  }
  .offcanvas-sm.offcanvas-end {
    top: 0;
    right: 0;
    width: var(--bs-offcanvas-width);
    border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(100%);
  }
  .offcanvas-sm.offcanvas-top {
    top: 0;
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(-100%);
  }
  .offcanvas-sm.offcanvas-bottom {
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(100%);
  }
  .offcanvas-sm.showing, .offcanvas-sm.show:not(.hiding) {
    transform: none;
  }
  .offcanvas-sm.showing, .offcanvas-sm.hiding, .offcanvas-sm.show {
    visibility: visible;
  }
}
@media (min-width: 576px) {
  .offcanvas-sm {
    --bs-offcanvas-height: auto;
    --bs-offcanvas-border-width: 0;
    background-color: transparent !important;
  }
  .offcanvas-sm .offcanvas-header {
    display: none;
  }
  .offcanvas-sm .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
    background-color: transparent !important;
  }
}

@media (max-width: 767.98px) {
  .offcanvas-md {
    position: fixed;
    bottom: 0;
    z-index: var(--bs-offcanvas-zindex);
    display: flex;
    flex-direction: column;
    max-width: 100%;
    color: var(--bs-offcanvas-color);
    visibility: hidden;
    background-color: var(--bs-offcanvas-bg);
    background-clip: padding-box;
    outline: 0;
    transition: var(--bs-offcanvas-transition);
  }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  .offcanvas-md {
    transition: none;
  }
}
@media (max-width: 767.98px) {
  .offcanvas-md.offcanvas-start {
    top: 0;
    left: 0;
    width: var(--bs-offcanvas-width);
    border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(-100%);
  }
  .offcanvas-md.offcanvas-end {
    top: 0;
    right: 0;
    width: var(--bs-offcanvas-width);
    border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(100%);
  }
  .offcanvas-md.offcanvas-top {
    top: 0;
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(-100%);
  }
  .offcanvas-md.offcanvas-bottom {
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(100%);
  }
  .offcanvas-md.showing, .offcanvas-md.show:not(.hiding) {
    transform: none;
  }
  .offcanvas-md.showing, .offcanvas-md.hiding, .offcanvas-md.show {
    visibility: visible;
  }
}
@media (min-width: 768px) {
  .offcanvas-md {
    --bs-offcanvas-height: auto;
    --bs-offcanvas-border-width: 0;
    background-color: transparent !important;
  }
  .offcanvas-md .offcanvas-header {
    display: none;
  }
  .offcanvas-md .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
    background-color: transparent !important;
  }
}

@media (max-width: 991.98px) {
  .offcanvas-lg {
    position: fixed;
    bottom: 0;
    z-index: var(--bs-offcanvas-zindex);
    display: flex;
    flex-direction: column;
    max-width: 100%;
    color: var(--bs-offcanvas-color);
    visibility: hidden;
    background-color: var(--bs-offcanvas-bg);
    background-clip: padding-box;
    outline: 0;
    transition: var(--bs-offcanvas-transition);
  }
}
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
  .offcanvas-lg {
    transition: none;
  }
}
@media (max-width: 991.98px) {
  .offcanvas-lg.offcanvas-start {
    top: 0;
    left: 0;
    width: var(--bs-offcanvas-width);
    border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(-100%);
  }
  .offcanvas-lg.offcanvas-end {
    top: 0;
    right: 0;
    width: var(--bs-offcanvas-width);
    border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(100%);
  }
  .offcanvas-lg.offcanvas-top {
    top: 0;
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(-100%);
  }
  .offcanvas-lg.offcanvas-bottom {
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(100%);
  }
  .offcanvas-lg.showing, .offcanvas-lg.show:not(.hiding) {
    transform: none;
  }
  .offcanvas-lg.showing, .offcanvas-lg.hiding, .offcanvas-lg.show {
    visibility: visible;
  }
}
@media (min-width: 992px) {
  .offcanvas-lg {
    --bs-offcanvas-height: auto;
    --bs-offcanvas-border-width: 0;
    background-color: transparent !important;
  }
  .offcanvas-lg .offcanvas-header {
    display: none;
  }
  .offcanvas-lg .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
    background-color: transparent !important;
  }
}

@media (max-width: 1199.98px) {
  .offcanvas-xl {
    position: fixed;
    bottom: 0;
    z-index: var(--bs-offcanvas-zindex);
    display: flex;
    flex-direction: column;
    max-width: 100%;
    color: var(--bs-offcanvas-color);
    visibility: hidden;
    background-color: var(--bs-offcanvas-bg);
    background-clip: padding-box;
    outline: 0;
    transition: var(--bs-offcanvas-transition);
  }
}
@media (max-width: 1199.98px) and (prefers-reduced-motion: reduce) {
  .offcanvas-xl {
    transition: none;
  }
}
@media (max-width: 1199.98px) {
  .offcanvas-xl.offcanvas-start {
    top: 0;
    left: 0;
    width: var(--bs-offcanvas-width);
    border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(-100%);
  }
  .offcanvas-xl.offcanvas-end {
    top: 0;
    right: 0;
    width: var(--bs-offcanvas-width);
    border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(100%);
  }
  .offcanvas-xl.offcanvas-top {
    top: 0;
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(-100%);
  }
  .offcanvas-xl.offcanvas-bottom {
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(100%);
  }
  .offcanvas-xl.showing, .offcanvas-xl.show:not(.hiding) {
    transform: none;
  }
  .offcanvas-xl.showing, .offcanvas-xl.hiding, .offcanvas-xl.show {
    visibility: visible;
  }
}
@media (min-width: 1200px) {
  .offcanvas-xl {
    --bs-offcanvas-height: auto;
    --bs-offcanvas-border-width: 0;
    background-color: transparent !important;
  }
  .offcanvas-xl .offcanvas-header {
    display: none;
  }
  .offcanvas-xl .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
    background-color: transparent !important;
  }
}

@media (max-width: 1399.98px) {
  .offcanvas-xxl {
    position: fixed;
    bottom: 0;
    z-index: var(--bs-offcanvas-zindex);
    display: flex;
    flex-direction: column;
    max-width: 100%;
    color: var(--bs-offcanvas-color);
    visibility: hidden;
    background-color: var(--bs-offcanvas-bg);
    background-clip: padding-box;
    outline: 0;
    transition: var(--bs-offcanvas-transition);
  }
}
@media (max-width: 1399.98px) and (prefers-reduced-motion: reduce) {
  .offcanvas-xxl {
    transition: none;
  }
}
@media (max-width: 1399.98px) {
  .offcanvas-xxl.offcanvas-start {
    top: 0;
    left: 0;
    width: var(--bs-offcanvas-width);
    border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(-100%);
  }
  .offcanvas-xxl.offcanvas-end {
    top: 0;
    right: 0;
    width: var(--bs-offcanvas-width);
    border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(100%);
  }
  .offcanvas-xxl.offcanvas-top {
    top: 0;
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(-100%);
  }
  .offcanvas-xxl.offcanvas-bottom {
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(100%);
  }
  .offcanvas-xxl.showing, .offcanvas-xxl.show:not(.hiding) {
    transform: none;
  }
  .offcanvas-xxl.showing, .offcanvas-xxl.hiding, .offcanvas-xxl.show {
    visibility: visible;
  }
}
@media (min-width: 1400px) {
  .offcanvas-xxl {
    --bs-offcanvas-height: auto;
    --bs-offcanvas-border-width: 0;
    background-color: transparent !important;
  }
  .offcanvas-xxl .offcanvas-header {
    display: none;
  }
  .offcanvas-xxl .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
    background-color: transparent !important;
  }
}

.offcanvas {
  position: fixed;
  bottom: 0;
  z-index: var(--bs-offcanvas-zindex);
  display: flex;
  flex-direction: column;
  max-width: 100%;
  color: var(--bs-offcanvas-color);
  visibility: hidden;
  background-color: var(--bs-offcanvas-bg);
  background-clip: padding-box;
  outline: 0;
  transition: var(--bs-offcanvas-transition);
}
@media (prefers-reduced-motion: reduce) {
  .offcanvas {
    transition: none;
  }
}
.offcanvas.offcanvas-start {
  top: 0;
  left: 0;
  width: var(--bs-offcanvas-width);
  border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
  transform: translateX(-100%);
}
.offcanvas.offcanvas-end {
  top: 0;
  right: 0;
  width: var(--bs-offcanvas-width);
  border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
  transform: translateX(100%);
}
.offcanvas.offcanvas-top {
  top: 0;
  right: 0;
  left: 0;
  height: var(--bs-offcanvas-height);
  max-height: 100%;
  border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
  transform: translateY(-100%);
}
.offcanvas.offcanvas-bottom {
  right: 0;
  left: 0;
  height: var(--bs-offcanvas-height);
  max-height: 100%;
  border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
  transform: translateY(100%);
}
.offcanvas.showing, .offcanvas.show:not(.hiding) {
  transform: none;
}
.offcanvas.showing, .offcanvas.hiding, .offcanvas.show {
  visibility: visible;
}

.offcanvas-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: #000;
}
.offcanvas-backdrop.fade {
  opacity: 0;
}
.offcanvas-backdrop.show {
  opacity: 0.5;
}

.offcanvas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
}
.offcanvas-header .btn-close {
  padding: calc(var(--bs-offcanvas-padding-y) * 0.5) calc(var(--bs-offcanvas-padding-x) * 0.5);
  margin-top: calc(-0.5 * var(--bs-offcanvas-padding-y));
  margin-right: calc(-0.5 * var(--bs-offcanvas-padding-x));
  margin-bottom: calc(-0.5 * var(--bs-offcanvas-padding-y));
}

.offcanvas-title {
  margin-bottom: 0;
  line-height: var(--bs-offcanvas-title-line-height);
}

.offcanvas-body {
  flex-grow: 1;
  padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
  overflow-y: auto;
}

.placeholder {
  display: inline-block;
  min-height: 1em;
  vertical-align: middle;
  cursor: wait;
  background-color: currentcolor;
  opacity: 0.5;
}
.placeholder.btn::before {
  display: inline-block;
  content: "";
}

.placeholder-xs {
  min-height: 0.6em;
}

.placeholder-sm {
  min-height: 0.8em;
}

.placeholder-lg {
  min-height: 1.2em;
}

.placeholder-glow .placeholder {
  animation: placeholder-glow 2s ease-in-out infinite;
}

@keyframes placeholder-glow {
  50% {
    opacity: 0.2;
  }
}
.placeholder-wave {
  -webkit-mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
  mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
  -webkit-mask-size: 200% 100%;
  mask-size: 200% 100%;
  animation: placeholder-wave 2s linear infinite;
}

@keyframes placeholder-wave {
  100% {
    -webkit-mask-position: -200% 0%;
    mask-position: -200% 0%;
  }
}
.clearfix::after {
  display: block;
  clear: both;
  content: "";
}

.text-bg-primary {
  color: #fff !important;
  background-color: RGBA(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-bg-secondary {
  color: #fff !important;
  background-color: RGBA(var(--bs-secondary-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-bg-success {
  color: #fff !important;
  background-color: RGBA(var(--bs-success-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-bg-info {
  color: #000 !important;
  background-color: RGBA(var(--bs-info-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-bg-warning {
  color: #000 !important;
  background-color: RGBA(var(--bs-warning-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-bg-danger {
  color: #fff !important;
  background-color: RGBA(var(--bs-danger-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-bg-light {
  color: #000 !important;
  background-color: RGBA(var(--bs-light-rgb), var(--bs-bg-opacity, 1)) !important;
}

.text-bg-dark {
  color: #fff !important;
  background-color: RGBA(var(--bs-dark-rgb), var(--bs-bg-opacity, 1)) !important;
}

.link-primary {
  color: RGBA(var(--bs-primary-rgb), var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(var(--bs-primary-rgb), var(--bs-link-underline-opacity, 1)) !important;
  text-decoration-color: RGBA(var(--bs-primary-rgb), var(--bs-link-underline-opacity, 1)) !important;
}
.link-primary:hover, .link-primary:focus {
  color: RGBA(10, 88, 202, var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(10, 88, 202, var(--bs-link-underline-opacity, 1)) !important;
  text-decoration-color: RGBA(10, 88, 202, var(--bs-link-underline-opacity, 1)) !important;
}

.link-secondary {
  color: RGBA(var(--bs-secondary-rgb), var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(var(--bs-secondary-rgb), var(--bs-link-underline-opacity, 1)) !important;
  text-decoration-color: RGBA(var(--bs-secondary-rgb), var(--bs-link-underline-opacity, 1)) !important;
}
.link-secondary:hover, .link-secondary:focus {
  color: RGBA(86, 94, 100, var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(86, 94, 100, var(--bs-link-underline-opacity, 1)) !important;
  text-decoration-color: RGBA(86, 94, 100, var(--bs-link-underline-opacity, 1)) !important;
}

.link-success {
  color: RGBA(var(--bs-success-rgb), var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(var(--bs-success-rgb), var(--bs-link-underline-opacity, 1)) !important;
  text-decoration-color: RGBA(var(--bs-success-rgb), var(--bs-link-underline-opacity, 1)) !important;
}
.link-success:hover, .link-success:focus {
  color: RGBA(20, 108, 67, var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(20, 108, 67, var(--bs-link-underline-opacity, 1)) !important;
  text-decoration-color: RGBA(20, 108, 67, var(--bs-link-underline-opacity, 1)) !important;
}

.link-info {
  color: RGBA(var(--bs-info-rgb), var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(var(--bs-info-rgb), var(--bs-link-underline-opacity, 1)) !important;
  text-decoration-color: RGBA(var(--bs-info-rgb), var(--bs-link-underline-opacity, 1)) !important;
}
.link-info:hover, .link-info:focus {
  color: RGBA(61, 213, 243, var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(61, 213, 243, var(--bs-link-underline-opacity, 1)) !important;
  text-decoration-color: RGBA(61, 213, 243, var(--bs-link-underline-opacity, 1)) !important;
}

.link-warning {
  color: RGBA(var(--bs-warning-rgb), var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(var(--bs-warning-rgb), var(--bs-link-underline-opacity, 1)) !important;
  text-decoration-color: RGBA(var(--bs-warning-rgb), var(--bs-link-underline-opacity, 1)) !important;
}
.link-warning:hover, .link-warning:focus {
  color: RGBA(255, 205, 57, var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(255, 205, 57, var(--bs-link-underline-opacity, 1)) !important;
  text-decoration-color: RGBA(255, 205, 57, var(--bs-link-underline-opacity, 1)) !important;
}

.link-danger {
  color: RGBA(var(--bs-danger-rgb), var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(var(--bs-danger-rgb), var(--bs-link-underline-opacity, 1)) !important;
  text-decoration-color: RGBA(var(--bs-danger-rgb), var(--bs-link-underline-opacity, 1)) !important;
}
.link-danger:hover, .link-danger:focus {
  color: RGBA(176, 42, 55, var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(176, 42, 55, var(--bs-link-underline-opacity, 1)) !important;
  text-decoration-color: RGBA(176, 42, 55, var(--bs-link-underline-opacity, 1)) !important;
}

.link-light {
  color: RGBA(var(--bs-light-rgb), var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(var(--bs-light-rgb), var(--bs-link-underline-opacity, 1)) !important;
  text-decoration-color: RGBA(var(--bs-light-rgb), var(--bs-link-underline-opacity, 1)) !important;
}
.link-light:hover, .link-light:focus {
  color: RGBA(249, 250, 251, var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(249, 250, 251, var(--bs-link-underline-opacity, 1)) !important;
  text-decoration-color: RGBA(249, 250, 251, var(--bs-link-underline-opacity, 1)) !important;
}

.link-dark {
  color: RGBA(var(--bs-dark-rgb), var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(var(--bs-dark-rgb), var(--bs-link-underline-opacity, 1)) !important;
  text-decoration-color: RGBA(var(--bs-dark-rgb), var(--bs-link-underline-opacity, 1)) !important;
}
.link-dark:hover, .link-dark:focus {
  color: RGBA(26, 30, 33, var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(26, 30, 33, var(--bs-link-underline-opacity, 1)) !important;
  text-decoration-color: RGBA(26, 30, 33, var(--bs-link-underline-opacity, 1)) !important;
}

.link-body-emphasis {
  color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 1)) !important;
  text-decoration-color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 1)) !important;
}
.link-body-emphasis:hover, .link-body-emphasis:focus {
  color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-opacity, 0.75)) !important;
  -webkit-text-decoration-color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 0.75)) !important;
  text-decoration-color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 0.75)) !important;
}

.focus-ring:focus {
  outline: 0;
  box-shadow: var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

.icon-link {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  -webkit-text-decoration-color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 0.5));
  text-decoration-color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 0.5));
  text-underline-offset: 0.25em;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.icon-link > .bi {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  fill: currentcolor;
  transition: 0.2s ease-in-out transform;
}
@media (prefers-reduced-motion: reduce) {
  .icon-link > .bi {
    transition: none;
  }
}

.icon-link-hover:hover > .bi, .icon-link-hover:focus-visible > .bi {
  transform: var(--bs-icon-link-transform, translate3d(0.25em, 0, 0));
}

.ratio {
  position: relative;
  width: 100%;
}
.ratio::before {
  display: block;
  padding-top: var(--bs-aspect-ratio);
  content: "";
}
.ratio > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ratio-1x1 {
  --bs-aspect-ratio: 100%;
}

.ratio-4x3 {
  --bs-aspect-ratio: 75%;
}

.ratio-16x9 {
  --bs-aspect-ratio: 56.25%;
}

.ratio-21x9 {
  --bs-aspect-ratio: 42.8571428571%;
}

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

.fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
}

.sticky-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1020;
}

.sticky-bottom {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  z-index: 1020;
}

@media (min-width: 576px) {
  .sticky-sm-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
  }
  .sticky-sm-bottom {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    z-index: 1020;
  }
}
@media (min-width: 768px) {
  .sticky-md-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
  }
  .sticky-md-bottom {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    z-index: 1020;
  }
}
@media (min-width: 992px) {
  .sticky-lg-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
  }
  .sticky-lg-bottom {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    z-index: 1020;
  }
}
@media (min-width: 1200px) {
  .sticky-xl-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
  }
  .sticky-xl-bottom {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    z-index: 1020;
  }
}
@media (min-width: 1400px) {
  .sticky-xxl-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
  }
  .sticky-xxl-bottom {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    z-index: 1020;
  }
}
.hstack {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
}

.vstack {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-self: stretch;
}

.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.visually-hidden:not(caption),
.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption) {
  position: absolute !important;
}

.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: "";
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vr {
  display: inline-block;
  align-self: stretch;
  width: var(--bs-border-width);
  min-height: 1em;
  background-color: currentcolor;
  opacity: 0.25;
}

.align-baseline {
  vertical-align: baseline !important;
}

.align-top {
  vertical-align: top !important;
}

.align-middle {
  vertical-align: middle !important;
}

.align-bottom {
  vertical-align: bottom !important;
}

.align-text-bottom {
  vertical-align: text-bottom !important;
}

.align-text-top {
  vertical-align: text-top !important;
}

.float-start {
  float: left !important;
}

.float-end {
  float: right !important;
}

.float-none {
  float: none !important;
}

.object-fit-contain {
  -o-object-fit: contain !important;
  object-fit: contain !important;
}

.object-fit-cover {
  -o-object-fit: cover !important;
  object-fit: cover !important;
}

.object-fit-fill {
  -o-object-fit: fill !important;
  object-fit: fill !important;
}

.object-fit-scale {
  -o-object-fit: scale-down !important;
  object-fit: scale-down !important;
}

.object-fit-none {
  -o-object-fit: none !important;
  object-fit: none !important;
}

.opacity-0 {
  opacity: 0 !important;
}

.opacity-25 {
  opacity: 0.25 !important;
}

.opacity-50 {
  opacity: 0.5 !important;
}

.opacity-75 {
  opacity: 0.75 !important;
}

.opacity-100 {
  opacity: 1 !important;
}

.overflow-auto {
  overflow: auto !important;
}

.overflow-hidden {
  overflow: hidden !important;
}

.overflow-visible {
  overflow: visible !important;
}

.overflow-scroll {
  overflow: scroll !important;
}

.overflow-x-auto {
  overflow-x: auto !important;
}

.overflow-x-hidden {
  overflow-x: hidden !important;
}

.overflow-x-visible {
  overflow-x: visible !important;
}

.overflow-x-scroll {
  overflow-x: scroll !important;
}

.overflow-y-auto {
  overflow-y: auto !important;
}

.overflow-y-hidden {
  overflow-y: hidden !important;
}

.overflow-y-visible {
  overflow-y: visible !important;
}

.overflow-y-scroll {
  overflow-y: scroll !important;
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-block {
  display: block !important;
}

.d-grid {
  display: grid !important;
}

.d-inline-grid {
  display: inline-grid !important;
}

.d-table {
  display: table !important;
}

.d-table-row {
  display: table-row !important;
}

.d-table-cell {
  display: table-cell !important;
}

.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

.d-none {
  display: none !important;
}

.shadow {
  box-shadow: var(--bs-box-shadow) !important;
}

.shadow-sm {
  box-shadow: var(--bs-box-shadow-sm) !important;
}

.shadow-lg {
  box-shadow: var(--bs-box-shadow-lg) !important;
}

.shadow-none {
  box-shadow: none !important;
}

.focus-ring-primary {
  --bs-focus-ring-color: rgba(var(--bs-primary-rgb), var(--bs-focus-ring-opacity));
}

.focus-ring-secondary {
  --bs-focus-ring-color: rgba(var(--bs-secondary-rgb), var(--bs-focus-ring-opacity));
}

.focus-ring-success {
  --bs-focus-ring-color: rgba(var(--bs-success-rgb), var(--bs-focus-ring-opacity));
}

.focus-ring-info {
  --bs-focus-ring-color: rgba(var(--bs-info-rgb), var(--bs-focus-ring-opacity));
}

.focus-ring-warning {
  --bs-focus-ring-color: rgba(var(--bs-warning-rgb), var(--bs-focus-ring-opacity));
}

.focus-ring-danger {
  --bs-focus-ring-color: rgba(var(--bs-danger-rgb), var(--bs-focus-ring-opacity));
}

.focus-ring-light {
  --bs-focus-ring-color: rgba(var(--bs-light-rgb), var(--bs-focus-ring-opacity));
}

.focus-ring-dark {
  --bs-focus-ring-color: rgba(var(--bs-dark-rgb), var(--bs-focus-ring-opacity));
}

.position-static {
  position: static !important;
}

.position-relative {
  position: relative !important;
}

.position-absolute {
  position: absolute !important;
}

.position-fixed {
  position: fixed !important;
}

.position-sticky {
  position: -webkit-sticky !important;
  position: sticky !important;
}

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

.top-50 {
  top: 50% !important;
}

.top-100 {
  top: 100% !important;
}

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

.bottom-50 {
  bottom: 50% !important;
}

.bottom-100 {
  bottom: 100% !important;
}

.start-0 {
  left: 0 !important;
}

.start-50 {
  left: 50% !important;
}

.start-100 {
  left: 100% !important;
}

.end-0 {
  right: 0 !important;
}

.end-50 {
  right: 50% !important;
}

.end-100 {
  right: 100% !important;
}

.translate-middle {
  transform: translate(-50%, -50%) !important;
}

.translate-middle-x {
  transform: translateX(-50%) !important;
}

.translate-middle-y {
  transform: translateY(-50%) !important;
}

.border {
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

.border-0 {
  border: 0 !important;
}

.border-top {
  border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

.border-top-0 {
  border-top: 0 !important;
}

.border-end {
  border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

.border-end-0 {
  border-right: 0 !important;
}

.border-bottom {
  border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

.border-bottom-0 {
  border-bottom: 0 !important;
}

.border-start {
  border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

.border-start-0 {
  border-left: 0 !important;
}

.border-primary {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-primary-rgb), var(--bs-border-opacity)) !important;
}

.border-secondary {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-secondary-rgb), var(--bs-border-opacity)) !important;
}

.border-success {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important;
}

.border-info {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-info-rgb), var(--bs-border-opacity)) !important;
}

.border-warning {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-warning-rgb), var(--bs-border-opacity)) !important;
}

.border-danger {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-danger-rgb), var(--bs-border-opacity)) !important;
}

.border-light {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-light-rgb), var(--bs-border-opacity)) !important;
}

.border-dark {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-dark-rgb), var(--bs-border-opacity)) !important;
}

.border-black {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-black-rgb), var(--bs-border-opacity)) !important;
}

.border-white {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-white-rgb), var(--bs-border-opacity)) !important;
}

.border-primary-subtle {
  border-color: var(--bs-primary-border-subtle) !important;
}

.border-secondary-subtle {
  border-color: var(--bs-secondary-border-subtle) !important;
}

.border-success-subtle {
  border-color: var(--bs-success-border-subtle) !important;
}

.border-info-subtle {
  border-color: var(--bs-info-border-subtle) !important;
}

.border-warning-subtle {
  border-color: var(--bs-warning-border-subtle) !important;
}

.border-danger-subtle {
  border-color: var(--bs-danger-border-subtle) !important;
}

.border-light-subtle {
  border-color: var(--bs-light-border-subtle) !important;
}

.border-dark-subtle {
  border-color: var(--bs-dark-border-subtle) !important;
}

.border-1 {
  border-width: 1px !important;
}

.border-2 {
  border-width: 2px !important;
}

.border-3 {
  border-width: 3px !important;
}

.border-4 {
  border-width: 4px !important;
}

.border-5 {
  border-width: 5px !important;
}

.border-opacity-10 {
  --bs-border-opacity: 0.1;
}

.border-opacity-25 {
  --bs-border-opacity: 0.25;
}

.border-opacity-50 {
  --bs-border-opacity: 0.5;
}

.border-opacity-75 {
  --bs-border-opacity: 0.75;
}

.border-opacity-100 {
  --bs-border-opacity: 1;
}

.w-25 {
  width: 25% !important;
}

.w-50 {
  width: 50% !important;
}

.w-75 {
  width: 75% !important;
}

.w-100 {
  width: 100% !important;
}

.w-auto {
  width: auto !important;
}

.mw-100 {
  max-width: 100% !important;
}

.vw-100 {
  width: 100vw !important;
}

.min-vw-100 {
  min-width: 100vw !important;
}

.h-25 {
  height: 25% !important;
}

.h-50 {
  height: 50% !important;
}

.h-75 {
  height: 75% !important;
}

.h-100 {
  height: 100% !important;
}

.h-auto {
  height: auto !important;
}

.mh-100 {
  max-height: 100% !important;
}

.vh-100 {
  height: 100vh !important;
}

.min-vh-100 {
  min-height: 100vh !important;
}

.flex-fill {
  flex: 1 1 auto !important;
}

.flex-row {
  flex-direction: row !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-row-reverse {
  flex-direction: row-reverse !important;
}

.flex-column-reverse {
  flex-direction: column-reverse !important;
}

.flex-grow-0 {
  flex-grow: 0 !important;
}

.flex-grow-1 {
  flex-grow: 1 !important;
}

.flex-shrink-0 {
  flex-shrink: 0 !important;
}

.flex-shrink-1 {
  flex-shrink: 1 !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}

.justify-content-start {
  justify-content: flex-start !important;
}

.justify-content-end {
  justify-content: flex-end !important;
}

.justify-content-center {
  justify-content: center !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.justify-content-around {
  justify-content: space-around !important;
}

.justify-content-evenly {
  justify-content: space-evenly !important;
}

.align-items-start {
  align-items: flex-start !important;
}

.align-items-end {
  align-items: flex-end !important;
}

.align-items-center {
  align-items: center !important;
}

.align-items-baseline {
  align-items: baseline !important;
}

.align-items-stretch {
  align-items: stretch !important;
}

.align-content-start {
  align-content: flex-start !important;
}

.align-content-end {
  align-content: flex-end !important;
}

.align-content-center {
  align-content: center !important;
}

.align-content-between {
  align-content: space-between !important;
}

.align-content-around {
  align-content: space-around !important;
}

.align-content-stretch {
  align-content: stretch !important;
}

.align-self-auto {
  align-self: auto !important;
}

.align-self-start {
  align-self: flex-start !important;
}

.align-self-end {
  align-self: flex-end !important;
}

.align-self-center {
  align-self: center !important;
}

.align-self-baseline {
  align-self: baseline !important;
}

.align-self-stretch {
  align-self: stretch !important;
}

.order-first {
  order: -1 !important;
}

.order-0 {
  order: 0 !important;
}

.order-1 {
  order: 1 !important;
}

.order-2 {
  order: 2 !important;
}

.order-3 {
  order: 3 !important;
}

.order-4 {
  order: 4 !important;
}

.order-5 {
  order: 5 !important;
}

.order-last {
  order: 6 !important;
}

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

.m-1 {
  margin: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.m-3 {
  margin: 1rem !important;
}

.m-4 {
  margin: 1.5rem !important;
}

.m-5 {
  margin: 3rem !important;
}

.m-auto {
  margin: auto !important;
}

.mx-0 {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.mx-1 {
  margin-right: 0.25rem !important;
  margin-left: 0.25rem !important;
}

.mx-2 {
  margin-right: 0.5rem !important;
  margin-left: 0.5rem !important;
}

.mx-3 {
  margin-right: 1rem !important;
  margin-left: 1rem !important;
}

.mx-4 {
  margin-right: 1.5rem !important;
  margin-left: 1.5rem !important;
}

.mx-5 {
  margin-right: 3rem !important;
  margin-left: 3rem !important;
}

.mx-auto {
  margin-right: auto !important;
  margin-left: auto !important;
}

.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.my-1 {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}

.my-2 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.my-3 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.my-4 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.my-5 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}

.my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

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

.mt-1 {
  margin-top: 0.25rem !important;
}

.mt-2 {
  margin-top: 0.5rem !important;
}

.mt-3 {
  margin-top: 1rem !important;
}

.mt-4 {
  margin-top: 1.5rem !important;
}

.mt-5 {
  margin-top: 3rem !important;
}

.mt-auto {
  margin-top: auto !important;
}

.me-0 {
  margin-right: 0 !important;
}

.me-1 {
  margin-right: 0.25rem !important;
}

.me-2 {
  margin-right: 0.5rem !important;
}

.me-3 {
  margin-right: 1rem !important;
}

.me-4 {
  margin-right: 1.5rem !important;
}

.me-5 {
  margin-right: 3rem !important;
}

.me-auto {
  margin-right: auto !important;
}

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

.mb-1 {
  margin-bottom: 0.25rem !important;
}

.mb-2 {
  margin-bottom: 0.5rem !important;
}

.mb-3 {
  margin-bottom: 1rem !important;
}

.mb-4 {
  margin-bottom: 1.5rem !important;
}

.mb-5 {
  margin-bottom: 3rem !important;
}

.mb-auto {
  margin-bottom: auto !important;
}

.ms-0 {
  margin-left: 0 !important;
}

.ms-1 {
  margin-left: 0.25rem !important;
}

.ms-2 {
  margin-left: 0.5rem !important;
}

.ms-3 {
  margin-left: 1rem !important;
}

.ms-4 {
  margin-left: 1.5rem !important;
}

.ms-5 {
  margin-left: 3rem !important;
}

.ms-auto {
  margin-left: auto !important;
}

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

.p-1 {
  padding: 0.25rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.p-5 {
  padding: 3rem !important;
}

.px-0 {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.px-1 {
  padding-right: 0.25rem !important;
  padding-left: 0.25rem !important;
}

.px-2 {
  padding-right: 0.5rem !important;
  padding-left: 0.5rem !important;
}

.px-3 {
  padding-right: 1rem !important;
  padding-left: 1rem !important;
}

.px-4 {
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
}

.px-5 {
  padding-right: 3rem !important;
  padding-left: 3rem !important;
}

.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.py-3 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.py-4 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.py-5 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pt-1 {
  padding-top: 0.25rem !important;
}

.pt-2 {
  padding-top: 0.5rem !important;
}

.pt-3 {
  padding-top: 1rem !important;
}

.pt-4 {
  padding-top: 1.5rem !important;
}

.pt-5 {
  padding-top: 3rem !important;
}

.pe-0 {
  padding-right: 0 !important;
}

.pe-1 {
  padding-right: 0.25rem !important;
}

.pe-2 {
  padding-right: 0.5rem !important;
}

.pe-3 {
  padding-right: 1rem !important;
}

.pe-4 {
  padding-right: 1.5rem !important;
}

.pe-5 {
  padding-right: 3rem !important;
}

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

.pb-1 {
  padding-bottom: 0.25rem !important;
}

.pb-2 {
  padding-bottom: 0.5rem !important;
}

.pb-3 {
  padding-bottom: 1rem !important;
}

.pb-4 {
  padding-bottom: 1.5rem !important;
}

.pb-5 {
  padding-bottom: 3rem !important;
}

.ps-0 {
  padding-left: 0 !important;
}

.ps-1 {
  padding-left: 0.25rem !important;
}

.ps-2 {
  padding-left: 0.5rem !important;
}

.ps-3 {
  padding-left: 1rem !important;
}

.ps-4 {
  padding-left: 1.5rem !important;
}

.ps-5 {
  padding-left: 3rem !important;
}

.gap-0 {
  gap: 0 !important;
}

.gap-1 {
  gap: 0.25rem !important;
}

.gap-2 {
  gap: 0.5rem !important;
}

.gap-3 {
  gap: 1rem !important;
}

.gap-4 {
  gap: 1.5rem !important;
}

.gap-5 {
  gap: 3rem !important;
}

.row-gap-0 {
  row-gap: 0 !important;
}

.row-gap-1 {
  row-gap: 0.25rem !important;
}

.row-gap-2 {
  row-gap: 0.5rem !important;
}

.row-gap-3 {
  row-gap: 1rem !important;
}

.row-gap-4 {
  row-gap: 1.5rem !important;
}

.row-gap-5 {
  row-gap: 3rem !important;
}

.column-gap-0 {
  -moz-column-gap: 0 !important;
  column-gap: 0 !important;
}

.column-gap-1 {
  -moz-column-gap: 0.25rem !important;
  column-gap: 0.25rem !important;
}

.column-gap-2 {
  -moz-column-gap: 0.5rem !important;
  column-gap: 0.5rem !important;
}

.column-gap-3 {
  -moz-column-gap: 1rem !important;
  column-gap: 1rem !important;
}

.column-gap-4 {
  -moz-column-gap: 1.5rem !important;
  column-gap: 1.5rem !important;
}

.column-gap-5 {
  -moz-column-gap: 3rem !important;
  column-gap: 3rem !important;
}

.font-monospace {
  font-family: var(--bs-font-monospace) !important;
}

.fs-1 {
  font-size: calc(1.375rem + 1.5vw) !important;
}

.fs-2 {
  font-size: calc(1.325rem + 0.9vw) !important;
}

.fs-3 {
  font-size: calc(1.3rem + 0.6vw) !important;
}

.fs-4 {
  font-size: calc(1.275rem + 0.3vw) !important;
}

.fs-5 {
  font-size: 1.25rem !important;
}

.fs-6 {
  font-size: 1rem !important;
}

.fst-italic {
  font-style: italic !important;
}

.fst-normal {
  font-style: normal !important;
}

.fw-lighter {
  font-weight: lighter !important;
}

.fw-light {
  font-weight: 300 !important;
}

.fw-normal {
  font-weight: 400 !important;
}

.fw-medium {
  font-weight: 500 !important;
}

.fw-semibold {
  font-weight: 600 !important;
}

.fw-bold {
  font-weight: 700 !important;
}

.fw-bolder {
  font-weight: bolder !important;
}

.lh-1 {
  line-height: 1 !important;
}

.lh-sm {
  line-height: 1.25 !important;
}

.lh-base {
  line-height: 1.5 !important;
}

.lh-lg {
  line-height: 2 !important;
}

.text-start {
  text-align: left !important;
}

.text-end {
  text-align: right !important;
}

.text-center {
  text-align: center !important;
}

.text-decoration-none {
  text-decoration: none !important;
}

.text-decoration-underline {
  text-decoration: underline !important;
}

.text-decoration-line-through {
  text-decoration: line-through !important;
}

.text-lowercase {
  text-transform: lowercase !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.text-capitalize {
  text-transform: capitalize !important;
}

.text-wrap {
  white-space: normal !important;
}

.text-nowrap {
  white-space: nowrap !important;
}

/* rtl:begin:remove */
.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}

/* rtl:end:remove */
.text-primary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}

.text-secondary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity)) !important;
}

.text-success {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-success-rgb), var(--bs-text-opacity)) !important;
}

.text-info {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-info-rgb), var(--bs-text-opacity)) !important;
}

.text-warning {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-warning-rgb), var(--bs-text-opacity)) !important;
}

.text-danger {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
}

.text-light {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-light-rgb), var(--bs-text-opacity)) !important;
}

.text-dark {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity)) !important;
}

.text-black {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-black-rgb), var(--bs-text-opacity)) !important;
}

.text-white {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
}

.text-body {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity)) !important;
}

.text-muted {
  --bs-text-opacity: 1;
  color: var(--bs-secondary-color) !important;
}

.text-black-50 {
  --bs-text-opacity: 1;
  color: rgba(0, 0, 0, 0.5) !important;
}

.text-white-50 {
  --bs-text-opacity: 1;
  color: rgba(255, 255, 255, 0.5) !important;
}

.text-body-secondary {
  --bs-text-opacity: 1;
  color: var(--bs-secondary-color) !important;
}

.text-body-tertiary {
  --bs-text-opacity: 1;
  color: var(--bs-tertiary-color) !important;
}

.text-body-emphasis {
  --bs-text-opacity: 1;
  color: var(--bs-emphasis-color) !important;
}

.text-reset {
  --bs-text-opacity: 1;
  color: inherit !important;
}

.text-opacity-25 {
  --bs-text-opacity: 0.25;
}

.text-opacity-50 {
  --bs-text-opacity: 0.5;
}

.text-opacity-75 {
  --bs-text-opacity: 0.75;
}

.text-opacity-100 {
  --bs-text-opacity: 1;
}

.text-primary-emphasis {
  color: var(--bs-primary-text-emphasis) !important;
}

.text-secondary-emphasis {
  color: var(--bs-secondary-text-emphasis) !important;
}

.text-success-emphasis {
  color: var(--bs-success-text-emphasis) !important;
}

.text-info-emphasis {
  color: var(--bs-info-text-emphasis) !important;
}

.text-warning-emphasis {
  color: var(--bs-warning-text-emphasis) !important;
}

.text-danger-emphasis {
  color: var(--bs-danger-text-emphasis) !important;
}

.text-light-emphasis {
  color: var(--bs-light-text-emphasis) !important;
}

.text-dark-emphasis {
  color: var(--bs-dark-text-emphasis) !important;
}

.link-opacity-10 {
  --bs-link-opacity: 0.1;
}

.link-opacity-10-hover:hover {
  --bs-link-opacity: 0.1;
}

.link-opacity-25 {
  --bs-link-opacity: 0.25;
}

.link-opacity-25-hover:hover {
  --bs-link-opacity: 0.25;
}

.link-opacity-50 {
  --bs-link-opacity: 0.5;
}

.link-opacity-50-hover:hover {
  --bs-link-opacity: 0.5;
}

.link-opacity-75 {
  --bs-link-opacity: 0.75;
}

.link-opacity-75-hover:hover {
  --bs-link-opacity: 0.75;
}

.link-opacity-100 {
  --bs-link-opacity: 1;
}

.link-opacity-100-hover:hover {
  --bs-link-opacity: 1;
}

.link-offset-1 {
  text-underline-offset: 0.125em !important;
}

.link-offset-1-hover:hover {
  text-underline-offset: 0.125em !important;
}

.link-offset-2 {
  text-underline-offset: 0.25em !important;
}

.link-offset-2-hover:hover {
  text-underline-offset: 0.25em !important;
}

.link-offset-3 {
  text-underline-offset: 0.375em !important;
}

.link-offset-3-hover:hover {
  text-underline-offset: 0.375em !important;
}

.link-underline-primary {
  --bs-link-underline-opacity: 1;
  -webkit-text-decoration-color: rgba(var(--bs-primary-rgb), var(--bs-link-underline-opacity)) !important;
  text-decoration-color: rgba(var(--bs-primary-rgb), var(--bs-link-underline-opacity)) !important;
}

.link-underline-secondary {
  --bs-link-underline-opacity: 1;
  -webkit-text-decoration-color: rgba(var(--bs-secondary-rgb), var(--bs-link-underline-opacity)) !important;
  text-decoration-color: rgba(var(--bs-secondary-rgb), var(--bs-link-underline-opacity)) !important;
}

.link-underline-success {
  --bs-link-underline-opacity: 1;
  -webkit-text-decoration-color: rgba(var(--bs-success-rgb), var(--bs-link-underline-opacity)) !important;
  text-decoration-color: rgba(var(--bs-success-rgb), var(--bs-link-underline-opacity)) !important;
}

.link-underline-info {
  --bs-link-underline-opacity: 1;
  -webkit-text-decoration-color: rgba(var(--bs-info-rgb), var(--bs-link-underline-opacity)) !important;
  text-decoration-color: rgba(var(--bs-info-rgb), var(--bs-link-underline-opacity)) !important;
}

.link-underline-warning {
  --bs-link-underline-opacity: 1;
  -webkit-text-decoration-color: rgba(var(--bs-warning-rgb), var(--bs-link-underline-opacity)) !important;
  text-decoration-color: rgba(var(--bs-warning-rgb), var(--bs-link-underline-opacity)) !important;
}

.link-underline-danger {
  --bs-link-underline-opacity: 1;
  -webkit-text-decoration-color: rgba(var(--bs-danger-rgb), var(--bs-link-underline-opacity)) !important;
  text-decoration-color: rgba(var(--bs-danger-rgb), var(--bs-link-underline-opacity)) !important;
}

.link-underline-light {
  --bs-link-underline-opacity: 1;
  -webkit-text-decoration-color: rgba(var(--bs-light-rgb), var(--bs-link-underline-opacity)) !important;
  text-decoration-color: rgba(var(--bs-light-rgb), var(--bs-link-underline-opacity)) !important;
}

.link-underline-dark {
  --bs-link-underline-opacity: 1;
  -webkit-text-decoration-color: rgba(var(--bs-dark-rgb), var(--bs-link-underline-opacity)) !important;
  text-decoration-color: rgba(var(--bs-dark-rgb), var(--bs-link-underline-opacity)) !important;
}

.link-underline {
  --bs-link-underline-opacity: 1;
  -webkit-text-decoration-color: rgba(var(--bs-link-color-rgb), var(--bs-link-underline-opacity, 1)) !important;
  text-decoration-color: rgba(var(--bs-link-color-rgb), var(--bs-link-underline-opacity, 1)) !important;
}

.link-underline-opacity-0 {
  --bs-link-underline-opacity: 0;
}

.link-underline-opacity-0-hover:hover {
  --bs-link-underline-opacity: 0;
}

.link-underline-opacity-10 {
  --bs-link-underline-opacity: 0.1;
}

.link-underline-opacity-10-hover:hover {
  --bs-link-underline-opacity: 0.1;
}

.link-underline-opacity-25 {
  --bs-link-underline-opacity: 0.25;
}

.link-underline-opacity-25-hover:hover {
  --bs-link-underline-opacity: 0.25;
}

.link-underline-opacity-50 {
  --bs-link-underline-opacity: 0.5;
}

.link-underline-opacity-50-hover:hover {
  --bs-link-underline-opacity: 0.5;
}

.link-underline-opacity-75 {
  --bs-link-underline-opacity: 0.75;
}

.link-underline-opacity-75-hover:hover {
  --bs-link-underline-opacity: 0.75;
}

.link-underline-opacity-100 {
  --bs-link-underline-opacity: 1;
}

.link-underline-opacity-100-hover:hover {
  --bs-link-underline-opacity: 1;
}

.bg-primary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}

.bg-secondary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important;
}

.bg-success {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}

.bg-info {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity)) !important;
}

.bg-warning {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important;
}

.bg-danger {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity)) !important;
}

.bg-light {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
}

.bg-dark {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
}

.bg-black {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-black-rgb), var(--bs-bg-opacity)) !important;
}

.bg-white {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important;
}

.bg-body {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
}

.bg-transparent {
  --bs-bg-opacity: 1;
  background-color: transparent !important;
}

.bg-body-secondary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-secondary-bg-rgb), var(--bs-bg-opacity)) !important;
}

.bg-body-tertiary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-tertiary-bg-rgb), var(--bs-bg-opacity)) !important;
}

.bg-opacity-10 {
  --bs-bg-opacity: 0.1;
}

.bg-opacity-25 {
  --bs-bg-opacity: 0.25;
}

.bg-opacity-50 {
  --bs-bg-opacity: 0.5;
}

.bg-opacity-75 {
  --bs-bg-opacity: 0.75;
}

.bg-opacity-100 {
  --bs-bg-opacity: 1;
}

.bg-primary-subtle {
  background-color: var(--bs-primary-bg-subtle) !important;
}

.bg-secondary-subtle {
  background-color: var(--bs-secondary-bg-subtle) !important;
}

.bg-success-subtle {
  background-color: var(--bs-success-bg-subtle) !important;
}

.bg-info-subtle {
  background-color: var(--bs-info-bg-subtle) !important;
}

.bg-warning-subtle {
  background-color: var(--bs-warning-bg-subtle) !important;
}

.bg-danger-subtle {
  background-color: var(--bs-danger-bg-subtle) !important;
}

.bg-light-subtle {
  background-color: var(--bs-light-bg-subtle) !important;
}

.bg-dark-subtle {
  background-color: var(--bs-dark-bg-subtle) !important;
}

.bg-gradient {
  background-image: var(--bs-gradient) !important;
}

.user-select-all {
  -webkit-user-select: all !important;
  -moz-user-select: all !important;
  user-select: all !important;
}

.user-select-auto {
  -webkit-user-select: auto !important;
  -moz-user-select: auto !important;
  user-select: auto !important;
}

.user-select-none {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  user-select: none !important;
}

.pe-none {
  pointer-events: none !important;
}

.pe-auto {
  pointer-events: auto !important;
}

.rounded {
  border-radius: var(--bs-border-radius) !important;
}

.rounded-0 {
  border-radius: 0 !important;
}

.rounded-1 {
  border-radius: var(--bs-border-radius-sm) !important;
}

.rounded-2 {
  border-radius: var(--bs-border-radius) !important;
}

.rounded-3 {
  border-radius: var(--bs-border-radius-lg) !important;
}

.rounded-4 {
  border-radius: var(--bs-border-radius-xl) !important;
}

.rounded-5 {
  border-radius: var(--bs-border-radius-xxl) !important;
}

.rounded-circle {
  border-radius: 50% !important;
}

.rounded-pill {
  border-radius: var(--bs-border-radius-pill) !important;
}

.rounded-top {
  border-top-left-radius: var(--bs-border-radius) !important;
  border-top-right-radius: var(--bs-border-radius) !important;
}

.rounded-top-0 {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.rounded-top-1 {
  border-top-left-radius: var(--bs-border-radius-sm) !important;
  border-top-right-radius: var(--bs-border-radius-sm) !important;
}

.rounded-top-2 {
  border-top-left-radius: var(--bs-border-radius) !important;
  border-top-right-radius: var(--bs-border-radius) !important;
}

.rounded-top-3 {
  border-top-left-radius: var(--bs-border-radius-lg) !important;
  border-top-right-radius: var(--bs-border-radius-lg) !important;
}

.rounded-top-4 {
  border-top-left-radius: var(--bs-border-radius-xl) !important;
  border-top-right-radius: var(--bs-border-radius-xl) !important;
}

.rounded-top-5 {
  border-top-left-radius: var(--bs-border-radius-xxl) !important;
  border-top-right-radius: var(--bs-border-radius-xxl) !important;
}

.rounded-top-circle {
  border-top-left-radius: 50% !important;
  border-top-right-radius: 50% !important;
}

.rounded-top-pill {
  border-top-left-radius: var(--bs-border-radius-pill) !important;
  border-top-right-radius: var(--bs-border-radius-pill) !important;
}

.rounded-end {
  border-top-right-radius: var(--bs-border-radius) !important;
  border-bottom-right-radius: var(--bs-border-radius) !important;
}

.rounded-end-0 {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.rounded-end-1 {
  border-top-right-radius: var(--bs-border-radius-sm) !important;
  border-bottom-right-radius: var(--bs-border-radius-sm) !important;
}

.rounded-end-2 {
  border-top-right-radius: var(--bs-border-radius) !important;
  border-bottom-right-radius: var(--bs-border-radius) !important;
}

.rounded-end-3 {
  border-top-right-radius: var(--bs-border-radius-lg) !important;
  border-bottom-right-radius: var(--bs-border-radius-lg) !important;
}

.rounded-end-4 {
  border-top-right-radius: var(--bs-border-radius-xl) !important;
  border-bottom-right-radius: var(--bs-border-radius-xl) !important;
}

.rounded-end-5 {
  border-top-right-radius: var(--bs-border-radius-xxl) !important;
  border-bottom-right-radius: var(--bs-border-radius-xxl) !important;
}

.rounded-end-circle {
  border-top-right-radius: 50% !important;
  border-bottom-right-radius: 50% !important;
}

.rounded-end-pill {
  border-top-right-radius: var(--bs-border-radius-pill) !important;
  border-bottom-right-radius: var(--bs-border-radius-pill) !important;
}

.rounded-bottom {
  border-bottom-right-radius: var(--bs-border-radius) !important;
  border-bottom-left-radius: var(--bs-border-radius) !important;
}

.rounded-bottom-0 {
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.rounded-bottom-1 {
  border-bottom-right-radius: var(--bs-border-radius-sm) !important;
  border-bottom-left-radius: var(--bs-border-radius-sm) !important;
}

.rounded-bottom-2 {
  border-bottom-right-radius: var(--bs-border-radius) !important;
  border-bottom-left-radius: var(--bs-border-radius) !important;
}

.rounded-bottom-3 {
  border-bottom-right-radius: var(--bs-border-radius-lg) !important;
  border-bottom-left-radius: var(--bs-border-radius-lg) !important;
}

.rounded-bottom-4 {
  border-bottom-right-radius: var(--bs-border-radius-xl) !important;
  border-bottom-left-radius: var(--bs-border-radius-xl) !important;
}

.rounded-bottom-5 {
  border-bottom-right-radius: var(--bs-border-radius-xxl) !important;
  border-bottom-left-radius: var(--bs-border-radius-xxl) !important;
}

.rounded-bottom-circle {
  border-bottom-right-radius: 50% !important;
  border-bottom-left-radius: 50% !important;
}

.rounded-bottom-pill {
  border-bottom-right-radius: var(--bs-border-radius-pill) !important;
  border-bottom-left-radius: var(--bs-border-radius-pill) !important;
}

.rounded-start {
  border-bottom-left-radius: var(--bs-border-radius) !important;
  border-top-left-radius: var(--bs-border-radius) !important;
}

.rounded-start-0 {
  border-bottom-left-radius: 0 !important;
  border-top-left-radius: 0 !important;
}

.rounded-start-1 {
  border-bottom-left-radius: var(--bs-border-radius-sm) !important;
  border-top-left-radius: var(--bs-border-radius-sm) !important;
}

.rounded-start-2 {
  border-bottom-left-radius: var(--bs-border-radius) !important;
  border-top-left-radius: var(--bs-border-radius) !important;
}

.rounded-start-3 {
  border-bottom-left-radius: var(--bs-border-radius-lg) !important;
  border-top-left-radius: var(--bs-border-radius-lg) !important;
}

.rounded-start-4 {
  border-bottom-left-radius: var(--bs-border-radius-xl) !important;
  border-top-left-radius: var(--bs-border-radius-xl) !important;
}

.rounded-start-5 {
  border-bottom-left-radius: var(--bs-border-radius-xxl) !important;
  border-top-left-radius: var(--bs-border-radius-xxl) !important;
}

.rounded-start-circle {
  border-bottom-left-radius: 50% !important;
  border-top-left-radius: 50% !important;
}

.rounded-start-pill {
  border-bottom-left-radius: var(--bs-border-radius-pill) !important;
  border-top-left-radius: var(--bs-border-radius-pill) !important;
}

.visible {
  visibility: visible !important;
}

.invisible {
  visibility: hidden !important;
}

.z-n1 {
  z-index: -1 !important;
}

.z-0 {
  z-index: 0 !important;
}

.z-1 {
  z-index: 1 !important;
}

.z-2 {
  z-index: 2 !important;
}

.z-3 {
  z-index: 3 !important;
}

@media (min-width: 576px) {
  .float-sm-start {
    float: left !important;
  }
  .float-sm-end {
    float: right !important;
  }
  .float-sm-none {
    float: none !important;
  }
  .object-fit-sm-contain {
    -o-object-fit: contain !important;
    object-fit: contain !important;
  }
  .object-fit-sm-cover {
    -o-object-fit: cover !important;
    object-fit: cover !important;
  }
  .object-fit-sm-fill {
    -o-object-fit: fill !important;
    object-fit: fill !important;
  }
  .object-fit-sm-scale {
    -o-object-fit: scale-down !important;
    object-fit: scale-down !important;
  }
  .object-fit-sm-none {
    -o-object-fit: none !important;
    object-fit: none !important;
  }
  .d-sm-inline {
    display: inline !important;
  }
  .d-sm-inline-block {
    display: inline-block !important;
  }
  .d-sm-block {
    display: block !important;
  }
  .d-sm-grid {
    display: grid !important;
  }
  .d-sm-inline-grid {
    display: inline-grid !important;
  }
  .d-sm-table {
    display: table !important;
  }
  .d-sm-table-row {
    display: table-row !important;
  }
  .d-sm-table-cell {
    display: table-cell !important;
  }
  .d-sm-flex {
    display: flex !important;
  }
  .d-sm-inline-flex {
    display: inline-flex !important;
  }
  .d-sm-none {
    display: none !important;
  }
  .flex-sm-fill {
    flex: 1 1 auto !important;
  }
  .flex-sm-row {
    flex-direction: row !important;
  }
  .flex-sm-column {
    flex-direction: column !important;
  }
  .flex-sm-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-sm-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-sm-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-sm-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-sm-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-sm-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-sm-wrap {
    flex-wrap: wrap !important;
  }
  .flex-sm-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-sm-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .justify-content-sm-start {
    justify-content: flex-start !important;
  }
  .justify-content-sm-end {
    justify-content: flex-end !important;
  }
  .justify-content-sm-center {
    justify-content: center !important;
  }
  .justify-content-sm-between {
    justify-content: space-between !important;
  }
  .justify-content-sm-around {
    justify-content: space-around !important;
  }
  .justify-content-sm-evenly {
    justify-content: space-evenly !important;
  }
  .align-items-sm-start {
    align-items: flex-start !important;
  }
  .align-items-sm-end {
    align-items: flex-end !important;
  }
  .align-items-sm-center {
    align-items: center !important;
  }
  .align-items-sm-baseline {
    align-items: baseline !important;
  }
  .align-items-sm-stretch {
    align-items: stretch !important;
  }
  .align-content-sm-start {
    align-content: flex-start !important;
  }
  .align-content-sm-end {
    align-content: flex-end !important;
  }
  .align-content-sm-center {
    align-content: center !important;
  }
  .align-content-sm-between {
    align-content: space-between !important;
  }
  .align-content-sm-around {
    align-content: space-around !important;
  }
  .align-content-sm-stretch {
    align-content: stretch !important;
  }
  .align-self-sm-auto {
    align-self: auto !important;
  }
  .align-self-sm-start {
    align-self: flex-start !important;
  }
  .align-self-sm-end {
    align-self: flex-end !important;
  }
  .align-self-sm-center {
    align-self: center !important;
  }
  .align-self-sm-baseline {
    align-self: baseline !important;
  }
  .align-self-sm-stretch {
    align-self: stretch !important;
  }
  .order-sm-first {
    order: -1 !important;
  }
  .order-sm-0 {
    order: 0 !important;
  }
  .order-sm-1 {
    order: 1 !important;
  }
  .order-sm-2 {
    order: 2 !important;
  }
  .order-sm-3 {
    order: 3 !important;
  }
  .order-sm-4 {
    order: 4 !important;
  }
  .order-sm-5 {
    order: 5 !important;
  }
  .order-sm-last {
    order: 6 !important;
  }
  .m-sm-0 {
    margin: 0 !important;
  }
  .m-sm-1 {
    margin: 0.25rem !important;
  }
  .m-sm-2 {
    margin: 0.5rem !important;
  }
  .m-sm-3 {
    margin: 1rem !important;
  }
  .m-sm-4 {
    margin: 1.5rem !important;
  }
  .m-sm-5 {
    margin: 3rem !important;
  }
  .m-sm-auto {
    margin: auto !important;
  }
  .mx-sm-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .mx-sm-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }
  .mx-sm-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }
  .mx-sm-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
  .mx-sm-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }
  .mx-sm-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }
  .mx-sm-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .my-sm-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .my-sm-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  .my-sm-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .my-sm-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .my-sm-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .my-sm-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }
  .my-sm-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mt-sm-0 {
    margin-top: 0 !important;
  }
  .mt-sm-1 {
    margin-top: 0.25rem !important;
  }
  .mt-sm-2 {
    margin-top: 0.5rem !important;
  }
  .mt-sm-3 {
    margin-top: 1rem !important;
  }
  .mt-sm-4 {
    margin-top: 1.5rem !important;
  }
  .mt-sm-5 {
    margin-top: 3rem !important;
  }
  .mt-sm-auto {
    margin-top: auto !important;
  }
  .me-sm-0 {
    margin-right: 0 !important;
  }
  .me-sm-1 {
    margin-right: 0.25rem !important;
  }
  .me-sm-2 {
    margin-right: 0.5rem !important;
  }
  .me-sm-3 {
    margin-right: 1rem !important;
  }
  .me-sm-4 {
    margin-right: 1.5rem !important;
  }
  .me-sm-5 {
    margin-right: 3rem !important;
  }
  .me-sm-auto {
    margin-right: auto !important;
  }
  .mb-sm-0 {
    margin-bottom: 0 !important;
  }
  .mb-sm-1 {
    margin-bottom: 0.25rem !important;
  }
  .mb-sm-2 {
    margin-bottom: 0.5rem !important;
  }
  .mb-sm-3 {
    margin-bottom: 1rem !important;
  }
  .mb-sm-4 {
    margin-bottom: 1.5rem !important;
  }
  .mb-sm-5 {
    margin-bottom: 3rem !important;
  }
  .mb-sm-auto {
    margin-bottom: auto !important;
  }
  .ms-sm-0 {
    margin-left: 0 !important;
  }
  .ms-sm-1 {
    margin-left: 0.25rem !important;
  }
  .ms-sm-2 {
    margin-left: 0.5rem !important;
  }
  .ms-sm-3 {
    margin-left: 1rem !important;
  }
  .ms-sm-4 {
    margin-left: 1.5rem !important;
  }
  .ms-sm-5 {
    margin-left: 3rem !important;
  }
  .ms-sm-auto {
    margin-left: auto !important;
  }
  .p-sm-0 {
    padding: 0 !important;
  }
  .p-sm-1 {
    padding: 0.25rem !important;
  }
  .p-sm-2 {
    padding: 0.5rem !important;
  }
  .p-sm-3 {
    padding: 1rem !important;
  }
  .p-sm-4 {
    padding: 1.5rem !important;
  }
  .p-sm-5 {
    padding: 3rem !important;
  }
  .px-sm-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .px-sm-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }
  .px-sm-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  .px-sm-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  .px-sm-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
  .px-sm-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
  .py-sm-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .py-sm-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  .py-sm-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  .py-sm-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .py-sm-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .py-sm-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .pt-sm-0 {
    padding-top: 0 !important;
  }
  .pt-sm-1 {
    padding-top: 0.25rem !important;
  }
  .pt-sm-2 {
    padding-top: 0.5rem !important;
  }
  .pt-sm-3 {
    padding-top: 1rem !important;
  }
  .pt-sm-4 {
    padding-top: 1.5rem !important;
  }
  .pt-sm-5 {
    padding-top: 3rem !important;
  }
  .pe-sm-0 {
    padding-right: 0 !important;
  }
  .pe-sm-1 {
    padding-right: 0.25rem !important;
  }
  .pe-sm-2 {
    padding-right: 0.5rem !important;
  }
  .pe-sm-3 {
    padding-right: 1rem !important;
  }
  .pe-sm-4 {
    padding-right: 1.5rem !important;
  }
  .pe-sm-5 {
    padding-right: 3rem !important;
  }
  .pb-sm-0 {
    padding-bottom: 0 !important;
  }
  .pb-sm-1 {
    padding-bottom: 0.25rem !important;
  }
  .pb-sm-2 {
    padding-bottom: 0.5rem !important;
  }
  .pb-sm-3 {
    padding-bottom: 1rem !important;
  }
  .pb-sm-4 {
    padding-bottom: 1.5rem !important;
  }
  .pb-sm-5 {
    padding-bottom: 3rem !important;
  }
  .ps-sm-0 {
    padding-left: 0 !important;
  }
  .ps-sm-1 {
    padding-left: 0.25rem !important;
  }
  .ps-sm-2 {
    padding-left: 0.5rem !important;
  }
  .ps-sm-3 {
    padding-left: 1rem !important;
  }
  .ps-sm-4 {
    padding-left: 1.5rem !important;
  }
  .ps-sm-5 {
    padding-left: 3rem !important;
  }
  .gap-sm-0 {
    gap: 0 !important;
  }
  .gap-sm-1 {
    gap: 0.25rem !important;
  }
  .gap-sm-2 {
    gap: 0.5rem !important;
  }
  .gap-sm-3 {
    gap: 1rem !important;
  }
  .gap-sm-4 {
    gap: 1.5rem !important;
  }
  .gap-sm-5 {
    gap: 3rem !important;
  }
  .row-gap-sm-0 {
    row-gap: 0 !important;
  }
  .row-gap-sm-1 {
    row-gap: 0.25rem !important;
  }
  .row-gap-sm-2 {
    row-gap: 0.5rem !important;
  }
  .row-gap-sm-3 {
    row-gap: 1rem !important;
  }
  .row-gap-sm-4 {
    row-gap: 1.5rem !important;
  }
  .row-gap-sm-5 {
    row-gap: 3rem !important;
  }
  .column-gap-sm-0 {
    -moz-column-gap: 0 !important;
    column-gap: 0 !important;
  }
  .column-gap-sm-1 {
    -moz-column-gap: 0.25rem !important;
    column-gap: 0.25rem !important;
  }
  .column-gap-sm-2 {
    -moz-column-gap: 0.5rem !important;
    column-gap: 0.5rem !important;
  }
  .column-gap-sm-3 {
    -moz-column-gap: 1rem !important;
    column-gap: 1rem !important;
  }
  .column-gap-sm-4 {
    -moz-column-gap: 1.5rem !important;
    column-gap: 1.5rem !important;
  }
  .column-gap-sm-5 {
    -moz-column-gap: 3rem !important;
    column-gap: 3rem !important;
  }
  .text-sm-start {
    text-align: left !important;
  }
  .text-sm-end {
    text-align: right !important;
  }
  .text-sm-center {
    text-align: center !important;
  }
}
@media (min-width: 768px) {
  .float-md-start {
    float: left !important;
  }
  .float-md-end {
    float: right !important;
  }
  .float-md-none {
    float: none !important;
  }
  .object-fit-md-contain {
    -o-object-fit: contain !important;
    object-fit: contain !important;
  }
  .object-fit-md-cover {
    -o-object-fit: cover !important;
    object-fit: cover !important;
  }
  .object-fit-md-fill {
    -o-object-fit: fill !important;
    object-fit: fill !important;
  }
  .object-fit-md-scale {
    -o-object-fit: scale-down !important;
    object-fit: scale-down !important;
  }
  .object-fit-md-none {
    -o-object-fit: none !important;
    object-fit: none !important;
  }
  .d-md-inline {
    display: inline !important;
  }
  .d-md-inline-block {
    display: inline-block !important;
  }
  .d-md-block {
    display: block !important;
  }
  .d-md-grid {
    display: grid !important;
  }
  .d-md-inline-grid {
    display: inline-grid !important;
  }
  .d-md-table {
    display: table !important;
  }
  .d-md-table-row {
    display: table-row !important;
  }
  .d-md-table-cell {
    display: table-cell !important;
  }
  .d-md-flex {
    display: flex !important;
  }
  .d-md-inline-flex {
    display: inline-flex !important;
  }
  .d-md-none {
    display: none !important;
  }
  .flex-md-fill {
    flex: 1 1 auto !important;
  }
  .flex-md-row {
    flex-direction: row !important;
  }
  .flex-md-column {
    flex-direction: column !important;
  }
  .flex-md-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-md-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-md-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-md-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-md-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-md-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-md-wrap {
    flex-wrap: wrap !important;
  }
  .flex-md-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-md-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .justify-content-md-start {
    justify-content: flex-start !important;
  }
  .justify-content-md-end {
    justify-content: flex-end !important;
  }
  .justify-content-md-center {
    justify-content: center !important;
  }
  .justify-content-md-between {
    justify-content: space-between !important;
  }
  .justify-content-md-around {
    justify-content: space-around !important;
  }
  .justify-content-md-evenly {
    justify-content: space-evenly !important;
  }
  .align-items-md-start {
    align-items: flex-start !important;
  }
  .align-items-md-end {
    align-items: flex-end !important;
  }
  .align-items-md-center {
    align-items: center !important;
  }
  .align-items-md-baseline {
    align-items: baseline !important;
  }
  .align-items-md-stretch {
    align-items: stretch !important;
  }
  .align-content-md-start {
    align-content: flex-start !important;
  }
  .align-content-md-end {
    align-content: flex-end !important;
  }
  .align-content-md-center {
    align-content: center !important;
  }
  .align-content-md-between {
    align-content: space-between !important;
  }
  .align-content-md-around {
    align-content: space-around !important;
  }
  .align-content-md-stretch {
    align-content: stretch !important;
  }
  .align-self-md-auto {
    align-self: auto !important;
  }
  .align-self-md-start {
    align-self: flex-start !important;
  }
  .align-self-md-end {
    align-self: flex-end !important;
  }
  .align-self-md-center {
    align-self: center !important;
  }
  .align-self-md-baseline {
    align-self: baseline !important;
  }
  .align-self-md-stretch {
    align-self: stretch !important;
  }
  .order-md-first {
    order: -1 !important;
  }
  .order-md-0 {
    order: 0 !important;
  }
  .order-md-1 {
    order: 1 !important;
  }
  .order-md-2 {
    order: 2 !important;
  }
  .order-md-3 {
    order: 3 !important;
  }
  .order-md-4 {
    order: 4 !important;
  }
  .order-md-5 {
    order: 5 !important;
  }
  .order-md-last {
    order: 6 !important;
  }
  .m-md-0 {
    margin: 0 !important;
  }
  .m-md-1 {
    margin: 0.25rem !important;
  }
  .m-md-2 {
    margin: 0.5rem !important;
  }
  .m-md-3 {
    margin: 1rem !important;
  }
  .m-md-4 {
    margin: 1.5rem !important;
  }
  .m-md-5 {
    margin: 3rem !important;
  }
  .m-md-auto {
    margin: auto !important;
  }
  .mx-md-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .mx-md-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }
  .mx-md-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }
  .mx-md-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
  .mx-md-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }
  .mx-md-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }
  .mx-md-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .my-md-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .my-md-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  .my-md-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .my-md-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .my-md-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .my-md-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }
  .my-md-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mt-md-0 {
    margin-top: 0 !important;
  }
  .mt-md-1 {
    margin-top: 0.25rem !important;
  }
  .mt-md-2 {
    margin-top: 0.5rem !important;
  }
  .mt-md-3 {
    margin-top: 1rem !important;
  }
  .mt-md-4 {
    margin-top: 1.5rem !important;
  }
  .mt-md-5 {
    margin-top: 3rem !important;
  }
  .mt-md-auto {
    margin-top: auto !important;
  }
  .me-md-0 {
    margin-right: 0 !important;
  }
  .me-md-1 {
    margin-right: 0.25rem !important;
  }
  .me-md-2 {
    margin-right: 0.5rem !important;
  }
  .me-md-3 {
    margin-right: 1rem !important;
  }
  .me-md-4 {
    margin-right: 1.5rem !important;
  }
  .me-md-5 {
    margin-right: 3rem !important;
  }
  .me-md-auto {
    margin-right: auto !important;
  }
  .mb-md-0 {
    margin-bottom: 0 !important;
  }
  .mb-md-1 {
    margin-bottom: 0.25rem !important;
  }
  .mb-md-2 {
    margin-bottom: 0.5rem !important;
  }
  .mb-md-3 {
    margin-bottom: 1rem !important;
  }
  .mb-md-4 {
    margin-bottom: 1.5rem !important;
  }
  .mb-md-5 {
    margin-bottom: 3rem !important;
  }
  .mb-md-auto {
    margin-bottom: auto !important;
  }
  .ms-md-0 {
    margin-left: 0 !important;
  }
  .ms-md-1 {
    margin-left: 0.25rem !important;
  }
  .ms-md-2 {
    margin-left: 0.5rem !important;
  }
  .ms-md-3 {
    margin-left: 1rem !important;
  }
  .ms-md-4 {
    margin-left: 1.5rem !important;
  }
  .ms-md-5 {
    margin-left: 3rem !important;
  }
  .ms-md-auto {
    margin-left: auto !important;
  }
  .p-md-0 {
    padding: 0 !important;
  }
  .p-md-1 {
    padding: 0.25rem !important;
  }
  .p-md-2 {
    padding: 0.5rem !important;
  }
  .p-md-3 {
    padding: 1rem !important;
  }
  .p-md-4 {
    padding: 1.5rem !important;
  }
  .p-md-5 {
    padding: 3rem !important;
  }
  .px-md-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .px-md-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }
  .px-md-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  .px-md-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  .px-md-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
  .px-md-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
  .py-md-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .py-md-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  .py-md-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  .py-md-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .py-md-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .py-md-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .pt-md-0 {
    padding-top: 0 !important;
  }
  .pt-md-1 {
    padding-top: 0.25rem !important;
  }
  .pt-md-2 {
    padding-top: 0.5rem !important;
  }
  .pt-md-3 {
    padding-top: 1rem !important;
  }
  .pt-md-4 {
    padding-top: 1.5rem !important;
  }
  .pt-md-5 {
    padding-top: 3rem !important;
  }
  .pe-md-0 {
    padding-right: 0 !important;
  }
  .pe-md-1 {
    padding-right: 0.25rem !important;
  }
  .pe-md-2 {
    padding-right: 0.5rem !important;
  }
  .pe-md-3 {
    padding-right: 1rem !important;
  }
  .pe-md-4 {
    padding-right: 1.5rem !important;
  }
  .pe-md-5 {
    padding-right: 3rem !important;
  }
  .pb-md-0 {
    padding-bottom: 0 !important;
  }
  .pb-md-1 {
    padding-bottom: 0.25rem !important;
  }
  .pb-md-2 {
    padding-bottom: 0.5rem !important;
  }
  .pb-md-3 {
    padding-bottom: 1rem !important;
  }
  .pb-md-4 {
    padding-bottom: 1.5rem !important;
  }
  .pb-md-5 {
    padding-bottom: 3rem !important;
  }
  .ps-md-0 {
    padding-left: 0 !important;
  }
  .ps-md-1 {
    padding-left: 0.25rem !important;
  }
  .ps-md-2 {
    padding-left: 0.5rem !important;
  }
  .ps-md-3 {
    padding-left: 1rem !important;
  }
  .ps-md-4 {
    padding-left: 1.5rem !important;
  }
  .ps-md-5 {
    padding-left: 3rem !important;
  }
  .gap-md-0 {
    gap: 0 !important;
  }
  .gap-md-1 {
    gap: 0.25rem !important;
  }
  .gap-md-2 {
    gap: 0.5rem !important;
  }
  .gap-md-3 {
    gap: 1rem !important;
  }
  .gap-md-4 {
    gap: 1.5rem !important;
  }
  .gap-md-5 {
    gap: 3rem !important;
  }
  .row-gap-md-0 {
    row-gap: 0 !important;
  }
  .row-gap-md-1 {
    row-gap: 0.25rem !important;
  }
  .row-gap-md-2 {
    row-gap: 0.5rem !important;
  }
  .row-gap-md-3 {
    row-gap: 1rem !important;
  }
  .row-gap-md-4 {
    row-gap: 1.5rem !important;
  }
  .row-gap-md-5 {
    row-gap: 3rem !important;
  }
  .column-gap-md-0 {
    -moz-column-gap: 0 !important;
    column-gap: 0 !important;
  }
  .column-gap-md-1 {
    -moz-column-gap: 0.25rem !important;
    column-gap: 0.25rem !important;
  }
  .column-gap-md-2 {
    -moz-column-gap: 0.5rem !important;
    column-gap: 0.5rem !important;
  }
  .column-gap-md-3 {
    -moz-column-gap: 1rem !important;
    column-gap: 1rem !important;
  }
  .column-gap-md-4 {
    -moz-column-gap: 1.5rem !important;
    column-gap: 1.5rem !important;
  }
  .column-gap-md-5 {
    -moz-column-gap: 3rem !important;
    column-gap: 3rem !important;
  }
  .text-md-start {
    text-align: left !important;
  }
  .text-md-end {
    text-align: right !important;
  }
  .text-md-center {
    text-align: center !important;
  }
}
@media (min-width: 992px) {
  .float-lg-start {
    float: left !important;
  }
  .float-lg-end {
    float: right !important;
  }
  .float-lg-none {
    float: none !important;
  }
  .object-fit-lg-contain {
    -o-object-fit: contain !important;
    object-fit: contain !important;
  }
  .object-fit-lg-cover {
    -o-object-fit: cover !important;
    object-fit: cover !important;
  }
  .object-fit-lg-fill {
    -o-object-fit: fill !important;
    object-fit: fill !important;
  }
  .object-fit-lg-scale {
    -o-object-fit: scale-down !important;
    object-fit: scale-down !important;
  }
  .object-fit-lg-none {
    -o-object-fit: none !important;
    object-fit: none !important;
  }
  .d-lg-inline {
    display: inline !important;
  }
  .d-lg-inline-block {
    display: inline-block !important;
  }
  .d-lg-block {
    display: block !important;
  }
  .d-lg-grid {
    display: grid !important;
  }
  .d-lg-inline-grid {
    display: inline-grid !important;
  }
  .d-lg-table {
    display: table !important;
  }
  .d-lg-table-row {
    display: table-row !important;
  }
  .d-lg-table-cell {
    display: table-cell !important;
  }
  .d-lg-flex {
    display: flex !important;
  }
  .d-lg-inline-flex {
    display: inline-flex !important;
  }
  .d-lg-none {
    display: none !important;
  }
  .flex-lg-fill {
    flex: 1 1 auto !important;
  }
  .flex-lg-row {
    flex-direction: row !important;
  }
  .flex-lg-column {
    flex-direction: column !important;
  }
  .flex-lg-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-lg-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-lg-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-lg-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-lg-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-lg-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-lg-wrap {
    flex-wrap: wrap !important;
  }
  .flex-lg-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-lg-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .justify-content-lg-start {
    justify-content: flex-start !important;
  }
  .justify-content-lg-end {
    justify-content: flex-end !important;
  }
  .justify-content-lg-center {
    justify-content: center !important;
  }
  .justify-content-lg-between {
    justify-content: space-between !important;
  }
  .justify-content-lg-around {
    justify-content: space-around !important;
  }
  .justify-content-lg-evenly {
    justify-content: space-evenly !important;
  }
  .align-items-lg-start {
    align-items: flex-start !important;
  }
  .align-items-lg-end {
    align-items: flex-end !important;
  }
  .align-items-lg-center {
    align-items: center !important;
  }
  .align-items-lg-baseline {
    align-items: baseline !important;
  }
  .align-items-lg-stretch {
    align-items: stretch !important;
  }
  .align-content-lg-start {
    align-content: flex-start !important;
  }
  .align-content-lg-end {
    align-content: flex-end !important;
  }
  .align-content-lg-center {
    align-content: center !important;
  }
  .align-content-lg-between {
    align-content: space-between !important;
  }
  .align-content-lg-around {
    align-content: space-around !important;
  }
  .align-content-lg-stretch {
    align-content: stretch !important;
  }
  .align-self-lg-auto {
    align-self: auto !important;
  }
  .align-self-lg-start {
    align-self: flex-start !important;
  }
  .align-self-lg-end {
    align-self: flex-end !important;
  }
  .align-self-lg-center {
    align-self: center !important;
  }
  .align-self-lg-baseline {
    align-self: baseline !important;
  }
  .align-self-lg-stretch {
    align-self: stretch !important;
  }
  .order-lg-first {
    order: -1 !important;
  }
  .order-lg-0 {
    order: 0 !important;
  }
  .order-lg-1 {
    order: 1 !important;
  }
  .order-lg-2 {
    order: 2 !important;
  }
  .order-lg-3 {
    order: 3 !important;
  }
  .order-lg-4 {
    order: 4 !important;
  }
  .order-lg-5 {
    order: 5 !important;
  }
  .order-lg-last {
    order: 6 !important;
  }
  .m-lg-0 {
    margin: 0 !important;
  }
  .m-lg-1 {
    margin: 0.25rem !important;
  }
  .m-lg-2 {
    margin: 0.5rem !important;
  }
  .m-lg-3 {
    margin: 1rem !important;
  }
  .m-lg-4 {
    margin: 1.5rem !important;
  }
  .m-lg-5 {
    margin: 3rem !important;
  }
  .m-lg-auto {
    margin: auto !important;
  }
  .mx-lg-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .mx-lg-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }
  .mx-lg-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }
  .mx-lg-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
  .mx-lg-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }
  .mx-lg-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }
  .mx-lg-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .my-lg-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .my-lg-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  .my-lg-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .my-lg-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .my-lg-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .my-lg-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }
  .my-lg-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mt-lg-0 {
    margin-top: 0 !important;
  }
  .mt-lg-1 {
    margin-top: 0.25rem !important;
  }
  .mt-lg-2 {
    margin-top: 0.5rem !important;
  }
  .mt-lg-3 {
    margin-top: 1rem !important;
  }
  .mt-lg-4 {
    margin-top: 1.5rem !important;
  }
  .mt-lg-5 {
    margin-top: 3rem !important;
  }
  .mt-lg-auto {
    margin-top: auto !important;
  }
  .me-lg-0 {
    margin-right: 0 !important;
  }
  .me-lg-1 {
    margin-right: 0.25rem !important;
  }
  .me-lg-2 {
    margin-right: 0.5rem !important;
  }
  .me-lg-3 {
    margin-right: 1rem !important;
  }
  .me-lg-4 {
    margin-right: 1.5rem !important;
  }
  .me-lg-5 {
    margin-right: 3rem !important;
  }
  .me-lg-auto {
    margin-right: auto !important;
  }
  .mb-lg-0 {
    margin-bottom: 0 !important;
  }
  .mb-lg-1 {
    margin-bottom: 0.25rem !important;
  }
  .mb-lg-2 {
    margin-bottom: 0.5rem !important;
  }
  .mb-lg-3 {
    margin-bottom: 1rem !important;
  }
  .mb-lg-4 {
    margin-bottom: 1.5rem !important;
  }
  .mb-lg-5 {
    margin-bottom: 3rem !important;
  }
  .mb-lg-auto {
    margin-bottom: auto !important;
  }
  .ms-lg-0 {
    margin-left: 0 !important;
  }
  .ms-lg-1 {
    margin-left: 0.25rem !important;
  }
  .ms-lg-2 {
    margin-left: 0.5rem !important;
  }
  .ms-lg-3 {
    margin-left: 1rem !important;
  }
  .ms-lg-4 {
    margin-left: 1.5rem !important;
  }
  .ms-lg-5 {
    margin-left: 3rem !important;
  }
  .ms-lg-auto {
    margin-left: auto !important;
  }
  .p-lg-0 {
    padding: 0 !important;
  }
  .p-lg-1 {
    padding: 0.25rem !important;
  }
  .p-lg-2 {
    padding: 0.5rem !important;
  }
  .p-lg-3 {
    padding: 1rem !important;
  }
  .p-lg-4 {
    padding: 1.5rem !important;
  }
  .p-lg-5 {
    padding: 3rem !important;
  }
  .px-lg-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .px-lg-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }
  .px-lg-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  .px-lg-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  .px-lg-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
  .px-lg-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
  .py-lg-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .py-lg-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  .py-lg-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  .py-lg-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .py-lg-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .py-lg-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .pt-lg-0 {
    padding-top: 0 !important;
  }
  .pt-lg-1 {
    padding-top: 0.25rem !important;
  }
  .pt-lg-2 {
    padding-top: 0.5rem !important;
  }
  .pt-lg-3 {
    padding-top: 1rem !important;
  }
  .pt-lg-4 {
    padding-top: 1.5rem !important;
  }
  .pt-lg-5 {
    padding-top: 3rem !important;
  }
  .pe-lg-0 {
    padding-right: 0 !important;
  }
  .pe-lg-1 {
    padding-right: 0.25rem !important;
  }
  .pe-lg-2 {
    padding-right: 0.5rem !important;
  }
  .pe-lg-3 {
    padding-right: 1rem !important;
  }
  .pe-lg-4 {
    padding-right: 1.5rem !important;
  }
  .pe-lg-5 {
    padding-right: 3rem !important;
  }
  .pb-lg-0 {
    padding-bottom: 0 !important;
  }
  .pb-lg-1 {
    padding-bottom: 0.25rem !important;
  }
  .pb-lg-2 {
    padding-bottom: 0.5rem !important;
  }
  .pb-lg-3 {
    padding-bottom: 1rem !important;
  }
  .pb-lg-4 {
    padding-bottom: 1.5rem !important;
  }
  .pb-lg-5 {
    padding-bottom: 3rem !important;
  }
  .ps-lg-0 {
    padding-left: 0 !important;
  }
  .ps-lg-1 {
    padding-left: 0.25rem !important;
  }
  .ps-lg-2 {
    padding-left: 0.5rem !important;
  }
  .ps-lg-3 {
    padding-left: 1rem !important;
  }
  .ps-lg-4 {
    padding-left: 1.5rem !important;
  }
  .ps-lg-5 {
    padding-left: 3rem !important;
  }
  .gap-lg-0 {
    gap: 0 !important;
  }
  .gap-lg-1 {
    gap: 0.25rem !important;
  }
  .gap-lg-2 {
    gap: 0.5rem !important;
  }
  .gap-lg-3 {
    gap: 1rem !important;
  }
  .gap-lg-4 {
    gap: 1.5rem !important;
  }
  .gap-lg-5 {
    gap: 3rem !important;
  }
  .row-gap-lg-0 {
    row-gap: 0 !important;
  }
  .row-gap-lg-1 {
    row-gap: 0.25rem !important;
  }
  .row-gap-lg-2 {
    row-gap: 0.5rem !important;
  }
  .row-gap-lg-3 {
    row-gap: 1rem !important;
  }
  .row-gap-lg-4 {
    row-gap: 1.5rem !important;
  }
  .row-gap-lg-5 {
    row-gap: 3rem !important;
  }
  .column-gap-lg-0 {
    -moz-column-gap: 0 !important;
    column-gap: 0 !important;
  }
  .column-gap-lg-1 {
    -moz-column-gap: 0.25rem !important;
    column-gap: 0.25rem !important;
  }
  .column-gap-lg-2 {
    -moz-column-gap: 0.5rem !important;
    column-gap: 0.5rem !important;
  }
  .column-gap-lg-3 {
    -moz-column-gap: 1rem !important;
    column-gap: 1rem !important;
  }
  .column-gap-lg-4 {
    -moz-column-gap: 1.5rem !important;
    column-gap: 1.5rem !important;
  }
  .column-gap-lg-5 {
    -moz-column-gap: 3rem !important;
    column-gap: 3rem !important;
  }
  .text-lg-start {
    text-align: left !important;
  }
  .text-lg-end {
    text-align: right !important;
  }
  .text-lg-center {
    text-align: center !important;
  }
}
@media (min-width: 1200px) {
  .float-xl-start {
    float: left !important;
  }
  .float-xl-end {
    float: right !important;
  }
  .float-xl-none {
    float: none !important;
  }
  .object-fit-xl-contain {
    -o-object-fit: contain !important;
    object-fit: contain !important;
  }
  .object-fit-xl-cover {
    -o-object-fit: cover !important;
    object-fit: cover !important;
  }
  .object-fit-xl-fill {
    -o-object-fit: fill !important;
    object-fit: fill !important;
  }
  .object-fit-xl-scale {
    -o-object-fit: scale-down !important;
    object-fit: scale-down !important;
  }
  .object-fit-xl-none {
    -o-object-fit: none !important;
    object-fit: none !important;
  }
  .d-xl-inline {
    display: inline !important;
  }
  .d-xl-inline-block {
    display: inline-block !important;
  }
  .d-xl-block {
    display: block !important;
  }
  .d-xl-grid {
    display: grid !important;
  }
  .d-xl-inline-grid {
    display: inline-grid !important;
  }
  .d-xl-table {
    display: table !important;
  }
  .d-xl-table-row {
    display: table-row !important;
  }
  .d-xl-table-cell {
    display: table-cell !important;
  }
  .d-xl-flex {
    display: flex !important;
  }
  .d-xl-inline-flex {
    display: inline-flex !important;
  }
  .d-xl-none {
    display: none !important;
  }
  .flex-xl-fill {
    flex: 1 1 auto !important;
  }
  .flex-xl-row {
    flex-direction: row !important;
  }
  .flex-xl-column {
    flex-direction: column !important;
  }
  .flex-xl-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-xl-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-xl-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-xl-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-xl-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-xl-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-xl-wrap {
    flex-wrap: wrap !important;
  }
  .flex-xl-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-xl-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .justify-content-xl-start {
    justify-content: flex-start !important;
  }
  .justify-content-xl-end {
    justify-content: flex-end !important;
  }
  .justify-content-xl-center {
    justify-content: center !important;
  }
  .justify-content-xl-between {
    justify-content: space-between !important;
  }
  .justify-content-xl-around {
    justify-content: space-around !important;
  }
  .justify-content-xl-evenly {
    justify-content: space-evenly !important;
  }
  .align-items-xl-start {
    align-items: flex-start !important;
  }
  .align-items-xl-end {
    align-items: flex-end !important;
  }
  .align-items-xl-center {
    align-items: center !important;
  }
  .align-items-xl-baseline {
    align-items: baseline !important;
  }
  .align-items-xl-stretch {
    align-items: stretch !important;
  }
  .align-content-xl-start {
    align-content: flex-start !important;
  }
  .align-content-xl-end {
    align-content: flex-end !important;
  }
  .align-content-xl-center {
    align-content: center !important;
  }
  .align-content-xl-between {
    align-content: space-between !important;
  }
  .align-content-xl-around {
    align-content: space-around !important;
  }
  .align-content-xl-stretch {
    align-content: stretch !important;
  }
  .align-self-xl-auto {
    align-self: auto !important;
  }
  .align-self-xl-start {
    align-self: flex-start !important;
  }
  .align-self-xl-end {
    align-self: flex-end !important;
  }
  .align-self-xl-center {
    align-self: center !important;
  }
  .align-self-xl-baseline {
    align-self: baseline !important;
  }
  .align-self-xl-stretch {
    align-self: stretch !important;
  }
  .order-xl-first {
    order: -1 !important;
  }
  .order-xl-0 {
    order: 0 !important;
  }
  .order-xl-1 {
    order: 1 !important;
  }
  .order-xl-2 {
    order: 2 !important;
  }
  .order-xl-3 {
    order: 3 !important;
  }
  .order-xl-4 {
    order: 4 !important;
  }
  .order-xl-5 {
    order: 5 !important;
  }
  .order-xl-last {
    order: 6 !important;
  }
  .m-xl-0 {
    margin: 0 !important;
  }
  .m-xl-1 {
    margin: 0.25rem !important;
  }
  .m-xl-2 {
    margin: 0.5rem !important;
  }
  .m-xl-3 {
    margin: 1rem !important;
  }
  .m-xl-4 {
    margin: 1.5rem !important;
  }
  .m-xl-5 {
    margin: 3rem !important;
  }
  .m-xl-auto {
    margin: auto !important;
  }
  .mx-xl-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .mx-xl-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }
  .mx-xl-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }
  .mx-xl-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
  .mx-xl-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }
  .mx-xl-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }
  .mx-xl-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .my-xl-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .my-xl-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  .my-xl-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .my-xl-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .my-xl-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .my-xl-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }
  .my-xl-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mt-xl-0 {
    margin-top: 0 !important;
  }
  .mt-xl-1 {
    margin-top: 0.25rem !important;
  }
  .mt-xl-2 {
    margin-top: 0.5rem !important;
  }
  .mt-xl-3 {
    margin-top: 1rem !important;
  }
  .mt-xl-4 {
    margin-top: 1.5rem !important;
  }
  .mt-xl-5 {
    margin-top: 3rem !important;
  }
  .mt-xl-auto {
    margin-top: auto !important;
  }
  .me-xl-0 {
    margin-right: 0 !important;
  }
  .me-xl-1 {
    margin-right: 0.25rem !important;
  }
  .me-xl-2 {
    margin-right: 0.5rem !important;
  }
  .me-xl-3 {
    margin-right: 1rem !important;
  }
  .me-xl-4 {
    margin-right: 1.5rem !important;
  }
  .me-xl-5 {
    margin-right: 3rem !important;
  }
  .me-xl-auto {
    margin-right: auto !important;
  }
  .mb-xl-0 {
    margin-bottom: 0 !important;
  }
  .mb-xl-1 {
    margin-bottom: 0.25rem !important;
  }
  .mb-xl-2 {
    margin-bottom: 0.5rem !important;
  }
  .mb-xl-3 {
    margin-bottom: 1rem !important;
  }
  .mb-xl-4 {
    margin-bottom: 1.5rem !important;
  }
  .mb-xl-5 {
    margin-bottom: 3rem !important;
  }
  .mb-xl-auto {
    margin-bottom: auto !important;
  }
  .ms-xl-0 {
    margin-left: 0 !important;
  }
  .ms-xl-1 {
    margin-left: 0.25rem !important;
  }
  .ms-xl-2 {
    margin-left: 0.5rem !important;
  }
  .ms-xl-3 {
    margin-left: 1rem !important;
  }
  .ms-xl-4 {
    margin-left: 1.5rem !important;
  }
  .ms-xl-5 {
    margin-left: 3rem !important;
  }
  .ms-xl-auto {
    margin-left: auto !important;
  }
  .p-xl-0 {
    padding: 0 !important;
  }
  .p-xl-1 {
    padding: 0.25rem !important;
  }
  .p-xl-2 {
    padding: 0.5rem !important;
  }
  .p-xl-3 {
    padding: 1rem !important;
  }
  .p-xl-4 {
    padding: 1.5rem !important;
  }
  .p-xl-5 {
    padding: 3rem !important;
  }
  .px-xl-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .px-xl-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }
  .px-xl-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  .px-xl-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  .px-xl-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
  .px-xl-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
  .py-xl-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .py-xl-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  .py-xl-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  .py-xl-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .py-xl-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .py-xl-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .pt-xl-0 {
    padding-top: 0 !important;
  }
  .pt-xl-1 {
    padding-top: 0.25rem !important;
  }
  .pt-xl-2 {
    padding-top: 0.5rem !important;
  }
  .pt-xl-3 {
    padding-top: 1rem !important;
  }
  .pt-xl-4 {
    padding-top: 1.5rem !important;
  }
  .pt-xl-5 {
    padding-top: 3rem !important;
  }
  .pe-xl-0 {
    padding-right: 0 !important;
  }
  .pe-xl-1 {
    padding-right: 0.25rem !important;
  }
  .pe-xl-2 {
    padding-right: 0.5rem !important;
  }
  .pe-xl-3 {
    padding-right: 1rem !important;
  }
  .pe-xl-4 {
    padding-right: 1.5rem !important;
  }
  .pe-xl-5 {
    padding-right: 3rem !important;
  }
  .pb-xl-0 {
    padding-bottom: 0 !important;
  }
  .pb-xl-1 {
    padding-bottom: 0.25rem !important;
  }
  .pb-xl-2 {
    padding-bottom: 0.5rem !important;
  }
  .pb-xl-3 {
    padding-bottom: 1rem !important;
  }
  .pb-xl-4 {
    padding-bottom: 1.5rem !important;
  }
  .pb-xl-5 {
    padding-bottom: 3rem !important;
  }
  .ps-xl-0 {
    padding-left: 0 !important;
  }
  .ps-xl-1 {
    padding-left: 0.25rem !important;
  }
  .ps-xl-2 {
    padding-left: 0.5rem !important;
  }
  .ps-xl-3 {
    padding-left: 1rem !important;
  }
  .ps-xl-4 {
    padding-left: 1.5rem !important;
  }
  .ps-xl-5 {
    padding-left: 3rem !important;
  }
  .gap-xl-0 {
    gap: 0 !important;
  }
  .gap-xl-1 {
    gap: 0.25rem !important;
  }
  .gap-xl-2 {
    gap: 0.5rem !important;
  }
  .gap-xl-3 {
    gap: 1rem !important;
  }
  .gap-xl-4 {
    gap: 1.5rem !important;
  }
  .gap-xl-5 {
    gap: 3rem !important;
  }
  .row-gap-xl-0 {
    row-gap: 0 !important;
  }
  .row-gap-xl-1 {
    row-gap: 0.25rem !important;
  }
  .row-gap-xl-2 {
    row-gap: 0.5rem !important;
  }
  .row-gap-xl-3 {
    row-gap: 1rem !important;
  }
  .row-gap-xl-4 {
    row-gap: 1.5rem !important;
  }
  .row-gap-xl-5 {
    row-gap: 3rem !important;
  }
  .column-gap-xl-0 {
    -moz-column-gap: 0 !important;
    column-gap: 0 !important;
  }
  .column-gap-xl-1 {
    -moz-column-gap: 0.25rem !important;
    column-gap: 0.25rem !important;
  }
  .column-gap-xl-2 {
    -moz-column-gap: 0.5rem !important;
    column-gap: 0.5rem !important;
  }
  .column-gap-xl-3 {
    -moz-column-gap: 1rem !important;
    column-gap: 1rem !important;
  }
  .column-gap-xl-4 {
    -moz-column-gap: 1.5rem !important;
    column-gap: 1.5rem !important;
  }
  .column-gap-xl-5 {
    -moz-column-gap: 3rem !important;
    column-gap: 3rem !important;
  }
  .text-xl-start {
    text-align: left !important;
  }
  .text-xl-end {
    text-align: right !important;
  }
  .text-xl-center {
    text-align: center !important;
  }
}
@media (min-width: 1400px) {
  .float-xxl-start {
    float: left !important;
  }
  .float-xxl-end {
    float: right !important;
  }
  .float-xxl-none {
    float: none !important;
  }
  .object-fit-xxl-contain {
    -o-object-fit: contain !important;
    object-fit: contain !important;
  }
  .object-fit-xxl-cover {
    -o-object-fit: cover !important;
    object-fit: cover !important;
  }
  .object-fit-xxl-fill {
    -o-object-fit: fill !important;
    object-fit: fill !important;
  }
  .object-fit-xxl-scale {
    -o-object-fit: scale-down !important;
    object-fit: scale-down !important;
  }
  .object-fit-xxl-none {
    -o-object-fit: none !important;
    object-fit: none !important;
  }
  .d-xxl-inline {
    display: inline !important;
  }
  .d-xxl-inline-block {
    display: inline-block !important;
  }
  .d-xxl-block {
    display: block !important;
  }
  .d-xxl-grid {
    display: grid !important;
  }
  .d-xxl-inline-grid {
    display: inline-grid !important;
  }
  .d-xxl-table {
    display: table !important;
  }
  .d-xxl-table-row {
    display: table-row !important;
  }
  .d-xxl-table-cell {
    display: table-cell !important;
  }
  .d-xxl-flex {
    display: flex !important;
  }
  .d-xxl-inline-flex {
    display: inline-flex !important;
  }
  .d-xxl-none {
    display: none !important;
  }
  .flex-xxl-fill {
    flex: 1 1 auto !important;
  }
  .flex-xxl-row {
    flex-direction: row !important;
  }
  .flex-xxl-column {
    flex-direction: column !important;
  }
  .flex-xxl-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-xxl-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-xxl-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-xxl-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-xxl-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-xxl-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-xxl-wrap {
    flex-wrap: wrap !important;
  }
  .flex-xxl-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-xxl-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .justify-content-xxl-start {
    justify-content: flex-start !important;
  }
  .justify-content-xxl-end {
    justify-content: flex-end !important;
  }
  .justify-content-xxl-center {
    justify-content: center !important;
  }
  .justify-content-xxl-between {
    justify-content: space-between !important;
  }
  .justify-content-xxl-around {
    justify-content: space-around !important;
  }
  .justify-content-xxl-evenly {
    justify-content: space-evenly !important;
  }
  .align-items-xxl-start {
    align-items: flex-start !important;
  }
  .align-items-xxl-end {
    align-items: flex-end !important;
  }
  .align-items-xxl-center {
    align-items: center !important;
  }
  .align-items-xxl-baseline {
    align-items: baseline !important;
  }
  .align-items-xxl-stretch {
    align-items: stretch !important;
  }
  .align-content-xxl-start {
    align-content: flex-start !important;
  }
  .align-content-xxl-end {
    align-content: flex-end !important;
  }
  .align-content-xxl-center {
    align-content: center !important;
  }
  .align-content-xxl-between {
    align-content: space-between !important;
  }
  .align-content-xxl-around {
    align-content: space-around !important;
  }
  .align-content-xxl-stretch {
    align-content: stretch !important;
  }
  .align-self-xxl-auto {
    align-self: auto !important;
  }
  .align-self-xxl-start {
    align-self: flex-start !important;
  }
  .align-self-xxl-end {
    align-self: flex-end !important;
  }
  .align-self-xxl-center {
    align-self: center !important;
  }
  .align-self-xxl-baseline {
    align-self: baseline !important;
  }
  .align-self-xxl-stretch {
    align-self: stretch !important;
  }
  .order-xxl-first {
    order: -1 !important;
  }
  .order-xxl-0 {
    order: 0 !important;
  }
  .order-xxl-1 {
    order: 1 !important;
  }
  .order-xxl-2 {
    order: 2 !important;
  }
  .order-xxl-3 {
    order: 3 !important;
  }
  .order-xxl-4 {
    order: 4 !important;
  }
  .order-xxl-5 {
    order: 5 !important;
  }
  .order-xxl-last {
    order: 6 !important;
  }
  .m-xxl-0 {
    margin: 0 !important;
  }
  .m-xxl-1 {
    margin: 0.25rem !important;
  }
  .m-xxl-2 {
    margin: 0.5rem !important;
  }
  .m-xxl-3 {
    margin: 1rem !important;
  }
  .m-xxl-4 {
    margin: 1.5rem !important;
  }
  .m-xxl-5 {
    margin: 3rem !important;
  }
  .m-xxl-auto {
    margin: auto !important;
  }
  .mx-xxl-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .mx-xxl-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }
  .mx-xxl-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }
  .mx-xxl-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
  .mx-xxl-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }
  .mx-xxl-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }
  .mx-xxl-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .my-xxl-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .my-xxl-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  .my-xxl-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .my-xxl-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .my-xxl-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .my-xxl-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }
  .my-xxl-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mt-xxl-0 {
    margin-top: 0 !important;
  }
  .mt-xxl-1 {
    margin-top: 0.25rem !important;
  }
  .mt-xxl-2 {
    margin-top: 0.5rem !important;
  }
  .mt-xxl-3 {
    margin-top: 1rem !important;
  }
  .mt-xxl-4 {
    margin-top: 1.5rem !important;
  }
  .mt-xxl-5 {
    margin-top: 3rem !important;
  }
  .mt-xxl-auto {
    margin-top: auto !important;
  }
  .me-xxl-0 {
    margin-right: 0 !important;
  }
  .me-xxl-1 {
    margin-right: 0.25rem !important;
  }
  .me-xxl-2 {
    margin-right: 0.5rem !important;
  }
  .me-xxl-3 {
    margin-right: 1rem !important;
  }
  .me-xxl-4 {
    margin-right: 1.5rem !important;
  }
  .me-xxl-5 {
    margin-right: 3rem !important;
  }
  .me-xxl-auto {
    margin-right: auto !important;
  }
  .mb-xxl-0 {
    margin-bottom: 0 !important;
  }
  .mb-xxl-1 {
    margin-bottom: 0.25rem !important;
  }
  .mb-xxl-2 {
    margin-bottom: 0.5rem !important;
  }
  .mb-xxl-3 {
    margin-bottom: 1rem !important;
  }
  .mb-xxl-4 {
    margin-bottom: 1.5rem !important;
  }
  .mb-xxl-5 {
    margin-bottom: 3rem !important;
  }
  .mb-xxl-auto {
    margin-bottom: auto !important;
  }
  .ms-xxl-0 {
    margin-left: 0 !important;
  }
  .ms-xxl-1 {
    margin-left: 0.25rem !important;
  }
  .ms-xxl-2 {
    margin-left: 0.5rem !important;
  }
  .ms-xxl-3 {
    margin-left: 1rem !important;
  }
  .ms-xxl-4 {
    margin-left: 1.5rem !important;
  }
  .ms-xxl-5 {
    margin-left: 3rem !important;
  }
  .ms-xxl-auto {
    margin-left: auto !important;
  }
  .p-xxl-0 {
    padding: 0 !important;
  }
  .p-xxl-1 {
    padding: 0.25rem !important;
  }
  .p-xxl-2 {
    padding: 0.5rem !important;
  }
  .p-xxl-3 {
    padding: 1rem !important;
  }
  .p-xxl-4 {
    padding: 1.5rem !important;
  }
  .p-xxl-5 {
    padding: 3rem !important;
  }
  .px-xxl-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .px-xxl-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }
  .px-xxl-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  .px-xxl-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  .px-xxl-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
  .px-xxl-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
  .py-xxl-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .py-xxl-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  .py-xxl-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  .py-xxl-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .py-xxl-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .py-xxl-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .pt-xxl-0 {
    padding-top: 0 !important;
  }
  .pt-xxl-1 {
    padding-top: 0.25rem !important;
  }
  .pt-xxl-2 {
    padding-top: 0.5rem !important;
  }
  .pt-xxl-3 {
    padding-top: 1rem !important;
  }
  .pt-xxl-4 {
    padding-top: 1.5rem !important;
  }
  .pt-xxl-5 {
    padding-top: 3rem !important;
  }
  .pe-xxl-0 {
    padding-right: 0 !important;
  }
  .pe-xxl-1 {
    padding-right: 0.25rem !important;
  }
  .pe-xxl-2 {
    padding-right: 0.5rem !important;
  }
  .pe-xxl-3 {
    padding-right: 1rem !important;
  }
  .pe-xxl-4 {
    padding-right: 1.5rem !important;
  }
  .pe-xxl-5 {
    padding-right: 3rem !important;
  }
  .pb-xxl-0 {
    padding-bottom: 0 !important;
  }
  .pb-xxl-1 {
    padding-bottom: 0.25rem !important;
  }
  .pb-xxl-2 {
    padding-bottom: 0.5rem !important;
  }
  .pb-xxl-3 {
    padding-bottom: 1rem !important;
  }
  .pb-xxl-4 {
    padding-bottom: 1.5rem !important;
  }
  .pb-xxl-5 {
    padding-bottom: 3rem !important;
  }
  .ps-xxl-0 {
    padding-left: 0 !important;
  }
  .ps-xxl-1 {
    padding-left: 0.25rem !important;
  }
  .ps-xxl-2 {
    padding-left: 0.5rem !important;
  }
  .ps-xxl-3 {
    padding-left: 1rem !important;
  }
  .ps-xxl-4 {
    padding-left: 1.5rem !important;
  }
  .ps-xxl-5 {
    padding-left: 3rem !important;
  }
  .gap-xxl-0 {
    gap: 0 !important;
  }
  .gap-xxl-1 {
    gap: 0.25rem !important;
  }
  .gap-xxl-2 {
    gap: 0.5rem !important;
  }
  .gap-xxl-3 {
    gap: 1rem !important;
  }
  .gap-xxl-4 {
    gap: 1.5rem !important;
  }
  .gap-xxl-5 {
    gap: 3rem !important;
  }
  .row-gap-xxl-0 {
    row-gap: 0 !important;
  }
  .row-gap-xxl-1 {
    row-gap: 0.25rem !important;
  }
  .row-gap-xxl-2 {
    row-gap: 0.5rem !important;
  }
  .row-gap-xxl-3 {
    row-gap: 1rem !important;
  }
  .row-gap-xxl-4 {
    row-gap: 1.5rem !important;
  }
  .row-gap-xxl-5 {
    row-gap: 3rem !important;
  }
  .column-gap-xxl-0 {
    -moz-column-gap: 0 !important;
    column-gap: 0 !important;
  }
  .column-gap-xxl-1 {
    -moz-column-gap: 0.25rem !important;
    column-gap: 0.25rem !important;
  }
  .column-gap-xxl-2 {
    -moz-column-gap: 0.5rem !important;
    column-gap: 0.5rem !important;
  }
  .column-gap-xxl-3 {
    -moz-column-gap: 1rem !important;
    column-gap: 1rem !important;
  }
  .column-gap-xxl-4 {
    -moz-column-gap: 1.5rem !important;
    column-gap: 1.5rem !important;
  }
  .column-gap-xxl-5 {
    -moz-column-gap: 3rem !important;
    column-gap: 3rem !important;
  }
  .text-xxl-start {
    text-align: left !important;
  }
  .text-xxl-end {
    text-align: right !important;
  }
  .text-xxl-center {
    text-align: center !important;
  }
}
@media (min-width: 1200px) {
  .fs-1 {
    font-size: 2.5rem !important;
  }
  .fs-2 {
    font-size: 2rem !important;
  }
  .fs-3 {
    font-size: 1.75rem !important;
  }
  .fs-4 {
    font-size: 1.5rem !important;
  }
}
@media print {
  .d-print-inline {
    display: inline !important;
  }
  .d-print-inline-block {
    display: inline-block !important;
  }
  .d-print-block {
    display: block !important;
  }
  .d-print-grid {
    display: grid !important;
  }
  .d-print-inline-grid {
    display: inline-grid !important;
  }
  .d-print-table {
    display: table !important;
  }
  .d-print-table-row {
    display: table-row !important;
  }
  .d-print-table-cell {
    display: table-cell !important;
  }
  .d-print-flex {
    display: flex !important;
  }
  .d-print-inline-flex {
    display: inline-flex !important;
  }
  .d-print-none {
    display: none !important;
  }
}

/*# sourceMappingURL=bootstrap.css.map */
/*!
 * Waves v0.7.6
 * http://fian.my.id/Waves 
 * 
 * Copyright 2014-2018 Alfiana E. Sibuea and other contributors 
 * Released under the MIT license 
 * https://github.com/fians/Waves/blob/master/LICENSE */
.waves-effect {
  position: relative;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.waves-effect .waves-ripple {
  position: absolute;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
  opacity: 0;
  background: rgba(0, 0, 0, 0.2);
  background: -webkit-radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  background: -o-radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  background: -moz-radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  background: radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  -o-transition-property: -o-transform, opacity;
  transition-property: transform, opacity;
  -webkit-transform: scale(0) translate(0, 0);
  -moz-transform: scale(0) translate(0, 0);
  -ms-transform: scale(0) translate(0, 0);
  -o-transform: scale(0) translate(0, 0);
  transform: scale(0) translate(0, 0);
  pointer-events: none;
}
.waves-effect.waves-light .waves-ripple {
  background: rgba(255, 255, 255, 0.4);
  background: -webkit-radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  background: -o-radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  background: -moz-radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  background: radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
}
.waves-effect.waves-classic .waves-ripple {
  background: rgba(0, 0, 0, 0.2);
}
.waves-effect.waves-classic.waves-light .waves-ripple {
  background: rgba(255, 255, 255, 0.4);
}
.waves-notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}
.waves-button,
.waves-circle {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}
.waves-button,
.waves-button:hover,
.waves-button:visited,
.waves-button-input {
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: none;
  outline: none;
  color: inherit;
  background-color: rgba(0, 0, 0, 0);
  font-size: 1em;
  line-height: 1em;
  text-align: center;
  text-decoration: none;
  z-index: 1;
}
.waves-button {
  padding: 0.85em 1.1em;
  border-radius: 0.2em;
}
.waves-button-input {
  margin: 0;
  padding: 0.85em 1.1em;
}
.waves-input-wrapper {
  border-radius: 0.2em;
  vertical-align: bottom;
}
.waves-input-wrapper.waves-button {
  padding: 0;
}
.waves-input-wrapper .waves-button-input {
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
}
.waves-circle {
  text-align: center;
  width: 2.5em;
  height: 2.5em;
  line-height: 2.5em;
  border-radius: 50%;
}
.waves-float {
  -webkit-mask-image: none;
  -webkit-box-shadow: 0px 1px 1.5px 1px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 1px 1.5px 1px rgba(0, 0, 0, 0.12);
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  -o-transition: all 300ms;
  transition: all 300ms;
}
.waves-float:active {
  -webkit-box-shadow: 0px 8px 20px 1px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 8px 20px 1px rgba(0, 0, 0, 0.3);
}
.waves-block {
  display: block;
}

.waves-effect .waves-ripple
{
	position: absolute;
	border-radius: 50%;
	width: 100px;
	height: 100px;
	margin-top: -50px;
	margin-left: -50px;
	opacity: 0;
	background: rgba(0, 0, 0, 0.2);
	background: -webkit-radial-gradient(var(--app-main-color-semi-transparent-02) 0, var(--app-main-color-semi-transparent-04) 40%, var(--app-main-color-semi-transparent-06) 50%, var(--app-main-color-semi-transparent-08) 60%, rgba(255, 255, 255, 0) 70%);
	background: -o-radial-gradient(var(--app-main-color-semi-transparent-02) 0, var(--app-main-color-semi-transparent-04) 40%, var(--app-main-color-semi-transparent-06) 50%, var(--app-main-color-semi-transparent-08) 60%, rgba(255, 255, 255, 0) 70%);
	background: -moz-radial-gradient(var(--app-main-color-semi-transparent-02) 0, var(--app-main-color-semi-transparent-04) 40%, var(--app-main-color-semi-transparent-06) 50%, var(--app-main-color-semi-transparent-08) 60%, rgba(255, 255, 255, 0) 70%);
	background: radial-gradient(var(--app-main-color-semi-transparent-02) 0, var(--app-main-color-semi-transparent-04) 40%, var(--app-main-color-semi-transparent-06) 50%, var(--app-main-color-semi-transparent-08) 60%, rgba(255, 255, 255, 0) 70%);
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
	-webkit-transition-property: -webkit-transform, opacity;
	-moz-transition-property: -moz-transform, opacity;
	-o-transition-property: -o-transform, opacity;
	transition-property: transform, opacity;
	-webkit-transform: scale(0) translate(0, 0);
	-moz-transform: scale(0) translate(0, 0);
	-ms-transform: scale(0) translate(0, 0);
	-o-transform: scale(0) translate(0, 0);
	transform: scale(0) translate(0, 0);
	pointer-events: none;
}

.waves-effect.waves-light .waves-ripple
{
	background: rgba(255, 255, 255, 0.4);
	background: -webkit-radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
	background: -o-radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
	background: -moz-radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
	background: radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
}

.waves-effect.waves-classic .waves-ripple
{
	background: var(--app-main-color-semi-transparent-02);
}

.waves-effect.waves-classic.waves-light .waves-ripple
{
	background: rgba(255, 255, 255, 0.4);
}

.waves-button,
.waves-circle
{
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, var(--app-main-color) 100%);
}

.waves-float
{
	-webkit-mask-image: none;
	-webkit-box-shadow: 0px 1px 1.5px 1px var(--app-main-color-semi-transparent-02);
	box-shadow: 0px 1px 1.5px 1px var(--app-main-color-semi-transparent-02);
	-webkit-transition: all 300ms;
	-moz-transition: all 300ms;
	-o-transition: all 300ms;
	transition: all 300ms;
}

	.waves-float:active
	{
		-webkit-box-shadow: 0px 8px 20px 1px var(--app-main-color-semi-transparent-04);
		box-shadow: 0px 8px 20px 1px var(--app-main-color-semi-transparent-04);
	}

.waves-block
{
	display: block;
}

/*Important to leave it 240 so that the carousel pictures align perfectly*/
#main-navbar {
  padding: 10px calc(0.5 * 10px);
  /* Only fade the tint + shadow as the sticky bar enters its scrolled state. The old
     `transition-duration: 2s` animated EVERYTHING (incl. backdrop-filter + border), which
     made the glass top bar flicker and an outline appear/disappear on scroll. Excluding
     backdrop-filter/border (they apply instantly) + a short duration = a clean, premium fade. */
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

#main-navbar.for-scrolled-doc {
  background: var(--tm-surface, rgba(255, 255, 255, 0.85)) !important;
}

/* The scrolled-bar blur lives on a ::before overlay, NEVER on the bar itself: backdrop-filter
   on #main-navbar would make the bar the backdrop root for everything inside it, so the header
   dropdowns' own frosted-glass blur (html.glass .dropdown-menu) would stop sampling the page
   behind them the moment the page scrolls. The overlay has no descendants -> nothing breaks. */
#main-navbar.for-scrolled-doc::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

#quick-top-bar-commands-container {
  margin-left: auto;
  margin: 0 10px 0 0;
}
#quick-top-bar-commands-container .small-screens-account-link {
  width: 34px;
  height: 34px;
  margin: 0 calc(0.5 * 10px);
}
#quick-top-bar-commands-container .small-screens-account-link .tm-icon {
  font-size: 18px;
}
#quick-top-bar-commands-container .small-screens-shopping-cart-link {
  width: 34px;
  height: 34px;
  margin: 0 calc(0.5 * 10px);
}
#quick-top-bar-commands-container .small-screens-shopping-cart-link .tm-icon {
  font-size: 18px;
}

.dropdown-menu-for-search-bar-options .tm-icon {
  color: var(--tm-secondary, #00c893);
}

.dropdown-menu-for-search-bar-options .dropdown-item:hover, .dropdown-item:focus {
  outline: none;
}

/*The subtle main navbar underline*/
#main-navbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  pointer-events: none;
  z-index: 100;
  background: linear-gradient(90deg, var(--tm-primary, #0088d4) 0%, var(--tm-secondary, #00c893) 100%);
}

#main-navbar .tm-icon.for-account {
  color: var(--tm-secondary, #00c893);
}

#main-navbar .tm-icon.for-logout {
  color: var(--tm-danger, #ff6500);
}

#main-navbar .favs-icon {
  color: #ff6500;
}

#main-navbar .tm-vip-icon {
  color: var(--tm-primary, #0088d4);
}

#main-navbar .shopping-cart-icon {
  color: #63bef1;
}

#main-navbar .logged-user-initials-icon {
  width: 22px;
  height: 22px;
  line-height: 21px;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  border-radius: 50%;
  font-weight: 600;
  font-size: 10px;
  margin-right: 2px;
  background: linear-gradient(90deg, var(--tm-secondary-dark, #009970) 0%, var(--tm-secondary, #00c893) 100%);
  color: white;
}

#main-navbar .dropdown-menu li {
  position: relative;
}
#main-navbar .dropdown-menu .dropdown-submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: -7px;
}
#main-navbar .subcategory-menu-for-bigger-screens {
  display: none;
}
#main-navbar .subcategory-menu-for-bigger-screens::before {
  display: none;
}
#main-navbar .subcategory-menu-for-smaller-screens {
  list-style: none;
  word-break: break-all;
}

#main-navbar .person-picture-small {
  /*width: 22px;
  height: 22px;
  display: inline-block;
  vertical-align: middle;
  border-radius: 50%;
  margin-right: 2px;
  overflow: hidden;*/
  border-radius: 50%;
  width: 22px;
  height: 22px;
  object-fit: cover;
  display: inline-block;
  margin-right: 2px;
  overflow: hidden;
}

a.go-to-my-account-link {
  color: var(--tm-text, #555);
  white-space: normal;
  word-break: break-all;
}
a.go-to-my-account-link .tm-icon {
  display: block;
  width: 60px;
  height: 60px;
  margin: 10px auto;
}
a.go-to-my-account-link .logged-user-email.bolder {
  text-align: center;
  color: var(--tm-anchor, #0366d6);
  display: block;
}
a.go-to-my-account-link .person-picture-small.bolder {
  border-radius: 50%;
  width: 100px !important;
  height: 100px !important;
  object-fit: cover;
  margin: 0 auto calc(1.5 * 10px) auto !important;
  display: block !important;
  transition-duration: 0.2s;
}
a.go-to-my-account-link #logged-user-full-name-menu-item {
  text-align: center;
  color: var(--tm-text, #555);
  margin: 10px 0;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
a.go-to-my-account-link .tm-icon.for-account.bolder {
  width: 80px;
  height: 80px;
  display: block;
  margin: 0 auto;
}
a.go-to-my-account-link .logged-user-initials-icon.bolder {
  width: 100px !important;
  height: 100px !important;
  display: block !important;
  margin: 0 auto 10px auto !important;
  font-size: 50px !important;
  line-height: 105px !important;
  font-weight: 400 !important;
  letter-spacing: 1px !important;
}

a.go-to-my-account-link:hover {
  text-decoration: none;
}
a.go-to-my-account-link:hover .logged-user-email {
  color: var(--tm-anchor-hover, #004796);
}
a.go-to-my-account-link:hover .person-picture-small.bolder {
  transform: scale(1.1);
}

.navbar-nav.navbar-right.currencies-list.invisible,
.navbar-nav.navbar-right.languages-list.invisible {
  display: none;
}

#main-menu-toggler-for-small-screens:focus {
  outline: none !important;
  box-shadow: none !important;
}
#main-menu-toggler-for-small-screens:active {
  outline: none !important;
  box-shadow: none !important;
}

#secondary-navbar {
  padding: 0;
  background: rgba(255, 255, 255, 0.4);
}

#secondary-navbar .secondary-navbar-contents {
  padding: calc(1 * 10px) calc(1 * 10px) calc(2 * 10px) calc(1 * 10px);
}

#secondary-navbar .marketplace-product-groups .marketplace-product-groups-icon-container {
  width: 20px;
  display: inline-block;
}
#secondary-navbar .marketplace-product-groups .marketplace-product-groups-icon-container .tm-icon {
  color: var(--tm-accent, #ff6500);
}

#secondary-navbar .secondary-menu-icon-container {
  width: 20px;
  display: inline-block;
}
#secondary-navbar .secondary-menu-icon-container .tm-icon {
  color: var(--tm-accent, #ff6500);
}

.marketplace-product-groups-dropdown.dropdown-menu.dropdown-menu-end.show {
  left: 0;
  width: min-content;
}
.marketplace-product-groups-dropdown.dropdown-menu.dropdown-menu-end.show::before {
  display: none;
}

#secondary-navbar .article-categs .article-categs-icon-container {
  width: 20px;
  display: inline-block;
}
#secondary-navbar .article-categs .article-categs-icon-container .tm-icon {
  color: var(--tm-accent, #ff6500);
}

#secondary-navbar .marketplace-product-groups a.dropdown-item .tm-icon {
  color: orange;
}

#secondary-navbar .article-categs a.dropdown-item .tm-icon {
  color: #b269ca;
}

#secondary-navbar .more-pages a.dropdown-item .tm-icon {
  color: var(--tm-secondary, #00c893);
}

#secondary-navbar li.nav-item > a.special {
  white-space: nowrap;
}

#secondary-navbar .dropdown-menu li {
  position: relative;
}
#secondary-navbar .dropdown-menu .dropdown-submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: -7px;
}
#secondary-navbar .dropdown-menu .dropdown-submenu-left {
  right: 100%;
  left: auto;
}
#secondary-navbar .subcategory-menu-for-bigger-screens {
  display: none;
}
#secondary-navbar .subcategory-menu-for-bigger-screens::before {
  display: none;
}
#secondary-navbar .subcategory-menu-for-smaller-screens {
  list-style: none;
  word-break: break-all;
}

/*Logo picture ------------------------------*/
#logo-image-wrapper-link {
  transition-duration: 0.2s;
  position: relative;
  padding: 0;
}

#logo-image-wrapper-link:hover {
  transform: rotate(-2deg);
}

.logo-image {
  max-width: 15vw;
  max-height: 50px;
}

select.invoicing-currencies-selector,
select.languages-selector {
  height: auto;
  line-height: 1;
  font-size: inherit;
  border-radius: 50px !important;
  cursor: pointer !important;
  transition-duration: 0.2s;
  padding: calc(10px / 2);
}

/* Flag-aware language picker ---------------------------------------------------
   Mobile-first base. The secondary navbar background is near-white on small
   screens, so the toggle reads as a primary-blue pill. Desktop/tablet overrides
   live in own.os.common.media.queries.scss where the navbar turns into the blue
   gradient and the toggle inverts to a translucent-on-blue look. */
.languages-list .languages-form {
  display: none;
}
.languages-list .languages-dropdown {
  position: relative;
}
.languages-list .languages-selector {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--tm-surface, white);
  color: var(--tm-primary-dark, #006197);
  border: solid 1px transparent;
  border-radius: 50px;
  padding: 4px 14px 4px 8px;
  line-height: 1;
  font-size: inherit;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
  white-space: nowrap;
  min-height: 32px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.languages-list .languages-selector::after {
  margin-left: 4px;
  border-top-color: currentColor;
  opacity: 0.7;
  transition: transform 0.2s, opacity 0.2s;
}
.languages-list .languages-selector:hover {
  background: var(--tm-surface-alt, #fcfdff);
  border-color: #bfe8ff;
}
.languages-list .languages-selector:focus, .languages-list .languages-selector:focus-visible {
  outline: none;
  border-color: var(--tm-primary, #0088d4);
  box-shadow: 0 0 0 0.15rem rgba(0, 136, 212, 0.25);
}
.languages-list .languages-selector[aria-expanded=true] {
  background: var(--tm-primary, #0088d4);
  color: white;
  border-color: var(--tm-primary, #0088d4);
}
.languages-list .languages-selector[aria-expanded=true]::after {
  opacity: 1;
  transform: rotate(180deg);
}
.languages-list .lang-flag-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 16px;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.04);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}
.languages-list .lang-flag {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.languages-list .lang-flag-placeholder {
  font-size: 11px;
  color: var(--tm-text-muted, #aaa);
  background: rgba(0, 0, 0, 0.04);
}
.languages-list .lang-name {
  font-size: 13px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.1px;
}

.languages-dropdown-menu.dropdown-menu {
  min-width: 0;
  width: max-content;
  max-width: 90vw;
  padding: 6px;
  border-radius: 12px;
  border: solid 1px #e5e5e5;
  background: var(--tm-surface, white);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.15);
  margin-top: 6px;
}
.languages-dropdown-menu.dropdown-menu::before {
  display: none;
}
.languages-dropdown-menu.dropdown-menu li {
  list-style: none;
}
.languages-dropdown-menu.dropdown-menu .dropdown-item.language-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  background: transparent;
  border-radius: 8px;
  text-align: start;
  cursor: pointer;
  color: var(--tm-text, #333);
  transition: background-color 0.2s, color 0.2s;
  white-space: normal;
  font-size: 14px;
  line-height: 1.2;
}
.languages-dropdown-menu.dropdown-menu .dropdown-item.language-option .lang-flag-wrapper {
  width: 26px;
  height: 19px;
  border-radius: 3px;
}
.languages-dropdown-menu.dropdown-menu .dropdown-item.language-option .lang-name {
  flex: 1;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 500;
}
.languages-dropdown-menu.dropdown-menu .dropdown-item.language-option .lang-current-icon {
  margin-left: auto;
  color: var(--tm-secondary, #00c893);
  font-size: 13px;
}
.languages-dropdown-menu.dropdown-menu .dropdown-item.language-option:hover, .languages-dropdown-menu.dropdown-menu .dropdown-item.language-option:focus, .languages-dropdown-menu.dropdown-menu .dropdown-item.language-option:focus-visible {
  background-color: rgba(37, 120, 182, 0.06);
  color: var(--tm-primary-dark, #006197);
  outline: none;
}
.languages-dropdown-menu.dropdown-menu .dropdown-item.language-option.active, .languages-dropdown-menu.dropdown-menu .dropdown-item.language-option[aria-current=true] {
  background-color: rgba(37, 120, 182, 0.1);
  color: var(--tm-primary-dark, #006197);
}
.languages-dropdown-menu.dropdown-menu .dropdown-item.language-option.active .lang-name, .languages-dropdown-menu.dropdown-menu .dropdown-item.language-option[aria-current=true] .lang-name {
  font-weight: 600;
}

/* The language options live inside #secondary-navbar and carry the generic
   .dropdown-item class, so on desktop they would otherwise inherit the wide
   min-width (200/300/350px) used for the category submenu items - and because
   that rule is ID-scoped it out-specifies the plain-class language rule. Reset
   it here (matching or higher specificity) so the picker hugs its content. */
#secondary-navbar .languages-dropdown-menu.dropdown-menu .dropdown-item.language-option {
  min-width: 0;
}

#main-navbar .nav-link,
#secondary-navbar .nav-link {
  padding: 10px 0;
}

#main-navbar .dropdown-item,
#secondary-navbar .dropdown-item {
  padding-top: calc(1.25 * 10px);
  padding-bottom: calc(1.25 * 10px);
}

#secondary-navbar .dropdown-item {
  white-space: normal;
}

.tm-people-finder-icon {
  color: #2578b6;
}

.btn.btn-outline-primary.top-bar-people-finder-button {
  padding: 1px 3px;
  margin: 0 10px;
  width: 25.5px;
  height: 25px;
  border-color: #2578b6;
}
.btn.btn-outline-primary.top-bar-people-finder-button .tm-icon {
  color: #2578b6;
}
.btn.btn-outline-primary.top-bar-people-finder-button:hover {
  background: #2578b6;
}
.btn.btn-outline-primary.top-bar-people-finder-button:hover .tm-icon {
  color: white;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  #main-navbar {
    padding: 10px;
  }
  #main-navbar .dropdown-item,
  #secondary-navbar .dropdown-item {
    padding: 0.25rem 1.5rem;
  }
  #secondary-navbar .nav-link,
  #main-navbar .nav-link {
    padding: 0.5rem;
  }
  #secondary-navbar .secondary-navbar-contents {
    padding: 0 1rem calc(10px * 2) 1rem;
  }
  #secondary-navbar .dropdown-item {
    min-width: 200px;
  }
  #secondary-navbar .subcategory-menu-for-bigger-screens {
    display: unset;
  }
  #secondary-navbar .subcategory-menu-for-smaller-screens {
    display: none;
  }
  #secondary-navbar .article-categs .article-categs-icon-container .tm-icon {
    color: white;
  }
  #secondary-navbar .marketplace-product-groups .marketplace-product-groups-icon-container .tm-icon {
    color: white;
  }
  #secondary-navbar .secondary-menu-icon-container .tm-icon {
    color: white;
  }
  #main-navbar .dropdown-menu > li:hover > .dropdown-submenu {
    display: block;
  }
  #secondary-navbar .dropdown-menu > li:hover > .dropdown-submenu {
    display: block;
  }
  html.fixed-top-bar #main-navbar {
    position: fixed;
    z-index: 9990; /*make sure it stays under the popup overlays*/
    top: 0;
    left: 0;
    right: 0;
    height: 74px;
    box-shadow: 0 2px 5px -3px rgba(0, 0, 0, 0.25);
  }
  html.fixed-top-bar body {
    padding-top: 74px;
  }
  a.go-to-my-account-link {
    white-space: nowrap;
    word-break: normal;
  }
  .logo-image {
    max-width: 190px;
  }
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .btn.btn-outline-primary.top-bar-people-finder-button {
    padding: 4px 7px;
    width: 36px;
    height: 34px;
  }
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  #secondary-navbar .dropdown-item {
    min-width: 300px;
  }
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  #secondary-navbar .dropdown-item {
    min-width: 350px;
  }
}
/* dark: top bar surface + text */
#main-navbar.bg-white {
  background-color: var(--tm-surface, #fff) !important;
}

#main-navbar.navbar-light .navbar-nav .nav-link,
#main-navbar .navbar-text {
  color: var(--tm-text, rgba(0, 0, 0, 0.55));
}

/* =========================================================================
   FO HEADER STYLES ("Stil header" - BO Web Studio -> Tema interfata)
   -------------------------------------------------------------------------
   Pure-CSS re-skins of the SAME header markup (_Header.cshtml: #main-navbar
   + #secondary-navbar), activated through an html.fo-header-<style> class
   added by _Layout (see InterfaceThemeRenderer.GetHtmlClasses). The chained
   html.fo-header-density-<d> class adjusts the vertical density and composes
   with ANY style (including the default Classic one).

   Contract:
    * "Default = apply nothing": with no fo-header-* class on <html> this file
      matches nothing, so an untouched shop keeps the exact current header.
    * Every colour reads a --tm-* design token with the storefront's original
      literal as fallback, so each style follows the selected colour theme
      (light, dark or Custom) automatically.
    * Authored as plain CSS (no Sass features) so the .scss/.css twins stay
      byte-identical without a compiler; loaded right after own.os.topbar.css.
    * The sticky top bar (html.fixed-top-bar) keeps its fixed height mechanism:
      whenever a density changes the bar height, the body padding-top is
      adjusted in the same rule set so the layout never jumps.
   ========================================================================= */

/* =========================================================================
   ELEGANT ("Elegant") - boutique refinement.
   The main bar keeps its surface but gains a soft depth shadow and a faded
   theme-gradient hairline; the secondary bar becomes a deep primary-dark band
   with spaced small-caps items. Quiet luxury, zero layout changes.
   ========================================================================= */

html.fo-header-elegant #main-navbar.bg-white {
	box-shadow: 0 16px 34px -28px rgba(0, 0, 0, 0.45);
}

/* The 2px hard gradient underline becomes a 1px hairline that fades out toward
   the edges - the signature "engraved" line of the style. */
html.fo-header-elegant #main-navbar::after {
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, var(--tm-primary, #0088d4) 22%, var(--tm-secondary, #00c893) 78%, transparent 100%);
	opacity: 0.9;
}

/* A touch of air in the top-level typography. */
html.fo-header-elegant #main-navbar .navbar-nav > li > .nav-link {
	letter-spacing: 0.4px;
}

html.fo-header-elegant #logo-image-wrapper-link:hover {
	transform: none;
	filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.18));
}

@media (min-width: 576px) {
	/* Deep, calm secondary band instead of the loud gradient. */
	html.fo-header-elegant #secondary-navbar {
		background: var(--tm-primary-dark, #006197);
		background: linear-gradient(180deg, var(--tm-primary-dark, #006197) 0%, color-mix(in srgb, var(--tm-primary-dark, #006197) 82%, #000) 100%);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
	}

	/* Spaced small-caps menu items - the boutique voice. */
	html.fo-header-elegant #secondary-navbar li.nav-item,
	html.fo-header-elegant #secondary-navbar li.nav-item > a,
	html.fo-header-elegant #secondary-navbar li.nav-item .mi-menu-group,
	html.fo-header-elegant #secondary-navbar li.nav-item .mi-menu-group > a,
	html.fo-header-elegant #secondary-navbar li.nav-item .mi-menu-group > button {
		font-size: 11.5px;
		text-transform: uppercase;
		letter-spacing: 0.9px;
		font-weight: 500;
	}

	html.fo-header-elegant #secondary-navbar li.nav-item.mi-menu-group:hover,
	html.fo-header-elegant #secondary-navbar li.nav-item:not(.mi-menu-group) > a:hover {
		border-color: rgba(255, 255, 255, 0.55);
	}

	/* The "Produse" pill: keep it light but tie its text to the deep band. */
	html.fo-header-elegant #secondary-navbar li.nav-item > a.special {
		color: var(--tm-primary-dark, #006197);
	}

	/* The dropdown arrow tip inherits the band colour for a seamless look. */
	html.fo-header-elegant #secondary-navbar .dropdown-menu::before {
		border-bottom-color: var(--tm-surface, white);
	}
}

/* =========================================================================
   UNIFIED ("Monolit") - one continuous gradient block.
   The main bar takes the theme gradient too (white text/icons, frosted
   search, the logo on a light chip so any logo stays readable) and the
   secondary bar continues the same gradient one shade deeper.
   ========================================================================= */

html.fo-header-unified #main-navbar.bg-white {
	background: var(--tm-gradient-default, linear-gradient(90deg, #0088d4 0%, #00c893 100%)) !important;
}

/* Sticky/scrolled state keeps the gradient - the monolith never dissolves.
   Both the base (translucent surface) AND the frosted-glass material
   (html.glass #main-navbar.for-scrolled-doc, loaded later with the same
   (1,2,1) specificity + !important) repaint the scrolled bar - under the
   white header texts that reads as an unreadable washed-out veil. The extra
   .bg-white class lifts this to (1,3,1) so the gradient wins over both. */
html.fo-header-unified #main-navbar.bg-white.for-scrolled-doc,
html.glass.fo-header-unified #main-navbar.for-scrolled-doc {
	background: var(--tm-gradient-default, linear-gradient(90deg, #0088d4 0%, #00c893 100%)) !important;
}

/* The scrolled-bar blur now lives on a ::before overlay (own.os.topbar + own.os.glass - moved
   off the bar so the header dropdowns keep their own glass blur). Over the monolith's OPAQUE
   gradient that overlay would only distort the theme colours (its saturate() resamples the
   gradient), so it is dropped here. Same (1,3,2) specificity lift as the rule above, so it
   beats both overlay rules regardless of load order. */
html.fo-header-unified #main-navbar.bg-white.for-scrolled-doc::before,
html.glass.fo-header-unified #main-navbar.for-scrolled-doc::before {
	content: none;
}

/* No underline needed - the secondary bar continues the same material; a thin
   translucent divider separates the two bars instead. */
html.fo-header-unified #main-navbar::after {
	height: 1px;
	background: rgba(255, 255, 255, 0.28);
}

/* Top-level texts/icons go white (dropdown CONTENTS keep their surface look -
   only the direct navbar-level links are touched). */
html.fo-header-unified #main-navbar.navbar-light .navbar-nav .nav-link,
html.fo-header-unified #main-navbar .navbar-text {
	color: #fff;
}

html.fo-header-unified #main-navbar.navbar-light .navbar-nav > li > .nav-link:hover,
html.fo-header-unified #main-navbar.navbar-light .navbar-nav > li > .nav-link:focus {
	color: #fff;
	opacity: 0.85;
}

/* But the links INSIDE opened dropdown menus sit on a surface panel - give
   them back the normal text colour. (Deliberately over-specified so it beats
   the white .navbar-nav .nav-link rule above for the dropdown descendants.) */
html.fo-header-unified #main-navbar.navbar-light .navbar-nav .dropdown-menu .nav-link,
html.fo-header-unified #main-navbar.navbar-light .navbar-nav .dropdown-menu .dropdown-item {
	color: var(--tm-text, #212529);
}

/* The coloured shortcut icons of the top-level links (account/favorites/cart/
   VIP) go white on the gradient; the same icons inside dropdown panels keep
   their colours via the .dropdown-menu overrides below. */
html.fo-header-unified #main-navbar .navbar-nav > li > .nav-link .tm-icon.for-account,
html.fo-header-unified #main-navbar .navbar-nav > li > .nav-link .favs-icon,
html.fo-header-unified #main-navbar .navbar-nav > li > .nav-link .shopping-cart-icon,
html.fo-header-unified #main-navbar .navbar-nav > li > .nav-link .tm-vip-icon,
html.fo-header-unified #main-navbar .navbar-nav > li > button.nav-link .tm-icon,
html.fo-header-unified #quick-top-bar-commands-container .tm-icon {
	color: #fff;
}

/* The logo floats on a light chip so ANY logo (dark or light artwork) stays
   readable over the gradient. */
html.fo-header-unified #logo-image-wrapper-link {
	background: rgba(255, 255, 255, 0.94);
	border-radius: 14px;
	padding: 5px 12px;
	box-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.45);
}

/* Frosted search field on the gradient. */
html.fo-header-unified #top-bar-search-form .search-input {
	background-color: rgba(255, 255, 255, 0.16);
	border-color: rgba(255, 255, 255, 0.5);
	color: #fff;
}

html.fo-header-unified #top-bar-search-form .search-input::placeholder {
	color: rgba(255, 255, 255, 0.75);
}

html.fo-header-unified #top-bar-search-form .top-bar-search-command {
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
}

html.fo-header-unified #top-bar-search-form .top-bar-search-command:hover {
	background: rgba(255, 255, 255, 0.92);
	color: var(--tm-primary, #0088d4);
}

/* People-finder shortcut + the mobile burger invert to white chrome. */
html.fo-header-unified .btn.btn-outline-primary.top-bar-people-finder-button {
	border-color: rgba(255, 255, 255, 0.75);
}

html.fo-header-unified .btn.btn-outline-primary.top-bar-people-finder-button .tm-icon {
	color: #fff;
}

html.fo-header-unified .btn.btn-outline-primary.top-bar-people-finder-button:hover {
	background: rgba(255, 255, 255, 0.92);
}

html.fo-header-unified .btn.btn-outline-primary.top-bar-people-finder-button:hover .tm-icon {
	color: var(--tm-primary, #0088d4);
}

html.fo-header-unified #main-navbar .navbar-toggler {
	border-color: rgba(255, 255, 255, 0.55);
}

html.fo-header-unified #main-navbar .navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media (min-width: 576px) {
	/* The secondary bar continues the SAME gradient, one shade deeper, so the
	   two bars read as a single monolith with an inner hierarchy. */
	html.fo-header-unified #secondary-navbar {
		background: linear-gradient(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.16)), var(--tm-gradient-default, linear-gradient(90deg, #0088d4 0%, #00c893 100%));
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
	}
}

/* =========================================================================
   FLOATING ("Plutitor") - the bars detach from the page.
   The main bar floats as a rounded frosted-glass panel with a soft drop
   shadow; the secondary menu floats as a gradient pill under it. Applied on
   >=576px (on phones the header keeps the standard full-width chrome).
   ========================================================================= */

@media (min-width: 576px) {
	/* The floating glass chrome (shared by the sticky and the inline modes). */
	html.fo-header-floating #main-navbar.bg-white {
		border-radius: 20px;
		background: rgba(255, 255, 255, 0.8) !important;
		background: color-mix(in srgb, var(--tm-surface, #fff) 82%, transparent) !important;
		border: 1px solid var(--tm-border, rgba(0, 0, 0, 0.07));
		box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.45);
	}

	/* The floating bar's frosting lives on a ::before overlay for the same reason as the
	   scrolled bar (own.os.topbar + own.os.glass): backdrop-filter on the bar itself would
	   make it the backdrop root for its own dropdowns and kill THEIR glass blur.
	   border-radius: inherit keeps the blur inside the rounded panel. */
	html.fo-header-floating #main-navbar.bg-white::before {
		content: '';
		position: absolute;
		inset: 0;
		z-index: -1;
		border-radius: inherit;
		pointer-events: none;
		-webkit-backdrop-filter: saturate(160%) blur(14px);
		backdrop-filter: saturate(160%) blur(14px);
	}

	/* Sticky mode: inset the fixed bar from the viewport edges + compensate the
	   body offset for the extra top gap. */
	html.fixed-top-bar.fo-header-floating #main-navbar {
		top: 10px;
		left: 14px;
		right: 14px;
	}

	html.fixed-top-bar.fo-header-floating body {
		padding-top: 88px;
	}

	/* The product-details page docks its sticky sections bar right under the
	   fixed header via --top-bar-offset (74px standard). The floating bar ends
	   at 10px (inset) + 74px, so the dock point moves down with it. */
	html.fixed-top-bar.fo-header-floating {
		--top-bar-offset: 84px;
	}

	/* Inline mode (no sticky bar): same floating look via margins. */
	html:not(.fixed-top-bar).fo-header-floating #main-navbar {
		margin: 10px 14px 0 14px;
	}

	/* The gradient underline hugs the rounded bottom edge, inset so it never
	   pokes out of the corners. */
	html.fo-header-floating #main-navbar::after {
		left: 26px;
		right: 26px;
		border-radius: 2px;
		opacity: 0.55;
	}

	/* The secondary menu becomes a floating gradient pill. */
	html.fo-header-floating #secondary-navbar {
		margin: 10px 14px 0 14px;
		border-radius: 999px;
		box-shadow: 0 16px 34px -26px rgba(0, 0, 0, 0.55);
	}

	html.fo-header-floating #secondary-navbar .secondary-navbar-contents {
		padding-left: 10px;
		padding-right: 10px;
	}
}

/* =========================================================================
   MINIMAL ("Minimalist") - ultra-clean gallery chrome.
   Hairline separators instead of the gradient underline, spaced uppercase
   top-level links, and a light (surface) secondary bar whose items take the
   theme colours instead of sitting on the gradient.
   ========================================================================= */

/* The gradient underline becomes a plain hairline. */
html.fo-header-minimal #main-navbar::after {
	height: 1px;
	background: var(--tm-border, #e5e5e5);
}

/* Spaced uppercase top-level links (dropdown contents stay untouched). */
html.fo-header-minimal #main-navbar .navbar-nav > li > .nav-link {
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 1.1px;
	font-weight: 500;
}

html.fo-header-minimal #logo-image-wrapper-link:hover {
	transform: none;
	opacity: 0.85;
}

/* The search field drops its coloured ring for a quiet hairline; the round
   search button becomes a plain glyph. */
html.fo-header-minimal #top-bar-search-form .search-input {
	border-color: var(--tm-border, #dcdcdc);
}

html.fo-header-minimal #top-bar-search-form .top-bar-search-command {
	background: transparent;
	color: var(--tm-text-muted, #888);
}

html.fo-header-minimal #top-bar-search-form .top-bar-search-command:hover {
	background: transparent;
	color: var(--tm-primary, #0088d4);
}

@media (min-width: 576px) {
	/* Light secondary bar: surface + hairline, no gradient. */
	html.fo-header-minimal #secondary-navbar {
		background: var(--tm-surface, #fff);
		border-bottom: 1px solid var(--tm-border, #ececec);
	}

	/* Items take the text/theme colours instead of white-on-gradient. */
	html.fo-header-minimal #secondary-navbar li.nav-item,
	html.fo-header-minimal #secondary-navbar li.nav-item > a,
	html.fo-header-minimal #secondary-navbar li.nav-item .mi-menu-group,
	html.fo-header-minimal #secondary-navbar li.nav-item .mi-menu-group > a,
	html.fo-header-minimal #secondary-navbar li.nav-item .mi-menu-group > button {
		color: var(--tm-text, #444);
	}

	html.fo-header-minimal #secondary-navbar li.nav-item.mi-menu-group:hover,
	html.fo-header-minimal #secondary-navbar li.nav-item:not(.mi-menu-group) > a:hover {
		border-color: var(--tm-primary, #0088d4);
		color: var(--tm-primary, #0088d4);
	}

	/* The white-at-desktop icons take the theme's primary instead. */
	html.fo-header-minimal #secondary-navbar .article-categs .article-categs-icon-container .tm-icon,
	html.fo-header-minimal #secondary-navbar .marketplace-product-groups .marketplace-product-groups-icon-container .tm-icon,
	html.fo-header-minimal #secondary-navbar .secondary-menu-icon-container .tm-icon {
		color: var(--tm-primary, #0088d4);
	}

	/* The "Produse" pill inverts: filled with the theme's primary so it still
	   anchors the bar on the light background. */
	html.fo-header-minimal #secondary-navbar li.nav-item > a.special {
		background: var(--tm-primary, #0088d4);
		color: #fff;
	}

	html.fo-header-minimal #secondary-navbar li.nav-item > a.special:hover {
		background: var(--tm-primary-dark, #006197);
		color: #fff;
	}

	/* The language pill keeps its light look (it was styled for the gradient). */
	html.fo-header-minimal #secondary-navbar .languages-list .languages-selector {
		background: var(--tm-surface-alt, #f4f6f8);
		color: var(--tm-text, #444);
		box-shadow: none;
	}
}

/* =========================================================================
   DENSITY ("Densitate header") - orthogonal to the style above.
   Compact = slimmer bars (more content above the fold); Airy = taller,
   airier bars. The sticky-bar height and the body offset always move
   together so nothing jumps. Composes with any style, incl. Classic.
   ========================================================================= */

/* ---- Compact ---- */

html.fo-header-density-compact #main-navbar {
	padding-top: 4px;
	padding-bottom: 4px;
}

html.fo-header-density-compact .logo-image {
	max-height: 40px;
}

@media (min-width: 576px) {
	html.fo-header-density-compact #main-navbar {
		padding-top: 6px;
		padding-bottom: 6px;
	}

	html.fo-header-density-compact #main-navbar .nav-link {
		padding-top: 0.35rem;
		padding-bottom: 0.35rem;
	}

	html.fixed-top-bar.fo-header-density-compact #main-navbar {
		height: 58px;
	}

	html.fixed-top-bar.fo-header-density-compact body {
		padding-top: 58px;
	}

	/* Keep the product-details sticky sections bar docked flush under the
	   slimmer fixed header (the standard offset is 74px). */
	html.fixed-top-bar.fo-header-density-compact {
		--top-bar-offset: 58px;
	}

	/* Floating combo: 58px bar + the 10px float gap. */
	html.fixed-top-bar.fo-header-floating.fo-header-density-compact body {
		padding-top: 74px;
	}

	html.fixed-top-bar.fo-header-floating.fo-header-density-compact {
		--top-bar-offset: 68px;
	}

	html.fo-header-density-compact #secondary-navbar {
		min-height: 32px;
	}

	html.fo-header-density-compact #secondary-navbar li.nav-item {
		margin-top: 1px;
		margin-bottom: 1px;
	}
}

/* ---- Airy ---- */

html.fo-header-density-airy #main-navbar {
	padding-top: 14px;
	padding-bottom: 14px;
}

html.fo-header-density-airy .logo-image {
	max-height: 56px;
}

@media (min-width: 576px) {
	html.fo-header-density-airy #main-navbar {
		padding-top: 18px;
		padding-bottom: 18px;
	}

	html.fo-header-density-airy #main-navbar .nav-link {
		padding-top: 0.65rem;
		padding-bottom: 0.65rem;
	}

	html.fixed-top-bar.fo-header-density-airy #main-navbar {
		height: 92px;
	}

	html.fixed-top-bar.fo-header-density-airy body {
		padding-top: 92px;
	}

	/* Keep the product-details sticky sections bar docked flush under the
	   taller fixed header (the standard offset is 74px). */
	html.fixed-top-bar.fo-header-density-airy {
		--top-bar-offset: 92px;
	}

	/* Floating combo: 92px bar + the 10px float gap. */
	html.fixed-top-bar.fo-header-floating.fo-header-density-airy body {
		padding-top: 108px;
	}

	html.fixed-top-bar.fo-header-floating.fo-header-density-airy {
		--top-bar-offset: 102px;
	}

	html.fo-header-density-airy #secondary-navbar {
		min-height: 46px;
	}

	html.fo-header-density-airy #secondary-navbar li.nav-item {
		margin-top: 5px;
		margin-bottom: 5px;
	}
}

/* =========================================================================
   FO FLOATING HERO ("Carusel & mega-meniu plutitor" - BO Web Studio ->
   Tema interfata -> Header)
   -------------------------------------------------------------------------
   Activated through the html.fo-floating-hero class added by _Layout (see
   InterfaceThemeRenderer.GetHtmlClasses). Orthogonal to the colour theme -
   every colour reads the --tm-* tokens, so it works on light, dark and
   Custom themes alike.

   What it does (two halves of one design):
    1) THE HERO PANEL - the landing carousel (+ the products categories
       mega-menu, which overlays its left 240px column on desktop) detaches
       from the page as ONE floating, rounded, softly-shadowed slab. The
       categories menu is optional per shop: with it closed the carousel
       alone is the rounded slab; with it open the menu column + flyout
       sheet follow the slab's contour (their outer corners are rounded to
       the same radius). NOTHING moves - only chrome (radius/shadows) is
       painted, so the pixel-perfect 240px menu/carousel alignment and the
       flyout geometry stay byte-identical.
    2) FLAT TOP BARS - the main bar and the secondary menu bar drop their
       fills and sit flush with the page (same visual plane as the content),
       so the floating hero is the only elevated layer. On scroll the docked
       main bar frosts into translucent glass (tint + backdrop blur via the
       base ::before overlay - NEVER backdrop-filter on the bar itself, see
       own.os.topbar) and the brand underline fades back in.

   Contract:
    * "Default = apply nothing": with no fo-floating-hero class on <html>
      this file matches nothing - an untouched shop keeps the exact current
      look.
    * The hero radius is a knob: override --tm-hero-radius from the shop's
      custom CSS to tune the slab's rounding.
    * The base bar rules (own.os.topbar) are !important, and the frosted
      glass material adds html.glass rules (also !important) - the bar rules
      below out-specify ALL of them (html.fo-floating-hero + .bg-white +
      .for-scrolled-doc), the same specificity lift the header styles use.
   ========================================================================= */
html.fo-floating-hero {
	--tm-hero-radius: 16px;
}

/* =========================================================================
   1) The hero panel - the carousel as a floating rounded slab.
   The section already has overflow: hidden, so the radius cleanly clips the
   slides; shadows do not affect layout, so the mega-menu overlay alignment
   is untouched.
   ========================================================================= */
html.fo-floating-hero .page-section.tm-carousel-section {
	border-radius: var(--tm-hero-radius, 16px);
	box-shadow: 0 24px 55px -22px rgba(10, 25, 45, 0.4), 0 4px 14px -6px rgba(10, 25, 45, 0.16);
}

@media (max-width: 767.98px) {
	html.fo-floating-hero {
		--tm-hero-radius: 12px;
	}
}

/* The desktop mega-menu overlays the slab (left 240px column + full-zone
   flyouts, own.os.categories.menu) - round its OUTER corners to the slab's
   contour. Desktop only: below 992px the menu is a stacked list, not an
   overlay. */
@media (min-width: 992px) {
	/* With the menu DROPPED DOWN BY DEFAULT the white menu column permanently
	   owns the slab's left edge, so the carousel keeps only its RIGHT corners
	   rounded (0 r r 0) - otherwise its rounded left corners would peek out
	   from behind the menu rows as thin slivers. With the menu collapsed by
	   default the carousel is the whole slab and keeps all four corners. */
	html.fo-floating-hero.products-categs-menu-opened-by-default .page-section.tm-carousel-section {
		border-radius: 0 var(--tm-hero-radius, 16px) var(--tm-hero-radius, 16px) 0;
	}

	/* Left column: the first/last menu rows carry the slab's left corners.
	   The caption inherits the rounding so its own hover fill never pokes
	   square out of the rounded row. */
	html.fo-floating-hero li.categories-menu-list-item:first-child {
		border-top-left-radius: var(--tm-hero-radius, 16px);
	}

	html.fo-floating-hero li.categories-menu-list-item:first-child a.menu-item-caption {
		border-top-left-radius: inherit;
		border-top-right-radius: inherit;
	}

	html.fo-floating-hero li.categories-menu-list-item:last-child {
		border-bottom-left-radius: var(--tm-hero-radius, 16px);
	}

	html.fo-floating-hero li.categories-menu-list-item:last-child a.menu-item-caption {
		border-bottom-left-radius: inherit;
		border-bottom-right-radius: inherit;
	}

	/* NON-home (the menu is NOT opened by default, i.e. it was dropped from the
	   "Produse" chip over regular page content): while NO mega flyout is active
	   the column is a STANDALONE panel, so it carries the hero radius on ALL
	   four corners. The moment a flyout opens (JS toggles .has-active-flyout on
	   the UL unconditionally) the right side belongs to the flyout and the
	   column's right corners square back to the split scheme above. The
	   captions follow via the border-radius: inherit rules. */
	html.fo-floating-hero:not(.products-categs-menu-opened-by-default) #categories-menu-list:not(.has-active-flyout) li.categories-menu-list-item:first-child {
		border-top-right-radius: var(--tm-hero-radius, 16px);
	}

	html.fo-floating-hero:not(.products-categs-menu-opened-by-default) #categories-menu-list:not(.has-active-flyout) li.categories-menu-list-item:last-child {
		border-bottom-right-radius: var(--tm-hero-radius, 16px);
	}

	/* Keyboard edge: a flyout can also open via :focus-within (the CSS :has()
	   sheet rules) without the JS class - square the right corners back then
	   too. Progressive enhancement: browsers without :has() drop only these
	   two rules. */
	html.fo-floating-hero:not(.products-categs-menu-opened-by-default) #categories-menu-list:has(li.categories-menu-list-item:focus-within) li.categories-menu-list-item:first-child {
		border-top-right-radius: 0;
	}

	html.fo-floating-hero:not(.products-categs-menu-opened-by-default) #categories-menu-list:has(li.categories-menu-list-item:focus-within) li.categories-menu-list-item:last-child {
		border-bottom-right-radius: 0;
	}

	/* Right side: the persistent flyout sheet + the mega flyout panels span
	   left:240px -> right:0 (the slab's right edge) - round their right
	   corners. The panels have overflow: hidden, so the category photo is
	   clipped to the rounding too. */
	html.fo-floating-hero #categories-menu-list::before {
		border-radius: 0 var(--tm-hero-radius, 16px) var(--tm-hero-radius, 16px) 0;
	}

	html.fo-floating-hero li.categories-menu-list-item .menu-item-details {
		border-radius: 0 var(--tm-hero-radius, 16px) var(--tm-hero-radius, 16px) 0;
	}
}

/* =========================================================================
   2) Flat top bars.
   At rest the main bar melts into the page: no fill, no shadow, no brand
   underline. On scroll it stays docked exactly as today and frosts into
   translucent glass (theme-aware via --tm-surface, so dark themes get dark
   glass); the underline fades back in as a subtle brand cue.
   ========================================================================= */
html.fo-floating-hero #main-navbar.bg-white {
	background-color: transparent !important;
}

html.fo-floating-hero.fixed-top-bar #main-navbar {
	box-shadow: none;
}

html.fo-floating-hero #main-navbar::after {
	opacity: 0;
	transition: opacity 0.3s ease;
}

html.fo-floating-hero #main-navbar.bg-white.for-scrolled-doc {
	background: rgba(255, 255, 255, 0.6) !important;
	background: color-mix(in srgb, var(--tm-surface, #ffffff) 60%, transparent) !important;
	box-shadow: 0 10px 34px -14px rgba(0, 0, 0, 0.28);
}

html.fo-floating-hero #main-navbar.bg-white.for-scrolled-doc::after {
	opacity: 0.45;
}

/* Strengthen the frost of the docked bar (the blur lives on the base
   ::before overlay from own.os.topbar - the bar itself must never carry
   backdrop-filter, or the header dropdowns' own frosting breaks). */
html.fo-floating-hero #main-navbar.bg-white.for-scrolled-doc::before {
	-webkit-backdrop-filter: saturate(160%) blur(16px);
	backdrop-filter: saturate(160%) blur(16px);
}

/* The secondary menu bar drops its theme-gradient fill and joins the page
   plane; its white-on-gradient texts switch to the theme's text colour so
   they read on the page background (light or dark). */
html.fo-floating-hero #secondary-navbar {
	background: transparent;
}

@media (min-width: 576px) {
	html.fo-floating-hero #secondary-navbar li.nav-item,
	html.fo-floating-hero #secondary-navbar li.nav-item > a,
	html.fo-floating-hero #secondary-navbar .mi-menu-root-item {
		color: var(--tm-text, #333);
	}

	html.fo-floating-hero #secondary-navbar li.nav-item.mi-menu-group:hover,
	html.fo-floating-hero #secondary-navbar li.nav-item:not(.mi-menu-group) > a:hover {
		border-color: var(--tm-border, rgba(0, 0, 0, 0.25));
	}

	/* On the gradient bar the item icons were white (inherited) or accent (the
	   dedicated icon-containers). On the FLAT bar white icons vanish into the
	   page - give every top-level secondary-menu icon the theme's primary colour
	   so they stay clearly visible and on-brand. Covers BOTH icon families: the
	   built-in `.tm-icon` (built-in menu items + the accent icon-containers) and
	   the custom-menu `.tm-mi-icon` (which lives inside `.mi-menu-root-item` - a
	   DIFFERENT class than `.tm-icon`, which is why those were still white). The
	   dropdown-item icons inside the OPENED menus are excluded (their links are
	   `.child-mi-nav-link`/`.nephew-mi-nav-link`/`.dropdown-item`, not
	   `.mi-menu-root-item`, and not direct `> a`/`> button` of the bar item) -
	   those panels keep their own surface + icon colours. */
	html.fo-floating-hero #secondary-navbar li.nav-item > a .tm-icon,
	html.fo-floating-hero #secondary-navbar li.nav-item > button .tm-icon,
	html.fo-floating-hero #secondary-navbar .mi-menu-root-item .tm-mi-icon {
		color: var(--tm-primary, #0088d4);
	}

	/* The "special" pill (the Products/Categories menu toggle) was a white chip
	   on the gradient; on the flat bar it becomes a frosted glass chip - a
	   translucent white pane with backdrop blur and a subtle theme-coloured
	   hairline - keeping its classic pill rounding. The border colour only is
	   changed (the base rule already reserves a 1px transparent border), so
	   nothing shifts. */
	html.fo-floating-hero #secondary-navbar li.nav-item > a.special {
		background: rgba(255, 255, 255, 0.55);
		background: color-mix(in srgb, var(--tm-surface, #ffffff) 55%, transparent);
		border-color: rgba(0, 136, 212, 0.35);
		border-color: color-mix(in srgb, var(--tm-primary, #0088d4) 35%, transparent);
		color: var(--tm-primary, #0088d4);
		-webkit-backdrop-filter: saturate(150%) blur(10px);
		backdrop-filter: saturate(150%) blur(10px);
	}

	html.fo-floating-hero #secondary-navbar li.nav-item > a.special:hover {
		background: rgba(255, 255, 255, 0.75);
		background: color-mix(in srgb, var(--tm-surface, #ffffff) 75%, transparent);
		border-color: rgba(0, 136, 212, 0.55);
		border-color: color-mix(in srgb, var(--tm-primary, #0088d4) 55%, transparent);
		color: var(--tm-primary-dark, #006197);
	}

	/* Language / currency selectors lived on the gradient too (white text,
	   white borders) - restyle them for the page plane. */
	html.fo-floating-hero #secondary-navbar select.invoicing-currencies-selector,
	html.fo-floating-hero #secondary-navbar select.languages-selector,
	html.fo-floating-hero #secondary-navbar .languages-list .languages-selector {
		color: var(--tm-text, #333);
		border-color: var(--tm-border, rgba(0, 0, 0, 0.25));
	}

	html.fo-floating-hero #secondary-navbar select.invoicing-currencies-selector:hover,
	html.fo-floating-hero #secondary-navbar select.languages-selector:hover,
	html.fo-floating-hero #secondary-navbar .languages-list .languages-selector:hover {
		background-color: var(--tm-surface-alt, rgba(0, 0, 0, 0.06));
		border-color: var(--tm-text-muted, #888);
		color: var(--tm-text, #333);
	}
}

/* =========================================================================
   2b) The "Produse" chip stays a SELF-CONTAINED pill while the menu is open.
   The base stylesheet docks the chip into the opened categories menu as a
   "tab": margins zeroed (>=768px) and, at >=992px, border-radius 15px 15px
   0 0 + bottom: -3px + height: 37px so it touches the menu's top edge.
   Under the floating hero the slab is a DETACHED layer, so the docked-tab
   look reads wrong - undo it: the chip keeps its constant classic pill
   rounding on all four corners in every menu state, sits back on the flat
   bar's baseline and keeps its natural height, with the standard margins
   restored so a sliver of page shows between the chip and the floating
   slab below it.
   ========================================================================= */
@media (min-width: 768px) {
	html.fo-floating-hero.products-categs-menu-opened #secondary-navbar li.nav-item.special,
	html.fo-floating-hero.products-categs-menu-opened-by-default #secondary-navbar li.nav-item.special {
		margin-top: calc(0.3 * 10px);
		margin-bottom: calc(10px / 2);
	}
}

@media (min-width: 992px) {
	html.fo-floating-hero.products-categs-menu-opened #secondary-navbar li.nav-item > a.special,
	html.fo-floating-hero.products-categs-menu-opened-by-default #secondary-navbar li.nav-item > a.special {
		border-radius: 20px;
		bottom: 0;
		height: auto;
	}
}

/* =========================================================================
   3) The important-links strip (under the carousel) - a second, quieter
   glass layer: rounded to the hero radius, translucent surface + backdrop
   blur (it samples the page decor behind), with a soft floating shadow
   moved from the inner container to the rounded section so no square
   shadow corners peek out.
   ========================================================================= */
html.fo-floating-hero .page-section.important-links {
	background: rgba(255, 255, 255, 0.55);
	background: color-mix(in srgb, var(--tm-surface, #ffffff) 55%, transparent);
	border-radius: var(--tm-hero-radius, 16px);
	box-shadow: 0 14px 34px -18px rgba(10, 25, 45, 0.3), 0 2px 8px -4px rgba(10, 25, 45, 0.12);
	overflow: hidden;
	-webkit-backdrop-filter: saturate(150%) blur(12px);
	backdrop-filter: saturate(150%) blur(12px);
}

html.fo-floating-hero .important-links-container {
	box-shadow: none;
}

/* =========================================================================
   4) The articles page filter bar - the articles listing's own "hero": a
   floating frosted-glass panel matching the landing slab, on any colour
   theme (the base hardcoded light-blue strip becomes a theme-aware milky
   glass pane with a primary hairline). The blur lives on a ::before overlay:
   the container hosts the sort dropdown, and a backdrop-filtered CONTAINER
   would become the backdrop root that breaks any future frosting inside it
   (the own.os.topbar lesson) - the overlay has no descendants.
   ========================================================================= */
html.fo-floating-hero .articles-list-filter-container {
	position: relative;
	z-index: 0;
	padding: 14px 16px;
	border: 1px solid rgba(0, 136, 212, 0.25);
	border: 1px solid color-mix(in srgb, var(--tm-primary, #0088d4) 25%, transparent);
	background: rgba(255, 255, 255, 0.55);
	background: color-mix(in srgb, var(--tm-surface, #ffffff) 55%, transparent);
	border-radius: var(--tm-hero-radius, 16px);
	box-shadow: 0 14px 34px -18px rgba(10, 25, 45, 0.3), 0 2px 8px -4px rgba(10, 25, 45, 0.12);
}

html.fo-floating-hero .articles-list-filter-container::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	pointer-events: none;
	-webkit-backdrop-filter: saturate(150%) blur(12px);
	backdrop-filter: saturate(150%) blur(12px);
}

/*Important to leave it 240 so that the carousel pictures align perfectly*/
h1, h2, h3, h4, h5, h6 {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.alert.alert-info {
  background: var(--tm-primary, #0088d4);
  background: linear-gradient(90deg, var(--tm-primary, #0088d4) 0%, var(--tm-secondary, #00c893) 100%);
  color: white;
  border: none;
  padding: calc(2 * 10px);
}

.alert.alert-info a {
  color: white;
  font-weight: 600;
  text-decoration: underline from-font white;
}

.alert.alert-info a:hover {
  text-decoration: underline;
}

.alert.alert-success {
  background: var(--tm-success, #85c177);
  background: linear-gradient(90deg, #5e945e 0%, var(--tm-success, #85c177) 100%);
  color: white;
  border: none;
  padding: calc(2 * 10px);
}

.alert.alert-success a {
  color: white;
  font-weight: 600;
  text-decoration: underline dotted white;
}

.alert.alert-success a:hover {
  text-decoration: underline;
}

.alert.alert-danger {
  background: var(--tm-danger, #ff6500);
  background: linear-gradient(90deg, var(--tm-danger, #ff6500) 0%, #d15300 100%);
  color: white;
  border: none;
  padding: calc(2 * 10px);
}

.alert.alert-danger a {
  color: white;
  font-weight: 600;
  text-decoration: underline dotted white;
}

.alert.alert-danger a:hover {
  text-decoration: underline;
}

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
  color: var(--tm-anchor, #0366d6);
  text-decoration: none;
}

.btn {
  border-radius: calc(5 * 10px);
}

input.form-control[type=text],
input.form-control[type=email],
input.form-control[type=password],
input.form-control[type=number],
textarea.form-control,
select.form-control,
select.form-select {
  border-radius: calc(2 * 10px);
  border-color: var(--tm-primary-light, #63bef1);
}

input.form-control[type=text]:hover,
input.form-control[type=email]:hover,
input.form-control[type=password]:hover,
input.form-control[type=number]:hover,
textarea.form-control:hover {
  border-color: var(--tm-primary, #0088d4);
}

input.form-control[type=text]:focus,
input.form-control[type=email]:focus,
input.form-control[type=password]:focus,
input.form-control[type=number]:focus,
textarea.form-control:focus {
  border-color: var(--tm-primary, #0088d4);
}

.form-control:focus {
  box-shadow: 0 0 0 0.2rem rgba(135, 212, 255, 0.5);
}

.btn.text-uppercase {
  text-transform: uppercase;
}

.btn.small-text {
  font-size: 14px;
}

.btn.btn-default.accent {
  color: var(--tm-text, #555);
  background: rgba(255, 101, 0, 0.5);
  border: none;
  transition-duration: 0.2s;
  padding-left: calc(2 * 10px);
  padding-right: calc(2 * 10px);
}

.btn.btn-default.accent:hover {
  background: var(--tm-accent, #ff6500);
}

.btn.btn-default.hilite,
.btn.btn-outline-default.hilite {
  color: #555;
  background: rgb(255, 239, 151);
  border: solid 1px rgb(255, 239, 151);
  transition-duration: 0.2s;
  padding-left: calc(2 * 10px);
  padding-right: calc(2 * 10px);
}

.btn.btn-default.hilite:hover,
.btn.btn-outline-default.hilite:hover {
  background: rgba(255, 239, 151, 0.5);
}

.btn.btn-outline-default.hilite {
  border-color: var(--tm-accent, #ff6500);
}

.btn.btn-link {
  color: var(--tm-anchor, #0366d6);
}

.btn.btn-primary {
  position: relative;
  z-index: 0; /* own stacking context so the ::before sweep stays under the (possibly unwrapped) label */
  color: #fff;
  background: linear-gradient(90deg, var(--tm-primary-dark, #006197) 0%, var(--tm-primary, #0088d4) 100%);
  border: none;
  overflow: hidden;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, background-color 0.2s ease-out;
  padding-left: calc(2 * 10px);
  padding-right: calc(2 * 10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* sweep-in highlight — same mechanic as .tm-fancy-command and the cart CTA.
   z-index:-1 keeps it above the button's own background but below ALL content,
   including bare text nodes that can't be positioned (e.g. the login button). */
.btn.btn-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--tm-primary, #0088d4) 0%, var(--tm-secondary-dark, #009970) 100%);
  transition: left 0.4s ease-out;
  z-index: -1;
  pointer-events: none;
}

/* keep any explicit content (Font Awesome <i> icon, label spans, etc.) above the
   sweep — belt-and-suspenders on top of the ::before z-index:-1 so the icon stays
   visible on hover regardless of markup */
.btn.btn-primary > *,
.btn.btn-primary > i {
  position: relative;
  z-index: 1;
}

.btn.btn-primary:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

.btn.btn-primary:hover::before {
  left: 0;
}

.btn.btn-primary.light {
  background: #63bef1;
}

.btn.btn-primary.light:hover {
  background: #4196d2;
}

.btn.btn-secondary {
  color: #fff;
  background: var(--tm-secondary, #00c893);
  border: none;
  transition-duration: 0.2s;
  padding-left: calc(2 * 10px);
  padding-right: calc(2 * 10px);
}

.btn.btn-secondary:hover {
  background: var(--tm-secondary-dark, #009970);
}

.btn.btn-outline-primary {
  border-color: var(--tm-primary, #0088d4);
  transition-duration: 0.2s;
  color: var(--tm-primary, #0088d4);
  padding-left: calc(2 * 10px);
  padding-right: calc(2 * 10px);
}

.btn.btn-outline-primary:hover {
  border-color: var(--tm-primary-dark, #006197);
  background: var(--tm-primary-dark, #006197);
  color: white;
}

.btn.btn-outline-primary-purple {
  background: #b269ca;
  color: white;
}

.btn.btn-outline-primary-purple:hover {
  background: #87489b;
}

.btn.btn-outline-secondary {
  border-color: var(--tm-secondary-dark, #009970);
  transition-duration: 0.2s;
  color: var(--tm-secondary-dark, #009970);
  padding-left: calc(2 * 10px);
  padding-right: calc(2 * 10px);
}

.btn.btn-outline-secondary:hover {
  border-color: var(--tm-secondary, #00c893);
  background: var(--tm-secondary, #00c893);
  color: white;
}

.btn > .tm-icon.right {
  margin-left: calc(10px / 2);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: white;
  background-color: var(--tm-primary, #0088d4);
  border-color: var(--tm-primary, #0088d4);
}

.dropdown-toggle::after {
  vertical-align: middle; /*so that the dropdown little arrows to be properly aligned with the text*/
}

.navbar-light .navbar-toggler {
  opacity: 0.8;
  border: none;
  transition-duration: 0.2s;
  font-size: 15px;
  padding: calc(0.5 * 10px);
  border-radius: 50%;
  margin-right: calc(-0.5 * 10px);
  margin-top: -2px;
}

.navbar-light .navbar-toggler:hover {
  opacity: 1;
  transform: scale(1.15) rotate(180deg);
}

.navbar-light .navbar-toggler:focus {
  outline: none;
}

@keyframes slideIn {
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
  100% {
    transform: translateY(0rem);
    opacity: 1;
  }
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
}
.animated-dropdown {
  animation-duration: 0.2s;
  animation-fill-mode: both;
}

.dropdown-header {
  font-size: 18px;
  margin-bottom: calc(3 * 10px / 4);
  cursor: default;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--tm-surface-alt, rgb(255, 239, 151));
  color: var(--tm-text, #212529);
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--tm-primary, #0088d4);
}

.navbar-toggler:not(.collapsed) {
  /*background: $primary-color-light-super-transparent;*/
  /*background: $hilite-color;*/
}

.dropdown-menu {
  background: var(--tm-surface, rgba(135, 212, 255, 0.05));
}

/* dark: dropdown item text */
.dropdown-item {
  color: var(--tm-text, #212529);
}

/*Important to leave it 240 so that the carousel pictures align perfectly*/
html {
  color: var(--tm-text, #333);
  font-size: 14px;
  position: relative;
  min-height: 100%;
  background-color: var(--tm-footer-bg, #333);
  scroll-behavior: smooth;
}

body {
  font-family: "Roboto", "Segoe UI", sans-serif;
  background-color: var(--tm-body-bg, #dfe7f1);
  color: var(--tm-text, #333);
}

body.plain-bg {
  background-color: var(--tm-surface, white);
}

body.with-fancy-shapes {
  background-image: var(--tm-fancy-bg, url("/images/bg.svg"));
  background-repeat: no-repeat;
  background-size: cover;
  background-position-y: -550px;
  background-position-x: center;
}

body.plain-bg.with-fancy-shapes {
  background-image: var(--tm-fancy-bg, url("/images/bg-negative.svg"));
}

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

.border-top {
  border-top: 1px solid var(--tm-border, #bababa);
}

.border-bottom {
  border-bottom: 1px solid var(--tm-border, #bababa);
}

.box-shadow {
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);
}

.overflow-hidden {
  overflow: hidden;
}

#main-contents {
  min-height: 300px;
  margin-bottom: calc(3 * 10px);
  padding-bottom: calc(1 * 10px);
}
#main-contents.custom-web-page {
  margin: 0;
  padding: 0;
}

#side-bar-wrapper {
  background: var(--tm-surface, white);
}

.primary-text-color {
  color: var(--tm-primary, #0088d4) !important;
}

.secondary-text-color {
  color: var(--tm-secondary, #00c893) !important;
}

.danger-text-color {
  color: var(--tm-danger, #ff6500) !important;
}

.red-text-color {
  color: red !important;
}

.green-text-color {
  color: #85c177 !important;
}

.tm-people-finder-icon {
  color: #2578b6;
}

/*Custom page sections --------------------*/
.section-title {
  margin: calc(10px * 8) 0 calc(10px * 4) 0;
}
.section-title .section-title-text {
  padding: calc(10px * 2) 0 calc(10px * 2) 0;
  font-size: 22px;
}

/*Page sections -----------------------*/
.page-section > .container {
  background: var(--tm-surface, white);
}

.page-section > .container.no-bg {
  background: none;
}

.page-section-title {
  color: var(--tm-text-muted, #777);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: default;
}

.page-section-title.centered {
  text-align: center;
}

.page-section-title .page-title-icon-fancy-wrapper {
  border-radius: 50%;
  color: white;
  background: linear-gradient(90deg, var(--tm-primary-dark, #006197) 0%, var(--tm-primary, #0088d4) 100%);
  width: 46px;
  height: 46px;
  line-height: 46px;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.45) inset;
  margin-right: calc(10px / 2);
}

.page-section-title .page-title-icon-fancy-wrapper .tm-icon {
  font-size: 16px;
}

/* clears the 'X' from Internet Explorer */
input[type=search]::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

input[type=search]::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

/* clears the 'X' from Chrome */
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  display: none;
}

/* Main contents -----------------------------*/
html.fully-expanded-contents #main-page-contents {
  position: fixed;
  z-index: 5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: var(--tm-surface, white);
}

html.fully-expanded-contents header {
  display: none;
}

html.fully-expanded-contents footer {
  display: none;
}

/* Breadcrumb --------------------------------*/
.page-breadcrumb-container {
  font-size: 12px;
  padding: calc(0.5 * 10px) 0;
  margin: calc(0.5 * 10px) 0 0 0;
}

.page-breadcrumb-container a.breadcrumb-item-link {
  display: inline-block;
  vertical-align: middle;
}

.page-breadcrumb-container a.breadcrumb-item-no-link {
  display: inline-block;
  vertical-align: middle;
  color: var(--tm-text, #555);
  text-decoration: none;
  cursor: default;
}

.page-breadcrumb-container a.breadcrumb-item-no-link:hover {
  text-decoration: none;
}

.page-breadcrumb-container .tm-icon {
  color: #bababa;
  display: inline-block;
  vertical-align: middle;
  margin: 2px calc(10px / 2) 0 calc(10px / 2);
}

/*Menus --------------------*/
.menu-for-bigger-screen {
  display: none;
}

.vip-menu-group .dropdown-menu-vip-children-container {
  width: 100%;
}
.vip-menu-group .nephew-vip-nav-link {
  margin-left: calc(10px * 2.5);
}
.vip-menu-group .dropdown-item .tm-mi-icon {
  color: var(--tm-accent, #ff6500);
}
.vip-menu-group .child-icon-container {
  display: inline-block;
  width: 25px;
  padding-left: calc(10px * 0.5);
}
.vip-menu-group .nephew-icon-container {
  display: inline-block;
  width: 25px;
  padding-left: calc(10px * 0.5);
}
.vip-menu-group nephew-name {
  text-wrap: wrap;
}
.vip-menu-group .child-name {
  text-wrap: wrap;
}
.vip-menu-group .dropdown-item.nephew-vip-nav-link {
  width: calc(100% - 10px * 2.5);
}

.child-vip-nav-link {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-menu-vip-children-container.dropdown-menu::before,
.dropdown-menu-mi-children-container.dropdown-menu::before {
  display: none;
}

.newphew-list {
  list-style: none;
}

#secondary-navbar .dropdown-item.nav-link,
#main-navbar .dropdown-item.nav-link {
  padding: calc(10px * 0.5);
}
#secondary-navbar .has-action-url,
#main-navbar .has-action-url {
  cursor: pointer;
}
#secondary-navbar .has-not-action-url,
#main-navbar .has-not-action-url {
  cursor: default;
}

#secondary-navbar .mi-menu-root-item-anchor-tag.nav-link {
  cursor: pointer;
  padding: 0;
}
#secondary-navbar .mi-menu-root-item-anchor-tag.nav-link .tm-vip-icon {
  color: var(--tm-accent, #ff6500);
}

.vip-root-icon-container {
  width: 20px;
}

.mi-menu-group {
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  align-items: start;
  /*	flex-wrap: wrap;
  flex-direction: row;
  width: 100%;
  margin-top: $mq;
  margin-bottom: $mq;*/
}
.mi-menu-group .dropdown-item .tm-mi-icon {
  color: var(--tm-accent, #ff6500);
}
.mi-menu-group .dropdown-menu-mi-children-container {
  width: 100%;
  margin-top: calc(10px * 0.8);
}
.mi-menu-group .child-mi-nav-link {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mi-menu-group .child-icon-container {
  display: inline-block;
  width: 25px;
  padding-left: calc(10px * 0.5);
}
.mi-menu-group .nephew-icon-container {
  display: inline-block;
  width: 25px;
  padding-left: calc(10px * 0.5);
}
.mi-menu-group nephew-name {
  text-wrap: wrap;
}
.mi-menu-group .child-name {
  text-wrap: wrap;
}
.mi-menu-group .mi-menu-root-item {
  color: var(--bs-nav-link-color);
  background: transparent;
  border: unset;
  cursor: pointer;
  padding: 0;
}
.mi-menu-group .mi-menu-root-item-single-button {
  border: 0;
}
.mi-menu-group .mi-menu-root-item-single-button:hover {
  border: 0;
}
.mi-menu-group .mi-menu-root-item-single-button:active {
  border: 0 solid transparent;
}
.mi-menu-group .mi-menu-root-item-single-button.show {
  border: 0 solid transparent;
}
.mi-menu-group .mi-menu-root-item-single-button.mi-root-item-has-not-children::after {
  display: none;
}
.mi-menu-group .mi-menu-root-item-single-button.btn.mi-menu-root-item {
  flex: 0;
  padding: 0;
  /*display: flex;
  align-items: center;*/
}
.mi-menu-group .dropdown-item.nephew-mi-nav-link {
  width: calc(100% - 10px * 2.5);
}
.mi-menu-group .nephew-mi-nav-link {
  margin-left: calc(10px * 2.5);
}

.mi-root-icon-container {
  width: 20px;
}
.mi-root-icon-container .tm-mi-icon {
  color: var(--tm-accent, #ff6500);
}

.start-page-icon.tm-icon {
  color: var(--tm-accent, #ff6500);
}

.other-pages-menu-dropdown {
  /*padding: $pq;*/
}

#secondary-navbar .more-pages .more-pages-icon-container {
  width: 20px;
  display: inline-block;
}
#secondary-navbar .more-pages .more-pages-icon-container .tm-icon {
  color: var(--tm-accent, #ff6500);
}
#secondary-navbar .more-pages .child-nmi-nav-link {
  margin-left: calc(10px * 2.5);
}
#secondary-navbar .more-pages .nephew-nmi-nav-link {
  margin-left: calc(10px * 4.5);
}
#secondary-navbar .more-pages .dropdown-item .tm-nmi-icon {
  color: #00c893;
}
#secondary-navbar .more-pages .dropdown-item:active {
  color: white;
}
#secondary-navbar .more-pages .child-nmi-nav-link {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#secondary-navbar .more-pages .root-icon-container {
  display: inline-block;
  width: 25px;
  padding-left: calc(10px * 0.5);
}
#secondary-navbar .more-pages .child-icon-container {
  display: inline-block;
  width: 25px;
  padding-left: calc(10px * 0.5);
}
#secondary-navbar .more-pages .nephew-icon-container {
  display: inline-block;
  width: 25px;
  padding-left: calc(10px * 0.5);
}
#secondary-navbar .more-pages nephew-name {
  text-wrap: wrap;
}
#secondary-navbar .more-pages .child-name {
  text-wrap: wrap;
}
#secondary-navbar .more-pages .dropdown-item.child-nmi-nav-link {
  width: calc(100% - 10px * 2.5);
}
#secondary-navbar .more-pages .dropdown-item.nephew-nmi-nav-link {
  width: calc(100% - 10px * 4.5);
}
#secondary-navbar .more-pages .surveys-dropdown-item.dropdown-item {
  padding: calc(10px * 0.5);
}
#secondary-navbar .more-pages .surveys-dropdown-item.dropdown-item .surveys-dropdown-item-icon-container {
  display: inline-block;
  width: 25px;
  padding-left: 5px;
  text-align: center;
}

/*Important page elements -------------------*/
.page-main-title {
  font-size: 22px;
  padding: calc(2 * 10px) 0 calc(2 * 10px) 0;
  margin: 0;
  line-height: 1.5;
}

.page-sub-title {
  color: var(--tm-text-muted, #aaa);
  font-weight: 400;
  margin: calc(-1 * 10px) 0 10px 0;
  padding: 0;
  font-size: 16px;
  text-transform: uppercase;
}

.page-main-title.fancy-title {
  background: linear-gradient(90deg, #87489b 0%, #b269ca 100%);
  color: white;
  padding: calc(2 * 10px) calc(2 * 10px);
  position: relative;
  overflow: hidden;
  cursor: default;
  margin-top: calc(2 * 10px);
  margin-bottom: calc(2 * 10px);
  border-radius: 5px;
}

.page-main-title.fancy-title.red {
  background: linear-gradient(90deg, red 0%, #af0000 100%);
}

.page-main-title.fancy-title.purple {
  background: linear-gradient(90deg, #87489b 0%, #b269ca 100%);
}

.page-main-title.fancy-title.blue {
  background: linear-gradient(90deg, #006197 0%, #63bef1 100%);
}

.page-main-title.fancy-title.green {
  background: linear-gradient(90deg, #5e945e 0%, #a0d497 100%);
}

.page-main-title.fancy-title.default-color {
  background: linear-gradient(90deg, var(--tm-primary, #0088d4) 0%, var(--tm-secondary, #00c893) 100%);
}

.page-main-title.fancy-title.primary-color,
.page-main-title.fancy-title.primary-colors {
  background: linear-gradient(90deg, var(--tm-primary-dark, #006197) 0%, var(--tm-primary, #0088d4) 100%);
}

.page-main-title.fancy-title.secondary-color,
.page-main-title.fancy-title.secondary-colors {
  background: linear-gradient(90deg, var(--tm-secondary-dark, #009970) 0%, var(--tm-secondary, #00c893) 100%);
}

.page-main-title.fancy-title .tm-icon {
  position: absolute;
  font-size: 170px;
  opacity: 0.15;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  transition-duration: 0.2s;
  pointer-events: none;
}

.page-main-title.fancy-title .tm-icon.clone {
  opacity: 0.1;
  font-size: 270px;
  right: 75%;
  transition-duration: 0.4s;
}

.page-main-title.fancy-title:hover .tm-icon {
  transform: translateY(-50%) scale(1.2);
  opacity: 0.5;
}

.page-main-title.fancy-title:hover .tm-icon.clone {
  transform: translateY(-50%) scale(1.2);
  opacity: 0.25;
}

.page-main-title.fancy-title .page-main-title-text {
  font-size: 30px;
  display: block;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 4px;
}

.page-main-title.fancy-title .fancy-title-explanation {
  font-weight: 400;
  font-size: 16px;
}

body.has-breadcrumb .page-main-title {
  padding-top: 10px;
}

/*Page container -----------------------------*/
.page-container {
  border-radius: 5px;
  background: var(--tm-surface-alt, #fcfdff);
  padding: calc(2 * 10px) 10px;
}

.page-container.no-bg {
  padding: 0;
  background: none;
  border-bottom: none;
}

.page-container p:last-child {
  margin-bottom: 0;
}

/*Shadow --------------------------------------*/
.has-shadow {
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.15);
}

/*Watermark -----------------------------------*/
.page-container-watermark {
  font-size: 200px;
  pointer-events: none;
  z-index: 0;
  position: absolute;
  bottom: calc(3 * 10px);
  right: calc(3 * 10px);
  opacity: 0.05;
  color: var(--tm-secondary, #00c893);
}

/* SCROLLBARS --------------------------------------------------------------------------------*/
/* width */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* button */
::-webkit-scrollbar-button {
  background: var(--tm-primary, #0088d4);
  display: none;
}

::-webkit-scrollbar-button:hover {
  background: var(--tm-primary, #0088d4);
}

/* Handle */
::-webkit-scrollbar-thumb {
  /*background: $primary-color;*/
  background: #bababa;
  border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--tm-primary-dark, #006197);
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--tm-surface-alt, #e5e5e5);
}

::-webkit-scrollbar-track:hover {
  background: var(--tm-primary-light, #63bef1);
}

/* The track NOT covered by the handle.
::-webkit-scrollbar-track-piece {
    background: #000; 
}

/* Corner */
::-webkit-scrollbar-corner {
  background: var(--tm-primary, #0088d4);
  display: none;
}

/* Resizer */
/*Server messages --------------------------------------------*/
.server-message {
  z-index: 9999;
  position: fixed;
  bottom: calc(3 * 10px);
  left: calc(3 * 10px);
  right: calc(3 * 10px);
  height: auto;
  padding: calc(3 * 10px);
  color: white;
  border-radius: 5px;
  box-shadow: 0 0 27px rgba(0, 0, 0, 0.15);
  display: none;
}

.server-message.warning {
  background: var(--tm-danger, #ff6500);
  background: linear-gradient(90deg, var(--tm-danger, #ff6500) 0%, #d15300 100%);
}

.server-message.info {
  background: var(--tm-primary, #0088d4);
  background: linear-gradient(90deg, var(--tm-primary, #0088d4) 0%, var(--tm-secondary, #00c893) 100%);
}

.server-message.success {
  background: var(--tm-success, #85c177);
  background: linear-gradient(90deg, #5e945e 0%, var(--tm-success, #85c177) 100%);
}

/*Login / register dialog bk -----------------------------*/
@keyframes fadeInContents {
  0% {
    opacity: 0;
    transform: translateY(-50%) translateX(-50%) scale(0.5) rotateX(5deg);
  }
  100% {
    opacity: 1;
    transform: translateY(-50%) translateX(-50%) scale(1) rotateX(0);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fadeInAnimation {
  animation: fadeIn;
  animation-timing-function: ease-out;
  animation-duration: 0.2s;
}

.fadeInContentsAnimation {
  animation: fadeInContents;
  animation-timing-function: ease-out;
  animation-duration: 0.2s;
  transform-origin: center center;
}

/*Call to action commands ----------------------------------*/
.call-to-action {
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: calc(1.25 * 10px) calc(2 * 10px);
}

.call-to-action.success {
  background: #5e945e;
}

.call-to-action.success:hover {
  background: var(--tm-success, #85c177);
}

/*Alert watermarks ----------------------------------------------*/
.alert.with-watermark {
  overflow: hidden;
}

.alert.with-watermark .alert-watermark {
  position: absolute;
  pointer-events: none;
  opacity: 0.2;
  color: white;
  font-size: 75px;
  z-index: 0;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(10deg);
  transition-duration: 0.2s;
}

.alert.with-watermark:hover .alert-watermark {
  opacity: 0.3;
  transform: translateY(-50%) scale(1.5) rotate(0deg);
}

/*Form fields ----------------------------------------*/
.form-group {
  margin: calc(10px * 1) 0 calc(10px * 1) 0;
}

.form-group.mandatory label {
  color: #ff6500;
  font-weight: 600;
  position: relative;
}

.form-group.mandatory input,
.form-group.mandatory select,
.form-group.mandatory .select2-container--default .select2-selection--single,
.form-group.mandatory .select2-container--default .select2-selection--multiple {
  box-shadow: 3px 0 1px #ff6500;
}

.form-group.mandatory input:hover,
.form-group.mandatory input:focus,
.form-group.mandatory select:hover,
.form-group.mandatory select:focus {
  border-right-color: #ff6500;
}

.form-group.mandatory.errorneous input,
.form-group.mandatory.errorneous select,
.form-group.mandatory.errorneous .select2-container--default .select2-selection--single,
.form-group.mandatory.errorneous .select2-container--default .select2-selection--multiple {
  background: rgba(255, 158, 158, 0.25);
}

.mandatory-info {
  font-size: 12px;
  color: var(--tm-text-muted, #777);
  font-style: italic;
}

.mandatory-info .tm-icon {
  color: #ff6500;
  font-size: 16px;
}

/* SELECTION ----------------------------------------------------------------------------------*/
::selection {
  background: rgb(255, 239, 151); /* WebKit/Blink Browsers */
}

::-moz-selection {
  background: rgb(255, 239, 151); /* Gecko Browsers */
}

/* CHROME INPUT FOCUS BG COLOR ----------------------------------------------------------------*/
input:-webkit-autofill,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 30px white inset;
  /*-webkit-text-fill-color: yellow !important;*/
}

/*----------------------------------------------------------------------------------------------*/
::-webkit-input-placeholder {
  color: var(--tm-text-muted, #aaa);
  opacity: 1;
  font-size: 14px;
}

::-moz-placeholder {
  color: var(--tm-text-muted, #aaa);
  opacity: 1;
  font-size: 14px;
}

:-ms-input-placeholder {
  color: var(--tm-text-muted, #aaa);
  opacity: 1;
  font-size: 14px;
}

::-ms-input-placeholder {
  color: var(--tm-text-muted, #aaa);
  opacity: 1;
  font-size: 14px;
}

::placeholder {
  color: var(--tm-text-muted, #aaa);
  opacity: 1;
  font-size: 14px;
}

input::-ms-clear {
  display: none;
}

/* Nice brace - good for putting under titles -----------------------------------------------------*/
.brace {
  width: auto;
  min-width: 35px;
  padding-bottom: 20px;
  font-size: 2em;
  line-height: 2em;
  position: relative;
  text-align: center;
  vertical-align: middle;
  border: none;
  background-color: transparent;
  background-image: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0) 14.5px, var(--tm-secondary-light, #99edd7) 15.5px, var(--tm-secondary-light, #99edd7) 19.5px, rgba(255, 255, 255, 0) 20.5px), radial-gradient(circle at 35px 0, rgba(255, 255, 255, 0) 14.5px, var(--tm-secondary-light, #99edd7) 15.5px, var(--tm-secondary-light, #99edd7) 19.5px, rgba(255, 255, 255, 0) 20.5px);
  background-size: 35px 20px;
  background-position: center bottom;
  background-repeat: no-repeat;
  text-transform: lowercase;
  font-style: italic;
  color: #fff;
  -webkit-filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0));
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0));
  overflow: visible;
}

.brace:before {
  width: 50%;
  border-top: 5px solid var(--tm-secondary-light, #99edd7);
  border-left: 1px solid transparent; /* play with this until you like the look of it */
  border-top-left-radius: 20% 30px;
  height: 100%;
  content: "";
  position: absolute;
  top: 100%;
  left: -15px;
  box-sizing: border-box;
  margin-top: -5px;
}

.brace:after {
  width: 50%;
  border-top: 5px solid var(--tm-secondary-light, #99edd7);
  border-right: 1px solid transparent; /* play with this until you like the look of it */
  border-top-right-radius: 20% 30px;
  height: 100%;
  content: "";
  position: absolute;
  top: 100%;
  right: -15px;
  box-sizing: border-box;
  margin-top: -5px;
}

.brace.purple {
  background-image: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0) 14.5px, #b269ca 15.5px, #b269ca 19.5px, rgba(255, 255, 255, 0) 20.5px), radial-gradient(circle at 35px 0, rgba(255, 255, 255, 0) 14.5px, #b269ca 15.5px, #b269ca 19.5px, rgba(255, 255, 255, 0) 20.5px);
}

.brace.purple:before {
  border-top-color: #b269ca;
}

.brace.purple:after {
  border-top-color: #b269ca;
}

/* Fancy font awesome icon ---------------------------------------*/
.tm-fancy-icon-wrapper {
  --_halo: var(--tm-primary, #0088d4);
  width: 130px;
  height: 130px;
  text-align: center;
  border-radius: 50%;
  padding: 0;
  background: linear-gradient(90deg, var(--tm-primary, #0088d4) 0%, var(--tm-secondary, #00c893) 100%);
  color: white;
  box-shadow: 0 14px 32px -10px rgba(0, 0, 0, 0.38);
  position: relative;
  overflow: visible;
  animation: tm-fancy-icon-float 5s ease-in-out infinite;
  /* baseline breathing room for the satellite dots; parent my-4 / no-results padding takes over where m-auto overrides this */
  margin-block: 1.25rem;
}

/* Every instance is rendered with Bootstrap's .m-auto (margin: auto !important), which
   centers the orb horizontally but zeroes the baseline margin-block above. That let the
   orbiting dots / pulsing halo (they overflow ~18% beyond the orb) crowd the text right
   under the icon. Out-specify .m-auto to restore vertical breathing room - a touch more
   below than above - while keeping the horizontal auto-centering untouched. */
.tm-fancy-icon-wrapper.m-auto {
  margin-top: 2rem !important;
  margin-bottom: 2.5rem !important;
}

/* Pulsing halo ring behind the orb */
.tm-fancy-icon-wrapper::before {
  content: "";
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: var(--_halo);
  opacity: 0.13;
  pointer-events: none;
  z-index: -1;
  animation: tm-fancy-icon-halo 3s ease-in-out infinite;
}

/* Satellite dots — injected by initFancyIconDots() in own.os.site.js.
   Each is centered on the parent, then orbited via rotate(A) translateX(R)
   so every dot has its own independent path, speed and direction. */
.tm-fancy-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
}

/* 1 — medium orange, r=82px, 11 s CW */
.tm-fancy-dot--1 {
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  background: var(--tm-accent, #ff6500);
  animation: tm-dot-orbit-1 11s ease-in-out infinite;
  animation-delay: -2.3s;
}

/* 2 — small teal, r=75px, 16 s CCW */
.tm-fancy-dot--2 {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--tm-secondary, #00c893);
  animation: tm-dot-orbit-2 16s ease-in-out infinite;
  animation-delay: -6.1s;
}

/* 3 — large light-blue, r=88px, 9 s CW */
.tm-fancy-dot--3 {
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  background: var(--tm-primary-light, #63bef1);
  animation: tm-dot-orbit-3 9s ease-in-out infinite;
  animation-delay: -0.8s;
}

/* 4 — small teal, r=78px, 14 s CCW */
.tm-fancy-dot--4 {
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background: var(--tm-secondary, #00c893);
  animation: tm-dot-orbit-4 14s ease-in-out infinite;
  animation-delay: -9.5s;
}

/* 5 — medium orange, r=85px, 12.5 s CW */
.tm-fancy-dot--5 {
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  background: var(--tm-accent, #ff6500);
  animation: tm-dot-orbit-5 12.5s ease-in-out infinite;
  animation-delay: -4.2s;
}

.tm-fancy-icon-wrapper.red {
  --_halo: #c0392b;
  background: linear-gradient(90deg, red 0%, #af0000 100%);
}

.tm-fancy-icon-wrapper.purple {
  --_halo: #87489b;
  background: linear-gradient(90deg, #87489b 0%, #b269ca 100%);
}

.tm-fancy-icon-wrapper.blue {
  --_halo: #006197;
  background: linear-gradient(90deg, #006197 0%, #63bef1 100%);
}

.tm-fancy-icon-wrapper.green {
  --_halo: #5e945e;
  background: linear-gradient(90deg, #5e945e 0%, #a0d497 100%);
}

.tm-fancy-icon-wrapper.danger {
  --_halo: var(--tm-danger, #ff6500);
  background: linear-gradient(90deg, var(--tm-danger, #ff6500) 0%, #d15300 100%);
}

.tm-fancy-icon-wrapper.success {
  --_halo: #5e945e;
  background: linear-gradient(90deg, #5e945e 0%, var(--tm-success, #85c177) 100%);
}

.tm-fancy-icon-wrapper.secondary-colors {
  --_halo: var(--tm-secondary-dark, #009970);
  background: linear-gradient(90deg, var(--tm-secondary-dark, #009970) 0%, var(--tm-secondary, #00c893) 100%);
}

.tm-fancy-icon-wrapper.primary-colors,
.tm-fancy-icon-wrapper.primary {
  --_halo: var(--tm-primary-dark, #006197);
  background: linear-gradient(90deg, var(--tm-primary-dark, #006197) 0%, var(--tm-primary, #0088d4) 100%);
}

.tm-fancy-icon-wrapper .tm-icon {
  transition-duration: 0.2s;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  font-size: 65px;
  color: white;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
}

.tm-fancy-icon-wrapper:hover .tm-icon {
  transform: translateX(-50%) translateY(-50%) scale(1.05);
}

.tm-fancy-icon-wrapper.small {
  width: 90px;
  height: 90px;
}

.tm-fancy-icon-wrapper.small .tm-icon {
  font-size: 45px;
}

.tm-fancy-icon-wrapper.large {
  width: 200px;
  height: 200px;
}

.tm-fancy-icon-wrapper.large .tm-icon {
  font-size: 95px;
}

@keyframes tm-fancy-icon-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
@keyframes tm-fancy-icon-halo {
  0%, 100% {
    transform: scale(1);
    opacity: 0.13;
  }
  50% {
    transform: scale(1.07);
    opacity: 0.22;
  }
}
/* Independent satellite dot orbits.
   Pattern: rotate(startAngle + 360deg) translateX(radius) [+ slight scale at midpoint]
   Different radii, durations, directions and delays keep every dot
   visually independent — none of them sync up. */
@keyframes tm-dot-orbit-1 {
  0% {
    transform: rotate(20deg) translateX(82px) scale(1);
  }
  50% {
    transform: rotate(200deg) translateX(78px) scale(1.15);
  }
  100% {
    transform: rotate(380deg) translateX(82px) scale(1);
  }
}
@keyframes tm-dot-orbit-2 {
  0% {
    transform: rotate(140deg) translateX(75px) scale(1);
  }
  50% {
    transform: rotate(-40deg) translateX(72px) scale(0.85);
  }
  100% {
    transform: rotate(-220deg) translateX(75px) scale(1);
  }
}
@keyframes tm-dot-orbit-3 {
  0% {
    transform: rotate(260deg) translateX(88px) scale(1);
  }
  50% {
    transform: rotate(440deg) translateX(84px) scale(1.1);
  }
  100% {
    transform: rotate(620deg) translateX(88px) scale(1);
  }
}
@keyframes tm-dot-orbit-4 {
  0% {
    transform: rotate(70deg) translateX(78px) scale(1);
  }
  50% {
    transform: rotate(-110deg) translateX(74px) scale(0.9);
  }
  100% {
    transform: rotate(-290deg) translateX(78px) scale(1);
  }
}
@keyframes tm-dot-orbit-5 {
  0% {
    transform: rotate(200deg) translateX(85px) scale(1);
  }
  50% {
    transform: rotate(380deg) translateX(81px) scale(1.1);
  }
  100% {
    transform: rotate(560deg) translateX(85px) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tm-fancy-icon-wrapper,
  .tm-fancy-icon-wrapper::before,
  .tm-fancy-dot {
    animation: none;
  }
}
/*no results -------------------------------------*/
.no-results-container {
  text-align: center;
  padding: calc(5 * 10px);
}

.no-results-container .normal-icon-wrapper .tm-icon {
  font-size: 200px;
  color: var(--tm-primary, #0088d4);
}

.no-results-container .normal-icon-wrapper .tm-icon.red {
  color: red;
}

.no-results-container .normal-icon-wrapper .tm-icon.blue {
  color: #0088d4;
}

.no-results-container .normal-icon-wrapper .tm-icon.orange {
  color: orange;
}

.no-results-container .normal-icon-wrapper .tm-icon.green {
  color: #85c177;
}

.no-results-container .normal-icon-wrapper .tm-icon.purple {
  color: #b269ca;
}

.no-results-container .the-message {
  font-size: 30px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: calc(3 * 10px) 0;
}

.no-results-container .the-message {
  font-size: 16px;
  letter-spacing: 1px;
}

/*no data pages ----------------------------------*/
.no-data-container {
  text-align: center;
  padding: calc(5 * 10px);
}

.no-data-container .tm-icon {
  font-size: 200px;
  color: var(--tm-primary, #0088d4);
}

.no-data-container .the-message {
  font-size: 30px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/*messages -----------------------------------------*/
.os-success-message {
  padding: calc(2 * 10px);
  border-radius: 5px;
  background: linear-gradient(90deg, #5e945e 0%, var(--tm-success, #85c177) 100%);
  color: white;
  /* Participant code shown inline inside the green success box: white, bold italic, slightly larger. */
}
.os-success-message .course-participant-code {
  color: white;
  font-weight: bold;
  font-style: italic;
  font-size: 1.15em;
}

.os-warning-message-payment {
  padding: calc(2 * 10px);
  border-radius: 5px;
  background: linear-gradient(90deg, #87489b 0%, #b269ca 100%);
  color: white;
}

.access-shopping-cart-command {
  padding: calc(1.5 * 10px) calc(3 * 10px);
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--tm-primary-dark, #006197) 0%, var(--tm-primary, #0088d4) 100%) !important;
}
.access-shopping-cart-command::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #63bef1 0%, #006197 100%);
  z-index: 0;
  transition-duration: 0.2s;
  border-radius: 150px;
}
.access-shopping-cart-command .access-shopping-cart-command-contents {
  position: relative;
  z-index: 1;
}
.access-shopping-cart-command:hover::before {
  left: 0;
}

.quick-commands-container {
  width: 44px;
  height: auto;
  z-index: 9999;
  position: fixed;
  bottom: 10px;
  right: 10px;
  padding: 0;
  margin: 0;
}

/* GO TO MY ACCOUNT SHORTCUT --------------------------------------------------------------*/
.go-to-my-account-shortcut {
  background: linear-gradient(90deg, var(--tm-primary-dark, #006197) 0%, var(--tm-primary, #0088d4) 100%);
  color: white;
  text-align: center;
  width: 44px;
  height: 44px;
  line-height: 44px;
  border-radius: 50%;
  padding: 0;
  margin: 5px 0 0 0;
  border: none;
  cursor: pointer;
  transition-duration: 0.2s;
  opacity: 0.75;
  display: block;
}
.go-to-my-account-shortcut:hover {
  opacity: 1;
}
.go-to-my-account-shortcut:focus {
  outline: none;
}

/* GO TO LOGIN PAGE SHORTCUT --------------------------------------------------------------*/
.go-to-login-page-shortcut {
  background: linear-gradient(90deg, var(--tm-primary-dark, #006197) 0%, var(--tm-primary, #0088d4) 100%);
  color: white;
  text-align: center;
  width: 44px;
  height: 44px;
  line-height: 44px;
  border-radius: 50%;
  padding: 0;
  margin: 5px 0 0 0;
  border: none;
  cursor: pointer;
  transition-duration: 0.2s;
  opacity: 0.75;
  display: block;
}
.go-to-login-page-shortcut:hover {
  opacity: 1;
}
.go-to-login-page-shortcut:focus {
  outline: none;
}

/* BACK TO TOP COMMAND --------------------------------------------------------------------*/
.back-to-top-command {
  display: none;
  background: linear-gradient(90deg, #87489b 0%, #b269ca 100%);
  color: white;
  text-align: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  padding: 0;
  margin: 5px 0 0 0;
  border: none;
  cursor: pointer;
  transition-duration: 0.2s;
  opacity: 0.75;
}

.back-to-top-command:hover {
  opacity: 1;
}

.back-to-top-command:focus {
  outline: none;
}

.back-to-top-command.visible {
  display: block;
}

/* GO TO SHOPPING CART COMMAND --------------------------------------------------------------------*/
.go-to-shopping-cart {
  display: none;
  background: linear-gradient(90deg, #5e945e 0%, #85c177 100%);
  color: white;
  text-align: center;
  width: 44px;
  height: 44px;
  line-height: 47px;
  border-radius: 50%;
  padding: 0;
  margin: 5px 0 0 0;
  border: none;
  cursor: pointer;
  transition-duration: 0.2s;
  opacity: 0.75;
  position: relative;
}
.go-to-shopping-cart .shopping-cart-count-indicator {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  z-index: 1;
  width: auto;
  min-width: 16px;
  height: 16px;
  line-height: 14px;
  padding-left: 2px;
  padding-right: 2px;
  background: red;
  text-align: center;
  border-radius: 50px;
  color: white;
  border: solid 1px white;
  font-size: 12px;
  font-weight: 600;
}

.go-to-shopping-cart:hover {
  opacity: 1;
}

.go-to-shopping-cart:focus {
  outline: none;
}

.go-to-shopping-cart.visible {
  display: block;
}

/* GO TO Promotions COMMAND --------------------------------------------------------------------*/
.go-to-promotions-bubble {
  background: linear-gradient(315deg, #ff4e00 0%, #ec9f05 74%);
  color: white;
  text-align: center;
  width: 44px;
  height: 44px;
  line-height: 44px;
  border-radius: 50%;
  padding: 0;
  margin: 5px 0 0 0;
  border: none;
  cursor: pointer;
  transition-duration: 0.2s;
  opacity: 0.75;
  display: block;
}
.go-to-promotions-bubble:hover {
  opacity: 1;
}
.go-to-promotions-bubble:focus {
  outline: none;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  #secondary-navbar .more-pages .more-pages-icon-container .tm-icon {
    color: white;
  }
  #secondary-navbar .more-pages .child-nmi-nav-link {
    margin-left: 0;
  }
  #secondary-navbar .more-pages .nephew-nmi-nav-link {
    margin-left: 0;
  }
  #secondary-navbar .more-pages .dropdown-item.child-nmi-nav-link {
    width: 0;
  }
  #secondary-navbar .more-pages .dropdown-item.nephew-nmi-nav-link {
    width: 0;
  }
  #secondary-navbar .more-pages .dropdown-item.nephew-nmi-nav-link .nephew-icon-container {
    margin-left: calc(10px * 2);
  }
  .child-vip-nav-link .nephew-vip-nav-link .nephew-name {
    padding-right: 10px;
  }
  #secondary-navbar .mi-menu-root-item-anchor-tag.nav-link .tm-vip-icon {
    color: white;
  }
  .menu-for-smaller-screen {
    display: none;
  }
  .menu-for-bigger-screen {
    display: block;
  }
  .menu-for-bigger-screen::before {
    display: none;
  }
  .vip-menu-group {
    white-space: nowrap;
  }
  .vip-menu-group .dropdown-menu-vip-children-container {
    width: 250px;
    left: unset;
    top: unset;
  }
  .vip-menu-group .nephew-vip-nav-link {
    margin-left: 0;
  }
  .vip-menu-group .dropdown-item.nephew-vip-nav-link {
    width: 100%;
  }
  .mi-root-icon-container .tm-mi-icon {
    color: white;
  }
  .start-page-icon.tm-icon {
    color: white;
  }
  .mi-menu-group {
    flex-direction: row;
    padding: 0 0.75rem 0 0.75rem;
  }
  .mi-menu-group.nav-item.dropdown {
    display: flex;
    align-items: center;
  }
  .mi-menu-group .dropdown-menu-mi-children-container {
    width: 250px;
  }
  .mi-menu-group .nav-link.show::after {
    color: white;
  }
  .mi-menu-group .mi-menu-root-item {
    color: white;
  }
  .mi-menu-group nephew-name {
    text-wrap: unset;
  }
  .mi-menu-group .child-name {
    text-wrap: unset;
  }
  .mi-menu-group .dropdown-item.nephew-mi-nav-link {
    width: 0;
  }
  .mi-menu-group .dropdown-item.child-mi-nav-link {
    width: 0;
  }
  .mi-menu-group .nephew-mi-nav-link {
    margin-left: 0;
  }
}
/* WebsiteUIMode - corner promo reused on cards & details */
/* 1) Make the host a positioning context */
.tm-product-card.has-promo-product-picture,
.product-price-and-other-details-container {
  position: relative;
}

/* 2) Corner promo box (top-right) */
.tm-product-card .promo-corner,
.product-price-and-other-details-container > .promo-corner {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 56px; /* adjust if needed */
  height: 56px; /* keep square for sticker look */
  z-index: 3; /* above content */
  pointer-events: none; /* do not block underlying UI */
}

/* 3) Image scaling */
.tm-product-card .promo-corner img,
.product-price-and-other-details-container > .promo-corner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain; /* keep SVG/PNG aspect ratio */
}

/*Skeleton lists animation*/
.skeleton-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.skeleton-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0;
}

.skeleton-line {
  height: 12px;
  border-radius: 8px;
  background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}

@keyframes skeleton-pulse {
  0% {
    background-position: 200% 0;
    opacity: 0.85;
  }
  50% {
    opacity: 1;
  }
  100% {
    background-position: -200% 0;
    opacity: 0.85;
  }
}
/* width helpers */
.w-18 {
  width: 18%;
}

.w-20 {
  width: 20%;
}

.w-25 {
  width: 25%;
}

.w-30 {
  width: 30%;
}

.w-60 {
  width: 60%;
}

.w-65 {
  width: 65%;
}

.w-70 {
  width: 70%;
}

.w-75 {
  width: 75%;
}

.w-85 {
  width: 85%;
}

.w-88 {
  width: 88%;
}

.w-90 {
  width: 90%;
}

.w-95 {
  width: 95%;
}

/* ------------------------------------------------- */
/* Medium devices (tablets, 768px and up) */
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  #secondary-navbar .dropdown-item.child-mi-nav-link {
    min-width: unset;
    width: 100%;
  }
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  #secondary-navbar .dropdown-item.child-mi-nav-link {
    min-width: unset;
  }
}
/* The logged participant's personal course code (CourseParticipant.Code), shown with a suggestive accent color. Lives here (globally loaded) so it can be reused across course-related pages. */
.course-participant-code {
  color: var(--tm-accent, #ff6500);
  font-weight: 600;
  margin-left: calc(10px / 2);
}

/* Under a course session title the code sits on its own line, lightweight and a bit smaller. */
.course-session-title-wrapper .course-participant-code {
  display: block;
  margin-left: 0;
  font-weight: normal;
  font-size: 0.8em;
  font-style: italic;
}

/* In the materials upload radio row the code lines up with the radio buttons and shares their font (keeps the accent color so it still stands out). */
.material-upload-radio-boxes .course-participant-code {
  display: flex;
  align-items: center;
  margin-left: 0;
  font-weight: normal;
  font-style: normal;
  font-size: 1em;
}

/* =========================================================================
   FO BACKGROUND DECOR ("Decor fundal" - BO Web Studio -> Tema interfata)
   -------------------------------------------------------------------------
   Decorative backgrounds for the storefront's FANCY pages - the pages that
   render body.with-fancy-shapes (the ones that today show the bg.svg
   shapes). Activated through an html.fo-bg-decor-<style> class added by
   _Layout (see InterfaceThemeRenderer.GetHtmlClasses); the chained
   html.fo-bg-decor-subtle / -bold classes scale the intensity and
   html.fo-bg-decor-animated opts into a very slow, subtle drift.

   Contract:
    * "Default = apply nothing": with no fo-bg-decor-* class this file matches
      nothing, so an untouched shop keeps the standard fancy SVG exactly as-is.
    * When a decor IS selected it fully REPLACES the standard fancy SVG: the
      body's own background-image is dropped and the decoration paints on the
      body's ::before/::after pseudo-elements - fixed, full-viewport,
      non-scrolling layers sitting between the page background and the content.
    * SVG + CSS only (inline data-URI SVG masks + gradients - no raster
      images). Every colour reads a --tm-* design token with the Default
      palette literal as fallback, so each decor follows the selected colour
      theme (light, dark or Custom) automatically - including the DARK themes,
      which today simply drop the light fancy SVG.
    * Where color-mix() is used, an rgba() fallback with the Default palette
      is declared first (older browsers get a Default-coloured decor).
    * Authored as plain CSS (no Sass features) so the .scss/.css twins stay
      byte-identical without a compiler; loaded right after own.os.site.css.
   ========================================================================= */

/* ---- The decoration layer (shared plumbing) -----------------------------
   The body is promoted to its own stacking context (position + z-index) so
   the negative-z pseudo-layers paint ABOVE the body's background colour but
   BELOW every piece of content. */
html[class*="fo-bg-decor-"] body.with-fancy-shapes {
	background-image: none;
	position: relative;
	z-index: 0;
}

html[class*="fo-bg-decor-"] body.with-fancy-shapes::before,
html[class*="fo-bg-decor-"] body.with-fancy-shapes::after {
	content: '';
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	pointer-events: none;
	opacity: var(--tm-bgdecor-opacity, 0.8);
}

/* Intensity: one knob, every decor obeys it. */
html.fo-bg-decor-subtle {
	--tm-bgdecor-opacity: 0.45;
}

html.fo-bg-decor-bold {
	--tm-bgdecor-opacity: 1;
}

/* =========================================================================
   AURORA ("Aurora") - soft, dreamy colour glows drifting from the corners.
   Four large radial glows in the theme's primary / secondary / accent.
   ========================================================================= */
html.fo-bg-decor-aurora body.with-fancy-shapes::before {
	background:
		radial-gradient(52% 44% at 12% 8%, rgba(0, 136, 212, 0.22) 0%, rgba(0, 136, 212, 0) 70%),
		radial-gradient(46% 42% at 88% 12%, rgba(0, 200, 147, 0.18) 0%, rgba(0, 200, 147, 0) 70%),
		radial-gradient(60% 52% at 78% 86%, rgba(255, 101, 0, 0.12) 0%, rgba(255, 101, 0, 0) 72%),
		radial-gradient(44% 40% at 16% 90%, rgba(0, 136, 212, 0.14) 0%, rgba(0, 136, 212, 0) 70%);
	background:
		radial-gradient(52% 44% at 12% 8%, color-mix(in srgb, var(--tm-primary, #0088d4) 22%, transparent) 0%, transparent 70%),
		radial-gradient(46% 42% at 88% 12%, color-mix(in srgb, var(--tm-secondary, #00c893) 18%, transparent) 0%, transparent 70%),
		radial-gradient(60% 52% at 78% 86%, color-mix(in srgb, var(--tm-accent, #ff6500) 12%, transparent) 0%, transparent 72%),
		radial-gradient(44% 40% at 16% 90%, color-mix(in srgb, var(--tm-primary, #0088d4) 14%, transparent) 0%, transparent 70%);
}

/* =========================================================================
   WAVES ("Valuri") - gentle wave bands along the top and bottom edges.
   The theme gradient painted through two tileable SVG wave masks (the wave
   fill-opacity carries the per-band strength).
   ========================================================================= */
html.fo-bg-decor-waves body.with-fancy-shapes::before {
	background: linear-gradient(90deg, #0088d4 0%, #00c893 100%);
	background: var(--tm-gradient-default, linear-gradient(90deg, var(--tm-primary, #0088d4) 0%, var(--tm-secondary, #00c893) 100%));
	-webkit-mask-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%23000' fill-opacity='0.16' d='M0,160 C240,100 480,220 720,160 C960,100 1200,220 1440,160 L1440,320 L0,320 Z'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%23000' fill-opacity='0.10' d='M0,160 C240,100 480,220 720,160 C960,100 1200,220 1440,160 L1440,0 L0,0 Z'/%3E%3C/svg%3E");
	-webkit-mask-size: 1440px 260px, 1440px 190px;
	-webkit-mask-position: left bottom, left top;
	-webkit-mask-repeat: repeat-x, repeat-x;
	mask-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%23000' fill-opacity='0.16' d='M0,160 C240,100 480,220 720,160 C960,100 1200,220 1440,160 L1440,320 L0,320 Z'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%23000' fill-opacity='0.10' d='M0,160 C240,100 480,220 720,160 C960,100 1200,220 1440,160 L1440,0 L0,0 Z'/%3E%3C/svg%3E");
	mask-size: 1440px 260px, 1440px 190px;
	mask-position: left bottom, left top;
	mask-repeat: repeat-x, repeat-x;
}

/* =========================================================================
   BLOBS ("Forme organice") - large organic shapes floating out of the
   corners. ::before carries two primary/secondary blobs, ::after a smaller
   accent blob, each an SVG-masked theme tint.
   ========================================================================= */
html.fo-bg-decor-blobs body.with-fancy-shapes::before {
	background: linear-gradient(135deg, rgba(0, 136, 212, 0.16) 0%, rgba(0, 200, 147, 0.16) 100%);
	background: linear-gradient(135deg, color-mix(in srgb, var(--tm-primary, #0088d4) 16%, transparent) 0%, color-mix(in srgb, var(--tm-secondary, #00c893) 16%, transparent) 100%);
	-webkit-mask-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cpath fill='%23000' d='M300,72 C398,60 492,126 522,220 C552,314 512,418 428,470 C344,522 228,532 152,474 C76,416 58,314 96,228 C134,142 202,84 300,72 Z'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cpath fill='%23000' d='M312,64 C404,74 484,140 510,232 C536,324 496,424 414,472 C332,520 220,518 148,458 C76,398 66,296 104,212 C142,128 220,54 312,64 Z'/%3E%3C/svg%3E");
	-webkit-mask-size: 56vw 56vw, 46vw 46vw;
	-webkit-mask-position: right -16vw top -18vw, left -14vw bottom -16vw;
	-webkit-mask-repeat: no-repeat, no-repeat;
	mask-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cpath fill='%23000' d='M300,72 C398,60 492,126 522,220 C552,314 512,418 428,470 C344,522 228,532 152,474 C76,416 58,314 96,228 C134,142 202,84 300,72 Z'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cpath fill='%23000' d='M312,64 C404,74 484,140 510,232 C536,324 496,424 414,472 C332,520 220,518 148,458 C76,398 66,296 104,212 C142,128 220,54 312,64 Z'/%3E%3C/svg%3E");
	mask-size: 56vw 56vw, 46vw 46vw;
	mask-position: right -16vw top -18vw, left -14vw bottom -16vw;
	mask-repeat: no-repeat, no-repeat;
}

html.fo-bg-decor-blobs body.with-fancy-shapes::after {
	background: rgba(255, 101, 0, 0.12);
	background: color-mix(in srgb, var(--tm-accent, #ff6500) 12%, transparent);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cpath fill='%23000' d='M296,88 C376,72 468,116 506,196 C544,276 522,378 456,438 C390,498 288,510 210,464 C132,418 96,326 118,240 C140,154 216,104 296,88 Z'/%3E%3C/svg%3E");
	-webkit-mask-size: 15vw 15vw;
	-webkit-mask-position: right 9vw top 44vh;
	-webkit-mask-repeat: no-repeat;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cpath fill='%23000' d='M296,88 C376,72 468,116 506,196 C544,276 522,378 456,438 C390,498 288,510 210,464 C132,418 96,326 118,240 C140,154 216,104 296,88 Z'/%3E%3C/svg%3E");
	mask-size: 15vw 15vw;
	mask-position: right 9vw top 44vh;
	mask-repeat: no-repeat;
}

/* =========================================================================
   DOTS ("Puncte") - an elegant halftone dot matrix in the theme's primary,
   present near the top edge and the bottom-right corner, dissolving toward
   the middle of the page (radial masks).
   ========================================================================= */
html.fo-bg-decor-dots body.with-fancy-shapes::before {
	background-image: radial-gradient(circle at 2px 2px, rgba(0, 136, 212, 0.55) 1.2px, transparent 1.7px);
	background-image: radial-gradient(circle at 2px 2px, color-mix(in srgb, var(--tm-primary, #0088d4) 55%, transparent) 1.2px, transparent 1.7px);
	background-size: 22px 22px;
	-webkit-mask-image:
		radial-gradient(120% 85% at 50% -12%, #000 0%, rgba(0, 0, 0, 0.4) 42%, transparent 68%),
		radial-gradient(90% 70% at 104% 106%, #000 0%, rgba(0, 0, 0, 0.35) 40%, transparent 66%);
	mask-image:
		radial-gradient(120% 85% at 50% -12%, #000 0%, rgba(0, 0, 0, 0.4) 42%, transparent 68%),
		radial-gradient(90% 70% at 104% 106%, #000 0%, rgba(0, 0, 0, 0.35) 40%, transparent 66%);
}

/* =========================================================================
   GRID ("Caroiaj fin") - a fine blueprint grid in the theme's primary (a
   stronger "major" line every 5 cells), fading away toward the bottom.
   ========================================================================= */
html.fo-bg-decor-grid body.with-fancy-shapes::before {
	background-image:
		linear-gradient(to right, rgba(0, 136, 212, 0.30) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(0, 136, 212, 0.30) 1px, transparent 1px),
		linear-gradient(to right, rgba(0, 136, 212, 0.14) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(0, 136, 212, 0.14) 1px, transparent 1px);
	background-image:
		linear-gradient(to right, color-mix(in srgb, var(--tm-primary, #0088d4) 30%, transparent) 1px, transparent 1px),
		linear-gradient(to bottom, color-mix(in srgb, var(--tm-primary, #0088d4) 30%, transparent) 1px, transparent 1px),
		linear-gradient(to right, color-mix(in srgb, var(--tm-primary, #0088d4) 14%, transparent) 1px, transparent 1px),
		linear-gradient(to bottom, color-mix(in srgb, var(--tm-primary, #0088d4) 14%, transparent) 1px, transparent 1px);
	background-size: 220px 220px, 220px 220px, 44px 44px, 44px 44px;
	-webkit-mask-image: radial-gradient(140% 90% at 50% -6%, #000 0%, rgba(0, 0, 0, 0.35) 48%, transparent 82%);
	mask-image: radial-gradient(140% 90% at 50% -6%, #000 0%, rgba(0, 0, 0, 0.35) 48%, transparent 82%);
}

/* =========================================================================
   RAYS ("Raze") - theatrical light rays fanning down from above the page,
   with a soft glow at the source, fading toward mid-page.
   ========================================================================= */
html.fo-bg-decor-rays body.with-fancy-shapes::before {
	background:
		radial-gradient(60% 34% at 50% -10%, rgba(0, 136, 212, 0.22) 0%, rgba(0, 136, 212, 0) 70%),
		repeating-conic-gradient(from 171deg at 50% -18%, rgba(0, 136, 212, 0.13) 0deg 4.5deg, rgba(0, 136, 212, 0) 4.5deg 18deg);
	background:
		radial-gradient(60% 34% at 50% -10%, color-mix(in srgb, var(--tm-primary, #0088d4) 22%, transparent) 0%, transparent 70%),
		repeating-conic-gradient(from 171deg at 50% -18%, color-mix(in srgb, var(--tm-primary, #0088d4) 13%, transparent) 0deg 4.5deg, transparent 4.5deg 18deg);
	-webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.55) 42%, transparent 78%);
	mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.55) 42%, transparent 78%);
	transform-origin: 50% -18%;
}

/* =========================================================================
   BOKEH ("Bokeh") - soft out-of-focus light circles in the theme colours,
   floating dreamily across the page. ::before carries the big blurry glows,
   ::after a layer of smaller, crisper "lens" discs for depth.
   ========================================================================= */
html.fo-bg-decor-bokeh body.with-fancy-shapes::before {
	background:
		radial-gradient(340px 340px at 12% 20%, rgba(0, 136, 212, 0.16) 0%, rgba(0, 136, 212, 0.08) 45%, transparent 70%),
		radial-gradient(230px 230px at 82% 16%, rgba(0, 200, 147, 0.14) 0%, transparent 68%),
		radial-gradient(420px 420px at 88% 78%, rgba(0, 136, 212, 0.11) 0%, rgba(0, 136, 212, 0.05) 48%, transparent 72%),
		radial-gradient(200px 200px at 26% 82%, rgba(255, 101, 0, 0.10) 0%, transparent 66%),
		radial-gradient(150px 150px at 55% 38%, rgba(0, 200, 147, 0.08) 0%, transparent 64%);
	background:
		radial-gradient(340px 340px at 12% 20%, color-mix(in srgb, var(--tm-primary, #0088d4) 16%, transparent) 0%, color-mix(in srgb, var(--tm-primary, #0088d4) 8%, transparent) 45%, transparent 70%),
		radial-gradient(230px 230px at 82% 16%, color-mix(in srgb, var(--tm-secondary, #00c893) 14%, transparent) 0%, transparent 68%),
		radial-gradient(420px 420px at 88% 78%, color-mix(in srgb, var(--tm-primary, #0088d4) 11%, transparent) 0%, color-mix(in srgb, var(--tm-primary, #0088d4) 5%, transparent) 48%, transparent 72%),
		radial-gradient(200px 200px at 26% 82%, color-mix(in srgb, var(--tm-accent, #ff6500) 10%, transparent) 0%, transparent 66%),
		radial-gradient(150px 150px at 55% 38%, color-mix(in srgb, var(--tm-secondary, #00c893) 8%, transparent) 0%, transparent 64%);
}

html.fo-bg-decor-bokeh body.with-fancy-shapes::after {
	background:
		radial-gradient(90px 90px at 34% 30%, rgba(0, 136, 212, 0.12) 0%, rgba(0, 136, 212, 0.12) 62%, transparent 66%),
		radial-gradient(60px 60px at 68% 22%, rgba(0, 200, 147, 0.12) 0%, rgba(0, 200, 147, 0.12) 60%, transparent 65%),
		radial-gradient(120px 120px at 76% 55%, rgba(0, 136, 212, 0.09) 0%, rgba(0, 136, 212, 0.09) 64%, transparent 68%),
		radial-gradient(70px 70px at 16% 58%, rgba(255, 101, 0, 0.09) 0%, rgba(255, 101, 0, 0.09) 58%, transparent 64%),
		radial-gradient(50px 50px at 48% 78%, rgba(0, 200, 147, 0.10) 0%, rgba(0, 200, 147, 0.10) 55%, transparent 62%);
	background:
		radial-gradient(90px 90px at 34% 30%, color-mix(in srgb, var(--tm-primary, #0088d4) 12%, transparent) 0%, color-mix(in srgb, var(--tm-primary, #0088d4) 12%, transparent) 62%, transparent 66%),
		radial-gradient(60px 60px at 68% 22%, color-mix(in srgb, var(--tm-secondary, #00c893) 12%, transparent) 0%, color-mix(in srgb, var(--tm-secondary, #00c893) 12%, transparent) 60%, transparent 65%),
		radial-gradient(120px 120px at 76% 55%, color-mix(in srgb, var(--tm-primary, #0088d4) 9%, transparent) 0%, color-mix(in srgb, var(--tm-primary, #0088d4) 9%, transparent) 64%, transparent 68%),
		radial-gradient(70px 70px at 16% 58%, color-mix(in srgb, var(--tm-accent, #ff6500) 9%, transparent) 0%, color-mix(in srgb, var(--tm-accent, #ff6500) 9%, transparent) 58%, transparent 64%),
		radial-gradient(50px 50px at 48% 78%, color-mix(in srgb, var(--tm-secondary, #00c893) 10%, transparent) 0%, color-mix(in srgb, var(--tm-secondary, #00c893) 10%, transparent) 55%, transparent 62%);
}

/* =========================================================================
   MESH ("Voal gradient") - a silky full-page mesh-gradient veil blending
   the theme's primary / secondary / accent, covering the whole page
   (unlike Aurora, which stays in the corners). The layer is oversized so
   the animated drift never exposes an edge.
   ========================================================================= */
html.fo-bg-decor-mesh body.with-fancy-shapes::before {
	top: -12%;
	right: -12%;
	bottom: -12%;
	left: -12%;
	background:
		radial-gradient(52% 46% at 10% 14%, rgba(0, 136, 212, 0.18) 0%, transparent 62%),
		radial-gradient(48% 52% at 90% 10%, rgba(0, 200, 147, 0.15) 0%, transparent 62%),
		radial-gradient(56% 55% at 86% 86%, rgba(0, 136, 212, 0.12) 0%, transparent 64%),
		radial-gradient(50% 46% at 12% 88%, rgba(255, 101, 0, 0.10) 0%, transparent 60%),
		radial-gradient(64% 58% at 50% 50%, rgba(0, 200, 147, 0.07) 0%, transparent 68%);
	background:
		radial-gradient(52% 46% at 10% 14%, color-mix(in srgb, var(--tm-primary, #0088d4) 18%, transparent) 0%, transparent 62%),
		radial-gradient(48% 52% at 90% 10%, color-mix(in srgb, var(--tm-secondary, #00c893) 15%, transparent) 0%, transparent 62%),
		radial-gradient(56% 55% at 86% 86%, color-mix(in srgb, var(--tm-primary, #0088d4) 12%, transparent) 0%, transparent 64%),
		radial-gradient(50% 46% at 12% 88%, color-mix(in srgb, var(--tm-accent, #ff6500) 10%, transparent) 0%, transparent 60%),
		radial-gradient(64% 58% at 50% 50%, color-mix(in srgb, var(--tm-secondary, #00c893) 7%, transparent) 0%, transparent 68%);
}

/* =========================================================================
   RIBBONS ("Panglici") - elegant curved ribbon bands in the theme gradient,
   flowing across the page. The gradient is painted through one tileable SVG
   mask of three sinuous constant-thickness bands (the fill-opacity carries
   the per-band strength); the mask tiles at 1440px, so the Animated flow
   loops seamlessly.
   ========================================================================= */
html.fo-bg-decor-ribbons body.with-fancy-shapes::before {
	background: linear-gradient(90deg, #0088d4 0%, #00c893 100%);
	background: var(--tm-gradient-default, linear-gradient(90deg, var(--tm-primary, #0088d4) 0%, var(--tm-secondary, #00c893) 100%));
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='none'%3E%3Cpath fill='%23000' fill-opacity='0.20' d='M0,150 C240,90 480,210 720,150 C960,90 1200,210 1440,150 L1440,215 C1200,275 960,155 720,215 C480,275 240,155 0,215 Z'/%3E%3Cpath fill='%23000' fill-opacity='0.14' d='M0,450 C240,510 480,390 720,450 C960,510 1200,390 1440,450 L1440,505 C1200,445 960,565 720,505 C480,445 240,565 0,505 Z'/%3E%3Cpath fill='%23000' fill-opacity='0.10' d='M0,720 C240,660 480,780 720,720 C960,660 1200,780 1440,720 L1440,772 C1200,832 960,712 720,772 C480,832 240,712 0,772 Z'/%3E%3C/svg%3E");
	-webkit-mask-size: 1440px 100%;
	-webkit-mask-position: left top;
	-webkit-mask-repeat: repeat-x;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='none'%3E%3Cpath fill='%23000' fill-opacity='0.20' d='M0,150 C240,90 480,210 720,150 C960,90 1200,210 1440,150 L1440,215 C1200,275 960,155 720,215 C480,275 240,155 0,215 Z'/%3E%3Cpath fill='%23000' fill-opacity='0.14' d='M0,450 C240,510 480,390 720,450 C960,510 1200,390 1440,450 L1440,505 C1200,445 960,565 720,505 C480,445 240,565 0,505 Z'/%3E%3Cpath fill='%23000' fill-opacity='0.10' d='M0,720 C240,660 480,780 720,720 C960,660 1200,780 1440,720 L1440,772 C1200,832 960,712 720,772 C480,832 240,712 0,772 Z'/%3E%3C/svg%3E");
	mask-size: 1440px 100%;
	mask-position: left top;
	mask-repeat: repeat-x;
}

/* =========================================================================
   SPARKLES ("Scantei") - tiny glittering specks in the theme colours,
   scattered like dust caught in the light. Two dot fields with coprime tile
   sizes give a pseudo-random spread; a radial mask keeps the middle of the
   page (where the content lives) quieter than the edges.
   ========================================================================= */
html.fo-bg-decor-sparkles body.with-fancy-shapes::before {
	/* oversized so the animated drift never exposes a viewport edge */
	top: -40px;
	right: -40px;
	bottom: -40px;
	left: -40px;
	background-image:
		radial-gradient(circle at 12px 16px, rgba(0, 136, 212, 0.55) 1px, transparent 1.5px),
		radial-gradient(circle at 40px 60px, rgba(0, 200, 147, 0.50) 1.2px, transparent 1.8px),
		radial-gradient(circle at 90px 30px, rgba(255, 101, 0, 0.45) 1px, transparent 1.5px);
	background-image:
		radial-gradient(circle at 12px 16px, color-mix(in srgb, var(--tm-primary, #0088d4) 55%, transparent) 1px, transparent 1.5px),
		radial-gradient(circle at 40px 60px, color-mix(in srgb, var(--tm-secondary, #00c893) 50%, transparent) 1.2px, transparent 1.8px),
		radial-gradient(circle at 90px 30px, color-mix(in srgb, var(--tm-accent, #ff6500) 45%, transparent) 1px, transparent 1.5px);
	background-size: 110px 110px, 150px 150px, 190px 190px;
	-webkit-mask-image: radial-gradient(120% 90% at 50% 50%, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.55) 55%, #000 100%);
	mask-image: radial-gradient(120% 90% at 50% 50%, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.55) 55%, #000 100%);
}

html.fo-bg-decor-sparkles body.with-fancy-shapes::after {
	/* oversized so the animated drift never exposes a viewport edge */
	top: -40px;
	right: -40px;
	bottom: -40px;
	left: -40px;
	background-image:
		radial-gradient(circle at 30px 40px, rgba(0, 136, 212, 0.8) 1.6px, rgba(0, 136, 212, 0.25) 3px, transparent 5px),
		radial-gradient(circle at 160px 120px, rgba(0, 200, 147, 0.7) 1.6px, rgba(0, 200, 147, 0.22) 3px, transparent 5px),
		radial-gradient(circle at 90px 200px, rgba(255, 101, 0, 0.6) 1.4px, rgba(255, 101, 0, 0.2) 2.6px, transparent 4.6px);
	background-image:
		radial-gradient(circle at 30px 40px, color-mix(in srgb, var(--tm-primary, #0088d4) 80%, transparent) 1.6px, color-mix(in srgb, var(--tm-primary, #0088d4) 25%, transparent) 3px, transparent 5px),
		radial-gradient(circle at 160px 120px, color-mix(in srgb, var(--tm-secondary, #00c893) 70%, transparent) 1.6px, color-mix(in srgb, var(--tm-secondary, #00c893) 22%, transparent) 3px, transparent 5px),
		radial-gradient(circle at 90px 200px, color-mix(in srgb, var(--tm-accent, #ff6500) 60%, transparent) 1.4px, color-mix(in srgb, var(--tm-accent, #ff6500) 20%, transparent) 2.6px, transparent 4.6px);
	background-size: 260px 260px, 300px 300px, 340px 340px;
	-webkit-mask-image: radial-gradient(120% 90% at 50% 50%, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.6) 55%, #000 100%);
	mask-image: radial-gradient(120% 90% at 50% 50%, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.6) 55%, #000 100%);
}

/* =========================================================================
   TOPOGRAPHY ("Topografie") - organic topographic contour "islands" in the
   theme's primary, like a fine map relief. The colour wash (stronger at the
   top, fading toward the bottom) is painted through a tiling SVG mask of
   nested hand-drawn contour rings; the mask tiles at 640px, so the Animated
   pan loops seamlessly.
   ========================================================================= */
html.fo-bg-decor-topography body.with-fancy-shapes::before {
	background: radial-gradient(130% 90% at 50% -5%, rgba(0, 136, 212, 0.32) 0%, rgba(0, 136, 212, 0.14) 45%, transparent 82%);
	background: radial-gradient(130% 90% at 50% -5%, color-mix(in srgb, var(--tm-primary, #0088d4) 32%, transparent) 0%, color-mix(in srgb, var(--tm-primary, #0088d4) 14%, transparent) 45%, transparent 82%);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg fill='none' stroke='%23000'%3E%3Cg transform='translate(300 330)'%3E%3Cpath stroke-width='1.6' d='M-206,-30 C-196,-118 -118,-196 -22,-202 C74,-208 172,-152 198,-62 C224,28 186,132 104,178 C22,224 -98,214 -162,146 C-216,88 -216,58 -206,-30 Z'/%3E%3Cpath stroke-width='2' transform='scale(0.8)' d='M-206,-30 C-196,-118 -118,-196 -22,-202 C74,-208 172,-152 198,-62 C224,28 186,132 104,178 C22,224 -98,214 -162,146 C-216,88 -216,58 -206,-30 Z'/%3E%3Cpath stroke-width='2.6' transform='scale(0.61)' d='M-206,-30 C-196,-118 -118,-196 -22,-202 C74,-208 172,-152 198,-62 C224,28 186,132 104,178 C22,224 -98,214 -162,146 C-216,88 -216,58 -206,-30 Z'/%3E%3Cpath stroke-width='3.6' transform='scale(0.44)' d='M-206,-30 C-196,-118 -118,-196 -22,-202 C74,-208 172,-152 198,-62 C224,28 186,132 104,178 C22,224 -98,214 -162,146 C-216,88 -216,58 -206,-30 Z'/%3E%3Cpath stroke-width='5.5' transform='scale(0.29)' d='M-206,-30 C-196,-118 -118,-196 -22,-202 C74,-208 172,-152 198,-62 C224,28 186,132 104,178 C22,224 -98,214 -162,146 C-216,88 -216,58 -206,-30 Z'/%3E%3Cpath stroke-width='9' transform='scale(0.16)' d='M-206,-30 C-196,-118 -118,-196 -22,-202 C74,-208 172,-152 198,-62 C224,28 186,132 104,178 C22,224 -98,214 -162,146 C-216,88 -216,58 -206,-30 Z'/%3E%3C/g%3E%3Cg transform='translate(78 96) scale(0.22)'%3E%3Cpath stroke-width='7' d='M-206,-30 C-196,-118 -118,-196 -22,-202 C74,-208 172,-152 198,-62 C224,28 186,132 104,178 C22,224 -98,214 -162,146 C-216,88 -216,58 -206,-30 Z'/%3E%3Cpath stroke-width='11' transform='scale(0.6)' d='M-206,-30 C-196,-118 -118,-196 -22,-202 C74,-208 172,-152 198,-62 C224,28 186,132 104,178 C22,224 -98,214 -162,146 C-216,88 -216,58 -206,-30 Z'/%3E%3C/g%3E%3Cg transform='translate(560 560) scale(0.18)'%3E%3Cpath stroke-width='9' d='M-206,-30 C-196,-118 -118,-196 -22,-202 C74,-208 172,-152 198,-62 C224,28 186,132 104,178 C22,224 -98,214 -162,146 C-216,88 -216,58 -206,-30 Z'/%3E%3Cpath stroke-width='14' transform='scale(0.55)' d='M-206,-30 C-196,-118 -118,-196 -22,-202 C74,-208 172,-152 198,-62 C224,28 186,132 104,178 C22,224 -98,214 -162,146 C-216,88 -216,58 -206,-30 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	-webkit-mask-size: 640px 640px;
	-webkit-mask-position: 0 0;
	-webkit-mask-repeat: repeat;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg fill='none' stroke='%23000'%3E%3Cg transform='translate(300 330)'%3E%3Cpath stroke-width='1.6' d='M-206,-30 C-196,-118 -118,-196 -22,-202 C74,-208 172,-152 198,-62 C224,28 186,132 104,178 C22,224 -98,214 -162,146 C-216,88 -216,58 -206,-30 Z'/%3E%3Cpath stroke-width='2' transform='scale(0.8)' d='M-206,-30 C-196,-118 -118,-196 -22,-202 C74,-208 172,-152 198,-62 C224,28 186,132 104,178 C22,224 -98,214 -162,146 C-216,88 -216,58 -206,-30 Z'/%3E%3Cpath stroke-width='2.6' transform='scale(0.61)' d='M-206,-30 C-196,-118 -118,-196 -22,-202 C74,-208 172,-152 198,-62 C224,28 186,132 104,178 C22,224 -98,214 -162,146 C-216,88 -216,58 -206,-30 Z'/%3E%3Cpath stroke-width='3.6' transform='scale(0.44)' d='M-206,-30 C-196,-118 -118,-196 -22,-202 C74,-208 172,-152 198,-62 C224,28 186,132 104,178 C22,224 -98,214 -162,146 C-216,88 -216,58 -206,-30 Z'/%3E%3Cpath stroke-width='5.5' transform='scale(0.29)' d='M-206,-30 C-196,-118 -118,-196 -22,-202 C74,-208 172,-152 198,-62 C224,28 186,132 104,178 C22,224 -98,214 -162,146 C-216,88 -216,58 -206,-30 Z'/%3E%3Cpath stroke-width='9' transform='scale(0.16)' d='M-206,-30 C-196,-118 -118,-196 -22,-202 C74,-208 172,-152 198,-62 C224,28 186,132 104,178 C22,224 -98,214 -162,146 C-216,88 -216,58 -206,-30 Z'/%3E%3C/g%3E%3Cg transform='translate(78 96) scale(0.22)'%3E%3Cpath stroke-width='7' d='M-206,-30 C-196,-118 -118,-196 -22,-202 C74,-208 172,-152 198,-62 C224,28 186,132 104,178 C22,224 -98,214 -162,146 C-216,88 -216,58 -206,-30 Z'/%3E%3Cpath stroke-width='11' transform='scale(0.6)' d='M-206,-30 C-196,-118 -118,-196 -22,-202 C74,-208 172,-152 198,-62 C224,28 186,132 104,178 C22,224 -98,214 -162,146 C-216,88 -216,58 -206,-30 Z'/%3E%3C/g%3E%3Cg transform='translate(560 560) scale(0.18)'%3E%3Cpath stroke-width='9' d='M-206,-30 C-196,-118 -118,-196 -22,-202 C74,-208 172,-152 198,-62 C224,28 186,132 104,178 C22,224 -98,214 -162,146 C-216,88 -216,58 -206,-30 Z'/%3E%3Cpath stroke-width='14' transform='scale(0.55)' d='M-206,-30 C-196,-118 -118,-196 -22,-202 C74,-208 172,-152 198,-62 C224,28 186,132 104,178 C22,224 -98,214 -162,146 C-216,88 -216,58 -206,-30 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	mask-size: 640px 640px;
	mask-position: 0 0;
	mask-repeat: repeat;
}

/* =========================================================================
   MOTION (html.fo-bg-decor-animated) - a very slow, subtle drift, using
   compositor-friendly transforms / seamless tile pans only. Disabled under
   prefers-reduced-motion.
   ========================================================================= */

/* Aurora / blobs: a slow "breathing" drift of the whole glow layer. */
html.fo-bg-decor-animated.fo-bg-decor-aurora body.with-fancy-shapes::before,
html.fo-bg-decor-animated.fo-bg-decor-blobs body.with-fancy-shapes::before {
	animation: tm-bgdecor-breathe 26s ease-in-out infinite alternate;
}

/* The accent blob drifts in counter-phase so the composition feels alive. */
html.fo-bg-decor-animated.fo-bg-decor-blobs body.with-fancy-shapes::after {
	animation: tm-bgdecor-breathe-counter 32s ease-in-out infinite alternate;
}

/* Waves: the two bands flow horizontally in opposite directions (seamless -
   the masks tile at 1440px). */
html.fo-bg-decor-animated.fo-bg-decor-waves body.with-fancy-shapes::before {
	animation: tm-bgdecor-waves-flow 80s linear infinite;
}

/* Dots / grid: an imperceptible diagonal pan (220px is a whole number of
   tiles for both patterns, so the loop is seamless). */
html.fo-bg-decor-animated.fo-bg-decor-dots body.with-fancy-shapes::before,
html.fo-bg-decor-animated.fo-bg-decor-grid body.with-fancy-shapes::before {
	animation: tm-bgdecor-pan 90s linear infinite;
}

/* Rays: the fan sways gently around its above-the-page source. */
html.fo-bg-decor-animated.fo-bg-decor-rays body.with-fancy-shapes::before {
	animation: tm-bgdecor-rays-sway 30s ease-in-out infinite alternate;
}

/* Bokeh: the two disc layers breathe in counter-phase (the same drift the
   aurora / blobs use), so the lights feel alive. */
html.fo-bg-decor-animated.fo-bg-decor-bokeh body.with-fancy-shapes::before {
	animation: tm-bgdecor-breathe 26s ease-in-out infinite alternate;
}

html.fo-bg-decor-animated.fo-bg-decor-bokeh body.with-fancy-shapes::after {
	animation: tm-bgdecor-breathe-counter 32s ease-in-out infinite alternate;
}

/* Mesh: the (oversized) veil slowly leans and swells - the -12% inset keeps
   the corners covered while it drifts. */
html.fo-bg-decor-animated.fo-bg-decor-mesh body.with-fancy-shapes::before {
	animation: tm-bgdecor-mesh-drift 40s ease-in-out infinite alternate;
}

/* Ribbons: the bands flow horizontally (seamless - the mask tiles at 1440px). */
html.fo-bg-decor-animated.fo-bg-decor-ribbons body.with-fancy-shapes::before {
	animation: tm-bgdecor-ribbons-flow 90s linear infinite;
}

/* Sparkles: the fine dust drifts diagonally while the bigger glints twinkle
   (an opacity breath around the intensity knob's own value). */
html.fo-bg-decor-animated.fo-bg-decor-sparkles body.with-fancy-shapes::before {
	animation: tm-bgdecor-sparkles-drift 60s ease-in-out infinite alternate;
}

html.fo-bg-decor-animated.fo-bg-decor-sparkles body.with-fancy-shapes::after {
	animation: tm-bgdecor-sparkles-drift-counter 74s ease-in-out infinite alternate, tm-bgdecor-twinkle 7s ease-in-out infinite;
}

/* Topography: the relief pans diagonally (640px = one whole tile, so the
   loop is seamless). */
html.fo-bg-decor-animated.fo-bg-decor-topography body.with-fancy-shapes::before {
	animation: tm-bgdecor-topo-pan 120s linear infinite;
}

@keyframes tm-bgdecor-breathe {
	from {
		transform: scale(1) translateY(0);
	}

	to {
		transform: scale(1.07) translateY(-1.5%);
	}
}

@keyframes tm-bgdecor-breathe-counter {
	from {
		transform: scale(1.06) translateY(-1%);
	}

	to {
		transform: scale(1) translateY(1%);
	}
}

@keyframes tm-bgdecor-waves-flow {
	from {
		-webkit-mask-position: 0px bottom, 0px top;
		mask-position: 0px bottom, 0px top;
	}

	to {
		-webkit-mask-position: 1440px bottom, -1440px top;
		mask-position: 1440px bottom, -1440px top;
	}
}

@keyframes tm-bgdecor-pan {
	from {
		background-position: 0 0;
	}

	to {
		background-position: 220px 220px;
	}
}

/* The slight scale keeps the rotated (viewport-sized) layer covering the
   corners while it sways. */
@keyframes tm-bgdecor-rays-sway {
	from {
		transform: scale(1.06) rotate(-1.5deg);
	}

	to {
		transform: scale(1.06) rotate(1.5deg);
	}
}

@keyframes tm-bgdecor-mesh-drift {
	from {
		transform: rotate(-1.5deg) scale(1);
	}

	to {
		transform: rotate(1.5deg) scale(1.06);
	}
}

@keyframes tm-bgdecor-ribbons-flow {
	from {
		-webkit-mask-position: 0px top;
		mask-position: 0px top;
	}

	to {
		-webkit-mask-position: 1440px top;
		mask-position: 1440px top;
	}
}

/* The layers drift in opposite diagonals; alternate direction means the pan
   does not need to be seamless. */
@keyframes tm-bgdecor-sparkles-drift {
	from {
		transform: translate(0, 0);
	}

	to {
		transform: translate(-30px, -22px) scale(1.02);
	}
}

@keyframes tm-bgdecor-sparkles-drift-counter {
	from {
		transform: translate(0, 0);
	}

	to {
		transform: translate(26px, 18px) scale(1.03);
	}
}

/* The glints breathe around the intensity knob's own opacity. */
@keyframes tm-bgdecor-twinkle {
	0%, 100% {
		opacity: var(--tm-bgdecor-opacity, 0.8);
	}

	50% {
		opacity: calc(var(--tm-bgdecor-opacity, 0.8) * 0.55);
	}
}

@keyframes tm-bgdecor-topo-pan {
	from {
		-webkit-mask-position: 0px 0px;
		mask-position: 0px 0px;
	}

	to {
		-webkit-mask-position: 640px 640px;
		mask-position: 640px 640px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html[class*="fo-bg-decor-"] body.with-fancy-shapes::before,
	html[class*="fo-bg-decor-"] body.with-fancy-shapes::after {
		animation: none !important;
	}
}

/*Important to leave it 240 so that the carousel pictures align perfectly*/
/* Status revealer ===========================================================================*/
.status-hiliter {
  padding: 10px calc(3 * 10px);
  border-radius: 0 50px 0 50px;
  font-weight: 500;
  background: var(--tm-surface, white);
  cursor: default;
  border: solid 10px #aaa;
  border-top-width: 0;
  border-bottom-width: 0;
  text-align: center;
  transition-duration: 0.2s;
  position: relative;
  z-index: 1;
}

.status-hiliter.success {
  border-color: #a0d497;
}

.status-hiliter.warning {
  border-color: #ffcc6f;
}

.status-hiliter::before {
  content: "";
  z-index: 0;
  border-radius: 0 50px 0 50px;
  top: 0;
  left: 10px;
  bottom: 0;
  right: 10px;
  position: absolute;
  background: none;
  border: solid 5px #aaa;
  border-top-width: 1px;
  border-bottom-width: 1px;
  pointer-events: none;
}

.status-hiliter.success::before {
  border-color: #a0d497;
}

.status-hiliter.warning::before {
  border-color: #ffcc6f;
}

.status-hiliter:hover {
  background: var(--tm-surface-alt, #f4f4f4);
}

.status-hiliter.success:hover {
  background: rgba(141, 222, 137, 0.04);
}

.status-hiliter.warning:hover {
  background: rgba(255, 165, 0, 0.05);
}

.status-hiliter .hilite-msg {
  color: var(--tm-text-muted, #777);
  cursor: default;
  display: inline-block;
  vertical-align: middle;
  font-weight: 600;
}

.status-hiliter.success .hilite-msg {
  color: #5e945e;
}

.status-hiliter.warning .hilite-msg {
  color: #eb8200;
}

.status-hiliter .tm-icon.for-hiliter {
  display: inline-block;
  vertical-align: middle;
  color: var(--tm-text-muted, #777);
}

.status-hiliter.success .tm-icon.for-hiliter {
  color: #5e945e;
}

.status-hiliter.warning .tm-icon.for-hiliter {
  color: #eb8200;
}

/* Radio Buttons   ========================================================================== */
.own-radio-wrapper.inline {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}

.own-radio-wrapper [type=radio]:not(:checked),
.own-radio-wrapper [type=radio]:checked {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.own-radio-wrapper [type=radio]:not(:checked) + span,
.own-radio-wrapper [type=radio]:checked + span {
  position: relative;
  padding-left: 25px;
  cursor: pointer;
  display: inline-block;
  height: 25px;
  line-height: 25px;
  font-size: 1rem;
  -webkit-transition: 0.28s ease;
  transition: 0.28s ease;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.own-radio-wrapper [type=radio] + span:before,
.own-radio-wrapper [type=radio] + span:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  margin: 4px;
  width: 16px;
  height: 16px;
  z-index: 0;
  -webkit-transition: 0.28s ease;
  transition: 0.28s ease;
}

/* Unchecked styles */
.own-radio-wrapper [type=radio]:not(:checked) + span:before,
.own-radio-wrapper [type=radio]:not(:checked) + span:after,
.own-radio-wrapper [type=radio]:checked + span:before,
.own-radio-wrapper [type=radio]:checked + span:after,
.own-radio-wrapper [type=radio].with-gap:checked + span:before,
.own-radio-wrapper [type=radio].with-gap:checked + span:after {
  border-radius: 50%;
}

.own-radio-wrapper [type=radio]:not(:checked) + span:before,
.own-radio-wrapper [type=radio]:not(:checked) + span:after {
  border: 2px solid var(--tm-primary, #0088d4);
}

.own-radio-wrapper [type=radio]:not(:checked) + span:after {
  -webkit-transform: scale(0);
  transform: scale(0);
}

/* Checked styles */
.own-radio-wrapper [type=radio]:checked + span:before {
  border: 2px solid transparent;
}

.own-radio-wrapper [type=radio]:checked + span:after,
.own-radio-wrapper [type=radio].with-gap:checked + span:before,
.own-radio-wrapper [type=radio].with-gap:checked + span:after {
  border: 2px solid var(--tm-primary, #0088d4);
}

.own-radio-wrapper [type=radio]:checked + span:after,
.own-radio-wrapper [type=radio].with-gap:checked + span:after {
  background-color: var(--tm-primary, #0088d4);
}

.own-radio-wrapper [type=radio]:checked + span:after {
  -webkit-transform: scale(1.02);
  transform: scale(1.02);
}

/* Radio With gap */
.own-radio-wrapper [type=radio].with-gap:checked + span:after {
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
}

/* Focused styles */
.own-radio-wrapper [type=radio].tabbed:focus + span:before {
  -webkit-box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Disabled Radio With gap */
.own-radio-wrapper [type=radio].with-gap:disabled:checked + span:before {
  border: 2px solid rgba(0, 0, 0, 0.42);
}

.own-radio-wrapper [type=radio].with-gap:disabled:checked + span:after {
  border: none;
  background-color: rgba(0, 0, 0, 0.42);
}

/* Disabled style */
.own-radio-wrapper [type=radio]:disabled:not(:checked) + span:before,
.own-radio-wrapper [type=radio]:disabled:checked + span:before {
  background-color: transparent;
  border-color: rgba(0, 0, 0, 0.42);
}

.own-radio-wrapper [type=radio]:disabled + span {
  color: rgba(0, 0, 0, 0.42);
}

.own-radio-wrapper [type=radio]:disabled:not(:checked) + span:before {
  border-color: rgba(0, 0, 0, 0.42);
}

.own-radio-wrapper [type=radio]:disabled:checked + span:after {
  background-color: rgba(0, 0, 0, 0.42);
  border-color: #949494;
}

/* Checkboxes
   ========================================================================== */
/* Remove default checkbox */
.own-checkbox-wrapper [type=checkbox]:not(:checked),
.own-checkbox-wrapper [type=checkbox]:checked {
  position: absolute;
  left: -9999px;
  opacity: 0;
}

.own-checkbox-wrapper [type=checkbox] {
  /* checkbox aspect */
}

.own-checkbox-wrapper [type=checkbox] ~ label {
  position: relative;
  padding-left: 28px;
  cursor: pointer;
  display: inline-block;
  /*height: 25px;
  line-height: 25px;*/
  font-size: 1rem;
  -webkit-user-select: none;
  /* webkit (safari, chrome) browsers */
  -moz-user-select: none;
  /* mozilla browsers */
  -khtml-user-select: none;
  /* webkit (konqueror) browsers */
  -ms-user-select: none;
  /* IE10+ */
}

.own-checkbox-wrapper [type=checkbox] ~ label:before,
.own-checkbox-wrapper [type=checkbox]:not(.filled-in) ~ label:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  z-index: 0;
  border: 2px solid var(--tm-primary, #0088d4);
  border-radius: 1px;
  margin-top: 2px;
  transition: 0.2s;
}

.own-checkbox-wrapper [type=checkbox]:not(.filled-in) ~ label:after {
  border: 0;
  -webkit-transform: scale(0);
  transform: scale(0);
}

.own-checkbox-wrapper [type=checkbox]:not(:checked):disabled ~ label:before {
  border: none;
  background-color: rgba(0, 0, 0, 0.26);
}

.own-checkbox-wrapper [type=checkbox].tabbed:focus ~ label:after {
  -webkit-transform: scale(1);
  transform: scale(1);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
  background-color: rgba(0, 0, 0, 0.1);
}

.own-checkbox-wrapper [type=checkbox]:checked ~ label:before {
  top: -4px;
  left: -5px;
  width: 12px;
  height: 20px;
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
  border-right: 2px solid var(--tm-primary, #0088d4);
  border-bottom: 2px solid var(--tm-primary, #0088d4);
  -webkit-transform: rotate(40deg);
  transform: rotate(40deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}

.own-checkbox-wrapper [type=checkbox]:checked:disabled ~ label:before {
  border-right: 2px solid rgba(0, 0, 0, 0.26);
  border-bottom: 2px solid rgba(0, 0, 0, 0.26);
}

/* Indeterminate checkbox */
.own-checkbox-wrapper [type=checkbox]:indeterminate ~ label:before {
  top: -11px;
  left: -12px;
  width: 10px;
  height: 22px;
  border-top: none;
  border-left: none;
  border-right: 2px solid var(--tm-primary, #0088d4);
  border-bottom: none;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}

.own-checkbox-wrapper [type=checkbox]:indeterminate:disabled ~ label:before {
  border-right: 2px solid rgba(0, 0, 0, 0.26);
  background-color: transparent;
}

.own-checkbox-wrapper [type=checkbox].filled-in ~ label:after {
  border-radius: 2px;
}

.own-checkbox-wrapper [type=checkbox].filled-in ~ label:before,
.own-checkbox-wrapper [type=checkbox].filled-in ~ label:after {
  content: "";
  left: 0;
  position: absolute;
  /* .1s delay is for check animation */
  transition: border 0.25s, background-color 0.25s, width 0.2s 0.1s, height 0.2s 0.1s, top 0.2s 0.1s, left 0.2s 0.1s;
  z-index: 1;
}

.own-checkbox-wrapper [type=checkbox].filled-in:not(:checked) ~ label:before {
  width: 0;
  height: 0;
  border: 3px solid transparent;
  left: 6px;
  top: 10px;
  -webkit-transform: rotateZ(37deg);
  transform: rotateZ(37deg);
  -webkit-transform-origin: 20% 40%;
  transform-origin: 100% 100%;
}

.own-checkbox-wrapper [type=checkbox].filled-in:not(:checked) ~ label:after {
  height: 20px;
  width: 20px;
  background-color: transparent;
  border: 2px solid var(--tm-primary, #0088d4);
  top: 0px;
  z-index: 0;
}

.own-checkbox-wrapper [type=checkbox].filled-in:checked ~ label:before {
  top: 0;
  left: 1px;
  width: 8px;
  height: 13px;
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  -webkit-transform: rotateZ(37deg);
  transform: rotateZ(37deg);
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}

.own-checkbox-wrapper [type=checkbox].filled-in:checked ~ label:after {
  top: 0;
  width: 20px;
  height: 20px;
  border: 2px solid var(--tm-primary, #0088d4);
  background-color: var(--tm-primary, #0088d4);
  z-index: 0;
}

.own-checkbox-wrapper [type=checkbox].filled-in.tabbed:focus ~ label:after {
  border-radius: 2px;
  border-color: var(--tm-primary, #0088d4);
  background-color: rgba(0, 0, 0, 0.1);
}

.own-checkbox-wrapper [type=checkbox].filled-in.tabbed:checked:focus ~ label:after {
  border-radius: 2px;
  background-color: var(--tm-primary, #0088d4);
  border-color: var(--tm-primary, #0088d4);
}

.own-checkbox-wrapper [type=checkbox].filled-in:disabled:not(:checked) ~ label:before {
  background-color: transparent;
  border: 2px solid transparent;
}

.own-checkbox-wrapper [type=checkbox].filled-in:disabled:not(:checked) ~ label:after {
  border-color: transparent;
  background-color: #BDBDBD;
}

.own-checkbox-wrapper [type=checkbox].filled-in:disabled:checked ~ label:before {
  background-color: transparent;
}

.own-checkbox-wrapper [type=checkbox].filled-in:disabled:checked ~ label:after {
  background-color: #BDBDBD;
  border-color: #BDBDBD;
}

/* Switch
   ========================================================================== */
.switch,
.switch * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -ms-user-select: none;
}

.switch label {
  cursor: pointer;
}

.switch label input[type=checkbox] {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch label input[type=checkbox]:checked + .lever {
  background-color: #84c7c1;
}

.switch label input[type=checkbox]:checked + .lever:after {
  background-color: var(--tm-primary, #0088d4);
  left: 24px;
}

.switch label .lever {
  content: "";
  display: inline-block;
  position: relative;
  width: 40px;
  height: 15px;
  background-color: #818181;
  border-radius: 15px;
  margin-right: 10px;
  transition: background 0.3s ease;
  vertical-align: middle;
  margin: 0 16px;
}

.switch label .lever:after {
  content: "";
  position: absolute;
  display: inline-block;
  width: 21px;
  height: 21px;
  background-color: #F1F1F1;
  border-radius: 21px;
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
  left: -5px;
  top: -3px;
  transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
}

input[type=checkbox]:checked:not(:disabled) ~ .lever:active::after,
input[type=checkbox]:checked:not(:disabled).tabbed:focus ~ .lever::after {
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(38, 166, 154, 0.1);
}

input[type=checkbox]:not(:disabled) ~ .lever:active:after,
input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever::after {
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.08);
}

.switch input[type=checkbox][disabled] ~ .lever {
  cursor: default;
}

.switch label input[type=checkbox][disabled] ~ .lever:after,
.switch label input[type=checkbox][disabled]:checked ~ .lever:after {
  background-color: #BDBDBD;
}

/*=========================================================================================*/
/*SNIPPETS TAKEN FROM HERE: https://css.30secondsofcode.org/ ==============================*/
/* ------------------------------------------------------------------------------------------
	Shape 'saw teeth' separator (taken from here: https://css.30secondsofcode.org/snippet/shape-separator)
	Usage: <div class="shape-separator"></div>
*/
.shape-separator {
  position: relative;
  height: 48px;
  background: #333;
}

.shape-separator::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='m12 0l12 12h-24z' fill='%23fff'/%3E%3C/svg%3E");
  position: absolute;
  width: 100%;
  height: 12px;
  bottom: 0;
}

/* ------------------------------------------------------------------------------------------
	Gradient text (taken from here: https://css.30secondsofcode.org/snippet/gradient-text)
	Usage: <p class="gradient-text">Gradient text</p>
*/
.gradient-text {
  background: -webkit-linear-gradient(pink, red);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

/* ------------------------------------------------------------------------------------------
	Pulse/ripple loader (taken from here: https://css.30secondsofcode.org/snippet/pulse-loader)
	Usage: 
	<div class="ripple-loader">
	  <div class="circle"></div>
	  <div class="circle"></div>
	  <div class="circle"></div>
	  <div class="circle"></div>
	</div>
*/
.ripple-loader {
  position: relative;
  width: 70px;
  height: 70px;
}

.ripple-loader div.circle {
  position: absolute;
  border: 3px solid #f50;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  border-radius: 50%;
  animation: ripple-loader 2s ease-out infinite;
}

.ripple-loader div.circle:nth-child(2) {
  animation-delay: -0.2s;
}

.ripple-loader div.circle:nth-child(3) {
  animation-delay: -0.4s;
}

.ripple-loader div.circle:nth-child(4) {
  animation-delay: -0.6s;
}

@keyframes ripple-loader {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    width: 70px;
    height: 70px;
    opacity: 0;
    border-color: transparent;
  }
}
/* ----------------------------------------------------------
	Bouncing loader (taked from here: https://www.30secondsofcode.org/css/s/bouncing-loader/)
	Usage: 
	<div class="bouncing-loader">
	  <div></div>
	  <div></div>
	  <div></div>
	</div>
*/
@keyframes bouncing-loader {
  to {
    opacity: 0.1;
    transform: translate3d(0, -1rem, 0);
  }
}
.bouncing-loader {
  display: flex;
  justify-content: center;
}

.bouncing-loader > div {
  width: 1rem;
  height: 1rem;
  margin: 3rem 0.2rem;
  background: #8385aa;
  border-radius: 50%;
  animation: bouncing-loader 0.6s infinite alternate;
}

.bouncing-loader > div:nth-child(2) {
  animation-delay: 0.2s;
}

.bouncing-loader > div:nth-child(3) {
  animation-delay: 0.4s;
}

/*=========================================================================================*/
/*Rating (read only) ======================================================================*/
.score {
  text-align: left;
  display: inline-block;
  vertical-align: middle;
  font-size: 0;
  overflow: hidden;
}

.score-wrap {
  display: inline-block;
  position: relative;
}

.score .stars-active {
  color: gold;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-text-stroke: initial;
  z-index: 2;
  white-space: nowrap;
  overflow: hidden;
  /*position: relative;
  z-index: 10;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;*/
}

.score .stars-inactive {
  position: relative;
  -webkit-text-stroke: initial;
  white-space: nowrap;
}

.score .fa-star {
  font-size: 13px;
}

.score .stars-inactive .fa-star {
  color: #bababa;
}

/*=========================================================================================*/
/*Fancy buttons/commands ==================================================================*/
/* DEFAULT (elegant) action-button look - the "Acceseaza cosul" style applied to every
   .tm-fancy-command. The classic bubble animation is opt-in per shop for PRODUCT buttons only
   (html.fo-product-buttons-animated, further below); the .icon-bg bubbles stay in the markup but
   are hidden here. */
.tm-fancy-command {
  position: relative;
  border: none;
  outline: none;
  background: linear-gradient(90deg, var(--tm-primary-dark, #006197) 0%, var(--tm-primary, #0088d4) 100%);
  color: white !important;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: calc(1 * 10px) calc(2 * 10px);
  border-radius: 5px;
  overflow: hidden;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, filter 0.2s ease-out;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(0.6 * 10px);
  vertical-align: middle;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.tm-fancy-command::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--tm-primary, #0088d4) 0%, var(--tm-secondary-dark, #009970) 100%);
  transition: left 0.4s ease-out;
  z-index: 0;
  pointer-events: none;
}

.tm-fancy-command:focus,
.tm-fancy-command:active {
  outline: none;
}

.tm-fancy-command:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

.tm-fancy-command:hover::before {
  left: 0;
}

.tm-fancy-command.large {
  padding: calc(0.9 * 10px) calc(3 * 10px);
  font-size: 18px;
}

.tm-fancy-command.outline {
  background: var(--tm-surface, white);
  border: solid 1px var(--tm-primary, #0088d4);
  color: var(--tm-primary, #0088d4) !important;
  box-shadow: none;
}

.tm-fancy-command.outline::before {
  display: none;
}

.tm-fancy-command.outline:hover {
  background: rgba(135, 212, 255, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

.tm-fancy-command.outline.large {
  padding: calc(0.9 * 10px - 1px) calc(3 * 10px - 1px);
}

.tm-fancy-command .icon-bg,
.tm-fancy-command .icon-bg2 {
  background: var(--tm-accent, #ff6500);
  color: white;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  position: absolute;
  top: -33px;
  left: -36px;
  border-radius: 50%;
  font-size: 18px;
  pointer-events: none;
  transition-duration: 0.2s;
  transform-origin: 0;
  z-index: 0;
  display: none;
}

.tm-fancy-command .icon-bg2 {
  background: var(--tm-secondary-dark, #009970);
  top: -120px;
  left: -32px;
}

.tm-fancy-command .command-text {
  position: relative;
  z-index: 2;
}

.tm-fancy-command.outline .command-text {
  color: var(--tm-primary, #0088d4);
  text-shadow: none;
  font-weight: normal;
}

.tm-fancy-command .tm-icon {
  position: relative;
  z-index: 2;
  transition-duration: 0.2s;
}

.tm-fancy-command.outline .tm-icon {
  color: var(--tm-primary, #0088d4);
}

.tm-fancy-command:hover .icon-bg {
  transform: scale(7);
}

.tm-fancy-command.large:hover .icon-bg {
  transform: scale(10);
}

.tm-fancy-command:hover .icon-bg2 {
  top: -32px;
  left: -32px;
}

.tm-fancy-command.large:hover .icon-bg2 {
  top: -34px;
  left: -36px;
}

.tm-fancy-command[disabled] {
  opacity: 0.5 !important;
  color: #e5e5e5 !important;
  transition-duration: 0;
  cursor: not-allowed;
}

.tm-fancy-command[disabled] .icon-bg,
.tm-fancy-command[disabled] .icon-bg2 {
  background: #bababa;
  transition-duration: 0;
}

/*fancy-control-type-1*/
.fancy-control-type-1 {
  display: inline-block;
  vertical-align: middle;
  width: auto;
  line-height: 26px;
  text-align: center;
  font-size: 14px;
  padding: calc(10px / 4) calc(2 * 10px);
  margin-left: 10px;
  border: none;
  outline: none;
  border-radius: 30px;
  transition-duration: 0.2s;
  /*color: white;
  background: $light-blue;*/
  background: none;
  color: #0088d4;
  opacity: 0.75;
  cursor: pointer;
}
.fancy-control-type-1:hover, .fancy-control-type-1:active, .fancy-control-type-1:focus {
  opacity: 1;
  transform: scale(1.1);
  background: #0088d4;
  color: white;
}

/*===========================================================================================*/
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .tm-fancy-command {
    padding: calc(1 * 10px) calc(2.5 * 10px);
  }
}

/* ============================================================================================
   Product action buttons - "Animated" opt-in (classic expanding-bubble effect).
   Active only under html.fo-product-buttons-animated (BO -> Tema interfata -> Stil butoane).
   Restores the legacy bubble look for the product-card buttons, the product-detail main CTA and
   the course subscribe button; the bubble scale-on-hover rules above apply once shown again.
   ============================================================================================ */
html.fo-product-buttons-animated .tm-fancy-command.add-to-cart-command,
html.fo-product-buttons-animated .tm-fancy-command.go-to-product-details-command,
html.fo-product-buttons-animated .tm-fancy-command.make-a-reservation-product-command,
html.fo-product-buttons-animated .tm-fancy-command.subscribe-to-course-command,
html.fo-product-buttons-animated .tm-fancy-command.subscribe-to-course-command-by-tax {
  display: inline-block;
  text-align: center;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
  box-shadow: none;
  padding: calc(1 * 10px) calc(0.75 * 10px) calc(1 * 10px) calc(4.5 * 10px);
}

html.fo-product-buttons-animated .tm-fancy-command.add-to-cart-command::before,
html.fo-product-buttons-animated .tm-fancy-command.go-to-product-details-command::before,
html.fo-product-buttons-animated .tm-fancy-command.make-a-reservation-product-command::before,
html.fo-product-buttons-animated .tm-fancy-command.subscribe-to-course-command::before,
html.fo-product-buttons-animated .tm-fancy-command.subscribe-to-course-command-by-tax::before {
  display: none;
}

html.fo-product-buttons-animated .tm-fancy-command.add-to-cart-command:hover,
html.fo-product-buttons-animated .tm-fancy-command.go-to-product-details-command:hover,
html.fo-product-buttons-animated .tm-fancy-command.make-a-reservation-product-command:hover,
html.fo-product-buttons-animated .tm-fancy-command.subscribe-to-course-command:hover,
html.fo-product-buttons-animated .tm-fancy-command.subscribe-to-course-command-by-tax:hover {
  transform: none;
  box-shadow: none;
}

html.fo-product-buttons-animated .tm-fancy-command.add-to-cart-command .icon-bg,
html.fo-product-buttons-animated .tm-fancy-command.add-to-cart-command .icon-bg2,
html.fo-product-buttons-animated .tm-fancy-command.go-to-product-details-command .icon-bg,
html.fo-product-buttons-animated .tm-fancy-command.go-to-product-details-command .icon-bg2,
html.fo-product-buttons-animated .tm-fancy-command.make-a-reservation-product-command .icon-bg,
html.fo-product-buttons-animated .tm-fancy-command.make-a-reservation-product-command .icon-bg2,
html.fo-product-buttons-animated .tm-fancy-command.subscribe-to-course-command .icon-bg,
html.fo-product-buttons-animated .tm-fancy-command.subscribe-to-course-command .icon-bg2,
html.fo-product-buttons-animated .tm-fancy-command.subscribe-to-course-command-by-tax .icon-bg,
html.fo-product-buttons-animated .tm-fancy-command.subscribe-to-course-command-by-tax .icon-bg2 {
  display: block;
}

html.fo-product-buttons-animated .tm-fancy-command.add-to-cart-command .tm-icon,
html.fo-product-buttons-animated .tm-fancy-command.go-to-product-details-command .tm-icon,
html.fo-product-buttons-animated .tm-fancy-command.make-a-reservation-product-command .tm-icon,
html.fo-product-buttons-animated .tm-fancy-command.subscribe-to-course-command .tm-icon,
html.fo-product-buttons-animated .tm-fancy-command.subscribe-to-course-command-by-tax .tm-icon {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  z-index: 1;
}

html.fo-product-buttons-animated .tm-fancy-command.add-to-cart-command.large,
html.fo-product-buttons-animated .tm-fancy-command.make-a-reservation-product-command.large,
html.fo-product-buttons-animated .tm-fancy-command.subscribe-to-course-command.large {
  padding: calc(3 * 10px / 4) calc(3 * 10px) calc(3 * 10px / 4) calc(6 * 10px);
}

@media (min-width: 576px) {
  html.fo-product-buttons-animated .tm-fancy-command.add-to-cart-command,
  html.fo-product-buttons-animated .tm-fancy-command.go-to-product-details-command,
  html.fo-product-buttons-animated .tm-fancy-command.make-a-reservation-product-command,
  html.fo-product-buttons-animated .tm-fancy-command.subscribe-to-course-command,
  html.fo-product-buttons-animated .tm-fancy-command.subscribe-to-course-command-by-tax {
    padding: calc(1 * 10px) calc(2 * 10px) calc(1 * 10px) calc(5 * 10px);
  }
}

/* Product-button styles (BO -> Tema interfata -> "Stil butoane produse") - the extra
   looks beyond Elegant/Animat, each activated by html.fo-product-buttons-<style> and
   scoped to the SAME product-action buttons as the Animated opt-in. Authored as plain
   CSS (no Sass vars) so the .scss/.css blocks are value-identical; every colour reads a
   --tm-* token so the button follows the selected FO theme. Icon (.tm-icon) + label
   (.command-text) are always kept and styled. Each style declares its OWN transition
   covering every property it animates (the base .tm-fancy-command only eases transform/
   box-shadow/filter), so nothing snaps on hover. Halo registers --tm-halo-angle and spins
   a masked conic ring; browsers without @property show a static ring, reduced-motion stops it. */

@property --tm-halo-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@keyframes tm-halo-spin {
  to { --tm-halo-angle: 360deg; }
}

/* Sticla - frosted translucent button (theme tint + strong backdrop blur + bright rim + a fixed diagonal gloss), glow on hover; all transitions organic. */
html.fo-product-buttons-glass .tm-fancy-command.add-to-cart-command,
html.fo-product-buttons-glass .tm-fancy-command.go-to-product-details-command,
html.fo-product-buttons-glass .tm-fancy-command.make-a-reservation-product-command,
html.fo-product-buttons-glass .tm-fancy-command.subscribe-to-course-command,
html.fo-product-buttons-glass .tm-fancy-command.subscribe-to-course-command-by-tax {
  background: rgba(0, 136, 212, 0.28);
  background: color-mix(in srgb, var(--tm-primary, #0088d4) 30%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border: 1px solid color-mix(in srgb, var(--tm-primary, #0088d4) 55%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: 0 8px 22px -8px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: background 0.45s cubic-bezier(0.2, 0.8, 0.3, 1), border-color 0.45s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.45s cubic-bezier(0.2, 0.8, 0.3, 1), transform 0.45s cubic-bezier(0.2, 0.8, 0.3, 1);
}

html.fo-product-buttons-glass .tm-fancy-command.add-to-cart-command::before,
html.fo-product-buttons-glass .tm-fancy-command.go-to-product-details-command::before,
html.fo-product-buttons-glass .tm-fancy-command.make-a-reservation-product-command::before,
html.fo-product-buttons-glass .tm-fancy-command.subscribe-to-course-command::before,
html.fo-product-buttons-glass .tm-fancy-command.subscribe-to-course-command-by-tax::before {
  left: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 26%, transparent 52%);
  transition: none;
}

html.fo-product-buttons-glass .tm-fancy-command.add-to-cart-command:hover,
html.fo-product-buttons-glass .tm-fancy-command.go-to-product-details-command:hover,
html.fo-product-buttons-glass .tm-fancy-command.make-a-reservation-product-command:hover,
html.fo-product-buttons-glass .tm-fancy-command.subscribe-to-course-command:hover,
html.fo-product-buttons-glass .tm-fancy-command.subscribe-to-course-command-by-tax:hover {
  background: rgba(0, 136, 212, 0.44);
  background: color-mix(in srgb, var(--tm-primary, #0088d4) 44%, transparent);
  transform: translateY(-3px);
  box-shadow: 0 14px 32px -8px rgba(0, 0, 0, 0.32), 0 8px 24px -6px rgba(0, 136, 212, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.75);
  box-shadow: 0 14px 32px -8px rgba(0, 0, 0, 0.32), 0 8px 24px -6px color-mix(in srgb, var(--tm-primary, #0088d4) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

/* Neon - deep-dark button with a theme-coloured glowing outline/label; the glow flares smoothly on hover. */
html.fo-product-buttons-neon .tm-fancy-command.add-to-cart-command,
html.fo-product-buttons-neon .tm-fancy-command.go-to-product-details-command,
html.fo-product-buttons-neon .tm-fancy-command.make-a-reservation-product-command,
html.fo-product-buttons-neon .tm-fancy-command.subscribe-to-course-command,
html.fo-product-buttons-neon .tm-fancy-command.subscribe-to-course-command-by-tax {
  background: #14161e;
  border: 1px solid var(--tm-primary, #0088d4);
  color: var(--tm-primary, #0088d4) !important;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  text-shadow: 0 0 8px rgba(0, 136, 212, 0.7);
  text-shadow: 0 0 8px color-mix(in srgb, var(--tm-primary, #0088d4) 75%, transparent);
  box-shadow: 0 0 0 1px rgba(0, 136, 212, 0.35), 0 0 14px rgba(0, 136, 212, 0.5), inset 0 0 10px rgba(0, 136, 212, 0.18);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tm-primary, #0088d4) 40%, transparent), 0 0 14px color-mix(in srgb, var(--tm-primary, #0088d4) 55%, transparent), inset 0 0 10px color-mix(in srgb, var(--tm-primary, #0088d4) 20%, transparent);
  transition: box-shadow 0.45s cubic-bezier(0.2, 0.8, 0.3, 1), text-shadow 0.45s cubic-bezier(0.2, 0.8, 0.3, 1), transform 0.45s cubic-bezier(0.2, 0.8, 0.3, 1);
}

html.fo-product-buttons-neon .tm-fancy-command.add-to-cart-command::before,
html.fo-product-buttons-neon .tm-fancy-command.go-to-product-details-command::before,
html.fo-product-buttons-neon .tm-fancy-command.make-a-reservation-product-command::before,
html.fo-product-buttons-neon .tm-fancy-command.subscribe-to-course-command::before,
html.fo-product-buttons-neon .tm-fancy-command.subscribe-to-course-command-by-tax::before {
  display: none;
}

html.fo-product-buttons-neon .tm-fancy-command.add-to-cart-command .tm-icon,
html.fo-product-buttons-neon .tm-fancy-command.go-to-product-details-command .tm-icon,
html.fo-product-buttons-neon .tm-fancy-command.make-a-reservation-product-command .tm-icon,
html.fo-product-buttons-neon .tm-fancy-command.subscribe-to-course-command .tm-icon,
html.fo-product-buttons-neon .tm-fancy-command.subscribe-to-course-command-by-tax .tm-icon {
  color: var(--tm-primary, #0088d4);
}

html.fo-product-buttons-neon .tm-fancy-command.add-to-cart-command:hover,
html.fo-product-buttons-neon .tm-fancy-command.go-to-product-details-command:hover,
html.fo-product-buttons-neon .tm-fancy-command.make-a-reservation-product-command:hover,
html.fo-product-buttons-neon .tm-fancy-command.subscribe-to-course-command:hover,
html.fo-product-buttons-neon .tm-fancy-command.subscribe-to-course-command-by-tax:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(0, 136, 212, 0.6), 0 0 22px rgba(0, 136, 212, 0.75), 0 0 42px rgba(0, 136, 212, 0.4), inset 0 0 14px rgba(0, 136, 212, 0.3);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tm-primary, #0088d4) 60%, transparent), 0 0 22px color-mix(in srgb, var(--tm-primary, #0088d4) 75%, transparent), 0 0 42px color-mix(in srgb, var(--tm-primary, #0088d4) 40%, transparent), inset 0 0 14px color-mix(in srgb, var(--tm-primary, #0088d4) 30%, transparent);
}

/* Contur - ghost outline (theme border + label); the theme-gradient sweep slides in and the label fades white on hover. */
html.fo-product-buttons-outline .tm-fancy-command.add-to-cart-command,
html.fo-product-buttons-outline .tm-fancy-command.go-to-product-details-command,
html.fo-product-buttons-outline .tm-fancy-command.make-a-reservation-product-command,
html.fo-product-buttons-outline .tm-fancy-command.subscribe-to-course-command,
html.fo-product-buttons-outline .tm-fancy-command.subscribe-to-course-command-by-tax {
  background: transparent;
  border: 1.5px solid var(--tm-primary, #0088d4);
  color: var(--tm-primary, #0088d4) !important;
  box-shadow: none;
  text-shadow: none;
  transition: color 0.45s ease, border-color 0.45s ease, box-shadow 0.45s cubic-bezier(0.2, 0.8, 0.3, 1), transform 0.45s cubic-bezier(0.2, 0.8, 0.3, 1);
}

html.fo-product-buttons-outline .tm-fancy-command.add-to-cart-command::before,
html.fo-product-buttons-outline .tm-fancy-command.go-to-product-details-command::before,
html.fo-product-buttons-outline .tm-fancy-command.make-a-reservation-product-command::before,
html.fo-product-buttons-outline .tm-fancy-command.subscribe-to-course-command::before,
html.fo-product-buttons-outline .tm-fancy-command.subscribe-to-course-command-by-tax::before {
  transition: left 0.5s cubic-bezier(0.2, 0.8, 0.3, 1);
}

html.fo-product-buttons-outline .tm-fancy-command.add-to-cart-command .tm-icon,
html.fo-product-buttons-outline .tm-fancy-command.go-to-product-details-command .tm-icon,
html.fo-product-buttons-outline .tm-fancy-command.make-a-reservation-product-command .tm-icon,
html.fo-product-buttons-outline .tm-fancy-command.subscribe-to-course-command .tm-icon,
html.fo-product-buttons-outline .tm-fancy-command.subscribe-to-course-command-by-tax .tm-icon {
  color: var(--tm-primary, #0088d4);
  transition: color 0.45s ease;
}

html.fo-product-buttons-outline .tm-fancy-command.add-to-cart-command .command-text,
html.fo-product-buttons-outline .tm-fancy-command.go-to-product-details-command .command-text,
html.fo-product-buttons-outline .tm-fancy-command.make-a-reservation-product-command .command-text,
html.fo-product-buttons-outline .tm-fancy-command.subscribe-to-course-command .command-text,
html.fo-product-buttons-outline .tm-fancy-command.subscribe-to-course-command-by-tax .command-text {
  transition: color 0.45s ease;
}

html.fo-product-buttons-outline .tm-fancy-command.add-to-cart-command:hover,
html.fo-product-buttons-outline .tm-fancy-command.go-to-product-details-command:hover,
html.fo-product-buttons-outline .tm-fancy-command.make-a-reservation-product-command:hover,
html.fo-product-buttons-outline .tm-fancy-command.subscribe-to-course-command:hover,
html.fo-product-buttons-outline .tm-fancy-command.subscribe-to-course-command-by-tax:hover {
  color: #fff !important;
  transform: translateY(-3px);
  box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.22);
}

html.fo-product-buttons-outline .tm-fancy-command.add-to-cart-command:hover .tm-icon,
html.fo-product-buttons-outline .tm-fancy-command.go-to-product-details-command:hover .tm-icon,
html.fo-product-buttons-outline .tm-fancy-command.make-a-reservation-product-command:hover .tm-icon,
html.fo-product-buttons-outline .tm-fancy-command.subscribe-to-course-command:hover .tm-icon,
html.fo-product-buttons-outline .tm-fancy-command.subscribe-to-course-command-by-tax:hover .tm-icon {
  color: #fff;
}

html.fo-product-buttons-outline .tm-fancy-command.add-to-cart-command:hover .command-text,
html.fo-product-buttons-outline .tm-fancy-command.go-to-product-details-command:hover .command-text,
html.fo-product-buttons-outline .tm-fancy-command.make-a-reservation-product-command:hover .command-text,
html.fo-product-buttons-outline .tm-fancy-command.subscribe-to-course-command:hover .command-text,
html.fo-product-buttons-outline .tm-fancy-command.subscribe-to-course-command-by-tax:hover .command-text {
  color: #fff;
}

/* Relief 3D - solid theme button with a primary-dark bottom edge; it presses down on click. */
html.fo-product-buttons-relief .tm-fancy-command.add-to-cart-command,
html.fo-product-buttons-relief .tm-fancy-command.go-to-product-details-command,
html.fo-product-buttons-relief .tm-fancy-command.make-a-reservation-product-command,
html.fo-product-buttons-relief .tm-fancy-command.subscribe-to-course-command,
html.fo-product-buttons-relief .tm-fancy-command.subscribe-to-course-command-by-tax {
  background: var(--tm-primary, #0088d4);
  color: #fff !important;
  border: none;
  box-shadow: 0 5px 0 var(--tm-primary-dark, #006197), 0 8px 14px -4px rgba(0, 0, 0, 0.35);
  transform: translateY(0);
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.2s cubic-bezier(0.2, 0.8, 0.3, 1);
}

html.fo-product-buttons-relief .tm-fancy-command.add-to-cart-command::before,
html.fo-product-buttons-relief .tm-fancy-command.go-to-product-details-command::before,
html.fo-product-buttons-relief .tm-fancy-command.make-a-reservation-product-command::before,
html.fo-product-buttons-relief .tm-fancy-command.subscribe-to-course-command::before,
html.fo-product-buttons-relief .tm-fancy-command.subscribe-to-course-command-by-tax::before {
  display: none;
}

html.fo-product-buttons-relief .tm-fancy-command.add-to-cart-command:hover,
html.fo-product-buttons-relief .tm-fancy-command.go-to-product-details-command:hover,
html.fo-product-buttons-relief .tm-fancy-command.make-a-reservation-product-command:hover,
html.fo-product-buttons-relief .tm-fancy-command.subscribe-to-course-command:hover,
html.fo-product-buttons-relief .tm-fancy-command.subscribe-to-course-command-by-tax:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 0 var(--tm-primary-dark, #006197), 0 13px 22px -4px rgba(0, 0, 0, 0.4);
}

html.fo-product-buttons-relief .tm-fancy-command.add-to-cart-command:active,
html.fo-product-buttons-relief .tm-fancy-command.go-to-product-details-command:active,
html.fo-product-buttons-relief .tm-fancy-command.make-a-reservation-product-command:active,
html.fo-product-buttons-relief .tm-fancy-command.subscribe-to-course-command:active,
html.fo-product-buttons-relief .tm-fancy-command.subscribe-to-course-command-by-tax:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 var(--tm-primary-dark, #006197), 0 4px 8px -3px rgba(0, 0, 0, 0.3);
}

/* Capsula - pill on the theme surface with the icon in a small theme-coloured circular chip beside the label. */
html.fo-product-buttons-capsule .tm-fancy-command.add-to-cart-command,
html.fo-product-buttons-capsule .tm-fancy-command.go-to-product-details-command,
html.fo-product-buttons-capsule .tm-fancy-command.make-a-reservation-product-command,
html.fo-product-buttons-capsule .tm-fancy-command.subscribe-to-course-command,
html.fo-product-buttons-capsule .tm-fancy-command.subscribe-to-course-command-by-tax {
  background: var(--tm-surface, #fff);
  color: var(--tm-text, #2c3038) !important;
  border: 1px solid rgba(0, 136, 212, 0.28);
  border: 1px solid color-mix(in srgb, var(--tm-primary, #0088d4) 28%, transparent);
  border-radius: 999px;
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.18);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 600;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s cubic-bezier(0.2, 0.8, 0.3, 1);
}

html.fo-product-buttons-capsule .tm-fancy-command.add-to-cart-command::before,
html.fo-product-buttons-capsule .tm-fancy-command.go-to-product-details-command::before,
html.fo-product-buttons-capsule .tm-fancy-command.make-a-reservation-product-command::before,
html.fo-product-buttons-capsule .tm-fancy-command.subscribe-to-course-command::before,
html.fo-product-buttons-capsule .tm-fancy-command.subscribe-to-course-command-by-tax::before {
  display: none;
}

html.fo-product-buttons-capsule .tm-fancy-command.add-to-cart-command .tm-icon,
html.fo-product-buttons-capsule .tm-fancy-command.go-to-product-details-command .tm-icon,
html.fo-product-buttons-capsule .tm-fancy-command.make-a-reservation-product-command .tm-icon,
html.fo-product-buttons-capsule .tm-fancy-command.subscribe-to-course-command .tm-icon,
html.fo-product-buttons-capsule .tm-fancy-command.subscribe-to-course-command-by-tax .tm-icon {
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  padding: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
  color: #fff;
  background: linear-gradient(135deg, var(--tm-primary, #0088d4), var(--tm-primary-dark, #006197));
  box-shadow: 0 2px 6px rgba(0, 136, 212, 0.45);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--tm-primary, #0088d4) 45%, transparent);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1);
}

html.fo-product-buttons-capsule .tm-fancy-command.add-to-cart-command .command-text,
html.fo-product-buttons-capsule .tm-fancy-command.go-to-product-details-command .command-text,
html.fo-product-buttons-capsule .tm-fancy-command.make-a-reservation-product-command .command-text,
html.fo-product-buttons-capsule .tm-fancy-command.subscribe-to-course-command .command-text,
html.fo-product-buttons-capsule .tm-fancy-command.subscribe-to-course-command-by-tax .command-text {
  color: var(--tm-text, #2c3038);
}

html.fo-product-buttons-capsule .tm-fancy-command.add-to-cart-command:hover,
html.fo-product-buttons-capsule .tm-fancy-command.go-to-product-details-command:hover,
html.fo-product-buttons-capsule .tm-fancy-command.make-a-reservation-product-command:hover,
html.fo-product-buttons-capsule .tm-fancy-command.subscribe-to-course-command:hover,
html.fo-product-buttons-capsule .tm-fancy-command.subscribe-to-course-command-by-tax:hover {
  transform: translateY(-2px);
  border-color: var(--tm-primary, #0088d4);
  box-shadow: 0 9px 22px -6px rgba(0, 136, 212, 0.38);
  box-shadow: 0 9px 22px -6px color-mix(in srgb, var(--tm-primary, #0088d4) 38%, transparent);
}

html.fo-product-buttons-capsule .tm-fancy-command.add-to-cart-command:hover .tm-icon,
html.fo-product-buttons-capsule .tm-fancy-command.go-to-product-details-command:hover .tm-icon,
html.fo-product-buttons-capsule .tm-fancy-command.make-a-reservation-product-command:hover .tm-icon,
html.fo-product-buttons-capsule .tm-fancy-command.subscribe-to-course-command:hover .tm-icon,
html.fo-product-buttons-capsule .tm-fancy-command.subscribe-to-course-command-by-tax:hover .tm-icon {
  transform: scale(1.1);
}

/* Degrade - a smooth theme-gradient fill (primary -> secondary) whose position shifts + lifts with a soft glow on hover. */
html.fo-product-buttons-gradient .tm-fancy-command.add-to-cart-command,
html.fo-product-buttons-gradient .tm-fancy-command.go-to-product-details-command,
html.fo-product-buttons-gradient .tm-fancy-command.make-a-reservation-product-command,
html.fo-product-buttons-gradient .tm-fancy-command.subscribe-to-course-command,
html.fo-product-buttons-gradient .tm-fancy-command.subscribe-to-course-command-by-tax {
  background: linear-gradient(135deg, #0088d4, #00c893);
  background: linear-gradient(135deg, var(--tm-primary, #0088d4), var(--tm-secondary, #00c893));
  background-size: 160% 160%;
  background-position: 0% 50%;
  color: #fff !important;
  border: none;
  box-shadow: 0 6px 18px -6px rgba(0, 136, 212, 0.5);
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--tm-primary, #0088d4) 50%, transparent);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  transition: background-position 0.6s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.45s cubic-bezier(0.2, 0.8, 0.3, 1), transform 0.45s cubic-bezier(0.2, 0.8, 0.3, 1);
}

html.fo-product-buttons-gradient .tm-fancy-command.add-to-cart-command::before,
html.fo-product-buttons-gradient .tm-fancy-command.go-to-product-details-command::before,
html.fo-product-buttons-gradient .tm-fancy-command.make-a-reservation-product-command::before,
html.fo-product-buttons-gradient .tm-fancy-command.subscribe-to-course-command::before,
html.fo-product-buttons-gradient .tm-fancy-command.subscribe-to-course-command-by-tax::before {
  display: none;
}

html.fo-product-buttons-gradient .tm-fancy-command.add-to-cart-command:hover,
html.fo-product-buttons-gradient .tm-fancy-command.go-to-product-details-command:hover,
html.fo-product-buttons-gradient .tm-fancy-command.make-a-reservation-product-command:hover,
html.fo-product-buttons-gradient .tm-fancy-command.subscribe-to-course-command:hover,
html.fo-product-buttons-gradient .tm-fancy-command.subscribe-to-course-command-by-tax:hover {
  background-position: 100% 50%;
  transform: translateY(-3px);
  box-shadow: 0 13px 30px -6px rgba(0, 136, 212, 0.6);
  box-shadow: 0 13px 30px -6px color-mix(in srgb, var(--tm-primary, #0088d4) 60%, transparent);
}

/* Soft (neumorphic) - a soft-extruded pill on the theme surface with dual light/dark shadows; presses IN on click. */
html.fo-product-buttons-soft .tm-fancy-command.add-to-cart-command,
html.fo-product-buttons-soft .tm-fancy-command.go-to-product-details-command,
html.fo-product-buttons-soft .tm-fancy-command.make-a-reservation-product-command,
html.fo-product-buttons-soft .tm-fancy-command.subscribe-to-course-command,
html.fo-product-buttons-soft .tm-fancy-command.subscribe-to-course-command-by-tax {
  background: var(--tm-surface, #eef1f5);
  color: var(--tm-primary, #0088d4) !important;
  border: none;
  box-shadow: 6px 6px 13px rgba(0, 0, 0, 0.13), -6px -6px 13px rgba(255, 255, 255, 0.55);
  text-shadow: none;
  transition: box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.3, 1), transform 0.2s cubic-bezier(0.2, 0.8, 0.3, 1), color 0.3s ease;
}

html.fo-product-buttons-soft .tm-fancy-command.add-to-cart-command::before,
html.fo-product-buttons-soft .tm-fancy-command.go-to-product-details-command::before,
html.fo-product-buttons-soft .tm-fancy-command.make-a-reservation-product-command::before,
html.fo-product-buttons-soft .tm-fancy-command.subscribe-to-course-command::before,
html.fo-product-buttons-soft .tm-fancy-command.subscribe-to-course-command-by-tax::before {
  display: none;
}

html.fo-product-buttons-soft .tm-fancy-command.add-to-cart-command .tm-icon,
html.fo-product-buttons-soft .tm-fancy-command.go-to-product-details-command .tm-icon,
html.fo-product-buttons-soft .tm-fancy-command.make-a-reservation-product-command .tm-icon,
html.fo-product-buttons-soft .tm-fancy-command.subscribe-to-course-command .tm-icon,
html.fo-product-buttons-soft .tm-fancy-command.subscribe-to-course-command-by-tax .tm-icon {
  color: var(--tm-primary, #0088d4);
}

html.fo-product-buttons-soft .tm-fancy-command.add-to-cart-command .command-text,
html.fo-product-buttons-soft .tm-fancy-command.go-to-product-details-command .command-text,
html.fo-product-buttons-soft .tm-fancy-command.make-a-reservation-product-command .command-text,
html.fo-product-buttons-soft .tm-fancy-command.subscribe-to-course-command .command-text,
html.fo-product-buttons-soft .tm-fancy-command.subscribe-to-course-command-by-tax .command-text {
  color: var(--tm-primary, #0088d4);
}

html.fo-product-buttons-soft .tm-fancy-command.add-to-cart-command:hover,
html.fo-product-buttons-soft .tm-fancy-command.go-to-product-details-command:hover,
html.fo-product-buttons-soft .tm-fancy-command.make-a-reservation-product-command:hover,
html.fo-product-buttons-soft .tm-fancy-command.subscribe-to-course-command:hover,
html.fo-product-buttons-soft .tm-fancy-command.subscribe-to-course-command-by-tax:hover {
  transform: translateY(-1px);
  box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.16), -8px -8px 18px rgba(255, 255, 255, 0.6);
}

html.fo-product-buttons-soft .tm-fancy-command.add-to-cart-command:active,
html.fo-product-buttons-soft .tm-fancy-command.go-to-product-details-command:active,
html.fo-product-buttons-soft .tm-fancy-command.make-a-reservation-product-command:active,
html.fo-product-buttons-soft .tm-fancy-command.subscribe-to-course-command:active,
html.fo-product-buttons-soft .tm-fancy-command.subscribe-to-course-command-by-tax:active {
  transform: translateY(0);
  box-shadow: inset 4px 4px 9px rgba(0, 0, 0, 0.16), inset -4px -4px 9px rgba(255, 255, 255, 0.55);
}

/* Minimal - borderless ghost with a theme-coloured underline that grows under the icon + label on hover. */
html.fo-product-buttons-minimal .tm-fancy-command.add-to-cart-command,
html.fo-product-buttons-minimal .tm-fancy-command.go-to-product-details-command,
html.fo-product-buttons-minimal .tm-fancy-command.make-a-reservation-product-command,
html.fo-product-buttons-minimal .tm-fancy-command.subscribe-to-course-command,
html.fo-product-buttons-minimal .tm-fancy-command.subscribe-to-course-command-by-tax {
  background: linear-gradient(var(--tm-primary, #0088d4), var(--tm-primary, #0088d4)) no-repeat;
  background-size: 0% 2px;
  background-position: left bottom;
  color: var(--tm-text, #2c3038) !important;
  border: none;
  box-shadow: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  transition: background-size 0.45s cubic-bezier(0.2, 0.8, 0.3, 1), color 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.3, 1);
}

html.fo-product-buttons-minimal .tm-fancy-command.add-to-cart-command::before,
html.fo-product-buttons-minimal .tm-fancy-command.go-to-product-details-command::before,
html.fo-product-buttons-minimal .tm-fancy-command.make-a-reservation-product-command::before,
html.fo-product-buttons-minimal .tm-fancy-command.subscribe-to-course-command::before,
html.fo-product-buttons-minimal .tm-fancy-command.subscribe-to-course-command-by-tax::before {
  display: none;
}

html.fo-product-buttons-minimal .tm-fancy-command.add-to-cart-command .tm-icon,
html.fo-product-buttons-minimal .tm-fancy-command.go-to-product-details-command .tm-icon,
html.fo-product-buttons-minimal .tm-fancy-command.make-a-reservation-product-command .tm-icon,
html.fo-product-buttons-minimal .tm-fancy-command.subscribe-to-course-command .tm-icon,
html.fo-product-buttons-minimal .tm-fancy-command.subscribe-to-course-command-by-tax .tm-icon {
  color: var(--tm-primary, #0088d4);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.3, 1), color 0.35s ease;
}

html.fo-product-buttons-minimal .tm-fancy-command.add-to-cart-command .command-text,
html.fo-product-buttons-minimal .tm-fancy-command.go-to-product-details-command .command-text,
html.fo-product-buttons-minimal .tm-fancy-command.make-a-reservation-product-command .command-text,
html.fo-product-buttons-minimal .tm-fancy-command.subscribe-to-course-command .command-text,
html.fo-product-buttons-minimal .tm-fancy-command.subscribe-to-course-command-by-tax .command-text {
  color: var(--tm-text, #2c3038);
  transition: color 0.35s ease;
}

html.fo-product-buttons-minimal .tm-fancy-command.add-to-cart-command:hover,
html.fo-product-buttons-minimal .tm-fancy-command.go-to-product-details-command:hover,
html.fo-product-buttons-minimal .tm-fancy-command.make-a-reservation-product-command:hover,
html.fo-product-buttons-minimal .tm-fancy-command.subscribe-to-course-command:hover,
html.fo-product-buttons-minimal .tm-fancy-command.subscribe-to-course-command-by-tax:hover {
  background-size: 100% 2px;
  color: var(--tm-primary, #0088d4) !important;
  transform: translateY(-1px);
}

html.fo-product-buttons-minimal .tm-fancy-command.add-to-cart-command:hover .tm-icon,
html.fo-product-buttons-minimal .tm-fancy-command.go-to-product-details-command:hover .tm-icon,
html.fo-product-buttons-minimal .tm-fancy-command.make-a-reservation-product-command:hover .tm-icon,
html.fo-product-buttons-minimal .tm-fancy-command.subscribe-to-course-command:hover .tm-icon,
html.fo-product-buttons-minimal .tm-fancy-command.subscribe-to-course-command-by-tax:hover .tm-icon {
  color: var(--tm-primary, #0088d4);
  transform: translateX(2px);
}

html.fo-product-buttons-minimal .tm-fancy-command.add-to-cart-command:hover .command-text,
html.fo-product-buttons-minimal .tm-fancy-command.go-to-product-details-command:hover .command-text,
html.fo-product-buttons-minimal .tm-fancy-command.make-a-reservation-product-command:hover .command-text,
html.fo-product-buttons-minimal .tm-fancy-command.subscribe-to-course-command:hover .command-text,
html.fo-product-buttons-minimal .tm-fancy-command.subscribe-to-course-command-by-tax:hover .command-text {
  color: var(--tm-primary, #0088d4);
}

/* Luciu - solid theme fill crossed by a travelling diagonal specular glint on hover. */
html.fo-product-buttons-shine .tm-fancy-command.add-to-cart-command,
html.fo-product-buttons-shine .tm-fancy-command.go-to-product-details-command,
html.fo-product-buttons-shine .tm-fancy-command.make-a-reservation-product-command,
html.fo-product-buttons-shine .tm-fancy-command.subscribe-to-course-command,
html.fo-product-buttons-shine .tm-fancy-command.subscribe-to-course-command-by-tax {
  background: var(--tm-primary, #0088d4);
  color: #fff !important;
  border: none;
  box-shadow: 0 6px 16px -6px rgba(0, 136, 212, 0.5);
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--tm-primary, #0088d4) 50%, transparent);
  transition: box-shadow 0.45s cubic-bezier(0.2, 0.8, 0.3, 1), transform 0.45s cubic-bezier(0.2, 0.8, 0.3, 1);
}

html.fo-product-buttons-shine .tm-fancy-command.add-to-cart-command::before,
html.fo-product-buttons-shine .tm-fancy-command.go-to-product-details-command::before,
html.fo-product-buttons-shine .tm-fancy-command.make-a-reservation-product-command::before,
html.fo-product-buttons-shine .tm-fancy-command.subscribe-to-course-command::before,
html.fo-product-buttons-shine .tm-fancy-command.subscribe-to-course-command-by-tax::before {
  top: 0;
  left: -150%;
  width: 75%;
  height: 100%;
  background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%);
  transform: skewX(-18deg);
  transition: left 0.7s cubic-bezier(0.2, 0.8, 0.3, 1);
}

html.fo-product-buttons-shine .tm-fancy-command.add-to-cart-command:hover::before,
html.fo-product-buttons-shine .tm-fancy-command.go-to-product-details-command:hover::before,
html.fo-product-buttons-shine .tm-fancy-command.make-a-reservation-product-command:hover::before,
html.fo-product-buttons-shine .tm-fancy-command.subscribe-to-course-command:hover::before,
html.fo-product-buttons-shine .tm-fancy-command.subscribe-to-course-command-by-tax:hover::before {
  left: 150%;
}

html.fo-product-buttons-shine .tm-fancy-command.add-to-cart-command:hover,
html.fo-product-buttons-shine .tm-fancy-command.go-to-product-details-command:hover,
html.fo-product-buttons-shine .tm-fancy-command.make-a-reservation-product-command:hover,
html.fo-product-buttons-shine .tm-fancy-command.subscribe-to-course-command:hover,
html.fo-product-buttons-shine .tm-fancy-command.subscribe-to-course-command-by-tax:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px -6px rgba(0, 136, 212, 0.6);
  box-shadow: 0 12px 26px -6px color-mix(in srgb, var(--tm-primary, #0088d4) 60%, transparent);
}

/* Halo - theme-surface pill wrapped by an animated conic theme-gradient ring (rotating glow border), outer glow on hover. */
html.fo-product-buttons-halo .tm-fancy-command.add-to-cart-command,
html.fo-product-buttons-halo .tm-fancy-command.go-to-product-details-command,
html.fo-product-buttons-halo .tm-fancy-command.make-a-reservation-product-command,
html.fo-product-buttons-halo .tm-fancy-command.subscribe-to-course-command,
html.fo-product-buttons-halo .tm-fancy-command.subscribe-to-course-command-by-tax {
  background: var(--tm-surface, #fff);
  color: var(--tm-text, #2c3038) !important;
  border: 1px solid rgba(0, 136, 212, 0.3);
  border: 1px solid color-mix(in srgb, var(--tm-primary, #0088d4) 30%, transparent);
  border-radius: 999px;
  box-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 600;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.45s cubic-bezier(0.2, 0.8, 0.3, 1);
}

html.fo-product-buttons-halo .tm-fancy-command.add-to-cart-command::before,
html.fo-product-buttons-halo .tm-fancy-command.go-to-product-details-command::before,
html.fo-product-buttons-halo .tm-fancy-command.make-a-reservation-product-command::before,
html.fo-product-buttons-halo .tm-fancy-command.subscribe-to-course-command::before,
html.fo-product-buttons-halo .tm-fancy-command.subscribe-to-course-command-by-tax::before {
  inset: 0;
  width: auto;
  height: auto;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--tm-halo-angle, 0deg), var(--tm-primary, #0088d4), var(--tm-secondary, #00c893), var(--tm-accent, #ff6500), var(--tm-primary, #0088d4));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  transform: none;
  transition: none;
  animation: tm-halo-spin 4s linear infinite;
  z-index: 0;
}

html.fo-product-buttons-halo .tm-fancy-command.add-to-cart-command .tm-icon,
html.fo-product-buttons-halo .tm-fancy-command.go-to-product-details-command .tm-icon,
html.fo-product-buttons-halo .tm-fancy-command.make-a-reservation-product-command .tm-icon,
html.fo-product-buttons-halo .tm-fancy-command.subscribe-to-course-command .tm-icon,
html.fo-product-buttons-halo .tm-fancy-command.subscribe-to-course-command-by-tax .tm-icon {
  color: var(--tm-primary, #0088d4);
  position: relative;
  z-index: 1;
}

html.fo-product-buttons-halo .tm-fancy-command.add-to-cart-command .command-text,
html.fo-product-buttons-halo .tm-fancy-command.go-to-product-details-command .command-text,
html.fo-product-buttons-halo .tm-fancy-command.make-a-reservation-product-command .command-text,
html.fo-product-buttons-halo .tm-fancy-command.subscribe-to-course-command .command-text,
html.fo-product-buttons-halo .tm-fancy-command.subscribe-to-course-command-by-tax .command-text {
  color: var(--tm-text, #2c3038);
  position: relative;
  z-index: 1;
}

html.fo-product-buttons-halo .tm-fancy-command.add-to-cart-command:hover,
html.fo-product-buttons-halo .tm-fancy-command.go-to-product-details-command:hover,
html.fo-product-buttons-halo .tm-fancy-command.make-a-reservation-product-command:hover,
html.fo-product-buttons-halo .tm-fancy-command.subscribe-to-course-command:hover,
html.fo-product-buttons-halo .tm-fancy-command.subscribe-to-course-command-by-tax:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 20px -2px rgba(0, 136, 212, 0.5);
  box-shadow: 0 0 20px -2px color-mix(in srgb, var(--tm-primary, #0088d4) 50%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  html.fo-product-buttons-halo .tm-fancy-command.add-to-cart-command::before,
  html.fo-product-buttons-halo .tm-fancy-command.go-to-product-details-command::before,
  html.fo-product-buttons-halo .tm-fancy-command.make-a-reservation-product-command::before,
  html.fo-product-buttons-halo .tm-fancy-command.subscribe-to-course-command::before,
  html.fo-product-buttons-halo .tm-fancy-command.subscribe-to-course-command-by-tax::before {
    animation: none;
  }
}


/*Important to leave it 240 so that the carousel pictures align perfectly*/
/*The containers ----------------------------------------------------------------*/
.footer {
  position: relative;
  padding: 0 0 calc(2 * 10px) 0;
  width: 100%;
  background-color: var(--tm-footer-bg, #333);
  background: linear-gradient(0deg, var(--tm-footer-bg, #333) 0%, black 100%);
  color: #e5e5e5;
  font-size: 12px;
  text-align: center;
}

.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  pointer-events: none;
  background: var(--tm-primary, #0088d4);
  background: linear-gradient(90deg, var(--tm-primary, #0088d4) 0%, var(--tm-secondary, #00c893) 100%);
  display: block !important;
}

.footer-main-links-container {
  padding: 10px 0;
}

.footer-menu-items-container {
  padding: 10px 0;
}

.footer-copyright-note {
  cursor: default;
  color: var(--tm-text-muted, #aaa);
  padding: calc(2 * 10px) 0;
}
.footer-copyright-note a {
  color: var(--tm-text-muted, #aaa);
  font-weight: 600;
}
.footer-copyright-note a:hover {
  text-decoration: underline;
}

.footer-social-links-container {
  padding: calc(2 * 10px) 0 calc(10px / 2) 0;
  border-bottom: dotted 1px rgba(255, 255, 255, 0.2);
}

/*The links & other contents -------------------------------------------------------*/
.footer a.nav-link {
  font-size: 12px;
  color: #e5e5e5;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: block;
  padding: 10px;
  vertical-align: middle;
  transition-duration: 0.2s;
  opacity: 0.75;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
  overflow: hidden;
}

.footer a.nav-link:hover {
  opacity: 1;
}

.footer a.nav-link.social-link {
  display: inline-block;
}

.footer a.nav-link.social-link.facebook:hover {
  color: #4267b2;
}

.footer a.nav-link.social-link.instagram:hover {
  color: #df2a7c;
}

.footer a.nav-link.social-link.twitter:hover {
  color: #55acee;
}

.footer a.nav-link.social-link.youtube:hover {
  color: #b31217;
}

.footer a.nav-link.social-link.linkedin:hover {
  color: #0077b5;
}

.footer a.nav-link .tm-icon {
  color: var(--tm-secondary, #00c893);
}

.footer a.nav-link:hover .tm-icon {
  color: var(--tm-secondary-light, #99edd7);
}

.footer-main-links-wrapper > span {
  display: none;
  color: rgba(255, 255, 255, 0.5);
}

.footer-social-links-container a.social-link {
  text-align: center;
}

.footer-social-links-container a.social-link .tm-social-icon {
  margin: 0 auto calc(10px / 2) auto;
  display: block;
  font-size: 28px;
  width: auto;
}

.footer-social-links-container a.social-link > span {
  text-align: center;
  display: block;
  visibility: hidden;
  font-size: 10px;
}

.footer-social-links-container a.social-link:hover > span {
  visibility: visible;
}

span.margin-left {
  margin-left: 5px;
}

.footer-custom-html {
  margin-top: calc(10px * 3);
  margin-bottom: calc(10px * 3);
}

.footer-newsletter-container {
  padding: 10px 0;
  border-top: dotted 1px rgba(255, 255, 255, 0.18);
  color: var(--tm-footer-text, #e5e5e5);
  text-align: center;
}
.footer-newsletter-container .newsletter-prompt {
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: inherit;
}
.footer-newsletter-container .newsletter-email-input {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--tm-footer-text, #e5e5e5);
}
.footer-newsletter-container .newsletter-email-input::placeholder {
  color: var(--tm-footer-text, #e5e5e5);
  opacity: 0.6;
}

.newsletter-signup-form {
  display: inline-flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.newsletter-signup-form .newsletter-email-input {
  min-width: 240px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--tm-border, #ccc);
  border-radius: var(--tm-radius, 6px);
  background: var(--tm-surface-alt, #fff);
  color: var(--tm-text, #222);
}
.newsletter-signup-form .newsletter-email-input::placeholder {
  color: var(--tm-text, #222);
  opacity: 0.55;
}
.newsletter-signup-form .newsletter-subscribe-btn {
  padding: 0.5rem 1.25rem;
  border: none;
  border-radius: var(--tm-radius, 6px);
  background: linear-gradient(90deg, var(--tm-primary-dark, #006197) 0%, var(--tm-primary, #0088d4) 100%);
  color: #fff;
  cursor: pointer;
  transition: filter 0.2s ease;
}
.newsletter-signup-form .newsletter-subscribe-btn:hover {
  filter: brightness(1.05);
}

.newsletter-inline-unsubscribe {
  padding: 0.5rem 1.25rem;
  border: none;
  border-radius: var(--tm-radius, 6px);
  background: linear-gradient(90deg, #b53f3f 0%, #d65a5a 100%);
  color: #fff;
  cursor: pointer;
  transition: filter 0.2s ease;
}

.newsletter-inline-unsubscribe:hover {
  filter: brightness(1.05);
}

#newsletterDockedPopup .newsletter-dock-tab {
  position: fixed;
  right: 0;
  top: calc(50% + 195px);
  transform: translateY(-50%);
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 46px;
  min-height: 110px;
  padding: 12px 6px;
  border: none;
  border-radius: 10px 0 0 10px;
  background: linear-gradient(90deg, var(--tm-secondary-dark, #009970) 0%, var(--tm-secondary, #00c893) 100%);
  color: #fff;
  cursor: pointer;
  box-shadow: -4px 0 14px rgba(0, 0, 0, 0.18);
  transition: box-shadow 0.2s ease, background 0.2s ease;
}

#newsletterDockedPopup .newsletter-dock-tab:hover {
  background: linear-gradient(90deg, var(--tm-primary-dark, #006197) 0%, var(--tm-primary, #0088d4) 100%);
  box-shadow: -6px 0 20px rgba(0, 0, 0, 0.22);
}

#newsletterDockedPopup .newsletter-dock-tab .newsletter-dock-tab-icon {
  font-size: 1.1rem;
}

#newsletterDockedPopup .newsletter-dock-tab .newsletter-dock-tab-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: 0.5px;
}

#newsletterDockedPopup .newsletter-popup-panel {
  position: fixed;
  right: -400px;
  top: calc(50% + 195px);
  transform: translateY(-50%);
  z-index: 9996;
  width: 340px;
  max-width: 90vw;
  background: var(--tm-surface, #fff);
  color: var(--tm-text, #222);
  border: 1px solid var(--tm-border, #e3e3e3);
  border-radius: 10px 0 0 10px;
  box-shadow: -4px 4px 18px rgba(0, 0, 0, 0.2);
  padding: 1.1rem 1.1rem 1.25rem;
  transition: right 0.25s ease;
}

#newsletterDockedPopup.open .newsletter-popup-panel {
  right: 0;
}

#newsletterDockedPopup.open .newsletter-dock-tab {
  opacity: 0;
  pointer-events: none;
}

html.glass #newsletterDockedPopup .newsletter-popup-panel {
  border-color: var(--tm-glass-border, rgba(255, 255, 255, 0.12));
  box-shadow: var(--tm-glass-shadow, -4px 4px 18px rgba(0, 0, 0, 0.2));
}

html.glass #newsletterDockedPopup .newsletter-email-input {
  background: var(--tm-glass-bg-strong, rgba(255, 255, 255, 0.85));
}

#newsletterDockedPopup .newsletter-popup-title {
  font-weight: 700;
  margin-bottom: 0.35rem;
}

#newsletterDockedPopup .newsletter-popup-prompt {
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}

#newsletterDockedPopup .newsletter-popup-close {
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
  background: none;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  line-height: 1;
  color: inherit;
}

#newsletterDockedPopup .newsletter-signup-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}

#newsletterDockedPopup .newsletter-signup-form .newsletter-email-input {
  width: 100%;
  min-width: 0;
}

#newsletterDockedPopup .newsletter-signup-form .newsletter-subscribe-btn {
  width: 100%;
}

#newsletterDockedPopup .newsletter-inline-unsubscribe {
  width: 100%;
}

.newsletter-checkout-optin-container {
  margin-top: 1rem;
}

.newsletter-account-card {
  background: var(--tm-surface, #fff);
  border: solid 1px var(--tm-border, #cfe2f3);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  padding: 22px;
  max-width: 640px;
}

.newsletter-account-card .newsletter-state {
  margin-bottom: 1rem;
  font-weight: 600;
  color: var(--tm-text, #222);
}

.newsletter-account-card .newsletter-state .newsletter-state-email {
  color: var(--tm-primary, #0088d4);
}

.newsletter-account-card .newsletter-signup-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-start;
  align-items: center;
}

.newsletter-account-card .newsletter-account-action-btn {
  border-radius: 30px;
  padding: 5px 20px;
  border: none;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(90deg, var(--tm-primary-dark, #006197) 0%, var(--tm-primary, #0088d4) 100%);
  transition: filter 0.2s ease;
}

.newsletter-account-card .newsletter-account-action-btn.unsubscribe {
  background: linear-gradient(90deg, #b53f3f 0%, #d65a5a 100%);
}

.newsletter-account-card .newsletter-account-action-btn:hover {
  filter: brightness(1.05);
}

.newsletter-account-hero {
  max-width: 720px;
  margin: 0 auto;
  padding: 0.5rem 1rem 2.25rem;
  text-align: center;
  position: relative;
  z-index: 1;
}
.newsletter-account-hero .newsletter-hero-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 1.1rem;
  border-radius: 30px;
  font-weight: 600;
  font-size: 0.9rem;
  background: var(--tm-surface, #fff);
  border: 1px solid var(--tm-border, #e3e3e3);
  color: var(--tm-text, #222);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.newsletter-account-hero .newsletter-hero-status .tm-icon {
  opacity: 0.7;
}
.newsletter-account-hero.is-subscribed .newsletter-hero-status {
  background: rgba(94, 148, 94, 0.08);
  border-color: rgba(94, 148, 94, 0.35);
  color: #4e7d4e;
}
.newsletter-account-hero.is-subscribed .newsletter-hero-status .tm-icon {
  color: #5e945e;
  opacity: 1;
}
.newsletter-account-hero .newsletter-hero-email {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.45rem 1.4rem;
  border-radius: 30px;
  font-weight: 700;
  color: var(--tm-primary, #0088d4);
  background: var(--tm-surface, #fff);
  border: 1px solid var(--tm-border, #e3e3e3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  max-width: 100%;
  overflow-wrap: anywhere;
}
.newsletter-account-hero .newsletter-hero-title {
  margin-top: 1.1rem;
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--tm-text, #222);
}
.newsletter-account-hero .newsletter-hero-lead {
  margin-top: 0.6rem;
  color: var(--tm-text, #222);
  opacity: 0.7;
}

.newsletter-benefits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 1.75rem;
}

.newsletter-benefit {
  flex: 1 1 180px;
  max-width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.1rem 0.9rem;
  border-radius: 14px;
  background: var(--tm-surface, #fff);
  border: 1px solid var(--tm-border, #e3e3e3);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  animation: newsletter-benefit-enter 0.5s ease-out backwards;
}

.newsletter-benefit:nth-child(2) {
  animation-delay: 0.12s;
}

.newsletter-benefit:nth-child(3) {
  animation-delay: 0.24s;
}

.newsletter-benefit:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
}

.newsletter-benefit-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  color: #fff;
  box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.35);
}

.newsletter-benefit-icon.offers {
  background: linear-gradient(135deg, var(--tm-primary-dark, #006197), var(--tm-primary, #0088d4));
}

.newsletter-benefit-icon.news {
  background: linear-gradient(135deg, #d98324, var(--tm-accent, #ff6500));
}

.newsletter-benefit-icon.nospam {
  background: linear-gradient(135deg, var(--tm-secondary-dark, #009970), var(--tm-secondary, #00c893));
}

.newsletter-benefit-text {
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--tm-text, #222);
}

.newsletter-hero-actions {
  margin-top: 1.9rem;
}
.newsletter-hero-actions .newsletter-signup-form {
  justify-content: center;
}
.newsletter-hero-actions .newsletter-email-input {
  min-width: 260px;
}
.newsletter-hero-actions .newsletter-account-action-btn {
  border-radius: 30px;
  padding: 0.6rem 1.9rem;
  border: none;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(90deg, var(--tm-primary-dark, #006197) 0%, var(--tm-primary, #0088d4) 100%);
  box-shadow: 0 8px 18px -6px rgba(0, 0, 0, 0.35);
  transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.newsletter-hero-actions .newsletter-account-action-btn .tm-icon {
  margin-right: 0.35rem;
}
.newsletter-hero-actions .newsletter-account-action-btn:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: 0 12px 22px -6px rgba(0, 0, 0, 0.4);
}
.newsletter-hero-actions .newsletter-account-action-btn.unsubscribe {
  background: linear-gradient(90deg, #b53f3f 0%, #d65a5a 100%);
}

@keyframes newsletter-benefit-enter {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .newsletter-benefit {
    animation: none;
  }
  .newsletter-benefit:hover,
  .newsletter-hero-actions .newsletter-account-action-btn:hover {
    transform: none;
  }
}

/*Important to leave it 240 so that the carousel pictures align perfectly*/
/* ============================================================================
   Alert dialog (FO) - own.os.common.js showAlert / successAlert / warningAlert
   / errorAlert.

   Facelift aligned with the "latest facelift" family (busy box + toast): a
   frosted-glass card that springs in over a blurred backdrop, with a per-type
   icon badge (success / fail / warning), a slow type-tinted conic halo ring,
   a one-time entrance sheen, refined typography and a gradient primary button.

   Markup (this.alert.alertTemplate):
      .alert-bk.<success|fail|warning>
        .alert-container
          .alert-title                       (hidden when data-has-title='false')
          .alert-contents
            .alert-icon > i.tm-icon
            .alert-message
          .alert-commands-container
            button.alert-dismiss-command

   Theme-aware through the --tm-* tokens (adapts to the shop colour theme AND to
   the dark themes / the frosted-glass material in own.os.glass.scss - which
   frosts .alert-container). The .alert-title / .alert-message rules are generic
   because the confirm dialog reuses those classes. Honours reduced-motion.
   ============================================================================ */
@property --alert-halo-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
/* ====== Backdrop ====== */
.alert-bk {
  --alert-accent: var(--tm-primary, #0088d4);
  --alert-accent-dark: var(--tm-primary-dark, #006197);
  --alert-accent-soft: rgba(0, 136, 212, 0.28);
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: none;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
}

.alert-bk:focus {
  outline: none;
}

.alert-bk.success {
  --alert-accent: var(--tm-success, #85c177);
  --alert-accent-dark: #5e945e;
  --alert-accent-soft: rgba(133, 193, 119, 0.30);
}

.alert-bk.fail {
  --alert-accent: red;
  --alert-accent-dark: #af0000;
  --alert-accent-soft: rgba(255, 70, 70, 0.28);
}

.alert-bk.warning {
  --alert-accent: var(--tm-warn, orange);
  --alert-accent-dark: #eb8200;
  --alert-accent-soft: rgba(255, 165, 0, 0.30);
}

/* ====== Glass card ====== */
.alert-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  width: min(460px, 100vw - 32px);
  max-height: calc(100vh - 48px);
  border-radius: 20px;
  background: var(--tm-surface, rgba(255, 255, 255, 0.92));
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 28px 70px -16px var(--alert-accent-soft), 0 18px 44px -18px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  overflow: hidden;
  animation: alert-card-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.alert-container::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--alert-halo-angle), transparent 0%, var(--alert-accent) 16%, var(--alert-accent-dark) 32%, transparent 52%, var(--alert-accent-soft) 74%, transparent 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: alert-halo-spin 7s linear infinite;
  pointer-events: none;
  z-index: 3;
}

.alert-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.35) 50%, transparent 60%);
  transform: translateX(-160%) skewX(-12deg);
  animation: alert-sheen 1.1s ease-out 0.25s both;
  pointer-events: none;
  z-index: 2;
}

/* ====== Title (shared with the confirm dialog) ====== */
.alert-title {
  flex: 0 0 auto;
  padding: 20px 26px 0;
  font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--tm-text, #333);
  line-height: 1.3;
  position: relative;
  z-index: 4;
}

.alert-bk[data-has-title=false] .alert-title {
  display: none;
}

/* ====== Body: icon badge + message ====== */
.alert-contents {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 26px;
  min-height: 0;
  overflow: hidden;
  position: relative;
  z-index: 4;
}

.alert-icon {
  flex: 0 0 auto;
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--alert-accent) 0%, var(--alert-accent) 55%, var(--alert-accent-dark) 100%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--alert-accent) 78%, white) 0%, var(--alert-accent) 55%, var(--alert-accent-dark) 100%);
  box-shadow: 0 10px 22px -6px var(--alert-accent-soft), inset 0 1px 1px rgba(255, 255, 255, 0.55);
  animation: alert-badge-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.08s both;
}

.alert-icon::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--alert-accent-soft) 0%, transparent 70%);
  opacity: 0.9;
  animation: alert-badge-glow 2.8s ease-in-out infinite;
  z-index: -1;
}

.alert-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--alert-accent);
  opacity: 0;
  animation: alert-badge-ring 1.1s ease-out 0.5s 2;
  pointer-events: none;
}

.alert-icon > i,
.alert-icon > .tm-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 28px;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.alert-bk.success .alert-icon > .tm-icon,
.alert-bk.fail .alert-icon > .tm-icon,
.alert-bk.warning .alert-icon > .tm-icon {
  color: #fff;
}

/* ====== Message (shared with the confirm dialog) ====== */
.alert-message {
  flex: 1 1 auto;
  min-width: 0;
  align-self: center;
  max-height: calc(100vh - 240px);
  overflow-y: auto;
  overflow-wrap: anywhere;
  font-size: 22px;
  line-height: 1.5;
  color: var(--tm-text-muted, #555);
}

.alert-message a {
  color: var(--alert-accent);
  font-weight: 600;
}

/* ====== Commands (footer) ====== */
.alert-commands-container {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px 20px;
  position: relative;
  z-index: 4;
}

.alert-commands-container > button {
  min-width: 116px;
  padding-left: calc(2 * 10px);
  padding-right: calc(2 * 10px);
}

.alert-commands-container > button.alert-dismiss-command {
  position: static;
  transform: none;
  border: none;
  background: linear-gradient(120deg, var(--tm-primary, #0088d4) 0%, var(--tm-primary-dark, #006197) 100%);
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(0, 136, 212, 0.55);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.alert-commands-container > button.alert-dismiss-command:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 12px 24px -8px rgba(0, 136, 212, 0.6);
}

.alert-commands-container > button.alert-dismiss-command:active {
  transform: translateY(0);
}

/* ====== Multi-message payloads (allMessagesAsHtml) ====== */
.messages-container {
  position: relative;
}

.all-messages-container.display-messages-types-indicators .messages-container {
  background: linear-gradient(90deg, rgba(0, 136, 212, 0.04) 0%, rgba(255, 255, 255, 0) 6%);
  padding: calc(0.4 * 10px) 0 calc(0.4 * 10px) calc(3 * 10px);
  margin: calc(0.5 * 10px) 0;
  border-radius: 8px;
}

.all-messages-container.display-messages-types-indicators .messages-container::before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 5px;
  height: 100%;
  border-radius: 20px;
}

.all-messages-container.display-messages-types-indicators .success-messages-container {
  background: linear-gradient(103deg, rgba(133, 193, 119, 0.3) -35px, rgba(255, 255, 255, 0) 30px);
}

.all-messages-container.display-messages-types-indicators .success-messages-container::before {
  background: #85c177;
}

.all-messages-container.display-messages-types-indicators .warning-messages-container {
  background: linear-gradient(103deg, rgba(255, 165, 0, 0.3) -35px, rgba(255, 255, 255, 0) 30px);
}

.all-messages-container.display-messages-types-indicators .warning-messages-container::before {
  background: gold;
}

.all-messages-container.display-messages-types-indicators .validation-messages-container {
  background: linear-gradient(103deg, rgba(255, 70, 70, 0.28) -35px, rgba(255, 255, 255, 0) 30px);
}

.all-messages-container.display-messages-types-indicators .validation-messages-container::before {
  background: red;
}

.all-messages-container.display-messages-types-indicators .error-messages-container {
  background: linear-gradient(103deg, rgba(255, 70, 70, 0.28) -35px, rgba(255, 255, 255, 0) 30px);
}

.all-messages-container.display-messages-types-indicators .error-messages-container::before {
  background: red;
}

/* ====== Keyframes ====== */
@keyframes alert-card-in {
  from {
    opacity: 0;
    transform: translate(-50%, -46%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
@keyframes alert-halo-spin {
  to {
    --alert-halo-angle: 360deg;
  }
}
@keyframes alert-sheen {
  from {
    transform: translateX(-160%) skewX(-12deg);
  }
  to {
    transform: translateX(260%) skewX(-12deg);
  }
}
@keyframes alert-badge-in {
  from {
    opacity: 0;
    transform: scale(0.4) rotate(-12deg);
  }
  60% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}
@keyframes alert-badge-glow {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}
@keyframes alert-badge-ring {
  0% {
    opacity: 0.6;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.6);
  }
}
/* ====== Small screens (the FO is mostly browsed on phones) ====== */
@media (max-width: 575.98px) {
  .alert-container {
    width: calc(100vw - 24px);
    border-radius: 18px;
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
  }
  .alert-contents {
    gap: 14px;
    padding: 18px 20px;
  }
  .alert-icon {
    width: 52px;
    height: 52px;
  }
  .alert-icon > i,
  .alert-icon > .tm-icon {
    font-size: 24px;
  }
  .alert-title {
    padding: 18px 20px 0;
    font-size: 1.1rem;
  }
  .alert-message {
    font-size: 16px;
  }
  .alert-commands-container {
    padding: 12px 20px 18px;
  }
  .alert-commands-container > button {
    flex: 1 1 auto;
    width: auto;
  }
}
/* ====== Reduced motion ====== */
@media (prefers-reduced-motion: reduce) {
  .alert-container,
  .alert-container::after,
  .alert-icon,
  .alert-icon::after {
    animation: none;
  }
  .alert-container::before {
    animation: none;
    background: linear-gradient(135deg, var(--alert-accent) 0%, transparent 60%);
  }
  .alert-icon::before {
    animation: none;
    opacity: 0.8;
  }
}

/*Important to leave it 240 so that the carousel pictures align perfectly*/
/* ============================================================================
   Busy box overlay (progress dialog for long running actions in the FO).
   Source of truth: own.os.busy.box.scss -> compiled to own.os.busy.box.css
   (compilerconfig.json). Bundled via bundleconfig.json, linked in _Layout.

   Markup is generated by showBusyBox() in wwwroot/js/own.os.common.js
   (this.busyBox.busyBoxTemplate) - keep the class names in sync with it.

   Design: "Diamonds" - the three TopManager logo diamonds assembling, then
   pulsing in a clockwise chase with a diagonal sheen and a ripple wave,
   gently floating in 3D, inside a glass card with a rotating conic halo
   border, staggered wave dots after the message and an indeterminate shimmer
   progress bar. Ported from the BO busy box (own.busy.box.scss) - keep the
   two in sync when tweaking the choreography.

   Theming: driven by the FO theme tokens (--tm-primary/-dark/-light,
   --tm-secondary, --tm-surface, --tm-text) through the semantic SCSS vars,
   so the animation follows each shop's interface theme; translucent tints
   use color-mix() with literal fallbacks for older browsers. Animates only
   transform / opacity / filter, so it stays GPU-friendly.
   ============================================================================ */
/* Smoothly animatable custom property for the rotating halo border.
   Browsers without @property simply show a static gradient border. */
@property --bb-halo-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
/* ====== Backdrop ====== */
.busy-box-bk {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: block;
  /* stealth mode: fully transparent for the first second (see showBusyBox) */
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px) saturate(100%);
  -webkit-backdrop-filter: blur(0px) saturate(100%);
  transition: background 0.45s ease, backdrop-filter 0.45s ease, -webkit-backdrop-filter 0.45s ease;
}
.busy-box-bk:focus {
  outline: none;
}
.busy-box-bk.out-of-stealth-mode {
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(5px) saturate(120%);
  -webkit-backdrop-filter: blur(5px) saturate(120%);
}

/* ====== Glass card ====== */
.busy-box-container {
  display: none; /* revealed with fadeIn() by showBusyBox() */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, 100vw - 32px);
  padding: 30px 32px 36px;
  text-align: center;
  border: none;
  border-radius: 16px;
  background: var(--tm-surface, rgba(255, 255, 255, 0.88));
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 24px 64px -12px rgba(0, 136, 212, 0.4), 0 6px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  animation: bb-card-enter 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@supports (color: color-mix(in srgb, red, blue)) {
  .busy-box-container {
    box-shadow: 0 24px 64px -12px color-mix(in srgb, var(--tm-primary, #0088d4) 40%, transparent), 0 6px 20px rgba(0, 0, 0, 0.1);
  }
}
.busy-box-container {
  /* rotating conic halo border, drawn in the card's 1px padding ring */
}
.busy-box-container::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--bb-halo-angle), transparent 0%, var(--tm-primary, #0088d4) 18%, var(--tm-secondary, #00c893) 38%, transparent 55%, rgba(0, 136, 212, 0.4) 78%, transparent 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: bb-halo-spin 3.5s linear infinite;
  pointer-events: none;
}
@supports (color: color-mix(in srgb, red, blue)) {
  .busy-box-container::before {
    background: conic-gradient(from var(--bb-halo-angle), transparent 0%, var(--tm-primary, #0088d4) 18%, var(--tm-secondary, #00c893) 38%, transparent 55%, color-mix(in srgb, var(--tm-primary, #0088d4) 40%, transparent) 78%, transparent 100%);
  }
}

/* ====== "Diamonds" centerpiece (the 3 TopManager logo diamonds) ======
   Layout mapped from the logo (two diamonds stacked on the left, one on the
   right-center). Chase order is clockwise: 1 -> 3 -> 2. */
.busy-box-diamonds {
  position: relative;
  width: 112px;
  height: 112px;
  margin: 0 auto;
  perspective: 520px;
  /* logo diamonds tinted with the shop's theme colors (dark -> main -> light,
     matching the logo's own dark-to-light gradient direction) */
  --bb-diamond-stop-1: var(--tm-primary-dark, #006197);
  --bb-diamond-stop-2: var(--tm-primary, #0088d4);
  --bb-diamond-stop-3: var(--tm-primary-light, #63bef1);
  --bb-diamond-glow: rgba(0, 136, 212, 0.5);
}
@supports (color: color-mix(in srgb, red, blue)) {
  .busy-box-diamonds {
    --bb-diamond-glow: color-mix(in srgb, var(--tm-primary, #0088d4) 50%, transparent);
  }
}
.busy-box-diamonds {
  /* soft ambient glow behind the whole mark */
}
.busy-box-diamonds::before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--bb-diamond-glow) 0%, transparent 68%);
  opacity: 0.5;
  animation: bb-glow-breathe 2.4s ease-in-out infinite;
}

.busy-box-diamonds-mark {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: bb-mark-float 6s ease-in-out infinite;
}

.busy-box-diamond {
  position: absolute;
  width: 34px;
  height: 34px;
  animation: bb-diamond-enter 0.65s cubic-bezier(0.22, 1.2, 0.36, 1) both, bb-diamond-pulse 2.4s ease-in-out var(--bb-pulse-delay) infinite;
  /* expanding ripple wave emitted while the diamond pulses */
}
.busy-box-diamond::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18%;
  border: 2px solid var(--bb-diamond-stop-2);
  opacity: 0;
  animation: bb-diamond-ripple 2.4s ease-out var(--bb-pulse-delay) infinite;
  pointer-events: none;
}
.busy-box-diamond.busy-box-diamond-1 {
  left: 24px;
  top: 10px;
  --bb-from-x: -30px;
  --bb-from-y: -36px;
  --bb-pulse-delay: 1.1s;
  animation-delay: 0s, var(--bb-pulse-delay);
}
.busy-box-diamond.busy-box-diamond-3 {
  left: 54px;
  top: 39px;
  --bb-from-x: 40px;
  --bb-from-y: 0px;
  --bb-pulse-delay: 1.9s;
  animation-delay: 0.12s, var(--bb-pulse-delay);
}
.busy-box-diamond.busy-box-diamond-2 {
  left: 24px;
  top: 68px;
  --bb-from-x: -30px;
  --bb-from-y: 36px;
  --bb-pulse-delay: 2.7s;
  animation-delay: 0.24s, var(--bb-pulse-delay);
}

.busy-box-diamond-shape {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 18%;
  transform: rotate(45deg);
  background: linear-gradient(45deg, var(--bb-diamond-stop-1) 0%, var(--bb-diamond-stop-2) 39%, var(--bb-diamond-stop-3) 100%);
  box-shadow: 0 5px 16px var(--bb-diamond-glow);
  overflow: hidden;
  animation: bb-diamond-glint 2.4s ease-in-out var(--bb-pulse-delay) infinite;
  /* diagonal sheen sweeping across the diamond while it pulses */
}
.busy-box-diamond-shape::after {
  content: "";
  position: absolute;
  inset: -30%;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.55) 50%, transparent 58%);
  transform: translateX(-130%);
  animation: bb-diamond-sheen 2.4s ease-in-out var(--bb-pulse-delay) infinite;
}

/* ====== Message + wave dots ====== */
.busy-box-text {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  margin-top: 20px;
}

.busy-box-message {
  font-size: 1.15rem;
  letter-spacing: 0.4px;
  color: var(--tm-text, #555);
  text-align: center;
}

.busy-box-wave-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.busy-box-wave-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--tm-primary, #0088d4);
  animation: bb-dot-wave 1.2s ease-in-out infinite;
}
.busy-box-wave-dots span:nth-child(2) {
  animation-delay: 0.15s;
}
.busy-box-wave-dots span:nth-child(3) {
  animation-delay: 0.3s;
}

/* ====== Indeterminate shimmer progress bar ====== */
.busy-box-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(0, 136, 212, 0.1);
  overflow: hidden;
}
@supports (color: color-mix(in srgb, red, blue)) {
  .busy-box-progress {
    background: color-mix(in srgb, var(--tm-primary, #0088d4) 10%, transparent);
  }
}
.busy-box-progress span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 45%;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--tm-primary, #0088d4) 35%, var(--tm-secondary, #00c893) 65%, transparent 100%);
  animation: bb-progress-sweep 1.5s ease-in-out infinite;
}

/* ====== Keyframes ====== */
@keyframes bb-card-enter {
  from {
    transform: translate(-50%, -46%) scale(0.92);
  }
  to {
    transform: translate(-50%, -50%) scale(1);
  }
}
@keyframes bb-halo-spin {
  to {
    --bb-halo-angle: 360deg;
  }
}
@keyframes bb-glow-breathe {
  0%, 100% {
    opacity: 0.65;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}
@keyframes bb-mark-float {
  0%, 100% {
    transform: rotateY(-7deg) translateY(1px);
  }
  50% {
    transform: rotateY(7deg) translateY(-2px);
  }
}
@keyframes bb-diamond-enter {
  from {
    transform: translate(var(--bb-from-x), var(--bb-from-y)) scale(0.35);
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  to {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
}
@keyframes bb-diamond-pulse {
  0%, 24%, 100% {
    transform: scale(1);
  }
  12% {
    transform: scale(1.14);
  }
}
@keyframes bb-diamond-glint {
  0%, 24%, 100% {
    filter: brightness(1);
  }
  12% {
    filter: brightness(1.25);
  }
}
@keyframes bb-diamond-sheen {
  0% {
    transform: translateX(-130%);
  }
  18% {
    transform: translateX(130%);
  }
  100% {
    transform: translateX(130%);
  }
}
@keyframes bb-diamond-ripple {
  0% {
    transform: rotate(45deg) scale(1);
    opacity: 0.55;
  }
  26% {
    transform: rotate(45deg) scale(1.7);
    opacity: 0;
  }
  100% {
    transform: rotate(45deg) scale(1.7);
    opacity: 0;
  }
}
@keyframes bb-dot-wave {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.45;
  }
  30% {
    transform: translateY(-5px);
    opacity: 1;
  }
}
@keyframes bb-progress-sweep {
  from {
    transform: translateX(-110%);
  }
  to {
    transform: translateX(330%);
  }
}
/* ====== Small screens (the FO is mostly browsed on phones) ====== */
@media (max-width: 575.98px) {
  .busy-box-container {
    padding: 20px 16px 26px;
    border-radius: 14px;
    /* lighter blur = smoother on low-end phones */
    backdrop-filter: blur(8px) saturate(130%);
    -webkit-backdrop-filter: blur(8px) saturate(130%);
  }
  .busy-box-bk.out-of-stealth-mode {
    backdrop-filter: blur(3px) saturate(115%);
    -webkit-backdrop-filter: blur(3px) saturate(115%);
  }
  /* the mark keeps its 112px internal geometry and is scaled down as a whole */
  .busy-box-diamonds {
    transform: scale(0.85);
    margin: -6px auto;
  }
  .busy-box-text {
    flex-wrap: wrap;
    margin-top: 14px;
  }
  .busy-box-message {
    font-size: 1.05rem;
  }
}
/* ====== Reduced motion: calm everything down to a gentle pulse ====== */
@media (prefers-reduced-motion: reduce) {
  .busy-box-container,
  .busy-box-container::before,
  .busy-box-diamonds-mark,
  .busy-box-diamond,
  .busy-box-diamond::after,
  .busy-box-diamond-shape,
  .busy-box-diamond-shape::after,
  .busy-box-wave-dots span {
    animation: none;
  }
  .busy-box-diamonds::before {
    animation: bb-glow-breathe 3s ease-in-out infinite;
  }
  .busy-box-progress span {
    animation: none;
    width: 100%;
    opacity: 0.35;
  }
}

/*Important to leave it 240 so that the carousel pictures align perfectly*/
/* ============================================================================
   Confirm dialog (FO) - own.os.common.js confirm(...).

   Same facelifted glass card as the alert dialog (own.os.alert.scss) but with a
   brand-tinted question badge and a Yes / No (or custom) command row.

   Markup (this.confirmData.confirmTemplate):
      .confirm-bk
        .confirm-container
          .alert-title                       (titleClass; hidden if no title)
          .confirm-contents
            .confirm-icon > i.tm-icon
            .alert-message                    (messageClass)
          .confirm-commands-container
            button.confirm-yes-command
            button.confirm-no-command

   The .alert-title / .alert-message typography and the shared keyframes
   (card-in / halo-spin / sheen / badge-*) + @property --alert-halo-angle live
   in own.os.alert.scss; both files are always loaded together. Theme-aware via
   --tm-* tokens; own.os.glass.scss frosts .confirm-container. Reduced-motion aware.
   ============================================================================ */
.confirm-bk {
  --confirm-accent: var(--tm-primary, #0088d4);
  --confirm-accent-dark: var(--tm-primary-dark, #006197);
  --confirm-accent-soft: rgba(0, 136, 212, 0.28);
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: none;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
}

.confirm-bk:focus {
  outline: none;
}

/* ====== Glass card ====== */
.confirm-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  width: min(480px, 100vw - 32px);
  max-height: calc(100vh - 48px);
  border-radius: 20px;
  overflow: hidden;
  background: var(--tm-surface, rgba(255, 255, 255, 0.92));
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 28px 70px -16px var(--confirm-accent-soft), 0 18px 44px -18px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  animation: alert-card-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.confirm-container::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--alert-halo-angle), transparent 0%, var(--confirm-accent) 16%, var(--confirm-accent-dark) 32%, transparent 52%, var(--confirm-accent-soft) 74%, transparent 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: alert-halo-spin 7s linear infinite;
  pointer-events: none;
  z-index: 3;
}

.confirm-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.35) 50%, transparent 60%);
  transform: translateX(-160%) skewX(-12deg);
  animation: alert-sheen 1.1s ease-out 0.25s both;
  pointer-events: none;
  z-index: 2;
}

.confirm-bk[data-has-title=false] .alert-title {
  display: none;
}

/* ====== Body: question badge + message ====== */
.confirm-contents {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 26px;
  min-height: 0;
  overflow: hidden;
  position: relative;
  z-index: 4;
  background: none;
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
}

.confirm-icon {
  flex: 0 0 auto;
  position: relative;
  width: 60px;
  height: 60px;
  top: auto;
  left: auto;
  bottom: auto;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--confirm-accent) 0%, var(--confirm-accent) 55%, var(--confirm-accent-dark) 100%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--confirm-accent) 78%, white) 0%, var(--confirm-accent) 55%, var(--confirm-accent-dark) 100%);
  box-shadow: 0 10px 22px -6px var(--confirm-accent-soft), inset 0 1px 1px rgba(255, 255, 255, 0.55);
  animation: alert-badge-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.08s both;
}

.confirm-icon::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--confirm-accent-soft) 0%, transparent 70%);
  opacity: 0.9;
  animation: alert-badge-glow 2.8s ease-in-out infinite;
  z-index: -1;
}

.confirm-icon > i,
.confirm-icon > .tm-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 28px;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

/* the message inside a confirm sits next to the badge (reset the shared alert-message offset) */
.confirm-contents .alert-message {
  left: auto;
  top: auto;
  right: auto;
  bottom: auto;
  position: static;
}

/* ====== Commands (footer) ====== */
.confirm-commands-container {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px 20px;
  position: relative;
  z-index: 4;
  background: none;
  height: auto;
  line-height: normal;
}

.confirm-commands-container > button {
  min-width: 120px;
  width: auto;
  margin: 0;
  padding-left: calc(2 * 10px);
  padding-right: calc(2 * 10px);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, background 0.2s ease;
}

.confirm-commands-container > button.btn.btn-primary {
  border: none;
  background: linear-gradient(120deg, var(--tm-primary, #0088d4) 0%, var(--tm-primary-dark, #006197) 100%);
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(0, 136, 212, 0.55);
}

.confirm-commands-container > button.btn.btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 12px 24px -8px rgba(0, 136, 212, 0.6);
}

.confirm-commands-container > button.btn.btn-default,
.confirm-commands-container > button.btn.btn-light {
  background: var(--tm-surface, rgba(255, 255, 255, 0.65));
  border: 1px solid var(--tm-border, #e5e5e5);
  color: var(--tm-text, #555);
}

.confirm-commands-container > button.btn.btn-default:hover,
.confirm-commands-container > button.btn.btn-light:hover {
  transform: translateY(-1px);
  border-color: var(--tm-primary, #0088d4);
}

.confirm-commands-container > button:active {
  transform: translateY(0);
}

/* ====== Small screens ====== */
@media (max-width: 575.98px) {
  .confirm-container {
    width: calc(100vw - 24px);
    border-radius: 18px;
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
  }
  .confirm-contents {
    gap: 14px;
    padding: 18px 20px;
  }
  .confirm-icon {
    width: 52px;
    height: 52px;
  }
  .confirm-icon > i,
  .confirm-icon > .tm-icon {
    font-size: 24px;
  }
  .confirm-commands-container {
    padding: 12px 20px 18px;
  }
  .confirm-commands-container > button {
    flex: 1 1 auto;
    width: auto;
  }
}
/* ====== Reduced motion ====== */
@media (prefers-reduced-motion: reduce) {
  .confirm-container,
  .confirm-container::after,
  .confirm-icon {
    animation: none;
  }
  .confirm-container::before {
    animation: none;
    background: linear-gradient(135deg, var(--confirm-accent) 0%, transparent 60%);
  }
  .confirm-icon::before {
    animation: none;
    opacity: 0.8;
  }
}

/*Important to leave it 240 so that the carousel pictures align perfectly*/
/* ============================================================================
   Popup / modal (FO) - own.os.common.js showPopup(...).

   Facelift aligned with the "latest facelift" family (busy box + toast + the
   alert/confirm dialogs): a frosted-glass card that springs in over a blurred
   backdrop, with a refined title bar (gradient accent underline), a rotating
   close button, a soft recessed content surface and a clean command bar.

   Markup (this.popup.popupTemplate):
      .own-popup-bk.<size>
        .own-popup-container
          button.own-popup-close-command
          .own-popup-title
          .own-popup-contents
          .own-popup-commands-container
            button.popup-ok-command
            .own-popup-custom-commands-container
            button.popup-cancel-command

   The container keeps its absolute title(50px)/contents/commands layout (robust
   for the multi-size container and the per-view content overrides in
   own.os.add.to.cart / own.os.book.product). Every size class, fit-to-contents,
   full-screen and the mobile behaviour are preserved. Theme-aware via --tm-*
   tokens; own.os.glass.scss frosts .own-popup-contents. Reduced-motion aware.
   ============================================================================ */
.own-popup-bk {
  position: fixed;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: none;
}

.own-popup-bk:focus {
  outline: none;
}

.own-popup-container {
  border-radius: 16px;
  position: absolute;
  background: var(--tm-surface, rgba(255, 255, 255, 0.92));
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  width: 400px;
  height: 300px;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  border: 1px solid var(--tm-border, rgba(15, 35, 55, 0.08));
  box-shadow: 0 32px 80px -20px rgba(0, 136, 212, 0.28), 0 20px 48px -22px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  max-width: 100%;
  max-height: 100vh;
  overflow: hidden;
  animation: own-popup-in 0.42s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

.own-popup-bk.tiny-popup .own-popup-container {
  width: 300px;
  height: 200px;
}

.own-popup-bk.small-popup .own-popup-container {
  width: 500px;
  height: 400px;
}

.own-popup-bk.normal-popup .own-popup-container {
  width: 650px;
  height: 500px;
}

.own-popup-bk.big-popup .own-popup-container {
  width: 800px;
  height: 600px;
}

.own-popup-bk.huge-popup .own-popup-container {
  width: 1024px;
  height: 700px;
}

.own-popup-bk.almost-full-screen-popup .own-popup-container {
  width: auto;
  height: auto;
  top: 50px;
  left: 50px;
  right: 50px;
  bottom: 50px;
  transform: none;
  /* inset-positioned (no centering translate) -> a plain fade avoids a transform conflict */
  animation: own-popup-fade 0.3s ease both;
}

.own-popup-bk.full-screen-popup .own-popup-container {
  width: auto;
  height: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: none;
  box-shadow: none;
  border-radius: 0;
  border: none;
  animation: own-popup-fade 0.3s ease both;
}

.own-popup-bk.fit-to-contents-popup .own-popup-container {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100vh;
}

.own-popup-bk.fit-to-contents-popup .own-popup-contents {
  width: auto;
  right: auto;
  position: static;
  margin-top: 50px;
  margin-bottom: 50px;
  left: auto;
  bottom: auto;
  top: auto;
  max-height: calc(100vh - 100px);
}

.own-popup-title {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  padding: 0 58px 0 22px;
  line-height: 50px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--tm-text, #333);
  background: linear-gradient(180deg, rgba(0, 136, 212, 0.06) 0%, rgba(0, 136, 212, 0.015) 100%);
  z-index: 2;
}

.own-popup-title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--tm-primary, #0088d4) 0%, var(--tm-secondary, #00c893) 45%, transparent 100%);
  opacity: 0.75;
}

.own-popup-contents {
  position: absolute;
  background: var(--tm-surface-alt, #eef2f8);
  left: 0;
  top: 50px;
  bottom: 55px;
  right: 0;
  padding: var(--padding-quantum);
  overflow: auto;
  font-size: var(--default-font-size);
  z-index: 1;
}

.own-popup-commands-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 16px;
  background: linear-gradient(0deg, rgba(0, 136, 212, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
  border-top: 1px solid var(--tm-border, rgba(15, 35, 55, 0.08));
  z-index: 2;
}
.own-popup-commands-container .own-popup-custom-commands-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.own-popup-commands-container button {
  padding-left: calc(2 * 10px);
  padding-right: calc(2 * 10px);
  font-size: 14px;
  margin: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, background 0.2s ease;
}

.own-popup-commands-container button.btn:hover {
  transform: none;
}

.own-popup-commands-container button.btn.btn-primary {
  border: none;
  background: linear-gradient(120deg, var(--tm-primary, #0088d4) 0%, var(--tm-primary-dark, #006197) 100%);
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(0, 136, 212, 0.55);
}

.own-popup-commands-container button.btn.btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 12px 24px -8px rgba(0, 136, 212, 0.6);
}

.own-popup-commands-container button.btn.btn-light {
  background: var(--tm-surface, rgba(255, 255, 255, 0.65));
  border: 1px solid var(--tm-border, #e5e5e5);
}

.own-popup-commands-container button.btn.btn-light:hover {
  transform: translateY(-1px);
  border-color: var(--tm-primary, #0088d4);
}

/* ====== Close command (X) ====== */
.own-popup-bk .own-popup-close-command {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  cursor: pointer;
  background: var(--tm-surface, rgba(255, 255, 255, 0.5));
  border-radius: 50%;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  z-index: 100;
  border: 1px solid transparent;
}

.own-popup-bk .own-popup-close-command:hover {
  transform: rotate(90deg);
  border-color: var(--tm-border, #e5e5e5);
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.2);
}

.own-popup-bk .own-popup-close-command:focus,
.own-popup-bk .own-popup-close-command:active {
  outline: none;
}

.own-popup-bk .own-popup-close-command::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -1px;
  width: 2px;
  height: 16px;
  transform-origin: center center;
  transform: translateY(-50%) rotate(45deg);
  background: #777;
  pointer-events: none;
  border-radius: 2px;
  transition: background 0.2s ease;
}

.own-popup-bk .own-popup-close-command::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -1px;
  width: 2px;
  height: 16px;
  transform-origin: center center;
  transform: translateY(-50%) rotate(-45deg);
  background: #777;
  pointer-events: none;
  border-radius: 2px;
  transition: background 0.2s ease;
}

.own-popup-bk .own-popup-close-command:hover::after,
.own-popup-bk .own-popup-close-command:hover::before {
  background-color: var(--tm-primary, #0088d4);
}

/* ====== Keyframes ====== */
/* Centered sizes keep their translate-based centering inside the keyframe (so
   the entrance never fights the base transform). Inset sizes (almost/full
   screen), the mobile inset layout and reduced-motion use the plain fade. */
@keyframes own-popup-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-50%) scale(0.965);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(-50%) scale(1);
  }
}
@keyframes own-popup-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* ====== Responsive (FO is mobile-first) ====== */
@media (max-width: 991px) {
  .own-popup-bk .own-popup-container {
    top: 20px;
    left: 20px;
    bottom: 20px;
    right: 20px;
    width: auto !important;
    height: auto !important;
    max-width: calc(100% - 40px);
    transform: none !important;
    /* mobile forces transform:none on every popup -> use the plain fade so the
       centered keyframe's translate can never fight the inset layout */
    animation: own-popup-fade 0.3s ease both;
  }
}
@media (max-width: 767px) {
  .own-popup-contents {
    bottom: 110px;
  }
  .own-popup-commands-container {
    height: 110px;
    flex-wrap: wrap;
    align-content: center;
  }
  .own-popup-bk .own-popup-container {
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    width: auto !important;
    border-radius: 0 !important;
    box-shadow: none;
    height: auto !important;
    max-width: 100% !important;
    transform: none !important;
  }
}
/* ====== Reduced motion ====== */
@media (prefers-reduced-motion: reduce) {
  .own-popup-container {
    animation: own-popup-fade 0.2s ease both;
  }
  .own-popup-bk .own-popup-close-command:hover {
    transform: none;
  }
}


/* ============================================================================
   Toast messages (bottom-right notifications)
   An elegant, ambient notification card - NOT a typed alert dialog. The default
   is a plain neutral card; only success / error add a subtle coloured accent +
   icon. Solid by default; when the storefront's frosted-glass material is on
   (html.glass) the card becomes a translucent, backdrop-blurred glass panel,
   driven by the shared --tm-glass-* tokens (same material as menus/popups/etc).
   Markup is built by own.os.common.js -> showToastMessage(message, type).
   ============================================================================ */

#own-toast-messages-container
{
	position: fixed;
	z-index: 9999;
	right: 0;
	bottom: 0;
	top: 10px;
	width: 384px;
	max-width: calc(100vw - 24px);
	/* breathing room so the soft shadows are never clipped */
	padding: 0 18px 18px 26px;
	display: flex;
	flex-direction: column-reverse;
	gap: 12px;
	pointer-events: none;
	overflow: hidden;
}

.own-toast-message
{
	/* neutral by default (a calm slate) - most toasts are plain confirmations,
	   not typed alerts. Only success / error tint the accent. */
	--toast-accent: #9aa7b1;

	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 14px;
	max-height: 340px;
	/* fixed dark ink: the default card is solid white, so text must stay dark on
	   any colour theme (--tm-text can be light on dark themes). Under glass the
	   override below switches ink to follow the theme. */
	color: #26333d;
	font-size: 13px;
	line-height: 1.45;
	pointer-events: auto;
	cursor: default;
	border-radius: 15px;
	/* the coloured accent is a real border-left so it follows the card's own
	   rounded corners cleanly (a separate rail element with its own radius did not
	   line up at the corners). The other three sides keep a hairline. */
	border: 1px solid rgba(15, 35, 55, 0.08);
	border-left: 4px solid var(--toast-accent);
	background: #ffffff;
	box-shadow: 0 1px 1px rgba(15, 35, 55, 0.04),
	            0 10px 24px -6px rgba(15, 35, 55, 0.22),
	            0 2px 6px rgba(15, 35, 55, 0.10);
	overflow: hidden;
	transform-origin: right center;
	animation: own-toast-in 0.52s cubic-bezier(0.21, 1.11, 0.31, 1) both;
	transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
	            opacity 0.38s ease,
	            max-height 0.42s ease,
	            margin 0.42s ease,
	            padding 0.42s ease,
	            box-shadow 0.25s ease;
}

	.own-toast-message:hover
	{
		box-shadow: 0 1px 1px rgba(15, 35, 55, 0.05),
		            0 18px 38px -8px rgba(15, 35, 55, 0.30),
		            0 4px 10px rgba(15, 35, 55, 0.12);
		transform: translateY(-2px);
	}

.own-toast-message-icon
{
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-top: 1px;
	border-radius: 50%;
	color: var(--toast-accent);
	background: rgba(37, 120, 182, 0.13);
	background: color-mix(in srgb, var(--toast-accent) 15%, transparent);
	box-shadow: 0 0 0 1px rgba(37, 120, 182, 0.10) inset;
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--toast-accent) 18%, transparent) inset;
}

	.own-toast-message-icon svg
	{
		width: 16px;
		height: 16px;
		display: block;
		animation: own-toast-icon-pop 0.6s cubic-bezier(0.21, 1.11, 0.31, 1) 0.08s both;
	}

.own-toast-message-contents
{
	flex: 1 1 auto;
	min-width: 0;
	padding-top: 4px;
	font-weight: 500;
	word-wrap: break-word;
	overflow-wrap: anywhere;
}

	.own-toast-message-contents a
	{
		color: var(--toast-accent);
		font-weight: 600;
	}

.own-toast-message-close
{
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin: -2px -2px 0 0;
	padding: 0;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: inherit;
	opacity: 0.4;
	cursor: pointer;
	transition: opacity 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

	.own-toast-message-close svg
	{
		width: 13px;
		height: 13px;
		display: block;
	}

	.own-toast-message-close:hover
	{
		opacity: 0.9;
		background: rgba(15, 35, 55, 0.08);
		transform: rotate(90deg);
	}

.own-toast-message-progress
{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	transform-origin: left center;
	background: var(--toast-accent);
	opacity: 0.85;
	animation: own-toast-progress 6000ms linear forwards;
}

/* hover / focus pauses the countdown (both the visual bar and the JS timer) */
.own-toast-message.is-paused .own-toast-message-progress
{
	animation-play-state: paused;
}

/* graceful collapse-and-slide-out on dismissal */
.own-toast-message.is-leaving
{
	opacity: 0;
	transform: translateX(34px) scale(0.96);
	max-height: 0;
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
	box-shadow: none;
	pointer-events: none;
}

/* ---- per-type accents (subtle: only success & error tint) -------------- */
.own-toast-message--success { --toast-accent: var(--tm-success, #1baf7a); }
.own-toast-message--error   { --toast-accent: var(--tm-danger, #e34948); }

/* ---- frosted-glass material (opt-in via html.glass) -------------------- */
/* Same material as menus/popups/etc: driven by the shared --tm-glass-* tokens
   (theme-aware light/dark glass). Fallback = the more opaque *-strong tint; the
   translucent tint + blur come in under @supports. Under glass the ink follows
   the theme so it reads on both light and dark glass. */
html.glass .own-toast-message
{
	color: var(--tm-text, #26333d);
	background: var(--tm-glass-bg-strong, rgba(255, 255, 255, 0.85));
	border-color: var(--tm-glass-border, rgba(255, 255, 255, 0.55));
	/* keep the coloured accent on the left after border-color re-tints all sides */
	border-left-color: var(--toast-accent);
	box-shadow: var(--tm-glass-shadow, 0 16px 48px -16px rgba(0, 0, 0, 0.35));
}

@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px)))
{
	html.glass .own-toast-message
	{
		background: var(--tm-glass-bg, rgba(255, 255, 255, 0.62));
		-webkit-backdrop-filter: var(--tm-glass-blur, saturate(160%) blur(14px));
		backdrop-filter: var(--tm-glass-blur, saturate(160%) blur(14px));
	}
}

/* ---- animations -------------------------------------------------------- */
@keyframes own-toast-in
{
	0%
	{
		opacity: 0;
		transform: translateX(46px) scale(0.94);
	}

	55%
	{
		opacity: 1;
	}

	100%
	{
		opacity: 1;
		transform: translateX(0) scale(1);
	}
}

@keyframes own-toast-icon-pop
{
	0%   { transform: scale(0.2); opacity: 0; }
	60%  { transform: scale(1.15); opacity: 1; }
	100% { transform: scale(1); opacity: 1; }
}

@keyframes own-toast-progress
{
	from { transform: scaleX(1); }
	to   { transform: scaleX(0); }
}

/* ---- reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce)
{
	.own-toast-message,
	.own-toast-message-icon svg
	{
		animation: own-toast-fade-in 0.2s ease both;
	}

	.own-toast-message.is-leaving
	{
		transform: none;
	}

	.own-toast-message:hover
	{
		transform: none;
	}

	.own-toast-message-close:hover
	{
		transform: none;
	}
}

@keyframes own-toast-fade-in
{
	from { opacity: 0; }
	to   { opacity: 1; }
}

/*Important to leave it 240 so that the carousel pictures align perfectly*/
html.cookie-consent-open:not(.cookie-consent-docked),
html.cookie-consent-open:not(.cookie-consent-docked) body {
  overflow: hidden;
}

#cookieConsent {
  --cookie-consent-primary: var(--tm-primary, #0088d4);
  --cookie-consent-primary-dark: var(--tm-primary-dark, #006197);
  --cookie-consent-secondary: var(--tm-secondary, #00c893);
  --cookie-consent-accent: var(--tm-accent, var(--tm-primary, #0088d4));
  --cookie-consent-surface: var(--tm-surface, white);
  --cookie-consent-surface-alt: var(--tm-surface-alt, #f4f4f4);
  --cookie-consent-text: var(--tm-text, #444);
  --cookie-consent-muted: var(--tm-text-muted, #777);
  --cookie-consent-border: var(--tm-border, rgba(255, 255, 255, 0.72));
  --cookie-consent-shadow-color: color-mix(in srgb, var(--cookie-consent-primary) 30%, black);
  position: fixed;
  z-index: 2147483000;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* No min-height: 100vh here - on mobile browsers 100vh includes the area behind the
     dynamic toolbars, which pushed the bottom of the card off-screen; inset: 0 already
     sizes the overlay to the real visible viewport. */
  padding: calc(2.5 * 10px);
  padding-bottom: calc(2.5 * 10px + env(safe-area-inset-bottom, 0px));
  background: radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--cookie-consent-primary) 24%, transparent), transparent 28rem), radial-gradient(circle at 80% 85%, color-mix(in srgb, var(--cookie-consent-secondary) 24%, transparent), transparent 30rem), color-mix(in srgb, var(--tm-body-bg, #0e121b) 34%, rgba(14, 18, 27, 0.34));
  backdrop-filter: blur(2px) saturate(108%);
  -webkit-backdrop-filter: blur(4px) saturate(108%);
  color: var(--cookie-consent-text);
}

#cookieConsent.cookie-consent--docked {
  inset: auto 0 0 0;
  align-items: flex-end;
  justify-content: center;
  min-height: 0;
  padding: calc(2 * 10px);
  padding-bottom: calc(2 * 10px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--tm-body-bg, #0e121b) 28%, transparent) 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
}

#cookieConsent.cookie-consent--docked .cookie-consent-card {
  width: min(900px, 100%);
  pointer-events: auto;
}

#cookieConsent.cookie-consent--docked .cookie-consent-card {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
}

#cookieConsent.cookie-consent--docked .cookies-consent-commands {
  grid-column: auto;
  align-self: center;
  padding-top: 0;
}

.cookie-consent-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: calc(2 * 10px);
  width: min(640px, 100%);
  max-height: 100%;
  padding: calc(3 * 10px);
  border: solid 1px color-mix(in srgb, var(--cookie-consent-border) 72%, transparent);
  border-radius: 5px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--cookie-consent-surface) 96%, white), color-mix(in srgb, var(--cookie-consent-surface) 88%, var(--cookie-consent-surface-alt))), var(--cookie-consent-surface);
  box-shadow: 0 5px 90px color-mix(in srgb, var(--cookie-consent-shadow-color) 34%, transparent), 0 2px 12px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.cookie-consent-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--cookie-consent-primary) 0%, var(--cookie-consent-secondary) 52%, var(--cookie-consent-accent) 100%);
}

.cookie-consent-content {
  /* Lets the text area shrink and scroll inside the card when the (tenant-configurable)
     consent text is taller than the viewport, instead of pushing the buttons off-screen. */
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.cookie-consent-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  border-radius: 24px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--cookie-consent-primary) 14%, transparent), color-mix(in srgb, var(--cookie-consent-accent) 24%, transparent));
  color: var(--cookie-consent-primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cookie-consent-primary) 18%, transparent);
  font-size: 32px;
}

.cookie-consent-kicker {
  margin: 0 0 calc(0.5 * 10px) 0;
  color: var(--cookie-consent-primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.cookies-consent-message {
  margin: 0;
  color: var(--cookie-consent-text);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.65;
}

.cookie-consent-link {
  display: inline-flex;
  align-items: center;
  margin-top: calc(1.5 * 10px);
  color: var(--cookie-consent-secondary);
  font-weight: 700;
  text-decoration: none;
}

.cookie-consent-link:hover {
  color: var(--cookie-consent-primary);
  text-decoration: underline;
}

.cookies-consent-commands {
  grid-column: 1/-1;
  padding-top: calc(1.5 * 10px);
  text-align: right;
}

button.accept-policy {
  min-width: 190px;
  color: white;
  background: linear-gradient(135deg, var(--cookie-consent-primary) 0%, var(--cookie-consent-primary-dark) 100%);
  padding: calc(1.25 * 10px) calc(3 * 10px);
  border: solid 1px rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  box-shadow: 0 14px 32px color-mix(in srgb, var(--cookie-consent-primary) 32%, transparent);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.25;
  text-transform: uppercase;
  opacity: 1;
  text-shadow: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

button.accept-policy:hover,
button.accept-policy:focus {
  color: white;
  filter: brightness(1.06);
  box-shadow: 0 18px 42px color-mix(in srgb, var(--cookie-consent-primary) 42%, transparent);
  outline: none;
  transform: translateY(-1px);
}

button.accept-policy:focus-visible {
  box-shadow: 0 18px 42px color-mix(in srgb, var(--cookie-consent-primary) 42%, transparent), 0 0 0 4px color-mix(in srgb, var(--cookie-consent-primary) 22%, transparent);
}

@media (max-width: 575px) {
  #cookieConsent {
    align-items: flex-end;
    padding: calc(1.5 * 10px);
    padding-bottom: calc(1.5 * 10px + env(safe-area-inset-bottom, 0px));
  }
  .cookie-consent-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: calc(1.5 * 10px);
    padding: calc(2.4 * 10px) calc(2 * 10px);
    border-radius: 24px;
  }
  .cookie-consent-icon {
    width: 60px;
    height: 60px;
    border-radius: 20px;
    font-size: 26px;
  }
  .cookies-consent-message {
    font-size: 16px;
  }
  .cookies-consent-commands,
  button.accept-policy {
    width: 100%;
  }
  /* Docked variant (the dedicated Privacy/terms page): render as a compact bottom sheet
     so the page content above stays visible and scrollable while the banner is shown. */
  #cookieConsent.cookie-consent--docked {
    padding: 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }
  #cookieConsent.cookie-consent--docked .cookie-consent-card {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 10px;
    padding: calc(1.5 * 10px);
    border-radius: 18px;
  }
  #cookieConsent.cookie-consent--docked .cookie-consent-icon {
    display: none;
  }
  #cookieConsent.cookie-consent--docked .cookie-consent-content {
    /* Cap the consent text to a slice of the screen; the text itself scrolls inside. */
    max-height: 25vh;
  }
  #cookieConsent.cookie-consent--docked .cookies-consent-message {
    font-size: 14px;
    line-height: 1.5;
  }
  #cookieConsent.cookie-consent--docked .cookie-consent-link {
    margin-top: calc(0.5 * 10px);
    font-size: 14px;
  }
  #cookieConsent.cookie-consent--docked .cookies-consent-commands {
    width: 100%;
  }
}
/* Dynamic-viewport-aware cap for the docked consent text on mobile (dvh tracks the
   visible viewport when the browser toolbars expand/collapse). */
@media (max-width: 575px) {
  @supports (height: 1dvh) {
    #cookieConsent.cookie-consent--docked .cookie-consent-content {
      max-height: 25dvh;
    }
  }
}

/*Important to leave it 240 so that the carousel pictures align perfectly*/
#login-register-invite-dialog-bk {
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  perspective: 100px;
}

#login-register-invite-dialog-contents {
  border-radius: 5px;
  position: absolute;
  z-index: 1;
  width: calc(100% - 4 * 10px);
  height: calc(100% - 5 * 10px);
  min-height: 600px;
  background: var(--tm-surface, white);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  overflow: auto;
}

#close-login-register-dialog {
  position: absolute;
  z-index: 2;
  top: calc(10px / 2);
  right: calc(10px / 2);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: solid 1px transparent;
  line-height: 44px;
  text-align: center;
  opacity: 0.5;
  transition-duration: 0.2s;
}

#close-login-register-dialog:hover {
  opacity: 1;
  background: var(--tm-primary, #0088d4);
  border-color: var(--tm-primary, #0088d4);
}

#close-login-register-dialog > .tm-icon {
  font-size: 20px;
  color: var(--tm-primary, #0088d4);
  transition-duration: 0.2s;
}

#close-login-register-dialog:hover > .tm-icon {
  color: white;
}

.login-register-inner-contents {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-content: stretch;
  flex-wrap: nowrap;
}

.register-invitation-container {
  flex-grow: 1;
  padding: calc(2 * 10px) 10px 10px 10px;
  text-align: center;
}

.login-invitation-container {
  flex-grow: 0;
  background: #ff6500;
  color: white;
  padding: calc(2 * 10px) 10px 10px 10px;
  flex-shrink: 0;
}

.login-register-inner-contents[data-allow-client-register=False] .login-invitation-container,
.login-register-inner-contents[data-allow-client-register=false] .login-invitation-container {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.login-register-inner-contents[data-allow-client-register=False] .login-invitation-container .quick-login-form,
.login-register-inner-contents[data-allow-client-register=false] .login-invitation-container .quick-login-form {
  width: 320px;
}

.dont-show-container {
  flex-grow: 0;
  background: #d15300;
  color: white;
  padding: 0 10px;
  text-align: center;
  flex-shrink: 0;
}

.dont-show-container > label {
  display: block;
  margin: 0;
  padding: 0;
  line-height: 50px;
}

.dont-show-container > label > input,
.dont-show-container > label > span {
  display: inline-block;
  vertical-align: middle;
}

.dont-show-container > label > input {
  margin-top: 3px;
}

.register-invitation-container h3 {
  color: #ff6500;
}

.register-invitation-container h3,
.login-invitation-container h3 {
  text-align: center;
}

.quick-login-form {
  max-width: 75%;
  margin: calc(1 * 10px) auto 0 auto;
}

.quick-login-form button[type=submit] {
  display: block;
  margin: 0 auto;
  width: 100%;
}

.register-command,
.login-command {
  display: block;
  width: 100%;
  font-size: 12px;
}

/*Important to leave it 240 so that the carousel pictures align perfectly*/
/* ---------------------------------------------------------------------------------------
   Products categories menu (Front-Office / Online Shop)

   Layout summary
     * The root list (#categories-menu-list) is a left-anchored vertical strip
       of top-level categories. On desktop it sits to the left of the carousel.
     * On hover (desktop) or click (mobile/tablet) a "mega" flyout opens for the
       active category and visually covers the carousel area. The flyout is
       positioned relative to the list (so it can extend far to the right while
       the LI itself remains narrow).
     * The CSS contract with the existing flags is preserved:
       - html.products-categs-menu-opened-by-default   -> menu shown on page load
       - html.products-categs-menu-opened              -> menu toggled via the
                                                         "Products"/"Categories"
                                                         button in the secondary
                                                         nav (click-to-open)
       - #categories-menu-container.hide-categories-button-on-mobile -> menu
                                                         remains in the page but
                                                         visually hidden on
                                                         small screens.

   The submenu uses a unified easing curve so opening/closing feels organic on
   both desktop and mobile.
   --------------------------------------------------------------------------------------- */
#categories-menu-container {
  position: relative;
  z-index: 500;
  display: none;
  margin-top: calc(1.5 * 10px);
}

#categories-menu-container.hide-categories-button-on-mobile {
  visibility: hidden;
  position: absolute;
}

html.products-categs-menu-opened #categories-menu-container {
  display: block;
}

/* The button used on small screens to toggle the menu (Products / Categories) */
.mobile-categories-menu-trigger-container {
  margin: calc(1.5 * 10px) 0 calc(10px / 2) 0;
}
.mobile-categories-menu-trigger-container .toggle-products-categories-command {
  display: block;
  width: 100%;
  padding: 10px;
  background: linear-gradient(45deg, #b269ca 0%, #87489b 100%);
  transition-property: all;
  transition-duration: 0.2s;
  filter: brightness(1.1);
  margin: 0 0 10px 0;
  padding: calc(1.25 * 10px) calc(2 * 10px);
  border-radius: 5px;
  letter-spacing: 1px;
}
.mobile-categories-menu-trigger-container .toggle-products-categories-command .tm-icon {
  transition-duration: 0.2s;
}
.mobile-categories-menu-trigger-container .toggle-products-categories-command:hover {
  background: linear-gradient(45deg, #b269ca 0%, #87489b 100%);
  filter: brightness(1.2);
}
.mobile-categories-menu-trigger-container .toggle-products-categories-command:hover .tm-icon-down {
  transform: translateY(2px);
}
.mobile-categories-menu-trigger-container .toggle-products-categories-command:hover .tm-icon-up {
  transform: translateY(-2px);
}
.mobile-categories-menu-trigger-container .toggle-products-categories-command .hide-categs {
  display: none;
}
.mobile-categories-menu-trigger-container .toggle-products-categories-command.categs-opened .show-categs {
  display: none;
}
.mobile-categories-menu-trigger-container .toggle-products-categories-command.categs-opened .hide-categs {
  display: inline;
}

/* ---------- root list (left strip on desktop) ---------- */
#categories-menu-list {
  position: relative;
  display: flex;
  flex-direction: column;
  z-index: 1;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
  background: var(--tm-surface, white);
}

li.categories-menu-list-item {
  background: var(--tm-surface, white);
  border: solid 1px transparent;
  border-left: none;
  border-right: none;
  display: flex;
  flex-direction: column;
  transition: background-color 0.28s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  flex-grow: 1;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.05);
  width: 100%;
  min-height: 40px;
  position: relative;
  /* Keep the LI clear of the fixed topbar when JS `scrollIntoView`s into it
     after a tap on mobile — otherwise the tapped row lands underneath the
     green nav strip and the user can't see what they just opened. */
  scroll-margin-top: calc(74px + 1.5 * 10px);
}

#categories-menu-list.fixed-submenus li.categories-menu-list-item {
  position: static;
}

li.categories-menu-list-item:hover {
  background: var(--tm-surface, white);
  border-color: #f4f4f4;
}

li.categories-menu-list-item:last-child {
  box-shadow: 3px 3px 5px -2px rgba(0, 0, 0, 0.05);
}

li.categories-menu-list-item:first-child:hover {
  border-top-color: transparent;
}

li.categories-menu-list-item:last-child:hover {
  border-bottom-color: transparent;
}

li.categories-menu-list-item a.menu-item-caption {
  flex-grow: 1;
  color: var(--tm-text, #555);
  text-decoration: none;
  display: block;
  padding: 0 10px;
  position: relative;
  z-index: 101;
  transition: color 0.28s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  min-height: 35px;
}
li.categories-menu-list-item a.menu-item-caption .has-children-indicator {
  opacity: 0.75;
  transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1), transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), color 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  color: var(--tm-primary, #0088d4);
  pointer-events: all;
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  z-index: 10;
  font-size: 12px;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  padding: 3px;
  text-align: center;
  line-height: 0;
}

li.categories-menu-list-item:hover a.menu-item-caption {
  background: var(--tm-surface, white);
  color: var(--tm-anchor, #0366d6);
}
li.categories-menu-list-item:hover a.menu-item-caption .has-children-indicator {
  opacity: 1;
  transform: translateY(-50%) rotate(90deg);
}

li.categories-menu-list-item.expanded a.menu-item-caption .has-children-indicator {
  transform: translateY(-50%) rotate(90deg);
}

li.categories-menu-list-item a.menu-item-caption > span {
  position: absolute;
  display: block;
  max-height: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  right: 17px;
  top: 50%;
  transform: translateY(-50%);
  left: calc(3.8 * 10px);
  z-index: 0;
}

li.categories-menu-list-item a.menu-item-caption > .tm-icon {
  color: var(--tm-text-muted, #aaa);
  position: absolute;
  display: block;
  left: calc(0.7 * 10px);
  top: 50%;
  transform: translateY(-50%);
  width: calc(3 * 10px);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), color 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

li.categories-menu-list-item:hover a.menu-item-caption > .tm-icon {
  transform: translateY(-50%) scale(1.12);
  color: var(--tm-primary, #0088d4);
}

/* ---------- flyout / mega submenu (mobile baseline; covers carousel on desktop) ---------- */
li.categories-menu-list-item .menu-item-details {
  position: relative;
  left: auto;
  top: auto;
  height: auto;
  z-index: 0;
  opacity: 0;
  border-left: 1px transparent solid;
  background: var(--tm-surface, #ffffff);
  overflow: hidden;
  display: none;
  padding: 0 0 0 calc(2.3 * 10px);
  /* Premium feel: anim props that take effect when expanded */
  transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1), transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.28s;
}

li.categories-menu-list-item .menu-item-details .categ-menu-item-picture-wrapper {
  height: 70px;
  position: relative;
  z-index: 0;
  overflow: hidden;
  margin: calc(0.5 * 10px) 0;
}

li.categories-menu-list-item .menu-item-details .categ-menu-item-picture-wrapper img {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 0;
  opacity: 0;
  transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

li.categories-menu-list-item .menu-item-details .categ-menu-item-picture-wrapper img.is-loaded {
  opacity: 1;
}

li.categories-menu-list-item .menu-item-details .categ-menu-item-picture-wrapper .picture-overlay {
  pointer-events: none;
  position: absolute;
  bottom: 0;
  z-index: 1;
  height: 100%;
  left: 0;
  right: 0;
  background: var(--tm-submenu-photo-fade-h, linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 55%, rgba(255, 255, 255, 0.9) 85%, #ffffff 100%));
}

li.categories-menu-list-item.expanded .menu-item-details {
  z-index: 100;
  border-left: 1px var(--tm-border, #f4f4f4) solid;
  opacity: 1;
  display: block;
  background: var(--tm-surface, #fbfbfd);
  box-shadow: 0 5px 15px -10px rgba(0, 0, 0, 0.1) inset;
  transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1), transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
}

li.categories-menu-list-item .menu-item-details .menu-items-details-inner {
  position: relative;
  z-index: 1;
}

/* Watermark icon (decorative) */
li.categories-menu-list-item .menu-item-details .menu-item-watermark {
  z-index: 0;
  pointer-events: none;
  position: absolute;
  bottom: -10px;
  right: -10px;
  opacity: 0.05;
  transform: scale(0.75);
}

li.categories-menu-list-item .menu-item-details .menu-item-watermark .tm-icon {
  font-size: 140px;
  color: var(--tm-accent, #ff6500);
}

/* Header inside the flyout: category name + "see all" link.
   On desktop the bottom margin is a touch larger than the inter-item
   spacing inside the columns so the heading reads as the visual
   anchor of the panel. */
.submenu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: calc(0.75 * 10px) calc(1.5 * 10px) calc(0.5 * 10px) 0;
  border-bottom: 1px solid var(--tm-border, rgba(0, 0, 0, 0.05));
  margin-bottom: calc(1.6 * 10px);
}

.submenu-header .submenu-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--tm-text, #444);
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  display: flex;
  align-items: center;
  gap: calc(0.5 * 10px);
}

.submenu-header .submenu-title .tm-icon {
  color: var(--tm-primary, #0088d4);
  font-size: 16px;
}

.submenu-header .submenu-see-all {
  display: inline-flex;
  align-items: center;
  gap: calc(0.4 * 10px);
  color: var(--tm-primary, #0088d4);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  padding: calc(0.4 * 10px) calc(1 * 10px);
  border-radius: 999px;
  background: rgba(135, 212, 255, 0.05);
  transition: background-color 0.18s cubic-bezier(0.22, 1, 0.36, 1), color 0.18s cubic-bezier(0.22, 1, 0.36, 1), transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
  white-space: nowrap;
}

.submenu-header .submenu-see-all:hover {
  background: var(--tm-primary, #0088d4);
  color: white;
  text-decoration: none;
  transform: translateX(2px);
}

.submenu-header .submenu-see-all .tm-icon {
  font-size: 11px;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.submenu-header .submenu-see-all:hover .tm-icon {
  transform: translateX(2px);
}

.page-section.most-important-links {
  margin: calc(2 * 10px) 0;
  min-height: 80px;
  background: var(--tm-surface, white);
}

.page-section > .container {
  background: var(--tm-surface, white);
}

/* Level 2 = sub-categs (group headings inside the flyout)
   Level 3+ = sub-sub-categs (flat under each level 2) */
ul.sub-categs-menu {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  line-height: 1.6;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

ul.sub-categs-menu li.sub-categs-menu-item {
  flex: 0 0 33.333333%;
  font-weight: 700;
  padding: 0 calc(0.5 * 10px);
  margin: calc(0.5 * 10px) 0;
  position: relative;
  width: 100%;
}

ul.sub-categs-menu li.sub-categs-menu-item:nth-child(3n)::after,
ul.sub-categs-menu li.sub-categs-menu-item:last-child::after {
  display: none;
}

ul.sub-categs-menu a.sub-categ-heading {
  color: var(--tm-text, #333);
  display: flex;
  align-items: center;
  gap: calc(0.5 * 10px);
  padding: 0;
  margin-bottom: calc(0.6 * 10px);
  background: transparent;
  transform: translateX(0);
  transition: color 0.18s cubic-bezier(0.22, 1, 0.36, 1), transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
  text-decoration: none;
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.3;
  position: relative;
}

/* Elegant hover: subtle colour shift + a small whole-row slide to the
   right. The slide is done on the link itself (not just the icon) so
   text + icon move together as one. NO letter-spacing animation — that
   visibly resets the kerning between characters mid-transition and
   feels glitchy. */
ul.sub-categs-menu a.sub-categ-heading:hover {
  color: var(--tm-primary, #0088d4);
  background: transparent;
  transform: translateX(3px);
  text-decoration: none;
}

ul.sub-categs-menu a.sub-categ-heading .tm-icon {
  color: var(--tm-primary, #0088d4);
  font-size: 13px;
}

/* Fallback for any pre-existing `ul.sub-categs-menu a` (no .sub-categ-heading class) */
ul.sub-categs-menu a {
  color: var(--tm-text-muted, #777);
  display: block;
  padding: calc(0.4 * 10px) calc(1 * 10px);
  transition: color 0.18s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.18s cubic-bezier(0.22, 1, 0.36, 1);
  text-decoration: none;
}

ul.sub-categs-menu a:hover {
  color: var(--tm-anchor, #0366d6);
  text-decoration: none;
}

ul.sub-sub-categs-menu {
  padding: 0;
  margin: 0;
  list-style: none;
  font-weight: normal;
}
ul.sub-sub-categs-menu li {
  position: relative;
}
ul.sub-sub-categs-menu li a {
  margin-left: 0;
  padding: 6px 0;
  color: var(--tm-text, #555);
  font-size: 12.5px;
  font-weight: 400;
  display: block;
  line-height: 1.45;
  transition: color 0.18s cubic-bezier(0.22, 1, 0.36, 1), transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
  transform: translateX(0);
}
ul.sub-sub-categs-menu li a:hover {
  color: var(--tm-primary-dark, #006197);
  background: transparent;
  transform: translateX(3px);
}
ul.sub-sub-categs-menu li.more-link {
  margin-top: calc(0.25 * 10px);
}
ul.sub-sub-categs-menu li.more-link a {
  color: var(--tm-primary, #0088d4);
  font-weight: 600;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: calc(0.4 * 10px);
}
ul.sub-sub-categs-menu li.more-link a:hover {
  color: var(--tm-primary-dark, #006197);
  background: transparent;
  transform: translateX(3px);
}
ul.sub-sub-categs-menu li.more-link a .tm-icon {
  font-size: 11px;
}

/* ---------- the "smaller screen" dropdown (kept for compatibility) ---------- */
.product-menu-for-custom-page-smaller-screen-icon-container {
  width: 20px;
}
.product-menu-for-custom-page-smaller-screen-icon-container .tm-icon {
  color: var(--tm-accent, #ff6500);
}

#product-categs-menu-item-for-smaller-screen {
  display: flex;
  align-items: center;
}

#products-categories-menu-container-for-smaller-screen {
  background: rgba(135, 212, 255, 0.05);
}
#products-categories-menu-container-for-smaller-screen .sub-categs-menu-item {
  padding: 0;
}
#products-categories-menu-container-for-smaller-screen .sub-sub-categs-menu .dropdown-item {
  padding: 0;
  padding-left: calc(10px * 3);
}
#products-categories-menu-container-for-smaller-screen #categories-menu-list-for-smaller-screen {
  list-style: none;
}
#products-categories-menu-container-for-smaller-screen li.categories-menu-list-item-for-smaller-screen {
  padding: 0;
  display: flex;
  flex-direction: column;
  transition-duration: 0.2s;
  flex-grow: 1;
  position: relative;
}
#products-categories-menu-container-for-smaller-screen li.categories-menu-list-item-for-smaller-screen .menu-item-caption {
  display: flex;
  width: 100%;
  padding: calc(0.2 * 10px) 10px;
  clear: both;
  font-weight: 400;
  color: #2578b6;
  text-align: inherit;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  border-radius: 5px;
}
#products-categories-menu-container-for-smaller-screen li.categories-menu-list-item-for-smaller-screen .menu-item-caption .product-categories-icon-cotnainer {
  width: 20px;
}
#products-categories-menu-container-for-smaller-screen li.categories-menu-list-item-for-smaller-screen:hover {
  background: var(--tm-surface, white);
  border-color: #f4f4f4;
}

/* ==========  BREAKPOINTS  ========== */
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  #categories-menu-container {
    margin-top: 0;
  }
  #categories-menu-container.hide-categories-button-on-mobile {
    visibility: unset;
    position: relative;
  }
  ul.sub-categs-menu li.sub-categs-menu-item {
    width: 100%;
  }
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  #categories-menu-list {
    min-height: 242px;
  }
  html.products-categs-menu-opened-by-default #categories-menu-list {
    min-height: 450px;
  }
}
/* Large devices (desktops, 992px and up) — this is where the mega-menu lives */
@media (min-width: 992px) {
  /* Stretch the UL to the full width of its container so the absolutely-
     positioned mega flyout (a child of the LI, positioned to the UL because
     the LI is `position: static`) can reach the right edge of the carousel
     area via `right: 0`. The UL itself has no background and pointer-events
     are disabled on the empty space so clicks pass through to the carousel
     behind it. */
  /* `max-height` is clamped to the same value as `min-height` so the list
     occupies exactly the carousel's vertical span. When the number of root
     categories would otherwise overflow past the carousel bottom, the
     `flex-grow: 1` + `min-height: 0` combo on each LI (below) compresses
     the rows proportionally so the last item lines up with the carousel's
     bottom edge instead of spilling underneath. */
  #categories-menu-list {
    min-height: 325px;
    max-height: 325px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    pointer-events: none;
    align-items: flex-start;
  }
  html.products-categs-menu-opened-by-default #categories-menu-list {
    min-height: 450px;
    max-height: 450px;
  }
  html.products-categs-menu-opened-by-default #categories-menu-container {
    display: block;
  }
  /* Persistent white "sheet" behind any flyout panel.

     Sits between the carousel and the panels (z-index 150, panels are 200).
     While *any* root LI is active (`.expanded` or `:focus-within`) the sheet
     is fully opaque so switching from one flyout to another — both panels
     cross-fading at 0.5 opacity simultaneously — never momentarily reveals
     the carousel image underneath. The sheet itself fades a touch slower
     than the panel on close, so it lingers until the outgoing panel has
     fully gone. */
  #categories-menu-list::before {
    content: "";
    position: absolute;
    top: 0;
    left: 240px;
    right: 0;
    bottom: 0;
    min-height: 325px;
    background: var(--tm-surface, #ffffff);
    border: 1px solid var(--tm-border, rgba(0, 0, 0, 0.05));
    border-left: 1px solid rgba(135, 212, 255, 0.25);
    border-radius: 0;
    box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.18), 0 2px 6px -2px rgba(0, 0, 0, 0.06);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 150;
    transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.28s;
  }
  html.products-categs-menu-opened-by-default #categories-menu-list::before {
    min-height: 450px;
  }
  /* JS-managed class (compat fallback for browsers without :has() support). */
  #categories-menu-list.has-active-flyout::before {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.18s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
  }
  /* Modern browsers — kept separate so the previous rule still applies if a
     browser fails to parse `:has()` and drops the whole selector list. */
  #categories-menu-list:has(li.categories-menu-list-item.expanded)::before,
  #categories-menu-list:has(li.categories-menu-list-item:focus-within)::before {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.18s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
  }
  /* Make the LI a static placement so the absolutely-positioned flyout is
     placed relative to the UL (so it can span the whole carousel area).
     Restore pointer-events on the LI itself (the UL has them disabled).
     Keep the original `flex-grow: 1` behaviour so the LIs split the menu
     list's vertical space evenly (matches the previous look). */
  /* `min-height: 0` overrides the 35px floor from the base rule so the LI
     can shrink below content size when the list is full — paired with the
     list's `max-height` above, this is what produces the proportional
     compression. Icon + text inside the caption are absolutely positioned
     and vertically centered, so they stay readable as rows get thinner. */
  li.categories-menu-list-item {
    position: static;
    width: 240px;
    min-height: 0;
    pointer-events: auto;
    flex-grow: 1;
  }
  li.categories-menu-list-item a.menu-item-caption {
    min-height: 0;
  }
  li.categories-menu-list-item a.menu-item-caption .has-children-indicator {
    pointer-events: none;
    color: var(--tm-text-muted, #aaa);
    border: none;
    background: none;
    line-height: 1.5;
    padding: 0;
    opacity: 0;
    transform: translateY(-50%);
  }
  li.categories-menu-list-item[data-has-children=True]:hover a.menu-item-caption {
    margin-right: -1px;
  }
  li.categories-menu-list-item:hover a.menu-item-caption .has-children-indicator {
    transform: translateY(-50%);
    right: 4px;
    opacity: 0.7;
  }
  li.categories-menu-list-item.expanded a.menu-item-caption .has-children-indicator {
    transform: translateY(-50%);
    opacity: 0.7;
  }
  /* Mega flyout: positioned relative to the UL, fills the carousel zone.

     The base rule defines the CLOSING transition (the panel is in its closed
     state by default; the transition props are what apply when going *from*
     open *to* closed). The decision *when* to close is made by the JS
     hover-intent — once it commits, CSS performs a clean fade. */
  li.categories-menu-list-item .menu-item-details {
    position: absolute;
    top: 0;
    left: 240px;
    right: 0;
    bottom: 0;
    min-height: 325px;
    z-index: 200;
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-8px);
    background: var(--tm-surface, #ffffff);
    border: 1px solid var(--tm-border, rgba(0, 0, 0, 0.05));
    border-left: 1px solid rgba(135, 212, 255, 0.25);
    border-radius: 0;
    /* No box-shadow here on purpose: the shadow lives on the persistent
       white backdrop (`::before` on the UL) so it stays put while the
       panels cross-fade between root categories. With a shadow on each
       panel the combined silhouette appeared to "pulse" during the
       transition. */
    padding: calc(1.5 * 10px) calc(2 * 10px);
    overflow: hidden;
    /* Forces a new compositing layer so the panel contents are clipped
       cleanly against the panel box. */
    isolation: isolate;
    /* `translateZ(0)` only, no `translateX` slide-in: the slide caused
       visible right-edge jitter when the user crossed between root LIs
       (outgoing panel sliding right → left while the incoming one slides
       left → right at the same time). Pure opacity cross-fade now. */
    transform: translateZ(0);
    transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.28s;
  }
  html.products-categs-menu-opened-by-default li.categories-menu-list-item .menu-item-details {
    min-height: 450px;
  }
  /* Picture wrapper now spans the entire panel — the gradient overlay
     does the heavy lifting of keeping the left/top text-area readable
     while letting the photo bleed through everywhere else (bottom-right
     is the most exposed). Previously the wrapper was only 65% wide and
     the image appeared to "stop" abruptly around the middle of the
     panel. */
  li.categories-menu-list-item .menu-item-details .categ-menu-item-picture-wrapper {
    position: absolute;
    inset: 0;
    width: auto;
    max-width: none;
    height: auto;
    margin: 0;
    border: none;
    border-radius: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }
  li.categories-menu-list-item .menu-item-details .categ-menu-item-picture-wrapper img {
    width: 100%;
    height: 100%;
    min-width: 100%;
    object-fit: cover;
    object-position: right center;
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(1.04);
    transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1), transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  }
  li.categories-menu-list-item .menu-item-details .categ-menu-item-picture-wrapper .picture-overlay {
    top: 0;
    bottom: 0;
    height: auto;
    /* Radial fade anchored to the bottom-right corner: image is most
       visible there and washes out smoothly towards the top-left
       text area. This way the photo "comes from" the bottom-right
       corner instead of being clipped at a vertical seam in the
       middle of the panel. */
    background: var(--tm-submenu-photo-fade, radial-gradient(ellipse 130% 130% at 100% 100%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 20%, rgba(255, 255, 255, 0.55) 45%, rgba(255, 255, 255, 0.85) 65%, #ffffff 80%, #ffffff 100%));
  }
  /* Watermark goes behind, very subtle */
  li.categories-menu-list-item .menu-item-details .menu-item-watermark {
    bottom: -20px;
    right: 8px;
    opacity: 0.04;
    transform: scale(1.2);
    z-index: 1;
  }
  li.categories-menu-list-item .menu-item-details .menu-item-watermark .tm-icon {
    font-size: 220px;
  }
  li.categories-menu-list-item .menu-item-details .menu-items-details-inner {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  /* Open via keyboard focus or explicit .expanded class. The .expanded
     class is added by JS (own.os.categories.menu.js) with a hover-intent
     delay so the panel doesn't whiplash when the cursor only grazes an
     LI on its way diagonally to a sub-item.

     Note: CSS `:hover` is intentionally NOT in this selector so the panel
     switching is driven exclusively by the JS hover-intent — that's what
     keeps the previous panel up while the cursor traverses neighbouring
     root LIs.

     `z-index: 200` is repeated here because the *base* (mobile) rule
     `li.expanded .menu-item-details` sets `z-index: 100` and would
     otherwise win on desktop due to higher selector specificity — that
     would put the open panel *below* the white backdrop ::before
     (z 150), hiding the actual content. */
  li.categories-menu-list-item:focus-within .menu-item-details,
  li.categories-menu-list-item.expanded .menu-item-details {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 200;
    transform: translateZ(0);
    transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
  }
  li.categories-menu-list-item:focus-within .menu-item-details .categ-menu-item-picture-wrapper img,
  li.categories-menu-list-item.expanded .menu-item-details .categ-menu-item-picture-wrapper img {
    transform: scale(1);
  }
  /* Sub-categs layout (mega panel) — Amazon / Lidl / Carrefour pattern:
     each level-2 category is a self-contained "card" (bold header + flat
     list of its descendants). The whole set flows into balanced CSS
     multi-columns so blocks naturally pack to fill the available height,
     removing the dead space the old fixed-grid version left when sections
     had uneven item counts.

     `break-inside: avoid` on each card keeps a header from being split
     away from its items across a column boundary. */
  ul.sub-categs-menu {
    flex: 1 1 auto;
    display: block;
    /* `column-width` ONLY (no `column-count`) — the browser drops to
       fewer columns when the available width can't accommodate the
       requested per-column width. With `column-count: N` set as well
       the browser would honour the count and shrink columns *below*
       `column-width` if needed, which is exactly what was clipping
       the rightmost column's text on mid-range desktops. 240px is the
       target minimum width — works out to 2 cols on a 720px panel,
       3 cols on a 960px panel, 4 cols on a 1280px+ panel. */
    column-width: 240px;
    column-gap: calc(2.4 * 10px);
    column-fill: balance;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: calc(0.5 * 10px);
    scrollbar-width: thin;
    scrollbar-color: rgba(135, 212, 255, 0.25) transparent;
    /* Reserve scrollbar space even when not needed so the panel's
       right edge doesn't jiggle as the user crosses between root LIs
       whose flyouts have different content heights. */
    scrollbar-gutter: stable;
  }
  ul.sub-categs-menu::-webkit-scrollbar {
    width: 6px;
  }
  ul.sub-categs-menu::-webkit-scrollbar-track {
    background: transparent;
  }
  ul.sub-categs-menu::-webkit-scrollbar-thumb {
    background: rgba(135, 212, 255, 0.25);
    border-radius: 3px;
  }
  ul.sub-categs-menu::-webkit-scrollbar-thumb:hover {
    background: var(--tm-primary-light, #63bef1);
  }
  ul.sub-categs-menu li.sub-categs-menu-item {
    flex: unset;
    width: 100%;
    padding: 0;
    margin: 0 0 calc(1.8 * 10px) 0;
    min-width: 0;
    display: inline-block; /* helps `break-inside: avoid` in Chromium */
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
  }
}
/* Very large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  #categories-menu-list {
    min-height: 388px;
    max-height: 388px;
  }
  html.products-categs-menu-opened-by-default #categories-menu-list {
    min-height: 450px;
    max-height: 450px;
  }
  li.categories-menu-list-item .menu-item-details {
    left: 240px;
    min-height: 388px;
    padding: calc(1.5 * 10px) calc(2 * 10px);
  }
  html.products-categs-menu-opened-by-default li.categories-menu-list-item .menu-item-details {
    min-height: 450px;
  }
  li.categories-menu-list-item {
    width: 240px;
  }
  .submenu-header .submenu-title {
    font-size: 17px;
  }
  ul.sub-categs-menu {
    column-gap: calc(2.25 * 10px);
  }
  ul.sub-categs-menu a.sub-categ-heading {
    font-size: 14px;
  }
}
/* Extra large devices (large desktops, 1400px and up) */
@media (min-width: 1400px) {
  #categories-menu-list {
    min-height: 450px;
    max-height: 450px;
  }
  li.categories-menu-list-item .menu-item-details {
    min-height: 450px;
  }
  ul.sub-categs-menu {
    column-count: 4;
  }
}
/* Mobile expand keyframes — declared at top-level (NOT nested inside the
   @media below) because some CSS minifiers (NUglify / Bundler & Minifier)
   can't parse @keyframes nested inside an @media block. The animation is
   still only triggered inside the mobile @media via the `animation`
   property. */
@keyframes tm-menu-mobile-expand {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Mobile / tablet specific niceties for the expanded flyout */
@media (max-width: 991.98px) {
  li.categories-menu-list-item .menu-item-details {
    border-radius: 5px;
    margin: calc(0.25 * 10px) 0;
  }
  li.categories-menu-list-item {
    /* Bump the root tap target to ~48px (Material Design) on narrow
       screens — 35-40px is too cramped for a fingertip. */
    min-height: 48px;
  }
  li.categories-menu-list-item a.menu-item-caption {
    min-height: 48px;
    padding: 0 calc(1.2 * 10px);
  }
  li.categories-menu-list-item.expanded .menu-item-details {
    animation: tm-menu-mobile-expand 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
    /* Once expanded the panel needs to be free to grow to its natural
       height. With overflow:hidden inherited from the base rule, any
       content past the animated max-height would get visually trimmed —
       exactly what the user saw on the last item of long submenus. */
    overflow: visible;
    max-height: none;
  }
  /* Mobile touch ergonomics: the panel switches from the multi-column
     layout (desktop) to a stacked single-column list. Items get padded
     to ~44px tap targets (Apple HIG / Material Design recommendation)
     with balanced vertical rhythm — the gap between two adjacent groups
     matches roughly the gap between items inside a group, so nothing
     reads as orphaned. */
  ul.sub-categs-menu {
    gap: 0;
    padding-bottom: calc(0.5 * 10px);
  }
  ul.sub-categs-menu li.sub-categs-menu-item {
    width: 100%;
    margin: 0 0 calc(0.8 * 10px) 0;
  }
  ul.sub-categs-menu li.sub-categs-menu-item:last-child {
    margin-bottom: 0;
  }
  ul.sub-categs-menu a.sub-categ-heading {
    padding: 0;
    font-size: 14.5px;
    margin-bottom: calc(0.4 * 10px);
  }
  ul.sub-sub-categs-menu li a,
  ul.sub-sub-categs-menu li.more-link a {
    padding: calc(0.6 * 10px) calc(0.5 * 10px);
    font-size: 14px;
    line-height: 1.4;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  li.categories-menu-list-item .menu-item-details {
    padding: calc(0.5 * 10px) calc(0.5 * 10px) calc(1.6 * 10px) calc(2.3 * 10px);
  }
  /* On mobile the parent category caption is already visible on the LI
     row the user tapped — repeating it inside the flyout reads as noise.
     Hide the title (and the bottom-border separator that went with it)
     but keep the "See all" pill as a clear CTA to the category page. */
  .submenu-header {
    flex-wrap: wrap;
    justify-content: flex-end;
    padding: calc(0.4 * 10px) calc(0.5 * 10px) calc(0.4 * 10px) 0;
    margin-bottom: calc(0.4 * 10px);
    border-bottom: none;
  }
  .submenu-header .submenu-title {
    display: none;
  }
  .submenu-header .submenu-see-all {
    font-size: 11px;
  }
  /* ---- classic layout on mobile ---------------------------------
     Cascading-by-hover doesn't work on touch, so we render the
     level-2 and level-3 lists as a single flat stack:

       LI root (collapsed)
       LI root (collapsed)
       [tap] LI root (expanded) ↓
           L2 link        ← 48px tap target, sub-section header
               L3 link    ← 40px tap target, indented one step
               L3 link
           L2 link
           L2 link (no descendants — no L3 list under it)
       LI root (collapsed)

     The whole inside of `.menu-item-details` is text-only — no
     background, no border, no inset shadow — to keep the visual
     rhythm aligned with the root list above/below. */
  #categories-menu-container.layout-classic li.categories-menu-list-item .menu-item-details {
    padding: calc(0.4 * 10px) 0 calc(0.8 * 10px) 0;
    background: transparent;
    border: none;
    box-shadow: none;
    margin: 0;
    border-radius: 0;
  }
  #categories-menu-container.layout-classic .classic-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  #categories-menu-container.layout-classic .classic-submenu-item {
    position: relative;
  }
  /* Cascading bits are irrelevant on touch — unfold level-3 inline. */
  #categories-menu-container.layout-classic .classic-submenu-deep {
    position: static;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0 0 calc(0.4 * 10px) 0;
    max-width: none;
    min-width: 0;
    max-height: none;
    overflow: visible;
    transition: none;
    z-index: auto;
  }
  #categories-menu-container.layout-classic .classic-submenu-chevron {
    display: none;
  }
  /* Level-2 links: bold-ish, ~48px tap target, subtle underline
     between siblings so the user feels the rhythm. */
  #categories-menu-container.layout-classic .classic-submenu-link {
    display: flex;
    align-items: center;
    gap: calc(0.6 * 10px);
    padding: calc(0.6 * 10px) calc(2 * 10px) calc(0.6 * 10px) calc(2.4 * 10px);
    min-height: 48px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--tm-text, #444);
    text-decoration: none;
    background: transparent;
    transition: background-color 0.18s cubic-bezier(0.22, 1, 0.36, 1), color 0.18s cubic-bezier(0.22, 1, 0.36, 1);
  }
  #categories-menu-container.layout-classic .classic-submenu-link:active {
    background: rgba(135, 212, 255, 0.05);
    color: var(--tm-primary, #0088d4);
  }
  #categories-menu-container.layout-classic .classic-submenu-link .tm-icon {
    color: var(--tm-primary, #0088d4);
    font-size: 13px;
    width: 18px;
    text-align: center;
  }
  /* Level-3 links: lighter weight, smaller, indented one step from
     their level-2 parent so the hierarchy reads at a glance. */
  #categories-menu-container.layout-classic .classic-submenu-deep .classic-submenu-link {
    padding: calc(0.4 * 10px) calc(2 * 10px) calc(0.4 * 10px) calc(4.5 * 10px);
    min-height: 40px;
    font-size: 13.5px;
    font-weight: 400;
    color: var(--tm-text-muted, #777);
  }
  #categories-menu-container.layout-classic .classic-submenu-deep .classic-submenu-link .tm-icon {
    /* No icons rendered for level-3 in the cshtml, but if a
       future iteration adds them they shouldn't be loud here. */
    font-size: 11px;
    width: 14px;
  }
}
/* =========================================================================
   CLASSIC cascading-dropdown layout.

   Activated by adding `.layout-classic` on `#categories-menu-container`
   (controlled by `OnlineShopSetting.UseMegaMenu = false`).
   The cshtml renders a different DOM for this layout — see
   `_CategoriesMenu.cshtml`: each level-2 item is a link that, when
   hovered, slides out its own level-3 flyout to the right ("cascading"
   pattern, à la Windows Start menu).

   Three visible levels max:
     * Level 1 — the vertical root list of categories (unchanged).
     * Level 2 — narrow flyout to the right of the hovered root LI,
                 driven by the same `.expanded` class the JS hover-intent
                 toggles for the mega layout.
     * Level 3 — narrow flyout to the right of a hovered level-2 item.
                 Driven by pure CSS `:hover` since we're already inside
                 an open level-2 panel. Any descendants past level 3 are
                 flattened (cshtml's `FlattenDescendants`) into the
                 level-3 list so the user never has to drill more than
                 two cascades deep.

   Mobile (< 992px) bypasses cascading entirely — `.classic-submenu-deep`
   is inlined under its parent and behaves like a stacked accordion.
   ========================================================================= */
@media (min-width: 992px) {
  #categories-menu-container.layout-classic {
    /* Kill the persistent white backdrop — cascading panels are small
       and self-contained, no shared sheet needed. */
  }
  #categories-menu-container.layout-classic #categories-menu-list::before {
    display: none;
  }
  #categories-menu-container.layout-classic {
    /* LI back to `position: relative` so each LI is its own containing
       block for the absolutely-positioned level-2 flyout. */
  }
  #categories-menu-container.layout-classic li.categories-menu-list-item {
    position: relative;
  }
  #categories-menu-container.layout-classic {
    /* Level-2 flyout panel (anchored next to the root LI). Box-shadow
       re-added here because in mega the shadow lived on the (now
       hidden) backdrop. `overflow: visible` is critical — the level-3
       cascade has to extend OUT of this panel to the right. */
  }
  #categories-menu-container.layout-classic li.categories-menu-list-item .menu-item-details {
    top: 0;
    left: 100%;
    right: auto;
    bottom: auto;
    width: 260px;
    max-width: 320px;
    min-height: 0;
    padding: calc(0.5 * 10px) 0;
    background: var(--tm-surface, #ffffff);
    border: 1px solid var(--tm-border, rgba(0, 0, 0, 0.05));
    border-left: 1px solid rgba(135, 212, 255, 0.25);
    box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.18), 0 2px 6px -2px rgba(0, 0, 0, 0.06);
    isolation: auto;
    overflow: visible;
  }
  #categories-menu-container.layout-classic {
    /* Hide everything mega adds (image / watermark / header). */
  }
  #categories-menu-container.layout-classic li.categories-menu-list-item .menu-item-details .categ-menu-item-picture-wrapper,
  #categories-menu-container.layout-classic li.categories-menu-list-item .menu-item-details .menu-item-watermark,
  #categories-menu-container.layout-classic li.categories-menu-list-item .menu-item-details .submenu-header {
    display: none;
  }
  #categories-menu-container.layout-classic {
    /* Hide the mega-only sub-categs container if the cshtml accidentally
       rendered it (defensive — should not happen, but it's cheap). */
  }
  #categories-menu-container.layout-classic li.categories-menu-list-item .menu-item-details > .menu-items-details-inner {
    display: none;
  }
  #categories-menu-container.layout-classic {
    /* ---------- cascading submenu (level 2 + nested level 3) ---------- */
  }
  #categories-menu-container.layout-classic .classic-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  #categories-menu-container.layout-classic .classic-submenu-item {
    position: relative;
  }
  #categories-menu-container.layout-classic .classic-submenu-link {
    display: flex;
    align-items: center;
    gap: calc(0.6 * 10px);
    padding: calc(0.75 * 10px) calc(1.25 * 10px);
    color: var(--tm-text, #555);
    text-decoration: none;
    font-size: 13px;
    line-height: 1.3;
    transition: background-color 0.18s cubic-bezier(0.22, 1, 0.36, 1), color 0.18s cubic-bezier(0.22, 1, 0.36, 1);
  }
  #categories-menu-container.layout-classic .classic-submenu-link:hover,
  #categories-menu-container.layout-classic .classic-submenu-item:focus-within > .classic-submenu-link {
    background: rgba(135, 212, 255, 0.05);
    color: var(--tm-primary, #0088d4);
    text-decoration: none;
  }
  #categories-menu-container.layout-classic .classic-submenu-link .tm-icon {
    color: var(--tm-primary, #0088d4);
    font-size: 12px;
    width: 16px;
    text-align: center;
  }
  #categories-menu-container.layout-classic .classic-submenu-link-text {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #categories-menu-container.layout-classic .classic-submenu-chevron {
    flex: 0 0 auto;
    color: var(--tm-text-muted, #aaa);
    font-size: 10px;
    margin-left: calc(0.4 * 10px);
    transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), color 0.18s cubic-bezier(0.22, 1, 0.36, 1);
  }
  #categories-menu-container.layout-classic .classic-submenu-link:hover .classic-submenu-chevron,
  #categories-menu-container.layout-classic .classic-submenu-item:focus-within > .classic-submenu-link .classic-submenu-chevron {
    color: var(--tm-primary, #0088d4);
    transform: translateX(2px);
  }
  #categories-menu-container.layout-classic {
    /* Level-3 cascade — opens to the right of the hovered level-2 item.
       Pure CSS hover here (no JS hover-intent) — we're already inside an
       opened panel, latency tolerance is much higher. */
  }
  #categories-menu-container.layout-classic .classic-submenu-deep {
    position: absolute;
    top: calc(-1 * (0.5 * 10px + 1px));
    left: 100%;
    min-width: 240px;
    max-width: 320px;
    max-height: 480px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: calc(0.5 * 10px) 0;
    background: var(--tm-surface, #ffffff);
    border: 1px solid var(--tm-border, rgba(0, 0, 0, 0.05));
    border-left: 1px solid rgba(135, 212, 255, 0.25);
    box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.18), 0 2px 6px -2px rgba(0, 0, 0, 0.06);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-6px);
    transition: opacity 0.18s cubic-bezier(0.22, 1, 0.36, 1), transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.18s;
    z-index: 250;
    scrollbar-width: thin;
    scrollbar-color: rgba(135, 212, 255, 0.25) transparent;
  }
  #categories-menu-container.layout-classic .classic-submenu-deep::-webkit-scrollbar {
    width: 6px;
  }
  #categories-menu-container.layout-classic .classic-submenu-deep::-webkit-scrollbar-thumb {
    background: rgba(135, 212, 255, 0.25);
    border-radius: 3px;
  }
  #categories-menu-container.layout-classic .classic-submenu-item:hover > .classic-submenu-deep,
  #categories-menu-container.layout-classic .classic-submenu-item:focus-within > .classic-submenu-deep {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
    transition: opacity 0.18s cubic-bezier(0.22, 1, 0.36, 1), transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
  }
  /* Cancel the mega's forced min-height on the level-2 panel when the menu
     is open-by-default — classic panels are content-sized in that mode too.
     Written outside the nested block because `html.…` is the root element
     and can't sit under `#categories-menu-container` in a compiled
     descendant chain. */
  html.products-categs-menu-opened-by-default #categories-menu-container.layout-classic li.categories-menu-list-item .menu-item-details {
    min-height: 0;
  }
}
@media (min-width: 1200px) {
  #categories-menu-container.layout-classic li.categories-menu-list-item .menu-item-details {
    width: 280px;
  }
  #categories-menu-container.layout-classic .classic-submenu-deep {
    min-width: 260px;
  }
}

/*Important to leave it 240 so that the carousel pictures align perfectly*/
/* Menu product cards ---------------------*/
.tm-product-card-minimal {
  position: relative;
  text-align: left;
  display: block;
  min-height: 75px;
  width: 280px;
  background: var(--tm-surface, white);
  transition-duration: 0.2s;
  overflow: hidden;
  width: 100%;
}

.tm-product-card-minimal:hover {
  background: rgba(135, 212, 255, 0.25);
}

.tm-product-card-minimal a,
.tm-product-card-minimal a:hover {
  text-decoration: none;
}

.tm-product-card-minimal-header {
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
  width: 70px;
}

.tm-product-card-minimal .picture-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 57px;
  height: 57px;
  background: var(--tm-surface, white);
  border-radius: 2px;
}

.tm-product-card-minimal .tm-icon.no-pic {
  font-size: 40px;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  color: #f4f4f4;
}

.tm-product-card-minimal .picture-wrapper .product-picture {
  max-height: calc(6 * 57px / 8);
  max-height: calc(6 * 57px / 8);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  transition-duration: 0.2s;
  border-radius: 2px;
}

/* Generic placeholder for the compact menu product card (icon only - too small for a label). */
.tm-product-card-minimal .picture-wrapper .product-picture-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  background: linear-gradient(135deg, #f4f4f4 0%, var(--tm-surface, white) 60%, #f4f4f4 100%);
}

.tm-product-card-minimal .picture-wrapper .product-picture-placeholder .pp-icon {
  font-size: 24px;
  line-height: 1;
  color: var(--tm-primary, #0088d4);
  background: linear-gradient(90deg, var(--tm-primary, #0088d4) 0%, var(--tm-secondary, #00c893) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.85;
}

.tm-product-card-minimal .picture-wrapper .product-picture-placeholder .pp-label {
  display: none;
}

.tm-product-card-minimal-details {
  margin-left: 75px;
}

.tm-product-card-minimal-details .product-name {
  padding: calc(10px / 2) calc(10px / 2) 0 0;
  margin: 10px calc(10px / 2) calc(10px / 2) 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--tm-text-muted, #777);
  transition-duration: 0.2s;
}

.tm-product-card-minimal:hover .product-name {
  color: var(--tm-primary, #0088d4);
}

.tm-product-card-minimal-details .rating-container,
.tm-product-card-minimal-details .rating-container .score {
  font-size: 11px;
}

.tm-product-card-minimal-details .price-container {
  font-size: 13px;
  color: red;
  margin-bottom: 10px;
}

.free-price-text {
  color: #85c177;
  text-transform: uppercase;
  border: solid 2px #85c177;
  display: inline-block;
  border-radius: 5px;
  padding: calc(0.2 * 10px) calc(1.5 * 10px);
  font-weight: 500;
  font-size: 14px;
  cursor: default;
  transition-duration: 0.2s;
}

.free-price-text:hover {
  transform: rotate(-3deg);
}

.tm-product-card-minimal .free-price-text {
  transform: scale(0.7);
  transform-origin: 0 0;
}

/*---------------------------------------------*/
.tm-product-card {
  position: relative;
  text-align: left;
  display: inline-block;
  vertical-align: top;
  width: calc((100% - 25px) / 2);
  height: 460px;
  background: var(--tm-surface, white);
  border-radius: 3px;
  margin: 10px 0;
  transition-duration: 0.2s;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.03);
}
.tm-product-card.products-reservations-is-activated {
  height: 495px;
}
.tm-product-card.has-voucher-applied {
  height: calc(460px + 65px);
}
.tm-product-card.products-reservations-is-activated.has-voucher-applied {
  height: calc(495px + 65px);
}

.tm-product-card::after {
  content: "";
  position: absolute;
  height: 1.5px;
  width: 0;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  transition-duration: 0.2s;
  background: linear-gradient(90deg, var(--tm-secondary-dark, #009970) 0%, var(--tm-secondary, #00c893) 100%);
  opacity: 0;
  border-radius: 0 0 3px 3px;
}

.tm-product-card:hover::after {
  width: 100%;
  opacity: 1;
}

.tm-product-card:hover {
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
}

.product-link.tm-product-card-header {
  height: 200px;
}

.product-link .picture-wrapper {
  height: 200px;
  margin: 0 10px;
  position: relative;
}

.product-link .tm-icon.no-pic {
  font-size: 100px;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  color: #f4f4f4;
}

.product-link .picture-wrapper .product-picture {
  max-height: 95%;
  max-width: 95%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  transition-duration: 0.2s;
  border-radius: 5px;
}

.product-link .picture-wrapper:hover .product-picture {
  transform: translateX(-50%) translateY(-50%) scale(1.025);
}

/* Branded generic placeholder shown when a product has no listing picture, or when its
   picture fails to load - own.os.product.card.js swaps the broken <img> for this element,
   so the browser's default broken-image glyph is never exposed. */
.product-link .picture-wrapper .product-picture-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(10px / 2);
  padding: 10px;
  border-radius: 5px;
  text-align: center;
  overflow: hidden;
  background: radial-gradient(120% 130% at 50% 0%, rgba(135, 212, 255, 0.05) 0%, transparent 55%), linear-gradient(135deg, #f4f4f4 0%, var(--tm-surface, white) 60%, #f4f4f4 100%);
}

/* faint dotted texture so the empty tile still feels intentional */
.product-link .picture-wrapper .product-picture-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(circle, rgba(37, 120, 182, 0.06) 1px, transparent 1.5px);
  background-size: 16px 16px;
  opacity: 0.7;
  pointer-events: none;
}

.product-link .picture-wrapper .product-picture-placeholder .pp-icon-chip {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--tm-surface, white);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(37, 120, 182, 0.1);
  transition-duration: 0.2s;
}

.product-link .picture-wrapper .product-picture-placeholder .pp-icon {
  font-size: 34px;
  line-height: 1;
  color: var(--tm-primary, #0088d4);
  background: linear-gradient(90deg, var(--tm-primary, #0088d4) 0%, var(--tm-secondary, #00c893) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.product-link .picture-wrapper .product-picture-placeholder .pp-label {
  position: relative;
  z-index: 1;
  max-width: 90%;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--tm-text-muted, #aaa);
}

.product-link:hover .picture-wrapper .product-picture-placeholder .pp-icon-chip {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(37, 120, 182, 0.2);
}

.product-link .product-name {
  padding: 0 10px;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  color: var(--tm-text-muted, #777);
  transition-duration: 0.2s;
  height: 100px;
  position: relative;
}

.product-link-minimal .product-subtitle,
.product-link .product-subtitle {
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  display: block;
  color: var(--tm-text-muted, #aaa);
  font-size: 14px;
  font-style: italic;
  padding: calc(10px / 2) 0 0 0;
}

.product-link-minimal .product-code,
.product-link .product-code {
  color: var(--tm-text-muted, #aaa);
  white-space: nowrap;
}

.product-link-minimal .product-subtitle {
  text-align: left;
}

.product-link .product-name > span {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: calc(100% - 2 * 10px);
  max-width: calc(100% - 2 * 10px);
  max-height: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.product-link .product-name:hover {
  color: var(--tm-primary, #0088d4);
}

a.product-link:hover,
a.product-link:focus,
a.product-link:active {
  text-decoration: none;
  outline: none;
}

.product-link .rating-container {
  height: 30px;
  padding: 0 calc(1 * 10px);
  text-align: center;
  white-space: nowrap;
}

.product-link .rating-container .reviews-count {
  display: inline-block;
  vertical-align: middle;
  font-size: 12px;
  margin-top: -2px;
  color: var(--tm-text-muted, #777);
}

.product-link .prices-container {
  height: 55px;
  padding: 10px;
  text-align: center;
}

.product-link .prices-container .old-price-container {
  color: var(--tm-text-muted, #aaa);
  font-size: 12px;
  line-height: 1.2;
}

.product-price-container {
  display: inline-block;
}
.product-price-container.with-voucher-applied {
  /*color: $purple;
  display: block;
  border-top: dashed 1px $gray;
  margin-top: calc(0.25 * 10px);
  padding-top: calc(0.5 * 10px);*/
  color: var(--tm-text, #b269ca);
  display: block;
  padding: calc(0.5 * 10px) 0;
  background: var(--tm-surface-alt, #f6ffed);
  border: solid 1px var(--tm-success, #85c177);
  border-radius: 3px;
}
.product-price-container.with-voucher-applied .product-price-container-watermark {
  display: none;
}
.product-price-container.with-voucher-applied .product-price-with-voucher-percent {
  font-size: 16px;
  display: inline-block;
  vertical-align: middle;
  color: var(--tm-text-muted, #777);
  display: none;
}
.product-price-container.with-voucher-applied .product-price-with-vat-voucher-disc-applied-hint {
  color: var(--tm-success, #85c177);
  display: inline-block;
  vertical-align: middle;
  font-style: italic;
  font-size: 14px;
  overflow: hidden;
}
.product-price-container.with-voucher-applied .product-price-with-vat-voucher-disc-applied-hint .voucher-code {
  font-weight: 800;
  color: var(--tm-text, #5e945e);
  cursor: pointer;
  transition-duration: 0.2s;
  display: inline-block;
}
.product-price-container.with-voucher-applied .product-price-with-vat-voucher-disc-applied-hint .voucher-code .tm-copy-icon {
  display: none;
}
.product-price-container.with-voucher-applied .product-price-with-vat-voucher-disc-applied {
  display: inline-block;
  vertical-align: middle;
}

.product-price-and-other-details-container .product-price-container.with-voucher-applied {
  background: var(--tm-surface-alt, #f6ffed);
  border-radius: 5px;
  border: solid 1px var(--tm-success, #85c177);
  padding: 10px;
  line-height: 1;
  position: relative;
}
.product-price-and-other-details-container .product-price-container.with-voucher-applied .product-price-container-watermark {
  display: block;
  position: absolute;
  top: 10px;
  right: 10px;
  color: var(--tm-accent, #ff6500);
  font-size: 40px;
  pointer-events: none;
  transition-duration: 0.2s;
  opacity: 0.5;
}
.product-price-and-other-details-container .product-price-container.with-voucher-applied:hover .product-price-container-watermark {
  transform: scale(1.2);
  opacity: 1;
}
.product-price-and-other-details-container .product-price-container.with-voucher-applied .product-price-with-voucher-percent {
  display: inline-block;
}
.product-price-and-other-details-container .product-price-container.with-voucher-applied .product-price-with-vat-voucher-disc-applied-hint {
  font-size: 16px;
}
.product-price-and-other-details-container .product-price-container.with-voucher-applied .product-price-with-vat-voucher-disc-applied-hint .voucher-code {
  cursor: pointer;
}
.product-price-and-other-details-container .product-price-container.with-voucher-applied .product-price-with-vat-voucher-disc-applied-hint .voucher-code .tm-copy-icon {
  display: inline-block;
}

/* For when we have a marketing voucher applied ----------------------------------- */
.product-link .prices-container.has-voucher-applied {
  height: calc(55px + 65px);
}

/* -------------------------------------------------------------------------------- */
.product-price-without-vat {
  color: var(--tm-text-muted, #aaa);
  font-size: 12px;
  line-height: 1.2;
  display: none;
}

.product-price-without-vat-label {
  margin-right: 5px;
}

.product-link-minimal .prices-container .old-price-container {
  color: var(--tm-text-muted, #aaa);
  font-size: 12px;
  line-height: 1.2;
  margin: 0 0 calc(0.5 * 10px) 0;
}

.product-link .old-price-container .old-price-container-value {
  text-decoration: line-through;
  display: inline-block;
  vertical-align: middle;
}

.product-link-minimal .old-price-container .old-price-container-value {
  text-decoration: line-through;
  display: inline-block;
  vertical-align: middle;
}

.product-link .prices-container .price-reduction {
  text-decoration: none;
  color: #bababa;
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  color: var(--tm-text, #555);
}

.product-link .prices-container .price-container {
  color: red;
  font-weight: 500;
  font-size: 18px;
}

.product-link .prices-container .price-container sup {
  margin-left: 2px;
  font-size: 13px;
}
.product-link .prices-container .price-container .info-hint-for-product-vat {
  color: var(--tm-primary, #0088d4);
}

.product-link .prices-container .price-container .currency-desc {
  font-weight: 400;
}

.product-link .prices-container.exch .price-container {
  font-style: italic;
}

.product-link .prices-container .old-price-container sup {
  margin-left: 2px;
  font-size: 11px;
  text-decoration: none !important;
}

.product-link .prices-container .old-price-container .currency-desc {
  font-weight: 400;
}

.tm-product-card .badges-container {
  position: absolute;
  top: 10px;
  left: -6px;
  z-index: 9;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
}

.tm-product-card .badges-container .product-badge {
  padding: calc(10px / 4) 10px;
  color: white;
  background: orange;
  font-size: 10px;
  border-radius: 3px 3px 3px 0;
  position: relative;
  text-align: center;
  margin-bottom: 3px;
  border-bottom: solid 1px #eb8200;
  cursor: default;
  min-width: 60px;
  word-break: break-all;
}

.tm-product-card .badges-container .product-badge::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: solid 3px transparent;
  border-top-color: #eb8200;
  border-right-color: #eb8200;
  bottom: -6px;
  left: 0;
}

.tm-product-card .badges-container .product-badge.discount {
  background: red;
  border-bottom: solid 1px #af0000;
}

.tm-product-card .badges-container .product-badge.discount::after {
  border-top-color: #af0000;
  border-right-color: #af0000;
}

.tm-product-card .badges-container .product-badge.course {
  background: #0088d4;
  border-bottom: solid 1px #006197;
}

.tm-product-card .badges-container .product-badge.course::after {
  border-top-color: #006197;
  border-right-color: #006197;
}

.tm-product-card .badges-container .product-badge.webinar {
  background: #85c177;
  border-bottom: solid 1px #5e945e;
}

.tm-product-card .badges-container .product-badge.webinar::after {
  border-top-color: #5e945e;
  border-right-color: #5e945e;
}

.tm-product-card .badges-container .product-badge.book {
  background: #b269ca;
  border-bottom: solid 1px #87489b;
}

.tm-product-card .badges-container .product-badge.book::after {
  border-top-color: #87489b;
  border-right-color: #87489b;
}

.tm-product-card .badges-container .product-badge.extra-info {
  background: #15aabf;
  border-bottom: solid 1px #128a9b;
}

.tm-product-card .badges-container .product-badge.extra-info::after {
  border-top-color: #128a9b;
  border-right-color: #128a9b;
}

.tm-product-card .toolbar {
  position: absolute;
  top: 5px;
  right: 0;
  z-index: 10;
  padding: 0;
  margin: 0;
}

.tm-product-card .toolbar .product-command {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 20px;
  color: #bababa;
  cursor: pointer;
  transition-duration: 0.2s;
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  padding: 0;
}

.tm-product-card .toolbar .product-command:hover {
  color: var(--tm-primary, #0088d4);
}

.tm-product-card .toolbar .product-command.toggle-fav:hover {
  color: red;
}

.tm-product-card .toolbar .product-command.toggle-fav .filled-heart {
  display: none;
}

.tm-product-card .toolbar .product-command.toggle-fav.on .filled-heart {
  display: inline-block;
  color: red;
}

.tm-product-card .toolbar .product-command.toggle-fav.on .empty-heart {
  display: none;
}

.tm-product-card .commands-container {
  text-align: center;
  padding: calc(3 * 10px / 4) calc(0.25 * 10px) calc(1 * 10px) calc(0.25 * 10px);
}

.tm-product-card .add-to-cart-command {
  width: 100%;
}

.tm-product-card .go-to-product-details-command {
  width: 100%;
}

.products-list-wrapper {
  margin: calc(-1 * 10px) calc(-1 * 10px - 11px) 0 calc(-1 * 10px - 11px);
  text-align: center;
}

.category-picture-wrapper,
.search-results-picture-wrapper {
  overflow: hidden;
  height: 150px;
  border-radius: 5px;
  margin: 0 0 10px 0;
  position: relative;
}

.search-results-picture-wrapper {
  height: 80px;
}

.search-results-picture-wrapper.a {
  background: linear-gradient(45deg, #b269ca 0%, #87489b 100%);
}

.search-results-picture-wrapper.b {
  background: linear-gradient(45deg, #a0d497 0%, #5e945e 100%);
}

.search-results-picture-wrapper.c {
  background: linear-gradient(45deg, #63bef1 0%, #006197 100%);
}

.search-results-picture-wrapper.d {
  background: linear-gradient(45deg, #ffa86f 0%, #ff6500 100%);
}

.search-results-picture-wrapper h3 {
  color: white;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  max-width: 100%;
  font-size: 22px;
  white-space: nowrap;
  transition-duration: 0.2s;
  transform-origin: center top;
  font-weight: 500;
}

.search-results-picture-wrapper:hover h3 {
  font-size: 28px;
}

.search-results-picture-wrapper h3::after {
  content: attr(data-text);
  position: absolute;
  top: -50px;
  left: 130px;
  font-size: 35px;
  opacity: 0.15;
  white-space: nowrap;
  letter-spacing: 10px;
  display: none;
}

.search-results-picture-wrapper h3::before {
  content: attr(data-text);
  position: absolute;
  top: 30px;
  left: 190px;
  font-size: 105px;
  opacity: 0.1;
  white-space: nowrap;
  letter-spacing: 10px;
  display: none;
}

.search-results-picture-wrapper .tm-icon-watermark {
  transition-duration: 0.2s;
  opacity: 0.2;
  position: absolute;
  font-size: 220px;
  right: 10px;
  bottom: -10px;
  color: white;
  pointer-events: none;
  display: none;
}

.search-results-picture-wrapper:hover .tm-icon-watermark {
  transform: scale(1.5);
  opacity: 0.6;
}

.search-results-picture-wrapper .tm-icon-watermark-2 {
  transition-duration: 0.2s;
  opacity: 0.1;
  position: absolute;
  font-size: 180px;
  left: 20px;
  top: 5px;
  color: white;
  transform: rotate(90deg);
  pointer-events: none;
}

.search-results-picture-wrapper:hover .tm-icon-watermark-2 {
  transform: rotate(90deg) scale(1.5);
  opacity: 0.2;
}

.category-picture-wrapper img,
.search-results-picture-wrapper img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 0;
  width: 100%;
}

.search-results-picture-wrapper .picture-overlay {
  pointer-events: none;
  position: absolute;
  top: 0;
  z-index: 1;
  height: 100%;
  left: 0;
  right: 0;
  text-transform: uppercase;
  color: white;
  padding: calc(2 * 10px);
  font-size: 22px;
  font-weight: 600;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.1), 30px 30px 3px rgba(255, 255, 255, 0.45), 60px 60px 5px rgba(255, 255, 255, 0.25);
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .tm-product-card {
    width: calc((100% - 45px) / 2);
    margin: 10px;
  }
  .product-link .product-name {
    font-size: 16px;
  }
  .catalogue-list-container .tm-product-card {
    width: calc((100% - 30px) / 1);
  }
  .products-list-wrapper {
    margin: calc(-1 * 10px) calc(-1 * 10px - 11px) 0 calc(-1 * 10px - 11px);
  }
  .tm-product-card .commands-container {
    padding: calc(3 * 10px / 4) 10px 10px 10px;
  }
  .tm-product-card .add-to-cart-command {
    width: auto;
  }
  .tm-product-card .go-to-product-details-command {
    width: auto;
  }
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .tm-product-card {
    width: calc((100% - 45px) / 2);
  }
  .tm-product-card.products-reservations-is-activated {
    height: 460px;
  }
  .tm-product-card.has-voucher-applied {
    height: calc(460px + 55px);
  }
  .tm-product-card.products-reservations-is-activated.has-voucher-applied {
    height: calc(460px + 55px);
  }
  .catalogue-list-container .tm-product-card {
    width: calc((100% - 60px) / 2);
  }
  .search-results-picture-wrapper .picture-overlay {
    font-size: 36px;
  }
  .product-link .prices-container.has-voucher-applied {
    height: calc(55px + 55px);
  }
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .search-results-picture-wrapper {
    height: 150px;
  }
  .search-results-picture-wrapper h3 {
    font-size: 34px;
    left: 60px;
    transform: translateY(-50%) translateX(0);
  }
  .search-results-picture-wrapper:hover h3 {
    font-size: 45px;
  }
  .search-results-picture-wrapper h3::before {
    display: block;
  }
  .search-results-picture-wrapper h3::after {
    display: block;
  }
  .search-results-picture-wrapper .tm-icon-watermark {
    display: block;
  }
  .tm-product-card {
    width: calc((100% - 95px) / 4);
  }
  .products-list-wrapper.one-per-row .tm-product-card {
    width: calc((100% - 20px) / 1);
  }
  .products-list-wrapper.two-per-row .tm-product-card {
    width: calc((100% - 45px) / 2);
  }
  .products-list-wrapper.three-per-row .tm-product-card {
    width: calc((100% - 69px) / 3);
  }
  .my-account-section-container .tm-product-card {
    width: calc((100% - 95px) / 3);
  }
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .catalogue-list-container .tm-product-card {
    width: calc((100% - 95px) / 3);
  }
}

/* =========================================================================
   TopManager Online Shop - Product card STYLES (BO -> Tema interfata -> "Stil carduri produse")
   -------------------------------------------------------------------------
   Pure-CSS re-skins of the SAME product-card markup (_Product.cshtml /
   _ProductCore.cshtml). Each style is activated by an html-level opt-in class
   emitted by InterfaceThemeRenderer.GetHtmlClasses():

       html.fo-product-cards-immersive | -glass | -horizontal | -playful |
       -crystal | -holo | -luxe | -duotone | -sketch |
       -horizontalimmersive | -horizontalcover |
       -neon | -ticket | -business | -showroom | -imageheader |
       -beam | -tech | -organic | -lumen

   plus the cards-per-row opt-ins:

       html.fo-product-cards-cols-{1..4}     (desktop >= 992px)
       html.fo-product-cards-cols-sm-{1,2}   (mobile  <  768px)

   and the per-style knobs:

       html.fo-product-cards-neon-secondary / -accent      (Neon tube colour)
       html.fo-product-cards-showroom-floating             (Showroom levitation)
       html.fo-product-cards-showroom-spot-bold/-dramatic  (Showroom spotlight)
       --tm-ihcard-ratio                                   (ImageHeader image-zone aspect-ratio)

   Design guarantees:
     * "Default = apply nothing": with no class on <html> NOTHING here matches,
       so the standard card stays byte-for-byte identical.
     * Theme-aware: every colour reads a --tm-* design token with the original
       literal as fallback, so all styles follow the selected FO theme (light,
       dark or Custom) automatically.
     * Functional-state safe: the badge/toolbar/voucher/reservation states of
       the card keep working - styles only re-skin chrome, image treatment and
       typography. The action buttons keep the "Stil butoane produse" knob.
     * The compact menu card (.tm-product-card-minimal) is intentionally NOT
       touched by any of these styles.

   This file is authored as plain CSS (no Sass features) so the compiled .css
   twin stays identical - see the front-end assets convention in CLAUDE.md.
   ========================================================================= */

/* =========================================================================
   Shared: full-bleed image base (used by the photo-first styles below).
   The card header becomes an absolutely-positioned, full-card background and
   the flow is compensated with padding-top on the product link, so the fixed
   card heights (incl. the voucher / reservations variants) keep working.
   ========================================================================= */
html.fo-product-cards-immersive .tm-product-card,
html.fo-product-cards-glass .tm-product-card
{
	overflow: hidden;
}

	html.fo-product-cards-immersive .tm-product-card .tm-product-card-header,
	html.fo-product-cards-glass .tm-product-card .tm-product-card-header
	{
		position: absolute;
		inset: 0;
		z-index: 0;
	}

	html.fo-product-cards-immersive .tm-product-card .product-link .picture-wrapper,
	html.fo-product-cards-glass .tm-product-card .product-link .picture-wrapper
	{
		height: 100%;
		margin: 0;
	}

	html.fo-product-cards-immersive .tm-product-card .product-link .picture-wrapper img.product-picture,
	html.fo-product-cards-glass .tm-product-card .product-link .picture-wrapper img.product-picture
	{
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		max-width: none;
		max-height: none;
		transform: none;
		object-fit: cover;
		border-radius: 0;
		transition: transform 4s cubic-bezier(.2, .6, .3, 1);
	}

	/* Slow, cinematic zoom on card hover (replaces the standard 1.025 scale). */
	html.fo-product-cards-immersive .tm-product-card:hover .product-link .picture-wrapper img.product-picture,
	html.fo-product-cards-glass .tm-product-card:hover .product-link .picture-wrapper img.product-picture
	{
		transform: scale(1.07);
	}

	/* Compensate the flow for the (now absolute) header, keeping the standard
	   stack heights below it (name 100 / rating 30 / prices 55 / commands).
	   IMPORTANT: the link must NOT be positioned - the absolute header resolves
	   its containing block to the CARD, so the image covers the WHOLE card
	   (including the commands strip at the bottom), not just the link's box. */
	html.fo-product-cards-immersive .tm-product-card .product-link,
	html.fo-product-cards-glass .tm-product-card .product-link
	{
		position: static;
		display: block;
	}

	/* Glass keeps the standard stack below the (absolute) header: the frosted
	   panel is anchored at top:204px, so the flow is compensated with padding.
	   (Immersive docks its info at the BOTTOM instead - see its block below.) */
	html.fo-product-cards-glass .tm-product-card .product-link
	{
		padding-top: 206px;
	}

	/* The info rows + actions paint ABOVE the scrim/glass overlay (z-index 1). */
	html.fo-product-cards-immersive .tm-product-card .product-link .product-name,
	html.fo-product-cards-glass .tm-product-card .product-link .product-name,
	html.fo-product-cards-immersive .tm-product-card .product-link .rating-container,
	html.fo-product-cards-glass .tm-product-card .product-link .rating-container,
	html.fo-product-cards-immersive .tm-product-card .product-link .prices-container,
	html.fo-product-cards-glass .tm-product-card .product-link .prices-container,
	html.fo-product-cards-immersive .tm-product-card .commands-container,
	html.fo-product-cards-glass .tm-product-card .commands-container
	{
		position: relative;
		z-index: 2;
	}

/* =========================================================================
   IMERSIV (Immersive) - photo-first, full-bleed image + bottom scrim.
   ========================================================================= */
html.fo-product-cards-immersive .tm-product-card
{
	border-radius: var(--tm-card-radius, 14px);
	background: var(--tm-surface-alt, #f0f2f5);
	transition: transform .35s cubic-bezier(.2, .9, .3, 1.1), box-shadow .35s;
}

	html.fo-product-cards-immersive .tm-product-card:hover
	{
		transform: translateY(-4px);
		box-shadow: 0 18px 38px rgba(0, 0, 0, .28);
	}

	/* The scrim the info sits on. Product photos vary wildly (light, busy,
	   high-contrast), so the gradient starts as a light veil high up and gets
	   progressively darker exactly where the name / prices / actions live -
	   paired with the text-shadows below it keeps the text readable on ANY
	   image. On hover it deepens a touch more. */
	html.fo-product-cards-immersive .tm-product-card::before
	{
		content: '';
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;
		background: linear-gradient(180deg, rgba(0, 0, 0, .08) 0%, rgba(0, 0, 0, .22) 32%, rgba(0, 0, 0, .52) 55%, rgba(0, 0, 0, .78) 78%, rgba(0, 0, 0, .88) 100%);
		transition: opacity .3s;
	}

	html.fo-product-cards-immersive .tm-product-card:hover::before
	{
		opacity: 1.0;
	}

	/* The standard bottom gradient line does not fit the overlay look. */
	html.fo-product-cards-immersive .tm-product-card::after
	{
		display: none;
	}

	/* Bottom-docked "poster" composition (the design-preview look): the card is
	   a flex column and the info cluster (name / subtitle / rating / price)
	   docks LEFT-ALIGNED low on the photo, right above the action button. */
	html.fo-product-cards-immersive .tm-product-card
	{
		display: inline-flex; /* inline-level: stays in the existing inline-block grid */
		flex-direction: column;
		vertical-align: top;
	}

	html.fo-product-cards-immersive .tm-product-card .product-link
	{
		margin-top: auto;
	}

	html.fo-product-cards-immersive .tm-product-card .product-link .product-name
	{
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		height: auto;
		max-height: none;
		overflow: hidden;
		text-align: left;
		padding: 0 16px;
		font-size: 17px;
		font-weight: 600;
		line-height: 1.3;
	}

		html.fo-product-cards-immersive .tm-product-card .product-link .product-name > span
		{
			position: static;
			transform: none;
			display: block;
			width: auto;
			max-width: none;
		}

	html.fo-product-cards-immersive .tm-product-card .product-link .product-subtitle
	{
		text-align: left;
		padding: 2px 0 0 0;
	}

	html.fo-product-cards-immersive .tm-product-card .product-link .rating-container
	{
		height: auto;
		text-align: left;
		padding: 4px 16px 0 16px;
	}

	html.fo-product-cards-immersive .tm-product-card .product-link .prices-container
	{
		height: auto;
		text-align: left;
		padding: 6px 16px 10px 16px;
	}

		html.fo-product-cards-immersive .tm-product-card .product-link .prices-container.has-voucher-applied
		{
			height: auto;
		}

		html.fo-product-cards-immersive .tm-product-card .product-link .prices-container .price-container
		{
			font-size: 21px;
		}

		/* the old price sits INLINE, to the left of the new price (preview look) */
		html.fo-product-cards-immersive .tm-product-card .product-link .prices-container .old-price-container
		{
			display: inline-block;
			vertical-align: baseline;
			margin-right: 8px;
		}

	/* Full-width pill CTA, exactly like the preview. */
	html.fo-product-cards-immersive .tm-product-card .commands-container
	{
		padding: 0 12px 12px 12px;
	}

		html.fo-product-cards-immersive .tm-product-card .commands-container .add-to-cart-command,
		html.fo-product-cards-immersive .tm-product-card .commands-container .go-to-product-details-command
		{
			width: 100%;
		}

	html.fo-product-cards-immersive .tm-product-card .product-link .product-name
	{
		color: #fff;
		text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
	}

		html.fo-product-cards-immersive .tm-product-card .product-link .product-name:hover
		{
			color: var(--tm-primary-light, #dfeffc);
		}

	html.fo-product-cards-immersive .tm-product-card .product-link .product-subtitle,
	html.fo-product-cards-immersive .tm-product-card .product-link .product-code,
	html.fo-product-cards-immersive .tm-product-card .product-link .rating-container .reviews-count
	{
		color: rgba(255, 255, 255, .85);
	}

	html.fo-product-cards-immersive .tm-product-card .product-link .prices-container .old-price-container
	{
		color: rgba(255, 255, 255, .75);
	}

	html.fo-product-cards-immersive .tm-product-card .product-link .prices-container .price-container
	{
		color: #fff;
		text-shadow: 0 2px 8px rgba(0, 0, 0, .5);
	}

	html.fo-product-cards-immersive .tm-product-card .product-link .prices-container .price-reduction
	{
		color: rgba(255, 255, 255, .85);
	}

	html.fo-product-cards-immersive .tm-product-card .toolbar .product-command
	{
		color: rgba(255, 255, 255, .9);
		filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5));
	}

/* =========================================================================
   STICLA (Glass) - full-bleed image + frosted-glass info panel. The panel is
   anchored top:204px -> bottom:8px, so the voucher / reservations variants
   (which only ADD height below) stay fully covered by the glass.
   ========================================================================= */
html.fo-product-cards-glass .tm-product-card
{
	border-radius: var(--tm-card-radius, 16px);
	background: var(--tm-surface-alt, #f0f2f5);
	transition: transform .35s cubic-bezier(.2, .9, .3, 1.1), box-shadow .35s;
}

	html.fo-product-cards-glass .tm-product-card:hover
	{
		transform: translateY(-4px);
		box-shadow: 0 18px 40px rgba(0, 0, 0, .22);
	}

	html.fo-product-cards-glass .tm-product-card::before
	{
		content: '';
		position: absolute;
		left: 8px;
		right: 8px;
		top: 204px;
		bottom: 8px;
		z-index: 1;
		border-radius: 12px;
		pointer-events: none;
		background: rgba(255, 255, 255, .55);
		background: color-mix(in srgb, var(--tm-surface, #fff) 60%, transparent);
		border: 1px solid rgba(255, 255, 255, .35);
		border: 1px solid color-mix(in srgb, var(--tm-surface, #fff) 72%, transparent);
		-webkit-backdrop-filter: blur(14px) saturate(1.4);
		backdrop-filter: blur(14px) saturate(1.4);
		box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
		transition: transform .3s;
	}

	html.fo-product-cards-glass .tm-product-card:hover::before
	{
		transform: translateY(-2px);
	}

	html.fo-product-cards-glass .tm-product-card::after
	{
		display: none;
	}

/* Browsers without backdrop-filter: a near-opaque surface keeps the text readable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))
{
	html.fo-product-cards-glass .tm-product-card::before
	{
		background: rgba(255, 255, 255, .92);
		background: color-mix(in srgb, var(--tm-surface, #fff) 92%, transparent);
	}
}

/* =========================================================================
   ORIZONTAL (Horizontal) - two-column layout (image left, details right)
   with a FIXED height so every card on a row aligns perfectly.
   ========================================================================= */
html[class*="fo-product-cards-horizontal"] .tm-product-card
{
	height: 236px;
	border-radius: var(--tm-card-radius, 12px);
	border: 1px solid var(--tm-border, #e3e6ea);
	transition: transform .3s cubic-bezier(.25, 1.2, .4, 1), box-shadow .3s, border-color .3s;
}

	html[class*="fo-product-cards-horizontal"] .tm-product-card:hover
	{
		transform: translateY(-3px);
		box-shadow: 0 14px 30px rgba(0, 0, 0, .12);
		border-color: var(--tm-primary-light, #9ec9ee);
	}

	/* The functional-state variants only need extra room for their extra rows. */
	html[class*="fo-product-cards-horizontal"] .tm-product-card.has-voucher-applied
	{
		height: 305px;
	}

	html[class*="fo-product-cards-horizontal"] .tm-product-card.products-reservations-is-activated
	{
		height: 296px;
	}

	html[class*="fo-product-cards-horizontal"] .tm-product-card.products-reservations-is-activated.has-voucher-applied
	{
		height: 360px;
	}

	html[class*="fo-product-cards-horizontal"] .tm-product-card .product-link
	{
		display: grid;
		/* The image-zone width is a per-shop knob (BO -> Tema interfata -> "Latimea zonei
		   de imagine"), emitted as --tm-hcard-img-w (a %); unset = the standard 210px. */
		grid-template-columns: var(--tm-hcard-img-w, 210px) minmax(0, 1fr);
		grid-template-rows: auto auto 1fr;
		column-gap: 6px;
		height: 100%;
	}

	html[class*="fo-product-cards-horizontal"] .tm-product-card .tm-product-card-header
	{
		grid-column: 1;
		grid-row: 1 / span 3;
		position: relative;
	}

	html[class*="fo-product-cards-horizontal"] .tm-product-card .product-link .picture-wrapper
	{
		position: absolute;
		top: 10px;
		bottom: 10px;
		left: 10px;
		right: 4px;
		height: auto;
		margin: 0;
		border-radius: 8px;
		overflow: hidden;
		background: var(--tm-surface-alt, #f6f7f9);
	}

	html[class*="fo-product-cards-horizontal"] .tm-product-card .product-link .product-name
	{
		grid-column: 2;
		text-align: left;
		height: auto;
		min-height: 0;
		max-height: 88px;
		overflow: hidden;
		padding: 16px 46px 0 4px;
	}

		html[class*="fo-product-cards-horizontal"] .tm-product-card .product-link .product-name > span
		{
			position: static;
			transform: none;
			width: auto;
			max-width: none;
		}

	html[class*="fo-product-cards-horizontal"] .tm-product-card .product-link .product-subtitle
	{
		text-align: left;
	}

	html[class*="fo-product-cards-horizontal"] .tm-product-card .product-link .rating-container
	{
		grid-column: 2;
		text-align: left;
		padding: 2px 14px 0 4px;
		height: auto;
	}

	html[class*="fo-product-cards-horizontal"] .tm-product-card .product-link .prices-container
	{
		grid-column: 2;
		text-align: left;
		padding: 8px 14px 0 4px;
		height: auto;
	}

		html[class*="fo-product-cards-horizontal"] .tm-product-card .product-link .prices-container.has-voucher-applied
		{
			height: auto;
		}

	/* Actions pinned bottom-right, clear of the price column. */
	html[class*="fo-product-cards-horizontal"] .tm-product-card .commands-container
	{
		position: absolute;
		right: 12px;
		bottom: 10px;
		padding: 0;
		text-align: right;
		z-index: 2;
	}

/* On small screens the image column narrows (the card itself goes 1-per-row
   below the desktop breakpoint - see the per-row section at the bottom). */
@media (max-width: 575.98px)
{
	html[class*="fo-product-cards-horizontal"] .tm-product-card .product-link
	{
		grid-template-columns: var(--tm-hcard-img-w, 140px) minmax(0, 1fr);
	}
}

/* =========================================================================
   ORIZONTAL FOTO (HorizontalCover) - the horizontal layout, with the image
   filling its WHOLE left zone (object-fit: cover) instead of the standard
   centered-contain rendering. Everything else comes from the shared
   horizontal-family rules above.
   ========================================================================= */
html.fo-product-cards-horizontalcover .tm-product-card .product-link .picture-wrapper img.product-picture
{
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	transform: none;
	object-fit: cover;
	border-radius: 0;
	transition: transform 2.5s cubic-bezier(.2, .6, .3, 1);
}

html.fo-product-cards-horizontalcover .tm-product-card:hover .product-link .picture-wrapper img.product-picture
{
	transform: scale(1.06);
}

/* =========================================================================
   ORIZONTAL IMERSIV (HorizontalImmersive) - Horizontal + Immersive combined:
   the image covers the WHOLE horizontal card as a full-bleed background and
   the details sit on a diagonal scrim on the right. Layout (grid, fixed
   heights, per-row limits) comes from the shared horizontal-family rules.
   ========================================================================= */
html.fo-product-cards-horizontalimmersive .tm-product-card
{
	overflow: hidden;
	border: none;
	background: var(--tm-surface-alt, #f0f2f5);
}

	html.fo-product-cards-horizontalimmersive .tm-product-card:hover
	{
		border: none;
		box-shadow: 0 16px 34px rgba(0, 0, 0, .26);
	}

	/* The header escapes the grid and becomes the full-card background. */
	html.fo-product-cards-horizontalimmersive .tm-product-card .tm-product-card-header
	{
		position: absolute;
		inset: 0;
		z-index: 0;
	}

	html.fo-product-cards-horizontalimmersive .tm-product-card .product-link .picture-wrapper
	{
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		border-radius: 0;
		background: none;
	}

		html.fo-product-cards-horizontalimmersive .tm-product-card .product-link .picture-wrapper img.product-picture
		{
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			max-width: none;
			max-height: none;
			transform: none;
			object-fit: cover;
			border-radius: 0;
			transition: transform 4s cubic-bezier(.2, .6, .3, 1);
		}

	html.fo-product-cards-horizontalimmersive .tm-product-card:hover .product-link .picture-wrapper img.product-picture
	{
		transform: scale(1.06);
	}

	/* Banner scrim: the info cluster docks at the BOTTOM, so the veil darkens
	   progressively toward the bottom with a soft left vignette, letting the
	   photo shine on top - readable over ANY product photo. */
	html.fo-product-cards-horizontalimmersive .tm-product-card::before
	{
		content: '';
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;
		background: linear-gradient(180deg, rgba(0, 0, 0, .08) 0%, rgba(0, 0, 0, .14) 42%, rgba(0, 0, 0, .52) 70%, rgba(0, 0, 0, .82) 100%), linear-gradient(90deg, rgba(0, 0, 0, .26) 0%, rgba(0, 0, 0, 0) 52%);
	}

	/* The details use the WHOLE card width, starting from the LEFT (the photo
	   is the background, not a column) and dock at the BOTTOM, mirroring the
	   vertical Immersive: name / rating / price bottom-left, actions
	   bottom-right. */
	html.fo-product-cards-horizontalimmersive .tm-product-card .product-link
	{
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		height: 100%;
	}

	html.fo-product-cards-horizontalimmersive .tm-product-card .product-link .product-name
	{
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		height: auto;
		max-height: none;
		overflow: hidden;
		padding: 0 18px;
		font-size: 17px;
		letter-spacing: .2px;
		line-height: 1.3;
	}

	html.fo-product-cards-horizontalimmersive .tm-product-card .product-link .rating-container
	{
		height: auto;
		padding: 3px 14px 0 18px;
	}

	html.fo-product-cards-horizontalimmersive .tm-product-card .product-link .prices-container
	{
		height: auto;
		padding: 6px 230px 14px 18px;
	}

		html.fo-product-cards-horizontalimmersive .tm-product-card .product-link .prices-container .old-price-container
		{
			display: inline-block;
			vertical-align: baseline;
			margin-right: 8px;
		}

		html.fo-product-cards-horizontalimmersive .tm-product-card .product-link .prices-container .price-container
		{
			font-size: 20px;
		}

	/* The details paint above the scrim. */
	html.fo-product-cards-horizontalimmersive .tm-product-card .product-link .product-name,
	html.fo-product-cards-horizontalimmersive .tm-product-card .product-link .rating-container,
	html.fo-product-cards-horizontalimmersive .tm-product-card .product-link .prices-container,
	html.fo-product-cards-horizontalimmersive .tm-product-card .commands-container
	{
		position: relative;
		z-index: 2;
	}

	html.fo-product-cards-horizontalimmersive .tm-product-card .commands-container
	{
		position: absolute; /* stays pinned bottom-right (shared rule) - just lifted above the scrim */
		z-index: 2;
	}

	html.fo-product-cards-horizontalimmersive .tm-product-card .product-link .product-name
	{
		color: #fff;
		text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
	}

		html.fo-product-cards-horizontalimmersive .tm-product-card .product-link .product-name:hover
		{
			color: var(--tm-primary-light, #dfeffc);
		}

	html.fo-product-cards-horizontalimmersive .tm-product-card .product-link .product-subtitle,
	html.fo-product-cards-horizontalimmersive .tm-product-card .product-link .product-code,
	html.fo-product-cards-horizontalimmersive .tm-product-card .product-link .rating-container .reviews-count
	{
		color: rgba(255, 255, 255, .85);
	}

	html.fo-product-cards-horizontalimmersive .tm-product-card .product-link .prices-container .old-price-container
	{
		color: rgba(255, 255, 255, .75);
	}

	html.fo-product-cards-horizontalimmersive .tm-product-card .product-link .prices-container .price-container
	{
		color: #fff;
		text-shadow: 0 2px 8px rgba(0, 0, 0, .55);
	}

	html.fo-product-cards-horizontalimmersive .tm-product-card .product-link .prices-container .price-reduction
	{
		color: rgba(255, 255, 255, .85);
	}

	html.fo-product-cards-horizontalimmersive .tm-product-card .toolbar .product-command
	{
		color: rgba(255, 255, 255, .9);
		filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5));
	}

/* =========================================================================
   JUCAUS (Playful) - polaroid: slightly rotated cards, an accent "tape",
   springy straighten-and-pop on hover.
   ========================================================================= */
html.fo-product-cards-playful .tm-product-card
{
	--tm-playful-base: -1.2deg;
	border-radius: var(--tm-card-radius, 6px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, .10);
	transform: rotate(var(--tm-playful-base));
	transition: transform .45s cubic-bezier(.25, 1.6, .4, 1), box-shadow .45s;
}

	html.fo-product-cards-playful .tm-product-card:nth-of-type(even)
	{
		--tm-playful-base: 1.3deg;
	}

	html.fo-product-cards-playful .tm-product-card:nth-of-type(3n)
	{
		--tm-playful-base: -.5deg;
	}

	html.fo-product-cards-playful .tm-product-card:hover
	{
		transform: rotate(0) scale(1.03);
		box-shadow: 0 16px 34px rgba(0, 0, 0, .16);
		z-index: 5;
	}

	/* The decorative "tape" over the top edge, in the theme accent. */
	html.fo-product-cards-playful .tm-product-card::before
	{
		content: '';
		position: absolute;
		top: -9px;
		left: 50%;
		transform: translateX(-50%) rotate(-3deg);
		width: 74px;
		height: 20px;
		border-radius: 2px;
		z-index: 11;
		background: var(--tm-accent-light, #ffa86f);
		opacity: .55;
		pointer-events: none;
	}

	html.fo-product-cards-playful .tm-product-card::after
	{
		display: none;
	}

	html.fo-product-cards-playful .tm-product-card .product-link .picture-wrapper
	{
		background: var(--tm-surface-alt, #f4f6f9);
		border-radius: 4px;
		overflow: hidden;
	}

		html.fo-product-cards-playful .tm-product-card .product-link .picture-wrapper img.product-picture
		{
			transition: transform .5s cubic-bezier(.3, 1.8, .4, 1);
		}

	html.fo-product-cards-playful .tm-product-card:hover .product-link .picture-wrapper img.product-picture
	{
		transform: translateX(-50%) translateY(-50%) scale(1.1) rotate(3deg);
	}

	html.fo-product-cards-playful .tm-product-card .product-link .product-name
	{
		font-weight: 700;
		color: var(--tm-text, #444);
	}

/* ---- Playful "Animat" (BO -> Miscare carduri): a light breeze. Each polaroid
   swings VERY gently around its tape (transform-origin above the top edge =
   pendulum pivot) with pseudo-random durations/phases per grid position, and
   its shadow breathes softly (the subtle 3D lift). The keyframes animate the
   registered --tm-playful-sway angle - NOT transform - so hover never has to
   cancel the animation (an `animation: none` on hover snaps: browsers do not
   transition away from an animation-driven transform). On hover the sway keeps
   running but --tm-playful-wind eases to 0, so the card straightens & pops
   under the springy transition and eases back into the breeze mid-phase on
   mouse-out. The extra hover depth comes from a transitioned drop-shadow
   filter, because box-shadow stays owned by the breathing lift animation.
   prefers-reduced-motion disables it. ---- */
@property --tm-playful-sway
{
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}

@property --tm-playful-wind
{
	syntax: '<number>';
	inherits: false;
	initial-value: 1;
}

@property --tm-playful-pop
{
	syntax: '<number>';
	inherits: false;
	initial-value: 1;
}

html.fo-product-cards-playful.fo-product-cards-playful-animated .tm-product-card
{
	transform-origin: 50% -8px;
	transform: rotate(calc((var(--tm-playful-base, -1.2deg) + var(--tm-playful-sway, 0deg)) * var(--tm-playful-wind, 1))) scale(var(--tm-playful-pop, 1));
	animation: tm-playful-sway var(--tm-playful-sway-dur, 6.4s) ease-in-out infinite, tm-playful-lift 11s ease-in-out infinite;
	transition: --tm-playful-wind .45s cubic-bezier(.25, 1.6, .4, 1), --tm-playful-pop .45s cubic-bezier(.25, 1.6, .4, 1), filter .45s;
}

	html.fo-product-cards-playful.fo-product-cards-playful-animated .tm-product-card:nth-of-type(2n)
	{
		--tm-playful-sway-dur: 7.9s;
		animation-delay: -2.6s, -3.7s;
	}

	html.fo-product-cards-playful.fo-product-cards-playful-animated .tm-product-card:nth-of-type(3n)
	{
		--tm-playful-sway-dur: 5.6s;
		animation-delay: -4.2s, -6.1s;
	}

	html.fo-product-cards-playful.fo-product-cards-playful-animated .tm-product-card:nth-of-type(5n)
	{
		--tm-playful-sway-dur: 8.7s;
		animation-delay: -1.4s, -8.3s;
	}

	html.fo-product-cards-playful.fo-product-cards-playful-animated .tm-product-card:hover
	{
		/* the wind eases out (never `animation: none` - that snaps) and the
		   straighten-and-pop rides the custom-property transitions above */
		--tm-playful-wind: 0;
		--tm-playful-pop: 1.03;
		transform: rotate(calc((var(--tm-playful-base, -1.2deg) + var(--tm-playful-sway, 0deg)) * var(--tm-playful-wind, 1))) scale(var(--tm-playful-pop, 1));
		filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .08));
	}

@keyframes tm-playful-sway
{
	0%, 100%
	{
		--tm-playful-sway: 0deg;
	}

	28%
	{
		--tm-playful-sway: .85deg;
	}

	46%
	{
		--tm-playful-sway: .25deg;
	}

	64%
	{
		--tm-playful-sway: -.7deg;
	}

	82%
	{
		--tm-playful-sway: -.15deg;
	}
}

@keyframes tm-playful-lift
{
	0%, 100%
	{
		box-shadow: 0 6px 16px rgba(0, 0, 0, .10);
	}

	38%
	{
		box-shadow: 0 12px 26px rgba(0, 0, 0, .14);
	}

	62%
	{
		box-shadow: 0 9px 21px rgba(0, 0, 0, .12);
	}
}

/* =========================================================================
   CRISTAL (Crystal) - maximum glass: the whole card body is frosted glass
   over an animated, theme-coloured aurora; a light sheen sweeps across on
   hover.
   ========================================================================= */
html.fo-product-cards-crystal .tm-product-card
{
	border-radius: var(--tm-card-radius, 18px);
	overflow: hidden;
	background: transparent;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
	transition: transform .4s cubic-bezier(.22, .9, .3, 1.1), box-shadow .4s;
}

	html.fo-product-cards-crystal .tm-product-card:hover
	{
		transform: translateY(-5px);
		box-shadow: 0 24px 50px rgba(0, 0, 0, .22);
	}

	/* The aurora living UNDER the glass - theme primary/secondary/accent blobs. */
	html.fo-product-cards-crystal .tm-product-card::before
	{
		content: '';
		position: absolute;
		inset: -40%;
		z-index: 0;
		pointer-events: none;
		filter: blur(30px);
		opacity: .9;
		background: var(--tm-surface-alt, #f4f6f9);
		background: radial-gradient(38% 45% at 22% 28%, color-mix(in srgb, var(--tm-primary, #0088d4) 60%, transparent) 0%, transparent 70%), radial-gradient(42% 46% at 78% 22%, color-mix(in srgb, var(--tm-secondary, #00c893) 55%, transparent) 0%, transparent 70%), radial-gradient(46% 52% at 62% 84%, color-mix(in srgb, var(--tm-accent, #ff6500) 48%, transparent) 0%, transparent 72%), var(--tm-surface-alt, #f4f6f9);
		animation: tm-card-aurora 14s ease-in-out infinite alternate;
	}

	/* The glass body layered over the aurora (replaces the gradient line). It
	   covers the WHOLE card - no inner frame ring - so the card itself reads as
	   a single sheet of glass; a soft inner highlight suggests the material. */
	html.fo-product-cards-crystal .tm-product-card::after
	{
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		height: auto;
		width: auto;
		transform: none;
		opacity: 1;
		z-index: 1;
		border-radius: var(--tm-card-radius, 18px);
		pointer-events: none;
		background: rgba(255, 255, 255, .4);
		background: color-mix(in srgb, var(--tm-surface, #fff) 42%, transparent);
		-webkit-backdrop-filter: blur(16px) saturate(1.5);
		backdrop-filter: blur(16px) saturate(1.5);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 0 0 1px rgba(255, 255, 255, .14);
	}

	html.fo-product-cards-crystal .tm-product-card:hover::after
	{
		width: auto;
		opacity: 1;
	}

	html.fo-product-cards-crystal .tm-product-card .product-link
	{
		position: relative;
		z-index: 2;
	}

		/* The sheen: a light ray sweeps across the glass SUBTLY every few seconds
		   on its own, and brighter/faster on hover. */
		html.fo-product-cards-crystal .tm-product-card .product-link::after
		{
			content: '';
			position: absolute;
			inset: 0;
			z-index: 3;
			pointer-events: none;
			background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .22) 47%, rgba(255, 255, 255, .06) 53%, transparent 64%);
			transform: translateX(-135%);
			animation: tm-card-crystal-sheen 9s cubic-bezier(.4, .1, .2, 1) infinite;
		}

	html.fo-product-cards-crystal .tm-product-card:hover .product-link::after
	{
		background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .38) 47%, rgba(255, 255, 255, .1) 53%, transparent 64%);
		animation: tm-card-crystal-sheen-hover .85s cubic-bezier(.4, .1, .2, 1);
		animation-fill-mode: forwards;
	}

	html.fo-product-cards-crystal .tm-product-card .commands-container
	{
		position: relative;
		z-index: 2;
		padding: 8px 20px 18px 20px; /* breathing room - the actions must not kiss the glass edge */
	}

	/* The picture sits directly on the glass - only a whisper of a vitrine
	   (no visible border, so the top of the card reads as ONE sheet of glass). */
	html.fo-product-cards-crystal .tm-product-card .product-link .picture-wrapper
	{
		/* slightly shorter vitrine: the fixed card height must keep real breathing
		   room under the actions (200px would push the button onto the bottom edge) */
		height: 180px;
		background: rgba(255, 255, 255, .18);
		background: color-mix(in srgb, var(--tm-surface, #fff) 18%, transparent);
		border-radius: 12px;
		overflow: hidden;
		margin: 14px 16px 0 16px;
	}

	html.fo-product-cards-crystal .tm-product-card .product-link .product-name
	{
		color: var(--tm-text, #333);
	}

@keyframes tm-card-crystal-sheen
{
	0%
	{
		transform: translateX(-135%);
	}

	14%
	{
		transform: translateX(135%);
	}

	100%
	{
		transform: translateX(135%);
	}
}

@keyframes tm-card-crystal-sheen-hover
{
	from
	{
		transform: translateX(-135%);
	}

	to
	{
		transform: translateX(135%);
	}
}

@keyframes tm-card-aurora
{
	from
	{
		transform: rotate(0deg) scale(1);
	}

	to
	{
		transform: rotate(16deg) scale(1.15);
	}
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))
{
	html.fo-product-cards-crystal .tm-product-card::after
	{
		background: rgba(255, 255, 255, .82);
		background: color-mix(in srgb, var(--tm-surface, #fff) 85%, transparent);
	}
}

/* =========================================================================
   HOLO - 3D tilt toward the cursor (JS in own.os.product.cards.js sets the
   inline transform + the --tm-holo-gx/gy vars) with a holographic glare and
   a theme-gradient border that lights up on hover.
   ========================================================================= */
html.fo-product-cards-holo .tm-product-card
{
	border-radius: var(--tm-card-radius, 16px);
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .10);
	transition: transform .5s cubic-bezier(.2, .9, .3, 1), box-shadow .4s;
	will-change: transform;
}

	html.fo-product-cards-holo .tm-product-card:hover
	{
		box-shadow: 0 22px 46px rgba(0, 0, 0, .2);
	}

	/* Holographic gradient border (masked ring). */
	html.fo-product-cards-holo .tm-product-card::before
	{
		content: '';
		position: absolute;
		inset: 0;
		z-index: 4;
		border-radius: var(--tm-card-radius, 16px);
		padding: 1.5px;
		pointer-events: none;
		background: linear-gradient(130deg, var(--tm-primary, #0088d4), var(--tm-secondary, #00c893), var(--tm-accent, #ff6500), var(--tm-primary, #0088d4));
		-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
		-webkit-mask-composite: xor;
		mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
		mask-composite: exclude;
		opacity: .35;
		transition: opacity .35s;
	}

	html.fo-product-cards-holo .tm-product-card:hover::before
	{
		opacity: 1;
	}

	/* The glare following the cursor (replaces the gradient line). */
	html.fo-product-cards-holo .tm-product-card::after
	{
		content: '';
		position: absolute;
		inset: 0;
		height: auto;
		width: auto;
		left: 0;
		transform: none;
		z-index: 3;
		border-radius: var(--tm-card-radius, 16px);
		pointer-events: none;
		background: radial-gradient(320px circle at var(--tm-holo-gx, 50%) var(--tm-holo-gy, 40%), rgba(255, 255, 255, .38) 0%, transparent 62%);
		mix-blend-mode: overlay;
		opacity: 0;
		transition: opacity .3s;
	}

	html.fo-product-cards-holo .tm-product-card:hover::after
	{
		width: auto;
		opacity: 1;
	}

/* =========================================================================
   LUXE - elegant: hairline accent frame whose corners refine on hover,
   serif name, spaced small-caps subtitle, quiet prices.
   ========================================================================= */
html.fo-product-cards-luxe .tm-product-card
{
	background: var(--tm-surface, #fff);
	border: 1px solid rgba(255, 101, 0, .35); /* the outer border follows the theme accent */
	border: 1px solid color-mix(in srgb, var(--tm-accent, #ff6500) 38%, transparent);
	border-radius: var(--tm-card-radius, 0);
	box-shadow: none;
	transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s;
}

	html.fo-product-cards-luxe .tm-product-card:hover
	{
		transform: translateY(-4px);
		box-shadow: 0 16px 36px rgba(0, 0, 0, .10);
	}

	/* The hairline frame (replaces the gradient line). */
	html.fo-product-cards-luxe .tm-product-card::after
	{
		content: '';
		position: absolute;
		left: 8px;
		right: 8px;
		top: 8px;
		bottom: 8px;
		height: auto;
		width: auto;
		transform: none;
		opacity: .5;
		z-index: 4;
		border-radius: var(--tm-card-radius, 0);
		background: none;
		border: 1px solid var(--tm-accent, #c8a24a);
		pointer-events: none;
		transition: inset .45s cubic-bezier(.2, .8, .2, 1), opacity .45s;
	}

	html.fo-product-cards-luxe .tm-product-card:hover::after
	{
		left: 5px;
		right: 5px;
		top: 5px;
		bottom: 5px;
		width: auto;
		opacity: .9;
	}

	html.fo-product-cards-luxe .tm-product-card .product-link .picture-wrapper img.product-picture
	{
		transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
	}

	html.fo-product-cards-luxe .tm-product-card:hover .product-link .picture-wrapper img.product-picture
	{
		transform: translateX(-50%) translateY(-50%) scale(1.05);
	}

	html.fo-product-cards-luxe .tm-product-card .product-link .product-name
	{
		font-family: Georgia, 'Times New Roman', serif;
		font-weight: 600;
		letter-spacing: .4px;
		color: var(--tm-text, #333);
	}

	html.fo-product-cards-luxe .tm-product-card .product-link .product-subtitle
	{
		text-transform: uppercase;
		letter-spacing: 2px;
		font-size: 11px;
		font-style: normal;
	}

	html.fo-product-cards-luxe .tm-product-card .product-link .prices-container .price-container
	{
		font-family: Georgia, 'Times New Roman', serif;
		color: var(--tm-text, #333);
	}

/* =========================================================================
   DUOTON (Duotone) - the product images render duotone in the THEME gradient
   (primary -> secondary); hovering the card reveals the true colours. Only
   the image treatment changes - no element is added or swapped (the branded
   no-picture placeholder is intentionally left untouched).
   ========================================================================= */
html.fo-product-cards-duotone .tm-product-card .product-link .picture-wrapper img.product-picture
{
	filter: grayscale(1) contrast(1.05);
	transition: filter .5s, transform .3s;
}

html.fo-product-cards-duotone .tm-product-card:hover .product-link .picture-wrapper img.product-picture
{
	filter: none;
}

/* The theme tint layered over the (grayscale) picture. :has() scopes it to
   cards that actually show a real image, so the placeholder stays untinted;
   browsers without :has() simply skip the tint (grayscale-only fallback). */
html.fo-product-cards-duotone .tm-product-card .product-link .picture-wrapper:has(img.product-picture:not(.d-none))::before
{
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	mix-blend-mode: color;
	border-radius: 5px;
	background: linear-gradient(120deg, var(--tm-primary, #0088d4), var(--tm-secondary, #00c893));
	transition: opacity .5s;
}

html.fo-product-cards-duotone .tm-product-card:hover .product-link .picture-wrapper:has(img.product-picture:not(.d-none))::before
{
	opacity: 0;
}

html.fo-product-cards-duotone .tm-product-card .product-link .product-name
{
	font-weight: 700;
	color: var(--tm-text, #444);
}

/* =========================================================================
   SCHITA (Sketch) - hand-drawn: irregular "sketched" borders, dashed image
   frame, handwriting-style name; the card wobbles and the price gets circled
   "with a pen" on hover.
   ========================================================================= */
html.fo-product-cards-sketch .tm-product-card
{
	background: var(--tm-surface, #fff);
	border: 2px solid var(--tm-primary, #0088d4); /* the "pen" draws in the theme's primary */
	border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
	box-shadow: 3px 4px 0 rgba(0, 136, 212, .28);
	box-shadow: 3px 4px 0 color-mix(in srgb, var(--tm-primary, #0088d4) 30%, transparent);
}

	html.fo-product-cards-sketch .tm-product-card:hover
	{
		animation: tm-card-wobble .5s ease-in-out;
		box-shadow: 4px 5px 0 rgba(0, 136, 212, .36);
		box-shadow: 4px 5px 0 color-mix(in srgb, var(--tm-primary, #0088d4) 38%, transparent);
	}

	html.fo-product-cards-sketch .tm-product-card::after
	{
		display: none;
	}

	html.fo-product-cards-sketch .tm-product-card .product-link .picture-wrapper
	{
		border: 2px dashed rgba(0, 200, 147, .55);
		border: 2px dashed color-mix(in srgb, var(--tm-secondary, #00c893) 55%, transparent);
		border-radius: 125px 12px 115px 12px / 12px 115px 12px 125px;
		margin: 8px 12px 0 12px;
		overflow: hidden;
		background: var(--tm-surface-alt, #fafafa);
	}

		html.fo-product-cards-sketch .tm-product-card .product-link .picture-wrapper img.product-picture
		{
			transition: transform .4s cubic-bezier(.3, 1.6, .4, 1);
		}

	html.fo-product-cards-sketch .tm-product-card:hover .product-link .picture-wrapper img.product-picture
	{
		transform: translateX(-50%) translateY(-50%) scale(1.07) rotate(-4deg);
	}

	html.fo-product-cards-sketch .tm-product-card .product-link .product-name
	{
		font-family: 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive;
		font-size: 15px;
		color: var(--tm-text, #333);
	}

	/* The price gets "circled with a pen" (theme accent) on hover. */
	html.fo-product-cards-sketch .tm-product-card .product-link .prices-container .price-container
	{
		position: relative;
	}

		html.fo-product-cards-sketch .tm-product-card .product-link .prices-container .price-container::before
		{
			content: '';
			position: absolute;
			top: -4px;
			bottom: -4px;
			left: -12px;
			right: -12px;
			border: 2px solid var(--tm-accent, #ff6500);
			border-radius: 48% 52% 46% 54% / 58% 44% 56% 42%;
			transform: rotate(-2deg) scale(.85);
			opacity: 0;
			pointer-events: none;
			transition: transform .3s cubic-bezier(.2, 1.5, .4, 1), opacity .25s;
		}

	html.fo-product-cards-sketch .tm-product-card:hover .product-link .prices-container .price-container::before
	{
		opacity: 1;
		transform: rotate(-2deg) scale(1);
	}

@keyframes tm-card-wobble
{
	0%, 100%
	{
		transform: rotate(0);
	}

	25%
	{
		transform: rotate(.8deg);
	}

	50%
	{
		transform: rotate(-.6deg);
	}

	75%
	{
		transform: rotate(.4deg);
	}
}

/* =========================================================================
   NEON - electric showcase: dark body with a neon-tube contour in a theme
   colour (primary by default; the "Culoare neon" knob chains
   fo-product-cards-neon-secondary / -accent), a glowing price and a short
   electric flicker when the card is hovered. Every colour derives from the
   --tm-neon custom property, so the whole sign re-wires with one token.
   ========================================================================= */
html.fo-product-cards-neon .tm-product-card
{
	--tm-neon: var(--tm-primary, #0088d4);
	background: var(--tm-footer-bg, #16181f);
	border: 1px solid var(--tm-neon);
	border-radius: var(--tm-card-radius, 12px);
	box-shadow: 0 0 14px rgba(0, 136, 212, .40), inset 0 0 22px rgba(0, 136, 212, .10);
	box-shadow: 0 0 14px color-mix(in srgb, var(--tm-neon) 42%, transparent), inset 0 0 22px color-mix(in srgb, var(--tm-neon) 10%, transparent);
	transition: box-shadow .35s, transform .35s;
}

	html.fo-product-cards-neon.fo-product-cards-neon-secondary .tm-product-card
	{
		--tm-neon: var(--tm-secondary, #00c893);
	}

	html.fo-product-cards-neon.fo-product-cards-neon-accent .tm-product-card
	{
		--tm-neon: var(--tm-accent, #ff6500);
	}

	html.fo-product-cards-neon .tm-product-card:hover
	{
		transform: translateY(-3px);
		box-shadow: 0 0 26px rgba(0, 136, 212, .60), inset 0 0 30px rgba(0, 136, 212, .14);
		box-shadow: 0 0 26px color-mix(in srgb, var(--tm-neon) 62%, transparent), inset 0 0 30px color-mix(in srgb, var(--tm-neon) 14%, transparent);
		animation: tm-card-neon-flicker .9s linear 1;
	}

	/* the standard bottom gradient line has no place on a neon sign */
	html.fo-product-cards-neon .tm-product-card::after
	{
		display: none;
	}

	/* the picture sits in a faint dark vitrine so white product shots read as photos */
	html.fo-product-cards-neon .tm-product-card .product-link .picture-wrapper
	{
		background: rgba(255, 255, 255, .05);
		border-radius: 8px;
		overflow: hidden;
	}

	html.fo-product-cards-neon .tm-product-card .product-link .product-name
	{
		color: #f2f4f8;
	}

		html.fo-product-cards-neon .tm-product-card .product-link .product-name:hover
		{
			color: var(--tm-neon);
			text-shadow: 0 0 12px rgba(0, 136, 212, .55);
			text-shadow: 0 0 12px color-mix(in srgb, var(--tm-neon) 55%, transparent);
		}

	html.fo-product-cards-neon .tm-product-card .product-link .product-subtitle,
	html.fo-product-cards-neon .tm-product-card .product-link .product-code,
	html.fo-product-cards-neon .tm-product-card .product-link .rating-container .reviews-count
	{
		color: rgba(255, 255, 255, .65);
	}

	html.fo-product-cards-neon .tm-product-card .product-link .prices-container .old-price-container
	{
		color: rgba(255, 255, 255, .55);
	}

	html.fo-product-cards-neon .tm-product-card .product-link .prices-container .price-container
	{
		color: var(--tm-neon);
		text-shadow: 0 0 14px rgba(0, 136, 212, .55);
		text-shadow: 0 0 14px color-mix(in srgb, var(--tm-neon) 55%, transparent);
	}

	html.fo-product-cards-neon .tm-product-card .product-link .prices-container .price-reduction
	{
		color: rgba(255, 255, 255, .8);
	}

	html.fo-product-cards-neon .tm-product-card .toolbar .product-command
	{
		color: rgba(255, 255, 255, .85);
	}

	/* the light no-picture tile would blind on the dark body - dim it */
	html.fo-product-cards-neon .tm-product-card .product-link .picture-wrapper .product-picture-placeholder
	{
		background: rgba(255, 255, 255, .05);
	}

		html.fo-product-cards-neon .tm-product-card .product-link .picture-wrapper .product-picture-placeholder::before
		{
			display: none;
		}

		html.fo-product-cards-neon .tm-product-card .product-link .picture-wrapper .product-picture-placeholder .pp-label
		{
			color: rgba(255, 255, 255, .7);
		}

@keyframes tm-card-neon-flicker
{
	0%, 100%
	{
		opacity: 1;
	}

	6%
	{
		opacity: .72;
	}

	10%
	{
		opacity: 1;
	}

	16%
	{
		opacity: .84;
	}

	24%
	{
		opacity: 1;
	}
}

/* =========================================================================
   CUPON (Ticket) - the card becomes a shopping coupon: punched notches on
   both edges, a dashed perforation right above the price "stub" (whose zone
   is faintly accent-tinted), a small barcode, and a cheeky tilt on hover.
   The perforation, the notches AND the stub tint are all anchored to the
   prices row itself (flow-anchored), NOT to a fixed px offset - the row
   heights above it differ per context (e.g. the product-details related
   products use a shorter picture zone), so a hardcoded 330px line drifts.
   ========================================================================= */
html.fo-product-cards-ticket .tm-product-card
{
	background: var(--tm-surface, #fff);
	/* the bottom band covers the (variable-height) sliver of card below the
	   commands strip, in the same stub tint, respecting the rounded corners;
	   the stub itself is tinted by the prices/commands rules below */
	background: linear-gradient(0deg, #fff6f0 0 40px, var(--tm-surface, #fff) 40px);
	background: linear-gradient(0deg, color-mix(in srgb, var(--tm-accent, #ff6500) 6%, var(--tm-surface, #fff)) 0 40px, var(--tm-surface, #fff) 40px);
	border: 1px solid var(--tm-border, #dfe3e8);
	border-radius: var(--tm-card-radius, 10px);
	box-shadow: 0 3px 10px rgba(0, 0, 0, .07);
	transition: transform .35s cubic-bezier(.25, 1.4, .4, 1), box-shadow .35s;
}

	html.fo-product-cards-ticket .tm-product-card:hover
	{
		transform: rotate(-.8deg) translateY(-3px);
		box-shadow: 0 12px 26px rgba(0, 0, 0, .12);
	}

	/* the base card pseudo-elements (hover gradient line) are not used here */
	html.fo-product-cards-ticket .tm-product-card::before,
	html.fo-product-cards-ticket .tm-product-card::after
	{
		display: none;
	}

	/* the dashed perforation above the price stub + the stub tint (the tint
	   continues on the commands strip and the card's bottom band) */
	html.fo-product-cards-ticket .tm-product-card .product-link .prices-container
	{
		position: relative;
		border-top: 2px dashed var(--tm-border, #ccd2d9);
		background: #fff6f0;
		background: color-mix(in srgb, var(--tm-accent, #ff6500) 6%, var(--tm-surface, #fff));
	}

		/* the punched notches ride the perforation line itself: a thin strip
		   pseudo centered on the dashed border, drawing one bordered circle at
		   each end (they "cut" into the page background) - so they stay glued
		   to the REAL line in every page/layout context */
		html.fo-product-cards-ticket .tm-product-card .product-link .prices-container::after
		{
			content: '';
			position: absolute;
			top: -11px;
			left: -10px;
			right: -10px;
			height: 20px;
			pointer-events: none;
			z-index: 2;
			background:
				radial-gradient(circle at 9px 9px, var(--tm-body-bg, #dfe7f1) 7.5px, var(--tm-border, #dfe3e8) 8px 8.5px, transparent 9.5px) left top / 18px 18px no-repeat,
				radial-gradient(circle at 9px 9px, var(--tm-body-bg, #dfe7f1) 7.5px, var(--tm-border, #dfe3e8) 8px 8.5px, transparent 9.5px) right top / 18px 18px no-repeat;
		}

	html.fo-product-cards-ticket .tm-product-card .commands-container
	{
		background: #fff6f0;
		background: color-mix(in srgb, var(--tm-accent, #ff6500) 6%, var(--tm-surface, #fff));
		border-radius: 0 0 var(--tm-card-radius, 10px) var(--tm-card-radius, 10px);
	}

		/* the barcode - pure gradient, prints itself in the text colour */
		html.fo-product-cards-ticket .tm-product-card .product-link .prices-container::before
		{
			content: '';
			position: absolute;
			right: 14px;
			top: 12px;
			width: 44px;
			height: 20px;
			opacity: .28;
			pointer-events: none;
			background: repeating-linear-gradient(90deg, var(--tm-text, #333) 0 2px, transparent 2px 4px, var(--tm-text, #333) 4px 5px, transparent 5px 8px);
		}

	html.fo-product-cards-ticket .tm-product-card .product-link .prices-container .price-container
	{
		color: var(--tm-accent, #ff6500);
		font-weight: 800;
	}

	html.fo-product-cards-ticket .tm-product-card .product-link .product-name
	{
		font-weight: 600;
		color: var(--tm-text, #444);
	}

/* =========================================================================
   BUSINESS - crisp and corporate (the product twin of the article Business
   style): a slim gradient bar in the theme colours crowns a precisely
   bordered card, the typography aligns left in a firm hierarchy and the
   card lifts discreetly on hover.
   ========================================================================= */
html.fo-product-cards-business .tm-product-card
{
	background: var(--tm-surface, #fff);
	border: 1px solid var(--tm-border, #e3e7ec);
	border-radius: var(--tm-card-radius, 8px);
	box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

	html.fo-product-cards-business .tm-product-card:hover
	{
		transform: translateY(-3px);
		border-color: var(--tm-primary, #0088d4);
		box-shadow: 0 12px 28px -12px rgba(16, 24, 40, .20);
	}

	/* the signature top bar (repurposes the base bottom gradient line) */
	html.fo-product-cards-business .tm-product-card::after
	{
		top: 0;
		bottom: auto;
		left: 0;
		right: 0;
		height: 3px;
		width: auto;
		transform: none;
		opacity: 1;
		z-index: 3;
		background: linear-gradient(90deg, var(--tm-primary, #0088d4), var(--tm-secondary, #00c893));
		border-radius: var(--tm-card-radius, 8px) var(--tm-card-radius, 8px) 0 0;
	}

	html.fo-product-cards-business .tm-product-card:hover::after
	{
		width: auto;
		opacity: 1;
	}

	/* a hairline separates the photo zone from the structured text block */
	html.fo-product-cards-business .tm-product-card .product-link .tm-product-card-header
	{
		border-bottom: 1px solid var(--tm-border, #eef0f3);
	}

	html.fo-product-cards-business .tm-product-card .product-link .product-name
	{
		text-align: left;
		padding: 12px 16px 0 16px;
		font-weight: 600;
		letter-spacing: .1px;
		color: var(--tm-text, #2c3038);
	}

		html.fo-product-cards-business .tm-product-card .product-link .product-name > span
		{
			position: static;
			transform: none;
			width: auto;
			max-width: none;
		}

	html.fo-product-cards-business .tm-product-card .product-link .product-subtitle
	{
		text-align: left;
		text-transform: uppercase;
		letter-spacing: 1px;
		font-size: 11px;
		font-style: normal;
	}

	html.fo-product-cards-business .tm-product-card .product-link .rating-container
	{
		text-align: left;
		padding: 0 16px;
	}

	html.fo-product-cards-business .tm-product-card .product-link .prices-container
	{
		text-align: left;
		padding: 10px 16px;
	}

		html.fo-product-cards-business .tm-product-card .product-link .prices-container .price-container
		{
			color: var(--tm-text, #2c3038);
			font-weight: 700;
		}

/* =========================================================================
   VITRINA (Showroom) - the product on a lit stage: a soft spotlight beam
   falls from above, an elliptical floor shadow grounds the product, and on
   hover the product levitates while the shadow eases away. The optional
   "Floating" knob (html.fo-product-cards-showroom-floating) keeps it
   levitating continuously.
   ========================================================================= */
html.fo-product-cards-showroom .tm-product-card
{
	background: var(--tm-surface, #fff);
	border-radius: var(--tm-card-radius, 14px);
	box-shadow: 0 6px 24px rgba(0, 0, 0, .07);
	transition: transform .4s cubic-bezier(.2, .9, .3, 1.1), box-shadow .4s;
}

	html.fo-product-cards-showroom .tm-product-card:hover
	{
		transform: translateY(-4px);
		box-shadow: 0 16px 40px rgba(0, 0, 0, .13);
	}

	html.fo-product-cards-showroom .tm-product-card::after
	{
		display: none;
	}

	/* the stage: a light wash from above over a gently graded floor.
	   isolation keeps the beam's screen-blend from reaching through the card
	   to whatever is painted behind it */
	html.fo-product-cards-showroom .tm-product-card .product-link .picture-wrapper
	{
		margin: 0;
		background: linear-gradient(180deg, #e7eaef 0%, #ffffff 78%);
		background: radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--tm-primary, #0088d4) 12%, transparent) 0%, transparent 60%), linear-gradient(180deg, color-mix(in srgb, var(--tm-surface-alt, #f2f4f7) 93%, black) 0%, var(--tm-surface, #fff) 78%);
		border-radius: var(--tm-card-radius, 14px) var(--tm-card-radius, 14px) 0 0;
		overflow: hidden;
		isolation: isolate;
	}

		/* the spotlight cone - painted ABOVE the product picture (z-index 2 vs.
		   the img's 1) so the light visibly falls ON the product; blended with
		   `screen` so it brightens like real light instead of fogging the photo.
		   The beam is a conic gradient fanned from an apex just above the stage:
		   the angular ramps on each side are the soft feathered edges of the
		   cone (the old clip-path cut them razor-sharp), a slight blur softens
		   it further, and a vertical mask dissolves it before the floor */
		html.fo-product-cards-showroom .tm-product-card .product-link .picture-wrapper::before
		{
			content: '';
			position: absolute;
			inset: 0;
			background: conic-gradient(from 158deg at 50% -12%, transparent 0deg, rgba(255, 255, 255, .52) 14deg, rgba(255, 255, 255, .72) 22deg, rgba(255, 255, 255, .52) 30deg, transparent 44deg);
			-webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .72) 48%, transparent 84%);
			mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .72) 48%, transparent 84%);
			filter: blur(6px);
			mix-blend-mode: screen;
			opacity: .72;
			transition: opacity .4s;
			pointer-events: none;
			z-index: 2;
		}

		/* the elliptical floor shadow under the product */
		html.fo-product-cards-showroom .tm-product-card .product-link .picture-wrapper::after
		{
			content: '';
			position: absolute;
			left: 50%;
			bottom: 7px;
			transform: translateX(-50%);
			width: 56%;
			height: 12px;
			border-radius: 50%;
			background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .26) 0%, transparent 72%);
			transition: width .45s, opacity .45s;
			pointer-events: none;
			z-index: 0;
		}

	html.fo-product-cards-showroom .tm-product-card:hover .product-link .picture-wrapper::before
	{
		opacity: .95;
	}

	html.fo-product-cards-showroom .tm-product-card:hover .product-link .picture-wrapper::after
	{
		width: 44%;
		opacity: .6;
	}

	/* the product hovers a touch above its shadow, and lifts higher on hover */
	html.fo-product-cards-showroom .tm-product-card .product-link .picture-wrapper img.product-picture
	{
		max-height: 80%;
		max-width: 86%;
		z-index: 1;
		transform: translateX(-50%) translateY(calc(-50% - 8px));
		filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .10));
		transition: transform .45s cubic-bezier(.2, .9, .3, 1.1), filter .45s;
	}

	html.fo-product-cards-showroom .tm-product-card:hover .product-link .picture-wrapper img.product-picture
	{
		transform: translateX(-50%) translateY(calc(-50% - 16px)) scale(1.04);
		filter: drop-shadow(0 16px 12px rgba(0, 0, 0, .12));
	}

	html.fo-product-cards-showroom .tm-product-card .product-link .product-name
	{
		letter-spacing: .3px;
		color: var(--tm-text, #333);
	}

/* ---- Showroom spotlight intensity (BO -> "Intensitate spot"): the built-in
   beam is discreet; "Intens" (spot-bold) makes the cone clearly visible -
   wider, brighter, over a slightly deeper stage; "Dramatic" (spot-dramatic)
   turns it into a real stage light: a near-solid beam with a bright lamp
   spot at its source, a vignetted stage and a firmer floor shadow. The
   variants only repaint the beam (a wider/brighter conic fan) - placement
   above the picture, blur, blend and feathering come from the base rule. ---- */
html.fo-product-cards-showroom.fo-product-cards-showroom-spot-bold .tm-product-card .product-link .picture-wrapper
{
	background: linear-gradient(180deg, #e6e9ee 0%, #fdfdfe 82%);
	background: radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--tm-primary, #0088d4) 18%, transparent) 0%, transparent 62%), linear-gradient(180deg, color-mix(in srgb, var(--tm-surface-alt, #f2f4f7) 90%, black) 0%, var(--tm-surface, #fff) 82%);
}

	html.fo-product-cards-showroom.fo-product-cards-showroom-spot-bold .tm-product-card .product-link .picture-wrapper::before
	{
		background: conic-gradient(from 154deg at 50% -10%, transparent 0deg, rgba(255, 255, 255, .55) 16deg, rgba(255, 255, 255, .78) 26deg, rgba(255, 255, 255, .55) 36deg, transparent 52deg);
		-webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .78) 50%, transparent 90%);
		mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .78) 50%, transparent 90%);
		opacity: .85;
	}

	html.fo-product-cards-showroom.fo-product-cards-showroom-spot-bold .tm-product-card:hover .product-link .picture-wrapper::before
	{
		opacity: 1;
	}

html.fo-product-cards-showroom.fo-product-cards-showroom-spot-dramatic .tm-product-card .product-link .picture-wrapper
{
	background: linear-gradient(180deg, #dfe3e9 0%, #f8f9fb 85%);
	background: radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--tm-primary, #0088d4) 24%, transparent) 0%, transparent 64%), linear-gradient(180deg, color-mix(in srgb, var(--tm-surface-alt, #f2f4f7) 80%, black) 0%, var(--tm-surface, #fff) 85%);
	box-shadow: inset 0 0 56px rgba(0, 0, 0, .16);
}

	html.fo-product-cards-showroom.fo-product-cards-showroom-spot-dramatic .tm-product-card .product-link .picture-wrapper::before
	{
		background: radial-gradient(34% 12% at 50% 0%, rgba(255, 255, 255, 1) 0%, transparent 100%), conic-gradient(from 150deg at 50% -10%, transparent 0deg, rgba(255, 255, 255, .68) 16deg, rgba(255, 255, 255, .95) 30deg, rgba(255, 255, 255, .68) 44deg, transparent 60deg);
		-webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .85) 55%, transparent 96%);
		mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .85) 55%, transparent 96%);
		opacity: .92;
	}

	html.fo-product-cards-showroom.fo-product-cards-showroom-spot-dramatic .tm-product-card:hover .product-link .picture-wrapper::before
	{
		opacity: 1;
	}

	/* the firmer floor shadow grounds the drama */
	html.fo-product-cards-showroom.fo-product-cards-showroom-spot-dramatic .tm-product-card .product-link .picture-wrapper::after
	{
		background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .36) 0%, transparent 72%);
	}

/* ---- Showroom "Floating" (BO -> Miscare carduri): continuous levitation.
   The keyframes animate REGISTERED custom properties on the picture-wrapper
   (the float offset + a unitless "squeeze" for the shadow) - NOT transform -
   so the hover lift never has to cancel the animation (an `animation: none`
   on hover snaps: browsers do not transition away from an animation-driven
   transform - the same lesson as the Playful wind). On hover the float keeps
   running but --tm-showroom-wind eases to 0 while --tm-showroom-lift/-pop
   ease in, so the product glides from wherever it is in its float straight
   into the lifted hover pose, and eases back into the float mid-phase on
   mouse-out. The vars inherit, so the image and its floor shadow stay
   perfectly in phase. ---- */
@property --tm-showroom-float
{
	syntax: '<length>';
	inherits: true;
	/* the float's MID point, so with the animation off (reduced motion) the
	   product rests exactly on the static style's -8px pose */
	initial-value: 4px;
}

@property --tm-showroom-squeeze
{
	syntax: '<number>';
	inherits: true;
	initial-value: 0;
}

@property --tm-showroom-wind
{
	syntax: '<number>';
	inherits: true;
	initial-value: 1;
}

@property --tm-showroom-lift
{
	syntax: '<length>';
	inherits: true;
	initial-value: 0px;
}

@property --tm-showroom-pop
{
	syntax: '<number>';
	inherits: true;
	initial-value: 1;
}

/* the wrapper owns the animated float + the damping/lift knobs */
html.fo-product-cards-showroom.fo-product-cards-showroom-floating .tm-product-card .product-link .picture-wrapper
{
	animation: tm-card-showroom-float 5.5s ease-in-out infinite;
	transition: --tm-showroom-wind .5s ease, --tm-showroom-lift .5s cubic-bezier(.2, .9, .3, 1.1), --tm-showroom-pop .5s cubic-bezier(.2, .9, .3, 1.1);
}

html.fo-product-cards-showroom.fo-product-cards-showroom-floating .tm-product-card:hover .product-link .picture-wrapper
{
	--tm-showroom-wind: 0;
	--tm-showroom-lift: 8px;
	--tm-showroom-pop: 1.04;
}

	/* the float oscillates +/-4px around the resting -8px; wind 0 + lift 8px
	   lands exactly on the static style's hover pose (-16px, scale 1.04) */
	html.fo-product-cards-showroom.fo-product-cards-showroom-floating .tm-product-card .product-link .picture-wrapper img.product-picture
	{
		transform: translateX(-50%) translateY(calc(-50% - 8px - (var(--tm-showroom-float, 4px) - 4px) * var(--tm-showroom-wind, 1) - var(--tm-showroom-lift, 0px))) scale(var(--tm-showroom-pop, 1));
		transition: filter .45s;
	}

	/* the floor shadow squeezes/fades with the float and eases to the hover
	   pose on the same vars (width stays fixed - the squeeze is a scaleX, so
	   it can ride the interpolating custom properties) */
	html.fo-product-cards-showroom.fo-product-cards-showroom-floating .tm-product-card .product-link .picture-wrapper::after
	{
		width: 56%;
		transform: translateX(-50%) scaleX(calc(1 - .18 * var(--tm-showroom-squeeze, 0) * var(--tm-showroom-wind, 1) - .21 * (1 - var(--tm-showroom-wind, 1))));
		opacity: calc(1 - .35 * var(--tm-showroom-squeeze, 0) * var(--tm-showroom-wind, 1) - .4 * (1 - var(--tm-showroom-wind, 1)));
		transition: none;
	}

@keyframes tm-card-showroom-float
{
	0%, 100%
	{
		--tm-showroom-float: 0px;
		--tm-showroom-squeeze: 0;
	}

	50%
	{
		--tm-showroom-float: 8px;
		--tm-showroom-squeeze: 1;
	}
}

/* =========================================================================
   IMAGINE CA HEADER (ImageHeader) - the CLASSIC card, except the photo
   becomes a full-width header: it stretches edge to edge, covers its whole
   zone (object-fit: cover) and zooms in slowly and gently on card hover.
   The shop picks HOW the image zone is sized (BO -> "Imagine ca header"):
     * .fo-ihcard-ratio (default) - the header keeps a fixed ASPECT-RATIO
       (--tm-ihcard-ratio, default 3 / 2) at every breakpoint, so its
       proportion is preserved (no thin strip on the wide 2-up tablet cards);
       the card height follows (auto) and the voucher / reservation variants
       just grow via their own taller rows.
     * .fo-ihcard-percent - the classic fixed-PX header = a % of the card
       height (--tm-ihcard-extra px delta vs. the 200px base); the card + every
       variant grow / shrink by the same delta so the info rows are unchanged.
   Exactly one mode class is present (GetHtmlClasses). Everything else
   (chrome, shadow, hover gradient line, typography) stays classic.
   ========================================================================= */
	/* the full-bleed header zone (both modes): edge to edge, rounded top, alt bg */
	html.fo-product-cards-imageheader .tm-product-card .product-link .picture-wrapper
	{
		margin: 0;
		overflow: hidden;
		border-radius: var(--tm-card-radius, 3px) var(--tm-card-radius, 3px) 0 0;
		background: var(--tm-surface-alt, #f4f6f9);
	}

/* --- Aspect-ratio mode (default): steady proportion at every breakpoint; the card auto-sizes,
   so all cards in a row (one width -> one header height) stay aligned and the voucher /
   reservation variants grow via their own taller rows. --- */
html.fo-product-cards-imageheader.fo-ihcard-ratio .tm-product-card
{
	height: auto;
}

	html.fo-product-cards-imageheader.fo-ihcard-ratio .tm-product-card .product-link .picture-wrapper
	{
		height: auto;
		aspect-ratio: var(--tm-ihcard-ratio, 3 / 2);
	}

/* --- Percentage mode (classic fixed-px): the header is a % of the card height; the card AND
   every variant grow / shrink by the same --tm-ihcard-extra delta so the info rows keep their
   exact standard layout (the per-breakpoint variant math mirrors the base card). --- */
html.fo-product-cards-imageheader.fo-ihcard-percent .tm-product-card
{
	height: calc(460px + var(--tm-ihcard-extra, 0px));
}

	html.fo-product-cards-imageheader.fo-ihcard-percent .tm-product-card.products-reservations-is-activated
	{
		height: calc(495px + var(--tm-ihcard-extra, 0px));
	}

	html.fo-product-cards-imageheader.fo-ihcard-percent .tm-product-card.has-voucher-applied
	{
		height: calc(525px + var(--tm-ihcard-extra, 0px));
	}

	html.fo-product-cards-imageheader.fo-ihcard-percent .tm-product-card.products-reservations-is-activated.has-voucher-applied
	{
		height: calc(560px + var(--tm-ihcard-extra, 0px));
	}

@media (min-width: 768px)
{
	html.fo-product-cards-imageheader.fo-ihcard-percent .tm-product-card.products-reservations-is-activated
	{
		height: calc(460px + var(--tm-ihcard-extra, 0px));
	}

	html.fo-product-cards-imageheader.fo-ihcard-percent .tm-product-card.has-voucher-applied,
	html.fo-product-cards-imageheader.fo-ihcard-percent .tm-product-card.products-reservations-is-activated.has-voucher-applied
	{
		height: calc(515px + var(--tm-ihcard-extra, 0px));
	}
}

	html.fo-product-cards-imageheader.fo-ihcard-percent .tm-product-card .product-link .picture-wrapper
	{
		height: calc(200px + var(--tm-ihcard-extra, 0px));
	}

	/* shared image treatment (both modes) */
		html.fo-product-cards-imageheader .tm-product-card .product-link .picture-wrapper img.product-picture
		{
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			max-width: none;
			max-height: none;
			transform: none;
			object-fit: cover;
			border-radius: 0;
			transition: transform 1.4s cubic-bezier(.2, .7, .2, 1);
		}

	/* the refined, slow zoom-in on card hover */
	html.fo-product-cards-imageheader .tm-product-card:hover .product-link .picture-wrapper img.product-picture
	{
		transform: scale(1.06);
	}

	/* the no-picture tile fills the header edge to edge too */
	html.fo-product-cards-imageheader .tm-product-card .product-link .picture-wrapper .product-picture-placeholder
	{
		border-radius: 0;
	}

/* =========================================================================
   FASCICUL LUMINOS (Beam) - orbiting light: a luminous beam in the theme's
   primary travels continuously around the card's contour (a masked
   conic-gradient ring whose start angle is the registered --tm-beam-angle,
   animated by keyframes), while a blurred twin of the same ring glows
   OUTSIDE the edge as the beam's trail. On hover the trail burns brighter.
   Browsers without @property degrade to a slow 4-step "ticking" orbit;
   reduced motion keeps the elegant static gradient ring.
   ========================================================================= */
@property --tm-beam-angle
{
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}

html.fo-product-cards-beam .tm-product-card
{
	background: var(--tm-surface, #fff);
	border-radius: var(--tm-card-radius, 16px);
	box-shadow: 0 6px 22px rgba(0, 0, 0, .08);
	transition: transform .35s cubic-bezier(.2, .9, .3, 1.1), box-shadow .35s;
}

	html.fo-product-cards-beam .tm-product-card:hover
	{
		transform: translateY(-3px);
		box-shadow: 0 14px 34px rgba(0, 0, 0, .13);
	}

	/* the orbiting beam: a masked ring (the Holo content-box XOR trick) - a
	   faint constant track sits UNDER the bright moving head, so the card
	   contour never disappears while the beam is on the far side */
	html.fo-product-cards-beam .tm-product-card::before
	{
		content: '';
		position: absolute;
		inset: 0;
		z-index: 4;
		border-radius: var(--tm-card-radius, 16px);
		padding: 2px;
		pointer-events: none;
		background: conic-gradient(from var(--tm-beam-angle, 0deg), transparent 0deg, transparent 258deg, rgba(0, 136, 212, .5) 300deg, rgba(255, 255, 255, .95) 327deg, rgba(0, 136, 212, .9) 341deg, transparent 359deg), conic-gradient(rgba(0, 136, 212, .22) 0deg 360deg);
		background: conic-gradient(from var(--tm-beam-angle, 0deg), transparent 0deg, transparent 258deg, color-mix(in srgb, var(--tm-primary, #0088d4) 50%, transparent) 300deg, rgba(255, 255, 255, .95) 327deg, color-mix(in srgb, var(--tm-primary, #0088d4) 90%, transparent) 341deg, transparent 359deg), conic-gradient(color-mix(in srgb, var(--tm-primary, #0088d4) 22%, transparent) 0deg 360deg);
		-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
		-webkit-mask-composite: xor;
		mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
		mask-composite: exclude;
		animation: tm-card-beam-orbit 5.5s linear infinite;
	}

	/* the glow trail outside the edge: the same orbiting ring, wider and
	   blurred (repurposes the base bottom gradient line - every base prop
	   is reset) */
	html.fo-product-cards-beam .tm-product-card::after
	{
		content: '';
		position: absolute;
		inset: -7px;
		height: auto;
		width: auto;
		left: -7px;
		bottom: -7px;
		transform: none;
		opacity: .75;
		z-index: 0;
		border-radius: calc(var(--tm-card-radius, 16px) + 7px);
		padding: 9px;
		pointer-events: none;
		background: conic-gradient(from var(--tm-beam-angle, 0deg), transparent 0deg, transparent 270deg, rgba(0, 136, 212, .6) 315deg, rgba(0, 136, 212, .95) 336deg, transparent 358deg);
		background: conic-gradient(from var(--tm-beam-angle, 0deg), transparent 0deg, transparent 270deg, color-mix(in srgb, var(--tm-primary, #0088d4) 60%, transparent) 315deg, color-mix(in srgb, var(--tm-primary, #0088d4) 95%, transparent) 336deg, transparent 358deg);
		-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
		-webkit-mask-composite: xor;
		mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
		mask-composite: exclude;
		filter: blur(7px);
		animation: tm-card-beam-orbit 5.5s linear infinite;
	}

	/* the base hover rule stretches ::after to 100% - pin the ring shape and
	   let the trail burn brighter instead */
	html.fo-product-cards-beam .tm-product-card:hover::after
	{
		width: auto;
		opacity: 1;
	}

	html.fo-product-cards-beam .tm-product-card .product-link .product-name
	{
		color: var(--tm-text, #333);
	}

		html.fo-product-cards-beam .tm-product-card .product-link .product-name:hover
		{
			color: var(--tm-primary, #0088d4);
		}

/* the orbit: the intermediate steps keep a graceful "ticking" fallback in
   browsers that cannot interpolate the (unregistered) angle */
@keyframes tm-card-beam-orbit
{
	0%
	{
		--tm-beam-angle: 0deg;
	}

	25%
	{
		--tm-beam-angle: 90deg;
	}

	50%
	{
		--tm-beam-angle: 180deg;
	}

	75%
	{
		--tm-beam-angle: 270deg;
	}

	100%
	{
		--tm-beam-angle: 360deg;
	}
}

/* =========================================================================
   FUTURIST (Tech) - HUD: a precise, engineering-grade card with
   theme-coloured viewfinder corner brackets (their arms extend smoothly on
   hover, via the registered --tm-tech-arm length), monospace name and
   price, a faint blueprint texture behind the photo and a scanline that
   sweeps down the card once when it is hovered.
   ========================================================================= */
@property --tm-tech-arm
{
	syntax: '<length>';
	inherits: false;
	initial-value: 15px;
}

html.fo-product-cards-tech .tm-product-card
{
	background: var(--tm-surface, #fff);
	border: 1px solid rgba(0, 136, 212, .35);
	border: 1px solid color-mix(in srgb, var(--tm-primary, #0088d4) 35%, transparent);
	border-radius: var(--tm-card-radius, 4px);
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
	transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

	html.fo-product-cards-tech .tm-product-card:hover
	{
		transform: translateY(-3px);
		border-color: var(--tm-primary, #0088d4);
		box-shadow: 0 10px 26px rgba(0, 136, 212, .18);
		box-shadow: 0 10px 26px color-mix(in srgb, var(--tm-primary, #0088d4) 20%, transparent);
	}

	/* the four viewfinder corner brackets - 8 gradient strips (2 arms per
	   corner), all driven by ONE registered length so the arms extend
	   smoothly on hover */
	html.fo-product-cards-tech .tm-product-card::before
	{
		content: '';
		position: absolute;
		inset: 6px;
		z-index: 4;
		pointer-events: none;
		opacity: .75;
		background: linear-gradient(var(--tm-primary, #0088d4), var(--tm-primary, #0088d4)) left top / var(--tm-tech-arm, 15px) 2px, linear-gradient(var(--tm-primary, #0088d4), var(--tm-primary, #0088d4)) left top / 2px var(--tm-tech-arm, 15px), linear-gradient(var(--tm-primary, #0088d4), var(--tm-primary, #0088d4)) right top / var(--tm-tech-arm, 15px) 2px, linear-gradient(var(--tm-primary, #0088d4), var(--tm-primary, #0088d4)) right top / 2px var(--tm-tech-arm, 15px), linear-gradient(var(--tm-primary, #0088d4), var(--tm-primary, #0088d4)) left bottom / var(--tm-tech-arm, 15px) 2px, linear-gradient(var(--tm-primary, #0088d4), var(--tm-primary, #0088d4)) left bottom / 2px var(--tm-tech-arm, 15px), linear-gradient(var(--tm-primary, #0088d4), var(--tm-primary, #0088d4)) right bottom / var(--tm-tech-arm, 15px) 2px, linear-gradient(var(--tm-primary, #0088d4), var(--tm-primary, #0088d4)) right bottom / 2px var(--tm-tech-arm, 15px);
		background-repeat: no-repeat;
		transition: --tm-tech-arm .4s cubic-bezier(.2, .8, .3, 1), opacity .3s;
	}

	html.fo-product-cards-tech .tm-product-card:hover::before
	{
		--tm-tech-arm: 30px;
		opacity: 1;
	}

	/* the scanline (repurposes the base bottom gradient line - every base
	   prop is reset): parked above the card, swept down once on hover */
	html.fo-product-cards-tech .tm-product-card::after
	{
		content: '';
		position: absolute;
		top: -46px;
		bottom: auto;
		left: 0;
		right: 0;
		height: 44px;
		width: auto;
		transform: none;
		opacity: 0;
		z-index: 3;
		border-radius: 0;
		pointer-events: none;
		background: linear-gradient(180deg, rgba(0, 136, 212, 0) 0%, rgba(0, 136, 212, .07) 62%, rgba(0, 136, 212, .28) 94%, rgba(0, 136, 212, .85) 100%);
		background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--tm-primary, #0088d4) 7%, transparent) 62%, color-mix(in srgb, var(--tm-primary, #0088d4) 28%, transparent) 94%, var(--tm-primary, #0088d4) 100%);
	}

	html.fo-product-cards-tech .tm-product-card:hover::after
	{
		width: auto;
		opacity: 0;
		animation: tm-card-tech-scan 1.1s cubic-bezier(.3, .2, .3, 1) 1;
	}

	/* the vitrine: a faint blueprint grid + a hairline under the photo zone */
	html.fo-product-cards-tech .tm-product-card .product-link .picture-wrapper
	{
		margin: 0;
		background: linear-gradient(to right, rgba(0, 136, 212, .06) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 136, 212, .06) 1px, transparent 1px);
		background: linear-gradient(to right, color-mix(in srgb, var(--tm-primary, #0088d4) 6%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--tm-primary, #0088d4) 6%, transparent) 1px, transparent 1px);
		background-size: 22px 22px, 22px 22px;
		border-bottom: 1px solid rgba(0, 136, 212, .25);
		border-bottom: 1px solid color-mix(in srgb, var(--tm-primary, #0088d4) 25%, transparent);
	}

	html.fo-product-cards-tech .tm-product-card .product-link .product-name
	{
		font-family: Consolas, 'Lucida Console', 'Courier New', monospace;
		font-size: 14px;
		letter-spacing: .3px;
		color: var(--tm-text, #2c3038);
	}

		html.fo-product-cards-tech .tm-product-card .product-link .product-name:hover
		{
			color: var(--tm-primary, #0088d4);
		}

	html.fo-product-cards-tech .tm-product-card .product-link .product-subtitle
	{
		text-transform: uppercase;
		letter-spacing: 2px;
		font-size: 10px;
		font-style: normal;
	}

	html.fo-product-cards-tech .tm-product-card .product-link .prices-container .price-container
	{
		font-family: Consolas, 'Lucida Console', 'Courier New', monospace;
		font-weight: 700;
		color: var(--tm-primary-dark, #006197);
	}

/* the sweep animates the pseudo's own top offset, so it works on every
   card-height variant (voucher / reservations) without hardcoded heights */
@keyframes tm-card-tech-scan
{
	0%
	{
		top: -46px;
		opacity: .9;
	}

	85%
	{
		opacity: .9;
	}

	100%
	{
		top: 100%;
		opacity: 0;
	}
}

/* =========================================================================
   ORGANIC - soft nature: the photo lives inside a large organic "pebble"
   (an asymmetric border-radius blob) floating over pastel washes of the
   theme colours, with a small satellite of organic dots in the corner;
   hovering morphs the pebble into a new shape while the photo leans in.
   Calm, rounded chrome throughout. The pebble is PSEUDO-RANDOM: each card
   carries its own resting + hover shape via the --tm-organic-shape(-hover)
   custom properties, varied per grid position (nth-of-type - the Playful
   pattern), so no two neighbouring cards share the same silhouette. The
   photo fills the pebble completely (object-fit: cover), so its edges can
   never show through the organic shape.
   ========================================================================= */
html.fo-product-cards-organic .tm-product-card
{
	--tm-organic-shape: 58% 42% 46% 54% / 52% 48% 58% 42%;
	--tm-organic-shape-hover: 44% 56% 58% 42% / 46% 54% 44% 56%;
	background: var(--tm-surface, #fff);
	background: linear-gradient(165deg, color-mix(in srgb, var(--tm-secondary, #00c893) 7%, var(--tm-surface, #fff)) 0%, var(--tm-surface, #fff) 46%, color-mix(in srgb, var(--tm-primary, #0088d4) 6%, var(--tm-surface, #fff)) 100%);
	border-radius: var(--tm-card-radius, 26px);
	box-shadow: 0 10px 30px -12px rgba(0, 136, 212, .28);
	box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--tm-primary, #0088d4) 30%, transparent);
	transition: transform .45s cubic-bezier(.2, .9, .3, 1.2), box-shadow .45s;
}

	html.fo-product-cards-organic .tm-product-card:hover
	{
		transform: translateY(-4px) rotate(-.4deg);
		box-shadow: 0 18px 40px -14px rgba(0, 136, 212, .38);
		box-shadow: 0 18px 40px -14px color-mix(in srgb, var(--tm-primary, #0088d4) 40%, transparent);
	}

	/* the pseudo-random pebble field: each grid position gets its own pair of
	   resting/hover blobs, so the shapes read as naturally varied */
	html.fo-product-cards-organic .tm-product-card:nth-of-type(2n)
	{
		--tm-organic-shape: 42% 58% 55% 45% / 48% 42% 58% 52%;
		--tm-organic-shape-hover: 56% 44% 42% 58% / 58% 52% 46% 48%;
	}

	html.fo-product-cards-organic .tm-product-card:nth-of-type(3n)
	{
		--tm-organic-shape: 52% 48% 60% 40% / 44% 58% 42% 56%;
		--tm-organic-shape-hover: 46% 54% 48% 52% / 56% 44% 58% 42%;
	}

	html.fo-product-cards-organic .tm-product-card:nth-of-type(5n)
	{
		--tm-organic-shape: 46% 54% 42% 58% / 58% 46% 54% 42%;
		--tm-organic-shape-hover: 58% 42% 54% 46% / 42% 56% 46% 58%;
	}

	html.fo-product-cards-organic .tm-product-card:nth-of-type(7n)
	{
		--tm-organic-shape: 55% 45% 52% 48% / 46% 56% 44% 58%;
		--tm-organic-shape-hover: 43% 57% 46% 54% / 55% 45% 57% 43%;
	}

	/* the satellite dots, tucked in the top-right corner the pebble leaves free */
	html.fo-product-cards-organic .tm-product-card::before
	{
		content: '';
		position: absolute;
		top: 10px;
		right: 12px;
		width: 46px;
		height: 48px;
		z-index: 0;
		pointer-events: none;
		opacity: .5;
		background: radial-gradient(circle at 10px 12px, rgba(255, 101, 0, .4) 5px, transparent 6px), radial-gradient(circle at 32px 22px, rgba(0, 200, 147, .38) 8px, transparent 9px), radial-gradient(circle at 16px 38px, rgba(0, 136, 212, .34) 4px, transparent 5px);
		background: radial-gradient(circle at 10px 12px, color-mix(in srgb, var(--tm-accent, #ff6500) 40%, transparent) 5px, transparent 6px), radial-gradient(circle at 32px 22px, color-mix(in srgb, var(--tm-secondary, #00c893) 38%, transparent) 8px, transparent 9px), radial-gradient(circle at 16px 38px, color-mix(in srgb, var(--tm-primary, #0088d4) 34%, transparent) 4px, transparent 5px);
	}

	/* the base gradient hover line does not fit the soft look */
	html.fo-product-cards-organic .tm-product-card::after
	{
		display: none;
	}

	/* the pebble vitrine (slightly shorter than the standard 200px zone so
	   the extra top margin never squeezes the rows below it); its silhouette
	   comes from the per-card custom properties above */
	html.fo-product-cards-organic .tm-product-card .product-link .picture-wrapper
	{
		height: 186px;
		margin: 8px 14px 0 14px;
		overflow: hidden;
		border-radius: var(--tm-organic-shape, 58% 42% 46% 54% / 52% 48% 58% 42%);
		background: var(--tm-surface-alt, #f4f6f9);
		background: radial-gradient(120% 130% at 18% 12%, color-mix(in srgb, var(--tm-primary, #0088d4) 12%, transparent) 0%, transparent 55%), radial-gradient(130% 120% at 85% 85%, color-mix(in srgb, var(--tm-secondary, #00c893) 14%, transparent) 0%, transparent 60%), var(--tm-surface-alt, #f4f6f9);
		transition: border-radius 1.1s cubic-bezier(.3, .8, .4, 1);
	}

	html.fo-product-cards-organic .tm-product-card:hover .product-link .picture-wrapper
	{
		border-radius: var(--tm-organic-shape-hover, 44% 56% 58% 42% / 46% 54% 44% 56%);
	}

		/* the photo FILLS the pebble (cover) so its own edges never show
		   through the organic silhouette (the base card renders it centered
		   and contained, which would leave visible photo borders inside the
		   blob); the hover lean-in is a pure scale+rotate - the extra scale
		   keeps the rotated cover fully covering the shape */
		html.fo-product-cards-organic .tm-product-card .product-link .picture-wrapper img.product-picture
		{
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			max-width: none;
			max-height: none;
			transform: none;
			object-fit: cover;
			border-radius: 0;
			transition: transform .6s cubic-bezier(.25, 1.2, .35, 1);
		}

	html.fo-product-cards-organic .tm-product-card:hover .product-link .picture-wrapper img.product-picture
	{
		transform: scale(1.08) rotate(-1.5deg);
	}

	html.fo-product-cards-organic .tm-product-card .product-link .product-name
	{
		font-weight: 600;
		color: var(--tm-text, #3a4149);
	}

	html.fo-product-cards-organic .tm-product-card .product-link .prices-container .price-container
	{
		color: var(--tm-primary-dark, #006197);
		font-weight: 700;
	}

/* =========================================================================
   LUMEN (Sticla luminata) - liquid glass with DEPTH: the whole card is a sheet
   of luminous frosted glass. Its body is a translucent tint of the theme
   surface (light on light themes, dark on dark themes) behind a backdrop blur,
   wearing a bright bevelled rim so the glass reads THICK; a luminous glint
   travels around that rim (the "sparkle" on the edge) and a soft specular
   streak sweeps the FULL height of the card. On hover the card tilts gently in
   3D, lifts and blooms a theme-coloured glow - everything eased so nothing
   snaps. Reads on BOTH light and dark themes. Reduced motion keeps the look but
   stops the travelling light.
   ========================================================================= */
@property --tm-lumen-edge
{
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}

html.fo-product-cards-lumen .tm-product-card
{
	position: relative;
	overflow: hidden;
	border-radius: var(--tm-card-radius, 20px);
	background: radial-gradient(130% 80% at 12% -12%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .1) 24%, transparent 58%), linear-gradient(135deg, rgba(0, 136, 212, .12) 0%, transparent 46%, rgba(255, 101, 0, .1) 100%), rgba(255, 255, 255, .5);
	background: radial-gradient(130% 80% at 12% -12%, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .1) 24%, transparent 58%), linear-gradient(135deg, color-mix(in srgb, var(--tm-primary, #0088d4) 12%, transparent) 0%, transparent 46%, color-mix(in srgb, var(--tm-accent, #ff6500) 10%, transparent) 100%), color-mix(in srgb, var(--tm-surface, #fff) 55%, transparent);
	border: 1px solid rgba(255, 255, 255, .28);
	border: 1px solid color-mix(in srgb, var(--tm-primary, #0088d4) 22%, transparent);
	-webkit-backdrop-filter: blur(16px) saturate(1.5);
	backdrop-filter: blur(16px) saturate(1.5);
	box-shadow: 0 14px 40px -14px rgba(0, 0, 0, .28), 0 18px 42px -12px rgba(0, 136, 212, 0), inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 -16px 26px -20px rgba(0, 0, 0, .22);
	transform: perspective(1100px) rotateX(0deg) rotateY(0deg) translateY(0) translateZ(0);
	transition: transform .5s cubic-bezier(.2, .8, .25, 1), box-shadow .5s cubic-bezier(.2, .8, .25, 1);
}

	html.fo-product-cards-lumen .tm-product-card:hover
	{
		z-index: 3;
		transform: perspective(1100px) rotateX(3.2deg) rotateY(-4.5deg) translateY(-6px) translateZ(8px);
		box-shadow: 0 34px 62px -22px rgba(0, 0, 0, .4), 0 18px 42px -12px rgba(0, 136, 212, .38), inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 -16px 26px -20px rgba(0, 0, 0, .22);
		box-shadow: 0 34px 62px -22px rgba(0, 0, 0, .4), 0 18px 42px -12px color-mix(in srgb, var(--tm-primary, #0088d4) 42%, transparent), inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 -16px 26px -20px rgba(0, 0, 0, .22);
	}

	/* the lit, bevelled glass EDGE (the visible "thickness"): a static bright
     top-left rim + a glint that ORBITS the border (the sparkle). Masked ring
     via the content-box XOR trick; the glint angle is --tm-lumen-edge. */
	html.fo-product-cards-lumen .tm-product-card::before
	{
		content: '';
		position: absolute;
		inset: 0;
		z-index: 5;
		padding: 1.5px;
		pointer-events: none;
		border-radius: var(--tm-card-radius, 20px);
		background: linear-gradient(145deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .06) 30%, transparent 55%, rgba(255, 255, 255, .14) 100%), conic-gradient(from var(--tm-lumen-edge, 0deg), transparent 0deg, transparent 250deg, rgba(255, 255, 255, .55) 312deg, rgba(255, 255, 255, .98) 331deg, rgba(255, 255, 255, .4) 345deg, transparent 360deg);
		-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
		-webkit-mask-composite: xor;
		mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
		mask-composite: exclude;
		opacity: .75;
		transition: opacity .5s;
		animation: tm-card-lumen-edge 7s linear infinite;
	}

	html.fo-product-cards-lumen .tm-product-card:hover::before
	{
		opacity: 1;
	}

	/* the specular streak sweeping the FULL height of the card (over everything,
     subtle) - the light "crossing the glass" */
	html.fo-product-cards-lumen .tm-product-card::after
	{
		content: '';
		position: absolute;
		inset: 0;
		width: auto; /* reset the base ::after (bottom line) which is width:0 */
		height: auto; /* ...and height:1.5px */
		opacity: 1; /* ...and opacity:0 - without these the streak is a 0x1.5px invisible sliver */
		z-index: 4;
		pointer-events: none;
		border-radius: var(--tm-card-radius, 20px);
		background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .24) 46%, rgba(255, 255, 255, .06) 52%, transparent 64%);
		transform: translateX(-135%);
		animation: tm-card-lumen-sheen 8s cubic-bezier(.4, .1, .2, 1) infinite;
	}

	html.fo-product-cards-lumen .tm-product-card:hover::after
	{
		background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .46) 46%, rgba(255, 255, 255, .12) 52%, transparent 64%);
		animation: tm-card-lumen-sheen-hover .9s cubic-bezier(.4, .1, .2, 1);
		animation-fill-mode: forwards;
	}

	/* the photo sits DIRECTLY on the glass - no tinted vitrine behind it, only
     its own rounded corners floating on the sheet (keeps the base geometry) */
	html.fo-product-cards-lumen .tm-product-card .product-link .picture-wrapper
	{
		background: none;
		box-shadow: none;
	}

		html.fo-product-cards-lumen .tm-product-card .product-link .picture-wrapper .product-picture
		{
			border-radius: 12px;
		}

	html.fo-product-cards-lumen .tm-product-card .product-link .product-name
	{
		color: var(--tm-text, #2c3038);
	}

		html.fo-product-cards-lumen .tm-product-card .product-link .product-name:hover
		{
			color: var(--tm-primary, #0088d4);
		}

	html.fo-product-cards-lumen .tm-product-card .product-link .prices-container .price-container
	{
		color: var(--tm-text, #2c3038);
	}

@keyframes tm-card-lumen-sheen
{
	0%
	{
		transform: translateX(-135%);
	}

	16%
	{
		transform: translateX(135%);
	}

	100%
	{
		transform: translateX(135%);
	}
}

@keyframes tm-card-lumen-sheen-hover
{
	from
	{
		transform: translateX(-135%);
	}

	to
	{
		transform: translateX(135%);
	}
}

@keyframes tm-card-lumen-edge
{
	0%
	{
		--tm-lumen-edge: 0deg;
	}

	25%
	{
		--tm-lumen-edge: 90deg;
	}

	50%
	{
		--tm-lumen-edge: 180deg;
	}

	75%
	{
		--tm-lumen-edge: 270deg;
	}

	100%
	{
		--tm-lumen-edge: 360deg;
	}
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))
{
	html.fo-product-cards-lumen .tm-product-card
	{
		background: rgba(255, 255, 255, .92);
		background: color-mix(in srgb, var(--tm-surface, #fff) 92%, transparent);
	}
}

/* =========================================================================
   No-picture fallback for the immersive-family styles: the generic light
   placeholder tile would wash out under the scrim, so the full-bleed backdrop
   becomes an elegant THEME-coloured "mesh" gradient (primary / secondary /
   accent blobs over a primary-dark base) - pure CSS, no asset, follows any
   theme. The icon chip floats frosted on it; the label goes light.
   ========================================================================= */
html.fo-product-cards-immersive .tm-product-card .product-link .picture-wrapper .product-picture-placeholder,
html.fo-product-cards-horizontalimmersive .tm-product-card .product-link .picture-wrapper .product-picture-placeholder
{
	border-radius: 0;
	background: linear-gradient(135deg, var(--tm-primary-dark, #006197) 0%, var(--tm-primary, #0088d4) 100%);
	background: radial-gradient(120% 150% at 12% 18%, color-mix(in srgb, var(--tm-primary, #0088d4) 65%, transparent) 0%, transparent 60%), radial-gradient(130% 150% at 88% 25%, color-mix(in srgb, var(--tm-secondary, #00c893) 50%, transparent) 0%, transparent 62%), radial-gradient(150% 140% at 55% 100%, color-mix(in srgb, var(--tm-accent, #ff6500) 38%, transparent) 0%, transparent 65%), linear-gradient(135deg, var(--tm-primary-dark, #006197) 0%, var(--tm-primary, #0088d4) 100%);
}

	/* the faint dotted texture reads as noise over the mesh - drop it */
	html.fo-product-cards-immersive .tm-product-card .product-link .picture-wrapper .product-picture-placeholder::before,
	html.fo-product-cards-horizontalimmersive .tm-product-card .product-link .picture-wrapper .product-picture-placeholder::before
	{
		display: none;
	}

	html.fo-product-cards-immersive .tm-product-card .product-link .picture-wrapper .product-picture-placeholder .pp-icon-chip,
	html.fo-product-cards-horizontalimmersive .tm-product-card .product-link .picture-wrapper .product-picture-placeholder .pp-icon-chip
	{
		background: rgba(255, 255, 255, .92);
		box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
	}

	html.fo-product-cards-immersive .tm-product-card .product-link .picture-wrapper .product-picture-placeholder .pp-label,
	html.fo-product-cards-horizontalimmersive .tm-product-card .product-link .picture-wrapper .product-picture-placeholder .pp-label
	{
		color: rgba(255, 255, 255, .88);
		text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
	}

/* On small screens the bottom-docked cluster clears the actions (which stay
   always visible on touch devices), instead of squeezing next to them. */
@media (max-width: 575.98px)
{
	html.fo-product-cards-horizontalimmersive .tm-product-card .product-link .prices-container
	{
		padding: 6px 46px 60px 18px;
	}
}

/* The actions reveal themselves on hover / keyboard focus (the design
   preview's signature move) - ONLY on hover-capable devices; on touch they
   stay always visible so the card remains fully usable without a hover. */
@media (hover: hover) and (pointer: fine)
{
	html.fo-product-cards-immersive .tm-product-card .commands-container,
	html.fo-product-cards-horizontalimmersive .tm-product-card .commands-container
	{
		opacity: 0;
		transform: translateY(10px);
		transition: opacity .35s ease, transform .35s cubic-bezier(.2, .9, .3, 1);
	}

	/* at rest the info cluster glides DOWN over the hidden actions strip, so it
	   sits at the very bottom of the photo; hover lifts it back up. The slide
	   is applied to the info ROWS (not the link!) - a transform on the link
	   would re-anchor the absolute full-bleed header to it (the black-band
	   stacking bug) */
	html.fo-product-cards-immersive .tm-product-card .product-link .product-name,
	html.fo-product-cards-immersive .tm-product-card .product-link .rating-container,
	html.fo-product-cards-immersive .tm-product-card .product-link .prices-container
	{
		transform: translateY(46px);
		transition: transform .35s cubic-bezier(.2, .9, .3, 1);
	}

	html.fo-product-cards-immersive .tm-product-card:hover .product-link .product-name,
	html.fo-product-cards-immersive .tm-product-card:hover .product-link .rating-container,
	html.fo-product-cards-immersive .tm-product-card:hover .product-link .prices-container,
	html.fo-product-cards-immersive .tm-product-card:focus-within .product-link .product-name,
	html.fo-product-cards-immersive .tm-product-card:focus-within .product-link .rating-container,
	html.fo-product-cards-immersive .tm-product-card:focus-within .product-link .prices-container
	{
		transform: none;
	}

	html.fo-product-cards-immersive .tm-product-card:hover .commands-container,
	html.fo-product-cards-immersive .tm-product-card:focus-within .commands-container,
	html.fo-product-cards-horizontalimmersive .tm-product-card:hover .commands-container,
	html.fo-product-cards-horizontalimmersive .tm-product-card:focus-within .commands-container
	{
		opacity: 1;
		transform: none;
	}
}

/* =========================================================================
   OVERLAY variants for the immersive-family styles (BO -> Tema interfata ->
   "Overlay peste imagine"): the built-in DARK scrim is the default (no extra
   class); html.fo-product-cards-overlay-light swaps it for a white veil with
   dark text, html.fo-product-cards-overlay-none removes it entirely (texts
   keep a strong shadow so they stay legible on most photos).
   ========================================================================= */

/* ---- LIGHT overlay: white veil + fixed dark text (independent of the theme,
        because the veil is always light). ---- */
html.fo-product-cards-immersive.fo-product-cards-overlay-light .tm-product-card::before
{
	background: linear-gradient(180deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .30) 32%, rgba(255, 255, 255, .62) 55%, rgba(255, 255, 255, .86) 78%, rgba(255, 255, 255, .94) 100%);
}

html.fo-product-cards-horizontalimmersive.fo-product-cards-overlay-light .tm-product-card::before
{
	background: linear-gradient(180deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .16) 42%, rgba(255, 255, 255, .60) 70%, rgba(255, 255, 255, .90) 100%), linear-gradient(90deg, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, 0) 52%);
}

html.fo-product-cards-immersive.fo-product-cards-overlay-light .tm-product-card .product-link .product-name,
html.fo-product-cards-horizontalimmersive.fo-product-cards-overlay-light .tm-product-card .product-link .product-name
{
	color: #222;
	text-shadow: 0 1px 8px rgba(255, 255, 255, .65);
}

	html.fo-product-cards-immersive.fo-product-cards-overlay-light .tm-product-card .product-link .product-name:hover,
	html.fo-product-cards-horizontalimmersive.fo-product-cards-overlay-light .tm-product-card .product-link .product-name:hover
	{
		color: var(--tm-primary-dark, #006197);
	}

html.fo-product-cards-immersive.fo-product-cards-overlay-light .tm-product-card .product-link .product-subtitle,
html.fo-product-cards-immersive.fo-product-cards-overlay-light .tm-product-card .product-link .product-code,
html.fo-product-cards-immersive.fo-product-cards-overlay-light .tm-product-card .product-link .rating-container .reviews-count,
html.fo-product-cards-horizontalimmersive.fo-product-cards-overlay-light .tm-product-card .product-link .product-subtitle,
html.fo-product-cards-horizontalimmersive.fo-product-cards-overlay-light .tm-product-card .product-link .product-code,
html.fo-product-cards-horizontalimmersive.fo-product-cards-overlay-light .tm-product-card .product-link .rating-container .reviews-count
{
	color: rgba(0, 0, 0, .62);
}

html.fo-product-cards-immersive.fo-product-cards-overlay-light .tm-product-card .product-link .prices-container .old-price-container,
html.fo-product-cards-horizontalimmersive.fo-product-cards-overlay-light .tm-product-card .product-link .prices-container .old-price-container
{
	color: rgba(0, 0, 0, .5);
}

html.fo-product-cards-immersive.fo-product-cards-overlay-light .tm-product-card .product-link .prices-container .price-container,
html.fo-product-cards-horizontalimmersive.fo-product-cards-overlay-light .tm-product-card .product-link .prices-container .price-container
{
	color: #1c1c1c;
	text-shadow: 0 1px 6px rgba(255, 255, 255, .6);
}

html.fo-product-cards-immersive.fo-product-cards-overlay-light .tm-product-card .product-link .prices-container .price-reduction,
html.fo-product-cards-horizontalimmersive.fo-product-cards-overlay-light .tm-product-card .product-link .prices-container .price-reduction
{
	color: rgba(0, 0, 0, .7);
}

html.fo-product-cards-immersive.fo-product-cards-overlay-light .tm-product-card .toolbar .product-command,
html.fo-product-cards-horizontalimmersive.fo-product-cards-overlay-light .tm-product-card .toolbar .product-command
{
	color: rgba(0, 0, 0, .55);
	filter: drop-shadow(0 1px 3px rgba(255, 255, 255, .6));
}

/* ---- NO overlay: the scrim disappears; the (light) texts keep a stronger
        shadow as a safety net over bright photos. ---- */
html.fo-product-cards-immersive.fo-product-cards-overlay-none .tm-product-card::before,
html.fo-product-cards-horizontalimmersive.fo-product-cards-overlay-none .tm-product-card::before
{
	display: none;
}

html.fo-product-cards-immersive.fo-product-cards-overlay-none .tm-product-card .product-link .product-name,
html.fo-product-cards-horizontalimmersive.fo-product-cards-overlay-none .tm-product-card .product-link .product-name
{
	text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 2px 14px rgba(0, 0, 0, .7);
}

html.fo-product-cards-immersive.fo-product-cards-overlay-none .tm-product-card .product-link .prices-container .price-container,
html.fo-product-cards-horizontalimmersive.fo-product-cards-overlay-none .tm-product-card .product-link .prices-container .price-container
{
	text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 2px 12px rgba(0, 0, 0, .7);
}

/* =========================================================================
   CARDS PER ROW (BO -> Tema interfata -> "Carduri pe rand")
   Only the standard listing grids are affected (.products-list-wrapper /
   .catalogue-list-container) - carousels and other JS-managed layouts keep
   their own sizing. The width formulas mirror the standard grid's own
   one/two/three/four-in-a-row calculations.
   ========================================================================= */
@media (min-width: 992px)
{
	/* The Horizontal style is intrinsically wide: its DEFAULT is 2 per row. */
	html[class*="fo-product-cards-horizontal"] .products-list-wrapper .tm-product-card,
	html[class*="fo-product-cards-horizontal"] .catalogue-list-container .tm-product-card
	{
		width: calc((100% - 45px) / 2);
	}

	html.fo-product-cards-cols-1 .products-list-wrapper .tm-product-card,
	html.fo-product-cards-cols-1 .catalogue-list-container .tm-product-card
	{
		width: calc(100% - 20px);
	}

	html.fo-product-cards-cols-2 .products-list-wrapper .tm-product-card,
	html.fo-product-cards-cols-2 .catalogue-list-container .tm-product-card
	{
		width: calc((100% - 45px) / 2);
	}

	html.fo-product-cards-cols-3 .products-list-wrapper .tm-product-card,
	html.fo-product-cards-cols-3 .catalogue-list-container .tm-product-card
	{
		width: calc((100% - 69px) / 3);
	}

	html.fo-product-cards-cols-4 .products-list-wrapper .tm-product-card,
	html.fo-product-cards-cols-4 .catalogue-list-container .tm-product-card
	{
		width: calc((100% - 95px) / 4);
	}

	/* Defensive clamp: Horizontal never renders more than 2 per row (the BO
	   editor and the renderer already prevent 3/4, this is belt-and-braces). */
	html[class*="fo-product-cards-horizontal"].fo-product-cards-cols-3 .products-list-wrapper .tm-product-card,
	html[class*="fo-product-cards-horizontal"].fo-product-cards-cols-3 .catalogue-list-container .tm-product-card,
	html[class*="fo-product-cards-horizontal"].fo-product-cards-cols-4 .products-list-wrapper .tm-product-card,
	html[class*="fo-product-cards-horizontal"].fo-product-cards-cols-4 .catalogue-list-container .tm-product-card
	{
		width: calc((100% - 45px) / 2);
	}
}

/* Below the desktop breakpoint the Horizontal style always goes 1 per row
   (it is too wide to pair up on small screens). */
@media (max-width: 991.98px)
{
	html[class*="fo-product-cards-horizontal"] .products-list-wrapper .tm-product-card,
	html[class*="fo-product-cards-horizontal"] .catalogue-list-container .tm-product-card
	{
		width: calc(100% - 20px);
	}
}

/* Mobile cards-per-row choice (Default = the standard responsive behaviour). */
@media (max-width: 767.98px)
{
	html.fo-product-cards-cols-sm-1 .products-list-wrapper .tm-product-card,
	html.fo-product-cards-cols-sm-1 .catalogue-list-container .tm-product-card
	{
		width: calc(100% - 20px);
	}

	html.fo-product-cards-cols-sm-2 .products-list-wrapper .tm-product-card,
	html.fo-product-cards-cols-sm-2 .catalogue-list-container .tm-product-card
	{
		width: calc((100% - 25px) / 2);
	}

	/* Horizontal stays 1 per row on mobile no matter what. */
	html[class*="fo-product-cards-horizontal"].fo-product-cards-cols-sm-2 .products-list-wrapper .tm-product-card,
	html[class*="fo-product-cards-horizontal"].fo-product-cards-cols-sm-2 .catalogue-list-container .tm-product-card
	{
		width: calc(100% - 20px);
	}
}

/* =========================================================================
   ADD-REVIEW page guard: there the card is a lone context PREVIEW next to the
   review form (a narrow side column), not a listing - so whenever ANY card
   style / cards-per-row opt-in is active, pin it to a clean, capped width and
   ignore the listing width formulas (which would squeeze it into a sliver).
   With no opt-in class (Classic, default grid) nothing here matches and the
   page keeps its standard behaviour.
   ========================================================================= */
html[class*="fo-product-cards-"] .add-review-container .products-list-wrapper .tm-product-card
{
	width: 100%;
	max-width: 320px;
	margin-left: 0;
	margin-right: 0;
}

/* The horizontal-family card cannot afford its fixed 210px image column in
   that narrow side column - switch to a proportional compact split. */
html[class*="fo-product-cards-horizontal"] .add-review-container .products-list-wrapper .tm-product-card .product-link
{
	grid-template-columns: 40% minmax(0, 1fr);
}

/* The immersive styles hide the actions until hover - on the review page the
   card is pure context (its actions are irrelevant there), which is fine; but
   the bottom-docked info must not hang in the hidden-actions gap on devices
   without hover, so nothing extra is needed here. */

/* =========================================================================
   Accessibility: users who prefer reduced motion keep the styles' looks but
   lose the continuous / springy animations.
   ========================================================================= */
@media (prefers-reduced-motion: reduce)
{
	html.fo-product-cards-crystal .tm-product-card::before
	{
		animation: none;
	}

	html.fo-product-cards-sketch .tm-product-card:hover
	{
		animation: none;
	}

	html.fo-product-cards-playful.fo-product-cards-playful-animated .tm-product-card
	{
		animation: none;
	}

	html.fo-product-cards-crystal .tm-product-card .product-link::after
	{
		animation: none;
		transition: none;
	}

	html.fo-product-cards-neon .tm-product-card:hover
	{
		animation: none;
	}

	html.fo-product-cards-showroom.fo-product-cards-showroom-floating .tm-product-card .product-link .picture-wrapper
	{
		animation: none;
	}

	/* Beam: the orbit stops - the elegant static gradient ring stays. */
	html.fo-product-cards-beam .tm-product-card::before,
	html.fo-product-cards-beam .tm-product-card::after
	{
		animation: none;
	}

	html.fo-product-cards-tech .tm-product-card:hover::after
	{
		animation: none;
	}

	/* Lumen: the travelling streak + edge glint stop; the lit glass, rim and gloss stay. */
	html.fo-product-cards-lumen .tm-product-card::before,
	html.fo-product-cards-lumen .tm-product-card::after
	{
		animation: none;
	}
}

/*Important to leave it 240 so that the carousel pictures align perfectly*/
#spinner-for-favs {
  color: var(--tm-secondary, #00c893);
  display: block;
  width: 30px;
  height: 30px;
  font-size: 30px;
  line-height: 30px;
  margin: 0 auto 10px auto;
}

#my-favorites-menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tm-main-menu .tm-badge {
  border-radius: 10px;
  min-width: 19px;
  line-height: 1.1;
  background: #5e945e;
  transform: scale(0.9);
}

.tm-main-menu .tm-badge.favs {
  background: linear-gradient(90deg, red 0%, #af0000 100%);
}

.tm-main-menu .tm-badge.cart {
  background: linear-gradient(90deg, #87489b 0%, #b269ca 100%);
}

#my-favs-dd-menu {
  padding-bottom: 50px;
  min-width: 280px;
}

a.go-to-favs-module-link {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  line-height: 50px;
  padding: 0 10px;
  background: rgba(135, 212, 255, 0.25);
  font-size: 12px;
  text-align: center;
}

/*Important to leave it 240 so that the carousel pictures align perfectly*/
.side-bar-container.with-padding {
  padding: calc(3 * 10px) 0 0 0;
}

.os-item-sidbar-widget iframe {
  width: 100% !important;
}

/*Important to leave it 240 so that the carousel pictures align perfectly*/
.ads-list-container .article-ad-card .article-media-container img {
  width: 100%;
  margin-bottom: calc(3 * 10px);
  border-radius: 2px;
}
.ads-list-container .article-card-on-sidebar {
  background: var(--tm-surface, white);
  box-shadow: 0 1px 10px -3px rgba(0, 0, 0, 0.05);
  margin: 0 0 calc(3 * 10px) 0;
}
.ads-list-container .article-card-on-sidebar .article-media-container {
  position: relative;
  height: 100%;
  width: 100%;
}
.ads-list-container .article-card-on-sidebar .article-media-container img {
  transform: unset;
  top: unset;
  left: unset;
  width: 100%;
  margin-bottom: calc(3 * 10px);
  border-radius: 2px;
}
.ads-list-container .article-card-on-sidebar .article-title-container {
  width: 100%;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  padding: 10px calc(2 * 10px);
}
.ads-list-container .article-card-on-sidebar .article-title-container h3.article-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--tm-text-muted, #777);
  display: block;
  overflow: hidden;
}
.ads-list-container .article-card-on-sidebar .article-date {
  font-size: 12px;
  color: var(--tm-text-muted, #777);
}

.article-card-on-sidebar.job .show-interst-command-wrapper .apply-job-command-container {
  display: flex;
  justify-content: center;
  padding: 10px;
}
.article-card-on-sidebar.job .show-interst-command-wrapper .apply-job-command-container .show-interest-in-the-job:hover {
  transform: none;
}
/* MEDIA QUERIES --------------------------------------------------------------------------*/
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .ads-list-container .article-card-on-sidebar .article-title-container h3.article-title {
    font-size: 18px;
  }
}
/* Medium devices (tablets, 768px and up) */
/* Large devices (desktops, 992px and up) */
/* Very large devices (large desktops, 1200px and up) */
/* Extra large devices (large desktops, 1400px and up) */

/*Important to leave it 240 so that the carousel pictures align perfectly*/
.list-product-cards-preview-container {
  height: 100%;
}

.dropdown-menu.dropdown-menu-for-search-bar-with-products-options {
  padding: 0;
  border: none;
  background-color: var(--tm-surface, #fff);
  position: fixed;
  top: 51px; /* în funcție de înălțimea search barului */
  left: 0;
  width: 100vw;
  height: calc(100vh - 109px); /* ia restul ecranului sub search bar */
  max-height: none;
  border-radius: 0;
  z-index: 9999;
  overflow-y: auto;
}

body:has(.dropdown-menu-for-search-bar-with-products-options.show) {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

.dropdown-menu-for-search-bar-with-products-options .list-of-products-in-search-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.dropdown-menu-for-search-bar-with-products-options .list-of-products-in-search-container .list-of-products-in-search {
  overflow-y: auto;
}
.dropdown-menu-for-search-bar-with-products-options .list-of-products-in-search-container .toggle-dropdown-for-small-devices {
  background: var(--tm-surface, white);
  border: 1px solid red;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: red;
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 20px;
  line-height: 38px;
}
.dropdown-menu-for-search-bar-with-products-options .list-of-products-in-search-container .tm-product-card-minimal {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}
.dropdown-menu-for-search-bar-with-products-options .list-of-products-in-search-container .tm-product-card-minimal a, .dropdown-menu-for-search-bar-with-products-options .list-of-products-in-search-container .tm-product-card-minimal a:hover {
  display: flex;
  align-items: center;
}
.dropdown-menu-for-search-bar-with-products-options .list-of-products-in-search-container .tm-product-card-minimal-details {
  display: flex;
  flex-direction: column;
}

.product-card-for-search-dropdown {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid #eee;
  transition: background-color 0.25s;
}

.dropdown-menu-for-search-bar-with-products-options::before {
  display: none;
}

#top-bar-search-form {
  position: relative;
  transition-duration: 0.2s;
  opacity: 0.95;
  z-index: 9999;
  width: 40vw;
  min-width: 125px;
}

#top-bar-search-form:hover {
  opacity: 1;
}

#top-bar-search-form .search-input {
  border-color: var(--tm-primary, #0088d4);
  border-radius: 30px;
  font-size: 14px;
  padding-right: 32px;
  width: 100%;
  background-color: var(--tm-surface, #fff);
  color: var(--tm-text, #333);
}

#top-bar-search-form .search-input::placeholder {
  color: var(--tm-text-muted, #999);
}

/* Enlarge the searh input ------------------ */
#top-bar-search-form:has(.search-input.focused) {
  position: absolute;
  left: calc(0.5 * 10px);
  width: calc(100% - 10px);
}

#top-bar-search-form:has(.top-bar-search-command.focused) {
  position: absolute;
  left: calc(0.5 * 10px);
  width: calc(100% - 10px);
}

#top-bar-search-form:has(.button-toggle-search-bar-options.show) {
  position: absolute;
  left: calc(0.5 * 10px);
  width: calc(100% - 10px);
}

/*--------------------------------------------*/
.top-bar-search-command {
  top: 50%;
  transform: translateY(-50%);
  right: 2px;
  position: absolute;
  color: #2578b6;
  background: rgba(37, 120, 182, 0.1);
  border: none;
  outline: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 13px;
  cursor: pointer;
  z-index: 2;
  text-align: center;
  transition-duration: 0.2s;
}
.top-bar-search-command:hover {
  background: #2578b6;
  color: white;
}
.top-bar-search-command:active {
  background: #2578b6;
  color: white;
  outline: none;
  box-shadow: none;
}
.top-bar-search-command:focus {
  background: #2578b6;
  color: white;
  outline: none;
  box-shadow: none;
}

.tm-product-card-minimal.highlighted {
  background-color: rgba(135, 212, 255, 0.25);
}

.search-all-products-with-search-term {
  display: block;
  height: 50px;
  line-height: 50px;
  padding: 0px 10px;
  background: rgba(135, 212, 255, 0.25);
  font-size: 12px;
  text-align: center;
  border: unset;
  color: #2578b6;
  width: 100%;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  body:has(.dropdown-menu-for-search-bar-with-products-options.show) {
    overflow: auto;
    position: static;
    width: auto;
  }
  .dropdown-menu.dropdown-menu-for-search-bar-with-products-options {
    padding: 0;
    min-width: 300px;
    border: none;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    border-radius: 0.5rem;
    background-color: var(--tm-surface, #fff);
    position: absolute;
    top: unset; /* în funcție de înălțimea search barului */
    left: unset;
    width: unset;
    height: unset; /* ia restul ecranului sub search bar */
    max-height: unset;
    z-index: 9999;
    padding-bottom: unset; /* spațiu pt butonul „Afișează toate rezultatele” */
    overflow-y: unset;
  }
  .dropdown-menu-for-search-bar-with-products-options .list-of-products-in-search-container {
    display: flex;
    flex-direction: column;
    max-height: 80vh;
  }
  .dropdown-menu-for-search-bar-with-products-options .list-of-products-in-search-container .list-of-products-in-search {
    overflow-y: auto;
  }
  .dropdown-menu-for-search-bar-with-products-options .list-of-products-in-search-container .toggle-dropdown-for-small-devices {
    display: none;
  }
  .product-card-for-search-dropdown {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid #eee;
    transition: background-color 0.25s;
  }
  /* Reset the search input enlargment for larger screens ----------------------- */
  #top-bar-search-form:has(.search-input.focused) {
    position: relative;
    left: auto;
    width: auto;
  }
  #top-bar-search-form:has(.top-bar-search-command.focused) {
    position: relative;
    left: auto;
    width: auto;
  }
  #top-bar-search-form:has(.button-toggle-search-bar-options.show) {
    position: relative;
    left: auto;
    width: auto;
  }
  /* ----------------------------------------------------------------------------- */
}
/* Medium devices (tablets, 768px and up) */
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  #top-bar-search-form {
    width: auto;
  }
}

.own-os-country-phone-picker {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
    gap: 6px;
}

.own-os-country-phone-picker .cpp-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.375rem 0.85rem;
    border: 1px solid #63bef1;
    border-radius: calc(2 * 10px);
    background: #fff;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    line-height: 1.5;
    font-size: 1rem;
    color: #495057;
    min-height: calc(1.5em + 0.75rem + 2px);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.own-os-country-phone-picker .cpp-toggle:hover {
    border-color: #0088d4;
}

.own-os-country-phone-picker .cpp-toggle:focus,
.own-os-country-phone-picker.is-open .cpp-toggle {
    outline: 0;
    border-color: #0088d4;
    box-shadow: 0 0 0 0.2rem rgba(135, 212, 255, 0.5);
}

.own-os-country-phone-picker img.cpp-flag {
    width: 22px;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
    flex: 0 0 auto;
    display: inline-block;
    background: #f0f0f0;
}

.own-os-country-phone-picker .cpp-toggle .cpp-country-code {
    font-weight: 600;
    color: #495057;
    letter-spacing: 0.02em;
}

.own-os-country-phone-picker .cpp-toggle .cpp-dial {
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.own-os-country-phone-picker .cpp-caret {
    font-size: 0.75rem;
    margin-left: 0.15rem;
    opacity: 0.7;
}

.own-os-country-phone-picker .cpp-phone-input {
    flex: 1 1 auto;
    min-width: 0;
    border-radius: calc(2 * 10px);
    border-color: #63bef1;
}

.own-os-country-phone-picker .cpp-phone-input:hover,
.own-os-country-phone-picker .cpp-phone-input:focus {
    border-color: #0088d4;
}

.own-os-country-phone-picker.is-invalid .cpp-toggle,
.own-os-country-phone-picker.is-invalid .cpp-phone-input {
    border-color: #dc3545;
}

.own-os-country-phone-picker .cpp-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1050;
    width: 320px;
    max-width: calc(100vw - 1rem);
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 12px;
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.15);
    display: none;
    overflow: hidden;
}

.own-os-country-phone-picker.is-open .cpp-dropdown {
    display: block;
}

.own-os-country-phone-picker .cpp-search-wrapper {
    padding: 0.5rem;
    border-bottom: 1px solid #e9ecef;
    background: #f8f9fa;
}

.own-os-country-phone-picker .cpp-search.form-control {
    border-radius: calc(2 * 10px);
}

.own-os-country-phone-picker .cpp-list {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0;
    max-height: 260px;
    overflow-y: auto;
}

.own-os-country-phone-picker .cpp-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    line-height: 1.4;
    font-size: 0.95rem;
}

.own-os-country-phone-picker .cpp-item:hover,
.own-os-country-phone-picker .cpp-item.is-active {
    background: #e9f3ff;
}

.own-os-country-phone-picker .cpp-item.is-selected {
    background: #dbeafe;
}

.own-os-country-phone-picker .cpp-item .cpp-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.own-os-country-phone-picker .cpp-item .cpp-dial {
    color: #6c757d;
    font-variant-numeric: tabular-nums;
}

.own-os-country-phone-picker .cpp-item.is-hidden {
    display: none;
}

.own-os-country-phone-picker .cpp-empty {
    padding: 0.75rem;
    text-align: center;
    color: #6c757d;
    font-size: 0.9rem;
}

@media (max-width: 480px) {
    .own-os-country-phone-picker .cpp-dropdown {
        width: 100%;
    }
}

/*Important to leave it 240 so that the carousel pictures align perfectly*/
/*
	Quick Cart Flyout
	A right-edge dock tab + slide-in pane that previews the shopping cart.
	Desktop-only (>= 992px). On mobile/tablet, the existing `.go-to-shopping-cart`
	corner bubble remains the primary cart shortcut.
*/
/* Hidden by default; the @media block below switches it on for desktop only. */
.quick-cart-flyout-root {
  display: none;
}

/* Keyframes used by the desktop-only rules in the @media block below. Declared at
   TOP level on purpose: the CSS minifier behind Bundler & Minifier (NUglify) cannot
   parse @keyframes nested inside @media and floods the build with errors. A keyframes
   definition on its own has no effect - every `animation:` usage stays inside the
   desktop @media block, so the behavior is unchanged. Do NOT move these back in. */
/* "Invite" animation: gentle nudge + glow pulse when an item is added. */
@keyframes qcf-tab-invite {
  0% {
    transform: translate(0px, -50%);
  }
  25% {
    transform: translate(-10px, -50%);
  }
  50% {
    transform: translate(0px, -50%);
  }
  75% {
    transform: translate(-6px, -50%);
  }
  100% {
    transform: translate(0px, -50%);
  }
}
@keyframes qcf-tab-glow-pulse {
  0% {
    opacity: 0.85;
    box-shadow: 0 0 0 0 rgba(0, 200, 147, 0.7);
  }
  70% {
    opacity: 0;
    box-shadow: 0 0 0 18px rgba(0, 200, 147, 0);
  }
  100% {
    opacity: 0;
    box-shadow: 0 0 0 0 rgba(0, 200, 147, 0);
  }
}
@keyframes qcf-badge-pop {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.35);
  }
  70% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}
/* Add-to-cart "shake": own.os.add.to.cart.js drops the generic `.shake-animation`
   class on the dock tab after the flying-cart animation. That shared keyframe
   (`@keyframes shake` in own.os.add.to.cart.scss) animates `transform: translateX(...)`
   only, which WIPES the tab's `translateY(-50%)` centering and makes it lurch downward
   by half its height before snapping back. Re-declare the shake here, scoped to the
   dock tab and preserving the `-50%` vertical centering, so only a small horizontal
   shake is seen - no vertical drop. Higher specificity than the generic
   `.shake-animation` rule, so this wins. Duration matches --shake-frequency (300ms). */
@keyframes qcf-tab-shake {
  0%, 100% {
    transform: translate(0, -50%);
  }
  10% {
    transform: translate(-5px, -50%);
  }
  20% {
    transform: translate(5px, -50%);
  }
  30% {
    transform: translate(-5px, -50%);
  }
  40% {
    transform: translate(5px, -50%);
  }
  50% {
    transform: translate(-5px, -50%);
  }
  60% {
    transform: translate(5px, -50%);
  }
  70% {
    transform: translate(-5px, -50%);
  }
  80% {
    transform: translate(5px, -50%);
  }
  90% {
    transform: translate(-5px, -50%);
  }
}

@media (min-width: 992px) {
  /* Show the flyout only on desktop. */
  .quick-cart-flyout-root {
    display: block;
  }
  /* On desktop, when the feature is enabled, the bottom-right corner cart bubble
     is redundant: the dock tab takes over. Hide it to keep the UI uncluttered.
     IMPORTANT: this rule is scoped to `body.quick-cart-flyout-enabled` so that
     when the feature flag is off the original behavior (visible corner bubble)
     is preserved bit-for-bit. */
  body.quick-cart-flyout-enabled .quick-commands-container .go-to-shopping-cart {
    display: none !important;
  }
  /* DOCK TAB ----------------------------------------------------------- */
  .quick-cart-flyout-tab {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translate(100%, -50%);
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    width: 46px;
    min-height: 110px;
    padding: calc(10px * 1.2) calc(10px * 0.6);
    background: linear-gradient(90deg, var(--tm-primary-dark, #006197) 0%, var(--tm-primary, #0088d4) 100%);
    color: white;
    border: none;
    border-radius: 10px 0 0 10px;
    box-shadow: -4px 0 14px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(10px * 0.5);
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.2s ease-out, background 0.2s ease-out, opacity 0.2s ease-out;
  }
  .quick-cart-flyout-tab:focus {
    outline: none;
    box-shadow: -4px 0 14px rgba(0, 0, 0, 0.18), 0 0 0 3px rgba(0, 200, 147, 0.25);
  }
  .quick-cart-flyout-tab:hover {
    background: linear-gradient(90deg, var(--tm-secondary-dark, #009970) 0%, var(--tm-secondary, #00c893) 100%);
    box-shadow: -6px 0 20px rgba(0, 0, 0, 0.22);
  }
  /* When the cart has entries, the tab becomes visible and pokes out a bit
     so it's discoverable but not intrusive. */
  .quick-cart-flyout-root.has-entries .quick-cart-flyout-tab {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transform: translate(0px, -50%);
  }
  .quick-cart-flyout-root.has-entries .quick-cart-flyout-tab:hover {
    transform: translate(-2px, -50%);
  }
  .quick-cart-flyout-tab-icon {
    font-size: 20px;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
  }
  /* The item-count badge sits in the normal column flow of the tab (between the
     cart icon and the vertical label) so it NEVER overlaps the icon. The tab's
     `align-items: center` keeps it horizontally centered; `flex-shrink: 0` stops
     it from being squashed, and `inline-flex` perfectly centers the number. */
  .quick-cart-flyout-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: var(--tm-accent, #ff6500);
    color: white;
    border: 1px solid white;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  }
  .quick-cart-flyout-tab-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: 0.92;
    margin-top: calc(10px * 0.4);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  }
  /* A subtle glow ring that pulses when a product is added. */
  .quick-cart-flyout-tab-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 10px 0 0 10px;
    pointer-events: none;
    box-shadow: 0 0 0 0 rgba(0, 200, 147, 0.7);
    opacity: 0;
  }
  .quick-cart-flyout-tab.is-inviting {
    animation: qcf-tab-invite 0.9s ease-in-out;
  }
  .quick-cart-flyout-tab.is-inviting .quick-cart-flyout-tab-glow {
    animation: qcf-tab-glow-pulse 1s ease-out;
  }
  .quick-cart-flyout-tab.is-inviting .quick-cart-flyout-tab-count {
    animation: qcf-badge-pop 0.5s ease-out;
  }
  .quick-cart-flyout-tab.shake-animation {
    animation: qcf-tab-shake 300ms ease-in-out;
  }
  /* Slide the corner quick-commands buttons out of the way while the pane is open,
     then bring them back in once it closes. The transition is only applied when the
     feature is enabled, and the slide-out only triggers when the pane is `.is-open`
     - so flag=false / pane closed keeps the original UX bit-for-bit. */
  body.quick-cart-flyout-enabled .quick-commands-container {
    transition: opacity 0.32s ease-out, transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  body.quick-cart-flyout-enabled:has(.quick-cart-flyout-root.is-open) .quick-commands-container {
    opacity: 0;
    pointer-events: none;
    transform: translateX(80px);
  }
  /* BACKDROP ----------------------------------------------------------- */
  .quick-cart-flyout-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(20, 30, 45, 0.42);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.32s ease, visibility 0.32s ease;
    z-index: 9994;
  }
  /* PANE --------------------------------------------------------------- */
  .quick-cart-flyout-pane {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 380px;
    max-width: 92vw;
    background: var(--tm-surface, white);
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.14);
    transform: translateX(105%);
    transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
    z-index: 9995;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  /* Open state */
  .quick-cart-flyout-root.is-open .quick-cart-flyout-backdrop {
    opacity: 1;
    visibility: visible;
  }
  .quick-cart-flyout-root.is-open .quick-cart-flyout-pane {
    transform: translateX(0);
  }
  .quick-cart-flyout-root.is-open .quick-cart-flyout-tab {
    /* hide the tab while the pane is open so it doesn't poke through */
    opacity: 0;
    pointer-events: none;
    transform: translate(100%, -50%);
  }
  /* HEADER ------------------------------------------------------------- */
  .quick-cart-flyout-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(10px * 1.6) calc(10px * 2);
    background: linear-gradient(90deg, var(--tm-primary-dark, #006197) 0%, var(--tm-primary, #0088d4) 100%);
    color: white;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
  }
  .quick-cart-flyout-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
  }
  .quick-cart-flyout-header-title-wrapper {
    display: flex;
    align-items: center;
    gap: calc(10px * 1.2);
  }
  .quick-cart-flyout-header-icon {
    font-size: 22px;
    opacity: 0.9;
  }
  .quick-cart-flyout-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.4px;
  }
  .quick-cart-flyout-close {
    background: rgba(255, 255, 255, 0.12);
    color: white;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease-out, transform 0.2s ease-out;
  }
  .quick-cart-flyout-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(90deg);
  }
  .quick-cart-flyout-close:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
  }
  /* CONTENT HOST ------------------------------------------------------- */
  .quick-cart-flyout-content-host {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
  }
  .quick-cart-flyout-contents {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  /* BODY (items list) -------------------------------------------------- */
  .quick-cart-flyout-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: calc(10px * 1.2) 0;
  }
  .quick-cart-flyout-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .quick-cart-flyout-item {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    grid-column-gap: calc(10px * 1.4);
    align-items: center;
    padding: calc(10px * 1.2) calc(10px * 2);
    border-bottom: 1px solid rgba(186, 186, 186, 0.18);
    transition: background 0.2s ease-out;
  }
  .quick-cart-flyout-item:hover {
    background: rgba(37, 120, 182, 0.02);
  }
  .quick-cart-flyout-item:last-child {
    border-bottom: none;
  }
  .quick-cart-flyout-item-picture-link {
    display: block;
    text-decoration: none;
  }
  .quick-cart-flyout-item-picture {
    width: 64px;
    height: 64px;
    border-radius: 5px;
    overflow: hidden;
    background: var(--tm-surface-alt, #fcfdff);
    border: 1px solid rgba(186, 186, 186, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .quick-cart-flyout-item-picture img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  .quick-cart-flyout-item-picture .tm-icon.no-pic {
    font-size: 26px;
    color: #bababa;
  }
  .quick-cart-flyout-item-picture .product-picture-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f4f4f4 0%, var(--tm-surface, white) 60%, #f4f4f4 100%);
  }
  .quick-cart-flyout-item-picture .product-picture-placeholder .pp-icon {
    font-size: 24px;
    line-height: 1;
    color: var(--tm-primary, #0088d4);
    background: linear-gradient(90deg, var(--tm-primary, #0088d4) 0%, var(--tm-secondary, #00c893) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.85;
  }
  .quick-cart-flyout-item-picture .product-picture-placeholder .pp-label {
    display: none;
  }
  .quick-cart-flyout-item-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .quick-cart-flyout-item-name {
    color: var(--tm-text, #333);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .quick-cart-flyout-item-name:hover {
    color: var(--tm-primary, #0088d4);
    text-decoration: none;
  }
  .quick-cart-flyout-item-meta {
    margin-top: 4px;
    font-size: 12px;
    color: var(--tm-text-muted, #777);
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
  }
  .quick-cart-flyout-item-qty {
    font-weight: 600;
    color: var(--tm-primary-dark, #006197);
  }
  .quick-cart-flyout-item-multiplier {
    color: #bababa;
    margin: 0 2px;
  }
  .quick-cart-flyout-item-unit-price {
    color: var(--tm-text-muted, #777);
  }
  .quick-cart-flyout-item-free {
    color: var(--tm-secondary-dark, #009970);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .quick-cart-flyout-item-total {
    font-size: 14px;
    font-weight: 700;
    color: var(--tm-text, #333);
    white-space: nowrap;
    text-align: right;
  }
  /* EMPTY STATE -------------------------------------------------------- */
  .quick-cart-flyout-empty {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(10px * 4);
    text-align: center;
    color: var(--tm-text-muted, #777);
  }
  .quick-cart-flyout-empty-icon {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: rgba(135, 212, 255, 0.15);
    color: var(--tm-primary, #0088d4);
    font-size: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: calc(10px * 2);
    opacity: 0.85;
  }
  .quick-cart-flyout-empty-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--tm-text, #333);
    margin-bottom: calc(10px * 0.5);
  }
  .quick-cart-flyout-empty-hint {
    font-size: 14px;
    color: var(--tm-text-muted, #777);
  }
  /* FOOTER ------------------------------------------------------------- */
  .quick-cart-flyout-footer {
    flex-shrink: 0;
    padding: calc(10px * 1.6) calc(10px * 2);
    border-top: 1px solid rgba(186, 186, 186, 0.25);
    background: var(--tm-surface-alt, #fafafa);
    display: flex;
    flex-direction: column;
    gap: calc(10px * 1.4);
  }
  .quick-cart-flyout-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .quick-cart-flyout-summary-label {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--tm-text-muted, #777);
    font-weight: 600;
  }
  .quick-cart-flyout-summary-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--tm-primary-dark, #006197);
  }
  .quick-cart-flyout-cta {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(10px * 1);
    padding: calc(10px * 1.4) calc(10px * 2);
    background: linear-gradient(90deg, var(--tm-primary-dark, #006197) 0%, var(--tm-primary, #0088d4) 100%);
    color: white !important;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-radius: calc(5 * 10px);
    box-shadow: 0 6px 16px rgba(0, 95, 147, 0.28);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
  }
  .quick-cart-flyout-cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #63bef1 0%, var(--tm-primary-dark, #006197) 100%);
    transition: left 0.4s ease-out;
    z-index: 0;
  }
  .quick-cart-flyout-cta > * {
    position: relative;
    z-index: 1;
  }
  .quick-cart-flyout-cta:hover {
    color: white;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(0, 95, 147, 0.38);
  }
  .quick-cart-flyout-cta:hover::before {
    left: 0;
  }
  .quick-cart-flyout-cta:hover .quick-cart-flyout-cta-arrow {
    transform: translateX(3px);
  }
  .quick-cart-flyout-cta:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(135, 212, 255, 0.25), 0 6px 16px rgba(0, 95, 147, 0.28);
  }
  .quick-cart-flyout-cta-arrow {
    font-size: 12px;
    transition: transform 0.2s ease-out;
  }
  /* SCROLLBAR (inside the pane only) ----------------------------------- */
  .quick-cart-flyout-body::-webkit-scrollbar {
    width: 6px;
  }
  .quick-cart-flyout-body::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.18);
    border-radius: 3px;
  }
  .quick-cart-flyout-body::-webkit-scrollbar-track {
    background: transparent;
  }
}
/* Extra large desktops - more breathing room. */
@media (min-width: 1400px) {
  .quick-cart-flyout-pane {
    width: 420px;
  }
}

/* =========================================================================
   TopManager Online Shop - Frosted glass surface treatment (opt-in modifier)
   -------------------------------------------------------------------------
   Activated only when <html> carries the `.glass` class (set from the BO Web
   Studio "Use frosted glass" toggle). Frosted glass is a MATERIAL, orthogonal
   to the colour theme: every floating surface (menus, popups, alerts, modals,
   toasts, the sticky top bar) becomes a translucent, backdrop-blurred panel,
   so it composes with ANY of the colour themes.

   Theme-aware: the translucent tint comes from the --tm-glass-* knobs below.
   Light themes (incl. Default) use a light glass; the dark themes override the
   knobs to a dark glass. Nothing here affects a shop that does not opt in.

   Graceful degradation: where backdrop-filter is unsupported the surfaces keep
   the (more opaque) --tm-glass-bg-strong colour, so text never loses its
   backing. Where it IS supported, the translucent --tm-glass-bg + blur apply.
   ========================================================================= */
/* Light glass knobs (Default + all light themes). */
html.glass {
  --tm-glass-bg: rgba(255, 255, 255, 0.62);
  --tm-glass-bg-strong: rgba(255, 255, 255, 0.85);
  --tm-glass-border: rgba(255, 255, 255, 0.55);
  --tm-glass-shadow: 0 16px 48px -16px rgba(0, 0, 0, 0.35);
  --tm-glass-blur: saturate(160%) blur(14px);
}

/* Dark glass knobs. A neutral dark tint reads well under blur over any of the
   dark palettes (carbon/deepsea/emerald/aubergine/midnight/espresso). */
html.carbon.glass,
html.deepsea.glass,
html.emerald.glass,
html.aubergine.glass,
html.midnight.glass,
html.espresso.glass,
html.ember.glass,
html.lagoon.glass,
html.amber.glass,
html.rose.glass,
html.obsidian.glass,
html.synthwave.glass,
html.burgundy.glass,
html.sapphire.glass,
html.copper.glass,
html.aurora.glass,
html.dune.glass,
html.slate.glass {
  --tm-glass-bg: rgba(18, 20, 26, 0.55);
  --tm-glass-bg-strong: rgba(18, 20, 26, 0.82);
  --tm-glass-border: rgba(255, 255, 255, 0.10);
  --tm-glass-shadow: 0 16px 48px -16px rgba(0, 0, 0, 0.65);
  --tm-glass-blur: saturate(150%) blur(14px);
}

/* Base (no-backdrop-filter fallback): more opaque tint, no blur -> readable. */
html.glass .dropdown-menu,
html.glass #categories-menu-list::before,
html.glass .menu-item-details,
html.glass .classic-submenu-deep,
html.glass .modal-content,
html.glass .offcanvas,
html.glass .popover,
html.glass .toast,
html.glass .fo-chat-window,
html.glass .own-popup-contents,
html.glass .confirm-container,
html.glass .alert-container,
html.glass .busy-box-container,
html.glass #login-register-invite-dialog-contents,
html.glass .quick-cart-flyout-pane,
html.glass .newsletter-popup-panel,
html.glass #main-navbar.for-scrolled-doc {
  background: var(--tm-glass-bg-strong, rgba(255, 255, 255, 0.85)) !important;
  border: 1px solid var(--tm-glass-border, rgba(255, 255, 255, 0.55));
  box-shadow: var(--tm-glass-shadow, 0 16px 48px -16px rgba(0, 0, 0, 0.35));
}

/* The sticky top bar toggles .for-scrolled-doc on scroll; a full 1px border there reads as a
   flickering outline as it animates in/out. Drop the border (keep the translucent tint, blur
   and soft drop-shadow) for a clean, premium scroll transition. */
html.glass #main-navbar.for-scrolled-doc {
  border: 0;
}

/* Listing pagination pills (articles / products / any list view) become glass
   chips - on ANY colour theme, driven by this frosted-glass toggle (NOT tied to
   a specific theme). Only the RESTING pills: hover/selected keep their primary
   fill (excluded via :not). The pill already carries its own var(--tm-border)
   hairline + 15px radius from own.os.pagination; here we only swap its
   transparent background for the glass tint. Fallback (no backdrop-filter): the
   stronger opaque tint keeps the number readable. */
html.glass .list-view-pagination-container > a.page-link:not(:hover):not(:active):not(.selected) {
  background: var(--tm-glass-bg-strong, rgba(255, 255, 255, 0.85));
}

/* Articles/listing FILTER BAR becomes a frosted panel under the toggle, on ANY
   theme (the "Carusel & mega-meniu plutitor" toggle also frosts it, with the
   hero radius; this makes it respond to the frosted-glass material on its own).
   The blur lives on a ::before overlay, NOT the container: the bar hosts the
   sort dropdown, and a backdrop-filtered container would become its backdrop
   root (breaking the dropdown's own frosting). border-radius is left to the
   base (or to the floating-hero toggle when that is also on) - the material
   only swaps the fill/border/shadow. */
html.glass .articles-list-filter-container {
  position: relative;
  z-index: 0;
  background: var(--tm-glass-bg-strong, rgba(255, 255, 255, 0.85));
  border: 1px solid var(--tm-glass-border, rgba(255, 255, 255, 0.55));
  box-shadow: var(--tm-glass-shadow, 0 16px 48px -16px rgba(0, 0, 0, 0.35));
}

/* More frosted panels (opt-in, any theme). Leaf panels blur directly; panels
   that may host dropdowns (the catalogue filter, the account content area) blur
   via a ::before overlay so they never become the backdrop root of a nested
   frosted dropdown (the sticky-bar / articles-filter lesson).
    - .cookie-consent-card         : the cookie consent bar (leaf; keeps its own
                                      decorative top gradient strip ::before).
    - .catalogue-filter-container  : the products catalogue left filter panel.
    - .shopping-cart-totals-container : the cart / checkout summary panel.
    - .my-account-side-menu-container / .my-account-section-container : the
                                      client-account side nav + content panels.
    - .today-agenda-container      : the "today's agenda" dashboard panel. */
html.glass .cookie-consent-card,
html.glass .catalogue-filter-container,
html.glass .shopping-cart-totals-container,
html.glass .my-account-side-menu-container,
html.glass .my-account-section-container,
html.glass .today-agenda-container {
  background: var(--tm-glass-bg-strong, rgba(255, 255, 255, 0.85));
  border: 1px solid var(--tm-glass-border, rgba(255, 255, 255, 0.55));
  box-shadow: var(--tm-glass-shadow, 0 16px 48px -16px rgba(0, 0, 0, 0.35));
}

/* The ::before-blur panels must establish a stacking context so the negative-z
   overlay paints above their own background but below their content. */
html.glass .catalogue-filter-container,
html.glass .my-account-section-container {
  position: relative;
  z-index: 0;
}

/* Alignment fix: WITH a sidebar, the "today agenda" section is the first block
   of the main column and its 50px top margin pushed the (now clearly visible)
   glass panel below the sidebar's first card. Zero that top margin so the panel
   aligns with the sidebar top. Deliberately scoped to `.body-with-sidebar` +
   a DIRECT main-column section, so:
    - WITHOUT a sidebar (`.body-without-sidebar`) the section keeps its original
      50px top margin - a correct, comfortable gap below the carousel/links;
    - inner pages (e.g. the account "my agenda", nested deeper inside
      .my-account-section-container, not a direct child here) keep their spacing. */
html.glass #page-body-wrapper.body-with-sidebar > .page-section > .today-agenda-container {
  margin-top: 0;
}

/* Enhanced: translucent tint + backdrop blur where supported. */
@supports (backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px)) {
  html.glass .dropdown-menu,
  html.glass #categories-menu-list::before,
  html.glass .menu-item-details,
  html.glass .classic-submenu-deep,
  html.glass .modal-content,
  html.glass .offcanvas,
  html.glass .popover,
  html.glass .toast,
  html.glass .fo-chat-window,
  html.glass .own-popup-contents,
  html.glass .confirm-container,
  html.glass .alert-container,
  html.glass .busy-box-container,
  html.glass #login-register-invite-dialog-contents,
  html.glass .quick-cart-flyout-pane,
  html.glass .newsletter-popup-panel {
    background: var(--tm-glass-bg, rgba(255, 255, 255, 0.62)) !important;
    -webkit-backdrop-filter: var(--tm-glass-blur, saturate(160%) blur(14px));
    backdrop-filter: var(--tm-glass-blur, saturate(160%) blur(14px));
  }
  /* Pagination pills: translucent glass tint + backdrop blur (resting only). */
  html.glass .list-view-pagination-container > a.page-link:not(:hover):not(:active):not(.selected) {
    background: var(--tm-glass-bg, rgba(255, 255, 255, 0.62));
    -webkit-backdrop-filter: var(--tm-glass-blur, saturate(160%) blur(14px));
    backdrop-filter: var(--tm-glass-blur, saturate(160%) blur(14px));
  }
  /* Articles filter bar: translucent tint on the bar + the blur on its
     ::before overlay (never the container - it hosts the sort dropdown). */
  html.glass .articles-list-filter-container {
    background: var(--tm-glass-bg, rgba(255, 255, 255, 0.62));
  }
  html.glass .articles-list-filter-container::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    -webkit-backdrop-filter: var(--tm-glass-blur, saturate(160%) blur(14px));
    backdrop-filter: var(--tm-glass-blur, saturate(160%) blur(14px));
  }
  /* Leaf panels: blur directly on the element. */
  html.glass .cookie-consent-card,
  html.glass .shopping-cart-totals-container,
  html.glass .my-account-side-menu-container,
  html.glass .today-agenda-container {
    background: var(--tm-glass-bg, rgba(255, 255, 255, 0.62));
    -webkit-backdrop-filter: var(--tm-glass-blur, saturate(160%) blur(14px));
    backdrop-filter: var(--tm-glass-blur, saturate(160%) blur(14px));
  }
  /* Dropdown-hosting panels: tint on the panel, blur on a ::before overlay. */
  html.glass .catalogue-filter-container,
  html.glass .my-account-section-container {
    background: var(--tm-glass-bg, rgba(255, 255, 255, 0.62));
  }
  html.glass .catalogue-filter-container::before,
  html.glass .my-account-section-container::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    -webkit-backdrop-filter: var(--tm-glass-blur, saturate(160%) blur(14px));
    backdrop-filter: var(--tm-glass-blur, saturate(160%) blur(14px));
  }
  /* The sticky top bar is an ANCESTOR of the header dropdowns, so it must NEVER carry
     backdrop-filter itself: a backdrop-filtered element becomes the backdrop root for its
     descendants (CSS Filter Effects 2), which made the account/cart dropdowns' glass blur stop
     sampling the page behind them as soon as the bar entered its scrolled state (the effect
     "vanished on scroll"). The bar keeps only the translucent tint; its blur lives on a
     ::before overlay pseudo-element, which has no descendants -> the dropdowns keep frosting. */
  html.glass #main-navbar.for-scrolled-doc {
    background: var(--tm-glass-bg, rgba(255, 255, 255, 0.62)) !important;
  }
  html.glass #main-navbar.for-scrolled-doc::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    -webkit-backdrop-filter: var(--tm-glass-blur, saturate(160%) blur(14px));
    backdrop-filter: var(--tm-glass-blur, saturate(160%) blur(14px));
  }
}

.booking-widget {
  background: var(--tm-surface, #ffffff);
  border: 1px solid var(--tm-border, #e3e8ef);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 1.5rem 0;
  box-shadow: 0 6px 24px rgba(18, 38, 63, 0.06);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
  scroll-margin-top: var(--section-scroll-offset, 96px);
}
.booking-widget.is-highlighted {
  border-color: var(--tm-primary, #2c7be5);
  box-shadow: 0 0 0 3px rgba(44, 123, 229, 0.25), 0 6px 24px rgba(18, 38, 63, 0.12);
  animation: bookingWidgetPulse 1.1s ease 1;
}
.booking-widget .product-description-title {
  margin: 0 0 1.25rem;
}
.booking-widget .booking-widget-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
}
.booking-widget .booking-widget-form .booking-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1 1 180px;
}
.booking-widget .booking-widget-form .booking-field label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--tm-muted, #6b7280);
  margin: 0;
}
.booking-widget .booking-widget-form .booking-field-guests {
  flex: 0 0 110px;
}
.booking-widget .booking-widget-form .booking-check-availability {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  padding: 0.6rem 1.4rem;
}
.booking-widget .booking-widget-results {
  margin-top: 1.25rem;
  min-height: 2rem;
  transition: opacity 0.15s ease;
}
.booking-widget .booking-widget-results.is-loading {
  opacity: 0.5;
  pointer-events: none;
}
.booking-widget .booking-availability-prompt {
  color: var(--tm-muted, #6b7280);
  font-style: italic;
}
.booking-widget .booking-availability-error {
  text-align: center;
  padding: 0.75rem 0;
}
.booking-widget .booking-availability-error .booking-availability-error-message {
  color: var(--tm-muted, #6b7280);
  margin-bottom: 0.75rem;
}
.booking-widget .booking-reserve-slot.is-reserving {
  opacity: 0.6;
  pointer-events: none;
}

.booking-availability-empty {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--tm-muted, #6b7280);
  padding: 0.75rem 0;
}
.booking-availability-empty i {
  font-size: 1.1rem;
}

.booking-availability-resource {
  padding: 0.75rem 0;
  border-top: 1px solid var(--tm-border, #e3e8ef);
}
.booking-availability-resource:first-child {
  border-top: 0;
}
.booking-availability-resource .booking-availability-resource-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: var(--tm-text, #1a2233);
  margin-bottom: 0.6rem;
}
.booking-availability-resource .booking-resource-dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--booking-resource-color, var(--tm-primary, #2c7be5));
  display: inline-block;
}

.booking-stay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--tm-border, #e3e8ef);
  border-radius: 12px;
}
.booking-stay.is-unavailable {
  opacity: 0.6;
}
.booking-stay .booking-stay-info {
  display: flex;
  flex-direction: column;
}
.booking-stay .booking-stay-dates {
  font-weight: 600;
  color: var(--tm-text, #1a2233);
}
.booking-stay .booking-stay-nights {
  font-size: 0.85rem;
  color: var(--tm-muted, #6b7280);
}
.booking-stay .booking-stay-price {
  margin-left: auto;
  text-align: right;
}
.booking-stay .booking-stay-price .booking-stay-total-label {
  display: block;
  font-size: 0.75rem;
  color: var(--tm-muted, #6b7280);
}
.booking-stay .booking-stay-price .booking-stay-total {
  font-weight: 700;
  color: var(--tm-primary, #2c7be5);
  font-size: 1.1rem;
}

.booking-day-group {
  margin-bottom: 1rem;
}
.booking-day-group .booking-day-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tm-muted, #6b7280);
  text-transform: capitalize;
  margin-bottom: 0.5rem;
}
.booking-day-group .booking-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.booking-slot {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  min-width: 84px;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--tm-border, #e3e8ef);
  border-radius: 8px;
  background: var(--tm-surface, #ffffff);
  color: var(--tm-text, #1a2233);
  cursor: pointer;
  font: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.booking-slot.is-available:hover {
  border-color: var(--tm-primary, #2c7be5);
  background: rgba(44, 123, 229, 0.06);
}
.booking-slot.is-reserving {
  border-color: var(--tm-primary, #2c7be5);
  background: var(--tm-primary, #2c7be5);
  color: #fff;
  opacity: 0.6;
  pointer-events: none;
}
.booking-slot.is-reserving .booking-slot-price {
  color: #fff;
}
.booking-slot.is-unavailable {
  opacity: 0.45;
  cursor: not-allowed;
  text-decoration: line-through;
}
.booking-slot .booking-slot-time {
  font-weight: 700;
}
.booking-slot .booking-slot-price {
  font-size: 0.8rem;
  color: var(--tm-muted, #6b7280);
}

.booking-slot-unavailable-badge {
  margin-left: auto;
  color: var(--tm-muted, #6b7280);
  font-weight: 600;
}

#booking-sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  background: var(--tm-surface, #ffffff);
  border-top: 1px solid var(--tm-border, #e3e8ef);
  box-shadow: 0 -4px 18px rgba(18, 38, 63, 0.1);
  transform: translateY(110%);
  transition: transform 0.25s ease;
}
#booking-sticky-bar.is-visible {
  transform: translateY(0);
}
#booking-sticky-bar .booking-sticky-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
#booking-sticky-bar .booking-sticky-title {
  font-weight: 700;
  color: var(--tm-text, #1a2233);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#booking-sticky-bar .booking-sticky-cta {
  flex: 0 0 auto;
  font-weight: 600;
  padding: 0.6rem 1.6rem;
}

.booking-cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
  padding: 2rem 1.25rem;
  margin: 2rem 0;
  border-radius: 12px;
  background: rgba(44, 123, 229, 0.06);
  border: 1px dashed rgba(44, 123, 229, 0.4);
}
.booking-cta-band .booking-cta-band-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--tm-text, #1a2233);
}
.booking-cta-band .booking-cta-band-button {
  font-weight: 600;
  padding: 0.7rem 2rem;
  font-size: 1.05rem;
}

.cart-booking-details {
  font-size: 0.9rem;
  color: var(--tm-muted, #6b7280);
}
.cart-booking-details .cart-booking-resource {
  font-weight: 600;
  color: var(--tm-text, #1a2233);
}
.cart-booking-details i {
  color: var(--tm-primary, #2c7be5);
}

.price-from-prefix {
  font-size: 0.8em;
  font-weight: 600;
  color: var(--tm-muted, #6b7280);
  margin-right: 0.25rem;
}

@keyframes bookingWidgetPulse {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.012);
  }
  100% {
    transform: scale(1);
  }
}
.tm-booking-context-banner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.1rem;
  margin: 0 0 1.25rem;
  border-radius: 12px;
  border: 1px solid var(--tm-border, #e3e8ef);
  border-left: 4px solid var(--tm-primary, #2c7be5);
  background: var(--tm-surface, #ffffff);
  color: var(--tm-text, #1a2233);
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(18, 38, 63, 0.05);
}

.tm-booking-context-banner__icon {
  font-size: 1.2rem;
  color: var(--tm-primary, #2c7be5);
  flex: 0 0 auto;
}

.tm-booking-context-banner__text {
  flex: 1 1 auto;
}

.tm-booking-context-banner__review {
  flex: 0 0 auto;
  font-weight: 600;
  color: var(--tm-primary, #2c7be5);
  white-space: nowrap;
}

.tm-booking-context-banner.is-past {
  color: var(--tm-muted, #6b7280);
  border-left-color: var(--tm-muted, #6b7280);
}

.tm-booking-context-banner.is-past .tm-booking-context-banner__icon {
  color: var(--tm-muted, #6b7280);
}

/*Important to leave it 240 so that the carousel pictures align perfectly*/
#login-register-quick-invite-dialog-bk {
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  perspective: 100px;
}

#login-register-quick-invite-dialog-contents {
  border-radius: 5px;
  position: absolute;
  z-index: 1;
  width: calc(100% - 4 * 10px);
  height: 503px;
  min-height: 503px;
  background: var(--tm-surface, white);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}

#close-login-register-quick-dialog {
  position: absolute;
  z-index: 2;
  top: calc(10px / 2);
  right: calc(10px / 2);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: solid 1px transparent;
  line-height: 44px;
  text-align: center;
  opacity: 0.5;
  transition-duration: 0.2s;
}

#close-login-register-quick-dialog:hover {
  opacity: 1;
  background: var(--tm-primary, #0088d4);
  border-color: var(--tm-primary, #0088d4);
}

#close-login-register-quick-dialog > .tm-icon {
  font-size: 20px;
  color: var(--tm-primary, #0088d4);
  transition-duration: 0.2s;
}

#close-login-register-quick-dialog:hover > .tm-icon {
  color: white;
}

.login-register-quick-inner-contents {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-content: stretch;
  flex-wrap: nowrap;
}

.register-invitation-container {
  flex-grow: 1;
  padding: calc(2 * 10px) 10px 10px 10px;
  text-align: center;
}

.quick-login-container {
  flex-grow: 0;
  background: #ff6500;
  color: white;
  padding: calc(2 * 10px) 10px 10px 10px;
  flex-shrink: 0;
}

.quick-register-container {
  flex-grow: 0;
  background: #85c177;
  color: white;
  padding: calc(2 * 10px) 10px 10px 10px;
  flex-shrink: 0;
}

.quick-login-container h3 {
  text-align: center;
}

.quick-register-container h3 {
  text-align: center;
}

.quick-register-command-text {
  margin-left: 5px;
}

.quick-login {
  max-width: 75%;
  margin: calc(1 * 10px) auto 0 auto;
}

.quick-login-command {
  display: block;
  width: 100%;
  margin: 0 auto;
  font-size: 17px;
}

@keyframes fadeInContents- {
  0% {
    opacity: 0;
    transform: translateY(-50%) translateX(-50%) scale(0.5) rotateX(5deg);
  }
  100% {
    opacity: 1;
    transform: translateY(-50%) translateX(-50%) scale(1) rotateX(0);
  }
}
@keyframes fadeIn- {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.-fadeInAnimation {
  animation: fadeIn-;
  animation-timing-function: ease-out;
  animation-duration: 0.2s;
}

.-fadeInContentsAnimation {
  animation: fadeInContents-;
  animation-timing-function: ease-out;
  animation-duration: 0.2s;
  transform-origin: center center;
}

/*Important to leave it 240 so that the carousel pictures align perfectly*/
.list-of-custom-fields-section-wrapper .form-control:disabled {
  background-color: var(--tm-text-muted, #aaa);
}
.list-of-custom-fields-section-wrapper .date-wrapper .day-value {
  padding-left: 0;
}

.commands-for-custom-fields-section-container {
  margin-top: calc(10px * 3);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.login-for-complete-form {
  margin-top: calc(10px * 3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-style: italic;
}
.login-for-complete-form .btn span {
  margin-left: 10px;
}

.form-section-title {
  display: block;
  width: 100%;
  margin: calc(2 * 10px) 0 10px 0;
  text-align: center;
}

.form-section-title h4 {
  line-height: 1.75;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--tm-text-muted, #777);
}

.form-group.mandatory .custom-field-list-of-text-values-label {
  color: inherit;
  font-weight: inherit;
}

.list-of-custom-fields-section-wrapper .value-wrapper .own-checkbox-group,
.list-of-custom-fields-section-wrapper .value-wrapper .own-radio-group {
  margin-top: 10px;
}

.file-or-picture-link {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: 1rem;
  margin-top: 16px;
}

div.file-or-picture-input label.custom-field-label small {
  margin-left: 15px;
  font-style: italic;
}

.delete-custom-field-type-file-or-picture {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 21px;
  height: 21px;
  border: 2px solid #dc3545;
  border-radius: 50%;
  background-color: var(--tm-surface, #fff);
  color: #dc3545;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
}
.delete-custom-field-type-file-or-picture i {
  font-size: 10px;
}
.delete-custom-field-type-file-or-picture:hover {
  background-color: #dc3545;
  color: #fff;
}

.undo-delete-file-or-picture-link {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}
.undo-delete-file-or-picture-link span.text-decoration-line-through {
  font-style: italic;
}
.undo-delete-file-or-picture-link a.undo-delete-custom-field-type-file-or-picture {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  text-decoration: none;
  color: #dc5d02;
}
.undo-delete-file-or-picture-link .delete-custom-field-info {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.8rem;
  color: #6c757d;
  font-style: italic;
}

/*Important to leave it 240 so that the carousel pictures align perfectly*/
.own-os-date-picker-wrapper,
.own-os-date-picker-wrapper input,
.own-os-date-picker-wrapper select {
  font-size: 14px;
}

.own-os-date-picker-wrapper .day-value.with-error input,
.own-os-date-picker-wrapper .month-value.with-error select,
.own-os-date-picker-wrapper .year-value.with-error input,
.own-os-date-picker-wrapper .hour-value.with-error input,
.own-os-date-picker-wrapper .minute-value.with-error input {
  border-color: red;
  background: rgba(255, 158, 158, 0.5);
}

.own-os-date-picker-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.only-date-picker-one-row-with-flex-and-gap {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
}
.only-date-picker-one-row-with-flex-and-gap .day-value {
  width: 20%;
}
.only-date-picker-one-row-with-flex-and-gap .month-value {
  width: 50%;
}
.only-date-picker-one-row-with-flex-and-gap .year-value {
  width: 30%;
}

.date-picker-month {
  text-transform: capitalize;
}
.date-picker-month option.no-val {
  font-style: italic;
  color: var(--tm-text-muted, #aaa);
}

/*Important to leave it 240 so that the carousel pictures align perfectly*/
/*
 * Popup opened by the generated custom-fields-section button
 * (BO web studio -> custom fields section -> "Genereaza HTML pentru buton";
 *  the button HTML can be pasted anywhere in the FO pages).
 */
/* The popup is opened with the almostFullScreen size (inset 50px), which on a wide monitor left a broad
   empty band around the 940px form card. Here it is wrapped tightly around that card - on both axes -
   while every other popup keeps the stock size behaviour. The marker class comes from
   own.os.custom.fields.section.button.popup.js; the selector deliberately carries the size class too, so
   it outranks the size rules in own.os.popup.scss whatever the stylesheet order ends up being.
   Only from 992px up: below that the popup stylesheet already takes over with `width: auto !important`
   (tablets) and a full-screen popup (phones), which is what we want there. */
@media (min-width: 992px) {
  .own-popup-bk.almost-full-screen-popup.custom-fields-section-popup-bk .own-popup-container {
    /* the card is 940px wide and centres itself, so this leaves a slim, even gutter around it */
    width: 980px;
    max-width: calc(100vw - 100px);
    margin-left: auto;
    margin-right: auto;
    /* grow with the form instead of always filling the viewport, so the bottom edge stays close to
       the card as well; a long form still stops at the viewport and scrolls inside */
    height: auto;
    bottom: auto;
    max-height: calc(100vh - 100px);
  }
  .own-popup-bk.almost-full-screen-popup.custom-fields-section-popup-bk .own-popup-contents {
    /* the title bar (50px, top) and the command bar (55px, bottom) stay absolutely positioned, so
       once the scroll area is part of the normal flow it has to reserve their space itself */
    position: static;
    margin: 50px 0 55px;
    max-height: calc(100vh - 205px);
  }
}
.own-popup-contents .custom-fields-section-popup {
  /* The popup itself stays large (almost full screen). What looked unfriendly was the FORM inside it:
     on a wide monitor the inputs stretched from edge to edge and each group's decorative brace spanned
     the whole width. A centred, readable content column fixes both without shrinking the popup. */
  max-width: 940px;
  /* a vertical margin of its own: .own-popup-contents declares padding: var(--padding-quantum),
     but that token is not defined anywhere, so the declaration is dropped and the area has no padding */
  margin: 10px auto;
  padding: calc(3 * 10px);
  /* the popup's content area is a tinted, recessed surface (--tm-surface-alt), so the form reads as a
     sheet of paper laid on it - which also keeps it from looking lost in a nearly full-screen popup */
  background: var(--tm-surface, #fff);
  border: 1px solid var(--tm-border, rgba(15, 35, 55, 0.08));
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(15, 35, 55, 0.06);
}
.own-popup-contents .custom-fields-section-popup .web-page-section-title {
  display: none;
}
.own-popup-contents .custom-fields-section-popup .web-page-section-description-container {
  margin-bottom: calc(2 * 10px);
  line-height: 1.6;
}
.own-popup-contents .custom-fields-section-popup .mandatory-info {
  margin-bottom: calc(2 * 10px);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--tm-text-muted, #777);
}
.own-popup-contents .custom-fields-section-popup .mandatory-info .form-group {
  margin-bottom: 0;
}
.own-popup-contents .custom-fields-section-popup .custom-fields-section-group-container-title {
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}
.own-popup-contents .custom-fields-section-popup .value-wrapper {
  margin-bottom: calc(1.5 * 10px);
}
.own-popup-contents .custom-fields-section-popup .custom-field-label {
  margin-bottom: calc(0.5 * 10px);
}
.own-popup-contents .custom-fields-section-popup .prefilled-from-account-hint {
  font-style: italic;
}
.own-popup-contents .custom-fields-section-popup .custom-fields-section-inline-login {
  margin-top: calc(2 * 10px);
  padding-top: calc(2 * 10px);
  border-top: 1px solid var(--tm-border, rgba(15, 35, 55, 0.08));
}
.own-popup-contents .custom-fields-section-popup .custom-fields-section-inline-login .forgot-pass-hint .btn-link {
  padding-left: 0;
}
.own-popup-contents .custom-fields-section-popup .login-for-complete-form {
  margin-top: calc(2 * 10px);
  gap: 10px;
  text-align: center;
}

/* below 992px the popup stylesheet takes the container back to (nearly) full width, so the card fills it
   completely - keep a small gutter there instead of letting its border touch the popup edges */
@media (max-width: 991px) {
  .own-popup-contents .custom-fields-section-popup {
    margin: 10px;
  }
}
/* on phones the popup is nearly full width anyway - reclaim the side padding */
@media (max-width: 767px) {
  .own-popup-contents .custom-fields-section-popup {
    padding: calc(1.5 * 10px);
    border-radius: 12px;
  }
  .own-popup-contents .custom-fields-section-popup .custom-fields-section-group-container-title {
    max-width: none;
  }
}

/* =========================================================================
   TinyMCE picture galleries (.tm-gallery)
   -------------------------------------------------------------------------
   The markup is generated by own.tinymce.gallery.picker.js when MORE THAN ONE
   picture is inserted at once from the BO image manager (the "Imagini si
   fisiere" toolbar button). Since that editor is used for articles, products,
   web-studio sections, e-mail templates, html snippets, ... the very same
   class names must resolve on every surface that renders TinyMCE HTML, so
   this file ships in BOTH web apps and is part of each app's always-loaded
   "common" CSS bundle:
        Own.Web.BO         -> own.tinymce.gallery.css        (also content_css of the editor)
        Own.Web.OnlineShop -> own.os.tinymce.gallery.css
   The two copies are intentionally identical - keep them in sync.

   The layout is chosen per gallery through a modifier class:
        .tm-gallery--grid-2 / .tm-gallery--grid-3   responsive column grids
        .tm-gallery--mosaic                         first picture featured (2x2), rest tiled
        .tm-gallery--strip                          horizontally scrollable strip
        .tm-gallery--carousel                       one slide at a time (+ --autoplay)
   ("Default", i.e. one picture under another, inserts plain <img> tags with no
   wrapper at all - byte-for-byte what the editor produced before this feature.)

   Every layout except the carousel is CSS-only: the front office renders
   tenant-authored HTML, so a gallery must never depend on any JS being wired up
   on the page. The carousel degrades to a scroll-snap strip when its enhancer
   (own.tinymce.gallery.js / own.os.tinymce.gallery.js, which injects the arrows
   and the dots) does not run - e.g. inside the tinymce editor iframe.

   Colours go through the interface-theme tokens (with literal fallbacks) so an
   instantiated gallery follows the shop theme like the web-studio sections do.
   ========================================================================= */
.tm-gallery {
  display: grid;
  gap: 10px;
  margin: 1.25rem 0;
  max-width: 100%;
}

.tm-gallery__item {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border-radius: var(--tm-radius, 6px);
  background: var(--tm-surface-alt, #f1f3f5);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* The frame is what crops the picture; it is an <a> when the gallery was
   inserted with the "open the full size picture" option turned on. */
.tm-gallery__frame {
  position: relative;
  display: block;
  flex: 1 1 auto;
  overflow: hidden;
  aspect-ratio: 4/3;
  text-decoration: none;
  color: inherit;
}

.tm-gallery__frame:hover,
.tm-gallery__frame:focus {
  text-decoration: none;
}

.tm-gallery__media {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.tm-gallery__item:hover .tm-gallery__media {
  transform: scale(1.04);
}

.tm-gallery__caption {
  flex: 0 0 auto;
  padding: 6px 8px;
  font-size: 0.82em;
  line-height: 1.3;
  text-align: center;
  color: var(--tm-text-muted, #6c757d);
  background: var(--tm-surface, #fff);
  overflow-wrap: anywhere;
}

/* --- 2 columns ---------------------------------------------------------- */
.tm-gallery--grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* --- 3 columns ---------------------------------------------------------- */
.tm-gallery--grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* --- mosaic: first picture featured on 2x2, the rest tiled square ------- */
.tm-gallery--mosaic {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tm-gallery--mosaic .tm-gallery__frame {
  aspect-ratio: 1/1;
}

.tm-gallery--mosaic .tm-gallery__item--featured {
  grid-column: span 2;
  grid-row: span 2;
}

/* the featured tile is sized by the two rows it spans, so its frame must
   simply fill whatever height the grid gives it instead of staying square */
.tm-gallery--mosaic .tm-gallery__item--featured .tm-gallery__frame {
  aspect-ratio: auto;
  height: 100%;
  min-height: 100%;
}

/* --- horizontal strip (CSS-only "carousel", scroll + snap) -------------- */
.tm-gallery--strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.tm-gallery--strip .tm-gallery__item {
  flex: 0 0 auto;
  width: min(320px, 72%);
  scroll-snap-align: center;
}

.tm-gallery--strip::-webkit-scrollbar {
  height: 8px;
}

.tm-gallery--strip::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: var(--tm-border, #ced4da);
}

/* --- carousel: one slide at a time -------------------------------------- */
/* Stored markup is just .tm-gallery--carousel > .tm-gallery__track > items, so it
   stays as portable as the other layouts (plain divs + imgs, no ids, no data
   attributes). The arrows/dots are injected at RUNTIME by the enhancer, which is
   why they are styled here but never written into the tenant's content. */
.tm-gallery--carousel {
  display: block;
  position: relative;
}

.tm-gallery--carousel .tm-gallery__track {
  display: flex;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: var(--tm-radius, 6px);
  -webkit-overflow-scrolling: touch;
  /* the arrows are the affordance here - a scrollbar under the slides would
     only add noise (the strip layout keeps its scrollbar on purpose) */
  scrollbar-width: none;
}

.tm-gallery--carousel .tm-gallery__track::-webkit-scrollbar {
  display: none;
}

.tm-gallery--carousel .tm-gallery__item {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: center;
  border-radius: 0;
  box-shadow: none;
}

.tm-gallery--carousel .tm-gallery__frame {
  aspect-ratio: 16/9;
}

/* no hover zoom on a full-width slide */
.tm-gallery--carousel .tm-gallery__item:hover .tm-gallery__media {
  transform: none;
}

.tm-gallery__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}

.tm-gallery__nav:hover,
.tm-gallery__nav:focus {
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  outline: none;
}

.tm-gallery__nav:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.75);
}

.tm-gallery__nav svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  pointer-events: none;
}

.tm-gallery__nav--prev {
  left: 10px;
}

.tm-gallery__nav--next {
  right: 10px;
}

.tm-gallery__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin-top: 9px;
}

.tm-gallery__dot {
  width: 9px;
  height: 9px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--tm-border, #ced4da);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.tm-gallery__dot:hover {
  background: var(--tm-primary-light, #63bef1);
}

.tm-gallery__dot.is-active {
  background: var(--tm-primary, #0088d4);
  transform: scale(1.25);
}

.tm-gallery__counter {
  margin-top: 9px;
  font-size: 0.85em;
  text-align: center;
  color: var(--tm-text-muted, #6c757d);
}

/* --- responsive --------------------------------------------------------- */
@media (max-width: 991px) {
  .tm-gallery--grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 575px) {
  .tm-gallery--grid-2,
  .tm-gallery--grid-3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .tm-gallery--mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tm-gallery--mosaic .tm-gallery__item--featured {
    grid-column: span 2;
    grid-row: span 1;
  }

  .tm-gallery--mosaic .tm-gallery__item--featured .tm-gallery__frame {
    aspect-ratio: 4/3;
    height: auto;
    min-height: 0;
  }
}
@media (max-width: 575px) {
  .tm-gallery__nav {
    width: 32px;
    height: 32px;
  }

  .tm-gallery__nav--prev {
    left: 6px;
  }

  .tm-gallery__nav--next {
    right: 6px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tm-gallery__media {
    transition: none;
  }

  .tm-gallery__item:hover .tm-gallery__media {
    transform: none;
  }

  .tm-gallery--carousel .tm-gallery__track {
    scroll-behavior: auto;
  }

  .tm-gallery__dot {
    transition: none;
  }
}