/* ── Site Header ─────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  z-index: 1000;
  width: 100%;
  background: transparent;
  padding: 12px 0;
}

.site-header__wrap {
  max-width: var(--w-max-content, 900px);
  margin: 0 auto;
  padding: 0 24px;
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  backdrop-filter: blur(16px);
  border-radius: 55px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 8px 32px rgba(42, 38, 35, 0.06);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.site-header__bar--scrolled {
  box-shadow: 0 12px 48px rgba(42, 38, 35, 0.10);
  border-color: rgba(255, 255, 255, 0.55);
}

.site-header__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.site-header__logo svg {
  height: 24px;
  width: auto;
}

/* ── Desktop Nav ── */
.site-header__nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 24px;
}

.site-header__link {
  font-size: 14px;
  font-weight: 500;
  color: #2a2623;
  font-weight: 600;
  text-decoration: none;
  padding: 7px 14px;
  border-radius: 999px;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}

.site-header__link:hover {
  color: #2A2623;
  background: rgba(42, 38, 35, 0.05);
}

.site-header__link--active {
  color: #2A2623;
  font-weight: 600;
  background: rgba(42, 38, 35, 0.06);
}

/* ── Desktop Actions ── */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.site-header__sign-in {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  padding: 7px 12px;
  border-radius: 999px;
  white-space: nowrap;
  transition: color 0.15s;
}

.site-header__sign-in:hover {
  color: #2A2623;
}

.site-header__sign-in svg {
  opacity: 0.6;
  transition: opacity 0.15s, transform 0.15s;
}

.site-header__sign-in:hover svg {
  opacity: 1;
  transform: translateX(2px);
}

.site-header__cta {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--color-primary);
  padding: 8px 18px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}

.site-header__cta:hover {
  background: #022B1D;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(3, 60, 41, 0.20);
}

/* ── Mobile Hamburger ── */
.site-header__hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s;
}

.site-header__hamburger:hover {
  background: rgba(42, 38, 35, 0.05);
}

.site-header__hamburger-line,
.site-header__hamburger-line::before,
.site-header__hamburger-line::after {
  display: block;
  width: 18px;
  height: 2px;
  background: #2A2623;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.15s ease;
  position: relative;
}

.site-header__hamburger-line::before,
.site-header__hamburger-line::after {
  content: '';
  position: absolute;
  left: 0;
  width: 18px;
}

.site-header__hamburger-line::before {
  top: -6px;
}

.site-header__hamburger-line::after {
  top: 6px;
}

.site-header__hamburger-line--open {
  background: transparent;
}

.site-header__hamburger-line--open::before {
  top: 0;
  transform: rotate(45deg);
}

.site-header__hamburger-line--open::after {
  top: 0;
  transform: rotate(-45deg);
}

/* ── Mobile Menu Overlay ── */
.site-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  visibility: hidden;
}

.site-mobile-menu--open {
  pointer-events: auto;
  visibility: visible;
}

.site-mobile-menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(42, 38, 35, 0.25);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.site-mobile-menu--open .site-mobile-menu__backdrop {
  opacity: 1;
}

.site-mobile-menu__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 360px;
  height: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: -16px 0 48px rgba(42, 38, 35, 0.12);
}

.site-mobile-menu--open .site-mobile-menu__panel {
  transform: translateX(0);
}
body:has(.site-header__hamburger[aria-expanded="true"]) .site-header__bar {
  box-shadow: none;
}

.site-mobile-menu__header {
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #EEEBE3;
}

.site-mobile-menu__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
  color: #6F6860;
  transition: background 0.15s, color 0.15s;
}

.site-mobile-menu__close:hover {
  background: rgba(42, 38, 35, 0.05);
  color: #2A2623;
}

.site-mobile-menu__nav {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  padding: 8px 12px;
}

.site-mobile-menu__link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  color: #3D3935;
  text-decoration: none;
  padding: 14px 18px;
  font-weight: 600;
  border-radius: 24px;
  transition: background 0.15s;
}

.site-mobile-menu__link:hover {
  background: rgba(42, 38, 35, 0.04);
}

.site-mobile-menu__link--active {
  color: var(--color-brand);
  font-weight: 600;
  background: rgba(3, 60, 41, 0.06);
}

.site-mobile-menu__link svg {
  color: #A9A49E;
  flex-shrink: 0;
}

.site-mobile-menu__footer {
  display: flex;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid #EEEBE3;
}

.site-mobile-menu__btn {
  flex: 1 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, color 0.15s;
}

.site-mobile-menu__btn--ghost {
  color: #3D3935;
  background: #F8F6F1;
}

.site-mobile-menu__btn--ghost:hover {
  background: #EEEBE3;
}

.site-mobile-menu__btn--filled {
  color: #fff;
  background: var(--color-brand);
}

.site-mobile-menu__btn--filled:hover {
  background: #022B1D;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .site-header__nav {
    display: none;
  }
  .site-header__actions {
    display: none;
  }
  .site-header__hamburger {
    display: flex;
  }
}

@media (max-width: 640px) {
  .site-header__wrap {
    padding: 0 16px;
  }
  .site-header__bar {
    padding: 8px 14px;
  }
}

/* User */

