/* Write your global styles here, in PostCSS syntax */
/* montserrat-cyrillic-ext-wght-normal */
@font-face {
  font-family: "Montserrat Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(./montserrat-cyrillic-ext-wght-normal.CO5hGrJv.woff2) format("woff2-variations");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* montserrat-cyrillic-wght-normal */
@font-face {
  font-family: "Montserrat Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(./montserrat-cyrillic-wght-normal.EAA9jha_.woff2) format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* montserrat-vietnamese-wght-normal */
@font-face {
  font-family: "Montserrat Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(./montserrat-vietnamese-wght-normal.k7S-YeeD.woff2) format("woff2-variations");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* montserrat-latin-ext-wght-normal */
@font-face {
  font-family: "Montserrat Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(./montserrat-latin-ext-wght-normal.BsZE-iaG.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* montserrat-latin-wght-normal */
@font-face {
  font-family: "Montserrat Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(./montserrat-latin-wght-normal.l_AIctKy.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Material Symbols Sharp";
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url("./material-symbols-sharp.BOVCCX5n.woff2") format("woff2");
}
.material-symbols-sharp {
  font-family: "Material Symbols Sharp";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
}

:root {
  --font-primary: "Montserrat Variable", system-ui, Arial, sans-serif;
  --font-redplant: "Montserrat Variable", system-ui, Arial, sans-serif;
  --font-icon-material: "Material Symbols Sharp";
  --font-icon-material-variation-l: "FILL" 0, "wght" 200, "GRAD" 0, "opsz" 24;
  --font-icon-material-variation-xl: "FILL" 0, "wght" 200, "GRAD" 0, "opsz" 40;
}

/* material font variable axes */
.material-symbols-sharp {
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 20;
}
.material-symbols-sharp.variation-l {
  font-variation-settings: var(--font-icon-material-variation-l);
}
.material-symbols-sharp.variation-xl {
  font-variation-settings: var(--font-icon-material-variation-xl);
}
.material-symbols-sharp {
  -webkit-user-select: none;
          user-select: none;
}

:root {
  --color-white: #fff;
  --color-black: #000;
  --color-red: #e51919;
  --color-green: #9bc7b2;
  --color-grey: #999;
  --color-blue: #0f3167;
  --color-orange: #fdb867;
  /* redplant performance widget */
  --color-redplant-grey: "#dcddde";
  --color-redplant-dark-light: "#2d4462";
  --color-redplant-dark-light-rgb: "rgb(45, 68, 98)";
  --color-redplant-green: "#6bbc7a";
  --color-redplant-red: "#f01e23";
  --color-redplant-text-color: var(--color-white);
  --color-redplant-gradient-start: "#102a4d";
  --color-redplant-gradient-end: "#222830";
  --color-error: var(--color-red);
  --color-warning: var(--color-orange);
  --color-success: var(--color-green);
  --color-text: var(--color-black);
  --color-disabled: var(--color-grey);
  --color-active: var(--color-black);
  --color-inactive: var(--color-grey);
  --color-primary: #0d4a8f;
  --color-primary-black-blue: #002838;
  --color-primary-100: hsla(210, 100%, 14%, 1);
  --color-primary-90: hsla(210, 100%, 21%, 1);
  --color-primary-80: hsla(210, 95%, 28%, 1);
  --color-primary-70: hsla(210, 84%, 37%, 1);
  --color-primary-60: hsla(210, 74%, 47%, 1);
  --color-primary-50: hsla(210, 89%, 58%, 1);
  --color-primary-40: hsla(210, 100%, 69%, 1);
  --color-primary-30: hsla(210, 100%, 78%, 1);
  --color-primary-20: hsla(210, 99%, 87%, 1);
  --color-primary-10: hsla(210, 98%, 96%, 1);
  --color-gray-100: hsla(210, 9%, 25%, 1);
  --color-gray-90: hsla(210, 8%, 33%, 1);
  --color-gray-80: hsla(210, 7%, 41%, 1);
  --color-gray-74: hsla(212, 6%, 46%, 1)
  --color-gray-70: hsla(210, 6%, 49%, 1)
  --color-gray-60: hsla(210, 7%, 57%, 1)
  --color-gray-50: hsla(210, 8%, 65%, 1)
  --color-gray-40: hsla(210, 9%, 73%, 1);
  --color-gray-30: hsla(210, 11%, 82%, 1);
  --color-gray-20: hsla(210, 16%, 90%, 1);
  --color-gray-15: hsla(210, 20%, 94%, 1);
  --color-gray-10: hsla(210, 72%, 99%, 1);
  --color-purple-100:hsla(324, 86%, 16%, 1);
  --color-purple-90: hsla(324, 75%, 24%, 1);
  --color-purple-80: hsla(324, 65%, 34%, 1);
  --color-purple-70: hsla(324, 57%, 44%, 1);
  --color-purple-60: hsla(324, 61%, 56%, 1);
  --color-purple-50: hsla(324, 88%, 68%, 1);
  --color-purple-40: hsla(324, 100%, 77%, 1);
  --color-purple-30: hsla(324, 99%, 84%, 1);
  --color-purple-20: hsla(324, 99%, 90%, 1);
  --color-purple-10: hsla(324, 97%, 97%, 1);
  --color-accent-100: hsla(343, 100%, 21%, 1);
  --color-accent-90: hsla(343, 100%, 29%, 1);
  --color-accent-80: hsla(343, 99%, 37%, 1);
  --color-accent-70: hsla(343, 85%, 49%, 1);
  --color-accent-60: hsla(343, 100%, 58%, 1);
  --color-accent-50: hsla(343, 100%, 65%, 1);
  --color-accent-40: hsla(343, 100%, 73%, 1);
  --color-accent-30: hsla(343, 99%, 81%, 1);
  --color-accent-20: hsla(343, 99%, 88%, 1);
  --color-accent-10: hsla(343, 98%, 96%, 1);
  --color-gradient-orange: linear-gradient(180deg, #FF850A 0%, #ED6100 100%);
  --color-gradient-turqoise: linear-gradient(180deg, #5DA3A0 0%, #1B838C 100%);
  --color-error-8: color-mix(in srgb, var(--color-error) 8%, white);
  --color-error-12: color-mix(in srgb, var(--color-error) 12%, white);
  --color-error-16: color-mix(in srgb, var(--color-error) 16%, white);
  --color-error-24: color-mix(in srgb, var(--color-error) 24%, white);
  --color-error-40: color-mix(in srgb, var(--color-error) 40%, white);
  --color-error-56: color-mix(in srgb, var(--color-error) 56%, white);
  --color-error-64: color-mix(in srgb, var(--color-error) 64%, white);
  --color-error-72: color-mix(in srgb, var(--color-error) 72%, white);
  --color-error-80: color-mix(in srgb, var(--color-error) 80%, white);
  --color-error-88: color-mix(in srgb, var(--color-error) 88%, white);
  --color-error-100: color-mix(in srgb, var(--color-error) 100%, white);
  --color-success-8: color-mix(in srgb, var(--color-success) 8%, white);
  --color-success-12: color-mix(in srgb, var(--color-success) 12%, white);
  --color-success-16: color-mix(in srgb, var(--color-success) 16%, white);
  --color-success-24: color-mix(in srgb, var(--color-success) 24%, white);
  --color-success-40: color-mix(in srgb, var(--color-success) 40%, white);
  --color-success-56: color-mix(in srgb, var(--color-success) 56%, white);
  --color-success-64: color-mix(in srgb, var(--color-success) 64%, white);
  --color-success-72: color-mix(in srgb, var(--color-success) 72%, white);
  --color-success-80: color-mix(in srgb, var(--color-success) 80%, white);
  --color-success-88: color-mix(in srgb, var(--color-success) 88%, white);
  --color-success-100: color-mix(in srgb, var(--color-success) 100%, white);
  --color-secondary-lightgreen: #b9e457;
  --color-secondary-coral: #ff6872;
  --color-secondary-lightblue: #00d7ff;
  --color-tertiary-black: var(--color-black);
  --color-tertiary-white: var(--color-white);
  --color-tertiary-grey-light: #f3f4f5;
  --color-tertiary-grey-medium: #abb3be;
  --color-tertiary-grey-stone: #546b86;
  --color-tertiary-green-dark-light: #a4cc47;
  --color-tertiary-blue-dark-light: #00accc;
  --color-tertiary-blue-light: rgba(from var(--color-secondary-lightblue) r g b / 0.5);
  --color-tertiary-coral-dark: #cc3f49;
  --color-error-hover: var(--color-tertiary-coral-dark);
  /* PLEASE MOVE FOLLOWING ENTRIES */
  --color-gradient-main-menu: linear-gradient(180deg, #d4e8ff 0%, #ffffff 90%);
  --color-gradient-slider: linear-gradient(270deg, #3d6ea5 0%, #9eb7d2 100%);
  --color-gradient-slider-hover: linear-gradient(270deg, #0D4A8F 0%, #9EB7D2 100%);
  --color-gradient-sub-categories: linear-gradient(
      360deg,
      rgba(212, 232, 255, 0.48) 0%,
      rgba(255, 255, 255, 0.48) 90%
  );
}

:root {
  /* shadows */
  --shadow-cards: 0px 0px 10px 3px #0000001a;
  --shadow-cards-stronger: 0px 0px 15px 3px #00000033;
  --shadow-slider: 0px 0px 8px 1px #546b8652;
  --shadow-input: 0px 2px 6px 0px #00000026 inset;
  --shadow-corner-grey: 4px 4px 0px 0px #c5d4e4;
  --shadow-budgetplaner: 0px 0px 6px 0px #00000029;
  --background-dotted: radial-gradient(
      ellipse at center,
      rgba(0, 0, 0, 0.4) 0%,
      rgba(0, 0, 0, 0.4) 1px,
      rgba(0, 0, 0, 0) 1px,
      rgba(0, 0, 0, 0) 100%
  )
  -0.375rem -0.375rem/0.875rem 0.875rem;
  --animation-slow: 0.5s;
  --animation-fast: 0.2s;
}

/* shadows */
.shadow-cards {
  box-shadow: var(--shadow-cards);
}

.shadow-cards-stronger {
  box-shadow: var(--shadow-cards-stronger);
}

.shadow-slider {
  box-shadow: var(--shadow-slider);
}

.shadow-input {
  box-shadow: var(--shadow-input);
}

.shadow-corner-grey {
  box-shadow: var(--shadow-corner-grey);
}

.shadow-budgetplaner {
  box-shadow: var(--shadow-budgetplaner);
}

/* loading  */
.loading {
  position: relative;
  isolation: isolate;
}
.loading::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-white);
  opacity: 0.75;
  background-image: url("data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ibGRzLW1lc3NhZ2UiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjUgNTApIj4KPGNpcmNsZSBjeD0iMCIgY3k9IjAiIHI9IjYiIGZpbGw9IiMzZDM5MzUiIHRyYW5zZm9ybT0ic2NhbGUoMC45OTgzMjYgMC45OTgzMjYpIj4KICA8YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InNjYWxlIiBiZWdpbj0iLTAuNDY2NjY2NjY2NjY2NjY2NnMiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVNwbGluZXM9IjAuMyAwIDAuNyAxOzAuMyAwIDAuNyAxIiB2YWx1ZXM9IjA7MTswIiBrZXlUaW1lcz0iMDswLjU7MSIgZHVyPSIxLjRzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSI+PC9hbmltYXRlVHJhbnNmb3JtPgo8L2NpcmNsZT4KPC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUwIDUwKSI+CjxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSI2IiBmaWxsPSIjM2QzOTM1IiB0cmFuc2Zvcm09InNjYWxlKDAuNzYxNjY5IDAuNzYxNjY5KSI+CiAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJzY2FsZSIgYmVnaW49Ii0wLjIzMzMzMzMzMzMzMzMzMzNzIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlTcGxpbmVzPSIwLjMgMCAwLjcgMTswLjMgMCAwLjcgMSIgdmFsdWVzPSIwOzE7MCIga2V5VGltZXM9IjA7MC41OzEiIGR1cj0iMS40cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZVRyYW5zZm9ybT4KPC9jaXJjbGU+CjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3NSA1MCkiPgo8Y2lyY2xlIGN4PSIwIiBjeT0iMCIgcj0iNiIgZmlsbD0iIzNkMzkzNSIgdHJhbnNmb3JtPSJzY2FsZSgwLjMwMDI4NyAwLjMwMDI4NykiPgogIDxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0ic2NhbGUiIGJlZ2luPSIwcyIgY2FsY01vZGU9InNwbGluZSIga2V5U3BsaW5lcz0iMC4zIDAgMC43IDE7MC4zIDAgMC43IDEiIHZhbHVlcz0iMDsxOzAiIGtleVRpbWVzPSIwOzAuNTsxIiBkdXI9IjEuNHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIj48L2FuaW1hdGVUcmFuc2Zvcm0+CjwvY2lyY2xlPgo8L2c+PC9zdmc+");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 12rem;
  z-index: 990;
  cursor: progress;
}

/* Document
 * ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
:where(html) {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%; /* 2 */
}

/* Sections
 * ========================================================================== */
/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Edge, Firefox, and Safari.
 */
:where(h1) {
  font-size: 2em;
  margin-block-end: 0.67em;
  margin-block-start: 0.67em;
}

/* Grouping content
 * ========================================================================== */
/**
 * Remove the margin on nested lists in Chrome, Edge, and Safari.
 */
:where(dl, ol, ul) :where(dl, ol, ul) {
  margin-block-end: 0;
  margin-block-start: 0;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Correct the inheritance of border color in Firefox.
 */
:where(hr) {
  box-sizing: content-box; /* 1 */
  color: inherit; /* 2 */
  height: 0; /* 1 */
}

/* Text-level semantics
 * ========================================================================== */
/**
 * Add the correct text decoration in Safari.
 */
:where(abbr[title]) {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

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

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

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

/* Tabular data
 * ========================================================================== */
/**
 * 1. Correct table border color in Chrome, Edge, and Safari.
 * 2. Remove text indentation from table contents in Chrome, Edge, and Safari.
 */
:where(table) {
  border-color: currentColor; /* 1 */
  text-indent: 0; /* 2 */
}

/* Forms
 * ========================================================================== */
/**
 * Remove the margin on controls in Safari.
 */
:where(button, input, select) {
  margin: 0;
}

/**
 * Remove the inheritance of text transform in Firefox.
 */
:where(button) {
  text-transform: none;
}

/**
 * Correct the inability to style buttons in iOS and Safari.
 */
:where(button, input:is([type=button i], [type=reset i], [type=submit i])) {
  -webkit-appearance: button;
}

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

/**
 * Remove the inheritance of text transform in Firefox.
 */
:where(select) {
  text-transform: none;
}

/**
 * Remove the margin in Firefox and Safari.
 */
:where(textarea) {
  margin: 0;
}

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

/**
 * Correct the cursor style of increment and decrement buttons in Safari.
 */
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */
::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

/**
 * Remove the inner padding in Chrome, Edge, and Safari on macOS.
 */
::-webkit-search-decoration {
  -webkit-appearance: none;
}

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

/**
 * Remove the inner border and padding of focus outlines in Firefox.
 */
:where(button, input:is([type=button i], [type=color i], [type=reset i], [type=submit i]))::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus outline styles unset by the previous rule in Firefox.
 */
:where(button, input:is([type=button i], [type=color i], [type=reset i], [type=submit i]))::-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Remove the additional :invalid styles in Firefox.
 */
:where(:-moz-ui-invalid) {
  box-shadow: none;
}

/* Interactive
 * ========================================================================== */
/*
 * Add the correct styles in Safari.
 */
:where(dialog) {
  background-color: white;
  border: solid;
  color: black;
  height: -moz-fit-content;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: -moz-fit-content;
  width: fit-content;
}

:where(dialog:not([open])) {
  display: none;
}

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

html[data-type=configurator],
body[data-type=configurator] {
  position: relative;
  height: 100%;
  width: 100%;
  font-family: var(--font-primary);
  font-size: clamp(0.875rem, 0.8393rem + 0.1786vw, 1.125rem);
  color: var(--color-text);
  padding: 0;
  margin: 0;
  scroll-behavior: smooth;
  text-rendering: geometricPrecision;
  background-color: white;
  --scrollbar-size: 0.375rem;
  --border-radius: 1rem;
}
html[data-type=configurator] ::-webkit-scrollbar,
body[data-type=configurator] ::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}
html[data-type=configurator] ::-webkit-scrollbar-track,
body[data-type=configurator] ::-webkit-scrollbar-track {
  background: var(--color-tertiary-white);
  border-radius: var(--border-radius);
}
html[data-type=configurator] ::-webkit-scrollbar-thumb,
body[data-type=configurator] ::-webkit-scrollbar-thumb {
  background: var(--color-tertiary-grey-medium);
  border-radius: var(--border-radius);
  background-clip: padding-box;
}

.scrollbar-white {
  --scrollbar-size: 1rem;
  --border-radius: 1.25rem;
}
.scrollbar-white::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}
.scrollbar-white::-webkit-scrollbar-track {
  background: var(--color-tertiary-grey-medium);
  border-radius: var(--border-radius);
}
.scrollbar-white::-webkit-scrollbar-thumb {
  background: var(--color-tertiary-grey-light);
  border-radius: var(--border-radius);
  background-clip: padding-box;
  border: 2px solid transparent;
}
.scrollbar-white::-webkit-scrollbar-button {
  background-color: transparent;
  display: block;
}
.scrollbar-white::-webkit-scrollbar-button:single-button:horizontal:decrement {
  background: url('data:image/svg+xml;charset=UTF-8,<svg width="12" height="11" viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.10408 10.0416L0.392578 5.33005L5.10408 0.61853L5.8781 1.39255L1.9326 5.33005L5.8781 9.26755L5.10408 10.0416ZM10.8332 10.0416L6.12172 5.33005L10.8332 0.618531L11.6072 1.39255L7.66174 5.33005L11.6072 9.26755L10.8332 10.0416Z" fill="%23ABB3BE"/></svg>') no-repeat center;
}
.scrollbar-white::-webkit-scrollbar-button:single-button:horizontal:increment {
  background: url('data:image/svg+xml;charset=UTF-8,<svg width="12" height="11" viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.89592 0.618584L11.6074 5.3301L6.89592 10.0416L6.1219 9.2676L10.0674 5.3301L6.1219 1.3926L6.89592 0.618584ZM1.16676 0.618584L5.87828 5.3301L1.16676 10.0416L0.392756 9.2676L4.33826 5.3301L0.392756 1.3926L1.16676 0.618584Z" fill="%23ABB3BE"/></svg>') no-repeat center;
}

.title-box {
  margin: 0;
  padding: 0.375rem 0.75rem;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-tertiary-white);
  background-color: var(--color-primary-100);
}
.title-box.color-secondary-coral {
  background-color: var(--color-secondary-coral);
}
.title-box.color-secondary-lightblue {
  background-color: var(--color-secondary-lightblue);
}
.title-box.size-large {
  padding: 0.8175rem 0.75rem;
  font-size: 2.25rem;
}

.material-symbols-sharp {
  -webkit-user-select: none;
          user-select: none;
}

/* DIRECTUS VISUAL OVERWRITES */
.directus-visual-editing-edit-button {
  top: 50% !important;
  left: 50% !important;
  background-color: #f04123 !important;
}

:root {
  --directus-visual-editing--rect--border-color: #f04123;
  --directus-visual-editing--rect--border-spacing: 4px;
}