.alert {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  margin-bottom: var(--space-2);
}

.alert-dismissible {
  position: relative;
  padding-right: calc(var(--space-3) + 1rem);
}

.alert-dismissible .close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  background: none;
  border: none;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}/* Scroll-triggered animation helpers */

[class*="animate-"] {
  --anim-distance: 20px;
  --anim-timing: 0.5s;
  opacity: 0;
  transition: transform var(--anim-timing) ease-out, opacity var(--anim-timing) ease-out;
}

[class*="animate-"].in-view {
  opacity: 1;
  transform: none;
}

.animate-in-left { transform: translateX(calc(-1 * var(--anim-distance))); }
.animate-in-right { transform: translateX(var(--anim-distance)); }
.animate-in-up { transform: translateY(var(--anim-distance)); }
.animate-in-down { transform: translateY(calc(-1 * var(--anim-distance))); }
.animate-in-zoom { transform: scale(0); }
/* Fade uses default transform */
.animate-fade { }

/* Sequential child animations */
[class*="animate-children-"] {
  --anim-distance: 20px;
  --anim-stagger: 100; /* milliseconds */
}

[class*="animate-children-"] > * {
  opacity: 0;
  transition: transform var(--anim-timing) ease-out, opacity var(--anim-timing) ease-out;
}

[class*="animate-children-"] > *.in-view {
  opacity: 1;
  transform: none;
}

.animate-children-in-left > * { transform: translateX(calc(-1 * var(--anim-distance))); }
.animate-children-in-right > * { transform: translateX(var(--anim-distance)); }
.animate-children-in-up > * { transform: translateY(var(--anim-distance)); }
.animate-children-in-down > * { transform: translateY(calc(-1 * var(--anim-distance))); }
.animate-children-in-zoom > * { transform: scale(0); }
/* Fade uses default transform */
.animate-children-fade > * { }

/* Wipe reveal animations */
[class*="animate-reveal-"] {
  opacity: 1; /* override base opacity */
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.animate-reveal-right {
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 50%, transparent 60%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 50%, transparent 60%, transparent 100%);
  -webkit-mask-size: 0 100%;
  mask-size: 0 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  transition: -webkit-mask-position 0.5s ease-out, mask-position 0.5s ease-out;
}
.animate-reveal-right.in-view {
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
}

.animate-reveal-left {
  -webkit-mask-image: linear-gradient(-90deg, #000 0%, #000 50%, transparent 60%, transparent 100%);
  mask-image: linear-gradient(-90deg, #000 0%, #000 50%, transparent 60%, transparent 100%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  transition: -webkit-mask-position 0.5s ease-out, mask-position 0.5s ease-out;
}
.animate-reveal-left.in-view {
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
}

.animate-reveal-up {
  -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 50%, transparent 60%, transparent 100%);
  mask-image: linear-gradient(0deg, #000 0%, #000 50%, transparent 60%, transparent 100%);
  -webkit-mask-size: 100% 0;
  mask-size: 100% 0;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  transition: -webkit-mask-position 0.5s ease-out, mask-position 0.5s ease-out;
}
.animate-reveal-up.in-view {
  -webkit-mask-position: 0 100%;
  mask-position: 0 100%;
  -webkit-mask-size: 100% 300%;
  mask-size: 100% 300%;
}

.animate-reveal-down {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 60%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 60%, transparent 100%);
  -webkit-mask-size: 100% 300%;
  mask-size: 100% 300%;
  -webkit-mask-position: 0 100%;
  mask-position: 0 100%;
  transition: -webkit-mask-position 0.5s ease-out, mask-position 0.5s ease-out;
}
.animate-reveal-down.in-view {
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  -webkit-mask-position: 0 0;
  mask-position: 0 0; 
/* -webkit-mask-size: 100% 200%;
  mask-size: 100% 200%; */
}.btn {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  font-size: 1rem;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--theme-color);
  border: 2px solid var(--theme-color);
  color: #fff;
}

.btn:hover {
  background: color-mix(in oklab, var(--theme-color), var(--theme-light-mix) var(--offset-factor-3));
  border-color: color-mix(in oklab, var(--theme-color), var(--theme-light-mix) var(--offset-factor-3));
}

.btn:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-outline {
  background: transparent;
  border: 2px solid var(--theme-color);
  color: var(--theme-color);
}

.btn-outline:hover { 
  background: var(--theme-color); color: #fff!important;
  border-color: color-mix(in oklab, var(--theme-color), var(--theme-light-mix) var(--offset-factor-3));
}

.btn-sm { padding: var(--space-1) var(--space-2); font-size: 0.875rem; }
.btn-lg { padding: var(--space-3) var(--space-4); font-size: 1.25rem; }

[data-theme="dark"] {
  .btn-outline {
    color: color-mix(in oklab, var(--theme-color), var(--theme-light-mix) var(--offset-factor-4));
  }
}
.card {
  background: var(--color-light);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  margin-bottom: var(--space-3);
  transition: box-shadow 0.2s ease;
}

[data-theme="dark"] {
  .card {
    background: var(--color-dark);
  }
}

.card:hover { 
  box-shadow: 0 4px 10px rgba(0,0,0,0.08); 
}
.card-header { 
  font-size: 1.25rem; 
  font-weight: 600;
  text-align: center;
  padding: var(--space-2);

  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.card-body { 
  font-size: 1rem; 
  line-height: var(--line-height);
  padding: var(--space-3);
}
.card-footer { 
  text-align: center; 
  font-size: 0.8rem; 
  padding: var(--space-2);
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
.carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.carousel-slides {
  display: flex;
  transition: transform 0.5s ease;
}

.carousel-slides .slide {
  min-width: 100%;
  box-sizing: border-box;
}

.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  height: 100%;
  width: 50px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  border: none;
  padding: var(--space-2);
  cursor: pointer;
}

.carousel-control-prev { left: 0; }
.carousel-control-next { right: 0; }
.collapse {
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

.collapse-header {
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
}

.collapse-body {
  padding: var(--space-2) var(--space-3);
  display: none;
}

.collapse.open .collapse-body {
  display: block;
}@import "./themes.css";

:root {
  --font-base: 'Segoe UI', Roboto, sans-serif;
  --font-size: 1rem;
  --line-height: 1.5;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font-base);
  font-size: var(--font-size);
  line-height: var(--line-height);
  color: var(--color-text);
  background: var(--color-body-bg);
}
h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.25; margin-bottom: var(--space-2); }
p { margin-bottom: var(--space-3); }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Spacing */
/* extra info: c = children, d = descendants */

.m-0, .m-0-c > *, .m-0-d * { margin: var(--space-0)!important; }
.m-1, .m-1-c > *, .m-1-d * { margin: var(--space-1)!important; }
.m-2, .m-2-c > *, .m-2-d * { margin: var(--space-2)!important; }
.m-3, .m-3-c > *, .m-3-d * { margin: var(--space-3)!important; }
.m-4, .m-4-c > *, .m-4-d * { margin: var(--space-4)!important; }
.m-5, .m-5-c > *, .m-5-d * { margin: var(--space-5)!important; }
.mt-0, .mt-0-c > *, .mt-0-d * { margin-top: var(--space-0)!important; }
.mt-1, .mt-1-c > *, .mt-1-d * { margin-top: var(--space-1)!important; }
.mt-2, .mt-2-c > *, .mt-2-d * { margin-top: var(--space-2)!important; }
.mt-3, .mt-3-c > *, .mt-3-d * { margin-top: var(--space-3)!important; }
.mt-4, .mt-4-c > *, .mt-4-d * { margin-top: var(--space-4)!important; }
.mt-5, .mt-5-c > *, .mt-5-d * { margin-top: var(--space-5)!important; }
.mb-0, .mb-0-c > *, .mb-0-d * { margin-bottom: var(--space-0)!important; }
.mb-1, .mb-1-c > *, .mb-1-d * { margin-bottom: var(--space-1)!important; }
.mb-2, .mb-2-c > *, .mb-2-d * { margin-bottom: var(--space-2)!important; }
.mb-3, .mb-3-c > *, .mb-3-d * { margin-bottom: var(--space-3)!important; }
.mb-4, .mb-4-c > *, .mb-4-d * { margin-bottom: var(--space-4)!important; }
.mb-5, .mb-5-c > *, .mb-5-d * { margin-bottom: var(--space-5)!important; }
.ml-0, .ml-0-c > *, .ml-0-d * { margin-left: var(--space-0)!important; }
.ml-1, .ml-1-c > *, .ml-1-d * { margin-left: var(--space-1)!important; }
.ml-2, .ml-2-c > *, .ml-2-d * { margin-left: var(--space-2)!important; }
.ml-3, .ml-3-c > *, .ml-3-d * { margin-left: var(--space-3)!important; }
.ml-4, .ml-4-c > *, .ml-4-d * { margin-left: var(--space-4)!important; }
.ml-5, .ml-5-c > *, .ml-5-d * { margin-left: var(--space-5)!important; }
.mr-0, .mr-0-c > *, .mr-0-d * { margin-right: var(--space-0)!important; }
.mr-1, .mr-1-c > *, .mr-1-d * { margin-right: var(--space-1)!important; }
.mr-2, .mr-2-c > *, .mr-2-d * { margin-right: var(--space-2)!important; }
.mr-3, .mr-3-c > *, .mr-3-d * { margin-right: var(--space-3)!important; }
.mr-4, .mr-4-c > *, .mr-4-d * { margin-right: var(--space-4)!important; }
.mr-5, .mr-5-c > *, .mr-5-d * { margin-right: var(--space-5)!important; }
.mx-0, .mx-0-c > *, .mx-0-d * { margin-left: var(--space-0)!important; margin-right: var(--space-0)!important; }
.mx-1, .mx-1-c > *, .mx-1-d * { margin-left: var(--space-1)!important; margin-right: var(--space-1)!important; }
.mx-2, .mx-2-c > *, .mx-2-d * { margin-left: var(--space-2)!important; margin-right: var(--space-2)!important; }
.mx-3, .mx-3-c > *, .mx-3-d * { margin-left: var(--space-3)!important; margin-right: var(--space-3)!important; }
.mx-4, .mx-4-c > *, .mx-4-d * { margin-left: var(--space-4)!important; margin-right: var(--space-4)!important; }
.mx-5, .mx-5-c > *, .mx-5-d * { margin-left: var(--space-5)!important; margin-right: var(--space-5)!important; }
.my-0, .my-0-c > *, .my-0-d * { margin-top: var(--space-0)!important; margin-bottom: var(--space-0)!important; }
.my-1, .my-1-c > *, .my-1-d * { margin-top: var(--space-1)!important; margin-bottom: var(--space-1)!important; }
.my-2, .my-2-c > *, .my-2-d * { margin-top: var(--space-2)!important; margin-bottom: var(--space-2)!important; }
.my-3, .my-3-c > *, .my-3-d * { margin-top: var(--space-3)!important; margin-bottom: var(--space-3)!important; }
.my-4, .my-4-c > *, .my-4-d * { margin-top: var(--space-4)!important; margin-bottom: var(--space-4)!important; }
.my-5, .my-5-c > *, .my-5-d * { margin-top: var(--space-5)!important; margin-bottom: var(--space-5)!important; }

