@font-face {
  font-family: "DIN Alternate";
  src: url("/resource/fontdin/DIN-Medium-Alternate.woff2") format("woff2"),
  url("/resource/fontdin/DIN-Medium-Alternate.ttf") format("truetype");
  font-weight: 600;
}
@font-face {
  font-family: "DIN Alternate";
  src: url("/sfsites/c/resource/fontdin/DIN-Medium-Alternate.woff2") format("woff2"),
  url("/sfsites/c/resource/fontdin/DIN-Medium-Alternate.TTF") format("truetype");
  font-weight: 600;
}
:root {
  /* live sf site */
  --dcore-svg-sprite-sheet: /sfsites/c/resource/onedcsite/icons/symbols.svg;
  --dcore-svg-sprite-sheet-lib: /sfsites/c/resource/onedcsite/icons/symbols-lib.svg;

  --container-max-width: 1280px;
  
  /* Generic Chart Colours (to be used by... Charts) */
  /* also set in JS in force-app/main/default/lwc/oneConstants/charts.js */
  --one-chart-color-01: #fb2c36;
  --one-chart-color-02: #ff6900;
  --one-chart-color-03: #fe9a00;
  --one-chart-color-04: #f0b100;
  --one-chart-color-05: #7ccf00;
  --one-chart-color-06: #00c950;
  --one-chart-color-07: #00bba7;
  --one-chart-color-08: #00a6f4;
  --one-chart-color-09: #276bc6;
  --one-chart-color-10: #ad46ff;
}
:root:has(#main) {
  /* local dev server */
  --dcore-svg-sprite-sheet: /icons/symbols.svg;
  --dcore-svg-sprite-sheet-lib: /icons/symbols-lib.svg;
  --dcore-svg-sprite-sheet-sf: /icons/symbols-sf.svg;
}

/* Use nicer oklch if supported */
@supports (color: oklch(0% 0 0)) {
  :host {
    --one-chart-color-01: oklch(0.637 0.237 25.331);
    --one-chart-color-02: oklch(0.705 0.213 47.604);
    --one-chart-color-03: oklch(0.769 0.188 70.08);
    --one-chart-color-04: oklch(0.795 0.184 86.047);
    --one-chart-color-05: oklch(0.768 0.233 130.85);
    --one-chart-color-06: oklch(0.723 0.219 149.579);
    --one-chart-color-07: oklch(0.704 0.14 182.503);
    --one-chart-color-08: oklch(0.685 0.169 237.323);
    --one-chart-color-09: oklch(0.623 0.214 259.815);
    --one-chart-color-10: oklch(0.627 0.265 303.9);
  }
}

html {
  -webkit-text-size-adjust: 100%;
}

