@oslokommune/punkt-css/dist/css/pkt.css

CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo

@charset "UTF-8";
/**
 * Normalisering av HTML elementer
 * I hovedsak hentet fra normalize.css 
 * Normalize har MIT lisens. https://github.com/necolas/normalize.css
 *
 * Mål: 
 * - fikse forskjeller mellom nettlesere gjennom å sette gode standardverdier
 * - fikse rariteter og bugs noen nettlesere har
 * - sette noen grunnverdier for å forbedre brukervennlighet
 *
 */
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent adjustments of font size after orientation changes in iOS.
 * https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/
 */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

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

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

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

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in Edge.
 */
button,
input {
  overflow: visible;
}

/**
  * Remove the inheritance of text transform in Edge, Firefox, and IE.
  */
button,
select {
  text-transform: none;
}

/**
  * 1. Remove the default `border-radius` that macOS Chrome adds.
  * 2. Correct the inability to style clickable types in iOS and Safari.
  */
button,
[type=button],
[type=reset],
[type=submit] {
  border-radius: 0; /* 1 */
  -webkit-appearance: button; /* 2 */
}

/**
  * Remove the inner border and padding in Firefox.
  */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
  * Restore the focus styles unset by the previous rule.
  */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
  * Correct the padding in Firefox.
  */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
  * 1. Correct the text wrapping in Edge and IE.
  * 2. Correct the color inheritance from `fieldset` elements in IE.
  * 3. Remove the padding so developers are not caught out when they zero out
  *    `fieldset` elements in all browsers.
  */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

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

/**
  * 1. Remove the default vertical scrollbar in IE 10+.
  * 2. Only resize vertically to not break containers horizontally.
  */
textarea {
  overflow: auto; /* 1 */
  resize: vertical; /* 2 */
}

/**
  * Correct the cursor style of increment and decrement buttons in Chrome.
  */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
  * Remove the default appearance of date and time inputs
  */
input[type=date],
input[type=time],
input[type=datetime-local],
input[type=month] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input::-webkit-datetime-edit {
  margin-bottom: -4px;
}

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

/**
  * Remove the inner padding in Chrome and Safari on macOS.
  */
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

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

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}
/* 
 * Oslo-sans
 */
@font-face {
  font-display: swap;
  font-family: Oslo Sans;
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/OsloSans-Regular.woff2") format("woff2"), url("../fonts/OsloSans-Regular.woff") format("woff");
}
@font-face {
  font-display: swap;
  font-family: Oslo Sans;
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/OsloSans-RegularItalic.woff2") format("woff2"), url("../fonts/OsloSans-RegularItalic.woff") format("woff");
}
@font-face {
  font-display: swap;
  font-family: Oslo Sans;
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/OsloSans-Light.woff2") format("woff2"), url("../fonts/OsloSans-Light.woff") format("woff");
}
@font-face {
  font-display: swap;
  font-family: Oslo Sans;
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/OsloSans-Medium.woff2") format("woff2"), url("../fonts/OsloSans-Medium.woff") format("woff");
}
@font-face {
  font-display: swap;
  font-family: Oslo Sans;
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/OsloSans-Bold.woff2") format("woff2"), url("../fonts/OsloSans-Bold.woff") format("woff");
}
@font-face {
  font-display: swap;
  font-family: Oslo Icons;
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/OsloIcons.woff2") format("woff2"), url("../fonts/OsloIcons.woff") format("woff");
}
/* 
 * Colors
 * Brand
 * Light mode
 * Dark mode
 */