.p-0, .p-0-c > *, .p-0-d * { padding: var(--space-0)!important; }
.p-1, .p-1-c > *, .p-1-d * { padding: var(--space-1)!important; }
.p-2, .p-2-c > *, .p-2-d * { padding: var(--space-2)!important; }
.p-3, .p-3-c > *, .p-3-d * { padding: var(--space-3)!important; }
.p-4, .p-4-c > *, .p-4-d * { padding: var(--space-4)!important; }
.p-5, .p-5-c > *, .p-5-d * { padding: var(--space-5)!important; }
.pt-0, .pt-0-c > *, .pt-0-d * { padding-top: var(--space-0)!important; }
.pt-1, .pt-1-c > *, .pt-1-d * { padding-top: var(--space-1)!important; }
.pt-2, .pt-2-c > *, .pt-2-d * { padding-top: var(--space-2)!important; }
.pt-3, .pt-3-c > *, .pt-3-d * { padding-top: var(--space-3)!important; }
.pt-4, .pt-4-c > *, .pt-4-d * { padding-top: var(--space-4)!important; }
.pt-5, .pt-5-c > *, .pt-5-d * { padding-top: var(--space-5)!important; }
.pb-0, .pb-0-c > *, .pb-0-d * { padding-bottom: var(--space-0)!important; }
.pb-1, .pb-1-c > *, .pb-1-d * { padding-bottom: var(--space-1)!important; }
.pb-2, .pb-2-c > *, .pb-2-d * { padding-bottom: var(--space-2)!important; }
.pb-3, .pb-3-c > *, .pb-3-d * { padding-bottom: var(--space-3)!important; }
.pb-4, .pb-4-c > *, .pb-4-d * { padding-bottom: var(--space-4)!important; }
.pb-5, .pb-5-c > *, .pb-5-d * { padding-bottom: var(--space-5)!important; }
.pl-0, .pl-0-c > *, .pl-0-d * { padding-left: var(--space-0)!important; }
.pl-1, .pl-1-c > *, .pl-1-d * { padding-left: var(--space-1)!important; }
.pl-2, .pl-2-c > *, .pl-2-d * { padding-left: var(--space-2)!important; }
.pl-3, .pl-3-c > *, .pl-3-d * { padding-left: var(--space-3)!important; }
.pl-4, .pl-4-c > *, .pl-4-d * { padding-left: var(--space-4)!important; }
.pl-5, .pl-5-c > *, .pl-5-d * { padding-left: var(--space-5)!important; }
.pr-0, .pr-0-c > *, .pr-0-d * { padding-right: var(--space-0)!important; }
.pr-1, .pr-1-c > *, .pr-1-d * { padding-right: var(--space-1)!important; }
.pr-2, .pr-2-c > *, .pr-2-d * { padding-right: var(--space-2)!important; }
.pr-3, .pr-3-c > *, .pr-3-d * { padding-right: var(--space-3)!important; }
.pr-4, .pr-4-c > *, .pr-4-d * { padding-right: var(--space-4)!important; }
.pr-5, .pr-5-c > *, .pr-5-d * { padding-right: var(--space-5)!important; }
.px-0, .px-0-c > *, .px-0-d * { padding-left: var(--space-0)!important; padding-right: var(--space-0)!important; }
.px-1, .px-1-c > *, .px-1-d * { padding-left: var(--space-1)!important; padding-right: var(--space-1)!important; }
.px-2, .px-2-c > *, .px-2-d * { padding-left: var(--space-2)!important; padding-right: var(--space-2)!important; }
.px-3, .px-3-c > *, .px-3-d * { padding-left: var(--space-3)!important; padding-right: var(--space-3)!important; }
.px-4, .px-4-c > *, .px-4-d * { padding-left: var(--space-4)!important; padding-right: var(--space-4)!important; }
.px-5, .px-5-c > *, .px-5-d * { padding-left: var(--space-5)!important; padding-right: var(--space-5)!important; }
.py-0, .py-0-c > *, .py-0-d * { padding-top: var(--space-0)!important; padding-bottom: var(--space-0)!important; }
.py-1, .py-1-c > *, .py-1-d * { padding-top: var(--space-1)!important; padding-bottom: var(--space-1)!important; }
.py-2, .py-2-c > *, .py-2-d * { padding-top: var(--space-2)!important; padding-bottom: var(--space-2)!important; }
.py-3, .py-3-c > *, .py-3-d * { padding-top: var(--space-3)!important; padding-bottom: var(--space-3)!important; }
.py-4, .py-4-c > *, .py-4-d * { padding-top: var(--space-4)!important; padding-bottom: var(--space-4)!important; }
.py-5, .py-5-c > *, .py-5-d * { padding-top: var(--space-5)!important; padding-bottom: var(--space-5)!important; }

