/**
* Do not edit directly. See style-dictionary/README.md for more information.
* Generated on Thu, 05 Jun 2025 17:37:15 GMT
*/
/**
* Do not edit directly. See style-dictionary/README.md for more information.
* Generated on Thu, 05 Jun 2025 17:37:16 GMT
*/
/**
* Do not edit directly. See style-dictionary/README.md for more information.
* Generated on Thu, 05 Jun 2025 17:37:15 GMT
*/
/**
* Do not edit directly. See style-dictionary/README.md for more information.
* Generated on Thu, 05 Jun 2025 17:37:16 GMT
*/
/**
* Do not edit directly. See style-dictionary/README.md for more information.
* Generated on Thu, 05 Jun 2025 17:37:15 GMT
*/
/**
* Do not edit directly. See style-dictionary/README.md for more information.
* Generated on Thu, 05 Jun 2025 17:37:16 GMT
*/
/** 
* set styles to both via the parent having the class or the unified child class
* e.g. .has-error.parent .child & .child.has-error 
**/
/** 
* Set styles for screen reader only text. Required to attain WCAG 2.1 compliance
**/
/** 
  @Warning: Do not nest row, wrap or column, the edge reset does not nest well. 
  Nested more complicated grids should use CSS grid instead.
**/
/**
* Do not edit directly. See style-dictionary/README.md for more information.
* Generated on Thu, 05 Jun 2025 17:37:15 GMT
*/
/**
* Do not edit directly. See style-dictionary/README.md for more information.
* Generated on Thu, 05 Jun 2025 17:37:16 GMT
*/
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes scaleIn {
  0% {
    transform: scale(0.65);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes scaleOut {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes microSlideInLeft {
  0% {
    transform: translateX(-4px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slideInTop {
  0% {
    transform: translateY(-16px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes pulse {
  0% {
    transform: scale(0.95);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
  100% {
    transform: scale(0.95);
    opacity: 0.7;
  }
}
@keyframes subtleShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
/* ---------------BUTTONS------------------------*/
/*
  Customizable vars, these are not set by default, and will utilize the fallback value unless set
  --size-select-input-width 
  --size-select-tag-width
  --size-select-tags-container-width
*/
/* 
* ONLY for Non-Native select implementations
*/
/*
  Customizable vars, these are not set by default, and will utilize the fallback value unless set
  --size-select-input-width 
  --size-select-content-width
*/
/* ---------------TOOLBAR BUTTON------------------------*/
/**
* Do not edit directly. See style-dictionary/README.md for more information.
* Generated on Thu, 05 Jun 2025 17:37:15 GMT
*/
/**
* Do not edit directly. See style-dictionary/README.md for more information.
* Generated on Thu, 05 Jun 2025 17:37:16 GMT
*/
/**
* Do not edit directly. See style-dictionary/README.md for more information.
* Generated on Thu, 05 Jun 2025 17:37:15 GMT
*/
/**
* Do not edit directly. See style-dictionary/README.md for more information.
* Generated on Thu, 05 Jun 2025 17:37:16 GMT
*/
/**
* Do not edit directly. See style-dictionary/README.md for more information.
* Generated on Thu, 05 Jun 2025 17:37:15 GMT
*/
/**
* Do not edit directly. See style-dictionary/README.md for more information.
* Generated on Thu, 05 Jun 2025 17:37:16 GMT
*/
/** 
* set styles to both via the parent having the class or the unified child class
* e.g. .has-error.parent .child & .child.has-error 
**/
/** 
* Set styles for screen reader only text. Required to attain WCAG 2.1 compliance
**/
/** 
  @Warning: Do not nest row, wrap or column, the edge reset does not nest well. 
  Nested more complicated grids should use CSS grid instead.
**/
/**
* Do not edit directly. See style-dictionary/README.md for more information.
* Generated on Thu, 05 Jun 2025 17:37:15 GMT
*/
/**
* Do not edit directly. See style-dictionary/README.md for more information.
* Generated on Thu, 05 Jun 2025 17:37:16 GMT
*/
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes scaleIn {
  0% {
    transform: scale(0.65);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes scaleOut {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes microSlideInLeft {
  0% {
    transform: translateX(-4px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slideInTop {
  0% {
    transform: translateY(-16px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes pulse {
  0% {
    transform: scale(0.95);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
  100% {
    transform: scale(0.95);
    opacity: 0.7;
  }
}
@keyframes subtleShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
/* ---------------BUTTONS------------------------*/
/*
  Customizable vars, these are not set by default, and will utilize the fallback value unless set
  --size-select-input-width 
  --size-select-tag-width
  --size-select-tags-container-width
*/
/* 
* ONLY for Non-Native select implementations
*/
/*
  Customizable vars, these are not set by default, and will utilize the fallback value unless set
  --size-select-input-width 
  --size-select-content-width
*/
/* ---------------TOOLBAR BUTTON------------------------*/
.g-wrap {
  display: grid;
  gap: var(--size-grid-gap-base);
  grid-template-columns: repeat(auto-fit, minmax(var(--size-grid-item-min-width), 1fr));
}
.g-wrap-xsmall {
  display: grid;
  gap: var(--size-grid-gap-base);
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
.g-wrap-small {
  display: grid;
  gap: var(--size-grid-gap-base);
  grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
}
.g-wrap-medium {
  display: grid;
  gap: var(--size-grid-gap-base);
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}
.g-wrap-large {
  display: grid;
  gap: var(--size-grid-gap-base);
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
}

.g-col-1 {
  display: grid;
  gap: var(--size-grid-gap-base);
  grid-template-columns: repeat(auto-fit, minmax(calc(100% - var(--size-grid-gap-base)), 1fr));
}

.g-col-2 {
  display: grid;
  gap: var(--size-grid-gap-base);
  grid-template-columns: repeat(auto-fit, minmax(calc(50% - var(--size-grid-gap-base)), 1fr));
}

.g-col-3 {
  display: grid;
  gap: var(--size-grid-gap-base);
  grid-template-columns: repeat(auto-fit, minmax(calc(33% - var(--size-grid-gap-base)), 1fr));
}

.g-col-4 {
  display: grid;
  gap: var(--size-grid-gap-base);
  grid-template-columns: repeat(auto-fit, minmax(calc(25% - var(--size-grid-gap-base)), 1fr));
}

.g-col-5 {
  display: grid;
  gap: var(--size-grid-gap-base);
  grid-template-columns: repeat(auto-fit, minmax(calc(20% - var(--size-grid-gap-base)), 1fr));
}

.g-col-6 {
  display: grid;
  gap: var(--size-grid-gap-base);
  grid-template-columns: repeat(auto-fit, minmax(calc(16% - var(--size-grid-gap-base)), 1fr));
}

.g-col-7 {
  display: grid;
  gap: var(--size-grid-gap-base);
  grid-template-columns: repeat(auto-fit, minmax(calc(14% - var(--size-grid-gap-base)), 1fr));
}

.g-col-8 {
  display: grid;
  gap: var(--size-grid-gap-base);
  grid-template-columns: repeat(auto-fit, minmax(calc(12% - var(--size-grid-gap-base)), 1fr));
}

.g-col-9 {
  display: grid;
  gap: var(--size-grid-gap-base);
  grid-template-columns: repeat(auto-fit, minmax(calc(11% - var(--size-grid-gap-base)), 1fr));
}

.g-col-10 {
  display: grid;
  gap: var(--size-grid-gap-base);
  grid-template-columns: repeat(auto-fit, minmax(calc(10% - var(--size-grid-gap-base)), 1fr));
}

.g-col-11 {
  display: grid;
  gap: var(--size-grid-gap-base);
  grid-template-columns: repeat(auto-fit, minmax(calc(9% - var(--size-grid-gap-base)), 1fr));
}

.g-col-12 {
  display: grid;
  gap: var(--size-grid-gap-base);
  grid-template-columns: repeat(auto-fit, minmax(calc(8% - var(--size-grid-gap-base)), 1fr));
}

.g-rows {
  display: grid;
  gap: var(--size-grid-gap-base);
  grid-auto-flow: row;
  grid-auto-rows: auto;
}
.g-rows.max-c {
  grid-auto-rows: max-content;
}
.g-rows.min-c {
  grid-auto-rows: min-content;
}

.g-cols {
  display: grid;
  gap: var(--size-grid-gap-base);
  grid-auto-flow: column;
  grid-auto-columns: auto;
}
.g-cols.left {
  justify-content: start;
}
.g-cols.right {
  justify-content: end;
}
.g-cols.max-c {
  grid-auto-columns: max-content;
}
.g-cols.min-c {
  grid-auto-columns: min-content;
}

.col-span-all {
  grid-column: "1 / -1";
}

.col-span-0 {
  grid-column: span 1;
}

.col-span-1 {
  grid-column: span 2;
}

.col-span-2 {
  grid-column: span 3;
}

.col-span-3 {
  grid-column: span 4;
}

.col-span-4 {
  grid-column: span 5;
}

.col-span-5 {
  grid-column: span 6;
}

.col-span-6 {
  grid-column: span 7;
}

.col-span-7 {
  grid-column: span 8;
}

.col-span-8 {
  grid-column: span 9;
}

.col-span-9 {
  grid-column: span 10;
}

.col-span-10 {
  grid-column: span 11;
}

.gap-none {
  gap: 0 !important;
}

.gap-0 {
  gap: calc(0.5px * var(--size-base-spacing)) !important;
}

.gap-1 {
  gap: calc(1px * var(--size-base-spacing)) !important;
}

.gap-2 {
  gap: calc(2px * var(--size-base-spacing)) !important;
}

.gap-3 {
  gap: calc(3px * var(--size-base-spacing)) !important;
}

.gap-4 {
  gap: calc(4px * var(--size-base-spacing)) !important;
}

.gap-5 {
  gap: calc(5px * var(--size-base-spacing)) !important;
}

.gap-6 {
  gap: calc(6px * var(--size-base-spacing)) !important;
}

.gap-7 {
  gap: calc(7px * var(--size-base-spacing)) !important;
}

.gap-8 {
  gap: calc(8px * var(--size-base-spacing)) !important;
}

.gap-9 {
  gap: calc(9px * var(--size-base-spacing)) !important;
}

.gap-10 {
  gap: calc(10px * var(--size-base-spacing)) !important;
}

.gap-11 {
  gap: calc(11px * var(--size-base-spacing)) !important;
}

.gap-xxsmall {
  gap: calc(0.25px * var(--size-base-spacing)) !important;
}

.gap-xsmall {
  gap: calc(0.5px * var(--size-base-spacing)) !important;
}

.gap-small {
  gap: calc(1px * var(--size-base-spacing)) !important;
}

.gap-medium {
  gap: calc(2px * var(--size-base-spacing)) !important;
}

.gap-large {
  gap: calc(3px * var(--size-base-spacing)) !important;
}

.gap-xlarge {
  gap: calc(3.5px * var(--size-base-spacing)) !important;
}

.gap-xxlarge {
  gap: calc(4px * var(--size-base-spacing)) !important;
}

.row-span-all {
  grid-row: "1 / -1";
}

.row-span-0 {
  grid-row: span 1;
}

.row-span-1 {
  grid-row: span 2;
}

.row-span-2 {
  grid-row: span 3;
}

.row-span-3 {
  grid-row: span 4;
}

.row-span-4 {
  grid-row: span 5;
}

.row-span-5 {
  grid-row: span 6;
}

.row-span-6 {
  grid-row: span 7;
}

.row-span-7 {
  grid-row: span 8;
}

.row-span-8 {
  grid-row: span 9;
}

.row-span-9 {
  grid-row: span 10;
}

.row-span-10 {
  grid-row: span 11;
}

.g-app-layout {
  display: grid;
  gap: 0;
  grid-template-areas: "sidenav topnav" "sidenav content";
  grid-template-rows: var(--size-navigation-top) 100%;
  grid-template-columns: var(--size-navigation-side) auto;
  overflow: hidden;
  position: relative;
  height: 100vh;
}
@media only screen and (max-width: 812px) {
  .g-app-layout {
    grid-template-areas: "sidenav" "topnav" "content";
    grid-template-columns: 100%;
    grid-template-rows: var(--size-navigation-top) var(--size-navigation-top) calc(100% - var(--size-navigation-top) * 2);
  }
}

.jamf-app-layout {
  display: grid;
  gap: 0;
  grid-template-areas: "topnav topnav" "sidenav content";
  grid-template-rows: var(--size-navigation-top) 100%;
  grid-template-columns: var(--size-navigation-side) auto;
  overflow: hidden;
  position: relative;
  height: 100vh;
  transition: 200ms;
  background: var(--color-structure-base);
}
.jamf-app-layout:has(.jamf-side-nav[data-collapsed=true]) {
  grid-template-columns: var(--size-navigation-side-collapsed) auto;
}
.jamf-app-layout .jamf-side-nav {
  grid-area: sidenav;
  height: calc(100vh - var(--size-navigation-top));
}
@media only screen and (max-width: 1280px) {
  .jamf-app-layout .jamf-side-nav {
    height: calc(100svh - var(--size-navigation-top));
  }
}
.jamf-app-layout .jamf-top-nav {
  grid-area: topnav;
  z-index: 10;
}
.jamf-app-layout .jamf-main-content {
  grid-area: content;
  overflow-y: auto;
  height: calc(100vh - var(--size-navigation-top));
}
@media only screen and (max-width: 1280px) {
  .jamf-app-layout .jamf-main-content {
    height: calc(100svh - var(--size-navigation-top));
  }
}
@media only screen and (max-width: 812px) {
  .jamf-app-layout {
    grid-template-areas: "topnav" "content";
    grid-template-columns: 100%;
  }
  .jamf-app-layout .jamf-side-nav:not(.custom-mobile-layout) {
    position: absolute;
    top: var(--size-navigation-top);
    opacity: 0;
    left: calc(-1 * var(--size-navigation-side));
    transition: all 200ms;
  }
  .jamf-app-layout .jamf-side-nav:not(.custom-mobile-layout).is-open {
    left: 0;
    opacity: 1;
  }
}

.f-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-right: calc(-1 * var(--size-grid-gap-base));
}
.f-wrap > * {
  flex: 1 1 auto;
  margin: 0 var(--size-grid-gap-base) var(--size-grid-gap-base) 0;
}

.f-col-1 {
  display: flex;
  flex-direction: column;
}
.f-col-1 > * {
  flex: 1 1 auto;
  margin-bottom: var(--size-grid-gap-base);
}

.f-col-2 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-right: calc(-1 * var(--size-grid-gap-base));
}
.f-col-2 > * {
  flex: 1 1 calc(50% - var(--size-grid-gap-base));
  margin: 0 var(--size-grid-gap-base) var(--size-grid-gap-base) 0;
}

.f-col-3 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-right: calc(-1 * var(--size-grid-gap-base));
}
.f-col-3 > * {
  flex: 1 1 calc(33% - var(--size-grid-gap-base));
  margin: 0 var(--size-grid-gap-base) var(--size-grid-gap-base) 0;
}

.f-col-4 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-right: calc(-1 * var(--size-grid-gap-base));
}
.f-col-4 > * {
  flex: 1 1 calc(25% - var(--size-grid-gap-base));
  margin: 0 var(--size-grid-gap-base) var(--size-grid-gap-base) 0;
}

.f-col-5 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-right: calc(-1 * var(--size-grid-gap-base));
}
.f-col-5 > * {
  flex: 1 1 calc(20% - var(--size-grid-gap-base));
  margin: 0 var(--size-grid-gap-base) var(--size-grid-gap-base) 0;
}

.f-col-6 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-right: calc(-1 * var(--size-grid-gap-base));
}
.f-col-6 > * {
  flex: 1 1 calc(16% - var(--size-grid-gap-base));
  margin: 0 var(--size-grid-gap-base) var(--size-grid-gap-base) 0;
}

.f-col-7 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-right: calc(-1 * var(--size-grid-gap-base));
}
.f-col-7 > * {
  flex: 1 1 calc(14% - var(--size-grid-gap-base));
  margin: 0 var(--size-grid-gap-base) var(--size-grid-gap-base) 0;
}

.f-col-8 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-right: calc(-1 * var(--size-grid-gap-base));
}
.f-col-8 > * {
  flex: 1 1 calc(12% - var(--size-grid-gap-base));
  margin: 0 var(--size-grid-gap-base) var(--size-grid-gap-base) 0;
}

.f-col-9 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-right: calc(-1 * var(--size-grid-gap-base));
}
.f-col-9 > * {
  flex: 1 1 calc(11% - var(--size-grid-gap-base));
  margin: 0 var(--size-grid-gap-base) var(--size-grid-gap-base) 0;
}

.f-col-10 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-right: calc(-1 * var(--size-grid-gap-base));
}
.f-col-10 > * {
  flex: 1 1 calc(10% - var(--size-grid-gap-base));
  margin: 0 var(--size-grid-gap-base) var(--size-grid-gap-base) 0;
}

.f-col-11 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-right: calc(-1 * var(--size-grid-gap-base));
}
.f-col-11 > * {
  flex: 1 1 calc(9% - var(--size-grid-gap-base));
  margin: 0 var(--size-grid-gap-base) var(--size-grid-gap-base) 0;
}

.f-col-12 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-right: calc(-1 * var(--size-grid-gap-base));
}
.f-col-12 > * {
  flex: 1 1 calc(8% - var(--size-grid-gap-base));
  margin: 0 var(--size-grid-gap-base) var(--size-grid-gap-base) 0;
}

.f-rows {
  display: flex;
  flex-direction: column;
}
.f-rows > * {
  flex: 1 1 auto;
}
.f-rows {
  gap: calc(1px * var(--size-base-spacing));
}

.f-cols {
  display: flex;
  flex-direction: row;
}
.f-cols > * {
  flex: 1 1 auto;
}
.f-cols {
  gap: calc(1px * var(--size-base-spacing));
}
.f-cols.left {
  justify-content: start;
}
.f-cols.right {
  justify-content: end;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.p-0\.5 {
  padding: calc(0.5px * var(--size-base-spacing)) !important;
}

.pl-0\.5 {
  padding-left: calc(0.5px * var(--size-base-spacing)) !important;
}

.pr-0\.5 {
  padding-right: calc(0.5px * var(--size-base-spacing)) !important;
}

.pb-0\.5 {
  padding-bottom: calc(0.5px * var(--size-base-spacing)) !important;
}

.pt-0\.5 {
  padding-top: calc(0.5px * var(--size-base-spacing)) !important;
}

.py-0\.5 {
  padding-top: calc(0.5px * var(--size-base-spacing)) !important;
  padding-bottom: calc(0.5px * var(--size-base-spacing)) !important;
}

.px-0\.5 {
  padding-right: calc(0.5px * var(--size-base-spacing)) !important;
  padding-left: calc(0.5px * var(--size-base-spacing)) !important;
}

.m-0\.5 {
  margin: calc(0.5px * var(--size-base-spacing)) !important;
}

.ml-0\.5 {
  margin-left: calc(0.5px * var(--size-base-spacing)) !important;
}

.mr-0\.5 {
  margin-right: calc(0.5px * var(--size-base-spacing)) !important;
}

.mb-0\.5 {
  margin-bottom: calc(0.5px * var(--size-base-spacing)) !important;
}

.mt-0\.5 {
  margin-top: calc(0.5px * var(--size-base-spacing)) !important;
}

.my-0\.5 {
  margin-top: calc(0.5px * var(--size-base-spacing)) !important;
  margin-bottom: calc(0.5px * var(--size-base-spacing)) !important;
}

.mx-0\.5 {
  margin-right: calc(0.5px * var(--size-base-spacing)) !important;
  margin-left: calc(0.5px * var(--size-base-spacing)) !important;
}

.p-1\.5 {
  padding: calc(1.5px * var(--size-base-spacing)) !important;
}

.pl-1\.5 {
  padding-left: calc(1.5px * var(--size-base-spacing)) !important;
}

.pr-1\.5 {
  padding-right: calc(1.5px * var(--size-base-spacing)) !important;
}

.pb-1\.5 {
  padding-bottom: calc(1.5px * var(--size-base-spacing)) !important;
}

.pt-1\.5 {
  padding-top: calc(1.5px * var(--size-base-spacing)) !important;
}

.py-1\.5 {
  padding-top: calc(1.5px * var(--size-base-spacing)) !important;
  padding-bottom: calc(1.5px * var(--size-base-spacing)) !important;
}

.px-1\.5 {
  padding-right: calc(1.5px * var(--size-base-spacing)) !important;
  padding-left: calc(1.5px * var(--size-base-spacing)) !important;
}

.m-1\.5 {
  margin: calc(1.5px * var(--size-base-spacing)) !important;
}

.ml-1\.5 {
  margin-left: calc(1.5px * var(--size-base-spacing)) !important;
}

.mr-1\.5 {
  margin-right: calc(1.5px * var(--size-base-spacing)) !important;
}

.mb-1\.5 {
  margin-bottom: calc(1.5px * var(--size-base-spacing)) !important;
}

.mt-1\.5 {
  margin-top: calc(1.5px * var(--size-base-spacing)) !important;
}

.my-1\.5 {
  margin-top: calc(1.5px * var(--size-base-spacing)) !important;
  margin-bottom: calc(1.5px * var(--size-base-spacing)) !important;
}

.mx-1\.5 {
  margin-right: calc(1.5px * var(--size-base-spacing)) !important;
  margin-left: calc(1.5px * var(--size-base-spacing)) !important;
}

.p-2\.5 {
  padding: calc(2.5px * var(--size-base-spacing)) !important;
}

.pl-2\.5 {
  padding-left: calc(2.5px * var(--size-base-spacing)) !important;
}

.pr-2\.5 {
  padding-right: calc(2.5px * var(--size-base-spacing)) !important;
}

.pb-2\.5 {
  padding-bottom: calc(2.5px * var(--size-base-spacing)) !important;
}

.pt-2\.5 {
  padding-top: calc(2.5px * var(--size-base-spacing)) !important;
}

.py-2\.5 {
  padding-top: calc(2.5px * var(--size-base-spacing)) !important;
  padding-bottom: calc(2.5px * var(--size-base-spacing)) !important;
}

.px-2\.5 {
  padding-right: calc(2.5px * var(--size-base-spacing)) !important;
  padding-left: calc(2.5px * var(--size-base-spacing)) !important;
}

.m-2\.5 {
  margin: calc(2.5px * var(--size-base-spacing)) !important;
}

.ml-2\.5 {
  margin-left: calc(2.5px * var(--size-base-spacing)) !important;
}

.mr-2\.5 {
  margin-right: calc(2.5px * var(--size-base-spacing)) !important;
}

.mb-2\.5 {
  margin-bottom: calc(2.5px * var(--size-base-spacing)) !important;
}

.mt-2\.5 {
  margin-top: calc(2.5px * var(--size-base-spacing)) !important;
}

.my-2\.5 {
  margin-top: calc(2.5px * var(--size-base-spacing)) !important;
  margin-bottom: calc(2.5px * var(--size-base-spacing)) !important;
}

.mx-2\.5 {
  margin-right: calc(2.5px * var(--size-base-spacing)) !important;
  margin-left: calc(2.5px * var(--size-base-spacing)) !important;
}

.p-3\.5 {
  padding: calc(3.5px * var(--size-base-spacing)) !important;
}

.pl-3\.5 {
  padding-left: calc(3.5px * var(--size-base-spacing)) !important;
}

.pr-3\.5 {
  padding-right: calc(3.5px * var(--size-base-spacing)) !important;
}

.pb-3\.5 {
  padding-bottom: calc(3.5px * var(--size-base-spacing)) !important;
}

.pt-3\.5 {
  padding-top: calc(3.5px * var(--size-base-spacing)) !important;
}

.py-3\.5 {
  padding-top: calc(3.5px * var(--size-base-spacing)) !important;
  padding-bottom: calc(3.5px * var(--size-base-spacing)) !important;
}

.px-3\.5 {
  padding-right: calc(3.5px * var(--size-base-spacing)) !important;
  padding-left: calc(3.5px * var(--size-base-spacing)) !important;
}

.m-3\.5 {
  margin: calc(3.5px * var(--size-base-spacing)) !important;
}

.ml-3\.5 {
  margin-left: calc(3.5px * var(--size-base-spacing)) !important;
}

.mr-3\.5 {
  margin-right: calc(3.5px * var(--size-base-spacing)) !important;
}

.mb-3\.5 {
  margin-bottom: calc(3.5px * var(--size-base-spacing)) !important;
}

.mt-3\.5 {
  margin-top: calc(3.5px * var(--size-base-spacing)) !important;
}

.my-3\.5 {
  margin-top: calc(3.5px * var(--size-base-spacing)) !important;
  margin-bottom: calc(3.5px * var(--size-base-spacing)) !important;
}

.mx-3\.5 {
  margin-right: calc(3.5px * var(--size-base-spacing)) !important;
  margin-left: calc(3.5px * var(--size-base-spacing)) !important;
}

.p-4\.5 {
  padding: calc(4.5px * var(--size-base-spacing)) !important;
}

.pl-4\.5 {
  padding-left: calc(4.5px * var(--size-base-spacing)) !important;
}

.pr-4\.5 {
  padding-right: calc(4.5px * var(--size-base-spacing)) !important;
}

.pb-4\.5 {
  padding-bottom: calc(4.5px * var(--size-base-spacing)) !important;
}

.pt-4\.5 {
  padding-top: calc(4.5px * var(--size-base-spacing)) !important;
}

.py-4\.5 {
  padding-top: calc(4.5px * var(--size-base-spacing)) !important;
  padding-bottom: calc(4.5px * var(--size-base-spacing)) !important;
}

.px-4\.5 {
  padding-right: calc(4.5px * var(--size-base-spacing)) !important;
  padding-left: calc(4.5px * var(--size-base-spacing)) !important;
}

.m-4\.5 {
  margin: calc(4.5px * var(--size-base-spacing)) !important;
}

.ml-4\.5 {
  margin-left: calc(4.5px * var(--size-base-spacing)) !important;
}

.mr-4\.5 {
  margin-right: calc(4.5px * var(--size-base-spacing)) !important;
}

.mb-4\.5 {
  margin-bottom: calc(4.5px * var(--size-base-spacing)) !important;
}

.mt-4\.5 {
  margin-top: calc(4.5px * var(--size-base-spacing)) !important;
}

.my-4\.5 {
  margin-top: calc(4.5px * var(--size-base-spacing)) !important;
  margin-bottom: calc(4.5px * var(--size-base-spacing)) !important;
}

.mx-4\.5 {
  margin-right: calc(4.5px * var(--size-base-spacing)) !important;
  margin-left: calc(4.5px * var(--size-base-spacing)) !important;
}

.p-5\.5 {
  padding: calc(5.5px * var(--size-base-spacing)) !important;
}

.pl-5\.5 {
  padding-left: calc(5.5px * var(--size-base-spacing)) !important;
}

.pr-5\.5 {
  padding-right: calc(5.5px * var(--size-base-spacing)) !important;
}

.pb-5\.5 {
  padding-bottom: calc(5.5px * var(--size-base-spacing)) !important;
}

.pt-5\.5 {
  padding-top: calc(5.5px * var(--size-base-spacing)) !important;
}

.py-5\.5 {
  padding-top: calc(5.5px * var(--size-base-spacing)) !important;
  padding-bottom: calc(5.5px * var(--size-base-spacing)) !important;
}

.px-5\.5 {
  padding-right: calc(5.5px * var(--size-base-spacing)) !important;
  padding-left: calc(5.5px * var(--size-base-spacing)) !important;
}

.m-5\.5 {
  margin: calc(5.5px * var(--size-base-spacing)) !important;
}

.ml-5\.5 {
  margin-left: calc(5.5px * var(--size-base-spacing)) !important;
}

.mr-5\.5 {
  margin-right: calc(5.5px * var(--size-base-spacing)) !important;
}

.mb-5\.5 {
  margin-bottom: calc(5.5px * var(--size-base-spacing)) !important;
}

.mt-5\.5 {
  margin-top: calc(5.5px * var(--size-base-spacing)) !important;
}

.my-5\.5 {
  margin-top: calc(5.5px * var(--size-base-spacing)) !important;
  margin-bottom: calc(5.5px * var(--size-base-spacing)) !important;
}

.mx-5\.5 {
  margin-right: calc(5.5px * var(--size-base-spacing)) !important;
  margin-left: calc(5.5px * var(--size-base-spacing)) !important;
}

.p-6\.5 {
  padding: calc(6.5px * var(--size-base-spacing)) !important;
}

.pl-6\.5 {
  padding-left: calc(6.5px * var(--size-base-spacing)) !important;
}

.pr-6\.5 {
  padding-right: calc(6.5px * var(--size-base-spacing)) !important;
}

.pb-6\.5 {
  padding-bottom: calc(6.5px * var(--size-base-spacing)) !important;
}

.pt-6\.5 {
  padding-top: calc(6.5px * var(--size-base-spacing)) !important;
}

.py-6\.5 {
  padding-top: calc(6.5px * var(--size-base-spacing)) !important;
  padding-bottom: calc(6.5px * var(--size-base-spacing)) !important;
}

.px-6\.5 {
  padding-right: calc(6.5px * var(--size-base-spacing)) !important;
  padding-left: calc(6.5px * var(--size-base-spacing)) !important;
}

.m-6\.5 {
  margin: calc(6.5px * var(--size-base-spacing)) !important;
}

.ml-6\.5 {
  margin-left: calc(6.5px * var(--size-base-spacing)) !important;
}

.mr-6\.5 {
  margin-right: calc(6.5px * var(--size-base-spacing)) !important;
}

.mb-6\.5 {
  margin-bottom: calc(6.5px * var(--size-base-spacing)) !important;
}

.mt-6\.5 {
  margin-top: calc(6.5px * var(--size-base-spacing)) !important;
}

.my-6\.5 {
  margin-top: calc(6.5px * var(--size-base-spacing)) !important;
  margin-bottom: calc(6.5px * var(--size-base-spacing)) !important;
}

.mx-6\.5 {
  margin-right: calc(6.5px * var(--size-base-spacing)) !important;
  margin-left: calc(6.5px * var(--size-base-spacing)) !important;
}

.p-7\.5 {
  padding: calc(7.5px * var(--size-base-spacing)) !important;
}

.pl-7\.5 {
  padding-left: calc(7.5px * var(--size-base-spacing)) !important;
}

.pr-7\.5 {
  padding-right: calc(7.5px * var(--size-base-spacing)) !important;
}

.pb-7\.5 {
  padding-bottom: calc(7.5px * var(--size-base-spacing)) !important;
}

.pt-7\.5 {
  padding-top: calc(7.5px * var(--size-base-spacing)) !important;
}

.py-7\.5 {
  padding-top: calc(7.5px * var(--size-base-spacing)) !important;
  padding-bottom: calc(7.5px * var(--size-base-spacing)) !important;
}

.px-7\.5 {
  padding-right: calc(7.5px * var(--size-base-spacing)) !important;
  padding-left: calc(7.5px * var(--size-base-spacing)) !important;
}

.m-7\.5 {
  margin: calc(7.5px * var(--size-base-spacing)) !important;
}

.ml-7\.5 {
  margin-left: calc(7.5px * var(--size-base-spacing)) !important;
}

.mr-7\.5 {
  margin-right: calc(7.5px * var(--size-base-spacing)) !important;
}

.mb-7\.5 {
  margin-bottom: calc(7.5px * var(--size-base-spacing)) !important;
}

.mt-7\.5 {
  margin-top: calc(7.5px * var(--size-base-spacing)) !important;
}

.my-7\.5 {
  margin-top: calc(7.5px * var(--size-base-spacing)) !important;
  margin-bottom: calc(7.5px * var(--size-base-spacing)) !important;
}

.mx-7\.5 {
  margin-right: calc(7.5px * var(--size-base-spacing)) !important;
  margin-left: calc(7.5px * var(--size-base-spacing)) !important;
}

.p-8\.5 {
  padding: calc(8.5px * var(--size-base-spacing)) !important;
}

.pl-8\.5 {
  padding-left: calc(8.5px * var(--size-base-spacing)) !important;
}

.pr-8\.5 {
  padding-right: calc(8.5px * var(--size-base-spacing)) !important;
}

.pb-8\.5 {
  padding-bottom: calc(8.5px * var(--size-base-spacing)) !important;
}

.pt-8\.5 {
  padding-top: calc(8.5px * var(--size-base-spacing)) !important;
}

.py-8\.5 {
  padding-top: calc(8.5px * var(--size-base-spacing)) !important;
  padding-bottom: calc(8.5px * var(--size-base-spacing)) !important;
}

.px-8\.5 {
  padding-right: calc(8.5px * var(--size-base-spacing)) !important;
  padding-left: calc(8.5px * var(--size-base-spacing)) !important;
}

.m-8\.5 {
  margin: calc(8.5px * var(--size-base-spacing)) !important;
}

.ml-8\.5 {
  margin-left: calc(8.5px * var(--size-base-spacing)) !important;
}

.mr-8\.5 {
  margin-right: calc(8.5px * var(--size-base-spacing)) !important;
}

.mb-8\.5 {
  margin-bottom: calc(8.5px * var(--size-base-spacing)) !important;
}

.mt-8\.5 {
  margin-top: calc(8.5px * var(--size-base-spacing)) !important;
}

.my-8\.5 {
  margin-top: calc(8.5px * var(--size-base-spacing)) !important;
  margin-bottom: calc(8.5px * var(--size-base-spacing)) !important;
}

.mx-8\.5 {
  margin-right: calc(8.5px * var(--size-base-spacing)) !important;
  margin-left: calc(8.5px * var(--size-base-spacing)) !important;
}

.p-9\.5 {
  padding: calc(9.5px * var(--size-base-spacing)) !important;
}

.pl-9\.5 {
  padding-left: calc(9.5px * var(--size-base-spacing)) !important;
}

.pr-9\.5 {
  padding-right: calc(9.5px * var(--size-base-spacing)) !important;
}

.pb-9\.5 {
  padding-bottom: calc(9.5px * var(--size-base-spacing)) !important;
}

.pt-9\.5 {
  padding-top: calc(9.5px * var(--size-base-spacing)) !important;
}

.py-9\.5 {
  padding-top: calc(9.5px * var(--size-base-spacing)) !important;
  padding-bottom: calc(9.5px * var(--size-base-spacing)) !important;
}

.px-9\.5 {
  padding-right: calc(9.5px * var(--size-base-spacing)) !important;
  padding-left: calc(9.5px * var(--size-base-spacing)) !important;
}

.m-9\.5 {
  margin: calc(9.5px * var(--size-base-spacing)) !important;
}

.ml-9\.5 {
  margin-left: calc(9.5px * var(--size-base-spacing)) !important;
}

.mr-9\.5 {
  margin-right: calc(9.5px * var(--size-base-spacing)) !important;
}

.mb-9\.5 {
  margin-bottom: calc(9.5px * var(--size-base-spacing)) !important;
}

.mt-9\.5 {
  margin-top: calc(9.5px * var(--size-base-spacing)) !important;
}

.my-9\.5 {
  margin-top: calc(9.5px * var(--size-base-spacing)) !important;
  margin-bottom: calc(9.5px * var(--size-base-spacing)) !important;
}

.mx-9\.5 {
  margin-right: calc(9.5px * var(--size-base-spacing)) !important;
  margin-left: calc(9.5px * var(--size-base-spacing)) !important;
}

.p-10\.5 {
  padding: calc(10.5px * var(--size-base-spacing)) !important;
}

.pl-10\.5 {
  padding-left: calc(10.5px * var(--size-base-spacing)) !important;
}

.pr-10\.5 {
  padding-right: calc(10.5px * var(--size-base-spacing)) !important;
}

.pb-10\.5 {
  padding-bottom: calc(10.5px * var(--size-base-spacing)) !important;
}

.pt-10\.5 {
  padding-top: calc(10.5px * var(--size-base-spacing)) !important;
}

.py-10\.5 {
  padding-top: calc(10.5px * var(--size-base-spacing)) !important;
  padding-bottom: calc(10.5px * var(--size-base-spacing)) !important;
}

.px-10\.5 {
  padding-right: calc(10.5px * var(--size-base-spacing)) !important;
  padding-left: calc(10.5px * var(--size-base-spacing)) !important;
}

.m-10\.5 {
  margin: calc(10.5px * var(--size-base-spacing)) !important;
}

.ml-10\.5 {
  margin-left: calc(10.5px * var(--size-base-spacing)) !important;
}

.mr-10\.5 {
  margin-right: calc(10.5px * var(--size-base-spacing)) !important;
}

.mb-10\.5 {
  margin-bottom: calc(10.5px * var(--size-base-spacing)) !important;
}

.mt-10\.5 {
  margin-top: calc(10.5px * var(--size-base-spacing)) !important;
}

.my-10\.5 {
  margin-top: calc(10.5px * var(--size-base-spacing)) !important;
  margin-bottom: calc(10.5px * var(--size-base-spacing)) !important;
}

.mx-10\.5 {
  margin-right: calc(10.5px * var(--size-base-spacing)) !important;
  margin-left: calc(10.5px * var(--size-base-spacing)) !important;
}

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

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

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

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

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

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

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

.m-0 {
  margin: 0 !important;
}

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

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

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

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

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

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

.p-1 {
  padding: calc(1px * var(--size-base-spacing)) !important;
}

.pl-1 {
  padding-left: calc(1px * var(--size-base-spacing)) !important;
}

.pr-1 {
  padding-right: calc(1px * var(--size-base-spacing)) !important;
}

.pb-1 {
  padding-bottom: calc(1px * var(--size-base-spacing)) !important;
}

.pt-1 {
  padding-top: calc(1px * var(--size-base-spacing)) !important;
}

.py-1 {
  padding-top: calc(1px * var(--size-base-spacing)) !important;
  padding-bottom: calc(1px * var(--size-base-spacing)) !important;
}

.px-1 {
  padding-right: calc(1px * var(--size-base-spacing)) !important;
  padding-left: calc(1px * var(--size-base-spacing)) !important;
}

.m-1 {
  margin: calc(1px * var(--size-base-spacing)) !important;
}

.ml-1 {
  margin-left: calc(1px * var(--size-base-spacing)) !important;
}

.mr-1 {
  margin-right: calc(1px * var(--size-base-spacing)) !important;
}

.mb-1 {
  margin-bottom: calc(1px * var(--size-base-spacing)) !important;
}

.mt-1 {
  margin-top: calc(1px * var(--size-base-spacing)) !important;
}

.my-1 {
  margin-top: calc(1px * var(--size-base-spacing)) !important;
  margin-bottom: calc(1px * var(--size-base-spacing)) !important;
}

.mx-1 {
  margin-right: calc(1px * var(--size-base-spacing)) !important;
  margin-left: calc(1px * var(--size-base-spacing)) !important;
}

.p-2 {
  padding: calc(2px * var(--size-base-spacing)) !important;
}

.pl-2 {
  padding-left: calc(2px * var(--size-base-spacing)) !important;
}

.pr-2 {
  padding-right: calc(2px * var(--size-base-spacing)) !important;
}

.pb-2 {
  padding-bottom: calc(2px * var(--size-base-spacing)) !important;
}

.pt-2 {
  padding-top: calc(2px * var(--size-base-spacing)) !important;
}

.py-2 {
  padding-top: calc(2px * var(--size-base-spacing)) !important;
  padding-bottom: calc(2px * var(--size-base-spacing)) !important;
}

.px-2 {
  padding-right: calc(2px * var(--size-base-spacing)) !important;
  padding-left: calc(2px * var(--size-base-spacing)) !important;
}

.m-2 {
  margin: calc(2px * var(--size-base-spacing)) !important;
}

.ml-2 {
  margin-left: calc(2px * var(--size-base-spacing)) !important;
}

.mr-2 {
  margin-right: calc(2px * var(--size-base-spacing)) !important;
}

.mb-2 {
  margin-bottom: calc(2px * var(--size-base-spacing)) !important;
}

.mt-2 {
  margin-top: calc(2px * var(--size-base-spacing)) !important;
}

.my-2 {
  margin-top: calc(2px * var(--size-base-spacing)) !important;
  margin-bottom: calc(2px * var(--size-base-spacing)) !important;
}

.mx-2 {
  margin-right: calc(2px * var(--size-base-spacing)) !important;
  margin-left: calc(2px * var(--size-base-spacing)) !important;
}

.p-3 {
  padding: calc(3px * var(--size-base-spacing)) !important;
}

.pl-3 {
  padding-left: calc(3px * var(--size-base-spacing)) !important;
}

.pr-3 {
  padding-right: calc(3px * var(--size-base-spacing)) !important;
}

.pb-3 {
  padding-bottom: calc(3px * var(--size-base-spacing)) !important;
}

.pt-3 {
  padding-top: calc(3px * var(--size-base-spacing)) !important;
}

.py-3 {
  padding-top: calc(3px * var(--size-base-spacing)) !important;
  padding-bottom: calc(3px * var(--size-base-spacing)) !important;
}

.px-3 {
  padding-right: calc(3px * var(--size-base-spacing)) !important;
  padding-left: calc(3px * var(--size-base-spacing)) !important;
}

.m-3 {
  margin: calc(3px * var(--size-base-spacing)) !important;
}

.ml-3 {
  margin-left: calc(3px * var(--size-base-spacing)) !important;
}

.mr-3 {
  margin-right: calc(3px * var(--size-base-spacing)) !important;
}

.mb-3 {
  margin-bottom: calc(3px * var(--size-base-spacing)) !important;
}

.mt-3 {
  margin-top: calc(3px * var(--size-base-spacing)) !important;
}

.my-3 {
  margin-top: calc(3px * var(--size-base-spacing)) !important;
  margin-bottom: calc(3px * var(--size-base-spacing)) !important;
}

.mx-3 {
  margin-right: calc(3px * var(--size-base-spacing)) !important;
  margin-left: calc(3px * var(--size-base-spacing)) !important;
}

.p-4 {
  padding: calc(4px * var(--size-base-spacing)) !important;
}

.pl-4 {
  padding-left: calc(4px * var(--size-base-spacing)) !important;
}

.pr-4 {
  padding-right: calc(4px * var(--size-base-spacing)) !important;
}

.pb-4 {
  padding-bottom: calc(4px * var(--size-base-spacing)) !important;
}

.pt-4 {
  padding-top: calc(4px * var(--size-base-spacing)) !important;
}

.py-4 {
  padding-top: calc(4px * var(--size-base-spacing)) !important;
  padding-bottom: calc(4px * var(--size-base-spacing)) !important;
}

.px-4 {
  padding-right: calc(4px * var(--size-base-spacing)) !important;
  padding-left: calc(4px * var(--size-base-spacing)) !important;
}

.m-4 {
  margin: calc(4px * var(--size-base-spacing)) !important;
}

.ml-4 {
  margin-left: calc(4px * var(--size-base-spacing)) !important;
}

.mr-4 {
  margin-right: calc(4px * var(--size-base-spacing)) !important;
}

.mb-4 {
  margin-bottom: calc(4px * var(--size-base-spacing)) !important;
}

.mt-4 {
  margin-top: calc(4px * var(--size-base-spacing)) !important;
}

.my-4 {
  margin-top: calc(4px * var(--size-base-spacing)) !important;
  margin-bottom: calc(4px * var(--size-base-spacing)) !important;
}

.mx-4 {
  margin-right: calc(4px * var(--size-base-spacing)) !important;
  margin-left: calc(4px * var(--size-base-spacing)) !important;
}

.p-5 {
  padding: calc(5px * var(--size-base-spacing)) !important;
}

.pl-5 {
  padding-left: calc(5px * var(--size-base-spacing)) !important;
}

.pr-5 {
  padding-right: calc(5px * var(--size-base-spacing)) !important;
}

.pb-5 {
  padding-bottom: calc(5px * var(--size-base-spacing)) !important;
}

.pt-5 {
  padding-top: calc(5px * var(--size-base-spacing)) !important;
}

.py-5 {
  padding-top: calc(5px * var(--size-base-spacing)) !important;
  padding-bottom: calc(5px * var(--size-base-spacing)) !important;
}

.px-5 {
  padding-right: calc(5px * var(--size-base-spacing)) !important;
  padding-left: calc(5px * var(--size-base-spacing)) !important;
}

.m-5 {
  margin: calc(5px * var(--size-base-spacing)) !important;
}

.ml-5 {
  margin-left: calc(5px * var(--size-base-spacing)) !important;
}

.mr-5 {
  margin-right: calc(5px * var(--size-base-spacing)) !important;
}

.mb-5 {
  margin-bottom: calc(5px * var(--size-base-spacing)) !important;
}

.mt-5 {
  margin-top: calc(5px * var(--size-base-spacing)) !important;
}

.my-5 {
  margin-top: calc(5px * var(--size-base-spacing)) !important;
  margin-bottom: calc(5px * var(--size-base-spacing)) !important;
}

.mx-5 {
  margin-right: calc(5px * var(--size-base-spacing)) !important;
  margin-left: calc(5px * var(--size-base-spacing)) !important;
}

.p-6 {
  padding: calc(6px * var(--size-base-spacing)) !important;
}

.pl-6 {
  padding-left: calc(6px * var(--size-base-spacing)) !important;
}

.pr-6 {
  padding-right: calc(6px * var(--size-base-spacing)) !important;
}

.pb-6 {
  padding-bottom: calc(6px * var(--size-base-spacing)) !important;
}

.pt-6 {
  padding-top: calc(6px * var(--size-base-spacing)) !important;
}

.py-6 {
  padding-top: calc(6px * var(--size-base-spacing)) !important;
  padding-bottom: calc(6px * var(--size-base-spacing)) !important;
}

.px-6 {
  padding-right: calc(6px * var(--size-base-spacing)) !important;
  padding-left: calc(6px * var(--size-base-spacing)) !important;
}

.m-6 {
  margin: calc(6px * var(--size-base-spacing)) !important;
}

.ml-6 {
  margin-left: calc(6px * var(--size-base-spacing)) !important;
}

.mr-6 {
  margin-right: calc(6px * var(--size-base-spacing)) !important;
}

.mb-6 {
  margin-bottom: calc(6px * var(--size-base-spacing)) !important;
}

.mt-6 {
  margin-top: calc(6px * var(--size-base-spacing)) !important;
}

.my-6 {
  margin-top: calc(6px * var(--size-base-spacing)) !important;
  margin-bottom: calc(6px * var(--size-base-spacing)) !important;
}

.mx-6 {
  margin-right: calc(6px * var(--size-base-spacing)) !important;
  margin-left: calc(6px * var(--size-base-spacing)) !important;
}

.p-7 {
  padding: calc(7px * var(--size-base-spacing)) !important;
}

.pl-7 {
  padding-left: calc(7px * var(--size-base-spacing)) !important;
}

.pr-7 {
  padding-right: calc(7px * var(--size-base-spacing)) !important;
}

.pb-7 {
  padding-bottom: calc(7px * var(--size-base-spacing)) !important;
}

.pt-7 {
  padding-top: calc(7px * var(--size-base-spacing)) !important;
}

.py-7 {
  padding-top: calc(7px * var(--size-base-spacing)) !important;
  padding-bottom: calc(7px * var(--size-base-spacing)) !important;
}

.px-7 {
  padding-right: calc(7px * var(--size-base-spacing)) !important;
  padding-left: calc(7px * var(--size-base-spacing)) !important;
}

.m-7 {
  margin: calc(7px * var(--size-base-spacing)) !important;
}

.ml-7 {
  margin-left: calc(7px * var(--size-base-spacing)) !important;
}

.mr-7 {
  margin-right: calc(7px * var(--size-base-spacing)) !important;
}

.mb-7 {
  margin-bottom: calc(7px * var(--size-base-spacing)) !important;
}

.mt-7 {
  margin-top: calc(7px * var(--size-base-spacing)) !important;
}

.my-7 {
  margin-top: calc(7px * var(--size-base-spacing)) !important;
  margin-bottom: calc(7px * var(--size-base-spacing)) !important;
}

.mx-7 {
  margin-right: calc(7px * var(--size-base-spacing)) !important;
  margin-left: calc(7px * var(--size-base-spacing)) !important;
}

.p-8 {
  padding: calc(8px * var(--size-base-spacing)) !important;
}

.pl-8 {
  padding-left: calc(8px * var(--size-base-spacing)) !important;
}

.pr-8 {
  padding-right: calc(8px * var(--size-base-spacing)) !important;
}

.pb-8 {
  padding-bottom: calc(8px * var(--size-base-spacing)) !important;
}

.pt-8 {
  padding-top: calc(8px * var(--size-base-spacing)) !important;
}

.py-8 {
  padding-top: calc(8px * var(--size-base-spacing)) !important;
  padding-bottom: calc(8px * var(--size-base-spacing)) !important;
}

.px-8 {
  padding-right: calc(8px * var(--size-base-spacing)) !important;
  padding-left: calc(8px * var(--size-base-spacing)) !important;
}

.m-8 {
  margin: calc(8px * var(--size-base-spacing)) !important;
}

.ml-8 {
  margin-left: calc(8px * var(--size-base-spacing)) !important;
}

.mr-8 {
  margin-right: calc(8px * var(--size-base-spacing)) !important;
}

.mb-8 {
  margin-bottom: calc(8px * var(--size-base-spacing)) !important;
}

.mt-8 {
  margin-top: calc(8px * var(--size-base-spacing)) !important;
}

.my-8 {
  margin-top: calc(8px * var(--size-base-spacing)) !important;
  margin-bottom: calc(8px * var(--size-base-spacing)) !important;
}

.mx-8 {
  margin-right: calc(8px * var(--size-base-spacing)) !important;
  margin-left: calc(8px * var(--size-base-spacing)) !important;
}

.p-9 {
  padding: calc(9px * var(--size-base-spacing)) !important;
}

.pl-9 {
  padding-left: calc(9px * var(--size-base-spacing)) !important;
}

.pr-9 {
  padding-right: calc(9px * var(--size-base-spacing)) !important;
}

.pb-9 {
  padding-bottom: calc(9px * var(--size-base-spacing)) !important;
}

.pt-9 {
  padding-top: calc(9px * var(--size-base-spacing)) !important;
}

.py-9 {
  padding-top: calc(9px * var(--size-base-spacing)) !important;
  padding-bottom: calc(9px * var(--size-base-spacing)) !important;
}

.px-9 {
  padding-right: calc(9px * var(--size-base-spacing)) !important;
  padding-left: calc(9px * var(--size-base-spacing)) !important;
}

.m-9 {
  margin: calc(9px * var(--size-base-spacing)) !important;
}

.ml-9 {
  margin-left: calc(9px * var(--size-base-spacing)) !important;
}

.mr-9 {
  margin-right: calc(9px * var(--size-base-spacing)) !important;
}

.mb-9 {
  margin-bottom: calc(9px * var(--size-base-spacing)) !important;
}

.mt-9 {
  margin-top: calc(9px * var(--size-base-spacing)) !important;
}

.my-9 {
  margin-top: calc(9px * var(--size-base-spacing)) !important;
  margin-bottom: calc(9px * var(--size-base-spacing)) !important;
}

.mx-9 {
  margin-right: calc(9px * var(--size-base-spacing)) !important;
  margin-left: calc(9px * var(--size-base-spacing)) !important;
}

.p-10 {
  padding: calc(10px * var(--size-base-spacing)) !important;
}

.pl-10 {
  padding-left: calc(10px * var(--size-base-spacing)) !important;
}

.pr-10 {
  padding-right: calc(10px * var(--size-base-spacing)) !important;
}

.pb-10 {
  padding-bottom: calc(10px * var(--size-base-spacing)) !important;
}

.pt-10 {
  padding-top: calc(10px * var(--size-base-spacing)) !important;
}

.py-10 {
  padding-top: calc(10px * var(--size-base-spacing)) !important;
  padding-bottom: calc(10px * var(--size-base-spacing)) !important;
}

.px-10 {
  padding-right: calc(10px * var(--size-base-spacing)) !important;
  padding-left: calc(10px * var(--size-base-spacing)) !important;
}

.m-10 {
  margin: calc(10px * var(--size-base-spacing)) !important;
}

.ml-10 {
  margin-left: calc(10px * var(--size-base-spacing)) !important;
}

.mr-10 {
  margin-right: calc(10px * var(--size-base-spacing)) !important;
}

.mb-10 {
  margin-bottom: calc(10px * var(--size-base-spacing)) !important;
}

.mt-10 {
  margin-top: calc(10px * var(--size-base-spacing)) !important;
}

.my-10 {
  margin-top: calc(10px * var(--size-base-spacing)) !important;
  margin-bottom: calc(10px * var(--size-base-spacing)) !important;
}

.mx-10 {
  margin-right: calc(10px * var(--size-base-spacing)) !important;
  margin-left: calc(10px * var(--size-base-spacing)) !important;
}

.-m-0 {
  margin: 0 !important;
}

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

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

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

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

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

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

.-m-1 {
  margin: calc(-1px * var(--size-base-spacing)) !important;
}

.-ml-1 {
  margin-left: calc(-1px * var(--size-base-spacing)) !important;
}

.-mr-1 {
  margin-right: calc(-1px * var(--size-base-spacing)) !important;
}

.-mb-1 {
  margin-bottom: calc(-1px * var(--size-base-spacing)) !important;
}

.-mt-1 {
  margin-top: calc(-1px * var(--size-base-spacing)) !important;
}

.-my-1 {
  margin-top: calc(-1px * var(--size-base-spacing)) !important;
  margin-bottom: calc(-1px * var(--size-base-spacing)) !important;
}

.-mx-1 {
  margin-right: calc(-1px * var(--size-base-spacing)) !important;
  margin-left: calc(-1px * var(--size-base-spacing)) !important;
}

.-m-2 {
  margin: calc(-2px * var(--size-base-spacing)) !important;
}

.-ml-2 {
  margin-left: calc(-2px * var(--size-base-spacing)) !important;
}

.-mr-2 {
  margin-right: calc(-2px * var(--size-base-spacing)) !important;
}

.-mb-2 {
  margin-bottom: calc(-2px * var(--size-base-spacing)) !important;
}

.-mt-2 {
  margin-top: calc(-2px * var(--size-base-spacing)) !important;
}

.-my-2 {
  margin-top: calc(-2px * var(--size-base-spacing)) !important;
  margin-bottom: calc(-2px * var(--size-base-spacing)) !important;
}

.-mx-2 {
  margin-right: calc(-2px * var(--size-base-spacing)) !important;
  margin-left: calc(-2px * var(--size-base-spacing)) !important;
}

.-m-3 {
  margin: calc(-3px * var(--size-base-spacing)) !important;
}

.-ml-3 {
  margin-left: calc(-3px * var(--size-base-spacing)) !important;
}

.-mr-3 {
  margin-right: calc(-3px * var(--size-base-spacing)) !important;
}

.-mb-3 {
  margin-bottom: calc(-3px * var(--size-base-spacing)) !important;
}

.-mt-3 {
  margin-top: calc(-3px * var(--size-base-spacing)) !important;
}

.-my-3 {
  margin-top: calc(-3px * var(--size-base-spacing)) !important;
  margin-bottom: calc(-3px * var(--size-base-spacing)) !important;
}

.-mx-3 {
  margin-right: calc(-3px * var(--size-base-spacing)) !important;
  margin-left: calc(-3px * var(--size-base-spacing)) !important;
}

.-m-4 {
  margin: calc(-4px * var(--size-base-spacing)) !important;
}

.-ml-4 {
  margin-left: calc(-4px * var(--size-base-spacing)) !important;
}

.-mr-4 {
  margin-right: calc(-4px * var(--size-base-spacing)) !important;
}

.-mb-4 {
  margin-bottom: calc(-4px * var(--size-base-spacing)) !important;
}

.-mt-4 {
  margin-top: calc(-4px * var(--size-base-spacing)) !important;
}

.-my-4 {
  margin-top: calc(-4px * var(--size-base-spacing)) !important;
  margin-bottom: calc(-4px * var(--size-base-spacing)) !important;
}

.-mx-4 {
  margin-right: calc(-4px * var(--size-base-spacing)) !important;
  margin-left: calc(-4px * var(--size-base-spacing)) !important;
}

.-m-5 {
  margin: calc(-5px * var(--size-base-spacing)) !important;
}

.-ml-5 {
  margin-left: calc(-5px * var(--size-base-spacing)) !important;
}

.-mr-5 {
  margin-right: calc(-5px * var(--size-base-spacing)) !important;
}

.-mb-5 {
  margin-bottom: calc(-5px * var(--size-base-spacing)) !important;
}

.-mt-5 {
  margin-top: calc(-5px * var(--size-base-spacing)) !important;
}

.-my-5 {
  margin-top: calc(-5px * var(--size-base-spacing)) !important;
  margin-bottom: calc(-5px * var(--size-base-spacing)) !important;
}

.-mx-5 {
  margin-right: calc(-5px * var(--size-base-spacing)) !important;
  margin-left: calc(-5px * var(--size-base-spacing)) !important;
}

.-m-6 {
  margin: calc(-6px * var(--size-base-spacing)) !important;
}

.-ml-6 {
  margin-left: calc(-6px * var(--size-base-spacing)) !important;
}

.-mr-6 {
  margin-right: calc(-6px * var(--size-base-spacing)) !important;
}

.-mb-6 {
  margin-bottom: calc(-6px * var(--size-base-spacing)) !important;
}

.-mt-6 {
  margin-top: calc(-6px * var(--size-base-spacing)) !important;
}

.-my-6 {
  margin-top: calc(-6px * var(--size-base-spacing)) !important;
  margin-bottom: calc(-6px * var(--size-base-spacing)) !important;
}

.-mx-6 {
  margin-right: calc(-6px * var(--size-base-spacing)) !important;
  margin-left: calc(-6px * var(--size-base-spacing)) !important;
}

.-m-7 {
  margin: calc(-7px * var(--size-base-spacing)) !important;
}

.-ml-7 {
  margin-left: calc(-7px * var(--size-base-spacing)) !important;
}

.-mr-7 {
  margin-right: calc(-7px * var(--size-base-spacing)) !important;
}

.-mb-7 {
  margin-bottom: calc(-7px * var(--size-base-spacing)) !important;
}

.-mt-7 {
  margin-top: calc(-7px * var(--size-base-spacing)) !important;
}

.-my-7 {
  margin-top: calc(-7px * var(--size-base-spacing)) !important;
  margin-bottom: calc(-7px * var(--size-base-spacing)) !important;
}

.-mx-7 {
  margin-right: calc(-7px * var(--size-base-spacing)) !important;
  margin-left: calc(-7px * var(--size-base-spacing)) !important;
}

.-m-8 {
  margin: calc(-8px * var(--size-base-spacing)) !important;
}

.-ml-8 {
  margin-left: calc(-8px * var(--size-base-spacing)) !important;
}

.-mr-8 {
  margin-right: calc(-8px * var(--size-base-spacing)) !important;
}

.-mb-8 {
  margin-bottom: calc(-8px * var(--size-base-spacing)) !important;
}

.-mt-8 {
  margin-top: calc(-8px * var(--size-base-spacing)) !important;
}

.-my-8 {
  margin-top: calc(-8px * var(--size-base-spacing)) !important;
  margin-bottom: calc(-8px * var(--size-base-spacing)) !important;
}

.-mx-8 {
  margin-right: calc(-8px * var(--size-base-spacing)) !important;
  margin-left: calc(-8px * var(--size-base-spacing)) !important;
}

.-m-9 {
  margin: calc(-9px * var(--size-base-spacing)) !important;
}

.-ml-9 {
  margin-left: calc(-9px * var(--size-base-spacing)) !important;
}

.-mr-9 {
  margin-right: calc(-9px * var(--size-base-spacing)) !important;
}

.-mb-9 {
  margin-bottom: calc(-9px * var(--size-base-spacing)) !important;
}

.-mt-9 {
  margin-top: calc(-9px * var(--size-base-spacing)) !important;
}

.-my-9 {
  margin-top: calc(-9px * var(--size-base-spacing)) !important;
  margin-bottom: calc(-9px * var(--size-base-spacing)) !important;
}

.-mx-9 {
  margin-right: calc(-9px * var(--size-base-spacing)) !important;
  margin-left: calc(-9px * var(--size-base-spacing)) !important;
}

.-m-10 {
  margin: calc(-10px * var(--size-base-spacing)) !important;
}

.-ml-10 {
  margin-left: calc(-10px * var(--size-base-spacing)) !important;
}

.-mr-10 {
  margin-right: calc(-10px * var(--size-base-spacing)) !important;
}

.-mb-10 {
  margin-bottom: calc(-10px * var(--size-base-spacing)) !important;
}

.-mt-10 {
  margin-top: calc(-10px * var(--size-base-spacing)) !important;
}

.-my-10 {
  margin-top: calc(-10px * var(--size-base-spacing)) !important;
  margin-bottom: calc(-10px * var(--size-base-spacing)) !important;
}

.-mx-10 {
  margin-right: calc(-10px * var(--size-base-spacing)) !important;
  margin-left: calc(-10px * var(--size-base-spacing)) !important;
}

.-m-0\.5 {
  margin: calc(-0.5px * var(--size-base-spacing)) !important;
}

.-ml-0\.5 {
  margin-left: calc(-0.5px * var(--size-base-spacing)) !important;
}

.-mr-0\.5 {
  margin-right: calc(-0.5px * var(--size-base-spacing)) !important;
}

.-mb-0\.5 {
  margin-bottom: calc(-0.5px * var(--size-base-spacing)) !important;
}

.-mt-0\.5 {
  margin-top: calc(-0.5px * var(--size-base-spacing)) !important;
}

.-my-0\.5 {
  margin-top: calc(-0.5px * var(--size-base-spacing)) !important;
  margin-bottom: calc(-0.5px * var(--size-base-spacing)) !important;
}

.-mx-0\.5 {
  margin-right: calc(-0.5px * var(--size-base-spacing)) !important;
  margin-left: calc(-0.5px * var(--size-base-spacing)) !important;
}

.-m-1\.5 {
  margin: calc(-1.5px * var(--size-base-spacing)) !important;
}

.-ml-1\.5 {
  margin-left: calc(-1.5px * var(--size-base-spacing)) !important;
}

.-mr-1\.5 {
  margin-right: calc(-1.5px * var(--size-base-spacing)) !important;
}

.-mb-1\.5 {
  margin-bottom: calc(-1.5px * var(--size-base-spacing)) !important;
}

.-mt-1\.5 {
  margin-top: calc(-1.5px * var(--size-base-spacing)) !important;
}

.-my-1\.5 {
  margin-top: calc(-1.5px * var(--size-base-spacing)) !important;
  margin-bottom: calc(-1.5px * var(--size-base-spacing)) !important;
}

.-mx-1\.5 {
  margin-right: calc(-1.5px * var(--size-base-spacing)) !important;
  margin-left: calc(-1.5px * var(--size-base-spacing)) !important;
}

.-m-2\.5 {
  margin: calc(-2.5px * var(--size-base-spacing)) !important;
}

.-ml-2\.5 {
  margin-left: calc(-2.5px * var(--size-base-spacing)) !important;
}

.-mr-2\.5 {
  margin-right: calc(-2.5px * var(--size-base-spacing)) !important;
}

.-mb-2\.5 {
  margin-bottom: calc(-2.5px * var(--size-base-spacing)) !important;
}

.-mt-2\.5 {
  margin-top: calc(-2.5px * var(--size-base-spacing)) !important;
}

.-my-2\.5 {
  margin-top: calc(-2.5px * var(--size-base-spacing)) !important;
  margin-bottom: calc(-2.5px * var(--size-base-spacing)) !important;
}

.-mx-2\.5 {
  margin-right: calc(-2.5px * var(--size-base-spacing)) !important;
  margin-left: calc(-2.5px * var(--size-base-spacing)) !important;
}

.-m-3\.5 {
  margin: calc(-3.5px * var(--size-base-spacing)) !important;
}

.-ml-3\.5 {
  margin-left: calc(-3.5px * var(--size-base-spacing)) !important;
}

.-mr-3\.5 {
  margin-right: calc(-3.5px * var(--size-base-spacing)) !important;
}

.-mb-3\.5 {
  margin-bottom: calc(-3.5px * var(--size-base-spacing)) !important;
}

.-mt-3\.5 {
  margin-top: calc(-3.5px * var(--size-base-spacing)) !important;
}

.-my-3\.5 {
  margin-top: calc(-3.5px * var(--size-base-spacing)) !important;
  margin-bottom: calc(-3.5px * var(--size-base-spacing)) !important;
}

.-mx-3\.5 {
  margin-right: calc(-3.5px * var(--size-base-spacing)) !important;
  margin-left: calc(-3.5px * var(--size-base-spacing)) !important;
}

.-m-4\.5 {
  margin: calc(-4.5px * var(--size-base-spacing)) !important;
}

.-ml-4\.5 {
  margin-left: calc(-4.5px * var(--size-base-spacing)) !important;
}

.-mr-4\.5 {
  margin-right: calc(-4.5px * var(--size-base-spacing)) !important;
}

.-mb-4\.5 {
  margin-bottom: calc(-4.5px * var(--size-base-spacing)) !important;
}

.-mt-4\.5 {
  margin-top: calc(-4.5px * var(--size-base-spacing)) !important;
}

.-my-4\.5 {
  margin-top: calc(-4.5px * var(--size-base-spacing)) !important;
  margin-bottom: calc(-4.5px * var(--size-base-spacing)) !important;
}

.-mx-4\.5 {
  margin-right: calc(-4.5px * var(--size-base-spacing)) !important;
  margin-left: calc(-4.5px * var(--size-base-spacing)) !important;
}

.-m-5\.5 {
  margin: calc(-5.5px * var(--size-base-spacing)) !important;
}

.-ml-5\.5 {
  margin-left: calc(-5.5px * var(--size-base-spacing)) !important;
}

.-mr-5\.5 {
  margin-right: calc(-5.5px * var(--size-base-spacing)) !important;
}

.-mb-5\.5 {
  margin-bottom: calc(-5.5px * var(--size-base-spacing)) !important;
}

.-mt-5\.5 {
  margin-top: calc(-5.5px * var(--size-base-spacing)) !important;
}

.-my-5\.5 {
  margin-top: calc(-5.5px * var(--size-base-spacing)) !important;
  margin-bottom: calc(-5.5px * var(--size-base-spacing)) !important;
}

.-mx-5\.5 {
  margin-right: calc(-5.5px * var(--size-base-spacing)) !important;
  margin-left: calc(-5.5px * var(--size-base-spacing)) !important;
}

.-m-6\.5 {
  margin: calc(-6.5px * var(--size-base-spacing)) !important;
}

.-ml-6\.5 {
  margin-left: calc(-6.5px * var(--size-base-spacing)) !important;
}

.-mr-6\.5 {
  margin-right: calc(-6.5px * var(--size-base-spacing)) !important;
}

.-mb-6\.5 {
  margin-bottom: calc(-6.5px * var(--size-base-spacing)) !important;
}

.-mt-6\.5 {
  margin-top: calc(-6.5px * var(--size-base-spacing)) !important;
}

.-my-6\.5 {
  margin-top: calc(-6.5px * var(--size-base-spacing)) !important;
  margin-bottom: calc(-6.5px * var(--size-base-spacing)) !important;
}

.-mx-6\.5 {
  margin-right: calc(-6.5px * var(--size-base-spacing)) !important;
  margin-left: calc(-6.5px * var(--size-base-spacing)) !important;
}

.-m-7\.5 {
  margin: calc(-7.5px * var(--size-base-spacing)) !important;
}

.-ml-7\.5 {
  margin-left: calc(-7.5px * var(--size-base-spacing)) !important;
}

.-mr-7\.5 {
  margin-right: calc(-7.5px * var(--size-base-spacing)) !important;
}

.-mb-7\.5 {
  margin-bottom: calc(-7.5px * var(--size-base-spacing)) !important;
}

.-mt-7\.5 {
  margin-top: calc(-7.5px * var(--size-base-spacing)) !important;
}

.-my-7\.5 {
  margin-top: calc(-7.5px * var(--size-base-spacing)) !important;
  margin-bottom: calc(-7.5px * var(--size-base-spacing)) !important;
}

.-mx-7\.5 {
  margin-right: calc(-7.5px * var(--size-base-spacing)) !important;
  margin-left: calc(-7.5px * var(--size-base-spacing)) !important;
}

.-m-8\.5 {
  margin: calc(-8.5px * var(--size-base-spacing)) !important;
}

.-ml-8\.5 {
  margin-left: calc(-8.5px * var(--size-base-spacing)) !important;
}

.-mr-8\.5 {
  margin-right: calc(-8.5px * var(--size-base-spacing)) !important;
}

.-mb-8\.5 {
  margin-bottom: calc(-8.5px * var(--size-base-spacing)) !important;
}

.-mt-8\.5 {
  margin-top: calc(-8.5px * var(--size-base-spacing)) !important;
}

.-my-8\.5 {
  margin-top: calc(-8.5px * var(--size-base-spacing)) !important;
  margin-bottom: calc(-8.5px * var(--size-base-spacing)) !important;
}

.-mx-8\.5 {
  margin-right: calc(-8.5px * var(--size-base-spacing)) !important;
  margin-left: calc(-8.5px * var(--size-base-spacing)) !important;
}

.-m-9\.5 {
  margin: calc(-9.5px * var(--size-base-spacing)) !important;
}

.-ml-9\.5 {
  margin-left: calc(-9.5px * var(--size-base-spacing)) !important;
}

.-mr-9\.5 {
  margin-right: calc(-9.5px * var(--size-base-spacing)) !important;
}

.-mb-9\.5 {
  margin-bottom: calc(-9.5px * var(--size-base-spacing)) !important;
}

.-mt-9\.5 {
  margin-top: calc(-9.5px * var(--size-base-spacing)) !important;
}

.-my-9\.5 {
  margin-top: calc(-9.5px * var(--size-base-spacing)) !important;
  margin-bottom: calc(-9.5px * var(--size-base-spacing)) !important;
}

.-mx-9\.5 {
  margin-right: calc(-9.5px * var(--size-base-spacing)) !important;
  margin-left: calc(-9.5px * var(--size-base-spacing)) !important;
}

.-m-10\.5 {
  margin: calc(-10.5px * var(--size-base-spacing)) !important;
}

.-ml-10\.5 {
  margin-left: calc(-10.5px * var(--size-base-spacing)) !important;
}

.-mr-10\.5 {
  margin-right: calc(-10.5px * var(--size-base-spacing)) !important;
}

.-mb-10\.5 {
  margin-bottom: calc(-10.5px * var(--size-base-spacing)) !important;
}

.-mt-10\.5 {
  margin-top: calc(-10.5px * var(--size-base-spacing)) !important;
}

.-my-10\.5 {
  margin-top: calc(-10.5px * var(--size-base-spacing)) !important;
  margin-bottom: calc(-10.5px * var(--size-base-spacing)) !important;
}

.-mx-10\.5 {
  margin-right: calc(-10.5px * var(--size-base-spacing)) !important;
  margin-left: calc(-10.5px * var(--size-base-spacing)) !important;
}

.p-xxsmall {
  padding: calc(0.25px * var(--size-base-spacing)) !important;
}

.pl-xxsmall {
  padding-left: calc(0.25px * var(--size-base-spacing)) !important;
}

.pr-xxsmall {
  padding-right: calc(0.25px * var(--size-base-spacing)) !important;
}

.pb-xxsmall {
  padding-bottom: calc(0.25px * var(--size-base-spacing)) !important;
}

.pt-xxsmall {
  padding-top: calc(0.25px * var(--size-base-spacing)) !important;
}

.py-xxsmall {
  padding-top: calc(0.25px * var(--size-base-spacing)) !important;
  padding-bottom: calc(0.25px * var(--size-base-spacing)) !important;
}

.px-xxsmall {
  padding-right: calc(0.25px * var(--size-base-spacing)) !important;
  padding-left: calc(0.25px * var(--size-base-spacing)) !important;
}

.m-xxsmall {
  margin: calc(0.25px * var(--size-base-spacing)) !important;
}

.mt-xxsmall {
  margin-top: calc(0.25px * var(--size-base-spacing)) !important;
}

.mr-xxsmall {
  margin-right: calc(0.25px * var(--size-base-spacing)) !important;
}

.mb-xxsmall {
  margin-bottom: calc(0.25px * var(--size-base-spacing)) !important;
}

.ml-xxsmall {
  margin-left: calc(0.25px * var(--size-base-spacing)) !important;
}

.my-xxsmall {
  margin-top: calc(0.25px * var(--size-base-spacing)) !important;
  margin-bottom: calc(0.25px * var(--size-base-spacing)) !important;
}

.mx-xxsmall {
  margin-right: calc(0.25px * var(--size-base-spacing)) !important;
  margin-left: calc(0.25px * var(--size-base-spacing)) !important;
}

.-m-xxsmall {
  margin: calc(-0.25px * var(--size-base-spacing)) !important;
}

.-mt-xxsmall {
  margin-top: calc(-0.25px * var(--size-base-spacing)) !important;
}

.-mr-xxsmall {
  margin-right: calc(-0.25px * var(--size-base-spacing)) !important;
}

.-mb-xxsmall {
  margin-bottom: calc(-0.25px * var(--size-base-spacing)) !important;
}

.-ml-xxsmall {
  margin-left: calc(-0.25px * var(--size-base-spacing)) !important;
}

.-my-xxsmall {
  margin-top: calc(-0.25px * var(--size-base-spacing)) !important;
  margin-bottom: calc(-0.25px * var(--size-base-spacing)) !important;
}

.-mx-xxsmall {
  margin-right: calc(-0.25px * var(--size-base-spacing)) !important;
  margin-left: calc(-0.25px * var(--size-base-spacing)) !important;
}

.p-xsmall {
  padding: calc(0.5px * var(--size-base-spacing)) !important;
}

.pl-xsmall {
  padding-left: calc(0.5px * var(--size-base-spacing)) !important;
}

.pr-xsmall {
  padding-right: calc(0.5px * var(--size-base-spacing)) !important;
}

.pb-xsmall {
  padding-bottom: calc(0.5px * var(--size-base-spacing)) !important;
}

.pt-xsmall {
  padding-top: calc(0.5px * var(--size-base-spacing)) !important;
}

.py-xsmall {
  padding-top: calc(0.5px * var(--size-base-spacing)) !important;
  padding-bottom: calc(0.5px * var(--size-base-spacing)) !important;
}

.px-xsmall {
  padding-right: calc(0.5px * var(--size-base-spacing)) !important;
  padding-left: calc(0.5px * var(--size-base-spacing)) !important;
}

.m-xsmall {
  margin: calc(0.5px * var(--size-base-spacing)) !important;
}

.mt-xsmall {
  margin-top: calc(0.5px * var(--size-base-spacing)) !important;
}

.mr-xsmall {
  margin-right: calc(0.5px * var(--size-base-spacing)) !important;
}

.mb-xsmall {
  margin-bottom: calc(0.5px * var(--size-base-spacing)) !important;
}

.ml-xsmall {
  margin-left: calc(0.5px * var(--size-base-spacing)) !important;
}

.my-xsmall {
  margin-top: calc(0.5px * var(--size-base-spacing)) !important;
  margin-bottom: calc(0.5px * var(--size-base-spacing)) !important;
}

.mx-xsmall {
  margin-right: calc(0.5px * var(--size-base-spacing)) !important;
  margin-left: calc(0.5px * var(--size-base-spacing)) !important;
}

.-m-xsmall {
  margin: calc(-0.5px * var(--size-base-spacing)) !important;
}

.-mt-xsmall {
  margin-top: calc(-0.5px * var(--size-base-spacing)) !important;
}

.-mr-xsmall {
  margin-right: calc(-0.5px * var(--size-base-spacing)) !important;
}

.-mb-xsmall {
  margin-bottom: calc(-0.5px * var(--size-base-spacing)) !important;
}

.-ml-xsmall {
  margin-left: calc(-0.5px * var(--size-base-spacing)) !important;
}

.-my-xsmall {
  margin-top: calc(-0.5px * var(--size-base-spacing)) !important;
  margin-bottom: calc(-0.5px * var(--size-base-spacing)) !important;
}

.-mx-xsmall {
  margin-right: calc(-0.5px * var(--size-base-spacing)) !important;
  margin-left: calc(-0.5px * var(--size-base-spacing)) !important;
}

.p-small {
  padding: calc(1px * var(--size-base-spacing)) !important;
}

.pl-small {
  padding-left: calc(1px * var(--size-base-spacing)) !important;
}

.pr-small {
  padding-right: calc(1px * var(--size-base-spacing)) !important;
}

.pb-small {
  padding-bottom: calc(1px * var(--size-base-spacing)) !important;
}

.pt-small {
  padding-top: calc(1px * var(--size-base-spacing)) !important;
}

.py-small {
  padding-top: calc(1px * var(--size-base-spacing)) !important;
  padding-bottom: calc(1px * var(--size-base-spacing)) !important;
}

.px-small {
  padding-right: calc(1px * var(--size-base-spacing)) !important;
  padding-left: calc(1px * var(--size-base-spacing)) !important;
}

.m-small {
  margin: calc(1px * var(--size-base-spacing)) !important;
}

.mt-small {
  margin-top: calc(1px * var(--size-base-spacing)) !important;
}

.mr-small {
  margin-right: calc(1px * var(--size-base-spacing)) !important;
}

.mb-small {
  margin-bottom: calc(1px * var(--size-base-spacing)) !important;
}

.ml-small {
  margin-left: calc(1px * var(--size-base-spacing)) !important;
}

.my-small {
  margin-top: calc(1px * var(--size-base-spacing)) !important;
  margin-bottom: calc(1px * var(--size-base-spacing)) !important;
}

.mx-small {
  margin-right: calc(1px * var(--size-base-spacing)) !important;
  margin-left: calc(1px * var(--size-base-spacing)) !important;
}

.-m-small {
  margin: calc(-1px * var(--size-base-spacing)) !important;
}

.-mt-small {
  margin-top: calc(-1px * var(--size-base-spacing)) !important;
}

.-mr-small {
  margin-right: calc(-1px * var(--size-base-spacing)) !important;
}

.-mb-small {
  margin-bottom: calc(-1px * var(--size-base-spacing)) !important;
}

.-ml-small {
  margin-left: calc(-1px * var(--size-base-spacing)) !important;
}

.-my-small {
  margin-top: calc(-1px * var(--size-base-spacing)) !important;
  margin-bottom: calc(-1px * var(--size-base-spacing)) !important;
}

.-mx-small {
  margin-right: calc(-1px * var(--size-base-spacing)) !important;
  margin-left: calc(-1px * var(--size-base-spacing)) !important;
}

.p-medium {
  padding: calc(2px * var(--size-base-spacing)) !important;
}

.pl-medium {
  padding-left: calc(2px * var(--size-base-spacing)) !important;
}

.pr-medium {
  padding-right: calc(2px * var(--size-base-spacing)) !important;
}

.pb-medium {
  padding-bottom: calc(2px * var(--size-base-spacing)) !important;
}

.pt-medium {
  padding-top: calc(2px * var(--size-base-spacing)) !important;
}

.py-medium {
  padding-top: calc(2px * var(--size-base-spacing)) !important;
  padding-bottom: calc(2px * var(--size-base-spacing)) !important;
}

.px-medium {
  padding-right: calc(2px * var(--size-base-spacing)) !important;
  padding-left: calc(2px * var(--size-base-spacing)) !important;
}

.m-medium {
  margin: calc(2px * var(--size-base-spacing)) !important;
}

.mt-medium {
  margin-top: calc(2px * var(--size-base-spacing)) !important;
}

.mr-medium {
  margin-right: calc(2px * var(--size-base-spacing)) !important;
}

.mb-medium {
  margin-bottom: calc(2px * var(--size-base-spacing)) !important;
}

.ml-medium {
  margin-left: calc(2px * var(--size-base-spacing)) !important;
}

.my-medium {
  margin-top: calc(2px * var(--size-base-spacing)) !important;
  margin-bottom: calc(2px * var(--size-base-spacing)) !important;
}

.mx-medium {
  margin-right: calc(2px * var(--size-base-spacing)) !important;
  margin-left: calc(2px * var(--size-base-spacing)) !important;
}

.-m-medium {
  margin: calc(-2px * var(--size-base-spacing)) !important;
}

.-mt-medium {
  margin-top: calc(-2px * var(--size-base-spacing)) !important;
}

.-mr-medium {
  margin-right: calc(-2px * var(--size-base-spacing)) !important;
}

.-mb-medium {
  margin-bottom: calc(-2px * var(--size-base-spacing)) !important;
}

.-ml-medium {
  margin-left: calc(-2px * var(--size-base-spacing)) !important;
}

.-my-medium {
  margin-top: calc(-2px * var(--size-base-spacing)) !important;
  margin-bottom: calc(-2px * var(--size-base-spacing)) !important;
}

.-mx-medium {
  margin-right: calc(-2px * var(--size-base-spacing)) !important;
  margin-left: calc(-2px * var(--size-base-spacing)) !important;
}

.p-global {
  padding: calc(3px * var(--size-base-spacing)) !important;
}

.pl-global {
  padding-left: calc(3px * var(--size-base-spacing)) !important;
}

.pr-global {
  padding-right: calc(3px * var(--size-base-spacing)) !important;
}

.pb-global {
  padding-bottom: calc(3px * var(--size-base-spacing)) !important;
}

.pt-global {
  padding-top: calc(3px * var(--size-base-spacing)) !important;
}

.py-global {
  padding-top: calc(3px * var(--size-base-spacing)) !important;
  padding-bottom: calc(3px * var(--size-base-spacing)) !important;
}

.px-global {
  padding-right: calc(3px * var(--size-base-spacing)) !important;
  padding-left: calc(3px * var(--size-base-spacing)) !important;
}

.m-global {
  margin: calc(3px * var(--size-base-spacing)) !important;
}

.mt-global {
  margin-top: calc(3px * var(--size-base-spacing)) !important;
}

.mr-global {
  margin-right: calc(3px * var(--size-base-spacing)) !important;
}

.mb-global {
  margin-bottom: calc(3px * var(--size-base-spacing)) !important;
}

.ml-global {
  margin-left: calc(3px * var(--size-base-spacing)) !important;
}

.my-global {
  margin-top: calc(3px * var(--size-base-spacing)) !important;
  margin-bottom: calc(3px * var(--size-base-spacing)) !important;
}

.mx-global {
  margin-right: calc(3px * var(--size-base-spacing)) !important;
  margin-left: calc(3px * var(--size-base-spacing)) !important;
}

.-m-global {
  margin: calc(-3px * var(--size-base-spacing)) !important;
}

.-mt-global {
  margin-top: calc(-3px * var(--size-base-spacing)) !important;
}

.-mr-global {
  margin-right: calc(-3px * var(--size-base-spacing)) !important;
}

.-mb-global {
  margin-bottom: calc(-3px * var(--size-base-spacing)) !important;
}

.-ml-global {
  margin-left: calc(-3px * var(--size-base-spacing)) !important;
}

.-my-global {
  margin-top: calc(-3px * var(--size-base-spacing)) !important;
  margin-bottom: calc(-3px * var(--size-base-spacing)) !important;
}

.-mx-global {
  margin-right: calc(-3px * var(--size-base-spacing)) !important;
  margin-left: calc(-3px * var(--size-base-spacing)) !important;
}

.p-large {
  padding: calc(3px * var(--size-base-spacing)) !important;
}

.pl-large {
  padding-left: calc(3px * var(--size-base-spacing)) !important;
}

.pr-large {
  padding-right: calc(3px * var(--size-base-spacing)) !important;
}

.pb-large {
  padding-bottom: calc(3px * var(--size-base-spacing)) !important;
}

.pt-large {
  padding-top: calc(3px * var(--size-base-spacing)) !important;
}

.py-large {
  padding-top: calc(3px * var(--size-base-spacing)) !important;
  padding-bottom: calc(3px * var(--size-base-spacing)) !important;
}

.px-large {
  padding-right: calc(3px * var(--size-base-spacing)) !important;
  padding-left: calc(3px * var(--size-base-spacing)) !important;
}

.m-large {
  margin: calc(3px * var(--size-base-spacing)) !important;
}

.mt-large {
  margin-top: calc(3px * var(--size-base-spacing)) !important;
}

.mr-large {
  margin-right: calc(3px * var(--size-base-spacing)) !important;
}

.mb-large {
  margin-bottom: calc(3px * var(--size-base-spacing)) !important;
}

.ml-large {
  margin-left: calc(3px * var(--size-base-spacing)) !important;
}

.my-large {
  margin-top: calc(3px * var(--size-base-spacing)) !important;
  margin-bottom: calc(3px * var(--size-base-spacing)) !important;
}

.mx-large {
  margin-right: calc(3px * var(--size-base-spacing)) !important;
  margin-left: calc(3px * var(--size-base-spacing)) !important;
}

.-m-large {
  margin: calc(-3px * var(--size-base-spacing)) !important;
}

.-mt-large {
  margin-top: calc(-3px * var(--size-base-spacing)) !important;
}

.-mr-large {
  margin-right: calc(-3px * var(--size-base-spacing)) !important;
}

.-mb-large {
  margin-bottom: calc(-3px * var(--size-base-spacing)) !important;
}

.-ml-large {
  margin-left: calc(-3px * var(--size-base-spacing)) !important;
}

.-my-large {
  margin-top: calc(-3px * var(--size-base-spacing)) !important;
  margin-bottom: calc(-3px * var(--size-base-spacing)) !important;
}

.-mx-large {
  margin-right: calc(-3px * var(--size-base-spacing)) !important;
  margin-left: calc(-3px * var(--size-base-spacing)) !important;
}

.p-xlarge {
  padding: calc(3.5px * var(--size-base-spacing)) !important;
}

.pl-xlarge {
  padding-left: calc(3.5px * var(--size-base-spacing)) !important;
}

.pr-xlarge {
  padding-right: calc(3.5px * var(--size-base-spacing)) !important;
}

.pb-xlarge {
  padding-bottom: calc(3.5px * var(--size-base-spacing)) !important;
}

.pt-xlarge {
  padding-top: calc(3.5px * var(--size-base-spacing)) !important;
}

.py-xlarge {
  padding-top: calc(3.5px * var(--size-base-spacing)) !important;
  padding-bottom: calc(3.5px * var(--size-base-spacing)) !important;
}

.px-xlarge {
  padding-right: calc(3.5px * var(--size-base-spacing)) !important;
  padding-left: calc(3.5px * var(--size-base-spacing)) !important;
}

.m-xlarge {
  margin: calc(3.5px * var(--size-base-spacing)) !important;
}

.mt-xlarge {
  margin-top: calc(3.5px * var(--size-base-spacing)) !important;
}

.mr-xlarge {
  margin-right: calc(3.5px * var(--size-base-spacing)) !important;
}

.mb-xlarge {
  margin-bottom: calc(3.5px * var(--size-base-spacing)) !important;
}

.ml-xlarge {
  margin-left: calc(3.5px * var(--size-base-spacing)) !important;
}

.my-xlarge {
  margin-top: calc(3.5px * var(--size-base-spacing)) !important;
  margin-bottom: calc(3.5px * var(--size-base-spacing)) !important;
}

.mx-xlarge {
  margin-right: calc(3.5px * var(--size-base-spacing)) !important;
  margin-left: calc(3.5px * var(--size-base-spacing)) !important;
}

.-m-xlarge {
  margin: calc(-3.5px * var(--size-base-spacing)) !important;
}

.-mt-xlarge {
  margin-top: calc(-3.5px * var(--size-base-spacing)) !important;
}

.-mr-xlarge {
  margin-right: calc(-3.5px * var(--size-base-spacing)) !important;
}

.-mb-xlarge {
  margin-bottom: calc(-3.5px * var(--size-base-spacing)) !important;
}

.-ml-xlarge {
  margin-left: calc(-3.5px * var(--size-base-spacing)) !important;
}

.-my-xlarge {
  margin-top: calc(-3.5px * var(--size-base-spacing)) !important;
  margin-bottom: calc(-3.5px * var(--size-base-spacing)) !important;
}

.-mx-xlarge {
  margin-right: calc(-3.5px * var(--size-base-spacing)) !important;
  margin-left: calc(-3.5px * var(--size-base-spacing)) !important;
}

.p-xxlarge {
  padding: calc(4px * var(--size-base-spacing)) !important;
}

.pl-xxlarge {
  padding-left: calc(4px * var(--size-base-spacing)) !important;
}

.pr-xxlarge {
  padding-right: calc(4px * var(--size-base-spacing)) !important;
}

.pb-xxlarge {
  padding-bottom: calc(4px * var(--size-base-spacing)) !important;
}

.pt-xxlarge {
  padding-top: calc(4px * var(--size-base-spacing)) !important;
}

.py-xxlarge {
  padding-top: calc(4px * var(--size-base-spacing)) !important;
  padding-bottom: calc(4px * var(--size-base-spacing)) !important;
}

.px-xxlarge {
  padding-right: calc(4px * var(--size-base-spacing)) !important;
  padding-left: calc(4px * var(--size-base-spacing)) !important;
}

.m-xxlarge {
  margin: calc(4px * var(--size-base-spacing)) !important;
}

.mt-xxlarge {
  margin-top: calc(4px * var(--size-base-spacing)) !important;
}

.mr-xxlarge {
  margin-right: calc(4px * var(--size-base-spacing)) !important;
}

.mb-xxlarge {
  margin-bottom: calc(4px * var(--size-base-spacing)) !important;
}

.ml-xxlarge {
  margin-left: calc(4px * var(--size-base-spacing)) !important;
}

.my-xxlarge {
  margin-top: calc(4px * var(--size-base-spacing)) !important;
  margin-bottom: calc(4px * var(--size-base-spacing)) !important;
}

.mx-xxlarge {
  margin-right: calc(4px * var(--size-base-spacing)) !important;
  margin-left: calc(4px * var(--size-base-spacing)) !important;
}

.-m-xxlarge {
  margin: calc(-4px * var(--size-base-spacing)) !important;
}

.-mt-xxlarge {
  margin-top: calc(-4px * var(--size-base-spacing)) !important;
}

.-mr-xxlarge {
  margin-right: calc(-4px * var(--size-base-spacing)) !important;
}

.-mb-xxlarge {
  margin-bottom: calc(-4px * var(--size-base-spacing)) !important;
}

.-ml-xxlarge {
  margin-left: calc(-4px * var(--size-base-spacing)) !important;
}

.-my-xxlarge {
  margin-top: calc(-4px * var(--size-base-spacing)) !important;
  margin-bottom: calc(-4px * var(--size-base-spacing)) !important;
}

.-mx-xxlarge {
  margin-right: calc(-4px * var(--size-base-spacing)) !important;
  margin-left: calc(-4px * var(--size-base-spacing)) !important;
}

/**
* Do not edit directly. See style-dictionary/README.md for more information.
* Generated on Thu, 05 Jun 2025 17:37:15 GMT
*/
/**
* Do not edit directly. See style-dictionary/README.md for more information.
* Generated on Thu, 05 Jun 2025 17:37:16 GMT
*/
/**
* Do not edit directly. See style-dictionary/README.md for more information.
* Generated on Thu, 05 Jun 2025 17:37:15 GMT
*/
/**
* Do not edit directly. See style-dictionary/README.md for more information.
* Generated on Thu, 05 Jun 2025 17:37:16 GMT
*/
/**
* Do not edit directly. See style-dictionary/README.md for more information.
* Generated on Thu, 05 Jun 2025 17:37:15 GMT
*/
/**
* Do not edit directly. See style-dictionary/README.md for more information.
* Generated on Thu, 05 Jun 2025 17:37:16 GMT
*/
/** 
* set styles to both via the parent having the class or the unified child class
* e.g. .has-error.parent .child & .child.has-error 
**/
/** 
* Set styles for screen reader only text. Required to attain WCAG 2.1 compliance
**/
/** 
  @Warning: Do not nest row, wrap or column, the edge reset does not nest well. 
  Nested more complicated grids should use CSS grid instead.
**/
/**
* Do not edit directly. See style-dictionary/README.md for more information.
* Generated on Thu, 05 Jun 2025 17:37:15 GMT
*/
/**
* Do not edit directly. See style-dictionary/README.md for more information.
* Generated on Thu, 05 Jun 2025 17:37:16 GMT
*/
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes scaleIn {
  0% {
    transform: scale(0.65);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes scaleOut {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes microSlideInLeft {
  0% {
    transform: translateX(-4px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slideInTop {
  0% {
    transform: translateY(-16px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes pulse {
  0% {
    transform: scale(0.95);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
  100% {
    transform: scale(0.95);
    opacity: 0.7;
  }
}
@keyframes subtleShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
/* ---------------BUTTONS------------------------*/
/*
  Customizable vars, these are not set by default, and will utilize the fallback value unless set
  --size-select-input-width 
  --size-select-tag-width
  --size-select-tags-container-width
*/
/* 
* ONLY for Non-Native select implementations
*/
/*
  Customizable vars, these are not set by default, and will utilize the fallback value unless set
  --size-select-input-width 
  --size-select-content-width
*/
/* ---------------TOOLBAR BUTTON------------------------*/
:root .text-h1,
:host(*) .text-h1 {
  font-family: var(--font-family), "Helvetica Neue", Helvetica, Lucida Grande, sans-serif;
  font-weight: var(--size-font-h1-weight);
  font-size: var(--size-font-h1-base);
  line-height: var(--size-font-h1-height);
}
:root .text-h2,
:host(*) .text-h2 {
  font-family: var(--font-family), "Helvetica Neue", Helvetica, Lucida Grande, sans-serif;
  font-weight: var(--size-font-h2-weight);
  font-size: var(--size-font-h2-base);
  line-height: var(--size-font-h2-height);
}
:root .text-h3,
:host(*) .text-h3 {
  font-family: var(--font-family), "Helvetica Neue", Helvetica, Lucida Grande, sans-serif;
  font-weight: var(--size-font-h3-weight);
  font-size: var(--size-font-h3-base);
  line-height: var(--size-font-h3-height);
}
:root .text-h4,
:host(*) .text-h4 {
  font-family: var(--font-family), "Helvetica Neue", Helvetica, Lucida Grande, sans-serif;
  font-weight: var(--size-font-h4-weight);
  font-size: var(--size-font-h4-base);
  line-height: var(--size-font-h4-height);
  letter-spacing: var(--size-font-h4-spacing);
}
:root .text-h5,
:host(*) .text-h5 {
  font-family: var(--font-family), "Helvetica Neue", Helvetica, Lucida Grande, sans-serif;
  font-weight: var(--size-font-h5-weight);
  font-size: var(--size-font-h5-base);
  line-height: var(--size-font-h5-height);
  letter-spacing: var(--size-font-h5-spacing);
}
:root .text-h6,
:host(*) .text-h6 {
  font-family: var(--font-family), "Helvetica Neue", Helvetica, Lucida Grande, sans-serif;
  font-weight: var(--size-font-h6-weight);
  font-size: var(--size-font-h6-base);
  line-height: var(--size-font-h6-height);
  letter-spacing: var(--size-font-h6-spacing);
}
:root .text-paragraph-large,
:host(*) .text-paragraph-large {
  font-family: var(--font-family), "Helvetica Neue", Helvetica, Lucida Grande, sans-serif;
  font-weight: var(--size-font-paragraph-large-weight);
  font-size: var(--size-font-paragraph-large-base);
  line-height: var(--size-font-paragraph-large-height);
  letter-spacing: var(--size-font-paragraph-large-spacing);
}
:root .text-paragraph-small,
:host(*) .text-paragraph-small {
  font-family: var(--font-family), "Helvetica Neue", Helvetica, Lucida Grande, sans-serif;
  font-weight: var(--size-font-weight-normal);
  font-size: var(--size-font-paragraph-small-base);
  line-height: var(--size-font-paragraph-small-height);
  letter-spacing: var(--size-font-paragraph-small-spacing);
}
:root .text-paragraph,
:host(*) .text-paragraph {
  font-family: var(--font-family), "Helvetica Neue", Helvetica, Lucida Grande, sans-serif;
  font-weight: var(--size-font-weight-normal);
  font-size: var(--size-font-paragraph-base);
  line-height: var(--size-font-paragraph-height);
  letter-spacing: var(--size-font-paragraph-spacing);
  color: var(--color-font-secondary);
}
:root .text-subtitle,
:host(*) .text-subtitle {
  font-family: var(--font-family), "Helvetica Neue", Helvetica, Lucida Grande, sans-serif;
  font-weight: var(--size-font-weight-normal);
  font-size: var(--size-font-subtitle-base);
  line-height: var(--size-font-subtitle-height);
  letter-spacing: var(--size-font-subtitle-spacing);
}
:root .as-card,
:host(*) .as-card {
  --size-card-spacing: var(--size-card-spacing-custom, calc(2px * var(--size-base-spacing)));
  --size-card-spacing-half: var(
    --size-card-spacing-half-custom,
    calc(1px * var(--size-base-spacing))
  );
  border-radius: var(--size-border-radius-base);
  font-family: var(--font-family), "Helvetica Neue", Helvetica, Lucida Grande, sans-serif;
  font-weight: var(--size-font-weight-normal);
  border: var(--size-border-width-base) solid var(--color-border-base);
  display: flex;
  flex-direction: column;
  background-color: var(--color-card-base);
  box-sizing: border-box;
  max-width: 100%;
}
:root .as-card.is-compact,
:host(*) .as-card.is-compact {
  --size-card-spacing: calc(1px * var(--size-base-spacing));
  --size-card-spacing-half: calc(0.5px * var(--size-base-spacing));
}
:root .as-card.image-rounded-top > img:first-child,
:host(*) .as-card.image-rounded-top > img:first-child {
  border-top-left-radius: var(--size-border-radius-base);
  border-top-right-radius: var(--size-border-radius-base);
}
:root .as-card.image-rounded-bottom > img:last-child,
:host(*) .as-card.image-rounded-bottom > img:last-child {
  border-bottom-left-radius: var(--size-border-radius-base);
  border-bottom-right-radius: var(--size-border-radius-base);
}
:root .as-card.image-center > img:only-child,
:host(*) .as-card.image-center > img:only-child {
  padding-top: var(--size-card-spacing);
}
:root .as-card.is-actionable,
:host(*) .as-card.is-actionable {
  transition-property: border, box-shadow;
  transition-duration: 200ms;
  transition-timing-function: linear;
  transition-delay: 0s;
  cursor: pointer;
}
:root .as-card.is-actionable:focus, :root .as-card.is-actionable:active,
:host(*) .as-card.is-actionable:focus,
:host(*) .as-card.is-actionable:active {
  transition-property: all;
  transition-duration: 200ms;
  transition-timing-function: linear;
  transition-delay: 0s;
  outline: none;
  box-shadow: var(--color-focus-secondary) 0px 0px 0px 2px, var(--color-focus-base) 0px 0px 0px 4px;
  box-shadow: var(--size-shadow-action) var(--color-shadow-base);
  border-color: var(--color-focus-base);
}
:root .as-card.is-actionable:hover,
:host(*) .as-card.is-actionable:hover {
  box-shadow: var(--size-shadow-action) var(--color-shadow-base);
}
:root .as-card-icon,
:host(*) .as-card-icon {
  width: calc(var(--size-base-items) * 3px) !important;
  height: calc(var(--size-base-items) * 3px) !important;
  color: inherit;
}
:root .as-card-icon.success,
:host(*) .as-card-icon.success {
  color: var(--color-success-base);
}
:root .as-card-icon.warning,
:host(*) .as-card-icon.warning {
  color: var(--color-warning-base);
}
:root .as-card-icon.danger,
:host(*) .as-card-icon.danger {
  color: var(--color-danger-base);
}
:root .as-card-icon.info,
:host(*) .as-card-icon.info {
  color: var(--color-info-base);
}
:root .as-card .divider,
:host(*) .as-card .divider {
  background: var(--color-border-secondary);
  min-height: 1px;
  --size-divider-spacing: calc(2px * var(--size-base-spacing));
}
:root .as-card .divider.top,
:host(*) .as-card .divider.top {
  margin-top: var(--size-divider-spacing);
}
:root .as-card .divider.bottom,
:host(*) .as-card .divider.bottom {
  margin-bottom: var(--size-divider-spacing);
}
:root .as-card .divider.success,
:host(*) .as-card .divider.success {
  background: var(--color-success-base);
}
:root .as-card .divider.warning,
:host(*) .as-card .divider.warning {
  background: var(--color-warning-base);
}
:root .as-card .divider.danger,
:host(*) .as-card .divider.danger {
  background: var(--color-danger-base);
}
:root .as-card .divider.info,
:host(*) .as-card .divider.info {
  background: var(--color-info-base);
}
:root .as-card-actions,
:host(*) .as-card-actions {
  display: grid;
  gap: calc(1px * var(--size-base-spacing));
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
}
:root .as-card-header,
:host(*) .as-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--size-card-header-spacing, var(--size-card-spacing) var(--size-card-spacing) 0);
  background: var(--color-card-header, transparent);
}
:root .as-card-header + img,
:host(*) .as-card-header + img {
  padding-top: var(--size-card-spacing);
}
:root .as-card-header .header-title,
:host(*) .as-card-header .header-title {
  align-self: var(--card-header-title-align, center);
}
:root .as-card-header .header-action,
:host(*) .as-card-header .header-action {
  align-self: var(--card-header-action-align, center);
}
:root .as-card-title,
:host(*) .as-card-title {
  margin: 0;
  line-height: 30px;
}
:root .as-card-helper-text,
:host(*) .as-card-helper-text {
  font-family: var(--font-family), "Helvetica Neue", Helvetica, Lucida Grande, sans-serif;
  font-weight: var(--size-font-weight-normal);
  font-size: var(--size-font-helper-base);
  line-height: var(--size-font-helper-height);
  letter-spacing: var(--size-font-helper-spacing);
  color: var(--color-font-secondary);
  display: block;
  padding: var(--size-card-helper-text-spacing, 0 var(--size-card-spacing) 0);
  margin-top: -4px;
}
:root .as-card-helper-text + img,
:host(*) .as-card-helper-text + img {
  padding-top: var(--size-card-spacing);
}
:root .as-card-body,
:host(*) .as-card-body {
  padding: var(--size-card-body-horizontal-spacing, 0 var(--size-card-spacing));
  margin: var(--size-card-body-vertical-spacing, var(--size-card-spacing) 0);
  max-width: 100vw;
  word-wrap: break-word;
  box-sizing: border-box;
}
:root .as-card-body.has-overflow-auto,
:host(*) .as-card-body.has-overflow-auto {
  overflow: var(--card-body-overflow, auto);
}
:root .as-card-body.has-top-divider,
:host(*) .as-card-body.has-top-divider {
  padding-top: var(--size-card-body-vertical-spacing, var(--size-card-spacing));
  margin-top: 0;
}
:root .as-card-body.has-bottom-divider,
:host(*) .as-card-body.has-bottom-divider {
  padding-bottom: var(--size-card-body-vertical-spacing, var(--size-card-spacing));
  margin-bottom: 0;
}
:root .as-card-body:focus,
:host(*) .as-card-body:focus {
  outline: none;
}
:root .as-card-footer,
:host(*) .as-card-footer {
  padding: var(--size-card-footer-spacing, 0 var(--size-card-spacing) var(--size-card-spacing-half));
  justify-content: space-between;
  background: var(--color-card-footer, transparent);
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-right: calc(-1 * var(--size-card-spacing-half));
}
:root .as-card-footer > *,
:host(*) .as-card-footer > * {
  flex: 0 0 auto;
  margin: 0 var(--size-card-spacing-half) var(--size-card-spacing-half) 0;
}
:root .as-card-footer.left,
:host(*) .as-card-footer.left {
  justify-content: flex-start;
}
:root .as-card-footer.right,
:host(*) .as-card-footer.right {
  justify-content: flex-end;
}
:root .as-card-footer .right-action,
:root .as-card-footer .left-action,
:host(*) .as-card-footer .right-action,
:host(*) .as-card-footer .left-action {
  width: fit-content;
}
:root .as-button,
:host(*) .as-button {
  font-family: var(--font-family), "Helvetica Neue", Helvetica, Lucida Grande, sans-serif;
  font-weight: var(--size-font-weight-normal);
  font-size: var(--size-font-action-base);
  line-height: var(--size-font-action-height);
  letter-spacing: var(--size-font-action-spacing);
  cursor: pointer;
  width: fit-content;
  box-sizing: border-box;
  transition-property: background-color, box-shadow, border;
  transition-duration: 200ms;
  transition-timing-function: linear;
  transition-delay: 0s;
  background-color: var(--color-action-secondary-base);
  color: var(--color-font-base);
  border-radius: var(--size-border-radius-action-base);
  padding: var(--size-action-padding-base, calc(1px * var(--size-base-spacing)) calc(2px * var(--size-base-spacing)));
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
:root .as-button svg,
:root .as-button .leading,
:root .as-button .trailing,
:host(*) .as-button svg,
:host(*) .as-button .leading,
:host(*) .as-button .trailing {
  fill: currentColor;
  box-sizing: content-box;
}
:root .as-button:focus, :root .as-button:hover,
:host(*) .as-button:focus,
:host(*) .as-button:hover {
  text-decoration: none;
}
:root .as-button.is-disabled, :root .as-button:disabled,
:host(*) .as-button.is-disabled,
:host(*) .as-button:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}
:root .as-button:hover:not(:disabled):not(.is-disabled), :root .as-button:active:not(:disabled):not(.is-disabled),
:host(*) .as-button:hover:not(:disabled):not(.is-disabled),
:host(*) .as-button:active:not(:disabled):not(.is-disabled) {
  background-color: var(--color-action-secondary-active);
}
:root .as-button:active:not(:disabled):not(.is-disabled),
:host(*) .as-button:active:not(:disabled):not(.is-disabled) {
  box-shadow: none;
}
:root .as-button:focus:not(:disabled),
:host(*) .as-button:focus:not(:disabled) {
  transition-property: all;
  transition-duration: 200ms;
  transition-timing-function: linear;
  transition-delay: 0s;
  outline: none;
  box-shadow: var(--color-focus-secondary) 0px 0px 0px 2px, var(--color-focus-base) 0px 0px 0px 4px;
}
:root .as-button.small,
:host(*) .as-button.small {
  padding: var(--size-action-padding-base, calc(0.5px * var(--size-base-spacing)) calc(1px * var(--size-base-spacing)));
}
:root .as-button.full-width,
:host(*) .as-button.full-width {
  width: 100%;
}
:root .as-button.is-loading.with-icon-only .leading,
:host(*) .as-button.is-loading.with-icon-only .leading {
  display: none;
}
:root .as-button.is-loading:not(.with-icon-only),
:host(*) .as-button.is-loading:not(.with-icon-only) {
  padding-right: calc(1px * var(--size-base-spacing));
}
:root .as-button.is-loading:not(.with-icon-only) *:global(.spinner),
:host(*) .as-button.is-loading:not(.with-icon-only) *:global(.spinner) {
  margin-left: calc(1px * var(--size-base-spacing));
}
:root .as-button.is-loading:not(.with-icon-only) .spinner,
:host(*) .as-button.is-loading:not(.with-icon-only) .spinner {
  margin-left: calc(1px * var(--size-base-spacing));
}
:root .as-button.with-icon-only,
:host(*) .as-button.with-icon-only {
  border-radius: var(--size-border-radius-action-icon-only);
  justify-content: center;
}
:root .as-button.with-icon-only:not(.small),
:host(*) .as-button.with-icon-only:not(.small) {
  width: var(--size-action-height-base);
  max-width: var(--size-action-height-base);
  min-width: var(--size-action-height-base);
  height: var(--size-action-height-base);
  max-height: var(--size-action-height-base);
  min-height: var(--size-action-height-base);
  padding: var(--size-action-padding-icon-only, calc(1px * var(--size-base-spacing)));
}
:root .as-button.with-icon-only *:global(.spinner),
:host(*) .as-button.with-icon-only *:global(.spinner) {
  margin: 0;
}
:root .as-button.with-icon-only .spinner,
:host(*) .as-button.with-icon-only .spinner {
  margin: 0;
}
:root .as-button.has-leading-icon span, :root .as-button.has-leading-icon .label,
:host(*) .as-button.has-leading-icon span,
:host(*) .as-button.has-leading-icon .label {
  margin-left: calc(1px * var(--size-base-spacing));
}
:root .as-button.has-trailing-icon span, :root .as-button.has-trailing-icon .label,
:host(*) .as-button.has-trailing-icon span,
:host(*) .as-button.has-trailing-icon .label {
  margin-right: calc(1px * var(--size-base-spacing));
}
:root .as-button svg,
:root .as-button .leading,
:root .as-button .trailing,
:root .as-button .spinner,
:host(*) .as-button svg,
:host(*) .as-button .leading,
:host(*) .as-button .trailing,
:host(*) .as-button .spinner {
  width: calc(var(--size-base-items) * 2px);
}
:root .as-button *:global(.spinner),
:host(*) .as-button *:global(.spinner) {
  width: calc(var(--size-base-items) * 3px);
  margin: -4px 0 -3px 0;
}
:root .as-button .spinner,
:host(*) .as-button .spinner {
  width: calc(var(--size-base-items) * 3px);
  margin: -4px 0 -3px 0;
}
:root .as-button.primary,
:host(*) .as-button.primary {
  background-color: var(--color-action-primary-base);
  color: var(--color-font-inverse);
  border: var(--size-border-width-base) solid var(--color-action-primary-base);
}
:root .as-button.primary:hover:not(:disabled):not(.is-disabled), :root .as-button.primary:active:not(:disabled):not(.is-disabled),
:host(*) .as-button.primary:hover:not(:disabled):not(.is-disabled),
:host(*) .as-button.primary:active:not(:disabled):not(.is-disabled) {
  background-color: var(--color-action-primary-active);
}
:root .as-button.primary:active:not(:disabled):not(.is-disabled),
:host(*) .as-button.primary:active:not(:disabled):not(.is-disabled) {
  box-shadow: none;
}
:root .as-button.primary:hover:not(:disabled):not(.is-disabled), :root .as-button.primary:active:not(:disabled):not(.is-disabled),
:host(*) .as-button.primary:hover:not(:disabled):not(.is-disabled),
:host(*) .as-button.primary:active:not(:disabled):not(.is-disabled) {
  background-color: var(--color-action-primary-active);
  border-color: var(--color-action-primary-active);
}
:root .as-button.secondary,
:host(*) .as-button.secondary {
  background-color: var(--color-action-secondary-base);
  color: var(--color-font-base);
  border: var(--size-border-width-base) solid var(--color-border-neutral-base);
}
:root .as-button.secondary:hover:not(:disabled):not(.is-disabled), :root .as-button.secondary:active:not(:disabled):not(.is-disabled),
:host(*) .as-button.secondary:hover:not(:disabled):not(.is-disabled),
:host(*) .as-button.secondary:active:not(:disabled):not(.is-disabled) {
  background-color: var(--color-action-secondary-active);
}
:root .as-button.secondary:active:not(:disabled):not(.is-disabled),
:host(*) .as-button.secondary:active:not(:disabled):not(.is-disabled) {
  box-shadow: none;
}
:root .as-button.danger,
:host(*) .as-button.danger {
  background-color: var(--color-action-danger-base);
  color: var(--color-font-inverse);
  border: var(--size-border-width-base) solid var(--color-action-danger-base);
}
:root .as-button.danger:hover:not(:disabled):not(.is-disabled), :root .as-button.danger:active:not(:disabled):not(.is-disabled),
:host(*) .as-button.danger:hover:not(:disabled):not(.is-disabled),
:host(*) .as-button.danger:active:not(:disabled):not(.is-disabled) {
  background-color: var(--color-action-danger-active);
}
:root .as-button.danger:active:not(:disabled):not(.is-disabled),
:host(*) .as-button.danger:active:not(:disabled):not(.is-disabled) {
  box-shadow: none;
}
:root .as-button.danger:hover:not(:disabled):not(.is-disabled), :root .as-button.danger:active:not(:disabled):not(.is-disabled),
:host(*) .as-button.danger:hover:not(:disabled):not(.is-disabled),
:host(*) .as-button.danger:active:not(:disabled):not(.is-disabled) {
  background-color: var(--color-action-danger-active);
  border-color: var(--color-action-danger-active);
}
:root .as-button.ghost,
:host(*) .as-button.ghost {
  background-color: var(--color-action-ghost-base);
  color: var(--color-font-base);
  border: var(--size-border-width-base) solid transparent;
  box-shadow: none;
}
:root .as-button.ghost:hover:not(:disabled):not(.is-disabled), :root .as-button.ghost:active:not(:disabled):not(.is-disabled),
:host(*) .as-button.ghost:hover:not(:disabled):not(.is-disabled),
:host(*) .as-button.ghost:active:not(:disabled):not(.is-disabled) {
  background-color: var(--color-action-ghost-active);
}
:root .as-button.ghost:active:not(:disabled):not(.is-disabled),
:host(*) .as-button.ghost:active:not(:disabled):not(.is-disabled) {
  box-shadow: none;
}
:root .as-button.ghost:focus:not(:disabled),
:host(*) .as-button.ghost:focus:not(:disabled) {
  background-color: var(--color-action-ghost-focus);
}
:root .as-button.ghost:hover:not(:disabled):not(:active),
:host(*) .as-button.ghost:hover:not(:disabled):not(:active) {
  border: var(--size-border-width-base) solid var(--color-border-neutral-base);
}
:root .as-button.ghost-primary,
:host(*) .as-button.ghost-primary {
  background-color: var(--color-action-ghost-base);
  color: var(--color-font-link-base);
  border: var(--size-border-width-base) solid transparent;
  box-shadow: none;
}
:root .as-button.ghost-primary:hover:not(:disabled):not(.is-disabled), :root .as-button.ghost-primary:active:not(:disabled):not(.is-disabled),
:host(*) .as-button.ghost-primary:hover:not(:disabled):not(.is-disabled),
:host(*) .as-button.ghost-primary:active:not(:disabled):not(.is-disabled) {
  background-color: var(--color-action-ghost-active);
}
:root .as-button.ghost-primary:active:not(:disabled):not(.is-disabled),
:host(*) .as-button.ghost-primary:active:not(:disabled):not(.is-disabled) {
  box-shadow: none;
}
:root .as-button.ghost-primary:focus:not(:disabled),
:host(*) .as-button.ghost-primary:focus:not(:disabled) {
  background-color: var(--color-action-ghost-focus);
}
:root .as-button.ghost-primary:hover:not(:disabled):not(:active),
:host(*) .as-button.ghost-primary:hover:not(:disabled):not(:active) {
  border: var(--size-border-width-base) solid var(--color-border-primary-base);
}
:root .as-button.ghost-danger,
:host(*) .as-button.ghost-danger {
  background-color: var(--color-action-ghost-base);
  color: var(--color-font-danger);
  border: var(--size-border-width-base) solid transparent;
  box-shadow: none;
}
:root .as-button.ghost-danger:hover:not(:disabled):not(.is-disabled), :root .as-button.ghost-danger:active:not(:disabled):not(.is-disabled),
:host(*) .as-button.ghost-danger:hover:not(:disabled):not(.is-disabled),
:host(*) .as-button.ghost-danger:active:not(:disabled):not(.is-disabled) {
  background-color: var(--color-action-ghost-active);
}
:root .as-button.ghost-danger:active:not(:disabled):not(.is-disabled),
:host(*) .as-button.ghost-danger:active:not(:disabled):not(.is-disabled) {
  box-shadow: none;
}
:root .as-button.ghost-danger:focus:not(:disabled),
:host(*) .as-button.ghost-danger:focus:not(:disabled) {
  background-color: var(--color-action-ghost-focus);
}
:root .as-button.ghost-danger:hover:not(:disabled):not(:active),
:host(*) .as-button.ghost-danger:hover:not(:disabled):not(:active) {
  border: var(--size-border-width-base) solid var(--color-border-danger-base);
}
:root .as-button.simple:not(.as-button), :root .as-button.link:not(.as-button),
:host(*) .as-button.simple:not(.as-button),
:host(*) .as-button.link:not(.as-button) {
  background-color: var(--color-action-ghost-base);
  color: var(--color-font-link-base);
  border: var(--size-border-width-base) solid transparent;
  box-shadow: none;
  padding: 0px calc(0.25px * var(--size-base-spacing));
  border-radius: var(--size-border-radius-base);
  height: fit-content;
  border: none !important;
}
:root .as-button.simple:not(.as-button):hover:not(:disabled):not(.is-disabled), :root .as-button.simple:not(.as-button):active:not(:disabled):not(.is-disabled), :root .as-button.link:not(.as-button):hover:not(:disabled):not(.is-disabled), :root .as-button.link:not(.as-button):active:not(:disabled):not(.is-disabled),
:host(*) .as-button.simple:not(.as-button):hover:not(:disabled):not(.is-disabled),
:host(*) .as-button.simple:not(.as-button):active:not(:disabled):not(.is-disabled),
:host(*) .as-button.link:not(.as-button):hover:not(:disabled):not(.is-disabled),
:host(*) .as-button.link:not(.as-button):active:not(:disabled):not(.is-disabled) {
  background-color: var(--color-action-ghost-active);
}
:root .as-button.simple:not(.as-button):active:not(:disabled):not(.is-disabled), :root .as-button.link:not(.as-button):active:not(:disabled):not(.is-disabled),
:host(*) .as-button.simple:not(.as-button):active:not(:disabled):not(.is-disabled),
:host(*) .as-button.link:not(.as-button):active:not(:disabled):not(.is-disabled) {
  box-shadow: none;
}
:root .as-button.simple:not(.as-button):focus:not(:disabled), :root .as-button.link:not(.as-button):focus:not(:disabled),
:host(*) .as-button.simple:not(.as-button):focus:not(:disabled),
:host(*) .as-button.link:not(.as-button):focus:not(:disabled) {
  background-color: var(--color-action-ghost-focus);
}
:root .as-button.simple:not(.as-button):hover:not(:disabled):not(:active), :root .as-button.link:not(.as-button):hover:not(:disabled):not(:active),
:host(*) .as-button.simple:not(.as-button):hover:not(:disabled):not(:active),
:host(*) .as-button.link:not(.as-button):hover:not(:disabled):not(:active) {
  border: var(--size-border-width-base) solid var(--color-border-neutral-base);
}
:root .as-button.simple:not(.as-button):hover:not(:disabled):not(:focus):not(:active), :root .as-button.link:not(.as-button):hover:not(:disabled):not(:focus):not(:active),
:host(*) .as-button.simple:not(.as-button):hover:not(:disabled):not(:focus):not(:active),
:host(*) .as-button.link:not(.as-button):hover:not(:disabled):not(:focus):not(:active) {
  box-shadow: none !important;
}
:root .as-button.simple:not(.as-button):hover:not(:disabled):active, :root .as-button.link:not(.as-button):hover:not(:disabled):active,
:host(*) .as-button.simple:not(.as-button):hover:not(:disabled):active,
:host(*) .as-button.link:not(.as-button):hover:not(:disabled):active {
  background-color: var(--color-action-ghost-base);
}
:root .as-button.simple:not(.as-button):hover:not(:disabled):not(:active), :root .as-button.simple:not(.as-button):focus:not(:disabled), :root .as-button.link:not(.as-button):hover:not(:disabled):not(:active), :root .as-button.link:not(.as-button):focus:not(:disabled),
:host(*) .as-button.simple:not(.as-button):hover:not(:disabled):not(:active),
:host(*) .as-button.simple:not(.as-button):focus:not(:disabled),
:host(*) .as-button.link:not(.as-button):hover:not(:disabled):not(:active),
:host(*) .as-button.link:not(.as-button):focus:not(:disabled) {
  background-color: var(--color-action-ghost-base);
  color: var(--color-action-primary-active);
}
:root .as-button.simple:not(.as-button):active, :root .as-button.link:not(.as-button):active,
:host(*) .as-button.simple:not(.as-button):active,
:host(*) .as-button.link:not(.as-button):active {
  background-color: var(--color-action-ghost-base);
}
:root .as-button.link:not(.as-button):hover,
:host(*) .as-button.link:not(.as-button):hover {
  text-decoration: underline;
}
:root .as-button:not(.small),
:host(*) .as-button:not(.small) {
  height: var(--size-action-height-base);
}
:root .as-button.unstyled:not(.as-button),
:host(*) .as-button.unstyled:not(.as-button) {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  height: fit-content;
}
:root .as-button.unstyled:not(.as-button):hover:not(:disabled):not(:focus):not(:active),
:host(*) .as-button.unstyled:not(.as-button):hover:not(:disabled):not(:focus):not(:active) {
  background-color: unset;
}
:root .as-button.unstyled:not(.as-button):focus:not(:disabled),
:host(*) .as-button.unstyled:not(.as-button):focus:not(:disabled) {
  background-color: unset;
}
:root .as-border-list,
:host(*) .as-border-list {
  display: flex;
  flex-direction: column;
}
:root .as-border-list > *,
:host(*) .as-border-list > * {
  padding: calc(1px * var(--size-base-spacing)) 0;
  border-bottom: 1px solid var(--color-border-base);
  display: flex;
  justify-content: space-between;
}
:root .as-border-list > *:last-of-type,
:host(*) .as-border-list > *:last-of-type {
  border-bottom: none;
}
:root .color-font-base,
:host(*) .color-font-base {
  color: var(--color-font-base) !important;
}
:root .color-font-secondary,
:host(*) .color-font-secondary {
  color: var(--color-font-secondary) !important;
}
:root .color-font-tertiary,
:host(*) .color-font-tertiary {
  color: var(--color-font-tertiary) !important;
}
:root .bg-structure-base,
:host(*) .bg-structure-base {
  background: var(--color-structure-base) !important;
}
:root .bg-structure-secondary,
:host(*) .bg-structure-secondary {
  background: var(--color-structure-secondary) !important;
}
:root .bg-structure-tertiary,
:host(*) .bg-structure-tertiary {
  background: var(--color-structure-tertiary) !important;
}
:root .sr-only,
:host(*) .sr-only {
  position: absolute;
  height: 1px;
  width: 1px;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
  -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
  overflow: hidden !important;
}
:root .h-full,
:host(*) .h-full {
  height: 100%;
}
:root .w-full,
:host(*) .w-full {
  width: 100%;
}
:root .children-100 > *,
:host(*) .children-100 > * {
  height: 100%;
}
:root .children-100 > jamf-card-v5-11-2::part(card),
:host(*) .children-100 > jamf-card-v5-11-2::part(card) {
  height: 100%;
}
:root .rounded,
:host(*) .rounded {
  border-radius: var(--size-border-radius-base);
}
:root .rounded-small,
:host(*) .rounded-small {
  border-radius: var(--size-border-radius-small);
}
:root .rounded-full,
:host(*) .rounded-full {
  border-radius: var(--size-border-radius-full);
}
:root .input-alternate-border::part(input),
:host(*) .input-alternate-border::part(input) {
  border-color: var(--color-border-base);
}
:root .monospace-font,
:host(*) .monospace-font {
  font-family: var(--font-family-monospace), monospace;
  font-weight: var(--size-font-weight-normal);
}

/**
* Do not edit directly. See style-dictionary/README.md for more information.
* Generated on Thu, 05 Jun 2025 17:37:15 GMT
*/
/**
* Do not edit directly. See style-dictionary/README.md for more information.
* Generated on Thu, 05 Jun 2025 17:37:16 GMT
*/
/**
* Do not edit directly. See style-dictionary/README.md for more information.
* Generated on Thu, 05 Jun 2025 17:37:15 GMT
*/
/**
* Do not edit directly. See style-dictionary/README.md for more information.
* Generated on Thu, 05 Jun 2025 17:37:16 GMT
*/
/**
* Do not edit directly. See style-dictionary/README.md for more information.
* Generated on Thu, 05 Jun 2025 17:37:15 GMT
*/
/**
* Do not edit directly. See style-dictionary/README.md for more information.
* Generated on Thu, 05 Jun 2025 17:37:16 GMT
*/
/** 
* set styles to both via the parent having the class or the unified child class
* e.g. .has-error.parent .child & .child.has-error 
**/
/** 
* Set styles for screen reader only text. Required to attain WCAG 2.1 compliance
**/
/** 
  @Warning: Do not nest row, wrap or column, the edge reset does not nest well. 
  Nested more complicated grids should use CSS grid instead.
**/
/**
* Do not edit directly. See style-dictionary/README.md for more information.
* Generated on Thu, 05 Jun 2025 17:37:15 GMT
*/
/**
* Do not edit directly. See style-dictionary/README.md for more information.
* Generated on Thu, 05 Jun 2025 17:37:16 GMT
*/
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes scaleIn {
  0% {
    transform: scale(0.65);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes scaleOut {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes microSlideInLeft {
  0% {
    transform: translateX(-4px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slideInTop {
  0% {
    transform: translateY(-16px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes pulse {
  0% {
    transform: scale(0.95);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
  100% {
    transform: scale(0.95);
    opacity: 0.7;
  }
}
@keyframes subtleShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
/* ---------------BUTTONS------------------------*/
/*
  Customizable vars, these are not set by default, and will utilize the fallback value unless set
  --size-select-input-width 
  --size-select-tag-width
  --size-select-tags-container-width
*/
/* 
* ONLY for Non-Native select implementations
*/
/*
  Customizable vars, these are not set by default, and will utilize the fallback value unless set
  --size-select-input-width 
  --size-select-content-width
*/
/* ---------------TOOLBAR BUTTON------------------------*/
.jamf-app-layout {
  display: grid;
  gap: 0;
  grid-template-areas: "topnav topnav" "sidenav content";
  grid-template-rows: var(--size-navigation-top) 100%;
  grid-template-columns: var(--size-navigation-side) auto;
  overflow: hidden;
  position: relative;
  height: 100vh;
  transition: 200ms;
  background: var(--color-structure-base);
}
.jamf-app-layout:has(.jamf-side-nav[data-collapsed=true]) {
  grid-template-columns: var(--size-navigation-side-collapsed) auto;
}
.jamf-app-layout .jamf-side-nav {
  grid-area: sidenav;
  height: calc(100vh - var(--size-navigation-top));
}
@media only screen and (max-width: 1280px) {
  .jamf-app-layout .jamf-side-nav {
    height: calc(100svh - var(--size-navigation-top));
  }
}
.jamf-app-layout .jamf-top-nav {
  grid-area: topnav;
  z-index: 10;
}
.jamf-app-layout .jamf-main-content {
  grid-area: content;
  overflow-y: auto;
  height: calc(100vh - var(--size-navigation-top));
}
@media only screen and (max-width: 1280px) {
  .jamf-app-layout .jamf-main-content {
    height: calc(100svh - var(--size-navigation-top));
  }
}
@media only screen and (max-width: 812px) {
  .jamf-app-layout {
    grid-template-areas: "topnav" "content";
    grid-template-columns: 100%;
  }
  .jamf-app-layout .jamf-side-nav:not(.custom-mobile-layout) {
    position: absolute;
    top: var(--size-navigation-top);
    opacity: 0;
    left: calc(-1 * var(--size-navigation-side));
    transition: all 200ms;
  }
  .jamf-app-layout .jamf-side-nav:not(.custom-mobile-layout).is-open {
    left: 0;
    opacity: 1;
  }
}

.jamf-page {
  display: flex;
  flex-direction: column;
  gap: var(--size-grid-gap-base);
  height: 100%;
}
.jamf-page jamf-modal-v5-11-2:not(:has([slot=target])),
.jamf-page jamf-drawer-v5-11-2:not(:has([slot=target])) {
  position: absolute;
}
.jamf-page .jamf-content-wrapper {
  height: 100%;
  padding: 0 var(--size-spacing-global-base);
  display: flex;
  flex-direction: column;
  gap: var(--size-grid-gap-base);
}
.jamf-page .jamf-content-wrapper:has(.jamf-heading) .jamf-heading {
  margin-bottom: 0;
  width: calc(100% + var(--size-spacing-global-base) * 2);
  margin-left: var(--size-spacing-global-negative);
}
.jamf-page .jamf-content-wrapper:has(.jamf-fixed-bar:not(.is-hidden)) {
  padding-bottom: 0;
}
.jamf-page .jamf-content-wrapper:has(.jamf-fixed-bar:not(.is-hidden)) .jamf-section.has-outline + .jamf-fixed-bar,
.jamf-page .jamf-content-wrapper:has(.jamf-fixed-bar:not(.is-hidden)) .jamf-section.has-stepper + .jamf-fixed-bar {
  margin-top: calc(-4.5px * var(--size-base-spacing));
}
.jamf-page .jamf-content-wrapper:has(.jamf-fixed-bar:not(.is-hidden)) .jamf-fixed-bar {
  margin-bottom: 0;
  width: calc(100% + 6px * var(--size-base-spacing) - 1px);
  margin-left: calc(var(--size-spacing-global-negative) + 1px);
}
.jamf-page .jamf-content-wrapper:has(.jamf-fixed-bar:not(.is-hidden)) .jamf-section {
  flex-grow: 2;
}

.jamf-heading {
  padding: calc(3px * var(--size-base-spacing));
  border-bottom: 1px solid var(--color-border-base);
  display: grid;
  gap: calc(0.5px * var(--size-base-spacing));
  width: 100%;
  align-items: center;
  box-sizing: border-box;
}
.jamf-heading:has(.left) {
  grid-template-columns: auto auto;
}
@media only screen and (max-width: 812px) {
  .jamf-heading:has(.left) {
    grid-template-columns: 100%;
  }
}
.jamf-heading .left {
  display: flex;
  flex-direction: column;
  gap: calc(0.5px * var(--size-base-spacing));
}
.jamf-heading .right {
  align-self: center;
  justify-self: flex-end;
  display: flex;
  gap: calc(2px * var(--size-base-spacing));
  align-items: center;
}
@media only screen and (max-width: 812px) {
  .jamf-heading .right {
    margin-top: calc(2px * var(--size-base-spacing));
    justify-self: flex-start;
  }
}
.jamf-heading > h1,
.jamf-heading .left > h1 {
  font-family: var(--font-family), "Helvetica Neue", Helvetica, Lucida Grande, sans-serif;
  font-weight: var(--size-font-h3-weight);
  font-size: var(--size-font-h3-base);
  line-height: var(--size-font-h3-height);
}
.jamf-heading > p,
.jamf-heading .left > p {
  font-family: var(--font-family), "Helvetica Neue", Helvetica, Lucida Grande, sans-serif;
  font-weight: var(--size-font-weight-normal);
  font-size: var(--size-font-paragraph-base);
  line-height: var(--size-font-paragraph-height);
  letter-spacing: var(--size-font-paragraph-spacing);
  color: var(--color-font-secondary);
  color: var(--color-font-tertiary);
}
@media only screen and (max-width: 812px) {
  .jamf-heading {
    min-height: max-content;
  }
}

div.jamf-heading > h1 {
  font-family: var(--font-family), "Helvetica Neue", Helvetica, Lucida Grande, sans-serif;
  font-weight: var(--size-font-h3-weight);
  font-size: var(--size-font-h3-base);
  line-height: var(--size-font-h3-height);
}
div.jamf-heading > p {
  font-family: var(--font-family), "Helvetica Neue", Helvetica, Lucida Grande, sans-serif;
  font-weight: var(--size-font-weight-normal);
  font-size: var(--size-font-paragraph-base);
  line-height: var(--size-font-paragraph-height);
  letter-spacing: var(--size-font-paragraph-spacing);
  color: var(--color-font-secondary);
  color: var(--color-font-tertiary);
}

.jamf-sections {
  display: flex;
  flex-direction: column;
  gap: var(--size-grid-gap-base);
}

.jamf-section {
  display: flex;
  flex-direction: column;
  gap: calc(2px * var(--size-base-spacing));
}
.jamf-section.has-outline, .jamf-section.has-stepper {
  border-radius: var(--size-border-radius-base);
  border: var(--size-border-width-base) solid var(--color-border-base);
  padding: calc(4px * var(--size-base-spacing));
  padding-top: calc(3.5px * var(--size-base-spacing));
}
.jamf-section.has-stepper {
  padding: 0;
}
.jamf-section.has-stepper {
  display: grid;
  gap: 0;
  padding: 0;
  grid-template-columns: minmax(180px, 250px) auto;
}
.jamf-section.has-stepper > :first-child {
  border-right: 1px solid var(--color-border-base);
  box-sizing: border-box;
}
@media only screen and (max-width: 812px) {
  .jamf-section.has-stepper > :first-child {
    border-right: none;
    border-bottom: 1px solid var(--color-border-base);
    display: flex;
    justify-content: center;
  }
}
.jamf-section.has-stepper > * {
  display: flex;
  flex-direction: column;
  gap: calc(2px * var(--size-base-spacing));
  padding: calc(4.5px * var(--size-base-spacing)) calc(4px * var(--size-base-spacing));
}
@media only screen and (max-width: 812px) {
  .jamf-section.has-stepper {
    grid-template-columns: 100%;
    grid-template-rows: min-content;
  }
}

.jamf-fixed-bar {
  padding: calc(2px * var(--size-base-spacing)) calc(3px * var(--size-base-spacing));
  box-sizing: border-box;
  width: 100%;
  position: sticky;
  bottom: 0;
  background: var(--color-structure-base);
  border-top: 1px solid var(--color-border-base);
  left: 0;
  display: grid;
  justify-content: space-between;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  opacity: 1;
  transition-property: all;
  transition-duration: 200ms;
  transition-timing-function: linear;
  transition-delay: 0s;
}
.jamf-fixed-bar .right,
.jamf-fixed-bar .left {
  display: flex;
  gap: calc(2px * var(--size-base-spacing));
  align-items: center;
}
.jamf-fixed-bar .left {
  justify-self: flex-start;
}
.jamf-fixed-bar .right,
.jamf-fixed-bar :nth-child(2) {
  grid-column-start: 2;
  justify-self: flex-end;
}
.jamf-fixed-bar.is-hidden {
  bottom: -100%;
  opacity: 0;
  height: 0;
  visibility: hidden;
}
@media only screen and (max-width: 812px) {
  .jamf-fixed-bar {
    width: 100%;
    left: 0;
  }
}

.jamf-divider {
  background: var(--color-border-base);
  height: 1px;
  width: 100%;
}
hr.jamf-divider {
  background: var(--color-border-base);
}

.jamf-divider-vertical {
  min-height: calc(4px * var(--size-base-spacing));
  height: 100%;
  width: 1px;
  background: var(--color-border-base);
}

.jamf-item-grid {
  display: grid;
  gap: var(--size-grid-gap-base);
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: calc(2px * var(--size-base-spacing));
}
.jamf-item-grid > * {
  height: 100%;
}
.jamf-item-grid > jamf-card-v5-11-2::part(card), .jamf-item-grid > jamf-card-v5-11-2::part(body) {
  height: 100%;
}
.jamf-item-grid-xsmall {
  display: grid;
  gap: var(--size-grid-gap-base);
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: calc(2px * var(--size-base-spacing));
}
.jamf-item-grid-xsmall > * {
  height: 100%;
}
.jamf-item-grid-xsmall > jamf-card-v5-11-2::part(card), .jamf-item-grid-xsmall > jamf-card-v5-11-2::part(body) {
  height: 100%;
}
.jamf-item-grid-small {
  display: grid;
  gap: var(--size-grid-gap-base);
  grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
  gap: calc(2px * var(--size-base-spacing));
}
.jamf-item-grid-small > * {
  height: 100%;
}
.jamf-item-grid-small > jamf-card-v5-11-2::part(card), .jamf-item-grid-small > jamf-card-v5-11-2::part(body) {
  height: 100%;
}
.jamf-item-grid-medium {
  display: grid;
  gap: var(--size-grid-gap-base);
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: calc(2px * var(--size-base-spacing));
}
.jamf-item-grid-medium > * {
  height: 100%;
}
.jamf-item-grid-medium > jamf-card-v5-11-2::part(card), .jamf-item-grid-medium > jamf-card-v5-11-2::part(body) {
  height: 100%;
}
.jamf-item-grid-large {
  display: grid;
  gap: var(--size-grid-gap-base);
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: calc(2px * var(--size-base-spacing));
}
.jamf-item-grid-large > * {
  height: 100%;
}
.jamf-item-grid-large > jamf-card-v5-11-2::part(card), .jamf-item-grid-large > jamf-card-v5-11-2::part(body) {
  height: 100%;
}

.jamf-flex {
  display: flex;
  align-items: center;
  gap: calc(1px * var(--size-base-spacing));
}

.jamf-flex-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(1px * var(--size-base-spacing));
}

@font-face {
  font-family: "Noto Sans Mono";
  src: url("/fonts/NotoSansMono.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/inter-tight.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
  font-style: normal;
}
/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

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

ul {
  list-style: none;
}

button,
input,
select,
textarea {
  margin: 0;
}

html {
  box-sizing: border-box;
}

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

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

iframe {
  border: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

td:not([align]),
th:not([align]) {
  text-align: left;
}

html {
  box-sizing: border-box;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  overflow-x: auto;
  overflow-y: auto;
  text-rendering: optimizeLegibility;
  text-size-adjust: 100%;
}

article,
aside,
figure,
footer,
header,
hgroup,
section {
  display: block;
}

code,
pre {
  -moz-osx-font-smoothing: auto;
  -webkit-font-smoothing: auto;
  font-family: monospace;
}

hr {
  border: none;
  display: block;
}

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

span {
  font-style: inherit;
  font-weight: inherit;
}

strong {
  font-weight: 700;
}

fieldset {
  border: none;
}

pre {
  overflow-x: auto;
  white-space: pre;
  word-wrap: normal;
}
pre code {
  background-color: transparent;
  color: currentColor;
  padding: 0;
}

html,
body {
  font-family: var(--font-family), "Helvetica Neue", Helvetica, Lucida Grande, sans-serif;
  font-weight: var(--size-font-weight-normal);
  color: var(--color-font-base);
  margin: 0;
  padding: 0;
}

label,
body,
button,
input,
select,
textarea,
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-font-base);
}

svg {
  height: auto;
  fill: currentColor;
  box-sizing: content-box;
}

a {
  font-family: var(--font-family), "Helvetica Neue", Helvetica, Lucida Grande, sans-serif;
  font-weight: var(--size-font-weight-normal);
  font-size: var(--size-font-link-base);
  line-height: var(--size-font-link-height);
  letter-spacing: var(--size-font-link-spacing);
  color: var(--color-font-link-base);
  border-radius: calc(0.25px * var(--size-base-spacing));
  cursor: pointer;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:focus-visible {
  transition-property: all;
  transition-duration: 200ms;
  transition-timing-function: linear;
  transition-delay: 0s;
  outline: none;
  box-shadow: var(--color-focus-secondary) 0px 0px 0px 2px, var(--color-focus-base) 0px 0px 0px 4px;
}

p {
  font-family: var(--font-family), "Helvetica Neue", Helvetica, Lucida Grande, sans-serif;
  font-weight: var(--size-font-weight-normal);
  font-size: var(--size-font-paragraph-base);
  line-height: var(--size-font-paragraph-height);
  letter-spacing: var(--size-font-paragraph-spacing);
  color: var(--color-font-secondary);
}

small {
  font-family: var(--font-family), "Helvetica Neue", Helvetica, Lucida Grande, sans-serif;
  font-weight: var(--size-font-weight-normal);
  font-size: var(--size-font-paragraph-small-base);
  line-height: var(--size-font-paragraph-small-height);
  letter-spacing: var(--size-font-paragraph-small-spacing);
}

hr {
  height: 1px;
  background: var(--color-border-neutral-base);
}

.error-text {
  color: var(--color-danger-base) !important;
}

.helper-text {
  font-family: var(--font-family), "Helvetica Neue", Helvetica, Lucida Grande, sans-serif;
  font-weight: var(--size-font-weight-normal);
  font-size: var(--size-font-helper-base);
  line-height: var(--size-font-helper-height);
  letter-spacing: var(--size-font-helper-spacing);
  color: var(--color-font-secondary);
}

.subtitle-text {
  font-family: var(--font-family), "Helvetica Neue", Helvetica, Lucida Grande, sans-serif;
  font-weight: var(--size-font-weight-normal);
  font-size: var(--size-font-subtitle-base);
  line-height: var(--size-font-subtitle-height);
  letter-spacing: var(--size-font-subtitle-spacing);
}

h1 {
  font-family: var(--font-family), "Helvetica Neue", Helvetica, Lucida Grande, sans-serif;
  font-weight: var(--size-font-h1-weight);
  font-size: var(--size-font-h1-base);
  line-height: var(--size-font-h1-height);
}

h2 {
  font-family: var(--font-family), "Helvetica Neue", Helvetica, Lucida Grande, sans-serif;
  font-weight: var(--size-font-h2-weight);
  font-size: var(--size-font-h2-base);
  line-height: var(--size-font-h2-height);
}

h3 {
  font-family: var(--font-family), "Helvetica Neue", Helvetica, Lucida Grande, sans-serif;
  font-weight: var(--size-font-h3-weight);
  font-size: var(--size-font-h3-base);
  line-height: var(--size-font-h3-height);
}

h4 {
  font-family: var(--font-family), "Helvetica Neue", Helvetica, Lucida Grande, sans-serif;
  font-weight: var(--size-font-h4-weight);
  font-size: var(--size-font-h4-base);
  line-height: var(--size-font-h4-height);
  letter-spacing: var(--size-font-h4-spacing);
}

h5 {
  font-family: var(--font-family), "Helvetica Neue", Helvetica, Lucida Grande, sans-serif;
  font-weight: var(--size-font-h5-weight);
  font-size: var(--size-font-h5-base);
  line-height: var(--size-font-h5-height);
  letter-spacing: var(--size-font-h5-spacing);
}

:root {
  --size-border-width-base: 1px;
  --size-border-width-active: 2px;
  --size-border-width-notification: var(--size-border-width-base);
  --size-border-width-action: var(--size-border-width-base);
  --size-border-width-input: var(--size-border-width-base);
  --size-border-radius-small: 4px;
  --size-border-radius-base: 8px;
  --size-border-radius-half: 100px;
  --size-border-radius-full: 100%;
  --size-border-radius-notification: var(--size-border-radius-base);
  --size-border-radius-input: var(--size-border-radius-base);
  --size-border-radius-action-base: var(--size-border-radius-base);
  --size-border-radius-action-icon-only: var(--size-border-radius-base);
  --size-scrollbar-radius: var(--size-border-radius-base);
  --size-input-height-base: 36px;
  --size-input-height-secondary: 24px;
  --size-input-height-tertiary: 20px;
  --size-input-width-base: 256px;
  --size-input-width-secondary: 140px;
  --size-input-width-tertiary: 600px;
  --size-input-width-counter: 96px;
  --size-action-height-base: var(--size-input-height-base);
  --size-action-height-secondary: var(--size-input-height-secondary);
  --size-list-height: 300px;
  --size-list-width: var(--size-list-height);
  --size-upload-height: 96px;
  --size-upload-width: 352px;
  --size-grid-item-min-width: 120px;
  --size-dropdown-width: 120px;
  --size-indicator-badge: 16px;
  --size-indicator-progress-height: 2px;
  --size-slider-knob: 16px;
  --size-slider-track-width: 128px;
  --size-slider-track-height: 2px;
  --size-navigation-top: 56px;
  --size-navigation-side: 264px;
  --size-navigation-side-collapsed: 64px;
  --size-navigation-heading: 96px;
  --font-family: "Inter";
  --size-font-weight-light: 300;
  --size-font-weight-normal: 400;
  --size-font-weight-medium: 500;
  --size-font-weight-semibold: 600;
  --size-font-weight-bold: 700;
  --size-font-h1-base: 32px;
  --size-font-h1-height: 40px;
  --size-font-h1-weight: var(--size-font-weight-bold);
  --size-font-h2-base: 28px;
  --size-font-h2-height: 36px;
  --size-font-h2-weight: var(--size-font-weight-bold);
  --size-font-h3-base: 24px;
  --size-font-h3-height: 28px;
  --size-font-h3-weight: var(--size-font-weight-bold);
  --size-font-h4-base: 20px;
  --size-font-h4-height: 24px;
  --size-font-h4-spacing: 0;
  --size-font-h4-weight: var(--size-font-weight-bold);
  --size-font-h5-base: 16px;
  --size-font-h5-height: 24px;
  --size-font-h5-spacing: 0;
  --size-font-h5-weight: var(--size-font-weight-bold);
  --size-font-h6-base: 14px;
  --size-font-h6-height: 20px;
  --size-font-h6-spacing: 0;
  --size-font-h6-weight: var(--size-font-weight-bold);
  --size-font-subtitle-base: 16px;
  --size-font-subtitle-height: 24px;
  --size-font-subtitle-spacing: 0;
  --size-font-label-base: var(--size-font-paragraph-base);
  --size-font-label-height: var(--size-font-paragraph-height);
  --size-font-label-spacing: var(--size-font-paragraph-spacing);
  --size-font-label-weight: var(--size-font-weight-normal);
  --size-font-helper-base: 12px;
  --size-font-helper-height: 16px;
  --size-font-helper-spacing: 0;
  --size-font-paragraph-base: 14px;
  --size-font-paragraph-height: 20px;
  --size-font-paragraph-spacing: 0;
  --size-font-paragraph-weight: var(--size-font-weight-normal);
  --size-font-paragraph-small-base: 12px;
  --size-font-paragraph-small-height: 16px;
  --size-font-paragraph-small-spacing: var(--size-font-paragraph-spacing);
  --size-font-paragraph-large-base: 20px;
  --size-font-paragraph-large-height: 24px;
  --size-font-paragraph-large-spacing: var(--size-font-paragraph-spacing);
  --size-font-input-base: var(--size-font-paragraph-base);
  --size-font-input-height: var(--size-font-paragraph-height);
  --size-font-input-spacing: var(--size-font-paragraph-spacing);
  --size-font-action-base: var(--size-font-paragraph-base);
  --size-font-action-height: var(--size-font-paragraph-height);
  --size-font-action-spacing: var(--size-font-paragraph-spacing);
  --size-font-link-base: var(--size-font-paragraph-base);
  --size-font-link-height: var(--size-font-paragraph-height);
  --size-font-link-spacing: var(--size-font-paragraph-spacing);
  --size-font-code-base: 12px;
  --font-family-monospace: "Noto Sans Mono";
  --size-font-action-large-base: var(--size-font-paragraphLarge-base);
  --size-font-action-large-height: var(--size-font-paragraphLarge-height);
  --size-font-action-large-spacing: var(--size-font-paragraphLarge-spacing);
  --size-font-action-small-base: var(--size-font-paragraphSmall-base);
  --size-font-action-small-height: var(--size-font-paragraphSmall-height);
  --size-font-action-small-spacing: var(--size-font-paragraphSmall-spacing);
  --size-type-scaler-small: -2px;
  --size-type-scaler-medium: 0px;
  --size-type-scaler-large: 2px;
  --size-shadow-xsmall: 0 2px 4px -1px;
  --size-shadow-small: 0px 0px 6px -1px;
  --size-shadow-medium: 0px 4px 10px -2px;
  --size-shadow-large: 0px 8px 32px -8px;
  --size-shadow-xlarge: 0px 24px 64px -16px;
  --size-shadow-focus: 0px 0px 1px 2px;
  --size-shadow-action: var(--size-shadow-xsmall);
  --size-base-spacing: 8; /* Used to calculate size for margins, padding and anything that applies space */
  --size-base-items: 8; /* Used to calculate size for icons, spinners, etc independently of spacing */
  --size-grid-gap-base: calc(var(--size-base-spacing) * 3px);
  --size-grid-gap-small: calc(var(--size-base-spacing) * 2px);
  --size-spacing-global-base: calc(var(--size-base-spacing) * 3px);
  --size-spacing-global-negative: calc(var(--size-base-spacing) * -3px);
  --color-primary-base: #1268EC;
  --color-primary-active: #1F47CD;
  --color-primary-subdued: rgba(18, 104, 236, 0.07);
  --color-primary-deep: #1F47CD;
  --color-primary-rgb: 18,104,236; /* Use to set opacity */
  --color-secondary-base: #ffffff;
  --color-secondary-active: #F5F7F8;
  --color-danger-base: #CA1E25;
  --color-danger-secondary: rgba(202, 30, 37, 0.05);
  --color-danger-active: #D11922;
  --color-danger-subdued: rgba(240, 47, 48, 0.07);
  --color-danger-deep: #C30001;
  --color-danger-rgb: 202,30,37; /* Use to set opacity */
  --color-success-base: #00B300;
  --color-success-secondary: rgba(0, 179, 0, 0.05);
  --color-success-active: #00A000;
  --color-success-subdued: rgba(40, 205, 65, 0.07);
  --color-success-deep: #006F00;
  --color-warning-base: #FFB500;
  --color-warning-secondary: rgba(255, 181, 0, 0.05);
  --color-warning-active: #FFA100;
  --color-warning-subdued: rgba(255, 204, 0, 0.07);
  --color-warning-deep: #FF6D00;
  --color-info-base: #1268EC;
  --color-info-secondary: rgba(18, 104, 236, 0.05);
  --color-red-font: #C30001;
  --color-red-background: rgba(255, 59, 48, 0.16);
  --color-red-hover: rgba(255, 59, 48, 0.26);
  --color-green-font: #006F00;
  --color-green-background: rgba(40, 205, 65, 0.16);
  --color-green-hover: rgba(40, 205, 65, 0.26);
  --color-yellow-font: #A05A00;
  --color-yellow-background: rgba(255, 204, 0, 0.16);
  --color-yellow-hover: rgba(255, 204, 0, 0.26);
  --color-blue-font: #1F47CD;
  --color-blue-background: rgba(0, 122, 255, 0.16);
  --color-blue-hover: rgba(0, 122, 255, 0.26);
  --color-gray-font: var(--color-font-base);
  --color-gray-background: rgba(142, 142, 147, 0.16);
  --color-gray-hover: rgba(142, 142, 147, 0.26);
  --color-structure-base: #ffffff;
  --color-structure-base-rgb: 255,255,255; /* Use to set opacity */
  --color-structure-secondary: #F5F7F8;
  --color-structure-secondary-rgb: 245,247,248; /* Use to set opacity */
  --color-structure-tertiary: #ECEEF1;
  --color-structure-tertiary-rgb: 236,238,241; /* Use to set opacity */
  --color-structure-overlay: #ffffff;
  --color-structure-neutral: #66666B;
  --color-structure-highlight-base: #F5F7F8;
  --color-structure-highlight-active: #E3F4FF;
  --color-shadow-base: rgba(0, 0, 0, 0.3);
  --color-focus-base: #008FFF;
  --color-focus-secondary: var(--color-structure-base);
  --color-focus-success: #28CD41;
  --color-focus-danger: #FF3B30;
  --color-focus-warning: #FFCC00;
  --color-border-base: rgba(20, 25, 32, 0.12);
  --color-border-secondary: rgba(20, 25, 32, 0.09);
  --color-border-active: #535358;
  --color-border-primary-base: var(--color-primary-base);
  --color-border-primary-active: var(--color-primary-active);
  --color-border-success-base: var(--color-success-base);
  --color-border-success-active: var(--color-success-active);
  --color-border-warning-base: var(--color-warning-base);
  --color-border-warning-active: var(--color-warning-active);
  --color-border-danger-base: var(--color-danger-base);
  --color-border-danger-active: var(--color-danger-active);
  --color-border-neutral-base: #8E8E93;
  --color-border-neutral-active: #66666B;
  --color-border-base-no-opacity: #D6D6D8;
  --color-navigation-side-base: var(--color-structure-base);
  --color-navigation-side-active: #F5F7F8;
  --color-navigation-side-link: var(--color-font-link-base);
  --color-navigation-top-base: #ffffff;
  --color-navigation-top-shadow: rgba(0, 0, 0, 0.12);
  --color-navigation-top-text: var(--color-font-base);
  --color-navigation-top-logo: #ffffff;
  --color-navigation-body-base: #ffffff;
  --color-navigation-border: rgba(20, 25, 32, 0.5);
  --color-navigation-item-base: rgba(0, 0, 0, 0);
  --color-navigation-item-active: rgba(0, 0, 0, 0.05);
  --color-navigation-item-secondary: rgba(0, 0, 0, 0.9);
  --color-navigation-item-text: var(--color-font-base);
  --color-navigation-item-icon: var(--color-font-base);
  --color-navigation-brand-base: #444444;
  --color-indicator-success: #00A000;
  --color-indicator-secondary: #8E8E93;
  --color-indicator-warning: #FF9500;
  --color-indicator-danger: #FF3B30;
  --color-indicator-primary: #009EFF;
  --color-indicator-tooltip: #151519;
  --color-indicator-progress: var(--color-primary-base);
  --color-indicator-badge: var(--color-danger-base);
  --color-indicator-tag-base: #66666B;
  --color-indicator-tag-secondary: #232D3D;
  --color-indicator-tag-highlight-primary: #BBE2FF;
  --color-indicator-tag-highlight-secondary: #CCCDF4;
  --color-indicator-tag-highlight-text: #36219E;
  --color-action-primary-base: var(--color-primary-base);
  --color-action-primary-active: var(--color-primary-active);
  --color-action-secondary-base: var(--color-secondary-base);
  --color-action-secondary-active: var(--color-secondary-active);
  --color-action-secondary-spinner: var(--color-primary-base);
  --color-action-danger-base: var(--color-danger-base);
  --color-action-danger-active: var(--color-danger-active);
  --color-action-ghost-base: rgba(0, 0, 0, 0);
  --color-action-ghost-focus: var(--color-secondary-base);
  --color-action-ghost-active: var(--color-secondary-active);
  --color-input-base: var(--color-structure-base);
  --color-input-primary-base: var(--color-primary-base);
  --color-input-primary-active: var(--color-primary-active);
  --color-input-border-base: var(--color-border-neutral-base);
  --color-input-border-active: var(--color-primary-base);
  --color-input-tag: #D8DDE2;
  --color-input-on-surface: var(--color-structure-base);
  --color-input-readonly: #D8DDE2;
  --color-list-base: var(--color-structure-base);
  --color-list-highlight-base: var(--color-structure-highlight-base);
  --color-list-highlight-active: var(--color-structure-highlight-active);
  --color-list-border: var(--color-border-secondary);
  --color-card-base: var(--color-structure-base);
  --color-card-active: var(--color-structure-highlight-base);
  --color-editor-base: var(--color-structure-base);
  --color-editor-selected: var(--color-info-secondary);
  --color-editor-selected-active: #77b7f7;
  --color-editor-keyword: #770088;
  --color-editor-atom: #221199;
  --color-editor-number: #116644;
  --color-editor-def: #0000ff;
  --color-editor-variable: #0055aa;
  --color-editor-variable-2: #0055aa;
  --color-editor-variable-3: #008855;
  --color-editor-type: #008855;
  --color-editor-comment: #aa5500;
  --color-editor-string: #aa1111;
  --color-editor-string-2: #ff5500;
  --color-editor-meta: #555555;
  --color-editor-operator: #000000;
  --color-editor-qualifier: #555555;
  --color-editor-property: #0000cc;
  --color-editor-builtin: #3300aa;
  --color-editor-bracket: #999977;
  --color-editor-tag: #117700;
  --color-editor-attribute: #0000cc;
  --color-editor-hr: #999999;
  --color-editor-link: #0000cc;
  --color-editor-error: #ff0000;
  --color-modal-base: var(--color-structure-base);
  --color-modal-border: rgba(0, 0, 0, 0);
  --color-modal-overlay: rgba(0, 0, 0, 0.4);
  --color-upload-base: rgba(0, 0, 0, 0);
  --color-upload-active: var(--color-structure-highlight-active);
  --color-avatar-bg-red: #a45b6d;
  --color-avatar-bg-orange: #e29c85;
  --color-avatar-bg-green: #4caf7f;
  --color-avatar-bg-purple: #775fbe;
  --color-chart-blue-active: #007AFF;
  --color-chart-blue-disabled: #efefef;
  --color-chart-blue-hover: #1268EC;
  --color-chart-green-active: #00A000;
  --color-chart-green-disabled: #8c8c8c;
  --color-chart-green-hover: #008A00;
  --color-chart-yellow-active: #D17800;
  --color-chart-yellow-disabled: #b5b5b5;
  --color-chart-yellow-hover: #C47000;
  --color-chart-red-active: #FF3B30;
  --color-chart-red-disabled: #5b5b5b;
  --color-chart-red-hover: #F02F30;
  --color-chart-orange: #EF6902;
  --color-chart-orange-hover: #E64D03;
  --color-chart-mint: #009D8D;
  --color-chart-mint-hover: #008C7C;
  --color-chart-teal: #5098AA;
  --color-chart-teal-hover: #498491;
  --color-chart-cyan: #1D96DC;
  --color-chart-cyan-hover: #1884C8;
  --color-chart-indigo: #5856D6;
  --color-chart-indigo-hover: #524DC8;
  --color-chart-purple: #AF52DE;
  --color-chart-purple-hover: #A135D7;
  --color-chart-pink: #FF2D55;
  --color-chart-pink-hover: #F70038;
  --color-chart-brown: #A2845E;
  --color-chart-brown-hover: #8A6B41;
  --color-chart-gray: #8E8E93;
  --color-chart-gray-hover: #66666B;
  --color-scrollbar-thumb: var(--color-border-neutral-base);
  --color-scrollbar-track: var(--color-structure-tertiary);
  --color-font-base: rgba(0, 0, 0, 0.87);
  --color-font-secondary: rgba(0, 0, 0, 0.74);
  --color-font-tertiary: rgba(0, 0, 0, 0.6);
  --color-font-placeholder: var(--color-font-tertiary);
  --color-font-inverse: #ffffff;
  --color-font-tooltip: var(--color-font-inverse);
  --color-font-danger: var(--color-danger-base);
  --color-font-link-base: var(--color-primary-base);
  --color-font-link-active: var(--color-primary-active);
  --color-font-link-wash: #0040DD;
  --color-font-link-wash-active: #0033D1;
  --color-orange-font: #C93400;
  --color-orange-background: rgba(255, 149, 0, 0.16);
  --color-orange-hover: rgba(255, 149, 0, 0.26);
  --color-mint-font: #005F4D;
  --color-mint-background: rgba(0, 199, 190, 0.16);
  --color-mint-hover: rgba(0, 199, 190, 0.26);
  --color-teal-font: #3D6066;
  --color-teal-background: rgba(89, 173, 196, 0.16);
  --color-teal-hover: rgba(89, 173, 196, 0.26);
  --color-cyan-font: #0C5393;
  --color-cyan-background: rgba(85, 190, 240, 0.16);
  --color-cyan-hover: rgba(85, 190, 240, 0.26);
  --color-indigo-font: #36219E;
  --color-indigo-background: rgba(88, 86, 214, 0.16);
  --color-indigo-hover: rgba(88, 86, 214, 0.26);
  --color-purple-font: #3B25B1;
  --color-purple-background: rgba(175, 82, 222, 0.16);
  --color-purple-hover: rgba(175, 82, 222, 0.26);
  --color-pink-font: #C9001D;
  --color-pink-background: rgba(255, 45, 85, 0.16);
  --color-pink-hover: rgba(255, 45, 85, 0.26);
  --color-brown-font: #3F2201;
  --color-brown-background: rgba(162, 132, 94, 0.16);
  --color-brown-hover: rgba(162, 132, 94, 0.26);
  --color-gradient-blue: linear-gradient(235.71deg, #007AFF 0%, #55BEF0 69.55%);
  --color-switcher-sidebar-surface: var(--color-structure-tertiary);
  --color-switcher-sidebar-item: var(--color-structure-base);
  --color-switcher-main-surface: var(--color-structure-base);
  --color-switcher-main-item: var(--color-structure-secondary);
  --color-switcher-main-item-active: var(--color-structure-tertiary);
  --color-switcher-main-subtitle: var(--color-avatar-bg-red);
  --color-popover-overlay: #ffffff;
  --color-tag-highlight-font: #36219E;
  --color-tag-highlight-border: rgba(0, 0, 0, 0);
  --color-tag-highlight-gradient-start: #BBE2FF;
  --color-tag-highlight-gradient-end: #CCCDF4;
  --opacity-disabled: 40%;
  --font-family-heading: "Inter Tight", "Inter", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root.system-preference {
    --color-primary-base: #2FA3FF;
    --color-primary-active: #0093FF;
    --color-primary-subdued: rgba(10, 132, 255, 0.1);
    --color-primary-deep: #203FB9;
    --color-primary-rgb: 47,163,255; /* Use to set opacity */
    --color-secondary-base: #2B2F36;
    --color-secondary-active: #1F242B;
    --color-danger-base: #ED7577;
    --color-danger-secondary: rgba(237, 117, 119, 0.05);
    --color-danger-active: #F85454;
    --color-danger-subdued: rgba(240, 57, 57, 0.1);
    --color-danger-deep: #C2191F;
    --color-danger-rgb: 237,117,119; /* Use to set opacity */
    --color-success-base: #32D74B;
    --color-success-secondary: rgba(50, 215, 75, 0.05);
    --color-success-active: #00CE19;
    --color-success-subdued: rgba(50, 215, 75, 0.1);
    --color-success-deep: #007900;
    --color-warning-base: #FBE504;
    --color-warning-secondary: rgba(251, 229, 4, 0.05);
    --color-warning-active: #FEBD00;
    --color-warning-subdued: rgba(251, 229, 4, 0.1);
    --color-warning-deep: #FC7800;
    --color-info-base: #0A84FF;
    --color-info-secondary: rgba(10, 132, 255, 0.05);
    --color-red-font: #F59C9D;
    --color-red-background: rgba(255, 69, 58, 0.16);
    --color-red-hover: rgba(255, 69, 58, 0.26);
    --color-green-font: #9AE89C;
    --color-green-background: rgba(50, 215, 75, 0.16);
    --color-green-hover: rgba(50, 215, 75, 0.26);
    --color-yellow-font: #FFF495;
    --color-yellow-background: rgba(251, 229, 4, 0.16);
    --color-yellow-hover: rgba(251, 229, 4, 0.26);
    --color-blue-font: #8CC9FF;
    --color-blue-background: rgba(10, 132, 255, 0.16);
    --color-blue-hover: rgba(10, 132, 255, 0.26);
    --color-gray-font: var(--color-font-base);
    --color-gray-background: rgba(112, 115, 119, 0.16);
    --color-gray-hover: rgba(112, 115, 119, 0.26);
    --color-structure-base: #141920;
    --color-structure-base-rgb: 20,25,32; /* Use to set opacity */
    --color-structure-secondary: #1F242B;
    --color-structure-secondary-rgb: 31,36,43; /* Use to set opacity */
    --color-structure-tertiary: #2B2F36;
    --color-structure-tertiary-rgb: 43,47,54; /* Use to set opacity */
    --color-structure-overlay: #141920;
    --color-structure-neutral: #707377;
    --color-structure-highlight-base: #2B2F36;
    --color-structure-highlight-active: rgba(10, 132, 255, 0.1);
    --color-shadow-base: rgba(0, 0, 0, 0.3);
    --color-focus-base: #0A84FF;
    --color-focus-secondary: var(--color-structure-base);
    --color-focus-success: #32D74B;
    --color-focus-danger: #FF453A;
    --color-focus-warning: #FBE504;
    --color-border-base: rgba(255, 255, 255, 0.12);
    --color-border-secondary: rgba(255, 255, 255, 0.09);
    --color-border-active: #9D9FA3;
    --color-border-primary-base: var(--color-primary-base);
    --color-border-primary-active: var(--color-primary-active);
    --color-border-success-base: var(--color-success-base);
    --color-border-success-active: var(--color-success-active);
    --color-border-warning-base: var(--color-warning-base);
    --color-border-warning-active: var(--color-warning-active);
    --color-border-danger-base: var(--color-danger-base);
    --color-border-danger-active: var(--color-danger-active);
    --color-border-neutral-base: #707377;
    --color-border-neutral-active: #595C61;
    --color-border-base-no-opacity: #595C61;
    --color-navigation-side-base: var(--color-structure-secondary);
    --color-navigation-side-active: var(--color-structure-secondary);
    --color-navigation-side-link: var(--color-font-link-base);
    --color-navigation-top-base: #2B2F36;
    --color-navigation-top-shadow: rgba(0, 0, 0, 0.12);
    --color-navigation-top-text: var(--color-font-base);
    --color-navigation-top-logo: #ffffff;
    --color-navigation-body-base: #ffffff;
    --color-navigation-border: rgba(255, 255, 255, 0.5);
    --color-navigation-item-base: rgba(0, 0, 0, 0);
    --color-navigation-item-active: rgba(255, 255, 255, 0.05);
    --color-navigation-item-secondary: var(--color-font-secondary);
    --color-navigation-item-text: var(--color-font-base);
    --color-navigation-item-icon: var(--color-font-base);
    --color-navigation-brand-base: #ffffff;
    --color-indicator-success: #32D74B;
    --color-indicator-secondary: #707377;
    --color-indicator-warning: #FF9F0A;
    --color-indicator-danger: #FF453A;
    --color-indicator-primary: #0093FF;
    --color-indicator-tooltip: #ffffff;
    --color-indicator-progress: var(--color-primary-base);
    --color-indicator-badge: var(--color-danger-base);
    --color-indicator-tag-base: #86898D;
    --color-indicator-tag-secondary: #5C6982;
    --color-indicator-tag-highlight-primary: #3426C7;
    --color-indicator-tag-highlight-secondary: #FF0046;
    --color-indicator-tag-highlight-text: var(--color-font-base);
    --color-action-primary-base: var(--color-primary-base);
    --color-action-primary-active: var(--color-primary-active);
    --color-action-secondary-base: var(--color-secondary-base);
    --color-action-secondary-active: var(--color-secondary-active);
    --color-action-secondary-spinner: #ffffff;
    --color-action-danger-base: var(--color-danger-base);
    --color-action-danger-active: var(--color-danger-active);
    --color-action-ghost-base: rgba(0, 0, 0, 0);
    --color-action-ghost-focus: var(--color-secondary-base);
    --color-action-ghost-active: var(--color-secondary-active);
    --color-input-base: var(--color-structure-base);
    --color-input-primary-base: var(--color-primary-base);
    --color-input-primary-active: var(--color-primary-active);
    --color-input-border-base: var(--color-border-neutral-base);
    --color-input-border-active: var(--color-primary-base);
    --color-input-tag: var(--color-secondary-base);
    --color-input-on-surface: var(--color-structure-base);
    --color-input-readonly: #1F242B;
    --color-list-base: var(--color-structure-secondary);
    --color-list-highlight-base: var(--color-structure-highlight-base);
    --color-list-highlight-active: var(--color-structure-highlight-active);
    --color-list-border: var(--color-border-secondary);
    --color-card-base: var(--color-structure-secondary);
    --color-card-active: var(--color-structure-highlight-base);
    --color-editor-base: var(--color-structure-base);
    --color-editor-selected: rgba(113, 124, 180, 0.2);
    --color-editor-selected-active: rgba(113, 124, 180, 0.2);
    --color-editor-keyword: #c792ea;
    --color-editor-atom: #f78c6c;
    --color-editor-number: #ff5370;
    --color-editor-def: #82aaff;
    --color-editor-variable: #f07178;
    --color-editor-variable-2: #eeffff;
    --color-editor-variable-3: #decb6b;
    --color-editor-type: #decb6b;
    --color-editor-comment: #464b5d;
    --color-editor-string: #c3e88d;
    --color-editor-string-2: #f07178;
    --color-editor-meta: #ffcb6b;
    --color-editor-operator: #89ddff;
    --color-editor-qualifier: #decb6b;
    --color-editor-property: #c792ea;
    --color-editor-builtin: #ffcb6b;
    --color-editor-bracket: #000000;
    --color-editor-tag: #ff5370;
    --color-editor-attribute: #c792ea;
    --color-editor-hr: #000000;
    --color-editor-link: #000000;
    --color-editor-error: #ff5370;
    --color-modal-base: var(--color-structure-secondary);
    --color-modal-border: rgba(0, 0, 0, 0);
    --color-modal-overlay: rgba(0, 0, 0, 0.6);
    --color-upload-base: rgba(0, 0, 0, 0);
    --color-upload-active: var(--color-structure-highlight-active);
    --color-avatar-bg-red: #d9a7b3;
    --color-avatar-bg-orange: #eebfb1;
    --color-avatar-bg-green: #9ed6bb;
    --color-avatar-bg-purple: #b4a7d9;
    --color-chart-blue-active: #0A84FF;
    --color-chart-blue-disabled: #727272;
    --color-chart-blue-hover: #1772EB;
    --color-chart-green-active: #32D74B;
    --color-chart-green-disabled: #a4a4a4;
    --color-chart-green-hover: #00CE19;
    --color-chart-yellow-active: #FFD60A;
    --color-chart-yellow-disabled: #e0e0e0;
    --color-chart-yellow-hover: #FBE504;
    --color-chart-red-active: #FF453A;
    --color-chart-red-disabled: #6d6d6d;
    --color-chart-red-hover: #F03939;
    --color-chart-orange: #FF9F0A;
    --color-chart-orange-hover: #FF8C0B;
    --color-chart-mint: #66D4CF;
    --color-chart-mint-hover: #00C1B9;
    --color-chart-teal: #6AC4DC;
    --color-chart-teal-hover: #68B9D3;
    --color-chart-cyan: #5AC8F5;
    --color-chart-cyan-hover: #3BBDF4;
    --color-chart-indigo: #5E5CE6;
    --color-chart-indigo-hover: #423BDE;
    --color-chart-purple: #BF5AF2;
    --color-chart-purple-hover: #B029EF;
    --color-chart-pink: #FF375F;
    --color-chart-pink-hover: #FF0046;
    --color-chart-brown: #AC8E68;
    --color-chart-brown-hover: #96764C;
    --color-chart-gray: #707377;
    --color-chart-gray-hover: #595C61;
    --color-scrollbar-thumb: var(--color-border-neutral-base);
    --color-scrollbar-track: var(--color-border-secondary);
    --color-font-base: rgba(255, 255, 255, 0.87);
    --color-font-secondary: rgba(255, 255, 255, 0.74);
    --color-font-tertiary: rgba(255, 255, 255, 0.6);
    --color-font-placeholder: var(--color-font-tertiary);
    --color-font-inverse: #000000;
    --color-font-tooltip: var(--color-font-inverse);
    --color-font-danger: var(--color-danger-base);
    --color-font-link-base: var(--color-primary-base);
    --color-font-link-active: var(--color-primary-active);
    --color-font-link-wash: #63C3F6;
    --color-font-link-wash-active: #4EB6F4;
    --color-orange-font: #FFDE82;
    --color-orange-background: rgba(255, 159, 10, 0.16);
    --color-orange-hover: rgba(255, 159, 10, 0.26);
    --color-mint-font: #66D4CF;
    --color-mint-background: rgba(102, 212, 207, 0.16);
    --color-mint-hover: rgba(102, 212, 207, 0.26);
    --color-teal-font: #96DCEF;
    --color-teal-background: rgba(106, 196, 220, 0.16);
    --color-teal-hover: rgba(106, 196, 220, 0.26);
    --color-cyan-font: #87D9F8;
    --color-cyan-background: rgba(90, 200, 245, 0.16);
    --color-cyan-hover: rgba(90, 200, 245, 0.26);
    --color-indigo-font: #A2A1F1;
    --color-indigo-background: rgba(94, 92, 230, 0.16);
    --color-indigo-hover: rgba(94, 92, 230, 0.26);
    --color-purple-font: #D28CF5;
    --color-purple-background: rgba(191, 90, 242, 0.16);
    --color-purple-hover: rgba(191, 90, 242, 0.26);
    --color-pink-font: #F794A3;
    --color-pink-background: rgba(255, 55, 95, 0.16);
    --color-pink-hover: rgba(255, 55, 95, 0.26);
    --color-brown-font: #CAAE8D;
    --color-brown-background: rgba(172, 142, 104, 0.16);
    --color-brown-hover: rgba(172, 142, 104, 0.26);
    --color-gradient-blue: linear-gradient(235.71deg, #1772EB 0%, #5AC8F5 69.55%);
    --color-gradient-indigo: linear-gradient(235.71deg, #4942BE 0%, #888DE5 69.55%);
    --color-switcher-sidebar-surface: var(--color-structure-secondary);
    --color-switcher-sidebar-item: var(--color-structure-tertiary);
    --color-switcher-main-surface: var(--color-structure-tertiary);
    --color-switcher-main-item: var(--color-structure-secondary);
    --color-switcher-main-item-active: var(--color-structure-base);
    --color-switcher-main-subtitle: var(--color-avatar-bg-red);
    --color-popover-overlay: #2B2F36;
    --color-tag-highlight-font: var(--color-font-base);
    --color-tag-highlight-border: rgba(0, 0, 0, 0);
    --color-tag-highlight-gradient-start: #3426C7;
    --color-tag-highlight-gradient-end: #FF0046;
    --opacity-disabled: 40%;
  }
}
:root h1,
:root h2,
:root h3,
:root h4,
:root h5,
:root h6 {
  font-family: var(--font-family-heading) !important;
}

.dark-theme {
  --color-primary-base: #2FA3FF;
  --color-primary-active: #0093FF;
  --color-primary-subdued: rgba(10, 132, 255, 0.1);
  --color-primary-deep: #203FB9;
  --color-primary-rgb: 47,163,255; /* Use to set opacity */
  --color-secondary-base: #2B2F36;
  --color-secondary-active: #1F242B;
  --color-danger-base: #ED7577;
  --color-danger-secondary: rgba(237, 117, 119, 0.05);
  --color-danger-active: #F85454;
  --color-danger-subdued: rgba(240, 57, 57, 0.1);
  --color-danger-deep: #C2191F;
  --color-danger-rgb: 237,117,119; /* Use to set opacity */
  --color-success-base: #32D74B;
  --color-success-secondary: rgba(50, 215, 75, 0.05);
  --color-success-active: #00CE19;
  --color-success-subdued: rgba(50, 215, 75, 0.1);
  --color-success-deep: #007900;
  --color-warning-base: #FBE504;
  --color-warning-secondary: rgba(251, 229, 4, 0.05);
  --color-warning-active: #FEBD00;
  --color-warning-subdued: rgba(251, 229, 4, 0.1);
  --color-warning-deep: #FC7800;
  --color-info-base: #0A84FF;
  --color-info-secondary: rgba(10, 132, 255, 0.05);
  --color-red-font: #F59C9D;
  --color-red-background: rgba(255, 69, 58, 0.16);
  --color-red-hover: rgba(255, 69, 58, 0.26);
  --color-green-font: #9AE89C;
  --color-green-background: rgba(50, 215, 75, 0.16);
  --color-green-hover: rgba(50, 215, 75, 0.26);
  --color-yellow-font: #FFF495;
  --color-yellow-background: rgba(251, 229, 4, 0.16);
  --color-yellow-hover: rgba(251, 229, 4, 0.26);
  --color-blue-font: #8CC9FF;
  --color-blue-background: rgba(10, 132, 255, 0.16);
  --color-blue-hover: rgba(10, 132, 255, 0.26);
  --color-gray-font: var(--color-font-base);
  --color-gray-background: rgba(112, 115, 119, 0.16);
  --color-gray-hover: rgba(112, 115, 119, 0.26);
  --color-structure-base: #141920;
  --color-structure-base-rgb: 20,25,32; /* Use to set opacity */
  --color-structure-secondary: #1F242B;
  --color-structure-secondary-rgb: 31,36,43; /* Use to set opacity */
  --color-structure-tertiary: #2B2F36;
  --color-structure-tertiary-rgb: 43,47,54; /* Use to set opacity */
  --color-structure-overlay: #141920;
  --color-structure-neutral: #707377;
  --color-structure-highlight-base: #2B2F36;
  --color-structure-highlight-active: rgba(10, 132, 255, 0.1);
  --color-shadow-base: rgba(0, 0, 0, 0.3);
  --color-focus-base: #0A84FF;
  --color-focus-secondary: var(--color-structure-base);
  --color-focus-success: #32D74B;
  --color-focus-danger: #FF453A;
  --color-focus-warning: #FBE504;
  --color-border-base: rgba(255, 255, 255, 0.12);
  --color-border-secondary: rgba(255, 255, 255, 0.09);
  --color-border-active: #9D9FA3;
  --color-border-primary-base: var(--color-primary-base);
  --color-border-primary-active: var(--color-primary-active);
  --color-border-success-base: var(--color-success-base);
  --color-border-success-active: var(--color-success-active);
  --color-border-warning-base: var(--color-warning-base);
  --color-border-warning-active: var(--color-warning-active);
  --color-border-danger-base: var(--color-danger-base);
  --color-border-danger-active: var(--color-danger-active);
  --color-border-neutral-base: #707377;
  --color-border-neutral-active: #595C61;
  --color-border-base-no-opacity: #595C61;
  --color-navigation-side-base: var(--color-structure-secondary);
  --color-navigation-side-active: var(--color-structure-secondary);
  --color-navigation-side-link: var(--color-font-link-base);
  --color-navigation-top-base: #2B2F36;
  --color-navigation-top-shadow: rgba(0, 0, 0, 0.12);
  --color-navigation-top-text: var(--color-font-base);
  --color-navigation-top-logo: #ffffff;
  --color-navigation-body-base: #ffffff;
  --color-navigation-border: rgba(255, 255, 255, 0.5);
  --color-navigation-item-base: rgba(0, 0, 0, 0);
  --color-navigation-item-active: rgba(255, 255, 255, 0.05);
  --color-navigation-item-secondary: var(--color-font-secondary);
  --color-navigation-item-text: var(--color-font-base);
  --color-navigation-item-icon: var(--color-font-base);
  --color-navigation-brand-base: #ffffff;
  --color-indicator-success: #32D74B;
  --color-indicator-secondary: #707377;
  --color-indicator-warning: #FF9F0A;
  --color-indicator-danger: #FF453A;
  --color-indicator-primary: #0093FF;
  --color-indicator-tooltip: #ffffff;
  --color-indicator-progress: var(--color-primary-base);
  --color-indicator-badge: var(--color-danger-base);
  --color-indicator-tag-base: #86898D;
  --color-indicator-tag-secondary: #5C6982;
  --color-indicator-tag-highlight-primary: #3426C7;
  --color-indicator-tag-highlight-secondary: #FF0046;
  --color-indicator-tag-highlight-text: var(--color-font-base);
  --color-action-primary-base: var(--color-primary-base);
  --color-action-primary-active: var(--color-primary-active);
  --color-action-secondary-base: var(--color-secondary-base);
  --color-action-secondary-active: var(--color-secondary-active);
  --color-action-secondary-spinner: #ffffff;
  --color-action-danger-base: var(--color-danger-base);
  --color-action-danger-active: var(--color-danger-active);
  --color-action-ghost-base: rgba(0, 0, 0, 0);
  --color-action-ghost-focus: var(--color-secondary-base);
  --color-action-ghost-active: var(--color-secondary-active);
  --color-input-base: var(--color-structure-base);
  --color-input-primary-base: var(--color-primary-base);
  --color-input-primary-active: var(--color-primary-active);
  --color-input-border-base: var(--color-border-neutral-base);
  --color-input-border-active: var(--color-primary-base);
  --color-input-tag: var(--color-secondary-base);
  --color-input-on-surface: var(--color-structure-base);
  --color-input-readonly: #1F242B;
  --color-list-base: var(--color-structure-secondary);
  --color-list-highlight-base: var(--color-structure-highlight-base);
  --color-list-highlight-active: var(--color-structure-highlight-active);
  --color-list-border: var(--color-border-secondary);
  --color-card-base: var(--color-structure-secondary);
  --color-card-active: var(--color-structure-highlight-base);
  --color-editor-base: var(--color-structure-base);
  --color-editor-selected: rgba(113, 124, 180, 0.2);
  --color-editor-selected-active: rgba(113, 124, 180, 0.2);
  --color-editor-keyword: #c792ea;
  --color-editor-atom: #f78c6c;
  --color-editor-number: #ff5370;
  --color-editor-def: #82aaff;
  --color-editor-variable: #f07178;
  --color-editor-variable-2: #eeffff;
  --color-editor-variable-3: #decb6b;
  --color-editor-type: #decb6b;
  --color-editor-comment: #464b5d;
  --color-editor-string: #c3e88d;
  --color-editor-string-2: #f07178;
  --color-editor-meta: #ffcb6b;
  --color-editor-operator: #89ddff;
  --color-editor-qualifier: #decb6b;
  --color-editor-property: #c792ea;
  --color-editor-builtin: #ffcb6b;
  --color-editor-bracket: #000000;
  --color-editor-tag: #ff5370;
  --color-editor-attribute: #c792ea;
  --color-editor-hr: #000000;
  --color-editor-link: #000000;
  --color-editor-error: #ff5370;
  --color-modal-base: var(--color-structure-secondary);
  --color-modal-border: rgba(0, 0, 0, 0);
  --color-modal-overlay: rgba(0, 0, 0, 0.6);
  --color-upload-base: rgba(0, 0, 0, 0);
  --color-upload-active: var(--color-structure-highlight-active);
  --color-avatar-bg-red: #d9a7b3;
  --color-avatar-bg-orange: #eebfb1;
  --color-avatar-bg-green: #9ed6bb;
  --color-avatar-bg-purple: #b4a7d9;
  --color-chart-blue-active: #0A84FF;
  --color-chart-blue-disabled: #727272;
  --color-chart-blue-hover: #1772EB;
  --color-chart-green-active: #32D74B;
  --color-chart-green-disabled: #a4a4a4;
  --color-chart-green-hover: #00CE19;
  --color-chart-yellow-active: #FFD60A;
  --color-chart-yellow-disabled: #e0e0e0;
  --color-chart-yellow-hover: #FBE504;
  --color-chart-red-active: #FF453A;
  --color-chart-red-disabled: #6d6d6d;
  --color-chart-red-hover: #F03939;
  --color-chart-orange: #FF9F0A;
  --color-chart-orange-hover: #FF8C0B;
  --color-chart-mint: #66D4CF;
  --color-chart-mint-hover: #00C1B9;
  --color-chart-teal: #6AC4DC;
  --color-chart-teal-hover: #68B9D3;
  --color-chart-cyan: #5AC8F5;
  --color-chart-cyan-hover: #3BBDF4;
  --color-chart-indigo: #5E5CE6;
  --color-chart-indigo-hover: #423BDE;
  --color-chart-purple: #BF5AF2;
  --color-chart-purple-hover: #B029EF;
  --color-chart-pink: #FF375F;
  --color-chart-pink-hover: #FF0046;
  --color-chart-brown: #AC8E68;
  --color-chart-brown-hover: #96764C;
  --color-chart-gray: #707377;
  --color-chart-gray-hover: #595C61;
  --color-scrollbar-thumb: var(--color-border-neutral-base);
  --color-scrollbar-track: var(--color-border-secondary);
  --color-font-base: rgba(255, 255, 255, 0.87);
  --color-font-secondary: rgba(255, 255, 255, 0.74);
  --color-font-tertiary: rgba(255, 255, 255, 0.6);
  --color-font-placeholder: var(--color-font-tertiary);
  --color-font-inverse: #000000;
  --color-font-tooltip: var(--color-font-inverse);
  --color-font-danger: var(--color-danger-base);
  --color-font-link-base: var(--color-primary-base);
  --color-font-link-active: var(--color-primary-active);
  --color-font-link-wash: #63C3F6;
  --color-font-link-wash-active: #4EB6F4;
  --color-orange-font: #FFDE82;
  --color-orange-background: rgba(255, 159, 10, 0.16);
  --color-orange-hover: rgba(255, 159, 10, 0.26);
  --color-mint-font: #66D4CF;
  --color-mint-background: rgba(102, 212, 207, 0.16);
  --color-mint-hover: rgba(102, 212, 207, 0.26);
  --color-teal-font: #96DCEF;
  --color-teal-background: rgba(106, 196, 220, 0.16);
  --color-teal-hover: rgba(106, 196, 220, 0.26);
  --color-cyan-font: #87D9F8;
  --color-cyan-background: rgba(90, 200, 245, 0.16);
  --color-cyan-hover: rgba(90, 200, 245, 0.26);
  --color-indigo-font: #A2A1F1;
  --color-indigo-background: rgba(94, 92, 230, 0.16);
  --color-indigo-hover: rgba(94, 92, 230, 0.26);
  --color-purple-font: #D28CF5;
  --color-purple-background: rgba(191, 90, 242, 0.16);
  --color-purple-hover: rgba(191, 90, 242, 0.26);
  --color-pink-font: #F794A3;
  --color-pink-background: rgba(255, 55, 95, 0.16);
  --color-pink-hover: rgba(255, 55, 95, 0.26);
  --color-brown-font: #CAAE8D;
  --color-brown-background: rgba(172, 142, 104, 0.16);
  --color-brown-hover: rgba(172, 142, 104, 0.26);
  --color-gradient-blue: linear-gradient(235.71deg, #1772EB 0%, #5AC8F5 69.55%);
  --color-gradient-indigo: linear-gradient(235.71deg, #4942BE 0%, #888DE5 69.55%);
  --color-switcher-sidebar-surface: var(--color-structure-secondary);
  --color-switcher-sidebar-item: var(--color-structure-tertiary);
  --color-switcher-main-surface: var(--color-structure-tertiary);
  --color-switcher-main-item: var(--color-structure-secondary);
  --color-switcher-main-item-active: var(--color-structure-base);
  --color-switcher-main-subtitle: var(--color-avatar-bg-red);
  --color-popover-overlay: #2B2F36;
  --color-tag-highlight-font: var(--color-font-base);
  --color-tag-highlight-border: rgba(0, 0, 0, 0);
  --color-tag-highlight-gradient-start: #3426C7;
  --color-tag-highlight-gradient-end: #FF0046;
  --opacity-disabled: 40%;
  color-scheme: dark;
}

body,
html {
  height: 100%;
  margin: auto;
  overflow-x: clip;
  scroll-behavior: smooth;
}

main {
  background: var(--color-structure-secondary);
}

.sr-only {
  position: absolute;
  height: 1px;
  width: 1px;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
  -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
  overflow: hidden !important;
}

main {
  --size-ai-width: 424px;
  --size-ai-grid-width: 0px;
  grid-area: content;
  display: grid;
  transition: 0.3s ease;
  width: 100%;
  height: calc(100dvh - var(--size-navigation-top));
  grid-template-areas: "main ai";
  grid-template-columns: auto var(--size-ai-grid-width);
}
@media only screen and (max-width: 1280px) {
  main {
    grid-template-columns: auto var(--size-ai-grid-width);
  }
}
main > * {
  overflow: auto;
}
main:has(.ai-open) {
  --size-ai-grid-width: var(--size-ai-width);
}
main:has(.ai-draggable) {
  --size-ai-grid-width: 0px;
}
main .ai-assistant {
  --size-assistant-height: calc(100dvh - var(--size-navigation-top));
  grid-area: ai;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
main .ai-assistant.ai-open {
  opacity: 1;
  visibility: visible;
}

.jamf-app-layout:has([data-collapsed=true]) {
  grid-template-columns: var(--size-navigation-side-collapsed) minmax(0, 1fr);
}

jamf-nav-side-container-v5-11-2::part(nav-follow-button) {
  color: var(--color-font-base);
}

.jamf-app-layout.onboarder main {
  background: var(--color-structure-base);
}

.jamf-app-layout.onboarder {
  --size-navigation-side: 480px;
}

.space-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.items-center {
  align-items: center;
}

.items-end {
  align-items: flex-end;
}

jamf-radio-v5-11-2.radio-border-box::part(container) {
  box-sizing: border-box;
}

a:has(jamf-link-v5-11-2[as-button]):hover,
a:has(jamf-card-v5-11-2):hover,
a:has(jamf-nav-logo-v5-11-2):hover {
  text-decoration: none;
}

.button-max-content::part(button) {
  width: max-content;
}

.max-content {
  width: max-content;
}

.whitespace-nowrap {
  white-space: nowrap;
}

jamf-link-v5-11-2.highlight::part(slot-container) {
  background-color: var(--color-font-base);
  border-color: var(--color-font-base);
}
jamf-link-v5-11-2.highlight::part(slot-container):hover {
  background-color: var(--color-font-secondary);
  border-color: var(--color-font-secondary);
}

jamf-button-v5-11-2.highlight::part(button) {
  background-color: var(--color-font-base);
  border-color: var(--color-font-base);
}
jamf-button-v5-11-2.highlight::part(button):hover {
  background-color: var(--color-font-secondary);
  border-color: var(--color-font-secondary);
}

.ag-row {
  z-index: 0;
}
.ag-row.ag-row-focus {
  z-index: 1;
}

.disc-list {
  list-style-type: disc;
  padding-left: calc(3px * var(--size-base-spacing));
}
.disc-list li {
  margin-bottom: calc(0.5px * var(--size-base-spacing));
}
.disc-list li:last-child {
  margin-bottom: 0;
}

.onboarding-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.onboarding-content-top {
  flex: 1;
  overflow-y: auto;
}

.onboarding-content-bottom {
  flex-shrink: 0;
  padding-bottom: calc(3px * var(--size-base-spacing));
  margin-top: calc(1px * var(--size-base-spacing));
}