/* ADDED /styles/common-styles.css */

:root {
    --font-family-body: "Noto Sans Display", sans-serif;
    --font-family-heading: "Roboto Condensed", sans-serif;
    --font-family-legend: 'Roboto Condensed', sans-serif;
    --font-family-label: "Roboto Condensed", sans-serif;
    --font-family-button: "Roboto Condensed", sans-serif;
    --font-family-monospace: Consolas, "Lucida Console", monospace;
    --font-family-hero: "Roboto Condensed", sans-serif;
    --font-family-notification-bar: "Roboto Condensed", sans-serif;
    --font-family-context-menu: "Noto Sans Display", sans-serif;
    --default-text-color: #333333;
}

/* Noto Sans Display - Regular (400, normal) */
@font-face {
  font-family: "Noto Sans Display";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/NotoSansDisplay-Regular.woff2") format("woff2");
}

/* Noto Sans Display - Bold (700, normal) */
@font-face {
  font-family: "Noto Sans Display";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/NotoSansDisplay-Bold.woff2") format("woff2");
}

/* Noto Sans Display - Italic (400, italic) */
@font-face {
  font-family: "Noto Sans Display";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("/fonts/NotoSansDisplay-Italic.woff2") format("woff2");
}

/* Roboto Condensed - Regular (400, normal) */
@font-face {
  font-family: "Roboto Condensed";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/RobotoCondensed-Regular.woff2") format("woff2");
}

/* Roboto Condensed - Bold (700, normal) */
@font-face {
  font-family: "Roboto Condensed";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/RobotoCondensed-Bold.woff2") format("woff2");
}

/* Material Icons */
@font-face {
  font-family: "Material Icons";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/MaterialIcons.woff2") format("woff2");
}

/* Material Icons styling */
.material-icons {
  font-family: "Material Icons";
  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;
  -moz-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -moz-osx-font-smoothing: grayscale;
}

* {
  box-sizing: border-box;
  overflow-wrap: break-word;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #ffffff;
  color: var(--default-text-color);
  font-family: var(--font-family-body);
  font-size: 1.2rem;
  margin: 0;
}

main {
  position: relative;
  margin: 0 auto;
  margin: 120px auto 0 auto;
  min-height: 66vh;
}

section {
  margin: 0 80px;
  padding: 2em 1em 2em 1em;
}

section.full-width {
  margin: 0;
  padding: 0;
}

section.full-height {
  padding-block-start: 0;
  padding-block-end: 0;
}

section.narrow {
  max-width: 650px;
  margin: 0 auto;
}

.theme-color-1 {
  background-color: var(--theme-color-1);
  color: var(--theme-color-1-contrast);
}

.theme-color-2 {
  background-color: var(--theme-color-2);
  color: var(--theme-color-2-contrast);
}

.theme-color-3 {
  background-color: var(--theme-color-3);
  color: var(--theme-color-3-contrast);
}

.theme-color-4 {
  background-color: var(--theme-color-4);
  color: var(--theme-color-4-contrast);
}

.theme-color-5 {
  background-color: var(--theme-color-5);
  color: var(--theme-color-5-contrast);
}

.body-grey-box-background {
  background-color: var(--body-grey-box-background);
}

.clearfix:after {
  display: table;
  content: "";
  clear: both;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-family-heading);
  font-weight: bold;
  margin: 1.5rem 0;
  color: var(--theme-color-1);
  /* pointer-events: none stops accordion working
    pointer-events: none;
    */
}

h2 {
  font-size: 1.8rem;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.15rem;
}

h5 {
  font-size: 1rem;
}

.theme-color-1 h1,
.theme-color-1 h2,
.theme-color-1 h3,
.theme-color-1 h4,
.theme-color-1 h5,
.theme-color-1 a,
.theme-color-1 a:hover,
.theme-color-1 ul li::marker,
.theme-color-1 legend,
main .theme-color-1 ul li::before {
  color: var(--theme-color-1-contrast);
}
.theme-color-3,
.theme-color-3 h1,
.theme-color-3 h2,
.theme-color-3 h3,
.theme-color-3 h4,
.theme-color-3 h5,
.theme-color-3 a,
.theme-color-3 a:hover,
.theme-color-3 ul li::marker,
.theme-color-3 legend,
main .theme-color-3 ul li::before {
  color: var(--theme-color-3-contrast);
}
.theme-color-4,
.theme-color-4 h1,
.theme-color-4 h2,
.theme-color-4 h3,
.theme-color-4 h4,
.theme-color-4 h5,
.theme-color-4 a,
.theme-color-4 a:hover,
.theme-color-4 ul li::marker,
.theme-color-4 legend,
main .theme-color-4 ul li::before {
  color: var(--theme-color-4-contrast);
}
.theme-color-5,
.theme-color-5 h1,
.theme-color-5 h2,
.theme-color-5 h3,
.theme-color-5 h4,
.theme-color-5 h5,
.theme-color-5 a,
.theme-color-5 a:hover,
.theme-color-5 ul li::marker,
.theme-color-5 legend,
main .theme-color-5 ul li::before {
  color: var(--theme-color-5-contrast);
}

.theme-color-3 a:hover,
.theme-color-5 a:hover {
  text-decoration: none;
}

* > h1:first-of-type,
* > h2:first-of-type,
* > h3:first-of-type,
* > h4:first-of-type,
* > h5:first-of-type,
* > p:first-of-type,
* > figure:first-of-type,
* > legend:first-of-type {
  margin-block-start: 0.5em;
}

/* Only apply when element is the very first child element, NOT the first of its type
* > h1:first-child,
* > h2:first-child,
* > h3:first-child,
* > h4:first-child,
* > h5:first-child, 
* > p:first-child,
* > figure:first-child,
* > legend:first-child
{
    margin-block-start:0;
}
*/

*[id] {
  /* Add this to prevent in-page hash tag links from scrolling wrongly with fixed header - https://css-tricks.com/hash-tag-links-padding/ */
  scroll-margin-top: 120px;
}

p {
  margin-block-start: 0.5em;
  margin-inline-end: 0;
  margin-block-end: 1em;
  margin-inline-start: 0;
}

.small-text {
  font-size: 0.8em;
}

.large-text {
  font-size: 1.2em;
}

img,
video {
  max-width: 100%;
  height: auto;
}

img.flip-horizontal {
  transform: scaleX(-1);
}
img.fill-parent {
  min-width: 100%;
  min-height: 100%;
  object-fit: cover; /* or 'fill' */  
}
img.ratio-16-9 {
  aspect-ratio: 16 / 9;
}

video {
  width: 100%;
  height: auto;
}

sub {
  vertical-align: sub;
  font-size: xx-small;
}

sup {
  vertical-align: super;
  font-size: xx-small;
}

svg.icon {
  width: 1.5em;
  height: 1.5em;
  margin-inline-end: 0.25em;
}

a {
  color: var(--theme-color-1);
  text-decoration: underline;
  cursor: pointer;
  /* Default accessibility requires minimum link size of 24x24px - element must be inline-block */
  display: inline-block;  
  min-height: 24px;
  min-width: 24px;
}

a:hover {
  color: var(--theme-color-1);
}

a[target]:not([target="_self"]),
[data-target]:not([data-target="_self"]) {
  cursor: url("/images/icons/new-window-icon.png"), auto;
}

a.button {
  display: inline-block;
  font-family: var(--font-family-button);
  border: none;
  background: var(--theme-color-3);
  box-shadow: none;
  color: var(--theme-color-3-contrast);
  /* Default accessibility requires minimum button size of 24x24px - element must be inline-block */
  /*
  font-size: 1em;
  font-size: 24px;
  */
  font-size: 1em;
  line-height: 1;
  padding-block-start: 0.5em;
  padding-inline-end: 0.5em;
  padding-block-end: 0.5em;
  padding-inline-start: 0.5em;
  margin-block-start: 0.5em;
  margin-inline-end: 0;
  margin-block-end: 0.5em;
  margin-inline-start: 0;
  text-shadow: none;
  transition: background 0.2s;
  border-radius: 5px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}

a.button:hover {
  color: var(--form-element-bg-font-color);
  background: var(--theme-color-1);
}

.theme-color-3 a.button {
  color: var(--theme-color-3);
  background: var(--theme-color-2);
}

.theme-color-3 a.button:hover {
  color: var(--form-element-bg-font-color);
  background: var(--theme-color-1);
}

hr {
  border-block-start-color: var(--theme-color-1);
}

pre,
code {
  color: #990033;
  word-wrap: break-word;
  hyphens: none;
}

pre {
  font-size: 0.8em;
  line-height: 1.3em;
  padding: 1em;
  background-color: #fff;
  color: #000;
  /*
  height: 40vh;
  */
  overflow-y: auto;  
  resize: vertical;
}

.monospace {
  font-family: var(--font-family-monospace);
  font-size: 0.9rem;
  line-height: 1.1rem;
}

.hidden {
  display: none !important;
}

.invisible {
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
}
.opacity-0 {
    opacity: 0;
}
.opacity-1 {
    opacity: 1;
}

.left,
.inline-start {
  text-align: start;
}

.center {
  text-align: center;
}

.right,
.inline-end {
  text-align: end;
}

.padded {
  padding: 1em;
}

.bordered {
  border: 1px solid var(--theme-color-3);
  padding: 0.5em;
}
.bordered.important {
  border: 2px solid #ff0000;
}

.nowrap {
  white-space: nowrap;
}

.no-margin {
  margin: 0;
}