@media (min-width: 992px) {
.m-md-0, .m-md-0-c > *, .m-md-0-d * { margin: var(--space-0)!important; }
.mt-md-0, .mt-md-0-c > *, .mt-md-0-d * { margin-top: var(--space-0)!important; }
.mb-md-0, .mb-md-0-c > *, .mb-md-0-d * { margin-bottom: var(--space-0)!important; }
.ml-md-0, .ml-md-0-c > *, .ml-md-0-d * { margin-left: var(--space-0)!important; }
.mr-md-0, .mr-md-0-c > *, .mr-md-0-d * { margin-right: var(--space-0)!important; }
.mx-md-0, .mx-md-0-c > *, .mx-md-0-d * { margin-left: var(--space-0)!important; margin-right: var(--space-0)!important; }
.my-md-0, .my-md-0-c > *, .my-md-0-d * { margin-top: var(--space-0)!important; margin-bottom: var(--space-0)!important; }
.p-md-0, .p-md-0-c > *, .p-md-0-d * { padding: var(--space-0)!important; }
.pt-md-0, .pt-md-0-c > *, .pt-md-0-d * { padding-top: var(--space-0)!important; }
.pb-md-0, .pb-md-0-c > *, .pb-md-0-d * { padding-bottom: var(--space-0)!important; }
.pl-md-0, .pl-md-0-c > *, .pl-md-0-d * { padding-left: var(--space-0)!important; }
.pr-md-0, .pr-md-0-c > *, .pr-md-0-d * { padding-right: var(--space-0)!important; }
.px-md-0, .px-md-0-c > *, .px-md-0-d * { padding-left: var(--space-0)!important; padding-right: var(--space-0)!important; }
.py-md-0, .py-md-0-c > *, .py-md-0-d * { padding-top: var(--space-0)!important; padding-bottom: var(--space-0)!important; }
.m-md-1, .m-md-1-c > *, .m-md-1-d * { margin: var(--space-1)!important; }
.mt-md-1, .mt-md-1-c > *, .mt-md-1-d * { margin-top: var(--space-1)!important; }
.mb-md-1, .mb-md-1-c > *, .mb-md-1-d * { margin-bottom: var(--space-1)!important; }
.ml-md-1, .ml-md-1-c > *, .ml-md-1-d * { margin-left: var(--space-1)!important; }
.mr-md-1, .mr-md-1-c > *, .mr-md-1-d * { margin-right: var(--space-1)!important; }
.mx-md-1, .mx-md-1-c > *, .mx-md-1-d * { margin-left: var(--space-1)!important; margin-right: var(--space-1)!important; }
.my-md-1, .my-md-1-c > *, .my-md-1-d * { margin-top: var(--space-1)!important; margin-bottom: var(--space-1)!important; }
.p-md-1, .p-md-1-c > *, .p-md-1-d * { padding: var(--space-1)!important; }
.pt-md-1, .pt-md-1-c > *, .pt-md-1-d * { padding-top: var(--space-1)!important; }
.pb-md-1, .pb-md-1-c > *, .pb-md-1-d * { padding-bottom: var(--space-1)!important; }
.pl-md-1, .pl-md-1-c > *, .pl-md-1-d * { padding-left: var(--space-1)!important; }
.pr-md-1, .pr-md-1-c > *, .pr-md-1-d * { padding-right: var(--space-1)!important; }
.px-md-1, .px-md-1-c > *, .px-md-1-d * { padding-left: var(--space-1)!important; padding-right: var(--space-1)!important; }
.py-md-1, .py-md-1-c > *, .py-md-1-d * { padding-top: var(--space-1)!important; padding-bottom: var(--space-1)!important; }
.m-md-2, .m-md-2-c > *, .m-md-2-d * { margin: var(--space-2)!important; }
.mt-md-2, .mt-md-2-c > *, .mt-md-2-d * { margin-top: var(--space-2)!important; }
.mb-md-2, .mb-md-2-c > *, .mb-md-2-d * { margin-bottom: var(--space-2)!important; }
.ml-md-2, .ml-md-2-c > *, .ml-md-2-d * { margin-left: var(--space-2)!important; }
.mr-md-2, .mr-md-2-c > *, .mr-md-2-d * { margin-right: var(--space-2)!important; }
.mx-md-2, .mx-md-2-c > *, .mx-md-2-d * { margin-left: var(--space-2)!important; margin-right: var(--space-2)!important; }
.my-md-2, .my-md-2-c > *, .my-md-2-d * { margin-top: var(--space-2)!important; margin-bottom: var(--space-2)!important; }
.p-md-2, .p-md-2-c > *, .p-md-2-d * { padding: var(--space-2)!important; }
.pt-md-2, .pt-md-2-c > *, .pt-md-2-d * { padding-top: var(--space-2)!important; }
.pb-md-2, .pb-md-2-c > *, .pb-md-2-d * { padding-bottom: var(--space-2)!important; }
.pl-md-2, .pl-md-2-c > *, .pl-md-2-d * { padding-left: var(--space-2)!important; }
.pr-md-2, .pr-md-2-c > *, .pr-md-2-d * { padding-right: var(--space-2)!important; }
.px-md-2, .px-md-2-c > *, .px-md-2-d * { padding-left: var(--space-2)!important; padding-right: var(--space-2)!important; }
.py-md-2, .py-md-2-c > *, .py-md-2-d * { padding-top: var(--space-2)!important; padding-bottom: var(--space-2)!important; }
.m-md-3, .m-md-3-c > *, .m-md-3-d * { margin: var(--space-3)!important; }
.mt-md-3, .mt-md-3-c > *, .mt-md-3-d * { margin-top: var(--space-3)!important; }
.mb-md-3, .mb-md-3-c > *, .mb-md-3-d * { margin-bottom: var(--space-3)!important; }
.ml-md-3, .ml-md-3-c > *, .ml-md-3-d * { margin-left: var(--space-3)!important; }
.mr-md-3, .mr-md-3-c > *, .mr-md-3-d * { margin-right: var(--space-3)!important; }
.mx-md-3, .mx-md-3-c > *, .mx-md-3-d * { margin-left: var(--space-3)!important; margin-right: var(--space-3)!important; }
.my-md-3, .my-md-3-c > *, .my-md-3-d * { margin-top: var(--space-3)!important; margin-bottom: var(--space-3)!important; }
.p-md-3, .p-md-3-c > *, .p-md-3-d * { padding: var(--space-3)!important; }
.pt-md-3, .pt-md-3-c > *, .pt-md-3-d * { padding-top: var(--space-3)!important; }
.pb-md-3, .pb-md-3-c > *, .pb-md-3-d * { padding-bottom: var(--space-3)!important; }
.pl-md-3, .pl-md-3-c > *, .pl-md-3-d * { padding-left: var(--space-3)!important; }
.pr-md-3, .pr-md-3-c > *, .pr-md-3-d * { padding-right: var(--space-3)!important; }
.px-md-3, .px-md-3-c > *, .px-md-3-d * { padding-left: var(--space-3)!important; padding-right: var(--space-3)!important; }
.py-md-3, .py-md-3-c > *, .py-md-3-d * { padding-top: var(--space-3)!important; padding-bottom: var(--space-3)!important; }
.m-md-4, .m-md-4-c > *, .m-md-4-d * { margin: var(--space-4)!important; }
.mt-md-4, .mt-md-4-c > *, .mt-md-4-d * { margin-top: var(--space-4)!important; }
.mb-md-4, .mb-md-4-c > *, .mb-md-4-d * { margin-bottom: var(--space-4)!important; }
.ml-md-4, .ml-md-4-c > *, .ml-md-4-d * { margin-left: var(--space-4)!important; }
.mr-md-4, .mr-md-4-c > *, .mr-md-4-d * { margin-right: var(--space-4)!important; }
.mx-md-4, .mx-md-4-c > *, .mx-md-4-d * { margin-left: var(--space-4)!important; margin-right: var(--space-4)!important; }
.my-md-4, .my-md-4-c > *, .my-md-4-d * { margin-top: var(--space-4)!important; margin-bottom: var(--space-4)!important; }
.p-md-4, .p-md-4-c > *, .p-md-4-d * { padding: var(--space-4)!important; }
.pt-md-4, .pt-md-4-c > *, .pt-md-4-d * { padding-top: var(--space-4)!important; }
.pb-md-4, .pb-md-4-c > *, .pb-md-4-d * { padding-bottom: var(--space-4)!important; }
.pl-md-4, .pl-md-4-c > *, .pl-md-4-d * { padding-left: var(--space-4)!important; }
.pr-md-4, .pr-md-4-c > *, .pr-md-4-d * { padding-right: var(--space-4)!important; }
.px-md-4, .px-md-4-c > *, .px-md-4-d * { padding-left: var(--space-4)!important; padding-right: var(--space-4)!important; }
.py-md-4, .py-md-4-c > *, .py-md-4-d * { padding-top: var(--space-4)!important; padding-bottom: var(--space-4)!important; }
.m-md-5, .m-md-5-c > *, .m-md-5-d * { margin: var(--space-5)!important; }
.mt-md-5, .mt-md-5-c > *, .mt-md-5-d * { margin-top: var(--space-5)!important; }
.mb-md-5, .mb-md-5-c > *, .mb-md-5-d * { margin-bottom: var(--space-5)!important; }
.ml-md-5, .ml-md-5-c > *, .ml-md-5-d * { margin-left: var(--space-5)!important; }
.mr-md-5, .mr-md-5-c > *, .mr-md-5-d * { margin-right: var(--space-5)!important; }
.mx-md-5, .mx-md-5-c > *, .mx-md-5-d * { margin-left: var(--space-5)!important; margin-right: var(--space-5)!important; }
.my-md-5, .my-md-5-c > *, .my-md-5-d * { margin-top: var(--space-5)!important; margin-bottom: var(--space-5)!important; }
.p-md-5, .p-md-5-c > *, .p-md-5-d * { padding: var(--space-5)!important; }
.pt-md-5, .pt-md-5-c > *, .pt-md-5-d * { padding-top: var(--space-5)!important; }
.pb-md-5, .pb-md-5-c > *, .pb-md-5-d * { padding-bottom: var(--space-5)!important; }
.pl-md-5, .pl-md-5-c > *, .pl-md-5-d * { padding-left: var(--space-5)!important; }
.pr-md-5, .pr-md-5-c > *, .pr-md-5-d * { padding-right: var(--space-5)!important; }
.px-md-5, .px-md-5-c > *, .px-md-5-d * { padding-left: var(--space-5)!important; padding-right: var(--space-5)!important; }
.py-md-5, .py-md-5-c > *, .py-md-5-d * { padding-top: var(--space-5)!important; padding-bottom: var(--space-5)!important; }
}
@media (min-width: 1200px) {
.m-lg-0, .m-lg-0-c > *, .m-lg-0-d * { margin: var(--space-0)!important; }
.mt-lg-0, .mt-lg-0-c > *, .mt-lg-0-d * { margin-top: var(--space-0)!important; }
.mb-lg-0, .mb-lg-0-c > *, .mb-lg-0-d * { margin-bottom: var(--space-0)!important; }
.ml-lg-0, .ml-lg-0-c > *, .ml-lg-0-d * { margin-left: var(--space-0)!important; }
.mr-lg-0, .mr-lg-0-c > *, .mr-lg-0-d * { margin-right: var(--space-0)!important; }
.mx-lg-0, .mx-lg-0-c > *, .mx-lg-0-d * { margin-left: var(--space-0)!important; margin-right: var(--space-0)!important; }
.my-lg-0, .my-lg-0-c > *, .my-lg-0-d * { margin-top: var(--space-0)!important; margin-bottom: var(--space-0)!important; }
.p-lg-0, .p-lg-0-c > *, .p-lg-0-d * { padding: var(--space-0)!important; }
.pt-lg-0, .pt-lg-0-c > *, .pt-lg-0-d * { padding-top: var(--space-0)!important; }
.pb-lg-0, .pb-lg-0-c > *, .pb-lg-0-d * { padding-bottom: var(--space-0)!important; }
.pl-lg-0, .pl-lg-0-c > *, .pl-lg-0-d * { padding-left: var(--space-0)!important; }
.pr-lg-0, .pr-lg-0-c > *, .pr-lg-0-d * { padding-right: var(--space-0)!important; }
.px-lg-0, .px-lg-0-c > *, .px-lg-0-d * { padding-left: var(--space-0)!important; padding-right: var(--space-0)!important; }
.py-lg-0, .py-lg-0-c > *, .py-lg-0-d * { padding-top: var(--space-0)!important; padding-bottom: var(--space-0)!important; }
.m-lg-1, .m-lg-1-c > *, .m-lg-1-d * { margin: var(--space-1)!important; }
.mt-lg-1, .mt-lg-1-c > *, .mt-lg-1-d * { margin-top: var(--space-1)!important; }
.mb-lg-1, .mb-lg-1-c > *, .mb-lg-1-d * { margin-bottom: var(--space-1)!important; }
.ml-lg-1, .ml-lg-1-c > *, .ml-lg-1-d * { margin-left: var(--space-1)!important; }
.mr-lg-1, .mr-lg-1-c > *, .mr-lg-1-d * { margin-right: var(--space-1)!important; }
.mx-lg-1, .mx-lg-1-c > *, .mx-lg-1-d * { margin-left: var(--space-1)!important; margin-right: var(--space-1)!important; }
.my-lg-1, .my-lg-1-c > *, .my-lg-1-d * { margin-top: var(--space-1)!important; margin-bottom: var(--space-1)!important; }
.p-lg-1, .p-lg-1-c > *, .p-lg-1-d * { padding: var(--space-1)!important; }
.pt-lg-1, .pt-lg-1-c > *, .pt-lg-1-d * { padding-top: var(--space-1)!important; }
.pb-lg-1, .pb-lg-1-c > *, .pb-lg-1-d * { padding-bottom: var(--space-1)!important; }
.pl-lg-1, .pl-lg-1-c > *, .pl-lg-1-d * { padding-left: var(--space-1)!important; }
.pr-lg-1, .pr-lg-1-c > *, .pr-lg-1-d * { padding-right: var(--space-1)!important; }
.px-lg-1, .px-lg-1-c > *, .px-lg-1-d * { padding-left: var(--space-1)!important; padding-right: var(--space-1)!important; }
.py-lg-1, .py-lg-1-c > *, .py-lg-1-d * { padding-top: var(--space-1)!important; padding-bottom: var(--space-1)!important; }
.m-lg-2, .m-lg-2-c > *, .m-lg-2-d * { margin: var(--space-2)!important; }
.mt-lg-2, .mt-lg-2-c > *, .mt-lg-2-d * { margin-top: var(--space-2)!important; }
.mb-lg-2, .mb-lg-2-c > *, .mb-lg-2-d * { margin-bottom: var(--space-2)!important; }
.ml-lg-2, .ml-lg-2-c > *, .ml-lg-2-d * { margin-left: var(--space-2)!important; }
.mr-lg-2, .mr-lg-2-c > *, .mr-lg-2-d * { margin-right: var(--space-2)!important; }
.mx-lg-2, .mx-lg-2-c > *, .mx-lg-2-d * { margin-left: var(--space-2)!important; margin-right: var(--space-2)!important; }
.my-lg-2, .my-lg-2-c > *, .my-lg-2-d * { margin-top: var(--space-2)!important; margin-bottom: var(--space-2)!important; }
.p-lg-2, .p-lg-2-c > *, .p-lg-2-d * { padding: var(--space-2)!important; }
.pt-lg-2, .pt-lg-2-c > *, .pt-lg-2-d * { padding-top: var(--space-2)!important; }
.pb-lg-2, .pb-lg-2-c > *, .pb-lg-2-d * { padding-bottom: var(--space-2)!important; }
.pl-lg-2, .pl-lg-2-c > *, .pl-lg-2-d * { padding-left: var(--space-2)!important; }
.pr-lg-2, .pr-lg-2-c > *, .pr-lg-2-d * { padding-right: var(--space-2)!important; }
.px-lg-2, .px-lg-2-c > *, .px-lg-2-d * { padding-left: var(--space-2)!important; padding-right: var(--space-2)!important; }
.py-lg-2, .py-lg-2-c > *, .py-lg-2-d * { padding-top: var(--space-2)!important; padding-bottom: var(--space-2)!important; }
.m-lg-3, .m-lg-3-c > *, .m-lg-3-d * { margin: var(--space-3)!important; }
.mt-lg-3, .mt-lg-3-c > *, .mt-lg-3-d * { margin-top: var(--space-3)!important; }
.mb-lg-3, .mb-lg-3-c > *, .mb-lg-3-d * { margin-bottom: var(--space-3)!important; }
.ml-lg-3, .ml-lg-3-c > *, .ml-lg-3-d * { margin-left: var(--space-3)!important; }
.mr-lg-3, .mr-lg-3-c > *, .mr-lg-3-d * { margin-right: var(--space-3)!important; }
.mx-lg-3, .mx-lg-3-c > *, .mx-lg-3-d * { margin-left: var(--space-3)!important; margin-right: var(--space-3)!important; }
.my-lg-3, .my-lg-3-c > *, .my-lg-3-d * { margin-top: var(--space-3)!important; margin-bottom: var(--space-3)!important; }
.p-lg-3, .p-lg-3-c > *, .p-lg-3-d * { padding: var(--space-3)!important; }
.pt-lg-3, .pt-lg-3-c > *, .pt-lg-3-d * { padding-top: var(--space-3)!important; }
.pb-lg-3, .pb-lg-3-c > *, .pb-lg-3-d * { padding-bottom: var(--space-3)!important; }
.pl-lg-3, .pl-lg-3-c > *, .pl-lg-3-d * { padding-left: var(--space-3)!important; }
.pr-lg-3, .pr-lg-3-c > *, .pr-lg-3-d * { padding-right: var(--space-3)!important; }
.px-lg-3, .px-lg-3-c > *, .px-lg-3-d * { padding-left: var(--space-3)!important; padding-right: var(--space-3)!important; }
.py-lg-3, .py-lg-3-c > *, .py-lg-3-d * { padding-top: var(--space-3)!important; padding-bottom: var(--space-3)!important; }
.m-lg-4, .m-lg-4-c > *, .m-lg-4-d * { margin: var(--space-4)!important; }
.mt-lg-4, .mt-lg-4-c > *, .mt-lg-4-d * { margin-top: var(--space-4)!important; }
.mb-lg-4, .mb-lg-4-c > *, .mb-lg-4-d * { margin-bottom: var(--space-4)!important; }
.ml-lg-4, .ml-lg-4-c > *, .ml-lg-4-d * { margin-left: var(--space-4)!important; }
.mr-lg-4, .mr-lg-4-c > *, .mr-lg-4-d * { margin-right: var(--space-4)!important; }
.mx-lg-4, .mx-lg-4-c > *, .mx-lg-4-d * { margin-left: var(--space-4)!important; margin-right: var(--space-4)!important; }
.my-lg-4, .my-lg-4-c > *, .my-lg-4-d * { margin-top: var(--space-4)!important; margin-bottom: var(--space-4)!important; }
.p-lg-4, .p-lg-4-c > *, .p-lg-4-d * { padding: var(--space-4)!important; }
.pt-lg-4, .pt-lg-4-c > *, .pt-lg-4-d * { padding-top: var(--space-4)!important; }
.pb-lg-4, .pb-lg-4-c > *, .pb-lg-4-d * { padding-bottom: var(--space-4)!important; }
.pl-lg-4, .pl-lg-4-c > *, .pl-lg-4-d * { padding-left: var(--space-4)!important; }
.pr-lg-4, .pr-lg-4-c > *, .pr-lg-4-d * { padding-right: var(--space-4)!important; }
.px-lg-4, .px-lg-4-c > *, .px-lg-4-d * { padding-left: var(--space-4)!important; padding-right: var(--space-4)!important; }
.py-lg-4, .py-lg-4-c > *, .py-lg-4-d * { padding-top: var(--space-4)!important; padding-bottom: var(--space-4)!important; }
.m-lg-5, .m-lg-5-c > *, .m-lg-5-d * { margin: var(--space-5)!important; }
.mt-lg-5, .mt-lg-5-c > *, .mt-lg-5-d * { margin-top: var(--space-5)!important; }
.mb-lg-5, .mb-lg-5-c > *, .mb-lg-5-d * { margin-bottom: var(--space-5)!important; }
.ml-lg-5, .ml-lg-5-c > *, .ml-lg-5-d * { margin-left: var(--space-5)!important; }
.mr-lg-5, .mr-lg-5-c > *, .mr-lg-5-d * { margin-right: var(--space-5)!important; }
.mx-lg-5, .mx-lg-5-c > *, .mx-lg-5-d * { margin-left: var(--space-5)!important; margin-right: var(--space-5)!important; }
.my-lg-5, .my-lg-5-c > *, .my-lg-5-d * { margin-top: var(--space-5)!important; margin-bottom: var(--space-5)!important; }
.p-lg-5, .p-lg-5-c > *, .p-lg-5-d * { padding: var(--space-5)!important; }
.pt-lg-5, .pt-lg-5-c > *, .pt-lg-5-d * { padding-top: var(--space-5)!important; }
.pb-lg-5, .pb-lg-5-c > *, .pb-lg-5-d * { padding-bottom: var(--space-5)!important; }
.pl-lg-5, .pl-lg-5-c > *, .pl-lg-5-d * { padding-left: var(--space-5)!important; }
.pr-lg-5, .pr-lg-5-c > *, .pr-lg-5-d * { padding-right: var(--space-5)!important; }
.px-lg-5, .px-lg-5-c > *, .px-lg-5-d * { padding-left: var(--space-5)!important; padding-right: var(--space-5)!important; }
.py-lg-5, .py-lg-5-c > *, .py-lg-5-d * { padding-top: var(--space-5)!important; padding-bottom: var(--space-5)!important; }
}
@media (min-width: 1400px) {
.m-xl-0, .m-xl-0-c > *, .m-xl-0-d * { margin: var(--space-0)!important; }
.mt-xl-0, .mt-xl-0-c > *, .mt-xl-0-d * { margin-top: var(--space-0)!important; }
.mb-xl-0, .mb-xl-0-c > *, .mb-xl-0-d * { margin-bottom: var(--space-0)!important; }
.ml-xl-0, .ml-xl-0-c > *, .ml-xl-0-d * { margin-left: var(--space-0)!important; }
.mr-xl-0, .mr-xl-0-c > *, .mr-xl-0-d * { margin-right: var(--space-0)!important; }
.mx-xl-0, .mx-xl-0-c > *, .mx-xl-0-d * { margin-left: var(--space-0)!important; margin-right: var(--space-0)!important; }
.my-xl-0, .my-xl-0-c > *, .my-xl-0-d * { margin-top: var(--space-0)!important; margin-bottom: var(--space-0)!important; }
.p-xl-0, .p-xl-0-c > *, .p-xl-0-d * { padding: var(--space-0)!important; }
.pt-xl-0, .pt-xl-0-c > *, .pt-xl-0-d * { padding-top: var(--space-0)!important; }
.pb-xl-0, .pb-xl-0-c > *, .pb-xl-0-d * { padding-bottom: var(--space-0)!important; }
.pl-xl-0, .pl-xl-0-c > *, .pl-xl-0-d * { padding-left: var(--space-0)!important; }
.pr-xl-0, .pr-xl-0-c > *, .pr-xl-0-d * { padding-right: var(--space-0)!important; }
.px-xl-0, .px-xl-0-c > *, .px-xl-0-d * { padding-left: var(--space-0)!important; padding-right: var(--space-0)!important; }
.py-xl-0, .py-xl-0-c > *, .py-xl-0-d * { padding-top: var(--space-0)!important; padding-bottom: var(--space-0)!important; }
.m-xl-1, .m-xl-1-c > *, .m-xl-1-d * { margin: var(--space-1)!important; }
.mt-xl-1, .mt-xl-1-c > *, .mt-xl-1-d * { margin-top: var(--space-1)!important; }
.mb-xl-1, .mb-xl-1-c > *, .mb-xl-1-d * { margin-bottom: var(--space-1)!important; }
.ml-xl-1, .ml-xl-1-c > *, .ml-xl-1-d * { margin-left: var(--space-1)!important; }
.mr-xl-1, .mr-xl-1-c > *, .mr-xl-1-d * { margin-right: var(--space-1)!important; }
.mx-xl-1, .mx-xl-1-c > *, .mx-xl-1-d * { margin-left: var(--space-1)!important; margin-right: var(--space-1)!important; }
.my-xl-1, .my-xl-1-c > *, .my-xl-1-d * { margin-top: var(--space-1)!important; margin-bottom: var(--space-1)!important; }
.p-xl-1, .p-xl-1-c > *, .p-xl-1-d * { padding: var(--space-1)!important; }
.pt-xl-1, .pt-xl-1-c > *, .pt-xl-1-d * { padding-top: var(--space-1)!important; }
.pb-xl-1, .pb-xl-1-c > *, .pb-xl-1-d * { padding-bottom: var(--space-1)!important; }
.pl-xl-1, .pl-xl-1-c > *, .pl-xl-1-d * { padding-left: var(--space-1)!important; }
.pr-xl-1, .pr-xl-1-c > *, .pr-xl-1-d * { padding-right: var(--space-1)!important; }
.px-xl-1, .px-xl-1-c > *, .px-xl-1-d * { padding-left: var(--space-1)!important; padding-right: var(--space-1)!important; }
.py-xl-1, .py-xl-1-c > *, .py-xl-1-d * { padding-top: var(--space-1)!important; padding-bottom: var(--space-1)!important; }
.m-xl-2, .m-xl-2-c > *, .m-xl-2-d * { margin: var(--space-2)!important; }
.mt-xl-2, .mt-xl-2-c > *, .mt-xl-2-d * { margin-top: var(--space-2)!important; }
.mb-xl-2, .mb-xl-2-c > *, .mb-xl-2-d * { margin-bottom: var(--space-2)!important; }
.ml-xl-2, .ml-xl-2-c > *, .ml-xl-2-d * { margin-left: var(--space-2)!important; }
.mr-xl-2, .mr-xl-2-c > *, .mr-xl-2-d * { margin-right: var(--space-2)!important; }
.mx-xl-2, .mx-xl-2-c > *, .mx-xl-2-d * { margin-left: var(--space-2)!important; margin-right: var(--space-2)!important; }
.my-xl-2, .my-xl-2-c > *, .my-xl-2-d * { margin-top: var(--space-2)!important; margin-bottom: var(--space-2)!important; }
.p-xl-2, .p-xl-2-c > *, .p-xl-2-d * { padding: var(--space-2)!important; }
.pt-xl-2, .pt-xl-2-c > *, .pt-xl-2-d * { padding-top: var(--space-2)!important; }
.pb-xl-2, .pb-xl-2-c > *, .pb-xl-2-d * { padding-bottom: var(--space-2)!important; }
.pl-xl-2, .pl-xl-2-c > *, .pl-xl-2-d * { padding-left: var(--space-2)!important; }
.pr-xl-2, .pr-xl-2-c > *, .pr-xl-2-d * { padding-right: var(--space-2)!important; }
.px-xl-2, .px-xl-2-c > *, .px-xl-2-d * { padding-left: var(--space-2)!important; padding-right: var(--space-2)!important; }
.py-xl-2, .py-xl-2-c > *, .py-xl-2-d * { padding-top: var(--space-2)!important; padding-bottom: var(--space-2)!important; }
.m-xl-3, .m-xl-3-c > *, .m-xl-3-d * { margin: var(--space-3)!important; }
.mt-xl-3, .mt-xl-3-c > *, .mt-xl-3-d * { margin-top: var(--space-3)!important; }
.mb-xl-3, .mb-xl-3-c > *, .mb-xl-3-d * { margin-bottom: var(--space-3)!important; }
.ml-xl-3, .ml-xl-3-c > *, .ml-xl-3-d * { margin-left: var(--space-3)!important; }
.mr-xl-3, .mr-xl-3-c > *, .mr-xl-3-d * { margin-right: var(--space-3)!important; }
.mx-xl-3, .mx-xl-3-c > *, .mx-xl-3-d * { margin-left: var(--space-3)!important; margin-right: var(--space-3)!important; }
.my-xl-3, .my-xl-3-c > *, .my-xl-3-d * { margin-top: var(--space-3)!important; margin-bottom: var(--space-3)!important; }
.p-xl-3, .p-xl-3-c > *, .p-xl-3-d * { padding: var(--space-3)!important; }
.pt-xl-3, .pt-xl-3-c > *, .pt-xl-3-d * { padding-top: var(--space-3)!important; }
.pb-xl-3, .pb-xl-3-c > *, .pb-xl-3-d * { padding-bottom: var(--space-3)!important; }
.pl-xl-3, .pl-xl-3-c > *, .pl-xl-3-d * { padding-left: var(--space-3)!important; }
.pr-xl-3, .pr-xl-3-c > *, .pr-xl-3-d * { padding-right: var(--space-3)!important; }
.px-xl-3, .px-xl-3-c > *, .px-xl-3-d * { padding-left: var(--space-3)!important; padding-right: var(--space-3)!important; }
.py-xl-3, .py-xl-3-c > *, .py-xl-3-d * { padding-top: var(--space-3)!important; padding-bottom: var(--space-3)!important; }
.m-xl-4, .m-xl-4-c > *, .m-xl-4-d * { margin: var(--space-4)!important; }
.mt-xl-4, .mt-xl-4-c > *, .mt-xl-4-d * { margin-top: var(--space-4)!important; }
.mb-xl-4, .mb-xl-4-c > *, .mb-xl-4-d * { margin-bottom: var(--space-4)!important; }
.ml-xl-4, .ml-xl-4-c > *, .ml-xl-4-d * { margin-left: var(--space-4)!important; }
.mr-xl-4, .mr-xl-4-c > *, .mr-xl-4-d * { margin-right: var(--space-4)!important; }
.mx-xl-4, .mx-xl-4-c > *, .mx-xl-4-d * { margin-left: var(--space-4)!important; margin-right: var(--space-4)!important; }
.my-xl-4, .my-xl-4-c > *, .my-xl-4-d * { margin-top: var(--space-4)!important; margin-bottom: var(--space-4)!important; }
.p-xl-4, .p-xl-4-c > *, .p-xl-4-d * { padding: var(--space-4)!important; }
.pt-xl-4, .pt-xl-4-c > *, .pt-xl-4-d * { padding-top: var(--space-4)!important; }
.pb-xl-4, .pb-xl-4-c > *, .pb-xl-4-d * { padding-bottom: var(--space-4)!important; }
.pl-xl-4, .pl-xl-4-c > *, .pl-xl-4-d * { padding-left: var(--space-4)!important; }
.pr-xl-4, .pr-xl-4-c > *, .pr-xl-4-d * { padding-right: var(--space-4)!important; }
.px-xl-4, .px-xl-4-c > *, .px-xl-4-d * { padding-left: var(--space-4)!important; padding-right: var(--space-4)!important; }
.py-xl-4, .py-xl-4-c > *, .py-xl-4-d * { padding-top: var(--space-4)!important; padding-bottom: var(--space-4)!important; }
.m-xl-5, .m-xl-5-c > *, .m-xl-5-d * { margin: var(--space-5)!important; }
.mt-xl-5, .mt-xl-5-c > *, .mt-xl-5-d * { margin-top: var(--space-5)!important; }
.mb-xl-5, .mb-xl-5-c > *, .mb-xl-5-d * { margin-bottom: var(--space-5)!important; }
.ml-xl-5, .ml-xl-5-c > *, .ml-xl-5-d * { margin-left: var(--space-5)!important; }
.mr-xl-5, .mr-xl-5-c > *, .mr-xl-5-d * { margin-right: var(--space-5)!important; }
.mx-xl-5, .mx-xl-5-c > *, .mx-xl-5-d * { margin-left: var(--space-5)!important; margin-right: var(--space-5)!important; }
.my-xl-5, .my-xl-5-c > *, .my-xl-5-d * { margin-top: var(--space-5)!important; margin-bottom: var(--space-5)!important; }
.p-xl-5, .p-xl-5-c > *, .p-xl-5-d * { padding: var(--space-5)!important; }
.pt-xl-5, .pt-xl-5-c > *, .pt-xl-5-d * { padding-top: var(--space-5)!important; }
.pb-xl-5, .pb-xl-5-c > *, .pb-xl-5-d * { padding-bottom: var(--space-5)!important; }
.pl-xl-5, .pl-xl-5-c > *, .pl-xl-5-d * { padding-left: var(--space-5)!important; }
.pr-xl-5, .pr-xl-5-c > *, .pr-xl-5-d * { padding-right: var(--space-5)!important; }
.px-xl-5, .px-xl-5-c > *, .px-xl-5-d * { padding-left: var(--space-5)!important; padding-right: var(--space-5)!important; }
.py-xl-5, .py-xl-5-c > *, .py-xl-5-d * { padding-top: var(--space-5)!important; padding-bottom: var(--space-5)!important; }
}
/* c = children, d = descendants */
.mr-2-c > *, .mr-2-d * {
  margin-right: var(--space-2)!important;
}