.user-select-none {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

/* Opacity */

.opacity-0 {
    opacity: 0;
}
.hover-opacity-0:hover {
    opacity: 0!important;
}
.opacity-25 {
    opacity: 0.25;
}
.opacity-50 {
    opacity: 0.5;
}
.opacity-75 {
    opacity: 0.75;
}
.opacity-100 {
    opacity: 1!important;
}
.hover-opacity-100:hover {
    opacity: 1!important;
}
.hover-opacity-50:hover {
    opacity: .50!important;
}
.hover-opacity-75:hover {
    opacity: .75!important;
}
.hover-opacity-90:hover {
    opacity: .90!important;
}

.brightness-25 {
    filter: brightness(0.25);
}
.filter-brightness-50 {
    filter: brightness(0.5);
}
.filter-brightness-75 {
    filter: brightness(0.75);
}
.filter-brightness-blur {
    filter: brightness(0.75) blur(1px);
}
.filter-hover-none:hover {
    filter: none!important;
}
.filter-grayscale {
    filter: grayscale(1);
}
.filter-grayscale-0-hover:hover {
    filter: grayscale(0);
}

.visibility-hidden {
    visibility: hidden;
}
.visibility-visible {
    visibility: visible;
}

.bg-hover-after {
    position: relative;
    overflow: hidden;
}
.bg-hover-after:after {
    transition: opacity var(--transition-duration) ease-in-out;
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transition-duration: var(--transition-duration);
    border-radius: 0;
}
.bg-hover-after:hover:after {
    opacity: 0.15;
    z-index: 1;
} 

/* Position */

.pos-absolute {
    position: absolute;
}
.pos-initial {
    position: initial!important;
}
.pos-relative {
    position: relative;
}
.pos-fixed {
    position: fixed;
}
.pos-sticky {
    position: -webkit-sticky;
    position: sticky;
}
.sticky {
    position: -webkit-sticky;
    position: sticky;
    /* top: var(--header-height); */
    top: 0;
    z-index: 1;
}

/* Display */

.d-none {
    display: none!important;
}
.d-lg-none {
    display: none!important;
}
.d-block {
    display: block;
}

/* Colors */

.bg-border {
    background-color: var(--color-border);
}
.bg-brand {
    background-color: var(--color-brand)!important;
}
.bg-primary {
    background-color: var(--color-primary-bg)!important;
}
.bg-primary-text {
    background-color: var(--color-primary-text)!important;
}
.bg-danger-text {
    background-color: var(--color-danger-text)!important;
}
.bg-warning-text {
    background-color: var(--color-warning-text)!important;
}
.bg-success-text {
    background-color: var(--color-success-text)!important;
}
.bg-danger {
    background-color: var(--color-danger-bg)!important;
}
.bg-success {
    background-color: var(--color-success-bg)!important;
}
.bg-warning {
    background-color: var(--color-warning-bg)!important;
}
.bg-text {
    background-color: var(--text-dark)!important;
}
.bg-text-hover:hover {
    background-color: var(--text-dark)!important;
}
.bg-secondary-button { 
    background-color: rgb(var(--color-general-secondary-bg))!important;
}
.bg-secondary {
    background-color: var(--color-secondary)!important;
}
.bg-secondary-hover:hover {
    background-color: var(--color-secondary)!important;
}
.bg-secondary-active:active {
    background-color: var(--color-secondary)!important;
}
.bg-tertiary-hover:hover {
    background-color: var(--color-tertiary)!important;
}
.bg-danger-hover:hover {
    background-color: var(--color-danger)!important;
}
.bg-success-hover:hover {
    background-color: var(--color-success)!important;
}
.bg-warning-hover:hover {
    background-color: var(--color-warning)!important;
}
.bg-tertiary {
    background-color: var(--color-tertiary);
}
.bg-transparent {
    background-color: transparent;
}
.bg-main {
    background-color: var(--color-main)!important;
}
.bg-main-hover:hover {
    background-color: var(--color-main)!important;
}
.bg-dark {
    background-color: var(--text-dark);
}
.bg-light {
    background-color: var(--text-light);
}
.bg-white {
    background-color: #fff;
}
.bg-black {
    background-color: #000;
}
.bg-backdrop-blur {
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
    background-color: rgba(0, 0, 0, 0.85);
}
.bg-disabled {
    background-color: var(--color-border);
    /* opacity: 0.8; */
    cursor: not-allowed;
    background-size: 6px 6px;
    background-image: repeating-linear-gradient(45deg, var(--color-border) 0, var(--color-border) 1px, var(--text-light) 0, var(--text-light) 50%);
}
.mask-image-100 {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 100%);
    mask-image: linear-gradient(90deg, transparent, #000 100%);
}
.mask-image-bottom {
    -webkit-mask-image: linear-gradient(0deg, transparent, #000 50%);
    mask-image: linear-gradient(0deg, transparent, #000 50%);
}
.mask-image-bottom-100 {
    -webkit-mask-image: linear-gradient(0deg, transparent, #000 100%);
    mask-image: linear-gradient(0deg, transparent, #000 100%);
}
.bg-unavailable {
    /* background-color: var(--color-overlay); */
    background-size: 10px 10px;
    background-image: repeating-linear-gradient(45deg, var(--color-overlay) 0, var(--color-overlay) 1px, var(--color-overlay) 0, var(--color-overlay) 50%);
}
.mask-right {
    -webkit-mask: linear-gradient(90deg, black 30%, transparent 100%);
            mask: linear-gradient(90deg, black 30%, transparent 100%);
}
.mask-left {
    -webkit-mask: linear-gradient(270deg, black 30%, transparent 100%);
            mask: linear-gradient(270deg, black 30%, transparent 100%);
}
.mask-top {
    -webkit-mask: linear-gradient(0deg, black 30%, transparent 100%);
            mask: linear-gradient(0deg, black 30%, transparent 100%);
}
.mask-bottom {
    -webkit-mask: linear-gradient(180deg, black 30%, transparent 100%);
            mask: linear-gradient(180deg, black 30%, transparent 100%);
}
.tag-brand svg {
    fill: var(--color-brand-text);
}
.tag-brand {
    border-color: var(--color-brand-bg)!important;
    background-color: var(--color-brand-bg);
    color: var(--color-brand-text);
}
.tag-brand-filled svg {
    fill: var(--text-light)!important;
}
.tag-brand-filled {
    border-color: var(--color-brand)!important;
    background-color: var(--color-brand);
    color: var(--text-light)!important;
}
.tag-primary svg {
    fill: rgb(var(--color-general-primary-text))!important;
}
.tag-primary {
    border-color: rgb(var(--color-general-primary-border))!important;
    background-color: rgb(var(--color-general-primary-bg));
    color: rgb(var(--color-general-primary-text));
}
.tag-danger svg {
    fill: rgb(var(--color-general-danger-text))!important;
}
.tag-danger {
    border-color: rgb(var(--color-general-danger-border))!important;
    background-color: rgb(var(--color-general-danger-bg));
    color: rgb(var(--color-general-danger-text));
}
.tag-warning svg {
    fill: rgb(var(--color-general-warning-text))!important;
}
.tag-warning {
    border-color: rgb(var(--color-general-warning-border))!important;
    background-color: rgb(var(--color-general-warning-bg));
    color: rgb(var(--color-general-warning-text));
}
.tag-secondary svg {
    fill: rgb(var(--color-general-secondary-text))!important;
}
.tag-text {
    border-color: var(--text-dark)!important;
    background-color: var(--text-dark);
    color: var(--text-light);
}
.tag-text svg {
    fill: var(--text-light)!important;
}
.tag-secondary {
    border-color: rgb(var(--color-general-secondary-border))!important;
    background-color: rgb(var(--color-general-secondary-bg));
    color: rgb(var(--color-general-secondary-text));
}
.tag-success svg {
    fill: rgb(var(--color-general-success-text))!important;
    color: rgb(var(--color-general-success-text))!important;
}
.tag-success {
    border-color: rgb(var(--color-general-success-text))!important;
    background-color: rgb(var(--color-general-success-bg));
    color: rgb(var(--color-general-success-text));
}
.tag-color-1 svg {
    fill: var(--color-1-text)!important;
}
.tag-color-1 {
    background-color: var(--color-1-bg);
    color: var(--color-1-text);
    border-color: var(--color-1-border)!important;
}
.tag-color-2 svg {
    fill: var(--color-2-text)!important;
}
.tag-color-2 {
    background-color: var(--color-2-bg);
    color: var(--color-2-text);
    border-color: var(--color-2-border)!important;
}
.tag-color-3 svg {
    fill: var(--color-3-text)!important;
}
.tag-color-3 {
    background-color: var(--color-3-bg);
    color: var(--color-3-text);
    border-color: var(--color-3-border)!important;
}
.tag-color-7 svg {
    fill: var(--color-7-text)!important;
}
.tag-color-7 {
    background-color: var(--color-7-bg);
    color: var(--color-7-text);
    border-color: var(--color-7-border)!important;
}
.tag-color-4 svg {
    fill: var(--color-4-text)!important;
}
.tag-color-4 {
    background-color: var(--color-4-bg);
    color: var(--color-4-text);
    border-color: var(--color-4-border)!important;
}
.tag-color-5 svg {
    fill: var(--color-5-text)!important;
}
.tag-color-5 {
    background-color: var(--color-5-bg);
    color: var(--color-5-text);
    border-color: var(--color-5-border)!important;
}
.tag-color-6 svg {
    fill: var(--color-6-text)!important;
}
.tag-color-6 {
    background-color: var(--color-6-bg);
    color: var(--color-6-text);
    border-color: var(--color-6-border)!important;
}
.tag-color-7 svg {
    fill: var(--color-7-text)!important;
}
.tag-color-7 {
    background-color: var(--color-7-bg);
    color: var(--color-7-text);
    border-color: var(--color-7-border)!important;
}
.tag-color-8 svg {
    fill: var(--color-8-text)!important;
}
.tag-color-8 {
    background-color: var(--color-8-bg);
    color: var(--color-8-text);
    border-color: var(--color-8-border)!important;
}
.tag-color-9 svg {
    fill: var(--color-9-text)!important;
}
.tag-color-9 {
    background-color: var(--color-9-bg);
    color: var(--color-9-text);
    border-color: var(--color-9-border)!important;
}
.tag-color-10 svg {
    fill: var(--color-10-text)!important;
}
.tag-color-10 {
    background-color: var(--color-10-bg);
    color: var(--color-10-text);
    border-color: var(--color-10-border)!important;
}
.tag-color-11 svg {
    fill: var(--color-11-text)!important;
}
.tag-color-11 {
    background-color: var(--color-11-bg);
    color: var(--color-11-text);
    border-color: var(--color-11-border)!important;
}
.tag-color-12 svg {
    fill: var(--color-12-text)!important;
}
.tag-color-12 {
    background-color: var(--color-12-bg);
    color: var(--color-12-text);
    border-color: var(--color-12-border)!important;
}

/* User colors */
.bg-color-1 {
    background-color: var(--color-1-bg);
}
.bg-color-2 {
    background-color: var(--color-2-bg);
}
.bg-color-3 {
    background-color: var(--color-3-bg);
}
.bg-color-4 {
    background-color: var(--color-4-bg);
}
.bg-color-5 {
    background-color: var(--color-5-bg);
}
.bg-color-6 {
    background-color: var(--color-6-bg);
}
.bg-color-7 {
    background-color: var(--color-7-bg);
}
.bg-color-8 {
    background-color: var(--color-8-bg);
}
.bg-color-9 {
    background-color: var(--color-9-bg);
}
.bg-color-10 {
    background-color: var(--color-10-bg);
}
.bg-color-11 {
    background-color: var(--color-11-bg);
}

.text-color-1 {
    color: var(--color-1-text);
}
.text-color-2 {
    color: var(--color-2-text);
}
.text-color-3 {
    color: var(--color-3-text);
}
.text-color-4 {
    color: var(--color-4-text);
}
.text-color-5 {
    color: var(--color-5-text);
}
.text-color-6 {
    color: var(--color-6-text);
}
.text-color-7 {
    color: var(--color-7-text);
}
.text-color-8 {
    color: var(--color-8-text);
}
.text-color-9 {
    color: var(--color-9-text);
}
.text-color-10 {
    color: var(--color-10-text);
}
.text-color-11 {
    color: var(--color-11-text);
}
/* User colors */
.fill-color-1 svg {
    fill: var(--color-1-text)!important;
}
.fill-color-2 svg {
    fill: var(--color-2-text)!important;
}
.fill-color-3 svg {
    fill: var(--color-3-text)!important;
}
.fill-color-4 svg {
    fill: var(--color-4-text)!important;
}
.fill-color-5 svg {
    fill: var(--color-5-text)!important;
}
.fill-color-6 svg {
    fill: var(--color-6-text)!important;
}
.fill-color-7 svg {
    fill: var(--color-7-text)!important;
}
.fill-color-8 svg {
    fill: var(--color-8-text)!important;
}
.fill-color-9 svg {
    fill: var(--color-9-text)!important;
}
.fill-color-10 svg {
    fill: var(--color-10-text)!important;
}
.fill-color-11 svg {
    fill: var(--color-11-text)!important;
}
.fill-brand svg {
    fill: var(--color-brand)!important;
    color: var(--color-brand)!important;
}

.border-color-1 {
    border-color: var(--color-1-border);
}
.border-color-2 {
    border-color: var(--color-2-border);
}
.border-color-3 {
    border-color: var(--color-3-border);
}
.border-color-4 {
    border-color: var(--color-4-border);
}
.border-color-5 {
    border-color: var(--color-5-border);
}
.border-color-6 {
    border-color: var(--color-6-border);
}
.border-color-7 {
    border-color: var(--color-7-border);
}
.border-color-8 {
    border-color: var(--color-8-border);
}
.border-color-9 {
    border-color: var(--color-9-border);
}
.border-color-10 {
    border-color: var(--color-10-border);
}
.border-color-11 {
    border-color: var(--color-11-border);
}


.bg-hover {
    transition-duration: var(--transition-duration);
}
.bg-hover:hover {
    background-color: var(--color-secondary);
}

/* Other */

.outline-none {
    outline: none!important;
}

.border-color {
    border-color: var(--color-border)!important;
}
.border-color-primary {
    border-color: var(--color-primary)!important;
}
.border-color-main {
    border-color: var(--color-main)!important;
}
.border-color-text {
    border-color: var(--text-dark)!important;
}
.StripeElement--focus {
    border-color: var(--text-dark)!important;
    box-shadow: 0px 0px 0 1px var(--text-dark)!important;
}
.border-color-brand {
    border-color: var(--color-brand)!important;
}
.border-bottom-radius-lg {
    border-bottom-left-radius: var(--border-radius-lg)!important;
    border-bottom-right-radius: var(--border-radius-lg)!important;
}
.border-top-radius-lg {
    border-top-left-radius: var(--border-radius-lg)!important;
    border-top-right-radius: var(--border-radius-lg)!important;
}
.border-radius-lg {
    border-radius: var(--border-radius-lg)!important;
}
.border-radius-rounded {
    border-radius: 100px!important;
}
.border-radius {
    border-radius: var(--border-radius)!important;
}
.border-radius-sm {
    border-radius: var(--border-radius-sm)!important;
}
.border-radius-md {
    border-radius: var(--border-radius-md)!important;
}
.border-radius-xs {
    border-radius: var(--border-radius-xs)!important;
}
.border-radius-child-none:hover .hover::before {
    border-radius: 0!important;
}
.border-radius-left-lg {
    border-bottom-left-radius: var(--border-radius-lg)!important;
    border-top-left-radius: var(--border-radius-lg)!important;
}
.border-radius-left-md {
    border-bottom-left-radius: var(--border-radius-md)!important;
    border-top-left-radius: var(--border-radius-md)!important;
}
.border-radius-left {
    border-bottom-left-radius: var(--border-radius)!important;
    border-top-left-radius: var(--border-radius)!important;
}
.border-radius-top-left {
    border-top-left-radius: var(--border-radius)!important;
}
.border-radius-right {
    border-bottom-right-radius: var(--border-radius)!important;
    border-top-right-radius: var(--border-radius)!important;
}
.border-radius-right-lg {
    border-bottom-right-radius: var(--border-radius-lg)!important;
    border-top-right-radius: var(--border-radius-lg)!important;
}
.border-top-radius {
    border-top-left-radius: var(--border-radius)!important;
    border-top-right-radius: var(--border-radius)!important;
}
.border-bottom-radius {
    border-bottom-left-radius: var(--border-radius)!important;
    border-bottom-right-radius: var(--border-radius)!important;
}
.border-radius-bottom {
    border-bottom-left-radius: var(--border-radius)!important;
    border-bottom-right-radius: var(--border-radius)!important;
}
.border-radius-bottom-none {
    border-bottom-left-radius: 0!important;
    border-bottom-right-radius: 0!important;
}
.border-radius-top {
    border-top-left-radius: var(--border-radius)!important;
    border-top-right-radius: var(--border-radius)!important;
}
.border-radius-top-none {
    border-top-left-radius: 0!important;
    border-top-right-radius: 0!important;
}
.border-radius-50 {
    border-radius: 50%;
}
.border-children-none * {
    border: none!important;
}
.border-none {
    border: none!important;
}
.border-dashed {
    border-style: dashed!important;
}
.border-bottom-dashed {
    border-bottom-style: dashed!important;
}
.border-radius-none::before,
.border-radius-none {
    border-radius: 0!important;
}
.b-t-l-r {
    border-top-left-radius: var(--border-radius)!important;
}
.b-t-l-r-none {
    border-top-left-radius: 0!important;
}
.b-t-r-r {
    border-top-right-radius: var(--border-radius)!important;
}
.b-t-r-r-none {
    border-top-right-radius: 0!important;
}
.b-b-r-r {
    border-bottom-right-radius: var(--border-radius)!important;
}
.b-b-r-r-none {
    border-bottom-right-radius: 0!important;
}
.b-b-l-r {
    border-bottom-left-radius: var(--border-radius)!important;
}
.border {
    border: var(--border);
}
.border-bottom {
    border-bottom: 1px solid var(--color-border);
}
.border-top {
    border-top: 1px solid var(--color-border);
}
.border-left {
    border-left: 1px solid var(--color-border);
}
.border-right {
    border-right: 1px solid var(--color-border);
}
.border-bottom-lg {
    border-bottom: 5px solid var(--color-border);
}
.border-top-lg {
    border-top: 5px solid var(--color-border);
}
.border-bottom-0 {
    border-bottom: none!important;
}
.border-top-0 {
    border-top: none!important;
}
.border-left-0 {
    border-left: none!important;
}
.border-right-0 {
    border-right: none!important;
}
.border-spacing-0 {
    border-spacing: 0;
}
.color-border-on-hover-primary {
    transition-duration: var(--transition-duration);
    border-color: var(--color-primary)!important;
}
.color-border-on-hover-primary:hover {
    border-color: var(--color-primary)!important;
}
.color-border-on-hover-text:hover {
    border-color: var(--text-dark)!important;
}
.color-border-on-hover:hover {
    border-color: var(--color-border)!important;
}
.color-border-on-hover-brand:hover {
    border-color: var(--color-brand)!important;
}
.color-border-on-hover-secondary:hover {
    border-color: rgb(var(--color-general-secondary-border))!important;
}
.border-main {
    border-color: var(--color-main)!important;
}
.border-secondary {
    border-color: var(--color-border-secondary)!important;
}
.border-secondary-bg {
    border-color: var(--color-secondary)!important;
}
.border-brand {
    border-color: var(--color-brand)!important;
}
.border-primary {
    border-color: rgb(var(--color-general-primary-border))!important;
}
.border-primary-main {
    border-color: var(--color-primary)!important;
}
.border-warning {
    border-color: rgb(var(--color-general-warning-border))!important;
}
.border-success {
    border-color: rgb(var(--color-general-success-border))!important;
}
.border-success-text {
    border-color: var(--color-success-text)!important;
}
.border-danger {
    border-color: var(--color-danger-bg)!important;
}
.outline {
    outline: var(--border);
}
.outline-w-2 {
    outline-width: 2px!important;
}
.outline-w-3 {
    outline-width: 3px!important;
}
.outline-primary {
    outline: 1px solid var(--color-primary);
}
.outline-main {
    outline: 1px solid var(--color-main);
}
.outline-text {
    outline: 1px solid var(--text-dark);
}
.outline-brand {
    outline: 1px solid var(--color-brand);
}
.outline-success {
    outline: 1px solid rgb(var(--color-general-success-text));
}
.outline-white {
    outline-color: #fff;
}
.border-focus-text:focus-within,
.border-focus-text:focus {
    border-color: var(--text-dark)!important;
}
.border-focus-primary:focus-within,
.border-focus-primary:focus {
    border-color: var(--color-primary-bg)!important;
}

.border-color {
    border-color: var(--border-color);
}
.border-transparent {
    border-color: transparent!important;
}
.border-lg
.border-radius {
    border-radius: var(--border-radius);
}
.border-ts-r {
    border-top-left-radius: var(--border-radius);
}
.border-te-r {
    border-top-right-radius: var(--border-radius);
}
.border-bs-r {
    border-bottom-left-radius: var(--border-radius);
}
.border-be-r {
    border-bottom-right-radius: var(--border-radius);
}
.border-b-r {
    border-bottom-right-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
}
.border-t-r {
    border-top-right-radius: var(--border-radius);
    border-top-left-radius: var(--border-radius);
}

.border-w-1 {
    border-width: 1px;
}
.border-w-2 {
    border-width: 2px!important;
}
.border-w-3 {
    border-width: 3px;
}
.border-w-4 {
    border-width: 4px;
}
.border-w-5 {
    border-width: 5px;
}
.border-w-6 {
    border-width: 6px;
}

.section-divider {
    margin-bottom: 24px;
}

/* iframe */

.iframe-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}
.iframe-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

.animation-none-child * {
    animation: none!important;
}


/* Style */
.box-shadow-xs {
    box-shadow: var(--box-shadow-xs);
}
.box-shadow-sm {
    box-shadow: var(--box-shadow-sm);
}
.box-shadow {
    box-shadow: var(--box-shadow);
}
.box-shadow-lg {
    box-shadow: var(--box-shadow-lg);
}
.filter-shadow {
    filter: drop-shadow(var(--box-shadow));
}

.animation-duration {
    animation-duration: var(--transition-duration);
}
.transition-duration {
    transition-duration: var(--transition-duration);
}
.animation-prevent {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
    -webkit-animation-duration: 0s !important;
    transition:background-color 0s, opacity 0s, color 0s, width 0s, height 0s, padding 0s, margin 0s !important;
}
.animation-bounce-hover-parent:hover .animation-bounce-hover {
    animation: bounce 1s infinite;
}
.transition-slide-right-hover-parent:hover .transition-slide-right-hover {
    right: 0;
    transform: translate3d(0, 0, 0);
    transition: all var(--transition-duration) cubic-bezier(.165,.84,.44,1);
}
.transition-slide-right-hover {
    right: .5rem;
    transform: translate3d(-.3125rem, 0, 0);
    transition: all var(--transition-duration) cubic-bezier(.165,.84,.44,1);
}
.transition-opacity-hover-parent:hover .transition-opacity-hover {
    opacity: 1;
}
.transition-opacity-hover {
    opacity: 0;
    transition-duration: var(--transition-duration);
}

.transform-rotate-45 {
    transform: rotate(45deg);
}
.transform-rotate-90 {
    transform: rotate(90deg);
}

.transform-rotate-180 {
    transform: rotate(180deg);
}
.transform-none {
    transform: none!important;
}
.pointer {
    cursor: pointer;
}
.pointer-events-none {
    pointer-events: none!important;
}
.cursor-default {
    cursor: default;
}
.cursor-disabled {
    cursor: not-allowed!important;
}
.cursor-text {
    cursor: text;
}


/* Actions */
.box-active:active {
    border-color: var(--color-primary-bg-hover);
    box-shadow: var(--text-light) 0px 0px 0px 2px, var(--color-primary) 0px 0px 0px 2px;
}
.box-active-danger:active {
    border-color: var(--color-danger-bg-hover);
    box-shadow: var(--text-light) 0px 0px 0px 1px, var(--color-danger-bg) 0px 0px 0px 2px;
}
.box-active-success:active {
    border-color: var(--color-success-bg-hover);
    box-shadow: var(--text-light) 0px 0px 0px 1px, var(--color-success-bg) 0px 0px 0px 2px;
}
.box-active-warning:active {
    border-color: var(--color-warning-bg-hover);
    box-shadow: var(--text-light) 0px 0px 0px 1px, var(--color-warning-bg) 0px 0px 0px 2px;
}
.box-active-primary:active {
    border-color: var(--color-primary-bg-hover);
    box-shadow: var(--text-light) 0px 0px 0px 1px, var(--color-primary) 0px 0px 0px 2px;
}
.box-active-secondary:active {
    border-color: var(--color-secondary-hover);
    box-shadow: var(--text-light) 0px 0px 0px 1px, var(--color-secondary) 0px 0px 0px 2px;
}

.box-action-primary {
    border-color: var(--color-primary-bg-hover);
    box-shadow: var(--text-light) 0px 0px 0px 1px, var(--color-primary) 0px 0px 0px 2px;
}
.box-action-success {
    border-color: var(--color-success-bg-hover);
    box-shadow: var(--text-light) 0px 0px 0px 1px, var(--color-success) 0px 0px 0px 2px;
}
.box-action-warning {
    border-color: var(--color-warning-bg-hover);
    box-shadow: var(--text-light) 0px 0px 0px 1px, var(--color-warning) 0px 0px 0px 2px;
}
.box-action-danger {
    border-color: var(--color-danger-bg-hover);
    box-shadow: var(--text-light) 0px 0px 0px 1px, var(--color-danger) 0px 0px 0px 2px;
}

.display-on-hover-parent .display-on-hover {
    opacity: 0;
    visibility: hidden;
    transition-duration: var(--transition-duration);
}
.display-on-hover-parent:active .display-on-hover,
.display-on-hover-parent:hover .display-on-hover {
    opacity: 1;
    visibility: visible;
}
.hide-on-hover-parent:hover .hide-on-hover {
    display: none;
}
.show-on-hover-parent .show-on-hover{
    display: none;
}
.show-on-hover-parent:hover .show-on-hover {
    display: block;
}
.hover-bg {
    transition-duration: var(--transition-duration);
    cursor: pointer;
}
.hover-bg:hover {
    background-color: var(--color-secondary);
}
.hover {
    cursor: pointer;
    transition-duration: var(--transition-duration);
    position: relative;
    z-index: 1;
}
.bg-disabled.hover::before {
    background-color: transparent!important;
}
.bg-disabled.hover:hover {
    cursor: not-allowed;
}
.bg-overlay {
    background-color: var(--color-overlay);
}
.bg-cover {
    background-size: cover;
}
.bg-contain {
    background-size: contain;
}
.bg-no-repeat {
    background-repeat: no-repeat;
}
.bg-center {
    background-position: center;
}
.bg-translucent {
    background-color: var(--color-translucent);
}
.bg-translucent-3 {
    background-color: var(--color-translucent-3);
}
.bg-translucent-blur {
    background-color: var(--color-translucent-3);
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
}
.bg-translucent-blur-lg {
    background-color: var(--color-translucent-3);
    -webkit-backdrop-filter: blur(30px);
            backdrop-filter: blur(30px);
}
.backdrop-blur {
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
}
.object-cover {
    object-fit: cover;
}
.object-contain {
    object-fit: contain;
}
.object-top {
    object-position: top;
}
.object-right {
    object-position: right;
}
.object-left {
    object-position: left;
}
.object-center {
    object-position: center;
}

.hover::before {
    content: "";
    pointer-events: none;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--color-secondary, rgba(26,26,26,0.1));
    border-radius: var(--border-radius);
    opacity: 0;
    transition: opacity 100ms cubic-bezier(0.4, 0, 0.2, 1),transform 100ms cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(0);
    z-index: -1;
    transition-duration: var(--transition-duration);
}
.hover.hover-primary::before {
    background-color: var(--color-primary-bg, rgba(26,26,26,0.1));
}
.active-action.hover-primary:active::before {
    background-color: var(--color-primary-bg-hover, rgba(26,26,26,0.1));
}
.hover.hover-success::before {
    background-color: var(--color-success-bg, rgba(26,26,26,0.1));
}
.active-action.hover-success:active::before {
    background-color: var(--color-success-bg-hover, rgba(26,26,26,0.1));
}
.hover.hover-danger::before {
    background-color: var(--color-danger-bg, rgba(26,26,26,0.1));
}
.active-action.hover-danger:active::before {
    background-color: var(--color-danger-bg-hover, rgba(26,26,26,0.1));
}
.active-action:active::before {
    background-color: var(--color-secondary-hover, rgba(26,26,26,0.1));
}
.hover-none::before {
    background-color: transparent!important;
}
.hover:hover::before {
    opacity: 1;
    transform: scale(1);
}
.hover-border-transparent:hover {
    border-color: transparent!important;
}
.box-shadow-hover-xs,
.box-shadow-hover-sm,
.box-shadow-hover {
    transition-duration: var(--transition-duration);
}
.box-shadow-hover:hover {
    box-shadow: var(--box-shadow);
}
.box-shadow-hover-sm:hover {
    box-shadow: var(--box-shadow-sm);
}
.box-shadow-hover-xs:hover {
    box-shadow: var(--box-shadow-xs);
}
.box-shadow-none {
    box-shadow: none!important;
}
.pointer {
    cursor: pointer;
}
.hover-tertiary {
    cursor: pointer;
    transition-duration: var(--transition-duration);
}
.hover-tertiary:hover {
    background-color: var(--color-tertiary);
}
.clickable {
    cursor: pointer;
    transition-duration: var(--transition-duration);
}
.clickable:active {
    transform: scale(0.99);
}
.opacity-75-active:active {
    opacity: 0.75;
}
.opacity-25-active:active {
    opacity: 0.25!important;
}
.opacity-85-active:active {
    opacity: 0.85!important;
}
.opacity-100-active:active {
    opacity: 1!important;
}
.spinner {
    border: 2px solid transparent;
    border-top: 2px solid var(--text-dark);
    border-right: 2px solid var(--color-secondary);
    border-left: 2px solid var(--color-secondary);
    border-bottom: 2px solid var(--color-secondary);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 0.5s linear infinite;
}

.reset-parent * {
    padding: revert;
    margin: revert;
}
.force-parent-color * {
    color: var(--text-dark)!important;
}

.overscroll-contain {
    overscroll-behavior: contain;
}

.spinner-animation {
    animation: spinRotate 0.5s linear infinite;
}

.spinner-sm {
    width: 12px;
    height: 12px;
    border-width: 1px;
}

.table-column-left::after {
    content: "";
    height: calc(100% + 1px);
    position: absolute;
    top: -1px;
    z-index: 1;
    pointer-events: none;
    box-shadow: inset 5px 0 3px rgba(0,0,0,.1);
    right: -8px;
    width: 8px;
}

.badge {
    width: 24px;
    display: flex;
    height: 24px;
    align-items: center;
    justify-content: center;
    left: -12px;
    top: -12px;
    position: absolute;
    background-color: var(--color-main);
    font-size: 12px;
    border-radius: 50%;
}

.max-avatar {
    max-width: 46px;
    max-height: 46px;
    min-height: 46px;
    min-width: 46px;
    width: 46px;
    height: 46px;
}

.animation-fade-in {
    animation: fade-in 0.3s;
    animation-fill-mode: initial; 
}

.animation-slide-in {
    opacity: 0;
    animation-name: slide-in;
    animation-duration: 0.3s;
    animation-delay: calc(var(--slide-in-delay, 0) * 0.05);
    -webkit-animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards; 
}

.animation-slide-up {
    opacity: 0;
    animation-name: slide-up;
    animation-duration: 0.3s;
    animation-delay: calc(var(--slide-in-delay, 0) * 0.05);
    -webkit-animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards; 
}

.animation-slide-down {
    opacity: 0;
    animation-name: slide-down;
    animation-duration: 0.3s;
    animation-delay: calc(var(--slide-in-delay, 0) * 0.05);
    -webkit-animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards; 
}

.table-rounded tr:first-of-type td:first-of-type {
    border-top-left-radius: var(--border-radius)!important;
}
.table-rounded tr:first-child td:last-child {
    border-top-right-radius: var(--border-radius)!important;
}
.table-rounded tr:last-child td:first-child {
    border-bottom-left-radius: var(--border-radius);
}
.table-rounded tr:last-child td:last-child {
    border-bottom-right-radius: var(--border-radius);
}


.divider-sm {
    display: none;
}

.blinking {
    animation: blinking 1s infinite;
}

.bottom-fade-effect::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    z-index: 1;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(0,0,0, 0.5));
}
.hover-hue:hover {
    filter: hue-rotate(45deg);
}
.blur-20 {
    filter: blur(20px);
}

.top-fade-effect::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    z-index: 1;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(0,0,0, 0.5));
}