.no-margin-block-start {
  margin-block-start: 0;
}

.no-margin-inline-end {
  margin-inline-end: 0;
}

.no-margin-block-end {
  margin-block-end: 0;
}

.no-margin-inline-start {
  margin-inline-start: 0;
}

.no-padding {
  padding: 0;
}

.no-padding-block-start {
  padding-block-start: 0;
}

.no-padding-inline-end {
  padding-inline-end: 0;
}

.no-padding-block-end {
  padding-block-end: 0;
}

.no-padding-inline-start {
  padding-inline-start: 0;
}

.border-inline-start {
  border-inline-start: 1px solid var(--body-border-color);
  padding: 0 2em;
}

a[href^="mailto:"]::after {
  display: inline-block;
  content: "\2709";
  text-decoration: none;
  color: initial;
  margin-inline-start: 0.25em;
  margin-inline-end: 0.25em;
}
a[href^="tel:"]::after {
  display: inline-block;
  content: "\260E"; /* or use "\1F4DE" for a more modern phone icon */
  text-decoration: none;
  color: initial;
  margin-inline-start: 0.25em;
  margin-inline-end: 0.25em;
}

table th,
table td {
  vertical-align: middle;
}

table td {
  word-wrap: break-word;
  /*
    max-width: 1px;
    */
  -webkit-hyphens: auto;
  /* iOS 4.2+ */
  -moz-hyphens: auto;
  /* Firefox 5+ */
  -ms-hyphens: auto;
  /* IE 10+ */
  hyphens: auto;
}

table th[scope="col"],
table td[scope="col"] {
  text-align: center;
}

table th[scope="row"],
table td[scope="row"] {
  text-align: start;
}

table.datatable {
  width: 100%;
}

table.datatable tbody tr {
  cursor: pointer;
}

table.fullwidth {
  border-collapse: collapse;
  margin: 25px 0;
  width: 100%;
}

table.fullwidth th,
table.fullwidth td {
  padding: 0.75rem;
}

table.styled {
  border-collapse: collapse;
  width: 100%;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  margin-block-end: 1em;
}

table.styled thead tr {
  background-color: var(--theme-color-1);
  color: var(--theme-color-1-contrast);
  text-align: start;
}

table.styled th,
table.styled td {
  padding: 0.75rem;
}

table.styled tbody tr {
  border-block-end: 1px solid #dddddd;
}

table.styled tbody tr:nth-of-type(odd) {
  background-color: var(--theme-stripe-odd);
}

table.styled tbody tr:nth-of-type(even) {
  background-color: var(--theme-stripe-even);
}

table.styled tbody tr:last-of-type {
  border-block-end: 2px solid var(--theme-stripe-head);
}

table.styled tbody tr.active-row {
  font-weight: bold;
}

table.styled.bordered {
  border: none;
}

table.styled.bordered th,
table.styled.bordered td {
  border-inline-end: 1px solid #cccccc;
}

table.styled.bordered th:last-child,
table.styled.bordered td:last-child {
  border: none;
}

table.styled tbody th.group-heading {
  background-color: var(--theme-color-1);
  color: var(--theme-color-1-contrast);
}

tr[data-group-control] > td {
  border-block-end: 1px solid #ffffff;
}

tr[data-group-control] > td:first-child {
  cursor: pointer;
  font-size: 15px;
  padding-inline-start: 3em;
  position: relative;
  background-clip: padding-box;
}

tr[data-group-control] > td:first-child::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  inset-inline-start: 5px;
  background-image: url("/images/icons/iconmonstr-plus-circle-filled.svg");
  background-position: 0 center;
  background-repeat: no-repeat;
  background-size: auto 80%;
  pointer-events: none;
  filter: invert(82%) sepia(0%) saturate(75%) hue-rotate(175deg)
    brightness(108%) contrast(94%);
}

tr[data-group-control].active > td:first-child::after,
tr[data-group-control].active > td:first-child:hover::after {
  background-image: url("/images/icons/iconmonstr-minus-circle-filled.svg");
}

/*
figure {
    margin: 1em 0;
    padding: 1em 1em 0.5em 1em;
    text-align: center;
    background-color: rgb(255, 255, 255);
    box-shadow: 3px 3px 3px 0px rgb(230, 230, 230);
    border: 1px solid rgb(244, 244, 244);    
}
*/
figure {
  margin: 2em 0 2em 0 !important;
  text-align: center;
}

figcaption {
  font-size: 0.8em;
  line-height: 1.3em;
  font-weight: bold;
  margin-block-start: 0.5em;
}

figure.quote {
  padding: 1.5em;
  text-align: center;
  border-block-start: 1px solid var(--body-border-color);
  border-block-end: 1px solid var(--body-border-color);
  background-color: var(--quote-background);
}

figure.quote blockquote {
  font-style: italic;
  font-size: 1.5rem;
  line-height: 2rem;
}

figure.quote blockquote::before {
  content: open-quote;
  opacity: 0.4;
  font-size: 2.5em;
  line-height: 0;
  vertical-align: middle;
  margin: 0 1rem 0 0;
}

figure.quote blockquote::after {
  content: close-quote;
  opacity: 0.4;
  font-size: 2.5em;
  line-height: 0;
  vertical-align: middle;
}

figure.quote blockquote:lang(de)::before {
  vertical-align: top;
}

#loading-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  /*
  background: var(--theme-color-3);
  */
  background: linear-gradient(to right, var(--theme-color-3), var(--theme-color-1));
  box-shadow: 0 -2px 4px rgba(255, 255, 255, 0.2);
  z-index: 9999;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#loading-bar.animate {
  opacity: 1;
  animation: loading 2s linear infinite;
}

@keyframes loading {
  0% {
      transform: translateX(-100%);
  }
  100% {
      transform: translateX(100%);
  }
}

/* Style for disabled form elements */
form input:disabled,
form select:disabled,
form textarea:disabled,
form button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* TempAlert */
#TempAlert {
  position: fixed;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 80%;
  padding: 2em;
  transform: translate(-50%, -50%);
  z-index: 9999;
  display: block;
  color: var(--form-element-bg-font-color);
  background: var(--theme-color-1);
  border: 1px solid var(--form-element-border-focus-color);
  border-radius: 5px;
  text-align: center;
  font-weight: bold;
  transition: all 0.5s;
  opacity: 1;
}

.material-icons {
  vertical-align: middle;
}

div.hero-container {
  position: relative;
  max-height: 360px;
  overflow: hidden;
  display: flex;
  align-items: center;
  font-family: var(--font-family-hero);
}

div.hero-container.dark:before {
  content: "";
  position: absolute;
  inset: 0 0 0 0;
  background-color: #000000;
  opacity: 0.4;
}

div.hero-container img.hero,
div.hero-container video.hero {
  width: 100%;
  height: auto;
  object-fit: cover;
}

div.hero-container div.hero-text-container {
  position: absolute;
  width: 100%;
  z-index: 1;
}

div.hero-container div.hero-text {
  position: relative;
  color: #ffffff;
  padding: 1em;
  position: relative;
  margin: 0 auto;
  /*
    max-width: 1130px;
    */
  margin: 0 80px;
}

div.hero-container div.hero-text h1,
div.hero-container div.hero-text h2,
div.hero-container div.hero-text h3,
div.hero-container div.hero-text p {
  color: #ffffff;
  margin: 0.3em auto;
  line-height: 1.1em;
}

div.hero-container div.hero-text h1 {
  font-size: min(6.5vw, 70px);
}

div.hero-container div.hero-text h2 {
  font-size: min(3vw, 50px);
}

div.hero-container div.hero-text h3 {
  font-size: min(2.5vw, 30px);
}

div.hero-container div.hero-text p {
  font-size: min(2.5vw, 20px);
}

div.hero-container div.call-to-action {
  position: absolute;
  inset-block-end: 5px;
  inset-inline-end: 5px;
  z-index: 1;
  text-transform: uppercase;
}
div.hero-container div.call-to-action::after {
  content: ">";
  position: absolute;
  inset-block-start: 45%;
  transform: translateY(-50%);
  color: var(--theme-color-5-contrast);
  text-align: end;
  font-size: min(4vw, 1.5em);
  line-height: min(4vw, 1.5em);
  width: 100%;
  padding: 0 20px;
  pointer-events: none;
}
div.hero-container div.call-to-action a {
  font-size: min(3vw, 1.2em);
  display: block;
  padding: 0.5vw 0.75em;
  padding-inline-end: 2em;
  background-color: var(--theme-color-5);
  color: var(--theme-color-5-contrast);
  text-decoration: none;
}
div.hero-container div.call-to-action a:hover {
  text-decoration: none;
  background-color: var(--theme-color-3);
  color: var(--theme-color-3-contrast);
}
div.hero-container div.call-to-action:hover::after {
  color: var(--theme-color-3-contrast);
}

div.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  row-gap: 1em;
  column-gap: 1.5em;
}

div.flex-container {
  display: flex;
  flex-wrap: nowrap;
  /* Keeps children on same row, sized according to content - do not change this globally - it's the purpose of this container! */
  flex-direction: row;
  row-gap: 1em;
  column-gap: 1.5em;
  margin: 0;
}

div.flex-container.full-width > div {
  flex-grow: 1;
}

div.flex-container > div.no-shrink {
  flex-shrink: 0;
  /* Applied to container, prevents images from being forcibly shrunk */
}

div.column-container {
  column-count: 4;
  column-gap: 1.5em;
}

