/*!
 * XUI v1.1.0 (https://stylexui.com)
 * Copyright 2023 Stylexui.
*/

/*! normalize.css v3.0.1 | MIT License | git.io/normalize */

:root {
  --black: #000000;
  --white: #ffffff;
  --blue-pressed: #2852DC;
  --primary-pressed: #0958D9;
  --opacitated-pressed: rgba(0, 0, 0, .15);
  --th-opacitated: #535862;
  --blue: #2852DC;
  --blue-link: #1677FF;
  --red: #E60626;
  --green: #328c2b;
  --dark-green: #1c4e18;
  --yellow: #FAAD14;
  --default-border: #D9D9D9;
  --default-table-background: #FAFAFA;
  --text-opacitated: rgba(0, 0, 0, .88);
  --disabled-opacitated: rgba(0, 0, 0, .04);
  --hovered-opacitated: rgba(0, 0, 0, .06);
  --disabled-text-opacitated: rgba(0, 0, 0, .25);
  --navbarHeight: 90px;
  --default-sidebar-width: 240px;
  --default-sidebar-aside-width: 320px;
  --default-sidebar-top-height: 90px;
  --gray-300: #D5D7DA;
  --gray-500: #717680;
  --gray-600: #535862;
  --gray-700: #414651;
  --gray-800: #252B37;
  --gray-900: #181D27;
  --brand-50: #f5f7ff;
  --brand-100: #ededff;
  --brand-300: #d1d2fd;
  --brand-600: #2528d3;
  --error-50: #FEE4E2;
  --error-300: #FDA29B;
  --error-500: #F04438;
  --error-700: #B42318;
  --success-50: #ECFDF3;
  --success-500: #12B76A;
  --success-700: #027A48;
  --warning-50: #FEF1D7;
  --warning-500: #FC8822;
  --warning-700: #DC6803;
}

* {
  margin-block-start: 0;
  margin-block-end: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  overflow-x: hidden;
}

html {
  line-height: normal;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  margin: 0;
  padding: 0;
}

body.xui-aos {
  overflow-x: hidden !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: .25em 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden],
template {
  display: none;
}

a {
  background: transparent;
}

a:active,
a:hover {
  outline: 0;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

dfn {
  font-style: italic;
}

mark {
  color: #000000;
  background: #ff0;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: smaller;
}

img {
  border-style: none;
}

svg:not(:root) {
  overflow: hidden;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

figure {
  margin: 1em auto;
}

hr {
  height: 0;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  opacity: .2;
}

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

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

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

button[disabled],
html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

input {
  line-height: normal;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

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

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

details {
  display: block;
}

summary {
  display: list-item;
}

img {
  object-fit: cover;
  object-position: center;
}

/* width */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #CCCCCC;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #161616;
}



/*Navbars*/
.xui-navbar,
.xui-navbar .links ul li {
  height: var(--navbarHeight);
}

.xui-navbar {
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background-color: inherit;
  color: inherit;
  position: relative;
  z-index: 10;
  contain: layout;
}

.xui-navbar.xui-navbar-blurred {
  -webkit-backdrop-filter: blur(16px);
  -o-backdrop-filter: blur(16px);
  -moz-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  left: 0;
}

.xui-navbar .brand {
  width: 300px;
}

.xui-navbar .links {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-jc-align: center;
  -webkit-align-items: center;
  align-items: center;
  justify-content: flex-end;
  width: -webkit-calc(100% - 300px);
  width: -moz-calc(100% - 300px);
  width: -o-calc(100% - 300px);
  width: calc(100% - 300px);
}

.xui-navbar .links ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  -webkit-box-align: stretch;
  -moz-box-align: stretch;
  -ms-flex-jc-align: stretch;
  -webkit-align-items: stretch;
  align-items: center;
  justify-content: flex-end;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.xui-navbar .links ul li,
.xui-navbar .links ul li a {
  display: inline-block;
}

.xui-navbar .links ul li {
  margin: 0 10px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.xui-navbar .links .main ul li a {
  padding: 10px 10px;
  text-decoration: none;
}

.xui-navbar .links ul li.active a {
  color: #01010e;
  font-weight: bolder;
}

.xui-navbar .links ul li.active ul li a {
  font-weight: initial;
  color: initial;
}

.xui-navbar .links .split {
  margin-left: 40px;
}

.xui-navbar .xui-navbar-profile {
  background-color: #f4f4f4;
  position: relative;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.xui-navbar .xui-navbar-profile.ripple::before,
.xui-navbar .xui-navbar-profile.ripple::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #000;
  border-radius: 50%;
  animation-name: ripple;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.xui-navbar .xui-navbar-profile.ripple:after {
  animation-delay: .75s;
}

.xui-navbar .links ul li.dropdown-menu>a {
  position: relative;
}

.xui-navbar .links ul li.dropdown-menu>a::after {
  content: "\25BC";
  font-size: 11.2px;
  margin-left: 7.5px;
  display: inline-block;
  transition: .1s;
}

.xui-navbar .links ul li.dropdown-menu[caret="false"]>a::after {
  display: none;
}

.xui-navbar .links ul li.dropdown-menu:hover a::after {
  transform: rotate(180deg);
}

.xui-navbar .links ul li .dropdown {
  transition: .1s;
  opacity: 0;
  /* display: none; */
  width: 200px;
  -moz-box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, .05);
  -webkit-box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, .05);
  box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, .05);
  position: absolute;
  top: calc(var(--navbarHeight) + 15px);
  border-radius: 8px;
  padding: 4px 4px;
  background-color: var(--white);
}

.xui-navbar .links ul li:hover .dropdown {
  opacity: 1;
  /* display: block; */
  top: var(--navbarHeight);
}

.xui-navbar .links ul li.dropdown-menu::before {
  content: '';
  position: absolute;
  /* border-left: 5px solid transparent;
  border-bottom: 5px solid;
  border-bottom-color: inherit;
  border-right: 5px solid transparent; */
  transform: translateX(-50%);
  left: 50%;
  bottom: 0;
  width: 40px;
  height: 1.2px;
  background-color: rgba(0, 0, 0, .4);
  opacity: 0;
  transition: .1s;
  display: block;
}

.xui-navbar .links ul li.dropdown-menu[tooltip="false"]::before {
  display: none;
}

.xui-navbar .links ul li.dropdown-menu:hover::before {
  opacity: 1;
}

.xui-navbar .links ul li .dropdown li {
  height: initial;
  margin: 0;
}

.xui-navbar .links ul li .dropdown li,
.xui-navbar .links ul li .dropdown li a {
  width: 100%;
  display: block;
  background-color: inherit;
}

.xui-navbar .links ul li .dropdown li a {
  padding: 12px 16px;
  color: inherit;
  opacity: 0.8;
  border-radius: 4px;
  font-size: 14.4px;
}

.xui-navbar .links ul li .dropdown li a:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, .04);
}

.xui-navbar .links[placed="center"] .main ul li,
.xui-navbar .links[placed="center"] .main ul li a,
.xui-navbar .links[xui-set="center"] .main ul li,
.xui-navbar .links[xui-set="center"] .main ul li a {
  text-align: center;
}

.xui-navbar .links[placed="right"] .main ul li,
.xui-navbar .links[placed="right"] .main ul li a,
.xui-navbar .links[xui-set="right"] .main ul li,
.xui-navbar .links[xui-set="right"] .main ul li a {
  text-align: right;
}

.xui-navbar .menu {
  display: none;
}

/* Navbar Customizations */
.xui-navbar[xui-brand="false"] .brand {
  display: none;
  width: 0;
}

.xui-navbar[xui-brand="false"] .links {
  width: 100%;
  justify-content: flex-start;
}

.xui-navbar[xui-brand="false"] .links[placed="center"] {
  justify-content: center;
}

.xui-navbar[xui-brand="false"] .links[placed="right"] {
  justify-content: flex-end;
}

/* Navbar Layout */
.xui-navbar[layout="2"] .links,
.xui-navbar[xui-style="2"] .links {
  justify-content: space-between;
}

.xui-navbar[layout="3"] .links .main {
  position: fixed;
  padding-top: 75px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 50px;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  z-index: 10;
  overflow-y: auto;
  top: 0;
  left: 100%;
}

.xui-navbar[layout="3"] .links .main ul {
  flex-direction: column;
}

.xui-navbar[layout="3"] .links .main ul li,
.xui-navbar[layout="3"] .links .main ul li a {
  display: block;
  width: 100%;
  text-align: left;
}

.xui-navbar[layout="3"] .links .main ul li {
  margin: 20px 0;
  height: initial;
}

.xui-navbar[layout="3"] .links ul li a {
  padding: 15px 10px;
  text-decoration: none;
}

.xui-navbar[layout="3"] .links ul li .dropdown {
  padding: 15px 15px;
  width: 100%;
  position: relative;
  top: 0;
  opacity: 1;
  display: none;
}

.xui-navbar[layout="3"] .links ul li:hover .dropdown {
  display: block;
  top: 0;
}

.xui-navbar[layout="3"] .links ul li .dropdown::before {
  display: none;
}

.xui-navbar[layout="3"] .links .main ul li .dropdown ul li {
  margin: 5px 0;
}

.xui-navbar[layout="3"] .links .main.animate {
  left: 0;
}

.xui-navbar[layout="3"] .links .menu {
  width: 60px;
  height: 50px;
  position: relative;
  z-index: 10;
}

.xui-navbar[layout="3"] .links .menu span {
  width: 40px;
  height: 2px;
  display: block;
  background-color: #000000;
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
  transition: .1s;
}

.xui-navbar[layout="3"] .links .menu span:nth-child(1) {
  margin-top: -10px;
}

.xui-navbar[layout="3"] .links .menu span:nth-child(3) {
  margin-top: 10px;
}

.xui-navbar[layout="3"] .links .menu.animate span:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
  margin-top: 0;
}

.xui-navbar[layout="3"] .links .menu.animate span:nth-child(2) {
  display: none;
}

.xui-navbar[layout="3"] .links .menu.animate span:nth-child(3) {
  transform: translate(-50%, -50%) rotate(-45deg);
  margin-top: 0;
}





/*Animation Effects*/
.xui-effect-ripple {
  position: relative;
}

.xui-effect-ripple::before,
.xui-effect-ripple::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #000;
  border-radius: inherit;
  animation-name: ripple;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  z-index: -1;
}

.xui-effect-ripple::after {
  animation-delay: .75s;
}

.xui-effect-typewriter .xui-effect-typewriter-cursor {
  border-left: 3px solid;
  border-color: inherit;
  animation: typewriter 1s linear infinite;
}



/* XUI AOS */
[xui-aos="fade-up"] {
  opacity: 0 !important;
  transform: translateY(50px);
}

[xui-aos="fade-down"] {
  opacity: 0 !important;
}

[xui-aos="fade-left"] {
  opacity: 0 !important;
  transform: translateX(-50px);
}

[xui-aos="fade-right"] {
  opacity: 0 !important;
  transform: translateX(50px);
}

.xui-aos-animate {
  animation-timing-function: linear;
}

.xui-aos-animate[xui-aos="fade-up"] {
  transform: translateY(0);
  opacity: 1 !important;
}

.xui-aos-animate[xui-aos="fade-down"] {
  animation-name: fadeDown;
  opacity: 1 !important;
}

.xui-aos-animate[xui-aos="fade-left"],
.xui-aos-animate[xui-aos="fade-right"] {
  transform: translateX(0);
  opacity: 1 !important;
}




/* Keyframes */
@keyframes modal {
  from {
    top: -3rem;
    opacity: .1;
  }

  to {
    top: 0;
    opacity: 1;
  }
}

@keyframes modalRight {
  from {
    right: -3rem;
    opacity: .1;
  }

  to {
    right: 0;
    opacity: 1;
  }
}

@keyframes modalLeft {
  from {
    left: -3rem;
    opacity: .1;
  }

  to {
    left: 0;
    opacity: 1;
  }
}

@keyframes modalBottom {
  from {
    bottom: -3rem;
    opacity: .1;
  }

  to {
    bottom: 0;
    opacity: 1;
  }
}

@keyframes modalOpen {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(0);
  }
}

@keyframes modalClose {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(0);
  }
}

@keyframes fadeDown {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes ripple {
  from {
    width: 100%;
    height: 100%;
    opacity: .1;
  }

  to {
    width: 150%;
    height: 150%;
    opacity: .01;
  }
}

@keyframes loading {
  0% {
    transform: skewX(-10deg) translateX(-100%);
  }

  100% {
    transform: skewX(-10deg) translateX(200%);
  }
}

@keyframes typewriter {
  50% {
    opacity: 0;
  }
}



/*Forms*/
.xui-form {
  display: block;
}

.xui-form-box {
  padding: 12px 0;
}

.xui-form label,
.xui-form-label {
  display: inline-block;
  font-size: 14px;
  margin-bottom: 4px;
  color: var(--gray-700);
  font-weight: 500;
}

.xui-form textarea,
.xui-form-textarea,
.xui-form-textbox {
  height: 128px;
  resize: none;
}

.xui-form input,
.xui-form-input,
.xui-form select,
.xui-form-select,
.xui-form textarea,
.xui-form-textarea,
.xui-form-textbox {
  width: 100%;
  display: block;
  border: 1px solid var(--gray-300);
  outline: none;
  font-size: 14.8px;
  padding: 10.4px 12px;
  transition: .25s;
  color: var(--gray-900);
  border-radius: 8px;
  transition: all 0.2s ease-in-out;
}

.xui-form .mega-input {
  width: 64px;
  height: 64px;
  font-size: 48px;
  text-align: center;
  font-weight: bold;
}

.xui-form select,
.xui-form-select {
  appearance: none;
  /* Removes default arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  background-image: url('../assets/images/icons/custom-select-arrow.svg');
  /* Custom arrow */
  background-repeat: no-repeat;
  background-position: right 10px center;
  /* Position the arrow */
  background-size: 16px;
  /* Adjust size */
  padding-right: 30px;
  /* Ensure text doesn't overlap */
}

.xui-form select::-ms-expand,
.xui-form-select::-ms-expand {
  display: none;
  /* Hide the default arrow in IE */
}

/* .xui-form select::after,
.xui-form-select::after {
  content: "▼";
  font-size: 12px;
  color: #333;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  pointer-events: none;
} */

.xui-form[layout="2"] input,
.xui-form-input[layout="2"],
.xui-form[layout="2"] select,
.xui-form-select[layout="2"],
.xui-form[layout="2"] textarea,
.xui-form-textarea[layout="2"],
.xui-form-textbox[layout="2"] {
  padding-left: 0;
  padding-right: 0;
  border-top: none;
  border-left: none;
  border-right: none;
}

.xui-form input:focus,
.xui-form-input:focus,
.xui-form select:focus,
.xui-form-select:focus,
.xui-form textarea:focus,
.xui-form-textarea:focus,
.xui-form-textbox:focus {
  border-color: var(--brand-300);
  box-shadow: 0 0 8px var(--brand-300);
}

.xui-form input:disabled,
.xui-form input[disabled],
.xui-form-input:disabled,
.xui-form-input[disabled],
.xui-form select:disabled,
.xui-form select[disabled],
.xui-form-select:disabled,
.xui-form-select[disabled],
.xui-form textarea:disabled,
.xui-form textarea[disabled],
.xui-form-textarea:disabled,
.xui-form-textarea[disabled],
.xui-form-textbox:disabled,
.xui-form-textbox[disabled],
.xui-form .input-holder:has(input:disabled) .left,
.xui-form .input-holder:has(input[disabled]) .left,
.xui-form .input-holder:has(input:disabled) .right,
.xui-form .input-holder:has(input[disabled]) .right,
.xui-form .input-holder:has(select:disabled) .left,
.xui-form .input-holder:has(select[disabled]) .left,
.xui-form .input-holder:has(select:disabled) .right,
.xui-form .input-holder:has(select[disabled]) .right,
.xui-form .input-holder:has(textarea:disabled) .left,
.xui-form .input-holder:has(textarea[disabled]) .left,
.xui-form .input-holder:has(textarea:disabled) .right,
.xui-form .input-holder:has(textarea[disabled]) .right {
  background-color: #FAFAFA;
  cursor: not-allowed;
}

.xui-form .xui-form-error-msg {
  margin-top: 10px;
  font-size: .8rem;
  color: #bb2124;
}

input::placeholder,
.xui-form input::placeholder,
.xui-form-input::placeholder,
textarea::placeholder,
.xui-form textarea::placeholder,
.xui-form-textarea::placeholder {
  color: var(--gray-500);
}

input[layout="2"]::placeholder,
.xui-form[layout="2"] input::placeholder,
.xui-form-input[layout="2"]::placeholder,
textarea[layout="2"]::placeholder,
.xui-form[layout="2"] textarea::placeholder,
.xui-form-textarea[layout="2"]::placeholder {
  opacity: .8;
}

select:invalid,
.xui-form select:invalid,
.xui-form-select:invalid {
  opacity: .75;
}

input[type="email"] {
  text-transform: lowercase;
}

input[type="email"]::placeholder {
  text-transform: none;
}

input[type="checkbox"] {
  width: initial;
  display: inline;
}

.xui-form .input-holder {
  width: 100%;
  max-width: 100%;
  flex-wrap: nowrap !important;
  align-items: stretch;
  min-width: 0;
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  overflow: hidden;
}

.xui-form .input-holder .left input,
.xui-form .input-holder .left select,
.xui-form .input-holder .left textarea,
.xui-form .input-holder .right input,
.xui-form .input-holder .right select,
.xui-form .input-holder .right textarea {
  padding: 0;
  width: 100%;
  max-width: 72px;
}

.xui-form .input-holder .left select {
  padding-right: 24px;
  background-position: right 0 center;
}

.xui-form .input-holder .left,
.xui-form .input-holder .right {
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-right: 1px solid var(--gray-300);
  color: var(--gray-500);
  font-size: 14.8px;
}

.xui-form .input-holder .right {
  border-right: none;
  border-left: 1px solid var(--gray-300);
}

.xui-form .input-holder[xui-border="false"] .left {
  border-right: none !important;
}

.xui-form .input-holder[xui-border="false"] .right {
  border-left: none !important;
}

.xui-form .input-holder input,
.xui-form .input-holder select,
.xui-form .input-holder textarea {
  flex: 1;
  min-width: 0;
  border: none !important;
}

.xui-form .input-holder:has(.left) input {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.xui-form .input-holder:has(.right) input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.xui-form[xui-style="2"] .input-holder input:focus,
.xui-form[xui-style="2"] .input-holder select:focus,
.xui-form[xui-style="2"] .input-holder textarea:focus {
  box-shadow: none;
}

.xui-form[xui-style="2"] .input-holder:focus-within {
  box-shadow: 0 0 8px var(--brand-300);
}

.xui-form[xui-style="2"] .input-holder[xui-border="false"] input {
  padding-left: 0px;
}

.xui-form .message {
  font-size: 13.2px;
  color: var(--gray-600);
  display: inline-block;
  margin-top: 4px;
}

.xui-form .xui-form-box[xui-error="true"] input,
.xui-form .xui-form-box[xui-error="true"] select,
.xui-form .xui-form-box[xui-error="true"] textarea,
.xui-form .xui-form-box[xui-error="true"] .input-holder {
  border-color: var(--error-300);
}

.xui-form .xui-form-box[xui-error="true"] .message {
  color: var(--error-500);
}

.xui-form .xui-form-box[xui-error="true"] input:focus,
.xui-form .xui-form-box[xui-error="true"] select:focus,
.xui-form .xui-form-box[xui-error="true"] textarea:focus,
.xui-form .xui-form-box[xui-error="true"] .input-holder:focus-within {
  box-shadow: 0 0 8px var(--error-50);
}

.xui-form .xui-form-box[xui-error="true"] .input-holder input:focus,
.xui-form .xui-form-box[xui-error="true"] .input-holder select:focus,
.xui-form .xui-form-box[xui-error="true"] .input-holder textarea:focus {
  box-shadow: none;
}

.xui-form input[type="checkbox"],
.xui-form-input[type="checkbox"] {
  appearance: none;
  /* Remove default checkbox */
  width: 20px;
  height: 20px;
  border-radius: 6.4px;
  /* border: 1px solid var(--gray-300); */
  border: none;
  cursor: pointer;
  position: relative;
  display: inline-block;
  transition: background-color 0.2s;
  box-shadow: none;
}

.xui-form input[type="checkbox"]::before,
.xui-form-input[type="checkbox"]::before {
  content: "";
  width: 16px;
  height: 16px;
  background-color: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  border: 1px solid var(--gray-300);
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: background-color 0.2s;
  color: var(--white);
}

.xui-form input[type="checkbox"]:checked:before,
.xui-form-input[type="checkbox"]:checked:before {
  background-color: var(--brand-600);
  color: var(--white);
}

/* Add a checkmark when checked */
.xui-form input[type="checkbox"]:checked::after,
.xui-form-input[type="checkbox"]:checked::after {
  content: '';
  /* Unicode checkmark */
  width: 16px;
  height: 16px;
  color: var(--white);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-image: url('../assets/images/icons/custom-check.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  /* Adjust size here */
}

.xui-form input[type="radio"],
.xui-form-input[type="radio"] {
  appearance: none;
  /* Remove default checkbox */
  width: 20px;
  height: 20px;
  border-radius: 20px;
  /* border: 1px solid var(--gray-300); */
  border: none;
  cursor: pointer;
  position: relative;
  display: inline-block;
  transition: background-color 0.2s;
  box-shadow: none;
}

.xui-form input[type="radio"]::before,
.xui-form-input[type="radio"]::before {
  content: "";
  width: 16px;
  height: 16px;
  background-color: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 50%;
  border: 1px solid var(--gray-300);
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: background-color 0.2s;
  color: var(--white);
}

.xui-form input[type="radio"]:checked:before,
.xui-form-input[type="radio"]:checked:before {
  border-color: var(--brand-600);
}

.xui-form input[type="radio"]:checked::after,
.xui-form-input[type="radio"]:checked::after {
  content: '';
  /* Unicode checkmark */
  width: 12px;
  height: 12px;
  color: var(--white);
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  background-color: var(--brand-600);
  color: var(--white);
  transform: translate(-50%, -50%);
}

.xui-toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  cursor: pointer;
}

.xui-toggle-switch input[type="checkbox"] {
  opacity: 0;
  width: 100%;
  height: 24px;
  outline: none;
  position: relative;
  z-index: 2;
  cursor: pointer;
}

.xui-toggle-switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #F5F5F5;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50px;
}

.xui-toggle-switch .slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  border-radius: 50%;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  background-color: #FFFFFF;
  -webkit-transition: .4s;
  transition: .2s;
  box-shadow: 0 2px 2px rgba(10, 13, 18, .12);
}

.xui-toggle-switch input[type="checkbox"]:checked+.slider {
  background-color: #17B890;
}

.xui-toggle-switch input[type="checkbox"]:checked+.slider:before {
  -webkit-transform: translateX(20px) translateY(-50%);
  -ms-transform: translateX(20px) translateY(-50%);
  transform: translateX(20px) translateY(-50%);
}

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus input:-webkit-autofill,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: inherit;
  -webkit-box-shadow: 0 0 0 1000px transparent inset;
  box-shadow: 0 0 0 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  /* Sets the text color (since 'color' is often ignored) */
  -webkit-text-fill-color: var(--black) !important;
}



/* Accordions */
.xui-accordion .xui-accordion-box:first-child,
.xui-accordion .box:first-child {
  margin-top: 0;
}

.xui-accordion .xui-accordion-box:last-child,
.xui-accordion .box:last-child {
  margin-bottom: 0;
}

.xui-accordion-box,
.xui-accordion .box {
  margin: 20px 0;
  position: relative;
  border-bottom: 1px solid var(--gray-300);
  overflow: hidden;
}

.xui-accordion-header,
.xui-accordion .header {
  padding: 8px 0;
  align-items: center;
  cursor: pointer;
  font-size: 14.8px;
  font-weight: 700;
}

.xui-accordion-header .xui-accordion-header-text,
.xui-accordion .header .title {
  width: -webkit-calc(100% - 50px);
  width: -moz-calc(100% - 50px);
  width: -o-calc(100% - 50px);
  width: calc(100% - 50px);
}

.xui-accordion-header .xui-accordion-header-icon,
.xui-accordion .header .icon {
  width: 50px;
  height: 50px;
  align-items: center;
  justify-content: center;
}

.xui-accordion-header .xui-accordion-header-icon .xui-accordion-header-icon-close,
.xui-accordion .header .icon .close {
  display: none;
}

.xui-accordion-content,
.xui-accordion .content {
  transition: max-height 0.2s ease-out;
  color: var(--gray-500);
  font-size: 13.2px;
  max-height: 0;
  overflow: hidden;
  margin-bottom: 0;
}



/* Alerts */
.xui-alert {
  background-color: var(--brand-50);
  border: 1px solid var(--brand-300);
  padding: .5rem;
  width: auto;
  /* Let it adjust within min and max limits */
  min-width: 200px;
  max-width: 320px;
  position: fixed;
  z-index: 10 !important;
  top: .5rem;
  right: -100%;
  transition: .24s;
}

.xui-alert[xui-placed="top-left"],
.xui-alert[xui-placed="top-right"],
.xui-alert[xui-set="top-left"],
.xui-alert[xui-set="top-right"] {
  top: -100%;
}

.xui-alert[xui-placed="bottom-left"],
.xui-alert[xui-placed="bottom-right"],
.xui-alert[xui-set="bottom-left"],
.xui-alert[xui-set="bottom-right"] {
  bottom: -100%;
}

.xui-alert[xui-placed="top-right"],
.xui-alert[xui-placed="bottom-right"],
.xui-alert[xui-set="top-right"],
.xui-alert[xui-set="bottom-right"] {
  right: -100%;
}

.xui-alert[xui-placed="top-left"],
.xui-alert[xui-placed="bottom-left"],
.xui-alert[xui-set="top-left"],
.xui-alert[xui-set="bottom-left"] {
  left: -100%;
}

.xui-alert[centered="true"],
.xui-alert[xui-align="center"] {
  align-items: center;
}

.xui-alert .xui-alert-icon,
.xui-alert .icon {
  width: 32px;
  height: 32px;
  color: var(--brand-600);
  align-items: center;
  justify-content: center;
}

/* .xui-alert .xui-alert-icon svg,
.xui-alert .icon svg {
  width: 20px;
  height: 20px;
} */

/* .xui-alert .xui-alert-icon svg path,
.xui-alert .icon svg path,
.xui-alert .xui-alert-icon svg polygon,
.xui-alert .icon svg polygon {
  fill: currentColor;
} */

.xui-alert .xui-alert-content,
.xui-alert .content {
  width: -webkit-calc(100% - 52px);
  width: -moz-calc(100% - 52px);
  width: -o-calc(100% - 52px);
  width: calc(100% - 52px);
  padding: 0 12px;
  font-size: 12px;
  color: var(--brand-600);
}

.xui-alert .xui-alert-content .heading,
.xui-alert .xui-alert-content .xui-alert-content-heading,
.xui-alert .content .title {
  display: block;
  font-size: 13.6px;
  font-weight: 700;
  margin-bottom: 4px;
}

.xui-alert .xui-alert-close,
.xui-alert .cancel {
  padding: .2rem;
  height: 20px;
  width: 20px;
  font-size: 18px;
  color: var(--brand-600);
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.xui-alert .xui-alert-close svg,
.xui-alert .cancel svg {
  width: 16px;
  height: 16px;
}

.xui-alert .xui-alert-close svg path,
.xui-alert .cancel svg path,
.xui-alert .xui-alert-close svg polygon,
.xui-alert .cancel svg polygon {
  fill: currentColor;
}

.xui-alert .xui-alert-close:hover,
.xui-alert .cancel:hover {
  background-color: var(--brand-300);
}

/* No Icon */
.xui-alert[no-icon="true"] .xui-alert-icon,
.xui-alert[xui-icon="false"] .xui-alert-icon,
.xui-alert[no-icon="true"] .icon,
.xui-alert[xui-icon="false"] .icon {
  display: none;
}

.xui-alert[no-icon="true"] .xui-alert-content,
.xui-alert[xui-icon="false"] .xui-alert-content,
.xui-alert[no-icon="true"] .content,
.xui-alert[xui-icon="false"] .content {
  width: -webkit-calc(100% - 20px);
  width: -moz-calc(100% - 20px);
  width: -o-calc(100% - 20px);
  width: calc(100% - 20px);
  padding-left: 4px;
}

/* Info Alert */
.xui-alert.xui-alert-info {
  background-color: #f6f8fe;
  border-color: var(--blue);
}

.xui-alert.xui-alert-info .xui-alert-icon,
.xui-alert.xui-alert-info .icon {
  color: var(--blue);
}

.xui-alert.xui-alert-info .xui-alert-content,
.xui-alert.xui-alert-info .content {
  color: var(--blue-pressed);
}

.xui-alert.xui-alert-info .xui-alert-close,
.xui-alert.xui-alert-info .cancel {
  color: var(--blue);
}

.xui-alert.xui-alert-info .xui-alert-close:hover,
.xui-alert.xui-alert-info .cancel:hover {
  background-color: var(--default-border);
}

/* Success Alert */
.xui-alert.xui-alert-success {
  background-color: var(--success-50);
  border-color: var(--success-500);
}

.xui-alert.xui-alert-success .xui-alert-icon,
.xui-alert.xui-alert-success .icon {
  color: var(--success-500);
}

.xui-alert.xui-alert-success .xui-alert-content,
.xui-alert.xui-alert-success .content {
  color: var(--success-700);
}

.xui-alert.xui-alert-success .xui-alert-close,
.xui-alert.xui-alert-success .cancel {
  color: var(--success-500);
}

.xui-alert.xui-alert-success .xui-alert-close:hover,
.xui-alert.xui-alert-success .cancel:hover {
  background-color: #c8eac8;
}

/* Danger Alert */
.xui-alert.xui-alert-danger {
  background-color: var(--error-50);
  border-color: var(--error-500);
}

.xui-alert.xui-alert-danger .xui-alert-icon,
.xui-alert.xui-alert-danger .icon {
  color: var(--error-500);
}

.xui-alert.xui-alert-danger .xui-alert-content,
.xui-alert.xui-alert-danger .content {
  color: var(--error-700);
}

.xui-alert.xui-alert-danger .xui-alert-close,
.xui-alert.xui-alert-danger .cancel {
  color: var(--error-500);
}

.xui-alert.xui-alert-danger .xui-alert-close:hover,
.xui-alert.xui-alert-danger .cancel:hover {
  background-color: #f3bec1;
}

/* Warning Alert */
.xui-alert.xui-alert-warning {
  background-color: var(--warning-50);
  border-color: var(--warning-500);
}

.xui-alert.xui-alert-warning .xui-alert-icon,
.xui-alert.xui-alert-warning .icon {
  color: var(--warning-500);
}

.xui-alert.xui-alert-warning .xui-alert-content,
.xui-alert.xui-alert-warning .content {
  color: var(--warning-700);
}

.xui-alert.xui-alert-warning .xui-alert-close,
.xui-alert.xui-alert-warning .cancel {
  color: var(--warning-500);
}

.xui-alert.xui-alert-warning .xui-alert-close:hover,
.xui-alert.xui-alert-warning .cancel:hover {
  background-color: #fff9cc;
}



/*Rows & Columns*/
.xui-row,
.xui-navbar,
.xui-pagination,
.xui-pagination .xui-page-counter .xui-page,
.xui-pagination .xui-page-counter .xui-page-ellipsis,
.xui-modal,
.xui-accordion-header,
.xui-accordion .header,
.xui-accordion-header-icon,
.xui-accordion .header .icon,
.xui-loader,
.xui-alert,
.xui-alert .xui-alert-icon,
.xui-alert .icon,
.xui-alert .xui-alert-close,
.xui-alert .cancel,
.xui-dashboard .navigator .links .link-box,
.xui-dashboard .navigator .brand,
.xui-dashboard .screen nav,
.xui-dashboard .screen .nav,
.xui-pagination .prev,
.xui-pagination .next,
.xui-pagination .prev .icon,
.xui-pagination .next .icon,
.xui-pagination .pages,
.xui-pagination .pages .counter,
.xui-form .input-holder,
.xui-form .input-holder .left,
.xui-form .input-holder .right {
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  display: flex;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.xui-dashboard .navigator .links .link-box,
.xui-dashboard .navigator .brand {
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-jc-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.xui-col-1 {
  flex-basis: 8.3%;
}

.xui-col-2 {
  flex-basis: 16.66%;
}

.xui-col-3 {
  flex-basis: 25%;
}

.xui-col-4 {
  flex-basis: 33.33%;
}

.xui-col-5 {
  flex-basis: 41.66%;
}

.xui-col-6 {
  flex-basis: 50%;
}

.xui-col-7 {
  flex-basis: 58.33%;
}

.xui-col-8 {
  flex-basis: 66.66%;
}

.xui-col-9 {
  flex-basis: 75%;
}

.xui-col-10 {
  flex-basis: 83.33%;
}

.xui-col-11 {
  flex-basis: 91.66%;
}

.xui-col-12 {
  flex-basis: 100%;
}


/*Pop Over Tooltips*/
.xui-tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
  width: auto;
  max-width: unset;
}

.xui-tooltip .xui-tooltip-content {
  position: absolute;
  background-color: var(--white);
  color: var(--black);
  padding: 12px 12px;
  border-radius: 8px;
  width: max-content;
  min-width: auto;
  max-width: 300px;
  white-space: normal;
  word-wrap: break-word;
  display: block;
  opacity: 0;
  font-size: 12.8px;
  visibility: hidden;
  /* transition: opacity 0.2s ease, visibility 0.2s ease; */
  z-index: 10;
  box-shadow:
    0px 9px 20px 8px #0000000d,
    0px 3px 6px -4px #0000001f,
    0px 6px 16px 0px #00000014;
}

.xui-tooltip[xui-present="true"] .xui-tooltip-content,
.xui-tooltip[xui-present="true"] .xui-tooltip-content::after {
  opacity: 1;
  visibility: visible;
  /* transition: opacity 0.2s ease, visibility 0.2s ease; */
}

/* Tooltip Arrow */
.xui-tooltip .xui-tooltip-content::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 12px solid transparent;
  opacity: 0;
  visibility: hidden;
  /* transition: opacity 0.2s ease, visibility 0.2s ease; */
  z-index: 10;
}

/* Tooltip Position: Top */
.xui-tooltip[xui-set="top"] .xui-tooltip-content {
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
}

.xui-tooltip[xui-set="top"] .xui-tooltip-content::after {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-top-color: var(--white);
  border-bottom: none;
}

/* Tooltip Position: Bottom */
.xui-tooltip[xui-set="bottom"] .xui-tooltip-content {
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
}

.xui-tooltip[xui-set="bottom"] .xui-tooltip-content::after {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: var(--white);
  border-top: none;
}

/* Tooltip Position: Left */
.xui-tooltip[xui-set="left"] .xui-tooltip-content {
  top: 50%;
  right: calc(100% + 12px);
  transform: translateY(-50%);
}

.xui-tooltip[xui-set="left"] .xui-tooltip-content::after {
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  border-left-color: var(--white);
  border-color: none;
}

/* Tooltip Position: Right */
.xui-tooltip[xui-set="right"] .xui-tooltip-content {
  top: 50%;
  left: calc(100% + 12px);
  transform: translateY(-50%);
}

.xui-tooltip[xui-set="right"] .xui-tooltip-content::after {
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  border-right-color: var(--white);
  border-left: none;
}

/* Tooltip Position: Top Right */
.xui-tooltip[xui-set="top-right"] .xui-tooltip-content {
  bottom: calc(100% + 8px);
  right: 0;
}

.xui-tooltip[xui-set="top-right"] .xui-tooltip-content::after {
  top: 100%;
  left: calc(100% - 40px);
  border-top-color: var(--white);
  border-bottom: none;
}

/* Tooltip Position: Top Left */
.xui-tooltip[xui-set="top-left"] .xui-tooltip-content {
  bottom: calc(100% + 8px);
  left: 0;
}

.xui-tooltip[xui-set="top-left"] .xui-tooltip-content::after {
  top: 100%;
  left: 16px;
  border-top-color: var(--white);
  border-bottom: none;
}

/* Tooltip Position: Bottom Right */
.xui-tooltip[xui-set="bottom-right"] .xui-tooltip-content {
  top: calc(100% + 8px);
  left: 0;
}

.xui-tooltip[xui-set="bottom-right"] .xui-tooltip-content::after {
  bottom: 100%;
  left: 16px;
  border-bottom-color: var(--white);
  border-top: none;
}

/* Tooltip Position: Bottom Left */
.xui-tooltip[xui-set="bottom-left"] .xui-tooltip-content {
  top: calc(100% + 8px);
  ;
  right: 0;
}

.xui-tooltip[xui-set="bottom-left"] .xui-tooltip-content::after {
  bottom: 100%;
  right: 16px;
  border-bottom-color: var(--white);
  border-top: none;
}

.xui-tooltip:hover .xui-tooltip-content,
.xui-tooltip:hover .xui-tooltip-content::after {
  opacity: 1;
  visibility: visible;
}


/*Tables*/
.xui-table-responsive {
  overflow-x: auto;
}

.xui-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.xui-table tr {
  padding: .5rem 0;
}

.xui-table tbody tr:nth-child(odd) {
  background-color: var(--default-table-background);
}

.xui-table tr {
  border-bottom: 1px solid var(--default-border);
}

.xui-table tr th,
.xui-table tr td {
  white-space: nowrap;
  padding: 16px 12px;
}

.xui-table tr th {
  background-color: transparent;
  font-size: 12px;
  padding-top: 12px;
  padding-bottom: 12px;
  color: var(--th-opacitated);
  font-weight: 600;
}

.xui-table tr td {
  font-size: 14px;
  color: var(--th-opacitated);
}

.xui-table tr th,
.xui-table.xui-table-left tr th {
  text-align: left;
}

.xui-table[xui-style="2"] tr td {
  border-bottom: .4px solid var(--default-border);
}

.xui-table[xui-style="2"] tr:nth-child(odd),
.xui-table[xui-style="2"] tr:nth-child(even) {
  background-color: transparent;
}

.xui-table[xui-style="2"] tr th {
  background-color: var(--default-table-background);
}


/* Badges */
.xui-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 10.8px;
  display: inline-block;
}

.xui-badge-success {
  background-color: var(--success-50);
  color: var(--success-700);
}

.xui-badge-info {
  background-color: #e9edfc;
  color: #4b6de7;
}

.xui-badge-danger {
  background-color: var(--error-50);
  color: var(--error-500);
}

.xui-badge-warning {
  background-color: var(--warning-50);
  color: var(--warning-700);
}

.xui-badge-blue {
  background-color: #EAEBFB;
  color: var(--blue);
}

.xui-badge-red {
  background-color: #FEE6EA;
  color: var(--red);
}

.xui-badge-green {
  background-color: #E8FCF7;
  color: var(--green);
}

.xui-badge-yellow {
  background-color: #FEF1D7;
  color: var(--yellow);
}



/* Ribbons */
.xui-ribbon {
  display: inline-block;
  padding: 4px 8px;
  position: absolute;
  right: -12px;
  top: 20px;
  border-radius: 4px 4px 0 4px;
  font-size: 11.6px;
  color: var(--white);
}

.xui-ribbon::after {
  content: '';
  position: absolute;
  border-style: solid;
  top: 100%;
  right: 0;
  border-width: .7em 1em 0 0;
}

.xui-ribbon-daybreak {
  background-color: #1677FF;
}

.xui-ribbon-daybreak::after {
  border-color: #1677FF transparent transparent transparent;
}

.xui-ribbon-volcano {
  background-color: #FA541C;
}

.xui-ribbon-volcano::after {
  border-color: #D4380D transparent transparent transparent;
}

.xui-ribbon-magenta {
  background-color: #EB2F96;
}

.xui-ribbon-magenta::after {
  border-color: #C41D7F transparent transparent transparent;
}

.xui-ribbon-dustred {
  background-color: #F5222D;
}

.xui-ribbon-dustred::after {
  border-color: #CF1322 transparent transparent transparent;
}

.xui-ribbon-cyan {
  background-color: #13C2C2;
}

.xui-ribbon-cyan::after {
  border-color: #08979C transparent transparent transparent;
}

.xui-ribbon-green {
  background-color: #52C41A;
}

.xui-ribbon-green::after {
  border-color: #389E0D transparent transparent transparent;
}

.xui-ribbon-purple {
  background-color: #722ED1;
}

.xui-ribbon-purple::after {
  border-color: #531DAB transparent transparent transparent;
}



/*Paginations*/
.xui-pagination {
  align-items: center;
  padding: 12px 0;
  width: 100%;
  justify-content: space-between;
}

.xui-pagination .prev,
.xui-pagination .next {
  flex-direction: row;
  align-items: center;
  grid-gap: 4px;
  cursor: pointer;
  outline: none;
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
}

.xui-pagination .prev .icon,
.xui-pagination .next .icon,
.xui-pagination .prev .icon svg,
.xui-pagination .next .icon svg {
  width: 20px;
  height: 20px;
  color: var(--gray-500);
  align-items: center;
  justify-content: center;
}

.xui-pagination .prev .text,
.xui-pagination .next .text {
  color: var(--gray-600);
  font-size: 14px;
}

.xui-pagination .pages {
  grid-gap: 2px;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

.xui-pagination .pages .default {
  display: none;
}

.xui-pagination .pages .counter {
  width: 40px;
  height: 40px;
  font-size: 14px;
  color: var(--gray-500);
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  border: none;
  outline: none;
}

.xui-pagination .pages .counter.active {
  background-color: var(--brand-50);
  color: var(--brand-600);
  font-weight: 600;
}

.xui-pagination[xui-style="2"] .prev,
.xui-pagination[xui-style="2"] .next {
  border: 1px solid var(--gray-300);
  padding: 9.6px 14.4px;
}

.xui-pagination[no-icon="true"] .prev .icon,
.xui-pagination[no-icon="true"] .next .icon {
  display: none;
}

.xui-pagination[xui-style="3"] .pages .counter.active,
.xui-pagination[xui-style="4"] .pages .counter.active,
.xui-pagination[xui-style="5"] .pages .counter.active {
  color: var(--gray-800);
}

.xui-pagination[xui-style="3"],
.xui-pagination[xui-style="4"],
.xui-pagination[xui-style="5"] {
  justify-content: flex-start;
}

.xui-pagination[xui-style="3"] .pages,
.xui-pagination[xui-style="4"] .pages,
.xui-pagination[xui-style="5"] .pages {
  grid-gap: 0;
}

.xui-pagination[xui-style="3"] .prev,
.xui-pagination[xui-style="3"] .next,
.xui-pagination[xui-style="4"] .prev,
.xui-pagination[xui-style="4"] .next,
.xui-pagination[xui-style="5"] .prev,
.xui-pagination[xui-style="5"] .next {
  border: 1px solid var(--gray-300);
  padding: 0 12px;
  height: 40px;
}

.xui-pagination[xui-style="3"] .prev,
.xui-pagination[xui-style="4"] .prev,
.xui-pagination[xui-style="5"] .prev {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.xui-pagination[xui-style="3"] .next,
.xui-pagination[xui-style="4"] .next,
.xui-pagination[xui-style="5"] .next {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: none;
}

.xui-pagination[xui-style="3"] .pages .counter.active,
.xui-pagination[xui-style="4"] .pages .counter.active,
.xui-pagination[xui-style="5"] .pages .counter.active {
  background-color: #FAFAFA;
}

.xui-pagination[xui-style="3"] .pages .counter,
.xui-pagination[xui-style="4"] .pages .counter,
.xui-pagination[xui-style="5"] .pages .counter {
  border: 1px solid var(--gray-300);
  border-left: none;
  border-radius: 0;
}

.xui-pagination[xui-style="4"] {
  justify-content: center;
}

.xui-pagination[xui-style="5"] {
  justify-content: flex-end;
}

.xui-pagination .xui-page-back {
  padding-right: 20px;
}

.xui-pagination .xui-page-counter {
  display: inherit;
}

.xui-pagination .xui-page-counter .xui-page,
.xui-pagination .xui-page-counter .xui-page-ellipsis {
  margin: 0 5px;
  width: 30px;
  height: 30px;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  outline: none;
  color: inherit;
  opacity: .5;
}

.xui-pagination .xui-page-counter .xui-page-ellipsis {
  color: #555555;
  border: 1px solid #CCCCCC;
}

.xui-pagination .xui-page-counter .xui-page.active {
  opacity: 1;
  background-color: #DDDDDD;
  color: #555555;
}

.xui-pagination .xui-page-back,
.xui-pagination .xui-page-next {
  letter-spacing: 1px;
  padding: 3px 5px;
  text-decoration: none;
  outline: none;
}

.xui-pagination-blue .xui-page-back,
.xui-pagination-blue .xui-page-next {
  color: var(--blue);
  font-weight: bold;
}

.xui-pagination-blue .xui-page-counter .xui-page.active {
  background-color: var(--blue);
  color: #FFFFFF;
}

.xui-pagination-red .xui-page-counter .xui-page.active {
  background-color: var(--red);
  color: #FFFFFF;
}

.xui-pagination-green .xui-page-counter .xui-page.active {
  background-color: var(--green);
  color: #01010E;
}

.xui-pagination .xui-page-next {
  padding-left: 20px;
}

.xui-pagination .xui-pagination-text {
  opacity: .5;
  color: inherit;
  margin-right: 15px;
}

.xui-pagination input,
.xui-pagination select {
  width: 80px;
  display: inline-block;
  border: 1px solid #E5E5E5;
  outline: none;
  font-size: .95rem;
  padding: .7rem 1rem;
  transition: .25s;
  background-color: inherit;
  text-align: center;
  color: inherit;
}

.xui-pagination button {
  height: 100%;
  margin-left: 10px;
  text-align: center;
}




/* Modals */
.xui-modal {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-y: auto;
  position: fixed;
  z-index: 2247483645 !important;
  top: 0;
  left: 0;
  padding: 1rem;
  background-color: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
  animation-name: modalClose;
  animation-duration: 0;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.xui-modal-center {
  justify-content: center;
  align-items: center;
}

.xui-modal-top-left {
  justify-content: flex-start;
  align-items: flex-start;
}

.xui-modal-top-right {
  justify-content: flex-end;
  align-items: flex-start;
}

.xui-modal-bottom-left {
  justify-content: flex-start;
  align-items: flex-end;
}

.xui-modal-bottom-right {
  justify-content: flex-end;
  align-items: flex-end;
}

.xui-modal-bottom-center {
  justify-content: center;
  align-items: flex-end;
}

.xui-modal .xui-modal-content,
.xui-modal .content {
  padding: 24px 24px;
  background-color: #FFFFFF;
  max-width: 400px;
  width: 100%;
  position: relative;
  animation-fill-mode: forwards;
}

.xui-modal .xui-modal-content[no-spacing],
.xui-modal .content[no-spacing] {
  padding: 0;
}



/* Dashboards */
.xui-dashboard {
  position: relative;
}

.xui-dashboard .navigator {
  width: var(--default-sidebar-width);
  left: 0;
  position: relative;
  overflow-y: auto;
}

.xui-dashboard .navigator,
.xui-dashboard .screen {
  position: fixed;
  top: 0;
  min-height: 100vh;
  min-height: 100dvh;
  height: 100%;
  padding: 0 4px;
}

.xui-dashboard .navigator {
  background-color: var(--brand-50);
  padding: 0 12px;
}

.xui-dashboard .navigator .brand {
  height: var(--default-sidebar-top-height);
  padding-left: 12px;
  padding-right: 12px;
}

.xui-dashboard .navigator .links {
  position: relative;
  min-height: calc(100% - (var(--default-sidebar-top-height) + 100px));
  height: auto;
}

.xui-dashboard .navigator .links .link-box {
  min-height: 40px;
  width: 100%;
  text-decoration: none;
  color: inherit;
  margin: 10.2px 0;
  border-radius: 4px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 12px;
  padding-right: 12px;
  color: var(--gray-500);
  cursor: pointer;
  transition: .2s;
  position: relative;
}

.xui-dashboard .navigator .links .link-box.dropdown::after {
  content: '';
  position: absolute;
  top: 12px;
  right: 12px;
  width: 16px;
  height: 16px;
  background-image: url('../assets/images/icons/custom-select-arrow.svg');
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}

.xui-dashboard .navigator .links .link-box.dropdown .dropdown-box {
  background-color: var(--brand-100);
  width: 100%;
  border-radius: 4px;
  max-height: 0;
  overflow: hidden;
  transition: .2s;
}

.xui-dashboard .navigator .links .link-box.dropdown.focus .dropdown-box {
  margin-top: 8px;
  padding: 4px;
}

.xui-dashboard .navigator .links .link-box.dropdown .dropdown-box .link-box:first-child {
  margin-top: 0;
}

.xui-dashboard .navigator .links .link-box.dropdown .dropdown-box .link-box:last-child {
  margin-bottom: 0;
}

.xui-dashboard .navigator .links .link-box.dropdown .dropdown-box .link-box:hover {
  background-color: var(--brand-300);
}

.xui-dashboard .navigator .links .link-box.dropdown .link-box.active,
.xui-dashboard .navigator .links .link-box.dropdown .link-box.active:hover {
  background-color: var(--brand-600);
  color: var(--white);
}

.xui-dashboard .navigator .links .link-box:hover {
  background-color: var(--brand-100);
}

.xui-dashboard .navigator .links .link-box.active {
  background-color: var(--brand-300);
  color: var(--brand-600);
  font-weight: 600;
}

.xui-dashboard .navigator .links .link-box .icon {
  display: inline-flex;
  margin-right: 8px;
  min-width: 20px;
  min-height: 20px;
}

.xui-dashboard .navigator .links .link-box .text {
  display: inline-block;
  font-size: 14.4px;
}

.xui-dashboard .navigator .links .bottom-fixed {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  padding-bottom: 20px;
}

.xui-dashboard .navigator .minified {
  display: none;
}

.xui-dashboard .screen {
  width: -webkit-calc(100% - var(--default-sidebar-width));
  width: -moz-calc(100% - var(--default-sidebar-width));
  width: -o-calc(100% - var(--default-sidebar-width));
  width: calc(100% - var(--default-sidebar-width));
  left: var(--default-sidebar-width);
  overflow-y: hidden;
}

.xui-dashboard .screen nav,
.xui-dashboard .screen .nav {
  height: var(--default-sidebar-top-height);
  position: relative;
  top: 0;
  left: 0;
  z-index: 2;
}

.xui-dashboard .screen .content,
.xui-dashboard .screen .aside {
  overflow-y: auto;
}

.xui-dashboard .screen .content {
  width: 100%;
  height: 100%;
  padding-bottom: 150px;
  transition: .12s;
}

.xui-dashboard .screen .content .xui-open-sidebar {
  cursor: pointer;
}

.xui-dashboard .screen[xui-aside="true"] .content {
  width: calc(100% - var(--default-sidebar-aside-width));
  top: 0;
}

.xui-dashboard .screen[xui-navbar="true"] .content {
  top: var(--default-sidebar-top-height);
  /* padding-top: var(--navbarHeight); */
}

.xui-dashboard .screen[xui-navbar="true"] .content nav {
  position: fixed;
  left: var(--default-sidebar-width);
  width: calc(100% - var(--default-sidebar-width));
}

.xui-dashboard .screen .aside {
  display: block;
  width: var(--default-sidebar-aside-width);
  height: 100%;
  position: absolute;
  right: -100%;
  top: 0;
  z-index: 2;
  transition: .2s;
}

.xui-dashboard .screen[xui-aside="true"] .aside {
  right: 0;
}

.xui-dashboard .screen[xui-navbar="true"] .aside {
  top: var(--default-sidebar-top-height);
}

.xui-dashboard .menu {
  display: none;
}



/* XUI Animations */
.xui-alert.xui-anime {
  transition: .25s;
}

.xui-alert.xui-anime[xui-placed="top-left"],
.xui-alert.xui-anime[xui-placed="top-center"],
.xui-alert.xui-anime[xui-placed="top-right"],
.xui-alert.xui-anime[xui-set="top-left"],
.xui-alert.xui-anime[xui-set="top-center"],
.xui-alert.xui-anime[xui-set="top-right"] {
  top: .5rem;
}

.xui-alert.xui-anime[xui-placed="bottom-left"],
.xui-alert.xui-anime[xui-placed="bottom-center"],
.xui-alert.xui-anime[xui-placed="bottom-right"],
.xui-alert.xui-anime[xui-set="bottom-left"],
.xui-alert.xui-anime[xui-set="bottom-center"],
.xui-alert.xui-anime[xui-set="bottom-right"] {
  bottom: .5rem;
}

.xui-alert.xui-anime[xui-placed="top-right"],
.xui-alert.xui-anime[xui-placed="bottom-right"],
.xui-alert.xui-anime[xui-set="top-right"],
.xui-alert.xui-anime[xui-set="bottom-right"] {
  right: .5rem;
}

.xui-alert.xui-anime[xui-placed="top-left"],
.xui-alert.xui-anime[xui-placed="bottom-left"],
.xui-alert.xui-anime[xui-set="top-left"],
.xui-alert.xui-anime[xui-set="bottom-left"] {
  left: .5rem;
}

.xui-alert.xui-anime[xui-placed="top-center"],
.xui-alert.xui-anime[xui-placed="bottom-center"],
.xui-alert.xui-anime[xui-set="top-center"],
.xui-alert.xui-anime[xui-set="bottom-center"] {
  left: 50%;
  transform: translateX(-50%);
}




/* Custom Attributes */
.xui-modal[display="true"],
.xui-modal[xui-present="true"] {
  animation-name: modalClose;
  animation-iteration-count: 1;
  animation-fill-mode: backwards;
}

.xui-modal[display="false"],
.xui-modal[xui-present="false"] {
  animation-name: modalOpen;
  animation-delay: .15s;
  animation-iteration-count: 1;
}

.xui-modal[display="true"] .xui-modal-content,
.xui-modal[xui-present="true"] .xui-modal-content,
.xui-modal[display="true"] .content,
.xui-modal[xui-present="true"] .content {
  animation-name: modal;
  animation-duration: .25s;
  animation-iteration-count: 1;
}

.xui-modal[display="false"] .xui-modal-content,
.xui-modal[xui-present="false"] .xui-modal-content,
.xui-modal[display="false"] .content,
.xui-modal[xui-present="false"] .content {
  animation-name: modal;
  animation-duration: .25s;
  animation-iteration-count: 1;
  animation-direction: reverse;
}

.xui-modal[display="true"][xui-set="top-right"] .xui-modal-content,
.xui-modal[xui-present="true"][xui-set="top-right"] .xui-modal-content,
.xui-modal[display="true"][xui-set="top-right"] .content,
.xui-modal[xui-present="true"][xui-set="top-right"] .content,
.xui-modal[display="false"][xui-set="top-right"] .xui-modal-content,
.xui-modal[xui-present="false"][xui-set="top-right"] .xui-modal-content,
.xui-modal[display="false"][xui-set="top-right"] .content,
.xui-modal[xui-present="false"][xui-set="top-right"] .content,
.xui-modal[display="true"][xui-set="bottom-right"] .xui-modal-content,
.xui-modal[xui-present="true"][xui-set="bottom-right"] .xui-modal-content,
.xui-modal[display="true"][xui-set="bottom-right"] .content,
.xui-modal[xui-present="true"][xui-set="bottom-right"] .content,
.xui-modal[display="false"][xui-set="bottom-right"] .xui-modal-content,
.xui-modal[xui-present="false"][xui-set="bottom-right"] .xui-modal-content,
.xui-modal[display="false"][xui-set="bottom-right"] .content,
.xui-modal[xui-present="false"][xui-set="bottom-right"] .content {
  animation-name: modalRight;
}

.xui-modal[display="true"][xui-set="top-left"] .xui-modal-content,
.xui-modal[xui-present="true"][xui-set="top-left"] .xui-modal-content,
.xui-modal[display="true"][xui-set="top-left"] .content,
.xui-modal[xui-present="true"][xui-set="top-left"] .content,
.xui-modal[display="false"][xui-set="top-left"] .xui-modal-content,
.xui-modal[xui-present="false"][xui-set="top-left"] .xui-modal-content,
.xui-modal[display="false"][xui-set="top-left"] .content,
.xui-modal[xui-present="false"][xui-set="top-left"] .content,
.xui-modal[display="true"][xui-set="bottom-left"] .xui-modal-content,
.xui-modal[xui-present="true"][xui-set="bottom-left"] .xui-modal-content,
.xui-modal[display="true"][xui-set="bottom-left"] .content,
.xui-modal[xui-present="true"][xui-set="bottom-left"] .content,
.xui-modal[display="false"][xui-set="bottom-left"] .xui-modal-content,
.xui-modal[xui-present="false"][xui-set="bottom-left"] .xui-modal-content,
.xui-modal[display="false"][xui-set="bottom-left"] .content,
.xui-modal[xui-present="false"][xui-set="bottom-left"] .content {
  animation-name: modalLeft;
}

.xui-modal[display="true"][xui-set="bottom-center"] .xui-modal-content,
.xui-modal[xui-present="true"][xui-set="bottom-center"] .xui-modal-content,
.xui-modal[display="true"][xui-set="bottom-center"] .content,
.xui-modal[xui-present="true"][xui-set="bottom-center"] .content,
.xui-modal[display="false"][xui-set="bottom-center"] .xui-modal-content,
.xui-modal[xui-present="false"][xui-set="bottom-center"] .xui-modal-content,
.xui-modal[display="false"][xui-set="bottom-center"] .content,
.xui-modal[xui-present="false"][xui-set="bottom-center"] .content {
  animation-name: modalBottom;
}

.xui-modal[xui-placed="top-center"],
.xui-modal[xui-set="top-center"] {
  align-items: flex-start;
}

.xui-modal[xui-placed="top-left"],
.xui-modal[xui-set="top-left"] {
  align-items: flex-start;
  justify-content: flex-start;
}

.xui-modal[xui-placed="top-right"],
.xui-modal[xui-set="top-right"] {
  align-items: flex-start;
  justify-content: flex-end;
}

.xui-modal[xui-placed="bottom-center"],
.xui-modal[xui-set="bottom-center"] {
  align-items: flex-end !important;
}

.xui-modal[xui-placed="bottom-left"],
.xui-modal[xui-set="bottom-left"] {
  align-items: flex-end !important;
  justify-content: flex-start !important;
}

.xui-modal[xui-placed="bottom-right"],
.xui-modal[xui-set="bottom-right"] {
  align-items: flex-end !important;
  justify-content: flex-end !important;
}

.xui-alert[xui-placed],
.xui-alert[xui-set] {
  position: fixed;
}

.xui-alert[xui-placed="top-right"],
.xui-alert[xui-set="top-right"] {
  top: .5rem;
  right: -100%;
}

.xui-alert[display="true"],
.xui-alert[xui-present="true"],
.xui-alert[display="true"][xui-placed="top-right"],
.xui-alert[xui-present="true"][xui-placed="top-right"],
.xui-alert[display="true"][xui-set="top-right"],
.xui-alert[xui-present="true"][xui-set="top-right"] {
  top: .5rem;
  right: .5rem;
}

.xui-alert[xui-placed="top-left"],
.xui-alert[xui-set="top-left"] {
  top: .5rem;
  left: -100%;
}

.xui-alert[display="true"][xui-placed="top-left"],
.xui-alert[xui-present="true"][xui-placed="top-left"],
.xui-alert[display="true"][xui-set="top-left"],
.xui-alert[xui-present="true"][xui-set="top-left"] {
  top: .5rem;
  left: .5rem;
}

.xui-alert[xui-placed="bottom-right"],
.xui-alert[xui-set="bottom-right"] {
  bottom: .5rem;
  right: -100%;
  top: unset;
}

.xui-alert[display="true"][xui-placed="bottom-right"],
.xui-alert[xui-present="true"][xui-placed="bottom-right"],
.xui-alert[display="true"][xui-set="bottom-right"],
.xui-alert[xui-present="true"][xui-set="bottom-right"] {
  bottom: .5rem;
  right: .5rem;
}

.xui-alert[xui-placed="bottom-left"],
.xui-alert[xui-set="bottom-left"] {
  bottom: .5rem;
  left: -100%;
  top: unset;
}

.xui-alert[xui-placed="top-center"],
.xui-alert[xui-set="top-center"] {
  top: -100%;
}

.xui-alert[xui-placed="bottom-center"],
.xui-alert[xui-set="bottom-center"] {
  bottom: -100%;
  top: unset;
}

.xui-alert[xui-placed="top-center"],
.xui-alert[xui-placed="bottom-center"],
.xui-alert[xui-set="top-center"],
.xui-alert[xui-set="bottom-center"] {
  left: 50%;
  transform: translateX(-50%);
}

.xui-alert[display="true"][xui-placed="bottom-left"],
.xui-alert[xui-present="true"][xui-placed="bottom-left"],
.xui-alert[display="true"][xui-set="bottom-left"],
.xui-alert[xui-present="true"][xui-set="bottom-left"] {
  bottom: .5rem;
  left: .5rem;
}

.xui-alert[display="true"][xui-placed="bottom-left"],
.xui-alert[xui-present="true"][xui-placed="bottom-left"],
.xui-alert[display="true"][xui-set="bottom-left"],
.xui-alert[xui-present="true"][xui-set="bottom-left"] {
  bottom: .5rem;
  left: .5rem;
}

.xui-alert[display="true"][xui-placed="top-center"],
.xui-alert[xui-present="true"][xui-placed="top-center"],
.xui-alert[display="true"][xui-set="top-center"],
.xui-alert[xui-present="true"][xui-set="top-center"] {
  top: .5rem;
}

.xui-alert[display="true"][xui-placed="bottom-center"],
.xui-alert[xui-present="true"][xui-placed="bottom-center"],
.xui-alert[display="true"][xui-set="bottom-center"],
.xui-alert[xui-present="true"][xui-set="bottom-center"] {
  bottom: .5rem;
}




@media screen and (max-width: 1024px) {

  .xui-navbar .menu {
    display: -webkit-box;
    /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;
    /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;
    /* TWEENER - IE 10 */
    display: -webkit-flex;
    /* NEW - Chrome */
    display: flex;
    /* NEW, Spec - Opera 12.1, Firefox 20+ */
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .xui-navbar:has(.menu.animate) {
    position: fixed;
  }

  .xui-navbar .brand {
    width: 120px;
    z-index: 2;
  }

  .xui-navbar .links {
    width: -webkit-calc(100% - 120px);
    width: -moz-calc(100% - 120px);
    width: -o-calc(100% - 120px);
    width: calc(100% - 120px);
  }

  .xui-navbar .links .main {
    transition: .12s;
    background-color: transparent;
    width: 100%;
    position: absolute;
    left: 0;
    top: -1000%;
  }

  .xui-navbar .links .main.animate {
    top: 90px;
    z-index: 1;
  }

  .xui-navbar .links .main ul {
    flex-direction: column;
  }

  .xui-navbar .links .main ul li,
  .xui-navbar .links .main ul li a {
    display: block;
    width: 100%;
    text-align: left;
  }

  .xui-navbar .links .main ul li {
    margin: 8px 0;
    height: initial;
  }

  .xui-navbar .links .main ul li a {
    padding: 15px 10px;
    text-decoration: none;
  }

  .xui-navbar .links .main ul li .dropdown {
    width: 100%;
    position: relative;
    top: 0;
    opacity: 1;
    display: none;
  }

  .xui-navbar .links ul li:hover .dropdown {
    display: block;
    top: 0;
  }

  .xui-navbar .links ul li .dropdown::before {
    display: none;
  }

  .xui-navbar .links ul li.dropdown-menu::before {
    opacity: 0;
    display: none;
  }

  .xui-navbar.xui-overlay .links .menu span,
  .xui-navbar.xui-overlay-1 .links .menu span,
  .xui-navbar.xui-overlay-2 .links .menu span,
  .xui-navbar.xui-overlay-3 .links .menu span,
  .xui-navbar.xui-bg-black .links .menu span {
    background-color: #FFFFFF;
  }

  .xui-navbar .menu {
    width: 52px;
    height: 52px;
    background-color: rgba(0, 0, 0, .08);
    border-radius: 12px;
    cursor: pointer;
    position: relative;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    grid-gap: 5.2px;
  }

  .xui-navbar .menu span {
    width: 24px;
    height: 1.6px;
    background-color: var(--black);
    transition: .12s;
    position: relative;
  }

  /* Navbar Menu 2 */
  .xui-navbar[menu="2"] .menu span:nth-child(2),
  .xui-navbar[xui-menu="2"] .menu span:nth-child(2) {
    display: none;
  }

  .xui-navbar[menu="2"] .menu span:nth-child(3),
  .xui-navbar[xui-menu="2"] .menu span:nth-child(3) {
    width: 16px;
    left: -4px;
  }

  .xui-navbar[menu="2"] .menu span:nth-child(3),
  .xui-navbar[xui-menu="2"] .menu.animate span:nth-child(3) {
    width: 20px;
  }

  .xui-navbar .menu.animate span {
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50% !important;
    left: 50% !important;
    width: 20px;
  }

  .xui-navbar .menu.animate span:nth-child(1) {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .xui-navbar .menu.animate span:nth-child(2) {
    display: none;
  }

  .xui-navbar .menu.animate span:nth-child(3) {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  /* Navbar Customizations */
  .xui-navbar[xui-brand="false"] .links {
    justify-content: space-between;
  }

  .xui-navbar[xui-brand="false"] .links .split {
    margin-left: 0;
  }

  .xui-navbar[xui-brand="false"] .links[placed="center"] {
    justify-content: space-between;
  }

  .xui-navbar[xui-brand="false"] .links[placed="right"] {
    flex-direction: row-reverse;
    justify-content: space-between;
  }

  /* Navbar Layout */
  .xui-navbar[layout="2"] .links,
  .xui-navbar[xui-style="2"] .links {
    justify-content: flex-end !important;
  }

  .xui-navbar[layout="2"] .links[placed="right"],
  .xui-navbar[xui-style="2"] .links[placed="right"] {
    flex-direction: row;
  }

  .xui-navbar[layout="2"] .links .main,
  .xui-navbar[xui-style="2"] .links .main {
    padding-top: 75px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 50px;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    opacity: 0;
    z-index: 10;
    overflow-y: auto;
    top: 0;
    left: auto;
    right: -100%;
  }

  .xui-navbar[layout="2"] .links .main.animate,
  .xui-navbar[xui-style="2"] .links .main.animate {
    width: 100%;
    opacity: 1;
    right: 0;
  }

  .xui-navbar[layout="2"] .menu.animate,
  .xui-navbar[xui-style="2"] .menu.animate {
    top: 20px;
    right: 20px;
  }

  .xui-navbar[layout="2"] .links .main,
  .xui-navbar[layout="2"] .menu.animate,
  .xui-navbar[xui-style="2"] .links .main,
  .xui-navbar[xui-style="2"] .menu.animate {
    z-index: 10;
    position: fixed;
  }

  .xui-navbar[layout="2"] .brand,
  .xui-navbar[xui-style="2"] .brand {
    position: relative;
    z-index: 11;
  }

  .xui-navbar[layout="2"] .links .fixed,
  .xui-navbar[xui-style="2"] .links .fixed {
    z-index: 10;
    position: fixed;
    margin-right: 60px;
  }

}

@media screen and (max-width: 1024px) {

  .xui-alert[xui-placed],
  .xui-alert[xui-set] {
    max-width: 90%;
  }

  .xui-dashboard {
    transition: .25s;
  }

  .xui-dashboard.animate {
    position: relative;
  }

  .xui-dashboard .navigator {
    width: 300px;
    position: fixed;
    z-index: 2;
    left: -100%;
    transition: .12s;
  }

  .xui-dashboard.animate .navigator {
    left: 0;
  }

  .xui-dashboard::before {
    background-color: rgba(0, 0, 0, .64);
    width: 100%;
    content: '';
    height: 100vh;
    height: 100dvh;
    position: fixed;
    z-index: 2;
    top: 0;
    left: -100%;
    transition: .12s;
  }

  .xui-dashboard.animate::before {
    left: 0;
  }

  .xui-dashboard .screen {
    width: 100%;
    left: 0;
  }

  .xui-dashboard .screen .xui-navbar {
    padding-right: 90px;
  }

  .xui-dashboard .screen .xui-navbar .menu {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
  }

  .xui-dashboard .screen .content {
    width: 100% !important;
  }

  .xui-dashboard .screen[xui-navbar="true"] .content nav {
    width: 100%;
    left: 0;
  }

  .xui-dashboard .screen .aside {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    z-index: 10 !important;
  }

  .xui-dashboard .screen .aside.animate,
  .xui-dashboard .screen[xui-aside="true"] .aside {
    right: -10px !important;
  }

  .xui-dashboard .screen .content.animate::before,
  .xui-dashboard .screen[xui-aside="true"] .content::before {
    background-color: rgba(0, 0, 0, .5);
    width: 100%;
    content: '';
    height: 100vh;
    height: 100dvh;
    position: absolute;
    z-index: 3;
    top: 0;
    right: 0;
    cursor: pointer;
  }

  .xui-dashboard .menu {
    display: inline-flex;
  }

  .xui-pagination .prev .icon,
  .xui-pagination .next .icon,
  .xui-pagination .prev .icon svg,
  .xui-pagination .next .icon svg {
    width: 16px;
    height: 16px;
  }

  .xui-pagination .text,
  .xui-pagination .pages .counter,
  .xui-pagination .pages .default {
    font-size: 12px;
  }

  .xui-pagination[no-icon="true"] .prev .icon,
  .xui-pagination[no-icon="true"] .next .icon {
    display: block;
  }

  .xui-pagination[xui-style="2"] .prev,
  .xui-pagination[xui-style="2"] .next {
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
  }

  .xui-pagination .prev .text,
  .xui-pagination .next .text {
    display: none;
  }

  .xui-pagination .pages .default {
    display: inline-block;
    font-size: 12px;
    color: var(--gray-700);
  }

  .xui-pagination .pages .counter {
    display: none;
  }

  .xui-pagination[xui-style="3"] .pages .default,
  .xui-pagination[xui-style="4"] .pages .default,
  .xui-pagination[xui-style="5"] .pages .default {
    display: none;
  }

  .xui-pagination[xui-style="3"] .prev,
  .xui-pagination[xui-style="3"] .next,
  .xui-pagination[xui-style="3"] .pages .counter,
  .xui-pagination[xui-style="4"] .prev,
  .xui-pagination[xui-style="4"] .next,
  .xui-pagination[xui-style="4"] .pages .counter,
  .xui-pagination[xui-style="5"] .prev,
  .xui-pagination[xui-style="5"] .next,
  .xui-pagination[xui-style="5"] .pages .counter {
    width: 32px;
    height: 32px;
    padding: 0;
    justify-content: center;
    align-items: center;
  }

  .xui-pagination[xui-style="3"] .pages .counter,
  .xui-pagination[xui-style="4"] .pages .counter,
  .xui-pagination[xui-style="5"] .pages .counter {
    display: inline-flex;
  }

  .xui-form .mega-input {
    width: 40px;
    height: 40px;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
  }
}

@media screen and (min-width: 820px) and (max-width: 1024px) {

  .xui-navbar[menu="2"] .links .main,
  .xui-navbar[xui-menu="2"] .links .main {
    padding-left: 40px;
    padding-right: 40px;
  }

  .xui-navbar[menu="2"] .menu.animate,
  .xui-navbar[xui-menu="2"] .menu.animate {
    top: 40px;
    right: 40px;
  }
}

@media screen and (min-width: 1025px) {

  .xui-navbar[layout="1"] .links .main,
  .xui-navbar[layout="2"] .links .main,
  .xui-navbar[xui-layout="1"] .links .main,
  .xui-navbar[xui-style="2"] .links .main {
    background-color: transparent;
  }
}



/* Must be at the bottom to have higher control */

/* Min/Max Widths & Heights */
.xui-min-w-50 {
  min-width: 50px !important;
}

.xui-min-w-100 {
  min-width: 100px !important;
}

.xui-min-w-150 {
  min-width: 150px !important;
}

.xui-min-w-200 {
  min-width: 200px !important;
}

.xui-min-w-250 {
  min-width: 250px !important;
}

.xui-min-w-300 {
  min-width: 300px !important;
}

.xui-min-w-350 {
  min-width: 350px !important;
}

.xui-min-w-400 {
  min-width: 400px !important;
}

.xui-min-w-450 {
  min-width: 450px !important;
}

.xui-min-w-500 {
  min-width: 500px !important;
}

.xui-min-w-550 {
  min-width: 550px !important;
}

.xui-min-w-600 {
  min-width: 600px !important;
}

.xui-min-w-650 {
  min-width: 650px !important;
}

.xui-min-w-700 {
  min-width: 700px !important;
}

.xui-min-w-750 {
  min-width: 750px !important;
}

.xui-min-w-800 {
  min-width: 800px !important;
}

.xui-min-w-850 {
  min-width: 850px !important;
}

.xui-min-w-900 {
  min-width: 900px !important;
}

.xui-min-w-950 {
  min-width: 950px !important;
}

.xui-min-w-1000 {
  min-width: 1000px !important;
}

.xui-min-h-50 {
  min-height: 50px !important;
}

.xui-min-h-100 {
  min-height: 100px !important;
}

.xui-min-h-150 {
  min-height: 150px !important;
}

.xui-min-h-200 {
  min-height: 200px !important;
}

.xui-min-h-250 {
  min-height: 250px !important;
}

.xui-min-h-300 {
  min-height: 300px !important;
}

.xui-min-h-350 {
  min-height: 350px !important;
}

.xui-min-h-400 {
  min-height: 400px !important;
}

.xui-min-h-450 {
  min-height: 450px !important;
}

.xui-min-h-500 {
  min-height: 500px !important;
}

.xui-min-h-550 {
  min-height: 550px !important;
}

.xui-min-h-600 {
  min-height: 600px !important;
}

.xui-min-h-650 {
  min-height: 650px !important;
}

.xui-min-h-700 {
  min-height: 700px !important;
}

.xui-min-h-750 {
  min-height: 750px !important;
}

.xui-min-h-800 {
  min-height: 800px !important;
}

.xui-min-h-850 {
  min-height: 850px !important;
}

.xui-min-h-900 {
  min-height: 900px !important;
}

.xui-min-h-950 {
  min-height: 950px !important;
}

.xui-min-h-1000 {
  min-height: 1000px !important;
}

.xui-max-w-50 {
  max-width: 50px !important;
}

.xui-max-w-100 {
  max-width: 100px !important;
}

.xui-max-w-150 {
  max-width: 150px !important;
}

.xui-max-w-200 {
  max-width: 200px !important;
}

.xui-max-w-250 {
  max-width: 250px !important;
}

.xui-max-w-300 {
  max-width: 300px !important;
}

.xui-max-w-350 {
  max-width: 350px !important;
}

.xui-max-w-400 {
  max-width: 400px !important;
}

.xui-max-w-450 {
  max-width: 450px !important;
}

.xui-max-w-500 {
  max-width: 500px !important;
}

.xui-max-w-550 {
  max-width: 550px !important;
}

.xui-max-w-600 {
  max-width: 600px !important;
}

.xui-max-w-650 {
  max-width: 650px !important;
}

.xui-max-w-700 {
  max-width: 700px !important;
}

.xui-max-w-750 {
  max-width: 750px !important;
}

.xui-max-w-800 {
  max-width: 800px !important;
}

.xui-max-w-850 {
  max-width: 850px !important;
}

.xui-max-w-900 {
  max-width: 900px !important;
}

.xui-max-w-950 {
  max-width: 950px !important;
}

.xui-max-w-1000 {
  max-width: 1000px !important;
}

.xui-max-w-1100 {
  max-width: 1100px !important;
}

.xui-max-w-1200 {
  max-width: 1200px !important;
}

.xui-max-w-1300 {
  max-width: 1300px !important;
}

.xui-max-w-1400 {
  max-width: 1400px !important;
}

.xui-max-w-1500 {
  max-width: 1500px !important;
}

.xui-max-w-1600 {
  max-width: 1600px !important;
}

.xui-max-w-1700 {
  max-width: 1700px !important;
}

.xui-max-w-1800 {
  max-width: 1800px !important;
}

.xui-max-w-1900 {
  max-width: 1900px !important;
}

.xui-max-w-2000 {
  max-width: 2000px !important;
}

.xui-max-h-50 {
  max-height: 50px !important;
}

.xui-max-h-100 {
  max-height: 100px !important;
}

.xui-max-h-150 {
  max-height: 150px !important;
}

.xui-max-h-200 {
  max-height: 200px !important;
}

.xui-max-h-250 {
  max-height: 250px !important;
}

.xui-max-h-300 {
  max-height: 300px !important;
}

.xui-max-h-350 {
  max-height: 350px !important;
}

.xui-max-h-400 {
  max-height: 400px !important;
}

.xui-max-h-450 {
  max-height: 450px !important;
}

.xui-max-h-500 {
  max-height: 500px !important;
}

.xui-max-h-550 {
  max-height: 550px !important;
}

.xui-max-h-600 {
  max-height: 600px !important;
}

.xui-max-h-650 {
  max-height: 650px !important;
}

.xui-max-h-700 {
  max-height: 700px !important;
}

.xui-max-h-750 {
  max-height: 750px !important;
}

.xui-max-h-800 {
  max-height: 800px !important;
}

.xui-max-h-850 {
  max-height: 850px !important;
}

.xui-max-h-900 {
  max-height: 900px !important;
}

.xui-max-h-950 {
  max-height: 950px !important;
}

.xui-max-h-1000 {
  max-height: 1000px !important;
}



/*Fonts*/
.xui-font-w-normal {
  font-weight: normal;
}

.xui-font-w-bold {
  font-weight: bold;
}

.xui-font-w-bolder {
  font-weight: bolder;
}

.xui-font-w-lighter {
  font-weight: lighter;
}

.xui-font-w-initial {
  font-weight: initial;
}

.xui-font-w-inherit {
  font-weight: inherit;
}

.xui-font-w-100 {
  font-weight: 100;
}

.xui-font-w-200 {
  font-weight: 200;
}

.xui-font-w-300 {
  font-weight: 300;
}

.xui-font-w-400 {
  font-weight: 400;
}

.xui-font-w-500 {
  font-weight: 500;
}

.xui-font-w-600 {
  font-weight: 600;
}

.xui-font-w-700 {
  font-weight: 700;
}

.xui-font-w-800 {
  font-weight: 800;
}

.xui-font-w-900 {
  font-weight: 900;
}

.xui-font-sz-xx-small {
  font-size: xx-small;
}

.xui-font-sz-x-small {
  font-size: x-small;
}

.xui-font-sz-small {
  font-size: small;
}

.xui-font-sz-x-large {
  font-size: x-large;
}

.xui-font-sz-xx-large {
  font-size: xx-large;
}

.xui-font-sz-smaller {
  font-size: smaller;
}

.xui-font-sz-larger {
  font-size: larger;
}

.xui-font-normal,
.xui-font-style-normal {
  font-style: normal;
}

.xui-font-oblique,
.xui-font-style-oblique {
  font-style: oblique;
}

.xui-font-italic,
.xui-font-style-italic {
  font-style: italic;
}

.xui-font-initial,
.xui-font-style-initial {
  font-style: initial;
}

.xui-font-inherit,
.xui-font-style-inherit {
  font-style: inherit;
}

.xui-font-sz-initial {
  font-size: initial;
}

.xui-font-sz-inherit {
  font-size: inherit;
}

.xui-font-sz-50 {
  font-size: 50%;
}

.xui-font-sz-55 {
  font-size: 55%;
}

.xui-font-sz-60 {
  font-size: 60%;
}

.xui-font-sz-65 {
  font-size: 65%;
}

.xui-font-sz-70 {
  font-size: 70%;
}

.xui-font-sz-75 {
  font-size: 75%;
}

.xui-font-sz-80 {
  font-size: 80%;
}

.xui-font-sz-85 {
  font-size: 85%;
}

.xui-font-sz-90 {
  font-size: 90%;
}

.xui-font-sz-95 {
  font-size: 95%;
}

.xui-font-sz-100 {
  font-size: 100%;
}

.xui-font-sz-105 {
  font-size: 105%;
}

.xui-font-sz-110 {
  font-size: 110%;
}

.xui-font-sz-115 {
  font-size: 115%;
}

.xui-font-sz-120 {
  font-size: 120%;
}

.xui-font-sz-125 {
  font-size: 125%;
}

.xui-font-sz-130 {
  font-size: 130%;
}

.xui-font-sz-135 {
  font-size: 135%;
}

.xui-font-sz-140 {
  font-size: 140%;
}

.xui-font-sz-145 {
  font-size: 145%;
}

.xui-font-sz-150 {
  font-size: 150%;
}

.xui-font-sz-155 {
  font-size: 155%;
}

.xui-font-sz-160 {
  font-size: 160%;
}

.xui-font-sz-165 {
  font-size: 165%;
}

.xui-font-sz-170 {
  font-size: 170%;
}

.xui-font-sz-175 {
  font-size: 175%;
}

.xui-font-sz-180 {
  font-size: 180%;
}

.xui-font-sz-185 {
  font-size: 185%;
}

.xui-font-sz-190 {
  font-size: 190%;
}

.xui-font-sz-195 {
  font-size: 195%;
}

.xui-font-sz-200 {
  font-size: 200%;
}

.xui-font-sz-205 {
  font-size: 205%;
}

.xui-font-sz-210 {
  font-size: 210%;
}

.xui-font-sz-215 {
  font-size: 215%;
}

.xui-font-sz-220 {
  font-size: 220%;
}

.xui-font-sz-225 {
  font-size: 225%;
}

.xui-font-sz-230 {
  font-size: 230%;
}

.xui-font-sz-235 {
  font-size: 235%;
}

.xui-font-sz-240 {
  font-size: 240%;
}

.xui-font-sz-245 {
  font-size: 245%;
}

.xui-font-sz-250 {
  font-size: 250%;
}

.xui-font-sz-300 {
  font-size: 300%;
}

.xui-font-sz-350 {
  font-size: 350%;
}

.xui-font-sz-400 {
  font-size: 400%;
}

.xui-font-sz-450 {
  font-size: 450%;
}

.xui-font-sz-500 {
  font-size: 500%;
}

.xui-font-sz-550 {
  font-size: 550%;
}

.xui-font-sz-600 {
  font-size: 600%;
}

.xui-font-sz-650 {
  font-size: 650%;
}

.xui-font-sz-700 {
  font-size: 700%;
}

.xui-font-sz-750 {
  font-size: 750%;
}

.xui-font-sz-800 {
  font-size: 800%;
}

.xui-font-sz-850 {
  font-size: 850%;
}

.xui-font-sz-900 {
  font-size: 900%;
}

.xui-font-sz-950 {
  font-size: 950%;
}

.xui-font-sz-1000 {
  font-size: 1000%;
}



/*Texts*/
.xui-text-lowercase,
.xui-text-tr-lowercase {
  text-transform: lowercase;
}

.xui-text-capitalize,
.xui-text-tr-capitalize {
  text-transform: capitalize;
}

.xui-text-uppercase,
.xui-text-tr-uppercase {
  text-transform: uppercase;
}

.xui-text-tr-initial {
  text-transform: initial;
}

.xui-text-tr-inherit {
  text-transform: inherit;
}

.xui-text-tr-none {
  text-transform: none;
}

.xui-text-left,
.xui-text-al-left {
  text-align: left;
}

.xui-text-center,
.xui-text-al-center {
  text-align: center;
}

.xui-text-right,
.xui-text-al-right {
  text-align: right;
}

.xui-text-justify,
.xui-text-al-justify {
  text-align: justify;
}

.xui-text-al-inherit {
  text-align: inherit;
}

.xui-text-al-initial {
  text-align: initial;
}


/*Opacity*/
.xui-opacity-1 {
  opacity: .1;
}

.xui-opacity-2 {
  opacity: .2;
}

.xui-opacity-3 {
  opacity: .3;
}

.xui-opacity-4 {
  opacity: .4;
}

.xui-opacity-5 {
  opacity: .5;
}

.xui-opacity-6 {
  opacity: .6;
}

.xui-opacity-7 {
  opacity: .7;
}

.xui-opacity-8 {
  opacity: .8;
}

.xui-opacity-9 {
  opacity: .9;
}

.xui-aos-animate.xui-opacity-1 {
  opacity: .1 !important;
}

.xui-aos-animate.xui-opacity-2 {
  opacity: .2 !important;
}

.xui-aos-animate.xui-opacity-3 {
  opacity: .3 !important;
}

.xui-aos-animate.xui-opacity-4 {
  opacity: .4 !important;
}

.xui-aos-animate.xui-opacity-5 {
  opacity: .5 !important;
}

.xui-aos-animate.xui-opacity-6 {
  opacity: .6 !important;
}

.xui-aos-animate.xui-opacity-7 {
  opacity: .7 !important;
}

.xui-aos-animate.xui-opacity-8 {
  opacity: .8 !important;
}

.xui-aos-animate.xui-opacity-9 {
  opacity: .9 !important;
}




/*Box Shadows*/
.xui-box-shadow,
.xui-box-shadow-1 {
  -moz-box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, .05);
  -webkit-box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, .05);
  box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, .05);
}

.xui-box-shadow-2 {
  -moz-box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, .075);
  -webkit-box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, .075);
  box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, .075);
}

.xui-box-shadow-3 {
  -moz-box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, .1);
  -webkit-box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, .1);
  box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, .1);
}



/*Width & Height*/
.xui-w-auto {
  width: auto;
}

.xui-w-inherit {
  width: inherit;
}

.xui-w-initial {
  width: initial;
}

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

.xui-w-min-content {
  width: min-content;
}

.xui-w-fit-content {
  width: fit-content;
}

.xui-h-auto {
  height: auto;
}

.xui-h-inherit {
  height: inherit;
}

.xui-h-initial {
  height: initial;
}

.xui-h-max-content {
  height: max-content;
}

.xui-h-min-content {
  height: min-content;
}

.xui-h-fit-content {
  height: fit-content;
}

.xui-w-5 {
  width: 5px;
}

.xui-w-10 {
  width: 10px;
}

.xui-w-15 {
  width: 15px;
}

.xui-w-20 {
  width: 20px;
}

.xui-w-25 {
  width: 25px;
}

.xui-w-30 {
  width: 30px;
}

.xui-w-35 {
  width: 35px;
}

.xui-w-40 {
  width: 40px;
}

.xui-w-45 {
  width: 45px;
}

.xui-w-50 {
  width: 50px;
}

.xui-w-55 {
  width: 55px;
}

.xui-w-60 {
  width: 60px;
}

.xui-w-65 {
  width: 65px;
}

.xui-w-70 {
  width: 70px;
}

.xui-w-75 {
  width: 75px;
}

.xui-w-80 {
  width: 80px;
}

.xui-w-85 {
  width: 85px;
}

.xui-w-90 {
  width: 90px;
}

.xui-w-95 {
  width: 95px;
}

.xui-w-100 {
  width: 100px;
}

.xui-w-150 {
  width: 150px;
}

.xui-w-200 {
  width: 200px;
}

.xui-w-250 {
  width: 250px;
}

.xui-w-300 {
  width: 300px;
}

.xui-w-350 {
  width: 350px;
}

.xui-w-400 {
  width: 400px;
}

.xui-w-450 {
  width: 450px;
}

.xui-w-500 {
  width: 500px;
}

.xui-w-600 {
  width: 600px;
}

.xui-w-650 {
  width: 650px;
}

.xui-w-700 {
  width: 700px;
}

.xui-w-750 {
  width: 750px;
}

.xui-w-800 {
  width: 800px;
}

.xui-w-850 {
  width: 850px;
}

.xui-w-900 {
  width: 900px;
}

.xui-w-950 {
  width: 950px;
}

.xui-w-1000 {
  width: 1000px;
}

.xui-w-fluid-5 {
  width: 5%;
}

.xui-w-fluid-10 {
  width: 10%;
}

.xui-w-fluid-15 {
  width: 15%;
}

.xui-w-fluid-20 {
  width: 20%;
}

.xui-w-fluid-25 {
  width: 25%;
}

.xui-w-fluid-30 {
  width: 30%;
}

.xui-w-fluid-35 {
  width: 35%;
}

.xui-w-fluid-40 {
  width: 40%;
}

.xui-w-fluid-45 {
  width: 45%;
}

.xui-w-fluid-50 {
  width: 50%;
}

.xui-w-fluid-55 {
  width: 55%;
}

.xui-w-fluid-60 {
  width: 60%;
}

.xui-w-fluid-65 {
  width: 65%;
}

.xui-w-fluid-70 {
  width: 70%;
}

.xui-w-fluid-75 {
  width: 75%;
}

.xui-w-fluid-80 {
  width: 80%;
}

.xui-w-fluid-85 {
  width: 85%;
}

.xui-w-fluid-90 {
  width: 90%;
}

.xui-w-fluid-95 {
  width: 95%;
}

.xui-w-fluid-100 {
  width: 100%;
}

.xui-h-5 {
  height: 5px;
}

.xui-h-10 {
  height: 10px;
}

.xui-h-15 {
  height: 15px;
}

.xui-h-20 {
  height: 20px;
}

.xui-h-25 {
  height: 25px;
}

.xui-h-30 {
  height: 30px;
}

.xui-h-35 {
  height: 35px;
}

.xui-h-40 {
  height: 40px;
}

.xui-h-45 {
  height: 45px;
}

.xui-h-50 {
  height: 50px;
}

.xui-h-55 {
  height: 55px;
}

.xui-h-60 {
  height: 60px;
}

.xui-h-65 {
  height: 65px;
}

.xui-h-70 {
  height: 70px;
}

.xui-h-75 {
  height: 75px;
}

.xui-h-80 {
  height: 80px;
}

.xui-h-85 {
  height: 85px;
}

.xui-h-90 {
  height: 90px;
}

.xui-h-95 {
  height: 95px;
}

.xui-h-100 {
  height: 100px;
}

.xui-h-150 {
  height: 150px;
}

.xui-h-200 {
  height: 200px;
}

.xui-h-250 {
  height: 250px;
}

.xui-h-300 {
  height: 300px;
}

.xui-h-350 {
  height: 350px;
}

.xui-h-400 {
  height: 400px;
}

.xui-h-450 {
  height: 450px;
}

.xui-h-500 {
  height: 500px;
}

.xui-h-600 {
  height: 600px;
}

.xui-h-650 {
  height: 650px;
}

.xui-h-700 {
  height: 700px;
}

.xui-h-750 {
  height: 750px;
}

.xui-h-800 {
  height: 800px;
}

.xui-h-850 {
  height: 850px;
}

.xui-h-900 {
  height: 900px;
}

.xui-h-950 {
  height: 950px;
}

.xui-h-1000 {
  height: 1000px;
}

.xui-h-full,
.xui-h-100vh {
  height: 100vh;
  height: 100dvh;
}

.xui-h-fluid-5 {
  height: 5%;
}

.xui-h-fluid-10 {
  height: 10%;
}

.xui-h-fluid-15 {
  height: 15%;
}

.xui-h-fluid-20 {
  height: 20%;
}

.xui-h-fluid-25 {
  height: 25%;
}

.xui-h-fluid-30 {
  height: 30%;
}

.xui-h-fluid-35 {
  height: 35%;
}

.xui-h-fluid-40 {
  height: 40%;
}

.xui-h-fluid-45 {
  height: 45%;
}

.xui-h-fluid-50 {
  height: 50%;
}

.xui-h-fluid-55 {
  height: 55%;
}

.xui-h-fluid-60 {
  height: 60%;
}

.xui-h-fluid-65 {
  height: 65%;
}

.xui-h-fluid-70 {
  height: 70%;
}

.xui-h-fluid-75 {
  height: 75%;
}

.xui-h-fluid-80 {
  height: 80%;
}

.xui-h-fluid-85 {
  height: 85%;
}

.xui-h-fluid-90 {
  height: 90%;
}

.xui-h-fluid-95 {
  height: 95%;
}

.xui-h-fluid-100 {
  height: 100%;
}



/*Containers Spacing*/
.xui-container {
  width: 100%;
  /* Ensure it takes full width on small screens */
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

.xui-left-fluid {
  left: 20px;
}

.xui-right-fluid {
  right: 20px;
}




/* Loaders */
.xui-loader {
  overflow-y: auto;
  justify-content: center;
  align-items: center;
  z-index: 2247483645 !important;
  padding: 20px;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: var(--white);
  color: var(--white);
}




/*Line Heights & Letter Spacings*/
.xui-line-height-half {
  line-height: .5rem;
}

.xui-line-height-1 {
  line-height: 1rem;
}

.xui-line-height-1-half {
  line-height: 1.5rem;
}

.xui-line-height-2 {
  line-height: 2rem;
}

.xui-line-height-2-half {
  line-height: 2.5rem;
}

.xui-line-height-3 {
  line-height: 3rem;
}

.xui-line-height-3-half {
  line-height: 3.5rem;
}

.xui-line-height-4 {
  line-height: 4rem;
}

.xui-line-height-4-half {
  line-height: 4.5rem;
}

.xui-line-height-5 {
  line-height: 5rem;
}

.xui-line-height-5-half {
  line-height: 5.5rem;
}

.xui-line-height-6 {
  line-height: 6rem;
}

.xui-line-height-6-half {
  line-height: 6.5rem;
}

.xui-line-height-7 {
  line-height: 7rem;
}

.xui-line-height-7-half {
  line-height: 7.5rem;
}

.xui-line-height-8 {
  line-height: 8rem;
}

.xui-line-height-8-half {
  line-height: 8.5rem;
}

.xui-line-height-9 {
  line-height: 9rem;
}

.xui-line-height-9-half {
  line-height: 9.5rem;
}

.xui-line-height-10 {
  line-height: 10rem;
}

.xui-line-height-normal {
  line-height: normal;
}

.xui-line-height-inherit {
  line-height: inherit;
}

.xui-line-height-initial {
  line-height: initial;
}

.xui-letter-spacing-half {
  letter-spacing: .5px;
}

.xui-letter-spacing-1 {
  letter-spacing: 1px;
}

.xui-letter-spacing-1-half {
  letter-spacing: .15px;
}

.xui-letter-spacing-2 {
  letter-spacing: 2px;
}

.xui-letter-spacing-2-half {
  letter-spacing: 2.5px;
}

.xui-letter-spacing-3 {
  letter-spacing: 3px;
}

.xui-letter-spacing-3-half {
  letter-spacing: 3.5px;
}

.xui-letter-spacing-4 {
  letter-spacing: 4px;
}

.xui-letter-spacing-4-half {
  letter-spacing: 4.5px;
}

.xui-letter-spacing-5 {
  letter-spacing: 5px;
}

.xui-letter-spacing-normal {
  letter-spacing: normal;
}

.xui-letter-spacing-inherit {
  letter-spacing: inherit;
}

.xui-letter-spacing-initial {
  letter-spacing: initial;
}






/*Letter Spacings*/
.xui-space-1 {
  letter-spacing: .1em;
}

.xui-space-2 {
  letter-spacing: .2em;
}

.xui-space-3 {
  letter-spacing: .3em;
}

.xui-space-4 {
  letter-spacing: .4em;
}

.xui-space-5 {
  letter-spacing: .5em;
}



/*Borders*/
.xui-bdr-rad-initial {
  border-radius: initial;
}

.xui-bdr-rad-inherit {
  border-radius: inherit;
}

.xui-bdr-rad-none {
  border-radius: 0;
}

.xui-bdr-rad-half {
  border-radius: .5rem;
}

.xui-bdr-rad-1 {
  border-radius: 1rem;
}

.xui-bdr-rad-1-half {
  border-radius: 1.5rem;
}

.xui-bdr-rad-2 {
  border-radius: 2rem;
}

.xui-bdr-rad-2-half {
  border-radius: 2.5rem;
}

.xui-bdr-rad-3 {
  border-radius: 3rem;
}

.xui-bdr-rad-3-half {
  border-radius: 3.5rem;
}

.xui-bdr-rad-4 {
  border-radius: 4rem;
}

.xui-bdr-rad-4-half {
  border-radius: 4.5rem;
}

.xui-bdr-rad-5 {
  border-radius: 5rem;
}

.xui-bdr-rad-5-half {
  border-radius: 5.5rem;
}

.xui-bdr-rad-6 {
  border-radius: 6rem;
}

.xui-bdr-rad-6-half {
  border-radius: 6.5rem;
}

.xui-bdr-rad-7 {
  border-radius: 7rem;
}

.xui-bdr-rad-7-half {
  border-radius: 7.5rem;
}

.xui-bdr-rad-8 {
  border-radius: 8rem;
}

.xui-bdr-rad-8-half {
  border-radius: 8.5rem;
}

.xui-bdr-rad-9 {
  border-radius: 9rem;
}

.xui-bdr-rad-9-half {
  border-radius: 9.5rem;
}

.xui-bdr-rad-10 {
  border-radius: 10rem;
}

.xui-bdr-rad-circle,
.xui-bdr-rad-round {
  border-radius: 50%;
}

.xui-bdr-w-medium,
.xui-bdr-width-medium {
  border-width: medium;
}

.xui-bdr-w-thin,
.xui-bdr-width-thin {
  border-width: thin;
}

.xui-bdr-w-thick,
.xui-bdr-width-thick {
  border-width: thick;
}

.xui-bdr-w-initial,
.xui-bdr-width-initial {
  border-width: initial;
}

.xui-bdr-w-inherit,
.xui-bdr-width-inherit {
  border-width: inherit;
}

.xui-bdr-w-1,
.xui-bdr-width-1 {
  border-width: 1px !important;
}

.xui-bdr-w-2,
.xui-bdr-width-2 {
  border-width: 2px !important;
}

.xui-bdr-w-3,
.xui-bdr-width-3 {
  border-width: 3px !important;
}

.xui-bdr-w-4,
.xui-bdr-width-4 {
  border-width: 4px !important;
}

.xui-bdr-w-5,
.xui-bdr-width-5 {
  border-width: 5px !important;
}

.xui-bdr-w-6,
.xui-bdr-width-6 {
  border-width: 6px !important;
}

.xui-bdr-w-7,
.xui-bdr-width-7 {
  border-width: 7px !important;
}

.xui-bdr-w-8,
.xui-bdr-width-8 {
  border-width: 8px !important;
}

.xui-bdr-w-9,
.xui-bdr-width-9 {
  border-width: 9px !important;
}

.xui-bdr-w-10,
.xui-bdr-width-10 {
  border-width: 10px !important;
}

.xui-bdr-w-11,
.xui-bdr-width-11 {
  border-width: 11px !important;
}

.xui-bdr-w-12,
.xui-bdr-width-12 {
  border-width: 12px !important;
}

.xui-bdr-w-13,
.xui-bdr-width-13 {
  border-width: 13px !important;
}

.xui-bdr-w-14,
.xui-bdr-width-14 {
  border-width: 14px !important;
}

.xui-bdr-w-15,
.xui-bdr-width-15 {
  border-width: 15px !important;
}

.xui-bdr-w-16,
.xui-bdr-width-16 {
  border-width: 16px !important;
}

.xui-bdr-w-17,
.xui-bdr-width-17 {
  border-width: 17px !important;
}

.xui-bdr-w-18,
.xui-bdr-width-18 {
  border-width: 18px !important;
}

.xui-bdr-w-19,
.xui-bdr-width-19 {
  border-width: 19px !important;
}

.xui-bdr-w-20,
.xui-bdr-width-20 {
  border-width: 20px !important;
}

.xui-bdr-s-none,
.xui-bdr-style-none {
  border-style: none !important;
}

.xui-bdr-s-hidden,
.xui-bdr-style-hidden {
  border-style: hidden !important;
}

.xui-bdr-s-dotted,
.xui-bdr-style-dotted {
  border-style: dotted !important;
}

.xui-bdr-s-dashed,
.xui-bdr-style-dashed {
  border-style: dashed !important;
}

.xui-bdr-s-solid,
.xui-bdr-style-solid {
  border-style: solid !important;
}

.xui-bdr-s-double,
.xui-bdr-style-double {
  border-style: double !important;
}

.xui-bdr-s-groove,
.xui-bdr-style-groove {
  border-style: groove !important;
}

.xui-bdr-s-ridge,
.xui-bdr-style-ridge {
  border-style: ridge !important;
}

.xui-bdr-s-inset,
.xui-bdr-style-inset {
  border-style: inset !important;
}

.xui-bdr-s-outset,
.xui-bdr-style-outset {
  border-style: outset !important;
}

.xui-bdr-s-initial,
.xui-bdr-style-initial {
  border-style: initial !important;
}

.xui-bdr-s-inherit,
.xui-bdr-style-inherit {
  border-style: inherit !important;
}

.xui-bdr-initial {
  border-color: initial !important;
}

.xui-bdr-inherit {
  border-color: inherit !important;
}

.xui-bdr-transparent {
  border-color: transparent !important;
}

.xui-bdr-fade {
  border-color: #E5E5E5 !important;
}

.xui-bdr-white {
  border-color: #ffffff !important;
}

.xui-bdr-success {
  border-color: #2e7029 !important;
}

.xui-bdr-warning {
  border-color: #978602 !important;
}

.xui-bdr-danger {
  border-color: var(--error-500) !important;
}

.xui-bdr-black {
  border-color: #000000 !important;
}

.xui-bdr-xnyder-black {
  border-color: #01010E !important;
}

.xui-bdr-blue {
  border-color: var(--blue) !important;
}

.xui-bdr-light-blue,
.xui-bdr-light-blue-1 {
  border-color: #EAEBFB !important;
}

.xui-bdr-light-blue-2 {
  border-color: #D4D7F7 !important;
}

.xui-bdr-light-blue-3 {
  border-color: #BFC4F2 !important;
}

.xui-bdr-red {
  border-color: var(--red) !important;
}

.xui-bdr-light-red,
.xui-bdr-light-red-1 {
  border-color: #FEE6EA !important;
}

.xui-bdr-light-red-2 {
  border-color: #FECDD4 !important;
}

.xui-bdr-light-red-3 {
  border-color: #FDB4BF !important;
}

.xui-bdr-green {
  border-color: var(--green) !important;
}

.xui-bdr-light-green,
.xui-bdr-light-green-1 {
  border-color: #E8FCF7 !important;
}

.xui-bdr-light-green-2 {
  border-color: #D2F9EF !important;
}

.xui-bdr-light-green-3 {
  border-color: #BBF6E6 !important;
}

.xui-bdr-light-1 {
  border-color: #f9f9f9 !important;
}

.xui-bdr-light-2 {
  border-color: #f7f7f7 !important;
}

.xui-bdr-light-3 {
  border-color: #f4f4f4 !important;
}

.xui-bdr-light {
  border-color: #f1f1f1 !important;
}

.xui-bdr-yellow {
  border-color: var(--yellow) !important;
}

.xui-bdr-instagram {
  border-color: #E1306C !important;
}

.xui-bdr-twitter {
  border-color: #1DA1F2 !important;
}

.xui-bdr-facebook {
  border-color: #4267B2 !important;
}

.xui-bdr-youtube {
  border-color: #ff0000 !important;
}

.xui-bdr-pinterest {
  border-color: #bd081c !important;
}

.xui-bdr-linkedin {
  border-color: #007bb5 !important;
}

.xui-bdr-snapchat {
  border-color: #fffc00 !important;
}

.xui-bdr-whatsapp {
  border-color: #25D366 !important;
}

.xui-bdr-tumblr {
  border-color: #35465d !important;
}

.xui-bdr-reddit {
  border-color: #ff4500 !important;
}

.xui-bdr-yelp {
  border-color: #d32323 !important;
}

.xui-bdr-spotify {
  border-color: #1ed760 !important;
}

.xui-bdr-amazon {
  border-color: #ff9900 !important;
}

.xui-bdr-foursquare {
  border-color: #f94877 !important;
}

.xui-bdr-medium {
  border-color: #12100e !important;
}

.xui-bdr-vimeo {
  border-color: #1ab7ea !important;
}

.xui-bdr-skype {
  border-color: #00aff0 !important;
}

.xui-bdr-android {
  border-color: #a4c639 !important;
}

.xui-bdr-quora {
  border-color: #aa2200 !important;
}

.xui-bdr-dribbble {
  border-color: #ea4c89 !important;
}

.xui-bdr-slack {
  border-color: #4a154b !important;
}

.xui-bdr-flickr {
  border-color: #f40083 !important;
}

.xui-bdr-yahoo {
  border-color: #6001d2 !important;
}

.xui-bdr-twitch {
  border-color: #9146ff !important;
}

.xui-bdr-soundcloud {
  border-color: #ff5500 !important;
}

.xui-bdr-deviant-art {
  border-color: #05cc47 !important;
}

.xui-bdr-steam {
  border-color: #171a21 !important;
}

.xui-bdr-telegram {
  border-color: #0088cc !important;
}




/* Stroke Texts */
.xui-text-stroke-w-half {
  -webkit-text-stroke-width: .5px;
}

.xui-text-stroke-w-1 {
  -webkit-text-stroke-width: 1px;
}

.xui-text-stroke-w-1-half {
  -webkit-text-stroke-width: 1.5px;
}

.xui-text-stroke-w-2 {
  -webkit-text-stroke-width: 2px;
}

.xui-text-stroke-w-2-half {
  -webkit-text-stroke-width: 2.5px;
}

.xui-text-stroke-w-3 {
  -webkit-text-stroke-width: 3px;
}

.xui-text-stroke-w-3-half {
  -webkit-text-stroke-width: 3.5px;
}

.xui-text-stroke-w-4 {
  -webkit-text-stroke-width: 4px;
}

.xui-text-stroke-w-4-half {
  -webkit-text-stroke-width: 4.5px;
}

.xui-text-stroke-w-5 {
  -webkit-text-stroke-width: 5px;
}

.xui-text-stroke-initial,
.xui-text-stroke-inherit,
.xui-text-stroke-white,
.xui-text-stroke-white-switch,
.xui-text-stroke-black,
.xui-text-stroke-black-switch,
.xui-text-stroke-naija,
.xui-text-stroke-blue,
.xui-text-stroke-dark-blue,
.xui-text-stroke-red,
.xui-text-stroke-green,
.xui-text-stroke-xnyder-black,
.xui-text-stroke-success,
.xui-text-stroke-warning,
.xui-text-stroke-danger,
.xui-text-stroke-fade {
  -webkit-text-fill-color: transparent;
}

.xui-text-stroke-initial {
  -webkit-text-stroke-color: initial;
}

.xui-text-stroke-inherit {
  -webkit-text-stroke-color: inherit;
}

.xui-text-stroke-white,
.xui-text-stroke-white-switch {
  -webkit-text-stroke-color: #FFFFFF;
}

.xui-text-stroke-black,
.xui-text-stroke-black-switch {
  -webkit-text-stroke-color: #000000;
}

.xui-text-stroke-naija {
  -webkit-text-stroke-color: #008753;
}

.xui-text-stroke-blue {
  -webkit-text-stroke-color: var(--blue);
}

.xui-text-stroke-dark-blue {
  -webkit-text-stroke-color: #1c3357;
}

.xui-text-stroke-red {
  -webkit-text-stroke-color: var(--red);
}

.xui-text-stroke-green {
  -webkit-text-stroke-color: var(--green);
}

.xui-text-stroke-xnyder-black {
  -webkit-text-stroke-color: #01010E;
}

.xui-text-stroke-success {
  -webkit-text-stroke-color: #2e7029;
}

.xui-text-stroke-warning {
  -webkit-text-stroke-color: #978602;
}

.xui-text-stroke-danger {
  -webkit-text-stroke-color: var(--error-500);
}

.xui-text-stroke-fade {
  -webkit-text-stroke-color: #777777;
}



/*Z Indexes*/
.xui-z-index-auto {
  z-index: auto;
}

.xui-z-index-initial {
  z-index: initial;
}

.xui-z-index-inherit {
  z-index: inherit;
}

.xui-z-index-1 {
  z-index: 1;
}

.xui-z-index-1 {
  z-index: 1;
}

.xui-z-index-2 {
  z-index: 2;
}

.xui-z-index-3 {
  z-index: 3;
}

.xui-z-index-4 {
  z-index: 4;
}

.xui-z-index-5 {
  z-index: 5;
}

.xui-z-index-6 {
  z-index: 6;
}

.xui-z-index-7 {
  z-index: 7;
}

.xui-z-index-8 {
  z-index: 8;
}

.xui-z-index-9 {
  z-index: 9;
}

.xui-z-index-10 {
  z-index: 10;
}

.xui-z-index--1 {
  z-index: -1;
}

.xui-z-index--1 {
  z-index: -1;
}

.xui-z-index--2 {
  z-index: -2;
}

.xui-z-index--3 {
  z-index: -3;
}

.xui-z-index--4 {
  z-index: -4;
}

.xui-z-index--5 {
  z-index: -5;
}

.xui-z-index--6 {
  z-index: -6;
}

.xui-z-index--7 {
  z-index: -7;
}

.xui-z-index--8 {
  z-index: -8;
}

.xui-z-index--9 {
  z-index: -9;
}

.xui-z-index--10 {
  z-index: -10;
}



/*Background Colors*/
.xui-bg-white,
.xui-bg-white-switch {
  background-color: #ffffff;
}

.xui-bg-success {
  background-color: #2e7029;
}

.xui-bg-warning {
  background-color: #978602;
}

.xui-bg-danger {
  background-color: var(--error-500);
}

.xui-bg-black,
.xui-bg-black-switch {
  background-color: #000000;
}

.xui-bg-xnyder-black {
  background-color: #01010E;
}

.xui-bg-blue {
  background-color: var(--blue);
}

.xui-bg-light-blue,
.xui-bg-light-blue-1 {
  background-color: #EAEBFB;
}

.xui-bg-light-blue-2 {
  background-color: #D4D7F7;
}

.xui-bg-light-blue-3 {
  background-color: #BFC4F2;
}

.xui-bg-red {
  background-color: var(--red);
}

.xui-bg-light-red,
.xui-bg-light-red-1 {
  background-color: #FEE6EA;
}

.xui-bg-light-red-2 {
  background-color: #FECDD4;
}

.xui-bg-light-red-3 {
  background-color: #FDB4BF;
}

.xui-bg-green {
  background-color: var(--green);
}

.xui-bg-light-green,
.xui-bg-light-green-1 {
  background-color: #ecf9eb;
}

.xui-bg-light-green-2 {
  background-color: #daf3d8;
}

.xui-bg-light-green-3 {
  background-color: #c7edc4;
}

.xui-bg-dark-green {
  background-color: var(--dark-green);
}

.xui-bg-light-1 {
  background-color: #f9f9f9;
}

.xui-bg-light-2 {
  background-color: #f7f7f7;
}

.xui-bg-light-3 {
  background-color: #f4f4f4;
}

.xui-bg-light {
  background-color: #f1f1f1;
}

.xui-bg-yellow {
  background-color: #fff000;
}

.xui-bg-instagram {
  background: rgb(64, 93, 230);
  background: -moz-linear-gradient(174deg, rgba(64, 93, 230, 1) 0%, rgba(91, 81, 216, 1) 12%, rgba(131, 58, 180, 1) 24%, rgba(193, 53, 132, 1) 36%, rgba(225, 48, 108, 1) 48%, rgba(253, 29, 29, 1) 60%, rgba(245, 96, 64, 1) 72%, rgba(247, 119, 55, 1) 84%, rgba(252, 175, 69, 1) 95%, rgba(255, 220, 128, 1) 100%);
  background: -webkit-linear-gradient(174deg, rgba(64, 93, 230, 1) 0%, rgba(91, 81, 216, 1) 12%, rgba(131, 58, 180, 1) 24%, rgba(193, 53, 132, 1) 36%, rgba(225, 48, 108, 1) 48%, rgba(253, 29, 29, 1) 60%, rgba(245, 96, 64, 1) 72%, rgba(247, 119, 55, 1) 84%, rgba(252, 175, 69, 1) 95%, rgba(255, 220, 128, 1) 100%);
  background: linear-gradient(174deg, rgba(64, 93, 230, 1) 0%, rgba(91, 81, 216, 1) 12%, rgba(131, 58, 180, 1) 24%, rgba(193, 53, 132, 1) 36%, rgba(225, 48, 108, 1) 48%, rgba(253, 29, 29, 1) 60%, rgba(245, 96, 64, 1) 72%, rgba(247, 119, 55, 1) 84%, rgba(252, 175, 69, 1) 95%, rgba(255, 220, 128, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#405de6", endColorstr="#ffdc80", GradientType=1);
}

.xui-bg-transparent {
  background-color: transparent;
}

.xui-bg-twitter {
  background-color: #1DA1F2;
}

.xui-bg-facebook {
  background-color: #4267B2;
}

.xui-bg-messenger {
  background: rgb(0, 178, 255);
  background: -moz-linear-gradient(45deg, rgba(0, 178, 255, 1) 0%, rgba(0, 106, 255, 1) 100%);
  background: -webkit-linear-gradient(45deg, rgba(0, 178, 255, 1) 0%, rgba(0, 106, 255, 1) 100%);
  background: linear-gradient(45deg, rgba(0, 178, 255, 1) 0%, rgba(0, 106, 255, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00b2ff", endColorstr="#006aff", GradientType=1);
}

.xui-bg-youtube {
  background-color: #ff0000;
}

.xui-bg-pinterest {
  background-color: #bd081c;
}

.xui-bg-linkedin {
  background-color: #007bb5;
}

.xui-bg-snapchat {
  background-color: #fffc00;
}

.xui-bg-whatsapp {
  background-color: #25D366;
}

.xui-bg-tumblr {
  background-color: #35465d;
}

.xui-bg-reddit {
  background-color: #ff4500;
}

.xui-bg-yelp {
  background-color: #d32323;
}

.xui-bg-spotify {
  background-color: #1ed760;
}

.xui-bg-amazon {
  background-color: #ff9900;
}

.xui-bg-foursquare {
  background-color: #f94877;
}

.xui-bg-medium {
  background-color: #12100e;
}

.xui-bg-vimeo {
  background-color: #1ab7ea;
}

.xui-bg-skype {
  background-color: #00aff0;
}

.xui-bg-android {
  background-color: #a4c639;
}

.xui-bg-quora {
  background-color: #aa2200;
}

.xui-bg-dribbble {
  background-color: #ea4c89;
}

.xui-bg-slack {
  background-color: #4a154b;
}

.xui-bg-flickr {
  background-color: #f40083;
}

.xui-bg-yahoo {
  background-color: #6001d2;
}

.xui-bg-twitch {
  background-color: #9146ff;
}

.xui-bg-soundcloud {
  background-color: #ff5500;
}

.xui-bg-deviant-art {
  background-color: #05cc47;
}

.xui-bg-steam {
  background-color: #171a21;
}

.xui-bg-telegram {
  background-color: #0088cc;
}

.xui-bg-inherit {
  background-color: inherit;
}

.xui-bg-initial {
  background-color: initial;
}





/*Background Images*/
.xui-bg-lazy {
  background-image: url("../assets/images/backgrounds/image-loading.webp");
}

.xui-bg-pattern-white {
  background-color: #FFFFFF;
  color: #000000;
  background-image: url('../assets/images/backgrounds/white-card-pattern.webp');
}

.xui-bg-pattern-blue {
  background-color: var(--blue);
  color: #FFFFFF;
  background-image: url('../assets/images/backgrounds/blue-card-pattern.webp');
}

.xui-bg-pattern-red {
  background-color: var(--red);
  color: #FFFFFF;
  background-image: url('../assets/images/backgrounds/red-card-pattern.webp');
}

.xui-bg-pattern-green {
  background-color: var(--green);
  color: #000000;
  background-image: url('../assets/images/backgrounds/green-card-pattern.webp');
}

.xui-bg-pattern-black {
  background-color: #01010e;
  color: #FFFFFF;
  background-image: url('../assets/images/backgrounds/black-card-pattern.webp');
}





/*Background Sizes*/
.xui-bg-sz-auto,
.xui-bg-size-auto {
  background-size: auto;
}

.xui-bg-sz-cover,
.xui-bg-size-cover {
  background-size: cover;
}

.xui-bg-sz-contain,
.xui-bg-size-contain {
  background-size: contain;
}

.xui-bg-sz-initial,
.xui-bg-size-initial {
  background-size: initial;
}

.xui-bg-sz-inherit,
.xui-bg-size-inherit {
  background-size: inherit;
}





/*Background Attachments*/
.xui-bg-attach-scroll,
.xui-bg-attachment-scroll {
  background-attachment: scroll;
}

.xui-bg-attach-fixed,
.xui-bg-attachment-fixed {
  background-attachment: fixed;
}

.xui-bg-attach-local,
.xui-bg-attachment-local {
  background-attachment: local;
}

.xui-bg-attach-initial,
.xui-bg-attachment-initial {
  background-attachment: initial;
}

.xui-bg-attach-inherit,
.xui-bg-attachment-inherit {
  background-attachment: inherit;
}





/*Background Blend Modes*/
.xui-bg-blend-normal,
.xui-bg-blend-mode-normal {
  background-blend-mode: normal;
}

.xui-bg-blend-multiply,
.xui-bg-blend-mode-multiply {
  background-blend-mode: multiply;
}

.xui-bg-blend-screen,
.xui-bg-blend-mode-screen {
  background-blend-mode: screen;
}

.xui-bg-blend-overlay,
.xui-bg-blend-mode-overlay {
  background-blend-mode: overlay;
}

.xui-bg-blend-darken,
.xui-bg-blend-mode-darken {
  background-blend-mode: darken;
}

.xui-bg-blend-lighten,
.xui-bg-blend-mode-lighten {
  background-blend-mode: lighten;
}

.xui-bg-blend-color-dodge,
.xui-bg-blend-mode-color-dodge {
  background-blend-mode: color-dodge;
}

.xui-bg-blend-saturation,
.xui-bg-blend-mode-saturation {
  background-blend-mode: saturation;
}

.xui-bg-blend-color,
.xui-bg-blend-mode-color {
  background-blend-mode: color;
}

.xui-bg-blend-luminosity,
.xui-bg-blend-mode-luminosity {
  background-blend-mode: luminosity;
}





/*Background Clips*/
.xui-bg-clip-border-box {
  background-clip: border-box;
}

.xui-bg-clip-padding-box {
  background-clip: padding-box;
}

.xui-bg-clip-content-box {
  background-clip: content-box;
}

.xui-bg-clip-initial {
  background-clip: initial;
}

.xui-bg-clip-inherit {
  background-clip: inherit;
}





/*Background Origins*/
.xui-bg-origin-border-box {
  background-origin: border-box;
}

.xui-bg-origin-padding-box {
  background-origin: padding-box;
}

.xui-bg-origin-content-box {
  background-origin: content-box;
}

.xui-bg-origin-initial {
  background-origin: initial;
}

.xui-bg-origin-inherit {
  background-origin: inherit;
}





/*Background Repeats*/
.xui-bg-repeat {
  background-repeat: repeat;
}

.xui-bg-repeat-x {
  background-repeat: repeat-x;
}

.xui-bg-repeat-y {
  background-repeat: repeat-y;
}

.xui-bg-repeat-none,
.xui-bg-no-repeat {
  background-repeat: no-repeat;
}

.xui-bg-repeat-space {
  background-repeat: space;
}

.xui-bg-repeat-round {
  background-repeat: round;
}

.xui-bg-repeat-initial {
  background-repeat: initial;
}

.xui-bg-repeat-inherit {
  background-repeat: inherit;
}





/*Background Positions*/
.xui-bg-pos-left-top,
.xui-bg-position-left-top {
  background-position: left top;
}

.xui-bg-pos-left-center,
.xui-bg-position-left-center {
  background-position: left center;
}

.xui-bg-pos-left-bottom,
.xui-bg-position-left-bottom {
  background-position: left bottom;
}

.xui-bg-pos-right-top,
.xui-bg-position-right-top {
  background-position: right top;
}

.xui-bg-pos-right-center,
.xui-bg-position-right-center {
  background-position: right center;
}

.xui-bg-pos-right-bottom,
.xui-bg-position-right-bottom {
  background-position: right bottom;
}

.xui-bg-pos-center-top,
.xui-bg-position-center-top {
  background-position: center top;
}

.xui-bg-pos-center,
.xui-bg-pos-center-center,
.xui-bg-position-center,
.xui-bg-position-center-center {
  background-position: center center;
}

.xui-bg-pos-center-bottom,
.xui-bg-position-center-bottom {
  background-position: center bottom;
}

.xui-bg-pos-initial,
.xui-bg-position-initial {
  background-position: initial;
}

.xui-bg-pos-inherit,
.xui-bg-position-inherit {
  background-position: inherit;
}







/*Fills and Strokes*/
.xui-fill-white {
  fill: #fff;
}

.xui-fill-black {
  fill: #000000;
}

.xui-fill-fade {
  fill: #000000;
  opacity: .5;
}

.xui-fill-xnyder-black {
  fill: #01010E;
}

.xui-fill-blue {
  fill: var(--blue);
}

.xui-fill-light-blue,
.xui-fill-light-blue-1 {
  fill: #EAEBFB;
}

.xui-fill-light-blue-2 {
  fill: #D4D7F7;
}

.xui-fill-light-blue-3 {
  fill: #BFC4F2;
}

.xui-fill-red {
  fill: var(--red);
}

.xui-fill-light-red,
.xui-fill-light-red-1 {
  fill: #FEE6EA;
}

.xui-fill-light-red-2 {
  fill: #FECDD4;
}

.xui-fill-light-red-3 {
  fill: #FDB4BF;
}

.xui-fill-green {
  fill: var(--green);
}

.xui-fill-light-green,
.xui-fill-light-green-1 {
  fill: #E8FCF7;
}

.xui-fill-light-green-2 {
  fill: #D2F9EF;
}

.xui-fill-light-green-3 {
  fill: #BBF6E6;
}

.xui-fill-light-1 {
  fill: #f9f9f9;
}

.xui-fill-light-2 {
  fill: #f7f7f7;
}

.xui-fill-light-3 {
  fill: #f4f4f4;
}

.xui-fill-light {
  fill: #f1f1f1;
}

.xui-fill-yellow {
  fill: #fff000;
}

.xui-fill-instagram {
  fill: #E1306C;
}

.xui-fill-twitter {
  fill: #1DA1F2;
}

.xui-fill-facebook {
  fill: #4267B2;
}

.xui-fill-youtube {
  fill: #ff0000;
}

.xui-fill-pinterest {
  fill: #bd081c;
}

.xui-fill-linkedin {
  fill: #007bb5;
}

.xui-fill-snapchat {
  fill: #fffc00;
}

.xui-fill-whatsapp {
  fill: #25D366;
}

.xui-fill-tumblr {
  fill: #35465d;
}

.xui-fill-reddit {
  fill: #ff4500;
}

.xui-fill-yelp {
  fill: #d32323;
}

.xui-fill-spotify {
  fill: #1ed760;
}

.xui-fill-amazon {
  fill: #ff9900;
}

.xui-fill-foursquare {
  fill: #f94877;
}

.xui-fill-medium {
  fill: #12100e;
}

.xui-fill-vimeo {
  fill: #1ab7ea;
}

.xui-fill-skype {
  fill: #00aff0;
}

.xui-fill-android {
  fill: #a4c639;
}

.xui-fill-quora {
  fill: #aa2200;
}

.xui-fill-dribbble {
  fill: #ea4c89;
}

.xui-fill-slack {
  fill: #4a154b;
}

.xui-fill-flickr {
  fill: #f40083;
}

.xui-fill-yahoo {
  fill: #6001d2;
}

.xui-fill-twitch {
  fill: #9146ff;
}

.xui-fill-soundcloud {
  fill: #ff5500;
}

.xui-fill-deviant-art {
  fill: #05cc47;
}

.xui-fill-steam {
  fill: #171a21;
}

.xui-fill-telegram {
  fill: #0088cc;
}

.xui-stroke-white {
  stroke: #fff;
}

.xui-stroke-black {
  stroke: #000000;
}

.xui-stroke-fade {
  stroke: #000000;
  opacity: .5;
}

.xui-stroke-xnyder-black {
  stroke: #01010E;
}

.xui-stroke-blue {
  stroke: var(--blue);
}

.xui-stroke-light-blue,
.xui-stroke-light-blue-1 {
  stroke: #EAEBFB;
}

.xui-stroke-light-blue-2 {
  stroke: #D4D7F7;
}

.xui-stroke-light-blue-3 {
  stroke: #BFC4F2;
}

.xui-stroke-red {
  stroke: var(--red);
}

.xui-stroke-light-red,
.xui-stroke-light-red-1 {
  stroke: #FEE6EA;
}

.xui-stroke-light-red-2 {
  stroke: #FECDD4;
}

.xui-stroke-light-red-3 {
  stroke: #FDB4BF;
}

.xui-stroke-green {
  stroke: var(--green);
}

.xui-stroke-light-green,
.xui-stroke-light-green-1 {
  stroke: #E8FCF7;
}

.xui-stroke-light-green-2 {
  stroke: #D2F9EF;
}

.xui-stroke-light-green-3 {
  stroke: #BBF6E6;
}

.xui-stroke-light-1 {
  stroke: #f9f9f9;
}

.xui-stroke-light-2 {
  stroke: #f7f7f7;
}

.xui-stroke-light-3 {
  stroke: #f4f4f4;
}

.xui-stroke-light {
  stroke: #f1f1f1;
}

.xui-stroke-yellow {
  stroke: #fff000;
}

.xui-stroke-instagram {
  stroke: #E1306C;
}

.xui-stroke-twitter {
  stroke: #1DA1F2;
}

.xui-stroke-facebook {
  stroke: #4267B2;
}

.xui-stroke-youtube {
  stroke: #ff0000;
}

.xui-stroke-pinterest {
  stroke: #bd081c;
}

.xui-stroke-linkedin {
  stroke: #007bb5;
}

.xui-stroke-snapchat {
  stroke: #fffc00;
}

.xui-stroke-whatsapp {
  stroke: #25D366;
}

.xui-stroke-tumblr {
  stroke: #35465d;
}

.xui-stroke-reddit {
  stroke: #ff4500;
}

.xui-stroke-yelp {
  stroke: #d32323;
}

.xui-stroke-spotify {
  stroke: #1ed760;
}

.xui-stroke-amazon {
  stroke: #ff9900;
}

.xui-stroke-foursquare {
  stroke: #f94877;
}

.xui-stroke-medium {
  stroke: #12100e;
}

.xui-stroke-vimeo {
  stroke: #1ab7ea;
}

.xui-stroke-skype {
  stroke: #00aff0;
}

.xui-stroke-android {
  stroke: #a4c639;
}

.xui-stroke-quora {
  stroke: #aa2200;
}

.xui-stroke-dribbble {
  stroke: #ea4c89;
}

.xui-stroke-slack {
  stroke: #4a154b;
}

.xui-stroke-flickr {
  stroke: #f40083;
}

.xui-stroke-yahoo {
  stroke: #6001d2;
}

.xui-stroke-twitch {
  stroke: #9146ff;
}

.xui-stroke-soundcloud {
  stroke: #ff5500;
}

.xui-stroke-deviant-art {
  stroke: #05cc47;
}

.xui-stroke-steam {
  stroke: #171a21;
}

.xui-stroke-telegram {
  stroke: #0088cc;
}




/*Position*/
.xui-pos-static,
.xui-position-static {
  position: static;
}

.xui-pos-absolute,
.xui-position-absolute {
  position: absolute;
}

.xui-pos-fixed,
.xui-position-fixed {
  position: fixed;
}

.xui-pos-relative,
.xui-position-relative {
  position: relative;
}

.xui-pos-sticky,
.xui-position-sticky {
  position: -webkit-sticky;
  position: sticky;
}

.xui-pos-initial,
.xui-position-initial {
  position: initial;
}

.xui-pos-inherit,
.xui-position-inherit {
  position: inherit;
}






/*Cursors*/
.xui-cursor-alias {
  cursor: alias;
}

.xui-cursor-all-scroll {
  cursor: all-scroll;
}

.xui-cursor-auto {
  cursor: auto;
}

.xui-cursor-cell {
  cursor: cell;
}

.xui-cursor-context-menu {
  cursor: context-menu;
}

.xui-cursor-col-resize {
  cursor: col-resize;
}

.xui-cursor-copy {
  cursor: copy;
}

.xui-cursor-crosshair {
  cursor: crosshair;
}

.xui-cursor-default {
  cursor: default;
}

.xui-cursor-e-resize {
  cursor: e-resize;
}

.xui-cursor-ew-resize {
  cursor: ew-resize;
}

.xui-cursor-grab {
  cursor: grab;
}

.xui-cursor-grabbing {
  cursor: grabbing;
}

.xui-cursor-help {
  cursor: help;
}

.xui-cursor-move {
  cursor: move;
}

.xui-cursor-n-resize {
  cursor: n-resize;
}

.xui-cursor-ne-resize {
  cursor: ne-resize;
}

.xui-cursor-nesw-resize {
  cursor: nesw-resize;
}

.xui-cursor-nw-resize {
  cursor: nw-resize;
}

.xui-cursor-nwse-resize {
  cursor: nwse-resize;
}

.xui-cursor-no-drop {
  cursor: no-drop;
}

.xui-cursor-none {
  cursor: none;
}

.xui-cursor-not-allowed {
  cursor: not-allowed;
}

.xui-cursor-pointer {
  cursor: pointer;
}

.xui-cursor-progress {
  cursor: progress;
}

.xui-cursor-row-resize {
  cursor: row-resize;
}

.xui-cursor-s-resize {
  cursor: s-resize;
}

.xui-cursor-se-resize {
  cursor: se-resize;
}

.xui-cursor-sw-resize {
  cursor: sw-resize;
}

.xui-cursor-text {
  cursor: text;
}

.xui-cursor-vertical-text {
  cursor: vertical-text;
}

.xui-cursor-w-resize {
  cursor: w-resize;
}

.xui-cursor-wait {
  cursor: wait;
}

.xui-cursor-zoom-in {
  cursor: zoom-in;
}

.xui-cursor-zoom-out {
  cursor: zoom-out;
}

.xui-cursor-initial {
  cursor: initial;
}

.xui-cursor-inherit {
  cursor: inherit;
}





/*Buttons*/
.xui-btn-small,
.xui-btn,
.xui-btn-large {
  display: inline-block;
  background-color: inherit;
  color: inherit;
  outline: none;
  border: none;
  text-decoration: none;
  font-family: inherit;
}

.xui-btn-small:hover,
.xui-btn:hover,
.xui-btn-large:hover,
.xui-btn-block:hover {
  opacity: .95;
}

.xui-btn-small {
  padding: .8em 1.6em;
  font-size: 60%;
}

/* Default Button */
.xui-btn,
.xui-btn-large,
.xui-btn-small {
  font-size: 14px;
  border: 1px solid var(--default-border);
  color: var(--text-opacitated);
  padding: 10.4px 24px;
  transition: .2s;
}

.xui-btn:not([class*="xui-text-"]):hover,
.xui-btn:not([class*="xui-text-"]):focus,
.xui-btn-large:not([class*="xui-text-"]):hover,
.xui-btn-large:not([class*="xui-text-"]):focus,
.xui-btn-small:not([class*="xui-text-"]):hover,
.xui-btn-small:not([class*="xui-text-"]):focus .xui-btn:active,
.xui-btn-large:active,
.xui-btn-small:active {
  border-color: var(--blue-pressed);
  color: var(--blue-pressed);
}

.xui-btn-large {
  padding: 13.6px 40px;
  font-size: 18px;
}

.xui-btn-small {
  padding: 8.4px 24px;
  font-size: 12px;
}

.xui-btn[class*="xui-btn-"]:not(.xui-btn-block):not(.xui-btn-small):not(.xui-btn-large),
.xui-btn[class*="xui-bg-"]:not(.xui-btn-block):not(.xui-btn-small):not(.xui-btn-large) {
  border: none;
}

.xui-btn[class*="xui-bg-"]:not(.xui-btn-block):not(.xui-btn-small):not(.xui-btn-large):not([class*="xui-text-"]),
.xui-btn[class*="xui-bg-"]:not(.xui-btn-block):not(.xui-btn-small):not(.xui-btn-large):not([class*="xui-text-"]):focus,
.xui-btn[class*="xui-bg-"]:not(.xui-btn-block):not(.xui-btn-small):not(.xui-btn-large):not([class*="xui-text-"]):hover,
.xui-btn[class*="xui-bg-"]:not(.xui-btn-block):not(.xui-btn-small):not(.xui-btn-large):not([class*="xui-text-"]):active {
  color: inherit;
}

/* Text Button */

.xui-btn-text:hover {
  background-color: var(--hovered-opacitated);
  color: var(--black);
}

.xui-btn-text:hover,
.xui-btn-text:focus {
  background-color: var(--hovered-opacitated);
  color: var(--black);
}

.xui-btn-text:active {
  background-color: var(--opacitated-pressed);
}

.xui-btn-link,
.xui-btn-text {
  background-color: transparent;
  border: none;
  color: var(--blue-link);
}

.xui-btn-text {
  color: var(--black);
}

.xui-btn-dashed {
  border: 1px dashed var(--default-border);
}

.xui-btn-fade {
  background-color: transparent;
  color: inherit;
  opacity: .5;
}

.xui-btn[xui-style="liquid"] {
  background: linear-gradient(var(--blue) 0 0) no-repeat calc(200% - var(--p, 0%)) 100% / 200% var(--p, 0.2em);
  transition: 0.3s var(--t, 0s),
    background-position 0.3s calc(0.3s - var(--t, 0s));
  /* border: 2px solid #646cff; */
  overflow: hidden;
}

.xui-btn[xui-style="liquid"]:hover {
  --p: 100%;
  --t: 0.3s;
  color: var(--white);
}

.xui-btn[xui-style="slide"] {
  position: relative;
  display: inline-block;
  margin: 4px;
  background-color: transparent;
  text-decoration: none;
  overflow: hidden;
  transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out;
  cursor: pointer;
}

.xui-btn[xui-style="slide"]::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 0;
  background-color: var(--blue);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  transition: height 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.xui-btn[xui-style="slide"]:hover::before {
  height: 500%;
}

.xui-btn[xui-style="slide"]:hover {
  color: var(--white);
  border-color: var(--blue);
}

.xui-btn[xui-style="slide"] span {
  position: relative;
  z-index: 1;
  transition: color 0.3s ease-in-out;
}

.xui-btn[xui-style="slide"]:hover span,
.xui-btn[xui-style="reveal-left"]:hover,
.xui-btn[xui-style="reveal-right"]:hover,
.xui-btn[xui-style="reveal-top"]:hover,
.xui-btn[xui-style="reveal-bottom"]:hover {
  color: var(--white);
}

.xui-btn[xui-style="reveal-left"],
.xui-btn[xui-style="reveal-right"],
.xui-btn[xui-style="reveal-top"],
.xui-btn[xui-style="reveal-bottom"] {
  background-color: transparent;
  position: relative;
}

.xui-btn[xui-style="reveal-left"]::after,
.xui-btn[xui-style="reveal-right"]::after,
.xui-btn[xui-style="reveal-top"]::after,
.xui-btn[xui-style="reveal-bottom"]::after {
  content: "";
  position: absolute;
  width: 0;
  height: 100%;
  top: 0;
  left: 0;
  background-color: var(--blue);
  transition: width 0.3s ease;
  z-index: -1;
}

.xui-btn[xui-style="reveal-right"]::after {
  right: 0;
  left: initial;
}

.xui-btn[xui-style="reveal-top"]::after,
.xui-btn[xui-style="reveal-bottom"]::after {
  width: 100%;
  height: 0;
  transition: height 0.3s ease;
}

.xui-btn[xui-style="reveal-bottom"]::after {
  bottom: 0;
  top: initial;
}

.xui-btn[xui-style="reveal-left"]:hover::after,
.xui-btn[xui-style="reveal-right"]:hover::after {
  width: 100%;
}

.xui-btn[xui-style="reveal-top"]:hover::after,
.xui-btn[xui-style="reveal-bottom"]:hover::after {
  height: 100%;
}

.xui-btn-fade:hover {
  background-color: transparent;
  color: inherit;
  opacity: .8;
}

.xui-btn-block {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  font-size: 90%;
  outline: none;
  text-decoration: none;
}

.xui-btn-primary,
.xui-btn-primary:hover,
.xui-btn-primary:focus,
.xui-btn-primary:active {
  background-color: var(--blue-link);
  color: #fff !important;
}

.xui-btn-primary:hover,
.xui-btn-primary:focus {
  background-color: var(--blue);
}

.xui-btn-primary:active {
  background-color: var(--primary-pressed);
}

.xui-btn-success,
.xui-btn-success:focus,
.xui-btn-success:active {
  background-color: var(--success-500);
  color: var(--white) !important;
}

.xui-btn-success:hover {
  background-color: var(--success-700);
  color: var(--white);
}

.xui-btn-warning,
.xui-btn-warning:focus,
.xui-btn-warning:active {
  background-color: var(--warning-500);
  color: var(--white) !important;
  ;
}

.xui-btn-warning:hover {
  background-color: var(--warning-700);
  color: var(--white);
}

.xui-btn-danger,
.xui-btn-danger:focus,
.xui-btn-danger:active {
  background-color: var(--error-500);
  color: var(--white) !important;
  ;
}

.xui-btn-danger:hover {
  background-color: var(--error-700);
  color: var(--white);
}

.xui-btn-blue,
.xui-btn-blue:focus,
.xui-btn-blue:active {
  background-color: var(--blue);
  color: var(--white) !important;
  ;
}

.xui-btn-blue:hover {
  background-color: #2432c9;
  color: var(--white);
}

.xui-btn-red,
.xui-btn-red:focus,
.xui-btn-red:active {
  background-color: var(--red);
  color: var(--white) !important;
}

.xui-btn-red:hover {
  background-color: #d1001f;
  color: var(--white);
}

.xui-btn-green,
.xui-btn-green:focus,
.xui-btn-green:active {
  background-color: var(--green);
  color: var(--white) !important;
}

.xui-btn-green:hover {
  background-color: #112f0e;
  color: var(--white) !important;
}

.xui-btn-white,
.xui-btn-white:focus,
.xui-btn-white:active {
  background-color: var(--white);
  color: var(--black);
}

.xui-btn-white:hover {
  background-color: var(--white);
  color: #161616;
}

.xui-btn-black,
.xui-btn-black:focus,
.xui-btn-black:active {
  background-color: var(--black);
  color: var(--white);
}

.xui-btn-black:hover {
  background-color: #161616;
  color: var(--white);
}

button:disabled,
button:disabled:hover,
button[disabled],
button[disabled]:hover,
.xui-btn:disabled,
.xui-btn:disabled:hover,
.xui-btn[disabled],
.xui-btn[disabled]:hover,
.xui-btn-disabled,
.xui-btn-disabled:hover {
  cursor: not-allowed !important;
  background-color: var(--disabled-opacitated);
  color: var(--disabled-text-opacitated);
  border-color: var(--default-border);
}

.xui-btn.xui-btn-link:disabled,
.xui-btn.xui-btn-link:disabled:hover,
.xui-btn.xui-btn-link[disabled],
.xui-btn.xui-btn-link[disabled]:hover,
.xui-btn-link.xui-btn-disabled,
.xui-btn-link.xui-btn-disabled:hover,
.xui-btn.xui-btn-text:disabled,
.xui-btn.xui-btn-text:disabled:hover,
.xui-btn.xui-btn-text[disabled],
.xui-btn.xui-btn-text[disabled]:hover,
.xui-btn-text.xui-btn-disabled,
.xui-btn-text.xui-btn-disabled:hover {
  cursor: not-allowed !important;
  background-color: transparent;
  color: var(--disabled-text-opacitated);
}





/*Displays*/
.xui-d-none {
  display: none;
}

.xui-d-inline {
  display: inline;
}

.xui-d-inline-block {
  display: inline-block;
}

.xui-d-block {
  display: block;
}

.xui-d-contents {
  display: contents;
}

.xui-d-inline-flex {
  display: inline-flex;
}

.xui-d-inline-grid {
  display: inline-grid;
}

.xui-d-inline-table {
  display: inline-table;
}

.xui-d-list-item {
  display: list-item;
}

.xui-d-run-in {
  display: run-in;
}

.xui-d-table {
  display: table;
}

.xui-d-table-caption {
  display: table-caption;
}

.xui-d-table-column-group {
  display: table-column-group;
}

.xui-d-table-header-group {
  display: table-header-group;
}

.xui-d-table-footer-group {
  display: table-footer-group;
}

.xui-d-table-row-group {
  display: table-row-group;
}

.xui-d-table-cell {
  display: table-cell;
}

.xui-d-table-column {
  display: table-column;
}

.xui-d-table-row {
  display: table-row;
}

.xui-d-initial {
  display: initial;
}

.xui-d-inherit {
  display: inherit;
}

.xui-d-flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  -webkit-box-align: stretch;
  -moz-box-align: stretch;
  -ms-flex-jc-align: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
}

.xui-d-grid {
  display: grid;
}





/*Text Colors*/
.xui-text-initial {
  color: initial;
}

.xui-text-inherit {
  color: inherit;
}

.xui-text-white,
.xui-text-white-switch {
  color: #fff;
}

.xui-text-black,
.xui-text-black-switch {
  color: #000000;
}

.xui-text-naija {
  color: #008753;
}

.xui-text-blue {
  color: var(--blue);
}

.xui-text-dark-blue {
  color: #1c3357;
}

.xui-text-red {
  color: var(--red);
}

.xui-text-green {
  color: var(--green);
}

.xui-text-dark-green {
  color: var(--dark-green);
}

.xui-text-xnyder-black {
  color: #01010E;
}

.xui-text-success {
  color: #2e7029;
}

.xui-text-warning {
  color: #978602;
}

.xui-text-danger {
  color: var(--error-500);
}

.xui-text-fade {
  color: #999999;
}

.xui-text-inherit {
  color: inherit;
}

.xui-text-initial {
  color: initial;
}


/*Text Decorations*/
.xui-text-dc-overline {
  text-decoration: overline;
}

.xui-text-dc-line-through {
  text-decoration: line-through;
}

.xui-text-dc-underline {
  text-decoration: underline;
}

.xui-text-dc-line-through {
  text-decoration: line-through;
}

.xui-text-dc-none {
  text-decoration: none;
}



/*Images*/
.xui-img-15 {
  display: block;
  max-width: 15px;
  width: 100%;
}

.xui-img-20 {
  display: block;
  max-width: 20px;
  width: 100%;
}

.xui-img-25 {
  display: block;
  max-width: 25px;
  width: 100%;
}

.xui-img-30 {
  display: block;
  max-width: 30px;
  width: 100%;
}

.xui-img-35 {
  display: block;
  max-width: 35px;
  width: 100%;
}

.xui-img-40 {
  display: block;
  max-width: 40px;
  width: 100%;
}

.xui-img-45 {
  display: block;
  max-width: 45px;
  width: 100%;
}

.xui-img-50 {
  display: block;
  max-width: 50px;
  width: 100%;
}

.xui-img-55 {
  display: block;
  max-width: 55px;
  width: 100%;
}

.xui-img-60 {
  display: block;
  max-width: 60px;
  width: 100%;
}

.xui-img-65 {
  display: block;
  max-width: 65px;
  width: 100%;
}

.xui-img-70 {
  display: block;
  max-width: 70px;
  width: 100%;
}

.xui-img-75 {
  display: block;
  max-width: 75px;
  width: 100%;
}

.xui-img-80 {
  display: block;
  max-width: 80px;
  width: 100%;
}

.xui-img-85 {
  display: block;
  max-width: 85px;
  width: 100%;
}

.xui-img-90 {
  display: block;
  max-width: 90px;
  width: 100%;
}

.xui-img-95 {
  display: block;
  max-width: 95px;
  width: 100%;
}

.xui-img-100 {
  display: block;
  max-width: 100px;
  width: 100%;
}

.xui-img-150 {
  display: block;
  max-width: 150px;
  width: 100%;
}

.xui-img-200 {
  display: block;
  max-width: 200px;
  width: 100%;
}

.xui-img-250 {
  display: block;
  max-width: 250px;
  width: 100%;
}

.xui-img-300 {
  display: block;
  max-width: 300px;
  width: 100%;
}

.xui-img-350 {
  display: block;
  max-width: 350px;
  width: 100%;
}

.xui-img-400 {
  display: block;
  max-width: 400px;
  width: 100%;
}

.xui-img-450 {
  display: block;
  max-width: 450px;
  width: 100%;
}

.xui-img-500 {
  display: block;
  max-width: 500px;
  width: 100%;
}

.xui-img-550 {
  display: block;
  max-width: 550px;
  width: 100%;
}

.xui-img-600 {
  display: block;
  max-width: 600px;
  width: 100%;
}

.xui-img-650 {
  display: block;
  max-width: 650px;
  width: 100%;
}

.xui-img-700 {
  display: block;
  max-width: 700px;
  width: 100%;
}

.xui-img-750 {
  display: block;
  max-width: 750px;
  width: 100%;
}

.xui-img-800 {
  display: block;
  max-width: 800px;
  width: 100%;
}

.xui-img-850 {
  display: block;
  max-width: 850px;
  width: 100%;
}

.xui-img-900 {
  display: block;
  max-width: 900px;
  width: 100%;
}

.xui-img-950 {
  display: block;
  max-width: 950px;
  width: 100%;
}

.xui-img-1000 {
  display: block;
  max-width: 1000px;
  width: 100%;
}

.xui-img-responsive {
  display: block;
  width: 100%;
}




/*Skeletons*/
.xui--skeleton {
  position: relative;
  overflow: hidden;
  background-color: #eee;
}

.xui--skeleton::before {
  top: 0;
  left: 0;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: #eee;
}

.xui--skeleton::after {
  content: '';
  position: absolute;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.9),
      transparent);
  width: 50%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  animation: loading .75s infinite;
}

.xui--skeleton-btn-small {
  width: 85px;
  height: 30px;
}

.xui--skeleton.hidden {
  width: initial;
  overflow: initial;
  height: initial;
  position: initial;
  background-color: transparent !important;
}

.xui--skeleton.hidden::before,
.xui--skeleton.hidden::after {
  display: none;
}

.xui--skeleton-btn-small.hidden {
  width: initial;
  height: initial;
}



/*Overlays*/
.xui-overlay,
.xui-overlay-1 {
  background-color: rgba(0, 0, 0, .5);
  color: #FFFFFF;
}

.xui-overlay-2 {
  background-color: rgba(0, 0, 0, .75);
  color: #FFFFFF;
}

.xui-overlay-3 {
  background-color: rgba(0, 0, 0, .9);
  color: #FFFFFF;
}





.xui-tilt-card-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  perspective: 1000px;
  /* Adds depth */
}

/* CARD TILT EFFECT */
.xui-tilt-card {
  padding: 60px 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
  transform-style: preserve-3d;
  will-change: transform;
}

.xui-tilt-card h3,
.xui-tilt-card p {
  transform: translateZ(20px);
  transition: transform 0.2s ease-out;
}

.xui-tilt-card:hover {
  box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.2);
}


/*Objects*/
.xui-object-fit-fill {
  object-fit: fill;
}

.xui-object-fit-contain {
  object-fit: contain;
}

.xui-object-fit-cover {
  object-fit: cover;
}

.xui-object-fit-scale-down {
  object-fit: scale-down;
}

.xui-object-fit-none {
  object-fit: none;
}

.xui-object-pos-left,
.xui-object-position-left {
  object-position: left;
}

.xui-object-pos-center,
.xui-object-position-center {
  object-position: center;
}

.xui-object-pos-right,
.xui-object-position-right {
  object-position: right;
}

.xui-object-pos-bottom,
.xui-object-position-bottom {
  object-position: bottom;
}

.xui-object-pos-top,
.xui-object-position-top {
  object-position: top;
}

.xui-object-pos-initial,
.xui-object-position-initial {
  object-position: initial;
}

.xui-object-pos-inherit,
.xui-object-position-inherit {
  object-position: inherit;
}



/*Columns*/
.xui-columns-auto {
  columns: auto;
}

.xui-columns-initial {
  columns: initial;
}

.xui-columns-inherit {
  columns: inherit;
}

.xui-column-width-auto {
  column-width: auto;
}

.xui-column-width-inherit {
  column-width: inherit;
}

.xui-column-width-initial {
  column-width: initial;
}

.xui-column-count-1 {
  column-count: 1;
}

.xui-column-count-2 {
  column-count: 2;
}

.xui-column-count-3 {
  column-count: 3;
}

.xui-column-count-4 {
  column-count: 4;
}

.xui-column-count-5 {
  column-count: 5;
}

.xui-column-count-6 {
  column-count: 6;
}

.xui-column-count-7 {
  column-count: 7;
}

.xui-column-count-8 {
  column-count: 8;
}

.xui-column-count-9 {
  column-count: 9;
}

.xui-column-count-10 {
  column-count: 10;
}

.xui-column-count-11 {
  column-count: 11;
}

.xui-column-count-12 {
  column-count: 12;
}

.xui-column-fill-balance {
  column-fill: balance;
}

.xui-column-fill-auto {
  column-fill: auto;
}

.xui-column-fill-initial {
  column-fill: initial;
}

.xui-column-fill-inherit {
  column-fill: inherit;
}

.xui-column-gap-normal {
  column-gap: normal;
}

.xui-column-gap-initial {
  column-gap: initial;
}

.xui-column-gap-inherit {
  column-gap: inherit;
}

.xui-column-gap-half {
  column-gap: .5rem;
}

.xui-column-gap-1 {
  column-gap: 1rem;
}

.xui-column-gap-1-half {
  column-gap: 1.5rem;
}

.xui-column-gap-2 {
  column-gap: 2rem;
}

.xui-column-gap-2-half {
  column-gap: 2.5rem;
}

.xui-column-gap-3 {
  column-gap: 3rem;
}

.xui-column-gap-3-half {
  column-gap: 3.5rem;
}

.xui-column-gap-4 {
  column-gap: 4rem;
}

.xui-column-gap-4-half {
  column-gap: 4.5rem;
}

.xui-column-gap-5 {
  column-gap: 5rem;
}

.xui-column-span-none {
  column-span: none;
}

.xui-column-span-all {
  column-span: all;
}

.xui-column-span-initial {
  column-span: initial;
}

.xui-column-span-inherit {
  column-span: inherit;
}

/* Additional Column Support */
.xui-column>div,
.xui-column>section,
.xui-column-support>div,
.xui-column-support>section {
  box-sizing: border-box;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  break-inside: avoid-column;
  counter-increment: brick-counter;
}




/* Rows */
.xui-row-gap-normal {
  row-gap: normal;
}

.xui-row-gap-initial {
  row-gap: initial;
}

.xui-row-gap-inherit {
  row-gap: inherit;
}

.xui-row-gap-half {
  row-gap: .5rem;
}

.xui-row-gap-1 {
  row-gap: 1rem;
}

.xui-row-gap-1-half {
  row-gap: 1.5rem;
}

.xui-row-gap-2 {
  row-gap: 2rem;
}

.xui-row-gap-2-half {
  row-gap: 2.5rem;
}

.xui-row-gap-3 {
  row-gap: 3rem;
}

.xui-row-gap-3-half {
  row-gap: 3.5rem;
}

.xui-row-gap-4 {
  row-gap: 4rem;
}

.xui-row-gap-4-half {
  row-gap: 4.5rem;
}

.xui-row-gap-5 {
  row-gap: 5rem;
}






/*Overflow*/
.xui-overflow-visible {
  overflow: visible;
}

.xui-overflow-hidden {
  overflow: hidden;
}

.xui-overflow-scroll {
  overflow: scroll;
}

.xui-overflow-auto {
  overflow: auto;
}

.xui-overflow-inherit {
  overflow: inherit;
}

.xui-overflow-initial {
  overflow: initial;
}

.xui-overflow-x-visible {
  overflow-x: visible;
}

.xui-overflow-x-hidden {
  overflow-x: hidden;
}

.xui-overflow-x-scroll {
  overflow-x: scroll;
}

.xui-overflow-x-auto {
  overflow-x: auto;
}

.xui-overflow-x-inherit {
  overflow-x: inherit;
}

.xui-overflow-x-initial {
  overflow-x: initial;
}

.xui-overflow-y-visible {
  overflow-y: visible;
}

.xui-overflow-y-hidden {
  overflow-y: hidden;
}

.xui-overflow-y-scroll {
  overflow-y: scroll;
}

.xui-overflow-y-auto {
  overflow-y: auto;
}

.xui-overflow-y-inherit {
  overflow-y: inherit;
}

.xui-overflow-y-initial {
  overflow-y: initial;
}






/*Margins*/
.xui-m-none {
  margin: 0;
}

.xui-m-auto {
  margin: auto;
}

.xui-m-inherit {
  margin: inherit;
}

.xui-m-unset {
  margin: unset;
}

.xui-m-all {
  margin: all;
}

.xui-m-initial {
  margin: initial;
}

.xui-m-half {
  margin: .5rem;
}

.xui-m-1 {
  margin: 1rem;
}

.xui-m-1-half {
  margin: 1.5rem;
}

.xui-m-2 {
  margin: 2rem;
}

.xui-m-2-half {
  margin: 2.5rem;
}

.xui-m-3 {
  margin: 3rem;
}

.xui-m-3-half {
  margin: 3.5rem;
}

.xui-m-4 {
  margin: 4rem;
}

.xui-m-4-half {
  margin: 4.5rem;
}

.xui-m-5 {
  margin: 5rem;
}

.xui-m-5-half {
  margin: 5.5rem;
}

.xui-m-6 {
  margin: 6rem;
}

.xui-m-6-half {
  margin: 6.5rem;
}

.xui-m-7 {
  margin: 7rem;
}

.xui-m-7-half {
  margin: 7.5rem;
}

.xui-m-8 {
  margin: 8rem;
}

.xui-m-8-half {
  margin: 8.5rem;
}

.xui-m-9 {
  margin: 9rem;
}

.xui-m-9-half {
  margin: 9.5rem;
}

.xui-m-10 {
  margin: 10rem;
}

.xui-mt-none {
  margin-top: 0;
}

.xui-mt-auto {
  margin-top: auto;
}

.xui-mt--half {
  margin-top: -.5rem;
}

.xui-mt--1 {
  margin-top: -1rem;
}

.xui-mt--1-half {
  margin-top: -1.5rem;
}

.xui-mt--2 {
  margin-top: -2rem;
}

.xui-mt--2-half {
  margin-top: -2.5rem;
}

.xui-mt--3 {
  margin-top: -3rem;
}

.xui-mt--3-half {
  margin-top: -3.5rem;
}

.xui-mt--4 {
  margin-top: -4rem;
}

.xui-mt--4-half {
  margin-top: -4.5rem;
}

.xui-mt--5 {
  margin-top: -5rem;
}

.xui-mt--5-half {
  margin-top: -5.5rem;
}

.xui-mt--6 {
  margin-top: -6rem;
}

.xui-mt--6-half {
  margin-top: -6.5rem;
}

.xui-mt--7 {
  margin-top: -7rem;
}

.xui-mt--7-half {
  margin-top: -7.5rem;
}

.xui-mt--8 {
  margin-top: -8rem;
}

.xui-mt--8-half {
  margin-top: -8.5rem;
}

.xui-mt--9 {
  margin-top: -9rem;
}

.xui-mt--9-half {
  margin-top: -9.5rem;
}

.xui-mt--10 {
  margin-top: -10rem;
}

.xui-mt-half {
  margin-top: .5rem;
}

.xui-mt-1 {
  margin-top: 1rem;
}

.xui-mt-1-half {
  margin-top: 1.5rem;
}

.xui-mt-2 {
  margin-top: 2rem;
}

.xui-mt-2-half {
  margin-top: 2.5rem;
}

.xui-mt-3 {
  margin-top: 3rem;
}

.xui-mt-3-half {
  margin-top: 3.5rem;
}

.xui-mt-4 {
  margin-top: 4rem;
}

.xui-mt-4-half {
  margin-top: 4.5rem;
}

.xui-mt-5 {
  margin-top: 5rem;
}

.xui-mt-5-half {
  margin-top: 5.5rem;
}

.xui-mt-6 {
  margin-top: 6rem;
}

.xui-mt-6-half {
  margin-top: 6.5rem;
}

.xui-mt-7 {
  margin-top: 7rem;
}

.xui-mt-7-half {
  margin-top: 7.5rem;
}

.xui-mt-8 {
  margin-top: 8rem;
}

.xui-mt-8-half {
  margin-top: 8.5rem;
}

.xui-mt-9 {
  margin-top: 9rem;
}

.xui-mt-9-half {
  margin-top: 9.5rem;
}

.xui-mt-10 {
  margin-top: 10rem;
}

.xui-mr-none {
  margin-right: 0;
}

.xui-mr-auto {
  margin-right: auto;
}

.xui-mr--half {
  margin-right: -.5rem;
}

.xui-mr--1 {
  margin-right: -1rem;
}

.xui-mr--1-half {
  margin-right: -1.5rem;
}

.xui-mr--2 {
  margin-right: -2rem;
}

.xui-mr--2-half {
  margin-right: -2.5rem;
}

.xui-mr--3 {
  margin-right: -3rem;
}

.xui-mr--3-half {
  margin-right: -3.5rem;
}

.xui-mr--4 {
  margin-right: -4rem;
}

.xui-mr--4-half {
  margin-right: -4.5rem;
}

.xui-mr--5 {
  margin-right: -5rem;
}

.xui-mr--5-half {
  margin-right: -5.5rem;
}

.xui-mr--6 {
  margin-right: -6rem;
}

.xui-mr--6-half {
  margin-right: -6.5rem;
}

.xui-mr--7 {
  margin-right: -7rem;
}

.xui-mr--7-half {
  margin-right: -7.5rem;
}

.xui-mr--8 {
  margin-right: -8rem;
}

.xui-mr--8-half {
  margin-right: -8.5rem;
}

.xui-mr--9 {
  margin-right: -9rem;
}

.xui-mr--9-half {
  margin-right: -9.5rem;
}

.xui-mr--10 {
  margin-right: -10rem;
}

.xui-mr-half {
  margin-right: .5rem;
}

.xui-mr-1 {
  margin-right: 1rem;
}

.xui-mr-1-half {
  margin-right: 1.5rem;
}

.xui-mr-2 {
  margin-right: 2rem;
}

.xui-mr-2-half {
  margin-right: 2.5rem;
}

.xui-mr-3 {
  margin-right: 3rem;
}

.xui-mr-3-half {
  margin-right: 3.5rem;
}

.xui-mr-4 {
  margin-right: 4rem;
}

.xui-mr-4-half {
  margin-right: 4.5rem;
}

.xui-mr-5 {
  margin-right: 5rem;
}

.xui-mr-5-half {
  margin-right: 5.5rem;
}

.xui-mr-6 {
  margin-right: 6rem;
}

.xui-mr-6-half {
  margin-right: 6.5rem;
}

.xui-mr-7 {
  margin-right: 7rem;
}

.xui-mr-7-half {
  margin-right: 7.5rem;
}

.xui-mr-8 {
  margin-right: 8rem;
}

.xui-mr-8-half {
  margin-right: 8.5rem;
}

.xui-mr-9 {
  margin-right: 9rem;
}

.xui-mr-9-half {
  margin-right: 9.5rem;
}

.xui-mr-10 {
  margin-right: 10rem;
}

.xui-mb-none {
  margin-bottom: 0;
}

.xui-mb-auto {
  margin-bottom: auto;
}

.xui-mb--half {
  margin-bottom: -.5rem;
}

.xui-mb--1 {
  margin-bottom: -1rem;
}

.xui-mb--1-half {
  margin-bottom: -1.5rem;
}

.xui-mb--2 {
  margin-bottom: -2rem;
}

.xui-mb--2-half {
  margin-bottom: -2.5rem;
}

.xui-mb--3 {
  margin-bottom: -3rem;
}

.xui-mb--3-half {
  margin-bottom: -3.5rem;
}

.xui-mb--4 {
  margin-bottom: -4rem;
}

.xui-mb--4-half {
  margin-bottom: -4.5rem;
}

.xui-mb--5 {
  margin-bottom: -5rem;
}

.xui-mb--5-half {
  margin-bottom: -5.5rem;
}

.xui-mb--6 {
  margin-bottom: -6rem;
}

.xui-mb--6-half {
  margin-bottom: -6.5rem;
}

.xui-mb--7 {
  margin-bottom: -7rem;
}

.xui-mb--7-half {
  margin-bottom: -7.5rem;
}

.xui-mb--8 {
  margin-bottom: -8rem;
}

.xui-mb--8-half {
  margin-bottom: -8.5rem;
}

.xui-mb--9 {
  margin-bottom: -9rem;
}

.xui-mb--9-half {
  margin-bottom: -9.5rem;
}

.xui-mb--10 {
  margin-bottom: -10rem;
}

.xui-mb-half {
  margin-bottom: .5rem;
}

.xui-mb-1 {
  margin-bottom: 1rem;
}

.xui-mb-1-half {
  margin-bottom: 1.5rem;
}

.xui-mb-2 {
  margin-bottom: 2rem;
}

.xui-mb-2-half {
  margin-bottom: 2.5rem;
}

.xui-mb-3 {
  margin-bottom: 3rem;
}

.xui-mb-3-half {
  margin-bottom: 3.5rem;
}

.xui-mb-4 {
  margin-bottom: 4rem;
}

.xui-mb-4-half {
  margin-bottom: 4.5rem;
}

.xui-mb-5 {
  margin-bottom: 5rem;
}

.xui-mb-5-half {
  margin-bottom: 5.5rem;
}

.xui-mb-6 {
  margin-bottom: 6rem;
}

.xui-mb-6-half {
  margin-bottom: 6.5rem;
}

.xui-mb-7 {
  margin-bottom: 7rem;
}

.xui-mb-7-half {
  margin-bottom: 7.5rem;
}

.xui-mb-8 {
  margin-bottom: 8rem;
}

.xui-mb-8-half {
  margin-bottom: 8.5rem;
}

.xui-mb-9 {
  margin-bottom: 9rem;
}

.xui-mb-9-half {
  margin-bottom: 9.5rem;
}

.xui-mb-10 {
  margin-bottom: 10rem;
}

.xui-ml-none {
  margin-left: 0;
}

.xui-ml-auto {
  margin-left: auto;
}

.xui-ml--half {
  margin-left: -.5rem;
}

.xui-ml--1 {
  margin-left: -1rem;
}

.xui-ml--1-half {
  margin-left: -1.5rem;
}

.xui-ml--2 {
  margin-left: -2rem;
}

.xui-ml--2-half {
  margin-left: -2.5rem;
}

.xui-ml--3 {
  margin-left: -3rem;
}

.xui-ml--3-half {
  margin-left: -3.5rem;
}

.xui-ml--4 {
  margin-left: -4rem;
}

.xui-ml--4-half {
  margin-left: -4.5rem;
}

.xui-ml--5 {
  margin-left: -5rem;
}

.xui-ml--5-half {
  margin-left: -5.5rem;
}

.xui-ml--6 {
  margin-left: -6rem;
}

.xui-ml--6-half {
  margin-left: -6.5rem;
}

.xui-ml--7 {
  margin-left: -7rem;
}

.xui-ml--7-half {
  margin-left: -7.5rem;
}

.xui-ml--8 {
  margin-left: -8rem;
}

.xui-ml--8-half {
  margin-left: -8.5rem;
}

.xui-ml--9 {
  margin-left: -9rem;
}

.xui-ml--9-half {
  margin-left: -9.5rem;
}

.xui-ml--10 {
  margin-left: -10rem;
}

.xui-ml-half {
  margin-left: .5rem;
}

.xui-ml-1 {
  margin-left: 1rem;
}

.xui-ml-1-half {
  margin-left: 1.5rem;
}

.xui-ml-2 {
  margin-left: 2rem;
}

.xui-ml-2-half {
  margin-left: 2.5rem;
}

.xui-ml-3 {
  margin-left: 3rem;
}

.xui-ml-3-half {
  margin-left: 3.5rem;
}

.xui-ml-4 {
  margin-left: 4rem;
}

.xui-ml-4-half {
  margin-left: 4.5rem;
}

.xui-ml-5 {
  margin-left: 5rem;
}

.xui-ml-5-half {
  margin-left: 5.5rem;
}

.xui-ml-6 {
  margin-left: 6rem;
}

.xui-ml-6-half {
  margin-left: 6.5rem;
}

.xui-ml-7 {
  margin-left: 7rem;
}

.xui-ml-7-half {
  margin-left: 7.5rem;
}

.xui-ml-8 {
  margin-left: 8rem;
}

.xui-ml-8-half {
  margin-left: 8.5rem;
}

.xui-ml-9 {
  margin-left: 9rem;
}

.xui-ml-9-half {
  margin-left: 9.5rem;
}

.xui-ml-10 {
  margin-left: 10rem;
}

.xui-mx-none {
  margin-left: 0;
  margin-right: 0;
}

.xui-mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.xui-mx-half {
  margin-left: .5rem;
  margin-right: .5rem;
}

.xui-mx-1 {
  margin-left: 1rem;
  margin-right: 1rem;
}

.xui-mx-1-half {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.xui-mx-2 {
  margin-left: 2rem;
  margin-right: 2rem;
}

.xui-mx-2-half {
  margin-left: 2.5rem;
  margin-right: 2.5rem;
}

.xui-mx-3 {
  margin-left: 3rem;
  margin-right: 3rem;
}

.xui-mx-3-half {
  margin-left: 3.5rem;
  margin-right: 3.5rem;
}

.xui-mx-4 {
  margin-left: 4rem;
  margin-right: 4rem;
}

.xui-mx-4-half {
  margin-left: 4.5rem;
  margin-right: 4.5rem;
}

.xui-mx-5 {
  margin-left: 5rem;
  margin-right: 5rem;
}

.xui-mx-5-half {
  margin-left: 5.5rem;
  margin-right: 5.5rem;
}

.xui-mx-6 {
  margin-left: 6rem;
  margin-right: 6rem;
}

.xui-mx-6-half {
  margin-left: 6.5rem;
  margin-right: 6.5rem;
}

.xui-mx-7 {
  margin-left: 7rem;
  margin-right: 7rem;
}

.xui-mx-7-half {
  margin-left: 7.5rem;
  margin-right: 7.5rem;
}

.xui-mx-8 {
  margin-left: 8rem;
  margin-right: 8rem;
}

.xui-mx-8-half {
  margin-left: 8.5rem;
  margin-right: 8.5rem;
}

.xui-mx-9 {
  margin-left: 9rem;
  margin-right: 9rem;
}

.xui-mx-9-half {
  margin-left: 9.5rem;
  margin-right: 9.5rem;
}

.xui-mx-10 {
  margin-left: 10rem;
  margin-right: 10rem;
}

.xui-my-none {
  margin-top: 0;
  margin-bottom: 0;
}

.xui-my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

.xui-my-half {
  margin-top: .5rem;
  margin-bottom: .5rem;
}

.xui-my-1 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.xui-my-1-half {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.xui-my-2 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.xui-my-2-half {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

.xui-my-3 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.xui-my-3-half {
  margin-top: 3.5rem;
  margin-bottom: 3.5rem;
}

.xui-my-4 {
  margin-top: 4rem;
  margin-bottom: 4rem;
}

.xui-my-4-half {
  margin-top: 4.5rem;
  margin-bottom: 4.5rem;
}

.xui-my-5 {
  margin-top: 5rem;
  margin-bottom: 5rem;
}

.xui-my-5-half {
  margin-top: 5.5rem;
  margin-bottom: 5.5rem;
}

.xui-my-6 {
  margin-top: 6rem;
  margin-bottom: 6rem;
}

.xui-my-6-half {
  margin-top: 6.5rem;
  margin-bottom: 6.5rem;
}

.xui-my-7 {
  margin-top: 7rem;
  margin-bottom: 7rem;
}

.xui-my-7-half {
  margin-top: 7.5rem;
  margin-bottom: 7.5rem;
}

.xui-my-8 {
  margin-top: 8rem;
  margin-bottom: 8rem;
}

.xui-my-8-half {
  margin-top: 8.5rem;
  margin-bottom: 8.5rem;
}

.xui-my-9 {
  margin-top: 9rem;
  margin-bottom: 9rem;
}

.xui-my-9-half {
  margin-top: 9.5rem;
  margin-bottom: 9.5rem;
}

.xui-my-10 {
  margin-top: 10rem;
  margin-bottom: 10rem;
}





/*Paddings*/
.xui-p-none {
  padding: 0;
}

.xui-p-auto {
  padding: auto;
}

.xui-p-inherit {
  padding: inherit;
}

.xui-p-unset {
  padding: unset;
}

.xui-p-all {
  padding: all;
}

.xui-p-initial {
  padding: initial;
}

.xui-p-half {
  padding: .5rem;
}

.xui-p-1 {
  padding: 1rem;
}

.xui-p-1-half {
  padding: 1.5rem;
}

.xui-p-2 {
  padding: 2rem;
}

.xui-p-2-half {
  padding: 2.5rem;
}

.xui-p-3 {
  padding: 3rem;
}

.xui-p-3-half {
  padding: 3.5rem;
}

.xui-p-4 {
  padding: 4rem;
}

.xui-p-4-half {
  padding: 4.5rem;
}

.xui-p-5 {
  padding: 5rem;
}

.xui-p-5-half {
  padding: 5.5rem;
}

.xui-p-6 {
  padding: 6rem;
}

.xui-p-6-half {
  padding: 6.5rem;
}

.xui-p-7 {
  padding: 7rem;
}

.xui-p-7-half {
  padding: 7.5rem;
}

.xui-p-8 {
  padding: 8rem;
}

.xui-p-8-half {
  padding: 8.5rem;
}

.xui-p-9 {
  padding: 9rem;
}

.xui-p-9-half {
  padding: 9.5rem;
}

.xui-p-10 {
  padding: 10rem;
}

.xui-pt-none {
  padding-top: 0;
}

.xui-pt-auto {
  padding-top: auto;
}

.xui-pt-half {
  padding-top: .5rem;
}

.xui-pt-1 {
  padding-top: 1rem;
}

.xui-pt-1-half {
  padding-top: 1.5rem;
}

.xui-pt-2 {
  padding-top: 2rem;
}

.xui-pt-2-half {
  padding-top: 2.5rem;
}

.xui-pt-3 {
  padding-top: 3rem;
}

.xui-pt-3-half {
  padding-top: 3.5rem;
}

.xui-pt-4 {
  padding-top: 4rem;
}

.xui-pt-4-half {
  padding-top: 4.5rem;
}

.xui-pt-5 {
  padding-top: 5rem;
}

.xui-pt-5-half {
  padding-top: 5.5rem;
}

.xui-pt-6 {
  padding-top: 6rem;
}

.xui-pt-6-half {
  padding-top: 6.5rem;
}

.xui-pt-7 {
  padding-top: 7rem;
}

.xui-pt-7-half {
  padding-top: 7.5rem;
}

.xui-pt-8 {
  padding-top: 8rem;
}

.xui-pt-8-half {
  padding-top: 8.5rem;
}

.xui-pt-9 {
  padding-top: 9rem;
}

.xui-pt-9-half {
  padding-top: 9.5rem;
}

.xui-pt-10 {
  padding-top: 10rem;
}

.xui-pr-none {
  padding-right: 0;
}

.xui-pr-auto {
  padding-right: auto;
}

.xui-pr-half {
  padding-right: .5rem;
}

.xui-pr-1 {
  padding-right: 1rem;
}

.xui-pr-1-half {
  padding-right: 1.5rem;
}

.xui-pr-2 {
  padding-right: 2rem;
}

.xui-pr-2-half {
  padding-right: 2.5rem;
}

.xui-pr-3 {
  padding-right: 3rem;
}

.xui-pr-3-half {
  padding-right: 3.5rem;
}

.xui-pr-4 {
  padding-right: 4rem;
}

.xui-pr-4-half {
  padding-right: 4.5rem;
}

.xui-pr-5 {
  padding-right: 5rem;
}

.xui-pr-5-half {
  padding-right: 5.5rem;
}

.xui-pr-6 {
  padding-right: 6rem;
}

.xui-pr-6-half {
  padding-right: 6.5rem;
}

.xui-pr-7 {
  padding-right: 7rem;
}

.xui-pr-7-half {
  padding-right: 7.5rem;
}

.xui-pr-8 {
  padding-right: 8rem;
}

.xui-pr-8-half {
  padding-right: 8.5rem;
}

.xui-pr-9 {
  padding-right: 9rem;
}

.xui-pr-9-half {
  padding-right: 9.5rem;
}

.xui-pr-10 {
  padding-right: 10rem;
}

.xui-pb-none {
  padding-bottom: 0;
}

.xui-pb-auto {
  padding-bottom: auto;
}

.xui-pb-half {
  padding-bottom: .5rem;
}

.xui-pb-1 {
  padding-bottom: 1rem;
}

.xui-pb-1-half {
  padding-bottom: 1.5rem;
}

.xui-pb-2 {
  padding-bottom: 2rem;
}

.xui-pb-2-half {
  padding-bottom: 2.5rem;
}

.xui-pb-3 {
  padding-bottom: 3rem;
}

.xui-pb-3-half {
  padding-bottom: 3.5rem;
}

.xui-pb-4 {
  padding-bottom: 4rem;
}

.xui-pb-4-half {
  padding-bottom: 4.5rem;
}

.xui-pb-5 {
  padding-bottom: 5rem;
}

.xui-pb-5-half {
  padding-bottom: 5.5rem;
}

.xui-pb-6 {
  padding-bottom: 6rem;
}

.xui-pb-6-half {
  padding-bottom: 6.5rem;
}

.xui-pb-7 {
  padding-bottom: 7rem;
}

.xui-pb-7-half {
  padding-bottom: 7.5rem;
}

.xui-pb-8 {
  padding-bottom: 8rem;
}

.xui-pb-8-half {
  padding-bottom: 8.5rem;
}

.xui-pb-9 {
  padding-bottom: 9rem;
}

.xui-pb-9-half {
  padding-bottom: 9.5rem;
}

.xui-pb-10 {
  padding-bottom: 10rem;
}

.xui-pl-none {
  padding-left: 0;
}

.xui-pl-auto {
  padding-left: auto;
}

.xui-pl-half {
  padding-left: .5rem;
}

.xui-pl-1 {
  padding-left: 1rem;
}

.xui-pl-1-half {
  padding-left: 1.5rem;
}

.xui-pl-2 {
  padding-left: 2rem;
}

.xui-pl-2-half {
  padding-left: 2.5rem;
}

.xui-pl-3 {
  padding-left: 3rem;
}

.xui-pl-3-half {
  padding-left: 3.5rem;
}

.xui-pl-4 {
  padding-left: 4rem;
}

.xui-pl-4-half {
  padding-left: 4.5rem;
}

.xui-pl-5 {
  padding-left: 5rem;
}

.xui-pl-5-half {
  padding-left: 5.5rem;
}

.xui-pl-6 {
  padding-left: 6rem;
}

.xui-pl-6-half {
  padding-left: 6.5rem;
}

.xui-pl-7 {
  padding-left: 7rem;
}

.xui-pl-7-half {
  padding-left: 7.5rem;
}

.xui-pl-8 {
  padding-left: 8rem;
}

.xui-pl-8-half {
  padding-left: 8.5rem;
}

.xui-pl-9 {
  padding-left: 9rem;
}

.xui-pl-9-half {
  padding-left: 9.5rem;
}

.xui-pl-10 {
  padding-left: 10rem;
}

.xui-px-none {
  padding-left: 0;
  padding-right: 0;
}

.xui-px-auto {
  padding-left: auto;
  padding-right: auto;
}

.xui-px-half {
  padding-left: .5rem;
  padding-right: .5rem;
}

.xui-px-1 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.xui-px-1-half {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.xui-px-2 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.xui-px-2-half {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.xui-px-3 {
  padding-left: 3rem;
  padding-right: 3rem;
}

.xui-px-3-half {
  padding-left: 3.5rem;
  padding-right: 3.5rem;
}

.xui-px-4 {
  padding-left: 4rem;
  padding-right: 4rem;
}

.xui-px-4-half {
  padding-left: 4.5rem;
  padding-right: 4.5rem;
}

.xui-px-5 {
  padding-left: 5rem;
  padding-right: 5rem;
}

.xui-px-5-half {
  padding-left: 5.5rem;
  padding-right: 5.5rem;
}

.xui-px-6 {
  padding-left: 6rem;
  padding-right: 6rem;
}

.xui-px-6-half {
  padding-left: 6.5rem;
  padding-right: 6.5rem;
}

.xui-px-7 {
  padding-left: 7rem;
  padding-right: 7rem;
}

.xui-px-7-half {
  padding-left: 7.5rem;
  padding-right: 7.5rem;
}

.xui-px-8 {
  padding-left: 8rem;
  padding-right: 8rem;
}

.xui-px-8-half {
  padding-left: 8.5rem;
  padding-right: 8.5rem;
}

.xui-px-9 {
  padding-left: 9rem;
  padding-right: 9rem;
}

.xui-px-9-half {
  padding-left: 9.5rem;
  padding-right: 9.5rem;
}

.xui-px-10 {
  padding-left: 10rem;
  padding-right: 10rem;
}

.xui-py-none {
  padding-top: 0;
  padding-bottom: 0;
}

.xui-py-auto {
  padding-top: auto;
  padding-bottom: auto;
}

.xui-py-half {
  padding-top: .5rem;
  padding-bottom: .5rem;
}

.xui-py-1 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.xui-py-1-half {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.xui-py-2 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.xui-py-2-half {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.xui-py-3 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.xui-py-3-half {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.xui-py-4 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.xui-py-4-half {
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}

.xui-py-5 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.xui-py-5-half {
  padding-top: 5.5rem;
  padding-bottom: 5.5rem;
}

.xui-py-6 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.xui-py-6-half {
  padding-top: 6.5rem;
  padding-bottom: 6.5rem;
}

.xui-py-7 {
  padding-top: 7rem;
  padding-bottom: 7rem;
}

.xui-py-7-half {
  padding-top: 7.5rem;
  padding-bottom: 7.5rem;
}

.xui-py-8 {
  padding-top: 8rem;
  padding-bottom: 8rem;
}

.xui-py-8-half {
  padding-top: 8.5rem;
  padding-bottom: 8.5rem;
}

.xui-py-9 {
  padding-top: 9rem;
  padding-bottom: 9rem;
}

.xui-py-9-half {
  padding-top: 9.5rem;
  padding-bottom: 9.5rem;
}

.xui-py-10 {
  padding-top: 10rem;
  padding-bottom: 10rem;
}




/*Grids*/
.xui-grid-row-1 {
  grid-template-rows: repeat(1, 1fr);
}

.xui-grid-row-2 {
  grid-template-rows: repeat(2, 1fr);
}

.xui-grid-row-3 {
  grid-template-rows: repeat(3, 1fr);
}

.xui-grid-row-4 {
  grid-template-rows: repeat(4, 1fr);
}

.xui-grid-row-5 {
  grid-template-rows: repeat(5, 1fr);
}

.xui-grid-row-6 {
  grid-template-rows: repeat(6, 1fr);
}

.xui-grid-row-7 {
  grid-template-rows: repeat(7, 1fr);
}

.xui-grid-row-8 {
  grid-template-rows: repeat(8, 1fr);
}

.xui-grid-row-9 {
  grid-template-rows: repeat(9, 1fr);
}

.xui-grid-row-10 {
  grid-template-rows: repeat(10, 1fr);
}

.xui-grid-row-11 {
  grid-template-rows: repeat(11, 1fr);
}

.xui-grid-row-12 {
  grid-template-rows: repeat(12, 1fr);
}

.xui-grid-col-1 {
  grid-template-columns: repeat(1, 1fr);
}

.xui-grid-col-2 {
  grid-template-columns: repeat(2, 1fr);
}

.xui-grid-col-3 {
  grid-template-columns: repeat(3, 1fr);
}

.xui-grid-col-4 {
  grid-template-columns: repeat(4, 1fr);
}

.xui-grid-col-5 {
  grid-template-columns: repeat(5, 1fr);
}

.xui-grid-col-6 {
  grid-template-columns: repeat(6, 1fr);
}

.xui-grid-col-7 {
  grid-template-columns: repeat(7, 1fr);
}

.xui-grid-col-8 {
  grid-template-columns: repeat(8, 1fr);
}

.xui-grid-col-9 {
  grid-template-columns: repeat(9, 1fr);
}

.xui-grid-col-10 {
  grid-template-columns: repeat(10, 1fr);
}

.xui-grid-col-11 {
  grid-template-columns: repeat(11, 1fr);
}

.xui-grid-col-12 {
  grid-template-columns: repeat(12, 1fr);
}

.xui-grid-gap-none {
  grid-gap: 0;
}

.xui-grid-gap-half {
  grid-gap: .5rem;
}

.xui-grid-gap-1 {
  grid-gap: 1rem;
}

.xui-grid-gap-1-half {
  grid-gap: 1.5rem;
}

.xui-grid-gap-2 {
  grid-gap: 2rem;
}

.xui-grid-gap-2-half {
  grid-gap: 2.5rem;
}

.xui-grid-gap-3 {
  grid-gap: 3rem;
}

.xui-grid-gap-3-half {
  grid-gap: 3.5rem;
}

.xui-grid-gap-4 {
  grid-gap: 4rem;
}

.xui-grid-gap-4-half {
  grid-gap: 4.5rem;
}

.xui-grid-gap-5 {
  grid-gap: 5rem;
}

.xui-grid-gap-5-half {
  grid-gap: 5.5rem;
}

.xui-grid-gap-6 {
  grid-gap: 6rem;
}

.xui-grid-gap-6-half {
  grid-gap: 6.5rem;
}

.xui-grid-gap-7 {
  grid-gap: 7rem;
}

.xui-grid-gap-7-half {
  grid-gap: 7.5rem;
}

.xui-grid-gap-8 {
  grid-gap: 8rem;
}

.xui-grid-gap-8-half {
  grid-gap: 8.5rem;
}

.xui-grid-gap-9 {
  grid-gap: 9rem;
}

.xui-grid-gap-9-half {
  grid-gap: 9.5rem;
}

.xui-grid-gap-10 {
  grid-gap: 10rem;
}

.xui-grid-row-gap-none {
  grid-row-gap: 0;
}

.xui-grid-row-gap-half {
  grid-row-gap: .5rem;
}

.xui-grid-row-gap-1 {
  grid-row-gap: 1rem;
}

.xui-grid-row-gap-1-half {
  grid-row-gap: 1.5rem;
}

.xui-grid-row-gap-2 {
  grid-row-gap: 2rem;
}

.xui-grid-row-gap-2-half {
  grid-row-gap: 2.5rem;
}

.xui-grid-row-gap-3 {
  grid-row-gap: 3rem;
}

.xui-grid-row-gap-3-half {
  grid-row-gap: 3.5rem;
}

.xui-grid-row-gap-4 {
  grid-row-gap: 4rem;
}

.xui-grid-row-gap-4-half {
  grid-row-gap: 4.5rem;
}

.xui-grid-row-gap-5 {
  grid-row-gap: 5rem;
}

.xui-grid-row-gap-5-half {
  grid-row-gap: 5.5rem;
}

.xui-grid-row-gap-6 {
  grid-row-gap: 6rem;
}

.xui-grid-row-gap-6-half {
  grid-row-gap: 6.5rem;
}

.xui-grid-row-gap-7 {
  grid-row-gap: 7rem;
}

.xui-grid-row-gap-7-half {
  grid-row-gap: 7.5rem;
}

.xui-grid-row-gap-8 {
  grid-row-gap: 8rem;
}

.xui-grid-row-gap-8-half {
  grid-row-gap: 8.5rem;
}

.xui-grid-row-gap-9 {
  grid-row-gap: 9rem;
}

.xui-grid-row-gap-9-half {
  grid-row-gap: 9.5rem;
}

.xui-grid-row-gap-10 {
  grid-row-gap: 10rem;
}

.xui-grid-column-gap-none {
  grid-column-gap: 0;
}

.xui-grid-column-gap-half {
  grid-column-gap: .5rem;
}

.xui-grid-column-gap-1 {
  grid-column-gap: 1rem;
}

.xui-grid-column-gap-1-half {
  grid-column-gap: 1.5rem;
}

.xui-grid-column-gap-2 {
  grid-column-gap: 2rem;
}

.xui-grid-column-gap-2-half {
  grid-column-gap: 2.5rem;
}

.xui-grid-column-gap-3 {
  grid-column-gap: 3rem;
}

.xui-grid-column-gap-3-half {
  grid-column-gap: 3.5rem;
}

.xui-grid-column-gap-4 {
  grid-column-gap: 4rem;
}

.xui-grid-column-gap-4-half {
  grid-column-gap: 4.5rem;
}

.xui-grid-column-gap-5 {
  grid-column-gap: 5rem;
}

.xui-grid-column-gap-5-half {
  grid-column-gap: 5.5rem;
}

.xui-grid-column-gap-6 {
  grid-column-gap: 6rem;
}

.xui-grid-column-gap-6-half {
  grid-column-gap: 6.5rem;
}

.xui-grid-column-gap-7 {
  grid-column-gap: 7rem;
}

.xui-grid-column-gap-7-half {
  grid-column-gap: 7.5rem;
}

.xui-grid-column-gap-8 {
  grid-column-gap: 8rem;
}

.xui-grid-column-gap-8-half {
  grid-column-gap: 8.5rem;
}

.xui-grid-column-gap-9 {
  grid-column-gap: 9rem;
}

.xui-grid-column-gap-9-half {
  grid-column-gap: 9.5rem;
}

.xui-grid-column-gap-10 {
  grid-column-gap: 10rem;
}



/*Flexes*/
.xui-flex-jc-start,
.xui-flex-jc-flex-start {
  justify-content: flex-start;
}

.xui-flex-jc-end,
.xui-flex-jc-flex-end {
  justify-content: flex-end;
}

.xui-flex-jc-space-between {
  justify-content: space-between;
}

.xui-flex-jc-space-around {
  justify-content: space-around;
}

.xui-flex-jc-space-evenly {
  justify-content: space-evenly;
}

.xui-flex-jc-center {
  justify-content: center;
}

.xui-flex-jc-initial {
  justify-content: initial;
}

.xui-flex-jc-inherit {
  justify-content: inherit;
}

.xui-flex-ai-stretch {
  align-items: stretch;
}

.xui-flex-ai-center {
  align-items: center;
}

.xui-flex-ai-flex-start {
  align-items: flex-start;
}

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

.xui-flex-ai-baseline {
  align-items: baseline;
}

.xui-flex-ai-initial {
  align-items: initial;
}

.xui-flex-ai-inherit {
  align-items: inherit;
}

.xui-flex-wrap-wrap {
  flex-wrap: wrap;
}

.xui-flex-wrap-nowrap {
  flex-wrap: nowrap;
}

.xui-flex-wrap-wrap-reverse {
  flex-wrap: wrap-reverse;
}

.xui-flex-wrap-inherit {
  flex-wrap: inherit;
}

.xui-flex-wrap-initial {
  flex-wrap: initial;
}

.xui-flex-dir-row {
  flex-direction: row;
}

.xui-flex-dir-row-reverse {
  flex-direction: row-reverse;
}

.xui-flex-dir-column {
  flex-direction: column;
}

.xui-flex-dir-column-reverse {
  flex-direction: column-reverse;
}

.xui-flex-dir-initial {
  flex-direction: initial;
}

.xui-flex-dir-inherit {
  flex-direction: inherit;
}

.xui-flex-grow-0 {
  flex-grow: 0;
}

.xui-flex-grow-1 {
  flex-grow: 1;
}

.xui-flex-grow-2 {
  flex-grow: 2;
}

.xui-flex-grow-3 {
  flex-grow: 3;
}

.xui-flex-grow-4 {
  flex-grow: 4;
}

.xui-flex-grow-5 {
  flex-grow: 5;
}

.xui-flex-grow-initial {
  flex-grow: initial;
}

.xui-flex-grow-inherit {
  flex-grow: inherit;
}

.xui-flex-shrink-0 {
  flex-shrink: 0;
}

.xui-flex-shrink-1 {
  flex-shrink: 1;
}

.xui-flex-shrink-2 {
  flex-shrink: 2;
}

.xui-flex-shrink-3 {
  flex-shrink: 3;
}

.xui-flex-shrink-4 {
  flex-shrink: 4;
}

.xui-flex-shrink-5 {
  flex-shrink: 5;
}

.xui-flex-shrink-initial {
  flex-shrink: initial;
}

.xui-flex-shrink-inherit {
  flex-shrink: inherit;
}

.xui-flex-basis-auto,
.xui-basis-auto {
  flex-basis: auto;
}

.xui-flex-basis-0,
.xui-basis-0 {
  flex-basis: 0%;
}

.xui-flex-basis-full,
.xui-flex-basis-100,
.xui-basis-full,
.xui-basis-100 {
  flex-basis: 100%;
}

/* flex: 1 1 0%; - Grow and shrink, filling available space */
.xui-flex-1 {
  flex: 1 1 0%;
}

.xui-flex-2 {
  flex: 2 1 0%;
}

.xui-flex-3 {
  flex: 3 1 0%;
}

.xui-flex-4 {
  flex: 4 1 0%;
}

.xui-flex-5 {
  flex: 5 1 0%;
}

/* flex: 1 1 auto; - Grow and shrink, starting from content size */
.xui-flex-auto {
  flex: 1 1 auto;
}

/* flex: 0 1 auto; - Shrink, but do not grow */
.xui-flex-initial {
  flex: 0 1 auto;
}

/* flex: 0 0 auto; - Do not grow, do not shrink (fixed size) */
.xui-flex-none {
  flex: 0 0 auto;
}




/* The Modern Way for Gaps That Applies to Grid & Flexbox */
.xui-gap-none {
  gap: 0;
}

.xui-gap-half {
  gap: .5rem;
}

.xui-gap-1 {
  gap: 1rem;
}

.xui-gap-1-half {
  gap: 1.5rem;
}

.xui-gap-2 {
  gap: 2rem;
}

.xui-gap-2-half {
  gap: 2.5rem;
}

.xui-gap-3 {
  gap: 3rem;
}

.xui-gap-3-half {
  gap: 3.5rem;
}

.xui-gap-4 {
  gap: 4rem;
}

.xui-gap-4-half {
  gap: 4.5rem;
}

.xui-gap-5 {
  gap: 5rem;
}

.xui-gap-5-half {
  gap: 5.5rem;
}

.xui-gap-6 {
  gap: 6rem;
}

.xui-gap-6-half {
  gap: 6.5rem;
}

.xui-gap-7 {
  gap: 7rem;
}

.xui-gap-7-half {
  gap: 7.5rem;
}

.xui-gap-8 {
  gap: 8rem;
}

.xui-gap-8-half {
  gap: 8.5rem;
}

.xui-gap-9 {
  gap: 9rem;
}

.xui-gap-9-half {
  gap: 9.5rem;
}

.xui-gap-10 {
  gap: 10rem;
}

.xui-row-gap-none {
  row-gap: 0;
}

.xui-row-gap-half {
  row-gap: .5rem;
}

.xui-row-gap-1 {
  row-gap: 1rem;
}

.xui-row-gap-1-half {
  row-gap: 1.5rem;
}

.xui-row-gap-2 {
  row-gap: 2rem;
}

.xui-row-gap-2-half {
  row-gap: 2.5rem;
}

.xui-row-gap-3 {
  row-gap: 3rem;
}

.xui-row-gap-3-half {
  row-gap: 3.5rem;
}

.xui-row-gap-4 {
  row-gap: 4rem;
}

.xui-row-gap-4-half {
  row-gap: 4.5rem;
}

.xui-row-gap-5 {
  row-gap: 5rem;
}

.xui-row-gap-5-half {
  row-gap: 5.5rem;
}

.xui-row-gap-6 {
  row-gap: 6rem;
}

.xui-row-gap-6-half {
  row-gap: 6.5rem;
}

.xui-row-gap-7 {
  row-gap: 7rem;
}

.xui-row-gap-7-half {
  row-gap: 7.5rem;
}

.xui-row-gap-8 {
  row-gap: 8rem;
}

.xui-row-gap-8-half {
  row-gap: 8.5rem;
}

.xui-row-gap-9 {
  row-gap: 9rem;
}

.xui-row-gap-9-half {
  row-gap: 9.5rem;
}

.xui-row-gap-10 {
  row-gap: 10rem;
}

.xui-column-gap-none {
  column-gap: 0;
}

.xui-column-gap-half {
  column-gap: .5rem;
}

.xui-column-gap-1 {
  column-gap: 1rem;
}

.xui-column-gap-1-half {
  column-gap: 1.5rem;
}

.xui-column-gap-2 {
  column-gap: 2rem;
}

.xui-column-gap-2-half {
  column-gap: 2.5rem;
}

.xui-column-gap-3 {
  column-gap: 3rem;
}

.xui-column-gap-3-half {
  column-gap: 3.5rem;
}

.xui-column-gap-4 {
  column-gap: 4rem;
}

.xui-column-gap-4-half {
  column-gap: 4.5rem;
}

.xui-column-gap-5 {
  column-gap: 5rem;
}

.xui-column-gap-5-half {
  column-gap: 5.5rem;
}

.xui-column-gap-6 {
  column-gap: 6rem;
}

.xui-column-gap-6-half {
  column-gap: 6.5rem;
}

.xui-column-gap-7 {
  column-gap: 7rem;
}

.xui-column-gap-7-half {
  column-gap: 7.5rem;
}

.xui-column-gap-8 {
  column-gap: 8rem;
}

.xui-column-gap-8-half {
  column-gap: 8.5rem;
}

.xui-column-gap-9 {
  column-gap: 9rem;
}

.xui-column-gap-9-half {
  column-gap: 9.5rem;
}

.xui-column-gap-10 {
  column-gap: 10rem;
}




/* List Styles */
.xui-lst-disc .xui-list-style-type-disc {
  list-style-type: disc;
}

.xui-lst-armenian,
.xui-list-style-type-armenian {
  list-style-type: armenian;
}

.xui-lst-circle,
.xui-list-style-type-circle {
  list-style-type: circle;
}

.xui-lst-cjk,
.xui-lst-cjk-ideographic,
.xui-list-style-type-cjk,
.xui-list-style-type-cjk-ideographic {
  list-style-type: cjk-ideographic;
}

.xui-lst-decimal,
.xui-list-style-type-decimal {
  list-style-type: decimal;
}

.xui-lst-decimal-leading-zero,
.xui-list-style-type-decimal-leading-zero {
  list-style-type: decimal-leading-zero;
}

.xui-lst-georgian,
.xui-list-style-type-georgian {
  list-style-type: georgian;
}

.xui-lst-hebrew,
.xui-list-style-type-hebrew {
  list-style-type: hebrew;
}

.xui-lst-hebrew,
.xui-list-style-type-hebrew {
  list-style-type: hebrew;
}

.xui-lst-hiragana,
.xui-list-style-type-hiragana {
  list-style-type: hiragana;
}

.xui-lst-hiragana-iroha,
.xui-list-style-type-hiragana-iroha {
  list-style-type: hiragana-iroha;
}

.xui-lst-katakana,
.xui-list-style-type-katakana {
  list-style-type: katakana;
}

.xui-lst-katakana-iroha,
.xui-list-style-type-katakana-iroha {
  list-style-type: katakana-iroha;
}

.xui-lst-lower-alpha,
.xui-list-style-type-lower-alpha {
  list-style-type: lower-alpha;
}

.xui-lst-lower-greek,
.xui-list-style-type-lower-greek {
  list-style-type: lower-greek;
}

.xui-lst-lower-latin,
.xui-list-style-type-lower-latin {
  list-style-type: lower-latin;
}

.xui-lst-lower-roman,
.xui-list-style-type-lower-roman {
  list-style-type: lower-roman;
}

.xui-lst-none,
.xui-list-style-type-none {
  list-style-type: none;
}

.xui-lst-square,
.xui-list-style-type-square {
  list-style-type: square;
}

.xui-lst-upper-alpha,
.xui-list-style-type-upper-alpha {
  list-style-type: upper-alpha;
}

.xui-lst-upper-greek,
.xui-list-style-type-upper-greek {
  list-style-type: upper-greek;
}

.xui-lst-upper-latin,
.xui-list-style-type-upper-latin {
  list-style-type: upper-latin;
}

.xui-lst-upper-roman,
.xui-list-style-type-upper-roman {
  list-style-type: upper-roman;
}

.xui-lst-initial,
.xui-list-style-type-initial {
  list-style-type: initial;
}

.xui-lst-inherit,
.xui-list-style-type-inherit {
  list-style-type: inherit;
}

.xui-lsp-inside,
.xui-list-style-position-inside {
  list-style-position: inside;
}

.xui-lsp-outside,
.xui-list-style-position-outside {
  list-style-position: outside;
}

.xui-lsp-initial,
.xui-list-style-position-initial {
  list-style-position: initial;
}

.xui-lsp-inherit,
.xui-list-style-position-inherit {
  list-style-position: inherit;
}









/*XUI BreakPoints*/
/*Small devices (landscape phones, 576px and up)*/
@media screen and (min-width: 576px) {

  .xui-sm-z-index-auto {
    z-index: auto;
  }

  .xui-sm-z-index-initial {
    z-index: initial;
  }

  .xui-sm-z-index-inherit {
    z-index: inherit;
  }

  .xui-sm-z-index-1 {
    z-index: 1;
  }

  .xui-sm-z-index-1 {
    z-index: 1;
  }

  .xui-sm-z-index-2 {
    z-index: 2;
  }

  .xui-sm-z-index-3 {
    z-index: 3;
  }

  .xui-sm-z-index-4 {
    z-index: 4;
  }

  .xui-sm-z-index-5 {
    z-index: 5;
  }

  .xui-sm-z-index-6 {
    z-index: 6;
  }

  .xui-sm-z-index-7 {
    z-index: 7;
  }

  .xui-sm-z-index-8 {
    z-index: 8;
  }

  .xui-sm-z-index-9 {
    z-index: 9;
  }

  .xui-sm-z-index-10 {
    z-index: 10;
  }

  .xui-sm-z-index--1 {
    z-index: -1;
  }

  .xui-sm-z-index--1 {
    z-index: -1;
  }

  .xui-sm-z-index--2 {
    z-index: -2;
  }

  .xui-sm-z-index--3 {
    z-index: -3;
  }

  .xui-sm-z-index--4 {
    z-index: -4;
  }

  .xui-sm-z-index--5 {
    z-index: -5;
  }

  .xui-sm-z-index--6 {
    z-index: -6;
  }

  .xui-sm-z-index--7 {
    z-index: -7;
  }

  .xui-sm-z-index--8 {
    z-index: -8;
  }

  .xui-sm-z-index--9 {
    z-index: -9;
  }

  .xui-sm-z-index--10 {
    z-index: -10;
  }



  /*Columns*/
  .xui-sm-columns-auto {
    columns: auto;
  }

  .xui-sm-columns-initial {
    columns: initial;
  }

  .xui-sm-columns-inherit {
    columns: inherit;
  }

  .xui-sm-column-width-auto {
    column-width: auto;
  }

  .xui-sm-column-width-inherit {
    column-width: inherit;
  }

  .xui-sm-column-width-initial {
    column-width: initial;
  }

  .xui-sm-column-count-1 {
    column-count: 1;
  }

  .xui-sm-column-count-2 {
    column-count: 2;
  }

  .xui-sm-column-count-3 {
    column-count: 3;
  }

  .xui-sm-column-count-4 {
    column-count: 4;
  }

  .xui-sm-column-count-5 {
    column-count: 5;
  }

  .xui-sm-column-count-6 {
    column-count: 6;
  }

  .xui-sm-column-count-7 {
    column-count: 7;
  }

  .xui-sm-column-count-8 {
    column-count: 8;
  }

  .xui-sm-column-count-9 {
    column-count: 9;
  }

  .xui-sm-column-count-10 {
    column-count: 10;
  }

  .xui-sm-column-count-11 {
    column-count: 11;
  }

  .xui-sm-column-count-12 {
    column-count: 12;
  }

  .xui-sm-column-fill-balance {
    column-fill: balance;
  }

  .xui-sm-column-fill-auto {
    column-fill: auto;
  }

  .xui-sm-column-fill-initial {
    column-fill: initial;
  }

  .xui-sm-column-fill-inherit {
    column-fill: inherit;
  }

  .xui-sm-column-gap-normal {
    column-gap: normal;
  }

  .xui-sm-column-gap-initial {
    column-gap: initial;
  }

  .xui-sm-column-gap-inherit {
    column-gap: inherit;
  }

  .xui-sm-column-gap-half {
    column-gap: .5rem;
  }

  .xui-sm-column-gap-1 {
    column-gap: 1rem;
  }

  .xui-sm-column-gap-1-half {
    column-gap: 1.5rem;
  }

  .xui-sm-column-gap-2 {
    column-gap: 2rem;
  }

  .xui-sm-column-gap-2-half {
    column-gap: 2.5rem;
  }

  .xui-sm-column-gap-3 {
    column-gap: 3rem;
  }

  .xui-sm-column-gap-3-half {
    column-gap: 3.5rem;
  }

  .xui-sm-column-gap-4 {
    column-gap: 4rem;
  }

  .xui-sm-column-gap-4-half {
    column-gap: 4.5rem;
  }

  .xui-sm-column-gap-5 {
    column-gap: 5rem;
  }

  .xui-sm-column-span-none {
    column-span: none;
  }

  .xui-sm-column-span-all {
    column-span: all;
  }

  .xui-sm-column-span-initial {
    column-span: initial;
  }

  .xui-sm-column-span-inherit {
    column-span: inherit;
  }




  /* Rows */
  .xui-sm-row-gap-normal {
    row-gap: normal;
  }

  .xui-sm-row-gap-initial {
    row-gap: initial;
  }

  .xui-sm-row-gap-inherit {
    row-gap: inherit;
  }

  .xui-sm-row-gap-half {
    row-gap: .5rem;
  }

  .xui-sm-row-gap-1 {
    row-gap: 1rem;
  }

  .xui-sm-row-gap-1-half {
    row-gap: 1.5rem;
  }

  .xui-sm-row-gap-2 {
    row-gap: 2rem;
  }

  .xui-sm-row-gap-2-half {
    row-gap: 2.5rem;
  }

  .xui-sm-row-gap-3 {
    row-gap: 3rem;
  }

  .xui-sm-row-gap-3-half {
    row-gap: 3.5rem;
  }

  .xui-sm-row-gap-4 {
    row-gap: 4rem;
  }

  .xui-sm-row-gap-4-half {
    row-gap: 4.5rem;
  }

  .xui-sm-row-gap-5 {
    row-gap: 5rem;
  }





  /*Rows & Columns*/
  .xui-sm-col-1 {
    flex-basis: 8.3%;
  }

  .xui-sm-col-2 {
    flex-basis: 16.66%;
  }

  .xui-sm-col-3 {
    flex-basis: 25%;
  }

  .xui-sm-col-4 {
    flex-basis: 33.33%;
  }

  .xui-sm-col-5 {
    flex-basis: 41.66%;
  }

  .xui-sm-col-6 {
    flex-basis: 50%;
  }

  .xui-sm-col-7 {
    flex-basis: 58.33%;
  }

  .xui-sm-col-8 {
    flex-basis: 66.66%;
  }

  .xui-sm-col-9 {
    flex-basis: 75%;
  }

  .xui-sm-col-10 {
    flex-basis: 83.33%;
  }

  .xui-sm-col-11 {
    flex-basis: 91.66%;
  }

  .xui-sm-col-12 {
    flex-basis: 100%;
  }





  /*Line Heights & Letter Spacings*/
  .xui-sm-line-height-half {
    line-height: .5rem;
  }

  .xui-sm-line-height-1 {
    line-height: 1rem;
  }

  .xui-sm-line-height-1-half {
    line-height: 1.5rem;
  }

  .xui-sm-line-height-2 {
    line-height: 2rem;
  }

  .xui-sm-line-height-2-half {
    line-height: 2.5rem;
  }

  .xui-sm-line-height-3 {
    line-height: 3rem;
  }

  .xui-sm-line-height-3-half {
    line-height: 3.5rem;
  }

  .xui-sm-line-height-4 {
    line-height: 4rem;
  }

  .xui-sm-line-height-4-half {
    line-height: 4.5rem;
  }

  .xui-sm-line-height-5 {
    line-height: 5rem;
  }

  .xui-sm-line-height-5-half {
    line-height: 5.5rem;
  }

  .xui-sm-line-height-6 {
    line-height: 6rem;
  }

  .xui-sm-line-height-6-half {
    line-height: 6.5rem;
  }

  .xui-sm-line-height-7 {
    line-height: 7rem;
  }

  .xui-sm-line-height-7-half {
    line-height: 7.5rem;
  }

  .xui-sm-line-height-8 {
    line-height: 8rem;
  }

  .xui-sm-line-height-8-half {
    line-height: 8.5rem;
  }

  .xui-sm-line-height-9 {
    line-height: 9rem;
  }

  .xui-sm-line-height-9-half {
    line-height: 9.5rem;
  }

  .xui-sm-line-height-10 {
    line-height: 10rem;
  }

  .xui-sm-line-height-normal {
    line-height: normal;
  }

  .xui-sm-line-height-inherit {
    line-height: inherit;
  }

  .xui-sm-line-height-initial {
    line-height: initial;
  }

  .xui-sm-letter-spacing-half {
    letter-spacing: .5px;
  }

  .xui-sm-letter-spacing-1 {
    letter-spacing: 1px;
  }

  .xui-sm-letter-spacing-1-half {
    letter-spacing: .15px;
  }

  .xui-sm-letter-spacing-2 {
    letter-spacing: 2px;
  }

  .xui-sm-letter-spacing-2-half {
    letter-spacing: 2.5px;
  }

  .xui-sm-letter-spacing-3 {
    letter-spacing: 3px;
  }

  .xui-sm-letter-spacing-3-half {
    letter-spacing: 3.5px;
  }

  .xui-sm-letter-spacing-4 {
    letter-spacing: 4px;
  }

  .xui-sm-letter-spacing-4-half {
    letter-spacing: 4.5px;
  }

  .xui-sm-letter-spacing-5 {
    letter-spacing: 5px;
  }

  .xui-sm-letter-spacing-normal {
    letter-spacing: normal;
  }

  .xui-sm-letter-spacing-inherit {
    letter-spacing: inherit;
  }

  .xui-sm-letter-spacing-initial {
    letter-spacing: initial;
  }





  /*Borders*/
  .xui-sm-bdr-rad-initial {
    border-radius: initial;
  }

  .xui-sm-bdr-rad-inherit {
    border-radius: inherit;
  }

  .xui-sm-bdr-rad-half {
    border-radius: .5rem;
  }

  .xui-sm-bdr-rad-1 {
    border-radius: 1rem;
  }

  .xui-sm-bdr-rad-1-half {
    border-radius: 1.5rem;
  }

  .xui-sm-bdr-rad-2 {
    border-radius: 2rem;
  }

  .xui-sm-bdr-rad-2-half {
    border-radius: 2.5rem;
  }

  .xui-sm-bdr-rad-3 {
    border-radius: 3rem;
  }

  .xui-sm-bdr-rad-3-half {
    border-radius: 3.5rem;
  }

  .xui-sm-bdr-rad-4 {
    border-radius: 4rem;
  }

  .xui-sm-bdr-rad-4-half {
    border-radius: 4.5rem;
  }

  .xui-sm-bdr-rad-5 {
    border-radius: 5rem;
  }

  .xui-sm-bdr-rad-5-half {
    border-radius: 5.5rem;
  }

  .xui-sm-bdr-rad-6 {
    border-radius: 6rem;
  }

  .xui-sm-bdr-rad-6-half {
    border-radius: 6.5rem;
  }

  .xui-sm-bdr-rad-7 {
    border-radius: 7rem;
  }

  .xui-sm-bdr-rad-7-half {
    border-radius: 7.5rem;
  }

  .xui-sm-bdr-rad-8 {
    border-radius: 8rem;
  }

  .xui-sm-bdr-rad-8-half {
    border-radius: 8.5rem;
  }

  .xui-sm-bdr-rad-9 {
    border-radius: 9rem;
  }

  .xui-sm-bdr-rad-9-half {
    border-radius: 9.5rem;
  }

  .xui-sm-bdr-rad-10 {
    border-radius: 10rem;
  }

  .xui-sm-bdr-rad-circle,
  .xui-sm-bdr-rad-round {
    border-radius: 50%;
  }

  .xui-sm-bdr-w-medium,
  .xui-sm-bdr-width-medium {
    border-width: medium;
  }

  .xui-sm-bdr-w-thin,
  .xui-sm-bdr-width-thin {
    border-width: thin;
  }

  .xui-sm-bdr-w-thick,
  .xui-sm-bdr-width-thick {
    border-width: thick;
  }

  .xui-sm-bdr-w-initial,
  .xui-sm-bdr-width-initial {
    border-width: initial;
  }

  .xui-sm-bdr-w-inherit,
  .xui-sm-bdr-width-inherit {
    border-width: inherit;
  }

  .xui-sm-bdr-w-1,
  .xui-sm-bdr-width-1 {
    border-width: 1px !important;
  }

  .xui-sm-bdr-w-2,
  .xui-sm-bdr-width-2 {
    border-width: 2px !important;
  }

  .xui-sm-bdr-w-3,
  .xui-sm-bdr-width-3 {
    border-width: 3px !important;
  }

  .xui-sm-bdr-w-4,
  .xui-sm-bdr-width-4 {
    border-width: 4px !important;
  }

  .xui-sm-bdr-w-5,
  .xui-sm-bdr-width-5 {
    border-width: 5px !important;
  }

  .xui-sm-bdr-w-6,
  .xui-sm-bdr-width-6 {
    border-width: 6px !important;
  }

  .xui-sm-bdr-w-7,
  .xui-sm-bdr-width-7 {
    border-width: 7px !important;
  }

  .xui-sm-bdr-w-8,
  .xui-sm-bdr-width-8 {
    border-width: 8px !important;
  }

  .xui-sm-bdr-w-9,
  .xui-sm-bdr-width-9 {
    border-width: 9px !important;
  }

  .xui-sm-bdr-w-10,
  .xui-sm-bdr-width-10 {
    border-width: 10px !important;
  }

  .xui-sm-bdr-w-11,
  .xui-sm-bdr-width-11 {
    border-width: 11px !important;
  }

  .xui-sm-bdr-w-12,
  .xui-sm-bdr-width-12 {
    border-width: 12px !important;
  }

  .xui-sm-bdr-w-13,
  .xui-sm-bdr-width-13 {
    border-width: 13px !important;
  }

  .xui-sm-bdr-w-14,
  .xui-sm-bdr-width-14 {
    border-width: 14px !important;
  }

  .xui-sm-bdr-w-15,
  .xui-sm-bdr-width-15 {
    border-width: 15px !important;
  }

  .xui-sm-bdr-w-16,
  .xui-sm-bdr-width-16 {
    border-width: 16px !important;
  }

  .xui-sm-bdr-w-17,
  .xui-sm-bdr-width-17 {
    border-width: 17px !important;
  }

  .xui-sm-bdr-w-18,
  .xui-sm-bdr-width-18 {
    border-width: 18px !important;
  }

  .xui-sm-bdr-w-19,
  .xui-sm-bdr-width-19 {
    border-width: 19px !important;
  }

  .xui-sm-bdr-w-20,
  .xui-sm-bdr-width-20 {
    border-width: 20px !important;
  }

  .xui-sm-bdr-s-none,
  .xui-sm-bdr-style-none {
    border-style: none !important;
  }

  .xui-sm-bdr-s-hidden,
  .xui-sm-bdr-style-hidden {
    border-style: hidden !important;
  }

  .xui-sm-bdr-s-dotted,
  .xui-sm-bdr-style-dotted {
    border-style: dotted !important;
  }

  .xui-sm-bdr-s-dashed,
  .xui-sm-bdr-style-dashed {
    border-style: dashed !important;
  }

  .xui-sm-bdr-s-solid,
  .xui-sm-bdr-style-solid {
    border-style: solid !important;
  }

  .xui-sm-bdr-s-double,
  .xui-sm-bdr-style-double {
    border-style: double !important;
  }

  .xui-sm-bdr-s-groove,
  .xui-sm-bdr-style-groove {
    border-style: groove !important;
  }

  .xui-sm-bdr-s-ridge,
  .xui-sm-bdr-style-ridge {
    border-style: ridge !important;
  }

  .xui-sm-bdr-s-inset,
  .xui-sm-bdr-style-inset {
    border-style: inset !important;
  }

  .xui-sm-bdr-s-outset,
  .xui-sm-bdr-style-outset {
    border-style: outset !important;
  }

  .xui-sm-bdr-s-initial,
  .xui-sm-bdr-style-initial {
    border-style: initial !important;
  }

  .xui-sm-bdr-s-inherit,
  .xui-sm-bdr-style-inherit {
    border-style: inherit !important;
  }





  /*Grids*/
  .xui-sm-grid-row-1 {
    grid-template-rows: repeat(1, 1fr);
  }

  .xui-sm-grid-row-2 {
    grid-template-rows: repeat(2, 1fr);
  }

  .xui-sm-grid-row-3 {
    grid-template-rows: repeat(3, 1fr);
  }

  .xui-sm-grid-row-4 {
    grid-template-rows: repeat(4, 1fr);
  }

  .xui-sm-grid-row-5 {
    grid-template-rows: repeat(5, 1fr);
  }

  .xui-sm-grid-row-6 {
    grid-template-rows: repeat(6, 1fr);
  }

  .xui-sm-grid-row-7 {
    grid-template-rows: repeat(7, 1fr);
  }

  .xui-sm-grid-row-8 {
    grid-template-rows: repeat(8, 1fr);
  }

  .xui-sm-grid-row-9 {
    grid-template-rows: repeat(9, 1fr);
  }

  .xui-sm-grid-row-10 {
    grid-template-rows: repeat(10, 1fr);
  }

  .xui-sm-grid-row-11 {
    grid-template-rows: repeat(11, 1fr);
  }

  .xui-sm-grid-row-12 {
    grid-template-rows: repeat(12, 1fr);
  }

  .xui-sm-grid-col-1 {
    grid-template-columns: repeat(1, 1fr);
  }

  .xui-sm-grid-col-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .xui-sm-grid-col-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .xui-sm-grid-col-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .xui-sm-grid-col-5 {
    grid-template-columns: repeat(5, 1fr);
  }

  .xui-sm-grid-col-6 {
    grid-template-columns: repeat(6, 1fr);
  }

  .xui-sm-grid-col-7 {
    grid-template-columns: repeat(7, 1fr);
  }

  .xui-sm-grid-col-8 {
    grid-template-columns: repeat(8, 1fr);
  }

  .xui-sm-grid-col-9 {
    grid-template-columns: repeat(9, 1fr);
  }

  .xui-sm-grid-col-10 {
    grid-template-columns: repeat(10, 1fr);
  }

  .xui-sm-grid-col-11 {
    grid-template-columns: repeat(11, 1fr);
  }

  .xui-sm-grid-col-12 {
    grid-template-columns: repeat(12, 1fr);
  }

  .xui-sm-grid-gap-none {
    grid-gap: 0;
  }

  .xui-sm-grid-gap-half {
    grid-gap: .5rem;
  }

  .xui-sm-grid-gap-1 {
    grid-gap: 1rem;
  }

  .xui-sm-grid-gap-1-half {
    grid-gap: 1.5rem;
  }

  .xui-sm-grid-gap-2 {
    grid-gap: 2rem;
  }

  .xui-sm-grid-gap-2-half {
    grid-gap: 2.5rem;
  }

  .xui-sm-grid-gap-3 {
    grid-gap: 3rem;
  }

  .xui-sm-grid-gap-3-half {
    grid-gap: 3.5rem;
  }

  .xui-sm-grid-gap-4 {
    grid-gap: 4rem;
  }

  .xui-sm-grid-gap-4-half {
    grid-gap: 4.5rem;
  }

  .xui-sm-grid-gap-5 {
    grid-gap: 5rem;
  }

  .xui-sm-grid-gap-5-half {
    grid-gap: 5.5rem;
  }

  .xui-sm-grid-gap-6 {
    grid-gap: 6rem;
  }

  .xui-sm-grid-gap-6-half {
    grid-gap: 6.5rem;
  }

  .xui-sm-grid-gap-7 {
    grid-gap: 7rem;
  }

  .xui-sm-grid-gap-7-half {
    grid-gap: 7.5rem;
  }

  .xui-sm-grid-gap-8 {
    grid-gap: 8rem;
  }

  .xui-sm-grid-gap-8-half {
    grid-gap: 8.5rem;
  }

  .xui-sm-grid-gap-9 {
    grid-gap: 9rem;
  }

  .xui-sm-grid-gap-9-half {
    grid-gap: 9.5rem;
  }

  .xui-sm-grid-gap-10 {
    grid-gap: 10rem;
  }

  .xui-sm-grid-row-gap-none {
    grid-row-gap: 0;
  }

  .xui-sm-grid-row-gap-half {
    grid-row-gap: .5rem;
  }

  .xui-sm-grid-row-gap-1 {
    grid-row-gap: 1rem;
  }

  .xui-sm-grid-row-gap-1-half {
    grid-row-gap: 1.5rem;
  }

  .xui-sm-grid-row-gap-2 {
    grid-row-gap: 2rem;
  }

  .xui-sm-grid-row-gap-2-half {
    grid-row-gap: 2.5rem;
  }

  .xui-sm-grid-row-gap-3 {
    grid-row-gap: 3rem;
  }

  .xui-sm-grid-row-gap-3-half {
    grid-row-gap: 3.5rem;
  }

  .xui-sm-grid-row-gap-4 {
    grid-row-gap: 4rem;
  }

  .xui-sm-grid-row-gap-4-half {
    grid-row-gap: 4.5rem;
  }

  .xui-sm-grid-row-gap-5 {
    grid-row-gap: 5rem;
  }

  .xui-sm-grid-row-gap-5-half {
    grid-row-gap: 5.5rem;
  }

  .xui-sm-grid-row-gap-6 {
    grid-row-gap: 6rem;
  }

  .xui-sm-grid-row-gap-6-half {
    grid-row-gap: 6.5rem;
  }

  .xui-sm-grid-row-gap-7 {
    grid-row-gap: 7rem;
  }

  .xui-sm-grid-row-gap-7-half {
    grid-row-gap: 7.5rem;
  }

  .xui-sm-grid-row-gap-8 {
    grid-row-gap: 8rem;
  }

  .xui-sm-grid-row-gap-8-half {
    grid-row-gap: 8.5rem;
  }

  .xui-sm-grid-row-gap-9 {
    grid-row-gap: 9rem;
  }

  .xui-sm-grid-row-gap-9-half {
    grid-row-gap: 9.5rem;
  }

  .xui-sm-grid-row-gap-10 {
    grid-row-gap: 10rem;
  }

  .xui-sm-grid-column-gap-none {
    grid-column-gap: 0;
  }

  .xui-sm-grid-column-gap-half {
    grid-column-gap: .5rem;
  }

  .xui-sm-grid-column-gap-1 {
    grid-column-gap: 1rem;
  }

  .xui-sm-grid-column-gap-1-half {
    grid-column-gap: 1.5rem;
  }

  .xui-sm-grid-column-gap-2 {
    grid-column-gap: 2rem;
  }

  .xui-sm-grid-column-gap-2-half {
    grid-column-gap: 2.5rem;
  }

  .xui-sm-grid-column-gap-3 {
    grid-column-gap: 3rem;
  }

  .xui-sm-grid-column-gap-3-half {
    grid-column-gap: 3.5rem;
  }

  .xui-sm-grid-column-gap-4 {
    grid-column-gap: 4rem;
  }

  .xui-sm-grid-column-gap-4-half {
    grid-column-gap: 4.5rem;
  }

  .xui-sm-grid-column-gap-5 {
    grid-column-gap: 5rem;
  }

  .xui-sm-grid-column-gap-5-half {
    grid-column-gap: 5.5rem;
  }

  .xui-sm-grid-column-gap-6 {
    grid-column-gap: 6rem;
  }

  .xui-sm-grid-column-gap-6-half {
    grid-column-gap: 6.5rem;
  }

  .xui-sm-grid-column-gap-7 {
    grid-column-gap: 7rem;
  }

  .xui-sm-grid-column-gap-7-half {
    grid-column-gap: 7.5rem;
  }

  .xui-sm-grid-column-gap-8 {
    grid-column-gap: 8rem;
  }

  .xui-sm-grid-column-gap-8-half {
    grid-column-gap: 8.5rem;
  }

  .xui-sm-grid-column-gap-9 {
    grid-column-gap: 9rem;
  }

  .xui-sm-grid-column-gap-9-half {
    grid-column-gap: 9.5rem;
  }

  .xui-sm-grid-column-gap-10 {
    grid-column-gap: 10rem;
  }





  /* The Modern Way for Gaps That Applies to Grid & Flexbox */
  .xui-sm-gap-none {
    gap: 0;
  }

  .xui-sm-gap-half {
    gap: .5rem;
  }

  .xui-sm-gap-1 {
    gap: 1rem;
  }

  .xui-sm-gap-1-half {
    gap: 1.5rem;
  }

  .xui-sm-gap-2 {
    gap: 2rem;
  }

  .xui-sm-gap-2-half {
    gap: 2.5rem;
  }

  .xui-sm-gap-3 {
    gap: 3rem;
  }

  .xui-sm-gap-3-half {
    gap: 3.5rem;
  }

  .xui-sm-gap-4 {
    gap: 4rem;
  }

  .xui-sm-gap-4-half {
    gap: 4.5rem;
  }

  .xui-sm-gap-5 {
    gap: 5rem;
  }

  .xui-sm-gap-5-half {
    gap: 5.5rem;
  }

  .xui-sm-gap-6 {
    gap: 6rem;
  }

  .xui-sm-gap-6-half {
    gap: 6.5rem;
  }

  .xui-sm-gap-7 {
    gap: 7rem;
  }

  .xui-sm-gap-7-half {
    gap: 7.5rem;
  }

  .xui-sm-gap-8 {
    gap: 8rem;
  }

  .xui-sm-gap-8-half {
    gap: 8.5rem;
  }

  .xui-sm-gap-9 {
    gap: 9rem;
  }

  .xui-sm-gap-9-half {
    gap: 9.5rem;
  }

  .xui-sm-gap-10 {
    gap: 10rem;
  }

  .xui-sm-row-gap-none {
    row-gap: 0;
  }

  .xui-sm-row-gap-half {
    row-gap: .5rem;
  }

  .xui-sm-row-gap-1 {
    row-gap: 1rem;
  }

  .xui-sm-row-gap-1-half {
    row-gap: 1.5rem;
  }

  .xui-sm-row-gap-2 {
    row-gap: 2rem;
  }

  .xui-sm-row-gap-2-half {
    row-gap: 2.5rem;
  }

  .xui-sm-row-gap-3 {
    row-gap: 3rem;
  }

  .xui-sm-row-gap-3-half {
    row-gap: 3.5rem;
  }

  .xui-sm-row-gap-4 {
    row-gap: 4rem;
  }

  .xui-sm-row-gap-4-half {
    row-gap: 4.5rem;
  }

  .xui-sm-row-gap-5 {
    row-gap: 5rem;
  }

  .xui-sm-row-gap-5-half {
    row-gap: 5.5rem;
  }

  .xui-sm-row-gap-6 {
    row-gap: 6rem;
  }

  .xui-sm-row-gap-6-half {
    row-gap: 6.5rem;
  }

  .xui-sm-row-gap-7 {
    row-gap: 7rem;
  }

  .xui-sm-row-gap-7-half {
    row-gap: 7.5rem;
  }

  .xui-sm-row-gap-8 {
    row-gap: 8rem;
  }

  .xui-sm-row-gap-8-half {
    row-gap: 8.5rem;
  }

  .xui-sm-row-gap-9 {
    row-gap: 9rem;
  }

  .xui-sm-row-gap-9-half {
    row-gap: 9.5rem;
  }

  .xui-sm-row-gap-10 {
    row-gap: 10rem;
  }

  .xui-sm-column-gap-none {
    column-gap: 0;
  }

  .xui-sm-column-gap-half {
    column-gap: .5rem;
  }

  .xui-sm-column-gap-1 {
    column-gap: 1rem;
  }

  .xui-sm-column-gap-1-half {
    column-gap: 1.5rem;
  }

  .xui-sm-column-gap-2 {
    column-gap: 2rem;
  }

  .xui-sm-column-gap-2-half {
    column-gap: 2.5rem;
  }

  .xui-sm-column-gap-3 {
    column-gap: 3rem;
  }

  .xui-sm-column-gap-3-half {
    column-gap: 3.5rem;
  }

  .xui-sm-column-gap-4 {
    column-gap: 4rem;
  }

  .xui-sm-column-gap-4-half {
    column-gap: 4.5rem;
  }

  .xui-sm-column-gap-5 {
    column-gap: 5rem;
  }

  .xui-sm-column-gap-5-half {
    column-gap: 5.5rem;
  }

  .xui-sm-column-gap-6 {
    column-gap: 6rem;
  }

  .xui-sm-column-gap-6-half {
    column-gap: 6.5rem;
  }

  .xui-sm-column-gap-7 {
    column-gap: 7rem;
  }

  .xui-sm-column-gap-7-half {
    column-gap: 7.5rem;
  }

  .xui-sm-column-gap-8 {
    column-gap: 8rem;
  }

  .xui-sm-column-gap-8-half {
    column-gap: 8.5rem;
  }

  .xui-sm-column-gap-9 {
    column-gap: 9rem;
  }

  .xui-sm-column-gap-9-half {
    column-gap: 9.5rem;
  }

  .xui-sm-column-gap-10 {
    column-gap: 10rem;
  }




  /*Margins*/
  .xui-sm-m-none {
    margin: 0;
  }

  .xui-sm-m-auto {
    margin: auto;
  }

  .xui-sm-m-inherit {
    margin: inherit;
  }

  .xui-sm-m-unset {
    margin: unset;
  }

  .xui-sm-m-all {
    margin: all;
  }

  .xui-sm-m-initial {
    margin: initial;
  }

  .xui-sm-m-half {
    margin: .5rem;
  }

  .xui-sm-m-1 {
    margin: 1rem;
  }

  .xui-sm-m-1-half {
    margin: 1.5rem;
  }

  .xui-sm-m-2 {
    margin: 2rem;
  }

  .xui-sm-m-2-half {
    margin: 2.5rem;
  }

  .xui-sm-m-3 {
    margin: 3rem;
  }

  .xui-sm-m-3-half {
    margin: 3.5rem;
  }

  .xui-sm-m-4 {
    margin: 4rem;
  }

  .xui-sm-m-4-half {
    margin: 4.5rem;
  }

  .xui-sm-m-5 {
    margin: 5rem;
  }

  .xui-sm-m-5-half {
    margin: 5.5rem;
  }

  .xui-sm-m-6 {
    margin: 6rem;
  }

  .xui-sm-m-6-half {
    margin: 6.5rem;
  }

  .xui-sm-m-7 {
    margin: 7rem;
  }

  .xui-sm-m-7-half {
    margin: 7.5rem;
  }

  .xui-sm-m-8 {
    margin: 8rem;
  }

  .xui-sm-m-8-half {
    margin: 8.5rem;
  }

  .xui-sm-m-9 {
    margin: 9rem;
  }

  .xui-sm-m-9-half {
    margin: 9.5rem;
  }

  .xui-sm-m-10 {
    margin: 10rem;
  }

  .xui-sm-mt-none {
    margin-top: 0;
  }

  .xui-sm-mt-auto {
    margin-top: auto;
  }

  .xui-sm-mt--half {
    margin-top: -.5rem;
  }

  .xui-sm-mt--1 {
    margin-top: -1rem;
  }

  .xui-sm-mt--1-half {
    margin-top: -1.5rem;
  }

  .xui-sm-mt--2 {
    margin-top: -2rem;
  }

  .xui-sm-mt--2-half {
    margin-top: -2.5rem;
  }

  .xui-sm-mt--3 {
    margin-top: -3rem;
  }

  .xui-sm-mt--3-half {
    margin-top: -3.5rem;
  }

  .xui-sm-mt--4 {
    margin-top: -4rem;
  }

  .xui-sm-mt--4-half {
    margin-top: -4.5rem;
  }

  .xui-sm-mt--5 {
    margin-top: -5rem;
  }

  .xui-sm-mt--5-half {
    margin-top: -5.5rem;
  }

  .xui-sm-mt--6 {
    margin-top: -6rem;
  }

  .xui-sm-mt--6-half {
    margin-top: -6.5rem;
  }

  .xui-sm-mt--7 {
    margin-top: -7rem;
  }

  .xui-sm-mt--7-half {
    margin-top: -7.5rem;
  }

  .xui-sm-mt--8 {
    margin-top: -8rem;
  }

  .xui-sm-mt--8-half {
    margin-top: -8.5rem;
  }

  .xui-sm-mt--9 {
    margin-top: -9rem;
  }

  .xui-sm-mt--9-half {
    margin-top: -9.5rem;
  }

  .xui-sm-mt--10 {
    margin-top: -10rem;
  }

  .xui-sm-mt-half {
    margin-top: .5rem;
  }

  .xui-sm-mt-1 {
    margin-top: 1rem;
  }

  .xui-sm-mt-1-half {
    margin-top: 1.5rem;
  }

  .xui-sm-mt-2 {
    margin-top: 2rem;
  }

  .xui-sm-mt-2-half {
    margin-top: 2.5rem;
  }

  .xui-sm-mt-3 {
    margin-top: 3rem;
  }

  .xui-sm-mt-3-half {
    margin-top: 3.5rem;
  }

  .xui-sm-mt-4 {
    margin-top: 4rem;
  }

  .xui-sm-mt-4-half {
    margin-top: 4.5rem;
  }

  .xui-sm-mt-5 {
    margin-top: 5rem;
  }

  .xui-sm-mt-5-half {
    margin-top: 5.5rem;
  }

  .xui-sm-mt-6 {
    margin-top: 6rem;
  }

  .xui-sm-mt-6-half {
    margin-top: 6.5rem;
  }

  .xui-sm-mt-7 {
    margin-top: 7rem;
  }

  .xui-sm-mt-7-half {
    margin-top: 7.5rem;
  }

  .xui-sm-mt-8 {
    margin-top: 8rem;
  }

  .xui-sm-mt-8-half {
    margin-top: 8.5rem;
  }

  .xui-sm-mt-9 {
    margin-top: 9rem;
  }

  .xui-sm-mt-9-half {
    margin-top: 9.5rem;
  }

  .xui-sm-mt-10 {
    margin-top: 10rem;
  }

  .xui-sm-mr-none {
    margin-right: 0;
  }

  .xui-sm-mr-auto {
    margin-right: auto;
  }

  .xui-sm-mr--half {
    margin-right: -.5rem;
  }

  .xui-sm-mr--1 {
    margin-right: -1rem;
  }

  .xui-sm-mr--1-half {
    margin-right: -1.5rem;
  }

  .xui-sm-mr--2 {
    margin-right: -2rem;
  }

  .xui-sm-mr--2-half {
    margin-right: -2.5rem;
  }

  .xui-sm-mr--3 {
    margin-right: -3rem;
  }

  .xui-sm-mr--3-half {
    margin-right: -3.5rem;
  }

  .xui-sm-mr--4 {
    margin-right: -4rem;
  }

  .xui-sm-mr--4-half {
    margin-right: -4.5rem;
  }

  .xui-sm-mr--5 {
    margin-right: -5rem;
  }

  .xui-sm-mr--5-half {
    margin-right: -5.5rem;
  }

  .xui-sm-mr--6 {
    margin-right: -6rem;
  }

  .xui-sm-mr--6-half {
    margin-right: -6.5rem;
  }

  .xui-sm-mr--7 {
    margin-right: -7rem;
  }

  .xui-sm-mr--7-half {
    margin-right: -7.5rem;
  }

  .xui-sm-mr--8 {
    margin-right: -8rem;
  }

  .xui-sm-mr--8-half {
    margin-right: -8.5rem;
  }

  .xui-sm-mr--9 {
    margin-right: -9rem;
  }

  .xui-sm-mr--9-half {
    margin-right: -9.5rem;
  }

  .xui-sm-mr--10 {
    margin-right: -10rem;
  }

  .xui-sm-mr-half {
    margin-right: .5rem;
  }

  .xui-sm-mr-1 {
    margin-right: 1rem;
  }

  .xui-sm-mr-1-half {
    margin-right: 1.5rem;
  }

  .xui-sm-mr-2 {
    margin-right: 2rem;
  }

  .xui-sm-mr-2-half {
    margin-right: 2.5rem;
  }

  .xui-sm-mr-3 {
    margin-right: 3rem;
  }

  .xui-sm-mr-3-half {
    margin-right: 3.5rem;
  }

  .xui-sm-mr-4 {
    margin-right: 4rem;
  }

  .xui-sm-mr-4-half {
    margin-right: 4.5rem;
  }

  .xui-sm-mr-5 {
    margin-right: 5rem;
  }

  .xui-sm-mr-5-half {
    margin-right: 5.5rem;
  }

  .xui-sm-mr-6 {
    margin-right: 6rem;
  }

  .xui-sm-mr-6-half {
    margin-right: 6.5rem;
  }

  .xui-sm-mr-7 {
    margin-right: 7rem;
  }

  .xui-sm-mr-7-half {
    margin-right: 7.5rem;
  }

  .xui-sm-mr-8 {
    margin-right: 8rem;
  }

  .xui-sm-mr-8-half {
    margin-right: 8.5rem;
  }

  .xui-sm-mr-9 {
    margin-right: 9rem;
  }

  .xui-sm-mr-9-half {
    margin-right: 9.5rem;
  }

  .xui-sm-mr-10 {
    margin-right: 10rem;
  }

  .xui-sm-mb-none {
    margin-bottom: 0;
  }

  .xui-sm-mb-auto {
    margin-bottom: auto;
  }

  .xui-sm-mb--half {
    margin-bottom: -.5rem;
  }

  .xui-sm-mb--1 {
    margin-bottom: -1rem;
  }

  .xui-sm-mb--1-half {
    margin-bottom: -1.5rem;
  }

  .xui-sm-mb--2 {
    margin-bottom: -2rem;
  }

  .xui-sm-mb--2-half {
    margin-bottom: -2.5rem;
  }

  .xui-sm-mb--3 {
    margin-bottom: -3rem;
  }

  .xui-sm-mb--3-half {
    margin-bottom: -3.5rem;
  }

  .xui-sm-mb--4 {
    margin-bottom: -4rem;
  }

  .xui-sm-mb--4-half {
    margin-bottom: -4.5rem;
  }

  .xui-sm-mb--5 {
    margin-bottom: -5rem;
  }

  .xui-sm-mb--5-half {
    margin-bottom: -5.5rem;
  }

  .xui-sm-mb--6 {
    margin-bottom: -6rem;
  }

  .xui-sm-mb--6-half {
    margin-bottom: -6.5rem;
  }

  .xui-sm-mb--7 {
    margin-bottom: -7rem;
  }

  .xui-sm-mb--7-half {
    margin-bottom: -7.5rem;
  }

  .xui-sm-mb--8 {
    margin-bottom: -8rem;
  }

  .xui-sm-mb--8-half {
    margin-bottom: -8.5rem;
  }

  .xui-sm-mb--9 {
    margin-bottom: -9rem;
  }

  .xui-sm-mb--9-half {
    margin-bottom: -9.5rem;
  }

  .xui-sm-mb--10 {
    margin-bottom: -10rem;
  }

  .xui-sm-mb-half {
    margin-bottom: .5rem;
  }

  .xui-sm-mb-1 {
    margin-bottom: 1rem;
  }

  .xui-sm-mb-1-half {
    margin-bottom: 1.5rem;
  }

  .xui-sm-mb-2 {
    margin-bottom: 2rem;
  }

  .xui-sm-mb-2-half {
    margin-bottom: 2.5rem;
  }

  .xui-sm-mb-3 {
    margin-bottom: 3rem;
  }

  .xui-sm-mb-3-half {
    margin-bottom: 3.5rem;
  }

  .xui-sm-mb-4 {
    margin-bottom: 4rem;
  }

  .xui-sm-mb-4-half {
    margin-bottom: 4.5rem;
  }

  .xui-sm-mb-5 {
    margin-bottom: 5rem;
  }

  .xui-sm-mb-5-half {
    margin-bottom: 5.5rem;
  }

  .xui-sm-mb-6 {
    margin-bottom: 6rem;
  }

  .xui-sm-mb-6-half {
    margin-bottom: 6.5rem;
  }

  .xui-sm-mb-7 {
    margin-bottom: 7rem;
  }

  .xui-sm-mb-7-half {
    margin-bottom: 7.5rem;
  }

  .xui-sm-mb-8 {
    margin-bottom: 8rem;
  }

  .xui-sm-mb-8-half {
    margin-bottom: 8.5rem;
  }

  .xui-sm-mb-9 {
    margin-bottom: 9rem;
  }

  .xui-sm-mb-9-half {
    margin-bottom: 9.5rem;
  }

  .xui-sm-mb-10 {
    margin-bottom: 10rem;
  }

  .xui-sm-ml-none {
    margin-left: 0;
  }

  .xui-sm-ml-auto {
    margin-left: auto;
  }

  .xui-sm-ml--half {
    margin-left: -.5rem;
  }

  .xui-sm-ml--1 {
    margin-left: -1rem;
  }

  .xui-sm-ml--1-half {
    margin-left: -1.5rem;
  }

  .xui-sm-ml--2 {
    margin-left: -2rem;
  }

  .xui-sm-ml--2-half {
    margin-left: -2.5rem;
  }

  .xui-sm-ml--3 {
    margin-left: -3rem;
  }

  .xui-sm-ml--3-half {
    margin-left: -3.5rem;
  }

  .xui-sm-ml--4 {
    margin-left: -4rem;
  }

  .xui-sm-ml--4-half {
    margin-left: -4.5rem;
  }

  .xui-sm-ml--5 {
    margin-left: -5rem;
  }

  .xui-sm-ml--5-half {
    margin-left: -5.5rem;
  }

  .xui-sm-ml--6 {
    margin-left: -6rem;
  }

  .xui-sm-ml--6-half {
    margin-left: -6.5rem;
  }

  .xui-sm-ml--7 {
    margin-left: -7rem;
  }

  .xui-sm-ml--7-half {
    margin-left: -7.5rem;
  }

  .xui-sm-ml--8 {
    margin-left: -8rem;
  }

  .xui-sm-ml--8-half {
    margin-left: -8.5rem;
  }

  .xui-sm-ml--9 {
    margin-left: -9rem;
  }

  .xui-sm-ml--9-half {
    margin-left: -9.5rem;
  }

  .xui-sm-ml--10 {
    margin-left: -10rem;
  }

  .xui-sm-ml-half {
    margin-left: .5rem;
  }

  .xui-sm-ml-1 {
    margin-left: 1rem;
  }

  .xui-sm-ml-1-half {
    margin-left: 1.5rem;
  }

  .xui-sm-ml-2 {
    margin-left: 2rem;
  }

  .xui-sm-ml-2-half {
    margin-left: 2.5rem;
  }

  .xui-sm-ml-3 {
    margin-left: 3rem;
  }

  .xui-sm-ml-3-half {
    margin-left: 3.5rem;
  }

  .xui-sm-ml-4 {
    margin-left: 4rem;
  }

  .xui-sm-ml-4-half {
    margin-left: 4.5rem;
  }

  .xui-sm-ml-5 {
    margin-left: 5rem;
  }

  .xui-sm-ml-5-half {
    margin-left: 5.5rem;
  }

  .xui-sm-ml-6 {
    margin-left: 6rem;
  }

  .xui-sm-ml-6-half {
    margin-left: 6.5rem;
  }

  .xui-sm-ml-7 {
    margin-left: 7rem;
  }

  .xui-sm-ml-7-half {
    margin-left: 7.5rem;
  }

  .xui-sm-ml-8 {
    margin-left: 8rem;
  }

  .xui-sm-ml-8-half {
    margin-left: 8.5rem;
  }

  .xui-sm-ml-9 {
    margin-left: 9rem;
  }

  .xui-sm-ml-9-half {
    margin-left: 9.5rem;
  }

  .xui-sm-ml-10 {
    margin-left: 10rem;
  }

  .xui-sm-mx-none {
    margin-left: 0;
    margin-right: 0;
  }

  .xui-sm-mx-auto {
    margin-left: auto;
    margin-right: auto;
  }

  .xui-sm-mx-half {
    margin-left: .5rem;
    margin-right: .5rem;
  }

  .xui-sm-mx-1 {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .xui-sm-mx-1-half {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }

  .xui-sm-mx-2 {
    margin-left: 2rem;
    margin-right: 2rem;
  }

  .xui-sm-mx-2-half {
    margin-left: 2.5rem;
    margin-right: 2.5rem;
  }

  .xui-sm-mx-3 {
    margin-left: 3rem;
    margin-right: 3rem;
  }

  .xui-sm-mx-3-half {
    margin-left: 3.5rem;
    margin-right: 3.5rem;
  }

  .xui-sm-mx-4 {
    margin-left: 4rem;
    margin-right: 4rem;
  }

  .xui-sm-mx-4-half {
    margin-left: 4.5rem;
    margin-right: 4.5rem;
  }

  .xui-sm-mx-5 {
    margin-left: 5rem;
    margin-right: 5rem;
  }

  .xui-sm-mx-5-half {
    margin-left: 5.5rem;
    margin-right: 5.5rem;
  }

  .xui-sm-mx-6 {
    margin-left: 6rem;
    margin-right: 6rem;
  }

  .xui-sm-mx-6-half {
    margin-left: 6.5rem;
    margin-right: 6.5rem;
  }

  .xui-sm-mx-7 {
    margin-left: 7rem;
    margin-right: 7rem;
  }

  .xui-sm-mx-7-half {
    margin-left: 7.5rem;
    margin-right: 7.5rem;
  }

  .xui-sm-mx-8 {
    margin-left: 8rem;
    margin-right: 8rem;
  }

  .xui-sm-mx-8-half {
    margin-left: 8.5rem;
    margin-right: 8.5rem;
  }

  .xui-sm-mx-9 {
    margin-left: 9rem;
    margin-right: 9rem;
  }

  .xui-sm-mx-9-half {
    margin-left: 9.5rem;
    margin-right: 9.5rem;
  }

  .xui-sm-mx-10 {
    margin-left: 10rem;
    margin-right: 10rem;
  }

  .xui-sm-my-none {
    margin-top: 0;
    margin-bottom: 0;
  }

  .xui-sm-my-auto {
    margin-top: auto;
    margin-bottom: auto;
  }

  .xui-sm-my-half {
    margin-top: .5rem;
    margin-bottom: .5rem;
  }

  .xui-sm-my-1 {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .xui-sm-my-1-half {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .xui-sm-my-2 {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .xui-sm-my-2-half {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
  }

  .xui-sm-my-3 {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }

  .xui-sm-my-3-half {
    margin-top: 3.5rem;
    margin-bottom: 3.5rem;
  }

  .xui-sm-my-4 {
    margin-top: 4rem;
    margin-bottom: 4rem;
  }

  .xui-sm-my-4-half {
    margin-top: 4.5rem;
    margin-bottom: 4.5rem;
  }

  .xui-sm-my-5 {
    margin-top: 5rem;
    margin-bottom: 5rem;
  }

  .xui-sm-my-5-half {
    margin-top: 5.5rem;
    margin-bottom: 5.5rem;
  }

  .xui-sm-my-6 {
    margin-top: 6rem;
    margin-bottom: 6rem;
  }

  .xui-sm-my-6-half {
    margin-top: 6.5rem;
    margin-bottom: 6.5rem;
  }

  .xui-sm-my-7 {
    margin-top: 7rem;
    margin-bottom: 7rem;
  }

  .xui-sm-my-7-half {
    margin-top: 7.5rem;
    margin-bottom: 7.5rem;
  }

  .xui-sm-my-8 {
    margin-top: 8rem;
    margin-bottom: 8rem;
  }

  .xui-sm-my-8-half {
    margin-top: 8.5rem;
    margin-bottom: 8.5rem;
  }

  .xui-sm-my-9 {
    margin-top: 9rem;
    margin-bottom: 9rem;
  }

  .xui-sm-my-9-half {
    margin-top: 9.5rem;
    margin-bottom: 9.5rem;
  }

  .xui-sm-my-10 {
    margin-top: 10rem;
    margin-bottom: 10rem;
  }





  /*Paddings*/
  .xui-sm-p-none {
    padding: 0;
  }

  .xui-sm-p-auto {
    padding: auto;
  }

  .xui-sm-p-inherit {
    padding: inherit;
  }

  .xui-sm-p-unset {
    padding: unset;
  }

  .xui-sm-p-all {
    padding: all;
  }

  .xui-sm-p-initial {
    padding: initial;
  }

  .xui-sm-p-half {
    padding: .5rem;
  }

  .xui-sm-p-1 {
    padding: 1rem;
  }

  .xui-sm-p-1-half {
    padding: 1.5rem;
  }

  .xui-sm-p-2 {
    padding: 2rem;
  }

  .xui-sm-p-2-half {
    padding: 2.5rem;
  }

  .xui-sm-p-3 {
    padding: 3rem;
  }

  .xui-sm-p-3-half {
    padding: 3.5rem;
  }

  .xui-sm-p-4 {
    padding: 4rem;
  }

  .xui-sm-p-4-half {
    padding: 4.5rem;
  }

  .xui-sm-p-5 {
    padding: 5rem;
  }

  .xui-sm-p-5-half {
    padding: 5.5rem;
  }

  .xui-sm-p-6 {
    padding: 6rem;
  }

  .xui-sm-p-6-half {
    padding: 6.5rem;
  }

  .xui-sm-p-7 {
    padding: 7rem;
  }

  .xui-sm-p-7-half {
    padding: 7.5rem;
  }

  .xui-sm-p-8 {
    padding: 8rem;
  }

  .xui-sm-p-8-half {
    padding: 8.5rem;
  }

  .xui-sm-p-9 {
    padding: 9rem;
  }

  .xui-sm-p-9-half {
    padding: 9.5rem;
  }

  .xui-sm-p-10 {
    padding: 10rem;
  }

  .xui-sm-pt-none {
    padding-top: 0;
  }

  .xui-sm-pt-auto {
    padding-top: auto;
  }

  .xui-sm-pt-half {
    padding-top: .5rem;
  }

  .xui-sm-pt-1 {
    padding-top: 1rem;
  }

  .xui-sm-pt-1-half {
    padding-top: 1.5rem;
  }

  .xui-sm-pt-2 {
    padding-top: 2rem;
  }

  .xui-sm-pt-2-half {
    padding-top: 2.5rem;
  }

  .xui-sm-pt-3 {
    padding-top: 3rem;
  }

  .xui-sm-pt-3-half {
    padding-top: 3.5rem;
  }

  .xui-sm-pt-4 {
    padding-top: 4rem;
  }

  .xui-sm-pt-4-half {
    padding-top: 4.5rem;
  }

  .xui-sm-pt-5 {
    padding-top: 5rem;
  }

  .xui-sm-pt-5-half {
    padding-top: 5.5rem;
  }

  .xui-sm-pt-6 {
    padding-top: 6rem;
  }

  .xui-sm-pt-6-half {
    padding-top: 6.5rem;
  }

  .xui-sm-pt-7 {
    padding-top: 7rem;
  }

  .xui-sm-pt-7-half {
    padding-top: 7.5rem;
  }

  .xui-sm-pt-8 {
    padding-top: 8rem;
  }

  .xui-sm-pt-8-half {
    padding-top: 8.5rem;
  }

  .xui-sm-pt-9 {
    padding-top: 9rem;
  }

  .xui-sm-pt-9-half {
    padding-top: 9.5rem;
  }

  .xui-sm-pt-10 {
    padding-top: 10rem;
  }

  .xui-sm-pr-none {
    padding-right: 0;
  }

  .xui-sm-pr-auto {
    padding-right: auto;
  }

  .xui-sm-pr-half {
    padding-right: .5rem;
  }

  .xui-sm-pr-1 {
    padding-right: 1rem;
  }

  .xui-sm-pr-1-half {
    padding-right: 1.5rem;
  }

  .xui-sm-pr-2 {
    padding-right: 2rem;
  }

  .xui-sm-pr-2-half {
    padding-right: 2.5rem;
  }

  .xui-sm-pr-3 {
    padding-right: 3rem;
  }

  .xui-sm-pr-3-half {
    padding-right: 3.5rem;
  }

  .xui-sm-pr-4 {
    padding-right: 4rem;
  }

  .xui-sm-pr-4-half {
    padding-right: 4.5rem;
  }

  .xui-sm-pr-5 {
    padding-right: 5rem;
  }

  .xui-sm-pr-5-half {
    padding-right: 5.5rem;
  }

  .xui-sm-pr-6 {
    padding-right: 6rem;
  }

  .xui-sm-pr-6-half {
    padding-right: 6.5rem;
  }

  .xui-sm-pr-7 {
    padding-right: 7rem;
  }

  .xui-sm-pr-7-half {
    padding-right: 7.5rem;
  }

  .xui-sm-pr-8 {
    padding-right: 8rem;
  }

  .xui-sm-pr-8-half {
    padding-right: 8.5rem;
  }

  .xui-sm-pr-9 {
    padding-right: 9rem;
  }

  .xui-sm-pr-9-half {
    padding-right: 9.5rem;
  }

  .xui-sm-pr-10 {
    padding-right: 10rem;
  }

  .xui-sm-pb-none {
    padding-bottom: 0;
  }

  .xui-sm-pb-auto {
    padding-bottom: auto;
  }

  .xui-sm-pb-half {
    padding-bottom: .5rem;
  }

  .xui-sm-pb-1 {
    padding-bottom: 1rem;
  }

  .xui-sm-pb-1-half {
    padding-bottom: 1.5rem;
  }

  .xui-sm-pb-2 {
    padding-bottom: 2rem;
  }

  .xui-sm-pb-2-half {
    padding-bottom: 2.5rem;
  }

  .xui-sm-pb-3 {
    padding-bottom: 3rem;
  }

  .xui-sm-pb-3-half {
    padding-bottom: 3.5rem;
  }

  .xui-sm-pb-4 {
    padding-bottom: 4rem;
  }

  .xui-sm-pb-4-half {
    padding-bottom: 4.5rem;
  }

  .xui-sm-pb-5 {
    padding-bottom: 5rem;
  }

  .xui-sm-pb-5-half {
    padding-bottom: 5.5rem;
  }

  .xui-sm-pb-6 {
    padding-bottom: 6rem;
  }

  .xui-sm-pb-6-half {
    padding-bottom: 6.5rem;
  }

  .xui-sm-pb-7 {
    padding-bottom: 7rem;
  }

  .xui-sm-pb-7-half {
    padding-bottom: 7.5rem;
  }

  .xui-sm-pb-8 {
    padding-bottom: 8rem;
  }

  .xui-sm-pb-8-half {
    padding-bottom: 8.5rem;
  }

  .xui-sm-pb-9 {
    padding-bottom: 9rem;
  }

  .xui-sm-pb-9-half {
    padding-bottom: 9.5rem;
  }

  .xui-sm-pb-10 {
    padding-bottom: 10rem;
  }

  .xui-sm-pl-none {
    padding-left: 0;
  }

  .xui-sm-pl-auto {
    padding-left: auto;
  }

  .xui-sm-pl-half {
    padding-left: .5rem;
  }

  .xui-sm-pl-1 {
    padding-left: 1rem;
  }

  .xui-sm-pl-1-half {
    padding-left: 1.5rem;
  }

  .xui-sm-pl-2 {
    padding-left: 2rem;
  }

  .xui-sm-pl-2-half {
    padding-left: 2.5rem;
  }

  .xui-sm-pl-3 {
    padding-left: 3rem;
  }

  .xui-sm-pl-3-half {
    padding-left: 3.5rem;
  }

  .xui-sm-pl-4 {
    padding-left: 4rem;
  }

  .xui-sm-pl-4-half {
    padding-left: 4.5rem;
  }

  .xui-sm-pl-5 {
    padding-left: 5rem;
  }

  .xui-sm-pl-5-half {
    padding-left: 5.5rem;
  }

  .xui-sm-pl-6 {
    padding-left: 6rem;
  }

  .xui-sm-pl-6-half {
    padding-left: 6.5rem;
  }

  .xui-sm-pl-7 {
    padding-left: 7rem;
  }

  .xui-sm-pl-7-half {
    padding-left: 7.5rem;
  }

  .xui-sm-pl-8 {
    padding-left: 8rem;
  }

  .xui-sm-pl-8-half {
    padding-left: 8.5rem;
  }

  .xui-sm-pl-9 {
    padding-left: 9rem;
  }

  .xui-sm-pl-9-half {
    padding-left: 9.5rem;
  }

  .xui-sm-pl-10 {
    padding-left: 10rem;
  }

  .xui-sm-px-none {
    padding-left: 0;
    padding-right: 0;
  }

  .xui-sm-px-auto {
    padding-left: auto;
    padding-right: auto;
  }

  .xui-sm-px-half {
    padding-left: .5rem;
    padding-right: .5rem;
  }

  .xui-sm-px-1 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .xui-sm-px-1-half {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .xui-sm-px-2 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .xui-sm-px-2-half {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .xui-sm-px-3 {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .xui-sm-px-3-half {
    padding-left: 3.5rem;
    padding-right: 3.5rem;
  }

  .xui-sm-px-4 {
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .xui-sm-px-4-half {
    padding-left: 4.5rem;
    padding-right: 4.5rem;
  }

  .xui-sm-px-5 {
    padding-left: 5rem;
    padding-right: 5rem;
  }

  .xui-sm-px-5-half {
    padding-left: 5.5rem;
    padding-right: 5.5rem;
  }

  .xui-sm-px-6 {
    padding-left: 6rem;
    padding-right: 6rem;
  }

  .xui-sm-px-6-half {
    padding-left: 6.5rem;
    padding-right: 6.5rem;
  }

  .xui-sm-px-7 {
    padding-left: 7rem;
    padding-right: 7rem;
  }

  .xui-sm-px-7-half {
    padding-left: 7.5rem;
    padding-right: 7.5rem;
  }

  .xui-sm-px-8 {
    padding-left: 8rem;
    padding-right: 8rem;
  }

  .xui-sm-px-8-half {
    padding-left: 8.5rem;
    padding-right: 8.5rem;
  }

  .xui-sm-px-9 {
    padding-left: 9rem;
    padding-right: 9rem;
  }

  .xui-sm-px-9-half {
    padding-left: 9.5rem;
    padding-right: 9.5rem;
  }

  .xui-sm-px-10 {
    padding-left: 10rem;
    padding-right: 10rem;
  }

  .xui-sm-py-none {
    padding-top: 0;
    padding-bottom: 0;
  }

  .xui-sm-py-auto {
    padding-top: auto;
    padding-bottom: auto;
  }

  .xui-sm-py-half {
    padding-top: .5rem;
    padding-bottom: .5rem;
  }

  .xui-sm-py-1 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .xui-sm-py-1-half {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .xui-sm-py-2 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .xui-sm-py-2-half {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .xui-sm-py-3 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .xui-sm-py-3-half {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .xui-sm-py-4 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .xui-sm-py-4-half {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }

  .xui-sm-py-5 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .xui-sm-py-5-half {
    padding-top: 5.5rem;
    padding-bottom: 5.5rem;
  }

  .xui-sm-py-6 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .xui-sm-py-6-half {
    padding-top: 6.5rem;
    padding-bottom: 6.5rem;
  }

  .xui-sm-py-7 {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }

  .xui-sm-py-7-half {
    padding-top: 7.5rem;
    padding-bottom: 7.5rem;
  }

  .xui-sm-py-8 {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .xui-sm-py-8-half {
    padding-top: 8.5rem;
    padding-bottom: 8.5rem;
  }

  .xui-sm-py-9 {
    padding-top: 9rem;
    padding-bottom: 9rem;
  }

  .xui-sm-py-9-half {
    padding-top: 9.5rem;
    padding-bottom: 9.5rem;
  }

  .xui-sm-py-10 {
    padding-top: 10rem;
    padding-bottom: 10rem;
  }




  /*Width & Height*/
  .xui-sm-w-auto {
    width: auto;
  }

  .xui-sm-w-inherit {
    width: inherit;
  }

  .xui-sm-w-initial {
    width: initial;
  }

  .xui-sm-w-max-content {
    width: max-content;
  }

  .xui-sm-w-min-content {
    width: min-content;
  }

  .xui-sm-w-fit-content {
    width: fit-content;
  }

  .xui-sm-h-auto {
    height: auto;
  }

  .xui-sm-h-inherit {
    height: inherit;
  }

  .xui-sm-h-initial {
    height: initial;
  }

  .xui-sm-h-max-content {
    height: max-content;
  }

  .xui-sm-h-min-content {
    height: min-content;
  }

  .xui-sm-h-fit-content {
    height: fit-content;
  }

  .xui-sm-w-5 {
    width: 5px;
  }

  .xui-sm-w-10 {
    width: 10px;
  }

  .xui-sm-w-15 {
    width: 15px;
  }

  .xui-sm-w-20 {
    width: 20px;
  }

  .xui-sm-w-25 {
    width: 25px;
  }

  .xui-sm-w-30 {
    width: 30px;
  }

  .xui-sm-w-35 {
    width: 35px;
  }

  .xui-sm-w-40 {
    width: 40px;
  }

  .xui-sm-w-45 {
    width: 45px;
  }

  .xui-sm-w-50 {
    width: 50px;
  }

  .xui-sm-w-55 {
    width: 55px;
  }

  .xui-sm-w-60 {
    width: 60px;
  }

  .xui-sm-w-65 {
    width: 65px;
  }

  .xui-sm-w-70 {
    width: 70px;
  }

  .xui-sm-w-75 {
    width: 75px;
  }

  .xui-sm-w-80 {
    width: 80px;
  }

  .xui-sm-w-85 {
    width: 85px;
  }

  .xui-sm-w-90 {
    width: 90px;
  }

  .xui-sm-w-95 {
    width: 95px;
  }

  .xui-sm-w-100 {
    width: 100px;
  }

  .xui-sm-w-150 {
    width: 150px;
  }

  .xui-sm-w-200 {
    width: 200px;
  }

  .xui-sm-w-250 {
    width: 250px;
  }

  .xui-sm-w-300 {
    width: 300px;
  }

  .xui-sm-w-350 {
    width: 350px;
  }

  .xui-sm-w-400 {
    width: 400px;
  }

  .xui-sm-w-450 {
    width: 450px;
  }

  .xui-sm-w-500 {
    width: 500px;
  }

  .xui-sm-w-600 {
    width: 600px;
  }

  .xui-sm-w-650 {
    width: 650px;
  }

  .xui-sm-w-700 {
    width: 700px;
  }

  .xui-sm-w-750 {
    width: 750px;
  }

  .xui-sm-w-800 {
    width: 800px;
  }

  .xui-sm-w-850 {
    width: 850px;
  }

  .xui-sm-w-900 {
    width: 900px;
  }

  .xui-sm-w-950 {
    width: 950px;
  }

  .xui-sm-w-1000 {
    width: 1000px;
  }

  .xui-sm-w-fluid-5 {
    width: 5%;
  }

  .xui-sm-w-fluid-10 {
    width: 10%;
  }

  .xui-sm-w-fluid-15 {
    width: 15%;
  }

  .xui-sm-w-fluid-20 {
    width: 20%;
  }

  .xui-sm-w-fluid-25 {
    width: 25%;
  }

  .xui-sm-w-fluid-30 {
    width: 30%;
  }

  .xui-sm-w-fluid-35 {
    width: 35%;
  }

  .xui-sm-w-fluid-40 {
    width: 40%;
  }

  .xui-sm-w-fluid-45 {
    width: 45%;
  }

  .xui-sm-w-fluid-50 {
    width: 50%;
  }

  .xui-sm-w-fluid-55 {
    width: 55%;
  }

  .xui-sm-w-fluid-60 {
    width: 60%;
  }

  .xui-sm-w-fluid-65 {
    width: 65%;
  }

  .xui-sm-w-fluid-70 {
    width: 70%;
  }

  .xui-sm-w-fluid-75 {
    width: 75%;
  }

  .xui-sm-w-fluid-80 {
    width: 80%;
  }

  .xui-sm-w-fluid-85 {
    width: 85%;
  }

  .xui-sm-w-fluid-90 {
    width: 90%;
  }

  .xui-sm-w-fluid-95 {
    width: 95%;
  }

  .xui-sm-w-fluid-100 {
    width: 100%;
  }

  .xui-sm-h-5 {
    height: 5px;
  }

  .xui-sm-h-10 {
    height: 10px;
  }

  .xui-sm-h-15 {
    height: 15px;
  }

  .xui-sm-h-20 {
    height: 20px;
  }

  .xui-sm-h-25 {
    height: 25px;
  }

  .xui-sm-h-30 {
    height: 30px;
  }

  .xui-sm-h-35 {
    height: 35px;
  }

  .xui-sm-h-40 {
    height: 40px;
  }

  .xui-sm-h-45 {
    height: 45px;
  }

  .xui-sm-h-50 {
    height: 50px;
  }

  .xui-sm-h-55 {
    height: 55px;
  }

  .xui-sm-h-60 {
    height: 60px;
  }

  .xui-sm-h-65 {
    height: 65px;
  }

  .xui-sm-h-70 {
    height: 70px;
  }

  .xui-sm-h-75 {
    height: 75px;
  }

  .xui-sm-h-80 {
    height: 80px;
  }

  .xui-sm-h-85 {
    height: 85px;
  }

  .xui-sm-h-90 {
    height: 90px;
  }

  .xui-sm-h-95 {
    height: 95px;
  }

  .xui-sm-h-100 {
    height: 100px;
  }

  .xui-sm-h-150 {
    height: 150px;
  }

  .xui-sm-h-200 {
    height: 200px;
  }

  .xui-sm-h-250 {
    height: 250px;
  }

  .xui-sm-h-300 {
    height: 300px;
  }

  .xui-sm-h-350 {
    height: 350px;
  }

  .xui-sm-h-400 {
    height: 400px;
  }

  .xui-sm-h-450 {
    height: 450px;
  }

  .xui-sm-h-500 {
    height: 500px;
  }

  .xui-sm-h-600 {
    height: 600px;
  }

  .xui-sm-h-650 {
    height: 650px;
  }

  .xui-sm-h-700 {
    height: 700px;
  }

  .xui-sm-h-750 {
    height: 750px;
  }

  .xui-sm-h-800 {
    height: 800px;
  }

  .xui-sm-h-850 {
    height: 850px;
  }

  .xui-sm-h-900 {
    height: 900px;
  }

  .xui-sm-h-950 {
    height: 950px;
  }

  .xui-sm-h-1000 {
    height: 1000px;
  }

  .xui-sm-h-full,
  .xui-sm-h-100vh {
    height: 100vh;
    height: 100dvh;
  }

  .xui-sm-h-fluid-5 {
    height: 5%;
  }

  .xui-sm-h-fluid-10 {
    height: 10%;
  }

  .xui-sm-h-fluid-15 {
    height: 15%;
  }

  .xui-sm-h-fluid-20 {
    height: 20%;
  }

  .xui-sm-h-fluid-25 {
    height: 25%;
  }

  .xui-sm-h-fluid-30 {
    height: 30%;
  }

  .xui-sm-h-fluid-35 {
    height: 35%;
  }

  .xui-sm-h-fluid-40 {
    height: 40%;
  }

  .xui-sm-h-fluid-45 {
    height: 45%;
  }

  .xui-sm-h-fluid-50 {
    height: 50%;
  }

  .xui-sm-h-fluid-55 {
    height: 55%;
  }

  .xui-sm-h-fluid-60 {
    height: 60%;
  }

  .xui-sm-h-fluid-65 {
    height: 65%;
  }

  .xui-sm-h-fluid-70 {
    height: 70%;
  }

  .xui-sm-h-fluid-75 {
    height: 75%;
  }

  .xui-sm-h-fluid-80 {
    height: 80%;
  }

  .xui-sm-h-fluid-85 {
    height: 85%;
  }

  .xui-sm-h-fluid-90 {
    height: 90%;
  }

  .xui-sm-h-fluid-95 {
    height: 95%;
  }

  .xui-sm-h-fluid-100 {
    height: 100%;
  }




  /*Flexes*/
  .xui-sm-flex-jc-start,
  .xui-sm-flex-jc-flex-start {
    justify-content: flex-start;
  }

  .xui-sm-flex-jc-end,
  .xui-sm-flex-jc-flex-end {
    justify-content: flex-end;
  }

  .xui-sm-flex-jc-space-between {
    justify-content: space-between;
  }

  .xui-sm-flex-jc-space-around {
    justify-content: space-around;
  }

  .xui-sm-flex-jc-space-evenly {
    justify-content: space-evenly;
  }

  .xui-sm-flex-jc-center {
    justify-content: center;
  }

  .xui-sm-flex-jc-initial {
    justify-content: initial;
  }

  .xui-sm-flex-jc-inherit {
    justify-content: inherit;
  }

  .xui-sm-flex-ai-stretch {
    align-items: stretch;
  }

  .xui-sm-flex-ai-center {
    align-items: center;
  }

  .xui-sm-flex-ai-flex-start {
    align-items: flex-start;
  }

  .xui-sm-flex-ai-flex-end {
    align-items: flex-end;
  }

  .xui-sm-flex-ai-baseline {
    align-items: baseline;
  }

  .xui-sm-flex-ai-initial {
    align-items: initial;
  }

  .xui-sm-flex-ai-inherit {
    align-items: inherit;
  }

  .xui-sm-flex-wrap-wrap {
    flex-wrap: wrap;
  }

  .xui-sm-flex-wrap-nowrap {
    flex-wrap: nowrap;
  }

  .xui-sm-flex-wrap-wrap-reverse {
    flex-wrap: wrap-reverse;
  }

  .xui-sm-flex-wrap-inherit {
    flex-wrap: inherit;
  }

  .xui-sm-flex-wrap-initial {
    flex-wrap: initial;
  }

  .xui-sm-flex-dir-row {
    flex-direction: row;
  }

  .xui-sm-flex-dir-row-reverse {
    flex-direction: row-reverse;
  }

  .xui-sm-flex-dir-column {
    flex-direction: column;
  }

  .xui-sm-flex-dir-column-reverse {
    flex-direction: column-reverse;
  }

  .xui-sm-flex-dir-initial {
    flex-direction: initial;
  }

  .xui-sm-flex-dir-inherit {
    flex-direction: inherit;
  }

  .xui-sm-flex-grow-1 {
    flex-grow: 1;
  }

  .xui-sm-flex-grow-2 {
    flex-grow: 2;
  }

  .xui-sm-flex-grow-3 {
    flex-grow: 3;
  }

  .xui-sm-flex-grow-4 {
    flex-grow: 4;
  }

  .xui-sm-flex-grow-5 {
    flex-grow: 5;
  }

  .xui-sm-flex-grow-initial {
    flex-grow: initial;
  }

  .xui-sm-flex-grow-inherit {
    flex-grow: inherit;
  }

  .xui-sm-flex-shrink-1 {
    flex-shrink: 1;
  }

  .xui-sm-flex-shrink-2 {
    flex-shrink: 2;
  }

  .xui-sm-flex-shrink-3 {
    flex-shrink: 3;
  }

  .xui-sm-flex-shrink-4 {
    flex-shrink: 4;
  }

  .xui-sm-flex-shrink-5 {
    flex-shrink: 5;
  }

  .xui-sm-flex-shrink-initial {
    flex-shrink: initial;
  }

  .xui-sm-flex-shrink-inherit {
    flex-shrink: inherit;
  }




  /*Displays*/
  .xui-sm-d-none {
    display: none;
  }

  .xui-sm-d-inline {
    display: inline;
  }

  .xui-sm-d-inline-block {
    display: inline-block;
  }

  .xui-sm-d-block {
    display: block;
  }

  .xui-sm-d-contents {
    display: contents;
  }

  .xui-sm-d-inline-flex {
    display: inline-flex;
  }

  .xui-sm-d-inline-grid {
    display: inline-grid;
  }

  .xui-sm-d-inline-table {
    display: inline-table;
  }

  .xui-sm-d-list-item {
    display: list-item;
  }

  .xui-sm-d-run-in {
    display: run-in;
  }

  .xui-sm-d-table {
    display: table;
  }

  .xui-sm-d-table-caption {
    display: table-caption;
  }

  .xui-sm-d-table-column-group {
    display: table-column-group;
  }

  .xui-sm-d-table-header-group {
    display: table-header-group;
  }

  .xui-sm-d-table-footer-group {
    display: table-footer-group;
  }

  .xui-sm-d-table-row-group {
    display: table-row-group;
  }

  .xui-sm-d-table-cell {
    display: table-cell;
  }

  .xui-sm-d-table-column {
    display: table-column;
  }

  .xui-sm-d-table-row {
    display: table-row;
  }

  .xui-sm-d-initial {
    display: initial;
  }

  .xui-sm-d-inherit {
    display: inherit;
  }

  .xui-sm-d-flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    -webkit-box-align: stretch;
    -moz-box-align: stretch;
    -ms-flex-jc-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
  }

  .xui-sm-d-grid {
    display: grid;
  }





  /* Min/Max Widths & Heights */
  .xui-sm-min-w-50 {
    min-width: 50px !important;
  }

  .xui-sm-min-w-100 {
    min-width: 100px !important;
  }

  .xui-sm-min-w-150 {
    min-width: 150px !important;
  }

  .xui-sm-min-w-200 {
    min-width: 200px !important;
  }

  .xui-sm-min-w-250 {
    min-width: 250px !important;
  }

  .xui-sm-min-w-300 {
    min-width: 300px !important;
  }

  .xui-sm-min-w-350 {
    min-width: 350px !important;
  }

  .xui-sm-min-w-400 {
    min-width: 400px !important;
  }

  .xui-sm-min-w-450 {
    min-width: 450px !important;
  }

  .xui-sm-min-w-500 {
    min-width: 500px !important;
  }

  .xui-sm-min-w-550 {
    min-width: 550px !important;
  }

  .xui-sm-min-w-600 {
    min-width: 600px !important;
  }

  .xui-sm-min-w-650 {
    min-width: 650px !important;
  }

  .xui-sm-min-w-700 {
    min-width: 700px !important;
  }

  .xui-sm-min-w-750 {
    min-width: 750px !important;
  }

  .xui-sm-min-w-800 {
    min-width: 800px !important;
  }

  .xui-sm-min-w-850 {
    min-width: 850px !important;
  }

  .xui-sm-min-w-900 {
    min-width: 900px !important;
  }

  .xui-sm-min-w-950 {
    min-width: 950px !important;
  }

  .xui-sm-min-w-1000 {
    min-width: 1000px !important;
  }

  .xui-sm-min-h-50 {
    min-height: 50px !important;
  }

  .xui-sm-min-h-100 {
    min-height: 100px !important;
  }

  .xui-sm-min-h-150 {
    min-height: 150px !important;
  }

  .xui-sm-min-h-200 {
    min-height: 200px !important;
  }

  .xui-sm-min-h-250 {
    min-height: 250px !important;
  }

  .xui-sm-min-h-300 {
    min-height: 300px !important;
  }

  .xui-sm-min-h-350 {
    min-height: 350px !important;
  }

  .xui-sm-min-h-400 {
    min-height: 400px !important;
  }

  .xui-sm-min-h-450 {
    min-height: 450px !important;
  }

  .xui-sm-min-h-500 {
    min-height: 500px !important;
  }

  .xui-sm-min-h-550 {
    min-height: 550px !important;
  }

  .xui-sm-min-h-600 {
    min-height: 600px !important;
  }

  .xui-sm-min-h-650 {
    min-height: 650px !important;
  }

  .xui-sm-min-h-700 {
    min-height: 700px !important;
  }

  .xui-sm-min-h-750 {
    min-height: 750px !important;
  }

  .xui-sm-min-h-800 {
    min-height: 800px !important;
  }

  .xui-sm-min-h-850 {
    min-height: 850px !important;
  }

  .xui-sm-min-h-900 {
    min-height: 900px !important;
  }

  .xui-sm-min-h-950 {
    min-height: 950px !important;
  }

  .xui-sm-min-h-1000 {
    min-height: 1000px !important;
  }

  .xui-sm-max-w-50 {
    max-width: 50px !important;
  }

  .xui-sm-max-w-100 {
    max-width: 100px !important;
  }

  .xui-sm-max-w-150 {
    max-width: 150px !important;
  }

  .xui-sm-max-w-200 {
    max-width: 200px !important;
  }

  .xui-sm-max-w-250 {
    max-width: 250px !important;
  }

  .xui-sm-max-w-300 {
    max-width: 300px !important;
  }

  .xui-sm-max-w-350 {
    max-width: 350px !important;
  }

  .xui-sm-max-w-400 {
    max-width: 400px !important;
  }

  .xui-sm-max-w-450 {
    max-width: 450px !important;
  }

  .xui-sm-max-w-500 {
    max-width: 500px !important;
  }

  .xui-sm-max-w-550 {
    max-width: 550px !important;
  }

  .xui-sm-max-w-600 {
    max-width: 600px !important;
  }

  .xui-sm-max-w-650 {
    max-width: 650px !important;
  }

  .xui-sm-max-w-700 {
    max-width: 700px !important;
  }

  .xui-sm-max-w-750 {
    max-width: 750px !important;
  }

  .xui-sm-max-w-800 {
    max-width: 800px !important;
  }

  .xui-sm-max-w-850 {
    max-width: 850px !important;
  }

  .xui-sm-max-w-900 {
    max-width: 900px !important;
  }

  .xui-sm-max-w-950 {
    max-width: 950px !important;
  }

  .xui-sm-max-w-1000 {
    max-width: 1000px !important;
  }

  .xui-sm-max-w-1100 {
    max-width: 1100px !important;
  }

  .xui-sm-max-w-1200 {
    max-width: 1200px !important;
  }

  .xui-sm-max-w-1300 {
    max-width: 1300px !important;
  }

  .xui-sm-max-w-1400 {
    max-width: 1400px !important;
  }

  .xui-sm-max-w-1500 {
    max-width: 1500px !important;
  }

  .xui-sm-max-w-1600 {
    max-width: 1600px !important;
  }

  .xui-sm-max-w-1700 {
    max-width: 1700px !important;
  }

  .xui-sm-max-w-1800 {
    max-width: 1800px !important;
  }

  .xui-sm-max-w-1900 {
    max-width: 1900px !important;
  }

  .xui-sm-max-w-2000 {
    max-width: 2000px !important;
  }

  .xui-sm-max-h-50 {
    max-height: 50px !important;
  }

  .xui-sm-max-h-100 {
    max-height: 100px !important;
  }

  .xui-sm-max-h-150 {
    max-height: 150px !important;
  }

  .xui-sm-max-h-200 {
    max-height: 200px !important;
  }

  .xui-sm-max-h-250 {
    max-height: 250px !important;
  }

  .xui-sm-max-h-300 {
    max-height: 300px !important;
  }

  .xui-sm-max-h-350 {
    max-height: 350px !important;
  }

  .xui-sm-max-h-400 {
    max-height: 400px !important;
  }

  .xui-sm-max-h-450 {
    max-height: 450px !important;
  }

  .xui-sm-max-h-500 {
    max-height: 500px !important;
  }

  .xui-sm-max-h-550 {
    max-height: 550px !important;
  }

  .xui-sm-max-h-600 {
    max-height: 600px !important;
  }

  .xui-sm-max-h-650 {
    max-height: 650px !important;
  }

  .xui-sm-max-h-700 {
    max-height: 700px !important;
  }

  .xui-sm-max-h-750 {
    max-height: 750px !important;
  }

  .xui-sm-max-h-800 {
    max-height: 800px !important;
  }

  .xui-sm-max-h-850 {
    max-height: 850px !important;
  }

  .xui-sm-max-h-900 {
    max-height: 900px !important;
  }

  .xui-sm-max-h-950 {
    max-height: 950px !important;
  }

  .xui-sm-max-h-1000 {
    max-height: 1000px !important;
  }





  /*Fonts*/
  .xui-sm-font-w-normal {
    font-weight: normal;
  }

  .xui-sm-font-w-bold {
    font-weight: bold;
  }

  .xui-sm-font-w-bolder {
    font-weight: bolder;
  }

  .xui-sm-font-w-lighter {
    font-weight: lighter;
  }

  .xui-sm-font-w-initial {
    font-weight: initial;
  }

  .xui-sm-font-w-inherit {
    font-weight: inherit;
  }

  .xui-sm-font-w-100 {
    font-weight: 100;
  }

  .xui-sm-font-w-200 {
    font-weight: 200;
  }

  .xui-sm-font-w-300 {
    font-weight: 300;
  }

  .xui-sm-font-w-400 {
    font-weight: 400;
  }

  .xui-sm-font-w-500 {
    font-weight: 500;
  }

  .xui-sm-font-w-600 {
    font-weight: 600;
  }

  .xui-sm-font-w-700 {
    font-weight: 700;
  }

  .xui-sm-font-w-800 {
    font-weight: 800;
  }

  .xui-sm-font-w-900 {
    font-weight: 900;
  }

  .xui-sm-font-sz-xx-small {
    font-size: xx-small;
  }

  .xui-sm-font-sz-x-small {
    font-size: x-small;
  }

  .xui-sm-font-sz-small {
    font-size: small;
  }

  .xui-sm-font-sz-x-large {
    font-size: x-large;
  }

  .xui-sm-font-sz-xx-large {
    font-size: xx-large;
  }

  .xui-sm-font-sz-smaller {
    font-size: smaller;
  }

  .xui-sm-font-sz-larger {
    font-size: larger;
  }

  .xui-sm-font-style-normal {
    font-style: normal;
  }

  .xui-sm-font-style-oblique {
    font-style: oblique;
  }

  .xui-sm-font-style-italic {
    font-style: italic;
  }

  .xui-sm-font-style-initial {
    font-style: initial;
  }

  .xui-sm-font-style-inherit {
    font-style: inherit;
  }

  .xui-sm-font-sz-initial {
    font-size: initial;
  }

  .xui-sm-font-sz-inherit {
    font-size: inherit;
  }

  .xui-sm-font-sz-50 {
    font-size: 50%;
  }

  .xui-sm-font-sz-55 {
    font-size: 55%;
  }

  .xui-sm-font-sz-60 {
    font-size: 60%;
  }

  .xui-sm-font-sz-65 {
    font-size: 65%;
  }

  .xui-sm-font-sz-70 {
    font-size: 70%;
  }

  .xui-sm-font-sz-75 {
    font-size: 75%;
  }

  .xui-sm-font-sz-80 {
    font-size: 80%;
  }

  .xui-sm-font-sz-85 {
    font-size: 85%;
  }

  .xui-sm-font-sz-90 {
    font-size: 90%;
  }

  .xui-sm-font-sz-95 {
    font-size: 95%;
  }

  .xui-sm-font-sz-100 {
    font-size: 100%;
  }

  .xui-sm-font-sz-105 {
    font-size: 105%;
  }

  .xui-sm-font-sz-110 {
    font-size: 110%;
  }

  .xui-sm-font-sz-115 {
    font-size: 115%;
  }

  .xui-sm-font-sz-120 {
    font-size: 120%;
  }

  .xui-sm-font-sz-125 {
    font-size: 125%;
  }

  .xui-sm-font-sz-130 {
    font-size: 130%;
  }

  .xui-sm-font-sz-135 {
    font-size: 135%;
  }

  .xui-sm-font-sz-140 {
    font-size: 140%;
  }

  .xui-sm-font-sz-145 {
    font-size: 145%;
  }

  .xui-sm-font-sz-150 {
    font-size: 150%;
  }

  .xui-sm-font-sz-155 {
    font-size: 155%;
  }

  .xui-sm-font-sz-160 {
    font-size: 160%;
  }

  .xui-sm-font-sz-165 {
    font-size: 165%;
  }

  .xui-sm-font-sz-170 {
    font-size: 170%;
  }

  .xui-sm-font-sz-175 {
    font-size: 175%;
  }

  .xui-sm-font-sz-180 {
    font-size: 180%;
  }

  .xui-sm-font-sz-185 {
    font-size: 185%;
  }

  .xui-sm-font-sz-190 {
    font-size: 190%;
  }

  .xui-sm-font-sz-195 {
    font-size: 195%;
  }

  .xui-sm-font-sz-200 {
    font-size: 200%;
  }

  .xui-sm-font-sz-205 {
    font-size: 205%;
  }

  .xui-sm-font-sz-210 {
    font-size: 210%;
  }

  .xui-sm-font-sz-215 {
    font-size: 215%;
  }

  .xui-sm-font-sz-220 {
    font-size: 220%;
  }

  .xui-sm-font-sz-225 {
    font-size: 225%;
  }

  .xui-sm-font-sz-230 {
    font-size: 230%;
  }

  .xui-sm-font-sz-235 {
    font-size: 235%;
  }

  .xui-sm-font-sz-240 {
    font-size: 240%;
  }

  .xui-sm-font-sz-245 {
    font-size: 245%;
  }

  .xui-sm-font-sz-250 {
    font-size: 250%;
  }

  .xui-sm-font-sz-300 {
    font-size: 300%;
  }

  .xui-sm-font-sz-350 {
    font-size: 350%;
  }

  .xui-sm-font-sz-400 {
    font-size: 400%;
  }

  .xui-sm-font-sz-450 {
    font-size: 450%;
  }

  .xui-sm-font-sz-500 {
    font-size: 500%;
  }

  .xui-sm-font-sz-550 {
    font-size: 550%;
  }

  .xui-sm-font-sz-600 {
    font-size: 600%;
  }

  .xui-sm-font-sz-650 {
    font-size: 650%;
  }

  .xui-sm-font-sz-700 {
    font-size: 700%;
  }

  .xui-sm-font-sz-750 {
    font-size: 750%;
  }

  .xui-sm-font-sz-800 {
    font-size: 800%;
  }

  .xui-sm-font-sz-850 {
    font-size: 850%;
  }

  .xui-sm-font-sz-900 {
    font-size: 900%;
  }

  .xui-sm-font-sz-950 {
    font-size: 950%;
  }

  .xui-sm-font-sz-1000 {
    font-size: 1000%;
  }





  /*Images*/
  .xui-sm-img-15 {
    display: block;
    max-width: 15px;
    width: 100%;
  }

  .xui-sm-img-20 {
    display: block;
    max-width: 20px;
    width: 100%;
  }

  .xui-sm-img-25 {
    display: block;
    max-width: 25px;
    width: 100%;
  }

  .xui-sm-img-30 {
    display: block;
    max-width: 30px;
    width: 100%;
  }

  .xui-sm-img-35 {
    display: block;
    max-width: 35px;
    width: 100%;
  }

  .xui-sm-img-40 {
    display: block;
    max-width: 40px;
    width: 100%;
  }

  .xui-sm-img-45 {
    display: block;
    max-width: 45px;
    width: 100%;
  }

  .xui-sm-img-50 {
    display: block;
    max-width: 50px;
    width: 100%;
  }

  .xui-sm-img-100 {
    display: block;
    max-width: 100px;
    width: 100%;
  }

  .xui-sm-img-150 {
    display: block;
    max-width: 150px;
    width: 100%;
  }

  .xui-sm-img-200 {
    display: block;
    max-width: 200px;
    width: 100%;
  }

  .xui-sm-img-250 {
    display: block;
    max-width: 250px;
    width: 100%;
  }

  .xui-sm-img-300 {
    display: block;
    max-width: 300px;
    width: 100%;
  }

  .xui-sm-img-350 {
    display: block;
    max-width: 350px;
    width: 100%;
  }

  .xui-sm-img-400 {
    display: block;
    max-width: 400px;
    width: 100%;
  }

  .xui-sm-img-450 {
    display: block;
    max-width: 450px;
    width: 100%;
  }

  .xui-sm-img-500 {
    display: block;
    max-width: 500px;
    width: 100%;
  }

  .xui-sm-img-550 {
    display: block;
    max-width: 550px;
    width: 100%;
  }

  .xui-sm-img-600 {
    display: block;
    max-width: 600px;
    width: 100%;
  }

  .xui-sm-img-650 {
    display: block;
    max-width: 650px;
    width: 100%;
  }

  .xui-sm-img-700 {
    display: block;
    max-width: 700px;
    width: 100%;
  }

  .xui-sm-img-750 {
    display: block;
    max-width: 750px;
    width: 100%;
  }

  .xui-sm-img-800 {
    display: block;
    max-width: 800px;
    width: 100%;
  }

  .xui-sm-img-850 {
    display: block;
    max-width: 850px;
    width: 100%;
  }

  .xui-sm-img-900 {
    display: block;
    max-width: 900px;
    width: 100%;
  }

  .xui-sm-img-950 {
    display: block;
    max-width: 950px;
    width: 100%;
  }

  .xui-sm-img-1000 {
    display: block;
    max-width: 1000px;
    width: 100%;
  }

  .xui-sm-img-responsive {
    display: block;
    width: 100%;
  }




  /* Modals */
  .xui-sm-modal-center {
    justify-content: center;
    align-items: center;
  }

  .xui-sm-modal-top-left {
    justify-content: flex-start;
    align-items: flex-start;
  }

  .xui-sm-modal-top-right {
    justify-content: flex-end;
    align-items: flex-start;
  }

  .xui-sm-modal-bottom-left {
    justify-content: flex-start;
    align-items: flex-end;
  }

  .xui-sm-modal-bottom-right {
    justify-content: flex-end;
    align-items: flex-end;
  }

  .xui-sm-modal-bottom-center {
    justify-content: center;
    align-items: flex-end;
  }





  /*Containers Spacing*/
  .xui-container {
    max-width: 576px;
    padding-left: 25px;
    padding-right: 25px;
  }

  .xui-left-fluid {
    left: 25px;
  }

  .xui-right-fluid {
    right: 25px;
  }

}





/*Medium devices (tablets, 768px and up)*/
@media screen and (min-width: 768px) {

  .xui-md-z-index-auto {
    z-index: auto;
  }

  .xui-md-z-index-initial {
    z-index: initial;
  }

  .xui-md-z-index-inherit {
    z-index: inherit;
  }

  .xui-md-z-index-1 {
    z-index: 1;
  }

  .xui-md-z-index-1 {
    z-index: 1;
  }

  .xui-md-z-index-2 {
    z-index: 2;
  }

  .xui-md-z-index-3 {
    z-index: 3;
  }

  .xui-md-z-index-4 {
    z-index: 4;
  }

  .xui-md-z-index-5 {
    z-index: 5;
  }

  .xui-md-z-index-6 {
    z-index: 6;
  }

  .xui-md-z-index-7 {
    z-index: 7;
  }

  .xui-md-z-index-8 {
    z-index: 8;
  }

  .xui-md-z-index-9 {
    z-index: 9;
  }

  .xui-md-z-index-10 {
    z-index: 10;
  }

  .xui-md-z-index--1 {
    z-index: -1;
  }

  .xui-md-z-index--1 {
    z-index: -1;
  }

  .xui-md-z-index--2 {
    z-index: -2;
  }

  .xui-md-z-index--3 {
    z-index: -3;
  }

  .xui-md-z-index--4 {
    z-index: -4;
  }

  .xui-md-z-index--5 {
    z-index: -5;
  }

  .xui-md-z-index--6 {
    z-index: -6;
  }

  .xui-md-z-index--7 {
    z-index: -7;
  }

  .xui-md-z-index--8 {
    z-index: -8;
  }

  .xui-md-z-index--9 {
    z-index: -9;
  }

  .xui-md-z-index--10 {
    z-index: -10;
  }



  /*Columns*/
  .xui-md-columns-auto {
    columns: auto;
  }

  .xui-md-columns-initial {
    columns: initial;
  }

  .xui-md-columns-inherit {
    columns: inherit;
  }

  .xui-md-column-width-auto {
    column-width: auto;
  }

  .xui-md-column-width-inherit {
    column-width: inherit;
  }

  .xui-md-column-width-initial {
    column-width: initial;
  }

  .xui-md-column-count-1 {
    column-count: 1;
  }

  .xui-md-column-count-2 {
    column-count: 2;
  }

  .xui-md-column-count-3 {
    column-count: 3;
  }

  .xui-md-column-count-4 {
    column-count: 4;
  }

  .xui-md-column-count-5 {
    column-count: 5;
  }

  .xui-md-column-count-6 {
    column-count: 6;
  }

  .xui-md-column-count-7 {
    column-count: 7;
  }

  .xui-md-column-count-8 {
    column-count: 8;
  }

  .xui-md-column-count-9 {
    column-count: 9;
  }

  .xui-md-column-count-10 {
    column-count: 10;
  }

  .xui-md-column-count-11 {
    column-count: 11;
  }

  .xui-md-column-count-12 {
    column-count: 12;
  }

  .xui-md-column-fill-balance {
    column-fill: balance;
  }

  .xui-md-column-fill-auto {
    column-fill: auto;
  }

  .xui-md-column-fill-initial {
    column-fill: initial;
  }

  .xui-md-column-fill-inherit {
    column-fill: inherit;
  }

  .xui-md-column-gap-normal {
    column-gap: normal;
  }

  .xui-md-column-gap-initial {
    column-gap: initial;
  }

  .xui-md-column-gap-inherit {
    column-gap: inherit;
  }

  .xui-md-column-gap-half {
    column-gap: .5rem;
  }

  .xui-md-column-gap-1 {
    column-gap: 1rem;
  }

  .xui-md-column-gap-1-half {
    column-gap: 1.5rem;
  }

  .xui-md-column-gap-2 {
    column-gap: 2rem;
  }

  .xui-md-column-gap-2-half {
    column-gap: 2.5rem;
  }

  .xui-md-column-gap-3 {
    column-gap: 3rem;
  }

  .xui-md-column-gap-3-half {
    column-gap: 3.5rem;
  }

  .xui-md-column-gap-4 {
    column-gap: 4rem;
  }

  .xui-md-column-gap-4-half {
    column-gap: 4.5rem;
  }

  .xui-md-column-gap-5 {
    column-gap: 5rem;
  }

  .xui-md-column-span-none {
    column-span: none;
  }

  .xui-md-column-span-all {
    column-span: all;
  }

  .xui-md-column-span-initial {
    column-span: initial;
  }

  .xui-md-column-span-inherit {
    column-span: inherit;
  }



  /* Rows */
  .xui-md-row-gap-normal {
    row-gap: normal;
  }

  .xui-md-row-gap-initial {
    row-gap: initial;
  }

  .xui-md-row-gap-inherit {
    row-gap: inherit;
  }

  .xui-md-row-gap-half {
    row-gap: .5rem;
  }

  .xui-md-row-gap-1 {
    row-gap: 1rem;
  }

  .xui-md-row-gap-1-half {
    row-gap: 1.5rem;
  }

  .xui-md-row-gap-2 {
    row-gap: 2rem;
  }

  .xui-md-row-gap-2-half {
    row-gap: 2.5rem;
  }

  .xui-md-row-gap-3 {
    row-gap: 3rem;
  }

  .xui-md-row-gap-3-half {
    row-gap: 3.5rem;
  }

  .xui-md-row-gap-4 {
    row-gap: 4rem;
  }

  .xui-md-row-gap-4-half {
    row-gap: 4.5rem;
  }

  .xui-md-row-gap-5 {
    row-gap: 5rem;
  }




  /*Rows & Columns*/
  .xui-md-col-1 {
    flex-basis: 8.3%;
  }

  .xui-md-col-2 {
    flex-basis: 16.66%;
  }

  .xui-md-col-3 {
    flex-basis: 25%;
  }

  .xui-md-col-4 {
    flex-basis: 33.33%;
  }

  .xui-md-col-5 {
    flex-basis: 41.66%;
  }

  .xui-md-col-6 {
    flex-basis: 50%;
  }

  .xui-md-col-7 {
    flex-basis: 58.33%;
  }

  .xui-md-col-8 {
    flex-basis: 66.66%;
  }

  .xui-md-col-9 {
    flex-basis: 75%;
  }

  .xui-md-col-10 {
    flex-basis: 83.33%;
  }

  .xui-md-col-11 {
    flex-basis: 91.66%;
  }

  .xui-md-col-12 {
    flex-basis: 100%;
  }





  /*Line Heights & Letter Spacings*/
  .xui-md-line-height-half {
    line-height: .5rem;
  }

  .xui-md-line-height-1 {
    line-height: 1rem;
  }

  .xui-md-line-height-1-half {
    line-height: 1.5rem;
  }

  .xui-md-line-height-2 {
    line-height: 2rem;
  }

  .xui-md-line-height-2-half {
    line-height: 2.5rem;
  }

  .xui-md-line-height-3 {
    line-height: 3rem;
  }

  .xui-md-line-height-3-half {
    line-height: 3.5rem;
  }

  .xui-md-line-height-4 {
    line-height: 4rem;
  }

  .xui-md-line-height-4-half {
    line-height: 4.5rem;
  }

  .xui-md-line-height-5 {
    line-height: 5rem;
  }

  .xui-md-line-height-5-half {
    line-height: 5.5rem;
  }

  .xui-md-line-height-6 {
    line-height: 6rem;
  }

  .xui-md-line-height-6-half {
    line-height: 6.5rem;
  }

  .xui-md-line-height-7 {
    line-height: 7rem;
  }

  .xui-md-line-height-7-half {
    line-height: 7.5rem;
  }

  .xui-md-line-height-8 {
    line-height: 8rem;
  }

  .xui-md-line-height-8-half {
    line-height: 8.5rem;
  }

  .xui-md-line-height-9 {
    line-height: 9rem;
  }

  .xui-md-line-height-9-half {
    line-height: 9.5rem;
  }

  .xui-md-line-height-10 {
    line-height: 10rem;
  }

  .xui-md-line-height-normal {
    line-height: normal;
  }

  .xui-md-line-height-inherit {
    line-height: inherit;
  }

  .xui-md-line-height-initial {
    line-height: initial;
  }

  .xui-md-letter-spacing-half {
    letter-spacing: .5px;
  }

  .xui-md-letter-spacing-1 {
    letter-spacing: 1px;
  }

  .xui-md-letter-spacing-1-half {
    letter-spacing: .15px;
  }

  .xui-md-letter-spacing-2 {
    letter-spacing: 2px;
  }

  .xui-md-letter-spacing-2-half {
    letter-spacing: 2.5px;
  }

  .xui-md-letter-spacing-3 {
    letter-spacing: 3px;
  }

  .xui-md-letter-spacing-3-half {
    letter-spacing: 3.5px;
  }

  .xui-md-letter-spacing-4 {
    letter-spacing: 4px;
  }

  .xui-md-letter-spacing-4-half {
    letter-spacing: 4.5px;
  }

  .xui-md-letter-spacing-5 {
    letter-spacing: 5px;
  }

  .xui-md-letter-spacing-normal {
    letter-spacing: normal;
  }

  .xui-md-letter-spacing-inherit {
    letter-spacing: inherit;
  }

  .xui-md-letter-spacing-initial {
    letter-spacing: initial;
  }





  /*Borders*/
  .xui-md-bdr-rad-initial {
    border-radius: initial;
  }

  .xui-md-bdr-rad-inherit {
    border-radius: inherit;
  }

  .xui-md-bdr-rad-half {
    border-radius: .5rem;
  }

  .xui-md-bdr-rad-1 {
    border-radius: 1rem;
  }

  .xui-md-bdr-rad-1-half {
    border-radius: 1.5rem;
  }

  .xui-md-bdr-rad-2 {
    border-radius: 2rem;
  }

  .xui-md-bdr-rad-2-half {
    border-radius: 2.5rem;
  }

  .xui-md-bdr-rad-3 {
    border-radius: 3rem;
  }

  .xui-md-bdr-rad-3-half {
    border-radius: 3.5rem;
  }

  .xui-md-bdr-rad-4 {
    border-radius: 4rem;
  }

  .xui-md-bdr-rad-4-half {
    border-radius: 4.5rem;
  }

  .xui-md-bdr-rad-5 {
    border-radius: 5rem;
  }

  .xui-md-bdr-rad-5-half {
    border-radius: 5.5rem;
  }

  .xui-md-bdr-rad-6 {
    border-radius: 6rem;
  }

  .xui-md-bdr-rad-6-half {
    border-radius: 6.5rem;
  }

  .xui-md-bdr-rad-7 {
    border-radius: 7rem;
  }

  .xui-md-bdr-rad-7-half {
    border-radius: 7.5rem;
  }

  .xui-md-bdr-rad-8 {
    border-radius: 8rem;
  }

  .xui-md-bdr-rad-8-half {
    border-radius: 8.5rem;
  }

  .xui-md-bdr-rad-9 {
    border-radius: 9rem;
  }

  .xui-md-bdr-rad-9-half {
    border-radius: 9.5rem;
  }

  .xui-md-bdr-rad-10 {
    border-radius: 10rem;
  }

  .xui-md-bdr-rad-circle,
  .xui-md-bdr-rad-round {
    border-radius: 50%;
  }

  .xui-md-bdr-w-medium,
  .xui-md-bdr-width-medium {
    border-width: medium;
  }

  .xui-md-bdr-w-thin,
  .xui-md-bdr-width-thin {
    border-width: thin;
  }

  .xui-md-bdr-w-thick,
  .xui-md-bdr-width-thick {
    border-width: thick;
  }

  .xui-md-bdr-w-initial,
  .xui-md-bdr-width-initial {
    border-width: initial;
  }

  .xui-md-bdr-w-inherit,
  .xui-md-bdr-width-inherit {
    border-width: inherit;
  }

  .xui-md-bdr-w-1,
  .xui-md-bdr-width-1 {
    border-width: 1px !important;
  }

  .xui-md-bdr-w-2,
  .xui-md-bdr-width-2 {
    border-width: 2px !important;
  }

  .xui-md-bdr-w-3,
  .xui-md-bdr-width-3 {
    border-width: 3px !important;
  }

  .xui-md-bdr-w-4,
  .xui-md-bdr-width-4 {
    border-width: 4px !important;
  }

  .xui-md-bdr-w-5,
  .xui-md-bdr-width-5 {
    border-width: 5px !important;
  }

  .xui-md-bdr-w-6,
  .xui-md-bdr-width-6 {
    border-width: 6px !important;
  }

  .xui-md-bdr-w-7,
  .xui-md-bdr-width-7 {
    border-width: 7px !important;
  }

  .xui-md-bdr-w-8,
  .xui-md-bdr-width-8 {
    border-width: 8px !important;
  }

  .xui-md-bdr-w-9,
  .xui-md-bdr-width-9 {
    border-width: 9px !important;
  }

  .xui-md-bdr-w-10,
  .xui-md-bdr-width-10 {
    border-width: 10px !important;
  }

  .xui-md-bdr-w-11,
  .xui-md-bdr-width-11 {
    border-width: 11px !important;
  }

  .xui-md-bdr-w-12,
  .xui-md-bdr-width-12 {
    border-width: 12px !important;
  }

  .xui-md-bdr-w-13,
  .xui-md-bdr-width-13 {
    border-width: 13px !important;
  }

  .xui-md-bdr-w-14,
  .xui-md-bdr-width-14 {
    border-width: 14px !important;
  }

  .xui-md-bdr-w-15,
  .xui-md-bdr-width-15 {
    border-width: 15px !important;
  }

  .xui-md-bdr-w-16,
  .xui-md-bdr-width-16 {
    border-width: 16px !important;
  }

  .xui-md-bdr-w-17,
  .xui-md-bdr-width-17 {
    border-width: 17px !important;
  }

  .xui-md-bdr-w-18,
  .xui-md-bdr-width-18 {
    border-width: 18px !important;
  }

  .xui-md-bdr-w-19,
  .xui-md-bdr-width-19 {
    border-width: 19px !important;
  }

  .xui-md-bdr-w-20,
  .xui-md-bdr-width-20 {
    border-width: 20px !important;
  }

  .xui-md-bdr-s-none,
  .xui-md-bdr-style-none {
    border-style: none !important;
  }

  .xui-md-bdr-s-hidden,
  .xui-md-bdr-style-hidden {
    border-style: hidden !important;
  }

  .xui-md-bdr-s-dotted,
  .xui-md-bdr-style-dotted {
    border-style: dotted !important;
  }

  .xui-md-bdr-s-dashed,
  .xui-md-bdr-style-dashed {
    border-style: dashed !important;
  }

  .xui-md-bdr-s-solid,
  .xui-md-bdr-style-solid {
    border-style: solid !important;
  }

  .xui-md-bdr-s-double,
  .xui-md-bdr-style-double {
    border-style: double !important;
  }

  .xui-md-bdr-s-groove,
  .xui-md-bdr-style-groove {
    border-style: groove !important;
  }

  .xui-md-bdr-s-ridge,
  .xui-md-bdr-style-ridge {
    border-style: ridge !important;
  }

  .xui-md-bdr-s-inset,
  .xui-md-bdr-style-inset {
    border-style: inset !important;
  }

  .xui-md-bdr-s-outset,
  .xui-md-bdr-style-outset {
    border-style: outset !important;
  }

  .xui-md-bdr-s-initial,
  .xui-md-bdr-style-initial {
    border-style: initial !important;
  }

  .xui-md-bdr-s-inherit,
  .xui-md-bdr-style-inherit {
    border-style: inherit !important;
  }





  /*Grids*/
  .xui-md-grid-row-1 {
    grid-template-rows: repeat(1, 1fr);
  }

  .xui-md-grid-row-2 {
    grid-template-rows: repeat(2, 1fr);
  }

  .xui-md-grid-row-3 {
    grid-template-rows: repeat(3, 1fr);
  }

  .xui-md-grid-row-4 {
    grid-template-rows: repeat(4, 1fr);
  }

  .xui-md-grid-row-5 {
    grid-template-rows: repeat(5, 1fr);
  }

  .xui-md-grid-row-6 {
    grid-template-rows: repeat(6, 1fr);
  }

  .xui-md-grid-row-7 {
    grid-template-rows: repeat(7, 1fr);
  }

  .xui-md-grid-row-8 {
    grid-template-rows: repeat(8, 1fr);
  }

  .xui-md-grid-row-9 {
    grid-template-rows: repeat(9, 1fr);
  }

  .xui-md-grid-row-10 {
    grid-template-rows: repeat(10, 1fr);
  }

  .xui-md-grid-row-11 {
    grid-template-rows: repeat(11, 1fr);
  }

  .xui-md-grid-row-12 {
    grid-template-rows: repeat(12, 1fr);
  }

  .xui-md-grid-col-1 {
    grid-template-columns: repeat(1, 1fr);
  }

  .xui-md-grid-col-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .xui-md-grid-col-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .xui-md-grid-col-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .xui-md-grid-col-5 {
    grid-template-columns: repeat(5, 1fr);
  }

  .xui-md-grid-col-6 {
    grid-template-columns: repeat(6, 1fr);
  }

  .xui-md-grid-col-7 {
    grid-template-columns: repeat(7, 1fr);
  }

  .xui-md-grid-col-8 {
    grid-template-columns: repeat(8, 1fr);
  }

  .xui-md-grid-col-9 {
    grid-template-columns: repeat(9, 1fr);
  }

  .xui-md-grid-col-10 {
    grid-template-columns: repeat(10, 1fr);
  }

  .xui-md-grid-col-11 {
    grid-template-columns: repeat(11, 1fr);
  }

  .xui-md-grid-col-12 {
    grid-template-columns: repeat(12, 1fr);
  }

  .xui-md-grid-gap-none {
    grid-gap: 0;
  }

  .xui-md-grid-gap-half {
    grid-gap: .5rem;
  }

  .xui-md-grid-gap-1 {
    grid-gap: 1rem;
  }

  .xui-md-grid-gap-1-half {
    grid-gap: 1.5rem;
  }

  .xui-md-grid-gap-2 {
    grid-gap: 2rem;
  }

  .xui-md-grid-gap-2-half {
    grid-gap: 2.5rem;
  }

  .xui-md-grid-gap-3 {
    grid-gap: 3rem;
  }

  .xui-md-grid-gap-3-half {
    grid-gap: 3.5rem;
  }

  .xui-md-grid-gap-4 {
    grid-gap: 4rem;
  }

  .xui-md-grid-gap-4-half {
    grid-gap: 4.5rem;
  }

  .xui-md-grid-gap-5 {
    grid-gap: 5rem;
  }

  .xui-md-grid-gap-5-half {
    grid-gap: 5.5rem;
  }

  .xui-md-grid-gap-6 {
    grid-gap: 6rem;
  }

  .xui-md-grid-gap-6-half {
    grid-gap: 6.5rem;
  }

  .xui-md-grid-gap-7 {
    grid-gap: 7rem;
  }

  .xui-md-grid-gap-7-half {
    grid-gap: 7.5rem;
  }

  .xui-md-grid-gap-8 {
    grid-gap: 8rem;
  }

  .xui-md-grid-gap-8-half {
    grid-gap: 8.5rem;
  }

  .xui-md-grid-gap-9 {
    grid-gap: 9rem;
  }

  .xui-md-grid-gap-9-half {
    grid-gap: 9.5rem;
  }

  .xui-md-grid-gap-10 {
    grid-gap: 10rem;
  }

  .xui-md-grid-row-gap-none {
    grid-row-gap: 0;
  }

  .xui-md-grid-row-gap-half {
    grid-row-gap: .5rem;
  }

  .xui-md-grid-row-gap-1 {
    grid-row-gap: 1rem;
  }

  .xui-md-grid-row-gap-1-half {
    grid-row-gap: 1.5rem;
  }

  .xui-md-grid-row-gap-2 {
    grid-row-gap: 2rem;
  }

  .xui-md-grid-row-gap-2-half {
    grid-row-gap: 2.5rem;
  }

  .xui-md-grid-row-gap-3 {
    grid-row-gap: 3rem;
  }

  .xui-md-grid-row-gap-3-half {
    grid-row-gap: 3.5rem;
  }

  .xui-md-grid-row-gap-4 {
    grid-row-gap: 4rem;
  }

  .xui-md-grid-row-gap-4-half {
    grid-row-gap: 4.5rem;
  }

  .xui-md-grid-row-gap-5 {
    grid-row-gap: 5rem;
  }

  .xui-md-grid-row-gap-5-half {
    grid-row-gap: 5.5rem;
  }

  .xui-md-grid-row-gap-6 {
    grid-row-gap: 6rem;
  }

  .xui-md-grid-row-gap-6-half {
    grid-row-gap: 6.5rem;
  }

  .xui-md-grid-row-gap-7 {
    grid-row-gap: 7rem;
  }

  .xui-md-grid-row-gap-7-half {
    grid-row-gap: 7.5rem;
  }

  .xui-md-grid-row-gap-8 {
    grid-row-gap: 8rem;
  }

  .xui-md-grid-row-gap-8-half {
    grid-row-gap: 8.5rem;
  }

  .xui-md-grid-row-gap-9 {
    grid-row-gap: 9rem;
  }

  .xui-md-grid-row-gap-9-half {
    grid-row-gap: 9.5rem;
  }

  .xui-md-grid-row-gap-10 {
    grid-row-gap: 10rem;
  }

  .xui-md-grid-column-gap-none {
    grid-column-gap: 0;
  }

  .xui-md-grid-column-gap-half {
    grid-column-gap: .5rem;
  }

  .xui-md-grid-column-gap-1 {
    grid-column-gap: 1rem;
  }

  .xui-md-grid-column-gap-1-half {
    grid-column-gap: 1.5rem;
  }

  .xui-md-grid-column-gap-2 {
    grid-column-gap: 2rem;
  }

  .xui-md-grid-column-gap-2-half {
    grid-column-gap: 2.5rem;
  }

  .xui-md-grid-column-gap-3 {
    grid-column-gap: 3rem;
  }

  .xui-md-grid-column-gap-3-half {
    grid-column-gap: 3.5rem;
  }

  .xui-md-grid-column-gap-4 {
    grid-column-gap: 4rem;
  }

  .xui-md-grid-column-gap-4-half {
    grid-column-gap: 4.5rem;
  }

  .xui-md-grid-column-gap-5 {
    grid-column-gap: 5rem;
  }

  .xui-md-grid-column-gap-5-half {
    grid-column-gap: 5.5rem;
  }

  .xui-md-grid-column-gap-6 {
    grid-column-gap: 6rem;
  }

  .xui-md-grid-column-gap-6-half {
    grid-column-gap: 6.5rem;
  }

  .xui-md-grid-column-gap-7 {
    grid-column-gap: 7rem;
  }

  .xui-md-grid-column-gap-7-half {
    grid-column-gap: 7.5rem;
  }

  .xui-md-grid-column-gap-8 {
    grid-column-gap: 8rem;
  }

  .xui-md-grid-column-gap-8-half {
    grid-column-gap: 8.5rem;
  }

  .xui-md-grid-column-gap-9 {
    grid-column-gap: 9rem;
  }

  .xui-md-grid-column-gap-9-half {
    grid-column-gap: 9.5rem;
  }

  .xui-md-grid-column-gap-10 {
    grid-column-gap: 10rem;
  }





  /* The Modern Way for Gaps That Applies to Grid & Flexbox */
  .xui-md-gap-none {
    gap: 0;
  }

  .xui-md-gap-half {
    gap: .5rem;
  }

  .xui-md-gap-1 {
    gap: 1rem;
  }

  .xui-md-gap-1-half {
    gap: 1.5rem;
  }

  .xui-md-gap-2 {
    gap: 2rem;
  }

  .xui-md-gap-2-half {
    gap: 2.5rem;
  }

  .xui-md-gap-3 {
    gap: 3rem;
  }

  .xui-md-gap-3-half {
    gap: 3.5rem;
  }

  .xui-md-gap-4 {
    gap: 4rem;
  }

  .xui-md-gap-4-half {
    gap: 4.5rem;
  }

  .xui-md-gap-5 {
    gap: 5rem;
  }

  .xui-md-gap-5-half {
    gap: 5.5rem;
  }

  .xui-md-gap-6 {
    gap: 6rem;
  }

  .xui-md-gap-6-half {
    gap: 6.5rem;
  }

  .xui-md-gap-7 {
    gap: 7rem;
  }

  .xui-md-gap-7-half {
    gap: 7.5rem;
  }

  .xui-md-gap-8 {
    gap: 8rem;
  }

  .xui-md-gap-8-half {
    gap: 8.5rem;
  }

  .xui-md-gap-9 {
    gap: 9rem;
  }

  .xui-md-gap-9-half {
    gap: 9.5rem;
  }

  .xui-md-gap-10 {
    gap: 10rem;
  }

  .xui-md-row-gap-none {
    row-gap: 0;
  }

  .xui-md-row-gap-half {
    row-gap: .5rem;
  }

  .xui-md-row-gap-1 {
    row-gap: 1rem;
  }

  .xui-md-row-gap-1-half {
    row-gap: 1.5rem;
  }

  .xui-md-row-gap-2 {
    row-gap: 2rem;
  }

  .xui-md-row-gap-2-half {
    row-gap: 2.5rem;
  }

  .xui-md-row-gap-3 {
    row-gap: 3rem;
  }

  .xui-md-row-gap-3-half {
    row-gap: 3.5rem;
  }

  .xui-md-row-gap-4 {
    row-gap: 4rem;
  }

  .xui-md-row-gap-4-half {
    row-gap: 4.5rem;
  }

  .xui-md-row-gap-5 {
    row-gap: 5rem;
  }

  .xui-md-row-gap-5-half {
    row-gap: 5.5rem;
  }

  .xui-md-row-gap-6 {
    row-gap: 6rem;
  }

  .xui-md-row-gap-6-half {
    row-gap: 6.5rem;
  }

  .xui-md-row-gap-7 {
    row-gap: 7rem;
  }

  .xui-md-row-gap-7-half {
    row-gap: 7.5rem;
  }

  .xui-md-row-gap-8 {
    row-gap: 8rem;
  }

  .xui-md-row-gap-8-half {
    row-gap: 8.5rem;
  }

  .xui-md-row-gap-9 {
    row-gap: 9rem;
  }

  .xui-md-row-gap-9-half {
    row-gap: 9.5rem;
  }

  .xui-md-row-gap-10 {
    row-gap: 10rem;
  }

  .xui-md-column-gap-none {
    column-gap: 0;
  }

  .xui-md-column-gap-half {
    column-gap: .5rem;
  }

  .xui-md-column-gap-1 {
    column-gap: 1rem;
  }

  .xui-md-column-gap-1-half {
    column-gap: 1.5rem;
  }

  .xui-md-column-gap-2 {
    column-gap: 2rem;
  }

  .xui-md-column-gap-2-half {
    column-gap: 2.5rem;
  }

  .xui-md-column-gap-3 {
    column-gap: 3rem;
  }

  .xui-md-column-gap-3-half {
    column-gap: 3.5rem;
  }

  .xui-md-column-gap-4 {
    column-gap: 4rem;
  }

  .xui-md-column-gap-4-half {
    column-gap: 4.5rem;
  }

  .xui-md-column-gap-5 {
    column-gap: 5rem;
  }

  .xui-md-column-gap-5-half {
    column-gap: 5.5rem;
  }

  .xui-md-column-gap-6 {
    column-gap: 6rem;
  }

  .xui-md-column-gap-6-half {
    column-gap: 6.5rem;
  }

  .xui-md-column-gap-7 {
    column-gap: 7rem;
  }

  .xui-md-column-gap-7-half {
    column-gap: 7.5rem;
  }

  .xui-md-column-gap-8 {
    column-gap: 8rem;
  }

  .xui-md-column-gap-8-half {
    column-gap: 8.5rem;
  }

  .xui-md-column-gap-9 {
    column-gap: 9rem;
  }

  .xui-md-column-gap-9-half {
    column-gap: 9.5rem;
  }

  .xui-md-column-gap-10 {
    column-gap: 10rem;
  }




  /*Margins*/
  .xui-md-m-none {
    margin: 0;
  }

  .xui-md-m-auto {
    margin: auto;
  }

  .xui-md-m-inherit {
    margin: inherit;
  }

  .xui-md-m-unset {
    margin: unset;
  }

  .xui-md-m-all {
    margin: all;
  }

  .xui-md-m-initial {
    margin: initial;
  }

  .xui-md-m-half {
    margin: .5rem;
  }

  .xui-md-m-1 {
    margin: 1rem;
  }

  .xui-md-m-1-half {
    margin: 1.5rem;
  }

  .xui-md-m-2 {
    margin: 2rem;
  }

  .xui-md-m-2-half {
    margin: 2.5rem;
  }

  .xui-md-m-3 {
    margin: 3rem;
  }

  .xui-md-m-3-half {
    margin: 3.5rem;
  }

  .xui-md-m-4 {
    margin: 4rem;
  }

  .xui-md-m-4-half {
    margin: 4.5rem;
  }

  .xui-md-m-5 {
    margin: 5rem;
  }

  .xui-md-m-5-half {
    margin: 5.5rem;
  }

  .xui-md-m-6 {
    margin: 6rem;
  }

  .xui-md-m-6-half {
    margin: 6.5rem;
  }

  .xui-md-m-7 {
    margin: 7rem;
  }

  .xui-md-m-7-half {
    margin: 7.5rem;
  }

  .xui-md-m-8 {
    margin: 8rem;
  }

  .xui-md-m-8-half {
    margin: 8.5rem;
  }

  .xui-md-m-9 {
    margin: 9rem;
  }

  .xui-md-m-9-half {
    margin: 9.5rem;
  }

  .xui-md-m-10 {
    margin: 10rem;
  }

  .xui-md-mt-none {
    margin-top: 0;
  }

  .xui-md-mt-auto {
    margin-top: auto;
  }

  .xui-md-mt--half {
    margin-top: -.5rem;
  }

  .xui-md-mt--1 {
    margin-top: -1rem;
  }

  .xui-md-mt--1-half {
    margin-top: -1.5rem;
  }

  .xui-md-mt--2 {
    margin-top: -2rem;
  }

  .xui-md-mt--2-half {
    margin-top: -2.5rem;
  }

  .xui-md-mt--3 {
    margin-top: -3rem;
  }

  .xui-md-mt--3-half {
    margin-top: -3.5rem;
  }

  .xui-md-mt--4 {
    margin-top: -4rem;
  }

  .xui-md-mt--4-half {
    margin-top: -4.5rem;
  }

  .xui-md-mt--5 {
    margin-top: -5rem;
  }

  .xui-md-mt--5-half {
    margin-top: -5.5rem;
  }

  .xui-md-mt--6 {
    margin-top: -6rem;
  }

  .xui-md-mt--6-half {
    margin-top: -6.5rem;
  }

  .xui-md-mt--7 {
    margin-top: -7rem;
  }

  .xui-md-mt--7-half {
    margin-top: -7.5rem;
  }

  .xui-md-mt--8 {
    margin-top: -8rem;
  }

  .xui-md-mt--8-half {
    margin-top: -8.5rem;
  }

  .xui-md-mt--9 {
    margin-top: -9rem;
  }

  .xui-md-mt--9-half {
    margin-top: -9.5rem;
  }

  .xui-md-mt--10 {
    margin-top: -10rem;
  }

  .xui-md-mt-half {
    margin-top: .5rem;
  }

  .xui-md-mt-1 {
    margin-top: 1rem;
  }

  .xui-md-mt-1-half {
    margin-top: 1.5rem;
  }

  .xui-md-mt-2 {
    margin-top: 2rem;
  }

  .xui-md-mt-2-half {
    margin-top: 2.5rem;
  }

  .xui-md-mt-3 {
    margin-top: 3rem;
  }

  .xui-md-mt-3-half {
    margin-top: 3.5rem;
  }

  .xui-md-mt-4 {
    margin-top: 4rem;
  }

  .xui-md-mt-4-half {
    margin-top: 4.5rem;
  }

  .xui-md-mt-5 {
    margin-top: 5rem;
  }

  .xui-md-mt-5-half {
    margin-top: 5.5rem;
  }

  .xui-md-mt-6 {
    margin-top: 6rem;
  }

  .xui-md-mt-6-half {
    margin-top: 6.5rem;
  }

  .xui-md-mt-7 {
    margin-top: 7rem;
  }

  .xui-md-mt-7-half {
    margin-top: 7.5rem;
  }

  .xui-md-mt-8 {
    margin-top: 8rem;
  }

  .xui-md-mt-8-half {
    margin-top: 8.5rem;
  }

  .xui-md-mt-9 {
    margin-top: 9rem;
  }

  .xui-md-mt-9-half {
    margin-top: 9.5rem;
  }

  .xui-md-mt-10 {
    margin-top: 10rem;
  }

  .xui-md-mr-none {
    margin-right: 0;
  }

  .xui-md-mr-auto {
    margin-right: auto;
  }

  .xui-md-mr--half {
    margin-right: -.5rem;
  }

  .xui-md-mr--1 {
    margin-right: -1rem;
  }

  .xui-md-mr--1-half {
    margin-right: -1.5rem;
  }

  .xui-md-mr--2 {
    margin-right: -2rem;
  }

  .xui-md-mr--2-half {
    margin-right: -2.5rem;
  }

  .xui-md-mr--3 {
    margin-right: -3rem;
  }

  .xui-md-mr--3-half {
    margin-right: -3.5rem;
  }

  .xui-md-mr--4 {
    margin-right: -4rem;
  }

  .xui-md-mr--4-half {
    margin-right: -4.5rem;
  }

  .xui-md-mr--5 {
    margin-right: -5rem;
  }

  .xui-md-mr--5-half {
    margin-right: -5.5rem;
  }

  .xui-md-mr--6 {
    margin-right: -6rem;
  }

  .xui-md-mr--6-half {
    margin-right: -6.5rem;
  }

  .xui-md-mr--7 {
    margin-right: -7rem;
  }

  .xui-md-mr--7-half {
    margin-right: -7.5rem;
  }

  .xui-md-mr--8 {
    margin-right: -8rem;
  }

  .xui-md-mr--8-half {
    margin-right: -8.5rem;
  }

  .xui-md-mr--9 {
    margin-right: -9rem;
  }

  .xui-md-mr--9-half {
    margin-right: -9.5rem;
  }

  .xui-md-mr--10 {
    margin-right: -10rem;
  }

  .xui-md-mr-half {
    margin-right: .5rem;
  }

  .xui-md-mr-1 {
    margin-right: 1rem;
  }

  .xui-md-mr-1-half {
    margin-right: 1.5rem;
  }

  .xui-md-mr-2 {
    margin-right: 2rem;
  }

  .xui-md-mr-2-half {
    margin-right: 2.5rem;
  }

  .xui-md-mr-3 {
    margin-right: 3rem;
  }

  .xui-md-mr-3-half {
    margin-right: 3.5rem;
  }

  .xui-md-mr-4 {
    margin-right: 4rem;
  }

  .xui-md-mr-4-half {
    margin-right: 4.5rem;
  }

  .xui-md-mr-5 {
    margin-right: 5rem;
  }

  .xui-md-mr-5-half {
    margin-right: 5.5rem;
  }

  .xui-md-mr-6 {
    margin-right: 6rem;
  }

  .xui-md-mr-6-half {
    margin-right: 6.5rem;
  }

  .xui-md-mr-7 {
    margin-right: 7rem;
  }

  .xui-md-mr-7-half {
    margin-right: 7.5rem;
  }

  .xui-md-mr-8 {
    margin-right: 8rem;
  }

  .xui-md-mr-8-half {
    margin-right: 8.5rem;
  }

  .xui-md-mr-9 {
    margin-right: 9rem;
  }

  .xui-md-mr-9-half {
    margin-right: 9.5rem;
  }

  .xui-md-mr-10 {
    margin-right: 10rem;
  }

  .xui-md-mb-none {
    margin-bottom: 0;
  }

  .xui-md-mb-auto {
    margin-bottom: auto;
  }

  .xui-md-mb--half {
    margin-bottom: -.5rem;
  }

  .xui-md-mb--1 {
    margin-bottom: -1rem;
  }

  .xui-md-mb--1-half {
    margin-bottom: -1.5rem;
  }

  .xui-md-mb--2 {
    margin-bottom: -2rem;
  }

  .xui-md-mb--2-half {
    margin-bottom: -2.5rem;
  }

  .xui-md-mb--3 {
    margin-bottom: -3rem;
  }

  .xui-md-mb--3-half {
    margin-bottom: -3.5rem;
  }

  .xui-md-mb--4 {
    margin-bottom: -4rem;
  }

  .xui-md-mb--4-half {
    margin-bottom: -4.5rem;
  }

  .xui-md-mb--5 {
    margin-bottom: -5rem;
  }

  .xui-md-mb--5-half {
    margin-bottom: -5.5rem;
  }

  .xui-md-mb--6 {
    margin-bottom: -6rem;
  }

  .xui-md-mb--6-half {
    margin-bottom: -6.5rem;
  }

  .xui-md-mb--7 {
    margin-bottom: -7rem;
  }

  .xui-md-mb--7-half {
    margin-bottom: -7.5rem;
  }

  .xui-md-mb--8 {
    margin-bottom: -8rem;
  }

  .xui-md-mb--8-half {
    margin-bottom: -8.5rem;
  }

  .xui-md-mb--9 {
    margin-bottom: -9rem;
  }

  .xui-md-mb--9-half {
    margin-bottom: -9.5rem;
  }

  .xui-md-mb--10 {
    margin-bottom: -10rem;
  }

  .xui-md-mb-half {
    margin-bottom: .5rem;
  }

  .xui-md-mb-1 {
    margin-bottom: 1rem;
  }

  .xui-md-mb-1-half {
    margin-bottom: 1.5rem;
  }

  .xui-md-mb-2 {
    margin-bottom: 2rem;
  }

  .xui-md-mb-2-half {
    margin-bottom: 2.5rem;
  }

  .xui-md-mb-3 {
    margin-bottom: 3rem;
  }

  .xui-md-mb-3-half {
    margin-bottom: 3.5rem;
  }

  .xui-md-mb-4 {
    margin-bottom: 4rem;
  }

  .xui-md-mb-4-half {
    margin-bottom: 4.5rem;
  }

  .xui-md-mb-5 {
    margin-bottom: 5rem;
  }

  .xui-md-mb-5-half {
    margin-bottom: 5.5rem;
  }

  .xui-md-mb-6 {
    margin-bottom: 6rem;
  }

  .xui-md-mb-6-half {
    margin-bottom: 6.5rem;
  }

  .xui-md-mb-7 {
    margin-bottom: 7rem;
  }

  .xui-md-mb-7-half {
    margin-bottom: 7.5rem;
  }

  .xui-md-mb-8 {
    margin-bottom: 8rem;
  }

  .xui-md-mb-8-half {
    margin-bottom: 8.5rem;
  }

  .xui-md-mb-9 {
    margin-bottom: 9rem;
  }

  .xui-md-mb-9-half {
    margin-bottom: 9.5rem;
  }

  .xui-md-mb-10 {
    margin-bottom: 10rem;
  }

  .xui-md-ml-none {
    margin-left: 0;
  }

  .xui-md-ml-auto {
    margin-left: auto;
  }

  .xui-md-ml--half {
    margin-left: -.5rem;
  }

  .xui-md-ml--1 {
    margin-left: -1rem;
  }

  .xui-md-ml--1-half {
    margin-left: -1.5rem;
  }

  .xui-md-ml--2 {
    margin-left: -2rem;
  }

  .xui-md-ml--2-half {
    margin-left: -2.5rem;
  }

  .xui-md-ml--3 {
    margin-left: -3rem;
  }

  .xui-md-ml--3-half {
    margin-left: -3.5rem;
  }

  .xui-md-ml--4 {
    margin-left: -4rem;
  }

  .xui-md-ml--4-half {
    margin-left: -4.5rem;
  }

  .xui-md-ml--5 {
    margin-left: -5rem;
  }

  .xui-md-ml--5-half {
    margin-left: -5.5rem;
  }

  .xui-md-ml--6 {
    margin-left: -6rem;
  }

  .xui-md-ml--6-half {
    margin-left: -6.5rem;
  }

  .xui-md-ml--7 {
    margin-left: -7rem;
  }

  .xui-md-ml--7-half {
    margin-left: -7.5rem;
  }

  .xui-md-ml--8 {
    margin-left: -8rem;
  }

  .xui-md-ml--8-half {
    margin-left: -8.5rem;
  }

  .xui-md-ml--9 {
    margin-left: -9rem;
  }

  .xui-md-ml--9-half {
    margin-left: -9.5rem;
  }

  .xui-md-ml--10 {
    margin-left: -10rem;
  }

  .xui-md-ml-half {
    margin-left: .5rem;
  }

  .xui-md-ml-1 {
    margin-left: 1rem;
  }

  .xui-md-ml-1-half {
    margin-left: 1.5rem;
  }

  .xui-md-ml-2 {
    margin-left: 2rem;
  }

  .xui-md-ml-2-half {
    margin-left: 2.5rem;
  }

  .xui-md-ml-3 {
    margin-left: 3rem;
  }

  .xui-md-ml-3-half {
    margin-left: 3.5rem;
  }

  .xui-md-ml-4 {
    margin-left: 4rem;
  }

  .xui-md-ml-4-half {
    margin-left: 4.5rem;
  }

  .xui-md-ml-5 {
    margin-left: 5rem;
  }

  .xui-md-ml-5-half {
    margin-left: 5.5rem;
  }

  .xui-md-ml-6 {
    margin-left: 6rem;
  }

  .xui-md-ml-6-half {
    margin-left: 6.5rem;
  }

  .xui-md-ml-7 {
    margin-left: 7rem;
  }

  .xui-md-ml-7-half {
    margin-left: 7.5rem;
  }

  .xui-md-ml-8 {
    margin-left: 8rem;
  }

  .xui-md-ml-8-half {
    margin-left: 8.5rem;
  }

  .xui-md-ml-9 {
    margin-left: 9rem;
  }

  .xui-md-ml-9-half {
    margin-left: 9.5rem;
  }

  .xui-md-ml-10 {
    margin-left: 10rem;
  }

  .xui-md-mx-none {
    margin-left: 0;
    margin-right: 0;
  }

  .xui-md-mx-auto {
    margin-left: auto;
    margin-right: auto;
  }

  .xui-md-mx-half {
    margin-left: .5rem;
    margin-right: .5rem;
  }

  .xui-md-mx-1 {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .xui-md-mx-1-half {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }

  .xui-md-mx-2 {
    margin-left: 2rem;
    margin-right: 2rem;
  }

  .xui-md-mx-2-half {
    margin-left: 2.5rem;
    margin-right: 2.5rem;
  }

  .xui-md-mx-3 {
    margin-left: 3rem;
    margin-right: 3rem;
  }

  .xui-md-mx-3-half {
    margin-left: 3.5rem;
    margin-right: 3.5rem;
  }

  .xui-md-mx-4 {
    margin-left: 4rem;
    margin-right: 4rem;
  }

  .xui-md-mx-4-half {
    margin-left: 4.5rem;
    margin-right: 4.5rem;
  }

  .xui-md-mx-5 {
    margin-left: 5rem;
    margin-right: 5rem;
  }

  .xui-md-mx-5-half {
    margin-left: 5.5rem;
    margin-right: 5.5rem;
  }

  .xui-md-mx-6 {
    margin-left: 6rem;
    margin-right: 6rem;
  }

  .xui-md-mx-6-half {
    margin-left: 6.5rem;
    margin-right: 6.5rem;
  }

  .xui-md-mx-7 {
    margin-left: 7rem;
    margin-right: 7rem;
  }

  .xui-md-mx-7-half {
    margin-left: 7.5rem;
    margin-right: 7.5rem;
  }

  .xui-md-mx-8 {
    margin-left: 8rem;
    margin-right: 8rem;
  }

  .xui-md-mx-8-half {
    margin-left: 8.5rem;
    margin-right: 8.5rem;
  }

  .xui-md-mx-9 {
    margin-left: 9rem;
    margin-right: 9rem;
  }

  .xui-md-mx-9-half {
    margin-left: 9.5rem;
    margin-right: 9.5rem;
  }

  .xui-md-mx-10 {
    margin-left: 10rem;
    margin-right: 10rem;
  }

  .xui-md-my-none {
    margin-top: 0;
    margin-bottom: 0;
  }

  .xui-md-my-auto {
    margin-top: auto;
    margin-bottom: auto;
  }

  .xui-md-my-half {
    margin-top: .5rem;
    margin-bottom: .5rem;
  }

  .xui-md-my-1 {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .xui-md-my-1-half {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .xui-md-my-2 {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .xui-md-my-2-half {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
  }

  .xui-md-my-3 {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }

  .xui-md-my-3-half {
    margin-top: 3.5rem;
    margin-bottom: 3.5rem;
  }

  .xui-md-my-4 {
    margin-top: 4rem;
    margin-bottom: 4rem;
  }

  .xui-md-my-4-half {
    margin-top: 4.5rem;
    margin-bottom: 4.5rem;
  }

  .xui-md-my-5 {
    margin-top: 5rem;
    margin-bottom: 5rem;
  }

  .xui-md-my-5-half {
    margin-top: 5.5rem;
    margin-bottom: 5.5rem;
  }

  .xui-md-my-6 {
    margin-top: 6rem;
    margin-bottom: 6rem;
  }

  .xui-md-my-6-half {
    margin-top: 6.5rem;
    margin-bottom: 6.5rem;
  }

  .xui-md-my-7 {
    margin-top: 7rem;
    margin-bottom: 7rem;
  }

  .xui-md-my-7-half {
    margin-top: 7.5rem;
    margin-bottom: 7.5rem;
  }

  .xui-md-my-8 {
    margin-top: 8rem;
    margin-bottom: 8rem;
  }

  .xui-md-my-8-half {
    margin-top: 8.5rem;
    margin-bottom: 8.5rem;
  }

  .xui-md-my-9 {
    margin-top: 9rem;
    margin-bottom: 9rem;
  }

  .xui-md-my-9-half {
    margin-top: 9.5rem;
    margin-bottom: 9.5rem;
  }

  .xui-md-my-10 {
    margin-top: 10rem;
    margin-bottom: 10rem;
  }





  /*Paddings*/
  .xui-md-p-none {
    padding: 0;
  }

  .xui-md-p-auto {
    padding: auto;
  }

  .xui-md-p-inherit {
    padding: inherit;
  }

  .xui-md-p-unset {
    padding: unset;
  }

  .xui-md-p-all {
    padding: all;
  }

  .xui-md-p-initial {
    padding: initial;
  }

  .xui-md-p-half {
    padding: .5rem;
  }

  .xui-md-p-1 {
    padding: 1rem;
  }

  .xui-md-p-1-half {
    padding: 1.5rem;
  }

  .xui-md-p-2 {
    padding: 2rem;
  }

  .xui-md-p-2-half {
    padding: 2.5rem;
  }

  .xui-md-p-3 {
    padding: 3rem;
  }

  .xui-md-p-3-half {
    padding: 3.5rem;
  }

  .xui-md-p-4 {
    padding: 4rem;
  }

  .xui-md-p-4-half {
    padding: 4.5rem;
  }

  .xui-md-p-5 {
    padding: 5rem;
  }

  .xui-md-p-5-half {
    padding: 5.5rem;
  }

  .xui-md-p-6 {
    padding: 6rem;
  }

  .xui-md-p-6-half {
    padding: 6.5rem;
  }

  .xui-md-p-7 {
    padding: 7rem;
  }

  .xui-md-p-7-half {
    padding: 7.5rem;
  }

  .xui-md-p-8 {
    padding: 8rem;
  }

  .xui-md-p-8-half {
    padding: 8.5rem;
  }

  .xui-md-p-9 {
    padding: 9rem;
  }

  .xui-md-p-9-half {
    padding: 9.5rem;
  }

  .xui-md-p-10 {
    padding: 10rem;
  }

  .xui-md-pt-none {
    padding-top: 0;
  }

  .xui-md-pt-auto {
    padding-top: auto;
  }

  .xui-md-pt-half {
    padding-top: .5rem;
  }

  .xui-md-pt-1 {
    padding-top: 1rem;
  }

  .xui-md-pt-1-half {
    padding-top: 1.5rem;
  }

  .xui-md-pt-2 {
    padding-top: 2rem;
  }

  .xui-md-pt-2-half {
    padding-top: 2.5rem;
  }

  .xui-md-pt-3 {
    padding-top: 3rem;
  }

  .xui-md-pt-3-half {
    padding-top: 3.5rem;
  }

  .xui-md-pt-4 {
    padding-top: 4rem;
  }

  .xui-md-pt-4-half {
    padding-top: 4.5rem;
  }

  .xui-md-pt-5 {
    padding-top: 5rem;
  }

  .xui-md-pt-5-half {
    padding-top: 5.5rem;
  }

  .xui-md-pt-6 {
    padding-top: 6rem;
  }

  .xui-md-pt-6-half {
    padding-top: 6.5rem;
  }

  .xui-md-pt-7 {
    padding-top: 7rem;
  }

  .xui-md-pt-7-half {
    padding-top: 7.5rem;
  }

  .xui-md-pt-8 {
    padding-top: 8rem;
  }

  .xui-md-pt-8-half {
    padding-top: 8.5rem;
  }

  .xui-md-pt-9 {
    padding-top: 9rem;
  }

  .xui-md-pt-9-half {
    padding-top: 9.5rem;
  }

  .xui-md-pt-10 {
    padding-top: 10rem;
  }

  .xui-md-pr-none {
    padding-right: 0;
  }

  .xui-md-pr-auto {
    padding-right: auto;
  }

  .xui-md-pr-half {
    padding-right: .5rem;
  }

  .xui-md-pr-1 {
    padding-right: 1rem;
  }

  .xui-md-pr-1-half {
    padding-right: 1.5rem;
  }

  .xui-md-pr-2 {
    padding-right: 2rem;
  }

  .xui-md-pr-2-half {
    padding-right: 2.5rem;
  }

  .xui-md-pr-3 {
    padding-right: 3rem;
  }

  .xui-md-pr-3-half {
    padding-right: 3.5rem;
  }

  .xui-md-pr-4 {
    padding-right: 4rem;
  }

  .xui-md-pr-4-half {
    padding-right: 4.5rem;
  }

  .xui-md-pr-5 {
    padding-right: 5rem;
  }

  .xui-md-pr-5-half {
    padding-right: 5.5rem;
  }

  .xui-md-pr-6 {
    padding-right: 6rem;
  }

  .xui-md-pr-6-half {
    padding-right: 6.5rem;
  }

  .xui-md-pr-7 {
    padding-right: 7rem;
  }

  .xui-md-pr-7-half {
    padding-right: 7.5rem;
  }

  .xui-md-pr-8 {
    padding-right: 8rem;
  }

  .xui-md-pr-8-half {
    padding-right: 8.5rem;
  }

  .xui-md-pr-9 {
    padding-right: 9rem;
  }

  .xui-md-pr-9-half {
    padding-right: 9.5rem;
  }

  .xui-md-pr-10 {
    padding-right: 10rem;
  }

  .xui-md-pb-none {
    padding-bottom: 0;
  }

  .xui-md-pb-auto {
    padding-bottom: auto;
  }

  .xui-md-pb-half {
    padding-bottom: .5rem;
  }

  .xui-md-pb-1 {
    padding-bottom: 1rem;
  }

  .xui-md-pb-1-half {
    padding-bottom: 1.5rem;
  }

  .xui-md-pb-2 {
    padding-bottom: 2rem;
  }

  .xui-md-pb-2-half {
    padding-bottom: 2.5rem;
  }

  .xui-md-pb-3 {
    padding-bottom: 3rem;
  }

  .xui-md-pb-3-half {
    padding-bottom: 3.5rem;
  }

  .xui-md-pb-4 {
    padding-bottom: 4rem;
  }

  .xui-md-pb-4-half {
    padding-bottom: 4.5rem;
  }

  .xui-md-pb-5 {
    padding-bottom: 5rem;
  }

  .xui-md-pb-5-half {
    padding-bottom: 5.5rem;
  }

  .xui-md-pb-6 {
    padding-bottom: 6rem;
  }

  .xui-md-pb-6-half {
    padding-bottom: 6.5rem;
  }

  .xui-md-pb-7 {
    padding-bottom: 7rem;
  }

  .xui-md-pb-7-half {
    padding-bottom: 7.5rem;
  }

  .xui-md-pb-8 {
    padding-bottom: 8rem;
  }

  .xui-md-pb-8-half {
    padding-bottom: 8.5rem;
  }

  .xui-md-pb-9 {
    padding-bottom: 9rem;
  }

  .xui-md-pb-9-half {
    padding-bottom: 9.5rem;
  }

  .xui-md-pb-10 {
    padding-bottom: 10rem;
  }

  .xui-md-pl-none {
    padding-left: 0;
  }

  .xui-md-pl-auto {
    padding-left: auto;
  }

  .xui-md-pl-half {
    padding-left: .5rem;
  }

  .xui-md-pl-1 {
    padding-left: 1rem;
  }

  .xui-md-pl-1-half {
    padding-left: 1.5rem;
  }

  .xui-md-pl-2 {
    padding-left: 2rem;
  }

  .xui-md-pl-2-half {
    padding-left: 2.5rem;
  }

  .xui-md-pl-3 {
    padding-left: 3rem;
  }

  .xui-md-pl-3-half {
    padding-left: 3.5rem;
  }

  .xui-md-pl-4 {
    padding-left: 4rem;
  }

  .xui-md-pl-4-half {
    padding-left: 4.5rem;
  }

  .xui-md-pl-5 {
    padding-left: 5rem;
  }

  .xui-md-pl-5-half {
    padding-left: 5.5rem;
  }

  .xui-md-pl-6 {
    padding-left: 6rem;
  }

  .xui-md-pl-6-half {
    padding-left: 6.5rem;
  }

  .xui-md-pl-7 {
    padding-left: 7rem;
  }

  .xui-md-pl-7-half {
    padding-left: 7.5rem;
  }

  .xui-md-pl-8 {
    padding-left: 8rem;
  }

  .xui-md-pl-8-half {
    padding-left: 8.5rem;
  }

  .xui-md-pl-9 {
    padding-left: 9rem;
  }

  .xui-md-pl-9-half {
    padding-left: 9.5rem;
  }

  .xui-md-pl-10 {
    padding-left: 10rem;
  }

  .xui-md-px-none {
    padding-left: 0;
    padding-right: 0;
  }

  .xui-md-px-auto {
    padding-left: auto;
    padding-right: auto;
  }

  .xui-md-px-half {
    padding-left: .5rem;
    padding-right: .5rem;
  }

  .xui-md-px-1 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .xui-md-px-1-half {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .xui-md-px-2 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .xui-md-px-2-half {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .xui-md-px-3 {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .xui-md-px-3-half {
    padding-left: 3.5rem;
    padding-right: 3.5rem;
  }

  .xui-md-px-4 {
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .xui-md-px-4-half {
    padding-left: 4.5rem;
    padding-right: 4.5rem;
  }

  .xui-md-px-5 {
    padding-left: 5rem;
    padding-right: 5rem;
  }

  .xui-md-px-5-half {
    padding-left: 5.5rem;
    padding-right: 5.5rem;
  }

  .xui-md-px-6 {
    padding-left: 6rem;
    padding-right: 6rem;
  }

  .xui-md-px-6-half {
    padding-left: 6.5rem;
    padding-right: 6.5rem;
  }

  .xui-md-px-7 {
    padding-left: 7rem;
    padding-right: 7rem;
  }

  .xui-md-px-7-half {
    padding-left: 7.5rem;
    padding-right: 7.5rem;
  }

  .xui-md-px-8 {
    padding-left: 8rem;
    padding-right: 8rem;
  }

  .xui-md-px-8-half {
    padding-left: 8.5rem;
    padding-right: 8.5rem;
  }

  .xui-md-px-9 {
    padding-left: 9rem;
    padding-right: 9rem;
  }

  .xui-md-px-9-half {
    padding-left: 9.5rem;
    padding-right: 9.5rem;
  }

  .xui-md-px-10 {
    padding-left: 10rem;
    padding-right: 10rem;
  }

  .xui-md-py-none {
    padding-top: 0;
    padding-bottom: 0;
  }

  .xui-md-py-auto {
    padding-top: auto;
    padding-bottom: auto;
  }

  .xui-md-py-half {
    padding-top: .5rem;
    padding-bottom: .5rem;
  }

  .xui-md-py-1 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .xui-md-py-1-half {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .xui-md-py-2 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .xui-md-py-2-half {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .xui-md-py-3 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .xui-md-py-3-half {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .xui-md-py-4 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .xui-md-py-4-half {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }

  .xui-md-py-5 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .xui-md-py-5-half {
    padding-top: 5.5rem;
    padding-bottom: 5.5rem;
  }

  .xui-md-py-6 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .xui-md-py-6-half {
    padding-top: 6.5rem;
    padding-bottom: 6.5rem;
  }

  .xui-md-py-7 {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }

  .xui-md-py-7-half {
    padding-top: 7.5rem;
    padding-bottom: 7.5rem;
  }

  .xui-md-py-8 {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .xui-md-py-8-half {
    padding-top: 8.5rem;
    padding-bottom: 8.5rem;
  }

  .xui-md-py-9 {
    padding-top: 9rem;
    padding-bottom: 9rem;
  }

  .xui-md-py-9-half {
    padding-top: 9.5rem;
    padding-bottom: 9.5rem;
  }

  .xui-md-py-10 {
    padding-top: 10rem;
    padding-bottom: 10rem;
  }




  /*Width & Height*/
  .xui-md-w-auto {
    width: auto;
  }

  .xui-md-w-inherit {
    width: inherit;
  }

  .xui-md-w-initial {
    width: initial;
  }

  .xui-md-w-max-content {
    width: max-content;
  }

  .xui-md-w-min-content {
    width: min-content;
  }

  .xui-md-w-fit-content {
    width: fit-content;
  }

  .xui-md-h-auto {
    height: auto;
  }

  .xui-md-h-inherit {
    height: inherit;
  }

  .xui-md-h-initial {
    height: initial;
  }

  .xui-md-h-max-content {
    height: max-content;
  }

  .xui-md-h-min-content {
    height: min-content;
  }

  .xui-md-h-fit-content {
    height: fit-content;
  }

  .xui-md-w-5 {
    width: 5px;
  }

  .xui-md-w-10 {
    width: 10px;
  }

  .xui-md-w-15 {
    width: 15px;
  }

  .xui-md-w-20 {
    width: 20px;
  }

  .xui-md-w-25 {
    width: 25px;
  }

  .xui-md-w-30 {
    width: 30px;
  }

  .xui-md-w-35 {
    width: 35px;
  }

  .xui-md-w-40 {
    width: 40px;
  }

  .xui-md-w-45 {
    width: 45px;
  }

  .xui-md-w-50 {
    width: 50px;
  }

  .xui-md-w-55 {
    width: 55px;
  }

  .xui-md-w-60 {
    width: 60px;
  }

  .xui-md-w-65 {
    width: 65px;
  }

  .xui-md-w-70 {
    width: 70px;
  }

  .xui-md-w-75 {
    width: 75px;
  }

  .xui-md-w-80 {
    width: 80px;
  }

  .xui-md-w-85 {
    width: 85px;
  }

  .xui-md-w-90 {
    width: 90px;
  }

  .xui-md-w-95 {
    width: 95px;
  }

  .xui-md-w-100 {
    width: 100px;
  }

  .xui-md-w-150 {
    width: 150px;
  }

  .xui-md-w-200 {
    width: 200px;
  }

  .xui-md-w-250 {
    width: 250px;
  }

  .xui-md-w-300 {
    width: 300px;
  }

  .xui-md-w-350 {
    width: 350px;
  }

  .xui-md-w-400 {
    width: 400px;
  }

  .xui-md-w-450 {
    width: 450px;
  }

  .xui-md-w-500 {
    width: 500px;
  }

  .xui-md-w-600 {
    width: 600px;
  }

  .xui-md-w-650 {
    width: 650px;
  }

  .xui-md-w-700 {
    width: 700px;
  }

  .xui-md-w-750 {
    width: 750px;
  }

  .xui-md-w-800 {
    width: 800px;
  }

  .xui-md-w-850 {
    width: 850px;
  }

  .xui-md-w-900 {
    width: 900px;
  }

  .xui-md-w-950 {
    width: 950px;
  }

  .xui-md-w-1000 {
    width: 1000px;
  }

  .xui-md-w-fluid-5 {
    width: 5%;
  }

  .xui-md-w-fluid-10 {
    width: 10%;
  }

  .xui-md-w-fluid-15 {
    width: 15%;
  }

  .xui-md-w-fluid-20 {
    width: 20%;
  }

  .xui-md-w-fluid-25 {
    width: 25%;
  }

  .xui-md-w-fluid-30 {
    width: 30%;
  }

  .xui-md-w-fluid-35 {
    width: 35%;
  }

  .xui-md-w-fluid-40 {
    width: 40%;
  }

  .xui-md-w-fluid-45 {
    width: 45%;
  }

  .xui-md-w-fluid-50 {
    width: 50%;
  }

  .xui-md-w-fluid-55 {
    width: 55%;
  }

  .xui-md-w-fluid-60 {
    width: 60%;
  }

  .xui-md-w-fluid-65 {
    width: 65%;
  }

  .xui-md-w-fluid-70 {
    width: 70%;
  }

  .xui-md-w-fluid-75 {
    width: 75%;
  }

  .xui-md-w-fluid-80 {
    width: 80%;
  }

  .xui-md-w-fluid-85 {
    width: 85%;
  }

  .xui-md-w-fluid-90 {
    width: 90%;
  }

  .xui-md-w-fluid-95 {
    width: 95%;
  }

  .xui-md-w-fluid-100 {
    width: 100%;
  }

  .xui-md-h-5 {
    height: 5px;
  }

  .xui-md-h-10 {
    height: 10px;
  }

  .xui-md-h-15 {
    height: 15px;
  }

  .xui-md-h-20 {
    height: 20px;
  }

  .xui-md-h-25 {
    height: 25px;
  }

  .xui-md-h-30 {
    height: 30px;
  }

  .xui-md-h-35 {
    height: 35px;
  }

  .xui-md-h-40 {
    height: 40px;
  }

  .xui-md-h-45 {
    height: 45px;
  }

  .xui-md-h-50 {
    height: 50px;
  }

  .xui-md-h-55 {
    height: 55px;
  }

  .xui-md-h-60 {
    height: 60px;
  }

  .xui-md-h-65 {
    height: 65px;
  }

  .xui-md-h-70 {
    height: 70px;
  }

  .xui-md-h-75 {
    height: 75px;
  }

  .xui-md-h-80 {
    height: 80px;
  }

  .xui-md-h-85 {
    height: 85px;
  }

  .xui-md-h-90 {
    height: 90px;
  }

  .xui-md-h-95 {
    height: 95px;
  }

  .xui-md-h-100 {
    height: 100px;
  }

  .xui-md-h-150 {
    height: 150px;
  }

  .xui-md-h-200 {
    height: 200px;
  }

  .xui-md-h-250 {
    height: 250px;
  }

  .xui-md-h-300 {
    height: 300px;
  }

  .xui-md-h-350 {
    height: 350px;
  }

  .xui-md-h-400 {
    height: 400px;
  }

  .xui-md-h-450 {
    height: 450px;
  }

  .xui-md-h-500 {
    height: 500px;
  }

  .xui-md-h-600 {
    height: 600px;
  }

  .xui-md-h-650 {
    height: 650px;
  }

  .xui-md-h-700 {
    height: 700px;
  }

  .xui-md-h-750 {
    height: 750px;
  }

  .xui-md-h-800 {
    height: 800px;
  }

  .xui-md-h-850 {
    height: 850px;
  }

  .xui-md-h-900 {
    height: 900px;
  }

  .xui-md-h-950 {
    height: 950px;
  }

  .xui-md-h-1000 {
    height: 1000px;
  }

  .xui-md-h-full,
  .xui-md-h-100vh {
    height: 100vh;
    height: 100dvh;
  }

  .xui-md-h-fluid-5 {
    height: 5%;
  }

  .xui-md-h-fluid-10 {
    height: 10%;
  }

  .xui-md-h-fluid-15 {
    height: 15%;
  }

  .xui-md-h-fluid-20 {
    height: 20%;
  }

  .xui-md-h-fluid-25 {
    height: 25%;
  }

  .xui-md-h-fluid-30 {
    height: 30%;
  }

  .xui-md-h-fluid-35 {
    height: 35%;
  }

  .xui-md-h-fluid-40 {
    height: 40%;
  }

  .xui-md-h-fluid-45 {
    height: 45%;
  }

  .xui-md-h-fluid-50 {
    height: 50%;
  }

  .xui-md-h-fluid-55 {
    height: 55%;
  }

  .xui-md-h-fluid-60 {
    height: 60%;
  }

  .xui-md-h-fluid-65 {
    height: 65%;
  }

  .xui-md-h-fluid-70 {
    height: 70%;
  }

  .xui-md-h-fluid-75 {
    height: 75%;
  }

  .xui-md-h-fluid-80 {
    height: 80%;
  }

  .xui-md-h-fluid-85 {
    height: 85%;
  }

  .xui-md-h-fluid-90 {
    height: 90%;
  }

  .xui-md-h-fluid-95 {
    height: 95%;
  }

  .xui-md-h-fluid-100 {
    height: 100%;
  }




  /*Flexes*/
  .xui-md-flex-jc-start,
  .xui-md-flex-jc-flex-start {
    justify-content: flex-start;
  }

  .xui-md-flex-jc-end,
  .xui-md-flex-jc-flex-end {
    justify-content: flex-end;
  }

  .xui-md-flex-jc-space-between {
    justify-content: space-between;
  }

  .xui-md-flex-jc-space-around {
    justify-content: space-around;
  }

  .xui-md-flex-jc-space-evenly {
    justify-content: space-evenly;
  }

  .xui-md-flex-jc-center {
    justify-content: center;
  }

  .xui-md-flex-jc-initial {
    justify-content: initial;
  }

  .xui-md-flex-jc-inherit {
    justify-content: inherit;
  }

  .xui-md-flex-ai-stretch {
    align-items: stretch;
  }

  .xui-md-flex-ai-center {
    align-items: center;
  }

  .xui-md-flex-ai-flex-start {
    align-items: flex-start;
  }

  .xui-md-flex-ai-flex-end {
    align-items: flex-end;
  }

  .xui-md-flex-ai-baseline {
    align-items: baseline;
  }

  .xui-md-flex-ai-initial {
    align-items: initial;
  }

  .xui-md-flex-ai-inherit {
    align-items: inherit;
  }

  .xui-md-flex-wrap-wrap {
    flex-wrap: wrap;
  }

  .xui-md-flex-wrap-nowrap {
    flex-wrap: nowrap;
  }

  .xui-md-flex-wrap-wrap-reverse {
    flex-wrap: wrap-reverse;
  }

  .xui-md-flex-wrap-inherit {
    flex-wrap: inherit;
  }

  .xui-md-flex-wrap-initial {
    flex-wrap: initial;
  }

  .xui-md-flex-dir-row {
    flex-direction: row;
  }

  .xui-md-flex-dir-row-reverse {
    flex-direction: row-reverse;
  }

  .xui-md-flex-dir-column {
    flex-direction: column;
  }

  .xui-md-flex-dir-column-reverse {
    flex-direction: column-reverse;
  }

  .xui-md-flex-dir-initial {
    flex-direction: initial;
  }

  .xui-md-flex-dir-inherit {
    flex-direction: inherit;
  }

  .xui-md-flex-grow-1 {
    flex-grow: 1;
  }

  .xui-md-flex-grow-2 {
    flex-grow: 2;
  }

  .xui-md-flex-grow-3 {
    flex-grow: 3;
  }

  .xui-md-flex-grow-4 {
    flex-grow: 4;
  }

  .xui-md-flex-grow-5 {
    flex-grow: 5;
  }

  .xui-md-flex-grow-initial {
    flex-grow: initial;
  }

  .xui-md-flex-grow-inherit {
    flex-grow: inherit;
  }

  .xui-md-flex-shrink-1 {
    flex-shrink: 1;
  }

  .xui-md-flex-shrink-2 {
    flex-shrink: 2;
  }

  .xui-md-flex-shrink-3 {
    flex-shrink: 3;
  }

  .xui-md-flex-shrink-4 {
    flex-shrink: 4;
  }

  .xui-md-flex-shrink-5 {
    flex-shrink: 5;
  }

  .xui-md-flex-shrink-initial {
    flex-shrink: initial;
  }

  .xui-md-flex-shrink-inherit {
    flex-shrink: inherit;
  }




  /*Displays*/
  .xui-md-d-none {
    display: none;
  }

  .xui-md-d-inline {
    display: inline;
  }

  .xui-md-d-inline-block {
    display: inline-block;
  }

  .xui-md-d-block {
    display: block;
  }

  .xui-md-d-contents {
    display: contents;
  }

  .xui-md-d-inline-flex {
    display: inline-flex;
  }

  .xui-md-d-inline-grid {
    display: inline-grid;
  }

  .xui-md-d-inline-table {
    display: inline-table;
  }

  .xui-md-d-list-item {
    display: list-item;
  }

  .xui-md-d-run-in {
    display: run-in;
  }

  .xui-md-d-table {
    display: table;
  }

  .xui-md-d-table-caption {
    display: table-caption;
  }

  .xui-md-d-table-column-group {
    display: table-column-group;
  }

  .xui-md-d-table-header-group {
    display: table-header-group;
  }

  .xui-md-d-table-footer-group {
    display: table-footer-group;
  }

  .xui-md-d-table-row-group {
    display: table-row-group;
  }

  .xui-md-d-table-cell {
    display: table-cell;
  }

  .xui-md-d-table-column {
    display: table-column;
  }

  .xui-md-d-table-row {
    display: table-row;
  }

  .xui-md-d-initial {
    display: initial;
  }

  .xui-md-d-inherit {
    display: inherit;
  }

  .xui-md-d-flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    -webkit-box-align: stretch;
    -moz-box-align: stretch;
    -ms-flex-jc-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
  }

  .xui-md-d-grid {
    display: grid;
  }





  /* Min/Max Widths & Heights */
  .xui-md-min-w-50 {
    min-width: 50px !important;
  }

  .xui-md-min-w-100 {
    min-width: 100px !important;
  }

  .xui-md-min-w-150 {
    min-width: 150px !important;
  }

  .xui-md-min-w-200 {
    min-width: 200px !important;
  }

  .xui-md-min-w-250 {
    min-width: 250px !important;
  }

  .xui-md-min-w-300 {
    min-width: 300px !important;
  }

  .xui-md-min-w-350 {
    min-width: 350px !important;
  }

  .xui-md-min-w-400 {
    min-width: 400px !important;
  }

  .xui-md-min-w-450 {
    min-width: 450px !important;
  }

  .xui-md-min-w-500 {
    min-width: 500px !important;
  }

  .xui-md-min-w-550 {
    min-width: 550px !important;
  }

  .xui-md-min-w-600 {
    min-width: 600px !important;
  }

  .xui-md-min-w-650 {
    min-width: 650px !important;
  }

  .xui-md-min-w-700 {
    min-width: 700px !important;
  }

  .xui-md-min-w-750 {
    min-width: 750px !important;
  }

  .xui-md-min-w-800 {
    min-width: 800px !important;
  }

  .xui-md-min-w-850 {
    min-width: 850px !important;
  }

  .xui-md-min-w-900 {
    min-width: 900px !important;
  }

  .xui-md-min-w-950 {
    min-width: 950px !important;
  }

  .xui-md-min-w-1000 {
    min-width: 1000px !important;
  }

  .xui-md-min-h-50 {
    min-height: 50px !important;
  }

  .xui-md-min-h-100 {
    min-height: 100px !important;
  }

  .xui-md-min-h-150 {
    min-height: 150px !important;
  }

  .xui-md-min-h-200 {
    min-height: 200px !important;
  }

  .xui-md-min-h-250 {
    min-height: 250px !important;
  }

  .xui-md-min-h-300 {
    min-height: 300px !important;
  }

  .xui-md-min-h-350 {
    min-height: 350px !important;
  }

  .xui-md-min-h-400 {
    min-height: 400px !important;
  }

  .xui-md-min-h-450 {
    min-height: 450px !important;
  }

  .xui-md-min-h-500 {
    min-height: 500px !important;
  }

  .xui-md-min-h-550 {
    min-height: 550px !important;
  }

  .xui-md-min-h-600 {
    min-height: 600px !important;
  }

  .xui-md-min-h-650 {
    min-height: 650px !important;
  }

  .xui-md-min-h-700 {
    min-height: 700px !important;
  }

  .xui-md-min-h-750 {
    min-height: 750px !important;
  }

  .xui-md-min-h-800 {
    min-height: 800px !important;
  }

  .xui-md-min-h-850 {
    min-height: 850px !important;
  }

  .xui-md-min-h-900 {
    min-height: 900px !important;
  }

  .xui-md-min-h-950 {
    min-height: 950px !important;
  }

  .xui-md-min-h-1000 {
    min-height: 1000px !important;
  }

  .xui-md-max-w-50 {
    max-width: 50px !important;
  }

  .xui-md-max-w-100 {
    max-width: 100px !important;
  }

  .xui-md-max-w-150 {
    max-width: 150px !important;
  }

  .xui-md-max-w-200 {
    max-width: 200px !important;
  }

  .xui-md-max-w-250 {
    max-width: 250px !important;
  }

  .xui-md-max-w-300 {
    max-width: 300px !important;
  }

  .xui-md-max-w-350 {
    max-width: 350px !important;
  }

  .xui-md-max-w-400 {
    max-width: 400px !important;
  }

  .xui-md-max-w-450 {
    max-width: 450px !important;
  }

  .xui-md-max-w-500 {
    max-width: 500px !important;
  }

  .xui-md-max-w-550 {
    max-width: 550px !important;
  }

  .xui-md-max-w-600 {
    max-width: 600px !important;
  }

  .xui-md-max-w-650 {
    max-width: 650px !important;
  }

  .xui-md-max-w-700 {
    max-width: 700px !important;
  }

  .xui-md-max-w-750 {
    max-width: 750px !important;
  }

  .xui-md-max-w-800 {
    max-width: 800px !important;
  }

  .xui-md-max-w-850 {
    max-width: 850px !important;
  }

  .xui-md-max-w-900 {
    max-width: 900px !important;
  }

  .xui-md-max-w-950 {
    max-width: 950px !important;
  }

  .xui-md-max-w-1000 {
    max-width: 1000px !important;
  }

  .xui-md-max-w-1100 {
    max-width: 1100px !important;
  }

  .xui-md-max-w-1200 {
    max-width: 1200px !important;
  }

  .xui-md-max-w-1300 {
    max-width: 1300px !important;
  }

  .xui-md-max-w-1400 {
    max-width: 1400px !important;
  }

  .xui-md-max-w-1500 {
    max-width: 1500px !important;
  }

  .xui-md-max-w-1600 {
    max-width: 1600px !important;
  }

  .xui-md-max-w-1700 {
    max-width: 1700px !important;
  }

  .xui-md-max-w-1800 {
    max-width: 1800px !important;
  }

  .xui-md-max-w-1900 {
    max-width: 1900px !important;
  }

  .xui-md-max-w-2000 {
    max-width: 2000px !important;
  }

  .xui-md-max-h-50 {
    max-height: 50px !important;
  }

  .xui-md-max-h-100 {
    max-height: 100px !important;
  }

  .xui-md-max-h-150 {
    max-height: 150px !important;
  }

  .xui-md-max-h-200 {
    max-height: 200px !important;
  }

  .xui-md-max-h-250 {
    max-height: 250px !important;
  }

  .xui-md-max-h-300 {
    max-height: 300px !important;
  }

  .xui-md-max-h-350 {
    max-height: 350px !important;
  }

  .xui-md-max-h-400 {
    max-height: 400px !important;
  }

  .xui-md-max-h-450 {
    max-height: 450px !important;
  }

  .xui-md-max-h-500 {
    max-height: 500px !important;
  }

  .xui-md-max-h-550 {
    max-height: 550px !important;
  }

  .xui-md-max-h-600 {
    max-height: 600px !important;
  }

  .xui-md-max-h-650 {
    max-height: 650px !important;
  }

  .xui-md-max-h-700 {
    max-height: 700px !important;
  }

  .xui-md-max-h-750 {
    max-height: 750px !important;
  }

  .xui-md-max-h-800 {
    max-height: 800px !important;
  }

  .xui-md-max-h-850 {
    max-height: 850px !important;
  }

  .xui-md-max-h-900 {
    max-height: 900px !important;
  }

  .xui-md-max-h-950 {
    max-height: 950px !important;
  }

  .xui-md-max-h-1000 {
    max-height: 1000px !important;
  }





  /*Fonts*/
  .xui-md-font-w-normal {
    font-weight: normal;
  }

  .xui-md-font-w-bold {
    font-weight: bold;
  }

  .xui-md-font-w-bolder {
    font-weight: bolder;
  }

  .xui-md-font-w-lighter {
    font-weight: lighter;
  }

  .xui-md-font-w-initial {
    font-weight: initial;
  }

  .xui-md-font-w-inherit {
    font-weight: inherit;
  }

  .xui-md-font-w-100 {
    font-weight: 100;
  }

  .xui-md-font-w-200 {
    font-weight: 200;
  }

  .xui-md-font-w-300 {
    font-weight: 300;
  }

  .xui-md-font-w-400 {
    font-weight: 400;
  }

  .xui-md-font-w-500 {
    font-weight: 500;
  }

  .xui-md-font-w-600 {
    font-weight: 600;
  }

  .xui-md-font-w-700 {
    font-weight: 700;
  }

  .xui-md-font-w-800 {
    font-weight: 800;
  }

  .xui-md-font-w-900 {
    font-weight: 900;
  }

  .xui-md-font-sz-xx-small {
    font-size: xx-small;
  }

  .xui-md-font-sz-x-small {
    font-size: x-small;
  }

  .xui-md-font-sz-small {
    font-size: small;
  }

  .xui-md-font-sz-x-large {
    font-size: x-large;
  }

  .xui-md-font-sz-xx-large {
    font-size: xx-large;
  }

  .xui-md-font-sz-smaller {
    font-size: smaller;
  }

  .xui-md-font-sz-larger {
    font-size: larger;
  }

  .xui-md-font-style-normal {
    font-style: normal;
  }

  .xui-md-font-style-oblique {
    font-style: oblique;
  }

  .xui-md-font-style-italic {
    font-style: italic;
  }

  .xui-md-font-style-initial {
    font-style: initial;
  }

  .xui-md-font-style-inherit {
    font-style: inherit;
  }

  .xui-md-font-sz-initial {
    font-size: initial;
  }

  .xui-md-font-sz-inherit {
    font-size: inherit;
  }

  .xui-md-font-sz-50 {
    font-size: 50%;
  }

  .xui-md-font-sz-55 {
    font-size: 55%;
  }

  .xui-md-font-sz-60 {
    font-size: 60%;
  }

  .xui-md-font-sz-65 {
    font-size: 65%;
  }

  .xui-md-font-sz-70 {
    font-size: 70%;
  }

  .xui-md-font-sz-75 {
    font-size: 75%;
  }

  .xui-md-font-sz-80 {
    font-size: 80%;
  }

  .xui-md-font-sz-85 {
    font-size: 85%;
  }

  .xui-md-font-sz-90 {
    font-size: 90%;
  }

  .xui-md-font-sz-95 {
    font-size: 95%;
  }

  .xui-md-font-sz-100 {
    font-size: 100%;
  }

  .xui-md-font-sz-105 {
    font-size: 105%;
  }

  .xui-md-font-sz-110 {
    font-size: 110%;
  }

  .xui-md-font-sz-115 {
    font-size: 115%;
  }

  .xui-md-font-sz-120 {
    font-size: 120%;
  }

  .xui-md-font-sz-125 {
    font-size: 125%;
  }

  .xui-md-font-sz-130 {
    font-size: 130%;
  }

  .xui-md-font-sz-135 {
    font-size: 135%;
  }

  .xui-md-font-sz-140 {
    font-size: 140%;
  }

  .xui-md-font-sz-145 {
    font-size: 145%;
  }

  .xui-md-font-sz-150 {
    font-size: 150%;
  }

  .xui-md-font-sz-155 {
    font-size: 155%;
  }

  .xui-md-font-sz-160 {
    font-size: 160%;
  }

  .xui-md-font-sz-165 {
    font-size: 165%;
  }

  .xui-md-font-sz-170 {
    font-size: 170%;
  }

  .xui-md-font-sz-175 {
    font-size: 175%;
  }

  .xui-md-font-sz-180 {
    font-size: 180%;
  }

  .xui-md-font-sz-185 {
    font-size: 185%;
  }

  .xui-md-font-sz-190 {
    font-size: 190%;
  }

  .xui-md-font-sz-195 {
    font-size: 195%;
  }

  .xui-md-font-sz-200 {
    font-size: 200%;
  }

  .xui-md-font-sz-205 {
    font-size: 205%;
  }

  .xui-md-font-sz-210 {
    font-size: 210%;
  }

  .xui-md-font-sz-215 {
    font-size: 215%;
  }

  .xui-md-font-sz-220 {
    font-size: 220%;
  }

  .xui-md-font-sz-225 {
    font-size: 225%;
  }

  .xui-md-font-sz-230 {
    font-size: 230%;
  }

  .xui-md-font-sz-235 {
    font-size: 235%;
  }

  .xui-md-font-sz-240 {
    font-size: 240%;
  }

  .xui-md-font-sz-245 {
    font-size: 245%;
  }

  .xui-md-font-sz-250 {
    font-size: 250%;
  }

  .xui-md-font-sz-300 {
    font-size: 300%;
  }

  .xui-md-font-sz-350 {
    font-size: 350%;
  }

  .xui-md-font-sz-400 {
    font-size: 400%;
  }

  .xui-md-font-sz-450 {
    font-size: 450%;
  }

  .xui-md-font-sz-500 {
    font-size: 500%;
  }

  .xui-md-font-sz-550 {
    font-size: 550%;
  }

  .xui-md-font-sz-600 {
    font-size: 600%;
  }

  .xui-md-font-sz-650 {
    font-size: 650%;
  }

  .xui-md-font-sz-700 {
    font-size: 700%;
  }

  .xui-md-font-sz-750 {
    font-size: 750%;
  }

  .xui-md-font-sz-800 {
    font-size: 800%;
  }

  .xui-md-font-sz-850 {
    font-size: 850%;
  }

  .xui-md-font-sz-900 {
    font-size: 900%;
  }

  .xui-md-font-sz-950 {
    font-size: 950%;
  }

  .xui-md-font-sz-1000 {
    font-size: 1000%;
  }




  /*Images*/
  .xui-md-img-15 {
    display: block;
    max-width: 15px;
    width: 100%;
  }

  .xui-md-img-20 {
    display: block;
    max-width: 20px;
    width: 100%;
  }

  .xui-md-img-25 {
    display: block;
    max-width: 25px;
    width: 100%;
  }

  .xui-md-img-30 {
    display: block;
    max-width: 30px;
    width: 100%;
  }

  .xui-md-img-35 {
    display: block;
    max-width: 35px;
    width: 100%;
  }

  .xui-md-img-40 {
    display: block;
    max-width: 40px;
    width: 100%;
  }

  .xui-md-img-45 {
    display: block;
    max-width: 45px;
    width: 100%;
  }

  .xui-md-img-50 {
    display: block;
    max-width: 50px;
    width: 100%;
  }

  .xui-md-img-100 {
    display: block;
    max-width: 100px;
    width: 100%;
  }

  .xui-md-img-150 {
    display: block;
    max-width: 150px;
    width: 100%;
  }

  .xui-md-img-200 {
    display: block;
    max-width: 200px;
    width: 100%;
  }

  .xui-md-img-250 {
    display: block;
    max-width: 250px;
    width: 100%;
  }

  .xui-md-img-300 {
    display: block;
    max-width: 300px;
    width: 100%;
  }

  .xui-md-img-350 {
    display: block;
    max-width: 350px;
    width: 100%;
  }

  .xui-md-img-400 {
    display: block;
    max-width: 400px;
    width: 100%;
  }

  .xui-md-img-450 {
    display: block;
    max-width: 450px;
    width: 100%;
  }

  .xui-md-img-500 {
    display: block;
    max-width: 500px;
    width: 100%;
  }

  .xui-md-img-550 {
    display: block;
    max-width: 550px;
    width: 100%;
  }

  .xui-md-img-600 {
    display: block;
    max-width: 600px;
    width: 100%;
  }

  .xui-md-img-650 {
    display: block;
    max-width: 650px;
    width: 100%;
  }

  .xui-md-img-700 {
    display: block;
    max-width: 700px;
    width: 100%;
  }

  .xui-md-img-750 {
    display: block;
    max-width: 750px;
    width: 100%;
  }

  .xui-md-img-800 {
    display: block;
    max-width: 800px;
    width: 100%;
  }

  .xui-md-img-850 {
    display: block;
    max-width: 850px;
    width: 100%;
  }

  .xui-md-img-900 {
    display: block;
    max-width: 900px;
    width: 100%;
  }

  .xui-md-img-950 {
    display: block;
    max-width: 950px;
    width: 100%;
  }

  .xui-md-img-1000 {
    display: block;
    max-width: 1000px;
    width: 100%;
  }

  .xui-md-img-responsive {
    display: block;
    width: 100%;
  }




  /* Modals */
  .xui-md-modal-center {
    justify-content: center;
    align-items: center;
  }

  .xui-md-modal-top-left {
    justify-content: flex-start;
    align-items: flex-start;
  }

  .xui-md-modal-top-right {
    justify-content: flex-end;
    align-items: flex-start;
  }

  .xui-md-modal-bottom-left {
    justify-content: flex-start;
    align-items: flex-end;
  }

  .xui-md-modal-bottom-right {
    justify-content: flex-end;
    align-items: flex-end;
  }

  .xui-md-modal-bottom-center {
    justify-content: center;
    align-items: flex-end;
  }




  /*Containers Spacing*/
  .xui-container {
    max-width: 768px;
    padding-left: 50px;
    padding-right: 50px;
  }

  .xui-left-fluid {
    left: 50px;
  }

  .xui-right-fluid {
    right: 50px;
  }

}





/*Large devices (desktops, 1024px and up)*/
@media screen and (min-width: 1024px) {

  .xui-lg-z-index-auto {
    z-index: auto;
  }

  .xui-lg-z-index-initial {
    z-index: initial;
  }

  .xui-lg-z-index-inherit {
    z-index: inherit;
  }

  .xui-lg-z-index-1 {
    z-index: 1;
  }

  .xui-lg-z-index-1 {
    z-index: 1;
  }

  .xui-lg-z-index-2 {
    z-index: 2;
  }

  .xui-lg-z-index-3 {
    z-index: 3;
  }

  .xui-lg-z-index-4 {
    z-index: 4;
  }

  .xui-lg-z-index-5 {
    z-index: 5;
  }

  .xui-lg-z-index-6 {
    z-index: 6;
  }

  .xui-lg-z-index-7 {
    z-index: 7;
  }

  .xui-lg-z-index-8 {
    z-index: 8;
  }

  .xui-lg-z-index-9 {
    z-index: 9;
  }

  .xui-lg-z-index-10 {
    z-index: 10;
  }

  .xui-lg-z-index--1 {
    z-index: -1;
  }

  .xui-lg-z-index--1 {
    z-index: -1;
  }

  .xui-lg-z-index--2 {
    z-index: -2;
  }

  .xui-lg-z-index--3 {
    z-index: -3;
  }

  .xui-lg-z-index--4 {
    z-index: -4;
  }

  .xui-lg-z-index--5 {
    z-index: -5;
  }

  .xui-lg-z-index--6 {
    z-index: -6;
  }

  .xui-lg-z-index--7 {
    z-index: -7;
  }

  .xui-lg-z-index--8 {
    z-index: -8;
  }

  .xui-lg-z-index--9 {
    z-index: -9;
  }

  .xui-lg-z-index--10 {
    z-index: -10;
  }



  /*Columns*/
  .xui-lg-columns-auto {
    columns: auto;
  }

  .xui-lg-columns-initial {
    columns: initial;
  }

  .xui-lg-columns-inherit {
    columns: inherit;
  }

  .xui-lg-column-width-auto {
    column-width: auto;
  }

  .xui-lg-column-width-inherit {
    column-width: inherit;
  }

  .xui-lg-column-width-initial {
    column-width: initial;
  }

  .xui-lg-column-count-1 {
    column-count: 1;
  }

  .xui-lg-column-count-2 {
    column-count: 2;
  }

  .xui-lg-column-count-3 {
    column-count: 3;
  }

  .xui-lg-column-count-4 {
    column-count: 4;
  }

  .xui-lg-column-count-5 {
    column-count: 5;
  }

  .xui-lg-column-count-6 {
    column-count: 6;
  }

  .xui-lg-column-count-7 {
    column-count: 7;
  }

  .xui-lg-column-count-8 {
    column-count: 8;
  }

  .xui-lg-column-count-9 {
    column-count: 9;
  }

  .xui-lg-column-count-10 {
    column-count: 10;
  }

  .xui-lg-column-count-11 {
    column-count: 11;
  }

  .xui-lg-column-count-12 {
    column-count: 12;
  }

  .xui-lg-column-fill-balance {
    column-fill: balance;
  }

  .xui-lg-column-fill-auto {
    column-fill: auto;
  }

  .xui-lg-column-fill-initial {
    column-fill: initial;
  }

  .xui-lg-column-fill-inherit {
    column-fill: inherit;
  }

  .xui-lg-column-gap-normal {
    column-gap: normal;
  }

  .xui-lg-column-gap-initial {
    column-gap: initial;
  }

  .xui-lg-column-gap-inherit {
    column-gap: inherit;
  }

  .xui-lg-column-gap-half {
    column-gap: .5rem;
  }

  .xui-lg-column-gap-1 {
    column-gap: 1rem;
  }

  .xui-lg-column-gap-1-half {
    column-gap: 1.5rem;
  }

  .xui-lg-column-gap-2 {
    column-gap: 2rem;
  }

  .xui-lg-column-gap-2-half {
    column-gap: 2.5rem;
  }

  .xui-lg-column-gap-3 {
    column-gap: 3rem;
  }

  .xui-lg-column-gap-3-half {
    column-gap: 3.5rem;
  }

  .xui-lg-column-gap-4 {
    column-gap: 4rem;
  }

  .xui-lg-column-gap-4-half {
    column-gap: 4.5rem;
  }

  .xui-lg-column-gap-5 {
    column-gap: 5rem;
  }

  .xui-lg-column-span-none {
    column-span: none;
  }

  .xui-lg-column-span-all {
    column-span: all;
  }

  .xui-lg-column-span-initial {
    column-span: initial;
  }

  .xui-lg-column-span-inherit {
    column-span: inherit;
  }



  /* Rows */
  .xui-lg-row-gap-normal {
    row-gap: normal;
  }

  .xui-lg-row-gap-initial {
    row-gap: initial;
  }

  .xui-lg-row-gap-inherit {
    row-gap: inherit;
  }

  .xui-lg-row-gap-half {
    row-gap: .5rem;
  }

  .xui-lg-row-gap-1 {
    row-gap: 1rem;
  }

  .xui-lg-row-gap-1-half {
    row-gap: 1.5rem;
  }

  .xui-lg-row-gap-2 {
    row-gap: 2rem;
  }

  .xui-lg-row-gap-2-half {
    row-gap: 2.5rem;
  }

  .xui-lg-row-gap-3 {
    row-gap: 3rem;
  }

  .xui-lg-row-gap-3-half {
    row-gap: 3.5rem;
  }

  .xui-lg-row-gap-4 {
    row-gap: 4rem;
  }

  .xui-lg-row-gap-4-half {
    row-gap: 4.5rem;
  }

  .xui-lg-row-gap-5 {
    row-gap: 5rem;
  }





  /*Rows & Columns*/
  .xui-lg-col-1 {
    flex-basis: 8.3%;
  }

  .xui-lg-col-2 {
    flex-basis: 16.66%;
  }

  .xui-lg-col-3 {
    flex-basis: 25%;
  }

  .xui-lg-col-4 {
    flex-basis: 33.33%;
  }

  .xui-lg-col-5 {
    flex-basis: 41.66%;
  }

  .xui-lg-col-6 {
    flex-basis: 50%;
  }

  .xui-lg-col-7 {
    flex-basis: 58.33%;
  }

  .xui-lg-col-8 {
    flex-basis: 66.66%;
  }

  .xui-lg-col-9 {
    flex-basis: 75%;
  }

  .xui-lg-col-10 {
    flex-basis: 83.33%;
  }

  .xui-lg-col-11 {
    flex-basis: 91.66%;
  }

  .xui-lg-col-12 {
    flex-basis: 100%;
  }





  /*Line Heights & Letter Spacings*/
  .xui-lg-line-height-half {
    line-height: .5rem;
  }

  .xui-lg-line-height-1 {
    line-height: 1rem;
  }

  .xui-lg-line-height-1-half {
    line-height: 1.5rem;
  }

  .xui-lg-line-height-2 {
    line-height: 2rem;
  }

  .xui-lg-line-height-2-half {
    line-height: 2.5rem;
  }

  .xui-lg-line-height-3 {
    line-height: 3rem;
  }

  .xui-lg-line-height-3-half {
    line-height: 3.5rem;
  }

  .xui-lg-line-height-4 {
    line-height: 4rem;
  }

  .xui-lg-line-height-4-half {
    line-height: 4.5rem;
  }

  .xui-lg-line-height-5 {
    line-height: 5rem;
  }

  .xui-lg-line-height-5-half {
    line-height: 5.5rem;
  }

  .xui-lg-line-height-6 {
    line-height: 6rem;
  }

  .xui-lg-line-height-6-half {
    line-height: 6.5rem;
  }

  .xui-lg-line-height-7 {
    line-height: 7rem;
  }

  .xui-lg-line-height-7-half {
    line-height: 7.5rem;
  }

  .xui-lg-line-height-8 {
    line-height: 8rem;
  }

  .xui-lg-line-height-8-half {
    line-height: 8.5rem;
  }

  .xui-lg-line-height-9 {
    line-height: 9rem;
  }

  .xui-lg-line-height-9-half {
    line-height: 9.5rem;
  }

  .xui-lg-line-height-10 {
    line-height: 10rem;
  }

  .xui-lg-line-height-normal {
    line-height: normal;
  }

  .xui-lg-line-height-inherit {
    line-height: inherit;
  }

  .xui-lg-line-height-initial {
    line-height: initial;
  }

  .xui-lg-letter-spacing-half {
    letter-spacing: .5px;
  }

  .xui-lg-letter-spacing-1 {
    letter-spacing: 1px;
  }

  .xui-lg-letter-spacing-1-half {
    letter-spacing: .15px;
  }

  .xui-lg-letter-spacing-2 {
    letter-spacing: 2px;
  }

  .xui-lg-letter-spacing-2-half {
    letter-spacing: 2.5px;
  }

  .xui-lg-letter-spacing-3 {
    letter-spacing: 3px;
  }

  .xui-lg-letter-spacing-3-half {
    letter-spacing: 3.5px;
  }

  .xui-lg-letter-spacing-4 {
    letter-spacing: 4px;
  }

  .xui-lg-letter-spacing-4-half {
    letter-spacing: 4.5px;
  }

  .xui-lg-letter-spacing-5 {
    letter-spacing: 5px;
  }

  .xui-lg-letter-spacing-normal {
    letter-spacing: normal;
  }

  .xui-lg-letter-spacing-inherit {
    letter-spacing: inherit;
  }

  .xui-lg-letter-spacing-initial {
    letter-spacing: initial;
  }





  /*Borders*/
  .xui-lg-bdr-rad-initial {
    border-radius: initial;
  }

  .xui-lg-bdr-rad-inherit {
    border-radius: inherit;
  }

  .xui-lg-bdr-rad-half {
    border-radius: .5rem;
  }

  .xui-lg-bdr-rad-1 {
    border-radius: 1rem;
  }

  .xui-lg-bdr-rad-1-half {
    border-radius: 1.5rem;
  }

  .xui-lg-bdr-rad-2 {
    border-radius: 2rem;
  }

  .xui-lg-bdr-rad-2-half {
    border-radius: 2.5rem;
  }

  .xui-lg-bdr-rad-3 {
    border-radius: 3rem;
  }

  .xui-lg-bdr-rad-3-half {
    border-radius: 3.5rem;
  }

  .xui-lg-bdr-rad-4 {
    border-radius: 4rem;
  }

  .xui-lg-bdr-rad-4-half {
    border-radius: 4.5rem;
  }

  .xui-lg-bdr-rad-5 {
    border-radius: 5rem;
  }

  .xui-lg-bdr-rad-5-half {
    border-radius: 5.5rem;
  }

  .xui-lg-bdr-rad-6 {
    border-radius: 6rem;
  }

  .xui-lg-bdr-rad-6-half {
    border-radius: 6.5rem;
  }

  .xui-lg-bdr-rad-7 {
    border-radius: 7rem;
  }

  .xui-lg-bdr-rad-7-half {
    border-radius: 7.5rem;
  }

  .xui-lg-bdr-rad-8 {
    border-radius: 8rem;
  }

  .xui-lg-bdr-rad-8-half {
    border-radius: 8.5rem;
  }

  .xui-lg-bdr-rad-9 {
    border-radius: 9rem;
  }

  .xui-lg-bdr-rad-9-half {
    border-radius: 9.5rem;
  }

  .xui-lg-bdr-rad-10 {
    border-radius: 10rem;
  }

  .xui-lg-bdr-rad-circle,
  .xui-lg-bdr-rad-round {
    border-radius: 50%;
  }

  .xui-lg-bdr-w-medium,
  .xui-lg-bdr-width-medium {
    border-width: medium;
  }

  .xui-lg-bdr-w-thin,
  .xui-lg-bdr-width-thin {
    border-width: thin;
  }

  .xui-lg-bdr-w-thick,
  .xui-lg-bdr-width-thick {
    border-width: thick;
  }

  .xui-lg-bdr-w-initial,
  .xui-lg-bdr-width-initial {
    border-width: initial;
  }

  .xui-lg-bdr-w-inherit,
  .xui-lg-bdr-width-inherit {
    border-width: inherit;
  }

  .xui-lg-bdr-w-1,
  .xui-lg-bdr-width-1 {
    border-width: 1px !important;
  }

  .xui-lg-bdr-w-2,
  .xui-lg-bdr-width-2 {
    border-width: 2px !important;
  }

  .xui-lg-bdr-w-3,
  .xui-lg-bdr-width-3 {
    border-width: 3px !important;
  }

  .xui-lg-bdr-w-4,
  .xui-lg-bdr-width-4 {
    border-width: 4px !important;
  }

  .xui-lg-bdr-w-5,
  .xui-lg-bdr-width-5 {
    border-width: 5px !important;
  }

  .xui-lg-bdr-w-6,
  .xui-lg-bdr-width-6 {
    border-width: 6px !important;
  }

  .xui-lg-bdr-w-7,
  .xui-lg-bdr-width-7 {
    border-width: 7px !important;
  }

  .xui-lg-bdr-w-8,
  .xui-lg-bdr-width-8 {
    border-width: 8px !important;
  }

  .xui-lg-bdr-w-9,
  .xui-lg-bdr-width-9 {
    border-width: 9px !important;
  }

  .xui-lg-bdr-w-10,
  .xui-lg-bdr-width-10 {
    border-width: 10px !important;
  }

  .xui-lg-bdr-w-11,
  .xui-lg-bdr-width-11 {
    border-width: 11px !important;
  }

  .xui-lg-bdr-w-12,
  .xui-lg-bdr-width-12 {
    border-width: 12px !important;
  }

  .xui-lg-bdr-w-13,
  .xui-lg-bdr-width-13 {
    border-width: 13px !important;
  }

  .xui-lg-bdr-w-14,
  .xui-lg-bdr-width-14 {
    border-width: 14px !important;
  }

  .xui-lg-bdr-w-15,
  .xui-lg-bdr-width-15 {
    border-width: 15px !important;
  }

  .xui-lg-bdr-w-16,
  .xui-lg-bdr-width-16 {
    border-width: 16px !important;
  }

  .xui-lg-bdr-w-17,
  .xui-lg-bdr-width-17 {
    border-width: 17px !important;
  }

  .xui-lg-bdr-w-18,
  .xui-lg-bdr-width-18 {
    border-width: 18px !important;
  }

  .xui-lg-bdr-w-19,
  .xui-lg-bdr-width-19 {
    border-width: 19px !important;
  }

  .xui-lg-bdr-w-20,
  .xui-lg-bdr-width-20 {
    border-width: 20px !important;
  }

  .xui-lg-bdr-s-none,
  .xui-lg-bdr-style-none {
    border-style: none !important;
  }

  .xui-lg-bdr-s-hidden,
  .xui-lg-bdr-style-hidden {
    border-style: hidden !important;
  }

  .xui-lg-bdr-s-dotted,
  .xui-lg-bdr-style-dotted {
    border-style: dotted !important;
  }

  .xui-lg-bdr-s-dashed,
  .xui-lg-bdr-style-dashed {
    border-style: dashed !important;
  }

  .xui-lg-bdr-s-solid,
  .xui-lg-bdr-style-solid {
    border-style: solid !important;
  }

  .xui-lg-bdr-s-double,
  .xui-lg-bdr-style-double {
    border-style: double !important;
  }

  .xui-lg-bdr-s-groove,
  .xui-lg-bdr-style-groove {
    border-style: groove !important;
  }

  .xui-lg-bdr-s-ridge,
  .xui-lg-bdr-style-ridge {
    border-style: ridge !important;
  }

  .xui-lg-bdr-s-inset,
  .xui-lg-bdr-style-inset {
    border-style: inset !important;
  }

  .xui-lg-bdr-s-outset,
  .xui-lg-bdr-style-outset {
    border-style: outset !important;
  }

  .xui-lg-bdr-s-initial,
  .xui-lg-bdr-style-initial {
    border-style: initial !important;
  }

  .xui-lg-bdr-s-inherit,
  .xui-lg-bdr-style-inherit {
    border-style: inherit !important;
  }





  /*Grids*/
  .xui-lg-grid-row-1 {
    grid-template-rows: repeat(1, 1fr);
  }

  .xui-lg-grid-row-2 {
    grid-template-rows: repeat(2, 1fr);
  }

  .xui-lg-grid-row-3 {
    grid-template-rows: repeat(3, 1fr);
  }

  .xui-lg-grid-row-4 {
    grid-template-rows: repeat(4, 1fr);
  }

  .xui-lg-grid-row-5 {
    grid-template-rows: repeat(5, 1fr);
  }

  .xui-lg-grid-row-6 {
    grid-template-rows: repeat(6, 1fr);
  }

  .xui-lg-grid-row-7 {
    grid-template-rows: repeat(7, 1fr);
  }

  .xui-lg-grid-row-8 {
    grid-template-rows: repeat(8, 1fr);
  }

  .xui-lg-grid-row-9 {
    grid-template-rows: repeat(9, 1fr);
  }

  .xui-lg-grid-row-10 {
    grid-template-rows: repeat(10, 1fr);
  }

  .xui-lg-grid-row-11 {
    grid-template-rows: repeat(11, 1fr);
  }

  .xui-lg-grid-row-12 {
    grid-template-rows: repeat(12, 1fr);
  }

  .xui-lg-grid-col-1 {
    grid-template-columns: repeat(1, 1fr);
  }

  .xui-lg-grid-col-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .xui-lg-grid-col-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .xui-lg-grid-col-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .xui-lg-grid-col-5 {
    grid-template-columns: repeat(5, 1fr);
  }

  .xui-lg-grid-col-6 {
    grid-template-columns: repeat(6, 1fr);
  }

  .xui-lg-grid-col-7 {
    grid-template-columns: repeat(7, 1fr);
  }

  .xui-lg-grid-col-8 {
    grid-template-columns: repeat(8, 1fr);
  }

  .xui-lg-grid-col-9 {
    grid-template-columns: repeat(9, 1fr);
  }

  .xui-lg-grid-col-10 {
    grid-template-columns: repeat(10, 1fr);
  }

  .xui-lg-grid-col-11 {
    grid-template-columns: repeat(11, 1fr);
  }

  .xui-lg-grid-col-12 {
    grid-template-columns: repeat(12, 1fr);
  }

  .xui-lg-grid-gap-none {
    grid-gap: 0;
  }

  .xui-lg-grid-gap-half {
    grid-gap: .5rem;
  }

  .xui-lg-grid-gap-1 {
    grid-gap: 1rem;
  }

  .xui-lg-grid-gap-1-half {
    grid-gap: 1.5rem;
  }

  .xui-lg-grid-gap-2 {
    grid-gap: 2rem;
  }

  .xui-lg-grid-gap-2-half {
    grid-gap: 2.5rem;
  }

  .xui-lg-grid-gap-3 {
    grid-gap: 3rem;
  }

  .xui-lg-grid-gap-3-half {
    grid-gap: 3.5rem;
  }

  .xui-lg-grid-gap-4 {
    grid-gap: 4rem;
  }

  .xui-lg-grid-gap-4-half {
    grid-gap: 4.5rem;
  }

  .xui-lg-grid-gap-5 {
    grid-gap: 5rem;
  }

  .xui-lg-grid-gap-5-half {
    grid-gap: 5.5rem;
  }

  .xui-lg-grid-gap-6 {
    grid-gap: 6rem;
  }

  .xui-lg-grid-gap-6-half {
    grid-gap: 6.5rem;
  }

  .xui-lg-grid-gap-7 {
    grid-gap: 7rem;
  }

  .xui-lg-grid-gap-7-half {
    grid-gap: 7.5rem;
  }

  .xui-lg-grid-gap-8 {
    grid-gap: 8rem;
  }

  .xui-lg-grid-gap-8-half {
    grid-gap: 8.5rem;
  }

  .xui-lg-grid-gap-9 {
    grid-gap: 9rem;
  }

  .xui-lg-grid-gap-9-half {
    grid-gap: 9.5rem;
  }

  .xui-lg-grid-gap-10 {
    grid-gap: 10rem;
  }

  .xui-lg-grid-row-gap-none {
    grid-row-gap: 0;
  }

  .xui-lg-grid-row-gap-half {
    grid-row-gap: .5rem;
  }

  .xui-lg-grid-row-gap-1 {
    grid-row-gap: 1rem;
  }

  .xui-lg-grid-row-gap-1-half {
    grid-row-gap: 1.5rem;
  }

  .xui-lg-grid-row-gap-2 {
    grid-row-gap: 2rem;
  }

  .xui-lg-grid-row-gap-2-half {
    grid-row-gap: 2.5rem;
  }

  .xui-lg-grid-row-gap-3 {
    grid-row-gap: 3rem;
  }

  .xui-lg-grid-row-gap-3-half {
    grid-row-gap: 3.5rem;
  }

  .xui-lg-grid-row-gap-4 {
    grid-row-gap: 4rem;
  }

  .xui-lg-grid-row-gap-4-half {
    grid-row-gap: 4.5rem;
  }

  .xui-lg-grid-row-gap-5 {
    grid-row-gap: 5rem;
  }

  .xui-lg-grid-row-gap-5-half {
    grid-row-gap: 5.5rem;
  }

  .xui-lg-grid-row-gap-6 {
    grid-row-gap: 6rem;
  }

  .xui-lg-grid-row-gap-6-half {
    grid-row-gap: 6.5rem;
  }

  .xui-lg-grid-row-gap-7 {
    grid-row-gap: 7rem;
  }

  .xui-lg-grid-row-gap-7-half {
    grid-row-gap: 7.5rem;
  }

  .xui-lg-grid-row-gap-8 {
    grid-row-gap: 8rem;
  }

  .xui-lg-grid-row-gap-8-half {
    grid-row-gap: 8.5rem;
  }

  .xui-lg-grid-row-gap-9 {
    grid-row-gap: 9rem;
  }

  .xui-lg-grid-row-gap-9-half {
    grid-row-gap: 9.5rem;
  }

  .xui-lg-grid-row-gap-10 {
    grid-row-gap: 10rem;
  }

  .xui-lg-grid-column-gap-none {
    grid-column-gap: 0;
  }

  .xui-lg-grid-column-gap-half {
    grid-column-gap: .5rem;
  }

  .xui-lg-grid-column-gap-1 {
    grid-column-gap: 1rem;
  }

  .xui-lg-grid-column-gap-1-half {
    grid-column-gap: 1.5rem;
  }

  .xui-lg-grid-column-gap-2 {
    grid-column-gap: 2rem;
  }

  .xui-lg-grid-column-gap-2-half {
    grid-column-gap: 2.5rem;
  }

  .xui-lg-grid-column-gap-3 {
    grid-column-gap: 3rem;
  }

  .xui-lg-grid-column-gap-3-half {
    grid-column-gap: 3.5rem;
  }

  .xui-lg-grid-column-gap-4 {
    grid-column-gap: 4rem;
  }

  .xui-lg-grid-column-gap-4-half {
    grid-column-gap: 4.5rem;
  }

  .xui-lg-grid-column-gap-5 {
    grid-column-gap: 5rem;
  }

  .xui-lg-grid-column-gap-5-half {
    grid-column-gap: 5.5rem;
  }

  .xui-lg-grid-column-gap-6 {
    grid-column-gap: 6rem;
  }

  .xui-lg-grid-column-gap-6-half {
    grid-column-gap: 6.5rem;
  }

  .xui-lg-grid-column-gap-7 {
    grid-column-gap: 7rem;
  }

  .xui-lg-grid-column-gap-7-half {
    grid-column-gap: 7.5rem;
  }

  .xui-lg-grid-column-gap-8 {
    grid-column-gap: 8rem;
  }

  .xui-lg-grid-column-gap-8-half {
    grid-column-gap: 8.5rem;
  }

  .xui-lg-grid-column-gap-9 {
    grid-column-gap: 9rem;
  }

  .xui-lg-grid-column-gap-9-half {
    grid-column-gap: 9.5rem;
  }

  .xui-lg-grid-column-gap-10 {
    grid-column-gap: 10rem;
  }





  /* The Modern Way for Gaps That Applies to Grid & Flexbox */
  .xui-lg-gap-none {
    gap: 0;
  }

  .xui-lg-gap-half {
    gap: .5rem;
  }

  .xui-lg-gap-1 {
    gap: 1rem;
  }

  .xui-lg-gap-1-half {
    gap: 1.5rem;
  }

  .xui-lg-gap-2 {
    gap: 2rem;
  }

  .xui-lg-gap-2-half {
    gap: 2.5rem;
  }

  .xui-lg-gap-3 {
    gap: 3rem;
  }

  .xui-lg-gap-3-half {
    gap: 3.5rem;
  }

  .xui-lg-gap-4 {
    gap: 4rem;
  }

  .xui-lg-gap-4-half {
    gap: 4.5rem;
  }

  .xui-lg-gap-5 {
    gap: 5rem;
  }

  .xui-lg-gap-5-half {
    gap: 5.5rem;
  }

  .xui-lg-gap-6 {
    gap: 6rem;
  }

  .xui-lg-gap-6-half {
    gap: 6.5rem;
  }

  .xui-lg-gap-7 {
    gap: 7rem;
  }

  .xui-lg-gap-7-half {
    gap: 7.5rem;
  }

  .xui-lg-gap-8 {
    gap: 8rem;
  }

  .xui-lg-gap-8-half {
    gap: 8.5rem;
  }

  .xui-lg-gap-9 {
    gap: 9rem;
  }

  .xui-lg-gap-9-half {
    gap: 9.5rem;
  }

  .xui-lg-gap-10 {
    gap: 10rem;
  }

  .xui-lg-row-gap-none {
    row-gap: 0;
  }

  .xui-lg-row-gap-half {
    row-gap: .5rem;
  }

  .xui-lg-row-gap-1 {
    row-gap: 1rem;
  }

  .xui-lg-row-gap-1-half {
    row-gap: 1.5rem;
  }

  .xui-lg-row-gap-2 {
    row-gap: 2rem;
  }

  .xui-lg-row-gap-2-half {
    row-gap: 2.5rem;
  }

  .xui-lg-row-gap-3 {
    row-gap: 3rem;
  }

  .xui-lg-row-gap-3-half {
    row-gap: 3.5rem;
  }

  .xui-lg-row-gap-4 {
    row-gap: 4rem;
  }

  .xui-lg-row-gap-4-half {
    row-gap: 4.5rem;
  }

  .xui-lg-row-gap-5 {
    row-gap: 5rem;
  }

  .xui-lg-row-gap-5-half {
    row-gap: 5.5rem;
  }

  .xui-lg-row-gap-6 {
    row-gap: 6rem;
  }

  .xui-lg-row-gap-6-half {
    row-gap: 6.5rem;
  }

  .xui-lg-row-gap-7 {
    row-gap: 7rem;
  }

  .xui-lg-row-gap-7-half {
    row-gap: 7.5rem;
  }

  .xui-lg-row-gap-8 {
    row-gap: 8rem;
  }

  .xui-lg-row-gap-8-half {
    row-gap: 8.5rem;
  }

  .xui-lg-row-gap-9 {
    row-gap: 9rem;
  }

  .xui-lg-row-gap-9-half {
    row-gap: 9.5rem;
  }

  .xui-lg-row-gap-10 {
    row-gap: 10rem;
  }

  .xui-lg-column-gap-none {
    column-gap: 0;
  }

  .xui-lg-column-gap-half {
    column-gap: .5rem;
  }

  .xui-lg-column-gap-1 {
    column-gap: 1rem;
  }

  .xui-lg-column-gap-1-half {
    column-gap: 1.5rem;
  }

  .xui-lg-column-gap-2 {
    column-gap: 2rem;
  }

  .xui-lg-column-gap-2-half {
    column-gap: 2.5rem;
  }

  .xui-lg-column-gap-3 {
    column-gap: 3rem;
  }

  .xui-lg-column-gap-3-half {
    column-gap: 3.5rem;
  }

  .xui-lg-column-gap-4 {
    column-gap: 4rem;
  }

  .xui-lg-column-gap-4-half {
    column-gap: 4.5rem;
  }

  .xui-lg-column-gap-5 {
    column-gap: 5rem;
  }

  .xui-lg-column-gap-5-half {
    column-gap: 5.5rem;
  }

  .xui-lg-column-gap-6 {
    column-gap: 6rem;
  }

  .xui-lg-column-gap-6-half {
    column-gap: 6.5rem;
  }

  .xui-lg-column-gap-7 {
    column-gap: 7rem;
  }

  .xui-lg-column-gap-7-half {
    column-gap: 7.5rem;
  }

  .xui-lg-column-gap-8 {
    column-gap: 8rem;
  }

  .xui-lg-column-gap-8-half {
    column-gap: 8.5rem;
  }

  .xui-lg-column-gap-9 {
    column-gap: 9rem;
  }

  .xui-lg-column-gap-9-half {
    column-gap: 9.5rem;
  }

  .xui-lg-column-gap-10 {
    column-gap: 10rem;
  }





  /*Margins*/
  .xui-lg-m-none {
    margin: 0;
  }

  .xui-lg-m-auto {
    margin: auto;
  }

  .xui-lg-m-inherit {
    margin: inherit;
  }

  .xui-lg-m-unset {
    margin: unset;
  }

  .xui-lg-m-all {
    margin: all;
  }

  .xui-lg-m-initial {
    margin: initial;
  }

  .xui-lg-m-half {
    margin: .5rem;
  }

  .xui-lg-m-1 {
    margin: 1rem;
  }

  .xui-lg-m-1-half {
    margin: 1.5rem;
  }

  .xui-lg-m-2 {
    margin: 2rem;
  }

  .xui-lg-m-2-half {
    margin: 2.5rem;
  }

  .xui-lg-m-3 {
    margin: 3rem;
  }

  .xui-lg-m-3-half {
    margin: 3.5rem;
  }

  .xui-lg-m-4 {
    margin: 4rem;
  }

  .xui-lg-m-4-half {
    margin: 4.5rem;
  }

  .xui-lg-m-5 {
    margin: 5rem;
  }

  .xui-lg-m-5-half {
    margin: 5.5rem;
  }

  .xui-lg-m-6 {
    margin: 6rem;
  }

  .xui-lg-m-6-half {
    margin: 6.5rem;
  }

  .xui-lg-m-7 {
    margin: 7rem;
  }

  .xui-lg-m-7-half {
    margin: 7.5rem;
  }

  .xui-lg-m-8 {
    margin: 8rem;
  }

  .xui-lg-m-8-half {
    margin: 8.5rem;
  }

  .xui-lg-m-9 {
    margin: 9rem;
  }

  .xui-lg-m-9-half {
    margin: 9.5rem;
  }

  .xui-lg-m-10 {
    margin: 10rem;
  }

  .xui-lg-mt-none {
    margin-top: 0;
  }

  .xui-lg-mt-auto {
    margin-top: auto;
  }

  .xui-lg-mt--half {
    margin-top: -.5rem;
  }

  .xui-lg-mt--1 {
    margin-top: -1rem;
  }

  .xui-lg-mt--1-half {
    margin-top: -1.5rem;
  }

  .xui-lg-mt--2 {
    margin-top: -2rem;
  }

  .xui-lg-mt--2-half {
    margin-top: -2.5rem;
  }

  .xui-lg-mt--3 {
    margin-top: -3rem;
  }

  .xui-lg-mt--3-half {
    margin-top: -3.5rem;
  }

  .xui-lg-mt--4 {
    margin-top: -4rem;
  }

  .xui-lg-mt--4-half {
    margin-top: -4.5rem;
  }

  .xui-lg-mt--5 {
    margin-top: -5rem;
  }

  .xui-lg-mt--5-half {
    margin-top: -5.5rem;
  }

  .xui-lg-mt--6 {
    margin-top: -6rem;
  }

  .xui-lg-mt--6-half {
    margin-top: -6.5rem;
  }

  .xui-lg-mt--7 {
    margin-top: -7rem;
  }

  .xui-lg-mt--7-half {
    margin-top: -7.5rem;
  }

  .xui-lg-mt--8 {
    margin-top: -8rem;
  }

  .xui-lg-mt--8-half {
    margin-top: -8.5rem;
  }

  .xui-lg-mt--9 {
    margin-top: -9rem;
  }

  .xui-lg-mt--9-half {
    margin-top: -9.5rem;
  }

  .xui-lg-mt--10 {
    margin-top: -10rem;
  }

  .xui-lg-mt-half {
    margin-top: .5rem;
  }

  .xui-lg-mt-1 {
    margin-top: 1rem;
  }

  .xui-lg-mt-1-half {
    margin-top: 1.5rem;
  }

  .xui-lg-mt-2 {
    margin-top: 2rem;
  }

  .xui-lg-mt-2-half {
    margin-top: 2.5rem;
  }

  .xui-lg-mt-3 {
    margin-top: 3rem;
  }

  .xui-lg-mt-3-half {
    margin-top: 3.5rem;
  }

  .xui-lg-mt-4 {
    margin-top: 4rem;
  }

  .xui-lg-mt-4-half {
    margin-top: 4.5rem;
  }

  .xui-lg-mt-5 {
    margin-top: 5rem;
  }

  .xui-lg-mt-5-half {
    margin-top: 5.5rem;
  }

  .xui-lg-mt-6 {
    margin-top: 6rem;
  }

  .xui-lg-mt-6-half {
    margin-top: 6.5rem;
  }

  .xui-lg-mt-7 {
    margin-top: 7rem;
  }

  .xui-lg-mt-7-half {
    margin-top: 7.5rem;
  }

  .xui-lg-mt-8 {
    margin-top: 8rem;
  }

  .xui-lg-mt-8-half {
    margin-top: 8.5rem;
  }

  .xui-lg-mt-9 {
    margin-top: 9rem;
  }

  .xui-lg-mt-9-half {
    margin-top: 9.5rem;
  }

  .xui-lg-mt-10 {
    margin-top: 10rem;
  }

  .xui-lg-mr-none {
    margin-right: 0;
  }

  .xui-lg-mr-auto {
    margin-right: auto;
  }

  .xui-lg-mr--half {
    margin-right: -.5rem;
  }

  .xui-lg-mr--1 {
    margin-right: -1rem;
  }

  .xui-lg-mr--1-half {
    margin-right: -1.5rem;
  }

  .xui-lg-mr--2 {
    margin-right: -2rem;
  }

  .xui-lg-mr--2-half {
    margin-right: -2.5rem;
  }

  .xui-lg-mr--3 {
    margin-right: -3rem;
  }

  .xui-lg-mr--3-half {
    margin-right: -3.5rem;
  }

  .xui-lg-mr--4 {
    margin-right: -4rem;
  }

  .xui-lg-mr--4-half {
    margin-right: -4.5rem;
  }

  .xui-lg-mr--5 {
    margin-right: -5rem;
  }

  .xui-lg-mr--5-half {
    margin-right: -5.5rem;
  }

  .xui-lg-mr--6 {
    margin-right: -6rem;
  }

  .xui-lg-mr--6-half {
    margin-right: -6.5rem;
  }

  .xui-lg-mr--7 {
    margin-right: -7rem;
  }

  .xui-lg-mr--7-half {
    margin-right: -7.5rem;
  }

  .xui-lg-mr--8 {
    margin-right: -8rem;
  }

  .xui-lg-mr--8-half {
    margin-right: -8.5rem;
  }

  .xui-lg-mr--9 {
    margin-right: -9rem;
  }

  .xui-lg-mr--9-half {
    margin-right: -9.5rem;
  }

  .xui-lg-mr--10 {
    margin-right: -10rem;
  }

  .xui-lg-mr-half {
    margin-right: .5rem;
  }

  .xui-lg-mr-1 {
    margin-right: 1rem;
  }

  .xui-lg-mr-1-half {
    margin-right: 1.5rem;
  }

  .xui-lg-mr-2 {
    margin-right: 2rem;
  }

  .xui-lg-mr-2-half {
    margin-right: 2.5rem;
  }

  .xui-lg-mr-3 {
    margin-right: 3rem;
  }

  .xui-lg-mr-3-half {
    margin-right: 3.5rem;
  }

  .xui-lg-mr-4 {
    margin-right: 4rem;
  }

  .xui-lg-mr-4-half {
    margin-right: 4.5rem;
  }

  .xui-lg-mr-5 {
    margin-right: 5rem;
  }

  .xui-lg-mr-5-half {
    margin-right: 5.5rem;
  }

  .xui-lg-mr-6 {
    margin-right: 6rem;
  }

  .xui-lg-mr-6-half {
    margin-right: 6.5rem;
  }

  .xui-lg-mr-7 {
    margin-right: 7rem;
  }

  .xui-lg-mr-7-half {
    margin-right: 7.5rem;
  }

  .xui-lg-mr-8 {
    margin-right: 8rem;
  }

  .xui-lg-mr-8-half {
    margin-right: 8.5rem;
  }

  .xui-lg-mr-9 {
    margin-right: 9rem;
  }

  .xui-lg-mr-9-half {
    margin-right: 9.5rem;
  }

  .xui-lg-mr-10 {
    margin-right: 10rem;
  }

  .xui-lg-mb-none {
    margin-bottom: 0;
  }

  .xui-lg-mb-auto {
    margin-bottom: auto;
  }

  .xui-lg-mb--half {
    margin-bottom: -.5rem;
  }

  .xui-lg-mb--1 {
    margin-bottom: -1rem;
  }

  .xui-lg-mb--1-half {
    margin-bottom: -1.5rem;
  }

  .xui-lg-mb--2 {
    margin-bottom: -2rem;
  }

  .xui-lg-mb--2-half {
    margin-bottom: -2.5rem;
  }

  .xui-lg-mb--3 {
    margin-bottom: -3rem;
  }

  .xui-lg-mb--3-half {
    margin-bottom: -3.5rem;
  }

  .xui-lg-mb--4 {
    margin-bottom: -4rem;
  }

  .xui-lg-mb--4-half {
    margin-bottom: -4.5rem;
  }

  .xui-lg-mb--5 {
    margin-bottom: -5rem;
  }

  .xui-lg-mb--5-half {
    margin-bottom: -5.5rem;
  }

  .xui-lg-mb--6 {
    margin-bottom: -6rem;
  }

  .xui-lg-mb--6-half {
    margin-bottom: -6.5rem;
  }

  .xui-lg-mb--7 {
    margin-bottom: -7rem;
  }

  .xui-lg-mb--7-half {
    margin-bottom: -7.5rem;
  }

  .xui-lg-mb--8 {
    margin-bottom: -8rem;
  }

  .xui-lg-mb--8-half {
    margin-bottom: -8.5rem;
  }

  .xui-lg-mb--9 {
    margin-bottom: -9rem;
  }

  .xui-lg-mb--9-half {
    margin-bottom: -9.5rem;
  }

  .xui-lg-mb--10 {
    margin-bottom: -10rem;
  }

  .xui-lg-mb-half {
    margin-bottom: .5rem;
  }

  .xui-lg-mb-1 {
    margin-bottom: 1rem;
  }

  .xui-lg-mb-1-half {
    margin-bottom: 1.5rem;
  }

  .xui-lg-mb-2 {
    margin-bottom: 2rem;
  }

  .xui-lg-mb-2-half {
    margin-bottom: 2.5rem;
  }

  .xui-lg-mb-3 {
    margin-bottom: 3rem;
  }

  .xui-lg-mb-3-half {
    margin-bottom: 3.5rem;
  }

  .xui-lg-mb-4 {
    margin-bottom: 4rem;
  }

  .xui-lg-mb-4-half {
    margin-bottom: 4.5rem;
  }

  .xui-lg-mb-5 {
    margin-bottom: 5rem;
  }

  .xui-lg-mb-5-half {
    margin-bottom: 5.5rem;
  }

  .xui-lg-mb-6 {
    margin-bottom: 6rem;
  }

  .xui-lg-mb-6-half {
    margin-bottom: 6.5rem;
  }

  .xui-lg-mb-7 {
    margin-bottom: 7rem;
  }

  .xui-lg-mb-7-half {
    margin-bottom: 7.5rem;
  }

  .xui-lg-mb-8 {
    margin-bottom: 8rem;
  }

  .xui-lg-mb-8-half {
    margin-bottom: 8.5rem;
  }

  .xui-lg-mb-9 {
    margin-bottom: 9rem;
  }

  .xui-lg-mb-9-half {
    margin-bottom: 9.5rem;
  }

  .xui-lg-mb-10 {
    margin-bottom: 10rem;
  }

  .xui-lg-ml-none {
    margin-left: 0;
  }

  .xui-lg-ml-auto {
    margin-left: auto;
  }

  .xui-lg-ml--half {
    margin-left: -.5rem;
  }

  .xui-lg-ml--1 {
    margin-left: -1rem;
  }

  .xui-lg-ml--1-half {
    margin-left: -1.5rem;
  }

  .xui-lg-ml--2 {
    margin-left: -2rem;
  }

  .xui-lg-ml--2-half {
    margin-left: -2.5rem;
  }

  .xui-lg-ml--3 {
    margin-left: -3rem;
  }

  .xui-lg-ml--3-half {
    margin-left: -3.5rem;
  }

  .xui-lg-ml--4 {
    margin-left: -4rem;
  }

  .xui-lg-ml--4-half {
    margin-left: -4.5rem;
  }

  .xui-lg-ml--5 {
    margin-left: -5rem;
  }

  .xui-lg-ml--5-half {
    margin-left: -5.5rem;
  }

  .xui-lg-ml--6 {
    margin-left: -6rem;
  }

  .xui-lg-ml--6-half {
    margin-left: -6.5rem;
  }

  .xui-lg-ml--7 {
    margin-left: -7rem;
  }

  .xui-lg-ml--7-half {
    margin-left: -7.5rem;
  }

  .xui-lg-ml--8 {
    margin-left: -8rem;
  }

  .xui-lg-ml--8-half {
    margin-left: -8.5rem;
  }

  .xui-lg-ml--9 {
    margin-left: -9rem;
  }

  .xui-lg-ml--9-half {
    margin-left: -9.5rem;
  }

  .xui-lg-ml--10 {
    margin-left: -10rem;
  }

  .xui-lg-ml-half {
    margin-left: .5rem;
  }

  .xui-lg-ml-1 {
    margin-left: 1rem;
  }

  .xui-lg-ml-1-half {
    margin-left: 1.5rem;
  }

  .xui-lg-ml-2 {
    margin-left: 2rem;
  }

  .xui-lg-ml-2-half {
    margin-left: 2.5rem;
  }

  .xui-lg-ml-3 {
    margin-left: 3rem;
  }

  .xui-lg-ml-3-half {
    margin-left: 3.5rem;
  }

  .xui-lg-ml-4 {
    margin-left: 4rem;
  }

  .xui-lg-ml-4-half {
    margin-left: 4.5rem;
  }

  .xui-lg-ml-5 {
    margin-left: 5rem;
  }

  .xui-lg-ml-5-half {
    margin-left: 5.5rem;
  }

  .xui-lg-ml-6 {
    margin-left: 6rem;
  }

  .xui-lg-ml-6-half {
    margin-left: 6.5rem;
  }

  .xui-lg-ml-7 {
    margin-left: 7rem;
  }

  .xui-lg-ml-7-half {
    margin-left: 7.5rem;
  }

  .xui-lg-ml-8 {
    margin-left: 8rem;
  }

  .xui-lg-ml-8-half {
    margin-left: 8.5rem;
  }

  .xui-lg-ml-9 {
    margin-left: 9rem;
  }

  .xui-lg-ml-9-half {
    margin-left: 9.5rem;
  }

  .xui-lg-ml-10 {
    margin-left: 10rem;
  }

  .xui-lg-mx-none {
    margin-left: 0;
    margin-right: 0;
  }

  .xui-lg-mx-auto {
    margin-left: auto;
    margin-right: auto;
  }

  .xui-lg-mx-half {
    margin-left: .5rem;
    margin-right: .5rem;
  }

  .xui-lg-mx-1 {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .xui-lg-mx-1-half {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }

  .xui-lg-mx-2 {
    margin-left: 2rem;
    margin-right: 2rem;
  }

  .xui-lg-mx-2-half {
    margin-left: 2.5rem;
    margin-right: 2.5rem;
  }

  .xui-lg-mx-3 {
    margin-left: 3rem;
    margin-right: 3rem;
  }

  .xui-lg-mx-3-half {
    margin-left: 3.5rem;
    margin-right: 3.5rem;
  }

  .xui-lg-mx-4 {
    margin-left: 4rem;
    margin-right: 4rem;
  }

  .xui-lg-mx-4-half {
    margin-left: 4.5rem;
    margin-right: 4.5rem;
  }

  .xui-lg-mx-5 {
    margin-left: 5rem;
    margin-right: 5rem;
  }

  .xui-lg-mx-5-half {
    margin-left: 5.5rem;
    margin-right: 5.5rem;
  }

  .xui-lg-mx-6 {
    margin-left: 6rem;
    margin-right: 6rem;
  }

  .xui-lg-mx-6-half {
    margin-left: 6.5rem;
    margin-right: 6.5rem;
  }

  .xui-lg-mx-7 {
    margin-left: 7rem;
    margin-right: 7rem;
  }

  .xui-lg-mx-7-half {
    margin-left: 7.5rem;
    margin-right: 7.5rem;
  }

  .xui-lg-mx-8 {
    margin-left: 8rem;
    margin-right: 8rem;
  }

  .xui-lg-mx-8-half {
    margin-left: 8.5rem;
    margin-right: 8.5rem;
  }

  .xui-lg-mx-9 {
    margin-left: 9rem;
    margin-right: 9rem;
  }

  .xui-lg-mx-9-half {
    margin-left: 9.5rem;
    margin-right: 9.5rem;
  }

  .xui-lg-mx-10 {
    margin-left: 10rem;
    margin-right: 10rem;
  }

  .xui-lg-my-none {
    margin-top: 0;
    margin-bottom: 0;
  }

  .xui-lg-my-auto {
    margin-top: auto;
    margin-bottom: auto;
  }

  .xui-lg-my-half {
    margin-top: .5rem;
    margin-bottom: .5rem;
  }

  .xui-lg-my-1 {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .xui-lg-my-1-half {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .xui-lg-my-2 {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .xui-lg-my-2-half {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
  }

  .xui-lg-my-3 {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }

  .xui-lg-my-3-half {
    margin-top: 3.5rem;
    margin-bottom: 3.5rem;
  }

  .xui-lg-my-4 {
    margin-top: 4rem;
    margin-bottom: 4rem;
  }

  .xui-lg-my-4-half {
    margin-top: 4.5rem;
    margin-bottom: 4.5rem;
  }

  .xui-lg-my-5 {
    margin-top: 5rem;
    margin-bottom: 5rem;
  }

  .xui-lg-my-5-half {
    margin-top: 5.5rem;
    margin-bottom: 5.5rem;
  }

  .xui-lg-my-6 {
    margin-top: 6rem;
    margin-bottom: 6rem;
  }

  .xui-lg-my-6-half {
    margin-top: 6.5rem;
    margin-bottom: 6.5rem;
  }

  .xui-lg-my-7 {
    margin-top: 7rem;
    margin-bottom: 7rem;
  }

  .xui-lg-my-7-half {
    margin-top: 7.5rem;
    margin-bottom: 7.5rem;
  }

  .xui-lg-my-8 {
    margin-top: 8rem;
    margin-bottom: 8rem;
  }

  .xui-lg-my-8-half {
    margin-top: 8.5rem;
    margin-bottom: 8.5rem;
  }

  .xui-lg-my-9 {
    margin-top: 9rem;
    margin-bottom: 9rem;
  }

  .xui-lg-my-9-half {
    margin-top: 9.5rem;
    margin-bottom: 9.5rem;
  }

  .xui-lg-my-10 {
    margin-top: 10rem;
    margin-bottom: 10rem;
  }





  /*Paddings*/
  .xui-lg-p-none {
    padding: 0;
  }

  .xui-lg-p-auto {
    padding: auto;
  }

  .xui-lg-p-inherit {
    padding: inherit;
  }

  .xui-lg-p-unset {
    padding: unset;
  }

  .xui-lg-p-all {
    padding: all;
  }

  .xui-lg-p-initial {
    padding: initial;
  }

  .xui-lg-p-half {
    padding: .5rem;
  }

  .xui-lg-p-1 {
    padding: 1rem;
  }

  .xui-lg-p-1-half {
    padding: 1.5rem;
  }

  .xui-lg-p-2 {
    padding: 2rem;
  }

  .xui-lg-p-2-half {
    padding: 2.5rem;
  }

  .xui-lg-p-3 {
    padding: 3rem;
  }

  .xui-lg-p-3-half {
    padding: 3.5rem;
  }

  .xui-lg-p-4 {
    padding: 4rem;
  }

  .xui-lg-p-4-half {
    padding: 4.5rem;
  }

  .xui-lg-p-5 {
    padding: 5rem;
  }

  .xui-lg-p-5-half {
    padding: 5.5rem;
  }

  .xui-lg-p-6 {
    padding: 6rem;
  }

  .xui-lg-p-6-half {
    padding: 6.5rem;
  }

  .xui-lg-p-7 {
    padding: 7rem;
  }

  .xui-lg-p-7-half {
    padding: 7.5rem;
  }

  .xui-lg-p-8 {
    padding: 8rem;
  }

  .xui-lg-p-8-half {
    padding: 8.5rem;
  }

  .xui-lg-p-9 {
    padding: 9rem;
  }

  .xui-lg-p-9-half {
    padding: 9.5rem;
  }

  .xui-lg-p-10 {
    padding: 10rem;
  }

  .xui-lg-pt-none {
    padding-top: 0;
  }

  .xui-lg-pt-auto {
    padding-top: auto;
  }

  .xui-lg-pt-half {
    padding-top: .5rem;
  }

  .xui-lg-pt-1 {
    padding-top: 1rem;
  }

  .xui-lg-pt-1-half {
    padding-top: 1.5rem;
  }

  .xui-lg-pt-2 {
    padding-top: 2rem;
  }

  .xui-lg-pt-2-half {
    padding-top: 2.5rem;
  }

  .xui-lg-pt-3 {
    padding-top: 3rem;
  }

  .xui-lg-pt-3-half {
    padding-top: 3.5rem;
  }

  .xui-lg-pt-4 {
    padding-top: 4rem;
  }

  .xui-lg-pt-4-half {
    padding-top: 4.5rem;
  }

  .xui-lg-pt-5 {
    padding-top: 5rem;
  }

  .xui-lg-pt-5-half {
    padding-top: 5.5rem;
  }

  .xui-lg-pt-6 {
    padding-top: 6rem;
  }

  .xui-lg-pt-6-half {
    padding-top: 6.5rem;
  }

  .xui-lg-pt-7 {
    padding-top: 7rem;
  }

  .xui-lg-pt-7-half {
    padding-top: 7.5rem;
  }

  .xui-lg-pt-8 {
    padding-top: 8rem;
  }

  .xui-lg-pt-8-half {
    padding-top: 8.5rem;
  }

  .xui-lg-pt-9 {
    padding-top: 9rem;
  }

  .xui-lg-pt-9-half {
    padding-top: 9.5rem;
  }

  .xui-lg-pt-10 {
    padding-top: 10rem;
  }

  .xui-lg-pr-none {
    padding-right: 0;
  }

  .xui-lg-pr-auto {
    padding-right: auto;
  }

  .xui-lg-pr-half {
    padding-right: .5rem;
  }

  .xui-lg-pr-1 {
    padding-right: 1rem;
  }

  .xui-lg-pr-1-half {
    padding-right: 1.5rem;
  }

  .xui-lg-pr-2 {
    padding-right: 2rem;
  }

  .xui-lg-pr-2-half {
    padding-right: 2.5rem;
  }

  .xui-lg-pr-3 {
    padding-right: 3rem;
  }

  .xui-lg-pr-3-half {
    padding-right: 3.5rem;
  }

  .xui-lg-pr-4 {
    padding-right: 4rem;
  }

  .xui-lg-pr-4-half {
    padding-right: 4.5rem;
  }

  .xui-lg-pr-5 {
    padding-right: 5rem;
  }

  .xui-lg-pr-5-half {
    padding-right: 5.5rem;
  }

  .xui-lg-pr-6 {
    padding-right: 6rem;
  }

  .xui-lg-pr-6-half {
    padding-right: 6.5rem;
  }

  .xui-lg-pr-7 {
    padding-right: 7rem;
  }

  .xui-lg-pr-7-half {
    padding-right: 7.5rem;
  }

  .xui-lg-pr-8 {
    padding-right: 8rem;
  }

  .xui-lg-pr-8-half {
    padding-right: 8.5rem;
  }

  .xui-lg-pr-9 {
    padding-right: 9rem;
  }

  .xui-lg-pr-9-half {
    padding-right: 9.5rem;
  }

  .xui-lg-pr-10 {
    padding-right: 10rem;
  }

  .xui-lg-pb-none {
    padding-bottom: 0;
  }

  .xui-lg-pb-auto {
    padding-bottom: auto;
  }

  .xui-lg-pb-half {
    padding-bottom: .5rem;
  }

  .xui-lg-pb-1 {
    padding-bottom: 1rem;
  }

  .xui-lg-pb-1-half {
    padding-bottom: 1.5rem;
  }

  .xui-lg-pb-2 {
    padding-bottom: 2rem;
  }

  .xui-lg-pb-2-half {
    padding-bottom: 2.5rem;
  }

  .xui-lg-pb-3 {
    padding-bottom: 3rem;
  }

  .xui-lg-pb-3-half {
    padding-bottom: 3.5rem;
  }

  .xui-lg-pb-4 {
    padding-bottom: 4rem;
  }

  .xui-lg-pb-4-half {
    padding-bottom: 4.5rem;
  }

  .xui-lg-pb-5 {
    padding-bottom: 5rem;
  }

  .xui-lg-pb-5-half {
    padding-bottom: 5.5rem;
  }

  .xui-lg-pb-6 {
    padding-bottom: 6rem;
  }

  .xui-lg-pb-6-half {
    padding-bottom: 6.5rem;
  }

  .xui-lg-pb-7 {
    padding-bottom: 7rem;
  }

  .xui-lg-pb-7-half {
    padding-bottom: 7.5rem;
  }

  .xui-lg-pb-8 {
    padding-bottom: 8rem;
  }

  .xui-lg-pb-8-half {
    padding-bottom: 8.5rem;
  }

  .xui-lg-pb-9 {
    padding-bottom: 9rem;
  }

  .xui-lg-pb-9-half {
    padding-bottom: 9.5rem;
  }

  .xui-lg-pb-10 {
    padding-bottom: 10rem;
  }

  .xui-lg-pl-none {
    padding-left: 0;
  }

  .xui-lg-pl-auto {
    padding-left: auto;
  }

  .xui-lg-pl-half {
    padding-left: .5rem;
  }

  .xui-lg-pl-1 {
    padding-left: 1rem;
  }

  .xui-lg-pl-1-half {
    padding-left: 1.5rem;
  }

  .xui-lg-pl-2 {
    padding-left: 2rem;
  }

  .xui-lg-pl-2-half {
    padding-left: 2.5rem;
  }

  .xui-lg-pl-3 {
    padding-left: 3rem;
  }

  .xui-lg-pl-3-half {
    padding-left: 3.5rem;
  }

  .xui-lg-pl-4 {
    padding-left: 4rem;
  }

  .xui-lg-pl-4-half {
    padding-left: 4.5rem;
  }

  .xui-lg-pl-5 {
    padding-left: 5rem;
  }

  .xui-lg-pl-5-half {
    padding-left: 5.5rem;
  }

  .xui-lg-pl-6 {
    padding-left: 6rem;
  }

  .xui-lg-pl-6-half {
    padding-left: 6.5rem;
  }

  .xui-lg-pl-7 {
    padding-left: 7rem;
  }

  .xui-lg-pl-7-half {
    padding-left: 7.5rem;
  }

  .xui-lg-pl-8 {
    padding-left: 8rem;
  }

  .xui-lg-pl-8-half {
    padding-left: 8.5rem;
  }

  .xui-lg-pl-9 {
    padding-left: 9rem;
  }

  .xui-lg-pl-9-half {
    padding-left: 9.5rem;
  }

  .xui-lg-pl-10 {
    padding-left: 10rem;
  }

  .xui-lg-px-none {
    padding-left: 0;
    padding-right: 0;
  }

  .xui-lg-px-auto {
    padding-left: auto;
    padding-right: auto;
  }

  .xui-lg-px-half {
    padding-left: .5rem;
    padding-right: .5rem;
  }

  .xui-lg-px-1 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .xui-lg-px-1-half {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .xui-lg-px-2 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .xui-lg-px-2-half {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .xui-lg-px-3 {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .xui-lg-px-3-half {
    padding-left: 3.5rem;
    padding-right: 3.5rem;
  }

  .xui-lg-px-4 {
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .xui-lg-px-4-half {
    padding-left: 4.5rem;
    padding-right: 4.5rem;
  }

  .xui-lg-px-5 {
    padding-left: 5rem;
    padding-right: 5rem;
  }

  .xui-lg-px-5-half {
    padding-left: 5.5rem;
    padding-right: 5.5rem;
  }

  .xui-lg-px-6 {
    padding-left: 6rem;
    padding-right: 6rem;
  }

  .xui-lg-px-6-half {
    padding-left: 6.5rem;
    padding-right: 6.5rem;
  }

  .xui-lg-px-7 {
    padding-left: 7rem;
    padding-right: 7rem;
  }

  .xui-lg-px-7-half {
    padding-left: 7.5rem;
    padding-right: 7.5rem;
  }

  .xui-lg-px-8 {
    padding-left: 8rem;
    padding-right: 8rem;
  }

  .xui-lg-px-8-half {
    padding-left: 8.5rem;
    padding-right: 8.5rem;
  }

  .xui-lg-px-9 {
    padding-left: 9rem;
    padding-right: 9rem;
  }

  .xui-lg-px-9-half {
    padding-left: 9.5rem;
    padding-right: 9.5rem;
  }

  .xui-lg-px-10 {
    padding-left: 10rem;
    padding-right: 10rem;
  }

  .xui-lg-py-none {
    padding-top: 0;
    padding-bottom: 0;
  }

  .xui-lg-py-auto {
    padding-top: auto;
    padding-bottom: auto;
  }

  .xui-lg-py-half {
    padding-top: .5rem;
    padding-bottom: .5rem;
  }

  .xui-lg-py-1 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .xui-lg-py-1-half {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .xui-lg-py-2 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .xui-lg-py-2-half {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .xui-lg-py-3 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .xui-lg-py-3-half {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .xui-lg-py-4 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .xui-lg-py-4-half {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }

  .xui-lg-py-5 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .xui-lg-py-5-half {
    padding-top: 5.5rem;
    padding-bottom: 5.5rem;
  }

  .xui-lg-py-6 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .xui-lg-py-6-half {
    padding-top: 6.5rem;
    padding-bottom: 6.5rem;
  }

  .xui-lg-py-7 {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }

  .xui-lg-py-7-half {
    padding-top: 7.5rem;
    padding-bottom: 7.5rem;
  }

  .xui-lg-py-8 {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .xui-lg-py-8-half {
    padding-top: 8.5rem;
    padding-bottom: 8.5rem;
  }

  .xui-lg-py-9 {
    padding-top: 9rem;
    padding-bottom: 9rem;
  }

  .xui-lg-py-9-half {
    padding-top: 9.5rem;
    padding-bottom: 9.5rem;
  }

  .xui-lg-py-10 {
    padding-top: 10rem;
    padding-bottom: 10rem;
  }




  /*Width & Height*/
  .xui-lg-w-auto {
    width: auto;
  }

  .xui-lg-w-inherit {
    width: inherit;
  }

  .xui-lg-w-initial {
    width: initial;
  }

  .xui-lg-w-max-content {
    width: max-content;
  }

  .xui-lg-w-min-content {
    width: min-content;
  }

  .xui-lg-w-fit-content {
    width: fit-content;
  }

  .xui-lg-h-auto {
    height: auto;
  }

  .xui-lg-h-inherit {
    height: inherit;
  }

  .xui-lg-h-initial {
    height: initial;
  }

  .xui-lg-h-max-content {
    height: max-content;
  }

  .xui-lg-h-min-content {
    height: min-content;
  }

  .xui-lg-h-fit-content {
    height: fit-content;
  }

  .xui-lg-w-5 {
    width: 5px;
  }

  .xui-lg-w-10 {
    width: 10px;
  }

  .xui-lg-w-15 {
    width: 15px;
  }

  .xui-lg-w-20 {
    width: 20px;
  }

  .xui-lg-w-25 {
    width: 25px;
  }

  .xui-lg-w-30 {
    width: 30px;
  }

  .xui-lg-w-35 {
    width: 35px;
  }

  .xui-lg-w-40 {
    width: 40px;
  }

  .xui-lg-w-45 {
    width: 45px;
  }

  .xui-lg-w-50 {
    width: 50px;
  }

  .xui-lg-w-55 {
    width: 55px;
  }

  .xui-lg-w-60 {
    width: 60px;
  }

  .xui-lg-w-65 {
    width: 65px;
  }

  .xui-lg-w-70 {
    width: 70px;
  }

  .xui-lg-w-75 {
    width: 75px;
  }

  .xui-lg-w-80 {
    width: 80px;
  }

  .xui-lg-w-85 {
    width: 85px;
  }

  .xui-lg-w-90 {
    width: 90px;
  }

  .xui-lg-w-95 {
    width: 95px;
  }

  .xui-lg-w-100 {
    width: 100px;
  }

  .xui-lg-w-150 {
    width: 150px;
  }

  .xui-lg-w-200 {
    width: 200px;
  }

  .xui-lg-w-250 {
    width: 250px;
  }

  .xui-lg-w-300 {
    width: 300px;
  }

  .xui-lg-w-350 {
    width: 350px;
  }

  .xui-lg-w-400 {
    width: 400px;
  }

  .xui-lg-w-450 {
    width: 450px;
  }

  .xui-lg-w-500 {
    width: 500px;
  }

  .xui-lg-w-600 {
    width: 600px;
  }

  .xui-lg-w-650 {
    width: 650px;
  }

  .xui-lg-w-700 {
    width: 700px;
  }

  .xui-lg-w-750 {
    width: 750px;
  }

  .xui-lg-w-800 {
    width: 800px;
  }

  .xui-lg-w-850 {
    width: 850px;
  }

  .xui-lg-w-900 {
    width: 900px;
  }

  .xui-lg-w-950 {
    width: 950px;
  }

  .xui-lg-w-1000 {
    width: 1000px;
  }

  .xui-lg-w-fluid-5 {
    width: 5%;
  }

  .xui-lg-w-fluid-10 {
    width: 10%;
  }

  .xui-lg-w-fluid-15 {
    width: 15%;
  }

  .xui-lg-w-fluid-20 {
    width: 20%;
  }

  .xui-lg-w-fluid-25 {
    width: 25%;
  }

  .xui-lg-w-fluid-30 {
    width: 30%;
  }

  .xui-lg-w-fluid-35 {
    width: 35%;
  }

  .xui-lg-w-fluid-40 {
    width: 40%;
  }

  .xui-lg-w-fluid-45 {
    width: 45%;
  }

  .xui-lg-w-fluid-50 {
    width: 50%;
  }

  .xui-lg-w-fluid-55 {
    width: 55%;
  }

  .xui-lg-w-fluid-60 {
    width: 60%;
  }

  .xui-lg-w-fluid-65 {
    width: 65%;
  }

  .xui-lg-w-fluid-70 {
    width: 70%;
  }

  .xui-lg-w-fluid-75 {
    width: 75%;
  }

  .xui-lg-w-fluid-80 {
    width: 80%;
  }

  .xui-lg-w-fluid-85 {
    width: 85%;
  }

  .xui-lg-w-fluid-90 {
    width: 90%;
  }

  .xui-lg-w-fluid-95 {
    width: 95%;
  }

  .xui-lg-w-fluid-100 {
    width: 100%;
  }

  .xui-lg-h-5 {
    height: 5px;
  }

  .xui-lg-h-10 {
    height: 10px;
  }

  .xui-lg-h-15 {
    height: 15px;
  }

  .xui-lg-h-20 {
    height: 20px;
  }

  .xui-lg-h-25 {
    height: 25px;
  }

  .xui-lg-h-30 {
    height: 30px;
  }

  .xui-lg-h-35 {
    height: 35px;
  }

  .xui-lg-h-40 {
    height: 40px;
  }

  .xui-lg-h-45 {
    height: 45px;
  }

  .xui-lg-h-50 {
    height: 50px;
  }

  .xui-lg-h-55 {
    height: 55px;
  }

  .xui-lg-h-60 {
    height: 60px;
  }

  .xui-lg-h-65 {
    height: 65px;
  }

  .xui-lg-h-70 {
    height: 70px;
  }

  .xui-lg-h-75 {
    height: 75px;
  }

  .xui-lg-h-80 {
    height: 80px;
  }

  .xui-lg-h-85 {
    height: 85px;
  }

  .xui-lg-h-90 {
    height: 90px;
  }

  .xui-lg-h-95 {
    height: 95px;
  }

  .xui-lg-h-100 {
    height: 100px;
  }

  .xui-lg-h-150 {
    height: 150px;
  }

  .xui-lg-h-200 {
    height: 200px;
  }

  .xui-lg-h-250 {
    height: 250px;
  }

  .xui-lg-h-300 {
    height: 300px;
  }

  .xui-lg-h-350 {
    height: 350px;
  }

  .xui-lg-h-400 {
    height: 400px;
  }

  .xui-lg-h-450 {
    height: 450px;
  }

  .xui-lg-h-500 {
    height: 500px;
  }

  .xui-lg-h-600 {
    height: 600px;
  }

  .xui-lg-h-650 {
    height: 650px;
  }

  .xui-lg-h-700 {
    height: 700px;
  }

  .xui-lg-h-750 {
    height: 750px;
  }

  .xui-lg-h-800 {
    height: 800px;
  }

  .xui-lg-h-850 {
    height: 850px;
  }

  .xui-lg-h-900 {
    height: 900px;
  }

  .xui-lg-h-950 {
    height: 950px;
  }

  .xui-lg-h-1000 {
    height: 1000px;
  }

  .xui-lg-h-full,
  .xui-lg-h-100vh {
    height: 100vh;
    height: 100dvh;
  }

  .xui-lg-h-fluid-5 {
    height: 5%;
  }

  .xui-lg-h-fluid-10 {
    height: 10%;
  }

  .xui-lg-h-fluid-15 {
    height: 15%;
  }

  .xui-lg-h-fluid-20 {
    height: 20%;
  }

  .xui-lg-h-fluid-25 {
    height: 25%;
  }

  .xui-lg-h-fluid-30 {
    height: 30%;
  }

  .xui-lg-h-fluid-35 {
    height: 35%;
  }

  .xui-lg-h-fluid-40 {
    height: 40%;
  }

  .xui-lg-h-fluid-45 {
    height: 45%;
  }

  .xui-lg-h-fluid-50 {
    height: 50%;
  }

  .xui-lg-h-fluid-55 {
    height: 55%;
  }

  .xui-lg-h-fluid-60 {
    height: 60%;
  }

  .xui-lg-h-fluid-65 {
    height: 65%;
  }

  .xui-lg-h-fluid-70 {
    height: 70%;
  }

  .xui-lg-h-fluid-75 {
    height: 75%;
  }

  .xui-lg-h-fluid-80 {
    height: 80%;
  }

  .xui-lg-h-fluid-85 {
    height: 85%;
  }

  .xui-lg-h-fluid-90 {
    height: 90%;
  }

  .xui-lg-h-fluid-95 {
    height: 95%;
  }

  .xui-lg-h-fluid-100 {
    height: 100%;
  }




  /*Displays*/
  .xui-lg-d-none {
    display: none;
  }

  .xui-lg-d-inline {
    display: inline;
  }

  .xui-lg-d-inline-block {
    display: inline-block;
  }

  .xui-lg-d-block {
    display: block;
  }

  .xui-lg-d-contents {
    display: contents;
  }

  .xui-lg-d-inline-flex {
    display: inline-flex;
  }

  .xui-lg-d-inline-grid {
    display: inline-grid;
  }

  .xui-lg-d-inline-table {
    display: inline-table;
  }

  .xui-lg-d-list-item {
    display: list-item;
  }

  .xui-lg-d-run-in {
    display: run-in;
  }

  .xui-lg-d-table {
    display: table;
  }

  .xui-lg-d-table-caption {
    display: table-caption;
  }

  .xui-lg-d-table-column-group {
    display: table-column-group;
  }

  .xui-lg-d-table-header-group {
    display: table-header-group;
  }

  .xui-lg-d-table-footer-group {
    display: table-footer-group;
  }

  .xui-lg-d-table-row-group {
    display: table-row-group;
  }

  .xui-lg-d-table-cell {
    display: table-cell;
  }

  .xui-lg-d-table-column {
    display: table-column;
  }

  .xui-lg-d-table-row {
    display: table-row;
  }

  .xui-lg-d-initial {
    display: initial;
  }

  .xui-lg-d-inherit {
    display: inherit;
  }

  .xui-lg-d-flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    -webkit-box-align: stretch;
    -moz-box-align: stretch;
    -ms-flex-jc-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
  }

  .xui-lg-d-grid {
    display: grid;
  }





  /* Min/Max Widths & Heights */
  .xui-lg-min-w-50 {
    min-width: 50px !important;
  }

  .xui-lg-min-w-100 {
    min-width: 100px !important;
  }

  .xui-lg-min-w-150 {
    min-width: 150px !important;
  }

  .xui-lg-min-w-200 {
    min-width: 200px !important;
  }

  .xui-lg-min-w-250 {
    min-width: 250px !important;
  }

  .xui-lg-min-w-300 {
    min-width: 300px !important;
  }

  .xui-lg-min-w-350 {
    min-width: 350px !important;
  }

  .xui-lg-min-w-400 {
    min-width: 400px !important;
  }

  .xui-lg-min-w-450 {
    min-width: 450px !important;
  }

  .xui-lg-min-w-500 {
    min-width: 500px !important;
  }

  .xui-lg-min-w-550 {
    min-width: 550px !important;
  }

  .xui-lg-min-w-600 {
    min-width: 600px !important;
  }

  .xui-lg-min-w-650 {
    min-width: 650px !important;
  }

  .xui-lg-min-w-700 {
    min-width: 700px !important;
  }

  .xui-lg-min-w-750 {
    min-width: 750px !important;
  }

  .xui-lg-min-w-800 {
    min-width: 800px !important;
  }

  .xui-lg-min-w-850 {
    min-width: 850px !important;
  }

  .xui-lg-min-w-900 {
    min-width: 900px !important;
  }

  .xui-lg-min-w-950 {
    min-width: 950px !important;
  }

  .xui-lg-min-w-1000 {
    min-width: 1000px !important;
  }

  .xui-lg-min-h-50 {
    min-height: 50px !important;
  }

  .xui-lg-min-h-100 {
    min-height: 100px !important;
  }

  .xui-lg-min-h-150 {
    min-height: 150px !important;
  }

  .xui-lg-min-h-200 {
    min-height: 200px !important;
  }

  .xui-lg-min-h-250 {
    min-height: 250px !important;
  }

  .xui-lg-min-h-300 {
    min-height: 300px !important;
  }

  .xui-lg-min-h-350 {
    min-height: 350px !important;
  }

  .xui-lg-min-h-400 {
    min-height: 400px !important;
  }

  .xui-lg-min-h-450 {
    min-height: 450px !important;
  }

  .xui-lg-min-h-500 {
    min-height: 500px !important;
  }

  .xui-lg-min-h-550 {
    min-height: 550px !important;
  }

  .xui-lg-min-h-600 {
    min-height: 600px !important;
  }

  .xui-lg-min-h-650 {
    min-height: 650px !important;
  }

  .xui-lg-min-h-700 {
    min-height: 700px !important;
  }

  .xui-lg-min-h-750 {
    min-height: 750px !important;
  }

  .xui-lg-min-h-800 {
    min-height: 800px !important;
  }

  .xui-lg-min-h-850 {
    min-height: 850px !important;
  }

  .xui-lg-min-h-900 {
    min-height: 900px !important;
  }

  .xui-lg-min-h-950 {
    min-height: 950px !important;
  }

  .xui-lg-min-h-1000 {
    min-height: 1000px !important;
  }

  .xui-lg-max-w-50 {
    max-width: 50px !important;
  }

  .xui-lg-max-w-100 {
    max-width: 100px !important;
  }

  .xui-lg-max-w-150 {
    max-width: 150px !important;
  }

  .xui-lg-max-w-200 {
    max-width: 200px !important;
  }

  .xui-lg-max-w-250 {
    max-width: 250px !important;
  }

  .xui-lg-max-w-300 {
    max-width: 300px !important;
  }

  .xui-lg-max-w-350 {
    max-width: 350px !important;
  }

  .xui-lg-max-w-400 {
    max-width: 400px !important;
  }

  .xui-lg-max-w-450 {
    max-width: 450px !important;
  }

  .xui-lg-max-w-500 {
    max-width: 500px !important;
  }

  .xui-lg-max-w-550 {
    max-width: 550px !important;
  }

  .xui-lg-max-w-600 {
    max-width: 600px !important;
  }

  .xui-lg-max-w-650 {
    max-width: 650px !important;
  }

  .xui-lg-max-w-700 {
    max-width: 700px !important;
  }

  .xui-lg-max-w-750 {
    max-width: 750px !important;
  }

  .xui-lg-max-w-800 {
    max-width: 800px !important;
  }

  .xui-lg-max-w-850 {
    max-width: 850px !important;
  }

  .xui-lg-max-w-900 {
    max-width: 900px !important;
  }

  .xui-lg-max-w-950 {
    max-width: 950px !important;
  }

  .xui-lg-max-w-1000 {
    max-width: 1000px !important;
  }

  .xui-lg-max-w-1100 {
    max-width: 1100px !important;
  }

  .xui-lg-max-w-1200 {
    max-width: 1200px !important;
  }

  .xui-lg-max-w-1300 {
    max-width: 1300px !important;
  }

  .xui-lg-max-w-1400 {
    max-width: 1400px !important;
  }

  .xui-lg-max-w-1500 {
    max-width: 1500px !important;
  }

  .xui-lg-max-w-1600 {
    max-width: 1600px !important;
  }

  .xui-lg-max-w-1700 {
    max-width: 1700px !important;
  }

  .xui-lg-max-w-1800 {
    max-width: 1800px !important;
  }

  .xui-lg-max-w-1900 {
    max-width: 1900px !important;
  }

  .xui-lg-max-w-2000 {
    max-width: 2000px !important;
  }

  .xui-lg-max-h-50 {
    max-height: 50px !important;
  }

  .xui-lg-max-h-100 {
    max-height: 100px !important;
  }

  .xui-lg-max-h-150 {
    max-height: 150px !important;
  }

  .xui-lg-max-h-200 {
    max-height: 200px !important;
  }

  .xui-lg-max-h-250 {
    max-height: 250px !important;
  }

  .xui-lg-max-h-300 {
    max-height: 300px !important;
  }

  .xui-lg-max-h-350 {
    max-height: 350px !important;
  }

  .xui-lg-max-h-400 {
    max-height: 400px !important;
  }

  .xui-lg-max-h-450 {
    max-height: 450px !important;
  }

  .xui-lg-max-h-500 {
    max-height: 500px !important;
  }

  .xui-lg-max-h-550 {
    max-height: 550px !important;
  }

  .xui-lg-max-h-600 {
    max-height: 600px !important;
  }

  .xui-lg-max-h-650 {
    max-height: 650px !important;
  }

  .xui-lg-max-h-700 {
    max-height: 700px !important;
  }

  .xui-lg-max-h-750 {
    max-height: 750px !important;
  }

  .xui-lg-max-h-800 {
    max-height: 800px !important;
  }

  .xui-lg-max-h-850 {
    max-height: 850px !important;
  }

  .xui-lg-max-h-900 {
    max-height: 900px !important;
  }

  .xui-lg-max-h-950 {
    max-height: 950px !important;
  }

  .xui-lg-max-h-1000 {
    max-height: 1000px !important;
  }





  /*Fonts*/
  .xui-lg-font-w-normal {
    font-weight: normal;
  }

  .xui-lg-font-w-bold {
    font-weight: bold;
  }

  .xui-lg-font-w-bolder {
    font-weight: bolder;
  }

  .xui-lg-font-w-lighter {
    font-weight: lighter;
  }

  .xui-lg-font-w-initial {
    font-weight: initial;
  }

  .xui-lg-font-w-inherit {
    font-weight: inherit;
  }

  .xui-lg-font-w-100 {
    font-weight: 100;
  }

  .xui-lg-font-w-200 {
    font-weight: 200;
  }

  .xui-lg-font-w-300 {
    font-weight: 300;
  }

  .xui-lg-font-w-400 {
    font-weight: 400;
  }

  .xui-lg-font-w-500 {
    font-weight: 500;
  }

  .xui-lg-font-w-600 {
    font-weight: 600;
  }

  .xui-lg-font-w-700 {
    font-weight: 700;
  }

  .xui-lg-font-w-800 {
    font-weight: 800;
  }

  .xui-lg-font-w-900 {
    font-weight: 900;
  }

  .xui-lg-font-sz-xx-small {
    font-size: xx-small;
  }

  .xui-lg-font-sz-x-small {
    font-size: x-small;
  }

  .xui-lg-font-sz-small {
    font-size: small;
  }

  .xui-lg-font-sz-x-large {
    font-size: x-large;
  }

  .xui-lg-font-sz-xx-large {
    font-size: xx-large;
  }

  .xui-lg-font-sz-smaller {
    font-size: smaller;
  }

  .xui-lg-font-sz-larger {
    font-size: larger;
  }

  .xui-lg-font-style-normal {
    font-style: normal;
  }

  .xui-lg-font-style-oblique {
    font-style: oblique;
  }

  .xui-lg-font-style-italic {
    font-style: italic;
  }

  .xui-lg-font-style-initial {
    font-style: initial;
  }

  .xui-lg-font-style-inherit {
    font-style: inherit;
  }

  .xui-lg-font-sz-initial {
    font-size: initial;
  }

  .xui-lg-font-sz-inherit {
    font-size: inherit;
  }

  .xui-lg-font-sz-50 {
    font-size: 50%;
  }

  .xui-lg-font-sz-55 {
    font-size: 55%;
  }

  .xui-lg-font-sz-60 {
    font-size: 60%;
  }

  .xui-lg-font-sz-65 {
    font-size: 65%;
  }

  .xui-lg-font-sz-70 {
    font-size: 70%;
  }

  .xui-lg-font-sz-75 {
    font-size: 75%;
  }

  .xui-lg-font-sz-80 {
    font-size: 80%;
  }

  .xui-lg-font-sz-85 {
    font-size: 85%;
  }

  .xui-lg-font-sz-90 {
    font-size: 90%;
  }

  .xui-lg-font-sz-95 {
    font-size: 95%;
  }

  .xui-lg-font-sz-100 {
    font-size: 100%;
  }

  .xui-lg-font-sz-105 {
    font-size: 105%;
  }

  .xui-lg-font-sz-110 {
    font-size: 110%;
  }

  .xui-lg-font-sz-115 {
    font-size: 115%;
  }

  .xui-lg-font-sz-120 {
    font-size: 120%;
  }

  .xui-lg-font-sz-125 {
    font-size: 125%;
  }

  .xui-lg-font-sz-130 {
    font-size: 130%;
  }

  .xui-lg-font-sz-135 {
    font-size: 135%;
  }

  .xui-lg-font-sz-140 {
    font-size: 140%;
  }

  .xui-lg-font-sz-145 {
    font-size: 145%;
  }

  .xui-lg-font-sz-150 {
    font-size: 150%;
  }

  .xui-lg-font-sz-155 {
    font-size: 155%;
  }

  .xui-lg-font-sz-160 {
    font-size: 160%;
  }

  .xui-lg-font-sz-165 {
    font-size: 165%;
  }

  .xui-lg-font-sz-170 {
    font-size: 170%;
  }

  .xui-lg-font-sz-175 {
    font-size: 175%;
  }

  .xui-lg-font-sz-180 {
    font-size: 180%;
  }

  .xui-lg-font-sz-185 {
    font-size: 185%;
  }

  .xui-lg-font-sz-190 {
    font-size: 190%;
  }

  .xui-lg-font-sz-195 {
    font-size: 195%;
  }

  .xui-lg-font-sz-200 {
    font-size: 200%;
  }

  .xui-lg-font-sz-205 {
    font-size: 205%;
  }

  .xui-lg-font-sz-210 {
    font-size: 210%;
  }

  .xui-lg-font-sz-215 {
    font-size: 215%;
  }

  .xui-lg-font-sz-220 {
    font-size: 220%;
  }

  .xui-lg-font-sz-225 {
    font-size: 225%;
  }

  .xui-lg-font-sz-230 {
    font-size: 230%;
  }

  .xui-lg-font-sz-235 {
    font-size: 235%;
  }

  .xui-lg-font-sz-240 {
    font-size: 240%;
  }

  .xui-lg-font-sz-245 {
    font-size: 245%;
  }

  .xui-lg-font-sz-250 {
    font-size: 250%;
  }

  .xui-lg-font-sz-300 {
    font-size: 300%;
  }

  .xui-lg-font-sz-350 {
    font-size: 350%;
  }

  .xui-lg-font-sz-400 {
    font-size: 400%;
  }

  .xui-lg-font-sz-450 {
    font-size: 450%;
  }

  .xui-lg-font-sz-500 {
    font-size: 500%;
  }

  .xui-lg-font-sz-550 {
    font-size: 550%;
  }

  .xui-lg-font-sz-600 {
    font-size: 600%;
  }

  .xui-lg-font-sz-650 {
    font-size: 650%;
  }

  .xui-lg-font-sz-700 {
    font-size: 700%;
  }

  .xui-lg-font-sz-750 {
    font-size: 750%;
  }

  .xui-lg-font-sz-800 {
    font-size: 800%;
  }

  .xui-lg-font-sz-850 {
    font-size: 850%;
  }

  .xui-lg-font-sz-900 {
    font-size: 900%;
  }

  .xui-lg-font-sz-950 {
    font-size: 950%;
  }

  .xui-lg-font-sz-1000 {
    font-size: 1000%;
  }




  /*Flexes*/
  .xui-lg-flex-jc-start,
  .xui-lg-flex-jc-flex-start {
    justify-content: flex-start;
  }

  .xui-lg-flex-jc-end,
  .xui-lg-flex-jc-flex-end {
    justify-content: flex-end;
  }

  .xui-lg-flex-jc-space-between {
    justify-content: space-between;
  }

  .xui-lg-flex-jc-space-around {
    justify-content: space-around;
  }

  .xui-lg-flex-jc-space-evenly {
    justify-content: space-evenly;
  }

  .xui-lg-flex-jc-center {
    justify-content: center;
  }

  .xui-lg-flex-jc-initial {
    justify-content: initial;
  }

  .xui-lg-flex-jc-inherit {
    justify-content: inherit;
  }

  .xui-lg-flex-ai-stretch {
    align-items: stretch;
  }

  .xui-lg-flex-ai-center {
    align-items: center;
  }

  .xui-lg-flex-ai-flex-start {
    align-items: flex-start;
  }

  .xui-lg-flex-ai-flex-end {
    align-items: flex-end;
  }

  .xui-lg-flex-ai-baseline {
    align-items: baseline;
  }

  .xui-lg-flex-ai-initial {
    align-items: initial;
  }

  .xui-lg-flex-ai-inherit {
    align-items: inherit;
  }

  .xui-lg-flex-wrap-wrap {
    flex-wrap: wrap;
  }

  .xui-lg-flex-wrap-nowrap {
    flex-wrap: nowrap;
  }

  .xui-lg-flex-wrap-wrap-reverse {
    flex-wrap: wrap-reverse;
  }

  .xui-lg-flex-wrap-inherit {
    flex-wrap: inherit;
  }

  .xui-lg-flex-wrap-initial {
    flex-wrap: initial;
  }

  .xui-lg-flex-dir-row {
    flex-direction: row;
  }

  .xui-lg-flex-dir-row-reverse {
    flex-direction: row-reverse;
  }

  .xui-lg-flex-dir-column {
    flex-direction: column;
  }

  .xui-lg-flex-dir-column-reverse {
    flex-direction: column-reverse;
  }

  .xui-lg-flex-dir-initial {
    flex-direction: initial;
  }

  .xui-lg-flex-dir-inherit {
    flex-direction: inherit;
  }

  .xui-lg-flex-grow-1 {
    flex-grow: 1;
  }

  .xui-lg-flex-grow-2 {
    flex-grow: 2;
  }

  .xui-lg-flex-grow-3 {
    flex-grow: 3;
  }

  .xui-lg-flex-grow-4 {
    flex-grow: 4;
  }

  .xui-lg-flex-grow-5 {
    flex-grow: 5;
  }

  .xui-lg-flex-grow-initial {
    flex-grow: initial;
  }

  .xui-lg-flex-grow-inherit {
    flex-grow: inherit;
  }

  .xui-lg-flex-shrink-1 {
    flex-shrink: 1;
  }

  .xui-lg-flex-shrink-2 {
    flex-shrink: 2;
  }

  .xui-lg-flex-shrink-3 {
    flex-shrink: 3;
  }

  .xui-lg-flex-shrink-4 {
    flex-shrink: 4;
  }

  .xui-lg-flex-shrink-5 {
    flex-shrink: 5;
  }

  .xui-lg-flex-shrink-initial {
    flex-shrink: initial;
  }

  .xui-lg-flex-shrink-inherit {
    flex-shrink: inherit;
  }




  /*Images*/
  .xui-lg-img-15 {
    display: block;
    max-width: 15px;
    width: 100%;
  }

  .xui-lg-img-20 {
    display: block;
    max-width: 20px;
    width: 100%;
  }

  .xui-lg-img-25 {
    display: block;
    max-width: 25px;
    width: 100%;
  }

  .xui-lg-img-30 {
    display: block;
    max-width: 30px;
    width: 100%;
  }

  .xui-lg-img-35 {
    display: block;
    max-width: 35px;
    width: 100%;
  }

  .xui-lg-img-40 {
    display: block;
    max-width: 40px;
    width: 100%;
  }

  .xui-lg-img-45 {
    display: block;
    max-width: 45px;
    width: 100%;
  }

  .xui-lg-img-50 {
    display: block;
    max-width: 50px;
    width: 100%;
  }

  .xui-lg-img-100 {
    display: block;
    max-width: 100px;
    width: 100%;
  }

  .xui-lg-img-150 {
    display: block;
    max-width: 150px;
    width: 100%;
  }

  .xui-lg-img-200 {
    display: block;
    max-width: 200px;
    width: 100%;
  }

  .xui-lg-img-250 {
    display: block;
    max-width: 250px;
    width: 100%;
  }

  .xui-lg-img-300 {
    display: block;
    max-width: 300px;
    width: 100%;
  }

  .xui-lg-img-350 {
    display: block;
    max-width: 350px;
    width: 100%;
  }

  .xui-lg-img-400 {
    display: block;
    max-width: 400px;
    width: 100%;
  }

  .xui-lg-img-450 {
    display: block;
    max-width: 450px;
    width: 100%;
  }

  .xui-lg-img-500 {
    display: block;
    max-width: 500px;
    width: 100%;
  }

  .xui-lg-img-550 {
    display: block;
    max-width: 550px;
    width: 100%;
  }

  .xui-lg-img-600 {
    display: block;
    max-width: 600px;
    width: 100%;
  }

  .xui-lg-img-650 {
    display: block;
    max-width: 650px;
    width: 100%;
  }

  .xui-lg-img-700 {
    display: block;
    max-width: 700px;
    width: 100%;
  }

  .xui-lg-img-750 {
    display: block;
    max-width: 750px;
    width: 100%;
  }

  .xui-lg-img-800 {
    display: block;
    max-width: 800px;
    width: 100%;
  }

  .xui-lg-img-850 {
    display: block;
    max-width: 850px;
    width: 100%;
  }

  .xui-lg-img-900 {
    display: block;
    max-width: 900px;
    width: 100%;
  }

  .xui-lg-img-950 {
    display: block;
    max-width: 950px;
    width: 100%;
  }

  .xui-lg-img-1000 {
    display: block;
    max-width: 1000px;
    width: 100%;
  }

  .xui-lg-img-responsive {
    display: block;
    width: 100%;
  }




  /* Modals */
  .xui-lg-modal-center {
    justify-content: center;
    align-items: center;
  }

  .xui-lg-modal-top-left {
    justify-content: flex-start;
    align-items: flex-start;
  }

  .xui-lg-modal-top-right {
    justify-content: flex-end;
    align-items: flex-start;
  }

  .xui-lg-modal-bottom-left {
    justify-content: flex-start;
    align-items: flex-end;
  }

  .xui-lg-modal-bottom-right {
    justify-content: flex-end;
    align-items: flex-end;
  }

  .xui-lg-modal-bottom-center {
    justify-content: center;
    align-items: flex-end;
  }




  /*Containers Spacing*/
  .xui-container {
    max-width: 1024px;
    padding-left: 50px;
    padding-right: 50px;
  }

  .xui-left-fluid {
    left: 75px;
  }

  .xui-right-fluid {
    right: 75px;
  }

}





/*Extra large devices (large desktops, 1440px and up)*/
@media screen and (min-width: 1440px) {

  .xui-xl-z-index-auto {
    z-index: auto;
  }

  .xui-xl-z-index-initial {
    z-index: initial;
  }

  .xui-xl-z-index-inherit {
    z-index: inherit;
  }

  .xui-xl-z-index-1 {
    z-index: 1;
  }

  .xui-xl-z-index-1 {
    z-index: 1;
  }

  .xui-xl-z-index-2 {
    z-index: 2;
  }

  .xui-xl-z-index-3 {
    z-index: 3;
  }

  .xui-xl-z-index-4 {
    z-index: 4;
  }

  .xui-xl-z-index-5 {
    z-index: 5;
  }

  .xui-xl-z-index-6 {
    z-index: 6;
  }

  .xui-xl-z-index-7 {
    z-index: 7;
  }

  .xui-xl-z-index-8 {
    z-index: 8;
  }

  .xui-xl-z-index-9 {
    z-index: 9;
  }

  .xui-xl-z-index-10 {
    z-index: 10;
  }

  .xui-xl-z-index--1 {
    z-index: -1;
  }

  .xui-xl-z-index--1 {
    z-index: -1;
  }

  .xui-xl-z-index--2 {
    z-index: -2;
  }

  .xui-xl-z-index--3 {
    z-index: -3;
  }

  .xui-xl-z-index--4 {
    z-index: -4;
  }

  .xui-xl-z-index--5 {
    z-index: -5;
  }

  .xui-xl-z-index--6 {
    z-index: -6;
  }

  .xui-xl-z-index--7 {
    z-index: -7;
  }

  .xui-xl-z-index--8 {
    z-index: -8;
  }

  .xui-xl-z-index--9 {
    z-index: -9;
  }

  .xui-xl-z-index--10 {
    z-index: -10;
  }



  /*Columns*/
  .xui-xl-columns-auto {
    columns: auto;
  }

  .xui-xl-columns-initial {
    columns: initial;
  }

  .xui-xl-columns-inherit {
    columns: inherit;
  }

  .xui-xl-column-width-auto {
    column-width: auto;
  }

  .xui-xl-column-width-inherit {
    column-width: inherit;
  }

  .xui-xl-column-width-initial {
    column-width: initial;
  }

  .xui-xl-column-count-1 {
    column-count: 1;
  }

  .xui-xl-column-count-2 {
    column-count: 2;
  }

  .xui-xl-column-count-3 {
    column-count: 3;
  }

  .xui-xl-column-count-4 {
    column-count: 4;
  }

  .xui-xl-column-count-5 {
    column-count: 5;
  }

  .xui-xl-column-count-6 {
    column-count: 6;
  }

  .xui-xl-column-count-7 {
    column-count: 7;
  }

  .xui-xl-column-count-8 {
    column-count: 8;
  }

  .xui-xl-column-count-9 {
    column-count: 9;
  }

  .xui-xl-column-count-10 {
    column-count: 10;
  }

  .xui-xl-column-count-11 {
    column-count: 11;
  }

  .xui-xl-column-count-12 {
    column-count: 12;
  }

  .xui-xl-column-fill-balance {
    column-fill: balance;
  }

  .xui-xl-column-fill-auto {
    column-fill: auto;
  }

  .xui-xl-column-fill-initial {
    column-fill: initial;
  }

  .xui-xl-column-fill-inherit {
    column-fill: inherit;
  }

  .xui-xl-column-gap-normal {
    column-gap: normal;
  }

  .xui-xl-column-gap-initial {
    column-gap: initial;
  }

  .xui-xl-column-gap-inherit {
    column-gap: inherit;
  }

  .xui-xl-column-gap-half {
    column-gap: .5rem;
  }

  .xui-xl-column-gap-1 {
    column-gap: 1rem;
  }

  .xui-xl-column-gap-1-half {
    column-gap: 1.5rem;
  }

  .xui-xl-column-gap-2 {
    column-gap: 2rem;
  }

  .xui-xl-column-gap-2-half {
    column-gap: 2.5rem;
  }

  .xui-xl-column-gap-3 {
    column-gap: 3rem;
  }

  .xui-xl-column-gap-3-half {
    column-gap: 3.5rem;
  }

  .xui-xl-column-gap-4 {
    column-gap: 4rem;
  }

  .xui-xl-column-gap-4-half {
    column-gap: 4.5rem;
  }

  .xui-xl-column-gap-5 {
    column-gap: 5rem;
  }

  .xui-xl-column-span-none {
    column-span: none;
  }

  .xui-xl-column-span-all {
    column-span: all;
  }

  .xui-xl-column-span-initial {
    column-span: initial;
  }

  .xui-xl-column-span-inherit {
    column-span: inherit;
  }




  /* Rows */
  .xui-xl-row-gap-normal {
    row-gap: normal;
  }

  .xui-xl-row-gap-initial {
    row-gap: initial;
  }

  .xui-xl-row-gap-inherit {
    row-gap: inherit;
  }

  .xui-xl-row-gap-half {
    row-gap: .5rem;
  }

  .xui-xl-row-gap-1 {
    row-gap: 1rem;
  }

  .xui-xl-row-gap-1-half {
    row-gap: 1.5rem;
  }

  .xui-xl-row-gap-2 {
    row-gap: 2rem;
  }

  .xui-xl-row-gap-2-half {
    row-gap: 2.5rem;
  }

  .xui-xl-row-gap-3 {
    row-gap: 3rem;
  }

  .xui-xl-row-gap-3-half {
    row-gap: 3.5rem;
  }

  .xui-xl-row-gap-4 {
    row-gap: 4rem;
  }

  .xui-xl-row-gap-4-half {
    row-gap: 4.5rem;
  }

  .xui-xl-row-gap-5 {
    row-gap: 5rem;
  }





  /*Rows & Columns*/
  .xui-xl-col-1 {
    flex-basis: 8.3%;
  }

  .xui-xl-col-2 {
    flex-basis: 16.66%;
  }

  .xui-xl-col-3 {
    flex-basis: 25%;
  }

  .xui-xl-col-4 {
    flex-basis: 33.33%;
  }

  .xui-xl-col-5 {
    flex-basis: 41.66%;
  }

  .xui-xl-col-6 {
    flex-basis: 50%;
  }

  .xui-xl-col-7 {
    flex-basis: 58.33%;
  }

  .xui-xl-col-8 {
    flex-basis: 66.66%;
  }

  .xui-xl-col-9 {
    flex-basis: 75%;
  }

  .xui-xl-col-10 {
    flex-basis: 83.33%;
  }

  .xui-xl-col-11 {
    flex-basis: 91.66%;
  }

  .xui-xl-col-12 {
    flex-basis: 100%;
  }





  /*Line Heights & Letter Spacings*/
  .xui-xl-line-height-half {
    line-height: .5rem;
  }

  .xui-xl-line-height-1 {
    line-height: 1rem;
  }

  .xui-xl-line-height-1-half {
    line-height: 1.5rem;
  }

  .xui-xl-line-height-2 {
    line-height: 2rem;
  }

  .xui-xl-line-height-2-half {
    line-height: 2.5rem;
  }

  .xui-xl-line-height-3 {
    line-height: 3rem;
  }

  .xui-xl-line-height-3-half {
    line-height: 3.5rem;
  }

  .xui-xl-line-height-4 {
    line-height: 4rem;
  }

  .xui-xl-line-height-4-half {
    line-height: 4.5rem;
  }

  .xui-xl-line-height-5 {
    line-height: 5rem;
  }

  .xui-xl-line-height-5-half {
    line-height: 5.5rem;
  }

  .xui-xl-line-height-6 {
    line-height: 6rem;
  }

  .xui-xl-line-height-6-half {
    line-height: 6.5rem;
  }

  .xui-xl-line-height-7 {
    line-height: 7rem;
  }

  .xui-xl-line-height-7-half {
    line-height: 7.5rem;
  }

  .xui-xl-line-height-8 {
    line-height: 8rem;
  }

  .xui-xl-line-height-8-half {
    line-height: 8.5rem;
  }

  .xui-xl-line-height-9 {
    line-height: 9rem;
  }

  .xui-xl-line-height-9-half {
    line-height: 9.5rem;
  }

  .xui-xl-line-height-10 {
    line-height: 10rem;
  }

  .xui-xl-line-height-normal {
    line-height: normal;
  }

  .xui-xl-line-height-inherit {
    line-height: inherit;
  }

  .xui-xl-line-height-initial {
    line-height: initial;
  }

  .xui-xl-letter-spacing-half {
    letter-spacing: .5px;
  }

  .xui-xl-letter-spacing-1 {
    letter-spacing: 1px;
  }

  .xui-xl-letter-spacing-1-half {
    letter-spacing: .15px;
  }

  .xui-xl-letter-spacing-2 {
    letter-spacing: 2px;
  }

  .xui-xl-letter-spacing-2-half {
    letter-spacing: 2.5px;
  }

  .xui-xl-letter-spacing-3 {
    letter-spacing: 3px;
  }

  .xui-xl-letter-spacing-3-half {
    letter-spacing: 3.5px;
  }

  .xui-xl-letter-spacing-4 {
    letter-spacing: 4px;
  }

  .xui-xl-letter-spacing-4-half {
    letter-spacing: 4.5px;
  }

  .xui-xl-letter-spacing-5 {
    letter-spacing: 5px;
  }

  .xui-xl-letter-spacing-normal {
    letter-spacing: normal;
  }

  .xui-xl-letter-spacing-inherit {
    letter-spacing: inherit;
  }

  .xui-xl-letter-spacing-initial {
    letter-spacing: initial;
  }





  /*Borders*/
  .xui-xl-bdr-rad-initial {
    border-radius: initial;
  }

  .xui-xl-bdr-rad-inherit {
    border-radius: inherit;
  }

  .xui-xl-bdr-rad-half {
    border-radius: .5rem;
  }

  .xui-xl-bdr-rad-1 {
    border-radius: 1rem;
  }

  .xui-xl-bdr-rad-1-half {
    border-radius: 1.5rem;
  }

  .xui-xl-bdr-rad-2 {
    border-radius: 2rem;
  }

  .xui-xl-bdr-rad-2-half {
    border-radius: 2.5rem;
  }

  .xui-xl-bdr-rad-3 {
    border-radius: 3rem;
  }

  .xui-xl-bdr-rad-3-half {
    border-radius: 3.5rem;
  }

  .xui-xl-bdr-rad-4 {
    border-radius: 4rem;
  }

  .xui-xl-bdr-rad-4-half {
    border-radius: 4.5rem;
  }

  .xui-xl-bdr-rad-5 {
    border-radius: 5rem;
  }

  .xui-xl-bdr-rad-5-half {
    border-radius: 5.5rem;
  }

  .xui-xl-bdr-rad-6 {
    border-radius: 6rem;
  }

  .xui-xl-bdr-rad-6-half {
    border-radius: 6.5rem;
  }

  .xui-xl-bdr-rad-7 {
    border-radius: 7rem;
  }

  .xui-xl-bdr-rad-7-half {
    border-radius: 7.5rem;
  }

  .xui-xl-bdr-rad-8 {
    border-radius: 8rem;
  }

  .xui-xl-bdr-rad-8-half {
    border-radius: 8.5rem;
  }

  .xui-xl-bdr-rad-9 {
    border-radius: 9rem;
  }

  .xui-xl-bdr-rad-9-half {
    border-radius: 9.5rem;
  }

  .xui-xl-bdr-rad-10 {
    border-radius: 10rem;
  }

  .xui-xl-bdr-rad-circle,
  .xui-xl-bdr-rad-round {
    border-radius: 50%;
  }

  .xui-xl-bdr-w-medium,
  .xui-xl-bdr-width-medium {
    border-width: medium;
  }

  .xui-xl-bdr-w-thin,
  .xui-xl-bdr-width-thin {
    border-width: thin;
  }

  .xui-xl-bdr-w-thick,
  .xui-xl-bdr-width-thick {
    border-width: thick;
  }

  .xui-xl-bdr-w-initial,
  .xui-xl-bdr-width-initial {
    border-width: initial;
  }

  .xui-xl-bdr-w-inherit,
  .xui-xl-bdr-width-inherit {
    border-width: inherit;
  }

  .xui-xl-bdr-w-1,
  .xui-xl-bdr-width-1 {
    border-width: 1px !important;
  }

  .xui-xl-bdr-w-2,
  .xui-xl-bdr-width-2 {
    border-width: 2px !important;
  }

  .xui-xl-bdr-w-3,
  .xui-xl-bdr-width-3 {
    border-width: 3px !important;
  }

  .xui-xl-bdr-w-4,
  .xui-xl-bdr-width-4 {
    border-width: 4px !important;
  }

  .xui-xl-bdr-w-5,
  .xui-xl-bdr-width-5 {
    border-width: 5px !important;
  }

  .xui-xl-bdr-w-6,
  .xui-xl-bdr-width-6 {
    border-width: 6px !important;
  }

  .xui-xl-bdr-w-7,
  .xui-xl-bdr-width-7 {
    border-width: 7px !important;
  }

  .xui-xl-bdr-w-8,
  .xui-xl-bdr-width-8 {
    border-width: 8px !important;
  }

  .xui-xl-bdr-w-9,
  .xui-xl-bdr-width-9 {
    border-width: 9px !important;
  }

  .xui-xl-bdr-w-10,
  .xui-xl-bdr-width-10 {
    border-width: 10px !important;
  }

  .xui-xl-bdr-w-11,
  .xui-xl-bdr-width-11 {
    border-width: 11px !important;
  }

  .xui-xl-bdr-w-12,
  .xui-xl-bdr-width-12 {
    border-width: 12px !important;
  }

  .xui-xl-bdr-w-13,
  .xui-xl-bdr-width-13 {
    border-width: 13px !important;
  }

  .xui-xl-bdr-w-14,
  .xui-xl-bdr-width-14 {
    border-width: 14px !important;
  }

  .xui-xl-bdr-w-15,
  .xui-xl-bdr-width-15 {
    border-width: 15px !important;
  }

  .xui-xl-bdr-w-16,
  .xui-xl-bdr-width-16 {
    border-width: 16px !important;
  }

  .xui-xl-bdr-w-17,
  .xui-xl-bdr-width-17 {
    border-width: 17px !important;
  }

  .xui-xl-bdr-w-18,
  .xui-xl-bdr-width-18 {
    border-width: 18px !important;
  }

  .xui-xl-bdr-w-19,
  .xui-xl-bdr-width-19 {
    border-width: 19px !important;
  }

  .xui-xl-bdr-w-20,
  .xui-xl-bdr-width-20 {
    border-width: 20px !important;
  }

  .xui-xl-bdr-s-none,
  .xui-xl-bdr-style-none {
    border-style: none !important;
  }

  .xui-xl-bdr-s-hidden,
  .xui-xl-bdr-style-hidden {
    border-style: hidden !important;
  }

  .xui-xl-bdr-s-dotted,
  .xui-xl-bdr-style-dotted {
    border-style: dotted !important;
  }

  .xui-xl-bdr-s-dashed,
  .xui-xl-bdr-style-dashed {
    border-style: dashed !important;
  }

  .xui-xl-bdr-s-solid,
  .xui-xl-bdr-style-solid {
    border-style: solid !important;
  }

  .xui-xl-bdr-s-double,
  .xui-xl-bdr-style-double {
    border-style: double !important;
  }

  .xui-xl-bdr-s-groove,
  .xui-xl-bdr-style-groove {
    border-style: groove !important;
  }

  .xui-xl-bdr-s-ridge,
  .xui-xl-bdr-style-ridge {
    border-style: ridge !important;
  }

  .xui-xl-bdr-s-inset,
  .xui-xl-bdr-style-inset {
    border-style: inset !important;
  }

  .xui-xl-bdr-s-outset,
  .xui-xl-bdr-style-outset {
    border-style: outset !important;
  }

  .xui-xl-bdr-s-initial,
  .xui-xl-bdr-style-initial {
    border-style: initial !important;
  }

  .xui-xl-bdr-s-inherit,
  .xui-xl-bdr-style-inherit {
    border-style: inherit !important;
  }





  /*Grids*/
  .xui-xl-grid-row-1 {
    grid-template-rows: repeat(1, 1fr);
  }

  .xui-xl-grid-row-2 {
    grid-template-rows: repeat(2, 1fr);
  }

  .xui-xl-grid-row-3 {
    grid-template-rows: repeat(3, 1fr);
  }

  .xui-xl-grid-row-4 {
    grid-template-rows: repeat(4, 1fr);
  }

  .xui-xl-grid-row-5 {
    grid-template-rows: repeat(5, 1fr);
  }

  .xui-xl-grid-row-6 {
    grid-template-rows: repeat(6, 1fr);
  }

  .xui-xl-grid-row-7 {
    grid-template-rows: repeat(7, 1fr);
  }

  .xui-xl-grid-row-8 {
    grid-template-rows: repeat(8, 1fr);
  }

  .xui-xl-grid-row-9 {
    grid-template-rows: repeat(9, 1fr);
  }

  .xui-xl-grid-row-10 {
    grid-template-rows: repeat(10, 1fr);
  }

  .xui-xl-grid-row-11 {
    grid-template-rows: repeat(11, 1fr);
  }

  .xui-xl-grid-row-12 {
    grid-template-rows: repeat(12, 1fr);
  }

  .xui-xl-grid-col-1 {
    grid-template-columns: repeat(1, 1fr);
  }

  .xui-xl-grid-col-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .xui-xl-grid-col-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .xui-xl-grid-col-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .xui-xl-grid-col-5 {
    grid-template-columns: repeat(5, 1fr);
  }

  .xui-xl-grid-col-6 {
    grid-template-columns: repeat(6, 1fr);
  }

  .xui-xl-grid-col-7 {
    grid-template-columns: repeat(7, 1fr);
  }

  .xui-xl-grid-col-8 {
    grid-template-columns: repeat(8, 1fr);
  }

  .xui-xl-grid-col-9 {
    grid-template-columns: repeat(9, 1fr);
  }

  .xui-xl-grid-col-10 {
    grid-template-columns: repeat(10, 1fr);
  }

  .xui-xl-grid-col-11 {
    grid-template-columns: repeat(11, 1fr);
  }

  .xui-xl-grid-col-12 {
    grid-template-columns: repeat(12, 1fr);
  }

  .xui-xl-grid-gap-none {
    grid-gap: 0;
  }

  .xui-xl-grid-gap-half {
    grid-gap: .5rem;
  }

  .xui-xl-grid-gap-1 {
    grid-gap: 1rem;
  }

  .xui-xl-grid-gap-1-half {
    grid-gap: 1.5rem;
  }

  .xui-xl-grid-gap-2 {
    grid-gap: 2rem;
  }

  .xui-xl-grid-gap-2-half {
    grid-gap: 2.5rem;
  }

  .xui-xl-grid-gap-3 {
    grid-gap: 3rem;
  }

  .xui-xl-grid-gap-3-half {
    grid-gap: 3.5rem;
  }

  .xui-xl-grid-gap-4 {
    grid-gap: 4rem;
  }

  .xui-xl-grid-gap-4-half {
    grid-gap: 4.5rem;
  }

  .xui-xl-grid-gap-5 {
    grid-gap: 5rem;
  }

  .xui-xl-grid-gap-5-half {
    grid-gap: 5.5rem;
  }

  .xui-xl-grid-gap-6 {
    grid-gap: 6rem;
  }

  .xui-xl-grid-gap-6-half {
    grid-gap: 6.5rem;
  }

  .xui-xl-grid-gap-7 {
    grid-gap: 7rem;
  }

  .xui-xl-grid-gap-7-half {
    grid-gap: 7.5rem;
  }

  .xui-xl-grid-gap-8 {
    grid-gap: 8rem;
  }

  .xui-xl-grid-gap-8-half {
    grid-gap: 8.5rem;
  }

  .xui-xl-grid-gap-9 {
    grid-gap: 9rem;
  }

  .xui-xl-grid-gap-9-half {
    grid-gap: 9.5rem;
  }

  .xui-xl-grid-gap-10 {
    grid-gap: 10rem;
  }

  .xui-xl-grid-row-gap-none {
    grid-row-gap: 0;
  }

  .xui-xl-grid-row-gap-half {
    grid-row-gap: .5rem;
  }

  .xui-xl-grid-row-gap-1 {
    grid-row-gap: 1rem;
  }

  .xui-xl-grid-row-gap-1-half {
    grid-row-gap: 1.5rem;
  }

  .xui-xl-grid-row-gap-2 {
    grid-row-gap: 2rem;
  }

  .xui-xl-grid-row-gap-2-half {
    grid-row-gap: 2.5rem;
  }

  .xui-xl-grid-row-gap-3 {
    grid-row-gap: 3rem;
  }

  .xui-xl-grid-row-gap-3-half {
    grid-row-gap: 3.5rem;
  }

  .xui-xl-grid-row-gap-4 {
    grid-row-gap: 4rem;
  }

  .xui-xl-grid-row-gap-4-half {
    grid-row-gap: 4.5rem;
  }

  .xui-xl-grid-row-gap-5 {
    grid-row-gap: 5rem;
  }

  .xui-xl-grid-row-gap-5-half {
    grid-row-gap: 5.5rem;
  }

  .xui-xl-grid-row-gap-6 {
    grid-row-gap: 6rem;
  }

  .xui-xl-grid-row-gap-6-half {
    grid-row-gap: 6.5rem;
  }

  .xui-xl-grid-row-gap-7 {
    grid-row-gap: 7rem;
  }

  .xui-xl-grid-row-gap-7-half {
    grid-row-gap: 7.5rem;
  }

  .xui-xl-grid-row-gap-8 {
    grid-row-gap: 8rem;
  }

  .xui-xl-grid-row-gap-8-half {
    grid-row-gap: 8.5rem;
  }

  .xui-xl-grid-row-gap-9 {
    grid-row-gap: 9rem;
  }

  .xui-xl-grid-row-gap-9-half {
    grid-row-gap: 9.5rem;
  }

  .xui-xl-grid-row-gap-10 {
    grid-row-gap: 10rem;
  }

  .xui-xl-grid-column-gap-none {
    grid-column-gap: 0;
  }

  .xui-xl-grid-column-gap-half {
    grid-column-gap: .5rem;
  }

  .xui-xl-grid-column-gap-1 {
    grid-column-gap: 1rem;
  }

  .xui-xl-grid-column-gap-1-half {
    grid-column-gap: 1.5rem;
  }

  .xui-xl-grid-column-gap-2 {
    grid-column-gap: 2rem;
  }

  .xui-xl-grid-column-gap-2-half {
    grid-column-gap: 2.5rem;
  }

  .xui-xl-grid-column-gap-3 {
    grid-column-gap: 3rem;
  }

  .xui-xl-grid-column-gap-3-half {
    grid-column-gap: 3.5rem;
  }

  .xui-xl-grid-column-gap-4 {
    grid-column-gap: 4rem;
  }

  .xui-xl-grid-column-gap-4-half {
    grid-column-gap: 4.5rem;
  }

  .xui-xl-grid-column-gap-5 {
    grid-column-gap: 5rem;
  }

  .xui-xl-grid-column-gap-5-half {
    grid-column-gap: 5.5rem;
  }

  .xui-xl-grid-column-gap-6 {
    grid-column-gap: 6rem;
  }

  .xui-xl-grid-column-gap-6-half {
    grid-column-gap: 6.5rem;
  }

  .xui-xl-grid-column-gap-7 {
    grid-column-gap: 7rem;
  }

  .xui-xl-grid-column-gap-7-half {
    grid-column-gap: 7.5rem;
  }

  .xui-xl-grid-column-gap-8 {
    grid-column-gap: 8rem;
  }

  .xui-xl-grid-column-gap-8-half {
    grid-column-gap: 8.5rem;
  }

  .xui-xl-grid-column-gap-9 {
    grid-column-gap: 9rem;
  }

  .xui-xl-grid-column-gap-9-half {
    grid-column-gap: 9.5rem;
  }

  .xui-xl-grid-column-gap-10 {
    grid-column-gap: 10rem;
  }





  /* The Modern Way for Gaps That Applies to Grid & Flexbox */
  .xui-xl-gap-none {
    gap: 0;
  }

  .xui-xl-gap-half {
    gap: .5rem;
  }

  .xui-xl-gap-1 {
    gap: 1rem;
  }

  .xui-xl-gap-1-half {
    gap: 1.5rem;
  }

  .xui-xl-gap-2 {
    gap: 2rem;
  }

  .xui-xl-gap-2-half {
    gap: 2.5rem;
  }

  .xui-xl-gap-3 {
    gap: 3rem;
  }

  .xui-xl-gap-3-half {
    gap: 3.5rem;
  }

  .xui-xl-gap-4 {
    gap: 4rem;
  }

  .xui-xl-gap-4-half {
    gap: 4.5rem;
  }

  .xui-xl-gap-5 {
    gap: 5rem;
  }

  .xui-xl-gap-5-half {
    gap: 5.5rem;
  }

  .xui-xl-gap-6 {
    gap: 6rem;
  }

  .xui-xl-gap-6-half {
    gap: 6.5rem;
  }

  .xui-xl-gap-7 {
    gap: 7rem;
  }

  .xui-xl-gap-7-half {
    gap: 7.5rem;
  }

  .xui-xl-gap-8 {
    gap: 8rem;
  }

  .xui-xl-gap-8-half {
    gap: 8.5rem;
  }

  .xui-xl-gap-9 {
    gap: 9rem;
  }

  .xui-xl-gap-9-half {
    gap: 9.5rem;
  }

  .xui-xl-gap-10 {
    gap: 10rem;
  }

  .xui-xl-row-gap-none {
    row-gap: 0;
  }

  .xui-xl-row-gap-half {
    row-gap: .5rem;
  }

  .xui-xl-row-gap-1 {
    row-gap: 1rem;
  }

  .xui-xl-row-gap-1-half {
    row-gap: 1.5rem;
  }

  .xui-xl-row-gap-2 {
    row-gap: 2rem;
  }

  .xui-xl-row-gap-2-half {
    row-gap: 2.5rem;
  }

  .xui-xl-row-gap-3 {
    row-gap: 3rem;
  }

  .xui-xl-row-gap-3-half {
    row-gap: 3.5rem;
  }

  .xui-xl-row-gap-4 {
    row-gap: 4rem;
  }

  .xui-xl-row-gap-4-half {
    row-gap: 4.5rem;
  }

  .xui-xl-row-gap-5 {
    row-gap: 5rem;
  }

  .xui-xl-row-gap-5-half {
    row-gap: 5.5rem;
  }

  .xui-xl-row-gap-6 {
    row-gap: 6rem;
  }

  .xui-xl-row-gap-6-half {
    row-gap: 6.5rem;
  }

  .xui-xl-row-gap-7 {
    row-gap: 7rem;
  }

  .xui-xl-row-gap-7-half {
    row-gap: 7.5rem;
  }

  .xui-xl-row-gap-8 {
    row-gap: 8rem;
  }

  .xui-xl-row-gap-8-half {
    row-gap: 8.5rem;
  }

  .xui-xl-row-gap-9 {
    row-gap: 9rem;
  }

  .xui-xl-row-gap-9-half {
    row-gap: 9.5rem;
  }

  .xui-xl-row-gap-10 {
    row-gap: 10rem;
  }

  .xui-xl-column-gap-none {
    column-gap: 0;
  }

  .xui-xl-column-gap-half {
    column-gap: .5rem;
  }

  .xui-xl-column-gap-1 {
    column-gap: 1rem;
  }

  .xui-xl-column-gap-1-half {
    column-gap: 1.5rem;
  }

  .xui-xl-column-gap-2 {
    column-gap: 2rem;
  }

  .xui-xl-column-gap-2-half {
    column-gap: 2.5rem;
  }

  .xui-xl-column-gap-3 {
    column-gap: 3rem;
  }

  .xui-xl-column-gap-3-half {
    column-gap: 3.5rem;
  }

  .xui-xl-column-gap-4 {
    column-gap: 4rem;
  }

  .xui-xl-column-gap-4-half {
    column-gap: 4.5rem;
  }

  .xui-xl-column-gap-5 {
    column-gap: 5rem;
  }

  .xui-xl-column-gap-5-half {
    column-gap: 5.5rem;
  }

  .xui-xl-column-gap-6 {
    column-gap: 6rem;
  }

  .xui-xl-column-gap-6-half {
    column-gap: 6.5rem;
  }

  .xui-xl-column-gap-7 {
    column-gap: 7rem;
  }

  .xui-xl-column-gap-7-half {
    column-gap: 7.5rem;
  }

  .xui-xl-column-gap-8 {
    column-gap: 8rem;
  }

  .xui-xl-column-gap-8-half {
    column-gap: 8.5rem;
  }

  .xui-xl-column-gap-9 {
    column-gap: 9rem;
  }

  .xui-xl-column-gap-9-half {
    column-gap: 9.5rem;
  }

  .xui-xl-column-gap-10 {
    column-gap: 10rem;
  }




  /*Margins*/
  .xui-xl-m-none {
    margin: 0;
  }

  .xui-xl-m-auto {
    margin: auto;
  }

  .xui-xl-m-inherit {
    margin: inherit;
  }

  .xui-xl-m-unset {
    margin: unset;
  }

  .xui-xl-m-all {
    margin: all;
  }

  .xui-xl-m-initial {
    margin: initial;
  }

  .xui-xl-m-half {
    margin: .5rem;
  }

  .xui-xl-m-1 {
    margin: 1rem;
  }

  .xui-xl-m-1-half {
    margin: 1.5rem;
  }

  .xui-xl-m-2 {
    margin: 2rem;
  }

  .xui-xl-m-2-half {
    margin: 2.5rem;
  }

  .xui-xl-m-3 {
    margin: 3rem;
  }

  .xui-xl-m-3-half {
    margin: 3.5rem;
  }

  .xui-xl-m-4 {
    margin: 4rem;
  }

  .xui-xl-m-4-half {
    margin: 4.5rem;
  }

  .xui-xl-m-5 {
    margin: 5rem;
  }

  .xui-xl-m-5-half {
    margin: 5.5rem;
  }

  .xui-xl-m-6 {
    margin: 6rem;
  }

  .xui-xl-m-6-half {
    margin: 6.5rem;
  }

  .xui-xl-m-7 {
    margin: 7rem;
  }

  .xui-xl-m-7-half {
    margin: 7.5rem;
  }

  .xui-xl-m-8 {
    margin: 8rem;
  }

  .xui-xl-m-8-half {
    margin: 8.5rem;
  }

  .xui-xl-m-9 {
    margin: 9rem;
  }

  .xui-xl-m-9-half {
    margin: 9.5rem;
  }

  .xui-xl-m-10 {
    margin: 10rem;
  }

  .xui-xl-mt-none {
    margin-top: 0;
  }

  .xui-xl-mt-auto {
    margin-top: auto;
  }

  .xui-xl-mt--half {
    margin-top: -.5rem;
  }

  .xui-xl-mt--1 {
    margin-top: -1rem;
  }

  .xui-xl-mt--1-half {
    margin-top: -1.5rem;
  }

  .xui-xl-mt--2 {
    margin-top: -2rem;
  }

  .xui-xl-mt--2-half {
    margin-top: -2.5rem;
  }

  .xui-xl-mt--3 {
    margin-top: -3rem;
  }

  .xui-xl-mt--3-half {
    margin-top: -3.5rem;
  }

  .xui-xl-mt--4 {
    margin-top: -4rem;
  }

  .xui-xl-mt--4-half {
    margin-top: -4.5rem;
  }

  .xui-xl-mt--5 {
    margin-top: -5rem;
  }

  .xui-xl-mt--5-half {
    margin-top: -5.5rem;
  }

  .xui-xl-mt--6 {
    margin-top: -6rem;
  }

  .xui-xl-mt--6-half {
    margin-top: -6.5rem;
  }

  .xui-xl-mt--7 {
    margin-top: -7rem;
  }

  .xui-xl-mt--7-half {
    margin-top: -7.5rem;
  }

  .xui-xl-mt--8 {
    margin-top: -8rem;
  }

  .xui-xl-mt--8-half {
    margin-top: -8.5rem;
  }

  .xui-xl-mt--9 {
    margin-top: -9rem;
  }

  .xui-xl-mt--9-half {
    margin-top: -9.5rem;
  }

  .xui-xl-mt--10 {
    margin-top: -10rem;
  }

  .xui-xl-mt-half {
    margin-top: .5rem;
  }

  .xui-xl-mt-1 {
    margin-top: 1rem;
  }

  .xui-xl-mt-1-half {
    margin-top: 1.5rem;
  }

  .xui-xl-mt-2 {
    margin-top: 2rem;
  }

  .xui-xl-mt-2-half {
    margin-top: 2.5rem;
  }

  .xui-xl-mt-3 {
    margin-top: 3rem;
  }

  .xui-xl-mt-3-half {
    margin-top: 3.5rem;
  }

  .xui-xl-mt-4 {
    margin-top: 4rem;
  }

  .xui-xl-mt-4-half {
    margin-top: 4.5rem;
  }

  .xui-xl-mt-5 {
    margin-top: 5rem;
  }

  .xui-xl-mt-5-half {
    margin-top: 5.5rem;
  }

  .xui-xl-mt-6 {
    margin-top: 6rem;
  }

  .xui-xl-mt-6-half {
    margin-top: 6.5rem;
  }

  .xui-xl-mt-7 {
    margin-top: 7rem;
  }

  .xui-xl-mt-7-half {
    margin-top: 7.5rem;
  }

  .xui-xl-mt-8 {
    margin-top: 8rem;
  }

  .xui-xl-mt-8-half {
    margin-top: 8.5rem;
  }

  .xui-xl-mt-9 {
    margin-top: 9rem;
  }

  .xui-xl-mt-9-half {
    margin-top: 9.5rem;
  }

  .xui-xl-mt-10 {
    margin-top: 10rem;
  }

  .xui-xl-mr-none {
    margin-right: 0;
  }

  .xui-xl-mr-auto {
    margin-right: auto;
  }

  .xui-xl-mr--half {
    margin-right: -.5rem;
  }

  .xui-xl-mr--1 {
    margin-right: -1rem;
  }

  .xui-xl-mr--1-half {
    margin-right: -1.5rem;
  }

  .xui-xl-mr--2 {
    margin-right: -2rem;
  }

  .xui-xl-mr--2-half {
    margin-right: -2.5rem;
  }

  .xui-xl-mr--3 {
    margin-right: -3rem;
  }

  .xui-xl-mr--3-half {
    margin-right: -3.5rem;
  }

  .xui-xl-mr--4 {
    margin-right: -4rem;
  }

  .xui-xl-mr--4-half {
    margin-right: -4.5rem;
  }

  .xui-xl-mr--5 {
    margin-right: -5rem;
  }

  .xui-xl-mr--5-half {
    margin-right: -5.5rem;
  }

  .xui-xl-mr--6 {
    margin-right: -6rem;
  }

  .xui-xl-mr--6-half {
    margin-right: -6.5rem;
  }

  .xui-xl-mr--7 {
    margin-right: -7rem;
  }

  .xui-xl-mr--7-half {
    margin-right: -7.5rem;
  }

  .xui-xl-mr--8 {
    margin-right: -8rem;
  }

  .xui-xl-mr--8-half {
    margin-right: -8.5rem;
  }

  .xui-xl-mr--9 {
    margin-right: -9rem;
  }

  .xui-xl-mr--9-half {
    margin-right: -9.5rem;
  }

  .xui-xl-mr--10 {
    margin-right: -10rem;
  }

  .xui-xl-mr-half {
    margin-right: .5rem;
  }

  .xui-xl-mr-1 {
    margin-right: 1rem;
  }

  .xui-xl-mr-1-half {
    margin-right: 1.5rem;
  }

  .xui-xl-mr-2 {
    margin-right: 2rem;
  }

  .xui-xl-mr-2-half {
    margin-right: 2.5rem;
  }

  .xui-xl-mr-3 {
    margin-right: 3rem;
  }

  .xui-xl-mr-3-half {
    margin-right: 3.5rem;
  }

  .xui-xl-mr-4 {
    margin-right: 4rem;
  }

  .xui-xl-mr-4-half {
    margin-right: 4.5rem;
  }

  .xui-xl-mr-5 {
    margin-right: 5rem;
  }

  .xui-xl-mr-5-half {
    margin-right: 5.5rem;
  }

  .xui-xl-mr-6 {
    margin-right: 6rem;
  }

  .xui-xl-mr-6-half {
    margin-right: 6.5rem;
  }

  .xui-xl-mr-7 {
    margin-right: 7rem;
  }

  .xui-xl-mr-7-half {
    margin-right: 7.5rem;
  }

  .xui-xl-mr-8 {
    margin-right: 8rem;
  }

  .xui-xl-mr-8-half {
    margin-right: 8.5rem;
  }

  .xui-xl-mr-9 {
    margin-right: 9rem;
  }

  .xui-xl-mr-9-half {
    margin-right: 9.5rem;
  }

  .xui-xl-mr-10 {
    margin-right: 10rem;
  }

  .xui-xl-mb-none {
    margin-bottom: 0;
  }

  .xui-xl-mb-auto {
    margin-bottom: auto;
  }

  .xui-xl-mb--half {
    margin-bottom: -.5rem;
  }

  .xui-xl-mb--1 {
    margin-bottom: -1rem;
  }

  .xui-xl-mb--1-half {
    margin-bottom: -1.5rem;
  }

  .xui-xl-mb--2 {
    margin-bottom: -2rem;
  }

  .xui-xl-mb--2-half {
    margin-bottom: -2.5rem;
  }

  .xui-xl-mb--3 {
    margin-bottom: -3rem;
  }

  .xui-xl-mb--3-half {
    margin-bottom: -3.5rem;
  }

  .xui-xl-mb--4 {
    margin-bottom: -4rem;
  }

  .xui-xl-mb--4-half {
    margin-bottom: -4.5rem;
  }

  .xui-xl-mb--5 {
    margin-bottom: -5rem;
  }

  .xui-xl-mb--5-half {
    margin-bottom: -5.5rem;
  }

  .xui-xl-mb--6 {
    margin-bottom: -6rem;
  }

  .xui-xl-mb--6-half {
    margin-bottom: -6.5rem;
  }

  .xui-xl-mb--7 {
    margin-bottom: -7rem;
  }

  .xui-xl-mb--7-half {
    margin-bottom: -7.5rem;
  }

  .xui-xl-mb--8 {
    margin-bottom: -8rem;
  }

  .xui-xl-mb--8-half {
    margin-bottom: -8.5rem;
  }

  .xui-xl-mb--9 {
    margin-bottom: -9rem;
  }

  .xui-xl-mb--9-half {
    margin-bottom: -9.5rem;
  }

  .xui-xl-mb--10 {
    margin-bottom: -10rem;
  }

  .xui-xl-mb-half {
    margin-bottom: .5rem;
  }

  .xui-xl-mb-1 {
    margin-bottom: 1rem;
  }

  .xui-xl-mb-1-half {
    margin-bottom: 1.5rem;
  }

  .xui-xl-mb-2 {
    margin-bottom: 2rem;
  }

  .xui-xl-mb-2-half {
    margin-bottom: 2.5rem;
  }

  .xui-xl-mb-3 {
    margin-bottom: 3rem;
  }

  .xui-xl-mb-3-half {
    margin-bottom: 3.5rem;
  }

  .xui-xl-mb-4 {
    margin-bottom: 4rem;
  }

  .xui-xl-mb-4-half {
    margin-bottom: 4.5rem;
  }

  .xui-xl-mb-5 {
    margin-bottom: 5rem;
  }

  .xui-xl-mb-5-half {
    margin-bottom: 5.5rem;
  }

  .xui-xl-mb-6 {
    margin-bottom: 6rem;
  }

  .xui-xl-mb-6-half {
    margin-bottom: 6.5rem;
  }

  .xui-xl-mb-7 {
    margin-bottom: 7rem;
  }

  .xui-xl-mb-7-half {
    margin-bottom: 7.5rem;
  }

  .xui-xl-mb-8 {
    margin-bottom: 8rem;
  }

  .xui-xl-mb-8-half {
    margin-bottom: 8.5rem;
  }

  .xui-xl-mb-9 {
    margin-bottom: 9rem;
  }

  .xui-xl-mb-9-half {
    margin-bottom: 9.5rem;
  }

  .xui-xl-mb-10 {
    margin-bottom: 10rem;
  }

  .xui-xl-ml-none {
    margin-left: 0;
  }

  .xui-xl-ml-auto {
    margin-left: auto;
  }

  .xui-xl-ml--half {
    margin-left: -.5rem;
  }

  .xui-xl-ml--1 {
    margin-left: -1rem;
  }

  .xui-xl-ml--1-half {
    margin-left: -1.5rem;
  }

  .xui-xl-ml--2 {
    margin-left: -2rem;
  }

  .xui-xl-ml--2-half {
    margin-left: -2.5rem;
  }

  .xui-xl-ml--3 {
    margin-left: -3rem;
  }

  .xui-xl-ml--3-half {
    margin-left: -3.5rem;
  }

  .xui-xl-ml--4 {
    margin-left: -4rem;
  }

  .xui-xl-ml--4-half {
    margin-left: -4.5rem;
  }

  .xui-xl-ml--5 {
    margin-left: -5rem;
  }

  .xui-xl-ml--5-half {
    margin-left: -5.5rem;
  }

  .xui-xl-ml--6 {
    margin-left: -6rem;
  }

  .xui-xl-ml--6-half {
    margin-left: -6.5rem;
  }

  .xui-xl-ml--7 {
    margin-left: -7rem;
  }

  .xui-xl-ml--7-half {
    margin-left: -7.5rem;
  }

  .xui-xl-ml--8 {
    margin-left: -8rem;
  }

  .xui-xl-ml--8-half {
    margin-left: -8.5rem;
  }

  .xui-xl-ml--9 {
    margin-left: -9rem;
  }

  .xui-xl-ml--9-half {
    margin-left: -9.5rem;
  }

  .xui-xl-ml--10 {
    margin-left: -10rem;
  }

  .xui-xl-ml-half {
    margin-left: .5rem;
  }

  .xui-xl-ml-1 {
    margin-left: 1rem;
  }

  .xui-xl-ml-1-half {
    margin-left: 1.5rem;
  }

  .xui-xl-ml-2 {
    margin-left: 2rem;
  }

  .xui-xl-ml-2-half {
    margin-left: 2.5rem;
  }

  .xui-xl-ml-3 {
    margin-left: 3rem;
  }

  .xui-xl-ml-3-half {
    margin-left: 3.5rem;
  }

  .xui-xl-ml-4 {
    margin-left: 4rem;
  }

  .xui-xl-ml-4-half {
    margin-left: 4.5rem;
  }

  .xui-xl-ml-5 {
    margin-left: 5rem;
  }

  .xui-xl-ml-5-half {
    margin-left: 5.5rem;
  }

  .xui-xl-ml-6 {
    margin-left: 6rem;
  }

  .xui-xl-ml-6-half {
    margin-left: 6.5rem;
  }

  .xui-xl-ml-7 {
    margin-left: 7rem;
  }

  .xui-xl-ml-7-half {
    margin-left: 7.5rem;
  }

  .xui-xl-ml-8 {
    margin-left: 8rem;
  }

  .xui-xl-ml-8-half {
    margin-left: 8.5rem;
  }

  .xui-xl-ml-9 {
    margin-left: 9rem;
  }

  .xui-xl-ml-9-half {
    margin-left: 9.5rem;
  }

  .xui-xl-ml-10 {
    margin-left: 10rem;
  }

  .xui-xl-mx-none {
    margin-left: 0;
    margin-right: 0;
  }

  .xui-xl-mx-auto {
    margin-left: auto;
    margin-right: auto;
  }

  .xui-xl-mx-half {
    margin-left: .5rem;
    margin-right: .5rem;
  }

  .xui-xl-mx-1 {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .xui-xl-mx-1-half {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }

  .xui-xl-mx-2 {
    margin-left: 2rem;
    margin-right: 2rem;
  }

  .xui-xl-mx-2-half {
    margin-left: 2.5rem;
    margin-right: 2.5rem;
  }

  .xui-xl-mx-3 {
    margin-left: 3rem;
    margin-right: 3rem;
  }

  .xui-xl-mx-3-half {
    margin-left: 3.5rem;
    margin-right: 3.5rem;
  }

  .xui-xl-mx-4 {
    margin-left: 4rem;
    margin-right: 4rem;
  }

  .xui-xl-mx-4-half {
    margin-left: 4.5rem;
    margin-right: 4.5rem;
  }

  .xui-xl-mx-5 {
    margin-left: 5rem;
    margin-right: 5rem;
  }

  .xui-xl-mx-5-half {
    margin-left: 5.5rem;
    margin-right: 5.5rem;
  }

  .xui-xl-mx-6 {
    margin-left: 6rem;
    margin-right: 6rem;
  }

  .xui-xl-mx-6-half {
    margin-left: 6.5rem;
    margin-right: 6.5rem;
  }

  .xui-xl-mx-7 {
    margin-left: 7rem;
    margin-right: 7rem;
  }

  .xui-xl-mx-7-half {
    margin-left: 7.5rem;
    margin-right: 7.5rem;
  }

  .xui-xl-mx-8 {
    margin-left: 8rem;
    margin-right: 8rem;
  }

  .xui-xl-mx-8-half {
    margin-left: 8.5rem;
    margin-right: 8.5rem;
  }

  .xui-xl-mx-9 {
    margin-left: 9rem;
    margin-right: 9rem;
  }

  .xui-xl-mx-9-half {
    margin-left: 9.5rem;
    margin-right: 9.5rem;
  }

  .xui-xl-mx-10 {
    margin-left: 10rem;
    margin-right: 10rem;
  }

  .xui-xl-my-none {
    margin-top: 0;
    margin-bottom: 0;
  }

  .xui-xl-my-auto {
    margin-top: auto;
    margin-bottom: auto;
  }

  .xui-xl-my-half {
    margin-top: .5rem;
    margin-bottom: .5rem;
  }

  .xui-xl-my-1 {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .xui-xl-my-1-half {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .xui-xl-my-2 {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .xui-xl-my-2-half {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
  }

  .xui-xl-my-3 {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }

  .xui-xl-my-3-half {
    margin-top: 3.5rem;
    margin-bottom: 3.5rem;
  }

  .xui-xl-my-4 {
    margin-top: 4rem;
    margin-bottom: 4rem;
  }

  .xui-xl-my-4-half {
    margin-top: 4.5rem;
    margin-bottom: 4.5rem;
  }

  .xui-xl-my-5 {
    margin-top: 5rem;
    margin-bottom: 5rem;
  }

  .xui-xl-my-5-half {
    margin-top: 5.5rem;
    margin-bottom: 5.5rem;
  }

  .xui-xl-my-6 {
    margin-top: 6rem;
    margin-bottom: 6rem;
  }

  .xui-xl-my-6-half {
    margin-top: 6.5rem;
    margin-bottom: 6.5rem;
  }

  .xui-xl-my-7 {
    margin-top: 7rem;
    margin-bottom: 7rem;
  }

  .xui-xl-my-7-half {
    margin-top: 7.5rem;
    margin-bottom: 7.5rem;
  }

  .xui-xl-my-8 {
    margin-top: 8rem;
    margin-bottom: 8rem;
  }

  .xui-xl-my-8-half {
    margin-top: 8.5rem;
    margin-bottom: 8.5rem;
  }

  .xui-xl-my-9 {
    margin-top: 9rem;
    margin-bottom: 9rem;
  }

  .xui-xl-my-9-half {
    margin-top: 9.5rem;
    margin-bottom: 9.5rem;
  }

  .xui-xl-my-10 {
    margin-top: 10rem;
    margin-bottom: 10rem;
  }






  /*Paddings*/
  .xui-xl-p-none {
    padding: 0;
  }

  .xui-xl-p-auto {
    padding: auto;
  }

  .xui-xl-p-inherit {
    padding: inherit;
  }

  .xui-xl-p-unset {
    padding: unset;
  }

  .xui-xl-p-all {
    padding: all;
  }

  .xui-xl-p-initial {
    padding: initial;
  }

  .xui-xl-p-half {
    padding: .5rem;
  }

  .xui-xl-p-1 {
    padding: 1rem;
  }

  .xui-xl-p-1-half {
    padding: 1.5rem;
  }

  .xui-xl-p-2 {
    padding: 2rem;
  }

  .xui-xl-p-2-half {
    padding: 2.5rem;
  }

  .xui-xl-p-3 {
    padding: 3rem;
  }

  .xui-xl-p-3-half {
    padding: 3.5rem;
  }

  .xui-xl-p-4 {
    padding: 4rem;
  }

  .xui-xl-p-4-half {
    padding: 4.5rem;
  }

  .xui-xl-p-5 {
    padding: 5rem;
  }

  .xui-xl-p-5-half {
    padding: 5.5rem;
  }

  .xui-xl-p-6 {
    padding: 6rem;
  }

  .xui-xl-p-6-half {
    padding: 6.5rem;
  }

  .xui-xl-p-7 {
    padding: 7rem;
  }

  .xui-xl-p-7-half {
    padding: 7.5rem;
  }

  .xui-xl-p-8 {
    padding: 8rem;
  }

  .xui-xl-p-8-half {
    padding: 8.5rem;
  }

  .xui-xl-p-9 {
    padding: 9rem;
  }

  .xui-xl-p-9-half {
    padding: 9.5rem;
  }

  .xui-xl-p-10 {
    padding: 10rem;
  }

  .xui-xl-pt-none {
    padding-top: 0;
  }

  .xui-xl-pt-auto {
    padding-top: auto;
  }

  .xui-xl-pt-half {
    padding-top: .5rem;
  }

  .xui-xl-pt-1 {
    padding-top: 1rem;
  }

  .xui-xl-pt-1-half {
    padding-top: 1.5rem;
  }

  .xui-xl-pt-2 {
    padding-top: 2rem;
  }

  .xui-xl-pt-2-half {
    padding-top: 2.5rem;
  }

  .xui-xl-pt-3 {
    padding-top: 3rem;
  }

  .xui-xl-pt-3-half {
    padding-top: 3.5rem;
  }

  .xui-xl-pt-4 {
    padding-top: 4rem;
  }

  .xui-xl-pt-4-half {
    padding-top: 4.5rem;
  }

  .xui-xl-pt-5 {
    padding-top: 5rem;
  }

  .xui-xl-pt-5-half {
    padding-top: 5.5rem;
  }

  .xui-xl-pt-6 {
    padding-top: 6rem;
  }

  .xui-xl-pt-6-half {
    padding-top: 6.5rem;
  }

  .xui-xl-pt-7 {
    padding-top: 7rem;
  }

  .xui-xl-pt-7-half {
    padding-top: 7.5rem;
  }

  .xui-xl-pt-8 {
    padding-top: 8rem;
  }

  .xui-xl-pt-8-half {
    padding-top: 8.5rem;
  }

  .xui-xl-pt-9 {
    padding-top: 9rem;
  }

  .xui-xl-pt-9-half {
    padding-top: 9.5rem;
  }

  .xui-xl-pt-10 {
    padding-top: 10rem;
  }

  .xui-xl-pr-none {
    padding-right: 0;
  }

  .xui-xl-pr-auto {
    padding-right: auto;
  }

  .xui-xl-pr-half {
    padding-right: .5rem;
  }

  .xui-xl-pr-1 {
    padding-right: 1rem;
  }

  .xui-xl-pr-1-half {
    padding-right: 1.5rem;
  }

  .xui-xl-pr-2 {
    padding-right: 2rem;
  }

  .xui-xl-pr-2-half {
    padding-right: 2.5rem;
  }

  .xui-xl-pr-3 {
    padding-right: 3rem;
  }

  .xui-xl-pr-3-half {
    padding-right: 3.5rem;
  }

  .xui-xl-pr-4 {
    padding-right: 4rem;
  }

  .xui-xl-pr-4-half {
    padding-right: 4.5rem;
  }

  .xui-xl-pr-5 {
    padding-right: 5rem;
  }

  .xui-xl-pr-5-half {
    padding-right: 5.5rem;
  }

  .xui-xl-pr-6 {
    padding-right: 6rem;
  }

  .xui-xl-pr-6-half {
    padding-right: 6.5rem;
  }

  .xui-xl-pr-7 {
    padding-right: 7rem;
  }

  .xui-xl-pr-7-half {
    padding-right: 7.5rem;
  }

  .xui-xl-pr-8 {
    padding-right: 8rem;
  }

  .xui-xl-pr-8-half {
    padding-right: 8.5rem;
  }

  .xui-xl-pr-9 {
    padding-right: 9rem;
  }

  .xui-xl-pr-9-half {
    padding-right: 9.5rem;
  }

  .xui-xl-pr-10 {
    padding-right: 10rem;
  }

  .xui-xl-pb-none {
    padding-bottom: 0;
  }

  .xui-xl-pb-auto {
    padding-bottom: auto;
  }

  .xui-xl-pb-half {
    padding-bottom: .5rem;
  }

  .xui-xl-pb-1 {
    padding-bottom: 1rem;
  }

  .xui-xl-pb-1-half {
    padding-bottom: 1.5rem;
  }

  .xui-xl-pb-2 {
    padding-bottom: 2rem;
  }

  .xui-xl-pb-2-half {
    padding-bottom: 2.5rem;
  }

  .xui-xl-pb-3 {
    padding-bottom: 3rem;
  }

  .xui-xl-pb-3-half {
    padding-bottom: 3.5rem;
  }

  .xui-xl-pb-4 {
    padding-bottom: 4rem;
  }

  .xui-xl-pb-4-half {
    padding-bottom: 4.5rem;
  }

  .xui-xl-pb-5 {
    padding-bottom: 5rem;
  }

  .xui-xl-pb-5-half {
    padding-bottom: 5.5rem;
  }

  .xui-xl-pb-6 {
    padding-bottom: 6rem;
  }

  .xui-xl-pb-6-half {
    padding-bottom: 6.5rem;
  }

  .xui-xl-pb-7 {
    padding-bottom: 7rem;
  }

  .xui-xl-pb-7-half {
    padding-bottom: 7.5rem;
  }

  .xui-xl-pb-8 {
    padding-bottom: 8rem;
  }

  .xui-xl-pb-8-half {
    padding-bottom: 8.5rem;
  }

  .xui-xl-pb-9 {
    padding-bottom: 9rem;
  }

  .xui-xl-pb-9-half {
    padding-bottom: 9.5rem;
  }

  .xui-xl-pb-10 {
    padding-bottom: 10rem;
  }

  .xui-xl-pl-none {
    padding-left: 0;
  }

  .xui-xl-pl-auto {
    padding-left: auto;
  }

  .xui-xl-pl-half {
    padding-left: .5rem;
  }

  .xui-xl-pl-1 {
    padding-left: 1rem;
  }

  .xui-xl-pl-1-half {
    padding-left: 1.5rem;
  }

  .xui-xl-pl-2 {
    padding-left: 2rem;
  }

  .xui-xl-pl-2-half {
    padding-left: 2.5rem;
  }

  .xui-xl-pl-3 {
    padding-left: 3rem;
  }

  .xui-xl-pl-3-half {
    padding-left: 3.5rem;
  }

  .xui-xl-pl-4 {
    padding-left: 4rem;
  }

  .xui-xl-pl-4-half {
    padding-left: 4.5rem;
  }

  .xui-xl-pl-5 {
    padding-left: 5rem;
  }

  .xui-xl-pl-5-half {
    padding-left: 5.5rem;
  }

  .xui-xl-pl-6 {
    padding-left: 6rem;
  }

  .xui-xl-pl-6-half {
    padding-left: 6.5rem;
  }

  .xui-xl-pl-7 {
    padding-left: 7rem;
  }

  .xui-xl-pl-7-half {
    padding-left: 7.5rem;
  }

  .xui-xl-pl-8 {
    padding-left: 8rem;
  }

  .xui-xl-pl-8-half {
    padding-left: 8.5rem;
  }

  .xui-xl-pl-9 {
    padding-left: 9rem;
  }

  .xui-xl-pl-9-half {
    padding-left: 9.5rem;
  }

  .xui-xl-pl-10 {
    padding-left: 10rem;
  }

  .xui-xl-px-none {
    padding-left: 0;
    padding-right: 0;
  }

  .xui-xl-px-auto {
    padding-left: auto;
    padding-right: auto;
  }

  .xui-xl-px-half {
    padding-left: .5rem;
    padding-right: .5rem;
  }

  .xui-xl-px-1 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .xui-xl-px-1-half {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .xui-xl-px-2 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .xui-xl-px-2-half {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .xui-xl-px-3 {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .xui-xl-px-3-half {
    padding-left: 3.5rem;
    padding-right: 3.5rem;
  }

  .xui-xl-px-4 {
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .xui-xl-px-4-half {
    padding-left: 4.5rem;
    padding-right: 4.5rem;
  }

  .xui-xl-px-5 {
    padding-left: 5rem;
    padding-right: 5rem;
  }

  .xui-xl-px-5-half {
    padding-left: 5.5rem;
    padding-right: 5.5rem;
  }

  .xui-xl-px-6 {
    padding-left: 6rem;
    padding-right: 6rem;
  }

  .xui-xl-px-6-half {
    padding-left: 6.5rem;
    padding-right: 6.5rem;
  }

  .xui-xl-px-7 {
    padding-left: 7rem;
    padding-right: 7rem;
  }

  .xui-xl-px-7-half {
    padding-left: 7.5rem;
    padding-right: 7.5rem;
  }

  .xui-xl-px-8 {
    padding-left: 8rem;
    padding-right: 8rem;
  }

  .xui-xl-px-8-half {
    padding-left: 8.5rem;
    padding-right: 8.5rem;
  }

  .xui-xl-px-9 {
    padding-left: 9rem;
    padding-right: 9rem;
  }

  .xui-xl-px-9-half {
    padding-left: 9.5rem;
    padding-right: 9.5rem;
  }

  .xui-xl-px-10 {
    padding-left: 10rem;
    padding-right: 10rem;
  }

  .xui-xl-py-none {
    padding-top: 0;
    padding-bottom: 0;
  }

  .xui-xl-py-auto {
    padding-top: auto;
    padding-bottom: auto;
  }

  .xui-xl-py-half {
    padding-top: .5rem;
    padding-bottom: .5rem;
  }

  .xui-xl-py-1 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .xui-xl-py-1-half {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .xui-xl-py-2 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .xui-xl-py-2-half {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .xui-xl-py-3 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .xui-xl-py-3-half {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .xui-xl-py-4 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .xui-xl-py-4-half {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }

  .xui-xl-py-5 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .xui-xl-py-5-half {
    padding-top: 5.5rem;
    padding-bottom: 5.5rem;
  }

  .xui-xl-py-6 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .xui-xl-py-6-half {
    padding-top: 6.5rem;
    padding-bottom: 6.5rem;
  }

  .xui-xl-py-7 {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }

  .xui-xl-py-7-half {
    padding-top: 7.5rem;
    padding-bottom: 7.5rem;
  }

  .xui-xl-py-8 {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .xui-xl-py-8-half {
    padding-top: 8.5rem;
    padding-bottom: 8.5rem;
  }

  .xui-xl-py-9 {
    padding-top: 9rem;
    padding-bottom: 9rem;
  }

  .xui-xl-py-9-half {
    padding-top: 9.5rem;
    padding-bottom: 9.5rem;
  }

  .xui-xl-py-10 {
    padding-top: 10rem;
    padding-bottom: 10rem;
  }




  /*Flexes*/
  .xui-xl-flex-jc-start,
  .xui-xl-flex-jc-flex-start {
    justify-content: flex-start;
  }

  .xui-xl-flex-jc-end,
  .xui-xl-flex-jc-flex-end {
    justify-content: flex-end;
  }

  .xui-xl-flex-jc-space-between {
    justify-content: space-between;
  }

  .xui-xl-flex-jc-space-around {
    justify-content: space-around;
  }

  .xui-xl-flex-jc-space-evenly {
    justify-content: space-evenly;
  }

  .xui-xl-flex-jc-center {
    justify-content: center;
  }

  .xui-xl-flex-jc-initial {
    justify-content: initial;
  }

  .xui-xl-flex-jc-inherit {
    justify-content: inherit;
  }

  .xui-xl-flex-ai-stretch {
    align-items: stretch;
  }

  .xui-xl-flex-ai-center {
    align-items: center;
  }

  .xui-xl-flex-ai-flex-start {
    align-items: flex-start;
  }

  .xui-xl-flex-ai-flex-end {
    align-items: flex-end;
  }

  .xui-xl-flex-ai-baseline {
    align-items: baseline;
  }

  .xui-xl-flex-ai-initial {
    align-items: initial;
  }

  .xui-xl-flex-ai-inherit {
    align-items: inherit;
  }

  .xui-xl-flex-wrap-wrap {
    flex-wrap: wrap;
  }

  .xui-xl-flex-wrap-nowrap {
    flex-wrap: nowrap;
  }

  .xui-xl-flex-wrap-wrap-reverse {
    flex-wrap: wrap-reverse;
  }

  .xui-xl-flex-wrap-inherit {
    flex-wrap: inherit;
  }

  .xui-xl-flex-wrap-initial {
    flex-wrap: initial;
  }

  .xui-xl-flex-dir-row {
    flex-direction: row;
  }

  .xui-xl-flex-dir-row-reverse {
    flex-direction: row-reverse;
  }

  .xui-xl-flex-dir-column {
    flex-direction: column;
  }

  .xui-xl-flex-dir-column-reverse {
    flex-direction: column-reverse;
  }

  .xui-xl-flex-dir-initial {
    flex-direction: initial;
  }

  .xui-xl-flex-dir-inherit {
    flex-direction: inherit;
  }

  .xui-xl-flex-grow-1 {
    flex-grow: 1;
  }

  .xui-xl-flex-grow-2 {
    flex-grow: 2;
  }

  .xui-xl-flex-grow-3 {
    flex-grow: 3;
  }

  .xui-xl-flex-grow-4 {
    flex-grow: 4;
  }

  .xui-xl-flex-grow-5 {
    flex-grow: 5;
  }

  .xui-xl-flex-grow-initial {
    flex-grow: initial;
  }

  .xui-xl-flex-grow-inherit {
    flex-grow: inherit;
  }

  .xui-xl-flex-shrink-1 {
    flex-shrink: 1;
  }

  .xui-xl-flex-shrink-2 {
    flex-shrink: 2;
  }

  .xui-xl-flex-shrink-3 {
    flex-shrink: 3;
  }

  .xui-xl-flex-shrink-4 {
    flex-shrink: 4;
  }

  .xui-xl-flex-shrink-5 {
    flex-shrink: 5;
  }

  .xui-xl-flex-shrink-initial {
    flex-shrink: initial;
  }

  .xui-xl-flex-shrink-inherit {
    flex-shrink: inherit;
  }




  /*Width & Height*/
  .xui-xl-w-auto {
    width: auto;
  }

  .xui-xl-w-inherit {
    width: inherit;
  }

  .xui-xl-w-initial {
    width: initial;
  }

  .xui-xl-w-max-content {
    width: max-content;
  }

  .xui-xl-w-min-content {
    width: min-content;
  }

  .xui-xl-w-fit-content {
    width: fit-content;
  }

  .xui-xl-h-auto {
    height: auto;
  }

  .xui-xl-h-inherit {
    height: inherit;
  }

  .xui-xl-h-initial {
    height: initial;
  }

  .xui-xl-h-max-content {
    height: max-content;
  }

  .xui-xl-h-min-content {
    height: min-content;
  }

  .xui-xl-h-fit-content {
    height: fit-content;
  }

  .xui-xl-w-5 {
    width: 5px;
  }

  .xui-xl-w-10 {
    width: 10px;
  }

  .xui-xl-w-15 {
    width: 15px;
  }

  .xui-xl-w-20 {
    width: 20px;
  }

  .xui-xl-w-25 {
    width: 25px;
  }

  .xui-xl-w-30 {
    width: 30px;
  }

  .xui-xl-w-35 {
    width: 35px;
  }

  .xui-xl-w-40 {
    width: 40px;
  }

  .xui-xl-w-45 {
    width: 45px;
  }

  .xui-xl-w-50 {
    width: 50px;
  }

  .xui-xl-w-55 {
    width: 55px;
  }

  .xui-xl-w-60 {
    width: 60px;
  }

  .xui-xl-w-65 {
    width: 65px;
  }

  .xui-xl-w-70 {
    width: 70px;
  }

  .xui-xl-w-75 {
    width: 75px;
  }

  .xui-xl-w-80 {
    width: 80px;
  }

  .xui-xl-w-85 {
    width: 85px;
  }

  .xui-xl-w-90 {
    width: 90px;
  }

  .xui-xl-w-95 {
    width: 95px;
  }

  .xui-xl-w-100 {
    width: 100px;
  }

  .xui-xl-w-150 {
    width: 150px;
  }

  .xui-xl-w-200 {
    width: 200px;
  }

  .xui-xl-w-250 {
    width: 250px;
  }

  .xui-xl-w-300 {
    width: 300px;
  }

  .xui-xl-w-350 {
    width: 350px;
  }

  .xui-xl-w-400 {
    width: 400px;
  }

  .xui-xl-w-450 {
    width: 450px;
  }

  .xui-xl-w-500 {
    width: 500px;
  }

  .xui-xl-w-600 {
    width: 600px;
  }

  .xui-xl-w-650 {
    width: 650px;
  }

  .xui-xl-w-700 {
    width: 700px;
  }

  .xui-xl-w-750 {
    width: 750px;
  }

  .xui-xl-w-800 {
    width: 800px;
  }

  .xui-xl-w-850 {
    width: 850px;
  }

  .xui-xl-w-900 {
    width: 900px;
  }

  .xui-xl-w-950 {
    width: 950px;
  }

  .xui-xl-w-1000 {
    width: 1000px;
  }

  .xui-xl-w-fluid-5 {
    width: 5%;
  }

  .xui-xl-w-fluid-10 {
    width: 10%;
  }

  .xui-xl-w-fluid-15 {
    width: 15%;
  }

  .xui-xl-w-fluid-20 {
    width: 20%;
  }

  .xui-xl-w-fluid-25 {
    width: 25%;
  }

  .xui-xl-w-fluid-30 {
    width: 30%;
  }

  .xui-xl-w-fluid-35 {
    width: 35%;
  }

  .xui-xl-w-fluid-40 {
    width: 40%;
  }

  .xui-xl-w-fluid-45 {
    width: 45%;
  }

  .xui-xl-w-fluid-50 {
    width: 50%;
  }

  .xui-xl-w-fluid-55 {
    width: 55%;
  }

  .xui-xl-w-fluid-60 {
    width: 60%;
  }

  .xui-xl-w-fluid-65 {
    width: 65%;
  }

  .xui-xl-w-fluid-70 {
    width: 70%;
  }

  .xui-xl-w-fluid-75 {
    width: 75%;
  }

  .xui-xl-w-fluid-80 {
    width: 80%;
  }

  .xui-xl-w-fluid-85 {
    width: 85%;
  }

  .xui-xl-w-fluid-90 {
    width: 90%;
  }

  .xui-xl-w-fluid-95 {
    width: 95%;
  }

  .xui-xl-w-fluid-100 {
    width: 100%;
  }

  .xui-xl-h-5 {
    height: 5px;
  }

  .xui-xl-h-10 {
    height: 10px;
  }

  .xui-xl-h-15 {
    height: 15px;
  }

  .xui-xl-h-20 {
    height: 20px;
  }

  .xui-xl-h-25 {
    height: 25px;
  }

  .xui-xl-h-30 {
    height: 30px;
  }

  .xui-xl-h-35 {
    height: 35px;
  }

  .xui-xl-h-40 {
    height: 40px;
  }

  .xui-xl-h-45 {
    height: 45px;
  }

  .xui-xl-h-50 {
    height: 50px;
  }

  .xui-xl-h-55 {
    height: 55px;
  }

  .xui-xl-h-60 {
    height: 60px;
  }

  .xui-xl-h-65 {
    height: 65px;
  }

  .xui-xl-h-70 {
    height: 70px;
  }

  .xui-xl-h-75 {
    height: 75px;
  }

  .xui-xl-h-80 {
    height: 80px;
  }

  .xui-xl-h-85 {
    height: 85px;
  }

  .xui-xl-h-90 {
    height: 90px;
  }

  .xui-xl-h-95 {
    height: 95px;
  }

  .xui-xl-h-100 {
    height: 100px;
  }

  .xui-xl-h-150 {
    height: 150px;
  }

  .xui-xl-h-200 {
    height: 200px;
  }

  .xui-xl-h-250 {
    height: 250px;
  }

  .xui-xl-h-300 {
    height: 300px;
  }

  .xui-xl-h-350 {
    height: 350px;
  }

  .xui-xl-h-400 {
    height: 400px;
  }

  .xui-xl-h-450 {
    height: 450px;
  }

  .xui-xl-h-500 {
    height: 500px;
  }

  .xui-xl-h-600 {
    height: 600px;
  }

  .xui-xl-h-650 {
    height: 650px;
  }

  .xui-xl-h-700 {
    height: 700px;
  }

  .xui-xl-h-750 {
    height: 750px;
  }

  .xui-xl-h-800 {
    height: 800px;
  }

  .xui-xl-h-850 {
    height: 850px;
  }

  .xui-xl-h-900 {
    height: 900px;
  }

  .xui-xl-h-950 {
    height: 950px;
  }

  .xui-xl-h-1000 {
    height: 1000px;
  }

  .xui-xl-h-full,
  .xui-xl-h-100vh {
    height: 100vh;
    height: 100dvh;
  }

  .xui-xl-h-fluid-5 {
    height: 5%;
  }

  .xui-xl-h-fluid-10 {
    height: 10%;
  }

  .xui-xl-h-fluid-15 {
    height: 15%;
  }

  .xui-xl-h-fluid-20 {
    height: 20%;
  }

  .xui-xl-h-fluid-25 {
    height: 25%;
  }

  .xui-xl-h-fluid-30 {
    height: 30%;
  }

  .xui-xl-h-fluid-35 {
    height: 35%;
  }

  .xui-xl-h-fluid-40 {
    height: 40%;
  }

  .xui-xl-h-fluid-45 {
    height: 45%;
  }

  .xui-xl-h-fluid-50 {
    height: 50%;
  }

  .xui-xl-h-fluid-55 {
    height: 55%;
  }

  .xui-xl-h-fluid-60 {
    height: 60%;
  }

  .xui-xl-h-fluid-65 {
    height: 65%;
  }

  .xui-xl-h-fluid-70 {
    height: 70%;
  }

  .xui-xl-h-fluid-75 {
    height: 75%;
  }

  .xui-xl-h-fluid-80 {
    height: 80%;
  }

  .xui-xl-h-fluid-85 {
    height: 85%;
  }

  .xui-xl-h-fluid-90 {
    height: 90%;
  }

  .xui-xl-h-fluid-95 {
    height: 95%;
  }

  .xui-xl-h-fluid-100 {
    height: 100%;
  }




  /*Displays*/
  .xui-xl-d-none {
    display: none;
  }

  .xui-xl-d-inline {
    display: inline;
  }

  .xui-xl-d-inline-block {
    display: inline-block;
  }

  .xui-xl-d-block {
    display: block;
  }

  .xui-xl-d-contents {
    display: contents;
  }

  .xui-xl-d-inline-flex {
    display: inline-flex;
  }

  .xui-xl-d-inline-grid {
    display: inline-grid;
  }

  .xui-xl-d-inline-table {
    display: inline-table;
  }

  .xui-xl-d-list-item {
    display: list-item;
  }

  .xui-xl-d-run-in {
    display: run-in;
  }

  .xui-xl-d-table {
    display: table;
  }

  .xui-xl-d-table-caption {
    display: table-caption;
  }

  .xui-xl-d-table-column-group {
    display: table-column-group;
  }

  .xui-xl-d-table-header-group {
    display: table-header-group;
  }

  .xui-xl-d-table-footer-group {
    display: table-footer-group;
  }

  .xui-xl-d-table-row-group {
    display: table-row-group;
  }

  .xui-xl-d-table-cell {
    display: table-cell;
  }

  .xui-xl-d-table-column {
    display: table-column;
  }

  .xui-xl-d-table-row {
    display: table-row;
  }

  .xui-xl-d-initial {
    display: initial;
  }

  .xui-xl-d-inherit {
    display: inherit;
  }

  .xui-xl-d-flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    -webkit-box-align: stretch;
    -moz-box-align: stretch;
    -ms-flex-jc-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
  }

  .xui-xl-d-grid {
    display: grid;
  }





  /* Min/Max Widths & Heights */
  .xui-xl-min-w-50 {
    min-width: 50px !important;
  }

  .xui-xl-min-w-100 {
    min-width: 100px !important;
  }

  .xui-xl-min-w-150 {
    min-width: 150px !important;
  }

  .xui-xl-min-w-200 {
    min-width: 200px !important;
  }

  .xui-xl-min-w-250 {
    min-width: 250px !important;
  }

  .xui-xl-min-w-300 {
    min-width: 300px !important;
  }

  .xui-xl-min-w-350 {
    min-width: 350px !important;
  }

  .xui-xl-min-w-400 {
    min-width: 400px !important;
  }

  .xui-xl-min-w-450 {
    min-width: 450px !important;
  }

  .xui-xl-min-w-500 {
    min-width: 500px !important;
  }

  .xui-xl-min-w-550 {
    min-width: 550px !important;
  }

  .xui-xl-min-w-600 {
    min-width: 600px !important;
  }

  .xui-xl-min-w-650 {
    min-width: 650px !important;
  }

  .xui-xl-min-w-700 {
    min-width: 700px !important;
  }

  .xui-xl-min-w-750 {
    min-width: 750px !important;
  }

  .xui-xl-min-w-800 {
    min-width: 800px !important;
  }

  .xui-xl-min-w-850 {
    min-width: 850px !important;
  }

  .xui-xl-min-w-900 {
    min-width: 900px !important;
  }

  .xui-xl-min-w-950 {
    min-width: 950px !important;
  }

  .xui-xl-min-w-1000 {
    min-width: 1000px !important;
  }

  .xui-xl-min-h-50 {
    min-height: 50px !important;
  }

  .xui-xl-min-h-100 {
    min-height: 100px !important;
  }

  .xui-xl-min-h-150 {
    min-height: 150px !important;
  }

  .xui-xl-min-h-200 {
    min-height: 200px !important;
  }

  .xui-xl-min-h-250 {
    min-height: 250px !important;
  }

  .xui-xl-min-h-300 {
    min-height: 300px !important;
  }

  .xui-xl-min-h-350 {
    min-height: 350px !important;
  }

  .xui-xl-min-h-400 {
    min-height: 400px !important;
  }

  .xui-xl-min-h-450 {
    min-height: 450px !important;
  }

  .xui-xl-min-h-500 {
    min-height: 500px !important;
  }

  .xui-xl-min-h-550 {
    min-height: 550px !important;
  }

  .xui-xl-min-h-600 {
    min-height: 600px !important;
  }

  .xui-xl-min-h-650 {
    min-height: 650px !important;
  }

  .xui-xl-min-h-700 {
    min-height: 700px !important;
  }

  .xui-xl-min-h-750 {
    min-height: 750px !important;
  }

  .xui-xl-min-h-800 {
    min-height: 800px !important;
  }

  .xui-xl-min-h-850 {
    min-height: 850px !important;
  }

  .xui-xl-min-h-900 {
    min-height: 900px !important;
  }

  .xui-xl-min-h-950 {
    min-height: 950px !important;
  }

  .xui-xl-min-h-1000 {
    min-height: 1000px !important;
  }

  .xui-xl-max-w-50 {
    max-width: 50px !important;
  }

  .xui-xl-max-w-100 {
    max-width: 100px !important;
  }

  .xui-xl-max-w-150 {
    max-width: 150px !important;
  }

  .xui-xl-max-w-200 {
    max-width: 200px !important;
  }

  .xui-xl-max-w-250 {
    max-width: 250px !important;
  }

  .xui-xl-max-w-300 {
    max-width: 300px !important;
  }

  .xui-xl-max-w-350 {
    max-width: 350px !important;
  }

  .xui-xl-max-w-400 {
    max-width: 400px !important;
  }

  .xui-xl-max-w-450 {
    max-width: 450px !important;
  }

  .xui-xl-max-w-500 {
    max-width: 500px !important;
  }

  .xui-xl-max-w-550 {
    max-width: 550px !important;
  }

  .xui-xl-max-w-600 {
    max-width: 600px !important;
  }

  .xui-xl-max-w-650 {
    max-width: 650px !important;
  }

  .xui-xl-max-w-700 {
    max-width: 700px !important;
  }

  .xui-xl-max-w-750 {
    max-width: 750px !important;
  }

  .xui-xl-max-w-800 {
    max-width: 800px !important;
  }

  .xui-xl-max-w-850 {
    max-width: 850px !important;
  }

  .xui-xl-max-w-900 {
    max-width: 900px !important;
  }

  .xui-xl-max-w-950 {
    max-width: 950px !important;
  }

  .xui-xl-max-w-1000 {
    max-width: 1000px !important;
  }

  .xui-xl-max-w-1100 {
    max-width: 1100px !important;
  }

  .xui-xl-max-w-1200 {
    max-width: 1200px !important;
  }

  .xui-xl-max-w-1300 {
    max-width: 1300px !important;
  }

  .xui-xl-max-w-1400 {
    max-width: 1400px !important;
  }

  .xui-xl-max-w-1500 {
    max-width: 1500px !important;
  }

  .xui-xl-max-w-1600 {
    max-width: 1600px !important;
  }

  .xui-xl-max-w-1700 {
    max-width: 1700px !important;
  }

  .xui-xl-max-w-1800 {
    max-width: 1800px !important;
  }

  .xui-xl-max-w-1900 {
    max-width: 1900px !important;
  }

  .xui-xl-max-w-2000 {
    max-width: 2000px !important;
  }

  .xui-xl-max-h-50 {
    max-height: 50px !important;
  }

  .xui-xl-max-h-100 {
    max-height: 100px !important;
  }

  .xui-xl-max-h-150 {
    max-height: 150px !important;
  }

  .xui-xl-max-h-200 {
    max-height: 200px !important;
  }

  .xui-xl-max-h-250 {
    max-height: 250px !important;
  }

  .xui-xl-max-h-300 {
    max-height: 300px !important;
  }

  .xui-xl-max-h-350 {
    max-height: 350px !important;
  }

  .xui-xl-max-h-400 {
    max-height: 400px !important;
  }

  .xui-xl-max-h-450 {
    max-height: 450px !important;
  }

  .xui-xl-max-h-500 {
    max-height: 500px !important;
  }

  .xui-xl-max-h-550 {
    max-height: 550px !important;
  }

  .xui-xl-max-h-600 {
    max-height: 600px !important;
  }

  .xui-xl-max-h-650 {
    max-height: 650px !important;
  }

  .xui-xl-max-h-700 {
    max-height: 700px !important;
  }

  .xui-xl-max-h-750 {
    max-height: 750px !important;
  }

  .xui-xl-max-h-800 {
    max-height: 800px !important;
  }

  .xui-xl-max-h-850 {
    max-height: 850px !important;
  }

  .xui-xl-max-h-900 {
    max-height: 900px !important;
  }

  .xui-xl-max-h-950 {
    max-height: 950px !important;
  }

  .xui-xl-max-h-1000 {
    max-height: 1000px !important;
  }





  /*Fonts*/
  .xui-xl-font-w-normal {
    font-weight: normal;
  }

  .xui-xl-font-w-bold {
    font-weight: bold;
  }

  .xui-xl-font-w-bolder {
    font-weight: bolder;
  }

  .xui-xl-font-w-lighter {
    font-weight: lighter;
  }

  .xui-xl-font-w-initial {
    font-weight: initial;
  }

  .xui-xl-font-w-inherit {
    font-weight: inherit;
  }

  .xui-xl-font-w-100 {
    font-weight: 100;
  }

  .xui-xl-font-w-200 {
    font-weight: 200;
  }

  .xui-xl-font-w-300 {
    font-weight: 300;
  }

  .xui-xl-font-w-400 {
    font-weight: 400;
  }

  .xui-xl-font-w-500 {
    font-weight: 500;
  }

  .xui-xl-font-w-600 {
    font-weight: 600;
  }

  .xui-xl-font-w-700 {
    font-weight: 700;
  }

  .xui-xl-font-w-800 {
    font-weight: 800;
  }

  .xui-xl-font-w-900 {
    font-weight: 900;
  }

  .xui-xl-font-sz-xx-small {
    font-size: xx-small;
  }

  .xui-xl-font-sz-x-small {
    font-size: x-small;
  }

  .xui-xl-font-sz-small {
    font-size: small;
  }

  .xui-xl-font-sz-x-large {
    font-size: x-large;
  }

  .xui-xl-font-sz-xx-large {
    font-size: xx-large;
  }

  .xui-xl-font-sz-smaller {
    font-size: smaller;
  }

  .xui-xl-font-sz-larger {
    font-size: larger;
  }

  .xui-xl-font-style-normal {
    font-style: normal;
  }

  .xui-xl-font-style-oblique {
    font-style: oblique;
  }

  .xui-xl-font-style-italic {
    font-style: italic;
  }

  .xui-xl-font-style-initial {
    font-style: initial;
  }

  .xui-xl-font-style-inherit {
    font-style: inherit;
  }

  .xui-xl-font-sz-initial {
    font-size: initial;
  }

  .xui-xl-font-sz-inherit {
    font-size: inherit;
  }

  .xui-xl-font-sz-50 {
    font-size: 50%;
  }

  .xui-xl-font-sz-55 {
    font-size: 55%;
  }

  .xui-xl-font-sz-60 {
    font-size: 60%;
  }

  .xui-xl-font-sz-65 {
    font-size: 65%;
  }

  .xui-xl-font-sz-70 {
    font-size: 70%;
  }

  .xui-xl-font-sz-75 {
    font-size: 75%;
  }

  .xui-xl-font-sz-80 {
    font-size: 80%;
  }

  .xui-xl-font-sz-85 {
    font-size: 85%;
  }

  .xui-xl-font-sz-90 {
    font-size: 90%;
  }

  .xui-xl-font-sz-95 {
    font-size: 95%;
  }

  .xui-xl-font-sz-100 {
    font-size: 100%;
  }

  .xui-xl-font-sz-105 {
    font-size: 105%;
  }

  .xui-xl-font-sz-110 {
    font-size: 110%;
  }

  .xui-xl-font-sz-115 {
    font-size: 115%;
  }

  .xui-xl-font-sz-120 {
    font-size: 120%;
  }

  .xui-xl-font-sz-125 {
    font-size: 125%;
  }

  .xui-xl-font-sz-130 {
    font-size: 130%;
  }

  .xui-xl-font-sz-135 {
    font-size: 135%;
  }

  .xui-xl-font-sz-140 {
    font-size: 140%;
  }

  .xui-xl-font-sz-145 {
    font-size: 145%;
  }

  .xui-xl-font-sz-150 {
    font-size: 150%;
  }

  .xui-xl-font-sz-155 {
    font-size: 155%;
  }

  .xui-xl-font-sz-160 {
    font-size: 160%;
  }

  .xui-xl-font-sz-165 {
    font-size: 165%;
  }

  .xui-xl-font-sz-170 {
    font-size: 170%;
  }

  .xui-xl-font-sz-175 {
    font-size: 175%;
  }

  .xui-xl-font-sz-180 {
    font-size: 180%;
  }

  .xui-xl-font-sz-185 {
    font-size: 185%;
  }

  .xui-xl-font-sz-190 {
    font-size: 190%;
  }

  .xui-xl-font-sz-195 {
    font-size: 195%;
  }

  .xui-xl-font-sz-200 {
    font-size: 200%;
  }

  .xui-xl-font-sz-205 {
    font-size: 205%;
  }

  .xui-xl-font-sz-210 {
    font-size: 210%;
  }

  .xui-xl-font-sz-215 {
    font-size: 215%;
  }

  .xui-xl-font-sz-220 {
    font-size: 220%;
  }

  .xui-xl-font-sz-225 {
    font-size: 225%;
  }

  .xui-xl-font-sz-230 {
    font-size: 230%;
  }

  .xui-xl-font-sz-235 {
    font-size: 235%;
  }

  .xui-xl-font-sz-240 {
    font-size: 240%;
  }

  .xui-xl-font-sz-245 {
    font-size: 245%;
  }

  .xui-xl-font-sz-250 {
    font-size: 250%;
  }

  .xui-xl-font-sz-300 {
    font-size: 300%;
  }

  .xui-xl-font-sz-350 {
    font-size: 350%;
  }

  .xui-xl-font-sz-400 {
    font-size: 400%;
  }

  .xui-xl-font-sz-450 {
    font-size: 450%;
  }

  .xui-xl-font-sz-500 {
    font-size: 500%;
  }

  .xui-xl-font-sz-550 {
    font-size: 550%;
  }

  .xui-xl-font-sz-600 {
    font-size: 600%;
  }

  .xui-xl-font-sz-650 {
    font-size: 650%;
  }

  .xui-xl-font-sz-700 {
    font-size: 700%;
  }

  .xui-xl-font-sz-750 {
    font-size: 750%;
  }

  .xui-xl-font-sz-800 {
    font-size: 800%;
  }

  .xui-xl-font-sz-850 {
    font-size: 850%;
  }

  .xui-xl-font-sz-900 {
    font-size: 900%;
  }

  .xui-xl-font-sz-950 {
    font-size: 950%;
  }

  .xui-xl-font-sz-1000 {
    font-size: 1000%;
  }




  /*Images*/
  .xui-xl-img-15 {
    display: block;
    max-width: 15px;
    width: 100%;
  }

  .xui-xl-img-20 {
    display: block;
    max-width: 20px;
    width: 100%;
  }

  .xui-xl-img-25 {
    display: block;
    max-width: 25px;
    width: 100%;
  }

  .xui-xl-img-30 {
    display: block;
    max-width: 30px;
    width: 100%;
  }

  .xui-xl-img-35 {
    display: block;
    max-width: 35px;
    width: 100%;
  }

  .xui-xl-img-40 {
    display: block;
    max-width: 40px;
    width: 100%;
  }

  .xui-xl-img-45 {
    display: block;
    max-width: 45px;
    width: 100%;
  }

  .xui-xl-img-50 {
    display: block;
    max-width: 50px;
    width: 100%;
  }

  .xui-xl-img-100 {
    display: block;
    max-width: 100px;
    width: 100%;
  }

  .xui-xl-img-150 {
    display: block;
    max-width: 150px;
    width: 100%;
  }

  .xui-xl-img-200 {
    display: block;
    max-width: 200px;
    width: 100%;
  }

  .xui-xl-img-250 {
    display: block;
    max-width: 250px;
    width: 100%;
  }

  .xui-xl-img-300 {
    display: block;
    max-width: 300px;
    width: 100%;
  }

  .xui-xl-img-350 {
    display: block;
    max-width: 350px;
    width: 100%;
  }

  .xui-xl-img-400 {
    display: block;
    max-width: 400px;
    width: 100%;
  }

  .xui-xl-img-450 {
    display: block;
    max-width: 450px;
    width: 100%;
  }

  .xui-xl-img-500 {
    display: block;
    max-width: 500px;
    width: 100%;
  }

  .xui-xl-img-550 {
    display: block;
    max-width: 550px;
    width: 100%;
  }

  .xui-xl-img-600 {
    display: block;
    max-width: 600px;
    width: 100%;
  }

  .xui-xl-img-650 {
    display: block;
    max-width: 650px;
    width: 100%;
  }

  .xui-xl-img-700 {
    display: block;
    max-width: 700px;
    width: 100%;
  }

  .xui-xl-img-750 {
    display: block;
    max-width: 750px;
    width: 100%;
  }

  .xui-xl-img-800 {
    display: block;
    max-width: 800px;
    width: 100%;
  }

  .xui-xl-img-850 {
    display: block;
    max-width: 850px;
    width: 100%;
  }

  .xui-xl-img-900 {
    display: block;
    max-width: 900px;
    width: 100%;
  }

  .xui-xl-img-950 {
    display: block;
    max-width: 950px;
    width: 100%;
  }

  .xui-xl-img-1000 {
    display: block;
    max-width: 1000px;
    width: 100%;
  }

  .xui-xl-img-responsive {
    display: block;
    width: 100%;
  }




  /* Modals */
  .xui-xl-modal-center {
    justify-content: center;
    align-items: center;
  }

  .xui-xl-modal-top-left {
    justify-content: flex-start;
    align-items: flex-start;
  }

  .xui-xl-modal-top-right {
    justify-content: flex-end;
    align-items: flex-start;
  }

  .xui-xl-modal-bottom-left {
    justify-content: flex-start;
    align-items: flex-end;
  }

  .xui-xl-modal-bottom-right {
    justify-content: flex-end;
    align-items: flex-end;
  }

  .xui-xl-modal-bottom-center {
    justify-content: center;
    align-items: flex-end;
  }




  /*Containers Spacing*/
  .xui-container {
    max-width: 1440px;
    padding-left: 100px;
    padding-right: 100px;
  }

  .xui-left-fluid {
    left: 100px;
  }

  .xui-right-fluid {
    right: 100px;
  }

}



/*Dark Mode*/
body.xui-dark-mode {
  --dark-toggle-bg: #3a3a3a;
  /* Track (off state) */
  --dark-toggle-handle: #e0e0e0;
  /* Handle (off state) */

  /* Base colors (inverted or softened) */
  --black: #f0f0f0;
  /* Light gray instead of pure black for text */
  --white: #121212;
  /* Dark background instead of pure white */
  --opacitated-pressed: rgba(255, 255, 255, 0.15);
  /* Light press effect */
  --th-opacitated: #a0a4ad;
  /* Lighter gray for dark mode */

  /* Text & UI Grays (softer, less contrast) */
  --text-opacitated: rgba(255, 255, 255, 0.85);
  /* Light text on dark */
  --disabled-opacitated: rgba(255, 255, 255, 0.08);
  /* Subtle disabled */
  --hovered-opacitated: rgba(255, 255, 255, 0.1);
  /* Hover state */
  --disabled-text-opacitated: rgba(255, 255, 255, 0.3);
  /* Dimmed text */

  /* Gray scale (adjusted for dark mode) */
  --gray-300: #3a3f4b;
  /* Darker muted borders */
  --gray-500: #7a7f8b;
  /* Mid-gray for secondary text */
  --gray-600: #9a9ea8;
  /* Lighter gray for icons */
  --gray-700: #b4b8c2;
  /* Subtle accents */
  --gray-800: #d0d3d9;
  /* Near-white for high contrast */
  --gray-900: #e8e9ec;
  /* Lightest gray (almost white) */

  /* Component-specific (softer in dark mode) */
  --default-border: #3a3f4b;
  /* Darker borders */
  --default-table-background: #1e1e1e;
  /* Dark table bg */

  /* Adjusted for Dark Mode (Softer, Less Neon) */
  --brand-50: #1a1029;
  /* Deep purple (replaces light tint) */
  --brand-300: #9d7bd4;
  /* Muted lavender (less saturation) */
  --brand-600: #6b3dbf;
  /* Darker, softer purple */

  /* Error Colors (Less Intense) */
  --error-50: #2a0a07;
  /* Dark red base */
  --error-300: #e67a73;
  /* Softened red */
  --error-500: #d33a2f;
  /* Less aggressive than #F04438 */
  --error-700: #8a1e19;
  /* Deep maroon */

  /* Success Colors (Muted Greens) */
  --success-50: #0a1f12;
  /* Dark green base */
  --success-500: #0e9d5a;
  /* Softer than #12B76A */
  --success-700: #0a5c36;
  /* Darker green */

  /* Warning Colors (Warmer, Less Yellow) */
  --warning-50: #2a1d09;
  /* Dark brown base */
  --warning-500: #e68a3d;
  /* Muted orange (replaces #FC8822) */
  --warning-700: #b35a0a;
  /* Darker burnt orange */
}

.xui-dark-mode {
  background-color: #000000;
  color: #e9e9e9;
}

.xui-dark-mode .xui-bg-white-switch {
  background-color: #000000;
}

.xui-dark-mode .xui-bg-black-switch {
  background-color: #FFFFFF;
}

.xui-dark-mode .xui-text-white-switch {
  color: #000000;
}

.xui-dark-mode .xui-text-black-switch {
  color: #FFFFFF;
}

.xui-dark-mode .xui-bg-light,
.xui-dark-mode .xui-bg-light-1,
.xui-dark-mode .xui-bg-light-blue,
.xui-dark-mode .xui-bg-light-blue-1,
.xui-dark-mode .xui-bg-light-red,
.xui-dark-mode .xui-bg-light-red-1,
.xui-dark-mode .xui-bg-light-green,
.xui-dark-mode .xui-bg-light-green-1 {
  background-color: #0f0f0f;
}

.xui-dark-mode .xui-bg-light-2,
.xui-dark-mode .xui-bg-light-blue-2,
.xui-dark-mode .xui-bg-light-red-2,
.xui-dark-mode .xui-bg-light-green-2 {
  background-color: #141414;
}

.xui-dark-mode .xui-bg-light-3,
.xui-dark-mode .xui-bg-light-blue-3,
.xui-dark-mode .xui-bg-light-red-3,
.xui-dark-mode .xui-bg-light-green-3 {
  background-color: #262626;
}

.xui-dark-mode .xui--skeleton,
.xui-dark-mode .xui--skeleton::before {
  background-color: #2b2b2b;
}

.xui-dark-mode .xui--skeleton::after {
  background: linear-gradient(90deg,
      transparent,
      rgba(0, 0, 0, 0.1),
      transparent);
}

.xui-dark-mode .xui-navbar .xui-navbar-profile {
  background-color: #1f1f1f;
}

.xui-dark-mode .xui-fill-white {
  fill: #121212;
}

.xui-dark-mode .xui-fill-black {
  fill: #F1F1F1;
}

.xui-dark-mode .xui-fill-fade {
  fill: #F1F1F1;
  opacity: .5;
}

.xui-dark-mode .xui-navbar .menu span {
  background-color: #F1F1F1;
}

.xui-dark-mode .xui-btn-fade {
  color: #F1F1F1;
}

.xui-dark-mode .xui-bg-lazy {
  background-color: #0D0D0D;
}

.xui-dark-mode .xui-box-shadow,
.xui-dark-mode .xui-box-shadow-1 {
  -moz-box-shadow: 1px 1px 4px 1px rgba(255, 255, 255, .1);
  -webkit-box-shadow: 1px 1px 4px 1px rgba(255, 255, 255, .1);
  box-shadow: 1px 1px 4px 1px rgba(255, 255, 255, .1);
}

.xui-dark-mode .xui-box-shadow-2 {
  -moz-box-shadow: 1px 1px 4px 1px rgba(255, 255, 255, .075);
  -webkit-box-shadow: 1px 1px 4px 1px rgba(255, 255, 255, .075);
  box-shadow: 1px 1px 4px 1px rgba(255, 255, 255, .075);
}

.xui-dark-mode .xui-box-shadow-3 {
  -moz-box-shadow: 1px 1px 4px 1px rgba(255, 255, 255, .05);
  -webkit-box-shadow: 1px 1px 4px 1px rgba(255, 255, 255, .05);
  box-shadow: 1px 1px 4px 1px rgba(255, 255, 255, .05);
}

.xui-dark-mode .xui-form input,
.xui-dark-mode .xui-form-input,
.xui-dark-mode .xui-form select,
.xui-dark-mode .xui-form-select,
.xui-dark-mode .xui-form textarea,
.xui-dark-mode .xui-form-textarea,
.xui-dark-mode .xui-form-textbox {
  border: 1px solid #999999;
}

.xui-dark-mode .xui-form select option,
.xui-dark-mode .xui-form-select option {
  background-color: #000000;
}

.xui-dark-mode .xui-form input:focus,
.xui-dark-mode .xui-form-input:focus,
.xui-dark-mode .xui-form select:focus,
.xui-dark-mode .xui-form-select,
:focus .xui-dark-mode .xui-form textarea:focus,
.xui-dark-mode .xui-form-textarea:focus,
.xui-dark-mode .xui-form-textbox:focus {
  border: 1px solid #B2B2B2;
}

.xui-dark-mode .xui-effect-ripple::before,
.xui-dark-mode .xui-effect-ripple::after {
  background-color: #FFFFFF;
}

.xui-dark-mode .xui-bdr-black {
  border-color: #FFFFFF !important;
}

.xui-dark-mode .xui-bdr-white {
  border-color: #000000 !important;
}

.xui-dark-mode .xui-modal {
  background-color: rgba(8, 8, 8, 0.88);
}

.xui-dark-mode .xui-modal .xui-modal-content,
.xui-dark-mode .xui-modal .content {
  background-color: #000000;
}

.xui-dark-mode .xui-table tr th {
  background-color: #0C0C0C;
}

body.xui-dark-mode .xui-form input,
body.xui-dark-mode .xui-form-input,
body.xui-dark-mode .xui-form select,
body.xui-dark-mode .xui-form-select,
body.xui-dark-mode .xui-form textarea,
body.xui-dark-mode .xui-form-textarea,
body.xui-dark-mode .xui-form-textbox,
body.xui-dark-mode .xui-form .input-holder .left,
body.xui-dark-mode .xui-form .input-holder .right {
  /* Background: Near-black gray (soothing, not pure black) */
  background-color: var(--dark-input-bg, #1a1a1a);
  /* Custom var or fallback */

  /* Text: Light gray (soft contrast) */
  color: var(--dark-input-text, #e0e0e0);

  /* Border: Subtle dark gray (softer than --gray-300) */
  border-color: var(--dark-input-border, #3a3a3a);
}

body.xui-dark-mode .xui-toggle-switch .slider {
  background-color: var(--dark-toggle-bg, #3a3a3a);
  /* Dark gray track */
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
  /* Subtle inner shadow */
}

body.xui-dark-mode .xui-toggle-switch .slider:before {
  background-color: var(--dark-toggle-handle, #e0e0e0);
  /* Light gray handle */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  /* Darker shadow for depth */
}

body.xui-dark-mode .xui-form input[type="checkbox"]:checked:before,
body.xui-dark-mode .xui-form input[type="radio"]::before {
  background-color: var(--dark-toggle-handle);
}

body.xui-dark-mode .xui-form input[type="checkbox"]:checked::after,
body.xui-dark-mode .xui-form input[type="radio"]:checked::after {
  background-color: var(--dark-toggle-bg);
}

body.xui-dark-mode .xui-form input[type="radio"],
body.xui-dark-mode .xui-form-input[type="radio"] {
  border: none;
}

.xui-dark-mode input:-webkit-autofill,
.xui-dark-mode input:-webkit-autofill:hover,
.xui-dark-mode input:-webkit-autofill:focus,
.xui-dark-mode input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--black) !important;
}

body.xui-dark-mode .xui-navbar .menu {
  background-color: rgba(255, 255, 255, 0.08);
  /* Light overlay on dark */
}