@richaadgigi/stylexui/css/xui.css

Build responsive, beautiful interfaces faster than ever with utility-first classes and smart defaults. No bloat. No fuss. Just results.

/*!
 * 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