div.column-container.ruled {
  column-rule-style: solid;
  column-rule-width: 1px;
  column-rule-color: var(--body-border-color);
}

div.column-container ul {
  margin-block-start: 0;
}

div.grid-container.fixed-cols {
  grid-template-columns: repeat(4, minmax(50px, 1fr));
}

div.grid-container.ratio-2-1 {
  grid-template-columns: 2fr 1fr;
}

div.grid-container.ratio-1-2 {
  grid-template-columns: 1fr 2fr;
}

div.grid-container.top,
div.flex-container.top {
  align-items: start;
}

div.grid-container.middle,
div.flex-container.middle {
  align-items: center;
}

div.grid-container.bottom,
div.flex-container.bottom {
  align-items: end;
}

div.grid-container.stretch,
div.flex-container.stretch {
  align-items: stretch;
}

div.flex-container.center {
  justify-content: center;
}

div.grid-container div.top,
div.flex-container div.top {
  align-self: start;
}

div.grid-container div.middle,
div.flex-container div.middle {
  align-self: center;
}

div.grid-container div.bottom,
div.flex-container div.bottom {
  align-self: end;
}

div.grid-container div.stretch,
div.flex-container div.stretch {
  align-self: stretch;
}

div.flex-container div.center {
  justify-self: center;
}

/*
div.flex-container > div {
    Don't use padding on child elements = gap, row-gap, and column-gap on parent take care of padding between children without leaving gap on outside edges of the side elements
    padding: 0.5em 1em;
    flex-grow: 1;
}
*/

/*
main div.grid-container > div > :first-child,
main div.flex-container > div > :first-child
{
    margin-block-start: 0;
}
*/

main ul,
main ol {
  margin-block-start: 1rem;
  margin-block-end: 1rem;
  padding-inline-start: 2em; /* Space for bullet */
}

main ul li ul,
main ol li ol {
  margin-block-start: 0;
  margin-block-end: 0;
}

main ul li {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  list-style: none; /* Remove default bullet */
  position: relative; /* Anchor for custom bullet */
}

main ul li::before {
  content: "\2022"; /* Unicode for standard bullet (filled circle) */
  position: absolute;
  left: -20px; /* Align to left, matching ul padding */
  top: 0em; /* Align with first line; fine-tuned for typical font */
  color: var(--theme-color-1); /* Reuse your theme color */
  font-size: 1.5em; /* Slightly larger to match default bullet size */
  line-height: 1; /* Prevent text line-height from shifting bullet */
  font-family: inherit; /* Use same font as text for consistency */
}

/* Nested lists */
main ul li ul li::before {
  content: "\2022"; /* Consistent bullet for nested lists */
  font-size: 1.2em; /* Match parent list bullet size */
}


div > iframe {
  width: 100%;
  border: none;
}

div.gatedform {
  display: none;
}

div.ytVideoContainer {
  font-size: 0.9em;
}

div.ytVideoContainer .ytContainer {
  margin: 0 auto;
  max-width: 1920px;
  width: 100%;
}

div.ytVideoContainer .ytContainer:after {
  clear: both;
}

div.ytVideoContainer .ytContainer:before,
div.ytVideoContainer .ytContainer:after {
  content: "";
  display: table;
}

div.ytVideoContainer div.ytThumbBox {
  position: relative;
  padding-block-end: 56.25%;
  /* 16:9 */
  height: 0;
  overflow: hidden;
}

div.ytVideoContainer div.ytThumbBox iframe {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  min-width: 240px;
  /* Avoid CLS */
  min-height: 135px;
  /* Avoid CLS */
  /*
  transform: scale(1.025);
  */
}

div.ytVideoContainer div.bbThumbBox .poster {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the image covers the area without distortion */
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer; /* Indicates the image is clickable */
}
div.ytVideoContainer div.bbThumbBox::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  inset-inline-start: 5px;
  background-image: url("/images/icons/icon-video-play-red.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px;
  pointer-events: none;
}
div.ytVideoContainer div.bbThumbBox:hover::after {
  background-size: 22%;
  transition: all 0.25s;
}
div.ytVideoContainer div.bbThumbBox.playing::after {
  display: none; /* Hides the play button pseudo-element */
}

div.ytVideoContainer div.ytThumbBox div.media-disabled {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
}

div.ytVideoContainer div.ytThumbBox div.media-disabled::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  inset-inline-start: 0;
  background-image: url("/images/no-video.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.1;
  pointer-events: none;
}

div.ytVideoContainer div.ytThumbBox div.media-disabled p {
  position: absolute;
  margin: 0;
  width: 100%;
  height: 100%;
  top: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
}

div.ytVideoContainer div.ytThumbBox div.media-disabled p a {
  position: absolute;
  display: block;
  margin: 0;
  width: 100%;
  top: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  text-decoration: none;
  cursor: pointer;
}

div.ytVideoContainer div.ytThumbBox div.media-disabled p a:hover {
  text-decoration: underline;
}

div.ytImageContainer {
  font-size: 0.9em;
}
div.ytImageContainer div.image-container {
  overflow: hidden;
  position: relative;
}
div.ytImageContainer div.image-container img {
  scale: 1.07;
}
div.ytImageContainer div.image-container::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  inset-inline-start: 5px;
  background-image: url("/images/icons/icon-video-play-red.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 80px;
  pointer-events: none;
}
div.ytImageContainer div.image-container:hover::after {
  background-size: 85px;
  transition: all 0.25s;
}

div.vimeo-responsive-container {
  padding: 56.25% 0 0 0;
  position: relative;
}
iframe.vimeo-responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

div.notification-bar {
  position: fixed;
  display: block;
  bottom: 0;
  width: 100%;
  padding: 0.5em 1em;
  font-family: var(--font-family-notification-bar);
  background-color: var(--theme-color-5);
  color: var(--theme-color-5-contrast);
  z-index: 3;
  text-align: center;
}

div.notification-bar div.button-child {
  flex: 0 1 auto;
}

div.notification-bar div.button-child img {
  width: 30px;
  height: 30px;
  filter: invert(82%) sepia(0%) saturate(75%) hue-rotate(175deg)
    brightness(108%) contrast(94%);
}

.alert {
  position: fixed;
  margin: 0px;
  inset-block-end: 0px;
  inset-inline-start: 0px;
  width: 100%;
  z-index: 9999;
  border-radius: 5px;
}

div.modal {
  text-align: start;
}

/* Switch styling */
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  inset: 0 0 0 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  inset-inline-start: 4px;
  inset-block-end: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #2196f3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196f3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 30px;
}

.slider.round:before {
  border-radius: 50%;
}

/* Cookies modal */
.cookies-modal {
  inset-block-end: 10px;
  inset-inline-start: 10px;
  margin: 10px 0;
  max-height: 70%;
  min-height: unset;
  position: fixed;
  font-size: 0.8em;
  width: calc(100% - 20px);
  max-width: calc(100% - 20px);
}

.cookies-modal .modal-content {
  background-color: #000000;
  background-color: var(--theme-color-1);
}

.cookies-modal * {
  color: #ffffff;
}

.cookies-modal h4,
.cookies-modal h5 {
  margin-block-start: 0;
}

.cookies-modal a:hover {
  color: var(--theme-color-1);
  background: var(--theme-color-4);
}

div.grid-card {
  padding: 1em;
  border: 1px solid var(--body-border-color);
  position: relative;
  font-size: 0.8em;
  border-radius: 5px;
  margin: 0 0 1em 0;
  background-color: var(--theme-light-grey);
}

div.grid-card:hover {
  box-shadow: 1px 1px 5px #ccc;
  transition: transform 0.3s ease;
}

div.grid-card.theme-color-1 {
  border: none;
  background-color: var(--theme-color-1);
}

div.grid-card.theme-color-2 {
  border: none;
  background-color: var(--theme-color-2);
}

div.grid-card.theme-color-3 {
  border: none;
  background-color: var(--theme-color-3);
}

div.grid-card.theme-color-4 {
  border: none;
  background-color: var(--theme-color-4);
}

div.grid-card.theme-color-5 {
  border: none;
  background-color: var(--theme-color-5);
}

div.grid-card.theme-color-1:hover {
  box-shadow: 1px 1px 5px #fff;
}

div.grid-card.transparent {
  border: none;
  background-color: transparent;
  position: relative;
}

div.grid-card.transparent::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  box-shadow: 1px 4px 8px rgba(0, 0, 0, 0.29);
  mix-blend-mode: soft-light;
}

div.grid-card.transparent:hover::before {
  box-shadow: 1px 4px 8px rgba(50, 50, 50, 0.29);
}

.theme-color-2 div.grid-card {
  background-color: #fff;
}

div.grid-card h1::before,
div.grid-card h2::before,
div.grid-card h3::before,
div.grid-card h4::before,
div.grid-card h5::before {
  margin-block-start: unset;
  height: unset;
}

div.grid-card h2 {
  font-size: 1.5rem;
}

div.grid-card h3 {
  font-size: 1.2rem;
}

div.grid-card h4 {
  font-size: 1rem;
}