/* Alignment */
.text-left { text-align: left; } 
.text-center { text-align: center; }
.left-100 { left: 100%; }
.left-50 { left: 50%; }
.left-0 { left: 0; }
.right-100 { right: 100%; }
.right-50 { right: 50%; }
.right-0 { right: 0; }
.top-100 { top: 100%; }
.top-50 { top: 50%; }
.top-0 { top: 0; }
.bottom-100 { bottom: 100%; }
.bottom-50 { bottom: 50%; }
.bottom-0 { bottom: 0; }
.translate-center { transform: translate(-50%, -50%); }
.translate-center-x { transform: translateX(-50%); }
.translate-center-y { transform: translateY(-50%); }

/* Badges */
.badge {
  display: inline-block;
    padding: .35em .65em;
    font-size: .75em;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
}
.badge.rounded-pill { border-radius: 50rem!important; }

/* Display & layout */
.d-block { display: block; } 
.d-inline { display: inline; } 
.d-flex { display: flex!important; }
.flex-wrap { flex-wrap: wrap; }
.justify-center { justify-content: center; } 
.justify-between { justify-content: space-between; }
.align-center { align-items: center; }
.position-absolute { position: absolute; }
.position-relative { position: relative; }
.position-fixed { position: fixed; }
.float-left { float: left; }
.float-right { float: right; }
.float-none { float: none; }

