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

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

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

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


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

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

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

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

.pswp img {
  max-width: none;
}

.pswp--open {
	display: block;
}

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

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

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

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

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

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

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

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

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


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

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

.pswp__hidden {
	display: none !important;
}

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


/*

  PhotoSwipe UI

*/

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

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

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

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

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

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

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

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

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

.pswp__icn:focus {
	outline: 0;
}

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

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

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


/*

  Close button

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


/*

  Arrow buttons

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

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

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

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

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

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

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

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

/*

  Zoom button

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

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

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


/*

  Loading indicator

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

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

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

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


/*

  "1 of 10" counter

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

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

/**
 * Copyright (c) 2014 The xterm.js authors. All rights reserved.
 * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
 * https://github.com/chjj/term.js
 * @license MIT
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 *
 * Originally forked from (with the author's permission):
 *   Fabrice Bellard's javascript vt100 for jslinux:
 *   http://bellard.org/jslinux/
 *   Copyright (c) 2011 Fabrice Bellard
 *   The original design remains. The terminal itself
 *   has been extended to include xterm CSI codes, among
 *   other features.
 */

/**
 *  Default styles for xterm.js
 */

.xterm {
    cursor: text;
    position: relative;
    user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
}

.xterm.focus,
.xterm:focus {
    outline: none;
}

.xterm .xterm-helpers {
    position: absolute;
    top: 0;
    /**
     * The z-index of the helpers must be higher than the canvases in order for
     * IMEs to appear on top.
     */
    z-index: 5;
}

.xterm .xterm-helper-textarea {
    padding: 0;
    border: 0;
    margin: 0;
    /* Move textarea out of the screen to the far left, so that the cursor is not visible */
    position: absolute;
    opacity: 0;
    left: -9999em;
    top: 0;
    width: 0;
    height: 0;
    z-index: -5;
    /** Prevent wrapping so the IME appears against the textarea at the correct position */
    white-space: nowrap;
    overflow: hidden;
    resize: none;
}

.xterm .composition-view {
    /* TODO: Composition position got messed up somewhere */
    background: #000;
    color: #FFF;
    display: none;
    position: absolute;
    white-space: nowrap;
    z-index: 1;
}

.xterm .composition-view.active {
    display: block;
}

.xterm .xterm-viewport {
    /* On OS X this is required in order for the scroll bar to appear fully opaque */
    background-color: #000;
    overflow-y: scroll;
    cursor: default;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
}

.xterm .xterm-screen {
    position: relative;
}

.xterm .xterm-screen canvas {
    position: absolute;
    left: 0;
    top: 0;
}

.xterm .xterm-scroll-area {
    visibility: hidden;
}

.xterm-char-measure-element {
    display: inline-block;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: -9999em;
    line-height: normal;
}

.xterm.enable-mouse-events {
    /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
    cursor: default;
}

.xterm.xterm-cursor-pointer,
.xterm .xterm-cursor-pointer {
    cursor: pointer;
}

.xterm.column-select.focus {
    /* Column selection mode */
    cursor: crosshair;
}

.xterm .xterm-accessibility:not(.debug),
.xterm .xterm-message {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
    color: transparent;
    pointer-events: none;
}

.xterm .xterm-accessibility-tree:not(.debug) *::selection {
  color: transparent;
}

.xterm .xterm-accessibility-tree {
  user-select: text;
  white-space: pre;
}

.xterm .live-region {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.xterm-dim {
    /* Dim should not apply to background, so the opacity of the foreground color is applied
     * explicitly in the generated class and reset to 1 here */
    opacity: 1 !important;
}

.xterm-underline-1 { text-decoration: underline; }
.xterm-underline-2 { text-decoration: double underline; }
.xterm-underline-3 { text-decoration: wavy underline; }
.xterm-underline-4 { text-decoration: dotted underline; }
.xterm-underline-5 { text-decoration: dashed underline; }

.xterm-overline {
    text-decoration: overline;
}

.xterm-overline.xterm-underline-1 { text-decoration: overline underline; }
.xterm-overline.xterm-underline-2 { text-decoration: overline double underline; }
.xterm-overline.xterm-underline-3 { text-decoration: overline wavy underline; }
.xterm-overline.xterm-underline-4 { text-decoration: overline dotted underline; }
.xterm-overline.xterm-underline-5 { text-decoration: overline dashed underline; }

.xterm-strikethrough {
    text-decoration: line-through;
}

.xterm-screen .xterm-decoration-container .xterm-decoration {
	z-index: 6;
	position: absolute;
}

.xterm-screen .xterm-decoration-container .xterm-decoration.xterm-decoration-top-layer {
	z-index: 7;
}

.xterm-decoration-overview-ruler {
    z-index: 8;
    position: absolute;
    top: 0;
    right: 0;
    pointer-events: none;
}

.xterm-decoration-top {
    z-index: 2;
    position: relative;
}

/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
@layer base {
  *, :before, :after {
    box-sizing: border-box;
  }

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

  body {
    margin: 0;
  }

  b, strong {
    font-weight: bolder;
  }

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

  small {
    font-size: 80%;
  }

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

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    border-color: currentColor;
  }

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

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

  legend {
    padding: 0;
  }

  progress {
    vertical-align: baseline;
  }

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

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

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

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

  summary {
    display: list-item;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .lg\:bui-py-4 {
    padding-top: var(--bui-space-4);
    padding-bottom: var(--bui-space-4);
  }

  .lg\:bui-py-5 {
    padding-top: var(--bui-space-5);
    padding-bottom: var(--bui-space-5);
  }

  .lg\:bui-py-6 {
    padding-top: var(--bui-space-6);
    padding-bottom: var(--bui-space-6);
  }

  .lg\:bui-py-7 {
    padding-top: var(--bui-space-7);
    padding-bottom: var(--bui-space-7);
  }

  .lg\:bui-py-8 {
    padding-top: var(--bui-space-8);
    padding-bottom: var(--bui-space-8);
  }

  .lg\:bui-py-9 {
    padding-top: var(--bui-space-9);
    padding-bottom: var(--bui-space-9);
  }

  .lg\:bui-py-10 {
    padding-top: var(--bui-space-10);
    padding-bottom: var(--bui-space-10);
  }

  .lg\:bui-py-11 {
    padding-top: var(--bui-space-11);
    padding-bottom: var(--bui-space-11);
  }

  .lg\:bui-py-12 {
    padding-top: var(--bui-space-12);
    padding-bottom: var(--bui-space-12);
  }

  .lg\:bui-py-13 {
    padding-top: var(--bui-space-13);
    padding-bottom: var(--bui-space-13);
  }

  .lg\:bui-py-14 {
    padding-top: var(--bui-space-14);
    padding-bottom: var(--bui-space-14);
  }
}

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

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

  .xl\:bui-py-1 {
    padding-top: var(--bui-space-1);
    padding-bottom: var(--bui-space-1);
  }

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

  .xl\:bui-py-2 {
    padding-top: var(--bui-space-2);
    padding-bottom: var(--bui-space-2);
  }

  .xl\:bui-py-3 {
    padding-top: var(--bui-space-3);
    padding-bottom: var(--bui-space-3);
  }

  .xl\:bui-py-4 {
    padding-top: var(--bui-space-4);
    padding-bottom: var(--bui-space-4);
  }

  .xl\:bui-py-5 {
    padding-top: var(--bui-space-5);
    padding-bottom: var(--bui-space-5);
  }

  .xl\:bui-py-6 {
    padding-top: var(--bui-space-6);
    padding-bottom: var(--bui-space-6);
  }

  .xl\:bui-py-7 {
    padding-top: var(--bui-space-7);
    padding-bottom: var(--bui-space-7);
  }

  .xl\:bui-py-8 {
    padding-top: var(--bui-space-8);
    padding-bottom: var(--bui-space-8);
  }

  .xl\:bui-py-9 {
    padding-top: var(--bui-space-9);
    padding-bottom: var(--bui-space-9);
  }

  .xl\:bui-py-10 {
    padding-top: var(--bui-space-10);
    padding-bottom: var(--bui-space-10);
  }

  .xl\:bui-py-11 {
    padding-top: var(--bui-space-11);
    padding-bottom: var(--bui-space-11);
  }

  .xl\:bui-py-12 {
    padding-top: var(--bui-space-12);
    padding-bottom: var(--bui-space-12);
  }

  .xl\:bui-py-13 {
    padding-top: var(--bui-space-13);
    padding-bottom: var(--bui-space-13);
  }

  .xl\:bui-py-14 {
    padding-top: var(--bui-space-14);
    padding-bottom: var(--bui-space-14);
  }
}

.bui-px {
  padding-left: var(--px);
  padding-right: var(--px);
}

.bui-px-0\.5 {
  padding-left: var(--bui-space-0_5);
  padding-right: var(--bui-space-0_5);
}

.bui-px-1 {
  padding-left: var(--bui-space-1);
  padding-right: var(--bui-space-1);
}

.bui-px-1\.5 {
  padding-left: var(--bui-space-1_5);
  padding-right: var(--bui-space-1_5);
}

.bui-px-2 {
  padding-left: var(--bui-space-2);
  padding-right: var(--bui-space-2);
}

.bui-px-3 {
  padding-left: var(--bui-space-3);
  padding-right: var(--bui-space-3);
}

.bui-px-4 {
  padding-left: var(--bui-space-4);
  padding-right: var(--bui-space-4);
}

.bui-px-5 {
  padding-left: var(--bui-space-5);
  padding-right: var(--bui-space-5);
}

.bui-px-6 {
  padding-left: var(--bui-space-6);
  padding-right: var(--bui-space-6);
}

.bui-px-7 {
  padding-left: var(--bui-space-7);
  padding-right: var(--bui-space-7);
}

.bui-px-8 {
  padding-left: var(--bui-space-8);
  padding-right: var(--bui-space-8);
}

.bui-px-9 {
  padding-left: var(--bui-space-9);
  padding-right: var(--bui-space-9);
}

.bui-px-10 {
  padding-left: var(--bui-space-10);
  padding-right: var(--bui-space-10);
}

.bui-px-11 {
  padding-left: var(--bui-space-11);
  padding-right: var(--bui-space-11);
}

.bui-px-12 {
  padding-left: var(--bui-space-12);
  padding-right: var(--bui-space-12);
}

.bui-px-13 {
  padding-left: var(--bui-space-13);
  padding-right: var(--bui-space-13);
}

.bui-px-14 {
  padding-left: var(--bui-space-14);
  padding-right: var(--bui-space-14);
}

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

  .xs\:bui-px-0\.5 {
    padding-left: var(--bui-space-0_5);
    padding-right: var(--bui-space-0_5);
  }

  .xs\:bui-px-1 {
    padding-left: var(--bui-space-1);
    padding-right: var(--bui-space-1);
  }

  .xs\:bui-px-1\.5 {
    padding-left: var(--bui-space-1_5);
    padding-right: var(--bui-space-1_5);
  }

  .xs\:bui-px-2 {
    padding-left: var(--bui-space-2);
    padding-right: var(--bui-space-2);
  }

  .xs\:bui-px-3 {
    padding-left: var(--bui-space-3);
    padding-right: var(--bui-space-3);
  }

  .xs\:bui-px-4 {
    padding-left: var(--bui-space-4);
    padding-right: var(--bui-space-4);
  }

  .xs\:bui-px-5 {
    padding-left: var(--bui-space-5);
    padding-right: var(--bui-space-5);
  }

  .xs\:bui-px-6 {
    padding-left: var(--bui-space-6);
    padding-right: var(--bui-space-6);
  }

  .xs\:bui-px-7 {
    padding-left: var(--bui-space-7);
    padding-right: var(--bui-space-7);
  }

  .xs\:bui-px-8 {
    padding-left: var(--bui-space-8);
    padding-right: var(--bui-space-8);
  }

  .xs\:bui-px-9 {
    padding-left: var(--bui-space-9);
    padding-right: var(--bui-space-9);
  }

  .xs\:bui-px-10 {
    padding-left: var(--bui-space-10);
    padding-right: var(--bui-space-10);
  }

  .xs\:bui-px-11 {
    padding-left: var(--bui-space-11);
    padding-right: var(--bui-space-11);
  }

  .xs\:bui-px-12 {
    padding-left: var(--bui-space-12);
    padding-right: var(--bui-space-12);
  }

  .xs\:bui-px-13 {
    padding-left: var(--bui-space-13);
    padding-right: var(--bui-space-13);
  }

  .xs\:bui-px-14 {
    padding-left: var(--bui-space-14);
    padding-right: var(--bui-space-14);
  }
}

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

  .sm\:bui-px-0\.5 {
    padding-left: var(--bui-space-0_5);
    padding-right: var(--bui-space-0_5);
  }

  .sm\:bui-px-1 {
    padding-left: var(--bui-space-1);
    padding-right: var(--bui-space-1);
  }

  .sm\:bui-px-1\.5 {
    padding-left: var(--bui-space-1_5);
    padding-right: var(--bui-space-1_5);
  }

  .sm\:bui-px-2 {
    padding-left: var(--bui-space-2);
    padding-right: var(--bui-space-2);
  }

  .sm\:bui-px-3 {
    padding-left: var(--bui-space-3);
    padding-right: var(--bui-space-3);
  }

  .sm\:bui-px-4 {
    padding-left: var(--bui-space-4);
    padding-right: var(--bui-space-4);
  }

  .sm\:bui-px-5 {
    padding-left: var(--bui-space-5);
    padding-right: var(--bui-space-5);
  }

  .sm\:bui-px-6 {
    padding-left: var(--bui-space-6);
    padding-right: var(--bui-space-6);
  }

  .sm\:bui-px-7 {
    padding-left: var(--bui-space-7);
    padding-right: var(--bui-space-7);
  }

  .sm\:bui-px-8 {
    padding-left: var(--bui-space-8);
    padding-right: var(--bui-space-8);
  }

  .sm\:bui-px-9 {
    padding-left: var(--bui-space-9);
    padding-right: var(--bui-space-9);
  }

  .sm\:bui-px-10 {
    padding-left: var(--bui-space-10);
    padding-right: var(--bui-space-10);
  }

  .sm\:bui-px-11 {
    padding-left: var(--bui-space-11);
    padding-right: var(--bui-space-11);
  }

  .sm\:bui-px-12 {
    padding-left: var(--bui-space-12);
    padding-right: var(--bui-space-12);
  }

  .sm\:bui-px-13 {
    padding-left: var(--bui-space-13);
    padding-right: var(--bui-space-13);
  }

  .sm\:bui-px-14 {
    padding-left: var(--bui-space-14);
    padding-right: var(--bui-space-14);
  }
}

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

  .md\:bui-px-0\.5 {
    padding-left: var(--bui-space-0_5);
    padding-right: var(--bui-space-0_5);
  }

  .md\:bui-px-1 {
    padding-left: var(--bui-space-1);
    padding-right: var(--bui-space-1);
  }

  .md\:bui-px-1\.5 {
    padding-left: var(--bui-space-1_5);
    padding-right: var(--bui-space-1_5);
  }

  .md\:bui-px-2 {
    padding-left: var(--bui-space-2);
    padding-right: var(--bui-space-2);
  }

  .md\:bui-px-3 {
    padding-left: var(--bui-space-3);
    padding-right: var(--bui-space-3);
  }

  .md\:bui-px-4 {
    padding-left: var(--bui-space-4);
    padding-right: var(--bui-space-4);
  }

  .md\:bui-px-5 {
    padding-left: var(--bui-space-5);
    padding-right: var(--bui-space-5);
  }

  .md\:bui-px-6 {
    padding-left: var(--bui-space-6);
    padding-right: var(--bui-space-6);
  }

  .md\:bui-px-7 {
    padding-left: var(--bui-space-7);
    padding-right: var(--bui-space-7);
  }

  .md\:bui-px-8 {
    padding-left: var(--bui-space-8);
    padding-right: var(--bui-space-8);
  }

  .md\:bui-px-9 {
    padding-left: var(--bui-space-9);
    padding-right: var(--bui-space-9);
  }

  .md\:bui-px-10 {
    padding-left: var(--bui-space-10);
    padding-right: var(--bui-space-10);
  }

  .md\:bui-px-11 {
    padding-left: var(--bui-space-11);
    padding-right: var(--bui-space-11);
  }

  .md\:bui-px-12 {
    padding-left: var(--bui-space-12);
    padding-right: var(--bui-space-12);
  }

  .md\:bui-px-13 {
    padding-left: var(--bui-space-13);
    padding-right: var(--bui-space-13);
  }

  .md\:bui-px-14 {
    padding-left: var(--bui-space-14);
    padding-right: var(--bui-space-14);
  }
}

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

  .lg\:bui-px-0\.5 {
    padding-left: var(--bui-space-0_5);
    padding-right: var(--bui-space-0_5);
  }

  .lg\:bui-px-1 {
    padding-left: var(--bui-space-1);
    padding-right: var(--bui-space-1);
  }

  .lg\:bui-px-1\.5 {
    padding-left: var(--bui-space-1_5);
    padding-right: var(--bui-space-1_5);
  }

  .lg\:bui-px-2 {
    padding-left: var(--bui-space-2);
    padding-right: var(--bui-space-2);
  }

  .lg\:bui-px-3 {
    padding-left: var(--bui-space-3);
    padding-right: var(--bui-space-3);
  }

  .lg\:bui-px-4 {
    padding-left: var(--bui-space-4);
    padding-right: var(--bui-space-4);
  }

  .lg\:bui-px-5 {
    padding-left: var(--bui-space-5);
    padding-right: var(--bui-space-5);
  }

  .lg\:bui-px-6 {
    padding-left: var(--bui-space-6);
    padding-right: var(--bui-space-6);
  }

  .lg\:bui-px-7 {
    padding-left: var(--bui-space-7);
    padding-right: var(--bui-space-7);
  }

  .lg\:bui-px-8 {
    padding-left: var(--bui-space-8);
    padding-right: var(--bui-space-8);
  }

  .lg\:bui-px-9 {
    padding-left: var(--bui-space-9);
    padding-right: var(--bui-space-9);
  }

  .lg\:bui-px-10 {
    padding-left: var(--bui-space-10);
    padding-right: var(--bui-space-10);
  }

  .lg\:bui-px-11 {
    padding-left: var(--bui-space-11);
    padding-right: var(--bui-space-11);
  }

  .lg\:bui-px-12 {
    padding-left: var(--bui-space-12);
    padding-right: var(--bui-space-12);
  }

  .lg\:bui-px-13 {
    padding-left: var(--bui-space-13);
    padding-right: var(--bui-space-13);
  }

  .lg\:bui-px-14 {
    padding-left: var(--bui-space-14);
    padding-right: var(--bui-space-14);
  }
}

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

  .xl\:bui-px-0\.5 {
    padding-left: var(--bui-space-0_5);
    padding-right: var(--bui-space-0_5);
  }

  .xl\:bui-px-1 {
    padding-left: var(--bui-space-1);
    padding-right: var(--bui-space-1);
  }

  .xl\:bui-px-1\.5 {
    padding-left: var(--bui-space-1_5);
    padding-right: var(--bui-space-1_5);
  }

  .xl\:bui-px-2 {
    padding-left: var(--bui-space-2);
    padding-right: var(--bui-space-2);
  }

  .xl\:bui-px-3 {
    padding-left: var(--bui-space-3);
    padding-right: var(--bui-space-3);
  }

  .xl\:bui-px-4 {
    padding-left: var(--bui-space-4);
    padding-right: var(--bui-space-4);
  }

  .xl\:bui-px-5 {
    padding-left: var(--bui-space-5);
    padding-right: var(--bui-space-5);
  }

  .xl\:bui-px-6 {
    padding-left: var(--bui-space-6);
    padding-right: var(--bui-space-6);
  }

  .xl\:bui-px-7 {
    padding-left: var(--bui-space-7);
    padding-right: var(--bui-space-7);
  }

  .xl\:bui-px-8 {
    padding-left: var(--bui-space-8);
    padding-right: var(--bui-space-8);
  }

  .xl\:bui-px-9 {
    padding-left: var(--bui-space-9);
    padding-right: var(--bui-space-9);
  }

  .xl\:bui-px-10 {
    padding-left: var(--bui-space-10);
    padding-right: var(--bui-space-10);
  }

  .xl\:bui-px-11 {
    padding-left: var(--bui-space-11);
    padding-right: var(--bui-space-11);
  }

  .xl\:bui-px-12 {
    padding-left: var(--bui-space-12);
    padding-right: var(--bui-space-12);
  }

  .xl\:bui-px-13 {
    padding-left: var(--bui-space-13);
    padding-right: var(--bui-space-13);
  }

  .xl\:bui-px-14 {
    padding-left: var(--bui-space-14);
    padding-right: var(--bui-space-14);
  }
}

.bui-m {
  margin: var(--m);
}

.bui-m-0\.5 {
  margin: var(--bui-space-0_5);
}

.bui-m-1 {
  margin: var(--bui-space-1);
}

.bui-m-1\.5 {
  margin: var(--bui-space-1_5);
}

.bui-m-2 {
  margin: var(--bui-space-2);
}

.bui-m-3 {
  margin: var(--bui-space-3);
}

.bui-m-4 {
  margin: var(--bui-space-4);
}

.bui-m-5 {
  margin: var(--bui-space-5);
}

.bui-m-6 {
  margin: var(--bui-space-6);
}

.bui-m-7 {
  margin: var(--bui-space-7);
}

.bui-m-8 {
  margin: var(--bui-space-8);
}

.bui-m-9 {
  margin: var(--bui-space-9);
}

.bui-m-10 {
  margin: var(--bui-space-10);
}

.bui-m-11 {
  margin: var(--bui-space-11);
}

.bui-m-12 {
  margin: var(--bui-space-12);
}

.bui-m-13 {
  margin: var(--bui-space-13);
}

.bui-m-14 {
  margin: var(--bui-space-14);
}