:root {
  /**
   * @tokens Colors
   * @presenter Color
   */
  --pkt-color-brand-blue-100: #f1fdff;
  --pkt-color-brand-blue-200: #e5fcff;
  --pkt-color-brand-blue-300: #d1f9ff;
  --pkt-color-brand-blue-500: #b3f5ff;
  --pkt-color-brand-blue-1000: #6fe9ff;
  --pkt-color-brand-dark-blue-700: #6a698b;
  --pkt-color-brand-dark-blue-1000: #2a2859;
  --pkt-color-brand-warm-blue-1000: #1f42aa;
  --pkt-color-brand-green-400: #c7fde9;
  --pkt-color-brand-green-1000: #43f8b6;
  --pkt-color-brand-light-green-400: #e5ffe6;
  --pkt-color-brand-light-green-1000: #c7f6c9;
  --pkt-color-brand-dark-green-1000: #034b45;
  --pkt-color-brand-yellow-1000: #f9c66b;
  --pkt-color-brand-yellow-500: #ffe7bc;
  --pkt-color-brand-red-100: #fff2f1;
  --pkt-color-brand-red-400: #ffdfdc;
  --pkt-color-brand-red-600: #ffb4ac;
  --pkt-color-brand-red-1000: #ff8274;
  --pkt-color-brand-light-beige-1000: #f8f0dd;
  --pkt-color-brand-dark-beige-1000: #d0bfae;
  --pkt-color-brand-neutrals-white: #ffffff;
  --pkt-color-brand-neutrals-100: #f9f9f9;
  --pkt-color-brand-neutrals-200: #f2f2f2;
  --pkt-color-brand-neutrals-1000: #2c2c2c;
  --pkt-color-brand-neutrals-black: #000000;
  --pkt-color-brand-neutrals-transparent: transparent;
  --pkt-color-brand-purple-1000: #e0adff;
  --pkt-color-grays-gray-100: #e6e6e6;
  --pkt-color-grays-gray-200: #cccccc;
  --pkt-color-grays-gray-300: #b3b3b3;
  --pkt-color-grays-gray-400: #9a9a9a;
  --pkt-color-grays-gray-500: #808080;
  --pkt-color-grays-gray-600: #666666;
  --pkt-color-grays-gray-700: #4d4d4d;
  --pkt-color-grays-gray-800: #333333;
  --pkt-color-grays-gray-900: #1a1a1a;
  --pkt-color-grays-gray-1000: #2c2c2c;
  --pkt-color-background-card: #ffffff;
  --pkt-color-background-default: #ffffff;
  --pkt-color-background-subtle: #f9f9f9;
  --pkt-color-background-transparent: transparent;
  --pkt-color-border-default: #2a2859;
  --pkt-color-border-beige: #d0bfae;
  --pkt-color-border-blue: #6fe9ff;
  --pkt-color-border-gray: #cccccc;
  --pkt-color-border-green: #43f8b6;
  --pkt-color-border-light-beige: #f8f0dd;
  --pkt-color-border-red: #ff8274;
  --pkt-color-border-subtle: #f2f2f2;
  --pkt-color-border-yellow: #f9c66b;
  --pkt-color-border-states-active: #1f42aa;
  --pkt-color-border-states-disabled: #b3b3b3;
  --pkt-color-border-states-focus: #e0adff;
  --pkt-color-border-states-hover: #1f42aa;
  --pkt-color-surface-default-faded-green: #e5ffe6;
  --pkt-color-surface-default-faded-red: #ffdfdc;
  --pkt-color-surface-default-gray: #f9f9f9;
  --pkt-color-surface-default-light-beige: #f8f0dd;
  --pkt-color-surface-default-light-blue: #d1f9ff;
  --pkt-color-surface-default-light-green: #c7fde9;
  --pkt-color-surface-default-red: #ffb4ac;
  --pkt-color-surface-default-yellow: #ffe7bc;
  --pkt-color-surface-strong-beige: #d0bfae;
  --pkt-color-surface-strong-blue: #6fe9ff;
  --pkt-color-surface-strong-dark-blue: #2a2859;
  --pkt-color-surface-strong-dark-green: #034b45;
  --pkt-color-surface-strong-gray: #f2f2f2;
  --pkt-color-surface-strong-green: #43f8b6;
  --pkt-color-surface-strong-light-green: #c7f6c9;
  --pkt-color-surface-strong-red: #ff8274;
  --pkt-color-surface-strong-yellow: #f9c66b;
  --pkt-color-surface-subtle-light-blue: #e5fcff;
  --pkt-color-surface-subtle-light-red: #fff2f1;
  --pkt-color-surface-subtle-pale-blue: #f1fdff;
  --pkt-color-surface-subtle-white: #ffffff;
  --pkt-color-text-body-dark: #2a2859;
  --pkt-color-text-body-default: #2a2859;
  --pkt-color-text-body-light: #ffffff;
  --pkt-color-text-placeholder: #666666;
  --pkt-color-text-action-disabled: #666666;
  --pkt-color-text-action-active: #1f42aa;
  --pkt-color-text-action-hover: #1f42aa;
  --pkt-color-text-action-normal: #2a2859;
  --color-blue: #6fe9ff;
  --color-blue-light: #b3f5ff;
  --color-blue-dark: #2a2859;
  --color-green: #43f8b6;
  --color-green-light: #c7f6c9;
  --color-green-dark: #034b45;
  --color-red: #ff8274;
  --color-red-light: #ffb4ac;
  --color-yellow: #f9c66b;
  --color-beige-light: #f8f0dd;
  --color-beige-dark: #d0bfae;
  --color-active: #1f42aa;
  --color-active-light: #b3f5ff;
  --color-hover: #1f42aa;
  --color-hover-light: #b3f5ff;
  --color-focus: #e0adff;
  --color-disabled: #4d4d4d;
  --color-disabled-light: #f9f9f9;
  --color-info: #2a2859;
  --color-success: #034b45;
  --color-warning: #774c01;
  --color-error: #96281c;
  --color-blue-dark-5: #f2f9ff;
  --color-blue-dark-10: #d9e9f2;
  --color-blue-5: #f1fdff;
  --color-blue-10: #e5fcff;
  --color-blue-60: #d1f9ff;
  --color-green-dark-5: #f2fff3;
  --color-green-dark-10: #d9f2ef;
  --color-green-10: #e5ffe6;
  --color-green-30: #c7fde9;
  --color-red-5: #fff3f2;
  --color-red-10: #ffe8e5;
  --color-red-30: #ffdfdc;
  --color-yellow-5: #fef9f0;
  --color-yellow-50: #ffe7bc;
  --color-gray-light: #f9f9f9;
  --color-gray: #f2f2f2;
  --color-gray-dark: #2c2c2c;
  --color-transparent: transparent;
  --color-white: #fff;
  --color-grayscale-10: #e6e6e6;
  --color-grayscale-20: #ccc;
  --color-grayscale-30: #b3b3b3;
  --color-grayscale-40: #9a9a9a;
  --color-grayscale-50: #808080;
  --color-grayscale-60: #666;
  --color-grayscale-70: #4d4d4d;
  --color-grayscale-80: #333;
  --color-grayscale-90: #1a1a1a;
  --color-black: #000;
}
:root .pkt-color-bg-brand-blue-100 {
  background-color: #f1fdff !important;
}
:root .pkt-color-txt-brand-blue-100 {
  color: #f1fdff !important;
}
:root .pkt-color-border-brand-blue-100 {
  border-color: #f1fdff !important;
}
:root .pkt-color-bg-brand-blue-200 {
  background-color: #e5fcff !important;
}
:root .pkt-color-txt-brand-blue-200 {
  color: #e5fcff !important;
}
:root .pkt-color-border-brand-blue-200 {
  border-color: #e5fcff !important;
}
:root .pkt-color-bg-brand-blue-300 {
  background-color: #d1f9ff !important;
}
:root .pkt-color-txt-brand-blue-300 {
  color: #d1f9ff !important;
}
:root .pkt-color-border-brand-blue-300 {
  border-color: #d1f9ff !important;
}
:root .pkt-color-bg-brand-blue-500 {
  background-color: #b3f5ff !important;
}
:root .pkt-color-txt-brand-blue-500 {
  color: #b3f5ff !important;
}
:root .pkt-color-border-brand-blue-500 {
  border-color: #b3f5ff !important;
}
:root .pkt-color-bg-brand-blue-1000 {
  background-color: #6fe9ff !important;
}
:root .pkt-color-txt-brand-blue-1000 {
  color: #6fe9ff !important;
}
:root .pkt-color-border-brand-blue-1000 {
  border-color: #6fe9ff !important;
}
:root .pkt-color-bg-brand-dark-blue-700 {
  background-color: #6a698b !important;
}
:root .pkt-color-txt-brand-dark-blue-700 {
  color: #6a698b !important;
}
:root .pkt-color-border-brand-dark-blue-700 {
  border-color: #6a698b !important;
}
:root .pkt-color-bg-brand-dark-blue-1000 {
  background-color: #2a2859 !important;
}
:root .pkt-color-txt-brand-dark-blue-1000 {
  color: #2a2859 !important;
}
:root .pkt-color-border-brand-dark-blue-1000 {
  border-color: #2a2859 !important;
}
:root .pkt-color-bg-brand-warm-blue-1000 {
  background-color: #1f42aa !important;
}
:root .pkt-color-txt-brand-warm-blue-1000 {
  color: #1f42aa !important;
}
:root .pkt-color-border-brand-warm-blue-1000 {
  border-color: #1f42aa !important;
}
:root .pkt-color-bg-brand-green-400 {
  background-color: #c7fde9 !important;
}
:root .pkt-color-txt-brand-green-400 {
  color: #c7fde9 !important;
}
:root .pkt-color-border-brand-green-400 {
  border-color: #c7fde9 !important;
}
:root .pkt-color-bg-brand-green-1000 {
  background-color: #43f8b6 !important;
}
:root .pkt-color-txt-brand-green-1000 {
  color: #43f8b6 !important;
}
:root .pkt-color-border-brand-green-1000 {
  border-color: #43f8b6 !important;
}
:root .pkt-color-bg-brand-light-green-400 {
  background-color: #e5ffe6 !important;
}
:root .pkt-color-txt-brand-light-green-400 {
  color: #e5ffe6 !important;
}
:root .pkt-color-border-brand-light-green-400 {
  border-color: #e5ffe6 !important;
}
:root .pkt-color-bg-brand-light-green-1000 {
  background-color: #c7f6c9 !important;
}
:root .pkt-color-txt-brand-light-green-1000 {
  color: #c7f6c9 !important;
}
:root .pkt-color-border-brand-light-green-1000 {
  border-color: #c7f6c9 !important;
}
:root .pkt-color-bg-brand-dark-green-1000 {
  background-color: #034b45 !important;
}
:root .pkt-color-txt-brand-dark-green-1000 {
  color: #034b45 !important;
}
:root .pkt-color-border-brand-dark-green-1000 {
  border-color: #034b45 !important;
}
:root .pkt-color-bg-brand-yellow-1000 {
  background-color: #f9c66b !important;
}
:root .pkt-color-txt-brand-yellow-1000 {
  color: #f9c66b !important;
}
:root .pkt-color-border-brand-yellow-1000 {
  border-color: #f9c66b !important;
}
:root .pkt-color-bg-brand-yellow-500 {
  background-color: #ffe7bc !important;
}
:root .pkt-color-txt-brand-yellow-500 {
  color: #ffe7bc !important;
}
:root .pkt-color-border-brand-yellow-500 {
  border-color: #ffe7bc !important;
}
:root .pkt-color-bg-brand-red-100 {
  background-color: #fff2f1 !important;
}
:root .pkt-color-txt-brand-red-100 {
  color: #fff2f1 !important;
}
:root .pkt-color-border-brand-red-100 {
  border-color: #fff2f1 !important;
}
:root .pkt-color-bg-brand-red-400 {
  background-color: #ffdfdc !important;
}
:root .pkt-color-txt-brand-red-400 {
  color: #ffdfdc !important;
}
:root .pkt-color-border-brand-red-400 {
  border-color: #ffdfdc !important;
}
:root .pkt-color-bg-brand-red-600 {
  background-color: #ffb4ac !important;
}
:root .pkt-color-txt-brand-red-600 {
  color: #ffb4ac !important;
}
:root .pkt-color-border-brand-red-600 {
  border-color: #ffb4ac !important;
}
:root .pkt-color-bg-brand-red-1000 {
  background-color: #ff8274 !important;
}
:root .pkt-color-txt-brand-red-1000 {
  color: #ff8274 !important;
}
:root .pkt-color-border-brand-red-1000 {
  border-color: #ff8274 !important;
}
:root .pkt-color-bg-brand-light-beige-1000 {
  background-color: #f8f0dd !important;
}
:root .pkt-color-txt-brand-light-beige-1000 {
  color: #f8f0dd !important;
}
:root .pkt-color-border-brand-light-beige-1000 {
  border-color: #f8f0dd !important;
}
:root .pkt-color-bg-brand-dark-beige-1000 {
  background-color: #d0bfae !important;
}
:root .pkt-color-txt-brand-dark-beige-1000 {
  color: #d0bfae !important;
}
:root .pkt-color-border-brand-dark-beige-1000 {
  border-color: #d0bfae !important;
}
:root .pkt-color-bg-brand-neutrals-white {
  background-color: #ffffff !important;
}
:root .pkt-color-txt-brand-neutrals-white {
  color: #ffffff !important;
}
:root .pkt-color-border-brand-neutrals-white {
  border-color: #ffffff !important;
}
:root .pkt-color-bg-brand-neutrals-100 {
  background-color: #f9f9f9 !important;
}
:root .pkt-color-txt-brand-neutrals-100 {
  color: #f9f9f9 !important;
}
:root .pkt-color-border-brand-neutrals-100 {
  border-color: #f9f9f9 !important;
}
:root .pkt-color-bg-brand-neutrals-200 {
  background-color: #f2f2f2 !important;
}
:root .pkt-color-txt-brand-neutrals-200 {
  color: #f2f2f2 !important;
}
:root .pkt-color-border-brand-neutrals-200 {
  border-color: #f2f2f2 !important;
}
:root .pkt-color-bg-brand-neutrals-1000 {
  background-color: #2c2c2c !important;
}
:root .pkt-color-txt-brand-neutrals-1000 {
  color: #2c2c2c !important;
}
:root .pkt-color-border-brand-neutrals-1000 {
  border-color: #2c2c2c !important;
}
:root .pkt-color-bg-brand-neutrals-black {
  background-color: #000000 !important;
}
:root .pkt-color-txt-brand-neutrals-black {
  color: #000000 !important;
}
:root .pkt-color-border-brand-neutrals-black {
  border-color: #000000 !important;
}
:root .pkt-color-bg-brand-neutrals-transparent {
  background-color: transparent !important;
}
:root .pkt-color-txt-brand-neutrals-transparent {
  color: transparent !important;
}
:root .pkt-color-border-brand-neutrals-transparent {
  border-color: transparent !important;
}
:root .pkt-color-bg-brand-purple-1000 {
  background-color: #e0adff !important;
}
:root .pkt-color-txt-brand-purple-1000 {
  color: #e0adff !important;
}
:root .pkt-color-border-brand-purple-1000 {
  border-color: #e0adff !important;
}
:root .pkt-color-bg-grays-gray-100 {
  background-color: #e6e6e6 !important;
}
:root .pkt-color-txt-grays-gray-100 {
  color: #e6e6e6 !important;
}
:root .pkt-color-border-grays-gray-100 {
  border-color: #e6e6e6 !important;
}
:root .pkt-color-bg-grays-gray-200 {
  background-color: #cccccc !important;
}
:root .pkt-color-txt-grays-gray-200 {
  color: #cccccc !important;
}
:root .pkt-color-border-grays-gray-200 {
  border-color: #cccccc !important;
}
:root .pkt-color-bg-grays-gray-300 {
  background-color: #b3b3b3 !important;
}
:root .pkt-color-txt-grays-gray-300 {
  color: #b3b3b3 !important;
}
:root .pkt-color-border-grays-gray-300 {
  border-color: #b3b3b3 !important;
}
:root .pkt-color-bg-grays-gray-400 {
  background-color: #9a9a9a !important;
}
:root .pkt-color-txt-grays-gray-400 {
  color: #9a9a9a !important;
}
:root .pkt-color-border-grays-gray-400 {
  border-color: #9a9a9a !important;
}
:root .pkt-color-bg-grays-gray-500 {
  background-color: #808080 !important;
}
:root .pkt-color-txt-grays-gray-500 {
  color: #808080 !important;
}
:root .pkt-color-border-grays-gray-500 {
  border-color: #808080 !important;
}
:root .pkt-color-bg-grays-gray-600 {
  background-color: #666666 !important;
}
:root .pkt-color-txt-grays-gray-600 {
  color: #666666 !important;
}
:root .pkt-color-border-grays-gray-600 {
  border-color: #666666 !important;
}
:root .pkt-color-bg-grays-gray-700 {
  background-color: #4d4d4d !important;
}
:root .pkt-color-txt-grays-gray-700 {
  color: #4d4d4d !important;
}
:root .pkt-color-border-grays-gray-700 {
  border-color: #4d4d4d !important;
}
:root .pkt-color-bg-grays-gray-800 {
  background-color: #333333 !important;
}
:root .pkt-color-txt-grays-gray-800 {
  color: #333333 !important;
}
:root .pkt-color-border-grays-gray-800 {
  border-color: #333333 !important;
}
:root .pkt-color-bg-grays-gray-900 {
  background-color: #1a1a1a !important;
}
:root .pkt-color-txt-grays-gray-900 {
  color: #1a1a1a !important;
}
:root .pkt-color-border-grays-gray-900 {
  border-color: #1a1a1a !important;
}
:root .pkt-color-bg-grays-gray-1000 {
  background-color: #2c2c2c !important;
}
:root .pkt-color-txt-grays-gray-1000 {
  color: #2c2c2c !important;
}
:root .pkt-color-border-grays-gray-1000 {
  border-color: #2c2c2c !important;
}
:root .pkt-color-bg-background-card {
  background-color: var(--pkt-color-background-card) !important;
}
:root .pkt-color-txt-background-card {
  color: var(--pkt-color-background-card) !important;
}
:root .pkt-color-border-background-card {
  border-color: var(--pkt-color-background-card) !important;
}
:root .pkt-color-bg-background-default {
  background-color: var(--pkt-color-background-default) !important;
}
:root .pkt-color-txt-background-default {
  color: var(--pkt-color-background-default) !important;
}
:root .pkt-color-border-background-default {
  border-color: var(--pkt-color-background-default) !important;
}
:root .pkt-color-bg-background-subtle {
  background-color: var(--pkt-color-background-subtle) !important;
}
:root .pkt-color-txt-background-subtle {
  color: var(--pkt-color-background-subtle) !important;
}
:root .pkt-color-border-background-subtle {
  border-color: var(--pkt-color-background-subtle) !important;
}
:root .pkt-color-bg-background-transparent {
  background-color: var(--pkt-color-background-transparent) !important;
}
:root .pkt-color-txt-background-transparent {
  color: var(--pkt-color-background-transparent) !important;
}
:root .pkt-color-border-background-transparent {
  border-color: var(--pkt-color-background-transparent) !important;
}
:root .pkt-color-bg-border-default {
  background-color: var(--pkt-color-border-default) !important;
}
:root .pkt-color-txt-border-default {
  color: var(--pkt-color-border-default) !important;
}
:root .pkt-color-border-border-default {
  border-color: var(--pkt-color-border-default) !important;
}
:root .pkt-color-bg-border-beige {
  background-color: var(--pkt-color-border-beige) !important;
}
:root .pkt-color-txt-border-beige {
  color: var(--pkt-color-border-beige) !important;
}
:root .pkt-color-border-border-beige {
  border-color: var(--pkt-color-border-beige) !important;
}
:root .pkt-color-bg-border-blue {
  background-color: var(--pkt-color-border-blue) !important;
}
:root .pkt-color-txt-border-blue {
  color: var(--pkt-color-border-blue) !important;
}
:root .pkt-color-border-border-blue {
  border-color: var(--pkt-color-border-blue) !important;
}
:root .pkt-color-bg-border-gray {
  background-color: var(--pkt-color-border-gray) !important;
}
:root .pkt-color-txt-border-gray {
  color: var(--pkt-color-border-gray) !important;
}
:root .pkt-color-border-border-gray {
  border-color: var(--pkt-color-border-gray) !important;
}
:root .pkt-color-bg-border-green {
  background-color: var(--pkt-color-border-green) !important;
}
:root .pkt-color-txt-border-green {
  color: var(--pkt-color-border-green) !important;
}
:root .pkt-color-border-border-green {
  border-color: var(--pkt-color-border-green) !important;
}
:root .pkt-color-bg-border-light-beige {
  background-color: var(--pkt-color-border-light-beige) !important;
}
:root .pkt-color-txt-border-light-beige {
  color: var(--pkt-color-border-light-beige) !important;
}
:root .pkt-color-border-border-light-beige {
  border-color: var(--pkt-color-border-light-beige) !important;
}
:root .pkt-color-bg-border-red {
  background-color: var(--pkt-color-border-red) !important;
}
:root .pkt-color-txt-border-red {
  color: var(--pkt-color-border-red) !important;
}
:root .pkt-color-border-border-red {
  border-color: var(--pkt-color-border-red) !important;
}
:root .pkt-color-bg-border-subtle {
  background-color: var(--pkt-color-border-subtle) !important;
}
:root .pkt-color-txt-border-subtle {
  color: var(--pkt-color-border-subtle) !important;
}
:root .pkt-color-border-border-subtle {
  border-color: var(--pkt-color-border-subtle) !important;
}
:root .pkt-color-bg-border-yellow {
  background-color: var(--pkt-color-border-yellow) !important;
}
:root .pkt-color-txt-border-yellow {
  color: var(--pkt-color-border-yellow) !important;
}
:root .pkt-color-border-border-yellow {
  border-color: var(--pkt-color-border-yellow) !important;
}
:root .pkt-color-bg-border-states-active {
  background-color: var(--pkt-color-border-states-active) !important;
}
:root .pkt-color-txt-border-states-active {
  color: var(--pkt-color-border-states-active) !important;
}
:root .pkt-color-border-border-states-active {
  border-color: var(--pkt-color-border-states-active) !important;
}
:root .pkt-color-bg-border-states-disabled {
  background-color: var(--pkt-color-border-states-disabled) !important;
}
:root .pkt-color-txt-border-states-disabled {
  color: var(--pkt-color-border-states-disabled) !important;
}
:root .pkt-color-border-border-states-disabled {
  border-color: var(--pkt-color-border-states-disabled) !important;
}
:root .pkt-color-bg-border-states-focus {
  background-color: var(--pkt-color-border-states-focus) !important;
}
:root .pkt-color-txt-border-states-focus {
  color: var(--pkt-color-border-states-focus) !important;
}
:root .pkt-color-border-border-states-focus {
  border-color: var(--pkt-color-border-states-focus) !important;
}
:root .pkt-color-bg-border-states-hover {
  background-color: var(--pkt-color-border-states-hover) !important;
}
:root .pkt-color-txt-border-states-hover {
  color: var(--pkt-color-border-states-hover) !important;
}
:root .pkt-color-border-border-states-hover {
  border-color: var(--pkt-color-border-states-hover) !important;
}
:root .pkt-color-bg-surface-default-faded-green {
  background-color: var(--pkt-color-surface-default-faded-green) !important;
}
:root .pkt-color-txt-surface-default-faded-green {
  color: var(--pkt-color-surface-default-faded-green) !important;
}
:root .pkt-color-border-surface-default-faded-green {
  border-color: var(--pkt-color-surface-default-faded-green) !important;
}
:root .pkt-color-bg-surface-default-faded-red {
  background-color: var(--pkt-color-surface-default-faded-red) !important;
}
:root .pkt-color-txt-surface-default-faded-red {
  color: var(--pkt-color-surface-default-faded-red) !important;
}
:root .pkt-color-border-surface-default-faded-red {
  border-color: var(--pkt-color-surface-default-faded-red) !important;
}
:root .pkt-color-bg-surface-default-gray {
  background-color: var(--pkt-color-surface-default-gray) !important;
}
:root .pkt-color-txt-surface-default-gray {
  color: var(--pkt-color-surface-default-gray) !important;
}
:root .pkt-color-border-surface-default-gray {
  border-color: var(--pkt-color-surface-default-gray) !important;
}
:root .pkt-color-bg-surface-default-light-beige {
  background-color: var(--pkt-color-surface-default-light-beige) !important;
}
:root .pkt-color-txt-surface-default-light-beige {
  color: var(--pkt-color-surface-default-light-beige) !important;
}
:root .pkt-color-border-surface-default-light-beige {
  border-color: var(--pkt-color-surface-default-light-beige) !important;
}
:root .pkt-color-bg-surface-default-light-blue {
  background-color: var(--pkt-color-surface-default-light-blue) !important;
}
:root .pkt-color-txt-surface-default-light-blue {
  color: var(--pkt-color-surface-default-light-blue) !important;
}
:root .pkt-color-border-surface-default-light-blue {
  border-color: var(--pkt-color-surface-default-light-blue) !important;
}
:root .pkt-color-bg-surface-default-light-green {
  background-color: var(--pkt-color-surface-default-light-green) !important;
}
:root .pkt-color-txt-surface-default-light-green {
  color: var(--pkt-color-surface-default-light-green) !important;
}
:root .pkt-color-border-surface-default-light-green {
  border-color: var(--pkt-color-surface-default-light-green) !important;
}
:root .pkt-color-bg-surface-default-red {
  background-color: var(--pkt-color-surface-default-red) !important;
}
:root .pkt-color-txt-surface-default-red {
  color: var(--pkt-color-surface-default-red) !important;
}
:root .pkt-color-border-surface-default-red {
  border-color: var(--pkt-color-surface-default-red) !important;
}
:root .pkt-color-bg-surface-default-yellow {
  background-color: var(--pkt-color-surface-default-yellow) !important;
}
:root .pkt-color-txt-surface-default-yellow {
  color: var(--pkt-color-surface-default-yellow) !important;
}
:root .pkt-color-border-surface-default-yellow {
  border-color: var(--pkt-color-surface-default-yellow) !important;
}
:root .pkt-color-bg-surface-strong-beige {
  background-color: var(--pkt-color-surface-strong-beige) !important;
}
:root .pkt-color-txt-surface-strong-beige {
  color: var(--pkt-color-surface-strong-beige) !important;
}
:root .pkt-color-border-surface-strong-beige {
  border-color: var(--pkt-color-surface-strong-beige) !important;
}
:root .pkt-color-bg-surface-strong-blue {
  background-color: var(--pkt-color-surface-strong-blue) !important;
}
:root .pkt-color-txt-surface-strong-blue {
  color: var(--pkt-color-surface-strong-blue) !important;
}
:root .pkt-color-border-surface-strong-blue {
  border-color: var(--pkt-color-surface-strong-blue) !important;
}
:root .pkt-color-bg-surface-strong-dark-blue {
  background-color: var(--pkt-color-surface-strong-dark-blue) !important;
}
:root .pkt-color-txt-surface-strong-dark-blue {
  color: var(--pkt-color-surface-strong-dark-blue) !important;
}
:root .pkt-color-border-surface-strong-dark-blue {
  border-color: var(--pkt-color-surface-strong-dark-blue) !important;
}
:root .pkt-color-bg-surface-strong-dark-green {
  background-color: var(--pkt-color-surface-strong-dark-green) !important;
}
:root .pkt-color-txt-surface-strong-dark-green {
  color: var(--pkt-color-surface-strong-dark-green) !important;
}
:root .pkt-color-border-surface-strong-dark-green {
  border-color: var(--pkt-color-surface-strong-dark-green) !important;
}
:root .pkt-color-bg-surface-strong-gray {
  background-color: var(--pkt-color-surface-strong-gray) !important;
}
:root .pkt-color-txt-surface-strong-gray {
  color: var(--pkt-color-surface-strong-gray) !important;
}
:root .pkt-color-border-surface-strong-gray {
  border-color: var(--pkt-color-surface-strong-gray) !important;
}
:root .pkt-color-bg-surface-strong-green {
  background-color: var(--pkt-color-surface-strong-green) !important;
}
:root .pkt-color-txt-surface-strong-green {
  color: var(--pkt-color-surface-strong-green) !important;
}
:root .pkt-color-border-surface-strong-green {
  border-color: var(--pkt-color-surface-strong-green) !important;
}
:root .pkt-color-bg-surface-strong-light-green {
  background-color: var(--pkt-color-surface-strong-light-green) !important;
}
:root .pkt-color-txt-surface-strong-light-green {
  color: var(--pkt-color-surface-strong-light-green) !important;
}
:root .pkt-color-border-surface-strong-light-green {
  border-color: var(--pkt-color-surface-strong-light-green) !important;
}
:root .pkt-color-bg-surface-strong-red {
  background-color: var(--pkt-color-surface-strong-red) !important;
}
:root .pkt-color-txt-surface-strong-red {
  color: var(--pkt-color-surface-strong-red) !important;
}
:root .pkt-color-border-surface-strong-red {
  border-color: var(--pkt-color-surface-strong-red) !important;
}
:root .pkt-color-bg-surface-strong-yellow {
  background-color: var(--pkt-color-surface-strong-yellow) !important;
}
:root .pkt-color-txt-surface-strong-yellow {
  color: var(--pkt-color-surface-strong-yellow) !important;
}
:root .pkt-color-border-surface-strong-yellow {
  border-color: var(--pkt-color-surface-strong-yellow) !important;
}
:root .pkt-color-bg-surface-subtle-light-blue {
  background-color: var(--pkt-color-surface-subtle-light-blue) !important;
}
:root .pkt-color-txt-surface-subtle-light-blue {
  color: var(--pkt-color-surface-subtle-light-blue) !important;
}
:root .pkt-color-border-surface-subtle-light-blue {
  border-color: var(--pkt-color-surface-subtle-light-blue) !important;
}
:root .pkt-color-bg-surface-subtle-light-red {
  background-color: var(--pkt-color-surface-subtle-light-red) !important;
}
:root .pkt-color-txt-surface-subtle-light-red {
  color: var(--pkt-color-surface-subtle-light-red) !important;
}
:root .pkt-color-border-surface-subtle-light-red {
  border-color: var(--pkt-color-surface-subtle-light-red) !important;
}
:root .pkt-color-bg-surface-subtle-pale-blue {
  background-color: var(--pkt-color-surface-subtle-pale-blue) !important;
}
:root .pkt-color-txt-surface-subtle-pale-blue {
  color: var(--pkt-color-surface-subtle-pale-blue) !important;
}
:root .pkt-color-border-surface-subtle-pale-blue {
  border-color: var(--pkt-color-surface-subtle-pale-blue) !important;
}
:root .pkt-color-bg-surface-subtle-white {
  background-color: var(--pkt-color-surface-subtle-white) !important;
}
:root .pkt-color-txt-surface-subtle-white {
  color: var(--pkt-color-surface-subtle-white) !important;
}
:root .pkt-color-border-surface-subtle-white {
  border-color: var(--pkt-color-surface-subtle-white) !important;
}
:root .pkt-color-bg-text-body-dark {
  background-color: var(--pkt-color-text-body-dark) !important;
}
:root .pkt-color-txt-text-body-dark {
  color: var(--pkt-color-text-body-dark) !important;
}
:root .pkt-color-border-text-body-dark {
  border-color: var(--pkt-color-text-body-dark) !important;
}
:root .pkt-color-bg-text-body-default {
  background-color: var(--pkt-color-text-body-default) !important;
}
:root .pkt-color-txt-text-body-default {
  color: var(--pkt-color-text-body-default) !important;
}
:root .pkt-color-border-text-body-default {
  border-color: var(--pkt-color-text-body-default) !important;
}
:root .pkt-color-bg-text-body-light {
  background-color: var(--pkt-color-text-body-light) !important;
}
:root .pkt-color-txt-text-body-light {
  color: var(--pkt-color-text-body-light) !important;
}
:root .pkt-color-border-text-body-light {
  border-color: var(--pkt-color-text-body-light) !important;
}
:root .pkt-color-bg-text-placeholder {
  background-color: var(--pkt-color-text-placeholder) !important;
}
:root .pkt-color-txt-text-placeholder {
  color: var(--pkt-color-text-placeholder) !important;
}
:root .pkt-color-border-text-placeholder {
  border-color: var(--pkt-color-text-placeholder) !important;
}
:root .pkt-color-bg-text-action-disabled {
  background-color: var(--pkt-color-text-action-disabled) !important;
}
:root .pkt-color-txt-text-action-disabled {
  color: var(--pkt-color-text-action-disabled) !important;
}
:root .pkt-color-border-text-action-disabled {
  border-color: var(--pkt-color-text-action-disabled) !important;
}
:root .pkt-color-bg-text-action-active {
  background-color: var(--pkt-color-text-action-active) !important;
}
:root .pkt-color-txt-text-action-active {
  color: var(--pkt-color-text-action-active) !important;
}
:root .pkt-color-border-text-action-active {
  border-color: var(--pkt-color-text-action-active) !important;
}
:root .pkt-color-bg-text-action-hover {
  background-color: var(--pkt-color-text-action-hover) !important;
}
:root .pkt-color-txt-text-action-hover {
  color: var(--pkt-color-text-action-hover) !important;
}
:root .pkt-color-border-text-action-hover {
  border-color: var(--pkt-color-text-action-hover) !important;
}
:root .pkt-color-bg-text-action-normal {
  background-color: var(--pkt-color-text-action-normal) !important;
}
:root .pkt-color-txt-text-action-normal {
  color: var(--pkt-color-text-action-normal) !important;
}
:root .pkt-color-border-text-action-normal {
  border-color: var(--pkt-color-text-action-normal) !important;
}
:root .bg-color-blue {
  background-color: #6fe9ff !important;
}
:root .txt-color-blue {
  color: #6fe9ff !important;
}
:root .bg-color-blue-light {
  background-color: #b3f5ff !important;
}
:root .txt-color-blue-light {
  color: #b3f5ff !important;
}
:root .bg-color-blue-dark {
  background-color: #2a2859 !important;
}
:root .txt-color-blue-dark {
  color: #2a2859 !important;
}
:root .bg-color-green {
  background-color: #43f8b6 !important;
}
:root .txt-color-green {
  color: #43f8b6 !important;
}
:root .bg-color-green-light {
  background-color: #c7f6c9 !important;
}
:root .txt-color-green-light {
  color: #c7f6c9 !important;
}
:root .bg-color-green-dark {
  background-color: #034b45 !important;
}
:root .txt-color-green-dark {
  color: #034b45 !important;
}
:root .bg-color-red {
  background-color: #ff8274 !important;
}
:root .txt-color-red {
  color: #ff8274 !important;
}
:root .bg-color-red-light {
  background-color: #ffb4ac !important;
}
:root .txt-color-red-light {
  color: #ffb4ac !important;
}
:root .bg-color-yellow {
  background-color: #f9c66b !important;
}
:root .txt-color-yellow {
  color: #f9c66b !important;
}
:root .bg-color-beige-light {
  background-color: #f8f0dd !important;
}
:root .txt-color-beige-light {
  color: #f8f0dd !important;
}
:root .bg-color-beige-dark {
  background-color: #d0bfae !important;
}
:root .txt-color-beige-dark {
  color: #d0bfae !important;
}
:root .bg-color-active {
  background-color: #1f42aa !important;
}
:root .txt-color-active {
  color: #1f42aa !important;
}
:root .bg-color-active-light {
  background-color: #b3f5ff !important;
}
:root .txt-color-active-light {
  color: #b3f5ff !important;
}
:root .bg-color-hover {
  background-color: #1f42aa !important;
}
:root .txt-color-hover {
  color: #1f42aa !important;
}
:root .bg-color-hover-light {
  background-color: #b3f5ff !important;
}
:root .txt-color-hover-light {
  color: #b3f5ff !important;
}
:root .bg-color-focus {
  background-color: #e0adff !important;
}
:root .txt-color-focus {
  color: #e0adff !important;
}
:root .bg-color-disabled {
  background-color: #4d4d4d !important;
}
:root .txt-color-disabled {
  color: #4d4d4d !important;
}
:root .bg-color-disabled-light {
  background-color: #f9f9f9 !important;
}
:root .txt-color-disabled-light {
  color: #f9f9f9 !important;
}
:root .bg-color-info {
  background-color: #2a2859 !important;
}
:root .txt-color-info {
  color: #2a2859 !important;
}
:root .bg-color-success {
  background-color: #034b45 !important;
}
:root .txt-color-success {
  color: #034b45 !important;
}
:root .bg-color-warning {
  background-color: #774c01 !important;
}
:root .txt-color-warning {
  color: #774c01 !important;
}
:root .bg-color-error {
  background-color: #96281c !important;
}
:root .txt-color-error {
  color: #96281c !important;
}
:root .bg-color-blue-dark-5 {
  background-color: #f2f9ff !important;
}
:root .txt-color-blue-dark-5 {
  color: #f2f9ff !important;
}
:root .bg-color-blue-dark-10 {
  background-color: #d9e9f2 !important;
}
:root .txt-color-blue-dark-10 {
  color: #d9e9f2 !important;
}
:root .bg-color-blue-5 {
  background-color: #f1fdff !important;
}
:root .txt-color-blue-5 {
  color: #f1fdff !important;
}
:root .bg-color-blue-10 {
  background-color: #e5fcff !important;
}
:root .txt-color-blue-10 {
  color: #e5fcff !important;
}
:root .bg-color-blue-60 {
  background-color: #d1f9ff !important;
}
:root .txt-color-blue-60 {
  color: #d1f9ff !important;
}
:root .bg-color-green-dark-5 {
  background-color: #f2fff3 !important;
}
:root .txt-color-green-dark-5 {
  color: #f2fff3 !important;
}
:root .bg-color-green-dark-10 {
  background-color: #d9f2ef !important;
}
:root .txt-color-green-dark-10 {
  color: #d9f2ef !important;
}
:root .bg-color-green-10 {
  background-color: #e5ffe6 !important;
}
:root .txt-color-green-10 {
  color: #e5ffe6 !important;
}
:root .bg-color-green-30 {
  background-color: #c7fde9 !important;
}
:root .txt-color-green-30 {
  color: #c7fde9 !important;
}
:root .bg-color-red-5 {
  background-color: #fff3f2 !important;
}
:root .txt-color-red-5 {
  color: #fff3f2 !important;
}
:root .bg-color-red-10 {
  background-color: #ffe8e5 !important;
}
:root .txt-color-red-10 {
  color: #ffe8e5 !important;
}
:root .bg-color-red-30 {
  background-color: #ffdfdc !important;
}
:root .txt-color-red-30 {
  color: #ffdfdc !important;
}
:root .bg-color-yellow-5 {
  background-color: #fef9f0 !important;
}
:root .txt-color-yellow-5 {
  color: #fef9f0 !important;
}
:root .bg-color-yellow-50 {
  background-color: #ffe7bc !important;
}
:root .txt-color-yellow-50 {
  color: #ffe7bc !important;
}
:root .bg-color-gray-light {
  background-color: #f9f9f9 !important;
}
:root .txt-color-gray-light {
  color: #f9f9f9 !important;
}
:root .bg-color-gray {
  background-color: #f2f2f2 !important;
}
:root .txt-color-gray {
  color: #f2f2f2 !important;
}
:root .bg-color-gray-dark {
  background-color: #2c2c2c !important;
}
:root .txt-color-gray-dark {
  color: #2c2c2c !important;
}
:root .bg-color-transparent {
  background-color: transparent !important;
}
:root .txt-color-transparent {
  color: transparent !important;
}
:root .bg-color-white {
  background-color: #fff !important;
}
:root .txt-color-white {
  color: #fff !important;
}
:root .bg-color-grayscale-10 {
  background-color: #e6e6e6 !important;
}
:root .txt-color-grayscale-10 {
  color: #e6e6e6 !important;
}
:root .bg-color-grayscale-20 {
  background-color: #ccc !important;
}
:root .txt-color-grayscale-20 {
  color: #ccc !important;
}
:root .bg-color-grayscale-30 {
  background-color: #b3b3b3 !important;
}
:root .txt-color-grayscale-30 {
  color: #b3b3b3 !important;
}
:root .bg-color-grayscale-40 {
  background-color: #9a9a9a !important;
}
:root .txt-color-grayscale-40 {
  color: #9a9a9a !important;
}
:root .bg-color-grayscale-50 {
  background-color: #808080 !important;
}
:root .txt-color-grayscale-50 {
  color: #808080 !important;
}
:root .bg-color-grayscale-60 {
  background-color: #666 !important;
}
:root .txt-color-grayscale-60 {
  color: #666 !important;
}
:root .bg-color-grayscale-70 {
  background-color: #4d4d4d !important;
}
:root .txt-color-grayscale-70 {
  color: #4d4d4d !important;
}
:root .bg-color-grayscale-80 {
  background-color: #333 !important;
}
:root .txt-color-grayscale-80 {
  color: #333 !important;
}
:root .bg-color-grayscale-90 {
  background-color: #1a1a1a !important;
}
:root .txt-color-grayscale-90 {
  color: #1a1a1a !important;
}
:root .bg-color-black {
  background-color: #000 !important;
}
:root .txt-color-black {
  color: #000 !important;
}
:root [data-mode=dark] {
  --pkt-color-background-card: var(--pkt-color-grays-gray-700);
  --pkt-color-background-default: var(--pkt-color-grays-gray-1000);
  --pkt-color-background-subtle: var(--pkt-color-grays-gray-1000);
  --pkt-color-background-transparent: var(--pkt-color-brand-neutrals-transparent);
  --pkt-color-border-default: var(--pkt-color-brand-neutrals-white);
  --pkt-color-border-beige: var(--pkt-color-brand-dark-beige-1000);
  --pkt-color-border-blue: var(--pkt-color-brand-blue-1000);
  --pkt-color-border-green: var(--pkt-color-brand-green-1000);
  --pkt-color-border-light-beige: var(--pkt-color-brand-light-beige-1000);
  --pkt-color-border-red: var(--pkt-color-brand-red-1000);
  --pkt-color-border-subtle: var(--pkt-color-brand-dark-blue-700);
  --pkt-color-border-yellow: var(--pkt-color-brand-yellow-1000);
  --pkt-color-border-states-active: var(--pkt-color-brand-blue-500);
  --pkt-color-border-states-disabled: var(--pkt-color-grays-gray-500);
  --pkt-color-border-states-focus: var(--pkt-color-brand-purple-1000);
  --pkt-color-border-states-hover: var(--pkt-color-brand-blue-500);
  --pkt-color-surface-default-faded-green: var(--pkt-color-brand-light-green-400);
  --pkt-color-surface-default-faded-red: var(--pkt-color-brand-red-400);
  --pkt-color-surface-default-gray: var(--pkt-color-brand-neutrals-100);
  --pkt-color-surface-default-light-beige: var(--pkt-color-brand-light-beige-1000);
  --pkt-color-surface-default-light-blue: var(--pkt-color-brand-blue-300);
  --pkt-color-surface-default-light-green: var(--pkt-color-brand-green-400);
  --pkt-color-surface-default-red: var(--pkt-color-brand-red-600);
  --pkt-color-surface-default-yellow: var(--pkt-color-brand-yellow-500);
  --pkt-color-surface-strong-beige: var(--pkt-color-brand-dark-beige-1000);
  --pkt-color-surface-strong-blue: var(--pkt-color-brand-blue-1000);
  --pkt-color-surface-strong-dark-blue: var(--pkt-color-brand-dark-blue-1000);
  --pkt-color-surface-strong-dark-green: var(--pkt-color-brand-dark-green-1000);
  --pkt-color-surface-strong-gray: var(--pkt-color-brand-neutrals-200);
  --pkt-color-surface-strong-green: var(--pkt-color-brand-green-1000);
  --pkt-color-surface-strong-light-green: var(--pkt-color-brand-light-green-1000);
  --pkt-color-surface-strong-red: var(--pkt-color-brand-red-1000);
  --pkt-color-surface-strong-yellow: var(--pkt-color-brand-yellow-1000);
  --pkt-color-surface-subtle-light-blue: var(--pkt-color-brand-blue-200);
  --pkt-color-surface-subtle-light-red: var(--pkt-color-brand-red-100);
  --pkt-color-surface-subtle-pale-blue: var(--pkt-color-brand-blue-100);
  --pkt-color-surface-subtle-white: var(--pkt-color-brand-neutrals-white);
  --pkt-color-text-body-dark: var(--pkt-color-brand-dark-blue-1000);
  --pkt-color-text-body-default: var(--pkt-color-brand-neutrals-white);
  --pkt-color-text-body-light: var(--pkt-color-brand-neutrals-white);
  --pkt-color-text-placeholder: var(--pkt-color-grays-gray-300);
  --pkt-color-text-action-disabled: var(--pkt-color-grays-gray-200);
  --pkt-color-text-action-active: var(--pkt-color-brand-blue-500);
  --pkt-color-text-action-hover: var(--pkt-color-brand-blue-500);
  --pkt-color-text-action-normal: var(--pkt-color-brand-neutrals-white);
}