div.grid-card img {
  max-width: 100%;
  width: 100%;
  display: block;
  margin: 0 auto;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

div.grid-card img.noresize {
  max-width: 100%;
  width: unset;
  aspect-ratio: unset;
}

div.grid-card.shop-product img {
  object-fit: contain;
}

div.grid-card a {
  text-decoration: none;
}

div.grid-card a::after {
  position: absolute;
  inset: 0 0 0 0;
  z-index: 1;
  pointer-events: auto;
  content: "";
  background-color: rgba(0, 0, 0, 0);
}

div.grid-card .modal-body a::after {
  pointer-events: none;
}

div.image-container img {
  max-width: 100%;
  width: 100%;
  margin: -10% 0;
  display: block;
  margin: 0 auto;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

.clamp {
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

main button,
input[type="button"],
input::file-selector-button,
input[type="reset"],
input[type="submit"] {
  font-family: var(--font-family-button);
  border: none;
  background: var(--theme-color-3);
  box-shadow: none;
  color: var(--theme-color-3-contrast);
  /* Default accessibility requires minimum button size of 24x24px - element must be inline-block */
  /*
  font-size: 1em;
  font-size: 24px;
  */
  font-size: 1em;
  line-height: 1;
  padding-block-start: 0.5em;
  padding-inline-end: 0.5em;
  padding-block-end: 0.5em;
  padding-inline-start: 0.5em;
  margin-block-start: 1em;
  margin-inline-end: 0;
  margin-block-end: 1em;
  margin-inline-start: 0;
  text-shadow: none;
  transition: background 0.2s;
  border-radius: 5px;
}
input::file-selector-button {
  margin: 0 0.5em 0 0;
}

main button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
  background: var(--theme-color-1);
  color: var(--theme-color-1-contrast);
}
*.theme-color-1 main button:hover,
*.theme-color-1 input[type="button"]:hover,
*.theme-color-1 input[type="reset"]:hover,
*.theme-color-1 input[type="submit"]:hover {
  background: var(--theme-color-2);
  color: var(--theme-color-2-contrast);
}

/*
main button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
    background: var(--form-element-bg-color);
}
*/

main .carousel {
  /*
  background-color: var(--theme-stripe-footer);
  */
  padding-bottom: 2.5em;  
}

main .carousel button {
  background: none;
}

/*
main .carousel-indicators {
  margin: 0;
  padding: 5px 0 0 0;
  overflow-x: auto;
  white-space: nowrap;
  display: block;
  position: static;
  background-color: var(--theme-stripe-footer);
}
*/

main .carousel-item {
  margin: unset;
  margin-inline-end: -100%;
}

main .carousel-item > div {
  /* Remove any margin from the individual divs, since they may apply in normal page flow, but not inside a carousel */
  margin: 0;
}

main .carousel-indicators button {
  background: none;
  background-color: var(--theme-footer);
  margin: 0 2px;
  padding: unset;
  border-radius: 5px;
}

main .carousel-indicators button img {
  padding: 5px;
  max-height: 10vw;
}

input[type="file"] {
  margin: 0.25em 0;
}

nav#breadcrumbs {
  font-size: 0.7em;
  background: #ffffff;
  margin: 120px 0 -120px 0;
  padding: 1em 2em;
}

nav#breadcrumbs a {
  text-decoration: none;
}

#scrollToTopButton {
  display: none;
  position: fixed;
  inset-block-end: 10px;
  inset-inline-end: 20px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: var(--theme-color-3);
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 5px;
  font-size: 18px;
  font-weight: bold;
  opacity: 0.4;
  transition-property: opacity;
  transition-duration: 0.25s;
  transition-timing-function: ease-in-out;
}

#scrollToTopButton img {
  width:30px;
  height:25px;
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(156deg) brightness(103%) contrast(104%);
}

#scrollToTopButton:hover {
  opacity: 1;
}

.svg-filter-red {
  filter: invert(16%) sepia(79%) saturate(6514%) hue-rotate(356deg) brightness(97%) contrast(126%);
}
.svg-filter-green {
  filter: invert(75%) sepia(58%) saturate(6146%) hue-rotate(80deg) brightness(115%) contrast(126%);
}
.svg-filter-white {
    filter: invert(100%) sepia(4%) saturate(67%) hue-rotate(183deg) brightness(114%) contrast(100%);
}

.show-on-small-screen {
  display: none;
}

div.accordion h2.ui-state-active {
  border-color: var(--theme-color-3);
  background-color: var(--theme-color-3);
}

div.alertwrapper {
  margin: 0;
  position: fixed;
  top: 50%;
  left: 5%;
  width: 90%;
  transform: translateX(-50%);
  transform: translateY(-50%);
  z-index: 9999;
  /*
    animation: fadeinout 1s linear forwards;
    */
}

ul.contextmenu-custom li {
  font-family: var(--font-family-context-menu);
  font-size: 1rem;
  font-weight: normal;
}

img.center-crop-img {
  /* See https://labs.jensimmons.com/2016/examples/object-fit.html for examples of object-fit */
  object-fit: none;
  /* Do not scale the image */
  object-position: center;
  /* Center the image within the element */
  width: 100%;
}

img.center-crop-img-cover {
  object-fit: cover;
  /* maintains aspect ratio and fills to largest axis, cropping the other axis */
  object-position: center;
  /* Center the image within the element */
  width: 100%;
}

img.center-crop-img-fill {
  object-fit: fill;
  /* ignores aspect ration and fills container on both axes */
  object-position: center;
  /* Center the image within the element */
  width: 100%;
}

img.center-crop-img-contain {
  object-fit: contain;
  /* keeps whole image within the container by scaling to smaller axis, padding the other axis. Note that this will scale up an image which is smaller than the container - scale-down won't. */
  object-position: center;
  /* Center the image within the element */
  width: 100%;
}

img.center-crop-img-scale-down {
  object-fit: scale-down;
  /* keeps whole image within the container by scaling to smaller axis, padding the other axis. Note that this will not scale up an image which is smaller than the container - contain will. */
  object-position: center 50%;
  /* Center the image within the element */
  width: 100%;
}

button.collapsible-control {
  font-family: inherit;
  font-size: inherit;
  background: inherit;
  color: inherit;
  margin: inherit;
  font-weight: inherit;
  outline: none;
}
button.collapsible-control:hover {
  color: inherit;
}

.collapsible-control {
  background-color: #777;
  color: white;
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  padding-inline-start: 2em;
  position: relative;
}

.collapsible-control::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  max-height: 2em;
  top: 0;
  inset-inline-start: 0;
  background-image: url("/images/icons/iconmonstr-plus-circle-filled.svg");
  background-position: 0 center;
  background-repeat: no-repeat;
  background-size: auto 80%;
  pointer-events: none;
  filter: invert(49%) sepia(11%) saturate(0%) hue-rotate(263deg) brightness(92%)
    contrast(90%);
}

.collapsible-active,
.collapsible-control:hover {
  background-color: unset;
}

/*
.collapsible-control:hover::after {
    background-image: url("/images/icons/iconmonstr-menu-dot-horizontal-circle-filled.svg");
}
*/
.collapsible-active::after,
.collapsible-active:hover::after {
  background-image: url("/images/icons/iconmonstr-minus-circle-filled.svg");
}

.collapsible-content {
  padding: 0.5em 0.5em 0 0.5em;
  display: none;
  overflow: hidden;
}

@media screen and (max-width: 1920px) {
  div.grid-container.fixed-cols {
    grid-template-columns: repeat(3, minmax(50px, 1fr));
  }

  div.column-container {
    column-count: 3;
  }
}

@media screen and (max-width: 992px) {
  div.grid-container.ratio-2-1 {
    grid-template-columns: unset;
  }

  div.grid-container.ratio-1-2 {
    grid-template-columns: unset;
  }

  .border-inline-start {
    border-inline-start: none;
    border-block-start: 1px solid var(--body-border-color);
    padding: 0;
  }

  section {
    margin: 0 5px;
  }

  div.hero-container div.hero-text {
    margin: 0 1em;
    font-size: 0.6em;
  }

  div.grid-container {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  div.grid-container.fixed-cols {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  div.flex-container {
    flex-direction: column;
    row-gap: 0;
    column-gap: 0;
  }

  div.column-container {
    column-count: 1;
  }

  div.table-container {
    width: 100% !important;
    overflow-x: auto;
  }
  div.table-container th,
  div.table-container td {
    min-width: 200px;
  }

  table.scopecols th,
  table.scopecols td {
    display: block;
    text-align: left !important;
  }

  table.scopecols thead {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  table.scopecols tbody {
    border-block-start: 10px solid var(--theme-stripe-head);
  }

  table.scopecols th,
  table.styled td {
    padding: 0.25rem 0.75rem;
  }

  table.scopecols td:first-child {
    padding-block-start: 0.5em;
  }

  table.scopecols td:last-child {
    padding-block-end: 0.5em;
  }

  table.scopecols td[data-th]::before {
    content: attr(data-th) ":\A";
    color: var(--theme-color-1);
    white-space: pre-wrap;
    font-weight: bold;
  }

  table.scopecols td[data-th=""]::before {
    content: attr(data-th) "\A";
  }

  div:empty {
    display: none;
  }

  .show-on-small-screen {
    display: initial;
  }

  #scrollToTopButton {
    inset-block-end: 50px;
  }
}

/* jquery UI Overrides */
.ui-helper-reset {
  list-style: inherit;
}

/* Full Calendar styling */
.fc-day {
  background-color: #fff;
  border: 1px solid var(--body-border-color) !important;
  background-clip: padding-box;
}
.fc-day-sat,
.fc-day-sun {
  background-color: var(--theme-color-4);
}

/* OneTrust style overrides */
#ot-sdk-btn-floating {
  display: none;
}

#ot-sdk-btn.ot-sdk-show-settings,
#ot-sdk-btn.optanon-show-settings {
  color: inherit !important;
  border: inherit !important;
  height: inherit !important;
  white-space: inherit !important;
  word-wrap: inherit !important;
  padding: inherit !important;
  line-height: inherit !important;
  -moz-transition: inherit !important;
  -o-transition: inherit !important;
  -webkit-transition: inherit !important;
  transition: inherit !important;
  font-size: inherit !important;
}