@media (width >= 640px) {
  .xs\:bui-m {
    margin: var(--p-xs);
  }

  .xs\:bui-m-0\.5 {
    margin: var(--bui-space-0_5);
  }

  .xs\:bui-m-1 {
    margin: var(--bui-space-1);
  }

  .xs\:bui-m-1\.5 {
    margin: var(--bui-space-1_5);
  }

  .xs\:bui-m-2 {
    margin: var(--bui-space-2);
  }

  .xs\:bui-m-3 {
    margin: var(--bui-space-3);
  }

  .xs\:bui-m-4 {
    margin: var(--bui-space-4);
  }

  .xs\:bui-m-5 {
    margin: var(--bui-space-5);
  }

  .xs\:bui-m-6 {
    margin: var(--bui-space-6);
  }

  .xs\:bui-m-7 {
    margin: var(--bui-space-7);
  }

  .xs\:bui-m-8 {
    margin: var(--bui-space-8);
  }

  .xs\:bui-m-9 {
    margin: var(--bui-space-9);
  }

  .xs\:bui-m-10 {
    margin: var(--bui-space-10);
  }

  .xs\:bui-m-11 {
    margin: var(--bui-space-11);
  }

  .xs\:bui-m-12 {
    margin: var(--bui-space-12);
  }

  .xs\:bui-m-13 {
    margin: var(--bui-space-13);
  }

  .xs\:bui-m-14 {
    margin: var(--bui-space-14);
  }
}

@media (width >= 768px) {
  .sm\:bui-m {
    margin: var(--p-sm);
  }

  .sm\:bui-m-0\.5 {
    margin: var(--bui-space-0_5);
  }

  .sm\:bui-m-1 {
    margin: var(--bui-space-1);
  }

  .sm\:bui-m-1\.5 {
    margin: var(--bui-space-1_5);
  }

  .sm\:bui-m-2 {
    margin: var(--bui-space-2);
  }

  .sm\:bui-m-3 {
    margin: var(--bui-space-3);
  }

  .sm\:bui-m-4 {
    margin: var(--bui-space-4);
  }

  .sm\:bui-m-5 {
    margin: var(--bui-space-5);
  }

  .sm\:bui-m-6 {
    margin: var(--bui-space-6);
  }

  .sm\:bui-m-7 {
    margin: var(--bui-space-7);
  }

  .sm\:bui-m-8 {
    margin: var(--bui-space-8);
  }

  .sm\:bui-m-9 {
    margin: var(--bui-space-9);
  }

  .sm\:bui-m-10 {
    margin: var(--bui-space-10);
  }

  .sm\:bui-m-11 {
    margin: var(--bui-space-11);
  }

  .sm\:bui-m-12 {
    margin: var(--bui-space-12);
  }

  .sm\:bui-m-13 {
    margin: var(--bui-space-13);
  }

  .sm\:bui-m-14 {
    margin: var(--bui-space-14);
  }
}

@media (width >= 1024px) {
  .md\:bui-m {
    margin: var(--p-md);
  }

  .md\:bui-m-0\.5 {
    margin: var(--bui-space-0_5);
  }

  .md\:bui-m-1 {
    margin: var(--bui-space-1);
  }

  .md\:bui-m-1\.5 {
    margin: var(--bui-space-1_5);
  }

  .md\:bui-m-2 {
    margin: var(--bui-space-2);
  }

  .md\:bui-m-3 {
    margin: var(--bui-space-3);
  }

  .md\:bui-m-4 {
    margin: var(--bui-space-4);
  }

  .md\:bui-m-5 {
    margin: var(--bui-space-5);
  }

  .md\:bui-m-6 {
    margin: var(--bui-space-6);
  }

  .md\:bui-m-7 {
    margin: var(--bui-space-7);
  }

  .md\:bui-m-8 {
    margin: var(--bui-space-8);
  }

  .md\:bui-m-9 {
    margin: var(--bui-space-9);
  }

  .md\:bui-m-10 {
    margin: var(--bui-space-10);
  }

  .md\:bui-m-11 {
    margin: var(--bui-space-11);
  }

  .md\:bui-m-12 {
    margin: var(--bui-space-12);
  }

  .md\:bui-m-13 {
    margin: var(--bui-space-13);
  }

  .md\:bui-m-14 {
    margin: var(--bui-space-14);
  }
}

@media (width >= 1280px) {
  .lg\:bui-m {
    margin: var(--p-lg);
  }

  .lg\:bui-m-0\.5 {
    margin: var(--bui-space-0_5);
  }

  .lg\:bui-m-1 {
    margin: var(--bui-space-1);
  }

  .lg\:bui-m-1\.5 {
    margin: var(--bui-space-1_5);
  }

  .lg\:bui-m-2 {
    margin: var(--bui-space-2);
  }

  .lg\:bui-m-3 {
    margin: var(--bui-space-3);
  }

  .lg\:bui-m-4 {
    margin: var(--bui-space-4);
  }

  .lg\:bui-m-5 {
    margin: var(--bui-space-5);
  }

  .lg\:bui-m-6 {
    margin: var(--bui-space-6);
  }

  .lg\:bui-m-7 {
    margin: var(--bui-space-7);
  }

  .lg\:bui-m-8 {
    margin: var(--bui-space-8);
  }

  .lg\:bui-m-9 {
    margin: var(--bui-space-9);
  }

  .lg\:bui-m-10 {
    margin: var(--bui-space-10);
  }

  .lg\:bui-m-11 {
    margin: var(--bui-space-11);
  }

  .lg\:bui-m-12 {
    margin: var(--bui-space-12);
  }

  .lg\:bui-m-13 {
    margin: var(--bui-space-13);
  }

  .lg\:bui-m-14 {
    margin: var(--bui-space-14);
  }
}

@media (width >= 1536px) {
  .xl\:bui-m {
    margin: var(--p-xl);
  }

  .xl\:bui-m-0\.5 {
    margin: var(--bui-space-0_5);
  }

  .xl\:bui-m-1 {
    margin: var(--bui-space-1);
  }

  .xl\:bui-m-1\.5 {
    margin: var(--bui-space-1_5);
  }

  .xl\:bui-m-2 {
    margin: var(--bui-space-2);
  }

  .xl\:bui-m-3 {
    margin: var(--bui-space-3);
  }

  .xl\:bui-m-4 {
    margin: var(--bui-space-4);
  }

  .xl\:bui-m-5 {
    margin: var(--bui-space-5);
  }

  .xl\:bui-m-6 {
    margin: var(--bui-space-6);
  }

  .xl\:bui-m-7 {
    margin: var(--bui-space-7);
  }

  .xl\:bui-m-8 {
    margin: var(--bui-space-8);
  }

  .xl\:bui-m-9 {
    margin: var(--bui-space-9);
  }

  .xl\:bui-m-10 {
    margin: var(--bui-space-10);
  }

  .xl\:bui-m-11 {
    margin: var(--bui-space-11);
  }

  .xl\:bui-m-12 {
    margin: var(--bui-space-12);
  }

  .xl\:bui-m-13 {
    margin: var(--bui-space-13);
  }

  .xl\:bui-m-14 {
    margin: var(--bui-space-14);
  }
}

.bui-ml {
  margin-left: var(--ml);
}

.bui-ml-0\.5 {
  margin-left: var(--bui-space-0_5);
}

.bui-ml-1 {
  margin-left: var(--bui-space-1);
}

.bui-ml-1\.5 {
  margin-left: var(--bui-space-1_5);
}

.bui-ml-2 {
  margin-left: var(--bui-space-2);
}

.bui-ml-3 {
  margin-left: var(--bui-space-3);
}

.bui-ml-4 {
  margin-left: var(--bui-space-4);
}

.bui-ml-5 {
  margin-left: var(--bui-space-5);
}

.bui-ml-6 {
  margin-left: var(--bui-space-6);
}

.bui-ml-7 {
  margin-left: var(--bui-space-7);
}

.bui-ml-8 {
  margin-left: var(--bui-space-8);
}

.bui-ml-9 {
  margin-left: var(--bui-space-9);
}

.bui-ml-10 {
  margin-left: var(--bui-space-10);
}

.bui-ml-11 {
  margin-left: var(--bui-space-11);
}

.bui-ml-12 {
  margin-left: var(--bui-space-12);
}

.bui-ml-13 {
  margin-left: var(--bui-space-13);
}

.bui-ml-14 {
  margin-left: var(--bui-space-14);
}

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

  .xs\:bui-ml-0\.5 {
    margin-left: var(--bui-space-0_5);
  }

  .xs\:bui-ml-1 {
    margin-left: var(--bui-space-1);
  }

  .xs\:bui-ml-1\.5 {
    margin-left: var(--bui-space-1_5);
  }

  .xs\:bui-ml-2 {
    margin-left: var(--bui-space-2);
  }

  .xs\:bui-ml-3 {
    margin-left: var(--bui-space-3);
  }

  .xs\:bui-ml-4 {
    margin-left: var(--bui-space-4);
  }

  .xs\:bui-ml-5 {
    margin-left: var(--bui-space-5);
  }

  .xs\:bui-ml-6 {
    margin-left: var(--bui-space-6);
  }

  .xs\:bui-ml-7 {
    margin-left: var(--bui-space-7);
  }

  .xs\:bui-ml-8 {
    margin-left: var(--bui-space-8);
  }

  .xs\:bui-ml-9 {
    margin-left: var(--bui-space-9);
  }

  .xs\:bui-ml-10 {
    margin-left: var(--bui-space-10);
  }

  .xs\:bui-ml-11 {
    margin-left: var(--bui-space-11);
  }

  .xs\:bui-ml-12 {
    margin-left: var(--bui-space-12);
  }

  .xs\:bui-ml-13 {
    margin-left: var(--bui-space-13);
  }

  .xs\:bui-ml-14 {
    margin-left: var(--bui-space-14);
  }
}

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

  .sm\:bui-ml-0\.5 {
    margin-left: var(--bui-space-0_5);
  }

  .sm\:bui-ml-1 {
    margin-left: var(--bui-space-1);
  }

  .sm\:bui-ml-1\.5 {
    margin-left: var(--bui-space-1_5);
  }

  .sm\:bui-ml-2 {
    margin-left: var(--bui-space-2);
  }

  .sm\:bui-ml-3 {
    margin-left: var(--bui-space-3);
  }

  .sm\:bui-ml-4 {
    margin-left: var(--bui-space-4);
  }

  .sm\:bui-ml-5 {
    margin-left: var(--bui-space-5);
  }

  .sm\:bui-ml-6 {
    margin-left: var(--bui-space-6);
  }

  .sm\:bui-ml-7 {
    margin-left: var(--bui-space-7);
  }

  .sm\:bui-ml-8 {
    margin-left: var(--bui-space-8);
  }

  .sm\:bui-ml-9 {
    margin-left: var(--bui-space-9);
  }

  .sm\:bui-ml-10 {
    margin-left: var(--bui-space-10);
  }

  .sm\:bui-ml-11 {
    margin-left: var(--bui-space-11);
  }

  .sm\:bui-ml-12 {
    margin-left: var(--bui-space-12);
  }

  .sm\:bui-ml-13 {
    margin-left: var(--bui-space-13);
  }

  .sm\:bui-ml-14 {
    margin-left: var(--bui-space-14);
  }
}

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

  .md\:bui-ml-0\.5 {
    margin-left: var(--bui-space-0_5);
  }

  .md\:bui-ml-1 {
    margin-left: var(--bui-space-1);
  }

  .md\:bui-ml-1\.5 {
    margin-left: var(--bui-space-1_5);
  }

  .md\:bui-ml-2 {
    margin-left: var(--bui-space-2);
  }

  .md\:bui-ml-3 {
    margin-left: var(--bui-space-3);
  }

  .md\:bui-ml-4 {
    margin-left: var(--bui-space-4);
  }

  .md\:bui-ml-5 {
    margin-left: var(--bui-space-5);
  }

  .md\:bui-ml-6 {
    margin-left: var(--bui-space-6);
  }

  .md\:bui-ml-7 {
    margin-left: var(--bui-space-7);
  }

  .md\:bui-ml-8 {
    margin-left: var(--bui-space-8);
  }

  .md\:bui-ml-9 {
    margin-left: var(--bui-space-9);
  }

  .md\:bui-ml-10 {
    margin-left: var(--bui-space-10);
  }

  .md\:bui-ml-11 {
    margin-left: var(--bui-space-11);
  }

  .md\:bui-ml-12 {
    margin-left: var(--bui-space-12);
  }

  .md\:bui-ml-13 {
    margin-left: var(--bui-space-13);
  }

  .md\:bui-ml-14 {
    margin-left: var(--bui-space-14);
  }
}

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

  .lg\:bui-ml-0\.5 {
    margin-left: var(--bui-space-0_5);
  }

  .lg\:bui-ml-1 {
    margin-left: var(--bui-space-1);
  }

  .lg\:bui-ml-1\.5 {
    margin-left: var(--bui-space-1_5);
  }

  .lg\:bui-ml-2 {
    margin-left: var(--bui-space-2);
  }

  .lg\:bui-ml-3 {
    margin-left: var(--bui-space-3);
  }

  .lg\:bui-ml-4 {
    margin-left: var(--bui-space-4);
  }

  .lg\:bui-ml-5 {
    margin-left: var(--bui-space-5);
  }

  .lg\:bui-ml-6 {
    margin-left: var(--bui-space-6);
  }

  .lg\:bui-ml-7 {
    margin-left: var(--bui-space-7);
  }

  .lg\:bui-ml-8 {
    margin-left: var(--bui-space-8);
  }

  .lg\:bui-ml-9 {
    margin-left: var(--bui-space-9);
  }

  .lg\:bui-ml-10 {
    margin-left: var(--bui-space-10);
  }

  .lg\:bui-ml-11 {
    margin-left: var(--bui-space-11);
  }

  .lg\:bui-ml-12 {
    margin-left: var(--bui-space-12);
  }

  .lg\:bui-ml-13 {
    margin-left: var(--bui-space-13);
  }

  .lg\:bui-ml-14 {
    margin-left: var(--bui-space-14);
  }
}

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

  .xl\:bui-ml-0\.5 {
    margin-left: var(--bui-space-0_5);
  }

  .xl\:bui-ml-1 {
    margin-left: var(--bui-space-1);
  }

  .xl\:bui-ml-1\.5 {
    margin-left: var(--bui-space-1_5);
  }

  .xl\:bui-ml-2 {
    margin-left: var(--bui-space-2);
  }

  .xl\:bui-ml-3 {
    margin-left: var(--bui-space-3);
  }

  .xl\:bui-ml-4 {
    margin-left: var(--bui-space-4);
  }

  .xl\:bui-ml-5 {
    margin-left: var(--bui-space-5);
  }

  .xl\:bui-ml-6 {
    margin-left: var(--bui-space-6);
  }

  .xl\:bui-ml-7 {
    margin-left: var(--bui-space-7);
  }

  .xl\:bui-ml-8 {
    margin-left: var(--bui-space-8);
  }

  .xl\:bui-ml-9 {
    margin-left: var(--bui-space-9);
  }

  .xl\:bui-ml-10 {
    margin-left: var(--bui-space-10);
  }

  .xl\:bui-ml-11 {
    margin-left: var(--bui-space-11);
  }

  .xl\:bui-ml-12 {
    margin-left: var(--bui-space-12);
  }

  .xl\:bui-ml-13 {
    margin-left: var(--bui-space-13);
  }

  .xl\:bui-ml-14 {
    margin-left: var(--bui-space-14);
  }
}

.bui-mr {
  margin-right: var(--mr);
}

.bui-mr-0\.5 {
  margin-right: var(--bui-space-0_5);
}

.bui-mr-1 {
  margin-right: var(--bui-space-1);
}

.bui-mr-1\.5 {
  margin-right: var(--bui-space-1_5);
}

.bui-mr-2 {
  margin-right: var(--bui-space-2);
}

.bui-mr-3 {
  margin-right: var(--bui-space-3);
}

.bui-mr-4 {
  margin-right: var(--bui-space-4);
}

.bui-mr-5 {
  margin-right: var(--bui-space-5);
}

.bui-mr-6 {
  margin-right: var(--bui-space-6);
}

.bui-mr-7 {
  margin-right: var(--bui-space-7);
}

.bui-mr-8 {
  margin-right: var(--bui-space-8);
}

.bui-mr-9 {
  margin-right: var(--bui-space-9);
}

.bui-mr-10 {
  margin-right: var(--bui-space-10);
}

.bui-mr-11 {
  margin-right: var(--bui-space-11);
}

.bui-mr-12 {
  margin-right: var(--bui-space-12);
}

.bui-mr-13 {
  margin-right: var(--bui-space-13);
}

.bui-mr-14 {
  margin-right: var(--bui-space-14);
}

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

  .xs\:bui-mr-0\.5 {
    margin-right: var(--bui-space-0_5);
  }

  .xs\:bui-mr-1 {
    margin-right: var(--bui-space-1);
  }

  .xs\:bui-mr-1\.5 {
    margin-right: var(--bui-space-1_5);
  }

  .xs\:bui-mr-2 {
    margin-right: var(--bui-space-2);
  }

  .xs\:bui-mr-3 {
    margin-right: var(--bui-space-3);
  }

  .xs\:bui-mr-4 {
    margin-right: var(--bui-space-4);
  }

  .xs\:bui-mr-5 {
    margin-right: var(--bui-space-5);
  }

  .xs\:bui-mr-6 {
    margin-right: var(--bui-space-6);
  }

  .xs\:bui-mr-7 {
    margin-right: var(--bui-space-7);
  }

  .xs\:bui-mr-8 {
    margin-right: var(--bui-space-8);
  }

  .xs\:bui-mr-9 {
    margin-right: var(--bui-space-9);
  }

  .xs\:bui-mr-10 {
    margin-right: var(--bui-space-10);
  }

  .xs\:bui-mr-11 {
    margin-right: var(--bui-space-11);
  }

  .xs\:bui-mr-12 {
    margin-right: var(--bui-space-12);
  }

  .xs\:bui-mr-13 {
    margin-right: var(--bui-space-13);
  }

  .xs\:bui-mr-14 {
    margin-right: var(--bui-space-14);
  }
}

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

  .sm\:bui-mr-0\.5 {
    margin-right: var(--bui-space-0_5);
  }

  .sm\:bui-mr-1 {
    margin-right: var(--bui-space-1);
  }

  .sm\:bui-mr-1\.5 {
    margin-right: var(--bui-space-1_5);
  }

  .sm\:bui-mr-2 {
    margin-right: var(--bui-space-2);
  }

  .sm\:bui-mr-3 {
    margin-right: var(--bui-space-3);
  }

  .sm\:bui-mr-4 {
    margin-right: var(--bui-space-4);
  }

  .sm\:bui-mr-5 {
    margin-right: var(--bui-space-5);
  }

  .sm\:bui-mr-6 {
    margin-right: var(--bui-space-6);
  }

  .sm\:bui-mr-7 {
    margin-right: var(--bui-space-7);
  }

  .sm\:bui-mr-8 {
    margin-right: var(--bui-space-8);
  }

  .sm\:bui-mr-9 {
    margin-right: var(--bui-space-9);
  }

  .sm\:bui-mr-10 {
    margin-right: var(--bui-space-10);
  }

  .sm\:bui-mr-11 {
    margin-right: var(--bui-space-11);
  }

  .sm\:bui-mr-12 {
    margin-right: var(--bui-space-12);
  }

  .sm\:bui-mr-13 {
    margin-right: var(--bui-space-13);
  }

  .sm\:bui-mr-14 {
    margin-right: var(--bui-space-14);
  }
}

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

  .md\:bui-mr-0\.5 {
    margin-right: var(--bui-space-0_5);
  }

  .md\:bui-mr-1 {
    margin-right: var(--bui-space-1);
  }

  .md\:bui-mr-1\.5 {
    margin-right: var(--bui-space-1_5);
  }

  .md\:bui-mr-2 {
    margin-right: var(--bui-space-2);
  }

  .md\:bui-mr-3 {
    margin-right: var(--bui-space-3);
  }

  .md\:bui-mr-4 {
    margin-right: var(--bui-space-4);
  }

  .md\:bui-mr-5 {
    margin-right: var(--bui-space-5);
  }

  .md\:bui-mr-6 {
    margin-right: var(--bui-space-6);
  }

  .md\:bui-mr-7 {
    margin-right: var(--bui-space-7);
  }

  .md\:bui-mr-8 {
    margin-right: var(--bui-space-8);
  }

  .md\:bui-mr-9 {
    margin-right: var(--bui-space-9);
  }

  .md\:bui-mr-10 {
    margin-right: var(--bui-space-10);
  }

  .md\:bui-mr-11 {
    margin-right: var(--bui-space-11);
  }

  .md\:bui-mr-12 {
    margin-right: var(--bui-space-12);
  }

  .md\:bui-mr-13 {
    margin-right: var(--bui-space-13);
  }

  .md\:bui-mr-14 {
    margin-right: var(--bui-space-14);
  }
}

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

  .lg\:bui-mr-0\.5 {
    margin-right: var(--bui-space-0_5);
  }

  .lg\:bui-mr-1 {
    margin-right: var(--bui-space-1);
  }

  .lg\:bui-mr-1\.5 {
    margin-right: var(--bui-space-1_5);
  }

  .lg\:bui-mr-2 {
    margin-right: var(--bui-space-2);
  }

  .lg\:bui-mr-3 {
    margin-right: var(--bui-space-3);
  }

  .lg\:bui-mr-4 {
    margin-right: var(--bui-space-4);
  }

  .lg\:bui-mr-5 {
    margin-right: var(--bui-space-5);
  }

  .lg\:bui-mr-6 {
    margin-right: var(--bui-space-6);
  }

  .lg\:bui-mr-7 {
    margin-right: var(--bui-space-7);
  }

  .lg\:bui-mr-8 {
    margin-right: var(--bui-space-8);
  }

  .lg\:bui-mr-9 {
    margin-right: var(--bui-space-9);
  }

  .lg\:bui-mr-10 {
    margin-right: var(--bui-space-10);
  }

  .lg\:bui-mr-11 {
    margin-right: var(--bui-space-11);
  }

  .lg\:bui-mr-12 {
    margin-right: var(--bui-space-12);
  }

  .lg\:bui-mr-13 {
    margin-right: var(--bui-space-13);
  }

  .lg\:bui-mr-14 {
    margin-right: var(--bui-space-14);
  }
}

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

  .xl\:bui-mr-0\.5 {
    margin-right: var(--bui-space-0_5);
  }

  .xl\:bui-mr-1 {
    margin-right: var(--bui-space-1);
  }

  .xl\:bui-mr-1\.5 {
    margin-right: var(--bui-space-1_5);
  }

  .xl\:bui-mr-2 {
    margin-right: var(--bui-space-2);
  }

  .xl\:bui-mr-3 {
    margin-right: var(--bui-space-3);
  }

  .xl\:bui-mr-4 {
    margin-right: var(--bui-space-4);
  }

  .xl\:bui-mr-5 {
    margin-right: var(--bui-space-5);
  }

  .xl\:bui-mr-6 {
    margin-right: var(--bui-space-6);
  }

  .xl\:bui-mr-7 {
    margin-right: var(--bui-space-7);
  }

  .xl\:bui-mr-8 {
    margin-right: var(--bui-space-8);
  }

  .xl\:bui-mr-9 {
    margin-right: var(--bui-space-9);
  }

  .xl\:bui-mr-10 {
    margin-right: var(--bui-space-10);
  }

  .xl\:bui-mr-11 {
    margin-right: var(--bui-space-11);
  }

  .xl\:bui-mr-12 {
    margin-right: var(--bui-space-12);
  }

  .xl\:bui-mr-13 {
    margin-right: var(--bui-space-13);
  }

  .xl\:bui-mr-14 {
    margin-right: var(--bui-space-14);
  }
}

