/*!
* Atomic CSS 1.2.4
* https://github.com/viivue/atomic-css
*/
/**
 * Spacing
 * https://stackoverflow.design/product/base/spacing/
 */
/* Margin auto */
.m-auto {
  margin:auto;
}

.mt-auto {
  margin-top:auto;
}

.mr-auto {
  margin-right:auto;
}

.mb-auto {
  margin-bottom:auto;
}

.ml-auto {
  margin-left:auto;
}

/**
 * Vertical Spacing
 */
:root {
  --spacing-0:0;
}

.pt0 {
  padding-top:var(--spacing-0);
}

.pb0 {
  padding-bottom:var(--spacing-0);
}

.mt0 {
  margin-top:var(--spacing-0);
}

.mb0 {
  margin-bottom:var(--spacing-0);
}

/**
 * Positioning
 * https://stackoverflow.design/product/base/position/
 */
/* Positions */
.ps-absolute {
  position:absolute;
}

.ps-fixed {
  position:fixed;
}

.ps-relative {
  position:relative;
}

.ps-static {
  position:static;
}

.ps-sticky {
  position:sticky;
}

/* Coordinates */
.t0 {
  top:0;
}

.r0 {
  right:0;
}

.b0 {
  bottom:0;
}

.l0 {
  left:0;
}

.t50p {
  top:50%;
}

.r50p {
  right:50%;
}

.b50p {
  bottom:50%;
}

.l50p {
  left:50%;
}

.t100p {
  top:100%;
}

.r100p {
  right:100%;
}

.b100p {
  bottom:100%;
}

.l100p {
  left:100%;
}

/* Coordinates - auto */
.t-auto {
  top:auto;
}

.r-auto {
  right:auto;
}

.b-auto {
  bottom:auto;
}

.l-auto {
  left:auto;
}

/* ab-center */
.ab-center {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}

/* ab-center-v */
.ab-center-v {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
}

/* ab-center-h */
.ab-center-h {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}

/* ab-full */
.ab-full, .ab-full-b:before, .ab-full-a:after, .ab-full-ba:before, .ab-full-ba:after {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
}

/* ab-full-content */
.ab-full-b:before, .ab-full-a:after, .ab-full-ba:before, .ab-full-ba:after {
  content:"";
}

/* z-hide */
.z-hide {
  z-index:-1;
}

/* z-index */
.z1 {
  z-index:1;
}

.z2 {
  z-index:2;
}

.z3 {
  z-index:3;
}

.z4 {
  z-index:4;
}

.z5 {
  z-index:5;
}

.z10 {
  z-index:10;
}

.z20 {
  z-index:20;
}

.z30 {
  z-index:30;
}

.z40 {
  z-index:40;
}

.z100 {
  z-index:100;
}

.z99999999 {
  z-index:99999999;
}

/**
 * Typography
 * https://stackoverflow.design/product/base/typography/
 */