.footer-link {
  text-decoration: none !important;
  color: #9e9e9e !important;
  font-size: 13px !important;
  font-weight: bold !important;
  background-color: transparent !important;
}

/* End of OneTrust style overrides */

/* Pardot styles */
.pardot-honeypot {
  position: absolute;
  inset-inline-start: -9999px;
  inset-block-start: -9999px;
}
/* End of Pardot styles */

/* Menu styles */
div#header-container {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  width: auto;
  display: flex;
  min-height: 120px;
  flex-wrap: nowrap;
  /* Keeps children on same row, sized according to content - do not change this globally - it's the purpose of this container! */
  flex-direction: row;
  row-gap: 1rem;
  column-gap: 0em;
  align-items: center;
  margin: 0;
  font-size: 1rem;
  justify-content: space-between;
  background-color: #fff;
  z-index: 1000;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% 10px;
}
div#header-container:lang(ko) {
  font-size: 1rem;
}

div.main-menu-container {
  /* Adjust -10px to allow for stripe at bottom of div#header-container */
  margin-top: -10px;
  flex: 1 1 auto;
}

div#header-container div#site-logo-container {
  /* Adjust -10px to allow for stripe at bottom of div#header-container */
  flex: 0 1 auto;
  padding: calc(1rem - 10px) 1rem 1rem 1rem;
}

div#header-container div#site-logo-container img {
  height: 65px;
  width: auto;
}

div#header-container div.header-tools {
  /*
  flex: 0 1 50px;
  */
  flex: 0 1 0;
  padding: calc(1rem - 10px) 1rem 1rem 0rem;
}
div#header-container div.header-tools.flag {
  font-size:1px;
}
div#header-container div.header-tools img {
  cursor: pointer;
  max-width: initial !important;
}

div#header-container-responsive {
  display: none;
}

nav#small-screen-menu-nav {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #e9e9e9;
  z-index: 1001;
}

div#small-screen-menu {
  display: grid;
  height: 50px;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  align-items: center;
  justify-items: center;
  padding: 0 1rem;
}

div#small-screen-menu > div img {
  height: 30px;
}

div#small-screen-menu > div img.icon {
  width: 30px;
}

nav.main-menu {
  display: flex;
  justify-content: center;
}

nav.main-menu ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav.main-menu li {
  display: block;
  position: relative;
  float: inline-start;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  /*
    background-color: #fff;
    */
}

nav.main-menu li.parent {
  padding-inline-end: 1rem;
  /* Make space for the arrow indicator */
}

/*
nav.main-menu li.parent:nth-last-child(2) {
  margin-inline-end: 2em;
}
*/

nav.main-menu li.parent ul {
  border: 1px solid #ccc;
  border: none;
  min-width: 12rem;
  padding: 0px;
  background-color: #ffffff;
  border-radius: 0 0 5px 5px;
  box-shadow: 0px 8px 8px 0px rgb(0 0 0 / 20%);
}

nav.main-menu li.parent > ul {
  top: 100%;
  inset-inline-start: 0;
  z-index: 1003;
  transition: none; /* Ensure no delay on display: none */
}

nav.main-menu li.parent.language ul {
  min-width: unset;
}

nav.main-menu li.parent > ul ul {
  top: 0;
  inset-inline-start: 100%;
  z-index: 1002;
}

nav.main-menu li.parent:hover > ul,
nav.main-menu li.parent:focus-within > ul {
  display: block;
  position: absolute;
}

nav.main-menu ul.child {
  display: none;
}

nav.main-menu ul.child.language {
  line-height: 1rem;
  /*
    column-count: 2;
    column-gap: 0rem;
    */
}

nav.main-menu ul.child li {
  background-color: #fff;
  color: #212529;
  width: 100%;
}

nav.main-menu ul.child li a {
  color: #000000;
}

nav.main-menu li:hover,
nav.main-menu li:focus-within {
  background-color: #95b4ca;
}

nav.main-menu li.parent li:hover,
nav.main-menu li.parent li:focus-within {
  background-color: #55595c;
}

nav.main-menu li.parent li:hover > a,
nav.main-menu li.parent li:focus-within > a {
  color: #fff;
}

nav.main-menu ul li.parent:after {
  position: absolute;
  content: "\25BC";
  font-size: 0.5rem;
  color: #999;
  inset-inline-end: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

nav.main-menu ul li ul li.parent:after {
  position: absolute;
  content: "\25B6";
  font-size: 0.5rem;
  color: #999;
  inset-inline-end: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

nav.main-menu a {
  text-decoration: none;
  color: #212529;
}

nav.main-menu li a {
  padding: 0.6rem 0.8rem;
  margin: 0;
  display: block;
  cursor: pointer;
}

.show-on-small-screen {
  display: none !important;
}

@media (max-width: 992px) {
  /* Main content adjustments */
  main {
    margin: 70px auto 0 auto;
  }

  nav#breadcrumbs {
    margin: 70px 0 -70px 0;
  }

  div#header-container-responsive {
    display: flex;
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    width: auto;
    height: 70px;
    max-height: 70px;
    align-items: center;
    justify-content: start;
    margin: 0;
    background-color: #fff;
    z-index: 999;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% 5px;
  }

  div#header-container-responsive div#site-logo-container-responsive {
    /* Adjust -10px to allow for stripe at bottom of div#header-container-responsive */
    padding-block-start: 0;
    padding-inline-end: 1em;
    padding-block-end: 5px;
    padding-inline-start: 1em;
  }

  div#header-container-responsive div#site-logo-container-responsive img {
    height: 50px;
  }

  div#header-container {
    min-height: unset;
  }

  #site-logo-container {
    display: none;
  }

  .header-tools {
    display: none;
  }

  nav.main-menu {
    display: block;
    position: fixed;
    inset-block-start: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: auto;
    background-color: #fff;
    padding-bottom: 50px;
    font-size: 1.2rem;
  }

  nav.main-menu ul {
    display: block;
  }

  nav.main-menu li {
    padding: 0 !important;
    margin: 0 !important;
    float: none;
  }

  nav.main-menu li.parent li:hover > a,
  nav.main-menu li.parent li:focus-within > a {
    color: #fff;
  }

  nav.main-menu li.parent ul {
    border-radius: unset;
    box-shadow: none;
  }

  nav.main-menu li.parent > ul,
  nav.main-menu li.parent > ul ul {
    top: auto;
    inset-inline-start: auto;
    position: relative;
    width: 100%;
    padding: 0;
  }

  nav.main-menu li.parent:hover > ul,
  nav.main-menu li.parent:focus-within > ul {
    display: none;
    position: relative;
  }

  nav.main-menu li.parent {
    padding-block-end: 0rem !important;
  }

  nav.main-menu ul li.parent:after,
  nav.main-menu ul li ul li.parent:after {
    content: "\25BC";
    font-size: 0.5rem;
    inset-inline-end: 1rem;
    top: 1rem;
    z-index: 1001;
    transform: unset;
  }

  nav.main-menu li a {
    display: block;
    border-bottom: 1px solid #e9e9e9;
  }

  nav.main-menu ul.child.language {
    line-height: unset;
  }

  nav.main-menu li ul li a {
    padding-inline-start: 2rem;
    padding-inline-end: 1rem;
    width: 100%;
  }

  nav.main-menu li ul li ul li a {
    padding-inline-start: 3rem;
    padding-inline-end: 1rem;
    width: 100%;
  }
}

/* Footer styles */
:root {
  --theme-footer: #323232;
  --theme-stripe-footer: #4c4c4c;
}

section.theme-footer {
  background-color: var(--theme-footer);
  color: #9e9e9e;
  line-height: 1em;
  padding: 1em 1em 3em 1em;
}

section.theme-footer div.flex-container > div {
  padding: 0.25em 0;
}

section.theme-footer > div {
  grid-template-columns: 2fr 6fr 2fr;
}

section.theme-footer div.footer-logo img {
  display: inline-block;
  width: auto;
  height: 50px;
}
section.theme-footer div.footer-part-of-sandvik img {
  display: inline-block;
  width: auto;
  height: 35px;
}
section.theme-footer > div > div > div {
  padding: 0.25em 0;
}

section.theme-footer ul {
  margin: 0px;
}

section.theme-stripe-footer {
  background-color: var(--theme-stripe-footer);
  color: #cecece;
  font-weight: bold;
  padding: 1em;
  text-transform: uppercase;
}

section.theme-stripe-footer a {
  color: inherit;
  text-decoration: inherit;
}

.footer-text {
  color: #9e9e9e;
}

.social-icons {
  padding: 0;
  list-style: none;
}

.social-icons li {
  display: inline-block;
  margin: 0 0.15em;
  position: relative;
  font-size: 0.9em;
}

/*
  .social-icons li.facebook a {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm3 8h-1.35c-.538 0-.65.221-.65.778v1.222h2l-.209 2h-1.791v7h-3v-7h-2v-2h2v-2.308c0-1.769.931-2.692 3.029-2.692h1.971v3z"/></svg>');
    background-repeat: no-repeat;
    background-size: 30px 30px;
  }
  */

.social-icons a {
  display: inline-block;
  fill: #767676;
  color: #767676;
  width: 30px;
  height: 30px;
  margin: 0.25em 0;
}