.bui-mt {
  margin-top: var(--mt);
}

.bui-mt-0\.5 {
  margin-top: var(--bui-space-0_5);
}

.bui-mt-1 {
  margin-top: var(--bui-space-1);
}

.bui-mt-1\.5 {
  margin-top: var(--bui-space-1_5);
}

.bui-mt-2 {
  margin-top: var(--bui-space-2);
}

.bui-mt-3 {
  margin-top: var(--bui-space-3);
}

.bui-mt-4 {
  margin-top: var(--bui-space-4);
}

.bui-mt-5 {
  margin-top: var(--bui-space-5);
}

.bui-mt-6 {
  margin-top: var(--bui-space-6);
}

.bui-mt-7 {
  margin-top: var(--bui-space-7);
}

.bui-mt-8 {
  margin-top: var(--bui-space-8);
}

.bui-mt-9 {
  margin-top: var(--bui-space-9);
}

.bui-mt-10 {
  margin-top: var(--bui-space-10);
}

.bui-mt-11 {
  margin-top: var(--bui-space-11);
}

.bui-mt-12 {
  margin-top: var(--bui-space-12);
}

.bui-mt-13 {
  margin-top: var(--bui-space-13);
}

.bui-mt-14 {
  margin-top: var(--bui-space-14);
}

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

  .xs\:bui-mt-0\.5 {
    margin-top: var(--bui-space-0_5);
  }

  .xs\:bui-mt-1 {
    margin-top: var(--bui-space-1);
  }

  .xs\:bui-mt-1\.5 {
    margin-top: var(--bui-space-1_5);
  }

  .xs\:bui-mt-2 {
    margin-top: var(--bui-space-2);
  }

  .xs\:bui-mt-3 {
    margin-top: var(--bui-space-3);
  }

  .xs\:bui-mt-4 {
    margin-top: var(--bui-space-4);
  }

  .xs\:bui-mt-5 {
    margin-top: var(--bui-space-5);
  }

  .xs\:bui-mt-6 {
    margin-top: var(--bui-space-6);
  }

  .xs\:bui-mt-7 {
    margin-top: var(--bui-space-7);
  }

  .xs\:bui-mt-8 {
    margin-top: var(--bui-space-8);
  }

  .xs\:bui-mt-9 {
    margin-top: var(--bui-space-9);
  }

  .xs\:bui-mt-10 {
    margin-top: var(--bui-space-10);
  }

  .xs\:bui-mt-11 {
    margin-top: var(--bui-space-11);
  }

  .xs\:bui-mt-12 {
    margin-top: var(--bui-space-12);
  }

  .xs\:bui-mt-13 {
    margin-top: var(--bui-space-13);
  }

  .xs\:bui-mt-14 {
    margin-top: var(--bui-space-14);
  }
}

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

  .sm\:bui-mt-0\.5 {
    margin-top: var(--bui-space-0_5);
  }

  .sm\:bui-mt-1 {
    margin-top: var(--bui-space-1);
  }

  .sm\:bui-mt-1\.5 {
    margin-top: var(--bui-space-1_5);
  }

  .sm\:bui-mt-2 {
    margin-top: var(--bui-space-2);
  }

  .sm\:bui-mt-3 {
    margin-top: var(--bui-space-3);
  }

  .sm\:bui-mt-4 {
    margin-top: var(--bui-space-4);
  }

  .sm\:bui-mt-5 {
    margin-top: var(--bui-space-5);
  }

  .sm\:bui-mt-6 {
    margin-top: var(--bui-space-6);
  }

  .sm\:bui-mt-7 {
    margin-top: var(--bui-space-7);
  }

  .sm\:bui-mt-8 {
    margin-top: var(--bui-space-8);
  }

  .sm\:bui-mt-9 {
    margin-top: var(--bui-space-9);
  }

  .sm\:bui-mt-10 {
    margin-top: var(--bui-space-10);
  }

  .sm\:bui-mt-11 {
    margin-top: var(--bui-space-11);
  }

  .sm\:bui-mt-12 {
    margin-top: var(--bui-space-12);
  }

  .sm\:bui-mt-13 {
    margin-top: var(--bui-space-13);
  }

  .sm\:bui-mt-14 {
    margin-top: var(--bui-space-14);
  }
}

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

  .md\:bui-mt-0\.5 {
    margin-top: var(--bui-space-0_5);
  }

  .md\:bui-mt-1 {
    margin-top: var(--bui-space-1);
  }

  .md\:bui-mt-1\.5 {
    margin-top: var(--bui-space-1_5);
  }

  .md\:bui-mt-2 {
    margin-top: var(--bui-space-2);
  }

  .md\:bui-mt-3 {
    margin-top: var(--bui-space-3);
  }

  .md\:bui-mt-4 {
    margin-top: var(--bui-space-4);
  }

  .md\:bui-mt-5 {
    margin-top: var(--bui-space-5);
  }

  .md\:bui-mt-6 {
    margin-top: var(--bui-space-6);
  }

  .md\:bui-mt-7 {
    margin-top: var(--bui-space-7);
  }

  .md\:bui-mt-8 {
    margin-top: var(--bui-space-8);
  }

  .md\:bui-mt-9 {
    margin-top: var(--bui-space-9);
  }

  .md\:bui-mt-10 {
    margin-top: var(--bui-space-10);
  }

  .md\:bui-mt-11 {
    margin-top: var(--bui-space-11);
  }

  .md\:bui-mt-12 {
    margin-top: var(--bui-space-12);
  }

  .md\:bui-mt-13 {
    margin-top: var(--bui-space-13);
  }

  .md\:bui-mt-14 {
    margin-top: var(--bui-space-14);
  }
}

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

  .lg\:bui-mt-0\.5 {
    margin-top: var(--bui-space-0_5);
  }

  .lg\:bui-mt-1 {
    margin-top: var(--bui-space-1);
  }

  .lg\:bui-mt-1\.5 {
    margin-top: var(--bui-space-1_5);
  }

  .lg\:bui-mt-2 {
    margin-top: var(--bui-space-2);
  }

  .lg\:bui-mt-3 {
    margin-top: var(--bui-space-3);
  }

  .lg\:bui-mt-4 {
    margin-top: var(--bui-space-4);
  }

  .lg\:bui-mt-5 {
    margin-top: var(--bui-space-5);
  }

  .lg\:bui-mt-6 {
    margin-top: var(--bui-space-6);
  }

  .lg\:bui-mt-7 {
    margin-top: var(--bui-space-7);
  }

  .lg\:bui-mt-8 {
    margin-top: var(--bui-space-8);
  }

  .lg\:bui-mt-9 {
    margin-top: var(--bui-space-9);
  }

  .lg\:bui-mt-10 {
    margin-top: var(--bui-space-10);
  }

  .lg\:bui-mt-11 {
    margin-top: var(--bui-space-11);
  }

  .lg\:bui-mt-12 {
    margin-top: var(--bui-space-12);
  }

  .lg\:bui-mt-13 {
    margin-top: var(--bui-space-13);
  }

  .lg\:bui-mt-14 {
    margin-top: var(--bui-space-14);
  }
}

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

  .xl\:bui-mt-0\.5 {
    margin-top: var(--bui-space-0_5);
  }

  .xl\:bui-mt-1 {
    margin-top: var(--bui-space-1);
  }

  .xl\:bui-mt-1\.5 {
    margin-top: var(--bui-space-1_5);
  }

  .xl\:bui-mt-2 {
    margin-top: var(--bui-space-2);
  }

  .xl\:bui-mt-3 {
    margin-top: var(--bui-space-3);
  }

  .xl\:bui-mt-4 {
    margin-top: var(--bui-space-4);
  }

  .xl\:bui-mt-5 {
    margin-top: var(--bui-space-5);
  }

  .xl\:bui-mt-6 {
    margin-top: var(--bui-space-6);
  }

  .xl\:bui-mt-7 {
    margin-top: var(--bui-space-7);
  }

  .xl\:bui-mt-8 {
    margin-top: var(--bui-space-8);
  }

  .xl\:bui-mt-9 {
    margin-top: var(--bui-space-9);
  }

  .xl\:bui-mt-10 {
    margin-top: var(--bui-space-10);
  }

  .xl\:bui-mt-11 {
    margin-top: var(--bui-space-11);
  }

  .xl\:bui-mt-12 {
    margin-top: var(--bui-space-12);
  }

  .xl\:bui-mt-13 {
    margin-top: var(--bui-space-13);
  }

  .xl\:bui-mt-14 {
    margin-top: var(--bui-space-14);
  }
}

.bui-mb {
  margin-bottom: var(--mb);
}

.bui-mb-0\.5 {
  margin-bottom: var(--bui-space-0_5);
}

.bui-mb-1 {
  margin-bottom: var(--bui-space-1);
}

.bui-mb-1\.5 {
  margin-bottom: var(--bui-space-1_5);
}

.bui-mb-2 {
  margin-bottom: var(--bui-space-2);
}

.bui-mb-3 {
  margin-bottom: var(--bui-space-3);
}

.bui-mb-4 {
  margin-bottom: var(--bui-space-4);
}

.bui-mb-5 {
  margin-bottom: var(--bui-space-5);
}

.bui-mb-6 {
  margin-bottom: var(--bui-space-6);
}

.bui-mb-7 {
  margin-bottom: var(--bui-space-7);
}

.bui-mb-8 {
  margin-bottom: var(--bui-space-8);
}

.bui-mb-9 {
  margin-bottom: var(--bui-space-9);
}

.bui-mb-10 {
  margin-bottom: var(--bui-space-10);
}

.bui-mb-11 {
  margin-bottom: var(--bui-space-11);
}

.bui-mb-12 {
  margin-bottom: var(--bui-space-12);
}

.bui-mb-13 {
  margin-bottom: var(--bui-space-13);
}

.bui-mb-14 {
  margin-bottom: var(--bui-space-14);
}

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

  .xs\:bui-mb-0\.5 {
    margin-bottom: var(--bui-space-0_5);
  }

  .xs\:bui-mb-1 {
    margin-bottom: var(--bui-space-1);
  }

  .xs\:bui-mb-1\.5 {
    margin-bottom: var(--bui-space-1_5);
  }

  .xs\:bui-mb-2 {
    margin-bottom: var(--bui-space-2);
  }

  .xs\:bui-mb-3 {
    margin-bottom: var(--bui-space-3);
  }

  .xs\:bui-mb-4 {
    margin-bottom: var(--bui-space-4);
  }

  .xs\:bui-mb-5 {
    margin-bottom: var(--bui-space-5);
  }

  .xs\:bui-mb-6 {
    margin-bottom: var(--bui-space-6);
  }

  .xs\:bui-mb-7 {
    margin-bottom: var(--bui-space-7);
  }

  .xs\:bui-mb-8 {
    margin-bottom: var(--bui-space-8);
  }

  .xs\:bui-mb-9 {
    margin-bottom: var(--bui-space-9);
  }

  .xs\:bui-mb-10 {
    margin-bottom: var(--bui-space-10);
  }

  .xs\:bui-mb-11 {
    margin-bottom: var(--bui-space-11);
  }

  .xs\:bui-mb-12 {
    margin-bottom: var(--bui-space-12);
  }

  .xs\:bui-mb-13 {
    margin-bottom: var(--bui-space-13);
  }

  .xs\:bui-mb-14 {
    margin-bottom: var(--bui-space-14);
  }
}

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

  .sm\:bui-mb-0\.5 {
    margin-bottom: var(--bui-space-0_5);
  }

  .sm\:bui-mb-1 {
    margin-bottom: var(--bui-space-1);
  }

  .sm\:bui-mb-1\.5 {
    margin-bottom: var(--bui-space-1_5);
  }

  .sm\:bui-mb-2 {
    margin-bottom: var(--bui-space-2);
  }

  .sm\:bui-mb-3 {
    margin-bottom: var(--bui-space-3);
  }

  .sm\:bui-mb-4 {
    margin-bottom: var(--bui-space-4);
  }

  .sm\:bui-mb-5 {
    margin-bottom: var(--bui-space-5);
  }

  .sm\:bui-mb-6 {
    margin-bottom: var(--bui-space-6);
  }

  .sm\:bui-mb-7 {
    margin-bottom: var(--bui-space-7);
  }

  .sm\:bui-mb-8 {
    margin-bottom: var(--bui-space-8);
  }

  .sm\:bui-mb-9 {
    margin-bottom: var(--bui-space-9);
  }

  .sm\:bui-mb-10 {
    margin-bottom: var(--bui-space-10);
  }

  .sm\:bui-mb-11 {
    margin-bottom: var(--bui-space-11);
  }

  .sm\:bui-mb-12 {
    margin-bottom: var(--bui-space-12);
  }

  .sm\:bui-mb-13 {
    margin-bottom: var(--bui-space-13);
  }

  .sm\:bui-mb-14 {
    margin-bottom: var(--bui-space-14);
  }
}

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

  .md\:bui-mb-0\.5 {
    margin-bottom: var(--bui-space-0_5);
  }

  .md\:bui-mb-1 {
    margin-bottom: var(--bui-space-1);
  }

  .md\:bui-mb-1\.5 {
    margin-bottom: var(--bui-space-1_5);
  }

  .md\:bui-mb-2 {
    margin-bottom: var(--bui-space-2);
  }

  .md\:bui-mb-3 {
    margin-bottom: var(--bui-space-3);
  }

  .md\:bui-mb-4 {
    margin-bottom: var(--bui-space-4);
  }

  .md\:bui-mb-5 {
    margin-bottom: var(--bui-space-5);
  }

  .md\:bui-mb-6 {
    margin-bottom: var(--bui-space-6);
  }

  .md\:bui-mb-7 {
    margin-bottom: var(--bui-space-7);
  }

  .md\:bui-mb-8 {
    margin-bottom: var(--bui-space-8);
  }

  .md\:bui-mb-9 {
    margin-bottom: var(--bui-space-9);
  }

  .md\:bui-mb-10 {
    margin-bottom: var(--bui-space-10);
  }

  .md\:bui-mb-11 {
    margin-bottom: var(--bui-space-11);
  }

  .md\:bui-mb-12 {
    margin-bottom: var(--bui-space-12);
  }

  .md\:bui-mb-13 {
    margin-bottom: var(--bui-space-13);
  }

  .md\:bui-mb-14 {
    margin-bottom: var(--bui-space-14);
  }
}

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

  .lg\:bui-mb-0\.5 {
    margin-bottom: var(--bui-space-0_5);
  }

  .lg\:bui-mb-1 {
    margin-bottom: var(--bui-space-1);
  }

  .lg\:bui-mb-1\.5 {
    margin-bottom: var(--bui-space-1_5);
  }

  .lg\:bui-mb-2 {
    margin-bottom: var(--bui-space-2);
  }

  .lg\:bui-mb-3 {
    margin-bottom: var(--bui-space-3);
  }

  .lg\:bui-mb-4 {
    margin-bottom: var(--bui-space-4);
  }

  .lg\:bui-mb-5 {
    margin-bottom: var(--bui-space-5);
  }

  .lg\:bui-mb-6 {
    margin-bottom: var(--bui-space-6);
  }

  .lg\:bui-mb-7 {
    margin-bottom: var(--bui-space-7);
  }

  .lg\:bui-mb-8 {
    margin-bottom: var(--bui-space-8);
  }

  .lg\:bui-mb-9 {
    margin-bottom: var(--bui-space-9);
  }

  .lg\:bui-mb-10 {
    margin-bottom: var(--bui-space-10);
  }

  .lg\:bui-mb-11 {
    margin-bottom: var(--bui-space-11);
  }

  .lg\:bui-mb-12 {
    margin-bottom: var(--bui-space-12);
  }

  .lg\:bui-mb-13 {
    margin-bottom: var(--bui-space-13);
  }

  .lg\:bui-mb-14 {
    margin-bottom: var(--bui-space-14);
  }
}

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

  .xl\:bui-mb-0\.5 {
    margin-bottom: var(--bui-space-0_5);
  }

  .xl\:bui-mb-1 {
    margin-bottom: var(--bui-space-1);
  }

  .xl\:bui-mb-1\.5 {
    margin-bottom: var(--bui-space-1_5);
  }

  .xl\:bui-mb-2 {
    margin-bottom: var(--bui-space-2);
  }

  .xl\:bui-mb-3 {
    margin-bottom: var(--bui-space-3);
  }

  .xl\:bui-mb-4 {
    margin-bottom: var(--bui-space-4);
  }

  .xl\:bui-mb-5 {
    margin-bottom: var(--bui-space-5);
  }

  .xl\:bui-mb-6 {
    margin-bottom: var(--bui-space-6);
  }

  .xl\:bui-mb-7 {
    margin-bottom: var(--bui-space-7);
  }

  .xl\:bui-mb-8 {
    margin-bottom: var(--bui-space-8);
  }

  .xl\:bui-mb-9 {
    margin-bottom: var(--bui-space-9);
  }

  .xl\:bui-mb-10 {
    margin-bottom: var(--bui-space-10);
  }

  .xl\:bui-mb-11 {
    margin-bottom: var(--bui-space-11);
  }

  .xl\:bui-mb-12 {
    margin-bottom: var(--bui-space-12);
  }

  .xl\:bui-mb-13 {
    margin-bottom: var(--bui-space-13);
  }

  .xl\:bui-mb-14 {
    margin-bottom: var(--bui-space-14);
  }
}

.bui-my {
  margin-top: var(--my);
  margin-bottom: var(--my);
}

.bui-my-0\.5 {
  margin-top: var(--bui-space-0_5);
  margin-bottom: var(--bui-space-0_5);
}

.bui-my-1 {
  margin-top: var(--bui-space-1);
  margin-bottom: var(--bui-space-1);
}

.bui-my-1\.5 {
  margin-top: var(--bui-space-1_5);
  margin-bottom: var(--bui-space-1_5);
}

.bui-my-2 {
  margin-top: var(--bui-space-2);
  margin-bottom: var(--bui-space-2);
}

.bui-my-3 {
  margin-top: var(--bui-space-3);
  margin-bottom: var(--bui-space-3);
}

.bui-my-4 {
  margin-top: var(--bui-space-4);
  margin-bottom: var(--bui-space-4);
}

.bui-my-5 {
  margin-top: var(--bui-space-5);
  margin-bottom: var(--bui-space-5);
}

.bui-my-6 {
  margin-top: var(--bui-space-6);
  margin-bottom: var(--bui-space-6);
}

.bui-my-7 {
  margin-top: var(--bui-space-7);
  margin-bottom: var(--bui-space-7);
}

.bui-my-8 {
  margin-top: var(--bui-space-8);
  margin-bottom: var(--bui-space-8);
}

.bui-my-9 {
  margin-top: var(--bui-space-9);
  margin-bottom: var(--bui-space-9);
}

.bui-my-10 {
  margin-top: var(--bui-space-10);
  margin-bottom: var(--bui-space-10);
}

.bui-my-11 {
  margin-top: var(--bui-space-11);
  margin-bottom: var(--bui-space-11);
}

.bui-my-12 {
  margin-top: var(--bui-space-12);
  margin-bottom: var(--bui-space-12);
}

.bui-my-13 {
  margin-top: var(--bui-space-13);
  margin-bottom: var(--bui-space-13);
}