/* Width & height helpers */
.w-100 { width: 100% !important; }
.w-90 { width: 90% !important; }
.w-80 { width: 80% !important; }
.w-70 { width: 70% !important; }
.w-60 { width: 60% !important; }
.w-50 { width: 50% !important; }
.w-40 { width: 40% !important; }
.w-30 { width: 30% !important; }
.w-20 { width: 20% !important; }
.w-10 { width: 10% !important; }
.w-auto { width: auto !important; }
.h-100 { height: 100% !important; }
.h-90 { height: 90% !important; }
.h-80 { height: 80% !important; }
.h-70 { height: 70% !important; }
.h-60 { height: 60% !important; }
.h-50 { height: 50% !important; }
.h-40 { height: 40% !important; }
.h-30 { height: 30% !important; }
.h-20 { height: 20% !important; }
.h-10 { height: 10% !important; }
.h-auto { height: auto !important; }

/* Filters */
.brightness-130 { filter: brightness(1.3); }
.brightness-120 { filter: brightness(1.2); }
.brightness-110 { filter: brightness(1.1); }
.brightness-100 { filter: brightness(1.0); }
.brightness-90 { filter: brightness(0.9); }
.brightness-80 { filter: brightness(0.8); }
.brightness-70 { filter: brightness(0.7); }
.brightness-60 { filter: brightness(0.6); }
.brightness-50 { filter: brightness(0.5); }
.brightness-50 { filter: brightness(0.4); }

.opacity-100 { filter: opacity(1.0); }
.opacity-90 { filter: opacity(0.9); }
.opacity-80 { filter: opacity(0.8); }
.opacity-70 { filter: opacity(0.7); }
.opacity-60 { filter: opacity(0.6); }
.opacity-50 { filter: opacity(0.5); }
.opacity-40 { filter: opacity(0.4); }
.opacity-30 { filter: opacity(0.3); }
.opacity-20 { filter: opacity(0.2); }
.opacity-10 { filter: opacity(0.1); }

/* Background colors */
.bg-primary { background-color: var(--color-primary)!important }
.bg-secondary { background-color: var(--color-secondary)!important }
.bg-tertiary { background-color: var(--color-tertiary)!important }
.bg-quaternary { background-color: var(--color-quaternary)!important }
.bg-success { background-color: var(--color-success)!important }
.bg-warning { background-color: var(--color-warning)!important }
.bg-error { background-color: var(--color-error)!important }
.bg-info { background-color: var(--color-info)!important }

/* Theme based colors */
.bg-base { background-color: var(--theme-color)!important }
.color-base { color: var(--theme-color)!important }

/* Theme based offsets */
.bg-light { background-color: color-mix(in oklab, var(--theme-color), var(--theme-light-mix) var(--offset-factor-1))!important }
.bg-lighter { background-color: color-mix(in oklab, var(--theme-color), var(--theme-light-mix) var(--offset-factor-2))!important }
.bg-xlight { background-color: color-mix(in oklab, var(--theme-color), var(--theme-light-mix) var(--offset-factor-3))!important }
.bg-xxlight { background-color: color-mix(in oklab, var(--theme-color), var(--theme-light-mix) var(--offset-factor-4))!important }
.bg-dark { background-color: color-mix(in oklab, var(--theme-color), var(--theme-dark-mix) var(--offset-factor-1))!important }
.bg-darker { background-color: color-mix(in oklab, var(--theme-color), var(--theme-dark-mix) var(--offset-factor-2))!important }
.bg-xdark { background-color: color-mix(in oklab, var(--theme-color), var(--theme-dark-mix) var(--offset-factor-3))!important }
.bg-xxdark { background-color: color-mix(in oklab, var(--theme-color), var(--theme-dark-mix) var(--offset-factor-4))!important }

.color-light { color: color-mix(in oklab, var(--theme-color), var(--theme-light-mix) var(--offset-factor-1))!important }
.color-lighter { color: color-mix(in oklab, var(--theme-color), var(--theme-light-mix) var(--offset-factor-2))!important }
.color-xlight { color: color-mix(in oklab, var(--theme-color), var(--theme-light-mix) var(--offset-factor-3))!important }
.color-xxlight { color: color-mix(in oklab, var(--theme-color), var(--theme-light-mix) var(--offset-factor-4))!important }
.color-dark { color: color-mix(in oklab, var(--theme-color), var(--theme-dark-mix) var(--offset-factor-1))!important }
.color-darker { color: color-mix(in oklab, var(--theme-color), var(--theme-dark-mix) var(--offset-factor-2))!important }
.color-xdark { color: color-mix(in oklab, var(--theme-color), var(--theme-dark-mix) var(--offset-factor-3))!important }
.color-xxdark { color: color-mix(in oklab, var(--theme-color), var(--theme-dark-mix) var(--offset-factor-4))!important }

.bg-neutral-dark { background-color: var(--color-dark)!important }
.bg-neutral-light { background-color: var(--color-light)!important }

/* Text colors */
/* .text-primary { color: var(--color-primary)!important}
.text-secondary { color: var(--color-secondary)!important}
.text-tertiary { color: var(--color-tertiary)!important}
.text-quaternary { color: var(--color-quaternary)!important}
.text-info { color: var(--color-info)!important}
.text-success { color: var(--color-success)!important}
.text-warning { color: var(--color-warning)!important}
.text-error { color: var(--color-error)!important} */
.text-white { color: #fff!important }

/* Text decorations */
.text-underlined { text-decoration: underline; }
.text-strikethrough { text-decoration: line-through; }
.text-bold { font-weight: bold; }

/* Text sizes */
.text-size-1 { font-size: 2.5rem !important; }
.text-size-2 { font-size: 2.0rem !important; }
.text-size-3 { font-size: 2.0rem !important; }
.text-size-4 { font-size: 1.5rem !important; }
.text-size-5 { font-size: 1.25rem !important; }
.text-size-6 { font-size: 1rem !important; }
.text-size-7 { font-size: 0.75rem !important; }
.text-size-8 { font-size: 0.5rem !important; }.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  min-width: 10rem;
  background: var(--color-body-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  z-index: 1000;
  padding: var(--space-2) 0;
}

.dropdown-menu.show {
  display: block;
}

.dropdown-item {
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
}

.dropdown-item:hover {
  background: var(--color-body-bg-subtle);
}
input, select, textarea {
  width: 100%;
  padding: var(--space-2);
  font-size: 1rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-body-bg);
  color: var(--color-text);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--theme-color);
  outline: none;
  box-shadow: 0 0 0 2px rgba(52, 120, 246, 0.2);
}
label { 
  display: flex; 
  font-weight: 500;
}

label:has(input[type="range"]), label:has(input[type="checkbox"]), label:has(input[type="radio"]){
  background: var(--color-body-bg);
  border: 1px solid var(--color-border);
  padding: 8px 12px;
  border-radius: 6px;
  width: fit-content;
}

.form-group {
  margin-bottom: var(--space-3);
}
input:disabled, textarea:disabled, select:disabled { 
  opacity: 0.6; cursor: not-allowed; 
}

/* Checkboxes and radios */
input[type="checkbox"],
input[type="radio"] {
  width: auto;
  margin-right: var(--space-1);
  accent-color: var(--theme-color);
}

textarea {
  font: inherit;
}

.form-check {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

/* Custom select dropdown */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23333' stroke-width='2'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-2) center;
  background-size: 1em;
  padding-right: calc(var(--space-2) * 4);
}

/* Toggle switch */
.toggle {
  position: relative;
  display: inline-block;
  width: 2.5rem;
  height: 1.25rem;
}
.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #bbb;
  transition: 0.4s;
  border-radius: 1.25rem;
}
.toggle-slider:before {
  position: absolute;
  content: "";
  height: 1rem;
  width: 1rem;
  left: 0.125rem;
  bottom: 0.125rem;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}
.toggle input:checked + .toggle-slider {
  background-color: var(--theme-color);
}
.toggle input:checked + .toggle-slider:before {
  transform: translateX(1.25rem);
}
fieldset {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 6px;
  margin-bottom: var(--space-3);
}
legend {
  padding: 0 6px;
}

input[type="range" i]{
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  padding: initial;
  border: initial;
  outline: none;
  height: 0.5rem;
  margin: 6px;
  background: var(--theme-color);
}

input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance: none;
  border-radius: 50%;
  height: 1rem;
  width: 1rem;
  background-color: color-mix(in oklab, var(--theme-color), var(--theme-light-mix) var(--offset-factor-2));
}

input[type="checkbox"]:focus, input[type="radio"]:focus, input[type="range"]:focus {
  outline: none;
  border: none;
  background: transparent;
  box-shadow: none;
}