.social-icons a svg {
  width: 30px;
  height: 30px;
  /*
    background-color: #ffffff;
    */
  background-image: url("/images/circle-filled-white.svg");
  background-repeat: no-repeat;
  background-size: 25px 25px;
  background-position: center;
}

.social-icons a svg:hover {
  fill: #0da3dd;
  transition: all 265ms ease-in;
}

.footer-link-container ul {
  list-style: none;
}

.footer-link li {
  display: inline-block;
  margin: 0.1em 0.5em;
  position: relative;
}

.footer-link li a {
  text-decoration: none;
  color: #9e9e9e;
  font-size: 13px;
  font-weight: bold;
  background-color: transparent !important;
}

.copyright-text {
  color: #9e9e9e;
  font-size: 13px;
}

@media (max-width: 992px) {
  section.theme-footer {
    padding: 1em 1em calc(1em + 50px) 1em;
  }

  section.theme-footer > div {
    grid-template-columns: auto;
  }

  section.theme-footer > div > div > div {
    padding: 1em 0.25em;
  }

  .hide-on-small-screen {
    display: none;
  }

  .show-on-small-screen {
    display: inherit !important;
  }
}


/* ADDED /styles/cimatron-2025.css */

/*
:root {
    --form-element-font-color: #000000;
    --form-element-bg-color: #5d5d5e;
    --form-element-border-color: rgb(230,230,230);
    --form-element-border-focus-color: #FF8D1D;
    --form-element-bg-font-color: #ffffff;
    --form-element-placeholder-color:#aaaaaa;
    --theme-color-1: #224356;
    --theme-color-1-contrast: #ffffff;
    --theme-color-2: #F5F5F5;
    --theme-color-2-contrast: #333333;
    --theme-color-3: #954c14;
    --theme-color-3: #FF8D1D;
    --theme-color-3-contrast: #ffffff;
    --theme-color-3-contrast: #000000;
    --theme-color-4: #fef3e1;
    --theme-color-4-contrast: #333333;
    --theme-color-5: #58585a;
    --theme-color-5-contrast: #ffffff;
    --theme-stripe-head: #8cddff;
    --theme-stripe-odd: rgb(249, 249, 249);
    --theme-stripe-even: rgb(255, 255, 255);
    --theme-stripe-hover: #cbeeff;
    --theme-light-grey: rgb(245, 245, 245);
    --body-border-color: rgb(230,230,230);
    --body-grey-box-background: #FAFAFA;
    --quote-background: #f6ae37;
}
*/

/*
Colours:
Cimatron Orange: #ED8B00
Cimatron Light Orange: #FFC56E
Cimatron Teal: #006272

Complementary colours:
Orange Complementary dark: #F1A233 - white text
Orange Complementary light: #ECB363 - black text
Teal Complementary dark: #00515E - white text
Teal Complementary light: #007385 - white text

Grey scale colours:
White: #FFFFFF - black text
Light Grey: #E9E8E7 - black text
Medium Grey: #BDBCBB - black text
Medium Dark Grey: #8C8A87 - white text
Dark Grey: #292828 - white text
Black: #000000 - white text
*/

:root {
    --form-element-font-color: #000000;
    --form-element-bg-color: #8C8A87;
    --form-element-border-color: #E9E8E7;
    --form-element-border-focus-color: #ED8B00;
    --form-element-bg-font-color: #FFFFFF;
    --form-element-placeholder-color:#BDBCBB;
    --theme-color-1: #006272;
    --theme-color-1-contrast: #FFFFFF;
    --theme-color-2: #E9E8E7;
    --theme-color-2-contrast: #292828;
    --theme-color-3: #ED8B00;
    --theme-color-3-contrast: #000000;
    --theme-color-4: #ECB363;
    --theme-color-4-contrast: #000000;
    --theme-color-5: #8C8A87;
    --theme-color-5-contrast: #FFFFFF;
    --theme-stripe-head: #007385;
    --theme-stripe-odd: rgb(249, 249, 249);
    --theme-stripe-even: rgb(255, 255, 255);
    --theme-stripe-hover: #cbeeff;
    --theme-light-grey: rgb(245, 245, 245);
    --body-border-color: rgb(230,230,230);
    --body-grey-box-background: #FAFAFA;
    --quote-background: #F1A233;
    --label: #292828;
    --theme-footer: #292828;
    --bs-carousel-indicator-active-bg: var(--theme-color-4);
    --font-family-body: "Poppins", "Noto Sans Display", Arial, sans-serif;
    --font-family-heading: "Poppins", "Noto Sans Display", Arial, sans-serif;
    --font-family-legend: 'Poppins', sans-serif;
    --font-family-label: "Poppins", "Noto Sans Display", Arial, sans-serif;
    --font-family-button: "Poppins", "Noto Sans Display", Arial, sans-serif;
    --font-family-monospace: Consolas, "Lucida Console", monospace;
    --font-family-hero: "Poppins", "Noto Sans Display", Arial, sans-serif;
    --font-family-notification-bar: "Poppins", "Noto Sans Display", Arial, sans-serif;
    --font-family-context-menu: "Poppins", "Noto Sans Display", Arial, sans-serif;
}
/*
:root:lang(ko) {
    --font-family-body: "Poppins", "Noto Sans Display", Arial, sans-serif;
    --font-family-heading: "Poppins", "Noto Sans Display", Arial, sans-serif;
    --font-family-legend: 'Poppins', sans-serif;
    --font-family-label: "Poppins", "Noto Sans Display", Arial, sans-serif;
    --font-family-button: "Poppins", "Noto Sans Display", Arial, sans-serif;
    --font-family-monospace: Consolas, "Lucida Console", monospace;
    --font-family-hero: "Poppins", "Noto Sans Display", Arial, sans-serif;
    --font-family-notification-bar: "Poppins", "Noto Sans Display", Arial, sans-serif;
    --font-family-context-menu: "Poppins", "Noto Sans Display", Arial, sans-serif;
}
*/
body:lang(ko) {
  font-size: 1rem;
}

@font-face {
  font-family: Poppins;
  font-display: swap;
  src: url(/fonts/Poppins-Regular.woff2) format("woff2");
}
@font-face {
  font-family: Poppins;
  font-display: swap;
  src: url(/fonts/Poppins-Bold.woff2) format("woff2");
  font-weight: bold;
}
@font-face {
  font-family: Poppins;
  font-display: swap;
  src: url(/fonts/Poppins-Italic.woff2) format("woff2");
  font-style: italic;
}
@font-face {
  font-family: Poppins;
  font-display: swap;
  src: url(/fonts/SandvikSansText-BoldItalic.woff2) format("woff2");
  font-weight: bold;
  font-style: italic;
}

/*
#header-banner,
div#header-container,
div#header-container-responsive {
    background-image: url('/images/default/cimatron-stripe.png');
}
*/
#header-banner,
div#header-container,
div#header-container-responsive {
    background-color: white;
    /*
    background-image: linear-gradient(to right, #ED8B00 0%, #FFC56E 33%, #00515E 66%, #006272 100%);
    background-size: 100% 6%;
    background-position: bottom;
    background-repeat: no-repeat;
    */
    background-image: linear-gradient(to right, #006272 0%, #006272 100%);
}
@keyframes colorFade {
    0% { background-position: 0% 0; } /* Start at left */
    50% { background-position: 100% 0; } /* Shift to right */
    100% { background-position: 0% 0; } /* Return to start */
}
div#header-container div#site-logo-container {
    padding: calc(1rem - 10px) 2rem 1rem 2rem;
}
label {
    color: var(--label) !important;
}
svg.icon {
    fill: var(--theme-color-3);
}
.svg-filter-color-theme-color-3 {
    filter: brightness(0) saturate(100%) invert(72%) sepia(49%) saturate(4488%) hue-rotate(345deg) brightness(102%) contrast(101%);
}
.svg-filter-color-theme-color-5 {
    filter: brightness(0) saturate(100%) invert(36%) sepia(7%) saturate(110%) hue-rotate(201deg) brightness(91%) contrast(91%);
}


div.hero-container-2025 {
  position: relative;
  max-height: 360px;
  overflow: hidden;
  display: flex;
  align-items: center;
  font-family: var(--font-family-hero);
}
div.hero-container-2025.full-height {
  max-height: unset;
  aspect-ratio: 16 / 9;  
}
div.hero-container-2025.dark:before {
  content: "";
  position: absolute;
  inset: 0 0 0 0;
  background-color: #000000;
  opacity: 0.4;
}
div.hero-container-2025.overlay-teal:before {
  content: "";
  position: absolute;
  inset: 0 0 0 50%;
  background-image: url('/collateral/3/images/hero-overlay-teal.svg');
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
}


div.hero-container-2025 img.hero,
div.hero-container-2025 video.hero {
  width: 100%;
  height: auto;
  object-fit: cover;
}

div.hero-container-2025 div.hero-text-container {
  position: absolute;
  width: 100%;
  z-index: 1;
}

div.hero-container-2025 div.hero-text {
  position: relative;
  color: #ffffff;
  padding: 1em;
  position: relative;
  margin: 0 80px 0 55%;
}

div.hero-container-2025 div.hero-text h1,
div.hero-container-2025 div.hero-text h2,
div.hero-container-2025 div.hero-text h3,
div.hero-container-2025 div.hero-text p {
  color: #ffffff;
  margin: 0.3em auto;
  line-height: 1.1em;
  font-weight: normal;
}