.bui-my-14 {
  margin-top: var(--bui-space-14);
  margin-bottom: var(--bui-space-14);
}

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

  .xs\:bui-my-0\.5 {
    margin-top: var(--bui-space-0_5);
    margin-bottom: var(--bui-space-0_5);
  }

  .xs\:bui-my-1 {
    margin-top: var(--bui-space-1);
    margin-bottom: var(--bui-space-1);
  }

  .xs\:bui-my-1\.5 {
    margin-top: var(--bui-space-1_5);
    margin-bottom: var(--bui-space-1_5);
  }

  .xs\:bui-my-2 {
    margin-top: var(--bui-space-2);
    margin-bottom: var(--bui-space-2);
  }

  .xs\:bui-my-3 {
    margin-top: var(--bui-space-3);
    margin-bottom: var(--bui-space-3);
  }

  .xs\:bui-my-4 {
    margin-top: var(--bui-space-4);
    margin-bottom: var(--bui-space-4);
  }

  .xs\:bui-my-5 {
    margin-top: var(--bui-space-5);
    margin-bottom: var(--bui-space-5);
  }

  .xs\:bui-my-6 {
    margin-top: var(--bui-space-6);
    margin-bottom: var(--bui-space-6);
  }

  .xs\:bui-my-7 {
    margin-top: var(--bui-space-7);
    margin-bottom: var(--bui-space-7);
  }

  .xs\:bui-my-8 {
    margin-top: var(--bui-space-8);
    margin-bottom: var(--bui-space-8);
  }

  .xs\:bui-my-9 {
    margin-top: var(--bui-space-9);
    margin-bottom: var(--bui-space-9);
  }

  .xs\:bui-my-10 {
    margin-top: var(--bui-space-10);
    margin-bottom: var(--bui-space-10);
  }

  .xs\:bui-my-11 {
    margin-top: var(--bui-space-11);
    margin-bottom: var(--bui-space-11);
  }

  .xs\:bui-my-12 {
    margin-top: var(--bui-space-12);
    margin-bottom: var(--bui-space-12);
  }

  .xs\:bui-my-13 {
    margin-top: var(--bui-space-13);
    margin-bottom: var(--bui-space-13);
  }

  .xs\:bui-my-14 {
    margin-top: var(--bui-space-14);
    margin-bottom: var(--bui-space-14);
  }
}

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

  .sm\:bui-my-0\.5 {
    margin-top: var(--bui-space-0_5);
    margin-bottom: var(--bui-space-0_5);
  }

  .sm\:bui-my-1 {
    margin-top: var(--bui-space-1);
    margin-bottom: var(--bui-space-1);
  }

  .sm\:bui-my-1\.5 {
    margin-top: var(--bui-space-1_5);
    margin-bottom: var(--bui-space-1_5);
  }

  .sm\:bui-my-2 {
    margin-top: var(--bui-space-2);
    margin-bottom: var(--bui-space-2);
  }

  .sm\:bui-my-3 {
    margin-top: var(--bui-space-3);
    margin-bottom: var(--bui-space-3);
  }

  .sm\:bui-my-4 {
    margin-top: var(--bui-space-4);
    margin-bottom: var(--bui-space-4);
  }

  .sm\:bui-my-5 {
    margin-top: var(--bui-space-5);
    margin-bottom: var(--bui-space-5);
  }

  .sm\:bui-my-6 {
    margin-top: var(--bui-space-6);
    margin-bottom: var(--bui-space-6);
  }

  .sm\:bui-my-7 {
    margin-top: var(--bui-space-7);
    margin-bottom: var(--bui-space-7);
  }

  .sm\:bui-my-8 {
    margin-top: var(--bui-space-8);
    margin-bottom: var(--bui-space-8);
  }

  .sm\:bui-my-9 {
    margin-top: var(--bui-space-9);
    margin-bottom: var(--bui-space-9);
  }

  .sm\:bui-my-10 {
    margin-top: var(--bui-space-10);
    margin-bottom: var(--bui-space-10);
  }

  .sm\:bui-my-11 {
    margin-top: var(--bui-space-11);
    margin-bottom: var(--bui-space-11);
  }

  .sm\:bui-my-12 {
    margin-top: var(--bui-space-12);
    margin-bottom: var(--bui-space-12);
  }

  .sm\:bui-my-13 {
    margin-top: var(--bui-space-13);
    margin-bottom: var(--bui-space-13);
  }

  .sm\:bui-my-14 {
    margin-top: var(--bui-space-14);
    margin-bottom: var(--bui-space-14);
  }
}

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

  .md\:bui-my-0\.5 {
    margin-top: var(--bui-space-0_5);
    margin-bottom: var(--bui-space-0_5);
  }

  .md\:bui-my-1 {
    margin-top: var(--bui-space-1);
    margin-bottom: var(--bui-space-1);
  }

  .md\:bui-my-1\.5 {
    margin-top: var(--bui-space-1_5);
    margin-bottom: var(--bui-space-1_5);
  }

  .md\:bui-my-2 {
    margin-top: var(--bui-space-2);
    margin-bottom: var(--bui-space-2);
  }

  .md\:bui-my-3 {
    margin-top: var(--bui-space-3);
    margin-bottom: var(--bui-space-3);
  }

  .md\:bui-my-4 {
    margin-top: var(--bui-space-4);
    margin-bottom: var(--bui-space-4);
  }

  .md\:bui-my-5 {
    margin-top: var(--bui-space-5);
    margin-bottom: var(--bui-space-5);
  }

  .md\:bui-my-6 {
    margin-top: var(--bui-space-6);
    margin-bottom: var(--bui-space-6);
  }

  .md\:bui-my-7 {
    margin-top: var(--bui-space-7);
    margin-bottom: var(--bui-space-7);
  }

  .md\:bui-my-8 {
    margin-top: var(--bui-space-8);
    margin-bottom: var(--bui-space-8);
  }

  .md\:bui-my-9 {
    margin-top: var(--bui-space-9);
    margin-bottom: var(--bui-space-9);
  }

  .md\:bui-my-10 {
    margin-top: var(--bui-space-10);
    margin-bottom: var(--bui-space-10);
  }

  .md\:bui-my-11 {
    margin-top: var(--bui-space-11);
    margin-bottom: var(--bui-space-11);
  }

  .md\:bui-my-12 {
    margin-top: var(--bui-space-12);
    margin-bottom: var(--bui-space-12);
  }

  .md\:bui-my-13 {
    margin-top: var(--bui-space-13);
    margin-bottom: var(--bui-space-13);
  }

  .md\:bui-my-14 {
    margin-top: var(--bui-space-14);
    margin-bottom: var(--bui-space-14);
  }
}

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

  .lg\:bui-my-0\.5 {
    margin-top: var(--bui-space-0_5);
    margin-bottom: var(--bui-space-0_5);
  }

  .lg\:bui-my-1 {
    margin-top: var(--bui-space-1);
    margin-bottom: var(--bui-space-1);
  }

  .lg\:bui-my-1\.5 {
    margin-top: var(--bui-space-1_5);
    margin-bottom: var(--bui-space-1_5);
  }

  .lg\:bui-my-2 {
    margin-top: var(--bui-space-2);
    margin-bottom: var(--bui-space-2);
  }

  .lg\:bui-my-3 {
    margin-top: var(--bui-space-3);
    margin-bottom: var(--bui-space-3);
  }

  .lg\:bui-my-4 {
    margin-top: var(--bui-space-4);
    margin-bottom: var(--bui-space-4);
  }

  .lg\:bui-my-5 {
    margin-top: var(--bui-space-5);
    margin-bottom: var(--bui-space-5);
  }

  .lg\:bui-my-6 {
    margin-top: var(--bui-space-6);
    margin-bottom: var(--bui-space-6);
  }

  .lg\:bui-my-7 {
    margin-top: var(--bui-space-7);
    margin-bottom: var(--bui-space-7);
  }

  .lg\:bui-my-8 {
    margin-top: var(--bui-space-8);
    margin-bottom: var(--bui-space-8);
  }

  .lg\:bui-my-9 {
    margin-top: var(--bui-space-9);
    margin-bottom: var(--bui-space-9);
  }

  .lg\:bui-my-10 {
    margin-top: var(--bui-space-10);
    margin-bottom: var(--bui-space-10);
  }

  .lg\:bui-my-11 {
    margin-top: var(--bui-space-11);
    margin-bottom: var(--bui-space-11);
  }

  .lg\:bui-my-12 {
    margin-top: var(--bui-space-12);
    margin-bottom: var(--bui-space-12);
  }

  .lg\:bui-my-13 {
    margin-top: var(--bui-space-13);
    margin-bottom: var(--bui-space-13);
  }

  .lg\:bui-my-14 {
    margin-top: var(--bui-space-14);
    margin-bottom: var(--bui-space-14);
  }
}

@media (width >= 1536px) {
  .xl\:bui-my {
    margin-top: var(--py-xl);
    margin-bottom: var(--py-xl);
  }

  .xl\:bui-my-0\.5 {
    margin-top: var(--bui-space-0_5);
    margin-bottom: var(--bui-space-0_5);
  }

  .xl\:bui-my-1 {
    margin-top: var(--bui-space-1);
    margin-bottom: var(--bui-space-1);
  }

  .xl\:bui-my-1\.5 {
    margin-top: var(--bui-space-1_5);
    margin-bottom: var(--bui-space-1_5);
  }

  .xl\:bui-my-2 {
    margin-top: var(--bui-space-2);
    margin-bottom: var(--bui-space-2);
  }

  .xl\:bui-my-3 {
    margin-top: var(--bui-space-3);
    margin-bottom: var(--bui-space-3);
  }

  .xl\:bui-my-4 {
    margin-top: var(--bui-space-4);
    margin-bottom: var(--bui-space-4);
  }

  .xl\:bui-my-5 {
    margin-top: var(--bui-space-5);
    margin-bottom: var(--bui-space-5);
  }

  .xl\:bui-my-6 {
    margin-top: var(--bui-space-6);
    margin-bottom: var(--bui-space-6);
  }

  .xl\:bui-my-7 {
    margin-top: var(--bui-space-7);
    margin-bottom: var(--bui-space-7);
  }

  .xl\:bui-my-8 {
    margin-top: var(--bui-space-8);
    margin-bottom: var(--bui-space-8);
  }

  .xl\:bui-my-9 {
    margin-top: var(--bui-space-9);
    margin-bottom: var(--bui-space-9);
  }

  .xl\:bui-my-10 {
    margin-top: var(--bui-space-10);
    margin-bottom: var(--bui-space-10);
  }

  .xl\:bui-my-11 {
    margin-top: var(--bui-space-11);
    margin-bottom: var(--bui-space-11);
  }

  .xl\:bui-my-12 {
    margin-top: var(--bui-space-12);
    margin-bottom: var(--bui-space-12);
  }

  .xl\:bui-my-13 {
    margin-top: var(--bui-space-13);
    margin-bottom: var(--bui-space-13);
  }

  .xl\:bui-my-14 {
    margin-top: var(--bui-space-14);
    margin-bottom: var(--bui-space-14);
  }
}

.bui-mx {
  margin-left: var(--mx);
  margin-right: var(--mx);
}

.bui-mx-0\.5 {
  margin-left: var(--bui-space-0_5);
  margin-right: var(--bui-space-0_5);
}

.bui-mx-1 {
  margin-left: var(--bui-space-1);
  margin-right: var(--bui-space-1);
}

.bui-mx-1\.5 {
  margin-left: var(--bui-space-1_5);
  margin-right: var(--bui-space-1_5);
}

.bui-mx-2 {
  margin-left: var(--bui-space-2);
  margin-right: var(--bui-space-2);
}

.bui-mx-3 {
  margin-left: var(--bui-space-3);
  margin-right: var(--bui-space-3);
}

.bui-mx-4 {
  margin-left: var(--bui-space-4);
  margin-right: var(--bui-space-4);
}

.bui-mx-5 {
  margin-left: var(--bui-space-5);
  margin-right: var(--bui-space-5);
}

.bui-mx-6 {
  margin-left: var(--bui-space-6);
  margin-right: var(--bui-space-6);
}

.bui-mx-7 {
  margin-left: var(--bui-space-7);
  margin-right: var(--bui-space-7);
}

.bui-mx-8 {
  margin-left: var(--bui-space-8);
  margin-right: var(--bui-space-8);
}

.bui-mx-9 {
  margin-left: var(--bui-space-9);
  margin-right: var(--bui-space-9);
}

.bui-mx-10 {
  margin-left: var(--bui-space-10);
  margin-right: var(--bui-space-10);
}

.bui-mx-11 {
  margin-left: var(--bui-space-11);
  margin-right: var(--bui-space-11);
}

.bui-mx-12 {
  margin-left: var(--bui-space-12);
  margin-right: var(--bui-space-12);
}

.bui-mx-13 {
  margin-left: var(--bui-space-13);
  margin-right: var(--bui-space-13);
}

.bui-mx-14 {
  margin-left: var(--bui-space-14);
  margin-right: var(--bui-space-14);
}

@media (width >= 640px) {
  .xs\:bui-mx {
    margin-left: var(--px-xs);
    margin-right: var(--px-xs);
  }

  .xs\:bui-mx-0\.5 {
    margin-left: var(--bui-space-0_5);
    margin-right: var(--bui-space-0_5);
  }

  .xs\:bui-mx-1 {
    margin-left: var(--bui-space-1);
    margin-right: var(--bui-space-1);
  }

  .xs\:bui-mx-1\.5 {
    margin-left: var(--bui-space-1_5);
    margin-right: var(--bui-space-1_5);
  }

  .xs\:bui-mx-2 {
    margin-left: var(--bui-space-2);
    margin-right: var(--bui-space-2);
  }

  .xs\:bui-mx-3 {
    margin-left: var(--bui-space-3);
    margin-right: var(--bui-space-3);
  }

  .xs\:bui-mx-4 {
    margin-left: var(--bui-space-4);
    margin-right: var(--bui-space-4);
  }

  .xs\:bui-mx-5 {
    margin-left: var(--bui-space-5);
    margin-right: var(--bui-space-5);
  }

  .xs\:bui-mx-6 {
    margin-left: var(--bui-space-6);
    margin-right: var(--bui-space-6);
  }

  .xs\:bui-mx-7 {
    margin-left: var(--bui-space-7);
    margin-right: var(--bui-space-7);
  }

  .xs\:bui-mx-8 {
    margin-left: var(--bui-space-8);
    margin-right: var(--bui-space-8);
  }

  .xs\:bui-mx-9 {
    margin-left: var(--bui-space-9);
    margin-right: var(--bui-space-9);
  }

  .xs\:bui-mx-10 {
    margin-left: var(--bui-space-10);
    margin-right: var(--bui-space-10);
  }

  .xs\:bui-mx-11 {
    margin-left: var(--bui-space-11);
    margin-right: var(--bui-space-11);
  }

  .xs\:bui-mx-12 {
    margin-left: var(--bui-space-12);
    margin-right: var(--bui-space-12);
  }

  .xs\:bui-mx-13 {
    margin-left: var(--bui-space-13);
    margin-right: var(--bui-space-13);
  }

  .xs\:bui-mx-14 {
    margin-left: var(--bui-space-14);
    margin-right: var(--bui-space-14);
  }
}

@media (width >= 768px) {
  .sm\:bui-mx {
    margin-left: var(--px-sm);
    margin-right: var(--px-sm);
  }

  .sm\:bui-mx-0\.5 {
    margin-left: var(--bui-space-0_5);
    margin-right: var(--bui-space-0_5);
  }

  .sm\:bui-mx-1 {
    margin-left: var(--bui-space-1);
    margin-right: var(--bui-space-1);
  }

  .sm\:bui-mx-1\.5 {
    margin-left: var(--bui-space-1_5);
    margin-right: var(--bui-space-1_5);
  }

  .sm\:bui-mx-2 {
    margin-left: var(--bui-space-2);
    margin-right: var(--bui-space-2);
  }

  .sm\:bui-mx-3 {
    margin-left: var(--bui-space-3);
    margin-right: var(--bui-space-3);
  }

  .sm\:bui-mx-4 {
    margin-left: var(--bui-space-4);
    margin-right: var(--bui-space-4);
  }

  .sm\:bui-mx-5 {
    margin-left: var(--bui-space-5);
    margin-right: var(--bui-space-5);
  }

  .sm\:bui-mx-6 {
    margin-left: var(--bui-space-6);
    margin-right: var(--bui-space-6);
  }

  .sm\:bui-mx-7 {
    margin-left: var(--bui-space-7);
    margin-right: var(--bui-space-7);
  }

  .sm\:bui-mx-8 {
    margin-left: var(--bui-space-8);
    margin-right: var(--bui-space-8);
  }

  .sm\:bui-mx-9 {
    margin-left: var(--bui-space-9);
    margin-right: var(--bui-space-9);
  }

  .sm\:bui-mx-10 {
    margin-left: var(--bui-space-10);
    margin-right: var(--bui-space-10);
  }

  .sm\:bui-mx-11 {
    margin-left: var(--bui-space-11);
    margin-right: var(--bui-space-11);
  }

  .sm\:bui-mx-12 {
    margin-left: var(--bui-space-12);
    margin-right: var(--bui-space-12);
  }

  .sm\:bui-mx-13 {
    margin-left: var(--bui-space-13);
    margin-right: var(--bui-space-13);
  }

  .sm\:bui-mx-14 {
    margin-left: var(--bui-space-14);
    margin-right: var(--bui-space-14);
  }
}

@media (width >= 1024px) {
  .md\:bui-mx {
    margin-left: var(--px-md);
    margin-right: var(--px-md);
  }

  .md\:bui-mx-0\.5 {
    margin-left: var(--bui-space-0_5);
    margin-right: var(--bui-space-0_5);
  }

  .md\:bui-mx-1 {
    margin-left: var(--bui-space-1);
    margin-right: var(--bui-space-1);
  }

  .md\:bui-mx-1\.5 {
    margin-left: var(--bui-space-1_5);
    margin-right: var(--bui-space-1_5);
  }

  .md\:bui-mx-2 {
    margin-left: var(--bui-space-2);
    margin-right: var(--bui-space-2);
  }

  .md\:bui-mx-3 {
    margin-left: var(--bui-space-3);
    margin-right: var(--bui-space-3);
  }

  .md\:bui-mx-4 {
    margin-left: var(--bui-space-4);
    margin-right: var(--bui-space-4);
  }

  .md\:bui-mx-5 {
    margin-left: var(--bui-space-5);
    margin-right: var(--bui-space-5);
  }

  .md\:bui-mx-6 {
    margin-left: var(--bui-space-6);
    margin-right: var(--bui-space-6);
  }

  .md\:bui-mx-7 {
    margin-left: var(--bui-space-7);
    margin-right: var(--bui-space-7);
  }

  .md\:bui-mx-8 {
    margin-left: var(--bui-space-8);
    margin-right: var(--bui-space-8);
  }

  .md\:bui-mx-9 {
    margin-left: var(--bui-space-9);
    margin-right: var(--bui-space-9);
  }

  .md\:bui-mx-10 {
    margin-left: var(--bui-space-10);
    margin-right: var(--bui-space-10);
  }

  .md\:bui-mx-11 {
    margin-left: var(--bui-space-11);
    margin-right: var(--bui-space-11);
  }

  .md\:bui-mx-12 {
    margin-left: var(--bui-space-12);
    margin-right: var(--bui-space-12);
  }

  .md\:bui-mx-13 {
    margin-left: var(--bui-space-13);
    margin-right: var(--bui-space-13);
  }

  .md\:bui-mx-14 {
    margin-left: var(--bui-space-14);
    margin-right: var(--bui-space-14);
  }
}

@media (width >= 1280px) {
  .lg\:bui-mx {
    margin-left: var(--px-lg);
    margin-right: var(--px-lg);
  }

  .lg\:bui-mx-0\.5 {
    margin-left: var(--bui-space-0_5);
    margin-right: var(--bui-space-0_5);
  }

  .lg\:bui-mx-1 {
    margin-left: var(--bui-space-1);
    margin-right: var(--bui-space-1);
  }

  .lg\:bui-mx-1\.5 {
    margin-left: var(--bui-space-1_5);
    margin-right: var(--bui-space-1_5);
  }

  .lg\:bui-mx-2 {
    margin-left: var(--bui-space-2);
    margin-right: var(--bui-space-2);
  }

  .lg\:bui-mx-3 {
    margin-left: var(--bui-space-3);
    margin-right: var(--bui-space-3);
  }

  .lg\:bui-mx-4 {
    margin-left: var(--bui-space-4);
    margin-right: var(--bui-space-4);
  }

  .lg\:bui-mx-5 {
    margin-left: var(--bui-space-5);
    margin-right: var(--bui-space-5);
  }

  .lg\:bui-mx-6 {
    margin-left: var(--bui-space-6);
    margin-right: var(--bui-space-6);
  }

  .lg\:bui-mx-7 {
    margin-left: var(--bui-space-7);
    margin-right: var(--bui-space-7);
  }

  .lg\:bui-mx-8 {
    margin-left: var(--bui-space-8);
    margin-right: var(--bui-space-8);
  }

  .lg\:bui-mx-9 {
    margin-left: var(--bui-space-9);
    margin-right: var(--bui-space-9);
  }

  .lg\:bui-mx-10 {
    margin-left: var(--bui-space-10);
    margin-right: var(--bui-space-10);
  }

  .lg\:bui-mx-11 {
    margin-left: var(--bui-space-11);
    margin-right: var(--bui-space-11);
  }

  .lg\:bui-mx-12 {
    margin-left: var(--bui-space-12);
    margin-right: var(--bui-space-12);
  }

  .lg\:bui-mx-13 {
    margin-left: var(--bui-space-13);
    margin-right: var(--bui-space-13);
  }

  .lg\:bui-mx-14 {
    margin-left: var(--bui-space-14);
    margin-right: var(--bui-space-14);
  }
}

@media (width >= 1536px) {
  .xl\:bui-mx {
    margin-left: var(--px-xl);
    margin-right: var(--px-xl);
  }

  .xl\:bui-mx-0\.5 {
    margin-left: var(--bui-space-0_5);
    margin-right: var(--bui-space-0_5);
  }

  .xl\:bui-mx-1 {
    margin-left: var(--bui-space-1);
    margin-right: var(--bui-space-1);
  }

  .xl\:bui-mx-1\.5 {
    margin-left: var(--bui-space-1_5);
    margin-right: var(--bui-space-1_5);
  }

  .xl\:bui-mx-2 {
    margin-left: var(--bui-space-2);
    margin-right: var(--bui-space-2);
  }

  .xl\:bui-mx-3 {
    margin-left: var(--bui-space-3);
    margin-right: var(--bui-space-3);
  }

  .xl\:bui-mx-4 {
    margin-left: var(--bui-space-4);
    margin-right: var(--bui-space-4);
  }

  .xl\:bui-mx-5 {
    margin-left: var(--bui-space-5);
    margin-right: var(--bui-space-5);
  }

  .xl\:bui-mx-6 {
    margin-left: var(--bui-space-6);
    margin-right: var(--bui-space-6);
  }

  .xl\:bui-mx-7 {
    margin-left: var(--bui-space-7);
    margin-right: var(--bui-space-7);
  }

  .xl\:bui-mx-8 {
    margin-left: var(--bui-space-8);
    margin-right: var(--bui-space-8);
  }

  .xl\:bui-mx-9 {
    margin-left: var(--bui-space-9);
    margin-right: var(--bui-space-9);
  }

  .xl\:bui-mx-10 {
    margin-left: var(--bui-space-10);
    margin-right: var(--bui-space-10);
  }

  .xl\:bui-mx-11 {
    margin-left: var(--bui-space-11);
    margin-right: var(--bui-space-11);
  }

  .xl\:bui-mx-12 {
    margin-left: var(--bui-space-12);
    margin-right: var(--bui-space-12);
  }

  .xl\:bui-mx-13 {
    margin-left: var(--bui-space-13);
    margin-right: var(--bui-space-13);
  }

  .xl\:bui-mx-14 {
    margin-left: var(--bui-space-14);
    margin-right: var(--bui-space-14);
  }
}

.bui-display-none {
  display: none;
}

.bui-display-inline {
  display: inline;
}

.bui-display-inline-block {
  display: inline-block;
}