/* font-family */
.ff-sans {
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.ff-serif {
  font-family:Georgia, Cambria, "Times New Roman", Times, serif;
}

/* color */
.fc-white {
  color:#fff;
}

.fc-black {
  color:#000;
}

/* background-color */
.bg-white {
  background-color:#fff;
}

.bg-black {
  background-color:#000;
}

/* line-height */
.lh-xs {
  line-height:1;
}

.lh-sm {
  line-height:1.15;
}

.lh-md {
  line-height:1.3;
}

.lh-lg {
  line-height:1.6;
}

.lh-xl {
  line-height:1.92;
}

.lh-xxl {
  line-height:2;
}

.lh-unset {
  line-height:unset;
}

/* font-style */
.fs-normal {
  font-style:normal;
}

.fs-italic {
  font-style:italic;
}

/* text-transform */
.tt-capitalize {
  text-transform:capitalize;
}

.tt-lowercase {
  text-transform:lowercase;
}

.tt-uppercase {
  text-transform:uppercase;
}

.tt-none {
  text-transform:none;
}

.tt-unset {
  text-transform:unset;
}

/* text-decoration */
.td-underline {
  text-decoration:underline;
}

.td-none {
  text-decoration:none;
}

/* text-align */
.ta-left {
  text-align:left;
}

.ta-center {
  text-align:center;
}

.ta-right {
  text-align:right;
}

.ta-justify {
  text-align:justify;
}

/* white-space */
.ws-normal {
  white-space:normal;
}

.ws-nowrap {
  white-space:nowrap;
}

.ws-pre {
  white-space:pre;
}

.ws-pre-wrap {
  white-space:pre-wrap;
}

.ws-pre-line {
  white-space:pre-line;
}

/* word-break */
.wb-normal {
  word-break:normal;
}

.wb-break-all {
  word-break:break-all;
}

.wb-keep-all {
  word-break:keep-all;
}

.wb-inherit {
  word-break:inherit;
}

.wb-initial {
  word-break:initial;
}

.wb-unset {
  word-break:unset;
}

/* break-word */
.break-word {
  word-break:break-word;
  word-wrap:break-word;
  overflow-wrap:break-word;
  hyphens:auto;
}

:root {
  --font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --font-serif:Georgia, Cambria, "Times New Roman", Times, serif;
}

:root {
  --color-white:#fff;
  --color-black:#000;
}

/**
 * Display
 * https://stackoverflow.design/product/base/display/
 */
/* display */
.d-block {
  display:block;
}

.d-inline {
  display:inline;
}

.d-inline-block {
  display:inline-block;
}

.d-flex {
  display:flex;
}

.d-inline-flex {
  display:inline-flex;
}

.d-grid {
  display:grid;
}

.d-inline-grid {
  display:inline-grid;
}

.d-table {
  display:table;
}

.d-table-cell {
  display:table-cell;
}

.d-none {
  display:none;
}

.d-unset {
  display:unset;
}

/**
 * Flex
 * https://stackoverflow.design/product/base/flex/
 */
/* align-content */
.ac-stretch {
  align-content:stretch;
}

.ac-center {
  align-content:center;
}

.ac-start {
  align-content:flex-start;
}

.ac-end {
  align-content:flex-end;
}

.ac-space-between {
  align-content:space-between;
}

.ac-space-around {
  align-content:space-around;
}

/* align-items */
.ai-stretch {
  align-items:stretch;
}

.ai-center {
  align-items:center;
}

.ai-start {
  align-items:flex-start;
}

.ai-end {
  align-items:flex-end;
}

.ai-baseline {
  align-items:baseline;
}

/* align-self */
.as-auto {
  align-self:auto;
}

.as-stretch {
  align-self:stretch;
}

.as-center {
  align-self:center;
}

.as-start {
  align-self:flex-start;
}

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

.as-baseline {
  align-self:baseline;
}

/* flex-direction */
.fd-row {
  flex-direction:row;
}

.fd-row-reverse {
  flex-direction:row-reverse;
}

.fd-column {
  flex-direction:column;
}

.fd-column-reverse {
  flex-direction:column-reverse;
}

/* flex-wrap */
.fw-nowrap {
  flex-wrap:nowrap;
}

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

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

/* justify-content */
.jc-start {
  justify-content:flex-start;
}

.jc-end {
  justify-content:flex-end;
}

.jc-center {
  justify-content:center;
}

.jc-space-between {
  justify-content:space-between;
}

.jc-space-around {
  justify-content:space-around;
}

.jc-space-evenly {
  justify-content:space-evenly;
}

/* fl-center */
.fl-center {
  display:flex;
  align-items:center;
  justify-content:center;
}

/* fl-center-v */
.fl-center-v {
  display:flex;
  align-items:center;
}

/* fl-center-h */
.fl-center-h {
  display:flex;
  justify-content:center;
}

/* fl-grid */
.fl-grid {
  display:flex;
  flex-wrap:wrap;
}

/**
 * Transitions
 * https://stackoverflow.design/product/base/transitions/
 */
/* transition */
.t {
  transition-duration:.25s;
  transition-property:all;
  transition-timing-function:ease;
  transition-delay:0s;
}

/* slow */
.t-slow {
  transition-duration:.6s;
}

/* fast */
.t-fast {
  transition-duration:.1s;
}

/* opacity */
.t-opacity {
  transition-property:opacity;
}

/* opacity-color */
.t-opacity-color {
  transition-property:opacity, color;
}

/* transform */
.t-transform {
  transition-property:transform;
}

/* transform-opacity */
.t-transform-opacity {
  transition-property:transform, opacity;
}

/* transform-opacity-color */
.t-transform-opacity-color {
  transition-property:transform, opacity, color;
}

/* transform-color */
.t-transform-color {
  transition-property:transform, color;
}

/* color */
.t-color {
  transition-property:color;
}

/**
 * Object fit
 * https://stackoverflow.design/product/base/object-fit/
 */
/* object-fit */
.of-fill {
  object-fit:fill;
}

.of-contain {
  object-fit:contain;
}

.of-cover {
  object-fit:cover;
}

.of-scale-down {
  object-fit:scale-down;
}

.of-none {
  object-fit:none;
}

/* object-position */
.op-center {
  object-position:center;
}

/**
 * Interactivity
 * https://stackoverflow.design/product/base/interactivity/
 */
/* pointer-events */
.pe-auto {
  pointer-events:auto;
}

.pe-none {
  pointer-events:none;
}

/* user-select */
.us-auto {
  user-select:auto;
}

.us-none {
  user-select:none;
}

/* user-drag */
.ud-auto {
  user-drag:auto;
}

.ud-none {
  user-drag:none;
}

/**
 * Overflow
 * https://stackoverflow.design/product/base/overflow/
 */
/* overflow */
.overflow-visible {
  overflow:visible;
}

.overflow-hidden {
  overflow:hidden;
}

.overflow-scroll {
  overflow:scroll;
}

.overflow-auto {
  overflow:auto;
}

/* overflow-x */
.overflow-x-hidden {
  overflow-x:hidden;
}

.overflow-x-scroll {
  overflow-x:scroll;
}

.overflow-x-auto {
  overflow-x:auto;
}

/* overflow-y */
.overflow-y-hidden {
  overflow-y:hidden;
}

.overflow-y-scroll {
  overflow-y:scroll;
}

.overflow-y-auto {
  overflow-y:auto;
}

/**
 * Border radius
 * https://stackoverflow.design/product/base/border-radius/
 */
/* bar-pill */
.bar-pill {
  border-radius:1000px;
}

/* bar-circle */
.bar-circle {
  border-radius:100%;
}

/* border-radius */
/**
 * Skeleton
 */
.skeleton-bg {
  background-image:url("data:image/svg+xml;utf8,<svg  xmlns='http://www.w3.org/2000/svg' fill='%23ccc' viewBox='0 0 20 18'><path d='M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z'></path></svg>");
  background-size:15%;
  background-repeat:no-repeat;
  background-position:center;
  background-color:#e5e7eb;
  border-radius:4px;
  animation:skeleton-animate 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.skeleton-txt {
  position:relative;
}

.skeleton-txt::before {
  content:"";
  position:absolute;
  inset:0;
  background-color:transparent;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'><rect x='0' y='0' width='100' height='25' rx='1' ry='8' fill='%23e5e7eb'/></svg>");
  overflow:hidden;
  background-size:100% 1lh;
  background-repeat:no-repeat repeat;
  z-index:1;
}

.skeleton-txt::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background-image:linear-gradient(to right, transparent 30%, rgba(255, 255, 255, 0.4) 70%, transparent);
  background-size:60% 1lh;
  background-repeat:no-repeat repeat;
  background-position:-130% 0;
  animation:skeleton-txt-animate 1.3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.skeleton-txt:not(.skeleton-hide),
.skeleton-txt:not(.skeleton-hide) * {
  color:transparent !important;
}

.skeleton-txt.skeleton-hide::before,
.skeleton-txt.skeleton-hide::after {
  content:unset;
}

@keyframes skeleton-txt-animate {
  100% {
    background-position:180% 0;
  }
}
@keyframes skeleton-animate {
  0%, 100% {
    background-color:rgb(229, 231, 235);
  }
  50% {
    background-color:rgba(229, 231, 235, 0.5);
  }
}
/**
 * Width & Height
 */
/* w-auto */
.w-auto {
  width:auto;
}

/* width */
.w0 {
  width:0;
}

.w10 {
  width:10%;
}

.w20 {
  width:20%;
}

.w25 {
  width:25%;
}

.w30 {
  width:30%;
}

.w40 {
  width:40%;
}

.w50 {
  width:50%;
}

.w60 {
  width:60%;
}

.w70 {
  width:70%;
}

.w75 {
  width:75%;
}

.w80 {
  width:80%;
}

.w90 {
  width:90%;
}

.w100 {
  width:100%;
}

/* w33 */
.w33 {
  width:33.33%;
}

/* w66 */
.w66 {
  width:66.67%;
}

/* w-screen */
.w-screen {
  width:100vw;
}

/* h-auto */
.h-auto {
  height:auto;
}

/* height */
.h0 {
  height:0;
}

.h100 {
  height:100%;
}

/* h-screen */
.h-screen {
  height:100vh;
}

/**
 * Cursors
 * https://stackoverflow.design/product/base/cursors/
 */
/* cursor */
.c-auto {
  cursor:auto;
}

.c-default {
  cursor:default;
}

.c-pointer {
  cursor:pointer;
}

.c-text {
  cursor:text;
}

.c-wait {
  cursor:wait;
}

.c-move {
  cursor:move;
}

.c-not-allowed {
  cursor:not-allowed;
}

.c-help {
  cursor:help;
}

/**
 * Aspect Ratio
 */
/* aspect-ratio */
.ar-1 {
  aspect-ratio:1;
}

/**
 * Flex grid
 */
.flex-grid-template {
  --grid-gap-x:30px;
  --grid-gap-y:30px;
  --grid-col:3;
  display:flex;
  flex-wrap:wrap;
  gap:var(--grid-gap-y) var(--grid-gap-x);
}

.flex-grid-template > * {
  /* calculate new width */
  --grid-gap-x-total:calc(var(--grid-gap-x) * (var(--grid-col) - 1));
  --grid-space-each:calc(var(--grid-gap-x-total) / var(--grid-col));
  width:calc(100% / var(--grid-col) - var(--grid-space-each));
}

@media only screen and (max-width:768px) {
  .flex-grid-template {
    --grid-col:2;
  }
}
@media only screen and (max-width:480px) {
  .flex-grid-template {
    --grid-col:1;
  }
}
/**
 * Background object fit
 */
.img-wrapper-cover img {
  object-position:center center;
  height:100%;
  width:100%;
  min-height:100%;
  min-width:100%;
  max-height:100%;
  max-width:100%;
  display:block;
  object-fit:cover;
}

.img-wrapper-contain img {
  object-position:center center;
  height:100%;
  width:100%;
  min-height:100%;
  min-width:100%;
  max-height:100%;
  max-width:100%;
  display:block;
  object-fit:contain;
}

/**
 * Clear list style
 */
ul.list-style-none,
.list-style-none ul {
  margin:0;
  list-style:none;
}

ul.list-style-none > li,
.list-style-none ul > li {
  padding:0;
}

/*
 * Visually hidden
 * https://www.joshwcomeau.com/snippets/react-components/visually-hidden/
 */
.visually-hidden {
  position:absolute;
  overflow:hidden;
  clip:rect(0 0 0 0);
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  border:0;
}

/**
 * Font Sizes
 */
/**
 * Loading
 */