/* 
 * Defaults for elementer
 *
 */
body,
h1,
h2,
h3,
h4 {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  font-size: 1rem;
}

img,
svg {
  vertical-align: middle;
}

p {
  display: block;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-y: auto;
  line-height: 1.5;
  text-rendering: optimizeSpeed;
  scroll-behavior: smooth;
}

/* 
 * Spacing
 */
.m-size-0 {
  margin: 0rem !important;
}

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

.mr-size-0 {
  margin-right: 0rem !important;
}

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

.ml-size-0 {
  margin-left: 0rem !important;
}

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

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

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

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

.pr-size-0 {
  padding-right: 0rem !important;
}

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

.pl-size-0 {
  padding-left: 0rem !important;
}

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

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

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

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

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

.mr-size-2 {
  margin-right: 0.125rem !important;
}

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

.ml-size-2 {
  margin-left: 0.125rem !important;
}

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

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

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

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

.pr-size-2 {
  padding-right: 0.125rem !important;
}

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

.pl-size-2 {
  padding-left: 0.125rem !important;
}

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

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

.gap-size-2 {
  gap: 0.125rem !important;
}

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

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

.mr-size-4 {
  margin-right: 0.25rem !important;
}

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

.ml-size-4 {
  margin-left: 0.25rem !important;
}

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

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

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

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