.text-wrap-nowrap {
    text-wrap: nowrap;
}

.arrow-bottom {
    position: relative;
}
.arrow-bottom:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -8px;
    transform: translateX(calc(-50% - 4px));
    border-top: 8px solid var(--color-primary);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}

.indicator-danger {
    width: 8px;
    height: 8px;
    min-height: 8px;
    min-width: 8px;
    border-radius: 50%;
    background-color: var(--color-danger-text);
}

.indicator-success {
    width: 8px;
    height: 8px;
    min-height: 8px;
    min-width: 8px;
    border-radius: 50%;
    background-color: var(--color-success-text);
}

.indicator-warning {
    width: 8px;
    height: 8px;
    min-height: 8px;
    min-width: 8px;
    border-radius: 50%;
    background-color: var(--color-warning-text);
}

.text-link-warning {
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    color: var(--color-warning-text);
}
.text-link-warning:hover {
    color: var(--text-light);
    background-color: var(--color-warning-text);
}

.text-link-danger {
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    color: var(--color-danger-text);
}
.text-link-danger:hover {
    color: var(--text-light);
    background-color: var(--color-danger-text);
}

.text-link-secondary {
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    color: var(--text-dark);
}
.text-link-secondary:hover {
    color: var(--text-light);
    background-color: var(--text-dark);
}