div.hero-container-2025 div.hero-text h1 {
  font-size: min(5vw, 50px);
}

div.hero-container-2025 div.hero-text h2 {
  font-size: min(4vw, 40px);
}

div.hero-container-2025 div.hero-text h3 {
  font-size: min(3vw, 30px);
}

div.hero-container-2025 div.call-to-action {
  position: absolute;
  inset-block-end: 5px;
  inset-inline-end: 5px;
  z-index: 1;
  text-transform: unset;
  border-radius: 5px;
  background-color: var(--theme-color-3);
}
div.hero-container-2025 div.call-to-action::after {
  content: "→";
  position: absolute;
  inset-block-start: 45%;
  transform: translateY(-50%);
  color: var(--theme-color-3-contrast);
  text-align: end;
  font-size: min(4vw, 1.5em);
  line-height: min(4vw, 1.5em);
  width: 100%;
  padding: 0 20px;
  pointer-events: none;
}
div.hero-container-2025 div.call-to-action:lang(he)::after {
  content: "←";
}
div.hero-container-2025 div.call-to-action a {
  font-size: min(2vw, 1em);
  display: block;
  padding: 0.5vw 0.75em;
  padding-inline-end: 3em;
  background-color: var(--theme-color-3);
  background-color: transparent;
  color: var(--theme-color-3-contrast);
  text-decoration: none;
}
div.hero-container-2025 div.call-to-action a:hover {
  text-decoration: none;
  color: var(--theme-color-1-contrast);
  background-color: var(--theme-color-1);
  border-radius: 5px;
}
div.hero-container-2025 div.call-to-action:hover::after {
  color: var(--theme-color-1-contrast);
}



div.grid-card-image {
  padding: 1em;
  border-radius: 5px;
  background-color: var(--theme-light-grey);
  position: relative;
  width: 100%;
  overflow: hidden; /* Hide any overflow from children */
  box-sizing: border-box; /* Include padding in width/height */
  font-size: 0.8em; /* From base CSS */
  margin: 0 0 1em 0; /* From base CSS */
  border: none; /* Override base CSS border */
  color: #fff;
  display: inline-grid; /* required to align children to bottom */
  min-height: 15vw;  
}

div.grid-card-image figure {
  position: absolute;
  inset: 0; /* RTL-friendly: fills entire parent */
  width: 100%;
  height: 100%;
  margin: 0 !important; /* Override base CSS margin: 2em 0 */
  padding: 0; /* Override any potential padding */
  overflow: hidden;
  z-index: 1; /* Behind text */
  text-align: start; /* Override base CSS text-align: center */
}

div.grid-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Crop to fill, prioritizing height */
  object-position: center; /* Center the image */
  border-radius: 5px; /* Match grid-card's border-radius */
  display: block; /* Remove inline spacing */
  position: absolute;
  inset: 0; /* RTL-friendly: fills figure */
  aspect-ratio: auto !important; /* Override base CSS aspect-ratio: 16 / 9 */
  margin: 0 !important; /* Override base CSS margin */
  pointer-events: none; /* Prevent image from intercepting clicks */
}
div.grid-card-image::before {
  content: "";
  position: absolute;
  inset: 0; /* RTL-friendly: covers entire card */
  background-color: #000;
  opacity: 0.5;
  border-radius: 5px;
  z-index: 2; /* Above image, below text */
  pointer-events: none; /* Prevent hover overlay from blocking clicks */
}

div.grid-card-image a {
  position: absolute;
  inset: 0; /* RTL-friendly: fills figure for clickability */
  z-index: 2; /* Above image, below text */
  display: block; /* Ensure full coverage */
  pointer-events: auto; /* Ensure link is clickable */
}

div.grid-card-image a::after {
  content: none !important; /* Override base CSS to prevent blocking clicks */
}

div.grid-card-image h3 {
  position: relative;
  z-index: 3; /* Above image and link */
  margin: 0.5em 0 0; /* Spacing above text */
  font-size: 1.2rem; /* From base CSS */
  color: var(--theme-color-1-contrast); /* From base CSS */
  pointer-events: none; /* Prevent text from blocking link clicks */
}

.cta {
  position: relative;
  display: inline-block;
  font-family: var(--font-family-button);
  border: none;
  background: var(--theme-color-3);
  box-shadow: none;
  color: var(--theme-color-3-contrast);
  font-size: 1em;
  line-height: 1;
  padding-block-start: 0.5em;
  padding-inline-end: 2.5em;
  padding-block-end: 0.5em;
  padding-inline-start: 0.5em;
  margin-block-start: 2em !important;
  margin-block-end: 0.5em;
  text-shadow: none;
  transition: background 0.2s;
  border-radius: 5px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  align-self: end; /* Aligns the .bottom div to the bottom of the grid cell */
  max-width: fit-content; /* Sizes to content, or set a specific value like 480px */
  margin-inline-end: auto; /* Centers horizontally */
  margin-inline-start: auto; /* Centers horizontally */
}
.cta::after {
  content: "→";
  position: absolute;
  inset-block-start: 45%;
  transform: translateY(-50%);
  color: var(--theme-color-3-contrast);
  text-align: end;
  font-size: min(4vw, 1.5em);
  line-height: min(4vw, 1.5em);
  padding: 0 0 0 10px;
  pointer-events: none;
}
.cta:lang(he)::after {
  content: "←";
}



div.grid-card-image:hover .cta {
  color: var(--theme-color-1-contrast);
  background-color: var(--theme-color-1);
}
div.grid-card-image:hover .cta::after {
  color: var(--theme-color-1-contrast);
}

div.grid-card-image *:not(:where(figure, a)) {
  position: relative;
  z-index: 3; /* Above image and link */
  pointer-events: none; /* Prevent text from blocking link clicks */
}




div.grid-card-image:hover {
  box-shadow: 1px 1px 5px #ccc; /* From base CSS */
  transition: transform 0.3s ease; /* From base CSS */
}

div.grid-card-image:hover::before {
  content: "";
  position: absolute;
  inset: 0; /* RTL-friendly: covers entire card */
  background-color: var(--theme-color-3);
  opacity: 0.6;
  border-radius: 5px;
  z-index: 2; /* Above image, below text */
  pointer-events: none; /* Prevent hover overlay from blocking clicks */
}




div.grid-card img.noresize {
  max-width: 100%;
  width: unset;
  aspect-ratio: unset;
}

div.grid-card.shop-product img {
  object-fit: contain;
}

div.grid-card a {
  text-decoration: none;
}

div.grid-card a::after {
  position: absolute;
  inset: 0 0 0 0;
  z-index: 1;
  pointer-events: auto;
  content: "";
  background-color: rgba(0, 0, 0, 0);
}

div.grid-card .modal-body a::after {
  pointer-events: none;
}



div.quote-slide {
  display: grid;
  place-items: center; /* Centers content both horizontally and vertically */
  width: 100%; /* Fills parent's width */
  aspect-ratio: 16 / 9; /* Maintains 16:9 ratio */
  overflow: visible; /* Allows content to spill if needed */
}

div.quote-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Scales image to cover container */
  display: block; /* Removes inline spacing */
  opacity: 0.5; /* As per your tweak */
  grid-area: 1 / 1; /* Places image in the same grid cell as content */
  z-index: 1; /* Places image below content */
}

div.quote-slide-content {
  grid-area: 1 / 1; /* Overlays content on the same grid cell as image */
  margin: auto 15%;
  background: white; /* White background for quote box */
  opacity: 1; /* Explicitly set to ensure no transparency */
  padding: 20px; /* Padding around the grid */
  box-sizing: border-box; /* Ensures padding doesn't affect margins */
  max-width: calc(100% - 200px); /* Prevents overflow from margins */
  max-height: calc(100% - 200px); /* Ensures content fits with margins */
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two equal columns for blockquote and figcaption */
  grid-template-rows: auto auto; /* Two rows: one for figure, one for button */
  column-gap: 20px; /* Gap between columns */
  align-items: center; /* Vertically centers content in each cell */
  z-index: 2; /* Places content above image */
}

div.quote-slide-content figure.quote {
  margin: 0;
  padding: 0;
  text-align: center;
  border-block-start: none;
  border-block-end: none;
  background-color: transparent;
  display: contents; /* Allows blockquote and figcaption to use grid cells directly */
}

div.quote-slide-content figure.quote blockquote::after,
div.quote-slide-content figure.quote blockquote::before {
  opacity: unset;
  color: var(--theme-color-3);
}

div.quote-slide-content figure.quote blockquote {
  grid-column: 1; /* Places blockquote in the first column */
  grid-row: 1; /* Places in the first row */
  text-align: left; /* Aligns text to the left */
  margin: 0; /* Remove default margins */
  padding: 10px; /* Padding inside the grid cell */
}

div.quote-slide-content figure.quote figcaption {
  grid-column: 2; /* Places figcaption in the second column */
  grid-row: 1; /* Places in the first row */
  text-align: right; /* Aligns text to the right */
  margin: 0; /* Remove default margins */
  padding: 10px; /* Padding inside the grid cell */
  font-size: 1.5em;  
}

div.quote-slide-content p {
  grid-column: 1 / 3; /* Spans both columns */
  grid-row: 2; /* Places in the second row */
  margin: 10px 0 0 0; /* Small top margin for spacing, no other margins */
  text-align: right; /* Right-aligns the button */
}