.pr-size-4 {
  padding-right: 0.25rem !important;
}

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

.pl-size-4 {
  padding-left: 0.25rem !important;
}

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

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

.gap-size-4 {
  gap: 0.25rem !important;
}

.m-size-6 {
  margin: 0.375rem !important;
}

.mt-size-6 {
  margin-top: 0.375rem !important;
}

.mr-size-6 {
  margin-right: 0.375rem !important;
}

.mb-size-6 {
  margin-bottom: 0.375rem !important;
}

.ml-size-6 {
  margin-left: 0.375rem !important;
}

.mx-size-6 {
  margin-right: 0.375rem !important;
  margin-left: 0.375rem !important;
}

.my-size-6 {
  margin-top: 0.375rem !important;
  margin-bottom: 0.375rem !important;
}

.p-size-6 {
  padding: 0.375rem !important;
}

.pt-size-6 {
  padding-top: 0.375rem !important;
}

.pr-size-6 {
  padding-right: 0.375rem !important;
}

.pb-size-6 {
  padding-bottom: 0.375rem !important;
}

.pl-size-6 {
  padding-left: 0.375rem !important;
}

.px-size-6 {
  padding-right: 0.375rem !important;
  padding-left: 0.375rem !important;
}

.py-size-6 {
  padding-top: 0.375rem !important;
  padding-bottom: 0.375rem !important;
}

.gap-size-6 {
  gap: 0.375rem !important;
}

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

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

.mr-size-8 {
  margin-right: 0.5rem !important;
}

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

.ml-size-8 {
  margin-left: 0.5rem !important;
}

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

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

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

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

.pr-size-8 {
  padding-right: 0.5rem !important;
}

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

.pl