.bui-display-block {
  display: block;
}

@media (width >= 640px) {
  .xs\:bui-display-none {
    display: none;
  }

  .xs\:bui-display-inline {
    display: inline;
  }

  .xs\:bui-display-inline-block {
    display: inline-block;
  }

  .xs\:bui-display-block {
    display: block;
  }
}

@media (width >= 768px) {
  .sm\:bui-display-none {
    display: none;
  }

  .sm\:bui-display-inline {
    display: inline;
  }

  .sm\:bui-display-inline-block {
    display: inline-block;
  }

  .sm\:bui-display-block {
    display: block;
  }
}

@media (width >= 1024px) {
  .md\:bui-display-none {
    display: none;
  }

  .md\:bui-display-inline {
    display: inline;
  }

  .md\:bui-display-inline-block {
    display: inline-block;
  }

  .md\:bui-display-block {
    display: block;
  }
}

@media (width >= 1280px) {
  .lg\:bui-display-none {
    display: none;
  }

  .lg\:bui-display-inline {
    display: inline;
  }

  .lg\:bui-display-inline-block {
    display: inline-block;
  }

  .lg\:bui-display-block {
    display: block;
  }
}

@media (width >= 1536px) {
  .xl\:bui-display-none {
    display: none;
  }

  .xl\:bui-display-inline {
    display: inline;
  }

  .xl\:bui-display-inline-block {
    display: inline-block;
  }

  .xl\:bui-display-block {
    display: block;
  }
}

.bui-w {
  width: var(--width);
}

.bui-min-w {
  min-width: var(--min-width);
}

.bui-max-w {
  max-width: var(--max-width);
}

@media (width >= 640px) {
  .xs\:bui-w {
    width: var(--width);
  }

  .xs\:bui-min-w {
    min-width: var(--min-width);
  }

  .xs\:bui-max-w {
    max-width: var(--max-width);
  }
}

@media (width >= 768px) {
  .sm\:bui-w {
    width: var(--width);
  }

  .sm\:bui-min-w {
    min-width: var(--min-width);
  }

  .sm\:bui-max-w {
    max-width: var(--max-width);
  }
}

@media (width >= 1024px) {
  .md\:bui-w {
    width: var(--width);
  }

  .md\:bui-min-w {
    min-width: var(--min-width);
  }

  .md\:bui-max-w {
    max-width: var(--max-width);
  }
}

@media (width >= 1280px) {
  .lg\:bui-w {
    width: var(--width);
  }

  .lg\:bui-min-w {
    min-width: var(--min-width);
  }

  .lg\:bui-max-w {
    max-width: var(--max-width);
  }
}

@media (width >= 1536px) {
  .xl\:bui-w {
    width: var(--width);
  }

  .xl\:bui-min-w {
    min-width: var(--min-width);
  }

  .xl\:bui-max-w {
    max-width: var(--max-width);
  }
}

.bui-h {
  height: var(--height);
}

.bui-min-h {
  min-height: var(--min-height);
}

.bui-max-h {
  max-height: var(--max-height);
}

@media (width >= 640px) {
  .xs\:bui-h {
    height: var(--height);
  }

  .xs\:bui-min-h {
    min-height: var(--min-height);
  }

  .xs\:bui-max-h {
    max-height: var(--max-height);
  }
}

@media (width >= 768px) {
  .sm\:bui-h {
    height: var(--height);
  }

  .sm\:bui-min-h {
    min-height: var(--min-height);
  }

  .sm\:bui-max-h {
    max-height: var(--max-height);
  }
}

@media (width >= 1024px) {
  .md\:bui-h {
    height: var(--height);
  }

  .md\:bui-min-h {
    min-height: var(--min-height);
  }

  .md\:bui-max-h {
    max-height: var(--max-height);
  }
}

@media (width >= 1280px) {
  .lg\:bui-h {
    height: var(--height);
  }

  .lg\:bui-min-h {
    min-height: var(--min-height);
  }

  .lg\:bui-max-h {
    max-height: var(--max-height);
  }
}

@media (width >= 1536px) {
  .xl\:bui-h {
    height: var(--height);
  }

  .xl\:bui-min-h {
    min-height: var(--min-height);
  }

  .xl\:bui-max-h {
    max-height: var(--max-height);
  }
}

.bui-position-absolute {
  position: absolute;
}

.bui-position-fixed {
  position: fixed;
}

.bui-position-sticky {
  position: sticky;
}

.bui-position-relative {
  position: relative;
}

.bui-position-static {
  position: static;
}

@media (width >= 640px) {
  .xs\:bui-position-absolute {
    position: absolute;
  }

  .xs\:bui-position-fixed {
    position: fixed;
  }

  .xs\:bui-position-sticky {
    position: sticky;
  }

  .xs\:bui-position-relative {
    position: relative;
  }

  .xs\:bui-position-static {
    position: static;
  }
}

@media (width >= 768px) {
  .sm\:bui-position-absolute {
    position: absolute;
  }

  .sm\:bui-position-fixed {
    position: fixed;
  }

  .sm\:bui-position-sticky {
    position: sticky;
  }

  .sm\:bui-position-relative {
    position: relative;
  }

  .sm\:bui-position-static {
    position: static;
  }
}

@media (width >= 1024px) {
  .md\:bui-position-absolute {
    position: absolute;
  }

  .md\:bui-position-fixed {
    position: fixed;
  }

  .md\:bui-position-sticky {
    position: sticky;
  }

  .md\:bui-position-relative {
    position: relative;
  }

  .md\:bui-position-static {
    position: static;
  }
}

@media (width >= 1280px) {
  .lg\:bui-position-absolute {
    position: absolute;
  }

  .lg\:bui-position-fixed {
    position: fixed;
  }

  .lg\:bui-position-sticky {
    position: sticky;
  }

  .lg\:bui-position-relative {
    position: relative;
  }

  .lg\:bui-position-static {
    position: static;
  }
}

@media (width >= 1536px) {
  .xl\:bui-position-absolute {
    position: absolute;
  }

  .xl\:bui-position-fixed {
    position: fixed;
  }

  .xl\:bui-position-sticky {
    position: sticky;
  }

  .xl\:bui-position-relative {
    position: relative;
  }

  .xl\:bui-position-static {
    position: static;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

.bui-columns-auto {
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

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

.bui-col-span-2 {
  grid-column: span 2 / span 2;
}

.bui-col-span-3 {
  grid-column: span 3 / span 3;
}

.bui-col-span-4 {
  grid-column: span 4 / span 4;
}

.bui-col-span-5 {
  grid-column: span 5 / span 5;
}

.bui-col-span-6 {
  grid-column: span 6 / span 6;
}

.bui-col-span-7 {
  grid-column: span 7 / span 7;
}

.bui-col-span-8 {
  grid-column: span 8 / span 8;
}

.bui-col-span-9 {
  grid-column: span 9 / span 9;
}

.bui-col-span-10 {
  grid-column: span 10 / span 10;
}

.bui-col-span-11 {
  grid-column: span 11 / span 11;
}

.bui-col-span-12 {
  grid-column: span 12 / span 12;
}

.bui-col-span-auto {
  grid-column: span auto / span auto;
}

.bui-col-start-1 {
  grid-column-start: 1;
}

.bui-col-start-2 {
  grid-column-start: 2;
}

.bui-col-start-3 {
  grid-column-start: 3;
}

.bui-col-start-4 {
  grid-column-start: 4;
}

.bui-col-start-5 {
  grid-column-start: 5;
}

.bui-col-start-6 {
  grid-column-start: 6;
}

.bui-col-start-7 {
  grid-column-start: 7;
}

.bui-col-start-8 {
  grid-column-start: 8;
}

.bui-col-start-9 {
  grid-column-start: 9;
}

.bui-col-start-10 {
  grid-column-start: 10;
}

.bui-col-start-11 {
  grid-column-start: 11;
}

.bui-col-start-12 {
  grid-column-start: 12;
}

.bui-col-start-13 {
  grid-column-start: 13;
}

.bui-col-start-auto {
  grid-column-start: auto;
}

.bui-col-end-1 {
  grid-column-end: 1;
}

.bui-col-end-2 {
  grid-column-end: 2;
}

.bui-col-end-3 {
  grid-column-end: 3;
}

.bui-col-end-4 {
  grid-column-end: 4;
}

.bui-col-end-5 {
  grid-column-end: 5;
}

.bui-col-end-6 {
  grid-column-end: 6;
}

.bui-col-end-7 {
  grid-column-end: 7;
}

.bui-col-end-8 {
  grid-column-end: 8;
}

.bui-col-end-9 {
  grid-column-end: 9;
}

.bui-col-end-10 {
  grid-column-end: 10;
}

.bui-col-end-11 {
  grid-column-end: 11;
}

.bui-col-end-12 {
  grid-column-end: 12;
}

.bui-col-end-13 {
  grid-column-end: 13;
}

.bui-col-end-auto {
  grid-column-end: auto;
}

.bui-row-span-1 {
  grid-row: span 1 / span 1;
}

.bui-row-span-2 {
  grid-row: span 2 / span 2;
}

.bui-row-span-3 {
  grid-row: span 3 / span 3;
}

.bui-row-span-4 {
  grid-row: span 4 / span 4;
}

.bui-row-span-5 {
  grid-row: span 5 / span 5;
}

.bui-row-span-6 {
  grid-row: span 6 / span 6;
}

.bui-row-span-7 {
  grid-row: span 7 / span 7;
}

.bui-row-span-8 {
  grid-row: span 8 / span 8;
}

.bui-row-span-9 {
  grid-row: span 9 / span 9;
}

.bui-row-span-10 {
  grid-row: span 10 / span 10;
}

.bui-row-span-11 {
  grid-row: span 11 / span 11;
}

.bui-row-span-12 {
  grid-row: span 12 / span 12;
}

.bui-row-span-auto {
  grid-row: span auto / span auto;
}

@media (width >= 640px) {
  .xs\:bui-columns-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .xs\:bui-columns-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .xs\:bui-columns-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .xs\:bui-columns-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .xs\:bui-columns-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .xs\:bui-columns-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .xs\:bui-columns-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .xs\:bui-columns-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .xs\:bui-columns-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }

  .xs\:bui-columns-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .xs\:bui-columns-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }

  .xs\:bui-columns-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .xs\:bui-columns-auto {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }

  .xs\:bui-col-span-1 {
    grid-column: span 1 / span 1;
  }

  .xs\:bui-col-span-2 {
    grid-column: span 2 / span 2;
  }

  .xs\:bui-col-span-3 {
    grid-column: span 3 / span 3;
  }

  .xs\:bui-col-span-4 {
    grid-column: span 4 / span 4;
  }

  .xs\:bui-col-span-5 {
    grid-column: span 5 / span 5;
  }

  .xs\:bui-col-span-6 {
    grid-column: span 6 / span 6;
  }

  .xs\:bui-col-span-7 {
    grid-column: span 7 / span 7;
  }

  .xs\:bui-col-span-8 {
    grid-column: span 8 / span 8;
  }

  .xs\:bui-col-span-9 {
    grid-column: span 9 / span 9;
  }

  .xs\:bui-col-span-10 {
    grid-column: span 10 / span 10;
  }

  .xs\:bui-col-span-11 {
    grid-column: span 11 / span 11;
  }

  .xs\:bui-col-span-12 {
    grid-column: span 12 / span 12;
  }

  .xs\:bui-col-span-auto {
    grid-column: span auto / span auto;
  }

  .xs\:bui-col-start-1 {
    grid-column-start: 1;
  }

  .xs\:bui-col-start-2 {
    grid-column-start: 2;
  }

  .xs\:bui-col-start-3 {
    grid-column-start: 3;
  }

  .xs\:bui-col-start-4 {
    grid-column-start: 4;
  }

  .xs\:bui-col-start-5 {
    grid-column-start: 5;
  }

  .xs\:bui-col-start-6 {
    grid-column-start: 6;
  }

  .xs\:bui-col-start-7 {
    grid-column-start: 7;
  }

  .xs\:bui-col-start-8 {
    grid-column-start: 8;
  }

  .xs\:bui-col-start-9 {
    grid-column-start: 9;
  }

  .xs\:bui-col-start-10 {
    grid-column-start: 10;
  }

  .xs\:bui-col-start-11 {
    grid-column-start: 11;
  }

  .xs\:bui-col-start-12 {
    grid-column-start: 12;
  }

  .xs\:bui-col-start-13 {
    grid-column-start: 13;
  }

  .xs\:bui-col-start-auto {
    grid-column-start: auto;
  }

  .xs\:bui-col-end-1 {
    grid-column-end: 1;
  }

  .xs\:bui-col-end-2 {
    grid-column-end: 2;
  }

  .xs\:bui-col-end-3 {
    grid-column-end: 3;
  }

  .xs\:bui-col-end-4 {
    grid-column-end: 4;
  }

  .xs\:bui-col-end-5 {
    grid-column-end: 5;
  }

  .xs\:bui-col-end-6 {
    grid-column-end: 6;
  }

  .xs\:bui-col-end-7 {
    grid-column-end: 7;
  }

  .xs\:bui-col-end-8 {
    grid-column-end: 8;
  }

  .xs\:bui-col-end-9 {
    grid-column-end: 9;
  }

  .xs\:bui-col-end-10 {
    grid-column-end: 10;
  }

  .xs\:bui-col-end-11 {
    grid-column-end: 11;
  }

  .xs\:bui-col-end-12 {
    grid-column-end: 12;
  }

  .xs\:bui-col-end-13 {
    grid-column-end: 13;
  }

  .xs\:bui-col-end-auto {
    grid-column-end: auto;
  }

  .xs\:bui-row-span-1 {
    grid-row: span 1 / span 1;
  }

  .xs\:bui-row-span-2 {
    grid-row: span 2 / span 2;
  }

  .xs\:bui-row-span-3 {
    grid-row: span 3 / span 3;
  }

  .xs\:bui-row-span-4 {
    grid-row: span 4 / span 4;
  }

  .xs\:bui-row-span-5 {
    grid-row: span 5 / span 5;
  }

  .xs\:bui-row-span-6 {
    grid-row: span 6 / span 6;
  }

  .xs\:bui-row-span-7 {
    grid-row: span 7 / span 7;
  }

  .xs\:bui-row-span-8 {
    grid-row: span 8 / span 8;
  }

  .xs\:bui-row-span-9 {
    grid-row: span 9 / span 9;
  }

  .xs\:bui-row-span-10 {
    grid-row: span 10 / span 10;
  }

  .xs\:bui-row-span-11 {
    grid-row: span 11 / span 11;
  }

  .xs\:bui-row-span-12 {
    grid-row: span 12 / span 12;
  }

  .xs\:bui-row-span-auto {
    grid-row: span auto / span auto;
  }
}

@media (width >= 768px) {
  .sm\:bui-columns-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .sm\:bui-columns-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:bui-columns-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:bui-columns-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sm\:bui-columns-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .sm\:bui-columns-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .sm\:bui-columns-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .sm\:bui-columns-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .sm\:bui-columns-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }

  .sm\:bui-columns-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .sm\:bui-columns-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }

  .sm\:bui-columns-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .sm\:bui-columns-auto {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }

  .sm\:bui-col-span-1 {
    grid-column: span 1 / span 1;
  }

  .sm\:bui-col-span-2 {
    grid-column: span 2 / span 2;
  }

  .sm\:bui-col-span-3 {
    grid-column: span 3 / span 3;
  }

  .sm\:bui-col-span-4 {
    grid-column: span 4 / span 4;
  }

  .sm\:bui-col-span-5 {
    grid-column: span 5 / span 5;
  }

  .sm\:bui-col-span-6 {
    grid-column: span 6 / span 6;
  }

  .sm\:bui-col-span-7 {
    grid-column: span 7 / span 7;
  }

  .sm\:bui-col-span-8 {
    grid-column: span 8 / span 8;
  }

  .sm\:bui-col-span-9 {
    grid-column: span 9 / span 9;
  }

  .sm\:bui-col-span-10 {
    grid-column: span 10 / span 10;
  }

  .sm\:bui-col-span-11 {
    grid-column: span 11 / span 11;
  }

  .sm\:bui-col-span-12 {
    grid-column: span 12 / span 12;
  }

  .sm\:bui-col-span-auto {
    grid-column: span auto / span auto;
  }

  .sm\:bui-col-start-1 {
    grid-column-start: 1;
  }

  .sm\:bui-col-start-2 {
    grid-column-start: 2;
  }

  .sm\:bui-col-start-3 {
    grid-column-start: 3;
  }

  .sm\:bui-col-start-4 {
    grid-column-start: 4;
  }

  .sm\:bui-col-start-5 {
    grid-column-start: 5;
  }

  .sm\:bui-col-start-6 {
    grid-column-start: 6;
  }

  .sm\:bui-col-start-7 {
    grid-column-start: 7;
  }

  .sm\:bui-col-start-8 {
    grid-column-start: 8;
  }

  .sm\:bui-col-start-9 {
    grid-column-start: 9;
  }

  .sm\:bui-col-start-10 {
    grid-column-start: 10;
  }

  .sm\:bui-col-start-11 {
    grid-column-start: 11;
  }

  .sm\:bui-col-start-12 {
    grid-column-start: 12;
  }

  .sm\:bui-col-start-13 {
    grid-column-start: 13;
  }

  .sm\:bui-col-start-auto {
    grid-column-start: auto;
  }

  .sm\:bui-col-end-1 {
    grid-column-end: 1;
  }

  .sm\:bui-col-end-2 {
    grid-column-end: 2;
  }

  .sm\:bui-col-end-3 {
    grid-column-end: 3;
  }

  .sm\:bui-col-end-4 {
    grid-column-end: 4;
  }

  .sm\:bui-col-end-5 {
    grid-column-end: 5;
  }

  .sm\:bui-col-end-6 {
    grid-column-end: 6;
  }

  .sm\:bui-col-end-7 {
    grid-column-end: 7;
  }

  .sm\:bui-col-end-8 {
    grid-column-end: 8;
  }

  .sm\:bui-col-end-9 {
    grid-column-end: 9;
  }

  .sm\:bui-col-end-10 {
    grid-column-end: 10;
  }

  .sm\:bui-col-end-11 {
    grid-column-end: 11;
  }

  .sm\:bui-col-end-12 {
    grid-column-end: 12;
  }

  .sm\:bui-col-end-13 {
    grid-column-end: 13;
  }

  .sm\:bui-col-end-auto {
    grid-column-end: auto;
  }

  .sm\:bui-row-span-1 {
    grid-row: span 1 / span 1;
  }

  .sm\:bui-row-span-2 {
    grid-row: span 2 / span 2;
  }

  .sm\:bui-row-span-3 {
    grid-row: span 3 / span 3;
  }

  .sm\:bui-row-span-4 {
    grid-row: span 4 / span 4;
  }

  .sm\:bui-row-span-5 {
    grid-row: span 5 / span 5;
  }

  .sm\:bui-row-span-6 {
    grid-row: span 6 / span 6;
  }

  .sm\:bui-row-span-7 {
    grid-row: span 7 / span 7;
  }

  .sm\:bui-row-span-8 {
    grid-row: span 8 / span 8;
  }

  .sm\:bui-row-span-9 {
    grid-row: span 9 / span 9;
  }

  .sm\:bui-row-span-10 {
    grid-row: span 10 / span 10;
  }

  .sm\:bui-row-span-11 {
    grid-row: span 11 / span 11;
  }

  .sm\:bui-row-span-12 {
    grid-row: span 12 / span 12;
  }

  .sm\:bui-row-span-auto {
    grid-row: span auto / span auto;
  }
}

@media (width >= 1024px) {
  .md\:bui-columns-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .md\:bui-columns-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:bui-columns-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:bui-columns-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:bui-columns-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .md\:bui-columns-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .md\:bui-columns-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .md\:bui-columns-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .md\:bui-columns-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }

  .md\:bui-columns-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .md\:bui-columns-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }

  .md\:bui-columns-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .md\:bui-columns-auto {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }

  .md\:bui-col-span-1 {
    grid-column: span 1 / span 1;
  }

  .md\:bui-col-span-2 {
    grid-column: span 2 / span 2;
  }

  .md\:bui-col-span-3 {
    grid-column: span 3 / span 3;
  }

  .md\:bui-col-span-4 {
    grid-column: span 4 / span 4;
  }

  .md\:bui-col-span-5 {
    grid-column: span 5 / span 5;
  }

  .md\:bui-col-span-6 {
    grid-column: span 6 / span 6;
  }

  .md\:bui-col-span-7 {
    grid-column: span 7 / span 7;
  }

  .md\:bui-col-span-8 {
    grid-column: span 8 / span 8;
  }

  .md\:bui-col-span-9 {
    grid-column: span 9 / span 9;
  }

  .md\:bui-col-span-10 {
    grid-column: span 10 / span 10;
  }

  .md\:bui-col-span-11 {
    grid-column: span 11 / span 11;
  }

  .md\:bui-col-span-12 {
    grid-column: span 12 / span 12;
  }

  .md\:bui-col-span-auto {
    grid-column: span auto / span auto;
  }

  .md\:bui-col-start-1 {
    grid-column-start: 1;
  }

  .md\:bui-col-start-2 {
    grid-column-start: 2;
  }

  .md\:bui-col-start-3 {
    grid-column-start: 3;
  }

  .md\:bui-col-start-4 {
    grid-column-start: 4;
  }

  .md\:bui-col-start-5 {
    grid-column-start: 5;
  }

  .md\:bui-col-start-6 {
    grid-column-start: 6;
  }

  .md\:bui-col-start-7 {
    grid-column-start: 7;
  }

  .md\:bui-col-start-8 {
    grid-column-start: 8;
  }

  .md\:bui-col-start-9 {
    grid-column-start: 9;
  }

  .md\:bui-col-start-10 {
    grid-column-start: 10;
  }

  .md\:bui-col-start-11 {
    grid-column-start: 11;
  }

  .md\:bui-col-start-12 {
    grid-column-start: 12;
  }

  .md\:bui-col-start-13 {
    grid-column-start: 13;
  }

  .md\:bui-col-start-auto {
    grid-column-start: auto;
  }

  .md\:bui-col-end-1 {
    grid-column-end: 1;
  }

  .md\:bui-col-end-2 {
    grid-column-end: 2;
  }

  .md\:bui-col-end-3 {
    grid-column-end: 3;
  }

  .md\:bui-col-end-4 {
    grid-column-end: 4;
  }

  .md\:bui-col-end-5 {
    grid-column-end: 5;
  }

  .md\:bui-col-end-6 {
    grid-column-end: 6;
  }

  .md\:bui-col-end-7 {
    grid-column-end: 7;
  }

  .md\:bui-col-end-8 {
    grid-column-end: 8;
  }

  .md\:bui-col-end-9 {
    grid-column-end: 9;
  }

  .md\:bui-col-end-10 {
    grid-column-end: 10;
  }

  .md\:bui-col-end-11 {
    grid-column-end: 11;
  }

  .md\:bui-col-end-12 {
    grid-column-end: 12;
  }

  .md\:bui-col-end-13 {
    grid-column-end: 13;
  }

  .md\:bui-col-end-auto {
    grid-column-end: auto;
  }

  .md\:bui-row-span-1 {
    grid-row: span 1 / span 1;
  }

  .md\:bui-row-span-2 {
    grid-row: span 2 / span 2;
  }

  .md\:bui-row-span-3 {
    grid-row: span 3 / span 3;
  }

  .md\:bui-row-span-4 {
    grid-row: span 4 / span 4;
  }

  .md\:bui-row-span-5 {
    grid-row: span 5 / span 5;
  }

  .md\:bui-row-span-6 {
    grid-row: span 6 / span 6;
  }

  .md\:bui-row-span-7 {
    grid-row: span 7 / span 7;
  }

  .md\:bui-row-span-8 {
    grid-row: span 8 / span 8;
  }

  .md\:bui-row-span-9 {
    grid-row: span 9 / span 9;
  }

  .md\:bui-row-span-10 {
    grid-row: span 10 / span 10;
  }

  .md\:bui-row-span-11 {
    grid-row: span 11 / span 11;
  }

  .md\:bui-row-span-12 {
    grid-row: span 12 / span 12;
  }

  .md\:bui-row-span-auto {
    grid-row: span auto / span auto;
  }
}