/* Responsive adjustments */
@media (max-width: 992px) {
  div.quote-slide {
    aspect-ratio: 16 / 9; /* Maintain aspect ratio, but allow content to adapt */
  }

  div.quote-slide-content {
    margin: auto 15%;
    max-width: calc(100% - 40px); /* Adjust for reduced margins */
    max-height: none; /* Remove height constraint to prevent clipping */
    grid-template-columns: 1fr; /* Stack blockquote and figcaption */
    column-gap: 0; /* Remove gap when stacked */
    padding: 10px; /* Reduce padding for smaller screens */
  }

  div.quote-slide-content figure.quote blockquote {
    grid-column: 1; /* Single column */
    grid-row: 1; /* First row */
    text-align: center; /* Center for mobile */
    padding: 10px;
  }

  div.quote-slide-content figure.quote figcaption {
    grid-column: 1; /* Single column */
    grid-row: 2; /* Second row for stacking */
    text-align: center; /* Center for mobile */
    padding: 10px;
    margin-top: 10px; /* Space between stacked elements */
  }

  div.quote-slide-content p {
    grid-column: 1; /* Single column */
    grid-row: 3; /* Third row for button */
    text-align: center; /* Center button for mobile */
    margin: 10px 0;
  }
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(100%) sepia(100%) saturate(1000%) hue-rotate(180deg);
}


section#site-quick-links {
  background-color: #222222;
  color: #fff;
  font-size: 0.75em;
}
section#site-quick-links div.flex-container {
  flex-wrap: wrap; /* Allow flex items to wrap to the next row */
  justify-content: center;
  column-gap: 0.5em;
}
section#site-quick-links div.flex-container > div {
  min-width: 80px; /* Optional: Minimum width to ensure readability before wrapping */
}
section#site-quick-links div.flex-container > div:first-child {
  flex: 1; /* Shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0 - This makes the first div expand to fill available space */
  display: flex; /* Make first div a flex container */
  flex-direction: column; /* Stack contents vertically */
  justify-content: center; /* Align contents to the middle */  
}
section#site-quick-links div.flex-container > div:not(:first-child) {
  flex: 0 0 auto; /* Shorthand for flex-grow: 0, flex-shrink: 0, flex-basis: auto */
  /* This makes other divs size to their content */
}
section#site-quick-links div.border-inline-start {
  border-inline-start-color: #acacac;
}
section#site-quick-links ul {
  padding-inline-start: 0;
}
section#site-quick-links ul li::before {
  display:none;
}
section#site-quick-links a {
  color: #acacac;
  text-decoration: none;
}
section#site-quick-links a:hover {
  color: #acacac;
  text-decoration: underline;
}




@media (max-width: 992px) {
  /* Main content adjustments */
  main {
    margin: 100px auto 0 auto;
  }

  nav#breadcrumbs {
    margin: 100px 0 -100px 0;
  }

  div#header-container-responsive {
    height: 100px;
    max-height: 100px;
  }

  section#site-quick-links {  
    padding: 1em;
  }

}


/* ADDED /styles/form-styles.css */

legend {
  font-family: var(--font-family-legend);
  font-size: 1.3em;
  font-weight:bold;
  color: var(--theme-color-1);
  margin:1em 0;
  padding:0.25em 0;
  border-bottom: 1px solid var(--form-element-border-color);
}
div.FieldContainer {
  margin:0;
}
label {
  font-family: var(--font-family-label);
  font-size: 0.8em;
  display: block;
  color: var(--theme-color-1);
  font-weight: normal;
  margin: 0.25em 0 0 0;
  cursor: pointer;
}
*.theme-color-1 label {
  color: var(--theme-color-1-contrast);
}
label.error {
  display: inline-block;
}
select, option, input {
  color: var(--form-element-font-color);
}
fieldset {
  margin-block-start: 1em;
}
fieldset label:first-of-type {
  margin-block-start: 0;
}
div.checkbox,
div.radio {
  display: grid;  
  column-gap: 5px;  
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin: 0.25em 0;
}
div.checkbox.flex,
div.radio.flex {
  display: flex;
  flex-wrap: wrap;    
  white-space: nowrap;
}
div.checkbox label,
div.radio label {
  margin-block-start: 0.25em;
  margin-inline-end: 1em;
  margin-block-end: 0.25em;
  margin-inline-start: 0;
}
div.explanatory {
  margin-block-start: 0.25em;
  margin-block-end: 0.25em;
  font-size: 0.7em
}
input[type=text],
input[type=email],
input[type=url],
input[type=integer],
input[type=number],
input[type=search],
input[type=password],
select,
textarea,
div#openedit-editor 
{
  width: 100%;
  border: 1px solid var(--form-element-border-color);
  border-radius: 5px;
  resize: vertical;
  padding: 0.5em;
  margin-block-start: 0.2em;
  margin-inline-end: 0;
  margin-block-end: 0.2em;
  margin-inline-start: 0;
  background-color: #ffffff;
}
select
{
  padding-block-start: 0.7em;
  padding-inline-end: 0.4em;
  padding-block-end: 0.7em;
  padding-inline-start: 0.4em;
}
textarea {
  height: 100px;
  min-height: 100px;
}

/*
input[type=checkbox],
input[type=radio] {
  margin: 0 0 1.5em 0;
}
*/

.theme-color-3 label {
  color: var(--theme-color-3-contrast);
}

.theme-color-3 button,
.theme-color-3 input[type="button"],
.theme-color-3 input::file-selector-button,
.theme-color-3 input[type="reset"],
.theme-color-3 input[type="submit"] {
  color: var(--theme-color-3);
  background: var(--theme-color-3-contrast);
}

.theme-color-3 button:hover,
.theme-color-3 input[type="button"]:hover,
.theme-color-3 input::file-selector-button:hover,
.theme-color-3 input[type="reset"]:hover,
.theme-color-3 input[type="submit"]:hover {
  color: var(--form-element-bg-font-color);
  background: var(--theme-color-1);
}

button:disabled,
button:disabled:hover,
input[type="button"]:disabled,
input[type="button"]:disabled:hover,
input[type="reset"]:disabled,
input[type="reset"]:disabled:hover,
input[type="submit"]:disabled,
input[type="submit"]:disabled:hover,
input[type="file"]:disabled::file-selector-button,
input[type="file"]:disabled:hover::file-selector-button {
  background-color: #dddddd;
  color: #cccccc;
  opacity: 1;
}

::placeholder
{
  color: var(--form-element-placeholder-color);
  background-color: #ffffff;
}

select option[disabled]
{
  font-style: italic;
  background-color: #ffffff;
}


input[type="text"].datepicker {
  width:8rem;
}
button.ui-datepicker-trigger,
button.ui-datepicker-trigger:hover {
  all:unset;
  cursor: pointer;
}
button.ui-datepicker-trigger i {
  font-size: 1.5em;
  margin-inline-start: 0.1em;
}
input[type="text"].timeentry {
  width:8rem;
}

.checkbox label > span,
.radio label > span{
  vertical-align: middle;
  margin-block-start: 0;
  margin-inline-end: 0;
  margin-block-end: 0;
  margin-inline-start: 0.3em;
}

[type=radio],
[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance:    none;
  appearance:         none;
  width: 2em;
  height: 2em;
  border: 1px solid var(--form-element-border-color);;
  border-radius: 5px;
  position: relative;
  cursor: pointer;
  vertical-align: middle;
  box-sizing: border-box;
  outline: none;
  background-color: var(--form-element-bg-font-color);
  transition-duration: 0.3s;
  line-height: 1.4em;  
}

[type=radio]:checked,
[type=checkbox]:checked {
  background-color: var(--form-element-bg-color);;
}

[type=radio]:checked::before,
[type=checkbox]:checked::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
}

[type=checkbox]:checked::before {
  content: '\2714';
  font-size: 2em;
  font-weight: bold;
  color: var(--form-element-bg-font-color);
  margin: 0.1em;  
}

[type=radio],
[type=radio]:checked::before{
  border-radius: 100%;
}

[type=range] {
  width: 100%;
}
.range-wrap {
  position: relative;
  margin: 0 auto 1.5rem;
}
.bubble {
  background: var(--theme-color-3);
  color: var(--theme-color-3-contrast);
  padding: 4px 12px;
  position: absolute;
  border-radius: 4px;
  inset-block-start: 25px;
  inset-inline-start: 50%;
  font-size: 0.6em;
}
.bubble::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--theme-color-3);
  top: -1px;
  left: 50%;
}


div.dataTables_filter label input[type="search"] {
  width:auto;
}


/* MCE editor */
div.mceinline {
  width: 100%;
  border: 1px solid var(--form-element-border-color);
  border-radius: 5px;
  resize: vertical;
  padding: 0.5em;
  margin-block-start: 0;
  margin-inline-end: 0;
  margin-block-end: 1.5em;
  margin-inline-start: 0;
  min-height:200px;
}

div.tox-dialog textarea.tox-textarea {
  font-family: var(--font-family-monospace);
  font-size:12px;
}

/* Validate styles */
label .required {
  color:#990033;
  font-size:1.2em;
}
label.error {
  color:#ff0000 !important;
  font-size:0.8em;
  margin: -1.5em 0 0 0;
}

input:focus, textarea:focus, select:focus {
  outline: 0 !important;
  border-color: var(--form-element-border-focus-color);
  box-shadow: 0 0 3px var(--theme-color-1);
}

img.ui-datepicker-trigger {
	display: inline-block;
	height: 2rem;
	margin-inline-start: 0.5em;
	margin-inline-end: 0.5em;
  margin-block-end: 0.25em;
}