/*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */

.pswp {
  --pswp-bg: #000;
  --pswp-placeholder-bg: #222;
  

  --pswp-root-z-index: 100000;
  
  --pswp-preloader-color: rgba(79, 79, 79, 0.4);
  --pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9);
  
  /* defined via js:
  --pswp-transition-duration: 333ms; */
  
  --pswp-icon-color: #fff;
  --pswp-icon-color-secondary: #4f4f4f;
  --pswp-icon-stroke-color: #4f4f4f;
  --pswp-icon-stroke-width: 2px;

  --pswp-error-text-color: var(--pswp-icon-color);
}


/*
	Styles for basic PhotoSwipe (pswp) functionality (sliding area, open/close transitions)
*/

.pswp {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: var(--pswp-root-z-index);
	display: none;
	touch-action: none;
	outline: 0;
	opacity: 0.003;
	contain: layout style size;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Prevents focus outline on the root element,
  (it may be focused initially) */
.pswp:focus {
  outline: 0;
}

.pswp * {
  box-sizing: border-box;
}

.pswp img {
  max-width: none;
}

.pswp--open {
	display: block;
}

.pswp,
.pswp__bg {
	transform: translateZ(0);
	will-change: opacity;
}

.pswp__bg {
  opacity: 0.005;
	background: var(--pswp-bg);
}

.pswp,
.pswp__scroll-wrap {
	overflow: hidden;
}

.pswp__scroll-wrap,
.pswp__bg,
.pswp__container,
.pswp__item,
.pswp__content,
.pswp__img,
.pswp__zoom-wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.pswp__img,
.pswp__zoom-wrap {
	width: auto;
	height: auto;
}

.pswp--click-to-zoom.pswp--zoom-allowed .pswp__img {
	cursor: -webkit-zoom-in;
	cursor: -moz-zoom-in;
	cursor: zoom-in;
}

.pswp--click-to-zoom.pswp--zoomed-in .pswp__img {
	cursor: move;
	cursor: -webkit-grab;
	cursor: -moz-grab;
	cursor: grab;
}

.pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active {
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing;
}

/* :active to override grabbing cursor */
.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img,
.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active,
.pswp__img {
	cursor: -webkit-zoom-out;
	cursor: -moz-zoom-out;
	cursor: zoom-out;
}


/* Prevent selection and tap highlights */
.pswp__container,
.pswp__img,
.pswp__button,
.pswp__counter {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.pswp__item {
	/* z-index for fade transition */
	z-index: 1;
	overflow: hidden;
}

.pswp__hidden {
	display: none !important;
}

/* Allow to click through pswp__content element, but not its children */
.pswp__content {
  pointer-events: none;
}
.pswp__content > * {
  pointer-events: auto;
}


/*

  PhotoSwipe UI

*/

/*
	Error message appears when image is not loaded
	(JS option errorMsg controls markup)
*/
.pswp__error-msg-container {
  display: grid;
}
.pswp__error-msg {
	margin: auto;
	font-size: 1em;
	line-height: 1;
	color: var(--pswp-error-text-color);
}

/*
class pswp__hide-on-close is applied to elements that
should hide (for example fade out) when PhotoSwipe is closed
and show (for example fade in) when PhotoSwipe is opened
 */
.pswp .pswp__hide-on-close {
	opacity: 0.005;
	will-change: opacity;
	transition: opacity var(--pswp-transition-duration) cubic-bezier(0.4, 0, 0.22, 1);
	z-index: 10; /* always overlap slide content */
	pointer-events: none; /* hidden elements should not be clickable */
}

/* class pswp--ui-visible is added when opening or closing transition starts */
.pswp--ui-visible .pswp__hide-on-close {
	opacity: 1;
	pointer-events: auto;
}

/* <button> styles, including css reset */
.pswp__button {
	position: relative;
	display: block;
	width: 50px;
	height: 60px;
	padding: 0;
	margin: 0;
	overflow: hidden;
	cursor: pointer;
	background: none;
	border: 0;
	box-shadow: none;
	opacity: 0.85;
	-webkit-appearance: none;
	-webkit-touch-callout: none;
}

.pswp__button:hover,
.pswp__button:active,
.pswp__button:focus {
  transition: none;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  opacity: 1;
}

.pswp__button:disabled {
  opacity: 0.3;
  cursor: auto;
}

.pswp__icn {
  fill: var(--pswp-icon-color);
  color: var(--pswp-icon-color-secondary);
}

.pswp__icn {
  position: absolute;
  top: 14px;
  left: 9px;
  width: 32px;
  height: 32px;
  overflow: hidden;
  pointer-events: none;
}

.pswp__icn-shadow {
  stroke: var(--pswp-icon-stroke-color);
  stroke-width: var(--pswp-icon-stroke-width);
  fill: none;
}

.pswp__icn:focus {
	outline: 0;
}

/*
	div element that matches size of large image,
	large image loads on top of it,
	used when msrc is not provided
*/
div.pswp__img--placeholder,
.pswp__img--with-bg {
	background: var(--pswp-placeholder-bg);
}

.pswp__top-bar {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 60px;
	display: flex;
  flex-direction: row;
  justify-content: flex-end;
	z-index: 10;

	/* allow events to pass through top bar itself */
	pointer-events: none !important;
}
.pswp__top-bar > * {
  pointer-events: auto;
  /* this makes transition significantly more smooth,
     even though inner elements are not animated */
  will-change: opacity;
}


/*

  Close button

*/
.pswp__button--close {
  margin-right: 6px;
}


/*

  Arrow buttons

*/
.pswp__button--arrow {
  position: absolute;
  top: 0;
  width: 75px;
  height: 100px;
  top: 50%;
  margin-top: -50px;
}

.pswp__button--arrow:disabled {
  display: none;
  cursor: default;
}

.pswp__button--arrow .pswp__icn {
  top: 50%;
  margin-top: -30px;
  width: 60px;
  height: 60px;
  background: none;
  border-radius: 0;
}

.pswp--one-slide .pswp__button--arrow {
  display: none;
}

/* hide arrows on touch screens */
.pswp--touch .pswp__button--arrow {
  visibility: hidden;
}

/* show arrows only after mouse was used */
.pswp--has_mouse .pswp__button--arrow {
  visibility: visible;
}

.pswp__button--arrow--prev {
  right: auto;
  left: 0px;
}

.pswp__button--arrow--next {
  right: 0px;
}
.pswp__button--arrow--next .pswp__icn {
  left: auto;
  right: 14px;
  /* flip horizontally */
  transform: scale(-1, 1);
}

/*

  Zoom button

*/
.pswp__button--zoom {
  display: none;
}

.pswp--zoom-allowed .pswp__button--zoom {
  display: block;
}

/* "+" => "-" */
.pswp--zoomed-in .pswp__zoom-icn-bar-v {
  display: none;
}


/*

  Loading indicator

*/
.pswp__preloader {
  position: relative;
  overflow: hidden;
  width: 50px;
  height: 60px;
  margin-right: auto;
}

.pswp__preloader .pswp__icn {
  opacity: 0;
  transition: opacity 0.2s linear;
  animation: pswp-clockwise 600ms linear infinite;
}

.pswp__preloader--active .pswp__icn {
  opacity: 0.85;
}

@keyframes pswp-clockwise {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/*

  "1 of 10" counter

*/
.pswp__counter {
  height: 30px;
  margin-top: 15px;
  margin-inline-start: 20px;
  font-size: 14px;
  line-height: 30px;
  color: var(--pswp-icon-color);
  text-shadow: 1px 1px 3px var(--pswp-icon-color-secondary);
  opacity: 0.85;
}

.pswp--one-slide .pswp__counter {
  display: none;
}

.pf-v6-screen-reader {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pf-v6-screen-reader.pf-m-full-size {
  width: 100%;
  height: 100%;
}

.pf-v6-screen-reader.pf-m-absolute {
  position: absolute;
}

.pf-v6-m-tabular-nums {
  font-variant-numeric: tabular-nums;
}

.pf-v6-m-legacy-font {
  --pf-t--global--font--family--body: var(--pf-t--global--font--family--body--legacy);
  --pf-t--global--font--family--heading: var(--pf-t--global--font--family--heading--legacy);
  --pf-t--global--font--family--mono: var(--pf-t--global--font--family--mono--legacy);
  --pf-t--global--font--weight--body: var(--pf-t--global--font--weight--body--legacy);
  --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--body--bold--legacy);
  --pf-t--global--font--weight--heading: var(--pf-t--global--font--weight--heading--legacy);
  --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--heading--bold--legacy);
}

.pf-v6-m-dir-rtl {
  --pf-v6-global--inverse--multiplier: -1;
  direction: rtl;
}

.pf-v6-m-dir-ltr {
  --pf-v6-global--inverse--multiplier: 1;
  direction: ltr;
}

:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-m-mirror-inline-rtl {
  scale: -1 1;
}

.pf-v6-m-no-motion {
  --pf-t--global--delay--400: 0ms !important;
  --pf-t--global--delay--300: 0ms !important;
  --pf-t--global--delay--200: 0ms !important;
  --pf-t--global--delay--100: 0ms !important;
  --pf-t--global--duration--600: 0ms !important;
  --pf-t--global--duration--500: 0ms !important;
  --pf-t--global--duration--400: 0ms !important;
  --pf-t--global--duration--300: 0ms !important;
  --pf-t--global--duration--200: 0ms !important;
  --pf-t--global--duration--100: 0ms !important;
  --pf-t--global--duration--50: 0ms !important;
}

@font-face {
  font-family: "Red Hat Text";
  font-style: normal;
  font-weight: 400 500;
  src: url(/static/RedHatTextVF.c33624692c8b41e36780.woff2) format("woff2-variations");
  font-display: fallback;
}

@font-face {
  font-family: "Red Hat Text";
  font-style: italic;
  font-weight: 400 500;
  src: url(/static/RedHatTextVF-Italic.078865af129336cde269.woff2) format("woff2-variations");
  font-display: fallback;
}

@font-face {
  font-family: "Red Hat Display";
  font-style: normal;
  font-weight: 400 700;
  src: url(/static/RedHatDisplayVF.18ca482120faaa701d8b.woff2) format("woff2-variations");
  font-display: fallback;
}

@font-face {
  font-family: "Red Hat Display";
  font-style: italic;
  font-weight: 400 700;
  src: url(/static/RedHatDisplayVF-Italic.813182e673c38ef5ee4b.woff2) format("woff2-variations");
  font-display: fallback;
}

@font-face {
  font-family: "Red Hat Mono";
  font-style: normal;
  font-weight: 400;
  src: url(/static/RedHatMonoVF.e4faf134e53e0f37296b.woff2) format("woff2-variations");
  font-display: fallback;
}

@font-face {
  font-family: "Red Hat Mono";
  font-style: italic;
  font-weight: 400;
  src: url(/static/RedHatMonoVF-Italic.6e3027616d8de472723c.woff2) format("woff2-variations");
  font-display: fallback;
}

@font-face {
  font-family: "pf-v6-pficon";
  src: url(/static/pf-v6-pficon.463d4ddeac4dae277fc4.woff2) format("woff2");
}

.pf-v6-pficon-zone:before,
.pf-v6-pficon-warning-triangle:before,
.pf-v6-pficon-volume:before,
.pf-v6-pficon-virtual-machine:before,
.pf-v6-pficon-users:before,
.pf-v6-pficon-user:before,
.pf-v6-pficon-unplugged:before,
.pf-v6-pficon-unlocked:before,
.pf-v6-pficon-unknown:before,
.pf-v6-pficon-trend-up:before,
.pf-v6-pficon-trend-down:before,
.pf-v6-pficon-treeview:before,
.pf-v6-pficon-topology:before,
.pf-v6-pficon-thumb-tack:before,
.pf-v6-pficon-tenant:before,
.pf-v6-pficon-task:before,
.pf-v6-pficon-storage-domain:before,
.pf-v6-pficon-spinner2:before,
.pf-v6-pficon-spinner:before,
.pf-v6-pficon-severity-undefined:before,
.pf-v6-pficon-severity-none:before,
.pf-v6-pficon-severity-moderate:before,
.pf-v6-pficon-severity-minor:before,
.pf-v6-pficon-severity-important:before,
.pf-v6-pficon-severity-critical:before,
.pf-v6-pficon-services:before,
.pf-v6-pficon-service:before,
.pf-v6-pficon-service-catalog:before,
.pf-v6-pficon-server:before,
.pf-v6-pficon-server-group:before,
.pf-v6-pficon-security:before,
.pf-v6-pficon-screen:before,
.pf-v6-pficon-save:before,
.pf-v6-pficon-running:before,
.pf-v6-pficon-resources-full:before,
.pf-v6-pficon-resources-empty:before,
.pf-v6-pficon-resources-almost-full:before,
.pf-v6-pficon-resources-almost-empty:before,
.pf-v6-pficon-resource-pool:before,
.pf-v6-pficon-repository:before,
.pf-v6-pficon-replicator:before,
.pf-v6-pficon-remove2:before,
.pf-v6-pficon-registry:before,
.pf-v6-pficon-regions:before,
.pf-v6-pficon-rebooting:before,
.pf-v6-pficon-rebalance:before,
.pf-v6-pficon-project:before,
.pf-v6-pficon-process-automation:before,
.pf-v6-pficon-private:before,
.pf-v6-pficon-print:before,
.pf-v6-pficon-port:before,
.pf-v6-pficon-plugged:before,
.pf-v6-pficon-pficon-vcenter:before,
.pf-v6-pficon-pficon-template:before,
.pf-v6-pficon-pficon-sort-common-desc:before,
.pf-v6-pficon-pficon-sort-common-asc:before,
.pf-v6-pficon-pficon-satellite:before,
.pf-v6-pficon-pficon-network-range:before,
.pf-v6-pficon-pficon-history:before,
.pf-v6-pficon-pficon-dragdrop:before,
.pf-v6-pficon-pending:before,
.pf-v6-pficon-paused:before,
.pf-v6-pficon-panel-open:before,
.pf-v6-pficon-panel-close:before,
.pf-v6-pficon-package:before,
.pf-v6-pficon-os-image:before,
.pf-v6-pficon-orders:before,
.pf-v6-pficon-optimize:before,
.pf-v6-pficon-openstack:before,
.pf-v6-pficon-openshift:before,
.pf-v6-pficon-open-drawer-right:before,
.pf-v6-pficon-on:before,
.pf-v6-pficon-on-running:before,
.pf-v6-pficon-ok:before,
.pf-v6-pficon-off:before,
.pf-v6-pficon-not-started:before,
.pf-v6-pficon-new-process:before,
.pf-v6-pficon-network:before,
.pf-v6-pficon-namespaces:before,
.pf-v6-pficon-multicluster:before,
.pf-v6-pficon-monitoring:before,
.pf-v6-pficon-module:before,
.pf-v6-pficon-migration:before,
.pf-v6-pficon-middleware:before,
.pf-v6-pficon-messages:before,
.pf-v6-pficon-memory:before,
.pf-v6-pficon-maintenance:before,
.pf-v6-pficon-locked:before,
.pf-v6-pficon-key:before,
.pf-v6-pficon-integration:before,
.pf-v6-pficon-infrastructure:before,
.pf-v6-pficon-info:before,
.pf-v6-pficon-in-progress:before,
.pf-v6-pficon-import:before,
.pf-v6-pficon-home:before,
.pf-v6-pficon-history:before,
.pf-v6-pficon-help:before,
.pf-v6-pficon-globe-route:before,
.pf-v6-pficon-folder-open:before,
.pf-v6-pficon-folder-close:before,
.pf-v6-pficon-flavor:before,
.pf-v6-pficon-filter:before,
.pf-v6-pficon-export:before,
.pf-v6-pficon-error-circle-o:before,
.pf-v6-pficon-equalizer:before,
.pf-v6-pficon-enterprise:before,
.pf-v6-pficon-enhancement:before,
.pf-v6-pficon-edit:before,
.pf-v6-pficon-domain:before,
.pf-v6-pficon-disconnected:before,
.pf-v6-pficon-degraded:before,
.pf-v6-pficon-data-source:before,
.pf-v6-pficon-data-sink:before,
.pf-v6-pficon-data-processor:before,
.pf-v6-pficon-critical-risk:before,
.pf-v6-pficon-cpu:before,
.pf-v6-pficon-container-node:before,
.pf-v6-pficon-connected:before,
.pf-v6-pficon-cluster:before,
.pf-v6-pficon-cloud-tenant:before,
.pf-v6-pficon-cloud-security:before,
.pf-v6-pficon-close:before,
.pf-v6-pficon-chat:before,
.pf-v6-pficon-catalog:before,
.pf-v6-pficon-bundle:before,
.pf-v6-pficon-builder-image:before,
.pf-v6-pficon-build:before,
.pf-v6-pficon-blueprint:before,
.pf-v6-pficon-bell:before,
.pf-v6-pficon-automation:before,
.pf-v6-pficon-attention-bell:before,
.pf-v6-pficon-asleep:before,
.pf-v6-pficon-arrow:before,
.pf-v6-pficon-applications:before,
.pf-v6-pficon-ansible-tower:before,
.pf-v6-pficon-add-circle-o:before {
  font-family: "pf-v6-pficon";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  text-decoration-line: none;
  text-transform: none;
}

.pf-v6-pficon-add-circle-o:before {
  content: "\e61b";
}

.pf-v6-pficon-ansible-tower:before {
  content: "\e950";
}

.pf-v6-pficon-applications:before {
  content: "\e936";
}

.pf-v6-pficon-arrow:before {
  content: "\e929";
}

.pf-v6-pficon-asleep:before {
  content: "\e92e";
}

.pf-v6-pficon-attention-bell:before {
  content: "\e951";
}

.pf-v6-pficon-automation:before {
  content: "\e937";
}

.pf-v6-pficon-bell:before {
  content: "\e952";
}

.pf-v6-pficon-blueprint:before {
  content: "\e915";
}

.pf-v6-pficon-build:before {
  content: "\e902";
}

.pf-v6-pficon-builder-image:before {
  content: "\e800";
}

.pf-v6-pficon-bundle:before {
  content: "\e918";
}

.pf-v6-pficon-catalog:before {
  content: "\e953";
}

.pf-v6-pficon-chat:before {
  content: "\e954";
}

.pf-v6-pficon-close:before {
  content: "\e60b";
}

.pf-v6-pficon-cloud-security:before {
  content: "\e903";
}

.pf-v6-pficon-cloud-tenant:before {
  content: "\e904";
}

.pf-v6-pficon-cluster:before {
  content: "\e620";
}

.pf-v6-pficon-connected:before {
  content: "\e938";
}

.pf-v6-pficon-container-node:before {
  content: "\e621";
}

.pf-v6-pficon-cpu:before {
  content: "\e927";
}

.pf-v6-pficon-critical-risk:before {
  content: "\e976";
}

.pf-v6-pficon-data-processor:before {
  content: "\e97b";
}

.pf-v6-pficon-data-sink:before {
  content: "\e978";
}

.pf-v6-pficon-data-source:before {
  content: "\e979";
}

.pf-v6-pficon-degraded:before {
  content: "\e91b";
}

.pf-v6-pficon-disconnected:before {
  content: "\e955";
}

.pf-v6-pficon-domain:before {
  content: "\e919";
}

.pf-v6-pficon-edit:before {
  content: "\e60a";
}

.pf-v6-pficon-enhancement:before {
  content: "\e93a";
}

.pf-v6-pficon-enterprise:before {
  content: "\e906";
}

.pf-v6-pficon-equalizer:before {
  content: "\e956";
}

.pf-v6-pficon-error-circle-o:before {
  content: "\e926";
}

.pf-v6-pficon-export:before {
  content: "\e616";
}

.pf-v6-pficon-filter:before {
  content: "\e943";
}

.pf-v6-pficon-flavor:before {
  content: "\e957";
}

.pf-v6-pficon-folder-close:before {
  content: "\e607";
}

.pf-v6-pficon-folder-open:before {
  content: "\e606";
}

.pf-v6-pficon-globe-route:before {
  content: "\e958";
}

.pf-v6-pficon-help:before {
  content: "\e605";
}

.pf-v6-pficon-history:before {
  content: "\e617";
}

.pf-v6-pficon-home:before {
  content: "\e618";
}

.pf-v6-pficon-import:before {
  content: "\e615";
}

.pf-v6-pficon-in-progress:before {
  content: "\e933";
}

.pf-v6-pficon-info:before {
  content: "\e92b";
}

.pf-v6-pficon-infrastructure:before {
  content: "\e93d";
}

.pf-v6-pficon-integration:before {
  content: "\e948";
}

.pf-v6-pficon-key:before {
  content: "\e924";
}

.pf-v6-pficon-locked:before {
  content: "\e923";
}

.pf-v6-pficon-maintenance:before {
  content: "\e932";
}

.pf-v6-pficon-memory:before {
  content: "\e908";
}

.pf-v6-pficon-messages:before {
  content: "\e603";
}

.pf-v6-pficon-middleware:before {
  content: "\e917";
}

.pf-v6-pficon-migration:before {
  content: "\e931";
}

.pf-v6-pficon-module:before {
  content: "\e959";
}

.pf-v6-pficon-monitoring:before {
  content: "\e95a";
}

.pf-v6-pficon-multicluster:before {
  content: "\e97c";
}

.pf-v6-pficon-namespaces:before {
  content: "\e95b";
}

.pf-v6-pficon-network:before {
  content: "\e909";
}

.pf-v6-pficon-new-process:before {
  content: "\e95c";
}

.pf-v6-pficon-not-started:before {
  content: "\e95d";
}

.pf-v6-pficon-off:before {
  content: "\e92d";
}

.pf-v6-pficon-ok:before {
  content: "\e602";
}

.pf-v6-pficon-on-running:before {
  content: "\e925";
}

.pf-v6-pficon-on:before {
  content: "\e92c";
}

.pf-v6-pficon-open-drawer-right:before {
  content: "\e977";
}

.pf-v6-pficon-openshift:before {
  content: "\e95e";
}

.pf-v6-pficon-openstack:before {
  content: "\e95f";
}

.pf-v6-pficon-optimize:before {
  content: "\e93e";
}

.pf-v6-pficon-orders:before {
  content: "\e93f";
}

.pf-v6-pficon-os-image:before {
  content: "\e960";
}

.pf-v6-pficon-package:before {
  content: "\e961";
}

.pf-v6-pficon-panel-close:before {
  content: "\e962";
}

.pf-v6-pficon-panel-open:before {
  content: "\e963";
}

.pf-v6-pficon-paused:before {
  content: "\e92f";
}

.pf-v6-pficon-pending:before {
  content: "\e964";
}

.pf-v6-pficon-pficon-dragdrop:before {
  content: "\e965";
}

.pf-v6-pficon-pficon-history:before {
  content: "\e966";
}

.pf-v6-pficon-pficon-network-range:before {
  content: "\e967";
}

.pf-v6-pficon-pficon-satellite:before {
  content: "\e968";
}

.pf-v6-pficon-pficon-sort-common-asc:before {
  content: "\e94e";
}

.pf-v6-pficon-pficon-sort-common-desc:before {
  content: "\e94f";
}

.pf-v6-pficon-pficon-template:before {
  content: "\e94c";
}

.pf-v6-pficon-pficon-vcenter:before {
  content: "\e969";
}

.pf-v6-pficon-plugged:before {
  content: "\e96a";
}

.pf-v6-pficon-port:before {
  content: "\e96b";
}

.pf-v6-pficon-print:before {
  content: "\e612";
}

.pf-v6-pficon-private:before {
  content: "\e914";
}

.pf-v6-pficon-process-automation:before {
  content: "\e949";
}

.pf-v6-pficon-project:before {
  content: "\e96c";
}

.pf-v6-pficon-rebalance:before {
  content: "\e91c";
}

.pf-v6-pficon-rebooting:before {
  content: "\e96d";
}

.pf-v6-pficon-regions:before {
  content: "\e90a";
}

.pf-v6-pficon-registry:before {
  content: "\e623";
}

.pf-v6-pficon-remove2:before {
  content: "\e96e";
}

.pf-v6-pficon-replicator:before {
  content: "\e624";
}

.pf-v6-pficon-repository:before {
  content: "\e90b";
}

.pf-v6-pficon-resource-pool:before {
  content: "\e90c";
}

.pf-v6-pficon-resources-almost-empty:before {
  content: "\e91d";
}

.pf-v6-pficon-resources-almost-full:before {
  content: "\e912";
}

.pf-v6-pficon-resources-empty:before {
  content: "\e96f";
}

.pf-v6-pficon-resources-full:before {
  content: "\e913";
}

.pf-v6-pficon-running:before {
  content: "\e970";
}

.pf-v6-pficon-save:before {
  content: "\e601";
}

.pf-v6-pficon-screen:before {
  content: "\e971";
}

.pf-v6-pficon-security:before {
  content: "\e946";
}

.pf-v6-pficon-server-group:before {
  content: "\e91a";
}

.pf-v6-pficon-server:before {
  content: "\e90d";
}

.pf-v6-pficon-service-catalog:before {
  content: "\e972";
}

.pf-v6-pficon-service:before {
  content: "\e61e";
}

.pf-v6-pficon-services:before {
  content: "\e947";
}

.pf-v6-pficon-severity-critical:before {
  content: "\e97e";
}

.pf-v6-pficon-severity-important:before {
  content: "\e97f";
}

.pf-v6-pficon-severity-minor:before {
  content: "\e980";
}

.pf-v6-pficon-severity-moderate:before {
  content: "\e981";
}

.pf-v6-pficon-severity-none:before {
  content: "\e982";
}

.pf-v6-pficon-severity-undefined:before {
  content: "\e983";
}

.pf-v6-pficon-spinner:before {
  content: "\e973";
}

.pf-v6-pficon-spinner2:before {
  content: "\e613";
}

.pf-v6-pficon-storage-domain:before {
  content: "\e90e";
}

.pf-v6-pficon-task:before {
  content: "\e974";
}

.pf-v6-pficon-tenant:before {
  content: "\e916";
}

.pf-v6-pficon-thumb-tack:before {
  content: "\e920";
}

.pf-v6-pficon-topology:before {
  content: "\e608";
}

.pf-v6-pficon-treeview:before {
  content: "\e97d";
}

.pf-v6-pficon-trend-down:before {
  content: "\e900";
}

.pf-v6-pficon-trend-up:before {
  content: "\e901";
}

.pf-v6-pficon-unknown:before {
  content: "\e935";
}

.pf-v6-pficon-unlocked:before {
  content: "\e922";
}

.pf-v6-pficon-unplugged:before {
  content: "\e942";
}

.pf-v6-pficon-user:before {
  content: "\e91e";
}

.pf-v6-pficon-users:before {
  content: "\e91f";
}

.pf-v6-pficon-virtual-machine:before {
  content: "\e90f";
}

.pf-v6-pficon-volume:before {
  content: "\e910";
}

.pf-v6-pficon-warning-triangle:before {
  content: "\e975";
}

.pf-v6-pficon-zone:before {
  content: "\e911";
}

.pf-v6-svg {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

:root {
  --pf-v6-global--inverse--multiplier: 1;
  --pf-t--color--black: #000000;
  --pf-t--color--blue--10: #e0f0ff;
  --pf-t--color--blue--20: #b9dafc;
  --pf-t--color--blue--30: #92c5f9;
  --pf-t--color--blue--40: #4394e5;
  --pf-t--color--blue--50: #0066cc;
  --pf-t--color--blue--60: #004d99;
  --pf-t--color--blue--70: #003366;
  --pf-t--color--gray--10: #f2f2f2;
  --pf-t--color--gray--20: #e0e0e0;
  --pf-t--color--gray--30: #c7c7c7;
  --pf-t--color--gray--40: #a3a3a3;
  --pf-t--color--gray--50: #707070;
  --pf-t--color--gray--60: #4d4d4d;
  --pf-t--color--gray--70: #383838;
  --pf-t--color--gray--80: #292929;
  --pf-t--color--gray--90: #1f1f1f;
  --pf-t--color--gray--95: #151515;
  --pf-t--color--green--10: #e9f7df;
  --pf-t--color--green--20: #d1f1bb;
  --pf-t--color--green--30: #afdc8f;
  --pf-t--color--green--40: #87bb62;
  --pf-t--color--green--50: #63993d;
  --pf-t--color--green--60: #3d7317;
  --pf-t--color--green--70: #204d00;
  --pf-t--color--orange--10: #ffe8cc;
  --pf-t--color--orange--20: #fccb8f;
  --pf-t--color--orange--30: #f8ae54;
  --pf-t--color--orange--40: #f5921b;
  --pf-t--color--orange--50: #ca6c0f;
  --pf-t--color--orange--60: #9e4a06;
  --pf-t--color--orange--70: #732e00;
  --pf-t--color--purple--10: #ece6ff;
  --pf-t--color--purple--20: #d0c5f4;
  --pf-t--color--purple--30: #b6a6e9;
  --pf-t--color--purple--40: #876fd4;
  --pf-t--color--purple--50: #5e40be;
  --pf-t--color--purple--60: #3d2785;
  --pf-t--color--purple--70: #21134d;
  --pf-t--color--red--10: #fce3e3;
  --pf-t--color--red--20: #fbc5c5;
  --pf-t--color--red--30: #f9a8a8;
  --pf-t--color--red--40: #f56e6e;
  --pf-t--color--red--50: #ee0000;
  --pf-t--color--red--60: #a60000;
  --pf-t--color--red--70: #5f0000;
  --pf-t--color--red-orange--10: #ffe3d9;
  --pf-t--color--red-orange--20: #fbbea8;
  --pf-t--color--red-orange--30: #f89b78;
  --pf-t--color--red-orange--40: #f4784a;
  --pf-t--color--red-orange--50: #f0561d;
  --pf-t--color--red-orange--60: #b1380b;
  --pf-t--color--red-orange--70: #731f00;
  --pf-t--color--teal--10: #daf2f2;
  --pf-t--color--teal--20: #b9e5e5;
  --pf-t--color--teal--30: #9ad8d8;
  --pf-t--color--teal--40: #63bdbd;
  --pf-t--color--teal--50: #37a3a3;
  --pf-t--color--teal--60: #147878;
  --pf-t--color--teal--70: #004d4d;
  --pf-t--color--white: #ffffff;
  --pf-t--color--yellow--10: #fff4cc;
  --pf-t--color--yellow--20: #ffe072;
  --pf-t--color--yellow--30: #ffcc17;
  --pf-t--color--yellow--40: #dca614;
  --pf-t--color--yellow--50: #b98412;
  --pf-t--color--yellow--60: #96640f;
  --pf-t--color--yellow--70: #73480b;
  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
  --pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500);
  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
  --pf-t--global--border--radius--0: 0px;
  --pf-t--global--border--radius--100: 4px;
  --pf-t--global--border--radius--200: 6px;
  --pf-t--global--border--radius--300: 16px;
  --pf-t--global--border--radius--400: 24px;
  --pf-t--global--border--radius--500: 999px;
  --pf-t--global--border--width--100: 1px;
  --pf-t--global--border--width--200: 2px;
  --pf-t--global--border--width--300: 3px;
  --pf-t--global--box-shadow--X--100: -10px;
  --pf-t--global--box-shadow--X--200: -4px;
  --pf-t--global--box-shadow--X--300: -1px;
  --pf-t--global--box-shadow--X--400: 0px;
  --pf-t--global--box-shadow--X--50: -20px;
  --pf-t--global--box-shadow--X--500: 1px;
  --pf-t--global--box-shadow--X--600: 4px;
  --pf-t--global--box-shadow--X--700: 10px;
  --pf-t--global--box-shadow--X--800: 20px;
  --pf-t--global--box-shadow--Y--100: -10px;
  --pf-t--global--box-shadow--Y--200: -4px;
  --pf-t--global--box-shadow--Y--300: -1px;
  --pf-t--global--box-shadow--Y--400: 0px;
  --pf-t--global--box-shadow--Y--50: -20px;
  --pf-t--global--box-shadow--Y--500: 1px;
  --pf-t--global--box-shadow--Y--600: 4px;
  --pf-t--global--box-shadow--Y--700: 10px;
  --pf-t--global--box-shadow--Y--800: 20px;
  --pf-t--global--box-shadow--blur--100: 4px;
  --pf-t--global--box-shadow--blur--200: 9px;
  --pf-t--global--box-shadow--blur--300: 20px;
  --pf-t--global--box-shadow--color--100: rgba(41, 41, 41, 0.1500);
  --pf-t--global--box-shadow--color--200: rgba(41, 41, 41, 0.2000);
  --pf-t--global--box-shadow--spread--100: 0px;
  --pf-t--global--box-shadow--spread--200: -4px;
  --pf-t--global--box-shadow--spread--300: -8px;
  --pf-t--global--box-shadow--spread--400: -20px;
  --pf-t--global--breakpoint--100: 0rem;
  --pf-t--global--breakpoint--200: 36rem;
  --pf-t--global--breakpoint--250: 40rem;
  --pf-t--global--breakpoint--300: 48rem;
  --pf-t--global--breakpoint--350: 60rem;
  --pf-t--global--breakpoint--400: 62rem;
  --pf-t--global--breakpoint--500: 75rem;
  --pf-t--global--breakpoint--550: 80rem;
  --pf-t--global--breakpoint--600: 90.625rem;
  --pf-t--global--delay--100: 0ms;
  --pf-t--global--delay--200: 50ms;
  --pf-t--global--delay--300: 100ms;
  --pf-t--global--delay--400: 7000ms;
  --pf-t--global--duration--100: 100ms;
  --pf-t--global--duration--200: 200ms;
  --pf-t--global--duration--300: 300ms;
  --pf-t--global--duration--400: 400ms;
  --pf-t--global--duration--50: 50ms;
  --pf-t--global--duration--500: 500ms;
  --pf-t--global--duration--600: 600ms;
  --pf-t--global--font--family--100: "Red Hat Text", "RedHatText", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif;
  --pf-t--global--font--family--200: "Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif;
  --pf-t--global--font--family--300: "Red Hat Mono", "RedHatMono", "Courier New", Courier, monospace;
  --pf-t--global--font--line-height--100: 1.3;
  --pf-t--global--font--line-height--200: 1.5;
  --pf-t--global--font--size--100: 0.75rem;
  --pf-t--global--font--size--200: 0.875rem;
  --pf-t--global--font--size--300: 1rem;
  --pf-t--global--font--size--400: 1.125rem;
  --pf-t--global--font--size--500: 1.25rem;
  --pf-t--global--font--size--600: 1.5rem;
  --pf-t--global--font--size--700: 1.75rem;
  --pf-t--global--font--size--800: 2.25rem;
  --pf-t--global--font--weight--100: 400;
  --pf-t--global--font--weight--200: 500;
  --pf-t--global--font--weight--300: 500;
  --pf-t--global--font--weight--400: 700;
  --pf-t--global--icon--size--100: 0.75rem;
  --pf-t--global--icon--size--200: 0.875rem;
  --pf-t--global--icon--size--250: 1rem;
  --pf-t--global--icon--size--300: 1.5rem;
  --pf-t--global--icon--size--400: 3.5rem;
  --pf-t--global--icon--size--500: 6rem;
  --pf-t--global--spacer--100: 0.25rem;
  --pf-t--global--spacer--200: 0.5rem;
  --pf-t--global--spacer--300: 1rem;
  --pf-t--global--spacer--400: 1.5rem;
  --pf-t--global--spacer--500: 2rem;
  --pf-t--global--spacer--600: 3rem;
  --pf-t--global--spacer--700: 4rem;
  --pf-t--global--spacer--800: 5rem;
  --pf-t--global--text-decoration--line--100: none;
  --pf-t--global--text-decoration--line--200: underline;
  --pf-t--global--text-decoration--style--100: solid;
  --pf-t--global--text-decoration--style--200: dashed;
  --pf-t--global--timing-function--100: cubic-bezier(.4, 0, .7, .2);
  --pf-t--global--timing-function--200: cubic-bezier(.4, 0, .2, 1);
  --pf-t--global--timing-function--300: cubic-bezier(0, 0, .2, 1);
  --pf-t--global--z-index--100: 100;
  --pf-t--global--z-index--200: 200;
  --pf-t--global--z-index--300: 300;
  --pf-t--global--z-index--400: 400;
  --pf-t--global--z-index--500: 500;
  --pf-t--global--z-index--600: 600;
  --pf-t--global--background--color--100: var(--pf-t--color--white);
  --pf-t--global--background--color--200: var(--pf-t--color--gray--10);
  --pf-t--global--background--color--300: var(--pf-t--color--gray--20);
  --pf-t--global--background--color--400: var(--pf-t--color--gray--80);
  --pf-t--global--background--color--450: var(--pf-t--color--gray--70);
  --pf-t--global--background--color--action--plain--clicked: var(--pf-t--global--background--color--600);
  --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--background--color--600);
  --pf-t--global--background--color--backdrop--default: var(--pf-t--global--background--color--500);
  --pf-t--global--background--color--highlight--100: var(--pf-t--color--yellow--30);
  --pf-t--global--background--color--highlight--200: var(--pf-t--color--yellow--40);
  --pf-t--global--background--color--tertiary--default: var(--pf-t--global--background--color--600);
  --pf-t--global--border--color--100: var(--pf-t--color--gray--30);
  --pf-t--global--border--color--200: var(--pf-t--color--gray--40);
  --pf-t--global--border--color--300: var(--pf-t--color--gray--50);
  --pf-t--global--border--color--50: var(--pf-t--color--gray--20);
  --pf-t--global--border--radius--large: var(--pf-t--global--border--radius--400);
  --pf-t--global--border--radius--medium: var(--pf-t--global--border--radius--300);
  --pf-t--global--border--radius--pill: var(--pf-t--global--border--radius--500);
  --pf-t--global--border--radius--sharp: var(--pf-t--global--border--radius--0);
  --pf-t--global--border--radius--small: var(--pf-t--global--border--radius--200);
  --pf-t--global--border--radius--tiny: var(--pf-t--global--border--radius--100);
  --pf-t--global--border--width--action--clicked: var(--pf-t--global--border--width--200);
  --pf-t--global--border--width--action--default: var(--pf-t--global--border--width--100);
  --pf-t--global--border--width--action--hover: var(--pf-t--global--border--width--200);
  --pf-t--global--border--width--box--clicked: var(--pf-t--global--border--width--200);
  --pf-t--global--border--width--box--default: var(--pf-t--global--border--width--100);
  --pf-t--global--border--width--box--hover: var(--pf-t--global--border--width--100);
  --pf-t--global--border--width--box--status--default: var(--pf-t--global--border--width--200);
  --pf-t--global--border--width--box--status--read: var(--pf-t--global--border--width--100);
  --pf-t--global--border--width--control--clicked: var(--pf-t--global--border--width--200);
  --pf-t--global--border--width--control--default: var(--pf-t--global--border--width--100);
  --pf-t--global--border--width--control--hover: var(--pf-t--global--border--width--100);
  --pf-t--global--border--width--divider--clicked: var(--pf-t--global--border--width--100);
  --pf-t--global--border--width--divider--default: var(--pf-t--global--border--width--100);
  --pf-t--global--border--width--divider--hover: var(--pf-t--global--border--width--100);
  --pf-t--global--border--width--extra-strong: var(--pf-t--global--border--width--300);
  --pf-t--global--border--width--regular: var(--pf-t--global--border--width--100);
  --pf-t--global--border--width--strong: var(--pf-t--global--border--width--200);
  --pf-t--global--box-shadow--X--lg--bottom: var(--pf-t--global--box-shadow--X--400);
  --pf-t--global--box-shadow--X--lg--default: var(--pf-t--global--box-shadow--X--400);
  --pf-t--global--box-shadow--X--lg--left: var(--pf-t--global--box-shadow--X--50);
  --pf-t--global--box-shadow--X--lg--right: var(--pf-t--global--box-shadow--X--800);
  --pf-t--global--box-shadow--X--lg--top: var(--pf-t--global--box-shadow--X--400);
  --pf-t--global--box-shadow--X--md--bottom: var(--pf-t--global--box-shadow--X--400);
  --pf-t--global--box-shadow--X--md--default: var(--pf-t--global--box-shadow--X--400);
  --pf-t--global--box-shadow--X--md--left: var(--pf-t--global--box-shadow--X--100);
  --pf-t--global--box-shadow--X--md--right: var(--pf-t--global--box-shadow--X--700);
  --pf-t--global--box-shadow--X--md--top: var(--pf-t--global--box-shadow--X--400);
  --pf-t--global--box-shadow--X--sm--bottom: var(--pf-t--global--box-shadow--X--400);
  --pf-t--global--box-shadow--X--sm--default: var(--pf-t--global--box-shadow--X--400);
  --pf-t--global--box-shadow--X--sm--left: var(--pf-t--global--box-shadow--X--200);
  --pf-t--global--box-shadow--X--sm--right: var(--pf-t--global--box-shadow--X--600);
  --pf-t--global--box-shadow--X--sm--top: var(--pf-t--global--box-shadow--X--400);
  --pf-t--global--box-shadow--Y--lg--bottom: var(--pf-t--global--box-shadow--Y--800);
  --pf-t--global--box-shadow--Y--lg--default: var(--pf-t--global--box-shadow--Y--700);
  --pf-t--global--box-shadow--Y--lg--left: var(--pf-t--global--box-shadow--Y--400);
  --pf-t--global--box-shadow--Y--lg--right: var(--pf-t--global--box-shadow--Y--400);
  --pf-t--global--box-shadow--Y--lg--top: var(--pf-t--global--box-shadow--Y--50);
  --pf-t--global--box-shadow--Y--md--bottom: var(--pf-t--global--box-shadow--Y--700);
  --pf-t--global--box-shadow--Y--md--default: var(--pf-t--global--box-shadow--Y--600);
  --pf-t--global--box-shadow--Y--md--left: var(--pf-t--global--box-shadow--Y--400);
  --pf-t--global--box-shadow--Y--md--right: var(--pf-t--global--box-shadow--Y--400);
  --pf-t--global--box-shadow--Y--md--top: var(--pf-t--global--box-shadow--Y--100);
  --pf-t--global--box-shadow--Y--sm--bottom: var(--pf-t--global--box-shadow--Y--600);
  --pf-t--global--box-shadow--Y--sm--default: var(--pf-t--global--box-shadow--Y--500);
  --pf-t--global--box-shadow--Y--sm--left: var(--pf-t--global--box-shadow--Y--400);
  --pf-t--global--box-shadow--Y--sm--right: var(--pf-t--global--box-shadow--Y--400);
  --pf-t--global--box-shadow--Y--sm--top: var(--pf-t--global--box-shadow--Y--200);
  --pf-t--global--box-shadow--blur--lg: var(--pf-t--global--box-shadow--blur--300);
  --pf-t--global--box-shadow--blur--md: var(--pf-t--global--box-shadow--blur--200);
  --pf-t--global--box-shadow--blur--sm: var(--pf-t--global--box-shadow--blur--100);
  --pf-t--global--box-shadow--color--lg--default: var(--pf-t--global--box-shadow--color--100);
  --pf-t--global--box-shadow--color--lg--directional: var(--pf-t--global--box-shadow--color--200);
  --pf-t--global--box-shadow--color--md--default: var(--pf-t--global--box-shadow--color--100);
  --pf-t--global--box-shadow--color--md--directional: var(--pf-t--global--box-shadow--color--100);
  --pf-t--global--box-shadow--color--sm--default: var(--pf-t--global--box-shadow--color--100);
  --pf-t--global--box-shadow--color--sm--directional: var(--pf-t--global--box-shadow--color--200);
  --pf-t--global--box-shadow--spread--lg--default: var(--pf-t--global--box-shadow--spread--100);
  --pf-t--global--box-shadow--spread--lg--directional: var(--pf-t--global--box-shadow--spread--400);
  --pf-t--global--box-shadow--spread--md--default: var(--pf-t--global--box-shadow--spread--100);
  --pf-t--global--box-shadow--spread--md--directional: var(--pf-t--global--box-shadow--spread--300);
  --pf-t--global--box-shadow--spread--sm--default: var(--pf-t--global--box-shadow--spread--100);
  --pf-t--global--box-shadow--spread--sm--directional: var(--pf-t--global--box-shadow--spread--200);
  --pf-t--global--breakpoint--2xl: var(--pf-t--global--breakpoint--600);
  --pf-t--global--breakpoint--height--2xl: var(--pf-t--global--breakpoint--550);
  --pf-t--global--breakpoint--height--lg: var(--pf-t--global--breakpoint--300);
  --pf-t--global--breakpoint--height--md: var(--pf-t--global--breakpoint--250);
  --pf-t--global--breakpoint--height--sm: var(--pf-t--global--breakpoint--100);
  --pf-t--global--breakpoint--height--xl: var(--pf-t--global--breakpoint--350);
  --pf-t--global--breakpoint--lg: var(--pf-t--global--breakpoint--400);
  --pf-t--global--breakpoint--md: var(--pf-t--global--breakpoint--300);
  --pf-t--global--breakpoint--sm: var(--pf-t--global--breakpoint--200);
  --pf-t--global--breakpoint--xl: var(--pf-t--global--breakpoint--500);
  --pf-t--global--breakpoint--xs: var(--pf-t--global--breakpoint--100);
  --pf-t--global--color--brand--100: var(--pf-t--color--blue--40);
  --pf-t--global--color--brand--200: var(--pf-t--color--blue--50);
  --pf-t--global--color--brand--300: var(--pf-t--color--blue--60);
  --pf-t--global--color--disabled--100: var(--pf-t--color--gray--30);
  --pf-t--global--color--disabled--200: var(--pf-t--color--gray--40);
  --pf-t--global--color--disabled--300: var(--pf-t--color--gray--60);
  --pf-t--global--color--favorite--100: var(--pf-t--color--yellow--30);
  --pf-t--global--color--favorite--200: var(--pf-t--color--yellow--40);
  --pf-t--global--color--nonstatus--blue--100: var(--pf-t--color--blue--20);
  --pf-t--global--color--nonstatus--blue--200: var(--pf-t--color--blue--30);
  --pf-t--global--color--nonstatus--blue--300: var(--pf-t--color--blue--40);
  --pf-t--global--color--nonstatus--gray--100: var(--pf-t--color--gray--20);
  --pf-t--global--color--nonstatus--gray--200: var(--pf-t--color--gray--30);
  --pf-t--global--color--nonstatus--gray--300: var(--pf-t--color--gray--40);
  --pf-t--global--color--nonstatus--green--100: var(--pf-t--color--green--20);
  --pf-t--global--color--nonstatus--green--200: var(--pf-t--color--green--30);
  --pf-t--global--color--nonstatus--green--300: var(--pf-t--color--green--40);
  --pf-t--global--color--nonstatus--orange--100: var(--pf-t--color--orange--20);
  --pf-t--global--color--nonstatus--orange--200: var(--pf-t--color--orange--30);
  --pf-t--global--color--nonstatus--orange--300: var(--pf-t--color--orange--40);
  --pf-t--global--color--nonstatus--orangered--100: var(--pf-t--color--red-orange--20);
  --pf-t--global--color--nonstatus--orangered--200: var(--pf-t--color--red-orange--30);
  --pf-t--global--color--nonstatus--orangered--300: var(--pf-t--color--red-orange--40);
  --pf-t--global--color--nonstatus--purple--100: var(--pf-t--color--purple--20);
  --pf-t--global--color--nonstatus--purple--200: var(--pf-t--color--purple--30);
  --pf-t--global--color--nonstatus--purple--300: var(--pf-t--color--purple--40);
  --pf-t--global--color--nonstatus--red--100: var(--pf-t--color--red--20);
  --pf-t--global--color--nonstatus--red--200: var(--pf-t--color--red--30);
  --pf-t--global--color--nonstatus--red--300: var(--pf-t--color--red--40);
  --pf-t--global--color--nonstatus--teal--100: var(--pf-t--color--teal--20);
  --pf-t--global--color--nonstatus--teal--200: var(--pf-t--color--teal--30);
  --pf-t--global--color--nonstatus--teal--300: var(--pf-t--color--teal--40);
  --pf-t--global--color--nonstatus--yellow--100: var(--pf-t--color--yellow--20);
  --pf-t--global--color--nonstatus--yellow--200: var(--pf-t--color--yellow--30);
  --pf-t--global--color--nonstatus--yellow--300: var(--pf-t--color--yellow--40);
  --pf-t--global--color--severity--critical--100: var(--pf-t--color--red-orange--60);
  --pf-t--global--color--severity--important--100: var(--pf-t--color--orange--50);
  --pf-t--global--color--severity--minor--100: var(--pf-t--color--gray--50);
  --pf-t--global--color--severity--moderate--100: var(--pf-t--color--yellow--40);
  --pf-t--global--color--severity--none--100: var(--pf-t--color--blue--40);
  --pf-t--global--color--severity--undefined--100: var(--pf-t--color--gray--30);
  --pf-t--global--color--status--custom--100: var(--pf-t--color--teal--60);
  --pf-t--global--color--status--custom--200: var(--pf-t--color--teal--70);
  --pf-t--global--color--status--danger--100: var(--pf-t--color--red-orange--60);
  --pf-t--global--color--status--danger--200: var(--pf-t--color--red-orange--70);
  --pf-t--global--color--status--danger--300: var(--pf-t--color--red-orange--70);
  --pf-t--global--color--status--info--100: var(--pf-t--color--purple--50);
  --pf-t--global--color--status--info--200: var(--pf-t--color--purple--60);
  --pf-t--global--color--status--success--100: var(--pf-t--color--green--60);
  --pf-t--global--color--status--success--200: var(--pf-t--color--green--70);
  --pf-t--global--color--status--warning--100: var(--pf-t--color--yellow--30);
  --pf-t--global--color--status--warning--200: var(--pf-t--color--yellow--40);
  --pf-t--global--color--status--warning--300: var(--pf-t--color--yellow--50);
  --pf-t--global--font--family--body: var(--pf-t--global--font--family--100);
  --pf-t--global--font--family--heading: var(--pf-t--global--font--family--200);
  --pf-t--global--font--family--mono: var(--pf-t--global--font--family--300);
  --pf-t--global--font--line-height--body: var(--pf-t--global--font--line-height--200);
  --pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--100);
  --pf-t--global--font--size--2xl: var(--pf-t--global--font--size--600);
  --pf-t--global--font--size--3xl: var(--pf-t--global--font--size--700);
  --pf-t--global--font--size--4xl: var(--pf-t--global--font--size--800);
  --pf-t--global--font--size--lg: var(--pf-t--global--font--size--400);
  --pf-t--global--font--size--md: var(--pf-t--global--font--size--300);
  --pf-t--global--font--size--sm: var(--pf-t--global--font--size--200);
  --pf-t--global--font--size--xl: var(--pf-t--global--font--size--500);
  --pf-t--global--font--size--xs: var(--pf-t--global--font--size--100);
  --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--200);
  --pf-t--global--font--weight--body--default: var(--pf-t--global--font--weight--100);
  --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--400);
  --pf-t--global--font--weight--heading--default: var(--pf-t--global--font--weight--300);
  --pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
  --pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
  --pf-t--global--icon--color--300: var(--pf-t--color--white);
  --pf-t--global--icon--size--2xl: var(--pf-t--global--icon--size--400);
  --pf-t--global--icon--size--3xl: var(--pf-t--global--icon--size--500);
  --pf-t--global--icon--size--lg: var(--pf-t--global--icon--size--250);
  --pf-t--global--icon--size--md: var(--pf-t--global--icon--size--200);
  --pf-t--global--icon--size--sm: var(--pf-t--global--icon--size--100);
  --pf-t--global--icon--size--xl: var(--pf-t--global--icon--size--300);
  --pf-t--global--motion--delay--default: var(--pf-t--global--delay--300);
  --pf-t--global--motion--delay--long: var(--pf-t--global--delay--400);
  --pf-t--global--motion--delay--none: var(--pf-t--global--delay--100);
  --pf-t--global--motion--delay--short: var(--pf-t--global--delay--200);
  --pf-t--global--motion--duration--2xl: var(--pf-t--global--duration--500);
  --pf-t--global--motion--duration--3xl: var(--pf-t--global--duration--600);
  --pf-t--global--motion--duration--lg: var(--pf-t--global--duration--300);
  --pf-t--global--motion--duration--md: var(--pf-t--global--duration--200);
  --pf-t--global--motion--duration--sm: var(--pf-t--global--duration--100);
  --pf-t--global--motion--duration--xl: var(--pf-t--global--duration--400);
  --pf-t--global--motion--duration--xs: var(--pf-t--global--duration--50);
  --pf-t--global--motion--timing-function--accelerate: var(--pf-t--global--timing-function--100);
  --pf-t--global--motion--timing-function--decelerate: var(--pf-t--global--timing-function--300);
  --pf-t--global--motion--timing-function--default: var(--pf-t--global--timing-function--200);
  --pf-t--global--spacer--2xl: var(--pf-t--global--spacer--600);
  --pf-t--global--spacer--3xl: var(--pf-t--global--spacer--700);
  --pf-t--global--spacer--4xl: var(--pf-t--global--spacer--800);
  --pf-t--global--spacer--lg: var(--pf-t--global--spacer--400);
  --pf-t--global--spacer--md: var(--pf-t--global--spacer--300);
  --pf-t--global--spacer--sm: var(--pf-t--global--spacer--200);
  --pf-t--global--spacer--xl: var(--pf-t--global--spacer--500);
  --pf-t--global--spacer--xs: var(--pf-t--global--spacer--100);
  --pf-t--global--text--color--100: var(--pf-t--color--gray--95);
  --pf-t--global--text--color--200: var(--pf-t--color--gray--60);
  --pf-t--global--text--color--300: var(--pf-t--color--white);
  --pf-t--global--text--color--400: var(--pf-t--color--red-orange--40);
  --pf-t--global--text--color--link--100: var(--pf-t--color--blue--50);
  --pf-t--global--text--color--link--200: var(--pf-t--color--blue--60);
  --pf-t--global--text--color--link--300: var(--pf-t--color--purple--50);
  --pf-t--global--text-decoration--editable-text--line--default: var(--pf-t--global--text-decoration--line--200);
  --pf-t--global--text-decoration--editable-text--line--hover: var(--pf-t--global--text-decoration--line--200);
  --pf-t--global--text-decoration--editable-text--style--default: var(--pf-t--global--text-decoration--style--200);
  --pf-t--global--text-decoration--editable-text--style--hover: var(--pf-t--global--text-decoration--style--200);
  --pf-t--global--text-decoration--help-text--line--default: var(--pf-t--global--text-decoration--line--200);
  --pf-t--global--text-decoration--help-text--line--hover: var(--pf-t--global--text-decoration--line--200);
  --pf-t--global--text-decoration--help-text--style--default: var(--pf-t--global--text-decoration--style--200);
  --pf-t--global--text-decoration--help-text--style--hover: var(--pf-t--global--text-decoration--style--200);
  --pf-t--global--text-decoration--link--line--default: var(--pf-t--global--text-decoration--line--200);
  --pf-t--global--text-decoration--link--line--hover: var(--pf-t--global--text-decoration--line--200);
  --pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--100);
  --pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--100);
  --pf-t--global--z-index--2xl: var(--pf-t--global--z-index--600);
  --pf-t--global--z-index--lg: var(--pf-t--global--z-index--400);
  --pf-t--global--z-index--md: var(--pf-t--global--z-index--300);
  --pf-t--global--z-index--sm: var(--pf-t--global--z-index--200);
  --pf-t--global--z-index--xl: var(--pf-t--global--z-index--500);
  --pf-t--global--z-index--xs: var(--pf-t--global--z-index--100);
  --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--100);
  --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--100);
  --pf-t--global--background--color--control--read-only: var(--pf-t--global--background--color--200);
  --pf-t--global--background--color--disabled--default: var(--pf-t--global--color--disabled--100);
  --pf-t--global--background--color--floating--clicked: var(--pf-t--global--background--color--200);
  --pf-t--global--background--color--floating--default: var(--pf-t--global--background--color--100);
  --pf-t--global--background--color--floating--hover: var(--pf-t--global--background--color--200);
  --pf-t--global--background--color--highlight--clicked: var(--pf-t--global--background--color--highlight--200);
  --pf-t--global--background--color--highlight--default: var(--pf-t--global--background--color--highlight--100);
  --pf-t--global--background--color--inverse--clicked: var(--pf-t--global--background--color--450);
  --pf-t--global--background--color--inverse--default: var(--pf-t--global--background--color--400);
  --pf-t--global--background--color--inverse--hover: var(--pf-t--global--background--color--450);
  --pf-t--global--background--color--primary--clicked: var(--pf-t--global--background--color--200);
  --pf-t--global--background--color--primary--default: var(--pf-t--global--background--color--100);
  --pf-t--global--background--color--primary--hover: var(--pf-t--global--background--color--200);
  --pf-t--global--background--color--secondary--clicked: var(--pf-t--global--background--color--300);
  --pf-t--global--background--color--secondary--default: var(--pf-t--global--background--color--200);
  --pf-t--global--background--color--secondary--hover: var(--pf-t--global--background--color--300);
  --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--200);
  --pf-t--global--border--color--control--read-only: var(--pf-t--global--border--color--50);
  --pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
  --pf-t--global--border--color--disabled: var(--pf-t--global--color--disabled--200);
  --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
  --pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--color--nonstatus--blue--300);
  --pf-t--global--border--color--nonstatus--blue--default: var(--pf-t--global--color--nonstatus--blue--200);
  --pf-t--global--border--color--nonstatus--blue--hover: var(--pf-t--global--color--nonstatus--blue--300);
  --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--color--nonstatus--gray--300);
  --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--color--nonstatus--gray--200);
  --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--color--nonstatus--gray--300);
  --pf-t--global--border--color--nonstatus--green--clicked: var(--pf-t--global--color--nonstatus--green--300);
  --pf-t--global--border--color--nonstatus--green--default: var(--pf-t--global--color--nonstatus--green--200);
  --pf-t--global--border--color--nonstatus--green--hover: var(--pf-t--global--color--nonstatus--green--300);
  --pf-t--global--border--color--nonstatus--orange--clicked: var(--pf-t--global--color--nonstatus--orange--300);
  --pf-t--global--border--color--nonstatus--orange--default: var(--pf-t--global--color--nonstatus--orange--200);
  --pf-t--global--border--color--nonstatus--orange--hover: var(--pf-t--global--color--nonstatus--orange--300);
  --pf-t--global--border--color--nonstatus--orangered--clicked: var(--pf-t--global--color--nonstatus--orangered--300);
  --pf-t--global--border--color--nonstatus--orangered--default: var(--pf-t--global--color--nonstatus--orangered--200);
  --pf-t--global--border--color--nonstatus--orangered--hover: var(--pf-t--global--color--nonstatus--orangered--300);
  --pf-t--global--border--color--nonstatus--purple--clicked: var(--pf-t--global--color--nonstatus--purple--300);
  --pf-t--global--border--color--nonstatus--purple--default: var(--pf-t--global--color--nonstatus--purple--200);
  --pf-t--global--border--color--nonstatus--purple--hover: var(--pf-t--global--color--nonstatus--purple--300);
  --pf-t--global--border--color--nonstatus--red--clicked: var(--pf-t--global--color--nonstatus--red--300);
  --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--200);
  --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--color--nonstatus--red--300);
  --pf-t--global--border--color--nonstatus--teal--clicked: var(--pf-t--global--color--nonstatus--teal--300);
  --pf-t--global--border--color--nonstatus--teal--default: var(--pf-t--global--color--nonstatus--teal--200);
  --pf-t--global--border--color--nonstatus--teal--hover: var(--pf-t--global--color--nonstatus--teal--300);
  --pf-t--global--border--color--nonstatus--yellow--clicked: var(--pf-t--global--color--nonstatus--yellow--300);
  --pf-t--global--border--color--nonstatus--yellow--default: var(--pf-t--global--color--nonstatus--yellow--200);
  --pf-t--global--border--color--nonstatus--yellow--hover: var(--pf-t--global--color--nonstatus--yellow--300);
  --pf-t--global--border--color--on-secondary: var(--pf-t--global--border--color--300);
  --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
  --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
  --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
  --pf-t--global--color--brand--clicked: var(--pf-t--global--color--brand--300);
  --pf-t--global--color--brand--default: var(--pf-t--global--color--brand--200);
  --pf-t--global--color--brand--hover: var(--pf-t--global--color--brand--300);
  --pf-t--global--color--favorite--clicked: var(--pf-t--global--color--favorite--200);
  --pf-t--global--color--favorite--default: var(--pf-t--global--color--favorite--100);
  --pf-t--global--color--favorite--hover: var(--pf-t--global--color--favorite--200);
  --pf-t--global--color--nonstatus--blue--clicked: var(--pf-t--global--color--nonstatus--blue--200);
  --pf-t--global--color--nonstatus--blue--default: var(--pf-t--global--color--nonstatus--blue--100);
  --pf-t--global--color--nonstatus--blue--hover: var(--pf-t--global--color--nonstatus--blue--200);
  --pf-t--global--color--nonstatus--gray--clicked: var(--pf-t--global--color--nonstatus--gray--200);
  --pf-t--global--color--nonstatus--gray--default: var(--pf-t--global--color--nonstatus--gray--100);
  --pf-t--global--color--nonstatus--gray--hover: var(--pf-t--global--color--nonstatus--gray--200);
  --pf-t--global--color--nonstatus--green--clicked: var(--pf-t--global--color--nonstatus--green--200);
  --pf-t--global--color--nonstatus--green--default: var(--pf-t--global--color--nonstatus--green--100);
  --pf-t--global--color--nonstatus--green--hover: var(--pf-t--global--color--nonstatus--green--200);
  --pf-t--global--color--nonstatus--orange--clicked: var(--pf-t--global--color--nonstatus--orange--200);
  --pf-t--global--color--nonstatus--orange--default: var(--pf-t--global--color--nonstatus--orange--100);
  --pf-t--global--color--nonstatus--orange--hover: var(--pf-t--global--color--nonstatus--orange--200);
  --pf-t--global--color--nonstatus--orangered--clicked: var(--pf-t--global--color--nonstatus--orangered--200);
  --pf-t--global--color--nonstatus--orangered--default: var(--pf-t--global--color--nonstatus--orangered--100);
  --pf-t--global--color--nonstatus--orangered--hover: var(--pf-t--global--color--nonstatus--orangered--200);
  --pf-t--global--color--nonstatus--purple--clicked: var(--pf-t--global--color--nonstatus--purple--200);
  --pf-t--global--color--nonstatus--purple--default: var(--pf-t--global--color--nonstatus--purple--100);
  --pf-t--global--color--nonstatus--purple--hover: var(--pf-t--global--color--nonstatus--purple--200);
  --pf-t--global--color--nonstatus--red--clicked: var(--pf-t--global--color--nonstatus--red--200);
  --pf-t--global--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--100);
  --pf-t--global--color--nonstatus--red--hover: var(--pf-t--global--color--nonstatus--red--200);
  --pf-t--global--color--nonstatus--teal--clicked: var(--pf-t--global--color--nonstatus--teal--200);
  --pf-t--global--color--nonstatus--teal--default: var(--pf-t--global--color--nonstatus--teal--100);
  --pf-t--global--color--nonstatus--teal--hover: var(--pf-t--global--color--nonstatus--teal--200);
  --pf-t--global--color--nonstatus--yellow--clicked: var(--pf-t--global--color--nonstatus--yellow--200);
  --pf-t--global--color--nonstatus--yellow--default: var(--pf-t--global--color--nonstatus--yellow--100);
  --pf-t--global--color--nonstatus--yellow--hover: var(--pf-t--global--color--nonstatus--yellow--200);
  --pf-t--global--color--status--custom--clicked: var(--pf-t--global--color--status--custom--200);
  --pf-t--global--color--status--custom--default: var(--pf-t--global--color--status--custom--100);
  --pf-t--global--color--status--custom--hover: var(--pf-t--global--color--status--custom--200);
  --pf-t--global--color--status--danger--clicked: var(--pf-t--global--color--status--danger--200);
  --pf-t--global--color--status--danger--default: var(--pf-t--global--color--status--danger--100);
  --pf-t--global--color--status--danger--hover: var(--pf-t--global--color--status--danger--200);
  --pf-t--global--color--status--info--clicked: var(--pf-t--global--color--status--info--200);
  --pf-t--global--color--status--info--default: var(--pf-t--global--color--status--info--100);
  --pf-t--global--color--status--info--hover: var(--pf-t--global--color--status--info--200);
  --pf-t--global--color--status--success--clicked: var(--pf-t--global--color--status--success--200);
  --pf-t--global--color--status--success--default: var(--pf-t--global--color--status--success--100);
  --pf-t--global--color--status--success--hover: var(--pf-t--global--color--status--success--200);
  --pf-t--global--color--status--warning--clicked: var(--pf-t--global--color--status--warning--200);
  --pf-t--global--color--status--warning--default: var(--pf-t--global--color--status--warning--100);
  --pf-t--global--color--status--warning--hover: var(--pf-t--global--color--status--warning--200);
  --pf-t--global--font--size--body--default: var(--pf-t--global--font--size--sm);
  --pf-t--global--font--size--body--lg: var(--pf-t--global--font--size--md);
  --pf-t--global--font--size--body--sm: var(--pf-t--global--font--size--xs);
  --pf-t--global--font--size--heading--h1: var(--pf-t--global--font--size--2xl);
  --pf-t--global--font--size--heading--h2: var(--pf-t--global--font--size--xl);
  --pf-t--global--font--size--heading--h3: var(--pf-t--global--font--size--lg);
  --pf-t--global--font--size--heading--h4: var(--pf-t--global--font--size--md);
  --pf-t--global--font--size--heading--h5: var(--pf-t--global--font--size--md);
  --pf-t--global--font--size--heading--h6: var(--pf-t--global--font--size--md);
  --pf-t--global--icon--color--disabled: var(--pf-t--global--color--disabled--200);
  --pf-t--global--icon--color--inverse: var(--pf-t--global--icon--color--300);
  --pf-t--global--icon--color--on-disabled: var(--pf-t--global--color--disabled--300);
  --pf-t--global--icon--color--regular: var(--pf-t--global--icon--color--100);
  --pf-t--global--icon--color--severity--critical--default: var(--pf-t--global--color--severity--critical--100);
  --pf-t--global--icon--color--severity--important--default: var(--pf-t--global--color--severity--important--100);
  --pf-t--global--icon--color--severity--minor--default: var(--pf-t--global--color--severity--minor--100);
  --pf-t--global--icon--color--severity--moderate--default: var(--pf-t--global--color--severity--moderate--100);
  --pf-t--global--icon--color--severity--none--default: var(--pf-t--global--color--severity--none--100);
  --pf-t--global--icon--color--severity--undefined--default: var(--pf-t--global--color--severity--undefined--100);
  --pf-t--global--icon--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
  --pf-t--global--icon--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
  --pf-t--global--icon--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
  --pf-t--global--icon--color--subtle: var(--pf-t--global--icon--color--200);
  --pf-t--global--icon--size--font--2xl: var(--pf-t--global--font--size--2xl);
  --pf-t--global--icon--size--font--3xl: var(--pf-t--global--font--size--3xl);
  --pf-t--global--icon--size--font--4xl: var(--pf-t--global--font--size--4xl);
  --pf-t--global--icon--size--font--lg: var(--pf-t--global--font--size--lg);
  --pf-t--global--icon--size--font--md: var(--pf-t--global--font--size--md);
  --pf-t--global--icon--size--font--sm: var(--pf-t--global--font--size--sm);
  --pf-t--global--icon--size--font--xl: var(--pf-t--global--font--size--xl);
  --pf-t--global--icon--size--font--xs: var(--pf-t--global--font--size--xs);
  --pf-t--global--motion--duration--fade--default: var(--pf-t--global--motion--duration--md);
  --pf-t--global--motion--duration--fade--long: var(--pf-t--global--motion--duration--lg);
  --pf-t--global--motion--duration--fade--short: var(--pf-t--global--motion--duration--sm);
  --pf-t--global--motion--duration--icon--default: var(--pf-t--global--motion--duration--sm);
  --pf-t--global--motion--duration--icon--long: var(--pf-t--global--motion--duration--md);
  --pf-t--global--motion--duration--icon--short: var(--pf-t--global--motion--duration--xs);
  --pf-t--global--motion--duration--slide-in--default: var(--pf-t--global--motion--duration--xl);
  --pf-t--global--motion--duration--slide-in--long: var(--pf-t--global--motion--duration--2xl);
  --pf-t--global--motion--duration--slide-in--short: var(--pf-t--global--motion--duration--lg);
  --pf-t--global--motion--duration--slide-out--default: var(--pf-t--global--motion--duration--xl);
  --pf-t--global--motion--duration--slide-out--long: var(--pf-t--global--motion--duration--2xl);
  --pf-t--global--motion--duration--slide-out--short: var(--pf-t--global--motion--duration--lg);
  --pf-t--global--spacer--action--horizontal--compact: var(--pf-t--global--spacer--md);
  --pf-t--global--spacer--action--horizontal--default: var(--pf-t--global--spacer--lg);
  --pf-t--global--spacer--action--horizontal--plain--compact: var(--pf-t--global--spacer--xs);
  --pf-t--global--spacer--action--horizontal--plain--default: var(--pf-t--global--spacer--sm);
  --pf-t--global--spacer--action--horizontal--spacious: var(--pf-t--global--spacer--xl);
  --pf-t--global--spacer--control--horizontal--compact: var(--pf-t--global--spacer--sm);
  --pf-t--global--spacer--control--horizontal--default: var(--pf-t--global--spacer--md);
  --pf-t--global--spacer--control--horizontal--plain: var(--pf-t--global--spacer--sm);
  --pf-t--global--spacer--control--horizontal--spacious: var(--pf-t--global--spacer--lg);
  --pf-t--global--spacer--control--vertical--compact: var(--pf-t--global--spacer--xs);
  --pf-t--global--spacer--control--vertical--default: var(--pf-t--global--spacer--sm);
  --pf-t--global--spacer--control--vertical--plain: var(--pf-t--global--spacer--sm);
  --pf-t--global--spacer--control--vertical--spacious: var(--pf-t--global--spacer--md);
  --pf-t--global--spacer--gap--action-to-action--default: var(--pf-t--global--spacer--md);
  --pf-t--global--spacer--gap--action-to-action--plain: var(--pf-t--global--spacer--xs);
  --pf-t--global--spacer--gap--control-to-control--default: var(--pf-t--global--spacer--xs);
  --pf-t--global--spacer--gap--group--horizontal: var(--pf-t--global--spacer--md);
  --pf-t--global--spacer--gap--group--vertical: var(--pf-t--global--spacer--sm);
  --pf-t--global--spacer--gap--group-to-group--horizontal--compact: var(--pf-t--global--spacer--sm);
  --pf-t--global--spacer--gap--group-to-group--horizontal--default: var(--pf-t--global--spacer--2xl);
  --pf-t--global--spacer--gap--group-to-group--vertical--compact: var(--pf-t--global--spacer--md);
  --pf-t--global--spacer--gap--group-to-group--vertical--default: var(--pf-t--global--spacer--lg);
  --pf-t--global--spacer--gap--text-to-element--compact: var(--pf-t--global--spacer--xs);
  --pf-t--global--spacer--gap--text-to-element--default: var(--pf-t--global--spacer--sm);
  --pf-t--global--spacer--gutter--default: var(--pf-t--global--spacer--md);
  --pf-t--global--spacer--inset--page-chrome: var(--pf-t--global--spacer--lg);
  --pf-t--global--text--color--disabled: var(--pf-t--global--color--disabled--200);
  --pf-t--global--text--color--inverse: var(--pf-t--global--text--color--300);
  --pf-t--global--text--color--link--default: var(--pf-t--global--text--color--link--100);
  --pf-t--global--text--color--link--hover: var(--pf-t--global--text--color--link--200);
  --pf-t--global--text--color--link--visited: var(--pf-t--global--text--color--link--300);
  --pf-t--global--text--color--on-disabled: var(--pf-t--global--color--disabled--300);
  --pf-t--global--text--color--on-highlight: var(--pf-t--global--text--color--100);
  --pf-t--global--text--color--regular: var(--pf-t--global--text--color--100);
  --pf-t--global--text--color--required: var(--pf-t--global--text--color--400);
  --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
  --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
  --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
  --pf-t--global--text--color--subtle: var(--pf-t--global--text--color--200);
  --pf-t--global--text-decoration--offset--default: var(--pf-t--global--spacer--xs);
  --pf-t--global--text-decoration--width--default: var(--pf-t--global--border--width--regular);
  --pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default);
  --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
  --pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
  --pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default);
  --pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover);
  --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
  --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
  --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
  --pf-t--global--border--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
  --pf-t--global--border--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
  --pf-t--global--border--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
  --pf-t--global--border--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
  --pf-t--global--border--color--status--info--default: var(--pf-t--global--color--status--info--default);
  --pf-t--global--border--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
  --pf-t--global--border--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
  --pf-t--global--border--color--status--success--default: var(--pf-t--global--color--status--success--default);
  --pf-t--global--border--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
  --pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default);
  --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
  --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default);
  --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover);
  --pf-t--global--color--status--unread--clicked: var(--pf-t--global--color--brand--clicked);
  --pf-t--global--color--status--unread--default: var(--pf-t--global--color--brand--default);
  --pf-t--global--color--status--unread--hover: var(--pf-t--global--color--brand--hover);
  --pf-t--global--icon--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
  --pf-t--global--icon--color--brand--default: var(--pf-t--global--color--brand--default);
  --pf-t--global--icon--color--brand--hover: var(--pf-t--global--color--brand--hover);
  --pf-t--global--icon--color--favorite--clicked: var(--pf-t--global--color--favorite--clicked);
  --pf-t--global--icon--color--favorite--default: var(--pf-t--global--color--favorite--default);
  --pf-t--global--icon--color--favorite--hover: var(--pf-t--global--color--favorite--hover);
  --pf-t--global--icon--color--nonstatus--on-blue--clicked: var(--pf-t--global--icon--color--regular);
  --pf-t--global--icon--color--nonstatus--on-blue--default: var(--pf-t--global--icon--color--regular);
  --pf-t--global--icon--color--nonstatus--on-blue--hover: var(--pf-t--global--icon--color--regular);
  --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--regular);
  --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--regular);
  --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--regular);
  --pf-t--global--icon--color--nonstatus--on-green--clicked: var(--pf-t--global--icon--color--regular);
  --pf-t--global--icon--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--regular);
  --pf-t--global--icon--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--regular);
  --pf-t--global--icon--color--nonstatus--on-orange--clicked: var(--pf-t--global--icon--color--regular);
  --pf-t--global--icon--color--nonstatus--on-orange--default: var(--pf-t--global--icon--color--regular);
  --pf-t--global--icon--color--nonstatus--on-orange--hover: var(--pf-t--global--icon--color--regular);
  --pf-t--global--icon--color--nonstatus--on-orangered--clicked: var(--pf-t--global--icon--color--regular);
  --pf-t--global--icon--color--nonstatus--on-orangered--default: var(--pf-t--global--icon--color--regular);
  --pf-t--global--icon--color--nonstatus--on-orangered--hover: var(--pf-t--global--icon--color--regular);
  --pf-t--global--icon--color--nonstatus--on-purple--clicked: var(--pf-t--global--icon--color--regular);
  --pf-t--global--icon--color--nonstatus--on-purple--default: var(--pf-t--global--icon--color--regular);
  --pf-t--global--icon--color--nonstatus--on-purple--hover: var(--pf-t--global--icon--color--regular);
  --pf-t--global--icon--color--nonstatus--on-red--clicked: var(--pf-t--global--icon--color--regular);
  --pf-t--global--icon--color--nonstatus--on-red--default: var(--pf-t--global--icon--color--regular);
  --pf-t--global--icon--color--nonstatus--on-red--hover: var(--pf-t--global--icon--color--regular);
  --pf-t--global--icon--color--nonstatus--on-teal--clicked: var(--pf-t--global--icon--color--regular);
  --pf-t--global--icon--color--nonstatus--on-teal--default: var(--pf-t--global--icon--color--regular);
  --pf-t--global--icon--color--nonstatus--on-teal--hover: var(--pf-t--global--icon--color--regular);
  --pf-t--global--icon--color--nonstatus--on-yellow--clicked: var(--pf-t--global--icon--color--regular);
  --pf-t--global--icon--color--nonstatus--on-yellow--default: var(--pf-t--global--icon--color--regular);
  --pf-t--global--icon--color--nonstatus--on-yellow--hover: var(--pf-t--global--icon--color--regular);
  --pf-t--global--icon--color--on-brand--clicked: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--on-brand--hover: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
  --pf-t--global--icon--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
  --pf-t--global--icon--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
  --pf-t--global--icon--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
  --pf-t--global--icon--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
  --pf-t--global--icon--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
  --pf-t--global--icon--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
  --pf-t--global--icon--color--status--info--default: var(--pf-t--global--color--status--info--default);
  --pf-t--global--icon--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
  --pf-t--global--icon--color--status--on-custom--clicked: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--status--on-custom--default: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--status--on-custom--hover: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--status--on-danger--default: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--status--on-danger--hover: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--status--on-info--clicked: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--status--on-info--default: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--status--on-info--hover: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--status--on-success--clicked: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--status--on-success--default: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--status--on-success--hover: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--status--on-warning--clicked: var(--pf-t--global--icon--color--regular);
  --pf-t--global--icon--color--status--on-warning--default: var(--pf-t--global--icon--color--regular);
  --pf-t--global--icon--color--status--on-warning--hover: var(--pf-t--global--icon--color--regular);
  --pf-t--global--icon--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
  --pf-t--global--icon--color--status--success--default: var(--pf-t--global--color--status--success--default);
  --pf-t--global--icon--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
  --pf-t--global--icon--color--status--unread--on-attention--clicked: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--status--unread--on-attention--default: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--status--unread--on-attention--hover: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--status--unread--on-default--clicked: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--status--unread--on-default--default: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--status--unread--on-default--hover: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--size--font--body--default: var(--pf-t--global--font--size--body--default);
  --pf-t--global--icon--size--font--body--lg: var(--pf-t--global--font--size--body--lg);
  --pf-t--global--icon--size--font--body--sm: var(--pf-t--global--font--size--body--sm);
  --pf-t--global--icon--size--font--heading--h1: var(--pf-t--global--font--size--heading--h1);
  --pf-t--global--icon--size--font--heading--h2: var(--pf-t--global--font--size--heading--h2);
  --pf-t--global--icon--size--font--heading--h3: var(--pf-t--global--font--size--heading--h3);
  --pf-t--global--icon--size--font--heading--h4: var(--pf-t--global--font--size--heading--h4);
  --pf-t--global--icon--size--font--heading--h5: var(--pf-t--global--font--size--heading--h5);
  --pf-t--global--icon--size--font--heading--h6: var(--pf-t--global--font--size--heading--h6);
  --pf-t--global--text--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
  --pf-t--global--text--color--brand--default: var(--pf-t--global--color--brand--default);
  --pf-t--global--text--color--brand--hover: var(--pf-t--global--color--brand--hover);
  --pf-t--global--text--color--nonstatus--on-blue--clicked: var(--pf-t--global--text--color--regular);
  --pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--text--color--regular);
  --pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--text--color--regular);
  --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--regular);
  --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--regular);
  --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--regular);
  --pf-t--global--text--color--nonstatus--on-green--clicked: var(--pf-t--global--text--color--regular);
  --pf-t--global--text--color--nonstatus--on-green--default: var(--pf-t--global--text--color--regular);
  --pf-t--global--text--color--nonstatus--on-green--hover: var(--pf-t--global--text--color--regular);
  --pf-t--global--text--color--nonstatus--on-orange--clicked: var(--pf-t--global--text--color--regular);
  --pf-t--global--text--color--nonstatus--on-orange--default: var(--pf-t--global--text--color--regular);
  --pf-t--global--text--color--nonstatus--on-orange--hover: var(--pf-t--global--text--color--regular);
  --pf-t--global--text--color--nonstatus--on-orangered--clicked: var(--pf-t--global--text--color--regular);
  --pf-t--global--text--color--nonstatus--on-orangered--default: var(--pf-t--global--text--color--regular);
  --pf-t--global--text--color--nonstatus--on-orangered--hover: var(--pf-t--global--text--color--regular);
  --pf-t--global--text--color--nonstatus--on-purple--clicked: var(--pf-t--global--text--color--regular);
  --pf-t--global--text--color--nonstatus--on-purple--default: var(--pf-t--global--text--color--regular);
  --pf-t--global--text--color--nonstatus--on-purple--hover: var(--pf-t--global--text--color--regular);
  --pf-t--global--text--color--nonstatus--on-red--clicked: var(--pf-t--global--text--color--regular);
  --pf-t--global--text--color--nonstatus--on-red--default: var(--pf-t--global--text--color--regular);
  --pf-t--global--text--color--nonstatus--on-red--hover: var(--pf-t--global--text--color--regular);
  --pf-t--global--text--color--nonstatus--on-teal--clicked: var(--pf-t--global--text--color--regular);
  --pf-t--global--text--color--nonstatus--on-teal--default: var(--pf-t--global--text--color--regular);
  --pf-t--global--text--color--nonstatus--on-teal--hover: var(--pf-t--global--text--color--regular);
  --pf-t--global--text--color--nonstatus--on-yellow--clicked: var(--pf-t--global--text--color--regular);
  --pf-t--global--text--color--nonstatus--on-yellow--default: var(--pf-t--global--text--color--regular);
  --pf-t--global--text--color--nonstatus--on-yellow--hover: var(--pf-t--global--text--color--regular);
  --pf-t--global--text--color--on-brand--clicked: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--placeholder: var(--pf-t--global--text--color--subtle);
  --pf-t--global--text--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
  --pf-t--global--text--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
  --pf-t--global--text--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
  --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
  --pf-t--global--text--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
  --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
  --pf-t--global--text--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
  --pf-t--global--text--color--status--info--default: var(--pf-t--global--color--status--info--default);
  --pf-t--global--text--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
  --pf-t--global--text--color--status--on-custom--clicked: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--status--on-custom--hover: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--status--on-danger--hover: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--status--on-info--clicked: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--status--on-info--default: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--status--on-info--hover: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--status--on-success--clicked: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--status--on-success--default: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--status--on-success--hover: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--status--on-warning--clicked: var(--pf-t--global--text--color--regular);
  --pf-t--global--text--color--status--on-warning--default: var(--pf-t--global--text--color--regular);
  --pf-t--global--text--color--status--on-warning--hover: var(--pf-t--global--text--color--regular);
  --pf-t--global--text--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
  --pf-t--global--text--color--status--success--default: var(--pf-t--global--color--status--success--default);
  --pf-t--global--text--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
  --pf-t--global--text--color--status--unread--on-attention--clicked: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--status--unread--on-attention--default: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--status--unread--on-attention--hover: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--status--unread--on-default--clicked: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
  --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
  --pf-t--global--font--size--heading--xs: var(--pf-t--global--font--size--md);
  --pf-t--global--font--size--heading--sm: var(--pf-t--global--font--size--lg);
  --pf-t--global--font--size--heading--md: var(--pf-t--global--font--size--xl);
  --pf-t--global--font--size--heading--lg: var(--pf-t--global--font--size--2xl);
  --pf-t--global--font--size--heading--xl: var(--pf-t--global--font--size--3xl);
  --pf-t--global--font--size--heading--2xl: var(--pf-t--global--font--size--4xl);
  --pf-t--global--font--family--body--legacy: redhattext, helvetica, arial, sans-serif;
  --pf-t--global--font--family--heading--legacy: redhatdisplay, helvetica, arial, sans-serif;
  --pf-t--global--font--family--mono--legacy: redhatmono, liberationmono, consolas, sfmono-regular, menlo, monaco, courier new, monospace;
  --pf-t--global--font--weight--body--legacy: 400;
  --pf-t--global--font--weight--body--bold--legacy: 700;
  --pf-t--global--font--weight--heading--legacy: 400;
  --pf-t--global--font--weight--heading--bold--legacy: 700;
  --pf-t--global--box-shadow--sm: var(--pf-t--global--box-shadow--X--sm--default)
    var(--pf-t--global--box-shadow--Y--sm--default)
    var(--pf-t--global--box-shadow--blur--sm)
    var(--pf-t--global--box-shadow--spread--sm--default)
    var(--pf-t--global--box-shadow--color--sm--default);
  --pf-t--global--box-shadow--sm--top: var(--pf-t--global--box-shadow--X--sm--top)
    var(--pf-t--global--box-shadow--Y--sm--top)
    var(--pf-t--global--box-shadow--blur--sm)
    var(--pf-t--global--box-shadow--spread--sm--directional)
    var(--pf-t--global--box-shadow--color--sm--directional);
  --pf-t--global--box-shadow--sm--bottom: var(--pf-t--global--box-shadow--X--sm--bottom)
    var(--pf-t--global--box-shadow--Y--sm--bottom)
    var(--pf-t--global--box-shadow--blur--sm)
    var(--pf-t--global--box-shadow--spread--sm--directional)
    var(--pf-t--global--box-shadow--color--sm--directional);
  --pf-t--global--box-shadow--sm--left: var(--pf-t--global--box-shadow--X--sm--left)
    var(--pf-t--global--box-shadow--Y--sm--left)
    var(--pf-t--global--box-shadow--blur--sm)
    var(--pf-t--global--box-shadow--spread--sm--directional)
    var(--pf-t--global--box-shadow--color--sm--directional);
  --pf-t--global--box-shadow--sm--right: var(--pf-t--global--box-shadow--X--sm--right)
    var(--pf-t--global--box-shadow--Y--sm--right)
    var(--pf-t--global--box-shadow--blur--sm)
    var(--pf-t--global--box-shadow--spread--sm--directional)
    var(--pf-t--global--box-shadow--color--sm--directional);
  --pf-t--global--box-shadow--md: var(--pf-t--global--box-shadow--X--md--default)
    var(--pf-t--global--box-shadow--Y--md--default)
    var(--pf-t--global--box-shadow--blur--md)
    var(--pf-t--global--box-shadow--spread--md--default)
    var(--pf-t--global--box-shadow--color--md--default);
  --pf-t--global--box-shadow--md--top: var(--pf-t--global--box-shadow--X--md--top)
    var(--pf-t--global--box-shadow--Y--md--top)
    var(--pf-t--global--box-shadow--blur--md)
    var(--pf-t--global--box-shadow--spread--md--directional)
    var(--pf-t--global--box-shadow--color--md--directional);
  --pf-t--global--box-shadow--md--bottom: var(--pf-t--global--box-shadow--X--md--bottom)
    var(--pf-t--global--box-shadow--Y--md--bottom)
    var(--pf-t--global--box-shadow--blur--md)
    var(--pf-t--global--box-shadow--spread--md--directional)
    var(--pf-t--global--box-shadow--color--md--directional);
  --pf-t--global--box-shadow--md--left: var(--pf-t--global--box-shadow--X--md--left)
    var(--pf-t--global--box-shadow--Y--md--left)
    var(--pf-t--global--box-shadow--blur--md)
    var(--pf-t--global--box-shadow--spread--md--directional)
    var(--pf-t--global--box-shadow--color--md--directional);
  --pf-t--global--box-shadow--md--right: var(--pf-t--global--box-shadow--X--md--right)
    var(--pf-t--global--box-shadow--Y--md--right)
    var(--pf-t--global--box-shadow--blur--md)
    var(--pf-t--global--box-shadow--spread--md--directional)
    var(--pf-t--global--box-shadow--color--md--directional);
  --pf-t--global--box-shadow--lg: var(--pf-t--global--box-shadow--X--lg--default)
    var(--pf-t--global--box-shadow--Y--lg--default)
    var(--pf-t--global--box-shadow--blur--lg)
    var(--pf-t--global--box-shadow--spread--lg--default)
    var(--pf-t--global--box-shadow--color--lg--default);
  --pf-t--global--box-shadow--lg--top: var(--pf-t--global--box-shadow--X--lg--top)
    var(--pf-t--global--box-shadow--Y--lg--top)
    var(--pf-t--global--box-shadow--blur--lg)
    var(--pf-t--global--box-shadow--spread--lg--directional)
    var(--pf-t--global--box-shadow--color--lg--directional);
  --pf-t--global--box-shadow--lg--bottom: var(--pf-t--global--box-shadow--X--lg--bottom)
    var(--pf-t--global--box-shadow--Y--lg--bottom)
    var(--pf-t--global--box-shadow--blur--lg)
    var(--pf-t--global--box-shadow--spread--lg--directional)
    var(--pf-t--global--box-shadow--color--lg--directional);
  --pf-t--global--box-shadow--lg--left: var(--pf-t--global--box-shadow--X--lg--left)
    var(--pf-t--global--box-shadow--Y--lg--left)
    var(--pf-t--global--box-shadow--blur--lg)
    var(--pf-t--global--box-shadow--spread--lg--directional)
    var(--pf-t--global--box-shadow--color--lg--directional);
  --pf-t--global--box-shadow--lg--right: var(--pf-t--global--box-shadow--X--lg--right)
    var(--pf-t--global--box-shadow--Y--lg--right)
    var(--pf-t--global--box-shadow--blur--lg)
    var(--pf-t--global--box-shadow--spread--lg--directional)
    var(--pf-t--global--box-shadow--color--lg--directional);
  --pf-t--global--list-style: disc outside;
  --pf-t--temp--dev--tbd: #BC11E0;
}

:root:where(.pf-v6-theme-dark) {
  --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
  --pf-t--global--dark--background--color--500: rgba(21, 21, 21, 0.8000);
  --pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500);
  --pf-t--global--dark--box-shadow--color--100: rgba(0, 0, 0, 0.5000);
  --pf-t--global--dark--box-shadow--color--200: rgba(0, 0, 0, 0.7000);
  --pf-t--global--background--color--action--plain--clicked: var(--pf-t--global--dark--background--color--600);
  --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--dark--background--color--600);
  --pf-t--global--background--color--backdrop--default: var(--pf-t--global--dark--background--color--500);
  --pf-t--global--background--color--tertiary--default: var(--pf-t--global--dark--background--color--600);
  --pf-t--global--box-shadow--color--lg--default: var(--pf-t--global--dark--box-shadow--color--100);
  --pf-t--global--box-shadow--color--lg--directional: var(--pf-t--global--dark--box-shadow--color--200);
  --pf-t--global--box-shadow--color--md--default: var(--pf-t--global--dark--box-shadow--color--100);
  --pf-t--global--box-shadow--color--md--directional: var(--pf-t--global--dark--box-shadow--color--200);
  --pf-t--global--box-shadow--color--sm--default: var(--pf-t--global--dark--box-shadow--color--100);
  --pf-t--global--box-shadow--color--sm--directional: var(--pf-t--global--dark--box-shadow--color--200);
  --pf-t--global--dark--background--color--100: var(--pf-t--color--gray--95);
  --pf-t--global--dark--background--color--200: var(--pf-t--color--gray--80);
  --pf-t--global--dark--background--color--300: var(--pf-t--color--gray--70);
  --pf-t--global--dark--background--color--400: var(--pf-t--color--gray--10);
  --pf-t--global--dark--background--color--450: var(--pf-t--color--gray--20);
  --pf-t--global--dark--background--color--highlight--100: var(--pf-t--color--yellow--20);
  --pf-t--global--dark--background--color--highlight--200: var(--pf-t--color--yellow--30);
  --pf-t--global--dark--border--color--100: var(--pf-t--color--gray--50);
  --pf-t--global--dark--border--color--200: var(--pf-t--color--gray--40);
  --pf-t--global--dark--border--color--50: var(--pf-t--color--gray--60);
  --pf-t--global--dark--color--brand--100: var(--pf-t--color--blue--30);
  --pf-t--global--dark--color--brand--200: var(--pf-t--color--blue--20);
  --pf-t--global--dark--color--brand--300: var(--pf-t--color--blue--10);
  --pf-t--global--dark--color--disabled--100: var(--pf-t--color--gray--40);
  --pf-t--global--dark--color--disabled--200: var(--pf-t--color--gray--50);
  --pf-t--global--dark--color--disabled--300: var(--pf-t--color--gray--70);
  --pf-t--global--dark--color--favorite--100: var(--pf-t--color--yellow--30);
  --pf-t--global--dark--color--favorite--200: var(--pf-t--color--yellow--20);
  --pf-t--global--dark--color--nonstatus--blue--100: var(--pf-t--color--blue--30);
  --pf-t--global--dark--color--nonstatus--blue--200: var(--pf-t--color--blue--20);
  --pf-t--global--dark--color--nonstatus--blue--300: var(--pf-t--color--blue--10);
  --pf-t--global--dark--color--nonstatus--gray--100: var(--pf-t--color--gray--60);
  --pf-t--global--dark--color--nonstatus--gray--200: var(--pf-t--color--gray--50);
  --pf-t--global--dark--color--nonstatus--gray--300: var(--pf-t--color--gray--40);
  --pf-t--global--dark--color--nonstatus--green--100: var(--pf-t--color--green--30);
  --pf-t--global--dark--color--nonstatus--green--200: var(--pf-t--color--green--20);
  --pf-t--global--dark--color--nonstatus--green--300: var(--pf-t--color--green--10);
  --pf-t--global--dark--color--nonstatus--orange--100: var(--pf-t--color--orange--30);
  --pf-t--global--dark--color--nonstatus--orange--200: var(--pf-t--color--orange--20);
  --pf-t--global--dark--color--nonstatus--orange--300: var(--pf-t--color--orange--10);
  --pf-t--global--dark--color--nonstatus--orangered--100: var(--pf-t--color--red-orange--30);
  --pf-t--global--dark--color--nonstatus--orangered--200: var(--pf-t--color--red-orange--20);
  --pf-t--global--dark--color--nonstatus--orangered--300: var(--pf-t--color--red-orange--10);
  --pf-t--global--dark--color--nonstatus--purple--100: var(--pf-t--color--purple--30);
  --pf-t--global--dark--color--nonstatus--purple--200: var(--pf-t--color--purple--20);
  --pf-t--global--dark--color--nonstatus--purple--300: var(--pf-t--color--purple--10);
  --pf-t--global--dark--color--nonstatus--red--100: var(--pf-t--color--red--30);
  --pf-t--global--dark--color--nonstatus--red--200: var(--pf-t--color--red--20);
  --pf-t--global--dark--color--nonstatus--red--300: var(--pf-t--color--red--10);
  --pf-t--global--dark--color--nonstatus--teal--100: var(--pf-t--color--teal--30);
  --pf-t--global--dark--color--nonstatus--teal--200: var(--pf-t--color--teal--20);
  --pf-t--global--dark--color--nonstatus--teal--300: var(--pf-t--color--teal--10);
  --pf-t--global--dark--color--nonstatus--yellow--100: var(--pf-t--color--yellow--30);
  --pf-t--global--dark--color--nonstatus--yellow--200: var(--pf-t--color--yellow--20);
  --pf-t--global--dark--color--nonstatus--yellow--300: var(--pf-t--color--yellow--10);
  --pf-t--global--dark--color--severity--critical--100: var(--pf-t--color--red-orange--50);
  --pf-t--global--dark--color--severity--important--100: var(--pf-t--color--orange--40);
  --pf-t--global--dark--color--severity--minor--100: var(--pf-t--color--gray--30);
  --pf-t--global--dark--color--severity--moderate--100: var(--pf-t--color--yellow--30);
  --pf-t--global--dark--color--severity--none--100: var(--pf-t--color--blue--30);
  --pf-t--global--dark--color--severity--undefined--100: var(--pf-t--color--gray--40);
  --pf-t--global--dark--color--status--custom--100: var(--pf-t--color--teal--40);
  --pf-t--global--dark--color--status--custom--200: var(--pf-t--color--teal--30);
  --pf-t--global--dark--color--status--danger--100: var(--pf-t--color--red-orange--50);
  --pf-t--global--dark--color--status--danger--200: var(--pf-t--color--red-orange--40);
  --pf-t--global--dark--color--status--danger--250: var(--pf-t--color--red-orange--30);
  --pf-t--global--dark--color--status--danger--300: var(--pf-t--color--red-orange--20);
  --pf-t--global--dark--color--status--info--100: var(--pf-t--color--purple--30);
  --pf-t--global--dark--color--status--info--200: var(--pf-t--color--purple--20);
  --pf-t--global--dark--color--status--success--100: var(--pf-t--color--green--40);
  --pf-t--global--dark--color--status--success--200: var(--pf-t--color--green--30);
  --pf-t--global--dark--color--status--warning--100: var(--pf-t--color--yellow--30);
  --pf-t--global--dark--color--status--warning--200: var(--pf-t--color--yellow--20);
  --pf-t--global--dark--icon--color--100: var(--pf-t--color--gray--10);
  --pf-t--global--dark--icon--color--200: var(--pf-t--color--gray--40);
  --pf-t--global--dark--icon--color--300: var(--pf-t--color--gray--90);
  --pf-t--global--dark--text--color--100: var(--pf-t--color--white);
  --pf-t--global--dark--text--color--200: var(--pf-t--color--gray--30);
  --pf-t--global--dark--text--color--300: var(--pf-t--color--gray--90);
  --pf-t--global--dark--text--color--400: var(--pf-t--color--red-orange--30);
  --pf-t--global--dark--text--color--link--100: var(--pf-t--color--blue--20);
  --pf-t--global--dark--text--color--link--200: var(--pf-t--color--blue--10);
  --pf-t--global--dark--text--color--link--300: var(--pf-t--color--purple--30);
  --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--dark--background--color--200);
  --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--dark--background--color--200);
  --pf-t--global--background--color--control--default: var(--pf-t--global--dark--background--color--300);
  --pf-t--global--background--color--control--read-only: var(--pf-t--global--dark--background--color--300);
  --pf-t--global--background--color--disabled--default: var(--pf-t--global--dark--color--disabled--100);
  --pf-t--global--background--color--floating--clicked: var(--pf-t--global--dark--background--color--200);
  --pf-t--global--background--color--floating--default: var(--pf-t--global--dark--background--color--300);
  --pf-t--global--background--color--floating--hover: var(--pf-t--global--dark--background--color--200);
  --pf-t--global--background--color--highlight--clicked: var(--pf-t--global--dark--background--color--highlight--200);
  --pf-t--global--background--color--highlight--default: var(--pf-t--global--dark--background--color--highlight--100);
  --pf-t--global--background--color--inverse--clicked: var(--pf-t--global--dark--background--color--450);
  --pf-t--global--background--color--inverse--default: var(--pf-t--global--dark--background--color--400);
  --pf-t--global--background--color--inverse--hover: var(--pf-t--global--dark--background--color--450);
  --pf-t--global--background--color--primary--clicked: var(--pf-t--global--dark--background--color--300);
  --pf-t--global--background--color--primary--default: var(--pf-t--global--dark--background--color--200);
  --pf-t--global--background--color--primary--hover: var(--pf-t--global--dark--background--color--300);
  --pf-t--global--background--color--secondary--clicked: var(--pf-t--global--dark--background--color--200);
  --pf-t--global--background--color--secondary--default: var(--pf-t--global--dark--background--color--100);
  --pf-t--global--background--color--secondary--hover: var(--pf-t--global--dark--background--color--200);
  --pf-t--global--border--color--clicked: var(--pf-t--global--dark--color--brand--200);
  --pf-t--global--border--color--control--read-only: var(--pf-t--global--dark--border--color--50);
  --pf-t--global--border--color--default: var(--pf-t--global--dark--border--color--200);
  --pf-t--global--border--color--disabled: var(--pf-t--global--dark--color--disabled--200);
  --pf-t--global--border--color--hover: var(--pf-t--global--dark--color--brand--100);
  --pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--dark--color--nonstatus--blue--200);
  --pf-t--global--border--color--nonstatus--blue--default: var(--pf-t--global--dark--color--nonstatus--blue--100);
  --pf-t--global--border--color--nonstatus--blue--hover: var(--pf-t--global--dark--color--nonstatus--blue--200);
  --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--300);
  --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--200);
  --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--300);
  --pf-t--global--border--color--nonstatus--green--clicked: var(--pf-t--global--dark--color--nonstatus--green--200);
  --pf-t--global--border--color--nonstatus--green--default: var(--pf-t--global--dark--color--nonstatus--green--100);
  --pf-t--global--border--color--nonstatus--green--hover: var(--pf-t--global--dark--color--nonstatus--green--200);
  --pf-t--global--border--color--nonstatus--orange--clicked: var(--pf-t--global--dark--color--nonstatus--orange--200);
  --pf-t--global--border--color--nonstatus--orange--default: var(--pf-t--global--dark--color--nonstatus--orange--100);
  --pf-t--global--border--color--nonstatus--orange--hover: var(--pf-t--global--dark--color--nonstatus--orange--200);
  --pf-t--global--border--color--nonstatus--orangered--clicked: var(--pf-t--global--dark--color--nonstatus--orangered--200);
  --pf-t--global--border--color--nonstatus--orangered--default: var(--pf-t--global--dark--color--nonstatus--orangered--100);
  --pf-t--global--border--color--nonstatus--orangered--hover: var(--pf-t--global--dark--color--nonstatus--orangered--200);
  --pf-t--global--border--color--nonstatus--purple--clicked: var(--pf-t--global--dark--color--nonstatus--purple--200);
  --pf-t--global--border--color--nonstatus--purple--default: var(--pf-t--global--dark--color--nonstatus--purple--100);
  --pf-t--global--border--color--nonstatus--purple--hover: var(--pf-t--global--dark--color--nonstatus--purple--200);
  --pf-t--global--border--color--nonstatus--red--clicked: var(--pf-t--global--dark--color--nonstatus--red--200);
  --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--dark--color--nonstatus--red--100);
  --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--dark--color--nonstatus--red--200);
  --pf-t--global--border--color--nonstatus--teal--clicked: var(--pf-t--global--dark--color--nonstatus--teal--200);
  --pf-t--global--border--color--nonstatus--teal--default: var(--pf-t--global--dark--color--nonstatus--teal--100);
  --pf-t--global--border--color--nonstatus--teal--hover: var(--pf-t--global--dark--color--nonstatus--teal--200);
  --pf-t--global--border--color--nonstatus--yellow--clicked: var(--pf-t--global--dark--color--nonstatus--yellow--200);
  --pf-t--global--border--color--nonstatus--yellow--default: var(--pf-t--global--dark--color--nonstatus--yellow--100);
  --pf-t--global--border--color--nonstatus--yellow--hover: var(--pf-t--global--dark--color--nonstatus--yellow--200);
  --pf-t--global--border--color--on-secondary: var(--pf-t--global--dark--border--color--200);
  --pf-t--global--color--brand--clicked: var(--pf-t--global--dark--color--brand--200);
  --pf-t--global--color--brand--default: var(--pf-t--global--dark--color--brand--100);
  --pf-t--global--color--brand--hover: var(--pf-t--global--dark--color--brand--200);
  --pf-t--global--color--favorite--clicked: var(--pf-t--global--dark--color--favorite--200);
  --pf-t--global--color--favorite--default: var(--pf-t--global--dark--color--favorite--100);
  --pf-t--global--color--favorite--hover: var(--pf-t--global--dark--color--favorite--200);
  --pf-t--global--color--nonstatus--blue--clicked: var(--pf-t--global--dark--color--nonstatus--blue--200);
  --pf-t--global--color--nonstatus--blue--default: var(--pf-t--global--dark--color--nonstatus--blue--100);
  --pf-t--global--color--nonstatus--blue--hover: var(--pf-t--global--dark--color--nonstatus--blue--200);
  --pf-t--global--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--200);
  --pf-t--global--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--100);
  --pf-t--global--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--200);
  --pf-t--global--color--nonstatus--green--clicked: var(--pf-t--global--dark--color--nonstatus--green--200);
  --pf-t--global--color--nonstatus--green--default: var(--pf-t--global--dark--color--nonstatus--green--100);
  --pf-t--global--color--nonstatus--green--hover: var(--pf-t--global--dark--color--nonstatus--green--200);
  --pf-t--global--color--nonstatus--orange--clicked: var(--pf-t--global--dark--color--nonstatus--orange--200);
  --pf-t--global--color--nonstatus--orange--default: var(--pf-t--global--dark--color--nonstatus--orange--100);
  --pf-t--global--color--nonstatus--orange--hover: var(--pf-t--global--dark--color--nonstatus--orange--200);
  --pf-t--global--color--nonstatus--orangered--clicked: var(--pf-t--global--dark--color--nonstatus--orangered--200);
  --pf-t--global--color--nonstatus--orangered--default: var(--pf-t--global--dark--color--nonstatus--orangered--100);
  --pf-t--global--color--nonstatus--orangered--hover: var(--pf-t--global--dark--color--nonstatus--orangered--200);
  --pf-t--global--color--nonstatus--purple--clicked: var(--pf-t--global--dark--color--nonstatus--purple--200);
  --pf-t--global--color--nonstatus--purple--default: var(--pf-t--global--dark--color--nonstatus--purple--100);
  --pf-t--global--color--nonstatus--purple--hover: var(--pf-t--global--dark--color--nonstatus--purple--200);
  --pf-t--global--color--nonstatus--red--clicked: var(--pf-t--global--dark--color--nonstatus--red--200);
  --pf-t--global--color--nonstatus--red--default: var(--pf-t--global--dark--color--nonstatus--red--100);
  --pf-t--global--color--nonstatus--red--hover: var(--pf-t--global--dark--color--nonstatus--red--200);
  --pf-t--global--color--nonstatus--teal--clicked: var(--pf-t--global--dark--color--nonstatus--teal--200);
  --pf-t--global--color--nonstatus--teal--default: var(--pf-t--global--dark--color--nonstatus--teal--100);
  --pf-t--global--color--nonstatus--teal--hover: var(--pf-t--global--dark--color--nonstatus--teal--200);
  --pf-t--global--color--nonstatus--yellow--clicked: var(--pf-t--global--dark--color--nonstatus--yellow--200);
  --pf-t--global--color--nonstatus--yellow--default: var(--pf-t--global--dark--color--nonstatus--yellow--100);
  --pf-t--global--color--nonstatus--yellow--hover: var(--pf-t--global--dark--color--nonstatus--yellow--200);
  --pf-t--global--color--status--custom--clicked: var(--pf-t--global--dark--color--status--custom--200);
  --pf-t--global--color--status--custom--default: var(--pf-t--global--dark--color--status--custom--100);
  --pf-t--global--color--status--custom--hover: var(--pf-t--global--dark--color--status--custom--200);
  --pf-t--global--color--status--danger--clicked: var(--pf-t--global--dark--color--status--danger--200);
  --pf-t--global--color--status--danger--default: var(--pf-t--global--dark--color--status--danger--100);
  --pf-t--global--color--status--danger--hover: var(--pf-t--global--dark--color--status--danger--200);
  --pf-t--global--color--status--info--clicked: var(--pf-t--global--dark--color--status--info--200);
  --pf-t--global--color--status--info--default: var(--pf-t--global--dark--color--status--info--100);
  --pf-t--global--color--status--info--hover: var(--pf-t--global--dark--color--status--info--200);
  --pf-t--global--color--status--success--clicked: var(--pf-t--global--dark--color--status--success--200);
  --pf-t--global--color--status--success--default: var(--pf-t--global--dark--color--status--success--100);
  --pf-t--global--color--status--success--hover: var(--pf-t--global--dark--color--status--success--200);
  --pf-t--global--color--status--warning--clicked: var(--pf-t--global--dark--color--status--warning--200);
  --pf-t--global--color--status--warning--default: var(--pf-t--global--dark--color--status--warning--100);
  --pf-t--global--color--status--warning--hover: var(--pf-t--global--dark--color--status--warning--200);
  --pf-t--global--icon--color--brand--clicked: var(--pf-t--global--dark--color--brand--300);
  --pf-t--global--icon--color--brand--default: var(--pf-t--global--dark--color--brand--200);
  --pf-t--global--icon--color--brand--hover: var(--pf-t--global--dark--color--brand--300);
  --pf-t--global--icon--color--disabled: var(--pf-t--global--dark--color--disabled--200);
  --pf-t--global--icon--color--inverse: var(--pf-t--global--dark--icon--color--300);
  --pf-t--global--icon--color--on-disabled: var(--pf-t--global--dark--color--disabled--300);
  --pf-t--global--icon--color--regular: var(--pf-t--global--dark--icon--color--100);
  --pf-t--global--icon--color--severity--critical--default: var(--pf-t--global--dark--color--severity--critical--100);
  --pf-t--global--icon--color--severity--important--default: var(--pf-t--global--dark--color--severity--important--100);
  --pf-t--global--icon--color--severity--minor--default: var(--pf-t--global--dark--color--severity--minor--100);
  --pf-t--global--icon--color--severity--moderate--default: var(--pf-t--global--dark--color--severity--moderate--100);
  --pf-t--global--icon--color--severity--none--default: var(--pf-t--global--dark--color--severity--none--100);
  --pf-t--global--icon--color--severity--undefined--default: var(--pf-t--global--dark--color--severity--undefined--100);
  --pf-t--global--icon--color--subtle: var(--pf-t--global--dark--icon--color--200);
  --pf-t--global--text--color--brand--clicked: var(--pf-t--global--dark--color--brand--300);
  --pf-t--global--text--color--brand--default: var(--pf-t--global--dark--color--brand--200);
  --pf-t--global--text--color--brand--hover: var(--pf-t--global--dark--color--brand--300);
  --pf-t--global--text--color--disabled: var(--pf-t--global--dark--color--disabled--200);
  --pf-t--global--text--color--inverse: var(--pf-t--global--dark--text--color--300);
  --pf-t--global--text--color--link--default: var(--pf-t--global--dark--text--color--link--100);
  --pf-t--global--text--color--link--hover: var(--pf-t--global--dark--text--color--link--200);
  --pf-t--global--text--color--link--visited: var(--pf-t--global--dark--text--color--link--300);
  --pf-t--global--text--color--on-disabled: var(--pf-t--global--dark--color--disabled--300);
  --pf-t--global--text--color--on-highlight: var(--pf-t--global--dark--text--color--300);
  --pf-t--global--text--color--regular: var(--pf-t--global--dark--text--color--100);
  --pf-t--global--text--color--required: var(--pf-t--global--dark--text--color--400);
  --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--dark--color--status--danger--300);
  --pf-t--global--text--color--status--danger--default: var(--pf-t--global--dark--color--status--danger--250);
  --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--dark--color--status--danger--300);
  --pf-t--global--text--color--subtle: var(--pf-t--global--dark--text--color--200);
  --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
  --pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
  --pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default);
  --pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover);
  --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
  --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
  --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
  --pf-t--global--border--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
  --pf-t--global--border--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
  --pf-t--global--border--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
  --pf-t--global--border--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
  --pf-t--global--border--color--status--info--default: var(--pf-t--global--color--status--info--default);
  --pf-t--global--border--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
  --pf-t--global--border--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
  --pf-t--global--border--color--status--success--default: var(--pf-t--global--color--status--success--default);
  --pf-t--global--border--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
  --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--clicked);
  --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--default);
  --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover);
  --pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default);
  --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
  --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
  --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default);
  --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover);
  --pf-t--global--color--status--unread--clicked: var(--pf-t--global--color--brand--clicked);
  --pf-t--global--color--status--unread--default: var(--pf-t--global--color--brand--default);
  --pf-t--global--color--status--unread--hover: var(--pf-t--global--color--brand--hover);
  --pf-t--global--icon--color--favorite--clicked: var(--pf-t--global--color--favorite--clicked);
  --pf-t--global--icon--color--favorite--default: var(--pf-t--global--color--favorite--default);
  --pf-t--global--icon--color--favorite--hover: var(--pf-t--global--color--favorite--hover);
  --pf-t--global--icon--color--nonstatus--on-blue--clicked: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--nonstatus--on-blue--default: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--nonstatus--on-blue--hover: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--regular);
  --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--regular);
  --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--regular);
  --pf-t--global--icon--color--nonstatus--on-green--clicked: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--nonstatus--on-orange--clicked: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--nonstatus--on-orange--default: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--nonstatus--on-orange--hover: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--nonstatus--on-orangered--clicked: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--nonstatus--on-orangered--default: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--nonstatus--on-orangered--hover: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--nonstatus--on-purple--clicked: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--nonstatus--on-purple--default: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--nonstatus--on-purple--hover: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--nonstatus--on-red--clicked: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--nonstatus--on-red--default: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--nonstatus--on-red--hover: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--nonstatus--on-teal--clicked: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--nonstatus--on-teal--default: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--nonstatus--on-teal--hover: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--nonstatus--on-yellow--clicked: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--nonstatus--on-yellow--default: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--nonstatus--on-yellow--hover: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--on-brand--clicked: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--on-brand--hover: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
  --pf-t--global--icon--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
  --pf-t--global--icon--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
  --pf-t--global--icon--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
  --pf-t--global--icon--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
  --pf-t--global--icon--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
  --pf-t--global--icon--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
  --pf-t--global--icon--color--status--info--default: var(--pf-t--global--color--status--info--default);
  --pf-t--global--icon--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
  --pf-t--global--icon--color--status--on-custom--clicked: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--status--on-custom--default: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--status--on-custom--hover: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--status--on-danger--default: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--status--on-danger--hover: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--status--on-info--clicked: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--status--on-info--default: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--status--on-info--hover: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--status--on-success--clicked: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--status--on-success--default: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--status--on-success--hover: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--status--on-warning--clicked: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--status--on-warning--default: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--status--on-warning--hover: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
  --pf-t--global--icon--color--status--success--default: var(--pf-t--global--color--status--success--default);
  --pf-t--global--icon--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
  --pf-t--global--icon--color--status--unread--on-attention--clicked: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--status--unread--on-attention--default: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--status--unread--on-attention--hover: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--status--unread--on-default--clicked: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--status--unread--on-default--default: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--status--unread--on-default--hover: var(--pf-t--global--icon--color--inverse);
  --pf-t--global--icon--color--status--warning--clicked: var(--pf-t--global--color--status--warning--clicked);
  --pf-t--global--icon--color--status--warning--default: var(--pf-t--global--color--status--warning--default);
  --pf-t--global--icon--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover);
  --pf-t--global--text--color--nonstatus--on-blue--clicked: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--regular);
  --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--regular);
  --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--regular);
  --pf-t--global--text--color--nonstatus--on-green--clicked: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--nonstatus--on-green--default: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--nonstatus--on-green--hover: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--nonstatus--on-orange--clicked: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--nonstatus--on-orange--default: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--nonstatus--on-orange--hover: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--nonstatus--on-orangered--clicked: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--nonstatus--on-orangered--default: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--nonstatus--on-orangered--hover: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--nonstatus--on-purple--clicked: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--nonstatus--on-purple--default: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--nonstatus--on-purple--hover: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--nonstatus--on-red--clicked: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--nonstatus--on-red--default: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--nonstatus--on-red--hover: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--nonstatus--on-teal--clicked: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--nonstatus--on-teal--default: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--nonstatus--on-teal--hover: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--nonstatus--on-yellow--clicked: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--nonstatus--on-yellow--default: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--nonstatus--on-yellow--hover: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--on-brand--clicked: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--placeholder: var(--pf-t--global--text--color--subtle);
  --pf-t--global--text--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
  --pf-t--global--text--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
  --pf-t--global--text--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
  --pf-t--global--text--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked);
  --pf-t--global--text--color--status--info--default: var(--pf-t--global--color--status--info--default);
  --pf-t--global--text--color--status--info--hover: var(--pf-t--global--color--status--info--hover);
  --pf-t--global--text--color--status--on-custom--clicked: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--status--on-custom--hover: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--status--on-danger--clicked: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--status--on-danger--hover: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--status--on-info--clicked: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--status--on-info--default: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--status--on-info--hover: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--status--on-success--clicked: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--status--on-success--default: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--status--on-success--hover: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--status--on-warning--clicked: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--status--on-warning--default: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--status--on-warning--hover: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
  --pf-t--global--text--color--status--success--default: var(--pf-t--global--color--status--success--default);
  --pf-t--global--text--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
  --pf-t--global--text--color--status--unread--on-attention--clicked: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--status--unread--on-attention--default: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--status--unread--on-attention--hover: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--status--unread--on-default--clicked: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
  --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--clicked);
  --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--default);
  --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover);
}

:is(.pf-v6-m-dir-rtl, [dir=rtl]) {
  --pf-v6-global--inverse--multiplier: -1;
}
/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
@layer base {
  *, :before, :after {
    box-sizing: border-box;
  }

  html {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
    line-height: 1.15;
  }

  body {
    margin: 0;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: ui-monospace, SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

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

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    border-color: currentColor;
  }

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

  button, [type="button"], [type="reset"], [type="submit"] {
    -webkit-appearance: button;
  }

  legend {
    padding: 0;
  }

  progress {
    vertical-align: baseline;
  }

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

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

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

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

  summary {
    display: list-item;
  }
}

.cu-p {
  padding: var(--p);
}

.cu-p-0\.5 {
  padding: var(--canon-space-0_5);
}

.cu-p-1 {
  padding: var(--canon-space-1);
}

.cu-p-1\.5 {
  padding: var(--canon-space-1_5);
}

.cu-p-2 {
  padding: var(--canon-space-2);
}

.cu-p-3 {
  padding: var(--canon-space-3);
}

.cu-p-4 {
  padding: var(--canon-space-4);
}

.cu-p-5 {
  padding: var(--canon-space-5);
}

.cu-p-6 {
  padding: var(--canon-space-6);
}

.cu-p-7 {
  padding: var(--canon-space-7);
}

.cu-p-8 {
  padding: var(--canon-space-8);
}

.cu-p-9 {
  padding: var(--canon-space-9);
}

.cu-p-10 {
  padding: var(--canon-space-10);
}

.cu-p-11 {
  padding: var(--canon-space-11);
}

.cu-p-12 {
  padding: var(--canon-space-12);
}

.cu-p-13 {
  padding: var(--canon-space-13);
}

.cu-p-14 {
  padding: var(--canon-space-14);
}

@media (width >= 640px) {
  .xs\:cu-p {
    padding: var(--p-xs);
  }

  .xs\:cu-p-0\.5 {
    padding: var(--canon-space-0_5);
  }

  .xs\:cu-p-1 {
    padding: var(--canon-space-1);
  }

  .xs\:cu-p-1\.5 {
    padding: var(--canon-space-1_5);
  }

  .xs\:cu-p-2 {
    padding: var(--canon-space-2);
  }

  .xs\:cu-p-3 {
    padding: var(--canon-space-3);
  }

  .xs\:cu-p-4 {
    padding: var(--canon-space-4);
  }

  .xs\:cu-p-5 {
    padding: var(--canon-space-5);
  }

  .xs\:cu-p-6 {
    padding: var(--canon-space-6);
  }

  .xs\:cu-p-7 {
    padding: var(--canon-space-7);
  }

  .xs\:cu-p-8 {
    padding: var(--canon-space-8);
  }

  .xs\:cu-p-9 {
    padding: var(--canon-space-9);
  }

  .xs\:cu-p-10 {
    padding: var(--canon-space-10);
  }

  .xs\:cu-p-11 {
    padding: var(--canon-space-11);
  }

  .xs\:cu-p-12 {
    padding: var(--canon-space-12);
  }

  .xs\:cu-p-13 {
    padding: var(--canon-space-13);
  }

  .xs\:cu-p-14 {
    padding: var(--canon-space-14);
  }
}

@media (width >= 768px) {
  .sm\:cu-p {
    padding: var(--p-sm);
  }

  .sm\:cu-p-0\.5 {
    padding: var(--canon-space-0_5);
  }

  .sm\:cu-p-1 {
    padding: var(--canon-space-1);
  }

  .sm\:cu-p-1\.5 {
    padding: var(--canon-space-1_5);
  }

  .sm\:cu-p-2 {
    padding: var(--canon-space-2);
  }

  .sm\:cu-p-3 {
    padding: var(--canon-space-3);
  }

  .sm\:cu-p-4 {
    padding: var(--canon-space-4);
  }

  .sm\:cu-p-5 {
    padding: var(--canon-space-5);
  }

  .sm\:cu-p-6 {
    padding: var(--canon-space-6);
  }

  .sm\:cu-p-7 {
    padding: var(--canon-space-7);
  }

  .sm\:cu-p-8 {
    padding: var(--canon-space-8);
  }

  .sm\:cu-p-9 {
    padding: var(--canon-space-9);
  }

  .sm\:cu-p-10 {
    padding: var(--canon-space-10);
  }

  .sm\:cu-p-11 {
    padding: var(--canon-space-11);
  }

  .sm\:cu-p-12 {
    padding: var(--canon-space-12);
  }

  .sm\:cu-p-13 {
    padding: var(--canon-space-13);
  }

  .sm\:cu-p-14 {
    padding: var(--canon-space-14);
  }
}

@media (width >= 1024px) {
  .md\:cu-p {
    padding: var(--p-md);
  }

  .md\:cu-p-0\.5 {
    padding: var(--canon-space-0_5);
  }

  .md\:cu-p-1 {
    padding: var(--canon-space-1);
  }

  .md\:cu-p-1\.5 {
    padding: var(--canon-space-1_5);
  }

  .md\:cu-p-2 {
    padding: var(--canon-space-2);
  }

  .md\:cu-p-3 {
    padding: var(--canon-space-3);
  }

  .md\:cu-p-4 {
    padding: var(--canon-space-4);
  }

  .md\:cu-p-5 {
    padding: var(--canon-space-5);
  }

  .md\:cu-p-6 {
    padding: var(--canon-space-6);
  }

  .md\:cu-p-7 {
    padding: var(--canon-space-7);
  }

  .md\:cu-p-8 {
    padding: var(--canon-space-8);
  }

  .md\:cu-p-9 {
    padding: var(--canon-space-9);
  }

  .md\:cu-p-10 {
    padding: var(--canon-space-10);
  }

  .md\:cu-p-11 {
    padding: var(--canon-space-11);
  }

  .md\:cu-p-12 {
    padding: var(--canon-space-12);
  }

  .md\:cu-p-13 {
    padding: var(--canon-space-13);
  }

  .md\:cu-p-14 {
    padding: var(--canon-space-14);
  }
}

@media (width >= 1280px) {
  .lg\:cu-p {
    padding: var(--p-lg);
  }

  .lg\:cu-p-0\.5 {
    padding: var(--canon-space-0_5);
  }

  .lg\:cu-p-1 {
    padding: var(--canon-space-1);
  }

  .lg\:cu-p-1\.5 {
    padding: var(--canon-space-1_5);
  }

  .lg\:cu-p-2 {
    padding: var(--canon-space-2);
  }

  .lg\:cu-p-3 {
    padding: var(--canon-space-3);
  }

  .lg\:cu-p-4 {
    padding: var(--canon-space-4);
  }

  .lg\:cu-p-5 {
    padding: var(--canon-space-5);
  }

  .lg\:cu-p-6 {
    padding: var(--canon-space-6);
  }

  .lg\:cu-p-7 {
    padding: var(--canon-space-7);
  }

  .lg\:cu-p-8 {
    padding: var(--canon-space-8);
  }

  .lg\:cu-p-9 {
    padding: var(--canon-space-9);
  }

  .lg\:cu-p-10 {
    padding: var(--canon-space-10);
  }

  .lg\:cu-p-11 {
    padding: var(--canon-space-11);
  }

  .lg\:cu-p-12 {
    padding: var(--canon-space-12);
  }

  .lg\:cu-p-13 {
    padding: var(--canon-space-13);
  }

  .lg\:cu-p-14 {
    padding: var(--canon-space-14);
  }
}

@media (width >= 1536px) {
  .xl\:cu-p {
    padding: var(--p-xl);
  }

  .xl\:cu-p-0\.5 {
    padding: var(--canon-space-0_5);
  }

  .xl\:cu-p-1 {
    padding: var(--canon-space-1);
  }

  .xl\:cu-p-1\.5 {
    padding: var(--canon-space-1_5);
  }

  .xl\:cu-p-2 {
    padding: var(--canon-space-2);
  }

  .xl\:cu-p-3 {
    padding: var(--canon-space-3);
  }

  .xl\:cu-p-4 {
    padding: var(--canon-space-4);
  }

  .xl\:cu-p-5 {
    padding: var(--canon-space-5);
  }

  .xl\:cu-p-6 {
    padding: var(--canon-space-6);
  }

  .xl\:cu-p-7 {
    padding: var(--canon-space-7);
  }

  .xl\:cu-p-8 {
    padding: var(--canon-space-8);
  }

  .xl\:cu-p-9 {
    padding: var(--canon-space-9);
  }

  .xl\:cu-p-10 {
    padding: var(--canon-space-10);
  }

  .xl\:cu-p-11 {
    padding: var(--canon-space-11);
  }

  .xl\:cu-p-12 {
    padding: var(--canon-space-12);
  }

  .xl\:cu-p-13 {
    padding: var(--canon-space-13);
  }

  .xl\:cu-p-14 {
    padding: var(--canon-space-14);
  }
}

.cu-pl {
  padding-left: var(--pl);
}

.cu-pl-0\.5 {
  padding-left: var(--canon-space-0_5);
}

.cu-pl-1 {
  padding-left: var(--canon-space-1);
}

.cu-pl-1\.5 {
  padding-left: var(--canon-space-1_5);
}

.cu-pl-2 {
  padding-left: var(--canon-space-2);
}

.cu-pl-3 {
  padding-left: var(--canon-space-3);
}

.cu-pl-4 {
  padding-left: var(--canon-space-4);
}

.cu-pl-5 {
  padding-left: var(--canon-space-5);
}

.cu-pl-6 {
  padding-left: var(--canon-space-6);
}

.cu-pl-7 {
  padding-left: var(--canon-space-7);
}

.cu-pl-8 {
  padding-left: var(--canon-space-8);
}

.cu-pl-9 {
  padding-left: var(--canon-space-9);
}

.cu-pl-10 {
  padding-left: var(--canon-space-10);
}

.cu-pl-11 {
  padding-left: var(--canon-space-11);
}

.cu-pl-12 {
  padding-left: var(--canon-space-12);
}

.cu-pl-13 {
  padding-left: var(--canon-space-13);
}

.cu-pl-14 {
  padding-left: var(--canon-space-14);
}

@media (width >= 640px) {
  .xs\:cu-pl {
    padding-left: var(--pl-xs);
  }

  .xs\:cu-pl-0\.5 {
    padding-left: var(--canon-space-0_5);
  }

  .xs\:cu-pl-1 {
    padding-left: var(--canon-space-1);
  }

  .xs\:cu-pl-1\.5 {
    padding-left: var(--canon-space-1_5);
  }

  .xs\:cu-pl-2 {
    padding-left: var(--canon-space-2);
  }

  .xs\:cu-pl-3 {
    padding-left: var(--canon-space-3);
  }

  .xs\:cu-pl-4 {
    padding-left: var(--canon-space-4);
  }

  .xs\:cu-pl-5 {
    padding-left: var(--canon-space-5);
  }

  .xs\:cu-pl-6 {
    padding-left: var(--canon-space-6);
  }

  .xs\:cu-pl-7 {
    padding-left: var(--canon-space-7);
  }

  .xs\:cu-pl-8 {
    padding-left: var(--canon-space-8);
  }

  .xs\:cu-pl-9 {
    padding-left: var(--canon-space-9);
  }

  .xs\:cu-pl-10 {
    padding-left: var(--canon-space-10);
  }

  .xs\:cu-pl-11 {
    padding-left: var(--canon-space-11);
  }

  .xs\:cu-pl-12 {
    padding-left: var(--canon-space-12);
  }

  .xs\:cu-pl-13 {
    padding-left: var(--canon-space-13);
  }

  .xs\:cu-pl-14 {
    padding-left: var(--canon-space-14);
  }
}

@media (width >= 768px) {
  .sm\:cu-pl {
    padding-left: var(--pl-sm);
  }

  .sm\:cu-pl-0\.5 {
    padding-left: var(--canon-space-0_5);
  }

  .sm\:cu-pl-1 {
    padding-left: var(--canon-space-1);
  }

  .sm\:cu-pl-1\.5 {
    padding-left: var(--canon-space-1_5);
  }

  .sm\:cu-pl-2 {
    padding-left: var(--canon-space-2);
  }

  .sm\:cu-pl-3 {
    padding-left: var(--canon-space-3);
  }

  .sm\:cu-pl-4 {
    padding-left: var(--canon-space-4);
  }

  .sm\:cu-pl-5 {
    padding-left: var(--canon-space-5);
  }

  .sm\:cu-pl-6 {
    padding-left: var(--canon-space-6);
  }

  .sm\:cu-pl-7 {
    padding-left: var(--canon-space-7);
  }

  .sm\:cu-pl-8 {
    padding-left: var(--canon-space-8);
  }

  .sm\:cu-pl-9 {
    padding-left: var(--canon-space-9);
  }

  .sm\:cu-pl-10 {
    padding-left: var(--canon-space-10);
  }

  .sm\:cu-pl-11 {
    padding-left: var(--canon-space-11);
  }

  .sm\:cu-pl-12 {
    padding-left: var(--canon-space-12);
  }

  .sm\:cu-pl-13 {
    padding-left: var(--canon-space-13);
  }

  .sm\:cu-pl-14 {
    padding-left: var(--canon-space-14);
  }
}

@media (width >= 1024px) {
  .md\:cu-pl {
    padding-left: var(--pl-md);
  }

  .md\:cu-pl-0\.5 {
    padding-left: var(--canon-space-0_5);
  }

  .md\:cu-pl-1 {
    padding-left: var(--canon-space-1);
  }

  .md\:cu-pl-1\.5 {
    padding-left: var(--canon-space-1_5);
  }

  .md\:cu-pl-2 {
    padding-left: var(--canon-space-2);
  }

  .md\:cu-pl-3 {
    padding-left: var(--canon-space-3);
  }

  .md\:cu-pl-4 {
    padding-left: var(--canon-space-4);
  }

  .md\:cu-pl-5 {
    padding-left: var(--canon-space-5);
  }

  .md\:cu-pl-6 {
    padding-left: var(--canon-space-6);
  }

  .md\:cu-pl-7 {
    padding-left: var(--canon-space-7);
  }

  .md\:cu-pl-8 {
    padding-left: var(--canon-space-8);
  }

  .md\:cu-pl-9 {
    padding-left: var(--canon-space-9);
  }

  .md\:cu-pl-10 {
    padding-left: var(--canon-space-10);
  }

  .md\:cu-pl-11 {
    padding-left: var(--canon-space-11);
  }

  .md\:cu-pl-12 {
    padding-left: var(--canon-space-12);
  }

  .md\:cu-pl-13 {
    padding-left: var(--canon-space-13);
  }

  .md\:cu-pl-14 {
    padding-left: var(--canon-space-14);
  }
}

@media (width >= 1280px) {
  .lg\:cu-pl {
    padding-left: var(--pl-lg);
  }

  .lg\:cu-pl-0\.5 {
    padding-left: var(--canon-space-0_5);
  }

  .lg\:cu-pl-1 {
    padding-left: var(--canon-space-1);
  }

  .lg\:cu-pl-1\.5 {
    padding-left: var(--canon-space-1_5);
  }

  .lg\:cu-pl-2 {
    padding-left: var(--canon-space-2);
  }

  .lg\:cu-pl-3 {
    padding-left: var(--canon-space-3);
  }

  .lg\:cu-pl-4 {
    padding-left: var(--canon-space-4);
  }

  .lg\:cu-pl-5 {
    padding-left: var(--canon-space-5);
  }

  .lg\:cu-pl-6 {
    padding-left: var(--canon-space-6);
  }

  .lg\:cu-pl-7 {
    padding-left: var(--canon-space-7);
  }

  .lg\:cu-pl-8 {
    padding-left: var(--canon-space-8);
  }

  .lg\:cu-pl-9 {
    padding-left: var(--canon-space-9);
  }

  .lg\:cu-pl-10 {
    padding-left: var(--canon-space-10);
  }

  .lg\:cu-pl-11 {
    padding-left: var(--canon-space-11);
  }

  .lg\:cu-pl-12 {
    padding-left: var(--canon-space-12);
  }

  .lg\:cu-pl-13 {
    padding-left: var(--canon-space-13);
  }

  .lg\:cu-pl-14 {
    padding-left: var(--canon-space-14);
  }
}

@media (width >= 1536px) {
  .xl\:cu-pl {
    padding-left: var(--pl-xl);
  }

  .xl\:cu-pl-0\.5 {
    padding-left: var(--canon-space-0_5);
  }

  .xl\:cu-pl-1 {
    padding-left: var(--canon-space-1);
  }

  .xl\:cu-pl-1\.5 {
    padding-left: var(--canon-space-1_5);
  }

  .xl\:cu-pl-2 {
    padding-left: var(--canon-space-2);
  }

  .xl\:cu-pl-3 {
    padding-left: var(--canon-space-3);
  }

  .xl\:cu-pl-4 {
    padding-left: var(--canon-space-4);
  }

  .xl\:cu-pl-5 {
    padding-left: var(--canon-space-5);
  }

  .xl\:cu-pl-6 {
    padding-left: var(--canon-space-6);
  }

  .xl\:cu-pl-7 {
    padding-left: var(--canon-space-7);
  }

  .xl\:cu-pl-8 {
    padding-left: var(--canon-space-8);
  }

  .xl\:cu-pl-9 {
    padding-left: var(--canon-space-9);
  }

  .xl\:cu-pl-10 {
    padding-left: var(--canon-space-10);
  }

  .xl\:cu-pl-11 {
    padding-left: var(--canon-space-11);
  }

  .xl\:cu-pl-12 {
    padding-left: var(--canon-space-12);
  }

  .xl\:cu-pl-13 {
    padding-left: var(--canon-space-13);
  }

  .xl\:cu-pl-14 {
    padding-left: var(--canon-space-14);
  }
}

.cu-pr {
  padding-right: var(--pr);
}

.cu-pr-0\.5 {
  padding-right: var(--canon-space-0_5);
}

.cu-pr-1 {
  padding-right: var(--canon-space-1);
}

.cu-pr-1\.5 {
  padding-right: var(--canon-space-1_5);
}

.cu-pr-2 {
  padding-right: var(--canon-space-2);
}

.cu-pr-3 {
  padding-right: var(--canon-space-3);
}

.cu-pr-4 {
  padding-right: var(--canon-space-4);
}

.cu-pr-5 {
  padding-right: var(--canon-space-5);
}

.cu-pr-6 {
  padding-right: var(--canon-space-6);
}

.cu-pr-7 {
  padding-right: var(--canon-space-7);
}

.cu-pr-8 {
  padding-right: var(--canon-space-8);
}

.cu-pr-9 {
  padding-right: var(--canon-space-9);
}

.cu-pr-10 {
  padding-right: var(--canon-space-10);
}

.cu-pr-11 {
  padding-right: var(--canon-space-11);
}

.cu-pr-12 {
  padding-right: var(--canon-space-12);
}

.cu-pr-13 {
  padding-right: var(--canon-space-13);
}

.cu-pr-14 {
  padding-right: var(--canon-space-14);
}

@media (width >= 640px) {
  .xs\:cu-pr {
    padding-right: var(--pr-xs);
  }

  .xs\:cu-pr-0\.5 {
    padding-right: var(--canon-space-0_5);
  }

  .xs\:cu-pr-1 {
    padding-right: var(--canon-space-1);
  }

  .xs\:cu-pr-1\.5 {
    padding-right: var(--canon-space-1_5);
  }

  .xs\:cu-pr-2 {
    padding-right: var(--canon-space-2);
  }

  .xs\:cu-pr-3 {
    padding-right: var(--canon-space-3);
  }

  .xs\:cu-pr-4 {
    padding-right: var(--canon-space-4);
  }

  .xs\:cu-pr-5 {
    padding-right: var(--canon-space-5);
  }

  .xs\:cu-pr-6 {
    padding-right: var(--canon-space-6);
  }

  .xs\:cu-pr-7 {
    padding-right: var(--canon-space-7);
  }

  .xs\:cu-pr-8 {
    padding-right: var(--canon-space-8);
  }

  .xs\:cu-pr-9 {
    padding-right: var(--canon-space-9);
  }

  .xs\:cu-pr-10 {
    padding-right: var(--canon-space-10);
  }

  .xs\:cu-pr-11 {
    padding-right: var(--canon-space-11);
  }

  .xs\:cu-pr-12 {
    padding-right: var(--canon-space-12);
  }

  .xs\:cu-pr-13 {
    padding-right: var(--canon-space-13);
  }

  .xs\:cu-pr-14 {
    padding-right: var(--canon-space-14);
  }
}

@media (width >= 768px) {
  .sm\:cu-pr {
    padding-right: var(--pr-sm);
  }

  .sm\:cu-pr-0\.5 {
    padding-right: var(--canon-space-0_5);
  }

  .sm\:cu-pr-1 {
    padding-right: var(--canon-space-1);
  }

  .sm\:cu-pr-1\.5 {
    padding-right: var(--canon-space-1_5);
  }

  .sm\:cu-pr-2 {
    padding-right: var(--canon-space-2);
  }

  .sm\:cu-pr-3 {
    padding-right: var(--canon-space-3);
  }

  .sm\:cu-pr-4 {
    padding-right: var(--canon-space-4);
  }

  .sm\:cu-pr-5 {
    padding-right: var(--canon-space-5);
  }

  .sm\:cu-pr-6 {
    padding-right: var(--canon-space-6);
  }

  .sm\:cu-pr-7 {
    padding-right: var(--canon-space-7);
  }

  .sm\:cu-pr-8 {
    padding-right: var(--canon-space-8);
  }

  .sm\:cu-pr-9 {
    padding-right: var(--canon-space-9);
  }

  .sm\:cu-pr-10 {
    padding-right: var(--canon-space-10);
  }

  .sm\:cu-pr-11 {
    padding-right: var(--canon-space-11);
  }

  .sm\:cu-pr-12 {
    padding-right: var(--canon-space-12);
  }

  .sm\:cu-pr-13 {
    padding-right: var(--canon-space-13);
  }

  .sm\:cu-pr-14 {
    padding-right: var(--canon-space-14);
  }
}

@media (width >= 1024px) {
  .md\:cu-pr {
    padding-right: var(--pr-md);
  }

  .md\:cu-pr-0\.5 {
    padding-right: var(--canon-space-0_5);
  }

  .md\:cu-pr-1 {
    padding-right: var(--canon-space-1);
  }

  .md\:cu-pr-1\.5 {
    padding-right: var(--canon-space-1_5);
  }

  .md\:cu-pr-2 {
    padding-right: var(--canon-space-2);
  }

  .md\:cu-pr-3 {
    padding-right: var(--canon-space-3);
  }

  .md\:cu-pr-4 {
    padding-right: var(--canon-space-4);
  }

  .md\:cu-pr-5 {
    padding-right: var(--canon-space-5);
  }

  .md\:cu-pr-6 {
    padding-right: var(--canon-space-6);
  }

  .md\:cu-pr-7 {
    padding-right: var(--canon-space-7);
  }

  .md\:cu-pr-8 {
    padding-right: var(--canon-space-8);
  }

  .md\:cu-pr-9 {
    padding-right: var(--canon-space-9);
  }

  .md\:cu-pr-10 {
    padding-right: var(--canon-space-10);
  }

  .md\:cu-pr-11 {
    padding-right: var(--canon-space-11);
  }

  .md\:cu-pr-12 {
    padding-right: var(--canon-space-12);
  }

  .md\:cu-pr-13 {
    padding-right: var(--canon-space-13);
  }

  .md\:cu-pr-14 {
    padding-right: var(--canon-space-14);
  }
}

@media (width >= 1280px) {
  .lg\:cu-pr {
    padding-right: var(--pr-lg);
  }

  .lg\:cu-pr-0\.5 {
    padding-right: var(--canon-space-0_5);
  }

  .lg\:cu-pr-1 {
    padding-right: var(--canon-space-1);
  }

  .lg\:cu-pr-1\.5 {
    padding-right: var(--canon-space-1_5);
  }

  .lg\:cu-pr-2 {
    padding-right: var(--canon-space-2);
  }

  .lg\:cu-pr-3 {
    padding-right: var(--canon-space-3);
  }

  .lg\:cu-pr-4 {
    padding-right: var(--canon-space-4);
  }

  .lg\:cu-pr-5 {
    padding-right: var(--canon-space-5);
  }

  .lg\:cu-pr-6 {
    padding-right: var(--canon-space-6);
  }

  .lg\:cu-pr-7 {
    padding-right: var(--canon-space-7);
  }

  .lg\:cu-pr-8 {
    padding-right: var(--canon-space-8);
  }

  .lg\:cu-pr-9 {
    padding-right: var(--canon-space-9);
  }

  .lg\:cu-pr-10 {
    padding-right: var(--canon-space-10);
  }

  .lg\:cu-pr-11 {
    padding-right: var(--canon-space-11);
  }

  .lg\:cu-pr-12 {
    padding-right: var(--canon-space-12);
  }

  .lg\:cu-pr-13 {
    padding-right: var(--canon-space-13);
  }

  .lg\:cu-pr-14 {
    padding-right: var(--canon-space-14);
  }
}

@media (width >= 1536px) {
  .xl\:cu-pr {
    padding-right: var(--pr-xl);
  }

  .xl\:cu-pr-0\.5 {
    padding-right: var(--canon-space-0_5);
  }

  .xl\:cu-pr-1 {
    padding-right: var(--canon-space-1);
  }

  .xl\:cu-pr-1\.5 {
    padding-right: var(--canon-space-1_5);
  }

  .xl\:cu-pr-2 {
    padding-right: var(--canon-space-2);
  }

  .xl\:cu-pr-3 {
    padding-right: var(--canon-space-3);
  }

  .xl\:cu-pr-4 {
    padding-right: var(--canon-space-4);
  }

  .xl\:cu-pr-5 {
    padding-right: var(--canon-space-5);
  }

  .xl\:cu-pr-6 {
    padding-right: var(--canon-space-6);
  }

  .xl\:cu-pr-7 {
    padding-right: var(--canon-space-7);
  }

  .xl\:cu-pr-8 {
    padding-right: var(--canon-space-8);
  }

  .xl\:cu-pr-9 {
    padding-right: var(--canon-space-9);
  }

  .xl\:cu-pr-10 {
    padding-right: var(--canon-space-10);
  }

  .xl\:cu-pr-11 {
    padding-right: var(--canon-space-11);
  }

  .xl\:cu-pr-12 {
    padding-right: var(--canon-space-12);
  }

  .xl\:cu-pr-13 {
    padding-right: var(--canon-space-13);
  }

  .xl\:cu-pr-14 {
    padding-right: var(--canon-space-14);
  }
}

.cu-pt {
  padding-top: var(--pt);
}

.cu-pt-0\.5 {
  padding-top: var(--canon-space-0_5);
}

.cu-pt-1 {
  padding-top: var(--canon-space-1);
}

.cu-pt-1\.5 {
  padding-top: var(--canon-space-1_5);
}

.cu-pt-2 {
  padding-top: var(--canon-space-2);
}

.cu-pt-3 {
  padding-top: var(--canon-space-3);
}

.cu-pt-4 {
  padding-top: var(--canon-space-4);
}

.cu-pt-5 {
  padding-top: var(--canon-space-5);
}

.cu-pt-6 {
  padding-top: var(--canon-space-6);
}

.cu-pt-7 {
  padding-top: var(--canon-space-7);
}

.cu-pt-8 {
  padding-top: var(--canon-space-8);
}

.cu-pt-9 {
  padding-top: var(--canon-space-9);
}

.cu-pt-10 {
  padding-top: var(--canon-space-10);
}

.cu-pt-11 {
  padding-top: var(--canon-space-11);
}

.cu-pt-12 {
  padding-top: var(--canon-space-12);
}

.cu-pt-13 {
  padding-top: var(--canon-space-13);
}

.cu-pt-14 {
  padding-top: var(--canon-space-14);
}

@media (width >= 640px) {
  .xs\:cu-pt {
    padding-top: var(--pt-xs);
  }

  .xs\:cu-pt-0\.5 {
    padding-top: var(--canon-space-0_5);
  }

  .xs\:cu-pt-1 {
    padding-top: var(--canon-space-1);
  }

  .xs\:cu-pt-1\.5 {
    padding-top: var(--canon-space-1_5);
  }

  .xs\:cu-pt-2 {
    padding-top: var(--canon-space-2);
  }

  .xs\:cu-pt-3 {
    padding-top: var(--canon-space-3);
  }

  .xs\:cu-pt-4 {
    padding-top: var(--canon-space-4);
  }

  .xs\:cu-pt-5 {
    padding-top: var(--canon-space-5);
  }

  .xs\:cu-pt-6 {
    padding-top: var(--canon-space-6);
  }

  .xs\:cu-pt-7 {
    padding-top: var(--canon-space-7);
  }

  .xs\:cu-pt-8 {
    padding-top: var(--canon-space-8);
  }

  .xs\:cu-pt-9 {
    padding-top: var(--canon-space-9);
  }

  .xs\:cu-pt-10 {
    padding-top: var(--canon-space-10);
  }

  .xs\:cu-pt-11 {
    padding-top: var(--canon-space-11);
  }

  .xs\:cu-pt-12 {
    padding-top: var(--canon-space-12);
  }

  .xs\:cu-pt-13 {
    padding-top: var(--canon-space-13);
  }

  .xs\:cu-pt-14 {
    padding-top: var(--canon-space-14);
  }
}

@media (width >= 768px) {
  .sm\:cu-pt {
    padding-top: var(--pt-sm);
  }

  .sm\:cu-pt-0\.5 {
    padding-top: var(--canon-space-0_5);
  }

  .sm\:cu-pt-1 {
    padding-top: var(--canon-space-1);
  }

  .sm\:cu-pt-1\.5 {
    padding-top: var(--canon-space-1_5);
  }

  .sm\:cu-pt-2 {
    padding-top: var(--canon-space-2);
  }

  .sm\:cu-pt-3 {
    padding-top: var(--canon-space-3);
  }

  .sm\:cu-pt-4 {
    padding-top: var(--canon-space-4);
  }

  .sm\:cu-pt-5 {
    padding-top: var(--canon-space-5);
  }

  .sm\:cu-pt-6 {
    padding-top: var(--canon-space-6);
  }

  .sm\:cu-pt-7 {
    padding-top: var(--canon-space-7);
  }

  .sm\:cu-pt-8 {
    padding-top: var(--canon-space-8);
  }

  .sm\:cu-pt-9 {
    padding-top: var(--canon-space-9);
  }

  .sm\:cu-pt-10 {
    padding-top: var(--canon-space-10);
  }

  .sm\:cu-pt-11 {
    padding-top: var(--canon-space-11);
  }

  .sm\:cu-pt-12 {
    padding-top: var(--canon-space-12);
  }

  .sm\:cu-pt-13 {
    padding-top: var(--canon-space-13);
  }

  .sm\:cu-pt-14 {
    padding-top: var(--canon-space-14);
  }
}

@media (width >= 1024px) {
  .md\:cu-pt {
    padding-top: var(--pt-md);
  }

  .md\:cu-pt-0\.5 {
    padding-top: var(--canon-space-0_5);
  }

  .md\:cu-pt-1 {
    padding-top: var(--canon-space-1);
  }

  .md\:cu-pt-1\.5 {
    padding-top: var(--canon-space-1_5);
  }

  .md\:cu-pt-2 {
    padding-top: var(--canon-space-2);
  }

  .md\:cu-pt-3 {
    padding-top: var(--canon-space-3);
  }

  .md\:cu-pt-4 {
    padding-top: var(--canon-space-4);
  }

  .md\:cu-pt-5 {
    padding-top: var(--canon-space-5);
  }

  .md\:cu-pt-6 {
    padding-top: var(--canon-space-6);
  }

  .md\:cu-pt-7 {
    padding-top: var(--canon-space-7);
  }

  .md\:cu-pt-8 {
    padding-top: var(--canon-space-8);
  }

  .md\:cu-pt-9 {
    padding-top: var(--canon-space-9);
  }

  .md\:cu-pt-10 {
    padding-top: var(--canon-space-10);
  }

  .md\:cu-pt-11 {
    padding-top: var(--canon-space-11);
  }

  .md\:cu-pt-12 {
    padding-top: var(--canon-space-12);
  }

  .md\:cu-pt-13 {
    padding-top: var(--canon-space-13);
  }

  .md\:cu-pt-14 {
    padding-top: var(--canon-space-14);
  }
}

@media (width >= 1280px) {
  .lg\:cu-pt {
    padding-top: var(--pt-lg);
  }

  .lg\:cu-pt-0\.5 {
    padding-top: var(--canon-space-0_5);
  }

  .lg\:cu-pt-1 {
    padding-top: var(--canon-space-1);
  }

  .lg\:cu-pt-1\.5 {
    padding-top: var(--canon-space-1_5);
  }

  .lg\:cu-pt-2 {
    padding-top: var(--canon-space-2);
  }

  .lg\:cu-pt-3 {
    padding-top: var(--canon-space-3);
  }

  .lg\:cu-pt-4 {
    padding-top: var(--canon-space-4);
  }

  .lg\:cu-pt-5 {
    padding-top: var(--canon-space-5);
  }

  .lg\:cu-pt-6 {
    padding-top: var(--canon-space-6);
  }

  .lg\:cu-pt-7 {
    padding-top: var(--canon-space-7);
  }

  .lg\:cu-pt-8 {
    padding-top: var(--canon-space-8);
  }

  .lg\:cu-pt-9 {
    padding-top: var(--canon-space-9);
  }

  .lg\:cu-pt-10 {
    padding-top: var(--canon-space-10);
  }

  .lg\:cu-pt-11 {
    padding-top: var(--canon-space-11);
  }

  .lg\:cu-pt-12 {
    padding-top: var(--canon-space-12);
  }

  .lg\:cu-pt-13 {
    padding-top: var(--canon-space-13);
  }

  .lg\:cu-pt-14 {
    padding-top: var(--canon-space-14);
  }
}

@media (width >= 1536px) {
  .xl\:cu-pt {
    padding-top: var(--pt-xl);
  }

  .xl\:cu-pt-0\.5 {
    padding-top: var(--canon-space-0_5);
  }

  .xl\:cu-pt-1 {
    padding-top: var(--canon-space-1);
  }

  .xl\:cu-pt-1\.5 {
    padding-top: var(--canon-space-1_5);
  }

  .xl\:cu-pt-2 {
    padding-top: var(--canon-space-2);
  }

  .xl\:cu-pt-3 {
    padding-top: var(--canon-space-3);
  }

  .xl\:cu-pt-4 {
    padding-top: var(--canon-space-4);
  }

  .xl\:cu-pt-5 {
    padding-top: var(--canon-space-5);
  }

  .xl\:cu-pt-6 {
    padding-top: var(--canon-space-6);
  }

  .xl\:cu-pt-7 {
    padding-top: var(--canon-space-7);
  }

  .xl\:cu-pt-8 {
    padding-top: var(--canon-space-8);
  }

  .xl\:cu-pt-9 {
    padding-top: var(--canon-space-9);
  }

  .xl\:cu-pt-10 {
    padding-top: var(--canon-space-10);
  }

  .xl\:cu-pt-11 {
    padding-top: var(--canon-space-11);
  }

  .xl\:cu-pt-12 {
    padding-top: var(--canon-space-12);
  }

  .xl\:cu-pt-13 {
    padding-top: var(--canon-space-13);
  }

  .xl\:cu-pt-14 {
    padding-top: var(--canon-space-14);
  }
}

.cu-pb {
  padding-bottom: var(--pb);
}

.cu-pb-0\.5 {
  padding-bottom: var(--canon-space-0_5);
}

.cu-pb-1 {
  padding-bottom: var(--canon-space-1);
}

.cu-pb-1\.5 {
  padding-bottom: var(--canon-space-1_5);
}

.cu-pb-2 {
  padding-bottom: var(--canon-space-2);
}

.cu-pb-3 {
  padding-bottom: var(--canon-space-3);
}

.cu-pb-4 {
  padding-bottom: var(--canon-space-4);
}

.cu-pb-5 {
  padding-bottom: var(--canon-space-5);
}

.cu-pb-6 {
  padding-bottom: var(--canon-space-6);
}

.cu-pb-7 {
  padding-bottom: var(--canon-space-7);
}

.cu-pb-8 {
  padding-bottom: var(--canon-space-8);
}

.cu-pb-9 {
  padding-bottom: var(--canon-space-9);
}

.cu-pb-10 {
  padding-bottom: var(--canon-space-10);
}

.cu-pb-11 {
  padding-bottom: var(--canon-space-11);
}

.cu-pb-12 {
  padding-bottom: var(--canon-space-12);
}

.cu-pb-13 {
  padding-bottom: var(--canon-space-13);
}

.cu-pb-14 {
  padding-bottom: var(--canon-space-14);
}

@media (width >= 640px) {
  .xs\:cu-pb {
    padding-bottom: var(--pb-xs);
  }

  .xs\:cu-pb-0\.5 {
    padding-bottom: var(--canon-space-0_5);
  }

  .xs\:cu-pb-1 {
    padding-bottom: var(--canon-space-1);
  }

  .xs\:cu-pb-1\.5 {
    padding-bottom: var(--canon-space-1_5);
  }

  .xs\:cu-pb-2 {
    padding-bottom: var(--canon-space-2);
  }

  .xs\:cu-pb-3 {
    padding-bottom: var(--canon-space-3);
  }

  .xs\:cu-pb-4 {
    padding-bottom: var(--canon-space-4);
  }

  .xs\:cu-pb-5 {
    padding-bottom: var(--canon-space-5);
  }

  .xs\:cu-pb-6 {
    padding-bottom: var(--canon-space-6);
  }

  .xs\:cu-pb-7 {
    padding-bottom: var(--canon-space-7);
  }

  .xs\:cu-pb-8 {
    padding-bottom: var(--canon-space-8);
  }

  .xs\:cu-pb-9 {
    padding-bottom: var(--canon-space-9);
  }

  .xs\:cu-pb-10 {
    padding-bottom: var(--canon-space-10);
  }

  .xs\:cu-pb-11 {
    padding-bottom: var(--canon-space-11);
  }

  .xs\:cu-pb-12 {
    padding-bottom: var(--canon-space-12);
  }

  .xs\:cu-pb-13 {
    padding-bottom: var(--canon-space-13);
  }

  .xs\:cu-pb-14 {
    padding-bottom: var(--canon-space-14);
  }
}

@media (width >= 768px) {
  .sm\:cu-pb {
    padding-bottom: var(--pb-sm);
  }

  .sm\:cu-pb-0\.5 {
    padding-bottom: var(--canon-space-0_5);
  }

  .sm\:cu-pb-1 {
    padding-bottom: var(--canon-space-1);
  }

  .sm\:cu-pb-1\.5 {
    padding-bottom: var(--canon-space-1_5);
  }

  .sm\:cu-pb-2 {
    padding-bottom: var(--canon-space-2);
  }

  .sm\:cu-pb-3 {
    padding-bottom: var(--canon-space-3);
  }

  .sm\:cu-pb-4 {
    padding-bottom: var(--canon-space-4);
  }

  .sm\:cu-pb-5 {
    padding-bottom: var(--canon-space-5);
  }

  .sm\:cu-pb-6 {
    padding-bottom: var(--canon-space-6);
  }

  .sm\:cu-pb-7 {
    padding-bottom: var(--canon-space-7);
  }

  .sm\:cu-pb-8 {
    padding-bottom: var(--canon-space-8);
  }

  .sm\:cu-pb-9 {
    padding-bottom: var(--canon-space-9);
  }

  .sm\:cu-pb-10 {
    padding-bottom: var(--canon-space-10);
  }

  .sm\:cu-pb-11 {
    padding-bottom: var(--canon-space-11);
  }

  .sm\:cu-pb-12 {
    padding-bottom: var(--canon-space-12);
  }

  .sm\:cu-pb-13 {
    padding-bottom: var(--canon-space-13);
  }

  .sm\:cu-pb-14 {
    padding-bottom: var(--canon-space-14);
  }
}

@media (width >= 1024px) {
  .md\:cu-pb {
    padding-bottom: var(--pb-md);
  }

  .md\:cu-pb-0\.5 {
    padding-bottom: var(--canon-space-0_5);
  }

  .md\:cu-pb-1 {
    padding-bottom: var(--canon-space-1);
  }

  .md\:cu-pb-1\.5 {
    padding-bottom: var(--canon-space-1_5);
  }

  .md\:cu-pb-2 {
    padding-bottom: var(--canon-space-2);
  }

  .md\:cu-pb-3 {
    padding-bottom: var(--canon-space-3);
  }

  .md\:cu-pb-4 {
    padding-bottom: var(--canon-space-4);
  }

  .md\:cu-pb-5 {
    padding-bottom: var(--canon-space-5);
  }

  .md\:cu-pb-6 {
    padding-bottom: var(--canon-space-6);
  }

  .md\:cu-pb-7 {
    padding-bottom: var(--canon-space-7);
  }

  .md\:cu-pb-8 {
    padding-bottom: var(--canon-space-8);
  }

  .md\:cu-pb-9 {
    padding-bottom: var(--canon-space-9);
  }

  .md\:cu-pb-10 {
    padding-bottom: var(--canon-space-10);
  }

  .md\:cu-pb-11 {
    padding-bottom: var(--canon-space-11);
  }

  .md\:cu-pb-12 {
    padding-bottom: var(--canon-space-12);
  }

  .md\:cu-pb-13 {
    padding-bottom: var(--canon-space-13);
  }

  .md\:cu-pb-14 {
    padding-bottom: var(--canon-space-14);
  }
}

@media (width >= 1280px) {
  .lg\:cu-pb {
    padding-bottom: var(--pb-lg);
  }

  .lg\:cu-pb-0\.5 {
    padding-bottom: var(--canon-space-0_5);
  }

  .lg\:cu-pb-1 {
    padding-bottom: var(--canon-space-1);
  }

  .lg\:cu-pb-1\.5 {
    padding-bottom: var(--canon-space-1_5);
  }

  .lg\:cu-pb-2 {
    padding-bottom: var(--canon-space-2);
  }

  .lg\:cu-pb-3 {
    padding-bottom: var(--canon-space-3);
  }

  .lg\:cu-pb-4 {
    padding-bottom: var(--canon-space-4);
  }

  .lg\:cu-pb-5 {
    padding-bottom: var(--canon-space-5);
  }

  .lg\:cu-pb-6 {
    padding-bottom: var(--canon-space-6);
  }

  .lg\:cu-pb-7 {
    padding-bottom: var(--canon-space-7);
  }

  .lg\:cu-pb-8 {
    padding-bottom: var(--canon-space-8);
  }

  .lg\:cu-pb-9 {
    padding-bottom: var(--canon-space-9);
  }

  .lg\:cu-pb-10 {
    padding-bottom: var(--canon-space-10);
  }

  .lg\:cu-pb-11 {
    padding-bottom: var(--canon-space-11);
  }

  .lg\:cu-pb-12 {
    padding-bottom: var(--canon-space-12);
  }

  .lg\:cu-pb-13 {
    padding-bottom: var(--canon-space-13);
  }

  .lg\:cu-pb-14 {
    padding-bottom: var(--canon-space-14);
  }
}

@media (width >= 1536px) {
  .xl\:cu-pb {
    padding-bottom: var(--pb-xl);
  }

  .xl\:cu-pb-0\.5 {
    padding-bottom: var(--canon-space-0_5);
  }

  .xl\:cu-pb-1 {
    padding-bottom: var(--canon-space-1);
  }

  .xl\:cu-pb-1\.5 {
    padding-bottom: var(--canon-space-1_5);
  }

  .xl\:cu-pb-2 {
    padding-bottom: var(--canon-space-2);
  }

  .xl\:cu-pb-3 {
    padding-bottom: var(--canon-space-3);
  }

  .xl\:cu-pb-4 {
    padding-bottom: var(--canon-space-4);
  }

  .xl\:cu-pb-5 {
    padding-bottom: var(--canon-space-5);
  }

  .xl\:cu-pb-6 {
    padding-bottom: var(--canon-space-6);
  }

  .xl\:cu-pb-7 {
    padding-bottom: var(--canon-space-7);
  }

  .xl\:cu-pb-8 {
    padding-bottom: var(--canon-space-8);
  }

  .xl\:cu-pb-9 {
    padding-bottom: var(--canon-space-9);
  }

  .xl\:cu-pb-10 {
    padding-bottom: var(--canon-space-10);
  }

  .xl\:cu-pb-11 {
    padding-bottom: var(--canon-space-11);
  }

  .xl\:cu-pb-12 {
    padding-bottom: var(--canon-space-12);
  }

  .xl\:cu-pb-13 {
    padding-bottom: var(--canon-space-13);
  }

  .xl\:cu-pb-14 {
    padding-bottom: var(--canon-space-14);
  }
}

.cu-py {
  padding-top: var(--py);
  padding-bottom: var(--py);
}

.cu-py-0\.5 {
  padding-top: var(--canon-space-0_5);
  padding-bottom: var(--canon-space-0_5);
}

.cu-py-1 {
  padding-top: var(--canon-space-1);
  padding-bottom: var(--canon-space-1);
}

.cu-py-1\.5 {
  padding-top: var(--canon-space-1_5);
  padding-bottom: var(--canon-space-1_5);
}

.cu-py-2 {
  padding-top: var(--canon-space-2);
  padding-bottom: var(--canon-space-2);
}

.cu-py-3 {
  padding-top: var(--canon-space-3);
  padding-bottom: var(--canon-space-3);
}

.cu-py-4 {
  padding-top: var(--canon-space-4);
  padding-bottom: var(--canon-space-4);
}

.cu-py-5 {
  padding-top: var(--canon-space-5);
  padding-bottom: var(--canon-space-5);
}

.cu-py-6 {
  padding-top: var(--canon-space-6);
  padding-bottom: var(--canon-space-6);
}

.cu-py-7 {
  padding-top: var(--canon-space-7);
  padding-bottom: var(--canon-space-7);
}

.cu-py-8 {
  padding-top: var(--canon-space-8);
  padding-bottom: var(--canon-space-8);
}

.cu-py-9 {
  padding-top: var(--canon-space-9);
  padding-bottom: var(--canon-space-9);
}

.cu-py-10 {
  padding-top: var(--canon-space-10);
  padding-bottom: var(--canon-space-10);
}

.cu-py-11 {
  padding-top: var(--canon-space-11);
  padding-bottom: var(--canon-space-11);
}

.cu-py-12 {
  padding-top: var(--canon-space-12);
  padding-bottom: var(--canon-space-12);
}

.cu-py-13 {
  padding-top: var(--canon-space-13);
  padding-bottom: var(--canon-space-13);
}

.cu-py-14 {
  padding-top: var(--canon-space-14);
  padding-bottom: var(--canon-space-14);
}

@media (width >= 640px) {
  .xs\:cu-py {
    padding-top: var(--py-xs);
    padding-bottom: var(--py-xs);
  }

  .xs\:cu-py-0\.5 {
    padding-top: var(--canon-space-0_5);
    padding-bottom: var(--canon-space-0_5);
  }

  .xs\:cu-py-1 {
    padding-top: var(--canon-space-1);
    padding-bottom: var(--canon-space-1);
  }

  .xs\:cu-py-1\.5 {
    padding-top: var(--canon-space-1_5);
    padding-bottom: var(--canon-space-1_5);
  }

  .xs\:cu-py-2 {
    padding-top: var(--canon-space-2);
    padding-bottom: var(--canon-space-2);
  }

  .xs\:cu-py-3 {
    padding-top: var(--canon-space-3);
    padding-bottom: var(--canon-space-3);
  }

  .xs\:cu-py-4 {
    padding-top: var(--canon-space-4);
    padding-bottom: var(--canon-space-4);
  }

  .xs\:cu-py-5 {
    padding-top: var(--canon-space-5);
    padding-bottom: var(--canon-space-5);
  }

  .xs\:cu-py-6 {
    padding-top: var(--canon-space-6);
    padding-bottom: var(--canon-space-6);
  }

  .xs\:cu-py-7 {
    padding-top: var(--canon-space-7);
    padding-bottom: var(--canon-space-7);
  }

  .xs\:cu-py-8 {
    padding-top: var(--canon-space-8);
    padding-bottom: var(--canon-space-8);
  }

  .xs\:cu-py-9 {
    padding-top: var(--canon-space-9);
    padding-bottom: var(--canon-space-9);
  }

  .xs\:cu-py-10 {
    padding-top: var(--canon-space-10);
    padding-bottom: var(--canon-space-10);
  }

  .xs\:cu-py-11 {
    padding-top: var(--canon-space-11);
    padding-bottom: var(--canon-space-11);
  }

  .xs\:cu-py-12 {
    padding-top: var(--canon-space-12);
    padding-bottom: var(--canon-space-12);
  }

  .xs\:cu-py-13 {
    padding-top: var(--canon-space-13);
    padding-bottom: var(--canon-space-13);
  }

  .xs\:cu-py-14 {
    padding-top: var(--canon-space-14);
    padding-bottom: var(--canon-space-14);
  }
}

@media (width >= 768px) {
  .sm\:cu-py {
    padding-top: var(--py-sm);
    padding-bottom: var(--py-sm);
  }

  .sm\:cu-py-0\.5 {
    padding-top: var(--canon-space-0_5);
    padding-bottom: var(--canon-space-0_5);
  }

  .sm\:cu-py-1 {
    padding-top: var(--canon-space-1);
    padding-bottom: var(--canon-space-1);
  }

  .sm\:cu-py-1\.5 {
    padding-top: var(--canon-space-1_5);
    padding-bottom: var(--canon-space-1_5);
  }

  .sm\:cu-py-2 {
    padding-top: var(--canon-space-2);
    padding-bottom: var(--canon-space-2);
  }

  .sm\:cu-py-3 {
    padding-top: var(--canon-space-3);
    padding-bottom: var(--canon-space-3);
  }

  .sm\:cu-py-4 {
    padding-top: var(--canon-space-4);
    padding-bottom: var(--canon-space-4);
  }

  .sm\:cu-py-5 {
    padding-top: var(--canon-space-5);
    padding-bottom: var(--canon-space-5);
  }

  .sm\:cu-py-6 {
    padding-top: var(--canon-space-6);
    padding-bottom: var(--canon-space-6);
  }

  .sm\:cu-py-7 {
    padding-top: var(--canon-space-7);
    padding-bottom: var(--canon-space-7);
  }

  .sm\:cu-py-8 {
    padding-top: var(--canon-space-8);
    padding-bottom: var(--canon-space-8);
  }

  .sm\:cu-py-9 {
    padding-top: var(--canon-space-9);
    padding-bottom: var(--canon-space-9);
  }

  .sm\:cu-py-10 {
    padding-top: var(--canon-space-10);
    padding-bottom: var(--canon-space-10);
  }

  .sm\:cu-py-11 {
    padding-top: var(--canon-space-11);
    padding-bottom: var(--canon-space-11);
  }

  .sm\:cu-py-12 {
    padding-top: var(--canon-space-12);
    padding-bottom: var(--canon-space-12);
  }

  .sm\:cu-py-13 {
    padding-top: var(--canon-space-13);
    padding-bottom: var(--canon-space-13);
  }

  .sm\:cu-py-14 {
    padding-top: var(--canon-space-14);
    padding-bottom: var(--canon-space-14);
  }
}

@media (width >= 1024px) {
  .md\:cu-py {
    padding-top: var(--py-md);
    padding-bottom: var(--py-md);
  }

  .md\:cu-py-0\.5 {
    padding-top: var(--canon-space-0_5);
    padding-bottom: var(--canon-space-0_5);
  }

  .md\:cu-py-1 {
    padding-top: var(--canon-space-1);
    padding-bottom: var(--canon-space-1);
  }

  .md\:cu-py-1\.5 {
    padding-top: var(--canon-space-1_5);
    padding-bottom: var(--canon-space-1_5);
  }

  .md\:cu-py-2 {
    padding-top: var(--canon-space-2);
    padding-bottom: var(--canon-space-2);
  }

  .md\:cu-py-3 {
    padding-top: var(--canon-space-3);
    padding-bottom: var(--canon-space-3);
  }

  .md\:cu-py-4 {
    padding-top: var(--canon-space-4);
    padding-bottom: var(--canon-space-4);
  }

  .md\:cu-py-5 {
    padding-top: var(--canon-space-5);
    padding-bottom: var(--canon-space-5);
  }

  .md\:cu-py-6 {
    padding-top: var(--canon-space-6);
    padding-bottom: var(--canon-space-6);
  }

  .md\:cu-py-7 {
    padding-top: var(--canon-space-7);
    padding-bottom: var(--canon-space-7);
  }

  .md\:cu-py-8 {
    padding-top: var(--canon-space-8);
    padding-bottom: var(--canon-space-8);
  }

  .md\:cu-py-9 {
    padding-top: var(--canon-space-9);
    padding-bottom: var(--canon-space-9);
  }

  .md\:cu-py-10 {
    padding-top: var(--canon-space-10);
    padding-bottom: var(--canon-space-10);
  }

  .md\:cu-py-11 {
    padding-top: var(--canon-space-11);
    padding-bottom: var(--canon-space-11);
  }

  .md\:cu-py-12 {
    padding-top: var(--canon-space-12);
    padding-bottom: var(--canon-space-12);
  }

  .md\:cu-py-13 {
    padding-top: var(--canon-space-13);
    padding-bottom: var(--canon-space-13);
  }

  .md\:cu-py-14 {
    padding-top: var(--canon-space-14);
    padding-bottom: var(--canon-space-14);
  }
}

@media (width >= 1280px) {
  .lg\:cu-py {
    padding-top: var(--py-lg);
    padding-bottom: var(--py-lg);
  }

  .lg\:cu-py-0\.5 {
    padding-top: var(--canon-space-0_5);
    padding-bottom: var(--canon-space-0_5);
  }

  .lg\:cu-py-1 {
    padding-top: var(--canon-space-1);
    padding-bottom: var(--canon-space-1);
  }

  .lg\:cu-py-1\.5 {
    padding-top: var(--canon-space-1_5);
    padding-bottom: var(--canon-space-1_5);
  }

  .lg\:cu-py-2 {
    padding-top: var(--canon-space-2);
    padding-bottom: var(--canon-space-2);
  }

  .lg\:cu-py-3 {
    padding-top: var(--canon-space-3);
    padding-bottom: var(--canon-space-3);
  }

  .lg\:cu-py-4 {
    padding-top: var(--canon-space-4);
    padding-bottom: var(--canon-space-4);
  }

  .lg\:cu-py-5 {
    padding-top: var(--canon-space-5);
    padding-bottom: var(--canon-space-5);
  }

  .lg\:cu-py-6 {
    padding-top: var(--canon-space-6);
    padding-bottom: var(--canon-space-6);
  }

  .lg\:cu-py-7 {
    padding-top: var(--canon-space-7);
    padding-bottom: var(--canon-space-7);
  }

  .lg\:cu-py-8 {
    padding-top: var(--canon-space-8);
    padding-bottom: var(--canon-space-8);
  }

  .lg\:cu-py-9 {
    padding-top: var(--canon-space-9);
    padding-bottom: var(--canon-space-9);
  }

  .lg\:cu-py-10 {
    padding-top: var(--canon-space-10);
    padding-bottom: var(--canon-space-10);
  }

  .lg\:cu-py-11 {
    padding-top: var(--canon-space-11);
    padding-bottom: var(--canon-space-11);
  }

  .lg\:cu-py-12 {
    padding-top: var(--canon-space-12);
    padding-bottom: var(--canon-space-12);
  }

  .lg\:cu-py-13 {
    padding-top: var(--canon-space-13);
    padding-bottom: var(--canon-space-13);
  }

  .lg\:cu-py-14 {
    padding-top: var(--canon-space-14);
    padding-bottom: var(--canon-space-14);
  }
}

@media (width >= 1536px) {
  .xl\:cu-py {
    padding-top: var(--py-xl);
    padding-bottom: var(--py-xl);
  }

  .xl\:cu-py-0\.5 {
    padding-top: var(--canon-space-0_5);
    padding-bottom: var(--canon-space-0_5);
  }

  .xl\:cu-py-1 {
    padding-top: var(--canon-space-1);
    padding-bottom: var(--canon-space-1);
  }

  .xl\:cu-py-1\.5 {
    padding-top: var(--canon-space-1_5);
    padding-bottom: var(--canon-space-1_5);
  }

  .xl\:cu-py-2 {
    padding-top: var(--canon-space-2);
    padding-bottom: var(--canon-space-2);
  }

  .xl\:cu-py-3 {
    padding-top: var(--canon-space-3);
    padding-bottom: var(--canon-space-3);
  }

  .xl\:cu-py-4 {
    padding-top: var(--canon-space-4);
    padding-bottom: var(--canon-space-4);
  }

  .xl\:cu-py-5 {
    padding-top: var(--canon-space-5);
    padding-bottom: var(--canon-space-5);
  }

  .xl\:cu-py-6 {
    padding-top: var(--canon-space-6);
    padding-bottom: var(--canon-space-6);
  }

  .xl\:cu-py-7 {
    padding-top: var(--canon-space-7);
    padding-bottom: var(--canon-space-7);
  }

  .xl\:cu-py-8 {
    padding-top: var(--canon-space-8);
    padding-bottom: var(--canon-space-8);
  }

  .xl\:cu-py-9 {
    padding-top: var(--canon-space-9);
    padding-bottom: var(--canon-space-9);
  }

  .xl\:cu-py-10 {
    padding-top: var(--canon-space-10);
    padding-bottom: var(--canon-space-10);
  }

  .xl\:cu-py-11 {
    padding-top: var(--canon-space-11);
    padding-bottom: var(--canon-space-11);
  }

  .xl\:cu-py-12 {
    padding-top: var(--canon-space-12);
    padding-bottom: var(--canon-space-12);
  }

  .xl\:cu-py-13 {
    padding-top: var(--canon-space-13);
    padding-bottom: var(--canon-space-13);
  }

  .xl\:cu-py-14 {
    padding-top: var(--canon-space-14);
    padding-bottom: var(--canon-space-14);
  }
}

.cu-px {
  padding-left: var(--px);
  padding-right: var(--px);
}

.cu-px-0\.5 {
  padding-left: var(--canon-space-0_5);
  padding-right: var(--canon-space-0_5);
}

.cu-px-1 {
  padding-left: var(--canon-space-1);
  padding-right: var(--canon-space-1);
}

.cu-px-1\.5 {
  padding-left: var(--canon-space-1_5);
  padding-right: var(--canon-space-1_5);
}

.cu-px-2 {
  padding-left: var(--canon-space-2);
  padding-right: var(--canon-space-2);
}

.cu-px-3 {
  padding-left: var(--canon-space-3);
  padding-right: var(--canon-space-3);
}

.cu-px-4 {
  padding-left: var(--canon-space-4);
  padding-right: var(--canon-space-4);
}

.cu-px-5 {
  padding-left: var(--canon-space-5);
  padding-right: var(--canon-space-5);
}

.cu-px-6 {
  padding-left: var(--canon-space-6);
  padding-right: var(--canon-space-6);
}

.cu-px-7 {
  padding-left: var(--canon-space-7);
  padding-right: var(--canon-space-7);
}

.cu-px-8 {
  padding-left: var(--canon-space-8);
  padding-right: var(--canon-space-8);
}

.cu-px-9 {
  padding-left: var(--canon-space-9);
  padding-right: var(--canon-space-9);
}

.cu-px-10 {
  padding-left: var(--canon-space-10);
  padding-right: var(--canon-space-10);
}

.cu-px-11 {
  padding-left: var(--canon-space-11);
  padding-right: var(--canon-space-11);
}

.cu-px-12 {
  padding-left: var(--canon-space-12);
  padding-right: var(--canon-space-12);
}

.cu-px-13 {
  padding-left: var(--canon-space-13);
  padding-right: var(--canon-space-13);
}

.cu-px-14 {
  padding-left: var(--canon-space-14);
  padding-right: var(--canon-space-14);
}

@media (width >= 640px) {
  .xs\:cu-px {
    padding-left: var(--px-xs);
    padding-right: var(--px-xs);
  }

  .xs\:cu-px-0\.5 {
    padding-left: var(--canon-space-0_5);
    padding-right: var(--canon-space-0_5);
  }

  .xs\:cu-px-1 {
    padding-left: var(--canon-space-1);
    padding-right: var(--canon-space-1);
  }

  .xs\:cu-px-1\.5 {
    padding-left: var(--canon-space-1_5);
    padding-right: var(--canon-space-1_5);
  }

  .xs\:cu-px-2 {
    padding-left: var(--canon-space-2);
    padding-right: var(--canon-space-2);
  }

  .xs\:cu-px-3 {
    padding-left: var(--canon-space-3);
    padding-right: var(--canon-space-3);
  }

  .xs\:cu-px-4 {
    padding-left: var(--canon-space-4);
    padding-right: var(--canon-space-4);
  }

  .xs\:cu-px-5 {
    padding-left: var(--canon-space-5);
    padding-right: var(--canon-space-5);
  }

  .xs\:cu-px-6 {
    padding-left: var(--canon-space-6);
    padding-right: var(--canon-space-6);
  }

  .xs\:cu-px-7 {
    padding-left: var(--canon-space-7);
    padding-right: var(--canon-space-7);
  }

  .xs\:cu-px-8 {
    padding-left: var(--canon-space-8);
    padding-right: var(--canon-space-8);
  }

  .xs\:cu-px-9 {
    padding-left: var(--canon-space-9);
    padding-right: var(--canon-space-9);
  }

  .xs\:cu-px-10 {
    padding-left: var(--canon-space-10);
    padding-right: var(--canon-space-10);
  }

  .xs\:cu-px-11 {
    padding-left: var(--canon-space-11);
    padding-right: var(--canon-space-11);
  }

  .xs\:cu-px-12 {
    padding-left: var(--canon-space-12);
    padding-right: var(--canon-space-12);
  }

  .xs\:cu-px-13 {
    padding-left: var(--canon-space-13);
    padding-right: var(--canon-space-13);
  }

  .xs\:cu-px-14 {
    padding-left: var(--canon-space-14);
    padding-right: var(--canon-space-14);
  }
}

@media (width >= 768px) {
  .sm\:cu-px {
    padding-left: var(--px-sm);
    padding-right: var(--px-sm);
  }

  .sm\:cu-px-0\.5 {
    padding-left: var(--canon-space-0_5);
    padding-right: var(--canon-space-0_5);
  }

  .sm\:cu-px-1 {
    padding-left: var(--canon-space-1);
    padding-right: var(--canon-space-1);
  }

  .sm\:cu-px-1\.5 {
    padding-left: var(--canon-space-1_5);
    padding-right: var(--canon-space-1_5);
  }

  .sm\:cu-px-2 {
    padding-left: var(--canon-space-2);
    padding-right: var(--canon-space-2);
  }

  .sm\:cu-px-3 {
    padding-left: var(--canon-space-3);
    padding-right: var(--canon-space-3);
  }

  .sm\:cu-px-4 {
    padding-left: var(--canon-space-4);
    padding-right: var(--canon-space-4);
  }

  .sm\:cu-px-5 {
    padding-left: var(--canon-space-5);
    padding-right: var(--canon-space-5);
  }

  .sm\:cu-px-6 {
    padding-left: var(--canon-space-6);
    padding-right: var(--canon-space-6);
  }

  .sm\:cu-px-7 {
    padding-left: var(--canon-space-7);
    padding-right: var(--canon-space-7);
  }

  .sm\:cu-px-8 {
    padding-left: var(--canon-space-8);
    padding-right: var(--canon-space-8);
  }

  .sm\:cu-px-9 {
    padding-left: var(--canon-space-9);
    padding-right: var(--canon-space-9);
  }

  .sm\:cu-px-10 {
    padding-left: var(--canon-space-10);
    padding-right: var(--canon-space-10);
  }

  .sm\:cu-px-11 {
    padding-left: var(--canon-space-11);
    padding-right: var(--canon-space-11);
  }

  .sm\:cu-px-12 {
    padding-left: var(--canon-space-12);
    padding-right: var(--canon-space-12);
  }

  .sm\:cu-px-13 {
    padding-left: var(--canon-space-13);
    padding-right: var(--canon-space-13);
  }

  .sm\:cu-px-14 {
    padding-left: var(--canon-space-14);
    padding-right: var(--canon-space-14);
  }
}

@media (width >= 1024px) {
  .md\:cu-px {
    padding-left: var(--px-md);
    padding-right: var(--px-md);
  }

  .md\:cu-px-0\.5 {
    padding-left: var(--canon-space-0_5);
    padding-right: var(--canon-space-0_5);
  }

  .md\:cu-px-1 {
    padding-left: var(--canon-space-1);
    padding-right: var(--canon-space-1);
  }

  .md\:cu-px-1\.5 {
    padding-left: var(--canon-space-1_5);
    padding-right: var(--canon-space-1_5);
  }

  .md\:cu-px-2 {
    padding-left: var(--canon-space-2);
    padding-right: var(--canon-space-2);
  }

  .md\:cu-px-3 {
    padding-left: var(--canon-space-3);
    padding-right: var(--canon-space-3);
  }

  .md\:cu-px-4 {
    padding-left: var(--canon-space-4);
    padding-right: var(--canon-space-4);
  }

  .md\:cu-px-5 {
    padding-left: var(--canon-space-5);
    padding-right: var(--canon-space-5);
  }

  .md\:cu-px-6 {
    padding-left: var(--canon-space-6);
    padding-right: var(--canon-space-6);
  }

  .md\:cu-px-7 {
    padding-left: var(--canon-space-7);
    padding-right: var(--canon-space-7);
  }

  .md\:cu-px-8 {
    padding-left: var(--canon-space-8);
    padding-right: var(--canon-space-8);
  }

  .md\:cu-px-9 {
    padding-left: var(--canon-space-9);
    padding-right: var(--canon-space-9);
  }

  .md\:cu-px-10 {
    padding-left: var(--canon-space-10);
    padding-right: var(--canon-space-10);
  }

  .md\:cu-px-11 {
    padding-left: var(--canon-space-11);
    padding-right: var(--canon-space-11);
  }

  .md\:cu-px-12 {
    padding-left: var(--canon-space-12);
    padding-right: var(--canon-space-12);
  }

  .md\:cu-px-13 {
    padding-left: var(--canon-space-13);
    padding-right: var(--canon-space-13);
  }

  .md\:cu-px-14 {
    padding-left: var(--canon-space-14);
    padding-right: var(--canon-space-14);
  }
}

@media (width >= 1280px) {
  .lg\:cu-px {
    padding-left: var(--px-lg);
    padding-right: var(--px-lg);
  }

  .lg\:cu-px-0\.5 {
    padding-left: var(--canon-space-0_5);
    padding-right: var(--canon-space-0_5);
  }

  .lg\:cu-px-1 {
    padding-left: var(--canon-space-1);
    padding-right: var(--canon-space-1);
  }

  .lg\:cu-px-1\.5 {
    padding-left: var(--canon-space-1_5);
    padding-right: var(--canon-space-1_5);
  }

  .lg\:cu-px-2 {
    padding-left: var(--canon-space-2);
    padding-right: var(--canon-space-2);
  }

  .lg\:cu-px-3 {
    padding-left: var(--canon-space-3);
    padding-right: var(--canon-space-3);
  }

  .lg\:cu-px-4 {
    padding-left: var(--canon-space-4);
    padding-right: var(--canon-space-4);
  }

  .lg\:cu-px-5 {
    padding-left: var(--canon-space-5);
    padding-right: var(--canon-space-5);
  }

  .lg\:cu-px-6 {
    padding-left: var(--canon-space-6);
    padding-right: var(--canon-space-6);
  }

  .lg\:cu-px-7 {
    padding-left: var(--canon-space-7);
    padding-right: var(--canon-space-7);
  }

  .lg\:cu-px-8 {
    padding-left: var(--canon-space-8);
    padding-right: var(--canon-space-8);
  }

  .lg\:cu-px-9 {
    padding-left: var(--canon-space-9);
    padding-right: var(--canon-space-9);
  }

  .lg\:cu-px-10 {
    padding-left: var(--canon-space-10);
    padding-right: var(--canon-space-10);
  }

  .lg\:cu-px-11 {
    padding-left: var(--canon-space-11);
    padding-right: var(--canon-space-11);
  }

  .lg\:cu-px-12 {
    padding-left: var(--canon-space-12);
    padding-right: var(--canon-space-12);
  }

  .lg\:cu-px-13 {
    padding-left: var(--canon-space-13);
    padding-right: var(--canon-space-13);
  }

  .lg\:cu-px-14 {
    padding-left: var(--canon-space-14);
    padding-right: var(--canon-space-14);
  }
}

@media (width >= 1536px) {
  .xl\:cu-px {
    padding-left: var(--px-xl);
    padding-right: var(--px-xl);
  }

  .xl\:cu-px-0\.5 {
    padding-left: var(--canon-space-0_5);
    padding-right: var(--canon-space-0_5);
  }

  .xl\:cu-px-1 {
    padding-left: var(--canon-space-1);
    padding-right: var(--canon-space-1);
  }

  .xl\:cu-px-1\.5 {
    padding-left: var(--canon-space-1_5);
    padding-right: var(--canon-space-1_5);
  }

  .xl\:cu-px-2 {
    padding-left: var(--canon-space-2);
    padding-right: var(--canon-space-2);
  }

  .xl\:cu-px-3 {
    padding-left: var(--canon-space-3);
    padding-right: var(--canon-space-3);
  }

  .xl\:cu-px-4 {
    padding-left: var(--canon-space-4);
    padding-right: var(--canon-space-4);
  }

  .xl\:cu-px-5 {
    padding-left: var(--canon-space-5);
    padding-right: var(--canon-space-5);
  }

  .xl\:cu-px-6 {
    padding-left: var(--canon-space-6);
    padding-right: var(--canon-space-6);
  }

  .xl\:cu-px-7 {
    padding-left: var(--canon-space-7);
    padding-right: var(--canon-space-7);
  }

  .xl\:cu-px-8 {
    padding-left: var(--canon-space-8);
    padding-right: var(--canon-space-8);
  }

  .xl\:cu-px-9 {
    padding-left: var(--canon-space-9);
    padding-right: var(--canon-space-9);
  }

  .xl\:cu-px-10 {
    padding-left: var(--canon-space-10);
    padding-right: var(--canon-space-10);
  }

  .xl\:cu-px-11 {
    padding-left: var(--canon-space-11);
    padding-right: var(--canon-space-11);
  }

  .xl\:cu-px-12 {
    padding-left: var(--canon-space-12);
    padding-right: var(--canon-space-12);
  }

  .xl\:cu-px-13 {
    padding-left: var(--canon-space-13);
    padding-right: var(--canon-space-13);
  }

  .xl\:cu-px-14 {
    padding-left: var(--canon-space-14);
    padding-right: var(--canon-space-14);
  }
}

.cu-m {
  margin: var(--m);
}

.cu-m-0\.5 {
  margin: var(--canon-space-0_5);
}

.cu-m-1 {
  margin: var(--canon-space-1);
}

.cu-m-1\.5 {
  margin: var(--canon-space-1_5);
}

.cu-m-2 {
  margin: var(--canon-space-2);
}

.cu-m-3 {
  margin: var(--canon-space-3);
}

.cu-m-4 {
  margin: var(--canon-space-4);
}

.cu-m-5 {
  margin: var(--canon-space-5);
}

.cu-m-6 {
  margin: var(--canon-space-6);
}

.cu-m-7 {
  margin: var(--canon-space-7);
}

.cu-m-8 {
  margin: var(--canon-space-8);
}

.cu-m-9 {
  margin: var(--canon-space-9);
}

.cu-m-10 {
  margin: var(--canon-space-10);
}

.cu-m-11 {
  margin: var(--canon-space-11);
}

.cu-m-12 {
  margin: var(--canon-space-12);
}

.cu-m-13 {
  margin: var(--canon-space-13);
}

.cu-m-14 {
  margin: var(--canon-space-14);
}

@media (width >= 640px) {
  .xs\:cu-m {
    margin: var(--p-xs);
  }

  .xs\:cu-m-0\.5 {
    margin: var(--canon-space-0_5);
  }

  .xs\:cu-m-1 {
    margin: var(--canon-space-1);
  }

  .xs\:cu-m-1\.5 {
    margin: var(--canon-space-1_5);
  }

  .xs\:cu-m-2 {
    margin: var(--canon-space-2);
  }

  .xs\:cu-m-3 {
    margin: var(--canon-space-3);
  }

  .xs\:cu-m-4 {
    margin: var(--canon-space-4);
  }

  .xs\:cu-m-5 {
    margin: var(--canon-space-5);
  }

  .xs\:cu-m-6 {
    margin: var(--canon-space-6);
  }

  .xs\:cu-m-7 {
    margin: var(--canon-space-7);
  }

  .xs\:cu-m-8 {
    margin: var(--canon-space-8);
  }

  .xs\:cu-m-9 {
    margin: var(--canon-space-9);
  }

  .xs\:cu-m-10 {
    margin: var(--canon-space-10);
  }

  .xs\:cu-m-11 {
    margin: var(--canon-space-11);
  }

  .xs\:cu-m-12 {
    margin: var(--canon-space-12);
  }

  .xs\:cu-m-13 {
    margin: var(--canon-space-13);
  }

  .xs\:cu-m-14 {
    margin: var(--canon-space-14);
  }
}

@media (width >= 768px) {
  .sm\:cu-m {
    margin: var(--p-sm);
  }

  .sm\:cu-m-0\.5 {
    margin: var(--canon-space-0_5);
  }

  .sm\:cu-m-1 {
    margin: var(--canon-space-1);
  }

  .sm\:cu-m-1\.5 {
    margin: var(--canon-space-1_5);
  }

  .sm\:cu-m-2 {
    margin: var(--canon-space-2);
  }

  .sm\:cu-m-3 {
    margin: var(--canon-space-3);
  }

  .sm\:cu-m-4 {
    margin: var(--canon-space-4);
  }

  .sm\:cu-m-5 {
    margin: var(--canon-space-5);
  }

  .sm\:cu-m-6 {
    margin: var(--canon-space-6);
  }

  .sm\:cu-m-7 {
    margin: var(--canon-space-7);
  }

  .sm\:cu-m-8 {
    margin: var(--canon-space-8);
  }

  .sm\:cu-m-9 {
    margin: var(--canon-space-9);
  }

  .sm\:cu-m-10 {
    margin: var(--canon-space-10);
  }

  .sm\:cu-m-11 {
    margin: var(--canon-space-11);
  }

  .sm\:cu-m-12 {
    margin: var(--canon-space-12);
  }

  .sm\:cu-m-13 {
    margin: var(--canon-space-13);
  }

  .sm\:cu-m-14 {
    margin: var(--canon-space-14);
  }
}

@media (width >= 1024px) {
  .md\:cu-m {
    margin: var(--p-md);
  }

  .md\:cu-m-0\.5 {
    margin: var(--canon-space-0_5);
  }

  .md\:cu-m-1 {
    margin: var(--canon-space-1);
  }

  .md\:cu-m-1\.5 {
    margin: var(--canon-space-1_5);
  }

  .md\:cu-m-2 {
    margin: var(--canon-space-2);
  }

  .md\:cu-m-3 {
    margin: var(--canon-space-3);
  }

  .md\:cu-m-4 {
    margin: var(--canon-space-4);
  }

  .md\:cu-m-5 {
    margin: var(--canon-space-5);
  }

  .md\:cu-m-6 {
    margin: var(--canon-space-6);
  }

  .md\:cu-m-7 {
    margin: var(--canon-space-7);
  }

  .md\:cu-m-8 {
    margin: var(--canon-space-8);
  }

  .md\:cu-m-9 {
    margin: var(--canon-space-9);
  }

  .md\:cu-m-10 {
    margin: var(--canon-space-10);
  }

  .md\:cu-m-11 {
    margin: var(--canon-space-11);
  }

  .md\:cu-m-12 {
    margin: var(--canon-space-12);
  }

  .md\:cu-m-13 {
    margin: var(--canon-space-13);
  }

  .md\:cu-m-14 {
    margin: var(--canon-space-14);
  }
}

@media (width >= 1280px) {
  .lg\:cu-m {
    margin: var(--p-lg);
  }

  .lg\:cu-m-0\.5 {
    margin: var(--canon-space-0_5);
  }

  .lg\:cu-m-1 {
    margin: var(--canon-space-1);
  }

  .lg\:cu-m-1\.5 {
    margin: var(--canon-space-1_5);
  }

  .lg\:cu-m-2 {
    margin: var(--canon-space-2);
  }

  .lg\:cu-m-3 {
    margin: var(--canon-space-3);
  }

  .lg\:cu-m-4 {
    margin: var(--canon-space-4);
  }

  .lg\:cu-m-5 {
    margin: var(--canon-space-5);
  }

  .lg\:cu-m-6 {
    margin: var(--canon-space-6);
  }

  .lg\:cu-m-7 {
    margin: var(--canon-space-7);
  }

  .lg\:cu-m-8 {
    margin: var(--canon-space-8);
  }

  .lg\:cu-m-9 {
    margin: var(--canon-space-9);
  }

  .lg\:cu-m-10 {
    margin: var(--canon-space-10);
  }

  .lg\:cu-m-11 {
    margin: var(--canon-space-11);
  }

  .lg\:cu-m-12 {
    margin: var(--canon-space-12);
  }

  .lg\:cu-m-13 {
    margin: var(--canon-space-13);
  }

  .lg\:cu-m-14 {
    margin: var(--canon-space-14);
  }
}

@media (width >= 1536px) {
  .xl\:cu-m {
    margin: var(--p-xl);
  }

  .xl\:cu-m-0\.5 {
    margin: var(--canon-space-0_5);
  }

  .xl\:cu-m-1 {
    margin: var(--canon-space-1);
  }

  .xl\:cu-m-1\.5 {
    margin: var(--canon-space-1_5);
  }

  .xl\:cu-m-2 {
    margin: var(--canon-space-2);
  }

  .xl\:cu-m-3 {
    margin: var(--canon-space-3);
  }

  .xl\:cu-m-4 {
    margin: var(--canon-space-4);
  }

  .xl\:cu-m-5 {
    margin: var(--canon-space-5);
  }

  .xl\:cu-m-6 {
    margin: var(--canon-space-6);
  }

  .xl\:cu-m-7 {
    margin: var(--canon-space-7);
  }

  .xl\:cu-m-8 {
    margin: var(--canon-space-8);
  }

  .xl\:cu-m-9 {
    margin: var(--canon-space-9);
  }

  .xl\:cu-m-10 {
    margin: var(--canon-space-10);
  }

  .xl\:cu-m-11 {
    margin: var(--canon-space-11);
  }

  .xl\:cu-m-12 {
    margin: var(--canon-space-12);
  }

  .xl\:cu-m-13 {
    margin: var(--canon-space-13);
  }

  .xl\:cu-m-14 {
    margin: var(--canon-space-14);
  }
}

.cu-ml {
  margin-left: var(--ml);
}

.cu-ml-0\.5 {
  margin-left: var(--canon-space-0_5);
}

.cu-ml-1 {
  margin-left: var(--canon-space-1);
}

.cu-ml-1\.5 {
  margin-left: var(--canon-space-1_5);
}

.cu-ml-2 {
  margin-left: var(--canon-space-2);
}

.cu-ml-3 {
  margin-left: var(--canon-space-3);
}

.cu-ml-4 {
  margin-left: var(--canon-space-4);
}

.cu-ml-5 {
  margin-left: var(--canon-space-5);
}

.cu-ml-6 {
  margin-left: var(--canon-space-6);
}

.cu-ml-7 {
  margin-left: var(--canon-space-7);
}

.cu-ml-8 {
  margin-left: var(--canon-space-8);
}

.cu-ml-9 {
  margin-left: var(--canon-space-9);
}

.cu-ml-10 {
  margin-left: var(--canon-space-10);
}

.cu-ml-11 {
  margin-left: var(--canon-space-11);
}

.cu-ml-12 {
  margin-left: var(--canon-space-12);
}

.cu-ml-13 {
  margin-left: var(--canon-space-13);
}

.cu-ml-14 {
  margin-left: var(--canon-space-14);
}

@media (width >= 640px) {
  .xs\:cu-ml {
    margin-left: var(--pl-xs);
  }

  .xs\:cu-ml-0\.5 {
    margin-left: var(--canon-space-0_5);
  }

  .xs\:cu-ml-1 {
    margin-left: var(--canon-space-1);
  }

  .xs\:cu-ml-1\.5 {
    margin-left: var(--canon-space-1_5);
  }

  .xs\:cu-ml-2 {
    margin-left: var(--canon-space-2);
  }

  .xs\:cu-ml-3 {
    margin-left: var(--canon-space-3);
  }

  .xs\:cu-ml-4 {
    margin-left: var(--canon-space-4);
  }

  .xs\:cu-ml-5 {
    margin-left: var(--canon-space-5);
  }

  .xs\:cu-ml-6 {
    margin-left: var(--canon-space-6);
  }

  .xs\:cu-ml-7 {
    margin-left: var(--canon-space-7);
  }

  .xs\:cu-ml-8 {
    margin-left: var(--canon-space-8);
  }

  .xs\:cu-ml-9 {
    margin-left: var(--canon-space-9);
  }

  .xs\:cu-ml-10 {
    margin-left: var(--canon-space-10);
  }

  .xs\:cu-ml-11 {
    margin-left: var(--canon-space-11);
  }

  .xs\:cu-ml-12 {
    margin-left: var(--canon-space-12);
  }

  .xs\:cu-ml-13 {
    margin-left: var(--canon-space-13);
  }

  .xs\:cu-ml-14 {
    margin-left: var(--canon-space-14);
  }
}

@media (width >= 768px) {
  .sm\:cu-ml {
    margin-left: var(--pl-sm);
  }

  .sm\:cu-ml-0\.5 {
    margin-left: var(--canon-space-0_5);
  }

  .sm\:cu-ml-1 {
    margin-left: var(--canon-space-1);
  }

  .sm\:cu-ml-1\.5 {
    margin-left: var(--canon-space-1_5);
  }

  .sm\:cu-ml-2 {
    margin-left: var(--canon-space-2);
  }

  .sm\:cu-ml-3 {
    margin-left: var(--canon-space-3);
  }

  .sm\:cu-ml-4 {
    margin-left: var(--canon-space-4);
  }

  .sm\:cu-ml-5 {
    margin-left: var(--canon-space-5);
  }

  .sm\:cu-ml-6 {
    margin-left: var(--canon-space-6);
  }

  .sm\:cu-ml-7 {
    margin-left: var(--canon-space-7);
  }

  .sm\:cu-ml-8 {
    margin-left: var(--canon-space-8);
  }

  .sm\:cu-ml-9 {
    margin-left: var(--canon-space-9);
  }

  .sm\:cu-ml-10 {
    margin-left: var(--canon-space-10);
  }

  .sm\:cu-ml-11 {
    margin-left: var(--canon-space-11);
  }

  .sm\:cu-ml-12 {
    margin-left: var(--canon-space-12);
  }

  .sm\:cu-ml-13 {
    margin-left: var(--canon-space-13);
  }

  .sm\:cu-ml-14 {
    margin-left: var(--canon-space-14);
  }
}

@media (width >= 1024px) {
  .md\:cu-ml {
    margin-left: var(--pl-md);
  }

  .md\:cu-ml-0\.5 {
    margin-left: var(--canon-space-0_5);
  }

  .md\:cu-ml-1 {
    margin-left: var(--canon-space-1);
  }

  .md\:cu-ml-1\.5 {
    margin-left: var(--canon-space-1_5);
  }

  .md\:cu-ml-2 {
    margin-left: var(--canon-space-2);
  }

  .md\:cu-ml-3 {
    margin-left: var(--canon-space-3);
  }

  .md\:cu-ml-4 {
    margin-left: var(--canon-space-4);
  }

  .md\:cu-ml-5 {
    margin-left: var(--canon-space-5);
  }

  .md\:cu-ml-6 {
    margin-left: var(--canon-space-6);
  }

  .md\:cu-ml-7 {
    margin-left: var(--canon-space-7);
  }

  .md\:cu-ml-8 {
    margin-left: var(--canon-space-8);
  }

  .md\:cu-ml-9 {
    margin-left: var(--canon-space-9);
  }

  .md\:cu-ml-10 {
    margin-left: var(--canon-space-10);
  }

  .md\:cu-ml-11 {
    margin-left: var(--canon-space-11);
  }

  .md\:cu-ml-12 {
    margin-left: var(--canon-space-12);
  }

  .md\:cu-ml-13 {
    margin-left: var(--canon-space-13);
  }

  .md\:cu-ml-14 {
    margin-left: var(--canon-space-14);
  }
}

@media (width >= 1280px) {
  .lg\:cu-ml {
    margin-left: var(--pl-lg);
  }

  .lg\:cu-ml-0\.5 {
    margin-left: var(--canon-space-0_5);
  }

  .lg\:cu-ml-1 {
    margin-left: var(--canon-space-1);
  }

  .lg\:cu-ml-1\.5 {
    margin-left: var(--canon-space-1_5);
  }

  .lg\:cu-ml-2 {
    margin-left: var(--canon-space-2);
  }

  .lg\:cu-ml-3 {
    margin-left: var(--canon-space-3);
  }

  .lg\:cu-ml-4 {
    margin-left: var(--canon-space-4);
  }

  .lg\:cu-ml-5 {
    margin-left: var(--canon-space-5);
  }

  .lg\:cu-ml-6 {
    margin-left: var(--canon-space-6);
  }

  .lg\:cu-ml-7 {
    margin-left: var(--canon-space-7);
  }

  .lg\:cu-ml-8 {
    margin-left: var(--canon-space-8);
  }

  .lg\:cu-ml-9 {
    margin-left: var(--canon-space-9);
  }

  .lg\:cu-ml-10 {
    margin-left: var(--canon-space-10);
  }

  .lg\:cu-ml-11 {
    margin-left: var(--canon-space-11);
  }

  .lg\:cu-ml-12 {
    margin-left: var(--canon-space-12);
  }

  .lg\:cu-ml-13 {
    margin-left: var(--canon-space-13);
  }

  .lg\:cu-ml-14 {
    margin-left: var(--canon-space-14);
  }
}

@media (width >= 1536px) {
  .xl\:cu-ml {
    margin-left: var(--pl-xl);
  }

  .xl\:cu-ml-0\.5 {
    margin-left: var(--canon-space-0_5);
  }

  .xl\:cu-ml-1 {
    margin-left: var(--canon-space-1);
  }

  .xl\:cu-ml-1\.5 {
    margin-left: var(--canon-space-1_5);
  }

  .xl\:cu-ml-2 {
    margin-left: var(--canon-space-2);
  }

  .xl\:cu-ml-3 {
    margin-left: var(--canon-space-3);
  }

  .xl\:cu-ml-4 {
    margin-left: var(--canon-space-4);
  }

  .xl\:cu-ml-5 {
    margin-left: var(--canon-space-5);
  }

  .xl\:cu-ml-6 {
    margin-left: var(--canon-space-6);
  }

  .xl\:cu-ml-7 {
    margin-left: var(--canon-space-7);
  }

  .xl\:cu-ml-8 {
    margin-left: var(--canon-space-8);
  }

  .xl\:cu-ml-9 {
    margin-left: var(--canon-space-9);
  }

  .xl\:cu-ml-10 {
    margin-left: var(--canon-space-10);
  }

  .xl\:cu-ml-11 {
    margin-left: var(--canon-space-11);
  }

  .xl\:cu-ml-12 {
    margin-left: var(--canon-space-12);
  }

  .xl\:cu-ml-13 {
    margin-left: var(--canon-space-13);
  }

  .xl\:cu-ml-14 {
    margin-left: var(--canon-space-14);
  }
}

.cu-mr {
  margin-right: var(--mr);
}

.cu-mr-0\.5 {
  margin-right: var(--canon-space-0_5);
}

.cu-mr-1 {
  margin-right: var(--canon-space-1);
}

.cu-mr-1\.5 {
  margin-right: var(--canon-space-1_5);
}

.cu-mr-2 {
  margin-right: var(--canon-space-2);
}

.cu-mr-3 {
  margin-right: var(--canon-space-3);
}

.cu-mr-4 {
  margin-right: var(--canon-space-4);
}

.cu-mr-5 {
  margin-right: var(--canon-space-5);
}

.cu-mr-6 {
  margin-right: var(--canon-space-6);
}

.cu-mr-7 {
  margin-right: var(--canon-space-7);
}

.cu-mr-8 {
  margin-right: var(--canon-space-8);
}

.cu-mr-9 {
  margin-right: var(--canon-space-9);
}

.cu-mr-10 {
  margin-right: var(--canon-space-10);
}

.cu-mr-11 {
  margin-right: var(--canon-space-11);
}

.cu-mr-12 {
  margin-right: var(--canon-space-12);
}

.cu-mr-13 {
  margin-right: var(--canon-space-13);
}

.cu-mr-14 {
  margin-right: var(--canon-space-14);
}

@media (width >= 640px) {
  .xs\:cu-mr {
    margin-right: var(--pr-xs);
  }

  .xs\:cu-mr-0\.5 {
    margin-right: var(--canon-space-0_5);
  }

  .xs\:cu-mr-1 {
    margin-right: var(--canon-space-1);
  }

  .xs\:cu-mr-1\.5 {
    margin-right: var(--canon-space-1_5);
  }

  .xs\:cu-mr-2 {
    margin-right: var(--canon-space-2);
  }

  .xs\:cu-mr-3 {
    margin-right: var(--canon-space-3);
  }

  .xs\:cu-mr-4 {
    margin-right: var(--canon-space-4);
  }

  .xs\:cu-mr-5 {
    margin-right: var(--canon-space-5);
  }

  .xs\:cu-mr-6 {
    margin-right: var(--canon-space-6);
  }

  .xs\:cu-mr-7 {
    margin-right: var(--canon-space-7);
  }

  .xs\:cu-mr-8 {
    margin-right: var(--canon-space-8);
  }

  .xs\:cu-mr-9 {
    margin-right: var(--canon-space-9);
  }

  .xs\:cu-mr-10 {
    margin-right: var(--canon-space-10);
  }

  .xs\:cu-mr-11 {
    margin-right: var(--canon-space-11);
  }

  .xs\:cu-mr-12 {
    margin-right: var(--canon-space-12);
  }

  .xs\:cu-mr-13 {
    margin-right: var(--canon-space-13);
  }

  .xs\:cu-mr-14 {
    margin-right: var(--canon-space-14);
  }
}

@media (width >= 768px) {
  .sm\:cu-mr {
    margin-right: var(--pr-sm);
  }

  .sm\:cu-mr-0\.5 {
    margin-right: var(--canon-space-0_5);
  }

  .sm\:cu-mr-1 {
    margin-right: var(--canon-space-1);
  }

  .sm\:cu-mr-1\.5 {
    margin-right: var(--canon-space-1_5);
  }

  .sm\:cu-mr-2 {
    margin-right: var(--canon-space-2);
  }

  .sm\:cu-mr-3 {
    margin-right: var(--canon-space-3);
  }

  .sm\:cu-mr-4 {
    margin-right: var(--canon-space-4);
  }

  .sm\:cu-mr-5 {
    margin-right: var(--canon-space-5);
  }

  .sm\:cu-mr-6 {
    margin-right: var(--canon-space-6);
  }

  .sm\:cu-mr-7 {
    margin-right: var(--canon-space-7);
  }

  .sm\:cu-mr-8 {
    margin-right: var(--canon-space-8);
  }

  .sm\:cu-mr-9 {
    margin-right: var(--canon-space-9);
  }

  .sm\:cu-mr-10 {
    margin-right: var(--canon-space-10);
  }

  .sm\:cu-mr-11 {
    margin-right: var(--canon-space-11);
  }

  .sm\:cu-mr-12 {
    margin-right: var(--canon-space-12);
  }

  .sm\:cu-mr-13 {
    margin-right: var(--canon-space-13);
  }

  .sm\:cu-mr-14 {
    margin-right: var(--canon-space-14);
  }
}

@media (width >= 1024px) {
  .md\:cu-mr {
    margin-right: var(--pr-md);
  }

  .md\:cu-mr-0\.5 {
    margin-right: var(--canon-space-0_5);
  }

  .md\:cu-mr-1 {
    margin-right: var(--canon-space-1);
  }

  .md\:cu-mr-1\.5 {
    margin-right: var(--canon-space-1_5);
  }

  .md\:cu-mr-2 {
    margin-right: var(--canon-space-2);
  }

  .md\:cu-mr-3 {
    margin-right: var(--canon-space-3);
  }

  .md\:cu-mr-4 {
    margin-right: var(--canon-space-4);
  }

  .md\:cu-mr-5 {
    margin-right: var(--canon-space-5);
  }

  .md\:cu-mr-6 {
    margin-right: var(--canon-space-6);
  }

  .md\:cu-mr-7 {
    margin-right: var(--canon-space-7);
  }

  .md\:cu-mr-8 {
    margin-right: var(--canon-space-8);
  }

  .md\:cu-mr-9 {
    margin-right: var(--canon-space-9);
  }

  .md\:cu-mr-10 {
    margin-right: var(--canon-space-10);
  }

  .md\:cu-mr-11 {
    margin-right: var(--canon-space-11);
  }

  .md\:cu-mr-12 {
    margin-right: var(--canon-space-12);
  }

  .md\:cu-mr-13 {
    margin-right: var(--canon-space-13);
  }

  .md\:cu-mr-14 {
    margin-right: var(--canon-space-14);
  }
}

@media (width >= 1280px) {
  .lg\:cu-mr {
    margin-right: var(--pr-lg);
  }

  .lg\:cu-mr-0\.5 {
    margin-right: var(--canon-space-0_5);
  }

  .lg\:cu-mr-1 {
    margin-right: var(--canon-space-1);
  }

  .lg\:cu-mr-1\.5 {
    margin-right: var(--canon-space-1_5);
  }

  .lg\:cu-mr-2 {
    margin-right: var(--canon-space-2);
  }

  .lg\:cu-mr-3 {
    margin-right: var(--canon-space-3);
  }

  .lg\:cu-mr-4 {
    margin-right: var(--canon-space-4);
  }

  .lg\:cu-mr-5 {
    margin-right: var(--canon-space-5);
  }

  .lg\:cu-mr-6 {
    margin-right: var(--canon-space-6);
  }

  .lg\:cu-mr-7 {
    margin-right: var(--canon-space-7);
  }

  .lg\:cu-mr-8 {
    margin-right: var(--canon-space-8);
  }

  .lg\:cu-mr-9 {
    margin-right: var(--canon-space-9);
  }

  .lg\:cu-mr-10 {
    margin-right: var(--canon-space-10);
  }

  .lg\:cu-mr-11 {
    margin-right: var(--canon-space-11);
  }

  .lg\:cu-mr-12 {
    margin-right: var(--canon-space-12);
  }

  .lg\:cu-mr-13 {
    margin-right: var(--canon-space-13);
  }

  .lg\:cu-mr-14 {
    margin-right: var(--canon-space-14);
  }
}

@media (width >= 1536px) {
  .xl\:cu-mr {
    margin-right: var(--pr-xl);
  }

  .xl\:cu-mr-0\.5 {
    margin-right: var(--canon-space-0_5);
  }

  .xl\:cu-mr-1 {
    margin-right: var(--canon-space-1);
  }

  .xl\:cu-mr-1\.5 {
    margin-right: var(--canon-space-1_5);
  }

  .xl\:cu-mr-2 {
    margin-right: var(--canon-space-2);
  }

  .xl\:cu-mr-3 {
    margin-right: var(--canon-space-3);
  }

  .xl\:cu-mr-4 {
    margin-right: var(--canon-space-4);
  }

  .xl\:cu-mr-5 {
    margin-right: var(--canon-space-5);
  }

  .xl\:cu-mr-6 {
    margin-right: var(--canon-space-6);
  }

  .xl\:cu-mr-7 {
    margin-right: var(--canon-space-7);
  }

  .xl\:cu-mr-8 {
    margin-right: var(--canon-space-8);
  }

  .xl\:cu-mr-9 {
    margin-right: var(--canon-space-9);
  }

  .xl\:cu-mr-10 {
    margin-right: var(--canon-space-10);
  }

  .xl\:cu-mr-11 {
    margin-right: var(--canon-space-11);
  }

  .xl\:cu-mr-12 {
    margin-right: var(--canon-space-12);
  }

  .xl\:cu-mr-13 {
    margin-right: var(--canon-space-13);
  }

  .xl\:cu-mr-14 {
    margin-right: var(--canon-space-14);
  }
}

.cu-mt {
  margin-top: var(--mt);
}

.cu-mt-0\.5 {
  margin-top: var(--canon-space-0_5);
}

.cu-mt-1 {
  margin-top: var(--canon-space-1);
}

.cu-mt-1\.5 {
  margin-top: var(--canon-space-1_5);
}

.cu-mt-2 {
  margin-top: var(--canon-space-2);
}

.cu-mt-3 {
  margin-top: var(--canon-space-3);
}

.cu-mt-4 {
  margin-top: var(--canon-space-4);
}

.cu-mt-5 {
  margin-top: var(--canon-space-5);
}

.cu-mt-6 {
  margin-top: var(--canon-space-6);
}

.cu-mt-7 {
  margin-top: var(--canon-space-7);
}

.cu-mt-8 {
  margin-top: var(--canon-space-8);
}

.cu-mt-9 {
  margin-top: var(--canon-space-9);
}

.cu-mt-10 {
  margin-top: var(--canon-space-10);
}

.cu-mt-11 {
  margin-top: var(--canon-space-11);
}

.cu-mt-12 {
  margin-top: var(--canon-space-12);
}

.cu-mt-13 {
  margin-top: var(--canon-space-13);
}

.cu-mt-14 {
  margin-top: var(--canon-space-14);
}

@media (width >= 640px) {
  .xs\:cu-mt {
    margin-top: var(--pt-xs);
  }

  .xs\:cu-mt-0\.5 {
    margin-top: var(--canon-space-0_5);
  }

  .xs\:cu-mt-1 {
    margin-top: var(--canon-space-1);
  }

  .xs\:cu-mt-1\.5 {
    margin-top: var(--canon-space-1_5);
  }

  .xs\:cu-mt-2 {
    margin-top: var(--canon-space-2);
  }

  .xs\:cu-mt-3 {
    margin-top: var(--canon-space-3);
  }

  .xs\:cu-mt-4 {
    margin-top: var(--canon-space-4);
  }

  .xs\:cu-mt-5 {
    margin-top: var(--canon-space-5);
  }

  .xs\:cu-mt-6 {
    margin-top: var(--canon-space-6);
  }

  .xs\:cu-mt-7 {
    margin-top: var(--canon-space-7);
  }

  .xs\:cu-mt-8 {
    margin-top: var(--canon-space-8);
  }

  .xs\:cu-mt-9 {
    margin-top: var(--canon-space-9);
  }

  .xs\:cu-mt-10 {
    margin-top: var(--canon-space-10);
  }

  .xs\:cu-mt-11 {
    margin-top: var(--canon-space-11);
  }

  .xs\:cu-mt-12 {
    margin-top: var(--canon-space-12);
  }

  .xs\:cu-mt-13 {
    margin-top: var(--canon-space-13);
  }

  .xs\:cu-mt-14 {
    margin-top: var(--canon-space-14);
  }
}

@media (width >= 768px) {
  .sm\:cu-mt {
    margin-top: var(--pt-sm);
  }

  .sm\:cu-mt-0\.5 {
    margin-top: var(--canon-space-0_5);
  }

  .sm\:cu-mt-1 {
    margin-top: var(--canon-space-1);
  }

  .sm\:cu-mt-1\.5 {
    margin-top: var(--canon-space-1_5);
  }

  .sm\:cu-mt-2 {
    margin-top: var(--canon-space-2);
  }

  .sm\:cu-mt-3 {
    margin-top: var(--canon-space-3);
  }

  .sm\:cu-mt-4 {
    margin-top: var(--canon-space-4);
  }

  .sm\:cu-mt-5 {
    margin-top: var(--canon-space-5);
  }

  .sm\:cu-mt-6 {
    margin-top: var(--canon-space-6);
  }

  .sm\:cu-mt-7 {
    margin-top: var(--canon-space-7);
  }

  .sm\:cu-mt-8 {
    margin-top: var(--canon-space-8);
  }

  .sm\:cu-mt-9 {
    margin-top: var(--canon-space-9);
  }

  .sm\:cu-mt-10 {
    margin-top: var(--canon-space-10);
  }

  .sm\:cu-mt-11 {
    margin-top: var(--canon-space-11);
  }

  .sm\:cu-mt-12 {
    margin-top: var(--canon-space-12);
  }

  .sm\:cu-mt-13 {
    margin-top: var(--canon-space-13);
  }

  .sm\:cu-mt-14 {
    margin-top: var(--canon-space-14);
  }
}

@media (width >= 1024px) {
  .md\:cu-mt {
    margin-top: var(--pt-md);
  }

  .md\:cu-mt-0\.5 {
    margin-top: var(--canon-space-0_5);
  }

  .md\:cu-mt-1 {
    margin-top: var(--canon-space-1);
  }

  .md\:cu-mt-1\.5 {
    margin-top: var(--canon-space-1_5);
  }

  .md\:cu-mt-2 {
    margin-top: var(--canon-space-2);
  }

  .md\:cu-mt-3 {
    margin-top: var(--canon-space-3);
  }

  .md\:cu-mt-4 {
    margin-top: var(--canon-space-4);
  }

  .md\:cu-mt-5 {
    margin-top: var(--canon-space-5);
  }

  .md\:cu-mt-6 {
    margin-top: var(--canon-space-6);
  }

  .md\:cu-mt-7 {
    margin-top: var(--canon-space-7);
  }

  .md\:cu-mt-8 {
    margin-top: var(--canon-space-8);
  }

  .md\:cu-mt-9 {
    margin-top: var(--canon-space-9);
  }

  .md\:cu-mt-10 {
    margin-top: var(--canon-space-10);
  }

  .md\:cu-mt-11 {
    margin-top: var(--canon-space-11);
  }

  .md\:cu-mt-12 {
    margin-top: var(--canon-space-12);
  }

  .md\:cu-mt-13 {
    margin-top: var(--canon-space-13);
  }

  .md\:cu-mt-14 {
    margin-top: var(--canon-space-14);
  }
}

@media (width >= 1280px) {
  .lg\:cu-mt {
    margin-top: var(--pt-lg);
  }

  .lg\:cu-mt-0\.5 {
    margin-top: var(--canon-space-0_5);
  }

  .lg\:cu-mt-1 {
    margin-top: var(--canon-space-1);
  }

  .lg\:cu-mt-1\.5 {
    margin-top: var(--canon-space-1_5);
  }

  .lg\:cu-mt-2 {
    margin-top: var(--canon-space-2);
  }

  .lg\:cu-mt-3 {
    margin-top: var(--canon-space-3);
  }

  .lg\:cu-mt-4 {
    margin-top: var(--canon-space-4);
  }

  .lg\:cu-mt-5 {
    margin-top: var(--canon-space-5);
  }

  .lg\:cu-mt-6 {
    margin-top: var(--canon-space-6);
  }

  .lg\:cu-mt-7 {
    margin-top: var(--canon-space-7);
  }

  .lg\:cu-mt-8 {
    margin-top: var(--canon-space-8);
  }

  .lg\:cu-mt-9 {
    margin-top: var(--canon-space-9);
  }

  .lg\:cu-mt-10 {
    margin-top: var(--canon-space-10);
  }

  .lg\:cu-mt-11 {
    margin-top: var(--canon-space-11);
  }

  .lg\:cu-mt-12 {
    margin-top: var(--canon-space-12);
  }

  .lg\:cu-mt-13 {
    margin-top: var(--canon-space-13);
  }

  .lg\:cu-mt-14 {
    margin-top: var(--canon-space-14);
  }
}

@media (width >= 1536px) {
  .xl\:cu-mt {
    margin-top: var(--pt-xl);
  }

  .xl\:cu-mt-0\.5 {
    margin-top: var(--canon-space-0_5);
  }

  .xl\:cu-mt-1 {
    margin-top: var(--canon-space-1);
  }

  .xl\:cu-mt-1\.5 {
    margin-top: var(--canon-space-1_5);
  }

  .xl\:cu-mt-2 {
    margin-top: var(--canon-space-2);
  }

  .xl\:cu-mt-3 {
    margin-top: var(--canon-space-3);
  }

  .xl\:cu-mt-4 {
    margin-top: var(--canon-space-4);
  }

  .xl\:cu-mt-5 {
    margin-top: var(--canon-space-5);
  }

  .xl\:cu-mt-6 {
    margin-top: var(--canon-space-6);
  }

  .xl\:cu-mt-7 {
    margin-top: var(--canon-space-7);
  }

  .xl\:cu-mt-8 {
    margin-top: var(--canon-space-8);
  }

  .xl\:cu-mt-9 {
    margin-top: var(--canon-space-9);
  }

  .xl\:cu-mt-10 {
    margin-top: var(--canon-space-10);
  }

  .xl\:cu-mt-11 {
    margin-top: var(--canon-space-11);
  }

  .xl\:cu-mt-12 {
    margin-top: var(--canon-space-12);
  }

  .xl\:cu-mt-13 {
    margin-top: var(--canon-space-13);
  }

  .xl\:cu-mt-14 {
    margin-top: var(--canon-space-14);
  }
}

.cu-mb {
  margin-bottom: var(--mb);
}

.cu-mb-0\.5 {
  margin-bottom: var(--canon-space-0_5);
}

.cu-mb-1 {
  margin-bottom: var(--canon-space-1);
}

.cu-mb-1\.5 {
  margin-bottom: var(--canon-space-1_5);
}

.cu-mb-2 {
  margin-bottom: var(--canon-space-2);
}

.cu-mb-3 {
  margin-bottom: var(--canon-space-3);
}

.cu-mb-4 {
  margin-bottom: var(--canon-space-4);
}

.cu-mb-5 {
  margin-bottom: var(--canon-space-5);
}

.cu-mb-6 {
  margin-bottom: var(--canon-space-6);
}

.cu-mb-7 {
  margin-bottom: var(--canon-space-7);
}

.cu-mb-8 {
  margin-bottom: var(--canon-space-8);
}

.cu-mb-9 {
  margin-bottom: var(--canon-space-9);
}

.cu-mb-10 {
  margin-bottom: var(--canon-space-10);
}

.cu-mb-11 {
  margin-bottom: var(--canon-space-11);
}

.cu-mb-12 {
  margin-bottom: var(--canon-space-12);
}

.cu-mb-13 {
  margin-bottom: var(--canon-space-13);
}

.cu-mb-14 {
  margin-bottom: var(--canon-space-14);
}

@media (width >= 640px) {
  .xs\:cu-mb {
    margin-bottom: var(--pb-xs);
  }

  .xs\:cu-mb-0\.5 {
    margin-bottom: var(--canon-space-0_5);
  }

  .xs\:cu-mb-1 {
    margin-bottom: var(--canon-space-1);
  }

  .xs\:cu-mb-1\.5 {
    margin-bottom: var(--canon-space-1_5);
  }

  .xs\:cu-mb-2 {
    margin-bottom: var(--canon-space-2);
  }

  .xs\:cu-mb-3 {
    margin-bottom: var(--canon-space-3);
  }

  .xs\:cu-mb-4 {
    margin-bottom: var(--canon-space-4);
  }

  .xs\:cu-mb-5 {
    margin-bottom: var(--canon-space-5);
  }

  .xs\:cu-mb-6 {
    margin-bottom: var(--canon-space-6);
  }

  .xs\:cu-mb-7 {
    margin-bottom: var(--canon-space-7);
  }

  .xs\:cu-mb-8 {
    margin-bottom: var(--canon-space-8);
  }

  .xs\:cu-mb-9 {
    margin-bottom: var(--canon-space-9);
  }

  .xs\:cu-mb-10 {
    margin-bottom: var(--canon-space-10);
  }

  .xs\:cu-mb-11 {
    margin-bottom: var(--canon-space-11);
  }

  .xs\:cu-mb-12 {
    margin-bottom: var(--canon-space-12);
  }

  .xs\:cu-mb-13 {
    margin-bottom: var(--canon-space-13);
  }

  .xs\:cu-mb-14 {
    margin-bottom: var(--canon-space-14);
  }
}

@media (width >= 768px) {
  .sm\:cu-mb {
    margin-bottom: var(--pb-sm);
  }

  .sm\:cu-mb-0\.5 {
    margin-bottom: var(--canon-space-0_5);
  }

  .sm\:cu-mb-1 {
    margin-bottom: var(--canon-space-1);
  }

  .sm\:cu-mb-1\.5 {
    margin-bottom: var(--canon-space-1_5);
  }

  .sm\:cu-mb-2 {
    margin-bottom: var(--canon-space-2);
  }

  .sm\:cu-mb-3 {
    margin-bottom: var(--canon-space-3);
  }

  .sm\:cu-mb-4 {
    margin-bottom: var(--canon-space-4);
  }

  .sm\:cu-mb-5 {
    margin-bottom: var(--canon-space-5);
  }

  .sm\:cu-mb-6 {
    margin-bottom: var(--canon-space-6);
  }

  .sm\:cu-mb-7 {
    margin-bottom: var(--canon-space-7);
  }

  .sm\:cu-mb-8 {
    margin-bottom: var(--canon-space-8);
  }

  .sm\:cu-mb-9 {
    margin-bottom: var(--canon-space-9);
  }

  .sm\:cu-mb-10 {
    margin-bottom: var(--canon-space-10);
  }

  .sm\:cu-mb-11 {
    margin-bottom: var(--canon-space-11);
  }

  .sm\:cu-mb-12 {
    margin-bottom: var(--canon-space-12);
  }

  .sm\:cu-mb-13 {
    margin-bottom: var(--canon-space-13);
  }

  .sm\:cu-mb-14 {
    margin-bottom: var(--canon-space-14);
  }
}

@media (width >= 1024px) {
  .md\:cu-mb {
    margin-bottom: var(--pb-md);
  }

  .md\:cu-mb-0\.5 {
    margin-bottom: var(--canon-space-0_5);
  }

  .md\:cu-mb-1 {
    margin-bottom: var(--canon-space-1);
  }

  .md\:cu-mb-1\.5 {
    margin-bottom: var(--canon-space-1_5);
  }

  .md\:cu-mb-2 {
    margin-bottom: var(--canon-space-2);
  }

  .md\:cu-mb-3 {
    margin-bottom: var(--canon-space-3);
  }

  .md\:cu-mb-4 {
    margin-bottom: var(--canon-space-4);
  }

  .md\:cu-mb-5 {
    margin-bottom: var(--canon-space-5);
  }

  .md\:cu-mb-6 {
    margin-bottom: var(--canon-space-6);
  }

  .md\:cu-mb-7 {
    margin-bottom: var(--canon-space-7);
  }

  .md\:cu-mb-8 {
    margin-bottom: var(--canon-space-8);
  }

  .md\:cu-mb-9 {
    margin-bottom: var(--canon-space-9);
  }

  .md\:cu-mb-10 {
    margin-bottom: var(--canon-space-10);
  }

  .md\:cu-mb-11 {
    margin-bottom: var(--canon-space-11);
  }

  .md\:cu-mb-12 {
    margin-bottom: var(--canon-space-12);
  }

  .md\:cu-mb-13 {
    margin-bottom: var(--canon-space-13);
  }

  .md\:cu-mb-14 {
    margin-bottom: var(--canon-space-14);
  }
}

@media (width >= 1280px) {
  .lg\:cu-mb {
    margin-bottom: var(--pb-lg);
  }

  .lg\:cu-mb-0\.5 {
    margin-bottom: var(--canon-space-0_5);
  }

  .lg\:cu-mb-1 {
    margin-bottom: var(--canon-space-1);
  }

  .lg\:cu-mb-1\.5 {
    margin-bottom: var(--canon-space-1_5);
  }

  .lg\:cu-mb-2 {
    margin-bottom: var(--canon-space-2);
  }

  .lg\:cu-mb-3 {
    margin-bottom: var(--canon-space-3);
  }

  .lg\:cu-mb-4 {
    margin-bottom: var(--canon-space-4);
  }

  .lg\:cu-mb-5 {
    margin-bottom: var(--canon-space-5);
  }

  .lg\:cu-mb-6 {
    margin-bottom: var(--canon-space-6);
  }

  .lg\:cu-mb-7 {
    margin-bottom: var(--canon-space-7);
  }

  .lg\:cu-mb-8 {
    margin-bottom: var(--canon-space-8);
  }

  .lg\:cu-mb-9 {
    margin-bottom: var(--canon-space-9);
  }

  .lg\:cu-mb-10 {
    margin-bottom: var(--canon-space-10);
  }

  .lg\:cu-mb-11 {
    margin-bottom: var(--canon-space-11);
  }

  .lg\:cu-mb-12 {
    margin-bottom: var(--canon-space-12);
  }

  .lg\:cu-mb-13 {
    margin-bottom: var(--canon-space-13);
  }

  .lg\:cu-mb-14 {
    margin-bottom: var(--canon-space-14);
  }
}

@media (width >= 1536px) {
  .xl\:cu-mb {
    margin-bottom: var(--pb-xl);
  }

  .xl\:cu-mb-0\.5 {
    margin-bottom: var(--canon-space-0_5);
  }

  .xl\:cu-mb-1 {
    margin-bottom: var(--canon-space-1);
  }

  .xl\:cu-mb-1\.5 {
    margin-bottom: var(--canon-space-1_5);
  }

  .xl\:cu-mb-2 {
    margin-bottom: var(--canon-space-2);
  }

  .xl\:cu-mb-3 {
    margin-bottom: var(--canon-space-3);
  }

  .xl\:cu-mb-4 {
    margin-bottom: var(--canon-space-4);
  }

  .xl\:cu-mb-5 {
    margin-bottom: var(--canon-space-5);
  }

  .xl\:cu-mb-6 {
    margin-bottom: var(--canon-space-6);
  }

  .xl\:cu-mb-7 {
    margin-bottom: var(--canon-space-7);
  }

  .xl\:cu-mb-8 {
    margin-bottom: var(--canon-space-8);
  }

  .xl\:cu-mb-9 {
    margin-bottom: var(--canon-space-9);
  }

  .xl\:cu-mb-10 {
    margin-bottom: var(--canon-space-10);
  }

  .xl\:cu-mb-11 {
    margin-bottom: var(--canon-space-11);
  }

  .xl\:cu-mb-12 {
    margin-bottom: var(--canon-space-12);
  }

  .xl\:cu-mb-13 {
    margin-bottom: var(--canon-space-13);
  }

  .xl\:cu-mb-14 {
    margin-bottom: var(--canon-space-14);
  }
}

.cu-my {
  margin-top: var(--my);
  margin-bottom: var(--my);
}

.cu-my-0\.5 {
  margin-top: var(--canon-space-0_5);
  margin-bottom: var(--canon-space-0_5);
}

.cu-my-1 {
  margin-top: var(--canon-space-1);
  margin-bottom: var(--canon-space-1);
}

.cu-my-1\.5 {
  margin-top: var(--canon-space-1_5);
  margin-bottom: var(--canon-space-1_5);
}

.cu-my-2 {
  margin-top: var(--canon-space-2);
  margin-bottom: var(--canon-space-2);
}

.cu-my-3 {
  margin-top: var(--canon-space-3);
  margin-bottom: var(--canon-space-3);
}

.cu-my-4 {
  margin-top: var(--canon-space-4);
  margin-bottom: var(--canon-space-4);
}

.cu-my-5 {
  margin-top: var(--canon-space-5);
  margin-bottom: var(--canon-space-5);
}

.cu-my-6 {
  margin-top: var(--canon-space-6);
  margin-bottom: var(--canon-space-6);
}

.cu-my-7 {
  margin-top: var(--canon-space-7);
  margin-bottom: var(--canon-space-7);
}

.cu-my-8 {
  margin-top: var(--canon-space-8);
  margin-bottom: var(--canon-space-8);
}

.cu-my-9 {
  margin-top: var(--canon-space-9);
  margin-bottom: var(--canon-space-9);
}

.cu-my-10 {
  margin-top: var(--canon-space-10);
  margin-bottom: var(--canon-space-10);
}

.cu-my-11 {
  margin-top: var(--canon-space-11);
  margin-bottom: var(--canon-space-11);
}

.cu-my-12 {
  margin-top: var(--canon-space-12);
  margin-bottom: var(--canon-space-12);
}

.cu-my-13 {
  margin-top: var(--canon-space-13);
  margin-bottom: var(--canon-space-13);
}

.cu-my-14 {
  margin-top: var(--canon-space-14);
  margin-bottom: var(--canon-space-14);
}

@media (width >= 640px) {
  .xs\:cu-my {
    margin-top: var(--py-xs);
    margin-bottom: var(--py-xs);
  }

  .xs\:cu-my-0\.5 {
    margin-top: var(--canon-space-0_5);
    margin-bottom: var(--canon-space-0_5);
  }

  .xs\:cu-my-1 {
    margin-top: var(--canon-space-1);
    margin-bottom: var(--canon-space-1);
  }

  .xs\:cu-my-1\.5 {
    margin-top: var(--canon-space-1_5);
    margin-bottom: var(--canon-space-1_5);
  }

  .xs\:cu-my-2 {
    margin-top: var(--canon-space-2);
    margin-bottom: var(--canon-space-2);
  }

  .xs\:cu-my-3 {
    margin-top: var(--canon-space-3);
    margin-bottom: var(--canon-space-3);
  }

  .xs\:cu-my-4 {
    margin-top: var(--canon-space-4);
    margin-bottom: var(--canon-space-4);
  }

  .xs\:cu-my-5 {
    margin-top: var(--canon-space-5);
    margin-bottom: var(--canon-space-5);
  }

  .xs\:cu-my-6 {
    margin-top: var(--canon-space-6);
    margin-bottom: var(--canon-space-6);
  }

  .xs\:cu-my-7 {
    margin-top: var(--canon-space-7);
    margin-bottom: var(--canon-space-7);
  }

  .xs\:cu-my-8 {
    margin-top: var(--canon-space-8);
    margin-bottom: var(--canon-space-8);
  }

  .xs\:cu-my-9 {
    margin-top: var(--canon-space-9);
    margin-bottom: var(--canon-space-9);
  }

  .xs\:cu-my-10 {
    margin-top: var(--canon-space-10);
    margin-bottom: var(--canon-space-10);
  }

  .xs\:cu-my-11 {
    margin-top: var(--canon-space-11);
    margin-bottom: var(--canon-space-11);
  }

  .xs\:cu-my-12 {
    margin-top: var(--canon-space-12);
    margin-bottom: var(--canon-space-12);
  }

  .xs\:cu-my-13 {
    margin-top: var(--canon-space-13);
    margin-bottom: var(--canon-space-13);
  }

  .xs\:cu-my-14 {
    margin-top: var(--canon-space-14);
    margin-bottom: var(--canon-space-14);
  }
}

@media (width >= 768px) {
  .sm\:cu-my {
    margin-top: var(--py-sm);
    margin-bottom: var(--py-sm);
  }

  .sm\:cu-my-0\.5 {
    margin-top: var(--canon-space-0_5);
    margin-bottom: var(--canon-space-0_5);
  }

  .sm\:cu-my-1 {
    margin-top: var(--canon-space-1);
    margin-bottom: var(--canon-space-1);
  }

  .sm\:cu-my-1\.5 {
    margin-top: var(--canon-space-1_5);
    margin-bottom: var(--canon-space-1_5);
  }

  .sm\:cu-my-2 {
    margin-top: var(--canon-space-2);
    margin-bottom: var(--canon-space-2);
  }

  .sm\:cu-my-3 {
    margin-top: var(--canon-space-3);
    margin-bottom: var(--canon-space-3);
  }

  .sm\:cu-my-4 {
    margin-top: var(--canon-space-4);
    margin-bottom: var(--canon-space-4);
  }

  .sm\:cu-my-5 {
    margin-top: var(--canon-space-5);
    margin-bottom: var(--canon-space-5);
  }

  .sm\:cu-my-6 {
    margin-top: var(--canon-space-6);
    margin-bottom: var(--canon-space-6);
  }

  .sm\:cu-my-7 {
    margin-top: var(--canon-space-7);
    margin-bottom: var(--canon-space-7);
  }

  .sm\:cu-my-8 {
    margin-top: var(--canon-space-8);
    margin-bottom: var(--canon-space-8);
  }

  .sm\:cu-my-9 {
    margin-top: var(--canon-space-9);
    margin-bottom: var(--canon-space-9);
  }

  .sm\:cu-my-10 {
    margin-top: var(--canon-space-10);
    margin-bottom: var(--canon-space-10);
  }

  .sm\:cu-my-11 {
    margin-top: var(--canon-space-11);
    margin-bottom: var(--canon-space-11);
  }

  .sm\:cu-my-12 {
    margin-top: var(--canon-space-12);
    margin-bottom: var(--canon-space-12);
  }

  .sm\:cu-my-13 {
    margin-top: var(--canon-space-13);
    margin-bottom: var(--canon-space-13);
  }

  .sm\:cu-my-14 {
    margin-top: var(--canon-space-14);
    margin-bottom: var(--canon-space-14);
  }
}

@media (width >= 1024px) {
  .md\:cu-my {
    margin-top: var(--py-md);
    margin-bottom: var(--py-md);
  }

  .md\:cu-my-0\.5 {
    margin-top: var(--canon-space-0_5);
    margin-bottom: var(--canon-space-0_5);
  }

  .md\:cu-my-1 {
    margin-top: var(--canon-space-1);
    margin-bottom: var(--canon-space-1);
  }

  .md\:cu-my-1\.5 {
    margin-top: var(--canon-space-1_5);
    margin-bottom: var(--canon-space-1_5);
  }

  .md\:cu-my-2 {
    margin-top: var(--canon-space-2);
    margin-bottom: var(--canon-space-2);
  }

  .md\:cu-my-3 {
    margin-top: var(--canon-space-3);
    margin-bottom: var(--canon-space-3);
  }

  .md\:cu-my-4 {
    margin-top: var(--canon-space-4);
    margin-bottom: var(--canon-space-4);
  }

  .md\:cu-my-5 {
    margin-top: var(--canon-space-5);
    margin-bottom: var(--canon-space-5);
  }

  .md\:cu-my-6 {
    margin-top: var(--canon-space-6);
    margin-bottom: var(--canon-space-6);
  }

  .md\:cu-my-7 {
    margin-top: var(--canon-space-7);
    margin-bottom: var(--canon-space-7);
  }

  .md\:cu-my-8 {
    margin-top: var(--canon-space-8);
    margin-bottom: var(--canon-space-8);
  }

  .md\:cu-my-9 {
    margin-top: var(--canon-space-9);
    margin-bottom: var(--canon-space-9);
  }

  .md\:cu-my-10 {
    margin-top: var(--canon-space-10);
    margin-bottom: var(--canon-space-10);
  }

  .md\:cu-my-11 {
    margin-top: var(--canon-space-11);
    margin-bottom: var(--canon-space-11);
  }

  .md\:cu-my-12 {
    margin-top: var(--canon-space-12);
    margin-bottom: var(--canon-space-12);
  }

  .md\:cu-my-13 {
    margin-top: var(--canon-space-13);
    margin-bottom: var(--canon-space-13);
  }

  .md\:cu-my-14 {
    margin-top: var(--canon-space-14);
    margin-bottom: var(--canon-space-14);
  }
}

@media (width >= 1280px) {
  .lg\:cu-my {
    margin-top: var(--py-lg);
    margin-bottom: var(--py-lg);
  }

  .lg\:cu-my-0\.5 {
    margin-top: var(--canon-space-0_5);
    margin-bottom: var(--canon-space-0_5);
  }

  .lg\:cu-my-1 {
    margin-top: var(--canon-space-1);
    margin-bottom: var(--canon-space-1);
  }

  .lg\:cu-my-1\.5 {
    margin-top: var(--canon-space-1_5);
    margin-bottom: var(--canon-space-1_5);
  }

  .lg\:cu-my-2 {
    margin-top: var(--canon-space-2);
    margin-bottom: var(--canon-space-2);
  }

  .lg\:cu-my-3 {
    margin-top: var(--canon-space-3);
    margin-bottom: var(--canon-space-3);
  }

  .lg\:cu-my-4 {
    margin-top: var(--canon-space-4);
    margin-bottom: var(--canon-space-4);
  }

  .lg\:cu-my-5 {
    margin-top: var(--canon-space-5);
    margin-bottom: var(--canon-space-5);
  }

  .lg\:cu-my-6 {
    margin-top: var(--canon-space-6);
    margin-bottom: var(--canon-space-6);
  }

  .lg\:cu-my-7 {
    margin-top: var(--canon-space-7);
    margin-bottom: var(--canon-space-7);
  }

  .lg\:cu-my-8 {
    margin-top: var(--canon-space-8);
    margin-bottom: var(--canon-space-8);
  }

  .lg\:cu-my-9 {
    margin-top: var(--canon-space-9);
    margin-bottom: var(--canon-space-9);
  }

  .lg\:cu-my-10 {
    margin-top: var(--canon-space-10);
    margin-bottom: var(--canon-space-10);
  }

  .lg\:cu-my-11 {
    margin-top: var(--canon-space-11);
    margin-bottom: var(--canon-space-11);
  }

  .lg\:cu-my-12 {
    margin-top: var(--canon-space-12);
    margin-bottom: var(--canon-space-12);
  }

  .lg\:cu-my-13 {
    margin-top: var(--canon-space-13);
    margin-bottom: var(--canon-space-13);
  }

  .lg\:cu-my-14 {
    margin-top: var(--canon-space-14);
    margin-bottom: var(--canon-space-14);
  }
}

@media (width >= 1536px) {
  .xl\:cu-my {
    margin-top: var(--py-xl);
    margin-bottom: var(--py-xl);
  }

  .xl\:cu-my-0\.5 {
    margin-top: var(--canon-space-0_5);
    margin-bottom: var(--canon-space-0_5);
  }

  .xl\:cu-my-1 {
    margin-top: var(--canon-space-1);
    margin-bottom: var(--canon-space-1);
  }

  .xl\:cu-my-1\.5 {
    margin-top: var(--canon-space-1_5);
    margin-bottom: var(--canon-space-1_5);
  }

  .xl\:cu-my-2 {
    margin-top: var(--canon-space-2);
    margin-bottom: var(--canon-space-2);
  }

  .xl\:cu-my-3 {
    margin-top: var(--canon-space-3);
    margin-bottom: var(--canon-space-3);
  }

  .xl\:cu-my-4 {
    margin-top: var(--canon-space-4);
    margin-bottom: var(--canon-space-4);
  }

  .xl\:cu-my-5 {
    margin-top: var(--canon-space-5);
    margin-bottom: var(--canon-space-5);
  }

  .xl\:cu-my-6 {
    margin-top: var(--canon-space-6);
    margin-bottom: var(--canon-space-6);
  }

  .xl\:cu-my-7 {
    margin-top: var(--canon-space-7);
    margin-bottom: var(--canon-space-7);
  }

  .xl\:cu-my-8 {
    margin-top: var(--canon-space-8);
    margin-bottom: var(--canon-space-8);
  }

  .xl\:cu-my-9 {
    margin-top: var(--canon-space-9);
    margin-bottom: var(--canon-space-9);
  }

  .xl\:cu-my-10 {
    margin-top: var(--canon-space-10);
    margin-bottom: var(--canon-space-10);
  }

  .xl\:cu-my-11 {
    margin-top: var(--canon-space-11);
    margin-bottom: var(--canon-space-11);
  }

  .xl\:cu-my-12 {
    margin-top: var(--canon-space-12);
    margin-bottom: var(--canon-space-12);
  }

  .xl\:cu-my-13 {
    margin-top: var(--canon-space-13);
    margin-bottom: var(--canon-space-13);
  }

  .xl\:cu-my-14 {
    margin-top: var(--canon-space-14);
    margin-bottom: var(--canon-space-14);
  }
}

.cu-mx {
  margin-left: var(--mx);
  margin-right: var(--mx);
}

.cu-mx-0\.5 {
  margin-left: var(--canon-space-0_5);
  margin-right: var(--canon-space-0_5);
}

.cu-mx-1 {
  margin-left: var(--canon-space-1);
  margin-right: var(--canon-space-1);
}

.cu-mx-1\.5 {
  margin-left: var(--canon-space-1_5);
  margin-right: var(--canon-space-1_5);
}

.cu-mx-2 {
  margin-left: var(--canon-space-2);
  margin-right: var(--canon-space-2);
}

.cu-mx-3 {
  margin-left: var(--canon-space-3);
  margin-right: var(--canon-space-3);
}

.cu-mx-4 {
  margin-left: var(--canon-space-4);
  margin-right: var(--canon-space-4);
}

.cu-mx-5 {
  margin-left: var(--canon-space-5);
  margin-right: var(--canon-space-5);
}

.cu-mx-6 {
  margin-left: var(--canon-space-6);
  margin-right: var(--canon-space-6);
}

.cu-mx-7 {
  margin-left: var(--canon-space-7);
  margin-right: var(--canon-space-7);
}

.cu-mx-8 {
  margin-left: var(--canon-space-8);
  margin-right: var(--canon-space-8);
}

.cu-mx-9 {
  margin-left: var(--canon-space-9);
  margin-right: var(--canon-space-9);
}

.cu-mx-10 {
  margin-left: var(--canon-space-10);
  margin-right: var(--canon-space-10);
}

.cu-mx-11 {
  margin-left: var(--canon-space-11);
  margin-right: var(--canon-space-11);
}

.cu-mx-12 {
  margin-left: var(--canon-space-12);
  margin-right: var(--canon-space-12);
}

.cu-mx-13 {
  margin-left: var(--canon-space-13);
  margin-right: var(--canon-space-13);
}

.cu-mx-14 {
  margin-left: var(--canon-space-14);
  margin-right: var(--canon-space-14);
}

@media (width >= 640px) {
  .xs\:cu-mx {
    margin-left: var(--px-xs);
    margin-right: var(--px-xs);
  }

  .xs\:cu-mx-0\.5 {
    margin-left: var(--canon-space-0_5);
    margin-right: var(--canon-space-0_5);
  }

  .xs\:cu-mx-1 {
    margin-left: var(--canon-space-1);
    margin-right: var(--canon-space-1);
  }

  .xs\:cu-mx-1\.5 {
    margin-left: var(--canon-space-1_5);
    margin-right: var(--canon-space-1_5);
  }

  .xs\:cu-mx-2 {
    margin-left: var(--canon-space-2);
    margin-right: var(--canon-space-2);
  }

  .xs\:cu-mx-3 {
    margin-left: var(--canon-space-3);
    margin-right: var(--canon-space-3);
  }

  .xs\:cu-mx-4 {
    margin-left: var(--canon-space-4);
    margin-right: var(--canon-space-4);
  }

  .xs\:cu-mx-5 {
    margin-left: var(--canon-space-5);
    margin-right: var(--canon-space-5);
  }

  .xs\:cu-mx-6 {
    margin-left: var(--canon-space-6);
    margin-right: var(--canon-space-6);
  }

  .xs\:cu-mx-7 {
    margin-left: var(--canon-space-7);
    margin-right: var(--canon-space-7);
  }

  .xs\:cu-mx-8 {
    margin-left: var(--canon-space-8);
    margin-right: var(--canon-space-8);
  }

  .xs\:cu-mx-9 {
    margin-left: var(--canon-space-9);
    margin-right: var(--canon-space-9);
  }

  .xs\:cu-mx-10 {
    margin-left: var(--canon-space-10);
    margin-right: var(--canon-space-10);
  }

  .xs\:cu-mx-11 {
    margin-left: var(--canon-space-11);
    margin-right: var(--canon-space-11);
  }

  .xs\:cu-mx-12 {
    margin-left: var(--canon-space-12);
    margin-right: var(--canon-space-12);
  }

  .xs\:cu-mx-13 {
    margin-left: var(--canon-space-13);
    margin-right: var(--canon-space-13);
  }

  .xs\:cu-mx-14 {
    margin-left: var(--canon-space-14);
    margin-right: var(--canon-space-14);
  }
}

@media (width >= 768px) {
  .sm\:cu-mx {
    margin-left: var(--px-sm);
    margin-right: var(--px-sm);
  }

  .sm\:cu-mx-0\.5 {
    margin-left: var(--canon-space-0_5);
    margin-right: var(--canon-space-0_5);
  }

  .sm\:cu-mx-1 {
    margin-left: var(--canon-space-1);
    margin-right: var(--canon-space-1);
  }

  .sm\:cu-mx-1\.5 {
    margin-left: var(--canon-space-1_5);
    margin-right: var(--canon-space-1_5);
  }

  .sm\:cu-mx-2 {
    margin-left: var(--canon-space-2);
    margin-right: var(--canon-space-2);
  }

  .sm\:cu-mx-3 {
    margin-left: var(--canon-space-3);
    margin-right: var(--canon-space-3);
  }

  .sm\:cu-mx-4 {
    margin-left: var(--canon-space-4);
    margin-right: var(--canon-space-4);
  }

  .sm\:cu-mx-5 {
    margin-left: var(--canon-space-5);
    margin-right: var(--canon-space-5);
  }

  .sm\:cu-mx-6 {
    margin-left: var(--canon-space-6);
    margin-right: var(--canon-space-6);
  }

  .sm\:cu-mx-7 {
    margin-left: var(--canon-space-7);
    margin-right: var(--canon-space-7);
  }

  .sm\:cu-mx-8 {
    margin-left: var(--canon-space-8);
    margin-right: var(--canon-space-8);
  }

  .sm\:cu-mx-9 {
    margin-left: var(--canon-space-9);
    margin-right: var(--canon-space-9);
  }

  .sm\:cu-mx-10 {
    margin-left: var(--canon-space-10);
    margin-right: var(--canon-space-10);
  }

  .sm\:cu-mx-11 {
    margin-left: var(--canon-space-11);
    margin-right: var(--canon-space-11);
  }

  .sm\:cu-mx-12 {
    margin-left: var(--canon-space-12);
    margin-right: var(--canon-space-12);
  }

  .sm\:cu-mx-13 {
    margin-left: var(--canon-space-13);
    margin-right: var(--canon-space-13);
  }

  .sm\:cu-mx-14 {
    margin-left: var(--canon-space-14);
    margin-right: var(--canon-space-14);
  }
}

@media (width >= 1024px) {
  .md\:cu-mx {
    margin-left: var(--px-md);
    margin-right: var(--px-md);
  }

  .md\:cu-mx-0\.5 {
    margin-left: var(--canon-space-0_5);
    margin-right: var(--canon-space-0_5);
  }

  .md\:cu-mx-1 {
    margin-left: var(--canon-space-1);
    margin-right: var(--canon-space-1);
  }

  .md\:cu-mx-1\.5 {
    margin-left: var(--canon-space-1_5);
    margin-right: var(--canon-space-1_5);
  }

  .md\:cu-mx-2 {
    margin-left: var(--canon-space-2);
    margin-right: var(--canon-space-2);
  }

  .md\:cu-mx-3 {
    margin-left: var(--canon-space-3);
    margin-right: var(--canon-space-3);
  }

  .md\:cu-mx-4 {
    margin-left: var(--canon-space-4);
    margin-right: var(--canon-space-4);
  }

  .md\:cu-mx-5 {
    margin-left: var(--canon-space-5);
    margin-right: var(--canon-space-5);
  }

  .md\:cu-mx-6 {
    margin-left: var(--canon-space-6);
    margin-right: var(--canon-space-6);
  }

  .md\:cu-mx-7 {
    margin-left: var(--canon-space-7);
    margin-right: var(--canon-space-7);
  }

  .md\:cu-mx-8 {
    margin-left: var(--canon-space-8);
    margin-right: var(--canon-space-8);
  }

  .md\:cu-mx-9 {
    margin-left: var(--canon-space-9);
    margin-right: var(--canon-space-9);
  }

  .md\:cu-mx-10 {
    margin-left: var(--canon-space-10);
    margin-right: var(--canon-space-10);
  }

  .md\:cu-mx-11 {
    margin-left: var(--canon-space-11);
    margin-right: var(--canon-space-11);
  }

  .md\:cu-mx-12 {
    margin-left: var(--canon-space-12);
    margin-right: var(--canon-space-12);
  }

  .md\:cu-mx-13 {
    margin-left: var(--canon-space-13);
    margin-right: var(--canon-space-13);
  }

  .md\:cu-mx-14 {
    margin-left: var(--canon-space-14);
    margin-right: var(--canon-space-14);
  }
}

@media (width >= 1280px) {
  .lg\:cu-mx {
    margin-left: var(--px-lg);
    margin-right: var(--px-lg);
  }

  .lg\:cu-mx-0\.5 {
    margin-left: var(--canon-space-0_5);
    margin-right: var(--canon-space-0_5);
  }

  .lg\:cu-mx-1 {
    margin-left: var(--canon-space-1);
    margin-right: var(--canon-space-1);
  }

  .lg\:cu-mx-1\.5 {
    margin-left: var(--canon-space-1_5);
    margin-right: var(--canon-space-1_5);
  }

  .lg\:cu-mx-2 {
    margin-left: var(--canon-space-2);
    margin-right: var(--canon-space-2);
  }

  .lg\:cu-mx-3 {
    margin-left: var(--canon-space-3);
    margin-right: var(--canon-space-3);
  }

  .lg\:cu-mx-4 {
    margin-left: var(--canon-space-4);
    margin-right: var(--canon-space-4);
  }

  .lg\:cu-mx-5 {
    margin-left: var(--canon-space-5);
    margin-right: var(--canon-space-5);
  }

  .lg\:cu-mx-6 {
    margin-left: var(--canon-space-6);
    margin-right: var(--canon-space-6);
  }

  .lg\:cu-mx-7 {
    margin-left: var(--canon-space-7);
    margin-right: var(--canon-space-7);
  }

  .lg\:cu-mx-8 {
    margin-left: var(--canon-space-8);
    margin-right: var(--canon-space-8);
  }

  .lg\:cu-mx-9 {
    margin-left: var(--canon-space-9);
    margin-right: var(--canon-space-9);
  }

  .lg\:cu-mx-10 {
    margin-left: var(--canon-space-10);
    margin-right: var(--canon-space-10);
  }

  .lg\:cu-mx-11 {
    margin-left: var(--canon-space-11);
    margin-right: var(--canon-space-11);
  }

  .lg\:cu-mx-12 {
    margin-left: var(--canon-space-12);
    margin-right: var(--canon-space-12);
  }

  .lg\:cu-mx-13 {
    margin-left: var(--canon-space-13);
    margin-right: var(--canon-space-13);
  }

  .lg\:cu-mx-14 {
    margin-left: var(--canon-space-14);
    margin-right: var(--canon-space-14);
  }
}

@media (width >= 1536px) {
  .xl\:cu-mx {
    margin-left: var(--px-xl);
    margin-right: var(--px-xl);
  }

  .xl\:cu-mx-0\.5 {
    margin-left: var(--canon-space-0_5);
    margin-right: var(--canon-space-0_5);
  }

  .xl\:cu-mx-1 {
    margin-left: var(--canon-space-1);
    margin-right: var(--canon-space-1);
  }

  .xl\:cu-mx-1\.5 {
    margin-left: var(--canon-space-1_5);
    margin-right: var(--canon-space-1_5);
  }

  .xl\:cu-mx-2 {
    margin-left: var(--canon-space-2);
    margin-right: var(--canon-space-2);
  }

  .xl\:cu-mx-3 {
    margin-left: var(--canon-space-3);
    margin-right: var(--canon-space-3);
  }

  .xl\:cu-mx-4 {
    margin-left: var(--canon-space-4);
    margin-right: var(--canon-space-4);
  }

  .xl\:cu-mx-5 {
    margin-left: var(--canon-space-5);
    margin-right: var(--canon-space-5);
  }

  .xl\:cu-mx-6 {
    margin-left: var(--canon-space-6);
    margin-right: var(--canon-space-6);
  }

  .xl\:cu-mx-7 {
    margin-left: var(--canon-space-7);
    margin-right: var(--canon-space-7);
  }

  .xl\:cu-mx-8 {
    margin-left: var(--canon-space-8);
    margin-right: var(--canon-space-8);
  }

  .xl\:cu-mx-9 {
    margin-left: var(--canon-space-9);
    margin-right: var(--canon-space-9);
  }

  .xl\:cu-mx-10 {
    margin-left: var(--canon-space-10);
    margin-right: var(--canon-space-10);
  }

  .xl\:cu-mx-11 {
    margin-left: var(--canon-space-11);
    margin-right: var(--canon-space-11);
  }

  .xl\:cu-mx-12 {
    margin-left: var(--canon-space-12);
    margin-right: var(--canon-space-12);
  }

  .xl\:cu-mx-13 {
    margin-left: var(--canon-space-13);
    margin-right: var(--canon-space-13);
  }

  .xl\:cu-mx-14 {
    margin-left: var(--canon-space-14);
    margin-right: var(--canon-space-14);
  }
}

.cu-display-none {
  display: none;
}

.cu-display-inline {
  display: inline;
}

.cu-display-inline-block {
  display: inline-block;
}

.cu-display-block {
  display: block;
}

@media (width >= 640px) {
  .xs\:cu-display-none {
    display: none;
  }

  .xs\:cu-display-inline {
    display: inline;
  }

  .xs\:cu-display-inline-block {
    display: inline-block;
  }

  .xs\:cu-display-block {
    display: block;
  }
}

@media (width >= 768px) {
  .sm\:cu-display-none {
    display: none;
  }

  .sm\:cu-display-inline {
    display: inline;
  }

  .sm\:cu-display-inline-block {
    display: inline-block;
  }

  .sm\:cu-display-block {
    display: block;
  }
}

@media (width >= 1024px) {
  .md\:cu-display-none {
    display: none;
  }

  .md\:cu-display-inline {
    display: inline;
  }

  .md\:cu-display-inline-block {
    display: inline-block;
  }

  .md\:cu-display-block {
    display: block;
  }
}

@media (width >= 1280px) {
  .lg\:cu-display-none {
    display: none;
  }

  .lg\:cu-display-inline {
    display: inline;
  }

  .lg\:cu-display-inline-block {
    display: inline-block;
  }

  .lg\:cu-display-block {
    display: block;
  }
}

@media (width >= 1536px) {
  .xl\:cu-display-none {
    display: none;
  }

  .xl\:cu-display-inline {
    display: inline;
  }

  .xl\:cu-display-inline-block {
    display: inline-block;
  }

  .xl\:cu-display-block {
    display: block;
  }
}

.cu-w {
  width: var(--width);
}

.cu-min-w {
  min-width: var(--min-width);
}

.cu-max-w {
  max-width: var(--max-width);
}

@media (width >= 640px) {
  .xs\:cu-w {
    width: var(--width);
  }

  .xs\:cu-min-w {
    min-width: var(--min-width);
  }

  .xs\:cu-max-w {
    max-width: var(--max-width);
  }
}

@media (width >= 768px) {
  .sm\:cu-w {
    width: var(--width);
  }

  .sm\:cu-min-w {
    min-width: var(--min-width);
  }

  .sm\:cu-max-w {
    max-width: var(--max-width);
  }
}

@media (width >= 1024px) {
  .md\:cu-w {
    width: var(--width);
  }

  .md\:cu-min-w {
    min-width: var(--min-width);
  }

  .md\:cu-max-w {
    max-width: var(--max-width);
  }
}

@media (width >= 1280px) {
  .lg\:cu-w {
    width: var(--width);
  }

  .lg\:cu-min-w {
    min-width: var(--min-width);
  }

  .lg\:cu-max-w {
    max-width: var(--max-width);
  }
}

@media (width >= 1536px) {
  .xl\:cu-w {
    width: var(--width);
  }

  .xl\:cu-min-w {
    min-width: var(--min-width);
  }

  .xl\:cu-max-w {
    max-width: var(--max-width);
  }
}

.cu-h {
  height: var(--height);
}

.cu-min-h {
  min-height: var(--min-height);
}

.cu-max-h {
  max-height: var(--max-height);
}

@media (width >= 640px) {
  .xs\:cu-h {
    height: var(--height);
  }

  .xs\:cu-min-h {
    min-height: var(--min-height);
  }

  .xs\:cu-max-h {
    max-height: var(--max-height);
  }
}

@media (width >= 768px) {
  .sm\:cu-h {
    height: var(--height);
  }

  .sm\:cu-min-h {
    min-height: var(--min-height);
  }

  .sm\:cu-max-h {
    max-height: var(--max-height);
  }
}

@media (width >= 1024px) {
  .md\:cu-h {
    height: var(--height);
  }

  .md\:cu-min-h {
    min-height: var(--min-height);
  }

  .md\:cu-max-h {
    max-height: var(--max-height);
  }
}

@media (width >= 1280px) {
  .lg\:cu-h {
    height: var(--height);
  }

  .lg\:cu-min-h {
    min-height: var(--min-height);
  }

  .lg\:cu-max-h {
    max-height: var(--max-height);
  }
}

@media (width >= 1536px) {
  .xl\:cu-h {
    height: var(--height);
  }

  .xl\:cu-min-h {
    min-height: var(--min-height);
  }

  .xl\:cu-max-h {
    max-height: var(--max-height);
  }
}

.cu-position-absolute {
  position: absolute;
}

.cu-position-fixed {
  position: fixed;
}

.cu-position-sticky {
  position: sticky;
}

.cu-position-relative {
  position: relative;
}

.cu-position-static {
  position: static;
}

@media (width >= 640px) {
  .xs\:cu-position-absolute {
    position: absolute;
  }

  .xs\:cu-position-fixed {
    position: fixed;
  }

  .xs\:cu-position-sticky {
    position: sticky;
  }

  .xs\:cu-position-relative {
    position: relative;
  }

  .xs\:cu-position-static {
    position: static;
  }
}

@media (width >= 768px) {
  .sm\:cu-position-absolute {
    position: absolute;
  }

  .sm\:cu-position-fixed {
    position: fixed;
  }

  .sm\:cu-position-sticky {
    position: sticky;
  }

  .sm\:cu-position-relative {
    position: relative;
  }

  .sm\:cu-position-static {
    position: static;
  }
}

@media (width >= 1024px) {
  .md\:cu-position-absolute {
    position: absolute;
  }

  .md\:cu-position-fixed {
    position: fixed;
  }

  .md\:cu-position-sticky {
    position: sticky;
  }

  .md\:cu-position-relative {
    position: relative;
  }

  .md\:cu-position-static {
    position: static;
  }
}

@media (width >= 1280px) {
  .lg\:cu-position-absolute {
    position: absolute;
  }

  .lg\:cu-position-fixed {
    position: fixed;
  }

  .lg\:cu-position-sticky {
    position: sticky;
  }

  .lg\:cu-position-relative {
    position: relative;
  }

  .lg\:cu-position-static {
    position: static;
  }
}

@media (width >= 1536px) {
  .xl\:cu-position-absolute {
    position: absolute;
  }

  .xl\:cu-position-fixed {
    position: fixed;
  }

  .xl\:cu-position-sticky {
    position: sticky;
  }

  .xl\:cu-position-relative {
    position: relative;
  }

  .xl\:cu-position-static {
    position: static;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

.cu-columns-auto {
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

.cu-col-span-1 {
  grid-column: span 1 / span 1;
}

.cu-col-span-2 {
  grid-column: span 2 / span 2;
}

.cu-col-span-3 {
  grid-column: span 3 / span 3;
}

.cu-col-span-4 {
  grid-column: span 4 / span 4;
}

.cu-col-span-5 {
  grid-column: span 5 / span 5;
}

.cu-col-span-6 {
  grid-column: span 6 / span 6;
}

.cu-col-span-7 {
  grid-column: span 7 / span 7;
}

.cu-col-span-8 {
  grid-column: span 8 / span 8;
}

.cu-col-span-9 {
  grid-column: span 9 / span 9;
}

.cu-col-span-10 {
  grid-column: span 10 / span 10;
}

.cu-col-span-11 {
  grid-column: span 11 / span 11;
}

.cu-col-span-12 {
  grid-column: span 12 / span 12;
}

.cu-col-span-auto {
  grid-column: span auto / span auto;
}

.cu-col-start-1 {
  grid-column-start: 1;
}

.cu-col-start-2 {
  grid-column-start: 2;
}

.cu-col-start-3 {
  grid-column-start: 3;
}

.cu-col-start-4 {
  grid-column-start: 4;
}

.cu-col-start-5 {
  grid-column-start: 5;
}

.cu-col-start-6 {
  grid-column-start: 6;
}

.cu-col-start-7 {
  grid-column-start: 7;
}

.cu-col-start-8 {
  grid-column-start: 8;
}

.cu-col-start-9 {
  grid-column-start: 9;
}

.cu-col-start-10 {
  grid-column-start: 10;
}

.cu-col-start-11 {
  grid-column-start: 11;
}

.cu-col-start-12 {
  grid-column-start: 12;
}

.cu-col-start-13 {
  grid-column-start: 13;
}

.cu-col-start-auto {
  grid-column-start: auto;
}

.cu-col-end-1 {
  grid-column-end: 1;
}

.cu-col-end-2 {
  grid-column-end: 2;
}

.cu-col-end-3 {
  grid-column-end: 3;
}

.cu-col-end-4 {
  grid-column-end: 4;
}

.cu-col-end-5 {
  grid-column-end: 5;
}

.cu-col-end-6 {
  grid-column-end: 6;
}

.cu-col-end-7 {
  grid-column-end: 7;
}

.cu-col-end-8 {
  grid-column-end: 8;
}

.cu-col-end-9 {
  grid-column-end: 9;
}

.cu-col-end-10 {
  grid-column-end: 10;
}

.cu-col-end-11 {
  grid-column-end: 11;
}

.cu-col-end-12 {
  grid-column-end: 12;
}

.cu-col-end-13 {
  grid-column-end: 13;
}

.cu-col-end-auto {
  grid-column-end: auto;
}

.cu-row-span-1 {
  grid-row: span 1 / span 1;
}

.cu-row-span-2 {
  grid-row: span 2 / span 2;
}

.cu-row-span-3 {
  grid-row: span 3 / span 3;
}

.cu-row-span-4 {
  grid-row: span 4 / span 4;
}

.cu-row-span-5 {
  grid-row: span 5 / span 5;
}

.cu-row-span-6 {
  grid-row: span 6 / span 6;
}

.cu-row-span-7 {
  grid-row: span 7 / span 7;
}

.cu-row-span-8 {
  grid-row: span 8 / span 8;
}

.cu-row-span-9 {
  grid-row: span 9 / span 9;
}

.cu-row-span-10 {
  grid-row: span 10 / span 10;
}

.cu-row-span-11 {
  grid-row: span 11 / span 11;
}

.cu-row-span-12 {
  grid-row: span 12 / span 12;
}

.cu-row-span-auto {
  grid-row: span auto / span auto;
}

@media (width >= 640px) {
  .xs\:cu-columns-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .xs\:cu-columns-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .xs\:cu-columns-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .xs\:cu-columns-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .xs\:cu-columns-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .xs\:cu-columns-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .xs\:cu-columns-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .xs\:cu-columns-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .xs\:cu-columns-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }

  .xs\:cu-columns-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .xs\:cu-columns-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }

  .xs\:cu-columns-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .xs\:cu-columns-auto {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }

  .xs\:cu-col-span-1 {
    grid-column: span 1 / span 1;
  }

  .xs\:cu-col-span-2 {
    grid-column: span 2 / span 2;
  }

  .xs\:cu-col-span-3 {
    grid-column: span 3 / span 3;
  }

  .xs\:cu-col-span-4 {
    grid-column: span 4 / span 4;
  }

  .xs\:cu-col-span-5 {
    grid-column: span 5 / span 5;
  }

  .xs\:cu-col-span-6 {
    grid-column: span 6 / span 6;
  }

  .xs\:cu-col-span-7 {
    grid-column: span 7 / span 7;
  }

  .xs\:cu-col-span-8 {
    grid-column: span 8 / span 8;
  }

  .xs\:cu-col-span-9 {
    grid-column: span 9 / span 9;
  }

  .xs\:cu-col-span-10 {
    grid-column: span 10 / span 10;
  }

  .xs\:cu-col-span-11 {
    grid-column: span 11 / span 11;
  }

  .xs\:cu-col-span-12 {
    grid-column: span 12 / span 12;
  }

  .xs\:cu-col-span-auto {
    grid-column: span auto / span auto;
  }

  .xs\:cu-col-start-1 {
    grid-column-start: 1;
  }

  .xs\:cu-col-start-2 {
    grid-column-start: 2;
  }

  .xs\:cu-col-start-3 {
    grid-column-start: 3;
  }

  .xs\:cu-col-start-4 {
    grid-column-start: 4;
  }

  .xs\:cu-col-start-5 {
    grid-column-start: 5;
  }

  .xs\:cu-col-start-6 {
    grid-column-start: 6;
  }

  .xs\:cu-col-start-7 {
    grid-column-start: 7;
  }

  .xs\:cu-col-start-8 {
    grid-column-start: 8;
  }

  .xs\:cu-col-start-9 {
    grid-column-start: 9;
  }

  .xs\:cu-col-start-10 {
    grid-column-start: 10;
  }

  .xs\:cu-col-start-11 {
    grid-column-start: 11;
  }

  .xs\:cu-col-start-12 {
    grid-column-start: 12;
  }

  .xs\:cu-col-start-13 {
    grid-column-start: 13;
  }

  .xs\:cu-col-start-auto {
    grid-column-start: auto;
  }

  .xs\:cu-col-end-1 {
    grid-column-end: 1;
  }

  .xs\:cu-col-end-2 {
    grid-column-end: 2;
  }

  .xs\:cu-col-end-3 {
    grid-column-end: 3;
  }

  .xs\:cu-col-end-4 {
    grid-column-end: 4;
  }

  .xs\:cu-col-end-5 {
    grid-column-end: 5;
  }

  .xs\:cu-col-end-6 {
    grid-column-end: 6;
  }

  .xs\:cu-col-end-7 {
    grid-column-end: 7;
  }

  .xs\:cu-col-end-8 {
    grid-column-end: 8;
  }

  .xs\:cu-col-end-9 {
    grid-column-end: 9;
  }

  .xs\:cu-col-end-10 {
    grid-column-end: 10;
  }

  .xs\:cu-col-end-11 {
    grid-column-end: 11;
  }

  .xs\:cu-col-end-12 {
    grid-column-end: 12;
  }

  .xs\:cu-col-end-13 {
    grid-column-end: 13;
  }

  .xs\:cu-col-end-auto {
    grid-column-end: auto;
  }

  .xs\:cu-row-span-1 {
    grid-row: span 1 / span 1;
  }

  .xs\:cu-row-span-2 {
    grid-row: span 2 / span 2;
  }

  .xs\:cu-row-span-3 {
    grid-row: span 3 / span 3;
  }

  .xs\:cu-row-span-4 {
    grid-row: span 4 / span 4;
  }

  .xs\:cu-row-span-5 {
    grid-row: span 5 / span 5;
  }

  .xs\:cu-row-span-6 {
    grid-row: span 6 / span 6;
  }

  .xs\:cu-row-span-7 {
    grid-row: span 7 / span 7;
  }

  .xs\:cu-row-span-8 {
    grid-row: span 8 / span 8;
  }

  .xs\:cu-row-span-9 {
    grid-row: span 9 / span 9;
  }

  .xs\:cu-row-span-10 {
    grid-row: span 10 / span 10;
  }

  .xs\:cu-row-span-11 {
    grid-row: span 11 / span 11;
  }

  .xs\:cu-row-span-12 {
    grid-row: span 12 / span 12;
  }

  .xs\:cu-row-span-auto {
    grid-row: span auto / span auto;
  }
}

@media (width >= 768px) {
  .sm\:cu-columns-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .sm\:cu-columns-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:cu-columns-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:cu-columns-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sm\:cu-columns-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .sm\:cu-columns-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .sm\:cu-columns-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .sm\:cu-columns-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .sm\:cu-columns-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }

  .sm\:cu-columns-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .sm\:cu-columns-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }

  .sm\:cu-columns-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .sm\:cu-columns-auto {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }

  .sm\:cu-col-span-1 {
    grid-column: span 1 / span 1;
  }

  .sm\:cu-col-span-2 {
    grid-column: span 2 / span 2;
  }

  .sm\:cu-col-span-3 {
    grid-column: span 3 / span 3;
  }

  .sm\:cu-col-span-4 {
    grid-column: span 4 / span 4;
  }

  .sm\:cu-col-span-5 {
    grid-column: span 5 / span 5;
  }

  .sm\:cu-col-span-6 {
    grid-column: span 6 / span 6;
  }

  .sm\:cu-col-span-7 {
    grid-column: span 7 / span 7;
  }

  .sm\:cu-col-span-8 {
    grid-column: span 8 / span 8;
  }

  .sm\:cu-col-span-9 {
    grid-column: span 9 / span 9;
  }

  .sm\:cu-col-span-10 {
    grid-column: span 10 / span 10;
  }

  .sm\:cu-col-span-11 {
    grid-column: span 11 / span 11;
  }

  .sm\:cu-col-span-12 {
    grid-column: span 12 / span 12;
  }

  .sm\:cu-col-span-auto {
    grid-column: span auto / span auto;
  }

  .sm\:cu-col-start-1 {
    grid-column-start: 1;
  }

  .sm\:cu-col-start-2 {
    grid-column-start: 2;
  }

  .sm\:cu-col-start-3 {
    grid-column-start: 3;
  }

  .sm\:cu-col-start-4 {
    grid-column-start: 4;
  }

  .sm\:cu-col-start-5 {
    grid-column-start: 5;
  }

  .sm\:cu-col-start-6 {
    grid-column-start: 6;
  }

  .sm\:cu-col-start-7 {
    grid-column-start: 7;
  }

  .sm\:cu-col-start-8 {
    grid-column-start: 8;
  }

  .sm\:cu-col-start-9 {
    grid-column-start: 9;
  }

  .sm\:cu-col-start-10 {
    grid-column-start: 10;
  }

  .sm\:cu-col-start-11 {
    grid-column-start: 11;
  }

  .sm\:cu-col-start-12 {
    grid-column-start: 12;
  }

  .sm\:cu-col-start-13 {
    grid-column-start: 13;
  }

  .sm\:cu-col-start-auto {
    grid-column-start: auto;
  }

  .sm\:cu-col-end-1 {
    grid-column-end: 1;
  }

  .sm\:cu-col-end-2 {
    grid-column-end: 2;
  }

  .sm\:cu-col-end-3 {
    grid-column-end: 3;
  }

  .sm\:cu-col-end-4 {
    grid-column-end: 4;
  }

  .sm\:cu-col-end-5 {
    grid-column-end: 5;
  }

  .sm\:cu-col-end-6 {
    grid-column-end: 6;
  }

  .sm\:cu-col-end-7 {
    grid-column-end: 7;
  }

  .sm\:cu-col-end-8 {
    grid-column-end: 8;
  }

  .sm\:cu-col-end-9 {
    grid-column-end: 9;
  }

  .sm\:cu-col-end-10 {
    grid-column-end: 10;
  }

  .sm\:cu-col-end-11 {
    grid-column-end: 11;
  }

  .sm\:cu-col-end-12 {
    grid-column-end: 12;
  }

  .sm\:cu-col-end-13 {
    grid-column-end: 13;
  }

  .sm\:cu-col-end-auto {
    grid-column-end: auto;
  }

  .sm\:cu-row-span-1 {
    grid-row: span 1 / span 1;
  }

  .sm\:cu-row-span-2 {
    grid-row: span 2 / span 2;
  }

  .sm\:cu-row-span-3 {
    grid-row: span 3 / span 3;
  }

  .sm\:cu-row-span-4 {
    grid-row: span 4 / span 4;
  }

  .sm\:cu-row-span-5 {
    grid-row: span 5 / span 5;
  }

  .sm\:cu-row-span-6 {
    grid-row: span 6 / span 6;
  }

  .sm\:cu-row-span-7 {
    grid-row: span 7 / span 7;
  }

  .sm\:cu-row-span-8 {
    grid-row: span 8 / span 8;
  }

  .sm\:cu-row-span-9 {
    grid-row: span 9 / span 9;
  }

  .sm\:cu-row-span-10 {
    grid-row: span 10 / span 10;
  }

  .sm\:cu-row-span-11 {
    grid-row: span 11 / span 11;
  }

  .sm\:cu-row-span-12 {
    grid-row: span 12 / span 12;
  }

  .sm\:cu-row-span-auto {
    grid-row: span auto / span auto;
  }
}

@media (width >= 1024px) {
  .md\:cu-columns-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .md\:cu-columns-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:cu-columns-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:cu-columns-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:cu-columns-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .md\:cu-columns-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .md\:cu-columns-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .md\:cu-columns-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .md\:cu-columns-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }

  .md\:cu-columns-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .md\:cu-columns-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }

  .md\:cu-columns-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .md\:cu-columns-auto {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }

  .md\:cu-col-span-1 {
    grid-column: span 1 / span 1;
  }

  .md\:cu-col-span-2 {
    grid-column: span 2 / span 2;
  }

  .md\:cu-col-span-3 {
    grid-column: span 3 / span 3;
  }

  .md\:cu-col-span-4 {
    grid-column: span 4 / span 4;
  }

  .md\:cu-col-span-5 {
    grid-column: span 5 / span 5;
  }

  .md\:cu-col-span-6 {
    grid-column: span 6 / span 6;
  }

  .md\:cu-col-span-7 {
    grid-column: span 7 / span 7;
  }

  .md\:cu-col-span-8 {
    grid-column: span 8 / span 8;
  }

  .md\:cu-col-span-9 {
    grid-column: span 9 / span 9;
  }

  .md\:cu-col-span-10 {
    grid-column: span 10 / span 10;
  }

  .md\:cu-col-span-11 {
    grid-column: span 11 / span 11;
  }

  .md\:cu-col-span-12 {
    grid-column: span 12 / span 12;
  }

  .md\:cu-col-span-auto {
    grid-column: span auto / span auto;
  }

  .md\:cu-col-start-1 {
    grid-column-start: 1;
  }

  .md\:cu-col-start-2 {
    grid-column-start: 2;
  }

  .md\:cu-col-start-3 {
    grid-column-start: 3;
  }

  .md\:cu-col-start-4 {
    grid-column-start: 4;
  }

  .md\:cu-col-start-5 {
    grid-column-start: 5;
  }

  .md\:cu-col-start-6 {
    grid-column-start: 6;
  }

  .md\:cu-col-start-7 {
    grid-column-start: 7;
  }

  .md\:cu-col-start-8 {
    grid-column-start: 8;
  }

  .md\:cu-col-start-9 {
    grid-column-start: 9;
  }

  .md\:cu-col-start-10 {
    grid-column-start: 10;
  }

  .md\:cu-col-start-11 {
    grid-column-start: 11;
  }

  .md\:cu-col-start-12 {
    grid-column-start: 12;
  }

  .md\:cu-col-start-13 {
    grid-column-start: 13;
  }

  .md\:cu-col-start-auto {
    grid-column-start: auto;
  }

  .md\:cu-col-end-1 {
    grid-column-end: 1;
  }

  .md\:cu-col-end-2 {
    grid-column-end: 2;
  }

  .md\:cu-col-end-3 {
    grid-column-end: 3;
  }

  .md\:cu-col-end-4 {
    grid-column-end: 4;
  }

  .md\:cu-col-end-5 {
    grid-column-end: 5;
  }

  .md\:cu-col-end-6 {
    grid-column-end: 6;
  }

  .md\:cu-col-end-7 {
    grid-column-end: 7;
  }

  .md\:cu-col-end-8 {
    grid-column-end: 8;
  }

  .md\:cu-col-end-9 {
    grid-column-end: 9;
  }

  .md\:cu-col-end-10 {
    grid-column-end: 10;
  }

  .md\:cu-col-end-11 {
    grid-column-end: 11;
  }

  .md\:cu-col-end-12 {
    grid-column-end: 12;
  }

  .md\:cu-col-end-13 {
    grid-column-end: 13;
  }

  .md\:cu-col-end-auto {
    grid-column-end: auto;
  }

  .md\:cu-row-span-1 {
    grid-row: span 1 / span 1;
  }

  .md\:cu-row-span-2 {
    grid-row: span 2 / span 2;
  }

  .md\:cu-row-span-3 {
    grid-row: span 3 / span 3;
  }

  .md\:cu-row-span-4 {
    grid-row: span 4 / span 4;
  }

  .md\:cu-row-span-5 {
    grid-row: span 5 / span 5;
  }

  .md\:cu-row-span-6 {
    grid-row: span 6 / span 6;
  }

  .md\:cu-row-span-7 {
    grid-row: span 7 / span 7;
  }

  .md\:cu-row-span-8 {
    grid-row: span 8 / span 8;
  }

  .md\:cu-row-span-9 {
    grid-row: span 9 / span 9;
  }

  .md\:cu-row-span-10 {
    grid-row: span 10 / span 10;
  }

  .md\:cu-row-span-11 {
    grid-row: span 11 / span 11;
  }

  .md\:cu-row-span-12 {
    grid-row: span 12 / span 12;
  }

  .md\:cu-row-span-auto {
    grid-row: span auto / span auto;
  }
}

@media (width >= 1280px) {
  .lg\:cu-columns-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .lg\:cu-columns-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:cu-columns-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:cu-columns-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:cu-columns-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .lg\:cu-columns-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .lg\:cu-columns-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .lg\:cu-columns-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .lg\:cu-columns-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }

  .lg\:cu-columns-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .lg\:cu-columns-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }

  .lg\:cu-columns-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .lg\:cu-columns-auto {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }

  .lg\:cu-col-span-1 {
    grid-column: span 1 / span 1;
  }

  .lg\:cu-col-span-2 {
    grid-column: span 2 / span 2;
  }

  .lg\:cu-col-span-3 {
    grid-column: span 3 / span 3;
  }

  .lg\:cu-col-span-4 {
    grid-column: span 4 / span 4;
  }

  .lg\:cu-col-span-5 {
    grid-column: span 5 / span 5;
  }

  .lg\:cu-col-span-6 {
    grid-column: span 6 / span 6;
  }

  .lg\:cu-col-span-7 {
    grid-column: span 7 / span 7;
  }

  .lg\:cu-col-span-8 {
    grid-column: span 8 / span 8;
  }

  .lg\:cu-col-span-9 {
    grid-column: span 9 / span 9;
  }

  .lg\:cu-col-span-10 {
    grid-column: span 10 / span 10;
  }

  .lg\:cu-col-span-11 {
    grid-column: span 11 / span 11;
  }

  .lg\:cu-col-span-12 {
    grid-column: span 12 / span 12;
  }

  .lg\:cu-col-span-auto {
    grid-column: span auto / span auto;
  }

  .lg\:cu-col-start-1 {
    grid-column-start: 1;
  }

  .lg\:cu-col-start-2 {
    grid-column-start: 2;
  }

  .lg\:cu-col-start-3 {
    grid-column-start: 3;
  }

  .lg\:cu-col-start-4 {
    grid-column-start: 4;
  }

  .lg\:cu-col-start-5 {
    grid-column-start: 5;
  }

  .lg\:cu-col-start-6 {
    grid-column-start: 6;
  }

  .lg\:cu-col-start-7 {
    grid-column-start: 7;
  }

  .lg\:cu-col-start-8 {
    grid-column-start: 8;
  }

  .lg\:cu-col-start-9 {
    grid-column-start: 9;
  }

  .lg\:cu-col-start-10 {
    grid-column-start: 10;
  }

  .lg\:cu-col-start-11 {
    grid-column-start: 11;
  }

  .lg\:cu-col-start-12 {
    grid-column-start: 12;
  }

  .lg\:cu-col-start-13 {
    grid-column-start: 13;
  }

  .lg\:cu-col-start-auto {
    grid-column-start: auto;
  }

  .lg\:cu-col-end-1 {
    grid-column-end: 1;
  }

  .lg\:cu-col-end-2 {
    grid-column-end: 2;
  }

  .lg\:cu-col-end-3 {
    grid-column-end: 3;
  }

  .lg\:cu-col-end-4 {
    grid-column-end: 4;
  }

  .lg\:cu-col-end-5 {
    grid-column-end: 5;
  }

  .lg\:cu-col-end-6 {
    grid-column-end: 6;
  }

  .lg\:cu-col-end-7 {
    grid-column-end: 7;
  }

  .lg\:cu-col-end-8 {
    grid-column-end: 8;
  }

  .lg\:cu-col-end-9 {
    grid-column-end: 9;
  }

  .lg\:cu-col-end-10 {
    grid-column-end: 10;
  }

  .lg\:cu-col-end-11 {
    grid-column-end: 11;
  }

  .lg\:cu-col-end-12 {
    grid-column-end: 12;
  }

  .lg\:cu-col-end-13 {
    grid-column-end: 13;
  }

  .lg\:cu-col-end-auto {
    grid-column-end: auto;
  }

  .lg\:cu-row-span-1 {
    grid-row: span 1 / span 1;
  }

  .lg\:cu-row-span-2 {
    grid-row: span 2 / span 2;
  }

  .lg\:cu-row-span-3 {
    grid-row: span 3 / span 3;
  }

  .lg\:cu-row-span-4 {
    grid-row: span 4 / span 4;
  }

  .lg\:cu-row-span-5 {
    grid-row: span 5 / span 5;
  }

  .lg\:cu-row-span-6 {
    grid-row: span 6 / span 6;
  }

  .lg\:cu-row-span-7 {
    grid-row: span 7 / span 7;
  }

  .lg\:cu-row-span-8 {
    grid-row: span 8 / span 8;
  }

  .lg\:cu-row-span-9 {
    grid-row: span 9 / span 9;
  }

  .lg\:cu-row-span-10 {
    grid-row: span 10 / span 10;
  }

  .lg\:cu-row-span-11 {
    grid-row: span 11 / span 11;
  }

  .lg\:cu-row-span-12 {
    grid-row: span 12 / span 12;
  }

  .lg\:cu-row-span-auto {
    grid-row: span auto / span auto;
  }
}

@media (width >= 1536px) {
  .xl\:cu-columns-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .xl\:cu-columns-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .xl\:cu-columns-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .xl\:cu-columns-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .xl\:cu-columns-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .xl\:cu-columns-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .xl\:cu-columns-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .xl\:cu-columns-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .xl\:cu-columns-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }

  .xl\:cu-columns-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .xl\:cu-columns-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }

  .xl\:cu-columns-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .xl\:cu-columns-auto {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }

  .xl\:cu-col-span-1 {
    grid-column: span 1 / span 1;
  }

  .xl\:cu-col-span-2 {
    grid-column: span 2 / span 2;
  }

  .xl\:cu-col-span-3 {
    grid-column: span 3 / span 3;
  }

  .xl\:cu-col-span-4 {
    grid-column: span 4 / span 4;
  }

  .xl\:cu-col-span-5 {
    grid-column: span 5 / span 5;
  }

  .xl\:cu-col-span-6 {
    grid-column: span 6 / span 6;
  }

  .xl\:cu-col-span-7 {
    grid-column: span 7 / span 7;
  }

  .xl\:cu-col-span-8 {
    grid-column: span 8 / span 8;
  }

  .xl\:cu-col-span-9 {
    grid-column: span 9 / span 9;
  }

  .xl\:cu-col-span-10 {
    grid-column: span 10 / span 10;
  }

  .xl\:cu-col-span-11 {
    grid-column: span 11 / span 11;
  }

  .xl\:cu-col-span-12 {
    grid-column: span 12 / span 12;
  }

  .xl\:cu-col-span-auto {
    grid-column: span auto / span auto;
  }

  .xl\:cu-col-start-1 {
    grid-column-start: 1;
  }

  .xl\:cu-col-start-2 {
    grid-column-start: 2;
  }

  .xl\:cu-col-start-3 {
    grid-column-start: 3;
  }

  .xl\:cu-col-start-4 {
    grid-column-start: 4;
  }

  .xl\:cu-col-start-5 {
    grid-column-start: 5;
  }

  .xl\:cu-col-start-6 {
    grid-column-start: 6;
  }

  .xl\:cu-col-start-7 {
    grid-column-start: 7;
  }

  .xl\:cu-col-start-8 {
    grid-column-start: 8;
  }

  .xl\:cu-col-start-9 {
    grid-column-start: 9;
  }

  .xl\:cu-col-start-10 {
    grid-column-start: 10;
  }

  .xl\:cu-col-start-11 {
    grid-column-start: 11;
  }

  .xl\:cu-col-start-12 {
    grid-column-start: 12;
  }

  .xl\:cu-col-start-13 {
    grid-column-start: 13;
  }

  .xl\:cu-col-start-auto {
    grid-column-start: auto;
  }

  .xl\:cu-col-end-1 {
    grid-column-end: 1;
  }

  .xl\:cu-col-end-2 {
    grid-column-end: 2;
  }

  .xl\:cu-col-end-3 {
    grid-column-end: 3;
  }

  .xl\:cu-col-end-4 {
    grid-column-end: 4;
  }

  .xl\:cu-col-end-5 {
    grid-column-end: 5;
  }

  .xl\:cu-col-end-6 {
    grid-column-end: 6;
  }

  .xl\:cu-col-end-7 {
    grid-column-end: 7;
  }

  .xl\:cu-col-end-8 {
    grid-column-end: 8;
  }

  .xl\:cu-col-end-9 {
    grid-column-end: 9;
  }

  .xl\:cu-col-end-10 {
    grid-column-end: 10;
  }

  .xl\:cu-col-end-11 {
    grid-column-end: 11;
  }

  .xl\:cu-col-end-12 {
    grid-column-end: 12;
  }

  .xl\:cu-col-end-13 {
    grid-column-end: 13;
  }

  .xl\:cu-col-end-auto {
    grid-column-end: auto;
  }

  .xl\:cu-row-span-1 {
    grid-row: span 1 / span 1;
  }

  .xl\:cu-row-span-2 {
    grid-row: span 2 / span 2;
  }

  .xl\:cu-row-span-3 {
    grid-row: span 3 / span 3;
  }

  .xl\:cu-row-span-4 {
    grid-row: span 4 / span 4;
  }

  .xl\:cu-row-span-5 {
    grid-row: span 5 / span 5;
  }

  .xl\:cu-row-span-6 {
    grid-row: span 6 / span 6;
  }

  .xl\:cu-row-span-7 {
    grid-row: span 7 / span 7;
  }

  .xl\:cu-row-span-8 {
    grid-row: span 8 / span 8;
  }

  .xl\:cu-row-span-9 {
    grid-row: span 9 / span 9;
  }

  .xl\:cu-row-span-10 {
    grid-row: span 10 / span 10;
  }

  .xl\:cu-row-span-11 {
    grid-row: span 11 / span 11;
  }

  .xl\:cu-row-span-12 {
    grid-row: span 12 / span 12;
  }

  .xl\:cu-row-span-auto {
    grid-row: span auto / span auto;
  }
}

.cu-gap {
  gap: var(--gap);
}

.cu-gap-0\.5 {
  gap: var(--canon-space-0_5);
}

.cu-gap-1 {
  gap: var(--canon-space-1);
}

.cu-gap-1\.5 {
  gap: var(--canon-space-1_5);
}

.cu-gap-2 {
  gap: var(--canon-space-2);
}

.cu-gap-3 {
  gap: var(--canon-space-3);
}

.cu-gap-4 {
  gap: var(--canon-space-4);
}

.cu-gap-5 {
  gap: var(--canon-space-5);
}

.cu-gap-6 {
  gap: var(--canon-space-6);
}

.cu-gap-7 {
  gap: var(--canon-space-7);
}

.cu-gap-8 {
  gap: var(--canon-space-8);
}

.cu-gap-9 {
  gap: var(--canon-space-9);
}

.cu-gap-10 {
  gap: var(--canon-space-10);
}

.cu-gap-11 {
  gap: var(--canon-space-11);
}

.cu-gap-12 {
  gap: var(--canon-space-12);
}

.cu-gap-13 {
  gap: var(--canon-space-13);
}

.cu-gap-14 {
  gap: var(--canon-space-14);
}

@media (width >= 640px) {
  .xs\:cu-gap {
    gap: var(--gap-xs);
  }

  .xs\:cu-gap-0\.5 {
    gap: var(--canon-space-0_5);
  }

  .xs\:cu-gap-1 {
    gap: var(--canon-space-1);
  }

  .xs\:cu-gap-1\.5 {
    gap: var(--canon-space-1_5);
  }

  .xs\:cu-gap-2 {
    gap: var(--canon-space-2);
  }

  .xs\:cu-gap-3 {
    gap: var(--canon-space-3);
  }

  .xs\:cu-gap-4 {
    gap: var(--canon-space-4);
  }

  .xs\:cu-gap-5 {
    gap: var(--canon-space-5);
  }

  .xs\:cu-gap-6 {
    gap: var(--canon-space-6);
  }

  .xs\:cu-gap-7 {
    gap: var(--canon-space-7);
  }

  .xs\:cu-gap-8 {
    gap: var(--canon-space-8);
  }

  .xs\:cu-gap-9 {
    gap: var(--canon-space-9);
  }

  .xs\:cu-gap-10 {
    gap: var(--canon-space-10);
  }

  .xs\:cu-gap-11 {
    gap: var(--canon-space-11);
  }

  .xs\:cu-gap-12 {
    gap: var(--canon-space-12);
  }

  .xs\:cu-gap-13 {
    gap: var(--canon-space-13);
  }

  .xs\:cu-gap-14 {
    gap: var(--canon-space-14);
  }
}

@media (width >= 768px) {
  .sm\:cu-gap {
    gap: var(--gap-sm);
  }

  .sm\:cu-gap-0\.5 {
    gap: var(--canon-space-0_5);
  }

  .sm\:cu-gap-1 {
    gap: var(--canon-space-1);
  }

  .sm\:cu-gap-1\.5 {
    gap: var(--canon-space-1_5);
  }

  .sm\:cu-gap-2 {
    gap: var(--canon-space-2);
  }

  .sm\:cu-gap-3 {
    gap: var(--canon-space-3);
  }

  .sm\:cu-gap-4 {
    gap: var(--canon-space-4);
  }

  .sm\:cu-gap-5 {
    gap: var(--canon-space-5);
  }

  .sm\:cu-gap-6 {
    gap: var(--canon-space-6);
  }

  .sm\:cu-gap-7 {
    gap: var(--canon-space-7);
  }

  .sm\:cu-gap-8 {
    gap: var(--canon-space-8);
  }

  .sm\:cu-gap-9 {
    gap: var(--canon-space-9);
  }

  .sm\:cu-gap-10 {
    gap: var(--canon-space-10);
  }

  .sm\:cu-gap-11 {
    gap: var(--canon-space-11);
  }

  .sm\:cu-gap-12 {
    gap: var(--canon-space-12);
  }

  .sm\:cu-gap-13 {
    gap: var(--canon-space-13);
  }

  .sm\:cu-gap-14 {
    gap: var(--canon-space-14);
  }
}

@media (width >= 1024px) {
  .md\:cu-gap {
    gap: var(--gap-md);
  }

  .md\:cu-gap-0\.5 {
    gap: var(--canon-space-0_5);
  }

  .md\:cu-gap-1 {
    gap: var(--canon-space-1);
  }

  .md\:cu-gap-1\.5 {
    gap: var(--canon-space-1_5);
  }

  .md\:cu-gap-2 {
    gap: var(--canon-space-2);
  }

  .md\:cu-gap-3 {
    gap: var(--canon-space-3);
  }

  .md\:cu-gap-4 {
    gap: var(--canon-space-4);
  }

  .md\:cu-gap-5 {
    gap: var(--canon-space-5);
  }

  .md\:cu-gap-6 {
    gap: var(--canon-space-6);
  }

  .md\:cu-gap-7 {
    gap: var(--canon-space-7);
  }

  .md\:cu-gap-8 {
    gap: var(--canon-space-8);
  }

  .md\:cu-gap-9 {
    gap: var(--canon-space-9);
  }

  .md\:cu-gap-10 {
    gap: var(--canon-space-10);
  }

  .md\:cu-gap-11 {
    gap: var(--canon-space-11);
  }

  .md\:cu-gap-12 {
    gap: var(--canon-space-12);
  }

  .md\:cu-gap-13 {
    gap: var(--canon-space-13);
  }

  .md\:cu-gap-14 {
    gap: var(--canon-space-14);
  }
}

@media (width >= 1280px) {
  .lg\:cu-gap {
    gap: var(--gap-lg);
  }

  .lg\:cu-gap-0\.5 {
    gap: var(--canon-space-0_5);
  }

  .lg\:cu-gap-1 {
    gap: var(--canon-space-1);
  }

  .lg\:cu-gap-1\.5 {
    gap: var(--canon-space-1_5);
  }

  .lg\:cu-gap-2 {
    gap: var(--canon-space-2);
  }

  .lg\:cu-gap-3 {
    gap: var(--canon-space-3);
  }

  .lg\:cu-gap-4 {
    gap: var(--canon-space-4);
  }

  .lg\:cu-gap-5 {
    gap: var(--canon-space-5);
  }

  .lg\:cu-gap-6 {
    gap: var(--canon-space-6);
  }

  .lg\:cu-gap-7 {
    gap: var(--canon-space-7);
  }

  .lg\:cu-gap-8 {
    gap: var(--canon-space-8);
  }

  .lg\:cu-gap-9 {
    gap: var(--canon-space-9);
  }

  .lg\:cu-gap-10 {
    gap: var(--canon-space-10);
  }

  .lg\:cu-gap-11 {
    gap: var(--canon-space-11);
  }

  .lg\:cu-gap-12 {
    gap: var(--canon-space-12);
  }

  .lg\:cu-gap-13 {
    gap: var(--canon-space-13);
  }

  .lg\:cu-gap-14 {
    gap: var(--canon-space-14);
  }
}

@media (width >= 1536px) {
  .xl\:cu-gap {
    gap: var(--gap-xl);
  }

  .xl\:cu-gap-0\.5 {
    gap: var(--canon-space-0_5);
  }

  .xl\:cu-gap-1 {
    gap: var(--canon-space-1);
  }

  .xl\:cu-gap-1\.5 {
    gap: var(--canon-space-1_5);
  }

  .xl\:cu-gap-2 {
    gap: var(--canon-space-2);
  }

  .xl\:cu-gap-3 {
    gap: var(--canon-space-3);
  }

  .xl\:cu-gap-4 {
    gap: var(--canon-space-4);
  }

  .xl\:cu-gap-5 {
    gap: var(--canon-space-5);
  }

  .xl\:cu-gap-6 {
    gap: var(--canon-space-6);
  }

  .xl\:cu-gap-7 {
    gap: var(--canon-space-7);
  }

  .xl\:cu-gap-8 {
    gap: var(--canon-space-8);
  }

  .xl\:cu-gap-9 {
    gap: var(--canon-space-9);
  }

  .xl\:cu-gap-10 {
    gap: var(--canon-space-10);
  }

  .xl\:cu-gap-11 {
    gap: var(--canon-space-11);
  }

  .xl\:cu-gap-12 {
    gap: var(--canon-space-12);
  }

  .xl\:cu-gap-13 {
    gap: var(--canon-space-13);
  }

  .xl\:cu-gap-14 {
    gap: var(--canon-space-14);
  }
}

.cu-align-start {
  align-items: start;
}

.cu-align-center {
  align-items: center;
}

.cu-align-end {
  align-items: end;
}

.cu-align-stretch {
  align-items: stretch;
}

.cu-jc-start {
  justify-content: start;
}

.cu-jc-center {
  justify-content: center;
}

.cu-jc-end {
  justify-content: end;
}

.cu-jc-between {
  justify-content: space-between;
}

.cu-fd-row {
  flex-direction: row;
}

.cu-fd-column {
  flex-direction: column;
}

.cu-fd-row-reverse {
  flex-direction: row-reverse;
}

.cu-fd-column-reverse {
  flex-direction: column-reverse;
}

@media (width >= 640px) {
  .xs\:cu-align-start {
    align-items: start;
  }

  .xs\:cu-align-center {
    align-items: center;
  }

  .xs\:cu-align-end {
    align-items: end;
  }

  .xs\:cu-align-stretch {
    align-items: stretch;
  }

  .xs\:cu-jc-start {
    justify-content: start;
  }

  .xs\:cu-jc-center {
    justify-content: center;
  }

  .xs\:cu-jc-end {
    justify-content: end;
  }

  .xs\:cu-jc-between {
    justify-content: space-between;
  }

  .xs\:cu-fd-row {
    flex-direction: row;
  }

  .xs\:cu-fd-column {
    flex-direction: column;
  }

  .xs\:cu-fd-row-reverse {
    flex-direction: row-reverse;
  }

  .xs\:cu-fd-column-reverse {
    flex-direction: column-reverse;
  }
}

@media (width >= 768px) {
  .sm\:cu-align-start {
    align-items: start;
  }

  .sm\:cu-align-center {
    align-items: center;
  }

  .sm\:cu-align-end {
    align-items: end;
  }

  .sm\:cu-align-stretch {
    align-items: stretch;
  }

  .sm\:cu-jc-start {
    justify-content: start;
  }

  .sm\:cu-jc-center {
    justify-content: center;
  }

  .sm\:cu-jc-end {
    justify-content: end;
  }

  .sm\:cu-jc-between {
    justify-content: space-between;
  }

  .sm\:cu-fd-row {
    flex-direction: row;
  }

  .sm\:cu-fd-column {
    flex-direction: column;
  }

  .sm\:cu-fd-row-reverse {
    flex-direction: row-reverse;
  }

  .sm\:cu-fd-column-reverse {
    flex-direction: column-reverse;
  }
}

@media (width >= 1024px) {
  .md\:cu-align-start {
    align-items: start;
  }

  .md\:cu-align-center {
    align-items: center;
  }

  .md\:cu-align-end {
    align-items: end;
  }

  .md\:cu-align-stretch {
    align-items: stretch;
  }

  .md\:cu-jc-start {
    justify-content: start;
  }

  .md\:cu-jc-center {
    justify-content: center;
  }

  .md\:cu-jc-end {
    justify-content: end;
  }

  .md\:cu-jc-between {
    justify-content: space-between;
  }

  .md\:cu-fd-row {
    flex-direction: row;
  }

  .md\:cu-fd-column {
    flex-direction: column;
  }

  .md\:cu-fd-row-reverse {
    flex-direction: row-reverse;
  }

  .md\:cu-fd-column-reverse {
    flex-direction: column-reverse;
  }
}

@media (width >= 1280px) {
  .lg\:cu-align-start {
    align-items: start;
  }

  .lg\:cu-align-center {
    align-items: center;
  }

  .lg\:cu-align-end {
    align-items: end;
  }

  .lg\:cu-align-stretch {
    align-items: stretch;
  }

  .lg\:cu-jc-start {
    justify-content: start;
  }

  .lg\:cu-jc-center {
    justify-content: center;
  }

  .lg\:cu-jc-end {
    justify-content: end;
  }

  .lg\:cu-jc-between {
    justify-content: space-between;
  }

  .lg\:cu-fd-row {
    flex-direction: row;
  }

  .lg\:cu-fd-column {
    flex-direction: column;
  }

  .lg\:cu-fd-row-reverse {
    flex-direction: row-reverse;
  }

  .lg\:cu-fd-column-reverse {
    flex-direction: column-reverse;
  }
}

@media (width >= 1536px) {
  .xl\:cu-align-start {
    align-items: start;
  }

  .xl\:cu-align-center {
    align-items: center;
  }

  .xl\:cu-align-end {
    align-items: end;
  }

  .xl\:cu-align-stretch {
    align-items: stretch;
  }

  .xl\:cu-jc-start {
    justify-content: start;
  }

  .xl\:cu-jc-center {
    justify-content: center;
  }

  .xl\:cu-jc-end {
    justify-content: end;
  }

  .xl\:cu-jc-between {
    justify-content: space-between;
  }

  .xl\:cu-fd-row {
    flex-direction: row;
  }

  .xl\:cu-fd-column {
    flex-direction: column;
  }

  .xl\:cu-fd-row-reverse {
    flex-direction: row-reverse;
  }

  .xl\:cu-fd-column-reverse {
    flex-direction: column-reverse;
  }
}

:where(a) {
  color: inherit;
  text-decoration: none;
}

:root {
  --canon-font-regular: system-ui;
  --canon-font-monospace: ui-monospace, "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
  --canon-font-weight-regular: 400;
  --canon-font-weight-bold: 600;
  --canon-font-size-1: .625rem;
  --canon-font-size-2: .75rem;
  --canon-font-size-3: .875rem;
  --canon-font-size-4: 1rem;
  --canon-font-size-5: 1.25rem;
  --canon-font-size-6: 1.5rem;
  --canon-font-size-7: 2rem;
  --canon-font-size-8: 3rem;
  --canon-font-size-9: 4rem;
  --canon-font-size-10: 5.75rem;
  --canon-space: .25rem;
  --canon-space-0_5: calc(var(--canon-space) * .5);
  --canon-space-1: var(--canon-space);
  --canon-space-1_5: calc(var(--canon-space) * 1.5);
  --canon-space-2: calc(var(--canon-space) * 2);
  --canon-space-3: calc(var(--canon-space) * 3);
  --canon-space-4: calc(var(--canon-space) * 4);
  --canon-space-5: calc(var(--canon-space) * 5);
  --canon-space-6: calc(var(--canon-space) * 6);
  --canon-space-7: calc(var(--canon-space) * 7);
  --canon-space-8: calc(var(--canon-space) * 8);
  --canon-space-9: calc(var(--canon-space) * 9);
  --canon-space-10: calc(var(--canon-space) * 10);
  --canon-space-11: calc(var(--canon-space) * 11);
  --canon-space-12: calc(var(--canon-space) * 12);
  --canon-space-13: calc(var(--canon-space) * 13);
  --canon-space-14: calc(var(--canon-space) * 14);
  --canon-radius-1: calc(.125rem);
  --canon-radius-2: calc(.25rem);
  --canon-radius-3: calc(.5rem);
  --canon-radius-4: calc(.75rem);
  --canon-radius-5: calc(1rem);
  --canon-radius-6: calc(1.25rem);
  --canon-radius-full: 9999px;
  --canon-black: #000;
  --canon-white: #fff;
  --canon-gray-1: #f8f8f8;
  --canon-gray-2: #ececec;
  --canon-gray-3: #d9d9d9;
  --canon-gray-4: #c1c1c1;
  --canon-gray-5: #9e9e9e;
  --canon-gray-6: #8c8c8c;
  --canon-gray-7: #757575;
  --canon-gray-8: #595959;
  --canon-bg: var(--canon-gray-1);
  --canon-bg-surface-1: var(--canon-white);
  --canon-bg-surface-2: var(--canon-gray-2);
  --canon-bg-solid: #1f5493;
  --canon-bg-solid-hover: #163a66;
  --canon-bg-solid-pressed: #0f2b4e;
  --canon-bg-solid-disabled: #ebebeb;
  --canon-bg-tint: transparent;
  --canon-bg-tint-hover: #1f549366;
  --canon-bg-tint-pressed: #1f549399;
  --canon-bg-tint-disabled: #ebebeb;
  --canon-bg-danger: #feebe7;
  --canon-bg-warning: #fff2b2;
  --canon-bg-success: #e6f6eb;
  --canon-fg-primary: var(--canon-black);
  --canon-fg-secondary: var(--canon-gray-7);
  --canon-fg-link: #1f5493;
  --canon-fg-link-hover: #1f2d5c;
  --canon-fg-disabled: #9e9e9e;
  --canon-fg-solid: var(--canon-white);
  --canon-fg-solid-disabled: #9c9c9c;
  --canon-fg-tint: #1f5493;
  --canon-fg-tint-disabled: var(--canon-gray-5);
  --canon-fg-danger: #e22b2b;
  --canon-fg-warning: #e36d05;
  --canon-fg-success: #1db954;
  --canon-border: #0000001a;
  --canon-border-hover: #0003;
  --canon-border-pressed: #0006;
  --canon-border-disabled: #0000001a;
  --canon-border-danger: #f87a7a;
  --canon-border-warning: #e36d05;
  --canon-border-success: #53db83;
  --canon-ring: #1f5493;
  --canon-scrollbar: #a0a0a03b;
  --canon-scrollbar-thumb: #a0a0a0;
}

[data-theme="dark"] {
  --canon-gray-1: #191919;
  --canon-gray-2: #242424;
  --canon-gray-3: #373737;
  --canon-gray-4: #464646;
  --canon-gray-5: #575757;
  --canon-gray-6: #7b7b7b;
  --canon-gray-7: #9e9e9e;
  --canon-gray-8: #b4b4b4;
  --canon-bg: var(--canon-black);
  --canon-bg-surface-1: var(--canon-gray-1);
  --canon-bg-surface-2: var(--canon-gray-2);
  --canon-bg-solid: #9cc9ff;
  --canon-bg-solid-hover: #83b9fd;
  --canon-bg-solid-pressed: #83b9fd;
  --canon-bg-solid-disabled: #222;
  --canon-bg-tint: transparent;
  --canon-bg-tint-hover: #9cc9ff1f;
  --canon-bg-tint-pressed: #9cc9ff29;
  --canon-bg-tint-disabled: transparent;
  --canon-bg-danger: #3b1219;
  --canon-bg-warning: #302008;
  --canon-bg-success: #132d21;
  --canon-fg-primary: var(--canon-white);
  --canon-fg-secondary: var(--canon-gray-7);
  --canon-fg-link: #9cc9ff;
  --canon-fg-link-hover: #7eb5f7;
  --canon-fg-disabled: var(--canon-gray-7);
  --canon-fg-solid: #101821;
  --canon-fg-solid-disabled: var(--canon-gray-5);
  --canon-fg-tint: #9cc9ff;
  --canon-fg-tint-disabled: var(--canon-gray-5);
  --canon-fg-danger: #e22b2b;
  --canon-fg-warning: #e36d05;
  --canon-fg-success: #1db954;
  --canon-border: #fff3;
  --canon-border-hover: #fff6;
  --canon-border-pressed: #ffffff80;
  --canon-border-disabled: #fff3;
  --canon-border-danger: #f87a7a;
  --canon-border-warning: #e36d05;
  --canon-border-success: #53db83;
  --canon-ring: #1f5493;
  --canon-scrollbar: #3636363a;
  --canon-scrollbar-thumb: #575757;
}

.canon-AvatarRoot {
  vertical-align: middle;
  user-select: none;
  color: var(--canon-fg-primary);
  background-color: var(--canon-bg-surface-2);
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  display: inline-flex;
  overflow: hidden;
}

.canon-AvatarRoot[data-size="small"] {
  width: 1.5rem;
  height: 1.5rem;
}

.canon-AvatarRoot[data-size="medium"] {
  width: 2rem;
  height: 2rem;
}

.canon-AvatarRoot[data-size="large"] {
  width: 3rem;
  height: 3rem;
}

.canon-AvatarImage {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.canon-AvatarFallback {
  width: 100%;
  height: 100%;
  font-size: var(--canon-font-size-3);
  font-weight: var(--canon-font-weight-regular);
  box-shadow: inset 0 0 0 1px var(--canon-border);
  border-radius: var(--canon-radius-full);
  justify-content: center;
  align-items: center;
  display: flex;
}

.canon-Box {
  font-family: var(--canon-font-regular);
  font-weight: var(--canon-font-weight-regular);
  color: var(--canon-fg-primary);
}

.canon-Button {
  user-select: none;
  font-family: var(--canon-font-regular);
  font-weight: var(--canon-font-weight-bold);
  cursor: pointer;
  border-radius: var(--canon-radius-2);
  justify-content: center;
  align-items: center;
  gap: var(--canon-space-1_5);
  border: none;
  padding: 0;
  display: inline-flex;

  &:disabled {
    cursor: not-allowed;
  }
}

.canon-Button[data-variant="primary"] {
  background-color: var(--canon-bg-solid);
  color: var(--canon-fg-solid);
  transition: background-color .15s, box-shadow .15s;

  &:hover {
    background-color: var(--canon-bg-solid-hover);
  }

  &:active {
    background-color: var(--canon-bg-solid-pressed);
  }

  &:focus-visible {
    outline: 2px solid var(--canon-ring);
    outline-offset: 2px;
  }

  &:disabled {
    background-color: var(--canon-bg-solid-disabled);
    color: var(--canon-fg-solid-disabled);
  }
}

.canon-Button[data-variant="secondary"] {
  background-color: var(--canon-bg-surface-1);
  box-shadow: inset 0 0 0 1px var(--canon-border);
  color: var(--canon-fg-primary);
  transition: box-shadow .15s;

  &:hover {
    box-shadow: inset 0 0 0 1px var(--canon-border-hover);
  }

  &:active {
    box-shadow: inset 0 0 0 1px var(--canon-border-pressed);
  }

  &:focus-visible {
    box-shadow: inset 0 0 0 2px var(--canon-ring);
    outline: none;
    transition: none;
  }

  &:disabled {
    box-shadow: inset 0 0 0 1px var(--canon-border-disabled);
    color: var(--canon-fg-disabled);
  }
}

.canon-Button[data-size="medium"] {
  font-size: var(--canon-font-size-4);
  padding: 0 var(--canon-space-3);
  height: 40px;
}

.canon-Button[data-size="small"] {
  font-size: var(--canon-font-size-3);
  padding: 0 var(--canon-space-2);
  height: 32px;
}

.canon-ButtonIcon[data-size="small"], .canon-ButtonIcon[data-size="small"] svg {
  width: 1rem;
  height: 1rem;
}

.canon-ButtonIcon[data-size="medium"], .canon-ButtonIcon[data-size="medium"] svg {
  width: 1.25rem;
  height: 1.25rem;
}

.canon-CheckboxRoot {
  width: 1rem;
  height: 1rem;
  box-shadow: inset 0 0 0 1px var(--canon-border);
  cursor: pointer;
  background-color: var(--canon-bg-surface-1);
  border: none;
  border-radius: 2px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 0;
  transition: background-color .2s ease-in-out;
  display: flex;
}

.canon-CheckboxRoot:focus-visible {
  outline: 2px solid var(--canon-ring);
  outline-offset: 2px;
  transition: none;
}

.canon-CheckboxRoot[data-checked] {
  background-color: var(--canon-bg-solid);
  box-shadow: none;
  color: var(--canon-fg-solid);
}

.canon-CheckboxLabel {
  align-items: center;
  gap: var(--canon-space-2);
  font-size: var(--canon-font-size-3);
  font-family: var(--canon-font-regular);
  font-weight: var(--canon-font-weight-regular);
  color: var(--canon-fg-primary);
  user-select: none;
  flex-direction: row;
  display: flex;

  &:hover {
    & .canon-CheckboxRoot:not([data-checked]) {
      box-shadow: inset 0 0 0 1px var(--canon-border-hover);
    }
  }
}

.canon-CheckboxIndicator {
  color: var(--canon-fg-solid);
  justify-content: center;
  align-items: center;
  display: flex;
}

.canon-CollapsiblePanel {
  height: var(--collapsible-panel-height);
  transition: all .15s ease-out;
  display: flex;
  overflow: hidden;

  &[data-starting-style], &[data-ending-style] {
    height: 0;
  }
}

.canon-Container {
  max-width: 120rem;
  padding-inline: var(--canon-space-4);
  margin-inline: auto;
  transition: padding .2s ease-in-out;
}

@media (width >= 640px) {
  .canon-Container {
    padding-inline: var(--canon-space-8);
  }
}

@media (width >= 1024px) {
  .canon-Container {
    padding-inline: var(--canon-space-12);
  }
}

.canon-DataTableRoot {
  gap: var(--canon-space-3);
  flex-direction: column;
  display: flex;
}

.canon-DataTablePagination {
  padding-top: var(--canon-space-5);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.canon-DataTablePagination--left {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.canon-DataTablePagination--right {
  justify-content: space-between;
  align-items: center;
  gap: var(--canon-space-2);
  display: flex;
}

.canon-DataTablePagination--select {
  min-width: 10.5rem;
}

.canon-FieldLabel {
  margin-bottom: var(--canon-space-3);
  gap: var(--canon-space-1);
  flex-direction: column;
  display: flex;
}

.canon-FieldLabelLabel {
  color: var(--canon-fg-primary);
  cursor: pointer;
  font-weight: var(--canon-font-weight-regular);
  font-size: var(--canon-font-size-2);
  margin-right: auto;
}

.canon-FieldLabelSecondaryLabel {
  color: var(--canon-fg-secondary);
  font-weight: var(--canon-font-weight-regular);
  margin-left: var(--canon-space-1);
}

.canon-FieldLabelDescription {
  font-weight: var(--canon-font-weight-regular);
  font-size: var(--canon-font-size-2);
  color: var(--canon-fg-secondary);
  margin: 0;
}

.canon-Flex {
  min-width: 0;
  display: flex;
}

.canon-Grid {
  display: grid;
}

.canon-Heading {
  font-family: var(--canon-font-regular);
  color: var(--canon-fg-primary);
  margin: 0;
  padding: 0;
  line-height: 100%;
}

.canon-Heading[data-variant="display"] {
  font-size: var(--canon-font-size-10);
  font-weight: var(--canon-font-weight-bold);
}

.canon-Heading[data-variant="title1"] {
  font-size: var(--canon-font-size-9);
  font-weight: var(--canon-font-weight-bold);
}

.canon-Heading[data-variant="title2"] {
  font-size: var(--canon-font-size-8);
  font-weight: var(--canon-font-weight-bold);
}

.canon-Heading[data-variant="title3"] {
  font-size: var(--canon-font-size-7);
  font-weight: var(--canon-font-weight-bold);
}

.canon-Heading[data-variant="title4"] {
  font-size: var(--canon-font-size-6);
  font-weight: var(--canon-font-weight-bold);
}

.canon-Heading[data-variant="title5"] {
  font-size: var(--canon-font-size-5);
  font-weight: var(--canon-font-weight-bold);
}

.canon-Heading[data-color="primary"] {
  color: var(--canon-fg-primary);
}

.canon-Heading[data-color="secondary"] {
  color: var(--canon-fg-secondary);
}

.canon-Heading[data-truncate] {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.canon-Icon {
  width: 1rem;
  height: 1rem;
}

.canon-IconButton {
  user-select: none;
  font-family: var(--canon-font-regular);
  font-weight: var(--canon-font-weight-bold);
  cursor: pointer;
  border-radius: var(--canon-radius-2);
  justify-content: center;
  align-items: center;
  gap: var(--canon-space-1_5);
  border: none;
  padding: 0;
  display: inline-flex;

  &:disabled {
    cursor: not-allowed;
  }
}

.canon-IconButton[data-variant="primary"] {
  background-color: var(--canon-bg-solid);
  color: var(--canon-fg-solid);
  transition: background-color .15s, box-shadow .15s;

  &:hover {
    background-color: var(--canon-bg-solid-hover);
  }

  &:active {
    background-color: var(--canon-bg-solid-pressed);
  }

  &:focus-visible {
    outline: 2px solid var(--canon-ring);
    outline-offset: 2px;
  }

  &:disabled {
    background-color: var(--canon-bg-solid-disabled);
    color: var(--canon-fg-solid-disabled);
  }
}

.canon-IconButton[data-variant="secondary"] {
  background-color: var(--canon-bg-surface-1);
  box-shadow: inset 0 0 0 1px var(--canon-border);
  color: var(--canon-fg-primary);
  transition: box-shadow .15s;

  &:hover {
    box-shadow: inset 0 0 0 1px var(--canon-border-hover);
  }

  &:active {
    box-shadow: inset 0 0 0 1px var(--canon-border-pressed);
  }

  &:focus-visible {
    box-shadow: inset 0 0 0 2px var(--canon-ring);
    outline: none;
    transition: none;
  }

  &:disabled {
    box-shadow: inset 0 0 0 1px var(--canon-border-disabled);
    color: var(--canon-fg-disabled);
  }
}

.canon-IconButton[data-size="medium"] {
  font-size: var(--canon-font-size-4);
  width: 40px;
  height: 40px;
}

.canon-IconButton[data-size="small"] {
  font-size: var(--canon-font-size-3);
  width: 32px;
  height: 32px;
}

.canon-IconButtonIcon[data-size="small"], .canon-IconButtonIcon[data-size="small"] svg {
  width: 1rem;
  height: 1rem;
}

.canon-IconButtonIcon[data-size="medium"], .canon-IconButtonIcon[data-size="medium"] svg {
  width: 1.25rem;
  height: 1.25rem;
}

.canon-Link {
  font-family: var(--canon-font-regular);
  color: var(--canon-fg-link);
  cursor: pointer;
  margin: 0;
  padding: 0;
  text-decoration-line: none;

  &:hover {
    color: var(--canon-fg-link-hover);
    text-underline-offset: calc(.025em + 2px);
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-thickness: min(2px, max(1px, .05em));
    text-decoration-color: color-mix(in srgb, var(--canon-fg-link-hover) 30%, transparent);
  }
}

.canon-Link[data-variant="body"] {
  font-size: var(--canon-font-size-3);
  line-height: 140%;
}

.canon-Link[data-variant="subtitle"] {
  font-size: var(--canon-font-size-4);
  line-height: 140%;
}

.canon-Link[data-variant="caption"] {
  font-size: var(--canon-font-size-2);
  line-height: 140%;
}

.canon-Link[data-variant="label"] {
  font-size: var(--canon-font-size-1);
  line-height: 140%;
}

.canon-Link[data-weight="regular"] {
  font-weight: var(--canon-font-weight-regular);
}

.canon-Link[data-weight="bold"] {
  font-weight: var(--canon-font-weight-bold);
}

.canon-MenuPositioner {
  outline: 0;
}

.canon-MenuPopup {
  background-color: var(--canon-bg-surface-1);
  border: 1px solid var(--canon-border);
  color: var(--canon-fg-primary);
  transform-origin: var(--transform-origin);
  max-width: min(var(--available-width), 340px);
  max-height: min(var(--available-height), 500px);
  padding-bottom: var(--canon-space-1);
  border-radius: .375rem;
  outline: none;
  flex-direction: column;
  transition: transform .15s, opacity .15s;
  display: flex;
  position: relative;
  overflow: auto;

  &[data-starting-style], &[data-ending-style] {
    opacity: 0;
    transform: scale(.9);
  }
}

.canon-MenuItem {
  user-select: none;
  align-items: center;
  gap: var(--canon-space-2);
  height: 32px;
  color: var(--canon-fg-primary);
  border-radius: var(--canon-radius-2);
  margin-inline: var(--canon-space-1);
  padding-inline: var(--canon-space-2);
  font-size: var(--canon-font-size-3);
  cursor: pointer;
  outline: 0;
  flex-shrink: 0;
  text-decoration: none;
  display: flex;

  &:first-child {
    margin-top: var(--canon-space-1);
  }

  &[data-highlighted] {
    background-color: var(--canon-gray-3);
  }
}

.canon-MenuSubmenuTrigger {
  user-select: none;
  justify-content: space-between;
  align-items: center;
  gap: var(--canon-space-2);
  height: 32px;
  color: var(--canon-fg-primary);
  border-radius: var(--canon-radius-2);
  margin-inline: var(--canon-space-1);
  padding-inline: var(--canon-space-2);
  font-size: var(--canon-font-size-3);
  cursor: pointer;
  outline: 0;
  flex-shrink: 0;
  text-decoration: none;
  display: flex;

  & .canon-Icon {
    color: var(--canon-fg-secondary);
  }

  &:first-child {
    margin-top: var(--canon-space-1);
  }

  &[data-popup-open], &[data-highlighted] {
    background-color: var(--canon-gray-3);

    & .canon-Icon {
      color: var(--canon-fg-primary);
    }
  }
}

.canon-MenuSeparator {
  background-color: var(--color-gray-200);
  height: 1px;
  margin: .375rem 1rem;
}

.canon-SubmenuComboboxSearch {
  padding-inline: var(--canon-space-3);
  border: none;
  border-bottom: 1px solid var(--canon-border);
  background-color: var(--canon-bg-surface-1);
  width: 100%;
  height: 32px;
  color: var(--canon-fg-primary);
  line-height: 140%;
  font-size: var(--canon-font-size-3);
  z-index: 1;
  outline: none;
  position: sticky;
  top: 0;

  &::placeholder {
    color: var(--canon-fg-secondary);
  }

  &:disabled {
    opacity: .6;
    cursor: not-allowed;
  }
}

.canon-SubmenuComboboxItems {
  padding-top: var(--canon-space-2);
  outline: none;
  flex-direction: column;
  display: flex;
  overflow-y: auto;
}

.canon-SubmenuComboboxNoResults {
  padding-inline: var(--canon-space-3);
  padding-top: var(--canon-space-2);
  padding-bottom: var(--canon-space-4);
  color: var(--canon-fg-secondary);
  font-size: var(--canon-font-size-3);
}

.canon-SubmenuComboboxItem {
  user-select: none;
  justify-content: space-between;
  align-items: center;
  gap: var(--canon-space-2);
  height: 32px;
  color: var(--canon-fg-primary);
  border-radius: var(--canon-radius-2);
  margin-inline: var(--canon-space-1);
  padding-inline: var(--canon-space-2);
  font-size: var(--canon-font-size-3);
  cursor: pointer;
  outline: 0;
  flex-shrink: 0;
  text-decoration: none;
  display: flex;

  &[data-highlighted] {
    background-color: var(--canon-gray-3);
  }

  &[data-disabled] {
    opacity: .5;
    cursor: not-allowed;
  }
}

.canon-SubmenuComboboxItemCheckbox {
  width: 16px;
  height: 16px;
  color: var(--canon-fg-primary);
  border-radius: var(--canon-radius-2);
  border: 1px solid var(--canon-border);
  background: var(--canon-bg-surface-1);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.canon-SubmenuComboboxItemLabel {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  overflow: hidden;
}

.canon-TableRoot {
  caption-side: bottom;
  border-collapse: collapse;
  width: 100%;
}

.canon-TableHead {
  text-align: left;
  padding: var(--canon-space-3);
  font-size: var(--canon-font-size-3);
  color: var(--canon-fg-primary);
}

.canon-TableBody {
  color: var(--canon-fg-primary);
}

.canon-TableRow {
  border-bottom: 1px solid var(--canon-border);
  transition: color .2s ease-in-out;
}

.canon-TableBody .canon-TableRow:hover {
  background-color: var(--canon-gray-2);
}

.canon-TableCell {
  padding: var(--canon-space-3);
  font-size: var(--canon-font-size-3);
}

.canon-TableCellText, .canon-TableCellLink {
  gap: var(--canon-space-0_5);
  flex-direction: column;
  display: flex;
}

.canon-TableCellProfile {
  gap: var(--canon-space-2);
  flex-direction: row;
  align-items: center;
  display: flex;
}

.canon-TableCellProfileAvatar {
  vertical-align: middle;
  user-select: none;
  color: var(--canon-fg-primary);
  background-color: var(--canon-bg-surface-2);
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  width: 1.25rem;
  height: 1.25rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  display: inline-flex;
  overflow: hidden;
}

.canon-TableCellProfileAvatarImage {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.canon-TableCellProfileAvatarFallback {
  width: 100%;
  height: 100%;
  font-size: var(--canon-font-size-2);
  font-weight: var(--canon-font-weight-regular);
  box-shadow: inset 0 0 0 1px var(--canon-border);
  border-radius: var(--canon-radius-full);
  justify-content: center;
  align-items: center;
  display: flex;
}

.canon-TabsRoot {
  border: 1px solid var(--color-gray-200);
  border-radius: .375rem;
}

.canon-TabsList {
  z-index: 0;
  display: flex;
  position: relative;
}

.canon-TabsTab {
  appearance: none;
  color: var(--canon-fg-secondary);
  user-select: none;
  padding-inline: var(--canon-space-3);
  height: 2rem;
  font-family: inherit;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.25rem;
  font-size: var(--canon-font-size-2);
  cursor: pointer;
  background: none;
  border: 0;
  outline: 0;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding-block: 0;
  transition: color .2s ease-in-out;
  display: flex;

  &[data-selected] {
    color: var(--canon-fg-primary);
  }

  @media (hover: hover) {
    &:hover {
      color: var(--canon-fg-primary);
    }
  }

  &:focus-visible {
    position: relative;

    &:before {
      content: "";
      outline: 1px solid var(--canon-ring);
      outline-offset: -1px;
      border-radius: .25rem;
      position: absolute;
      inset: .25rem 0;
    }
  }
}

.canon-TabsIndicator {
  z-index: -1;
  translate: var(--active-tab-left) -50%;
  width: var(--active-tab-width);
  background-color: var(--canon-bg-solid);
  height: 1px;
  transition-property: translate, width;
  transition-duration: .2s;
  transition-timing-function: ease-in-out;
  position: absolute;
  bottom: 0;
  left: 0;
}

.canon-TabsPanel {
  &[hidden] {
    display: none;
  }
}

.canon-Text {
  font-family: var(--canon-font-regular);
  margin: 0;
  padding: 0;
}

.canon-Text[data-variant="body"] {
  font-size: var(--canon-font-size-3);
  line-height: 140%;
}

.canon-Text[data-variant="subtitle"] {
  font-size: var(--canon-font-size-4);
  line-height: 140%;
}

.canon-Text[data-variant="caption"] {
  font-size: var(--canon-font-size-2);
  line-height: 140%;
}

.canon-Text[data-variant="label"] {
  font-size: var(--canon-font-size-1);
  line-height: 140%;
}

.canon-Text[data-weight="regular"] {
  font-weight: var(--canon-font-weight-regular);
}

.canon-Text[data-weight="bold"] {
  font-weight: var(--canon-font-weight-bold);
}

.canon-Text[data-color="primary"] {
  color: var(--canon-fg-primary);
}

.canon-Text[data-color="secondary"] {
  color: var(--canon-fg-secondary);
}

.canon-Text[data-color="danger"] {
  color: var(--canon-fg-danger);
}

.canon-Text[data-color="warning"] {
  color: var(--canon-fg-warning);
}

.canon-Text[data-color="success"] {
  color: var(--canon-fg-success);
}

.canon-Text[data-truncate] {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.canon-TextField {
  font-family: var(--canon-font-regular);
  flex-direction: column;
  width: 100%;
  display: flex;
}

.canon-TextFieldInputWrapper {
  position: relative;
}

.canon-TextFieldInputWrapper[data-size="small"] {
  height: 2rem;
}

.canon-TextFieldInputWrapper[data-size="medium"] {
  height: 2.5rem;
}

.canon-TextFieldIcon {
  left: var(--canon-space-3);
  margin-right: var(--canon-space-1);
  color: var(--canon-fg-primary);
  flex-shrink: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.canon-TextFieldIcon[data-size="small"], .canon-TextFieldIcon[data-size="small"] svg {
  width: 1rem;
  height: 1rem;
}

.canon-TextFieldIcon[data-size="medium"], .canon-TextFieldIcon[data-size="medium"] svg {
  width: 1.25rem;
  height: 1.25rem;
}

.canon-TextFieldInput {
  padding: 0 var(--canon-space-3);
  border-radius: var(--canon-radius-3);
  border: 1px solid var(--canon-border);
  background-color: var(--canon-bg-surface-1);
  font-size: var(--canon-font-size-3);
  font-family: var(--canon-font-regular);
  font-weight: var(--canon-font-weight-regular);
  color: var(--canon-fg-primary);
  width: 100%;
  height: 100%;
  cursor: inherit;
  align-items: center;
  transition: border-color .2s ease-in-out, outline-color .2s ease-in-out;
  display: flex;
}

.canon-TextFieldInput::placeholder {
  color: var(--canon-fg-secondary);
}

.canon-TextFieldInput[data-icon] {
  padding-left: var(--canon-space-8);
}

.canon-TextFieldInput[data-focused] {
  outline-color: var(--canon-border-pressed);
  outline-width: 0;
}

.canon-TextFieldInput[data-hovered] {
  border-color: var(--canon-border-hover);
}

.canon-TextFieldInput[data-focused] {
  border-color: var(--canon-border-pressed);
  outline-width: 0;
}

.canon-TextFieldInput[data-invalid] {
  border-color: var(--canon-fg-danger);
}

.canon-TextFieldInput[data-disabled] {
  opacity: .5;
  cursor: not-allowed;
  border: 1px solid var(--canon-border-disabled);
}

.canon-TextFieldError {
  color: var(--canon-fg-danger);
  font-size: var(--canon-font-size-2);
  font-weight: var(--canon-font-weight-regular);
  margin-top: var(--canon-space-2);
}

.canon-TooltipPopup {
  box-sizing: border-box;
  transform-origin: var(--transform-origin);
  background-color: canvas;
  background-color: var(--canon-bg-surface-1);
  color: var(--canon-fg-primary);
  outline: 1px solid var(--canon-border);
  box-shadow: 0 10px 15px -3px var(--canon-border), 0 4px 6px -4px var(--canon-border);
  border-radius: .375rem;
  flex-direction: column;
  padding: .25rem .5rem;
  font-size: .875rem;
  line-height: 1.25rem;
  transition: transform .15s, opacity .15s;
  display: flex;

  &[data-starting-style], &[data-ending-style] {
    opacity: 0;
    transform: scale(.9);
  }

  &[data-instant] {
    transition-duration: 0s;
  }
}

.canon-TooltipArrow {
  display: flex;

  &[data-side="top"] {
    bottom: -8px;
    rotate: 180deg;
  }

  &[data-side="bottom"] {
    top: -8px;
    rotate: none;
  }

  &[data-side="left"] {
    right: -13px;
    rotate: 90deg;
  }

  &[data-side="right"] {
    left: -13px;
    rotate: -90deg;
  }
}

.canon-TooltipArrow-fill {
  fill: var(--canon-bg-surface-1);
}

.canon-TooltipArrow-outer-stroke {
  @media (prefers-color-scheme: light) {
    & {
      fill: var(--canon-border);
    }
  }
}

.canon-ScrollAreaRoot {
  box-sizing: border-box;
  width: 24rem;
  max-width: calc(100vw - 8rem);
  height: 8.5rem;
}

.canon-ScrollAreaViewport {
  overscroll-behavior: contain;
  height: 100%;
}

.canon-ScrollAreaContent {
  padding-block: .75rem;
  flex-direction: column;
  gap: 1rem;
  padding-left: 1rem;
  padding-right: 1.5rem;
  display: flex;
}

.canon-ScrollAreaScrollbar {
  background-color: var(--canon-scrollbar);
  opacity: 0;
  border-radius: .375rem;
  justify-content: center;
  width: .25rem;
  margin: .5rem;
  transition: opacity .15s .3s;
  display: flex;

  &[data-hovering], &[data-scrolling] {
    opacity: 1;
    transition-duration: 75ms;
    transition-delay: 0s;
  }

  &:before {
    content: "";
    width: 1.25rem;
    height: 100%;
    position: absolute;
  }
}

.canon-ScrollAreaThumb {
  border-radius: inherit;
  background-color: var(--canon-scrollbar-thumb);
  width: 100%;
}

.canon-Select {
  font-family: var(--canon-font-regular);
  flex-direction: column;
  width: 100%;
  display: flex;
}

.canon-SelectLabel {
  font-size: var(--canon-font-size-2);
  font-weight: var(--canon-font-weight-regular);
  color: var(--canon-fg-primary);
  margin-bottom: var(--canon-space-1_5);
  cursor: pointer;
}

.canon-SelectLabel[data-disabled] {
  cursor: default;
}

.canon-SelectDescription {
  font-size: var(--canon-font-size-2);
  font-weight: var(--canon-font-weight-regular);
  color: var(--canon-fg-secondary);
  padding-top: var(--canon-space-1_5);
  margin: 0;
}

.canon-SelectError {
  font-size: var(--canon-font-size-2);
  font-weight: var(--canon-font-weight-regular);
  color: var(--canon-fg-danger);
  padding-top: var(--canon-space-1_5);
  margin: 0;
}

.canon-SelectTrigger {
  box-sizing: border-box;
  border-radius: var(--canon-radius-3);
  border: 1px solid var(--canon-border);
  padding: 0 var(--canon-space-4);
  background-color: var(--canon-bg-surface-1);
  font-size: var(--canon-font-size-3);
  font-family: var(--canon-font-regular);
  font-weight: var(--canon-font-weight-regular);
  color: var(--canon-fg-primary);
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  gap: var(--canon-space-2);
  width: 100%;
  transition: border-color .2s ease-in-out, outline-color .2s ease-in-out;
  display: flex;
}

.canon-SelectTrigger::placeholder {
  color: var(--canon-fg-secondary);
}

.canon-SelectTrigger:hover {
  border-color: var(--canon-border-hover);
}

.canon-SelectTrigger:focus-visible {
  border-color: var(--canon-border-pressed);
  outline: 0;
}

.canon-SelectTrigger[data-invalid] {
  border-color: var(--canon-fg-danger);
}

.canon-SelectTrigger[data-invalid]:hover, .canon-SelectTrigger[data-invalid]:focus-visible {
  border-width: 2px;
}

.canon-SelectTrigger[data-disabled] {
  cursor: not-allowed;
  border-color: var(--canon-border-disabled);
  color: var(--canon-fg-disabled);
}

.canon-SelectTrigger[data-size="small"] {
  height: 2rem;
}

.canon-SelectTrigger[data-size="medium"] {
  height: 3rem;
}

.canon-SelectIcon {
  margin-left: var(--canon-space-5);
  transition: transform .2s;
}

.canon-SelectTrigger[data-popup-open] .canon-SelectIcon {
  transform: rotate(180deg);
}

.canon-SelectPopup {
  box-sizing: border-box;
  max-height: var(--available-height);
  background-color: var(--canon-bg-surface-1);
  border: 1px solid var(--canon-border);
  border-radius: var(--canon-radius-3);
  padding-block: var(--canon-space-1);
  z-index: 1;
  transform-origin: var(--transform-origin);
  outline: 0;
  transition: transform .15s, opacity .15s;
  overflow-y: auto;
  box-shadow: 0 4px 12px #0003;
}

.canon-SelectPopup[data-starting-style], .canon-SelectPopup[data-ending-style] {
  opacity: 0;
  transform: scale(.9);
}

.canon-SelectItem {
  width: var(--anchor-width);
  padding-block: var(--canon-space-2);
  padding-inline: var(--canon-space-4);
  color: var(--canon-fg-primary);
  border-radius: var(--canon-radius-3);
  cursor: pointer;
  user-select: none;
  font-size: var(--canon-font-size-3);
  align-items: center;
  gap: var(--canon-space-2);
  outline: none;
  grid-template-columns: 1rem 1fr;
  grid-template-areas: "icon text";
  display: grid;
  position: relative;
}

.canon-SelectItem[data-highlighted] {
  z-index: 0;
  color: var(--canon-fg-primary);
  position: relative;
}

.canon-SelectItem[data-highlighted]:before {
  content: "";
  z-index: -1;
  background-color: var(--canon-bg-tint-hover);
  border-radius: .25rem;
  position: absolute;
  inset-block: 0;
  inset-inline: .25rem;
}

.canon-SelectItem[data-disabled] {
  cursor: not-allowed;
  color: var(--canon-fg-disabled);
}

.canon-SelectItemIndicator {
  grid-area: icon;
  justify-content: center;
  align-items: center;
  display: flex;
}

.canon-SelectItemText {
  flex: 1;
  grid-area: text;
}

.canon-SelectRequired {
  color: var(--canon-fg-secondary);
  font-size: var(--canon-font-size-2);
  font-weight: var(--canon-font-weight-regular);
  margin-left: var(--canon-space-1);
}

.canon-SelectIcon {
  justify-content: center;
  align-items: center;
  display: flex;
}

.canon-SelectValue {
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
}

.canon-Switch {
  align-items: center;
  gap: var(--canon-space-3);
  font-size: var(--canon-font-size-3);
  color: var(--canon-fg-primary);
  cursor: pointer;
  display: flex;
  position: relative;

  &[data-pressed] .canon-SwitchIndicator {
    &:before {
      background: var(--canon-fg-solid);
    }
  }

  &[data-selected] {
    & .canon-SwitchIndicator {
      background: var(--canon-bg-solid);

      &:before {
        background: var(--canon-fg-solid);
        transform: translateX(100%);
      }
    }

    &[data-pressed] {
      & .indicator {
        background: var(--canon-gray-3);
      }
    }
  }

  &[data-focus-visible] .canon-SwitchIndicator {
    outline-offset: 2px;
    outline: 2px solid;
  }
}

.canon-SwitchIndicator {
  background: var(--canon-gray-3);
  border: 2px;
  border-radius: 1.143rem;
  width: 2rem;
  height: 1.143rem;
  transition: all .2s;

  &:before {
    content: "";
    background: var(--canon-fg-solid);
    border-radius: 16px;
    width: .857rem;
    height: .857rem;
    margin: .143rem;
    transition: all .2s;
    display: block;
  }
}


/*# sourceMappingURL=vendor.9d2ee5af.css.map*/