@keyframes blinking {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes slide-in {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-up {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-down {
    0% {
        opacity: 1;
        transform: translateY(0px);
    }
    100% {
        opacity: 0;
        transform: translateY(10px);
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes spinRotate {
    100% {
        transform: rotate(1turn);
    }
}

@media (max-width: 600px) {
    .border-radius-md-none {
        border-radius: 0!important;
    }
    .border-md-none {
        border: none!important;
    }
    .d-md-none {
        display: none!important;
    }
}

@media (max-width: 800px) {
    .d-sm-none {
        display: none!important;
    }
    .d-lg-none {
        display: block!important;
    }
    .border-sm-none {
        border: none!important;
    }
    .border-sm-bottom {
        border:  none;
        border-bottom: 1px solid var(--color-border);
    }
    .border-sm-top {
        border:  none;
        border-top: 1px solid var(--color-border);
    }
    .border-radius-sm-none {
        border-radius: 0!important;
    }
    .border-radius-sm-top-none {
        border-top-left-radius: 0!important;
        border-top-right-radius: 0!important;
    }
    .border-radius-sm-lg {
        border-radius: var(--border-radius-lg)!important;
    }
    .border-radius-sm-md {
        border-radius: var(--border-radius)!important;
    }
    .border-sm-x-none {
        border-left: none!important;
        border-right: none!important;
    }
    .border-sm-bottom-none {
        border-bottom: none!important;
    }
    .border-sm-top-none {
        border-top: none!important;
    }
    .bg-sm-tertiary {
        background-color: var(--color-tertiary);
    }
    .section-divider {
        margin-bottom: 0;
        border-bottom: 12px solid var(--color-secondary);
    }
    .border-sm-w-1 {
        border-width: 1px!important;
    }
    .sticky-sm {
        position: -webkit-sticky;
        position: sticky;
        top: var(--header-sm-height);
        z-index: 1;
    }
    .sticky-sm-inital {
        position: initial!important;
        top: unset;
        z-index: unset;
    }

    .bg-sm-main {
        background-color: var(--color-main)!important;
    }
    .bg-sm-secondary {
        background-color: var(--color-secondary)!important;
    }

    .divider-sm {
        display: block;
        height: 12px;
        background-color: var(--color-secondary);
    }

    .pos-sm-absolute {
        position: absolute;
    }
    .pos-sm-initial {
        position: initial!important;
    }
    .pos-sm-relative {
        position: relative;
    }
    .pos-sm-fixed {
        position: fixed;
    }
    .pos-sm-sticky {
        position: -webkit-sticky;
        position: sticky;
    }

    .sm-visible {
        visibility: visible!important;
        opacity: 1!important;
    }

    .box-shadow-sm-none {
        box-shadow: none!important;
    }

    .display-on-hover-parent .display-on-hover.display-on-hover-sm-block {
        opacity: 1;
        visibility: visible;
    }

    .sticky-bottom-sm {
        position: -webkit-sticky;
        position: sticky;
        /* bottom: 52px; */
        bottom: 0;
        z-index: 3;
    }
}
/* Grid */
.grid {
    display: grid;
}
.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
.grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

/* Flex */

.flex {
    display: flex!important;
}

.flex-col {
    flex-direction: column;
}
.flex-row {
    flex-direction: row;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-no-wrap {
    flex-wrap: nowrap;
}

.gap-0 {
    grid-gap: 0rem;
    gap: 0rem;
}
.gap-xs {
    grid-gap: 0.125rem;
    gap: 0.125rem;
}
.gap-1 {
    grid-gap: 0.25rem;
    gap: 0.25rem;
}
.gap-2 {
    grid-gap: 0.5rem;
    gap: 0.5rem;
}
.gap-3 {
    grid-gap: 0.75rem;
    gap: 0.75rem;
}
.gap-4 {
    grid-gap: 1rem;
    gap: 1rem;
}
.gap-5 {
    grid-gap: 1.5rem;
    gap: 1.5rem;
}
.gap-6 {
    grid-gap: 3rem;
    gap: 3rem;
}

.flex-grow-1 {
    flex-grow: 1;
}
.flex-grow-2 {
    flex-grow: 2;
}
.flex-grow-3 {
    flex-grow: 3;
}
.flex-grow-4 {
    flex-grow: 4;
}
.flex-grow-5 {
    flex-grow: 5;
}
.flex-grow-6 {
    flex-grow: 6;
}
.flex-shrink-0 {
    flex-shrink: 0!important;
}
.flex-shrink-1 {
    flex-shrink: 1!important;
}
.flex-shrink-2 {
    flex-shrink: 2;
}

.col-12 {
    max-width: 100%;
    flex: 100% 1;
}
.col-11 {
    max-width: 91.666667%;
    flex: 91.666667% 1;
}
.col-10 {
    max-width: 83.333333%;
    flex: 83.333333% 1;
}
.col-9 {
    max-width: 75%;
    flex: 75% 1;
}
.col-8 {
    max-width: 66.666667%;
    flex: 66.666667% 1;
}
.col-7 {
    max-width: 58.333333%;
    flex: 58.333333% 1;
}
.col-6 {
    max-width: 50%;
    flex: 50% 1;
}
.col-5 {
    max-width: 41.666667%;
    flex: 41.666667% 1;
}
.col-4 {
    max-width: 33.333333%;
    flex: 33.333333% 1;
}
.col-3 {
    max-width: 25%;
    flex: 25% 1;
}
.col-2 {
    max-width: 16.666667%;
    flex: 16.666667% 1;
}
.col-1 {
    max-width: 8.333333%;
    flex: 8.333333% 1;
}

.flex-0 {
    flex: 0 1;
}
.flex-auto {
    flex: auto;
}
.flex-fill {
    flex: 0 0 100%;
}
.flex-1 {
    flex: 1 1;
}
.flex-2 {
    flex: 2 1;
}

/* Align */
.justify-between {
    justify-content: space-between;
}
.justify-around {
    justify-content: space-around;
}
.justify-center {
    justify-content: center!important;
}
.justify-end {
    justify-content: flex-end;
}
.justify-start {
    justify-content: flex-start!important;
}

.align-center {
    align-items: center;
}
.align-base {
    align-items: baseline;
}
.align-end {
    align-items: flex-end;
}
.align-start {
    align-items: flex-start;
}

.self-center {
    align-self: center;
}
.self-end {
    align-self: flex-end;
}

/* Window */

.top-0 {
    top: 0;
}
.top-48px {
    top: 48px;
}
.top-header {
    top: var(--header-height);
}
.bottom-0 {
    bottom: 0;
}
.bottom-container {
    bottom: calc(var(--p-container-content) * 3);
}
.left-0 {
    left: 0;
}
.right-0 {
    right: 0;
}

.z-999 {
    z-index: 999!important;
}
.z-99 {
    z-index: 99;
}
.z-10 {
    z-index: 10;
}
.z-9 {
    z-index: 9;
}
.z-8 {
    z-index: 8;
}
.z-7 {
    z-index: 7;
}
.z-4 {
    z-index: 4;
}
.z-3 {
    z-index: 3;
}
.z-2 {
    z-index: 2;
}
.z-1 {
    z-index: 1;
}
.z-0 {
    z-index: 0;
}

.scrollbar-on-hover::-webkit-scrollbar {
    display: none;
}
.scrollbar-on-hover:hover::-webkit-scrollbar {
    display: block;
}
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
/* Overflow */
.overflow-visible {
    overflow: visible;
}
.overflow-unset {
    overflow: unset!important;
}
.overflow-x-scroll {
    overflow-x: scroll;
}
.overflow-hidden {
    overflow: hidden!important;
}
.overflow-x-hidden {
    overflow-x: hidden;
}
.overflow-x-auto {
    overflow-x: auto;
}
.overflow-y-hidden {
    overflow-y: hidden;
}
.overflow-y-scroll {
    overflow-y: scroll;
}
.overflow-y-auto {
    overflow-y: auto;
}
.overflow-y-initial {
    overflow-y: initial;
}
.overflow-y-visible {
    overflow-y: visible;
}
.overflow-hidden {
    overflow: hidden;
}
.overflow-auto {
    overflow: auto;
}
.scrollbar-none::-webkit-scrollbar {
    padding: 0!important;
    height: 0!important;
    max-height: 0!important;
    max-width: 0!important;
}
.scrollbar-lg::-webkit-scrollbar {
    width: 14px;
    height: 14px;
    scroll-padding: 0!important;
}
.scrollbar-lg::-webkit-scrollbar-thumb {
    background-color: rgb(var(--color-general-secondary-border))!important;
    border-color: var(--color-border)!important;
    scroll-padding: 0!important;
}

.max-h-order-page {
    max-height: calc(100vh - var(--header-height) - 49px - 70px);
}
*::-webkit-scrollbar-corner {
    background-color: transparent;
}

@media (max-width: 1400px) {
    .grid-xl-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .grid-xl-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .grid-xl-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .grid-xl-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .grid-xl-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .grid-xl-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    .grid-xl-cols-7 {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .gap-xl-0 {
        grid-gap: 0rem;
        gap: 0rem;
    }
    .gap-xl-1 {
        grid-gap: 0.25rem;
        gap: 0.25rem;
    }
    .gap-xl-2 {
        grid-gap: 0.5rem;
        gap: 0.5rem;
    }
    .gap-xl-3 {
        grid-gap: 0.75rem;
        gap: 0.75rem;
    }
    .gap-xl-4 {
        grid-gap: 1rem;
        gap: 1rem;
    }
    .gap-xl-5 {
        grid-gap: 1.5rem;
        gap: 1.5rem;
    }
    .gap-xl-6 {
        grid-gap: 3rem;
        gap: 3rem;
    }

    .justify-xl-between {
        justify-content: space-between!important;
    }
    .justify-xl-center {
        justify-content: center!important;
    }
    .justify-xl-start {
        justify-content: flex-start!important;
    }
    .justify-xl-end {
        justify-content: flex-end!important;
    }
    .align-xl-between {
        align-content: space-between!important;
    }
    .align-xl-center {
        align-content: center!important;
    }
    .align-xl-start {
        align-content: flex-start!important;
    }
    .align-xl-end {
        align-content: flex-end!important;
    }
}

@media (max-width: 1200px) {
    .grid-lg-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .grid-lg-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .grid-lg-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .grid-lg-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .grid-lg-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .grid-lg-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    .grid-lg-cols-7 {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .gap-lg-0 {
        grid-gap: 0rem;
        gap: 0rem;
    }
    .gap-lg-1 {
        grid-gap: 0.25rem;
        gap: 0.25rem;
    }
    .gap-lg-2 {
        grid-gap: 0.5rem;
        gap: 0.5rem;
    }
    .gap-lg-3 {
        grid-gap: 0.75rem;
        gap: 0.75rem;
    }
    .gap-lg-4 {
        grid-gap: 1rem;
        gap: 1rem;
    }
    .gap-lg-5 {
        grid-gap: 1.5rem;
        gap: 1.5rem;
    }
    .gap-lg-6 {
        grid-gap: 3rem;
        gap: 3rem;
    }

    .justify-lg-between {
        justify-content: space-between!important;
    }
    .justify-lg-center {
        justify-content: center!important;
    }
    .justify-lg-start {
        justify-content: flex-start!important;
    }
    .justify-lg-end {
        justify-content: flex-end!important;
    }
    .align-lg-between {
        align-content: space-between!important;
    }
    .align-lg-center {
        align-content: center!important;
    }
    .align-lg-start {
        align-content: flex-start!important;
    }
    .align-lg-end {
        align-content: flex-end!important;
    }
}

@media (max-width: 600px) {
    .flex-md-col {
        flex-direction: column;
    }
    .flex-md-grow-1 {
        flex-grow: 1;
    }
    .flex-md-wrap {
        flex-wrap: wrap;
    }
    .order-md-1 {
        order: 1;
    }
    .order-md-2 {
        order: 2;
    }
    .order-md-3 {
        order: 3;
    }
    .grid-md-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .grid-md-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .col-md-12 {
        max-width: 100%!important;
        flex: 100% 1!important;
    }
    .col-md-8 {
        max-width: 66.666667%!important;
        flex: 66.666667% 1!important;
    }
    .col-md-6 {
        max-width: 50%!important;
        flex: 50% 1!important;
    }
    .col-md-4 {
        max-width: 33.333333%!important;
        flex: 33.333333% 1!important;
    }
    .col-md-3 {
        max-width: 25%!important;
        flex: 25% 1!important;
    }

    .gap-md-0 {
        grid-gap: 0rem;
        gap: 0rem;
    }
    .gap-md-1 {
        grid-gap: 0.25rem;
        gap: 0.25rem;
    }
    .gap-md-2 {
        grid-gap: 0.5rem;
        gap: 0.5rem;
    }
    .gap-md-3 {
        grid-gap: 0.75rem;
        gap: 0.75rem;
    }
    .gap-md-4 {
        grid-gap: 1rem;
        gap: 1rem;
    }
    .gap-md-5 {
        grid-gap: 1.5rem;
        gap: 1.5rem;
    }
    .gap-md-6 {
        grid-gap: 3rem;
        gap: 3rem;
    }

    .justify-md-between {
        justify-content: space-between!important;
    }
    .justify-md-center {
        justify-content: center!important;
    }
    .justify-md-start {
        justify-content: flex-start!important;
    }
    .justify-md-end {
        justify-content: flex-end!important;
    }
    .align-md-between {
        align-content: space-between!important;
    }
    .align-md-center {
        align-content: center!important;
    }
    .align-md-start {
        align-content: flex-start!important;
    }
    .align-md-end {
        align-content: flex-end!important;
    }

    .grid-md-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .grid-md-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .grid-md-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .grid-md-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .grid-md-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .grid-md-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    .grid-md-cols-7 {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .top-sm-unset {
        top: unset!important;
    }
    .top-sm-0 {
        top: 0!important;
    }
    .flex-sm {
        display: flex!important;
    }
    .flex-sm-col {
        flex-direction: column!important;
    }
    .flex-sm-row {
        flex-direction: row;
    }

    .col-sm-12 {
        max-width: 100%!important;
        /* flex: 100%!important; */
    }
    .col-sm-11 {
        max-width: 91.666667%!important;
        /* flex: 91.666667%!important; */
    }
    .col-sm-10 {
        max-width: 83.333333%!important;
        /* flex: 83.333333%!important; */
    }
    .col-sm-9 {
        max-width: 75%!important;
        /* flex: 75%!important; */
    }
    .col-sm-8 {
        max-width: 66.666667%!important;
        /* flex: 66.666667%!important; */
    }
    .col-sm-7 {
        max-width: 58.333333%!important;
        /* flex: 58.333333%!important; */
    }
    .col-sm-6 {
        max-width: 50%!important;
        /* flex: 50%!important; */
    }
    .col-sm-5 {
        max-width: 41.666667%!important;
        /* flex: 41.666667%!important; */
    }
    .col-sm-4 {
        max-width: 33.333333%!important;
        /* flex: 33.333333%!important; */
    }
    .col-sm-3 {
        max-width: 25%!important;
        /* flex: 25%!important; */
    }
    .col-sm-2 {
        max-width: 16.666667%!important;
        /* flex: 16.666667%!important; */
    }
    .col-sm-1 {
        max-width: 8.333333%!important;
        /* flex: 8.333333%!important; */
    }
    .col-sm-unset {
        max-width: unset!important;
        flex: unset!important;
    }

    .order-sm-1 {
        order: 1;
    }
    .order-sm-2 {
        order: 2;
    }
    .order-sm-3 {
        order: 3;
    }

    .gap-sm-0 {
        grid-gap: 0rem;
        gap: 0rem;
    }
    .gap-sm-1 {
        grid-gap: 0.25rem;
        gap: 0.25rem;
    }
    .gap-sm-2 {
        grid-gap: 0.5rem;
        gap: 0.5rem;
    }
    .gap-sm-3 {
        grid-gap: 0.75rem;
        gap: 0.75rem;
    }
    .gap-sm-4 {
        grid-gap: 1rem;
        gap: 1rem;
    }
    .gap-sm-5 {
        grid-gap: 1.5rem;
        gap: 1.5rem;
    }
    .gap-sm-6 {
        grid-gap: 3rem;
        gap: 3rem;
    }

    .flex-grow-sm-0 {
        flex-grow: 0!important;
    }
    .flex-grow-sm-1 {
        flex-grow: 1;
    }

    .flex-dir-row-col {
        flex-direction: column;
    }

    .flex-sm-wrap {
        flex-wrap: wrap;
    }
    .flex-sm-no-wrap {
        flex-wrap: nowrap!important;
    }

    .grid-sm-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .grid-sm-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .grid-sm-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .grid-sm-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .grid-sm-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .grid-sm-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    .grid-sm-cols-7 {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .justify-sm-between {
        justify-content: space-between;
    }
    .justify-sm-center {
        justify-content: center;
    }
    .justify-sm-end {
        justify-content: flex-end;
    }
    .justify-sm-start {
        justify-content: flex-start!important;
    }

    .align-sm-center {
        align-items: center;
    }
    .align-sm-end {
        align-items: flex-end;
    }
    .align-sm-start {
        align-items: flex-start;
    }
    .z-sm-3 {
        z-index: 3;
    }
    .overflow-y-sm-auto {
        overflow-y: auto!important;
    }
    .overflow-sm-unset {
        overflow: unset!important;
    }

    .max-h-order-page {
        max-height: calc(100vh - var(--header-height));
    }

    .bottom-sm-nav {
        bottom: calc(var(--nav-sm-height) + env(safe-area-inset-bottom)); /* Safe area for iPhone X */
    }
    .bottom-sm-0 {
        bottom: env(safe-area-inset-bottom)!important; /* Safe area for iPhone X */
    }
    .top-header {
        top: var(--header-sm-height);
    }

    .d-sm-block {
        display: block!important;
    }
    .flex-sm-none {
        flex: none;
    }
}