@media (width >= 1280px) {
  .lg\:bui-columns-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .lg\:bui-columns-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:bui-columns-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:bui-columns-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:bui-columns-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .lg\:bui-columns-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .lg\:bui-columns-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .lg\:bui-columns-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .lg\:bui-columns-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }

  .lg\:bui-columns-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .lg\:bui-columns-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }

  .lg\:bui-columns-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .lg\:bui-columns-auto {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }

  .lg\:bui-col-span-1 {
    grid-column: span 1 / span 1;
  }

  .lg\:bui-col-span-2 {
    grid-column: span 2 / span 2;
  }

  .lg\:bui-col-span-3 {
    grid-column: span 3 / span 3;
  }

  .lg\:bui-col-span-4 {
    grid-column: span 4 / span 4;
  }

  .lg\:bui-col-span-5 {
    grid-column: span 5 / span 5;
  }

  .lg\:bui-col-span-6 {
    grid-column: span 6 / span 6;
  }

  .lg\:bui-col-span-7 {
    grid-column: span 7 / span 7;
  }

  .lg\:bui-col-span-8 {
    grid-column: span 8 / span 8;
  }

  .lg\:bui-col-span-9 {
    grid-column: span 9 / span 9;
  }

  .lg\:bui-col-span-10 {
    grid-column: span 10 / span 10;
  }

  .lg\:bui-col-span-11 {
    grid-column: span 11 / span 11;
  }

  .lg\:bui-col-span-12 {
    grid-column: span 12 / span 12;
  }

  .lg\:bui-col-span-auto {
    grid-column: span auto / span auto;
  }

  .lg\:bui-col-start-1 {
    grid-column-start: 1;
  }

  .lg\:bui-col-start-2 {
    grid-column-start: 2;
  }

  .lg\:bui-col-start-3 {
    grid-column-start: 3;
  }

  .lg\:bui-col-start-4 {
    grid-column-start: 4;
  }

  .lg\:bui-col-start-5 {
    grid-column-start: 5;
  }

  .lg\:bui-col-start-6 {
    grid-column-start: 6;
  }

  .lg\:bui-col-start-7 {
    grid-column-start: 7;
  }

  .lg\:bui-col-start-8 {
    grid-column-start: 8;
  }

  .lg\:bui-col-start-9 {
    grid-column-start: 9;
  }

  .lg\:bui-col-start-10 {
    grid-column-start: 10;
  }

  .lg\:bui-col-start-11 {
    grid-column-start: 11;
  }

  .lg\:bui-col-start-12 {
    grid-column-start: 12;
  }

  .lg\:bui-col-start-13 {
    grid-column-start: 13;
  }

  .lg\:bui-col-start-auto {
    grid-column-start: auto;
  }

  .lg\:bui-col-end-1 {
    grid-column-end: 1;
  }

  .lg\:bui-col-end-2 {
    grid-column-end: 2;
  }

  .lg\:bui-col-end-3 {
    grid-column-end: 3;
  }

  .lg\:bui-col-end-4 {
    grid-column-end: 4;
  }

  .lg\:bui-col-end-5 {
    grid-column-end: 5;
  }

  .lg\:bui-col-end-6 {
    grid-column-end: 6;
  }

  .lg\:bui-col-end-7 {
    grid-column-end: 7;
  }

  .lg\:bui-col-end-8 {
    grid-column-end: 8;
  }

  .lg\:bui-col-end-9 {
    grid-column-end: 9;
  }

  .lg\:bui-col-end-10 {
    grid-column-end: 10;
  }

  .lg\:bui-col-end-11 {
    grid-column-end: 11;
  }

  .lg\:bui-col-end-12 {
    grid-column-end: 12;
  }

  .lg\:bui-col-end-13 {
    grid-column-end: 13;
  }

  .lg\:bui-col-end-auto {
    grid-column-end: auto;
  }

  .lg\:bui-row-span-1 {
    grid-row: span 1 / span 1;
  }

  .lg\:bui-row-span-2 {
    grid-row: span 2 / span 2;
  }

  .lg\:bui-row-span-3 {
    grid-row: span 3 / span 3;
  }

  .lg\:bui-row-span-4 {
    grid-row: span 4 / span 4;
  }

  .lg\:bui-row-span-5 {
    grid-row: span 5 / span 5;
  }

  .lg\:bui-row-span-6 {
    grid-row: span 6 / span 6;
  }

  .lg\:bui-row-span-7 {
    grid-row: span 7 / span 7;
  }

  .lg\:bui-row-span-8 {
    grid-row: span 8 / span 8;
  }

  .lg\:bui-row-span-9 {
    grid-row: span 9 / span 9;
  }

  .lg\:bui-row-span-10 {
    grid-row: span 10 / span 10;
  }

  .lg\:bui-row-span-11 {
    grid-row: span 11 / span 11;
  }

  .lg\:bui-row-span-12 {
    grid-row: span 12 / span 12;
  }

  .lg\:bui-row-span-auto {
    grid-row: span auto / span auto;
  }
}

@media (width >= 1536px) {
  .xl\:bui-columns-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .xl\:bui-columns-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .xl\:bui-columns-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .xl\:bui-columns-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .xl\:bui-columns-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .xl\:bui-columns-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .xl\:bui-columns-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .xl\:bui-columns-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .xl\:bui-columns-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }

  .xl\:bui-columns-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .xl\:bui-columns-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }

  .xl\:bui-columns-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .xl\:bui-columns-auto {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }

  .xl\:bui-col-span-1 {
    grid-column: span 1 / span 1;
  }

  .xl\:bui-col-span-2 {
    grid-column: span 2 / span 2;
  }

  .xl\:bui-col-span-3 {
    grid-column: span 3 / span 3;
  }

  .xl\:bui-col-span-4 {
    grid-column: span 4 / span 4;
  }

  .xl\:bui-col-span-5 {
    grid-column: span 5 / span 5;
  }

  .xl\:bui-col-span-6 {
    grid-column: span 6 / span 6;
  }

  .xl\:bui-col-span-7 {
    grid-column: span 7 / span 7;
  }

  .xl\:bui-col-span-8 {
    grid-column: span 8 / span 8;
  }

  .xl\:bui-col-span-9 {
    grid-column: span 9 / span 9;
  }

  .xl\:bui-col-span-10 {
    grid-column: span 10 / span 10;
  }

  .xl\:bui-col-span-11 {
    grid-column: span 11 / span 11;
  }

  .xl\:bui-col-span-12 {
    grid-column: span 12 / span 12;
  }

  .xl\:bui-col-span-auto {
    grid-column: span auto / span auto;
  }

  .xl\:bui-col-start-1 {
    grid-column-start: 1;
  }

  .xl\:bui-col-start-2 {
    grid-column-start: 2;
  }

  .xl\:bui-col-start-3 {
    grid-column-start: 3;
  }

  .xl\:bui-col-start-4 {
    grid-column-start: 4;
  }

  .xl\:bui-col-start-5 {
    grid-column-start: 5;
  }

  .xl\:bui-col-start-6 {
    grid-column-start: 6;
  }

  .xl\:bui-col-start-7 {
    grid-column-start: 7;
  }

  .xl\:bui-col-start-8 {
    grid-column-start: 8;
  }

  .xl\:bui-col-start-9 {
    grid-column-start: 9;
  }

  .xl\:bui-col-start-10 {
    grid-column-start: 10;
  }

  .xl\:bui-col-start-11 {
    grid-column-start: 11;
  }

  .xl\:bui-col-start-12 {
    grid-column-start: 12;
  }

  .xl\:bui-col-start-13 {
    grid-column-start: 13;
  }

  .xl\:bui-col-start-auto {
    grid-column-start: auto;
  }

  .xl\:bui-col-end-1 {
    grid-column-end: 1;
  }

  .xl\:bui-col-end-2 {
    grid-column-end: 2;
  }

  .xl\:bui-col-end-3 {
    grid-column-end: 3;
  }

  .xl\:bui-col-end-4 {
    grid-column-end: 4;
  }

  .xl\:bui-col-end-5 {
    grid-column-end: 5;
  }

  .xl\:bui-col-end-6 {
    grid-column-end: 6;
  }

  .xl\:bui-col-end-7 {
    grid-column-end: 7;
  }

  .xl\:bui-col-end-8 {
    grid-column-end: 8;
  }

  .xl\:bui-col-end-9 {
    grid-column-end: 9;
  }

  .xl\:bui-col-end-10 {
    grid-column-end: 10;
  }

  .xl\:bui-col-end-11 {
    grid-column-end: 11;
  }

  .xl\:bui-col-end-12 {
    grid-column-end: 12;
  }

  .xl\:bui-col-end-13 {
    grid-column-end: 13;
  }

  .xl\:bui-col-end-auto {
    grid-column-end: auto;
  }

  .xl\:bui-row-span-1 {
    grid-row: span 1 / span 1;
  }

  .xl\:bui-row-span-2 {
    grid-row: span 2 / span 2;
  }

  .xl\:bui-row-span-3 {
    grid-row: span 3 / span 3;
  }

  .xl\:bui-row-span-4 {
    grid-row: span 4 / span 4;
  }

  .xl\:bui-row-span-5 {
    grid-row: span 5 / span 5;
  }

  .xl\:bui-row-span-6 {
    grid-row: span 6 / span 6;
  }

  .xl\:bui-row-span-7 {
    grid-row: span 7 / span 7;
  }

  .xl\:bui-row-span-8 {
    grid-row: span 8 / span 8;
  }

  .xl\:bui-row-span-9 {
    grid-row: span 9 / span 9;
  }

  .xl\:bui-row-span-10 {
    grid-row: span 10 / span 10;
  }

  .xl\:bui-row-span-11 {
    grid-row: span 11 / span 11;
  }

  .xl\:bui-row-span-12 {
    grid-row: span 12 / span 12;
  }

  .xl\:bui-row-span-auto {
    grid-row: span auto / span auto;
  }
}

.bui-gap {
  gap: var(--gap);
}

.bui-gap-0\.5 {
  gap: var(--bui-space-0_5);
}

.bui-gap-1 {
  gap: var(--bui-space-1);
}

.bui-gap-1\.5 {
  gap: var(--bui-space-1_5);
}

.bui-gap-2 {
  gap: var(--bui-space-2);
}

.bui-gap-3 {
  gap: var(--bui-space-3);
}

.bui-gap-4 {
  gap: var(--bui-space-4);
}

.bui-gap-5 {
  gap: var(--bui-space-5);
}

.bui-gap-6 {
  gap: var(--bui-space-6);
}

.bui-gap-7 {
  gap: var(--bui-space-7);
}

.bui-gap-8 {
  gap: var(--bui-space-8);
}

.bui-gap-9 {
  gap: var(--bui-space-9);
}

.bui-gap-10 {
  gap: var(--bui-space-10);
}

.bui-gap-11 {
  gap: var(--bui-space-11);
}

.bui-gap-12 {
  gap: var(--bui-space-12);
}

.bui-gap-13 {
  gap: var(--bui-space-13);
}

.bui-gap-14 {
  gap: var(--bui-space-14);
}

@media (width >= 640px) {
  .xs\:bui-gap {
    gap: var(--gap-xs);
  }

  .xs\:bui-gap-0\.5 {
    gap: var(--bui-space-0_5);
  }

  .xs\:bui-gap-1 {
    gap: var(--bui-space-1);
  }

  .xs\:bui-gap-1\.5 {
    gap: var(--bui-space-1_5);
  }

  .xs\:bui-gap-2 {
    gap: var(--bui-space-2);
  }

  .xs\:bui-gap-3 {
    gap: var(--bui-space-3);
  }

  .xs\:bui-gap-4 {
    gap: var(--bui-space-4);
  }

  .xs\:bui-gap-5 {
    gap: var(--bui-space-5);
  }

  .xs\:bui-gap-6 {
    gap: var(--bui-space-6);
  }

  .xs\:bui-gap-7 {
    gap: var(--bui-space-7);
  }

  .xs\:bui-gap-8 {
    gap: var(--bui-space-8);
  }

  .xs\:bui-gap-9 {
    gap: var(--bui-space-9);
  }

  .xs\:bui-gap-10 {
    gap: var(--bui-space-10);
  }

  .xs\:bui-gap-11 {
    gap: var(--bui-space-11);
  }

  .xs\:bui-gap-12 {
    gap: var(--bui-space-12);
  }

  .xs\:bui-gap-13 {
    gap: var(--bui-space-13);
  }

  .xs\:bui-gap-14 {
    gap: var(--bui-space-14);
  }
}

@media (width >= 768px) {
  .sm\:bui-gap {
    gap: var(--gap-sm);
  }

  .sm\:bui-gap-0\.5 {
    gap: var(--bui-space-0_5);
  }

  .sm\:bui-gap-1 {
    gap: var(--bui-space-1);
  }

  .sm\:bui-gap-1\.5 {
    gap: var(--bui-space-1_5);
  }

  .sm\:bui-gap-2 {
    gap: var(--bui-space-2);
  }

  .sm\:bui-gap-3 {
    gap: var(--bui-space-3);
  }

  .sm\:bui-gap-4 {
    gap: var(--bui-space-4);
  }

  .sm\:bui-gap-5 {
    gap: var(--bui-space-5);
  }

  .sm\:bui-gap-6 {
    gap: var(--bui-space-6);
  }

  .sm\:bui-gap-7 {
    gap: var(--bui-space-7);
  }

  .sm\:bui-gap-8 {
    gap: var(--bui-space-8);
  }

  .sm\:bui-gap-9 {
    gap: var(--bui-space-9);
  }

  .sm\:bui-gap-10 {
    gap: var(--bui-space-10);
  }

  .sm\:bui-gap-11 {
    gap: var(--bui-space-11);
  }

  .sm\:bui-gap-12 {
    gap: var(--bui-space-12);
  }

  .sm\:bui-gap-13 {
    gap: var(--bui-space-13);
  }

  .sm\:bui-gap-14 {
    gap: var(--bui-space-14);
  }
}

@media (width >= 1024px) {
  .md\:bui-gap {
    gap: var(--gap-md);
  }

  .md\:bui-gap-0\.5 {
    gap: var(--bui-space-0_5);
  }

  .md\:bui-gap-1 {
    gap: var(--bui-space-1);
  }

  .md\:bui-gap-1\.5 {
    gap: var(--bui-space-1_5);
  }

  .md\:bui-gap-2 {
    gap: var(--bui-space-2);
  }

  .md\:bui-gap-3 {
    gap: var(--bui-space-3);
  }

  .md\:bui-gap-4 {
    gap: var(--bui-space-4);
  }

  .md\:bui-gap-5 {
    gap: var(--bui-space-5);
  }

  .md\:bui-gap-6 {
    gap: var(--bui-space-6);
  }

  .md\:bui-gap-7 {
    gap: var(--bui-space-7);
  }

  .md\:bui-gap-8 {
    gap: var(--bui-space-8);
  }

  .md\:bui-gap-9 {
    gap: var(--bui-space-9);
  }

  .md\:bui-gap-10 {
    gap: var(--bui-space-10);
  }

  .md\:bui-gap-11 {
    gap: var(--bui-space-11);
  }

  .md\:bui-gap-12 {
    gap: var(--bui-space-12);
  }

  .md\:bui-gap-13 {
    gap: var(--bui-space-13);
  }

  .md\:bui-gap-14 {
    gap: var(--bui-space-14);
  }
}

@media (width >= 1280px) {
  .lg\:bui-gap {
    gap: var(--gap-lg);
  }

  .lg\:bui-gap-0\.5 {
    gap: var(--bui-space-0_5);
  }

  .lg\:bui-gap-1 {
    gap: var(--bui-space-1);
  }

  .lg\:bui-gap-1\.5 {
    gap: var(--bui-space-1_5);
  }

  .lg\:bui-gap-2 {
    gap: var(--bui-space-2);
  }

  .lg\:bui-gap-3 {
    gap: var(--bui-space-3);
  }

  .lg\:bui-gap-4 {
    gap: var(--bui-space-4);
  }

  .lg\:bui-gap-5 {
    gap: var(--bui-space-5);
  }

  .lg\:bui-gap-6 {
    gap: var(--bui-space-6);
  }

  .lg\:bui-gap-7 {
    gap: var(--bui-space-7);
  }

  .lg\:bui-gap-8 {
    gap: var(--bui-space-8);
  }

  .lg\:bui-gap-9 {
    gap: var(--bui-space-9);
  }

  .lg\:bui-gap-10 {
    gap: var(--bui-space-10);
  }

  .lg\:bui-gap-11 {
    gap: var(--bui-space-11);
  }

  .lg\:bui-gap-12 {
    gap: var(--bui-space-12);
  }

  .lg\:bui-gap-13 {
    gap: var(--bui-space-13);
  }

  .lg\:bui-gap-14 {
    gap: var(--bui-space-14);
  }
}

@media (width >= 1536px) {
  .xl\:bui-gap {
    gap: var(--gap-xl);
  }

  .xl\:bui-gap-0\.5 {
    gap: var(--bui-space-0_5);
  }

  .xl\:bui-gap-1 {
    gap: var(--bui-space-1);
  }

  .xl\:bui-gap-1\.5 {
    gap: var(--bui-space-1_5);
  }

  .xl\:bui-gap-2 {
    gap: var(--bui-space-2);
  }

  .xl\:bui-gap-3 {
    gap: var(--bui-space-3);
  }

  .xl\:bui-gap-4 {
    gap: var(--bui-space-4);
  }

  .xl\:bui-gap-5 {
    gap: var(--bui-space-5);
  }

  .xl\:bui-gap-6 {
    gap: var(--bui-space-6);
  }

  .xl\:bui-gap-7 {
    gap: var(--bui-space-7);
  }

  .xl\:bui-gap-8 {
    gap: var(--bui-space-8);
  }

  .xl\:bui-gap-9 {
    gap: var(--bui-space-9);
  }

  .xl\:bui-gap-10 {
    gap: var(--bui-space-10);
  }

  .xl\:bui-gap-11 {
    gap: var(--bui-space-11);
  }

  .xl\:bui-gap-12 {
    gap: var(--bui-space-12);
  }

  .xl\:bui-gap-13 {
    gap: var(--bui-space-13);
  }

  .xl\:bui-gap-14 {
    gap: var(--bui-space-14);
  }
}

.bui-align-start {
  align-items: start;
}

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

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

.bui-align-stretch {
  align-items: stretch;
}

.bui-jc-start {
  justify-content: start;
}

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

.bui-jc-end {
  justify-content: end;
}

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

.bui-fd-row {
  flex-direction: row;
}

.bui-fd-column {
  flex-direction: column;
}

.bui-fd-row-reverse {
  flex-direction: row-reverse;
}

.bui-fd-column-reverse {
  flex-direction: column-reverse;
}

@media (width >= 640px) {
  .xs\:bui-align-start {
    align-items: start;
  }

  .xs\:bui-align-center {
    align-items: center;
  }

  .xs\:bui-align-end {
    align-items: end;
  }

  .xs\:bui-align-stretch {
    align-items: stretch;
  }

  .xs\:bui-jc-start {
    justify-content: start;
  }

  .xs\:bui-jc-center {
    justify-content: center;
  }

  .xs\:bui-jc-end {
    justify-content: end;
  }

  .xs\:bui-jc-between {
    justify-content: space-between;
  }

  .xs\:bui-fd-row {
    flex-direction: row;
  }

  .xs\:bui-fd-column {
    flex-direction: column;
  }

  .xs\:bui-fd-row-reverse {
    flex-direction: row-reverse;
  }

  .xs\:bui-fd-column-reverse {
    flex-direction: column-reverse;
  }
}

@media (width >= 768px) {
  .sm\:bui-align-start {
    align-items: start;
  }

  .sm\:bui-align-center {
    align-items: center;
  }

  .sm\:bui-align-end {
    align-items: end;
  }

  .sm\:bui-align-stretch {
    align-items: stretch;
  }

  .sm\:bui-jc-start {
    justify-content: start;
  }

  .sm\:bui-jc-center {
    justify-content: center;
  }

  .sm\:bui-jc-end {
    justify-content: end;
  }

  .sm\:bui-jc-between {
    justify-content: space-between;
  }

  .sm\:bui-fd-row {
    flex-direction: row;
  }

  .sm\:bui-fd-column {
    flex-direction: column;
  }

  .sm\:bui-fd-row-reverse {
    flex-direction: row-reverse;
  }

  .sm\:bui-fd-column-reverse {
    flex-direction: column-reverse;
  }
}