body,
.body {
  background-color: var(--dcore-theme-bg-surface, #fcfcfc);
  font-family: var(--dcore-font-families-body, 'Open Sans');
  font-size: var(--dcore-font-size-md, 16px);
  margin: 0;
  padding: 0;
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Global Defaults */

button {
  font-family: var(--dcore-font-families-body, 'Open Sans');
  font-size: var(--dcore-font-size-md, 16px);
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  padding: 0;
}

h1 {
  font-size: var(--dcore-typography-heading-1-s-m-font-size);
  font-family: var(--dcore-typography-heading-1-s-m-font-family);
  line-height: var(--dcore-typography-heading-1-s-m-line-height);
}
h2 {
  font-size: var(--dcore-typography-heading-2-s-m-font-size);
  font-family: var(--dcore-typography-heading-2-s-m-font-family);
  line-height: var(--dcore-typography-heading-2-s-m-line-height);
}
h3 {
  font-size: var(--dcore-typography-heading-3-s-m-font-size);
  font-family: var(--dcore-typography-heading-3-s-m-font-family);
  line-height: var(--dcore-typography-heading-3-s-m-line-height);
}
h4 {
  font-size: var(--dcore-typography-heading-4-s-m-font-size);
  font-family: var(--dcore-typography-heading-4-s-m-font-family);
  line-height: var(--dcore-typography-heading-4-s-m-line-height);
}
h5 {
  font-size: var(--dcore-typography-heading-5-all-sizes-font-size);
  font-family: var(--dcore-typography-heading-5-all-sizes-font-family);
  line-height: var(--dcore-typography-heading-5-all-sizes-line-height);
}
h6 {
  font-size: var(--dcore-typography-heading-6-all-sizes-font-size);
  font-family: var(--dcore-typography-heading-6-all-sizes-font-family);
  line-height: var(--dcore-typography-heading-6-all-sizes-line-height);
}
@media (min-width: 768px) {
  h1 {
    font-size: var(--dcore-typography-heading-1-l-xl-font-size);
    line-height: var(--dcore-typography-heading-1-l-xl-line-height);
  }
  h2 {
    font-size: var(--dcore-typography-heading-2-l-xl-font-size);
    line-height: var(--dcore-typography-heading-2-l-xl-line-height);
  }
  h3 {
    font-size: var(--dcore-typography-heading-3-l-xl-font-size);
    line-height: var(--dcore-typography-heading-3-l-xl-line-height);
  }
  h4 {
    font-size: var(--dcore-typography-heading-4-l-xl-font-size);
    line-height: var(--dcore-typography-heading-4-l-xl-line-height);
  }
}

/* LWR Fixes */

/* remove extra padding that section/container components have in LWR */
community_layout-section.comm-section-container {
  padding: 0 !important;
}

/* remove extra margin that wrapper components have in LWR */
webruntimedesign-design-component webruntimedesign-component-wrapper.component-wrapper-spacer {
  margin: 0 !important;
}

/* span colums to be 100% width */
.comm-section-container .columns-content {
  max-width: 100% !important;
}

/* Global Utility Classes */
/* based on TailwindCSS where applicable */

/* Font Family */
.font-display {
  font-family: var(--dcore-font-families-headlines, 'DIN Alternate');
}
.font-body {
  font-family: var(--dcore-font-families-body, 'Open Sans');
}

/* Font Size */
.text-xxs { font-size: var(--dcore-font-size-xxs, 8px); }
.text-xs { font-size: var(--dcore-font-size-xs, 10px); }
.text-sm { font-size: var(--dcore-font-size-sm, 13px); }
.text-md { font-size: var(--dcore-font-size-md, 16px); }
.text-lg { font-size: var(--dcore-font-size-lg, 20px); }
.text-xl { font-size: var(--dcore-font-size-xl, 25px); }
.text-2xl { font-size: var(--dcore-font-size-2xl, 31px); }
.text-3xl { font-size: var(--dcore-font-size-3xl, 39px); }
.text-4xl { font-size: var(--dcore-font-size-4xl, 49px); }
.text-5xl { font-size: var(--dcore-font-size-5xl, 61px); }
.text-6xl { font-size: var(--dcore-font-size-6xl, 76px); }
.text-7xl { font-size: var(--dcore-font-size-7xl, 95px); }
.text-8xl { font-size: var(--dcore-font-size-8xl, 119px); }
.text-9xl { font-size: var(--dcore-font-size-9xl, 149px); }
.text-10xl { font-size: var(--dcore-font-size-10xl, 186px); }

/* Outline */
.focus\:outline:focus-visible,
.outline {
  outline: 2px solid var(--dcore-theme-focus-accent, #fc3746);
  outline-offset: 2px;
}
.outline-offset-0 {
  outline-offset: 0px;
}
.outline-offset-1 {
  outline-offset: 1px;
}

/* Background Color */
.bg-surface {
  background-color: var(--dcore-theme-bg-surface, #fcfcfc);
}
.bg-muted {
  background-color: var(--dcore-theme-bg-muted, #e0e0e0);
}
.bg-subtle {
  background-color: var(--dcore-theme-bg-subtle, #eeeeee);
}
.bg-canvas {
  background-color: var(--dcore-theme-bg-canvas, #f5f5f5);
}

/* Skeleton Loader */
.skeleton-loader, [data-skeleton='true'] {
  --skeleton-background-0: hsl(200, 20%, 90%);
  --skeleton-background-100: hsl(200, 20%, 95%);
  animation: skeleton-loading 1s linear infinite alternate;
  border-radius: 0.25rem;
}

@keyframes skeleton-loading {
  0% {
    background-color: var(--skeleton-background-0, hsl(200, 20%, 90%));
  }
  100% {
    background-color: var(--skeleton-background-100, hsl(200, 20%, 95%));
  }
}