.sliderticks {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  height: 2rem;
}

.sliderticks span {
  display: flex;
  justify-content: center;
  width: 1px;
  height: 10px;
  background: #d3d3d3;
  line-height: 40px;
}

.circular-input-container{
    /* display:grid; */
    gap:1rem;
    place-items:center;
    font-family: system-ui, sans-serif;
    padding:24px;
  }

  .circular-input{
    --size: 120px;
    --thickness: 20px;
    --track: #ccc;
    --value: 0;
    width: var(--size);
    aspect-ratio: 1;
    position: relative;
    display:grid;
    place-items:center;
    margin-bottom: var(--space-3);
  }

  .circular-input::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    background: conic-gradient(var(--theme-color) calc(var(--value) * 1%), var(--track) 0);
    mask-image: radial-gradient(circle, #ff000000 calc(var(--size) / 2 - var(--thickness) - 1px), rgba(0, 0, 0, 1) calc(var(--size) / 2 - var(--thickness)));
  }

  .circular-input.rounded::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--thickness);
  height: var(--thickness);
  border-radius: 50%;
  background: var(--theme-color);
  transform: rotate(calc(var(--value) * 3.6deg - 90deg))
             translate(calc((var(--size) / 2) - (var(--thickness) / 2)));
  transform-origin: center;
  }

  .circular-input-label{
    position: relative; /* sits above ::before mask */
    font-size: clamp(1rem, 4vw, 1.5rem);
    font-weight: 700;
    color: color-mix(in oklab, var(--theme-color), var(--theme-light-mix) var(--offset-factor-4));
  }

  /* input[type="range"]{
    width: min(420px, 90vw);
  } */

 .circular-input .cap.start {
  display: none;
 }

 .circular-input.rounded .cap.start{
    display: inherit;
    position: absolute;
    inset: 0;
    margin: auto;
    width: var(--thickness);
    height: var(--thickness);
    border-radius: 50%;
    background: var(--theme-color);
    transform-origin: center;
    z-index: 0;
    transform: rotate(-90deg)
              translate(calc((var(--size) / 2) - (var(--thickness) / 2)));
  }.grid {
  --g-cols: 12;
  --g-cols-sm: unset;
  --g-cols-md: unset;
  --g-cols-lg: unset;
  --g-cols-xl: unset;
  --g-cols-xxl: unset;
  --g-span: 1;
  --g-span-sm: unset;
  --g-span-md: unset;
  --g-span-lg: unset;
  --g-span-xl: unset;
  --g-span-xxl: unset;
  --g-gap: var(--space-0);
  display: grid;
  gap: var(--g-gap);
  grid-template-columns: repeat(var(--g-cols), 1fr);
  margin-left: var(--space-2);
  margin-right: var(--space-2);
}

.grid > * {
  grid-column: span var(--g-span);
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-3); }
.row { display: flex; flex-wrap: wrap; margin-left: var(--space-2); margin-right: var(--space-2); }
/* .col { flex: 1; padding: var(--space-2); min-width: 0; } */
.col-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
.col-1-5 { flex: 0 0 12.5%; max-width: 12.5%; }
.col-2 { flex: 0 0 16.6666%; max-width: 16.6666%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-5 { flex: 0 0 41.6666%; max-width: 41.6666%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
.col-8 { flex: 0 0 66.6666%; max-width: 66.6666%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.col-10-5 { flex: 0 0 87.5%; max-width: 87.5%; }
.col-11 { flex: 0 0 91.6666%; max-width: 91.6666%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

@media (max-width: 768px) {
  .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
  .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
  .grid { grid-template-columns: repeat(var(--g-cols-sm, var(--g-cols)), 1fr); }
  .grid > * { grid-column: span var(--g-span-sm, var(--g-span)); }
  .col { --g-span: var(--g-span-sm, var(--g-span)); }
}
@media (min-width: 768px) {
  .col-md-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
  .col-md-1-5 { flex: 0 0 12.5%; max-width: 12.5%; }
  .col-md-2 { flex: 0 0 16.6666%; max-width: 16.6666%; }
  .col-md-3 { flex: 0 0 25%; max-width: 25%; }
  .col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-md-5 { flex: 0 0 41.6666%; max-width: 41.6666%; }
  .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  .col-md-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .col-md-8 { flex: 0 0 66.6666%; max-width: 66.6666%; }
  .col-md-9 { flex: 0 0 75%; max-width: 75%; }
  .col-md-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .col-md-11 { flex: 0 0 91.6666%; max-width: 91.6666%; }
  .col-md-12 { flex: 0 0 100%; max-width: 100%; }
  .grid { grid-template-columns: repeat(var(--g-cols-md, var(--g-cols)), 1fr); }
  .grid > * { grid-column: span var(--g-span-md, var(--g-span)); }
  .col { --g-span: var(--g-span-md, var(--g-span)); }
}
@media (min-width: 992px) {
  .col-lg-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
  .col-lg-1-5 { flex: 0 0 12.5%; max-width: 12.5%; }
  .col-lg-2 { flex: 0 0 16.6666%; max-width: 16.6666%; }
  .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
  .col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-lg-5 { flex: 0 0 41.6666%; max-width: 41.6666%; }
  .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  .col-lg-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .col-lg-8 { flex: 0 0 66.6666%; max-width: 66.6666%; }
  .col-lg-9 { flex: 0 0 75%; max-width: 75%; }
  .col-lg-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .col-lg-11 { flex: 0 0 91.6666%; max-width: 91.6666%; }
  .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
  .grid { grid-template-columns: repeat(var(--g-cols-lg, var(--g-cols)), 1fr); }
  .grid > * { grid-column: span var(--g-span-lg, var(--g-span)); }
  .col { --g-span: var(--g-span-lg, var(--g-span)); }
}
@media (min-width: 1200px) {
  .col-xl-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
  .col-xl-1-5 { flex: 0 0 12.5%; max-width: 12.5%; }
  .col-xl-2 { flex: 0 0 16.6666%; max-width: 16.6666%; }
  .col-xl-3 { flex: 0 0 25%; max-width: 25%; }
  .col-xl-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-xl-5 { flex: 0 0 41.6666%; max-width: 41.6666%; }
  .col-xl-6 { flex: 0 0 50%; max-width: 50%; }
  .col-xl-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .col-xl-8 { flex: 0 0 66.6666%; max-width: 66.6666%; }
  .col-xl-9 { flex: 0 0 75%; max-width: 75%; }
  .col-xl-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .col-xl-11 { flex: 0 0 91.6666%; max-width: 91.6666%; }
  .col-xl-12 { flex: 0 0 100%; max-width: 100%; }
  .grid { grid-template-columns: repeat(var(--g-cols-xl, var(--g-cols)), 1fr); }
  .grid > * { grid-column: span var(--g-span-xl, var(--g-span)); }
  .col { --g-span: var(--g-span-xl, var(--g-span)); }
}
@media (min-width: 1400px) {
  .col-xxl-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
  .col-xxl-1-5 { flex: 0 0 12.5%; max-width: 12.5%; }
  .col-xxl-2 { flex: 0 0 16.6666%; max-width: 16.6666%; }
  .col-xxl-3 { flex: 0 0 25%; max-width: 25%; }
  .col-xxl-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-xxl-5 { flex: 0 0 41.6666%; max-width: 41.6666%; }
  .col-xxl-6 { flex: 0 0 50%; max-width: 50%; }
  .col-xxl-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .col-xxl-8 { flex: 0 0 66.6666%; max-width: 66.6666%; }
  .col-xxl-9 { flex: 0 0 75%; max-width: 75%; }
  .col-xxl-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .col-xxl-11 { flex: 0 0 91.6666%; max-width: 91.6666%; }
  .col-xxl-12 { flex: 0 0 100%; max-width: 100%; }
  .grid { grid-template-columns: repeat(var(--g-cols-xxl, var(--g-cols)), 1fr); }
  .grid > * { grid-column: span var(--g-span-xxl, var(--g-span)); }
  .col { --g-span: var(--g-span-xxl, var(--g-span)); }
}.compare-container{
  position: relative;
  height: 300px;
  width: 100%;
  overflow: hidden;
}
.compare-container .compare-items{
  height: 100%;
  width: 100%;
  display: flex;
}
.compare-container .compare-items .compare-item:nth-child(odd){
  height: 100%;
  width: 100%;
}
.compare-container .compare-items .compare-item:nth-child(even){
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: var(--color-light) no-repeat;
  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}
.compare-container .slider{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
}
.compare-container .slider input{
  width: 100%;
  height: 100%;
  outline: none;
  background: none !important;
  -webkit-appearance: none;
  border: none;
}
.slider input::-webkit-slider-thumb{
  height: 100%;
  width: 1px;
  background: none;
  -webkit-appearance: none;
  cursor: col-resize;
}
.slider .drag-line{
  width: 1px;
  height: 100%;
  position: absolute;
  left: 49.85%;
  pointer-events: none;
}
.slider .drag-line::before,
.slider .drag-line::after{
  position: absolute;
  content: "";
  width: 100%;
  height: 130px;
  background: var(--color-contrast);
}
.slider .drag-line::before{
  top: 0;
}
.slider .drag-line::after{
  bottom: 0;
}
.slider .drag-line span{
  height: 42px;
  width: 42px;
  border: 2px solid var(--color-contrast);
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background:var(--color-body-bg);
}
.slider .drag-line span::before,
.slider .drag-line span::after{
  position: absolute;
  content: "";
  top: 50%;
  border: 10px solid transparent;
  border-bottom-width: 0px;
  border-right-width: 0px;
  transform: translate(-50%, -50%) rotate(45deg);
}
.slider .drag-line span::before{
  left: 40%;
  border-left-color: var(--color-contrast);
}
.slider .drag-line span::after{
  left: 60%;
  border-top-color: var(--color-contrast);
}.loader {
  display: none;
  color: var(--theme-color, currentColor);
}

.loader.show {
  display: inline-block;
}

.loader-spinner {
  --size: 3rem;
  width: var(--size);
  height: var(--size);
  border: calc(var(--size) / 8) solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: loader-rotate 0.75s linear infinite;
}

@keyframes loader-rotate {
  to {
    transform: rotate(360deg);
  }
}

.loader-dots {
  --size: 3rem;
  --dot-size: 10px;
  --min-dot-size-scale: 0;
  width: var(--size);
  display: flex;
  justify-content: space-between;
}

.loader-dots span {
  display: inline-block;
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  background: currentColor;
  animation: bounce 1s infinite ease-in-out;
  animation-delay: var(--delay);
  transform:scale(var(--min-dot-size-scale));
  aspect-ratio: 1/1;
}

@keyframes bounce {
  0%, 80%, 100% {
    transform: scale(var(--min-dot-size-scale));
  }
  40% {
    transform: scale(1);
  }
}

@keyframes loader-fade {
  0%, 80%, 100% {
    opacity: 0.3;
  }
  40% {
    opacity: 1;
  }
}.modal {
  display: none;
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
  z-index: 1050;
}

.modal.open {
  display: flex;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
}

.modal-content {
  position: relative;
  background: var(--color-body-bg);
  padding: var(--space-3);
  border-radius: 4px;
  z-index: 1;
}
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2);
  padding-left: var(--space-3);
  padding-right: var(--space-3);
  background: var(--color-bg);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}
.navbar-brand { font-size: 1.25rem; font-weight: bold; }
.navbar-menu { display: flex; gap: var(--space-3); }
.navbar-menu a {
  text-decoration: none;
  color: var(--color-text);
  padding: var(--space-1) var(--space-2);
  border-radius: 4px;
}
.navbar-menu a:hover { background: rgba(0,0,0,0.05); }
.navbar-toggle { display: none; }
@media (max-width: 768px) {
  .navbar { flex-wrap: wrap; }
  .navbar-menu { width: 100%; flex-direction: column; margin-top: var(--space-2); }
  .navbar-toggle { display: block; background: none; border: none; font-size: 1.25rem; cursor: pointer; }
}
.navbar-top-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}
.with-top-navbar {
  margin-top: 4rem;
}.progress {
  width: 100%;
  height: 1rem;
  background-color: var(--color-body-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background-color: var(--theme-color);
  transition: width 0.4s ease;
  text-align: center;
}

.progress-bar-label{
  position: relative;
  top: -0.3rem;
  font-size: small;
}

.progress-bar.progress-animated {
  background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
  animation: progress-bar-stripes 1s linear infinite;
}

@keyframes progress-bar-stripes {
  0% { background-position: 0 0; }
  100% { background-position: 1rem 0; }
}

.progress-circle {
  --size: 80px;
  --progress: 0;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background:
    conic-gradient(var(--theme-color) calc(var(--progress) * 1%), var(--color-border) 0);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  color: var(--color-text);
}

.progress-circle::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--color-light);
}