@media (width >= 1024px) {
  .md\:bui-align-start {
    align-items: start;
  }

  .md\:bui-align-center {
    align-items: center;
  }

  .md\:bui-align-end {
    align-items: end;
  }

  .md\:bui-align-stretch {
    align-items: stretch;
  }

  .md\:bui-jc-start {
    justify-content: start;
  }

  .md\:bui-jc-center {
    justify-content: center;
  }

  .md\:bui-jc-end {
    justify-content: end;
  }

  .md\:bui-jc-between {
    justify-content: space-between;
  }

  .md\:bui-fd-row {
    flex-direction: row;
  }

  .md\:bui-fd-column {
    flex-direction: column;
  }

  .md\:bui-fd-row-reverse {
    flex-direction: row-reverse;
  }

  .md\:bui-fd-column-reverse {
    flex-direction: column-reverse;
  }
}

@media (width >= 1280px) {
  .lg\:bui-align-start {
    align-items: start;
  }

  .lg\:bui-align-center {
    align-items: center;
  }

  .lg\:bui-align-end {
    align-items: end;
  }

  .lg\:bui-align-stretch {
    align-items: stretch;
  }

  .lg\:bui-jc-start {
    justify-content: start;
  }

  .lg\:bui-jc-center {
    justify-content: center;
  }

  .lg\:bui-jc-end {
    justify-content: end;
  }

  .lg\:bui-jc-between {
    justify-content: space-between;
  }

  .lg\:bui-fd-row {
    flex-direction: row;
  }

  .lg\:bui-fd-column {
    flex-direction: column;
  }

  .lg\:bui-fd-row-reverse {
    flex-direction: row-reverse;
  }

  .lg\:bui-fd-column-reverse {
    flex-direction: column-reverse;
  }
}

@media (width >= 1536px) {
  .xl\:bui-align-start {
    align-items: start;
  }

  .xl\:bui-align-center {
    align-items: center;
  }

  .xl\:bui-align-end {
    align-items: end;
  }

  .xl\:bui-align-stretch {
    align-items: stretch;
  }

  .xl\:bui-jc-start {
    justify-content: start;
  }

  .xl\:bui-jc-center {
    justify-content: center;
  }

  .xl\:bui-jc-end {
    justify-content: end;
  }

  .xl\:bui-jc-between {
    justify-content: space-between;
  }

  .xl\:bui-fd-row {
    flex-direction: row;
  }

  .xl\:bui-fd-column {
    flex-direction: column;
  }

  .xl\:bui-fd-row-reverse {
    flex-direction: row-reverse;
  }

  .xl\:bui-fd-column-reverse {
    flex-direction: column-reverse;
  }
}

