.wrapper {
  margin-inline: auto;
  max-width: var(--wrapper-max-width, 90rem);
  padding-inline: 2rem;
  position: relative;
}

.wrapper[data-wrapper='article'] {
  --wrapper-max-width: 95vw;
  margin: 0 auto;
  padding: 0;
}

@media (min-width: 60em) {
  .wrapper[data-wrapper='article'] {
    --wrapper-max-width: 80vw;
  }
}
.sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.sidebar:not([data-direction]) > :first-child {
  flex-basis: var(--sidebar-target-width, 20rem);
  flex-grow: 1;
}

.sidebar:not([data-direction]) > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-width: var(--sidebar-content-min-width, 50%);
}

.sidebar[data-reversed] {
  flex-direction: row-reverse;
}

.sidebar[data-direction='rtl'] > :last-child {
  flex-basis: var(--sidebar-target-width, 20rem);
  flex-grow: 1;
}

.sidebar[data-direction='rtl'] > :first-child {
  flex-basis: 0;
  flex-grow: 999;
  min-width: var(--sidebar-content-min-width, 50%);
}

/*SECTION - Utilities */

/* Screen reader only */
.sr-only {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  margin: -1px;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.agent,
.manager,
.anonymous,
.end_user {
  display: none;
}

.not-visible {
  visibility: hidden;
}

/*SECTION - Text */
[class*='line-height-'] {
  line-height: var(--height, 1rem);
}

.line-height-default {
  --height: 1.5;
}

.balance {
  text-wrap: balance;
}
.pretty {
  text-wrap: pretty;
}

.step-0 {
  font-size: var(--step-0);
}
.step-1 {
  font-size: var(--step-1);
}

.step-2 {
  font-size: var(--step-2);
}

.step-3 {
  font-size: var(--step-3);
}

.step-4 {
  font-size: var(--step-4);
}

.step-5 {
  font-size: var(--step-5);
}

.step-6 {
  font-size: var(--step-6);
}

.step-7 {
  font-size: var(--step-7);
}

.step-8 {
  font-size: var(--step-8);
}

.step-9 {
  font-size: var(--step-9);
}

.fw-500 {
  font-weight: var(--font-medium);
}

.fw-600 {
  font-weight: var(--font-bold);
}

.fw-700 {
  font-weight: var(--font-bolder);
}

.center {
  text-align: center;
}

.left {
  text-align: start;
}
.right {
  text-align: right;
}

/*!SECTION - Text*/

/*SECTION - Flow */
.marg-top-half {
  margin-block-start: 0.5rem;
}

:is(.block-flow) > * + * {
  margin-block-start: var(--space-l);
}

.block-flow--sm {
  margin-block-start: var(--block-flow-sm);
}

.block-flow--md {
  margin-block-start: var(--block-flow-md);
}

.block-flow--lg {
  margin-block-start: var(--space-xl);
}

.padding-1 {
  padding: 1rem;
}
.padding-2 {
  padding: 2rem;
}

.padding-1-2 {
  padding: 1rem 2rem;
}

.section-padding {
  padding-block: var(--padding-md, 1em);
}

.section-padding--large {
  padding-block: var(--padding-lg);
}
/* !SECTION - Flow */

/*SECTION - Layout */
.percent-100 {
  width: 100%;
}

.percent-50 {
  width: 50%;
}

.block {
  display: block;
}

.flex {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

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

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

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

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

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

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

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

.grid {
  display: grid;
}

/*SECTION - Grid setup */
/* Main structure of pages */
.grid-content {
  --padding-inline: var(--gap-sm);
  --content-max-width: 125ch;
  --breakout-max-width: 150ch;
  --breakout-size: calc(
    (var(--breakout-max-width) - var(--content-max-width) / 2)
  );

  display: grid;
  grid-template-columns:
    [full-width-start] minmax(var(--padding-inline), 1fr)
    [breakout-start] minmax(0, var(--breakout-size))
    [content-start] min(
      100% - (var(--padding-inline) * 2),
      var(--content-max-width)
    )
    [content-end]
    minmax(0, var(--breakout-size)) [breakout-end]
    minmax(var(--padding-inline), 1fr) [full-width-end];
}

.grid-content > :not(.breakout, .full-width),
.full-width > :not(.breakout, .full-width) {
  grid-column: content;
}

.grid-content > .breakout {
  grid-column: breakout;
}

.grid-content > .full-width {
  grid-column: full-width;
  justify-items: stretch;
}
/*!SECTION - Grid Setup */

/*!SECTION - Layout */

/*SECTION - Borders */

.border {
  border-radius: var(--border-radius);
  border: 1px solid var(--border, var(--border-active));
}

.border--active {
  --border: var(--border-active);
}
/*!SECTION - Borders */

/* SECTION - Text Colors */
.clr-white {
  color: var(--clr-white);
}

.clr-black {
  color: var(--clr-black);
}

.neutral-100 {
  color: var(--clr-neutral-100);
}

.neutral-160 {
  color: var(--clr-neutral-160);
}

.primary-100 {
  color: var(--clr-primary-100);
}
/*!SECTION Text Colors */

/* SECTION - Active*/
.active\:bg-neutral-40:active {
  background-color: var(--clr-neutral-160);
}
.active\:clr-white:active {
  color: var(--clr-white);
}
/*!SECTION - Active */

/*SECTION - Color Themes */
.bg-clr-white {
  background-color: var(--clr-white);
}

.bg-neutral-5 {
  background-color: var(--clr-neutral-5);
}

.hover\:grey-bg:hover {
  background-color: var(--clr-neutral-5);
  color: var(--clr-neutral-160);
  transition-duration: var(--transition-duration);
}

.dark-bg,
.hover\:dark-bg:hover,
.active\:dark-bg:active {
  background-color: var(--clr-neutral-160);
  color: var(--clr-white);
  transition-duration: var(--transition-duration);
}
/*!SECTION - Color Themes */

[hidden],
.hidden {
  display: none;
}

.invisible {
  visibility: hidden;
}

[x-cloak] {
  display: none !important;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.boolean input {
  padding: 0.5rem;
  margin-right: 0.5em;
  width: auto;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.hc-multiselect-toggle li {
  padding: 4px 6px;
  margin-top: 0;
  margin-block-end: 0;
  font-size: 0.875rem;
  line-height: 1;
}

.svg-icon {
  box-sizing: content-box;
  height: 1em;
}

.svg-icon {
  position: relative;
  bottom: -0.125em;
  display: inline-block;
  width: 1em;
  line-height: 1;
  flex-shrink: 0;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

.content img {
  max-width: 100%;
  height: auto;
}

.zd-comment {
  margin-block-end: 1rem;
}

.skeleton {
  position: relative;
  border-radius: 4px;
  height: 8rem;
  overflow: hidden;
  line-height: 0.6;
  background-color: #f9f9f9;
}

.skeleton::before {
  position: absolute;
  top: 0;
  width: 1000px;
  height: 100%;
  content: '';
  left: -1800px;
  animation: 1.5s ease-in-out 300ms infinite normal none running skeleton;
  background-image: linear-gradient(
    45deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
}

.skeleton::after {
  content: '';
  display: block;
}

.fixed-header {
  visibility: hidden;
  background-color: transparent;
  transition: background-color 0.15s ease-in-out;
}

.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 96;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.25);
  z-index: 98;
}

.menu-links-center::before {
  content: '';
  display: flex;
  margin-right: auto;
}

.menu-slide-in {
  position: fixed;
  bottom: 0;
  padding-left: 1rem;
  padding-right: 1rem;
  max-width: 20rem;
  box-shadow: 5px 0 40px rgba(0, 0, 0, 0.4);
}

.pagination {
  margin: 1rem 0;
  text-align: center;
}

.white-space-normal {
  white-space: normal;
}

.white-space-no-wrap {
  white-space: nowrap;
}

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

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

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

.break-normal {
  word-break: normal;
}

.break-words {
  word-wrap: break-word;
}

.break-spaces {
  word-wrap: break-spaces;
}

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

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.ratio {
  position: relative;
  height: 0;
}

.ratio iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 96;
}

.ratio-1-1 {
  padding-bottom: 100%;
}

.ratio-16-9 {
  padding-bottom: 56.25%;
}

.ratio-4-3 {
  padding-bottom: 75%;
}

.block {
  display: block !important;
}

.inline-block {
  display: inline-block !important;
}

.inline {
  display: inline !important;
}

.hidden {
  display: none !important;
}

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-visible {
  overflow: visible;
}

.overflow-scroll {
  overflow: scroll;
}

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

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

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

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

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

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

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

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

.scrolling-touch {
  -webkit-overflow-scrolling: touch;
}

.scrolling-auto {
  -webkit-overflow-scrolling: auto;
}

.scroll-x {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scroll-x::-webkit-scrollbar {
  display: none;
}

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

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

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

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

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

.align-content-stretch {
  align-content: stretch;
}

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

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

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

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

.align-items-stretch {
  align-items: stretch;
}

.align-self-auto {
  align-self: auto;
}

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

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

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

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

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

.flex-initial {
  flex: initial;
}

.flex-1 {
  flex: 1;
}

.flex-auto {
  flex: auto;
}

.flex-none {
  flex: none;
}

.flex-fill {
  flex: 1 1 auto;
}

.flex-grow {
  flex-grow: 1;
}

.flex-grow-0 {
  flex-grow: 0;
}

.flex-shrink {
  flex-shrink: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

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

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

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

.justify-content-start {
  justify-content: flex-start;
}

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

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

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

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

.border-collapse {
  border-collapse: collapse;
}

.border-separate {
  border-collapse: separate;
}

.table-auto {
  table-layout: auto;
}

.table-fixed {
  table-layout: fixed;
}

.scale-95 {
  transform: scale(0.95);
}

.scale-100 {
  transform: scale(1);
}

.scale-105 {
  transform: scale(1.05);
}

.scale-110 {
  transform: scale(1.1);
}

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

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

.rotate-180 {
  transform: rotate(180deg);
}

.rotate-270 {
  transform: rotate(270deg);
}

.translate-x-0 {
  transform: translateX(0);
}

.translate-x-full {
  transform: translateX(-100%);
}

.transition {
  transition: 0.3s;
}

.transition-fast {
  transition: 0.15s;
}

.timing-bounce {
  transition-timing-function: cubic-bezier(0.77, 0, 0.2, 2.25);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
}

.transition-none {
  transition-property: none;
}

.transition-all {
  transition-property: all;
}

.transition-colors {
  transition-property: background-color, border-color, color, fill, stroke;
}

.transition-opacity {
  transition-property: opacity;
}

.transition-shadow {
  transition-property: box-shadow;
}

.transition-transform {
  transition-property: transform;
}

.timing-bounce {
  transition-timing-function: cubic-bezier(0.77, 0, 0.2, 2.25);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
}

.transition-none {
  transition-duration: 0s;
}

.transition-slow {
  transition-duration: 0.5s;
}

.transition-medium {
  transition-duration: 0.3s;
}

.transition-fast {
  transition-duration: 0.15s;
}

.timing-bounce {
  transition-timing-function: cubic-bezier(0.77, 0, 0.2, 2.25);
}

.form input[type='submit']:hover {
  text-decoration: none;
  transition-duration: var(--transition-duration);
}

.form input[type='submit']:disabled,
.form input[type='submit'].is-disabled {
  cursor: not-allowed;
  opacity: 0.4;
  box-shadow: none;
  outline: none;
  border: none;
}

@media screen and (max-width: 44.9em) {
  [data-display='mobile-display'] {
    display: block;
  }
  [data-display='full-display'] {
    display: none;
  }
}
@media screen and (min-width: 45em) {
  [data-display='mobile-display'] {
    display: none;
  }
  [data-display='full-display'] {
    display: block;
  }
}