[data-theme="dark"]{
  .progress-circle::before {
    background: var(--color-dark);
  }
}

.progress-circle span {
  position: relative;
  font-size: 0.875rem;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: "Poppins", sans-serif;
}

.progress-step {
    display: flex;
    align-items: center;
}
.progress-step-list{
    color: var(--color-text);
    list-style-type: none;
    border-radius: 10px;
    display: flex;
    padding: 20px 10px;
    position: relative;
    z-index: 10;
}

.progress-step-item{
    padding: 0 20px;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive:1;
    flex-grow: 1;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    min-width: 170px;
    position: relative;
}
.progress-step-item + .progress-step-item:after{
    content: "";
    position: absolute;
    left: 0;
    top: 19px;
    background: var(--theme-color);
    width: 100%;
    height: 2px;
    transform: translateX(-50%);
    z-index: -10;
}
.progress-step-count{
    height: 40px;
    width:40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 600;
    margin: 0 auto;
    position: relative;
    z-index:10;
    color: transparent;
}
.progress-step-count:after{
    content: "";
    height: 40px;
    width: 40px;
    background: var(--theme-color);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: -10;
}
.progress-step-count:before{
    content: "";
    height: 10px;
    width: 20px;
    border-left: 3px solid var(--color-light);
    border-bottom: 3px solid var(--color-light);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -60%) rotate(-45deg);
    transform-origin: center center;
}

.progress-label{
    font-size: 14px;
    font-weight: 600;
    margin-top: 10px;
}
.current-item .progress-step-count:before,
.current-item ~ .progress-step-item .progress-step-count:before{
    display: none;
}
.current-item ~ .progress-step-item .progress-step-count:after{
    height:10px;
    width:10px;
}
.current-item ~ .progress-step-item .progress-label{
    opacity: 0.5;
}
.current-item .progress-step-count:after{
    background: var(--color-light);
    border: 2px solid var(--theme-color);
}
.current-item .progress-step-count{
    color: var(--theme-color);
}

/* Source: https://codepen.io/vijayshinde/pen/eYGMMJY */.ribbon {
  --f: 10px; /* control the folded part */
  --inlay: 1.8rem;
  position: absolute;
  top: 0;
  color: #fff;
}
.ribbon.diagonal {
  padding: .1em var(--inlay);
  border-bottom :var(--f) solid #0007;
  clip-path: polygon(
    100% calc(100% - var(--f)),100% 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--f) calc(100% - var(--f)), 0 100%,0 calc(100% - var(--f)),999px calc(100% - var(--f) - 999px),calc(100% - 999px) calc(100% - var(--f) - 999px))
}
.ribbon.diagonal.right {
  right: 0;
  transform: translate(calc((1 - cos(45deg))*100%), -100%) rotate(45deg);
  transform-origin: 0% 100%;
}
.ribbon.diagonal.left {
  left: 0;
  transform: translate(calc((cos(45deg) - 1)*100%), -100%) rotate(-45deg);
  transform-origin: 100% 100%;
}

/* a fix for firefox that show some strange lines*/
@supports (-moz-appearance:none) {
  .ribbon {
    background:
      linear-gradient(to top,#0000 1px,#0005 0 var(--f),#0000 0) border-box,
      linear-gradient(var(--c,#45ADA8) 0 0) 50%/
       calc(100% - 2px) calc(100% - 2px) no-repeat border-box;
    border-bottom-color: #0000;
   }
}
/* Resource: https://verpex.com/blog/website-tips/css-shapes-the-ribbon */

/* HTML: <div class="ribbon">Your text content</div> */

.ribbon.horizontal.left {
  left: 0;
  --inlay:1rem;
  /* border-radius: 4px 4px 4px 0px; */
  transform: translate(calc(0px - var(--f)), var(--inlay));
}

.ribbon.horizontal.left::after {
  height: var(--f);
  background-color: color-mix(in oklab, var(--theme-color), var(--theme-dark-mix) var(--offset-factor-4));
  width: var(--f);
  position: absolute;
  top:100%;
  left: 0;
  content: "";
  clip-path: polygon(0 0, 100% 100%, 100% 0);
}

.ribbon.horizontal.right {
  right:0;
  --inlay:1rem;
  /* border-radius: 4px 4px 0px 4px; */
  transform: translate(calc(0px + var(--f)), var(--inlay));
}

.ribbon.horizontal.right::after {
  height: var(--f);
  background-color: color-mix(in oklab, var(--theme-color), var(--theme-dark-mix) var(--offset-factor-4));
  width: var(--f);
  position: absolute;
  top:100%;
  right: 0;
  content: "";
  clip-path: polygon(0 0, 0 100%, 100% 0);
}.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 250px;
  padding: var(--space-3);
  background: var(--color-bg);
  color: var(--color-text);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
}

.sidebar-brand {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: var(--space-3);
}

.sidebar-menu {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sidebar-menu a {
  display: block;
  color: var(--color-text);
  font-weight: bold;
  text-decoration: none;
  /* padding: var(--space-1) var(--space-2); */
  border-radius: 4px;
}

[data-theme="dark"] {
  .sidebar-menu a:hover {
    background: rgba(255,255,255,0.05);
  }
}

.sidebar-menu a:hover {
  background: rgba(0,0,0,0.05);
}

.sidebar-menu ul {
  list-style: none;
  margin-left: var(--space-3);
  padding-left: 0;
}

/* .sidebar-menu ul ul { margin-left: calc(var(--space-3) * 2); } */
/* .sidebar-menu ul ul ul { margin-left: calc(var(--space-3) * 3); } */

.sidebar-menu ul a { opacity: 0.8; color: var(--color-text); font-weight: normal; }
.sidebar-menu ul ul a { opacity: 0.6; }
.sidebar-menu ul ul ul a { opacity: 0.5; }

.with-sidebar {
  margin-left: 250px;
}.table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-3);
}

.table th,
.table td {
  padding: var(--space-2);
  text-align: left;
}

.table:not(.rounded) th,
.table:not(.rounded) td {
  border: 1px solid var(--color-border);
}

.table-sm th,
.table-sm td {
  padding: var(--space-1);
}

.table-xsm th,
.table-xsm td {
  padding-top: var(--space-0);
  padding-bottom: var(--space-0);
}

.table thead tr {
  background: var(--theme-color);
  color: #fff;
}

.table tr.bg-dark th {
  background: var(--color-dark)!important;
}

.table-striped tbody tr:nth-child(odd) {
  background: rgba(255,255,255,0.06);
}

.table-striped tbody tr:nth-child(even) {
  background: rgba(0,0,0,0.06);
}

.table-hover tbody tr:hover {
    background: rgba(0, 0, 0, 0.1);
  }

[data-theme="dark"]{
  .table-hover tbody tr:hover {
    background: rgba(255, 255, 255, 0.1);
  }
}

  .table-hover tbody tr.theme-primary:hover,
  .table-hover tbody tr.theme-secondary:hover,
  .table-hover tbody tr.theme-tertiary:hover,
  .table-hover tbody tr.theme-quaternary:hover,
  .table-hover tbody tr.theme-info:hover,
  .table-hover tbody tr.theme-success:hover,
  .table-hover tbody tr.theme-warning:hover,
  .table-hover tbody tr.theme-error:hover {
    background: color-mix(in oklab, var(--theme-color), var(--theme-light-mix) var(--offset-factor-1))!important;
  }

table.rounded {
 --border: 1px solid var(--color-border);
 --radius: 6px;
 border-radius: var(--radius);

 /* Don't change these properties */
 border-spacing: 0;
 border-collapse: separate;
 border: var(--border);
 overflow: hidden;
}

/* Apply a border to the right of all but the last column */
table.rounded th:not(:last-child),
table.rounded td:not(:last-child) {
 border-right: var(--border);
}

/* Apply a border to the bottom of all but the last row */
table.rounded>thead>tr:not(:last-child)>th,
table.rounded>thead>tr:not(:last-child)>td,
table.rounded>tbody>tr:not(:last-child)>th,
table.rounded>tbody>tr:not(:last-child)>td,
table.rounded>tfoot>tr:not(:last-child)>th,
table.rounded>tfoot>tr:not(:last-child)>td,
table.rounded>tr:not(:last-child)>td,
table.rounded>tr:not(:last-child)>th,
table.rounded>thead:not(:last-child),
table.rounded>tbody:not(:last-child),
table.rounded>tfoot:not(:last-child) {
 border-bottom: var(--border);
}.tabs {
    width: 100%;
}

.tab-list {
    display: flex;
    border-bottom: 1px solid var(--color-border);
}

.tab {
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    margin-right: var(--space-2);
    border-bottom: 2px solid transparent;
}

    .tab.active {
        border-color: color-mix(in oklab, var(--theme-color), var(--theme-light-mix) var(--offset-factor-2));
        color: color-mix(in oklab, var(--theme-color), var(--theme-light-mix) var(--offset-factor-2));
        font-weight: 500;
    }

.tab-list.filled-tabs .tab {
    color: var(--color-text-subtle) !important;
    background-color: var(--color-light);
    border-right: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);
    border-top: 1px solid var(--color-border);
    border-radius: 8px 8px 0px 0px;
    margin-right: 0;
}

.tab-list.filled-tabs .tab.active {
    color: white !important;
    background-color: var(--theme-color) !important;
    transform: none;
    border-right: none;
    border-left: none;
}

.tab-list.filled-tabs.var-height .tab {
    padding-top: 0;
    padding-bottom: 0;
    height: 80%;
    transform: translateY(33%);
}

.tab-list.filled-tabs.var-height .tab.active {
    height: 100%;
    padding: var(--space-1) var(--space-3);
    transform: translateY(0%);
}

/* color overrides */

.tab-list.filled-tabs.theme-primary .tab.active,
.tab-list.filled-tabs.theme-secondary .tab.active,
.tab-list.filled-tabs.theme-tertiary .tab.active,
.tab-list.filled-tabs.theme-quaternary .tab.active,
.tab-list.filled-tabs.theme-info .tab.active,
.tab-list.filled-tabs.theme-success .tab.active,
.tab-list.filled-tabs.theme-warning .tab.active,
.tab-list.filled-tabs.theme-error .tab.active {
  background-color: var(--theme-color)!important;
  border-color: color-mix(in oklab, var(--theme-color), var(--theme-light-mix) var(--offset-factor-1))!important;
}

[data-theme="dark"] {
    .tab.active
    {
        border-color: color-mix(in oklab, var(--theme-color), var(--theme-light-mix) var(--offset-factor-2));
        color: color-mix(in oklab, var(--theme-color), var(--theme-light-mix) var(--offset-factor-2));
        font-weight: 500;
    }

    .tab-list.filled-tabs .tab {
      background-color: var(--color-dark);
    }
}

.tab-content {
    display: none;
    background-color: #5656560e;
    padding: 1rem;
}

    .tab-content.active {
        display: block;
    }