:where(a) {
  color: inherit;
  text-decoration: none;
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

:root {
  --bui-font-regular: system-ui;
  --bui-font-monospace: ui-monospace, "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
  --bui-font-weight-regular: 400;
  --bui-font-weight-bold: 600;
  --bui-font-size-1: .625rem;
  --bui-font-size-2: .75rem;
  --bui-font-size-3: .875rem;
  --bui-font-size-4: 1rem;
  --bui-font-size-5: 1.25rem;
  --bui-font-size-6: 1.5rem;
  --bui-font-size-7: 2rem;
  --bui-font-size-8: 3rem;
  --bui-font-size-9: 4rem;
  --bui-font-size-10: 5.75rem;
  --bui-space: .25rem;
  --bui-space-0_5: calc(var(--bui-space) * .5);
  --bui-space-1: var(--bui-space);
  --bui-space-1_5: calc(var(--bui-space) * 1.5);
  --bui-space-2: calc(var(--bui-space) * 2);
  --bui-space-3: calc(var(--bui-space) * 3);
  --bui-space-4: calc(var(--bui-space) * 4);
  --bui-space-5: calc(var(--bui-space) * 5);
  --bui-space-6: calc(var(--bui-space) * 6);
  --bui-space-7: calc(var(--bui-space) * 7);
  --bui-space-8: calc(var(--bui-space) * 8);
  --bui-space-9: calc(var(--bui-space) * 9);
  --bui-space-10: calc(var(--bui-space) * 10);
  --bui-space-11: calc(var(--bui-space) * 11);
  --bui-space-12: calc(var(--bui-space) * 12);
  --bui-space-13: calc(var(--bui-space) * 13);
  --bui-space-14: calc(var(--bui-space) * 14);
  --bui-radius-1: calc(.125rem);
  --bui-radius-2: calc(.25rem);
  --bui-radius-3: calc(.5rem);
  --bui-radius-4: calc(.75rem);
  --bui-radius-5: calc(1rem);
  --bui-radius-6: calc(1.25rem);
  --bui-radius-full: 9999px;
  --bui-black: #000;
  --bui-white: #fff;
  --bui-gray-1: #f8f8f8;
  --bui-gray-2: #ececec;
  --bui-gray-3: #d9d9d9;
  --bui-gray-4: #c1c1c1;
  --bui-gray-5: #9e9e9e;
  --bui-gray-6: #8c8c8c;
  --bui-gray-7: #757575;
  --bui-gray-8: #595959;
  --bui-bg: var(--bui-gray-1);
  --bui-bg-surface-1: var(--bui-white);
  --bui-bg-surface-2: var(--bui-gray-2);
  --bui-bg-solid: #1f5493;
  --bui-bg-solid-hover: #163a66;
  --bui-bg-solid-pressed: #0f2b4e;
  --bui-bg-solid-disabled: #ebebeb;
  --bui-bg-tint: transparent;
  --bui-bg-tint-hover: #1f549366;
  --bui-bg-tint-pressed: #1f549399;
  --bui-bg-tint-disabled: #ebebeb;
  --bui-bg-danger: #feebe7;
  --bui-bg-warning: #fff2b2;
  --bui-bg-success: #e6f6eb;
  --bui-fg-primary: var(--bui-black);
  --bui-fg-secondary: var(--bui-gray-7);
  --bui-fg-link: #1f5493;
  --bui-fg-link-hover: #1f2d5c;
  --bui-fg-disabled: #9e9e9e;
  --bui-fg-solid: var(--bui-white);
  --bui-fg-solid-disabled: #9c9c9c;
  --bui-fg-tint: #1f5493;
  --bui-fg-tint-disabled: var(--bui-gray-5);
  --bui-fg-danger: #e22b2b;
  --bui-fg-warning: #e36d05;
  --bui-fg-success: #1db954;
  --bui-border: #0000001a;
  --bui-border-hover: #0003;
  --bui-border-pressed: #0006;
  --bui-border-disabled: #0000001a;
  --bui-border-danger: #f87a7a;
  --bui-border-warning: #e36d05;
  --bui-border-success: #53db83;
  --bui-ring: #1f5493;
  --bui-scrollbar: #a0a0a03b;
  --bui-scrollbar-thumb: #a0a0a0;
  --bui-animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
}

[data-theme="dark"] {
  --bui-gray-1: #191919;
  --bui-gray-2: #242424;
  --bui-gray-3: #373737;
  --bui-gray-4: #464646;
  --bui-gray-5: #575757;
  --bui-gray-6: #7b7b7b;
  --bui-gray-7: #9e9e9e;
  --bui-gray-8: #b4b4b4;
  --bui-bg: var(--bui-black);
  --bui-bg-surface-1: var(--bui-gray-1);
  --bui-bg-surface-2: var(--bui-gray-2);
  --bui-bg-solid: #9cc9ff;
  --bui-bg-solid-hover: #83b9fd;
  --bui-bg-solid-pressed: #83b9fd;
  --bui-bg-solid-disabled: #222;
  --bui-bg-tint: transparent;
  --bui-bg-tint-hover: #9cc9ff1f;
  --bui-bg-tint-pressed: #9cc9ff29;
  --bui-bg-tint-disabled: transparent;
  --bui-bg-danger: #3b1219;
  --bui-bg-warning: #302008;
  --bui-bg-success: #132d21;
  --bui-fg-primary: var(--bui-white);
  --bui-fg-secondary: var(--bui-gray-7);
  --bui-fg-link: #9cc9ff;
  --bui-fg-link-hover: #7eb5f7;
  --bui-fg-disabled: var(--bui-gray-7);
  --bui-fg-solid: #101821;
  --bui-fg-solid-disabled: var(--bui-gray-5);
  --bui-fg-tint: #9cc9ff;
  --bui-fg-tint-disabled: var(--bui-gray-5);
  --bui-fg-danger: #e22b2b;
  --bui-fg-warning: #e36d05;
  --bui-fg-success: #1db954;
  --bui-border: #fff3;
  --bui-border-hover: #fff6;
  --bui-border-pressed: #ffffff80;
  --bui-border-disabled: #fff3;
  --bui-border-danger: #f87a7a;
  --bui-border-warning: #e36d05;
  --bui-border-success: #53db83;
  --bui-ring: #1f5493;
  --bui-scrollbar: #3636363a;
  --bui-scrollbar-thumb: #575757;
}

.bui-AvatarRoot {
  vertical-align: middle;
  user-select: none;
  color: var(--bui-fg-primary);
  background-color: var(--bui-bg-surface-2);
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  display: inline-flex;
  overflow: hidden;
}

.bui-AvatarRoot[data-size="small"] {
  width: 1.5rem;
  height: 1.5rem;
}

.bui-AvatarRoot[data-size="medium"] {
  width: 2rem;
  height: 2rem;
}

.bui-AvatarRoot[data-size="large"] {
  width: 3rem;
  height: 3rem;
}

.bui-AvatarImage {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.bui-AvatarFallback {
  width: 100%;
  height: 100%;
  font-size: var(--bui-font-size-3);
  font-weight: var(--bui-font-weight-regular);
  box-shadow: inset 0 0 0 1px var(--bui-border);
  border-radius: var(--bui-radius-full);
  justify-content: center;
  align-items: center;
  display: flex;
}

.bui-Box {
  font-family: var(--bui-font-regular);
  font-weight: var(--bui-font-weight-regular);
  color: var(--bui-fg-primary);
}

.bui-Button {
  user-select: none;
  font-family: var(--bui-font-regular);
  font-weight: var(--bui-font-weight-bold);
  cursor: pointer;
  border-radius: var(--bui-radius-2);
  justify-content: center;
  align-items: center;
  gap: var(--bui-space-1_5);
  border: none;
  flex-shrink: 0;
  padding: 0;
  display: inline-flex;

  &[data-disabled="true"] {
    cursor: not-allowed;
  }
}

.bui-Button[data-variant="primary"] {
  background-color: var(--bui-bg-solid);
  color: var(--bui-fg-solid);

  &:hover {
    background-color: var(--bui-bg-solid-hover);
    transition: background-color .15s;
  }

  &:active {
    background-color: var(--bui-bg-solid-pressed);
  }

  &:focus-visible {
    outline: 2px solid var(--bui-ring);
    outline-offset: 2px;
  }

  &[data-disabled="true"] {
    background-color: var(--bui-bg-solid-disabled);
    color: var(--bui-fg-solid-disabled);
  }
}

.bui-Button[data-variant="secondary"] {
  background-color: var(--bui-bg-surface-1);
  box-shadow: inset 0 0 0 1px var(--bui-border);
  color: var(--bui-fg-primary);

  &:hover {
    box-shadow: inset 0 0 0 1px var(--bui-border-hover);
    transition: box-shadow .15s;
  }

  &:active {
    box-shadow: inset 0 0 0 1px var(--bui-border-pressed);
  }

  &:focus-visible {
    box-shadow: inset 0 0 0 2px var(--bui-ring);
    outline: none;
    transition: none;
  }

  &[data-disabled="true"] {
    box-shadow: inset 0 0 0 1px var(--bui-border-disabled);
    color: var(--bui-fg-disabled);
  }
}

.bui-Button[data-variant="tertiary"] {
  color: var(--bui-fg-primary);
  background-color: #0000;

  &:hover {
    background-color: var(--bui-bg-surface-1);
    transition: background-color .2s;
  }

  &:active {
    background-color: var(--bui-bg-surface-2);
  }

  &:focus-visible {
    box-shadow: inset 0 0 0 2px var(--bui-ring);
    outline: none;
    transition: none;
  }

  &[data-disabled="true"] {
    color: var(--bui-fg-disabled);
    background-color: #0000;
  }
}

.bui-Button[data-size="medium"] {
  font-size: var(--bui-font-size-4);
  padding: 0 var(--bui-space-3);
  height: 2.5rem;
}

.bui-Button[data-size="small"] {
  font-size: var(--bui-font-size-3);
  padding: 0 var(--bui-space-2);
  height: 2rem;
}

.bui-Button[data-size="small"] svg {
  width: 1rem;
  height: 1rem;
}

.bui-Button[data-size="medium"] svg {
  width: 1.25rem;
  height: 1.25rem;
}

.bui-ButtonIcon {
  justify-content: center;
  align-items: center;
}

.bui-ButtonIcon[data-size="small"] {
  width: 2rem;
  padding: 0;
}

.bui-ButtonIcon[data-size="medium"] {
  width: 2.5rem;
  padding: 0;
}

.bui-Card {
  gap: var(--bui-space-3);
  background-color: var(--bui-bg-surface-1);
  border-radius: var(--bui-radius-3);
  padding-block: var(--bui-space-3);
  color: var(--bui-fg-primary);
  border: 1px solid var(--bui-border);
  flex-direction: column;
  width: 100%;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.bui-CardBody {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.bui-CardHeader, .bui-CardFooter {
  padding-inline: var(--bui-space-3);
}

.bui-CheckboxRoot {
  width: 1rem;
  height: 1rem;
  box-shadow: inset 0 0 0 1px var(--bui-border);
  cursor: pointer;
  background-color: var(--bui-bg-surface-1);
  border: none;
  border-radius: 2px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 0;
  transition: background-color .2s ease-in-out;
  display: flex;
}

.bui-CheckboxRoot:focus-visible {
  outline: 2px solid var(--bui-ring);
  outline-offset: 2px;
  transition: none;
}

.bui-CheckboxRoot[data-checked] {
  background-color: var(--bui-bg-solid);
  box-shadow: none;
  color: var(--bui-fg-solid);
}

.bui-CheckboxLabel {
  align-items: center;
  gap: var(--bui-space-2);
  font-size: var(--bui-font-size-3);
  font-family: var(--bui-font-regular);
  font-weight: var(--bui-font-weight-regular);
  color: var(--bui-fg-primary);
  user-select: none;
  flex-direction: row;
  display: flex;

  &:hover {
    & .bui-CheckboxRoot:not([data-checked]) {
      box-shadow: inset 0 0 0 1px var(--bui-border-hover);
    }
  }
}

.bui-CheckboxIndicator {
  color: var(--bui-fg-solid);
  justify-content: center;
  align-items: center;
  display: flex;
}

.bui-CollapsiblePanel {
  height: var(--collapsible-panel-height);
  transition: all .15s ease-out;
  display: flex;
  overflow: hidden;

  &[data-starting-style], &[data-ending-style] {
    height: 0;
  }
}

.bui-Container {
  max-width: 120rem;
  padding-inline: var(--bui-space-4);
  margin-inline: auto;
  transition: padding .2s ease-in-out;
}

@media (width >= 640px) {
  .bui-Container {
    padding-inline: var(--bui-space-5);
  }
}

.bui-DataTableRoot {
  gap: var(--bui-space-3);
  flex-direction: column;
  display: flex;
}

.bui-DataTablePagination {
  padding-top: var(--bui-space-5);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.bui-DataTablePagination--left {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.bui-DataTablePagination--right {
  justify-content: space-between;
  align-items: center;
  gap: var(--bui-space-2);
  display: flex;
}

.bui-DataTablePagination--select {
  min-width: 10.5rem;
}

.bui-FieldError {
  color: var(--bui-fg-danger);
  font-size: var(--bui-font-size-2);
  font-weight: var(--bui-font-weight-regular);
  margin-top: var(--bui-space-2);
  display: inline-block;
}

.bui-FieldLabelWrapper {
  margin-bottom: var(--bui-space-3);
  gap: var(--bui-space-1);
  flex-direction: column;
  display: flex;
}

.bui-FieldLabel {
  color: var(--bui-fg-primary);
  cursor: pointer;
  font-weight: var(--bui-font-weight-regular);
  font-size: var(--bui-font-size-2);
  margin-right: auto;
}

.bui-FieldSecondaryLabel {
  color: var(--bui-fg-secondary);
  font-weight: var(--bui-font-weight-regular);
  margin-left: var(--bui-space-1);
}

.bui-FieldDescription {
  font-weight: var(--bui-font-weight-regular);
  font-size: var(--bui-font-size-2);
  color: var(--bui-fg-secondary);
  margin: 0;
}

.bui-Flex {
  min-width: 0;
  display: flex;
}

.bui-Grid {
  display: grid;
}

.bui-HeaderToolbar {
  z-index: 10;
  margin-bottom: var(--bui-space-6);
  position: sticky;
  top: 0;

  &:before {
    content: "";
    background-color: var(--bui-bg);
    z-index: 0;
    height: 16px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }

  &[data-has-tabs="true"] {
    margin-bottom: 0;
  }
}

.bui-HeaderToolbarWrapper {
  z-index: 1;
  background-color: var(--bui-bg-surface-1);
  padding-inline: var(--bui-space-5);
  border-bottom: 1px solid var(--bui-border);
  color: var(--bui-fg-primary);
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 52px;
  display: flex;
  position: relative;
}

.bui-HeaderToolbarContent {
  align-items: center;
  gap: var(--bui-space-2);
  flex-direction: row;
  display: flex;
}

.bui-HeaderToolbarName {
  align-items: center;
  gap: var(--bui-space-2);
  font-size: var(--bui-font-size-3);
  font-weight: var(--bui-font-weight-regular);
  flex-direction: row;
  flex-shrink: 0;
  display: flex;
}

.bui-HeaderToolbarIcon {
  width: 16px;
  height: 16px;
  color: var(--bui-fg-primary);

  & svg {
    width: 100%;
    height: 100%;
  }
}

.bui-HeaderToolbarControls {
  right: var(--bui-space-5);
  align-items: center;
  gap: var(--bui-space-2);
  flex-direction: row;
  display: flex;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.bui-HeaderBreadcrumbs {
  align-items: center;
  gap: var(--bui-space-2);
  font-size: var(--bui-font-size-3);
  font-weight: var(--bui-font-weight-regular);
  flex-direction: row;
  display: flex;
}

.bui-HeaderBreadcrumb {
  align-items: center;
  gap: var(--bui-space-2);
  flex-direction: row;
  display: flex;
}

.bui-HeaderBreadcrumbLink {
  color: var(--bui-fg-secondary);
  cursor: pointer;
  text-decoration: none;

  &[data-active="true"] {
    color: var(--bui-fg-primary);
  }
}

.bui-HeaderBreadcrumbSeparator {
  width: 16px;
  height: 16px;
  color: var(--bui-fg-secondary);
}

.bui-HeaderTabsWrapper {
  margin-bottom: var(--bui-space-4);
  padding-inline: var(--bui-space-3);
  border-bottom: 1px solid var(--bui-border);
  background-color: var(--bui-bg-surface-1);
}

.bui-HeaderPage {
  gap: var(--bui-space-1);
  padding-inline: var(--bui-space-5);
  margin-top: var(--bui-space-6);
  margin-bottom: var(--bui-space-6);
  flex-direction: column;
  display: flex;
}

.bui-HeaderPageContent {
  flex-direction: row;
  justify-content: space-between;
  display: flex;
}

.bui-HeaderPageTabsWrapper {
  margin-left: -8px;
}

.bui-HeaderPageControls {
  align-items: center;
  gap: var(--bui-space-2);
  flex-direction: row;
  display: flex;
}

.bui-Heading {
  font-family: var(--bui-font-regular);
  color: var(--bui-fg-primary);
  margin: 0;
  padding: 0;
  line-height: 100%;
}

.bui-Heading[data-variant="display"] {
  font-size: var(--bui-font-size-10);
  font-weight: var(--bui-font-weight-bold);
}

.bui-Heading[data-variant="title1"] {
  font-size: var(--bui-font-size-9);
  font-weight: var(--bui-font-weight-bold);
}

.bui-Heading[data-variant="title2"] {
  font-size: var(--bui-font-size-8);
  font-weight: var(--bui-font-weight-bold);
}

.bui-Heading[data-variant="title3"] {
  font-size: var(--bui-font-size-7);
  font-weight: var(--bui-font-weight-bold);
}

.bui-Heading[data-variant="title4"] {
  font-size: var(--bui-font-size-6);
  font-weight: var(--bui-font-weight-bold);
}

.bui-Heading[data-variant="title5"] {
  font-size: var(--bui-font-size-5);
  font-weight: var(--bui-font-weight-bold);
}

.bui-Heading[data-color="primary"] {
  color: var(--bui-fg-primary);
}

.bui-Heading[data-color="secondary"] {
  color: var(--bui-fg-secondary);
}

.bui-Heading[data-truncate] {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.bui-Icon {
  width: 1rem;
  height: 1rem;
}

.bui-Link {
  font-family: var(--bui-font-regular);
  cursor: pointer;
  margin: 0;
  padding: 0;
  text-decoration-line: none;

  &:hover {
    text-underline-offset: calc(.025em + 2px);
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-thickness: min(2px, max(1px, .05em));
    text-decoration-color: color-mix(in srgb, var(--bui-fg-link-hover) 30%, transparent);
  }
}

.bui-Link[data-variant="title-large"] {
  font-size: var(--bui-font-size-8);
  line-height: 140%;
}

.bui-Link[data-variant="title-medium"] {
  font-size: var(--bui-font-size-7);
  line-height: 140%;
}

.bui-Link[data-variant="title-small"] {
  font-size: var(--bui-font-size-6);
  line-height: 140%;
}

.bui-Link[data-variant="title-x-small"] {
  font-size: var(--bui-font-size-5);
  line-height: 140%;
}

.bui-Link[data-variant="body-large"] {
  font-size: var(--bui-font-size-4);
  line-height: 140%;
}

.bui-Link[data-variant="body-medium"] {
  font-size: var(--bui-font-size-3);
  line-height: 140%;
}

.bui-Link[data-variant="body-small"] {
  font-size: var(--bui-font-size-2);
  line-height: 140%;
}

.bui-Link[data-variant="body-x-small"] {
  font-size: var(--bui-font-size-1);
  line-height: 140%;
}

.bui-Link[data-weight="regular"] {
  font-weight: var(--bui-font-weight-regular);
}

.bui-Link[data-weight="bold"] {
  font-weight: var(--bui-font-weight-bold);
}

.bui-Link[data-color="primary"] {
  color: var(--bui-fg-primary);
}

.bui-Link[data-color="secondary"] {
  color: var(--bui-fg-secondary);
}

.bui-MenuPositioner {
  z-index: 100;
  outline: 0;
}

.bui-MenuPopup {
  background-color: var(--bui-bg-surface-1);
  border: 1px solid var(--bui-border);
  color: var(--bui-fg-primary);
  transform-origin: var(--transform-origin);
  max-width: min(var(--available-width), 340px);
  max-height: min(var(--available-height), 500px);
  padding-bottom: var(--bui-space-1);
  border-radius: .375rem;
  outline: none;
  flex-direction: column;
  transition: transform .15s, opacity .15s;
  display: flex;
  position: relative;
  overflow: auto;

  &[data-starting-style], &[data-ending-style] {
    opacity: 0;
    transform: scale(.9);
  }
}

.bui-MenuItem {
  user-select: none;
  align-items: center;
  gap: var(--bui-space-2);
  height: 32px;
  color: var(--bui-fg-primary);
  border-radius: var(--bui-radius-2);
  margin-inline: var(--bui-space-1);
  padding-inline: var(--bui-space-2);
  font-size: var(--bui-font-size-3);
  cursor: pointer;
  outline: 0;
  flex-shrink: 0;
  text-decoration: none;
  display: flex;

  &:first-child {
    margin-top: var(--bui-space-1);
  }

  &[data-highlighted] {
    background-color: var(--bui-gray-3);
  }
}

.bui-MenuSubmenuTrigger {
  user-select: none;
  justify-content: space-between;
  align-items: center;
  gap: var(--bui-space-2);
  height: 32px;
  color: var(--bui-fg-primary);
  border-radius: var(--bui-radius-2);
  margin-inline: var(--bui-space-1);
  padding-inline: var(--bui-space-2);
  font-size: var(--bui-font-size-3);
  cursor: pointer;
  outline: 0;
  flex-shrink: 0;
  text-decoration: none;
  display: flex;

  & .bui-Icon {
    color: var(--bui-fg-secondary);
  }

  &:first-child {
    margin-top: var(--bui-space-1);
  }

  &[data-popup-open], &[data-highlighted] {
    background-color: var(--bui-gray-3);

    & .bui-Icon {
      color: var(--bui-fg-primary);
    }
  }
}

.bui-MenuSeparator {
  background-color: var(--color-gray-200);
  height: 1px;
  margin: .375rem 1rem;
}

.bui-SubmenuComboboxSearch {
  padding-inline: var(--bui-space-3);
  border: none;
  border-bottom: 1px solid var(--bui-border);
  background-color: var(--bui-bg-surface-1);
  width: 100%;
  height: 32px;
  color: var(--bui-fg-primary);
  line-height: 140%;
  font-size: var(--bui-font-size-3);
  z-index: 1;
  outline: none;
  position: sticky;
  top: 0;

  &::placeholder {
    color: var(--bui-fg-secondary);
  }

  &:disabled {
    opacity: .6;
    cursor: not-allowed;
  }
}

.bui-SubmenuComboboxItems {
  padding-top: var(--bui-space-2);
  outline: none;
  flex-direction: column;
  display: flex;
  overflow-y: auto;
}

.bui-SubmenuComboboxNoResults {
  padding-inline: var(--bui-space-3);
  padding-top: var(--bui-space-2);
  padding-bottom: var(--bui-space-4);
  color: var(--bui-fg-secondary);
  font-size: var(--bui-font-size-3);
}

.bui-SubmenuComboboxItem {
  user-select: none;
  justify-content: space-between;
  align-items: center;
  gap: var(--bui-space-2);
  height: 32px;
  color: var(--bui-fg-primary);
  border-radius: var(--bui-radius-2);
  margin-inline: var(--bui-space-1);
  padding-inline: var(--bui-space-2);
  font-size: var(--bui-font-size-3);
  cursor: pointer;
  outline: 0;
  flex-shrink: 0;
  text-decoration: none;
  display: flex;

  &[data-highlighted] {
    background-color: var(--bui-gray-3);
  }

  &[data-disabled] {
    opacity: .5;
    cursor: not-allowed;
  }
}

.bui-SubmenuComboboxItemCheckbox {
  width: 16px;
  height: 16px;
  color: var(--bui-fg-primary);
  border-radius: var(--bui-radius-2);
  border: 1px solid var(--bui-border);
  background: var(--bui-bg-surface-1);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.bui-SubmenuComboboxItemLabel {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  overflow: hidden;
}

.bui-Popover {
  background-color: var(--bui-bg-surface-1);
  border: 1px solid var(--bui-border);
  border-radius: var(--bui-radius-3);
  padding-block: var(--bui-space-1);
  margin-right: 12px;
  overflow: scroll;
  box-shadow: 0 4px 12px #0000001a;
}

.bui-RadioGroup {
  color: var(--bui-fg-primary);
  flex-direction: column;
  display: flex;
}

.bui-RadioGroup[data-orientation="horizontal"] .bui-RadioGroupContent {
  gap: var(--bui-space-4);
  flex-direction: row;
}

.bui-RadioGroupContent {
  gap: var(--bui-space-2);
  flex-direction: column;
  display: flex;
}

.bui-Radio {
  align-items: center;
  gap: var(--bui-space-2);
  font-size: var(--bui-font-size-2);
  color: var(--bui-fg-primary);
  forced-color-adjust: none;
  display: flex;
  position: relative;

  &:before {
    content: "";
    box-sizing: border-box;
    border: .125rem solid var(--bui-border);
    background: var(--bui-gray-1);
    border-radius: var(--bui-radius-full);
    width: 1rem;
    height: 1rem;
    transition: all .2s;
    display: block;
  }

  &[data-pressed]:before {
    border-color: var(--bui-border);
  }

  &[data-selected] {
    &:before {
      border-color: var(--bui-bg-solid);
      border-width: .25rem;
    }

    &[data-pressed]:before {
      border-color: var(--bui-bg-solid);
    }
  }

  &[data-focus-visible]:before {
    outline: 2px solid var(--bui-ring);
    outline-offset: 2px;
  }

  &[data-disabled] {
    cursor: not-allowed;
    color: var(--bui-fg-disabled);

    &:before {
      border-color: var(--bui-border-disabled);
      background: var(--bui-bg-disabled);
    }

    &[data-selected]:before {
      border-color: var(--bui-border-disabled);
    }
  }

  &[data-invalid]:before, &[data-invalid][data-selected]:before {
    border-color: var(--bui-border-danger);
  }

  &[data-disabled][data-invalid] {
    color: var(--bui-fg-disabled);

    &:before {
      border-color: var(--bui-border-disabled);
      background: var(--bui-bg-disabled);
    }

    &[data-selected]:before {
      border-color: var(--bui-border-disabled);
    }
  }
}

.bui-TableRoot {
  caption-side: bottom;
  border-collapse: collapse;
  width: 100%;
}

.bui-TableHead {
  text-align: left;
  padding: var(--bui-space-3);
  font-size: var(--bui-font-size-3);
  color: var(--bui-fg-primary);
}

.bui-TableBody {
  color: var(--bui-fg-primary);
}

.bui-TableRow {
  border-bottom: 1px solid var(--bui-border);
  transition: color .2s ease-in-out;
}

.bui-TableBody .bui-TableRow:hover {
  background-color: var(--bui-gray-2);
}

.bui-TableCell {
  padding: var(--bui-space-3);
  font-size: var(--bui-font-size-3);
}

.bui-TableCellText, .bui-TableCellLink {
  gap: var(--bui-space-0_5);
  flex-direction: column;
  display: flex;
}

.bui-TableCellProfile {
  gap: var(--bui-space-2);
  flex-direction: row;
  align-items: center;
  display: flex;
}

.bui-TableCellProfileAvatar {
  vertical-align: middle;
  user-select: none;
  color: var(--bui-fg-primary);
  background-color: var(--bui-bg-surface-2);
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  width: 1.25rem;
  height: 1.25rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  display: inline-flex;
  overflow: hidden;
}

.bui-TableCellProfileAvatarImage {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.bui-TableCellProfileAvatarFallback {
  width: 100%;
  height: 100%;
  font-size: var(--bui-font-size-2);
  font-weight: var(--bui-font-weight-regular);
  box-shadow: inset 0 0 0 1px var(--bui-border);
  border-radius: var(--bui-radius-full);
  justify-content: center;
  align-items: center;
  display: flex;
}

.bui-Tabs {
  --active-tab-left: 0px;
  --active-tab-right: 0px;
  --active-tab-top: 0px;
  --active-tab-bottom: 0px;
  --active-tab-width: 0px;
  --active-tab-height: 0px;
  --active-transition-duration: 0s;
  --hovered-tab-left: 0px;
  --hovered-tab-right: 0px;
  --hovered-tab-top: 0px;
  --hovered-tab-bottom: 0px;
  --hovered-tab-width: 0px;
  --hovered-tab-height: 0px;
  --hovered-tab-opacity: 0;
  --hovered-transition-duration: 0s;
}

.bui-TabList {
  flex-direction: row;
  display: flex;
}

.bui-TabListWrapper {
  position: relative;
}

.bui-Tab {
  font-size: var(--bui-font-size-3);
  font-family: var(--bui-font-regular);
  font-weight: var(--bui-font-weight-regular);
  color: var(--bui-fg-secondary);
  cursor: pointer;
  z-index: 2;
  height: 36px;
  padding-inline: var(--bui-space-2);
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;

  &[data-selected="true"] {
    color: var(--bui-fg-primary);
  }
}

.bui-TabActive {
  content: "";
  left: calc(var(--active-tab-left)  + var(--bui-space-2));
  width: calc(var(--active-tab-width)  - var(--bui-space-4));
  background-color: var(--bui-fg-primary);
  height: 1px;
  transition: left var(--active-transition-duration) ease-out, opacity .15s ease-out, width var(--active-transition-duration) ease-out;
  opacity: 1;
  border-radius: 4px;
  position: absolute;
  bottom: -1px;
}

.bui-TabHovered {
  content: "";
  left: var(--hovered-tab-left);
  top: calc(var(--hovered-tab-top)  + 4px);
  width: var(--hovered-tab-width);
  height: calc(var(--hovered-tab-height)  - 8px);
  background-color: var(--bui-gray-2);
  opacity: var(--hovered-tab-opacity);
  transition: left var(--hovered-transition-duration) ease-out, top var(--hovered-transition-duration) ease-out, width var(--hovered-transition-duration) ease-out, height var(--hovered-transition-duration) ease-out, opacity .15s ease-out;
  border-radius: 4px;
  position: absolute;
}

.bui-TabPanel {
  padding-inline: var(--bui-space-2);
  padding-top: var(--bui-space-4);
}

.bui-Text {
  font-family: var(--bui-font-regular);
  margin: 0;
  padding: 0;
}

.bui-Text[data-variant="body"] {
  font-size: var(--bui-font-size-3);
  line-height: 140%;
}

.bui-Text[data-variant="subtitle"] {
  font-size: var(--bui-font-size-4);
  line-height: 140%;
}

.bui-Text[data-variant="caption"] {
  font-size: var(--bui-font-size-2);
  line-height: 140%;
}

.bui-Text[data-variant="label"] {
  font-size: var(--bui-font-size-1);
  line-height: 140%;
}

.bui-Text[data-weight="regular"] {
  font-weight: var(--bui-font-weight-regular);
}

.bui-Text[data-weight="bold"] {
  font-weight: var(--bui-font-weight-bold);
}

.bui-Text[data-color="primary"] {
  color: var(--bui-fg-primary);
}

.bui-Text[data-color="secondary"] {
  color: var(--bui-fg-secondary);
}

.bui-Text[data-color="danger"] {
  color: var(--bui-fg-danger);
}

.bui-Text[data-color="warning"] {
  color: var(--bui-fg-warning);
}

.bui-Text[data-color="success"] {
  color: var(--bui-fg-success);
}

.bui-Text[data-truncate] {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.bui-TextField {
  font-family: var(--bui-font-regular);
  flex-direction: column;
  width: 100%;
  display: flex;
}

.bui-InputWrapper {
  position: relative;

  &[data-size="small"] .bui-Input {
    height: 2rem;
  }

  &[data-size="medium"] .bui-Input {
    height: 2.5rem;
  }

  &[data-size="small"] .bui-Input[data-icon] {
    padding-left: var(--bui-space-8);
  }

  &[data-size="medium"] .bui-Input[data-icon] {
    padding-left: var(--bui-space-9);
  }
}

.bui-InputIcon {
  left: var(--bui-space-3);
  margin-right: var(--bui-space-1);
  color: var(--bui-fg-primary);
  flex-shrink: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  &[data-size="small"], &[data-size="small"] svg {
    width: 1rem;
    height: 1rem;
  }

  &[data-size="medium"], &[data-size="medium"] svg {
    width: 1.25rem;
    height: 1.25rem;
  }
}

.bui-Input {
  padding: 0 var(--bui-space-3);
  border-radius: var(--bui-radius-3);
  border: 1px solid var(--bui-border);
  background-color: var(--bui-bg-surface-1);
  font-size: var(--bui-font-size-3);
  font-family: var(--bui-font-regular);
  font-weight: var(--bui-font-weight-regular);
  color: var(--bui-fg-primary);
  width: 100%;
  height: 100%;
  cursor: inherit;
  align-items: center;
  transition: border-color .2s ease-in-out, outline-color .2s ease-in-out;
  display: flex;

  &::-webkit-search-cancel-button, &::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  &::placeholder {
    color: var(--bui-fg-secondary);
  }

  &[data-focused] {
    outline-color: var(--bui-border-pressed);
    outline-width: 0;
  }

  &[data-hovered] {
    border-color: var(--bui-border-hover);
  }

  &[data-focused] {
    border-color: var(--bui-border-pressed);
    outline-width: 0;
  }

  &[data-invalid] {
    border-color: var(--bui-fg-danger);
  }

  &[data-disabled] {
    opacity: .5;
    cursor: not-allowed;
    border: 1px solid var(--bui-border-disabled);
  }
}

.bui-SearchField[data-empty] .bui-InputClear {
  display: none;
}

.bui-InputClear {
  cursor: pointer;
  color: var(--bui-fg-secondary);
  background-color: #0000;
  border: none;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  transition: color .2s ease-in-out;
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
}

.bui-InputClear:hover {
  color: var(--bui-fg-primary);
}

.bui-InputClear[data-size="small"] {
  width: 2rem;
  height: 2rem;
}

.bui-InputClear[data-size="medium"] {
  width: 2.5rem;
  height: 2.5rem;
}

.bui-InputClear svg {
  width: 1rem;
  height: 1rem;
}

.bui-Skeleton {
  animation: var(--bui-animate-pulse);
  background-color: var(--bui-bg-surface-2);
  border-radius: var(--bui-radius-2);
}

.bui-Skeleton[data-rounded="true"] {
  border-radius: var(--bui-radius-full);
}

.bui-Tooltip {
  background: var(--bui-bg-surface-2);
  forced-color-adjust: none;
  padding: var(--bui-space-2) var(--bui-space-3);
  max-width: 240px;
  font-size: var(--bui-font-size-3);
  font-family: var(--bui-font-regular);
  color: var(--bui-fg-primary);
  border-radius: 4px;
  outline: none;
  transition: transform .2s, opacity .2s;
  transform: translate3d(0, 0, 0);
  box-shadow: 0 8px 20px #0000001a;

  &[data-entering], &[data-exiting] {
    transform: var(--origin);
    opacity: 0;
  }

  &[data-placement="top"] {
    margin-bottom: var(--bui-space-2);
    --origin: translateY(4px);
  }

  &[data-placement="bottom"] {
    margin-top: var(--bui-space-2);
    --origin: translateY(-4px);

    & .bui-TooltipArrow svg {
      transform: rotate(180deg);
    }
  }

  &[data-placement="right"] {
    margin-left: var(--bui-space-2);
    --origin: translateX(-4px);

    & .bui-TooltipArrow svg {
      transform: rotate(90deg);
    }
  }

  &[data-placement="left"] {
    margin-right: var(--bui-space-2);
    --origin: translateX(4px);

    & .bui-TooltipArrow svg {
      transform: rotate(-90deg);
    }
  }
}

.bui-TooltipArrow svg {
  fill: var(--bui-bg-surface-1);
  display: block;
}

.bui-ScrollAreaRoot {
  box-sizing: border-box;
  width: 100%;
}

.bui-ScrollAreaViewport {
  overscroll-behavior: contain;
  height: 100%;
}

.bui-ScrollAreaContent {
  padding-block: .75rem;
  flex-direction: column;
  gap: 1rem;
  padding-left: 1rem;
  padding-right: 1.5rem;
  display: flex;
}

.bui-ScrollAreaScrollbar {
  background-color: var(--bui-scrollbar);
  opacity: 0;
  border-radius: .375rem;
  justify-content: center;
  width: .25rem;
  margin: .5rem;
  transition: opacity .15s .3s;
  display: flex;

  &[data-hovering], &[data-scrolling] {
    opacity: 1;
    transition-duration: 75ms;
    transition-delay: 0s;
  }

  &:before {
    content: "";
    width: 1.25rem;
    height: 100%;
    position: absolute;
  }
}

.bui-ScrollAreaThumb {
  border-radius: inherit;
  background-color: var(--bui-scrollbar-thumb);
  width: 100%;
}

.bui-Select[data-invalid] {
  & .bui-SelectTrigger {
    border-color: var(--bui-fg-danger);
  }
}

.bui-SelectTrigger {
  box-sizing: border-box;
  border-radius: var(--bui-radius-3);
  border: 1px solid var(--bui-border);
  background-color: var(--bui-bg-surface-1);
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  gap: var(--bui-space-2);
  max-width: 100%;
  transition: border-color .2s ease-in-out, outline-color .2s ease-in-out;
  display: flex;

  & svg {
    flex-shrink: 0;
  }

  &[data-size="small"] {
    height: 2rem;
    padding-inline: var(--bui-space-3);
  }

  &[data-size="medium"] {
    height: 3rem;
    padding-inline: var(--bui-space-4);
  }

  &[data-size="small"] svg {
    width: 1rem;
    height: 1rem;
  }

  &[data-size="medium"] svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  &::placeholder {
    color: var(--bui-fg-secondary);
  }

  &:hover {
    border-color: var(--bui-border-hover);
  }

  &:focus-visible {
    border-color: var(--bui-border-pressed);
    outline: 0;
  }

  &[data-invalid] {
    border-color: var(--bui-fg-danger);
  }

  &[data-invalid]:hover, &[data-invalid]:focus-visible {
    border-width: 2px;
  }

  &[disabled] {
    cursor: not-allowed;
    border-color: var(--bui-border-disabled);
    color: var(--bui-fg-disabled);
  }

  &[disabled] .bui-SelectValue {
    color: var(--bui-fg-disabled);
  }

  &[data-popup-open] .bui-SelectIcon {
    transform: rotate(180deg);
  }
}

.bui-SelectValue {
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  font-size: var(--bui-font-size-3);
  font-family: var(--bui-font-regular);
  font-weight: var(--bui-font-weight-regular);
  color: var(--bui-fg-primary);
  overflow: hidden;

  & .bui-SelectItemIndicator {
    display: none;
  }

  &[disabled] {
    color: var(--bui-fg-disabled);
  }
}

.bui-SelectItem {
  width: var(--anchor-width);
  padding-block: var(--bui-space-2);
  padding-inline: var(--bui-space-4);
  color: var(--bui-fg-primary);
  border-radius: var(--bui-radius-3);
  cursor: pointer;
  user-select: none;
  font-size: var(--bui-font-size-3);
  align-items: center;
  gap: var(--bui-space-2);
  outline: none;
  grid-template-columns: 1rem 1fr;
  grid-template-areas: "icon text";
  display: grid;
  position: relative;

  &[data-focused] {
    z-index: 0;
    color: var(--bui-fg-primary);
    position: relative;
  }

  &[data-focused]:before {
    content: "";
    z-index: -1;
    background-color: var(--bui-bg-tint-hover);
    border-radius: .25rem;
    position: absolute;
    inset-block: 0;
    inset-inline: .25rem;
  }

  &[data-disabled] {
    cursor: not-allowed;
    color: var(--bui-fg-disabled);
  }

  &[data-selected] .bui-SelectItemIndicator {
    opacity: 1;
  }
}

.bui-SelectItemIndicator {
  opacity: 0;
  grid-area: icon;
  justify-content: center;
  align-items: center;
  transition: opacity .2s ease-in-out;
  display: flex;
}

.bui-SelectItemLabel {
  flex: 1;
  grid-area: text;
}

.bui-Switch {
  align-items: center;
  gap: var(--bui-space-3);
  font-size: var(--bui-font-size-3);
  color: var(--bui-fg-primary);
  cursor: pointer;
  display: flex;
  position: relative;

  &[data-pressed] .bui-SwitchIndicator {
    &:before {
      background: var(--bui-fg-solid);
    }
  }

  &[data-selected] {
    & .bui-SwitchIndicator {
      background: var(--bui-bg-solid);

      &:before {
        background: var(--bui-fg-solid);
        transform: translateX(100%);
      }
    }

    &[data-pressed] {
      & .indicator {
        background: var(--bui-gray-3);
      }
    }
  }

  &[data-focus-visible] .bui-SwitchIndicator {
    outline-offset: 2px;
    outline: 2px solid;
  }
}

.bui-SwitchIndicator {
  background: var(--bui-gray-3);
  border: 2px;
  border-radius: 1.143rem;
  width: 2rem;
  height: 1.143rem;
  transition: all .2s;

  &:before {
    content: "";
    background: var(--bui-fg-solid);
    border-radius: 16px;
    width: .857rem;
    height: .857rem;
    margin: .143rem;
    transition: all .2s;
    display: block;
  }
}


/*# sourceMappingURL=vendor.54459180.css.map*/