/* Theme variables */
:root {
  --color-text: #222;
  --color-text-subtle: #444;
  --color-body-bg: #fff;
  --color-body-bg-subtle: #f5f5f5;
  --color-border: #ccc;
  --color-primary: #2658aa;
  --color-secondary: #1F6E8C;
  --color-tertiary: #2E8A99;
  --color-quaternary: #5d45bd;
  --color-warning: #c48c24;
  --color-error: #cf2a2a;
  --color-info: #7c8e1f;
  --color-success: #328b39;
  --color-dark: #222222;
  --color-light: #f9f9f9;
  --color-contrast: var(--color-dark);

  --color-dark-mix-primary: #051e36;
  --color-light-mix-primary: #90c5f3;
  --color-dark-mix-secondary: #0b2530;
  --color-light-mix-secondary: #7ec0da;
  --color-dark-mix-tertiary: #0e3036;
  --color-light-mix-tertiary: #9bdce7;
  --color-dark-mix-quaternary: #1c123f;
  --color-light-mix-quaternary: #ada3d6;
  --color-dark-mix-info: #2d330b;
  --color-light-mix-info: #c1c89b;
  --color-dark-mix-success: #0f2c12;
  --color-light-mix-success: #a3e8a8;
  --color-dark-mix-warning: #38280a;
  --color-light-mix-warning: #d4bc90;
  --color-dark-mix-error: #350f0f;
  --color-light-mix-error: #eaa1a1;

  --offset-factor-1: 15%;
  --offset-factor-2: 30%;
  --offset-factor-3: 45%;
  --offset-factor-4: 60%;

  /* Generic theme variables */
  --theme-color: var(--color-primary);
  --theme-light-mix: var(--color-light-mix-primary);
  --theme-dark-mix: var(--color-dark-mix-primary);

  /* Custom theme defaults */
  --custom-base-color: var(--color-primary);
  --custom-mix-light: var(--color-light-mix-primary);
  --custom-mix-dark: var(--color-dark-mix-primary);

  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
}

/* Theme helpers */
.theme-primary { --theme-color: var(--color-primary); --theme-light-mix: var(--color-light-mix-primary); --theme-dark-mix: var(--color-dark-mix-primary); }
.theme-secondary { --theme-color: var(--color-secondary); --theme-light-mix: var(--color-light-mix-secondary); --theme-dark-mix: var(--color-dark-mix-secondary); }
.theme-tertiary { --theme-color: var(--color-tertiary); --theme-light-mix: var(--color-light-mix-tertiary); --theme-dark-mix: var(--color-dark-mix-tertiary); }
.theme-quaternary { --theme-color: var(--color-quaternary); --theme-light-mix: var(--color-light-mix-quaternary); --theme-dark-mix: var(--color-dark-mix-quaternary); }
.theme-info { --theme-color: var(--color-info); --theme-light-mix: var(--color-light-mix-info); --theme-dark-mix: var(--color-dark-mix-info); }
.theme-success { --theme-color: var(--color-success); --theme-light-mix: var(--color-light-mix-success); --theme-dark-mix: var(--color-dark-mix-success); }
.theme-warning { --theme-color: var(--color-warning); --theme-light-mix: var(--color-light-mix-warning); --theme-dark-mix: var(--color-dark-mix-warning); }
.theme-error { --theme-color: var(--color-error); --theme-light-mix: var(--color-light-mix-error); --theme-dark-mix: var(--color-dark-mix-error); }
.theme-dark { --theme-color: var(--color-dark); --theme-light-mix: var(--color-light); --theme-dark-mix: var(--color-dark); }
.theme-light { --theme-color: var(--color-light); --theme-light-mix: var(--color-light); --theme-dark-mix: var(--color-dark); }
.theme-custom { --theme-color: var(--custom-base-color); --theme-light-mix: var(--custom-mix-light); --theme-dark-mix: var(--custom-mix-dark); }

/* Dark mode */
[data-theme="dark"] {
  --color-text: #e0e0e0;
  --color-text-subtle: #969696;
  --color-body-bg: #181818;
  --color-body-bg-subtle: #282828;
  --color-border: #333;
  --color-contrast: var(--color-light);

  body {
    scrollbar-color: #9f9f9f #2c2c2c;
  }

  /* .text-primary { color: color-mix(in oklab, var(--color-primary), var(--color-light-mix-primary) var(--offset-factor-2))!important; }
  .text-secondary { color: color-mix(in oklab, var(--color-secondary), var(--color-light-mix-secondary) var(--offset-factor-2))!important }
  .text-tertiary { color: color-mix(in oklab, var(--color-tertiary), var(--color-light-mix-tertiary) var(--offset-factor-2))!important }
  .text-quaternary { color: color-mix(in oklab, var(--color-quaternary), var(--color-light-mix-quaternary) var(--offset-factor-2))!important }
  .text-info { color: color-mix(in oklab, var(--color-info), var(--color-light-mix-info) var(--offset-factor-2))!important }
  .text-success { color: color-mix(in oklab, var(--color-success), var(--color-light-mix-success) var(--offset-factor-2))!important }
  .text-warning { color: color-mix(in oklab, var(--color-warning), var(--color-light-mix-warning) var(--offset-factor-2))!important }
  .text-error { color: color-mix(in oklab, var(--color-error), var(--color-light-mix-error) var(--offset-factor-2))!important } */
}
:root{
    --content-background: #ebebeb;
}

[data-theme="dark"] {
    --content-background: var(--color-border);
}

.timeline-container {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.timeline-start,
.timeline-end {
  display: table;
  font-size: large;
  font-weight: 900;
  text-transform: uppercase;
  background: var(--theme-color);
  padding: 15px 23px;
  color: #fff;
  max-width: 5%;
  width: 100%;
  text-align: center;
  margin: 0 auto;
  z-index: 10;
  position: relative;
  border-radius: 6px;
}
.conference-center-line {
  position: absolute;
  width: 3px;
  height: 100%;
  top: 0;
  left: 50%;
  margin-left: -2px;
  background: var(--theme-color);
  /* background-image: linear-gradient(to bottom, var(--theme-color) 50%, rgba(255, 255, 255, 0) 0%);
  background-position: left;
  background-size: 1px 10px;
  background-repeat: repeat-y; */
  z-index: 0;
}
.conference-timeline-content {
  padding-top: 67px;
  padding-bottom: 67px;
}
.timeline-article {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  margin: 20px 0;
}
.timeline-article .content-left-container,
.timeline-article .content-right-container {
  max-width: 44%;
  width: 100%;
}
.timeline-article .timeline-author {
  display: block;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: var(--text-color);
  text-align: right;
}
.timeline-article .content-left,
.timeline-article .content-right {
  position: relative;
  width: auto;
  border: 1px solid var(--color-border);
  background-color: var(--content-background);
  box-shadow: 0 1px 3px rgba(0,0,0,.03);
  padding: 27px 25px;
  border-radius: 6px;
}
.timeline-article p {
  margin: 0 0 0 60px;
  padding: 0;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  position: relative;
}
.timeline-article p span.article-number {
  position: absolute;
  font-weight: 300;
  font-size: 44px;
  top: 10px;
  left: -60px;
  color: var(--theme-color);
}
.timeline-article .content-left-container {
  float: left;
}
.timeline-article .content-right-container {
  float: right;
}
.timeline-article .content-left:before,
.timeline-article .content-right:before{
  position: absolute;
  top: 20px;
  font-size: 23px;
  color: #fff;
}
.timeline-article .content-left:before {
  content: "";
  background-color: var(--color-border);
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
  right: -11px;
  height: 30px;
  width: 12px;
}
.timeline-article .content-right:before {
  content: "";
  left: -11px;
  height: 30px;
  width: 12px;
  background-color: var(--color-border);
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
.timeline-article .meta-date {
  position: absolute;
  top: 0;
  left: 50%;
  width: 62px;
  height: 62px;
  margin-left: -31px;
  color: #fff;
  border: 3px solid color-mix(in oklab, var(--theme-color), var(--theme-light-mix) var(--offset-factor-2));
  border-radius: 100%;
  background: var(--theme-color);
}
.timeline-article .meta-date .date,
.timeline-article .meta-date .month {
  display: block;
  text-align: center;
  font-weight: bolder;
}
.timeline-article .meta-date .date {
  font-size: large;
  line-height: 30px;
}
.timeline-article .meta-date .month {
  font-size: 18px;
  line-height: 10px;
}
/*===== // Vertical Timeline =====*/

/*===== Resonsive Vertical Timeline =====*/
@media only screen and (max-width: 830px) {
  .timeline-start,
  .timeline-end {
    margin: 0;
  }
  .conference-center-line {
    margin-left: 0;
    left: 50px;
  }
  .timeline-article .meta-date {
    margin-left: 0;
    left: 20px;
  }
  .timeline-article .content-left-container,
  .timeline-article .content-right-container {
    max-width: 100%;
    width: auto;
    float: none;
    margin-left: 110px;
    min-height: 53px;
  }
  .timeline-article .content-left-container {
    margin-bottom: 20px;
  }
  .timeline-article .content-left,
  .timeline-article .content-right {
    padding: 10px 25px;
    min-height: 65px;
  }
  .timeline-article .content-left:before {
    content: "\f0d9";
    right: auto;
    left: -8px;
  }
  .timeline-article .content-right:before {
    display: none;
  }
}
@media only screen and (max-width: 400px) {
  .timeline-article p {
    margin: 0;
  }
  .timeline-article p span.article-number {
    display: none;
  }
  
}
/*===== // Resonsive Vertical Timeline =====*/.toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1060;
}

[data-theme="dark"]{
  .toast {
    background: var(--color-light);
    color: #222;
  }
}

.toast {
  background: var(--color-dark);
  color: #e0e0e0;
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  border-radius: 4px;
  display: none;
  margin-left: auto; 
  margin-right: 0;
}

.toast.show {
  display: table;
}

.toast-dismissible {
  position: relative;
  padding-right: calc(var(--space-3) + 1rem);
}

.toast-dismissible .close {
  position: absolute;
  top: 0.25rem;
  right: 0.5rem;
  background: none;
  border: none;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}[data-tooltip] {
  position: relative;
}

:root{
  --tooltip-color: var(--color-dark);
  --tooltip-text-color: var(--color-light);
}

[data-theme="dark"]{
  --tooltip-color: var(--color-light);
  --tooltip-text-color: var(--color-dark);
}

.tooltip {
  position: absolute;
  background: var(--tooltip-color);
  color: var(--tooltip-text-color);
  padding: var(--space-1) var(--space-2);
  border-radius: 4px;
  font-size: 0.75rem;
  white-space: nowrap;
  display: none;
  z-index: 1000;
  pointer-events: none;
  height: max-content;
}

.tooltip.tooltip-bottom {
  bottom: -100%;
  left: 50%;
  transform: translate(-50%, 0.5rem);
}

.tooltip.show {
  display: block;
}

.tooltip::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
}

.tooltip-top {
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, -0.5rem);
}

.tooltip-top::after {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0.4rem 0.4rem 0 0.4rem;
  border-style: solid;
  border-color: var(--tooltip-color) transparent transparent transparent;
}

.tooltip-bottom {
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0.5rem);
}

.tooltip-bottom::after {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 0.4rem 0.4rem 0.4rem;
  border-style: solid;
  border-color: transparent transparent var(--tooltip-color) transparent;
}

.tooltip-left {
  right: 100%;
  top: 50%;
  transform: translate(-0.5rem, -50%);
}

.tooltip-left::after {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-width: 0.4rem 0 0.4rem 0.4rem;
  border-style: solid;
  border-color: transparent transparent transparent var(--tooltip-color);
}

.tooltip-right::after {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-width: 0.4rem 0.4rem 0.4rem 0;
  border-style: solid;
  border-color: transparent var(--tooltip-color) transparent transparent;
}

.tooltip-right {
  left: 100%;
  top: 50%;
  transform: translate(0.5rem, -50%);
}